/* /Components/Layout/BlockedLayout.razor.rz.scp.css */
.blocked-layout-container[b-vxqv6p0dai] {
min-height: 100vh;
display: flex;
flex-direction: column;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}
.blocked-header[b-vxqv6p0dai] {
background-color: #ffffff;
border-bottom: 1px solid #e5e7eb;
padding: 1rem 2rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.blocked-brand[b-vxqv6p0dai] {
display: flex;
align-items: center;
gap: 0.75rem;
}
.blocked-brand .brand-icon[b-vxqv6p0dai] {
width: 40px;
height: 40px;
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.25rem;
}
.blocked-brand .brand-text[b-vxqv6p0dai] {
font-size: 1.25rem;
font-weight: 600;
color: #1f2937;
}
.blocked-main[b-vxqv6p0dai] {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.blocked-footer[b-vxqv6p0dai] {
background-color: #ffffff;
border-top: 1px solid #e5e7eb;
padding: 1rem 2rem;
text-align: center;
}
.blocked-footer p[b-vxqv6p0dai] {
margin: 0;
color: #6b7280;
font-size: 0.875rem;
}
@media (max-width: 576px) {
.blocked-header[b-vxqv6p0dai] {
padding: 0.75rem 1rem;
}
.blocked-brand .brand-icon[b-vxqv6p0dai] {
width: 32px;
height: 32px;
font-size: 1rem;
}
.blocked-brand .brand-text[b-vxqv6p0dai] {
font-size: 1rem;
}
.blocked-main[b-vxqv6p0dai] {
padding: 1rem;
}
}
/* /Components/Layout/DocsLayout.razor.rz.scp.css */
/* ========================================
DocsLayout — public API documentation shell
======================================== */
.docs-shell[b-g6iofqasgy] {
min-height: 100vh;
background: #ffffff;
color: #111827;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
display: flex;
flex-direction: column;
}
/* ─── Topbar ─── */
.docs-topbar[b-g6iofqasgy] {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid #e5e7eb;
}
.docs-topbar-inner[b-g6iofqasgy] {
max-width: 1400px;
margin: 0 auto;
padding: 0 24px;
height: 64px;
display: flex;
align-items: center;
gap: 24px;
}
.docs-brand[b-g6iofqasgy] {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: #111827;
flex-shrink: 0;
}
.brand-text[b-g6iofqasgy] {
display: flex;
flex-direction: column;
line-height: 1;
}
.brand-name[b-g6iofqasgy] {
font-size: 15px;
font-weight: 700;
letter-spacing: -0.2px;
}
.brand-tag[b-g6iofqasgy] {
font-size: 11px;
color: #6b7280;
margin-top: 3px;
text-transform: uppercase;
letter-spacing: 0.8px;
font-weight: 600;
}
.docs-search-wrap[b-g6iofqasgy] {
flex: 1;
max-width: 440px;
}
.docs-topnav[b-g6iofqasgy] {
display: flex;
align-items: center;
gap: 4px;
}
.docs-topnav-link[b-g6iofqasgy] {
color: #4b5563;
font-size: 14px;
font-weight: 500;
padding: 8px 12px;
border-radius: 6px;
text-decoration: none;
transition: all 0.12s ease;
}
.docs-topnav-link:hover[b-g6iofqasgy] {
background: #f3f4f6;
color: #111827;
}
.docs-scalar-btn[b-g6iofqasgy] { margin-left: 8px; }
.docs-mobile-toggle[b-g6iofqasgy] {
display: none;
background: none;
border: 1px solid #e5e7eb;
border-radius: 6px;
padding: 6px 10px;
font-size: 18px;
color: #4b5563;
cursor: pointer;
}
/* ─── Layout grid ─── */
.docs-layout[b-g6iofqasgy] {
display: grid;
grid-template-columns: 280px 1fr;
max-width: 1400px;
margin: 0 auto;
width: 100%;
flex: 1;
align-items: start;
}
.docs-sidebar[b-g6iofqasgy] {
position: sticky;
top: 64px;
height: calc(100vh - 64px);
overflow-y: auto;
padding: 32px 16px 32px 24px;
border-right: 1px solid #f3f4f6;
}
.docs-main[b-g6iofqasgy] {
padding: 40px 48px 80px;
min-width: 0;
max-width: 920px;
}
/* ─── Footer ─── */
.docs-footer[b-g6iofqasgy] {
margin-top: 80px;
padding: 24px 0;
border-top: 1px solid #e5e7eb;
display: flex;
justify-content: space-between;
align-items: center;
color: #6b7280;
font-size: 13px;
flex-wrap: wrap;
gap: 12px;
}
.docs-footer a[b-g6iofqasgy] {
color: #6b7280;
text-decoration: none;
}
.docs-footer a:hover[b-g6iofqasgy] { color: var(--brand-600); }
.docs-footer .sep[b-g6iofqasgy] { margin: 0 8px; opacity: 0.5; }
.docs-footer-links[b-g6iofqasgy] { display: flex; align-items: center; }
/* ─── Responsive ─── */
@media (max-width: 900px) {
.docs-layout[b-g6iofqasgy] { grid-template-columns: 1fr; }
.docs-sidebar[b-g6iofqasgy] {
position: fixed;
top: 64px;
left: 0;
bottom: 0;
width: 280px;
background: white;
transform: translateX(-100%);
transition: transform 0.2s ease;
z-index: 40;
border-right: 1px solid #e5e7eb;
}
.docs-menu-open .docs-sidebar[b-g6iofqasgy] { transform: translateX(0); }
.docs-main[b-g6iofqasgy] { padding: 24px 20px 60px; }
.docs-topnav-link[b-g6iofqasgy] { display: none; }
.docs-mobile-toggle[b-g6iofqasgy] { display: inline-flex; }
.docs-search-wrap[b-g6iofqasgy] { max-width: 260px; }
}
@media (max-width: 600px) {
/* min-width:0 lets the search field shrink past the intrinsic width of the
; without it the wider wordmark pushes the topbar past the
viewport instead of squeezing the field. */
.docs-search-wrap[b-g6iofqasgy] { max-width: 180px; min-width: 0; }
/* The logo was the product-name carrier on small screens; with it removed,
the text brand ("LP3 API · Docs") is now the only brand, so keep it
visible instead of hiding "LP3 API". */
.docs-scalar-btn[b-g6iofqasgy] { display: none; }
}
/* /Components/Layout/HelpDrawer.razor.rz.scp.css */
/* Context-aware Help drawer (feature 032). Slides in from the right, mirroring the app's
overlay chrome. Uses leca-theme tokens; interactive radius 10, flat surfaces, no gradients. */
.help-drawer-root[b-uf5v8nn6kd] {
position: fixed;
inset: 0;
z-index: 1080;
pointer-events: none;
visibility: hidden;
}
.help-drawer-root.open[b-uf5v8nn6kd] {
pointer-events: auto;
visibility: visible;
}
.help-drawer-backdrop[b-uf5v8nn6kd] {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.28);
opacity: 0;
transition: opacity 0.2s ease;
}
.help-drawer-root.open .help-drawer-backdrop[b-uf5v8nn6kd] {
opacity: 1;
}
.help-drawer-panel[b-uf5v8nn6kd] {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: min(440px, 100%);
background: var(--bg-surface);
border-left: 1px solid var(--border-light);
box-shadow: var(--shadow-xl);
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
.help-drawer-root.open .help-drawer-panel[b-uf5v8nn6kd] {
transform: translateX(0);
}
.help-drawer-header[b-uf5v8nn6kd] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.875rem 1rem;
border-bottom: 1px solid var(--border-light);
flex-shrink: 0;
}
.help-drawer-breadcrumb[b-uf5v8nn6kd] {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.35rem;
font-size: 0.8125rem;
color: var(--text-muted);
min-width: 0;
}
.help-drawer-crumb[b-uf5v8nn6kd] {
color: var(--text-muted);
text-decoration: none;
}
a.help-drawer-crumb:hover[b-uf5v8nn6kd] {
color: var(--brand-600);
text-decoration: underline;
}
.help-drawer-crumb-sep[b-uf5v8nn6kd] {
font-size: 0.625rem;
color: var(--text-disabled);
}
.help-drawer-close[b-uf5v8nn6kd] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: 1px solid var(--border-light);
border-radius: 10px;
background: var(--bg-surface);
color: var(--text-secondary);
cursor: pointer;
flex-shrink: 0;
transition: background 0.15s ease, color 0.15s ease;
}
.help-drawer-close:hover[b-uf5v8nn6kd] {
background: var(--bg-hover);
color: var(--text-primary);
}
.help-drawer-close:active[b-uf5v8nn6kd] {
transform: scale(0.96);
}
.help-drawer-body[b-uf5v8nn6kd] {
flex: 1;
overflow-y: auto;
padding: 1.25rem 1.25rem 2rem;
scroll-behavior: smooth;
}
.help-drawer-title[b-uf5v8nn6kd] {
font-size: 1.375rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text-primary);
margin: 0 0 0.35rem;
}
.help-drawer-summary[b-uf5v8nn6kd] {
font-size: 0.9375rem;
color: var(--text-secondary);
line-height: 1.55;
margin: 0 0 1rem;
}
.help-drawer-note[b-uf5v8nn6kd] {
display: flex;
align-items: flex-start;
gap: 0.5rem;
padding: 0.625rem 0.75rem;
margin-bottom: 1rem;
background: var(--bg-info);
border: 1px solid var(--info-200);
border-radius: 10px;
font-size: 0.8125rem;
color: var(--info-700);
}
.help-drawer-toc[b-uf5v8nn6kd] {
background: var(--bg-subtle);
border: 1px solid var(--border-light);
border-radius: 10px;
padding: 0.75rem 0.875rem;
margin-bottom: 1.25rem;
}
.help-drawer-toc-label[b-uf5v8nn6kd] {
display: block;
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
margin-bottom: 0.5rem;
}
.help-drawer-toc ul[b-uf5v8nn6kd] {
list-style: none;
margin: 0;
padding: 0;
}
.help-drawer-toc li[b-uf5v8nn6kd] {
margin: 0.15rem 0;
}
.help-drawer-toc a[b-uf5v8nn6kd] {
font-size: 0.8125rem;
color: var(--text-secondary);
text-decoration: none;
}
.help-drawer-toc a:hover[b-uf5v8nn6kd] {
color: var(--brand-600);
text-decoration: underline;
}
.help-drawer-toc-l3[b-uf5v8nn6kd] { padding-left: 0.85rem; }
.help-drawer-toc-l4[b-uf5v8nn6kd] { padding-left: 1.6rem; }
.help-drawer-content[b-uf5v8nn6kd] {
font-size: 0.9375rem;
line-height: 1.65;
color: var(--text-primary);
}
.help-drawer-content[b-uf5v8nn6kd] h1,
.help-drawer-content[b-uf5v8nn6kd] h2,
.help-drawer-content[b-uf5v8nn6kd] h3 {
letter-spacing: -0.01em;
scroll-margin-top: 0.5rem;
margin: 1.4rem 0 0.5rem;
}
.help-drawer-content[b-uf5v8nn6kd] h1 { font-size: 1.2rem; }
.help-drawer-content[b-uf5v8nn6kd] h2 { font-size: 1.05rem; }
.help-drawer-content[b-uf5v8nn6kd] h3 { font-size: 0.95rem; }
.help-drawer-content[b-uf5v8nn6kd] p,
.help-drawer-content[b-uf5v8nn6kd] li {
color: var(--text-secondary);
}
.help-drawer-content[b-uf5v8nn6kd] a {
color: var(--brand-600);
}
.help-drawer-content[b-uf5v8nn6kd] code {
background: var(--bg-subtle);
padding: 0.1rem 0.35rem;
border-radius: 6px;
font-size: 0.85em;
}
.help-drawer-content[b-uf5v8nn6kd] pre {
background: var(--bg-secondary);
padding: 0.75rem;
border-radius: 10px;
overflow-x: auto;
}
.help-drawer-content[b-uf5v8nn6kd] img {
max-width: 100%;
height: auto;
border-radius: 8px;
border: 1px solid var(--border-light);
}
.help-drawer-content[b-uf5v8nn6kd] table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
margin: 0.75rem 0;
}
.help-drawer-content[b-uf5v8nn6kd] th,
.help-drawer-content[b-uf5v8nn6kd] td {
border: 1px solid var(--border-light);
padding: 0.4rem 0.55rem;
text-align: left;
}
.help-drawer-content[b-uf5v8nn6kd] details.help-details {
border: 1px solid var(--border-light);
border-radius: 10px;
padding: 0.5rem 0.75rem;
margin: 0.75rem 0;
background: var(--bg-subtle);
}
.help-drawer-content[b-uf5v8nn6kd] details.help-details summary {
cursor: pointer;
font-weight: 600;
color: var(--text-primary);
}
.help-drawer-related[b-uf5v8nn6kd] {
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid var(--border-light);
}
.help-drawer-related h3[b-uf5v8nn6kd] {
font-size: 0.8125rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
margin: 0 0 0.5rem;
}
.help-drawer-related ul[b-uf5v8nn6kd] {
list-style: none;
margin: 0;
padding: 0;
}
.help-drawer-related li[b-uf5v8nn6kd] {
margin: 0.2rem 0;
}
.help-drawer-related a[b-uf5v8nn6kd] {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.875rem;
color: var(--brand-600);
text-decoration: none;
}
.help-drawer-related a:hover[b-uf5v8nn6kd] {
text-decoration: underline;
}
.help-drawer-footer[b-uf5v8nn6kd] {
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid var(--border-light);
}
.help-drawer-fullpage[b-uf5v8nn6kd] {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.5rem 0.9rem;
background: var(--brand-600);
color: var(--text-inverse);
border-radius: 10px;
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
transition: background 0.15s ease;
}
.help-drawer-fullpage:hover[b-uf5v8nn6kd] {
background: var(--brand-700);
color: var(--text-inverse);
}
.help-drawer-fullpage:active[b-uf5v8nn6kd] {
transform: scale(0.98);
}
.help-drawer-empty[b-uf5v8nn6kd] {
text-align: center;
padding: 2.5rem 1rem;
}
.help-drawer-empty-icon[b-uf5v8nn6kd] {
font-size: 2.5rem;
color: var(--brand-300);
}
.help-drawer-empty h2[b-uf5v8nn6kd] {
font-size: 1.1rem;
font-weight: 700;
color: var(--text-primary);
margin: 0.75rem 0 0.35rem;
}
.help-drawer-empty p[b-uf5v8nn6kd] {
font-size: 0.875rem;
color: var(--text-secondary);
margin: 0 auto 1.25rem;
max-width: 30ch;
line-height: 1.55;
}
/* Full-width sheet on mobile (< 768px). */
@media (max-width: 767px) {
.help-drawer-panel[b-uf5v8nn6kd] {
width: 100%;
border-left: none;
}
}
@media (prefers-reduced-motion: reduce) {
.help-drawer-panel[b-uf5v8nn6kd],
.help-drawer-backdrop[b-uf5v8nn6kd] {
transition: none;
}
}
/* /Components/Layout/LandingLayout.razor.rz.scp.css */
.landing-page-container[b-outtxs9lw9] {
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
background: #F8FAFC;
}
.landing-nav[b-outtxs9lw9] {
background: white;
border-bottom: 1px solid #E5E7EB;
padding: 12px 40px;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.landing-nav-content[b-outtxs9lw9] {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.landing-brand[b-outtxs9lw9] {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
}
/* lendiligence.png is a 443x61 horizontal wordmark; same height-only sizing as
the borrower payment header (Components/Pages/BorrowerPaymentPage.razor.css),
trimmed to 32px so the nav row keeps its original height. */
.landing-brand img[b-outtxs9lw9] {
height: 32px;
width: auto;
}
.landing-nav-links[b-outtxs9lw9] {
display: flex;
align-items: center;
gap: 10px;
}
.landing-nav-links .btn[b-outtxs9lw9] {
padding: 8px 20px;
font-size: 13px;
font-weight: 600;
border-radius: 8px;
border: none;
cursor: pointer;
transition: all 0.15s;
text-decoration: none;
}
.landing-nav-links .btn-primary[b-outtxs9lw9] {
background: var(--brand-500);
color: white;
}
.landing-nav-links .btn-primary:hover[b-outtxs9lw9] {
background: var(--brand-600, #0a526a);
}
.landing-nav-links .btn-outline-primary[b-outtxs9lw9] {
background: transparent;
color: var(--brand-500);
border: 1.5px solid var(--brand-500);
}
.landing-nav-links .btn-outline-primary:hover[b-outtxs9lw9] {
background: var(--brand-50, #f0f9ff);
}
.landing-main[b-outtxs9lw9] {
flex: 1;
width: 100%;
}
@media (max-width: 768px) {
.landing-nav[b-outtxs9lw9] {
padding: 10px 16px;
}
.landing-nav-links[b-outtxs9lw9] {
gap: 8px;
}
.landing-nav-links .btn[b-outtxs9lw9] {
padding: 6px 14px;
font-size: 12px;
}
.landing-brand img[b-outtxs9lw9] {
height: 26px;
}
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-f1470x2kop] {
position: relative;
display: flex;
flex-direction: column;
}
main[b-f1470x2kop] {
flex: 1;
}
.sidebar[b-f1470x2kop] {
background: var(--sidebar-bg);
}
.top-row[b-f1470x2kop] {
background-color: #f7f7f7;
border-bottom: 1px solid #d6d5d5;
justify-content: flex-end;
height: 3.5rem;
display: flex;
align-items: center;
}
.top-row[b-f1470x2kop] a, .top-row[b-f1470x2kop] .btn-link {
white-space: nowrap;
margin-left: 1.5rem;
text-decoration: none;
}
.top-row[b-f1470x2kop] a:hover, .top-row[b-f1470x2kop] .btn-link:hover {
text-decoration: underline;
}
.top-row[b-f1470x2kop] a:first-child {
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 640.98px) {
.top-row[b-f1470x2kop] {
justify-content: space-between;
}
.top-row[b-f1470x2kop] a, .top-row[b-f1470x2kop] .btn-link {
margin-left: 0;
}
}
@media (min-width: 641px) {
.page[b-f1470x2kop] {
flex-direction: row;
}
.sidebar[b-f1470x2kop] {
width: 250px;
height: 100vh;
position: sticky;
top: 0;
}
.top-row[b-f1470x2kop] {
position: sticky;
top: 0;
z-index: 1;
}
.top-row.auth[b-f1470x2kop] a:first-child {
flex: 1;
text-align: right;
width: 0;
}
.top-row[b-f1470x2kop], article[b-f1470x2kop] {
padding-left: 2rem !important;
padding-right: 1.5rem !important;
}
}
#blazor-error-ui[b-f1470x2kop] {
color-scheme: light only;
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
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-f1470x2kop] {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-9yh9h2lydv] {
appearance: none;
cursor: pointer;
width: 3.5rem;
height: 2.5rem;
color: white;
position: absolute;
top: 0.5rem;
right: 1rem;
border: 1px solid rgba(255, 255, 255, 0.1);
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}
.navbar-toggler:checked[b-9yh9h2lydv] {
background-color: rgba(255, 255, 255, 0.5);
}
.top-row[b-9yh9h2lydv] {
min-height: 3.5rem;
background-color: rgba(0,0,0,0.4);
}
.navbar-brand[b-9yh9h2lydv] {
font-size: 1.1rem;
}
.bi[b-9yh9h2lydv] {
display: inline-block;
position: relative;
width: 1.25rem;
height: 1.25rem;
margin-right: 0.75rem;
top: -1px;
background-size: cover;
}
.bi-house-door-fill-nav-menu[b-9yh9h2lydv] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}
.bi-plus-square-fill-nav-menu[b-9yh9h2lydv] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}
.bi-list-nested-nav-menu[b-9yh9h2lydv] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}
.nav-item[b-9yh9h2lydv] {
font-size: 0.9rem;
padding-bottom: 0.5rem;
}
.nav-item:first-of-type[b-9yh9h2lydv] {
padding-top: 1rem;
}
.nav-item:last-of-type[b-9yh9h2lydv] {
padding-bottom: 1rem;
}
.nav-item[b-9yh9h2lydv] .nav-link {
color: #d7d7d7;
background: none;
border: none;
border-radius: 4px;
height: 3rem;
display: flex;
align-items: center;
line-height: 3rem;
width: 100%;
}
.nav-item[b-9yh9h2lydv] a.active {
background-color: rgba(255,255,255,0.37);
color: white;
}
.nav-item[b-9yh9h2lydv] .nav-link:hover {
background-color: rgba(255,255,255,0.1);
color: white;
}
.nav-scrollable[b-9yh9h2lydv] {
display: none;
}
.navbar-toggler:checked ~ .nav-scrollable[b-9yh9h2lydv] {
display: block;
}
@media (min-width: 641px) {
.navbar-toggler[b-9yh9h2lydv] {
display: none;
}
.nav-scrollable[b-9yh9h2lydv] {
/* Never collapse the sidebar for wide screens */
display: block;
/* Allow sidebar to scroll for tall menus */
height: calc(100vh - 3.5rem);
overflow-y: auto;
}
}
/* /Components/Layout/PrintableLayout.razor.rz.scp.css */
.printable-layout[b-qocul9y5si] {
min-height: 100vh;
background: #f1f5f9;
}
@media print {
.printable-layout[b-qocul9y5si] {
background: white;
}
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-4eqpge4c3g],
.components-reconnect-repeated-attempt-visible[b-4eqpge4c3g],
.components-reconnect-failed-visible[b-4eqpge4c3g],
.components-pause-visible[b-4eqpge4c3g],
.components-resume-failed-visible[b-4eqpge4c3g],
.components-rejoining-animation[b-4eqpge4c3g] {
display: none;
}
#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-4eqpge4c3g],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-4eqpge4c3g],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-4eqpge4c3g],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-4eqpge4c3g],
#components-reconnect-modal.components-reconnect-retrying[b-4eqpge4c3g],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-4eqpge4c3g],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-4eqpge4c3g],
#components-reconnect-modal.components-reconnect-failed[b-4eqpge4c3g],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-4eqpge4c3g] {
display: block;
}
#components-reconnect-modal[b-4eqpge4c3g] {
background-color: white;
width: 20rem;
margin: 20vh auto;
padding: 2rem;
border: 0;
border-radius: 0.5rem;
box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
opacity: 0;
transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
animation: components-reconnect-modal-fadeOutOpacity-b-4eqpge4c3g 0.5s both;
&[open]
{
animation: components-reconnect-modal-slideUp-b-4eqpge4c3g 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-4eqpge4c3g 0.5s ease-in-out 0.3s;
animation-fill-mode: both;
}
}
#components-reconnect-modal[b-4eqpge4c3g]::backdrop {
background-color: rgba(0, 0, 0, 0.4);
animation: components-reconnect-modal-fadeInOpacity-b-4eqpge4c3g 0.5s ease-in-out;
opacity: 1;
}
@keyframes components-reconnect-modal-slideUp-b-4eqpge4c3g {
0% {
transform: translateY(30px) scale(0.95);
}
100% {
transform: translateY(0);
}
}
@keyframes components-reconnect-modal-fadeInOpacity-b-4eqpge4c3g {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes components-reconnect-modal-fadeOutOpacity-b-4eqpge4c3g {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.components-reconnect-container[b-4eqpge4c3g] {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
#components-reconnect-modal p[b-4eqpge4c3g] {
margin: 0;
text-align: center;
}
#components-reconnect-modal button[b-4eqpge4c3g] {
border: 0;
background-color: #6b9ed2;
color: white;
padding: 4px 24px;
border-radius: 4px;
}
#components-reconnect-modal button:hover[b-4eqpge4c3g] {
background-color: #3b6ea2;
}
#components-reconnect-modal button:active[b-4eqpge4c3g] {
background-color: #6b9ed2;
}
.components-rejoining-animation[b-4eqpge4c3g] {
position: relative;
width: 80px;
height: 80px;
}
.components-rejoining-animation div[b-4eqpge4c3g] {
position: absolute;
border: 3px solid #0087ff;
opacity: 1;
border-radius: 50%;
animation: components-rejoining-animation-b-4eqpge4c3g 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.components-rejoining-animation div:nth-child(2)[b-4eqpge4c3g] {
animation-delay: -0.5s;
}
@keyframes components-rejoining-animation-b-4eqpge4c3g {
0% {
top: 40px;
left: 40px;
width: 0;
height: 0;
opacity: 0;
}
4.9% {
top: 40px;
left: 40px;
width: 0;
height: 0;
opacity: 0;
}
5% {
top: 40px;
left: 40px;
width: 0;
height: 0;
opacity: 1;
}
100% {
top: 0px;
left: 0px;
width: 80px;
height: 80px;
opacity: 0;
}
}
/* /Components/Layout/SigningLayout.razor.rz.scp.css */
.signing-layout[b-tm3drj44uo] {
min-height: 100vh;
background: #F8FAFC;
display: flex;
flex-direction: column;
}
/* /Components/Pages/Account/AccessDeniedPage.razor.rz.scp.css */
.error-container[b-6rq998sga2] {
display: flex;
align-items: center;
justify-content: center;
min-height: 70vh;
padding: 2rem;
}
.error-card[b-6rq998sga2] {
background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%);
border-radius: 12px;
padding: 3rem;
max-width: 500px;
width: 100%;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border: 1px solid #fecaca;
}
.error-icon[b-6rq998sga2] {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
font-size: 2.5rem;
}
.error-icon-denied[b-6rq998sga2] {
background-color: #fee2e2;
color: var(--error-600);
}
.error-card h1[b-6rq998sga2] {
color: #1a1a1a;
font-size: 1.75rem;
font-weight: 600;
margin-bottom: 0.75rem;
}
.error-message[b-6rq998sga2] {
color: #666;
font-size: 1.1rem;
margin-bottom: 1rem;
}
.attempted-url[b-6rq998sga2] {
background-color: #f8f9fa;
border-radius: 8px;
padding: 0.75rem 1rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
}
.attempted-url span[b-6rq998sga2] {
color: #666;
display: block;
margin-bottom: 0.25rem;
}
.attempted-url code[b-6rq998sga2] {
color: var(--error-600);
background-color: transparent;
font-size: 0.95rem;
word-break: break-all;
}
.error-actions[b-6rq998sga2] {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}
.error-actions .btn[b-6rq998sga2] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 500;
text-decoration: none;
transition: all 0.2s;
min-width: 200px;
}
.error-actions .btn-primary[b-6rq998sga2] {
background-color: #f87171;
color: white;
border: none;
}
.error-actions .btn-primary:hover[b-6rq998sga2] {
background-color: #ef4444;
}
.error-actions .btn-outline-secondary[b-6rq998sga2] {
background-color: transparent;
color: #9ca3af;
border: 1px solid #d1d5db;
}
.error-actions .btn-outline-secondary:hover[b-6rq998sga2] {
background-color: #f3f4f6;
color: #6b7280;
}
@media (max-width: 576px) {
.error-card[b-6rq998sga2] {
padding: 2rem 1.5rem;
}
.error-icon[b-6rq998sga2] {
width: 64px;
height: 64px;
font-size: 2rem;
}
.error-card h1[b-6rq998sga2] {
font-size: 1.5rem;
}
.error-actions .btn[b-6rq998sga2] {
width: 100%;
}
}
/* /Components/Pages/Account/NoTenantAssignedPage.razor.rz.scp.css */
/* ===========================
No Tenant Assigned Page
=========================== */
.no-tenant-container[b-69a1larp95] {
display: flex;
align-items: center;
justify-content: center;
min-height: calc(100vh - 140px);
padding: 2rem;
}
.no-tenant-card[b-69a1larp95] {
background: #ffffff;
border-radius: 12px;
max-width: 480px;
width: 100%;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}
/* Header Section */
.card-header-section[b-69a1larp95] {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
padding: 1.5rem 1.5rem 1.25rem;
text-align: center;
border-bottom: 1px solid #fcd34d;
border-radius: 12px 12px 0 0;
}
.status-icon[b-69a1larp95] {
width: 56px;
height: 56px;
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 0.75rem;
font-size: 1.5rem;
color: white;
box-shadow: 0 3px 8px rgba(245, 158, 11, 0.3);
}
.card-header-section h1[b-69a1larp95] {
color: #92400e;
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.25rem;
}
.card-header-section .subtitle[b-69a1larp95] {
color: #b45309;
font-size: 0.8rem;
margin: 0;
line-height: 1.4;
}
/* User Info Section */
.user-info-section[b-69a1larp95] {
display: flex;
flex-direction: column;
gap: 0;
background: #fafafa;
border-bottom: 1px solid #e5e7eb;
}
.info-item[b-69a1larp95] {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.625rem 1rem;
border-bottom: 1px solid #e5e7eb;
}
.info-item:last-child[b-69a1larp95] {
border-bottom: none;
}
.info-icon[b-69a1larp95] {
width: 32px;
height: 32px;
background: #f3f4f6;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #6b7280;
font-size: 0.9rem;
flex-shrink: 0;
}
.info-content[b-69a1larp95] {
display: flex;
flex-direction: column;
gap: 0;
min-width: 0;
}
.info-label[b-69a1larp95] {
font-size: 0.65rem;
color: #9ca3af;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
}
.info-value[b-69a1larp95] {
font-size: 0.85rem;
color: #1f2937;
font-weight: 500;
word-break: break-all;
}
/* Content Section */
.content-section[b-69a1larp95] {
padding: 1rem;
overflow: visible;
}
/* Status Card - Pending */
.status-card[b-69a1larp95] {
border-radius: 12px;
overflow: hidden;
}
.status-pending[b-69a1larp95] {
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
border: 1px solid #93c5fd;
}
.status-header[b-69a1larp95] {
padding: 1rem 1.25rem;
border-bottom: 1px solid #93c5fd;
}
.status-badge[b-69a1larp95] {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: #3b82f6;
color: white;
padding: 0.375rem 0.875rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
}
.status-badge i[b-69a1larp95] {
animation: pulse-b-69a1larp95 2s infinite;
}
@keyframes pulse-b-69a1larp95 {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.status-body[b-69a1larp95] {
padding: 1.25rem;
}
.status-body h4[b-69a1larp95] {
color: #1e40af;
font-size: 1.1rem;
font-weight: 600;
margin: 0 0 0.5rem;
}
.status-body > p[b-69a1larp95] {
color: #3b82f6;
font-size: 0.9rem;
margin: 0 0 1rem;
}
.request-details[b-69a1larp95] {
background: rgba(255, 255, 255, 0.6);
border-radius: 8px;
padding: 0.75rem 1rem;
}
.detail-row[b-69a1larp95] {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0;
color: #1e3a5f;
font-size: 0.9rem;
}
.detail-row i[b-69a1larp95] {
color: #3b82f6;
width: 18px;
}
.detail-row strong[b-69a1larp95] {
margin-left: auto;
color: #1e40af;
}
.status-footer[b-69a1larp95] {
padding: 1rem 1.25rem;
background: rgba(255, 255, 255, 0.4);
border-top: 1px solid #93c5fd;
text-align: center;
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}
.status-footer-secondary[b-69a1larp95] {
display: flex;
gap: 0.5rem;
justify-content: center;
}
.status-footer-secondary .btn-sm[b-69a1larp95] {
font-size: 0.75rem;
padding: 0.25rem 0.625rem;
}
/* Request Form Card */
.request-form-card[b-69a1larp95] {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 10px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.form-header[b-69a1larp95] {
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
padding: 0.75rem 1rem;
text-align: center;
border-bottom: 1px solid #bbf7d0;
border-radius: 10px 10px 0 0;
}
.form-header i[b-69a1larp95] {
font-size: 1.25rem;
color: var(--success-600);
margin-bottom: 0.125rem;
display: block;
}
.form-header h4[b-69a1larp95] {
color: #166534;
font-size: 0.9rem;
font-weight: 600;
margin: 0 0 0.125rem;
}
.form-header p[b-69a1larp95] {
color: #15803d;
font-size: 0.7rem;
margin: 0;
}
.request-form[b-69a1larp95] {
padding: 0;
}
.form-body[b-69a1larp95] {
padding: 0.875rem 1rem 1rem;
overflow: visible;
}
.form-section[b-69a1larp95] {
margin-bottom: 0.875rem;
padding-bottom: 0.875rem;
border-bottom: 1px solid #f1f5f9;
position: relative;
}
.form-section:last-of-type[b-69a1larp95] {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.form-label[b-69a1larp95] {
display: flex;
align-items: center;
gap: 0.25rem;
font-weight: 600;
color: #1f2937;
margin-bottom: 0.375rem;
font-size: 0.8rem;
}
.form-label i[b-69a1larp95] {
color: #6b7280;
font-size: 0.8rem;
}
.optional-badge[b-69a1larp95] {
font-size: 0.6rem;
background: #f3f4f6;
color: #6b7280;
padding: 0.1rem 0.4rem;
border-radius: 8px;
font-weight: 500;
margin-left: 0.25rem;
}
/* Bank Selector */
.bank-selector[b-69a1larp95] {
position: relative;
display: flex;
align-items: center;
gap: 0.5rem;
}
.bank-dropdown[b-69a1larp95] {
flex: 1;
position: relative;
}
.bank-dropdown-btn[b-69a1larp95] {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0.5rem 0.75rem;
background: white;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 0.8rem;
color: #6b7280;
text-align: left;
transition: all 0.2s;
}
.bank-dropdown-btn:hover[b-69a1larp95] {
border-color: #9ca3af;
background: #fafafa;
}
.bank-dropdown-btn:focus[b-69a1larp95] {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}
.bank-dropdown-btn span[b-69a1larp95] {
flex: 1;
}
.bank-dropdown-btn[b-69a1larp95]::after {
margin-left: auto;
}
.bank-dropdown.show .bank-dropdown-btn[b-69a1larp95] {
border-color: #3b82f6;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}
.bank-dropdown-menu[b-69a1larp95] {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 1000;
background: white;
border: 1px solid #e5e7eb;
border-radius: 8px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
margin-top: 4px;
display: none;
overflow: hidden;
}
.bank-dropdown-menu.show[b-69a1larp95] {
display: block;
}
.dropdown-search[b-69a1larp95] {
padding: 0.625rem 0.75rem;
position: relative;
background: #f9fafb;
border-bottom: 1px solid #e5e7eb;
}
.dropdown-search i[b-69a1larp95] {
position: absolute;
left: 1.125rem;
top: 50%;
transform: translateY(-50%);
color: #9ca3af;
font-size: 0.85rem;
}
.dropdown-search input[b-69a1larp95] {
width: 100%;
padding: 0.5rem 0.75rem 0.5rem 2rem;
border: 1px solid #e5e7eb;
border-radius: 6px;
font-size: 0.8rem;
background: white;
}
.dropdown-search input:focus[b-69a1larp95] {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}
.dropdown-items[b-69a1larp95] {
max-height: 180px;
overflow-y: auto;
padding: 0.25rem 0;
}
.dropdown-item[b-69a1larp95] {
display: flex;
align-items: center;
width: 100%;
padding: 0.5rem 0.875rem;
border: none;
background: none;
text-align: left;
font-size: 0.8rem;
color: #374151;
cursor: pointer;
transition: background 0.15s;
}
.dropdown-item:hover[b-69a1larp95] {
background: #f3f4f6;
}
.dropdown-item.active[b-69a1larp95] {
background: #eff6ff;
color: #1d4ed8;
}
.dropdown-item i[b-69a1larp95] {
color: #9ca3af;
font-size: 0.85rem;
}
.dropdown-item.active i[b-69a1larp95] {
color: #3b82f6;
}
.bank-code[b-69a1larp95] {
margin-left: auto;
font-size: 0.65rem;
color: #6b7280;
background: #f3f4f6;
padding: 0.125rem 0.4rem;
border-radius: 4px;
font-weight: 500;
}
.dropdown-item-empty[b-69a1larp95] {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 1.25rem;
color: #9ca3af;
font-size: 0.8rem;
}
.dropdown-item-empty i[b-69a1larp95] {
font-size: 1.5rem;
opacity: 0.5;
}
.dropdown-item-other[b-69a1larp95] {
margin: 0.25rem 0.5rem 0.5rem;
border-radius: 6px;
color: #3b82f6;
font-weight: 500;
background: #f0f9ff;
font-size: 0.8rem;
}
.dropdown-item-other:hover[b-69a1larp95] {
background: #e0f2fe;
}
.btn-clear[b-69a1larp95] {
padding: 0.375rem;
color: #9ca3af;
border-radius: 6px;
transition: all 0.2s;
}
.btn-clear:hover[b-69a1larp95] {
color: #ef4444;
background: #fef2f2;
}
.manual-bank-input[b-69a1larp95] {
animation: slideDown-b-69a1larp95 0.2s ease-out;
background: #fefce8;
border: 1px solid #fde68a;
border-radius: 8px;
padding: 0.75rem 1rem;
}
.manual-bank-input .form-label[b-69a1larp95] {
margin-bottom: 0.375rem;
font-size: 0.8rem;
}
@keyframes slideDown-b-69a1larp95 {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Form Controls */
.form-control[b-69a1larp95] {
padding: 0.5rem 0.75rem;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 0.8rem;
transition: all 0.2s;
background: white;
}
.form-control:focus[b-69a1larp95] {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}
.form-control[b-69a1larp95]::placeholder {
color: #9ca3af;
font-size: 0.8rem;
}
textarea.form-control[b-69a1larp95] {
resize: vertical;
min-height: 60px;
line-height: 1.4;
}
/* Alert */
.alert[b-69a1larp95] {
border-radius: 8px;
padding: 0.625rem 0.875rem;
font-size: 0.8rem;
margin-bottom: 1rem;
}
.alert-danger[b-69a1larp95] {
background: #fef2f2;
border: 1px solid #fecaca;
color: var(--error-600);
}
/* Form Actions */
.form-actions[b-69a1larp95] {
display: flex;
gap: 0.5rem;
justify-content: flex-end;
padding-top: 0.75rem;
border-top: 1px solid #f1f5f9;
margin-top: 0.125rem;
}
.form-actions .btn[b-69a1larp95] {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.4rem 0.875rem;
border-radius: 8px;
font-weight: 500;
font-size: 0.8rem;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.form-actions .btn-primary[b-69a1larp95] {
background: var(--brand-600, #004980);
border: none;
color: white;
padding: 0.4rem 1rem;
}
.form-actions .btn-primary:hover:not(:disabled)[b-69a1larp95] {
background: var(--brand-700, #003760);
}
.form-actions .btn-primary:disabled[b-69a1larp95] {
opacity: 0.6;
cursor: not-allowed;
}
.form-actions .btn-outline-secondary[b-69a1larp95] {
background: transparent;
border: 1px solid #E2E8F0;
color: #64748B;
}
.form-actions .btn-outline-secondary:hover[b-69a1larp95] {
background: #F1F5F9;
border-color: #E2E8F0;
color: #0F172A;
}
/* CTA Section */
.cta-section[b-69a1larp95] {
text-align: center;
padding: 0.25rem;
}
.cta-message[b-69a1larp95] {
background: #f0f9ff;
border: 1px solid #bae6fd;
border-radius: 8px;
padding: 0.875rem 1rem;
margin-bottom: 1.25rem;
display: flex;
align-items: flex-start;
gap: 0.75rem;
text-align: left;
}
.cta-message i[b-69a1larp95] {
color: #0ea5e9;
font-size: 1.125rem;
flex-shrink: 0;
margin-top: 0;
}
.cta-message p[b-69a1larp95] {
color: #0369a1;
font-size: 0.8rem;
margin: 0;
line-height: 1.4;
}
.action-buttons[b-69a1larp95] {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}
.action-buttons .btn-lg[b-69a1larp95] {
padding: 0.625rem 1.5rem;
font-size: 0.875rem;
border-radius: 10px;
}
.action-buttons .btn-primary[b-69a1larp95] {
background: var(--brand-600, #004980);
border: none;
color: white;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.action-buttons .btn-primary:hover[b-69a1larp95] {
background: var(--brand-700, #003760);
}
.secondary-actions[b-69a1larp95] {
display: flex;
gap: 0.75rem;
}
.secondary-actions .btn[b-69a1larp95] {
padding: 0.5rem 1rem;
font-size: 0.875rem;
border-radius: 8px;
}
.secondary-actions .btn-outline-secondary[b-69a1larp95] {
background: transparent;
border: 1px solid #E2E8F0;
color: #64748B;
}
.secondary-actions .btn-outline-secondary:hover[b-69a1larp95] {
background: #F1F5F9;
border-color: #E2E8F0;
color: #0F172A;
}
/* Responsive Design */
@media (max-width: 576px) {
.no-tenant-container[b-69a1larp95] {
padding: 1rem;
}
.no-tenant-card[b-69a1larp95] {
border-radius: 12px;
}
.card-header-section[b-69a1larp95] {
padding: 2rem 1.5rem 1.5rem;
}
.status-icon[b-69a1larp95] {
width: 64px;
height: 64px;
font-size: 1.75rem;
}
.card-header-section h1[b-69a1larp95] {
font-size: 1.5rem;
}
.info-item[b-69a1larp95] {
padding: 0.875rem 1rem;
}
.content-section[b-69a1larp95] {
padding: 1rem;
}
.form-header[b-69a1larp95] {
padding: 1.25rem 1rem;
}
.request-form[b-69a1larp95] {
padding: 1rem;
}
.form-actions[b-69a1larp95] {
flex-direction: column-reverse;
}
.form-actions .btn[b-69a1larp95] {
width: 100%;
}
.secondary-actions[b-69a1larp95] {
flex-direction: column;
width: 100%;
}
.secondary-actions .btn[b-69a1larp95] {
width: 100%;
}
.detail-row[b-69a1larp95] {
flex-wrap: wrap;
}
.detail-row strong[b-69a1larp95] {
width: 100%;
margin-left: 26px;
margin-top: 0.25rem;
}
}
/* Contact Support Modal — chrome (radius, white header, footer strip, backdrop)
comes from the global wwwroot/css/modal-theme.css. */
.support-intro[b-69a1larp95] {
color: #64748b;
font-size: 0.85rem;
margin-bottom: 1rem;
line-height: 1.5;
}
.contact-options[b-69a1larp95] {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1rem;
}
.contact-option[b-69a1larp95] {
display: flex;
align-items: center;
gap: 0.875rem;
padding: 0.75rem;
background: #f8fafc;
border-radius: 8px;
border: 1px solid #e2e8f0;
}
.contact-icon[b-69a1larp95] {
width: 36px;
height: 36px;
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 0.9rem;
flex-shrink: 0;
}
.contact-details[b-69a1larp95] {
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.contact-label[b-69a1larp95] {
font-size: 0.7rem;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
}
.contact-value[b-69a1larp95] {
font-size: 0.85rem;
color: #1e293b;
font-weight: 500;
text-decoration: none;
}
.contact-value:hover[b-69a1larp95] {
color: #3b82f6;
}
.support-note[b-69a1larp95] {
background: #fefce8;
border: 1px solid #fde68a;
border-radius: 8px;
padding: 0.75rem;
display: flex;
align-items: flex-start;
gap: 0.5rem;
font-size: 0.8rem;
color: #854d0e;
}
.support-note i[b-69a1larp95] {
color: #ca8a04;
flex-shrink: 0;
margin-top: 0.125rem;
}
.contact-modal .modal-footer .btn[b-69a1larp95] {
font-size: 0.85rem;
padding: 0.55rem 1.15rem;
border-radius: 10px;
font-weight: 600;
}
.contact-modal .modal-footer .btn-secondary[b-69a1larp95] {
background: transparent;
border: 1px solid #E2E8F0;
color: #64748B;
}
.contact-modal .modal-footer .btn-secondary:hover[b-69a1larp95] {
background: #F1F5F9;
color: #0F172A;
}
.contact-modal .modal-footer .btn-primary[b-69a1larp95] {
background: var(--brand-600, #004980);
border: none;
}
.contact-modal .modal-footer .btn-primary:hover[b-69a1larp95] {
background: var(--brand-700, #003760);
}
.modal-backdrop[b-69a1larp95] {
z-index: 1040;
}
.modal[b-69a1larp95] {
z-index: 1050;
}
/* /Components/Pages/Account/ProfilePage.razor.rz.scp.css */
.profile-container[b-yvvg6bq6rq] {
padding: 2rem;
max-width: 900px;
margin: 0 auto;
}
.page-header[b-yvvg6bq6rq] {
margin-bottom: 2rem;
}
.page-header h2[b-yvvg6bq6rq] {
color: #1a1a1a;
font-size: 2rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.page-header p[b-yvvg6bq6rq] {
color: #666;
font-size: 1rem;
}
.profile-content[b-yvvg6bq6rq] {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.profile-card[b-yvvg6bq6rq] {
background: white;
border-radius: 12px;
padding: 2rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
gap: 2rem;
}
.profile-avatar[b-yvvg6bq6rq] {
flex-shrink: 0;
}
.avatar-img[b-yvvg6bq6rq] {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #f0f0f0;
}
.avatar-placeholder[b-yvvg6bq6rq] {
width: 120px;
height: 120px;
border-radius: 50%;
background: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
color: #999;
}
.profile-info[b-yvvg6bq6rq] {
flex: 1;
}
.profile-info h3[b-yvvg6bq6rq] {
color: #1a1a1a;
font-size: 1.75rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.profile-email[b-yvvg6bq6rq] {
color: #666;
font-size: 1rem;
margin-bottom: 1rem;
}
.profile-roles[b-yvvg6bq6rq] {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.badge[b-yvvg6bq6rq] {
display: inline-block;
padding: 0.35rem 0.65rem;
border-radius: 6px;
font-size: 0.875rem;
font-weight: 500;
}
.bg-primary[b-yvvg6bq6rq] {
background-color: #0d6efd;
color: white;
}
.text-muted[b-yvvg6bq6rq] {
color: #999;
}
.account-actions[b-yvvg6bq6rq] {
display: flex;
gap: 1rem;
}
.btn[b-yvvg6bq6rq] {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
transition: all 0.2s;
border: none;
cursor: pointer;
}
.btn-danger[b-yvvg6bq6rq] {
background-color: #dc3545;
color: white;
}
.btn-danger:hover[b-yvvg6bq6rq] {
background-color: #c82333;
}
.claims-section[b-yvvg6bq6rq] {
background: white;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.claims-section h4[b-yvvg6bq6rq] {
color: #1a1a1a;
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1rem;
}
.claims-grid[b-yvvg6bq6rq] {
display: flex;
flex-direction: column;
gap: 0.5rem;
max-height: 400px;
overflow-y: auto;
}
.claim-row[b-yvvg6bq6rq] {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 1rem;
padding: 0.75rem;
border-bottom: 1px solid #f0f0f0;
}
.claim-row:last-child[b-yvvg6bq6rq] {
border-bottom: none;
}
.claim-type[b-yvvg6bq6rq] {
font-weight: 600;
color: #555;
word-break: break-word;
}
.claim-value[b-yvvg6bq6rq] {
color: #333;
word-break: break-all;
}
.not-authorized[b-yvvg6bq6rq] {
background: white;
border-radius: 12px;
padding: 2rem;
text-align: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* /Components/Pages/Admin/AdminActivityLogPage.razor.rz.scp.css */
.content-header[b-yvabkvhu23] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.content-title[b-yvabkvhu23] { font-size: 1.5rem; font-weight: 700; color: #1a1a2e; margin: 0; }
.content-subtitle[b-yvabkvhu23] { font-size: 0.8rem; color: #94A3B8; margin: 2px 0 0; }
.header-actions[b-yvabkvhu23] { display: flex; align-items: center; gap: 8px; }
.btn-header-action[b-yvabkvhu23] { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #E2E8F0; background: white; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #64748B; transition: all 0.2s; }
.btn-header-action:hover[b-yvabkvhu23] { background: #F1F5F9; color: #334155; }
/* /Components/Pages/Admin/AdminAlertsPage.razor.rz.scp.css */
.content-header[b-rzbixgxzl7] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.content-title[b-rzbixgxzl7] { font-size: 1.5rem; font-weight: 700; color: #1a1a2e; margin: 0; }
.content-subtitle[b-rzbixgxzl7] { font-size: 0.8rem; color: #94A3B8; margin: 2px 0 0; }
.header-actions[b-rzbixgxzl7] { display: flex; align-items: center; gap: 8px; }
.btn-header-action[b-rzbixgxzl7] { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #E2E8F0; background: white; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #64748B; transition: all 0.2s; }
.btn-header-action:hover[b-rzbixgxzl7] { background: #F1F5F9; color: #334155; }
/* /Components/Pages/Admin/AdminDashboardPage.razor.rz.scp.css */
/* ========================================
Admin Dashboard Styles - Professional Theme Aligned
======================================== */
/* Dashboard Header */
.dashboard-header[b-je66ibfrcu] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 32px;
padding-bottom: 24px;
border-bottom: 1px solid var(--neutral-200);
}
.header-content[b-je66ibfrcu] {
flex: 1;
}
.dashboard-title[b-je66ibfrcu] {
font-size: 28px;
font-weight: 700;
color: var(--text-primary);
margin: 0 0 8px 0;
letter-spacing: -0.5px;
}
.dashboard-subtitle[b-je66ibfrcu] {
font-size: 14px;
color: var(--text-muted);
margin: 0;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-weight: 500;
}
.separator[b-je66ibfrcu] {
color: var(--text-muted);
opacity: 0.5;
margin: 0 4px;
}
.header-actions[b-je66ibfrcu] {
display: flex;
align-items: center;
gap: 12px;
}
/* Header Actions & Buttons Alignment */
.header-actions > *[b-je66ibfrcu] {
height: 40px; /* Enforce consistent height for all header actions */
}
/* Connection Indicator */
.connection-indicator[b-je66ibfrcu] {
display: flex;
align-items: center;
justify-content: center; /* Center content */
width: 40px; /* Fixed width to make it square */
height: 40px; /* Fixed height */
padding: 0; /* Remove padding */
border-radius: 8px;
background: white;
border: 1px solid var(--neutral-200);
color: var(--text-secondary);
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.connection-indicator i[b-je66ibfrcu] {
font-size: 12px;
margin: 0; /* Remove margin for perfect centering */
}
.connection-indicator.connected i[b-je66ibfrcu] {
color: var(--success-500);
animation: pulse-b-je66ibfrcu 2s ease-in-out infinite;
}
.connection-indicator.reconnecting i[b-je66ibfrcu] {
color: var(--warning-500);
animation: blink-b-je66ibfrcu 1s ease-in-out infinite;
}
.connection-indicator.disconnected i[b-je66ibfrcu] {
color: var(--error-500);
}
/* Refresh Button */
.btn-refresh[b-je66ibfrcu] {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--neutral-300);
background: white;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
color: var(--text-secondary);
font-size: 18px;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.btn-refresh:hover:not(:disabled)[b-je66ibfrcu] {
border-color: var(--brand-300);
color: var(--brand-600);
background: var(--brand-50);
}
.btn-refresh.spinning i[b-je66ibfrcu] {
animation: spin-b-je66ibfrcu 1s linear infinite;
}
@keyframes spin-b-je66ibfrcu { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pulse-b-je66ibfrcu { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes blink-b-je66ibfrcu { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0.3; } }
/* Entrance Animations */
@keyframes fadeInUp-b-je66ibfrcu {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.admin-stat-card[b-je66ibfrcu] {
display: flex;
flex-direction: column;
animation: fadeInUp-b-je66ibfrcu 0.5s ease-out backwards;
}
/* Staggered animation delays for stat cards */
.admin-stat-card:nth-child(1)[b-je66ibfrcu] { animation-delay: 0.1s; }
.admin-stat-card:nth-child(2)[b-je66ibfrcu] { animation-delay: 0.2s; }
.admin-stat-card:nth-child(3)[b-je66ibfrcu] { animation-delay: 0.3s; }
.admin-stat-card:nth-child(4)[b-je66ibfrcu] { animation-delay: 0.4s; }
/* Animate main sections */
.row[b-je66ibfrcu] {
animation: fadeInUp-b-je66ibfrcu 0.6s ease-out backwards;
}
/* Stagger row animations */
.row:nth-of-type(1)[b-je66ibfrcu] { animation-delay: 0.1s; } /* Stats grid row is actually inside .admin-card-grid which is not a .row but let's target specific containers */
.admin-card-grid[b-je66ibfrcu] { animation-delay: 0.1s; }
.row:nth-of-type(2)[b-je66ibfrcu] { animation-delay: 0.2s; } /* Charts */
.row:nth-of-type(3)[b-je66ibfrcu] { animation-delay: 0.3s; } /* Quick Actions/Health */
.row:nth-of-type(4)[b-je66ibfrcu] { animation-delay: 0.4s; } /* Alerts */
.row:nth-of-type(5)[b-je66ibfrcu] { animation-delay: 0.5s; } /* Activity */
/* Admin Statistics Cards - Aligned with WorkbenchStatCard */
.admin-card-grid[b-je66ibfrcu] {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-bottom: 32px;
}
.admin-stat-card[b-je66ibfrcu] {
background: white;
border: 1px solid var(--neutral-200);
border-radius: 12px;
padding: 20px;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
display: flex;
flex-direction: column;
}
.admin-stat-card:hover[b-je66ibfrcu] {
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
border-color: var(--brand-200);
}
.admin-stat-header[b-je66ibfrcu] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.admin-stat-label[b-je66ibfrcu] {
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-secondary);
}
.admin-stat-icon[b-je66ibfrcu] {
width: 40px;
height: 40px;
background: linear-gradient(135deg, var(--brand-50) 0%, var(--white) 100%);
color: var(--brand-600);
border: 1px solid var(--brand-100);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
transition: transform 0.2s ease;
}
.admin-stat-card:hover .admin-stat-icon[b-je66ibfrcu] {
transform: scale(1.05);
background: linear-gradient(135deg, var(--brand-100) 0%, var(--brand-50) 100%);
border-color: var(--brand-200);
}
.admin-stat-value[b-je66ibfrcu] {
font-size: 32px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 4px;
line-height: 1.2;
letter-spacing: -0.5px;
}
.admin-stat-description[b-je66ibfrcu] {
font-size: 13px;
color: var(--text-muted);
font-weight: 500;
}
/* Critical Alerts Banner */
.critical-alerts-banner[b-je66ibfrcu] {
background: #FEF2F2;
border: 1px solid #FECACA;
border-left: 4px solid var(--error-600);
border-radius: 8px;
padding: 16px 20px;
margin-bottom: 32px;
box-shadow: 0 4px 6px rgba(220, 38, 38, 0.05);
}
.critical-alerts-header[b-je66ibfrcu] {
display: flex;
align-items: center;
gap: 12px;
font-size: 16px;
font-weight: 700;
color: #991B1B;
margin-bottom: 12px;
}
.critical-alerts-header i[b-je66ibfrcu] {
font-size: 20px;
color: var(--error-600);
}
.critical-alert-item[b-je66ibfrcu] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: white;
border: 1px solid #FEE2E2;
border-radius: 6px;
}
.critical-alert-item strong[b-je66ibfrcu] {
color: #991B1B;
font-weight: 600;
}
.btn-resolve[b-je66ibfrcu] {
padding: 6px 16px;
background-color: white;
color: var(--error-600);
border: 1px solid #FECACA;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.btn-resolve:hover[b-je66ibfrcu] {
background-color: #FEF2F2;
border-color: #F87171;
}
/* Cards & Sections */
.card[b-je66ibfrcu] {
background: white;
border: 1px solid var(--neutral-200);
border-radius: 12px;
box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}
.card-body[b-je66ibfrcu] {
padding: 20px;
}
.section-title[b-je66ibfrcu] {
font-size: 16px;
font-weight: 700;
color: var(--text-primary);
margin: 0 0 2px 0;
letter-spacing: -0.3px;
}
.section-subtitle[b-je66ibfrcu] {
font-size: 13px;
color: var(--text-muted);
margin: 0 0 16px 0;
}
.section-header-with-action[b-je66ibfrcu] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 16px;
}
/* Quick Actions */
.quick-actions-list[b-je66ibfrcu] {
display: flex;
flex-direction: column;
gap: 8px;
}
.quick-action-button[b-je66ibfrcu] {
display: flex;
align-items: center;
padding: 12px 16px;
background: white;
border: 1px solid var(--neutral-200);
border-radius: 8px;
color: var(--text-primary);
text-decoration: none;
transition: all 0.2s;
font-size: 13px;
font-weight: 600;
box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
.quick-action-button:hover[b-je66ibfrcu] {
border-color: var(--brand-300);
transform: translateX(4px);
background: var(--brand-50);
color: var(--brand-700);
}
.quick-action-button i[b-je66ibfrcu] {
margin-right: 10px;
font-size: 16px;
color: var(--text-secondary);
transition: color 0.2s;
}
.quick-action-button:hover i[b-je66ibfrcu] {
color: var(--brand-600);
}
.quick-action-button.primary-action[b-je66ibfrcu] {
border-color: var(--brand-200);
background: var(--brand-50);
}
/* Quick Actions — customizable (edit mode) */
.quick-actions-header[b-je66ibfrcu] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
margin-bottom: 16px;
}
.quick-actions-header .section-subtitle[b-je66ibfrcu] {
margin-bottom: 0;
}
.qa-edit-toggle[b-je66ibfrcu] {
display: inline-flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
padding: 6px 12px;
font-size: 13px;
font-weight: 600;
color: var(--brand-600);
background: var(--brand-50);
border: 1px solid var(--brand-100);
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
}
.qa-edit-toggle:hover[b-je66ibfrcu] {
background: var(--brand-100);
color: var(--brand-700);
}
.qa-edit-toggle.active[b-je66ibfrcu] {
color: var(--success-700);
background: var(--success-50);
border-color: var(--success-200);
}
.qa-edit-toggle i[b-je66ibfrcu] {
font-size: 14px;
}
.qa-row-editing[b-je66ibfrcu] {
justify-content: space-between;
cursor: default;
}
.qa-row-editing:hover[b-je66ibfrcu] {
transform: none;
background: white;
border-color: var(--neutral-200);
color: var(--text-primary);
}
.qa-row-label[b-je66ibfrcu] {
display: inline-flex;
align-items: center;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.qa-row-label i[b-je66ibfrcu] {
margin-right: 10px;
font-size: 16px;
color: var(--text-secondary);
}
.qa-row-actions[b-je66ibfrcu] {
display: inline-flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.qa-icon-btn[b-je66ibfrcu] {
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid transparent;
border-radius: 6px;
background: transparent;
color: var(--text-secondary);
cursor: pointer;
transition: all 0.2s;
}
.qa-icon-btn i[b-je66ibfrcu] {
margin: 0;
font-size: 14px;
color: inherit;
}
.qa-icon-btn:hover[b-je66ibfrcu] {
background: var(--neutral-100);
color: var(--brand-600);
border-color: var(--neutral-200);
}
.qa-icon-btn-danger:hover[b-je66ibfrcu] {
background: var(--error-50, #fef2f2);
color: var(--error-600);
border-color: var(--error-200, #fecaca);
}
.qa-add-btn[b-je66ibfrcu] {
justify-content: center;
border-style: dashed;
color: var(--brand-600);
font-weight: 600;
}
.qa-add-btn:hover[b-je66ibfrcu] {
transform: none;
}
.qa-add-btn i[b-je66ibfrcu] {
color: var(--brand-600);
}
.qa-external-indicator[b-je66ibfrcu] {
margin-left: auto;
margin-right: 0 !important;
font-size: 12px !important;
opacity: 0.6;
}
.qa-empty[b-je66ibfrcu] {
font-size: 13px;
color: var(--text-muted);
margin: 4px 0;
padding: 12px 16px;
border: 1px dashed var(--neutral-200);
border-radius: 8px;
text-align: center;
}
.qa-icon-input[b-je66ibfrcu] {
display: flex;
align-items: stretch;
gap: 8px;
}
.qa-icon-preview[b-je66ibfrcu] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
flex-shrink: 0;
border: 1px solid var(--neutral-200);
border-radius: 8px;
background: var(--neutral-50);
color: var(--brand-600);
font-size: 18px;
}
/* System Health */
.health-status-list[b-je66ibfrcu] {
display: flex;
flex-direction: column;
gap: 0;
border: 1px solid var(--neutral-200);
border-radius: 8px;
overflow: hidden;
}
.health-status-item[b-je66ibfrcu] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 16px;
border-bottom: 1px solid var(--neutral-100);
background: white;
transition: background-color 0.2s;
}
.health-status-item:hover[b-je66ibfrcu] {
background-color: var(--neutral-50);
}
.health-status-item:last-child[b-je66ibfrcu] {
border-bottom: none;
}
.health-status-label[b-je66ibfrcu] {
display: flex;
align-items: center;
gap: 12px;
}
.health-icon-wrapper[b-je66ibfrcu] {
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--brand-50);
color: var(--brand-600);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex-shrink: 0;
}
.health-label-text[b-je66ibfrcu] {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.2;
}
.health-label-sub[b-je66ibfrcu] {
display: block;
font-size: 11px;
color: var(--text-muted);
line-height: 1.2;
}
.health-status-pill[b-je66ibfrcu] {
display: flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 700;
padding: 2px 8px;
border-radius: 16px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.health-status-pill i[b-je66ibfrcu] {
font-size: 12px;
}
.status-online[b-je66ibfrcu], .status-healthy[b-je66ibfrcu] { background: var(--success-50); color: var(--success-700); border: 1px solid var(--success-200); }
.status-warning[b-je66ibfrcu] { background: var(--warning-50); color: var(--warning-700); border: 1px solid var(--warning-200); }
.status-success[b-je66ibfrcu] { background: var(--success-50); color: var(--success-700); border: 1px solid var(--success-200); }
/* Alerts List */
.alerts-list[b-je66ibfrcu] {
display: flex;
flex-direction: column;
gap: 16px;
}
.alert-card[b-je66ibfrcu] {
display: flex;
gap: 16px;
padding: 16px 20px;
border-radius: 10px;
background: white;
border: 1px solid var(--neutral-200);
transition: all 0.2s;
position: relative;
overflow: hidden;
}
.alert-card[b-je66ibfrcu]::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
}
.alert-card.alert-critical[b-je66ibfrcu]::before { background: var(--error-500); }
.alert-card.alert-critical[b-je66ibfrcu] { background: #FEF2F2; border-color: #FECACA; }
.alert-card.alert-high[b-je66ibfrcu]::before { background: var(--error-500); }
.alert-card.alert-medium[b-je66ibfrcu]::before { background: var(--warning-500); }
.alert-card.alert-low[b-je66ibfrcu]::before { background: var(--info-500); }
.alert-content[b-je66ibfrcu] {
flex: 1;
}
.alert-title-row[b-je66ibfrcu] {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 6px;
}
.alert-title[b-je66ibfrcu] {
font-size: 15px;
font-weight: 700;
color: var(--text-primary);
margin: 0;
}
.alert-description[b-je66ibfrcu] {
font-size: 14px;
color: var(--text-secondary);
margin: 0 0 8px 0;
line-height: 1.5;
}
.badge[b-je66ibfrcu] {
padding: 4px 8px;
border-radius: 6px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.badge-critical[b-je66ibfrcu], .badge-high[b-je66ibfrcu] { background: var(--error-100); color: var(--error-700); }
.badge-category[b-je66ibfrcu] { background: white; border: 1px solid var(--neutral-200); color: var(--neutral-600); }
/* Activity Timeline */
.activity-timeline-compact[b-je66ibfrcu] {
display: flex;
flex-direction: column;
gap: 0;
}
.activity-item-compact[b-je66ibfrcu] {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 16px 0;
border-bottom: 1px solid var(--neutral-100);
}
.activity-item-compact:last-child[b-je66ibfrcu] {
border-bottom: none;
padding-bottom: 0;
}
.activity-icon-compact[b-je66ibfrcu] {
width: 36px;
height: 36px;
border-radius: 10px;
background: var(--neutral-50);
color: var(--text-secondary);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex-shrink: 0;
}
.activity-content-compact[b-je66ibfrcu] {
flex: 1;
}
.activity-title-compact[b-je66ibfrcu] {
font-size: 14px;
color: var(--text-primary);
font-weight: 600;
margin-bottom: 4px;
}
.activity-meta-compact[b-je66ibfrcu] {
font-size: 13px;
color: var(--text-secondary);
}
.activity-time-compact[b-je66ibfrcu] {
font-size: 12px;
color: var(--text-muted);
white-space: nowrap;
font-weight: 500;
}
/* Utilities */
.view-all-link[b-je66ibfrcu] {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--brand-600);
text-decoration: none;
font-size: 13px;
font-weight: 600;
padding: 6px 12px;
border-radius: 6px;
background: var(--brand-50);
transition: all 0.2s;
}
.view-all-link:hover[b-je66ibfrcu] {
background: var(--brand-100);
color: var(--brand-700);
}
.performance-badge[b-je66ibfrcu] {
position: fixed;
bottom: 20px;
right: 20px;
padding: 6px 12px;
background: rgba(31, 41, 55, 0.9);
color: white;
border-radius: 6px;
font-size: 11px;
font-family: monospace;
z-index: 100;
backdrop-filter: blur(4px);
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.dashboard-loading[b-je66ibfrcu], .dashboard-error[b-je66ibfrcu] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 400px;
color: var(--text-muted);
}
.loading-spinner[b-je66ibfrcu] {
font-size: 32px;
color: var(--brand-500);
margin-bottom: 16px;
}
/* Responsive */
@media (max-width: 1200px) {
.admin-card-grid[b-je66ibfrcu] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.header-actions[b-je66ibfrcu] { flex-wrap: wrap; }
.alert-card[b-je66ibfrcu] { flex-direction: column; }
.alert-actions[b-je66ibfrcu] { width: 100%; display: flex; justify-content: flex-end; }
}
@media (max-width: 480px) {
.admin-card-grid[b-je66ibfrcu] { grid-template-columns: 1fr; }
.dashboard-header[b-je66ibfrcu] { flex-direction: column; gap: 16px; }
.header-actions[b-je66ibfrcu] { width: 100%; justify-content: space-between; }
}
.admin-tab-badge[b-je66ibfrcu] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
background-color: var(--error-600);
color: white;
font-size: 11px;
font-weight: 700;
border-radius: 10px;
}
.admin-tab-button.active .admin-tab-badge[b-je66ibfrcu] {
background-color: var(--brand-600);
}
/* Tab Card */
.admin-tab-card[b-je66ibfrcu] {
min-height: 400px;
}
.admin-tab-content[b-je66ibfrcu] {
padding: 0;
}
.admin-tab-header[b-je66ibfrcu] {
padding-bottom: 24px;
border-bottom: 1px solid var(--border-light);
margin-bottom: 24px;
}
.admin-tab-title[b-je66ibfrcu] {
font-size: 20px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 4px;
}
.admin-tab-subtitle[b-je66ibfrcu] {
font-size: 14px;
color: var(--text-muted);
}
/* System Alerts List */
.system-alerts-list[b-je66ibfrcu] {
display: flex;
flex-direction: column;
gap: 20px;
}
.system-alert-item[b-je66ibfrcu] {
position: relative;
display: flex;
background: linear-gradient(135deg, rgba(227, 241, 251, 0.5) 0%, rgba(240, 247, 252, 0.6) 100%);
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 12px;
overflow: hidden;
transition: all 0.2s;
}
.system-alert-item:hover[b-je66ibfrcu] {
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}
.system-alert-left-bar[b-je66ibfrcu] {
width: 6px;
flex-shrink: 0;
}
.system-alert-item.alert-high .system-alert-left-bar[b-je66ibfrcu] {
background: linear-gradient(180deg, #EF4444 0%, #DC2626 100%);
}
.system-alert-item.alert-medium .system-alert-left-bar[b-je66ibfrcu] {
background: linear-gradient(180deg, #3B82F6 0%, #2563EB 100%);
}
.system-alert-item.alert-low .system-alert-left-bar[b-je66ibfrcu] {
background: linear-gradient(180deg, #6B7280 0%, #4B5563 100%);
}
.system-alert-content[b-je66ibfrcu] {
flex: 1;
padding: 20px 24px;
}
.system-alert-header[b-je66ibfrcu] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 12px;
gap: 16px;
}
.system-alert-title-row[b-je66ibfrcu] {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
}
.system-alert-title[b-je66ibfrcu] {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin: 0;
}
.alert-priority-badge[b-je66ibfrcu] {
padding: 4px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.alert-priority-badge.badge-high[b-je66ibfrcu] {
background-color: #FEE2E2;
color: #991B1B;
}
.alert-priority-badge.badge-medium[b-je66ibfrcu] {
background-color: #DBEAFE;
color: #1E40AF;
}
.alert-priority-badge.badge-low[b-je66ibfrcu] {
background-color: #F3F4F6;
color: #374151;
}
.alert-category-badge[b-je66ibfrcu] {
padding: 4px 10px;
background-color: var(--neutral-100);
color: var(--neutral-700);
font-size: 11px;
font-weight: 700;
border-radius: 6px;
letter-spacing: 0.05em;
}
.system-alert-actions[b-je66ibfrcu] {
display: flex;
gap: 8px;
}
.system-alert-description[b-je66ibfrcu] {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 8px;
}
.system-alert-timestamp[b-je66ibfrcu] {
font-size: 13px;
color: var(--text-muted);
margin: 0;
}
/* Button Styles */
.btn[b-je66ibfrcu] {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 20px;
border: 1px solid transparent;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
text-decoration: none;
}
.btn-primary[b-je66ibfrcu] {
background-color: var(--brand-600);
color: white;
}
.btn-primary:hover[b-je66ibfrcu] {
background-color: var(--brand-700);
}
.btn-sm[b-je66ibfrcu] {
padding: 6px 14px;
font-size: 13px;
border-radius: 8px;
}
.btn-outline-secondary[b-je66ibfrcu] {
background: transparent;
border-color: #E2E8F0;
color: #64748B;
}
.btn-outline-secondary:hover[b-je66ibfrcu] {
background-color: #F1F5F9;
border-color: #E2E8F0;
color: #0F172A;
}
/* Responsive Design */
@media (max-width: 768px) {
.admin-card-grid[b-je66ibfrcu] {
grid-template-columns: 1fr;
}
.admin-tabs-container[b-je66ibfrcu] {
overflow-x: auto;
}
.system-alert-header[b-je66ibfrcu] {
flex-direction: column;
align-items: flex-start;
}
.system-alert-actions[b-je66ibfrcu] {
width: 100%;
justify-content: flex-end;
}
}
/* ========================================
Skeleton Loading State
======================================== */
@keyframes admin-dash-skel-pulse-b-je66ibfrcu {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
.skel-block[b-je66ibfrcu] {
background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
background-size: 200% 100%;
animation: admin-dash-skel-pulse-b-je66ibfrcu 1.5s ease-in-out infinite;
border-radius: 6px;
}
.skel-admin-header[b-je66ibfrcu] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 32px;
padding-bottom: 24px;
border-bottom: 1px solid var(--neutral-200);
}
.skel-admin-header-content[b-je66ibfrcu] {
flex: 1;
}
.skel-admin-header-actions[b-je66ibfrcu] {
display: flex;
align-items: center;
gap: 12px;
}
.skel-admin-card-grid[b-je66ibfrcu] {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-bottom: 32px;
}
.skel-admin-card[b-je66ibfrcu] {
background: white;
border: 1px solid var(--neutral-200);
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
display: flex;
flex-direction: column;
}
.skel-admin-card-header[b-je66ibfrcu] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.skel-admin-secondary[b-je66ibfrcu] {
display: grid;
grid-template-columns: 7fr 5fr;
gap: 24px;
margin-bottom: 32px;
}
.skel-admin-section-card[b-je66ibfrcu] {
background: white;
border: 1px solid var(--neutral-200);
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}
@media (max-width: 1200px) {
.skel-admin-card-grid[b-je66ibfrcu] {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.skel-admin-secondary[b-je66ibfrcu] {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.skel-admin-card-grid[b-je66ibfrcu] {
grid-template-columns: 1fr;
}
.skel-admin-header[b-je66ibfrcu] {
flex-direction: column;
gap: 16px;
}
.skel-admin-header-actions[b-je66ibfrcu] {
width: 100%;
justify-content: space-between;
}
}
/* /Components/Pages/Admin/AdminPaymentSettingsPage.razor.rz.scp.css */
.settings-page[b-l3we4ufpr7] {
padding: 24px 32px;
max-width: 800px;
}
/* Header */
.page-header[b-l3we4ufpr7] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 24px;
}
.page-title[b-l3we4ufpr7] {
font-size: 1.35rem;
font-weight: 700;
color: #1f2937;
margin: 0;
}
.page-title i[b-l3we4ufpr7] {
color: #0d6785;
margin-right: 6px;
}
.page-subtitle[b-l3we4ufpr7] {
font-size: 0.8rem;
color: #9ca3af;
margin: 2px 0 0;
}
.status-badge[b-l3we4ufpr7] {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.78rem;
font-weight: 600;
}
.status-active[b-l3we4ufpr7] {
background: #dcfce7;
color: #166534;
}
.status-inactive[b-l3we4ufpr7] {
background: #f3f4f6;
color: #6b7280;
}
/* Loading */
.loading-state[b-l3we4ufpr7] {
display: flex;
align-items: center;
gap: 8px;
padding: 40px 20px;
color: #9ca3af;
justify-content: center;
}
/* Gateway Card */
.gateway-card[b-l3we4ufpr7] {
background: white;
border: 1px solid #e5e7eb;
border-radius: 12px;
overflow: hidden;
margin-bottom: 20px;
}
.gateway-header[b-l3we4ufpr7] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
border-bottom: 1px solid #f3f4f6;
background: #fafbfc;
}
.gateway-brand[b-l3we4ufpr7] {
display: flex;
align-items: center;
gap: 12px;
}
.gateway-logo[b-l3we4ufpr7] {
width: 40px;
height: 40px;
border-radius: 10px;
background: #e0f2fe;
color: #0284c7;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
}
.gateway-name[b-l3we4ufpr7] {
font-size: 1rem;
font-weight: 700;
color: #1f2937;
margin: 0;
line-height: 1.2;
}
.gateway-desc[b-l3we4ufpr7] {
font-size: 0.75rem;
color: #9ca3af;
}
.gateway-body[b-l3we4ufpr7] {
padding: 20px;
display: flex;
flex-direction: column;
gap: 18px;
}
.gateway-footer[b-l3we4ufpr7] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 20px;
border-top: 1px solid #f3f4f6;
background: #fafbfc;
}
.footer-left[b-l3we4ufpr7],
.footer-right[b-l3we4ufpr7] {
display: flex;
align-items: center;
gap: 10px;
}
/* Config Sections */
.config-section[b-l3we4ufpr7] {
display: flex;
flex-direction: column;
gap: 4px;
}
.config-label[b-l3we4ufpr7] {
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #6b7280;
}
.config-hint[b-l3we4ufpr7] {
font-size: 0.7rem;
color: #9ca3af;
}
/* Environment Buttons */
.env-options[b-l3we4ufpr7] {
display: flex;
gap: 10px;
}
.env-btn[b-l3we4ufpr7] {
flex: 1;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border: 2px solid #e5e7eb;
border-radius: 10px;
background: white;
cursor: pointer;
transition: all 0.15s;
text-align: left;
font-family: inherit;
color: inherit;
}
.env-btn:hover[b-l3we4ufpr7] {
border-color: #d1d5db;
}
.env-btn.env-active[b-l3we4ufpr7] {
border-color: #0d6785;
background: #f0f9ff;
}
.env-btn.env-active.env-live[b-l3we4ufpr7] {
border-color: #16a34a;
background: #f0fdf4;
}
.env-btn i[b-l3we4ufpr7] {
font-size: 1.1rem;
color: #9ca3af;
}
.env-btn.env-active i[b-l3we4ufpr7] {
color: #0d6785;
}
.env-btn.env-active.env-live i[b-l3we4ufpr7] {
color: #16a34a;
}
.env-title[b-l3we4ufpr7] {
display: block;
font-size: 0.85rem;
font-weight: 600;
color: #374151;
}
.env-url[b-l3we4ufpr7] {
display: block;
font-size: 0.7rem;
color: #9ca3af;
}
/* API Key Input */
.api-key-input[b-l3we4ufpr7] {
display: flex;
gap: 6px;
}
.api-key-input .form-control[b-l3we4ufpr7] {
flex: 1;
font-family: 'Courier New', monospace;
font-size: 0.82rem;
letter-spacing: 0.5px;
}
/* Test Result */
.test-result[b-l3we4ufpr7] {
font-size: 0.78rem;
display: inline-flex;
align-items: center;
gap: 4px;
}
.test-success[b-l3we4ufpr7] {
color: #16a34a;
}
.test-fail[b-l3we4ufpr7] {
color: #dc2626;
}
/* Alert SM */
.alert-sm[b-l3we4ufpr7] {
padding: 8px 14px;
font-size: 0.8rem;
margin: 12px 20px 16px;
border-radius: 8px;
}
/* Info Panel */
.info-panel[b-l3we4ufpr7] {
background: #f8fafc;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 16px 20px;
}
.info-panel h3[b-l3we4ufpr7] {
font-size: 0.85rem;
font-weight: 600;
color: #374151;
margin: 0 0 10px;
}
.info-panel h3 i[b-l3we4ufpr7] {
color: #0d6785;
margin-right: 4px;
}
.info-panel ul[b-l3we4ufpr7] {
margin: 0;
padding-left: 18px;
}
.info-panel li[b-l3we4ufpr7] {
font-size: 0.78rem;
color: #6b7280;
margin-bottom: 6px;
line-height: 1.5;
}
/* Form switch styling */
.form-check-input:checked[b-l3we4ufpr7] {
background-color: #0d6785;
border-color: #0d6785;
}
/* /Components/Pages/Admin/AdminPaymentsPage.razor.rz.scp.css */
/* Header — matches UserManagement */
.content-header[b-6jqwnt730c] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.content-title[b-6jqwnt730c] {
font-size: 1.5rem;
font-weight: 700;
color: #1a1a2e;
margin: 0;
}
.content-subtitle[b-6jqwnt730c] {
font-size: 0.8rem;
color: #94A3B8;
margin: 2px 0 0;
}
/* Header stat pills — matches UserManagement */
.header-stats[b-6jqwnt730c] {
display: flex;
align-items: center;
gap: 8px;
}
.stat-pill[b-6jqwnt730c] {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: #F8FAFC;
border: 1px solid #E2E8F0;
border-radius: 20px;
font-size: 0.75rem;
color: #64748B;
}
.stat-pill i[b-6jqwnt730c] {
font-size: 0.8rem;
}
.stat-pill .stat-value[b-6jqwnt730c] {
font-weight: 700;
color: #1E293B;
}
.stat-pill .stat-label[b-6jqwnt730c] {
font-size: 0.6rem;
letter-spacing: 0.5px;
color: #94A3B8;
}
.stat-pill.stat-primary[b-6jqwnt730c] { border-color: #BFDBFE; background: #EFF6FF; }
.stat-pill.stat-primary i[b-6jqwnt730c] { color: #3B82F6; }
.stat-pill.stat-warning[b-6jqwnt730c] { border-color: #FDE68A; background: #FFFBEB; }
.stat-pill.stat-warning i[b-6jqwnt730c] { color: #F59E0B; }
.stat-pill.stat-success[b-6jqwnt730c] { border-color: #A7F3D0; background: #ECFDF5; }
.stat-pill.stat-success i[b-6jqwnt730c] { color: #10B981; }
.stat-pill.stat-info[b-6jqwnt730c] { border-color: #BAE6FD; background: #F0F9FF; }
.stat-pill.stat-info i[b-6jqwnt730c] { color: #0284C7; }
.btn-header-action[b-6jqwnt730c] {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid #E2E8F0;
background: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #64748B;
transition: all 0.2s;
}
.btn-header-action:hover[b-6jqwnt730c] {
background: #F1F5F9;
color: #334155;
}
/* Card with tabs — matches UserManagement */
.card-with-tabs[b-6jqwnt730c] {
border: 1px solid #E5E7EB;
border-radius: 12px;
background: white;
overflow: hidden;
}
/* Toolbar */
.card-toolbar[b-6jqwnt730c] {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-bottom: 1px solid #F1F5F9;
background: #FAFBFC;
}
.toolbar-search[b-6jqwnt730c] {
position: relative;
flex: 1;
max-width: 280px;
}
.toolbar-search i[b-6jqwnt730c] {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 0.75rem;
color: #94A3B8;
pointer-events: none;
}
.toolbar-search .form-control[b-6jqwnt730c] {
padding-left: 30px;
font-size: 0.8rem;
border-color: #E2E8F0;
height: 34px;
}
.toolbar-search .form-control:focus[b-6jqwnt730c] {
border-color: #93C5FD;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.toolbar-filters[b-6jqwnt730c] {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
}
.filter-group .form-control[b-6jqwnt730c],
.filter-group .form-select[b-6jqwnt730c] {
font-size: 0.8rem;
border-color: #E2E8F0;
height: 34px;
min-width: 130px;
}
.toolbar-btn[b-6jqwnt730c] {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.78rem;
white-space: nowrap;
height: 34px;
border-radius: 6px;
padding: 0 12px;
cursor: pointer;
border: none;
font-weight: 500;
transition: all 0.15s;
}
.btn-brand[b-6jqwnt730c] {
background: var(--brand-500);
color: white;
}
.btn-brand:hover[b-6jqwnt730c] {
background: var(--brand-600, #0a526a);
color: white;
}
.btn-ghost[b-6jqwnt730c] {
background: transparent;
border: 1px solid #E2E8F0;
color: #64748B;
}
.btn-ghost:hover[b-6jqwnt730c] {
background: #F1F5F9;
color: #374151;
}
/* Table area inside card */
.table-card[b-6jqwnt730c] {
overflow: hidden;
}
.table thead th[b-6jqwnt730c] {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #94A3B8;
font-weight: 600;
border-bottom: 1px solid #F1F5F9;
padding: 12px 16px;
white-space: nowrap;
background: white;
}
.table tbody td[b-6jqwnt730c] {
padding: 11px 16px;
vertical-align: middle;
border-bottom: 1px solid #F9FAFB;
font-size: 0.82rem;
}
.payment-row[b-6jqwnt730c] {
cursor: pointer;
transition: background 0.1s;
}
.payment-row:hover[b-6jqwnt730c] {
background: #F8FAFC !important;
}
.app-number[b-6jqwnt730c] {
font-weight: 600;
color: #0d6785;
font-size: 0.8rem;
}
.cell-text[b-6jqwnt730c] {
color: #374151;
font-weight: 500;
}
.cell-email[b-6jqwnt730c] {
color: #64748B;
font-size: 0.78rem;
}
.cell-property[b-6jqwnt730c] {
color: #64748B;
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cell-date[b-6jqwnt730c] {
color: #64748B;
white-space: nowrap;
font-size: 0.78rem;
}
/* Status Badges */
.status-badge[b-6jqwnt730c] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: 20px;
font-size: 0.72rem;
font-weight: 600;
white-space: nowrap;
}
.badge-awaiting[b-6jqwnt730c] {
background: #FEF3C7;
color: #92400E;
}
.badge-paid[b-6jqwnt730c] {
background: #DCFCE7;
color: #166534;
}
.badge-bounced[b-6jqwnt730c] {
background: #FEE2E2;
color: #991B1B;
}
.badge-expired[b-6jqwnt730c] {
background: #F3F4F6;
color: #6B7280;
}
/* Table empty / loading */
.table-empty[b-6jqwnt730c] {
padding: 60px 20px;
text-align: center;
color: #94A3B8;
}
.table-empty i[b-6jqwnt730c] {
font-size: 2rem;
margin-bottom: 8px;
display: block;
}
.table-empty p[b-6jqwnt730c] {
margin: 0 0 12px;
}
.table-loading[b-6jqwnt730c] {
padding: 40px 20px;
text-align: center;
color: #94A3B8;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 0.85rem;
}
/* Table Footer / Pagination */
.table-footer[b-6jqwnt730c] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 16px;
border-top: 1px solid #F1F5F9;
background: #FAFBFC;
}
.table-info[b-6jqwnt730c] {
font-size: 0.75rem;
color: #94A3B8;
}
.table-pagination[b-6jqwnt730c] {
display: flex;
gap: 4px;
}
/* Animations */
@keyframes spin-b-6jqwnt730c {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinning[b-6jqwnt730c] {
animation: spin-b-6jqwnt730c 1s linear infinite;
}
/* Responsive */
@media (max-width: 1200px) {
.card-toolbar[b-6jqwnt730c] {
flex-wrap: wrap;
}
.toolbar-search[b-6jqwnt730c] {
max-width: 100%;
}
.toolbar-filters[b-6jqwnt730c] {
flex-wrap: wrap;
margin-left: 0;
}
}
@media (max-width: 768px) {
.content-header[b-6jqwnt730c] {
flex-direction: column;
gap: 12px;
align-items: flex-start;
}
.header-stats[b-6jqwnt730c] {
width: 100%;
overflow-x: auto;
}
}
/* ── Actions column ── */
/* Widened from 70px: the actions cell can now hold up to three buttons
(copy link, reveal link, override status). No new class, just the existing width. */
.th-actions[b-6jqwnt730c] {
width: 150px;
text-align: center;
}
.cell-actions[b-6jqwnt730c] {
text-align: center;
width: 150px;
white-space: nowrap;
}
.btn-action[b-6jqwnt730c] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 8px;
border: 1px solid #E2E8F0;
background: white;
color: #64748B;
cursor: pointer;
transition: all 0.15s ease;
}
.btn-action:hover[b-6jqwnt730c] {
background: #F1F5F9;
color: #0D6785;
border-color: #CBD5E1;
}
/* ── Status Override Modal ── */
.modal-backdrop[b-6jqwnt730c] {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(4px);
z-index: 1050;
}
.modal-overlay-status[b-6jqwnt730c] {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 1051;
padding: 24px;
}
.status-modal[b-6jqwnt730c] {
background: white;
border-radius: 16px;
width: 100%;
max-width: 500px;
max-height: 90vh;
display: flex;
flex-direction: column;
box-shadow: 0 24px 64px rgba(15, 23, 42, 0.25);
animation: modalSlideIn-b-6jqwnt730c 0.2s ease-out;
overflow: hidden;
}
@keyframes modalSlideIn-b-6jqwnt730c {
from {
opacity: 0;
transform: translateY(-12px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.status-modal-header[b-6jqwnt730c] {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 1.25rem 1.5rem 1rem;
border-bottom: 1px solid #EEF2F6;
}
.status-modal-title-group[b-6jqwnt730c] {
display: flex;
align-items: flex-start;
gap: 0.9rem;
}
.status-modal-title[b-6jqwnt730c] {
font-size: 1.05rem;
font-weight: 700;
color: #0F172A;
margin: 0;
}
.status-modal-subtitle[b-6jqwnt730c] {
font-size: 0.8rem;
color: #64748B;
line-height: 1.45;
margin: 2px 0 0;
}
.status-modal-close[b-6jqwnt730c] {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 8px;
border: none;
background: transparent;
color: #94A3B8;
cursor: pointer;
transition: all 0.15s;
}
.status-modal-close:hover[b-6jqwnt730c] {
background: #F1F5F9;
color: #0F172A;
}
.status-modal-body[b-6jqwnt730c] {
padding: 1.15rem 1.5rem;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 20px;
}
.current-status-row[b-6jqwnt730c] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: #F8FAFC;
border-radius: 10px;
border: 1px solid #F1F5F9;
}
.current-status-label[b-6jqwnt730c] {
font-size: 0.8rem;
font-weight: 600;
color: #64748B;
text-transform: uppercase;
letter-spacing: 0.3px;
}
/* Action radio options */
.action-options[b-6jqwnt730c] {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 8px;
}
.action-option[b-6jqwnt730c] {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border: 1px solid #E2E8F0;
border-radius: 10px;
cursor: pointer;
transition: all 0.15s ease;
font-size: 0.875rem;
font-weight: 500;
color: #334155;
}
.action-option:hover[b-6jqwnt730c] {
background: #F8FAFC;
border-color: #CBD5E1;
}
.action-option.selected[b-6jqwnt730c] {
background: #F0F9FF;
border-color: #0D6785;
box-shadow: 0 0 0 1px #0D6785;
}
.action-option input[type="radio"][b-6jqwnt730c] {
display: none;
}
.action-option i[b-6jqwnt730c] {
font-size: 1.1rem;
}
/* Form elements */
.form-group[b-6jqwnt730c] {
display: flex;
flex-direction: column;
gap: 6px;
}
.form-label[b-6jqwnt730c] {
font-size: 0.8rem;
font-weight: 600;
color: #334155;
}
.form-label .required[b-6jqwnt730c] {
color: #EF4444;
}
.form-hint[b-6jqwnt730c] {
font-size: 0.75rem;
color: #94A3B8;
}
/* Info callouts */
.info-callout[b-6jqwnt730c] {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 16px;
border-radius: 10px;
font-size: 0.8rem;
line-height: 1.5;
}
.info-callout i[b-6jqwnt730c] {
margin-top: 2px;
flex-shrink: 0;
font-size: 1rem;
}
.info-callout-blue[b-6jqwnt730c] {
background: #EFF6FF;
color: #1E40AF;
border: 1px solid #BFDBFE;
}
.info-callout-amber[b-6jqwnt730c] {
background: #FFFBEB;
color: #92400E;
border: 1px solid #FDE68A;
}
.info-callout-red[b-6jqwnt730c] {
background: #FEF2F2;
color: #991B1B;
border: 1px solid #FECACA;
}
/* Modal footer */
.status-modal-footer[b-6jqwnt730c] {
display: flex;
justify-content: flex-end;
gap: 0.6rem;
padding: 1rem 1.5rem;
border-top: 1px solid #EEF2F6;
background: #FAFBFC;
}
.btn-modal-cancel[b-6jqwnt730c] {
padding: 0.55rem 1.15rem;
border-radius: 10px;
border: 1px solid #E2E8F0;
background: transparent;
color: #64748B;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}
.btn-modal-cancel:hover:not(:disabled)[b-6jqwnt730c] {
background: #F1F5F9;
color: #0F172A;
}
.btn-modal-confirm[b-6jqwnt730c] {
padding: 0.55rem 1.15rem;
border-radius: 10px;
border: none;
background: var(--brand-600, #004980);
color: white;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
transition: all 0.15s;
}
.btn-modal-confirm:hover:not(:disabled)[b-6jqwnt730c] {
filter: brightness(1.1);
}
.btn-modal-confirm:disabled[b-6jqwnt730c] {
opacity: 0.5;
cursor: not-allowed;
}
.btn-modal-cancel:disabled[b-6jqwnt730c] {
opacity: 0.5;
cursor: not-allowed;
}
/* Confirm button color variants */
.btn-confirm-success[b-6jqwnt730c] {
background: #059669;
}
.btn-confirm-warning[b-6jqwnt730c] {
background: #D97706;
}
.btn-confirm-danger[b-6jqwnt730c] {
background: #DC2626;
}
/* ── Skeleton loader ─────────────────────────────────────────────────── */
@keyframes admin-payments-skel-pulse-b-6jqwnt730c {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.tbl-row-skeleton td[b-6jqwnt730c] {
padding: 0.875rem 0.75rem;
}
.tbl-skel[b-6jqwnt730c] {
height: 1.0625rem;
width: 80px;
border-radius: 4px;
background: linear-gradient(90deg, var(--bs-tertiary-bg, #f0f0f0) 25%, var(--bs-secondary-bg, #e0e0e0) 50%, var(--bs-tertiary-bg, #f0f0f0) 75%);
background-size: 200% 100%;
animation: admin-payments-skel-pulse-b-6jqwnt730c 1.5s ease-in-out infinite;
}
.tbl-skel-badge[b-6jqwnt730c] {
height: 1.25rem;
width: 90px;
border-radius: 9999px;
background: linear-gradient(90deg, var(--bs-tertiary-bg, #f0f0f0) 25%, var(--bs-secondary-bg, #e0e0e0) 50%, var(--bs-tertiary-bg, #f0f0f0) 75%);
background-size: 200% 100%;
animation: admin-payments-skel-pulse-b-6jqwnt730c 1.5s ease-in-out infinite;
}
/* /Components/Pages/Admin/AdminReportedConcernsPage.razor.rz.scp.css */
/* Page header */
.page-header[b-yu4k9bybct] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 1px solid var(--neutral-200, #e5e7eb);
}
.page-title[b-yu4k9bybct] {
font-size: 28px;
font-weight: 700;
color: var(--text-primary, #0f172a);
margin: 0 0 6px 0;
letter-spacing: -0.5px;
}
.page-subtitle[b-yu4k9bybct] {
font-size: 14px;
color: var(--text-muted, #6b7280);
margin: 0;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.separator[b-yu4k9bybct] {
color: var(--neutral-300, #d1d5db);
}
.header-actions[b-yu4k9bybct] {
display: flex;
gap: 12px;
align-items: center;
}
.header-actions > *[b-yu4k9bybct] {
height: 40px;
}
.btn-refresh[b-yu4k9bybct] {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--neutral-300, #d1d5db);
background: white;
border-radius: 8px;
cursor: pointer;
color: var(--text-secondary, #475569);
transition: all 0.15s ease;
}
.btn-refresh:hover:not(:disabled)[b-yu4k9bybct] {
border-color: var(--brand-300, #93c5fd);
color: var(--brand-600, #2563eb);
background: var(--brand-50, #eff6ff);
}
.btn-refresh.spinning i[b-yu4k9bybct] {
animation: spin-b-yu4k9bybct 1s linear infinite;
}
@keyframes spin-b-yu4k9bybct { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* Stat cards */
.stat-grid[b-yu4k9bybct] {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 24px;
}
.stat-card[b-yu4k9bybct] {
background: white;
border: 1px solid var(--neutral-200, #e5e7eb);
border-radius: 12px;
padding: 20px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.stat-card:hover[b-yu4k9bybct] {
border-color: var(--neutral-300, #d1d5db);
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}
.stat-card.alert[b-yu4k9bybct] {
border-color: #fecaca;
background: linear-gradient(180deg, #fef2f2 0%, #ffffff 60%);
}
.stat-header[b-yu4k9bybct] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.stat-label[b-yu4k9bybct] {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-secondary, #475569);
}
.stat-icon[b-yu4k9bybct] {
width: 36px;
height: 36px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
.stat-icon.neutral[b-yu4k9bybct] { background: #f1f5f9; color: #475569; }
.stat-icon.info[b-yu4k9bybct] { background: #eff6ff; color: #2563eb; }
.stat-icon.success[b-yu4k9bybct] { background: #ecfdf5; color: #059669; }
.stat-icon.danger[b-yu4k9bybct] { background: #fef2f2; color: #dc2626; }
.stat-value[b-yu4k9bybct] {
font-size: 30px;
font-weight: 700;
color: var(--text-primary, #0f172a);
line-height: 1.1;
letter-spacing: -0.5px;
margin-bottom: 4px;
}
.stat-description[b-yu4k9bybct] {
font-size: 13px;
color: var(--text-muted, #6b7280);
}
/* Filter toolbar */
.filter-toolbar[b-yu4k9bybct] {
background: white;
border: 1px solid var(--neutral-200, #e5e7eb);
border-radius: 12px;
padding: 16px 20px;
margin-bottom: 20px;
}
.filter-row[b-yu4k9bybct] {
display: grid;
grid-template-columns: 160px 160px 180px 1fr auto;
gap: 16px;
align-items: end;
}
.filter-field[b-yu4k9bybct] { display: flex; flex-direction: column; }
.filter-label[b-yu4k9bybct] {
font-size: 12px;
font-weight: 600;
color: var(--text-secondary, #475569);
margin-bottom: 6px;
}
.filter-field .form-control[b-yu4k9bybct],
.filter-field .form-select[b-yu4k9bybct] {
height: 40px;
font-size: 14px;
}
.search-input[b-yu4k9bybct] {
position: relative;
}
.search-input i[b-yu4k9bybct] {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted, #9ca3af);
font-size: 14px;
pointer-events: none;
}
.search-input .form-control[b-yu4k9bybct] {
padding-left: 36px;
}
.btn-clear-filters[b-yu4k9bybct] {
display: inline-flex;
align-items: center;
gap: 6px;
height: 40px;
padding: 0 14px;
border: 1px solid var(--neutral-300, #d1d5db);
background: white;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
color: var(--text-secondary, #475569);
cursor: pointer;
transition: all 0.15s ease;
}
.btn-clear-filters:hover[b-yu4k9bybct] {
border-color: #fecaca;
color: #dc2626;
background: #fef2f2;
}
/* State panel (loading / empty) */
.state-panel[b-yu4k9bybct] {
background: white;
border: 1px solid var(--neutral-200, #e5e7eb);
border-radius: 12px;
padding: 64px 24px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.empty-icon[b-yu4k9bybct] {
width: 72px;
height: 72px;
border-radius: 18px;
background: linear-gradient(135deg, #f1f5f9 0%, #ffffff 100%);
border: 1px solid var(--neutral-200, #e5e7eb);
color: var(--text-muted, #94a3b8);
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 4px;
}
.state-title[b-yu4k9bybct] {
font-size: 18px;
font-weight: 600;
color: var(--text-primary, #0f172a);
margin: 0;
}
.state-subtitle[b-yu4k9bybct] {
font-size: 14px;
color: var(--text-muted, #6b7280);
margin: 0;
max-width: 420px;
}
/* Concerns card + table */
.concerns-card[b-yu4k9bybct] {
background: white;
border: 1px solid var(--neutral-200, #e5e7eb);
border-radius: 12px;
overflow: hidden;
}
.concerns-table-wrap[b-yu4k9bybct] { overflow-x: auto; }
.concerns-table[b-yu4k9bybct] {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.concerns-table thead th[b-yu4k9bybct] {
position: sticky;
top: 0;
background: #f8fafc;
color: var(--text-secondary, #475569);
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 12px 16px;
border-bottom: 1px solid var(--neutral-200, #e5e7eb);
text-align: left;
white-space: nowrap;
}
.concerns-table tbody td[b-yu4k9bybct] {
padding: 14px 16px;
border-bottom: 1px solid #f1f5f9;
vertical-align: top;
}
.col-expand[b-yu4k9bybct] { width: 36px; text-align: center; color: var(--text-muted, #94a3b8); }
.col-status[b-yu4k9bybct] { width: 110px; text-align: center; }
.concern-row[b-yu4k9bybct] { cursor: pointer; transition: background 0.12s ease; }
.concern-row:hover[b-yu4k9bybct] { background: #f8fafc; }
.concern-row.expanded[b-yu4k9bybct] { background: #f8fafc; }
.concern-row.expanded td[b-yu4k9bybct] { border-bottom: none; }
.cell-primary[b-yu4k9bybct] {
color: var(--text-primary, #0f172a);
font-weight: 500;
}
.cell-secondary[b-yu4k9bybct] {
color: var(--text-muted, #94a3b8);
font-size: 12px;
margin-top: 2px;
}
.description-preview[b-yu4k9bybct] {
max-width: 360px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text-secondary, #475569);
}
.role-pill[b-yu4k9bybct] {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
background: #f1f5f9;
color: #475569;
font-size: 12px;
font-weight: 500;
}
.status-pill[b-yu4k9bybct] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 500;
}
.status-pill.sent[b-yu4k9bybct] {
background: #ecfdf5;
color: #047857;
border: 1px solid #a7f3d0;
}
.status-pill.failed[b-yu4k9bybct] {
background: #fef2f2;
color: #b91c1c;
border: 1px solid #fecaca;
}
.status-dot[b-yu4k9bybct] {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
/* Detail panel */
.detail-row > td[b-yu4k9bybct] {
padding: 0 !important;
background: #f8fafc;
border-bottom: 1px solid var(--neutral-200, #e5e7eb) !important;
}
.detail-panel[b-yu4k9bybct] {
padding: 18px 24px 22px 56px;
display: flex;
flex-direction: column;
gap: 14px;
}
.detail-section[b-yu4k9bybct] { display: flex; flex-direction: column; gap: 6px; }
.detail-label[b-yu4k9bybct] {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-secondary, #475569);
display: inline-flex;
align-items: center;
gap: 6px;
}
.detail-description[b-yu4k9bybct] {
background: white;
border: 1px solid var(--neutral-200, #e5e7eb);
border-radius: 8px;
padding: 12px 14px;
font-size: 14px;
line-height: 1.55;
color: var(--text-primary, #0f172a);
white-space: pre-wrap;
}
.detail-error .detail-label[b-yu4k9bybct] { color: #b91c1c; }
.detail-error-text[b-yu4k9bybct] {
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 8px;
padding: 10px 14px;
font-size: 13px;
color: #b91c1c;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.detail-meta[b-yu4k9bybct] {
display: flex;
flex-wrap: wrap;
gap: 20px;
font-size: 12px;
color: var(--text-muted, #6b7280);
padding-top: 4px;
}
.detail-meta strong[b-yu4k9bybct] {
color: var(--text-secondary, #475569);
margin-right: 4px;
font-weight: 600;
}
/* Footer + pager */
.concerns-footer[b-yu4k9bybct] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 20px;
border-top: 1px solid var(--neutral-200, #e5e7eb);
background: #fafbfc;
}
.page-summary[b-yu4k9bybct] {
font-size: 13px;
color: var(--text-muted, #6b7280);
}
.page-summary strong[b-yu4k9bybct] { color: var(--text-primary, #0f172a); font-weight: 600; }
.pager[b-yu4k9bybct] {
display: flex;
gap: 4px;
}
.pager-btn[b-yu4k9bybct] {
min-width: 36px;
height: 36px;
padding: 0 10px;
display: inline-flex;
align-items: center;
justify-content: center;
background: white;
border: 1px solid var(--neutral-200, #e5e7eb);
border-radius: 8px;
font-size: 13px;
font-weight: 500;
color: var(--text-secondary, #475569);
cursor: pointer;
transition: all 0.12s ease;
}
.pager-btn:hover:not(:disabled):not(.active)[b-yu4k9bybct] {
border-color: var(--neutral-300, #d1d5db);
background: #f8fafc;
}
.pager-btn.active[b-yu4k9bybct] {
background: var(--brand-600, #2563eb);
border-color: var(--brand-600, #2563eb);
color: white;
}
.pager-btn:disabled[b-yu4k9bybct] { opacity: 0.4; cursor: not-allowed; }
/* Responsive */
@media (max-width: 1024px) {
.stat-grid[b-yu4k9bybct] { grid-template-columns: repeat(2, 1fr); }
.filter-row[b-yu4k9bybct] {
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.filter-field.filter-search[b-yu4k9bybct] { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
.page-header[b-yu4k9bybct] { flex-direction: column; gap: 16px; }
.header-actions[b-yu4k9bybct] { width: 100%; }
.stat-grid[b-yu4k9bybct] { grid-template-columns: 1fr; }
.filter-row[b-yu4k9bybct] { grid-template-columns: 1fr; }
.concerns-footer[b-yu4k9bybct] { flex-direction: column; gap: 12px; align-items: stretch; }
.pager[b-yu4k9bybct] { justify-content: center; }
}
/* ----- Attachment thumbnails ----- */
.attachment-badge[b-yu4k9bybct] {
display: inline-flex;
align-items: center;
gap: 0.25rem;
margin-top: 0.25rem;
font-size: 0.75rem;
color: var(--text-secondary, #6b7280);
}
.attachment-thumbs[b-yu4k9bybct] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 0.75rem;
margin-top: 0.5rem;
}
.attachment-thumb[b-yu4k9bybct] {
border: 1px solid var(--border, #e5e7eb);
border-radius: 6px;
overflow: hidden;
background: #fff;
display: flex;
flex-direction: column;
}
.attachment-thumb a[b-yu4k9bybct],
.attachment-thumb-loading[b-yu4k9bybct] {
display: block;
width: 100%;
height: 140px;
background: #f3f4f6;
text-decoration: none;
}
.attachment-thumb img[b-yu4k9bybct] {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.attachment-thumb-loading[b-yu4k9bybct] {
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
}
.attachment-thumb-meta[b-yu4k9bybct] {
padding: 0.4rem 0.5rem;
display: flex;
justify-content: space-between;
gap: 0.5rem;
font-size: 0.72rem;
color: var(--text-secondary, #6b7280);
}
.attachment-thumb-name[b-yu4k9bybct] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ── Skeleton loader ─────────────────────────────────────────────────── */
@keyframes admin-concerns-skel-pulse-b-yu4k9bybct {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.tbl-row-skeleton td[b-yu4k9bybct] {
padding: 0.875rem 0.75rem;
}
.tbl-skel[b-yu4k9bybct] {
height: 1.0625rem;
width: 80px;
border-radius: 4px;
background: linear-gradient(90deg, var(--bs-tertiary-bg, #f0f0f0) 25%, var(--bs-secondary-bg, #e0e0e0) 50%, var(--bs-tertiary-bg, #f0f0f0) 75%);
background-size: 200% 100%;
animation: admin-concerns-skel-pulse-b-yu4k9bybct 1.5s ease-in-out infinite;
}
.tbl-skel-badge[b-yu4k9bybct] {
height: 1.25rem;
width: 90px;
border-radius: 9999px;
background: linear-gradient(90deg, var(--bs-tertiary-bg, #f0f0f0) 25%, var(--bs-secondary-bg, #e0e0e0) 50%, var(--bs-tertiary-bg, #f0f0f0) 75%);
background-size: 200% 100%;
animation: admin-concerns-skel-pulse-b-yu4k9bybct 1.5s ease-in-out infinite;
}
/* /Components/Pages/Admin/AdminSeedersPage.razor.rz.scp.css */
.seeders-header[b-h765tfg7o4] {
margin-bottom: 32px;
}
.seeders-title[b-h765tfg7o4] {
font-size: 28px;
font-weight: 700;
color: var(--text-primary, #1a1a2e);
margin: 0 0 8px;
}
.seeders-subtitle[b-h765tfg7o4] {
font-size: 14px;
color: var(--text-secondary, #6b7280);
margin: 0;
}
.seeders-grid[b-h765tfg7o4] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.seeder-card[b-h765tfg7o4] {
background: white;
border-radius: 12px;
padding: 24px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
border: 1px solid var(--neutral-200, #e5e7eb);
display: flex;
flex-direction: column;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.seeder-card:hover[b-h765tfg7o4] {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
}
.seeder-card-header[b-h765tfg7o4] {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.seeder-icon[b-h765tfg7o4] {
width: 40px;
height: 40px;
border-radius: 10px;
background: var(--brand-50, #f0fdfa);
color: var(--brand-600, #0d6785);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.seeder-name[b-h765tfg7o4] {
font-size: 16px;
font-weight: 600;
color: var(--text-primary, #1a1a2e);
margin: 0;
}
.seeder-description[b-h765tfg7o4] {
font-size: 13px;
color: var(--text-secondary, #6b7280);
line-height: 1.5;
margin: 0 0 16px;
flex-grow: 1;
}
.seeder-result[b-h765tfg7o4] {
font-size: 13px;
padding: 10px 12px;
border-radius: 8px;
margin-bottom: 16px;
line-height: 1.4;
}
.result-success[b-h765tfg7o4] {
background: #f0fdf4;
color: #166534;
border: 1px solid #bbf7d0;
}
.result-error[b-h765tfg7o4] {
background: #fef2f2;
color: #991b1b;
border: 1px solid #fecaca;
}
.seeder-run-btn[b-h765tfg7o4] {
align-self: flex-start;
border-radius: 8px;
padding: 8px 20px;
font-size: 14px;
font-weight: 500;
}
@media (max-width: 1200px) {
.seeders-grid[b-h765tfg7o4] {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.seeders-grid[b-h765tfg7o4] {
grid-template-columns: 1fr;
}
}
/* /Components/Pages/Admin/AdminSettingsPage.razor.rz.scp.css */
.admin-settings-container[b-y9u3ckplop] {
padding: 2rem;
}
.page-header[b-y9u3ckplop] {
margin-bottom: 2rem;
}
.page-header h2[b-y9u3ckplop] {
color: #1a1a1a;
font-size: 2rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.page-header p[b-y9u3ckplop] {
color: #666;
font-size: 1rem;
}
.alert[b-y9u3ckplop] {
padding: 1rem;
border-radius: 8px;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.alert-success[b-y9u3ckplop] {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.alert-danger[b-y9u3ckplop] {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.user-info-card[b-y9u3ckplop],
.claims-card[b-y9u3ckplop] {
background: white;
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 1.5rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.user-info-card h4[b-y9u3ckplop],
.claims-card h4[b-y9u3ckplop] {
color: #1a1a1a;
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1rem;
}
.user-info-table[b-y9u3ckplop] {
width: 100%;
}
.user-info-table td[b-y9u3ckplop] {
padding: 0.5rem;
border-bottom: 1px solid #eee;
}
.user-info-table td:first-child[b-y9u3ckplop] {
width: 150px;
}
.badge[b-y9u3ckplop] {
display: inline-block;
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.875rem;
font-weight: 500;
}
.bg-primary[b-y9u3ckplop] {
background-color: #0d6efd;
color: white;
}
.me-1[b-y9u3ckplop] {
margin-right: 0.25rem;
}
.claims-list[b-y9u3ckplop] {
max-height: 400px;
overflow-y: auto;
}
.claim-item[b-y9u3ckplop] {
padding: 0.75rem;
border-bottom: 1px solid #eee;
display: flex;
gap: 1rem;
}
.claim-item:last-child[b-y9u3ckplop] {
border-bottom: none;
}
.claim-type[b-y9u3ckplop] {
font-weight: 600;
color: #555;
min-width: 200px;
word-break: break-word;
}
.claim-value[b-y9u3ckplop] {
color: #333;
word-break: break-all;
}
/* /Components/Pages/Admin/AdminTrendChart.razor.rz.scp.css */
.admin-chart-card[b-hxux7mosdi] {
background: white;
border: 1px solid var(--neutral-200);
border-radius: 12px;
padding: 24px;
height: 100%;
min-height: 320px;
display: flex;
flex-direction: column;
box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}
.chart-header[b-hxux7mosdi] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 24px;
}
.chart-title[b-hxux7mosdi] {
font-size: 18px;
font-weight: 700;
color: var(--text-primary);
margin: 0 0 4px 0;
letter-spacing: -0.3px;
}
.chart-subtitle[b-hxux7mosdi] {
font-size: 13px;
color: var(--text-muted);
margin: 0;
}
.chart-badge[b-hxux7mosdi] {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: var(--brand-50);
color: var(--brand-700);
border-radius: 20px;
font-size: 12px;
font-weight: 600;
border: 1px solid var(--brand-100);
}
.chart-badge i[b-hxux7mosdi] {
font-size: 14px;
}
.chart-body[b-hxux7mosdi] {
flex: 1;
position: relative;
min-height: 240px;
}
.chart-canvas-container[b-hxux7mosdi] {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.chart-loading[b-hxux7mosdi], .chart-empty[b-hxux7mosdi] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
color: var(--text-muted);
}
.chart-empty i[b-hxux7mosdi] {
font-size: 32px;
margin-bottom: 12px;
opacity: 0.5;
}
@keyframes fadeIn-b-hxux7mosdi {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in[b-hxux7mosdi] {
animation: fadeIn-b-hxux7mosdi 0.4s ease-out forwards;
}
/* /Components/Pages/Admin/AgencyDetailPage.razor.rz.scp.css */
/* Loading / error states */
.agency-loading[b-lt4fyirkl0],
.agency-error[b-lt4fyirkl0] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 80px 20px;
color: #64748B;
text-align: center;
}
.agency-error i[b-lt4fyirkl0] { font-size: 48px; color: #CBD5E1; }
.agency-error h2[b-lt4fyirkl0] { font-size: 20px; font-weight: 700; color: #1F2937; margin: 0; }
/* Page layout */
.agency-detail-page[b-lt4fyirkl0] {
padding: 24px;
max-width: 1200px;
margin: 0 auto;
}
/* Header
Note: classes are prefixed "agency-" on purpose — generic names like
.header-left collide with globally-loaded css (ipd-dashboard.css). */
.agency-header[b-lt4fyirkl0] { margin-bottom: 24px; }
.agency-header-nav[b-lt4fyirkl0] { margin-bottom: 16px; }
.back-link[b-lt4fyirkl0] {
display: inline-flex;
align-items: center;
gap: 6px;
color: #64748B;
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: color 0.2s;
}
.back-link:hover[b-lt4fyirkl0] { color: var(--brand-500); }
.agency-header-content[b-lt4fyirkl0] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.agency-header-left[b-lt4fyirkl0] {
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
}
.agency-avatar[b-lt4fyirkl0] {
width: 64px;
height: 64px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 22px;
font-weight: 700;
flex-shrink: 0;
}
.agency-header-info h1[b-lt4fyirkl0] { font-size: 24px; font-weight: 700; color: #1F2937; margin: 0 0 6px; }
.agency-header-meta[b-lt4fyirkl0] {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.agency-code[b-lt4fyirkl0] {
background: #F1F5F9;
color: #475569;
padding: 2px 8px;
border-radius: 6px;
font-size: 13px;
}
.agency-status[b-lt4fyirkl0] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
}
.agency-status-active[b-lt4fyirkl0] { background: #ECFDF5; color: #059669; }
.agency-status-inactive[b-lt4fyirkl0] { background: #FEF2F2; color: #DC2626; }
.agency-status-internal[b-lt4fyirkl0] { background: var(--brand-50); color: var(--brand-500); }
/* Stats row */
.agency-stats-row[b-lt4fyirkl0] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin-bottom: 24px;
}
.agency-stat-card[b-lt4fyirkl0] {
display: flex;
align-items: center;
gap: 14px;
background: white;
border: 1px solid #E2E8F0;
border-radius: 12px;
padding: 16px 20px;
}
.agency-stat-icon[b-lt4fyirkl0] {
width: 44px;
height: 44px;
border-radius: 10px;
background: var(--brand-50);
color: var(--brand-500);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.agency-stat-content[b-lt4fyirkl0] { display: flex; flex-direction: column; }
.agency-stat-value[b-lt4fyirkl0] { font-size: 20px; font-weight: 700; color: #1F2937; line-height: 1.2; }
.agency-stat-sub[b-lt4fyirkl0] { font-size: 13px; font-weight: 500; color: #94A3B8; }
.agency-stat-label[b-lt4fyirkl0] { font-size: 12px; color: #64748B; font-weight: 500; }
/* Detail cards */
.detail-grid[b-lt4fyirkl0] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 16px;
margin-bottom: 16px;
}
.detail-card[b-lt4fyirkl0] {
background: white;
border: 1px solid #E2E8F0;
border-radius: 12px;
overflow: hidden;
}
.detail-card.full-width[b-lt4fyirkl0] { width: 100%; margin-bottom: 16px; }
.detail-card.full-width:last-child[b-lt4fyirkl0] { margin-bottom: 0; }
.detail-card .card-header[b-lt4fyirkl0] {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 20px;
background: #F8FAFC;
border-bottom: 1px solid #E2E8F0;
}
.detail-card .card-header i[b-lt4fyirkl0] { color: var(--brand-500); font-size: 16px; }
.detail-card .card-header h3[b-lt4fyirkl0] { font-size: 15px; font-weight: 600; color: #1F2937; margin: 0; }
.count-pill[b-lt4fyirkl0] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 7px;
border-radius: 11px;
background: var(--brand-50);
color: var(--brand-500);
font-size: 12px;
font-weight: 700;
}
.detail-card .card-body[b-lt4fyirkl0] { padding: 20px; }
/* Contact */
.contact-grid[b-lt4fyirkl0] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}
.contact-item[b-lt4fyirkl0] { display: flex; flex-direction: column; gap: 2px; }
.contact-label[b-lt4fyirkl0] { font-size: 12px; color: #94A3B8; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.contact-value[b-lt4fyirkl0] { font-size: 14px; color: #1F2937; }
a.contact-value[b-lt4fyirkl0] { text-decoration: none; }
a.contact-value:hover[b-lt4fyirkl0] { color: var(--brand-500); text-decoration: underline; }
.empty-hint a[b-lt4fyirkl0] { color: var(--brand-500); font-weight: 600; }
.agency-notes[b-lt4fyirkl0] { margin-top: 16px; }
.agency-notes.agency-notes-only[b-lt4fyirkl0] { margin-top: 12px; }
.agency-notes p[b-lt4fyirkl0] { font-size: 14px; color: #475569; margin: 4px 0 0; white-space: pre-wrap; }
/* Entity list (banks) */
.entity-list[b-lt4fyirkl0] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.entity-list-item[b-lt4fyirkl0] {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border: 1px solid #F1F5F9;
border-radius: 10px;
}
.entity-icon[b-lt4fyirkl0] {
width: 34px;
height: 34px;
border-radius: 8px;
background: #F1F5F9;
color: #64748B;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.entity-info[b-lt4fyirkl0] { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.entity-name[b-lt4fyirkl0] { font-size: 14px; font-weight: 600; color: #1F2937; }
.entity-code[b-lt4fyirkl0] { font-size: 12px; color: #64748B; background: transparent; padding: 0; }
.empty-hint[b-lt4fyirkl0] { font-size: 14px; color: #94A3B8; margin: 0; }
/* Agents table */
.agents-table[b-lt4fyirkl0] { width: 100%; border-collapse: collapse; }
.agents-table th[b-lt4fyirkl0] {
text-align: left;
font-size: 12px;
font-weight: 600;
color: #94A3B8;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 8px 12px;
border-bottom: 1px solid #E2E8F0;
}
.agents-table td[b-lt4fyirkl0] {
padding: 12px;
font-size: 14px;
color: #475569;
border-bottom: 1px solid #F1F5F9;
vertical-align: middle;
}
.agents-table tbody tr:last-child td[b-lt4fyirkl0] { border-bottom: none; }
.agents-table tbody tr:hover[b-lt4fyirkl0] { background: #F8FAFC; }
.agent-cell[b-lt4fyirkl0] { display: flex; align-items: center; gap: 10px; }
.agent-avatar[b-lt4fyirkl0] {
width: 34px;
height: 34px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 12px;
font-weight: 700;
flex-shrink: 0;
}
.agent-name[b-lt4fyirkl0] { font-weight: 600; color: #1F2937; cursor: pointer; }
.agent-name:hover[b-lt4fyirkl0] { color: var(--brand-500); text-decoration: underline; }
/* Add agent picker */
.agent-picker-list[b-lt4fyirkl0] {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
max-height: 360px;
overflow-y: auto;
}
.agent-picker-item[b-lt4fyirkl0] {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border: 1px solid #E2E8F0;
border-radius: 10px;
cursor: pointer;
transition: all 0.15s;
}
.agent-picker-item:hover[b-lt4fyirkl0] { border-color: var(--brand-500); background: var(--brand-50); }
.agent-picker-info[b-lt4fyirkl0] { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.agent-picker-info .agent-name[b-lt4fyirkl0] { cursor: inherit; }
.agent-meta[b-lt4fyirkl0] { font-size: 12px; color: #64748B; }
/* Confirm dialog look comes from the global confirm-* classes in wwwroot/css/modal-theme.css */
.modal-overlay[b-lt4fyirkl0] {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 1050;
padding: 1.5rem;
}
/* Responsive */
@media (max-width: 768px) {
.agency-detail-page[b-lt4fyirkl0] { padding: 16px; }
.agency-header-content[b-lt4fyirkl0] { flex-direction: column; align-items: flex-start; }
.agents-table th:nth-child(2)[b-lt4fyirkl0],
.agents-table td:nth-child(2)[b-lt4fyirkl0] { display: none; }
}
/* Branding card (feature 007) */
.branding-block[b-lt4fyirkl0] { }
.branding-subheading[b-lt4fyirkl0] {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 700;
color: #1F2937;
margin: 0 0 8px;
}
.branding-subheading i[b-lt4fyirkl0] { color: var(--brand-500); font-size: 15px; }
.branding-divider[b-lt4fyirkl0] {
height: 1px;
background: #F1F5F9;
margin: 20px 0;
}
/* Solid action buttons — align with the brand scheme used across Admin */
.btn-agency-edit[b-lt4fyirkl0],
.btn-agency-add[b-lt4fyirkl0] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 18px;
background: var(--brand-600, #004980);
color: white;
border: none;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
white-space: nowrap;
}
.btn-agency-edit:hover[b-lt4fyirkl0],
.btn-agency-add:hover[b-lt4fyirkl0] {
background: var(--brand-700, #003760);
}
/* Distinct accent per stat, matching the app's tinted-icon convention */
.agency-stat-icon-brand[b-lt4fyirkl0] { background: var(--brand-50); color: var(--brand-500); }
.agency-stat-icon-success[b-lt4fyirkl0] { background: #ECFDF5; color: #059669; }
.agency-stat-icon-violet[b-lt4fyirkl0] { background: #F5F3FF; color: #7C3AED; }
/* Subtle depth + hover interactivity on info cards and list rows */
.agency-stat-card[b-lt4fyirkl0] {
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
transition: box-shadow 0.2s, border-color 0.2s;
}
.agency-stat-card:hover[b-lt4fyirkl0] {
border-color: var(--brand-400, #3397C7);
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
.detail-card[b-lt4fyirkl0] {
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.entity-list-item[b-lt4fyirkl0] {
transition: all 0.15s;
}
.entity-list-item:hover[b-lt4fyirkl0] {
border-color: var(--brand-400, #3397C7);
background: var(--brand-50);
}
.entity-list-item:hover .entity-icon[b-lt4fyirkl0] {
background: white;
color: var(--brand-500);
}
/* /Components/Pages/Admin/ApiClientDetailPage.razor.rz.scp.css */
/* ========================================
API Client detail — drill-down page
Shares baseline classes with ApiClientsPage; this file only adds
detail-specific bits (breadcrumbs, webhook table, etc.).
======================================== */
.client-detail[b-f1wfxck4b8] {
padding: 24px;
max-width: 1400px;
margin: 0 auto;
}
.breadcrumb-row[b-f1wfxck4b8] {
margin-bottom: 6px;
}
.back-link[b-f1wfxck4b8] {
color: var(--text-muted, #6b7280);
font-size: 13px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
transition: color 0.15s;
}
.back-link:hover[b-f1wfxck4b8] {
color: var(--brand-600, #4f46e5);
}
.client-detail .dashboard-header[b-f1wfxck4b8] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 28px;
padding-bottom: 20px;
border-bottom: 1px solid var(--neutral-200, #e5e7eb);
gap: 16px;
flex-wrap: wrap;
}
.client-detail .dashboard-title[b-f1wfxck4b8] {
font-size: 26px;
font-weight: 700;
letter-spacing: -0.4px;
margin: 0 0 8px 0;
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.client-detail .dashboard-subtitle[b-f1wfxck4b8] {
font-size: 13.5px;
color: var(--text-muted, #6b7280);
margin: 0;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.client-detail .header-actions[b-f1wfxck4b8] {
display: flex;
gap: 8px;
flex-shrink: 0;
}
.btn-refresh[b-f1wfxck4b8] {
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
background: white;
border: 1px solid var(--neutral-200, #e5e7eb);
border-radius: 8px;
color: var(--text-secondary, #4b5563);
cursor: pointer;
transition: all 0.15s;
}
.btn-refresh:hover[b-f1wfxck4b8] {
background: var(--brand-50, #eef2ff);
border-color: var(--brand-300, #a5b4fc);
color: var(--brand-600, #4f46e5);
}
.btn-refresh.spinning i[b-f1wfxck4b8] {
animation: refresh-spin-b-f1wfxck4b8 0.7s linear infinite;
}
@keyframes refresh-spin-b-f1wfxck4b8 {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* 5-card stat row (1 more than the list page) */
.client-detail .admin-card-grid[b-f1wfxck4b8] {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 14px;
margin-bottom: 24px;
}
@media (max-width: 1200px) { .client-detail .admin-card-grid[b-f1wfxck4b8] { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .client-detail .admin-card-grid[b-f1wfxck4b8] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .client-detail .admin-card-grid[b-f1wfxck4b8] { grid-template-columns: 1fr; } }
.client-detail .admin-stat-card[b-f1wfxck4b8] {
background: #ffffff;
border: 1px solid var(--neutral-200, #e5e7eb);
border-radius: 10px;
padding: 14px 16px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
/* Left column = icon + label + description (stacked); right column = the value. */
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
column-gap: 16px;
row-gap: 3px;
align-items: center;
}
.client-detail .admin-stat-card.alert-card[b-f1wfxck4b8] {
border-color: var(--error-200, #fecaca);
background: linear-gradient(180deg, var(--error-50, #fef2f2) 0%, white 100%);
}
.client-detail .admin-stat-header[b-f1wfxck4b8] {
grid-column: 1;
grid-row: 1;
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
}
.client-detail .admin-stat-label[b-f1wfxck4b8] {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-muted, #6b7280);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.client-detail .admin-stat-icon[b-f1wfxck4b8] {
order: -1; /* render the icon before the label within the header flex row */
width: 32px;
height: 32px;
flex-shrink: 0;
background: linear-gradient(135deg, var(--brand-50, #eef2ff) 0%, white 100%);
color: var(--brand-600, #4f46e5);
border: 1px solid var(--brand-100, #e0e7ff);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
.client-detail .admin-stat-icon.success[b-f1wfxck4b8] { background: linear-gradient(135deg, #ecfdf5 0%, white 100%); color: #059669; border-color: #d1fae5; }
.client-detail .admin-stat-icon.danger[b-f1wfxck4b8] { background: linear-gradient(135deg, #fef2f2 0%, white 100%); color: #dc2626; border-color: #fee2e2; }
.client-detail .admin-stat-icon.info[b-f1wfxck4b8] { background: linear-gradient(135deg, #eff6ff 0%, white 100%); color: #2563eb; border-color: #dbeafe; }
/* Value lives in the right column, vertically centered across both rows. */
.client-detail .admin-stat-value[b-f1wfxck4b8] {
grid-column: 2;
grid-row: 1 / span 2;
align-self: center;
justify-self: end;
text-align: right;
font-size: 26px;
font-weight: 700;
color: var(--text-primary, #111827);
line-height: 1.1;
letter-spacing: -0.3px;
white-space: nowrap;
}
.client-detail .admin-stat-description[b-f1wfxck4b8] {
grid-column: 1;
grid-row: 2;
font-size: 11.5px;
color: var(--text-muted, #6b7280);
font-weight: 500;
}
/* Cards */
.client-detail .card[b-f1wfxck4b8] {
background: #ffffff !important;
border: 1px solid var(--neutral-200, #e5e7eb);
border-radius: 10px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.client-detail .card-body[b-f1wfxck4b8] {
padding: 20px 22px;
}
.section-title[b-f1wfxck4b8] {
font-size: 17px;
font-weight: 700;
color: var(--text-primary, #111827);
letter-spacing: -0.2px;
}
.section-subtitle[b-f1wfxck4b8] {
font-size: 13px;
color: var(--text-muted, #6b7280);
}
.list-head[b-f1wfxck4b8] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
margin-bottom: 16px;
flex-wrap: wrap;
}
/* Tables */
.client-detail .table thead th[b-f1wfxck4b8] {
background: transparent;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--text-muted, #6b7280);
font-weight: 600;
border-bottom: 1px solid var(--neutral-200, #e5e7eb);
padding: 10px 12px;
}
.client-detail .table tbody td[b-f1wfxck4b8] {
padding: 12px;
border-color: var(--neutral-100, #f3f4f6);
font-size: 13px;
vertical-align: middle;
}
.client-detail .table tbody tr.row-muted[b-f1wfxck4b8] { opacity: 0.55; }
.empty-inline[b-f1wfxck4b8] {
display: flex;
align-items: center;
gap: 10px;
padding: 16px;
background: var(--neutral-50, #f9fafb);
border: 1px dashed var(--neutral-200, #e5e7eb);
border-radius: 8px;
font-size: 13px;
color: var(--text-muted, #6b7280);
}
.empty-inline i[b-f1wfxck4b8] { font-size: 18px; }
/* Status pills (carried over from clients page) */
.status-pill[b-f1wfxck4b8] {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11.5px;
padding: 3px 9px;
border-radius: 999px;
font-weight: 600;
}
.status-pill.status-active[b-f1wfxck4b8] { background: #ecfdf5; color: #059669; border: 1px solid #d1fae5; }
.status-pill.status-revoked[b-f1wfxck4b8] { background: var(--neutral-100, #f3f4f6); color: var(--text-muted, #6b7280); border: 1px solid var(--neutral-200, #e5e7eb); }
.status-pill.status-pending[b-f1wfxck4b8] { background: #eff6ff; color: #1e40af; border: 1px solid #dbeafe; }
.status-pill.status-warn[b-f1wfxck4b8] { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.status-pill.status-app[b-f1wfxck4b8] { background: var(--neutral-100, #f3f4f6); color: var(--text-secondary, #4b5563); border: 1px solid var(--neutral-200, #e5e7eb); }
.status-pill i[b-f1wfxck4b8] { font-size: 10px; }
/* Webhook URL truncation */
.webhook-url[b-f1wfxck4b8] {
background: var(--neutral-50, #f9fafb);
padding: 2px 6px;
border-radius: 4px;
font-size: 12px;
color: var(--text-secondary, #4b5563);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.event-pill[b-f1wfxck4b8] {
background: #eef2ff;
color: #4338ca;
font-size: 11px;
padding: 2px 8px;
border-radius: 999px;
font-weight: 500;
border: 1px solid #e0e7ff;
}
.response-status[b-f1wfxck4b8] {
display: inline-block;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12px;
font-weight: 700;
padding: 2px 8px;
border-radius: 4px;
min-width: 38px;
text-align: center;
}
.response-status.status-success[b-f1wfxck4b8] { background: #dcfce7; color: #166534; }
.response-status.status-info[b-f1wfxck4b8] { background: #dbeafe; color: #1e40af; }
.response-status.status-warn[b-f1wfxck4b8] { background: #fef3c7; color: #92400e; }
.response-status.status-danger[b-f1wfxck4b8] { background: #fee2e2; color: #991b1b; }
.response-status.status-muted[b-f1wfxck4b8] { background: #e5e7eb; color: #374151; }
.key-prefix[b-f1wfxck4b8] {
background: var(--neutral-100, #f3f4f6);
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
color: var(--text-primary, #111827);
}
.separator[b-f1wfxck4b8] {
color: var(--text-muted, #6b7280);
opacity: 0.5;
}
/* Modal look comes from the global wwwroot/css/modal-theme.css */
.issued-meta[b-f1wfxck4b8] {
background: var(--neutral-50, #f9fafb);
border: 1px solid var(--neutral-200, #e5e7eb);
border-radius: 8px;
padding: 14px 16px;
display: grid;
gap: 8px;
}
.issued-meta > div[b-f1wfxck4b8] {
display: grid;
grid-template-columns: 80px 1fr;
gap: 12px;
font-size: 14px;
align-items: center;
}
.meta-label[b-f1wfxck4b8] {
color: var(--text-muted, #6b7280);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.4px;
font-weight: 600;
}
/* Send-test-event modal: JSON payload textarea */
.test-payload[b-f1wfxck4b8] {
font-size: 12.5px;
line-height: 1.45;
background: #0f172a;
color: #e2e8f0;
border-color: #1e293b;
min-height: 280px;
white-space: pre;
tab-size: 2;
}
.test-payload:focus[b-f1wfxck4b8] {
background: #0f172a;
color: #e2e8f0;
border-color: #3b82f6;
box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}
/* ===== Webhook event subscription chips + reference guide ===== */
.event-chips[b-f1wfxck4b8] {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.event-chip[b-f1wfxck4b8] {
border: 1px solid var(--bs-border-color, #dee2e6);
background: var(--bs-body-bg, #fff);
color: var(--bs-secondary-color, #6c757d);
font-size: 0.75rem;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
padding: 0.25rem 0.6rem;
border-radius: 999px;
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.event-chip:hover:not(:disabled)[b-f1wfxck4b8] {
border-color: var(--bs-primary, #0d6efd);
color: var(--bs-primary, #0d6efd);
}
.event-chip.is-active[b-f1wfxck4b8] {
background: var(--bs-primary, #0d6efd);
border-color: var(--bs-primary, #0d6efd);
color: #fff;
}
.event-chip:disabled[b-f1wfxck4b8] {
opacity: 0.6;
cursor: default;
}
.event-guide[b-f1wfxck4b8] {
background: var(--bs-tertiary-bg, #f8f9fa);
border: 1px solid var(--bs-border-color, #dee2e6);
}
.event-guide-group[b-f1wfxck4b8] {
margin-bottom: 0.75rem;
}
.event-guide-group:last-child[b-f1wfxck4b8] {
margin-bottom: 0;
}
.event-guide-cat[b-f1wfxck4b8] {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--bs-secondary-color, #6c757d);
margin-bottom: 0.3rem;
}
.event-guide-row[b-f1wfxck4b8] {
display: flex;
gap: 0.75rem;
padding: 0.25rem 0;
align-items: baseline;
}
.event-guide-name[b-f1wfxck4b8] {
flex: 0 0 auto;
min-width: 12rem;
color: var(--bs-emphasis-color, #212529);
font-size: 0.78rem;
}
.event-guide-desc[b-f1wfxck4b8] {
font-size: 0.8rem;
color: var(--bs-secondary-color, #6c757d);
}
@media (max-width: 575px) {
.event-guide-row[b-f1wfxck4b8] { flex-direction: column; gap: 0.1rem; }
.event-guide-name[b-f1wfxck4b8] { min-width: 0; }
}
/* ===== Webhook register form ===== */
.register-form[b-f1wfxck4b8] {
border: 1px solid var(--neutral-200, #e5e7eb);
border-radius: 12px;
overflow: hidden;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.register-form-head[b-f1wfxck4b8] {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
background: linear-gradient(135deg, var(--brand-50, #eef2ff) 0%, #fff 100%);
border-bottom: 1px solid var(--neutral-200, #e5e7eb);
}
.register-form-icon[b-f1wfxck4b8] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: var(--brand-600, #4f46e5);
color: #fff;
font-size: 16px;
flex-shrink: 0;
}
.register-form-title[b-f1wfxck4b8] {
font-weight: 700;
font-size: 14px;
color: var(--text-primary, #111827);
}
.register-form-sub[b-f1wfxck4b8] {
font-size: 12px;
color: var(--text-muted, #6b7280);
margin-top: 2px;
}
.register-form-body[b-f1wfxck4b8] { padding: 16px; }
.field-label[b-f1wfxck4b8] {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--text-secondary, #4b5563);
margin-bottom: 5px;
}
.field-label-note[b-f1wfxck4b8] {
font-weight: 500;
color: var(--text-muted, #9ca3af);
margin-left: 4px;
}
.field-hint[b-f1wfxck4b8] {
font-size: 11px;
color: var(--text-muted, #9ca3af);
margin-top: 4px;
}
.register-form .input-group-text[b-f1wfxck4b8] {
background: var(--neutral-50, #f9fafb);
border-color: var(--neutral-200, #e5e7eb);
color: var(--text-muted, #6b7280);
}
.register-form .form-control:focus[b-f1wfxck4b8] {
border-color: var(--brand-300, #a5b4fc);
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}
.register-form-actions[b-f1wfxck4b8] {
display: flex;
justify-content: flex-end;
gap: 8px;
border-top: 1px solid var(--neutral-100, #f3f4f6);
padding-top: 14px;
}
/* ===== Event pills in the list ===== */
.event-pill-group[b-f1wfxck4b8] {
display: flex;
flex-wrap: wrap;
gap: 4px;
max-width: 280px;
}
.event-pill-all[b-f1wfxck4b8] {
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--brand-50, #eef2ff);
color: var(--brand-600, #4f46e5);
border-color: var(--brand-100, #e0e7ff);
}
.event-pill-all i[b-f1wfxck4b8] { font-size: 9px; }
/* ===== Compact icon action buttons ===== */
.row-actions[b-f1wfxck4b8] {
display: inline-flex;
gap: 6px;
justify-content: flex-end;
}
.icon-btn[b-f1wfxck4b8] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 8px;
border: 1px solid var(--neutral-200, #e5e7eb);
background: #fff;
color: var(--text-secondary, #4b5563);
font-size: 13px;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
text-decoration: none;
}
.icon-btn-primary:hover[b-f1wfxck4b8] { background: var(--brand-600, #4f46e5); border-color: var(--brand-600, #4f46e5); color: #fff; }
.icon-btn-secondary:hover[b-f1wfxck4b8] { background: var(--neutral-100, #f3f4f6); color: var(--text-primary, #111827); }
.icon-btn-danger:hover[b-f1wfxck4b8] { background: #ef4444; border-color: #ef4444; color: #fff; }
/* ===== Webhook section buttons ===== */
.wh-btn[b-f1wfxck4b8] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
font-size: 13px;
font-weight: 600;
line-height: 1;
padding: 9px 16px;
border-radius: 9px;
border: 1px solid transparent;
cursor: pointer;
white-space: nowrap;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.wh-btn:disabled[b-f1wfxck4b8] { opacity: 0.6; cursor: default; }
.wh-btn i[b-f1wfxck4b8] { font-size: 13px; }
/* Primary — solid indigo */
.wh-btn-primary[b-f1wfxck4b8] {
background: var(--brand-600, #4f46e5);
color: #fff;
}
.wh-btn-primary:hover:not(:disabled)[b-f1wfxck4b8] {
background: var(--brand-700, #4338ca);
}
/* Outline — indigo on white (header "Add webhook") */
.wh-btn-outline[b-f1wfxck4b8] {
background: #fff;
color: var(--brand-600, #4f46e5);
border-color: var(--brand-200, #c7d2fe);
}
.wh-btn-outline:hover:not(:disabled)[b-f1wfxck4b8] {
background: var(--brand-50, #eef2ff);
border-color: var(--brand-300, #a5b4fc);
}
/* Ghost — neutral (Cancel) */
.wh-btn-ghost[b-f1wfxck4b8] {
background: #fff;
color: var(--text-secondary, #4b5563);
border-color: var(--neutral-200, #e5e7eb);
}
.wh-btn-ghost:hover:not(:disabled)[b-f1wfxck4b8] {
background: var(--neutral-50, #f9fafb);
border-color: var(--neutral-300, #d1d5db);
color: var(--text-primary, #111827);
}
.wh-btn:focus-visible[b-f1wfxck4b8] {
outline: none;
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3);
}
/* Disclosure — "What events can I subscribe to?" */
.wh-disclosure[b-f1wfxck4b8] {
display: inline-flex;
align-items: center;
gap: 6px;
background: transparent;
border: none;
padding: 4px 2px;
font-size: 13px;
font-weight: 600;
color: var(--brand-600, #4f46e5);
cursor: pointer;
border-radius: 6px;
transition: color 0.12s ease;
}
.wh-disclosure:hover[b-f1wfxck4b8] { color: var(--brand-700, #4338ca); }
.wh-disclosure:focus-visible[b-f1wfxck4b8] { outline: none; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.25); }
.wh-disclosure-chevron[b-f1wfxck4b8] { transition: transform 0.15s ease; font-size: 11px; }
.wh-disclosure.is-open .wh-disclosure-chevron[b-f1wfxck4b8] { transform: rotate(90deg); }
/* /Components/Pages/Admin/ApiClientsPage.razor.rz.scp.css */
/* ========================================
API Clients — self-contained styles
Aligned with AdminDashboardPage conventions but scoped here.
======================================== */
/* Dashboard header */
.dashboard-header[b-gr175wqo7b] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 32px;
padding-bottom: 24px;
border-bottom: 1px solid var(--neutral-200, #e5e7eb);
gap: 16px;
flex-wrap: wrap;
}
.header-content[b-gr175wqo7b] { flex: 1; min-width: 280px; }
.dashboard-title[b-gr175wqo7b] {
font-size: 28px;
font-weight: 700;
color: var(--text-primary, #111827);
margin: 0 0 8px 0;
letter-spacing: -0.5px;
}
.dashboard-subtitle[b-gr175wqo7b] {
font-size: 14px;
color: var(--text-muted, #6b7280);
margin: 0;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-weight: 500;
}
.dashboard-subtitle code[b-gr175wqo7b] {
background: var(--neutral-100, #f3f4f6);
padding: 1px 6px;
border-radius: 4px;
font-size: 13px;
color: var(--text-primary, #111827);
}
.separator[b-gr175wqo7b] {
color: var(--text-muted, #6b7280);
opacity: 0.5;
margin: 0 4px;
}
.header-actions[b-gr175wqo7b] {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.header-actions > .btn[b-gr175wqo7b],
.header-actions > .btn-refresh[b-gr175wqo7b] {
height: 40px;
}
.btn-refresh[b-gr175wqo7b] {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--neutral-300, #d1d5db);
background: white;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
color: var(--text-secondary, #4b5563);
font-size: 18px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
padding: 0;
}
.btn-refresh:hover:not(:disabled)[b-gr175wqo7b] {
border-color: var(--brand-300, #a5b4fc);
color: var(--brand-600, #4f46e5);
background: var(--brand-50, #eef2ff);
}
.btn-refresh.spinning i[b-gr175wqo7b] { animation: spin-b-gr175wqo7b 1s linear infinite; }
@keyframes spin-b-gr175wqo7b { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* Stat grid */
.admin-card-grid[b-gr175wqo7b] {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 18px;
}
.admin-card-grid.stats-row-6[b-gr175wqo7b] {
grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 1400px) { .admin-card-grid.stats-row-6[b-gr175wqo7b] { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1200px) { .admin-card-grid.stats-row-6[b-gr175wqo7b] { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 992px) {
.admin-card-grid[b-gr175wqo7b] { grid-template-columns: repeat(2, 1fr); }
.admin-card-grid.stats-row-6[b-gr175wqo7b] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
.admin-card-grid[b-gr175wqo7b],
.admin-card-grid.stats-row-6[b-gr175wqo7b] { grid-template-columns: 1fr; }
}
.admin-stat-card.alert-card[b-gr175wqo7b] {
border-color: var(--error-200, #fecaca);
background: linear-gradient(180deg, var(--error-50, #fef2f2) 0%, white 100%);
}
.admin-stat-card[b-gr175wqo7b] {
background: #ffffff;
border: 1px solid var(--neutral-200, #e5e7eb);
border-radius: 12px;
padding: 14px 16px;
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
display: flex;
align-items: center;
gap: 12px;
}
.admin-stat-card:hover[b-gr175wqo7b] {
border-color: var(--brand-200, #c7d2fe);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.admin-stat-body[b-gr175wqo7b] {
min-width: 0;
}
.admin-stat-icon[b-gr175wqo7b] {
width: 38px;
height: 38px;
flex: 0 0 auto;
background: #eef2ff;
color: #4f46e5;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.admin-stat-icon.success[b-gr175wqo7b] { background: #ecfdf5; color: #059669; }
.admin-stat-icon.danger[b-gr175wqo7b] { background: #fee2e2; color: #dc2626; }
.admin-stat-icon.info[b-gr175wqo7b] { background: #eff6ff; color: #2563eb; }
.admin-stat-icon.violet[b-gr175wqo7b] { background: #f3e8ff; color: #7c3aed; }
.admin-stat-value[b-gr175wqo7b] {
font-size: 22px;
font-weight: 700;
color: var(--text-primary, #111827);
line-height: 1.1;
letter-spacing: -0.5px;
margin: 0;
}
.admin-stat-label[b-gr175wqo7b] {
font-size: 11.5px;
font-weight: 600;
color: var(--text-secondary, #4b5563);
line-height: 1.25;
margin-top: 1px;
}
.admin-stat-description[b-gr175wqo7b] {
font-size: 11px;
color: var(--text-muted, #6b7280);
font-weight: 500;
line-height: 1.25;
margin-top: 1px;
}
/* Cards (body-level sections) — explicit white, no bg bleed */
.card[b-gr175wqo7b] {
background: #ffffff !important;
border: 1px solid var(--neutral-200, #e5e7eb);
border-radius: 10px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.card-body[b-gr175wqo7b] {
background: #ffffff;
padding: 20px 22px;
border-radius: 10px;
}
.section-title[b-gr175wqo7b] {
font-size: 18px;
font-weight: 700;
color: var(--text-primary, #111827);
margin: 0 0 4px 0;
letter-spacing: -0.2px;
}
.section-subtitle[b-gr175wqo7b] {
font-size: 13px;
color: var(--text-muted, #6b7280);
margin: 0 0 20px 0;
}
/* Collapsible "Issue a new key" card */
.issue-card[b-gr175wqo7b] { overflow: hidden; }
.issue-toggle[b-gr175wqo7b] {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
background: transparent;
border: 0;
text-align: left;
padding: 18px 22px;
cursor: pointer;
transition: background 0.15s;
}
.issue-toggle:hover[b-gr175wqo7b] { background: var(--neutral-50, #f9fafb); }
.issue-toggle .section-subtitle[b-gr175wqo7b] { margin: 4px 0 0 0; }
.issue-toggle .chevron[b-gr175wqo7b] {
font-size: 16px;
color: var(--text-muted, #6b7280);
transition: transform 0.2s ease;
flex-shrink: 0;
}
.issue-toggle .chevron.open[b-gr175wqo7b] { transform: rotate(180deg); }
.issue-body[b-gr175wqo7b] {
padding-top: 0;
transition: opacity 0.15s ease;
}
.issue-body.collapsed[b-gr175wqo7b] { display: none; }
/* Consistent control heights across the issue-key row */
.issue-body .form-label[b-gr175wqo7b] {
margin-bottom: 6px;
}
.issue-body .form-select[b-gr175wqo7b],
.issue-body .form-control[b-gr175wqo7b],
.issue-body .btn[b-gr175wqo7b] {
height: 42px;
font-size: 14px;
border-radius: 8px;
}
.issue-body .btn[b-gr175wqo7b] {
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 600;
}
/* List head — title + filters inline */
.list-head[b-gr175wqo7b] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.list-head .section-title[b-gr175wqo7b] { margin-bottom: 2px; }
.list-toolbar[b-gr175wqo7b] {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.search-wrap[b-gr175wqo7b] {
position: relative;
width: 300px;
max-width: 100%;
}
.search-wrap i[b-gr175wqo7b] {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted, #6b7280);
font-size: 14px;
pointer-events: none;
}
.search-wrap .form-control[b-gr175wqo7b] {
padding-left: 36px;
height: 38px;
font-size: 13px;
}
.btn-group .btn-outline-secondary[b-gr175wqo7b] {
font-size: 13px;
padding: 6px 14px;
border-color: var(--neutral-200, #e5e7eb);
color: var(--text-secondary, #4b5563);
font-weight: 500;
}
.btn-group .btn-check:checked + .btn-outline-secondary[b-gr175wqo7b] {
background: var(--brand-600, #4f46e5);
border-color: var(--brand-600, #4f46e5);
color: white;
}
/* Table */
.clients-table[b-gr175wqo7b] { margin-bottom: 0; }
.clients-table thead th[b-gr175wqo7b] {
background: transparent;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--text-muted, #6b7280);
font-weight: 600;
border-bottom: 1px solid var(--neutral-200, #e5e7eb);
padding: 12px;
}
.clients-table thead th.sortable[b-gr175wqo7b] {
cursor: pointer;
user-select: none;
transition: color 0.15s;
white-space: nowrap;
}
.clients-table thead th.sortable:hover[b-gr175wqo7b] { color: var(--brand-600, #4f46e5); }
.sort-caret[b-gr175wqo7b] {
font-size: 10px;
margin-left: 4px;
opacity: 0.4;
transition: opacity 0.15s;
vertical-align: baseline;
}
.clients-table thead th.sortable:hover .sort-caret[b-gr175wqo7b] { opacity: 0.7; }
.sort-caret.active[b-gr175wqo7b] {
opacity: 1;
color: var(--brand-600, #4f46e5);
}
.clients-table tbody td[b-gr175wqo7b] {
padding: 14px 12px;
border-color: var(--neutral-100, #f3f4f6);
font-size: 13px;
color: var(--text-primary, #111827);
}
.clients-table tbody tr:hover[b-gr175wqo7b] { background: var(--neutral-50, #f9fafb); }
.clients-table .row-muted[b-gr175wqo7b] { opacity: 0.55; }
.key-prefix[b-gr175wqo7b] {
background: var(--neutral-100, #f3f4f6);
padding: 3px 8px;
border-radius: 4px;
font-size: 12.5px;
color: var(--text-primary, #111827);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.row-link[b-gr175wqo7b] {
color: inherit;
text-decoration: none;
display: block;
}
.row-link:hover[b-gr175wqo7b] {
color: var(--brand-600, #4f46e5);
}
.row-link:hover .fw-semibold[b-gr175wqo7b] {
color: var(--brand-600, #4f46e5);
}
.metric-stack[b-gr175wqo7b] {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 2px;
line-height: 1.1;
}
.metric-value[b-gr175wqo7b] {
font-size: 16px;
font-weight: 700;
color: var(--text-primary, #111827);
font-variant-numeric: tabular-nums;
}
.metric-recent[b-gr175wqo7b] {
font-size: 10.5px;
font-weight: 600;
color: var(--success-600, #059669);
background: var(--success-50, #ecfdf5);
padding: 1px 6px;
border-radius: 999px;
border: 1px solid var(--success-100, #d1fae5);
}
.metric-bad[b-gr175wqo7b] {
font-size: 10.5px;
font-weight: 600;
color: var(--error-700, #b91c1c);
background: var(--error-50, #fef2f2);
padding: 1px 6px;
border-radius: 999px;
border: 1px solid var(--error-100, #fee2e2);
display: inline-flex;
align-items: center;
gap: 3px;
}
/* Status pills */
.status-pill[b-gr175wqo7b] {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
padding: 4px 10px;
border-radius: 999px;
font-weight: 600;
}
.status-pill.status-active[b-gr175wqo7b] {
background: #ecfdf5;
color: #059669;
border: 1px solid #d1fae5;
}
.status-pill.status-active i[b-gr175wqo7b] { font-size: 10px; }
.status-pill.status-revoked[b-gr175wqo7b] {
background: var(--neutral-100, #f3f4f6);
color: var(--text-muted, #6b7280);
border: 1px solid var(--neutral-200, #e5e7eb);
}
/* Empty state */
.empty-state[b-gr175wqo7b] {
text-align: center;
padding: 56px 16px;
border: none;
}
/* Modal look comes from the global wwwroot/css/modal-theme.css */
.issued-meta[b-gr175wqo7b] {
background: var(--neutral-50, #f9fafb);
border: 1px solid var(--neutral-200, #e5e7eb);
border-radius: 8px;
padding: 14px 16px;
display: grid;
gap: 8px;
}
.issued-meta > div[b-gr175wqo7b] {
display: grid;
grid-template-columns: 80px 1fr;
gap: 12px;
font-size: 14px;
align-items: center;
}
.meta-label[b-gr175wqo7b] {
color: var(--text-muted, #6b7280);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.4px;
font-weight: 600;
}
/* Responsive */
@media (max-width: 768px) {
.list-head[b-gr175wqo7b] { flex-direction: column; align-items: stretch; }
.list-toolbar[b-gr175wqo7b] { width: 100%; }
.search-wrap[b-gr175wqo7b] { width: 100%; }
}
/* /Components/Pages/Admin/ApiPlaygroundPage.razor.rz.scp.css */
/* ========================================
API Playground — Postman/Insomnia-style workspace
======================================== */
.playground[b-yd3jsce8jf] {
padding: 20px 24px;
max-width: 1600px;
margin: 0 auto;
color: var(--text-primary, #111827);
}
/* ─── Toolbar header ─── */
.playground-toolbar[b-yd3jsce8jf] {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 12px 16px;
background: white;
border: 1px solid var(--neutral-200, #e5e7eb);
border-radius: 12px;
margin-bottom: 20px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
flex-wrap: wrap;
}
.toolbar-left[b-yd3jsce8jf] {
display: flex;
align-items: center;
gap: 12px;
}
.app-icon[b-yd3jsce8jf] {
width: 40px;
height: 40px;
border-radius: 10px;
background: linear-gradient(135deg, var(--brand-600, #4f46e5), #7c3aed);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
box-shadow: 0 4px 10px rgba(79, 70, 229, 0.3);
}
.toolbar-title[b-yd3jsce8jf] {
font-size: 17px;
font-weight: 700;
letter-spacing: -0.3px;
line-height: 1.2;
}
.toolbar-subtitle[b-yd3jsce8jf] {
font-size: 12.5px;
color: var(--text-muted, #6b7280);
line-height: 1.2;
margin-top: 2px;
}
.toolbar-subtitle code[b-yd3jsce8jf] {
background: var(--neutral-100, #f3f4f6);
padding: 1px 5px;
border-radius: 3px;
font-size: 11.5px;
color: var(--text-primary, #111827);
}
.toolbar-right[b-yd3jsce8jf] {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.env-chip[b-yd3jsce8jf] {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
padding: 5px 10px;
border-radius: 999px;
border: 1px solid transparent;
}
.env-chip.env-ready[b-yd3jsce8jf] {
background: #ecfdf5;
color: #059669;
border-color: #d1fae5;
}
.env-chip.env-missing[b-yd3jsce8jf] {
background: #fffbeb;
color: #b45309;
border-color: #fef3c7;
}
/* ─── Workspace grid ─── */
.playground-grid[b-yd3jsce8jf] {
display: grid;
grid-template-columns: 300px 1fr;
gap: 20px;
align-items: start;
}
@media (max-width: 1100px) {
.playground-grid[b-yd3jsce8jf] { grid-template-columns: 1fr; }
}
.pg-sidebar[b-yd3jsce8jf] {
display: flex;
flex-direction: column;
gap: 16px;
position: sticky;
top: 20px;
}
.pg-main[b-yd3jsce8jf] {
display: flex;
flex-direction: column;
gap: 16px;
min-width: 0;
}
/* ─── Cards ─── */
.pg-card[b-yd3jsce8jf] {
background: white;
border: 1px solid var(--neutral-200, #e5e7eb);
border-radius: 12px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
overflow: hidden;
}
.pg-card-head[b-yd3jsce8jf] {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
background: #fafbfc;
border-bottom: 1px solid var(--neutral-200, #e5e7eb);
font-size: 12.5px;
font-weight: 600;
color: var(--text-primary, #111827);
}
.pg-card-head > i:first-child[b-yd3jsce8jf] {
color: var(--brand-600, #4f46e5);
}
.pg-card-body[b-yd3jsce8jf] {
padding: 16px;
}
.pg-card-body.p-0[b-yd3jsce8jf] { padding: 0; }
.pg-label[b-yd3jsce8jf] {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--text-muted, #6b7280);
margin-bottom: 6px;
display: block;
}
/* ─── Request bar (Postman-like URL builder) ─── */
.request-bar[b-yd3jsce8jf] {
display: flex;
background: white;
border: 1px solid var(--neutral-200, #e5e7eb);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.method-select[b-yd3jsce8jf] {
border: none;
background: white;
padding: 0 14px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 13px;
font-weight: 700;
outline: none;
cursor: pointer;
min-width: 110px;
border-right: 1px solid var(--neutral-200, #e5e7eb);
letter-spacing: 0.3px;
}
.method-select.get[b-yd3jsce8jf] { color: #1e40af; }
.method-select.post[b-yd3jsce8jf] { color: #166534; }
.method-select.patch[b-yd3jsce8jf] { color: #92400e; }
.method-select.delete[b-yd3jsce8jf] { color: #991b1b; }
.url-input[b-yd3jsce8jf] {
flex: 1;
border: none;
padding: 12px 14px;
font-size: 13.5px;
background: white;
outline: none;
color: var(--text-primary, #111827);
}
.url-input:focus[b-yd3jsce8jf] { background: #fafbfc; }
.send-btn[b-yd3jsce8jf] {
border: none;
border-radius: 0;
padding: 0 22px;
display: flex;
align-items: center;
gap: 7px;
font-weight: 600;
font-size: 14px;
min-width: 90px;
background: var(--brand-600, #4f46e5);
}
.send-btn:hover:not(:disabled)[b-yd3jsce8jf] { background: var(--brand-700, #4338ca); }
/* ─── Body editor ─── */
.body-editor[b-yd3jsce8jf] {
width: 100%;
border: none;
padding: 14px 16px;
background: #fafbfc;
font-size: 12.5px;
color: var(--text-primary, #111827);
resize: vertical;
outline: none;
min-height: 100px;
line-height: 1.55;
}
.body-editor:focus[b-yd3jsce8jf] { background: white; }
/* ─── Quick scenarios (chips) ─── */
.chip-row[b-yd3jsce8jf] {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 10px;
}
/* Banner showing the application id chained scenarios will target */
.tracked-app[b-yd3jsce8jf] {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
margin-bottom: 12px;
background: var(--brand-50, #eef2ff);
border: 1px solid var(--brand-200, #c7d2fe);
border-radius: 8px;
font-size: 12.5px;
color: var(--brand-800, #3730a3);
}
.tracked-app i[b-yd3jsce8jf] { font-size: 14px; color: var(--brand-600, #4f46e5); }
.tracked-app span[b-yd3jsce8jf] { flex: 1; }
.tracked-app strong[b-yd3jsce8jf] { color: var(--brand-700, #4338ca); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.tracked-clear[b-yd3jsce8jf] {
background: transparent;
border: none;
color: var(--text-muted, #6b7280);
padding: 0 4px;
cursor: pointer;
font-size: 14px;
line-height: 1;
border-radius: 4px;
}
.tracked-clear:hover[b-yd3jsce8jf] {
color: var(--text-primary, #111827);
background: rgba(255, 255, 255, 0.5);
}
.chip-row:last-child[b-yd3jsce8jf] { margin-bottom: 0; }
.chip-group-label[b-yd3jsce8jf] {
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--text-muted, #6b7280);
width: 75px;
flex-shrink: 0;
}
.chip[b-yd3jsce8jf] {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
padding: 5px 10px 5px 5px;
border: 1px solid var(--neutral-200, #e5e7eb);
border-radius: 999px;
background: white;
color: var(--text-primary, #111827);
font-weight: 500;
cursor: pointer;
transition: all 0.12s ease;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.chip em[b-yd3jsce8jf] {
font-style: normal;
color: var(--text-muted, #6b7280);
font-size: 11.5px;
margin-left: 3px;
}
.chip:hover[b-yd3jsce8jf] {
background: var(--brand-50, #eef2ff);
border-color: var(--brand-300, #a5b4fc);
color: var(--brand-700, #4338ca);
}
.chip-warning[b-yd3jsce8jf] { border-color: #fde68a; }
.chip-warning:hover[b-yd3jsce8jf] { background: #fffbeb; border-color: #f59e0b; color: #92400e; }
.chip-danger[b-yd3jsce8jf] { border-color: #fecaca; padding: 5px 10px; }
.chip-danger:hover[b-yd3jsce8jf] { background: #fef2f2; border-color: #f87171; color: #b91c1c; }
/* Replayed badge next to response status */
.response-replayed[b-yd3jsce8jf] {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 700;
padding: 3px 8px;
border-radius: 999px;
background: #e0e7ff;
color: #3730a3;
border: 1px solid #c7d2fe;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.response-replayed i[b-yd3jsce8jf] { font-size: 12px; }
/* ─── Method pills (small, used inside chips/history/response) ─── */
.method-pill[b-yd3jsce8jf] {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 10px;
font-weight: 700;
padding: 3px 6px;
border-radius: 4px;
letter-spacing: 0.4px;
min-width: 42px;
flex-shrink: 0;
}
.method-pill.get[b-yd3jsce8jf] { background: #dbeafe; color: #1e40af; }
.method-pill.post[b-yd3jsce8jf] { background: #dcfce7; color: #166534; }
.method-pill.patch[b-yd3jsce8jf] { background: #fef3c7; color: #92400e; }
.method-pill.delete[b-yd3jsce8jf] { background: #fee2e2; color: #991b1b; }
.method-pill.other[b-yd3jsce8jf] { background: #e5e7eb; color: #374151; }
.badge-status[b-yd3jsce8jf] {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 10.5px;
font-weight: 700;
padding: 3px 6px;
border-radius: 4px;
background: #fee2e2;
color: #991b1b;
min-width: 34px;
}
/* ─── Response card ─── */
.response-card[b-yd3jsce8jf] { min-height: 260px; }
.response-meta[b-yd3jsce8jf] {
display: flex;
align-items: center;
gap: 12px;
margin-left: auto;
font-size: 12px;
color: var(--text-muted, #6b7280);
}
.response-time[b-yd3jsce8jf],
.response-size[b-yd3jsce8jf] {
display: inline-flex;
align-items: center;
gap: 4px;
}
.response-time i[b-yd3jsce8jf],
.response-size i[b-yd3jsce8jf] { font-size: 11px; opacity: 0.7; }
.response-status[b-yd3jsce8jf] {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11.5px;
padding: 3px 8px;
border-radius: 5px;
font-weight: 700;
letter-spacing: 0.3px;
border: 1px solid transparent;
}
.st-ok[b-yd3jsce8jf] { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.st-info[b-yd3jsce8jf] { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.st-warn[b-yd3jsce8jf] { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.st-danger[b-yd3jsce8jf] { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.st-muted[b-yd3jsce8jf] { background: #e5e7eb; color: #374151; border-color: #d1d5db; }
.response-request-echo[b-yd3jsce8jf] {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
background: #fafbfc;
border-bottom: 1px solid var(--neutral-200, #e5e7eb);
}
.echo-url[b-yd3jsce8jf] {
color: var(--text-primary, #111827);
font-size: 12.5px;
word-break: break-all;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
background: transparent;
padding: 0;
}
.request-body-details[b-yd3jsce8jf] {
padding: 0;
border-bottom: 1px solid var(--neutral-200, #e5e7eb);
background: #fafbfc;
}
.request-body-details summary[b-yd3jsce8jf] {
padding: 8px 16px;
font-size: 12px;
cursor: pointer;
color: var(--text-muted, #6b7280);
user-select: none;
}
.request-body-details summary:hover[b-yd3jsce8jf] { color: var(--text-primary, #111827); }
.request-body-details pre[b-yd3jsce8jf] { margin: 0; border-radius: 0; }
.code-block[b-yd3jsce8jf] {
background: #0f172a;
color: #e2e8f0;
padding: 16px 18px;
margin: 0;
font-size: 12.5px;
line-height: 1.6;
max-height: 560px;
overflow: auto;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
border-radius: 0;
}
.code-block code[b-yd3jsce8jf] {
color: inherit;
background: transparent;
padding: 0;
}
.code-block-light[b-yd3jsce8jf] {
background: #f1f5f9;
color: #334155;
max-height: 300px;
}
.empty-response[b-yd3jsce8jf] {
text-align: center;
padding: 56px 20px;
color: var(--text-muted, #6b7280);
}
.empty-response > i[b-yd3jsce8jf] {
font-size: 40px;
display: block;
margin-bottom: 14px;
opacity: 0.45;
}
.empty-title[b-yd3jsce8jf] {
font-weight: 600;
color: var(--text-primary, #111827);
font-size: 14px;
}
.empty-hint[b-yd3jsce8jf] {
font-size: 12.5px;
margin-top: 4px;
}
.empty-hint kbd[b-yd3jsce8jf] {
background: var(--neutral-100, #f3f4f6);
border: 1px solid var(--neutral-200, #e5e7eb);
border-radius: 4px;
padding: 1px 6px;
font-size: 11px;
font-family: inherit;
color: var(--text-primary, #111827);
}
/* ─── History ─── */
.history-list[b-yd3jsce8jf] {
display: flex;
flex-direction: column;
max-height: 380px;
overflow-y: auto;
}
.history-row[b-yd3jsce8jf] {
display: grid;
grid-template-columns: 40px 46px 1fr auto;
gap: 8px;
align-items: center;
padding: 9px 14px;
border: none;
border-bottom: 1px solid var(--neutral-100, #f3f4f6);
background: transparent;
text-align: left;
font-size: 11.5px;
cursor: pointer;
transition: background 0.12s ease;
width: 100%;
}
.history-row:hover[b-yd3jsce8jf] { background: var(--neutral-50, #f9fafb); }
.history-row:last-child[b-yd3jsce8jf] { border-bottom: none; }
.history-row.active[b-yd3jsce8jf] {
background: var(--brand-50, #eef2ff);
border-left: 3px solid var(--brand-600, #4f46e5);
padding-left: 11px;
}
.h-status[b-yd3jsce8jf] {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-weight: 700;
font-size: 10.5px;
padding: 2px 4px;
border-radius: 4px;
text-align: center;
border: 1px solid transparent;
}
.h-method[b-yd3jsce8jf] {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-weight: 700;
font-size: 10px;
letter-spacing: 0.3px;
}
.h-method.get[b-yd3jsce8jf] { color: #1e40af; }
.h-method.post[b-yd3jsce8jf] { color: #166534; }
.h-method.patch[b-yd3jsce8jf] { color: #92400e; }
.h-method.delete[b-yd3jsce8jf] { color: #991b1b; }
.h-method.other[b-yd3jsce8jf] { color: #374151; }
.h-path[b-yd3jsce8jf] {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11px;
color: var(--text-primary, #111827);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.h-time[b-yd3jsce8jf] {
font-size: 10.5px;
color: var(--text-muted, #6b7280);
font-variant-numeric: tabular-nums;
}
.ms-unit[b-yd3jsce8jf] { color: var(--text-muted, #6b7280); margin-left: 1px; }
.empty-history[b-yd3jsce8jf] {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 22px 14px;
color: var(--text-muted, #6b7280);
font-size: 12px;
text-align: center;
}
.empty-history i[b-yd3jsce8jf] {
font-size: 22px;
opacity: 0.5;
}
/* ─── Misc ─── */
.btn-link-muted[b-yd3jsce8jf] {
background: none;
border: none;
color: var(--text-muted, #6b7280);
font-size: 12px;
padding: 2px 6px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
border-radius: 4px;
transition: all 0.12s ease;
}
.btn-link-muted:hover:not(:disabled)[b-yd3jsce8jf] {
color: var(--brand-600, #4f46e5);
background: var(--brand-50, #eef2ff);
}
.btn-link-muted:disabled[b-yd3jsce8jf] { opacity: 0.4; cursor: not-allowed; }
/* ─── Selected-scenario description (what the loaded endpoint is for) ─── */
.scenario-desc[b-yd3jsce8jf] {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 0 0 16px;
padding: 8px 12px;
background: var(--brand-50, #eef2ff);
border: 1px solid var(--neutral-200, #e5e7eb);
border-left: 3px solid var(--brand-600, #4f46e5);
border-radius: 8px;
font-size: 12.5px;
color: var(--text-primary, #374151);
line-height: 1.45;
}
.scenario-desc i[b-yd3jsce8jf] {
color: var(--brand-600, #4f46e5);
margin-top: 1px;
flex: 0 0 auto;
}
/* /Components/Pages/Admin/ApiRequestLogsPage.razor.rz.scp.css */
/* ========================================
API Request Logs — admin audit viewer
======================================== */
.logs-page[b-9lqiuw4f68] {
padding: 20px 24px;
max-width: 1600px;
margin: 0 auto;
color: var(--text-primary, #111827);
}
/* ─── Toolbar ─── */
.logs-toolbar[b-9lqiuw4f68] {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 12px 16px;
background: var(--surface, #fff);
border: 1px solid var(--neutral-200, #e5e7eb);
border-radius: 12px;
margin-bottom: 16px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
flex-wrap: wrap;
}
.tb-left[b-9lqiuw4f68] { display: flex; align-items: center; gap: 12px; }
.tb-icon[b-9lqiuw4f68] {
width: 40px; height: 40px; border-radius: 10px;
background: linear-gradient(135deg, var(--brand-600, #4f46e5), #7c3aed);
color: #fff; display: flex; align-items: center; justify-content: center;
font-size: 19px; box-shadow: 0 4px 10px rgba(79, 70, 229, 0.3);
}
.tb-title[b-9lqiuw4f68] { font-size: 17px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.2; }
.tb-subtitle[b-9lqiuw4f68] { font-size: 12.5px; color: var(--text-muted, #6b7280); margin-top: 2px; }
.tb-subtitle code[b-9lqiuw4f68] { background: var(--neutral-100, #f3f4f6); padding: 1px 5px; border-radius: 3px; font-size: 11.5px; }
.tb-right[b-9lqiuw4f68] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.btn.spin i[b-9lqiuw4f68] { animation: spin-b-9lqiuw4f68 0.8s linear infinite; }
@keyframes spin-b-9lqiuw4f68 { to { transform: rotate(360deg); } }
/* ─── Stat cards ─── */
.stat-grid[b-9lqiuw4f68] {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 12px; margin-bottom: 16px;
}
.stat-card[b-9lqiuw4f68] {
display: flex; align-items: center; gap: 12px;
background: var(--surface, #fff);
border: 1px solid var(--neutral-200, #e5e7eb);
border-radius: 12px; padding: 14px 16px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.stat-card.is-error[b-9lqiuw4f68] { border-color: #fecaca; background: #fef2f2; }
.stat-ico[b-9lqiuw4f68] {
width: 38px; height: 38px; border-radius: 9px; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.ico-blue[b-9lqiuw4f68] { background: #eef2ff; color: #4f46e5; }
.ico-red[b-9lqiuw4f68] { background: #fee2e2; color: #dc2626; }
.ico-amber[b-9lqiuw4f68] { background: #fef3c7; color: #d97706; }
.ico-violet[b-9lqiuw4f68] { background: #f3e8ff; color: #7c3aed; }
.stat-val[b-9lqiuw4f68] { font-size: 22px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.1; }
.stat-val .u[b-9lqiuw4f68] { font-size: 12px; font-weight: 600; color: var(--text-muted, #6b7280); margin-left: 2px; }
.stat-lbl[b-9lqiuw4f68] { font-size: 11.5px; color: var(--text-muted, #6b7280); margin-top: 1px; }
/* ─── Filter bar ─── */
.filter-bar[b-9lqiuw4f68] {
display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
background: var(--surface, #fff);
border: 1px solid var(--neutral-200, #e5e7eb);
border-radius: 12px; padding: 14px 16px; margin-bottom: 16px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.f-field[b-9lqiuw4f68] { display: flex; flex-direction: column; gap: 4px; flex: 1 1 180px; min-width: 130px; }
.f-field.f-sm[b-9lqiuw4f68] { flex: 0 0 130px; }
.f-field label[b-9lqiuw4f68] { font-size: 11px; font-weight: 600; color: var(--text-muted, #6b7280); text-transform: uppercase; letter-spacing: 0.4px; }
.f-actions[b-9lqiuw4f68] { display: flex; align-items: center; gap: 8px; }
/* Uniform control height so selects, the text input, and the buttons all line up */
.filter-bar .form-select[b-9lqiuw4f68],
.filter-bar .form-control[b-9lqiuw4f68],
.filter-bar .f-actions .btn[b-9lqiuw4f68] {
height: 36px;
box-sizing: border-box;
font-size: 13px;
}
/* Filter action buttons — match the page's brand styling */
.filter-bar .f-actions .btn[b-9lqiuw4f68] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 16px;
border-radius: 8px;
font-weight: 600;
border: 1px solid transparent;
transition: background-color 0.15s, box-shadow 0.15s, border-color 0.15s, transform 0.05s;
}
.filter-bar .f-actions .btn i[b-9lqiuw4f68] { font-size: 12px; }
.filter-bar .f-actions .btn-primary[b-9lqiuw4f68] {
background: var(--brand-600, #4f46e5);
border-color: var(--brand-600, #4f46e5);
color: #fff;
box-shadow: 0 1px 2px rgba(79, 70, 229, 0.25);
}
.filter-bar .f-actions .btn-primary:hover:not(:disabled)[b-9lqiuw4f68] {
background: #4338ca; border-color: #4338ca;
box-shadow: 0 2px 8px rgba(79, 70, 229, 0.35);
}
.filter-bar .f-actions .btn-primary:active:not(:disabled)[b-9lqiuw4f68] { transform: translateY(1px); }
.filter-bar .f-actions .btn-primary:disabled[b-9lqiuw4f68] { opacity: 0.6; }
/* Reset — a quiet ghost button instead of a bare link */
.filter-bar .f-actions .btn-link[b-9lqiuw4f68] {
color: var(--text-muted, #6b7280);
text-decoration: none;
background: var(--surface, #fff);
border-color: var(--neutral-200, #e5e7eb);
}
.filter-bar .f-actions .btn-link:hover[b-9lqiuw4f68] {
background: var(--neutral-50, #f9fafb);
color: var(--text-primary, #111827);
border-color: var(--neutral-300, #d1d5db);
}
/* ─── Layout ─── */
.logs-layout[b-9lqiuw4f68] { display: grid; grid-template-columns: 1fr; gap: 16px; }
.logs-layout.with-detail[b-9lqiuw4f68] { grid-template-columns: minmax(0, 1.4fr) minmax(360px, 1fr); }
@media (max-width: 1100px) { .logs-layout.with-detail[b-9lqiuw4f68] { grid-template-columns: 1fr; } }
.logs-main[b-9lqiuw4f68] {
background: var(--surface, #fff);
border: 1px solid var(--neutral-200, #e5e7eb);
border-radius: 12px; overflow: hidden;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.logs-table-wrap[b-9lqiuw4f68] { overflow-x: auto; }
/* ─── Table ─── */
.logs-table[b-9lqiuw4f68] { width: 100%; border-collapse: collapse; font-size: 13px; }
.logs-table thead th[b-9lqiuw4f68] {
text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.4px; color: var(--text-muted, #6b7280);
padding: 10px 14px; border-bottom: 1px solid var(--neutral-200, #e5e7eb);
background: var(--neutral-50, #f9fafb); position: sticky; top: 0; z-index: 1;
}
.logs-table tbody td[b-9lqiuw4f68] { padding: 9px 14px; border-bottom: 1px solid var(--neutral-100, #f3f4f6); vertical-align: middle; }
.logs-table tbody tr[b-9lqiuw4f68] { cursor: pointer; transition: background 0.1s; }
.logs-table tbody tr:hover[b-9lqiuw4f68] { background: var(--neutral-50, #f9fafb); }
.logs-table tbody tr.active[b-9lqiuw4f68] { background: #eef2ff; box-shadow: inset 3px 0 0 var(--brand-600, #4f46e5); }
.mono[b-9lqiuw4f68] { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.dim[b-9lqiuw4f68] { color: var(--text-muted, #6b7280); }
.nowrap[b-9lqiuw4f68] { white-space: nowrap; }
.ta-r[b-9lqiuw4f68] { text-align: right; }
.slow[b-9lqiuw4f68] { color: #d97706; font-weight: 600; }
.path[b-9lqiuw4f68] { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty[b-9lqiuw4f68] { text-align: center; color: var(--text-muted, #9ca3af); padding: 40px 0 !important; }
.empty i[b-9lqiuw4f68] { font-size: 26px; display: block; margin-bottom: 6px; opacity: 0.5; }
.pager[b-9lqiuw4f68] {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 14px; font-size: 12.5px; border-top: 1px solid var(--neutral-100, #f3f4f6);
}
/* ─── Method + status pills ─── */
.m-pill[b-9lqiuw4f68], .s-pill[b-9lqiuw4f68] {
display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px;
padding: 2px 7px; border-radius: 5px; font-family: ui-monospace, Menlo, Consolas, monospace;
}
.m-pill.get[b-9lqiuw4f68] { background: #dbeafe; color: #1d4ed8; }
.m-pill.post[b-9lqiuw4f68] { background: #dcfce7; color: #15803d; }
.m-pill.patch[b-9lqiuw4f68] { background: #fef3c7; color: #b45309; }
.m-pill.delete[b-9lqiuw4f68] { background: #fee2e2; color: #b91c1c; }
.m-pill.other[b-9lqiuw4f68] { background: #e5e7eb; color: #374151; }
.s-pill.s-ok[b-9lqiuw4f68] { background: #dcfce7; color: #15803d; }
.s-pill.s-info[b-9lqiuw4f68] { background: #cffafe; color: #0e7490; }
.s-pill.s-warn[b-9lqiuw4f68] { background: #fef3c7; color: #b45309; }
.s-pill.s-danger[b-9lqiuw4f68] { background: #fee2e2; color: #b91c1c; }
.s-pill.s-muted[b-9lqiuw4f68] { background: #e5e7eb; color: #374151; }
/* ─── Detail drawer ─── */
.detail[b-9lqiuw4f68] {
background: var(--surface, #fff);
border: 1px solid var(--neutral-200, #e5e7eb);
border-radius: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
align-self: start; position: sticky; top: 16px; max-height: calc(100vh - 32px);
display: flex; flex-direction: column; overflow: hidden;
}
.detail-head[b-9lqiuw4f68] {
display: flex; justify-content: space-between; align-items: center;
padding: 12px 14px; border-bottom: 1px solid var(--neutral-200, #e5e7eb);
background: var(--neutral-50, #f9fafb);
}
.detail-head .x[b-9lqiuw4f68] { border: 0; background: none; color: var(--text-muted, #6b7280); cursor: pointer; padding: 4px; border-radius: 6px; }
.detail-head .x:hover[b-9lqiuw4f68] { background: var(--neutral-200, #e5e7eb); }
.detail-body[b-9lqiuw4f68] { padding: 14px; overflow-y: auto; font-size: 13px; }
.kv[b-9lqiuw4f68] { display: grid; grid-template-columns: 96px 1fr; gap: 8px; padding: 4px 0; }
.kv > span:first-child[b-9lqiuw4f68] { color: var(--text-muted, #6b7280); font-size: 12px; }
.kv code[b-9lqiuw4f68] { background: var(--neutral-100, #f3f4f6); padding: 1px 5px; border-radius: 4px; font-size: 12px; word-break: break-all; }
.brk[b-9lqiuw4f68] { word-break: break-all; }
.trunc-note[b-9lqiuw4f68] { margin: 10px 0; padding: 6px 10px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 8px; font-size: 12px; }
.body-head[b-9lqiuw4f68] { display: flex; justify-content: space-between; align-items: center; margin: 12px 0 4px; font-weight: 600; font-size: 12.5px; }
.body-head .copy[b-9lqiuw4f68] { border: 0; background: none; color: var(--text-muted, #6b7280); cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.body-head .copy:hover:not(:disabled)[b-9lqiuw4f68] { background: var(--neutral-100, #f3f4f6); color: var(--brand-600, #4f46e5); }
.body-head .copy:disabled[b-9lqiuw4f68] { opacity: 0.4; cursor: default; }
.code[b-9lqiuw4f68] {
background: #0f172a; color: #e2e8f0; border-radius: 8px; padding: 10px 12px; margin: 0;
font-size: 12px; line-height: 1.5; max-height: 260px; overflow: auto;
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word;
}
/* /Components/Pages/Admin/AuditPage.razor.rz.scp.css */
/* Audit Tab Styles */
.audit-page-content[b-znw3c3szcv] {
max-width: 100%;
}
/* Header Section */
.audit-header[b-znw3c3szcv] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 28px;
padding: 24px;
background: linear-gradient(135deg, rgba(227, 241, 251, 0.5) 0%, rgba(240, 247, 252, 0.6) 100%);
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 12px;
}
.audit-title-section[b-znw3c3szcv] {
flex: 1;
}
.audit-title[b-znw3c3szcv] {
display: flex;
align-items: center;
gap: 12px;
font-size: 24px;
font-weight: 700;
color: #1F2937;
margin: 0 0 8px 0;
}
.audit-title i[b-znw3c3szcv] {
font-size: 28px;
color: var(--brand-500);
}
.audit-subtitle[b-znw3c3szcv] {
font-size: 14px;
color: #6B7280;
margin: 0;
}
.audit-actions[b-znw3c3szcv] {
display: flex;
gap: 12px;
}
.btn-export[b-znw3c3szcv] {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: var(--brand-600, #004980);
color: white;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-export:hover[b-znw3c3szcv] {
background: var(--brand-700, #003760);
}
.btn-export i[b-znw3c3szcv] {
font-size: 16px;
}
/* Filter Section */
.audit-filters[b-znw3c3szcv] {
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 10px;
padding: 20px;
margin-bottom: 24px;
}
.filter-row[b-znw3c3szcv] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 16px;
}
.filter-group[b-znw3c3szcv] {
display: flex;
flex-direction: column;
gap: 6px;
}
.filter-label[b-znw3c3szcv] {
font-size: 13px;
font-weight: 600;
color: #374151;
}
.filter-input[b-znw3c3szcv],
.filter-select[b-znw3c3szcv] {
padding: 10px 14px;
border: 1px solid rgba(15, 23, 42, 0.15);
border-radius: 8px;
font-size: 14px;
color: #1F2937;
background: white;
transition: all 0.2s;
}
.filter-input:focus[b-znw3c3szcv],
.filter-select:focus[b-znw3c3szcv] {
outline: none;
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
.search-input-wrapper[b-znw3c3szcv] {
position: relative;
display: flex;
align-items: center;
}
.search-input-wrapper > i[b-znw3c3szcv] {
position: absolute;
left: 14px;
font-size: 16px;
color: #6B7280;
pointer-events: none;
}
.search-input[b-znw3c3szcv] {
padding-left: 40px;
padding-right: 40px;
width: 100%;
}
.clear-search[b-znw3c3szcv] {
position: absolute;
right: 8px;
background: none;
border: none;
padding: 4px;
cursor: pointer;
color: #6B7280;
transition: color 0.2s;
}
.clear-search:hover[b-znw3c3szcv] {
color: var(--brand-500);
}
.clear-search i[b-znw3c3szcv] {
font-size: 18px;
}
.filter-actions[b-znw3c3szcv] {
display: flex;
gap: 12px;
justify-content: flex-end;
}
.btn-filter-apply[b-znw3c3szcv],
.btn-filter-reset[b-znw3c3szcv] {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-filter-apply[b-znw3c3szcv] {
background: var(--brand-600, #004980);
color: white;
}
.btn-filter-apply:hover[b-znw3c3szcv] {
background: var(--brand-700, #003760);
}
.btn-filter-reset[b-znw3c3szcv] {
background: transparent;
color: #64748B;
border: 1px solid #E2E8F0;
}
.btn-filter-reset:hover[b-znw3c3szcv] {
background: #F1F5F9;
color: #0F172A;
}
/* Audit Table */
.audit-table-container[b-znw3c3szcv] {
background: white;
border: 1px solid #E5E7EB;
border-radius: 8px;
overflow: hidden;
margin-bottom: 24px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.audit-table[b-znw3c3szcv] {
width: 100%;
border-collapse: collapse;
}
.audit-table thead[b-znw3c3szcv] {
background: #E3F1FB;
border-bottom: 2px solid #B8DAF0;
}
.audit-table th[b-znw3c3szcv] {
padding: 14px 16px;
text-align: left;
font-size: 13px;
font-weight: 700;
color: #1F2937;
text-transform: capitalize;
letter-spacing: 0.3px;
}
.audit-table tbody tr[b-znw3c3szcv] {
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
transition: background-color 0.2s;
}
.audit-table tbody tr:hover[b-znw3c3szcv] {
background-color: rgba(15, 23, 42, 0.04);
}
.audit-table tbody tr:last-child[b-znw3c3szcv] {
border-bottom: none;
}
.audit-table td[b-znw3c3szcv] {
padding: 14px 16px;
font-size: 14px;
color: #374151;
}
/* Column Specific Styles */
.col-timestamp[b-znw3c3szcv] {
width: 140px;
}
.col-user[b-znw3c3szcv] {
width: 180px;
}
.col-action[b-znw3c3szcv] {
width: 120px;
}
.col-details[b-znw3c3szcv] {
min-width: 250px;
}
.col-ip[b-znw3c3szcv] {
width: 130px;
}
.col-status[b-znw3c3szcv] {
width: 110px;
}
/* Cell Content Styles */
.timestamp-wrapper[b-znw3c3szcv] {
display: flex;
flex-direction: column;
gap: 2px;
}
.timestamp-wrapper .date[b-znw3c3szcv] {
font-weight: 600;
color: #1F2937;
font-size: 13px;
}
.timestamp-wrapper .time[b-znw3c3szcv] {
font-size: 12px;
color: #6B7280;
}
.user-info[b-znw3c3szcv] {
display: flex;
align-items: center;
gap: 10px;
}
.user-icon[b-znw3c3szcv] {
font-size: 24px;
color: var(--brand-500);
}
.user-details[b-znw3c3szcv] {
display: flex;
flex-direction: column;
gap: 2px;
}
.user-name[b-znw3c3szcv] {
font-weight: 600;
color: #1F2937;
font-size: 13px;
}
.user-role[b-znw3c3szcv] {
font-size: 11px;
color: #6B7280;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.action-badge[b-znw3c3szcv] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.action-badge i[b-znw3c3szcv] {
font-size: 12px;
}
.action-create[b-znw3c3szcv] {
background: #ECFDF5;
color: #047857;
}
.action-update[b-znw3c3szcv] {
background: #DBEAFE;
color: #1E40AF;
}
.action-delete[b-znw3c3szcv] {
background: #FEE2E2;
color: var(--error-600);
}
.action-login[b-znw3c3szcv] {
background: #F3E8FF;
color: #7C3AED;
}
.action-logout[b-znw3c3szcv] {
background: #FEF3C7;
color: #D97706;
}
.action-export[b-znw3c3szcv] {
background: #E0E7FF;
color: #4338CA;
}
.action-import[b-znw3c3szcv] {
background: #FCE7F3;
color: #BE185D;
}
/* UserActivityAction badge tiers (from UserDisplayExtensions.GetActivityBadgeClass) */
.action-badge.activity-success[b-znw3c3szcv] {
background: #ECFDF5;
color: #047857;
}
.action-badge.activity-warning[b-znw3c3szcv] {
background: #FEF3C7;
color: #D97706;
}
.action-badge.activity-info[b-znw3c3szcv] {
background: #DBEAFE;
color: #1E40AF;
}
.action-badge.activity-error[b-znw3c3szcv] {
background: #FEE2E2;
color: var(--error-600);
}
.action-badge.activity-default[b-znw3c3szcv] {
background: rgba(15, 23, 42, 0.08);
color: var(--brand-500);
}
.details-content[b-znw3c3szcv] {
display: flex;
flex-direction: column;
gap: 4px;
}
.details-text[b-znw3c3szcv] {
color: #1F2937;
font-size: 13px;
line-height: 1.4;
}
.entity-id[b-znw3c3szcv] {
font-size: 11px;
color: #6B7280;
font-family: 'Courier New', monospace;
font-weight: 600;
}
.ip-address[b-znw3c3szcv] {
font-family: 'Courier New', monospace;
font-size: 12px;
color: #374151;
}
.status-indicator[b-znw3c3szcv] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: 6px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.status-indicator i[b-znw3c3szcv] {
font-size: 14px;
}
.status-success[b-znw3c3szcv] {
background: #ECFDF5;
color: #047857;
border: 1px solid #A7F3D0;
}
.status-failure[b-znw3c3szcv] {
background: #FEF2F2;
color: var(--error-600);
border: 1px solid #FECACA;
}
/* Empty State */
.empty-state[b-znw3c3szcv] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 20px;
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 10px;
}
.empty-state i[b-znw3c3szcv] {
font-size: 64px;
color: #D1D5DB;
margin-bottom: 16px;
}
.empty-state p[b-znw3c3szcv] {
font-size: 16px;
font-weight: 600;
color: #6B7280;
margin: 0 0 8px 0;
}
.empty-hint[b-znw3c3szcv] {
font-size: 14px;
color: #9CA3AF;
}
/* Pagination */
.pagination-container[b-znw3c3szcv] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 10px;
}
.pagination-info[b-znw3c3szcv] {
font-size: 14px;
color: #6B7280;
}
.pagination-controls[b-znw3c3szcv] {
display: flex;
align-items: center;
gap: 8px;
}
.btn-page[b-znw3c3szcv] {
padding: 8px 12px;
background: white;
border: 1px solid rgba(15, 23, 42, 0.15);
border-radius: 6px;
color: var(--brand-500);
font-size: 14px;
cursor: pointer;
transition: all 0.2s;
}
.btn-page:hover:not(:disabled)[b-znw3c3szcv] {
background: rgba(15, 23, 42, 0.08);
border-color: var(--brand-500);
}
.btn-page:disabled[b-znw3c3szcv] {
opacity: 0.5;
cursor: not-allowed;
}
.page-indicator[b-znw3c3szcv] {
padding: 0 12px;
font-size: 14px;
font-weight: 600;
color: #1F2937;
}
.page-size-selector[b-znw3c3szcv] {
display: flex;
align-items: center;
gap: 8px;
}
.page-size-selector label[b-znw3c3szcv] {
font-size: 14px;
color: #6B7280;
}
.page-size-select[b-znw3c3szcv] {
padding: 8px 12px;
border: 1px solid rgba(15, 23, 42, 0.15);
border-radius: 6px;
font-size: 14px;
color: #1F2937;
background: white;
cursor: pointer;
transition: all 0.2s;
}
.page-size-select:focus[b-znw3c3szcv] {
outline: none;
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
/* Responsive Design */
@media (max-width: 1400px) {
.filter-row[b-znw3c3szcv] {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 1024px) {
.filter-row[b-znw3c3szcv] {
grid-template-columns: repeat(2, 1fr);
}
.audit-table-container[b-znw3c3szcv] {
overflow-x: auto;
}
.audit-table[b-znw3c3szcv] {
min-width: 1200px;
}
}
@media (max-width: 768px) {
.audit-header[b-znw3c3szcv] {
flex-direction: column;
gap: 16px;
}
.filter-row[b-znw3c3szcv] {
grid-template-columns: 1fr;
}
.pagination-container[b-znw3c3szcv] {
flex-direction: column;
gap: 16px;
align-items: stretch;
}
.pagination-controls[b-znw3c3szcv] {
justify-content: center;
}
.page-size-selector[b-znw3c3szcv] {
justify-content: center;
}
}
@media (max-width: 480px) {
.audit-title[b-znw3c3szcv] {
font-size: 20px;
}
.audit-title i[b-znw3c3szcv] {
font-size: 24px;
}
}
/* /Components/Pages/Admin/BillingPage.razor.rz.scp.css */
/* Billing Tab Styles */
.billing-page-content[b-jtxd002a7b] {
max-width: 100%;
}
/* Header Section */
.billing-header[b-jtxd002a7b] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 24px;
}
.billing-title-section[b-jtxd002a7b] {
flex: 1;
}
.billing-title[b-jtxd002a7b] {
font-size: 24px;
font-weight: 700;
color: #1F2937;
margin: 0 0 4px 0;
}
.billing-subtitle[b-jtxd002a7b] {
font-size: 14px;
color: #6B7280;
margin: 0;
}
.btn-generate-invoice[b-jtxd002a7b] {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: var(--brand-600, #004980);
color: white;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-generate-invoice:hover[b-jtxd002a7b] {
background: var(--brand-700, #003760);
}
.btn-generate-invoice i[b-jtxd002a7b] {
font-size: 16px;
}
/* Statistics Grid */
.stats-grid[b-jtxd002a7b] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-bottom: 32px;
}
/* Billing Summary Section */
.billing-summary-section[b-jtxd002a7b] {
background: linear-gradient(135deg, rgba(227, 241, 251, 0.5) 0%, rgba(240, 247, 252, 0.6) 100%);
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 12px;
padding: 24px;
margin-bottom: 24px;
}
.section-header[b-jtxd002a7b] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.section-title[b-jtxd002a7b] {
display: flex;
align-items: center;
gap: 10px;
font-size: 18px;
font-weight: 700;
color: #1F2937;
}
.section-title i[b-jtxd002a7b] {
font-size: 22px;
color: var(--brand-500);
}
.section-subtitle[b-jtxd002a7b] {
font-size: 14px;
color: #6B7280;
margin-bottom: 20px;
}
/* Billing Table */
.billing-table-wrapper[b-jtxd002a7b] {
background: rgba(255, 255, 255, 0.6);
border-radius: 8px;
overflow: hidden;
}
.billing-table[b-jtxd002a7b] {
width: 100%;
border-collapse: collapse;
}
.billing-table thead[b-jtxd002a7b] {
background: rgba(255, 255, 255, 0.8);
}
.billing-table th[b-jtxd002a7b] {
padding: 14px 20px;
text-align: left;
font-size: 12px;
font-weight: 700;
color: #6B7280;
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 2px solid rgba(15, 23, 42, 0.12);
white-space: nowrap;
}
.billing-table td[b-jtxd002a7b] {
padding: 16px 20px;
font-size: 14px;
color: #1F2937;
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
vertical-align: middle;
}
.billing-table tbody tr[b-jtxd002a7b] {
background: transparent;
transition: all 0.2s;
}
.billing-table tbody tr:hover[b-jtxd002a7b] {
background: rgba(255, 255, 255, 0.9);
}
.billing-table tbody tr:last-child td[b-jtxd002a7b] {
border-bottom: none;
}
/* Bank Info */
.bank-info[b-jtxd002a7b] {
display: flex;
flex-direction: column;
gap: 4px;
}
.bank-name[b-jtxd002a7b] {
font-weight: 600;
color: #1F2937;
font-size: 14px;
}
.bank-code[b-jtxd002a7b] {
font-size: 13px;
color: #6B7280;
}
/* Table Amounts */
.policies-count[b-jtxd002a7b] {
font-weight: 500;
color: #1F2937;
}
.amount[b-jtxd002a7b] {
font-weight: 500;
color: #1F2937;
}
.total-amount[b-jtxd002a7b] {
font-weight: 700;
color: #1F2937;
font-size: 15px;
}
.btn-action-text[b-jtxd002a7b] {
padding: 8px 16px;
background: var(--brand-600, #004980);
color: white;
border: none;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-action-text:hover[b-jtxd002a7b] {
background: var(--brand-700, #003760);
}
/* Invoice History Section */
.invoice-history-section[b-jtxd002a7b] {
background: linear-gradient(135deg, rgba(227, 241, 251, 0.5) 0%, rgba(240, 247, 252, 0.6) 100%);
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 12px;
padding: 24px;
}
/* Empty State */
.empty-state[b-jtxd002a7b] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
background: rgba(255, 255, 255, 0.6);
border-radius: 8px;
border: 2px dashed rgba(15, 23, 42, 0.15);
}
.empty-state i[b-jtxd002a7b] {
font-size: 64px;
color: #D1D5DB;
margin-bottom: 16px;
}
.empty-state p[b-jtxd002a7b] {
font-size: 14px;
color: #6B7280;
margin: 0;
}
/* Invoice History List */
.invoice-history-list[b-jtxd002a7b] {
display: flex;
flex-direction: column;
gap: 12px;
}
.invoice-item[b-jtxd002a7b] {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 20px;
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 8px;
transition: all 0.2s;
}
.invoice-item:hover[b-jtxd002a7b] {
background: white;
border-color: rgba(15, 23, 42, 0.15);
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
.invoice-icon[b-jtxd002a7b] {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-400) 100%);
border-radius: 8px;
flex-shrink: 0;
}
.invoice-icon i[b-jtxd002a7b] {
font-size: 24px;
color: white;
}
.invoice-details[b-jtxd002a7b] {
flex: 1;
min-width: 0;
}
.invoice-number[b-jtxd002a7b] {
font-size: 14px;
font-weight: 600;
color: #1F2937;
margin-bottom: 4px;
}
.invoice-meta[b-jtxd002a7b] {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #6B7280;
}
.separator[b-jtxd002a7b] {
color: #D1D5DB;
}
.invoice-amount[b-jtxd002a7b] {
font-size: 16px;
font-weight: 700;
color: #1F2937;
margin-right: 16px;
}
.invoice-status[b-jtxd002a7b] {
margin-right: 8px;
}
/* Status Badges */
.status-badge[b-jtxd002a7b] {
display: inline-block;
padding: 6px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: 700;
text-transform: capitalize;
white-space: nowrap;
}
.status-badge.status-pending[b-jtxd002a7b] {
background: #FEF3C7;
color: #D97706;
}
.status-badge.status-paid[b-jtxd002a7b] {
background: #ECFDF5;
color: #059669;
}
.status-badge.status-overdue[b-jtxd002a7b] {
background: #FEE2E2;
color: var(--error-600);
}
/* Invoice Actions */
.invoice-actions[b-jtxd002a7b] {
display: flex;
gap: 0;
}
/* Bootstrap Button Group Customization for Invoice Actions */
.invoice-actions .btn-action[b-jtxd002a7b] {
padding: 6px 10px;
font-size: 14px;
}
.invoice-actions .btn-action i[b-jtxd002a7b] {
font-size: 14px;
}
/* Custom colors for outline buttons */
.invoice-actions .btn-outline-primary[b-jtxd002a7b] {
color: var(--brand-500);
border-color: var(--brand-500);
}
.invoice-actions .btn-outline-primary:hover[b-jtxd002a7b] {
background-color: var(--brand-500);
border-color: var(--brand-500);
color: white;
}
.invoice-actions .btn-outline-secondary[b-jtxd002a7b] {
color: #7C3AED;
border-color: #9CA3AF;
}
.invoice-actions .btn-outline-secondary:hover[b-jtxd002a7b] {
background-color: #7C3AED;
border-color: #7C3AED;
color: white;
}
.invoice-actions .btn-outline-danger[b-jtxd002a7b] {
color: var(--error-600);
border-color: var(--error-600);
}
.invoice-actions .btn-outline-danger:hover[b-jtxd002a7b] {
background-color: var(--error-600);
border-color: var(--error-600);
color: white;
}
/* Modal Styles — aligned with wwwroot/css/modal-theme.css */
.modal-overlay[b-jtxd002a7b] {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.45);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1.5rem;
backdrop-filter: blur(4px);
}
.modal-content[b-jtxd002a7b] {
background: white;
border-radius: 16px;
box-shadow: 0 24px 64px rgba(15, 23, 42, 0.25);
width: 90%;
max-width: 500px;
max-height: 90vh;
overflow: auto;
}
.modal-header[b-jtxd002a7b] {
display: flex;
align-items: flex-start;
gap: 0.9rem;
padding: 1.25rem 1.5rem 1rem;
border-bottom: 1px solid #EEF2F6;
}
.modal-title[b-jtxd002a7b] {
flex: 1;
font-size: 1.05rem;
font-weight: 700;
color: #0F172A;
margin: 0;
}
.btn-close-modal[b-jtxd002a7b] {
flex-shrink: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
border-radius: 8px;
color: #94A3B8;
cursor: pointer;
transition: all 0.2s;
}
.btn-close-modal:hover[b-jtxd002a7b] {
background: #F1F5F9;
color: #0F172A;
}
.btn-close-modal i[b-jtxd002a7b] {
font-size: 18px;
}
.modal-body[b-jtxd002a7b] {
padding: 1.15rem 1.5rem;
}
.modal-description[b-jtxd002a7b] {
font-size: 14px;
color: #6B7280;
margin: 0 0 24px 0;
}
.form-group[b-jtxd002a7b] {
margin-bottom: 20px;
}
.form-row[b-jtxd002a7b] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 20px;
}
.form-label[b-jtxd002a7b] {
display: block;
font-size: 13px;
font-weight: 600;
color: #374151;
margin-bottom: 8px;
}
.form-select[b-jtxd002a7b],
.form-input[b-jtxd002a7b] {
width: 100%;
padding: 10px 14px;
border: 1px solid #E2E8F0;
border-radius: 10px;
font-size: 14px;
color: #1F2937;
background: white;
transition: all 0.2s;
font-family: inherit;
}
.form-select:focus[b-jtxd002a7b],
.form-input:focus[b-jtxd002a7b] {
outline: none;
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
.form-select[b-jtxd002a7b] {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px;
}
.modal-footer[b-jtxd002a7b] {
display: flex;
justify-content: flex-end;
gap: 0.6rem;
padding: 1rem 1.5rem;
border-top: 1px solid #EEF2F6;
background: #FAFBFC;
}
.btn-cancel[b-jtxd002a7b] {
padding: 0.55rem 1.15rem;
background: transparent;
color: #64748B;
border: 1px solid #E2E8F0;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.btn-cancel:hover[b-jtxd002a7b] {
background: #F1F5F9;
color: #0F172A;
}
.btn-generate[b-jtxd002a7b] {
padding: 0.55rem 1.15rem;
background: var(--brand-600, #004980);
color: white;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.btn-generate:hover[b-jtxd002a7b] {
background: var(--brand-700, #003760);
}
/* Responsive Design */
@media (max-width: 1200px) {
.stats-grid[b-jtxd002a7b] {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.billing-header[b-jtxd002a7b] {
flex-direction: column;
gap: 16px;
}
.btn-generate-invoice[b-jtxd002a7b] {
width: 100%;
justify-content: center;
}
.stats-grid[b-jtxd002a7b] {
grid-template-columns: 1fr;
}
.billing-table-wrapper[b-jtxd002a7b] {
overflow-x: auto;
}
.billing-table[b-jtxd002a7b] {
min-width: 700px;
}
.invoice-item[b-jtxd002a7b] {
flex-wrap: wrap;
}
.invoice-amount[b-jtxd002a7b] {
margin-right: 0;
width: 100%;
margin-bottom: 8px;
}
.invoice-status[b-jtxd002a7b] {
margin-right: 0;
}
.invoice-actions[b-jtxd002a7b] {
width: 100%;
justify-content: flex-end;
}
.form-row[b-jtxd002a7b] {
grid-template-columns: 1fr;
}
.modal-content[b-jtxd002a7b] {
width: 95%;
}
}
/* /Components/Pages/Admin/DocuSignTestPage.razor.rz.scp.css */
/* DocuSign Test Page Styles */
/* Page Header */
.page-header[b-wymy0bf2ep] {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 32px;
animation: fadeInDown-b-wymy0bf2ep 0.5s ease-out;
}
.page-header-icon[b-wymy0bf2ep] {
width: 56px;
height: 56px;
background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-600) 100%);
color: white;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}
.page-header h1[b-wymy0bf2ep] {
font-size: 28px;
font-weight: 700;
color: var(--text-primary, #0F172A);
margin: 0;
}
.page-header p[b-wymy0bf2ep] {
font-size: 14px;
color: var(--text-secondary, #64748B);
margin: 4px 0 0 0;
}
/* Card Styles */
.docusign-card[b-wymy0bf2ep] {
background: white;
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 16px;
margin-bottom: 24px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
animation: fadeInUp-b-wymy0bf2ep 0.5s ease-out;
animation-fill-mode: both;
}
.docusign-card:nth-child(1)[b-wymy0bf2ep] { animation-delay: 0.1s; }
.docusign-card:nth-child(2)[b-wymy0bf2ep] { animation-delay: 0.15s; }
.docusign-card:nth-child(3)[b-wymy0bf2ep] { animation-delay: 0.2s; }
.docusign-card:nth-child(4)[b-wymy0bf2ep] { animation-delay: 0.25s; }
.docusign-card:nth-child(5)[b-wymy0bf2ep] { animation-delay: 0.3s; }
.docusign-card:hover[b-wymy0bf2ep] {
transform: translateY(-2px);
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.1);
border-color: rgba(15, 23, 42, 0.15);
}
.card-header-modern[b-wymy0bf2ep] {
display: flex;
align-items: center;
gap: 12px;
padding: 20px 24px;
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
background: linear-gradient(135deg, rgba(227, 241, 251, 0.5) 0%, rgba(255, 255, 255, 0.8) 100%);
}
.card-header-icon[b-wymy0bf2ep] {
width: 44px;
height: 44px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
transition: transform 0.2s ease;
}
.docusign-card:hover .card-header-icon[b-wymy0bf2ep] {
transform: scale(1.1);
}
.card-header-icon.icon-config[b-wymy0bf2ep] {
background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-600) 100%);
color: white;
}
.card-header-icon.icon-warning[b-wymy0bf2ep] {
background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
color: white;
}
.card-header-icon.icon-auth[b-wymy0bf2ep] {
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
color: white;
}
.card-header-icon.icon-envelope[b-wymy0bf2ep] {
background: linear-gradient(135deg, #10B981 0%, #059669 100%);
color: white;
}
.card-header-icon.icon-upload[b-wymy0bf2ep] {
background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
color: white;
}
.card-header-icon.icon-help[b-wymy0bf2ep] {
background: linear-gradient(135deg, #06B6D4 0%, #0891B2 100%);
color: white;
}
.card-header-content h5[b-wymy0bf2ep] {
font-size: 16px;
font-weight: 600;
color: var(--text-primary, #0F172A);
margin: 0;
}
.card-header-content p[b-wymy0bf2ep] {
font-size: 13px;
color: var(--text-secondary, #64748B);
margin: 2px 0 0 0;
}
.card-body-modern[b-wymy0bf2ep] {
padding: 24px;
}
/* Config Table */
.config-grid[b-wymy0bf2ep] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
@media (max-width: 768px) {
.config-grid[b-wymy0bf2ep] {
grid-template-columns: 1fr;
}
}
.config-table[b-wymy0bf2ep] {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
.config-table tr[b-wymy0bf2ep] {
transition: background-color 0.15s ease;
}
.config-table tr:hover[b-wymy0bf2ep] {
background: rgba(15, 23, 42, 0.03);
}
.config-table td[b-wymy0bf2ep] {
padding: 12px 8px;
border-bottom: 1px solid rgba(15, 23, 42, 0.05);
font-size: 14px;
}
.config-table tr:last-child td[b-wymy0bf2ep] {
border-bottom: none;
}
.config-label[b-wymy0bf2ep] {
font-weight: 600;
color: var(--text-secondary, #64748B);
width: 45%;
}
.config-value code[b-wymy0bf2ep] {
background: rgba(15, 23, 42, 0.05);
color: var(--brand-600);
padding: 4px 8px;
border-radius: 6px;
font-size: 12px;
font-family: 'Monaco', 'Consolas', monospace;
}
/* Status Badges */
.status-badge[b-wymy0bf2ep] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
transition: all 0.2s ease;
}
.status-badge i[b-wymy0bf2ep] {
font-size: 12px;
}
.status-badge.badge-success[b-wymy0bf2ep] {
background: var(--success-50);
color: var(--success-600);
border: 1px solid var(--success-200);
}
.status-badge.badge-danger[b-wymy0bf2ep] {
background: var(--error-50);
color: var(--error-600);
border: 1px solid var(--error-200);
}
.status-badge.badge-warning[b-wymy0bf2ep] {
background: var(--warning-50);
color: var(--warning-600);
border: 1px solid var(--warning-200);
}
.status-badge.badge-info[b-wymy0bf2ep] {
background: var(--brand-50);
color: var(--brand-600);
border: 1px solid var(--brand-200);
}
/* Form Controls */
.form-group[b-wymy0bf2ep] {
margin-bottom: 20px;
}
.form-label-modern[b-wymy0bf2ep] {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--text-secondary, #64748B);
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.form-control-modern[b-wymy0bf2ep] {
width: 100%;
padding: 12px 16px;
border: 1px solid rgba(15, 23, 42, 0.15);
border-radius: 10px;
font-size: 14px;
color: var(--text-primary, #0F172A);
background: white;
transition: all 0.2s ease;
}
.form-control-modern:focus[b-wymy0bf2ep] {
outline: none;
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
.form-control-modern[b-wymy0bf2ep]::placeholder {
color: var(--text-muted, #94A3B8);
}
.form-select-modern[b-wymy0bf2ep] {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748B' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 44px;
}
/* Button Styles */
.btn-modern[b-wymy0bf2ep] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 24px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
border: none;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
min-width: 180px;
}
.btn-modern:disabled[b-wymy0bf2ep] {
opacity: 0.6;
cursor: not-allowed;
}
.btn-modern.btn-primary[b-wymy0bf2ep] {
background: var(--brand-600, #004980);
color: white;
}
.btn-modern.btn-primary:hover:not(:disabled)[b-wymy0bf2ep] {
background: var(--brand-700, #003760);
}
.btn-modern.btn-success[b-wymy0bf2ep] {
background: var(--success-600, #059669);
color: white;
}
.btn-modern.btn-success:hover:not(:disabled)[b-wymy0bf2ep] {
background: var(--success-700, #047857);
}
.btn-modern.btn-warning[b-wymy0bf2ep] {
background: #D97706;
color: white;
}
.btn-modern.btn-warning:hover:not(:disabled)[b-wymy0bf2ep] {
background: #B45309;
}
.btn-modern.btn-outline[b-wymy0bf2ep] {
background: transparent;
border: 2px solid var(--brand-500);
color: var(--brand-500);
}
.btn-modern.btn-outline:hover:not(:disabled)[b-wymy0bf2ep] {
background: var(--brand-50);
}
/* Loading Spinner */
.spinner-modern[b-wymy0bf2ep] {
width: 18px;
height: 18px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: white;
border-radius: 50%;
animation: spin-b-wymy0bf2ep 0.8s linear infinite;
}
/* Result Alerts */
.result-alert[b-wymy0bf2ep] {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 20px;
border-radius: 12px;
margin-top: 20px;
animation: fadeIn-b-wymy0bf2ep 0.3s ease-out;
}
.result-alert.alert-success[b-wymy0bf2ep] {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.03) 100%);
border: 1px solid rgba(16, 185, 129, 0.2);
}
.result-alert.alert-danger[b-wymy0bf2ep] {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(239, 68, 68, 0.03) 100%);
border: 1px solid rgba(239, 68, 68, 0.2);
}
.result-icon[b-wymy0bf2ep] {
width: 44px;
height: 44px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.alert-success .result-icon[b-wymy0bf2ep] {
background: var(--success-100);
color: var(--success-600);
}
.alert-danger .result-icon[b-wymy0bf2ep] {
background: var(--error-100);
color: var(--error-600);
}
.result-content h6[b-wymy0bf2ep] {
font-size: 15px;
font-weight: 600;
color: var(--text-primary, #0F172A);
margin: 0 0 8px 0;
}
.result-content p[b-wymy0bf2ep] {
font-size: 14px;
color: var(--text-secondary, #64748B);
margin: 0;
line-height: 1.5;
}
.result-content code[b-wymy0bf2ep] {
background: rgba(15, 23, 42, 0.08);
color: var(--brand-600);
padding: 4px 8px;
border-radius: 6px;
font-size: 13px;
font-family: 'Monaco', 'Consolas', monospace;
}
/* File Upload */
.file-upload-wrapper[b-wymy0bf2ep] {
position: relative;
}
.file-upload-input[b-wymy0bf2ep] {
width: 100%;
padding: 12px 16px;
border: 2px dashed rgba(15, 23, 42, 0.2);
border-radius: 12px;
background: rgba(15, 23, 42, 0.02);
transition: all 0.2s ease;
cursor: pointer;
}
.file-upload-input:hover[b-wymy0bf2ep] {
border-color: var(--brand-500);
background: rgba(15, 23, 42, 0.05);
}
.file-success[b-wymy0bf2ep] {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
font-size: 13px;
color: var(--success-600);
animation: fadeIn-b-wymy0bf2ep 0.3s ease-out;
}
/* Accordion Styles */
.accordion-modern[b-wymy0bf2ep] {
display: flex;
flex-direction: column;
gap: 12px;
}
.accordion-item-modern[b-wymy0bf2ep] {
background: linear-gradient(135deg, rgba(227, 241, 251, 0.5) 0%, rgba(255, 255, 255, 0.8) 100%);
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 12px;
overflow: hidden;
transition: all 0.2s ease;
}
.accordion-item-modern:hover[b-wymy0bf2ep] {
border-color: rgba(15, 23, 42, 0.18);
}
.accordion-button-modern[b-wymy0bf2ep] {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
background: transparent;
border: none;
cursor: pointer;
text-align: left;
font-size: 14px;
font-weight: 600;
color: var(--text-primary, #0F172A);
transition: background-color 0.2s ease;
}
.accordion-button-modern:hover[b-wymy0bf2ep] {
background: rgba(15, 23, 42, 0.05);
}
.accordion-button-modern i[b-wymy0bf2ep] {
font-size: 14px;
color: var(--brand-500);
transition: transform 0.3s ease;
}
.accordion-button-modern.expanded i[b-wymy0bf2ep] {
transform: rotate(180deg);
}
.accordion-content-modern[b-wymy0bf2ep] {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.accordion-content-modern.show[b-wymy0bf2ep] {
max-height: 1000px;
}
.accordion-body-modern[b-wymy0bf2ep] {
padding: 0 20px 20px 20px;
font-size: 14px;
line-height: 1.7;
color: var(--text-secondary, #64748B);
}
.accordion-body-modern ol[b-wymy0bf2ep] {
padding-left: 20px;
margin: 0;
}
.accordion-body-modern li[b-wymy0bf2ep] {
margin-bottom: 8px;
}
.accordion-body-modern code[b-wymy0bf2ep] {
background: rgba(15, 23, 42, 0.08);
color: var(--brand-600);
padding: 2px 6px;
border-radius: 4px;
font-size: 12px;
}
.code-block[b-wymy0bf2ep] {
display: block;
padding: 12px 16px;
background: rgba(15, 23, 42, 0.05);
border-radius: 8px;
margin: 12px 0;
overflow-x: auto;
font-size: 12px;
}
.alert-box[b-wymy0bf2ep] {
padding: 12px 16px;
background: var(--warning-50);
border: 1px solid var(--warning-200);
border-radius: 8px;
color: var(--warning-700);
font-size: 13px;
margin-top: 12px;
}
/* External Link Button */
.link-btn[b-wymy0bf2ep] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: all 0.2s ease;
}
.link-btn.link-primary[b-wymy0bf2ep] {
background: var(--brand-50);
color: var(--brand-600);
border: 1px solid var(--brand-200);
}
.link-btn.link-primary:hover[b-wymy0bf2ep] {
background: var(--brand-100);
text-decoration: none;
}
.link-btn.link-success[b-wymy0bf2ep] {
background: var(--success-50);
color: var(--success-600);
border: 1px solid var(--success-200);
}
.link-btn.link-success:hover[b-wymy0bf2ep] {
background: var(--success-100);
text-decoration: none;
}
/* Grid Layout */
.form-row[b-wymy0bf2ep] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
@media (max-width: 768px) {
.form-row[b-wymy0bf2ep] {
grid-template-columns: 1fr;
}
}
/* Animations */
@keyframes fadeIn-b-wymy0bf2ep {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInUp-b-wymy0bf2ep {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInDown-b-wymy0bf2ep {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes spin-b-wymy0bf2ep {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes pulse-b-wymy0bf2ep {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
/* Redirect URI Notice */
.redirect-uri-notice[b-wymy0bf2ep] {
display: flex;
gap: 16px;
padding: 20px;
background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(217, 119, 6, 0.04) 100%);
border: 1px solid rgba(245, 158, 11, 0.2);
border-radius: 12px;
animation: fadeInUp-b-wymy0bf2ep 0.4s ease-out;
}
.redirect-uri-notice .notice-icon[b-wymy0bf2ep] {
flex-shrink: 0;
width: 44px;
height: 44px;
background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
color: white;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.redirect-uri-notice .notice-content[b-wymy0bf2ep] {
flex: 1;
}
.redirect-uri-notice .notice-content h6[b-wymy0bf2ep] {
font-size: 15px;
font-weight: 600;
color: var(--text-primary, #0F172A);
margin: 0 0 8px 0;
}
.redirect-uri-notice .notice-content p[b-wymy0bf2ep] {
font-size: 13px;
color: var(--text-secondary, #64748B);
margin: 0;
}
.redirect-uri-notice .text-muted-sm[b-wymy0bf2ep] {
font-size: 12px;
color: var(--text-secondary, #64748B);
}
.redirect-uri-notice .text-muted-sm a[b-wymy0bf2ep] {
color: var(--brand-500);
text-decoration: none;
font-weight: 500;
}
.redirect-uri-notice .text-muted-sm a:hover[b-wymy0bf2ep] {
text-decoration: underline;
}
.uri-display[b-wymy0bf2ep] {
display: flex;
align-items: center;
gap: 8px;
background: white;
border: 1px solid rgba(15, 23, 42, 0.12);
border-radius: 8px;
padding: 10px 12px;
margin-top: 8px;
}
.uri-display code[b-wymy0bf2ep] {
flex: 1;
font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
font-size: 12px;
color: var(--brand-600);
background: transparent;
padding: 0;
word-break: break-all;
}
.btn-copy[b-wymy0bf2ep] {
flex-shrink: 0;
width: 32px;
height: 32px;
background: var(--brand-50);
color: var(--brand-500);
border: 1px solid var(--brand-200);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-copy:hover[b-wymy0bf2ep] {
background: var(--brand-100);
transform: scale(1.05);
}
.btn-copy:active[b-wymy0bf2ep] {
transform: scale(0.95);
}
/* Utility Classes */
.text-muted-modern[b-wymy0bf2ep] {
font-size: 13px;
color: var(--text-secondary, #64748B);
margin-bottom: 16px;
}
.mt-0[b-wymy0bf2ep] { margin-top: 0; }
.mb-0[b-wymy0bf2ep] { margin-bottom: 0; }
.mt-2[b-wymy0bf2ep] { margin-top: 8px; }
.mb-2[b-wymy0bf2ep] { margin-bottom: 8px; }
.mt-3[b-wymy0bf2ep] { margin-top: 16px; }
.mb-3[b-wymy0bf2ep] { margin-bottom: 16px; }
/* /Components/Pages/Admin/EmailQueueDetailsPage.razor.rz.scp.css */
/* Base Page Styling */
.email-details-page[b-bddkgaxch7] {
font-size: var(--font-size-sm, 0.875rem);
color: var(--text-primary, #0F172A);
}
/* Page Header */
.email-details-page .page-header[b-bddkgaxch7] {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: var(--space-md, 16px);
margin-bottom: var(--space-lg, 24px);
border-bottom: 1px solid var(--border-light);
}
.email-details-page .page-header-left[b-bddkgaxch7] {
display: flex;
align-items: center;
gap: var(--space-md, 16px);
}
.email-details-page .btn-back[b-bddkgaxch7] {
width: 40px;
height: 40px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md, 8px);
border: 1px solid var(--border-medium);
background: var(--bg-surface, #fff);
color: var(--text-secondary, #475569);
font-size: 1rem;
transition: all var(--transition-fast, 160ms ease);
}
.email-details-page .btn-back:hover[b-bddkgaxch7] {
background: var(--bg-hover, #F1F5F9);
color: var(--text-primary, #0F172A);
border-color: var(--border-dark);
}
.email-details-page .page-title[b-bddkgaxch7] {
font-size: var(--font-size-xl, 1.25rem);
font-weight: var(--font-weight-semibold, 600);
color: var(--text-primary, #344054);
margin: 0;
display: flex;
align-items: center;
}
.email-details-page .page-title i[b-bddkgaxch7] {
color: var(--brand-500);
}
.email-details-page .page-subtitle[b-bddkgaxch7] {
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-muted, #667085);
margin: 0;
}
.email-details-page .btn-retry[b-bddkgaxch7] {
display: flex;
align-items: center;
gap: var(--space-sm, 8px);
padding: 0.5rem 1rem;
font-size: var(--font-size-sm, 0.875rem);
font-weight: var(--font-weight-medium, 500);
background: var(--accent-600);
border: none;
border-radius: var(--radius-md, 8px);
color: #fff;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.email-details-page .btn-retry:hover:not(:disabled)[b-bddkgaxch7] {
background: var(--accent-700);
}
.email-details-page .btn-retry:disabled[b-bddkgaxch7] {
opacity: 0.65;
cursor: not-allowed;
}
/* Loading State */
.email-details-page .loading-state[b-bddkgaxch7] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-2xl, 48px);
text-align: center;
}
.email-details-page .loading-state p[b-bddkgaxch7] {
margin-top: var(--space-md, 16px);
color: var(--text-muted, #64748B);
font-size: var(--font-size-sm, 0.875rem);
}
/* Alert Card */
.email-details-page .alert-card[b-bddkgaxch7] {
display: flex;
align-items: flex-start;
gap: var(--space-md, 16px);
padding: var(--space-lg, 24px);
border-radius: var(--radius-lg, 12px);
background: var(--warning-50);
border: 1px solid var(--warning-200);
}
.email-details-page .alert-card .alert-icon[b-bddkgaxch7] {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md, 8px);
background: var(--warning-200);
color: var(--warning-700);
font-size: 1.25rem;
flex-shrink: 0;
}
.email-details-page .alert-card .alert-content strong[b-bddkgaxch7] {
display: block;
font-size: var(--font-size-base, 1rem);
font-weight: var(--font-weight-semibold, 600);
color: var(--warning-700);
margin-bottom: var(--space-xs, 4px);
}
.email-details-page .alert-card .alert-content p[b-bddkgaxch7] {
font-size: var(--font-size-sm, 0.875rem);
color: var(--text-secondary, #475569);
margin: 0;
}
/* Status Overview Card */
.email-details-page .status-overview-card[b-bddkgaxch7] {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-md, 16px) var(--space-lg, 24px);
background: var(--bg-surface, #fff);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg, 12px);
margin-bottom: var(--space-lg, 24px);
box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.08));
}
.email-details-page .status-overview-main[b-bddkgaxch7] {
display: flex;
align-items: center;
gap: var(--space-md, 16px);
}
.email-details-page .status-badge[b-bddkgaxch7],
.email-details-page .priority-badge[b-bddkgaxch7] {
display: inline-flex;
align-items: center;
gap: var(--space-sm, 8px);
padding: 0.5rem 1rem;
font-size: var(--font-size-sm, 0.875rem);
font-weight: var(--font-weight-medium, 500);
border-radius: var(--radius-pill, 9999px);
border: 1px solid transparent;
}
.email-details-page .status-badge i[b-bddkgaxch7],
.email-details-page .priority-badge i[b-bddkgaxch7] {
font-size: 0.75rem;
}
/* Status Badge Colors */
.email-details-page .badge-pending[b-bddkgaxch7] {
background-color: #fef9e7;
color: #8a6d1b;
border-color: #f5e6a3;
}
.email-details-page .badge-sending[b-bddkgaxch7] {
background-color: #e8f4fd;
color: #1e5a8d;
border-color: #c2dcf5;
}
.email-details-page .badge-sent[b-bddkgaxch7] {
background-color: #e8f4fd;
color: #1e5a8d;
border-color: #c2dcf5;
}
.email-details-page .badge-delivered[b-bddkgaxch7] {
background-color: #e8f8f0;
color: #1d6a4d;
border-color: #a8e0c4;
}
.email-details-page .badge-failed[b-bddkgaxch7] {
background-color: #fdf2f2;
color: #9b2c2c;
border-color: #f5c6c6;
}
.email-details-page .badge-retrying[b-bddkgaxch7] {
background-color: #fff7ed;
color: #c2410c;
border-color: #fed7aa;
}
/* Priority Badge Colors */
.email-details-page .badge-high[b-bddkgaxch7] {
background-color: #fdf2f2;
color: #9b2c2c;
border-color: #f5c6c6;
}
.email-details-page .badge-normal[b-bddkgaxch7] {
background-color: #f5f5f5;
color: #525252;
border-color: #d4d4d4;
}
.email-details-page .badge-low[b-bddkgaxch7] {
background-color: #f0fdf4;
color: #166534;
border-color: #bbf7d0;
}
.email-details-page .status-overview-id[b-bddkgaxch7] {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.email-details-page .id-label[b-bddkgaxch7] {
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-muted, #64748B);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.email-details-page .id-value[b-bddkgaxch7] {
font-size: var(--font-size-lg, 1.125rem);
font-weight: var(--font-weight-semibold, 600);
color: var(--text-primary, #0F172A);
font-family: var(--font-family-mono, monospace);
}
/* Detail Cards */
.email-details-page .detail-card[b-bddkgaxch7] {
background: var(--bg-surface, #fff);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg, 12px);
margin-bottom: var(--space-md, 16px);
box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.08));
overflow: hidden;
}
.email-details-page .detail-card-header[b-bddkgaxch7] {
display: flex;
align-items: center;
gap: var(--space-sm, 8px);
padding: var(--space-md, 16px);
background: var(--neutral-50);
border-bottom: 1px solid var(--border-light);
}
.email-details-page .card-header-icon[b-bddkgaxch7] {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md, 8px);
background: linear-gradient(135deg, var(--brand-100) 0%, var(--brand-50) 100%);
color: var(--brand-600);
font-size: 0.875rem;
}
.email-details-page .card-header-icon.error[b-bddkgaxch7] {
background: linear-gradient(135deg, var(--error-50) 0%, #fce4e4 100%);
color: var(--error-600);
}
.email-details-page .card-header-icon.application[b-bddkgaxch7] {
background: linear-gradient(135deg, var(--accent-100) 0%, var(--accent-50) 100%);
color: var(--accent-700);
}
.email-details-page .card-header-title[b-bddkgaxch7] {
flex: 1;
font-size: var(--font-size-sm, 0.875rem);
font-weight: var(--font-weight-semibold, 600);
color: var(--text-primary, #0F172A);
margin: 0;
}
.email-details-page .btn-view-toggle[b-bddkgaxch7] {
display: flex;
align-items: center;
gap: var(--space-xs, 4px);
padding: 0.375rem 0.75rem;
font-size: var(--font-size-xs, 0.75rem);
font-weight: var(--font-weight-medium, 500);
background: var(--bg-surface, #fff);
border: 1px solid var(--border-medium);
border-radius: var(--radius-md, 8px);
color: var(--text-secondary, #475569);
transition: all var(--transition-fast, 160ms ease);
}
.email-details-page .btn-view-toggle:hover[b-bddkgaxch7] {
background: var(--bg-hover, #F1F5F9);
border-color: var(--border-dark);
color: var(--text-primary, #0F172A);
}
.email-details-page .btn-view-application[b-bddkgaxch7] {
display: flex;
align-items: center;
gap: var(--space-xs, 4px);
padding: 0.375rem 0.75rem;
font-size: var(--font-size-xs, 0.75rem);
font-weight: var(--font-weight-medium, 500);
background: var(--accent-600);
border: none;
border-radius: var(--radius-md, 8px);
color: #fff;
text-decoration: none;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.email-details-page .btn-view-application:hover[b-bddkgaxch7] {
background: var(--accent-700);
color: #fff;
}
.email-details-page .attachment-count[b-bddkgaxch7] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 24px;
padding: 0 8px;
font-size: var(--font-size-xs, 0.75rem);
font-weight: var(--font-weight-semibold, 600);
background: var(--brand-500);
color: #fff;
border-radius: var(--radius-pill, 9999px);
}
.email-details-page .detail-card-body[b-bddkgaxch7] {
padding: var(--space-md, 16px);
}
.email-details-page .detail-card-body.body-content[b-bddkgaxch7] {
padding: 0;
}
/* Detail Rows */
.email-details-page .detail-row[b-bddkgaxch7] {
display: flex;
align-items: flex-start;
padding: var(--space-sm, 8px) 0;
border-bottom: 1px solid var(--neutral-100);
}
.email-details-page .detail-row:last-child[b-bddkgaxch7] {
border-bottom: none;
padding-bottom: 0;
}
.email-details-page .detail-row:first-child[b-bddkgaxch7] {
padding-top: 0;
}
.email-details-page .detail-label[b-bddkgaxch7] {
display: flex;
align-items: center;
gap: var(--space-sm, 8px);
width: 80px;
flex-shrink: 0;
font-size: var(--font-size-xs, 0.75rem);
font-weight: var(--font-weight-medium, 500);
color: var(--text-muted, #64748B);
text-transform: uppercase;
letter-spacing: 0.3px;
}
.email-details-page .detail-label i[b-bddkgaxch7] {
font-size: 0.875rem;
color: var(--neutral-400);
}
.email-details-page .detail-value[b-bddkgaxch7] {
flex: 1;
font-size: var(--font-size-sm, 0.875rem);
color: var(--text-secondary, #475569);
word-break: break-word;
}
.email-details-page .detail-value.primary[b-bddkgaxch7] {
font-weight: var(--font-weight-medium, 500);
color: var(--text-primary, #0F172A);
}
/* Subject Text */
.email-details-page .subject-text[b-bddkgaxch7] {
font-size: var(--font-size-sm, 0.875rem);
font-weight: var(--font-weight-medium, 500);
color: var(--text-primary, #0F172A);
line-height: 1.5;
}
/* Email Body */
.email-details-page .html-view[b-bddkgaxch7] {
margin: 0;
padding: var(--space-md, 16px);
background: var(--neutral-50);
font-size: var(--font-size-xs, 0.75rem);
font-family: var(--font-family-mono, 'Monaco', 'Menlo', monospace);
color: var(--text-secondary, #475569);
white-space: pre-wrap;
word-break: break-word;
max-height: 400px;
overflow: auto;
border-radius: 0;
}
.email-details-page .email-preview[b-bddkgaxch7] {
padding: var(--space-md, 16px);
background: #fff;
max-height: 400px;
overflow: auto;
}
/* Attachments */
.email-details-page .attachments-list[b-bddkgaxch7] {
display: flex;
flex-direction: column;
gap: var(--space-sm, 8px);
}
.email-details-page .attachment-item[b-bddkgaxch7] {
display: flex;
align-items: center;
gap: var(--space-sm, 8px);
padding: var(--space-sm, 8px) var(--space-md, 16px);
background: var(--neutral-50);
border: 1px solid var(--neutral-200);
border-radius: var(--radius-md, 8px);
}
.email-details-page .attachment-icon[b-bddkgaxch7] {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-surface, #fff);
border-radius: var(--radius-md, 8px);
color: var(--brand-500);
font-size: 1rem;
}
.email-details-page .attachment-info[b-bddkgaxch7] {
flex: 1;
display: flex;
flex-direction: column;
}
.email-details-page .attachment-name[b-bddkgaxch7] {
font-size: var(--font-size-sm, 0.875rem);
font-weight: var(--font-weight-medium, 500);
color: var(--text-primary, #0F172A);
}
.email-details-page .attachment-size[b-bddkgaxch7] {
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-muted, #64748B);
}
.email-details-page .inline-badge[b-bddkgaxch7] {
font-size: var(--font-size-xs, 0.75rem);
font-weight: var(--font-weight-medium, 500);
padding: 0.25rem 0.5rem;
background: var(--brand-50);
color: var(--brand-600);
border-radius: var(--radius-sm, 4px);
}
/* Error Card */
.email-details-page .error-card[b-bddkgaxch7] {
border-color: var(--error-500);
}
.email-details-page .error-header[b-bddkgaxch7] {
background: var(--error-50);
border-bottom-color: #fecaca;
}
.email-details-page .error-message[b-bddkgaxch7] {
margin: 0;
padding: var(--space-md, 16px);
background: #fffbfb;
font-size: var(--font-size-xs, 0.75rem);
font-family: var(--font-family-mono, monospace);
color: var(--error-700);
white-space: pre-wrap;
word-break: break-word;
}
/* Timeline */
.email-details-page .timeline[b-bddkgaxch7] {
display: flex;
flex-direction: column;
gap: 0;
}
.email-details-page .timeline-item[b-bddkgaxch7] {
display: flex;
align-items: flex-start;
gap: var(--space-sm, 8px);
padding: var(--space-sm, 8px) 0;
position: relative;
}
.email-details-page .timeline-item:not(:last-child)[b-bddkgaxch7]::after {
content: '';
position: absolute;
left: 50%;
top: 36px;
bottom: -4px;
width: 2px;
background: var(--neutral-200);
transform: translateX(11px);
}
.email-details-page .timeline-icon[b-bddkgaxch7] {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 0.75rem;
flex-shrink: 0;
z-index: 1;
}
.email-details-page .timeline-icon.created[b-bddkgaxch7] {
background: var(--brand-100);
color: var(--brand-600);
}
.email-details-page .timeline-icon.scheduled[b-bddkgaxch7] {
background: var(--neutral-200);
color: var(--neutral-600);
}
.email-details-page .timeline-icon.sent[b-bddkgaxch7] {
background: var(--accent-100);
color: var(--accent-700);
}
.email-details-page .timeline-icon.delivered[b-bddkgaxch7] {
background: var(--success-100);
color: var(--success-700);
}
.email-details-page .timeline-icon.failed[b-bddkgaxch7] {
background: var(--error-50);
color: var(--error-600);
}
.email-details-page .timeline-content[b-bddkgaxch7] {
flex: 1;
display: flex;
flex-direction: column;
}
.email-details-page .timeline-label[b-bddkgaxch7] {
font-size: var(--font-size-xs, 0.75rem);
font-weight: var(--font-weight-medium, 500);
color: var(--text-muted, #64748B);
text-transform: uppercase;
letter-spacing: 0.3px;
}
.email-details-page .timeline-date[b-bddkgaxch7] {
font-size: var(--font-size-sm, 0.875rem);
font-weight: var(--font-weight-medium, 500);
color: var(--text-primary, #0F172A);
}
.email-details-page .timeline-time[b-bddkgaxch7] {
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-muted, #64748B);
font-family: var(--font-family-mono, monospace);
}
.email-details-page .timeline-content.success .timeline-date[b-bddkgaxch7] {
color: var(--success-700);
}
.email-details-page .timeline-content.error .timeline-date[b-bddkgaxch7] {
color: var(--error-600);
}
/* Info Grid */
.email-details-page .info-grid[b-bddkgaxch7] {
display: flex;
flex-direction: column;
gap: var(--space-md, 16px);
}
.email-details-page .info-item[b-bddkgaxch7] {
display: flex;
flex-direction: column;
gap: var(--space-xs, 4px);
}
.email-details-page .info-label[b-bddkgaxch7] {
font-size: var(--font-size-xs, 0.75rem);
font-weight: var(--font-weight-medium, 500);
color: var(--text-muted, #64748B);
text-transform: uppercase;
letter-spacing: 0.3px;
}
.email-details-page .info-value[b-bddkgaxch7] {
font-size: var(--font-size-sm, 0.875rem);
font-weight: var(--font-weight-medium, 500);
color: var(--text-primary, #0F172A);
}
.email-details-page .info-value.monospace[b-bddkgaxch7] {
font-family: var(--font-family-mono, monospace);
}
.email-details-page .info-value.small[b-bddkgaxch7] {
font-size: var(--font-size-xs, 0.75rem);
word-break: break-all;
}
/* Retry Status */
.email-details-page .retry-status[b-bddkgaxch7] {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--space-md, 16px) 0;
}
.email-details-page .retry-count[b-bddkgaxch7] {
display: flex;
align-items: baseline;
gap: 2px;
}
.email-details-page .retry-current[b-bddkgaxch7] {
font-size: var(--font-size-2xl, 1.5rem);
font-weight: var(--font-weight-bold, 700);
color: var(--text-primary, #0F172A);
}
.email-details-page .retry-separator[b-bddkgaxch7] {
font-size: var(--font-size-lg, 1.125rem);
color: var(--text-muted, #64748B);
}
.email-details-page .retry-max[b-bddkgaxch7] {
font-size: var(--font-size-lg, 1.125rem);
font-weight: var(--font-weight-medium, 500);
color: var(--text-muted, #64748B);
}
.email-details-page .retry-label[b-bddkgaxch7] {
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-muted, #64748B);
margin-top: var(--space-xs, 4px);
}
.email-details-page .retry-progress[b-bddkgaxch7] {
width: 100%;
height: 6px;
background: var(--neutral-200);
border-radius: var(--radius-pill, 9999px);
overflow: hidden;
margin-top: var(--space-md, 16px);
}
.email-details-page .retry-progress .progress-bar[b-bddkgaxch7] {
height: 100%;
background: linear-gradient(90deg, var(--accent-400) 0%, var(--accent-500) 100%);
border-radius: var(--radius-pill, 9999px);
transition: width 0.3s ease;
}
.email-details-page .retry-progress .progress-bar.exhausted[b-bddkgaxch7] {
background: linear-gradient(90deg, var(--error-500) 0%, var(--error-600) 100%);
}
/* Spin Animation */
[b-bddkgaxch7] .spin {
animation: spin-b-bddkgaxch7 1s linear infinite;
}
@keyframes spin-b-bddkgaxch7 {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Responsive */
@media (max-width: 991.98px) {
.email-details-page .page-header[b-bddkgaxch7] {
flex-direction: column;
align-items: flex-start;
gap: var(--space-md, 16px);
}
.email-details-page .page-header-actions[b-bddkgaxch7] {
width: 100%;
}
.email-details-page .btn-retry[b-bddkgaxch7] {
width: 100%;
justify-content: center;
}
.email-details-page .status-overview-card[b-bddkgaxch7] {
flex-direction: column;
gap: var(--space-md, 16px);
align-items: flex-start;
}
.email-details-page .status-overview-id[b-bddkgaxch7] {
align-items: flex-start;
}
}
/* /Components/Pages/Admin/EmailQueuePage.razor.rz.scp.css */
/* Content Header */
.content-header[b-u55se2yibx] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.content-title[b-u55se2yibx] {
font-size: 1.5rem;
font-weight: 700;
color: #1a1a2e;
margin: 0;
}
.content-subtitle[b-u55se2yibx] {
font-size: 0.8rem;
color: #94A3B8;
margin: 2px 0 0;
}
.header-stats[b-u55se2yibx] {
display: flex;
align-items: center;
gap: 8px;
}
.stat-pill[b-u55se2yibx] {
display: flex;
align-items: center;
gap: 8px;
background: white;
border: 1px solid #E5E7EB;
border-radius: 20px;
padding: 6px 14px;
font-size: 0.75rem;
color: #64748B;
}
.stat-pill i[b-u55se2yibx] {
font-size: 1rem;
color: var(--brand-500);
}
.stat-pill.stat-success i[b-u55se2yibx] {
color: #10B981;
}
.stat-pill.stat-warning i[b-u55se2yibx] {
color: #F59E0B;
}
.stat-pill.stat-danger i[b-u55se2yibx] {
color: #EF4444;
}
.stat-pill .stat-value[b-u55se2yibx] {
font-size: 1.125rem;
font-weight: 700;
color: #1F2937;
}
.stat-pill .stat-label[b-u55se2yibx] {
font-size: 0.65rem;
font-weight: 600;
color: #6B7280;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.btn-header-action[b-u55se2yibx] {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid #E2E8F0;
background: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #64748B;
transition: all 0.2s;
}
.btn-header-action:hover[b-u55se2yibx] {
background: #F1F5F9;
color: #334155;
}
.spinning[b-u55se2yibx] {
animation: spin-b-u55se2yibx 1s linear infinite;
}
.filter-section[b-u55se2yibx] {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 1rem;
}
.filter-label[b-u55se2yibx] {
font-size: 0.75rem;
font-weight: 500;
color: #475569;
margin-bottom: 0.25rem;
}
.form-select-sm[b-u55se2yibx],
.form-control-sm[b-u55se2yibx] {
font-size: 0.8rem;
padding: 0.375rem 0.625rem;
}
.btn-filter[b-u55se2yibx] {
font-size: 0.75rem;
padding: 0.375rem 0.75rem;
}
.table-section[b-u55se2yibx] {
border: 1px solid #e2e8f0;
border-radius: 8px;
overflow: hidden;
}
.table-header[b-u55se2yibx] {
background: #f8fafc;
padding: 0.625rem 1rem;
border-bottom: 1px solid #e2e8f0;
display: flex;
justify-content: space-between;
align-items: center;
}
.table-title[b-u55se2yibx] {
font-size: 0.875rem;
font-weight: 600;
color: #344054;
margin: 0;
}
.data-table[b-u55se2yibx] {
font-size: 0.8rem;
margin: 0;
}
.data-table th[b-u55se2yibx] {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
color: #667085;
background: #f8fafc;
border-bottom: 2px solid #e2e8f0;
padding: 0.75rem;
white-space: nowrap;
}
.data-table th.sortable-header[b-u55se2yibx] {
cursor: pointer;
user-select: none;
transition: background-color 0.15s ease, color 0.15s ease;
}
.data-table th.sortable-header:hover[b-u55se2yibx] {
background: #eef2f6;
color: #3b82f6;
}
.data-table th .sort-icons[b-u55se2yibx] {
display: inline-flex;
flex-direction: column;
vertical-align: middle;
line-height: 0;
gap: 0;
}
.data-table th .sort-icons i[b-u55se2yibx] {
font-size: 0.5rem;
line-height: 0.5;
color: #cbd5e1;
transition: color 0.15s ease;
}
.data-table th .sort-icons i.active[b-u55se2yibx] {
color: #3b82f6;
}
.data-table th.sortable-header:hover .sort-icons i:not(.active)[b-u55se2yibx] {
color: #94a3b8;
}
.data-table th i[b-u55se2yibx] {
font-size: 0.65rem;
}
.data-table td[b-u55se2yibx] {
padding: 0.625rem 0.75rem;
vertical-align: middle;
border-bottom: 1px solid #f1f5f9;
}
.data-table tbody tr[b-u55se2yibx] {
cursor: pointer;
transition: all 0.15s ease;
}
.data-table tbody tr:hover[b-u55se2yibx] {
background-color: #f0f7ff !important;
box-shadow: inset 3px 0 0 #3b82f6;
}
.data-table tbody tr:hover td[b-u55se2yibx] {
background-color: transparent !important;
}
.data-table tbody tr.row-failed[b-u55se2yibx] {
background-color: #fef8f8;
}
.data-table tbody tr.row-failed:hover[b-u55se2yibx] {
background-color: #fee2e2 !important;
box-shadow: inset 3px 0 0 #ef4444;
}
/* Subtle badge styling - keep default Bootstrap size */
.badge-status[b-u55se2yibx] {
font-weight: 500;
border: 1px solid transparent;
}
.badge-priority[b-u55se2yibx] {
font-weight: 500;
border: 1px solid transparent;
}
/* Subtle status badge colors */
.badge-pending[b-u55se2yibx] {
background-color: #fef9e7;
color: #8a6d1b;
border-color: #f5e6a3;
}
.badge-sending[b-u55se2yibx] {
background-color: #e8f4fd;
color: #1e5a8d;
border-color: #c2dcf5;
}
.badge-sent[b-u55se2yibx] {
background-color: #e8f4fd;
color: #1e5a8d;
border-color: #c2dcf5;
}
.badge-delivered[b-u55se2yibx] {
background-color: #e8f8f0;
color: #1d6a4d;
border-color: #a8e0c4;
}
.badge-failed[b-u55se2yibx] {
background-color: #fdf2f2;
color: #9b2c2c;
border-color: #f5c6c6;
}
.badge-retrying[b-u55se2yibx] {
background-color: #f5f5f5;
color: #525252;
border-color: #d4d4d4;
}
/* Subtle priority badge colors */
.badge-high[b-u55se2yibx] {
background-color: #fdf2f2;
color: #9b2c2c;
border-color: #f5c6c6;
}
.badge-normal[b-u55se2yibx] {
background-color: #e8f4fd;
color: #1e5a8d;
border-color: #c2dcf5;
}
.badge-low[b-u55se2yibx] {
background-color: #f5f5f5;
color: #525252;
border-color: #d4d4d4;
}
.email-to[b-u55se2yibx] {
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
}
.email-subject[b-u55se2yibx] {
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
}
.template-name[b-u55se2yibx] {
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
color: #667085;
}
.date-cell[b-u55se2yibx] {
font-size: 0.75rem;
color: #667085;
white-space: nowrap;
}
.btn-action[b-u55se2yibx] {
/* Keep default button size */
}
.pagination-section[b-u55se2yibx] {
background: #f8fafc;
padding: 0.625rem 1rem;
border-top: 1px solid #e2e8f0;
}
.pagination[b-u55se2yibx] {
margin: 0;
}
.pagination .page-link[b-u55se2yibx] {
font-size: 0.75rem;
padding: 0.25rem 0.625rem;
}
.pagination-info[b-u55se2yibx] {
font-size: 0.7rem;
color: #667085;
}
.empty-state[b-u55se2yibx] {
padding: 3rem 1rem;
text-align: center;
}
.empty-state i[b-u55se2yibx] {
font-size: 2.5rem;
color: #cbd5e1;
}
.empty-state p[b-u55se2yibx] {
font-size: 0.85rem;
color: #94a3b8;
margin-top: 0.75rem;
}
/* Subtle bulk action buttons */
.bulk-actions[b-u55se2yibx] {
display: flex;
gap: 0;
}
.btn-bulk-action[b-u55se2yibx] {
font-size: 0.75rem;
font-weight: 500;
padding: 0.35rem 0.75rem;
transition: all 0.15s ease;
}
.btn-bulk-retry[b-u55se2yibx] {
background-color: #3b82f6;
border: 1px solid #3b82f6;
border-radius: 6px 0 0 6px;
color: #fff;
font-size: 0.8rem;
font-weight: 500;
padding: 0.375rem 0.75rem;
display: flex;
align-items: center;
gap: 0.375rem;
}
.btn-bulk-retry:hover[b-u55se2yibx] {
background-color: #2563eb;
border-color: #2563eb;
color: #fff;
}
.btn-bulk-retry .count-badge[b-u55se2yibx] {
background-color: rgba(255, 255, 255, 0.25);
color: #fff;
font-size: 0.7rem;
font-weight: 600;
padding: 0.1rem 0.4rem;
border-radius: 10px;
min-width: 1.25rem;
text-align: center;
}
.btn-bulk-cancel[b-u55se2yibx] {
background-color: #fff;
border: 1px solid #e2e8f0;
border-left: none;
border-radius: 0 6px 6px 0;
color: #64748b;
font-size: 0.8rem;
font-weight: 500;
padding: 0.375rem 0.75rem;
display: flex;
align-items: center;
gap: 0.375rem;
}
.btn-bulk-cancel:hover[b-u55se2yibx] {
background-color: #f8fafc;
border-color: #cbd5e1;
color: #475569;
}
/* Search input group with subtle button */
.search-input-group[b-u55se2yibx] {
display: flex;
}
.search-input-group input.form-control[b-u55se2yibx] {
border-radius: 6px 0 0 6px;
border-right: none;
}
.search-input-group input.form-control:focus[b-u55se2yibx] {
border-color: #94a3b8;
box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.2);
z-index: 1;
}
.search-input-group .btn-search[b-u55se2yibx] {
background-color: #f8fafc;
border: 1px solid #ced4da;
border-left: none;
color: #64748b;
padding: 0.375rem 0.75rem;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
}
.search-input-group .btn-search:hover[b-u55se2yibx] {
background-color: #e2e8f0;
color: #475569;
}
.search-input-group .btn-clear-search[b-u55se2yibx] {
background-color: #f8fafc;
border: 1px solid #ced4da;
border-left: none;
border-radius: 0 6px 6px 0;
color: #94a3b8;
padding: 0.375rem 0.5rem;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
}
.search-input-group .btn-clear-search:hover[b-u55se2yibx] {
background-color: #fee2e2;
color: #ef4444;
}
@keyframes spin-b-u55se2yibx {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* /Components/Pages/Admin/EmailTemplateStudioPage.razor.rz.scp.css */
/* ========================================
Email Template Studio Styles
3-Panel Layout with LECA Theme
======================================== */
/* ========================================
Global Thin Scrollbar Styling
======================================== */
/* WebKit browsers (Chrome, Safari, Edge) */
.email-studio [b-zrhrtnqk7y]::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.email-studio [b-zrhrtnqk7y]::-webkit-scrollbar-track {
background: transparent;
}
.email-studio [b-zrhrtnqk7y]::-webkit-scrollbar-thumb {
background: var(--neutral-300);
border-radius: 3px;
}
.email-studio [b-zrhrtnqk7y]::-webkit-scrollbar-thumb:hover {
background: var(--neutral-400);
}
/* Firefox scrollbar */
.email-studio *[b-zrhrtnqk7y] {
scrollbar-width: thin;
scrollbar-color: var(--neutral-300) transparent;
}
/* ========================================
Button Styling - Subtle & Theme Aligned
======================================== */
/* Primary Button - Main action buttons */
.email-studio .btn-primary[b-zrhrtnqk7y] {
background: var(--brand-600);
border: 1px solid var(--brand-600);
color: #ffffff;
font-weight: 500;
font-size: 13px;
padding: 8px 16px;
border-radius: 6px;
transition: all 0.15s ease;
display: inline-flex;
align-items: center;
gap: 6px;
}
.email-studio .btn-primary:hover[b-zrhrtnqk7y] {
background: var(--brand-700);
border-color: var(--brand-700);
box-shadow: 0 2px 4px rgba(15, 23, 42, 0.15);
}
.email-studio .btn-primary:active[b-zrhrtnqk7y] {
background: var(--brand-800);
transform: translateY(1px);
}
.email-studio .btn-primary:disabled[b-zrhrtnqk7y] {
background: var(--neutral-300);
border-color: var(--neutral-300);
color: var(--neutral-500);
cursor: not-allowed;
}
/* Secondary Button - Less prominent actions */
.email-studio .btn-secondary[b-zrhrtnqk7y] {
background: var(--neutral-100);
border: 1px solid var(--neutral-300);
color: var(--text-secondary, #475569);
font-weight: 500;
font-size: 13px;
padding: 8px 16px;
border-radius: 6px;
transition: all 0.15s ease;
display: inline-flex;
align-items: center;
gap: 6px;
}
.email-studio .btn-secondary:hover[b-zrhrtnqk7y] {
background: var(--neutral-200);
border-color: var(--neutral-400);
color: var(--text-primary, #0f172a);
}
.email-studio .btn-secondary:active[b-zrhrtnqk7y] {
background: var(--neutral-300);
transform: translateY(1px);
}
/* Outline Primary - Ghost button with brand color */
.email-studio .btn-outline-primary[b-zrhrtnqk7y] {
background: transparent;
border: 1px solid var(--brand-300);
color: var(--brand-600);
font-weight: 500;
font-size: 13px;
padding: 8px 16px;
border-radius: 6px;
transition: all 0.15s ease;
display: inline-flex;
align-items: center;
gap: 6px;
}
.email-studio .btn-outline-primary:hover[b-zrhrtnqk7y] {
background: var(--brand-50);
border-color: var(--brand-400);
color: var(--brand-700);
}
.email-studio .btn-outline-primary:active[b-zrhrtnqk7y] {
background: var(--brand-100);
transform: translateY(1px);
}
/* Outline Secondary - Subtle ghost button */
.email-studio .btn-outline-secondary[b-zrhrtnqk7y] {
background: transparent;
border: 1px solid var(--neutral-300);
color: var(--text-muted, #64748b);
font-weight: 500;
font-size: 13px;
padding: 8px 16px;
border-radius: 6px;
transition: all 0.15s ease;
display: inline-flex;
align-items: center;
gap: 6px;
}
.email-studio .btn-outline-secondary:hover[b-zrhrtnqk7y] {
background: var(--neutral-50);
border-color: var(--neutral-400);
color: var(--text-secondary, #475569);
}
.email-studio .btn-outline-secondary:active[b-zrhrtnqk7y] {
background: var(--neutral-100);
transform: translateY(1px);
}
/* Outline Danger - For delete/destructive actions */
.email-studio .btn-outline-danger[b-zrhrtnqk7y] {
background: transparent;
border: 1px solid var(--error-200);
color: var(--error-600);
font-weight: 500;
font-size: 13px;
padding: 8px 16px;
border-radius: 6px;
transition: all 0.15s ease;
display: inline-flex;
align-items: center;
gap: 6px;
}
.email-studio .btn-outline-danger:hover[b-zrhrtnqk7y] {
background: var(--error-50);
border-color: var(--error-300);
color: var(--error-700);
}
.email-studio .btn-outline-danger:active[b-zrhrtnqk7y] {
background: var(--error-100);
transform: translateY(1px);
}
/* Outline Success - For activate/positive actions */
.email-studio .btn-outline-success[b-zrhrtnqk7y] {
background: transparent;
border: 1px solid var(--success-200);
color: var(--success-600);
font-weight: 500;
font-size: 13px;
padding: 8px 16px;
border-radius: 6px;
transition: all 0.15s ease;
display: inline-flex;
align-items: center;
gap: 6px;
}
.email-studio .btn-outline-success:hover[b-zrhrtnqk7y] {
background: var(--success-50);
border-color: var(--success-300);
color: var(--success-700);
}
.email-studio .btn-outline-success:active[b-zrhrtnqk7y] {
background: var(--success-100);
transform: translateY(1px);
}
/* Small buttons */
.email-studio .btn-sm[b-zrhrtnqk7y] {
font-size: 12px;
padding: 4px 10px;
border-radius: 4px;
}
/* Link button - for inline actions */
.email-studio .btn-link[b-zrhrtnqk7y] {
background: transparent;
border: none;
color: var(--brand-600);
font-weight: 500;
font-size: 13px;
padding: 4px 8px;
text-decoration: none;
transition: all 0.15s ease;
}
.email-studio .btn-link:hover[b-zrhrtnqk7y] {
color: var(--brand-700);
text-decoration: underline;
}
/* Button groups */
.email-studio .btn-group[b-zrhrtnqk7y] {
display: inline-flex;
gap: 0;
}
.email-studio .btn-group .btn[b-zrhrtnqk7y] {
border-radius: 0;
}
.email-studio .btn-group .btn:first-child[b-zrhrtnqk7y] {
border-radius: 6px 0 0 6px;
}
.email-studio .btn-group .btn:last-child[b-zrhrtnqk7y] {
border-radius: 0 6px 6px 0;
}
.email-studio .btn-group .btn:not(:first-child)[b-zrhrtnqk7y] {
margin-left: -1px;
}
.email-studio .btn-group-sm .btn[b-zrhrtnqk7y] {
padding: 4px 8px;
font-size: 12px;
}
/* ======================================== */
.email-studio[b-zrhrtnqk7y] {
display: flex;
flex-direction: column;
height: calc(100vh - 60px);
background: var(--bg-base-solid);
}
/* Header */
.studio-header[b-zrhrtnqk7y] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px;
background: var(--bg-surface, #ffffff);
border-bottom: 1px solid var(--border-default, #e5e7eb);
}
.studio-title h1[b-zrhrtnqk7y] {
font-size: 20px;
font-weight: 600;
margin: 0;
color: var(--text-primary, #0f172a);
display: flex;
align-items: center;
gap: 10px;
}
.studio-title h1 i[b-zrhrtnqk7y] {
color: var(--brand-500);
}
.studio-actions .btn-primary[b-zrhrtnqk7y] {
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}
/* Content - 3 Panel Layout */
.studio-content[b-zrhrtnqk7y] {
display: flex;
flex: 1;
min-height: 0;
overflow: hidden;
}
/* Panel Base Styles */
.studio-panel[b-zrhrtnqk7y] {
display: flex;
flex-direction: column;
background: var(--bg-surface, #ffffff);
border-right: 1px solid var(--border-default, #e5e7eb);
}
.studio-panel:last-child[b-zrhrtnqk7y] {
border-right: none;
}
.panel-header[b-zrhrtnqk7y] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: var(--neutral-50);
border-bottom: 1px solid var(--border-default, #e5e7eb);
}
.panel-title[b-zrhrtnqk7y] {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.5px;
color: var(--text-muted, #64748b);
text-transform: uppercase;
}
.panel-body[b-zrhrtnqk7y] {
flex: 1;
overflow: auto;
padding: 8px;
}
/* Left Panel - Template Tree */
.panel-left[b-zrhrtnqk7y] {
width: 320px;
min-width: 320px;
}
.panel-search[b-zrhrtnqk7y] {
padding: 8px 12px;
border-bottom: 1px solid var(--border-default, #e5e7eb);
}
.template-count[b-zrhrtnqk7y] {
font-size: 12px;
font-weight: 500;
color: var(--text-muted, #64748b);
background: var(--neutral-200);
padding: 2px 8px;
border-radius: 10px;
}
.loading-state[b-zrhrtnqk7y] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px;
gap: 12px;
color: var(--text-muted, #64748b);
font-size: 13px;
}
/* Simple Tree View Styles */
.template-tree-simple[b-zrhrtnqk7y] {
padding: 4px;
}
.tree-category[b-zrhrtnqk7y] {
margin-bottom: 4px;
}
.tree-category-header[b-zrhrtnqk7y] {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
padding: 6px 8px;
border: none;
background: transparent;
font-size: 13px;
font-weight: 500;
color: var(--text-primary, #0f172a);
border-radius: 4px;
cursor: pointer;
text-align: left;
}
.tree-category-header:hover[b-zrhrtnqk7y] {
background: var(--bg-hover, rgba(15, 23, 42, 0.05));
}
.tree-category-header .bi-chevron-down[b-zrhrtnqk7y],
.tree-category-header .bi-chevron-right[b-zrhrtnqk7y] {
font-size: 12px;
color: var(--text-muted, #64748b);
}
.tree-category-header .bi-folder[b-zrhrtnqk7y],
.tree-category-header .bi-folder2-open[b-zrhrtnqk7y] {
font-size: 14px;
}
.tree-badge[b-zrhrtnqk7y] {
margin-left: auto;
font-size: 11px;
font-weight: 600;
background: var(--neutral-200);
color: var(--text-secondary, #475569);
padding: 2px 6px;
border-radius: 10px;
}
.tree-children[b-zrhrtnqk7y] {
margin-left: 12px;
padding-left: 8px;
border-left: 1px solid var(--border-default, #e5e7eb);
}
.tree-item[b-zrhrtnqk7y] {
display: flex;
align-items: flex-start;
gap: 8px;
width: 100%;
padding: 8px;
border: none;
background: transparent;
font-size: 12px;
color: var(--text-primary, #0f172a);
border-radius: 4px;
cursor: pointer;
text-align: left;
transition: all 0.15s ease;
line-height: 1.4;
}
.tree-item:hover[b-zrhrtnqk7y] {
background: var(--bg-hover, rgba(15, 23, 42, 0.05));
}
.tree-item.selected[b-zrhrtnqk7y] {
background: var(--brand-100);
color: var(--brand-700);
font-weight: 500;
}
.tree-item.inactive[b-zrhrtnqk7y] {
opacity: 0.6;
}
.tree-item.inactive .tree-item-name[b-zrhrtnqk7y] {
font-style: italic;
}
.tree-item .bi-file-earmark-text[b-zrhrtnqk7y] {
color: var(--brand-500);
flex-shrink: 0;
margin-top: 2px;
}
.tree-item .bi-file-earmark-lock[b-zrhrtnqk7y] {
color: var(--warning-600);
flex-shrink: 0;
margin-top: 2px;
}
.tree-item-name[b-zrhrtnqk7y] {
flex: 1;
word-break: break-word;
overflow-wrap: break-word;
}
.tree-item-badge[b-zrhrtnqk7y] {
flex-shrink: 0;
font-size: 10px;
margin-top: 2px;
}
/* System template icon badge */
.tree-item-system-badge[b-zrhrtnqk7y] {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 4px;
background: var(--warning-100);
color: var(--warning-600);
font-size: 10px;
margin-left: auto;
}
.tree-item.selected .tree-item-system-badge[b-zrhrtnqk7y] {
background: var(--warning-200);
}
/* New Template Item */
.tree-item.tree-item-new[b-zrhrtnqk7y] {
border: 1px dashed var(--brand-300);
background: var(--brand-50);
margin-bottom: 12px;
color: var(--brand-700);
}
.tree-item.tree-item-new:hover[b-zrhrtnqk7y] {
background: var(--brand-100);
border-color: var(--brand-500);
}
.tree-item.tree-item-new.selected[b-zrhrtnqk7y] {
background: var(--brand-200);
border-color: var(--brand-600);
border-style: solid;
}
.tree-item.tree-item-new .tree-item-name[b-zrhrtnqk7y] {
font-weight: 500;
}
/* Center Panel - Editor */
.panel-center[b-zrhrtnqk7y] {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
overflow: visible;
}
/* Ensure dropdown menus can overflow panels */
.panel-center .dropdown-menu[b-zrhrtnqk7y],
.panel-center .ql-toolbar .dropdown-menu[b-zrhrtnqk7y] {
z-index: 1050;
}
/* Editor Tabs */
.editor-tabs[b-zrhrtnqk7y] {
display: flex;
gap: 4px;
padding: 8px 16px;
background: var(--neutral-50);
border-bottom: 1px solid var(--border-default, #e5e7eb);
}
.editor-tab[b-zrhrtnqk7y] {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border: none;
background: transparent;
color: var(--text-muted, #64748b);
font-size: 13px;
font-weight: 500;
border-radius: 6px;
cursor: pointer;
transition: all 0.15s ease;
}
.editor-tab:hover[b-zrhrtnqk7y] {
background: rgba(15, 23, 42, 0.05);
color: var(--text-secondary, #475569);
}
.editor-tab.active[b-zrhrtnqk7y] {
background: var(--bg-surface, #ffffff);
color: var(--brand-600);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.editor-tab .tab-badge[b-zrhrtnqk7y] {
font-size: 10px;
font-weight: 600;
background: var(--brand-100);
color: var(--brand-700);
padding: 2px 6px;
border-radius: 10px;
}
/* Editor Content */
.editor-content[b-zrhrtnqk7y] {
flex: 1;
overflow-y: auto;
padding: 20px;
}
.editor-form[b-zrhrtnqk7y] {
display: flex;
flex-direction: column;
gap: 16px;
}
.editor-form .form-group[b-zrhrtnqk7y] {
display: flex;
flex-direction: column;
}
.editor-form .form-label[b-zrhrtnqk7y] {
font-size: 13px;
font-weight: 500;
color: var(--text-secondary, #475569);
margin-bottom: 6px;
}
.editor-form .form-group.flex-grow-1[b-zrhrtnqk7y] {
min-height: 450px;
}
/* ===== Enhanced Settings Tab ===== */
.settings-container[b-zrhrtnqk7y] {
display: flex;
flex-direction: column;
gap: 20px;
padding: 4px;
}
.settings-section[b-zrhrtnqk7y] {
background: var(--bg-surface, #ffffff);
border: 1px solid var(--border-default, #e5e7eb);
border-radius: var(--radius-lg, 12px);
overflow: hidden;
transition: box-shadow 0.2s ease;
}
.settings-section:hover[b-zrhrtnqk7y] {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.settings-section-header[b-zrhrtnqk7y] {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
background: linear-gradient(135deg, var(--neutral-50) 0%, var(--bg-surface, #ffffff) 100%);
border-bottom: 1px solid var(--border-default, #e5e7eb);
}
.section-icon[b-zrhrtnqk7y] {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--brand-50);
border-radius: var(--radius-md, 8px);
color: var(--brand-600);
font-size: 18px;
}
.section-title h6[b-zrhrtnqk7y] {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--text-primary, #0f172a);
}
.section-description[b-zrhrtnqk7y] {
font-size: 12px;
color: var(--text-muted, #64748b);
}
.settings-section-content[b-zrhrtnqk7y] {
padding: 20px;
}
.settings-row[b-zrhrtnqk7y] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.settings-field[b-zrhrtnqk7y] {
display: flex;
flex-direction: column;
gap: 6px;
}
.settings-field.full-width[b-zrhrtnqk7y] {
grid-column: 1 / -1;
}
.settings-label[b-zrhrtnqk7y] {
font-size: 13px;
font-weight: 500;
color: var(--text-secondary, #475569);
display: flex;
align-items: center;
}
.settings-help[b-zrhrtnqk7y] {
font-size: 11px;
color: var(--text-muted, #64748b);
}
.settings-help code[b-zrhrtnqk7y] {
background: var(--neutral-100);
padding: 1px 4px;
border-radius: 3px;
font-size: 10px;
}
.input-with-icon[b-zrhrtnqk7y] {
position: relative;
display: flex;
align-items: center;
}
.input-with-icon i[b-zrhrtnqk7y] {
position: absolute;
left: 12px;
color: var(--text-muted, #64748b);
font-size: 14px;
z-index: 1;
}
.input-with-icon input[b-zrhrtnqk7y] {
padding-left: 36px;
}
/* Variable Preview */
.variable-preview[b-zrhrtnqk7y] {
display: flex;
align-items: flex-start;
gap: 10px;
margin-top: 12px;
padding: 12px;
background: var(--neutral-50);
border-radius: var(--radius-md, 8px);
border: 1px dashed var(--border-default, #e5e7eb);
}
.preview-label[b-zrhrtnqk7y] {
font-size: 11px;
font-weight: 500;
color: var(--text-muted, #64748b);
white-space: nowrap;
}
.variable-tags[b-zrhrtnqk7y] {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.variable-tag[b-zrhrtnqk7y] {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: 'Consolas', 'Monaco', monospace;
font-size: 11px;
color: var(--brand-700);
background: var(--brand-50);
padding: 3px 8px;
border-radius: 4px;
border: 1px solid var(--brand-100);
}
.variable-tag i[b-zrhrtnqk7y] {
font-size: 10px;
color: var(--brand-500);
}
/* Settings Toggles */
.settings-toggles[b-zrhrtnqk7y] {
display: flex;
flex-direction: column;
gap: 12px;
}
.settings-toggle-item[b-zrhrtnqk7y] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
background: var(--neutral-50);
border: 1px solid var(--border-default, #e5e7eb);
border-radius: var(--radius-md, 8px);
transition: all 0.2s ease;
}
.settings-toggle-item:hover[b-zrhrtnqk7y] {
border-color: var(--brand-200);
background: var(--brand-50);
}
.toggle-info[b-zrhrtnqk7y] {
display: flex;
align-items: center;
gap: 12px;
}
.toggle-icon[b-zrhrtnqk7y] {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md, 8px);
font-size: 16px;
}
.toggle-icon.active[b-zrhrtnqk7y] {
background: var(--success-100);
color: var(--success-600);
}
.toggle-icon.aws[b-zrhrtnqk7y] {
background: var(--warning-100);
color: var(--warning-600);
}
.toggle-text[b-zrhrtnqk7y] {
display: flex;
flex-direction: column;
}
.toggle-title[b-zrhrtnqk7y] {
font-size: 13px;
font-weight: 600;
color: var(--text-primary, #0f172a);
}
.toggle-description[b-zrhrtnqk7y] {
font-size: 11px;
color: var(--text-muted, #64748b);
}
.settings-toggle-item .form-check-input[type="checkbox"][b-zrhrtnqk7y] {
width: 44px;
height: 24px;
cursor: pointer;
background-color: #cbd5e1;
border: none;
border-radius: 24px;
transition: background-color 0.2s ease, background-position 0.2s ease;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
background-position: left center;
background-repeat: no-repeat;
background-size: contain;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
.settings-toggle-item .form-check-input[type="checkbox"]:focus[b-zrhrtnqk7y] {
box-shadow: 0 0 0 3px rgba(0, 115, 177, 0.15);
outline: none;
}
.settings-toggle-item .form-check-input[type="checkbox"]:checked[b-zrhrtnqk7y] {
background-color: var(--brand-500);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
background-position: right center;
}
.settings-toggle-item .form-check-input[type="checkbox"][b-zrhrtnqk7y]::before,
.settings-toggle-item .form-check-input[type="checkbox"][b-zrhrtnqk7y]::after {
display: none !important;
content: none !important;
}
/* System Template Notice */
.system-template-notice[b-zrhrtnqk7y] {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px;
background: linear-gradient(135deg, var(--info-50) 0%, var(--brand-50) 100%);
border: 1px solid var(--info-200);
border-radius: var(--radius-lg, 12px);
}
.notice-icon[b-zrhrtnqk7y] {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--info-100);
border-radius: 50%;
color: var(--info-600);
font-size: 18px;
flex-shrink: 0;
}
.notice-content[b-zrhrtnqk7y] {
flex: 1;
}
.notice-content strong[b-zrhrtnqk7y] {
display: block;
font-size: 13px;
color: var(--info-700);
margin-bottom: 4px;
}
.notice-content p[b-zrhrtnqk7y] {
margin: 0;
font-size: 12px;
color: var(--info-600);
line-height: 1.5;
}
/* Quill editor inside flex-grow container */
.editor-form .form-group.flex-grow-1[b-zrhrtnqk7y] .quill-editor-wrapper {
height: 100%;
min-height: 400px;
display: flex;
flex-direction: column;
}
.editor-form .form-group.flex-grow-1[b-zrhrtnqk7y] .quill-container {
flex: 1;
min-height: 350px;
}
.editor-form .form-group.flex-grow-1[b-zrhrtnqk7y] .ql-container {
flex: 1;
display: flex;
flex-direction: column;
}
.editor-form .form-group.flex-grow-1[b-zrhrtnqk7y] .ql-editor {
flex: 1;
min-height: 300px;
max-height: 500px;
overflow-y: auto;
}
/* Variable insertion */
.input-with-variables[b-zrhrtnqk7y] {
position: relative;
}
/* Subject Variables Button */
.subject-variables-btn[b-zrhrtnqk7y] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
margin-left: 8px;
font-size: 11px;
font-weight: 500;
color: var(--brand-600);
background: var(--bg-surface, #ffffff);
border: 1px solid var(--border-default, #e5e7eb);
border-radius: 4px;
cursor: pointer;
transition: all 0.15s ease;
}
.subject-variables-btn:hover[b-zrhrtnqk7y] {
color: var(--brand-700);
background: var(--brand-50);
border-color: var(--brand-300);
}
.subject-variables-btn.active[b-zrhrtnqk7y] {
color: var(--brand-700);
background: var(--brand-100);
border-color: var(--brand-400);
}
.subject-variables-btn i[b-zrhrtnqk7y] {
font-size: 12px;
}
/* Subject Undo Button */
.subject-undo-btn[b-zrhrtnqk7y] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
margin-left: 4px;
font-size: 12px;
color: var(--text-muted, #64748b);
background: var(--bg-surface, #ffffff);
border: 1px solid var(--border-default, #e5e7eb);
border-radius: 4px;
cursor: pointer;
transition: all 0.15s ease;
}
.subject-undo-btn:hover[b-zrhrtnqk7y] {
color: var(--brand-600);
background: var(--brand-50);
border-color: var(--brand-300);
}
.subject-undo-btn:active[b-zrhrtnqk7y] {
transform: scale(0.95);
}
.variable-quick-insert[b-zrhrtnqk7y] {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 6px;
}
.variable-quick-insert .btn[b-zrhrtnqk7y] {
font-size: 11px;
padding: 2px 8px;
}
/* Brand preview card */
.brand-preview-card[b-zrhrtnqk7y] {
padding: 16px;
border: 1px solid var(--border-default, #e5e7eb);
border-radius: var(--radius-md, 8px);
background: var(--neutral-50);
}
.brand-colors[b-zrhrtnqk7y] {
display: flex;
gap: 12px;
margin-bottom: 12px;
}
.color-swatch[b-zrhrtnqk7y] {
width: 60px;
height: 40px;
border-radius: 6px;
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 4px;
}
.color-swatch span[b-zrhrtnqk7y] {
font-size: 10px;
color: white;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.brand-logo[b-zrhrtnqk7y] {
margin-bottom: 12px;
}
.brand-logo img[b-zrhrtnqk7y] {
max-height: 40px;
}
.brand-info[b-zrhrtnqk7y] {
font-size: 12px;
color: var(--text-muted, #64748b);
}
/* HTML Preview */
.html-preview[b-zrhrtnqk7y] {
padding: 12px;
background: var(--bg-surface, #ffffff);
border: 1px solid var(--border-default, #e5e7eb);
border-radius: 4px;
font-size: 13px;
}
/* Git-style Version History */
.git-history[b-zrhrtnqk7y] {
display: flex;
flex-direction: column;
height: 100%;
background: var(--bg-surface, #ffffff);
border-radius: var(--radius-md, 8px);
border: 1px solid var(--border-default, #e5e7eb);
overflow: hidden;
}
.git-history-header[b-zrhrtnqk7y] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: linear-gradient(135deg, var(--neutral-50) 0%, var(--neutral-100) 100%);
border-bottom: 1px solid var(--border-default, #e5e7eb);
}
.git-branch-info[b-zrhrtnqk7y] {
display: flex;
align-items: center;
gap: 8px;
}
.git-branch-info i[b-zrhrtnqk7y] {
color: var(--brand-500);
font-size: 16px;
}
.branch-name[b-zrhrtnqk7y] {
font-weight: 600;
color: var(--text-primary, #0f172a);
font-size: 14px;
}
.commit-count[b-zrhrtnqk7y] {
font-size: 12px;
color: var(--text-muted, #64748b);
padding: 2px 8px;
background: var(--neutral-200);
border-radius: 10px;
}
.git-commits[b-zrhrtnqk7y] {
flex: 1;
overflow-y: auto;
padding: 16px;
}
/* Individual Commit */
.git-commit[b-zrhrtnqk7y] {
display: flex;
gap: 16px;
position: relative;
}
.git-commit:not(:last-child)[b-zrhrtnqk7y] {
padding-bottom: 24px;
}
/* Timeline */
.commit-timeline[b-zrhrtnqk7y] {
display: flex;
flex-direction: column;
align-items: center;
width: 20px;
flex-shrink: 0;
}
.commit-dot[b-zrhrtnqk7y] {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--neutral-200);
border: 3px solid var(--bg-surface, #ffffff);
box-shadow: 0 0 0 2px var(--neutral-300);
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
transition: all 0.2s ease;
}
.commit-dot.current[b-zrhrtnqk7y] {
background: var(--success-500);
box-shadow: 0 0 0 2px var(--success-200);
}
.commit-dot.current i[b-zrhrtnqk7y] {
font-size: 10px;
color: white;
}
.commit-dot.published[b-zrhrtnqk7y] {
background: var(--brand-500);
box-shadow: 0 0 0 2px var(--brand-200);
}
.commit-line[b-zrhrtnqk7y] {
width: 2px;
flex: 1;
background: var(--neutral-200);
margin-top: 4px;
}
/* Commit Content */
.commit-content[b-zrhrtnqk7y] {
flex: 1;
background: var(--neutral-50);
border: 1px solid var(--border-default, #e5e7eb);
border-radius: var(--radius-md, 8px);
padding: 12px 16px;
transition: all 0.2s ease;
}
.git-commit.current .commit-content[b-zrhrtnqk7y] {
background: linear-gradient(135deg, var(--success-50) 0%, var(--neutral-50) 100%);
border-color: var(--success-200);
}
.git-commit:hover .commit-content[b-zrhrtnqk7y] {
border-color: var(--brand-300);
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
.commit-header[b-zrhrtnqk7y] {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.commit-title[b-zrhrtnqk7y] {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.commit-hash[b-zrhrtnqk7y] {
font-family: 'Consolas', 'Monaco', monospace;
font-size: 13px;
font-weight: 600;
color: var(--brand-700);
background: var(--brand-50);
padding: 2px 8px;
border-radius: 4px;
}
.commit-tag[b-zrhrtnqk7y] {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
padding: 2px 6px;
border-radius: 4px;
}
.commit-tag i[b-zrhrtnqk7y] {
font-size: 9px;
}
.commit-tag.current[b-zrhrtnqk7y] {
background: var(--success-100);
color: var(--success-700);
border: 1px solid var(--success-200);
}
.commit-tag.published[b-zrhrtnqk7y] {
background: var(--brand-100);
color: var(--brand-700);
border: 1px solid var(--brand-200);
}
.commit-actions[b-zrhrtnqk7y] {
display: flex;
gap: 6px;
opacity: 0;
transition: opacity 0.2s ease;
}
.git-commit:hover .commit-actions[b-zrhrtnqk7y] {
opacity: 1;
}
.commit-action-btn[b-zrhrtnqk7y] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
font-size: 11px;
font-weight: 500;
color: var(--text-muted, #64748b);
background: var(--bg-surface, #ffffff);
border: 1px solid var(--border-default, #e5e7eb);
border-radius: 4px;
cursor: pointer;
transition: all 0.15s ease;
}
.commit-action-btn:hover[b-zrhrtnqk7y] {
color: var(--brand-600);
background: var(--brand-50);
border-color: var(--brand-300);
}
.commit-action-btn i[b-zrhrtnqk7y] {
font-size: 12px;
}
.commit-message[b-zrhrtnqk7y] {
font-size: 13px;
color: var(--text-primary, #0f172a);
line-height: 1.5;
margin-bottom: 8px;
}
.commit-message .no-message[b-zrhrtnqk7y] {
color: var(--text-muted, #64748b);
font-style: italic;
}
.commit-meta[b-zrhrtnqk7y] {
display: flex;
align-items: center;
gap: 16px;
font-size: 12px;
color: var(--text-muted, #64748b);
}
.commit-author[b-zrhrtnqk7y],
.commit-date[b-zrhrtnqk7y] {
display: flex;
align-items: center;
gap: 4px;
}
.commit-author i[b-zrhrtnqk7y],
.commit-date i[b-zrhrtnqk7y] {
font-size: 12px;
color: var(--neutral-400);
}
/* Empty state */
.empty-state[b-zrhrtnqk7y] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
text-align: center;
}
.empty-state h5[b-zrhrtnqk7y] {
margin-top: 16px;
color: var(--text-primary, #0f172a);
}
.empty-state p[b-zrhrtnqk7y] {
color: var(--text-muted, #64748b);
max-width: 300px;
}
/* Editor Footer */
.editor-footer[b-zrhrtnqk7y] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px;
background: var(--neutral-50);
border-top: 1px solid var(--border-default, #e5e7eb);
}
.footer-left[b-zrhrtnqk7y],
.footer-right[b-zrhrtnqk7y] {
display: flex;
align-items: center;
gap: 8px;
}
.footer-left .btn[b-zrhrtnqk7y] {
padding: 6px 12px;
font-size: 12px;
}
.footer-right .btn[b-zrhrtnqk7y] {
padding: 8px 14px;
}
.footer-right .btn-primary[b-zrhrtnqk7y] {
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}
.unsaved-indicator[b-zrhrtnqk7y] {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--warning-600);
padding: 4px 10px;
background: var(--warning-50);
border-radius: 12px;
}
.unsaved-indicator i[b-zrhrtnqk7y] {
font-size: 8px;
}
/* Empty Editor State */
.empty-editor[b-zrhrtnqk7y] {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px;
text-align: center;
color: var(--text-muted, #64748b);
}
.empty-editor h4[b-zrhrtnqk7y] {
margin-top: 20px;
color: var(--text-primary, #0f172a);
}
.empty-editor .btn-primary[b-zrhrtnqk7y] {
margin-top: 8px;
}
/* Loading state button */
.loading-state .btn-primary[b-zrhrtnqk7y] {
margin-top: 4px;
}
/* Right Panel - Template Info */
.panel-right[b-zrhrtnqk7y] {
width: 280px;
min-width: 280px;
transition: width 0.2s ease, min-width 0.2s ease;
}
.panel-right.collapsed[b-zrhrtnqk7y] {
width: 44px;
min-width: 44px;
}
.panel-right.collapsed .panel-header[b-zrhrtnqk7y] {
justify-content: center;
padding: 12px 8px;
}
.panel-right.collapsed .info-panel-content[b-zrhrtnqk7y],
.panel-right.collapsed .info-panel-empty[b-zrhrtnqk7y] {
display: none;
}
.panel-collapse-btn[b-zrhrtnqk7y] {
padding: 4px 8px;
color: var(--text-muted, #64748b);
border: 1px solid var(--border-default, #e5e7eb);
border-radius: 4px;
background: var(--bg-surface, #ffffff);
transition: all 0.15s ease;
}
.panel-collapse-btn:hover[b-zrhrtnqk7y] {
color: var(--text-primary, #0f172a);
background: var(--bg-hover, rgba(15, 23, 42, 0.05));
border-color: var(--brand-300);
}
/* Info Panel Content */
.info-panel-content[b-zrhrtnqk7y] {
flex: 1;
overflow-y: auto;
padding: 12px;
}
/* Template Status Header */
.template-status-header[b-zrhrtnqk7y] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px;
margin: -12px -12px 12px -12px;
background: linear-gradient(135deg, var(--neutral-50) 0%, var(--neutral-100) 100%);
border-bottom: 1px solid var(--border-default, #e5e7eb);
}
.status-badges[b-zrhrtnqk7y] {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.status-badge[b-zrhrtnqk7y] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.status-badge i[b-zrhrtnqk7y] {
font-size: 10px;
}
.status-badge.status-active[b-zrhrtnqk7y] {
background: linear-gradient(135deg, var(--success-50) 0%, var(--success-100) 100%);
color: var(--success-700);
border: 1px solid var(--success-200);
}
.status-badge.status-inactive[b-zrhrtnqk7y] {
background: linear-gradient(135deg, var(--neutral-100) 0%, var(--neutral-200) 100%);
color: var(--neutral-600);
border: 1px solid var(--neutral-300);
}
.status-badge.status-system[b-zrhrtnqk7y] {
background: linear-gradient(135deg, var(--warning-50) 0%, var(--warning-100) 100%);
color: var(--warning-700);
border: 1px solid var(--warning-200);
}
.version-badge[b-zrhrtnqk7y] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
background: var(--brand-50);
color: var(--brand-700);
border-radius: 20px;
border: 1px solid var(--brand-200);
}
.version-badge i[b-zrhrtnqk7y] {
font-size: 10px;
}
.info-section[b-zrhrtnqk7y] {
padding: 12px 0;
border-bottom: 1px solid var(--border-default, #e5e7eb);
}
.info-section:first-child[b-zrhrtnqk7y] {
padding-top: 0;
}
.info-section:last-child[b-zrhrtnqk7y] {
border-bottom: none;
}
.info-section-title[b-zrhrtnqk7y] {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-muted, #64748b);
margin-bottom: 10px;
}
.info-section-title i[b-zrhrtnqk7y] {
font-size: 12px;
color: var(--brand-500);
}
.info-count[b-zrhrtnqk7y] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
font-size: 10px;
font-weight: 600;
background: var(--brand-100);
color: var(--brand-700);
border-radius: 10px;
margin-left: auto;
}
.info-item[b-zrhrtnqk7y] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 0;
font-size: 13px;
}
.info-label[b-zrhrtnqk7y] {
display: flex;
align-items: center;
gap: 6px;
color: var(--text-muted, #64748b);
}
.info-label i[b-zrhrtnqk7y] {
font-size: 12px;
width: 14px;
text-align: center;
color: var(--neutral-400);
}
.info-value[b-zrhrtnqk7y] {
color: var(--text-primary, #0f172a);
font-weight: 500;
}
.info-value.small[b-zrhrtnqk7y] {
font-size: 12px;
font-weight: 400;
}
.info-code[b-zrhrtnqk7y] {
font-size: 11px;
background: var(--neutral-100);
padding: 2px 6px;
border-radius: 4px;
font-family: 'Consolas', 'Monaco', monospace;
color: var(--neutral-700);
}
/* Info Badges */
.info-badge[b-zrhrtnqk7y] {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 3px 8px;
font-size: 11px;
font-weight: 500;
border-radius: 4px;
}
.info-badge i[b-zrhrtnqk7y] {
font-size: 10px;
}
.info-badge-category[b-zrhrtnqk7y] {
background: var(--neutral-100);
color: var(--neutral-700);
border: 1px solid var(--neutral-200);
}
.info-badge-enabled[b-zrhrtnqk7y] {
background: var(--success-50);
color: var(--success-700);
border: 1px solid var(--success-200);
}
.info-badge-disabled[b-zrhrtnqk7y] {
background: var(--neutral-100);
color: var(--neutral-500);
border: 1px solid var(--neutral-200);
}
.variable-tags[b-zrhrtnqk7y] {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.variable-tag[b-zrhrtnqk7y] {
font-size: 11px;
font-family: 'Consolas', 'Monaco', monospace;
background: linear-gradient(135deg, var(--brand-50) 0%, var(--brand-100) 100%);
color: var(--brand-700);
padding: 4px 8px;
border-radius: 4px;
border: 1px solid var(--brand-200);
cursor: default;
transition: all 0.15s ease;
}
.variable-tag:hover[b-zrhrtnqk7y] {
background: linear-gradient(135deg, var(--brand-100) 0%, var(--brand-200) 100%);
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08);
}
.info-panel-empty[b-zrhrtnqk7y] {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
text-align: center;
color: var(--text-muted, #64748b);
}
.info-panel-empty i[b-zrhrtnqk7y] {
font-size: 32px;
margin-bottom: 12px;
}
.info-panel-empty p[b-zrhrtnqk7y] {
font-size: 13px;
margin: 0;
}
/* Preview Modal */
.preview-modal[b-zrhrtnqk7y] {
max-width: 900px;
}
.preview-modal .modal-content[b-zrhrtnqk7y] {
height: 85vh;
display: flex;
flex-direction: column;
}
.preview-modal .modal-body[b-zrhrtnqk7y] {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.preview-modal-toolbar[b-zrhrtnqk7y] {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
margin-right: 12px;
}
/* Preview Mode Toggle - Subtle pill buttons */
.preview-mode-toggle[b-zrhrtnqk7y] {
display: flex;
background: var(--neutral-100);
border-radius: 8px;
padding: 3px;
gap: 2px;
}
.preview-mode-btn[b-zrhrtnqk7y] {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border: none;
background: transparent;
color: var(--text-muted, #64748b);
font-size: 13px;
font-weight: 500;
border-radius: 6px;
cursor: pointer;
transition: all 0.15s ease;
}
.preview-mode-btn:hover[b-zrhrtnqk7y] {
color: var(--text-secondary, #475569);
background: var(--neutral-200);
}
.preview-mode-btn.active[b-zrhrtnqk7y] {
background: var(--bg-surface, #ffffff);
color: var(--brand-600);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.preview-mode-btn i[b-zrhrtnqk7y] {
font-size: 14px;
}
.preview-mode-btn span[b-zrhrtnqk7y] {
display: inline;
}
/* Refresh button - subtle */
.preview-refresh-btn[b-zrhrtnqk7y] {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: 1px solid var(--border-default, #e5e7eb);
background: var(--bg-surface, #ffffff);
color: var(--text-muted, #64748b);
border-radius: 6px;
cursor: pointer;
transition: all 0.15s ease;
}
.preview-refresh-btn:hover[b-zrhrtnqk7y] {
background: var(--neutral-50);
color: var(--text-primary, #0f172a);
border-color: var(--border-hover, #d1d5db);
}
.preview-refresh-btn i[b-zrhrtnqk7y] {
font-size: 14px;
}
.preview-loading-modal[b-zrhrtnqk7y] {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--text-muted, #64748b);
}
.preview-modal-subject[b-zrhrtnqk7y] {
padding: 12px 16px;
background: var(--neutral-50);
border-bottom: 1px solid var(--border-default, #e5e7eb);
font-size: 13px;
color: var(--text-secondary, #475569);
flex-shrink: 0;
display: flex;
align-items: center;
}
.preview-modal-subject i[b-zrhrtnqk7y] {
color: var(--text-muted, #64748b);
}
.preview-modal-subject strong[b-zrhrtnqk7y] {
color: var(--text-muted, #64748b);
font-weight: 500;
margin-right: 6px;
}
.preview-modal-subject span[b-zrhrtnqk7y] {
color: var(--text-primary, #0f172a);
}
.preview-modal-content[b-zrhrtnqk7y] {
flex: 1;
overflow: auto;
background: var(--neutral-200);
}
.preview-modal-content.text[b-zrhrtnqk7y] {
background: var(--neutral-900);
}
.preview-modal-text[b-zrhrtnqk7y] {
margin: 0;
padding: 20px;
font-family: 'Consolas', 'Monaco', monospace;
font-size: 13px;
line-height: 1.6;
color: var(--neutral-100);
white-space: pre-wrap;
word-wrap: break-word;
}
.preview-modal-frame-wrapper[b-zrhrtnqk7y] {
display: flex;
justify-content: center;
padding: 24px;
min-height: 100%;
}
.preview-modal-frame[b-zrhrtnqk7y] {
background: white;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.preview-modal-frame.desktop[b-zrhrtnqk7y] {
width: 600px;
min-height: 500px;
}
.preview-modal-frame.mobile[b-zrhrtnqk7y] {
width: 375px;
min-height: 600px;
border-radius: 32px;
border: 10px solid #1f2937;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}
.preview-modal-frame.mobile[b-zrhrtnqk7y]::before {
content: '';
display: block;
height: 24px;
background: #1f2937;
border-radius: 0 0 12px 12px;
}
.preview-modal-frame iframe[b-zrhrtnqk7y] {
flex: 1;
width: 100%;
min-height: 500px;
border: none;
background: white;
}
/* Responsive - hide text labels on smaller screens */
@media (max-width: 768px) {
.preview-mode-btn span[b-zrhrtnqk7y] {
display: none;
}
.preview-mode-btn[b-zrhrtnqk7y] {
padding: 8px 10px;
}
}
.preview-subject[b-zrhrtnqk7y] {
padding: 12px 16px;
background: var(--neutral-100);
border-bottom: 1px solid var(--border-default, #e5e7eb);
font-size: 13px;
}
.preview-subject strong[b-zrhrtnqk7y] {
color: var(--text-muted, #64748b);
}
.preview-frame[b-zrhrtnqk7y] {
flex: 1;
padding: 16px;
display: flex;
justify-content: center;
}
.preview-frame iframe[b-zrhrtnqk7y] {
border: 1px solid var(--border-default, #e5e7eb);
border-radius: 8px;
background: white;
box-shadow: var(--shadow-md);
}
.preview-frame.desktop iframe[b-zrhrtnqk7y] {
width: 100%;
max-width: 600px;
min-height: 500px;
}
.preview-frame.mobile iframe[b-zrhrtnqk7y] {
width: 375px;
min-height: 600px;
border-radius: 20px;
}
.preview-text[b-zrhrtnqk7y] {
flex: 1;
margin: 0;
padding: 16px;
font-family: 'Consolas', 'Monaco', monospace;
font-size: 12px;
line-height: 1.5;
background: var(--neutral-900);
color: var(--neutral-100);
white-space: pre-wrap;
word-wrap: break-word;
}
.preview-empty[b-zrhrtnqk7y] {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px;
color: var(--text-muted, #64748b);
font-size: 13px;
}
.preview-empty i[b-zrhrtnqk7y] {
font-size: 48px;
margin-bottom: 12px;
}
/* Responsive adjustments */
@media (max-width: 1400px) {
.panel-right[b-zrhrtnqk7y] {
width: 300px;
min-width: 300px;
}
}
@media (max-width: 1200px) {
.panel-left[b-zrhrtnqk7y] {
width: 250px;
min-width: 250px;
}
.panel-right[b-zrhrtnqk7y] {
width: 280px;
min-width: 280px;
}
}
@media (max-width: 992px) {
.studio-content[b-zrhrtnqk7y] {
flex-direction: column;
}
.panel-left[b-zrhrtnqk7y],
.panel-right[b-zrhrtnqk7y] {
width: 100%;
min-width: 100%;
max-height: 300px;
}
.panel-center[b-zrhrtnqk7y] {
min-height: 400px;
}
}
/* ========================================
Modal Button Styling
======================================== */
/* Brand card actions */
.email-studio .card .btn[b-zrhrtnqk7y] {
font-size: 12px;
}
/* Accordion button styling */
.email-studio .accordion-button[b-zrhrtnqk7y] {
font-size: 13px;
font-weight: 500;
color: var(--text-secondary, #475569);
padding: 10px 14px;
background: var(--bg-surface, #ffffff);
}
.email-studio .accordion-button:not(.collapsed)[b-zrhrtnqk7y] {
color: var(--brand-700);
background: var(--brand-50);
}
.email-studio .accordion-button:focus[b-zrhrtnqk7y] {
box-shadow: 0 0 0 2px var(--brand-100);
border-color: var(--brand-300);
}
/* Info panel preview button */
.info-section .btn-outline-primary.w-100[b-zrhrtnqk7y] {
justify-content: center;
padding: 10px 16px;
}
/* Variable quick insert buttons */
.variable-quick-insert .btn[b-zrhrtnqk7y] {
font-size: 11px;
padding: 3px 8px;
font-family: 'Consolas', monospace;
background: var(--brand-50);
border-color: var(--brand-200);
color: var(--brand-700);
}
.variable-quick-insert .btn:hover[b-zrhrtnqk7y] {
background: var(--brand-100);
border-color: var(--brand-300);
}
/* Form switch styling */
.email-studio .form-switch .form-check-input[type="checkbox"][b-zrhrtnqk7y] {
width: 44px;
height: 24px;
cursor: pointer;
background-color: #cbd5e1;
border: none;
border-radius: 24px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
background-position: left center;
background-repeat: no-repeat;
background-size: contain;
transition: background-color 0.2s ease, background-position 0.2s ease;
}
.email-studio .form-switch .form-check-input[type="checkbox"]:checked[b-zrhrtnqk7y] {
background-color: var(--brand-600);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
background-position: right center;
}
.email-studio .form-switch .form-check-input[type="checkbox"]:focus[b-zrhrtnqk7y] {
box-shadow: 0 0 0 2px var(--brand-100);
outline: none;
}
.email-studio .form-switch .form-check-input[type="checkbox"][b-zrhrtnqk7y]::before,
.email-studio .form-switch .form-check-input[type="checkbox"][b-zrhrtnqk7y]::after {
display: none !important;
content: none !important;
}
/* Select dropdown styling */
.email-studio .form-select[b-zrhrtnqk7y] {
font-size: 13px;
border-color: var(--border-default, #e5e7eb);
padding: 8px 12px;
}
.email-studio .form-select:focus[b-zrhrtnqk7y] {
border-color: var(--brand-400);
box-shadow: 0 0 0 2px var(--brand-100);
}
/* Toast buttons */
.toast-body .btn-link[b-zrhrtnqk7y] {
font-size: 12px;
padding: 0 4px;
color: var(--brand-600);
}
.toast-body .btn-link:hover[b-zrhrtnqk7y] {
color: var(--brand-700);
}
/* ========================================
Save Version Modal - Enhanced Styling
======================================== */
.save-version-title[b-zrhrtnqk7y] {
display: flex;
align-items: center;
gap: 12px;
}
.save-title-text[b-zrhrtnqk7y] {
display: flex;
flex-direction: column;
}
.save-subtitle[b-zrhrtnqk7y] {
font-size: 0.8rem;
color: #64748B;
line-height: 1.45;
margin-top: 2px;
}
.save-version-body[b-zrhrtnqk7y] {
padding: 20px;
display: flex;
flex-direction: column;
gap: 20px;
}
/* Version Info Card */
.version-info-card[b-zrhrtnqk7y] {
background: var(--neutral-50);
border: 1px solid var(--border-default, #e5e7eb);
border-radius: var(--radius-md, 8px);
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
.version-info-row[b-zrhrtnqk7y] {
display: flex;
justify-content: space-between;
gap: 16px;
}
.version-info-item[b-zrhrtnqk7y] {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
}
.version-label[b-zrhrtnqk7y] {
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.3px;
color: var(--text-muted, #64748b);
}
.version-value[b-zrhrtnqk7y] {
font-size: 13px;
font-weight: 500;
color: var(--text-primary, #0f172a);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.version-number[b-zrhrtnqk7y] {
display: inline-flex;
align-items: center;
font-family: 'Consolas', 'Monaco', monospace;
font-size: 13px;
font-weight: 600;
color: var(--success-700);
background: var(--success-100);
padding: 2px 10px;
border-radius: 12px;
width: fit-content;
}
.version-current[b-zrhrtnqk7y] {
display: inline-flex;
align-items: center;
font-family: 'Consolas', 'Monaco', monospace;
font-size: 12px;
font-weight: 500;
color: var(--text-muted, #64748b);
background: var(--neutral-200);
padding: 2px 8px;
border-radius: 10px;
width: fit-content;
}
.version-date[b-zrhrtnqk7y] {
font-size: 12px;
color: var(--text-secondary, #475569);
}
/* Change Notes Section */
.change-notes-section[b-zrhrtnqk7y] {
display: flex;
flex-direction: column;
gap: 8px;
}
.change-notes-label[b-zrhrtnqk7y] {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 500;
color: var(--text-secondary, #475569);
}
.change-notes-label i[b-zrhrtnqk7y] {
color: var(--brand-500);
}
.optional-badge[b-zrhrtnqk7y] {
font-size: 10px;
font-weight: 500;
color: var(--text-muted, #64748b);
background: var(--neutral-100);
padding: 2px 6px;
border-radius: 4px;
margin-left: auto;
}
.change-notes-input[b-zrhrtnqk7y] {
font-size: 13px;
border: 1px solid var(--border-default, #e5e7eb);
border-radius: var(--radius-md, 8px);
padding: 12px;
resize: vertical;
min-height: 90px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.change-notes-input:focus[b-zrhrtnqk7y] {
border-color: var(--brand-400);
box-shadow: 0 0 0 3px var(--brand-100);
outline: none;
}
.change-notes-input[b-zrhrtnqk7y]::placeholder {
color: var(--text-muted, #64748b);
opacity: 0.7;
}
.change-notes-help[b-zrhrtnqk7y] {
display: flex;
align-items: flex-start;
gap: 6px;
font-size: 11px;
color: var(--text-muted, #64748b);
padding: 8px 10px;
background: var(--neutral-50);
border-radius: var(--radius-sm, 6px);
line-height: 1.4;
}
.change-notes-help i[b-zrhrtnqk7y] {
color: var(--brand-400);
margin-top: 1px;
flex-shrink: 0;
}
/* Animation for modal */
.save-version-modal[b-zrhrtnqk7y] {
animation: modalSlideIn-b-zrhrtnqk7y 0.25s ease-out;
}
@keyframes modalSlideIn-b-zrhrtnqk7y {
from {
opacity: 0;
transform: translateY(-20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* ========================================
Animations & Transitions
======================================== */
/* Keyframe Animations */
@keyframes fadeIn-b-zrhrtnqk7y {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInUp-b-zrhrtnqk7y {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInLeft-b-zrhrtnqk7y {
from {
opacity: 0;
transform: translateX(-10px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInRight-b-zrhrtnqk7y {
from {
opacity: 0;
transform: translateX(10px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInLeft-b-zrhrtnqk7y {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInRight-b-zrhrtnqk7y {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes scaleIn-b-zrhrtnqk7y {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes pulse-b-zrhrtnqk7y {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
@keyframes shimmer-b-zrhrtnqk7y {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
@keyframes spin-b-zrhrtnqk7y {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Page Load Animation */
.email-studio[b-zrhrtnqk7y] {
animation: fadeIn-b-zrhrtnqk7y 0.3s ease-out;
}
/* Header Animation */
.studio-header[b-zrhrtnqk7y] {
animation: fadeInUp-b-zrhrtnqk7y 0.3s ease-out;
animation-delay: 0.1s;
animation-fill-mode: backwards;
}
/* Panel Animations */
.panel-left[b-zrhrtnqk7y] {
animation: slideInLeft-b-zrhrtnqk7y 0.4s ease-out;
animation-delay: 0.15s;
animation-fill-mode: backwards;
}
.panel-center[b-zrhrtnqk7y] {
animation: fadeIn-b-zrhrtnqk7y 0.4s ease-out;
animation-delay: 0.2s;
animation-fill-mode: backwards;
}
.panel-right[b-zrhrtnqk7y] {
animation: slideInRight-b-zrhrtnqk7y 0.4s ease-out;
animation-delay: 0.25s;
animation-fill-mode: backwards;
}
/* Right Panel Collapse Animation */
.panel-right[b-zrhrtnqk7y] {
transition: width 0.3s ease, min-width 0.3s ease, padding 0.3s ease;
}
.panel-right.collapsed[b-zrhrtnqk7y] {
animation: none;
}
/* Template Tree Item Animations */
.tree-category[b-zrhrtnqk7y] {
animation: fadeInUp-b-zrhrtnqk7y 0.3s ease-out;
animation-fill-mode: backwards;
}
.tree-category:nth-child(1)[b-zrhrtnqk7y] { animation-delay: 0.1s; }
.tree-category:nth-child(2)[b-zrhrtnqk7y] { animation-delay: 0.15s; }
.tree-category:nth-child(3)[b-zrhrtnqk7y] { animation-delay: 0.2s; }
.tree-category:nth-child(4)[b-zrhrtnqk7y] { animation-delay: 0.25s; }
.tree-category:nth-child(5)[b-zrhrtnqk7y] { animation-delay: 0.3s; }
.tree-children[b-zrhrtnqk7y] {
animation: fadeIn-b-zrhrtnqk7y 0.2s ease-out;
}
.tree-item[b-zrhrtnqk7y] {
transition: all 0.2s ease;
}
.tree-item:hover[b-zrhrtnqk7y] {
transform: translateX(2px);
}
.tree-item.selected[b-zrhrtnqk7y] {
animation: scaleIn-b-zrhrtnqk7y 0.15s ease-out;
}
/* Editor Tab Animations */
.editor-tabs[b-zrhrtnqk7y] {
animation: fadeInUp-b-zrhrtnqk7y 0.3s ease-out;
animation-delay: 0.3s;
animation-fill-mode: backwards;
}
.editor-tab[b-zrhrtnqk7y] {
transition: all 0.2s ease;
}
.editor-tab:hover[b-zrhrtnqk7y] {
transform: translateY(-1px);
}
.editor-tab.active[b-zrhrtnqk7y] {
animation: scaleIn-b-zrhrtnqk7y 0.15s ease-out;
}
/* Editor Content Animation */
.editor-content[b-zrhrtnqk7y] {
animation: fadeIn-b-zrhrtnqk7y 0.3s ease-out;
}
.editor-form > .form-group[b-zrhrtnqk7y] {
animation: fadeInUp-b-zrhrtnqk7y 0.3s ease-out;
animation-fill-mode: backwards;
}
.editor-form > .form-group:nth-child(1)[b-zrhrtnqk7y] { animation-delay: 0.05s; }
.editor-form > .form-group:nth-child(2)[b-zrhrtnqk7y] { animation-delay: 0.1s; }
.editor-form > .form-group:nth-child(3)[b-zrhrtnqk7y] { animation-delay: 0.15s; }
.editor-form > .form-group:nth-child(4)[b-zrhrtnqk7y] { animation-delay: 0.2s; }
/* Settings Section Animations */
.settings-section[b-zrhrtnqk7y] {
animation: fadeInUp-b-zrhrtnqk7y 0.3s ease-out;
animation-fill-mode: backwards;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.settings-section:nth-child(1)[b-zrhrtnqk7y] { animation-delay: 0.1s; }
.settings-section:nth-child(2)[b-zrhrtnqk7y] { animation-delay: 0.15s; }
.settings-section:nth-child(3)[b-zrhrtnqk7y] { animation-delay: 0.2s; }
.settings-section:nth-child(4)[b-zrhrtnqk7y] { animation-delay: 0.25s; }
.settings-section:hover[b-zrhrtnqk7y] {
transform: translateY(-2px);
}
/* Settings Toggle Animation */
.settings-toggle-item[b-zrhrtnqk7y] {
transition: all 0.2s ease;
}
.settings-toggle-item:hover[b-zrhrtnqk7y] {
transform: translateX(4px);
}
/* Git History Animations */
.git-history[b-zrhrtnqk7y] {
animation: fadeIn-b-zrhrtnqk7y 0.3s ease-out;
}
.git-commit[b-zrhrtnqk7y] {
animation: fadeInLeft-b-zrhrtnqk7y 0.3s ease-out;
animation-fill-mode: backwards;
transition: all 0.2s ease;
}
.git-commit:nth-child(1)[b-zrhrtnqk7y] { animation-delay: 0.1s; }
.git-commit:nth-child(2)[b-zrhrtnqk7y] { animation-delay: 0.15s; }
.git-commit:nth-child(3)[b-zrhrtnqk7y] { animation-delay: 0.2s; }
.git-commit:nth-child(4)[b-zrhrtnqk7y] { animation-delay: 0.25s; }
.git-commit:nth-child(5)[b-zrhrtnqk7y] { animation-delay: 0.3s; }
.git-commit:hover[b-zrhrtnqk7y] {
transform: translateX(4px);
}
/* Commit Timeline Animation */
.commit-dot[b-zrhrtnqk7y] {
transition: all 0.2s ease;
}
.git-commit:hover .commit-dot[b-zrhrtnqk7y] {
transform: scale(1.2);
}
/* Loading State Animations */
.loading-state[b-zrhrtnqk7y] {
animation: fadeIn-b-zrhrtnqk7y 0.3s ease-out;
}
.loading-state .spinner-border[b-zrhrtnqk7y] {
animation: spin-b-zrhrtnqk7y 0.75s linear infinite;
}
/* Unsaved Indicator Pulse */
.unsaved-indicator[b-zrhrtnqk7y] {
animation: pulse-b-zrhrtnqk7y 2s ease-in-out infinite;
}
.unsaved-indicator i[b-zrhrtnqk7y] {
animation: pulse-b-zrhrtnqk7y 1.5s ease-in-out infinite;
}
/* Empty State Animations */
.empty-editor[b-zrhrtnqk7y] {
animation: fadeIn-b-zrhrtnqk7y 0.4s ease-out;
}
.empty-editor i[b-zrhrtnqk7y] {
animation: fadeInUp-b-zrhrtnqk7y 0.4s ease-out;
animation-delay: 0.1s;
animation-fill-mode: backwards;
}
.empty-editor h4[b-zrhrtnqk7y] {
animation: fadeInUp-b-zrhrtnqk7y 0.4s ease-out;
animation-delay: 0.2s;
animation-fill-mode: backwards;
}
.empty-editor p[b-zrhrtnqk7y] {
animation: fadeInUp-b-zrhrtnqk7y 0.4s ease-out;
animation-delay: 0.3s;
animation-fill-mode: backwards;
}
.empty-editor .btn[b-zrhrtnqk7y] {
animation: fadeInUp-b-zrhrtnqk7y 0.4s ease-out;
animation-delay: 0.4s;
animation-fill-mode: backwards;
}
/* Info Panel Content Animation */
.info-panel-content[b-zrhrtnqk7y] {
animation: fadeIn-b-zrhrtnqk7y 0.3s ease-out;
}
.info-section[b-zrhrtnqk7y] {
animation: fadeInUp-b-zrhrtnqk7y 0.25s ease-out;
animation-fill-mode: backwards;
}
.info-section:nth-child(1)[b-zrhrtnqk7y] { animation-delay: 0.1s; }
.info-section:nth-child(2)[b-zrhrtnqk7y] { animation-delay: 0.15s; }
.info-section:nth-child(3)[b-zrhrtnqk7y] { animation-delay: 0.2s; }
/* Status Badge Animations */
.status-badge[b-zrhrtnqk7y] {
transition: all 0.2s ease;
}
.status-badge:hover[b-zrhrtnqk7y] {
transform: scale(1.05);
}
/* Template Status Header Animation */
.template-status-header[b-zrhrtnqk7y] {
animation: fadeIn-b-zrhrtnqk7y 0.3s ease-out;
}
/* Variable Quick Insert Animation */
.variable-quick-insert[b-zrhrtnqk7y] {
animation: fadeIn-b-zrhrtnqk7y 0.2s ease-out;
}
.variable-quick-insert .btn[b-zrhrtnqk7y] {
animation: fadeInUp-b-zrhrtnqk7y 0.2s ease-out;
animation-fill-mode: backwards;
transition: all 0.15s ease;
}
.variable-quick-insert .btn:nth-child(1)[b-zrhrtnqk7y] { animation-delay: 0.02s; }
.variable-quick-insert .btn:nth-child(2)[b-zrhrtnqk7y] { animation-delay: 0.04s; }
.variable-quick-insert .btn:nth-child(3)[b-zrhrtnqk7y] { animation-delay: 0.06s; }
.variable-quick-insert .btn:nth-child(4)[b-zrhrtnqk7y] { animation-delay: 0.08s; }
.variable-quick-insert .btn:nth-child(5)[b-zrhrtnqk7y] { animation-delay: 0.1s; }
.variable-quick-insert .btn:hover[b-zrhrtnqk7y] {
transform: translateY(-2px);
}
/* Panel Collapse Button Animation */
.panel-collapse-btn[b-zrhrtnqk7y] {
transition: all 0.2s ease;
}
.panel-collapse-btn:hover[b-zrhrtnqk7y] {
transform: scale(1.1);
}
.panel-collapse-btn i[b-zrhrtnqk7y] {
transition: transform 0.3s ease;
}
/* Button Hover Effects Enhancement */
.email-studio .btn[b-zrhrtnqk7y] {
transition: all 0.2s ease;
}
.email-studio .btn:hover:not(:disabled)[b-zrhrtnqk7y] {
transform: translateY(-1px);
}
.email-studio .btn:active:not(:disabled)[b-zrhrtnqk7y] {
transform: translateY(1px);
}
/* Footer Animation */
.editor-footer[b-zrhrtnqk7y] {
animation: fadeInUp-b-zrhrtnqk7y 0.3s ease-out;
animation-delay: 0.35s;
animation-fill-mode: backwards;
}
/* Modal Animations (for when modals are shown) */
.modal.show .modal-dialog[b-zrhrtnqk7y] {
animation: scaleIn-b-zrhrtnqk7y 0.2s ease-out;
}
/* Preview iframe Animation */
.preview-frame[b-zrhrtnqk7y] {
transition: opacity 0.3s ease;
}
.preview-frame.loading[b-zrhrtnqk7y] {
opacity: 0.5;
}
/* System Template Notice Animation */
.system-template-notice[b-zrhrtnqk7y] {
animation: fadeIn-b-zrhrtnqk7y 0.3s ease-out;
animation-delay: 0.3s;
animation-fill-mode: backwards;
}
/* Search Result Highlight Animation */
.tree-item-name mark[b-zrhrtnqk7y] {
animation: pulse-b-zrhrtnqk7y 1s ease-in-out;
background: var(--warning-200);
padding: 0 2px;
border-radius: 2px;
}
/* Accordion Animation */
.email-studio .accordion-collapse[b-zrhrtnqk7y] {
transition: height 0.3s ease;
}
/* Variable Tag Animation */
.variable-tag[b-zrhrtnqk7y] {
transition: all 0.2s ease;
}
.variable-tag:hover[b-zrhrtnqk7y] {
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Commit Tag Animation */
.commit-tag[b-zrhrtnqk7y] {
transition: all 0.2s ease;
}
.commit-tag:hover[b-zrhrtnqk7y] {
transform: scale(1.05);
}
/* Preview Mode Button Animation */
.preview-mode-btn[b-zrhrtnqk7y] {
transition: all 0.2s ease;
}
.preview-mode-btn:hover[b-zrhrtnqk7y] {
transform: translateY(-1px);
}
.preview-mode-btn.active[b-zrhrtnqk7y] {
animation: scaleIn-b-zrhrtnqk7y 0.15s ease-out;
}
/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
.email-studio[b-zrhrtnqk7y],
.email-studio *[b-zrhrtnqk7y],
.email-studio *[b-zrhrtnqk7y]::before,
.email-studio *[b-zrhrtnqk7y]::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* /Components/Pages/Admin/HealthPage.razor.rz.scp.css */
.health-page-content[b-bupuhlrw0s] {
padding: 0;
}
/* Health Header */
.health-header[b-bupuhlrw0s] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 24px;
}
.health-title[b-bupuhlrw0s] {
font-size: 24px;
font-weight: 700;
color: #1F2937;
margin: 0 0 4px 0;
}
.health-subtitle[b-bupuhlrw0s] {
font-size: 14px;
color: #64748B;
margin: 0;
}
.btn-refresh-main[b-bupuhlrw0s] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: var(--brand-600, #004980);
color: white;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-refresh-main:hover[b-bupuhlrw0s] {
background: var(--brand-700, #003760);
}
/* Status Cards Grid */
.status-cards-grid[b-bupuhlrw0s] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 32px;
}
.status-card[b-bupuhlrw0s] {
background: white;
border: 1px solid #E2E8F0;
border-radius: 12px;
padding: 20px;
display: flex;
gap: 16px;
align-items: flex-start;
transition: all 0.2s;
}
.status-card:hover[b-bupuhlrw0s] {
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
transform: translateY(-2px);
}
.status-card-icon[b-bupuhlrw0s] {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
font-size: 24px;
flex-shrink: 0;
}
.status-operational .status-card-icon[b-bupuhlrw0s] {
background: #D1FAE5;
color: #059669;
}
.status-info .status-card-icon[b-bupuhlrw0s] {
background: #DBEAFE;
color: #2563EB;
}
.status-warning .status-card-icon[b-bupuhlrw0s] {
background: #FEF3C7;
color: #D97706;
}
.status-time .status-card-icon[b-bupuhlrw0s] {
background: #F1F5F9;
color: #64748B;
}
.status-card-content[b-bupuhlrw0s] {
flex: 1;
}
.status-card-label[b-bupuhlrw0s] {
font-size: 13px;
color: #64748B;
font-weight: 500;
margin-bottom: 4px;
}
.status-card-value[b-bupuhlrw0s] {
font-size: 28px;
font-weight: 700;
color: #1F2937;
line-height: 1;
margin-bottom: 4px;
}
.status-card-details[b-bupuhlrw0s] {
font-size: 12px;
color: #94A3B8;
}
/* Health Section */
.health-section[b-bupuhlrw0s] {
background: white;
border: 1px solid #E2E8F0;
border-radius: 12px;
padding: 24px;
margin-bottom: 24px;
}
.section-header-simple[b-bupuhlrw0s] {
margin-bottom: 24px;
}
.section-title[b-bupuhlrw0s] {
font-size: 18px;
font-weight: 700;
color: #1F2937;
margin: 0 0 4px 0;
display: flex;
align-items: center;
gap: 10px;
}
.section-title i[b-bupuhlrw0s] {
font-size: 20px;
color: var(--brand-500);
}
.section-subtitle[b-bupuhlrw0s] {
font-size: 13px;
color: #64748B;
margin: 0;
}
/* Health Metrics List */
.health-metrics-list[b-bupuhlrw0s] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
gap: 16px;
}
.health-metric-item[b-bupuhlrw0s] {
display: flex;
align-items: center;
gap: 16px;
padding: 16px;
background: #F8FAFC;
border: 1px solid #E2E8F0;
border-radius: 8px;
transition: all 0.2s;
}
.health-metric-item:hover[b-bupuhlrw0s] {
background: white;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
.metric-icon[b-bupuhlrw0s] {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 18px;
flex-shrink: 0;
}
.metric-icon.healthy[b-bupuhlrw0s] {
background: #D1FAE5;
color: #059669;
}
.metric-icon.warning[b-bupuhlrw0s] {
background: #FEF3C7;
color: #D97706;
}
.metric-icon.error[b-bupuhlrw0s] {
background: #FEE2E2;
color: var(--error-600);
}
.metric-info[b-bupuhlrw0s] {
flex: 1;
}
.metric-name[b-bupuhlrw0s] {
font-size: 15px;
font-weight: 600;
color: #1F2937;
margin-bottom: 2px;
}
.metric-description[b-bupuhlrw0s] {
font-size: 12px;
color: #64748B;
}
.metric-value-display[b-bupuhlrw0s] {
display: flex;
align-items: center;
gap: 12px;
}
.metric-current[b-bupuhlrw0s] {
font-size: 16px;
font-weight: 600;
color: #1F2937;
}
.metric-badge[b-bupuhlrw0s] {
padding: 4px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
.metric-badge.healthy[b-bupuhlrw0s] {
background: #D1FAE5;
color: #047857;
}
.metric-badge.warning[b-bupuhlrw0s] {
background: #FEF3C7;
color: #B45309;
}
/* Background Jobs List */
.background-jobs-list[b-bupuhlrw0s] {
display: flex;
flex-direction: column;
gap: 16px;
}
.job-item[b-bupuhlrw0s] {
display: flex;
align-items: center;
gap: 16px;
padding: 16px;
background: #F8FAFC;
border: 1px solid #E2E8F0;
border-radius: 8px;
border-left: 4px solid;
}
.job-running[b-bupuhlrw0s] {
border-left-color: #2563EB;
}
.job-completed[b-bupuhlrw0s] {
border-left-color: #10B981;
}
.job-pending[b-bupuhlrw0s] {
border-left-color: #F59E0B;
}
.job-failed[b-bupuhlrw0s] {
border-left-color: #EF4444;
}
.job-icon[b-bupuhlrw0s] {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 18px;
flex-shrink: 0;
}
.job-running .job-icon[b-bupuhlrw0s] {
background: #DBEAFE;
color: #2563EB;
}
.job-completed .job-icon[b-bupuhlrw0s] {
background: #D1FAE5;
color: #059669;
}
.job-pending .job-icon[b-bupuhlrw0s] {
background: #FEF3C7;
color: #D97706;
}
.job-failed .job-icon[b-bupuhlrw0s] {
background: #FEE2E2;
color: var(--error-600);
}
.job-content[b-bupuhlrw0s] {
flex: 1;
}
.job-name[b-bupuhlrw0s] {
font-size: 15px;
font-weight: 600;
color: #1F2937;
margin-bottom: 4px;
}
.job-time[b-bupuhlrw0s] {
font-size: 12px;
color: #64748B;
}
.job-error[b-bupuhlrw0s] {
font-size: 12px;
color: var(--error-600);
margin-top: 4px;
}
.job-status[b-bupuhlrw0s] {
display: flex;
align-items: center;
gap: 12px;
}
.job-progress[b-bupuhlrw0s] {
display: flex;
align-items: center;
gap: 8px;
}
.progress-bar-mini[b-bupuhlrw0s] {
width: 100px;
height: 8px;
background: #E2E8F0;
border-radius: 4px;
overflow: hidden;
}
.progress-fill-mini[b-bupuhlrw0s] {
height: 100%;
background: linear-gradient(90deg, #2563EB 0%, #60A5FA 100%);
border-radius: 4px;
transition: width 0.3s;
}
.progress-text[b-bupuhlrw0s] {
font-size: 13px;
font-weight: 600;
color: #1F2937;
}
.job-badge[b-bupuhlrw0s] {
padding: 4px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
}
.job-badge.running[b-bupuhlrw0s] {
background: #DBEAFE;
color: #1E40AF;
}
.job-badge.completed[b-bupuhlrw0s] {
background: #D1FAE5;
color: #047857;
}
.job-badge.pending[b-bupuhlrw0s] {
background: #FEF3C7;
color: #B45309;
}
.job-badge.failed[b-bupuhlrw0s] {
background: #FEE2E2;
color: #B91C1C;
}
.btn-retry[b-bupuhlrw0s] {
padding: 6px 16px;
background: white;
border: 1px solid #DC2626;
color: var(--error-600);
border-radius: 6px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.btn-retry:hover[b-bupuhlrw0s] {
background: var(--error-600);
color: white;
}
/* System Alerts List */
.system-alerts-list[b-bupuhlrw0s] {
display: flex;
flex-direction: column;
gap: 16px;
}
.alert-item[b-bupuhlrw0s] {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 16px;
background: #F8FAFC;
border: 1px solid #E2E8F0;
border-radius: 8px;
border-left: 4px solid;
}
.alert-info[b-bupuhlrw0s] {
border-left-color: #3B82F6;
}
.alert-warning[b-bupuhlrw0s] {
border-left-color: #F59E0B;
}
.alert-error[b-bupuhlrw0s] {
border-left-color: #EF4444;
}
.alert-icon[b-bupuhlrw0s] {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 16px;
flex-shrink: 0;
}
.alert-info .alert-icon[b-bupuhlrw0s] {
background: #DBEAFE;
color: #2563EB;
}
.alert-warning .alert-icon[b-bupuhlrw0s] {
background: #FEF3C7;
color: #D97706;
}
.alert-error .alert-icon[b-bupuhlrw0s] {
background: #FEE2E2;
color: var(--error-600);
}
.alert-content[b-bupuhlrw0s] {
flex: 1;
}
.alert-title[b-bupuhlrw0s] {
font-size: 15px;
font-weight: 600;
color: #1F2937;
margin-bottom: 4px;
}
.alert-message[b-bupuhlrw0s] {
font-size: 13px;
color: #64748B;
margin-bottom: 6px;
line-height: 1.5;
}
.alert-time[b-bupuhlrw0s] {
font-size: 12px;
color: #94A3B8;
}
.alert-actions[b-bupuhlrw0s] {
display: flex;
align-items: center;
}
.btn-alert-action[b-bupuhlrw0s] {
padding: 6px 16px;
background: white;
border: 1px solid var(--brand-500);
color: var(--brand-500);
border-radius: 6px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.btn-alert-action:hover[b-bupuhlrw0s] {
background: var(--brand-500);
color: white;
}
.btn-alert-action.error[b-bupuhlrw0s] {
border-color: var(--error-600);
color: var(--error-600);
}
.btn-alert-action.error:hover[b-bupuhlrw0s] {
background: var(--error-600);
color: white;
}
.btn-alert-action.error:hover[b-bupuhlrw0s] {
background: var(--error-600);
color: white;
}
/* Original Health Tab Styles */
/* Section Header */
.section-header[b-bupuhlrw0s] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.view-all-link[b-bupuhlrw0s] {
color: var(--brand-500);
text-decoration: none;
font-weight: 600;
font-size: 14px;
transition: color 0.2s;
}
.view-all-link:hover[b-bupuhlrw0s] {
color: var(--brand-400);
text-decoration: underline;
}
/* Health Metrics Grid (Original) */
.health-metrics-grid[b-bupuhlrw0s] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
}
/* Health Checks Grid */
.health-checks-grid[b-bupuhlrw0s] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
}
/* Infrastructure Grid */
.infrastructure-grid[b-bupuhlrw0s] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
}
.metric-box[b-bupuhlrw0s] {
background: linear-gradient(135deg, rgba(227, 241, 251, 0.5) 0%, rgba(240, 247, 252, 0.6) 100%);
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 12px;
padding: 20px;
transition: all 0.3s;
}
.metric-box:hover[b-bupuhlrw0s] {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
border-color: rgba(15, 23, 42, 0.15);
}
.metric-box-header[b-bupuhlrw0s] {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
color: #475569;
font-size: 14px;
font-weight: 600;
}
.metric-box-header i[b-bupuhlrw0s] {
font-size: 18px;
color: var(--brand-500);
}
.metric-box-value[b-bupuhlrw0s] {
font-size: 32px;
font-weight: 700;
color: #1F2937;
margin-bottom: 12px;
line-height: 1;
}
.metric-box-footer[b-bupuhlrw0s] {
font-size: 12px;
color: #64748B;
margin-top: 8px;
}
/* Progress Bar */
.progress-bar[b-bupuhlrw0s] {
width: 100%;
height: 8px;
background: #E2E8F0;
border-radius: 4px;
overflow: hidden;
}
.progress-fill[b-bupuhlrw0s] {
height: 100%;
border-radius: 4px;
transition: width 0.3s ease;
}
.progress-fill.healthy[b-bupuhlrw0s] {
background: linear-gradient(90deg, #10B981 0%, #34D399 100%);
}
.progress-fill.warning[b-bupuhlrw0s] {
background: linear-gradient(90deg, #F59E0B 0%, #FBBF24 100%);
}
.progress-fill.error[b-bupuhlrw0s] {
background: linear-gradient(90deg, #EF4444 0%, #F87171 100%);
}
/* Health Events List */
.health-events-list[b-bupuhlrw0s] {
display: flex;
flex-direction: column;
gap: 12px;
}
.health-event[b-bupuhlrw0s] {
display: flex;
align-items: center;
gap: 16px;
padding: 16px;
background: #F8FAFC;
border: 1px solid #E2E8F0;
border-radius: 8px;
border-left: 4px solid;
transition: all 0.2s;
}
.health-event:hover[b-bupuhlrw0s] {
background: white;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
.event-indicator[b-bupuhlrw0s] {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 16px;
flex-shrink: 0;
}
.event-content[b-bupuhlrw0s] {
flex: 1;
}
.event-title[b-bupuhlrw0s] {
font-size: 14px;
font-weight: 600;
color: #1F2937;
margin-bottom: 4px;
}
.event-time[b-bupuhlrw0s] {
font-size: 12px;
color: #64748B;
}
/* Event Status Variants */
.health-event.success[b-bupuhlrw0s] {
border-left-color: #10B981;
}
.health-event.success .event-indicator[b-bupuhlrw0s] {
background: #D1FAE5;
color: #059669;
}
.health-event.info[b-bupuhlrw0s] {
border-left-color: #3B82F6;
}
.health-event.info .event-indicator[b-bupuhlrw0s] {
background: #DBEAFE;
color: #2563EB;
}
.health-event.warning[b-bupuhlrw0s] {
border-left-color: #F59E0B;
}
.health-event.warning .event-indicator[b-bupuhlrw0s] {
background: #FEF3C7;
color: #D97706;
}
.health-event.error[b-bupuhlrw0s] {
border-left-color: #EF4444;
}
.health-event.error .event-indicator[b-bupuhlrw0s] {
background: #FEE2E2;
color: var(--error-600);
}
/* Responsive Design */
@media (max-width: 768px) {
.status-cards-grid[b-bupuhlrw0s] {
grid-template-columns: 1fr;
}
.health-metrics-list[b-bupuhlrw0s] {
grid-template-columns: 1fr;
}
.health-metrics-grid[b-bupuhlrw0s] {
grid-template-columns: 1fr;
}
.health-checks-grid[b-bupuhlrw0s] {
grid-template-columns: 1fr;
}
.infrastructure-grid[b-bupuhlrw0s] {
grid-template-columns: 1fr;
}
.health-header[b-bupuhlrw0s] {
flex-direction: column;
gap: 16px;
}
.btn-refresh-main[b-bupuhlrw0s] {
width: 100%;
justify-content: center;
}
}
/* Health Section */
.health-section[b-bupuhlrw0s] {
background: white;
border: 1px solid #E2E8F0;
border-radius: 12px;
padding: 24px;
margin-bottom: 24px;
}
.section-header[b-bupuhlrw0s] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.section-title[b-bupuhlrw0s] {
font-size: 18px;
font-weight: 700;
color: #1F2937;
margin: 0;
display: flex;
align-items: center;
gap: 10px;
}
.section-title i[b-bupuhlrw0s] {
font-size: 20px;
color: var(--brand-500);
}
.btn-refresh[b-bupuhlrw0s] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: var(--brand-600, #004980);
color: white;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-refresh:hover[b-bupuhlrw0s] {
background: var(--brand-700, #003760);
}
.btn-refresh i[b-bupuhlrw0s] {
font-size: 16px;
}
.view-all-link[b-bupuhlrw0s] {
color: var(--brand-500);
text-decoration: none;
font-weight: 600;
font-size: 14px;
transition: color 0.2s;
}
.view-all-link:hover[b-bupuhlrw0s] {
color: var(--brand-400);
text-decoration: underline;
}
/* Health Checks Grid */
.health-checks-grid[b-bupuhlrw0s] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
}
/* Infrastructure Grid */
.infrastructure-grid[b-bupuhlrw0s] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
}
.metric-box[b-bupuhlrw0s] {
background: linear-gradient(135deg, rgba(227, 241, 251, 0.5) 0%, rgba(240, 247, 252, 0.6) 100%);
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 12px;
padding: 20px;
transition: all 0.3s;
}
.metric-box:hover[b-bupuhlrw0s] {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
border-color: rgba(15, 23, 42, 0.15);
}
.metric-box-header[b-bupuhlrw0s] {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
color: #475569;
font-size: 14px;
font-weight: 600;
}
.metric-box-header i[b-bupuhlrw0s] {
font-size: 18px;
color: var(--brand-500);
}
.metric-box-value[b-bupuhlrw0s] {
font-size: 32px;
font-weight: 700;
color: #1F2937;
margin-bottom: 12px;
line-height: 1;
}
.metric-box-footer[b-bupuhlrw0s] {
font-size: 12px;
color: #64748B;
margin-top: 8px;
}
/* Progress Bar */
.progress-bar[b-bupuhlrw0s] {
width: 100%;
height: 8px;
background: #E2E8F0;
border-radius: 4px;
overflow: hidden;
}
.progress-fill[b-bupuhlrw0s] {
height: 100%;
border-radius: 4px;
transition: width 0.3s ease;
}
.progress-fill.healthy[b-bupuhlrw0s] {
background: linear-gradient(90deg, #10B981 0%, #34D399 100%);
}
.progress-fill.warning[b-bupuhlrw0s] {
background: linear-gradient(90deg, #F59E0B 0%, #FBBF24 100%);
}
.progress-fill.error[b-bupuhlrw0s] {
background: linear-gradient(90deg, #EF4444 0%, #F87171 100%);
}
/* Health Events List */
.health-events-list[b-bupuhlrw0s] {
display: flex;
flex-direction: column;
gap: 12px;
}
.health-event[b-bupuhlrw0s] {
display: flex;
align-items: center;
gap: 16px;
padding: 16px;
background: #F8FAFC;
border: 1px solid #E2E8F0;
border-radius: 8px;
border-left: 4px solid;
transition: all 0.2s;
}
.health-event:hover[b-bupuhlrw0s] {
background: white;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
.event-indicator[b-bupuhlrw0s] {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 16px;
flex-shrink: 0;
}
.event-content[b-bupuhlrw0s] {
flex: 1;
}
.event-title[b-bupuhlrw0s] {
font-size: 14px;
font-weight: 600;
color: #1F2937;
margin-bottom: 4px;
}
.event-time[b-bupuhlrw0s] {
font-size: 12px;
color: #64748B;
}
/* Event Status Variants */
.health-event.success[b-bupuhlrw0s] {
border-left-color: #10B981;
}
.health-event.success .event-indicator[b-bupuhlrw0s] {
background: #D1FAE5;
color: #059669;
}
.health-event.info[b-bupuhlrw0s] {
border-left-color: #3B82F6;
}
.health-event.info .event-indicator[b-bupuhlrw0s] {
background: #DBEAFE;
color: #2563EB;
}
.health-event.warning[b-bupuhlrw0s] {
border-left-color: #F59E0B;
}
.health-event.warning .event-indicator[b-bupuhlrw0s] {
background: #FEF3C7;
color: #D97706;
}
.health-event.error[b-bupuhlrw0s] {
border-left-color: #EF4444;
}
.health-event.error .event-indicator[b-bupuhlrw0s] {
background: #FEE2E2;
color: var(--error-600);
}
/* Responsive Design */
@media (max-width: 768px) {
.health-metrics-grid[b-bupuhlrw0s],
.health-checks-grid[b-bupuhlrw0s],
.infrastructure-grid[b-bupuhlrw0s] {
grid-template-columns: 1fr;
}
.section-header[b-bupuhlrw0s] {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.btn-refresh[b-bupuhlrw0s] {
width: 100%;
justify-content: center;
}
}
/* /Components/Pages/Admin/HelpAnalyticsDashboard.razor.rz.scp.css */
/* Help Analytics Dashboard Styles */
.help-analytics-page[b-8flq125gma] {
padding: 1.5rem;
background: #f8fafc;
min-height: 100vh;
}
/* Page Header */
.page-header[b-8flq125gma] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.header-content h1[b-8flq125gma] {
font-size: 1.75rem;
font-weight: 700;
color: #1e293b;
margin: 0;
display: flex;
align-items: center;
gap: 0.75rem;
}
.header-content h1 i[b-8flq125gma] {
color: #3b82f6;
}
.header-subtitle[b-8flq125gma] {
color: #64748b;
margin: 0.5rem 0 0 0;
font-size: 0.875rem;
}
.header-actions[b-8flq125gma] {
display: flex;
align-items: center;
gap: 1rem;
}
.date-range-selector[b-8flq125gma] {
display: flex;
background: white;
border-radius: 8px;
border: 1px solid #e2e8f0;
overflow: hidden;
}
.date-btn[b-8flq125gma] {
padding: 0.5rem 1rem;
border: none;
background: white;
color: #64748b;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
border-right: 1px solid #e2e8f0;
}
.date-btn:last-child[b-8flq125gma] {
border-right: none;
}
.date-btn:hover[b-8flq125gma] {
background: #f1f5f9;
}
.date-btn.active[b-8flq125gma] {
background: #3b82f6;
color: white;
}
.btn-refresh[b-8flq125gma] {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: white;
border: 1px solid #e2e8f0;
border-radius: 8px;
color: #475569;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.btn-refresh:hover[b-8flq125gma] {
background: #f1f5f9;
}
.btn-refresh:disabled[b-8flq125gma] {
opacity: 0.6;
cursor: not-allowed;
}
/* Loading */
.loading-container[b-8flq125gma] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4rem;
gap: 1rem;
color: #64748b;
}
/* Overview Cards */
.overview-cards[b-8flq125gma] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.overview-card[b-8flq125gma] {
background: white;
border-radius: 12px;
padding: 1.25rem;
display: flex;
align-items: center;
gap: 1rem;
border: 1px solid #e2e8f0;
transition: transform 0.2s, box-shadow 0.2s;
}
.overview-card:hover[b-8flq125gma] {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.card-icon[b-8flq125gma] {
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: white;
}
.overview-card.views .card-icon[b-8flq125gma] { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.overview-card.users .card-icon[b-8flq125gma] { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.overview-card.helpful .card-icon[b-8flq125gma] { background: linear-gradient(135deg, #10b981, #059669); }
.overview-card.media .card-icon[b-8flq125gma] { background: linear-gradient(135deg, #f59e0b, #d97706); }
.overview-card.searches .card-icon[b-8flq125gma] { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.overview-card.failed .card-icon[b-8flq125gma] { background: linear-gradient(135deg, var(--error-500), var(--error-600)); }
.card-content[b-8flq125gma] {
display: flex;
flex-direction: column;
}
.card-value[b-8flq125gma] {
font-size: 1.5rem;
font-weight: 700;
color: #1e293b;
}
.card-label[b-8flq125gma] {
font-size: 0.75rem;
color: #64748b;
font-weight: 500;
}
/* Analytics Grid */
.analytics-grid[b-8flq125gma] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 1.5rem;
}
.analytics-card[b-8flq125gma] {
background: white;
border-radius: 12px;
border: 1px solid #e2e8f0;
overflow: hidden;
}
.card-header[b-8flq125gma] {
padding: 1rem 1.25rem;
border-bottom: 1px solid #e2e8f0;
background: #f8fafc;
}
.card-header.warning[b-8flq125gma] {
background: #fef3c7;
}
.card-header h2[b-8flq125gma] {
font-size: 1rem;
font-weight: 600;
color: #1e293b;
margin: 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
.card-header h2 i[b-8flq125gma] {
color: #3b82f6;
}
.card-header.warning h2 i[b-8flq125gma] {
color: #d97706;
}
.card-body[b-8flq125gma] {
padding: 1.25rem;
}
/* Analytics Table */
.analytics-table[b-8flq125gma] {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.analytics-table th[b-8flq125gma] {
text-align: left;
padding: 0.75rem;
color: #64748b;
font-weight: 600;
border-bottom: 1px solid #e2e8f0;
}
.analytics-table td[b-8flq125gma] {
padding: 0.75rem;
color: #374151;
border-bottom: 1px solid #f1f5f9;
}
.analytics-table tr:last-child td[b-8flq125gma] {
border-bottom: none;
}
.clickable-row[b-8flq125gma] {
cursor: pointer;
transition: background 0.2s;
}
.clickable-row:hover[b-8flq125gma] {
background: #f8fafc;
}
.topic-title[b-8flq125gma] {
font-weight: 500;
color: #1e293b;
}
.search-query[b-8flq125gma] {
font-family: monospace;
color: #475569;
font-size: 0.8125rem;
}
.media-url[b-8flq125gma] {
font-family: monospace;
font-size: 0.75rem;
color: #64748b;
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
}
.helpful-badge[b-8flq125gma] {
display: inline-block;
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
}
.helpful-badge.high[b-8flq125gma] {
background: #d1fae5;
color: #065f46;
}
.helpful-badge.medium[b-8flq125gma] {
background: #fef3c7;
color: #92400e;
}
.helpful-badge.low[b-8flq125gma] {
background: #fee2e2;
color: #991b1b;
}
.zero-results[b-8flq125gma] {
color: var(--error-600);
display: flex;
align-items: center;
gap: 0.25rem;
}
/* Empty State */
.empty-state[b-8flq125gma] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
color: #94a3b8;
gap: 0.5rem;
}
.empty-state i[b-8flq125gma] {
font-size: 2rem;
}
.empty-state.success[b-8flq125gma] {
color: #10b981;
}
/* Failed Searches List */
.failed-searches-list[b-8flq125gma] {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.failed-search-item[b-8flq125gma] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem;
background: #fef2f2;
border-radius: 6px;
border-left: 3px solid #ef4444;
}
.failed-search-item .search-query[b-8flq125gma] {
color: #991b1b;
}
.failed-search-item .search-count[b-8flq125gma] {
font-size: 0.75rem;
color: var(--error-600);
}
/* Action Hint */
.action-hint[b-8flq125gma] {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem;
background: #eff6ff;
border-radius: 6px;
margin-top: 1rem;
font-size: 0.75rem;
color: #1d4ed8;
}
.action-hint i[b-8flq125gma] {
color: #3b82f6;
}
.action-hint.warning[b-8flq125gma] {
background: #fef3c7;
color: #92400e;
}
.action-hint.warning i[b-8flq125gma] {
color: #d97706;
}
/* Feedback List */
.feedback-list[b-8flq125gma] {
display: flex;
flex-direction: column;
gap: 1rem;
}
.feedback-item[b-8flq125gma] {
padding: 1rem;
background: #f8fafc;
border-radius: 8px;
border: 1px solid #e2e8f0;
}
.feedback-header[b-8flq125gma] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.75rem;
}
.feedback-topic[b-8flq125gma] {
font-weight: 600;
color: #1e293b;
}
.feedback-stats[b-8flq125gma] {
display: flex;
align-items: center;
gap: 0.5rem;
}
.feedback-count[b-8flq125gma] {
font-size: 0.75rem;
color: #64748b;
}
.feedback-comments[b-8flq125gma] {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.comment-item[b-8flq125gma] {
display: flex;
gap: 0.5rem;
padding: 0.5rem;
background: white;
border-radius: 4px;
font-size: 0.8125rem;
color: #475569;
font-style: italic;
}
.comment-item i[b-8flq125gma] {
color: #94a3b8;
flex-shrink: 0;
}
/* Stale Topics List */
.stale-topics-list[b-8flq125gma] {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.stale-topic-item[b-8flq125gma] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem;
background: #f8fafc;
border-radius: 6px;
cursor: pointer;
transition: background 0.2s;
}
.stale-topic-item:hover[b-8flq125gma] {
background: #f1f5f9;
}
.stale-topic-info[b-8flq125gma] {
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.stale-topic-title[b-8flq125gma] {
font-weight: 500;
color: #1e293b;
}
.stale-topic-category[b-8flq125gma] {
font-size: 0.75rem;
color: #64748b;
}
.stale-topic-date[b-8flq125gma] {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
color: #94a3b8;
}
.version-badge[b-8flq125gma] {
background: #e0f2fe;
color: #0369a1;
padding: 0.125rem 0.5rem;
border-radius: 4px;
font-weight: 500;
}
/* Responsive */
@media (max-width: 768px) {
.help-analytics-page[b-8flq125gma] {
padding: 1rem;
}
.page-header[b-8flq125gma] {
flex-direction: column;
}
.header-actions[b-8flq125gma] {
width: 100%;
flex-direction: column;
align-items: stretch;
}
.date-range-selector[b-8flq125gma] {
width: 100%;
}
.date-btn[b-8flq125gma] {
flex: 1;
}
.btn-refresh[b-8flq125gma] {
justify-content: center;
}
.overview-cards[b-8flq125gma] {
grid-template-columns: repeat(2, 1fr);
}
.analytics-grid[b-8flq125gma] {
grid-template-columns: 1fr;
}
.analytics-table[b-8flq125gma] {
font-size: 0.8125rem;
}
.analytics-table th[b-8flq125gma],
.analytics-table td[b-8flq125gma] {
padding: 0.5rem;
}
}
/* /Components/Pages/Admin/IntegrationSettingsPage.razor.rz.scp.css */
/* Header */
.content-header[b-fp7f4zamnj] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.content-title[b-fp7f4zamnj] {
font-size: 1.5rem;
font-weight: 700;
color: #1a1a2e;
margin: 0;
}
.content-subtitle[b-fp7f4zamnj] {
font-size: 0.8rem;
color: #94A3B8;
margin: 2px 0 0;
}
.btn-header-action[b-fp7f4zamnj] {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid #E2E8F0;
background: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #64748B;
transition: all 0.2s;
}
.btn-header-action:hover[b-fp7f4zamnj] { background: #F1F5F9; color: #334155; }
.btn-header-action:disabled[b-fp7f4zamnj] { opacity: 0.5; cursor: not-allowed; }
/* Loading / Empty */
.loading-state[b-fp7f4zamnj] {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 80px 20px;
color: #64748B;
font-size: 0.875rem;
}
.empty-state[b-fp7f4zamnj] {
text-align: center;
padding: 80px 20px;
color: #94A3B8;
}
.empty-state i[b-fp7f4zamnj] { font-size: 3rem; margin-bottom: 16px; display: block; }
.empty-state h3[b-fp7f4zamnj] { font-size: 1.125rem; font-weight: 600; color: #475569; margin-bottom: 8px; }
.empty-state p[b-fp7f4zamnj] { font-size: 0.875rem; max-width: 400px; margin: 0 auto; }
/* Layout: sidebar nav + detail panel */
.integrations-layout[b-fp7f4zamnj] {
display: grid;
grid-template-columns: 260px 1fr;
gap: 0;
border: 1px solid #E2E8F0;
border-radius: 12px;
background: white;
overflow: hidden;
min-height: 580px;
}
/* Left nav */
.integration-nav[b-fp7f4zamnj] {
background: #F8FAFC;
border-right: 1px solid #E2E8F0;
padding: 8px;
display: flex;
flex-direction: column;
gap: 4px;
}
.integration-nav-item[b-fp7f4zamnj] {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 8px;
border: none;
background: transparent;
cursor: pointer;
text-align: left;
font-family: inherit;
color: inherit;
transition: all 0.15s;
width: 100%;
}
.integration-nav-item:hover[b-fp7f4zamnj] {
background: #EFF6FF;
}
.integration-nav-item.active[b-fp7f4zamnj] {
background: white;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
border: 1px solid #E2E8F0;
}
.nav-item-icon[b-fp7f4zamnj] {
width: 34px;
height: 34px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.95rem;
flex-shrink: 0;
}
.nav-item-info[b-fp7f4zamnj] {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
.nav-item-name[b-fp7f4zamnj] {
font-size: 0.82rem;
font-weight: 600;
color: #1E293B;
line-height: 1.3;
}
.nav-item-type[b-fp7f4zamnj] {
font-size: 0.65rem;
color: #94A3B8;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.nav-item-status[b-fp7f4zamnj] {
flex-shrink: 0;
}
.status-dot[b-fp7f4zamnj] {
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
}
.status-dot.active[b-fp7f4zamnj] {
background: #10B981;
box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}
.status-dot.inactive[b-fp7f4zamnj] {
background: #CBD5E1;
}
/* Icon color variants */
.icon-verification[b-fp7f4zamnj] { background: #ECFDF5; color: #059669; }
.icon-document[b-fp7f4zamnj] { background: #EFF6FF; color: #2563EB; }
.icon-ai[b-fp7f4zamnj] { background: #F5F3FF; color: #7C3AED; }
.icon-payment[b-fp7f4zamnj] { background: #F0FDFA; color: #0D9488; }
.icon-storage[b-fp7f4zamnj] { background: #FFF7ED; color: #EA580C; }
.icon-email[b-fp7f4zamnj] { background: #FDF2F8; color: #DB2777; }
/* Right detail panel */
.integration-detail[b-fp7f4zamnj] {
display: flex;
flex-direction: column;
}
.detail-placeholder[b-fp7f4zamnj] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #CBD5E1;
gap: 8px;
}
.detail-placeholder i[b-fp7f4zamnj] { font-size: 2rem; }
.detail-placeholder p[b-fp7f4zamnj] { font-size: 0.85rem; margin: 0; }
/* Detail header */
.detail-header[b-fp7f4zamnj] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
border-bottom: 1px solid #F1F5F9;
}
.detail-header-left[b-fp7f4zamnj] {
display: flex;
align-items: center;
gap: 14px;
}
.detail-icon[b-fp7f4zamnj] {
width: 44px;
height: 44px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
}
.detail-title[b-fp7f4zamnj] {
font-size: 1.15rem;
font-weight: 700;
color: #1E293B;
margin: 0;
line-height: 1.2;
}
.detail-meta[b-fp7f4zamnj] {
display: flex;
align-items: center;
gap: 8px;
margin-top: 4px;
}
.type-pill[b-fp7f4zamnj] {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 10px;
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.pill-verification[b-fp7f4zamnj] { background: #ECFDF5; color: #059669; border: 1px solid #A7F3D0; }
.pill-document[b-fp7f4zamnj] { background: #EFF6FF; color: #2563EB; border: 1px solid #BFDBFE; }
.pill-ai[b-fp7f4zamnj] { background: #F5F3FF; color: #7C3AED; border: 1px solid #DDD6FE; }
.pill-payment[b-fp7f4zamnj] { background: #F0FDFA; color: #0D9488; border: 1px solid #99F6E4; }
.pill-storage[b-fp7f4zamnj] { background: #FFF7ED; color: #EA580C; border: 1px solid #FDBA74; }
.pill-email[b-fp7f4zamnj] { background: #FDF2F8; color: #DB2777; border: 1px solid #F9A8D4; }
.test-indicator[b-fp7f4zamnj] {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.7rem;
font-weight: 500;
}
.test-pass[b-fp7f4zamnj] { color: #059669; }
.test-fail[b-fp7f4zamnj] { color: #DC2626; }
.detail-header-right[b-fp7f4zamnj] {
flex-shrink: 0;
}
.toggle-group[b-fp7f4zamnj] {
display: flex;
align-items: center;
gap: 8px;
}
.toggle-label[b-fp7f4zamnj] {
font-size: 0.75rem;
font-weight: 500;
color: #64748B;
}
.form-check-input:checked[b-fp7f4zamnj] {
background-color: #10B981;
border-color: #10B981;
}
/* Detail body */
.detail-body[b-fp7f4zamnj] {
flex: 1;
padding: 20px 24px;
overflow-y: auto;
transition: opacity 0.2s;
}
.body-disabled[b-fp7f4zamnj] {
opacity: 0.5;
pointer-events: none;
}
/* Config sections */
.config-section[b-fp7f4zamnj] {
margin-bottom: 24px;
}
.config-section:last-child[b-fp7f4zamnj] {
margin-bottom: 0;
}
.section-title[b-fp7f4zamnj] {
font-size: 0.72rem;
font-weight: 700;
color: #94A3B8;
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0 0 12px;
display: flex;
align-items: center;
gap: 6px;
}
.section-title i[b-fp7f4zamnj] {
font-size: 0.8rem;
}
/* Environment selector */
.env-selector[b-fp7f4zamnj] {
display: flex;
gap: 6px;
}
.env-btn[b-fp7f4zamnj] {
display: flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
border: 1px solid #E2E8F0;
border-radius: 8px;
background: white;
font-size: 0.78rem;
font-weight: 500;
color: #64748B;
cursor: pointer;
transition: all 0.15s;
font-family: inherit;
}
.env-btn:hover[b-fp7f4zamnj] {
background: #F8FAFC;
border-color: #CBD5E1;
}
.env-btn.env-active[b-fp7f4zamnj] {
background: #EFF6FF;
border-color: var(--brand-500, #0D6785);
color: var(--brand-500, #0D6785);
box-shadow: 0 0 0 1px var(--brand-500, #0D6785);
}
.env-btn i[b-fp7f4zamnj] {
font-size: 0.85rem;
}
/* Config fields grid */
.config-fields[b-fp7f4zamnj] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 20px;
}
.field-row[b-fp7f4zamnj] {
display: flex;
flex-direction: column;
gap: 4px;
}
.field-row.full-width[b-fp7f4zamnj] {
grid-column: 1 / -1;
}
.field-label[b-fp7f4zamnj] {
font-size: 0.72rem;
font-weight: 600;
color: #475569;
text-transform: uppercase;
letter-spacing: 0.3px;
}
/* Secret field */
.secret-input[b-fp7f4zamnj] {
position: relative;
}
/* Secret inputs are display-only — this page has no write path to Secrets Manager, so they
render read-only and empty, carrying only the field label and a placeholder. Styled to read
as non-editable at a glance rather than as an editable field the admin forgot to fill in.
The old .btn-eye reveal button and the padding-right that reserved room for it are gone: it
revealed the (always-blank) DB value and so contradicted the Credential status block. */
.secret-input input[readonly][b-fp7f4zamnj] {
background-color: #F1F5F9;
color: #64748B;
cursor: default;
}
.secret-input input[readonly][b-fp7f4zamnj]::placeholder {
color: #94A3B8;
font-style: italic;
}
.pem-textarea[b-fp7f4zamnj] {
font-family: 'Courier New', monospace;
font-size: 0.72rem;
line-height: 1.4;
resize: vertical;
min-height: 120px;
}
/* Detail footer */
.detail-footer[b-fp7f4zamnj] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 24px;
border-top: 1px solid #F1F5F9;
background: #FAFBFC;
}
.footer-left[b-fp7f4zamnj] {
display: flex;
align-items: center;
gap: 12px;
/* Takes the row's spare width (and is allowed to shrink) so a wrapped
multi-line test result stays inside the footer instead of pushing
Save Changes off the edge. */
flex: 1 1 auto;
min-width: 0;
flex-wrap: wrap;
}
.btn-test-connection[b-fp7f4zamnj] {
display: inline-flex;
align-items: center;
flex-shrink: 0;
gap: 6px;
padding: 7px 16px;
font-size: 0.78rem;
font-weight: 500;
border: 1px solid #E2E8F0;
border-radius: 8px;
background: white;
color: #475569;
cursor: pointer;
transition: all 0.15s;
font-family: inherit;
}
.btn-test-connection:hover:not(:disabled)[b-fp7f4zamnj] {
background: #F8FAFC;
border-color: #CBD5E1;
}
.btn-test-connection:disabled[b-fp7f4zamnj] {
opacity: 0.5;
cursor: not-allowed;
}
.test-result-msg[b-fp7f4zamnj] {
display: inline-flex;
/* flex-start so the icon stays on the first line of a wrapped message */
align-items: flex-start;
gap: 4px;
font-size: 0.75rem;
font-weight: 500;
line-height: 1.45;
/* Test-connection failures carry provider text whose useful part is at the
END ("User: arn:… is not authorized to perform: ses:…"). The old
max-width + overflow:hidden + white-space:nowrap clipped it mid-string —
and because this is a flex container, text-overflow:ellipsis never
applied, so the cut had no "…" to hint at it. Wrap instead, matching the
.ping-result banner on the NetSuite test page and .t-err on the webhook
deliveries page. word-break lets an unbroken ARN wrap too. */
flex: 1 1 auto;
min-width: 0;
word-break: break-word;
}
.test-result-msg > i[b-fp7f4zamnj] {
flex-shrink: 0;
margin-top: 0.15em;
}
.msg-success[b-fp7f4zamnj] { color: #059669; }
.msg-failure[b-fp7f4zamnj] { color: #DC2626; }
.btn-save-config[b-fp7f4zamnj] {
display: inline-flex;
align-items: center;
flex-shrink: 0;
gap: 6px;
padding: 7px 20px;
font-size: 0.8rem;
font-weight: 600;
border: none;
border-radius: 8px;
background: var(--brand-500, #0D6785);
color: white;
cursor: pointer;
transition: all 0.15s;
font-family: inherit;
}
.btn-save-config:hover:not(:disabled)[b-fp7f4zamnj] {
filter: brightness(1.1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.btn-save-config:disabled[b-fp7f4zamnj] {
opacity: 0.6;
cursor: not-allowed;
}
/* Form overrides */
[b-fp7f4zamnj] .form-control-sm,
[b-fp7f4zamnj] .form-select-sm {
font-size: 0.8rem;
border-radius: 6px;
border-color: #E2E8F0;
}
[b-fp7f4zamnj] .form-control-sm:focus,
[b-fp7f4zamnj] .form-select-sm:focus {
border-color: var(--brand-500, #0D6785);
box-shadow: 0 0 0 2px rgba(13, 103, 133, 0.1);
}
/* Credential status (AWS Secrets Manager presence check)
Reuses the palette already established above — the same greens, ambers/reds and slates as
.status-dot / .test-pass / .test-fail — so the block reads as part of this page rather than a
bolted-on widget. */
.nav-secret-warn[b-fp7f4zamnj] {
font-size: 0.72rem;
color: #D97706;
margin-right: 5px;
}
.secret-status[b-fp7f4zamnj] {
border: 1px solid #E2E8F0;
border-radius: 8px;
padding: 12px 14px;
background: #FCFDFE;
}
.secret-status-head[b-fp7f4zamnj] {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.secret-status-source[b-fp7f4zamnj] {
font-size: 0.78rem;
font-weight: 500;
color: #334155;
word-break: break-all;
}
.secret-status-muted[b-fp7f4zamnj] {
font-size: 0.72rem;
color: #94A3B8;
line-height: 1.5;
margin-top: 2px;
}
.btn-recheck[b-fp7f4zamnj] {
display: inline-flex;
align-items: center;
flex-shrink: 0;
gap: 6px;
padding: 5px 12px;
font-size: 0.74rem;
font-weight: 500;
border: 1px solid #E2E8F0;
border-radius: 8px;
background: white;
color: #475569;
cursor: pointer;
transition: all 0.15s;
font-family: inherit;
}
.btn-recheck:hover:not(:disabled)[b-fp7f4zamnj] {
background: #F8FAFC;
border-color: #CBD5E1;
}
.btn-recheck:disabled[b-fp7f4zamnj] {
opacity: 0.5;
cursor: not-allowed;
}
/* Caption for the expected-key list. Separated from the source line above by a rule so the
list reads as its own answer to "which keys should exist?" rather than as trailing detail. */
.secret-keys-head[b-fp7f4zamnj] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid #E2E8F0;
}
.secret-keys-title[b-fp7f4zamnj] {
font-size: 0.74rem;
font-weight: 600;
color: #334155;
}
.secret-key-list[b-fp7f4zamnj] {
list-style: none;
margin: 8px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.secret-key-row[b-fp7f4zamnj] {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
/* Status trails the key so the exact strings form a scannable left column. */
.secret-key-row .secret-pill[b-fp7f4zamnj] {
margin-left: auto;
}
.secret-key-label[b-fp7f4zamnj] {
font-size: 0.72rem;
color: #94A3B8;
}
.secret-key-name[b-fp7f4zamnj] {
font-size: 0.72rem;
color: #475569;
background: #F1F5F9;
border-radius: 4px;
padding: 1px 6px;
word-break: break-all;
}
/* Summary/row badge. text-transform:none because it also sits inside .section-title,
which uppercases — and "SECRET NOT FOUND" shouts. */
.secret-pill[b-fp7f4zamnj] {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.68rem;
font-weight: 600;
text-transform: none;
letter-spacing: 0;
padding: 2px 8px;
border-radius: 10px;
white-space: nowrap;
}
.secret-pill.secret-ok[b-fp7f4zamnj] { background: #ECFDF5; color: #059669; border: 1px solid #A7F3D0; }
.secret-pill.secret-bad[b-fp7f4zamnj] { background: #FEF2F2; color: #DC2626; border: 1px solid #FECACA; }
.secret-pill.secret-unknown[b-fp7f4zamnj] { background: #F8FAFC; color: #64748B; border: 1px solid #E2E8F0; }
.secret-status-msg[b-fp7f4zamnj] {
font-size: 0.74rem;
line-height: 1.5;
margin: 10px 0 0;
word-break: break-word;
}
.secret-status-msg.secret-ok[b-fp7f4zamnj] { color: #059669; }
.secret-status-msg.secret-bad[b-fp7f4zamnj] { color: #DC2626; }
.secret-status-msg.secret-unknown[b-fp7f4zamnj] { color: #64748B; }
/* Spinning */
@keyframes spin-b-fp7f4zamnj {
to { transform: rotate(360deg); }
}
.spinning[b-fp7f4zamnj] {
animation: spin-b-fp7f4zamnj 1s linear infinite;
}
/* Responsive */
@media (max-width: 900px) {
.integrations-layout[b-fp7f4zamnj] {
grid-template-columns: 1fr;
}
.integration-nav[b-fp7f4zamnj] {
border-right: none;
border-bottom: 1px solid #E2E8F0;
flex-direction: row;
overflow-x: auto;
padding: 6px 8px;
gap: 4px;
}
.integration-nav-item[b-fp7f4zamnj] {
white-space: nowrap;
min-width: fit-content;
}
.config-fields[b-fp7f4zamnj] {
grid-template-columns: 1fr;
}
}
/* /Components/Pages/Admin/InvoiceBackfillPage.razor.rz.scp.css */
.backfill-page[b-hb1zheluz9] {
padding: 1.5rem;
max-width: 1100px;
margin: 0 auto;
}
.page-header[b-hb1zheluz9] {
margin-bottom: 1.25rem;
}
.back-link[b-hb1zheluz9] {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-bottom: 0.6rem;
text-decoration: none;
color: #475569;
font-size: 0.875rem;
}
.back-link:hover[b-hb1zheluz9] { color: #2c5aa0; }
.page-header h1[b-hb1zheluz9] {
margin: 0 0 0.25rem 0;
font-size: 1.6rem;
font-weight: 700;
}
.state-block[b-hb1zheluz9] {
padding: 2.5rem 1rem;
text-align: center;
color: #6b7280;
background: white;
border: 1px solid #e5e7eb;
border-radius: 10px;
}
/* ── Hero (state-driven) ──────────────────────────────────────────── */
.hero[b-hb1zheluz9] {
display: flex;
align-items: center;
gap: 1.25rem;
padding: 1.5rem 1.75rem;
background: white;
border: 1px solid #e5e7eb;
border-radius: 10px;
margin-bottom: 0.85rem;
}
.hero-success[b-hb1zheluz9] {
background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
border-color: #86efac;
}
.hero-success .hero-icon[b-hb1zheluz9] {
background: #dcfce7;
color: #16a34a;
}
.hero-warn[b-hb1zheluz9] {
background: linear-gradient(135deg, #fffbeb, #fef3c7);
border-color: #fcd34d;
}
.hero-warn .hero-icon[b-hb1zheluz9] {
background: #fef3c7;
color: #d97706;
}
.hero-icon[b-hb1zheluz9] {
width: 3.25rem;
height: 3.25rem;
border-radius: 12px;
display: grid;
place-items: center;
font-size: 1.6rem;
flex-shrink: 0;
}
.hero-body[b-hb1zheluz9] {
flex: 1;
min-width: 0;
}
.hero-headline[b-hb1zheluz9] {
font-size: 1.15rem;
font-weight: 700;
color: #111827;
margin-bottom: 0.25rem;
display: flex;
align-items: baseline;
gap: 0.5rem;
flex-wrap: wrap;
}
.hero-count[b-hb1zheluz9] {
font-size: 2rem;
color: #d97706;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.hero-success .hero-headline[b-hb1zheluz9] { color: #14532d; }
.hero-subline[b-hb1zheluz9] {
color: #475569;
font-size: 0.9rem;
}
/* Per-kind breakdown chips inside the hero — Diligence + Policy counts so admins
know the run will create both kinds. Each chip suppresses itself when zero. */
.kind-breakdown[b-hb1zheluz9] {
display: flex;
gap: 0.5rem;
margin-top: 0.6rem;
flex-wrap: wrap;
}
.kind-chip[b-hb1zheluz9] {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.65rem;
border-radius: 999px;
font-size: 0.8rem;
border: 1px solid transparent;
}
.kind-chip i[b-hb1zheluz9] { font-size: 0.85rem; line-height: 1; color: currentColor; }
.kind-chip strong[b-hb1zheluz9] { font-variant-numeric: tabular-nums; }
.kind-chip-diligence[b-hb1zheluz9] {
background: #fffbeb;
color: #b45309;
border-color: #fde68a;
}
.kind-chip-policy[b-hb1zheluz9] {
background: #f1f5f9;
color: #475569;
border-color: #e2e8f0;
}
.hero-actions[b-hb1zheluz9] {
display: flex;
gap: 0.5rem;
flex-shrink: 0;
flex-wrap: wrap;
}
/* ── Run-confirm panel ────────────────────────────────────────────── */
.run-panel[b-hb1zheluz9] {
background: white;
border: 1px solid #fcd34d;
border-radius: 10px;
margin-bottom: 0.85rem;
overflow: hidden;
animation: slideDown-b-hb1zheluz9 150ms ease-out;
}
@keyframes slideDown-b-hb1zheluz9 {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.run-panel-title[b-hb1zheluz9] {
background: #fef3c7;
color: #6b4f0f;
padding: 0.6rem 1rem;
font-weight: 600;
font-size: 0.9rem;
display: flex;
align-items: center;
gap: 0.5rem;
border-bottom: 1px solid #fcd34d;
}
.run-panel-body[b-hb1zheluz9] {
padding: 0.85rem 1rem;
}
.run-controls[b-hb1zheluz9] {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
/* ── Buttons (matches detail page style) ──────────────────────────── */
.btn-action[b-hb1zheluz9] {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.85rem;
background: white;
border: 1px solid #d1d5db;
border-radius: 6px;
color: #374151;
font-size: 0.875rem;
font-weight: 500;
text-decoration: none;
cursor: pointer;
transition: border-color 120ms, color 120ms, background-color 120ms;
}
.btn-action:hover:not(:disabled)[b-hb1zheluz9] {
border-color: #2c5aa0;
color: #2c5aa0;
}
.btn-action:disabled[b-hb1zheluz9] {
opacity: 0.5;
cursor: not-allowed;
}
.btn-action-primary[b-hb1zheluz9] {
background: #2c5aa0;
border-color: #2c5aa0;
color: white;
}
.btn-action-primary:hover:not(:disabled)[b-hb1zheluz9] {
background: #244b87;
border-color: #244b87;
color: white;
}
.btn-action i[b-hb1zheluz9] { font-size: 0.95rem; }
/* ── Detail grid (by-bank + samples) ──────────────────────────────── */
.detail-grid[b-hb1zheluz9] {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 0.85rem;
margin-bottom: 0.85rem;
}
@media (max-width: 800px) {
.detail-grid[b-hb1zheluz9] { grid-template-columns: 1fr; }
}
.card-section[b-hb1zheluz9] {
background: white;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 1rem 1.25rem;
}
.card-section h2[b-hb1zheluz9] {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #2c5aa0;
font-weight: 700;
margin: 0 0 0.6rem 0;
}
.card-section h2 .small[b-hb1zheluz9],
.card-section h2 .muted[b-hb1zheluz9] {
font-weight: 500;
color: #94a3b8;
margin-left: 0.4rem;
text-transform: none;
letter-spacing: 0;
font-size: 0.7rem;
}
.card-section table[b-hb1zheluz9] { margin-bottom: 0; }
.card-section thead th[b-hb1zheluz9] {
background: #f8fafc;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #475569;
font-weight: 600;
}
.mono[b-hb1zheluz9] { font-variant-numeric: tabular-nums; }
.muted[b-hb1zheluz9] { color: #6b7280; }
.link-muted[b-hb1zheluz9] {
color: #475569;
text-decoration: none;
font-weight: 500;
}
.link-muted:hover[b-hb1zheluz9] { color: #2c5aa0; text-decoration: underline; }
/* ── How-it-works disclosure ─────────────────────────────────────── */
.info-section[b-hb1zheluz9] {
background: #f8fafc;
}
.info-toggle[b-hb1zheluz9] {
background: none;
border: none;
padding: 0;
font-size: 0.875rem;
color: #475569;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-weight: 500;
}
.info-toggle:hover[b-hb1zheluz9] { color: #2c5aa0; }
.info-content[b-hb1zheluz9] {
margin-top: 0.85rem;
color: #475569;
font-size: 0.875rem;
}
.info-content ul[b-hb1zheluz9] {
margin: 0;
padding-left: 1.25rem;
}
.info-content li[b-hb1zheluz9] { margin-bottom: 0.4rem; }
.info-content code[b-hb1zheluz9] {
background: #e5e7eb;
color: #374151;
padding: 0.05rem 0.3rem;
border-radius: 3px;
font-size: 0.82rem;
}
/* ── Post-run report ──────────────────────────────────────────────── */
.report-hero[b-hb1zheluz9] {
display: flex;
align-items: center;
gap: 1.25rem;
padding: 1.5rem 1.75rem;
border-radius: 10px;
margin-bottom: 0.85rem;
}
.report-hero-success[b-hb1zheluz9] {
background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
border: 1px solid #86efac;
}
.report-hero-success .report-icon[b-hb1zheluz9] {
background: #dcfce7;
color: #16a34a;
}
.report-hero-warn[b-hb1zheluz9] {
background: linear-gradient(135deg, #fef2f2, #fee2e2);
border: 1px solid #fecaca;
}
.report-hero-warn .report-icon[b-hb1zheluz9] {
background: #fee2e2;
color: #dc2626;
}
.report-icon[b-hb1zheluz9] {
width: 3.25rem;
height: 3.25rem;
border-radius: 12px;
display: grid;
place-items: center;
font-size: 1.6rem;
flex-shrink: 0;
}
.report-summary[b-hb1zheluz9] {
flex: 1;
min-width: 0;
}
.report-headline[b-hb1zheluz9] {
font-size: 1.15rem;
font-weight: 700;
color: #111827;
margin-bottom: 0.2rem;
}
.report-subline[b-hb1zheluz9] {
color: #475569;
font-size: 0.9rem;
font-variant-numeric: tabular-nums;
}
.report-subline strong[b-hb1zheluz9] {
color: #111827;
font-weight: 700;
}
.report-actions[b-hb1zheluz9] {
display: flex;
gap: 0.5rem;
flex-shrink: 0;
flex-wrap: wrap;
}
.error-log[b-hb1zheluz9] {
background: #1f2937;
color: #fca5a5;
padding: 1rem;
border-radius: 6px;
font-size: 0.8rem;
max-height: 320px;
overflow-y: auto;
margin: 0;
}
/* /Components/Pages/Admin/LP3SignTestPage.razor.rz.scp.css */
/* Leca Signing Test — scoped styles */
.lst-page[b-5p7beyn5m5] { padding: 0; }
.lst-header[b-5p7beyn5m5] {
display: flex; align-items: center; gap: 16px;
margin-bottom: 24px;
}
.lst-header-icon[b-5p7beyn5m5] {
width: 52px; height: 52px; border-radius: 12px;
background: linear-gradient(135deg, var(--brand-500), var(--brand-400));
color: white; display: flex; align-items: center; justify-content: center;
font-size: 22px; box-shadow: 0 4px 12px rgba(15,23,42,0.18);
}
.lst-header h1[b-5p7beyn5m5] { font-size: 1.6rem; font-weight: 700; color: #0F172A; margin: 0; }
.lst-header p[b-5p7beyn5m5] { font-size: 13px; color: #64748B; margin: 2px 0 0; }
/* Cards */
.lst-card[b-5p7beyn5m5] {
background: white; border: 1px solid #E2E8F0; border-radius: 14px;
margin-bottom: 20px; overflow: hidden;
box-shadow: 0 2px 6px rgba(15,23,42,0.04);
}
.lst-card-header[b-5p7beyn5m5] {
display: flex; align-items: center; gap: 12px;
padding: 16px 20px; border-bottom: 1px solid #F1F5F9;
background: linear-gradient(135deg, #F8FAFC 0%, #ffffff 100%);
}
.lst-card-icon[b-5p7beyn5m5] {
width: 36px; height: 36px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 16px; color: white;
background: linear-gradient(135deg, var(--brand-500), var(--brand-400));
flex-shrink: 0;
}
.lst-card-icon.green[b-5p7beyn5m5] { background: linear-gradient(135deg, #10B981, #34D399); }
.lst-card-title[b-5p7beyn5m5] { font-size: 14px; font-weight: 700; color: #0F172A; margin: 0; }
.lst-card-sub[b-5p7beyn5m5] { font-size: 12px; color: #64748B; margin: 2px 0 0; }
.lst-card-body[b-5p7beyn5m5] { padding: 18px 20px; }
/* Create form */
.lst-create-row[b-5p7beyn5m5] {
display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap;
}
.lst-create-row .lst-app-picker[b-5p7beyn5m5] { flex: 1 1 320px; min-width: 0; }
.lst-create-row label[b-5p7beyn5m5] {
display: block; font-size: 12px; font-weight: 600; color: #475569;
margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.03em;
}
.lst-create-row select[b-5p7beyn5m5] {
width: 100%; padding: 9px 12px; border: 1px solid #E2E8F0; border-radius: 8px;
font-size: 14px; background: white; color: #0F172A; transition: all 0.15s;
}
.lst-create-row select:focus[b-5p7beyn5m5] { outline: none; border-color: var(--brand-400); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.lst-help[b-5p7beyn5m5] { font-size: 11px; color: #94A3B8; margin-top: 4px; }
.lst-btn-primary[b-5p7beyn5m5] {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 11px 22px; border: 1px solid transparent; border-radius: 10px;
background: var(--brand-600, #004980);
color: white; font-size: 14px; font-weight: 600; cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
white-space: nowrap; min-width: 220px;
}
.lst-btn-primary:hover:not(:disabled)[b-5p7beyn5m5] {
background: var(--brand-700, #003760);
}
/* Disabled state: a soft filled chip with a subtle left-pointing arrow. Reads as
"this will light up once you pick an app" rather than "this is broken". */
.lst-btn-primary:disabled[b-5p7beyn5m5] {
background: #E2E8F0;
color: #64748B;
border-color: #E2E8F0;
cursor: not-allowed;
box-shadow: none;
transform: none;
}
.lst-btn-primary:disabled i[b-5p7beyn5m5] { color: #94A3B8; }
.lst-btn-secondary[b-5p7beyn5m5] {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 14px; border: 1px solid #E2E8F0; border-radius: 8px;
background: transparent; color: #64748B; font-size: 13px; font-weight: 500; cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.lst-btn-secondary:hover[b-5p7beyn5m5] { background: #F1F5F9; color: #0F172A; }
.lst-alert[b-5p7beyn5m5] {
margin-top: 14px; padding: 10px 14px; border-radius: 8px;
font-size: 13px; display: flex; align-items: center; gap: 8px;
}
.lst-alert.success[b-5p7beyn5m5] { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.lst-alert.danger[b-5p7beyn5m5] { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.lst-alert.info[b-5p7beyn5m5] { background: #EFF6FF; color: #1E40AF; border: 1px solid #BFDBFE; }
/* Table */
.lst-table-wrap[b-5p7beyn5m5] { overflow-x: auto; }
.lst-table[b-5p7beyn5m5] { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.lst-table thead th[b-5p7beyn5m5] {
text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.04em; color: #94A3B8; padding: 10px 12px;
background: #FAFBFC; border-bottom: 1px solid #E2E8F0;
}
.lst-table tbody td[b-5p7beyn5m5] {
padding: 12px; border-bottom: 1px solid #F1F5F9; vertical-align: middle;
}
.lst-table tbody tr:hover[b-5p7beyn5m5] { background: #F8FAFC; }
.lst-table tbody tr:last-child td[b-5p7beyn5m5] { border-bottom: none; }
.lst-req-id[b-5p7beyn5m5] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: #0F172A; font-weight: 600; }
.lst-req-env[b-5p7beyn5m5] { font-size: 10px; color: #94A3B8; font-family: ui-monospace, monospace; margin-top: 2px; }
.lst-badge[b-5p7beyn5m5] {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 9px; border-radius: 6px;
font-size: 11px; font-weight: 600;
}
.lst-badge.status-Completed[b-5p7beyn5m5] { background: #ECFDF5; color: #059669; }
.lst-badge.status-Declined[b-5p7beyn5m5] { background: #FEF2F2; color: #DC2626; }
.lst-badge.status-Voided[b-5p7beyn5m5] { background: #F1F5F9; color: #64748B; }
.lst-badge.status-Expired[b-5p7beyn5m5] { background: #FEF3C7; color: #D97706; }
.lst-badge.status-Sent[b-5p7beyn5m5],
.lst-badge.status-Delivered[b-5p7beyn5m5],
.lst-badge.status-PartiallySigned[b-5p7beyn5m5],
.lst-badge.status-Draft[b-5p7beyn5m5] { background: #EFF6FF; color: #2563EB; }
.lst-signer[b-5p7beyn5m5] {
display: flex; justify-content: space-between; align-items: center;
padding: 4px 0; border-bottom: 1px dashed #F1F5F9; font-size: 12px;
}
.lst-signer:last-child[b-5p7beyn5m5] { border-bottom: none; }
.lst-signer-name[b-5p7beyn5m5] { color: #1F2937; font-weight: 500; }
.lst-signer-routing[b-5p7beyn5m5] { font-size: 10px; color: #94A3B8; font-weight: 700; padding-right: 6px; }
.lst-signer-status[b-5p7beyn5m5] { font-size: 10px; color: #94A3B8; text-transform: uppercase; font-weight: 600; }
.lst-sign-link[b-5p7beyn5m5] {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px; border-radius: 6px;
background: var(--brand-500); color: white !important;
font-size: 11px; font-weight: 600; text-decoration: none;
transition: all 0.15s;
}
.lst-sign-link:hover[b-5p7beyn5m5] { background: var(--brand-600); }
.lst-hash[b-5p7beyn5m5] { font-family: ui-monospace, monospace; font-size: 11px; color: #0F172A; }
.lst-hash-empty[b-5p7beyn5m5] { color: #CBD5E1; }
.lst-actions[b-5p7beyn5m5] { display: flex; gap: 6px; flex-wrap: wrap; }
.lst-action-link[b-5p7beyn5m5] {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px; border-radius: 6px;
border: 1px solid #E2E8F0; background: white;
font-size: 11px; color: #475569; font-weight: 500;
text-decoration: none; cursor: pointer;
transition: all 0.15s;
}
.lst-action-link:hover[b-5p7beyn5m5] { border-color: var(--brand-400); color: var(--brand-500); background: #F8FAFC; }
.lst-empty[b-5p7beyn5m5] {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 40px 20px; color: #94A3B8; gap: 8px;
}
.lst-empty i[b-5p7beyn5m5] { font-size: 36px; color: #CBD5E1; }
.lst-empty-text[b-5p7beyn5m5] { font-size: 13px; }
.lst-table-footer[b-5p7beyn5m5] {
display: flex; justify-content: space-between; align-items: center;
padding: 12px 20px; border-top: 1px solid #F1F5F9; background: #FAFBFC;
font-size: 11px; color: #94A3B8;
}
@media (max-width: 768px) {
.lst-create-row[b-5p7beyn5m5] { grid-template-columns: 1fr; }
.lst-btn-primary[b-5p7beyn5m5] { width: 100%; }
}
/* /Components/Pages/Admin/Modals/BankDetailsModal.razor.rz.scp.css */
/* Thin scrollbar for modal body */
[b-cvtic7q8nr] .modal-body {
scrollbar-width: thin;
scrollbar-color: #CBD5E1 transparent;
}
[b-cvtic7q8nr] .modal-body::-webkit-scrollbar {
width: 5px;
}
[b-cvtic7q8nr] .modal-body::-webkit-scrollbar-track {
background: transparent;
}
[b-cvtic7q8nr] .modal-body::-webkit-scrollbar-thumb {
background: #CBD5E1;
border-radius: 4px;
}
[b-cvtic7q8nr] .modal-body::-webkit-scrollbar-thumb:hover {
background: #94A3B8;
}
/* /Components/Pages/Admin/Modals/EmailTemplateDetailsModal.razor.rz.scp.css */
/* Bootstrap Modal Enhancements */
.modal.show[b-nixh3x4jke] {
display: block !important;
}
/* Header/body/footer/backdrop styling comes from the global modal theme
(wwwroot/css/modal-theme.css) — no scoped overrides needed. */
/* Tab styling comes from the global .tabs-container / .tab-button family in
wwwroot/leca-theme.css — no scoped overrides needed. */
/* Tab Content */
.tab-content[b-nixh3x4jke] {
min-height: 400px;
}
/* Form Labels */
.form-label[b-nixh3x4jke] {
font-size: 14px;
font-weight: 600;
color: #374151;
margin-bottom: 6px;
}
.form-label .text-danger[b-nixh3x4jke] {
color: var(--error-600);
font-weight: 700;
}
/* Form Controls */
.form-control[b-nixh3x4jke],
.form-select[b-nixh3x4jke] {
border: 1px solid #E2E8F0;
border-radius: 10px;
padding: 10px 14px;
font-size: 14px;
transition: all 0.2s;
}
.form-control:focus[b-nixh3x4jke],
.form-select:focus[b-nixh3x4jke] {
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
outline: none;
}
.form-control.font-monospace[b-nixh3x4jke] {
font-family: 'Courier New', Courier, monospace;
font-size: 13px;
}
/* Form Text */
.form-text[b-nixh3x4jke] {
font-size: 13px;
color: #6b7280;
margin-top: 4px;
}
/* Form Check (Checkboxes) */
.form-check[b-nixh3x4jke] {
display: flex;
align-items: center;
gap: 8px;
padding: 0;
}
.form-check-input[b-nixh3x4jke] {
width: 18px;
height: 18px;
border: 2px solid #d1d5db;
border-radius: 4px;
cursor: pointer;
}
.form-check-input:checked[b-nixh3x4jke] {
background-color: var(--brand-600);
border-color: var(--brand-600);
}
.form-check-label[b-nixh3x4jke] {
font-size: 14px;
font-weight: 500;
color: #374151;
cursor: pointer;
margin-bottom: 0;
}
/* Validation Messages */
.validation-message[b-nixh3x4jke] {
color: var(--error-600);
font-size: 13px;
margin-top: 4px;
display: block;
}
/* Alert Styles */
.alert[b-nixh3x4jke] {
border-radius: 8px;
padding: 14px 16px;
font-size: 14px;
margin-bottom: 16px;
}
.alert-info[b-nixh3x4jke] {
background: #dbeafe;
border: 1px solid #93c5fd;
color: #1e40af;
}
.alert-danger[b-nixh3x4jke] {
background: #fee2e2;
border: 1px solid #fca5a5;
color: #991b1b;
}
.alert-light[b-nixh3x4jke] {
background: #f9fafb;
border: 1px solid #e5e7eb;
color: #374151;
}
.alert-heading[b-nixh3x4jke] {
font-size: 15px;
font-weight: 600;
margin-bottom: 8px;
}
/* Badge Styles */
.badge[b-nixh3x4jke] {
padding: 6px 12px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
font-family: 'Courier New', monospace;
}
.badge.bg-primary[b-nixh3x4jke] {
background: var(--brand-600) !important;
color: white;
}
/* Preview Content */
.preview-content[b-nixh3x4jke] {
background: white;
padding: 16px;
border-radius: 6px;
}
.preview-content pre[b-nixh3x4jke] {
background: #f9fafb;
padding: 12px;
border-radius: 6px;
border: 1px solid #e5e7eb;
font-size: 13px;
}
/* Primary Button */
.btn-primary[b-nixh3x4jke] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0.55rem 1.15rem;
background: var(--brand-600, #004980);
color: white;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all var(--transition-base);
}
.btn-primary:hover:not(:disabled)[b-nixh3x4jke] {
background: var(--brand-700, #003760);
}
.btn-primary:disabled[b-nixh3x4jke] {
opacity: 0.6;
cursor: not-allowed;
}
/* Secondary Button (ghost) */
.btn-outline-secondary[b-nixh3x4jke] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0.55rem 1.15rem;
background: transparent;
color: #64748B;
border: 1px solid #E2E8F0;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all var(--transition-base);
}
.btn-outline-secondary:hover:not(:disabled)[b-nixh3x4jke] {
background: #F1F5F9;
color: #0F172A;
}
.btn-outline-secondary:disabled[b-nixh3x4jke] {
opacity: 0.6;
cursor: not-allowed;
}
/* Small Buttons */
.btn-sm[b-nixh3x4jke] {
padding: 6px 14px;
font-size: 13px;
}
/* Spinner */
.spinner-border-sm[b-nixh3x4jke] {
width: 16px;
height: 16px;
border-width: 2px;
}
/* Responsive Design */
@media (max-width: 768px) {
.modal-dialog.modal-xl[b-nixh3x4jke] {
margin: 10px;
max-width: calc(100% - 20px);
}
.modal-footer[b-nixh3x4jke] {
flex-direction: column;
gap: 8px;
}
.modal-footer .btn[b-nixh3x4jke] {
width: 100%;
justify-content: center;
}
.tab-content[b-nixh3x4jke] {
min-height: 300px;
}
}
/* /Components/Pages/Admin/Modals/VersionCompareModal.razor.rz.scp.css */
/* ========================================
Version Compare Modal Styles
Git-style diff comparison design
======================================== */
.version-compare-modal[b-u037ih8tza] {
display: flex;
flex-direction: column;
max-height: 90vh;
overflow: hidden;
}
/* Header/footer/title/radius styling comes from the global modal theme (wwwroot/css/modal-theme.css). */
.version-compare-modal .modal-body[b-u037ih8tza] {
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
background: var(--neutral-50);
}
/* Ghost secondary button (canonical modal footer style) */
.version-compare-modal .modal-footer .btn-secondary[b-u037ih8tza] {
background: transparent;
color: #64748B;
border: 1px solid #E2E8F0;
border-radius: 10px;
font-weight: 600;
padding: 0.55rem 1.15rem;
}
.version-compare-modal .modal-footer .btn-secondary:hover[b-u037ih8tza] {
background: #F1F5F9;
color: #0F172A;
}
.compare-container[b-u037ih8tza] {
display: flex;
flex-direction: column;
height: 100%;
min-height: 500px;
}
/* Version selector header */
.compare-header[b-u037ih8tza] {
display: flex;
align-items: stretch;
padding: 16px 20px;
background: white;
border-bottom: 1px solid var(--border-default, #e5e7eb);
gap: 12px;
}
.version-selector[b-u037ih8tza] {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
background: var(--neutral-50);
border-radius: 8px;
border: 1px solid var(--border-default, #e5e7eb);
}
.version-selector .selector-label[b-u037ih8tza] {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-secondary, #64748b);
}
.version-selector .form-select[b-u037ih8tza] {
font-size: 13px;
border-radius: 6px;
}
.version-selector .version-meta[b-u037ih8tza] {
font-size: 11px;
color: var(--text-muted, #94a3b8);
display: flex;
align-items: center;
gap: 4px;
}
.left-selector[b-u037ih8tza] {
border-left: 3px solid #ef4444;
}
.right-selector[b-u037ih8tza] {
border-left: 3px solid var(--success-500);
}
.compare-arrow[b-u037ih8tza] {
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted, #94a3b8);
font-size: 24px;
}
/* Change summary stats */
.change-summary[b-u037ih8tza] {
display: flex;
gap: 12px;
padding: 12px 20px;
background: white;
border-bottom: 1px solid var(--border-default, #e5e7eb);
}
.change-stat[b-u037ih8tza] {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: var(--neutral-50);
border-radius: 6px;
font-size: 13px;
color: var(--text-secondary, #64748b);
}
.change-stat.changed[b-u037ih8tza] {
background: rgba(245, 158, 11, 0.1);
color: #b45309;
}
.change-stat.changed i[b-u037ih8tza] {
color: #f59e0b;
}
.change-stat.unchanged i[b-u037ih8tza] {
color: var(--success-500);
}
.change-stat .stat-badge[b-u037ih8tza] {
font-size: 11px;
font-weight: 500;
padding: 2px 8px;
border-radius: 10px;
background: var(--neutral-200);
}
.change-stat.changed .stat-badge[b-u037ih8tza] {
background: rgba(245, 158, 11, 0.2);
color: #92400e;
}
/* Sections */
.compare-section[b-u037ih8tza] {
display: flex;
flex-direction: column;
background: white;
margin: 0 12px 12px 12px;
border-radius: 8px;
border: 1px solid var(--border-default, #e5e7eb);
overflow: hidden;
}
.compare-section:first-of-type[b-u037ih8tza] {
margin-top: 12px;
}
.compare-section-header[b-u037ih8tza] {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: var(--neutral-50);
border-bottom: 1px solid var(--border-default, #e5e7eb);
font-weight: 600;
font-size: 13px;
color: var(--text-primary, #1e293b);
}
.compare-section-header i[b-u037ih8tza] {
color: var(--text-muted, #94a3b8);
}
/* Content rows */
.compare-content-row[b-u037ih8tza] {
display: flex;
flex: 1;
min-height: 0;
}
.compare-content-row.body-compare[b-u037ih8tza] {
min-height: 280px;
max-height: 350px;
}
.compare-content-row.notes-row[b-u037ih8tza] {
min-height: auto;
}
.compare-column[b-u037ih8tza] {
flex: 1;
padding: 12px 16px;
overflow: auto;
background: var(--bg-surface, #ffffff);
position: relative;
}
.compare-column.left[b-u037ih8tza] {
border-right: 1px solid var(--border-default, #e5e7eb);
}
/* Column indicators */
.column-indicator[b-u037ih8tza] {
position: absolute;
top: 8px;
right: 8px;
}
.indicator-badge[b-u037ih8tza] {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 2px 6px;
border-radius: 4px;
}
.indicator-badge.old[b-u037ih8tza] {
background: rgba(239, 68, 68, 0.1);
color: var(--error-600);
}
.indicator-badge.new[b-u037ih8tza] {
background: rgba(34, 197, 94, 0.1);
color: var(--success-600);
}
/* Change highlights */
.compare-column.has-deletion[b-u037ih8tza] {
background: linear-gradient(to right, rgba(239, 68, 68, 0.03) 0%, rgba(239, 68, 68, 0.06) 100%);
}
.compare-column.has-addition[b-u037ih8tza] {
background: linear-gradient(to right, rgba(34, 197, 94, 0.06) 0%, rgba(34, 197, 94, 0.03) 100%);
}
/* Text content */
.compare-text[b-u037ih8tza] {
font-size: 14px;
color: var(--text-primary, #0f172a);
word-break: break-word;
padding-right: 40px;
}
.compare-notes[b-u037ih8tza] {
font-size: 13px;
color: var(--text-secondary, #475569);
padding: 4px 0;
}
/* Rendered HTML view */
.compare-rendered[b-u037ih8tza] {
font-size: 14px;
line-height: 1.6;
padding-top: 24px;
}
.compare-rendered img[b-u037ih8tza] {
max-width: 100%;
height: auto;
}
/* Code/HTML view */
.compare-code[b-u037ih8tza] {
font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
font-size: 12px;
line-height: 1.6;
margin: 0;
padding-top: 24px;
white-space: pre-wrap;
word-break: break-all;
color: var(--text-primary, #0f172a);
background: transparent;
}
/* View toggle */
.view-toggle[b-u037ih8tza] {
border: 1px solid var(--border-default, #e5e7eb);
border-radius: 6px;
overflow: hidden;
}
.view-toggle .btn[b-u037ih8tza] {
border: none;
border-radius: 0;
padding: 4px 12px;
font-size: 12px;
color: var(--text-secondary, #64748b);
background: transparent;
}
.view-toggle .btn:hover[b-u037ih8tza] {
background: var(--neutral-100);
}
.view-toggle .btn.active[b-u037ih8tza] {
background: #4f46e5;
color: white;
}
/* Badge styles */
.compare-section-header .badge[b-u037ih8tza] {
font-size: 10px;
font-weight: 600;
padding: 4px 8px;
border-radius: 4px;
}
/* Empty state */
.empty-state-icon[b-u037ih8tza] {
width: 64px;
height: 64px;
margin: 0 auto;
background: rgba(245, 158, 11, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.empty-state-icon i[b-u037ih8tza] {
font-size: 28px;
color: #f59e0b;
}
/* Custom scrollbar */
.compare-column[b-u037ih8tza]::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.compare-column[b-u037ih8tza]::-webkit-scrollbar-track {
background: transparent;
}
.compare-column[b-u037ih8tza]::-webkit-scrollbar-thumb {
background: var(--neutral-300);
border-radius: 3px;
}
.compare-column[b-u037ih8tza]::-webkit-scrollbar-thumb:hover {
background: var(--neutral-400);
}
/* /Components/Pages/Admin/NetSuiteSyncPage.razor.rz.scp.css */
.netsuite-sync-page[b-ro6q03nput] {
padding: 1.5rem 2rem;
/* Widened from 1200px so the Generated batches + Failed rows tables stop clipping
columns on standard 1080p/1440p monitors. Kept centered; ultrawide monitors
still get comfortable line lengths on the description text via .info-toggle. */
max-width: 1440px;
margin: 0 auto;
}
/* Any .data-table that would overflow its card gets a horizontal scrollbar
instead of clipping — belt-and-braces with the wider page above. */
.card-section[b-ro6q03nput] {
overflow-x: auto;
}
/* ── Toolbar card (icon tile + title/subtitle + actions) ─────────────── */
.logs-toolbar[b-ro6q03nput] {
display: flex; justify-content: space-between; align-items: center; gap: 16px;
padding: 12px 16px; background: var(--bg-surface, #fff);
border: 1px solid var(--border, #e5e7eb); border-radius: 12px;
margin-bottom: 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); flex-wrap: wrap;
}
.tb-left[b-ro6q03nput] { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.tb-icon[b-ro6q03nput] {
width: 40px; height: 40px; border-radius: 10px;
background: linear-gradient(135deg, var(--brand-500, #2563eb), var(--brand-700, #1e40af));
color: #fff; display: flex; align-items: center; justify-content: center;
font-size: 19px; flex-shrink: 0;
box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
}
.tb-title[b-ro6q03nput] {
font-size: 17px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.2;
display: inline-flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
}
.tb-subtitle[b-ro6q03nput] {
font-size: 12.5px; color: var(--text-muted, #6b7280); margin-top: 2px;
display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.header-description[b-ro6q03nput] {
font-size: 0.825rem;
max-width: 720px;
margin-top: 0.4rem !important;
}
.info-toggle[b-ro6q03nput] {
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid var(--border, #e5e7eb);
background: var(--bg-surface, #fff);
color: var(--text-muted, #6b7280);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
font-size: 0.75rem;
line-height: 1;
transition: color .12s ease, background .12s ease, border-color .12s ease;
}
.info-toggle:hover[b-ro6q03nput] {
color: var(--brand-600, #1d4ed8);
border-color: var(--brand-300, #93c5fd);
background: var(--brand-50, #eff6ff);
}
.info-toggle[aria-expanded="true"][b-ro6q03nput] {
color: var(--brand-700, #1e40af);
border-color: var(--brand-400, #60a5fa);
background: var(--brand-50, #eff6ff);
}
.tb-right[b-ro6q03nput] { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.scope-pill[b-ro6q03nput] {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--text-muted, #6c757d);
text-decoration: none;
}
.scope-pill:hover[b-ro6q03nput] { text-decoration: underline; }
.ping-result[b-ro6q03nput] {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
border-radius: 6px;
margin-bottom: 1rem;
font-size: 0.875rem;
}
.ping-success[b-ro6q03nput] {
background: rgba(34, 197, 94, 0.1);
color: #166534;
border: 1px solid rgba(34, 197, 94, 0.3);
}
.ping-fail[b-ro6q03nput] {
background: rgba(239, 68, 68, 0.1);
color: #991b1b;
border: 1px solid rgba(239, 68, 68, 0.3);
}
.stat-grid[b-ro6q03nput] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
margin-bottom: 16px;
}
.stat-card[b-ro6q03nput] {
display: flex; align-items: flex-start; gap: 12px;
background: var(--bg-surface, #fff);
border: 1px solid var(--border, #e5e7eb);
border-radius: 12px;
padding: 14px 16px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.stat-card.is-warn[b-ro6q03nput] { border-color: #fde68a; background: #fffbeb; }
.stat-card.is-error[b-ro6q03nput] { border-color: #fecaca; background: #fef2f2; }
/* Clickable KPI card — same visual as .stat-card but a button element so it's
keyboard-focusable and semantically actionable. Adds subtle hover feedback so
the operator learns the cards are jump-links. */
.stat-card-btn[b-ro6q03nput] {
all: unset;
display: flex; align-items: flex-start; gap: 12px;
background: var(--bg-surface, #fff);
border: 1px solid var(--border, #e5e7eb);
border-radius: 12px;
padding: 14px 16px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
cursor: pointer;
transition: transform 0.08s ease, box-shadow 0.15s ease, border-color 0.15s ease;
text-align: left;
}
.stat-card-btn:hover[b-ro6q03nput] {
border-color: #94a3b8;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
transform: translateY(-1px);
}
.stat-card-btn:focus-visible[b-ro6q03nput] {
outline: 2px solid var(--brand-500, #3b82f6);
outline-offset: 2px;
}
/* NsTaskId chip on Submitted batches — visible short-id + click-to-copy full id. */
.ns-task-chip[b-ro6q03nput] {
display: inline-block;
margin-left: 6px;
padding: 1px 6px;
font-size: 0.7rem;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
color: #475569;
background: #f1f5f9;
border: 1px solid #e2e8f0;
border-radius: 4px;
cursor: pointer;
user-select: none;
}
.ns-task-chip:hover[b-ro6q03nput] {
background: #e2e8f0;
color: #0f172a;
}
.stat-ico[b-ro6q03nput] {
width: 38px; height: 38px; border-radius: 9px; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.ico-blue[b-ro6q03nput] { background: #eef2ff; color: #4f46e5; }
.ico-green[b-ro6q03nput] { background: #dcfce7; color: #16a34a; }
.ico-red[b-ro6q03nput] { background: #fee2e2; color: #dc2626; }
.ico-amber[b-ro6q03nput] { background: #fef3c7; color: #d97706; }
.stat-body[b-ro6q03nput] { min-width: 0; }
.stat-val[b-ro6q03nput] { font-size: 22px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.1; }
.stat-val-sm[b-ro6q03nput] {
font-size: 1rem;
font-weight: 600;
font-family: ui-monospace, "SF Mono", monospace;
}
.stat-lbl[b-ro6q03nput] { font-size: 11.5px; color: var(--text-muted, #6b7280); margin-top: 1px; }
.stat-sub[b-ro6q03nput] {
margin-top: 0.5rem;
display: flex;
gap: 0.4rem;
flex-wrap: wrap;
}
.kind-pill[b-ro6q03nput] {
font-size: 0.7rem;
padding: 0.15rem 0.5rem;
border-radius: 9999px;
background: var(--bg-muted, #f3f4f6);
color: var(--text-muted, #4b5563);
}
.kind-pill.kind-diligence[b-ro6q03nput] { background: rgba(99, 102, 241, 0.12); color: #4338ca; }
.kind-pill.kind-policy[b-ro6q03nput] { background: rgba(34, 197, 94, 0.12); color: #15803d; }
.state-block[b-ro6q03nput] {
padding: 1.25rem;
color: var(--text-muted, #6b7280);
}
/* ── Generated-batches filter bar (feature 014, per-invoice volume) ──── */
.batch-filter-bar[b-ro6q03nput] {
display: flex;
gap: 12px;
align-items: flex-end;
flex-wrap: wrap;
padding: 10px 16px;
border-bottom: 1px solid var(--border, #e5e7eb);
background: var(--bg-muted, #fcfcfd);
}
.batch-filter-bar .form-select[b-ro6q03nput],
.batch-filter-bar .form-control[b-ro6q03nput] {
/* min-height rather than a fixed height so Bootstrap's form-select-sm
padding + line-height + dropdown-arrow bg can render "All" fully
instead of vertically clipping the "A". 34px is the smallest value
that keeps the "A" glyph un-clipped across Chrome/Firefox/Edge with
the 13px font-size + Bootstrap's 0.25rem vertical padding. */
min-height: 34px;
font-size: 13px;
border-radius: 8px;
line-height: 1.4;
}
.state-block-ok[b-ro6q03nput] {
color: #15803d;
border-color: rgba(34, 197, 94, 0.4);
background: rgba(34, 197, 94, 0.06);
}
.card-section[b-ro6q03nput] {
background: var(--bg-surface, #fff);
border: 1px solid var(--border, #e5e7eb);
border-radius: 8px;
overflow: hidden;
margin-bottom: 1.5rem;
}
/* ── Card header (icon + title, sits inside the card it titles) ──────── */
.card-header[b-ro6q03nput] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 12px 16px;
background: var(--bg-muted, #f9fafb);
border-bottom: 1px solid var(--border, #e5e7eb);
}
.card-header-left[b-ro6q03nput] { display: flex; align-items: center; gap: 10px; }
.card-header-icon[b-ro6q03nput] {
width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.card-header-title[b-ro6q03nput] {
font-size: 0.95rem;
font-weight: 700;
color: var(--text-primary, #1f2937);
}
.data-table[b-ro6q03nput] {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.data-table th[b-ro6q03nput], .data-table td[b-ro6q03nput] {
padding: 0.6rem 0.85rem;
text-align: left;
border-bottom: 1px solid var(--border, #e5e7eb);
vertical-align: top;
}
.data-table th[b-ro6q03nput] {
background: var(--bg-muted, #f9fafb);
font-weight: 600;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted, #6b7280);
}
.data-table tr:last-child td[b-ro6q03nput] { border-bottom: none; }
.error-cell[b-ro6q03nput] {
color: #991b1b;
font-family: ui-monospace, "SF Mono", monospace;
font-size: 0.75rem;
max-width: 360px;
word-break: break-word;
}
.row-actions[b-ro6q03nput] {
display: flex;
gap: 0.35rem;
justify-content: flex-end;
}
.backfill-banner[b-ro6q03nput] {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 1rem;
align-items: center;
padding: 1rem 1.25rem;
background: rgba(245, 158, 11, 0.08);
border: 1px solid rgba(245, 158, 11, 0.3);
border-left: 4px solid #f59e0b;
border-radius: 8px;
margin: 1.5rem 0;
}
.backfill-banner-icon[b-ro6q03nput] {
font-size: 1.5rem;
color: #b45309;
}
.backfill-banner-body[b-ro6q03nput] { min-width: 0; }
.backfill-banner-headline[b-ro6q03nput] {
font-size: 1rem;
margin-bottom: 0.4rem;
}
.backfill-banner-sub[b-ro6q03nput] {
font-size: 0.825rem;
color: var(--text-muted, #6b7280);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
}
.backfill-banner-result[b-ro6q03nput] {
margin-top: 0.6rem;
font-size: 0.85rem;
color: #15803d;
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.75rem;
background: rgba(34, 197, 94, 0.1);
border-radius: 6px;
}
.backfill-banner-actions[b-ro6q03nput] {
display: flex;
align-items: flex-end;
gap: 0.75rem;
}
.backfill-cap-label[b-ro6q03nput] {
display: flex;
flex-direction: column;
gap: 0.3rem;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted, #6b7280);
}
.backfill-cap-input[b-ro6q03nput] {
width: 6rem;
height: 32px;
padding: 0 0.6rem;
font-size: 0.875rem;
border: 1px solid var(--border, #cbd5e1);
border-radius: 8px;
font-family: ui-monospace, "SF Mono", monospace;
text-align: right;
box-sizing: border-box;
transition: border-color .12s ease, box-shadow .12s ease;
}
.backfill-cap-input:focus[b-ro6q03nput] {
outline: none;
border-color: var(--brand-500, #2563eb);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.backfill-banner-actions .btn[b-ro6q03nput] { height: 32px; }
.resolve-summary[b-ro6q03nput] { flex: 1; min-width: 0; }
.resolve-list[b-ro6q03nput] {
margin: 0.5rem 0 0;
padding-left: 1.25rem;
font-size: 0.8rem;
font-family: ui-monospace, "SF Mono", monospace;
color: var(--text-muted, #4b5563);
}
.resolve-list li[b-ro6q03nput] { margin: 0.15rem 0; }
.resolve-list code[b-ro6q03nput] { font-size: inherit; padding: 0 0.2rem; background: rgba(0,0,0,0.04); border-radius: 3px; }
.resolve-list-fail[b-ro6q03nput] { color: #991b1b; }
.resolve-list-fail code[b-ro6q03nput] { background: rgba(239, 68, 68, 0.1); }
.resolve-tip[b-ro6q03nput] {
margin-top: 0.5rem;
font-size: 0.8rem;
color: var(--text-muted, #4b5563);
}
/* ── NetSuite catalog diagnostic ──────────────────────────────────────── */
.catalog-details[b-ro6q03nput] {
margin-top: 0.6rem;
font-size: 0.8rem;
}
.catalog-details summary[b-ro6q03nput] {
cursor: pointer;
padding: 0.25rem 0;
font-weight: 500;
color: var(--text-muted, #4b5563);
}
.catalog-table[b-ro6q03nput] {
width: 100%;
margin-top: 0.4rem;
border-collapse: collapse;
font-size: 0.75rem;
font-family: ui-monospace, "SF Mono", monospace;
}
.catalog-table th[b-ro6q03nput], .catalog-table td[b-ro6q03nput] {
padding: 0.3rem 0.5rem;
border-bottom: 1px solid var(--border, #e5e7eb);
text-align: left;
vertical-align: top;
}
.catalog-table th[b-ro6q03nput] {
background: var(--bg-muted, #f9fafb);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted, #6b7280);
font-size: 0.7rem;
}
.catalog-table tr:last-child td[b-ro6q03nput] { border-bottom: none; }
.catalog-table code[b-ro6q03nput] { background: rgba(0,0,0,0.04); padding: 0 0.25rem; border-radius: 3px; }
.catalog-table .muted[b-ro6q03nput] { color: var(--text-muted, #9ca3af); }
.badge-info[b-ro6q03nput] {
display: inline-flex;
align-items: center;
padding: 0.1rem 0.5rem;
background: rgba(59, 130, 246, 0.12);
color: #1e40af;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 500;
}
.badge-warn[b-ro6q03nput] {
display: inline-flex;
align-items: center;
padding: 0.1rem 0.5rem;
background: rgba(245, 158, 11, 0.12);
color: #92400e;
border: 1px solid rgba(245, 158, 11, 0.3);
border-radius: 4px;
font-size: 0.75rem;
font-weight: 500;
}
.subsidiary-error-panel[b-ro6q03nput] {
margin-top: 0.6rem;
padding: 0.9rem 1.1rem;
background: rgba(239, 68, 68, 0.06);
border: 1px solid rgba(239, 68, 68, 0.3);
border-left: 4px solid #dc2626;
border-radius: 8px;
font-size: 0.85rem;
}
.subsidiary-error-headline[b-ro6q03nput] {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
color: #991b1b;
margin-bottom: 0.4rem;
}
.subsidiary-error-detail[b-ro6q03nput] {
font-family: ui-monospace, "SF Mono", monospace;
font-size: 0.75rem;
color: #7f1d1d;
background: rgba(239, 68, 68, 0.08);
padding: 0.5rem 0.75rem;
border-radius: 4px;
margin-bottom: 0.6rem;
word-break: break-word;
}
.subsidiary-error-detail code[b-ro6q03nput] {
background: transparent;
color: inherit;
padding: 0;
}
.subsidiary-error-fix[b-ro6q03nput] {
color: var(--text-primary, #374151);
line-height: 1.5;
}
.subsidiary-error-steps[b-ro6q03nput] {
margin: 0.4rem 0 0.6rem 0;
padding-left: 1.4rem;
}
.subsidiary-error-steps li[b-ro6q03nput] {
margin: 0.2rem 0;
}
.subsidiary-empty-note[b-ro6q03nput] {
margin-top: 0.6rem;
padding: 0.65rem 0.9rem;
background: rgba(59, 130, 246, 0.06);
border: 1px solid rgba(59, 130, 246, 0.25);
border-radius: 6px;
font-size: 0.8rem;
color: #1e3a8a;
display: flex;
gap: 0.5rem;
align-items: flex-start;
}
.subsidiary-error-actions[b-ro6q03nput] {
display: flex;
gap: 0.6rem;
flex-wrap: wrap;
margin: 0.6rem 0;
}
.ns-deep-link[b-ro6q03nput] {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.45rem 0.85rem;
background: var(--bg-surface, #fff);
color: var(--text-primary, #374151);
border: 1px solid var(--border, #d1d5db);
border-radius: 6px;
font-size: 0.825rem;
font-weight: 500;
text-decoration: none;
transition: all 0.15s;
}
.ns-deep-link:hover[b-ro6q03nput] {
background: var(--bg-hover, #f3f4f6);
text-decoration: none;
color: var(--text-primary, #374151);
}
.ns-deep-link-primary[b-ro6q03nput] {
background: #2563eb;
color: #fff;
border-color: #2563eb;
}
.ns-deep-link-primary:hover[b-ro6q03nput] {
background: #1d4ed8;
color: #fff;
}
.ns-deep-link-hint[b-ro6q03nput] {
opacity: 0.75;
font-weight: 400;
font-size: 0.85em;
}
.ns-deep-link-out[b-ro6q03nput] {
opacity: 0.6;
font-size: 0.8em;
margin-left: 0.1rem;
}
.subsidiary-error-detailed-steps[b-ro6q03nput] {
margin-top: 0.6rem;
font-size: 0.825rem;
}
.subsidiary-error-detailed-steps summary[b-ro6q03nput] {
cursor: pointer;
color: var(--text-muted, #6b7280);
font-weight: 500;
padding: 0.25rem 0;
}
.subsidiary-error-detailed-steps[open] summary[b-ro6q03nput] {
color: var(--text-primary, #374151);
}
.badge-warn code[b-ro6q03nput] {
background: rgba(245, 158, 11, 0.18);
padding: 0 0.2rem;
border-radius: 3px;
font-size: 0.9em;
}
/* ── Current configuration table (catalog panel "what's mapped" view) ── */
.catalog-roles-table td[b-ro6q03nput],
.catalog-roles-table th[b-ro6q03nput] {
vertical-align: middle;
}
.role-field-name[b-ro6q03nput] {
color: var(--text-muted, #9ca3af);
font-size: 0.7rem;
font-family: ui-monospace, "SF Mono", monospace;
margin-left: 0.35rem;
}
.role-status-pill[b-ro6q03nput] {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.15rem 0.55rem;
border-radius: 9999px;
font-size: 0.7rem;
font-weight: 600;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
letter-spacing: 0.01em;
white-space: nowrap;
}
.role-status-pill .bi[b-ro6q03nput] {
font-size: 0.85em;
}
.role-status-ok[b-ro6q03nput] {
background: rgba(34, 197, 94, 0.15);
color: #166534;
border: 1px solid rgba(34, 197, 94, 0.35);
}
.role-status-pending[b-ro6q03nput] {
background: rgba(59, 130, 246, 0.12);
color: #1e40af;
border: 1px solid rgba(59, 130, 246, 0.35);
}
.role-status-warn[b-ro6q03nput] {
background: rgba(245, 158, 11, 0.15);
color: #92400e;
border: 1px solid rgba(245, 158, 11, 0.4);
}
.role-status-fail[b-ro6q03nput] {
background: rgba(239, 68, 68, 0.12);
color: #991b1b;
border: 1px solid rgba(239, 68, 68, 0.35);
}
.role-status-muted[b-ro6q03nput] {
background: rgba(107, 114, 128, 0.1);
color: var(--text-muted, #6b7280);
border: 1px solid rgba(107, 114, 128, 0.25);
}
/* Suggested-role highlighting in the catalog items table */
.suggestion-count[b-ro6q03nput] {
color: #15803d;
}
.catalog-row-suggested[b-ro6q03nput] {
background: rgba(34, 197, 94, 0.06);
}
.catalog-row-suggested code[b-ro6q03nput] {
background: rgba(34, 197, 94, 0.14) !important;
color: #166534;
}
.role-pill[b-ro6q03nput] {
display: inline-block;
padding: 0.15rem 0.55rem;
background: rgba(34, 197, 94, 0.15);
color: #166534;
border: 1px solid rgba(34, 197, 94, 0.35);
border-radius: 9999px;
font-size: 0.7rem;
font-weight: 600;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
letter-spacing: 0.01em;
white-space: nowrap;
}
.badge-success[b-ro6q03nput] {
display: inline-flex;
align-items: center;
padding: 0.1rem 0.5rem;
background: rgba(34, 197, 94, 0.14);
color: #166534;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 500;
}
.catalog-apply-row[b-ro6q03nput] {
margin-top: 0.65rem;
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.apply-result-msg[b-ro6q03nput] {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.85rem;
}
.apply-result-ok[b-ro6q03nput] { color: #15803d; }
.apply-result-fail[b-ro6q03nput] { color: #991b1b; }
.apply-result-msg .muted[b-ro6q03nput] { color: var(--text-muted, #6b7280); }
/* ── Health pill ──────────────────────────────────────────────────────── */
.health-pill[b-ro6q03nput] {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.2rem 0.65rem 0.2rem 0.5rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
border: 1px solid transparent;
line-height: 1;
}
.health-pill .health-dot[b-ro6q03nput] {
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
.health-pill.health-ok[b-ro6q03nput] { background: rgba(34, 197, 94, 0.12); color: #15803d; border-color: rgba(34, 197, 94, 0.3); }
.health-pill.health-pending[b-ro6q03nput] { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; border-color: rgba(59, 130, 246, 0.3); }
.health-pill.health-warn[b-ro6q03nput] { background: rgba(245, 158, 11, 0.12); color: #b45309; border-color: rgba(245, 158, 11, 0.3); }
.health-pill.health-bad[b-ro6q03nput] { background: rgba(239, 68, 68, 0.12); color: #b91c1c; border-color: rgba(239, 68, 68, 0.3); }
.health-pill.health-pending .health-dot[b-ro6q03nput] {
animation: health-pulse-b-ro6q03nput 1.6s ease-in-out infinite;
}
@keyframes health-pulse-b-ro6q03nput {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
/* ── iOS-style switch toggle (Auto-refresh) ──────────────────────────── */
.switch-toggle[b-ro6q03nput] {
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
user-select: none;
font-size: 0.8rem;
font-weight: 500;
color: var(--text-muted, #4b5563);
margin: 0;
padding: 0 0.25rem;
height: 36px;
}
.switch-toggle input[type="checkbox"][b-ro6q03nput] {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
}
.switch-toggle .switch-track[b-ro6q03nput] {
position: relative;
width: 34px;
height: 20px;
background: var(--border-medium, #cbd5e1);
border-radius: 9999px;
transition: background .18s ease;
flex-shrink: 0;
}
.switch-toggle .switch-thumb[b-ro6q03nput] {
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
background: #fff;
border-radius: 50%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
transition: transform .18s ease;
}
.switch-toggle input:checked + .switch-track[b-ro6q03nput] {
background: var(--brand-500, #2563eb);
}
.switch-toggle input:checked + .switch-track .switch-thumb[b-ro6q03nput] {
transform: translateX(14px);
}
.switch-toggle input:focus-visible + .switch-track[b-ro6q03nput] {
outline: 2px solid var(--brand-400, #60a5fa);
outline-offset: 2px;
}
.switch-toggle:hover .switch-track:not(:has(input:checked))[b-ro6q03nput] {
background: var(--text-disabled, #94a3b8);
}
.switch-toggle .switch-label[b-ro6q03nput] {
white-space: nowrap;
color: var(--text-primary, #1f2937);
}
.stat-sub-muted[b-ro6q03nput] {
font-size: 0.75rem;
color: var(--text-muted, #6b7280);
}
/* ── Failed rows filter bar ───────────────────────────────────────────── */
.filter-bar[b-ro6q03nput] {
display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
background: var(--bg-surface, #fff);
border: 1px solid var(--border, #e5e7eb); border-radius: 12px; padding: 14px 16px;
margin-bottom: 0.75rem;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.f-field[b-ro6q03nput] { display: flex; flex-direction: column; gap: 4px; flex: 1 1 180px; min-width: 130px; }
.f-field.f-sm[b-ro6q03nput] { flex: 0 0 160px; }
.f-field.f-search[b-ro6q03nput] { flex: 1 1 240px; }
.f-field label[b-ro6q03nput] {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted, #6b7280);
}
/* Bootstrap's own .form-select-sm is never overridden app-wide, but leca-theme's
.form-control rule (10px 14px padding, 14px font) fights .form-control-sm for the
Search box — force both back to the same height/type size here so the row lines up. */
.filter-bar .form-select[b-ro6q03nput],
.filter-bar .form-control[b-ro6q03nput] {
height: 34px;
font-size: 13px;
border-radius: 8px;
}
.f-search-input[b-ro6q03nput] { position: relative; display: flex; align-items: center; }
.f-search-input .bi-search[b-ro6q03nput] {
position: absolute;
left: 10px;
font-size: 12px;
color: var(--text-muted, #9ca3af);
pointer-events: none;
}
.f-search-input input.form-control[b-ro6q03nput] { padding-left: 30px; }
.f-actions[b-ro6q03nput] { display: flex; align-items: center; }
/* ── Selection + error trigger ───────────────────────────────────────── */
.select-cell[b-ro6q03nput] {
width: 32px;
text-align: center;
}
.select-cell input[type="checkbox"][b-ro6q03nput] { cursor: pointer; margin: 0; }
.row-selected[b-ro6q03nput] { background: rgba(59, 130, 246, 0.06); }
.error-trigger[b-ro6q03nput] {
background: transparent;
border: 0;
padding: 0;
margin: 0;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
text-decoration: underline dotted;
text-decoration-color: rgba(153, 27, 27, 0.4);
text-underline-offset: 3px;
}
.error-trigger:hover[b-ro6q03nput] { color: #7f1d1d; text-decoration-color: currentColor; }
/* ── Pagination bar ──────────────────────────────────────────────────── */
.pagination-bar[b-ro6q03nput] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.6rem 0.85rem;
border-top: 1px solid var(--border, #e5e7eb);
background: var(--bg-muted, #f9fafb);
font-size: 0.8rem;
color: var(--text-muted, #6b7280);
}
.pagination-actions[b-ro6q03nput] { display: flex; gap: 0.4rem; }
/* ── Error detail modal ──────────────────────────────────────────────── */
.error-detail-meta[b-ro6q03nput] {
display: grid;
grid-template-columns: max-content 1fr;
gap: 0.4rem 1rem;
font-size: 0.85rem;
margin: 0 0 1rem;
}
.error-detail-meta dt[b-ro6q03nput] {
color: var(--text-muted, #6b7280);
font-weight: 600;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.error-detail-meta dd[b-ro6q03nput] { margin: 0; }
.error-detail-text[b-ro6q03nput] {
background: #0f172a;
color: #f1f5f9;
padding: 0.85rem 1rem;
border-radius: 6px;
font-size: 0.78rem;
font-family: ui-monospace, "SF Mono", monospace;
white-space: pre-wrap;
word-break: break-word;
max-height: 280px;
overflow: auto;
}
/* /Components/Pages/Admin/NetSuiteTestPage.razor.rz.scp.css */
/* NetSuite RESTlet Test — design aligned with /admin/netsuite-sync
(NetSuiteSyncPage.razor.css): toolbar header, card-section cards with
ico-* tiles, data-table config, ping-result banners, role-status pills.
Buttons are the global theme's flat btn btn-sm variants (button canon). */
.netsuite-test-page[b-k20e2frlbv] {
padding: 1.5rem 2rem;
max-width: 1200px;
margin: 0 auto;
}
/* ── Toolbar card (icon tile + title/subtitle + actions) ─────────────── */
.logs-toolbar[b-k20e2frlbv] {
display: flex; justify-content: space-between; align-items: center; gap: 16px;
padding: 12px 16px; background: var(--bg-surface, #fff);
border: 1px solid var(--border, #e5e7eb); border-radius: 12px;
margin-bottom: 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); flex-wrap: wrap;
}
.tb-left[b-k20e2frlbv] { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.tb-icon[b-k20e2frlbv] {
width: 40px; height: 40px; border-radius: 10px;
background: linear-gradient(135deg, var(--brand-500, #2563eb), var(--brand-700, #1e40af));
color: #fff; display: flex; align-items: center; justify-content: center;
font-size: 19px; flex-shrink: 0;
box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
}
.tb-title[b-k20e2frlbv] {
font-size: 17px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.2;
display: inline-flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
}
.tb-subtitle[b-k20e2frlbv] {
font-size: 12.5px; color: var(--text-muted, #6b7280); margin-top: 2px;
display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.tb-right[b-k20e2frlbv] { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.scope-pill[b-k20e2frlbv] {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--text-muted, #6c757d);
text-decoration: none;
}
.scope-pill:hover[b-k20e2frlbv] { text-decoration: underline; }
/* ── Health pill (readiness) ─────────────────────────────────────────── */
.health-pill[b-k20e2frlbv] {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.2rem 0.65rem 0.2rem 0.5rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
border: 1px solid transparent;
line-height: 1;
}
.health-pill .health-dot[b-k20e2frlbv] {
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
.health-pill.health-ok[b-k20e2frlbv] { background: rgba(34, 197, 94, 0.12); color: #15803d; border-color: rgba(34, 197, 94, 0.3); }
.health-pill.health-warn[b-k20e2frlbv] { background: rgba(245, 158, 11, 0.12); color: #b45309; border-color: rgba(245, 158, 11, 0.3); }
/* ── Card sections ───────────────────────────────────────────────────── */
.card-section[b-k20e2frlbv] {
background: var(--bg-surface, #fff);
border: 1px solid var(--border, #e5e7eb);
border-radius: 8px;
overflow: hidden;
margin-bottom: 1.5rem;
}
.card-header[b-k20e2frlbv] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 12px 16px;
background: var(--bg-muted, #f9fafb);
border-bottom: 1px solid var(--border, #e5e7eb);
}
.card-header-left[b-k20e2frlbv] { display: flex; align-items: center; gap: 10px; }
.card-header-icon[b-k20e2frlbv] {
width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.card-header-title[b-k20e2frlbv] {
font-size: 0.95rem;
font-weight: 700;
color: var(--text-primary, #1f2937);
}
.ico-blue[b-k20e2frlbv] { background: #eef2ff; color: #4f46e5; }
.ico-green[b-k20e2frlbv] { background: #dcfce7; color: #16a34a; }
.ico-amber[b-k20e2frlbv] { background: #fef3c7; color: #d97706; }
.stat-sub-muted[b-k20e2frlbv] {
font-size: 0.75rem;
color: var(--text-muted, #6b7280);
}
/* ── Config table ────────────────────────────────────────────────────── */
.data-table[b-k20e2frlbv] {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.data-table td[b-k20e2frlbv] {
padding: 0.6rem 0.85rem;
text-align: left;
border-bottom: 1px solid var(--border, #e5e7eb);
vertical-align: middle;
}
.data-table tr:last-child td[b-k20e2frlbv] { border-bottom: none; }
.cfg-label[b-k20e2frlbv] {
font-weight: 600;
color: var(--text-muted, #6b7280);
width: 280px;
}
.data-table code[b-k20e2frlbv] {
background: rgba(0, 0, 0, 0.04);
padding: 0.1rem 0.35rem;
border-radius: 4px;
font-size: 0.78rem;
font-family: ui-monospace, "SF Mono", monospace;
word-break: break-all;
}
/* ── Step bodies ─────────────────────────────────────────────────────── */
.step-body[b-k20e2frlbv] {
padding: 1rem 1.25rem 1.25rem;
}
.step-desc[b-k20e2frlbv] {
font-size: 0.825rem;
color: var(--text-muted, #6b7280);
max-width: 720px;
margin-bottom: 0.85rem;
}
.step-desc code[b-k20e2frlbv] {
background: rgba(0, 0, 0, 0.04);
padding: 0 0.25rem;
border-radius: 3px;
font-size: 0.9em;
}
.step-input-row[b-k20e2frlbv] {
display: flex;
gap: 12px;
align-items: flex-end;
flex-wrap: wrap;
margin-bottom: 0.25rem;
}
.f-field[b-k20e2frlbv] { display: flex; flex-direction: column; gap: 4px; }
.f-field.f-sm[b-k20e2frlbv] { flex: 0 0 320px; min-width: 220px; }
.f-field label[b-k20e2frlbv] {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted, #6b7280);
}
.step-input-row .form-control[b-k20e2frlbv] {
height: 34px;
font-size: 13px;
border-radius: 8px;
font-family: ui-monospace, "SF Mono", monospace;
}
.step-input-row .btn[b-k20e2frlbv] { height: 34px; }
/* ── Result banners (same shape as the sync page's ping result) ─────── */
.ping-result[b-k20e2frlbv] {
display: flex;
align-items: flex-start;
gap: 0.5rem;
padding: 0.75rem 1rem;
border-radius: 6px;
margin-top: 0.85rem;
font-size: 0.875rem;
}
.ping-result code[b-k20e2frlbv] {
background: rgba(0, 0, 0, 0.06);
padding: 0 0.25rem;
border-radius: 3px;
font-size: 0.9em;
}
.ping-success[b-k20e2frlbv] {
background: rgba(34, 197, 94, 0.1);
color: #166534;
border: 1px solid rgba(34, 197, 94, 0.3);
}
.ping-fail[b-k20e2frlbv] {
background: rgba(239, 68, 68, 0.1);
color: #991b1b;
border: 1px solid rgba(239, 68, 68, 0.3);
}
/* ── Status pills (config verdicts) ──────────────────────────────────── */
.role-status-pill[b-k20e2frlbv] {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.15rem 0.55rem;
border-radius: 9999px;
font-size: 0.7rem;
font-weight: 600;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
letter-spacing: 0.01em;
white-space: nowrap;
}
.role-status-pill .bi[b-k20e2frlbv] { font-size: 0.85em; }
.role-status-ok[b-k20e2frlbv] {
background: rgba(34, 197, 94, 0.15);
color: #166534;
border: 1px solid rgba(34, 197, 94, 0.35);
}
.role-status-warn[b-k20e2frlbv] {
background: rgba(245, 158, 11, 0.15);
color: #92400e;
border: 1px solid rgba(245, 158, 11, 0.4);
}
.role-status-fail[b-k20e2frlbv] {
background: rgba(239, 68, 68, 0.12);
color: #991b1b;
border: 1px solid rgba(239, 68, 68, 0.35);
}
/* /Components/Pages/Admin/OrganizationsPage.razor.rz.scp.css */
/* ========================================
Organizations Page — Modern Card Layout
======================================== */
.org-page[b-t7f3m7ntk4] {
padding: 0;
}
/* Header */
.org-header[b-t7f3m7ntk4] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 20px;
flex-wrap: wrap;
gap: 16px;
}
.org-title[b-t7f3m7ntk4] {
font-size: 1.5rem;
font-weight: 700;
color: #1F2937;
margin: 0;
}
.org-subtitle[b-t7f3m7ntk4] {
font-size: 13px;
color: #64748B;
margin: 4px 0 0;
}
.org-header-stats[b-t7f3m7ntk4] {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.stat-chip[b-t7f3m7ntk4] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: #F8FAFC;
border: 1px solid #E2E8F0;
border-radius: 10px;
font-size: 13px;
}
.stat-chip i[b-t7f3m7ntk4] { color: var(--brand-500); font-size: 14px; }
.stat-chip-success i[b-t7f3m7ntk4] { color: #059669; }
.stat-chip-info i[b-t7f3m7ntk4] { color: #2563EB; }
.stat-chip-warning i[b-t7f3m7ntk4] { color: #D97706; }
.stat-chip-value[b-t7f3m7ntk4] { font-weight: 700; color: #1F2937; }
.stat-chip-label[b-t7f3m7ntk4] { color: #64748B; font-weight: 500; }
/* Banks / Agencies Tabs */
.org-tabs[b-t7f3m7ntk4] {
display: flex;
gap: 6px;
margin-bottom: 16px;
border-bottom: 1.5px solid #E2E8F0;
}
.org-tab[b-t7f3m7ntk4] {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 18px;
border: none;
border-bottom: 2.5px solid transparent;
background: transparent;
color: #64748B;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
margin-bottom: -1.5px;
}
.org-tab:hover[b-t7f3m7ntk4] { color: var(--brand-500); }
.org-tab.active[b-t7f3m7ntk4] { color: var(--brand-500); border-bottom-color: var(--brand-500); }
.org-tab i[b-t7f3m7ntk4] { font-size: 14px; }
.org-tab-hint[b-t7f3m7ntk4] {
margin: 0;
color: #64748B;
font-size: 12.5px;
max-width: 640px;
}
.org-tab-hint-standalone[b-t7f3m7ntk4] {
max-width: none;
margin: -8px 2px 16px;
}
.org-status-internal[b-t7f3m7ntk4] { background: #EEF2FF; color: #4F46E5; }
/* Filter Bar */
.org-filter-bar[b-t7f3m7ntk4] {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 14px 18px;
background: #F8FAFC;
border: 1px solid #E2E8F0;
border-radius: 12px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.filter-left[b-t7f3m7ntk4], .filter-right[b-t7f3m7ntk4] {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.status-chips[b-t7f3m7ntk4] {
display: flex;
gap: 6px;
}
.status-chip[b-t7f3m7ntk4] {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 14px;
border: 1.5px solid #E2E8F0;
border-radius: 8px;
background: white;
color: #64748B;
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.status-chip:hover[b-t7f3m7ntk4] { border-color: var(--brand-400); color: var(--brand-500); }
.status-chip.active[b-t7f3m7ntk4] { background: var(--brand-500); color: white; border-color: var(--brand-500); }
.status-chip-active.active[b-t7f3m7ntk4] { background: #059669; border-color: #059669; color: white; }
.status-chip-inactive.active[b-t7f3m7ntk4] { background: #DC2626; border-color: #DC2626; color: white; }
.status-chip i[b-t7f3m7ntk4] { font-size: 12px; }
.chip-count[b-t7f3m7ntk4] { opacity: 0.8; font-weight: 700; }
.sort-select[b-t7f3m7ntk4] {
padding: 6px 12px;
border: 1.5px solid #E2E8F0;
border-radius: 8px;
font-size: 12.5px;
font-weight: 500;
color: #475569;
background: white;
cursor: pointer;
}
.sort-select:focus[b-t7f3m7ntk4] { outline: none; border-color: var(--brand-400); }
.search-box[b-t7f3m7ntk4] {
position: relative;
min-width: 220px;
}
.search-box i[b-t7f3m7ntk4] {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: #94A3B8;
font-size: 14px;
pointer-events: none;
}
.search-box input[b-t7f3m7ntk4] {
padding: 7px 12px 7px 36px;
border: 1.5px solid #E2E8F0;
border-radius: 8px;
font-size: 13px;
width: 100%;
color: #1F2937;
transition: all 0.2s;
}
.search-box input:focus[b-t7f3m7ntk4] { outline: none; border-color: var(--brand-400); box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.06); }
.search-box input[b-t7f3m7ntk4]::placeholder { color: #94A3B8; }
.btn-add-org[b-t7f3m7ntk4] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 18px;
background: var(--brand-600, #004980);
color: white;
border: none;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
white-space: nowrap;
}
.btn-add-org:hover[b-t7f3m7ntk4] { background: var(--brand-700, #003760); }
/* Card Grid */
.org-grid[b-t7f3m7ntk4] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: 16px;
}
.org-card[b-t7f3m7ntk4] {
background: white;
border: 1.5px solid #E2E8F0;
border-radius: 12px;
padding: 20px;
cursor: pointer;
transition: all 0.2s;
display: flex;
flex-direction: column;
gap: 14px;
}
.org-card:hover[b-t7f3m7ntk4] {
border-color: var(--brand-400);
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
transform: translateY(-2px);
}
.org-card-inactive[b-t7f3m7ntk4] {
opacity: 0.7;
background: #FAFAFA;
}
.org-card-inactive:hover[b-t7f3m7ntk4] { opacity: 1; }
/* Card Header */
.org-card-header[b-t7f3m7ntk4] {
display: flex;
align-items: center;
gap: 12px;
}
.org-avatar[b-t7f3m7ntk4] {
width: 44px;
height: 44px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 700;
color: white;
flex-shrink: 0;
}
.org-card-title[b-t7f3m7ntk4] {
flex: 1;
min-width: 0;
}
.org-card-title h3[b-t7f3m7ntk4] {
font-size: 15px;
font-weight: 700;
color: #1F2937;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.org-card-title h3.org-card-title-wrap[b-t7f3m7ntk4] {
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.3;
}
.org-card-badges[b-t7f3m7ntk4] {
display: flex;
align-items: center;
gap: 6px;
margin-top: 3px;
flex-wrap: wrap;
}
.org-code[b-t7f3m7ntk4] {
font-size: 11px;
color: #0D9488;
background: #F0FDFA;
padding: 2px 8px;
border-radius: 4px;
font-weight: 600;
}
.org-status[b-t7f3m7ntk4] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
flex-shrink: 0;
}
.org-status-active[b-t7f3m7ntk4] { background: #ECFDF5; color: #059669; }
.org-status-inactive[b-t7f3m7ntk4] { background: #FEF2F2; color: #DC2626; }
.org-status i[b-t7f3m7ntk4] { font-size: 11px; }
/* Card Stats */
.org-card-stats[b-t7f3m7ntk4] {
display: flex;
gap: 16px;
padding: 10px 14px;
background: #F8FAFC;
border-radius: 8px;
}
.org-stat[b-t7f3m7ntk4] {
display: flex;
align-items: center;
gap: 5px;
font-size: 12.5px;
}
.org-stat i[b-t7f3m7ntk4] { color: #94A3B8; font-size: 13px; }
.org-stat-value[b-t7f3m7ntk4] { font-weight: 700; color: #1F2937; }
.org-stat-label[b-t7f3m7ntk4] { color: #94A3B8; }
/* Card Contact */
.org-card-contact[b-t7f3m7ntk4] {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.org-contact-item[b-t7f3m7ntk4] {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
color: #64748B;
}
.org-contact-item i[b-t7f3m7ntk4] { font-size: 12px; color: #94A3B8; }
/* Card Actions */
.org-card-actions[b-t7f3m7ntk4] {
display: flex;
gap: 8px;
padding-top: 10px;
border-top: 1px solid #F1F5F9;
margin-top: auto;
}
.btn-card-action[b-t7f3m7ntk4] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: 1px solid #E2E8F0;
border-radius: 7px;
background: white;
color: #64748B;
cursor: pointer;
font-size: 14px;
transition: all 0.2s;
}
.btn-card-action:hover[b-t7f3m7ntk4] { background: #F1F5F9; color: #1F2937; border-color: #CBD5E1; }
.btn-card-danger:hover[b-t7f3m7ntk4] { background: #FEF2F2; color: #DC2626; border-color: #FECACA; }
.btn-card-success:hover[b-t7f3m7ntk4] { background: #ECFDF5; color: #059669; border-color: #A7F3D0; }
/* Disabled Delete CTA (bank has users/clients/applications) — muted, no hover, cursor default. */
.btn-card-action:disabled[b-t7f3m7ntk4],
.btn-card-action:disabled:hover[b-t7f3m7ntk4] {
background: #F8FAFC;
color: #CBD5E1;
border-color: #E2E8F0;
cursor: not-allowed;
}
.org-card-view-hint[b-t7f3m7ntk4] {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: auto;
font-size: 12px;
font-weight: 600;
color: #94A3B8;
opacity: 0;
transition: opacity 0.2s, color 0.2s;
}
.org-card:hover .org-card-view-hint[b-t7f3m7ntk4] { opacity: 1; color: var(--brand-500); }
/* Loading & Empty */
.org-loading[b-t7f3m7ntk4] {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 60px 0;
color: #64748B;
}
.org-empty[b-t7f3m7ntk4] {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 60px 0;
text-align: center;
}
.org-empty i[b-t7f3m7ntk4] { font-size: 48px; color: #CBD5E1; }
.org-empty h3[b-t7f3m7ntk4] { font-size: 16px; color: #475569; margin: 0; }
.org-empty p[b-t7f3m7ntk4] { font-size: 13px; color: #94A3B8; margin: 0; }
/* ========================================
Confirm Dialog (SweetAlert-style)
======================================== */
.modal-overlay[b-t7f3m7ntk4] {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 1050;
padding: 1.5rem;
}
/* Confirm dialogs use the global .confirm-modal pattern (wwwroot/css/modal-theme.css). */
/* Responsive */
@media (max-width: 768px) {
.org-filter-bar[b-t7f3m7ntk4] { flex-direction: column; align-items: stretch; }
.filter-left[b-t7f3m7ntk4], .filter-right[b-t7f3m7ntk4] { flex-direction: column; }
.search-box[b-t7f3m7ntk4] { min-width: auto; }
.org-grid[b-t7f3m7ntk4] { grid-template-columns: 1fr; }
.org-card-stats[b-t7f3m7ntk4] { flex-direction: column; gap: 8px; }
}
/* /Components/Pages/Admin/PlaceholderCatalogPage.razor.rz.scp.css */
.pc-page[b-c5jbum54yi] { padding: 0; }
.pc-title[b-c5jbum54yi] { font-size: 1.5rem; font-weight: 700; color: #1F2937; margin: 0; }
.pc-subtitle[b-c5jbum54yi] { font-size: 13px; color: #64748B; margin: 4px 0 0; }
.pc-search[b-c5jbum54yi] { position: relative; }
.pc-search i[b-c5jbum54yi] { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #94A3B8; font-size: 13px; pointer-events: none; }
.pc-search input[b-c5jbum54yi] { width: 100%; padding: 8px 12px 8px 34px; border: 1px solid #E2E8F0; border-radius: 8px; font-size: 13px; background: white; }
.pc-search input:focus[b-c5jbum54yi] { outline: none; border-color: var(--brand-400); }
.pc-btn-add[b-c5jbum54yi] { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--brand-600, #004980); color: white; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.pc-btn-add:hover[b-c5jbum54yi] { background: var(--brand-700, #003760); }
.pc-table-wrap[b-c5jbum54yi] { background: white; border: 1px solid #E2E8F0; border-radius: 12px; overflow: auto; }
.pc-table-wrap table[b-c5jbum54yi] { font-size: 13px; margin: 0; }
.pc-table-wrap thead th[b-c5jbum54yi] { font-size: 11px; text-transform: uppercase; color: #94A3B8; font-weight: 600; padding: 12px; border-bottom: 1px solid #E2E8F0; background: #FAFBFC; position: sticky; top: 0; z-index: 1; }
.pc-table-wrap tbody td[b-c5jbum54yi] { padding: 12px; vertical-align: middle; }
.pc-type-badge[b-c5jbum54yi] { display: inline-block; padding: 3px 8px; border-radius: 5px; font-size: 11px; font-weight: 600; }
.pc-type-badge.type-application[b-c5jbum54yi] { background: #DBEAFE; color: #1E40AF; }
.pc-type-badge.type-policy[b-c5jbum54yi] { background: #DCFCE7; color: #166534; }
.pc-type-badge.type-bank[b-c5jbum54yi] { background: #FEF3C7; color: #92400E; }
.pc-type-badge.type-static[b-c5jbum54yi] { background: #F3F4F6; color: #4B5563; }
.pc-type-badge.type-computed[b-c5jbum54yi] { background: #F3E8FF; color: #6B21A8; }
.pc-type-badge.type-template[b-c5jbum54yi] { background: #CFFAFE; color: #0E7490; }
.pc-type-badge.type-calculated[b-c5jbum54yi] { background: #FEE2E2; color: #991B1B; }
.pc-type-badge.type-fee[b-c5jbum54yi] { background: #FEF3C7; color: #854D0E; }
.pc-action-btn[b-c5jbum54yi] { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 28px; height: 28px; border-radius: 7px; border: 1.5px solid #E2E8F0; background: white; cursor: pointer; font-size: 12px; transition: all 0.15s; }
.pc-badge-count[b-c5jbum54yi] { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--brand-500); color: white; font-size: 9px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.pc-edit[b-c5jbum54yi] { color: var(--brand-500); }
.pc-edit:hover[b-c5jbum54yi] { border-color: var(--brand-400); background: #EFF6FF; }
.pc-delete[b-c5jbum54yi] { color: #94A3B8; }
.pc-delete:hover[b-c5jbum54yi] { border-color: #FECACA; background: #FEF2F2; color: #DC2626; }
/* ===== Test & Preview tester modal ===== */
.pct-modal .modal-content[b-c5jbum54yi] { border-radius: 16px; overflow: hidden; }
.pct-head[b-c5jbum54yi] { background: #fff; padding: 1.25rem 1.5rem 1rem; border-bottom: 1px solid #EEF2F6; display: flex; align-items: center; gap: 0.9rem; }
.pct-head .modal-title[b-c5jbum54yi] { font-size: 1.05rem; font-weight: 700; color: #0F172A; margin: 0; }
.pct-body[b-c5jbum54yi] { padding: 22px 24px; max-height: 82vh; overflow-y: auto; }
.pct-intro[b-c5jbum54yi] { font-size: 12.5px; color: #64748B; line-height: 1.55; margin: 0 0 18px; }
.pct-field[b-c5jbum54yi] { margin-bottom: 15px; }
.pct-label[b-c5jbum54yi] { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: #94A3B8; margin-bottom: 6px; }
.pct-select[b-c5jbum54yi], .pct-file[b-c5jbum54yi] { width: 100%; padding: 9px 12px; border: 1px solid #E2E8F0; border-radius: 10px; font-size: 13px; background: #fff; color: #1F2937; transition: border-color .15s, box-shadow .15s; }
.pct-select:focus[b-c5jbum54yi], .pct-file:focus[b-c5jbum54yi] { outline: none; border-color: var(--brand-400); box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.pct-select:disabled[b-c5jbum54yi] { background: #F8FAFC; color: #94A3B8; cursor: not-allowed; }
.pct-filehint[b-c5jbum54yi] { font-size: 11.5px; color: #94A3B8; margin-top: 5px; }
/* segmented source toggle */
.pct-seg[b-c5jbum54yi] { display: flex; width: 100%; background: #F1F5F9; border-radius: 11px; padding: 4px; gap: 4px; }
.pct-seg input[b-c5jbum54yi] { position: absolute; opacity: 0; pointer-events: none; }
.pct-seg label[b-c5jbum54yi] { flex: 1; text-align: center; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: #64748B; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: all .15s; margin: 0; }
.pct-seg input:checked + label[b-c5jbum54yi] { background: #fff; color: var(--brand-500); box-shadow: 0 1px 3px rgba(15,23,42,.14); }
/* read-only effective-state chip */
.pct-state[b-c5jbum54yi] { display: flex; align-items: center; gap: 9px; padding: 8px 12px; background: #F8FAFC; border: 1px dashed #E2E8F0; border-radius: 9px; }
.pct-state-badge[b-c5jbum54yi] { font-size: 11px; font-weight: 700; color: #3730A3; background: #E0E7FF; padding: 2px 9px; border-radius: 6px; }
.pct-state-hint[b-c5jbum54yi] { font-size: 11.5px; color: #94A3B8; }
/* action buttons */
.pct-actions[b-c5jbum54yi] { display: flex; gap: 8px; flex-wrap: wrap; }
.pct-btn[b-c5jbum54yi] { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: all .15s; }
.pct-btn:disabled[b-c5jbum54yi] { opacity: .5; cursor: not-allowed; }
.pct-btn-primary[b-c5jbum54yi] { background: var(--brand-600, #004980); color: #fff; }
.pct-btn-primary:not(:disabled):hover[b-c5jbum54yi] { background: var(--brand-700, #003760); }
.pct-btn-ghost[b-c5jbum54yi] { background: #fff; color: #475569; border-color: #E2E8F0; }
.pct-btn-ghost:not(:disabled):hover[b-c5jbum54yi] { border-color: var(--brand-400); color: var(--brand-500); background: #F5F3FF; }
.pct-spin[b-c5jbum54yi] { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; display: inline-block; animation: pct-spin-b-c5jbum54yi .6s linear infinite; }
@keyframes pct-spin-b-c5jbum54yi { to { transform: rotate(360deg); } }
/* error alert */
.pct-alert-err[b-c5jbum54yi] { margin-top: 14px; padding: 10px 14px; border-radius: 10px; font-size: 12.5px; background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }
/* results / stats panel */
.pct-result[b-c5jbum54yi] { margin-top: 16px; border: 1px solid #E2E8F0; border-radius: 12px; overflow: hidden; }
.pct-result-head[b-c5jbum54yi] { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: #FAFBFC; flex-wrap: wrap; border-bottom: 1px solid #F1F5F9; }
.pct-stat[b-c5jbum54yi] { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; }
.pct-stat .dot[b-c5jbum54yi] { width: 7px; height: 7px; border-radius: 50%; }
.pct-stat-total[b-c5jbum54yi] { background: #EEF2FF; color: #3730A3; }
.pct-stat-ok[b-c5jbum54yi] { background: #DCFCE7; color: #166534; } .pct-stat-ok .dot[b-c5jbum54yi] { background: #22C55E; }
.pct-stat-warn[b-c5jbum54yi] { background: #FEF3C7; color: #92400E; } .pct-stat-warn .dot[b-c5jbum54yi] { background: #F59E0B; }
.pct-stat-bad[b-c5jbum54yi] { background: #FEE2E2; color: #991B1B; } .pct-stat-bad .dot[b-c5jbum54yi] { background: #EF4444; }
.pct-toggle[b-c5jbum54yi] { margin-left: auto; background: none; border: none; color: var(--brand-500); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 0; }
.pct-toggle:hover[b-c5jbum54yi] { text-decoration: underline; }
.pct-bd[b-c5jbum54yi] { max-height: 34vh; overflow-y: auto; }
.pct-bd table[b-c5jbum54yi] { width: 100%; font-size: 12.5px; border-collapse: collapse; }
.pct-bd thead th[b-c5jbum54yi] { position: sticky; top: 0; background: #F8FAFC; text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: #94A3B8; font-weight: 700; padding: 8px 14px; border-bottom: 1px solid #E2E8F0; }
.pct-bd tbody td[b-c5jbum54yi] { padding: 7px 14px; border-bottom: 1px solid #F1F5F9; vertical-align: middle; }
.pct-bd tbody tr:last-child td[b-c5jbum54yi] { border-bottom: none; }
.pct-tok[b-c5jbum54yi] { font-family: var(--bs-font-monospace, ui-monospace, monospace); font-size: 11.5px; color: #4338CA; background: #EEF2FF; padding: 1px 6px; border-radius: 5px; }
.pct-pill[b-c5jbum54yi] { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.pct-pill .dot[b-c5jbum54yi] { width: 6px; height: 6px; border-radius: 50%; }
.pct-pill-ok[b-c5jbum54yi] { background: #DCFCE7; color: #166534; } .pct-pill-ok .dot[b-c5jbum54yi] { background: #22C55E; }
.pct-pill-warn[b-c5jbum54yi] { background: #FEF3C7; color: #92400E; } .pct-pill-warn .dot[b-c5jbum54yi] { background: #F59E0B; }
.pct-pill-bad[b-c5jbum54yi] { background: #FEE2E2; color: #991B1B; } .pct-pill-bad .dot[b-c5jbum54yi] { background: #EF4444; }
.pct-val[b-c5jbum54yi] { color: #475569; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pct-val.blank[b-c5jbum54yi] { color: #CBD5E1; font-style: italic; }
.pct-bd-hint[b-c5jbum54yi] { font-size: 11.5px; color: #94A3B8; padding: 9px 14px; background: #FAFBFC; border-top: 1px solid #F1F5F9; line-height: 1.5; }
/* preview pane */
.pct-preview-head[b-c5jbum54yi] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pct-preview[b-c5jbum54yi] { border: 1px solid #E2E8F0; border-radius: 12px; overflow: hidden; height: 74vh; background: #F1F5F9; }
.pct-preview iframe[b-c5jbum54yi] { width: 100%; height: 100%; border: 0; }
.pct-empty[b-c5jbum54yi] { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #94A3B8; gap: 10px; text-align: center; padding: 20px; }
.pct-empty i[b-c5jbum54yi] { font-size: 2.6rem; opacity: .45; }
/* footer */
.pct-foot[b-c5jbum54yi] { padding: 1rem 1.5rem; border-top: 1px solid #EEF2F6; background: #FAFBFC; display: flex; justify-content: flex-end; gap: 0.6rem; }
.pct-btn-close[b-c5jbum54yi] { padding: 0.55rem 1.15rem; background: transparent; color: #64748B; border: 1px solid #E2E8F0; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; }
.pct-btn-close:hover[b-c5jbum54yi] { background: #F1F5F9; color: #0F172A; }
/* /Components/Pages/Admin/PolicyDetailPage.razor.rz.scp.css */
/* ========================================
Policy Detail Page Styles
======================================== */
/* Loading & Error States */
.loading-container[b-9r6424lww3],
.error-container[b-9r6424lww3] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 400px;
gap: 1rem;
padding: 2rem;
text-align: center;
}
.loading-container p[b-9r6424lww3] {
color: var(--text-muted, #64748b);
font-size: 0.9375rem;
}
.error-container .error-icon[b-9r6424lww3] {
width: 80px;
height: 80px;
border-radius: 50%;
background: var(--danger-50);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.5rem;
}
.error-container .error-icon i[b-9r6424lww3] {
font-size: 2.5rem;
color: var(--danger-500);
}
.error-container h2[b-9r6424lww3] {
font-size: 1.5rem;
font-weight: 600;
color: var(--text-primary, #0f172a);
margin: 0;
}
.error-container p[b-9r6424lww3] {
color: var(--text-muted, #64748b);
margin: 0 0 1.5rem 0;
}
/* Skeleton loading state */
@keyframes admin-policy-skel-pulse-b-9r6424lww3 {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.skel-block[b-9r6424lww3] {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: admin-policy-skel-pulse-b-9r6424lww3 1.5s ease-in-out infinite;
border-radius: 4px;
}
.policy-skeleton[b-9r6424lww3] {
padding: 1rem;
}
.skel-policy-header[b-9r6424lww3] {
background: #fff;
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 1.5rem;
border: 1px solid var(--border-light);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.skel-back-row[b-9r6424lww3] {
margin-bottom: 1.25rem;
}
.skel-header-content[b-9r6424lww3] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1.5rem;
}
.skel-header-left[b-9r6424lww3] {
display: flex;
align-items: center;
gap: 1rem;
flex: 1;
min-width: 0;
}
.skel-policy-icon[b-9r6424lww3] {
width: 56px;
height: 56px;
border-radius: 14px;
flex-shrink: 0;
}
.skel-title-section[b-9r6424lww3] {
flex: 1;
}
.skel-action-btn[b-9r6424lww3] {
width: 100px;
height: 36px;
border-radius: 8px;
}
.skel-tabs-row[b-9r6424lww3] {
display: flex;
gap: 0.5rem;
padding: 1rem;
background: var(--neutral-50);
border-radius: var(--radius-lg);
border: 1px solid var(--border-light);
margin-bottom: 1.25rem;
}
.skel-overview-grid[b-9r6424lww3] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
background: #fff;
border-radius: var(--radius-lg);
border: 1px solid var(--border-light);
padding: 1.5rem;
}
.skel-detail-card[b-9r6424lww3] {
background: var(--neutral-50);
border: 1px solid var(--border-light);
border-radius: 10px;
padding: 1.25rem;
}
@media (max-width: 767.98px) {
.skel-overview-grid[b-9r6424lww3] {
grid-template-columns: 1fr;
}
.skel-header-content[b-9r6424lww3] {
flex-direction: column;
}
}
/* Header */
.policy-detail-header[b-9r6424lww3] {
background: white;
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 1.5rem;
border: 1px solid var(--border-light);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.header-nav[b-9r6424lww3] {
margin-bottom: 1rem;
}
.back-link[b-9r6424lww3] {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--text-secondary, #64748b);
text-decoration: none;
transition: color 0.15s ease;
}
.back-link:hover[b-9r6424lww3] {
color: var(--brand-600);
}
.back-link i[b-9r6424lww3] {
font-size: 1rem;
}
.header-content[b-9r6424lww3] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1.5rem;
}
.header-left[b-9r6424lww3] {
display: flex;
flex-direction: row;
align-items: center;
gap: 1rem;
flex: 1;
min-width: 0;
}
.policy-icon[b-9r6424lww3] {
width: 56px;
height: 56px;
border-radius: 14px;
background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-600) 100%);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}
.policy-icon i[b-9r6424lww3] {
font-size: 1.5rem;
color: white;
}
.policy-title-section[b-9r6424lww3] {
flex: 1;
min-width: 0;
}
.policy-number-row[b-9r6424lww3] {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.5rem;
}
.policy-number-row h1[b-9r6424lww3] {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary, #0f172a);
margin: 0;
}
.status-badge[b-9r6424lww3] {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0.75rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.025em;
}
.status-badge i[b-9r6424lww3] {
font-size: 0.7rem;
}
.status-active[b-9r6424lww3] {
background: var(--success-100);
color: var(--success-700);
}
.status-pending[b-9r6424lww3] {
background: var(--warning-100);
color: var(--warning-700);
}
.status-expired[b-9r6424lww3] {
background: var(--neutral-100);
color: var(--neutral-600);
}
.status-cancelled[b-9r6424lww3] {
background: var(--danger-100);
color: var(--danger-700);
}
.status-inactive[b-9r6424lww3] {
background: var(--neutral-200);
color: var(--neutral-600);
}
.policy-meta[b-9r6424lww3] {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.meta-item[b-9r6424lww3] {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.875rem;
color: var(--text-secondary, #64748b);
}
.meta-item i[b-9r6424lww3] {
font-size: 1rem;
}
.meta-item.text-warning[b-9r6424lww3] {
color: var(--warning-600);
}
.meta-divider[b-9r6424lww3] {
width: 1px;
height: 14px;
background: var(--border-medium);
}
.header-actions[b-9r6424lww3] {
display: flex;
gap: 0.625rem;
flex-shrink: 0;
}
.btn-secondary[b-9r6424lww3] {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 500;
background: transparent;
color: #64748B;
border: 1px solid #E2E8F0;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-secondary:hover:not(:disabled)[b-9r6424lww3] {
background: #F1F5F9;
color: #0F172A;
}
.btn-secondary:disabled[b-9r6424lww3] {
opacity: 0.6;
cursor: not-allowed;
}
.btn-danger-outline:hover:not(:disabled)[b-9r6424lww3] {
background: var(--danger-50);
border-color: var(--danger-300);
color: var(--error-600);
}
.btn-success-outline:hover:not(:disabled)[b-9r6424lww3] {
background: var(--success-50);
border-color: var(--success-300);
color: var(--success-600);
}
.btn-primary[b-9r6424lww3] {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1.25rem;
font-size: 0.875rem;
font-weight: 600;
line-height: 1;
background: var(--brand-600, #004980);
color: white;
border: none;
border-radius: var(--radius-pill, 9999px);
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-primary i[b-9r6424lww3] {
font-size: 0.9375rem;
}
.btn-primary:hover:not(:disabled)[b-9r6424lww3] {
background: var(--brand-700, #003760);
}
.btn-primary:disabled[b-9r6424lww3] {
opacity: 0.6;
cursor: not-allowed;
}
/* Tabs — modern segmented pill control */
.policy-tabs[b-9r6424lww3] {
display: inline-flex;
gap: 4px;
padding: 6px;
background: var(--neutral-50);
border-radius: var(--radius-lg);
border: 1px solid var(--border-light);
margin-bottom: 1.25rem;
max-width: 100%;
overflow-x: auto;
}
.policy-tab[b-9r6424lww3] {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1.125rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--text-secondary, #64748b);
background: transparent;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
}
.policy-tab:hover[b-9r6424lww3] {
color: var(--brand-600);
background: rgba(15, 23, 42, 0.04);
}
.policy-tab.active[b-9r6424lww3] {
color: var(--brand-600);
background: white;
box-shadow: var(--shadow-sm);
}
.policy-tab i[b-9r6424lww3] {
font-size: 1rem;
}
.tab-badge[b-9r6424lww3] {
padding: 0.125rem 0.5rem;
font-size: 0.75rem;
font-weight: 600;
background: var(--brand-100);
color: var(--brand-700);
border-radius: 10px;
}
.policy-tab.active .tab-badge[b-9r6424lww3] {
background: var(--brand-500);
color: white;
}
/* Content */
.policy-content[b-9r6424lww3] {
background: white;
border-radius: var(--radius-lg);
border: 1px solid var(--border-light);
padding: 1.5rem;
min-height: 400px;
}
/* Overview Layout — a simple vertical stack of full-width cards */
.overview-stack[b-9r6424lww3] {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.detail-card[b-9r6424lww3] {
background: var(--neutral-50);
border: 1px solid var(--border-light);
border-radius: 10px;
overflow: hidden;
}
.detail-card .card-header[b-9r6424lww3] {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.875rem 1.25rem;
background: white;
border-bottom: 1px solid var(--border-light);
}
.detail-card .card-header i[b-9r6424lww3] {
font-size: 1rem;
color: var(--brand-500);
}
.detail-card .card-header h3[b-9r6424lww3] {
font-size: 0.9375rem;
font-weight: 600;
color: var(--text-primary, #0f172a);
margin: 0;
}
.detail-card .card-body[b-9r6424lww3] {
padding: 1.25rem;
}
.detail-grid[b-9r6424lww3] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 1.25rem;
}
.card-footer[b-9r6424lww3] {
padding: 0.75rem 1.25rem;
border-top: 1px solid var(--border-light);
background: white;
}
.audit-footer[b-9r6424lww3] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
font-size: 0.8125rem;
color: var(--text-muted, #94a3b8);
}
.audit-item[b-9r6424lww3] {
display: inline-flex;
align-items: center;
gap: 0.375rem;
}
.audit-separator[b-9r6424lww3] {
color: var(--border-medium);
}
.detail-item[b-9r6424lww3] {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.detail-label[b-9r6424lww3] {
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.025em;
color: var(--text-muted, #94a3b8);
}
.detail-value[b-9r6424lww3] {
font-size: 0.9375rem;
color: var(--text-primary, #0f172a);
}
.detail-value.text-warning[b-9r6424lww3] {
color: var(--warning-600);
}
.status-badge-sm[b-9r6424lww3] {
display: inline-flex;
padding: 0.25rem 0.625rem;
font-size: 0.75rem;
font-weight: 600;
border-radius: 6px;
}
.warning-badge[b-9r6424lww3] {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.125rem 0.5rem;
font-size: 0.6875rem;
font-weight: 600;
background: var(--warning-100);
color: var(--warning-700);
border-radius: 4px;
}
.description-section[b-9r6424lww3],
.notes-section[b-9r6424lww3] {
margin: 0;
}
.description-section h4[b-9r6424lww3],
.notes-section h4[b-9r6424lww3] {
font-size: 0.8125rem;
font-weight: 600;
color: var(--text-secondary, #64748b);
margin: 0 0 0.5rem 0;
}
.description-section p[b-9r6424lww3],
.notes-section p[b-9r6424lww3] {
font-size: 0.9375rem;
color: var(--text-primary, #0f172a);
line-height: 1.6;
margin: 0;
white-space: pre-wrap;
}
/* Documents Section */
.documents-section[b-9r6424lww3],
.applications-section[b-9r6424lww3] {
min-height: 300px;
}
.section-header[b-9r6424lww3] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1.5rem;
}
.section-title h3[b-9r6424lww3] {
font-size: 1.125rem;
font-weight: 600;
color: var(--text-primary, #0f172a);
margin: 0 0 0.25rem 0;
}
.section-title p[b-9r6424lww3] {
font-size: 0.875rem;
color: var(--text-muted, #94a3b8);
margin: 0;
}
/* Empty State */
.empty-state[b-9r6424lww3] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 3rem;
text-align: center;
background: var(--neutral-50);
border-radius: 10px;
border: 1px dashed var(--border-light);
}
.empty-icon[b-9r6424lww3] {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--neutral-100);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
}
.empty-icon i[b-9r6424lww3] {
font-size: 1.75rem;
color: var(--text-muted, #94a3b8);
}
.empty-state h4[b-9r6424lww3] {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary, #0f172a);
margin: 0 0 0.25rem 0;
}
.empty-state p[b-9r6424lww3] {
font-size: 0.875rem;
color: var(--text-muted, #94a3b8);
margin: 0 0 1rem 0;
}
/* Documents Grid */
.documents-grid[b-9r6424lww3] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 1rem;
}
.document-card[b-9r6424lww3] {
display: flex;
align-items: flex-start;
gap: 0.875rem;
padding: 1rem;
background: white;
border: 1px solid var(--border-light);
border-radius: 10px;
transition: all 0.15s ease;
}
.document-card:hover[b-9r6424lww3] {
border-color: var(--brand-200);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.doc-icon[b-9r6424lww3] {
width: 44px;
height: 44px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
flex-shrink: 0;
}
.doc-type-insurance[b-9r6424lww3] {
background: var(--success-100);
color: var(--success-600);
}
.doc-type-legal[b-9r6424lww3] {
background: var(--brand-100);
color: var(--brand-600);
}
.doc-type-financial[b-9r6424lww3] {
background: var(--warning-100);
color: var(--warning-600);
}
.doc-type-environmental[b-9r6424lww3] {
background: var(--success-50);
color: var(--success-600);
}
.doc-type-other[b-9r6424lww3] {
background: var(--neutral-100);
color: var(--neutral-600);
}
.doc-info[b-9r6424lww3] {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.doc-name[b-9r6424lww3] {
font-size: 0.9375rem;
font-weight: 600;
color: var(--text-primary, #0f172a);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.doc-meta[b-9r6424lww3] {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
font-size: 0.75rem;
}
.doc-type[b-9r6424lww3] {
padding: 0.125rem 0.5rem;
background: var(--neutral-100);
color: var(--text-secondary, #64748b);
border-radius: 4px;
}
.doc-size[b-9r6424lww3] {
color: var(--text-muted, #94a3b8);
}
.signature-badge[b-9r6424lww3] {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.125rem 0.5rem;
background: var(--brand-50);
color: var(--brand-600);
border-radius: 4px;
}
.doc-date[b-9r6424lww3] {
font-size: 0.75rem;
color: var(--text-muted, #94a3b8);
}
.doc-actions[b-9r6424lww3] {
display: flex;
gap: 0.375rem;
}
.btn-icon[b-9r6424lww3] {
width: 32px;
height: 32px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid var(--border-light);
border-radius: 6px;
color: var(--text-secondary, #64748b);
cursor: pointer;
transition: all 0.15s ease;
text-decoration: none;
}
.btn-icon:hover[b-9r6424lww3] {
background: var(--neutral-50);
border-color: var(--neutral-300);
color: var(--text-primary, #0f172a);
}
.btn-icon.btn-danger:hover[b-9r6424lww3] {
background: var(--danger-50);
border-color: var(--danger-300);
color: var(--error-600);
}
/* Applications Table */
.applications-table-wrapper[b-9r6424lww3] {
overflow-x: auto;
border: 1px solid var(--border-light);
border-radius: 10px;
}
.applications-table[b-9r6424lww3] {
width: 100%;
border-collapse: collapse;
}
.applications-table th[b-9r6424lww3] {
padding: 0.875rem 1rem;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.025em;
color: var(--text-muted, #94a3b8);
background: var(--neutral-50);
border-bottom: 1px solid var(--border-light);
text-align: left;
}
.applications-table td[b-9r6424lww3] {
padding: 0.875rem 1rem;
font-size: 0.9375rem;
color: var(--text-primary, #0f172a);
border-bottom: 1px solid var(--neutral-100);
}
.applications-table tbody tr:hover[b-9r6424lww3] {
background: var(--neutral-50);
}
.applications-table tbody tr:last-child td[b-9r6424lww3] {
border-bottom: none;
}
.app-link[b-9r6424lww3] {
font-weight: 500;
color: var(--brand-600);
text-decoration: none;
}
.app-link:hover[b-9r6424lww3] {
text-decoration: underline;
}
.app-status-badge[b-9r6424lww3] {
display: inline-flex;
padding: 0.25rem 0.625rem;
font-size: 0.75rem;
font-weight: 600;
border-radius: 6px;
}
.app-status-draft[b-9r6424lww3] {
background: var(--neutral-100);
color: var(--neutral-600);
}
.app-status-submitted[b-9r6424lww3] {
background: var(--brand-100);
color: var(--brand-700);
}
.app-status-review[b-9r6424lww3] {
background: var(--warning-100);
color: var(--warning-700);
}
.app-status-approved[b-9r6424lww3] {
background: var(--success-100);
color: var(--success-700);
}
.app-status-ordered[b-9r6424lww3] {
background: var(--success-200);
color: var(--success-800);
}
.app-status-declined[b-9r6424lww3] {
background: var(--danger-100);
color: var(--danger-700);
}
/* Feature 072 — AwaitingBorrower ("Waiting for Borrower"). */
.app-status-awaiting-borrower[b-9r6424lww3] {
background: var(--info-100);
color: var(--info-700);
}
/* Modal Styles */
.modal-overlay[b-9r6424lww3] {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 1050;
padding: 1.5rem;
}
.edit-policy-modal[b-9r6424lww3],
.upload-modal[b-9r6424lww3] {
width: 100%;
max-width: 520px;
max-height: 90vh;
background: white;
border-radius: 16px;
display: flex;
flex-direction: column;
box-shadow: 0 24px 64px rgba(15, 23, 42, 0.25);
animation: modalSlideIn-b-9r6424lww3 0.25s ease-out;
overflow: hidden;
}
@keyframes modalSlideIn-b-9r6424lww3 {
from {
opacity: 0;
transform: translateY(-20px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.modal-header[b-9r6424lww3] {
display: flex;
align-items: flex-start;
gap: 0.9rem;
padding: 1.25rem 1.5rem 1rem;
background: #fff;
border-bottom: 1px solid #EEF2F6;
}
.modal-header h3[b-9r6424lww3] {
flex: 1;
align-self: center;
font-size: 1.05rem;
font-weight: 700;
margin: 0;
color: #0F172A;
}
.btn-close-modal[b-9r6424lww3] {
flex-shrink: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: #94A3B8;
border-radius: 8px;
cursor: pointer;
}
.btn-close-modal:hover[b-9r6424lww3] {
background: #F1F5F9;
color: #0F172A;
}
.modal-body[b-9r6424lww3] {
flex: 1;
overflow-y: auto;
padding: 1.15rem 1.5rem;
}
.modal-footer[b-9r6424lww3] {
display: flex;
justify-content: flex-end;
gap: 0.6rem;
padding: 1rem 1.5rem;
border-top: 1px solid #EEF2F6;
background: #FAFBFC;
}
/* Form Styles */
.form-group[b-9r6424lww3] {
margin-bottom: 1.25rem;
}
.form-group label[b-9r6424lww3] {
display: block;
font-size: 0.875rem;
font-weight: 500;
color: var(--text-secondary, #64748b);
margin-bottom: 0.5rem;
}
.form-row[b-9r6424lww3] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.form-control[b-9r6424lww3] {
width: 100%;
padding: 0.625rem 0.875rem;
font-size: 0.9375rem;
border: 1px solid #E2E8F0;
border-radius: 10px;
transition: all 0.15s ease;
}
.form-control:focus[b-9r6424lww3] {
outline: none;
border-color: var(--brand-400);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
textarea.form-control[b-9r6424lww3] {
resize: vertical;
min-height: 100px;
}
/* Upload Area */
.upload-area[b-9r6424lww3] {
position: relative;
border: 2px dashed var(--border-light);
border-radius: 10px;
padding: 2rem;
text-align: center;
cursor: pointer;
transition: all 0.15s ease;
}
.upload-area:hover[b-9r6424lww3] {
border-color: var(--brand-300);
background: var(--brand-50);
}
.upload-area input[type="file"][b-9r6424lww3] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.upload-placeholder[b-9r6424lww3] {
pointer-events: none;
}
.upload-placeholder i[b-9r6424lww3] {
font-size: 2.5rem;
color: var(--brand-400);
margin-bottom: 0.75rem;
}
.upload-placeholder p[b-9r6424lww3] {
font-size: 0.9375rem;
font-weight: 500;
color: var(--text-primary, #0f172a);
margin: 0 0 0.25rem 0;
}
.upload-placeholder span[b-9r6424lww3] {
font-size: 0.8125rem;
color: var(--text-muted, #94a3b8);
}
.selected-file[b-9r6424lww3] {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.75rem 1rem;
background: var(--brand-50);
border: 1px solid var(--brand-200);
border-radius: 8px;
margin-top: 1rem;
}
.selected-file i[b-9r6424lww3] {
font-size: 1.25rem;
color: var(--brand-500);
}
.selected-file span[b-9r6424lww3] {
font-size: 0.875rem;
color: var(--text-primary, #0f172a);
}
.selected-file .file-size[b-9r6424lww3] {
margin-left: auto;
font-size: 0.8125rem;
color: var(--text-muted, #94a3b8);
}
/* ========================================
Enhanced Upload Modal Styles
======================================== */
.upload-modal-enhanced[b-9r6424lww3] {
width: 100%;
max-width: 520px;
max-height: 90vh;
background: white;
border-radius: 16px;
display: flex;
flex-direction: column;
box-shadow: 0 24px 64px rgba(15, 23, 42, 0.25);
animation: modalSlideIn-b-9r6424lww3 0.25s ease-out;
overflow: hidden;
}
.upload-modal-header[b-9r6424lww3] {
display: flex;
align-items: flex-start;
gap: 0.9rem;
padding: 1.25rem 1.5rem 1rem;
background: #fff;
border-bottom: 1px solid #EEF2F6;
}
.upload-header-text[b-9r6424lww3] {
flex: 1;
}
.upload-header-text h3[b-9r6424lww3] {
font-size: 1.05rem;
font-weight: 700;
margin: 0 0 0.25rem 0;
color: #0F172A;
}
.upload-header-text p[b-9r6424lww3] {
font-size: 0.8rem;
margin: 0;
color: #64748B;
line-height: 1.45;
}
.upload-modal-body[b-9r6424lww3] {
flex: 1;
overflow-y: auto;
padding: 1.15rem 1.5rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.upload-form-group[b-9r6424lww3] {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.upload-form-label[b-9r6424lww3] {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8125rem;
font-weight: 600;
color: var(--text-secondary, #64748b);
text-transform: uppercase;
letter-spacing: 0.025em;
}
.upload-form-label i[b-9r6424lww3] {
font-size: 0.875rem;
}
/* Document Type Dropdown */
.type-dropdown[b-9r6424lww3] {
position: relative;
}
.dropdown-toggle-custom[b-9r6424lww3] {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1rem;
background: white;
border: 1px solid var(--border-light);
border-radius: 10px;
cursor: pointer;
transition: all 0.15s ease;
}
.dropdown-toggle-custom:hover[b-9r6424lww3] {
border-color: var(--brand-300);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.08);
}
.selected-type[b-9r6424lww3] {
display: flex;
align-items: center;
gap: 0.625rem;
font-size: 0.9375rem;
font-weight: 500;
color: var(--text-primary, #0f172a);
}
.selected-type i[b-9r6424lww3] {
font-size: 1.125rem;
color: var(--brand-500);
}
.chevron-icon[b-9r6424lww3] {
color: var(--text-muted, #94a3b8);
transition: transform 0.2s ease;
}
.chevron-icon.rotated[b-9r6424lww3] {
transform: rotate(180deg);
}
.dropdown-menu-custom[b-9r6424lww3] {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: white;
border: 1px solid var(--border-light);
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
z-index: 100;
max-height: 280px;
overflow-y: auto;
animation: dropdownFadeIn-b-9r6424lww3 0.15s ease-out;
}
@keyframes dropdownFadeIn-b-9r6424lww3 {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.dropdown-item-custom[b-9r6424lww3] {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
cursor: pointer;
transition: background 0.15s ease;
}
.dropdown-item-custom:first-child[b-9r6424lww3] {
border-radius: 12px 12px 0 0;
}
.dropdown-item-custom:last-child[b-9r6424lww3] {
border-radius: 0 0 12px 12px;
}
.dropdown-item-custom:hover[b-9r6424lww3] {
background: var(--neutral-50);
}
.dropdown-item-custom.active[b-9r6424lww3] {
background: var(--brand-50);
}
.dropdown-item-custom .item-icon[b-9r6424lww3] {
font-size: 1.125rem;
color: var(--text-muted, #94a3b8);
width: 24px;
text-align: center;
}
.dropdown-item-custom.active .item-icon[b-9r6424lww3] {
color: var(--brand-500);
}
.dropdown-item-custom .item-content[b-9r6424lww3] {
flex: 1;
display: flex;
flex-direction: column;
}
.dropdown-item-custom .item-name[b-9r6424lww3] {
font-size: 0.9375rem;
font-weight: 500;
color: var(--text-primary, #0f172a);
}
.dropdown-item-custom .item-desc[b-9r6424lww3] {
font-size: 0.75rem;
color: var(--text-muted, #94a3b8);
}
.dropdown-item-custom .check-icon[b-9r6424lww3] {
font-size: 1rem;
color: var(--brand-500);
}
/* Toggle Switch for Requires Signature */
.signature-toggle-section[b-9r6424lww3] {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 1rem;
background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
border: 1px solid #fde047;
border-radius: 10px;
}
.toggle-switch[b-9r6424lww3] {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
flex-shrink: 0;
}
.toggle-switch input[b-9r6424lww3] {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider[b-9r6424lww3] {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--gray-300, #cbd5e1);
transition: 0.3s;
border-radius: 24px;
}
.toggle-slider[b-9r6424lww3]:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
transition: 0.3s;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.toggle-switch input:checked + .toggle-slider[b-9r6424lww3] {
background-color: var(--brand-500);
}
.toggle-switch input:checked + .toggle-slider[b-9r6424lww3]:before {
transform: translateX(20px);
}
.toggle-switch input:focus + .toggle-slider[b-9r6424lww3] {
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.toggle-slider.signature-slider[b-9r6424lww3] {
background-color: #fcd34d;
}
.toggle-switch input:checked + .toggle-slider.signature-slider[b-9r6424lww3] {
background-color: #ca8a04;
}
.toggle-label-content[b-9r6424lww3] {
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.toggle-label-text[b-9r6424lww3] {
display: flex;
align-items: center;
gap: 0.375rem;
font-size: 0.875rem;
font-weight: 600;
color: #854d0e;
}
.toggle-label-text i[b-9r6424lww3] {
color: #ca8a04;
}
.toggle-label-desc[b-9r6424lww3] {
font-size: 0.75rem;
color: #a16207;
}
/* Upload Dropzone */
.upload-dropzone[b-9r6424lww3] {
position: relative;
border: 2px dashed var(--border-light);
border-radius: 12px;
transition: all 0.2s ease;
background: var(--neutral-50);
}
.upload-dropzone:hover[b-9r6424lww3] {
border-color: var(--brand-300);
background: var(--brand-50);
}
.upload-dropzone.dragging[b-9r6424lww3] {
border-color: var(--brand-400);
background: var(--brand-50);
transform: scale(1.01);
}
.upload-dropzone.has-file[b-9r6424lww3] {
border-style: solid;
border-color: var(--success-300);
background: var(--success-50);
}
/* File input wrapper - ensures complete hiding */
.file-input-wrapper[b-9r6424lww3] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 2;
cursor: pointer;
}
.file-input-wrapper input[type="file"][b-9r6424lww3],
.upload-input-hidden[b-9r6424lww3] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
font-size: 0;
z-index: 2;
}
/* Hide the native file input completely */
.upload-input-hidden[b-9r6424lww3]::file-selector-button,
.file-input-wrapper input[b-9r6424lww3]::file-selector-button {
display: none;
}
.upload-dropzone input[type="file"][b-9r6424lww3] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
z-index: 2;
font-size: 0;
}
.dropzone-content[b-9r6424lww3] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
cursor: pointer;
text-align: center;
position: relative;
z-index: 1;
width: 100%;
height: 100%;
}
.dropzone-content.clickable-label[b-9r6424lww3] {
pointer-events: auto;
cursor: pointer;
}
.dropzone-content .upload-input-hidden[b-9r6424lww3],
.dropzone-content input[type="file"][b-9r6424lww3] {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
opacity: 0 !important;
cursor: pointer !important;
z-index: 10 !important;
margin: 0 !important;
padding: 0 !important;
}
.dropzone-icon[b-9r6424lww3] {
width: 64px;
height: 64px;
border-radius: 16px;
background: white;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.dropzone-icon i[b-9r6424lww3] {
font-size: 2rem;
color: var(--brand-500);
}
.dropzone-text[b-9r6424lww3] {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.dropzone-title[b-9r6424lww3] {
font-size: 0.9375rem;
font-weight: 500;
color: var(--text-primary, #0f172a);
}
.browse-link[b-9r6424lww3] {
color: var(--brand-500);
font-weight: 600;
}
.dropzone-hint[b-9r6424lww3] {
font-size: 0.8125rem;
color: var(--text-muted, #94a3b8);
}
/* Selected File Card */
.selected-file-card[b-9r6424lww3] {
display: flex;
align-items: center;
gap: 0.875rem;
padding: 1rem;
position: relative;
z-index: 2;
}
.selected-file-card .file-icon[b-9r6424lww3] {
width: 48px;
height: 48px;
border-radius: 10px;
background: white;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.selected-file-card .file-icon i[b-9r6424lww3] {
font-size: 1.5rem;
color: var(--success-600);
}
.selected-file-card .file-details[b-9r6424lww3] {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.125rem;
min-width: 0;
}
.selected-file-card .file-name[b-9r6424lww3] {
font-size: 0.9375rem;
font-weight: 500;
color: var(--text-primary, #0f172a);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.selected-file-card .file-meta[b-9r6424lww3] {
font-size: 0.8125rem;
color: var(--text-muted, #64748b);
}
.btn-remove-file[b-9r6424lww3] {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: white;
border: 1px solid var(--border-light);
border-radius: 8px;
color: var(--text-muted, #94a3b8);
cursor: pointer;
transition: all 0.15s ease;
}
.btn-remove-file:hover[b-9r6424lww3] {
background: var(--danger-50);
border-color: var(--danger-200);
color: var(--danger-500);
}
/* Modal Footer */
.upload-modal-footer[b-9r6424lww3] {
display: flex;
justify-content: flex-end;
gap: 0.6rem;
padding: 1rem 1.5rem;
border-top: 1px solid #EEF2F6;
background: #FAFBFC;
}
.btn-cancel[b-9r6424lww3] {
padding: 0.55rem 1.15rem;
font-size: 0.875rem;
font-weight: 600;
background: transparent;
color: #64748B;
border: 1px solid #E2E8F0;
border-radius: 10px;
cursor: pointer;
transition: all 0.15s ease;
}
.btn-cancel:hover:not(:disabled)[b-9r6424lww3] {
background: #F1F5F9;
color: #0F172A;
}
.btn-cancel:disabled[b-9r6424lww3] {
opacity: 0.6;
cursor: not-allowed;
}
.btn-upload[b-9r6424lww3] {
display: flex;
align-items: center;
padding: 0.55rem 1.15rem;
font-size: 0.875rem;
font-weight: 600;
background: var(--brand-600, #004980);
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
transition: all 0.15s ease;
}
.btn-upload:hover:not(:disabled)[b-9r6424lww3] {
background: var(--brand-700, #003760);
}
.btn-upload:disabled[b-9r6424lww3] {
opacity: 0.6;
cursor: not-allowed;
}
/* Responsive */
@media (max-width: 768px) {
.header-content[b-9r6424lww3] {
flex-direction: column;
align-items: stretch;
}
.header-actions[b-9r6424lww3] {
flex-wrap: wrap;
}
.policy-tabs[b-9r6424lww3] {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.policy-tab[b-9r6424lww3] {
padding: 0.875rem 1rem;
white-space: nowrap;
}
.detail-grid[b-9r6424lww3] {
grid-template-columns: 1fr;
}
.form-row[b-9r6424lww3] {
grid-template-columns: 1fr;
}
.documents-grid[b-9r6424lww3] {
grid-template-columns: 1fr;
}
}
/* ========================================
Subjectivities Section
======================================== */
.subjectivities-section[b-9r6424lww3] {
padding: 1.5rem;
}
.subjectivities-list[b-9r6424lww3] {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-top: 1rem;
}
.subjectivity-card[b-9r6424lww3] {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem 1.25rem;
background: white;
border: 1px solid var(--neutral-200);
border-radius: 10px;
transition: all 0.2s ease;
}
.subjectivity-card:hover[b-9r6424lww3] {
border-color: var(--brand-300);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.subjectivity-drag-handle[b-9r6424lww3] {
color: var(--text-muted, #94a3b8);
cursor: grab;
padding: 0.25rem;
}
.subjectivity-drag-handle:active[b-9r6424lww3] {
cursor: grabbing;
}
.subjectivity-icon[b-9r6424lww3] {
width: 40px;
height: 40px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.subjectivity-icon.type-signature[b-9r6424lww3] {
background: var(--brand-50);
color: var(--brand-600);
}
.subjectivity-icon.type-document[b-9r6424lww3] {
background: var(--success-50);
color: var(--success-600);
}
.subjectivity-icon.type-acknowledgment[b-9r6424lww3] {
background: var(--warning-50);
color: var(--warning-600);
}
.subjectivity-icon.type-custom[b-9r6424lww3] {
background: var(--neutral-100);
color: var(--text-secondary, #475569);
}
.subjectivity-icon i[b-9r6424lww3] {
font-size: 1.125rem;
}
.subjectivity-content[b-9r6424lww3] {
flex: 1;
min-width: 0;
}
.subjectivity-header[b-9r6424lww3] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
margin-bottom: 0.25rem;
}
.subjectivity-header h4[b-9r6424lww3] {
margin: 0;
font-size: 0.9375rem;
font-weight: 600;
color: var(--text-primary, #0f172a);
}
.subjectivity-badges[b-9r6424lww3] {
display: flex;
gap: 0.375rem;
flex-shrink: 0;
}
.subjectivity-badges .badge[b-9r6424lww3] {
padding: 0.25rem 0.5rem;
font-size: 0.6875rem;
font-weight: 500;
border-radius: 4px;
}
.subjectivity-badges .badge-required[b-9r6424lww3] {
background: var(--danger-50);
color: var(--error-600);
}
.subjectivity-badges .badge-optional[b-9r6424lww3] {
background: var(--neutral-100);
color: var(--text-secondary, #475569);
}
.subjectivity-badges .badge-type[b-9r6424lww3] {
background: var(--brand-50);
color: var(--brand-700);
}
.subjectivity-badges .badge-doctype[b-9r6424lww3] {
background: var(--success-50);
color: var(--success-700);
}
.subjectivity-description[b-9r6424lww3] {
margin: 0.25rem 0 0 0;
font-size: 0.8125rem;
color: var(--text-muted, #64748b);
line-height: 1.4;
}
.subjectivity-actions[b-9r6424lww3] {
display: flex;
gap: 0.375rem;
flex-shrink: 0;
}
.subjectivity-actions .btn-icon[b-9r6424lww3] {
width: 32px;
height: 32px;
border-radius: 6px;
border: none;
background: transparent;
color: var(--text-muted, #64748b);
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.subjectivity-actions .btn-icon:hover[b-9r6424lww3] {
background: var(--neutral-100);
color: var(--text-primary, #0f172a);
}
.subjectivity-actions .btn-icon-danger:hover[b-9r6424lww3] {
background: var(--danger-50);
color: var(--error-600);
}
/* Subjectivity Modal */
.subjectivity-modal[b-9r6424lww3] {
width: 100%;
max-width: 540px;
background: white;
border-radius: 16px;
box-shadow: 0 24px 64px rgba(15, 23, 42, 0.25);
overflow: hidden;
}
.subjectivity-modal .form-group[b-9r6424lww3] {
margin-bottom: 1rem;
}
.subjectivity-modal .form-group label[b-9r6424lww3] {
display: block;
font-size: 0.8125rem;
font-weight: 500;
color: var(--text-secondary, #475569);
margin-bottom: 0.375rem;
}
.subjectivity-modal .form-group label .required[b-9r6424lww3] {
color: var(--danger-500);
}
.subjectivity-modal .form-control[b-9r6424lww3] {
width: 100%;
padding: 0.625rem 0.875rem;
font-size: 0.875rem;
border: 1px solid #E2E8F0;
border-radius: 10px;
background: white;
transition: all 0.2s;
}
.subjectivity-modal .form-control:focus[b-9r6424lww3] {
outline: none;
border-color: var(--brand-400);
box-shadow: 0 0 0 3px var(--brand-100);
}
.subjectivity-modal .form-row[b-9r6424lww3] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.subjectivity-modal .checkbox-group[b-9r6424lww3] {
display: flex;
flex-direction: column;
justify-content: center;
}
.subjectivity-modal .checkbox-label[b-9r6424lww3] {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
color: var(--text-primary, #0f172a);
}
.subjectivity-modal .checkbox-label input[b-9r6424lww3] {
width: 1.125rem;
height: 1.125rem;
cursor: pointer;
}
.subjectivity-modal .help-text[b-9r6424lww3] {
font-size: 0.75rem;
color: var(--text-muted, #64748b);
margin-top: 0.25rem;
}
/* ============================================
POLICY HISTORY TAB (feature 052)
Reads the policy_audit rows for this policy as a vertical timeline, newest first.
============================================ */
.history-loading[b-9r6424lww3] {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 1.25rem 0;
color: #64748b;
font-size: 0.875rem;
}
.history-timeline[b-9r6424lww3] {
list-style: none;
margin: 0;
padding: 0;
}
.history-entry[b-9r6424lww3] {
position: relative;
display: flex;
gap: 1rem;
padding: 0 0 1.4rem 0;
}
/* Connector between markers; the last entry has nothing below it to join. */
.history-entry:not(:last-child)[b-9r6424lww3]::before {
content: "";
position: absolute;
left: 15px;
top: 32px;
bottom: 0;
width: 2px;
background: #e2e8f0;
}
.history-entry:last-child[b-9r6424lww3] {
padding-bottom: 0;
}
.history-marker[b-9r6424lww3] {
position: relative;
z-index: 1;
flex: 0 0 auto;
width: 32px;
height: 32px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: #f1f5f9;
color: #475569;
border: 1px solid #e2e8f0;
font-size: 0.85rem;
}
.history-marker-create[b-9r6424lww3] { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.history-marker-update[b-9r6424lww3] { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
.history-marker-deactivate[b-9r6424lww3] { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.history-marker-reactivate[b-9r6424lww3] { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.history-marker-delete[b-9r6424lww3] { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.history-body[b-9r6424lww3] {
flex: 1 1 auto;
min-width: 0;
padding-top: 0.15rem;
}
.history-headline[b-9r6424lww3] {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
}
.history-action[b-9r6424lww3] {
font-weight: 600;
font-size: 0.9rem;
color: #0f172a;
}
.history-status[b-9r6424lww3] {
font-size: 0.75rem;
color: #64748b;
}
.history-outcome[b-9r6424lww3] {
display: inline-flex;
align-items: center;
padding: 0.1rem 0.45rem;
border-radius: 999px;
font-size: 0.68rem;
font-weight: 600;
border: 1px solid transparent;
}
.history-outcome-pending[b-9r6424lww3] { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.history-outcome-partialfailure[b-9r6424lww3] { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.history-outcome-failed[b-9r6424lww3] { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.history-meta[b-9r6424lww3] {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1rem;
margin-top: 0.3rem;
font-size: 0.78rem;
color: #64748b;
}
.history-meta i[b-9r6424lww3] {
margin-right: 0.3rem;
}
.history-reason[b-9r6424lww3] {
display: flex;
gap: 0.5rem;
margin-top: 0.5rem;
padding: 0.5rem 0.7rem;
background: #f8fafc;
border-left: 3px solid #cbd5e1;
border-radius: 0 4px 4px 0;
font-size: 0.82rem;
color: #334155;
}
.history-reason i[b-9r6424lww3] {
color: #94a3b8;
flex: 0 0 auto;
}
@media (max-width: 640px) {
.history-meta[b-9r6424lww3] { flex-direction: column; gap: 0.15rem; }
}
/* /Components/Pages/Admin/PolicyExpirationBackfillPage.razor.rz.scp.css */
.backfill-page[b-zitkjjpg3f] {
padding: 1.5rem;
max-width: 1100px;
margin: 0 auto;
}
.page-header[b-zitkjjpg3f] {
margin-bottom: 1.25rem;
}
.back-link[b-zitkjjpg3f] {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-bottom: 0.6rem;
text-decoration: none;
color: #475569;
font-size: 0.875rem;
}
.back-link:hover[b-zitkjjpg3f] { color: #2c5aa0; }
.page-header h1[b-zitkjjpg3f] {
margin: 0 0 0.25rem 0;
font-size: 1.6rem;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.title-row[b-zitkjjpg3f] {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
margin-bottom: 0.25rem;
}
.page-header p[b-zitkjjpg3f] {
font-size: 0.85rem;
line-height: 1.45;
max-width: 760px;
margin-top: 0.15rem;
}
.onetime-badge[b-zitkjjpg3f] {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.6rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 600;
background: #eef2ff;
color: #4338ca;
border: 1px solid #c7d2fe;
}
.onetime-badge i[b-zitkjjpg3f] { font-size: 0.78rem; }
/* ── Stat cards ───────────────────────────────────────────────────── */
.stat-grid[b-zitkjjpg3f] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.75rem;
margin-bottom: 0.85rem;
}
.stat-card[b-zitkjjpg3f] {
display: flex;
align-items: center;
gap: 0.85rem;
background: white;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 0.9rem 1.1rem;
}
.stat-icon[b-zitkjjpg3f] {
width: 2.6rem;
height: 2.6rem;
border-radius: 10px;
display: grid;
place-items: center;
font-size: 1.25rem;
background: #f1f5f9;
color: #64748b;
flex-shrink: 0;
}
.stat-value[b-zitkjjpg3f] {
font-size: 1.6rem;
font-weight: 700;
line-height: 1;
color: #111827;
font-variant-numeric: tabular-nums;
}
.stat-label[b-zitkjjpg3f] {
font-size: 0.78rem;
color: #6b7280;
margin-top: 0.2rem;
}
.stat-card-accent[b-zitkjjpg3f] { border-color: #c7d2fe; background: linear-gradient(135deg, #eef2ff, #f5f3ff); }
.stat-card-accent .stat-icon[b-zitkjjpg3f] { background: #e0e7ff; color: #4338ca; }
.stat-card-accent .stat-value[b-zitkjjpg3f] { color: #3730a3; }
.stat-card-good[b-zitkjjpg3f] { border-color: #86efac; background: linear-gradient(135deg, #f0fdf4, #ecfdf5); }
.stat-card-good .stat-icon[b-zitkjjpg3f] { background: #dcfce7; color: #16a34a; }
.stat-card-bad[b-zitkjjpg3f] { border-color: #fecaca; background: linear-gradient(135deg, #fef2f2, #fee2e2); }
.stat-card-bad .stat-icon[b-zitkjjpg3f] { background: #fee2e2; color: #dc2626; }
/* ── Action bar ───────────────────────────────────────────────────── */
.action-bar[b-zitkjjpg3f] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
background: white;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 0.75rem 1.1rem;
margin-bottom: 0.85rem;
}
.action-bar-text[b-zitkjjpg3f] {
font-size: 0.875rem;
color: #475569;
display: flex;
align-items: center;
gap: 0.5rem;
}
.action-bar-text i[b-zitkjjpg3f] { color: #2c5aa0; font-size: 1rem; }
.action-bar-buttons[b-zitkjjpg3f] {
display: flex;
gap: 0.5rem;
flex-shrink: 0;
flex-wrap: wrap;
}
/* ── By-bank bars ─────────────────────────────────────────────────── */
.bank-list[b-zitkjjpg3f] {
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.bank-row-head[b-zitkjjpg3f] {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.25rem;
}
.bank-name[b-zitkjjpg3f] { font-size: 0.875rem; color: #374151; }
.bank-count[b-zitkjjpg3f] { font-weight: 700; color: #111827; }
.bank-bar[b-zitkjjpg3f] {
height: 6px;
background: #f1f5f9;
border-radius: 999px;
overflow: hidden;
}
.bank-bar-fill[b-zitkjjpg3f] {
height: 100%;
background: linear-gradient(90deg, #6366f1, #4338ca);
border-radius: 999px;
transition: width 200ms ease-out;
}
/* ── Sample table fill badges ─────────────────────────────────────── */
.sample-table[b-zitkjjpg3f] { font-size: 0.8rem; }
.sample-table thead th[b-zitkjjpg3f] {
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.04em;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
.sample-table td[b-zitkjjpg3f] {
vertical-align: middle;
padding-top: 0.45rem;
padding-bottom: 0.45rem;
}
.fill-cell[b-zitkjjpg3f] {
display: flex;
gap: 0.3rem;
flex-wrap: wrap;
}
.fill-badge[b-zitkjjpg3f] {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.12rem 0.5rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 600;
white-space: nowrap;
border: 1px solid transparent;
}
.fill-badge i[b-zitkjjpg3f] { font-size: 0.75rem; }
.fill-badge-date[b-zitkjjpg3f] { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.fill-badge-limit[b-zitkjjpg3f] { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.state-block[b-zitkjjpg3f] {
padding: 2.5rem 1rem;
text-align: center;
color: #6b7280;
background: white;
border: 1px solid #e5e7eb;
border-radius: 10px;
}
/* ── Hero (state-driven) ──────────────────────────────────────────── */
.hero[b-zitkjjpg3f] {
display: flex;
align-items: center;
gap: 1.25rem;
padding: 1.5rem 1.75rem;
background: white;
border: 1px solid #e5e7eb;
border-radius: 10px;
margin-bottom: 0.85rem;
}
.hero-success[b-zitkjjpg3f] {
background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
border-color: #86efac;
}
.hero-success .hero-icon[b-zitkjjpg3f] {
background: #dcfce7;
color: #16a34a;
}
.hero-warn[b-zitkjjpg3f] {
background: linear-gradient(135deg, #fffbeb, #fef3c7);
border-color: #fcd34d;
}
.hero-warn .hero-icon[b-zitkjjpg3f] {
background: #fef3c7;
color: #d97706;
}
.hero-icon[b-zitkjjpg3f] {
width: 3.25rem;
height: 3.25rem;
border-radius: 12px;
display: grid;
place-items: center;
font-size: 1.6rem;
flex-shrink: 0;
}
.hero-body[b-zitkjjpg3f] {
flex: 1;
min-width: 0;
}
.hero-headline[b-zitkjjpg3f] {
font-size: 1.15rem;
font-weight: 700;
color: #111827;
margin-bottom: 0.25rem;
display: flex;
align-items: baseline;
gap: 0.5rem;
flex-wrap: wrap;
}
.hero-count[b-zitkjjpg3f] {
font-size: 2rem;
color: #d97706;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.hero-success .hero-headline[b-zitkjjpg3f] { color: #14532d; }
.hero-subline[b-zitkjjpg3f] {
color: #475569;
font-size: 0.9rem;
}
/* Per-kind breakdown chips inside the hero — Diligence + Policy counts so admins
know the run will create both kinds. Each chip suppresses itself when zero. */
.kind-breakdown[b-zitkjjpg3f] {
display: flex;
gap: 0.5rem;
margin-top: 0.6rem;
flex-wrap: wrap;
}
.kind-chip[b-zitkjjpg3f] {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.65rem;
border-radius: 999px;
font-size: 0.8rem;
border: 1px solid transparent;
}
.kind-chip i[b-zitkjjpg3f] { font-size: 0.85rem; line-height: 1; color: currentColor; }
.kind-chip strong[b-zitkjjpg3f] { font-variant-numeric: tabular-nums; }
.kind-chip-diligence[b-zitkjjpg3f] {
background: #fffbeb;
color: #b45309;
border-color: #fde68a;
}
.kind-chip-policy[b-zitkjjpg3f] {
background: #f1f5f9;
color: #475569;
border-color: #e2e8f0;
}
.hero-actions[b-zitkjjpg3f] {
display: flex;
gap: 0.5rem;
flex-shrink: 0;
flex-wrap: wrap;
}
/* ── Run-confirm panel ────────────────────────────────────────────── */
.run-panel[b-zitkjjpg3f] {
background: white;
border: 1px solid #fcd34d;
border-radius: 10px;
margin-bottom: 0.85rem;
overflow: hidden;
animation: slideDown-b-zitkjjpg3f 150ms ease-out;
}
@keyframes slideDown-b-zitkjjpg3f {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.run-panel-title[b-zitkjjpg3f] {
background: #fef3c7;
color: #6b4f0f;
padding: 0.6rem 1rem;
font-weight: 600;
font-size: 0.9rem;
display: flex;
align-items: center;
gap: 0.5rem;
border-bottom: 1px solid #fcd34d;
}
.run-panel-body[b-zitkjjpg3f] {
padding: 0.85rem 1rem;
}
.run-controls[b-zitkjjpg3f] {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
/* ── Buttons (matches detail page style) ──────────────────────────── */
.btn-action[b-zitkjjpg3f] {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.85rem;
background: white;
border: 1px solid #d1d5db;
border-radius: 6px;
color: #374151;
font-size: 0.875rem;
font-weight: 500;
text-decoration: none;
cursor: pointer;
transition: border-color 120ms, color 120ms, background-color 120ms;
}
.btn-action:hover:not(:disabled)[b-zitkjjpg3f] {
border-color: #2c5aa0;
color: #2c5aa0;
}
.btn-action:disabled[b-zitkjjpg3f] {
opacity: 0.5;
cursor: not-allowed;
}
.btn-action-primary[b-zitkjjpg3f] {
background: #2c5aa0;
border-color: #2c5aa0;
color: white;
}
.btn-action-primary:hover:not(:disabled)[b-zitkjjpg3f] {
background: #244b87;
border-color: #244b87;
color: white;
}
.btn-action i[b-zitkjjpg3f] { font-size: 0.95rem; }
/* ── Detail grid (by-bank + samples) ──────────────────────────────── */
.detail-grid[b-zitkjjpg3f] {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 0.85rem;
margin-bottom: 0.85rem;
}
@media (max-width: 800px) {
.detail-grid[b-zitkjjpg3f] { grid-template-columns: 1fr; }
}
.card-section[b-zitkjjpg3f] {
background: white;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 1rem 1.25rem;
}
.card-section h2[b-zitkjjpg3f] {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #2c5aa0;
font-weight: 700;
margin: 0 0 0.6rem 0;
}
.card-section h2 .small[b-zitkjjpg3f],
.card-section h2 .muted[b-zitkjjpg3f] {
font-weight: 500;
color: #94a3b8;
margin-left: 0.4rem;
text-transform: none;
letter-spacing: 0;
font-size: 0.7rem;
}
.card-section table[b-zitkjjpg3f] { margin-bottom: 0; }
.card-section thead th[b-zitkjjpg3f] {
background: #f8fafc;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #475569;
font-weight: 600;
}
.mono[b-zitkjjpg3f] { font-variant-numeric: tabular-nums; }
.muted[b-zitkjjpg3f] { color: #6b7280; }
.link-muted[b-zitkjjpg3f] {
color: #475569;
text-decoration: none;
font-weight: 500;
}
.link-muted:hover[b-zitkjjpg3f] { color: #2c5aa0; text-decoration: underline; }
/* ── How-it-works disclosure ─────────────────────────────────────── */
.info-section[b-zitkjjpg3f] {
background: #f8fafc;
}
.info-toggle[b-zitkjjpg3f] {
background: none;
border: none;
padding: 0;
font-size: 0.875rem;
color: #475569;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-weight: 500;
}
.info-toggle:hover[b-zitkjjpg3f] { color: #2c5aa0; }
.info-content[b-zitkjjpg3f] {
margin-top: 0.85rem;
color: #475569;
font-size: 0.875rem;
}
.info-content ul[b-zitkjjpg3f] {
margin: 0;
padding-left: 1.25rem;
}
.info-content li[b-zitkjjpg3f] { margin-bottom: 0.4rem; }
.info-content code[b-zitkjjpg3f] {
background: #e5e7eb;
color: #374151;
padding: 0.05rem 0.3rem;
border-radius: 3px;
font-size: 0.82rem;
}
/* ── Post-run report ──────────────────────────────────────────────── */
.report-hero[b-zitkjjpg3f] {
display: flex;
align-items: center;
gap: 1.25rem;
padding: 1.5rem 1.75rem;
border-radius: 10px;
margin-bottom: 0.85rem;
}
.report-hero-success[b-zitkjjpg3f] {
background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
border: 1px solid #86efac;
}
.report-hero-success .report-icon[b-zitkjjpg3f] {
background: #dcfce7;
color: #16a34a;
}
.report-hero-warn[b-zitkjjpg3f] {
background: linear-gradient(135deg, #fef2f2, #fee2e2);
border: 1px solid #fecaca;
}
.report-hero-warn .report-icon[b-zitkjjpg3f] {
background: #fee2e2;
color: #dc2626;
}
.report-icon[b-zitkjjpg3f] {
width: 3.25rem;
height: 3.25rem;
border-radius: 12px;
display: grid;
place-items: center;
font-size: 1.6rem;
flex-shrink: 0;
}
.report-summary[b-zitkjjpg3f] {
flex: 1;
min-width: 0;
}
.report-headline[b-zitkjjpg3f] {
font-size: 1.15rem;
font-weight: 700;
color: #111827;
margin-bottom: 0.2rem;
}
.report-subline[b-zitkjjpg3f] {
color: #475569;
font-size: 0.9rem;
font-variant-numeric: tabular-nums;
}
.report-subline strong[b-zitkjjpg3f] {
color: #111827;
font-weight: 700;
}
.report-actions[b-zitkjjpg3f] {
display: flex;
gap: 0.5rem;
flex-shrink: 0;
flex-wrap: wrap;
}
.error-log[b-zitkjjpg3f] {
background: #1f2937;
color: #fca5a5;
padding: 1rem;
border-radius: 6px;
font-size: 0.8rem;
max-height: 320px;
overflow-y: auto;
margin: 0;
}
/* /Components/Pages/Admin/PolicyManagementPage.razor.rz.scp.css */
/* Policy Management Page - Enhanced Styles */
/* Use existing dashboard styles - this file contains overrides and additions */
/* Added Header Styles for Alignment */
.page-header[b-nm2ughp2xe] {
display: flex;
align-items: center; /* Ensures vertical alignment */
gap: 20px;
margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 1px solid var(--neutral-200);
}
.header-icon[b-nm2ughp2xe] {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
background: linear-gradient(135deg, var(--brand-50) 0%, white 100%);
color: var(--brand-600);
border: 1px solid var(--brand-100);
border-radius: 12px;
font-size: 1.75rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
flex-shrink: 0;
}
.header-content[b-nm2ughp2xe] {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.header-content h1[b-nm2ughp2xe] {
font-size: 1.75rem;
font-weight: 700;
color: var(--text-primary, #1e293b);
margin: 0 0 4px 0;
line-height: 1.2;
letter-spacing: -0.02em;
}
.header-content p[b-nm2ughp2xe] {
font-size: 0.95rem;
color: var(--text-muted, #64748b);
margin: 0;
line-height: 1.5;
}
.header-actions[b-nm2ughp2xe] {
display: flex;
align-items: center;
gap: 12px;
}
/* Content Header */
.content-header[b-nm2ughp2xe] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.content-title[b-nm2ughp2xe] {
font-size: 1.5rem;
font-weight: 700;
color: #1a1a2e;
margin: 0;
}
.content-subtitle[b-nm2ughp2xe] {
font-size: 0.8rem;
color: #94A3B8;
margin: 2px 0 0;
}
.header-stats[b-nm2ughp2xe] {
display: flex;
align-items: center;
gap: 8px;
}
.stat-pill[b-nm2ughp2xe] {
display: flex;
align-items: center;
gap: 8px;
background: white;
border: 1px solid #E5E7EB;
border-radius: 20px;
padding: 6px 14px;
font-size: 0.75rem;
color: #64748B;
}
.stat-pill i[b-nm2ughp2xe] {
font-size: 1rem;
color: var(--brand-500);
}
.stat-pill.stat-success i[b-nm2ughp2xe] { color: #10B981; }
.stat-pill.stat-warning i[b-nm2ughp2xe] { color: #F59E0B; }
.stat-pill.stat-danger i[b-nm2ughp2xe] { color: #EF4444; }
.stat-pill .stat-value[b-nm2ughp2xe] {
font-size: 1.125rem;
font-weight: 700;
color: #1F2937;
}
.stat-pill .stat-label[b-nm2ughp2xe] {
font-size: 0.65rem;
font-weight: 600;
color: #6B7280;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.btn-header-action[b-nm2ughp2xe] {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid #E2E8F0;
background: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #64748B;
transition: all 0.2s;
}
.btn-header-action:hover[b-nm2ughp2xe] {
background: #F1F5F9;
color: #334155;
}
/* Queue Actions */
.queue-actions[b-nm2ughp2xe] {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
}
.filter-select-compact[b-nm2ughp2xe] {
padding: 8px 14px;
border: 1px solid var(--neutral-200);
border-radius: 8px;
font-size: 0.875rem;
font-weight: 500;
background: var(--bg-surface, white);
color: var(--text-secondary, #475569);
min-width: 160px;
cursor: pointer;
transition: all 0.2s ease;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 32px;
}
.filter-select-compact:hover[b-nm2ughp2xe] {
border-color: var(--brand-400);
background-color: var(--neutral-50);
}
.filter-select-compact:focus[b-nm2ughp2xe] {
outline: none;
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
.btn-icon-sm[b-nm2ughp2xe] {
width: 38px;
height: 38px;
border-radius: 8px;
border: 1px solid var(--neutral-200);
background: var(--bg-surface, white);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
color: var(--text-muted, #64748b);
}
.btn-icon-sm:hover[b-nm2ughp2xe] {
background: var(--neutral-50);
border-color: var(--brand-400);
color: var(--brand-600);
}
.btn-icon-sm:disabled[b-nm2ughp2xe] {
opacity: 0.5;
cursor: not-allowed;
}
.btn-icon-sm.active[b-nm2ughp2xe] {
background: var(--brand-500);
border-color: var(--brand-500);
color: white;
}
.btn-primary-compact[b-nm2ughp2xe] {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 18px;
background: var(--brand-600, #004980);
color: white;
border: none;
border-radius: 8px;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-primary-compact:hover[b-nm2ughp2xe] {
background: var(--brand-700, #003760);
}
/* Table Styles */
.dashboard-table[b-nm2ughp2xe] {
width: 100%;
border-collapse: collapse;
}
.dashboard-table th[b-nm2ughp2xe] {
background: #f8fafc;
padding: 12px 16px;
text-align: left;
font-weight: 600;
font-size: 0.75rem;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 1px solid #e2e8f0;
}
.dashboard-table td[b-nm2ughp2xe] {
padding: 12px 16px;
border-bottom: 1px solid #f1f5f9;
font-size: 0.875rem;
vertical-align: middle;
}
.dashboard-table tbody tr:hover[b-nm2ughp2xe] {
background: #f8fafc;
}
.dashboard-table tbody tr.row-warning[b-nm2ughp2xe] {
background: #fffbeb;
}
.dashboard-table tbody tr.row-warning:hover[b-nm2ughp2xe] {
background: #fef3c7;
}
/* Policy Link */
.policy-link[b-nm2ughp2xe] {
color: #3b82f6;
text-decoration: none;
font-weight: 500;
display: inline-flex;
align-items: center;
}
.policy-link:hover[b-nm2ughp2xe] {
text-decoration: underline;
color: #2563eb;
}
/* Bank Name */
.bank-name[b-nm2ughp2xe] {
font-weight: 500;
color: #1e293b;
}
/* Status Badges */
.status-badge[b-nm2ughp2xe] {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
gap: 4px;
}
.status-active[b-nm2ughp2xe] {
background: var(--success-100);
color: var(--success-700);
}
.status-pending[b-nm2ughp2xe] {
background: var(--accent-100);
color: var(--accent-700);
}
.status-expired[b-nm2ughp2xe] {
background: var(--neutral-100);
color: var(--neutral-600);
}
.status-cancelled[b-nm2ughp2xe] {
background: var(--error-100);
color: var(--error-700);
}
.status-inactive[b-nm2ughp2xe] {
background: var(--neutral-200);
color: var(--neutral-700);
}
/* Count Badges */
.count-badge[b-nm2ughp2xe] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 26px;
padding: 0 10px;
border-radius: 13px;
font-size: 0.75rem;
font-weight: 600;
background: var(--neutral-100);
color: var(--text-muted, #64748b);
transition: all 0.2s ease;
}
.count-badge-info[b-nm2ughp2xe] {
background: var(--brand-100);
color: var(--brand-700);
}
.count-badge-success[b-nm2ughp2xe] {
background: var(--success-100);
color: var(--success-700);
}
/* Date Display */
.date-display[b-nm2ughp2xe] {
color: #475569;
}
.date-display.text-warning[b-nm2ughp2xe] {
color: #d97706 !important;
}
/* Action Buttons */
.action-buttons[b-nm2ughp2xe] {
display: flex;
gap: 4px;
justify-content: flex-end;
}
.btn-action-icon[b-nm2ughp2xe] {
width: 32px;
height: 32px;
border-radius: 6px;
border: 1px solid #e2e8f0;
background: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
color: #64748b;
}
.btn-action-icon:hover[b-nm2ughp2xe] {
background: #f8fafc;
border-color: #cbd5e1;
color: #3b82f6;
}
.btn-action-icon.btn-action-danger:hover[b-nm2ughp2xe] {
background: #fef2f2;
border-color: #fecaca;
color: var(--error-600);
}
.btn-action-icon.btn-action-success:hover[b-nm2ughp2xe] {
background: #f0fdf4;
border-color: #bbf7d0;
color: var(--success-600);
}
/* Loading & Empty States */
.loading-state[b-nm2ughp2xe],
.empty-state[b-nm2ughp2xe] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 48px 20px;
color: #64748b;
}
/* Pagination */
.pagination-section[b-nm2ughp2xe] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
border-top: 1px solid #e2e8f0;
background: #f8fafc;
}
.pagination-info[b-nm2ughp2xe] {
font-size: 0.875rem;
color: #64748b;
}
.pagination-controls[b-nm2ughp2xe] {
display: flex;
gap: 4px;
}
.btn-page[b-nm2ughp2xe] {
padding: 6px 12px;
border: 1px solid #e2e8f0;
background: white;
border-radius: 6px;
cursor: pointer;
font-size: 0.875rem;
transition: all 0.2s;
color: #475569;
}
.btn-page:hover:not(:disabled)[b-nm2ughp2xe] {
background: #f8fafc;
border-color: #cbd5e1;
}
.btn-page.active[b-nm2ughp2xe] {
background: #3b82f6;
color: white;
border-color: #3b82f6;
}
.btn-page:disabled[b-nm2ughp2xe] {
opacity: 0.5;
cursor: not-allowed;
}
/* Policy Detail Header */
.policy-detail-header[b-nm2ughp2xe] {
background: #f8fafc;
padding: 20px;
border-bottom: 1px solid #e2e8f0;
}
.detail-item[b-nm2ughp2xe] {
display: flex;
flex-direction: column;
gap: 4px;
}
.detail-label[b-nm2ughp2xe] {
font-size: 0.75rem;
font-weight: 500;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.detail-value[b-nm2ughp2xe] {
font-size: 0.9375rem;
color: #1e293b;
font-weight: 500;
}
/* Modal Enhancements */
.modal-overlay[b-nm2ughp2xe] {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 1050;
padding: 1.5rem;
animation: fadeIn-b-nm2ughp2xe 0.2s ease-out;
}
@keyframes fadeIn-b-nm2ughp2xe {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes modalSlideIn-b-nm2ughp2xe {
from {
opacity: 0;
transform: translateY(-20px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.policy-modal-enhanced[b-nm2ughp2xe] {
width: 100%;
max-width: 600px;
max-height: 90vh;
background: white;
border-radius: 16px;
display: flex;
flex-direction: column;
box-shadow: 0 24px 64px rgba(15, 23, 42, 0.25);
animation: modalSlideIn-b-nm2ughp2xe 0.25s ease-out;
overflow: hidden;
}
.policy-modal-header[b-nm2ughp2xe] {
display: flex;
align-items: flex-start;
gap: 0.9rem;
padding: 1.25rem 1.5rem 1rem;
background: #fff;
border-bottom: 1px solid #EEF2F6;
}
.policy-header-text[b-nm2ughp2xe] {
flex: 1;
}
.policy-header-text h3[b-nm2ughp2xe] {
font-size: 1.05rem;
font-weight: 700;
margin: 0 0 0.25rem 0;
color: #0F172A;
}
.policy-header-text p[b-nm2ughp2xe] {
font-size: 0.8rem;
margin: 0;
color: #64748B;
line-height: 1.45;
}
.btn-close-modal[b-nm2ughp2xe] {
flex-shrink: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: #94A3B8;
border-radius: 8px;
cursor: pointer;
transition: all 0.15s ease;
}
.btn-close-modal:hover[b-nm2ughp2xe] {
background: #F1F5F9;
color: #0F172A;
}
.policy-modal-body[b-nm2ughp2xe] {
flex: 1;
overflow-y: auto;
padding: 1.15rem 1.5rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.form-section[b-nm2ughp2xe] {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.form-section.flex-1[b-nm2ughp2xe] {
flex: 1;
}
.form-section.flex-2[b-nm2ughp2xe] {
flex: 2;
}
.form-row[b-nm2ughp2xe] {
display: flex;
gap: 1rem;
}
.form-row .form-section[b-nm2ughp2xe] {
flex: 1;
}
.form-section-label[b-nm2ughp2xe] {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8125rem;
font-weight: 600;
color: var(--text-secondary, #475569);
text-transform: uppercase;
letter-spacing: 0.025em;
}
.form-section-label i[b-nm2ughp2xe] {
font-size: 0.875rem;
color: var(--brand-500);
}
.required-mark[b-nm2ughp2xe] {
color: var(--error-500);
}
.policy-number-input-group[b-nm2ughp2xe] {
display: flex;
gap: 0.5rem;
}
.policy-number-input-group .form-input-enhanced[b-nm2ughp2xe] {
flex: 1;
}
.btn-generate[b-nm2ughp2xe] {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
font-size: 0.875rem;
font-weight: 500;
white-space: nowrap;
background: var(--brand-50);
color: var(--brand-600);
border: 1px solid var(--brand-200);
border-radius: 8px;
cursor: pointer;
transition: all 0.15s ease;
}
.btn-generate:hover:not(:disabled)[b-nm2ughp2xe] {
background: var(--brand-100);
border-color: var(--brand-300);
}
.btn-generate:disabled[b-nm2ughp2xe] {
opacity: 0.6;
cursor: not-allowed;
}
.validation-error[b-nm2ughp2xe] {
font-size: 0.8125rem;
color: var(--error-600);
margin-top: 0.25rem;
}
.policy-modal-footer[b-nm2ughp2xe] {
display: flex;
justify-content: flex-end;
gap: 0.6rem;
padding: 1rem 1.5rem;
border-top: 1px solid #EEF2F6;
background: #FAFBFC;
}
.btn-modal-cancel[b-nm2ughp2xe] {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.55rem 1.15rem;
font-size: 0.875rem;
font-weight: 600;
background: transparent;
color: #64748B;
border: 1px solid #E2E8F0;
border-radius: 10px;
cursor: pointer;
transition: all 0.15s ease;
}
.btn-modal-cancel:hover:not(:disabled)[b-nm2ughp2xe] {
background: #F1F5F9;
color: #0F172A;
}
.btn-modal-cancel:disabled[b-nm2ughp2xe] {
opacity: 0.6;
cursor: not-allowed;
}
.btn-modal-primary[b-nm2ughp2xe] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.55rem 1.15rem;
font-size: 0.875rem;
font-weight: 600;
background: var(--brand-600, #004980);
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
transition: all 0.15s ease;
}
.btn-modal-primary:hover:not(:disabled)[b-nm2ughp2xe] {
background: var(--brand-700, #003760);
}
.btn-modal-primary:disabled[b-nm2ughp2xe] {
opacity: 0.7;
cursor: not-allowed;
}
.modal-dialog-centered[b-nm2ughp2xe] {
display: flex;
align-items: center;
min-height: calc(100% - 1rem);
}
/* Tab Content */
.tab-header[b-nm2ughp2xe] {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 20px;
border-bottom: 1px solid #e2e8f0;
flex-wrap: wrap;
gap: 16px;
}
.tab-title[b-nm2ughp2xe] {
font-size: 1.125rem;
font-weight: 600;
color: #1e293b;
margin: 0;
}
.tab-subtitle[b-nm2ughp2xe] {
font-size: 0.875rem;
color: #64748b;
margin: 4px 0 0;
}
/* Spinning animation */
.spinning[b-nm2ughp2xe] {
animation: spin-b-nm2ughp2xe 1s linear infinite;
}
@keyframes spin-b-nm2ughp2xe {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Responsive */
@media (max-width: 768px) {
.content-header[b-nm2ughp2xe] {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.header-stats[b-nm2ughp2xe] {
width: 100%;
flex-wrap: wrap;
justify-content: flex-start;
}
.queue-actions[b-nm2ughp2xe] {
width: 100%;
flex-direction: column;
}
.tab-header[b-nm2ughp2xe] {
flex-direction: column;
}
.policy-modal-enhanced[b-nm2ughp2xe] {
max-height: 100vh;
border-radius: 12px 12px 0 0;
}
.form-row[b-nm2ughp2xe] {
flex-direction: column;
}
.policy-number-input-group[b-nm2ughp2xe] {
flex-direction: column;
}
.btn-generate[b-nm2ughp2xe] {
justify-content: center;
}
}
/* ── Skeleton loader ─────────────────────────────────────────────────── */
@keyframes admin-policy-skel-pulse-b-nm2ughp2xe {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.tbl-row-skeleton td[b-nm2ughp2xe] {
padding: 0.875rem 0.75rem;
}
.tbl-skel[b-nm2ughp2xe] {
height: 1.0625rem;
width: 80px;
border-radius: 4px;
background: linear-gradient(90deg, var(--bs-tertiary-bg, #f0f0f0) 25%, var(--bs-secondary-bg, #e0e0e0) 50%, var(--bs-tertiary-bg, #f0f0f0) 75%);
background-size: 200% 100%;
animation: admin-policy-skel-pulse-b-nm2ughp2xe 1.5s ease-in-out infinite;
}
.tbl-skel-badge[b-nm2ughp2xe] {
height: 1.25rem;
width: 90px;
border-radius: 9999px;
background: linear-gradient(90deg, var(--bs-tertiary-bg, #f0f0f0) 25%, var(--bs-secondary-bg, #e0e0e0) 50%, var(--bs-tertiary-bg, #f0f0f0) 75%);
background-size: 200% 100%;
animation: admin-policy-skel-pulse-b-nm2ughp2xe 1.5s ease-in-out infinite;
}
/* Delete confirmation facts (feature 052). Rendered into DeleteConfirmationModal's BodyContent,
which is declared here, so this page's scope id applies. Width and centring are NOT set here:
they come from .confirm-measure, which the modal puts on the whole BodyContent block so the
card, the message above it and the inputs below share one column. */
.delete-policy-facts[b-nm2ughp2xe] {
display: grid;
gap: 0.4rem;
padding: 0.75rem 0.9rem;
background: var(--neutral-50, #F9FAFB);
border: 1px solid var(--neutral-200, #E5E7EB);
border-radius: 8px;
font-size: 0.8125rem;
}
.delete-policy-fact[b-nm2ughp2xe] {
display: flex;
justify-content: space-between;
gap: 1rem;
}
.delete-policy-label[b-nm2ughp2xe] {
color: var(--neutral-500, #6B7280);
white-space: nowrap;
}
.delete-policy-value[b-nm2ughp2xe] {
font-weight: 600;
color: var(--neutral-800, #1F2937);
text-align: right;
}
.delete-policy-note[b-nm2ughp2xe] {
margin: 0.6rem 0 0;
font-size: 0.8125rem;
color: var(--info-700, #1D4ED8);
background: var(--info-50, #EFF6FF);
border: 1px solid var(--info-200, #BFDBFE);
border-radius: 8px;
padding: 0.5rem 0.7rem;
}
/* /Components/Pages/Admin/PolicyReservationBackfillPage.razor.rz.scp.css */
/* Uses the global leca-theme.css design tokens (brand/neutral scales, radius,
shadow, spacing) so the page matches the app rather than default Bootstrap. */
.prb[b-1unjn1juwd] {
max-width: 1040px;
margin: 0 auto;
padding: var(--space-lg) var(--space-md) var(--space-2xl);
color: var(--text-primary);
}
.prb-muted[b-1unjn1juwd] { color: var(--text-muted); }
.prb-sm[b-1unjn1juwd] { font-size: .82rem; }
.prb-right[b-1unjn1juwd] { text-align: right; }
.prb-warn-text[b-1unjn1juwd] { color: var(--warning-700); }
.prb-error-text[b-1unjn1juwd] { color: var(--error-600); }
/* ── Breadcrumb ────────────────────────────────────────── */
.prb-crumbs[b-1unjn1juwd] {
display: flex;
align-items: center;
gap: .4rem;
font-size: .8rem;
color: var(--text-muted);
margin-bottom: var(--space-sm);
}
.prb-crumbs a[b-1unjn1juwd] { color: var(--brand-600); text-decoration: none; font-weight: 500; }
.prb-crumbs a:hover[b-1unjn1juwd] { color: var(--brand-700); text-decoration: underline; }
.prb-crumbs .bi[b-1unjn1juwd] { font-size: .7rem; opacity: .6; }
.prb-crumb-current[b-1unjn1juwd] { color: var(--text-secondary); font-weight: 600; }
/* ── Hero header ───────────────────────────────────────── */
.prb-hero[b-1unjn1juwd] {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-lg);
padding: var(--space-lg);
margin-bottom: var(--space-lg);
border: 1px solid var(--brand-100);
border-radius: var(--radius-lg);
background:
radial-gradient(120% 140% at 0% 0%, var(--brand-50) 0%, rgba(255,255,255,0) 60%),
var(--bg-surface);
box-shadow: var(--shadow-sm);
}
.prb-hero-main[b-1unjn1juwd] { display: flex; align-items: flex-start; gap: var(--space-md); min-width: 0; }
.prb-hero-text[b-1unjn1juwd] { min-width: 0; }
.prb-hash[b-1unjn1juwd] {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: var(--radius-lg);
background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
color: #fff;
font-size: 1.5rem;
box-shadow: 0 6px 16px -4px rgba(0, 73, 128, .5);
}
.prb-eyebrow[b-1unjn1juwd] {
font-size: .7rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--brand-600);
margin-bottom: .25rem;
}
.prb-h1[b-1unjn1juwd] { font-size: 1.75rem; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; margin: 0 0 .4rem; color: var(--text-primary); }
.prb-lede[b-1unjn1juwd] { color: var(--text-secondary); max-width: 68ch; margin: 0; line-height: 1.55; font-size: .92rem; }
/* ── Live status pill (header, right) ──────────────────── */
.prb-hero-status[b-1unjn1juwd] { flex: none; }
.prb-status[b-1unjn1juwd] {
display: inline-flex;
align-items: center;
gap: .45rem;
padding: .4rem .8rem;
border-radius: var(--radius-pill);
font-size: .82rem;
font-weight: 600;
white-space: nowrap;
border: 1px solid transparent;
}
.prb-status .bi[b-1unjn1juwd] { font-size: .95rem; }
.prb-status-num[b-1unjn1juwd] { font-size: 1rem; font-weight: 800; }
.prb-status--load[b-1unjn1juwd] { background: var(--neutral-100); color: var(--text-secondary); border-color: var(--neutral-200); }
.prb-status--ok[b-1unjn1juwd] { background: var(--success-50); color: var(--success-700); border-color: var(--success-200); }
.prb-status--warn[b-1unjn1juwd] { background: var(--warning-50); color: var(--warning-700); border-color: var(--warning-200); }
@media (max-width: 720px) {
.prb-hero[b-1unjn1juwd] { flex-direction: column; }
.prb-hero-status[b-1unjn1juwd] { align-self: flex-start; }
}
.prb code[b-1unjn1juwd] {
background: var(--brand-50);
color: var(--brand-700);
padding: .05rem .35rem;
border-radius: var(--radius-sm);
font-size: .85em;
}
/* ── Buttons (themed) ──────────────────────────────────── */
.prb-btn[b-1unjn1juwd] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .45rem;
padding: .5rem .95rem;
border-radius: var(--radius-md);
border: 1px solid transparent;
font: inherit;
font-size: .875rem;
font-weight: 600;
line-height: 1.1;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.prb-btn i[b-1unjn1juwd] { font-size: 1rem; line-height: 1; }
.prb-btn:disabled[b-1unjn1juwd] { opacity: .55; cursor: not-allowed; }
.prb-btn:focus-visible[b-1unjn1juwd] { outline: 2px solid var(--brand-300); outline-offset: 2px; }
.prb-btn--primary[b-1unjn1juwd] { background: var(--brand-600); color: #fff; }
.prb-btn--primary:hover:not(:disabled)[b-1unjn1juwd] { background: var(--brand-700); }
.prb-btn--ghost[b-1unjn1juwd] { background: var(--bg-surface); border-color: var(--neutral-300); color: var(--text-secondary); }
.prb-btn--ghost:hover:not(:disabled)[b-1unjn1juwd] { border-color: var(--brand-400); color: var(--brand-700); background: var(--bg-hover); }
.prb-btn--sm[b-1unjn1juwd] { padding: .35rem .7rem; font-size: .8rem; }
/* ── Toolbar ───────────────────────────────────────────── */
.prb-toolbar[b-1unjn1juwd] {
display: flex;
align-items: center;
gap: var(--space-sm);
flex-wrap: wrap;
margin-bottom: var(--space-lg);
}
.prb-spacer[b-1unjn1juwd] { flex: 1 1 auto; }
.prb-cap[b-1unjn1juwd] {
display: inline-flex;
align-items: stretch;
border: 1px solid var(--neutral-300);
border-radius: var(--radius-md);
overflow: hidden;
background: var(--bg-surface);
}
.prb-cap:focus-within[b-1unjn1juwd] { border-color: var(--brand-400); box-shadow: 0 0 0 3px var(--brand-50); }
.prb-cap-label[b-1unjn1juwd] {
display: inline-flex;
align-items: center;
gap: .3rem;
padding: .45rem .65rem;
background: var(--neutral-100);
color: var(--text-secondary);
font-size: .8rem;
font-weight: 600;
border-right: 1px solid var(--neutral-200);
}
.prb-cap input[b-1unjn1juwd] {
width: 88px;
border: 0;
outline: 0;
padding: .45rem .6rem;
font: inherit;
font-size: .875rem;
background: transparent;
color: var(--text-primary);
}
/* ── Spinner ───────────────────────────────────────────── */
.prb-spinner[b-1unjn1juwd] {
width: 1rem; height: 1rem;
border: 2px solid var(--neutral-300);
border-top-color: var(--brand-600);
border-radius: 50%;
display: inline-block;
animation: prb-spin-b-1unjn1juwd .6s linear infinite;
}
.prb-spinner--on-primary[b-1unjn1juwd] { border-color: rgba(255,255,255,.45); border-top-color: #fff; }
@keyframes prb-spin-b-1unjn1juwd { to { transform: rotate(360deg); } }
/* ── Loading / empty ───────────────────────────────────── */
.prb-state[b-1unjn1juwd] {
display: flex; align-items: center; gap: .6rem;
padding: var(--space-xl);
color: var(--text-secondary);
background: var(--bg-surface);
border: 1px solid var(--neutral-200);
border-radius: var(--radius-lg);
}
.prb-empty[b-1unjn1juwd] {
display: flex; align-items: center; gap: var(--space-md);
padding: var(--space-lg) var(--space-xl);
border: 1px solid var(--success-200);
background: var(--success-50);
border-radius: var(--radius-lg);
}
.prb-empty > .bi[b-1unjn1juwd] { font-size: 2rem; color: var(--success-600); }
.prb-empty-title[b-1unjn1juwd] { font-weight: 700; font-size: 1.05rem; color: var(--success-800); }
/* ── Alert ─────────────────────────────────────────────── */
.prb-alert[b-1unjn1juwd] {
display: flex; align-items: flex-start; gap: .6rem;
padding: .8rem 1rem;
border-radius: var(--radius-md);
margin-bottom: var(--space-md);
}
.prb-alert--danger[b-1unjn1juwd] { background: var(--error-50); border: 1px solid var(--error-200); color: var(--error-700); }
.prb-alert > .bi[b-1unjn1juwd] { margin-top: .1rem; }
/* ── Summary head ──────────────────────────────────────── */
.prb-summary-head[b-1unjn1juwd] {
display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
margin-bottom: var(--space-md);
}
.prb-total[b-1unjn1juwd] { font-size: 1.7rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.prb-split[b-1unjn1juwd] { margin-left: auto; display: inline-flex; gap: .4rem; }
.prb-chip[b-1unjn1juwd] {
display: inline-flex; align-items: center; gap: .35rem;
padding: .25rem .6rem;
border-radius: var(--radius-pill);
font-size: .78rem; font-weight: 600;
}
.prb-chip--ok[b-1unjn1juwd] { background: var(--success-50); color: var(--success-700); }
.prb-chip--warn[b-1unjn1juwd] { background: var(--warning-100); color: var(--warning-700); }
/* ── Stat cards ────────────────────────────────────────── */
.prb-stats[b-1unjn1juwd] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);
margin-bottom: var(--space-lg);
}
@media (max-width: 660px) { .prb-stats[b-1unjn1juwd] { grid-template-columns: 1fr; } }
.prb-stat[b-1unjn1juwd] {
display: flex; align-items: center; gap: .85rem;
padding: var(--space-md);
border-radius: var(--radius-lg);
border: 1px solid var(--neutral-200);
background: var(--bg-surface);
box-shadow: var(--shadow-xs);
transition: box-shadow .18s, transform .18s;
}
.prb-stat:hover[b-1unjn1juwd] { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.prb-stat-icon[b-1unjn1juwd] {
flex: none;
display: inline-flex; align-items: center; justify-content: center;
width: 2.6rem; height: 2.6rem;
border-radius: var(--radius-md);
font-size: 1.2rem;
}
.prb-stat-num[b-1unjn1juwd] { font-size: 1.9rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.prb-stat-label[b-1unjn1juwd] { font-weight: 600; margin-top: .15rem; }
.prb-stat-sub[b-1unjn1juwd] { font-size: .78rem; color: var(--text-muted); margin-top: .1rem; }
.prb-stat--unsigned .prb-stat-icon[b-1unjn1juwd] { background: var(--neutral-100); color: var(--neutral-600); }
.prb-stat--api .prb-stat-icon[b-1unjn1juwd] { background: var(--info-100); color: var(--info-700); }
.prb-stat--ui .prb-stat-icon[b-1unjn1juwd] { background: var(--warning-100); color: var(--warning-700); }
.prb-stat.is-attention[b-1unjn1juwd] { border-color: var(--warning-300); background: var(--warning-50); }
.prb-stat.is-attention .prb-stat-num[b-1unjn1juwd], .prb-stat.is-attention .prb-stat-label[b-1unjn1juwd] { color: var(--warning-800); }
/* ── Confirm panel ─────────────────────────────────────── */
.prb-confirm[b-1unjn1juwd] {
display: flex; align-items: center; justify-content: space-between;
gap: var(--space-md); flex-wrap: wrap;
padding: .9rem 1.1rem;
border: 1px solid var(--warning-300);
background: var(--warning-50);
border-radius: var(--radius-lg);
margin-bottom: var(--space-lg);
}
.prb-confirm-body[b-1unjn1juwd] { display: flex; align-items: flex-start; gap: .65rem; }
.prb-confirm-body > .bi[b-1unjn1juwd] { color: var(--warning-700); font-size: 1.25rem; margin-top: .05rem; }
.prb-confirm-actions[b-1unjn1juwd] { display: flex; gap: .5rem; }
/* ── Cards / tables ────────────────────────────────────── */
.prb-card[b-1unjn1juwd] {
border: 1px solid var(--neutral-200);
border-radius: var(--radius-lg);
overflow: hidden;
margin-bottom: var(--space-lg);
background: var(--bg-surface);
box-shadow: var(--shadow-sm);
}
.prb-card--warn[b-1unjn1juwd] { border-color: var(--warning-200); }
.prb-card--error[b-1unjn1juwd] { border-color: var(--error-200); }
.prb-card-head[b-1unjn1juwd] {
display: flex; align-items: center; gap: .4rem;
padding: .7rem 1rem;
font-weight: 600; font-size: .92rem;
background: var(--neutral-50);
border-bottom: 1px solid var(--neutral-200);
}
.prb-card--warn .prb-card-head[b-1unjn1juwd] { background: var(--warning-50); color: var(--warning-800); border-bottom-color: var(--warning-200); }
.prb-card--error .prb-card-head[b-1unjn1juwd] { background: var(--error-50); color: var(--error-700); border-bottom-color: var(--error-200); }
.prb-card-note[b-1unjn1juwd] { padding: .7rem 1rem 0; font-size: .85rem; color: var(--text-secondary); line-height: 1.5; }
.prb-card-foot[b-1unjn1juwd] { padding: .55rem 1rem; font-size: .8rem; }
.prb-table[b-1unjn1juwd] { width: 100%; border-collapse: collapse; }
.prb-table th[b-1unjn1juwd] {
text-align: left;
font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
color: var(--text-muted); font-weight: 600;
padding: .55rem 1rem;
border-bottom: 1px solid var(--neutral-200);
}
.prb-table td[b-1unjn1juwd] { padding: .6rem 1rem; border-bottom: 1px solid var(--neutral-100); vertical-align: middle; font-size: .9rem; }
.prb-table tbody tr:last-child td[b-1unjn1juwd] { border-bottom: 0; }
.prb-table tbody tr:hover[b-1unjn1juwd] { background: var(--bg-hover); }
.prb-mono[b-1unjn1juwd] { font-family: var(--bs-font-monospace, ui-monospace, monospace); font-variant-numeric: tabular-nums; font-size: .85rem; }
/* ── Bucket badges ─────────────────────────────────────── */
.prb-badge[b-1unjn1juwd] {
display: inline-block;
padding: .2rem .55rem;
border-radius: var(--radius-pill);
font-size: .72rem; font-weight: 600; letter-spacing: .01em;
}
.prb-badge--unsigned[b-1unjn1juwd] { background: var(--neutral-100); color: var(--neutral-700); }
.prb-badge--apisigned[b-1unjn1juwd] { background: var(--info-100); color: var(--info-700); }
.prb-badge--uisigned[b-1unjn1juwd] { background: var(--warning-100); color: var(--warning-700); }
.prb-errlog[b-1unjn1juwd] {
margin: 0; padding: 1rem;
white-space: pre-wrap;
font-size: .8rem;
color: var(--error-700);
background: var(--error-50);
}
/* ── Report hero ───────────────────────────────────────── */
.prb-report[b-1unjn1juwd] {
display: flex; align-items: center; gap: var(--space-md);
padding: 1.1rem 1.25rem;
border-radius: var(--radius-lg);
margin-bottom: var(--space-lg);
}
.prb-report > .bi[b-1unjn1juwd] { font-size: 1.9rem; }
.prb-report.is-ok[b-1unjn1juwd] { background: linear-gradient(135deg, var(--success-50), var(--bg-surface)); border: 1px solid var(--success-200); }
.prb-report.is-ok > .bi[b-1unjn1juwd] { color: var(--success-600); }
.prb-report.is-warn[b-1unjn1juwd] { background: linear-gradient(135deg, var(--warning-50), var(--bg-surface)); border: 1px solid var(--warning-200); }
.prb-report.is-warn > .bi[b-1unjn1juwd] { color: var(--warning-700); }
.prb-report-title[b-1unjn1juwd] { font-weight: 700; font-size: 1.05rem; }
.prb-report-stats[b-1unjn1juwd] { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; font-size: .9rem; color: var(--text-secondary); margin-top: .15rem; }
/* /Components/Pages/Admin/ProgramSettingsPage.razor.rz.scp.css */
/* Settings Tab Styles */
.settings-page-content[b-utacj8hf9q] {
max-width: 100%;
}
/* Header Section */
.settings-header[b-utacj8hf9q] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 24px;
}
.settings-title-section[b-utacj8hf9q] {
flex: 1;
}
.settings-title[b-utacj8hf9q] {
font-size: 24px;
font-weight: 700;
color: #1F2937;
margin: 0 0 4px 0;
}
.settings-subtitle[b-utacj8hf9q] {
font-size: 14px;
color: #6B7280;
margin: 0;
}
/* Sub Tabs */
.settings-subtabs[b-utacj8hf9q] {
display: flex;
flex-direction: column;
gap: 16px;
background: linear-gradient(to bottom, #F8F9FA 0%, #F1F3F5 100%);
border: 1px solid #E5E7EB;
border-radius: 12px;
padding: 16px;
margin-bottom: 24px;
overflow-x: auto;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
/* Subtab Groups */
.subtab-group[b-utacj8hf9q] {
display: flex;
flex-direction: column;
gap: 8px;
}
.subtab-group-label[b-utacj8hf9q] {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
color: #6B7280;
letter-spacing: 0.5px;
padding: 0 8px 8px 8px;
border-bottom: 1px solid #E5E7EB;
}
.subtab-group-label i[b-utacj8hf9q] {
font-size: 14px;
color: var(--brand-500);
}
.subtab-group-items[b-utacj8hf9q] {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.settings-subtabs[b-utacj8hf9q]::-webkit-scrollbar {
height: 6px;
}
.settings-subtabs[b-utacj8hf9q]::-webkit-scrollbar-thumb {
background-color: #D1D5DB;
border-radius: 3px;
}
.subtab-item[b-utacj8hf9q] {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background-color: transparent;
border: 2px solid transparent;
border-radius: 8px;
color: #6B7280;
font-size: 14px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
}
.subtab-item i[b-utacj8hf9q] {
font-size: 16px;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.subtab-item:hover[b-utacj8hf9q] {
background: linear-gradient(135deg, #E5E7EB 0%, #D1D5DB 100%);
color: #374151;
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.subtab-item:hover i[b-utacj8hf9q] {
transform: scale(1.1);
}
.subtab-item.active[b-utacj8hf9q] {
background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-400) 100%);
color: white;
border: 2px solid var(--brand-500);
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2);
}
.subtab-item.active i[b-utacj8hf9q] {
transform: scale(1.1);
}
/* Sub Tab Content */
.subtab-content[b-utacj8hf9q] {
min-height: 400px;
}
/* Placeholder Content */
.placeholder-content[b-utacj8hf9q] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 20px;
background: linear-gradient(135deg, rgba(227, 241, 251, 0.5) 0%, rgba(240, 247, 252, 0.6) 100%);
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 12px;
}
.placeholder-content i[b-utacj8hf9q] {
font-size: 64px;
color: #D1D5DB;
margin-bottom: 16px;
}
.placeholder-content p[b-utacj8hf9q] {
font-size: 16px;
color: #6B7280;
margin: 0;
}
/* Responsive Design */
@media (max-width: 768px) {
.settings-header[b-utacj8hf9q] {
flex-direction: column;
gap: 16px;
}
.settings-subtabs[b-utacj8hf9q] {
overflow-x: auto;
}
}
/* /Components/Pages/Admin/PropertyTypesPage.razor.rz.scp.css */
/* ========================================
Property Types Management Page Styles
======================================== */
.property-types-page[b-evbyllrcxh] {
padding: 0;
}
/* Import Section */
.import-section[b-evbyllrcxh] {
background: linear-gradient(135deg, rgba(227, 241, 251, 0.5) 0%, rgba(240, 247, 252, 0.6) 100%);
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 12px;
padding: 24px;
margin-bottom: 24px;
}
.section-title[b-evbyllrcxh] {
font-size: 18px;
font-weight: 700;
color: #1F2937;
margin: 0 0 8px 0;
}
.section-subtitle[b-evbyllrcxh] {
font-size: 14px;
color: #64748B;
margin: 0 0 24px 0;
}
/* Import Options */
.import-option[b-evbyllrcxh] {
background: white;
border: 1px solid #E2E8F0;
border-radius: 10px;
padding: 20px;
margin-bottom: 16px;
}
.option-header[b-evbyllrcxh] {
margin-bottom: 12px;
}
.option-label[b-evbyllrcxh] {
font-size: 15px;
font-weight: 600;
color: #1F2937;
margin: 0;
}
/* File Upload */
.file-upload-container[b-evbyllrcxh] {
display: flex;
align-items: center;
gap: 12px;
}
.file-name[b-evbyllrcxh] {
font-size: 14px;
color: #64748B;
}
/* Server File Info */
.server-file-info[b-evbyllrcxh] {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: #F8FAFC;
border: 1px solid #E2E8F0;
border-radius: 6px;
margin-top: 12px;
}
/* Bootstrap Form Check Customization */
.import-option .form-check[b-evbyllrcxh] {
margin-bottom: 12px;
}
.import-option .form-check-input[b-evbyllrcxh] {
width: 1.25rem;
height: 1.25rem;
cursor: pointer;
border-color: #CBD5E1;
}
.import-option .form-check-input:checked[b-evbyllrcxh] {
background-color: var(--brand-500);
border-color: var(--brand-500);
}
.import-option .form-check-input:focus[b-evbyllrcxh] {
border-color: var(--brand-500);
box-shadow: 0 0 0 0.25rem rgba(15, 23, 42, 0.18);
}
.import-option .form-check-label[b-evbyllrcxh] {
cursor: pointer;
user-select: none;
}
.server-file-label[b-evbyllrcxh] {
font-size: 13px;
font-weight: 600;
color: #475569;
}
.server-file-path[b-evbyllrcxh] {
font-size: 13px;
color: #1F2937;
font-family: monospace;
background: white;
padding: 4px 8px;
border-radius: 4px;
border: 1px solid #E2E8F0;
}
/* Action Row */
.action-row[b-evbyllrcxh] {
display: flex;
justify-content: center;
margin-top: 24px;
}
.btn-parse[b-evbyllrcxh] {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 32px;
background: var(--brand-600, #004980);
color: white;
border: none;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-parse:hover:not(:disabled)[b-evbyllrcxh] {
background: var(--brand-700, #003760);
}
.btn-parse:disabled[b-evbyllrcxh] {
background: #E2E8F0;
color: #94A3B8;
cursor: not-allowed;
}
.btn-parse i[b-evbyllrcxh] {
font-size: 18px;
}
/* Version Section */
.version-section[b-evbyllrcxh] {
background: white;
border: 1px solid #E2E8F0;
border-radius: 12px;
padding: 24px;
}
.no-versions[b-evbyllrcxh] {
text-align: center;
padding: 60px 20px;
color: #64748B;
font-size: 14px;
}
.no-versions p[b-evbyllrcxh] {
margin: 0;
}
/* Header Action Buttons */
.btn-header-action[b-evbyllrcxh] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background: transparent;
color: #64748B;
border: 1px solid #E2E8F0;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
white-space: nowrap;
}
.btn-header-action:hover[b-evbyllrcxh] {
background: #F1F5F9;
color: #0F172A;
}
.btn-header-action.btn-primary[b-evbyllrcxh] {
background: var(--brand-600, #004980);
color: white;
border: none;
}
.btn-header-action.btn-primary:hover[b-evbyllrcxh] {
background: var(--brand-700, #003760);
color: white;
}
.btn-header-action i[b-evbyllrcxh] {
font-size: 16px;
}
/* Responsive */
@media (max-width: 768px) {
.import-section[b-evbyllrcxh],
.version-section[b-evbyllrcxh] {
padding: 16px;
}
.file-upload-container[b-evbyllrcxh] {
flex-direction: column;
align-items: flex-start;
}
.btn-parse[b-evbyllrcxh] {
width: 100%;
justify-content: center;
}
}
/* /Components/Pages/Admin/PurgeAuditPage.razor.rz.scp.css */
/* Reuses the same visual language as TestDataPurgePage; kept in its own scoped file
so we don't depend on cross-component CSS leakage. Most rules are mirrors. */
.purge-page[b-n3apjks379] {
padding: 20px 24px;
max-width: 1500px;
margin: 0 auto;
color: #111827;
}
/* Toolbar */
.page-toolbar[b-n3apjks379] {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 12px 16px;
background: white;
border: 1px solid #e5e7eb;
border-radius: 12px;
margin-bottom: 20px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
flex-wrap: wrap;
}
.toolbar-left[b-n3apjks379] { display: flex; align-items: center; gap: 12px; }
.app-icon[b-n3apjks379] {
width: 40px; height: 40px; border-radius: 10px;
background: linear-gradient(135deg, #2c5aa0, #1e3f73);
color: white; display: flex; align-items: center; justify-content: center;
font-size: 20px; box-shadow: 0 4px 10px rgba(44, 90, 160, 0.25);
}
.toolbar-title[b-n3apjks379] { font-size: 17px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.2; }
.toolbar-subtitle[b-n3apjks379] { font-size: 12.5px; color: #6b7280; line-height: 1.3; margin-top: 2px; max-width: 720px; }
.toolbar-subtitle code[b-n3apjks379] { background: #f3f4f6; padding: 1px 5px; border-radius: 3px; font-size: 11.5px; color: #111827; }
.toolbar-right[b-n3apjks379] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Cards */
.card-section[b-n3apjks379] {
background: white;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 1.25rem 1.5rem;
margin-bottom: 16px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.card-section h2[b-n3apjks379] {
font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
color: #2c5aa0; font-weight: 700; margin: 0 0 0.85rem 0;
}
.card-section h2 .small[b-n3apjks379],
.card-section h2 .muted[b-n3apjks379] {
font-weight: 500; color: #94a3b8; margin-left: 0.4rem;
text-transform: none; letter-spacing: 0; font-size: 0.7rem;
}
.muted[b-n3apjks379] { color: #6b7280; }
/* Filters */
.filters-grid[b-n3apjks379] {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 0.85rem 1rem;
}
.filter-field--sm[b-n3apjks379] { grid-column: span 2; }
.filter-field--md[b-n3apjks379] { grid-column: span 4; }
.filter-field--lg[b-n3apjks379] { grid-column: span 6; }
@media (max-width: 1100px) {
.filter-field--sm[b-n3apjks379] { grid-column: span 4; }
.filter-field--md[b-n3apjks379] { grid-column: span 6; }
.filter-field--lg[b-n3apjks379] { grid-column: span 12; }
}
.filter-field[b-n3apjks379] { min-width: 0; }
.filter-field > .form-control[b-n3apjks379],
.filter-field > .form-select[b-n3apjks379] {
width: 100%; box-sizing: border-box;
min-height: 31px; height: 31px;
padding-top: 0.25rem; padding-bottom: 0.25rem;
line-height: 1.5; font-size: 0.875rem;
}
.form-label.small[b-n3apjks379] {
font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
color: #475569; font-weight: 600; margin-bottom: 0.3rem;
display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.filter-actions[b-n3apjks379] {
display: flex; gap: 0.75rem; align-items: center; justify-content: flex-end;
margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid #f1f5f9;
}
.filter-actions-right[b-n3apjks379] { display: flex; gap: 0.5rem; align-items: center; }
/* Buttons (mirror of purge page) */
.btn-action[b-n3apjks379] {
display: inline-flex; align-items: center; gap: 0.4rem;
padding: 0.4rem 0.85rem; background: white; border: 1px solid #d1d5db;
border-radius: 6px; color: #374151; font-size: 0.875rem; font-weight: 500;
text-decoration: none; cursor: pointer;
transition: border-color 120ms, color 120ms, background-color 120ms;
}
.btn-action:hover:not(:disabled)[b-n3apjks379] { border-color: #2c5aa0; color: #2c5aa0; }
.btn-action:disabled[b-n3apjks379] { opacity: 0.5; cursor: not-allowed; }
.btn-action-primary[b-n3apjks379] { background: #2c5aa0; border-color: #2c5aa0; color: white; }
.btn-action-primary:hover:not(:disabled)[b-n3apjks379] { background: #244b87; border-color: #244b87; color: white; }
.btn-action i[b-n3apjks379] { font-size: 0.95rem; }
/* Table */
.results-wrap[b-n3apjks379] { border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; }
.results-table[b-n3apjks379] { margin: 0; }
.results-table thead th[b-n3apjks379] {
border-top: 0; border-bottom: 1px solid #e5e7eb;
padding: 0.6rem 0.75rem; background: #f8fafc;
font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
color: #475569; font-weight: 600;
}
.results-table tbody td[b-n3apjks379] {
padding: 0.55rem 0.75rem; border-top: 1px solid #f1f5f9;
vertical-align: middle; font-size: 0.875rem;
}
.results-table tbody tr[b-n3apjks379] {
transition: background-color 120ms;
cursor: pointer;
}
.results-table tbody tr:hover:not(.detail-row)[b-n3apjks379] { background: #f8fafc; }
.results-table tbody tr.is-selected[b-n3apjks379] { background: #eff6ff; }
.results-table tbody tr.is-selected:hover[b-n3apjks379] { background: #dbeafe; }
.col-date[b-n3apjks379] { width: 150px; color: #6b7280; font-variant-numeric: tabular-nums; font-size: 0.825rem; white-space: nowrap; }
.col-num[b-n3apjks379] { width: 60px; text-align: center; }
.col-check[b-n3apjks379] { width: 36px; text-align: center; }
.app-number[b-n3apjks379] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.825rem; color: #2c5aa0; font-weight: 600; }
.bank-id[b-n3apjks379] { color: #94a3b8; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.performer-id[b-n3apjks379] {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.78rem; color: #374151;
overflow: hidden; text-overflow: ellipsis; max-width: 180px; white-space: nowrap;
}
.performer-email[b-n3apjks379] { color: #6b7280; font-size: 0.78rem; }
.reason-cell[b-n3apjks379] {
max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
color: #475569;
}
/* Count pills */
.count-pill[b-n3apjks379] {
display: inline-flex; align-items: center; justify-content: center;
min-width: 28px; height: 22px; padding: 0 0.45rem; border-radius: 11px;
background: #eef2ff; color: #4338ca;
font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.count-pill.is-zero[b-n3apjks379] { background: transparent; color: #cbd5e1; }
/* Outcome pills */
.outcome-pill[b-n3apjks379] {
display: inline-flex; align-items: center; padding: 0.18rem 0.55rem;
border-radius: 999px; font-size: 0.72rem; font-weight: 600;
border: 1px solid transparent; line-height: 1.3; white-space: nowrap;
}
.outcome-pending[b-n3apjks379] { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.outcome-success[b-n3apjks379] { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.outcome-partialfailure[b-n3apjks379] { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.outcome-failed[b-n3apjks379] { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
/* Action pills — policy_audit records five actions, and Delete is the one that matters at a
glance, so it is the only one given a destructive colour. */
.action-pill[b-n3apjks379] {
display: inline-flex; align-items: center; padding: 0.18rem 0.55rem;
border-radius: 999px; font-size: 0.72rem; font-weight: 600;
border: 1px solid #e2e8f0; background: #f8fafc; color: #475569;
line-height: 1.3; white-space: nowrap;
}
.action-pill.action-create[b-n3apjks379] { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.action-pill.action-delete[b-n3apjks379] { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
/* Detail row */
.results-table tbody tr.detail-row[b-n3apjks379] { background: #f8fafc; cursor: default; }
.results-table tbody tr.detail-row td[b-n3apjks379] { padding: 1rem 1.25rem; }
.detail-grid[b-n3apjks379] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
@media (max-width: 1000px) {
.detail-grid[b-n3apjks379] { grid-template-columns: 1fr; }
}
.detail-label[b-n3apjks379] {
font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
color: #475569; font-weight: 700; margin-bottom: 0.4rem;
}
.snapshot-json[b-n3apjks379] {
background: #1f2937; color: #d1d5db;
padding: 0.75rem; border-radius: 6px;
font-size: 0.75rem; line-height: 1.5;
max-height: 360px; overflow: auto; margin: 0;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.snapshot-json.failure[b-n3apjks379] { color: #fca5a5; }
/* Source switch between the two forensic tables (feature 052). */
.source-toggle[b-n3apjks379] {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
/* /Components/Pages/Admin/RatingModelPage.razor.rz.scp.css */
/* ========================================
Rating Model Page Styles
======================================== */
.rating-model-page[b-13a72y7k34] {
padding: 0;
}
/* Status Badge */
.status-badge[b-13a72y7k34] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
}
.status-info[b-13a72y7k34] {
background-color: #E3F1FB;
color: var(--brand-500);
border: 1px solid #99CBE3;
}
.status-info i[b-13a72y7k34] {
font-size: 16px;
}
/* Header Action Buttons */
.btn-header-action[b-13a72y7k34] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background: transparent;
color: #64748B;
border: 1px solid #E2E8F0;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
white-space: nowrap;
}
.btn-header-action:hover[b-13a72y7k34] {
background: #F1F5F9;
color: #0F172A;
}
.btn-header-action i[b-13a72y7k34] {
font-size: 16px;
}
/* Tab Navigation */
.rating-model-tabs[b-13a72y7k34] {
display: flex;
gap: 24px;
background: linear-gradient(to bottom, #F8F9FA 0%, #F1F3F5 100%);
border: 1px solid #E5E7EB;
border-radius: 12px;
padding: 8px 12px;
margin-bottom: 2px;
overflow-x: auto;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06),
0 1px 2px rgba(0, 0, 0, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.rating-model-tabs[b-13a72y7k34]::-webkit-scrollbar {
height: 6px;
}
.rating-model-tabs[b-13a72y7k34]::-webkit-scrollbar-thumb {
background-color: #D1D5DB;
border-radius: 3px;
}
.tab-item[b-13a72y7k34] {
display: flex;
align-items: center;
gap: 12px;
padding: 6px 14px;
background-color: transparent;
border: 2px solid transparent;
border-radius: 9px;
color: #6B7280;
font-size: 14px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
position: relative;
min-width: fit-content;
}
/* Tab Change Indicator */
.tab-change-indicator[b-13a72y7k34] {
display: inline-block;
width: 8px;
height: 8px;
background-color: #F59E0B;
border-radius: 50%;
margin-left: 4px;
animation: pulse-b-13a72y7k34 2s infinite;
box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
}
@keyframes pulse-b-13a72y7k34 {
0% {
box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
}
70% {
box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
}
}
.tab-item i[b-13a72y7k34] {
font-size: 18px;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.tab-item span[b-13a72y7k34] {
transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.tab-item:hover[b-13a72y7k34] {
background: linear-gradient(135deg, #E5E7EB 0%, #D1D5DB 100%);
color: #374151;
transform: translateY(-2px);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
border: 2px solid #D1D5DB;
}
.tab-item:hover i[b-13a72y7k34] {
transform: scale(1.2);
}
/* Active state for tabs */
.tab-item.active[b-13a72y7k34] {
background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-400) 100%);
color: white;
font-weight: 600;
border: 2px solid var(--brand-500);
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2);
}
.tab-item.active i[b-13a72y7k34] {
transform: scale(1.1);
}
.tab-item.active:hover[b-13a72y7k34] {
background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-500) 100%);
color: white;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3);
transform: translateY(-2px);
border: 2px solid var(--brand-600);
}
/* Two Column Layout */
.rating-model-two-column[b-13a72y7k34] {
display: grid;
grid-template-columns: 400px 1fr;
gap: 24px;
align-items: start;
}
.tab-column[b-13a72y7k34] {
display: flex;
flex-direction: column;
gap: 24px;
}
.metadata-column[b-13a72y7k34] {
display: flex;
flex-direction: column;
gap: 20px;
position: sticky;
top: 24px;
}
/* Tab Content Area */
.tab-content-area[b-13a72y7k34] {
background: linear-gradient(135deg, rgba(227, 241, 251, 0.5) 0%, rgba(240, 247, 252, 0.6) 100%);
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 12px;
padding: 24px;
min-height: 400px;
}
/* Metadata Card */
.metadata-card[b-13a72y7k34] {
background: #F8FAFC;
border: 1px solid #E2E8F0;
border-radius: 12px;
padding: 20px;
}
/* Metadata card header */
.metadata-card-header[b-13a72y7k34] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
margin-bottom: 16px;
}
.btn-edit-metadata[b-13a72y7k34] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
flex-shrink: 0;
border: 1px solid rgba(15, 23, 42, 0.15);
border-radius: 8px;
background: rgba(255, 255, 255, 0.9);
color: #6B7280;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-edit-metadata i[b-13a72y7k34] {
font-size: 16px;
}
.btn-edit-metadata:hover[b-13a72y7k34] {
background: white;
border-color: #D97706;
color: #D97706;
}
.metadata-status[b-13a72y7k34] {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 8px;
}
.status-pill[b-13a72y7k34] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 12px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
width: fit-content;
}
.status-pill i[b-13a72y7k34] {
font-size: 14px;
}
.status-published[b-13a72y7k34] {
background: #ECFDF5;
color: #059669;
border: 1px solid #A7F3D0;
}
.status-draft[b-13a72y7k34] {
background: #FEF3C7;
color: #D97706;
border: 1px solid #FCD34D;
}
.status-new[b-13a72y7k34] {
background: #DBEAFE;
color: #1E40AF;
border: 1px solid #93C5FD;
}
.status-details-grid[b-13a72y7k34] {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
background: rgba(248, 250, 252, 0.6);
border-radius: 8px;
border: 1px solid rgba(226, 232, 240, 0.8);
}
.status-detail-item[b-13a72y7k34] {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #475569;
}
.status-detail-item i[b-13a72y7k34] {
font-size: 14px;
color: #64748B;
width: 16px;
flex-shrink: 0;
}
.status-detail-label[b-13a72y7k34] {
font-weight: 600;
color: #64748B;
min-width: 100px;
}
.status-detail-value[b-13a72y7k34] {
color: #1E293B;
font-weight: 500;
}
.metadata-display[b-13a72y7k34] {
display: flex;
flex-direction: column;
gap: 12px;
}
.metadata-display-item[b-13a72y7k34] {
display: flex;
flex-direction: column;
gap: 4px;
padding: 10px 12px;
background: white;
border: 1px solid #E2E8F0;
border-radius: 8px;
}
.metadata-display-item .label[b-13a72y7k34] {
text-transform: uppercase;
font-size: 11px;
font-weight: 600;
color: #94A3B8;
}
.metadata-display-item .value[b-13a72y7k34] {
font-size: 14px;
color: #1F2937;
}
.metadata-form-actions[b-13a72y7k34] {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: 20px;
}
/* Unsaved Changes Banner */
.unsaved-changes-banner[b-13a72y7k34] {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
border: 2px solid #FDBA74;
border-radius: 10px;
margin-bottom: 16px;
}
.unsaved-changes-banner i[b-13a72y7k34] {
color: #F59E0B;
font-size: 20px;
margin-top: 2px;
}
.unsaved-changes-content[b-13a72y7k34] {
flex: 1;
}
.unsaved-changes-content strong[b-13a72y7k34] {
display: block;
color: #92400E;
font-size: 14px;
font-weight: 700;
margin-bottom: 4px;
}
.unsaved-changes-content p[b-13a72y7k34] {
color: #B45309;
font-size: 13px;
margin: 0;
}
/* Changed Tabs List */
.changed-tabs-list[b-13a72y7k34] {
background: #FEF3C7;
border: 1px solid #FCD34D;
border-radius: 8px;
padding: 12px;
margin-bottom: 16px;
}
.changed-tabs-title[b-13a72y7k34] {
font-size: 13px;
font-weight: 700;
color: #92400E;
margin: 0 0 8px 0;
}
.changed-tab-item[b-13a72y7k34] {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 0;
font-size: 13px;
color: #B45309;
font-weight: 600;
}
.changed-tab-item i[b-13a72y7k34] {
color: #F59E0B;
font-size: 16px;
}
.metadata-hint[b-13a72y7k34] {
font-size: 12px;
color: #6B7280;
margin-top: 4px;
display: block;
}
.metadata-label[b-13a72y7k34] {
font-size: 13px;
font-weight: 600;
color: #475569;
}
/* Required field indicator */
.metadata-label[b-13a72y7k34]::after {
content: "";
}
/* Add asterisk for required fields */
.metadata-item:has(.metadata-input[placeholder*="Enter model name"]) .metadata-label[b-13a72y7k34]::after,
.metadata-item:has(.metadata-input[type="datetime-local"]) .metadata-label[b-13a72y7k34]::after,
.metadata-item:has(.metadata-input[placeholder*="e.g"]) .metadata-label[b-13a72y7k34]::after {
content: " *";
color: var(--error-600);
}
.metadata-title[b-13a72y7k34] {
font-size: 16px;
font-weight: 700;
color: #1F2937;
margin: 0 0 16px 0;
}
.metadata-form[b-13a72y7k34] {
display: flex;
flex-direction: column;
gap: 16px;
}
.metadata-item[b-13a72y7k34] {
display: flex;
flex-direction: column;
gap: 8px;
}
.metadata-label[b-13a72y7k34] {
font-size: 13px;
font-weight: 600;
color: #475569;
}
.metadata-input[b-13a72y7k34],
.metadata-textarea[b-13a72y7k34] {
padding: 10px 14px;
background: white;
border: 1px solid #CBD5E1;
border-radius: 8px;
font-size: 14px;
color: #1F2937;
transition: all 0.2s;
}
.metadata-input:focus[b-13a72y7k34],
.metadata-textarea:focus[b-13a72y7k34] {
outline: none;
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
.metadata-textarea[b-13a72y7k34] {
resize: vertical;
font-family: inherit;
min-height: 80px;
}
/* Actions Card */
.actions-card[b-13a72y7k34] {
background: white;
border: 1px solid #E2E8F0;
border-radius: 12px;
padding: 20px;
}
.actions-title[b-13a72y7k34] {
font-size: 16px;
font-weight: 700;
color: #1F2937;
margin: 0 0 16px 0;
}
.actions-buttons[b-13a72y7k34] {
display: flex;
flex-direction: column;
gap: 12px;
}
.btn-primary[b-13a72y7k34],
.btn-secondary[b-13a72y7k34] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 24px;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
width: 100%;
}
.btn-primary[b-13a72y7k34] {
background: var(--brand-600, #004980);
color: white;
}
.btn-primary:hover[b-13a72y7k34] {
background: var(--brand-700, #003760);
}
.btn-secondary[b-13a72y7k34] {
background: transparent;
color: #64748B;
border: 1px solid #E2E8F0;
}
.btn-secondary:hover[b-13a72y7k34] {
background: #F1F5F9;
color: #0F172A;
}
.btn-primary i[b-13a72y7k34],
.btn-secondary i[b-13a72y7k34] {
font-size: 16px;
}
/* Responsive */
@media (max-width: 1200px) {
.rating-model-two-column[b-13a72y7k34] {
grid-template-columns: 350px 1fr;
}
}
@media (max-width: 1024px) {
.rating-model-two-column[b-13a72y7k34] {
grid-template-columns: 1fr;
}
.metadata-column[b-13a72y7k34] {
order: -1;
position: static;
}
}
@media (max-width: 768px) {
.rating-model-tabs[b-13a72y7k34] {
gap: 12px;
padding: 6px 8px;
}
.tab-item[b-13a72y7k34] {
padding: 8px 14px;
gap: 8px;
font-size: 13px;
}
.tab-item i[b-13a72y7k34] {
font-size: 16px;
}
.tab-content-area[b-13a72y7k34] {
padding: 16px;
}
}
/* ========================================
Version History Modal Styles
======================================== */
.modal-overlay[b-13a72y7k34] {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1.5rem;
}
.modal-content-large[b-13a72y7k34] {
background: white;
border-radius: 16px;
box-shadow: 0 24px 64px rgba(15, 23, 42, 0.25);
max-width: 700px;
width: 100%;
max-height: 90vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.modal-header[b-13a72y7k34] {
display: flex;
align-items: flex-start;
gap: 0.9rem;
padding: 1.25rem 1.5rem 1rem;
background: #fff;
border-bottom: 1px solid #EEF2F6;
}
.modal-header-text[b-13a72y7k34] {
flex: 1;
min-width: 0;
}
.modal-title[b-13a72y7k34] {
font-size: 1.05rem;
font-weight: 700;
color: #0F172A;
margin: 0;
}
.modal-subtitle[b-13a72y7k34] {
font-size: 0.8rem;
color: #64748B;
line-height: 1.45;
margin: 2px 0 0;
}
.modal-close-btn[b-13a72y7k34] {
flex-shrink: 0;
width: 32px;
height: 32px;
background: transparent;
border: none;
color: #94A3B8;
cursor: pointer;
border-radius: 8px;
transition: all 0.15s;
display: flex;
align-items: center;
justify-content: center;
}
.modal-close-btn:hover[b-13a72y7k34] {
background: #F1F5F9;
color: #0F172A;
}
.modal-body[b-13a72y7k34] {
padding: 1.15rem 1.5rem;
overflow-y: auto;
flex: 1;
}
.modal-footer[b-13a72y7k34] {
padding: 1rem 1.5rem;
border-top: 1px solid #EEF2F6;
background: #FAFBFC;
display: flex;
justify-content: flex-end;
gap: 0.6rem;
}
.btn-modal-close[b-13a72y7k34] {
padding: 0.55rem 1.15rem;
background: transparent;
color: #64748B;
border: 1px solid #E2E8F0;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}
.btn-modal-close:hover[b-13a72y7k34] {
background: #F1F5F9;
color: #0F172A;
}
/* Version List */
.version-list[b-13a72y7k34] {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 16px;
}
.version-item[b-13a72y7k34] {
background: #F8FAFC;
border: 2px solid #E2E8F0;
border-radius: 10px;
padding: 18px;
transition: all 0.2s;
}
.version-item:hover[b-13a72y7k34] {
border-color: #CBD5E1;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.version-item.active-version[b-13a72y7k34] {
background: linear-gradient(135deg, #E3F1FB 0%, #CCE5F1 100%);
border: 2px solid var(--brand-500);
}
.version-header[b-13a72y7k34] {
margin-bottom: 12px;
}
.version-name-wrapper[b-13a72y7k34] {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.version-name[b-13a72y7k34] {
font-size: 16px;
font-weight: 700;
color: #1F2937;
margin: 0;
}
.version-badge[b-13a72y7k34] {
display: inline-block;
padding: 4px 10px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.active-badge[b-13a72y7k34] {
background: linear-gradient(135deg, #10B981 0%, #059669 100%);
color: white;
}
.version-tag[b-13a72y7k34] {
background: #E5E7EB;
color: #6B7280;
}
.version-details[b-13a72y7k34] {
display: flex;
flex-direction: column;
gap: 8px;
}
.version-meta[b-13a72y7k34] {
font-size: 13px;
color: #475569;
margin: 0;
}
.version-meta strong[b-13a72y7k34] {
color: #1F2937;
font-weight: 600;
}
.version-description[b-13a72y7k34] {
font-size: 13px;
color: #64748B;
line-height: 1.6;
margin: 8px 0 0 0;
padding-top: 8px;
border-top: 1px solid #E2E8F0;
}
/* Responsive Modal */
@media (max-width: 768px) {
.modal-content-large[b-13a72y7k34] {
max-width: 100%;
margin: 0;
border-radius: 12px 12px 0 0;
max-height: 95vh;
}
.modal-header[b-13a72y7k34],
.modal-body[b-13a72y7k34],
.modal-footer[b-13a72y7k34] {
padding-left: 16px;
padding-right: 16px;
}
}
/* ========================================
Preview Calculator Form Styles
======================================== */
.preview-form[b-13a72y7k34] {
display: flex;
flex-direction: column;
gap: 16px;
}
.preview-field[b-13a72y7k34] {
display: flex;
flex-direction: column;
gap: 6px;
}
.preview-label[b-13a72y7k34] {
font-size: 13px;
font-weight: 600;
color: var(--brand-500);
}
.preview-input[b-13a72y7k34],
.preview-select[b-13a72y7k34] {
padding: 10px 14px;
background: white;
border: 1px solid #CBD5E1;
border-radius: 8px;
font-size: 14px;
color: #1F2937;
transition: all 0.2s;
}
.preview-input:focus[b-13a72y7k34],
.preview-select:focus[b-13a72y7k34] {
outline: none;
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
.preview-result-field[b-13a72y7k34] {
background: #F1F5F9;
border: 1px solid #CBD5E1;
border-radius: 8px;
padding: 12px;
}
.preview-result-label[b-13a72y7k34] {
font-size: 14px;
font-weight: 700;
color: var(--brand-500);
margin-bottom: 4px;
}
.preview-result-hint[b-13a72y7k34] {
font-size: 12px;
color: #64748B;
}
.preview-breakdown[b-13a72y7k34] {
background: #F8FAFC;
border: 2px solid #E2E8F0;
border-radius: 10px;
padding: 16px;
margin-top: 8px;
}
.breakdown-row[b-13a72y7k34] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
font-size: 14px;
color: #475569;
border-bottom: 1px solid #E2E8F0;
}
.breakdown-row:last-of-type[b-13a72y7k34] {
border-bottom: none;
padding-bottom: 12px;
margin-bottom: 12px;
}
.breakdown-value[b-13a72y7k34] {
font-weight: 700;
color: #1F2937;
}
.breakdown-total[b-13a72y7k34] {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 12px;
border-top: 2px solid var(--brand-500);
font-size: 16px;
font-weight: 700;
color: var(--brand-500);
}
.total-value[b-13a72y7k34] {
font-size: 18px;
font-weight: 700;
color: var(--brand-500);
}
.preview-details[b-13a72y7k34] {
background: #F8FAFC;
border: 1px solid #E2E8F0;
border-radius: 8px;
padding: 14px;
font-size: 12px;
color: #475569;
line-height: 1.8;
}
.preview-details p[b-13a72y7k34] {
margin: 4px 0;
}
@media (max-width: 768px) {
.modal-content-preview[b-13a72y7k34] {
max-width: 100%;
max-height: 95vh;
border-radius: 12px 12px 0 0;
}
}
/* ========================================
Inactive Model Banner
======================================== */
.inactive-model-banner[b-13a72y7k34] {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 16px 20px;
background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
border: 2px solid #F59E0B;
border-radius: 12px;
margin-bottom: 20px;
}
.inactive-banner-content[b-13a72y7k34] {
display: flex;
align-items: center;
gap: 12px;
}
.inactive-banner-content i[b-13a72y7k34] {
font-size: 24px;
color: #D97706;
}
.inactive-banner-content strong[b-13a72y7k34] {
display: block;
font-size: 15px;
color: #92400E;
}
.inactive-banner-content p[b-13a72y7k34] {
margin: 2px 0 0;
font-size: 13px;
color: #B45309;
}
.inactive-banner-actions[b-13a72y7k34] {
display: flex;
gap: 10px;
flex-shrink: 0;
}
.btn-banner-activate[b-13a72y7k34] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: var(--success-600, #059669);
color: white;
border: none;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-banner-activate:hover[b-13a72y7k34] {
background: var(--success-700, #047857);
}
.btn-banner-back[b-13a72y7k34] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: white;
color: #92400E;
border: 2px solid #F59E0B;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-banner-back:hover[b-13a72y7k34] {
background: #FFFBEB;
}
/* ========================================
Version History Action Buttons
======================================== */
.version-header[b-13a72y7k34] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.version-actions[b-13a72y7k34] {
display: flex;
gap: 8px;
flex-shrink: 0;
}
.btn-version-action[b-13a72y7k34] {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
border: none;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-version-view[b-13a72y7k34] {
background: transparent;
color: #64748B;
border: 1px solid #E2E8F0;
}
.btn-version-view:hover[b-13a72y7k34] {
background: #F1F5F9;
color: #0F172A;
}
.btn-version-activate[b-13a72y7k34] {
background: #ECFDF5;
color: #059669;
border: 1px solid #A7F3D0;
}
.btn-version-activate:hover[b-13a72y7k34] {
background: #D1FAE5;
color: #047857;
}
.version-current-label[b-13a72y7k34] {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 600;
color: #059669;
padding: 6px 12px;
}
/* ========================================
SweetAlert-Style Dialogs
======================================== */
.modal-content-sweet[b-13a72y7k34] {
background: white;
border-radius: 16px;
box-shadow: 0 24px 64px rgba(15, 23, 42, 0.25);
max-width: 480px;
width: 100%;
padding: 32px;
text-align: center;
animation: sweetPopIn-b-13a72y7k34 0.3s ease;
}
@keyframes sweetPopIn-b-13a72y7k34 {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
.sweet-icon[b-13a72y7k34] {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--brand-50, #E6F2F8);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
}
.sweet-icon i[b-13a72y7k34] {
font-size: 1.25rem;
color: var(--brand-600, #004980);
}
.sweet-icon-warning[b-13a72y7k34] {
background: var(--accent-50, #FFFBEB);
}
.sweet-icon-warning i[b-13a72y7k34] {
color: #B45309;
}
.sweet-title[b-13a72y7k34] {
font-size: 20px;
font-weight: 700;
color: #1F2937;
margin: 0 0 8px;
}
.sweet-text[b-13a72y7k34] {
font-size: 14px;
color: #64748B;
margin: 0 0 24px;
line-height: 1.6;
}
/* Choice Grid */
.sweet-choice-grid[b-13a72y7k34] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 20px;
}
.sweet-choice-card[b-13a72y7k34] {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 20px 16px;
background: #F8FAFC;
border: 2px solid #E2E8F0;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s;
text-align: center;
}
.sweet-choice-card i[b-13a72y7k34] {
font-size: 28px;
color: #64748B;
}
.sweet-choice-card strong[b-13a72y7k34] {
font-size: 14px;
color: #1F2937;
}
.sweet-choice-card span[b-13a72y7k34] {
font-size: 12px;
color: #64748B;
line-height: 1.4;
}
.sweet-choice-card:hover[b-13a72y7k34] {
border-color: var(--brand-500);
background: #F1F5F9;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.sweet-choice-primary[b-13a72y7k34] {
border-color: var(--brand-400);
background: linear-gradient(135deg, #E3F1FB 0%, #F0F7FC 100%);
}
.sweet-choice-primary i[b-13a72y7k34] {
color: var(--brand-500);
}
.sweet-choice-primary:hover[b-13a72y7k34] {
border-color: var(--brand-500);
background: linear-gradient(135deg, #CCE5F1 0%, #E3F1FB 100%);
}
/* Clone Form */
.clone-form[b-13a72y7k34] {
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: 20px;
text-align: left;
}
.clone-field[b-13a72y7k34] {
display: flex;
flex-direction: column;
gap: 6px;
}
.clone-label[b-13a72y7k34] {
font-size: 13px;
font-weight: 600;
color: #475569;
}
.clone-input[b-13a72y7k34] {
padding: 10px 14px;
background: white;
border: 1px solid #E2E8F0;
border-radius: 10px;
font-size: 14px;
color: #1F2937;
transition: all 0.2s;
}
.clone-input:focus[b-13a72y7k34] {
outline: none;
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
.clone-error[b-13a72y7k34] {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: #FEF2F2;
border: 1px solid #FECACA;
border-radius: 8px;
color: #DC2626;
font-size: 13px;
font-weight: 500;
margin-bottom: 16px;
}
/* Sweet Actions */
.sweet-actions[b-13a72y7k34] {
display: flex;
gap: 12px;
justify-content: center;
}
.btn-sweet-cancel[b-13a72y7k34] {
padding: 0.55rem 1.15rem;
background: transparent;
color: #64748B;
border: 1px solid #E2E8F0;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}
.btn-sweet-cancel:hover[b-13a72y7k34] {
background: #F1F5F9;
color: #0F172A;
}
.btn-sweet-confirm[b-13a72y7k34] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0.55rem 1.15rem;
background: var(--brand-600, #004980);
color: white;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}
.btn-sweet-confirm:hover[b-13a72y7k34] {
background: var(--brand-700, #003760);
}
.btn-sweet-confirm:disabled[b-13a72y7k34] {
opacity: 0.6;
cursor: not-allowed;
}
.btn-sweet-warning[b-13a72y7k34] {
background: var(--accent-600, #D97706);
}
.btn-sweet-warning:hover[b-13a72y7k34] {
background: #B45309;
}
@media (max-width: 480px) {
.sweet-choice-grid[b-13a72y7k34] {
grid-template-columns: 1fr;
}
.modal-content-sweet[b-13a72y7k34] {
padding: 24px 20px;
max-width: 100%;
}
.inactive-model-banner[b-13a72y7k34] {
flex-direction: column;
text-align: center;
}
.inactive-banner-actions[b-13a72y7k34] {
justify-content: center;
}
}
/* /Components/Pages/Admin/RatingModelTabs/FeesTab.razor.rz.scp.css */
/* ========================================
Fees Tab Styles - Matching LtvTab Design
======================================== */
.fees-tab[b-rluz2iu2ze] {
display: flex;
flex-direction: column;
gap: 24px;
}
/* Tab Header Section */
.tab-header-section[b-rluz2iu2ze] {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding-bottom: 20px;
border-bottom: 2px solid #E2E8F0;
}
.tab-header-left[b-rluz2iu2ze] {
flex: 1;
}
.tab-title[b-rluz2iu2ze] {
font-size: 24px;
font-weight: 700;
color: #1F2937;
margin: 0 0 8px 0;
}
.tab-description[b-rluz2iu2ze] {
font-size: 14px;
color: #64748B;
margin: 0;
}
/* Tab Header Right */
.tab-header-right[b-rluz2iu2ze] {
display: flex;
gap: 8px;
}
.btn-action[b-rluz2iu2ze] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border: 1px solid #E2E8F0;
border-radius: 8px;
background: transparent;
color: #64748B;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-action:hover:not(:disabled)[b-rluz2iu2ze] {
background: #F1F5F9;
color: #0F172A;
}
.btn-action:disabled[b-rluz2iu2ze] {
opacity: 0.4;
cursor: not-allowed;
}
.btn-update:not(:disabled)[b-rluz2iu2ze] {
background: var(--success-600, #059669);
color: white;
border-color: var(--success-600, #059669);
}
.btn-update:hover:not(:disabled)[b-rluz2iu2ze] {
background: var(--success-700, #047857);
color: white;
border-color: var(--success-700, #047857);
}
.spinner-border-sm[b-rluz2iu2ze] {
width: 1rem;
height: 1rem;
border-width: 0.2em;
}
.fees-content[b-rluz2iu2ze] {
display: flex;
flex-direction: column;
gap: 24px;
}
/* Fee Form Section */
.fee-form-section[b-rluz2iu2ze] {
background: white;
border: 1px solid #E2E8F0;
border-radius: 12px;
padding: 24px;
display: flex;
flex-direction: column;
gap: 20px;
max-width: 600px;
}
.fee-row[b-rluz2iu2ze] {
display: flex;
align-items: center;
gap: 16px;
position: relative;
}
.fee-label[b-rluz2iu2ze] {
font-size: 14px;
font-weight: 600;
color: #1F2937;
min-width: 220px;
}
.fee-input-wrapper[b-rluz2iu2ze] {
display: flex;
align-items: center;
position: relative;
}
.currency-symbol[b-rluz2iu2ze] {
position: absolute;
left: 14px;
font-size: 16px;
font-weight: 700;
color: #1F2937;
pointer-events: none;
}
.fee-input[b-rluz2iu2ze] {
width: 180px;
padding: 10px 14px 10px 32px;
border: 2px solid #3B82F6;
border-radius: 8px;
font-size: 16px;
font-weight: 700;
color: #1F2937;
text-align: left;
background: white;
transition: all 0.2s ease;
}
.fee-input:focus[b-rluz2iu2ze] {
outline: none;
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
.fee-input:hover[b-rluz2iu2ze] {
border-color: var(--brand-500);
}
.fee-input:disabled[b-rluz2iu2ze] {
opacity: 0.5;
cursor: not-allowed;
}
.change-indicator[b-rluz2iu2ze] {
margin-left: 12px;
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 600;
color: #F59E0B;
padding: 4px 8px;
background: #FEF3C7;
border-radius: 4px;
}
.change-indicator i[b-rluz2iu2ze] {
font-size: 10px;
}
/* Fees Info Section */
.fees-info[b-rluz2iu2ze] {
background: #F8FAFC;
border: 1px solid #E2E8F0;
border-radius: 12px;
padding: 16px 20px;
max-width: 600px;
}
.fees-info p[b-rluz2iu2ze] {
margin: 0 0 8px 0;
font-size: 13px;
color: #475569;
}
.fees-info p:last-child[b-rluz2iu2ze] {
margin-bottom: 0;
}
.fees-info strong[b-rluz2iu2ze] {
color: #1F2937;
font-weight: 700;
}
/* Update Details in Modal */
.update-details[b-rluz2iu2ze] {
padding: 12px;
background: #F8FAFC;
border-radius: 8px;
margin-top: 12px;
}
.update-details p[b-rluz2iu2ze] {
margin: 8px 0;
font-size: 14px;
color: #1F2937;
}
.update-details p:first-child[b-rluz2iu2ze] {
margin-top: 0;
}
.update-details p:last-child[b-rluz2iu2ze] {
margin-bottom: 0;
}
/* Alert Styles */
.alert[b-rluz2iu2ze] {
padding: 14px 16px;
border-radius: 8px;
font-size: 14px;
display: flex;
align-items: center;
animation: slideDown-b-rluz2iu2ze 0.3s ease-out;
margin-bottom: 16px;
}
@keyframes slideDown-b-rluz2iu2ze {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.alert-success[b-rluz2iu2ze] {
background-color: #D1FAE5;
border: 1px solid #6EE7B7;
color: #065F46;
}
.alert-danger[b-rluz2iu2ze] {
background-color: #FEE2E2;
border: 1px solid #FCA5A5;
color: #991B1B;
}
.alert i[b-rluz2iu2ze] {
font-size: 16px;
}
/* Loading State */
.text-center[b-rluz2iu2ze] {
text-align: center;
}
.py-5[b-rluz2iu2ze] {
padding-top: 3rem;
padding-bottom: 3rem;
}
.spinner-border[b-rluz2iu2ze] {
display: inline-block;
width: 2rem;
height: 2rem;
vertical-align: text-bottom;
border: 0.25em solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: spinner-border-b-rluz2iu2ze 0.75s linear infinite;
}
@keyframes spinner-border-b-rluz2iu2ze {
to { transform: rotate(360deg); }
}
.text-primary[b-rluz2iu2ze] {
color: #3B82F6;
}
.visually-hidden[b-rluz2iu2ze] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.mt-2[b-rluz2iu2ze] {
margin-top: 0.5rem;
}
.me-2[b-rluz2iu2ze] {
margin-right: 0.5rem;
}
.text-muted[b-rluz2iu2ze] {
color: #6c757d;
}
/* Responsive */
@media (max-width: 768px) {
.fees-tab[b-rluz2iu2ze] {
gap: 16px;
}
.tab-header-section[b-rluz2iu2ze] {
flex-direction: column;
gap: 12px;
}
.tab-title[b-rluz2iu2ze] {
font-size: 20px;
}
.btn-action[b-rluz2iu2ze] {
width: 100%;
justify-content: center;
}
.fee-row[b-rluz2iu2ze] {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.fee-label[b-rluz2iu2ze] {
min-width: auto;
}
.change-indicator[b-rluz2iu2ze] {
margin-left: 0;
margin-top: 4px;
}
}
@media (max-width: 576px) {
.tab-header-section[b-rluz2iu2ze] {
padding-bottom: 16px;
}
.tab-title[b-rluz2iu2ze] {
font-size: 18px;
}
.alert[b-rluz2iu2ze] {
padding: 12px 14px;
font-size: 13px;
}
}
/* /Components/Pages/Admin/RatingModelTabs/LoanTypeFactorsTab.razor.rz.scp.css */
/* ========================================
Loan Type Factors Tab Styles
Matching LtvTab design
======================================== */
.loan-type-factors-container[b-2jnjzau43m] {
display: flex;
flex-direction: column;
gap: 24px;
}
/* Tab Header Section */
.tab-header-section[b-2jnjzau43m] {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding-bottom: 20px;
border-bottom: 2px solid #E2E8F0;
}
.tab-header-left[b-2jnjzau43m] {
flex: 1;
}
.tab-title[b-2jnjzau43m] {
font-size: 24px;
font-weight: 700;
color: #1F2937;
margin: 0 0 8px 0;
}
.tab-description[b-2jnjzau43m] {
font-size: 14px;
color: #64748B;
margin: 0;
}
/* Header Actions */
.tab-header-right[b-2jnjzau43m] {
display: flex;
gap: 8px;
}
.btn-action[b-2jnjzau43m] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border: 1px solid #E2E8F0;
border-radius: 8px;
background: transparent;
color: #64748B;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-action:hover:not(:disabled)[b-2jnjzau43m] {
background: #F1F5F9;
color: #0F172A;
}
.btn-action:disabled[b-2jnjzau43m] {
opacity: 0.4;
cursor: not-allowed;
}
.btn-action i[b-2jnjzau43m] {
font-size: 16px;
}
/* Alert Styles - Matching LtvTab */
.alert[b-2jnjzau43m] {
padding: 14px 16px;
border-radius: 8px;
font-size: 14px;
display: flex;
align-items: center;
animation: slideDown-b-2jnjzau43m 0.3s ease-out;
margin-bottom: 16px;
}
@keyframes slideDown-b-2jnjzau43m {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.alert-success[b-2jnjzau43m] {
background-color: #D1FAE5;
border: 1px solid #6EE7B7;
color: #065F46;
}
.alert-danger[b-2jnjzau43m] {
background-color: #FEE2E2;
border: 1px solid #FCA5A5;
color: #991B1B;
}
.alert i[b-2jnjzau43m] {
font-size: 16px;
}
.btn-close[b-2jnjzau43m] {
margin-left: auto;
padding: 0;
background: transparent;
border: none;
font-size: 16px;
opacity: 0.5;
cursor: pointer;
}
.btn-close:hover[b-2jnjzau43m] {
opacity: 1;
}
/* Loading State */
.text-center[b-2jnjzau43m] {
text-align: center;
}
.py-5[b-2jnjzau43m] {
padding-top: 3rem;
padding-bottom: 3rem;
}
.spinner-border[b-2jnjzau43m] {
display: inline-block;
width: 2rem;
height: 2rem;
vertical-align: text-bottom;
border: 0.25em solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: spinner-border-b-2jnjzau43m 0.75s linear infinite;
}
@keyframes spinner-border-b-2jnjzau43m {
to { transform: rotate(360deg); }
}
.text-primary[b-2jnjzau43m] {
color: #3B82F6;
}
.visually-hidden[b-2jnjzau43m] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.mt-2[b-2jnjzau43m] {
margin-top: 0.5rem;
}
.text-muted[b-2jnjzau43m] {
color: #6c757d;
}
/* Empty State */
.alert-info[b-2jnjzau43m] {
background-color: #DBEAFE;
border: 1px solid #93C5FD;
color: #1E40AF;
}
/* Table Container */
.factors-grid[b-2jnjzau43m] {
background: white;
border: 1px solid #E2E8F0;
border-radius: 12px;
overflow: hidden;
}
/* Table Styles */
.table[b-2jnjzau43m] {
width: 100%;
margin: 0;
border-collapse: collapse;
}
.table thead[b-2jnjzau43m] {
background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
}
.table thead th[b-2jnjzau43m] {
padding: 16px 20px;
font-size: 13px;
font-weight: 700;
color: #1F2937;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 2px solid #E2E8F0;
text-align: left;
}
.table thead th.text-center[b-2jnjzau43m] {
text-align: center;
}
.table tbody tr[b-2jnjzau43m] {
background: white;
transition: all 0.2s;
border-bottom: 1px solid #E2E8F0;
}
.table tbody tr:hover:not(.editing-row)[b-2jnjzau43m] {
background: #F8FAFC;
}
.table tbody tr.editing-row[b-2jnjzau43m] {
background: #EFF6FF !important;
border-left: 3px solid #3B82F6;
}
.table tbody td[b-2jnjzau43m] {
padding: 12px 20px;
font-size: 14px;
color: #1F2937;
vertical-align: middle;
}
.table tbody td strong[b-2jnjzau43m] {
font-weight: 600;
color: #1F2937;
}
/* Form Controls */
.form-control[b-2jnjzau43m],
.form-control-sm[b-2jnjzau43m] {
width: 100%;
padding: 8px 12px;
background: white;
border: 1px solid #CBD5E1;
border-radius: 6px;
font-size: 14px;
color: #1F2937;
transition: all 0.2s;
}
.form-control-sm[b-2jnjzau43m] {
padding: 6px 10px;
font-size: 13px;
}
.form-control:focus[b-2jnjzau43m],
.form-control-sm:focus[b-2jnjzau43m] {
outline: none;
border-color: #3B82F6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
/* Preview Cell */
.preview-cell[b-2jnjzau43m] {
text-align: center;
vertical-align: middle;
}
/* Badges - Matching LtvTab */
.badge-credit[b-2jnjzau43m],
.badge-debit[b-2jnjzau43m],
.badge-neutral[b-2jnjzau43m] {
display: inline-block;
padding: 4px 12px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
}
.badge-credit[b-2jnjzau43m] {
background: #D1FAE5;
color: #059669;
}
.badge-debit[b-2jnjzau43m] {
background: #FEF3C7;
color: #D97706;
}
.badge-neutral[b-2jnjzau43m] {
background: #F1F5F9;
color: #64748B;
}
/* Action Buttons - Matching LtvTab */
.actions-column[b-2jnjzau43m] {
width: 120px;
}
.action-buttons[b-2jnjzau43m] {
display: flex;
gap: 8px;
align-items: center;
justify-content: center;
}
.btn-icon[b-2jnjzau43m] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: none;
border-radius: 6px;
background: transparent;
cursor: pointer;
transition: all 0.2s;
}
.btn-icon i[b-2jnjzau43m] {
font-size: 16px;
}
.btn-edit[b-2jnjzau43m] {
color: #3B82F6;
}
.btn-edit:hover:not(:disabled)[b-2jnjzau43m] {
background: #DBEAFE;
color: #1E40AF;
}
.btn-delete[b-2jnjzau43m] {
color: var(--error-600);
}
.btn-delete:hover:not(:disabled)[b-2jnjzau43m] {
background: #FEE2E2;
color: #991B1B;
}
.btn-save[b-2jnjzau43m] {
color: #10B981;
}
.btn-save:hover:not(:disabled)[b-2jnjzau43m] {
background: #D1FAE5;
color: #047857;
}
.btn-cancel[b-2jnjzau43m] {
color: #6B7280;
}
.btn-cancel:hover:not(:disabled)[b-2jnjzau43m] {
background: #F3F4F6;
color: #374151;
}
.btn-icon:disabled[b-2jnjzau43m] {
opacity: 0.3;
cursor: not-allowed;
}
/* Responsive Design */
@media (max-width: 768px) {
.loan-type-factors-container[b-2jnjzau43m] {
gap: 16px;
}
.tab-header-section[b-2jnjzau43m] {
flex-direction: column;
gap: 12px;
}
.tab-title[b-2jnjzau43m] {
font-size: 20px;
}
.tab-description[b-2jnjzau43m] {
font-size: 13px;
}
.factors-grid[b-2jnjzau43m] {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table[b-2jnjzau43m] {
min-width: 700px;
}
.table thead th[b-2jnjzau43m],
.table tbody td[b-2jnjzau43m] {
padding: 10px 12px;
font-size: 13px;
}
.action-buttons[b-2jnjzau43m] {
flex-direction: column;
gap: 4px;
}
.btn-icon[b-2jnjzau43m] {
width: 28px;
height: 28px;
}
.btn-icon i[b-2jnjzau43m] {
font-size: 14px;
}
}
@media (max-width: 576px) {
.tab-header-section[b-2jnjzau43m] {
padding-bottom: 16px;
}
.tab-title[b-2jnjzau43m] {
font-size: 18px;
}
.btn-action[b-2jnjzau43m] {
width: 100%;
justify-content: center;
}
.alert[b-2jnjzau43m] {
padding: 12px 14px;
font-size: 13px;
}
}
/* /Components/Pages/Admin/RatingModelTabs/LtvFactorsTab.razor.rz.scp.css */
/* ========================================
LTV Tab Styles
======================================== */
.ltv-tab[b-05u7rqyt19] {
display: flex;
flex-direction: column;
gap: 24px;
}
/* Tab Header Section */
.tab-header-section[b-05u7rqyt19] {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding-bottom: 20px;
border-bottom: 2px solid #E2E8F0;
}
.tab-header-left[b-05u7rqyt19] {
flex: 1;
}
.tab-title[b-05u7rqyt19] {
font-size: 24px;
font-weight: 700;
color: #1F2937;
margin: 0 0 8px 0;
}
.tab-description[b-05u7rqyt19] {
font-size: 14px;
color: #64748B;
margin: 0;
}
/* LTV Content */
.ltv-content[b-05u7rqyt19] {
display: flex;
flex-direction: column;
gap: 24px;
}
/* Decline Threshold Section */
.decline-threshold-section[b-05u7rqyt19] {
background: #F8FAFC;
border: 1px solid #E2E8F0;
border-radius: 12px;
padding: 20px;
}
.threshold-label[b-05u7rqyt19] {
display: block;
font-size: 14px;
font-weight: 600;
color: #1F2937;
}
.threshold-input-wrapper[b-05u7rqyt19] {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 12px;
}
.threshold-input[b-05u7rqyt19] {
width: 120px;
padding: 10px 14px;
background: white;
border: 2px solid #3B82F6;
border-radius: 8px;
font-size: 16px;
font-weight: 700;
color: #1F2937;
text-align: center;
}
.threshold-input:focus[b-05u7rqyt19] {
outline: none;
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
.threshold-hint[b-05u7rqyt19] {
font-size: 13px;
color: #64748B;
}
.current-threshold[b-05u7rqyt19] {
font-size: 13px;
color: #1F2937;
margin: 0;
padding: 8px 12px;
background: white;
border-radius: 6px;
border: 1px solid #E2E8F0;
}
/* Bulk Fill Section */
.bulk-fill-section[b-05u7rqyt19] {
background: #F8FAFC;
border: 1px solid #E2E8F0;
border-radius: 12px;
padding: 16px 20px;
}
.bulk-fill-title[b-05u7rqyt19] {
font-size: 16px;
font-weight: 700;
color: #1F2937;
margin: 0 0 12px 0;
}
.bulk-fill-controls[b-05u7rqyt19] {
display: flex;
gap: 12px;
}
.btn-bulk-fill[b-05u7rqyt19] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: var(--brand-600, #004980);
color: white;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-bulk-fill:hover[b-05u7rqyt19] {
background: var(--brand-700, #003760);
}
.btn-bulk-fill i[b-05u7rqyt19] {
font-size: 16px;
}
/* LTV Table Container */
.ltv-table-container[b-05u7rqyt19] {
background: white;
border: 1px solid #E2E8F0;
border-radius: 12px;
overflow: hidden;
max-height: 600px;
overflow-y: auto;
}
.ltv-table-container[b-05u7rqyt19]::-webkit-scrollbar {
width: 8px;
}
.ltv-table-container[b-05u7rqyt19]::-webkit-scrollbar-track {
background: #F1F5F9;
}
.ltv-table-container[b-05u7rqyt19]::-webkit-scrollbar-thumb {
background: #CBD5E1;
border-radius: 4px;
}
/* LTV Table */
.ltv-table[b-05u7rqyt19] {
width: 100%;
border-collapse: collapse;
}
.ltv-table thead[b-05u7rqyt19] {
position: sticky;
top: 0;
background: #F8FAFC;
z-index: 10;
}
.ltv-table th[b-05u7rqyt19] {
padding: 14px 20px;
text-align: left;
font-size: 13px;
font-weight: 700;
color: #475569;
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 2px solid #E2E8F0;
}
.ltv-table tbody tr[b-05u7rqyt19] {
transition: background-color 0.2s;
}
.ltv-table tbody tr:hover[b-05u7rqyt19] {
background: #F8FAFC;
}
.ltv-table tbody tr.decline-row[b-05u7rqyt19] {
background: #FEE2E2;
}
.ltv-table tbody tr.decline-row:hover[b-05u7rqyt19] {
background: #FECACA;
}
.ltv-table td[b-05u7rqyt19] {
padding: 12px 20px;
font-size: 14px;
color: #1F2937;
border-bottom: 1px solid #E2E8F0;
}
.ltv-percent[b-05u7rqyt19] {
font-weight: 600;
color: #1F2937;
}
.factor-input-small[b-05u7rqyt19] {
width: 120px;
padding: 6px 10px;
background: white;
border: 1px solid #CBD5E1;
border-radius: 6px;
font-size: 14px;
color: #1F2937;
text-align: right;
}
.factor-input-small:focus[b-05u7rqyt19] {
outline: none;
border-color: var(--brand-500);
box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.08);
}
.na-text[b-05u7rqyt19] {
color: #94A3B8;
font-style: italic;
}
.decline-cell[b-05u7rqyt19] {
text-align: center;
vertical-align: middle;
}
.decline-checkbox[b-05u7rqyt19] {
width: 20px;
height: 20px;
cursor: pointer;
margin: 0 auto;
display: inline-block;
}
.preview-cell[b-05u7rqyt19] {
text-align: center;
vertical-align: middle;
}
/* Badges */
.badge-decline[b-05u7rqyt19],
.badge-credit[b-05u7rqyt19],
.badge-debit[b-05u7rqyt19],
.badge-neutral[b-05u7rqyt19] {
display: inline-block;
padding: 4px 12px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
}
.badge-decline[b-05u7rqyt19] {
background: #FEE2E2;
color: var(--error-600);
}
.badge-credit[b-05u7rqyt19] {
background: #D1FAE5;
color: #059669;
}
.badge-debit[b-05u7rqyt19] {
background: #FEF3C7;
color: #D97706;
}
.badge-neutral[b-05u7rqyt19] {
background: #F1F5F9;
color: #64748B;
}
/* Legend */
.ltv-legend[b-05u7rqyt19] {
background: #F8FAFC;
border: 1px solid #E2E8F0;
border-radius: 12px;
padding: 16px 20px;
}
.ltv-legend p[b-05u7rqyt19] {
margin: 0 0 8px 0;
font-size: 13px;
color: #475569;
}
.ltv-legend p:last-child[b-05u7rqyt19] {
margin-bottom: 0;
}
.ltv-legend strong[b-05u7rqyt19] {
color: #1F2937;
font-weight: 700;
}
/* Editing Row Styles */
.ltv-table tbody tr.editing[b-05u7rqyt19] {
background: #EFF6FF !important;
border-left: 3px solid var(--brand-500);
}
.ltv-table tbody tr.editing td[b-05u7rqyt19] {
padding: 10px 20px;
}
/* Action Buttons */
.action-buttons[b-05u7rqyt19] {
display: flex;
gap: 8px;
align-items: center;
justify-content: center;
}
.btn-icon[b-05u7rqyt19] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: none;
border-radius: 6px;
background: transparent;
cursor: pointer;
transition: all 0.2s;
}
.btn-icon i[b-05u7rqyt19] {
font-size: 16px;
}
.btn-edit[b-05u7rqyt19] {
color: #3B82F6;
}
.btn-edit:hover:not(:disabled)[b-05u7rqyt19] {
background: #DBEAFE;
color: #1E40AF;
}
.btn-delete[b-05u7rqyt19] {
color: var(--error-600);
}
.btn-delete:hover:not(:disabled)[b-05u7rqyt19] {
background: #FEE2E2;
color: #991B1B;
}
.btn-save[b-05u7rqyt19] {
color: #10B981;
}
.btn-save:hover:not(:disabled)[b-05u7rqyt19] {
background: #D1FAE5;
color: #047857;
}
.btn-cancel[b-05u7rqyt19] {
color: #6B7280;
}
.btn-cancel:hover:not(:disabled)[b-05u7rqyt19] {
background: #F3F4F6;
color: #374151;
}
.btn-icon:disabled[b-05u7rqyt19] {
opacity: 0.3;
cursor: not-allowed;
}
/* Header Actions */
.tab-header-right[b-05u7rqyt19] {
display: flex;
gap: 8px;
}
.btn-action[b-05u7rqyt19] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border: 1px solid #E2E8F0;
border-radius: 8px;
background: transparent;
color: #64748B;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-action:hover:not(:disabled)[b-05u7rqyt19] {
background: #F1F5F9;
color: #0F172A;
}
.btn-action:disabled[b-05u7rqyt19] {
opacity: 0.4;
cursor: not-allowed;
}
/* Alert Styles */
.alert[b-05u7rqyt19] {
padding: 14px 16px;
border-radius: 8px;
font-size: 14px;
display: flex;
align-items: center;
animation: slideDown-b-05u7rqyt19 0.3s ease-out;
}
@keyframes slideDown-b-05u7rqyt19 {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.alert-success[b-05u7rqyt19] {
background-color: var(--success-50);
border: 1px solid var(--success-200);
color: var(--success-700);
}
.alert-danger[b-05u7rqyt19] {
background-color: var(--error-50);
border: 1px solid #FCA5A5;
color: var(--error-700);
}
/* Responsive */
@media (max-width: 768px) {
.tab-header-section[b-05u7rqyt19] {
flex-direction: column;
gap: 16px;
}
.tab-header-right[b-05u7rqyt19] {
width: 100%;
}
.tab-header-right .btn[b-05u7rqyt19] {
flex: 1;
}
.threshold-input-wrapper[b-05u7rqyt19] {
flex-direction: column;
align-items: flex-start;
}
.threshold-input[b-05u7rqyt19] {
width: 100%;
}
.ltv-table th[b-05u7rqyt19],
.ltv-table td[b-05u7rqyt19] {
padding: 10px 12px;
font-size: 13px;
}
.factor-input-small[b-05u7rqyt19] {
width: 100px;
}
}
/* /Components/Pages/Admin/RatingModelTabs/PremiumLadderTab.razor.rz.scp.css */
/* Premium Ladder Tab Styles */
.premium-ladder-tab[b-7lxtfrupbf] {
padding: 24px;
}
.tab-header-section[b-7lxtfrupbf] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 2px solid #E2E8F0;
}
.tab-header-left[b-7lxtfrupbf] {
flex: 1;
}
.tab-title[b-7lxtfrupbf] {
font-size: 20px;
font-weight: 700;
color: #1F2937;
margin: 0 0 8px 0;
}
.tab-description[b-7lxtfrupbf] {
font-size: 14px;
color: #6B7280;
margin: 0;
}
.tab-header-right[b-7lxtfrupbf] {
display: flex;
align-items: center;
gap: 16px;
}
.selection-info[b-7lxtfrupbf] {
display: flex;
align-items: center;
gap: 8px;
}
.info-label[b-7lxtfrupbf] {
font-size: 13px;
font-weight: 600;
color: #6B7280;
}
.info-value[b-7lxtfrupbf] {
padding: 4px 12px;
border-radius: 6px;
font-size: 12px;
font-weight: 700;
background: #F3F4F6;
color: #374151;
}
.info-value.ceiling[b-7lxtfrupbf] {
background: #DBEAFE;
color: #1E40AF;
}
.btn-action[b-7lxtfrupbf] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border: 1px solid #E2E8F0;
border-radius: 8px;
background: transparent;
color: #64748B;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-action:hover:not(:disabled)[b-7lxtfrupbf] {
background: #F1F5F9;
color: #0F172A;
}
.btn-action:disabled[b-7lxtfrupbf] {
opacity: 0.4;
cursor: not-allowed;
}
.premium-ladder-content[b-7lxtfrupbf] {
background: white;
border-radius: 12px;
border: 1px solid #E2E8F0;
overflow: hidden;
}
.rate-table-section[b-7lxtfrupbf] {
width: 100%;
}
.table-header[b-7lxtfrupbf] {
padding: 16px;
background: #F8FAFC;
border-bottom: 1px solid #E2E8F0;
}
.search-input[b-7lxtfrupbf] {
width: 100%;
padding: 10px 14px;
border: 1px solid #CBD5E1;
border-radius: 8px;
font-size: 14px;
transition: all 0.2s;
}
.search-input:focus[b-7lxtfrupbf] {
outline: none;
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
.table-container[b-7lxtfrupbf] {
max-height: 600px;
overflow-y: auto;
}
.premium-table[b-7lxtfrupbf] {
width: 100%;
border-collapse: collapse;
}
.premium-table thead[b-7lxtfrupbf] {
position: sticky;
top: 0;
background: #F1F5F9;
z-index: 10;
}
.premium-table th[b-7lxtfrupbf] {
padding: 12px 16px;
text-align: left;
font-size: 13px;
font-weight: 700;
color: #475569;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 2px solid #CBD5E1;
}
.premium-table td[b-7lxtfrupbf] {
padding: 12px 16px;
font-size: 14px;
color: #1F2937;
border-bottom: 1px solid #E2E8F0;
}
.premium-table tbody tr[b-7lxtfrupbf] {
transition: all 0.2s;
}
.premium-table tbody tr:hover:not(.editing)[b-7lxtfrupbf] {
background: #F8FAFC;
}
.premium-table tbody tr.highlighted[b-7lxtfrupbf] {
background: #FEF3C7;
border-left: 4px solid #F59E0B;
}
.premium-table tbody tr.editing[b-7lxtfrupbf] {
background: #EFF6FF;
border-left: 4px solid #3B82F6;
}
.premium-table tbody tr.new-row[b-7lxtfrupbf] {
background: #F0FDF4;
border-left: 4px solid #10B981;
}
.action-buttons[b-7lxtfrupbf] {
display: flex;
gap: 8px;
align-items: center;
}
.btn-icon[b-7lxtfrupbf] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: none;
border-radius: 6px;
background: transparent;
cursor: pointer;
transition: all 0.2s;
}
.btn-icon i[b-7lxtfrupbf] {
font-size: 16px;
}
.btn-edit[b-7lxtfrupbf] {
color: #3B82F6;
}
.btn-edit:hover:not(:disabled)[b-7lxtfrupbf] {
background: #DBEAFE;
color: #1E40AF;
}
.btn-delete[b-7lxtfrupbf] {
color: var(--error-600);
}
.btn-delete:hover:not(:disabled)[b-7lxtfrupbf] {
background: #FEE2E2;
color: #991B1B;
}
.btn-save[b-7lxtfrupbf] {
color: #10B981;
}
.btn-save:hover:not(:disabled)[b-7lxtfrupbf] {
background: #D1FAE5;
color: #047857;
}
.btn-cancel[b-7lxtfrupbf] {
color: #6B7280;
}
.btn-cancel:hover:not(:disabled)[b-7lxtfrupbf] {
background: #F3F4F6;
color: #374151;
}
.btn-icon:disabled[b-7lxtfrupbf] {
opacity: 0.3;
cursor: not-allowed;
}
.empty-state[b-7lxtfrupbf] {
text-align: center;
padding: 48px 24px !important;
color: #9CA3AF;
}
.empty-state i[b-7lxtfrupbf] {
font-size: 48px;
margin-bottom: 16px;
display: block;
}
.empty-state p[b-7lxtfrupbf] {
font-size: 14px;
margin-bottom: 16px;
}
.btn-add-first[b-7lxtfrupbf] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border: 2px dashed #D1D5DB;
border-radius: 8px;
background: white;
color: #6B7280;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.btn-add-first:hover[b-7lxtfrupbf] {
border-color: var(--brand-500);
color: var(--brand-500);
background: #F0F9FF;
}
.table-footer[b-7lxtfrupbf] {
padding: 12px 16px;
background: #F8FAFC;
border-top: 1px solid #E2E8F0;
}
.table-summary[b-7lxtfrupbf] {
margin: 0;
font-size: 13px;
color: #6B7280;
}
.table-summary strong[b-7lxtfrupbf] {
color: #1F2937;
font-weight: 600;
}
/* Form Controls in Table */
.premium-table .form-control[b-7lxtfrupbf] {
width: 100%;
padding: 6px 10px;
border: 1px solid #CBD5E1;
border-radius: 6px;
font-size: 14px;
}
.premium-table .form-control:focus[b-7lxtfrupbf] {
outline: none;
border-color: #3B82F6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.alert[b-7lxtfrupbf] {
padding: 14px 16px;
border-radius: 8px;
font-size: 14px;
display: flex;
align-items: center;
animation: slideDown-b-7lxtfrupbf 0.3s ease-out;
}
@keyframes slideDown-b-7lxtfrupbf {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.alert-success[b-7lxtfrupbf] {
background-color: var(--success-50);
border: 1px solid var(--success-200);
color: var(--success-700);
}
.alert-danger[b-7lxtfrupbf] {
background-color: var(--error-50);
border: 1px solid #FCA5A5;
color: var(--error-700);
}
/* Responsive */
@media (max-width: 768px) {
.tab-header-section[b-7lxtfrupbf] {
flex-direction: column;
gap: 16px;
}
.tab-header-right[b-7lxtfrupbf] {
flex-wrap: wrap;
width: 100%;
}
.table-container[b-7lxtfrupbf] {
max-height: 400px;
}
.premium-table th[b-7lxtfrupbf],
.premium-table td[b-7lxtfrupbf] {
padding: 8px 12px;
font-size: 13px;
}
}
/* /Components/Pages/Admin/RatingModelTabs/PropertyTypeFactorsTab.razor.rz.scp.css */
/* ========================================
Property Type Factors Tab Styles
Matching LtvTab design
======================================== */
.property-tab[b-9446r0bgr9] {
display: flex;
flex-direction: column;
gap: 24px;
}
/* Tab Header Section */
.tab-header-section[b-9446r0bgr9] {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding-bottom: 20px;
border-bottom: 2px solid #E2E8F0;
}
.tab-header-left[b-9446r0bgr9] {
flex: 1;
}
.tab-title[b-9446r0bgr9] {
font-size: 24px;
font-weight: 700;
color: #1F2937;
margin: 0 0 8px 0;
}
.tab-description[b-9446r0bgr9] {
font-size: 14px;
color: #64748B;
margin: 0;
}
/* Property Content */
.property-content[b-9446r0bgr9] {
display: flex;
flex-direction: column;
gap: 24px;
}
/* Property Table Container */
.property-table-container[b-9446r0bgr9] {
background: white;
border: 1px solid #E2E8F0;
border-radius: 12px;
overflow: hidden;
max-height: 600px;
overflow-y: auto;
}
.property-table-container[b-9446r0bgr9]::-webkit-scrollbar {
width: 8px;
}
.property-table-container[b-9446r0bgr9]::-webkit-scrollbar-track {
background: #F1F5F9;
}
.property-table-container[b-9446r0bgr9]::-webkit-scrollbar-thumb {
background: #CBD5E1;
border-radius: 4px;
}
/* Property Table */
.property-table[b-9446r0bgr9] {
width: 100%;
border-collapse: collapse;
}
.property-table thead[b-9446r0bgr9] {
position: sticky;
top: 0;
background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
z-index: 10;
}
.property-table thead th[b-9446r0bgr9] {
padding: 16px 20px;
font-size: 13px;
font-weight: 700;
color: #1F2937;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 2px solid #E2E8F0;
text-align: left;
}
.property-table thead th.text-center[b-9446r0bgr9] {
text-align: center;
}
.property-table tbody tr[b-9446r0bgr9] {
background: white;
transition: all 0.2s;
border-bottom: 1px solid #E2E8F0;
}
.property-table tbody tr:hover:not(.editing)[b-9446r0bgr9] {
background: #F8FAFC;
}
.property-table tbody tr.decline-row[b-9446r0bgr9] {
background: #FEF2F2;
}
.property-table tbody tr.decline-row:hover[b-9446r0bgr9] {
background: #FECACA;
}
.property-table tbody tr.editing[b-9446r0bgr9] {
background: #EFF6FF !important;
border-left: 3px solid #3B82F6;
}
.property-table tbody td[b-9446r0bgr9] {
padding: 12px 20px;
font-size: 14px;
color: #1F2937;
vertical-align: middle;
}
.property-type-name[b-9446r0bgr9] {
font-weight: 600;
color: #1F2937;
}
.factor-input-small[b-9446r0bgr9] {
width: 120px;
padding: 6px 10px;
background: white;
border: 1px solid #CBD5E1;
border-radius: 6px;
font-size: 14px;
color: #1F2937;
text-align: right;
}
.factor-input-small:focus[b-9446r0bgr9] {
outline: none;
border-color: #3B82F6;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}
.na-text[b-9446r0bgr9] {
color: #94A3B8;
font-style: italic;
}
.decline-cell[b-9446r0bgr9] {
text-align: center;
vertical-align: middle;
}
.decline-checkbox[b-9446r0bgr9] {
width: 20px;
height: 20px;
cursor: pointer;
margin: 0 auto;
display: inline-block;
}
.preview-cell[b-9446r0bgr9] {
text-align: center;
vertical-align: middle;
}
/* Badges - Matching LtvTab */
.badge-decline[b-9446r0bgr9],
.badge-credit[b-9446r0bgr9],
.badge-debit[b-9446r0bgr9],
.badge-neutral[b-9446r0bgr9] {
display: inline-block;
padding: 4px 12px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
}
.badge-decline[b-9446r0bgr9] {
background: #FEE2E2;
color: var(--error-600);
}
.badge-credit[b-9446r0bgr9] {
background: #D1FAE5;
color: #059669;
}
.badge-debit[b-9446r0bgr9] {
background: #FEF3C7;
color: #D97706;
}
.badge-neutral[b-9446r0bgr9] {
background: #F1F5F9;
color: #64748B;
}
/* Legend */
.property-legend[b-9446r0bgr9] {
background: #F8FAFC;
border: 1px solid #E2E8F0;
border-radius: 12px;
padding: 16px 20px;
}
.property-legend p[b-9446r0bgr9] {
margin: 0 0 8px 0;
font-size: 13px;
color: #475569;
}
.property-legend p:last-child[b-9446r0bgr9] {
margin-bottom: 0;
}
.property-legend strong[b-9446r0bgr9] {
color: #1F2937;
font-weight: 700;
}
/* Action Buttons - Matching LtvTab */
.action-buttons[b-9446r0bgr9] {
display: flex;
gap: 8px;
align-items: center;
justify-content: center;
}
.btn-icon[b-9446r0bgr9] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: none;
border-radius: 6px;
background: transparent;
cursor: pointer;
transition: all 0.2s;
}
.btn-icon i[b-9446r0bgr9] {
font-size: 16px;
}
.btn-edit[b-9446r0bgr9] {
color: #3B82F6;
}
.btn-edit:hover:not(:disabled)[b-9446r0bgr9] {
background: #DBEAFE;
color: #1E40AF;
}
.btn-delete[b-9446r0bgr9] {
color: var(--error-600);
}
.btn-delete:hover:not(:disabled)[b-9446r0bgr9] {
background: #FEE2E2;
color: #991B1B;
}
.btn-save[b-9446r0bgr9] {
color: #10B981;
}
.btn-save:hover:not(:disabled)[b-9446r0bgr9] {
background: #D1FAE5;
color: #047857;
}
.btn-cancel[b-9446r0bgr9] {
color: #6B7280;
}
.btn-cancel:hover:not(:disabled)[b-9446r0bgr9] {
background: #F3F4F6;
color: #374151;
}
.btn-icon:disabled[b-9446r0bgr9] {
opacity: 0.3;
cursor: not-allowed;
}
/* Header Actions */
.tab-header-right[b-9446r0bgr9] {
display: flex;
gap: 8px;
}
.btn-action[b-9446r0bgr9] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border: 1px solid #E2E8F0;
border-radius: 8px;
background: transparent;
color: #64748B;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-action:hover:not(:disabled)[b-9446r0bgr9] {
background: #F1F5F9;
color: #0F172A;
}
.btn-action:disabled[b-9446r0bgr9] {
opacity: 0.4;
cursor: not-allowed;
}
.btn-action i[b-9446r0bgr9] {
font-size: 16px;
}
/* Alert Styles */
.alert[b-9446r0bgr9] {
padding: 14px 16px;
border-radius: 8px;
font-size: 14px;
display: flex;
align-items: center;
animation: slideDown-b-9446r0bgr9 0.3s ease-out;
}
@keyframes slideDown-b-9446r0bgr9 {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.alert-success[b-9446r0bgr9] {
background-color: var(--success-50);
border: 1px solid var(--success-200);
color: var(--success-700);
}
.alert-danger[b-9446r0bgr9] {
background-color: var(--error-50);
border: 1px solid #FCA5A5;
color: var(--error-700);
}
.alert i[b-9446r0bgr9] {
font-size: 16px;
}
/* Form Controls */
.form-control[b-9446r0bgr9],
.form-control-sm[b-9446r0bgr9] {
width: 100%;
padding: 8px 12px;
background: white;
border: 1px solid #CBD5E1;
border-radius: 6px;
font-size: 14px;
color: #1F2937;
transition: all 0.2s;
}
.form-control-sm[b-9446r0bgr9] {
padding: 6px 10px;
font-size: 13px;
}
.form-control:focus[b-9446r0bgr9],
.form-control-sm:focus[b-9446r0bgr9] {
outline: none;
border-color: #3B82F6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
/* Loading State */
.text-center[b-9446r0bgr9] {
text-align: center;
}
.py-5[b-9446r0bgr9] {
padding-top: 3rem;
padding-bottom: 3rem;
}
.spinner-border[b-9446r0bgr9] {
display: inline-block;
width: 2rem;
height: 2rem;
vertical-align: text-bottom;
border: 0.25em solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: spinner-border-b-9446r0bgr9 0.75s linear infinite;
}
@keyframes spinner-border-b-9446r0bgr9 {
to { transform: rotate(360deg); }
}
.text-primary[b-9446r0bgr9] {
color: #3B82F6;
}
.visually-hidden[b-9446r0bgr9] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.mt-2[b-9446r0bgr9] {
margin-top: 0.5rem;
}
.text-muted[b-9446r0bgr9] {
color: #6c757d;
}
/* Responsive Design */
@media (max-width: 768px) {
.property-tab[b-9446r0bgr9] {
gap: 16px;
}
.tab-header-section[b-9446r0bgr9] {
flex-direction: column;
gap: 12px;
}
.tab-title[b-9446r0bgr9] {
font-size: 20px;
}
.tab-description[b-9446r0bgr9] {
font-size: 13px;
}
.property-table-container[b-9446r0bgr9] {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.property-table[b-9446r0bgr9] {
min-width: 700px;
}
.property-table thead th[b-9446r0bgr9],
.property-table tbody td[b-9446r0bgr9] {
padding: 10px 12px;
font-size: 13px;
}
.action-buttons[b-9446r0bgr9] {
flex-direction: column;
gap: 4px;
}
.btn-icon[b-9446r0bgr9] {
width: 28px;
height: 28px;
}
.btn-icon i[b-9446r0bgr9] {
font-size: 14px;
}
}
@media (max-width: 576px) {
.tab-header-section[b-9446r0bgr9] {
padding-bottom: 16px;
}
.tab-title[b-9446r0bgr9] {
font-size: 18px;
}
.btn-action[b-9446r0bgr9] {
width: 100%;
justify-content: center;
}
.alert[b-9446r0bgr9] {
padding: 12px 14px;
font-size: 13px;
}
}
/* ========================================
Property Tab Styles
======================================== */
.property-tab[b-9446r0bgr9] {
display: flex;
flex-direction: column;
gap: 24px;
}
.property-content[b-9446r0bgr9] {
display: flex;
flex-direction: column;
gap: 24px;
}
/* Table Container - Matching LTV Tab Design Exactly */
.property-table-container[b-9446r0bgr9] {
background: white;
border: 1px solid #E2E8F0;
border-radius: 12px;
overflow: hidden;
max-height: 600px;
overflow-y: auto;
}
.property-table-container[b-9446r0bgr9]::-webkit-scrollbar {
width: 8px;
}
.property-table-container[b-9446r0bgr9]::-webkit-scrollbar-track {
background: #F1F5F9;
}
.property-table-container[b-9446r0bgr9]::-webkit-scrollbar-thumb {
background: #CBD5E1;
border-radius: 4px;
}
.property-table[b-9446r0bgr9] {
width: 100%;
border-collapse: collapse;
}
.property-table thead[b-9446r0bgr9] {
position: sticky;
top: 0;
background: #F8FAFC;
z-index: 10;
}
.property-table thead th[b-9446r0bgr9] {
padding: 14px 20px;
text-align: left;
font-size: 13px;
font-weight: 700;
color: #475569;
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 2px solid #E2E8F0;
}
.property-table thead th.text-center[b-9446r0bgr9] {
text-align: center;
}
.property-table tbody tr[b-9446r0bgr9] {
transition: background-color 0.2s;
}
.property-table tbody tr:hover[b-9446r0bgr9] {
background: #F8FAFC;
}
.property-table tbody td[b-9446r0bgr9] {
padding: 12px 20px;
font-size: 14px;
color: #1F2937;
border-bottom: 1px solid #E2E8F0;
}
.property-type-name[b-9446r0bgr9] {
font-weight: 600;
color: #1F2937;
}
.factor-input-small[b-9446r0bgr9] {
width: 120px;
padding: 6px 10px;
background: white;
border: 1px solid #CBD5E1;
border-radius: 6px;
font-size: 14px;
color: #1F2937;
text-align: right;
}
.factor-input-small:focus[b-9446r0bgr9] {
outline: none;
border-color: var(--brand-500);
box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.08);
}
.factor-input-small:disabled[b-9446r0bgr9] {
background-color: #F1F5F9;
color: #94A3B8;
cursor: not-allowed;
}
.na-text[b-9446r0bgr9] {
color: #94A3B8;
font-style: italic;
}
.decline-cell[b-9446r0bgr9] {
text-align: center;
vertical-align: middle;
}
.decline-checkbox[b-9446r0bgr9] {
width: 20px;
height: 20px;
cursor: pointer;
margin: 0 auto;
display: inline-block;
}
.preview-cell[b-9446r0bgr9] {
text-align: center;
vertical-align: middle;
}
.delete-cell[b-9446r0bgr9] {
text-align: center;
vertical-align: middle;
}
/* Badge Styles - Matching LTV Tab Exactly */
.badge-decline[b-9446r0bgr9],
.badge-credit[b-9446r0bgr9],
.badge-debit[b-9446r0bgr9],
.badge-neutral[b-9446r0bgr9] {
display: inline-block;
padding: 4px 12px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
}
.badge-decline[b-9446r0bgr9] {
background: #FEE2E2;
color: var(--error-600);
}
.badge-credit[b-9446r0bgr9] {
background: #D1FAE5;
color: #059669;
}
.badge-debit[b-9446r0bgr9] {
background: #FEF3C7;
color: #D97706;
}
.badge-neutral[b-9446r0bgr9] {
background: #F1F5F9;
color: #64748B;
}
/* Add Property Section */
.add-property-section[b-9446r0bgr9] {
background: white;
border: 1px solid #E2E8F0;
border-radius: 12px;
padding: 16px 20px;
}
.btn-add-property[b-9446r0bgr9] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: var(--brand-600, #004980);
color: white;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-add-property:hover[b-9446r0bgr9] {
background: var(--brand-700, #003760);
}
.btn-add-property i[b-9446r0bgr9] {
font-size: 16px;
}
/* Property Legend - Matching LTV Tab Exactly */
.property-legend[b-9446r0bgr9] {
background: #F8FAFC;
border: 1px solid #E2E8F0;
border-radius: 12px;
padding: 16px 20px;
}
.property-legend p[b-9446r0bgr9] {
margin: 0 0 8px 0;
font-size: 13px;
color: #475569;
}
.property-legend p:last-child[b-9446r0bgr9] {
margin-bottom: 0;
}
.property-legend p strong[b-9446r0bgr9] {
color: #1F2937;
font-weight: 600;
}
.form-label[b-9446r0bgr9] {
display: block;
font-size: 14px;
font-weight: 600;
color: #475569;
margin-bottom: 8px;
}
.form-input[b-9446r0bgr9] {
width: 100%;
padding: 10px 14px;
border: 2px solid #E2E8F0;
border-radius: 8px;
font-size: 14px;
color: #1F2937;
transition: all 0.2s ease;
}
.form-input:focus[b-9446r0bgr9] {
outline: none;
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
.btn-cancel[b-9446r0bgr9],
.btn-save[b-9446r0bgr9] {
padding: 10px 18px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
/* Search Bar */
.property-search-bar[b-9446r0bgr9] {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: -8px;
}
.search-input-wrapper[b-9446r0bgr9] {
position: relative;
flex: 1;
max-width: 360px;
}
.search-icon[b-9446r0bgr9] {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: #9CA3AF;
font-size: 13px;
pointer-events: none;
}
.search-input[b-9446r0bgr9] {
padding-left: 32px !important;
padding-right: 32px !important;
font-size: 13px !important;
border-radius: 8px !important;
border: 1px solid #E5E7EB !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.search-input:focus[b-9446r0bgr9] {
border-color: #93C5FD !important;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}
.search-clear-btn[b-9446r0bgr9] {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: #9CA3AF;
cursor: pointer;
padding: 2px 4px;
font-size: 12px;
line-height: 1;
border-radius: 4px;
transition: color 0.15s ease, background 0.15s ease;
}
.search-clear-btn:hover[b-9446r0bgr9] {
color: #374151;
background: #F3F4F6;
}
.search-result-count[b-9446r0bgr9] {
font-size: 12px;
color: #9CA3AF;
white-space: nowrap;
}
/* Tier & Active Columns */
.tier-cell[b-9446r0bgr9] {
text-align: center;
}
.active-cell[b-9446r0bgr9] {
text-align: center;
}
.tier-select[b-9446r0bgr9] {
width: auto;
min-width: 120px;
font-size: 13px;
}
.tier-badge[b-9446r0bgr9] {
display: inline-block;
padding: 2px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
.tier-badge-1[b-9446r0bgr9] {
background: #D1FAE5;
color: #065F46;
}
.tier-badge-2[b-9446r0bgr9] {
background: #FEF3C7;
color: #92400E;
}
.tier-badge-3[b-9446r0bgr9] {
background: #FEE2E2;
color: #991B1B;
}
/* Keywords Button */
.btn-keywords[b-9446r0bgr9] {
position: relative;
}
.btn-keywords.active[b-9446r0bgr9] {
color: #2563EB;
background: #EFF6FF;
}
.keyword-count-badge[b-9446r0bgr9] {
position: absolute;
top: -4px;
right: -4px;
background: #6B7280;
color: white;
font-size: 10px;
font-weight: 600;
min-width: 16px;
height: 16px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
padding: 0 4px;
}
.btn-keywords.active .keyword-count-badge[b-9446r0bgr9] {
background: #2563EB;
}
/* Expanded row highlight */
.expanded-row[b-9446r0bgr9] {
background: #F8FAFC !important;
}
/* Keyword Expansion Row */
.keyword-expansion-row td[b-9446r0bgr9] {
padding: 0 !important;
border-top: none !important;
background: #F8FAFC;
}
.keyword-panel[b-9446r0bgr9] {
padding: 16px 20px;
border-top: 1px dashed #E5E7EB;
border-bottom: 1px solid #E5E7EB;
}
.keyword-panel-header[b-9446r0bgr9] {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.keyword-panel-title[b-9446r0bgr9] {
font-size: 13px;
color: #6B7280;
}
.btn-generate-embeddings[b-9446r0bgr9] {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 4px 10px;
font-size: 12px;
font-weight: 500;
color: #7C3AED;
background: #F5F3FF;
border: 1px solid #DDD6FE;
border-radius: 6px;
cursor: pointer;
transition: all 0.15s ease;
}
.btn-generate-embeddings:hover:not(:disabled)[b-9446r0bgr9] {
background: #EDE9FE;
border-color: #C4B5FD;
}
.btn-generate-embeddings:disabled[b-9446r0bgr9] {
opacity: 0.6;
cursor: not-allowed;
}
/* Keyword Chips */
.keyword-chips[b-9446r0bgr9] {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
min-height: 32px;
align-items: center;
}
.keyword-empty[b-9446r0bgr9] {
font-size: 13px;
color: #9CA3AF;
font-style: italic;
}
.keyword-chip[b-9446r0bgr9] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px 4px 10px;
background: white;
border: 1px solid #E5E7EB;
border-radius: 16px;
font-size: 13px;
color: #374151;
transition: all 0.15s ease;
cursor: default;
}
.keyword-chip:hover[b-9446r0bgr9] {
border-color: #D1D5DB;
background: #F9FAFB;
}
.keyword-chip.matched[b-9446r0bgr9] {
border-color: #FCD34D;
background: #FFFBEB;
}
.keyword-chip.matched:hover[b-9446r0bgr9] {
border-color: #FBBF24;
background: #FEF3C7;
}
[b-9446r0bgr9] .keyword-highlight {
background: #FDE68A;
color: #92400E;
border-radius: 2px;
padding: 0 1px;
}
.keyword-match-count[b-9446r0bgr9] {
font-size: 11px;
color: #D97706;
font-weight: 600;
padding: 2px 8px;
background: #FEF3C7;
border-radius: 10px;
white-space: nowrap;
align-self: center;
}
.keyword-chip.editing[b-9446r0bgr9] {
padding: 2px 4px;
border-color: #93C5FD;
background: #EFF6FF;
gap: 2px;
}
.keyword-edit-input[b-9446r0bgr9] {
border: none;
background: transparent;
outline: none;
font-size: 13px;
color: #1F2937;
width: 120px;
padding: 2px 4px;
}
.keyword-chip-action[b-9446r0bgr9] {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border: none;
border-radius: 50%;
background: transparent;
cursor: pointer;
font-size: 14px;
padding: 0;
transition: all 0.15s ease;
}
.keyword-chip-action.save[b-9446r0bgr9] {
color: #059669;
}
.keyword-chip-action.save:hover[b-9446r0bgr9] {
background: #D1FAE5;
}
.keyword-chip-action.cancel[b-9446r0bgr9] {
color: #DC2626;
}
.keyword-chip-action.cancel:hover[b-9446r0bgr9] {
background: #FEE2E2;
}
.keyword-text[b-9446r0bgr9] {
user-select: none;
}
.keyword-chip-delete[b-9446r0bgr9] {
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border: none;
border-radius: 50%;
background: transparent;
color: #9CA3AF;
cursor: pointer;
font-size: 14px;
padding: 0;
transition: all 0.15s ease;
}
.keyword-chip-delete:hover:not(:disabled)[b-9446r0bgr9] {
background: #FEE2E2;
color: #DC2626;
}
.keyword-chip-delete:disabled[b-9446r0bgr9] {
opacity: 0.4;
cursor: not-allowed;
}
/* Embedding Indicator */
.embedding-indicator[b-9446r0bgr9] {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
.embedding-indicator.has-embedding[b-9446r0bgr9] {
background: #10B981;
}
.embedding-indicator.no-embedding[b-9446r0bgr9] {
background: #D1D5DB;
}
/* Add Keyword Row */
.keyword-add-row[b-9446r0bgr9] {
display: flex;
gap: 8px;
align-items: center;
}
.keyword-add-input[b-9446r0bgr9] {
max-width: 300px;
font-size: 13px !important;
}
.btn-add-keyword[b-9446r0bgr9] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 12px;
font-size: 13px;
font-weight: 500;
color: #2563EB;
background: #EFF6FF;
border: 1px solid #BFDBFE;
border-radius: 6px;
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
}
.btn-add-keyword:hover:not(:disabled)[b-9446r0bgr9] {
background: #DBEAFE;
border-color: #93C5FD;
}
.btn-add-keyword:disabled[b-9446r0bgr9] {
opacity: 0.5;
cursor: not-allowed;
}
/* Bulk Paste */
.btn-bulk-paste[b-9446r0bgr9] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 12px;
font-size: 13px;
font-weight: 500;
color: #6B7280;
background: #F9FAFB;
border: 1px solid #E5E7EB;
border-radius: 6px;
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
}
.btn-bulk-paste:hover[b-9446r0bgr9] {
background: #F3F4F6;
border-color: #D1D5DB;
}
.btn-bulk-paste.active[b-9446r0bgr9] {
color: #2563EB;
background: #EFF6FF;
border-color: #BFDBFE;
}
.bulk-paste-section[b-9446r0bgr9] {
margin-top: 12px;
padding: 12px;
background: #F9FAFB;
border: 1px solid #E5E7EB;
border-radius: 8px;
}
.bulk-paste-textarea[b-9446r0bgr9] {
font-size: 13px !important;
font-family: 'SF Mono', 'Fira Code', 'Fira Mono', monospace;
line-height: 1.5;
resize: vertical;
min-height: 80px;
max-height: 240px;
}
.bulk-paste-actions[b-9446r0bgr9] {
display: flex;
align-items: center;
gap: 12px;
margin-top: 8px;
justify-content: flex-end;
}
.bulk-paste-hint[b-9446r0bgr9] {
font-size: 12px;
color: #9CA3AF;
}
.bulk-result-msg[b-9446r0bgr9] {
font-size: 12px;
color: #059669;
font-weight: 500;
}
/* Empty State */
.empty-state[b-9446r0bgr9] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
text-align: center;
}
.empty-state-icon[b-9446r0bgr9] {
font-size: 36px;
color: #D1D5DB;
margin-bottom: 12px;
}
.empty-state-title[b-9446r0bgr9] {
font-size: 15px;
font-weight: 600;
color: #374151;
margin: 0 0 4px;
}
.empty-state-subtitle[b-9446r0bgr9] {
font-size: 13px;
color: #9CA3AF;
margin: 0;
}
.btn-link-inline[b-9446r0bgr9] {
background: none;
border: none;
color: #2563EB;
cursor: pointer;
font-size: inherit;
padding: 0;
text-decoration: underline;
}
.btn-link-inline:hover[b-9446r0bgr9] {
color: #1D4ED8;
}
/* Responsive */
@media (max-width: 768px) {
.property-table-container[b-9446r0bgr9] {
overflow-x: auto;
}
.factor-input-small[b-9446r0bgr9] {
width: 100px;
}
.keyword-panel-header[b-9446r0bgr9] {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.keyword-add-input[b-9446r0bgr9] {
max-width: 100%;
}
.bulk-paste-actions[b-9446r0bgr9] {
flex-direction: column;
align-items: flex-end;
}
}
/* /Components/Pages/Admin/RatingModelTabs/TermFactorsTab.razor.rz.scp.css */
/* ========================================
Term Tab Styles
======================================== */
.term-tab[b-a95jn4pe4z] {
display: flex;
flex-direction: column;
gap: 24px;
}
/* Alert Styles */
.alert[b-a95jn4pe4z] {
padding: 14px 16px;
border-radius: 8px;
font-size: 14px;
display: flex;
align-items: center;
animation: slideDown-b-a95jn4pe4z 0.3s ease-out;
}
.alert-success[b-a95jn4pe4z] {
background-color: var(--success-50);
border: 1px solid var(--success-200);
color: var(--success-700);
}
.alert-danger[b-a95jn4pe4z] {
background-color: var(--error-50);
border: 1px solid #FCA5A5;
color: var(--error-700);
}
.alert .btn-close[b-a95jn4pe4z] {
margin-left: auto;
padding: 0.5rem;
}
@keyframes slideDown-b-a95jn4pe4z {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Tab Header Section */
.tab-header-section[b-a95jn4pe4z] {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding-bottom: 20px;
border-bottom: 2px solid #E2E8F0;
}
.tab-header-left[b-a95jn4pe4z] {
flex: 1;
}
.tab-header-right[b-a95jn4pe4z] {
display: flex;
gap: 12px;
align-items: center;
}
.tab-header-right .btn[b-a95jn4pe4z] {
font-size: 14px;
font-weight: 500;
padding: 10px 20px;
border-radius: 10px;
display: flex;
align-items: center;
gap: 8px;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.tab-header-right .btn-primary[b-a95jn4pe4z] {
background: var(--brand-600, #004980);
border: none;
}
.tab-header-right .btn-primary:hover:not(:disabled)[b-a95jn4pe4z] {
background: var(--brand-700, #003760);
}
.tab-header-right .btn-primary:disabled[b-a95jn4pe4z] {
opacity: 0.6;
cursor: not-allowed;
}
.tab-title[b-a95jn4pe4z] {
font-size: 24px;
font-weight: 700;
color: #1F2937;
margin: 0 0 8px 0;
}
.tab-description[b-a95jn4pe4z] {
font-size: 14px;
color: #64748B;
margin: 0;
}
/* Term Factors Container */
.term-factors-container[b-a95jn4pe4z] {
background: white;
border: 1px solid #E2E8F0;
border-radius: 12px;
padding: 24px;
}
.term-factors-grid[b-a95jn4pe4z] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 24px;
}
/* Term Factor Row */
.term-factor-row[b-a95jn4pe4z] {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: #F8FAFC;
border: 1px solid #E2E8F0;
border-radius: 8px;
transition: all 0.2s;
}
.term-factor-row:hover[b-a95jn4pe4z] {
background: #F1F5F9;
border-color: #CBD5E1;
}
/* Input Groups */
.term-label-group[b-a95jn4pe4z] {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
}
.term-year-label[b-a95jn4pe4z] {
font-size: 14px;
color: #1F2937;
font-weight: 600;
}
.term-text[b-a95jn4pe4z] {
font-size: 14px;
color: #64748B;
font-weight: 500;
white-space: nowrap;
}
.factor-input-group[b-a95jn4pe4z] {
flex: 1;
}
.factor-input[b-a95jn4pe4z] {
width: 100%;
padding: 8px 12px;
background: white;
border: 1px solid #CBD5E1;
border-radius: 6px;
font-size: 14px;
color: #1F2937;
transition: all 0.2s;
}
.factor-input:focus[b-a95jn4pe4z] {
outline: none;
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
/* Remove Button */
.btn-remove[b-a95jn4pe4z] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: white;
border: 1px solid #E2E8F0;
border-radius: 6px;
color: #EF4444;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-remove:hover[b-a95jn4pe4z] {
background: #FEE2E2;
border-color: #EF4444;
}
.btn-remove i[b-a95jn4pe4z] {
font-size: 16px;
}
/* Add Term Button */
.btn-add-term[b-a95jn4pe4z] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: var(--brand-600, #004980);
color: white;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-add-term:hover[b-a95jn4pe4z] {
background: var(--brand-700, #003760);
}
.btn-add-term i[b-a95jn4pe4z] {
font-size: 16px;
}
/* Responsive */
@media (max-width: 1024px) {
.term-factors-grid[b-a95jn4pe4z] {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.term-factor-row[b-a95jn4pe4z] {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.term-label-group[b-a95jn4pe4z],
.factor-input-group[b-a95jn4pe4z] {
width: 100%;
}
.btn-remove[b-a95jn4pe4z] {
width: 100%;
}
}
/* /Components/Pages/Admin/StatePolicyTemplatesPage.razor.rz.scp.css */
/* State Policy Templates — Two-Panel Layout */
.spt-page[b-hq2dwjyqbw] { padding: 0; }
.spt-header[b-hq2dwjyqbw] {
display: flex; justify-content: space-between; align-items: flex-start;
margin-bottom: 20px; flex-wrap: wrap; gap: 12px;
}
.spt-title[b-hq2dwjyqbw] { font-size: 1.5rem; font-weight: 700; color: #1F2937; margin: 0; }
.spt-subtitle[b-hq2dwjyqbw] { font-size: 13px; color: #64748B; margin: 4px 0 0; }
.spt-header-stats[b-hq2dwjyqbw] { display: flex; gap: 16px; }
.spt-stat[b-hq2dwjyqbw] { text-align: center; }
.spt-stat-value[b-hq2dwjyqbw] { display: block; font-size: 20px; font-weight: 700; color: var(--brand-500); }
.spt-stat-label[b-hq2dwjyqbw] { font-size: 11px; color: #94A3B8; text-transform: uppercase; font-weight: 600; }
/* Shared Documents Panel */
.spt-shared-panel[b-hq2dwjyqbw] {
background: white; border: 1px solid #E2E8F0; border-radius: 12px;
margin-bottom: 20px; overflow: hidden;
}
.spt-shared-header[b-hq2dwjyqbw] {
padding: 14px 20px; background: #F8FAFC; border-bottom: 1px solid #F1F5F9;
font-size: 14px; color: #1F2937;
}
.spt-section-header[b-hq2dwjyqbw] {
padding: 12px 20px; background: #F8FAFC; border-top: 1px solid #F1F5F9;
border-bottom: 1px solid #F1F5F9; font-size: 14px; color: #1F2937;
display: flex; align-items: center;
}
/* Copy-config modal grid */
.spt-copy-grid[b-hq2dwjyqbw] {
display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 6px;
}
.spt-copy-item[b-hq2dwjyqbw] {
display: flex; align-items: center; gap: 8px;
padding: 8px 10px; border: 1.5px solid #E2E8F0; border-radius: 8px;
background: white; cursor: pointer; font-size: 13px; transition: all 0.15s;
}
.spt-copy-item:hover[b-hq2dwjyqbw] { border-color: var(--brand-400); background: #F8FAFC; }
.spt-copy-item.selected[b-hq2dwjyqbw] { border-color: var(--brand-500); background: #EFF6FF; }
.spt-copy-item input[type="checkbox"][b-hq2dwjyqbw] { margin: 0; }
.spt-copy-abbr[b-hq2dwjyqbw] { font-weight: 700; font-size: 12px; color: var(--brand-500); min-width: 24px; }
.spt-copy-name[b-hq2dwjyqbw] { font-size: 12px; color: #1F2937; }
.spt-shared-grid[b-hq2dwjyqbw] {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
}
.spt-shared-card[b-hq2dwjyqbw] {
padding: 14px 20px; border-right: 1px solid #F1F5F9;
display: flex; flex-direction: column; gap: 8px;
}
.spt-shared-card:last-child[b-hq2dwjyqbw] { border-right: none; }
.spt-shared-card-header[b-hq2dwjyqbw] {
display: flex; justify-content: space-between; align-items: center;
}
.spt-shared-status[b-hq2dwjyqbw] {
font-size: 11px; font-weight: 600; display: inline-flex;
align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px;
}
.spt-shared-status.uploaded[b-hq2dwjyqbw] { color: #059669; background: #ECFDF5; }
.spt-shared-status.missing[b-hq2dwjyqbw] { color: #D97706; background: #FEF3C7; }
.spt-shared-card-file[b-hq2dwjyqbw] { font-size: 12.5px; }
.spt-shared-filename[b-hq2dwjyqbw] {
display: flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 500; color: #1F2937;
}
.spt-shared-filename i[b-hq2dwjyqbw] { font-size: 16px; }
.spt-shared-meta[b-hq2dwjyqbw] {
display: flex; gap: 12px; margin-top: 6px; flex-wrap: wrap;
}
.spt-shared-meta span[b-hq2dwjyqbw] {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11px; color: #94A3B8;
}
.spt-shared-meta i[b-hq2dwjyqbw] { font-size: 11px; }
.spt-shared-empty[b-hq2dwjyqbw] {
display: flex; align-items: center; gap: 6px;
color: #CBD5E1; font-size: 12px; padding: 8px 0;
}
.spt-shared-empty i[b-hq2dwjyqbw] { font-size: 20px; }
.spt-shared-card-actions[b-hq2dwjyqbw] { display: flex; gap: 6px; margin-top: auto; }
@media (max-width: 768px) {
.spt-shared-grid[b-hq2dwjyqbw] { grid-template-columns: 1fr; }
.spt-shared-card[b-hq2dwjyqbw] { border-right: none; border-bottom: 1px solid #F1F5F9; }
}
/* Layout */
.spt-layout[b-hq2dwjyqbw] {
display: grid; grid-template-columns: 280px 1fr; gap: 20px;
min-height: 600px;
}
/* Sidebar */
.spt-sidebar[b-hq2dwjyqbw] {
background: white; border: 1px solid #E2E8F0; border-radius: 12px;
display: flex; flex-direction: column; overflow: hidden;
}
.spt-search[b-hq2dwjyqbw] {
position: relative; padding: 12px;
border-bottom: 1px solid #F1F5F9;
}
.spt-search i[b-hq2dwjyqbw] {
position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
color: #94A3B8; font-size: 13px; pointer-events: none;
}
.spt-search input[b-hq2dwjyqbw] {
width: 100%; padding: 7px 10px 7px 32px; border: 1px solid #E2E8F0;
border-radius: 8px; font-size: 13px; color: #1F2937;
}
.spt-search input:focus[b-hq2dwjyqbw] { outline: none; border-color: var(--brand-400); }
.spt-state-list[b-hq2dwjyqbw] { overflow-y: auto; flex: 1; }
.spt-state-item[b-hq2dwjyqbw] {
display: flex; justify-content: space-between; align-items: center;
width: 100%; padding: 10px 14px; border: none; border-bottom: 1px solid #F8FAFC;
background: white; cursor: pointer; transition: all 0.15s; text-align: left;
}
.spt-state-item:hover[b-hq2dwjyqbw] { background: #F8FAFC; }
.spt-state-item.selected[b-hq2dwjyqbw] { background: #EFF6FF; border-left: 3px solid var(--brand-500); }
.spt-state-item.inactive[b-hq2dwjyqbw] { opacity: 0.5; }
.spt-state-info[b-hq2dwjyqbw] { display: flex; align-items: center; gap: 8px; }
.spt-state-abbr[b-hq2dwjyqbw] { font-size: 12px; font-weight: 700; color: var(--brand-500); min-width: 24px; }
.spt-state-name[b-hq2dwjyqbw] { font-size: 13px; color: #1F2937; font-weight: 500; }
.spt-state-badges[b-hq2dwjyqbw] { display: flex; align-items: center; gap: 6px; }
.spt-doc-count[b-hq2dwjyqbw] {
font-size: 11px; font-weight: 700; color: #64748B;
background: #F1F5F9; padding: 2px 7px; border-radius: 4px;
}
.spt-version-badge[b-hq2dwjyqbw] {
font-size: 10px; font-weight: 700; color: var(--brand-500);
background: #EFF6FF; padding: 2px 6px; border-radius: 4px;
}
/* Detail Panel */
.spt-detail[b-hq2dwjyqbw] {
background: white; border: 1px solid #E2E8F0; border-radius: 12px;
display: flex; flex-direction: column; overflow: hidden;
}
.spt-detail-header[b-hq2dwjyqbw] {
padding: 20px 24px; border-bottom: 1px solid #F1F5F9;
display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
}
.spt-detail-title[b-hq2dwjyqbw] { font-size: 18px; font-weight: 700; color: #1F2937; margin: 0; }
.spt-detail-abbr[b-hq2dwjyqbw] {
font-size: 12px; color: #0D9488; background: #F0FDFA;
padding: 2px 8px; border-radius: 4px; font-weight: 600;
}
.spt-doc-table[b-hq2dwjyqbw] {
flex: 1; overflow-y: auto; padding: 0 8px;
}
.spt-doc-table table[b-hq2dwjyqbw] { font-size: 13px; }
.spt-doc-table thead th[b-hq2dwjyqbw] {
font-size: 11px; text-transform: uppercase; color: #94A3B8; font-weight: 600;
padding: 10px 8px; border-bottom: 1px solid #E2E8F0; background: #FAFBFC;
position: sticky; top: 0; z-index: 1;
}
.spt-doc-table tbody td[b-hq2dwjyqbw] { padding: 8px; vertical-align: middle; }
/* Shared-document rows blend into the state-specific table but read as "managed elsewhere":
tinted background, slightly muted text so they don't pull focus from editable rows. */
.spt-doc-table tbody tr.spt-row-shared[b-hq2dwjyqbw] { background: #FAF7FF; }
.spt-doc-table tbody tr.spt-row-shared td[b-hq2dwjyqbw] { color: #6B21A8; }
.spt-doc-table tbody tr.spt-row-shared .spt-filename[b-hq2dwjyqbw] { color: #6B21A8; }
.spt-doc-table tbody tr.spt-row-shared:hover[b-hq2dwjyqbw] { background: #F3EAFF; }
.spt-filename[b-hq2dwjyqbw] { font-size: 12.5px; color: #475569; }
.spt-slot-badge[b-hq2dwjyqbw] {
display: inline-block; padding: 3px 8px; border-radius: 5px;
font-size: 11px; font-weight: 600; white-space: nowrap;
}
.slot-cert[b-hq2dwjyqbw] { background: #FEF3C7; color: #92400E; }
.slot-dec[b-hq2dwjyqbw] { background: #DBEAFE; color: #1E40AF; }
.slot-sched[b-hq2dwjyqbw] { background: #E0E7FF; color: #4338CA; }
.slot-policy[b-hq2dwjyqbw] { background: #ECFDF5; color: #065F46; }
.slot-endorse[b-hq2dwjyqbw] { background: #F3E8FF; color: #6B21A8; }
.slot-sl[b-hq2dwjyqbw] { background: #FFF1F2; color: #9F1239; }
.slot-de[b-hq2dwjyqbw] { background: #F1F5F9; color: #475569; }
.slot-fill[b-hq2dwjyqbw] { background: #CCFBF1; color: #0D9488; }
.slot-docusign[b-hq2dwjyqbw] { background: #EDE9FE; color: #7C3AED; }
.slot-signed[b-hq2dwjyqbw] { background: #D1FAE5; color: #059669; }
.spt-legend[b-hq2dwjyqbw] {
display: flex; gap: 16px; padding: 10px 24px;
background: #F8FAFC; border-bottom: 1px solid #F1F5F9;
font-size: 11px; color: #94A3B8; flex-wrap: wrap;
}
.spt-legend span[b-hq2dwjyqbw] { display: flex; align-items: center; gap: 4px; }
/* Theme buttons */
.spt-btn-preview[b-hq2dwjyqbw] {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 16px; border: none; border-radius: 8px;
background: var(--brand-600, #004980);
color: white; font-size: 13px; font-weight: 600; cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; white-space: nowrap;
}
.spt-btn-preview:hover[b-hq2dwjyqbw] { background: var(--brand-700, #003760); }
.spt-btn-preview:disabled[b-hq2dwjyqbw] { opacity: 0.6; cursor: not-allowed; }
.spt-btn-upload[b-hq2dwjyqbw] {
display: inline-flex; align-items: center; gap: 5px;
padding: 5px 12px; border: 1.5px solid #E2E8F0; border-radius: 7px;
background: white; color: var(--brand-500); font-size: 11px; font-weight: 600;
cursor: pointer; transition: all 0.15s;
}
.spt-btn-upload:hover[b-hq2dwjyqbw] { border-color: var(--brand-400); background: #F8FAFC; }
.spt-btn-upload.disabled[b-hq2dwjyqbw] { opacity: 0.6; cursor: wait; pointer-events: none; }
.spt-btn-upload-sm[b-hq2dwjyqbw] {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 24px; border: 1.5px solid #E2E8F0; border-radius: 6px;
background: white; color: var(--brand-500); font-size: 12px;
cursor: pointer; transition: all 0.15s;
}
.spt-btn-upload-sm:hover[b-hq2dwjyqbw] { border-color: var(--brand-400); background: #F8FAFC; }
.spt-btn-upload-sm.disabled[b-hq2dwjyqbw] { opacity: 0.6; cursor: wait; pointer-events: none; }
.spt-btn-delete[b-hq2dwjyqbw] { color: #EF4444; }
.spt-btn-delete:hover[b-hq2dwjyqbw] { border-color: #EF4444; background: #FEF2F2; color: #DC2626; }
/* Add Document Modal — enhanced layout */
.spt-add-section[b-hq2dwjyqbw] {
border-bottom: 1px solid #F1F5F9;
}
.spt-add-section-header[b-hq2dwjyqbw] {
display: flex; align-items: center; gap: 10px;
padding: 14px 24px 10px; font-size: 13.5px; color: #1F2937;
}
.spt-add-step-num[b-hq2dwjyqbw] {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 50%;
background: var(--brand-500); color: white;
font-size: 11px; font-weight: 700; flex-shrink: 0;
}
/* Slot picker — visual card grid */
.spt-slot-picker[b-hq2dwjyqbw] {
display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 8px; padding: 0 24px 16px;
}
.spt-slot-pick-card[b-hq2dwjyqbw] {
display: flex; align-items: center; justify-content: space-between; gap: 6px;
padding: 10px 12px; border: 2px solid #E2E8F0; border-radius: 10px;
background: white; cursor: pointer; transition: all 0.15s;
}
.spt-slot-pick-card:hover:not(.used):not(.selected)[b-hq2dwjyqbw] {
border-color: var(--brand-300, #93C5FD); background: #F8FAFC;
}
.spt-slot-pick-card.selected[b-hq2dwjyqbw] {
border-color: var(--brand-500); background: #EFF6FF;
box-shadow: 0 0 0 1px var(--brand-500);
}
.spt-slot-pick-card.used[b-hq2dwjyqbw] {
opacity: 0.45; cursor: not-allowed; background: #F8FAFC;
}
.spt-slot-pick-card .spt-slot-badge[b-hq2dwjyqbw] { font-size: 10.5px; }
/* Option rows — toggle + label + icon */
.spt-add-options[b-hq2dwjyqbw] {
padding: 0 24px 16px; display: flex; flex-direction: column; gap: 8px;
}
.spt-add-option-row[b-hq2dwjyqbw] {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px; border: 1.5px solid #E2E8F0; border-radius: 10px;
background: white; cursor: pointer; transition: all 0.15s;
}
.spt-add-option-row:hover[b-hq2dwjyqbw] { border-color: var(--brand-300, #93C5FD); background: #F8FAFC; }
.spt-add-option-row.active[b-hq2dwjyqbw] { border-color: var(--brand-400); background: #EFF6FF; }
.spt-add-option-text[b-hq2dwjyqbw] { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.spt-add-option-icon[b-hq2dwjyqbw] { font-size: 20px; flex-shrink: 0; }
/* Upload zone — drag-drop styled area */
.spt-upload-zone[b-hq2dwjyqbw] {
display: flex; align-items: center; justify-content: center;
border: 2px dashed #CBD5E1; border-radius: 12px;
padding: 28px 20px; cursor: pointer; transition: all 0.2s;
background: #F8FAFC;
}
.spt-upload-zone:hover[b-hq2dwjyqbw] { border-color: var(--brand-400); background: #EFF6FF; }
.spt-upload-zone.uploaded[b-hq2dwjyqbw] {
border-style: solid; border-color: #D1FAE5; background: #ECFDF5; padding: 16px 20px;
}
.spt-upload-zone-content[b-hq2dwjyqbw] {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.spt-upload-text[b-hq2dwjyqbw] { display: flex; flex-direction: column; gap: 2px; text-align: center; }
.spt-upload-file-info[b-hq2dwjyqbw] { display: flex; flex-direction: column; gap: 2px; flex: 1; }
/* Edit Document Modal — file info card */
.spt-edit-file-card[b-hq2dwjyqbw] {
display: flex; align-items: center; gap: 14px;
padding: 16px 24px; margin: 16px 24px 0;
border: 1px solid #E2E8F0; border-radius: 12px; background: #F8FAFC;
}
.spt-edit-file-info[b-hq2dwjyqbw] { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.spt-edit-file-info .text-truncate[b-hq2dwjyqbw] { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
/* Order controls */
.spt-order-controls[b-hq2dwjyqbw] {
display: flex; flex-direction: column; align-items: center; gap: 0;
}
.spt-order-num[b-hq2dwjyqbw] {
font-size: 11px; font-weight: 700; color: #94A3B8; line-height: 1;
}
.spt-order-btn[b-hq2dwjyqbw] {
display: flex; align-items: center; justify-content: center;
width: 20px; height: 14px; border: none; background: none;
color: #CBD5E1; cursor: pointer; padding: 0; font-size: 11px;
transition: all 0.15s; border-radius: 3px;
}
.spt-order-btn:hover[b-hq2dwjyqbw] { color: var(--brand-500); background: #F1F5F9; }
.spt-order-btn:disabled[b-hq2dwjyqbw] { opacity: 0.3; cursor: default; }
.spt-order-btn:disabled:hover[b-hq2dwjyqbw] { color: #CBD5E1; background: none; }
/* Invisible spacer so shared rows keep the same vertical footprint as rows with up/down chevrons */
.spt-order-btn-placeholder[b-hq2dwjyqbw] { display: block; width: 20px; height: 14px; }
.spt-empty-detail[b-hq2dwjyqbw] {
display: flex; flex-direction: column; align-items: center;
justify-content: center; flex: 1; color: #CBD5E1;
}
.spt-empty-detail i[b-hq2dwjyqbw] { font-size: 48px; margin-bottom: 12px; }
.spt-empty-detail p[b-hq2dwjyqbw] { font-size: 14px; color: #94A3B8; }
@media (max-width: 768px) {
.spt-layout[b-hq2dwjyqbw] { grid-template-columns: 1fr; }
.spt-sidebar[b-hq2dwjyqbw] { max-height: 300px; }
}
/* /Components/Pages/Admin/StateTaxManagementPage.razor.rz.scp.css */
.stm-page[b-y8x8tmlj3o] { padding: 0; }
.stm-header[b-y8x8tmlj3o] { margin-bottom: 20px; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.stm-title[b-y8x8tmlj3o] { font-size: 1.5rem; font-weight: 700; color: #1F2937; margin: 0; }
.stm-subtitle[b-y8x8tmlj3o] { font-size: 13px; color: #64748B; margin: 4px 0 0; }
.stm-header-actions[b-y8x8tmlj3o] { display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding-top: 4px; }
.stm-layout[b-y8x8tmlj3o] { display: grid; grid-template-columns: 280px 1fr; gap: 20px; min-height: 500px; }
/* Sidebar */
.stm-sidebar[b-y8x8tmlj3o] { background: white; border: 1px solid #E2E8F0; border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }
.stm-search[b-y8x8tmlj3o] { position: relative; padding: 12px; border-bottom: 1px solid #F1F5F9; }
.stm-search i[b-y8x8tmlj3o] { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); color: #94A3B8; font-size: 13px; pointer-events: none; }
.stm-search input[b-y8x8tmlj3o] { width: 100%; padding: 7px 10px 7px 32px; border: 1px solid #E2E8F0; border-radius: 8px; font-size: 13px; }
.stm-search input:focus[b-y8x8tmlj3o] { outline: none; border-color: var(--brand-400); }
.stm-state-list[b-y8x8tmlj3o] { overflow-y: auto; flex: 1; }
.stm-state-item[b-y8x8tmlj3o] { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 10px 14px; border: none; border-bottom: 1px solid #F8FAFC; background: white; cursor: pointer; transition: all 0.15s; text-align: left; }
.stm-state-item:hover[b-y8x8tmlj3o] { background: #F8FAFC; }
.stm-state-item.selected[b-y8x8tmlj3o] { background: #EFF6FF; border-left: 3px solid var(--brand-500); }
.stm-state-info[b-y8x8tmlj3o] { display: flex; align-items: center; gap: 8px; }
.stm-state-abbr[b-y8x8tmlj3o] { font-size: 12px; font-weight: 700; color: var(--brand-500); min-width: 24px; }
.stm-state-name[b-y8x8tmlj3o] { font-size: 13px; color: #1F2937; font-weight: 500; }
.stm-state-badges[b-y8x8tmlj3o] { display: flex; align-items: center; gap: 6px; }
.stm-fee-count[b-y8x8tmlj3o] { font-size: 11px; font-weight: 700; color: #64748B; background: #F1F5F9; padding: 2px 7px; border-radius: 4px; }
/* Detail */
.stm-detail[b-y8x8tmlj3o] { background: white; border: 1px solid #E2E8F0; border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }
.stm-detail-header[b-y8x8tmlj3o] { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid #F1F5F9; }
.stm-detail-title[b-y8x8tmlj3o] { font-size: 18px; font-weight: 700; color: #1F2937; margin: 0; display: inline; }
.stm-detail-abbr[b-y8x8tmlj3o] { font-size: 12px; color: #0D9488; background: #F0FDFA; padding: 2px 8px; border-radius: 4px; font-weight: 600; margin-left: 8px; }
.stm-btn-add[b-y8x8tmlj3o] { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--brand-600, #004980); color: white; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.stm-btn-add:hover[b-y8x8tmlj3o] { background: var(--brand-700, #003760); }
.stm-btn-new-state[b-y8x8tmlj3o] { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px; padding: 8px 12px; background: var(--brand-600, #004980); color: white; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.stm-btn-new-state:hover[b-y8x8tmlj3o] { background: var(--brand-700, #003760); }
.stm-state-actions[b-y8x8tmlj3o] { display: inline-flex; gap: 6px; margin-left: 12px; vertical-align: middle; }
.stm-fee-table[b-y8x8tmlj3o] { flex: 1; overflow-y: auto; padding: 0 8px; }
.stm-fee-table table[b-y8x8tmlj3o] { font-size: 13px; }
.stm-fee-table thead th[b-y8x8tmlj3o] { font-size: 11px; text-transform: uppercase; color: #94A3B8; font-weight: 600; padding: 10px 8px; border-bottom: 1px solid #E2E8F0; background: #FAFBFC; position: sticky; top: 0; z-index: 1; }
.stm-fee-table tbody td[b-y8x8tmlj3o] { padding: 10px 8px; vertical-align: middle; }
.stm-type-badge[b-y8x8tmlj3o] { display: inline-block; padding: 3px 8px; border-radius: 5px; font-size: 11px; font-weight: 600; }
.type-sl[b-y8x8tmlj3o] { background: #FEF3C7; color: #92400E; }
.type-stamp[b-y8x8tmlj3o] { background: #DBEAFE; color: #1E40AF; }
.type-custom[b-y8x8tmlj3o] { background: #F3E8FF; color: #6B21A8; }
.stm-acct-code[b-y8x8tmlj3o] { font-size: 11px; font-weight: 600; color: #475569; background: #F1F5F9; padding: 2px 6px; border-radius: 4px; }
.stm-empty[b-y8x8tmlj3o] { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 8px; color: #CBD5E1; padding: 40px; }
.stm-empty i[b-y8x8tmlj3o] { font-size: 40px; }
.stm-empty p[b-y8x8tmlj3o] { font-size: 14px; color: #94A3B8; margin: 0; }
/* Action buttons */
.stm-action-btn[b-y8x8tmlj3o] {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: 7px; border: 1.5px solid #E2E8F0;
background: white; cursor: pointer; font-size: 12px; transition: all 0.15s;
}
.stm-action-edit[b-y8x8tmlj3o] { color: var(--brand-500); }
.stm-action-edit:hover[b-y8x8tmlj3o] { border-color: var(--brand-400); background: #EFF6FF; }
.stm-action-delete[b-y8x8tmlj3o] { color: #94A3B8; }
.stm-action-delete:hover[b-y8x8tmlj3o] { border-color: #FECACA; background: #FEF2F2; color: #DC2626; }
@media (max-width: 768px) { .stm-layout[b-y8x8tmlj3o] { grid-template-columns: 1fr; } .stm-sidebar[b-y8x8tmlj3o] { max-height: 250px; } }
/* /Components/Pages/Admin/SurplusLinesDeliveriesPage.razor.rz.scp.css */
.surpluslines-deliveries-page[b-q232mh86ci] {
padding: 1.5rem 2rem;
max-width: 1200px;
margin: 0 auto;
}
/* ── Action buttons (match NetSuiteSyncPage / VERAcheckAdminPage / ReferralsPage) ── */
.surpluslines-deliveries-page .btn-action[b-q232mh86ci] {
border: 1px solid var(--border, #dee2e6);
background: var(--bg-surface, #fff);
color: inherit;
padding: 0.45rem 0.9rem;
height: 36px;
border-radius: 6px;
font-size: 0.825rem;
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.4rem;
white-space: nowrap;
text-decoration: none;
}
.surpluslines-deliveries-page .btn-action:hover:not(:disabled)[b-q232mh86ci] {
background: var(--bg-hover, #f1f3f5);
}
.surpluslines-deliveries-page .btn-action:disabled[b-q232mh86ci] {
opacity: 0.55;
cursor: not-allowed;
}
.surpluslines-deliveries-page .btn-action-primary[b-q232mh86ci] {
background: var(--brand-500, #2563eb);
color: #fff;
border-color: var(--brand-500, #2563eb);
}
.surpluslines-deliveries-page .btn-action-primary:hover:not(:disabled)[b-q232mh86ci] {
background: var(--brand-600, #1d4ed8);
border-color: var(--brand-600, #1d4ed8);
}
/* ── Header ───────────────────────────────────────────────────────────── */
.surpluslines-deliveries-page .page-header[b-q232mh86ci] {
margin-bottom: 1.25rem;
}
.surpluslines-deliveries-page .back-link[b-q232mh86ci] {
color: #6c757d;
text-decoration: none;
font-size: 0.875rem;
display: inline-flex;
align-items: center;
gap: 0.25rem;
margin-bottom: 0.5rem;
}
.surpluslines-deliveries-page .back-link:hover[b-q232mh86ci] { color: #0d6efd; }
.surpluslines-deliveries-page .title-row[b-q232mh86ci] {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 0.25rem 0 0.5rem;
flex-wrap: wrap;
}
.surpluslines-deliveries-page .title-left[b-q232mh86ci] {
display: flex;
align-items: center;
gap: 0.75rem;
}
.surpluslines-deliveries-page .title-right[b-q232mh86ci] {
display: flex;
align-items: center;
gap: 1rem;
margin-left: auto;
}
.surpluslines-deliveries-page .last-loaded[b-q232mh86ci] {
display: inline-flex;
align-items: center;
gap: 0.35rem;
color: #6c757d;
font-size: 0.78rem;
font-variant-numeric: tabular-nums;
}
.surpluslines-deliveries-page .last-loaded i[b-q232mh86ci] {
color: #94a3b8;
font-size: 0.85rem;
}
.surpluslines-deliveries-page .page-subtitle[b-q232mh86ci] {
margin: 0.25rem 0 0;
color: #495057;
font-size: 0.9rem;
line-height: 1.5;
}
.surpluslines-deliveries-page .subtitle-tip[b-q232mh86ci] {
display: inline-flex;
align-items: center;
gap: 0.3rem;
margin-left: 0.5rem;
padding: 0.1rem 0.55rem;
background: #eff6ff;
color: #1d4ed8;
border-radius: 999px;
font-size: 0.78rem;
}
.surpluslines-deliveries-page .subtitle-tip i[b-q232mh86ci] {
font-size: 0.85rem;
}
.surpluslines-deliveries-page h1[b-q232mh86ci] {
font-size: 1.5rem;
font-weight: 600;
margin: 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
.surpluslines-deliveries-page .title-icon[b-q232mh86ci] { color: #0d6efd; }
/* ── Health pill ─────────────────────────────────────────────────────── */
.surpluslines-deliveries-page .health-pill[b-q232mh86ci] {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.25rem 0.75rem;
border-radius: 999px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.surpluslines-deliveries-page .health-good[b-q232mh86ci] { background: #d4edda; color: #155724; }
.surpluslines-deliveries-page .health-warn[b-q232mh86ci] { background: #fff3cd; color: #856404; }
.surpluslines-deliveries-page .health-bad[b-q232mh86ci] { background: #f8d7da; color: #721c24; }
/* ── Auto-refresh toggle (Bootstrap form-switch, matches IntegrationSettingsPage) ── */
.surpluslines-deliveries-page .auto-refresh-group[b-q232mh86ci] {
display: flex;
align-items: center;
gap: 8px;
/* Right-alignment now handled by the .title-right wrapper. */
}
.surpluslines-deliveries-page .toggle-label[b-q232mh86ci] {
font-size: 0.75rem;
font-weight: 500;
color: #64748B;
margin: 0;
user-select: none;
}
.surpluslines-deliveries-page .auto-refresh-hint[b-q232mh86ci] {
color: #94a3b8;
margin-left: 0.15rem;
}
/* Match IntegrationSettingsPage's green ON state for the form-switch. */
.surpluslines-deliveries-page .form-check-input:checked[b-q232mh86ci] {
background-color: #10B981;
border-color: #10B981;
}
.surpluslines-deliveries-page .form-check-input:focus[b-q232mh86ci] {
box-shadow: 0 0 0 0.2rem rgba(16, 185, 129, 0.25);
border-color: #10B981;
}
/* ── Stat cards ──────────────────────────────────────────────────────── */
.surpluslines-deliveries-page .stat-grid[b-q232mh86ci] {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.75rem;
margin-bottom: 1rem;
}
.surpluslines-deliveries-page .stat-card[b-q232mh86ci] {
background: #ffffff;
border: 1px solid #dee2e6;
border-left: 4px solid #adb5bd;
border-radius: 0.5rem;
padding: 0.85rem 1rem;
text-align: left;
cursor: pointer;
transition: transform 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease;
}
.surpluslines-deliveries-page .stat-card:hover[b-q232mh86ci] {
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.surpluslines-deliveries-page .stat-card.stat-active[b-q232mh86ci] {
border-color: #0d6efd;
box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.18);
}
.surpluslines-deliveries-page .stat-pending[b-q232mh86ci] { border-left-color: #ffc107; }
.surpluslines-deliveries-page .stat-succeeded[b-q232mh86ci] { border-left-color: #198754; }
.surpluslines-deliveries-page .stat-failed[b-q232mh86ci] { border-left-color: #dc3545; }
.surpluslines-deliveries-page .stat-failednoinvoice[b-q232mh86ci] { border-left-color: #fd7e14; }
.surpluslines-deliveries-page .stat-label[b-q232mh86ci] {
font-size: 0.75rem;
color: #6c757d;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.surpluslines-deliveries-page .stat-value[b-q232mh86ci] {
font-size: 1.75rem;
font-weight: 700;
color: #212529;
line-height: 1.1;
margin: 0.15rem 0;
}
.surpluslines-deliveries-page .stat-hint[b-q232mh86ci] {
font-size: 0.75rem;
color: #6c757d;
}
/* ── Toolbar (filters + backfill toggle) ─────────────────────────────── */
.surpluslines-deliveries-page .toolbar[b-q232mh86ci] {
display: flex;
align-items: flex-end;
gap: 1rem;
background: #f8f9fa;
border-radius: 0.5rem;
padding: 0.85rem 1rem;
margin-bottom: 0.75rem;
}
.surpluslines-deliveries-page .filters[b-q232mh86ci] {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 0.75rem;
flex: 1;
}
.surpluslines-deliveries-page .filter-group[b-q232mh86ci] {
display: flex;
flex-direction: column;
gap: 0.25rem;
min-width: 9rem;
}
.surpluslines-deliveries-page .filter-group label[b-q232mh86ci] {
font-size: 0.78rem;
color: #495057;
font-weight: 500;
/* Softer than uppercase + letter-spacing — reads as a label, not a heading. */
}
.surpluslines-deliveries-page .label-suffix[b-q232mh86ci] {
color: #94a3b8;
font-weight: 400;
font-size: 0.7rem;
margin-left: 0.2rem;
}
/* Input-with-icon — pseudo input-group without Bootstrap markup overhead */
.surpluslines-deliveries-page .input-with-icon[b-q232mh86ci] {
position: relative;
display: flex;
align-items: center;
}
.surpluslines-deliveries-page .input-with-icon .input-icon[b-q232mh86ci],
.surpluslines-deliveries-page .input-with-icon .input-prefix[b-q232mh86ci] {
position: absolute;
left: 0.55rem;
pointer-events: none;
color: #94a3b8;
font-size: 0.85rem;
z-index: 1;
}
.surpluslines-deliveries-page .input-with-icon .input-prefix[b-q232mh86ci] {
font-weight: 600;
}
.surpluslines-deliveries-page .input-with-icon input[b-q232mh86ci] {
padding-left: 1.85rem;
}
.surpluslines-deliveries-page .input-with-icon input:focus[b-q232mh86ci] {
border-color: #0d6efd;
box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.18);
outline: none;
}
/* Quick-range preset chips */
.surpluslines-deliveries-page .filter-presets[b-q232mh86ci] {
min-width: 12rem;
}
.surpluslines-deliveries-page .preset-row[b-q232mh86ci] {
display: flex;
gap: 0.3rem;
align-items: center;
height: 31px; /* match form-control-sm height */
}
.surpluslines-deliveries-page .preset-chip[b-q232mh86ci] {
background: #ffffff;
border: 1px solid #dee2e6;
border-radius: 999px;
padding: 0.2rem 0.7rem;
font-size: 0.78rem;
color: #495057;
cursor: pointer;
transition: all 0.1s ease;
}
.surpluslines-deliveries-page .preset-chip:hover[b-q232mh86ci] {
background: #e9ecef;
border-color: #adb5bd;
}
/* Toolbar action group on the right side */
.surpluslines-deliveries-page .toolbar-actions[b-q232mh86ci] {
display: flex;
align-items: flex-end;
gap: 0.5rem;
}
.surpluslines-deliveries-page .toolbar-divider[b-q232mh86ci] {
width: 1px;
height: 22px;
background: #dee2e6;
margin: 0 0.2rem;
align-self: center;
}
/* Icon-only buttons share the btn-action visual weight */
.surpluslines-deliveries-page .btn-icon[b-q232mh86ci] {
border: 1px solid var(--border, #dee2e6);
background: var(--bg-surface, #fff);
color: #495057;
width: 36px;
height: 36px;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.1s;
}
.surpluslines-deliveries-page .btn-icon:hover:not(:disabled)[b-q232mh86ci] {
background: var(--bg-hover, #f1f3f5);
}
.surpluslines-deliveries-page .btn-icon:disabled[b-q232mh86ci] {
opacity: 0.55;
cursor: not-allowed;
}
/* Backfill toggle: open-state visual + chevron rotation */
.surpluslines-deliveries-page .backfill-toggle.is-open[b-q232mh86ci] {
background: #cfe2ff;
border-color: #9ec5fe;
color: #084298;
}
.surpluslines-deliveries-page .backfill-toggle .chevron[b-q232mh86ci] {
margin-left: 0.2rem;
transition: transform 0.15s ease;
font-size: 0.75rem;
opacity: 0.7;
}
.surpluslines-deliveries-page .backfill-toggle .chevron.rot[b-q232mh86ci] {
transform: rotate(180deg);
}
/* Active filters row — promotes filter chips to their own line below the inputs */
.surpluslines-deliveries-page .active-filters-row[b-q232mh86ci] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin: 0 0 0.75rem 0;
padding: 0.5rem 0.75rem;
background: #f8f9fa;
border-left: 3px solid #0d6efd;
border-radius: 0 0.4rem 0.4rem 0;
font-size: 0.85rem;
}
.surpluslines-deliveries-page .active-filters-label[b-q232mh86ci] {
color: #6c757d;
font-size: 0.78rem;
font-weight: 500;
}
.surpluslines-deliveries-page .active-filter-chip[b-q232mh86ci] {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.6rem;
background: #cfe2ff;
color: #084298;
border-radius: 999px;
font-size: 0.78rem;
}
.surpluslines-deliveries-page .chip-clear[b-q232mh86ci] {
background: transparent;
border: none;
color: #084298;
padding: 0 0 0 0.15rem;
margin: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
line-height: 1;
font-size: 0.9rem;
}
.surpluslines-deliveries-page .chip-clear:hover[b-q232mh86ci] { color: #052c65; }
.surpluslines-deliveries-page .chip-clear-all[b-q232mh86ci] {
background: transparent;
border: none;
color: #6c757d;
padding: 0 0.25rem;
cursor: pointer;
font-size: 0.78rem;
text-decoration: underline;
margin-left: auto;
}
.surpluslines-deliveries-page .chip-clear-all:hover[b-q232mh86ci] { color: #212529; }
.surpluslines-deliveries-page .backfill-toggle[b-q232mh86ci] { white-space: nowrap; }
/* ── Backfill panel ──────────────────────────────────────────────────── */
.surpluslines-deliveries-page .backfill-panel[b-q232mh86ci] {
background: #ffffff;
border: 1px solid #dee2e6;
border-radius: 0.5rem;
padding: 0.85rem 1rem;
margin-bottom: 1rem;
}
.surpluslines-deliveries-page .backfill-controls[b-q232mh86ci] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
}
.surpluslines-deliveries-page .cap-input[b-q232mh86ci] { width: 7rem; }
.surpluslines-deliveries-page .backfill-summary[b-q232mh86ci] {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.75rem;
}
.surpluslines-deliveries-page .summary-badge[b-q232mh86ci] {
padding: 0.25rem 0.6rem;
border-radius: 0.4rem;
font-size: 0.8rem;
background: #f1f3f5;
color: #495057;
}
.surpluslines-deliveries-page .summary-badge.queued[b-q232mh86ci] { background: #cfe2ff; color: #084298; }
.surpluslines-deliveries-page .summary-badge.errored[b-q232mh86ci] { background: #f8d7da; color: #721c24; }
/* ── Loading & empty states ──────────────────────────────────────────── */
.surpluslines-deliveries-page .loading-state[b-q232mh86ci],
.surpluslines-deliveries-page .empty-state[b-q232mh86ci] {
padding: 3rem 1rem;
text-align: center;
color: #6c757d;
background: #ffffff;
border: 1px dashed #dee2e6;
border-radius: 0.5rem;
}
.surpluslines-deliveries-page .empty-icon[b-q232mh86ci] {
font-size: 2.5rem;
display: block;
margin-bottom: 0.5rem;
opacity: 0.5;
}
.surpluslines-deliveries-page .loading-state[b-q232mh86ci] {
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
}
.surpluslines-deliveries-page .empty-state .btn[b-q232mh86ci] { margin-top: 0.5rem; }
/* ── Grid ────────────────────────────────────────────────────────────── */
.surpluslines-deliveries-page .grid-wrap[b-q232mh86ci] {
overflow-x: auto;
max-height: 70vh;
overflow-y: auto;
background: #ffffff;
border-radius: 0.5rem;
border: 1px solid #dee2e6;
}
.surpluslines-deliveries-page .deliveries-grid[b-q232mh86ci] {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.surpluslines-deliveries-page .deliveries-grid th[b-q232mh86ci] {
text-align: left;
padding: 0.6rem 0.75rem;
background: #f8f9fa;
border-bottom: 1px solid #dee2e6;
font-weight: 600;
white-space: nowrap;
position: sticky;
top: 0;
z-index: 2;
}
.surpluslines-deliveries-page .deliveries-grid td[b-q232mh86ci] {
padding: 0.6rem 0.75rem;
border-bottom: 1px solid #f1f3f5;
vertical-align: middle;
}
.surpluslines-deliveries-page .deliveries-grid tbody tr:hover[b-q232mh86ci] { background: #f8f9fa; }
.surpluslines-deliveries-page .deliveries-grid tbody tr.row-expanded[b-q232mh86ci] { background: #f1f5ff; }
.surpluslines-deliveries-page .ts[b-q232mh86ci] {
color: #6c757d;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.surpluslines-deliveries-page .last-error[b-q232mh86ci] {
max-width: 22rem;
color: #6c757d;
}
.surpluslines-deliveries-page .error-summary[b-q232mh86ci] {
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: bottom;
font-variant-numeric: tabular-nums;
}
/* ── HTTP status pill ────────────────────────────────────────────────── */
.surpluslines-deliveries-page .http-pill[b-q232mh86ci] {
display: inline-block;
min-width: 2.4rem;
text-align: center;
padding: 0.1rem 0.45rem;
border-radius: 0.35rem;
font-size: 0.75rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
border: 1px solid transparent;
}
.surpluslines-deliveries-page .http-2xx[b-q232mh86ci] { background: #d4edda; color: #155724; border-color: #b7dfc1; }
.surpluslines-deliveries-page .http-4xx[b-q232mh86ci] { background: #fff3cd; color: #856404; border-color: #ffe69c; }
.surpluslines-deliveries-page .http-5xx[b-q232mh86ci] { background: #f8d7da; color: #721c24; border-color: #f1aeb5; }
.surpluslines-deliveries-page .http-other[b-q232mh86ci] { background: #e9ecef; color: #495057; border-color: #dee2e6; }
/* ── Pinned action column (stays visible when the grid scrolls sideways) ── */
.surpluslines-deliveries-page .action-col[b-q232mh86ci] {
text-align: right;
white-space: nowrap;
position: sticky;
right: 0;
}
/* Header corner sits above both the sticky header row and the sticky column. */
.surpluslines-deliveries-page .deliveries-grid th.action-col[b-q232mh86ci] {
z-index: 3;
box-shadow: -6px 0 6px -6px rgba(0, 0, 0, 0.12);
}
.surpluslines-deliveries-page .deliveries-grid td.action-col[b-q232mh86ci] {
z-index: 1;
background: #ffffff;
box-shadow: -6px 0 6px -6px rgba(0, 0, 0, 0.12);
}
/* Keep the pinned cell's background in sync with row hover / expand states. */
.surpluslines-deliveries-page .deliveries-grid tbody tr:hover td.action-col[b-q232mh86ci] { background: #f8f9fa; }
.surpluslines-deliveries-page .deliveries-grid tbody tr.row-expanded td.action-col[b-q232mh86ci] { background: #f1f5ff; }
.surpluslines-deliveries-page .row-actions[b-q232mh86ci] {
display: inline-flex;
gap: 0.4rem;
align-items: center;
}
.surpluslines-deliveries-page .btn-icon-danger[b-q232mh86ci] {
color: #b91c1c;
border-color: #fecaca;
}
.surpluslines-deliveries-page .btn-icon-danger:hover:not(:disabled)[b-q232mh86ci] {
background: #fef2f2;
color: #7f1d1d;
border-color: #f87171;
}
.surpluslines-deliveries-page .expand-col[b-q232mh86ci] {
width: 2.25rem;
padding: 0 !important;
text-align: center;
}
.surpluslines-deliveries-page .row-expand-btn[b-q232mh86ci] {
background: transparent;
border: none;
color: #495057;
padding: 0.25rem 0.5rem;
cursor: pointer;
transition: color 0.1s;
}
.surpluslines-deliveries-page .row-expand-btn:hover[b-q232mh86ci] { color: #0d6efd; }
/* ── Status pills ────────────────────────────────────────────────────── */
.surpluslines-deliveries-page .status-pill[b-q232mh86ci] {
display: inline-flex;
align-items: center;
padding: 0.15rem 0.55rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.surpluslines-deliveries-page .status-pending[b-q232mh86ci] { background: #fff3cd; color: #856404; }
.surpluslines-deliveries-page .status-succeeded[b-q232mh86ci] { background: #d4edda; color: #155724; }
.surpluslines-deliveries-page .status-failed[b-q232mh86ci] { background: #f8d7da; color: #721c24; }
.surpluslines-deliveries-page .status-failednoinvoice[b-q232mh86ci] { background: #fde2cf; color: #884c19; }
/* ── Detail row ──────────────────────────────────────────────────────── */
.surpluslines-deliveries-page .detail-row > td[b-q232mh86ci] {
background: #fafbfd;
border-bottom: 1px solid #e9ecef;
padding: 1rem;
}
.surpluslines-deliveries-page .detail-loading[b-q232mh86ci] {
display: flex;
align-items: center;
gap: 0.5rem;
color: #6c757d;
font-size: 0.875rem;
}
.surpluslines-deliveries-page .detail-grid[b-q232mh86ci] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.surpluslines-deliveries-page .detail-block[b-q232mh86ci] { min-width: 0; }
.surpluslines-deliveries-page .detail-block.full-width[b-q232mh86ci] { grid-column: 1 / -1; }
.surpluslines-deliveries-page .detail-label[b-q232mh86ci] {
font-size: 0.7rem;
color: #6c757d;
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 600;
margin-bottom: 0.35rem;
}
.surpluslines-deliveries-page .detail-label-row[b-q232mh86ci] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.35rem;
}
.surpluslines-deliveries-page .detail-label-row .detail-label[b-q232mh86ci] {
margin-bottom: 0;
}
.surpluslines-deliveries-page .copy-btn[b-q232mh86ci] {
background: transparent;
border: 1px solid #dee2e6;
color: #495057;
padding: 0.15rem 0.55rem;
border-radius: 0.3rem;
font-size: 0.75rem;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.3rem;
transition: background 0.1s;
}
.surpluslines-deliveries-page .copy-btn:hover[b-q232mh86ci] {
background: #f1f3f5;
color: #0d6efd;
border-color: #0d6efd;
}
.surpluslines-deliveries-page .detail-value[b-q232mh86ci] { font-size: 0.85rem; }
.surpluslines-deliveries-page .detail-pre[b-q232mh86ci] {
background: #ffffff;
border: 1px solid #dee2e6;
border-radius: 0.35rem;
padding: 0.6rem 0.75rem;
font-size: 0.78rem;
line-height: 1.4;
max-height: 18rem;
overflow: auto;
white-space: pre-wrap;
word-break: break-word;
margin: 0;
}
.surpluslines-deliveries-page .detail-error[b-q232mh86ci] {
background: #fff5f5;
border-color: #f5c2c7;
color: #721c24;
}
/* ── Pager ───────────────────────────────────────────────────────────── */
.surpluslines-deliveries-page .pager[b-q232mh86ci] {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.5rem;
padding: 0.75rem 0;
}
.surpluslines-deliveries-page .pager-info[b-q232mh86ci] {
color: #6c757d;
font-size: 0.875rem;
margin-right: 0.5rem;
}
/* ── Responsive: stack stats on narrow screens ───────────────────────── */
@media (max-width: 900px) {
.surpluslines-deliveries-page .stat-grid[b-q232mh86ci] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.surpluslines-deliveries-page .detail-grid[b-q232mh86ci] {
grid-template-columns: 1fr;
}
}
/* ── Skeleton loader ─────────────────────────────────────────────────── */
@keyframes admin-sl-deliveries-skel-pulse-b-q232mh86ci {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.tbl-row-skeleton td[b-q232mh86ci] {
padding: 0.875rem 0.75rem;
}
.tbl-skel[b-q232mh86ci] {
height: 1.0625rem;
width: 80px;
border-radius: 4px;
background: linear-gradient(90deg, var(--bs-tertiary-bg, #f0f0f0) 25%, var(--bs-secondary-bg, #e0e0e0) 50%, var(--bs-tertiary-bg, #f0f0f0) 75%);
background-size: 200% 100%;
animation: admin-sl-deliveries-skel-pulse-b-q232mh86ci 1.5s ease-in-out infinite;
}
.tbl-skel-badge[b-q232mh86ci] {
height: 1.25rem;
width: 90px;
border-radius: 9999px;
background: linear-gradient(90deg, var(--bs-tertiary-bg, #f0f0f0) 25%, var(--bs-secondary-bg, #e0e0e0) 50%, var(--bs-tertiary-bg, #f0f0f0) 75%);
background-size: 200% 100%;
animation: admin-sl-deliveries-skel-pulse-b-q232mh86ci 1.5s ease-in-out infinite;
}
/* /Components/Pages/Admin/Tabs/SubTabs/EmailTemplatesSubTab.razor.rz.scp.css */
/* Email Templates Sub-Tab Styles */
.email-templates-tab[b-uslmci7y9i] {
padding: 0;
}
/* Stats Cards */
.stats-row[b-uslmci7y9i] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.stat-card[b-uslmci7y9i] {
background: white;
border-radius: 12px;
padding: 24px;
display: flex;
align-items: center;
gap: 16px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
border: 1px solid #e5e7eb;
transition: all 0.2s ease;
}
.stat-card:hover[b-uslmci7y9i] {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
.stat-icon[b-uslmci7y9i] {
width: 56px;
height: 56px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
background: var(--brand-50);
color: var(--brand-600);
}
.stat-card.stat-success .stat-icon[b-uslmci7y9i] {
background: var(--success-50);
color: var(--success-600);
}
.stat-card.stat-info .stat-icon[b-uslmci7y9i] {
background: var(--brand-50);
color: var(--brand-500);
}
.stat-card.stat-warning .stat-icon[b-uslmci7y9i] {
background: var(--accent-50);
color: var(--accent-600);
}
.stat-content[b-uslmci7y9i] {
flex: 1;
}
.stat-value[b-uslmci7y9i] {
font-size: 32px;
font-weight: 700;
color: #1f2937;
line-height: 1;
margin-bottom: 4px;
}
.stat-label[b-uslmci7y9i] {
font-size: 14px;
color: #6b7280;
font-weight: 500;
}
/* Content Section */
.email-templates-content[b-uslmci7y9i] {
background: white;
border-radius: 12px;
padding: 24px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.content-header[b-uslmci7y9i] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 2px solid #f3f4f6;
}
.content-header h2[b-uslmci7y9i] {
font-size: 24px;
font-weight: 700;
color: #1f2937;
margin: 0;
}
.header-actions[b-uslmci7y9i] {
display: flex;
gap: 12px;
align-items: center;
}
.search-box[b-uslmci7y9i] {
position: relative;
display: flex;
align-items: center;
}
.search-box i[b-uslmci7y9i] {
position: absolute;
left: 12px;
color: #9ca3af;
font-size: 16px;
}
.search-box input[b-uslmci7y9i] {
padding: 10px 16px 10px 40px;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 14px;
width: 300px;
transition: all 0.2s;
}
.search-box input:focus[b-uslmci7y9i] {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
/* Table */
.table-container[b-uslmci7y9i] {
overflow-x: auto;
}
.table-container table[b-uslmci7y9i] {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
.table-container th[b-uslmci7y9i] {
background: #f9fafb;
padding: 12px 16px;
text-align: left;
font-size: 13px;
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 2px solid #e5e7eb;
}
.table-container td[b-uslmci7y9i] {
padding: 16px;
border-bottom: 1px solid #f3f4f6;
font-size: 14px;
color: #374151;
}
.table-container tr:last-child td[b-uslmci7y9i] {
border-bottom: none;
}
.table-container tbody tr[b-uslmci7y9i] {
transition: background-color 0.15s;
}
.table-container tbody tr:hover[b-uslmci7y9i] {
background-color: #f9fafb;
}
/* Template Name */
.template-name[b-uslmci7y9i] {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
color: #1f2937;
}
.system-badge[b-uslmci7y9i] {
display: inline-flex;
align-items: center;
padding: 2px 6px;
background: #e0e7ff;
color: #4f46e5;
border-radius: 4px;
font-size: 12px;
}
.system-badge i[b-uslmci7y9i] {
font-size: 12px;
}
/* Category Badge */
.category-badge[b-uslmci7y9i] {
display: inline-block;
padding: 4px 10px;
background: #f3f4f6;
border-radius: 12px;
font-size: 13px;
font-weight: 600;
color: #4b5563;
}
/* Variables List */
.variables-list[b-uslmci7y9i] {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.variable-badge[b-uslmci7y9i] {
display: inline-block;
padding: 4px 8px;
background: #fef3c7;
border: 1px solid #fde68a;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
color: #92400e;
font-family: 'Courier New', monospace;
}
/* Status Badges */
.status-badge[b-uslmci7y9i] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
}
.status-badge.status-active[b-uslmci7y9i] {
background: #d1fae5;
color: #065f46;
}
.status-badge.status-inactive[b-uslmci7y9i] {
background: #fee2e2;
color: #991b1b;
}
/* Action Buttons */
.action-buttons[b-uslmci7y9i] {
display: flex;
gap: 8px;
}
.btn-icon[b-uslmci7y9i] {
width: 32px;
height: 32px;
border: none;
border-radius: 6px;
background: #f3f4f6;
color: #4b5563;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-icon:hover[b-uslmci7y9i] {
background: #e5e7eb;
}
.btn-icon.btn-danger[b-uslmci7y9i] {
background: #fee2e2;
color: var(--error-600);
}
.btn-icon.btn-danger:hover[b-uslmci7y9i] {
background: #fecaca;
}
.btn-icon.btn-success[b-uslmci7y9i] {
background: #d1fae5;
color: #059669;
}
.btn-icon.btn-success:hover[b-uslmci7y9i] {
background: #a7f3d0;
}
/* Primary Button */
.btn-primary[b-uslmci7y9i] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: var(--brand-600, #004980);
color: white;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-primary:hover[b-uslmci7y9i] {
background: var(--brand-700, #003760);
}
/* Loading State */
.loading-container[b-uslmci7y9i] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
color: #6b7280;
}
.spinner[b-uslmci7y9i] {
width: 48px;
height: 48px;
border: 4px solid #f3f4f6;
border-top-color: #667eea;
border-radius: 50%;
animation: spin-b-uslmci7y9i 1s linear infinite;
margin-bottom: 16px;
}
@keyframes spin-b-uslmci7y9i {
to { transform: rotate(360deg); }
}
/* Empty State */
.empty-state[b-uslmci7y9i] {
text-align: center;
padding: 60px 20px;
color: #9ca3af;
}
.empty-state i[b-uslmci7y9i] {
font-size: 64px;
margin-bottom: 16px;
opacity: 0.5;
}
.empty-state h3[b-uslmci7y9i] {
font-size: 18px;
font-weight: 600;
color: #6b7280;
margin: 0 0 8px 0;
}
.empty-state p[b-uslmci7y9i] {
font-size: 14px;
margin: 0;
}
/* Responsive Design */
@media (max-width: 768px) {
.stats-row[b-uslmci7y9i] {
grid-template-columns: 1fr;
}
.content-header[b-uslmci7y9i] {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.header-actions[b-uslmci7y9i] {
width: 100%;
flex-direction: column;
}
.search-box input[b-uslmci7y9i] {
width: 100%;
}
.btn-primary[b-uslmci7y9i] {
width: 100%;
justify-content: center;
}
.table-container[b-uslmci7y9i] {
overflow-x: auto;
}
.table-container table[b-uslmci7y9i] {
min-width: 900px;
}
}
/* /Components/Pages/Admin/Tabs/SubTabs/FeatureFlagsSubTab.razor.rz.scp.css */
/* Feature Flags Sub-Tab Styles */
.feature-flags-content[b-h0x5fzthu3] {
max-width: 100%;
}
/* Flags Section */
.flags-section[b-h0x5fzthu3] {
background: linear-gradient(135deg, rgba(227, 241, 251, 0.5) 0%, rgba(240, 247, 252, 0.6) 100%);
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 12px;
padding: 28px;
}
.section-header[b-h0x5fzthu3] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.section-title[b-h0x5fzthu3] {
display: flex;
align-items: center;
gap: 10px;
font-size: 20px;
font-weight: 700;
color: #1F2937;
}
.section-title i[b-h0x5fzthu3] {
font-size: 24px;
color: var(--brand-500);
}
.section-subtitle[b-h0x5fzthu3] {
font-size: 14px;
color: #6B7280;
margin-bottom: 28px;
}
/* Add Flag Button */
.btn-add-flag[b-h0x5fzthu3] {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: var(--brand-600, #004980);
color: white;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-add-flag:hover[b-h0x5fzthu3] {
background: var(--brand-700, #003760);
}
.btn-add-flag i[b-h0x5fzthu3] {
font-size: 16px;
}
/* Toolbar */
.flags-toolbar[b-h0x5fzthu3] {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
margin-bottom: 24px;
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 10px;
padding: 16px;
}
.search-container[b-h0x5fzthu3] {
flex: 1;
max-width: 400px;
position: relative;
display: flex;
align-items: center;
}
.search-container > i[b-h0x5fzthu3] {
position: absolute;
left: 14px;
font-size: 16px;
color: #6B7280;
pointer-events: none;
}
.search-input[b-h0x5fzthu3] {
width: 100%;
padding: 10px 40px 10px 40px;
border: 1px solid rgba(15, 23, 42, 0.15);
border-radius: 8px;
font-size: 14px;
color: #1F2937;
background: white;
transition: all 0.2s;
}
.search-input:focus[b-h0x5fzthu3] {
outline: none;
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
.clear-search[b-h0x5fzthu3] {
position: absolute;
right: 8px;
background: none;
border: none;
padding: 4px;
cursor: pointer;
color: #6B7280;
transition: color 0.2s;
}
.clear-search:hover[b-h0x5fzthu3] {
color: var(--brand-500);
}
.clear-search i[b-h0x5fzthu3] {
font-size: 18px;
}
.filter-group[b-h0x5fzthu3] {
display: flex;
gap: 12px;
}
.filter-select[b-h0x5fzthu3] {
padding: 10px 14px;
border: 1px solid rgba(15, 23, 42, 0.15);
border-radius: 8px;
font-size: 14px;
color: #1F2937;
background: white;
cursor: pointer;
transition: all 0.2s;
}
.filter-select:focus[b-h0x5fzthu3] {
outline: none;
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
/* Feature Flags Table */
.flags-table-container[b-h0x5fzthu3] {
background: white;
border: 1px solid #E5E7EB;
border-radius: 8px;
overflow: hidden;
margin-bottom: 24px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.flags-table[b-h0x5fzthu3] {
width: 100%;
border-collapse: collapse;
}
.flags-table thead[b-h0x5fzthu3] {
background: #E3F1FB;
border-bottom: 2px solid #B8DAF0;
}
.flags-table th[b-h0x5fzthu3] {
padding: 14px 16px;
text-align: left;
font-size: 13px;
font-weight: 700;
color: #1F2937;
text-transform: capitalize;
letter-spacing: 0.3px;
}
.flags-table th.status-column[b-h0x5fzthu3] {
width: 120px;
text-align: center;
}
.flags-table th.actions-column[b-h0x5fzthu3] {
text-align: right;
width: 150px;
padding-right: 20px;
}
.flags-table tbody tr[b-h0x5fzthu3] {
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
transition: background-color 0.2s;
}
.flags-table tbody tr:hover[b-h0x5fzthu3] {
background-color: rgba(15, 23, 42, 0.04);
}
.flags-table tbody tr:last-child[b-h0x5fzthu3] {
border-bottom: none;
}
.flags-table td[b-h0x5fzthu3] {
padding: 14px 16px;
font-size: 14px;
color: #374151;
}
/* Name Cell */
.name-cell[b-h0x5fzthu3] {
width: 250px;
}
.flag-name-wrapper[b-h0x5fzthu3] {
display: flex;
flex-direction: column;
gap: 4px;
}
.flag-key[b-h0x5fzthu3] {
font-size: 11px;
font-weight: 700;
color: #6B7280;
text-transform: uppercase;
letter-spacing: 0.5px;
font-family: 'Courier New', monospace;
}
.flag-name[b-h0x5fzthu3] {
font-size: 14px;
font-weight: 600;
color: var(--brand-500);
}
/* Description Cell */
.description-cell[b-h0x5fzthu3] {
color: #1F2937;
font-weight: 500;
max-width: 400px;
}
/* Category Cell */
.category-cell[b-h0x5fzthu3] {
width: 150px;
}
.category-badge[b-h0x5fzthu3] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.category-badge i[b-h0x5fzthu3] {
font-size: 12px;
}
.category-ui[b-h0x5fzthu3] {
background: #DBEAFE;
color: #1E40AF;
}
.category-api[b-h0x5fzthu3] {
background: #FEF3C7;
color: #D97706;
}
.category-security[b-h0x5fzthu3] {
background: #FEE2E2;
color: var(--error-600);
}
.category-experimental[b-h0x5fzthu3] {
background: #F3E8FF;
color: #7C3AED;
}
/* Status Cell */
.status-cell[b-h0x5fzthu3] {
text-align: center;
}
.status-indicator[b-h0x5fzthu3] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: 6px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.status-indicator i[b-h0x5fzthu3] {
font-size: 14px;
}
.status-indicator.enabled[b-h0x5fzthu3] {
background: #ECFDF5;
color: #047857;
border: 1px solid #A7F3D0;
}
.status-indicator.disabled[b-h0x5fzthu3] {
background: #FEF2F2;
color: var(--error-600);
border: 1px solid #FECACA;
}
/* Actions Cell */
.actions-cell[b-h0x5fzthu3] {
text-align: right;
padding-right: 20px !important;
}
/* Bootstrap Button Group Customization */
.actions-cell .btn-action[b-h0x5fzthu3] {
padding: 6px 10px;
font-size: 14px;
}
.actions-cell .btn-action i[b-h0x5fzthu3] {
font-size: 14px;
}
/* Empty State */
.empty-state[b-h0x5fzthu3] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 20px;
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 10px;
}
.empty-state i[b-h0x5fzthu3] {
font-size: 64px;
color: #D1D5DB;
margin-bottom: 16px;
}
.empty-state p[b-h0x5fzthu3] {
font-size: 16px;
font-weight: 600;
color: #6B7280;
margin: 0 0 8px 0;
}
.empty-hint[b-h0x5fzthu3] {
font-size: 14px;
color: #9CA3AF;
}
/* Responsive Design */
@media (max-width: 1200px) {
.flags-toolbar[b-h0x5fzthu3] {
flex-wrap: wrap;
}
.search-container[b-h0x5fzthu3] {
max-width: 100%;
flex: 1 1 100%;
}
}
@media (max-width: 768px) {
.flags-section[b-h0x5fzthu3] {
padding: 20px;
}
.section-header[b-h0x5fzthu3] {
flex-direction: column;
gap: 12px;
align-items: flex-start;
}
.btn-add-flag[b-h0x5fzthu3] {
width: 100%;
justify-content: center;
}
.flags-toolbar[b-h0x5fzthu3] {
flex-direction: column;
align-items: stretch;
}
.filter-group[b-h0x5fzthu3] {
flex-direction: column;
}
.filter-select[b-h0x5fzthu3] {
width: 100%;
}
.flags-table-container[b-h0x5fzthu3] {
overflow-x: auto;
}
.flags-table[b-h0x5fzthu3] {
min-width: 800px;
}
}
@media (max-width: 480px) {
.section-title[b-h0x5fzthu3] {
font-size: 18px;
}
.section-title i[b-h0x5fzthu3] {
font-size: 20px;
}
}
/* /Components/Pages/Admin/Tabs/SubTabs/RaterSettingsSubTab.razor.rz.scp.css */
/* Rater Settings Sub-Tab Styles */
.rater-settings-content[b-srz6rxxfc1] {
max-width: 100%;
}
/* Rater Section */
.rater-section[b-srz6rxxfc1] {
background: linear-gradient(135deg, rgba(227, 241, 251, 0.5) 0%, rgba(240, 247, 252, 0.6) 100%);
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 12px;
padding: 28px;
}
.section-header[b-srz6rxxfc1] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.section-title[b-srz6rxxfc1] {
display: flex;
align-items: center;
gap: 10px;
font-size: 20px;
font-weight: 700;
color: #1F2937;
}
.section-title i[b-srz6rxxfc1] {
font-size: 24px;
color: var(--brand-500);
}
.section-subtitle[b-srz6rxxfc1] {
font-size: 14px;
color: #6B7280;
margin-bottom: 32px;
}
/* Subsection */
.subsection[b-srz6rxxfc1] {
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 10px;
padding: 24px;
margin-bottom: 24px;
}
.subsection-title[b-srz6rxxfc1] {
font-size: 16px;
font-weight: 700;
color: #1F2937;
margin: 0 0 20px 0;
padding-bottom: 12px;
border-bottom: 2px solid rgba(15, 23, 42, 0.08);
}
/* Base Rates Grid */
.rates-grid[b-srz6rxxfc1] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
.rate-item[b-srz6rxxfc1] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 16px;
background: white;
border: 1px solid rgba(15, 23, 42, 0.12);
border-radius: 8px;
transition: all 0.2s;
}
.rate-item:hover[b-srz6rxxfc1] {
border-color: rgba(15, 23, 42, 0.2);
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}
.rate-label[b-srz6rxxfc1] {
font-size: 14px;
font-weight: 500;
color: #374151;
flex: 1;
}
.rate-input[b-srz6rxxfc1] {
width: 80px;
padding: 8px 12px;
border: 1px solid rgba(15, 23, 42, 0.15);
border-radius: 6px;
font-size: 14px;
font-weight: 600;
color: var(--brand-500);
text-align: right;
background: white;
transition: all 0.2s;
}
.rate-input:focus[b-srz6rxxfc1] {
outline: none;
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
/* Term Factors Grid */
.term-factors-grid[b-srz6rxxfc1] {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
}
.term-factor-item[b-srz6rxxfc1] {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
background: white;
border: 1px solid rgba(15, 23, 42, 0.12);
border-radius: 8px;
transition: all 0.2s;
}
.term-factor-item:hover[b-srz6rxxfc1] {
border-color: rgba(15, 23, 42, 0.2);
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}
.term-label[b-srz6rxxfc1] {
font-size: 13px;
font-weight: 600;
color: #6B7280;
text-align: center;
}
.term-input[b-srz6rxxfc1] {
width: 100%;
padding: 8px 12px;
border: 1px solid rgba(15, 23, 42, 0.15);
border-radius: 6px;
font-size: 14px;
font-weight: 600;
color: var(--brand-500);
text-align: center;
background: white;
transition: all 0.2s;
}
.term-input:focus[b-srz6rxxfc1] {
outline: none;
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
/* LTV Surcharges Grid */
.ltv-grid[b-srz6rxxfc1] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 16px;
}
.ltv-item[b-srz6rxxfc1] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 16px;
background: white;
border: 1px solid rgba(15, 23, 42, 0.12);
border-radius: 8px;
transition: all 0.2s;
}
.ltv-item:hover[b-srz6rxxfc1] {
border-color: rgba(15, 23, 42, 0.2);
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}
.ltv-label[b-srz6rxxfc1] {
font-size: 14px;
font-weight: 600;
color: #374151;
}
.ltv-input-group[b-srz6rxxfc1] {
display: flex;
align-items: center;
gap: 8px;
}
.ltv-input[b-srz6rxxfc1] {
width: 80px;
padding: 8px 12px;
border: 1px solid rgba(15, 23, 42, 0.15);
border-radius: 6px;
font-size: 14px;
font-weight: 600;
color: var(--brand-500);
text-align: right;
background: white;
transition: all 0.2s;
}
.ltv-input:focus[b-srz6rxxfc1] {
outline: none;
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
.ltv-unit[b-srz6rxxfc1] {
font-size: 13px;
color: #6B7280;
font-weight: 500;
}
/* Taxes & Fees Grid */
.taxes-grid[b-srz6rxxfc1] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 16px;
}
.tax-item[b-srz6rxxfc1] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 16px;
background: white;
border: 1px solid rgba(15, 23, 42, 0.12);
border-radius: 8px;
transition: all 0.2s;
}
.tax-item:hover[b-srz6rxxfc1] {
border-color: rgba(15, 23, 42, 0.2);
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}
.tax-label[b-srz6rxxfc1] {
font-size: 14px;
font-weight: 500;
color: #374151;
}
.tax-input[b-srz6rxxfc1] {
width: 100px;
padding: 8px 12px;
border: 1px solid rgba(15, 23, 42, 0.15);
border-radius: 6px;
font-size: 14px;
font-weight: 600;
color: var(--brand-500);
text-align: right;
background: white;
transition: all 0.2s;
}
.tax-input:focus[b-srz6rxxfc1] {
outline: none;
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
/* Review Fees Grid */
.fees-grid[b-srz6rxxfc1] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 16px;
}
.fee-item[b-srz6rxxfc1] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 16px;
background: white;
border: 1px solid rgba(15, 23, 42, 0.12);
border-radius: 8px;
transition: all 0.2s;
}
.fee-item:hover[b-srz6rxxfc1] {
border-color: rgba(15, 23, 42, 0.2);
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}
.fee-label[b-srz6rxxfc1] {
font-size: 14px;
font-weight: 500;
color: #374151;
}
.fee-input[b-srz6rxxfc1] {
width: 100px;
padding: 8px 12px;
border: 1px solid rgba(15, 23, 42, 0.15);
border-radius: 6px;
font-size: 14px;
font-weight: 600;
color: var(--brand-500);
text-align: right;
background: white;
transition: all 0.2s;
}
.fee-input:focus[b-srz6rxxfc1] {
outline: none;
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
/* Save Section */
.save-section[b-srz6rxxfc1] {
margin-top: 32px;
padding-top: 24px;
border-top: 2px solid rgba(15, 23, 42, 0.08);
}
.btn-save-coefficients[b-srz6rxxfc1] {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 14px 24px;
background: var(--brand-600, #004980);
color: white;
border: none;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-save-coefficients:hover[b-srz6rxxfc1] {
background: var(--brand-700, #003760);
}
.btn-save-coefficients i[b-srz6rxxfc1] {
font-size: 18px;
}
/* Responsive Design */
@media (max-width: 1200px) {
.term-factors-grid[b-srz6rxxfc1] {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.rater-section[b-srz6rxxfc1] {
padding: 20px;
}
.subsection[b-srz6rxxfc1] {
padding: 16px;
}
.rates-grid[b-srz6rxxfc1] {
grid-template-columns: 1fr;
}
.term-factors-grid[b-srz6rxxfc1] {
grid-template-columns: repeat(2, 1fr);
}
.ltv-grid[b-srz6rxxfc1],
.taxes-grid[b-srz6rxxfc1],
.fees-grid[b-srz6rxxfc1] {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.term-factors-grid[b-srz6rxxfc1] {
grid-template-columns: 1fr;
}
}
/* /Components/Pages/Admin/Tabs/SubTabs/ReferenceDataSubTab.razor.rz.scp.css */
/* ========================================
States Management - Enhanced UI Styles
======================================== */
/* === Category Selector === */
.category-selector-section[b-ia4ql9x0x5] {
margin-bottom: 1.5rem;
}
.category-cards[b-ia4ql9x0x5] {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1rem;
}
.category-card[b-ia4ql9x0x5] {
background: var(--bg-surface);
border: 1px solid var(--border-light);
border-radius: 8px;
padding: 0.75rem 1.25rem;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 0.75rem;
box-shadow: none;
position: relative;
}
.category-card:hover[b-ia4ql9x0x5] {
background: var(--bg-hover);
border-color: var(--brand-300);
transform: translateY(-1px);
}
.category-card.active[b-ia4ql9x0x5] {
background: var(--brand-500);
border-color: var(--brand-500);
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.15);
}
.category-card.active .category-icon[b-ia4ql9x0x5] {
background: rgba(255, 255, 255, 0.2);
}
.category-card.active .category-name[b-ia4ql9x0x5],
.category-card.active .category-count[b-ia4ql9x0x5] {
color: white;
}
.category-icon[b-ia4ql9x0x5] {
width: 32px;
height: 32px;
min-width: 32px;
border-radius: 6px;
background: var(--neutral-100);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.category-icon i[b-ia4ql9x0x5] {
font-size: 1rem; /* Reduced from 1.1rem */
color: var(--brand-500);
transition: all 0.2s ease;
}
.category-card:hover .category-icon[b-ia4ql9x0x5] {
background: var(--brand-100);
}
.category-card.active .category-icon i[b-ia4ql9x0x5] {
color: white;
}
.category-info[b-ia4ql9x0x5] {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.category-name[b-ia4ql9x0x5] {
font-size: 0.875rem; /* Standardized */
font-weight: 600;
color: var(--text-primary);
margin: 0;
transition: color 0.2s ease;
white-space: nowrap;
line-height: 1.4;
}
.category-count[b-ia4ql9x0x5] {
font-size: 0.75rem;
color: var(--text-muted);
transition: color 0.2s ease;
line-height: 1.3;
}
.category-card:not(.active):hover .category-name[b-ia4ql9x0x5] {
color: var(--brand-600);
}
.category-card:not(.active):hover .category-count[b-ia4ql9x0x5] {
color: var(--text-secondary);
}
/* === Section Header === */
.reference-section[b-ia4ql9x0x5] {
padding: 0;
}
.section-header[b-ia4ql9x0x5] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.75rem;
}
.section-title[b-ia4ql9x0x5] {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 1.25rem; /* Reduced from 1.5rem for better proportion */
font-weight: 700;
color: var(--text-primary);
}
.section-title i[b-ia4ql9x0x5] {
color: var(--brand-500);
font-size: 1.35rem; /* Reduced from 1.75rem to match title */
}
.section-subtitle[b-ia4ql9x0x5] {
color: var(--text-secondary);
font-size: 0.875rem; /* Standardized from 0.95rem */
margin-bottom: 1.5rem;
line-height: 1.5;
}
.btn-add-category[b-ia4ql9x0x5] {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1rem; /* Slightly adjusted padding */
background: var(--brand-600, #004980);
color: white;
border: none;
border-radius: 10px;
font-size: 0.875rem; /* Added explicit font size */
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-add-category:hover[b-ia4ql9x0x5] {
background: var(--brand-700, #003760);
}
.btn-add-category i[b-ia4ql9x0x5] {
font-size: 1.1rem;
}
/* === Regular Data Management Section (Property Types, Loan Types, etc.) === */
.data-management-section[b-ia4ql9x0x5] {
margin-top: 1.5rem;
}
.data-management-section .data-toolbar[b-ia4ql9x0x5] {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
padding: 1rem;
background: var(--bg-surface);
border-radius: 8px;
border: 1px solid var(--border-light);
}
.data-management-section .search-container[b-ia4ql9x0x5] {
position: relative;
flex: 1;
max-width: 400px;
}
.data-management-section .search-container i[b-ia4ql9x0x5] {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
}
.data-management-section .search-input[b-ia4ql9x0x5] {
width: 100%;
padding: 0.6rem 2.5rem 0.6rem 2.25rem;
border: 1px solid var(--border-light);
border-radius: 6px;
font-size: 0.9rem;
transition: all 0.2s ease;
}
.data-management-section .search-input:focus[b-ia4ql9x0x5] {
outline: none;
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
.data-management-section .clear-search[b-ia4ql9x0x5] {
position: absolute;
right: 0.5rem;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--text-muted);
cursor: pointer;
padding: 0.25rem;
display: flex;
align-items: center;
transition: color 0.2s ease;
}
.data-management-section .clear-search:hover[b-ia4ql9x0x5] {
color: var(--error-500);
}
.data-management-section .btn-add-item[b-ia4ql9x0x5] {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1.25rem;
background: var(--brand-600, #004980);
color: white;
border: none;
border-radius: 8px;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
white-space: nowrap;
}
.data-management-section .btn-add-item:hover[b-ia4ql9x0x5] {
background: var(--brand-700, #003760);
}
.data-management-section .btn-add-item i[b-ia4ql9x0x5] {
font-size: 1rem;
}
.data-table-container[b-ia4ql9x0x5] {
background: var(--bg-surface);
border-radius: 8px;
border: 1px solid var(--border-light);
overflow: hidden;
}
.data-table[b-ia4ql9x0x5] {
width: 100%;
border-collapse: collapse;
}
.data-table thead[b-ia4ql9x0x5] {
background: var(--neutral-100);
}
.data-table thead tr[b-ia4ql9x0x5] {
border-bottom: 2px solid var(--border-medium);
}
.data-table th[b-ia4ql9x0x5] {
padding: 0.875rem 1rem;
text-align: left;
font-weight: 600;
font-size: 0.8125rem; /* 13px - standardized */
color: var(--text-primary);
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 1.3;
}
.data-table .actions-column[b-ia4ql9x0x5] {
text-align: center;
width: 140px;
}
.data-table tbody tr[b-ia4ql9x0x5] {
border-bottom: 1px solid var(--border-light);
transition: background-color 0.2s ease;
}
.data-table tbody tr:hover[b-ia4ql9x0x5] {
background: var(--bg-hover);
}
.data-table tbody tr:last-child[b-ia4ql9x0x5] {
border-bottom: none;
}
.data-table td[b-ia4ql9x0x5] {
padding: 0.875rem 1rem;
font-size: 0.875rem; /* Standardized */
color: var(--text-primary);
line-height: 1.5;
}
.code-cell[b-ia4ql9x0x5] {
font-weight: 600;
}
.code-badge[b-ia4ql9x0x5] {
display: inline-block;
padding: 0.25rem 0.55rem; /* Slightly adjusted */
background: var(--brand-100);
color: var(--brand-700);
border-radius: 4px;
font-size: 0.8125rem; /* Standardized */
font-weight: 600;
font-family: 'Courier New', monospace;
line-height: 1.2;
}
.domain-text[b-ia4ql9x0x5] {
font-family: 'Courier New', monospace;
color: var(--brand-600);
font-weight: 600;
font-size: 0.875rem; /* Added explicit size */
}
.description-cell[b-ia4ql9x0x5] {
color: var(--text-secondary);
font-size: 0.875rem; /* Added explicit size */
line-height: 1.5;
}
.order-cell[b-ia4ql9x0x5] {
text-align: center;
color: var(--text-muted);
font-weight: 500;
font-size: 0.875rem; /* Added explicit size */
}
.status-cell[b-ia4ql9x0x5] {
text-align: center;
}
.status-indicator[b-ia4ql9x0x5] {
display: inline-block;
padding: 0.3rem 0.65rem; /* Slightly adjusted */
border-radius: 6px;
font-size: 0.75rem; /* Reduced from 0.8rem */
font-weight: 600;
line-height: 1.2;
}
.status-indicator.active[b-ia4ql9x0x5] {
background: var(--success-100);
color: var(--success-700);
}
.status-indicator.inactive[b-ia4ql9x0x5] {
background: var(--neutral-200);
color: var(--neutral-600);
}
.actions-cell[b-ia4ql9x0x5] {
text-align: center;
}
.btn-action[b-ia4ql9x0x5] {
padding: 0.35rem 0.6rem;
font-size: 0.85rem;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.empty-state[b-ia4ql9x0x5] {
text-align: center;
padding: 3rem 2rem;
color: var(--text-secondary);
}
.empty-state i[b-ia4ql9x0x5] {
font-size: 3rem;
color: var(--neutral-300);
margin-bottom: 1rem;
display: block;
}
.empty-state p[b-ia4ql9x0x5] {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.5rem;
}
.empty-state .empty-hint[b-ia4ql9x0x5] {
color: var(--text-muted);
font-size: 0.9rem;
}
.save-section[b-ia4ql9x0x5] {
display: flex;
gap: 1rem;
padding: 1.5rem;
background: var(--neutral-50);
border-top: 1px solid var(--border-light);
margin-top: 1.5rem;
border-radius: 0 0 8px 8px;
}
.btn-save-changes[b-ia4ql9x0x5],
.btn-discard-changes[b-ia4ql9x0x5] {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.65rem 1.25rem; /* Slightly adjusted */
border-radius: 10px;
font-weight: 600;
font-size: 0.875rem; /* Standardized */
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
border: none;
line-height: 1.4;
}
.btn-save-changes[b-ia4ql9x0x5] {
background: var(--success-600, #059669);
color: white;
}
.btn-save-changes:hover[b-ia4ql9x0x5] {
background: var(--success-700, #047857);
}
.btn-discard-changes[b-ia4ql9x0x5] {
background: transparent;
color: #64748B;
border: 1px solid #E2E8F0;
}
.btn-discard-changes:hover[b-ia4ql9x0x5] {
background: #F1F5F9;
color: #0F172A;
}
.btn-save-changes i[b-ia4ql9x0x5],
.btn-discard-changes i[b-ia4ql9x0x5] {
font-size: 1rem;
}
/* === Toolbar === */
.states-toolbar[b-ia4ql9x0x5] {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1.5rem;
padding: 1rem;
background: var(--bg-surface);
border-radius: 8px;
margin-bottom: 1.5rem;
border: 1px solid var(--border-light);
}
.states-search[b-ia4ql9x0x5] {
position: relative;
flex: 1;
max-width: 500px;
}
.states-search .search-icon[b-ia4ql9x0x5] {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
pointer-events: none;
transition: color 0.3s ease;
}
.states-search-input[b-ia4ql9x0x5] {
width: 100%;
padding: 0.6rem 2.5rem 0.6rem 2.25rem;
border: 1px solid var(--border-light);
border-radius: 6px;
font-size: 0.9rem; /* Standardized from 0.95rem */
background: white;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
line-height: 1.5;
}
.states-search-input:focus[b-ia4ql9x0x5] {
outline: none;
border-color: var(--brand-500);
box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.08);
}
.states-search-input:focus + .search-icon[b-ia4ql9x0x5] {
color: var(--brand-500);
}
.states-search .clear-search[b-ia4ql9x0x5] {
position: absolute;
right: 0.75rem;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--neutral-400);
cursor: pointer;
padding: 0.25rem;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
border-radius: 6px;
}
.states-search .clear-search:hover[b-ia4ql9x0x5] {
color: var(--error-500);
background: var(--error-50);
}
.states-search .clear-search i[b-ia4ql9x0x5] {
font-size: 1.1rem;
}
/* === Summary Badges === */
.states-summary[b-ia4ql9x0x5] {
display: flex;
gap: 0.75rem;
align-items: center;
}
.badge-states-active[b-ia4ql9x0x5],
.badge-states-total[b-ia4ql9x0x5] {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem; /* Slightly adjusted */
border-radius: 8px;
font-weight: 600;
font-size: 0.8125rem; /* 13px - professional standard */
box-shadow: var(--shadow-xs);
transition: all 0.3s ease;
animation: badge-slide-in-b-ia4ql9x0x5 0.5s ease;
line-height: 1.4;
}
.badge-states-active[b-ia4ql9x0x5] {
background: linear-gradient(135deg, var(--success-500) 0%, var(--success-600) 100%);
color: white;
}
.badge-states-total[b-ia4ql9x0x5] {
background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-600) 100%);
color: white;
}
.badge-states-active:hover[b-ia4ql9x0x5],
.badge-states-total:hover[b-ia4ql9x0x5] {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
@keyframes badge-slide-in-b-ia4ql9x0x5 {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* === Loading States === */
.states-loading[b-ia4ql9x0x5] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4rem 2rem;
background: var(--bg-surface);
border-radius: 12px;
border: 1px solid var(--border-light);
}
.spinner-wrapper[b-ia4ql9x0x5] {
margin-bottom: 1rem;
animation: pulse-b-ia4ql9x0x5 2s ease-in-out infinite;
}
.loading-text[b-ia4ql9x0x5] {
color: var(--text-secondary);
font-size: 1rem;
margin: 0;
animation: fade-in-out-b-ia4ql9x0x5 1.5s ease-in-out infinite;
}
@keyframes pulse-b-ia4ql9x0x5 {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
@keyframes fade-in-out-b-ia4ql9x0x5 {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
/* === Accordion === */
.states-accordion[b-ia4ql9x0x5] {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.state-accordion-item[b-ia4ql9x0x5] {
border: 1px solid var(--border-light);
border-radius: 12px;
background: white;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
animation: accordion-slide-in-b-ia4ql9x0x5 0.4s ease;
box-shadow: var(--shadow-xs);
}
.state-accordion-item:hover[b-ia4ql9x0x5] {
box-shadow: var(--shadow-md);
border-color: var(--brand-200);
}
.state-accordion-item.expanded[b-ia4ql9x0x5] {
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.1);
border-color: var(--brand-300);
}
@keyframes accordion-slide-in-b-ia4ql9x0x5 {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* === Accordion Header === */
.state-accordion-button[b-ia4ql9x0x5] {
width: 100%;
padding: 1.25rem 3.5rem 1.25rem 1.5rem; /* Added right padding for chevron */
background: linear-gradient(135deg, #ffffff 0%, var(--brand-50) 100%);
border: none;
text-align: left;
display: flex;
align-items: center;
gap: 1rem;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
.state-accordion-button:not(.collapsed)[b-ia4ql9x0x5] {
background: linear-gradient(135deg, var(--brand-50) 0%, var(--brand-100) 100%);
border-bottom: 2px solid var(--brand-200);
}
.state-accordion-button[b-ia4ql9x0x5]::after {
content: '\F282'; /* Bootstrap icon chevron-down */
font-family: 'bootstrap-icons';
position: absolute;
right: 1.5rem;
top: 50%;
transform: translateY(-50%);
font-size: 1.25rem;
color: var(--brand-500);
transition: transform 0.3s ease;
pointer-events: none;
z-index: 1; /* Ensure it's above other content */
font-weight: bold;
}
.state-accordion-button:not(.collapsed)[b-ia4ql9x0x5]::after {
transform: translateY(-50%) rotate(180deg);
}
.state-header-content[b-ia4ql9x0x5] {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 2rem;
padding-right: 0; /* Remove extra padding since button has it */
position: relative;
z-index: 0; /* Keep content below chevron */
}
.state-info-section[b-ia4ql9x0x5] {
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
}
.state-name-wrapper[b-ia4ql9x0x5] {
display: flex;
align-items: center;
gap: 0.75rem;
}
.state-icon[b-ia4ql9x0x5] {
color: var(--brand-500);
font-size: 1.3rem;
animation: icon-bounce-b-ia4ql9x0x5 2s ease-in-out infinite;
}
@keyframes icon-bounce-b-ia4ql9x0x5 {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
.state-name[b-ia4ql9x0x5] {
font-size: 1rem; /* Kept at 1rem - good size */
font-weight: 600;
color: var(--text-primary);
line-height: 1.4;
}
.state-abbr-badge[b-ia4ql9x0x5] {
padding: 0.25rem 0.65rem; /* Slightly adjusted */
background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-600) 100%);
color: white;
border-radius: 6px;
font-size: 0.75rem; /* Reduced from 0.85rem */
font-weight: 700;
letter-spacing: 0.5px;
box-shadow: var(--shadow-xs);
line-height: 1.2;
}
.state-count-text[b-ia4ql9x0x5] {
color: var(--text-secondary);
font-size: 0.8125rem; /* Standardized from 0.9rem */
padding-left: 2rem;
line-height: 1.4;
}
/* === Progress Section === */
.state-stats-section[b-ia4ql9x0x5] {
display: flex;
align-items: center;
gap: 2rem;
}
.progress-wrapper[b-ia4ql9x0x5] {
display: flex;
align-items: center;
gap: 1rem;
}
/* Status Indicator Styles */
.state-status-wrapper[b-ia4ql9x0x5] {
display: flex;
align-items: center;
gap: 0.75rem;
}
.state-status-counts[b-ia4ql9x0x5] {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
background: var(--neutral-50);
border-radius: 8px;
border: 1px solid var(--neutral-200);
}
.status-count-item[b-ia4ql9x0x5] {
display: flex;
align-items: center;
gap: 0.375rem;
font-size: 0.875rem;
}
.status-count-item i[b-ia4ql9x0x5] {
font-size: 1rem;
}
.status-count-item.active i[b-ia4ql9x0x5] {
color: var(--success-600);
}
.status-count-item.inactive i[b-ia4ql9x0x5] {
color: var(--neutral-400);
}
.status-count-item .count-value[b-ia4ql9x0x5] {
font-weight: 700;
color: var(--text-primary);
}
.status-count-item .count-label[b-ia4ql9x0x5] {
font-weight: 500;
color: var(--text-secondary);
font-size: 0.8125rem;
}
.status-count-divider[b-ia4ql9x0x5] {
width: 1px;
height: 20px;
background: var(--neutral-300);
margin: 0 0.25rem;
}
.state-status-badge[b-ia4ql9x0x5] {
display: flex;
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0.625rem;
border-radius: 6px;
font-size: 0.8125rem;
font-weight: 600;
white-space: nowrap;
border: 1px solid;
transition: all 0.2s ease;
}
.state-status-badge.status-good[b-ia4ql9x0x5] {
background: var(--success-50);
color: var(--success-700);
border-color: var(--success-200);
}
.state-status-badge.status-partial[b-ia4ql9x0x5] {
background: var(--warning-50);
color: var(--warning-700);
border-color: var(--warning-200);
}
.state-status-badge.status-none[b-ia4ql9x0x5] {
background: var(--neutral-50);
color: var(--neutral-600);
border-color: var(--neutral-200);
}
.state-status-badge .status-percentage[b-ia4ql9x0x5] {
font-weight: 700;
font-size: 0.875rem;
}
.state-status-badge .status-text[b-ia4ql9x0x5] {
font-weight: 500;
}
/* === Toggle Switch === */
.state-toggle-wrapper[b-ia4ql9x0x5] {
display: flex;
align-items: center;
}
.state-switch[b-ia4ql9x0x5] {
margin: 0;
padding: 0;
display: flex;
align-items: center;
}
.state-switch-input[b-ia4ql9x0x5] {
width: 3rem;
height: 1.5rem;
cursor: pointer;
background-color: var(--neutral-300);
border: none;
transition: all 0.3s ease;
margin: 0;
}
.state-switch-input:checked[b-ia4ql9x0x5] {
background-color: var(--success-500);
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}
.state-switch-input:focus[b-ia4ql9x0x5] {
box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.15);
}
.state-switch-input:hover[b-ia4ql9x0x5] {
opacity: 0.85;
}
/* Remove label styling since we removed the label */
.state-switch-label[b-ia4ql9x0x5] {
display: none;
}
/* === Accordion Body === */
.state-collapse[b-ia4ql9x0x5] {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.state-body[b-ia4ql9x0x5] {
padding: 0;
background: var(--neutral-50);
}
/* === Data Table === */
.states-management-section .state-table-wrapper[b-ia4ql9x0x5] {
padding: 1.5rem;
animation: table-fade-in-b-ia4ql9x0x5 0.5s ease;
}
@keyframes table-fade-in-b-ia4ql9x0x5 {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.states-management-section .state-data-table[b-ia4ql9x0x5] {
margin: 0;
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.states-management-section .state-table-header[b-ia4ql9x0x5] {
background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-600) 100%);
color: white;
}
.states-management-section .state-table-header th[b-ia4ql9x0x5] {
padding: 1rem 1.25rem;
font-weight: 600;
font-size: 0.8125rem; /* 13px - reduced from 0.9rem */
text-transform: uppercase;
letter-spacing: 0.5px;
border: none;
line-height: 1.3;
}
.states-management-section .state-table-header i[b-ia4ql9x0x5] {
opacity: 0.9;
}
.states-management-section .state-data-row[b-ia4ql9x0x5] {
transition: all 0.2s ease;
border-bottom: 1px solid var(--border-light);
}
.states-management-section .state-data-row:hover[b-ia4ql9x0x5] {
background: var(--brand-50);
transform: scale(1.01);
}
.states-management-section .state-data-row.active-row[b-ia4ql9x0x5] {
border-left: 3px solid var(--success-500);
}
.states-management-section .state-data-row.inactive-row[b-ia4ql9x0x5] {
border-left: 3px solid var(--neutral-300);
opacity: 0.7;
}
.states-management-section .state-data-row td[b-ia4ql9x0x5] {
padding: 0.5rem 0.85rem;
vertical-align: middle;
}
.states-management-section .city-cell[b-ia4ql9x0x5] {
font-weight: 600;
color: var(--text-primary);
font-size: 0.875rem; /* Added explicit size */
line-height: 1.5;
}
.states-management-section .cell-icon[b-ia4ql9x0x5] {
color: var(--brand-500);
margin-right: 0.5rem;
font-size: 0.875rem; /* Reduced from 0.9rem */
}
.states-management-section .county-cell[b-ia4ql9x0x5] {
color: var(--text-secondary);
font-size: 0.875rem; /* Added explicit size */
line-height: 1.5;
}
.states-management-section .zipcode-badge[b-ia4ql9x0x5] {
display: inline-block;
padding: 0.3rem 0.65rem; /* Slightly adjusted */
background: var(--accent-100);
color: var(--accent-800);
border-radius: 6px;
font-weight: 600;
font-size: 0.8125rem; /* Standardized */
font-family: 'Courier New', monospace;
line-height: 1.2;
}
.states-management-section .fips-code[b-ia4ql9x0x5] {
background: var(--neutral-100);
color: var(--neutral-700);
padding: 0.3rem 0.55rem; /* Slightly adjusted */
border-radius: 4px;
font-size: 0.8125rem; /* Standardized */
font-weight: 600;
line-height: 1.2;
}
.states-management-section .status-badge[b-ia4ql9x0x5] {
display: inline-flex;
align-items: center;
gap: 0.35rem; /* Slightly reduced */
padding: 0.35rem 0.75rem; /* Slightly adjusted */
border-radius: 8px;
font-weight: 600;
font-size: 0.75rem; /* Reduced from 0.85rem */
animation: badge-pop-in-b-ia4ql9x0x5 0.3s ease;
line-height: 1.3;
}
@keyframes badge-pop-in-b-ia4ql9x0x5 {
0% {
transform: scale(0.8);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.states-management-section .status-badge.status-active[b-ia4ql9x0x5] {
background: linear-gradient(135deg, var(--success-50) 0%, var(--success-100) 100%);
color: var(--success-700);
border: 1px solid var(--success-200);
}
.states-management-section .status-badge.status-inactive[b-ia4ql9x0x5] {
background: var(--neutral-100);
color: var(--neutral-600);
border: 1px solid var(--neutral-300);
}
/* === Pagination === */
.state-pagination-wrapper[b-ia4ql9x0x5] {
padding: 1.5rem;
background: white;
border-top: 1px solid var(--border-light);
}
.state-pagination[b-ia4ql9x0x5] {
margin: 0;
gap: 0.5rem;
}
.state-pagination .page-item[b-ia4ql9x0x5] {
animation: page-fade-in-b-ia4ql9x0x5 0.4s ease;
}
@keyframes page-fade-in-b-ia4ql9x0x5 {
from {
opacity: 0;
transform: translateY(5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.page-link-states[b-ia4ql9x0x5] {
padding: 0.5rem 1rem; /* Slightly adjusted */
border-radius: 8px;
border: 1px solid var(--brand-200);
color: var(--brand-600);
font-weight: 600;
font-size: 0.8125rem; /* Standardized from implicit size */
display: flex;
align-items: center;
gap: 0.4rem;
transition: all 0.3s ease;
line-height: 1.4;
}
.page-link-states:hover:not(:disabled)[b-ia4ql9x0x5] {
background: var(--brand-500);
color: white;
border-color: var(--brand-500);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.page-link-states:disabled[b-ia4ql9x0x5] {
opacity: 0.5;
cursor: not-allowed;
}
.page-info[b-ia4ql9x0x5] {
padding: 0.5rem 1rem; /* Adjusted to match */
border-radius: 8px;
background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-600) 100%);
color: white;
border: none;
font-weight: 600;
font-size: 0.8125rem; /* Standardized */
line-height: 1.4;
}
.page-info strong[b-ia4ql9x0x5] {
font-weight: 700;
font-size: 0.875rem; /* Slightly larger */
}
/* === Empty States === */
.empty-search-state[b-ia4ql9x0x5],
.states-empty[b-ia4ql9x0x5] {
text-align: center;
padding: 3rem 2rem;
color: var(--text-secondary);
animation: empty-fade-in-b-ia4ql9x0x5 0.5s ease;
}
@keyframes empty-fade-in-b-ia4ql9x0x5 {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
.empty-search-state i[b-ia4ql9x0x5],
.states-empty i[b-ia4ql9x0x5] {
font-size: 3rem;
color: var(--neutral-300);
margin-bottom: 1rem;
display: block;
}
.empty-search-state p[b-ia4ql9x0x5],
.states-empty p[b-ia4ql9x0x5] {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.5rem;
}
.empty-search-state span[b-ia4ql9x0x5],
.empty-hint[b-ia4ql9x0x5] {
color: var(--text-muted);
font-size: 0.95rem;
}
.loading-state-data[b-ia4ql9x0x5] {
padding: 2rem;
color: var(--text-secondary);
}
/* === Modal Styles === */
.state-modal-backdrop[b-ia4ql9x0x5] {
background-color: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(4px);
animation: modal-backdrop-fade-in-b-ia4ql9x0x5 0.3s ease;
}
@keyframes modal-backdrop-fade-in-b-ia4ql9x0x5 {
from { opacity: 0; }
to { opacity: 1; }
}
.action-text[b-ia4ql9x0x5] {
font-weight: 700;
}
.activate-text[b-ia4ql9x0x5] {
color: var(--success-600);
}
.deactivate-text[b-ia4ql9x0x5] {
color: var(--error-600);
}
.state-name-text[b-ia4ql9x0x5] {
color: var(--brand-600);
}
/* === Responsive Design === */
@media (max-width: 1200px) {
.category-cards[b-ia4ql9x0x5] {
gap: 0.5rem;
}
.state-header-content[b-ia4ql9x0x5] {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.state-stats-section[b-ia4ql9x0x5] {
width: 100%;
justify-content: space-between;
}
.state-status-counts[b-ia4ql9x0x5] {
padding: 0.375rem 0.625rem;
gap: 0.375rem;
}
.status-count-item[b-ia4ql9x0x5] {
font-size: 0.8125rem;
}
}
@media (max-width: 768px) {
.category-cards[b-ia4ql9x0x5] {
gap: 0.5rem;
}
.category-card[b-ia4ql9x0x5] {
padding: 0.65rem 1rem;
}
.category-icon[b-ia4ql9x0x5] {
width: 28px;
height: 28px;
min-width: 28px;
}
.category-icon i[b-ia4ql9x0x5] {
font-size: 1rem;
}
.category-name[b-ia4ql9x0x5] {
font-size: 0.85rem;
}
.category-count[b-ia4ql9x0x5] {
font-size: 0.7rem;
}
.data-management-section .data-toolbar[b-ia4ql9x0x5] {
flex-direction: column;
align-items: stretch;
}
.data-management-section .search-container[b-ia4ql9x0x5] {
max-width: 100%;
}
.data-management-section .btn-add-item[b-ia4ql9x0x5] {
width: 100%;
justify-content: center;
}
.data-table[b-ia4ql9x0x5] {
font-size: 0.85rem;
}
.data-table th[b-ia4ql9x0x5],
.data-table td[b-ia4ql9x0x5] {
padding: 0.65rem 0.75rem;
}
.save-section[b-ia4ql9x0x5] {
flex-direction: column;
}
.btn-save-changes[b-ia4ql9x0x5],
.btn-discard-changes[b-ia4ql9x0x5] {
width: 100%;
justify-content: center;
}
.states-management-section .states-toolbar[b-ia4ql9x0x5] {
flex-direction: column;
gap: 1rem;
}
.states-management-section .states-search[b-ia4ql9x0x5] {
max-width: 100%;
}
.states-management-section .states-summary[b-ia4ql9x0x5] {
width: 100%;
justify-content: center;
}
.state-stats-section[b-ia4ql9x0x5] {
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
width: 100%;
}
.state-status-wrapper[b-ia4ql9x0x5] {
width: 100%;
flex-direction: column;
align-items: flex-start;
gap: 0.625rem;
}
.state-status-counts[b-ia4ql9x0x5] {
width: 100%;
}
.state-status-badge[b-ia4ql9x0x5] {
align-self: stretch;
justify-content: center;
}
.state-accordion-button[b-ia4ql9x0x5]::after {
right: 1rem;
}
.states-management-section .state-data-table[b-ia4ql9x0x5] {
font-size: 0.85rem;
}
.states-management-section .state-table-header th[b-ia4ql9x0x5],
.states-management-section .state-data-row td[b-ia4ql9x0x5] {
padding: 0.75rem 0.5rem;
}
}
@media (max-width: 576px) {
.category-cards[b-ia4ql9x0x5] {
flex-direction: column;
gap: 0.5rem;
}
.category-card[b-ia4ql9x0x5] {
padding: 0.6rem 1rem;
}
.section-header[b-ia4ql9x0x5] {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.btn-add-category[b-ia4ql9x0x5] {
width: 100%;
justify-content: center;
}
.badge-states-active[b-ia4ql9x0x5],
.badge-states-total[b-ia4ql9x0x5] {
font-size: 0.8rem;
padding: 0.5rem 0.75rem;
}
.state-name[b-ia4ql9x0x5] {
font-size: 1rem;
}
.state-accordion-button[b-ia4ql9x0x5] {
padding: 1rem;
}
.states-management-section .state-table-wrapper[b-ia4ql9x0x5] {
padding: 1rem;
}
.state-pagination-wrapper[b-ia4ql9x0x5] {
padding: 1rem;
}
.page-link-states[b-ia4ql9x0x5] {
padding: 0.5rem 0.75rem;
font-size: 0.85rem;
}
}
/* /Components/Pages/Admin/TestDataPurgeConfirmDialog.razor.rz.scp.css */
.modal-backdrop-custom[b-q58w1zzqcl] {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(4px);
z-index: 1050;
}
.modal-shell[b-q58w1zzqcl] {
position: fixed;
inset: 0;
display: grid;
place-items: center;
z-index: 1060;
pointer-events: none;
}
.modal-card[b-q58w1zzqcl] {
background: white;
border-radius: 16px;
border: none;
box-shadow: 0 24px 64px rgba(15, 23, 42, 0.25);
width: min(560px, calc(100vw - 2rem));
pointer-events: auto;
overflow: hidden;
max-height: 90vh;
display: flex;
flex-direction: column;
}
.modal-header-custom[b-q58w1zzqcl] {
display: flex;
align-items: center;
gap: 0.9rem;
padding: 1.25rem 1.5rem 1rem;
border-bottom: 1px solid #EEF2F6;
background: #fff;
color: #0F172A;
font-size: 1.05rem;
}
.modal-body-custom[b-q58w1zzqcl] {
padding: 1.15rem 1.5rem;
overflow-y: auto;
}
.modal-footer-custom[b-q58w1zzqcl] {
padding: 1rem 1.5rem;
border-top: 1px solid #EEF2F6;
display: flex;
justify-content: flex-end;
gap: 0.6rem;
background: #FAFBFC;
}
.btn-action[b-q58w1zzqcl] {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.55rem 1.15rem;
background: transparent;
border: 1px solid #E2E8F0;
border-radius: 10px;
color: #64748B;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
}
.btn-action:hover:not(:disabled):not(.btn-action-danger)[b-q58w1zzqcl] {
background: #F1F5F9;
color: #0F172A;
}
.btn-action:disabled[b-q58w1zzqcl] { opacity: 0.5; cursor: not-allowed; }
.btn-action-danger[b-q58w1zzqcl] {
background: var(--error-600, #DC2626);
border-color: var(--error-600, #DC2626);
color: white;
}
.btn-action-danger:hover:not(:disabled)[b-q58w1zzqcl] {
background: #b91c1c;
border-color: #b91c1c;
}
/* /Components/Pages/Admin/TestDataPurgePage.razor.rz.scp.css */
/* ========================================
Test Data Purge — admin remediation page
Styled to match the API Playground / admin tooling visual language.
======================================== */
.purge-page[b-6af1ohmtt0] {
padding: 20px 24px;
max-width: 1500px;
margin: 0 auto;
color: #111827;
}
/* ── Toolbar header ─────────────────────────────────────────────── */
.page-toolbar[b-6af1ohmtt0] {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 12px 16px;
background: white;
border: 1px solid #e5e7eb;
border-radius: 12px;
margin-bottom: 20px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
flex-wrap: wrap;
}
.toolbar-left[b-6af1ohmtt0] {
display: flex;
align-items: center;
gap: 12px;
}
.app-icon[b-6af1ohmtt0] {
width: 40px;
height: 40px;
border-radius: 10px;
background: linear-gradient(135deg, #dc2626, #b91c1c);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
box-shadow: 0 4px 10px rgba(220, 38, 38, 0.25);
}
.toolbar-title[b-6af1ohmtt0] {
font-size: 17px;
font-weight: 700;
letter-spacing: -0.3px;
line-height: 1.2;
}
.toolbar-subtitle[b-6af1ohmtt0] {
font-size: 12.5px;
color: #6b7280;
line-height: 1.3;
margin-top: 2px;
max-width: 720px;
}
.toolbar-subtitle code[b-6af1ohmtt0] {
background: #f3f4f6;
padding: 1px 5px;
border-radius: 3px;
font-size: 11.5px;
color: #111827;
}
.toolbar-right[b-6af1ohmtt0] {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
/* ── Hero (state-driven) ──────────────────────────────────────────── */
.hero[b-6af1ohmtt0] {
display: flex;
align-items: center;
gap: 1.25rem;
padding: 1.25rem 1.5rem;
background: white;
border: 1px solid #e5e7eb;
border-radius: 12px;
margin-bottom: 16px;
}
.hero-warn[b-6af1ohmtt0] {
background: linear-gradient(135deg, #fffbeb, #fef3c7);
border-color: #fcd34d;
}
.hero-warn .hero-icon[b-6af1ohmtt0] {
background: #fef3c7;
color: #d97706;
}
.hero-danger[b-6af1ohmtt0] {
background: linear-gradient(135deg, #fef2f2, #fee2e2);
border-color: #fecaca;
}
.hero-danger .hero-icon[b-6af1ohmtt0] {
background: #fee2e2;
color: #dc2626;
}
.hero-icon[b-6af1ohmtt0] {
width: 3rem;
height: 3rem;
border-radius: 12px;
display: grid;
place-items: center;
font-size: 1.5rem;
flex-shrink: 0;
}
.hero-body[b-6af1ohmtt0] { flex: 1; min-width: 0; }
.hero-headline[b-6af1ohmtt0] {
font-size: 1.05rem;
font-weight: 700;
color: #111827;
margin-bottom: 0.25rem;
}
.hero-subline[b-6af1ohmtt0] {
color: #475569;
font-size: 0.875rem;
line-height: 1.45;
}
/* ── Card sections ────────────────────────────────────────────────── */
.card-section[b-6af1ohmtt0] {
background: white;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 1.25rem 1.5rem;
margin-bottom: 16px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.card-section h2[b-6af1ohmtt0] {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #2c5aa0;
font-weight: 700;
margin: 0 0 0.85rem 0;
}
.card-section h2 .small[b-6af1ohmtt0],
.card-section h2 .muted[b-6af1ohmtt0] {
font-weight: 500;
color: #94a3b8;
margin-left: 0.4rem;
text-transform: none;
letter-spacing: 0;
font-size: 0.7rem;
}
.card-section table[b-6af1ohmtt0] { margin-bottom: 0; }
.card-section thead th[b-6af1ohmtt0] {
background: #f8fafc;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #475569;
font-weight: 600;
}
.card-section tbody td[b-6af1ohmtt0] {
vertical-align: middle;
font-size: 0.875rem;
}
.mono[b-6af1ohmtt0] { font-variant-numeric: tabular-nums; }
.muted[b-6af1ohmtt0] { color: #6b7280; }
.link-muted[b-6af1ohmtt0] {
color: #475569;
text-decoration: none;
font-weight: 500;
}
.link-muted:hover[b-6af1ohmtt0] { color: #2c5aa0; text-decoration: underline; }
/* ── Buttons ──────────────────────────────────────────────────────── */
.btn-action[b-6af1ohmtt0] {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.85rem;
background: white;
border: 1px solid #d1d5db;
border-radius: 6px;
color: #374151;
font-size: 0.875rem;
font-weight: 500;
text-decoration: none;
cursor: pointer;
transition: border-color 120ms, color 120ms, background-color 120ms;
}
.btn-action:hover:not(:disabled)[b-6af1ohmtt0] {
border-color: #2c5aa0;
color: #2c5aa0;
}
.btn-action:disabled[b-6af1ohmtt0] {
opacity: 0.5;
cursor: not-allowed;
}
.btn-action-primary[b-6af1ohmtt0] {
background: #2c5aa0;
border-color: #2c5aa0;
color: white;
}
.btn-action-primary:hover:not(:disabled)[b-6af1ohmtt0] {
background: #244b87;
border-color: #244b87;
color: white;
}
.btn-action-danger[b-6af1ohmtt0] {
background: #dc2626;
border-color: #dc2626;
color: white;
}
.btn-action-danger:hover:not(:disabled)[b-6af1ohmtt0] {
background: #b91c1c;
border-color: #b91c1c;
color: white;
}
.btn-action i[b-6af1ohmtt0] { font-size: 0.95rem; }
/* ── Filters ─────────────────────────────────────────────────────── */
.filters-grid[b-6af1ohmtt0] {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 0.85rem 1rem;
}
.filter-field--sm[b-6af1ohmtt0] { grid-column: span 2; }
.filter-field--md[b-6af1ohmtt0] { grid-column: span 3; }
.filter-field--lg[b-6af1ohmtt0] { grid-column: span 3; }
.filter-field[b-6af1ohmtt0] { min-width: 0; }
.filter-field > .form-control[b-6af1ohmtt0],
.filter-field > .form-select[b-6af1ohmtt0] {
width: 100%;
box-sizing: border-box;
min-height: 31px;
height: 31px;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
line-height: 1.5;
font-size: 0.875rem;
}
@media (max-width: 1100px) {
.filter-field--sm[b-6af1ohmtt0] { grid-column: span 4; }
.filter-field--md[b-6af1ohmtt0] { grid-column: span 6; }
.filter-field--lg[b-6af1ohmtt0] { grid-column: span 12; }
}
@media (max-width: 640px) {
.filter-field--sm[b-6af1ohmtt0],
.filter-field--md[b-6af1ohmtt0],
.filter-field--lg[b-6af1ohmtt0] { grid-column: span 12; }
}
.form-label.small[b-6af1ohmtt0] {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #475569;
font-weight: 600;
margin-bottom: 0.3rem;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.filter-actions[b-6af1ohmtt0] {
display: flex;
gap: 0.75rem;
align-items: center;
justify-content: space-between;
margin-top: 1rem;
padding-top: 0.85rem;
border-top: 1px solid #f1f5f9;
flex-wrap: wrap;
}
.filter-check[b-6af1ohmtt0] {
display: flex;
align-items: center;
gap: 0.45rem;
margin: 0;
padding-left: 1.5rem;
}
.filter-check .form-check-label[b-6af1ohmtt0] {
font-size: 0.825rem;
color: #475569;
user-select: none;
cursor: pointer;
}
.filter-actions-right[b-6af1ohmtt0] {
display: flex;
gap: 0.5rem;
margin-left: auto;
align-items: center;
}
.filter-hint[b-6af1ohmtt0] {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.78rem;
color: #94a3b8;
margin-right: 0.5rem;
}
.filter-hint i[b-6af1ohmtt0] { font-size: 0.85rem; }
.action-bar[b-6af1ohmtt0] {
display: flex;
gap: 0.5rem;
align-items: center;
margin-bottom: 0.75rem;
flex-wrap: wrap;
}
.action-bar .spacer[b-6af1ohmtt0] { flex: 1; }
.truncation-banner[b-6af1ohmtt0],
.cap-banner[b-6af1ohmtt0] {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.6rem 0.85rem;
border-radius: 8px;
font-size: 0.825rem;
margin-bottom: 0.75rem;
}
.truncation-banner[b-6af1ohmtt0] {
background: #fffbeb;
border: 1px solid #fde68a;
color: #92400e;
}
.cap-banner[b-6af1ohmtt0] {
background: #eff6ff;
border: 1px solid #bfdbfe;
color: #1e3a8a;
}
.truncation-banner i[b-6af1ohmtt0],
.cap-banner i[b-6af1ohmtt0] { font-size: 0.95rem; }
/* Active filter chips */
.filter-chips[b-6af1ohmtt0] {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.4rem;
margin-bottom: 0.85rem;
padding-bottom: 0.85rem;
border-bottom: 1px dashed #e5e7eb;
}
.filter-chips-label[b-6af1ohmtt0] {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #94a3b8;
font-weight: 600;
margin-right: 0.25rem;
}
.chip[b-6af1ohmtt0] {
display: inline-flex;
align-items: center;
gap: 0.3rem;
background: #eff6ff;
border: 1px solid #bfdbfe;
border-radius: 999px;
padding: 0.18rem 0.4rem 0.18rem 0.6rem;
font-size: 0.78rem;
color: #1e40af;
cursor: pointer;
transition: background 120ms, border-color 120ms;
}
.chip:hover[b-6af1ohmtt0] {
background: #dbeafe;
border-color: #93c5fd;
}
.chip-key[b-6af1ohmtt0] {
color: #64748b;
font-weight: 600;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.chip-value[b-6af1ohmtt0] {
color: #1e3a8a;
font-weight: 500;
}
.chip i[b-6af1ohmtt0] {
font-size: 0.85rem;
color: #94a3b8;
margin-left: 0.15rem;
}
.chip:hover i[b-6af1ohmtt0] { color: #1e40af; }
/* ── Result table ─────────────────────────────────────────────────── */
.results-wrap[b-6af1ohmtt0] {
border: 1px solid #e5e7eb;
border-radius: 8px;
overflow: hidden;
}
.results-table[b-6af1ohmtt0] {
margin: 0;
}
.results-table thead th[b-6af1ohmtt0] {
border-top: 0;
border-bottom: 1px solid #e5e7eb;
padding: 0.6rem 0.75rem;
background: #f8fafc;
}
.results-table tbody td[b-6af1ohmtt0] {
padding: 0.55rem 0.75rem;
border-top: 1px solid #f1f5f9;
}
.results-table tbody tr[b-6af1ohmtt0] {
transition: background-color 120ms;
cursor: pointer;
}
.results-table tbody tr.is-selected[b-6af1ohmtt0] {
background: #fef2f2;
}
.results-table tbody tr:hover[b-6af1ohmtt0] {
background: #f8fafc;
}
.results-table tbody tr.is-selected:hover[b-6af1ohmtt0] {
background: #fee2e2;
}
.results-table tbody tr.is-selected td[b-6af1ohmtt0] {
border-top-color: #fecaca;
}
/* Column sizing */
.col-check[b-6af1ohmtt0] { width: 36px; text-align: center; }
.col-app[b-6af1ohmtt0] { width: 200px; white-space: nowrap; }
.col-bank[b-6af1ohmtt0] { white-space: nowrap; }
.col-status[b-6af1ohmtt0] { width: 160px; }
.col-borrower[b-6af1ohmtt0] { color: #1f2937; }
.col-date[b-6af1ohmtt0] { width: 110px; color: #6b7280; font-variant-numeric: tabular-nums; font-size: 0.825rem; }
.col-num[b-6af1ohmtt0] { width: 60px; text-align: center; }
/* Application link */
.app-link[b-6af1ohmtt0] {
display: inline-flex;
align-items: center;
gap: 0.35rem;
color: #2c5aa0;
text-decoration: none;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.app-link:hover[b-6af1ohmtt0] { color: #1e3f73; text-decoration: underline; }
.app-link i[b-6af1ohmtt0] { font-size: 0.7rem; opacity: 0.6; }
.app-number[b-6af1ohmtt0] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.825rem; }
.bank-name[b-6af1ohmtt0] { font-weight: 500; color: #374151; }
.bank-id[b-6af1ohmtt0] { color: #94a3b8; font-size: 0.75rem; margin-left: 0.35rem; font-variant-numeric: tabular-nums; }
.empty-cell[b-6af1ohmtt0] { color: #cbd5e1; }
/* API badge */
.api-badge[b-6af1ohmtt0] {
display: inline-flex;
align-items: center;
background: #eef2ff;
color: #4338ca;
border: 1px solid #c7d2fe;
border-radius: 4px;
font-size: 0.6rem;
font-weight: 700;
padding: 0.1rem 0.35rem;
margin-left: 0.5rem;
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1.2;
}
/* Count pills */
.count-pill[b-6af1ohmtt0] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 22px;
padding: 0 0.45rem;
border-radius: 11px;
background: #eef2ff;
color: #4338ca;
font-size: 0.75rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.count-pill.is-zero[b-6af1ohmtt0] {
background: transparent;
color: #cbd5e1;
}
/* Status pills — match repo-wide status-{name} convention */
.status-pill[b-6af1ohmtt0] {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.18rem 0.55rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 600;
border: 1px solid transparent;
line-height: 1.3;
white-space: nowrap;
}
.status-pill i[b-6af1ohmtt0] { font-size: 0.7rem; }
.status-pill.status-draft[b-6af1ohmtt0] { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.status-pill.status-submitted[b-6af1ohmtt0] { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.status-pill.status-in-review[b-6af1ohmtt0] { background: #ecfeff; color: #0e7490; border-color: #a5f3fc; }
.status-pill.status-awaiting-info[b-6af1ohmtt0] { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.status-pill.status-approved[b-6af1ohmtt0] { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.status-pill.status-declined[b-6af1ohmtt0] { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.status-pill.status-bound[b-6af1ohmtt0] { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }
.status-pill.status-cancelled[b-6af1ohmtt0] { background: #f3f4f6; color: #6b7280; border-color: #d1d5db; }
.status-pill.status-referral[b-6af1ohmtt0] { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.status-pill.status-referred[b-6af1ohmtt0] { background: #fdf4ff; color: #a21caf; border-color: #f5d0fe; }
.status-pill.status-approved-for-binding[b-6af1ohmtt0] { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.status-pill.status-ordered[b-6af1ohmtt0] { background: #ecfeff; color: #155e75; border-color: #a5f3fc; }
.status-pill.status-pending-payment[b-6af1ohmtt0] { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.status-pill.status-archived[b-6af1ohmtt0] { background: #f9fafb; color: #9ca3af; border-color: #e5e7eb; }
.status-pill.status-awaiting-borrower[b-6af1ohmtt0] { background: #f0fdfa; color: #115e59; border-color: #99f6e4; } /* feature 072 */
.status-pill.status-unknown[b-6af1ohmtt0] { background: #f3f4f6; color: #6b7280; border-color: #d1d5db; }
/* ── How-it-works disclosure ─────────────────────────────────────── */
.info-section[b-6af1ohmtt0] {
background: #f8fafc;
border-color: #e2e8f0;
box-shadow: none;
}
.info-toggle[b-6af1ohmtt0] {
background: none;
border: none;
padding: 0;
font-size: 0.875rem;
color: #475569;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-weight: 600;
}
.info-toggle:hover[b-6af1ohmtt0] { color: #2c5aa0; }
.info-content[b-6af1ohmtt0] {
margin-top: 0.85rem;
color: #475569;
font-size: 0.875rem;
}
.info-content ul[b-6af1ohmtt0] {
margin: 0;
padding-left: 1.25rem;
}
.info-content li[b-6af1ohmtt0] { margin-bottom: 0.5rem; line-height: 1.5; }
.info-content code[b-6af1ohmtt0] {
background: #e5e7eb;
color: #374151;
padding: 0.05rem 0.3rem;
border-radius: 3px;
font-size: 0.82rem;
}
.info-content strong[b-6af1ohmtt0] { color: #111827; }
/* ── Post-run report ──────────────────────────────────────────────── */
.report-hero[b-6af1ohmtt0] {
display: flex;
align-items: center;
gap: 1.25rem;
padding: 1.25rem 1.5rem;
border-radius: 12px;
margin-bottom: 16px;
}
.report-hero-success[b-6af1ohmtt0] {
background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
border: 1px solid #86efac;
}
.report-hero-success .report-icon[b-6af1ohmtt0] {
background: #dcfce7;
color: #16a34a;
}
.report-hero-warn[b-6af1ohmtt0] {
background: linear-gradient(135deg, #fef2f2, #fee2e2);
border: 1px solid #fecaca;
}
.report-hero-warn .report-icon[b-6af1ohmtt0] {
background: #fee2e2;
color: #dc2626;
}
.report-icon[b-6af1ohmtt0] {
width: 3rem;
height: 3rem;
border-radius: 12px;
display: grid;
place-items: center;
font-size: 1.5rem;
flex-shrink: 0;
}
.report-summary[b-6af1ohmtt0] { flex: 1; min-width: 0; }
.report-headline[b-6af1ohmtt0] {
font-size: 1.05rem;
font-weight: 700;
color: #111827;
margin-bottom: 0.2rem;
}
.report-subline[b-6af1ohmtt0] {
color: #475569;
font-size: 0.875rem;
font-variant-numeric: tabular-nums;
}
.report-subline strong[b-6af1ohmtt0] {
color: #111827;
font-weight: 700;
}
.report-actions[b-6af1ohmtt0] {
display: flex;
gap: 0.5rem;
flex-shrink: 0;
flex-wrap: wrap;
}
.error-log[b-6af1ohmtt0] {
background: #1f2937;
color: #fca5a5;
padding: 1rem;
border-radius: 6px;
font-size: 0.8rem;
max-height: 320px;
overflow-y: auto;
margin: 0;
}
/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
.purge-page[b-6af1ohmtt0] { padding: 12px 16px; }
.page-toolbar[b-6af1ohmtt0] { padding: 10px 12px; }
.filter-actions[b-6af1ohmtt0] { justify-content: stretch; flex-direction: column; }
.filter-actions .btn-action[b-6af1ohmtt0] { justify-content: center; }
}
/* /Components/Pages/Admin/ThemeManagementPage.razor.rz.scp.css */
.theme-mgmt-page[b-e5dbkjnpgb] {
padding: 0;
}
/* Header */
.theme-mgmt-header[b-e5dbkjnpgb] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 24px;
flex-wrap: wrap;
gap: 16px;
}
.theme-mgmt-title[b-e5dbkjnpgb] {
font-size: 1.5rem;
font-weight: 700;
color: #1F2937;
margin: 0;
}
.theme-mgmt-subtitle[b-e5dbkjnpgb] {
font-size: 13px;
color: #64748B;
margin: 4px 0 0;
max-width: 640px;
}
.theme-mgmt-stat-row[b-e5dbkjnpgb] {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 14px;
}
.stat-chip[b-e5dbkjnpgb] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: #F8FAFC;
border: 1px solid #E2E8F0;
border-radius: 10px;
font-size: 13px;
}
.stat-chip i[b-e5dbkjnpgb] { color: var(--brand-500); font-size: 14px; }
.stat-chip-info i[b-e5dbkjnpgb] { color: #2563EB; }
.stat-chip-success i[b-e5dbkjnpgb] { color: #059669; }
.stat-chip-value[b-e5dbkjnpgb] { font-weight: 700; color: #1F2937; }
.stat-chip-label[b-e5dbkjnpgb] { color: #64748B; font-weight: 500; }
.btn-add-theme[b-e5dbkjnpgb] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 20px;
background: var(--brand-600, #004980);
color: white;
border: none;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
white-space: nowrap;
height: fit-content;
}
.btn-add-theme:hover[b-e5dbkjnpgb] { background: var(--brand-700, #003760); }
/* Sections */
.theme-mgmt-section[b-e5dbkjnpgb] {
margin-bottom: 32px;
}
.theme-mgmt-section-header[b-e5dbkjnpgb] {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
}
.theme-mgmt-section-header i[b-e5dbkjnpgb] { color: var(--brand-500); font-size: 16px; }
.theme-mgmt-section-header h2[b-e5dbkjnpgb] { font-size: 16px; font-weight: 700; color: #1F2937; margin: 0; }
.count-pill[b-e5dbkjnpgb] {
background: #F1F5F9;
color: #64748B;
border-radius: 999px;
padding: 2px 10px;
font-size: 11.5px;
font-weight: 600;
}
.theme-grid[b-e5dbkjnpgb] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 16px;
}
/* Loading & empty */
.theme-mgmt-loading[b-e5dbkjnpgb] {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 60px 0;
color: #64748B;
}
.theme-mgmt-empty[b-e5dbkjnpgb] {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 48px 0;
text-align: center;
background: #F8FAFC;
border: 1.5px dashed #E2E8F0;
border-radius: 12px;
}
.theme-mgmt-empty i[b-e5dbkjnpgb] { font-size: 40px; color: #CBD5E1; }
.theme-mgmt-empty h3[b-e5dbkjnpgb] { font-size: 15px; color: #475569; margin: 0; }
.theme-mgmt-empty p[b-e5dbkjnpgb] { font-size: 13px; color: #94A3B8; margin: 0; max-width: 420px; }
/* Live preview mockup — duplicated from ThemeMgmtCard.razor.css because Blazor CSS isolation
scopes styles per-component and the create/edit modal's preview lives on this page instead. */
.theme-card-preview[b-e5dbkjnpgb] {
position: relative;
height: 72px;
padding: 12px 14px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 7px;
border-radius: 10px;
}
.mock-line[b-e5dbkjnpgb] { height: 7px; width: 75%; border-radius: 4px; }
.mock-line-active[b-e5dbkjnpgb] { width: 90%; }
.mock-dot[b-e5dbkjnpgb] {
position: absolute;
top: 10px;
right: 12px;
width: 9px;
height: 9px;
border-radius: 50%;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}
.theme-modal-preview[b-e5dbkjnpgb] { margin-top: 4px; }
.theme-live-preview-hint[b-e5dbkjnpgb] {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--brand-500, #005b9f);
margin: -6px 0 0;
}
/* Create/Edit modal */
.modal-overlay[b-e5dbkjnpgb] {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 1050;
padding: 1.5rem;
}
.theme-modal[b-e5dbkjnpgb] {
background: white;
border-radius: 16px;
box-shadow: 0 24px 64px rgba(15, 23, 42, 0.25);
width: 100%;
max-width: 460px;
max-height: 90vh;
overflow: hidden;
display: flex;
flex-direction: column;
animation: theme-modal-pop-in-b-e5dbkjnpgb 0.2s ease;
}
@keyframes theme-modal-pop-in-b-e5dbkjnpgb {
from { opacity: 0; transform: scale(0.96); }
to { opacity: 1; transform: scale(1); }
}
.theme-modal-header[b-e5dbkjnpgb] {
display: flex;
align-items: center;
gap: 0.9rem;
padding: 1.25rem 1.5rem 1rem;
background: #fff;
border-bottom: 1px solid #EEF2F6;
}
.theme-modal-header h3[b-e5dbkjnpgb] { flex: 1; margin: 0; font-size: 1.05rem; font-weight: 700; color: #0F172A; }
.modal-close[b-e5dbkjnpgb] {
flex-shrink: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
border-radius: 8px;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
color: #94A3B8;
transition: all 0.15s;
}
.modal-close:hover[b-e5dbkjnpgb] { background: #F1F5F9; color: #0F172A; }
.theme-modal-body[b-e5dbkjnpgb] {
padding: 1.15rem 1.5rem;
display: flex;
flex-direction: column;
gap: 16px;
overflow-y: auto;
}
.theme-modal-footer[b-e5dbkjnpgb] {
display: flex;
justify-content: flex-end;
gap: 0.6rem;
padding: 1rem 1.5rem;
border-top: 1px solid #EEF2F6;
background: #FAFBFC;
}
.theme-custom-field[b-e5dbkjnpgb] { display: flex; flex-direction: column; gap: 5px; }
.theme-custom-field label[b-e5dbkjnpgb] { font-size: 12px; font-weight: 600; color: #64748B; }
.theme-custom-field input[type="text"][b-e5dbkjnpgb] {
border: 1px solid #E2E8F0;
border-radius: 10px;
padding: 8px 12px;
font-size: 13px;
}
.theme-custom-field input[type="text"]:focus[b-e5dbkjnpgb] {
outline: none;
border-color: var(--brand-400);
box-shadow: 0 0 0 3px rgba(0, 91, 159, 0.1);
}
.theme-custom-field input[type="color"][b-e5dbkjnpgb] {
width: 44px;
height: 32px;
border: 1.5px solid #E2E8F0;
border-radius: 8px;
padding: 2px;
cursor: pointer;
}
.theme-custom-colors[b-e5dbkjnpgb] { display: grid; grid-template-columns: repeat(4, auto); gap: 14px; }
.theme-custom-error[b-e5dbkjnpgb] { color: #DC2626; font-size: 13px; background: #FEF2F2; border-radius: 8px; padding: 8px 12px; }
/* Delete confirmation uses the global swal-style confirm-modal classes (modal-theme.css). */
.theme-mgmt-affected-list[b-e5dbkjnpgb] {
text-align: left;
font-size: 13px;
color: #475569;
background: #F8FAFC;
border-radius: 8px;
padding: 12px 12px 12px 28px;
margin: 0 0 20px;
}
/* btn-confirm-* below are still used by the create/edit modal footer. */
.btn-confirm-cancel[b-e5dbkjnpgb] {
padding: 0.55rem 1.15rem;
background: transparent;
color: #64748B;
border: 1px solid #E2E8F0;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}
.btn-confirm-cancel:hover[b-e5dbkjnpgb] { background: #F1F5F9; color: #0F172A; }
.btn-confirm-action[b-e5dbkjnpgb] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0.55rem 1.15rem;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
color: white;
cursor: pointer;
transition: all 0.15s;
background: var(--brand-600, #004980);
}
.btn-confirm-action:hover[b-e5dbkjnpgb] { background: var(--brand-700, #003760); }
.btn-confirm-action:disabled[b-e5dbkjnpgb],
.btn-confirm-cancel:disabled[b-e5dbkjnpgb] { opacity: 0.6; cursor: not-allowed; }
.btn-confirm-danger[b-e5dbkjnpgb] { background: var(--error-600, #DC2626); }
.btn-confirm-danger:hover[b-e5dbkjnpgb] { background: var(--error-700, #B91C1C); }
/* Responsive */
@media (max-width: 768px) {
.theme-mgmt-header[b-e5dbkjnpgb] { flex-direction: column; align-items: stretch; }
.theme-grid[b-e5dbkjnpgb] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Admin/ThemeMgmtCard.razor.rz.scp.css */
.theme-card[b-ddjl8jw9td] {
background: white;
border: 1.5px solid #E2E8F0;
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: all 0.2s;
}
.theme-card:hover[b-ddjl8jw9td] {
border-color: var(--brand-400);
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
transform: translateY(-2px);
}
/* Mini sidebar preview mockup */
.theme-card-preview[b-ddjl8jw9td] {
position: relative;
height: 72px;
padding: 12px 14px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 7px;
}
.mock-line[b-ddjl8jw9td] {
height: 7px;
width: 75%;
border-radius: 4px;
}
.mock-line-active[b-ddjl8jw9td] {
width: 90%;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.mock-dot[b-ddjl8jw9td] {
position: absolute;
top: 10px;
right: 12px;
width: 9px;
height: 9px;
border-radius: 50%;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}
.theme-card-body[b-ddjl8jw9td] {
padding: 14px;
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.theme-card-title-row[b-ddjl8jw9td] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.theme-card-title-row h3[b-ddjl8jw9td] {
font-size: 15px;
font-weight: 700;
color: #1F2937;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.theme-status[b-ddjl8jw9td] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
.theme-status-active[b-ddjl8jw9td] { background: #ECFDF5; color: #059669; }
.theme-status-retired[b-ddjl8jw9td] { background: #F1F5F9; color: #64748B; }
.theme-card-owner[b-ddjl8jw9td] {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
color: #64748B;
background: #F8FAFC;
border-radius: 8px;
padding: 6px 10px;
width: fit-content;
}
.theme-card-owner i[b-ddjl8jw9td] { color: #94A3B8; }
.theme-card-stats[b-ddjl8jw9td] {
display: flex;
gap: 16px;
padding: 8px 12px;
background: #F8FAFC;
border-radius: 8px;
}
.org-stat[b-ddjl8jw9td] {
display: flex;
align-items: center;
gap: 5px;
font-size: 12.5px;
}
.org-stat i[b-ddjl8jw9td] { color: #94A3B8; font-size: 13px; }
.org-stat-value[b-ddjl8jw9td] { font-weight: 700; color: #1F2937; }
.org-stat-label[b-ddjl8jw9td] { color: #94A3B8; }
.theme-card-usage-names[b-ddjl8jw9td] {
font-size: 11.5px;
color: #94A3B8;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.theme-card-actions[b-ddjl8jw9td] {
display: flex;
gap: 8px;
padding: 10px 14px;
border-top: 1px solid #F1F5F9;
}
.btn-card-action[b-ddjl8jw9td] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: 1px solid #E2E8F0;
border-radius: 7px;
background: white;
color: #64748B;
cursor: pointer;
font-size: 14px;
transition: all 0.2s;
}
.btn-card-action:hover[b-ddjl8jw9td] { background: #F1F5F9; color: #1F2937; border-color: #CBD5E1; }
.btn-card-danger:hover[b-ddjl8jw9td] { background: #FEF2F2; color: #DC2626; border-color: #FECACA; }
/* /Components/Pages/Admin/UserDetailPage.razor.rz.scp.css */
/* ========================================
User Detail Page Styles
======================================== */
/* ========================================
Animations
======================================== */
@keyframes fadeIn-b-m8ea8sj4ud {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeInUp-b-m8ea8sj4ud {
from {
opacity: 0;
transform: translateY(15px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInDown-b-m8ea8sj4ud {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes scaleIn-b-m8ea8sj4ud {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes slideInLeft-b-m8ea8sj4ud {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes pulse-b-m8ea8sj4ud {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
/* Loading & Error States */
.loading-container[b-m8ea8sj4ud],
.error-container[b-m8ea8sj4ud] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 400px;
gap: 1rem;
padding: 2rem;
text-align: center;
animation: fadeIn-b-m8ea8sj4ud 0.3s ease-out;
}
.loading-container p[b-m8ea8sj4ud] {
color: #64748b;
font-size: 0.9375rem;
animation: pulse-b-m8ea8sj4ud 1.5s ease-in-out infinite;
}
.error-container .error-icon[b-m8ea8sj4ud] {
width: 80px;
height: 80px;
border-radius: 50%;
background: #fef2f2;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.5rem;
}
.error-container .error-icon i[b-m8ea8sj4ud] {
font-size: 2.5rem;
color: #ef4444;
}
.error-container h2[b-m8ea8sj4ud] {
font-size: 1.5rem;
font-weight: 600;
color: #0f172a;
margin: 0;
}
.error-container p[b-m8ea8sj4ud] {
color: #64748b;
margin: 0 0 1.5rem 0;
}
/* Skeleton loading state */
@keyframes admin-user-skel-pulse-b-m8ea8sj4ud {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.skel-block[b-m8ea8sj4ud] {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: admin-user-skel-pulse-b-m8ea8sj4ud 1.5s ease-in-out infinite;
border-radius: 4px;
}
.user-skeleton[b-m8ea8sj4ud] {
padding: 1rem;
}
.skel-user-header[b-m8ea8sj4ud] {
background: #fff;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
padding: 1.5rem;
margin-bottom: 1.5rem;
border: 1px solid rgba(15, 23, 42, 0.1);
}
.skel-back-row[b-m8ea8sj4ud] {
margin-bottom: 1.25rem;
}
.skel-header-content[b-m8ea8sj4ud] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.5rem;
}
.skel-header-left[b-m8ea8sj4ud] {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.skel-avatar[b-m8ea8sj4ud] {
width: 56px;
height: 56px;
border-radius: 50%;
flex-shrink: 0;
}
.skel-title-section[b-m8ea8sj4ud] {
flex: 1;
}
.skel-action-btn[b-m8ea8sj4ud] {
width: 100px;
height: 36px;
border-radius: 8px;
}
.skel-stats-row[b-m8ea8sj4ud] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-bottom: 1.25rem;
}
.skel-stat-card[b-m8ea8sj4ud] {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
border: 1px solid #e9ecef;
border-radius: 8px;
}
.skel-stat-icon[b-m8ea8sj4ud] {
width: 40px;
height: 40px;
border-radius: 8px;
flex-shrink: 0;
}
.skel-stat-content[b-m8ea8sj4ud] {
display: flex;
flex-direction: column;
}
.skel-tabs-row[b-m8ea8sj4ud] {
display: flex;
gap: 0.5rem;
border-bottom: 1px solid #e9ecef;
padding-bottom: 0.75rem;
margin-bottom: 1.5rem;
}
.skel-overview-grid[b-m8ea8sj4ud] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.skel-detail-card[b-m8ea8sj4ud] {
background: #fff;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
padding: 1.5rem;
border: 1px solid rgba(15, 23, 42, 0.1);
}
@media (max-width: 767.98px) {
.skel-stats-row[b-m8ea8sj4ud] {
grid-template-columns: 1fr;
}
.skel-overview-grid[b-m8ea8sj4ud] {
grid-template-columns: 1fr;
}
.skel-header-content[b-m8ea8sj4ud] {
flex-direction: column;
}
}
/* Header */
.user-detail-header[b-m8ea8sj4ud] {
background: white;
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 1.5rem;
border: 1px solid rgba(15, 23, 42, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
animation: fadeInDown-b-m8ea8sj4ud 0.4s ease-out;
}
.header-nav[b-m8ea8sj4ud] {
margin-bottom: 1rem;
}
.back-link[b-m8ea8sj4ud] {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
color: #64748b;
text-decoration: none;
transition: all 0.2s ease;
}
.back-link:hover[b-m8ea8sj4ud] {
color: var(--brand-500);
transform: translateX(-3px);
}
.back-link i[b-m8ea8sj4ud] {
font-size: 1rem;
}
.header-content[b-m8ea8sj4ud] {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.header-left[b-m8ea8sj4ud] {
display: flex;
flex-direction: row;
align-items: center;
gap: 1rem;
flex: 1;
min-width: 0;
}
.user-avatar-lg[b-m8ea8sj4ud] {
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, #10B981, #059669);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
animation: scaleIn-b-m8ea8sj4ud 0.4s ease-out;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.user-avatar-lg:hover[b-m8ea8sj4ud] {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
.user-avatar-lg img[b-m8ea8sj4ud] {
width: 100%;
height: 100%;
object-fit: cover;
}
.user-avatar-lg span[b-m8ea8sj4ud] {
font-size: 1.125rem;
font-weight: 600;
color: white;
}
.user-title-section[b-m8ea8sj4ud] {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
min-width: 0;
flex: 1;
}
.user-name-row[b-m8ea8sj4ud] {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.user-name-row h1[b-m8ea8sj4ud] {
font-size: 1.25rem;
font-weight: 700;
color: #1F2937;
margin: 0;
white-space: nowrap;
}
.user-meta[b-m8ea8sj4ud] {
display: flex;
flex-direction: row;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.meta-item[b-m8ea8sj4ud] {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.8125rem;
color: #64748b;
}
.meta-item i[b-m8ea8sj4ud] {
font-size: 0.8125rem;
color: #94a3b8;
}
/* Header Actions */
.header-actions[b-m8ea8sj4ud] {
display: flex;
gap: 0.75rem;
flex-shrink: 0;
}
.btn-secondary[b-m8ea8sj4ud] {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: white;
border: 1px solid #E5E7EB;
border-radius: 8px;
font-size: 0.875rem;
font-weight: 500;
color: #374151;
cursor: pointer;
transition: all 0.15s;
}
.btn-secondary:hover:not(:disabled)[b-m8ea8sj4ud] {
background: #F9FAFB;
border-color: #D1D5DB;
}
.btn-secondary:disabled[b-m8ea8sj4ud] {
opacity: 0.6;
cursor: not-allowed;
}
.btn-primary[b-m8ea8sj4ud] {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: var(--brand-500);
border: 1px solid var(--brand-500);
border-radius: 8px;
font-size: 0.875rem;
font-weight: 500;
color: white;
cursor: pointer;
transition: all 0.15s;
}
.btn-primary:hover[b-m8ea8sj4ud] {
background: #004a82;
border-color: #004a82;
}
/* Custom Actions Menu */
.actions-menu-container[b-m8ea8sj4ud] {
position: relative;
}
.actions-menu-backdrop[b-m8ea8sj4ud] {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
}
.actions-menu[b-m8ea8sj4ud] {
position: absolute;
top: calc(100% + 4px);
right: 0;
min-width: 260px;
background: white;
border: 1px solid #e5e7eb;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
z-index: 1000;
padding: 0.5rem 0;
animation: menuSlideIn-b-m8ea8sj4ud 0.15s ease-out;
}
@keyframes menuSlideIn-b-m8ea8sj4ud {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.actions-menu-item[b-m8ea8sj4ud] {
display: flex;
align-items: center;
gap: 0.75rem;
width: 100%;
padding: 0.625rem 1rem;
background: transparent;
border: none;
font-size: 0.875rem;
font-weight: 500;
color: #374151;
cursor: pointer;
transition: all 0.15s ease;
text-align: left;
white-space: nowrap;
}
.actions-menu-item:hover:not(:disabled)[b-m8ea8sj4ud] {
background: rgba(15, 23, 42, 0.05);
color: var(--brand-500);
}
.actions-menu-item:hover:not(:disabled) i[b-m8ea8sj4ud] {
color: var(--brand-500);
}
.actions-menu-item:disabled[b-m8ea8sj4ud] {
opacity: 0.5;
cursor: not-allowed;
}
.actions-menu-item i[b-m8ea8sj4ud] {
font-size: 1rem;
color: #6b7280;
width: 1.25rem;
text-align: center;
}
.actions-menu-item.text-danger[b-m8ea8sj4ud] {
color: var(--error-600);
}
.actions-menu-item.text-danger:hover:not(:disabled)[b-m8ea8sj4ud] {
background: rgba(220, 38, 38, 0.06);
color: var(--error-600);
}
.actions-menu-item.text-danger i[b-m8ea8sj4ud],
.actions-menu-item.text-danger:hover:not(:disabled) i[b-m8ea8sj4ud] {
color: var(--error-600);
}
.actions-menu-item.text-success[b-m8ea8sj4ud] {
color: var(--success-600);
}
.actions-menu-item.text-success:hover:not(:disabled)[b-m8ea8sj4ud] {
background: rgba(22, 163, 74, 0.06);
color: var(--success-600);
}
.actions-menu-item.text-success i[b-m8ea8sj4ud],
.actions-menu-item.text-success:hover:not(:disabled) i[b-m8ea8sj4ud] {
color: var(--success-600);
}
.actions-menu-item.text-warning[b-m8ea8sj4ud] {
color: #d97706;
}
.actions-menu-item.text-warning:hover:not(:disabled)[b-m8ea8sj4ud] {
background: rgba(217, 119, 6, 0.06);
color: #d97706;
}
.actions-menu-item.text-warning i[b-m8ea8sj4ud],
.actions-menu-item.text-warning:hover:not(:disabled) i[b-m8ea8sj4ud] {
color: #d97706;
}
.actions-menu-divider[b-m8ea8sj4ud] {
height: 1px;
background: #e5e7eb;
margin: 0.375rem 0;
}
/* Legacy Actions Dropdown (keeping for compatibility) */
.actions-dropdown[b-m8ea8sj4ud] {
min-width: 220px;
padding: 0.5rem 0;
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 10px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.05);
background: white;
animation: dropdownFadeIn-b-m8ea8sj4ud 0.15s ease-out;
}
@keyframes dropdownFadeIn-b-m8ea8sj4ud {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.actions-dropdown .dropdown-item[b-m8ea8sj4ud] {
display: flex;
align-items: center;
padding: 0.625rem 1rem;
font-size: 0.875rem;
font-weight: 500;
color: #374151;
border: none;
background: transparent;
width: 100%;
text-align: left;
cursor: pointer;
transition: all 0.15s ease;
}
.actions-dropdown .dropdown-item:hover:not(:disabled)[b-m8ea8sj4ud] {
background: rgba(15, 23, 42, 0.05);
color: var(--brand-500);
}
.actions-dropdown .dropdown-item:hover:not(:disabled) i[b-m8ea8sj4ud] {
color: var(--brand-500);
}
.actions-dropdown .dropdown-item i[b-m8ea8sj4ud] {
font-size: 1rem;
color: #6B7280;
transition: color 0.15s ease;
}
.actions-dropdown .dropdown-item.text-danger[b-m8ea8sj4ud] {
color: var(--error-600);
}
.actions-dropdown .dropdown-item.text-danger:hover:not(:disabled)[b-m8ea8sj4ud] {
background: rgba(220, 38, 38, 0.06);
color: var(--error-600);
}
.actions-dropdown .dropdown-item.text-danger i[b-m8ea8sj4ud],
.actions-dropdown .dropdown-item.text-danger:hover i[b-m8ea8sj4ud] {
color: var(--error-600);
}
.actions-dropdown .dropdown-item.text-success[b-m8ea8sj4ud] {
color: var(--success-600);
}
.actions-dropdown .dropdown-item.text-success:hover:not(:disabled)[b-m8ea8sj4ud] {
background: rgba(22, 163, 74, 0.06);
color: var(--success-600);
}
.actions-dropdown .dropdown-item.text-success i[b-m8ea8sj4ud],
.actions-dropdown .dropdown-item.text-success:hover i[b-m8ea8sj4ud] {
color: var(--success-600);
}
.actions-dropdown .dropdown-item.text-warning[b-m8ea8sj4ud] {
color: #d97706;
}
.actions-dropdown .dropdown-item.text-warning:hover:not(:disabled)[b-m8ea8sj4ud] {
background: rgba(217, 119, 6, 0.06);
color: #d97706;
}
.actions-dropdown .dropdown-item.text-warning i[b-m8ea8sj4ud],
.actions-dropdown .dropdown-item.text-warning:hover i[b-m8ea8sj4ud] {
color: #d97706;
}
.actions-dropdown .dropdown-item:disabled[b-m8ea8sj4ud] {
opacity: 0.5;
cursor: not-allowed;
}
.actions-dropdown .dropdown-divider[b-m8ea8sj4ud] {
margin: 0.5rem 0;
border-top: 1px solid #E5E7EB;
}
/* Role Selector */
.role-selector[b-m8ea8sj4ud] {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.role-option[b-m8ea8sj4ud] {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
background: #F9FAFB;
border: 1px solid #E5E7EB;
border-radius: 8px;
cursor: pointer;
transition: all 0.15s ease;
}
.role-option:hover[b-m8ea8sj4ud] {
background: #F3F4F6;
border-color: #D1D5DB;
}
.role-option.selected[b-m8ea8sj4ud] {
background: rgba(15, 23, 42, 0.05);
border-color: var(--brand-500);
}
.role-option .role-icon[b-m8ea8sj4ud] {
width: 36px;
height: 36px;
border-radius: 8px;
background: rgba(15, 23, 42, 0.08);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.role-option .role-icon i[b-m8ea8sj4ud] {
font-size: 1rem;
color: var(--brand-500);
}
.role-option .role-details[b-m8ea8sj4ud] {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.role-option .role-name[b-m8ea8sj4ud] {
font-size: 0.875rem;
font-weight: 600;
color: #1F2937;
}
.role-option .role-description[b-m8ea8sj4ud] {
font-size: 0.75rem;
color: #6B7280;
}
.role-option .role-check[b-m8ea8sj4ud] {
width: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.current-role-display[b-m8ea8sj4ud] {
padding: 0.5rem;
background: #F9FAFB;
border-radius: 6px;
}
/* Stats Row */
.stats-row[b-m8ea8sj4ud] {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.stat-card[b-m8ea8sj4ud] {
display: flex;
align-items: center;
gap: 0.75rem;
background: #F9FAFB;
border: 1px solid #E5E7EB;
border-radius: 8px;
padding: 0.75rem 1rem;
min-width: 140px;
}
.stat-card .stat-icon[b-m8ea8sj4ud] {
width: 40px;
height: 40px;
border-radius: 8px;
background: rgba(15, 23, 42, 0.08);
display: flex;
align-items: center;
justify-content: center;
}
.stat-card .stat-icon i[b-m8ea8sj4ud] {
font-size: 1.125rem;
color: var(--brand-500);
}
.stat-card .stat-content[b-m8ea8sj4ud] {
display: flex;
flex-direction: column;
}
.stat-card .stat-value[b-m8ea8sj4ud] {
font-size: 1.125rem;
font-weight: 700;
color: #1F2937;
line-height: 1.2;
}
.stat-card .stat-label[b-m8ea8sj4ud] {
font-size: 0.75rem;
color: #6B7280;
}
/* Tabs */
.user-tabs[b-m8ea8sj4ud] {
display: flex;
gap: 0;
background: white;
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 10px;
padding: 4px;
margin-bottom: 1.5rem;
}
.user-tab[b-m8ea8sj4ud] {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1rem;
background: transparent;
border: none;
border-radius: 6px;
font-size: 0.875rem;
font-weight: 500;
color: #6B7280;
cursor: pointer;
transition: all 0.15s;
}
.user-tab:hover[b-m8ea8sj4ud] {
color: #374151;
background: #F9FAFB;
}
.user-tab.active[b-m8ea8sj4ud] {
color: var(--brand-500);
background: rgba(15, 23, 42, 0.08);
}
.tab-badge[b-m8ea8sj4ud] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
background: #E5E7EB;
border-radius: 10px;
font-size: 0.7rem;
font-weight: 600;
color: #6B7280;
}
.user-tab.active .tab-badge[b-m8ea8sj4ud] {
background: var(--brand-500);
color: white;
}
/* Content Area */
.user-content[b-m8ea8sj4ud] {
margin-top: 1.5rem;
}
/* Overview Grid */
.overview-grid[b-m8ea8sj4ud] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
/* Detail Card */
.detail-card[b-m8ea8sj4ud] {
background: white;
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 10px;
overflow: hidden;
}
.detail-card.full-width[b-m8ea8sj4ud] {
grid-column: 1 / -1;
}
.detail-card .card-header[b-m8ea8sj4ud] {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 1.25rem;
background: #F9FAFB;
border-bottom: 1px solid #E5E7EB;
}
.detail-card .card-header i[b-m8ea8sj4ud] {
font-size: 1rem;
color: var(--brand-500);
}
.detail-card .card-header h3[b-m8ea8sj4ud] {
font-size: 0.9375rem;
font-weight: 600;
color: #1F2937;
margin: 0;
flex: 1;
}
.detail-card .card-body[b-m8ea8sj4ud] {
padding: 1.25rem;
}
.btn-edit[b-m8ea8sj4ud] {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid #E5E7EB;
border-radius: 6px;
color: #6B7280;
cursor: pointer;
transition: all 0.15s;
}
.btn-edit:hover[b-m8ea8sj4ud] {
background: white;
border-color: var(--brand-500);
color: var(--brand-500);
}
/* Detail Grid */
.detail-grid[b-m8ea8sj4ud] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.detail-item[b-m8ea8sj4ud] {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.detail-item.full-width[b-m8ea8sj4ud] {
grid-column: 1 / -1;
}
.detail-label[b-m8ea8sj4ud] {
font-size: 0.75rem;
font-weight: 600;
color: #6B7280;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.detail-value[b-m8ea8sj4ud] {
font-size: 0.9375rem;
color: #1F2937;
}
.detail-value code[b-m8ea8sj4ud] {
font-size: 0.8rem;
padding: 2px 6px;
background: #F3F4F6;
border-radius: 4px;
color: #6B7280;
}
.notes-text[b-m8ea8sj4ud] {
margin: 0;
white-space: pre-wrap;
color: #374151;
}
/* Status Badges */
.status-badge[b-m8ea8sj4ud] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
}
.status-badge i[b-m8ea8sj4ud] {
font-size: 0.7rem;
}
.status-active[b-m8ea8sj4ud] {
background: rgba(16, 185, 129, 0.1);
color: #059669;
}
.status-inactive[b-m8ea8sj4ud] {
background: rgba(107, 114, 128, 0.1);
color: #6B7280;
}
/* Role Badges */
.role-badge[b-m8ea8sj4ud] {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
}
.role-admin[b-m8ea8sj4ud] {
background: rgba(139, 92, 246, 0.1);
color: #7C3AED;
}
.role-banksuperuser[b-m8ea8sj4ud] {
background: rgba(59, 130, 246, 0.1);
color: #2563EB;
}
.role-bankuser[b-m8ea8sj4ud] {
background: rgba(20, 184, 166, 0.1);
color: #0D9488;
}
.role-agent[b-m8ea8sj4ud] {
background: rgba(249, 115, 22, 0.1);
color: #EA580C;
}
.role-underwriter[b-m8ea8sj4ud] {
background: rgba(99, 102, 241, 0.1);
color: #4F46E5;
}
.role-other[b-m8ea8sj4ud], .role-none[b-m8ea8sj4ud] {
background: rgba(107, 114, 128, 0.1);
color: #6B7280;
}
/* Security Content */
.security-content[b-m8ea8sj4ud] {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.empty-sessions[b-m8ea8sj4ud],
.empty-activity[b-m8ea8sj4ud] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 3rem;
text-align: center;
}
.empty-sessions i[b-m8ea8sj4ud],
.empty-activity i[b-m8ea8sj4ud] {
font-size: 2.5rem;
color: #D1D5DB;
margin-bottom: 0.5rem;
}
.empty-sessions p[b-m8ea8sj4ud],
.empty-activity p[b-m8ea8sj4ud] {
color: #6B7280;
margin: 0;
}
.current-session-badge[b-m8ea8sj4ud] {
display: inline-flex;
align-items: center;
margin-left: 0.5rem;
padding: 2px 8px;
background: rgba(16, 185, 129, 0.1);
border-radius: 10px;
font-size: 0.7rem;
font-weight: 600;
color: #059669;
}
/* Activity Timeline */
.activity-timeline[b-m8ea8sj4ud] {
padding: 1rem 1.25rem;
}
.timeline-item[b-m8ea8sj4ud] {
display: flex;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid #F1F5F9;
}
.timeline-item:last-child[b-m8ea8sj4ud] {
border-bottom: none;
}
.timeline-marker[b-m8ea8sj4ud] {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.timeline-marker.activity-success[b-m8ea8sj4ud] {
background: rgba(16, 185, 129, 0.1);
color: #059669;
}
.timeline-marker.activity-warning[b-m8ea8sj4ud] {
background: rgba(245, 158, 11, 0.1);
color: #D97706;
}
.timeline-marker.activity-error[b-m8ea8sj4ud] {
background: rgba(239, 68, 68, 0.1);
color: var(--error-600);
}
.timeline-marker.activity-info[b-m8ea8sj4ud] {
background: rgba(59, 130, 246, 0.1);
color: #2563EB;
}
.timeline-content[b-m8ea8sj4ud] {
flex: 1;
min-width: 0;
}
.timeline-header[b-m8ea8sj4ud] {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.25rem;
}
.timeline-time[b-m8ea8sj4ud] {
font-size: 0.8rem;
color: #6B7280;
}
.timeline-description[b-m8ea8sj4ud] {
margin: 0;
font-size: 0.9375rem;
color: #374151;
}
/* Activity Badges */
.activity-badge[b-m8ea8sj4ud] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 50px;
padding: 4px 8px;
border-radius: 4px;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.05em;
}
.activity-success[b-m8ea8sj4ud] {
background: rgba(16, 185, 129, 0.1);
color: #059669;
}
.activity-warning[b-m8ea8sj4ud] {
background: rgba(245, 158, 11, 0.1);
color: #D97706;
}
.activity-error[b-m8ea8sj4ud] {
background: rgba(239, 68, 68, 0.1);
color: var(--error-600);
}
.activity-info[b-m8ea8sj4ud] {
background: rgba(59, 130, 246, 0.1);
color: #2563EB;
}
.activity-default[b-m8ea8sj4ud] {
background: rgba(107, 114, 128, 0.1);
color: #6B7280;
}
/* Activity Details */
.activity-details[b-m8ea8sj4ud] {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
margin-top: 0.5rem;
padding: 0.75rem;
background: #F8FAFC;
border-radius: 6px;
border-left: 3px solid #E2E8F0;
}
.activity-details .detail-item[b-m8ea8sj4ud] {
display: flex;
align-items: center;
gap: 0.375rem;
font-size: 0.8125rem;
color: #4B5563;
}
.activity-details .detail-item i[b-m8ea8sj4ud] {
font-size: 0.875rem;
}
.activity-details .detail-item code[b-m8ea8sj4ud] {
font-size: 0.75rem;
padding: 0.125rem 0.375rem;
background: #E2E8F0;
border-radius: 3px;
color: #334155;
}
.activity-details .detail-item strong[b-m8ea8sj4ud] {
font-weight: 600;
color: #1F2937;
}
/* Timeline Error State */
.timeline-item.timeline-error[b-m8ea8sj4ud] {
background: rgba(239, 68, 68, 0.03);
border-left: 3px solid #EF4444;
margin-left: -1.25rem;
padding-left: 1.25rem;
}
.timeline-item.timeline-error .timeline-description[b-m8ea8sj4ud] {
color: #991B1B;
}
/* ========================================
Activity Log Filters
======================================== */
.activity-filters[b-m8ea8sj4ud] {
padding: 0.75rem 1.25rem;
border-bottom: 1px solid #F1F5F9;
background: #F8FAFC;
}
.filter-row[b-m8ea8sj4ud] {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 0.75rem;
}
.filter-field[b-m8ea8sj4ud] {
display: flex;
flex-direction: column;
gap: 0.25rem;
min-width: 0;
}
.filter-field.filter-action[b-m8ea8sj4ud] { flex: 1 1 200px; }
.filter-field.filter-date[b-m8ea8sj4ud] { flex: 1 1 160px; }
.filter-field.filter-custom-start[b-m8ea8sj4ud] { flex: 1 1 150px; }
.filter-field.filter-custom-end[b-m8ea8sj4ud] { flex: 1 1 150px; }
.filter-field.filter-actions[b-m8ea8sj4ud] { flex: 0 0 auto; }
.filter-label[b-m8ea8sj4ud] {
font-size: 0.75rem;
font-weight: 600;
color: #64748B;
text-transform: uppercase;
letter-spacing: 0.03em;
}
/* ========================================
Compact Collapsible Log List
======================================== */
.activity-list[b-m8ea8sj4ud] {
padding: 0.25rem 0;
}
.log-row[b-m8ea8sj4ud] {
border-bottom: 1px solid #F1F5F9;
}
.log-row:last-child[b-m8ea8sj4ud] {
border-bottom: none;
}
.log-row.log-row-error[b-m8ea8sj4ud] {
background: rgba(239, 68, 68, 0.03);
}
.log-summary[b-m8ea8sj4ud] {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.625rem 1.25rem;
cursor: default;
transition: background 0.15s ease;
}
.log-summary-clickable[b-m8ea8sj4ud] {
cursor: pointer;
}
.log-summary-clickable:hover[b-m8ea8sj4ud] {
background: #F8FAFC;
}
.log-marker[b-m8ea8sj4ud] {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 0.875rem;
}
.log-marker.activity-success[b-m8ea8sj4ud] {
background: rgba(16, 185, 129, 0.1);
color: #059669;
}
.log-marker.activity-warning[b-m8ea8sj4ud] {
background: rgba(245, 158, 11, 0.1);
color: #D97706;
}
.log-marker.activity-error[b-m8ea8sj4ud] {
background: rgba(239, 68, 68, 0.1);
color: var(--error-600);
}
.log-marker.activity-info[b-m8ea8sj4ud] {
background: rgba(59, 130, 246, 0.1);
color: #2563EB;
}
.log-summary-main[b-m8ea8sj4ud] {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.log-summary-top[b-m8ea8sj4ud] {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.log-action-name[b-m8ea8sj4ud] {
font-size: 0.875rem;
font-weight: 600;
color: #1F2937;
}
.log-failed-tag[b-m8ea8sj4ud] {
display: inline-flex;
align-items: center;
font-size: 0.7rem;
font-weight: 600;
color: var(--error-600);
}
.log-summary-desc[b-m8ea8sj4ud] {
font-size: 0.8125rem;
color: #4B5563;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.log-summary-meta[b-m8ea8sj4ud] {
display: flex;
align-items: center;
gap: 0.75rem;
flex-shrink: 0;
margin-left: auto;
}
.log-time[b-m8ea8sj4ud] {
font-size: 0.75rem;
color: #6B7280;
white-space: nowrap;
}
.log-actor[b-m8ea8sj4ud] {
font-size: 0.75rem;
color: #6B7280;
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.log-expand-cue[b-m8ea8sj4ud] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 4px;
color: #94A3B8;
flex-shrink: 0;
}
.log-summary-clickable:hover .log-expand-cue[b-m8ea8sj4ud] {
color: var(--brand-500);
}
/* Expanded detail panel */
.log-details[b-m8ea8sj4ud] {
padding: 0 1.25rem 0.75rem 3.5rem;
animation: fadeIn-b-m8ea8sj4ud 0.2s ease-out;
}
.log-details .activity-details[b-m8ea8sj4ud] {
margin-top: 0;
}
/* Responsive */
@media (max-width: 768px) {
.filter-row[b-m8ea8sj4ud] {
flex-direction: column;
align-items: stretch;
}
.filter-field.filter-action[b-m8ea8sj4ud],
.filter-field.filter-date[b-m8ea8sj4ud],
.filter-field.filter-custom-start[b-m8ea8sj4ud],
.filter-field.filter-custom-end[b-m8ea8sj4ud] {
flex: 1 1 100%;
}
.log-summary[b-m8ea8sj4ud] {
flex-wrap: wrap;
padding: 0.625rem 0.875rem;
}
.log-summary-meta[b-m8ea8sj4ud] {
width: 100%;
margin-left: 2.75rem;
justify-content: flex-start;
}
.log-details[b-m8ea8sj4ud] {
padding: 0 0.875rem 0.75rem 2.75rem;
}
}
/* Responsive */
@media (max-width: 992px) {
.overview-grid[b-m8ea8sj4ud] {
grid-template-columns: 1fr;
}
.header-actions[b-m8ea8sj4ud] {
flex-shrink: 0;
}
}
@media (max-width: 768px) {
.header-content[b-m8ea8sj4ud] {
flex-direction: column;
align-items: flex-start;
}
.header-left[b-m8ea8sj4ud] {
width: 100%;
}
.header-actions[b-m8ea8sj4ud] {
width: 100%;
justify-content: flex-start;
}
.user-name-row[b-m8ea8sj4ud] {
flex-direction: column;
align-items: flex-start;
}
.stats-row[b-m8ea8sj4ud] {
flex-direction: column;
}
.stat-card[b-m8ea8sj4ud] {
width: 100%;
}
.detail-grid[b-m8ea8sj4ud] {
grid-template-columns: 1fr;
}
.user-tabs[b-m8ea8sj4ud] {
flex-wrap: wrap;
}
}
/* ========================================
Modal footer buttons — ghost cancel +
brand confirm per the canonical modal
theme (wwwroot/css/modal-theme.css).
======================================== */
.modal-footer .btn-secondary[b-m8ea8sj4ud] {
background: transparent;
border: 1px solid #E2E8F0;
border-radius: 10px;
color: #64748B;
font-weight: 600;
padding: 0.55rem 1.15rem;
}
.modal-footer .btn-secondary:hover:not(:disabled)[b-m8ea8sj4ud] {
background: #F1F5F9;
border-color: #E2E8F0;
color: #0F172A;
}
.modal-footer .btn-primary[b-m8ea8sj4ud] {
background: var(--brand-600, #004980);
border-color: var(--brand-600, #004980);
border-radius: 10px;
font-weight: 600;
padding: 0.55rem 1.15rem;
}
.modal-footer .btn-primary:hover[b-m8ea8sj4ud] {
background: var(--brand-700, #003760);
border-color: var(--brand-700, #003760);
}
/* User Info Banner */
.user-info-banner[b-m8ea8sj4ud] {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
background: linear-gradient(135deg, rgba(15, 23, 42, 0.08) 0%, rgba(15, 23, 42, 0.04) 100%);
border-radius: 8px;
border: 1px solid rgba(15, 23, 42, 0.1);
}
.user-avatar-sm[b-m8ea8sj4ud] {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(15, 23, 42, 0.12);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
}
.user-avatar-sm img[b-m8ea8sj4ud] {
width: 100%;
height: 100%;
object-fit: cover;
}
.user-avatar-sm span[b-m8ea8sj4ud] {
font-size: 0.875rem;
font-weight: 600;
color: var(--brand-500);
}
.user-info-text[b-m8ea8sj4ud] {
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.user-info-text .user-name[b-m8ea8sj4ud] {
font-weight: 600;
color: #1f2937;
font-size: 0.9375rem;
}
.user-info-text .user-email[b-m8ea8sj4ud] {
font-size: 0.8125rem;
color: #6b7280;
}
/* Password Input Section */
.password-section[b-m8ea8sj4ud] {
margin-bottom: 1rem;
}
.password-input-wrapper .input-group .form-control[b-m8ea8sj4ud] {
border-right: none;
}
.password-input-wrapper .input-group .btn[b-m8ea8sj4ud] {
border-color: #d1d5db;
}
.password-input-wrapper .input-group .btn:hover[b-m8ea8sj4ud] {
background-color: #f9fafb;
}
.password-input-wrapper .input-group .btn-outline-primary:hover[b-m8ea8sj4ud] {
background-color: rgba(15, 23, 42, 0.08);
color: var(--brand-500);
border-color: var(--brand-500);
}
/* Password Strength Bar */
.password-strength-container[b-m8ea8sj4ud] {
display: flex;
align-items: center;
gap: 0.75rem;
}
.password-strength-bar[b-m8ea8sj4ud] {
flex: 1;
height: 4px;
background: #e5e7eb;
border-radius: 2px;
overflow: hidden;
}
.password-strength-fill[b-m8ea8sj4ud] {
height: 100%;
border-radius: 2px;
transition: width 0.3s ease, background-color 0.3s ease;
}
.password-strength-text[b-m8ea8sj4ud] {
font-size: 0.75rem;
font-weight: 600;
min-width: 70px;
text-align: right;
}
/* Password Requirements */
.password-requirements[b-m8ea8sj4ud] {
background: #f9fafb;
border-radius: 8px;
padding: 0.875rem 1rem;
border: 1px solid #e5e7eb;
}
.requirements-title[b-m8ea8sj4ud] {
display: block;
font-size: 0.8125rem;
font-weight: 600;
color: #374151;
margin-bottom: 0.625rem;
}
.requirements-grid[b-m8ea8sj4ud] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
}
.requirement-item[b-m8ea8sj4ud] {
display: flex;
align-items: center;
gap: 0.375rem;
font-size: 0.8125rem;
color: #9ca3af;
transition: color 0.2s ease;
}
.requirement-item i[b-m8ea8sj4ud] {
font-size: 0.875rem;
transition: color 0.2s ease;
}
.requirement-item.met[b-m8ea8sj4ud] {
color: #059669;
}
.requirement-item.met i[b-m8ea8sj4ud] {
color: #059669;
}
/* Email Option Card */
.email-option-card[b-m8ea8sj4ud] {
background: #fefefe;
border-radius: 8px;
padding: 0.75rem 1rem;
border: 1px solid #e5e7eb;
}
.email-option-card .form-check-label[b-m8ea8sj4ud] {
font-weight: 500;
color: #374151;
}
/* Security Notice */
.security-notice[b-m8ea8sj4ud] {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 0.875rem;
background: rgba(245, 158, 11, 0.08);
border-radius: 6px;
border: 1px solid rgba(245, 158, 11, 0.2);
font-size: 0.8125rem;
color: #92400e;
}
.security-notice i[b-m8ea8sj4ud] {
color: #d97706;
font-size: 1rem;
}
/* Modal Responsive */
@media (max-width: 576px) {
.requirements-grid[b-m8ea8sj4ud] {
grid-template-columns: 1fr;
}
.password-strength-container[b-m8ea8sj4ud] {
flex-direction: column;
align-items: stretch;
gap: 0.375rem;
}
.password-strength-text[b-m8ea8sj4ud] {
text-align: left;
}
}
/* /Components/Pages/Admin/UserManagementPage.razor.rz.scp.css */
/* ========================================
User Management Page Styles - Admin
Based on WorkspacePage patterns
======================================== */
/* ========================================
Animations
======================================== */
@keyframes fadeInDown-b-pa1dam7370 {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp-b-pa1dam7370 {
from { opacity: 0; transform: translateY(15px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn-b-pa1dam7370 {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes spin-b-pa1dam7370 {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.bi-arrow-clockwise.spinning[b-pa1dam7370] {
animation: spin-b-pa1dam7370 1s linear infinite;
}
/* ========================================
Header
======================================== */
.content-header[b-pa1dam7370] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
animation: fadeInDown-b-pa1dam7370 0.4s ease-out;
}
.content-title[b-pa1dam7370] {
font-size: 1.5rem;
font-weight: 700;
color: #1F2937;
margin: 0;
line-height: 1.2;
}
.content-subtitle[b-pa1dam7370] {
font-size: 0.875rem;
color: #6B7280;
margin: 4px 0 0 0;
}
/* Header Stats Pills */
.header-stats[b-pa1dam7370] {
display: flex;
align-items: center;
gap: 10px;
}
.stat-pill[b-pa1dam7370] {
display: flex;
align-items: center;
gap: 8px;
background: white;
border: 1px solid #E5E7EB;
border-radius: 8px;
padding: 8px 14px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.stat-pill i[b-pa1dam7370] {
font-size: 1rem;
color: var(--brand-500);
}
.stat-pill.stat-success i[b-pa1dam7370] {
color: #10B981;
}
.stat-pill.stat-warning i[b-pa1dam7370] {
color: #F59E0B;
}
.stat-pill .stat-value[b-pa1dam7370] {
font-size: 1.125rem;
font-weight: 700;
color: #1F2937;
}
.stat-pill .stat-label[b-pa1dam7370] {
font-size: 0.65rem;
font-weight: 600;
color: #6B7280;
text-transform: uppercase;
letter-spacing: 0.03em;
}
/* ========================================
Card & Tab Panel
======================================== */
.card.card-with-tabs[b-pa1dam7370] {
background: white;
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 12px;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
animation: fadeInUp-b-pa1dam7370 0.4s ease-out;
position: relative;
}
.dashboard-tab-panel.is-hidden[b-pa1dam7370] {
position: absolute;
left: -10000px;
top: 0;
width: 1px;
height: 1px;
overflow: hidden;
visibility: hidden;
}
.dashboard-tab-panel.is-active[b-pa1dam7370] {
position: relative;
left: auto;
width: auto;
height: auto;
visibility: visible;
animation: fadeIn-b-pa1dam7370 0.25s ease-out;
}
/* Tab Content */
.tab-content[b-pa1dam7370] {
padding: 0;
}
.tab-header[b-pa1dam7370] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
border-bottom: 1px solid #F1F5F9;
gap: 16px;
flex-wrap: wrap;
position: relative;
z-index: 10;
}
.tab-title[b-pa1dam7370] {
font-size: 1rem;
font-weight: 600;
color: #1F2937;
margin: 0;
}
.tab-subtitle[b-pa1dam7370] {
font-size: 0.8rem;
color: #6B7280;
margin: 2px 0 0 0;
}
.tab-actions[b-pa1dam7370] {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
/* ========================================
Section Titles
======================================== */
.section-title[b-pa1dam7370] {
font-size: 0.9rem;
font-weight: 600;
color: #374151;
display: flex;
align-items: center;
}
.section-title i[b-pa1dam7370] {
color: #6B7280;
}
.section-subtitle[b-pa1dam7370] {
font-size: 0.8rem;
color: #6B7280;
}
/* ========================================
Pending Users Card Grid
======================================== */
.pending-user-card[b-pa1dam7370] {
background: white;
border: 1px solid #E5E7EB;
border-radius: 12px;
padding: 20px 20px 0;
text-align: center;
transition: all 0.2s ease;
position: relative;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.pending-user-card:hover[b-pa1dam7370] {
border-color: var(--brand-500);
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
/* Tenant Request Card variant */
.pending-user-card.tenant-request-card[b-pa1dam7370] {
border-color: #BFDBFE;
background: linear-gradient(to bottom, #F0F9FF 0%, white 100%);
}
.pending-user-card.tenant-request-card:hover[b-pa1dam7370] {
border-color: #3B82F6;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}
.card-header-section[b-pa1dam7370] {
position: relative;
display: flex;
justify-content: center;
margin-bottom: 16px;
}
.user-avatar-lg[b-pa1dam7370] {
width: 72px;
height: 72px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 600;
color: white;
}
/* Avatar color variants for large avatars */
.user-avatar-lg.avatar-blue[b-pa1dam7370] {
background: linear-gradient(135deg, #3B82F6, #1D4ED8);
}
.user-avatar-lg.avatar-green[b-pa1dam7370] {
background: linear-gradient(135deg, #10B981, #047857);
}
.user-avatar-lg.avatar-orange[b-pa1dam7370] {
background: linear-gradient(135deg, #F59E0B, #D97706);
}
.user-avatar-lg.avatar-purple[b-pa1dam7370] {
background: linear-gradient(135deg, #8B5CF6, #6D28D9);
}
.user-avatar-lg.avatar-teal[b-pa1dam7370] {
background: linear-gradient(135deg, #14B8A6, #0D9488);
}
.user-avatar-lg.avatar-default[b-pa1dam7370] {
background: linear-gradient(135deg, #6B7280, #4B5563);
}
.status-indicator[b-pa1dam7370] {
position: absolute;
bottom: 0;
right: calc(50% - 40px);
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid white;
}
.status-indicator.status-verified[b-pa1dam7370] {
background: #10B981;
}
.status-indicator.status-pending[b-pa1dam7370] {
background: #F59E0B;
}
.status-indicator.status-info[b-pa1dam7370] {
background: #3B82F6;
}
.card-body-section[b-pa1dam7370] {
margin-bottom: 20px;
}
.user-card-name[b-pa1dam7370] {
font-size: 1.1rem;
font-weight: 600;
color: #1F2937;
margin: 0 0 4px 0;
}
.user-card-title[b-pa1dam7370] {
font-size: 0.85rem;
color: #6B7280;
margin: 0 0 8px 0;
}
.user-card-email[b-pa1dam7370] {
font-size: 0.8rem;
color: #9CA3AF;
margin: 0;
}
.card-stats-section[b-pa1dam7370] {
border-top: 1px solid #F1F5F9;
padding: 12px 0 0;
margin-top: auto;
}
.stat-item[b-pa1dam7370] {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 0 8px;
border-right: 1px solid #F1F5F9;
}
.stat-item.border-end-0[b-pa1dam7370] {
border-right: none;
}
.stat-value-sm[b-pa1dam7370] {
font-size: 0.8rem;
font-weight: 600;
color: #374151;
}
.stat-label-sm[b-pa1dam7370] {
font-size: 0.65rem;
color: #9CA3AF;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.badge-sm[b-pa1dam7370] {
padding: 3px 8px;
border-radius: 12px;
font-size: 0.7rem;
font-weight: 600;
}
.badge-verified[b-pa1dam7370] {
background: #D1FAE5;
color: #047857;
}
.badge-pending[b-pa1dam7370] {
background: #FEF3C7;
color: #D97706;
}
.badge-info[b-pa1dam7370] {
background: #DBEAFE;
color: #1D4ED8;
}
.request-reason[b-pa1dam7370] {
padding: 10px 12px;
background: #F9FAFB;
border-radius: 8px;
margin-bottom: 16px;
text-align: left;
}
.request-reason small[b-pa1dam7370] {
font-size: 0.8rem;
line-height: 1.4;
display: block;
}
.card-actions-section[b-pa1dam7370] {
display: flex;
gap: 8px;
padding: 12px 20px 16px;
margin: 12px -20px 0;
border-top: 1px solid #F1F5F9;
background: #FAFBFC;
}
.btn-card-approve[b-pa1dam7370] {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 7px 12px;
font-size: 0.78rem;
font-weight: 600;
font-family: inherit;
background: #ECFDF5;
border: 1px solid #A7F3D0;
border-radius: 6px;
color: #047857;
cursor: pointer;
transition: all 0.15s;
}
.btn-card-approve:hover[b-pa1dam7370] {
background: #10B981;
border-color: #10B981;
color: white;
}
.btn-card-reject[b-pa1dam7370] {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 7px 12px;
font-size: 0.78rem;
font-weight: 600;
font-family: inherit;
background: #FEF2F2;
border: 1px solid #FECACA;
border-radius: 6px;
color: var(--error-600);
cursor: pointer;
transition: all 0.15s;
}
.btn-card-reject:hover[b-pa1dam7370] {
background: #EF4444;
border-color: #EF4444;
color: white;
}
/* Empty State Container */
.empty-state-container[b-pa1dam7370] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
text-align: center;
}
.empty-state-container i[b-pa1dam7370] {
font-size: 48px;
color: #D1D5DB;
margin-bottom: 16px;
}
.empty-state-container h3[b-pa1dam7370] {
font-size: 1.1rem;
font-weight: 600;
color: #6B7280;
margin: 0 0 8px 0;
}
.empty-state-container p[b-pa1dam7370] {
font-size: 0.9rem;
color: #9CA3AF;
margin: 0;
}
/* ========================================
Active Filters Display
======================================== */
.active-filters[b-pa1dam7370] {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: #F9FAFB;
border-bottom: 1px solid #F1F5F9;
flex-wrap: wrap;
}
.active-filters-label[b-pa1dam7370] {
font-size: 0.75rem;
font-weight: 600;
color: #6B7280;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.filter-tag[b-pa1dam7370] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: #E0F2FE;
border: 1px solid #BAE6FD;
border-radius: 16px;
font-size: 0.75rem;
font-weight: 500;
color: #0369A1;
}
.filter-tag i[b-pa1dam7370] {
font-size: 0.7rem;
}
.filter-tag-remove[b-pa1dam7370] {
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
padding: 0;
background: transparent;
border: none;
border-radius: 50%;
color: #0369A1;
cursor: pointer;
transition: all 0.15s;
}
.filter-tag-remove:hover[b-pa1dam7370] {
background: #0369A1;
color: white;
}
.btn-clear-all[b-pa1dam7370] {
padding: 4px 10px;
font-size: 0.75rem;
font-weight: 500;
color: #6B7280;
background: white;
border: 1px solid #E5E7EB;
border-radius: 4px;
cursor: pointer;
transition: all 0.15s;
}
.btn-clear-all:hover[b-pa1dam7370] {
background: #F9FAFB;
color: #374151;
}
/* ========================================
Filter Toggle Button Group
======================================== */
.btn-filter-toggle[b-pa1dam7370] {
padding: 6px 12px;
font-size: 0.8rem;
font-weight: 500;
color: #6B7280;
background: white;
border: 1px solid #E5E7EB;
cursor: pointer;
transition: all 0.15s;
}
.btn-filter-toggle:first-child[b-pa1dam7370] {
border-radius: 6px 0 0 6px;
}
.btn-filter-toggle:last-child[b-pa1dam7370] {
border-radius: 0 6px 6px 0;
}
.btn-filter-toggle:not(:last-child)[b-pa1dam7370] {
border-right: none;
}
.btn-filter-toggle:hover:not(.active)[b-pa1dam7370] {
background: #F9FAFB;
color: #374151;
}
.btn-filter-toggle.active[b-pa1dam7370] {
background: var(--brand-500);
border-color: var(--brand-500);
color: white;
}
/* ========================================
Table Styles
======================================== */
.table-responsive[b-pa1dam7370] {
overflow-x: auto;
overflow-y: visible;
margin: 0;
max-width: 100%;
}
.dashboard-table[b-pa1dam7370] {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 0.875rem;
}
.dashboard-table thead[b-pa1dam7370] {
background-color: #F8FAFC;
position: sticky;
top: 0;
z-index: 1;
}
.dashboard-table thead th[b-pa1dam7370] {
padding: 10px 16px;
text-align: left;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #64748B;
border-bottom: 1px solid #E2E8F0;
white-space: nowrap;
user-select: none;
}
.dashboard-table thead th:hover[b-pa1dam7370] {
color: var(--brand-500);
background-color: #F1F5F9;
}
.dashboard-table tbody tr[b-pa1dam7370] {
transition: all 0.12s ease;
border-left: 3px solid transparent;
background: white;
animation: fadeIn-b-pa1dam7370 0.3s ease-out forwards;
opacity: 0;
}
/* Staggered row animations */
.dashboard-table tbody tr:nth-child(1)[b-pa1dam7370] { animation-delay: 50ms; }
.dashboard-table tbody tr:nth-child(2)[b-pa1dam7370] { animation-delay: 80ms; }
.dashboard-table tbody tr:nth-child(3)[b-pa1dam7370] { animation-delay: 110ms; }
.dashboard-table tbody tr:nth-child(4)[b-pa1dam7370] { animation-delay: 140ms; }
.dashboard-table tbody tr:nth-child(5)[b-pa1dam7370] { animation-delay: 170ms; }
.dashboard-table tbody tr:nth-child(6)[b-pa1dam7370] { animation-delay: 200ms; }
.dashboard-table tbody tr:nth-child(7)[b-pa1dam7370] { animation-delay: 230ms; }
.dashboard-table tbody tr:nth-child(8)[b-pa1dam7370] { animation-delay: 260ms; }
.dashboard-table tbody tr:nth-child(9)[b-pa1dam7370] { animation-delay: 290ms; }
.dashboard-table tbody tr:nth-child(10)[b-pa1dam7370] { animation-delay: 320ms; }
.dashboard-table tbody tr:nth-child(n+11)[b-pa1dam7370] { animation-delay: 350ms; }
.dashboard-table tbody tr:nth-child(even)[b-pa1dam7370] {
background-color: #FAFBFC;
}
.dashboard-table tbody tr:hover[b-pa1dam7370] {
background-color: #EFF6FF;
border-left: 3px solid var(--brand-500);
}
.dashboard-table tbody td[b-pa1dam7370] {
padding: 10px 16px;
border-bottom: 1px solid #F1F5F9;
vertical-align: middle;
color: #374151;
}
/* Empty State */
.empty-state[b-pa1dam7370] {
text-align: center;
padding: 48px 32px !important;
color: #6B7280;
}
.empty-state i[b-pa1dam7370] {
font-size: 40px;
display: block;
margin-bottom: 12px;
color: #D1D5DB;
}
.empty-state span[b-pa1dam7370] {
font-size: 0.9rem;
color: #9CA3AF;
}
/* ========================================
Date Cell
======================================== */
.date-cell[b-pa1dam7370] {
display: flex;
flex-direction: column;
gap: 2px;
}
.date-relative[b-pa1dam7370] {
font-size: 0.875rem;
color: #374151;
font-weight: 500;
}
.date-actual[b-pa1dam7370] {
font-size: 0.75rem;
color: #9CA3AF;
}
/* ========================================
User Cell
======================================== */
.user-cell[b-pa1dam7370] {
display: flex;
align-items: center;
gap: 12px;
}
.user-avatar[b-pa1dam7370] {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.user-avatar span[b-pa1dam7370] {
font-size: 0.8rem;
font-weight: 600;
color: white;
}
/* Avatar color variants */
.user-avatar.avatar-blue[b-pa1dam7370] {
background: linear-gradient(135deg, #3B82F6, #1D4ED8);
}
.user-avatar.avatar-green[b-pa1dam7370] {
background: linear-gradient(135deg, #10B981, #047857);
}
.user-avatar.avatar-orange[b-pa1dam7370] {
background: linear-gradient(135deg, #F59E0B, #D97706);
}
.user-avatar.avatar-purple[b-pa1dam7370] {
background: linear-gradient(135deg, #8B5CF6, #6D28D9);
}
.user-avatar.avatar-teal[b-pa1dam7370] {
background: linear-gradient(135deg, #14B8A6, #0D9488);
}
.user-avatar.avatar-default[b-pa1dam7370] {
background: linear-gradient(135deg, #6B7280, #4B5563);
}
.user-info[b-pa1dam7370] {
display: flex;
flex-direction: column;
min-width: 0;
}
.user-name[b-pa1dam7370] {
font-weight: 600;
color: #1F2937;
font-size: 0.875rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-title[b-pa1dam7370] {
font-size: 0.75rem;
color: #6B7280;
}
/* IP Address */
.ip-address[b-pa1dam7370] {
font-family: 'Fira Code', 'Consolas', monospace;
font-size: 0.75rem;
padding: 2px 6px;
background: #F3F4F6;
border-radius: 4px;
color: #4B5563;
}
/* ========================================
Status Badges
======================================== */
.dashboard-table .badge[b-pa1dam7370] {
padding: 5px 10px;
font-size: 0.75rem;
font-weight: 600;
border-radius: 20px;
display: inline-flex;
align-items: center;
gap: 4px;
}
.dashboard-table .badge i[b-pa1dam7370] {
font-size: 10px;
}
.badge.bg-danger[b-pa1dam7370] {
background-color: #FEE2E2 !important;
color: var(--error-600) !important;
}
.badge.bg-warning[b-pa1dam7370] {
background-color: #FEF3C7 !important;
color: #D97706 !important;
}
.badge.bg-secondary[b-pa1dam7370] {
background-color: #F3F4F6 !important;
color: #4B5563 !important;
}
.badge.bg-info[b-pa1dam7370] {
background-color: #E0F2FE !important;
color: #0369A1 !important;
}
.badge.bg-success[b-pa1dam7370] {
background-color: #D1FAE5 !important;
color: #047857 !important;
}
.badge.bg-primary[b-pa1dam7370] {
background-color: #DBEAFE !important;
color: #1D4ED8 !important;
}
/* Role Badges */
.badge.role-admin[b-pa1dam7370] {
background-color: #EDE9FE !important;
color: #6D28D9 !important;
}
.badge.role-banksuperuser[b-pa1dam7370] {
background-color: #DBEAFE !important;
color: #1D4ED8 !important;
}
.badge.role-bankuser[b-pa1dam7370] {
background-color: #CCFBF1 !important;
color: #0D9488 !important;
}
.badge.role-agent[b-pa1dam7370] {
background-color: #FFEDD5 !important;
color: #EA580C !important;
}
.badge.role-underwriter[b-pa1dam7370] {
background-color: #E0E7FF !important;
color: #4338CA !important;
}
.badge.role-none[b-pa1dam7370],
.badge.role-other[b-pa1dam7370] {
background-color: #F3F4F6 !important;
color: #6B7280 !important;
}
/* Activity Badges */
.badge.activity-success[b-pa1dam7370] {
background-color: #D1FAE5 !important;
color: #047857 !important;
}
.badge.activity-warning[b-pa1dam7370] {
background-color: #FEF3C7 !important;
color: #D97706 !important;
}
.badge.activity-error[b-pa1dam7370] {
background-color: #FEE2E2 !important;
color: var(--error-600) !important;
}
.badge.activity-info[b-pa1dam7370] {
background-color: #DBEAFE !important;
color: #1D4ED8 !important;
}
.badge.activity-default[b-pa1dam7370] {
background-color: #F3F4F6 !important;
color: #6B7280 !important;
}
/* ========================================
Action Buttons
======================================== */
.actions-cell[b-pa1dam7370] {
text-align: right;
}
.btn-header-action[b-pa1dam7370] {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
font-size: 16px;
color: #475569;
background: #ffffff;
border: 1px solid #E2E8F0;
border-radius: 8px;
cursor: pointer;
transition: all 0.15s ease;
}
.btn-header-action:hover:not(:disabled)[b-pa1dam7370] {
color: var(--brand-600);
background: #E6F2F8;
border-color: #99CBE3;
}
.btn-header-action:disabled[b-pa1dam7370] {
opacity: 0.5;
cursor: not-allowed;
}
.btn-action-primary[b-pa1dam7370] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
font-size: 0.8rem;
font-weight: 500;
color: white;
background-color: var(--brand-500);
border: 1px solid var(--brand-500);
border-radius: 6px;
cursor: pointer;
transition: all 0.15s ease;
}
.btn-action-primary:hover[b-pa1dam7370] {
background-color: #004880;
border-color: #004880;
}
.btn-action-primary i[b-pa1dam7370] {
font-size: 0.85rem;
}
.btn-action-subtle[b-pa1dam7370] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
font-size: 0.8rem;
font-weight: 500;
color: var(--brand-500);
background-color: white;
border: 1px solid #E5E7EB;
border-radius: 6px;
cursor: pointer;
transition: all 0.15s ease;
}
.btn-action-subtle:hover[b-pa1dam7370] {
background-color: #EFF6FF;
color: #004880;
border-color: #BFDBFE;
}
.btn-action-subtle i[b-pa1dam7370] {
font-size: 0.85rem;
}
/* Approve/Reject Buttons (icon only) */
.btn-approve[b-pa1dam7370] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
background: #D1FAE5;
border: 1px solid #A7F3D0;
border-radius: 6px;
color: #047857;
cursor: pointer;
transition: all 0.15s;
margin-right: 6px;
}
.btn-approve:hover[b-pa1dam7370] {
background: #10B981;
border-color: #10B981;
color: white;
}
.btn-reject[b-pa1dam7370] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
background: #FEE2E2;
border: 1px solid #FECACA;
border-radius: 6px;
color: var(--error-600);
cursor: pointer;
transition: all 0.15s;
}
.btn-reject:hover[b-pa1dam7370] {
background: #EF4444;
border-color: #EF4444;
color: white;
}
/* Approve/Reject Buttons with labels */
.btn-approve-label[b-pa1dam7370] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
font-size: 0.8rem;
font-weight: 500;
background: #D1FAE5;
border: 1px solid #A7F3D0;
border-radius: 6px;
color: #047857;
cursor: pointer;
transition: all 0.15s;
margin-right: 8px;
}
.btn-approve-label:hover[b-pa1dam7370] {
background: #10B981;
border-color: #10B981;
color: white;
}
.btn-approve-label i[b-pa1dam7370] {
font-size: 0.9rem;
}
.btn-reject-label[b-pa1dam7370] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
font-size: 0.8rem;
font-weight: 500;
background: #FEE2E2;
border: 1px solid #FECACA;
border-radius: 6px;
color: var(--error-600);
cursor: pointer;
transition: all 0.15s;
}
.btn-reject-label:hover[b-pa1dam7370] {
background: #EF4444;
border-color: #EF4444;
color: white;
}
.btn-reject-label i[b-pa1dam7370] {
font-size: 0.9rem;
}
/* Filter Button */
.btn-filter[b-pa1dam7370] {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
font-size: 0.8rem;
font-weight: 500;
color: #374151;
background: white;
border: 1px solid #E5E7EB;
border-radius: 8px;
cursor: pointer;
transition: all 0.15s;
}
.btn-filter:hover[b-pa1dam7370] {
background: #F9FAFB;
border-color: #D1D5DB;
}
.btn-filter i[b-pa1dam7370] {
font-size: 0.85rem;
color: #6B7280;
}
/* ========================================
Modal Styles — look comes from the global
wwwroot/css/modal-theme.css; only layout
helpers live here.
======================================== */
.modal-backdrop[b-pa1dam7370] {
z-index: 1040;
}
.modal[b-pa1dam7370] {
z-index: 1050;
}
.user-preview[b-pa1dam7370] {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: #F9FAFB;
border-radius: 8px;
}
.user-preview .user-avatar[b-pa1dam7370] {
width: 44px;
height: 44px;
}
.user-preview .user-avatar span[b-pa1dam7370] {
font-size: 0.9rem;
}
/* ========================================
Tab Badge Styles
======================================== */
[b-pa1dam7370] .tab-badge-warning {
background: #FEF3C7 !important;
color: #D97706 !important;
}
/* ========================================
Responsive
======================================== */
@media (max-width: 768px) {
.content-header[b-pa1dam7370] {
flex-direction: column;
gap: 16px;
align-items: flex-start;
}
.header-stats[b-pa1dam7370] {
width: 100%;
justify-content: flex-start;
overflow-x: auto;
padding-bottom: 4px;
}
.tab-header[b-pa1dam7370] {
flex-direction: column;
align-items: flex-start;
}
.tab-actions[b-pa1dam7370] {
width: 100%;
}
.active-filters[b-pa1dam7370] {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
}
/* ========================================
Modal dialog widths
======================================== */
.modal-dialog[b-pa1dam7370] {
max-width: 540px;
}
.modal-dialog.modal-lg[b-pa1dam7370] {
max-width: 800px;
}
/* Approval User Card */
.approval-user-card[b-pa1dam7370] {
display: flex;
align-items: center;
gap: 14px;
padding: 14px;
background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
border: 1px solid #BBF7D0;
border-radius: 12px;
margin-bottom: 16px;
}
.approval-user-card.rejection-card[b-pa1dam7370] {
background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
border-color: #FECACA;
}
.approval-user-card.tenant-access-card[b-pa1dam7370] {
background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
border-color: #93C5FD;
}
.request-reason-box[b-pa1dam7370] {
font-style: italic;
color: #4B5563;
background: #F8FAFC;
}
.approval-avatar[b-pa1dam7370] {
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
font-weight: 600;
color: white;
flex-shrink: 0;
}
/* Avatar color variants for approval modal */
.approval-avatar.avatar-blue[b-pa1dam7370] {
background: linear-gradient(135deg, #3B82F6, #1D4ED8);
}
.approval-avatar.avatar-green[b-pa1dam7370] {
background: linear-gradient(135deg, #10B981, #047857);
}
.approval-avatar.avatar-orange[b-pa1dam7370] {
background: linear-gradient(135deg, #F59E0B, #D97706);
}
.approval-avatar.avatar-purple[b-pa1dam7370] {
background: linear-gradient(135deg, #8B5CF6, #6D28D9);
}
.approval-avatar.avatar-teal[b-pa1dam7370] {
background: linear-gradient(135deg, #14B8A6, #0D9488);
}
.approval-avatar.avatar-default[b-pa1dam7370] {
background: linear-gradient(135deg, #6B7280, #4B5563);
}
.approval-user-info[b-pa1dam7370] {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.approval-user-name[b-pa1dam7370] {
font-size: 1rem;
font-weight: 600;
color: #1F2937;
margin: 0;
}
.approval-user-email[b-pa1dam7370] {
font-size: 0.85rem;
color: #6B7280;
}
.approval-user-title[b-pa1dam7370] {
font-size: 0.8rem;
color: #9CA3AF;
}
/* Modal Form Layout */
.modal-body .row[b-pa1dam7370] {
margin: 0 -10px;
}
.modal-body .row > [class*="col-"][b-pa1dam7370] {
padding: 0 10px;
}
/* Approval Sections */
.approval-section[b-pa1dam7370] {
margin-bottom: 16px;
}
.approval-label[b-pa1dam7370] {
display: block;
font-size: 0.75rem;
font-weight: 600;
color: #6B7280;
text-transform: uppercase;
letter-spacing: 0.03em;
margin-bottom: 6px;
}
.approval-value[b-pa1dam7370] {
font-size: 0.95rem;
font-weight: 500;
color: #1F2937;
padding: 10px 14px;
background: #F9FAFB;
border-radius: 8px;
border: 1px solid #E5E7EB;
}
/* Role Selector */
.role-selector[b-pa1dam7370] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
/* 5-role variant for admin - 2 columns, compact */
.role-selector.role-selector-5[b-pa1dam7370] {
grid-template-columns: repeat(2, 1fr);
}
/* Compact variant for add user modal - single column */
.role-selector.role-selector-compact[b-pa1dam7370] {
grid-template-columns: 1fr;
gap: 6px;
}
.role-selector.role-selector-compact .role-option[b-pa1dam7370] {
padding: 8px 10px;
}
.role-selector.role-selector-compact .role-icon[b-pa1dam7370] {
width: 28px;
height: 28px;
font-size: 0.8rem;
}
.role-selector.role-selector-compact .role-name[b-pa1dam7370] {
font-size: 0.75rem;
}
.role-selector.role-selector-compact .role-description[b-pa1dam7370] {
font-size: 0.6rem;
}
.role-option[b-pa1dam7370] {
display: flex;
align-items: center;
gap: 8px;
padding: 10px;
background: white;
border: 2px solid #E5E7EB;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
}
.role-option:hover[b-pa1dam7370] {
border-color: var(--brand-500);
background: #F8FAFC;
}
.role-option.selected[b-pa1dam7370] {
border-color: #10B981;
background: linear-gradient(135deg, #F0FDF4 0%, #ECFDF5 100%);
}
.role-icon[b-pa1dam7370] {
width: 32px;
height: 32px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
background: #F1F5F9;
color: #6B7280;
font-size: 0.9rem;
flex-shrink: 0;
}
.role-option.selected .role-icon[b-pa1dam7370] {
background: #D1FAE5;
color: #059669;
}
.role-details[b-pa1dam7370] {
display: flex;
flex-direction: column;
gap: 0;
flex: 1;
min-width: 0;
}
.role-name[b-pa1dam7370] {
font-size: 0.8rem;
font-weight: 600;
color: #1F2937;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.role-description[b-pa1dam7370] {
font-size: 0.65rem;
color: #9CA3AF;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.role-check[b-pa1dam7370] {
width: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
flex-shrink: 0;
}
/* Custom Textarea */
.custom-textarea[b-pa1dam7370] {
border: 2px solid #E5E7EB;
border-radius: 10px;
padding: 12px 14px;
font-size: 0.95rem;
transition: all 0.2s ease;
resize: vertical;
}
.custom-textarea:focus[b-pa1dam7370] {
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
outline: none;
}
/* Enhanced Bank Dropdown */
.bank-dropdown[b-pa1dam7370] {
width: 100%;
}
.bank-dropdown-toggle[b-pa1dam7370] {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
background: white;
border: 2px solid #E5E7EB;
border-radius: 10px;
font-size: 0.95rem;
cursor: pointer;
transition: all 0.2s ease;
}
.bank-dropdown-toggle:hover[b-pa1dam7370] {
border-color: var(--brand-500);
background: #F8FAFC;
}
.bank-dropdown-toggle:focus[b-pa1dam7370] {
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
outline: none;
}
.bank-dropdown-toggle.is-invalid[b-pa1dam7370] {
border-color: var(--error-600);
}
.bank-dropdown-toggle.has-selection[b-pa1dam7370] {
border-color: #10B981;
background: linear-gradient(135deg, #F0FDF4 0%, #ECFDF5 100%);
}
.bank-selected-item[b-pa1dam7370] {
display: flex;
align-items: center;
gap: 10px;
}
.bank-placeholder[b-pa1dam7370] {
color: #9CA3AF;
}
.bank-icon[b-pa1dam7370] {
width: 28px;
height: 28px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
background: #EFF6FF;
color: #3B82F6;
font-size: 0.85rem;
flex-shrink: 0;
}
.bank-dropdown-toggle.has-selection .bank-icon[b-pa1dam7370] {
background: #D1FAE5;
color: #059669;
}
.bank-name[b-pa1dam7370] {
font-weight: 500;
color: #1F2937;
}
.dropdown-arrow[b-pa1dam7370] {
color: #6B7280;
transition: transform 0.2s ease;
}
.bank-dropdown-toggle[aria-expanded="true"] .dropdown-arrow[b-pa1dam7370] {
transform: rotate(180deg);
}
.bank-dropdown-menu[b-pa1dam7370] {
width: 100%;
padding: 8px;
border: 1px solid #E5E7EB;
border-radius: 10px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
max-height: 250px;
overflow-y: auto;
}
.bank-dropdown-item[b-pa1dam7370] {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 8px;
transition: all 0.15s ease;
}
.bank-dropdown-item:hover[b-pa1dam7370] {
background: #F1F5F9;
}
.bank-dropdown-item.active[b-pa1dam7370] {
background: linear-gradient(135deg, #F0FDF4 0%, #ECFDF5 100%);
}
.bank-dropdown-item.active .bank-icon[b-pa1dam7370] {
background: #D1FAE5;
color: #059669;
}
.bank-check[b-pa1dam7370] {
margin-left: auto;
color: #10B981;
font-size: 1rem;
}
/* Custom Select */
.custom-select[b-pa1dam7370] {
border: 2px solid #E5E7EB;
border-radius: 10px;
padding: 10px 14px;
font-size: 0.95rem;
transition: all 0.2s ease;
}
.custom-select:focus[b-pa1dam7370] {
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
/* Role Info Cards */
.role-info-cards[b-pa1dam7370] {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px;
}
.role-info-card[b-pa1dam7370] {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: #F3F4F6;
border: 2px solid transparent;
border-radius: 8px;
font-size: 0.85rem;
color: #6B7280;
cursor: pointer;
transition: all 0.15s ease;
}
.role-info-card:hover[b-pa1dam7370] {
background: #E5E7EB;
color: #374151;
}
.role-info-card.active[b-pa1dam7370] {
background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
border-color: #10B981;
color: #059669;
}
.role-info-card i[b-pa1dam7370] {
font-size: 1rem;
}
/* Custom Textarea */
.custom-textarea[b-pa1dam7370] {
border: 2px solid #E5E7EB;
border-radius: 10px;
padding: 12px 14px;
font-size: 0.95rem;
transition: all 0.2s ease;
resize: vertical;
}
.custom-textarea:focus[b-pa1dam7370] {
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
outline: none;
}
/* Modal Buttons */
.btn-modal-cancel[b-pa1dam7370] {
padding: 0.55rem 1.15rem;
font-size: 0.85rem;
font-weight: 600;
background: transparent;
border: 1px solid #E2E8F0;
border-radius: 10px;
color: #64748B;
cursor: pointer;
transition: all 0.15s ease;
}
.btn-modal-cancel:hover[b-pa1dam7370] {
background: #F1F5F9;
color: #0F172A;
}
.btn-modal-approve[b-pa1dam7370] {
padding: 0.55rem 1.15rem;
font-size: 0.85rem;
font-weight: 600;
background: var(--success-600, #059669);
border: none;
border-radius: 10px;
color: white;
cursor: pointer;
transition: all 0.15s ease;
display: inline-flex;
align-items: center;
gap: 6px;
}
.btn-modal-approve:hover:not(:disabled)[b-pa1dam7370] {
background: var(--success-700, #047857);
}
.btn-modal-approve:disabled[b-pa1dam7370] {
opacity: 0.6;
cursor: not-allowed;
}
.btn-modal-reject[b-pa1dam7370] {
padding: 0.55rem 1.15rem;
font-size: 0.85rem;
font-weight: 600;
background: var(--error-600, #DC2626);
border: none;
border-radius: 10px;
color: white;
cursor: pointer;
transition: all 0.15s ease;
display: inline-flex;
align-items: center;
gap: 6px;
}
.btn-modal-reject:hover:not(:disabled)[b-pa1dam7370] {
background: var(--error-700, #B91C1C);
}
.btn-modal-reject:disabled[b-pa1dam7370] {
opacity: 0.6;
cursor: not-allowed;
}
/* ========================================
Filter Dropdowns - Themed Styles
======================================== */
.filter-dropdown[b-pa1dam7370] {
position: relative;
}
.filter-dropdown .btn-filter[b-pa1dam7370] {
display: flex;
align-items: center;
gap: 8px;
background: white;
border: 1px solid #E5E7EB;
border-radius: 8px;
padding: 8px 14px;
font-size: 0.8rem;
color: #374151;
font-weight: 500;
transition: all 0.2s;
white-space: nowrap;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.filter-dropdown .btn-filter:hover[b-pa1dam7370] {
background: #F9FAFB;
border-color: #D1D5DB;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
.filter-dropdown .btn-filter:focus[b-pa1dam7370] {
outline: none;
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.1);
}
.filter-dropdown .btn-filter i:first-child[b-pa1dam7370] {
color: #6B7280;
font-size: 0.85rem;
}
.filter-dropdown .dropdown-menu[b-pa1dam7370] {
min-width: 220px;
max-width: 280px;
padding: 8px 0;
border: 1px solid #E5E7EB;
border-radius: 12px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 10px 15px -3px rgba(0, 0, 0, 0.08),
0 20px 25px -5px rgba(0, 0, 0, 0.05);
background: white;
margin-top: 4px;
z-index: 1050;
overflow: hidden;
}
.filter-dropdown .dropdown-header[b-pa1dam7370] {
font-size: 0.7rem;
font-weight: 600;
color: #6B7280;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 8px 16px 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.filter-dropdown .dropdown-item[b-pa1dam7370] {
display: flex;
align-items: center;
padding: 10px 16px;
font-size: 0.8rem;
color: #374151;
border: none;
background: none;
width: 100%;
text-align: left;
cursor: pointer;
transition: background 0.15s;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.filter-dropdown .dropdown-item:hover[b-pa1dam7370] {
background: rgba(15, 23, 42, 0.05);
}
.filter-dropdown .dropdown-item.active[b-pa1dam7370] {
background: rgba(15, 23, 42, 0.08);
color: var(--brand-500);
font-weight: 600;
}
.filter-dropdown .dropdown-item i[b-pa1dam7370] {
font-size: 0.85rem;
}
.filter-dropdown .dropdown-divider[b-pa1dam7370] {
margin: 6px 12px;
border-color: #F3F4F6;
opacity: 1;
}
/* Thin scrollbar for bank filter dropdown */
.bank-filter-dropdown[b-pa1dam7370] {
scrollbar-width: thin;
scrollbar-color: #CBD5E1 transparent;
}
.bank-filter-dropdown[b-pa1dam7370]::-webkit-scrollbar {
width: 6px;
}
.bank-filter-dropdown[b-pa1dam7370]::-webkit-scrollbar-track {
background: transparent;
}
.bank-filter-dropdown[b-pa1dam7370]::-webkit-scrollbar-thumb {
background-color: #CBD5E1;
border-radius: 3px;
}
.bank-filter-dropdown[b-pa1dam7370]::-webkit-scrollbar-thumb:hover {
background-color: #94A3B8;
}
/* /Components/Pages/Admin/VERAcheckBackfillPage.razor.rz.scp.css */
/* Mirrors InvoiceBackfillPage.razor.css — scoped per-component, so the duplicate
class names don't collide. Keep these two in sync if either is restyled. */
.backfill-page[b-03czyx7o72] {
padding: 1.5rem;
max-width: 1100px;
margin: 0 auto;
}
.page-header[b-03czyx7o72] {
margin-bottom: 1.25rem;
}
.back-link[b-03czyx7o72] {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-bottom: 0.6rem;
text-decoration: none;
color: #475569;
font-size: 0.875rem;
}
.back-link:hover[b-03czyx7o72] { color: #2c5aa0; }
.page-header h1[b-03czyx7o72] {
margin: 0 0 0.25rem 0;
font-size: 1.6rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 0.5rem;
}
.page-header h1 i[b-03czyx7o72] { color: #2c5aa0; }
.state-block[b-03czyx7o72] {
padding: 2.5rem 1rem;
text-align: center;
color: #6b7280;
background: white;
border: 1px solid #e5e7eb;
border-radius: 10px;
}
/* ── Hero ─────────────────────────────────────────────────────────── */
.hero[b-03czyx7o72] {
display: flex;
align-items: center;
gap: 1.25rem;
padding: 1.5rem 1.75rem;
background: white;
border: 1px solid #e5e7eb;
border-radius: 10px;
margin-bottom: 0.85rem;
}
.hero-success[b-03czyx7o72] {
background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
border-color: #86efac;
}
.hero-success .hero-icon[b-03czyx7o72] { background: #dcfce7; color: #16a34a; }
.hero-warn[b-03czyx7o72] {
background: linear-gradient(135deg, #fffbeb, #fef3c7);
border-color: #fcd34d;
}
.hero-warn .hero-icon[b-03czyx7o72] { background: #fef3c7; color: #d97706; }
.hero-icon[b-03czyx7o72] {
width: 3.25rem;
height: 3.25rem;
border-radius: 12px;
display: grid;
place-items: center;
font-size: 1.6rem;
flex-shrink: 0;
}
.hero-body[b-03czyx7o72] { flex: 1; min-width: 0; }
.hero-headline[b-03czyx7o72] {
font-size: 1.15rem;
font-weight: 700;
color: #111827;
margin-bottom: 0.25rem;
display: flex;
align-items: baseline;
gap: 0.5rem;
flex-wrap: wrap;
}
.hero-count[b-03czyx7o72] {
font-size: 2rem;
color: #d97706;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.hero-success .hero-headline[b-03czyx7o72] { color: #14532d; }
.hero-subline[b-03czyx7o72] {
color: #475569;
font-size: 0.9rem;
}
.hero-actions[b-03czyx7o72] {
display: flex;
gap: 0.5rem;
flex-shrink: 0;
flex-wrap: wrap;
}
/* ── Run-confirm panel ────────────────────────────────────────────── */
.run-panel[b-03czyx7o72] {
background: white;
border: 1px solid #fcd34d;
border-radius: 10px;
margin-bottom: 0.85rem;
overflow: hidden;
animation: slideDown-b-03czyx7o72 150ms ease-out;
}
@keyframes slideDown-b-03czyx7o72 {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.run-panel-title[b-03czyx7o72] {
background: #fef3c7;
color: #6b4f0f;
padding: 0.6rem 1rem;
font-weight: 600;
font-size: 0.9rem;
display: flex;
align-items: center;
gap: 0.5rem;
border-bottom: 1px solid #fcd34d;
}
.run-panel-body[b-03czyx7o72] { padding: 0.85rem 1rem; }
.run-controls[b-03czyx7o72] {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
/* ── Buttons ──────────────────────────────────────────────────────── */
.btn-action[b-03czyx7o72] {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.85rem;
background: white;
border: 1px solid #d1d5db;
border-radius: 6px;
color: #374151;
font-size: 0.875rem;
font-weight: 500;
text-decoration: none;
cursor: pointer;
transition: border-color 120ms, color 120ms, background-color 120ms;
}
.btn-action:hover:not(:disabled)[b-03czyx7o72] {
border-color: #2c5aa0;
color: #2c5aa0;
}
.btn-action:disabled[b-03czyx7o72] {
opacity: 0.5;
cursor: not-allowed;
}
.btn-action-primary[b-03czyx7o72] {
background: #2c5aa0;
border-color: #2c5aa0;
color: white;
}
.btn-action-primary:hover:not(:disabled)[b-03czyx7o72] {
background: #244b87;
border-color: #244b87;
color: white;
}
.btn-action i[b-03czyx7o72] { font-size: 0.95rem; }
/* ── Detail grid ──────────────────────────────────────────────────── */
.detail-grid[b-03czyx7o72] {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 0.85rem;
margin-bottom: 0.85rem;
}
@media (max-width: 800px) {
.detail-grid[b-03czyx7o72] { grid-template-columns: 1fr; }
}
.card-section[b-03czyx7o72] {
background: white;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 1rem 1.25rem;
margin-bottom: 0.85rem;
}
.card-section h2[b-03czyx7o72] {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #2c5aa0;
font-weight: 700;
margin: 0 0 0.6rem 0;
}
.card-section h2 .small[b-03czyx7o72],
.card-section h2 .muted[b-03czyx7o72] {
font-weight: 500;
color: #94a3b8;
margin-left: 0.4rem;
text-transform: none;
letter-spacing: 0;
font-size: 0.7rem;
}
.card-section table[b-03czyx7o72] { margin-bottom: 0; }
.card-section thead th[b-03czyx7o72] {
background: #f8fafc;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #475569;
font-weight: 600;
}
.card-section ul[b-03czyx7o72] {
margin: 0;
padding-left: 1.25rem;
}
.card-section ul li[b-03czyx7o72] {
margin-bottom: 0.3rem;
}
.mono[b-03czyx7o72] { font-variant-numeric: tabular-nums; }
.muted[b-03czyx7o72] { color: #6b7280; }
.link-muted[b-03czyx7o72] {
color: #475569;
text-decoration: none;
font-weight: 500;
}
.link-muted:hover[b-03czyx7o72] { color: #2c5aa0; text-decoration: underline; }
/* ── Status badge (used in samples table) ─────────────────────────── */
.status-badge[b-03czyx7o72] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
}
.status-completed[b-03czyx7o72] { background: #dcfce7; color: #166534; }
.status-pending[b-03czyx7o72] { background: #f3f4f6; color: #6b7280; }
/* ── Post-run report ──────────────────────────────────────────────── */
.report-hero[b-03czyx7o72] {
display: flex;
align-items: center;
gap: 1.25rem;
padding: 1.5rem 1.75rem;
border-radius: 10px;
margin-bottom: 0.85rem;
}
.report-hero-success[b-03czyx7o72] {
background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
border: 1px solid #86efac;
}
.report-hero-success .report-icon[b-03czyx7o72] { background: #dcfce7; color: #16a34a; }
.report-hero-warn[b-03czyx7o72] {
background: linear-gradient(135deg, #fef2f2, #fee2e2);
border: 1px solid #fecaca;
}
.report-hero-warn .report-icon[b-03czyx7o72] { background: #fee2e2; color: #dc2626; }
.report-icon[b-03czyx7o72] {
width: 3.25rem;
height: 3.25rem;
border-radius: 12px;
display: grid;
place-items: center;
font-size: 1.6rem;
flex-shrink: 0;
}
.report-summary[b-03czyx7o72] { flex: 1; min-width: 0; }
.report-headline[b-03czyx7o72] {
font-size: 1.15rem;
font-weight: 700;
color: #111827;
margin-bottom: 0.2rem;
}
.report-subline[b-03czyx7o72] {
color: #475569;
font-size: 0.9rem;
font-variant-numeric: tabular-nums;
}
.report-subline strong[b-03czyx7o72] {
color: #111827;
font-weight: 700;
}
.report-actions[b-03czyx7o72] {
display: flex;
gap: 0.5rem;
flex-shrink: 0;
flex-wrap: wrap;
}
.error-log[b-03czyx7o72] {
background: #1f2937;
color: #fca5a5;
padding: 1rem;
border-radius: 6px;
font-size: 0.8rem;
max-height: 320px;
overflow-y: auto;
margin: 0;
}
/* /Components/Pages/Admin/WebhookDeliveriesPage.razor.rz.scp.css */
/* ========================================
Webhook Deliveries — admin viewer
======================================== */
.logs-page[b-qwatj1605q] { padding: 20px 24px; max-width: 1600px; margin: 0 auto; color: var(--text-primary, #111827); }
/* ─── Toolbar ─── */
.logs-toolbar[b-qwatj1605q] {
display: flex; justify-content: space-between; align-items: center; gap: 16px;
padding: 12px 16px; background: var(--surface, #fff);
border: 1px solid var(--neutral-200, #e5e7eb); border-radius: 12px;
margin-bottom: 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); flex-wrap: wrap;
}
.tb-left[b-qwatj1605q] { display: flex; align-items: center; gap: 12px; }
.tb-icon[b-qwatj1605q] {
width: 40px; height: 40px; border-radius: 10px;
background: linear-gradient(135deg, #0ea5e9, #6366f1);
color: #fff; display: flex; align-items: center; justify-content: center;
font-size: 19px; box-shadow: 0 4px 10px rgba(14, 165, 233, 0.3);
}
.tb-title[b-qwatj1605q] { font-size: 17px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.2; }
.tb-subtitle[b-qwatj1605q] { font-size: 12.5px; color: var(--text-muted, #6b7280); margin-top: 2px; }
.scope-pill[b-qwatj1605q] {
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: 8px;
padding: 2px 8px;
border-radius: 999px;
background: var(--brand-50, #eef2ff);
border: 1px solid var(--brand-100, #e0e7ff);
color: var(--brand-700, #4338ca);
font-size: 11.5px;
font-weight: 600;
text-decoration: none;
transition: background 0.15s, border-color 0.15s;
vertical-align: middle;
}
.scope-pill:hover[b-qwatj1605q] {
background: var(--brand-100, #e0e7ff);
border-color: var(--brand-300, #a5b4fc);
color: var(--brand-800, #3730a3);
}
.scope-pill .bi-x-lg[b-qwatj1605q] { font-size: 9px; opacity: 0.7; }
.tb-right[b-qwatj1605q] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.btn.spin i[b-qwatj1605q] { animation: spin-b-qwatj1605q 0.8s linear infinite; }
@keyframes spin-b-qwatj1605q { to { transform: rotate(360deg); } }
/* ─── Stat cards ─── */
.stat-grid[b-qwatj1605q] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.stat-card[b-qwatj1605q] {
display: flex; align-items: center; gap: 12px; background: var(--surface, #fff);
border: 1px solid var(--neutral-200, #e5e7eb); border-radius: 12px; padding: 14px 16px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.stat-card.is-error[b-qwatj1605q] { border-color: #fecaca; background: #fef2f2; }
.stat-card.is-warn[b-qwatj1605q] { border-color: #fde68a; background: #fffbeb; }
.stat-ico[b-qwatj1605q] { width: 38px; height: 38px; border-radius: 9px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.ico-blue[b-qwatj1605q] { background: #eef2ff; color: #4f46e5; }
.ico-green[b-qwatj1605q] { background: #dcfce7; color: #16a34a; }
.ico-red[b-qwatj1605q] { background: #fee2e2; color: #dc2626; }
.ico-amber[b-qwatj1605q] { background: #fef3c7; color: #d97706; }
.stat-val[b-qwatj1605q] { font-size: 22px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.1; }
.stat-lbl[b-qwatj1605q] { font-size: 11.5px; color: var(--text-muted, #6b7280); margin-top: 1px; }
/* ─── Filter bar ─── */
.filter-bar[b-qwatj1605q] {
display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; background: var(--surface, #fff);
border: 1px solid var(--neutral-200, #e5e7eb); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.f-field[b-qwatj1605q] { display: flex; flex-direction: column; gap: 4px; flex: 1 1 180px; min-width: 130px; }
.f-field.f-sm[b-qwatj1605q] { flex: 0 0 130px; }
.f-field label[b-qwatj1605q] { font-size: 11px; font-weight: 600; color: var(--text-muted, #6b7280); text-transform: uppercase; letter-spacing: 0.4px; }
.f-actions[b-qwatj1605q] { display: flex; align-items: center; gap: 4px; }
/* ─── Layout + table ─── */
.logs-layout[b-qwatj1605q] { display: grid; grid-template-columns: 1fr; gap: 16px; }
.logs-layout.with-detail[b-qwatj1605q] { grid-template-columns: minmax(0, 1.4fr) minmax(360px, 1fr); }
@media (max-width: 1100px) { .logs-layout.with-detail[b-qwatj1605q] { grid-template-columns: 1fr; } }
.logs-main[b-qwatj1605q] { background: var(--surface, #fff); border: 1px solid var(--neutral-200, #e5e7eb); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); }
.logs-table-wrap[b-qwatj1605q] { overflow-x: auto; }
.logs-table[b-qwatj1605q] { width: 100%; border-collapse: collapse; font-size: 13px; }
.logs-table thead th[b-qwatj1605q] {
text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px;
color: var(--text-muted, #6b7280); padding: 10px 14px; border-bottom: 1px solid var(--neutral-200, #e5e7eb);
background: var(--neutral-50, #f9fafb);
}
.logs-table tbody td[b-qwatj1605q] { padding: 9px 14px; border-bottom: 1px solid var(--neutral-100, #f3f4f6); vertical-align: middle; }
.logs-table tbody tr[b-qwatj1605q] { cursor: pointer; transition: background 0.1s; }
.logs-table tbody tr:hover[b-qwatj1605q] { background: var(--neutral-50, #f9fafb); }
.logs-table tbody tr.active[b-qwatj1605q] { background: #eef2ff; box-shadow: inset 3px 0 0 var(--brand-600, #4f46e5); }
.mono[b-qwatj1605q] { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.dim[b-qwatj1605q] { color: var(--text-muted, #6b7280); }
.nowrap[b-qwatj1605q] { white-space: nowrap; }
.ta-r[b-qwatj1605q] { text-align: right; }
.path[b-qwatj1605q] { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty[b-qwatj1605q] { text-align: center; color: var(--text-muted, #9ca3af); padding: 40px 0 !important; }
.empty i[b-qwatj1605q] { font-size: 26px; display: block; margin-bottom: 6px; opacity: 0.5; }
/* ─── Pills ─── */
.s-pill[b-qwatj1605q] { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px; padding: 2px 7px; border-radius: 5px; font-family: ui-monospace, Menlo, Consolas, monospace; }
.s-pill.s-ok[b-qwatj1605q] { background: #dcfce7; color: #15803d; }
.s-pill.s-warn[b-qwatj1605q] { background: #fef3c7; color: #b45309; }
.s-pill.s-danger[b-qwatj1605q] { background: #fee2e2; color: #b91c1c; }
.s-pill.s-muted[b-qwatj1605q] { background: #e5e7eb; color: #374151; }
/* ─── Detail drawer ─── */
.detail[b-qwatj1605q] {
background: var(--surface, #fff); border: 1px solid var(--neutral-200, #e5e7eb); border-radius: 12px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); align-self: start; position: sticky; top: 16px;
max-height: calc(100vh - 32px); display: flex; flex-direction: column; overflow: hidden;
}
.detail-head[b-qwatj1605q] { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--neutral-200, #e5e7eb); background: var(--neutral-50, #f9fafb); }
.detail-head .x[b-qwatj1605q] { border: 0; background: none; color: var(--text-muted, #6b7280); cursor: pointer; padding: 4px; border-radius: 6px; }
.detail-head .x:hover[b-qwatj1605q] { background: var(--neutral-200, #e5e7eb); }
.detail-body[b-qwatj1605q] { padding: 14px; overflow-y: auto; font-size: 13px; }
.kv[b-qwatj1605q] { display: grid; grid-template-columns: 96px 1fr; gap: 8px; padding: 4px 0; }
.kv > span:first-child[b-qwatj1605q] { color: var(--text-muted, #6b7280); font-size: 12px; }
.kv code[b-qwatj1605q] { background: var(--neutral-100, #f3f4f6); padding: 1px 5px; border-radius: 4px; font-size: 12px; word-break: break-all; }
.brk[b-qwatj1605q] { word-break: break-all; }
.body-head[b-qwatj1605q] { display: flex; justify-content: space-between; align-items: center; margin: 12px 0 4px; font-weight: 600; font-size: 12.5px; }
.body-head .copy[b-qwatj1605q] { border: 0; background: none; color: var(--text-muted, #6b7280); cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.body-head .copy:hover[b-qwatj1605q] { background: var(--neutral-100, #f3f4f6); color: var(--brand-600, #4f46e5); }
.code[b-qwatj1605q] { background: #0f172a; color: #e2e8f0; border-radius: 8px; padding: 10px 12px; margin: 0; font-size: 12px; line-height: 1.5; max-height: 220px; overflow: auto; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; }
.code.sm[b-qwatj1605q] { max-height: 120px; margin-top: 6px; }
/* ─── Attempt timeline ─── */
.timeline[b-qwatj1605q] { list-style: none; margin: 6px 0 0; padding: 0; }
.timeline li[b-qwatj1605q] { position: relative; padding: 8px 0 8px 18px; border-left: 2px solid var(--neutral-200, #e5e7eb); }
.timeline li[b-qwatj1605q]::before { content: ""; position: absolute; left: -6px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: #94a3b8; border: 2px solid #fff; }
.timeline li.ok[b-qwatj1605q]::before { background: #16a34a; }
.timeline li.bad[b-qwatj1605q]::before { background: #dc2626; }
.timeline li:last-child[b-qwatj1605q] { border-left-color: transparent; }
.t-row[b-qwatj1605q] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.t-num[b-qwatj1605q] { font-weight: 700; font-size: 12.5px; }
.t-when[b-qwatj1605q], .t-ms[b-qwatj1605q] { font-size: 11.5px; }
.t-err[b-qwatj1605q] { margin-top: 4px; color: #b91c1c; font-size: 12px; word-break: break-word; }
.resend-note[b-qwatj1605q] { margin: 0 0 10px; padding: 8px 10px; border-radius: 6px; background: #ecfdf5; color: #065f46; font-size: 12.5px; border: 1px solid #a7f3d0; }
.bi.spin[b-qwatj1605q] { animation: spin-b-qwatj1605q 0.8s linear infinite; }
@keyframes spin-b-qwatj1605q { to { transform: rotate(360deg); } }
/* /Components/Pages/Agent/AgentCustomReportsPage.razor.rz.scp.css */
/* Agent Custom Report Generator Page - Scoped Styles */
.custom-report-page[b-y8tqa6k7uj] {
padding: 24px;
max-width: 1200px;
margin: 0 auto;
}
/* Page Header */
.page-header[b-y8tqa6k7uj] {
margin-bottom: 32px;
}
.breadcrumb-nav[b-y8tqa6k7uj] {
margin-bottom: 16px;
}
.breadcrumb-link[b-y8tqa6k7uj] {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--brand-600);
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
transition: color 0.2s ease;
}
.breadcrumb-link:hover[b-y8tqa6k7uj] {
color: var(--brand-700);
}
.header-content[b-y8tqa6k7uj] {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
}
.page-title[b-y8tqa6k7uj] {
font-size: 1.75rem;
font-weight: 700;
color: var(--text-primary, #0F172A);
margin: 0;
display: flex;
align-items: center;
gap: 12px;
}
.page-title i[b-y8tqa6k7uj] {
color: var(--brand-600);
}
.page-subtitle[b-y8tqa6k7uj] {
font-size: 0.9375rem;
color: var(--text-muted, #64748B);
margin: 4px 0 0 0;
}
/* Report Builder */
.report-builder[b-y8tqa6k7uj] {
display: flex;
flex-direction: column;
gap: 24px;
}
.builder-section[b-y8tqa6k7uj] {
background: white;
border: 1px solid var(--border-light);
border-radius: 16px;
overflow: visible !important;
position: relative;
contain: none !important;
}
.section-header[b-y8tqa6k7uj] {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 20px 24px;
background: var(--neutral-50);
border-bottom: 1px solid var(--border-light);
border-radius: 16px 16px 0 0;
}
.section-number[b-y8tqa6k7uj] {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--brand-600);
color: white;
font-size: 0.875rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.section-title-group[b-y8tqa6k7uj] {
flex: 1;
}
.section-title[b-y8tqa6k7uj] {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary, #0F172A);
margin: 0;
}
.section-subtitle[b-y8tqa6k7uj] {
font-size: 0.8125rem;
color: var(--text-muted, #64748B);
margin: 2px 0 0 0;
}
.section-content[b-y8tqa6k7uj] {
padding: 24px;
overflow: visible !important;
position: relative;
contain: none !important;
}
/* Report Type Selection */
.report-type-grid[b-y8tqa6k7uj] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
@media (max-width: 992px) {
.report-type-grid[b-y8tqa6k7uj] {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.report-type-grid[b-y8tqa6k7uj] {
grid-template-columns: 1fr;
}
}
.report-type-card[b-y8tqa6k7uj] {
display: flex;
align-items: center;
gap: 16px;
padding: 20px;
background: var(--neutral-50);
border: 2px solid transparent;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
}
.report-type-card:hover[b-y8tqa6k7uj] {
background: white;
border-color: var(--brand-200);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.report-type-card.selected[b-y8tqa6k7uj] {
background: var(--brand-50);
border-color: var(--brand-500);
}
.type-icon[b-y8tqa6k7uj] {
width: 48px;
height: 48px;
border-radius: 12px;
background: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
color: var(--brand-600);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
flex-shrink: 0;
}
.report-type-card.selected .type-icon[b-y8tqa6k7uj] {
background: var(--brand-600);
color: white;
}
.type-info[b-y8tqa6k7uj] {
flex: 1;
}
.type-info h4[b-y8tqa6k7uj] {
font-size: 0.9375rem;
font-weight: 600;
color: var(--text-primary, #0F172A);
margin: 0 0 4px 0;
}
.type-info p[b-y8tqa6k7uj] {
font-size: 0.8125rem;
color: var(--text-muted, #64748B);
margin: 0;
}
.type-check[b-y8tqa6k7uj] {
position: absolute;
top: 12px;
right: 12px;
color: var(--brand-600);
font-size: 1.25rem;
}
/* Date Range */
.date-range-options[b-y8tqa6k7uj] {
display: flex;
flex-direction: column;
gap: 16px;
}
.preset-buttons[b-y8tqa6k7uj] {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.preset-btn[b-y8tqa6k7uj] {
padding: 8px 16px;
background: var(--neutral-50);
border: 1px solid var(--border-medium);
border-radius: 8px;
font-size: 0.8125rem;
font-weight: 500;
color: var(--text-secondary, #475569);
cursor: pointer;
transition: all 0.2s ease;
}
.preset-btn:hover[b-y8tqa6k7uj] {
background: white;
border-color: var(--brand-300);
}
.preset-btn.active[b-y8tqa6k7uj] {
background: var(--brand-600);
border-color: var(--brand-600);
color: white;
}
.custom-date-inputs[b-y8tqa6k7uj] {
display: none;
grid-template-columns: 1fr 1fr;
gap: 16px;
align-items: end;
}
.custom-date-inputs.show[b-y8tqa6k7uj] {
display: grid;
}
.date-input-group[b-y8tqa6k7uj] {
flex: 1;
min-width: 0;
}
.date-input-group label[b-y8tqa6k7uj] {
display: block;
font-size: 0.75rem;
font-weight: 500;
color: var(--text-muted, #64748B);
margin-bottom: 4px;
}
.date-input-group .form-control[b-y8tqa6k7uj] {
width: 100%;
}
.range-separator[b-y8tqa6k7uj] {
padding-bottom: 8px;
color: var(--text-muted, #64748B);
font-size: 0.875rem;
}
.date-summary[b-y8tqa6k7uj] {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
background: var(--brand-50);
border-radius: 8px;
font-size: 0.875rem;
color: var(--text-secondary, #475569);
}
.date-summary i[b-y8tqa6k7uj] {
color: var(--brand-600);
}
.date-range-days[b-y8tqa6k7uj] {
color: var(--text-muted, #64748B);
font-size: 0.8125rem;
}
/* Filters */
.filters-grid[b-y8tqa6k7uj] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
overflow: visible !important;
position: relative;
}
@media (max-width: 768px) {
.filters-grid[b-y8tqa6k7uj] {
grid-template-columns: 1fr;
}
}
.filter-group[b-y8tqa6k7uj] {
display: flex;
flex-direction: column;
gap: 8px;
overflow: visible !important;
position: relative;
}
/* Individual z-index for each filter to stack properly */
.filter-group:nth-child(1)[b-y8tqa6k7uj] { z-index: 40; }
.filter-group:nth-child(2)[b-y8tqa6k7uj] { z-index: 30; }
.filter-group:nth-child(3)[b-y8tqa6k7uj] { z-index: 20; }
.filter-group:nth-child(4)[b-y8tqa6k7uj] { z-index: 10; }
.filter-label[b-y8tqa6k7uj] {
font-size: 0.8125rem;
font-weight: 600;
color: var(--text-secondary, #475569);
display: flex;
align-items: center;
gap: 6px;
}
.filter-label i[b-y8tqa6k7uj] {
color: var(--brand-600);
font-size: 0.875rem;
}
.form-select[b-y8tqa6k7uj], .form-control[b-y8tqa6k7uj] {
padding: 10px 14px;
border: 1px solid var(--border-medium);
border-radius: 8px;
font-size: 0.875rem;
background: white;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-select:focus[b-y8tqa6k7uj], .form-control:focus[b-y8tqa6k7uj] {
outline: none;
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(0, 125, 184, 0.1);
}
.premium-range-inputs[b-y8tqa6k7uj] {
display: flex;
align-items: center;
gap: 8px;
}
.premium-range-inputs .form-control[b-y8tqa6k7uj] {
flex: 1;
}
/* Output Options */
.output-options[b-y8tqa6k7uj] {
display: flex;
flex-direction: column;
gap: 24px;
}
.format-buttons[b-y8tqa6k7uj] {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.format-btn[b-y8tqa6k7uj] {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
background: var(--neutral-50);
border: 2px solid transparent;
border-radius: 10px;
font-size: 0.875rem;
font-weight: 500;
color: var(--text-secondary, #475569);
cursor: pointer;
transition: all 0.2s ease;
}
.format-btn i[b-y8tqa6k7uj] {
font-size: 1.125rem;
}
.format-btn:hover[b-y8tqa6k7uj] {
background: white;
border-color: var(--brand-200);
}
.format-btn.active[b-y8tqa6k7uj] {
background: var(--brand-50);
border-color: var(--brand-500);
color: var(--brand-700);
}
.columns-selection[b-y8tqa6k7uj] {
display: flex;
flex-direction: column;
gap: 12px;
}
.columns-checkboxes[b-y8tqa6k7uj] {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.checkbox-item[b-y8tqa6k7uj] {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.875rem;
color: var(--text-secondary, #475569);
cursor: pointer;
}
.checkbox-item input[type="checkbox"][b-y8tqa6k7uj] {
width: 18px;
height: 18px;
accent-color: var(--brand-600);
cursor: pointer;
}
.grouping-option[b-y8tqa6k7uj] {
max-width: 300px;
}
/* Custom Dropdown Styling */
.custom-dropdown[b-y8tqa6k7uj] {
position: relative;
overflow: visible !important;
}
.custom-dropdown.show[b-y8tqa6k7uj] {
z-index: 1050 !important;
}
.custom-dropdown .dropdown-toggle[b-y8tqa6k7uj] {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
background: white;
border: 1px solid var(--border-medium);
border-radius: 8px;
font-size: 0.875rem;
color: var(--text-secondary, #475569);
cursor: pointer;
transition: all 0.2s ease;
}
.custom-dropdown .dropdown-toggle:hover[b-y8tqa6k7uj] {
border-color: var(--brand-300);
}
.custom-dropdown .dropdown-toggle:focus[b-y8tqa6k7uj] {
outline: none;
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(0, 125, 184, 0.1);
}
.custom-dropdown .dropdown-toggle[b-y8tqa6k7uj]::after {
display: none; /* Hide default Bootstrap caret */
}
.custom-dropdown .dropdown-text[b-y8tqa6k7uj] {
flex: 1;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.custom-dropdown .dropdown-arrow[b-y8tqa6k7uj] {
font-size: 0.75rem;
color: var(--text-muted, #64748B);
transition: transform 0.2s ease;
margin-left: 8px;
}
.custom-dropdown.show .dropdown-arrow[b-y8tqa6k7uj] {
transform: rotate(180deg);
}
.custom-dropdown .dropdown-menu[b-y8tqa6k7uj] {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
z-index: 9999 !important;
min-width: 100%;
max-height: 280px;
overflow-y: auto;
overflow-x: hidden;
padding: 6px 0;
margin: 0 !important;
background: white;
border: 1px solid var(--border-medium);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
display: none;
}
.custom-dropdown .dropdown-menu.show[b-y8tqa6k7uj],
.custom-dropdown.show .dropdown-menu[b-y8tqa6k7uj] {
display: block !important;
}
.custom-dropdown .dropdown-menu li[b-y8tqa6k7uj] {
list-style: none;
margin: 0;
padding: 0;
}
.custom-dropdown .dropdown-item[b-y8tqa6k7uj] {
display: block;
padding: 10px 14px;
font-size: 0.875rem;
color: var(--text-secondary, #475569);
cursor: pointer;
transition: all 0.15s ease;
border: none;
background: transparent;
width: 100%;
text-align: left;
}
.custom-dropdown .dropdown-item:hover[b-y8tqa6k7uj] {
background: var(--neutral-50);
color: var(--text-primary, #0F172A);
}
.custom-dropdown .dropdown-item.active[b-y8tqa6k7uj] {
background: var(--brand-50);
color: var(--brand-700);
font-weight: 500;
}
.custom-dropdown .dropdown-item:focus[b-y8tqa6k7uj] {
outline: none;
background: var(--brand-50);
}
/* Preview & Generate */
.preview-section[b-y8tqa6k7uj] {
background: linear-gradient(135deg, var(--brand-50) 0%, white 100%);
}
.config-summary[b-y8tqa6k7uj] {
background: white;
border: 1px solid var(--border-light);
border-radius: 12px;
padding: 20px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 24px;
}
@media (max-width: 768px) {
.config-summary[b-y8tqa6k7uj] {
grid-template-columns: 1fr;
}
}
.summary-item[b-y8tqa6k7uj] {
display: flex;
flex-direction: column;
gap: 4px;
}
.summary-label[b-y8tqa6k7uj] {
font-size: 0.75rem;
font-weight: 600;
color: var(--text-muted, #64748B);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.summary-value[b-y8tqa6k7uj] {
font-size: 0.9375rem;
font-weight: 500;
color: var(--text-primary, #0F172A);
}
.generate-actions[b-y8tqa6k7uj] {
display: flex;
justify-content: flex-end;
gap: 12px;
}
.btn-generate[b-y8tqa6k7uj] {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: var(--brand-600);
border: none;
border-radius: 10px;
font-size: 0.9375rem;
font-weight: 600;
color: white;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-generate:hover:not(:disabled)[b-y8tqa6k7uj] {
background: var(--brand-700);
}
.btn-generate:disabled[b-y8tqa6k7uj] {
opacity: 0.7;
cursor: not-allowed;
}
.btn-outline-secondary[b-y8tqa6k7uj] {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
background: white;
border: 1px solid var(--border-medium);
border-radius: 10px;
font-size: 0.875rem;
font-weight: 500;
color: var(--text-secondary, #475569);
cursor: pointer;
transition: all 0.2s ease;
}
.btn-outline-secondary:hover[b-y8tqa6k7uj] {
background: var(--neutral-50);
border-color: var(--border-dark);
}
/* /Components/Pages/Agent/AgentDashboardPage.razor.rz.scp.css */
/* ========================================
Agent Dashboard Page - Modern Design
======================================== */
.agent-dashboard[b-pojoq6yfsn] {
padding: 0;
max-width: 100%;
margin: 0;
}
/* Loading State */
.loading-container[b-pojoq6yfsn] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 400px;
gap: 16px;
}
.loading-text[b-pojoq6yfsn] {
color: var(--text-muted);
font-size: 0.875rem;
margin: 0;
}
/* ========================================
Dashboard Header
======================================== */
.dashboard-header[b-pojoq6yfsn] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 24px;
gap: 24px;
flex-wrap: wrap;
background: white;
padding: 24px;
border-radius: 16px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-light);
}
.header-content[b-pojoq6yfsn] {
flex: 1;
}
.dashboard-title[b-pojoq6yfsn] {
font-size: 1.75rem;
font-weight: 700;
color: var(--text-primary);
margin: 0 0 4px 0;
letter-spacing: -0.02em;
}
.dashboard-subtitle[b-pojoq6yfsn] {
font-size: 0.9375rem;
color: var(--text-muted);
margin: 0;
}
.header-actions[b-pojoq6yfsn] {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
/* Time Period Selector */
.time-period-selector .btn-group[b-pojoq6yfsn] {
display: flex;
background: var(--neutral-100);
border-radius: 10px;
padding: 4px;
gap: 2px;
}
.btn-period[b-pojoq6yfsn] {
background: transparent;
border: none;
color: var(--text-secondary);
padding: 8px 16px;
font-size: 0.8125rem;
font-weight: 600;
border-radius: 8px;
transition: all 0.2s ease;
}
.btn-period:hover[b-pojoq6yfsn] {
color: var(--text-primary);
background: rgba(255, 255, 255, 0.5);
}
.btn-period.active[b-pojoq6yfsn] {
background: white;
color: var(--brand-600);
box-shadow: var(--shadow-sm);
}
/* Primary Action Button */
.btn-primary-action[b-pojoq6yfsn] {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--brand-600);
color: white;
border: none;
padding: 10px 20px;
border-radius: 10px;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-primary-action:hover[b-pojoq6yfsn] {
background: var(--brand-700);
}
.btn-primary-action i[b-pojoq6yfsn] {
font-size: 1rem;
}
/* Year Selector */
.year-selector[b-pojoq6yfsn] {
display: flex;
align-items: center;
gap: 0;
background: white;
border: 1px solid var(--border-medium);
border-radius: 8px;
overflow: hidden;
}
.year-label[b-pojoq6yfsn] {
display: flex;
align-items: center;
justify-content: center;
padding: 8px 10px;
background: var(--neutral-50);
color: var(--text-muted, #64748B);
border-right: 1px solid var(--border-light);
font-size: 0.875rem;
}
.year-selector .form-select[b-pojoq6yfsn] {
padding: 8px 32px 8px 12px;
font-size: 0.875rem;
font-weight: 600;
border-radius: 0;
border: none;
background-color: white;
color: var(--text-primary);
cursor: pointer;
min-width: 90px;
}
.year-selector .form-select:focus[b-pojoq6yfsn] {
outline: none;
box-shadow: none;
}
.year-selector:focus-within[b-pojoq6yfsn] {
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
/* ========================================
Dashboard Tabs
======================================== */
.dashboard-tabs[b-pojoq6yfsn] {
display: flex;
gap: 4px;
margin-bottom: 24px;
background: white;
padding: 6px;
border-radius: 12px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-light);
overflow-x: auto;
}
.tab-btn[b-pojoq6yfsn] {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background: transparent;
border: none;
border-radius: 8px;
font-size: 0.875rem;
font-weight: 600;
color: var(--text-secondary);
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
}
.tab-btn:hover[b-pojoq6yfsn] {
background: var(--neutral-100);
color: var(--text-primary);
}
.tab-btn.active[b-pojoq6yfsn] {
background: var(--brand-600);
color: white;
}
.tab-btn i[b-pojoq6yfsn] {
font-size: 1rem;
}
/* ========================================
Tab Content
======================================== */
.tab-content[b-pojoq6yfsn] {
/* ...existing code... */
}
/* Keep all tab panels mounted; only the active one is visible.
Scope animations to the active panel to avoid a full-content fade on every render. */
.tab-panel[b-pojoq6yfsn] {
width: 100%;
}
.tab-panel.active[b-pojoq6yfsn] {
animation: fadeIn-b-pojoq6yfsn 0.2s ease;
}
@keyframes fadeIn-b-pojoq6yfsn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* Keep all tab panels mounted; hide inactive panels without triggering layout thrash */
.tab-panel.is-hidden[b-pojoq6yfsn] {
position: absolute;
left: -10000px;
top: 0;
width: 1px;
height: 1px;
overflow: hidden;
visibility: hidden;
}
.tab-panel.is-active[b-pojoq6yfsn] {
position: relative;
left: auto;
width: auto;
height: auto;
overflow: visible;
visibility: visible;
}
/* ========================================
Stats Row
======================================== */
.stats-row[b-pojoq6yfsn] {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 24px;
}
.stats-row-3[b-pojoq6yfsn] {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1200px) {
.stats-row[b-pojoq6yfsn] {
grid-template-columns: repeat(2, 1fr);
}
.stats-row-3[b-pojoq6yfsn] {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.stats-row[b-pojoq6yfsn],
.stats-row-3[b-pojoq6yfsn] {
grid-template-columns: 1fr;
}
}
/* ========================================
Stat Cards (Metric Cards)
======================================== */
.stat-card[b-pojoq6yfsn] {
background: white;
border-radius: 16px;
padding: 20px 24px;
position: relative;
overflow: hidden;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-light);
transition: all 0.2s ease;
}
.stat-card:hover[b-pojoq6yfsn] {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.stat-card-primary[b-pojoq6yfsn] {
background: linear-gradient(135deg, #34D399 0%, #10B981 100%);
background: linear-gradient(135deg, var(--success-400) 0%, var(--success-500) 100%);
border: none;
}
.stat-card-primary .stat-card-title[b-pojoq6yfsn],
.stat-card-primary .stat-card-description[b-pojoq6yfsn] {
color: rgba(255, 255, 255, 0.9);
}
.stat-card-primary .stat-card-value[b-pojoq6yfsn] {
color: white;
}
.stat-card-primary .stat-card-icon[b-pojoq6yfsn] {
background: rgba(255, 255, 255, 0.2);
color: white;
}
.stat-card-content[b-pojoq6yfsn] {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.stat-card-header[b-pojoq6yfsn] {
display: flex;
align-items: center;
gap: 8px;
}
.stat-card-title[b-pojoq6yfsn] {
font-size: 0.8125rem;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.stat-card-value[b-pojoq6yfsn] {
font-size: 1.75rem;
font-weight: 700;
color: var(--text-primary);
line-height: 1.2;
}
.stat-card-description[b-pojoq6yfsn] {
font-size: 0.8125rem;
color: var(--text-muted);
}
.stat-card-icon[b-pojoq6yfsn] {
width: 48px;
height: 48px;
border-radius: 12px;
background: var(--neutral-100);
color: var(--text-secondary);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
flex-shrink: 0;
}
.stat-icon-success[b-pojoq6yfsn] {
background: rgba(34, 197, 94, 0.1);
color: var(--success-600);
}
.stat-icon-warning[b-pojoq6yfsn] {
background: rgba(245, 158, 11, 0.1);
color: #d97706;
}
.stat-icon-error[b-pojoq6yfsn] {
background: rgba(239, 68, 68, 0.1);
color: var(--error-600);
}
.stat-trend[b-pojoq6yfsn] {
display: inline-flex;
align-items: center;
gap: 2px;
font-size: 0.75rem;
font-weight: 600;
padding: 2px 6px;
border-radius: 4px;
}
.stat-trend.trend-up[b-pojoq6yfsn] {
background: rgba(34, 197, 94, 0.1);
color: var(--success-600);
}
.stat-trend.trend-down[b-pojoq6yfsn] {
background: rgba(239, 68, 68, 0.1);
color: var(--error-600);
}
.stat-card-progress[b-pojoq6yfsn] {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4px;
background: rgba(255, 255, 255, 0.2);
}
.stat-card-progress .progress-bar[b-pojoq6yfsn] {
height: 100%;
background: rgba(255, 255, 255, 0.6);
border-radius: 0 4px 4px 0;
}
/* ========================================
Content Grid
======================================== */
.content-grid[b-pojoq6yfsn] {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 24px;
}
@media (max-width: 1024px) {
.content-grid[b-pojoq6yfsn] {
grid-template-columns: 1fr;
}
}
.content-left[b-pojoq6yfsn],
.content-right[b-pojoq6yfsn] {
display: flex;
flex-direction: column;
gap: 24px;
}
/* ========================================
Dashboard Cards
======================================== */
.dashboard-card[b-pojoq6yfsn] {
background: white;
border-radius: 16px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-light);
overflow: hidden;
}
.card-header[b-pojoq6yfsn] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 24px;
border-bottom: 1px solid var(--border-light);
gap: 16px;
}
.card-header-left[b-pojoq6yfsn] {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.card-title[b-pojoq6yfsn] {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
margin: 0;
}
.card-subtitle[b-pojoq6yfsn] {
font-size: 0.8125rem;
color: var(--text-muted);
}
.btn-icon[b-pojoq6yfsn] {
width: 36px;
height: 36px;
border-radius: 10px;
border: 1px solid var(--border-medium);
background: white;
color: var(--text-secondary);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-icon:hover[b-pojoq6yfsn] {
background: var(--brand-50);
border-color: var(--brand-300);
color: var(--brand-600);
}
.card-body[b-pojoq6yfsn] {
padding: 20px 24px;
}
/* ========================================
Banks List
======================================== */
.banks-list[b-pojoq6yfsn] {
display: flex;
flex-direction: column;
gap: 12px;
}
.bank-item[b-pojoq6yfsn] {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: var(--neutral-50);
border-radius: 12px;
transition: all 0.2s ease;
}
.bank-item:hover[b-pojoq6yfsn] {
background: var(--neutral-100);
}
.bank-avatar[b-pojoq6yfsn] {
width: 44px;
height: 44px;
border-radius: 10px;
background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-600) 100%);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.875rem;
font-weight: 700;
flex-shrink: 0;
}
.bank-details[b-pojoq6yfsn] {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.bank-name[b-pojoq6yfsn] {
font-size: 0.9375rem;
font-weight: 600;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bank-code[b-pojoq6yfsn] {
font-size: 0.8125rem;
color: var(--text-muted);
}
.bank-stats[b-pojoq6yfsn] {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
}
.bank-user-count[b-pojoq6yfsn] {
font-size: 1.125rem;
font-weight: 700;
color: var(--brand-600);
}
.bank-user-label[b-pojoq6yfsn] {
font-size: 0.75rem;
color: var(--text-muted);
}
/* Banks Summary */
.banks-summary[b-pojoq6yfsn] {
display: flex;
align-items: center;
justify-content: center;
gap: 32px;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--border-light);
}
.summary-item[b-pojoq6yfsn] {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.summary-value[b-pojoq6yfsn] {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary);
}
.summary-label[b-pojoq6yfsn] {
font-size: 0.8125rem;
color: var(--text-muted);
}
.summary-divider[b-pojoq6yfsn] {
width: 1px;
height: 40px;
background: var(--border-medium);
}
/* Empty State */
.empty-state[b-pojoq6yfsn] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
text-align: center;
}
.empty-icon[b-pojoq6yfsn] {
width: 64px;
height: 64px;
border-radius: 16px;
background: var(--neutral-100);
color: var(--text-muted);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.75rem;
margin-bottom: 16px;
}
.empty-text[b-pojoq6yfsn] {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 4px 0;
}
.empty-subtext[b-pojoq6yfsn] {
font-size: 0.875rem;
color: var(--text-muted);
}
/* ========================================
Button Overrides
======================================== */
.btn.btn-sm[b-pojoq6yfsn] {
padding: 6px 12px;
font-size: 0.8125rem;
font-weight: 600;
border-radius: 6px;
}
.btn.btn-outline-secondary[b-pojoq6yfsn] {
background: transparent;
border: 1px solid #E2E8F0;
color: #64748B;
}
.btn.btn-outline-secondary:hover[b-pojoq6yfsn] {
background: #F1F5F9;
border-color: #E2E8F0;
color: #0F172A;
}
.btn.btn-outline-primary[b-pojoq6yfsn] {
background: white;
border: 1px solid var(--brand-500);
color: var(--brand-600);
}
.btn.btn-outline-primary:hover[b-pojoq6yfsn] {
background: var(--brand-50);
border-color: var(--brand-600);
color: var(--brand-700);
}
.btn.btn-primary[b-pojoq6yfsn] {
background: var(--brand-600);
border: 1px solid var(--brand-600);
color: white;
}
.btn.btn-primary:hover[b-pojoq6yfsn] {
background: var(--brand-700);
border-color: var(--brand-700);
color: white;
}
/* Form Controls */
.form-select.form-select-sm[b-pojoq6yfsn] {
padding: 6px 28px 6px 10px;
font-size: 0.8125rem;
font-weight: 500;
border-radius: 6px;
border: 1px solid var(--border-medium);
background-color: white;
}
.form-select.form-select-sm:focus[b-pojoq6yfsn] {
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
/* ========================================
Quick Actions Card
======================================== */
.quick-actions-card .card-body[b-pojoq6yfsn] {
padding: 16px;
}
.quick-actions-grid[b-pojoq6yfsn] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.quick-action-btn[b-pojoq6yfsn] {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 20px 16px;
background: var(--neutral-50);
border: 1px solid transparent;
border-radius: 12px;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.quick-action-btn:hover[b-pojoq6yfsn] {
background: white;
border-color: var(--border-medium);
}
.action-icon[b-pojoq6yfsn] {
width: 44px;
height: 44px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
}
.action-icon-blue[b-pojoq6yfsn] {
background: rgba(59, 130, 246, 0.1);
color: #3b82f6;
}
.action-icon-purple[b-pojoq6yfsn] {
background: rgba(139, 92, 246, 0.1);
color: #8b5cf6;
}
.action-icon-green[b-pojoq6yfsn] {
background: rgba(34, 197, 94, 0.1);
color: var(--success-500);
}
.action-icon-orange[b-pojoq6yfsn] {
background: rgba(249, 115, 22, 0.1);
color: #f97316;
}
.action-label[b-pojoq6yfsn] {
font-size: 0.8125rem;
font-weight: 600;
color: var(--text-primary);
}
/* Quick Actions List Style */
.quick-actions-list[b-pojoq6yfsn] {
display: flex;
flex-direction: column;
gap: 8px;
}
.quick-action-item[b-pojoq6yfsn] {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
background: var(--neutral-50);
border: 1px solid transparent;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
width: 100%;
text-align: left;
}
.quick-action-item:hover[b-pojoq6yfsn] {
background: white;
border-color: var(--border-medium);
box-shadow: var(--shadow-sm);
}
.quick-action-item .action-text[b-pojoq6yfsn] {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.quick-action-item .action-title[b-pojoq6yfsn] {
font-size: 0.9375rem;
font-weight: 600;
color: var(--text-primary, #0F172A);
}
.quick-action-item .action-desc[b-pojoq6yfsn] {
font-size: 0.8125rem;
color: var(--text-muted, #64748B);
}
.quick-action-item > i:last-child[b-pojoq6yfsn] {
color: var(--text-muted, #64748B);
font-size: 0.875rem;
}
/* ========================================
Tips Card
======================================== */
.tips-card[b-pojoq6yfsn] {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border: none;
}
.tips-content[b-pojoq6yfsn] {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 24px;
}
.tips-icon[b-pojoq6yfsn] {
width: 48px;
height: 48px;
border-radius: 12px;
background: rgba(245, 158, 11, 0.2);
color: #b45309;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
flex-shrink: 0;
}
.tips-text[b-pojoq6yfsn] {
flex: 1;
}
.tips-text h4[b-pojoq6yfsn] {
font-size: 1rem;
font-weight: 700;
color: #92400e;
margin: 0 0 4px 0;
}
.tips-text p[b-pojoq6yfsn] {
font-size: 0.875rem;
color: #a16207;
margin: 0;
line-height: 1.5;
}
.btn-tips[b-pojoq6yfsn] {
background: white;
color: #b45309;
border: none;
padding: 8px 16px;
border-radius: 8px;
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
white-space: nowrap;
align-self: center;
}
.btn-tips:hover[b-pojoq6yfsn] {
background: #fffbeb;
}
/* ========================================
Commission Chart
======================================== */
.commission-chart[b-pojoq6yfsn],
.commission-chart-large[b-pojoq6yfsn] {
padding: 20px 0;
}
.chart-bars[b-pojoq6yfsn],
.chart-bars-large[b-pojoq6yfsn] {
display: flex;
justify-content: space-between;
align-items: stretch;
height: 200px;
gap: 8px;
}
.chart-bars-large[b-pojoq6yfsn] {
height: 280px;
}
.chart-bar-container[b-pojoq6yfsn] {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
}
.chart-bar-wrapper[b-pojoq6yfsn] {
width: 100%;
height: calc(100% - 24px); /* subtract label height */
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}
.chart-bar[b-pojoq6yfsn] {
width: 100%;
max-width: 40px;
background: linear-gradient(180deg, var(--brand-300) 0%, var(--brand-400) 100%);
background: linear-gradient(180deg, var(--brand-300) 0%, var(--brand-400) 100%);
border-radius: 4px 4px 0 0;
transition: height 0.5s ease;
min-height: 8px;
}
.chart-label[b-pojoq6yfsn] {
font-size: 0.75rem;
color: var(--text-muted, #64748B);
font-weight: 500;
height: 20px;
margin-top: 4px;
}
.chart-bar-animated[b-pojoq6yfsn] {
animation: growBar-b-pojoq6yfsn 0.8s ease-out;
}
@keyframes growBar-b-pojoq6yfsn {
from { height: 0; }
}
.chart-bar-value[b-pojoq6yfsn] {
font-size: 0.75rem;
font-weight: 600;
color: var(--text-secondary, #475569);
margin-bottom: 4px;
}
.chart-empty[b-pojoq6yfsn] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 200px;
color: var(--text-muted, #64748B);
gap: 8px;
}
.chart-empty i[b-pojoq6yfsn] {
font-size: 2rem;
}
.commission-totals[b-pojoq6yfsn] {
display: flex;
justify-content: center;
gap: 48px;
padding-top: 20px;
border-top: 1px solid var(--border-light);
margin-top: 20px;
}
.commission-total-item[b-pojoq6yfsn] {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.total-label[b-pojoq6yfsn] {
font-size: 0.8125rem;
color: var(--text-muted, #64748B);
}
.total-value[b-pojoq6yfsn] {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-primary, #0F172A);
}
.total-highlight[b-pojoq6yfsn] {
color: var(--success-600);
}
/* ========================================
Data Tables
======================================== */
.data-table[b-pojoq6yfsn] {
width: 100%;
border-collapse: collapse;
}
.data-table thead[b-pojoq6yfsn] {
background: var(--neutral-50);
}
.data-table th[b-pojoq6yfsn] {
padding: 12px 16px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-muted, #64748B);
text-align: left;
border-bottom: 1px solid var(--border-light);
}
.data-table td[b-pojoq6yfsn] {
padding: 14px 16px;
font-size: 0.875rem;
color: var(--text-primary, #0F172A);
border-bottom: 1px solid var(--border-light);
}
.data-table tr:last-child td[b-pojoq6yfsn] {
border-bottom: none;
}
.data-table tr:hover td[b-pojoq6yfsn] {
background: var(--neutral-50);
}
.font-mono[b-pojoq6yfsn] {
font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
font-size: 0.8125rem;
}
.btn-icon-sm[b-pojoq6yfsn] {
width: 32px;
height: 32px;
border-radius: 8px;
border: 1px solid var(--border-light);
background: white;
color: var(--text-secondary, #475569);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-icon-sm:hover[b-pojoq6yfsn] {
background: var(--brand-50);
border-color: var(--brand-300);
color: var(--brand-600);
}
/* ========================================
Status Badges
======================================== */
.status-badge[b-pojoq6yfsn] {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 600;
text-transform: capitalize;
}
.status-badge.status-paid[b-pojoq6yfsn],
.status-badge.status-approved[b-pojoq6yfsn],
.status-badge.status-bound[b-pojoq6yfsn] {
background: var(--success-50);
color: var(--success-700);
}
.status-badge.status-pending[b-pojoq6yfsn],
.status-badge.status-inreview[b-pojoq6yfsn] {
background: var(--warning-50);
color: var(--warning-700);
}
.status-badge.status-submitted[b-pojoq6yfsn] {
background: var(--brand-50);
color: var(--brand-700);
}
.status-badge.status-denied[b-pojoq6yfsn],
.status-badge.status-rejected[b-pojoq6yfsn] {
background: var(--error-50);
color: var(--error-700);
}
/* ========================================
Banks Grid (for Banks Tab)
======================================== */
.banks-grid[b-pojoq6yfsn] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
.bank-card[b-pojoq6yfsn] {
background: var(--neutral-50);
border: 1px solid var(--border-light);
border-radius: 12px;
padding: 20px;
transition: all 0.2s ease;
}
.bank-card:hover[b-pojoq6yfsn] {
background: white;
box-shadow: var(--shadow-md);
}
.bank-card-header[b-pojoq6yfsn] {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.bank-avatar-lg[b-pojoq6yfsn] {
width: 48px;
height: 48px;
}
.bank-info h4[b-pojoq6yfsn] {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary, #0F172A);
margin: 0 0 2px 0;
}
.bank-card-stats[b-pojoq6yfsn] {
display: flex;
justify-content: space-between;
padding: 12px 0;
border-top: 1px solid var(--border-light);
border-bottom: 1px solid var(--border-light);
margin-bottom: 16px;
}
.bank-stat[b-pojoq6yfsn] {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.stat-number[b-pojoq6yfsn] {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-primary, #0F172A);
}
.stat-label[b-pojoq6yfsn] {
font-size: 0.75rem;
color: var(--text-muted, #64748B);
}
.bank-card-footer[b-pojoq6yfsn] {
display: flex;
justify-content: center;
}
/* ========================================
Card Header Stats & Actions
======================================== */
.card-header-stats[b-pojoq6yfsn] {
display: flex;
gap: 16px;
}
.header-stat[b-pojoq6yfsn] {
font-size: 0.875rem;
color: var(--text-secondary, #475569);
}
.card-header-actions[b-pojoq6yfsn] {
display: flex;
gap: 12px;
align-items: center;
flex-shrink: 0;
}
.search-box[b-pojoq6yfsn] {
position: relative;
display: flex;
align-items: center;
}
.search-box i[b-pojoq6yfsn] {
position: absolute;
left: 12px;
color: var(--text-muted, #64748B);
font-size: 0.875rem;
pointer-events: none;
}
.search-box input[b-pojoq6yfsn] {
padding: 8px 12px 8px 36px;
border: 1px solid var(--border-medium);
border-radius: 8px;
font-size: 0.875rem;
width: 220px;
height: 36px;
transition: all 0.2s ease;
background-color: white;
}
.search-box input:focus[b-pojoq6yfsn] {
outline: none;
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
.search-box input[b-pojoq6yfsn]::placeholder {
color: var(--text-muted, #94A3B8);
}
/* Form Select in card header */
.card-header-actions .form-select[b-pojoq6yfsn] {
padding: 8px 32px 8px 12px;
font-size: 0.875rem;
font-weight: 500;
border-radius: 8px;
border: 1px solid var(--border-medium);
background-color: white;
height: 36px;
min-width: 140px;
cursor: pointer;
}
.card-header-actions .form-select:focus[b-pojoq6yfsn] {
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
outline: none;
}
/* ========================================
Reports Grid
======================================== */
.reports-grid[b-pojoq6yfsn] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
@media (max-width: 768px) {
.reports-grid[b-pojoq6yfsn] {
grid-template-columns: 1fr;
}
}
.report-card[b-pojoq6yfsn] {
display: flex;
align-items: center;
gap: 16px;
padding: 20px;
background: var(--neutral-50);
border: 1px solid var(--border-light);
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
}
.report-card:hover[b-pojoq6yfsn] {
background: white;
box-shadow: var(--shadow-md);
}
.report-icon[b-pojoq6yfsn] {
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
flex-shrink: 0;
}
.report-icon-green[b-pojoq6yfsn] {
background: rgba(34, 197, 94, 0.1);
color: var(--success-600);
}
.report-icon-blue[b-pojoq6yfsn] {
background: rgba(59, 130, 246, 0.1);
color: #2563eb;
}
.report-icon-purple[b-pojoq6yfsn] {
background: rgba(139, 92, 246, 0.1);
color: #7c3aed;
}
.report-icon-orange[b-pojoq6yfsn] {
background: rgba(249, 115, 22, 0.1);
color: #ea580c;
}
.report-icon-teal[b-pojoq6yfsn] {
background: rgba(20, 184, 166, 0.1);
color: #0d9488;
}
.report-card-custom[b-pojoq6yfsn] {
text-decoration: none;
background: linear-gradient(135deg, var(--brand-50) 0%, #f0f9ff 100%);
border: 1px solid var(--brand-200);
}
.report-card-custom:hover[b-pojoq6yfsn] {
background: linear-gradient(135deg, var(--brand-100) 0%, #e0f2fe 100%);
border-color: var(--brand-300);
box-shadow: var(--shadow-md);
}
.btn-custom-report[b-pojoq6yfsn] {
padding: 8px 16px;
background: var(--accent-color);
border: none;
border-radius: 8px;
font-size: 0.8125rem;
font-weight: 600;
color: white;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 6px;
}
.btn-custom-report:hover[b-pojoq6yfsn] {
filter: brightness(0.85);
}
.report-info[b-pojoq6yfsn] {
flex: 1;
}
.report-info h4[b-pojoq6yfsn] {
font-size: 0.9375rem;
font-weight: 600;
color: var(--text-primary, #0F172A);
margin: 0 0 4px 0;
}
.report-info p[b-pojoq6yfsn] {
font-size: 0.8125rem;
color: var(--text-muted, #64748B);
margin: 0;
}
.btn-export[b-pojoq6yfsn] {
padding: 8px 16px;
background: transparent;
border: 1px solid #E2E8F0;
border-radius: 8px;
font-size: 0.8125rem;
font-weight: 600;
color: #64748B;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
display: flex;
align-items: center;
gap: 6px;
}
.btn-export:hover[b-pojoq6yfsn] {
background: #F1F5F9;
border-color: #E2E8F0;
color: #0F172A;
}
/* ========================================
Responsive Adjustments
======================================== */
@media (max-width: 768px) {
.dashboard-header[b-pojoq6yfsn] {
flex-direction: column;
align-items: stretch;
}
.header-actions[b-pojoq6yfsn] {
flex-direction: column;
align-items: stretch;
}
.time-period-selector .btn-group[b-pojoq6yfsn] {
width: 100%;
justify-content: space-between;
}
.btn-primary-action[b-pojoq6yfsn] {
width: 100%;
justify-content: center;
}
.tips-content[b-pojoq6yfsn] {
flex-direction: column;
text-align: center;
align-items: center;
}
.btn-tips[b-pojoq6yfsn] {
width: 100%;
}
.card-header[b-pojoq6yfsn] {
flex-wrap: wrap;
}
.card-header-actions[b-pojoq6yfsn] {
width: 100%;
flex-wrap: wrap;
}
.search-box[b-pojoq6yfsn] {
flex: 1;
min-width: 150px;
}
.search-box input[b-pojoq6yfsn] {
width: 100%;
}
.card-header-actions .form-select[b-pojoq6yfsn] {
flex: 1;
min-width: 120px;
}
}
/* ========================================
Skeleton Loading State
======================================== */
@keyframes agent-dash-skel-pulse-b-pojoq6yfsn {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
.skel-block[b-pojoq6yfsn] {
background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
background-size: 200% 100%;
animation: agent-dash-skel-pulse-b-pojoq6yfsn 1.5s ease-in-out infinite;
border-radius: 6px;
}
.skel-header[b-pojoq6yfsn] {
background: white;
padding: 24px;
border-radius: 16px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-light);
margin-bottom: 24px;
}
.skel-tabs[b-pojoq6yfsn] {
display: flex;
gap: 4px;
background: white;
padding: 6px;
border-radius: 12px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-light);
margin-bottom: 24px;
}
.skel-tab[b-pojoq6yfsn] {
border-radius: 8px;
}
.skel-stats-row[b-pojoq6yfsn] {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 24px;
}
.skel-stat-card[b-pojoq6yfsn] {
background: white;
border-radius: 16px;
padding: 20px 24px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-light);
display: flex;
flex-direction: column;
}
.skel-content-grid[b-pojoq6yfsn] {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 24px;
}
.skel-card[b-pojoq6yfsn] {
background: white;
border-radius: 16px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-light);
overflow: hidden;
}
.skel-card-header[b-pojoq6yfsn] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 24px;
border-bottom: 1px solid var(--border-light);
}
.skel-card-body[b-pojoq6yfsn] {
padding: 24px;
}
@media (max-width: 1024px) {
.skel-content-grid[b-pojoq6yfsn] {
grid-template-columns: 1fr;
}
}
@media (max-width: 1200px) {
.skel-stats-row[b-pojoq6yfsn] {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.skel-stats-row[b-pojoq6yfsn] {
grid-template-columns: 1fr;
}
}
/* /Components/Pages/Agent/BankDetailsPage.razor.rz.scp.css */
/* ========================================
Bank Details Page - Styles
Extends Agent Dashboard base styles
======================================== */
.bank-details-page[b-38woct9lgs] {
padding: 0;
max-width: 100%;
margin: 0;
}
/* Loading State */
.loading-container[b-38woct9lgs] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 400px;
gap: 16px;
}
.loading-text[b-38woct9lgs] {
color: var(--text-muted);
font-size: 0.875rem;
margin: 0;
}
/* ========================================
Page Header
======================================== */
.page-header[b-38woct9lgs] {
background: white;
padding: 20px 24px 24px;
border-radius: 16px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-light);
margin-bottom: 24px;
}
.header-nav[b-38woct9lgs] {
margin-bottom: 16px;
}
.btn-back[b-38woct9lgs] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 0;
color: var(--text-secondary);
font-size: 0.875rem;
font-weight: 500;
text-decoration: none;
}
.btn-back:hover[b-38woct9lgs] {
color: var(--brand-600);
text-decoration: none;
}
.header-content[b-38woct9lgs] {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
.bank-header-info[b-38woct9lgs] {
display: flex;
align-items: center;
gap: 20px;
}
.bank-avatar-xl[b-38woct9lgs] {
width: 64px;
height: 64px;
font-size: 1.25rem;
}
.bank-avatar[b-38woct9lgs] {
border-radius: 14px;
background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-600) 100%);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
flex-shrink: 0;
}
.bank-title-section[b-38woct9lgs] {
display: flex;
flex-direction: column;
gap: 4px;
}
.page-title[b-38woct9lgs] {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary);
margin: 0;
letter-spacing: -0.02em;
}
.bank-code[b-38woct9lgs] {
font-size: 0.875rem;
color: var(--text-muted);
font-weight: 500;
}
.header-actions[b-38woct9lgs] {
display: flex;
align-items: center;
gap: 12px;
}
/* ========================================
Stats Row (Reused from Dashboard)
======================================== */
.stats-row[b-38woct9lgs] {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 24px;
}
@media (max-width: 1200px) {
.stats-row[b-38woct9lgs] {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.stats-row[b-38woct9lgs] {
grid-template-columns: 1fr;
}
}
/* Stat Cards */
.stat-card[b-38woct9lgs] {
background: white;
border-radius: 16px;
padding: 20px 24px;
position: relative;
overflow: hidden;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-light);
transition: all 0.2s ease;
}
.stat-card:hover[b-38woct9lgs] {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.stat-card-primary[b-38woct9lgs] {
background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 100%);
border: none;
}
.stat-card-primary .stat-card-title[b-38woct9lgs],
.stat-card-primary .stat-card-description[b-38woct9lgs] {
color: rgba(255, 255, 255, 0.9);
}
.stat-card-primary .stat-card-value[b-38woct9lgs] {
color: white;
}
.stat-card-primary .stat-card-icon[b-38woct9lgs] {
background: rgba(255, 255, 255, 0.2);
color: white;
}
.stat-card-content[b-38woct9lgs] {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.stat-card-title[b-38woct9lgs] {
font-size: 0.8125rem;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.stat-card-value[b-38woct9lgs] {
font-size: 1.75rem;
font-weight: 700;
color: var(--text-primary);
line-height: 1.2;
}
.stat-card-description[b-38woct9lgs] {
font-size: 0.8125rem;
color: var(--text-muted);
}
.stat-card-icon[b-38woct9lgs] {
width: 48px;
height: 48px;
border-radius: 12px;
background: var(--neutral-100);
color: var(--text-secondary);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
flex-shrink: 0;
}
.stat-icon-success[b-38woct9lgs] {
background: rgba(34, 197, 94, 0.1);
color: var(--success-600);
}
.stat-icon-warning[b-38woct9lgs] {
background: rgba(245, 158, 11, 0.1);
color: #d97706;
}
/* ========================================
Dashboard Tabs
======================================== */
.dashboard-tabs[b-38woct9lgs] {
display: flex;
gap: 4px;
margin-bottom: 24px;
background: white;
padding: 6px;
border-radius: 12px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-light);
overflow-x: auto;
}
.tab-btn[b-38woct9lgs] {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background: transparent;
border: none;
border-radius: 8px;
font-size: 0.875rem;
font-weight: 600;
color: var(--text-secondary);
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
}
.tab-btn:hover[b-38woct9lgs] {
background: var(--neutral-100);
color: var(--text-primary);
}
.tab-btn.active[b-38woct9lgs] {
background: var(--brand-600);
color: white;
}
.tab-btn i[b-38woct9lgs] {
font-size: 1rem;
}
.tab-badge[b-38woct9lgs] {
background: rgba(255, 255, 255, 0.25);
padding: 2px 8px;
border-radius: 10px;
font-size: 0.75rem;
font-weight: 600;
}
.tab-btn:not(.active) .tab-badge[b-38woct9lgs] {
background: var(--neutral-200);
color: var(--text-secondary);
}
/* ========================================
Tab Content
======================================== */
.tab-content[b-38woct9lgs] {
animation: fadeIn-b-38woct9lgs 0.2s ease;
}
@keyframes fadeIn-b-38woct9lgs {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* ========================================
Dashboard Cards
======================================== */
.dashboard-card[b-38woct9lgs] {
background: white;
border-radius: 16px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-light);
overflow: hidden;
}
.card-header[b-38woct9lgs] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 24px;
border-bottom: 1px solid var(--border-light);
gap: 16px;
flex-wrap: wrap;
}
.card-header-left[b-38woct9lgs] {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.card-title[b-38woct9lgs] {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
margin: 0;
}
.card-subtitle[b-38woct9lgs] {
font-size: 0.8125rem;
color: var(--text-muted);
}
.card-header-actions[b-38woct9lgs] {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.card-body[b-38woct9lgs] {
padding: 20px 24px;
}
/* ========================================
Users Grid
======================================== */
.users-grid[b-38woct9lgs] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 20px;
}
.user-card[b-38woct9lgs] {
background: var(--neutral-50);
border: 1px solid var(--border-light);
border-radius: 14px;
overflow: hidden;
transition: all 0.2s ease;
}
.user-card:hover[b-38woct9lgs] {
border-color: var(--brand-200);
box-shadow: var(--shadow-sm);
}
.user-card-header[b-38woct9lgs] {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 18px 18px 14px;
}
.user-avatar[b-38woct9lgs] {
width: 48px;
height: 48px;
border-radius: 12px;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
font-weight: 700;
flex-shrink: 0;
}
.user-info[b-38woct9lgs] {
flex: 1;
min-width: 0;
}
.user-name[b-38woct9lgs] {
font-size: 0.9375rem;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 2px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-email[b-38woct9lgs] {
font-size: 0.8125rem;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-role-badge[b-38woct9lgs] {
display: inline-flex;
align-items: center;
padding: 4px 10px;
background: var(--brand-50);
color: var(--brand-600);
font-size: 0.75rem;
font-weight: 600;
border-radius: 6px;
white-space: nowrap;
}
.user-card-stats[b-38woct9lgs] {
display: flex;
justify-content: space-around;
padding: 12px 18px;
background: white;
border-top: 1px solid var(--border-light);
border-bottom: 1px solid var(--border-light);
}
.user-stat[b-38woct9lgs] {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.user-stat .stat-value[b-38woct9lgs] {
font-size: 1rem;
font-weight: 700;
color: var(--text-primary);
}
.user-stat .stat-label[b-38woct9lgs] {
font-size: 0.6875rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.3px;
}
.user-card-footer[b-38woct9lgs] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 18px;
background: white;
}
.user-joined[b-38woct9lgs] {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.8125rem;
color: var(--text-muted);
}
.user-joined i[b-38woct9lgs] {
font-size: 0.875rem;
}
/* ========================================
Search Box
======================================== */
.search-box[b-38woct9lgs] {
position: relative;
display: flex;
align-items: center;
}
.search-box i[b-38woct9lgs] {
position: absolute;
left: 12px;
color: var(--text-muted);
font-size: 0.875rem;
}
.search-box input[b-38woct9lgs] {
padding: 8px 12px 8px 36px;
font-size: 0.8125rem;
border: 1px solid var(--border-medium);
border-radius: 8px;
background: white;
min-width: 200px;
transition: all 0.2s ease;
}
.search-box input:focus[b-38woct9lgs] {
outline: none;
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
.search-box input[b-38woct9lgs]::placeholder {
color: var(--text-muted);
}
/* ========================================
Data Table
======================================== */
.data-table[b-38woct9lgs] {
width: 100%;
border-collapse: collapse;
}
.data-table thead th[b-38woct9lgs] {
padding: 12px 16px;
text-align: left;
font-size: 0.75rem;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
background: var(--neutral-50);
border-bottom: 1px solid var(--border-light);
}
.data-table tbody td[b-38woct9lgs] {
padding: 14px 16px;
font-size: 0.875rem;
color: var(--text-primary);
border-bottom: 1px solid var(--border-light);
vertical-align: middle;
}
.data-table tbody tr:last-child td[b-38woct9lgs] {
border-bottom: none;
}
.data-table tbody tr:hover[b-38woct9lgs] {
background: var(--neutral-50);
}
.font-mono[b-38woct9lgs] {
font-family: var(--font-mono, 'SF Mono', 'Consolas', monospace);
font-size: 0.8125rem;
}
/* Status Badges */
.status-badge[b-38woct9lgs] {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 600;
text-transform: capitalize;
}
.status-draft[b-38woct9lgs] {
background: var(--neutral-100);
color: var(--text-secondary);
}
.status-submitted[b-38woct9lgs] {
background: rgba(59, 130, 246, 0.1);
color: #2563eb;
}
.status-inreview[b-38woct9lgs],
.status-in.review[b-38woct9lgs] {
background: rgba(245, 158, 11, 0.1);
color: #d97706;
}
.status-approved[b-38woct9lgs] {
background: rgba(16, 185, 129, 0.1);
color: #059669;
}
.status-bound[b-38woct9lgs],
.status-active[b-38woct9lgs] {
background: rgba(34, 197, 94, 0.1);
color: var(--success-600);
}
.status-declined[b-38woct9lgs] {
background: rgba(239, 68, 68, 0.1);
color: var(--error-600);
}
.status-pending[b-38woct9lgs] {
background: rgba(245, 158, 11, 0.1);
color: #d97706;
}
.status-paid[b-38woct9lgs] {
background: rgba(34, 197, 94, 0.1);
color: var(--success-600);
}
/* Icon Button */
.btn-icon-sm[b-38woct9lgs] {
width: 32px;
height: 32px;
border-radius: 8px;
border: 1px solid var(--border-medium);
background: white;
color: var(--text-secondary);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
padding: 0;
}
.btn-icon-sm:hover[b-38woct9lgs] {
background: var(--brand-50);
border-color: var(--brand-300);
color: var(--brand-600);
}
/* Empty State */
.empty-state[b-38woct9lgs] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
text-align: center;
}
.empty-icon[b-38woct9lgs] {
width: 72px;
height: 72px;
border-radius: 18px;
background: var(--neutral-100);
color: var(--text-muted);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
margin-bottom: 20px;
}
.empty-text[b-38woct9lgs] {
font-size: 1.0625rem;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 6px 0;
}
.empty-subtext[b-38woct9lgs] {
font-size: 0.875rem;
color: var(--text-muted);
max-width: 300px;
}
/* ========================================
Form Controls
======================================== */
.form-select.form-select-sm[b-38woct9lgs] {
padding: 8px 32px 8px 12px;
font-size: 0.8125rem;
font-weight: 500;
border-radius: 8px;
border: 1px solid var(--border-medium);
background-color: white;
min-width: 140px;
}
.form-select.form-select-sm:focus[b-38woct9lgs] {
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
outline: none;
}
/* Button Styles */
.btn.btn-sm[b-38woct9lgs] {
padding: 6px 12px;
font-size: 0.8125rem;
font-weight: 600;
border-radius: 6px;
}
.btn.btn-outline-primary[b-38woct9lgs] {
background: white;
border: 1px solid var(--brand-500);
color: var(--brand-600);
}
.btn.btn-outline-primary:hover[b-38woct9lgs] {
background: var(--brand-50);
border-color: var(--brand-600);
color: var(--brand-700);
}
/* ========================================
Responsive Adjustments
======================================== */
@media (max-width: 768px) {
.page-header[b-38woct9lgs] {
padding: 16px 20px 20px;
}
.bank-header-info[b-38woct9lgs] {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.header-content[b-38woct9lgs] {
flex-direction: column;
align-items: flex-start;
}
.card-header[b-38woct9lgs] {
flex-direction: column;
align-items: flex-start;
}
.card-header-actions[b-38woct9lgs] {
width: 100%;
}
.search-box input[b-38woct9lgs] {
width: 100%;
min-width: auto;
}
.users-grid[b-38woct9lgs] {
grid-template-columns: 1fr;
}
}
/* /Components/Pages/Applications/ApplicationInvoicePreviewPage.razor.rz.scp.css */
/* ============================================================================
Application Invoice Preview — scoped document styles (feature 062)
POSITION, stated so its absence of theme tokens is not read as an oversight:
the document body is component-scoped CSS and promotes NOTHING into
wwwroot/leca-theme.css. A printable document is a single-use artefact with
print-specific colour requirements (print-color-adjust: exact on every filled
band) and no second consumer; promoting its rules would mint a global family
for one page. Both existing printable documents in this app already made the
same call — PremiumEstimatePreviewPage.razor.css (651 lines) and
InvoicePreviewPage.razor.css (200) contain zero var(--…) references between
them. The CHROME (the print button, the bi-* icons) uses the theme canon.
Where the theme has an equivalent token, its VALUE is used literally and the
token is named in a comment, so the two cannot drift silently. A var(--…) is
deliberately NOT used inside a printed filled band: a token that fails to
resolve in a print context yields no colour at all.
Rules here were COPIED from PremiumEstimatePreviewPage.razor.css, not shared.
Blazor stamps each component's rules with its own b-* scope attribute, so that
page's class names are unreachable from this component — an attempt to share
them produces a page whose rules match nothing, with a completely clean build.
TRAP: no bare canonical selector (.btn / .card / .badge / .form-control) may
appear in this file. CSS isolation compiles such a rule to .btn[b-xxxxxxxx],
which OUTRANKS the theme's canonical .btn for every button in the component,
silently. Hence the .appinv-* prefix on everything.
============================================================================ */
/* ── Skeleton (never flash an empty or $0.00 document) ───────────────────── */
@keyframes appinv-skel-pulse-b-yotd4m6rck {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.appinv-skel-block[b-yotd4m6rck] {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: appinv-skel-pulse-b-yotd4m6rck 1.5s ease-in-out infinite;
border-radius: 4px;
}
.appinv-skeleton[b-yotd4m6rck] {
min-height: 60vh;
}
.appinv-skel-action-bar[b-yotd4m6rck] {
display: flex;
justify-content: flex-end;
padding: 12px 32px;
background: white;
border-bottom: 1px solid #e2e8f0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.appinv-skel-document[b-yotd4m6rck] {
max-width: 800px;
margin: 32px auto;
background: white;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04);
padding: 48px;
}
.appinv-skel-header[b-yotd4m6rck] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 24px;
}
.appinv-skel-meta[b-yotd4m6rck] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px 24px;
}
.appinv-skel-table[b-yotd4m6rck] {
border: 1px solid #e2e8f0;
border-radius: 8px;
overflow: hidden;
}
.appinv-skel-table-header[b-yotd4m6rck],
.appinv-skel-row[b-yotd4m6rck],
.appinv-skel-total[b-yotd4m6rck] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 20px;
border-bottom: 1px solid #f1f5f9;
}
.appinv-skel-table-header[b-yotd4m6rck] {
background: #f8fafc;
}
.appinv-skel-total[b-yotd4m6rck] {
border-bottom: none;
background: #f1f5f9;
}
/* ── Notices (missing invoice / generic not-found) ───────────────────────── */
.appinv-notice-wrap[b-yotd4m6rck] {
display: flex;
align-items: center;
justify-content: center;
min-height: 60vh;
padding: 24px;
}
/* Deliberately NOT `alert alert-*`: this page carries its own chrome on the
chromeless PrintableLayout, and a bare canonical selector in a scoped sheet
would shadow the theme. */
.appinv-notice[b-yotd4m6rck] {
display: flex;
align-items: flex-start;
gap: 10px;
max-width: 520px;
padding: 16px 20px;
border-radius: 10px;
font-size: 14px;
line-height: 1.6;
background: white;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04);
}
.appinv-notice i[b-yotd4m6rck] {
font-size: 16px;
line-height: 1.5;
flex-shrink: 0;
}
.appinv-notice-pending[b-yotd4m6rck] {
border-left: 4px solid #f59e0b;
color: #78350f;
}
.appinv-notice-error[b-yotd4m6rck] {
border-left: 4px solid #dc2626;
color: #7f1d1d;
}
/* ── Action bar (chrome — hidden on print) ──────────────────────────────── */
.appinv-action-bar[b-yotd4m6rck] {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 12px 32px;
background: white;
border-bottom: 1px solid #e2e8f0;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.appinv-print-group[b-yotd4m6rck] {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
.appinv-btn-print[b-yotd4m6rck] {
display: inline-flex;
align-items: center;
gap: 8px;
/* theme token --brand-700 (#003760) */
background: #003760;
color: white;
border: none;
padding: 10px 20px;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s;
}
.appinv-btn-print:hover[b-yotd4m6rck] {
/* theme token --brand-800 (#002540) */
background: #002540;
}
.appinv-print-hint[b-yotd4m6rck] {
font-size: 11px;
color: #94a3b8;
font-style: italic;
}
/* ── Document shell ─────────────────────────────────────────────────────── */
.appinv-document[b-yotd4m6rck] {
max-width: 800px;
margin: 32px auto;
background: white;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04);
padding: 48px;
}
/* ── Header ─────────────────────────────────────────────────────────────── */
.appinv-header[b-yotd4m6rck] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
margin-bottom: 20px;
}
.appinv-header-left[b-yotd4m6rck] {
flex: 1 1 auto;
min-width: 0;
}
/* lp3_wlogo.jpg is 500x115 (≈4.35:1). This feature is its first consumer in the
repo, so there is no existing sizing precedent to copy — the height is chosen
to sit level with the Lloyd's mark opposite it. */
.appinv-brand-logo[b-yotd4m6rck] {
height: 46px;
width: auto;
max-width: 100%;
display: block;
}
.appinv-header-right[b-yotd4m6rck] {
flex: 0 0 auto;
text-align: right;
display: flex;
flex-direction: column;
align-items: flex-end;
}
/* Lloyds.png is 878x200 (≈4.39:1) — the same mark and height the estimate page
already uses. */
.appinv-lloyds-logo[b-yotd4m6rck] {
height: 40px;
width: auto;
max-width: 100%;
margin-bottom: 4px;
}
.appinv-header-rating[b-yotd4m6rck] {
font-size: 12px;
color: #64748b;
margin: 0;
}
/* ── Metadata strip: two rows of three cells, hairline-separated ─────────── */
.appinv-meta[b-yotd4m6rck] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
border-top: 1px solid #e2e8f0;
}
.appinv-meta-cell[b-yotd4m6rck] {
display: flex;
flex-direction: column;
gap: 2px;
padding: 10px 16px 10px 0;
border-bottom: 1px solid #f1f5f9;
min-width: 0;
}
.appinv-meta-cell:nth-child(3n)[b-yotd4m6rck] {
padding-right: 0;
}
.appinv-meta-label[b-yotd4m6rck] {
font-size: 11px;
font-weight: 600;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* A long borrower name or property address WRAPS rather than truncating or
forcing horizontal scroll — no content may be hidden at any width. */
.appinv-meta-value[b-yotd4m6rck] {
font-size: 14px;
color: #1e293b;
font-weight: 500;
overflow-wrap: break-word;
word-break: break-word;
}
.appinv-meta-cell-empty[b-yotd4m6rck] {
border-bottom: 1px solid #f1f5f9;
}
/* The heavier closing rule. Filled, so it needs print-color-adjust below. */
.appinv-teal-divider[b-yotd4m6rck] {
border: none;
height: 3px;
/* theme tokens --brand-700 (#003760) → --brand-400 (#3397C7) */
background: linear-gradient(90deg, #003760, #3397c7);
margin: 0 0 26px 0;
opacity: 1;
}
/* ── Title and subtitle ─────────────────────────────────────────────────── */
.appinv-title[b-yotd4m6rck] {
font-size: 26px;
font-weight: 700;
/* theme token --brand-700 (#003760) */
color: #003760;
margin: 0 0 8px 0;
letter-spacing: -0.01em;
}
.appinv-subtitle[b-yotd4m6rck] {
font-size: 13.5px;
line-height: 1.65;
color: #64748b;
margin: 0 0 22px 0;
}
/* ── Cost table ─────────────────────────────────────────────────────────── */
.appinv-cost-table[b-yotd4m6rck] {
border: 1px solid #e2e8f0;
border-radius: 8px 8px 0 0;
border-bottom: none;
}
.appinv-cost-header[b-yotd4m6rck] {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 11px 20px;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
border-radius: 8px 8px 0 0;
font-size: 12px;
font-weight: 700;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.appinv-cost-header-amount[b-yotd4m6rck] {
text-align: right;
}
.appinv-cost-row[b-yotd4m6rck] {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 13px 20px;
border-bottom: 1px solid #f1f5f9;
}
.appinv-cost-row:last-of-type[b-yotd4m6rck] {
border-bottom: none;
}
.appinv-cost-info[b-yotd4m6rck] {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.appinv-cost-name[b-yotd4m6rck] {
font-size: 14.5px;
font-weight: 600;
color: #1e293b;
overflow-wrap: break-word;
}
.appinv-cost-description[b-yotd4m6rck] {
font-size: 12.5px;
color: #94a3b8;
overflow-wrap: break-word;
}
.appinv-cost-amount[b-yotd4m6rck] {
font-size: 15px;
font-weight: 700;
color: #1e293b;
white-space: nowrap;
text-align: right;
}
/* A commission deduction is stored NEGATIVE and must visibly reduce the total. */
.appinv-cost-amount-credit[b-yotd4m6rck] {
color: #047857; /* theme token --success-700 */
}
/* ── Total band (filled — print-color-adjust is load-bearing) ────────────── */
.appinv-total-band[b-yotd4m6rck] {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 16px 20px;
/* theme token --brand-700 (#003760); literal value, not var(), because a
token that fails to resolve in a print context yields no colour at all. */
background: #003760;
border-radius: 0 0 8px 8px;
margin-bottom: 24px;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.appinv-total-band-draft[b-yotd4m6rck] {
/* theme token --brand-800 (#002540) — muted so a Draft's band reads as
provisional, without changing the layout. This is now the ONLY visual
difference between a Draft and an issued bill: the amber draft banner
that used to accompany it was removed on 2026-08-13 at Dennis's request. */
background: #002540;
}
.appinv-total-label[b-yotd4m6rck] {
font-size: 15px;
font-weight: 700;
color: white;
}
.appinv-total-amount[b-yotd4m6rck] {
font-size: 24px;
font-weight: 700;
color: white;
white-space: nowrap;
}
/* ── Billing panel ──────────────────────────────────────────────────────── */
.appinv-billing-panel[b-yotd4m6rck] {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 16px 20px;
margin-bottom: 22px;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.appinv-billing-heading[b-yotd4m6rck] {
font-size: 15px;
font-weight: 700;
color: #1e293b;
margin: 0 0 6px 0;
}
.appinv-billing-intro[b-yotd4m6rck] {
font-size: 13px;
color: #475569;
margin: 0 0 10px 0;
line-height: 1.6;
}
.appinv-billing-contacts[b-yotd4m6rck] {
display: flex;
flex-wrap: wrap;
gap: 8px 28px;
}
.appinv-billing-contact[b-yotd4m6rck] {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
/* theme token --brand-700 (#003760) */
color: #003760;
overflow-wrap: anywhere;
}
.appinv-billing-note[b-yotd4m6rck] {
font-size: 11.5px;
color: #94a3b8;
margin: 10px 0 0 0;
line-height: 1.6;
}
/* ── Payment terms ──────────────────────────────────────────────────────── */
.appinv-terms[b-yotd4m6rck] {
margin-bottom: 24px;
}
.appinv-terms-title[b-yotd4m6rck] {
font-size: 15px;
font-weight: 700;
color: #1e293b;
margin: 0 0 8px 0;
padding-bottom: 8px;
border-bottom: 1px solid #e2e8f0;
}
.appinv-terms-list[b-yotd4m6rck] {
list-style: disc;
padding-left: 20px;
margin: 0;
}
.appinv-terms-list li[b-yotd4m6rck] {
font-size: 12.5px;
line-height: 1.7;
color: #64748b;
margin-bottom: 5px;
overflow-wrap: break-word;
}
/* ── Footer ─────────────────────────────────────────────────────────────── */
.appinv-footer[b-yotd4m6rck] {
display: flex;
justify-content: space-between;
gap: 16px;
padding-top: 18px;
border-top: 1px solid #e2e8f0;
}
.appinv-footer-left[b-yotd4m6rck],
.appinv-footer-right[b-yotd4m6rck] {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.appinv-footer-right[b-yotd4m6rck] {
text-align: right;
}
.appinv-footer-company[b-yotd4m6rck] {
font-size: 12px;
font-weight: 600;
/* theme token --brand-700 (#003760) */
color: #003760;
}
.appinv-footer-ref[b-yotd4m6rck] {
font-size: 12px;
font-weight: 500;
color: #475569;
}
.appinv-footer-detail[b-yotd4m6rck] {
font-size: 11px;
color: #94a3b8;
}
/* ============================================================================
Print — one page at the browser's default (100%) scale, Letter and A4
============================================================================ */
@page {
margin: 8mm 10mm 8mm 10mm;
size: auto;
}
@media print {
.no-print[b-yotd4m6rck] {
display: none !important;
}
.appinv-document[b-yotd4m6rck] {
margin: 0;
padding: 10px 28px;
box-shadow: none;
border-radius: 0;
max-width: 100%;
}
/* EVERY filled band must force its fill, or the navy total bar, the grey
cost header, the grey billing panel and the gradient rule all print white. */
.appinv-total-band[b-yotd4m6rck],
.appinv-cost-header[b-yotd4m6rck],
.appinv-billing-panel[b-yotd4m6rck],
.appinv-teal-divider[b-yotd4m6rck] {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.appinv-cost-table[b-yotd4m6rck],
.appinv-cost-row[b-yotd4m6rck],
.appinv-total-band[b-yotd4m6rck],
.appinv-billing-panel[b-yotd4m6rck],
.appinv-terms[b-yotd4m6rck],
.appinv-footer[b-yotd4m6rck],
.appinv-header[b-yotd4m6rck],
.appinv-meta[b-yotd4m6rck] {
page-break-inside: avoid;
break-inside: avoid;
}
/* Tighten the vertical rhythm until the document fits one page at 100%. */
.appinv-header[b-yotd4m6rck] {
margin-bottom: 12px;
}
.appinv-brand-logo[b-yotd4m6rck] {
height: 38px;
}
.appinv-lloyds-logo[b-yotd4m6rck] {
height: 32px;
}
.appinv-header-rating[b-yotd4m6rck] {
font-size: 11px;
}
.appinv-meta-cell[b-yotd4m6rck] {
padding: 6px 16px 6px 0;
}
.appinv-teal-divider[b-yotd4m6rck] {
margin-bottom: 14px;
}
.appinv-title[b-yotd4m6rck] {
font-size: 22px;
margin-bottom: 6px;
}
.appinv-subtitle[b-yotd4m6rck] {
font-size: 12.5px;
line-height: 1.5;
margin-bottom: 14px;
}
.appinv-cost-header[b-yotd4m6rck] {
padding: 7px 16px;
}
.appinv-cost-row[b-yotd4m6rck] {
padding: 8px 16px;
}
.appinv-cost-name[b-yotd4m6rck] {
font-size: 13.5px;
}
.appinv-cost-description[b-yotd4m6rck] {
font-size: 11.5px;
}
.appinv-cost-amount[b-yotd4m6rck] {
font-size: 14px;
}
.appinv-total-band[b-yotd4m6rck] {
padding: 11px 16px;
margin-bottom: 14px;
}
.appinv-total-label[b-yotd4m6rck] {
font-size: 14px;
}
.appinv-total-amount[b-yotd4m6rck] {
font-size: 20px;
}
.appinv-billing-panel[b-yotd4m6rck] {
padding: 10px 16px;
margin-bottom: 12px;
}
.appinv-billing-heading[b-yotd4m6rck] {
font-size: 13.5px;
}
.appinv-billing-intro[b-yotd4m6rck] {
font-size: 12px;
margin-bottom: 6px;
}
.appinv-billing-contact[b-yotd4m6rck] {
font-size: 12px;
}
.appinv-billing-note[b-yotd4m6rck] {
font-size: 11px;
margin-top: 6px;
}
.appinv-terms[b-yotd4m6rck] {
margin-bottom: 12px;
}
.appinv-terms-title[b-yotd4m6rck] {
font-size: 13.5px;
margin-bottom: 6px;
padding-bottom: 6px;
}
.appinv-terms-list li[b-yotd4m6rck] {
font-size: 11.5px;
line-height: 1.5;
margin-bottom: 3px;
}
.appinv-footer[b-yotd4m6rck] {
padding-top: 10px;
}
}
/* ============================================================================
Responsive — NEW work, not inherited.
The reference page (PremiumEstimatePreviewPage.razor.css) contains exactly one
media query and it is @media print: its document is a fixed 800px box with
48px padding, which at a 375px viewport spends a quarter of the width on
padding. Copying it would fail the responsive requirement, so these two
breakpoints are written for this page. Nothing is hidden at any width, and
there is deliberately no overflow: hidden on the document.
============================================================================ */
@media (max-width: 768px) {
.appinv-action-bar[b-yotd4m6rck] {
padding: 10px 16px;
}
.appinv-document[b-yotd4m6rck],
.appinv-skel-document[b-yotd4m6rck] {
margin: 16px 12px;
padding: 24px;
}
/* Stack the two marks, both left-aligned, rather than squeezing them. */
.appinv-header[b-yotd4m6rck] {
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.appinv-header-right[b-yotd4m6rck] {
text-align: left;
align-items: flex-start;
}
.appinv-meta[b-yotd4m6rck],
.appinv-skel-meta[b-yotd4m6rck] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.appinv-meta-cell:nth-child(3n)[b-yotd4m6rck] {
padding-right: 16px;
}
.appinv-meta-cell:nth-child(2n)[b-yotd4m6rck] {
padding-right: 0;
}
/* An empty third cell in a two-column grid is just a blank row — drop it. */
.appinv-meta-cell-empty[b-yotd4m6rck] {
display: none;
}
.appinv-title[b-yotd4m6rck] {
font-size: 22px;
}
}
@media (max-width: 480px) {
.appinv-document[b-yotd4m6rck],
.appinv-skel-document[b-yotd4m6rck] {
margin: 12px 8px;
padding: 18px 16px;
}
.appinv-meta[b-yotd4m6rck],
.appinv-skel-meta[b-yotd4m6rck] {
grid-template-columns: minmax(0, 1fr);
}
.appinv-meta-cell[b-yotd4m6rck],
.appinv-meta-cell:nth-child(2n)[b-yotd4m6rck],
.appinv-meta-cell:nth-child(3n)[b-yotd4m6rck] {
padding-right: 0;
}
/* Label above amount, both left-aligned, so a long label never squeezes the
figure into a wrap or off the edge. */
.appinv-cost-row[b-yotd4m6rck],
.appinv-total-band[b-yotd4m6rck] {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.appinv-cost-amount[b-yotd4m6rck],
.appinv-total-amount[b-yotd4m6rck] {
text-align: left;
}
.appinv-cost-header-amount[b-yotd4m6rck] {
text-align: right;
}
.appinv-billing-contacts[b-yotd4m6rck] {
flex-direction: column;
gap: 6px;
}
.appinv-footer[b-yotd4m6rck] {
flex-direction: column;
gap: 12px;
}
.appinv-footer-right[b-yotd4m6rck] {
text-align: left;
}
.appinv-title[b-yotd4m6rck] {
font-size: 20px;
}
.appinv-total-amount[b-yotd4m6rck] {
font-size: 21px;
}
}
/* /Components/Pages/Applications/BorrowerQuestionnaireFlowPage.razor.rz.scp.css */
/* Feature 072 — the bank user's borrower-questionnaire page. Scoped, so nothing here can reach the
two existing intake pages (FR-001/FR-074). Colours and radii come from the theme tokens in
wwwroot/leca-theme.css; no new palette is introduced. */
.questionnaire-flow-page[b-3o4y0u8j6e] {
max-width: 1080px;
margin: 0 auto;
padding: 1.5rem 1rem 3rem;
}
/* ------------------------------------------------------------------------------------- header */
/* .page-head, .page-title and .page-subtitle used to be re-declared here. They are not any more:
.page-title and .page-subtitle are global (wwwroot/css/ipd-dashboard.css:23 and :32) and this page's
copies drifted from them — the title lost the canon's letter-spacing and took a different grey, and
the subtitle was 15px against the 14px every other page uses, capped at a 60ch measure nothing else
in the app uses, which is what made a full-width header band wrap mid-sentence. Deleting them is the
fix; the markup now uses the global pair plus mb-4/mb-2/me-2 utilities for spacing.
The brand-coloured title icon stays: it is the shared convention, matching VERAcheckAdminPage and
EmailQueueDetailsPage token for token. */
.page-title .bi[b-3o4y0u8j6e] {
color: var(--brand-500);
}
.loading-block[b-3o4y0u8j6e] {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 3rem 0;
color: var(--text-secondary);
}
/* --------------------------------------------------------------------------------- link panel */
.link-panel[b-3o4y0u8j6e] {
border: 1px solid var(--border-medium);
border-left-width: 4px;
border-radius: 10px;
background: #fff;
margin-bottom: 1.5rem;
overflow: hidden;
}
/* One accent per state, so which of the four states a reader is in is legible before they read a
word of it. Matches the four-state payment-card convention on the application detail page. */
.link-panel-live[b-3o4y0u8j6e] { border-left-color: var(--brand-500); }
.link-panel-expiringsoon[b-3o4y0u8j6e] { border-left-color: var(--warning-500); }
.link-panel-expired[b-3o4y0u8j6e] { border-left-color: var(--error-500); }
.link-panel-submitted[b-3o4y0u8j6e] { border-left-color: var(--success-500); }
.link-panel-head[b-3o4y0u8j6e] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--border-light, var(--neutral-200));
background: var(--neutral-50);
}
.link-panel-status[b-3o4y0u8j6e] {
display: flex;
align-items: center;
gap: 0.875rem;
}
.link-panel-icon[b-3o4y0u8j6e] {
display: grid;
place-items: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 8px;
background: #fff;
border: 1px solid var(--neutral-200);
font-size: 1.125rem;
color: var(--neutral-600);
}
.link-panel-live .link-panel-icon[b-3o4y0u8j6e] { color: var(--brand-600); border-color: var(--brand-100); }
.link-panel-expiringsoon .link-panel-icon[b-3o4y0u8j6e] { color: var(--warning-700); border-color: var(--warning-200); }
.link-panel-expired .link-panel-icon[b-3o4y0u8j6e] { color: var(--error-600); border-color: var(--error-200); }
.link-panel-submitted .link-panel-icon[b-3o4y0u8j6e] { color: var(--success-600); border-color: var(--success-100); }
.link-panel-title[b-3o4y0u8j6e] {
display: block;
font-weight: 700;
color: var(--text-primary);
}
.link-panel-subtitle[b-3o4y0u8j6e] {
display: block;
font-size: 0.8125rem;
color: var(--text-secondary);
}
.link-panel-meta[b-3o4y0u8j6e] {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.link-panel-body[b-3o4y0u8j6e] {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
padding: 1.125rem 1.25rem;
}
.link-actions[b-3o4y0u8j6e] {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
/* The revealed URL. A block, never an anchor — a live link invites the bank user to click
through and consume the borrower's own questionnaire. */
.link-revealed[b-3o4y0u8j6e] {
display: block;
width: 100%;
padding: 0.625rem 0.75rem;
border: 1px dashed var(--neutral-300);
border-radius: 6px;
background: var(--neutral-50);
color: var(--neutral-800);
font-size: 0.8125rem;
word-break: break-all;
}
.link-hint[b-3o4y0u8j6e] {
margin: 0;
max-width: 72ch;
font-size: 0.8125rem;
color: var(--text-secondary);
}
/* ----------------------------------------------------------------------------- waiting banner */
.waiting-banner[b-3o4y0u8j6e] {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 1rem 1.25rem;
margin-bottom: 1.5rem;
border: 1px solid var(--warning-200);
border-radius: 10px;
background: var(--warning-50);
/* Body copy in a neutral, and only the title in the warning ramp: this state is "wait", not
"error", and the theme's warning-900 is red enough to read as a failure. */
color: var(--neutral-700);
}
.waiting-banner .bi[b-3o4y0u8j6e] {
font-size: 1.125rem;
margin-top: 0.125rem;
color: var(--warning-700);
}
.waiting-banner-title[b-3o4y0u8j6e] {
font-weight: 700;
color: var(--warning-800);
}
.waiting-banner-text[b-3o4y0u8j6e] {
font-size: 0.875rem;
max-width: 78ch;
}
/* ----------------------------------------------------------------------------------- form cards */
.form-card[b-3o4y0u8j6e] {
padding: 1.25rem 1.25rem 1.5rem;
margin-bottom: 1.25rem;
border: 1px solid var(--border-medium);
border-radius: 10px;
background: #fff;
}
.form-card-head[b-3o4y0u8j6e] {
margin-bottom: 1.25rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--neutral-200);
}
.form-card-title[b-3o4y0u8j6e] {
margin: 0;
font-size: 1.0625rem;
font-weight: 700;
color: var(--text-primary);
}
.form-card-subtitle[b-3o4y0u8j6e] {
margin: 0.25rem 0 0;
font-size: 0.875rem;
color: var(--text-secondary);
}
.assumed-note[b-3o4y0u8j6e] {
margin: 0;
padding: 0.5rem 0.75rem;
border-radius: 6px;
background: var(--info-50);
color: var(--info-900);
font-size: 0.8125rem;
}
/* --------------------------------------------------------------------------------- page actions */
.page-actions[b-3o4y0u8j6e] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
padding-top: 0.5rem;
}
.page-actions-note[b-3o4y0u8j6e] {
font-size: 0.8125rem;
color: var(--text-secondary);
}
.page-actions-buttons[b-3o4y0u8j6e] {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
/* /Components/Pages/Applications/Components/ApplicationStatusHeader.razor.rz.scp.css */
/* Application Status Header - Compact & Noticeable Design */
.application-status-header[b-2o26za44gy] {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 12px;
margin-bottom: 12px;
border-bottom: 2px solid #E5E7EB;
}
.status-badge[b-2o26za44gy] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 16px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.3px;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.status-badge i[b-2o26za44gy] {
font-size: 13px;
}
.app-number-display[b-2o26za44gy] {
display: flex;
align-items: center;
gap: 6px;
}
.app-number-text[b-2o26za44gy] {
font-size: 12px;
font-weight: 700;
color: #374151;
font-family: 'Courier New', monospace;
letter-spacing: -0.3px;
background-color: #F9FAFB;
padding: 4px 10px;
border-radius: 6px;
border: 1px solid #E5E7EB;
}
/* Status Badge Color Variants */
.status-draft[b-2o26za44gy] {
background-color: #6B7280;
color: #FFFFFF;
}
.status-submitted[b-2o26za44gy] {
background-color: #3B82F6;
color: #FFFFFF;
}
.status-in-review[b-2o26za44gy] {
background-color: #F59E0B;
color: #FFFFFF;
}
.status-awaiting-info[b-2o26za44gy] {
background-color: #F97316;
color: #FFFFFF;
}
.status-approved[b-2o26za44gy] {
background-color: #10B981;
color: #FFFFFF;
}
.status-declined[b-2o26za44gy] {
background-color: #EF4444;
color: #FFFFFF;
}
.status-bound[b-2o26za44gy] {
background-color: #8B5CF6;
color: #FFFFFF;
}
.status-cancelled[b-2o26za44gy] {
background-color: #9CA3AF;
color: #FFFFFF;
}
.status-referral[b-2o26za44gy]{
background-color: #6366F1;
color: #FFFFFF;
}
/* Feature 072 — AwaitingBorrower ("Waiting for Borrower"). */
.status-awaiting-borrower[b-2o26za44gy] {
background-color: #0D9488;
color: #FFFFFF;
}
.status-unknown[b-2o26za44gy] {
background-color: #F59E0B;
color: #FFFFFF;
}
@media (max-width: 576px) {
.application-status-header[b-2o26za44gy] {
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding-bottom: 10px;
margin-bottom: 10px;
}
.app-number-text[b-2o26za44gy] {
font-size: 11px;
padding: 3px 8px;
}
}
/* /Components/Pages/Applications/Components/CoverageEligibilityReview.razor.rz.scp.css */
.eligibility-conditions-card[b-lwmaaisam5] {
border: 1px solid #e5e7eb;
border-radius: 10px;
background: #fff;
overflow: hidden;
}
.eligibility-conditions-header[b-lwmaaisam5] {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 16px 20px;
background: #f8fafc;
border-bottom: 1px solid #e5e7eb;
}
.eligibility-conditions-icon i[b-lwmaaisam5] {
color: #e11d48;
font-size: 22px;
}
.eligibility-conditions-title[b-lwmaaisam5] {
color: #be123c;
font-weight: 700;
font-size: 1rem;
margin: 0 0 2px;
}
.eligibility-conditions-subtitle[b-lwmaaisam5] {
color: #6b7280;
font-size: 0.8125rem;
margin: 0;
}
.eligibility-condition-item + .eligibility-condition-item[b-lwmaaisam5] {
border-top: 1px solid #f1f5f9;
}
.eligibility-condition-toggle[b-lwmaaisam5] {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 14px 20px;
background: none;
border: none;
cursor: pointer;
text-align: left;
}
.eligibility-condition-toggle:hover[b-lwmaaisam5] {
background: #f8fafc;
}
.condition-icon[b-lwmaaisam5] {
font-size: 16px;
color: #334155;
}
.condition-title[b-lwmaaisam5] {
flex: 1;
font-weight: 600;
font-size: 0.9rem;
color: #111827;
}
.condition-view-details[b-lwmaaisam5] {
color: #2563eb;
font-size: 0.8125rem;
font-weight: 500;
white-space: nowrap;
}
.eligibility-condition-details[b-lwmaaisam5] {
padding: 0 20px 16px 48px;
color: #475569;
font-size: 0.875rem;
line-height: 1.6;
}
.condition-description[b-lwmaaisam5] {
margin: 0;
}
/* Structured callout box below a condition's description */
.condition-callout[b-lwmaaisam5] {
margin-top: 12px;
border-radius: 8px;
padding: 12px 16px;
border: 1px solid #e5e7eb;
background: #fff;
}
.callout-title[b-lwmaaisam5] {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #475569;
margin-bottom: 6px;
}
.callout-items[b-lwmaaisam5] {
margin: 0;
padding-left: 18px;
}
.callout-items li[b-lwmaaisam5] {
margin-bottom: 4px;
}
.callout-items li:last-child[b-lwmaaisam5] {
margin-bottom: 0;
}
.callout-text[b-lwmaaisam5] {
margin: 0;
}
.callout-footer[b-lwmaaisam5] {
margin: 10px 0 0;
font-weight: 600;
}
/* Warning (amber) — e.g. storage-tank exception criteria */
.condition-callout.callout-warning[b-lwmaaisam5] {
background: #fffbeb;
border-color: #fde68a;
}
.condition-callout.callout-warning .callout-title[b-lwmaaisam5] {
color: #92400e;
}
.condition-callout.callout-warning .callout-footer[b-lwmaaisam5] {
color: #b45309;
}
/* Info (blue) — e.g. regulatory definition */
.condition-callout.callout-info[b-lwmaaisam5] {
background: #eff6ff;
border-color: #bfdbfe;
}
.condition-callout.callout-info .callout-title[b-lwmaaisam5] {
color: #1d4ed8;
}
.eligibility-agreement-card[b-lwmaaisam5] {
margin-top: 16px;
border: 1px solid #e5e7eb;
border-radius: 10px;
background: #fff;
padding: 18px 20px;
}
.eligibility-agreement-text h5[b-lwmaaisam5] {
font-weight: 700;
font-size: 0.95rem;
margin-bottom: 4px;
}
.eligibility-agreement-text p[b-lwmaaisam5] {
color: #1e3a5f;
font-size: 0.875rem;
margin-bottom: 14px;
}
.eligibility-agreement-options[b-lwmaaisam5] {
display: flex;
flex-direction: column;
gap: 10px;
}
.eligibility-option[b-lwmaaisam5] {
display: flex;
gap: 12px;
align-items: flex-start;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 12px 14px;
cursor: pointer;
transition: border-color 0.15s ease, background-color 0.15s ease;
margin: 0;
}
.eligibility-option:hover[b-lwmaaisam5] {
border-color: #94a3b8;
}
.eligibility-option.selected-yes[b-lwmaaisam5] {
border-color: #16a34a;
background: #f0fdf4;
}
.eligibility-option.selected-no[b-lwmaaisam5] {
border-color: #d97706;
background: #fffbeb;
}
.eligibility-option input[type="radio"][b-lwmaaisam5] {
margin-top: 3px;
}
.eligibility-option-content[b-lwmaaisam5] {
display: flex;
flex-direction: column;
gap: 2px;
}
.eligibility-option-label[b-lwmaaisam5] {
font-weight: 600;
font-size: 0.9rem;
color: #111827;
}
.eligibility-option.selected-yes .eligibility-option-label[b-lwmaaisam5] {
color: #15803d;
}
.eligibility-option.selected-no .eligibility-option-label[b-lwmaaisam5] {
color: #b45309;
}
.eligibility-option-desc[b-lwmaaisam5] {
color: #6b7280;
font-size: 0.8125rem;
}
/* /Components/Pages/Applications/Components/DocumentUploadArea.razor.rz.scp.css */
/* Upload Section */
.upload-section[b-5x85yx5aor] {
background: #F9FAFB;
border: 1px solid #E5E7EB;
border-radius: 8px;
padding: 16px;
margin-top: 16px;
transition: all 0.3s ease;
}
/* Required upload section styling */
.upload-section.required-upload[b-5x85yx5aor] {
background: #FFFBEB;
border: 2px solid #FCD34D;
border-left: 4px solid #F59E0B;
}
.upload-required-notice[b-5x85yx5aor] {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
margin-bottom: 12px;
background: #FEF3C7;
border: 1px solid #FCD34D;
border-radius: 6px;
color: #92400E;
font-size: 13px;
font-weight: 500;
}
.upload-required-notice i[b-5x85yx5aor] {
font-size: 16px;
color: #F59E0B;
flex-shrink: 0;
}
.required-upload .upload-area[b-5x85yx5aor] {
border-color: #FCD34D;
background: #FFFBEB;
}
.required-upload .upload-area:hover[b-5x85yx5aor] {
border-color: #F59E0B;
background: #FEF3C7;
}
.upload-header[b-5x85yx5aor] {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
color: var(--brand-500);
}
.required-upload .upload-header[b-5x85yx5aor] {
color: #92400E;
}
.upload-header i[b-5x85yx5aor] {
font-size: 20px;
}
.upload-title[b-5x85yx5aor] {
font-size: 14px;
font-weight: 600;
}
.upload-area[b-5x85yx5aor] {
position: relative;
border: 2px dashed #D1D5DB;
border-radius: 8px;
padding: 32px 24px;
text-align: center;
background: white;
cursor: pointer;
transition: all 0.2s ease;
}
.upload-area:hover[b-5x85yx5aor] {
border-color: var(--brand-500);
background: #F0F9FF;
}
.upload-prompt[b-5x85yx5aor] {
display: block;
cursor: pointer;
}
.upload-icon[b-5x85yx5aor] {
font-size: 48px;
color: #60A5FA;
margin-bottom: 8px;
}
.upload-text[b-5x85yx5aor] {
font-size: 14px;
font-weight: 500;
color: #374151;
margin: 0 0 4px 0;
}
.upload-hint[b-5x85yx5aor] {
font-size: 12px;
color: #6B7280;
margin: 0;
}
.uploaded-files[b-5x85yx5aor] {
display: flex;
flex-direction: column;
gap: 8px;
}
.uploaded-file-item[b-5x85yx5aor] {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: white;
border: 1px solid #E5E7EB;
border-radius: 6px;
}
.uploaded-file-item i[b-5x85yx5aor] {
font-size: 18px;
}
.file-name[b-5x85yx5aor] {
flex: 1;
font-size: 13px;
color: #374151;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.btn-remove-file[b-5x85yx5aor] {
background: none;
border: none;
color: #EF4444;
cursor: pointer;
padding: 4px;
display: flex;
align-items: center;
transition: color 0.2s ease;
}
.btn-remove-file:hover[b-5x85yx5aor] {
color: var(--error-600);
}
.btn-remove-file i[b-5x85yx5aor] {
font-size: 16px;
}
.btn-remove-file:disabled[b-5x85yx5aor] {
opacity: 0.6;
cursor: not-allowed;
}
/* Required indicator */
.required[b-5x85yx5aor] {
color: var(--error-600);
font-weight: 600;
}
/* /Components/Pages/Applications/Components/PremiumBreakdownCard.razor.rz.scp.css */
/* Premium Card — Modern Clean Design */
.premium-card[b-4j9i4q89e0] {
background: #FFFFFF;
border: 1px solid #E5E7EB;
border-radius: 12px;
padding: 20px;
margin-bottom: 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}
/* Header */
.premium-card-header[b-4j9i4q89e0] {
margin-bottom: 16px;
}
.premium-card-header h3[b-4j9i4q89e0] {
font-size: 20px;
font-weight: 700;
color: #111827;
margin: 0 0 4px 0;
}
.premium-card-date[b-4j9i4q89e0] {
font-size: 12px;
color: #9CA3AF;
}
/* Line Items */
.premium-line-items[b-4j9i4q89e0] {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 12px;
}
.line-item[b-4j9i4q89e0] {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 8px 10px;
border-radius: 6px;
background: #F9FAFB;
}
.line-item-left[b-4j9i4q89e0] {
display: flex;
flex-direction: column;
gap: 2px;
}
.line-item-label[b-4j9i4q89e0] {
font-size: 14px;
font-weight: 500;
color: #374151;
}
.line-item-sub[b-4j9i4q89e0] {
font-size: 11px;
color: #9CA3AF;
}
.line-item-value[b-4j9i4q89e0] {
font-size: 14px;
font-weight: 600;
color: #111827;
white-space: nowrap;
}
/* Borrower Pays Highlight */
.line-item.borrower-pays[b-4j9i4q89e0] {
background: #FFF7ED;
border: 1px dashed #FBBF24;
}
.line-item.borrower-pays .line-item-value[b-4j9i4q89e0] {
color: #9CA3AF;
text-decoration: line-through;
}
.badge-borrower-pays[b-4j9i4q89e0] {
display: inline-block;
font-size: 10px;
font-weight: 700;
color: #B45309;
background: #FDE68A;
padding: 1px 6px;
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 0.3px;
margin-top: 2px;
width: fit-content;
}
/* VERAcheck Study Badge */
.badge-veracheck[b-4j9i4q89e0] {
display: inline-block;
font-size: 10px;
font-weight: 600;
color: #92400E;
background: #FEF3C7;
border: 1px solid #FCD34D;
padding: 2px 8px;
border-radius: 4px;
margin-top: 3px;
width: fit-content;
letter-spacing: 0.2px;
}
/* Detail Toggle */
.detail-toggle[b-4j9i4q89e0] {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
padding: 8px;
margin-bottom: 8px;
background: #F3F4F6;
border: none;
border-radius: 6px;
color: #6B7280;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.detail-toggle:hover[b-4j9i4q89e0] {
background: #E5E7EB;
color: #374151;
}
.detail-toggle i[b-4j9i4q89e0] {
font-size: 12px;
transition: transform 0.2s;
}
/* Detail Panel (Collapsible) */
.detail-panel[b-4j9i4q89e0] {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.detail-panel.expanded[b-4j9i4q89e0] {
max-height: 600px;
}
.detail-items[b-4j9i4q89e0] {
padding: 14px;
background: #F9FAFB;
border-radius: 8px;
margin-bottom: 12px;
display: flex;
flex-direction: column;
gap: 7px;
}
.detail-section-title[b-4j9i4q89e0] {
font-size: 10px;
font-weight: 700;
color: #9CA3AF;
letter-spacing: 0.8px;
text-transform: uppercase;
margin-top: 2px;
}
.detail-row[b-4j9i4q89e0] {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.detail-label[b-4j9i4q89e0] {
font-size: 13px;
color: #6B7280;
}
.detail-sub[b-4j9i4q89e0] {
font-size: 11px;
color: #9CA3AF;
margin-left: 4px;
}
.detail-value[b-4j9i4q89e0] {
font-size: 13px;
font-weight: 600;
color: #374151;
font-variant-numeric: tabular-nums;
}
.detail-value-bold[b-4j9i4q89e0] {
font-weight: 700;
color: #111827;
}
.detail-value-factor[b-4j9i4q89e0] {
color: #0D6785;
font-family: 'Outfit', monospace;
}
.detail-divider[b-4j9i4q89e0] {
height: 1px;
background: #E5E7EB;
margin: 4px 0;
}
.detail-subtotal .detail-label[b-4j9i4q89e0] {
font-weight: 600;
color: #374151;
}
.detail-subtotal .detail-value[b-4j9i4q89e0] {
font-weight: 700;
color: #111827;
}
.detail-highlight[b-4j9i4q89e0] {
background: #EFF6FF;
margin: 0 -8px;
padding: 6px 8px;
border-radius: 6px;
}
.detail-formula[b-4j9i4q89e0] {
background: #ECFDF5;
margin: 0 -8px;
padding: 8px 8px;
border-radius: 6px;
}
.detail-formula .detail-value[b-4j9i4q89e0] {
font-size: 14px;
font-weight: 700;
color: #059669;
}
.detail-formula-note[b-4j9i4q89e0] {
font-size: 11px;
color: #9CA3AF;
text-align: right;
font-family: 'Outfit', monospace;
font-variant-numeric: tabular-nums;
}
.formula-strike[b-4j9i4q89e0] {
text-decoration: line-through;
color: #D1D5DB;
}
.formula-min-tag[b-4j9i4q89e0] {
display: inline-flex;
align-items: center;
gap: 2px;
margin-left: 4px;
padding: 1px 6px;
background: #FEF3C7;
color: #92400E;
border-radius: 4px;
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
cursor: help;
}
.formula-min-tag i[b-4j9i4q89e0] {
font-size: 9px;
}
.detail-min-label[b-4j9i4q89e0] {
text-align: right;
font-size: 0.65rem;
color: #92400E;
font-style: italic;
margin-top: 2px;
}
.line-item-min-notice[b-4j9i4q89e0] {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
margin: -4px 0 4px;
font-size: 0.68rem;
color: #92400E;
font-style: italic;
}
.line-item-min-notice i[b-4j9i4q89e0] {
font-size: 0.72rem;
color: #D97706;
flex-shrink: 0;
}
/* Disclaimer */
.premium-disclaimer[b-4j9i4q89e0] {
display: flex;
gap: 8px;
align-items: flex-start;
padding: 10px 12px;
background: #FFFBEB;
border: 1px solid #FDE68A;
border-radius: 8px;
margin-bottom: 12px;
}
.premium-disclaimer i[b-4j9i4q89e0] {
color: #D97706;
font-size: 14px;
flex-shrink: 0;
margin-top: 1px;
}
.premium-disclaimer p[b-4j9i4q89e0] {
margin: 0;
font-size: 12px;
line-height: 1.5;
color: #92400E;
}
/* Total Separator */
.premium-total-separator[b-4j9i4q89e0] {
height: 1px;
background: #E5E7EB;
margin: 4px 0 12px 0;
}
/* Total Row */
.premium-total-row[b-4j9i4q89e0] {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 16px;
padding: 0 2px;
}
.premium-total-label[b-4j9i4q89e0] {
font-size: 15px;
font-weight: 600;
color: #374151;
}
.premium-total-amount[b-4j9i4q89e0] {
font-size: 24px;
font-weight: 700;
color: rgb(13, 103, 133);
font-family: Outfit, sans-serif;
}
/* Download Button */
.btn-download-summary[b-4j9i4q89e0] {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
padding: 10px 16px;
background: rgb(13, 103, 133);
color: white;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
font-family: Inter, sans-serif;
cursor: pointer;
transition: all 0.2s;
margin-bottom: 12px;
}
.btn-download-summary:hover[b-4j9i4q89e0] {
background: rgb(10, 82, 106);
box-shadow: 0 2px 8px rgba(13, 103, 133, 0.3);
}
.btn-download-summary:disabled[b-4j9i4q89e0] {
background: #9CA3AF;
cursor: not-allowed;
box-shadow: none;
}
.btn-download-summary i[b-4j9i4q89e0] {
font-size: 14px;
}
/* Footer Note */
.premium-footer-note[b-4j9i4q89e0] {
font-size: 11px;
color: #9CA3AF;
text-align: center;
line-height: 1.5;
margin: 0 0 14px 0;
}
/* Branding */
.premium-branding[b-4j9i4q89e0] {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding-top: 12px;
border-top: 1px solid #F3F4F6;
margin-bottom: 8px;
}
.branding-logo[b-4j9i4q89e0] {
height: 36px;
width: auto;
object-fit: contain;
}
.branding-detail[b-4j9i4q89e0] {
font-size: 11px;
color: #9CA3AF;
}
/* /Components/Pages/Applications/Components/ProgressCard.razor.rz.scp.css */
/* Progress Card - Compact */
.progress-section-card[b-y6s64pibzr] {
background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 100%);
border-radius: 8px;
padding: 10px 14px;
margin-bottom: 12px;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15);
}
.progress-compact[b-y6s64pibzr] {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 6px;
}
.progress-left[b-y6s64pibzr] {
display: flex;
align-items: center;
gap: 6px;
color: white;
}
.progress-left i[b-y6s64pibzr] {
font-size: 14px;
color: #FCD34D;
}
.progress-title[b-y6s64pibzr] {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.progress-percentage[b-y6s64pibzr] {
font-size: 14px;
font-weight: 700;
color: white;
}
.progress-bar-container[b-y6s64pibzr] {
margin-bottom: 2px;
}
.progress-bar-track[b-y6s64pibzr] {
height: 3px;
background: rgba(255, 255, 255, 0.2);
border-radius: 20px;
overflow: hidden;
}
.progress-bar-fill[b-y6s64pibzr] {
height: 100%;
background: linear-gradient(90deg, #10B981 0%, #059669 100%);
border-radius: 20px;
transition: width 0.5s ease;
}
/* /Components/Pages/Applications/Components/ReferralQuestionnaireForm.razor.rz.scp.css */
/* Scoped styles for the referral questionnaire, copied from
NewApplicationStraightFormPage.razor.css when the markup was extracted into this
component (Blazor CSS isolation does not cross component boundaries). Keep visual
changes in sync with the parent form styles where they overlap. */
@keyframes fadeIn-b-mw129tnaae {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ========================================
Form Animations
======================================== */
/* Step/Section Fade-in Animation */
@keyframes fadeInUp-b-mw129tnaae {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Staggered slide in from left */
@keyframes slideInLeft-b-mw129tnaae {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Icon bounce */
@keyframes iconBounce-b-mw129tnaae {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-3px);
}
}
/* Form Sections */
.form-section[b-mw129tnaae] {
padding: 20px 24px;
margin-bottom: 16px;
background: linear-gradient(135deg, rgba(227, 241, 251, 0.3) 0%, rgba(255, 255, 255, 0.98) 100%);
border: 1px solid var(--border-light);
border-radius: 8px;
scroll-margin-top: 20px;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
transition: box-shadow 0.2s ease, transform 0.2s ease;
animation: fadeInUp-b-mw129tnaae 0.4s ease-out backwards;
}
/* Staggered animation for form sections */
.form-section:nth-child(1)[b-mw129tnaae] { animation-delay: 0s; }
.form-section:nth-child(2)[b-mw129tnaae] { animation-delay: 0.08s; }
.form-section:nth-child(3)[b-mw129tnaae] { animation-delay: 0.16s; }
.form-section:nth-child(4)[b-mw129tnaae] { animation-delay: 0.24s; }
.form-section:nth-child(5)[b-mw129tnaae] { animation-delay: 0.32s; }
.form-section:nth-child(6)[b-mw129tnaae] { animation-delay: 0.40s; }
.form-section:hover[b-mw129tnaae] {
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
transform: translateY(-1px);
}
.section-header[b-mw129tnaae] {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
.section-header-icon[b-mw129tnaae] {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: var(--brand-50);
border-radius: 6px;
flex-shrink: 0;
transition: transform 0.2s ease, background-color 0.2s ease;
}
.form-section:hover .section-header-icon[b-mw129tnaae] {
background: var(--brand-100);
animation: iconBounce-b-mw129tnaae 0.4s ease;
}
.section-header-icon i[b-mw129tnaae] {
font-size: 18px;
color: var(--brand-600);
opacity: 0.7;
transition: opacity 0.2s ease;
}
.form-section:hover .section-header-icon i[b-mw129tnaae] {
opacity: 1;
}
.section-header-content[b-mw129tnaae] {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.section-title[b-mw129tnaae] {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin: 0;
line-height: 1.3;
}
.section-description[b-mw129tnaae] {
font-size: 12px;
color: var(--text-secondary);
margin: 0;
font-weight: 400;
line-height: 1.4;
}
/* Subsection Headers for Referral Questionnaires */
.subsection-header[b-mw129tnaae] {
margin-top: 32px;
margin-bottom: 20px;
padding-bottom: 8px;
border-bottom: 2px solid var(--brand-200);
}
.subsection-header:first-of-type[b-mw129tnaae] {
margin-top: 0;
}
.subsection-title[b-mw129tnaae] {
font-size: 15px;
font-weight: 700;
color: var(--brand-700);
margin: 0;
letter-spacing: -0.01em;
}
.subsection-subtitle[b-mw129tnaae] {
font-size: 14px;
font-weight: 600;
color: var(--brand-600);
margin: 0;
}
/* Read-only Field Styling */
.read-only-field[b-mw129tnaae] {
background: #f8f9fa !important;
border: 1px dashed #dee2e6 !important;
cursor: not-allowed !important;
color: var(--text-secondary) !important;
}
.read-only-field:focus[b-mw129tnaae] {
border-color: #dee2e6 !important;
box-shadow: none !important;
}
/* Form Layout */
.form-group[b-mw129tnaae] {
margin-bottom:5px !important;
display: flex;
flex-direction: column;
gap: 6px;
}
.form-group.enhanced[b-mw129tnaae] {
margin-bottom: 24px;
}
.form-label[b-mw129tnaae] {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 4px;
line-height: 1.4;
}
.form-label .required[b-mw129tnaae] {
color: var(--error-600);
font-weight: 600;
}
/* Input Styling */
.form-input[b-mw129tnaae],
.form-select[b-mw129tnaae],
[b-mw129tnaae] input.form-input,
[b-mw129tnaae] select.form-select,
[b-mw129tnaae] textarea.form-input,
[b-mw129tnaae] input[type="text"].form-input,
[b-mw129tnaae] input[type="number"].form-input,
[b-mw129tnaae] input[type="email"].form-input,
[b-mw129tnaae] input[type="tel"].form-input,
input.form-input[b-mw129tnaae],
select.form-select[b-mw129tnaae],
textarea.form-input[b-mw129tnaae],
input[type="text"].form-input[b-mw129tnaae],
input[type="number"].form-input[b-mw129tnaae],
input[type="email"].form-input[b-mw129tnaae],
input[type="tel"].form-input[b-mw129tnaae] {
padding: 8px 12px;
background: white;
font-size: 14px;
border: 1px solid var(--border-medium);
border-radius: 6px;
color: var(--text-primary);
font-family: inherit;
transition: all 0.2s ease;
width: 100%;
box-sizing: border-box;
}
/* Textarea specific styling */
textarea.form-input[b-mw129tnaae],
[b-mw129tnaae] textarea.form-input {
resize: vertical;
min-height: 80px;
line-height: 1.5;
}
.form-input:focus[b-mw129tnaae],
.form-select:focus[b-mw129tnaae],
[b-mw129tnaae] input.form-input:focus,
[b-mw129tnaae] select.form-select:focus,
[b-mw129tnaae] textarea.form-input:focus,
input.form-input:focus[b-mw129tnaae],
select.form-select:focus[b-mw129tnaae],
textarea.form-input:focus[b-mw129tnaae] {
outline: none;
border-color: var(--brand-500);
box-shadow: 0 0 0 3px var(--brand-100);
}
.form-input[b-mw129tnaae]::placeholder,
[b-mw129tnaae] input.form-input::placeholder,
[b-mw129tnaae] textarea.form-input::placeholder,
input.form-input[b-mw129tnaae]::placeholder,
textarea.form-input[b-mw129tnaae]::placeholder {
color: var(--text-muted);
}
/* Select dropdown styling */
.form-select[b-mw129tnaae],
[b-mw129tnaae] select.form-select,
select.form-select[b-mw129tnaae] {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 40px;
}
/* Readonly inputs (auto-filled) */
.form-input[readonly][b-mw129tnaae],
[b-mw129tnaae] input.form-input[readonly],
input.form-input[readonly][b-mw129tnaae] {
background-color: var(--neutral-50);
color: var(--text-secondary);
cursor: not-allowed;
border-color: var(--border-light);
}
.form-input[readonly]:focus[b-mw129tnaae],
[b-mw129tnaae] input.form-input[readonly]:focus,
input.form-input[readonly]:focus[b-mw129tnaae] {
border-color: var(--border-light);
box-shadow: none;
}
.form-input.with-prefix[b-mw129tnaae] {
padding-left: 32px;
}
/* Enhanced Select Dropdown */
.form-select[b-mw129tnaae] {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 40px;
}
/* Validation States */
.form-input.is-invalid[b-mw129tnaae],
.form-input.invalid[b-mw129tnaae],
.form-select.invalid[b-mw129tnaae],
[b-mw129tnaae] input.form-input.is-invalid,
[b-mw129tnaae] input.form-input.invalid,
input.form-input.is-invalid[b-mw129tnaae],
input.form-input.invalid[b-mw129tnaae],
select.form-select.invalid[b-mw129tnaae],
input[type="text"].form-input.is-invalid[b-mw129tnaae],
input[type="text"].form-input.invalid[b-mw129tnaae],
input[type="number"].form-input.is-invalid[b-mw129tnaae],
input[type="number"].form-input.invalid[b-mw129tnaae],
input[type="email"].form-input.is-invalid[b-mw129tnaae],
input[type="email"].form-input.invalid[b-mw129tnaae],
input[type="tel"].form-input.is-invalid[b-mw129tnaae],
input[type="tel"].form-input.invalid[b-mw129tnaae] {
border-color: var(--error-600) !important;
padding-right: calc(1.5em + 0.75rem);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) center;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.form-input.is-invalid:focus[b-mw129tnaae],
.form-input.invalid:focus[b-mw129tnaae],
.form-select.invalid:focus[b-mw129tnaae],
[b-mw129tnaae] input.form-input.is-invalid:focus,
[b-mw129tnaae] input.form-input.invalid:focus,
input.form-input.is-invalid:focus[b-mw129tnaae],
input.form-input.invalid:focus[b-mw129tnaae],
select.form-select.invalid:focus[b-mw129tnaae] {
border-color: var(--error-600) !important;
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}
.form-input.valid.modified[b-mw129tnaae],
.form-select.valid.modified[b-mw129tnaae],
input.form-input.valid.modified[b-mw129tnaae],
select.form-select.valid.modified[b-mw129tnaae] {
border-color: var(--success-600);
}
.form-input.warning[b-mw129tnaae],
.form-select.warning[b-mw129tnaae] {
border-color: var(--warning-600);
}
.form-input.warning:focus[b-mw129tnaae],
.form-select.warning:focus[b-mw129tnaae] {
border-color: var(--warning-600);
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}
.form-input.auto-filled[b-mw129tnaae],
input.form-input.auto-filled[b-mw129tnaae] {
background: #F0FDF4;
border-color: #86EFAC;
}
.borrower-email-field .form-label[b-mw129tnaae] {
font-size: 13px;
font-weight: 600;
color: #374151;
margin-bottom: 6px;
}
.radio-group-inline[b-mw129tnaae] {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.radio-label[b-mw129tnaae] {
display: flex;
align-items: flex-start;
gap: 8px;
cursor: pointer;
padding: 8px 10px;
border-radius: 6px;
transition: background-color 0.2s ease;
border: 1px solid var(--border-medium);
background: white;
}
.radio-label:hover[b-mw129tnaae] {
background: var(--neutral-50);
border-color: var(--brand-400);
}
.radio-label input[type="radio"][b-mw129tnaae] {
margin-top: 2px;
width: 16px;
height: 16px;
cursor: pointer;
accent-color: var(--brand-600);
flex-shrink: 0;
}
.radio-label span[b-mw129tnaae] {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.5;
user-select: none;
}
.radio-label:has(input[type="radio"]:checked)[b-mw129tnaae] {
background: var(--brand-50);
border-color: var(--brand-100);
}
.radio-label:has(input[type="radio"]:checked) span[b-mw129tnaae] {
color: var(--text-primary);
font-weight: 500;
}
.env-section-title[b-mw129tnaae] {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 12px 0;
padding-bottom: 10px;
border-bottom: 1px solid var(--border-light);
line-height: 1.4;
}
/* Child Question Section - First Level Nesting */
.child-question-section[b-mw129tnaae] {
margin-top: 12px;
margin-left: 20px;
padding-left: 16px;
border-left: 2px solid var(--brand-200);
animation: slideInLeft-b-mw129tnaae 0.35s ease-out;
background: linear-gradient(to right, rgba(59, 130, 246, 0.02) 0%, transparent 100%);
border-radius: 0 6px 6px 0;
padding-top: 12px;
padding-bottom: 12px;
padding-right: 12px;
}
/* Child Question */
.child-question[b-mw129tnaae] {
margin-bottom: 14px;
}
.child-question:last-child[b-mw129tnaae] {
margin-bottom: 0;
}
/* Child Label with Indicator */
.child-label[b-mw129tnaae] {
display: flex;
align-items: center;
gap: 6px;
}
.child-indicator[b-mw129tnaae] {
color: var(--brand-500);
font-size: 14px;
flex-shrink: 0;
}
/* Grandchild Question Section - Second Level Nesting */
.grandchild-question-section[b-mw129tnaae] {
margin-top: 16px;
margin-left: 20px;
padding-left: 20px;
border-left: 3px solid var(--brand-300);
animation: slideInLeft-b-mw129tnaae 0.35s ease-out 0.1s backwards;
background: linear-gradient(to right, rgba(59, 130, 246, 0.04) 0%, transparent 100%);
border-radius: 0 8px 8px 0;
padding-top: 12px;
padding-bottom: 12px;
padding-right: 12px;
}
/* Grandchild Question */
.grandchild-question[b-mw129tnaae] {
margin-bottom: 0;
}
/* Grandchild Label with Indicator */
.grandchild-label[b-mw129tnaae] {
display: flex;
align-items: center;
gap: 6px;
}
.grandchild-indicator[b-mw129tnaae] {
color: var(--brand-600);
font-size: 13px;
flex-shrink: 0;
margin-left: 4px;
}
/* Great-Grandchild Question Section - Third Level Nesting */
.great-grandchild-question-section[b-mw129tnaae] {
margin-top: 16px;
margin-left: 32px;
padding-left: 24px;
border-left: 3px solid var(--brand-200);
animation: slideInLeft-b-mw129tnaae 0.35s ease-out 0.15s backwards;
background: linear-gradient(to right, rgba(59, 130, 246, 0.02) 0%, transparent 100%);
border-radius: 0 8px 8px 0;
padding-top: 12px;
padding-bottom: 12px;
padding-right: 12px;
}
/* Great-Grandchild Question */
.great-grandchild-question[b-mw129tnaae] {
margin-bottom: 16px;
}
.great-grandchild-question:last-child[b-mw129tnaae] {
margin-bottom: 0;
}
/* Great-Grandchild Label with Indicator */
.great-grandchild-label[b-mw129tnaae] {
display: flex;
align-items: center;
gap: 6px;
}
.great-grandchild-indicator[b-mw129tnaae] {
color: var(--brand-500);
font-size: 12px;
flex-shrink: 0;
margin-left: 4px;
}
.question-label[b-mw129tnaae] {
display: block;
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
margin-bottom: 10px;
line-height: 1.5;
}
.question-label .required[b-mw129tnaae] {
color: var(--error-600);
margin-left: 4px;
}
@media (max-width: 768px) {
/* Legacy support - Bootstrap grid handles responsive automatically */
.form-row-2col[b-mw129tnaae],
.form-row-3col[b-mw129tnaae] {
grid-template-columns: 1fr;
gap: 16px;
}
.form-section[b-mw129tnaae] {
padding: 20px 16px;
}
.loan-basics-section[b-mw129tnaae] {
padding: 20px 16px;
}
.section-header[b-mw129tnaae] {
gap: 12px;
margin-bottom: 20px;
}
.section-header-icon[b-mw129tnaae] {
width: 40px;
height: 40px;
}
.section-header-icon i[b-mw129tnaae] {
font-size: 20px;
}
.section-title[b-mw129tnaae] {
font-size: 18px;
}
.section-description[b-mw129tnaae] {
font-size: 13px;
}
.form-group.enhanced[b-mw129tnaae] {
margin-bottom: 20px;
}
.form-actions[b-mw129tnaae] {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.action-buttons-right[b-mw129tnaae] {
flex-direction: column;
width: 100%;
}
.btn-save-draft[b-mw129tnaae],
.btn-submit[b-mw129tnaae],
.btn-cancel[b-mw129tnaae] {
width: 100%;
justify-content: center;
}
.page-container[b-mw129tnaae] {
padding: 0 12px;
}
}
@media (max-width: 480px) {
.application-title[b-mw129tnaae] {
font-size: 18px;
}
.application-subtitle[b-mw129tnaae] {
font-size: 12px;
}
.section-title[b-mw129tnaae] {
font-size: 15px;
}
.section-header-icon[b-mw129tnaae] {
width: 32px;
height: 32px;
}
.section-header-icon i[b-mw129tnaae] {
font-size: 16px;
}
.form-label[b-mw129tnaae] {
font-size: 12px;
}
.form-input[b-mw129tnaae] {
font-size: 14px; /* Prevents zoom on iOS */
padding: 8px 12px;
}
.form-section[b-mw129tnaae] {
padding: 16px 20px;
margin-bottom: 14px;
}
}
.review-subsection-title[b-mw129tnaae] {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.review-subsection-title[b-mw129tnaae]::before {
content: '';
width: 4px;
height: 16px;
background: var(--primary-teal);
border-radius: 2px;
}
.policy-term-child .child-label-bar[b-mw129tnaae] {
border-left: 3px solid var(--brand-500, #0d6efd);
padding-left: 12px;
}
/* The wrapping fieldset exists only to disable inputs in ReadOnly mode — no visual chrome. */
.referral-questionnaire[b-mw129tnaae] {
border: 0;
margin: 0;
padding: 0;
min-width: 0;
}
/* /Components/Pages/Applications/Components/SearchableSelect.razor.rz.scp.css */
/* Searchable Select Component Styles */
.searchable-select-wrapper[b-6r83d2wwf8] {
position: relative;
width: 100%;
}
.searchable-select-button[b-6r83d2wwf8] {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
text-align: left;
cursor: pointer;
background: white;
border: 1px solid var(--border-medium);
border-radius: 6px;
padding: 8px 14px;
font-size: 14px;
color: var(--text-primary, #1F2937);
transition: all 0.2s ease;
min-height: 42px;
position: relative;
box-sizing: border-box;
}
.searchable-select-button:hover[b-6r83d2wwf8] {
border-color: var(--brand-500);
background: var(--brand-50);
}
.searchable-select-button:focus[b-6r83d2wwf8] {
outline: none;
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
.searchable-select-button.open[b-6r83d2wwf8] {
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
.searchable-select-button.is-invalid[b-6r83d2wwf8] {
border-color: var(--danger-500);
background-image: none;
padding-right: 14px;
}
.searchable-select-button.is-invalid:focus[b-6r83d2wwf8] {
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}
.searchable-select-button .selected-text[b-6r83d2wwf8] {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.searchable-select-button i.bi-chevron-down[b-6r83d2wwf8] {
margin-left: 8px;
font-size: 12px;
transition: transform 0.2s ease;
color: var(--text-secondary, #6B7280);
flex-shrink: 0;
line-height: 1;
}
.searchable-select-button.open i.bi-chevron-down[b-6r83d2wwf8] {
transform: rotate(180deg);
}
.searchable-select-dropdown[b-6r83d2wwf8] {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: white;
border: 1px solid var(--border-default, #D1D5DB);
border-radius: 8px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
z-index: 1000;
max-height: 320px;
overflow: hidden;
display: flex;
flex-direction: column;
animation: searchableSelectSlide-b-6r83d2wwf8 0.2s ease-out;
}
@keyframes searchableSelectSlide-b-6r83d2wwf8 {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.searchable-select-search[b-6r83d2wwf8] {
width: 100%;
padding: 10px 14px;
border: none;
border-bottom: 1px solid var(--border-light);
font-size: 14px;
outline: none;
flex-shrink: 0;
box-sizing: border-box;
}
.searchable-select-search:focus[b-6r83d2wwf8] {
background: var(--brand-50);
border-bottom-color: var(--brand-500);
}
.searchable-select-search[b-6r83d2wwf8]::placeholder {
color: var(--text-muted, #9CA3AF);
}
.searchable-select-options[b-6r83d2wwf8] {
overflow-y: auto;
max-height: 250px;
padding: 4px 0;
}
.searchable-select-option[b-6r83d2wwf8] {
padding: 10px 14px;
cursor: pointer;
transition: all 0.15s ease;
font-size: 14px;
color: var(--text-primary, #1F2937);
}
.searchable-select-option:hover[b-6r83d2wwf8] {
background: var(--brand-50);
}
.searchable-select-option.highlighted[b-6r83d2wwf8] {
background: var(--brand-100);
}
.searchable-select-option.selected[b-6r83d2wwf8] {
background: var(--brand-500);
color: white;
font-weight: 500;
}
.searchable-select-option.selected:hover[b-6r83d2wwf8] {
background: var(--brand-600);
}
.searchable-select-option.selected.highlighted[b-6r83d2wwf8] {
background: var(--brand-600);
}
.searchable-select-no-results[b-6r83d2wwf8] {
padding: 16px 14px;
text-align: center;
color: var(--text-muted, #9CA3AF);
font-size: 14px;
font-style: italic;
}
/* Validation error state for the form group */
[b-6r83d2wwf8] .validation-error .searchable-select-button {
border-color: var(--danger-500);
}
/* /Components/Pages/Applications/Components/SectionNavigationCard.razor.rz.scp.css */
/* Section Navigation Card */
.section-navigation[b-khinaispyc] {
padding-top: 10px;
margin: 20px 0 0 0;
border: 1px solid #E5E7EB;
border-radius: 8px;
background: linear-gradient(180deg, #FFFFFF 0%, #F9FAFB 100%);
}
.section-nav[b-khinaispyc] {
list-style: none;
}
.section-nav-item[b-khinaispyc] {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
transition: all 0.2s ease;
border: 1px solid transparent;
user-select: none;
}
.section-nav-item:hover[b-khinaispyc] {
background: #F3F4F6;
border-color: #E5E7EB;
transform: translateX(2px);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.section-nav-item:active[b-khinaispyc] {
transform: translateX(4px);
background: #E5E7EB;
}
.status-icon[b-khinaispyc] {
font-size: 16px;
flex-shrink: 0;
}
.status-icon.valid[b-khinaispyc] {
color: #10B981;
}
.status-icon.warning[b-khinaispyc] {
color: #F59E0B;
}
.status-icon.error[b-khinaispyc] {
color: var(--error-600);
}
.status-icon.incomplete[b-khinaispyc] {
color: #F59E0B;
}
.section-nav-label[b-khinaispyc] {
color: #374151;
flex: 1;
}
/* /Components/Pages/Applications/Components/SemanticPropertyTypeSearch.razor.rz.scp.css */
/* Semantic Property Type Search Component */
.semantic-search-wrapper[b-upexlu6mc2] {
position: relative;
width: 100%;
}
/* Search Input */
.semantic-search-input-wrapper[b-upexlu6mc2] {
position: relative;
}
/* Parent page (NewApplicationStraightFormPage.razor.css) has `::deep
input[type="text"].form-input { padding: 8px 12px }` which beats a single-
class selector on specificity and also pierces scoped CSS. We match that
selector shape here (tag + attr + 2 classes) so our left-inset wins. */
input[type="text"].semantic-search-input.form-input[b-upexlu6mc2],
.semantic-search-input[b-upexlu6mc2] {
width: 100%;
/* 38px left padding reserves space for the magnifying-glass icon (or spinner),
14px right padding is the normal text inset; the parent page's .is-invalid
rule bumps right padding to make room for the error indicator. */
padding: 8px 14px 8px 38px;
border: 1px solid var(--border-medium);
border-radius: 6px;
font-size: 14px;
color: var(--text-primary, #1F2937);
background: white;
transition: all 0.2s ease;
min-height: 42px;
box-sizing: border-box;
}
.semantic-search-input:hover[b-upexlu6mc2] {
border-color: var(--brand-500);
background: var(--brand-50);
}
.semantic-search-input:focus[b-upexlu6mc2] {
outline: none;
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
.semantic-search-input.open[b-upexlu6mc2] {
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.semantic-search-input.is-invalid[b-upexlu6mc2] {
border-color: var(--danger-500);
}
.semantic-search-input.is-invalid:focus[b-upexlu6mc2] {
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}
.semantic-search-input[b-upexlu6mc2]::placeholder {
color: var(--text-muted, #9CA3AF);
}
/* Left-aligned search affordance. The parent page owns the right-aligned
error indicator (red exclamation) via .form-input.is-invalid, which we
intentionally leave alone now — the two icons no longer collide. */
.search-icon[b-upexlu6mc2] {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted, #9CA3AF);
font-size: 16px;
line-height: 1;
pointer-events: none;
display: inline-flex;
align-items: center;
justify-content: center;
}
.search-spinner[b-upexlu6mc2] {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
}
.search-spinner .spinner-border-sm[b-upexlu6mc2] {
width: 16px;
height: 16px;
border-width: 2px;
color: var(--brand-500);
}
/* Selected State */
.semantic-search-selected[b-upexlu6mc2] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 14px;
border: 1px solid var(--border-medium);
border-radius: 6px;
background: white;
min-height: 42px;
box-sizing: border-box;
transition: all 0.2s ease;
}
.semantic-search-selected:hover[b-upexlu6mc2] {
border-color: var(--brand-500);
background: var(--brand-50);
}
.semantic-search-selected.is-invalid[b-upexlu6mc2] {
border-color: var(--danger-500);
}
.selected-content[b-upexlu6mc2] {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
min-width: 0;
}
.selected-tier-name[b-upexlu6mc2] {
font-size: 14px;
color: var(--text-primary, #1F2937);
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.btn-clear[b-upexlu6mc2] {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
border: none;
background: transparent;
color: var(--text-muted, #9CA3AF);
border-radius: 4px;
cursor: pointer;
transition: all 0.15s ease;
flex-shrink: 0;
}
.btn-clear:hover[b-upexlu6mc2] {
background: var(--danger-50, #FEF2F2);
color: var(--danger-500, #EF4444);
}
/* Dropdown */
.semantic-search-dropdown[b-upexlu6mc2] {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
border: 1px solid var(--border-default, #D1D5DB);
border-top: none;
border-radius: 0 0 8px 8px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
/* Stay below the sticky .topbar (z-index: 100 in leca-theme.css) so the
header covers the dropdown on scroll instead of being pierced by it.
Still above default form content (which has z-index: auto/0). */
z-index: 50;
max-height: 360px;
overflow: hidden;
display: flex;
flex-direction: column;
animation: semanticSearchSlide-b-upexlu6mc2 0.15s ease-out;
}
@keyframes semanticSearchSlide-b-upexlu6mc2 {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.semantic-search-options[b-upexlu6mc2] {
overflow-y: auto;
max-height: 280px;
padding: 4px 0;
scrollbar-width: thin;
}
.semantic-search-options[b-upexlu6mc2]::-webkit-scrollbar {
width: 6px;
}
.semantic-search-options[b-upexlu6mc2]::-webkit-scrollbar-track {
background: transparent;
}
.semantic-search-options[b-upexlu6mc2]::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.15);
border-radius: 3px;
}
.semantic-search-options[b-upexlu6mc2]::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0.25);
}
/* Tier Group Header */
.tier-group-header[b-upexlu6mc2] {
padding: 6px 14px 2px;
display: flex;
align-items: center;
}
.tier-group-header[b-upexlu6mc2]::after {
content: '';
flex: 1;
height: 1px;
background: var(--border-light, #E5E7EB);
margin-left: 8px;
}
/* Options */
.semantic-search-option[b-upexlu6mc2] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 14px;
cursor: pointer;
transition: all 0.15s ease;
font-size: 14px;
color: var(--text-primary, #1F2937);
gap: 8px;
}
.semantic-search-option:hover[b-upexlu6mc2] {
background: var(--brand-50);
}
.semantic-search-option.highlighted[b-upexlu6mc2] {
background: var(--brand-100);
}
.option-content[b-upexlu6mc2] {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}
.option-name[b-upexlu6mc2] {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.option-matched-keyword[b-upexlu6mc2] {
font-size: 12px;
color: var(--text-muted, #9CA3AF);
font-style: italic;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Tier Badges */
.tier-badge[b-upexlu6mc2] {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 600;
padding: 2px 8px;
border-radius: 12px;
white-space: nowrap;
flex-shrink: 0;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.tier-badge-1[b-upexlu6mc2] {
background: var(--success-50, #F0FDF4);
color: var(--success-700, #15803D);
border: 1px solid var(--success-200, #BBF7D0);
}
.tier-badge-2[b-upexlu6mc2] {
background: var(--warning-50, #FFFBEB);
color: var(--warning-700, #A16207);
border: 1px solid var(--warning-200, #FDE68A);
}
.tier-badge-3[b-upexlu6mc2] {
background: var(--danger-50, #FEF2F2);
color: var(--danger-700, #B91C1C);
border: 1px solid var(--danger-200, #FECACA);
}
.tier-badge-review[b-upexlu6mc2],
.tier-badge-0[b-upexlu6mc2] {
background: #FFF7ED;
color: #C2410C;
border: 1px solid #FED7AA;
}
/* "Other" Divider & Option */
.semantic-search-other-divider[b-upexlu6mc2] {
height: 1px;
background: var(--border-light, #E5E7EB);
margin: 2px 0;
}
.semantic-search-other[b-upexlu6mc2] {
background: var(--gray-50, #F9FAFB);
border-top: 1px solid var(--border-light, #E5E7EB);
}
/* Sits inline to the left of the option text. It lives outside .option-content
(which is flex-column) so the row layout of .semantic-search-option keeps it
vertically centred beside the label instead of stacking above it. */
.other-option-icon[b-upexlu6mc2] {
flex-shrink: 0;
color: var(--text-muted, #9CA3AF);
font-size: 14px;
line-height: 1;
}
.semantic-search-other:hover[b-upexlu6mc2] {
background: #FFF7ED;
}
.semantic-search-other.highlighted[b-upexlu6mc2] {
background: #FFEDD5;
}
/* Loading & No Results */
.semantic-search-loading[b-upexlu6mc2] {
padding: 16px 14px;
text-align: center;
color: var(--text-muted, #9CA3AF);
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.semantic-search-no-results[b-upexlu6mc2] {
padding: 16px 14px;
text-align: center;
color: var(--text-muted, #9CA3AF);
font-size: 14px;
font-style: italic;
}
/* Validation error state */
[b-upexlu6mc2] .validation-error .semantic-search-input {
border-color: var(--danger-500);
}
[b-upexlu6mc2] .validation-error .semantic-search-selected {
border-color: var(--danger-500);
}
/* "Other" Text Input */
.other-text-wrapper .form-label[b-upexlu6mc2] {
font-size: 13px;
font-weight: 500;
color: var(--text-secondary, #6B7280);
margin-bottom: 4px;
}
.other-text-input-wrapper[b-upexlu6mc2] {
position: relative;
}
.other-text-input[b-upexlu6mc2] {
width: 100%;
padding: 8px 36px 8px 14px;
border: 1px solid var(--border-medium);
border-radius: 6px;
font-size: 14px;
color: var(--text-primary, #1F2937);
background: #FFFBEB;
transition: all 0.2s ease;
min-height: 42px;
box-sizing: border-box;
}
.other-text-input:hover[b-upexlu6mc2] {
border-color: var(--warning-400, #FBBF24);
}
.other-text-input:focus[b-upexlu6mc2] {
outline: none;
border-color: var(--warning-500, #F59E0B);
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
background: white;
}
.other-text-input.is-invalid[b-upexlu6mc2] {
border-color: var(--danger-500);
}
.other-text-input.is-invalid:focus[b-upexlu6mc2] {
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}
.other-text-input[b-upexlu6mc2]::placeholder {
color: var(--text-muted, #9CA3AF);
}
.other-text-icon[b-upexlu6mc2] {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--warning-500, #F59E0B);
font-size: 14px;
pointer-events: none;
}
/* /Components/Pages/Applications/Components/StepIndicator.razor.rz.scp.css */
/* Step Indicator */
.step-indicator[b-2c8cwsh33q] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 0;
position: relative;
}
.step-item[b-2c8cwsh33q] {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
position: relative;
}
.step-node[b-2c8cwsh33q] {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
margin-bottom: 6px;
transition: all 0.3s ease;
z-index: 2;
position: relative;
}
.step-node.future[b-2c8cwsh33q] {
background: #E5E7EB;
color: #9CA3AF;
border: 3px solid #E5E7EB;
}
.step-node.current[b-2c8cwsh33q] {
background: var(--brand-500);
color: white;
border: 3px solid var(--brand-500);
box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.08);
animation: pulse-b-2c8cwsh33q 2s infinite;
}
.step-node.completed[b-2c8cwsh33q] {
background: #10B981;
color: white;
border: 3px solid #10B981;
}
.step-node.clickable[b-2c8cwsh33q] {
cursor: pointer;
}
.step-node.clickable:hover[b-2c8cwsh33q] {
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
@keyframes pulse-b-2c8cwsh33q {
0%, 100% {
box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.08);
}
50% {
box-shadow: 0 0 0 8px rgba(15, 23, 42, 0.15);
}
}
.step-label[b-2c8cwsh33q] {
text-align: center;
max-width: 120px;
}
.step-title[b-2c8cwsh33q] {
font-size: 11px;
font-weight: 600;
color: #374151;
margin-bottom: 2px;
line-height: 1.2;
}
.step-connector[b-2c8cwsh33q] {
position: absolute;
height: 2px;
background: #E5E7EB;
top: 18px;
left: 50%;
right: -50%;
z-index: 1;
}
.step-item:last-child .step-connector[b-2c8cwsh33q] {
display: none;
}
.step-node.completed ~ .step-connector[b-2c8cwsh33q],
.step-item:has(.step-node.completed) + .step-item .step-connector[b-2c8cwsh33q] {
background: #10B981;
}
.current-step-description[b-2c8cwsh33q] {
text-align: center;
padding: 8px 16px;
background: #F0F9FF;
border-radius: 6px;
margin-top: 8px;
}
.current-step-description p[b-2c8cwsh33q] {
margin: 0;
font-size: 11px;
color: var(--brand-500);
font-weight: 500;
line-height: 1.3;
}
/* /Components/Pages/Applications/Components/StorageTankGrid.razor.rz.scp.css */
.storage-tank-grid-container[b-sxy2uk7jtf] {
margin-top: 1.5rem;
}
.tank-grid-header[b-sxy2uk7jtf] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.tank-grid-header h4[b-sxy2uk7jtf] {
margin: 0;
font-size: 1.125rem;
font-weight: 600;
color: var(--color-text-primary);
}
.tank-grid-wrapper[b-sxy2uk7jtf] {
width: 100%;
overflow-x: auto;
}
.tank-grid[b-sxy2uk7jtf] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 1.5rem;
margin-bottom: 1rem;
}
.tank-card[b-sxy2uk7jtf] {
background: #fafbfc;
border: 1px solid #e8eaed;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.tank-card-header[b-sxy2uk7jtf] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem;
background: #f5f7f9;
border-bottom: 1px solid #e8eaed;
}
.tank-number[b-sxy2uk7jtf] {
font-weight: 600;
font-size: 0.875rem;
color: var(--color-text-primary);
}
.tank-card-body[b-sxy2uk7jtf] {
padding: 1rem;
}
.tank-card-body .form-group[b-sxy2uk7jtf] {
margin-bottom: 1rem;
}
.tank-card-body .form-group:last-child[b-sxy2uk7jtf] {
margin-bottom: 0;
}
.tank-card-body .form-label[b-sxy2uk7jtf] {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-text-secondary);
margin-bottom: 0.375rem;
}
.tank-card-body .form-input[b-sxy2uk7jtf] {
font-size: 0.875rem;
padding: 0.5rem 0.75rem;
}
.validation-message[b-sxy2uk7jtf] {
margin-top: 0.5rem;
font-size: 0.875rem;
display: flex;
align-items: center;
gap: 0.375rem;
}
.read-only-field[b-sxy2uk7jtf] {
border-radius: 6px !important;
padding: 8px 12px !important;
background: #f8f9fa !important;
border: 1px dashed #dee2e6 !important;
cursor: not-allowed !important;
color: var(--text-secondary) !important;
}
.read-only-field:focus[b-sxy2uk7jtf] {
border-color: #dee2e6 !important;
box-shadow: none !important;
}
/* Responsive design for mobile */
@media (max-width: 768px) {
.tank-grid[b-sxy2uk7jtf] {
grid-template-columns: 1fr;
}
.tank-card-body[b-sxy2uk7jtf] {
padding: 0.75rem;
}
}
/* Toast styling */
.toast-container[b-sxy2uk7jtf] {
z-index: 1050;
}
.toast[b-sxy2uk7jtf] {
min-width: 300px;
}
.toast-header[b-sxy2uk7jtf] {
background-color: var(--color-surface-secondary);
border-bottom: 1px solid var(--color-border);
}
.toast-body[b-sxy2uk7jtf] {
padding: 1rem;
}
/* /Components/Pages/Applications/Components/VERAcheckRecoveryBanner.razor.rz.scp.css */
.veracheck-recovery-banner[b-dcl1if5erl] {
display: flex;
gap: 16px;
padding: 16px 20px;
background: #fff7ed;
border: 1px solid #fed7aa;
border-radius: 12px;
align-items: center;
margin: 12px 0;
}
.banner-icon[b-dcl1if5erl] {
width: 40px;
height: 40px;
border-radius: 50%;
background: #fed7aa;
color: #9a3412;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
flex-shrink: 0;
}
.banner-body[b-dcl1if5erl] {
flex: 1;
min-width: 0;
}
.banner-title[b-dcl1if5erl] {
font-weight: 600;
color: #9a3412;
margin-bottom: 2px;
}
.banner-text[b-dcl1if5erl] {
font-size: 0.9rem;
color: #7c2d12;
}
.banner-message[b-dcl1if5erl] {
margin-top: 8px;
font-size: 0.85rem;
padding: 6px 10px;
border-radius: 6px;
}
.banner-error[b-dcl1if5erl] { background: #fee2e2; color: #991b1b; }
.banner-success[b-dcl1if5erl] { background: #dcfce7; color: #166534; }
.banner-actions[b-dcl1if5erl] {
display: flex;
gap: 8px;
flex-shrink: 0;
}
.banner-btn[b-dcl1if5erl] {
display: inline-flex;
align-items: center;
padding: 8px 14px;
border-radius: 8px;
border: 1px solid #ea580c;
background: #ea580c;
color: white;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.15s;
}
.banner-btn:hover:not(:disabled)[b-dcl1if5erl] {
background: #c2410c;
border-color: #c2410c;
}
.banner-btn:disabled[b-dcl1if5erl] {
opacity: 0.6;
cursor: not-allowed;
}
.banner-btn-secondary[b-dcl1if5erl] {
background: white;
color: #9a3412;
border-color: #fed7aa;
}
.banner-btn-secondary:hover:not(:disabled)[b-dcl1if5erl] {
background: #ffedd5;
color: #7c2d12;
border-color: #fdba74;
}
.veracheck-offline-form[b-dcl1if5erl] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 16px 20px;
background: white;
border: 1px solid #fed7aa;
border-radius: 12px;
margin: 0 0 12px 0;
}
/* ::deep — the fields come from the shared OfflineVeracheckFields component, so they do not carry
this component's scope attribute. The grid supplies the spacing, so the shared margin is dropped. */
.veracheck-offline-form[b-dcl1if5erl] .offline-field {
margin-bottom: 0;
}
.veracheck-offline-form .form-actions[b-dcl1if5erl] {
grid-column: span 2;
display: flex;
justify-content: flex-end;
}
/* /Components/Pages/Applications/NewApplicationSimplifiedFormPage.razor.rz.scp.css */
/* Straight Form Application Page Styles */
.main-content[b-azye0xfo32] {
padding-bottom: 100px;
}
/* Loading Overlay */
.loading-overlay[b-azye0xfo32] {
position: fixed;
inset: 0;
background: rgba(255, 255, 255, 0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 2000;
}
.spinner[b-azye0xfo32] {
width: 50px;
height: 50px;
border: 4px solid #E5E7EB;
border-top-color: var(--brand-500);
border-radius: 50%;
animation: spin-b-azye0xfo32 1s linear infinite;
}
@keyframes spin-b-azye0xfo32 {
to { transform: rotate(360deg); }
}
/* ========================================
Form Animations
======================================== */
/* Step/Section Fade-in Animation */
@keyframes fadeInUp-b-azye0xfo32 {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Staggered slide in from left */
@keyframes slideInLeft-b-azye0xfo32 {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Subtle scale in */
@keyframes scaleIn-b-azye0xfo32 {
from {
opacity: 0;
transform: scale(0.97);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Icon bounce */
@keyframes iconBounce-b-azye0xfo32 {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-3px);
}
}
/* Form Sections */
.form-section[b-azye0xfo32] {
padding: 20px 24px;
margin-bottom: 16px;
background: linear-gradient(135deg, rgba(227, 241, 251, 0.3) 0%, rgba(255, 255, 255, 0.98) 100%);
border: 1px solid var(--border-light);
border-radius: 8px;
scroll-margin-top: 20px;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
transition: box-shadow 0.2s ease, transform 0.2s ease;
animation: fadeInUp-b-azye0xfo32 0.4s ease-out backwards;
}
/* Staggered animation for form sections */
.form-section:nth-child(1)[b-azye0xfo32] { animation-delay: 0s; }
.form-section:nth-child(2)[b-azye0xfo32] { animation-delay: 0.08s; }
.form-section:nth-child(3)[b-azye0xfo32] { animation-delay: 0.16s; }
.form-section:nth-child(4)[b-azye0xfo32] { animation-delay: 0.24s; }
.form-section:nth-child(5)[b-azye0xfo32] { animation-delay: 0.32s; }
.form-section:nth-child(6)[b-azye0xfo32] { animation-delay: 0.40s; }
.form-section:hover[b-azye0xfo32] {
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
transform: translateY(-1px);
}
/* Each .form-section's transform (animation + hover lift) makes it its own
stacking context, so an absolutely-positioned overlay inside one section
(e.g. the Property Type search dropdown) cannot paint above a *later*
sibling section — the later section's content (its header icon) bleeds
through the open dropdown. While a field inside the section is focused
(i.e. its dropdown is open), promote that section above its siblings.
z-index stays well under the sticky .topbar (z-index: 100) so the header
still covers the dropdown on scroll. */
.form-section:focus-within[b-azye0xfo32] {
position: relative;
z-index: 10;
}
.section-header[b-azye0xfo32] {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
.section-header-icon[b-azye0xfo32] {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: var(--brand-50);
border-radius: 6px;
flex-shrink: 0;
transition: transform 0.2s ease, background-color 0.2s ease;
}
.form-section:hover .section-header-icon[b-azye0xfo32] {
background: var(--brand-100);
animation: iconBounce-b-azye0xfo32 0.4s ease;
}
.section-header-icon i[b-azye0xfo32] {
font-size: 18px;
color: var(--brand-600);
opacity: 0.7;
transition: opacity 0.2s ease;
}
.form-section:hover .section-header-icon i[b-azye0xfo32] {
opacity: 1;
}
.section-header-content[b-azye0xfo32] {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.section-title[b-azye0xfo32] {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin: 0;
line-height: 1.3;
}
.section-description[b-azye0xfo32] {
font-size: 12px;
color: var(--text-secondary);
margin: 0;
font-weight: 400;
line-height: 1.4;
}
/* Subsection Headers for Referral Questionnaires */
.subsection-header[b-azye0xfo32] {
margin-top: 32px;
margin-bottom: 20px;
padding-bottom: 8px;
border-bottom: 2px solid var(--brand-200);
}
.subsection-header:first-of-type[b-azye0xfo32] {
margin-top: 0;
}
.subsection-title[b-azye0xfo32] {
font-size: 15px;
font-weight: 700;
color: var(--brand-700);
margin: 0;
letter-spacing: -0.01em;
}
.subsection-subtitle[b-azye0xfo32] {
font-size: 14px;
font-weight: 600;
color: var(--brand-600);
margin: 0;
}
/* Read-only Field Styling */
.read-only-field[b-azye0xfo32] {
background: #f8f9fa !important;
border: 1px dashed #dee2e6 !important;
cursor: not-allowed !important;
color: var(--text-secondary) !important;
}
.read-only-field:focus[b-azye0xfo32] {
border-color: #dee2e6 !important;
box-shadow: none !important;
}
/* Form Layout */
.form-group[b-azye0xfo32] {
margin-bottom:5px !important;
display: flex;
flex-direction: column;
gap: 6px;
}
.form-group.enhanced[b-azye0xfo32] {
margin-bottom: 24px;
}
.form-label[b-azye0xfo32] {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 4px;
line-height: 1.4;
}
.form-help[b-azye0xfo32] {
font-size: 12px;
color: var(--text-muted);
line-height: 1.4;
}
.form-label .required[b-azye0xfo32] {
color: var(--error-600);
font-weight: 600;
}
/* Input Styling */
.form-input[b-azye0xfo32],
.form-select[b-azye0xfo32],
[b-azye0xfo32] input.form-input,
[b-azye0xfo32] select.form-select,
[b-azye0xfo32] textarea.form-input,
[b-azye0xfo32] input[type="text"].form-input,
[b-azye0xfo32] input[type="number"].form-input,
[b-azye0xfo32] input[type="email"].form-input,
[b-azye0xfo32] input[type="tel"].form-input,
input.form-input[b-azye0xfo32],
select.form-select[b-azye0xfo32],
textarea.form-input[b-azye0xfo32],
input[type="text"].form-input[b-azye0xfo32],
input[type="number"].form-input[b-azye0xfo32],
input[type="email"].form-input[b-azye0xfo32],
input[type="tel"].form-input[b-azye0xfo32] {
padding: 8px 12px;
background: white;
font-size: 14px;
border: 1px solid var(--border-medium);
border-radius: 6px;
color: var(--text-primary);
font-family: inherit;
transition: all 0.2s ease;
width: 100%;
box-sizing: border-box;
}
/* Textarea specific styling */
textarea.form-input[b-azye0xfo32],
[b-azye0xfo32] textarea.form-input {
resize: vertical;
min-height: 80px;
line-height: 1.5;
}
.form-input:focus[b-azye0xfo32],
.form-select:focus[b-azye0xfo32],
[b-azye0xfo32] input.form-input:focus,
[b-azye0xfo32] select.form-select:focus,
[b-azye0xfo32] textarea.form-input:focus,
input.form-input:focus[b-azye0xfo32],
select.form-select:focus[b-azye0xfo32],
textarea.form-input:focus[b-azye0xfo32] {
outline: none;
border-color: var(--brand-500);
box-shadow: 0 0 0 3px var(--brand-100);
}
.form-input[b-azye0xfo32]::placeholder,
[b-azye0xfo32] input.form-input::placeholder,
[b-azye0xfo32] textarea.form-input::placeholder,
input.form-input[b-azye0xfo32]::placeholder,
textarea.form-input[b-azye0xfo32]::placeholder {
color: var(--text-muted);
}
/* Select dropdown styling */
.form-select[b-azye0xfo32],
[b-azye0xfo32] select.form-select,
select.form-select[b-azye0xfo32] {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 40px;
}
/* Readonly inputs (auto-filled) */
.form-input[readonly][b-azye0xfo32],
[b-azye0xfo32] input.form-input[readonly],
input.form-input[readonly][b-azye0xfo32] {
background-color: var(--neutral-50);
color: var(--text-secondary);
cursor: not-allowed;
border-color: var(--border-light);
}
.form-input[readonly]:focus[b-azye0xfo32],
[b-azye0xfo32] input.form-input[readonly]:focus,
input.form-input[readonly]:focus[b-azye0xfo32] {
border-color: var(--border-light);
box-shadow: none;
}
/* Input with Prefix (Currency) */
.input-wrapper[b-azye0xfo32] {
position: relative;
display: flex;
align-items: center;
}
.input-prefix[b-azye0xfo32] {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
font-size: 15px;
font-weight: 600;
color: #6B7280;
pointer-events: none;
z-index: 1;
}
.form-input.with-prefix[b-azye0xfo32] {
padding-left: 32px;
}
/* Enhanced Select Dropdown */
.form-select[b-azye0xfo32] {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 40px;
}
/* Validation States */
.form-input.is-invalid[b-azye0xfo32],
.form-input.invalid[b-azye0xfo32],
.form-select.invalid[b-azye0xfo32],
[b-azye0xfo32] input.form-input.is-invalid,
[b-azye0xfo32] input.form-input.invalid,
input.form-input.is-invalid[b-azye0xfo32],
input.form-input.invalid[b-azye0xfo32],
select.form-select.invalid[b-azye0xfo32],
input[type="text"].form-input.is-invalid[b-azye0xfo32],
input[type="text"].form-input.invalid[b-azye0xfo32],
input[type="number"].form-input.is-invalid[b-azye0xfo32],
input[type="number"].form-input.invalid[b-azye0xfo32],
input[type="email"].form-input.is-invalid[b-azye0xfo32],
input[type="email"].form-input.invalid[b-azye0xfo32],
input[type="tel"].form-input.is-invalid[b-azye0xfo32],
input[type="tel"].form-input.invalid[b-azye0xfo32] {
border-color: var(--error-600) !important;
padding-right: calc(1.5em + 0.75rem);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) center;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.form-input.is-invalid:focus[b-azye0xfo32],
.form-input.invalid:focus[b-azye0xfo32],
.form-select.invalid:focus[b-azye0xfo32],
[b-azye0xfo32] input.form-input.is-invalid:focus,
[b-azye0xfo32] input.form-input.invalid:focus,
input.form-input.is-invalid:focus[b-azye0xfo32],
input.form-input.invalid:focus[b-azye0xfo32],
select.form-select.invalid:focus[b-azye0xfo32] {
border-color: var(--error-600) !important;
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}
.form-input.valid.modified[b-azye0xfo32],
.form-select.valid.modified[b-azye0xfo32],
input.form-input.valid.modified[b-azye0xfo32],
select.form-select.valid.modified[b-azye0xfo32] {
border-color: var(--success-600);
}
/* ValidationMessage Styling */
.validation-message[b-azye0xfo32] {
color: var(--error-600);
font-size: 13px;
margin-top: 4px;
display: flex;
align-items: center;
gap: 4px;
}
.validation-message[b-azye0xfo32]::before {
content: "?";
font-size: 14px;
}
/* Validation Summary */
.validation-summary[b-azye0xfo32] {
margin-bottom: 20px;
padding: 16px;
background: #fef2f2;
border: 1px solid #fecaca;
border-left: 4px solid var(--error-600);
border-radius: 6px;
animation: slideDown-b-azye0xfo32 0.3s ease-out;
}
.validation-summary .alert-heading[b-azye0xfo32] {
color: #991b1b;
font-size: 15px;
font-weight: 600;
margin-bottom: 8px;
}
.validation-summary ul[b-azye0xfo32] {
list-style: none;
padding-left: 0;
margin-bottom: 0;
}
.validation-summary ul li[b-azye0xfo32] {
color: #7f1d1d;
font-size: 14px;
padding: 4px 0;
position: relative;
padding-left: 20px;
}
.validation-summary ul li[b-azye0xfo32]::before {
content: "�";
position: absolute;
left: 6px;
color: var(--error-600);
font-weight: bold;
}
.validation-summary i[b-azye0xfo32] {
color: var(--error-600);
}
@keyframes slideDown-b-azye0xfo32 {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.form-input.warning[b-azye0xfo32],
.form-select.warning[b-azye0xfo32] {
border-color: var(--warning-600);
}
.form-input.warning:focus[b-azye0xfo32],
.form-select.warning:focus[b-azye0xfo32] {
border-color: var(--warning-600);
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}
.field-error[b-azye0xfo32] {
color: var(--error-600);
font-size: 13px;
display: flex;
align-items: center;
gap: 4px;
}
.field-error i[b-azye0xfo32] {
font-size: 14px;
}
.field-warning[b-azye0xfo32] {
color: var(--warning-600);
font-size: 13px;
display: flex;
align-items: center;
gap: 4px;
}
.field-warning i[b-azye0xfo32] {
font-size: 14px;
}
/* Referral-trigger notice — shown directly under a field whose value will
route the application outside the LP3 program (loan amount > $10M, LTV
over 80%, property type that requires manual review, construction loan).
Visually distinct from .field-error (which is for blocking validation
errors) and from .field-warning (orange, used for non-routing warnings):
this is a consequential heads-up that doesn't block the user but tells
them exactly what will happen on Get Quote. */
.field-referral-notice[b-azye0xfo32] {
margin-top: 8px;
padding: 10px 12px;
background: #fef2f2; /* soft red-50 wash */
border: 1px solid #fecaca; /* red-200 hairline */
border-left: 3px solid var(--error-600);
border-radius: 6px;
color: var(--error-700, #b91c1c);
font-size: 13px;
line-height: 1.45;
display: flex;
align-items: flex-start;
gap: 8px;
}
.field-referral-notice i[b-azye0xfo32] {
font-size: 16px;
flex-shrink: 0;
margin-top: 1px;
color: var(--error-600);
}
.field-referral-notice strong[b-azye0xfo32] {
color: var(--error-700, #b91c1c);
font-weight: 600;
}
/* Bootstrap 5 Grid Integration
======================================
Using Bootstrap's grid system:
- .row for containers
- .col-12 for full width
- .col-md-6 for 2 columns on medium+ screens
- .col-lg-4 for 3 columns on large+ screens
- .g-3, .g-4 for gutters (gaps)
Bootstrap breakpoints:
- sm: 576px
- md: 768px
- lg: 992px
- xl: 1200px
- xxl: 1400px
====================================== */
/* Legacy support - deprecated, use Bootstrap classes instead */
.form-row-2col[b-azye0xfo32] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
margin-bottom: 0;
}
.form-row-3col[b-azye0xfo32] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
margin-bottom: 0;
}
.form-input.auto-filled[b-azye0xfo32],
input.form-input.auto-filled[b-azye0xfo32] {
background: #F0FDF4;
border-color: #86EFAC;
}
/* Conditional Sections */
.conditional-section[b-azye0xfo32] {
animation: fadeIn-b-azye0xfo32 0.3s ease-in;
padding-left: 20px;
border-left: 3px solid #E5E7EB;
margin-left: 10px;
margin-top: 12px;
}
@keyframes fadeIn-b-azye0xfo32 {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Acknowledgement Section */
.acknowledgement-section[b-azye0xfo32] {
padding: 20px;
margin-top: 16px;
margin-bottom: 20px;
background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
border: 1px solid #BFDBFE;
border-left: 4px solid #3B82F6;
border-radius: 8px;
animation: fadeIn-b-azye0xfo32 0.3s ease-in;
}
.acknowledgement-content[b-azye0xfo32] {
width: 100%;
}
.acknowledgement-text[b-azye0xfo32] {
font-size: 14px;
color: #1E3A8A;
line-height: 1.6;
margin: 0 0 16px 0;
font-weight: 500;
}
.acknowledgement-checkbox[b-azye0xfo32] {
margin-top: 12px;
}
.checkbox-label[b-azye0xfo32] {
display: flex;
align-items: flex-start;
gap: 12px;
cursor: pointer;
padding: 12px;
border: 1px solid #BFDBFE;
border-radius: 6px;
background: white;
transition: all 0.2s ease;
}
.checkbox-label:hover[b-azye0xfo32] {
background: #F0F9FF;
border-color: #3B82F6;
}
[b-azye0xfo32] .checkbox-input,
.checkbox-input[b-azye0xfo32] {
margin-top: 2px;
width: 20px;
height: 20px;
cursor: pointer;
accent-color: #3B82F6;
flex-shrink: 0;
}
.checkbox-text[b-azye0xfo32] {
font-size: 14px;
color: #1E3A8A;
line-height: 1.5;
user-select: none;
font-weight: 500;
}
.checkbox-text .required[b-azye0xfo32] {
color: var(--error-600);
margin-left: 2px;
}
.acknowledgement-checkbox .validation-message[b-azye0xfo32] {
display: block;
margin-top: 8px;
margin-left: 44px;
font-size: 13px;
color: var(--error-600);
}
/* Warning Acknowledgement Section (for payment agreement) */
.warning-acknowledgement[b-azye0xfo32] {
background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
border: 1px solid #FCD34D;
border-left: 4px solid #F59E0B;
}
.warning-acknowledgement .acknowledgement-text[b-azye0xfo32] {
color: #92400E;
display: flex;
align-items: flex-start;
gap: 8px;
}
.warning-acknowledgement .acknowledgement-text i[b-azye0xfo32] {
font-size: 18px;
color: #F59E0B;
flex-shrink: 0;
margin-top: 2px;
}
.warning-acknowledgement .checkbox-label[b-azye0xfo32] {
border-color: #FCD34D;
background: #FFFBEB;
}
.warning-acknowledgement .checkbox-label:hover[b-azye0xfo32] {
background: #FEF3C7;
border-color: #F59E0B;
}
.warning-acknowledgement .checkbox-text[b-azye0xfo32] {
color: #92400E;
}
.warning-acknowledgement[b-azye0xfo32] .checkbox-input,
.warning-acknowledgement .checkbox-input[b-azye0xfo32] {
accent-color: #F59E0B;
}
/* Fee Payment Options */
.fee-payment-options[b-azye0xfo32] {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 12px;
}
.fee-option[b-azye0xfo32] {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
border: 1px solid #FCD34D;
border-radius: 8px;
background: white;
cursor: pointer;
transition: all 0.2s;
}
.fee-option:hover[b-azye0xfo32] {
background: #FFFBEB;
}
.fee-option.selected[b-azye0xfo32] {
border-color: #D97706;
background: #FEF3C7;
}
.fee-option input[type="radio"][b-azye0xfo32] {
margin-top: 3px;
accent-color: #D97706;
flex-shrink: 0;
}
.fee-option-content[b-azye0xfo32] {
display: flex;
flex-direction: column;
gap: 2px;
}
.fee-option-label[b-azye0xfo32] {
font-size: 14px;
font-weight: 600;
color: #92400E;
}
.fee-option-desc[b-azye0xfo32] {
font-size: 12px;
color: #B45309;
}
.borrower-email-field[b-azye0xfo32] {
margin-top: 12px;
padding: 12px 14px;
background: white;
border: 1px solid #E5E7EB;
border-radius: 8px;
}
.borrower-email-field .form-label[b-azye0xfo32] {
font-size: 13px;
font-weight: 600;
color: #374151;
margin-bottom: 6px;
}
.borrower-email-field .form-control[b-azye0xfo32] {
font-size: 14px;
}
/* Fee notice when document is provided */
.fee-notice-section[b-azye0xfo32] {
margin-top: 16px;
}
.fee-notice-info[b-azye0xfo32] {
display: flex;
gap: 10px;
padding: 12px 16px;
background: #EFF6FF;
border: 1px solid #BFDBFE;
border-radius: 8px;
font-size: 13px;
color: #1E40AF;
line-height: 1.5;
}
.fee-notice-info > i[b-azye0xfo32] {
flex-shrink: 0;
font-size: 16px;
margin-top: 1px;
}
.fee-disclaimer-text[b-azye0xfo32] {
font-size: 12px;
color: #3B82F6;
font-style: italic;
}
/* Radio Buttons */
.radio-group[b-azye0xfo32] {
display: flex;
flex-direction: column;
gap: 10px;
}
.radio-group-inline[b-azye0xfo32] {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.radio-label[b-azye0xfo32] {
display: flex;
align-items: flex-start;
gap: 8px;
cursor: pointer;
padding: 8px 10px;
border-radius: 6px;
transition: background-color 0.2s ease;
border: 1px solid var(--border-medium);
background: white;
}
.radio-label:hover[b-azye0xfo32] {
background: var(--neutral-50);
border-color: var(--brand-400);
}
.radio-label input[type="radio"][b-azye0xfo32] {
margin-top: 2px;
width: 16px;
height: 16px;
cursor: pointer;
accent-color: var(--brand-600);
flex-shrink: 0;
}
.radio-label span[b-azye0xfo32] {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.5;
user-select: none;
}
.radio-label:has(input[type="radio"]:checked)[b-azye0xfo32] {
background: var(--brand-50);
border-color: var(--brand-100);
}
.radio-label:has(input[type="radio"]:checked) span[b-azye0xfo32] {
color: var(--text-primary);
font-weight: 500;
}
/* Form Actions */
.form-actions[b-azye0xfo32] {
position: sticky;
bottom: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
background: white;
border-top: 2px solid #E5E7EB;
margin-top: 32px;
z-index: 100;
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
}
.action-buttons-right[b-azye0xfo32] {
display: flex;
gap: 12px;
}
.close-btn[b-azye0xfo32] {
padding: 10px 20px;
background: transparent;
color: #64748B;
border: 1px solid #E2E8F0;
border-radius: 10px;
font-weight: 600;
font-size: 13px;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
display: inline-flex;
align-items: center;
gap: 6px;
line-height: 1.4;
}
.close-btn:hover[b-azye0xfo32] {
background: #F1F5F9;
border-color: #E2E8F0;
color: #0F172A;
}
/* Destructive secondary — quiet danger tint, fills solid red on hover */
.btn-cancel[b-azye0xfo32] {
padding: 10px 20px;
background: var(--error-50, #FEF2F2);
border: 1px solid #FECACA;
border-radius: 10px;
color: var(--error-600, #DC2626);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-cancel:hover[b-azye0xfo32] {
background: var(--error-600, #DC2626);
border-color: var(--error-600, #DC2626);
color: #fff;
}
/* Affirmative secondary — brand outline */
.btn-save-draft[b-azye0xfo32] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: #fff;
border: 1px solid var(--brand-300, #80B7D9);
border-radius: 10px;
color: var(--brand-600, #004980);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-save-draft:hover[b-azye0xfo32] {
background: var(--brand-50, #E6F2F8);
border-color: var(--brand-600, #004980);
color: var(--brand-700, #003760);
}
.btn-submit[b-azye0xfo32] {
padding: 10px 24px;
background: var(--brand-600, #004980);
border: none;
border-radius: 10px;
color: white;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-submit:hover[b-azye0xfo32] {
background: var(--brand-700, #003760);
}
.btn-submit:disabled[b-azye0xfo32] {
background: #9CA3AF;
color: #E5E7EB;
cursor: not-allowed;
box-shadow: none;
transform: none;
opacity: 0.6;
}
.btn-submit:disabled:hover[b-azye0xfo32] {
background: #9CA3AF;
box-shadow: none;
transform: none;
}
/* Sidebar */
.sidebar-container[b-azye0xfo32] {
flex-shrink: 0;
padding: 0 10px 80px 10px;
position: sticky;
top: 80px;
max-height: calc(100vh - 90px);
overflow-y: auto;
overscroll-behavior: contain;
align-self: flex-start;
z-index: auto;
}
/* Floating Last Saved Indicator */
.floating-save-indicator[b-azye0xfo32] {
position: fixed;
/* Clears the banner + topbar stack. The topbar is sticky at top: 0 with z-index 100
(leca-theme.css:318-321), but the in-flow EnvironmentBanner sits ABOVE it on every
non-production deployment (EnvironmentBanner.razor.css), so at scroll-top the
topbar's bottom edge is ~94px rather than 64px. The old top: 80px therefore landed
inside the topbar, which painted over the pill (100 > this element's 90) and clipped
it. 104px = the old 80px plus one --space-lg step, leaving ~10px of clearance below
the banner + topbar; the banner's height is not exposed as a token, so this is a
literal on the app's spacing scale. */
top: 104px;
right: 20px;
background: white;
border: 1px solid #E5E7EB;
border-radius: 20px;
padding: 6px 12px 6px 10px;
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: #6B7280;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
z-index: 90;
cursor: help;
transition: all 0.2s ease;
}
.floating-save-indicator:hover[b-azye0xfo32] {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
transform: translateY(-1px);
}
.floating-save-indicator i[b-azye0xfo32] {
font-size: 14px;
color: #10B981;
}
.floating-save-indicator i.bi-clock[b-azye0xfo32] {
color: #9CA3AF;
}
.floating-save-indicator .save-time[b-azye0xfo32] {
font-weight: 500;
white-space: nowrap;
}
.floating-save-indicator .draft-id[b-azye0xfo32] {
font-weight: 600;
color: #374151;
white-space: nowrap;
}
.floating-save-indicator .save-toast[b-azye0xfo32] {
position: absolute;
top: 2px;
right: 0;
background: #10B981;
color: white;
padding: 6px 12px;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
display: flex;
align-items: center;
gap: 4px;
opacity: 0;
transform: translateY(5px);
pointer-events: none;
transition: opacity 0.3s ease, transform 0.3s ease;
white-space: nowrap;
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}
.floating-save-indicator .save-toast.show[b-azye0xfo32] {
opacity: 1;
transform: translateY(0);
}
.floating-save-indicator .save-toast i[b-azye0xfo32] {
font-size: 12px;
color: white;
}
/* Progress Section */
.progress-section[b-azye0xfo32] {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 16px 0;
padding: 12px 16px;
border: 1px solid #E5E7EB;
border-radius: 8px;
background: linear-gradient(180deg, #F9FAFB 0%, #FFFFFF 100%);
}
.progress-circle[b-azye0xfo32] {
margin: 0 auto 12px;
width: 100px;
height: 100px;
}
.progress-percentage[b-azye0xfo32] {
font-size: 24px;
font-weight: 700;
fill: var(--brand-500);
}
.progress-label[b-azye0xfo32] {
font-size: 13px;
color: #6B7280;
font-weight: 500;
}
.section-navigation[b-azye0xfo32] {
padding-top: 10px;
margin: 20px 0 0 0;
border: 1px solid #E5E7EB;
border-radius: 8px;
background: linear-gradient(180deg, #FFFFFF 0%, #F9FAFB 100%);
}
/* New Prominent Progress Card - Compact Version */
.progress-section-card[b-azye0xfo32] {
background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 100%);
border-radius: 8px;
padding: 10px 14px;
margin-bottom: 14px;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2),
0 2px 6px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.progress-section-card[b-azye0xfo32]::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
45deg,
transparent 30%,
rgba(255, 255, 255, 0.1) 50%,
transparent 70%
);
animation: shine-b-azye0xfo32 3s infinite;
}
@keyframes shine-b-azye0xfo32 {
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}
.progress-card-header[b-azye0xfo32] {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 8px;
color: white;
}
.progress-card-header i[b-azye0xfo32] {
font-size: 16px;
color: #FCD34D;
animation: lightning-pulse-b-azye0xfo32 1.5s ease-in-out infinite;
}
@keyframes lightning-pulse-b-azye0xfo32 {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
.progress-title[b-azye0xfo32] {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.progress-stats[b-azye0xfo32] {
display: flex;
align-items: baseline;
gap: 5px;
margin-bottom: 8px;
}
.progress-percentage-large[b-azye0xfo32] {
font-size: 24px;
font-weight: 800;
color: white;
line-height: 1;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.progress-status-text[b-azye0xfo32] {
font-size: 12px;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
}
.progress-bar-container[b-azye0xfo32] {
margin-bottom: 8px;
}
.progress-bar-track[b-azye0xfo32] {
height: 5px;
background: rgba(255, 255, 255, 0.2);
border-radius: 20px;
overflow: hidden;
position: relative;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}
.progress-bar-fill[b-azye0xfo32] {
height: 100%;
background: linear-gradient(90deg, #10B981 0%, #059669 100%);
border-radius: 20px;
transition: width 0.5s ease;
position: relative;
box-shadow: 0 1px 4px rgba(16, 185, 129, 0.5);
}
.progress-bar-shine[b-azye0xfo32] {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.4) 50%,
transparent 100%
);
animation: bar-shine-b-azye0xfo32 2s infinite;
}
@keyframes bar-shine-b-azye0xfo32 {
0% { left: -100%; }
100% { left: 200%; }
}
.progress-milestones[b-azye0xfo32] {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4px;
}
.milestone[b-azye0xfo32] {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
font-size: 9px;
color: rgba(255, 255, 255, 0.7);
transition: all 0.3s ease;
}
.milestone i[b-azye0xfo32] {
font-size: 13px;
color: rgba(255, 255, 255, 0.4);
transition: all 0.3s ease;
}
.milestone.completed[b-azye0xfo32] {
color: white;
}
.milestone.completed i[b-azye0xfo32] {
color: #10B981;
filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.6));
}
.milestone span[b-azye0xfo32] {
text-align: center;
line-height: 1.2;
font-weight: 600;
}
/* Old circle progress - keeping for backwards compatibility */
.progress-circle-compact[b-azye0xfo32] {
flex-shrink: 0;
}
.progress-percentage-compact[b-azye0xfo32] {
font-size: 16px;
font-weight: 700;
fill: var(--brand-500);
}
.progress-label-compact[b-azye0xfo32] {
font-size: 12px;
color: #6B7280;
font-weight: 600;
}
/* Section Navigation */
.section-nav[b-azye0xfo32] {
list-style: none;
}
.section-nav-item[b-azye0xfo32] {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
transition: all 0.2s ease;
border: 1px solid transparent;
user-select: none;
}
.section-nav-item:hover[b-azye0xfo32] {
background: #F3F4F6;
border-color: #E5E7EB;
transform: translateX(2px);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.section-nav-item:active[b-azye0xfo32] {
transform: translateX(4px);
background: #E5E7EB;
}
.status-icon[b-azye0xfo32] {
font-size: 16px;
flex-shrink: 0;
}
.status-icon.valid[b-azye0xfo32] {
color: #10B981;
}
.status-icon.warning[b-azye0xfo32] {
color:var(--warning-500)
}
.status-icon.error[b-azye0xfo32] {
color: var(--error-600);
}
.status-icon.incomplete[b-azye0xfo32] {
/* default color to danger */
color:var(--warning-500)
}
.section-nav-label[b-azye0xfo32] {
color: #374151;
flex: 1;
}
/* Mobile Bottom Bar */
.mobile-bottom-bar[b-azye0xfo32] {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
background: white;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
display: none;
align-items: center;
justify-content: space-between;
padding: 0 20px;
z-index: 100;
}
.mobile-info[b-azye0xfo32] {
display: flex;
flex-direction: column;
gap: 4px;
}
.premium-brief[b-azye0xfo32] {
font-size: 16px;
font-weight: 700;
color: var(--brand-500);
}
.progress-brief[b-azye0xfo32] {
font-size: 12px;
color: #6B7280;
}
.btn-expand[b-azye0xfo32] {
background: var(--brand-500);
border: none;
border-radius: 6px;
color: white;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s;
}
.btn-expand:hover[b-azye0xfo32] {
background: #004A7F;
}
.btn-expand i[b-azye0xfo32] {
font-size: 20px;
}
/* Floating TOC Button */
.floating-toc-btn[b-azye0xfo32] {
position: fixed;
bottom: 20px;
right: 20px;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--brand-500);
border: none;
color: white;
font-size: 24px;
display: none;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3);
cursor: pointer;
z-index: 90;
transition: all 0.2s;
}
.floating-toc-btn:hover[b-azye0xfo32] {
background: #004A7F;
transform: scale(1.05);
}
/* Mobile Drawer */
.drawer-overlay[b-azye0xfo32] {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 999;
}
.drawer-overlay.show[b-azye0xfo32] {
opacity: 1;
pointer-events: auto;
}
.mobile-toc-drawer[b-azye0xfo32] {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 70vh;
background: white;
border-radius: 16px 16px 0 0;
transform: translateY(100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1000;
overflow-y: auto;
padding: 20px;
}
.mobile-toc-drawer.show[b-azye0xfo32] {
transform: translateY(0);
}
.drawer-handle[b-azye0xfo32] {
width: 40px;
height: 4px;
background: #D1D5DB;
border-radius: 2px;
margin: 0 auto 20px;
cursor: grab;
}
.drawer-content h3[b-azye0xfo32] {
font-size: 16px;
font-weight: 600;
color: #374151;
margin: 0 0 12px 0;
}
.drawer-premium[b-azye0xfo32] {
font-size: 28px;
font-weight: 700;
color: var(--brand-500);
margin-bottom: 8px;
}
.drawer-progress[b-azye0xfo32] {
font-size: 14px;
color: #6B7280;
margin-bottom: 24px;
}
.drawer-nav[b-azye0xfo32] {
list-style: none;
padding: 0;
margin: 0;
}
.drawer-nav li[b-azye0xfo32] {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border-bottom: 1px solid #E5E7EB;
cursor: pointer;
transition: background 0.2s;
}
.drawer-nav li:hover[b-azye0xfo32] {
background: #F3F4F6;
}
.drawer-nav li i[b-azye0xfo32] {
font-size: 18px;
}
/* Bootstrap Modal Customizations — chrome (radius, header, footer, backdrop)
comes from the global wwwroot/css/modal-theme.css. */
.confirmation-text[b-azye0xfo32] {
font-size: 16px;
font-weight: 500;
color: #374151;
margin-bottom: 20px;
}
.confirmation-details[b-azye0xfo32] {
background: #F9FAFB;
border: 1px solid #E5E7EB;
border-radius: 8px;
padding: 16px;
margin-bottom: 16px;
}
.detail-item[b-azye0xfo32] {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
color: #6B7280;
font-size: 14px;
}
.detail-item:not(:last-child)[b-azye0xfo32] {
border-bottom: 1px solid #E5E7EB;
}
.detail-item i[b-azye0xfo32] {
font-size: 18px;
color: #3B82F6;
width: 20px;
text-align: center;
}
.detail-item strong[b-azye0xfo32] {
color: #111827;
font-weight: 600;
}
.confirmation-notice[b-azye0xfo32] {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 12px;
background: #EFF6FF;
border: 1px solid #BFDBFE;
border-radius: 6px;
font-size: 13px;
color: #1E40AF;
line-height: 1.5;
}
.confirmation-notice i[b-azye0xfo32] {
font-size: 16px;
color: #3B82F6;
flex-shrink: 0;
margin-top: 2px;
}
/* Modal Button Styles */
.btn-cancel[b-azye0xfo32],
.btn-confirm[b-azye0xfo32] {
padding: 10px 20px;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-confirm[b-azye0xfo32] {
background: var(--brand-600, #004980);
border: none;
color: white;
}
.btn-confirm:hover[b-azye0xfo32] {
background: var(--brand-700, #003760);
}
/* Submission Result Modal */
#submissionResultModal .result-modal[b-azye0xfo32] {
max-width: 650px;
}
.success-message[b-azye0xfo32] {
font-size: 16px;
color: #6B7280;
text-align: center;
margin-bottom: 24px;
line-height: 1.6;
}
.success-details[b-azye0xfo32] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 24px;
}
.detail-card[b-azye0xfo32] {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
background: #F0FDF4;
border: 1px solid #BBF7D0;
border-radius: 8px;
}
.detail-card i[b-azye0xfo32] {
font-size: 24px;
color: #10B981;
}
.detail-card > div[b-azye0xfo32] {
display: flex;
flex-direction: column;
gap: 4px;
}
.detail-label[b-azye0xfo32] {
font-size: 12px;
color: #6B7280;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.detail-value[b-azye0xfo32] {
font-size: 14px;
color: #111827;
font-weight: 600;
}
.next-steps[b-azye0xfo32] {
background: #F9FAFB;
border: 1px solid #E5E7EB;
border-radius: 8px;
padding: 20px;
}
.next-steps h4[b-azye0xfo32] {
margin: 0 0 12px 0;
font-size: 15px;
font-weight: 600;
color: #374151;
display: flex;
align-items: center;
gap: 8px;
}
.next-steps h4 i[b-azye0xfo32] {
color: #10B981;
}
.next-steps ul[b-azye0xfo32] {
margin: 0;
padding-left: 20px;
color: #6B7280;
font-size: 14px;
line-height: 1.8;
}
.next-steps li[b-azye0xfo32] {
margin-bottom: 6px;
}
/* Submission-result footer buttons — canonical: ghost secondary, brand primary. */
#submissionResultModal .modal-footer .btn-primary[b-azye0xfo32],
#submissionResultModal .modal-footer .btn-secondary[b-azye0xfo32] {
border: none;
border-radius: 10px;
font-size: 0.85rem;
font-weight: 600;
padding: 0.55rem 1.15rem;
cursor: pointer;
transition: all 0.15s;
display: inline-flex;
align-items: center;
gap: 8px;
}
#submissionResultModal .modal-footer .btn-primary[b-azye0xfo32] {
background: var(--brand-600, #004980);
color: white;
}
#submissionResultModal .modal-footer .btn-primary:hover[b-azye0xfo32] {
background: var(--brand-700, #003760);
}
#submissionResultModal .modal-footer .btn-secondary[b-azye0xfo32] {
background: transparent;
color: #64748B;
border: 1px solid #E2E8F0;
}
#submissionResultModal .modal-footer .btn-secondary:hover[b-azye0xfo32] {
background: #F1F5F9;
color: #0F172A;
}
.error-message[b-azye0xfo32] {
font-size: 16px;
color: #6B7280;
text-align: center;
margin-bottom: 24px;
line-height: 1.6;
}
.error-card[b-azye0xfo32] {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px;
background: #FEF2F2;
border: 1px solid #FECACA;
border-radius: 8px;
margin-bottom: 24px;
}
.error-card i[b-azye0xfo32] {
font-size: 24px;
color: #EF4444;
flex-shrink: 0;
}
.error-card > div[b-azye0xfo32] {
flex: 1;
}
.error-label[b-azye0xfo32] {
display: block;
font-size: 12px;
color: #991B1B;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
}
.error-text[b-azye0xfo32] {
display: block;
font-size: 14px;
color: var(--error-600);
line-height: 1.5;
}
.error-actions[b-azye0xfo32] {
background: #F9FAFB;
border: 1px solid #E5E7EB;
border-radius: 8px;
padding: 20px;
}
.error-actions h4[b-azye0xfo32] {
margin: 0 0 12px 0;
font-size: 15px;
font-weight: 600;
color: #374151;
display: flex;
align-items: center;
gap: 8px;
}
.error-actions h4 i[b-azye0xfo32] {
color: #F59E0B;
}
.error-actions ul[b-azye0xfo32] {
margin: 0;
padding-left: 20px;
color: #6B7280;
font-size: 14px;
line-height: 1.8;
}
.error-actions li[b-azye0xfo32] {
margin-bottom: 6px;
}
/* Responsive Modal Styles */
@media (max-width: 768px) {
.confirmation-modal[b-azye0xfo32],
.result-modal[b-azye0xfo32] {
max-width: 95% !important;
}
.success-details[b-azye0xfo32] {
grid-template-columns: 1fr;
}
#submissionResultModal .modal-footer[b-azye0xfo32] {
flex-direction: column;
}
#submissionResultModal .modal-footer .btn-primary[b-azye0xfo32],
#submissionResultModal .modal-footer .btn-secondary[b-azye0xfo32] {
width: 100%;
justify-content: center;
}
}
/* Smooth Scroll */
html[b-azye0xfo32] {
scroll-behavior: smooth;
}
/* Environmental Declarations Section */
.env-section[b-azye0xfo32] {
background: rgba(255, 255, 255, 0.6);
border: 1px solid var(--border-light);
border-radius: 6px;
padding: 16px 20px;
margin-bottom: 16px;
animation: fadeInUp-b-azye0xfo32 0.35s ease-out backwards;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.env-section:nth-child(1)[b-azye0xfo32] { animation-delay: 0.05s; }
.env-section:nth-child(2)[b-azye0xfo32] { animation-delay: 0.1s; }
.env-section:nth-child(3)[b-azye0xfo32] { animation-delay: 0.15s; }
.env-section:nth-child(4)[b-azye0xfo32] { animation-delay: 0.2s; }
.env-section:hover[b-azye0xfo32] {
border-color: var(--brand-200);
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}
.env-section:last-child[b-azye0xfo32] {
margin-bottom: 0;
}
.env-section-title[b-azye0xfo32] {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 12px 0;
padding-bottom: 10px;
border-bottom: 1px solid var(--border-light);
line-height: 1.4;
}
.question-group[b-azye0xfo32] {
margin-bottom: 16px;
}
.question-group:last-child[b-azye0xfo32] {
margin-bottom: 0;
}
/* Parent Question Styling */
.parent-question[b-azye0xfo32] {
position: relative;
}
/* Child Question Section - First Level Nesting */
.child-question-section[b-azye0xfo32] {
margin-top: 12px;
margin-left: 20px;
padding-left: 16px;
border-left: 2px solid var(--brand-200);
animation: slideInLeft-b-azye0xfo32 0.35s ease-out;
background: linear-gradient(to right, rgba(59, 130, 246, 0.02) 0%, transparent 100%);
border-radius: 0 6px 6px 0;
padding-top: 12px;
padding-bottom: 12px;
padding-right: 12px;
}
/* Child Question */
.child-question[b-azye0xfo32] {
margin-bottom: 14px;
}
.child-question:last-child[b-azye0xfo32] {
margin-bottom: 0;
}
/* Child Label with Indicator */
.child-label[b-azye0xfo32] {
display: flex;
align-items: center;
gap: 6px;
}
.child-indicator[b-azye0xfo32] {
color: var(--brand-500);
font-size: 14px;
flex-shrink: 0;
}
/* Grandchild Question Section - Second Level Nesting */
.grandchild-question-section[b-azye0xfo32] {
margin-top: 16px;
margin-left: 20px;
padding-left: 20px;
border-left: 3px solid var(--brand-300);
animation: slideInLeft-b-azye0xfo32 0.35s ease-out 0.1s backwards;
background: linear-gradient(to right, rgba(59, 130, 246, 0.04) 0%, transparent 100%);
border-radius: 0 8px 8px 0;
padding-top: 12px;
padding-bottom: 12px;
padding-right: 12px;
}
/* Grandchild Question */
.grandchild-question[b-azye0xfo32] {
margin-bottom: 0;
}
/* Grandchild Label with Indicator */
.grandchild-label[b-azye0xfo32] {
display: flex;
align-items: center;
gap: 6px;
}
.grandchild-indicator[b-azye0xfo32] {
color: var(--brand-600);
font-size: 13px;
flex-shrink: 0;
margin-left: 4px;
}
/* Great-Grandchild Question Section - Third Level Nesting */
.great-grandchild-question-section[b-azye0xfo32] {
margin-top: 16px;
margin-left: 32px;
padding-left: 24px;
border-left: 3px solid var(--brand-200);
animation: slideInLeft-b-azye0xfo32 0.35s ease-out 0.15s backwards;
background: linear-gradient(to right, rgba(59, 130, 246, 0.02) 0%, transparent 100%);
border-radius: 0 8px 8px 0;
padding-top: 12px;
padding-bottom: 12px;
padding-right: 12px;
}
/* Great-Grandchild Question */
.great-grandchild-question[b-azye0xfo32] {
margin-bottom: 16px;
}
.great-grandchild-question:last-child[b-azye0xfo32] {
margin-bottom: 0;
}
/* Great-Grandchild Label with Indicator */
.great-grandchild-label[b-azye0xfo32] {
display: flex;
align-items: center;
gap: 6px;
}
.great-grandchild-indicator[b-azye0xfo32] {
color: var(--brand-500);
font-size: 12px;
flex-shrink: 0;
margin-left: 4px;
}
.question-label[b-azye0xfo32] {
display: block;
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
margin-bottom: 10px;
line-height: 1.5;
}
.question-label .required[b-azye0xfo32] {
color: var(--error-600);
margin-left: 4px;
}
.help-link[b-azye0xfo32] {
display: inline-block;
font-size: 12px;
color: var(--brand-600);
margin-bottom: 10px;
text-decoration: none;
}
.help-link:hover[b-azye0xfo32] {
text-decoration: underline;
color: var(--brand-700);
}
/* File Upload Area */
.file-upload-area[b-azye0xfo32] {
border: 2px dashed var(--border-medium);
border-radius: 6px;
padding: 24px;
text-align: center;
background: white;
cursor: pointer;
transition: all 0.2s ease;
}
.file-upload-area:hover[b-azye0xfo32] {
border-color: var(--brand-500);
background: var(--brand-50);
}
.file-upload-area i[b-azye0xfo32] {
font-size: 40px;
color: var(--brand-500);
margin-bottom: 12px;
}
.file-upload-text[b-azye0xfo32] {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 4px;
}
.file-upload-hint[b-azye0xfo32] {
font-size: 14px;
color: var(--text-muted);
margin-bottom: 12px;
}
.file-upload-limit[b-azye0xfo32] {
display: block;
font-size: 13px;
color: var(--text-muted);
}
/* Warranty Section */
.warranty-section[b-azye0xfo32] {
background: linear-gradient(135deg, #FFF7ED 0%, #FFFBEB 100%);
border-color: #FED7AA;
}
.warranty-text[b-azye0xfo32] {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: 20px;
}
.warranty-text p[b-azye0xfo32] {
margin-bottom: 12px;
font-weight: 500;
}
.warranty-text ul[b-azye0xfo32] {
margin: 0;
padding-left: 24px;
}
.warranty-text li[b-azye0xfo32] {
margin-bottom: 8px;
}
.warranty-text li:last-child[b-azye0xfo32] {
margin-bottom: 0;
}
/* Responsive Breakpoints */
@media (max-width: 1024px) {
.sidebar-container[b-azye0xfo32] {
display: none;
}
.mobile-bottom-bar[b-azye0xfo32] {
display: flex;
}
.floating-toc-btn[b-azye0xfo32] {
display: flex;
}
.main-content[b-azye0xfo32] {
width: 100%;
padding-bottom: 80px;
}
.floating-save-indicator[b-azye0xfo32] {
/* No `top` override here: the banner and the topbar are the same height at every
breakpoint (--topbar-height is never redefined), so the 104px above is the one
offset that clears them and the old tighter 70px would still be clipped. */
right: 16px;
padding: 5px 10px 5px 8px;
font-size: 10px;
}
.floating-save-indicator i[b-azye0xfo32] {
font-size: 12px;
}
.floating-save-indicator .save-time[b-azye0xfo32] {
display: none; /* Hide text on mobile, show only icon */
}
}
@media (max-width: 768px) {
/* Legacy support - Bootstrap grid handles responsive automatically */
.form-row-2col[b-azye0xfo32],
.form-row-3col[b-azye0xfo32] {
grid-template-columns: 1fr;
gap: 16px;
}
.form-section[b-azye0xfo32] {
padding: 20px 16px;
}
.loan-basics-section[b-azye0xfo32] {
padding: 20px 16px;
}
.section-header[b-azye0xfo32] {
gap: 12px;
margin-bottom: 20px;
}
.section-header-icon[b-azye0xfo32] {
width: 40px;
height: 40px;
}
.section-header-icon i[b-azye0xfo32] {
font-size: 20px;
}
.section-title[b-azye0xfo32] {
font-size: 18px;
}
.section-description[b-azye0xfo32] {
font-size: 13px;
}
.form-group.enhanced[b-azye0xfo32] {
margin-bottom: 20px;
}
.form-actions[b-azye0xfo32] {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.action-buttons-right[b-azye0xfo32] {
flex-direction: column;
width: 100%;
}
.btn-save-draft[b-azye0xfo32],
.btn-submit[b-azye0xfo32],
.btn-cancel[b-azye0xfo32] {
width: 100%;
justify-content: center;
}
.page-container[b-azye0xfo32] {
padding: 0 12px;
}
}
@media (max-width: 480px) {
.application-title[b-azye0xfo32] {
font-size: 18px;
}
.application-subtitle[b-azye0xfo32] {
font-size: 12px;
}
.section-title[b-azye0xfo32] {
font-size: 15px;
}
.section-header-icon[b-azye0xfo32] {
width: 32px;
height: 32px;
}
.section-header-icon i[b-azye0xfo32] {
font-size: 16px;
}
.form-label[b-azye0xfo32] {
font-size: 12px;
}
.form-input[b-azye0xfo32] {
font-size: 14px; /* Prevents zoom on iOS */
padding: 8px 12px;
}
.form-section[b-azye0xfo32] {
padding: 16px 20px;
margin-bottom: 14px;
}
}
/* Multi-Step Wizard Styles */
/* Step Indicator */
.step-indicator-wrapper[b-azye0xfo32] {
position: sticky;
top: 0;
margin-bottom: 16px;
margin-top: -32px;
margin-left: -32px;
margin-right: -32px;
padding: 12px 32px;
background: white;
border-radius: 0;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
z-index: 99;
}
.step-indicator[b-azye0xfo32] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 0;
position: relative;
}
.step-item[b-azye0xfo32] {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
position: relative;
}
.step-node[b-azye0xfo32] {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
margin-bottom: 6px;
transition: all 0.3s ease;
z-index: 2;
position: relative;
}
.step-node.future[b-azye0xfo32] {
background: #E5E7EB;
color: #9CA3AF;
border: 3px solid #E5E7EB;
}
.step-node.current[b-azye0xfo32] {
background: var(--brand-500);
color: white;
border: 3px solid var(--brand-500);
box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.08);
animation: pulse-b-azye0xfo32 2s infinite;
}
.step-node.completed[b-azye0xfo32] {
background: #10B981;
color: white;
border: 3px solid #10B981;
}
.step-node.clickable[b-azye0xfo32] {
cursor: pointer;
}
.step-node.clickable:hover[b-azye0xfo32] {
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
@keyframes pulse-b-azye0xfo32 {
0%, 100% {
box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.08);
}
50% {
box-shadow: 0 0 0 8px rgba(15, 23, 42, 0.15);
}
}
.step-label[b-azye0xfo32] {
text-align: center;
max-width: 120px;
}
.step-title[b-azye0xfo32] {
font-size: 11px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 2px;
line-height: 1.2;
}
.step-subtitle[b-azye0xfo32] {
font-size: 10px;
color: var(--text-secondary);
}
.step-connector[b-azye0xfo32] {
position: absolute;
height: 2px;
background: #E5E7EB;
top: 18px;
left: 50%;
right: -50%;
z-index: 1;
}
.step-item:last-child .step-connector[b-azye0xfo32] {
display: none;
}
.step-node.completed ~ .step-connector[b-azye0xfo32],
.step-item:has(.step-node.completed) + .step-item .step-connector[b-azye0xfo32] {
background: #10B981;
}
.current-step-description[b-azye0xfo32] {
text-align: center;
padding: 8px 16px;
background: #F0F9FF;
border-radius: 6px;
margin-top: 8px;
}
.current-step-description p[b-azye0xfo32] {
margin: 0;
font-size: 11px;
color: var(--brand-500);
font-weight: 500;
line-height: 1.3;
}
/* Wizard Action Buttons */
.form-actions-wizard[b-azye0xfo32] {
position: fixed;
bottom: 0;
left: 260px; /* Account for expanded sidebar - matches --sidebar-width-expanded */
right: 0;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 14px 24px;
background: white;
border-top: 1px solid #E5E7EB;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
z-index: 100;
transition: left 0.3s ease; /* Smooth transition when sidebar collapses */
}
/* When sidebar is collapsed */
.sidebar-collapsed .form-actions-wizard[b-azye0xfo32],
body:has(.sidebar.collapsed) .form-actions-wizard[b-azye0xfo32] {
left: 72px; /* Account for collapsed sidebar - matches --sidebar-width-collapsed */
}
.wizard-actions-left[b-azye0xfo32],
.wizard-actions-right[b-azye0xfo32] {
display: flex;
gap: 10px;
align-items: center;
}
.btn-back[b-azye0xfo32],
.btn-next[b-azye0xfo32],
.btn-submit[b-azye0xfo32] {
padding: 10px 20px;
border-radius: 10px;
font-weight: 600;
font-size: 13px;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
display: inline-flex;
align-items: center;
gap: 6px;
border: none;
line-height: 1.4;
}
.btn-back[b-azye0xfo32] {
background: transparent;
color: #64748B;
border: 1px solid #E2E8F0;
}
.btn-back:hover[b-azye0xfo32] {
background: #F1F5F9;
color: #0F172A;
}
.btn-next[b-azye0xfo32] {
background: var(--brand-600, #004980);
color: white;
}
.btn-next:hover[b-azye0xfo32] {
background: var(--brand-700, #003760);
}
.btn-submit[b-azye0xfo32] {
background: var(--success-600, #059669);
color: white;
}
.btn-submit:hover[b-azye0xfo32] {
background: var(--success-700, #047857);
}
.btn-save-draft[b-azye0xfo32] {
padding: 10px 18px;
background: #fff;
color: var(--brand-600, #004980);
border: 1px solid var(--brand-300, #80B7D9);
border-radius: 10px;
font-weight: 600;
font-size: 13px;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
display: inline-flex;
align-items: center;
gap: 6px;
line-height: 1.4;
}
.btn-save-draft:hover[b-azye0xfo32] {
background: var(--brand-50, #E6F2F8);
border-color: var(--brand-600, #004980);
color: var(--brand-700, #003760);
}
/* Review Cards */
.review-summary[b-azye0xfo32] {
display: flex;
flex-direction: column;
gap: 0;
width: 100%;
}
.review-card[b-azye0xfo32] {
background: white;
border: 1px solid #E5E7EB;
border-radius: 12px;
overflow: hidden;
transition: all 0.2s;
width: 100%;
}
.review-card:hover[b-azye0xfo32] {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.review-card-header[b-azye0xfo32] {
background: #F9FAFB;
padding: 16px 20px;
border-bottom: 1px solid #E5E7EB;
display: flex;
justify-content: space-between;
align-items: center;
}
.review-card-header h3[b-azye0xfo32] {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin: 0;
display: flex;
align-items: center;
gap: 10px;
}
.review-card-header h3 i[b-azye0xfo32] {
color: var(--brand-500);
}
.btn-edit-link[b-azye0xfo32] {
background: transparent;
border: none;
color: var(--brand-500);
font-size: 13px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 6px;
transition: all 0.2s;
}
.btn-edit-link:hover[b-azye0xfo32] {
background: #F0F9FF;
}
.review-card-body[b-azye0xfo32] {
padding: 20px;
}
.review-item[b-azye0xfo32] {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 12px 0;
border-bottom: 1px solid #F3F4F6;
}
.review-item:last-child[b-azye0xfo32] {
border-bottom: none;
}
.review-item.has-error[b-azye0xfo32] {
background: #FEF2F2;
padding-left: 12px;
padding-right: 12px;
margin: 0 -12px;
border-radius: 6px;
}
.review-label[b-azye0xfo32] {
font-size: 13px;
color: #6B7280;
font-weight: 500;
flex: 0 0 45%;
}
.review-value[b-azye0xfo32] {
font-size: 14px;
color: var(--text-primary);
font-weight: 600;
text-align: right;
flex: 1;
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
}
/* Review Value Badges */
.review-value-badge[b-azye0xfo32] {
display: inline-block;
padding: 4px 12px;
border-radius: 12px;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
}
.badge-success[b-azye0xfo32] {
background: #D1FAE5;
color: #065F46;
}
.badge-danger[b-azye0xfo32] {
background: #FEE2E2;
color: #991B1B;
}
.badge-secondary[b-azye0xfo32] {
background: #F3F4F6;
color: #6B7280;
}
/* Environmental Warning Note */
.environmental-warning-note[b-azye0xfo32] {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 16px;
background: #FEF3C7;
border: 1px solid #FCD34D;
border-radius: 6px;
color: #92400E;
font-size: 13px;
line-height: 1.5;
}
.environmental-warning-note i[b-azye0xfo32] {
font-size: 18px;
color: #F59E0B;
flex-shrink: 0;
margin-top: 2px;
}
.environmental-warning-note span[b-azye0xfo32] {
flex: 1;
}
.environmental-warning-note strong[b-azye0xfo32] {
font-weight: 600;
}
/* Hierarchical Review Items (Child/Grandchild) */
.review-item-child[b-azye0xfo32] {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
gap: 6px;
padding: 10px 0 10px 20px;
border-bottom: 1px solid #F3F4F6;
background: #FAFAFA;
margin: 0 -20px;
padding-left: 40px;
padding-right: 20px;
min-width: 0;
}
.review-item-child:last-child[b-azye0xfo32] {
border-bottom: none;
}
.review-item-grandchild[b-azye0xfo32] {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
gap: 6px;
padding: 10px 0 10px 40px;
border-bottom: 1px solid #F3F4F6;
background: #F5F5F5;
margin: 0 -20px;
padding-left: 60px;
padding-right: 20px;
min-width: 0;
}
.review-item-grandchild:last-child[b-azye0xfo32] {
border-bottom: none;
}
.review-item-child .review-label[b-azye0xfo32],
.review-item-grandchild .review-label[b-azye0xfo32] {
font-size: 12px;
color: #6B7280;
font-weight: 500;
flex: 0 0 auto;
white-space: nowrap;
}
.review-item-child .review-value[b-azye0xfo32],
.review-item-grandchild .review-value[b-azye0xfo32] {
font-size: 13px;
color: var(--text-primary);
font-weight: 600;
text-align: left;
flex: 1 1 0;
min-width: 0;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}
/* Review Subsections */
.review-subsection[b-azye0xfo32] {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid #E5E7EB;
}
.review-subsection:first-child[b-azye0xfo32] {
margin-top: 0;
padding-top: 0;
border-top: none;
}
.review-subsection-title[b-azye0xfo32] {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.review-subsection-title[b-azye0xfo32]::before {
content: '';
width: 4px;
height: 16px;
background: var(--primary-teal);
border-radius: 2px;
}
/* Simple Badge-like Yes/No/Not Answered Indicators */
.review-answer[b-azye0xfo32] {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.8125rem;
font-weight: 600;
padding: 0.25rem 0.625rem;
border-radius: 4px;
white-space: nowrap;
flex-shrink: 0;
background: var(--neutral-100);
color: var(--text-secondary, #6B7280);
}
.review-answer i[b-azye0xfo32] {
font-size: 0.875rem;
color: var(--text-muted, #9CA3AF);
}
.review-answer-yes[b-azye0xfo32] {
background: var(--brand-50);
color: var(--brand-700);
}
.review-answer-yes i[b-azye0xfo32] {
color: var(--brand-600);
}
.review-answer-no[b-azye0xfo32] {
background: var(--neutral-100);
color: var(--text-secondary, #6B7280);
}
.review-answer-no i[b-azye0xfo32] {
color: var(--text-muted, #9CA3AF);
}
.review-answer-muted[b-azye0xfo32] {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.8125rem;
font-weight: 500;
padding: 0.25rem 0.625rem;
border-radius: 4px;
background: var(--neutral-50);
color: var(--text-muted, #9CA3AF);
font-style: italic;
}
/* Environmental Risk Badges */
.environmental-badges[b-azye0xfo32] {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.env-badge[b-azye0xfo32] {
display: inline-block;
padding: 6px 12px;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
border: 1px solid;
}
.env-badge-heavy[b-azye0xfo32] {
background: #FEF3C7;
border-color: #F59E0B;
color: #92400E;
}
.env-badge-rcra[b-azye0xfo32] {
background: #FEE2E2;
border-color: #F87171;
color: #991B1B;
}
.validation-error-notice[b-azye0xfo32] {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: #FEE2E2;
border: 1px solid #FCA5A5;
border-left: 3px solid var(--error-600);
border-radius: 6px;
color: #991B1B;
font-size: 13px;
font-weight: 500;
}
.validation-error-notice i[b-azye0xfo32] {
font-size: 16px;
color: var(--error-600);
flex-shrink: 0;
}
.premium-summary-card[b-azye0xfo32] {
border: 2px solid #10B981;
background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
}
.premium-summary-card .review-card-header[b-azye0xfo32] {
background: #10B981;
color: white;
}
.premium-summary-card .review-card-header h3[b-azye0xfo32] {
color: white;
}
.premium-summary-card .review-card-header h3 i[b-azye0xfo32] {
color: white;
}
.premium-item[b-azye0xfo32] {
padding: 16px 0;
border-bottom: 2px solid #10B981;
}
.premium-value[b-azye0xfo32] {
font-size: 24px;
color: #10B981;
font-weight: 700;
}
.custom-checkbox[b-azye0xfo32] {
padding-left: 2.5rem !important; /* Add space for the larger checkbox */
display: flex;
align-items: center;
}
.custom-checkbox .form-check-input[b-azye0xfo32] {
width: 1.3em;
height: 1.3em;
margin-left: -2rem; /* Pull back into the padding area */
margin-top: 0;
border: 2px solid #adb5bd; /* slightly thicker, visible border */
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.custom-checkbox .form-check-label[b-azye0xfo32] {
padding-left: 0.5rem;
cursor: pointer;
font-weight: 500;
font-size: 14px;
color: #495057;
user-select: none; /* Prevent text selection on double click */
}
.custom-checkbox .form-check-input:checked[b-azye0xfo32] {
background-color: #0d6efd; /* Bootstrap primary color */
border-color: #0d6efd;
transform: scale(1.05); /* Subtle pop effect when checked */
}
.custom-checkbox .form-check-input:focus[b-azye0xfo32] {
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* Soft focus ring */
}
/* Mobile Responsive for Wizard */
@media (max-width: 768px) {
.main-content[b-azye0xfo32] {
padding-top: 20px;
padding-bottom: 160px; /* More space for mobile stacked buttons */
}
.step-indicator-wrapper[b-azye0xfo32] {
margin-top: -20px;
margin-left: -20px;
margin-right: -20px;
padding: 10px 20px;
}
.step-indicator[b-azye0xfo32] {
flex-direction: column;
gap: 12px;
}
.step-item[b-azye0xfo32] {
flex-direction: row;
width: 100%;
align-items: center;
justify-content: flex-start;
}
.step-node[b-azye0xfo32] {
margin-bottom: 0;
margin-right: 10px;
width: 32px;
height: 32px;
font-size: 13px;
}
.step-label[b-azye0xfo32] {
text-align: left;
flex: 1;
max-width: none;
}
.step-title[b-azye0xfo32] {
font-size: 12px;
}
.step-subtitle[b-azye0xfo32] {
font-size: 10px;
}
.current-step-description[b-azye0xfo32] {
padding: 6px 12px;
font-size: 10px;
}
.step-connector[b-azye0xfo32] {
display: none;
}
.form-actions-wizard[b-azye0xfo32] {
left: 0; /* Full width on mobile - no sidebar */
flex-direction: column;
gap: 10px;
padding: 12px 16px;
}
.wizard-actions-left[b-azye0xfo32],
.wizard-actions-right[b-azye0xfo32] {
width: 100%;
justify-content: center;
}
.wizard-actions-right[b-azye0xfo32] {
flex-direction: column;
gap: 12px;
}
.btn-back[b-azye0xfo32],
.btn-next[b-azye0xfo32],
.btn-submit[b-azye0xfo32],
.btn-cancel[b-azye0xfo32],
.btn-save-draft[b-azye0xfo32] {
width: 100%;
justify-content: center;
}
.review-item[b-azye0xfo32] {
flex-direction: column;
gap: 6px;
}
.review-label[b-azye0xfo32],
.review-value[b-azye0xfo32] {
text-align: left;
}
}
/* Application Progress Card - Compact with Simplified Dots */
.progress-section-card[b-azye0xfo32] {
background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 100%);
border-radius: 10px;
padding: 14px 16px;
margin-bottom: 14px;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2), 0 2px 6px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.progress-section-card[b-azye0xfo32]::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
animation: shine-b-azye0xfo32 3s infinite;
}
@keyframes shine-b-azye0xfo32 {
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}
.progress-card-header[b-azye0xfo32] {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
color: white;
}
.progress-card-header i[b-azye0xfo32] {
font-size: 18px;
color: #FCD34D;
animation: lightning-pulse-b-azye0xfo32 1.5s ease-in-out infinite;
}
@keyframes lightning-pulse-b-azye0xfo32 {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.progress-title[b-azye0xfo32] {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
}
.progress-stats[b-azye0xfo32] {
display: flex;
align-items: baseline;
gap: 6px;
margin-bottom: 10px;
}
.progress-percentage-large[b-azye0xfo32] {
font-size: 28px;
font-weight: 800;
color: white;
line-height: 1;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.progress-status-text[b-azye0xfo32] {
font-size: 12px;
font-weight: 600;
color: rgba(255, 255, 255, 0.95);
}
.progress-bar-container[b-azye0xfo32] {
margin-bottom: 10px;
}
.progress-bar-track[b-azye0xfo32] {
height: 6px;
background: rgba(255, 255, 255, 0.2);
border-radius: 20px;
overflow: hidden;
position: relative;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}
.progress-bar-fill[b-azye0xfo32] {
height: 100%;
background: linear-gradient(90deg, #10B981 0%, #059669 100%);
border-radius: 20px;
transition: width 0.5s ease;
position: relative;
box-shadow: 0 1px 4px rgba(16, 185, 129, 0.5);
}
.progress-bar-shine[b-azye0xfo32] {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
animation: bar-shine-b-azye0xfo32 2s infinite;
}
@keyframes bar-shine-b-azye0xfo32 {
0% { left: -100%; }
100% { left: 200%; }
}
/* ===========================================================================
Simplified-flow additions (not present in the traditional form)
=========================================================================== */
/* Info banner explaining Simplified Application Mode */
.simplified-mode-banner[b-azye0xfo32] {
display: flex;
gap: 12px;
align-items: flex-start;
background: #eff6ff;
border: 1px solid #bfdbfe;
border-radius: 10px;
padding: 16px 20px;
margin-bottom: 20px;
}
.simplified-mode-banner i[b-azye0xfo32] {
color: #2563eb;
font-size: 18px;
margin-top: 1px;
}
.simplified-mode-banner .banner-title[b-azye0xfo32] {
color: #1d4ed8;
font-weight: 700;
margin-bottom: 4px;
}
.simplified-mode-banner .banner-text[b-azye0xfo32] {
color: #1e3a5f;
font-size: var(--font-size-sm, 0.875rem);
margin: 0;
}
/* Policy Term + balloon child question group — borderless; the two fields
read as one stack, with the balloon question as a soft contextual panel. */
.policy-term-group[b-azye0xfo32] {
display: flex;
flex-direction: column;
gap: 14px;
}
.policy-term-group .term-echo[b-azye0xfo32] {
color: var(--gray-500, #6b7280);
font-size: var(--font-size-sm, 0.875rem);
white-space: nowrap;
}
.policy-term-child[b-azye0xfo32] {
background: #f8fafc;
border: 1px solid var(--gray-200, #e5e7eb);
border-radius: 10px;
padding: 14px 16px;
}
.policy-term-child .child-label-bar[b-azye0xfo32] {
border-left: 3px solid var(--brand-500, #0d6efd);
padding-left: 12px;
}
/* Coverage Eligibility Review */
.eligibility-review-intro[b-azye0xfo32] {
margin-bottom: 12px;
}
.eligibility-review-intro h3[b-azye0xfo32] {
font-size: var(--font-size-lg, 1.125rem);
font-weight: 700;
margin-bottom: 4px;
}
.eligibility-review-intro p[b-azye0xfo32] {
color: var(--gray-500, #6b7280);
font-size: var(--font-size-sm, 0.875rem);
margin: 0;
}
/* Switch link inside the Simplified Mode banner */
.simplified-mode-banner .banner-switch[b-azye0xfo32] {
display: block;
margin-top: 6px;
}
.simplified-mode-banner .banner-switch a[b-azye0xfo32] {
color: #1d4ed8;
font-weight: 600;
}
/* Loan Basics: each column stacks its fields independently so the
variable-height policy-term card never opens gaps in the other column. */
.loan-basics-col[b-azye0xfo32] {
display: flex;
flex-direction: column;
gap: 24px;
}
.loan-basics-col > div .form-group:last-child[b-azye0xfo32],
.loan-basics-col > div:last-child .form-group[b-azye0xfo32] {
margin-bottom: 0;
}
/* /Components/Pages/Applications/NewApplicationStraightFormPage.razor.rz.scp.css */
/* Straight Form Application Page Styles */
.main-content[b-82men5aelw] {
padding-bottom: 100px;
}
/* Loading Overlay */
.loading-overlay[b-82men5aelw] {
position: fixed;
inset: 0;
background: rgba(255, 255, 255, 0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 2000;
}
.spinner[b-82men5aelw] {
width: 50px;
height: 50px;
border: 4px solid #E5E7EB;
border-top-color: var(--brand-500);
border-radius: 50%;
animation: spin-b-82men5aelw 1s linear infinite;
}
@keyframes spin-b-82men5aelw {
to { transform: rotate(360deg); }
}
/* ========================================
Form Animations
======================================== */
/* Step/Section Fade-in Animation */
@keyframes fadeInUp-b-82men5aelw {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Staggered slide in from left */
@keyframes slideInLeft-b-82men5aelw {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Subtle scale in */
@keyframes scaleIn-b-82men5aelw {
from {
opacity: 0;
transform: scale(0.97);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Icon bounce */
@keyframes iconBounce-b-82men5aelw {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-3px);
}
}
/* Form Sections */
.form-section[b-82men5aelw] {
padding: 20px 24px;
margin-bottom: 16px;
background: linear-gradient(135deg, rgba(227, 241, 251, 0.3) 0%, rgba(255, 255, 255, 0.98) 100%);
border: 1px solid var(--border-light);
border-radius: 8px;
scroll-margin-top: 20px;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
transition: box-shadow 0.2s ease, transform 0.2s ease;
animation: fadeInUp-b-82men5aelw 0.4s ease-out backwards;
}
/* Staggered animation for form sections */
.form-section:nth-child(1)[b-82men5aelw] { animation-delay: 0s; }
.form-section:nth-child(2)[b-82men5aelw] { animation-delay: 0.08s; }
.form-section:nth-child(3)[b-82men5aelw] { animation-delay: 0.16s; }
.form-section:nth-child(4)[b-82men5aelw] { animation-delay: 0.24s; }
.form-section:nth-child(5)[b-82men5aelw] { animation-delay: 0.32s; }
.form-section:nth-child(6)[b-82men5aelw] { animation-delay: 0.40s; }
.form-section:hover[b-82men5aelw] {
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
transform: translateY(-1px);
}
.section-header[b-82men5aelw] {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
.section-header-icon[b-82men5aelw] {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: var(--brand-50);
border-radius: 6px;
flex-shrink: 0;
transition: transform 0.2s ease, background-color 0.2s ease;
}
.form-section:hover .section-header-icon[b-82men5aelw] {
background: var(--brand-100);
animation: iconBounce-b-82men5aelw 0.4s ease;
}
.section-header-icon i[b-82men5aelw] {
font-size: 18px;
color: var(--brand-600);
opacity: 0.7;
transition: opacity 0.2s ease;
}
.form-section:hover .section-header-icon i[b-82men5aelw] {
opacity: 1;
}
.section-header-content[b-82men5aelw] {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.section-title[b-82men5aelw] {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin: 0;
line-height: 1.3;
}
.section-description[b-82men5aelw] {
font-size: 12px;
color: var(--text-secondary);
margin: 0;
font-weight: 400;
line-height: 1.4;
}
/* Subsection Headers for Referral Questionnaires */
.subsection-header[b-82men5aelw] {
margin-top: 32px;
margin-bottom: 20px;
padding-bottom: 8px;
border-bottom: 2px solid var(--brand-200);
}
.subsection-header:first-of-type[b-82men5aelw] {
margin-top: 0;
}
.subsection-title[b-82men5aelw] {
font-size: 15px;
font-weight: 700;
color: var(--brand-700);
margin: 0;
letter-spacing: -0.01em;
}
.subsection-subtitle[b-82men5aelw] {
font-size: 14px;
font-weight: 600;
color: var(--brand-600);
margin: 0;
}
/* Read-only Field Styling */
.read-only-field[b-82men5aelw] {
background: #f8f9fa !important;
border: 1px dashed #dee2e6 !important;
cursor: not-allowed !important;
color: var(--text-secondary) !important;
}
.read-only-field:focus[b-82men5aelw] {
border-color: #dee2e6 !important;
box-shadow: none !important;
}
/* Form Layout */
.form-group[b-82men5aelw] {
margin-bottom:5px !important;
display: flex;
flex-direction: column;
gap: 6px;
}
.form-group.enhanced[b-82men5aelw] {
margin-bottom: 24px;
}
.form-label[b-82men5aelw] {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 4px;
line-height: 1.4;
}
.form-help[b-82men5aelw] {
font-size: 12px;
color: var(--text-muted);
line-height: 1.4;
}
.form-label .required[b-82men5aelw] {
color: var(--error-600);
font-weight: 600;
}
/* Input Styling */
.form-input[b-82men5aelw],
.form-select[b-82men5aelw],
[b-82men5aelw] input.form-input,
[b-82men5aelw] select.form-select,
[b-82men5aelw] textarea.form-input,
[b-82men5aelw] input[type="text"].form-input,
[b-82men5aelw] input[type="number"].form-input,
[b-82men5aelw] input[type="email"].form-input,
[b-82men5aelw] input[type="tel"].form-input,
input.form-input[b-82men5aelw],
select.form-select[b-82men5aelw],
textarea.form-input[b-82men5aelw],
input[type="text"].form-input[b-82men5aelw],
input[type="number"].form-input[b-82men5aelw],
input[type="email"].form-input[b-82men5aelw],
input[type="tel"].form-input[b-82men5aelw] {
padding: 8px 12px;
background: white;
font-size: 14px;
border: 1px solid var(--border-medium);
border-radius: 6px;
color: var(--text-primary);
font-family: inherit;
transition: all 0.2s ease;
width: 100%;
box-sizing: border-box;
}
/* Textarea specific styling */
textarea.form-input[b-82men5aelw],
[b-82men5aelw] textarea.form-input {
resize: vertical;
min-height: 80px;
line-height: 1.5;
}
.form-input:focus[b-82men5aelw],
.form-select:focus[b-82men5aelw],
[b-82men5aelw] input.form-input:focus,
[b-82men5aelw] select.form-select:focus,
[b-82men5aelw] textarea.form-input:focus,
input.form-input:focus[b-82men5aelw],
select.form-select:focus[b-82men5aelw],
textarea.form-input:focus[b-82men5aelw] {
outline: none;
border-color: var(--brand-500);
box-shadow: 0 0 0 3px var(--brand-100);
}
.form-input[b-82men5aelw]::placeholder,
[b-82men5aelw] input.form-input::placeholder,
[b-82men5aelw] textarea.form-input::placeholder,
input.form-input[b-82men5aelw]::placeholder,
textarea.form-input[b-82men5aelw]::placeholder {
color: var(--text-muted);
}
/* Select dropdown styling */
.form-select[b-82men5aelw],
[b-82men5aelw] select.form-select,
select.form-select[b-82men5aelw] {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 40px;
}
/* Readonly inputs (auto-filled) */
.form-input[readonly][b-82men5aelw],
[b-82men5aelw] input.form-input[readonly],
input.form-input[readonly][b-82men5aelw] {
background-color: var(--neutral-50);
color: var(--text-secondary);
cursor: not-allowed;
border-color: var(--border-light);
}
.form-input[readonly]:focus[b-82men5aelw],
[b-82men5aelw] input.form-input[readonly]:focus,
input.form-input[readonly]:focus[b-82men5aelw] {
border-color: var(--border-light);
box-shadow: none;
}
/* Input with Prefix (Currency) */
.input-wrapper[b-82men5aelw] {
position: relative;
display: flex;
align-items: center;
}
.input-prefix[b-82men5aelw] {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
font-size: 15px;
font-weight: 600;
color: #6B7280;
pointer-events: none;
z-index: 1;
}
.form-input.with-prefix[b-82men5aelw] {
padding-left: 32px;
}
/* Enhanced Select Dropdown */
.form-select[b-82men5aelw] {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 40px;
}
/* Validation States */
.form-input.is-invalid[b-82men5aelw],
.form-input.invalid[b-82men5aelw],
.form-select.invalid[b-82men5aelw],
[b-82men5aelw] input.form-input.is-invalid,
[b-82men5aelw] input.form-input.invalid,
input.form-input.is-invalid[b-82men5aelw],
input.form-input.invalid[b-82men5aelw],
select.form-select.invalid[b-82men5aelw],
input[type="text"].form-input.is-invalid[b-82men5aelw],
input[type="text"].form-input.invalid[b-82men5aelw],
input[type="number"].form-input.is-invalid[b-82men5aelw],
input[type="number"].form-input.invalid[b-82men5aelw],
input[type="email"].form-input.is-invalid[b-82men5aelw],
input[type="email"].form-input.invalid[b-82men5aelw],
input[type="tel"].form-input.is-invalid[b-82men5aelw],
input[type="tel"].form-input.invalid[b-82men5aelw] {
border-color: var(--error-600) !important;
padding-right: calc(1.5em + 0.75rem);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) center;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.form-input.is-invalid:focus[b-82men5aelw],
.form-input.invalid:focus[b-82men5aelw],
.form-select.invalid:focus[b-82men5aelw],
[b-82men5aelw] input.form-input.is-invalid:focus,
[b-82men5aelw] input.form-input.invalid:focus,
input.form-input.is-invalid:focus[b-82men5aelw],
input.form-input.invalid:focus[b-82men5aelw],
select.form-select.invalid:focus[b-82men5aelw] {
border-color: var(--error-600) !important;
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}
.form-input.valid.modified[b-82men5aelw],
.form-select.valid.modified[b-82men5aelw],
input.form-input.valid.modified[b-82men5aelw],
select.form-select.valid.modified[b-82men5aelw] {
border-color: var(--success-600);
}
/* ValidationMessage Styling */
.validation-message[b-82men5aelw] {
color: var(--error-600);
font-size: 13px;
margin-top: 4px;
display: flex;
align-items: center;
gap: 4px;
}
.validation-message[b-82men5aelw]::before {
content: "?";
font-size: 14px;
}
/* Validation Summary */
.validation-summary[b-82men5aelw] {
margin-bottom: 20px;
padding: 16px;
background: #fef2f2;
border: 1px solid #fecaca;
border-left: 4px solid var(--error-600);
border-radius: 6px;
animation: slideDown-b-82men5aelw 0.3s ease-out;
}
.validation-summary .alert-heading[b-82men5aelw] {
color: #991b1b;
font-size: 15px;
font-weight: 600;
margin-bottom: 8px;
}
.validation-summary ul[b-82men5aelw] {
list-style: none;
padding-left: 0;
margin-bottom: 0;
}
.validation-summary ul li[b-82men5aelw] {
color: #7f1d1d;
font-size: 14px;
padding: 4px 0;
position: relative;
padding-left: 20px;
}
.validation-summary ul li[b-82men5aelw]::before {
content: "�";
position: absolute;
left: 6px;
color: var(--error-600);
font-weight: bold;
}
.validation-summary i[b-82men5aelw] {
color: var(--error-600);
}
@keyframes slideDown-b-82men5aelw {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.form-input.warning[b-82men5aelw],
.form-select.warning[b-82men5aelw] {
border-color: var(--warning-600);
}
.form-input.warning:focus[b-82men5aelw],
.form-select.warning:focus[b-82men5aelw] {
border-color: var(--warning-600);
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}
.field-error[b-82men5aelw] {
color: var(--error-600);
font-size: 13px;
display: flex;
align-items: center;
gap: 4px;
}
.field-error i[b-82men5aelw] {
font-size: 14px;
}
.field-warning[b-82men5aelw] {
color: var(--warning-600);
font-size: 13px;
display: flex;
align-items: center;
gap: 4px;
}
.field-warning i[b-82men5aelw] {
font-size: 14px;
}
/* Referral-trigger notice — shown directly under a field whose value will
route the application outside the LP3 program (loan amount > $10M, LTV
over 80%, property type that requires manual review, construction loan).
Visually distinct from .field-error (which is for blocking validation
errors) and from .field-warning (orange, used for non-routing warnings):
this is a consequential heads-up that doesn't block the user but tells
them exactly what will happen on Get Quote. */
.field-referral-notice[b-82men5aelw] {
margin-top: 8px;
padding: 10px 12px;
background: #fef2f2; /* soft red-50 wash */
border: 1px solid #fecaca; /* red-200 hairline */
border-left: 3px solid var(--error-600);
border-radius: 6px;
color: var(--error-700, #b91c1c);
font-size: 13px;
line-height: 1.45;
display: flex;
align-items: flex-start;
gap: 8px;
}
.field-referral-notice i[b-82men5aelw] {
font-size: 16px;
flex-shrink: 0;
margin-top: 1px;
color: var(--error-600);
}
.field-referral-notice strong[b-82men5aelw] {
color: var(--error-700, #b91c1c);
font-weight: 600;
}
/* Bootstrap 5 Grid Integration
======================================
Using Bootstrap's grid system:
- .row for containers
- .col-12 for full width
- .col-md-6 for 2 columns on medium+ screens
- .col-lg-4 for 3 columns on large+ screens
- .g-3, .g-4 for gutters (gaps)
Bootstrap breakpoints:
- sm: 576px
- md: 768px
- lg: 992px
- xl: 1200px
- xxl: 1400px
====================================== */
/* Legacy support - deprecated, use Bootstrap classes instead */
.form-row-2col[b-82men5aelw] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
margin-bottom: 0;
}
.form-row-3col[b-82men5aelw] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
margin-bottom: 0;
}
.form-input.auto-filled[b-82men5aelw],
input.form-input.auto-filled[b-82men5aelw] {
background: #F0FDF4;
border-color: #86EFAC;
}
/* Conditional Sections */
.conditional-section[b-82men5aelw] {
animation: fadeIn-b-82men5aelw 0.3s ease-in;
padding-left: 20px;
border-left: 3px solid #E5E7EB;
margin-left: 10px;
margin-top: 12px;
}
@keyframes fadeIn-b-82men5aelw {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Acknowledgement Section */
.acknowledgement-section[b-82men5aelw] {
padding: 20px;
margin-top: 16px;
margin-bottom: 20px;
background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
border: 1px solid #BFDBFE;
border-left: 4px solid #3B82F6;
border-radius: 8px;
animation: fadeIn-b-82men5aelw 0.3s ease-in;
}
.acknowledgement-content[b-82men5aelw] {
width: 100%;
}
.acknowledgement-text[b-82men5aelw] {
font-size: 14px;
color: #1E3A8A;
line-height: 1.6;
margin: 0 0 16px 0;
font-weight: 500;
}
.acknowledgement-checkbox[b-82men5aelw] {
margin-top: 12px;
}
.checkbox-label[b-82men5aelw] {
display: flex;
align-items: flex-start;
gap: 12px;
cursor: pointer;
padding: 12px;
border: 1px solid #BFDBFE;
border-radius: 6px;
background: white;
transition: all 0.2s ease;
}
.checkbox-label:hover[b-82men5aelw] {
background: #F0F9FF;
border-color: #3B82F6;
}
[b-82men5aelw] .checkbox-input,
.checkbox-input[b-82men5aelw] {
margin-top: 2px;
width: 20px;
height: 20px;
cursor: pointer;
accent-color: #3B82F6;
flex-shrink: 0;
}
.checkbox-text[b-82men5aelw] {
font-size: 14px;
color: #1E3A8A;
line-height: 1.5;
user-select: none;
font-weight: 500;
}
.checkbox-text .required[b-82men5aelw] {
color: var(--error-600);
margin-left: 2px;
}
.acknowledgement-checkbox .validation-message[b-82men5aelw] {
display: block;
margin-top: 8px;
margin-left: 44px;
font-size: 13px;
color: var(--error-600);
}
/* Warning Acknowledgement Section (for payment agreement) */
.warning-acknowledgement[b-82men5aelw] {
background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
border: 1px solid #FCD34D;
border-left: 4px solid #F59E0B;
}
.warning-acknowledgement .acknowledgement-text[b-82men5aelw] {
color: #92400E;
display: flex;
align-items: flex-start;
gap: 8px;
}
.warning-acknowledgement .acknowledgement-text i[b-82men5aelw] {
font-size: 18px;
color: #F59E0B;
flex-shrink: 0;
margin-top: 2px;
}
.warning-acknowledgement .checkbox-label[b-82men5aelw] {
border-color: #FCD34D;
background: #FFFBEB;
}
.warning-acknowledgement .checkbox-label:hover[b-82men5aelw] {
background: #FEF3C7;
border-color: #F59E0B;
}
.warning-acknowledgement .checkbox-text[b-82men5aelw] {
color: #92400E;
}
.warning-acknowledgement[b-82men5aelw] .checkbox-input,
.warning-acknowledgement .checkbox-input[b-82men5aelw] {
accent-color: #F59E0B;
}
/* Fee Payment Options */
.fee-payment-options[b-82men5aelw] {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 12px;
}
.fee-option[b-82men5aelw] {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
border: 1px solid #FCD34D;
border-radius: 8px;
background: white;
cursor: pointer;
transition: all 0.2s;
}
.fee-option:hover[b-82men5aelw] {
background: #FFFBEB;
}
.fee-option.selected[b-82men5aelw] {
border-color: #D97706;
background: #FEF3C7;
}
.fee-option input[type="radio"][b-82men5aelw] {
margin-top: 3px;
accent-color: #D97706;
flex-shrink: 0;
}
.fee-option-content[b-82men5aelw] {
display: flex;
flex-direction: column;
gap: 2px;
}
.fee-option-label[b-82men5aelw] {
font-size: 14px;
font-weight: 600;
color: #92400E;
}
.fee-option-desc[b-82men5aelw] {
font-size: 12px;
color: #B45309;
}
.borrower-email-field[b-82men5aelw] {
margin-top: 12px;
padding: 12px 14px;
background: white;
border: 1px solid #E5E7EB;
border-radius: 8px;
}
.borrower-email-field .form-label[b-82men5aelw] {
font-size: 13px;
font-weight: 600;
color: #374151;
margin-bottom: 6px;
}
.borrower-email-field .form-control[b-82men5aelw] {
font-size: 14px;
}
/* Fee notice when document is provided */
.fee-notice-section[b-82men5aelw] {
margin-top: 16px;
}
.fee-notice-info[b-82men5aelw] {
display: flex;
gap: 10px;
padding: 12px 16px;
background: #EFF6FF;
border: 1px solid #BFDBFE;
border-radius: 8px;
font-size: 13px;
color: #1E40AF;
line-height: 1.5;
}
.fee-notice-info > i[b-82men5aelw] {
flex-shrink: 0;
font-size: 16px;
margin-top: 1px;
}
.fee-disclaimer-text[b-82men5aelw] {
font-size: 12px;
color: #3B82F6;
font-style: italic;
}
/* Radio Buttons */
.radio-group[b-82men5aelw] {
display: flex;
flex-direction: column;
gap: 10px;
}
.radio-group-inline[b-82men5aelw] {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.radio-label[b-82men5aelw] {
display: flex;
align-items: flex-start;
gap: 8px;
cursor: pointer;
padding: 8px 10px;
border-radius: 6px;
transition: background-color 0.2s ease;
border: 1px solid var(--border-medium);
background: white;
}
.radio-label:hover[b-82men5aelw] {
background: var(--neutral-50);
border-color: var(--brand-400);
}
.radio-label input[type="radio"][b-82men5aelw] {
margin-top: 2px;
width: 16px;
height: 16px;
cursor: pointer;
accent-color: var(--brand-600);
flex-shrink: 0;
}
.radio-label span[b-82men5aelw] {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.5;
user-select: none;
}
.radio-label:has(input[type="radio"]:checked)[b-82men5aelw] {
background: var(--brand-50);
border-color: var(--brand-100);
}
.radio-label:has(input[type="radio"]:checked) span[b-82men5aelw] {
color: var(--text-primary);
font-weight: 500;
}
/* Form Actions */
.form-actions[b-82men5aelw] {
position: sticky;
bottom: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
background: white;
border-top: 2px solid #E5E7EB;
margin-top: 32px;
z-index: 100;
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
}
.action-buttons-right[b-82men5aelw] {
display: flex;
gap: 12px;
}
.close-btn[b-82men5aelw] {
padding: 10px 20px;
background: transparent;
color: #64748B;
border: 1px solid #E2E8F0;
border-radius: 10px;
font-weight: 600;
font-size: 13px;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
display: inline-flex;
align-items: center;
gap: 6px;
line-height: 1.4;
}
.close-btn:hover[b-82men5aelw] {
background: #F1F5F9;
border-color: #E2E8F0;
color: #0F172A;
}
/* Destructive secondary — quiet danger tint, fills solid red on hover */
.btn-cancel[b-82men5aelw] {
padding: 10px 20px;
background: var(--error-50, #FEF2F2);
border: 1px solid #FECACA;
border-radius: 10px;
color: var(--error-600, #DC2626);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-cancel:hover[b-82men5aelw] {
background: var(--error-600, #DC2626);
border-color: var(--error-600, #DC2626);
color: #fff;
}
/* Affirmative secondary — brand outline */
.btn-save-draft[b-82men5aelw] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: #fff;
border: 1px solid var(--brand-300, #80B7D9);
border-radius: 10px;
color: var(--brand-600, #004980);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-save-draft:hover[b-82men5aelw] {
background: var(--brand-50, #E6F2F8);
border-color: var(--brand-600, #004980);
color: var(--brand-700, #003760);
}
.btn-submit[b-82men5aelw] {
padding: 10px 24px;
background: var(--brand-600, #004980);
border: none;
border-radius: 10px;
color: white;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-submit:hover[b-82men5aelw] {
background: var(--brand-700, #003760);
}
.btn-submit:disabled[b-82men5aelw] {
background: #9CA3AF;
color: #E5E7EB;
cursor: not-allowed;
box-shadow: none;
transform: none;
opacity: 0.6;
}
.btn-submit:disabled:hover[b-82men5aelw] {
background: #9CA3AF;
box-shadow: none;
transform: none;
}
/* Sidebar */
.sidebar-container[b-82men5aelw] {
flex-shrink: 0;
padding: 0 10px 80px 10px;
position: sticky;
top: 80px;
max-height: calc(100vh - 90px);
overflow-y: auto;
overscroll-behavior: contain;
align-self: flex-start;
z-index: auto;
}
/* Floating Last Saved Indicator */
.floating-save-indicator[b-82men5aelw] {
position: fixed;
/* Clears the banner + topbar stack. The topbar is sticky at top: 0 with z-index 100
(leca-theme.css:318-321), but the in-flow EnvironmentBanner sits ABOVE it on every
non-production deployment (EnvironmentBanner.razor.css), so at scroll-top the
topbar's bottom edge is ~94px rather than 64px. The old top: 80px therefore landed
inside the topbar, which painted over the pill (100 > this element's 90) and clipped
it. 104px = the old 80px plus one --space-lg step, leaving ~10px of clearance below
the banner + topbar; the banner's height is not exposed as a token, so this is a
literal on the app's spacing scale. */
top: 104px;
right: 20px;
background: white;
border: 1px solid #E5E7EB;
border-radius: 20px;
padding: 6px 12px 6px 10px;
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: #6B7280;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
z-index: 90;
cursor: help;
transition: all 0.2s ease;
}
.floating-save-indicator:hover[b-82men5aelw] {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
transform: translateY(-1px);
}
.floating-save-indicator i[b-82men5aelw] {
font-size: 14px;
color: #10B981;
}
.floating-save-indicator i.bi-clock[b-82men5aelw] {
color: #9CA3AF;
}
.floating-save-indicator .save-time[b-82men5aelw] {
font-weight: 500;
white-space: nowrap;
}
.floating-save-indicator .draft-id[b-82men5aelw] {
font-weight: 600;
color: #374151;
white-space: nowrap;
}
.floating-save-indicator .save-toast[b-82men5aelw] {
position: absolute;
top: 2px;
right: 0;
background: #10B981;
color: white;
padding: 6px 12px;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
display: flex;
align-items: center;
gap: 4px;
opacity: 0;
transform: translateY(5px);
pointer-events: none;
transition: opacity 0.3s ease, transform 0.3s ease;
white-space: nowrap;
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}
.floating-save-indicator .save-toast.show[b-82men5aelw] {
opacity: 1;
transform: translateY(0);
}
.floating-save-indicator .save-toast i[b-82men5aelw] {
font-size: 12px;
color: white;
}
/* Progress Section */
.progress-section[b-82men5aelw] {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 16px 0;
padding: 12px 16px;
border: 1px solid #E5E7EB;
border-radius: 8px;
background: linear-gradient(180deg, #F9FAFB 0%, #FFFFFF 100%);
}
.progress-circle[b-82men5aelw] {
margin: 0 auto 12px;
width: 100px;
height: 100px;
}
.progress-percentage[b-82men5aelw] {
font-size: 24px;
font-weight: 700;
fill: var(--brand-500);
}
.progress-label[b-82men5aelw] {
font-size: 13px;
color: #6B7280;
font-weight: 500;
}
.section-navigation[b-82men5aelw] {
padding-top: 10px;
margin: 20px 0 0 0;
border: 1px solid #E5E7EB;
border-radius: 8px;
background: linear-gradient(180deg, #FFFFFF 0%, #F9FAFB 100%);
}
/* New Prominent Progress Card - Compact Version */
.progress-section-card[b-82men5aelw] {
background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 100%);
border-radius: 8px;
padding: 10px 14px;
margin-bottom: 14px;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2),
0 2px 6px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.progress-section-card[b-82men5aelw]::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
45deg,
transparent 30%,
rgba(255, 255, 255, 0.1) 50%,
transparent 70%
);
animation: shine-b-82men5aelw 3s infinite;
}
@keyframes shine-b-82men5aelw {
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}
.progress-card-header[b-82men5aelw] {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 8px;
color: white;
}
.progress-card-header i[b-82men5aelw] {
font-size: 16px;
color: #FCD34D;
animation: lightning-pulse-b-82men5aelw 1.5s ease-in-out infinite;
}
@keyframes lightning-pulse-b-82men5aelw {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
.progress-title[b-82men5aelw] {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.progress-stats[b-82men5aelw] {
display: flex;
align-items: baseline;
gap: 5px;
margin-bottom: 8px;
}
.progress-percentage-large[b-82men5aelw] {
font-size: 24px;
font-weight: 800;
color: white;
line-height: 1;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.progress-status-text[b-82men5aelw] {
font-size: 12px;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
}
.progress-bar-container[b-82men5aelw] {
margin-bottom: 8px;
}
.progress-bar-track[b-82men5aelw] {
height: 5px;
background: rgba(255, 255, 255, 0.2);
border-radius: 20px;
overflow: hidden;
position: relative;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}
.progress-bar-fill[b-82men5aelw] {
height: 100%;
background: linear-gradient(90deg, #10B981 0%, #059669 100%);
border-radius: 20px;
transition: width 0.5s ease;
position: relative;
box-shadow: 0 1px 4px rgba(16, 185, 129, 0.5);
}
.progress-bar-shine[b-82men5aelw] {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.4) 50%,
transparent 100%
);
animation: bar-shine-b-82men5aelw 2s infinite;
}
@keyframes bar-shine-b-82men5aelw {
0% { left: -100%; }
100% { left: 200%; }
}
.progress-milestones[b-82men5aelw] {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4px;
}
.milestone[b-82men5aelw] {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
font-size: 9px;
color: rgba(255, 255, 255, 0.7);
transition: all 0.3s ease;
}
.milestone i[b-82men5aelw] {
font-size: 13px;
color: rgba(255, 255, 255, 0.4);
transition: all 0.3s ease;
}
.milestone.completed[b-82men5aelw] {
color: white;
}
.milestone.completed i[b-82men5aelw] {
color: #10B981;
filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.6));
}
.milestone span[b-82men5aelw] {
text-align: center;
line-height: 1.2;
font-weight: 600;
}
/* Old circle progress - keeping for backwards compatibility */
.progress-circle-compact[b-82men5aelw] {
flex-shrink: 0;
}
.progress-percentage-compact[b-82men5aelw] {
font-size: 16px;
font-weight: 700;
fill: var(--brand-500);
}
.progress-label-compact[b-82men5aelw] {
font-size: 12px;
color: #6B7280;
font-weight: 600;
}
/* Section Navigation */
.section-nav[b-82men5aelw] {
list-style: none;
}
.section-nav-item[b-82men5aelw] {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
transition: all 0.2s ease;
border: 1px solid transparent;
user-select: none;
}
.section-nav-item:hover[b-82men5aelw] {
background: #F3F4F6;
border-color: #E5E7EB;
transform: translateX(2px);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.section-nav-item:active[b-82men5aelw] {
transform: translateX(4px);
background: #E5E7EB;
}
.status-icon[b-82men5aelw] {
font-size: 16px;
flex-shrink: 0;
}
.status-icon.valid[b-82men5aelw] {
color: #10B981;
}
.status-icon.warning[b-82men5aelw] {
color:var(--warning-500)
}
.status-icon.error[b-82men5aelw] {
color: var(--error-600);
}
.status-icon.incomplete[b-82men5aelw] {
/* default color to danger */
color:var(--warning-500)
}
.section-nav-label[b-82men5aelw] {
color: #374151;
flex: 1;
}
/* Mobile Bottom Bar */
.mobile-bottom-bar[b-82men5aelw] {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
background: white;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
display: none;
align-items: center;
justify-content: space-between;
padding: 0 20px;
z-index: 100;
}
.mobile-info[b-82men5aelw] {
display: flex;
flex-direction: column;
gap: 4px;
}
.premium-brief[b-82men5aelw] {
font-size: 16px;
font-weight: 700;
color: var(--brand-500);
}
.progress-brief[b-82men5aelw] {
font-size: 12px;
color: #6B7280;
}
.btn-expand[b-82men5aelw] {
background: var(--brand-500);
border: none;
border-radius: 6px;
color: white;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s;
}
.btn-expand:hover[b-82men5aelw] {
background: #004A7F;
}
.btn-expand i[b-82men5aelw] {
font-size: 20px;
}
/* Floating TOC Button */
.floating-toc-btn[b-82men5aelw] {
position: fixed;
bottom: 20px;
right: 20px;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--brand-500);
border: none;
color: white;
font-size: 24px;
display: none;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3);
cursor: pointer;
z-index: 90;
transition: all 0.2s;
}
.floating-toc-btn:hover[b-82men5aelw] {
background: #004A7F;
transform: scale(1.05);
}
/* Mobile Drawer */
.drawer-overlay[b-82men5aelw] {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 999;
}
.drawer-overlay.show[b-82men5aelw] {
opacity: 1;
pointer-events: auto;
}
.mobile-toc-drawer[b-82men5aelw] {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 70vh;
background: white;
border-radius: 16px 16px 0 0;
transform: translateY(100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1000;
overflow-y: auto;
padding: 20px;
}
.mobile-toc-drawer.show[b-82men5aelw] {
transform: translateY(0);
}
.drawer-handle[b-82men5aelw] {
width: 40px;
height: 4px;
background: #D1D5DB;
border-radius: 2px;
margin: 0 auto 20px;
cursor: grab;
}
.drawer-content h3[b-82men5aelw] {
font-size: 16px;
font-weight: 600;
color: #374151;
margin: 0 0 12px 0;
}
.drawer-premium[b-82men5aelw] {
font-size: 28px;
font-weight: 700;
color: var(--brand-500);
margin-bottom: 8px;
}
.drawer-progress[b-82men5aelw] {
font-size: 14px;
color: #6B7280;
margin-bottom: 24px;
}
.drawer-nav[b-82men5aelw] {
list-style: none;
padding: 0;
margin: 0;
}
.drawer-nav li[b-82men5aelw] {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border-bottom: 1px solid #E5E7EB;
cursor: pointer;
transition: background 0.2s;
}
.drawer-nav li:hover[b-82men5aelw] {
background: #F3F4F6;
}
.drawer-nav li i[b-82men5aelw] {
font-size: 18px;
}
/* Bootstrap Modal Customizations — chrome (radius, header, footer, backdrop)
comes from the global wwwroot/css/modal-theme.css. */
.confirmation-text[b-82men5aelw] {
font-size: 16px;
font-weight: 500;
color: #374151;
margin-bottom: 20px;
}
.confirmation-details[b-82men5aelw] {
background: #F9FAFB;
border: 1px solid #E5E7EB;
border-radius: 8px;
padding: 16px;
margin-bottom: 16px;
}
.detail-item[b-82men5aelw] {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
color: #6B7280;
font-size: 14px;
}
.detail-item:not(:last-child)[b-82men5aelw] {
border-bottom: 1px solid #E5E7EB;
}
.detail-item i[b-82men5aelw] {
font-size: 18px;
color: #3B82F6;
width: 20px;
text-align: center;
}
.detail-item strong[b-82men5aelw] {
color: #111827;
font-weight: 600;
}
.confirmation-notice[b-82men5aelw] {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 12px;
background: #EFF6FF;
border: 1px solid #BFDBFE;
border-radius: 6px;
font-size: 13px;
color: #1E40AF;
line-height: 1.5;
}
.confirmation-notice i[b-82men5aelw] {
font-size: 16px;
color: #3B82F6;
flex-shrink: 0;
margin-top: 2px;
}
/* Modal Button Styles */
.btn-cancel[b-82men5aelw],
.btn-confirm[b-82men5aelw] {
padding: 10px 20px;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-confirm[b-82men5aelw] {
background: var(--brand-600, #004980);
border: none;
color: white;
}
.btn-confirm:hover[b-82men5aelw] {
background: var(--brand-700, #003760);
}
/* Submission Result Modal */
#submissionResultModal .result-modal[b-82men5aelw] {
max-width: 650px;
}
.success-message[b-82men5aelw] {
font-size: 16px;
color: #6B7280;
text-align: center;
margin-bottom: 24px;
line-height: 1.6;
}
.success-details[b-82men5aelw] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 24px;
}
.detail-card[b-82men5aelw] {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
background: #F0FDF4;
border: 1px solid #BBF7D0;
border-radius: 8px;
}
.detail-card i[b-82men5aelw] {
font-size: 24px;
color: #10B981;
}
.detail-card > div[b-82men5aelw] {
display: flex;
flex-direction: column;
gap: 4px;
}
.detail-label[b-82men5aelw] {
font-size: 12px;
color: #6B7280;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.detail-value[b-82men5aelw] {
font-size: 14px;
color: #111827;
font-weight: 600;
}
.next-steps[b-82men5aelw] {
background: #F9FAFB;
border: 1px solid #E5E7EB;
border-radius: 8px;
padding: 20px;
}
.next-steps h4[b-82men5aelw] {
margin: 0 0 12px 0;
font-size: 15px;
font-weight: 600;
color: #374151;
display: flex;
align-items: center;
gap: 8px;
}
.next-steps h4 i[b-82men5aelw] {
color: #10B981;
}
.next-steps ul[b-82men5aelw] {
margin: 0;
padding-left: 20px;
color: #6B7280;
font-size: 14px;
line-height: 1.8;
}
.next-steps li[b-82men5aelw] {
margin-bottom: 6px;
}
/* Submission-result footer buttons — canonical: ghost secondary, brand primary. */
#submissionResultModal .modal-footer .btn-primary[b-82men5aelw],
#submissionResultModal .modal-footer .btn-secondary[b-82men5aelw] {
border: none;
border-radius: 10px;
font-size: 0.85rem;
font-weight: 600;
padding: 0.55rem 1.15rem;
cursor: pointer;
transition: all 0.15s;
display: inline-flex;
align-items: center;
gap: 8px;
}
#submissionResultModal .modal-footer .btn-primary[b-82men5aelw] {
background: var(--brand-600, #004980);
color: white;
}
#submissionResultModal .modal-footer .btn-primary:hover[b-82men5aelw] {
background: var(--brand-700, #003760);
}
#submissionResultModal .modal-footer .btn-secondary[b-82men5aelw] {
background: transparent;
color: #64748B;
border: 1px solid #E2E8F0;
}
#submissionResultModal .modal-footer .btn-secondary:hover[b-82men5aelw] {
background: #F1F5F9;
color: #0F172A;
}
.error-message[b-82men5aelw] {
font-size: 16px;
color: #6B7280;
text-align: center;
margin-bottom: 24px;
line-height: 1.6;
}
.error-card[b-82men5aelw] {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px;
background: #FEF2F2;
border: 1px solid #FECACA;
border-radius: 8px;
margin-bottom: 24px;
}
.error-card i[b-82men5aelw] {
font-size: 24px;
color: #EF4444;
flex-shrink: 0;
}
.error-card > div[b-82men5aelw] {
flex: 1;
}
.error-label[b-82men5aelw] {
display: block;
font-size: 12px;
color: #991B1B;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
}
.error-text[b-82men5aelw] {
display: block;
font-size: 14px;
color: var(--error-600);
line-height: 1.5;
}
.error-actions[b-82men5aelw] {
background: #F9FAFB;
border: 1px solid #E5E7EB;
border-radius: 8px;
padding: 20px;
}
.error-actions h4[b-82men5aelw] {
margin: 0 0 12px 0;
font-size: 15px;
font-weight: 600;
color: #374151;
display: flex;
align-items: center;
gap: 8px;
}
.error-actions h4 i[b-82men5aelw] {
color: #F59E0B;
}
.error-actions ul[b-82men5aelw] {
margin: 0;
padding-left: 20px;
color: #6B7280;
font-size: 14px;
line-height: 1.8;
}
.error-actions li[b-82men5aelw] {
margin-bottom: 6px;
}
/* Responsive Modal Styles */
@media (max-width: 768px) {
.confirmation-modal[b-82men5aelw],
.result-modal[b-82men5aelw] {
max-width: 95% !important;
}
.success-details[b-82men5aelw] {
grid-template-columns: 1fr;
}
#submissionResultModal .modal-footer[b-82men5aelw] {
flex-direction: column;
}
#submissionResultModal .modal-footer .btn-primary[b-82men5aelw],
#submissionResultModal .modal-footer .btn-secondary[b-82men5aelw] {
width: 100%;
justify-content: center;
}
}
/* Smooth Scroll */
html[b-82men5aelw] {
scroll-behavior: smooth;
}
/* Environmental Declarations Section */
.env-section[b-82men5aelw] {
background: rgba(255, 255, 255, 0.6);
border: 1px solid var(--border-light);
border-radius: 6px;
padding: 16px 20px;
margin-bottom: 16px;
animation: fadeInUp-b-82men5aelw 0.35s ease-out backwards;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.env-section:nth-child(1)[b-82men5aelw] { animation-delay: 0.05s; }
.env-section:nth-child(2)[b-82men5aelw] { animation-delay: 0.1s; }
.env-section:nth-child(3)[b-82men5aelw] { animation-delay: 0.15s; }
.env-section:nth-child(4)[b-82men5aelw] { animation-delay: 0.2s; }
.env-section:hover[b-82men5aelw] {
border-color: var(--brand-200);
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}
.env-section:last-child[b-82men5aelw] {
margin-bottom: 0;
}
.env-section-title[b-82men5aelw] {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 12px 0;
padding-bottom: 10px;
border-bottom: 1px solid var(--border-light);
line-height: 1.4;
}
.question-group[b-82men5aelw] {
margin-bottom: 16px;
}
.question-group:last-child[b-82men5aelw] {
margin-bottom: 0;
}
/* Parent Question Styling */
.parent-question[b-82men5aelw] {
position: relative;
}
/* Child Question Section - First Level Nesting */
.child-question-section[b-82men5aelw] {
margin-top: 12px;
margin-left: 20px;
padding-left: 16px;
border-left: 2px solid var(--brand-200);
animation: slideInLeft-b-82men5aelw 0.35s ease-out;
background: linear-gradient(to right, rgba(59, 130, 246, 0.02) 0%, transparent 100%);
border-radius: 0 6px 6px 0;
padding-top: 12px;
padding-bottom: 12px;
padding-right: 12px;
}
/* Child Question */
.child-question[b-82men5aelw] {
margin-bottom: 14px;
}
.child-question:last-child[b-82men5aelw] {
margin-bottom: 0;
}
/* Child Label with Indicator */
.child-label[b-82men5aelw] {
display: flex;
align-items: center;
gap: 6px;
}
.child-indicator[b-82men5aelw] {
color: var(--brand-500);
font-size: 14px;
flex-shrink: 0;
}
/* Grandchild Question Section - Second Level Nesting */
.grandchild-question-section[b-82men5aelw] {
margin-top: 16px;
margin-left: 20px;
padding-left: 20px;
border-left: 3px solid var(--brand-300);
animation: slideInLeft-b-82men5aelw 0.35s ease-out 0.1s backwards;
background: linear-gradient(to right, rgba(59, 130, 246, 0.04) 0%, transparent 100%);
border-radius: 0 8px 8px 0;
padding-top: 12px;
padding-bottom: 12px;
padding-right: 12px;
}
/* Grandchild Question */
.grandchild-question[b-82men5aelw] {
margin-bottom: 0;
}
/* Grandchild Label with Indicator */
.grandchild-label[b-82men5aelw] {
display: flex;
align-items: center;
gap: 6px;
}
.grandchild-indicator[b-82men5aelw] {
color: var(--brand-600);
font-size: 13px;
flex-shrink: 0;
margin-left: 4px;
}
/* Great-Grandchild Question Section - Third Level Nesting */
.great-grandchild-question-section[b-82men5aelw] {
margin-top: 16px;
margin-left: 32px;
padding-left: 24px;
border-left: 3px solid var(--brand-200);
animation: slideInLeft-b-82men5aelw 0.35s ease-out 0.15s backwards;
background: linear-gradient(to right, rgba(59, 130, 246, 0.02) 0%, transparent 100%);
border-radius: 0 8px 8px 0;
padding-top: 12px;
padding-bottom: 12px;
padding-right: 12px;
}
/* Great-Grandchild Question */
.great-grandchild-question[b-82men5aelw] {
margin-bottom: 16px;
}
.great-grandchild-question:last-child[b-82men5aelw] {
margin-bottom: 0;
}
/* Great-Grandchild Label with Indicator */
.great-grandchild-label[b-82men5aelw] {
display: flex;
align-items: center;
gap: 6px;
}
.great-grandchild-indicator[b-82men5aelw] {
color: var(--brand-500);
font-size: 12px;
flex-shrink: 0;
margin-left: 4px;
}
.question-label[b-82men5aelw] {
display: block;
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
margin-bottom: 10px;
line-height: 1.5;
}
.question-label .required[b-82men5aelw] {
color: var(--error-600);
margin-left: 4px;
}
.help-link[b-82men5aelw] {
display: inline-block;
font-size: 12px;
color: var(--brand-600);
margin-bottom: 10px;
text-decoration: none;
}
.help-link:hover[b-82men5aelw] {
text-decoration: underline;
color: var(--brand-700);
}
/* File Upload Area */
.file-upload-area[b-82men5aelw] {
border: 2px dashed var(--border-medium);
border-radius: 6px;
padding: 24px;
text-align: center;
background: white;
cursor: pointer;
transition: all 0.2s ease;
}
.file-upload-area:hover[b-82men5aelw] {
border-color: var(--brand-500);
background: var(--brand-50);
}
.file-upload-area i[b-82men5aelw] {
font-size: 40px;
color: var(--brand-500);
margin-bottom: 12px;
}
.file-upload-text[b-82men5aelw] {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 4px;
}
.file-upload-hint[b-82men5aelw] {
font-size: 14px;
color: var(--text-muted);
margin-bottom: 12px;
}
.file-upload-limit[b-82men5aelw] {
display: block;
font-size: 13px;
color: var(--text-muted);
}
/* Warranty Section */
.warranty-section[b-82men5aelw] {
background: linear-gradient(135deg, #FFF7ED 0%, #FFFBEB 100%);
border-color: #FED7AA;
}
.warranty-text[b-82men5aelw] {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: 20px;
}
.warranty-text p[b-82men5aelw] {
margin-bottom: 12px;
font-weight: 500;
}
.warranty-text ul[b-82men5aelw] {
margin: 0;
padding-left: 24px;
}
.warranty-text li[b-82men5aelw] {
margin-bottom: 8px;
}
.warranty-text li:last-child[b-82men5aelw] {
margin-bottom: 0;
}
/* Responsive Breakpoints */
@media (max-width: 1024px) {
.sidebar-container[b-82men5aelw] {
display: none;
}
.mobile-bottom-bar[b-82men5aelw] {
display: flex;
}
.floating-toc-btn[b-82men5aelw] {
display: flex;
}
.main-content[b-82men5aelw] {
width: 100%;
padding-bottom: 80px;
}
.floating-save-indicator[b-82men5aelw] {
/* No `top` override here: the banner and the topbar are the same height at every
breakpoint (--topbar-height is never redefined), so the 104px above is the one
offset that clears them and the old tighter 70px would still be clipped. */
right: 16px;
padding: 5px 10px 5px 8px;
font-size: 10px;
}
.floating-save-indicator i[b-82men5aelw] {
font-size: 12px;
}
.floating-save-indicator .save-time[b-82men5aelw] {
display: none; /* Hide text on mobile, show only icon */
}
}
@media (max-width: 768px) {
/* Legacy support - Bootstrap grid handles responsive automatically */
.form-row-2col[b-82men5aelw],
.form-row-3col[b-82men5aelw] {
grid-template-columns: 1fr;
gap: 16px;
}
.form-section[b-82men5aelw] {
padding: 20px 16px;
}
.loan-basics-section[b-82men5aelw] {
padding: 20px 16px;
}
.section-header[b-82men5aelw] {
gap: 12px;
margin-bottom: 20px;
}
.section-header-icon[b-82men5aelw] {
width: 40px;
height: 40px;
}
.section-header-icon i[b-82men5aelw] {
font-size: 20px;
}
.section-title[b-82men5aelw] {
font-size: 18px;
}
.section-description[b-82men5aelw] {
font-size: 13px;
}
.form-group.enhanced[b-82men5aelw] {
margin-bottom: 20px;
}
.form-actions[b-82men5aelw] {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.action-buttons-right[b-82men5aelw] {
flex-direction: column;
width: 100%;
}
.btn-save-draft[b-82men5aelw],
.btn-submit[b-82men5aelw],
.btn-cancel[b-82men5aelw] {
width: 100%;
justify-content: center;
}
.page-container[b-82men5aelw] {
padding: 0 12px;
}
}
@media (max-width: 480px) {
.application-title[b-82men5aelw] {
font-size: 18px;
}
.application-subtitle[b-82men5aelw] {
font-size: 12px;
}
.section-title[b-82men5aelw] {
font-size: 15px;
}
.section-header-icon[b-82men5aelw] {
width: 32px;
height: 32px;
}
.section-header-icon i[b-82men5aelw] {
font-size: 16px;
}
.form-label[b-82men5aelw] {
font-size: 12px;
}
.form-input[b-82men5aelw] {
font-size: 14px; /* Prevents zoom on iOS */
padding: 8px 12px;
}
.form-section[b-82men5aelw] {
padding: 16px 20px;
margin-bottom: 14px;
}
}
/* Multi-Step Wizard Styles */
/* Step Indicator */
.step-indicator-wrapper[b-82men5aelw] {
position: sticky;
top: 0;
margin-bottom: 16px;
margin-top: -32px;
margin-left: -32px;
margin-right: -32px;
padding: 12px 32px;
background: white;
border-radius: 0;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
z-index: 99;
}
.step-indicator[b-82men5aelw] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 0;
position: relative;
}
.step-item[b-82men5aelw] {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
position: relative;
}
.step-node[b-82men5aelw] {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
margin-bottom: 6px;
transition: all 0.3s ease;
z-index: 2;
position: relative;
}
.step-node.future[b-82men5aelw] {
background: #E5E7EB;
color: #9CA3AF;
border: 3px solid #E5E7EB;
}
.step-node.current[b-82men5aelw] {
background: var(--brand-500);
color: white;
border: 3px solid var(--brand-500);
box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.08);
animation: pulse-b-82men5aelw 2s infinite;
}
.step-node.completed[b-82men5aelw] {
background: #10B981;
color: white;
border: 3px solid #10B981;
}
.step-node.clickable[b-82men5aelw] {
cursor: pointer;
}
.step-node.clickable:hover[b-82men5aelw] {
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
@keyframes pulse-b-82men5aelw {
0%, 100% {
box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.08);
}
50% {
box-shadow: 0 0 0 8px rgba(15, 23, 42, 0.15);
}
}
.step-label[b-82men5aelw] {
text-align: center;
max-width: 120px;
}
.step-title[b-82men5aelw] {
font-size: 11px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 2px;
line-height: 1.2;
}
.step-subtitle[b-82men5aelw] {
font-size: 10px;
color: var(--text-secondary);
}
.step-connector[b-82men5aelw] {
position: absolute;
height: 2px;
background: #E5E7EB;
top: 18px;
left: 50%;
right: -50%;
z-index: 1;
}
.step-item:last-child .step-connector[b-82men5aelw] {
display: none;
}
.step-node.completed ~ .step-connector[b-82men5aelw],
.step-item:has(.step-node.completed) + .step-item .step-connector[b-82men5aelw] {
background: #10B981;
}
.current-step-description[b-82men5aelw] {
text-align: center;
padding: 8px 16px;
background: #F0F9FF;
border-radius: 6px;
margin-top: 8px;
}
.current-step-description p[b-82men5aelw] {
margin: 0;
font-size: 11px;
color: var(--brand-500);
font-weight: 500;
line-height: 1.3;
}
/* Wizard Action Buttons */
.form-actions-wizard[b-82men5aelw] {
position: fixed;
bottom: 0;
left: 260px; /* Account for expanded sidebar - matches --sidebar-width-expanded */
right: 0;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 14px 24px;
background: white;
border-top: 1px solid #E5E7EB;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
z-index: 100;
transition: left 0.3s ease; /* Smooth transition when sidebar collapses */
}
/* When sidebar is collapsed */
.sidebar-collapsed .form-actions-wizard[b-82men5aelw],
body:has(.sidebar.collapsed) .form-actions-wizard[b-82men5aelw] {
left: 72px; /* Account for collapsed sidebar - matches --sidebar-width-collapsed */
}
.wizard-actions-left[b-82men5aelw],
.wizard-actions-right[b-82men5aelw] {
display: flex;
gap: 10px;
align-items: center;
}
.btn-back[b-82men5aelw],
.btn-next[b-82men5aelw],
.btn-submit[b-82men5aelw] {
padding: 10px 20px;
border-radius: 10px;
font-weight: 600;
font-size: 13px;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
display: inline-flex;
align-items: center;
gap: 6px;
border: none;
line-height: 1.4;
}
.btn-back[b-82men5aelw] {
background: transparent;
color: #64748B;
border: 1px solid #E2E8F0;
}
.btn-back:hover[b-82men5aelw] {
background: #F1F5F9;
color: #0F172A;
}
.btn-next[b-82men5aelw] {
background: var(--brand-600, #004980);
color: white;
}
.btn-next:hover[b-82men5aelw] {
background: var(--brand-700, #003760);
}
.btn-submit[b-82men5aelw] {
background: var(--success-600, #059669);
color: white;
}
.btn-submit:hover[b-82men5aelw] {
background: var(--success-700, #047857);
}
.btn-save-draft[b-82men5aelw] {
padding: 10px 18px;
background: #fff;
color: var(--brand-600, #004980);
border: 1px solid var(--brand-300, #80B7D9);
border-radius: 10px;
font-weight: 600;
font-size: 13px;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
display: inline-flex;
align-items: center;
gap: 6px;
line-height: 1.4;
}
.btn-save-draft:hover[b-82men5aelw] {
background: var(--brand-50, #E6F2F8);
border-color: var(--brand-600, #004980);
color: var(--brand-700, #003760);
}
/* Review Cards */
.review-summary[b-82men5aelw] {
display: flex;
flex-direction: column;
gap: 0;
width: 100%;
}
.review-card[b-82men5aelw] {
background: white;
border: 1px solid #E5E7EB;
border-radius: 12px;
overflow: hidden;
transition: all 0.2s;
width: 100%;
}
.review-card:hover[b-82men5aelw] {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.review-card-header[b-82men5aelw] {
background: #F9FAFB;
padding: 16px 20px;
border-bottom: 1px solid #E5E7EB;
display: flex;
justify-content: space-between;
align-items: center;
}
.review-card-header h3[b-82men5aelw] {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin: 0;
display: flex;
align-items: center;
gap: 10px;
}
.review-card-header h3 i[b-82men5aelw] {
color: var(--brand-500);
}
.btn-edit-link[b-82men5aelw] {
background: transparent;
border: none;
color: var(--brand-500);
font-size: 13px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 6px;
transition: all 0.2s;
}
.btn-edit-link:hover[b-82men5aelw] {
background: #F0F9FF;
}
.review-card-body[b-82men5aelw] {
padding: 20px;
}
.review-item[b-82men5aelw] {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 12px 0;
border-bottom: 1px solid #F3F4F6;
}
.review-item:last-child[b-82men5aelw] {
border-bottom: none;
}
.review-item.has-error[b-82men5aelw] {
background: #FEF2F2;
padding-left: 12px;
padding-right: 12px;
margin: 0 -12px;
border-radius: 6px;
}
.review-label[b-82men5aelw] {
font-size: 13px;
color: #6B7280;
font-weight: 500;
flex: 0 0 45%;
}
.review-value[b-82men5aelw] {
font-size: 14px;
color: var(--text-primary);
font-weight: 600;
text-align: right;
flex: 1;
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
}
/* Review Value Badges */
.review-value-badge[b-82men5aelw] {
display: inline-block;
padding: 4px 12px;
border-radius: 12px;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
}
.badge-success[b-82men5aelw] {
background: #D1FAE5;
color: #065F46;
}
.badge-danger[b-82men5aelw] {
background: #FEE2E2;
color: #991B1B;
}
.badge-secondary[b-82men5aelw] {
background: #F3F4F6;
color: #6B7280;
}
/* Environmental Warning Note */
.environmental-warning-note[b-82men5aelw] {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 16px;
background: #FEF3C7;
border: 1px solid #FCD34D;
border-radius: 6px;
color: #92400E;
font-size: 13px;
line-height: 1.5;
}
.environmental-warning-note i[b-82men5aelw] {
font-size: 18px;
color: #F59E0B;
flex-shrink: 0;
margin-top: 2px;
}
.environmental-warning-note span[b-82men5aelw] {
flex: 1;
}
.environmental-warning-note strong[b-82men5aelw] {
font-weight: 600;
}
/* Hierarchical Review Items (Child/Grandchild) */
.review-item-child[b-82men5aelw] {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
gap: 6px;
padding: 10px 0 10px 20px;
border-bottom: 1px solid #F3F4F6;
background: #FAFAFA;
margin: 0 -20px;
padding-left: 40px;
padding-right: 20px;
min-width: 0;
}
.review-item-child:last-child[b-82men5aelw] {
border-bottom: none;
}
.review-item-grandchild[b-82men5aelw] {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
gap: 6px;
padding: 10px 0 10px 40px;
border-bottom: 1px solid #F3F4F6;
background: #F5F5F5;
margin: 0 -20px;
padding-left: 60px;
padding-right: 20px;
min-width: 0;
}
.review-item-grandchild:last-child[b-82men5aelw] {
border-bottom: none;
}
.review-item-child .review-label[b-82men5aelw],
.review-item-grandchild .review-label[b-82men5aelw] {
font-size: 12px;
color: #6B7280;
font-weight: 500;
flex: 0 0 auto;
white-space: nowrap;
}
.review-item-child .review-value[b-82men5aelw],
.review-item-grandchild .review-value[b-82men5aelw] {
font-size: 13px;
color: var(--text-primary);
font-weight: 600;
text-align: left;
flex: 1 1 0;
min-width: 0;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}
/* Review Subsections */
.review-subsection[b-82men5aelw] {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid #E5E7EB;
}
.review-subsection:first-child[b-82men5aelw] {
margin-top: 0;
padding-top: 0;
border-top: none;
}
.review-subsection-title[b-82men5aelw] {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.review-subsection-title[b-82men5aelw]::before {
content: '';
width: 4px;
height: 16px;
background: var(--primary-teal);
border-radius: 2px;
}
/* Simple Badge-like Yes/No/Not Answered Indicators */
.review-answer[b-82men5aelw] {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.8125rem;
font-weight: 600;
padding: 0.25rem 0.625rem;
border-radius: 4px;
white-space: nowrap;
flex-shrink: 0;
background: var(--neutral-100);
color: var(--text-secondary, #6B7280);
}
.review-answer i[b-82men5aelw] {
font-size: 0.875rem;
color: var(--text-muted, #9CA3AF);
}
.review-answer-yes[b-82men5aelw] {
background: var(--brand-50);
color: var(--brand-700);
}
.review-answer-yes i[b-82men5aelw] {
color: var(--brand-600);
}
.review-answer-no[b-82men5aelw] {
background: var(--neutral-100);
color: var(--text-secondary, #6B7280);
}
.review-answer-no i[b-82men5aelw] {
color: var(--text-muted, #9CA3AF);
}
.review-answer-muted[b-82men5aelw] {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.8125rem;
font-weight: 500;
padding: 0.25rem 0.625rem;
border-radius: 4px;
background: var(--neutral-50);
color: var(--text-muted, #9CA3AF);
font-style: italic;
}
/* Environmental Risk Badges */
.environmental-badges[b-82men5aelw] {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.env-badge[b-82men5aelw] {
display: inline-block;
padding: 6px 12px;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
border: 1px solid;
}
.env-badge-heavy[b-82men5aelw] {
background: #FEF3C7;
border-color: #F59E0B;
color: #92400E;
}
.env-badge-rcra[b-82men5aelw] {
background: #FEE2E2;
border-color: #F87171;
color: #991B1B;
}
.validation-error-notice[b-82men5aelw] {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: #FEE2E2;
border: 1px solid #FCA5A5;
border-left: 3px solid var(--error-600);
border-radius: 6px;
color: #991B1B;
font-size: 13px;
font-weight: 500;
}
.validation-error-notice i[b-82men5aelw] {
font-size: 16px;
color: var(--error-600);
flex-shrink: 0;
}
.premium-summary-card[b-82men5aelw] {
border: 2px solid #10B981;
background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
}
.premium-summary-card .review-card-header[b-82men5aelw] {
background: #10B981;
color: white;
}
.premium-summary-card .review-card-header h3[b-82men5aelw] {
color: white;
}
.premium-summary-card .review-card-header h3 i[b-82men5aelw] {
color: white;
}
.premium-item[b-82men5aelw] {
padding: 16px 0;
border-bottom: 2px solid #10B981;
}
.premium-value[b-82men5aelw] {
font-size: 24px;
color: #10B981;
font-weight: 700;
}
.custom-checkbox[b-82men5aelw] {
padding-left: 2.5rem !important; /* Add space for the larger checkbox */
display: flex;
align-items: center;
}
.custom-checkbox .form-check-input[b-82men5aelw] {
width: 1.3em;
height: 1.3em;
margin-left: -2rem; /* Pull back into the padding area */
margin-top: 0;
border: 2px solid #adb5bd; /* slightly thicker, visible border */
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.custom-checkbox .form-check-label[b-82men5aelw] {
padding-left: 0.5rem;
cursor: pointer;
font-weight: 500;
font-size: 14px;
color: #495057;
user-select: none; /* Prevent text selection on double click */
}
.custom-checkbox .form-check-input:checked[b-82men5aelw] {
background-color: #0d6efd; /* Bootstrap primary color */
border-color: #0d6efd;
transform: scale(1.05); /* Subtle pop effect when checked */
}
.custom-checkbox .form-check-input:focus[b-82men5aelw] {
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* Soft focus ring */
}
/* Mobile Responsive for Wizard */
@media (max-width: 768px) {
.main-content[b-82men5aelw] {
padding-top: 20px;
padding-bottom: 160px; /* More space for mobile stacked buttons */
}
.step-indicator-wrapper[b-82men5aelw] {
margin-top: -20px;
margin-left: -20px;
margin-right: -20px;
padding: 10px 20px;
}
.step-indicator[b-82men5aelw] {
flex-direction: column;
gap: 12px;
}
.step-item[b-82men5aelw] {
flex-direction: row;
width: 100%;
align-items: center;
justify-content: flex-start;
}
.step-node[b-82men5aelw] {
margin-bottom: 0;
margin-right: 10px;
width: 32px;
height: 32px;
font-size: 13px;
}
.step-label[b-82men5aelw] {
text-align: left;
flex: 1;
max-width: none;
}
.step-title[b-82men5aelw] {
font-size: 12px;
}
.step-subtitle[b-82men5aelw] {
font-size: 10px;
}
.current-step-description[b-82men5aelw] {
padding: 6px 12px;
font-size: 10px;
}
.step-connector[b-82men5aelw] {
display: none;
}
.form-actions-wizard[b-82men5aelw] {
left: 0; /* Full width on mobile - no sidebar */
flex-direction: column;
gap: 10px;
padding: 12px 16px;
}
.wizard-actions-left[b-82men5aelw],
.wizard-actions-right[b-82men5aelw] {
width: 100%;
justify-content: center;
}
.wizard-actions-right[b-82men5aelw] {
flex-direction: column;
gap: 12px;
}
.btn-back[b-82men5aelw],
.btn-next[b-82men5aelw],
.btn-submit[b-82men5aelw],
.btn-cancel[b-82men5aelw],
.btn-save-draft[b-82men5aelw] {
width: 100%;
justify-content: center;
}
.review-item[b-82men5aelw] {
flex-direction: column;
gap: 6px;
}
.review-label[b-82men5aelw],
.review-value[b-82men5aelw] {
text-align: left;
}
}
/* Application Progress Card - Compact with Simplified Dots */
.progress-section-card[b-82men5aelw] {
background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 100%);
border-radius: 10px;
padding: 14px 16px;
margin-bottom: 14px;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2), 0 2px 6px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.progress-section-card[b-82men5aelw]::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
animation: shine-b-82men5aelw 3s infinite;
}
@keyframes shine-b-82men5aelw {
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}
.progress-card-header[b-82men5aelw] {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
color: white;
}
.progress-card-header i[b-82men5aelw] {
font-size: 18px;
color: #FCD34D;
animation: lightning-pulse-b-82men5aelw 1.5s ease-in-out infinite;
}
@keyframes lightning-pulse-b-82men5aelw {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.progress-title[b-82men5aelw] {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
}
.progress-stats[b-82men5aelw] {
display: flex;
align-items: baseline;
gap: 6px;
margin-bottom: 10px;
}
.progress-percentage-large[b-82men5aelw] {
font-size: 28px;
font-weight: 800;
color: white;
line-height: 1;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.progress-status-text[b-82men5aelw] {
font-size: 12px;
font-weight: 600;
color: rgba(255, 255, 255, 0.95);
}
.progress-bar-container[b-82men5aelw] {
margin-bottom: 10px;
}
.progress-bar-track[b-82men5aelw] {
height: 6px;
background: rgba(255, 255, 255, 0.2);
border-radius: 20px;
overflow: hidden;
position: relative;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}
.progress-bar-fill[b-82men5aelw] {
height: 100%;
background: linear-gradient(90deg, #10B981 0%, #059669 100%);
border-radius: 20px;
transition: width 0.5s ease;
position: relative;
box-shadow: 0 1px 4px rgba(16, 185, 129, 0.5);
}
.progress-bar-shine[b-82men5aelw] {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
animation: bar-shine-b-82men5aelw 2s infinite;
}
@keyframes bar-shine-b-82men5aelw {
0% { left: -100%; }
100% { left: 200%; }
}
/* ─── Flow switcher (both forms available; bank setting is only the default) ─── */
.flow-switch-banner[b-82men5aelw] {
display: flex;
gap: 10px;
align-items: flex-start;
background: #f0fdfa;
border: 1px solid #99f6e4;
border-radius: 10px;
padding: 12px 16px;
margin-bottom: 16px;
font-size: var(--font-size-sm, 0.875rem);
color: #134e4a;
}
.flow-switch-banner i[b-82men5aelw] {
color: #0f766e;
font-size: 16px;
margin-top: 1px;
}
.flow-switch-banner a[b-82men5aelw] {
color: #0f766e;
font-weight: 600;
}
/* Loan Basics: each column stacks its fields independently so the variable-height
policy-term card never opens gaps in the other column. */
.loan-basics-col[b-82men5aelw] {
display: flex;
flex-direction: column;
gap: 24px;
}
/* Policy Term + balloon child question group — borderless; the term input and the
balloon question read as one stack, with the balloon as a soft contextual panel. */
.policy-term-group[b-82men5aelw] {
display: flex;
flex-direction: column;
gap: 14px;
}
.policy-term-group .term-echo[b-82men5aelw] {
color: var(--gray-500, #6b7280);
font-size: var(--font-size-sm, 0.875rem);
white-space: nowrap;
}
.policy-term-child[b-82men5aelw] {
background: #f8fafc;
border: 1px solid var(--gray-200, #e5e7eb);
border-radius: 10px;
padding: 14px 16px;
}
.policy-term-child .child-label-bar[b-82men5aelw] {
border-left: 3px solid var(--brand-500, #0d6efd);
padding-left: 12px;
}
/* /Components/Pages/Applications/PremiumEstimatePreviewPage.razor.rz.scp.css */
/* ============================================
Premium Estimate Preview Page
============================================ */
/* Loading & Error States */
.loading-container[b-51piqzvmkf],
.error-container[b-51piqzvmkf] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 60vh;
gap: 16px;
color: #64748b;
}
/* Skeleton loading state */
@keyframes prem-est-skel-pulse-b-51piqzvmkf {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.skel-block[b-51piqzvmkf] {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: prem-est-skel-pulse-b-51piqzvmkf 1.5s ease-in-out infinite;
border-radius: 4px;
}
.prem-est-skeleton[b-51piqzvmkf] {
min-height: 60vh;
}
.skel-action-bar[b-51piqzvmkf] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 32px;
background: white;
border-bottom: 1px solid #e2e8f0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.skel-document[b-51piqzvmkf] {
max-width: 800px;
margin: 32px auto;
background: white;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04);
padding: 48px;
}
.skel-doc-header[b-51piqzvmkf] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 24px;
}
.skel-doc-header-left[b-51piqzvmkf] {
flex: 1;
}
.skel-doc-header-right[b-51piqzvmkf] {
text-align: right;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.skel-doc-meta[b-51piqzvmkf] {
display: flex;
justify-content: space-between;
padding: 12px 0;
margin-bottom: 4px;
}
.skel-doc-meta > div[b-51piqzvmkf] {
display: flex;
flex-direction: column;
gap: 2px;
}
.skel-cost-table[b-51piqzvmkf] {
border: 1px solid #e2e8f0;
border-radius: 8px;
overflow: hidden;
margin-bottom: 24px;
}
.skel-cost-header[b-51piqzvmkf] {
padding: 12px 20px;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
}
.skel-cost-row[b-51piqzvmkf] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
border-bottom: 1px solid #f1f5f9;
}
.skel-cost-row:last-of-type[b-51piqzvmkf] {
border-bottom: none;
}
.skel-cost-info[b-51piqzvmkf] {
display: flex;
flex-direction: column;
gap: 2px;
}
.skel-cost-total[b-51piqzvmkf] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
background: #f0fdfa;
border-top: 3px solid #0f6d8e;
}
/* Action Bar */
.action-bar[b-51piqzvmkf] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 32px;
background: white;
border-bottom: 1px solid #e2e8f0;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.btn-back[b-51piqzvmkf] {
display: inline-flex;
align-items: center;
gap: 6px;
background: none;
border: none;
color: #0f6d8e;
font-size: 14px;
font-weight: 500;
cursor: pointer;
padding: 8px 12px;
border-radius: 6px;
transition: background 0.15s;
}
.btn-back:hover[b-51piqzvmkf] {
background: #f0f9ff;
}
.btn-print[b-51piqzvmkf] {
display: inline-flex;
align-items: center;
gap: 8px;
background: #0f6d8e;
color: white;
border: none;
padding: 10px 20px;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s;
}
.btn-print:hover[b-51piqzvmkf] {
background: #0b5a75;
}
.print-group[b-51piqzvmkf] {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
.print-hint[b-51piqzvmkf] {
font-size: 11px;
color: #94a3b8;
font-style: italic;
}
/* Document Container */
.estimate-document[b-51piqzvmkf] {
max-width: 800px;
margin: 32px auto;
background: white;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04);
padding: 48px;
}
/* Document Header */
.document-header[b-51piqzvmkf] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 24px;
}
.header-left[b-51piqzvmkf] {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.brand-logo[b-51piqzvmkf] {
height: 46px;
width: auto;
max-width: 100%;
display: block;
margin-bottom: 6px;
}
/* Text wordmark stand-in for the brand logo. Sized to occupy the same
~34px-tall box as .brand-logo so the header height (and one-page print
fit) is preserved. */
.brand-name[b-51piqzvmkf] {
display: block;
height: 34px;
line-height: 34px;
margin-bottom: 6px;
font-family: Georgia, "Times New Roman", serif;
font-size: 24px;
font-weight: 700;
color: #0f6d8e;
white-space: nowrap;
}
.brand-subtitle[b-51piqzvmkf] {
font-size: 14px;
color: #64748b;
margin: 0;
}
.header-right[b-51piqzvmkf] {
text-align: right;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.header-logo[b-51piqzvmkf] {
height: 40px;
width: auto;
margin-bottom: 4px;
}
.header-rating[b-51piqzvmkf] {
font-size: 12px;
color: #64748b;
margin: 0;
}
/* Document Meta */
.document-meta[b-51piqzvmkf] {
display: flex;
justify-content: space-between;
padding: 12px 0;
margin-bottom: 4px;
}
.document-meta > div[b-51piqzvmkf] {
display: flex;
flex-direction: column;
gap: 2px;
}
.meta-label[b-51piqzvmkf] {
font-size: 12px;
font-weight: 600;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.meta-value[b-51piqzvmkf] {
font-size: 14px;
color: #1e293b;
font-weight: 500;
}
/* Teal Divider */
.teal-divider[b-51piqzvmkf] {
border: none;
height: 3px;
background: linear-gradient(90deg, #0f6d8e, #14919b);
margin: 0 0 32px 0;
}
/* Summary Section */
.summary-section[b-51piqzvmkf] {
margin-bottom: 32px;
}
.section-title[b-51piqzvmkf] {
font-size: 20px;
font-weight: 700;
color: #1e293b;
margin: 0 0 12px 0;
}
.section-description[b-51piqzvmkf] {
font-size: 14px;
line-height: 1.7;
color: #475569;
margin: 0 0 24px 0;
}
/* Cost Table */
.cost-table[b-51piqzvmkf] {
border: 1px solid #e2e8f0;
border-radius: 8px;
overflow: hidden;
margin-bottom: 24px;
}
.cost-header[b-51piqzvmkf] {
padding: 12px 20px;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
font-size: 13px;
font-weight: 600;
color: #64748b;
}
.cost-row[b-51piqzvmkf] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
border-bottom: 1px solid #f1f5f9;
}
.cost-row:last-of-type[b-51piqzvmkf] {
border-bottom: none;
}
.cost-info[b-51piqzvmkf] {
display: flex;
flex-direction: column;
gap: 2px;
}
.cost-name[b-51piqzvmkf] {
font-size: 15px;
font-weight: 600;
color: #1e293b;
}
.cost-description[b-51piqzvmkf] {
font-size: 13px;
color: #94a3b8;
}
.cost-amount[b-51piqzvmkf] {
font-size: 16px;
font-weight: 700;
color: #1e293b;
white-space: nowrap;
}
.borrower-pays-row[b-51piqzvmkf] {
background: #fffbeb;
}
.borrower-pays-row .cost-name[b-51piqzvmkf]::after {
content: " (Borrower Pays)";
font-size: 12px;
font-weight: 500;
color: #b45309;
}
.borrower-pays-row .cost-amount[b-51piqzvmkf] {
color: #9CA3AF;
text-decoration: line-through;
}
/* Cost Total */
.cost-total[b-51piqzvmkf] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
background: #f0fdfa;
border-top: 3px solid #0f6d8e;
}
.total-label[b-51piqzvmkf] {
font-size: 15px;
font-weight: 700;
color: #1e293b;
}
.total-amount[b-51piqzvmkf] {
font-size: 22px;
font-weight: 700;
color: #0f6d8e;
}
/* Environmental Review Notice */
.review-notice[b-51piqzvmkf] {
background: #fffbeb;
border-left: 4px solid #f59e0b;
border-radius: 4px;
padding: 16px 20px;
margin-bottom: 32px;
}
.notice-title[b-51piqzvmkf] {
font-size: 13px;
font-weight: 700;
color: #b45309;
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.notice-text[b-51piqzvmkf] {
font-size: 13px;
line-height: 1.6;
color: #78716c;
margin: 0;
}
/* Terms & Conditions */
.terms-section[b-51piqzvmkf] {
margin-bottom: 32px;
}
.terms-title[b-51piqzvmkf] {
font-size: 16px;
font-weight: 700;
color: #1e293b;
margin: 0 0 12px 0;
}
.terms-list[b-51piqzvmkf] {
list-style: disc;
padding-left: 20px;
margin: 0;
}
.terms-list li[b-51piqzvmkf] {
font-size: 13px;
line-height: 1.7;
color: #64748b;
margin-bottom: 6px;
}
/* Document Footer */
.document-footer[b-51piqzvmkf] {
display: flex;
justify-content: space-between;
padding-top: 20px;
border-top: 1px solid #e2e8f0;
}
.footer-left[b-51piqzvmkf],
.footer-right[b-51piqzvmkf] {
display: flex;
flex-direction: column;
gap: 2px;
}
.footer-right[b-51piqzvmkf] {
text-align: right;
}
.footer-company[b-51piqzvmkf] {
font-size: 12px;
font-weight: 600;
color: #0f6d8e;
}
.footer-ref[b-51piqzvmkf] {
font-size: 12px;
font-weight: 500;
color: #475569;
}
.footer-detail[b-51piqzvmkf] {
font-size: 11px;
color: #94a3b8;
}
/* ============================================
Print Styles
============================================ */
@page {
margin: 8mm 10mm 8mm 10mm;
size: auto;
}
@media print {
.no-print[b-51piqzvmkf] {
display: none !important;
}
.estimate-document[b-51piqzvmkf] {
margin: 0;
padding: 12px 32px;
box-shadow: none;
border-radius: 0;
max-width: 100%;
}
.cost-total[b-51piqzvmkf],
.review-notice[b-51piqzvmkf] {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.teal-divider[b-51piqzvmkf] {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.cost-table[b-51piqzvmkf] {
page-break-inside: avoid;
break-inside: avoid;
}
.terms-section[b-51piqzvmkf] {
page-break-inside: avoid;
break-inside: avoid;
}
.review-notice[b-51piqzvmkf],
.cost-row[b-51piqzvmkf],
.cost-total[b-51piqzvmkf],
.document-footer[b-51piqzvmkf] {
break-inside: avoid;
}
/* Tighten vertical rhythm so the document fits a single page
at the browser's default (100%) print scale. */
.document-header[b-51piqzvmkf] {
margin-bottom: 8px;
}
.brand-logo[b-51piqzvmkf] {
/* keep the logo's native 4.35:1 aspect ratio (500x115), slightly smaller for print */
width: auto !important;
height: 28px !important;
}
.brand-name[b-51piqzvmkf] {
/* shrink to match the print logo box so the header keeps its height */
height: 28px;
line-height: 28px;
font-size: 20px;
margin-bottom: 4px;
}
.brand-subtitle[b-51piqzvmkf] {
font-size: 12px;
}
.header-logo[b-51piqzvmkf] {
height: 32px;
}
.document-meta[b-51piqzvmkf] {
padding: 4px 0;
margin-bottom: 2px;
}
.teal-divider[b-51piqzvmkf] {
margin-bottom: 12px;
}
.summary-section[b-51piqzvmkf] {
margin-bottom: 14px;
}
.section-title[b-51piqzvmkf] {
font-size: 18px;
margin-bottom: 6px;
}
.section-description[b-51piqzvmkf] {
font-size: 13px;
line-height: 1.5;
margin-bottom: 12px;
}
.cost-table[b-51piqzvmkf] {
margin-bottom: 0;
}
.cost-header[b-51piqzvmkf] {
padding: 7px 16px;
}
.cost-row[b-51piqzvmkf] {
padding: 7px 16px;
}
.cost-name[b-51piqzvmkf] {
font-size: 14px;
}
.cost-description[b-51piqzvmkf] {
font-size: 12px;
}
.cost-amount[b-51piqzvmkf] {
font-size: 14px;
}
.cost-total[b-51piqzvmkf] {
padding: 10px 16px;
}
.total-amount[b-51piqzvmkf] {
font-size: 18px;
}
.review-notice[b-51piqzvmkf] {
padding: 8px 16px;
margin-bottom: 10px;
}
.notice-text[b-51piqzvmkf] {
font-size: 12px;
line-height: 1.5;
}
.terms-section[b-51piqzvmkf] {
margin-bottom: 10px;
}
.terms-title[b-51piqzvmkf] {
font-size: 15px;
margin-bottom: 6px;
}
.terms-list li[b-51piqzvmkf] {
font-size: 12px;
line-height: 1.5;
margin-bottom: 4px;
}
.document-footer[b-51piqzvmkf] {
padding-top: 10px;
}
}
/* /Components/Pages/Applications/ReferralModal.razor.rz.scp.css */
/* Footer buttons per the canonical modal design (EnvironmentalReviewModal):
ghost cancel, semantic-color confirm. Chrome (header/footer/radius) comes
from the global wwwroot/css/modal-theme.css. */
.modal-footer .btn[b-okcoryu2py] {
border-radius: 10px;
font-weight: 600;
padding: 0.55rem 1.15rem;
}
.modal-footer .btn-secondary[b-okcoryu2py] {
background: transparent;
color: #64748B;
border: 1px solid #E2E8F0;
}
.modal-footer .btn-secondary:hover[b-okcoryu2py] {
background: #F1F5F9;
color: #0F172A;
}
/* /Components/Pages/BankPortal/ApplicationsPage.razor.rz.scp.css */
/* BankPortal Applications Page Styles */
/* ========================================
Page Header
======================================== */
.page-header[b-fta9f4dtns] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
gap: 24px;
flex-wrap: wrap;
}
.header-left[b-fta9f4dtns] {
display: flex;
flex-direction: column;
gap: 4px;
}
.page-title[b-fta9f4dtns] {
font-size: 1.5rem;
font-weight: 700;
color: #1F2937;
margin: 0;
line-height: 1.2;
letter-spacing: -0.02em;
}
.page-subtitle[b-fta9f4dtns] {
font-size: 0.875rem;
color: #6B7280;
margin: 0;
font-weight: 400;
}
/* ========================================
Inline Stats
======================================== */
.inline-stats[b-fta9f4dtns] {
display: flex;
align-items: center;
gap: 12px;
}
.mini-stat[b-fta9f4dtns] {
display: flex;
align-items: center;
gap: 8px;
background: white;
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 8px;
padding: 8px 14px;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}
.mini-stat > i[b-fta9f4dtns] {
font-size: 1rem;
color: var(--brand-500);
}
.stat-content[b-fta9f4dtns] {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.mini-stat-value[b-fta9f4dtns] {
font-size: 1.125rem;
font-weight: 700;
color: #1F2937;
}
.mini-stat-label[b-fta9f4dtns] {
font-size: 0.7rem;
color: #6B7280;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.btn-icon-refresh[b-fta9f4dtns] {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: white;
border: 1px solid rgba(15, 23, 42, 0.15);
border-radius: 8px;
color: var(--brand-500);
cursor: pointer;
transition: all 0.2s;
}
.btn-icon-refresh:hover:not(:disabled)[b-fta9f4dtns] {
background: rgba(15, 23, 42, 0.08);
border-color: var(--brand-500);
}
.btn-icon-refresh:disabled[b-fta9f4dtns] {
opacity: 0.6;
cursor: not-allowed;
}
.btn-icon-refresh.refreshing i[b-fta9f4dtns] {
animation: spin-b-fta9f4dtns 1s linear infinite;
}
@keyframes spin-b-fta9f4dtns {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.bi-arrow-clockwise.spinning[b-fta9f4dtns] {
animation: spin-b-fta9f4dtns 1s linear infinite;
}
/* New Application Button */
.btn-new-app[b-fta9f4dtns] {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
font-size: 0.875rem;
font-weight: 600;
border-radius: 8px;
}
/* ========================================
Filters Card
======================================== */
.filters-card[b-fta9f4dtns] {
background: white;
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 10px;
padding: 16px;
margin-bottom: 16px;
box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05);
}
.filters-bar[b-fta9f4dtns] {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.filters-left[b-fta9f4dtns] {
flex: 1;
min-width: 280px;
max-width: 400px;
}
.filters-right[b-fta9f4dtns] {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
/* Filter Dropdowns */
.filter-dropdown .btn-filter[b-fta9f4dtns] {
display: flex;
align-items: center;
gap: 8px;
background: white;
border: 1px solid #E5E7EB;
border-radius: 8px;
padding: 8px 14px;
font-size: 0.875rem;
color: #374151;
font-weight: 500;
transition: all 0.2s;
white-space: nowrap;
}
.filter-dropdown .btn-filter:hover[b-fta9f4dtns] {
background: #F9FAFB;
border-color: #D1D5DB;
}
.filter-dropdown .btn-filter i:first-child[b-fta9f4dtns] {
color: #6B7280;
font-size: 0.875rem;
}
.filter-dropdown .dropdown-menu[b-fta9f4dtns] {
min-width: 220px;
padding: 8px 0;
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 10px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}
.filter-dropdown .dropdown-header[b-fta9f4dtns] {
font-size: 0.7rem;
font-weight: 600;
color: #6B7280;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 8px 16px;
}
.filter-dropdown .dropdown-item[b-fta9f4dtns] {
display: flex;
align-items: center;
padding: 10px 16px;
font-size: 0.875rem;
color: #374151;
border: none;
background: none;
width: 100%;
text-align: left;
cursor: pointer;
transition: background 0.15s;
}
.filter-dropdown .dropdown-item:hover[b-fta9f4dtns] {
background: rgba(15, 23, 42, 0.05);
}
.filter-dropdown .dropdown-item.active[b-fta9f4dtns] {
background: rgba(15, 23, 42, 0.08);
color: var(--brand-500);
font-weight: 600;
}
/* Custom Date Range Styles */
.date-dropdown-menu[b-fta9f4dtns] {
min-width: 220px;
}
.date-dropdown-menu.show[b-fta9f4dtns] {
display: block;
}
.custom-date-range-container[b-fta9f4dtns] {
padding: 12px 16px;
background: #F9FAFB;
border-top: 1px solid #E5E7EB;
}
.custom-date-inputs[b-fta9f4dtns] {
display: flex;
flex-direction: column;
gap: 10px;
}
.date-input-group[b-fta9f4dtns] {
display: flex;
flex-direction: column;
gap: 4px;
}
.date-input-group label[b-fta9f4dtns] {
font-size: 0.75rem;
font-weight: 600;
color: #6B7280;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.date-input-group input[type="date"][b-fta9f4dtns] {
padding: 6px 10px;
font-size: 0.875rem;
border: 1px solid #D1D5DB;
border-radius: 6px;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
}
.date-input-group input[type="date"]:focus[b-fta9f4dtns] {
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
.btn-apply-date[b-fta9f4dtns] {
margin-top: 4px;
padding: 6px 12px;
font-size: 0.8rem;
font-weight: 500;
background: var(--accent-color);
border: none;
border-radius: 6px;
color: white;
cursor: pointer;
transition: background 0.15s, filter 0.15s;
}
.btn-apply-date:hover[b-fta9f4dtns] {
filter: brightness(0.85);
}
/* Small status badge in dropdown */
.status-badge-sm[b-fta9f4dtns] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
margin-right: 8px;
font-size: 0.65rem;
}
.status-badge-sm i[b-fta9f4dtns] {
font-size: 10px;
}
/* ========================================
Active Filters
======================================== */
.active-filters[b-fta9f4dtns] {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
padding-top: 14px;
margin-top: 14px;
border-top: 1px solid #F1F5F9;
}
.active-filters-label[b-fta9f4dtns] {
font-size: 0.75rem;
font-weight: 600;
color: #6B7280;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.filter-tag[b-fta9f4dtns] {
display: inline-flex;
align-items: center;
gap: 6px;
background: #F3F4F6;
border: 1px solid #E5E7EB;
border-radius: 20px;
padding: 4px 10px 4px 12px;
font-size: 0.8rem;
color: #374151;
}
.filter-tag i[b-fta9f4dtns] {
color: #6B7280;
font-size: 0.7rem;
}
.filter-tag-remove[b-fta9f4dtns] {
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
background: transparent;
border: none;
border-radius: 50%;
color: #9CA3AF;
cursor: pointer;
padding: 0;
transition: all 0.15s;
}
.filter-tag-remove:hover[b-fta9f4dtns] {
background: rgba(220, 38, 38, 0.1);
color: var(--error-600);
}
.btn-clear-all[b-fta9f4dtns] {
background: none;
border: none;
color: var(--brand-500);
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
padding: 4px 8px;
border-radius: 4px;
transition: background 0.15s;
}
.btn-clear-all:hover[b-fta9f4dtns] {
background: rgba(15, 23, 42, 0.08);
}
/* ========================================
Card & Table
======================================== */
.card[b-fta9f4dtns] {
background: white;
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 10px;
box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05);
overflow: hidden;
}
.table-responsive[b-fta9f4dtns] {
overflow-x: auto;
margin: 0;
}
.applications-table[b-fta9f4dtns] {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 0.875rem;
}
.applications-table thead[b-fta9f4dtns] {
background-color: #F8FAFC;
position: sticky;
top: 0;
z-index: 1;
}
.applications-table thead th[b-fta9f4dtns] {
padding: 12px 16px;
text-align: left;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #64748B;
border-bottom: 1px solid #E2E8F0;
white-space: nowrap;
user-select: none;
}
.applications-table thead th.sortable-header[b-fta9f4dtns] {
cursor: pointer;
}
.applications-table thead th.sortable-header:hover[b-fta9f4dtns],
.applications-table thead th:hover[b-fta9f4dtns] {
color: var(--brand-500);
background-color: #F1F5F9;
}
.applications-table thead th i[b-fta9f4dtns] {
margin-left: 4px;
font-size: 0.65rem;
}
@keyframes fadeIn-b-fta9f4dtns {
from { opacity: 0; }
to { opacity: 1; }
}
.applications-table tbody tr[b-fta9f4dtns] {
transition: all 0.12s ease;
border-left: 3px solid transparent;
background: white;
animation: fadeIn-b-fta9f4dtns 0.3s ease-out forwards;
opacity: 0;
}
/* Staggered row animations */
.applications-table tbody tr:nth-child(1)[b-fta9f4dtns] { animation-delay: 50ms; }
.applications-table tbody tr:nth-child(2)[b-fta9f4dtns] { animation-delay: 80ms; }
.applications-table tbody tr:nth-child(3)[b-fta9f4dtns] { animation-delay: 110ms; }
.applications-table tbody tr:nth-child(4)[b-fta9f4dtns] { animation-delay: 140ms; }
.applications-table tbody tr:nth-child(5)[b-fta9f4dtns] { animation-delay: 170ms; }
.applications-table tbody tr:nth-child(6)[b-fta9f4dtns] { animation-delay: 200ms; }
.applications-table tbody tr:nth-child(7)[b-fta9f4dtns] { animation-delay: 230ms; }
.applications-table tbody tr:nth-child(8)[b-fta9f4dtns] { animation-delay: 260ms; }
.applications-table tbody tr:nth-child(9)[b-fta9f4dtns] { animation-delay: 290ms; }
.applications-table tbody tr:nth-child(10)[b-fta9f4dtns] { animation-delay: 320ms; }
.applications-table tbody tr:nth-child(even)[b-fta9f4dtns] {
background-color: #FAFBFC;
}
.applications-table tbody tr.clickable-row[b-fta9f4dtns] {
cursor: pointer;
}
.applications-table tbody tr:hover[b-fta9f4dtns] {
background-color: #EFF6FF;
border-left: 3px solid var(--brand-500);
}
.applications-table tbody td[b-fta9f4dtns] {
padding: 5px 8px;
border-bottom: 1px solid #F1F5F9;
vertical-align: middle;
color: #374151;
}
/* Cell Styles */
.loan-number[b-fta9f4dtns] {
color: var(--brand-500);
font-weight: 600;
text-decoration: none;
transition: all 0.15s;
font-size: 0.875rem;
}
.loan-number:hover[b-fta9f4dtns] {
color: #004880;
text-decoration: underline;
}
.property-info[b-fta9f4dtns] {
display: flex;
flex-direction: column;
gap: 2px;
}
.property-location[b-fta9f4dtns] {
font-weight: 500;
color: #1F2937;
font-size: 0.875rem;
}
.amount-cell[b-fta9f4dtns] {
font-weight: 600;
color: #1F2937;
font-size: 0.875rem;
font-variant-numeric: tabular-nums;
}
.date-cell[b-fta9f4dtns] {
color: #6B7280;
font-size: 0.8rem;
}
.actions-cell[b-fta9f4dtns] {
text-align: right;
}
/* ========================================
Status Badges
======================================== */
.applications-table .badge[b-fta9f4dtns] {
padding: 5px 10px;
font-size: 0.8rem;
font-weight: 600;
border-radius: 20px;
display: inline-flex;
align-items: center;
gap: 4px;
}
.badge i[b-fta9f4dtns] {
font-size: 12px;
}
.badge.bg-danger[b-fta9f4dtns] {
background-color: #FEE2E2 !important;
color: var(--error-600) !important;
}
.badge.bg-warning[b-fta9f4dtns] {
background-color: #FEF3C7 !important;
color: #D97706 !important;
}
.badge.bg-secondary[b-fta9f4dtns] {
background-color: #F3F4F6 !important;
color: #4B5563 !important;
}
.badge.bg-info[b-fta9f4dtns] {
background-color: #E0F2FE !important;
color: #0369A1 !important;
}
.badge.bg-success[b-fta9f4dtns] {
background-color: #D1FAE5 !important;
color: #047857 !important;
}
.badge.bg-primary[b-fta9f4dtns] {
background-color: #DBEAFE !important;
color: #1D4ED8 !important;
}
/* ========================================
Action Buttons
======================================== */
.action-buttons[b-fta9f4dtns] {
display: inline-flex;
align-items: center;
gap: 6px;
}
.btn-action[b-fta9f4dtns] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 12px;
font-size: 0.78rem;
font-weight: 500;
color: var(--brand-500, #0D6785);
background: white;
border: 1px solid #E2E8F0;
border-radius: 6px;
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
font-family: inherit;
}
.btn-action:hover[b-fta9f4dtns] {
background: #EFF6FF;
border-color: #BFDBFE;
}
.btn-action-success[b-fta9f4dtns] {
color: #059669;
border-color: #A7F3D0;
}
.btn-action-success:hover[b-fta9f4dtns] {
background: #ECFDF5;
border-color: #059669;
}
.btn-action-secondary[b-fta9f4dtns] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 10px;
font-size: 0.72rem;
font-weight: 500;
color: #6B7280;
background: white;
border: 1px solid #E5E7EB;
border-radius: 6px;
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
font-family: inherit;
}
.btn-action-secondary:hover[b-fta9f4dtns] {
background: #F9FAFB;
border-color: #D1D5DB;
}
.btn-action-danger[b-fta9f4dtns] {
color: #DC2626;
border-color: #FECACA;
}
.btn-action-danger:hover[b-fta9f4dtns] {
background: #FEF2F2;
border-color: #DC2626;
color: #B91C1C;
}
/* Sweet Alert Style Modal */
.swal-backdrop[b-fta9f4dtns] {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(4px);
z-index: 1060;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
animation: swalFadeIn-b-fta9f4dtns 0.15s ease;
}
.swal-modal[b-fta9f4dtns] {
background: white;
border-radius: 16px;
padding: 32px 28px 24px;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
animation: swalPopIn-b-fta9f4dtns 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.swal-icon[b-fta9f4dtns] {
width: 64px;
height: 64px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
font-size: 1.8rem;
}
.swal-icon-warning[b-fta9f4dtns] {
background: #FEF3C7;
color: #D97706;
border: 3px solid #FDE68A;
}
.swal-title[b-fta9f4dtns] {
font-size: 1.2rem;
font-weight: 700;
color: #1F2937;
margin: 0 0 8px;
}
.swal-text[b-fta9f4dtns] {
font-size: 0.85rem;
color: #6B7280;
line-height: 1.5;
margin: 0 0 24px;
}
.swal-text strong[b-fta9f4dtns] {
color: #374151;
}
.swal-actions[b-fta9f4dtns] {
display: flex;
gap: 10px;
justify-content: center;
}
.swal-btn[b-fta9f4dtns] {
padding: 9px 20px;
border-radius: 8px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
border: none;
font-family: inherit;
display: inline-flex;
align-items: center;
gap: 6px;
}
.swal-btn-cancel[b-fta9f4dtns] {
background: #F3F4F6;
color: #6B7280;
}
.swal-btn-cancel:hover[b-fta9f4dtns] {
background: #E5E7EB;
color: #374151;
}
.swal-btn-confirm[b-fta9f4dtns] {
background: #DC2626;
color: white;
}
.swal-btn-confirm:hover[b-fta9f4dtns] {
background: #B91C1C;
}
@keyframes swalFadeIn-b-fta9f4dtns {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes swalPopIn-b-fta9f4dtns {
from { opacity: 0; transform: scale(0.85); }
to { opacity: 1; transform: scale(1); }
}
.status-archived[b-fta9f4dtns] {
background: #F1F5F9;
color: #64748B;
}
.btn-action-subtle[b-fta9f4dtns] {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
font-size: 0.8rem;
font-weight: 500;
color: var(--brand-500);
background-color: white;
border: 1px solid #E5E7EB;
border-radius: 6px;
cursor: pointer;
transition: all 0.15s ease;
margin-left: 4px;
}
.btn-action-subtle:first-child[b-fta9f4dtns] {
margin-left: 0;
}
.btn-action-subtle:hover[b-fta9f4dtns] {
background-color: #EFF6FF;
color: #004880;
border-color: #BFDBFE;
}
.btn-action-subtle i[b-fta9f4dtns] {
font-size: 0.85rem;
color: var(--brand-500);
}
.btn-action-subtle:hover i[b-fta9f4dtns] {
color: #004880;
}
.btn-action-subtle:disabled[b-fta9f4dtns] {
opacity: 0.6;
cursor: not-allowed;
}
/* ========================================
Loading & Empty States
======================================== */
.loading-state[b-fta9f4dtns] {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 40px 20px;
color: #6B7280;
}
.loading-state .spinner-border[b-fta9f4dtns] {
width: 2rem;
height: 2rem;
}
/* Skeleton table rows */
@keyframes app-skel-pulse-b-fta9f4dtns {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.table-row-skeleton td[b-fta9f4dtns] {
padding: 0.875rem 0.75rem;
}
.row-skel[b-fta9f4dtns] {
height: 1.0625rem;
width: 80px;
border-radius: 4px;
background: linear-gradient(90deg, var(--bs-tertiary-bg, #f0f0f0) 25%, var(--bs-secondary-bg, #e0e0e0) 50%, var(--bs-tertiary-bg, #f0f0f0) 75%);
background-size: 200% 100%;
animation: app-skel-pulse-b-fta9f4dtns 1.5s ease-in-out infinite;
}
.row-skel-badge[b-fta9f4dtns] {
height: 1.25rem;
width: 90px;
border-radius: 9999px;
background: linear-gradient(90deg, var(--bs-tertiary-bg, #f0f0f0) 25%, var(--bs-secondary-bg, #e0e0e0) 50%, var(--bs-tertiary-bg, #f0f0f0) 75%);
background-size: 200% 100%;
animation: app-skel-pulse-b-fta9f4dtns 1.5s ease-in-out infinite;
}
.empty-state[b-fta9f4dtns] {
text-align: center;
padding: 48px 32px !important;
color: #6B7280;
}
.empty-state i[b-fta9f4dtns] {
font-size: 40px;
display: block;
margin-bottom: 12px;
color: #D1D5DB;
}
.empty-state span[b-fta9f4dtns] {
font-size: 0.9rem;
color: #9CA3AF;
display: block;
}
.empty-state-hint[b-fta9f4dtns] {
font-size: 0.8rem;
color: #9CA3AF;
margin: 8px 0 0 0;
}
/* Custom purple badge classes for ReferredToUnderwriter status */
.bg-purple-subtle[b-fta9f4dtns] {
background-color: #E9D5FF !important;
}
.border-purple-subtle[b-fta9f4dtns] {
border-color: #C4B5FD !important;
}
.text-purple-emphasis[b-fta9f4dtns] {
color: #6B21A8 !important;
}
/* Custom orange badge classes for Referral status */
.bg-orange-subtle[b-fta9f4dtns] {
background-color: #FED7AA !important;
}
.border-orange-subtle[b-fta9f4dtns] {
border-color: #FDBA74 !important;
}
.text-orange-emphasis[b-fta9f4dtns] {
color: #9A3412 !important;
}
/* Feature 072 — custom teal badge classes for the AwaitingBorrower ("Waiting for Borrower")
status. Needed because Bootstrap 5.3 ships no teal *-subtle utility, and because the
ToSubtleBadgeClass fallback is grey, which is indistinguishable from Cancelled/Archived. */
.bg-teal-subtle[b-fta9f4dtns] {
background-color: #CCFBF1 !important;
}
.border-teal-subtle[b-fta9f4dtns] {
border-color: #5EEAD4 !important;
}
.text-teal-emphasis[b-fta9f4dtns] {
color: #115E59 !important;
}
/* ========================================
Loan Officer Filter Dropdown
======================================== */
.loan-officer-dropdown-menu[b-fta9f4dtns] {
min-width: 280px;
max-height: 400px;
overflow: hidden;
}
.loan-officer-dropdown-menu.show[b-fta9f4dtns] {
display: flex;
flex-direction: column;
}
.dropdown-search-container[b-fta9f4dtns] {
padding: 8px 12px;
position: sticky;
top: 0;
background: white;
z-index: 1;
}
.dropdown-search[b-fta9f4dtns] {
position: relative;
display: flex;
align-items: center;
}
.dropdown-search i.bi-search[b-fta9f4dtns] {
position: absolute;
left: 10px;
color: #9CA3AF;
font-size: 0.8rem;
pointer-events: none;
}
.dropdown-search input[b-fta9f4dtns] {
width: 100%;
padding: 8px 32px 8px 32px;
font-size: 0.875rem;
border: 1px solid #E5E7EB;
border-radius: 6px;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
}
.dropdown-search input:focus[b-fta9f4dtns] {
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
.dropdown-search input[b-fta9f4dtns]::placeholder {
color: #9CA3AF;
}
.btn-clear-search[b-fta9f4dtns] {
position: absolute;
right: 6px;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
background: transparent;
border: none;
color: #9CA3AF;
cursor: pointer;
padding: 0;
border-radius: 50%;
transition: all 0.15s;
}
.btn-clear-search:hover[b-fta9f4dtns] {
background: #F3F4F6;
color: #6B7280;
}
.loan-officer-list-container[b-fta9f4dtns] {
max-height: 250px;
overflow-y: auto;
padding: 0;
margin: 0;
list-style: none;
}
.loan-officer-list-container .dropdown-item[b-fta9f4dtns] {
padding: 10px 16px;
}
.dropdown-item-empty[b-fta9f4dtns] {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 20px 16px;
color: #9CA3AF;
font-size: 0.8rem;
}
.dropdown-item-empty i[b-fta9f4dtns] {
font-size: 1.5rem;
color: #D1D5DB;
}
/* Loan Officer Table Cell */
.loan-officer-cell[b-fta9f4dtns] {
display: flex;
align-items: center;
font-size: 0.85rem;
color: #4B5563;
white-space: nowrap;
}
/* ========================================
Responsive
======================================== */
@media (max-width: 992px) {
.filters-bar[b-fta9f4dtns] {
flex-direction: column;
align-items: stretch;
}
.filters-left[b-fta9f4dtns] {
max-width: none;
}
.filters-right[b-fta9f4dtns] {
justify-content: flex-start;
}
}
@media (max-width: 768px) {
.page-header[b-fta9f4dtns] {
flex-direction: column;
align-items: flex-start;
}
.inline-stats[b-fta9f4dtns] {
width: 100%;
justify-content: flex-start;
}
}
/* /Components/Pages/BankPortal/BankUserDashboardPage.razor.rz.scp.css */
/* Dashboard Header */
.dashboard-header[b-iqeh9mbf5e] {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.5rem;
gap: 1rem;
flex-wrap: wrap;
}
.header-left[b-iqeh9mbf5e] {
display: flex;
align-items: center;
gap: 0.75rem;
}
.page-title[b-iqeh9mbf5e] {
font-weight: 600;
color: var(--bs-emphasis-color);
}
.header-right[b-iqeh9mbf5e] {
display: flex;
align-items: center;
gap: 0.75rem;
}
/* Standalone filter toggle (Loan # TBD) — mirrors .btn-filter outside a dropdown */
.btn-filter-toggle[b-iqeh9mbf5e] {
display: flex;
align-items: center;
gap: 0.5rem;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-radius: 0.5rem;
padding: 0.5rem 0.875rem;
font-size: 0.875rem;
color: var(--bs-body-color);
font-weight: 500;
transition: all 0.2s;
white-space: nowrap;
}
.btn-filter-toggle:hover[b-iqeh9mbf5e] {
background: var(--bs-tertiary-bg);
border-color: var(--bs-border-color);
}
.btn-filter-toggle i:first-child[b-iqeh9mbf5e] {
color: var(--bs-secondary-color);
font-size: 0.875rem;
}
.btn-filter-toggle.active[b-iqeh9mbf5e] {
background: var(--accent-color);
border-color: var(--accent-color);
color: white;
}
.btn-filter-toggle.active i:first-child[b-iqeh9mbf5e] {
color: rgba(255, 255, 255, 0.9);
}
/* Filter Dropdowns */
.filter-dropdown .btn-filter[b-iqeh9mbf5e] {
display: flex;
align-items: center;
gap: 0.5rem;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-radius: 0.5rem;
padding: 0.5rem 0.875rem;
font-size: 0.875rem;
color: var(--bs-body-color);
font-weight: 500;
transition: all 0.2s;
white-space: nowrap;
}
.filter-dropdown .btn-filter:hover[b-iqeh9mbf5e] {
background: var(--bs-tertiary-bg);
border-color: var(--bs-border-color);
}
.filter-dropdown .btn-filter i:first-child[b-iqeh9mbf5e] {
color: var(--bs-secondary-color);
font-size: 0.875rem;
}
.filter-dropdown .dropdown-menu[b-iqeh9mbf5e] {
min-width: 220px;
padding: 0.5rem 0;
border: 1px solid var(--bs-border-color);
border-radius: 0.625rem;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}
.filter-dropdown .dropdown-header[b-iqeh9mbf5e] {
font-size: 0.7rem;
font-weight: 600;
color: var(--bs-secondary-color);
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.5rem 1rem;
}
.filter-dropdown .dropdown-item[b-iqeh9mbf5e] {
display: flex;
align-items: center;
padding: 0.625rem 1rem;
font-size: 0.875rem;
color: var(--bs-body-color);
border: none;
background: none;
width: 100%;
text-align: left;
cursor: pointer;
transition: background 0.15s;
}
.filter-dropdown .dropdown-item:hover[b-iqeh9mbf5e] {
background: var(--bs-tertiary-bg);
}
.filter-dropdown .dropdown-item.active[b-iqeh9mbf5e] {
background: rgba(var(--bs-primary-rgb), 0.08);
color: var(--bs-primary);
font-weight: 600;
}
/* Custom Date Range Styles */
.date-dropdown-menu[b-iqeh9mbf5e] {
min-width: 220px;
}
.custom-date-range-container[b-iqeh9mbf5e] {
padding: 0.75rem 1rem;
background: var(--bs-tertiary-bg);
border-top: 1px solid var(--bs-border-color);
}
.custom-date-inputs[b-iqeh9mbf5e] {
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.date-input-group[b-iqeh9mbf5e] {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.date-input-group label[b-iqeh9mbf5e] {
font-size: 0.75rem;
font-weight: 600;
color: var(--bs-secondary-color);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.date-input-group input[type="date"][b-iqeh9mbf5e] {
padding: 0.375rem 0.625rem;
font-size: 0.875rem;
border: 1px solid var(--bs-border-color);
border-radius: 0.375rem;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
}
.date-input-group input[type="date"]:focus[b-iqeh9mbf5e] {
border-color: var(--bs-primary);
box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.1);
}
.btn-apply-date[b-iqeh9mbf5e] {
margin-top: 0.25rem;
padding: 0.375rem 0.75rem;
font-size: 0.8rem;
font-weight: 500;
}
/* Small status badge in dropdown */
.status-badge-sm[b-iqeh9mbf5e] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
margin-right: 0.5rem;
font-size: 0.65rem;
}
.status-badge-sm i[b-iqeh9mbf5e] {
font-size: 10px;
}
/* Active Filters */
.active-filters[b-iqeh9mbf5e] {
display: flex;
align-items: center;
gap: 0.625rem;
flex-wrap: wrap;
padding: 0.75rem 1.25rem;
border-bottom: 1px solid var(--bs-border-color);
background: var(--bs-tertiary-bg);
}
.active-filters-label[b-iqeh9mbf5e] {
font-size: 0.75rem;
font-weight: 600;
color: var(--bs-secondary-color);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.filter-tag[b-iqeh9mbf5e] {
display: inline-flex;
align-items: center;
gap: 0.375rem;
background: var(--brand-500, #0D6785);
border: 1px solid var(--brand-500, #0D6785);
border-radius: 1.25rem;
padding: 0.25rem 0.625rem 0.25rem 0.75rem;
font-size: 0.8rem;
color: white;
font-weight: 500;
}
.filter-tag i[b-iqeh9mbf5e] {
color: rgba(255, 255, 255, 0.8);
font-size: 0.7rem;
}
.filter-tag-remove[b-iqeh9mbf5e] {
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
background: rgba(255, 255, 255, 0.2);
border: none;
border-radius: 50%;
color: white;
cursor: pointer;
padding: 0;
transition: all 0.15s;
}
.filter-tag-remove:hover[b-iqeh9mbf5e] {
background: rgba(255, 255, 255, 0.4);
color: white;
}
.btn-clear-all[b-iqeh9mbf5e] {
background: none;
border: none;
color: var(--bs-primary);
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
transition: background 0.15s;
}
.btn-clear-all:hover[b-iqeh9mbf5e] {
background: rgba(var(--bs-primary-rgb), 0.08);
}
/* Stat Cards */
.stat-cards-row[b-iqeh9mbf5e] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-bottom: 1.5rem;
}
.stat-card[b-iqeh9mbf5e] {
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-radius: 0.75rem;
padding: 1.25rem;
display: flex;
align-items: center;
gap: 1rem;
transition: box-shadow 0.15s ease;
}
.stat-card:hover[b-iqeh9mbf5e] {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.stat-icon-wrapper[b-iqeh9mbf5e] {
width: 48px;
height: 48px;
border-radius: 0.625rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
flex-shrink: 0;
}
.stat-icon-active[b-iqeh9mbf5e] {
background: rgba(var(--bs-primary-rgb), 0.1);
color: var(--bs-primary);
}
.stat-icon-pending[b-iqeh9mbf5e] {
background: rgba(var(--bs-warning-rgb), 0.1);
color: var(--bs-warning);
}
.stat-icon-bound[b-iqeh9mbf5e] {
background: rgba(var(--bs-success-rgb), 0.1);
color: var(--bs-success);
}
.stat-content[b-iqeh9mbf5e] {
display: flex;
flex-direction: column;
}
.stat-value[b-iqeh9mbf5e] {
font-size: 1.5rem;
font-weight: 700;
line-height: 1.2;
color: var(--bs-emphasis-color);
}
.stat-label[b-iqeh9mbf5e] {
font-size: 0.8125rem;
color: var(--bs-secondary-color);
margin-top: 0.125rem;
}
/* Table Card */
.table-card[b-iqeh9mbf5e] {
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-radius: 0.75rem;
overflow: visible;
}
.table-card-header[b-iqeh9mbf5e] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--bs-border-color);
flex-wrap: wrap;
}
.table-header-filters[b-iqeh9mbf5e] {
display: flex;
align-items: center;
gap: 0.625rem;
flex-wrap: wrap;
}
.table-title[b-iqeh9mbf5e] {
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* Table */
[b-iqeh9mbf5e] .table {
margin-bottom: 0;
}
[b-iqeh9mbf5e] .table thead th {
background: var(--bs-tertiary-bg);
border-bottom: 1px solid var(--bs-border-color);
font-size: 0.8125rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.025em;
color: var(--bs-secondary-color);
padding: 0.75rem 1rem;
white-space: nowrap;
}
[b-iqeh9mbf5e] .table tbody td {
padding: 0.75rem 1rem;
font-size: 0.875rem;
border-bottom: 1px solid var(--bs-border-color-translucent);
vertical-align: middle;
}
[b-iqeh9mbf5e] .table tbody tr:last-child td {
border-bottom: none;
}
[b-iqeh9mbf5e] .table tbody tr:hover {
background: var(--bs-tertiary-bg);
}
.sortable-header[b-iqeh9mbf5e] {
cursor: pointer;
user-select: none;
white-space: nowrap;
}
.sortable-header:hover[b-iqeh9mbf5e] {
color: var(--bs-primary);
}
.sort-icon[b-iqeh9mbf5e] {
font-size: 0.7rem;
opacity: 0.5;
margin-left: 0.25rem;
}
.sortable-header:hover .sort-icon[b-iqeh9mbf5e] {
opacity: 1;
}
/* Table Footer */
.table-footer[b-iqeh9mbf5e] {
padding: 0.75rem 1.25rem;
border-top: 1px solid var(--bs-border-color);
}
/* Action Buttons */
.actions-cell[b-iqeh9mbf5e] {
text-align: right;
}
.btn-action-subtle[b-iqeh9mbf5e] {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
font-size: 0.8rem;
font-weight: 500;
color: var(--brand-500, var(--bs-primary));
background-color: var(--bs-body-bg);
border: 1px solid #E5E7EB;
border-radius: 6px;
cursor: pointer;
transition: all 0.15s ease;
}
.btn-action-subtle:hover[b-iqeh9mbf5e] {
background-color: #EFF6FF;
color: #004880;
border-color: #BFDBFE;
}
.btn-action-subtle i[b-iqeh9mbf5e] {
font-size: 0.85rem;
}
.btn-action-subtle:disabled[b-iqeh9mbf5e],
.btn-action-subtle.disabled[b-iqeh9mbf5e] {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* Loading & Empty States */
.table-loading[b-iqeh9mbf5e] {
display: flex;
align-items: center;
justify-content: center;
padding: 3rem 1rem;
}
/* Skeleton loader animation */
@keyframes bank-dash-skeleton-pulse-b-iqeh9mbf5e {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* Stat card skeletons */
.stat-skeleton-icon[b-iqeh9mbf5e] {
width: 48px;
height: 48px;
border-radius: 0.625rem;
flex-shrink: 0;
background: linear-gradient(90deg, var(--bs-tertiary-bg, #f0f0f0) 25%, var(--bs-secondary-bg, #e0e0e0) 50%, var(--bs-tertiary-bg, #f0f0f0) 75%);
background-size: 200% 100%;
animation: bank-dash-skeleton-pulse-b-iqeh9mbf5e 1.5s ease-in-out infinite;
}
.stat-skeleton-value[b-iqeh9mbf5e] {
height: 1.5rem;
width: 60px;
border-radius: 4px;
margin-bottom: 0.375rem;
background: linear-gradient(90deg, var(--bs-tertiary-bg, #f0f0f0) 25%, var(--bs-secondary-bg, #e0e0e0) 50%, var(--bs-tertiary-bg, #f0f0f0) 75%);
background-size: 200% 100%;
animation: bank-dash-skeleton-pulse-b-iqeh9mbf5e 1.5s ease-in-out infinite;
}
.stat-skeleton-label[b-iqeh9mbf5e] {
height: 0.8125rem;
width: 100px;
border-radius: 4px;
background: linear-gradient(90deg, var(--bs-tertiary-bg, #f0f0f0) 25%, var(--bs-secondary-bg, #e0e0e0) 50%, var(--bs-tertiary-bg, #f0f0f0) 75%);
background-size: 200% 100%;
animation: bank-dash-skeleton-pulse-b-iqeh9mbf5e 1.5s ease-in-out infinite;
}
/* Table row skeletons */
.table-row-skeleton td[b-iqeh9mbf5e] {
padding: 0.875rem 0.75rem;
}
.row-skeleton-cell[b-iqeh9mbf5e] {
height: 1.0625rem;
border-radius: 4px;
background: linear-gradient(90deg, var(--bs-tertiary-bg, #f0f0f0) 25%, var(--bs-secondary-bg, #e0e0e0) 50%, var(--bs-tertiary-bg, #f0f0f0) 75%);
background-size: 200% 100%;
animation: bank-dash-skeleton-pulse-b-iqeh9mbf5e 1.5s ease-in-out infinite;
}
.row-skeleton-badge[b-iqeh9mbf5e] {
height: 1.25rem;
width: 90px;
border-radius: 9999px;
background: linear-gradient(90deg, var(--bs-tertiary-bg, #f0f0f0) 25%, var(--bs-secondary-bg, #e0e0e0) 50%, var(--bs-tertiary-bg, #f0f0f0) 75%);
background-size: 200% 100%;
animation: bank-dash-skeleton-pulse-b-iqeh9mbf5e 1.5s ease-in-out infinite;
}
.empty-state[b-iqeh9mbf5e] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 3rem 1rem;
text-align: center;
}
.empty-icon[b-iqeh9mbf5e] {
font-size: 2.5rem;
color: var(--bs-secondary-color);
opacity: 0.5;
margin-bottom: 0.75rem;
}
.empty-text[b-iqeh9mbf5e] {
color: var(--bs-secondary-color);
font-size: 0.9rem;
margin-bottom: 0;
}
.empty-state-btn[b-iqeh9mbf5e] {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.8125rem;
padding: 0.35rem 0.75rem;
border: 1px solid var(--bs-border-color);
border-radius: 0.375rem;
color: var(--bs-secondary-color);
text-decoration: none;
transition: all 0.15s ease;
}
.empty-state-btn:hover[b-iqeh9mbf5e] {
background: var(--bs-tertiary-bg);
color: var(--bs-emphasis-color);
text-decoration: none;
}
/* Brand Button (theme green) */
.btn-brand[b-iqeh9mbf5e] {
background-color: var(--accent-color);
border-color: var(--accent-color);
color: #fff;
}
.btn-brand:hover[b-iqeh9mbf5e],
.btn-brand:focus[b-iqeh9mbf5e] {
filter: brightness(0.9);
color: #fff;
}
.btn-brand:active[b-iqeh9mbf5e] {
filter: brightness(0.8);
color: #fff;
}
/* Responsive */
@media (max-width: 768px) {
.stat-cards-row[b-iqeh9mbf5e] {
grid-template-columns: 1fr;
}
.dashboard-header[b-iqeh9mbf5e] {
flex-direction: column;
align-items: flex-start;
}
.header-right[b-iqeh9mbf5e] {
width: 100%;
}
.table-card-header[b-iqeh9mbf5e] {
flex-direction: column;
align-items: flex-start;
}
.table-header-filters[b-iqeh9mbf5e] {
width: 100%;
justify-content: flex-start;
}
/* The search box is a direct flex child of .table-header-filters (no wrapper), so its
own container carries the full-width behaviour that .search-wrapper used to provide
back when the box lived in .header-right. !important is what beats the component's
inline Width="320px". */
[b-iqeh9mbf5e] .search-textbox-container {
width: 100% !important;
}
}
@media (max-width: 992px) and (min-width: 769px) {
.stat-cards-row[b-iqeh9mbf5e] {
grid-template-columns: repeat(2, 1fr);
}
}
/* Custom purple badge classes for ReferredToUnderwriter status */
.bg-purple-subtle[b-iqeh9mbf5e] {
background-color: #E9D5FF !important;
}
.border-purple-subtle[b-iqeh9mbf5e] {
border-color: #C4B5FD !important;
}
.text-purple-emphasis[b-iqeh9mbf5e] {
color: #6B21A8 !important;
}
/* Custom orange badge classes for Referral status */
.bg-orange-subtle[b-iqeh9mbf5e] {
background-color: #FED7AA !important;
}
.border-orange-subtle[b-iqeh9mbf5e] {
border-color: #FDBA74 !important;
}
.text-orange-emphasis[b-iqeh9mbf5e] {
color: #9A3412 !important;
}
/* Feature 072 — custom teal badge classes for the AwaitingBorrower ("Waiting for Borrower")
status. Needed because Bootstrap 5.3 ships no teal *-subtle utility, and because the
ToSubtleBadgeClass fallback is grey, which is indistinguishable from Cancelled/Archived. */
.bg-teal-subtle[b-iqeh9mbf5e] {
background-color: #CCFBF1 !important;
}
.border-teal-subtle[b-iqeh9mbf5e] {
border-color: #5EEAD4 !important;
}
.text-teal-emphasis[b-iqeh9mbf5e] {
color: #115E59 !important;
}
/* Action Buttons */
.action-buttons[b-iqeh9mbf5e] {
display: inline-flex;
align-items: center;
gap: 6px;
}
.btn-action[b-iqeh9mbf5e] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 12px;
font-size: 0.78rem;
font-weight: 500;
color: var(--brand-500, #0D6785);
background: white;
border: 1px solid #E2E8F0;
border-radius: 6px;
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
font-family: inherit;
}
.btn-action:hover[b-iqeh9mbf5e] {
background: #EFF6FF;
border-color: #BFDBFE;
}
.btn-action-success[b-iqeh9mbf5e] {
color: #059669;
border-color: #A7F3D0;
}
.btn-action-success:hover[b-iqeh9mbf5e] {
background: #ECFDF5;
border-color: #059669;
}
.btn-action-warning[b-iqeh9mbf5e] {
color: #B45309;
border-color: #FDE68A;
}
.btn-action-warning:hover[b-iqeh9mbf5e] {
background: #FFFBEB;
border-color: #B45309;
color: #92400E;
}
.btn-action-secondary[b-iqeh9mbf5e] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 10px;
font-size: 0.72rem;
font-weight: 500;
color: #6B7280;
background: white;
border: 1px solid #E5E7EB;
border-radius: 6px;
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
font-family: inherit;
}
.btn-action-secondary:hover[b-iqeh9mbf5e] {
background: #F9FAFB;
border-color: #D1D5DB;
}
.btn-action-danger[b-iqeh9mbf5e] {
color: #DC2626;
border-color: #FECACA;
}
.btn-action-danger:hover[b-iqeh9mbf5e] {
background: #FEF2F2;
border-color: #DC2626;
color: #B91C1C;
}
/* Sweet Alert Style Modal */
.swal-backdrop[b-iqeh9mbf5e] {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(4px);
z-index: 1060;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
animation: swalFadeIn-b-iqeh9mbf5e 0.15s ease;
}
.swal-modal[b-iqeh9mbf5e] {
background: white;
border-radius: 16px;
padding: 32px 28px 24px;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
animation: swalPopIn-b-iqeh9mbf5e 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.swal-icon[b-iqeh9mbf5e] {
width: 64px;
height: 64px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
font-size: 1.8rem;
}
.swal-icon-warning[b-iqeh9mbf5e] {
background: #FEF3C7;
color: #D97706;
border: 3px solid #FDE68A;
}
.swal-title[b-iqeh9mbf5e] {
font-size: 1.2rem;
font-weight: 700;
color: #1F2937;
margin: 0 0 8px;
}
.swal-text[b-iqeh9mbf5e] {
font-size: 0.85rem;
color: #6B7280;
line-height: 1.5;
margin: 0 0 24px;
}
.swal-text strong[b-iqeh9mbf5e] {
color: #374151;
}
.swal-actions[b-iqeh9mbf5e] {
display: flex;
gap: 10px;
justify-content: center;
}
.swal-btn[b-iqeh9mbf5e] {
padding: 9px 20px;
border-radius: 8px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
border: none;
font-family: inherit;
display: inline-flex;
align-items: center;
gap: 6px;
}
.swal-btn-cancel[b-iqeh9mbf5e] {
background: #F3F4F6;
color: #6B7280;
}
.swal-btn-cancel:hover[b-iqeh9mbf5e] {
background: #E5E7EB;
color: #374151;
}
.swal-btn-confirm[b-iqeh9mbf5e] {
background: #DC2626;
color: white;
}
.swal-btn-confirm:hover[b-iqeh9mbf5e] {
background: #B91C1C;
}
@keyframes swalFadeIn-b-iqeh9mbf5e {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes swalPopIn-b-iqeh9mbf5e {
from { opacity: 0; transform: scale(0.85); }
to { opacity: 1; transform: scale(1); }
}
/* Legacy - keep for backward compat */
.action-btn-group[b-iqeh9mbf5e] {
display: inline-flex;
align-items: stretch;
border-radius: 6px;
overflow: hidden;
}
.action-btn-group .btn-action-subtle[b-iqeh9mbf5e],
.action-btn-group .btn-action-primary[b-iqeh9mbf5e],
.action-btn-group .btn-action-success[b-iqeh9mbf5e] {
border-radius: 0;
}
.action-btn-group > :first-child[b-iqeh9mbf5e] {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.action-btn-group > :last-child[b-iqeh9mbf5e] {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.action-chevron[b-iqeh9mbf5e] {
padding: 4px 6px !important;
border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
min-width: unset;
}
.action-chevron[b-iqeh9mbf5e]::after {
vertical-align: middle;
}
/* Primary action button (brand/accent) */
.btn-action-primary[b-iqeh9mbf5e] {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
font-size: 0.8rem;
font-weight: 600;
color: white;
background: var(--accent-color);
border: 1px solid var(--accent-color);
border-radius: 6px;
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
}
.btn-action-primary:hover[b-iqeh9mbf5e] {
filter: brightness(0.85);
}
/* Success action button (green) */
.btn-action-success[b-iqeh9mbf5e] {
color: white !important;
background: #059669 !important;
border-color: #059669 !important;
}
.btn-action-success:hover[b-iqeh9mbf5e] {
background: #047857 !important;
border-color: #047857 !important;
}
.btn-action-success:hover[b-iqeh9mbf5e] {
background-color: var(--success-600, #059669);
border-color: var(--success-600, #059669);
color: #fff;
}
/* Archived status badge */
.status-archived[b-iqeh9mbf5e] {
background-color: #F3F4F6;
border-color: #E5E7EB;
color: #6B7280;
}
/* /Components/Pages/BankPortal/BoundPoliciesPage.razor.rz.scp.css */
/* ========================================
Bank Portal - Bound Policies Page
(Matches Underwriting PoliciesPage styles)
======================================== */
.page-header[b-wpm33vt0a9] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
gap: 24px;
flex-wrap: wrap;
}
.header-left[b-wpm33vt0a9] {
display: flex;
flex-direction: column;
gap: 4px;
}
.page-title[b-wpm33vt0a9] {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary, #1F2937);
margin: 0;
line-height: 1.2;
letter-spacing: -0.02em;
}
.page-subtitle[b-wpm33vt0a9] {
font-size: 0.875rem;
color: var(--text-muted, #6B7280);
margin: 0;
font-weight: 400;
}
/* Inline Stats */
.inline-stats[b-wpm33vt0a9] {
display: flex;
align-items: center;
gap: 12px;
}
.mini-stat[b-wpm33vt0a9] {
display: flex;
align-items: center;
gap: 8px;
background: white;
border: 1px solid var(--border-light, rgba(15, 23, 42, 0.1));
border-radius: 8px;
padding: 8px 14px;
box-shadow: var(--shadow-xs, 0 1px 3px rgba(15, 23, 42, 0.05));
}
.mini-stat > i[b-wpm33vt0a9] {
font-size: 1rem;
color: var(--brand-500);
}
.mini-stat.premium-stat > i[b-wpm33vt0a9] {
color: var(--success-600, #059669);
}
.stat-content[b-wpm33vt0a9] {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.mini-stat-value[b-wpm33vt0a9] {
font-size: 1.125rem;
font-weight: 700;
color: var(--text-primary, #1F2937);
}
.mini-stat-label[b-wpm33vt0a9] {
font-size: 0.7rem;
color: var(--text-muted, #6B7280);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.btn-icon-refresh[b-wpm33vt0a9] {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: white;
border: 1px solid var(--border-light, rgba(15, 23, 42, 0.15));
border-radius: 8px;
color: var(--brand-500);
cursor: pointer;
transition: all 0.2s;
}
.btn-icon-refresh:hover:not(:disabled)[b-wpm33vt0a9] {
background: var(--bg-hover, rgba(15, 23, 42, 0.08));
border-color: var(--brand-500);
}
.btn-icon-refresh:disabled[b-wpm33vt0a9] {
opacity: 0.6;
cursor: not-allowed;
}
@keyframes spin-b-wpm33vt0a9 {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.bi-arrow-clockwise.spinning[b-wpm33vt0a9] {
animation: spin-b-wpm33vt0a9 1s linear infinite;
}
/* Export CSV Button */
.btn-export-csv[b-wpm33vt0a9] {
display: flex;
align-items: center;
gap: 6px;
height: 40px;
padding: 0 16px;
font-size: 0.8rem;
font-weight: 600;
color: white;
background: var(--accent-color);
border: 1px solid var(--accent-color);
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
}
.btn-export-csv:hover:not(:disabled)[b-wpm33vt0a9] {
filter: brightness(0.85);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.btn-export-csv:disabled[b-wpm33vt0a9] {
opacity: 0.6;
cursor: not-allowed;
}
.btn-export-csv i[b-wpm33vt0a9] {
font-size: 0.875rem;
}
/* Filters Card */
.filters-card[b-wpm33vt0a9] {
background: white;
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 10px;
padding: 16px;
margin-bottom: 16px;
box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05);
}
.filters-bar[b-wpm33vt0a9] {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.filters-left[b-wpm33vt0a9] {
flex: 1;
min-width: 280px;
max-width: 400px;
}
.filters-right[b-wpm33vt0a9] {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
/* Filter Dropdowns */
.filter-dropdown .btn-filter[b-wpm33vt0a9] {
display: flex;
align-items: center;
gap: 8px;
background: white;
border: 1px solid #E5E7EB;
border-radius: 8px;
padding: 8px 14px;
font-size: 0.875rem;
color: #374151;
font-weight: 500;
transition: all 0.2s;
white-space: nowrap;
}
.filter-dropdown .btn-filter:hover[b-wpm33vt0a9] {
background: #F9FAFB;
border-color: #D1D5DB;
}
.filter-dropdown .btn-filter i:first-child[b-wpm33vt0a9] {
color: #6B7280;
font-size: 0.875rem;
}
.filter-dropdown .dropdown-menu[b-wpm33vt0a9] {
min-width: 220px;
padding: 8px 0;
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 10px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}
.filter-dropdown .dropdown-header[b-wpm33vt0a9] {
font-size: 0.7rem;
font-weight: 600;
color: #6B7280;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 8px 16px;
}
.filter-dropdown .dropdown-item[b-wpm33vt0a9] {
display: flex;
align-items: center;
padding: 10px 16px;
font-size: 0.875rem;
color: #374151;
border: none;
background: none;
width: 100%;
text-align: left;
cursor: pointer;
transition: background 0.15s;
}
.filter-dropdown .dropdown-item:hover[b-wpm33vt0a9] {
background: rgba(15, 23, 42, 0.05);
}
.filter-dropdown .dropdown-item.active[b-wpm33vt0a9] {
background: rgba(15, 23, 42, 0.08);
color: var(--brand-500);
font-weight: 600;
}
/* Custom Date Range */
.date-dropdown-menu[b-wpm33vt0a9] {
min-width: 220px;
}
.custom-date-range-container[b-wpm33vt0a9] {
padding: 12px 16px;
background: #F9FAFB;
border-top: 1px solid #E5E7EB;
}
.custom-date-inputs[b-wpm33vt0a9] {
display: flex;
flex-direction: column;
gap: 10px;
}
.date-input-group[b-wpm33vt0a9] {
display: flex;
flex-direction: column;
gap: 4px;
}
.date-input-group label[b-wpm33vt0a9] {
font-size: 0.75rem;
font-weight: 600;
color: #6B7280;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.date-input-group input[type="date"][b-wpm33vt0a9] {
padding: 6px 10px;
font-size: 0.875rem;
border: 1px solid #D1D5DB;
border-radius: 6px;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
}
.date-input-group input[type="date"]:focus[b-wpm33vt0a9] {
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
.btn-apply-date[b-wpm33vt0a9] {
margin-top: 4px;
padding: 6px 12px;
font-size: 0.8rem;
font-weight: 500;
background: var(--accent-color);
border: none;
border-radius: 6px;
color: white;
cursor: pointer;
transition: background 0.15s, filter 0.15s;
}
.btn-apply-date:hover[b-wpm33vt0a9] {
filter: brightness(0.85);
}
/* Active Filters */
.active-filters[b-wpm33vt0a9] {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
padding-top: 14px;
margin-top: 14px;
border-top: 1px solid #F1F5F9;
}
.active-filters-label[b-wpm33vt0a9] {
font-size: 0.75rem;
font-weight: 600;
color: #6B7280;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.filter-tag[b-wpm33vt0a9] {
display: inline-flex;
align-items: center;
gap: 6px;
background: #F3F4F6;
border: 1px solid #E5E7EB;
border-radius: 20px;
padding: 4px 10px 4px 12px;
font-size: 0.8rem;
color: #374151;
}
.filter-tag i[b-wpm33vt0a9] {
color: #6B7280;
font-size: 0.7rem;
}
.filter-tag-remove[b-wpm33vt0a9] {
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
background: transparent;
border: none;
border-radius: 50%;
color: #9CA3AF;
cursor: pointer;
padding: 0;
transition: all 0.15s;
}
.filter-tag-remove:hover[b-wpm33vt0a9] {
background: rgba(220, 38, 38, 0.1);
color: var(--error-600);
}
.btn-clear-all[b-wpm33vt0a9] {
background: none;
border: none;
color: var(--brand-500);
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
padding: 4px 8px;
border-radius: 4px;
transition: background 0.15s;
}
.btn-clear-all:hover[b-wpm33vt0a9] {
background: rgba(15, 23, 42, 0.08);
}
/* Card & Table */
.card[b-wpm33vt0a9] {
background: white;
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 10px;
box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05);
overflow: hidden;
}
.table-responsive[b-wpm33vt0a9] {
overflow-x: auto;
margin: 0;
}
.policies-table[b-wpm33vt0a9] {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 0.875rem;
}
.policies-table thead[b-wpm33vt0a9] {
background-color: #F8FAFC;
position: sticky;
top: 0;
z-index: 1;
}
.policies-table thead th[b-wpm33vt0a9] {
padding: 12px 16px;
text-align: left;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #64748B;
border-bottom: 1px solid #E2E8F0;
white-space: nowrap;
user-select: none;
}
.policies-table thead th.sortable-header[b-wpm33vt0a9] {
cursor: pointer;
}
.policies-table thead th.sortable-header:hover[b-wpm33vt0a9] {
color: var(--brand-500);
background-color: #F1F5F9;
}
.policies-table thead th i[b-wpm33vt0a9] {
margin-left: 4px;
font-size: 0.65rem;
}
@keyframes fadeIn-b-wpm33vt0a9 {
from { opacity: 0; }
to { opacity: 1; }
}
.policies-table tbody tr[b-wpm33vt0a9] {
transition: all 0.12s ease;
border-left: 3px solid transparent;
background: white;
animation: fadeIn-b-wpm33vt0a9 0.3s ease-out forwards;
opacity: 0;
}
.policies-table tbody tr:nth-child(1)[b-wpm33vt0a9] { animation-delay: 50ms; }
.policies-table tbody tr:nth-child(2)[b-wpm33vt0a9] { animation-delay: 80ms; }
.policies-table tbody tr:nth-child(3)[b-wpm33vt0a9] { animation-delay: 110ms; }
.policies-table tbody tr:nth-child(4)[b-wpm33vt0a9] { animation-delay: 140ms; }
.policies-table tbody tr:nth-child(5)[b-wpm33vt0a9] { animation-delay: 170ms; }
.policies-table tbody tr:nth-child(even)[b-wpm33vt0a9] {
background-color: #FAFBFC;
}
.policies-table tbody tr:hover[b-wpm33vt0a9] {
background-color: #EFF6FF;
border-left: 3px solid var(--brand-500);
}
.policies-table tbody td[b-wpm33vt0a9] {
padding: 10px 16px;
border-bottom: 1px solid #F1F5F9;
vertical-align: middle;
color: #374151;
}
/* Cell Styles */
.policy-number[b-wpm33vt0a9] {
color: #DC2626;
font-weight: 600;
font-size: 0.875rem;
cursor: pointer;
}
.policy-number:hover[b-wpm33vt0a9] {
text-decoration: underline;
}
.policy-number-link[b-wpm33vt0a9] {
text-decoration: none;
color: #DC2626;
}
.policy-number-link:hover[b-wpm33vt0a9],
.policy-number-link:focus[b-wpm33vt0a9] {
text-decoration: underline;
color: #B91C1C;
}
.loan-number-text[b-wpm33vt0a9] {
font-weight: 500;
color: #6B7280;
font-size: 0.875rem;
}
.application-number-text[b-wpm33vt0a9] {
font-weight: 500;
color: #6B7280;
font-size: 0.875rem;
}
.borrower-name[b-wpm33vt0a9] {
font-weight: 500;
color: #1F2937;
}
.date-cell[b-wpm33vt0a9] {
color: #374151;
font-size: 0.875rem;
font-variant-numeric: tabular-nums;
}
.actions-cell[b-wpm33vt0a9] {
text-align: right;
}
/* Status Badges */
.status-badge[b-wpm33vt0a9] {
display: inline-flex;
align-items: center;
padding: 4px 10px;
font-size: 0.75rem;
font-weight: 600;
border-radius: 20px;
white-space: nowrap;
}
.status-active[b-wpm33vt0a9] {
background: #ECFDF5;
color: #059669;
}
.status-pending[b-wpm33vt0a9] {
background: #FEF3C7;
color: #D97706;
}
.status-expired[b-wpm33vt0a9] {
background: #F3F4F6;
color: #6B7280;
}
.status-cancelled[b-wpm33vt0a9] {
background: #FEE2E2;
color: #DC2626;
}
.status-inactive[b-wpm33vt0a9] {
background: #F3F4F6;
color: #9CA3AF;
}
.status-unknown[b-wpm33vt0a9] {
background: #F3F4F6;
color: #9CA3AF;
}
/* File Claim Button */
.btn-file-claim[b-wpm33vt0a9] {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 14px;
font-size: 0.8rem;
font-weight: 600;
color: #DC2626;
background-color: white;
border: 1px solid #FCA5A5;
border-radius: 6px;
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
}
.btn-file-claim:hover[b-wpm33vt0a9] {
background-color: #FEF2F2;
color: #B91C1C;
border-color: #DC2626;
}
.btn-view-claim[b-wpm33vt0a9] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
font-size: 0.72rem;
font-weight: 600;
color: #059669;
background: #ECFDF5;
border: 1px solid #A7F3D0;
border-radius: 20px;
white-space: nowrap;
cursor: pointer;
transition: all 0.15s ease;
}
.btn-view-claim:hover[b-wpm33vt0a9] {
background: #D1FAE5;
color: #047857;
border-color: #6EE7B7;
}
.btn-view-claim i[b-wpm33vt0a9] {
font-size: 0.7rem;
}
/* Loading & Empty States */
.loading-state[b-wpm33vt0a9] {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 40px 20px;
color: #6B7280;
}
.loading-state .spinner-border[b-wpm33vt0a9] {
width: 2rem;
height: 2rem;
}
/* Skeleton table rows */
@keyframes policy-skel-pulse-b-wpm33vt0a9 {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.table-row-skeleton td[b-wpm33vt0a9] {
padding: 0.875rem 0.75rem;
}
.row-skel[b-wpm33vt0a9] {
height: 1.0625rem;
width: 80px;
border-radius: 4px;
background: linear-gradient(90deg, var(--bs-tertiary-bg, #f0f0f0) 25%, var(--bs-secondary-bg, #e0e0e0) 50%, var(--bs-tertiary-bg, #f0f0f0) 75%);
background-size: 200% 100%;
animation: policy-skel-pulse-b-wpm33vt0a9 1.5s ease-in-out infinite;
}
.row-skel-badge[b-wpm33vt0a9] {
height: 1.25rem;
width: 90px;
border-radius: 9999px;
background: linear-gradient(90deg, var(--bs-tertiary-bg, #f0f0f0) 25%, var(--bs-secondary-bg, #e0e0e0) 50%, var(--bs-tertiary-bg, #f0f0f0) 75%);
background-size: 200% 100%;
animation: policy-skel-pulse-b-wpm33vt0a9 1.5s ease-in-out infinite;
}
.empty-state[b-wpm33vt0a9] {
text-align: center;
padding: 48px 32px !important;
color: #6B7280;
}
.empty-state i[b-wpm33vt0a9] {
font-size: 40px;
display: block;
margin-bottom: 12px;
color: #D1D5DB;
}
.empty-state span[b-wpm33vt0a9] {
font-size: 0.9rem;
color: #9CA3AF;
display: block;
}
.empty-state-hint[b-wpm33vt0a9] {
font-size: 0.8rem;
color: #9CA3AF;
margin: 8px 0 0 0;
}
/* Responsive */
@media (max-width: 992px) {
.filters-bar[b-wpm33vt0a9] {
flex-direction: column;
align-items: stretch;
}
.filters-left[b-wpm33vt0a9] {
max-width: none;
}
.inline-stats[b-wpm33vt0a9] {
flex-wrap: wrap;
}
}
@media (max-width: 768px) {
.page-header[b-wpm33vt0a9] {
flex-direction: column;
align-items: flex-start;
}
.inline-stats[b-wpm33vt0a9] {
width: 100%;
justify-content: flex-start;
}
}
/* Export Confirmation Modal Content */
.export-confirm-content[b-wpm33vt0a9] {
text-align: center;
padding: 4px 0;
}
.export-confirm-icon[b-wpm33vt0a9] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 14px;
background: linear-gradient(135deg, var(--brand-500), var(--brand-400));
margin-bottom: 18px;
box-shadow: 0 4px 12px rgba(0, 91, 159, 0.2);
}
.export-confirm-icon i[b-wpm33vt0a9] {
font-size: 26px;
color: white;
}
.export-confirm-message[b-wpm33vt0a9] {
font-size: 0.95rem;
color: var(--text-primary, #1F2937);
margin: 0 0 6px 0;
line-height: 1.5;
}
.export-confirm-message strong[b-wpm33vt0a9] {
color: var(--brand-600);
font-weight: 700;
}
.export-confirm-subtext[b-wpm33vt0a9] {
font-size: 0.875rem;
color: var(--text-muted, #6B7280);
margin: 0;
}
.export-confirm-warning[b-wpm33vt0a9] {
margin-top: 12px;
padding: 10px 16px;
background: var(--accent-50, #FFFBEB);
border: 1px solid var(--accent-300, #FCD34D);
border-radius: 8px;
font-size: 0.8rem;
color: var(--accent-800, #92400E);
display: flex;
align-items: center;
gap: 6px;
justify-content: center;
}
.export-confirm-warning i[b-wpm33vt0a9] {
font-size: 0.9rem;
color: var(--accent-600, #D97706);
}
/* /Components/Pages/BankPortal/ClaimDetailPage.razor.rz.scp.css */
.claim-detail-page[b-gudo210egc] {
padding: 16px 8px 80px;
max-width: 1280px;
margin: 0 auto;
}
.page-loading[b-gudo210egc] {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 80px 20px;
color: #6B7280;
}
/* Skeleton loading state */
@keyframes claim-skel-pulse-b-gudo210egc {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.skel-block[b-gudo210egc] {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: claim-skel-pulse-b-gudo210egc 1.5s ease-in-out infinite;
border-radius: 4px;
}
.claim-skeleton[b-gudo210egc] {
padding: 16px 8px 80px;
max-width: 1280px;
margin: 0 auto;
}
.skel-back-link[b-gudo210egc] {
margin-bottom: 1rem;
}
.skel-claim-hero[b-gudo210egc] {
display: flex;
align-items: flex-start;
gap: 1rem;
background: #fff;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
padding: 1.5rem;
margin-bottom: 1.5rem;
}
.skel-hero-icon[b-gudo210egc] {
width: 48px;
height: 48px;
border-radius: 12px;
flex-shrink: 0;
}
.skel-hero-body[b-gudo210egc] {
flex: 1;
}
.skel-hero-meta[b-gudo210egc] {
display: flex;
gap: 0.75rem;
align-items: center;
}
.skel-claim-grid[b-gudo210egc] {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1.5rem;
}
.skel-claim-main[b-gudo210egc] {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.skel-claim-aside[b-gudo210egc] {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.skel-detail-card[b-gudo210egc] {
background: #fff;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
padding: 1.5rem;
}
@media (max-width: 991.98px) {
.skel-claim-grid[b-gudo210egc] {
grid-template-columns: 1fr;
}
}
/* Not-found card — matches the visual language of the hero card */
.not-found-card[b-gudo210egc] {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 12px;
padding: 56px 32px;
background: linear-gradient(135deg, #ffffff 0%, #F8FAFC 100%);
border: 1px solid #E2E8F0;
border-radius: 16px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
max-width: 520px;
margin: 24px auto 0;
}
.not-found-icon[b-gudo210egc] {
width: 72px;
height: 72px;
border-radius: 18px;
background: linear-gradient(135deg, #FEF3C7, #FDE68A);
color: #B45309;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
margin-bottom: 4px;
}
.not-found-title[b-gudo210egc] {
font-size: 1.3rem;
font-weight: 700;
color: #0F172A;
margin: 0;
}
.not-found-body[b-gudo210egc] {
font-size: 0.9rem;
color: #64748B;
margin: 0;
line-height: 1.55;
max-width: 420px;
}
.not-found-code[b-gudo210egc] {
font-family: 'Inter', monospace;
background: #F1F5F9;
color: #0F172A;
padding: 1px 6px;
border-radius: 4px;
font-size: 0.85em;
}
.not-found-actions[b-gudo210egc] {
display: flex;
gap: 8px;
margin-top: 8px;
flex-wrap: wrap;
justify-content: center;
}
/* Back link */
.back-link[b-gudo210egc] {
margin-bottom: 12px;
}
.back-link a[b-gudo210egc] {
font-size: 0.78rem;
color: #64748B;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
}
.back-link a:hover[b-gudo210egc] {
color: #1E293B;
}
/* Hero card */
.claim-hero[b-gudo210egc] {
display: flex;
align-items: stretch;
gap: 18px;
padding: 22px 26px;
background: linear-gradient(135deg, #ffffff 0%, #F8FAFC 100%);
border: 1px solid #E2E8F0;
border-radius: 16px;
margin-bottom: 18px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.claim-hero-icon[b-gudo210egc] {
width: 64px;
height: 64px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.6rem;
flex-shrink: 0;
}
.hero-accent-warn[b-gudo210egc] {
background: linear-gradient(135deg, #FEF3C7, #FDE68A);
color: #B45309;
}
.hero-accent-info[b-gudo210egc] {
background: linear-gradient(135deg, #DBEAFE, #BFDBFE);
color: #1D4ED8;
}
.hero-accent-success[b-gudo210egc] {
background: linear-gradient(135deg, #D1FAE5, #A7F3D0);
color: #047857;
}
.hero-accent-danger[b-gudo210egc] {
background: linear-gradient(135deg, #FEE2E2, #FECACA);
color: #B91C1C;
}
.claim-hero-body[b-gudo210egc] {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.claim-hero-eyebrow[b-gudo210egc] {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 4px;
}
.claim-hero-tag[b-gudo210egc] {
font-size: 0.65rem;
letter-spacing: 1px;
color: #94A3B8;
font-weight: 700;
}
.claim-number[b-gudo210egc] {
font-size: 0.85rem;
color: #1E293B;
font-weight: 600;
font-family: 'Inter', monospace;
}
.claim-hero-title[b-gudo210egc] {
font-size: 1.45rem;
font-weight: 700;
color: #0F172A;
margin: 0 0 8px;
line-height: 1.2;
}
.claim-hero-meta[b-gudo210egc] {
display: flex;
flex-wrap: wrap;
gap: 14px 18px;
color: #64748B;
font-size: 0.82rem;
}
.claim-hero-meta-item[b-gudo210egc] {
display: inline-flex;
align-items: center;
gap: 5px;
}
.claim-hero-meta-item i[b-gudo210egc] {
color: #94A3B8;
font-size: 0.85rem;
}
.claim-hero-link[b-gudo210egc] {
color: #2563EB;
text-decoration: none;
font-weight: 500;
}
.claim-hero-link:hover[b-gudo210egc] {
text-decoration: underline;
}
/* Status badge */
.status-badge[b-gudo210egc] {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border-radius: 20px;
font-size: 0.72rem;
font-weight: 600;
white-space: nowrap;
}
.status-badge i[b-gudo210egc] {
font-size: 0.7rem;
}
.badge-draft[b-gudo210egc] { background: #F3F4F6; color: #6B7280; }
.badge-submitted[b-gudo210egc] { background: #FEF3C7; color: #92400E; }
.badge-review[b-gudo210egc] { background: #DBEAFE; color: #1E40AF; }
.badge-info-req[b-gudo210egc] { background: #FDE8E8; color: #9B1C1C; }
.badge-approved[b-gudo210egc] { background: #DCFCE7; color: #166534; }
.badge-denied[b-gudo210egc] { background: #FEE2E2; color: #991B1B; }
.badge-closed[b-gudo210egc] { background: #E5E7EB; color: #374151; }
/* Status action strip — Underwriter/Admin/Developer */
.status-actions[b-gudo210egc] {
background: white;
border: 1px solid #E5E7EB;
border-radius: 12px;
padding: 14px 18px;
margin-bottom: 14px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.status-actions-header[b-gudo210egc] {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.status-actions-label[b-gudo210egc] {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.82rem;
font-weight: 600;
color: #475569;
}
.status-actions-label i[b-gudo210egc] {
color: #94A3B8;
}
.status-actions-buttons[b-gudo210egc] {
display: flex;
gap: 8px;
flex-wrap: wrap;
flex: 1;
}
.status-action-btn[b-gudo210egc] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
border-radius: 8px;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
border: 1px solid transparent;
background: white;
transition: all 0.15s ease;
}
.status-action-btn i[b-gudo210egc] {
font-size: 0.85rem;
}
.status-action-btn:disabled[b-gudo210egc] {
opacity: 0.5;
cursor: not-allowed;
}
.status-action-btn.active[b-gudo210egc] {
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}
.status-action-btn-info[b-gudo210egc] { color: #1D4ED8; border-color: #BFDBFE; background: #EFF6FF; }
.status-action-btn-info:hover:not(:disabled)[b-gudo210egc] { background: #DBEAFE; border-color: #2563EB; }
.status-action-btn-warn[b-gudo210egc] { color: #B45309; border-color: #FDE68A; background: #FFFBEB; }
.status-action-btn-warn:hover:not(:disabled)[b-gudo210egc] { background: #FEF3C7; border-color: #D97706; }
.status-action-btn-success[b-gudo210egc] { color: #047857; border-color: #A7F3D0; background: #ECFDF5; }
.status-action-btn-success:hover:not(:disabled)[b-gudo210egc] { background: #D1FAE5; border-color: #059669; }
.status-action-btn-danger[b-gudo210egc] { color: #991B1B; border-color: #FECACA; background: #FEF2F2; }
.status-action-btn-danger:hover:not(:disabled)[b-gudo210egc] { background: #FEE2E2; border-color: #DC2626; }
.status-action-btn-neutral[b-gudo210egc] { color: #374151; border-color: #D1D5DB; background: #F9FAFB; }
.status-action-btn-neutral:hover:not(:disabled)[b-gudo210egc] { background: #F3F4F6; border-color: #6B7280; }
.status-actions-form[b-gudo210egc] {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid #F1F5F9;
display: flex;
flex-direction: column;
gap: 10px;
}
.status-actions-form-title[b-gudo210egc] {
font-size: 0.82rem;
color: #475569;
}
.status-actions-form-title strong[b-gudo210egc] {
color: #0F172A;
}
/* Two-column grid */
.claim-grid[b-gudo210egc] {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
gap: 18px;
align-items: start;
}
.claim-main[b-gudo210egc],
.claim-aside[b-gudo210egc] {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
}
.claim-aside[b-gudo210egc] {
position: sticky;
top: 16px;
}
@media (max-width: 980px) {
.claim-grid[b-gudo210egc] { grid-template-columns: 1fr; }
.claim-aside[b-gudo210egc] { position: static; }
}
/* Cards */
.detail-card[b-gudo210egc] {
background: white;
border: 1px solid #E5E7EB;
border-radius: 12px;
padding: 18px 20px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.detail-card-header[b-gudo210egc] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid #F1F5F9;
}
.detail-card-header-tight[b-gudo210egc] {
margin-bottom: 12px;
padding-bottom: 8px;
}
.detail-card-header h3[b-gudo210egc] {
font-size: 0.92rem;
font-weight: 600;
color: #0F172A;
margin: 0;
display: flex;
align-items: center;
gap: 8px;
}
.detail-card-header h3 i[b-gudo210egc] {
color: #64748B;
font-size: 0.95rem;
}
.card-count[b-gudo210egc] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
padding: 0 6px;
height: 22px;
border-radius: 11px;
background: #F1F5F9;
color: #475569;
font-size: 0.7rem;
font-weight: 700;
}
.btn-card-action[b-gudo210egc] {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 12px;
font-size: 0.78rem;
font-weight: 500;
color: #2563EB;
background: white;
border: 1px solid #BFDBFE;
border-radius: 6px;
cursor: pointer;
transition: all 0.15s ease;
}
.btn-card-action:hover[b-gudo210egc] {
background: #EFF6FF;
border-color: #2563EB;
}
/* Empty states */
.card-empty-soft[b-gudo210egc] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 24px 8px;
color: #94A3B8;
font-size: 0.82rem;
}
.card-empty-soft i[b-gudo210egc] {
font-size: 1.4rem;
color: #CBD5E1;
}
/* Detail grid */
.detail-grid[b-gudo210egc] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 24px;
}
.detail-item-full[b-gudo210egc] {
grid-column: 1 / -1;
}
.detail-item[b-gudo210egc] {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.detail-label[b-gudo210egc] {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #94A3B8;
font-weight: 600;
}
.detail-value[b-gudo210egc] {
font-size: 0.88rem;
color: #1E293B;
word-wrap: break-word;
}
.detail-multiline[b-gudo210egc] {
white-space: pre-wrap;
}
.detail-locked-hint[b-gudo210egc] {
margin-top: 14px;
padding: 10px 14px;
background: #F8FAFC;
border: 1px dashed #CBD5E1;
border-radius: 8px;
color: #64748B;
font-size: 0.78rem;
display: inline-flex;
align-items: center;
gap: 6px;
}
/* Forms (edit / add note / upload) */
.edit-form[b-gudo210egc],
.add-note[b-gudo210egc],
.upload-form[b-gudo210egc] {
display: flex;
flex-direction: column;
gap: 12px;
}
.upload-form[b-gudo210egc],
.add-note[b-gudo210egc] {
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid #F1F5F9;
}
.form-row[b-gudo210egc] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.form-group[b-gudo210egc] {
display: flex;
flex-direction: column;
gap: 4px;
}
.form-group-grow[b-gudo210egc] {
flex: 1;
}
.form-group label[b-gudo210egc] {
font-size: 0.74rem;
font-weight: 600;
color: #475569;
}
/* Normalize input heights — Bootstrap's form-select-sm reserves space for the chevron
which makes it appear taller next to a sibling form-control-sm input. Force a
consistent height + line-height so the two align in the same row. */
.upload-form .form-control[b-gudo210egc],
.upload-form .form-select[b-gudo210egc],
.edit-form .form-control[b-gudo210egc],
.edit-form .form-select[b-gudo210egc] {
min-height: 32px;
line-height: 1.4;
padding-top: 4px;
padding-bottom: 4px;
}
.upload-form textarea.form-control[b-gudo210egc],
.edit-form textarea.form-control[b-gudo210egc] {
min-height: auto;
}
.form-error[b-gudo210egc] {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 8px 10px;
background: #FEF2F2;
color: #B91C1C;
border-radius: 6px;
font-size: 0.78rem;
border: 1px solid #FECACA;
}
.form-actions[b-gudo210egc] {
display: flex;
justify-content: flex-end;
gap: 8px;
}
.upload-status[b-gudo210egc] {
color: #475569;
font-size: 0.82rem;
display: inline-flex;
align-items: center;
}
/* Notes */
.notes-list[b-gudo210egc] {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.note-item[b-gudo210egc] {
display: flex;
gap: 12px;
align-items: flex-start;
}
.note-avatar[b-gudo210egc] {
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, #DBEAFE, #BFDBFE);
color: #1D4ED8;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.74rem;
font-weight: 700;
flex-shrink: 0;
}
.note-body[b-gudo210egc] {
flex: 1;
min-width: 0;
background: #F8FAFC;
border: 1px solid #E2E8F0;
border-radius: 10px;
padding: 10px 12px;
}
.note-header[b-gudo210egc] {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 4px;
font-size: 0.74rem;
gap: 8px;
}
.note-author[b-gudo210egc] {
font-weight: 600;
color: #1E293B;
}
.note-date[b-gudo210egc] {
color: #94A3B8;
flex-shrink: 0;
}
.note-content[b-gudo210egc] {
font-size: 0.85rem;
color: #334155;
white-space: pre-wrap;
line-height: 1.5;
}
/* Documents — card-style rows instead of a table */
.docs-list[b-gudo210egc] {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.doc-item[b-gudo210egc] {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: #F8FAFC;
border: 1px solid #E2E8F0;
border-radius: 10px;
transition: all 0.15s;
}
.doc-item:hover[b-gudo210egc] {
border-color: #CBD5E1;
background: #F1F5F9;
}
.doc-icon[b-gudo210egc] {
width: 36px;
height: 36px;
border-radius: 8px;
background: white;
border: 1px solid #E2E8F0;
color: #475569;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.05rem;
flex-shrink: 0;
}
.doc-body[b-gudo210egc] {
flex: 1;
min-width: 0;
}
.doc-name[b-gudo210egc] {
font-size: 0.85rem;
font-weight: 600;
color: #1E293B;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.doc-meta[b-gudo210egc] {
margin-top: 2px;
font-size: 0.72rem;
color: #94A3B8;
display: flex;
flex-wrap: wrap;
gap: 4px;
align-items: center;
}
.doc-type[b-gudo210egc] {
font-weight: 600;
color: #64748B;
}
.doc-sep[b-gudo210egc] {
color: #CBD5E1;
}
.doc-description[b-gudo210egc] {
margin-top: 4px;
font-size: 0.78rem;
color: #475569;
}
.doc-action[b-gudo210egc] {
width: 34px;
height: 34px;
border-radius: 8px;
border: 1px solid #E2E8F0;
background: white;
color: #475569;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
flex-shrink: 0;
}
.doc-action:hover[b-gudo210egc] {
background: #2563EB;
color: white;
border-color: #2563EB;
}
/* Sidebar — Key facts */
.key-facts[b-gudo210egc] {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.key-fact[b-gudo210egc] {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
padding: 8px 0;
border-bottom: 1px solid #F1F5F9;
}
.key-fact:last-child[b-gudo210egc] {
border-bottom: none;
}
.key-fact dt[b-gudo210egc] {
font-size: 0.72rem;
color: #94A3B8;
font-weight: 500;
margin: 0;
flex-shrink: 0;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.key-fact dd[b-gudo210egc] {
margin: 0;
font-size: 0.84rem;
color: #1E293B;
text-align: right;
font-weight: 500;
word-break: break-word;
}
.key-fact-emph[b-gudo210egc] {
color: #047857 !important;
font-weight: 700 !important;
font-size: 0.92rem !important;
}
/* Sidebar — Timeline */
.timeline[b-gudo210egc] {
list-style: none;
margin: 0;
padding: 0 0 0 4px;
border-left: 2px solid #E2E8F0;
}
.timeline-item[b-gudo210egc] {
position: relative;
padding: 4px 0 14px 18px;
}
.timeline-item:last-child[b-gudo210egc] {
padding-bottom: 0;
}
.timeline-dot[b-gudo210egc] {
position: absolute;
left: -7px;
top: 7px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #94A3B8;
border: 2px solid white;
box-shadow: 0 0 0 1px #E2E8F0;
}
/* Color the dot per-status */
.timeline-dot.badge-draft[b-gudo210egc] { background: #9CA3AF; }
.timeline-dot.badge-submitted[b-gudo210egc] { background: #D97706; }
.timeline-dot.badge-review[b-gudo210egc] { background: #2563EB; }
.timeline-dot.badge-info-req[b-gudo210egc] { background: #DC2626; }
.timeline-dot.badge-approved[b-gudo210egc] { background: #059669; }
.timeline-dot.badge-denied[b-gudo210egc] { background: #B91C1C; }
.timeline-dot.badge-closed[b-gudo210egc] { background: #4B5563; }
.timeline-headline[b-gudo210egc] {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.timeline-date[b-gudo210egc] {
margin-top: 4px;
font-size: 0.72rem;
color: #64748B;
}
.timeline-notes[b-gudo210egc] {
margin-top: 4px;
font-size: 0.8rem;
color: #475569;
background: #F8FAFC;
border: 1px solid #F1F5F9;
border-radius: 6px;
padding: 6px 8px;
}
.timeline-author[b-gudo210egc] {
font-size: 0.7rem;
color: #94A3B8;
margin-top: 4px;
font-style: italic;
}
/* /Components/Pages/BankPortal/ClaimsPage.razor.rz.scp.css */
/* Header — matches admin pattern */
.content-header[b-p435z5tcg5] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.content-title[b-p435z5tcg5] {
font-size: 1.5rem;
font-weight: 700;
color: #1a1a2e;
margin: 0;
}
.content-subtitle[b-p435z5tcg5] {
font-size: 0.8rem;
color: #94A3B8;
margin: 2px 0 0;
}
.header-stats[b-p435z5tcg5] {
display: flex;
align-items: center;
gap: 8px;
}
.stat-pill[b-p435z5tcg5] {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: #F8FAFC;
border: 1px solid #E2E8F0;
border-radius: 20px;
font-size: 0.75rem;
color: #64748B;
}
.stat-pill i[b-p435z5tcg5] { font-size: 0.8rem; }
.stat-pill .stat-value[b-p435z5tcg5] { font-weight: 700; color: #1E293B; }
.stat-pill .stat-label[b-p435z5tcg5] { font-size: 0.6rem; letter-spacing: 0.5px; color: #94A3B8; }
.stat-pill.stat-primary[b-p435z5tcg5] { border-color: #BFDBFE; background: #EFF6FF; }
.stat-pill.stat-primary i[b-p435z5tcg5] { color: #3B82F6; }
.stat-pill.stat-warning[b-p435z5tcg5] { border-color: #FDE68A; background: #FFFBEB; }
.stat-pill.stat-warning i[b-p435z5tcg5] { color: #F59E0B; }
.stat-pill.stat-success[b-p435z5tcg5] { border-color: #A7F3D0; background: #ECFDF5; }
.stat-pill.stat-success i[b-p435z5tcg5] { color: #10B981; }
.stat-pill.stat-info[b-p435z5tcg5] { border-color: #BAE6FD; background: #F0F9FF; }
.stat-pill.stat-info i[b-p435z5tcg5] { color: #0284C7; }
.btn-header-action[b-p435z5tcg5] {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid #E2E8F0;
background: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #64748B;
transition: all 0.2s;
}
.btn-header-action:hover[b-p435z5tcg5] { background: #F1F5F9; color: #334155; }
/* Card with tabs */
.card-with-tabs[b-p435z5tcg5] {
border: 1px solid #E5E7EB;
border-radius: 12px;
background: white;
overflow: hidden;
}
/* Toolbar */
.card-toolbar[b-p435z5tcg5] {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-bottom: 1px solid #F1F5F9;
background: #FAFBFC;
}
.toolbar-search[b-p435z5tcg5] {
position: relative;
flex: 1;
max-width: 300px;
}
.toolbar-search i[b-p435z5tcg5] {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 0.75rem;
color: #94A3B8;
pointer-events: none;
}
.toolbar-search .form-control[b-p435z5tcg5] {
padding-left: 30px;
font-size: 0.8rem;
border-color: #E2E8F0;
height: 34px;
}
.toolbar-search .form-control:focus[b-p435z5tcg5] {
border-color: #93C5FD;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.toolbar-filters[b-p435z5tcg5] {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
}
.toolbar-btn[b-p435z5tcg5] {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.78rem;
white-space: nowrap;
height: 34px;
border-radius: 6px;
padding: 0 12px;
cursor: pointer;
border: none;
font-weight: 500;
transition: all 0.15s;
}
.btn-brand[b-p435z5tcg5] { background: var(--accent-color); color: white; }
.btn-brand:hover[b-p435z5tcg5] { filter: brightness(0.85); color: white; }
.btn-ghost[b-p435z5tcg5] { background: transparent; border: 1px solid #E2E8F0; color: #64748B; }
.btn-ghost:hover[b-p435z5tcg5] { background: #F1F5F9; color: #374151; }
/* Table */
.table-card[b-p435z5tcg5] { overflow: hidden; }
.table thead th[b-p435z5tcg5] {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #94A3B8;
font-weight: 600;
border-bottom: 1px solid #F1F5F9;
padding: 12px 16px;
white-space: nowrap;
background: white;
}
.table tbody td[b-p435z5tcg5] {
padding: 11px 16px;
vertical-align: middle;
border-bottom: 1px solid #F9FAFB;
font-size: 0.82rem;
}
.claim-row[b-p435z5tcg5] { cursor: pointer; transition: background 0.1s; }
.claim-row:hover[b-p435z5tcg5] { background: #F8FAFC !important; }
.claim-number[b-p435z5tcg5] { font-weight: 600; color: #0d6785; font-size: 0.8rem; }
.cell-text[b-p435z5tcg5] { color: #374151; font-weight: 500; }
.cell-date[b-p435z5tcg5] { color: #64748B; white-space: nowrap; font-size: 0.78rem; }
.cell-amount[b-p435z5tcg5] { color: #374151; font-weight: 600; white-space: nowrap; }
/* Status badges */
.status-badge[b-p435z5tcg5] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: 20px;
font-size: 0.72rem;
font-weight: 600;
white-space: nowrap;
}
.badge-draft[b-p435z5tcg5] { background: #F3F4F6; color: #6B7280; }
.badge-submitted[b-p435z5tcg5] { background: #FEF3C7; color: #92400E; }
.badge-review[b-p435z5tcg5] { background: #DBEAFE; color: #1E40AF; }
.badge-info-req[b-p435z5tcg5] { background: #FDE8E8; color: #9B1C1C; }
.badge-approved[b-p435z5tcg5] { background: #DCFCE7; color: #166534; }
.badge-denied[b-p435z5tcg5] { background: #FEE2E2; color: #991B1B; }
.badge-closed[b-p435z5tcg5] { background: #E5E7EB; color: #374151; }
/* Empty / Loading */
.table-empty[b-p435z5tcg5] {
padding: 60px 20px;
text-align: center;
color: #94A3B8;
}
.table-empty i[b-p435z5tcg5] { font-size: 2rem; margin-bottom: 8px; display: block; }
.table-empty p[b-p435z5tcg5] { margin: 0 0 8px; }
.table-empty-hint[b-p435z5tcg5] { font-size: 0.75rem; color: #CBD5E1; }
.table-loading[b-p435z5tcg5] {
padding: 40px 20px;
text-align: center;
color: #94A3B8;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 0.85rem;
}
/* Skeleton table rows */
@keyframes claims-skel-pulse-b-p435z5tcg5 {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.table-row-skeleton td[b-p435z5tcg5] {
padding: 0.875rem 0.75rem;
}
.row-skel[b-p435z5tcg5] {
height: 1.0625rem;
width: 80px;
border-radius: 4px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: claims-skel-pulse-b-p435z5tcg5 1.5s ease-in-out infinite;
}
.row-skel-badge[b-p435z5tcg5] {
height: 1.25rem;
width: 90px;
border-radius: 9999px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: claims-skel-pulse-b-p435z5tcg5 1.5s ease-in-out infinite;
}
/* Animations */
@keyframes spin-b-p435z5tcg5 {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinning[b-p435z5tcg5] { animation: spin-b-p435z5tcg5 1s linear infinite; }
/* Responsive */
@media (max-width: 768px) {
.content-header[b-p435z5tcg5] {
flex-direction: column;
gap: 12px;
align-items: flex-start;
}
.header-stats[b-p435z5tcg5] {
width: 100%;
overflow-x: auto;
}
.card-toolbar[b-p435z5tcg5] { flex-wrap: wrap; }
.toolbar-search[b-p435z5tcg5] { max-width: 100%; }
.toolbar-filters[b-p435z5tcg5] { margin-left: 0; }
}
/* /Components/Pages/BankPortal/DashboardPage.razor.rz.scp.css */
/* ========================================
Bank Dashboard - Professional Financial UI
Inspired by Modern FinTech Design Systems
======================================== */
/* Header fade-in animation */
@keyframes headerFadeIn-b-e5r1ui6r9h {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Dashboard Header */
.dashboard-header[b-e5r1ui6r9h] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1.75rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid var(--border-light);
animation: headerFadeIn-b-e5r1ui6r9h 0.4s ease-out;
}
.dashboard-header h1[b-e5r1ui6r9h] {
font-size: 1.75rem;
font-weight: 700;
color: var(--text-primary, #0F172A);
margin-bottom: 0.25rem;
letter-spacing: -0.025em;
}
.dashboard-header .subtitle[b-e5r1ui6r9h] {
color: var(--text-muted, #64748B);
font-size: 0.9375rem;
font-weight: 500;
}
.dashboard-header .btn[b-e5r1ui6r9h] {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 500;
padding: 0.5rem 1rem;
border-radius: var(--radius-md, 8px);
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
/* Dashboard cards base */
.dashboard-card[b-e5r1ui6r9h] {
background: var(--bg-surface, #FFFFFF);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg, 12px);
box-shadow: var(--shadow-xs, 0 1px 2px 0 rgba(15, 23, 42, 0.05));
transition: all var(--transition-base, 200ms ease);
}
.dashboard-card:hover[b-e5r1ui6r9h] {
box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(15, 23, 42, 0.12));
border-color: var(--border-medium);
}
/* Skeleton loading animation */
.skeleton-block[b-e5r1ui6r9h] {
background: linear-gradient(90deg,
var(--neutral-100) 25%,
var(--neutral-200) 50%,
var(--neutral-100) 75%);
background-size: 200% 100%;
animation: skeleton-pulse-b-e5r1ui6r9h 1.5s ease-in-out infinite;
border-radius: var(--radius-sm, 4px);
}
@keyframes skeleton-pulse-b-e5r1ui6r9h {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Policy & Claims stats */
.policy-stats .policy-stat-item[b-e5r1ui6r9h],
.claims-stats .claims-stat-item[b-e5r1ui6r9h] {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.policy-stats .stat-value[b-e5r1ui6r9h],
.claims-stats .stat-value[b-e5r1ui6r9h] {
font-size: 2.5rem;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.025em;
}
.policy-stats .stat-label[b-e5r1ui6r9h],
.claims-stats .stat-label[b-e5r1ui6r9h] {
font-size: 0.875rem;
font-weight: 500;
color: var(--text-muted, #64748B);
}
/* Action items */
.action-items-list[b-e5r1ui6r9h] {
max-height: 340px;
overflow-y: auto;
padding-right: 0.25rem;
}
.action-items-list[b-e5r1ui6r9h]::-webkit-scrollbar {
width: 4px;
}
.action-items-list[b-e5r1ui6r9h]::-webkit-scrollbar-track {
background: var(--neutral-100);
border-radius: 2px;
}
.action-items-list[b-e5r1ui6r9h]::-webkit-scrollbar-thumb {
background: var(--neutral-300);
border-radius: 2px;
}
.action-item[b-e5r1ui6r9h] {
padding: 1rem;
border-radius: var(--radius-md, 8px);
background: var(--neutral-50);
border: 1px solid transparent;
margin-bottom: 0.75rem;
transition: all var(--transition-fast, 160ms ease);
}
.action-item:hover[b-e5r1ui6r9h] {
background: var(--bg-surface, #FFFFFF);
border-color: var(--brand-200);
box-shadow: var(--shadow-sm);
}
.action-item:last-child[b-e5r1ui6r9h] {
margin-bottom: 0;
}
.action-item-header[b-e5r1ui6r9h] {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.375rem;
}
.action-item-header .application-number[b-e5r1ui6r9h] {
font-weight: 600;
font-size: 0.9375rem;
color: var(--brand-700);
}
.action-item-borrower[b-e5r1ui6r9h] {
font-size: 0.875rem;
color: var(--text-secondary, #475569);
margin-bottom: 0.625rem;
font-weight: 500;
}
.action-item-footer[b-e5r1ui6r9h] {
display: flex;
align-items: center;
justify-content: space-between;
}
.action-item-footer .btn[b-e5r1ui6r9h] {
font-size: 0.8125rem;
padding: 0.375rem 0.75rem;
font-weight: 600;
}
/* Activity feed */
.activity-feed[b-e5r1ui6r9h] {
max-height: 320px;
overflow-y: auto;
padding-right: 0.25rem;
}
.activity-feed[b-e5r1ui6r9h]::-webkit-scrollbar {
width: 4px;
}
.activity-feed[b-e5r1ui6r9h]::-webkit-scrollbar-track {
background: var(--neutral-100);
border-radius: 2px;
}
.activity-feed[b-e5r1ui6r9h]::-webkit-scrollbar-thumb {
background: var(--neutral-300);
border-radius: 2px;
}
.activity-item[b-e5r1ui6r9h] {
display: flex;
align-items: flex-start;
gap: 0.875rem;
padding: 0.875rem 0;
border-bottom: 1px solid var(--neutral-100);
}
.activity-item:last-child[b-e5r1ui6r9h] {
border-bottom: none;
}
.activity-avatar[b-e5r1ui6r9h] {
width: 42px;
height: 42px;
border-radius: 50%;
background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 100%);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8125rem;
font-weight: 700;
flex-shrink: 0;
letter-spacing: 0.025em;
}
.activity-content[b-e5r1ui6r9h] {
flex: 1;
min-width: 0;
}
.activity-user[b-e5r1ui6r9h] {
font-weight: 600;
font-size: 0.9375rem;
color: var(--text-primary, #0F172A);
margin-bottom: 0.125rem;
}
.activity-action[b-e5r1ui6r9h] {
font-size: 0.875rem;
color: var(--text-secondary, #475569);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.activity-time[b-e5r1ui6r9h] {
font-size: 0.75rem;
color: var(--text-muted, #64748B);
font-weight: 500;
margin-top: 0.25rem;
}
/* Empty states */
.empty-state[b-e5r1ui6r9h] {
padding: 2.5rem 1.5rem;
text-align: center;
}
.empty-state i[b-e5r1ui6r9h] {
font-size: 3rem;
opacity: 0.4;
margin-bottom: 0.75rem;
}
.empty-state p[b-e5r1ui6r9h] {
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 0.25rem;
}
.empty-state small[b-e5r1ui6r9h] {
color: var(--text-muted);
}
/* Quick actions */
.quick-actions-card[b-e5r1ui6r9h] {
background: var(--bg-surface, #FFFFFF);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg, 12px);
box-shadow: var(--shadow-xs);
padding: 1.25rem;
height: 100%;
animation: fadeUp-b-e5r1ui6r9h 0.5s ease-out forwards;
animation-delay: 200ms;
opacity: 0;
}
@keyframes fadeUp-b-e5r1ui6r9h {
from {
opacity: 0;
transform: translateY(15px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes popIn-b-e5r1ui6r9h {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
.quick-actions-card h5[b-e5r1ui6r9h] {
font-weight: 700;
color: var(--text-primary);
font-size: 1rem;
letter-spacing: -0.01em;
}
.quick-actions-row[b-e5r1ui6r9h] {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--border-light);
}
.quick-actions-row h5[b-e5r1ui6r9h] {
font-weight: 700;
color: var(--text-primary);
font-size: 1.125rem;
letter-spacing: -0.01em;
}
.quick-action-card[b-e5r1ui6r9h] {
text-align: center;
padding: 1.25rem 1rem;
border-radius: var(--radius-lg, 12px);
background: var(--bg-surface, #FFFFFF);
border: 1px solid var(--border-light);
box-shadow: var(--shadow-xs);
transition: all var(--transition-fast, 160ms ease);
cursor: pointer;
text-decoration: none;
color: inherit;
display: block;
animation: popIn-b-e5r1ui6r9h 0.4s ease-out forwards;
opacity: 0;
}
/* Staggered animation delays for quick action cards */
.quick-actions-card .row > div:nth-child(1) .quick-action-card[b-e5r1ui6r9h] { animation-delay: 300ms; }
.quick-actions-card .row > div:nth-child(2) .quick-action-card[b-e5r1ui6r9h] { animation-delay: 400ms; }
.quick-actions-card .row > div:nth-child(3) .quick-action-card[b-e5r1ui6r9h] { animation-delay: 500ms; }
.quick-actions-card .row > div:nth-child(4) .quick-action-card[b-e5r1ui6r9h] { animation-delay: 600ms; }
.quick-action-card:hover[b-e5r1ui6r9h] {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
border-color: var(--brand-300);
color: inherit;
text-decoration: none;
}
.quick-action-icon[b-e5r1ui6r9h] {
width: 48px;
height: 48px;
border-radius: var(--radius-md, 8px);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
margin: 0 auto 0.75rem;
transition: transform var(--transition-fast);
}
.quick-action-card:hover .quick-action-icon[b-e5r1ui6r9h] {
transform: scale(1.05);
}
.quick-action-title[b-e5r1ui6r9h] {
font-weight: 700;
font-size: 0.875rem;
margin-bottom: 0.25rem;
color: var(--text-primary);
}
.quick-action-desc[b-e5r1ui6r9h] {
font-size: 0.75rem;
color: var(--text-muted, #64748B);
font-weight: 500;
}
/* Chart container */
.chart-container[b-e5r1ui6r9h] {
position: relative;
width: 100%;
}
/* Spin animation */
.spin[b-e5r1ui6r9h] {
animation: spin-b-e5r1ui6r9h 1s linear infinite;
}
@keyframes spin-b-e5r1ui6r9h {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Card section headers */
.card-subtitle[b-e5r1ui6r9h] {
font-weight: 700 !important;
font-size: 0.9375rem !important;
color: var(--text-primary) !important;
display: flex;
align-items: center;
}
.card-subtitle i[b-e5r1ui6r9h] {
color: var(--brand-500);
font-size: 1.125rem;
}
/* Status badges */
.badge[b-e5r1ui6r9h] {
font-weight: 600;
font-size: 0.6875rem;
padding: 0.25rem 0.625rem;
border-radius: var(--radius-pill, 9999px);
letter-spacing: 0.02em;
}
/* Responsive adjustments */
@media (max-width: 991.98px) {
.dashboard-header[b-e5r1ui6r9h] {
flex-direction: column;
gap: 1rem;
}
.dashboard-header .btn[b-e5r1ui6r9h] {
align-self: flex-start;
}
}
@media (max-width: 767.98px) {
.metric-card[b-e5r1ui6r9h] {
padding: 1rem;
}
.metric-icon[b-e5r1ui6r9h] {
width: 44px;
height: 44px;
font-size: 1.125rem;
}
.metric-value[b-e5r1ui6r9h] {
font-size: 1.5rem;
}
.action-items-list[b-e5r1ui6r9h],
.activity-feed[b-e5r1ui6r9h] {
max-height: 280px;
}
.quick-action-card[b-e5r1ui6r9h] {
padding: 1.25rem 1rem;
}
.quick-action-icon[b-e5r1ui6r9h] {
width: 50px;
height: 50px;
font-size: 1.25rem;
}
}
/* /Components/Pages/BankPortal/NewClaimPage.razor.rz.scp.css */
/* Header */
.content-header[b-tzjc8aa2pd] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.content-title[b-tzjc8aa2pd] {
font-size: 1.5rem;
font-weight: 700;
color: #1a1a2e;
margin: 0;
}
.content-subtitle[b-tzjc8aa2pd] {
font-size: 0.8rem;
color: #94A3B8;
margin: 2px 0 0;
}
.btn-back[b-tzjc8aa2pd] {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.82rem;
font-weight: 500;
color: #64748B;
text-decoration: none;
padding: 8px 14px;
border: 1px solid #E2E8F0;
border-radius: 8px;
transition: all 0.15s;
}
.btn-back:hover[b-tzjc8aa2pd] {
background: #F1F5F9;
color: #334155;
border-color: #CBD5E1;
}
/* Form Card */
.form-card[b-tzjc8aa2pd] {
background: white;
border: 1px solid #E5E7EB;
border-radius: 12px;
overflow: hidden;
max-width: 720px;
}
/* Application info bar */
.app-info-bar[b-tzjc8aa2pd] {
display: flex;
gap: 24px;
padding: 14px 24px;
background: #F8FAFC;
border-bottom: 1px solid #F1F5F9;
}
.app-info-item[b-tzjc8aa2pd] {
display: flex;
flex-direction: column;
gap: 2px;
}
.app-info-label[b-tzjc8aa2pd] {
font-size: 0.6rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #94A3B8;
}
.app-info-value[b-tzjc8aa2pd] {
font-size: 0.82rem;
font-weight: 600;
color: #1E293B;
}
/* Form body */
.form-body[b-tzjc8aa2pd] {
padding: 24px;
display: flex;
flex-direction: column;
gap: 18px;
}
.form-group[b-tzjc8aa2pd] {
display: flex;
flex-direction: column;
gap: 4px;
}
.form-label[b-tzjc8aa2pd] {
font-size: 0.8rem;
font-weight: 600;
color: #334155;
}
.form-label .required[b-tzjc8aa2pd] {
color: #EF4444;
}
.form-row-2[b-tzjc8aa2pd] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.form-control[b-tzjc8aa2pd] {
font-size: 0.85rem;
border-color: #E2E8F0;
}
.form-control:focus[b-tzjc8aa2pd] {
border-color: #93C5FD;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
/* Form footer */
.form-footer[b-tzjc8aa2pd] {
padding: 16px 24px;
border-top: 1px solid #F1F5F9;
background: #FAFBFC;
}
.form-actions[b-tzjc8aa2pd] {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 10px;
}
.btn-cancel[b-tzjc8aa2pd] {
font-size: 0.82rem;
font-weight: 500;
color: #64748B;
text-decoration: none;
padding: 8px 16px;
border-radius: 8px;
transition: all 0.15s;
}
.btn-cancel:hover[b-tzjc8aa2pd] {
background: #F1F5F9;
color: #334155;
}
.btn-submit[b-tzjc8aa2pd] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 20px;
background: var(--accent-color);
color: white;
border: none;
border-radius: 8px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}
.btn-submit:hover:not(:disabled)[b-tzjc8aa2pd] {
filter: brightness(1.1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.btn-submit:disabled[b-tzjc8aa2pd] {
opacity: 0.5;
cursor: not-allowed;
}
.form-error[b-tzjc8aa2pd] {
display: flex;
align-items: center;
gap: 6px;
color: #DC2626;
font-size: 0.8rem;
margin-bottom: 12px;
}
/* States */
.loading-state[b-tzjc8aa2pd],
.error-state[b-tzjc8aa2pd] {
padding: 60px 20px;
text-align: center;
color: #94A3B8;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
/* Skeleton loading state */
@keyframes newclaim-skel-pulse-b-tzjc8aa2pd {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.skel-block[b-tzjc8aa2pd] {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: newclaim-skel-pulse-b-tzjc8aa2pd 1.5s ease-in-out infinite;
border-radius: 4px;
}
.skel-info-bar[b-tzjc8aa2pd] {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
padding: 1rem 1.25rem;
background: #f8fafc;
border-radius: 8px;
margin-bottom: 1.5rem;
}
.skel-info-item[b-tzjc8aa2pd] {
display: flex;
flex-direction: column;
}
.skel-form-body[b-tzjc8aa2pd] {
padding: 0 1.25rem;
}
.skel-form-row[b-tzjc8aa2pd] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 20px;
}
.skel-form-group[b-tzjc8aa2pd] {
display: flex;
flex-direction: column;
}
.skel-form-footer[b-tzjc8aa2pd] {
display: flex;
justify-content: flex-end;
gap: 0.75rem;
padding: 1rem 1.25rem;
border-top: 1px solid #e9ecef;
margin-top: 1.5rem;
}
@media (max-width: 575.98px) {
.skel-info-bar[b-tzjc8aa2pd] {
grid-template-columns: repeat(2, 1fr);
}
.skel-form-row[b-tzjc8aa2pd] {
grid-template-columns: 1fr;
}
}
.error-state i[b-tzjc8aa2pd] {
font-size: 2rem;
color: #F59E0B;
}
.success-card[b-tzjc8aa2pd] {
max-width: 480px;
}
.success-state[b-tzjc8aa2pd] {
padding: 48px 24px;
text-align: center;
}
.success-state i[b-tzjc8aa2pd] {
font-size: 3rem;
color: #10B981;
display: block;
margin-bottom: 12px;
}
.success-state h3[b-tzjc8aa2pd] {
font-size: 1.1rem;
font-weight: 700;
color: #1E293B;
margin: 0 0 4px;
}
.success-state p[b-tzjc8aa2pd] {
color: #64748B;
font-size: 0.85rem;
margin: 0 0 20px;
}
.success-actions[b-tzjc8aa2pd] {
display: flex;
gap: 10px;
justify-content: center;
}
/* Responsive */
@media (max-width: 640px) {
.app-info-bar[b-tzjc8aa2pd] {
flex-wrap: wrap;
gap: 12px;
}
.form-row-2[b-tzjc8aa2pd] {
grid-template-columns: 1fr;
}
}
/* /Components/Pages/BankPortal/ReferralResponsePage.razor.rz.scp.css */
.referral-response-page[b-keverbepb1] {
max-width: 980px;
padding-bottom: 4rem;
}
.referral-response-header[b-keverbepb1] {
padding: 1.5rem 0 1rem;
}
.referral-response-back[b-keverbepb1] {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 0.9rem 0.35rem 0.4rem;
border: 1px solid #e2e8f0;
border-radius: 999px;
background: #fff;
color: #475569;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
margin-bottom: 0.35rem;
}
.referral-response-back-icon[b-keverbepb1] {
width: 24px;
height: 24px;
border-radius: 50%;
background: #f1f5f9;
color: #475569;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
transition: all 0.15s;
}
.referral-response-back:hover[b-keverbepb1] {
border-color: #cbd5e1;
color: #0f172a;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}
.referral-response-back:hover .referral-response-back-icon[b-keverbepb1] {
background: #0f172a;
color: #fff;
transform: translateX(-2px);
}
.referral-response-back:focus-visible[b-keverbepb1] {
outline: none;
box-shadow: 0 0 0 3px rgba(13, 103, 133, 0.2);
}
.referral-response-title[b-keverbepb1] {
font-size: 1.5rem;
font-weight: 700;
color: #111827;
margin: 0.5rem 0 0.15rem;
}
.referral-response-subtitle[b-keverbepb1] {
color: #6b7280;
margin: 0;
}
/* ---- Why-this-was-referred banner ---- */
.referral-response-banner[b-keverbepb1] {
background: #fffbeb;
border: 1px solid #f59e0b;
border-radius: 12px;
padding: 1rem 1.25rem;
margin-bottom: 1.25rem;
}
.referral-response-banner-head[b-keverbepb1] {
display: flex;
gap: 0.6rem;
align-items: flex-start;
color: #78350f;
}
.referral-response-banner-head i[b-keverbepb1] {
font-size: 1.1rem;
color: #d97706;
margin-top: 0.1rem;
}
.referral-response-banner-meta[b-keverbepb1] {
font-size: 0.8rem;
color: #92400e;
}
.referral-response-reasons[b-keverbepb1] {
margin: 0.75rem 0 0;
padding-left: 2.1rem;
color: #78350f;
font-size: 0.9rem;
}
.referral-response-message[b-keverbepb1] {
margin-top: 0.75rem;
background: #fef3c7;
border-radius: 8px;
padding: 0.6rem 0.9rem;
font-style: italic;
color: #78350f;
font-size: 0.9rem;
}
.referral-response-instructions[b-keverbepb1] {
margin: 0.75rem 0 0;
color: #92400e;
font-size: 0.85rem;
}
/* ---- Section cards ---- */
.referral-response-card[b-keverbepb1] {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
margin-bottom: 1.25rem;
overflow: hidden;
}
.referral-response-card-head[b-keverbepb1] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.85rem 1.25rem;
border-bottom: 1px solid #eef2f6;
background: #fafbfc;
}
.referral-response-card-head-text[b-keverbepb1] {
display: flex;
align-items: center;
gap: 0.55rem;
font-size: 0.9rem;
font-weight: 700;
color: #0f172a;
}
.referral-response-card-head-text i[b-keverbepb1] {
color: #64748b;
}
/* The card-head label doubles as the collapse toggle on the summary panel. Reset the button
chrome only — .referral-response-card-head-text still supplies the layout and typography, and
its `i { color }` rule already covers the chevron. */
.referral-response-summary-toggle[b-keverbepb1] {
background: none;
border: none;
padding: 0;
font-family: inherit;
text-align: left;
cursor: pointer;
}
.referral-response-summary-toggle:hover i[b-keverbepb1] {
color: var(--brand-500, #0d6785);
}
.referral-response-summary-toggle:focus-visible[b-keverbepb1] {
outline: none;
box-shadow: 0 0 0 3px rgba(13, 103, 133, 0.2);
border-radius: 6px;
}
/* Keeps the pill and Download PDF together on the right of the always-visible header row. */
.referral-response-card-head-actions[b-keverbepb1] {
display: flex;
align-items: center;
gap: 0.6rem;
}
.referral-response-readonly-pill[b-keverbepb1],
.referral-response-required-pill[b-keverbepb1] {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.72rem;
font-weight: 600;
padding: 0.2rem 0.6rem;
border-radius: 20px;
}
.referral-response-readonly-pill[b-keverbepb1] {
background: #f1f5f9;
color: #64748b;
}
.referral-response-required-pill[b-keverbepb1] {
background: #fef3c7;
color: #b45309;
}
/* ---- Embedded read-only summary ----
The summary tab is the underwriter component reused as reference material; trim it for
this context: no duplicate tagged-referral panel (the page banner owns that story) and
no VERAcheck/side-panel column (underwriting workflow, meaningless while responding). */
.referral-response-summary-body[b-keverbepb1] {
padding: 0.5rem 1.25rem 1rem;
}
.referral-response-summary-body[b-keverbepb1] .col-4 {
display: none;
}
.referral-response-summary-body[b-keverbepb1] .col-8 {
width: 100%;
flex: 0 0 100%;
max-width: 100%;
}
.referral-response-summary-body[b-keverbepb1] .referral-alert {
display: none;
}
/* The tab's own "Download PDF" now lives on this panel's header row (always visible, including
while collapsed), so hide the in-body duplicate. The "Application Summary" heading stays. */
.referral-response-summary-body[b-keverbepb1] .document-header .action-link {
display: none;
}
.referral-response-summary-body[b-keverbepb1] .summary-document {
border: none;
box-shadow: none;
padding-left: 0;
padding-right: 0;
}
/* ---- Questionnaire ---- */
.referral-response-questionnaire-body[b-keverbepb1] {
padding: 1rem 1.25rem 1.25rem;
}
/* ---- Validation summary ---- */
.referral-response-errors[b-keverbepb1] {
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 12px;
padding: 0.9rem 1.15rem;
margin-bottom: 1.25rem;
color: #b91c1c;
font-size: 0.875rem;
}
.referral-response-errors-head[b-keverbepb1] {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.4rem;
}
.referral-response-errors ul[b-keverbepb1] {
margin: 0;
padding-left: 1.6rem;
}
/* ---- Action bar ---- */
.referral-response-actions[b-keverbepb1] {
display: flex;
align-items: center;
gap: 0.75rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
padding: 1rem 1.25rem;
}
.referral-response-actions-hint[b-keverbepb1] {
flex: 1;
font-size: 0.8rem;
color: #94a3b8;
}
.rr-btn[b-keverbepb1] {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1.3rem;
border-radius: 10px;
font-size: 0.875rem;
font-weight: 600;
border: none;
cursor: pointer;
transition: all 0.15s;
font-family: inherit;
}
.rr-btn:disabled[b-keverbepb1] {
opacity: 0.55;
cursor: not-allowed;
}
.rr-btn-ghost[b-keverbepb1] {
background: transparent;
color: #64748b;
border: 1px solid #e2e8f0;
}
.rr-btn-ghost:hover:not(:disabled)[b-keverbepb1] {
background: #f1f5f9;
color: #0f172a;
}
.rr-btn-primary[b-keverbepb1] {
background: var(--brand-500, #0d6785);
color: #fff;
}
.rr-btn-primary:hover:not(:disabled)[b-keverbepb1] {
background: #0a526a;
}
@media (max-width: 640px) {
.referral-response-actions[b-keverbepb1] {
flex-wrap: wrap;
}
.referral-response-actions-hint[b-keverbepb1] {
flex-basis: 100%;
order: 3;
text-align: center;
}
.rr-btn[b-keverbepb1] {
flex: 1;
justify-content: center;
}
}
/* /Components/Pages/BankPortal/UserDetailPage.razor.rz.scp.css */
/* ========================================
User Detail Page Styles
======================================== */
/* ========================================
Animations
======================================== */
@keyframes fadeIn-b-1njnsji0pt {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeInUp-b-1njnsji0pt {
from {
opacity: 0;
transform: translateY(15px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInDown-b-1njnsji0pt {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes scaleIn-b-1njnsji0pt {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes slideInLeft-b-1njnsji0pt {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes pulse-b-1njnsji0pt {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
/* Loading & Error States */
.loading-container[b-1njnsji0pt],
.error-container[b-1njnsji0pt] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 400px;
gap: 1rem;
padding: 2rem;
text-align: center;
animation: fadeIn-b-1njnsji0pt 0.3s ease-out;
}
.loading-container p[b-1njnsji0pt] {
color: #64748b;
font-size: 0.9375rem;
animation: pulse-b-1njnsji0pt 1.5s ease-in-out infinite;
}
/* Skeleton loading state */
@keyframes user-skel-pulse-b-1njnsji0pt {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.skel-block[b-1njnsji0pt] {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: user-skel-pulse-b-1njnsji0pt 1.5s ease-in-out infinite;
border-radius: 4px;
}
.user-skeleton[b-1njnsji0pt] {
padding: 1rem;
}
.skel-user-header[b-1njnsji0pt] {
background: #fff;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
padding: 1.5rem;
margin-bottom: 1.5rem;
}
.skel-back-row[b-1njnsji0pt] {
margin-bottom: 1.25rem;
}
.skel-header-content[b-1njnsji0pt] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.5rem;
}
.skel-header-left[b-1njnsji0pt] {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.skel-avatar[b-1njnsji0pt] {
width: 56px;
height: 56px;
border-radius: 50%;
flex-shrink: 0;
}
.skel-title-section[b-1njnsji0pt] {
flex: 1;
}
.skel-action-btn[b-1njnsji0pt] {
width: 100px;
height: 36px;
border-radius: 8px;
}
.skel-stats-row[b-1njnsji0pt] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-bottom: 1.25rem;
}
.skel-stat-card[b-1njnsji0pt] {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
border: 1px solid #e9ecef;
border-radius: 8px;
}
.skel-stat-icon[b-1njnsji0pt] {
width: 40px;
height: 40px;
border-radius: 8px;
flex-shrink: 0;
}
.skel-stat-content[b-1njnsji0pt] {
display: flex;
flex-direction: column;
}
.skel-tabs-row[b-1njnsji0pt] {
display: flex;
gap: 0.5rem;
border-bottom: 1px solid #e9ecef;
padding-bottom: 0.75rem;
}
.skel-overview-grid[b-1njnsji0pt] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.skel-detail-card[b-1njnsji0pt] {
background: #fff;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
padding: 1.5rem;
}
@media (max-width: 767.98px) {
.skel-stats-row[b-1njnsji0pt] {
grid-template-columns: 1fr;
}
.skel-overview-grid[b-1njnsji0pt] {
grid-template-columns: 1fr;
}
.skel-header-content[b-1njnsji0pt] {
flex-direction: column;
}
}
.error-container .error-icon[b-1njnsji0pt] {
width: 80px;
height: 80px;
border-radius: 50%;
background: #fef2f2;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.5rem;
}
.error-container .error-icon i[b-1njnsji0pt] {
font-size: 2.5rem;
color: #ef4444;
}
.error-container h2[b-1njnsji0pt] {
font-size: 1.5rem;
font-weight: 600;
color: #0f172a;
margin: 0;
}
.error-container p[b-1njnsji0pt] {
color: #64748b;
margin: 0 0 1.5rem 0;
}
/* Header */
.user-detail-header[b-1njnsji0pt] {
background: white;
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 1.5rem;
border: 1px solid rgba(15, 23, 42, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
animation: fadeInDown-b-1njnsji0pt 0.4s ease-out;
}
.header-nav[b-1njnsji0pt] {
margin-bottom: 1rem;
}
.back-link[b-1njnsji0pt] {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
color: #64748b;
text-decoration: none;
transition: all 0.2s ease;
}
.back-link:hover[b-1njnsji0pt] {
color: var(--brand-500);
transform: translateX(-3px);
}
.back-link i[b-1njnsji0pt] {
font-size: 1rem;
}
.header-content[b-1njnsji0pt] {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.header-left[b-1njnsji0pt] {
display: flex;
flex-direction: row;
align-items: center;
gap: 1rem;
flex: 1;
min-width: 0;
}
.user-avatar-lg[b-1njnsji0pt] {
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, #10B981, #059669);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
animation: scaleIn-b-1njnsji0pt 0.4s ease-out;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.user-avatar-lg:hover[b-1njnsji0pt] {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
.user-avatar-lg img[b-1njnsji0pt] {
width: 100%;
height: 100%;
object-fit: cover;
}
.user-avatar-lg span[b-1njnsji0pt] {
font-size: 1.125rem;
font-weight: 600;
color: white;
}
.user-title-section[b-1njnsji0pt] {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
min-width: 0;
flex: 1;
}
.user-name-row[b-1njnsji0pt] {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.user-name-row h1[b-1njnsji0pt] {
font-size: 1.25rem;
font-weight: 700;
color: #1F2937;
margin: 0;
white-space: nowrap;
}
.user-meta[b-1njnsji0pt] {
display: flex;
flex-direction: row;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.meta-item[b-1njnsji0pt] {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.8125rem;
color: #64748b;
}
.meta-item i[b-1njnsji0pt] {
font-size: 0.8125rem;
color: #94a3b8;
}
/* Header Actions */
.header-actions[b-1njnsji0pt] {
display: flex;
gap: 0.75rem;
flex-shrink: 0;
}
.btn-secondary[b-1njnsji0pt] {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: transparent;
border: 1px solid #E2E8F0;
border-radius: 8px;
font-size: 0.875rem;
font-weight: 500;
color: #64748B;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-secondary:hover:not(:disabled)[b-1njnsji0pt] {
background: #F1F5F9;
border-color: #E2E8F0;
color: #0F172A;
}
.btn-secondary:disabled[b-1njnsji0pt] {
opacity: 0.6;
cursor: not-allowed;
}
.btn-primary[b-1njnsji0pt] {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: var(--accent-color);
border: 1px solid var(--accent-color);
border-radius: 8px;
font-size: 0.875rem;
font-weight: 500;
color: white;
cursor: pointer;
transition: filter 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-primary:hover[b-1njnsji0pt] {
filter: brightness(0.85);
}
/* Custom Actions Menu */
.actions-menu-container[b-1njnsji0pt] {
position: relative;
}
.actions-menu-backdrop[b-1njnsji0pt] {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
}
.actions-menu[b-1njnsji0pt] {
position: absolute;
top: calc(100% + 4px);
right: 0;
min-width: 260px;
background: white;
border: 1px solid #e5e7eb;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
z-index: 1000;
padding: 0.5rem 0;
animation: menuSlideIn-b-1njnsji0pt 0.15s ease-out;
}
@keyframes menuSlideIn-b-1njnsji0pt {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.actions-menu-item[b-1njnsji0pt] {
display: flex;
align-items: center;
gap: 0.75rem;
width: 100%;
padding: 0.625rem 1rem;
background: transparent;
border: none;
font-size: 0.875rem;
font-weight: 500;
color: #374151;
cursor: pointer;
transition: all 0.15s ease;
text-align: left;
white-space: nowrap;
}
.actions-menu-item:hover:not(:disabled)[b-1njnsji0pt] {
background: rgba(15, 23, 42, 0.05);
color: var(--brand-500);
}
.actions-menu-item:hover:not(:disabled) i[b-1njnsji0pt] {
color: var(--brand-500);
}
.actions-menu-item:disabled[b-1njnsji0pt] {
opacity: 0.5;
cursor: not-allowed;
}
.actions-menu-item i[b-1njnsji0pt] {
font-size: 1rem;
color: #6b7280;
width: 1.25rem;
text-align: center;
}
.actions-menu-item.text-danger[b-1njnsji0pt] {
color: var(--error-600);
}
.actions-menu-item.text-danger:hover:not(:disabled)[b-1njnsji0pt] {
background: rgba(220, 38, 38, 0.06);
color: var(--error-600);
}
.actions-menu-item.text-danger i[b-1njnsji0pt],
.actions-menu-item.text-danger:hover:not(:disabled) i[b-1njnsji0pt] {
color: var(--error-600);
}
.actions-menu-item.text-success[b-1njnsji0pt] {
color: var(--success-600);
}
.actions-menu-item.text-success:hover:not(:disabled)[b-1njnsji0pt] {
background: rgba(22, 163, 74, 0.06);
color: var(--success-600);
}
.actions-menu-item.text-success i[b-1njnsji0pt],
.actions-menu-item.text-success:hover:not(:disabled) i[b-1njnsji0pt] {
color: var(--success-600);
}
.actions-menu-item.text-warning[b-1njnsji0pt] {
color: #d97706;
}
.actions-menu-item.text-warning:hover:not(:disabled)[b-1njnsji0pt] {
background: rgba(217, 119, 6, 0.06);
color: #d97706;
}
.actions-menu-item.text-warning i[b-1njnsji0pt],
.actions-menu-item.text-warning:hover:not(:disabled) i[b-1njnsji0pt] {
color: #d97706;
}
.actions-menu-divider[b-1njnsji0pt] {
height: 1px;
background: #e5e7eb;
margin: 0.375rem 0;
}
/* Legacy Actions Dropdown (keeping for compatibility) */
.actions-dropdown[b-1njnsji0pt] {
min-width: 220px;
padding: 0.5rem 0;
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 10px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.05);
background: white;
animation: dropdownFadeIn-b-1njnsji0pt 0.15s ease-out;
}
@keyframes dropdownFadeIn-b-1njnsji0pt {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.actions-dropdown .dropdown-item[b-1njnsji0pt] {
display: flex;
align-items: center;
padding: 0.625rem 1rem;
font-size: 0.875rem;
font-weight: 500;
color: #374151;
border: none;
background: transparent;
width: 100%;
text-align: left;
cursor: pointer;
transition: all 0.15s ease;
}
.actions-dropdown .dropdown-item:hover:not(:disabled)[b-1njnsji0pt] {
background: rgba(15, 23, 42, 0.05);
color: var(--brand-500);
}
.actions-dropdown .dropdown-item:hover:not(:disabled) i[b-1njnsji0pt] {
color: var(--brand-500);
}
.actions-dropdown .dropdown-item i[b-1njnsji0pt] {
font-size: 1rem;
color: #6B7280;
transition: color 0.15s ease;
}
.actions-dropdown .dropdown-item.text-danger[b-1njnsji0pt] {
color: var(--error-600);
}
.actions-dropdown .dropdown-item.text-danger:hover:not(:disabled)[b-1njnsji0pt] {
background: rgba(220, 38, 38, 0.06);
color: var(--error-600);
}
.actions-dropdown .dropdown-item.text-danger i[b-1njnsji0pt],
.actions-dropdown .dropdown-item.text-danger:hover i[b-1njnsji0pt] {
color: var(--error-600);
}
.actions-dropdown .dropdown-item.text-success[b-1njnsji0pt] {
color: var(--success-600);
}
.actions-dropdown .dropdown-item.text-success:hover:not(:disabled)[b-1njnsji0pt] {
background: rgba(22, 163, 74, 0.06);
color: var(--success-600);
}
.actions-dropdown .dropdown-item.text-success i[b-1njnsji0pt],
.actions-dropdown .dropdown-item.text-success:hover i[b-1njnsji0pt] {
color: var(--success-600);
}
.actions-dropdown .dropdown-item.text-warning[b-1njnsji0pt] {
color: #d97706;
}
.actions-dropdown .dropdown-item.text-warning:hover:not(:disabled)[b-1njnsji0pt] {
background: rgba(217, 119, 6, 0.06);
color: #d97706;
}
.actions-dropdown .dropdown-item.text-warning i[b-1njnsji0pt],
.actions-dropdown .dropdown-item.text-warning:hover i[b-1njnsji0pt] {
color: #d97706;
}
.actions-dropdown .dropdown-item:disabled[b-1njnsji0pt] {
opacity: 0.5;
cursor: not-allowed;
}
.actions-dropdown .dropdown-divider[b-1njnsji0pt] {
margin: 0.5rem 0;
border-top: 1px solid #E5E7EB;
}
/* Role Selector */
.role-selector[b-1njnsji0pt] {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.role-option[b-1njnsji0pt] {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
background: #F9FAFB;
border: 1px solid #E5E7EB;
border-radius: 8px;
cursor: pointer;
transition: all 0.15s ease;
}
.role-option:hover[b-1njnsji0pt] {
background: #F3F4F6;
border-color: #D1D5DB;
}
.role-option.selected[b-1njnsji0pt] {
background: rgba(15, 23, 42, 0.05);
border-color: var(--brand-500);
}
.role-option .role-icon[b-1njnsji0pt] {
width: 36px;
height: 36px;
border-radius: 8px;
background: rgba(15, 23, 42, 0.08);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.role-option .role-icon i[b-1njnsji0pt] {
font-size: 1rem;
color: var(--brand-500);
}
.role-option .role-details[b-1njnsji0pt] {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.role-option .role-name[b-1njnsji0pt] {
font-size: 0.875rem;
font-weight: 600;
color: #1F2937;
}
.role-option .role-description[b-1njnsji0pt] {
font-size: 0.75rem;
color: #6B7280;
}
.role-option .role-check[b-1njnsji0pt] {
width: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.current-role-display[b-1njnsji0pt] {
padding: 0.5rem;
background: #F9FAFB;
border-radius: 6px;
}
/* Stats Row */
.stats-row[b-1njnsji0pt] {
display: flex;
gap: 1rem;
flex-wrap: wrap;
animation: fadeInUp-b-1njnsji0pt 0.5s ease-out;
}
.stat-card[b-1njnsji0pt] {
display: flex;
align-items: center;
gap: 0.75rem;
background: #F9FAFB;
border: 1px solid #E5E7EB;
border-radius: 8px;
padding: 0.75rem 1rem;
min-width: 140px;
transition: all 0.2s ease;
}
.stat-card:hover[b-1njnsji0pt] {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border-color: rgba(15, 23, 42, 0.15);
}
.stat-card:nth-child(1)[b-1njnsji0pt] { animation: fadeInUp-b-1njnsji0pt 0.4s ease-out 0.1s both; }
.stat-card:nth-child(2)[b-1njnsji0pt] { animation: fadeInUp-b-1njnsji0pt 0.4s ease-out 0.2s both; }
.stat-card:nth-child(3)[b-1njnsji0pt] { animation: fadeInUp-b-1njnsji0pt 0.4s ease-out 0.3s both; }
.stat-card:nth-child(4)[b-1njnsji0pt] { animation: fadeInUp-b-1njnsji0pt 0.4s ease-out 0.4s both; }
.stat-card .stat-icon[b-1njnsji0pt] {
width: 40px;
height: 40px;
border-radius: 8px;
background: rgba(15, 23, 42, 0.08);
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s ease;
}
.stat-card:hover .stat-icon[b-1njnsji0pt] {
transform: scale(1.1);
}
.stat-card .stat-icon i[b-1njnsji0pt] {
font-size: 1.125rem;
color: var(--brand-500);
}
.stat-card .stat-content[b-1njnsji0pt] {
display: flex;
flex-direction: column;
}
.stat-card .stat-value[b-1njnsji0pt] {
font-size: 1.125rem;
font-weight: 700;
color: #1F2937;
line-height: 1.2;
}
.stat-card .stat-label[b-1njnsji0pt] {
font-size: 0.75rem;
color: #6B7280;
}
/* Tabs */
.user-tabs[b-1njnsji0pt] {
display: flex;
gap: 0;
background: white;
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 10px;
padding: 4px;
margin-bottom: 1.5rem;
animation: fadeInUp-b-1njnsji0pt 0.5s ease-out 0.2s both;
}
.user-tab[b-1njnsji0pt] {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1rem;
background: transparent;
border: none;
border-radius: 6px;
font-size: 0.875rem;
font-weight: 500;
color: #6B7280;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
}
.user-tab:hover[b-1njnsji0pt] {
color: #374151;
background: #F9FAFB;
transform: translateY(-1px);
}
.user-tab.active[b-1njnsji0pt] {
color: var(--brand-500);
background: rgba(15, 23, 42, 0.08);
}
.tab-badge[b-1njnsji0pt] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
background: #E5E7EB;
border-radius: 10px;
font-size: 0.7rem;
font-weight: 600;
color: #6B7280;
transition: all 0.2s ease;
}
.user-tab.active .tab-badge[b-1njnsji0pt] {
background: var(--brand-500);
color: white;
}
/* Content Area */
.user-content[b-1njnsji0pt] {
margin-top: 1.5rem;
animation: fadeIn-b-1njnsji0pt 0.3s ease-out;
}
/* Overview Grid */
.overview-grid[b-1njnsji0pt] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
/* Detail Card */
.detail-card[b-1njnsji0pt] {
background: white;
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 10px;
overflow: hidden;
animation: fadeInUp-b-1njnsji0pt 0.4s ease-out both;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.detail-card:hover[b-1njnsji0pt] {
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
}
.overview-grid .detail-card:nth-child(1)[b-1njnsji0pt] { animation-delay: 0.1s; }
.overview-grid .detail-card:nth-child(2)[b-1njnsji0pt] { animation-delay: 0.2s; }
.overview-grid .detail-card:nth-child(3)[b-1njnsji0pt] { animation-delay: 0.3s; }
.overview-grid .detail-card:nth-child(4)[b-1njnsji0pt] { animation-delay: 0.4s; }
.detail-card.full-width[b-1njnsji0pt] {
grid-column: 1 / -1;
}
.detail-card .card-header[b-1njnsji0pt] {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 1.25rem;
background: #F9FAFB;
border-bottom: 1px solid #E5E7EB;
}
.detail-card .card-header i[b-1njnsji0pt] {
font-size: 1rem;
color: var(--brand-500);
}
.detail-card .card-header h3[b-1njnsji0pt] {
font-size: 0.9375rem;
font-weight: 600;
color: #1F2937;
margin: 0;
flex: 1;
}
.detail-card .card-body[b-1njnsji0pt] {
padding: 1.25rem;
}
.btn-edit[b-1njnsji0pt] {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid #E5E7EB;
border-radius: 6px;
color: #6B7280;
cursor: pointer;
transition: all 0.15s;
}
.btn-edit:hover[b-1njnsji0pt] {
background: white;
border-color: var(--brand-500);
color: var(--brand-500);
}
/* Detail Grid */
.detail-grid[b-1njnsji0pt] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.detail-item[b-1njnsji0pt] {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.detail-item.full-width[b-1njnsji0pt] {
grid-column: 1 / -1;
}
.detail-label[b-1njnsji0pt] {
font-size: 0.75rem;
font-weight: 600;
color: #6B7280;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.detail-value[b-1njnsji0pt] {
font-size: 0.9375rem;
color: #1F2937;
}
.detail-value code[b-1njnsji0pt] {
font-size: 0.8rem;
padding: 2px 6px;
background: #F3F4F6;
border-radius: 4px;
color: #6B7280;
}
.notes-text[b-1njnsji0pt] {
margin: 0;
white-space: pre-wrap;
color: #374151;
}
/* Status Badges */
.status-badge[b-1njnsji0pt] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
}
.status-badge i[b-1njnsji0pt] {
font-size: 0.7rem;
}
.status-active[b-1njnsji0pt] {
background: rgba(16, 185, 129, 0.1);
color: #059669;
}
.status-inactive[b-1njnsji0pt] {
background: rgba(107, 114, 128, 0.1);
color: #6B7280;
}
/* Role Badges */
.role-badge[b-1njnsji0pt] {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
}
.role-admin[b-1njnsji0pt] {
background: rgba(139, 92, 246, 0.1);
color: #7C3AED;
}
.role-banksuperuser[b-1njnsji0pt] {
background: rgba(59, 130, 246, 0.1);
color: #2563EB;
}
.role-bankuser[b-1njnsji0pt] {
background: rgba(20, 184, 166, 0.1);
color: #0D9488;
}
.role-agent[b-1njnsji0pt] {
background: rgba(249, 115, 22, 0.1);
color: #EA580C;
}
.role-underwriter[b-1njnsji0pt] {
background: rgba(99, 102, 241, 0.1);
color: #4F46E5;
}
.role-other[b-1njnsji0pt], .role-none[b-1njnsji0pt] {
background: rgba(107, 114, 128, 0.1);
color: #6B7280;
}
/* Security Content */
.security-content[b-1njnsji0pt] {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.empty-sessions[b-1njnsji0pt],
.empty-activity[b-1njnsji0pt] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 3rem;
text-align: center;
}
.empty-sessions i[b-1njnsji0pt],
.empty-activity i[b-1njnsji0pt] {
font-size: 2.5rem;
color: #D1D5DB;
margin-bottom: 0.5rem;
}
.empty-sessions p[b-1njnsji0pt],
.empty-activity p[b-1njnsji0pt] {
color: #6B7280;
margin: 0;
}
.current-session-badge[b-1njnsji0pt] {
display: inline-flex;
align-items: center;
margin-left: 0.5rem;
padding: 2px 8px;
background: rgba(16, 185, 129, 0.1);
border-radius: 10px;
font-size: 0.7rem;
font-weight: 600;
color: #059669;
}
/* Activity Timeline */
.activity-timeline[b-1njnsji0pt] {
padding: 1rem 1.25rem;
}
.timeline-item[b-1njnsji0pt] {
display: flex;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid #F1F5F9;
animation: slideInLeft-b-1njnsji0pt 0.4s ease-out both;
transition: background 0.2s ease;
}
.timeline-item:nth-child(1)[b-1njnsji0pt] { animation-delay: 0.05s; }
.timeline-item:nth-child(2)[b-1njnsji0pt] { animation-delay: 0.1s; }
.timeline-item:nth-child(3)[b-1njnsji0pt] { animation-delay: 0.15s; }
.timeline-item:nth-child(4)[b-1njnsji0pt] { animation-delay: 0.2s; }
.timeline-item:nth-child(5)[b-1njnsji0pt] { animation-delay: 0.25s; }
.timeline-item:nth-child(n+6)[b-1njnsji0pt] { animation-delay: 0.3s; }
.timeline-item:hover[b-1njnsji0pt] {
background: rgba(15, 23, 42, 0.02);
}
.timeline-item:last-child[b-1njnsji0pt] {
border-bottom: none;
}
.timeline-marker[b-1njnsji0pt] {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform 0.2s ease;
}
.timeline-item:hover .timeline-marker[b-1njnsji0pt] {
transform: scale(1.1);
}
.timeline-marker.activity-success[b-1njnsji0pt] {
background: rgba(16, 185, 129, 0.1);
color: #059669;
}
.timeline-marker.activity-warning[b-1njnsji0pt] {
background: rgba(245, 158, 11, 0.1);
color: #D97706;
}
.timeline-marker.activity-error[b-1njnsji0pt] {
background: rgba(239, 68, 68, 0.1);
color: var(--error-600);
}
.timeline-marker.activity-info[b-1njnsji0pt] {
background: rgba(59, 130, 246, 0.1);
color: #2563EB;
}
.timeline-content[b-1njnsji0pt] {
flex: 1;
min-width: 0;
}
.timeline-header[b-1njnsji0pt] {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.25rem;
}
.timeline-time[b-1njnsji0pt] {
font-size: 0.8rem;
color: #6B7280;
}
.timeline-description[b-1njnsji0pt] {
margin: 0;
font-size: 0.9375rem;
color: #374151;
}
/* Activity Badges */
.activity-badge[b-1njnsji0pt] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 50px;
padding: 4px 8px;
border-radius: 4px;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.05em;
}
.activity-success[b-1njnsji0pt] {
background: rgba(16, 185, 129, 0.1);
color: #059669;
}
.activity-warning[b-1njnsji0pt] {
background: rgba(245, 158, 11, 0.1);
color: #D97706;
}
.activity-error[b-1njnsji0pt] {
background: rgba(239, 68, 68, 0.1);
color: var(--error-600);
}
.activity-info[b-1njnsji0pt] {
background: rgba(59, 130, 246, 0.1);
color: #2563EB;
}
.activity-default[b-1njnsji0pt] {
background: rgba(107, 114, 128, 0.1);
color: #6B7280;
}
/* Activity Details */
.activity-details[b-1njnsji0pt] {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
margin-top: 0.5rem;
padding: 0.75rem;
background: #F8FAFC;
border-radius: 6px;
border-left: 3px solid #E2E8F0;
}
.activity-details .detail-item[b-1njnsji0pt] {
display: flex;
align-items: center;
gap: 0.375rem;
font-size: 0.8125rem;
color: #4B5563;
}
.activity-details .detail-item i[b-1njnsji0pt] {
font-size: 0.875rem;
}
.activity-details .detail-item code[b-1njnsji0pt] {
font-size: 0.75rem;
padding: 0.125rem 0.375rem;
background: #E2E8F0;
border-radius: 3px;
color: #334155;
}
.activity-details .detail-item strong[b-1njnsji0pt] {
font-weight: 600;
color: #1F2937;
}
/* Timeline Error State */
.timeline-item.timeline-error[b-1njnsji0pt] {
background: rgba(239, 68, 68, 0.03);
border-left: 3px solid #EF4444;
margin-left: -1.25rem;
padding-left: 1.25rem;
}
.timeline-item.timeline-error .timeline-description[b-1njnsji0pt] {
color: #991B1B;
}
/* Responsive */
@media (max-width: 992px) {
.overview-grid[b-1njnsji0pt] {
grid-template-columns: 1fr;
}
.header-actions[b-1njnsji0pt] {
flex-shrink: 0;
}
}
@media (max-width: 768px) {
.header-content[b-1njnsji0pt] {
flex-direction: column;
align-items: flex-start;
}
.header-left[b-1njnsji0pt] {
width: 100%;
}
.header-actions[b-1njnsji0pt] {
width: 100%;
justify-content: flex-start;
}
.user-name-row[b-1njnsji0pt] {
flex-direction: column;
align-items: flex-start;
}
.stats-row[b-1njnsji0pt] {
flex-direction: column;
}
.stat-card[b-1njnsji0pt] {
width: 100%;
}
.detail-grid[b-1njnsji0pt] {
grid-template-columns: 1fr;
}
.user-tabs[b-1njnsji0pt] {
flex-wrap: wrap;
}
}
/* ========================================
Modal Styles
(header/body/footer come from the global modal theme — wwwroot/css/modal-theme.css)
======================================== */
/* Footer buttons: ghost cancel, brand-blue confirm (canonical modal design) */
.modal-footer .btn-secondary[b-1njnsji0pt] {
background: transparent;
color: #64748B;
border: 1px solid #E2E8F0;
border-radius: 10px;
font-weight: 600;
padding: 0.55rem 1.15rem;
}
.modal-footer .btn-secondary:hover[b-1njnsji0pt] {
background: #F1F5F9;
color: #0F172A;
}
.modal-footer .btn-primary[b-1njnsji0pt] {
background: var(--brand-600, #004980);
border: none;
color: #fff;
border-radius: 10px;
font-weight: 600;
padding: 0.55rem 1.15rem;
}
.modal-footer .btn-primary:hover:not(:disabled)[b-1njnsji0pt] {
background: var(--brand-700, #003760);
}
/* User Info Banner */
.user-info-banner[b-1njnsji0pt] {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
background: linear-gradient(135deg, rgba(15, 23, 42, 0.08) 0%, rgba(15, 23, 42, 0.04) 100%);
border-radius: 8px;
border: 1px solid rgba(15, 23, 42, 0.1);
}
.user-avatar-sm[b-1njnsji0pt] {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(15, 23, 42, 0.12);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
}
.user-avatar-sm img[b-1njnsji0pt] {
width: 100%;
height: 100%;
object-fit: cover;
}
.user-avatar-sm span[b-1njnsji0pt] {
font-size: 0.875rem;
font-weight: 600;
color: var(--brand-500);
}
.user-info-text[b-1njnsji0pt] {
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.user-info-text .user-name[b-1njnsji0pt] {
font-weight: 600;
color: #1f2937;
font-size: 0.9375rem;
}
.user-info-text .user-email[b-1njnsji0pt] {
font-size: 0.8125rem;
color: #6b7280;
}
/* Password Input Section */
.password-section[b-1njnsji0pt] {
margin-bottom: 1rem;
}
.password-input-wrapper .input-group .form-control[b-1njnsji0pt] {
border-right: none;
}
.password-input-wrapper .input-group .btn[b-1njnsji0pt] {
border-color: #d1d5db;
}
.password-input-wrapper .input-group .btn:hover[b-1njnsji0pt] {
background-color: #f9fafb;
}
.password-input-wrapper .input-group .btn-outline-primary:hover[b-1njnsji0pt] {
background-color: rgba(15, 23, 42, 0.08);
color: var(--brand-500);
border-color: var(--brand-500);
}
/* Password Strength Bar */
.password-strength-container[b-1njnsji0pt] {
display: flex;
align-items: center;
gap: 0.75rem;
}
.password-strength-bar[b-1njnsji0pt] {
flex: 1;
height: 4px;
background: #e5e7eb;
border-radius: 2px;
overflow: hidden;
}
.password-strength-fill[b-1njnsji0pt] {
height: 100%;
border-radius: 2px;
transition: width 0.3s ease, background-color 0.3s ease;
}
.password-strength-text[b-1njnsji0pt] {
font-size: 0.75rem;
font-weight: 600;
min-width: 70px;
text-align: right;
}
/* Password Requirements */
.password-requirements[b-1njnsji0pt] {
background: #f9fafb;
border-radius: 8px;
padding: 0.875rem 1rem;
border: 1px solid #e5e7eb;
}
.requirements-title[b-1njnsji0pt] {
display: block;
font-size: 0.8125rem;
font-weight: 600;
color: #374151;
margin-bottom: 0.625rem;
}
.requirements-grid[b-1njnsji0pt] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
}
.requirement-item[b-1njnsji0pt] {
display: flex;
align-items: center;
gap: 0.375rem;
font-size: 0.8125rem;
color: #9ca3af;
transition: color 0.2s ease;
}
.requirement-item i[b-1njnsji0pt] {
font-size: 0.875rem;
transition: color 0.2s ease;
}
.requirement-item.met[b-1njnsji0pt] {
color: #059669;
}
.requirement-item.met i[b-1njnsji0pt] {
color: #059669;
}
/* Email Option Card */
.email-option-card[b-1njnsji0pt] {
background: #fefefe;
border-radius: 8px;
padding: 0.75rem 1rem;
border: 1px solid #e5e7eb;
}
.email-option-card .form-check-label[b-1njnsji0pt] {
font-weight: 500;
color: #374151;
}
/* Security Notice */
.security-notice[b-1njnsji0pt] {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 0.875rem;
background: rgba(245, 158, 11, 0.08);
border-radius: 6px;
border: 1px solid rgba(245, 158, 11, 0.2);
font-size: 0.8125rem;
color: #92400e;
}
.security-notice i[b-1njnsji0pt] {
color: #d97706;
font-size: 1rem;
}
/* Modal Responsive */
@media (max-width: 576px) {
.requirements-grid[b-1njnsji0pt] {
grid-template-columns: 1fr;
}
.password-strength-container[b-1njnsji0pt] {
flex-direction: column;
align-items: stretch;
gap: 0.375rem;
}
.password-strength-text[b-1njnsji0pt] {
text-align: left;
}
}
/* /Components/Pages/BankPortal/UserManagementPage.razor.rz.scp.css */
/* ========================================
User Management Page Styles
Based on WorkspacePage patterns
======================================== */
/* ========================================
Animations
======================================== */
@keyframes fadeInDown-b-srkbznhlts {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp-b-srkbznhlts {
from { opacity: 0; transform: translateY(15px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn-b-srkbznhlts {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes spin-b-srkbznhlts {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.bi-arrow-clockwise.spinning[b-srkbznhlts] {
animation: spin-b-srkbznhlts 1s linear infinite;
}
/* ========================================
Header
======================================== */
.content-header[b-srkbznhlts] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
animation: fadeInDown-b-srkbznhlts 0.4s ease-out;
}
.content-title[b-srkbznhlts] {
font-size: 1.5rem;
font-weight: 700;
color: #1F2937;
margin: 0;
line-height: 1.2;
}
.content-subtitle[b-srkbznhlts] {
font-size: 0.875rem;
color: #6B7280;
margin: 4px 0 0 0;
}
.content-subtitle strong[b-srkbznhlts] {
color: var(--brand-500);
}
/* Header Stats Pills */
.header-stats[b-srkbznhlts] {
display: flex;
align-items: center;
gap: 10px;
}
.stat-pill[b-srkbznhlts] {
display: flex;
align-items: center;
gap: 8px;
background: white;
border: 1px solid #E5E7EB;
border-radius: 8px;
padding: 8px 14px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.stat-pill i[b-srkbznhlts] {
font-size: 1rem;
color: var(--brand-500);
}
.stat-pill.stat-success i[b-srkbznhlts] {
color: #10B981;
}
.stat-pill.stat-warning i[b-srkbznhlts] {
color: #F59E0B;
}
.stat-pill .stat-value[b-srkbznhlts] {
font-size: 1.125rem;
font-weight: 700;
color: #1F2937;
}
.stat-pill .stat-label[b-srkbznhlts] {
font-size: 0.65rem;
font-weight: 600;
color: #6B7280;
text-transform: uppercase;
letter-spacing: 0.03em;
}
/* ========================================
Card & Tab Panel
======================================== */
.card.card-with-tabs[b-srkbznhlts] {
background: white;
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 12px;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
animation: fadeInUp-b-srkbznhlts 0.4s ease-out;
position: relative;
}
.dashboard-tab-panel.is-hidden[b-srkbznhlts] {
position: absolute;
left: -10000px;
top: 0;
width: 1px;
height: 1px;
overflow: hidden;
visibility: hidden;
}
.dashboard-tab-panel.is-active[b-srkbznhlts] {
position: relative;
left: auto;
width: auto;
height: auto;
visibility: visible;
animation: fadeIn-b-srkbznhlts 0.25s ease-out;
}
/* Tab Content */
.tab-content[b-srkbznhlts] {
padding: 0;
}
.tab-header[b-srkbznhlts] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
border-bottom: 1px solid #F1F5F9;
gap: 16px;
position: relative;
z-index: 10;
}
.tab-title[b-srkbznhlts] {
font-size: 1rem;
font-weight: 600;
color: #1F2937;
margin: 0;
}
.tab-subtitle[b-srkbznhlts] {
font-size: 0.8rem;
color: #6B7280;
margin: 2px 0 0 0;
}
.tab-actions[b-srkbznhlts] {
display: flex;
align-items: center;
gap: 10px;
}
/* ========================================
Section Titles
======================================== */
.section-title[b-srkbznhlts] {
font-size: 0.9rem;
font-weight: 600;
color: #374151;
display: flex;
align-items: center;
}
.section-title i[b-srkbznhlts] {
color: #6B7280;
}
.section-subtitle[b-srkbznhlts] {
font-size: 0.8rem;
color: #6B7280;
}
/* ========================================
Pending Users Card Grid
======================================== */
.pending-user-card[b-srkbznhlts] {
background: white;
border: 1px solid #E5E7EB;
border-radius: 12px;
padding: 24px;
text-align: center;
transition: all 0.2s ease;
position: relative;
height: 100%;
}
.pending-user-card:hover[b-srkbznhlts] {
border-color: var(--brand-500);
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
/* Tenant Request Card variant */
.pending-user-card.tenant-request-card[b-srkbznhlts] {
border-color: #BFDBFE;
background: linear-gradient(to bottom, #F0F9FF 0%, white 100%);
}
.pending-user-card.tenant-request-card:hover[b-srkbznhlts] {
border-color: #3B82F6;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}
.card-header-section[b-srkbznhlts] {
position: relative;
display: flex;
justify-content: center;
margin-bottom: 16px;
}
.user-avatar-lg[b-srkbznhlts] {
width: 72px;
height: 72px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 600;
color: white;
}
/* Avatar color variants for large avatars */
.user-avatar-lg.avatar-blue[b-srkbznhlts] {
background: linear-gradient(135deg, #3B82F6, #1D4ED8);
}
.user-avatar-lg.avatar-green[b-srkbznhlts] {
background: linear-gradient(135deg, #10B981, #047857);
}
.user-avatar-lg.avatar-orange[b-srkbznhlts] {
background: linear-gradient(135deg, #F59E0B, #D97706);
}
.user-avatar-lg.avatar-purple[b-srkbznhlts] {
background: linear-gradient(135deg, #8B5CF6, #6D28D9);
}
.user-avatar-lg.avatar-teal[b-srkbznhlts] {
background: linear-gradient(135deg, #14B8A6, #0D9488);
}
.user-avatar-lg.avatar-default[b-srkbznhlts] {
background: linear-gradient(135deg, #6B7280, #4B5563);
}
.status-indicator[b-srkbznhlts] {
position: absolute;
bottom: 0;
right: calc(50% - 40px);
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid white;
}
.status-indicator.status-verified[b-srkbznhlts] {
background: #10B981;
}
.status-indicator.status-pending[b-srkbznhlts] {
background: #F59E0B;
}
.status-indicator.status-info[b-srkbznhlts] {
background: #3B82F6;
}
.card-body-section[b-srkbznhlts] {
margin-bottom: 20px;
}
.user-card-name[b-srkbznhlts] {
font-size: 1.1rem;
font-weight: 600;
color: #1F2937;
margin: 0 0 4px 0;
}
.user-card-title[b-srkbznhlts] {
font-size: 0.85rem;
color: #6B7280;
margin: 0 0 8px 0;
}
.user-card-email[b-srkbznhlts] {
font-size: 0.8rem;
color: #9CA3AF;
margin: 0;
}
.card-stats-section[b-srkbznhlts] {
border-top: 1px solid #F1F5F9;
border-bottom: 1px solid #F1F5F9;
padding: 16px 0;
margin-bottom: 16px;
}
.stat-item[b-srkbznhlts] {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 0 8px;
border-right: 1px solid #F1F5F9;
}
.stat-item.border-end-0[b-srkbznhlts] {
border-right: none;
}
.stat-value-sm[b-srkbznhlts] {
font-size: 0.8rem;
font-weight: 600;
color: #374151;
}
.stat-label-sm[b-srkbznhlts] {
font-size: 0.65rem;
color: #9CA3AF;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.badge-sm[b-srkbznhlts] {
padding: 3px 8px;
border-radius: 12px;
font-size: 0.7rem;
font-weight: 600;
}
.badge-verified[b-srkbznhlts] {
background: #D1FAE5;
color: #047857;
}
.badge-pending[b-srkbznhlts] {
background: #FEF3C7;
color: #D97706;
}
.badge-info[b-srkbznhlts] {
background: #DBEAFE;
color: #1D4ED8;
}
.request-reason[b-srkbznhlts] {
padding: 10px 12px;
background: #F9FAFB;
border-radius: 8px;
margin-bottom: 16px;
text-align: left;
}
.request-reason small[b-srkbznhlts] {
font-size: 0.8rem;
line-height: 1.4;
display: block;
}
.card-actions-section[b-srkbznhlts] {
margin-top: auto;
}
.btn-card-approve[b-srkbznhlts] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 16px;
font-size: 0.85rem;
font-weight: 500;
background: #D1FAE5;
border: 1px solid #A7F3D0;
border-radius: 8px;
color: #047857;
cursor: pointer;
transition: all 0.15s;
}
.btn-card-approve:hover[b-srkbznhlts] {
background: #10B981;
border-color: #10B981;
color: white;
}
.btn-card-reject[b-srkbznhlts] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 16px;
font-size: 0.85rem;
font-weight: 500;
background: #FEE2E2;
border: 1px solid #FECACA;
border-radius: 8px;
color: var(--error-600);
cursor: pointer;
transition: all 0.15s;
}
.btn-card-reject:hover[b-srkbznhlts] {
background: #EF4444;
border-color: #EF4444;
color: white;
}
/* Empty State Container */
.empty-state-container[b-srkbznhlts] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
text-align: center;
}
.empty-state-container i[b-srkbznhlts] {
font-size: 48px;
color: #D1D5DB;
margin-bottom: 16px;
}
.empty-state-container h3[b-srkbznhlts] {
font-size: 1.1rem;
font-weight: 600;
color: #6B7280;
margin: 0 0 8px 0;
}
.empty-state-container p[b-srkbznhlts] {
font-size: 0.9rem;
color: #9CA3AF;
margin: 0;
}
/* ========================================
Table Styles
======================================== */
.table-responsive[b-srkbznhlts] {
overflow-x: auto;
overflow-y: visible;
margin: 0;
max-width: 100%;
}
.dashboard-table[b-srkbznhlts] {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 0.875rem;
}
.dashboard-table thead[b-srkbznhlts] {
background-color: #F8FAFC;
position: sticky;
top: 0;
z-index: 1;
}
.dashboard-table thead th[b-srkbznhlts] {
padding: 10px 16px;
text-align: left;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #64748B;
border-bottom: 1px solid #E2E8F0;
white-space: nowrap;
user-select: none;
}
.dashboard-table thead th:hover[b-srkbznhlts] {
color: var(--brand-500);
background-color: #F1F5F9;
}
.dashboard-table tbody tr[b-srkbznhlts] {
transition: all 0.12s ease;
border-left: 3px solid transparent;
background: white;
animation: fadeIn-b-srkbznhlts 0.3s ease-out forwards;
opacity: 0;
}
/* Staggered row animations */
.dashboard-table tbody tr:nth-child(1)[b-srkbznhlts] { animation-delay: 50ms; }
.dashboard-table tbody tr:nth-child(2)[b-srkbznhlts] { animation-delay: 80ms; }
.dashboard-table tbody tr:nth-child(3)[b-srkbznhlts] { animation-delay: 110ms; }
.dashboard-table tbody tr:nth-child(4)[b-srkbznhlts] { animation-delay: 140ms; }
.dashboard-table tbody tr:nth-child(5)[b-srkbznhlts] { animation-delay: 170ms; }
.dashboard-table tbody tr:nth-child(6)[b-srkbznhlts] { animation-delay: 200ms; }
.dashboard-table tbody tr:nth-child(7)[b-srkbznhlts] { animation-delay: 230ms; }
.dashboard-table tbody tr:nth-child(8)[b-srkbznhlts] { animation-delay: 260ms; }
.dashboard-table tbody tr:nth-child(9)[b-srkbznhlts] { animation-delay: 290ms; }
.dashboard-table tbody tr:nth-child(10)[b-srkbznhlts] { animation-delay: 320ms; }
.dashboard-table tbody tr:nth-child(n+11)[b-srkbznhlts] { animation-delay: 350ms; }
.dashboard-table tbody tr:nth-child(even)[b-srkbznhlts] {
background-color: #FAFBFC;
}
.dashboard-table tbody tr:hover[b-srkbznhlts] {
background-color: #EFF6FF;
border-left: 3px solid var(--brand-500);
}
.dashboard-table tbody td[b-srkbznhlts] {
padding: 10px 16px;
border-bottom: 1px solid #F1F5F9;
vertical-align: middle;
color: #374151;
}
/* Empty State */
.empty-state[b-srkbznhlts] {
text-align: center;
padding: 48px 32px !important;
color: #6B7280;
}
.empty-state i[b-srkbznhlts] {
font-size: 40px;
display: block;
margin-bottom: 12px;
color: #D1D5DB;
}
.empty-state span[b-srkbznhlts] {
font-size: 0.9rem;
color: #9CA3AF;
}
/* ========================================
Date Cell
======================================== */
.date-cell[b-srkbznhlts] {
display: flex;
flex-direction: column;
gap: 2px;
}
.date-relative[b-srkbznhlts] {
font-size: 0.875rem;
color: #374151;
font-weight: 500;
}
.date-actual[b-srkbznhlts] {
font-size: 0.75rem;
color: #9CA3AF;
}
/* ========================================
User Cell
======================================== */
.user-cell[b-srkbznhlts] {
display: flex;
align-items: center;
gap: 12px;
}
.user-avatar[b-srkbznhlts] {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.user-avatar span[b-srkbznhlts] {
font-size: 0.8rem;
font-weight: 600;
color: white;
}
/* Avatar color variants */
.user-avatar.avatar-blue[b-srkbznhlts] {
background: linear-gradient(135deg, #3B82F6, #1D4ED8);
}
.user-avatar.avatar-green[b-srkbznhlts] {
background: linear-gradient(135deg, #10B981, #047857);
}
.user-avatar.avatar-orange[b-srkbznhlts] {
background: linear-gradient(135deg, #F59E0B, #D97706);
}
.user-avatar.avatar-purple[b-srkbznhlts] {
background: linear-gradient(135deg, #8B5CF6, #6D28D9);
}
.user-avatar.avatar-teal[b-srkbznhlts] {
background: linear-gradient(135deg, #14B8A6, #0D9488);
}
.user-avatar.avatar-default[b-srkbznhlts] {
background: linear-gradient(135deg, #6B7280, #4B5563);
}
.user-info[b-srkbznhlts] {
display: flex;
flex-direction: column;
min-width: 0;
}
.user-name[b-srkbznhlts] {
font-weight: 600;
color: #1F2937;
font-size: 0.875rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-title[b-srkbznhlts] {
font-size: 0.75rem;
color: #6B7280;
}
/* ========================================
Status Badges
======================================== */
.dashboard-table .badge[b-srkbznhlts] {
padding: 5px 10px;
font-size: 0.75rem;
font-weight: 600;
border-radius: 20px;
display: inline-flex;
align-items: center;
gap: 4px;
}
.dashboard-table .badge i[b-srkbznhlts] {
font-size: 10px;
}
.badge.bg-danger[b-srkbznhlts] {
background-color: #FEE2E2 !important;
color: var(--error-600) !important;
}
.badge.bg-warning[b-srkbznhlts] {
background-color: #FEF3C7 !important;
color: #D97706 !important;
}
.badge.bg-secondary[b-srkbznhlts] {
background-color: #F3F4F6 !important;
color: #4B5563 !important;
}
.badge.bg-info[b-srkbznhlts] {
background-color: #E0F2FE !important;
color: #0369A1 !important;
}
.badge.bg-success[b-srkbznhlts] {
background-color: #D1FAE5 !important;
color: #047857 !important;
}
.badge.bg-primary[b-srkbznhlts] {
background-color: #DBEAFE !important;
color: #1D4ED8 !important;
}
/* Role Badges */
.badge.role-admin[b-srkbznhlts] {
background-color: #EDE9FE !important;
color: #6D28D9 !important;
}
.badge.role-banksuperuser[b-srkbznhlts] {
background-color: #DBEAFE !important;
color: #1D4ED8 !important;
}
.badge.role-bankuser[b-srkbznhlts] {
background-color: #CCFBF1 !important;
color: #0D9488 !important;
}
.badge.role-agent[b-srkbznhlts] {
background-color: #FFEDD5 !important;
color: #EA580C !important;
}
.badge.role-underwriter[b-srkbznhlts] {
background-color: #E0E7FF !important;
color: #4338CA !important;
}
.badge.role-none[b-srkbznhlts],
.badge.role-other[b-srkbznhlts] {
background-color: #F3F4F6 !important;
color: #6B7280 !important;
}
/* Activity Badges */
.badge.activity-success[b-srkbznhlts] {
background-color: #D1FAE5 !important;
color: #047857 !important;
}
.badge.activity-warning[b-srkbznhlts] {
background-color: #FEF3C7 !important;
color: #D97706 !important;
}
.badge.activity-error[b-srkbznhlts] {
background-color: #FEE2E2 !important;
color: var(--error-600) !important;
}
.badge.activity-info[b-srkbznhlts] {
background-color: #DBEAFE !important;
color: #1D4ED8 !important;
}
.badge.activity-default[b-srkbznhlts] {
background-color: #F3F4F6 !important;
color: #6B7280 !important;
}
/* ========================================
Action Buttons
======================================== */
.actions-cell[b-srkbznhlts] {
text-align: right;
}
.btn-header-action[b-srkbznhlts] {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
font-size: 16px;
color: #475569;
background: #ffffff;
border: 1px solid #E2E8F0;
border-radius: 8px;
cursor: pointer;
transition: all 0.15s ease;
}
.btn-header-action:hover:not(:disabled)[b-srkbznhlts] {
color: var(--brand-600);
background: #E6F2F8;
border-color: #99CBE3;
}
.btn-header-action:disabled[b-srkbznhlts] {
opacity: 0.5;
cursor: not-allowed;
}
.btn-action-primary[b-srkbznhlts] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
font-size: 0.8rem;
font-weight: 500;
color: white;
background-color: var(--accent-color);
border: 1px solid var(--accent-color);
border-radius: 6px;
cursor: pointer;
transition: all 0.15s ease;
}
.btn-action-primary:hover[b-srkbznhlts] {
filter: brightness(0.85);
}
.btn-action-primary i[b-srkbznhlts] {
font-size: 0.85rem;
}
.btn-action-subtle[b-srkbznhlts] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
font-size: 0.8rem;
font-weight: 500;
color: var(--brand-500);
background-color: white;
border: 1px solid #E5E7EB;
border-radius: 6px;
cursor: pointer;
transition: all 0.15s ease;
}
.btn-action-subtle:hover[b-srkbznhlts] {
background-color: #EFF6FF;
color: #004880;
border-color: #BFDBFE;
}
.btn-action-subtle i[b-srkbznhlts] {
font-size: 0.85rem;
}
/* Approve/Reject Buttons (icon only) */
.btn-approve[b-srkbznhlts] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
background: #D1FAE5;
border: 1px solid #A7F3D0;
border-radius: 6px;
color: #047857;
cursor: pointer;
transition: all 0.15s;
margin-right: 6px;
}
.btn-approve:hover[b-srkbznhlts] {
background: #10B981;
border-color: #10B981;
color: white;
}
.btn-reject[b-srkbznhlts] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
background: #FEE2E2;
border: 1px solid #FECACA;
border-radius: 6px;
color: var(--error-600);
cursor: pointer;
transition: all 0.15s;
}
.btn-reject:hover[b-srkbznhlts] {
background: #EF4444;
border-color: #EF4444;
color: white;
}
/* Approve/Reject Buttons with labels */
.btn-approve-label[b-srkbznhlts] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
font-size: 0.8rem;
font-weight: 500;
background: #D1FAE5;
border: 1px solid #A7F3D0;
border-radius: 6px;
color: #047857;
cursor: pointer;
transition: all 0.15s;
margin-right: 8px;
}
.btn-approve-label:hover[b-srkbznhlts] {
background: #10B981;
border-color: #10B981;
color: white;
}
.btn-approve-label i[b-srkbznhlts] {
font-size: 0.9rem;
}
.btn-reject-label[b-srkbznhlts] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
font-size: 0.8rem;
font-weight: 500;
background: #FEE2E2;
border: 1px solid #FECACA;
border-radius: 6px;
color: var(--error-600);
cursor: pointer;
transition: all 0.15s;
}
.btn-reject-label:hover[b-srkbznhlts] {
background: #EF4444;
border-color: #EF4444;
color: white;
}
.btn-reject-label i[b-srkbznhlts] {
font-size: 0.9rem;
}
/* Filter Button */
.btn-filter[b-srkbznhlts] {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
font-size: 0.8rem;
font-weight: 500;
color: #374151;
background: white;
border: 1px solid #E5E7EB;
border-radius: 8px;
cursor: pointer;
transition: all 0.15s;
}
.btn-filter:hover[b-srkbznhlts] {
background: #F9FAFB;
border-color: #D1D5DB;
}
.btn-filter i[b-srkbznhlts] {
font-size: 0.85rem;
color: #6B7280;
}
/* ========================================
Modal Styles
(visual styling comes from the global modal theme — wwwroot/css/modal-theme.css)
======================================== */
.modal-backdrop[b-srkbznhlts] {
z-index: 1040;
}
.modal[b-srkbznhlts] {
z-index: 1050;
}
.user-preview[b-srkbznhlts] {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: #F9FAFB;
border-radius: 8px;
}
.user-preview .user-avatar[b-srkbznhlts] {
width: 44px;
height: 44px;
}
.user-preview .user-avatar span[b-srkbznhlts] {
font-size: 0.9rem;
}
/* ========================================
Tab Badge Styles
======================================== */
[b-srkbznhlts] .tab-badge-warning {
background: #FEF3C7 !important;
color: #D97706 !important;
}
/* ========================================
Enhanced Modal Styles
======================================== */
.modal-dialog[b-srkbznhlts] {
max-width: 480px;
}
/* Approval User Card */
.approval-user-card[b-srkbznhlts] {
display: flex;
align-items: center;
gap: 14px;
padding: 14px;
background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
border: 1px solid #BBF7D0;
border-radius: 12px;
margin-bottom: 16px;
}
.approval-user-card.rejection-card[b-srkbznhlts] {
background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
border-color: #FECACA;
}
.approval-user-card.tenant-access-card[b-srkbznhlts] {
background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
border-color: #93C5FD;
}
.request-reason-box[b-srkbznhlts] {
font-style: italic;
color: #4B5563;
background: #F8FAFC;
}
.approval-avatar[b-srkbznhlts] {
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
font-weight: 600;
color: white;
flex-shrink: 0;
}
/* Avatar color variants for approval modal */
.approval-avatar.avatar-blue[b-srkbznhlts] {
background: linear-gradient(135deg, #3B82F6, #1D4ED8);
}
.approval-avatar.avatar-green[b-srkbznhlts] {
background: linear-gradient(135deg, #10B981, #047857);
}
.approval-avatar.avatar-orange[b-srkbznhlts] {
background: linear-gradient(135deg, #F59E0B, #D97706);
}
.approval-avatar.avatar-purple[b-srkbznhlts] {
background: linear-gradient(135deg, #8B5CF6, #6D28D9);
}
.approval-avatar.avatar-teal[b-srkbznhlts] {
background: linear-gradient(135deg, #14B8A6, #0D9488);
}
.approval-avatar.avatar-default[b-srkbznhlts] {
background: linear-gradient(135deg, #6B7280, #4B5563);
}
.approval-user-info[b-srkbznhlts] {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.approval-user-name[b-srkbznhlts] {
font-size: 1rem;
font-weight: 600;
color: #1F2937;
margin: 0;
}
.approval-user-email[b-srkbznhlts] {
font-size: 0.85rem;
color: #6B7280;
}
.approval-user-title[b-srkbznhlts] {
font-size: 0.8rem;
color: #9CA3AF;
}
/* Approval Sections */
.approval-section[b-srkbznhlts] {
margin-bottom: 16px;
}
.approval-label[b-srkbznhlts] {
display: block;
font-size: 0.75rem;
font-weight: 600;
color: #6B7280;
text-transform: uppercase;
letter-spacing: 0.03em;
margin-bottom: 6px;
}
.approval-value[b-srkbznhlts] {
font-size: 0.95rem;
font-weight: 500;
color: #1F2937;
padding: 10px 14px;
background: #F9FAFB;
border-radius: 8px;
border: 1px solid #E5E7EB;
}
/* Role Selector */
.role-selector[b-srkbznhlts] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.role-option[b-srkbznhlts] {
display: flex;
align-items: center;
gap: 10px;
padding: 12px;
background: white;
border: 2px solid #E5E7EB;
border-radius: 10px;
cursor: pointer;
transition: all 0.2s ease;
}
.role-option:hover[b-srkbznhlts] {
border-color: var(--brand-500);
background: #F8FAFC;
}
.role-option.selected[b-srkbznhlts] {
border-color: #10B981;
background: linear-gradient(135deg, #F0FDF4 0%, #ECFDF5 100%);
}
.role-icon[b-srkbznhlts] {
width: 36px;
height: 36px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
background: #F1F5F9;
color: #6B7280;
font-size: 1rem;
flex-shrink: 0;
}
.role-option.selected .role-icon[b-srkbznhlts] {
background: #D1FAE5;
color: #059669;
}
.role-details[b-srkbznhlts] {
display: flex;
flex-direction: column;
gap: 1px;
flex: 1;
min-width: 0;
}
.role-name[b-srkbznhlts] {
font-size: 0.875rem;
font-weight: 600;
color: #1F2937;
}
.role-description[b-srkbznhlts] {
font-size: 0.7rem;
color: #9CA3AF;
}
.role-check[b-srkbznhlts] {
width: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
}
/* Custom Textarea */
.custom-textarea[b-srkbznhlts] {
border: 1px solid #E2E8F0;
border-radius: 10px;
padding: 12px 14px;
font-size: 0.95rem;
transition: all 0.2s ease;
resize: vertical;
}
.custom-textarea:focus[b-srkbznhlts] {
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
outline: none;
}
/* Modal Buttons (canonical: ghost cancel, solid semantic confirm) */
.btn-modal-cancel[b-srkbznhlts] {
padding: 0.55rem 1.15rem;
font-size: 0.9rem;
font-weight: 600;
background: transparent;
border: 1px solid #E2E8F0;
border-radius: 10px;
color: #64748B;
cursor: pointer;
transition: all 0.15s ease;
}
.btn-modal-cancel:hover[b-srkbznhlts] {
background: #F1F5F9;
color: #0F172A;
}
.btn-modal-approve[b-srkbznhlts] {
padding: 0.55rem 1.15rem;
font-size: 0.9rem;
font-weight: 600;
background: var(--success-600, #059669);
border: none;
border-radius: 10px;
color: white;
cursor: pointer;
transition: all 0.15s ease;
display: inline-flex;
align-items: center;
gap: 6px;
}
.btn-modal-approve:hover:not(:disabled)[b-srkbznhlts] {
background: var(--success-700, #047857);
}
.btn-modal-approve:disabled[b-srkbznhlts] {
opacity: 0.6;
cursor: not-allowed;
}
.btn-modal-reject[b-srkbznhlts] {
padding: 0.55rem 1.15rem;
font-size: 0.9rem;
font-weight: 600;
background: var(--error-600, #DC2626);
border: none;
border-radius: 10px;
color: white;
cursor: pointer;
transition: all 0.15s ease;
display: inline-flex;
align-items: center;
gap: 6px;
}
.btn-modal-reject:hover:not(:disabled)[b-srkbznhlts] {
background: var(--error-700, #B91C1C);
}
.btn-modal-reject:disabled[b-srkbznhlts] {
opacity: 0.6;
cursor: not-allowed;
}
/* ========================================
Responsive
======================================== */
@media (max-width: 768px) {
.content-header[b-srkbznhlts] {
flex-direction: column;
gap: 16px;
align-items: flex-start;
}
.header-stats[b-srkbznhlts] {
width: 100%;
justify-content: flex-start;
overflow-x: auto;
padding-bottom: 4px;
}
.tab-header[b-srkbznhlts] {
flex-direction: column;
align-items: flex-start;
}
.tab-actions[b-srkbznhlts] {
width: 100%;
flex-wrap: wrap;
}
}
/* ========================================
Filter Dropdowns - Themed Styles
======================================== */
.filter-dropdown[b-srkbznhlts] {
position: relative;
}
.filter-dropdown .btn-filter[b-srkbznhlts] {
display: flex;
align-items: center;
gap: 8px;
background: white;
border: 1px solid #E5E7EB;
border-radius: 8px;
padding: 8px 14px;
font-size: 0.8rem;
color: #374151;
font-weight: 500;
transition: all 0.2s;
white-space: nowrap;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.filter-dropdown .btn-filter:hover[b-srkbznhlts] {
background: #F9FAFB;
border-color: #D1D5DB;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
.filter-dropdown .btn-filter:focus[b-srkbznhlts] {
outline: none;
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.1);
}
.filter-dropdown .btn-filter i:first-child[b-srkbznhlts] {
color: #6B7280;
font-size: 0.85rem;
}
.filter-dropdown .dropdown-menu[b-srkbznhlts] {
min-width: 220px;
max-width: 280px;
padding: 8px 0;
border: 1px solid #E5E7EB;
border-radius: 12px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 10px 15px -3px rgba(0, 0, 0, 0.08),
0 20px 25px -5px rgba(0, 0, 0, 0.05);
background: white;
margin-top: 4px;
z-index: 1050;
overflow: hidden;
}
.filter-dropdown .dropdown-header[b-srkbznhlts] {
font-size: 0.7rem;
font-weight: 600;
color: #6B7280;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 8px 16px 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.filter-dropdown .dropdown-item[b-srkbznhlts] {
display: flex;
align-items: center;
padding: 10px 16px;
font-size: 0.8rem;
color: #374151;
border: none;
background: none;
width: 100%;
text-align: left;
cursor: pointer;
transition: background 0.15s;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.filter-dropdown .dropdown-item:hover[b-srkbznhlts] {
background: rgba(15, 23, 42, 0.05);
}
.filter-dropdown .dropdown-item.active[b-srkbznhlts] {
background: rgba(15, 23, 42, 0.08);
color: var(--brand-500);
font-weight: 600;
}
.filter-dropdown .dropdown-item i[b-srkbznhlts] {
font-size: 0.85rem;
}
.filter-dropdown .dropdown-divider[b-srkbznhlts] {
margin: 6px 12px;
border-color: #F3F4F6;
opacity: 1;
}
/* /Components/Pages/BankPortal/WorkspacePage.razor.rz.scp.css */
/* ========================================
Page Animations
======================================== */
@keyframes fadeInDown-b-ldh198rlgp {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInUp-b-ldh198rlgp {
from {
opacity: 0;
transform: translateY(15px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn-b-ldh198rlgp {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideInRight-b-ldh198rlgp {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* ========================================
Header & Content Animations
======================================== */
.content-header[b-ldh198rlgp] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-lg);
animation: fadeInDown-b-ldh198rlgp 0.4s ease-out;
}
@media (max-width: 768px) {
.content-header[b-ldh198rlgp] {
flex-direction: column;
gap: 16px;
}
}
.content-header .topbar-cta-btn[b-ldh198rlgp] {
color: var(--text-inverse);
}
.content-header .topbar-cta-btn:hover[b-ldh198rlgp] {
/* was a hardcoded navy background — overrode the accent color entirely and never reflected
an Agency's theme; filter-darken instead, matching the global .topbar-cta-btn:hover rule */
filter: brightness(0.9);
color: var(--text-inverse);
}
.content-header .topbar-cta-btn .icon[b-ldh198rlgp] {
color: var(--text-inverse);
}
/* Refresh button spinning animation */
@keyframes spin-b-ldh198rlgp {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.bi-arrow-clockwise.spinning[b-ldh198rlgp] {
animation: spin-b-ldh198rlgp 1s linear infinite;
}
.card-grid[b-ldh198rlgp] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
margin-bottom: var(--space-md);
}
.card-grid .card[b-ldh198rlgp] {
padding: 16px;
border-radius: 16px;
border: 1px solid var(--brand-100);
box-shadow: 0 5px 12px rgba(15, 23, 42, 0.08);
min-height: 120px;
animation: fadeInUp-b-ldh198rlgp 0.4s ease-out forwards;
opacity: 0;
}
/* Staggered card animations */
.card-grid .card:nth-child(1)[b-ldh198rlgp] { animation-delay: 50ms; }
.card-grid .card:nth-child(2)[b-ldh198rlgp] { animation-delay: 100ms; }
.card-grid .card:nth-child(3)[b-ldh198rlgp] { animation-delay: 150ms; }
.card-grid .card:nth-child(4)[b-ldh198rlgp] { animation-delay: 200ms; }
.card-grid .card:nth-child(5)[b-ldh198rlgp] { animation-delay: 250ms; }
.card-grid .card:nth-child(6)[b-ldh198rlgp] { animation-delay: 300ms; }
.clickable-card[b-ldh198rlgp] {
cursor: pointer;
}
.card-stat-header[b-ldh198rlgp] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 12px;
gap: 12px;
}
.card-stat-body[b-ldh198rlgp] {
flex: 1;
}
.card-stat-label[b-ldh198rlgp] {
font-size: 12px;
color: var(--text-secondary);
margin-bottom: 4px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.card-stat-value[b-ldh198rlgp] {
font-size: 30px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 2px;
line-height: 1;
}
.card-stat-context[b-ldh198rlgp] {
font-size: 12px;
color: var(--text-muted);
display: flex;
align-items: center;
gap: 6px;
}
.card-stat-context i[b-ldh198rlgp] {
font-size: 11px;
}
.card-grid .card-icon[b-ldh198rlgp] {
border-radius: 14px;
padding: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.card-grid .card-icon i[b-ldh198rlgp] {
font-size: 20px;
}
.card-icon.card-icon-neutral[b-ldh198rlgp] {
background: linear-gradient(135deg, var(--neutral-100), var(--neutral-50));
color: var(--neutral-600);
}
.card-icon.card-icon-accent[b-ldh198rlgp] {
background: linear-gradient(135deg, var(--accent-100), var(--accent-50));
color: var(--accent-700);
}
.card-icon.card-icon-error[b-ldh198rlgp] {
background: linear-gradient(135deg, var(--error-100), var(--error-50));
color: var(--error-700);
}
.card-icon.card-icon-success[b-ldh198rlgp] {
background: linear-gradient(135deg, var(--success-100), var(--success-50));
color: var(--success-700);
}
/* ========================================
Table Styles (Matching InboxPage)
======================================== */
.table-responsive[b-ldh198rlgp] {
overflow-x: auto;
margin: 0;
}
.dashboard-table[b-ldh198rlgp] {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 0.875rem;
}
.dashboard-table thead[b-ldh198rlgp] {
background-color: #F8FAFC;
position: sticky;
top: 0;
z-index: 1;
}
.dashboard-table thead th[b-ldh198rlgp] {
padding: 10px 12px;
text-align: left;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #64748B;
border-bottom: 1px solid #E2E8F0;
white-space: nowrap;
user-select: none;
}
.dashboard-table thead th:hover[b-ldh198rlgp] {
color: var(--brand-500);
background-color: #F1F5F9;
}
.dashboard-table tbody tr[b-ldh198rlgp] {
transition: all 0.12s ease;
border-left: 3px solid transparent;
background: white;
animation: fadeIn-b-ldh198rlgp 0.3s ease-out forwards;
opacity: 0;
}
/* Staggered row animations */
.dashboard-table tbody tr:nth-child(1)[b-ldh198rlgp] { animation-delay: 50ms; }
.dashboard-table tbody tr:nth-child(2)[b-ldh198rlgp] { animation-delay: 80ms; }
.dashboard-table tbody tr:nth-child(3)[b-ldh198rlgp] { animation-delay: 110ms; }
.dashboard-table tbody tr:nth-child(4)[b-ldh198rlgp] { animation-delay: 140ms; }
.dashboard-table tbody tr:nth-child(5)[b-ldh198rlgp] { animation-delay: 170ms; }
.dashboard-table tbody tr:nth-child(6)[b-ldh198rlgp] { animation-delay: 200ms; }
.dashboard-table tbody tr:nth-child(7)[b-ldh198rlgp] { animation-delay: 230ms; }
.dashboard-table tbody tr:nth-child(8)[b-ldh198rlgp] { animation-delay: 260ms; }
.dashboard-table tbody tr:nth-child(9)[b-ldh198rlgp] { animation-delay: 290ms; }
.dashboard-table tbody tr:nth-child(10)[b-ldh198rlgp] { animation-delay: 320ms; }
.dashboard-table tbody tr:nth-child(n+11)[b-ldh198rlgp] { animation-delay: 350ms; }
.dashboard-table tbody tr:nth-child(even)[b-ldh198rlgp] {
background-color: #FAFBFC;
}
.dashboard-table tbody tr:hover[b-ldh198rlgp] {
background-color: #EFF6FF;
border-left: 3px solid var(--brand-500);
}
.dashboard-table tbody td[b-ldh198rlgp] {
padding: 5px 8px;
border-bottom: 1px solid #F1F5F9;
vertical-align: middle;
color: #374151;
}
/* Empty State */
.empty-state[b-ldh198rlgp] {
text-align: center;
padding: 48px 32px !important;
color: #6B7280;
}
.empty-state i[b-ldh198rlgp] {
font-size: 40px;
display: block;
margin-bottom: 12px;
color: #D1D5DB;
}
.empty-state span[b-ldh198rlgp] {
font-size: 0.9rem;
color: #9CA3AF;
}
/* ========================================
Loan Number & Amount
======================================== */
.loan-number[b-ldh198rlgp] {
color: var(--brand-500);
font-weight: 600;
text-decoration: none;
transition: all 0.15s;
font-size: 0.875rem;
}
.loan-number:hover[b-ldh198rlgp] {
color: #004880;
text-decoration: underline;
}
.amount-cell[b-ldh198rlgp] {
font-weight: 600;
color: #1F2937;
font-size: 0.875rem;
font-variant-numeric: tabular-nums;
}
/* ========================================
Status Badges
======================================== */
.dashboard-table .badge[b-ldh198rlgp] {
padding: 5px 10px;
font-size: 0.8rem;
font-weight: 600;
border-radius: 20px;
display: inline-flex;
align-items: center;
gap: 4px;
}
.dashboard-table .badge i[b-ldh198rlgp] {
font-size: 12px;
}
.badge.bg-danger[b-ldh198rlgp] {
background-color: #FEE2E2 !important;
color: var(--error-600) !important;
}
.badge.bg-warning[b-ldh198rlgp] {
background-color: #FEF3C7 !important;
color: #D97706 !important;
}
.badge.bg-secondary[b-ldh198rlgp] {
background-color: #F3F4F6 !important;
color: #4B5563 !important;
}
.badge.bg-info[b-ldh198rlgp] {
background-color: #E0F2FE !important;
color: #0369A1 !important;
}
.badge.bg-success[b-ldh198rlgp] {
background-color: #D1FAE5 !important;
color: #047857 !important;
}
.badge.bg-primary[b-ldh198rlgp] {
background-color: #DBEAFE !important;
color: #1D4ED8 !important;
}
/* ========================================
Action Buttons
======================================== */
.btn-action[b-ldh198rlgp] {
color: var(--brand-500);
background-color: transparent;
border: 1px solid #E5E7EB;
padding: 6px 14px;
font-size: 0.8rem;
font-weight: 500;
border-radius: 6px;
transition: all 0.15s;
display: inline-flex;
align-items: center;
gap: 4px;
}
.btn-action:hover[b-ldh198rlgp] {
background-color: var(--accent-color);
color: white;
border-color: var(--accent-color);
}
.btn-action i[b-ldh198rlgp] {
font-size: 0.85rem;
}
/* Subtle Action Button (outlined style - visible but not prominent) */
.btn-action-subtle[b-ldh198rlgp] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
font-size: 0.8rem;
font-weight: 500;
color: var(--brand-500);
background-color: white;
border: 1px solid #E5E7EB;
border-radius: 5px;
cursor: pointer;
transition: all 0.15s ease;
}
.btn-action-subtle:hover[b-ldh198rlgp] {
background-color: #EFF6FF;
color: #004880;
border-color: #BFDBFE;
}
.btn-action-subtle i[b-ldh198rlgp] {
font-size: 0.8rem;
color: var(--brand-500);
}
.btn-action-subtle:hover i[b-ldh198rlgp] {
color: #004880;
}
/* Actions column right align */
.actions-cell[b-ldh198rlgp] {
text-align: right;
}
/* Policy Number */
.policy-number[b-ldh198rlgp] {
color: var(--brand-500);
font-weight: 600;
text-decoration: none;
transition: all 0.15s;
font-size: 0.875rem;
}
.policy-number:hover[b-ldh198rlgp] {
color: #004880;
text-decoration: underline;
}
/* Tab panels: keep mounted; hide inactive without display:none to avoid reflow flicker */
.dashboard-tab-panel.is-hidden[b-ldh198rlgp] {
position: absolute;
left: -10000px;
top: 0;
width: 1px;
height: 1px;
overflow: hidden;
visibility: hidden;
}
.dashboard-tab-panel.is-active[b-ldh198rlgp] {
position: relative;
left: auto;
width: auto;
height: auto;
overflow: visible;
visibility: visible;
animation: fadeIn-b-ldh198rlgp 0.25s ease-out;
}
/* Bulk Actions Styling */
.bulk-actions-container[b-ldh198rlgp] {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: var(--brand-50);
border: 1px solid var(--brand-200);
border-radius: 8px;
}
.selected-count-badge[b-ldh198rlgp] {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 500;
color: var(--brand-700);
}
.selected-count-badge i[b-ldh198rlgp] {
font-size: 14px;
color: var(--brand-600);
}
.btn-delete-bulk[b-ldh198rlgp] {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
font-size: 13px;
font-weight: 500;
color: var(--error-600);
background: var(--error-50);
border: 1px solid var(--error-200);
border-radius: 6px;
cursor: pointer;
transition: all 0.15s ease;
}
.btn-delete-bulk:hover:not(:disabled)[b-ldh198rlgp] {
background: var(--error-100);
border-color: var(--error-300);
color: var(--error-700);
}
.btn-delete-bulk:disabled[b-ldh198rlgp] {
opacity: 0.6;
cursor: not-allowed;
}
.btn-delete-bulk i[b-ldh198rlgp] {
font-size: 14px;
}
/* Header Action Buttons (icon-only buttons like select, refresh) */
.btn-header-action[b-ldh198rlgp] {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
font-size: 16px;
color: var(--text-secondary, #475569);
background: #ffffff;
border: 1px solid var(--border-medium);
border-radius: 8px;
cursor: pointer;
transition: all 0.15s ease;
}
.btn-header-action:hover:not(:disabled)[b-ldh198rlgp] {
color: var(--brand-600);
background: var(--brand-50);
border-color: var(--brand-200);
}
.btn-header-action.active[b-ldh198rlgp] {
color: var(--brand-600);
background: var(--brand-50);
border-color: var(--brand-300);
}
.btn-header-action:disabled[b-ldh198rlgp] {
opacity: 0.5;
cursor: not-allowed;
}
.btn-header-action i[b-ldh198rlgp] {
font-size: 16px;
}
/* Selected row highlighting */
.dashboard-table tr.table-active[b-ldh198rlgp] {
background-color: var(--brand-50);
transition: background-color 0.15s ease;
}
.dashboard-table tr.table-active td[b-ldh198rlgp] {
background-color: var(--brand-50);
border-bottom-color: var(--brand-100);
}
.dashboard-table tr.table-active:hover td[b-ldh198rlgp] {
background-color: var(--brand-100);
}
/* Completion Progress Indicator */
.completion-indicator[b-ldh198rlgp] {
display: flex;
align-items: center;
gap: 8px;
min-width: 100px;
}
.completion-bar[b-ldh198rlgp] {
flex: 1;
height: 6px;
background-color: var(--neutral-200);
border-radius: 3px;
overflow: hidden;
}
.completion-fill[b-ldh198rlgp] {
height: 100%;
border-radius: 3px;
transition: width 0.3s ease;
}
.completion-fill.completion-complete[b-ldh198rlgp] {
background-color: var(--success-500);
}
.completion-fill.completion-high[b-ldh198rlgp] {
background-color: var(--brand-500);
}
.completion-fill.completion-medium[b-ldh198rlgp] {
background-color: var(--accent-500);
}
.completion-fill.completion-low[b-ldh198rlgp] {
background-color: var(--warning-500);
}
.completion-fill.completion-minimal[b-ldh198rlgp] {
background-color: var(--neutral-400);
}
.completion-text[b-ldh198rlgp] {
font-size: 12px;
font-weight: 500;
color: var(--text-secondary, #475569);
min-width: 32px;
text-align: right;
}
/* Custom purple badge classes for ReferredToUnderwriter status */
.bg-purple-subtle[b-ldh198rlgp] {
background-color: #E9D5FF !important;
}
.border-purple-subtle[b-ldh198rlgp] {
border-color: #C4B5FD !important;
}
.text-purple-emphasis[b-ldh198rlgp] {
color: #6B21A8 !important;
}
/* Custom orange badge classes for Referral status */
.bg-orange-subtle[b-ldh198rlgp] {
background-color: #FED7AA !important;
}
.border-orange-subtle[b-ldh198rlgp] {
border-color: #FDBA74 !important;
}
.text-orange-emphasis[b-ldh198rlgp] {
color: #9A3412 !important;
}
/* Feature 072 — custom teal badge classes for the AwaitingBorrower ("Waiting for Borrower")
status. Needed because Bootstrap 5.3 ships no teal *-subtle utility, and because the
ToSubtleBadgeClass fallback is grey, which is indistinguishable from Cancelled/Archived. */
.bg-teal-subtle[b-ldh198rlgp] {
background-color: #CCFBF1 !important;
}
.border-teal-subtle[b-ldh198rlgp] {
border-color: #5EEAD4 !important;
}
.text-teal-emphasis[b-ldh198rlgp] {
color: #115E59 !important;
}
/* Card with tabs animation */
.card.card-with-tabs[b-ldh198rlgp] {
animation: fadeInUp-b-ldh198rlgp 0.4s ease-out;
}
/* Action items list animation */
.action-items-list .action-item[b-ldh198rlgp] {
animation: slideInRight-b-ldh198rlgp 0.3s ease-out forwards;
opacity: 0;
}
.action-items-list .action-item:nth-child(1)[b-ldh198rlgp] { animation-delay: 100ms; }
.action-items-list .action-item:nth-child(2)[b-ldh198rlgp] { animation-delay: 200ms; }
.action-items-list .action-item:nth-child(3)[b-ldh198rlgp] { animation-delay: 300ms; }
.action-items-list .action-item:nth-child(4)[b-ldh198rlgp] { animation-delay: 400ms; }
.action-items-list .action-item:nth-child(5)[b-ldh198rlgp] { animation-delay: 500ms; }
.action-items-list .action-item:nth-child(n+6)[b-ldh198rlgp] { animation-delay: 600ms; }
/* /Components/Pages/BorrowerPaymentPage.razor.rz.scp.css */
.borrower-payment-page[b-wta5r0200l] {
max-width: 800px;
margin: 0 auto;
padding: 24px 16px;
font-family: 'Inter', system-ui, sans-serif;
color: #374151;
}
/* Loading / Error / Success */
.loading-container[b-wta5r0200l], .error-container[b-wta5r0200l], .success-container[b-wta5r0200l] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 50vh;
text-align: center;
gap: 16px;
}
.error-card[b-wta5r0200l], .success-card[b-wta5r0200l] {
padding: 40px;
border-radius: 12px;
max-width: 500px;
}
.error-icon[b-wta5r0200l] {
font-size: 48px;
color: #DC2626;
}
.success-icon[b-wta5r0200l] {
font-size: 48px;
color: #059669;
}
.success-card h2[b-wta5r0200l] {
color: #059669;
margin: 16px 0 8px;
}
.error-card h2[b-wta5r0200l] {
color: #DC2626;
margin: 16px 0 8px;
}
/* Header */
.payment-header[b-wta5r0200l] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 16px;
margin: -24px -16px 32px;
border-bottom: 3px solid #0D6785;
background: white;
}
.header-brand[b-wta5r0200l] {
display: flex;
align-items: center;
}
/* Same class name and treatment as the brand logo on the premium estimate
document (Components/Pages/Applications/PremiumEstimatePreviewPage.razor.css).
lendiligence.png is 443x61, a much wider wordmark than the 399x138 mark it
replaced, so the box is shorter to keep the header row the same height. */
.brand-logo[b-wta5r0200l] {
height: 40px;
width: auto;
}
.header-auth[b-wta5r0200l] {
display: flex;
flex-direction: column;
align-items: flex-end;
padding: 10px 16px;
border: 1px solid #E5E7EB;
border-radius: 8px;
font-size: 13px;
gap: 2px;
}
.auth-label[b-wta5r0200l] {
font-size: 12px;
font-weight: 700;
color: #374151;
}
.auth-bank[b-wta5r0200l] {
color: #0D6785;
font-weight: 600;
}
.auth-contact[b-wta5r0200l] {
font-size: 12px;
color: #6B7280;
display: flex;
align-items: center;
gap: 4px;
}
.auth-divider[b-wta5r0200l] {
color: #D1D5DB;
}
/* Title */
.payment-title-section[b-wta5r0200l] {
text-align: center;
margin-bottom: 32px;
}
.payment-title-section h1[b-wta5r0200l] {
font-size: 28px;
font-weight: 700;
color: #0D6785;
margin: 0 0 8px;
}
.payment-title-section p[b-wta5r0200l] {
font-size: 16px;
color: #6B7280;
margin: 0;
}
/* Cards */
.info-card[b-wta5r0200l] {
background: white;
border: 1px solid #E5E7EB;
border-radius: 12px;
padding: 24px;
margin-bottom: 20px;
}
.info-card h3[b-wta5r0200l] {
font-size: 18px;
font-weight: 700;
color: #111827;
margin: 0 0 12px;
}
.info-card p[b-wta5r0200l] {
font-size: 14px;
line-height: 1.6;
color: #4B5563;
margin: 0 0 12px;
}
.veracheck-info[b-wta5r0200l] {
background: #F0FDFA;
border-radius: 8px;
padding: 16px;
margin-top: 12px;
}
.veracheck-info h4[b-wta5r0200l] {
font-size: 16px;
font-weight: 600;
color: #0D6785;
margin: 0 0 8px;
}
.veracheck-info p[b-wta5r0200l] {
color: #374151;
margin: 0;
}
/* Verify Fields */
.verify-field[b-wta5r0200l] {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 16px;
background: #F9FAFB;
border-radius: 8px;
margin-bottom: 10px;
}
.verify-field i[b-wta5r0200l] {
color: #0D6785;
font-size: 16px;
margin-top: 2px;
}
.verify-field label[b-wta5r0200l] {
display: block;
font-size: 12px;
font-weight: 600;
color: #0D6785;
margin-bottom: 2px;
}
.verify-field span[b-wta5r0200l] {
font-size: 14px;
color: #111827;
}
.verify-note[b-wta5r0200l] {
font-size: 12px !important;
color: #9CA3AF !important;
font-style: italic;
margin-top: 8px;
}
/* Payment Card */
.payment-card[b-wta5r0200l] {
background: white;
border: 2px solid #0D6785;
border-radius: 12px;
padding: 32px 24px;
margin-bottom: 20px;
text-align: center;
}
.payment-card h3[b-wta5r0200l] {
font-size: 22px;
font-weight: 700;
color: #111827;
margin: 0 0 8px;
}
.secure-badge[b-wta5r0200l] {
font-size: 13px;
color: #6B7280;
margin: 0 0 20px;
}
.secure-badge i[b-wta5r0200l] {
color: #0D6785;
}
.payment-amount-box[b-wta5r0200l] {
background: #F9FAFB;
border-radius: 8px;
padding: 16px;
margin-bottom: 20px;
text-align: left;
}
.payment-amount-box p[b-wta5r0200l] {
font-size: 14px;
line-height: 1.6;
color: #374151;
margin: 0;
}
.payment-amount-box strong[b-wta5r0200l] {
color: #0D6785;
font-size: 18px;
}
.btn-pay[b-wta5r0200l] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 16px 32px;
background: #0D6785;
color: white;
border: none;
border-radius: 10px;
font-size: 18px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
margin-bottom: 16px;
}
.btn-pay:hover:not(:disabled)[b-wta5r0200l] {
background: #0A526A;
box-shadow: 0 4px 12px rgba(13, 103, 133, 0.3);
}
.btn-pay:disabled[b-wta5r0200l] {
background: #9CA3AF;
cursor: not-allowed;
}
.payment-methods[b-wta5r0200l] {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 13px;
color: #9CA3AF;
}
.card-badge[b-wta5r0200l] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border: 1px solid #E5E7EB;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
color: #374151;
background: white;
}
.card-icon[b-wta5r0200l] {
width: 28px;
height: 18px;
flex-shrink: 0;
}
/* Timeline */
.timeline[b-wta5r0200l] {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
padding: 20px 0;
}
.timeline-step[b-wta5r0200l] {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
font-size: 13px;
color: #9CA3AF;
}
.timeline-step.active[b-wta5r0200l] {
color: #0D6785;
}
.timeline-icon[b-wta5r0200l] {
width: 56px;
height: 56px;
border-radius: 50%;
background: #F3F4F6;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: #9CA3AF;
}
.timeline-step.active .timeline-icon[b-wta5r0200l] {
background: #0D6785;
color: white;
}
.timeline-line[b-wta5r0200l] {
width: 60px;
height: 2px;
background: #E5E7EB;
margin-bottom: 24px;
}
/* Next Steps */
.next-steps[b-wta5r0200l] {
display: flex;
flex-direction: column;
gap: 16px;
}
.next-step[b-wta5r0200l] {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 14px;
line-height: 1.6;
}
.step-number[b-wta5r0200l] {
width: 28px;
height: 28px;
border-radius: 50%;
background: #0D6785;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
flex-shrink: 0;
}
/* Footer */
.payment-footer[b-wta5r0200l] {
text-align: center;
padding: 24px 0;
margin-top: 20px;
border-top: 1px solid #E5E7EB;
background: #F9FAFB;
border-radius: 0 0 12px 12px;
margin: 20px -16px 0;
padding: 24px 16px;
}
.footer-brand[b-wta5r0200l] {
font-size: 16px;
font-weight: 700;
color: #374151;
font-style: italic;
margin-bottom: 8px;
}
.footer-links[b-wta5r0200l] {
display: flex;
justify-content: center;
gap: 20px;
font-size: 13px;
color: #6B7280;
margin-bottom: 12px;
flex-wrap: wrap;
}
.footer-links i[b-wta5r0200l] {
margin-right: 4px;
color: #9CA3AF;
}
.footer-copyright[b-wta5r0200l] {
font-size: 12px;
color: #9CA3AF;
margin: 0;
}
/* Responsive */
@media (max-width: 640px) {
.payment-header[b-wta5r0200l] {
flex-direction: column;
gap: 12px;
align-items: flex-start;
}
.header-auth[b-wta5r0200l] {
align-items: flex-start;
}
.payment-title-section h1[b-wta5r0200l] {
font-size: 22px;
}
.timeline[b-wta5r0200l] {
gap: 0;
}
.timeline-line[b-wta5r0200l] {
width: 30px;
}
.footer-links[b-wta5r0200l] {
flex-direction: column;
gap: 8px;
}
}
/* /Components/Pages/BorrowerQuestionnairePage.razor.rz.scp.css */
/* Feature 072 — borrower questionnaire page.
Written in the same self-contained, plain-CSS idiom as BorrowerPaymentPage.razor.css rather than
over the portal's leca-theme utilities: this is the one page in the application shown to someone who
is not a user, on an unknown device, with no navigation around it. The layout classes it does borrow
(.form-group, .form-label, .radio-group-inline, .radio-label, .child-question-section,
.question-label, .grandchild-*) come from wwwroot/css/input-components.css, which is loaded globally
and therefore reaches the shared YesNoRadioGroup / PercentageInput markup that this page's scoped CSS
cannot. Everything defined here is prefixed .bq- so it cannot collide with the portal. */
.borrower-questionnaire-page[b-q3plblkbdt] {
max-width: 820px;
margin: 0 auto;
padding: 24px 16px;
font-family: 'Inter', system-ui, sans-serif;
color: #374151;
}
/* ---------- Loading / dead link / confirmation ---------- */
.bq-centered[b-q3plblkbdt] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 60vh;
text-align: center;
gap: 16px;
}
.bq-notice[b-q3plblkbdt] {
padding: 40px;
border-radius: 12px;
max-width: 520px;
border: 1px solid #E5E7EB;
background: #fff;
}
.bq-notice h2[b-q3plblkbdt] {
margin: 16px 0 12px;
font-size: 22px;
}
.bq-notice p[b-q3plblkbdt] {
margin: 0 0 8px;
font-size: 15px;
line-height: 1.55;
}
.bq-notice-icon[b-q3plblkbdt] {
font-size: 44px;
}
/* Deliberately neutral, not alarming: the commonest reason a borrower lands here is that they already
finished, and the second commonest is that the link simply aged out. Neither is an error they did. */
.bq-notice-dead .bq-notice-icon[b-q3plblkbdt] {
color: #6B7280;
}
.bq-notice-dead h2[b-q3plblkbdt] {
color: #374151;
}
.bq-notice-done .bq-notice-icon[b-q3plblkbdt] {
color: #059669;
}
.bq-notice-done h2[b-q3plblkbdt] {
color: #059669;
}
.bq-muted[b-q3plblkbdt] {
color: #6B7280;
font-size: 14px;
}
/* ---------- Header ---------- */
.bq-header[b-q3plblkbdt] {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
padding: 20px 16px;
margin: -24px -16px 28px;
border-bottom: 3px solid #0D6785;
background: #fff;
}
/* 46px, not the 40px the old wordmark used, because the asset changed shape rather than just changing
pictures: lendiligence.png was 443x61 (7.3:1, one line of type), lp3_wlogo.jpg is 500x115 (4.3:1, a
mark plus two stacked lines). Held at 40px the taller file scales the "LENDER" line down by about a
quarter and sets "ENVIRONMENTAL DILIGENCE" too small to read. 46px is the height
PremiumEstimatePreviewPage.razor.css:216 already displays this same file at, so it is not a new value.
The header band does not grow: .bq-authorized is the taller flex item either way.
display: block is what puts .page-subtitle directly under the mark with no inline descender gap. */
.bq-logo[b-q3plblkbdt] {
height: 46px;
width: auto;
max-width: 100%;
display: block;
}
.bq-authorized[b-q3plblkbdt] {
display: flex;
flex-direction: column;
align-items: flex-end;
padding: 10px 16px;
border: 1px solid #E5E7EB;
border-radius: 8px;
font-size: 13px;
gap: 2px;
}
.bq-authorized-label[b-q3plblkbdt] {
color: #6B7280;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 11px;
}
.bq-authorized-bank[b-q3plblkbdt] {
font-weight: 600;
color: #111827;
}
.bq-authorized-contact[b-q3plblkbdt] {
color: #6B7280;
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.bq-divider[b-q3plblkbdt] {
color: #D1D5DB;
}
/* ---------- Title ---------- */
.bq-title[b-q3plblkbdt] {
text-align: center;
margin-bottom: 28px;
}
.bq-title h1[b-q3plblkbdt] {
font-size: 26px;
font-weight: 700;
color: #111827;
margin: 0 0 8px;
}
.bq-title p[b-q3plblkbdt] {
margin: 0;
color: #6B7280;
font-size: 15px;
}
/* ---------- Cards ---------- */
.bq-card[b-q3plblkbdt] {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 12px;
padding: 24px;
margin-bottom: 20px;
}
.bq-card h3[b-q3plblkbdt] {
font-size: 17px;
font-weight: 600;
color: #111827;
margin: 0 0 18px;
padding-bottom: 12px;
border-bottom: 1px solid #F3F4F6;
}
.bq-note[b-q3plblkbdt] {
margin: 14px 0 0;
font-size: 13px;
color: #6B7280;
line-height: 1.5;
}
.bq-counter[b-q3plblkbdt] {
display: block;
margin-top: 4px;
font-size: 12px;
color: #9CA3AF;
}
/* ---------- "What we already have" rows ---------- */
.bq-field[b-q3plblkbdt] {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid #F9FAFB;
}
.bq-field:last-of-type[b-q3plblkbdt] {
border-bottom: none;
}
.bq-field i[b-q3plblkbdt] {
color: #0D6785;
font-size: 18px;
margin-top: 2px;
}
.bq-field label[b-q3plblkbdt] {
display: block;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #6B7280;
margin-bottom: 2px;
}
.bq-field span[b-q3plblkbdt] {
font-size: 15px;
color: #111827;
}
/* ---------- Save state ---------- */
.bq-progress-card[b-q3plblkbdt] {
padding: 16px 24px;
background: #F0F9FF;
border-color: #BAE6FD;
}
.bq-progress-line[b-q3plblkbdt] {
display: flex;
align-items: baseline;
gap: 10px;
font-size: 14px;
color: #0369A1;
}
.bq-progress-line + .bq-progress-line[b-q3plblkbdt] {
margin-top: 6px;
}
.bq-progress-card .bq-muted[b-q3plblkbdt] {
color: #64748B;
}
/* ---------- Errors ---------- */
.bq-errors[b-q3plblkbdt] {
border-color: #FCA5A5;
background: #FEF2F2;
}
.bq-errors h3[b-q3plblkbdt] {
color: #B91C1C;
border-bottom-color: #FECACA;
}
.bq-errors ul[b-q3plblkbdt] {
margin: 0;
padding-left: 20px;
color: #B91C1C;
font-size: 14px;
}
.bq-errors li + li[b-q3plblkbdt] {
margin-top: 4px;
}
.bq-action-error[b-q3plblkbdt] {
margin: 0;
color: #B91C1C;
font-size: 14px;
}
/* ---------- Actions ---------- */
.bq-actions[b-q3plblkbdt] {
display: flex;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin: 8px 0 32px;
}
/* The bq-btn set that used to live here is gone: the two action buttons now carry the wizard CTA
canon (wizard-cta btn-save-draft / btn-submit, wwwroot/css/wizard-cta.css) and nothing else in this
page ever used these classes, so every rule below was dead. Its mobile width:100% rule went with
it — the canon carries the same rule at its own 768px breakpoint. */
/* ---------- Footer ---------- */
.bq-footer[b-q3plblkbdt] {
text-align: center;
padding: 24px 0 8px;
border-top: 1px solid #E5E7EB;
color: #6B7280;
font-size: 13px;
}
.bq-footer-brand[b-q3plblkbdt] {
font-weight: 600;
color: #0D6785;
margin-bottom: 8px;
}
.bq-footer-links[b-q3plblkbdt] {
display: flex;
justify-content: center;
gap: 18px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.bq-footer-links a[b-q3plblkbdt] {
color: #0D6785;
text-decoration: none;
}
.bq-footer-links a:hover[b-q3plblkbdt] {
text-decoration: underline;
}
.bq-footer-copyright[b-q3plblkbdt] {
margin: 0;
font-size: 12px;
color: #9CA3AF;
}
/* ---------- Inputs the shared components do not style ---------- */
/* .form-input is defined in the two intake pages' scoped CSS, which by definition does not reach this
page. The plain inputs here are styled locally rather than by hoisting that rule into a global
stylesheet, which would restyle both intake forms as a side effect. ::deep is needed because these
elements are rendered by InputText / InputSelect / InputTextArea / InputNumber, not by this page's
own markup. */
[b-q3plblkbdt] .form-input {
width: 100%;
padding: 10px 12px;
border: 1px solid #D1D5DB;
border-radius: 8px;
font-size: 15px;
color: #111827;
background: #fff;
}
[b-q3plblkbdt] .form-input:focus {
outline: none;
border-color: #0D6785;
box-shadow: 0 0 0 3px rgba(13, 103, 133, 0.12);
}
[b-q3plblkbdt] .form-input.is-invalid,
[b-q3plblkbdt] .validation-error .form-input {
border-color: #DC2626;
}
[b-q3plblkbdt] .required {
color: #DC2626;
}
[b-q3plblkbdt] .validation-message {
display: block;
margin-top: 4px;
font-size: 13px;
color: #DC2626;
}
@media (max-width: 640px) {
.bq-header[b-q3plblkbdt] {
flex-direction: column;
align-items: flex-start;
}
.bq-authorized[b-q3plblkbdt] {
align-items: flex-start;
}
.bq-actions[b-q3plblkbdt] {
flex-direction: column-reverse;
}
}
/* /Components/Pages/ContactPage.razor.rz.scp.css */
/* ========================================
Contact Page Styles - LECA Design
======================================== */
.contact-page[b-k2j2jceecd] {
max-width: 800px;
margin: 0 auto;
padding: 3rem 2rem;
}
/* Header Section */
.contact-header[b-k2j2jceecd] {
text-align: center;
margin-bottom: 3rem;
}
.contact-title[b-k2j2jceecd] {
font-size: 2.5rem;
font-weight: 700;
color: var(--text-primary);
margin: 0 0 1rem 0;
letter-spacing: -0.025em;
}
.contact-subtitle[b-k2j2jceecd] {
font-size: 1.125rem;
color: var(--text-secondary);
margin: 0;
line-height: 1.6;
}
/* Contact Info Box */
.contact-info-box[b-k2j2jceecd] {
background: #D6EAF8;
border-radius: 12px;
padding: 2.5rem 2rem;
margin-bottom: 2rem;
display: flex;
flex-direction: column;
gap: 2rem;
}
.contact-info-item[b-k2j2jceecd] {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.contact-icon[b-k2j2jceecd] {
width: 24px;
height: 24px;
color: var(--brand-600);
flex-shrink: 0;
margin-top: 2px;
}
.contact-info-content[b-k2j2jceecd] {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.contact-label[b-k2j2jceecd] {
font-weight: 600;
color: var(--text-primary);
font-size: 1rem;
}
.contact-value[b-k2j2jceecd] {
color: var(--brand-600);
font-size: 1rem;
text-decoration: none;
line-height: 1.5;
}
.contact-value:hover[b-k2j2jceecd] {
text-decoration: underline;
}
/* Office Hours */
.office-hours[b-k2j2jceecd] {
text-align: center;
color: var(--text-secondary);
font-size: 0.9375rem;
font-style: italic;
}
/* Responsive Design */
@media (max-width: 768px) {
.contact-page[b-k2j2jceecd] {
padding: 2rem 1.5rem;
}
.contact-title[b-k2j2jceecd] {
font-size: 2rem;
}
.contact-subtitle[b-k2j2jceecd] {
font-size: 1rem;
}
.contact-info-box[b-k2j2jceecd] {
padding: 2rem 1.5rem;
}
}
@media (max-width: 480px) {
.contact-page[b-k2j2jceecd] {
padding: 1.5rem 1rem;
}
.contact-title[b-k2j2jceecd] {
font-size: 1.75rem;
}
.contact-info-box[b-k2j2jceecd] {
padding: 1.5rem 1rem;
gap: 1.5rem;
}
}
/* /Components/Pages/Docs/Shared/DocsMenu.razor.rz.scp.css */
.docs-menu[b-af40l68stf] {
display: flex;
flex-direction: column;
gap: 24px;
}
.menu-section-label[b-af40l68stf] {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
color: #6b7280;
padding: 0 12px;
margin-bottom: 8px;
}
.menu-item[b-af40l68stf] {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 12px;
border-radius: 8px;
color: #374151;
text-decoration: none;
font-size: 13.5px;
font-weight: 500;
transition: all 0.12s ease;
}
.menu-item i[b-af40l68stf] {
font-size: 15px;
color: #9ca3af;
width: 18px;
text-align: center;
flex-shrink: 0;
}
.menu-item:hover[b-af40l68stf] {
background: #f3f4f6;
color: #111827;
}
.menu-item:hover i[b-af40l68stf] { color: var(--brand-600); }
.menu-item.active[b-af40l68stf] {
background: var(--brand-50);
color: var(--brand-700);
font-weight: 600;
}
.menu-item.active i[b-af40l68stf] { color: var(--brand-600); }
/* /Components/Pages/Docs/Shared/DocsSearch.razor.rz.scp.css */
.docs-search[b-90kampf9k5] { position: relative; width: 100%; }
.search-input-wrap[b-90kampf9k5] {
position: relative;
display: flex;
align-items: center;
}
.search-input-wrap > i[b-90kampf9k5] {
position: absolute;
left: 12px;
color: #9ca3af;
font-size: 14px;
pointer-events: none;
}
.search-input[b-90kampf9k5] {
width: 100%;
border: 1px solid #e5e7eb;
background: #f9fafb;
border-radius: 9px;
padding: 9px 56px 9px 36px;
font-size: 13.5px;
color: #111827;
outline: none;
transition: all 0.15s ease;
}
.search-input:focus[b-90kampf9k5] {
background: white;
border-color: var(--brand-300);
box-shadow: 0 0 0 3px rgba(0, 91, 159, 0.15);
}
.search-input[b-90kampf9k5]::placeholder { color: #9ca3af; }
.search-kbd[b-90kampf9k5] {
position: absolute;
right: 10px;
background: white;
border: 1px solid #e5e7eb;
border-bottom-width: 2px;
border-radius: 5px;
padding: 1px 6px;
font-size: 10px;
color: #6b7280;
font-family: inherit;
pointer-events: none;
}
.search-results[b-90kampf9k5] {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
background: white;
border: 1px solid #e5e7eb;
border-radius: 10px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
padding: 6px;
z-index: 100;
max-height: 400px;
overflow-y: auto;
}
.search-result[b-90kampf9k5] {
display: block;
padding: 10px 12px;
border-radius: 7px;
text-decoration: none;
color: #111827;
transition: background 0.12s ease;
}
.search-result:hover[b-90kampf9k5] { background: var(--brand-50); }
.result-section[b-90kampf9k5] {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #6b7280;
font-weight: 600;
margin-bottom: 2px;
}
.result-title[b-90kampf9k5] {
font-size: 14px;
font-weight: 600;
color: #111827;
}
.result-hint[b-90kampf9k5] {
font-size: 12.5px;
color: #6b7280;
margin-top: 2px;
}
.search-empty[b-90kampf9k5] {
text-align: center;
padding: 24px 16px;
color: #6b7280;
font-size: 13px;
}
.search-empty i[b-90kampf9k5] { font-size: 22px; display: block; margin-bottom: 6px; opacity: 0.5; }
.search-backdrop[b-90kampf9k5] {
position: fixed;
inset: 0;
z-index: 40;
}
/* /Components/Pages/Help/HelpCoveragePage.razor.rz.scp.css */
/* Help documentation coverage report (feature 032). Internal admin page: leca-theme tokens,
flat surfaces, radius 10, brand blue accent. */
.help-coverage-page[b-v7i44bn2xf] {
padding: 1.5rem;
max-width: 1100px;
margin: 0 auto;
}
.page-header[b-v7i44bn2xf] {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.5rem;
}
.page-header h1[b-v7i44bn2xf] {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text-primary);
margin: 0;
}
.header-subtitle[b-v7i44bn2xf] {
color: var(--text-secondary);
font-size: 0.9rem;
margin: 0.35rem 0 0;
max-width: 65ch;
}
.btn-refresh[b-v7i44bn2xf] {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.5rem 0.9rem;
border: 1px solid var(--border-medium);
border-radius: 10px;
background: var(--bg-surface);
color: var(--text-secondary);
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
}
.btn-refresh:hover[b-v7i44bn2xf] {
background: var(--bg-hover);
color: var(--text-primary);
}
.loading-container[b-v7i44bn2xf] {
text-align: center;
padding: 3rem 1rem;
color: var(--text-muted);
}
.coverage-error[b-v7i44bn2xf] {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.875rem 1rem;
background: var(--bg-danger);
border: 1px solid var(--error-200);
border-radius: 10px;
color: var(--error-700);
}
.coverage-summary[b-v7i44bn2xf] {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0.75rem;
margin-bottom: 2rem;
}
.summary-card[b-v7i44bn2xf] {
background: var(--bg-surface);
border: 1px solid var(--border-light);
border-radius: 10px;
padding: 1rem;
text-align: center;
}
.summary-value[b-v7i44bn2xf] {
display: block;
font-size: 1.6rem;
font-weight: 700;
color: var(--text-primary);
line-height: 1.1;
}
.summary-label[b-v7i44bn2xf] {
display: block;
font-size: 0.75rem;
color: var(--text-muted);
margin-top: 0.25rem;
}
.summary-card.ok .summary-value[b-v7i44bn2xf] { color: var(--success-600); }
.summary-card.partial .summary-value[b-v7i44bn2xf] { color: var(--warning-600); }
.summary-card.missing .summary-value[b-v7i44bn2xf] { color: var(--error-600); }
.coverage-section[b-v7i44bn2xf] {
margin-bottom: 2rem;
}
.coverage-section h2[b-v7i44bn2xf] {
font-size: 1.05rem;
font-weight: 700;
color: var(--text-primary);
margin: 0 0 0.75rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.section-hint[b-v7i44bn2xf] {
font-size: 0.8125rem;
color: var(--text-muted);
margin: -0.5rem 0 0.75rem;
}
.count-pill[b-v7i44bn2xf] {
font-size: 0.75rem;
font-weight: 600;
background: var(--bg-subtle);
color: var(--brand-700);
border-radius: 999px;
padding: 0.1rem 0.55rem;
}
.module-list[b-v7i44bn2xf] {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.module-row[b-v7i44bn2xf] {
display: grid;
grid-template-columns: 200px 1fr 70px;
align-items: center;
gap: 0.75rem;
}
.module-name[b-v7i44bn2xf] {
font-size: 0.875rem;
font-weight: 600;
color: var(--text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.module-bar[b-v7i44bn2xf] {
height: 8px;
background: var(--bg-secondary);
border-radius: 999px;
overflow: hidden;
}
.module-bar-fill[b-v7i44bn2xf] {
height: 100%;
background: var(--brand-500);
border-radius: 999px;
}
.module-count[b-v7i44bn2xf] {
font-size: 0.8125rem;
color: var(--text-muted);
text-align: right;
font-variant-numeric: tabular-nums;
}
.table-scroll[b-v7i44bn2xf] {
overflow-x: auto;
border: 1px solid var(--border-light);
border-radius: 10px;
}
.coverage-table[b-v7i44bn2xf] {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
}
.coverage-table th[b-v7i44bn2xf] {
text-align: left;
padding: 0.55rem 0.75rem;
background: var(--bg-subtle);
color: var(--text-secondary);
font-weight: 600;
border-bottom: 1px solid var(--border-light);
}
.coverage-table td[b-v7i44bn2xf] {
padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--border-light);
color: var(--text-secondary);
}
.coverage-table tr:last-child td[b-v7i44bn2xf] {
border-bottom: none;
}
.coverage-table td.muted[b-v7i44bn2xf] {
color: var(--text-muted);
}
.coverage-columns[b-v7i44bn2xf] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.id-list[b-v7i44bn2xf] {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.id-list code[b-v7i44bn2xf],
.coverage-table code[b-v7i44bn2xf] {
background: var(--bg-subtle);
padding: 0.1rem 0.4rem;
border-radius: 6px;
font-size: 0.8rem;
color: var(--text-primary);
}
.empty-note[b-v7i44bn2xf] {
font-size: 0.85rem;
color: var(--text-muted);
font-style: italic;
}
.generated-at[b-v7i44bn2xf] {
font-size: 0.75rem;
color: var(--text-disabled);
text-align: right;
}
@media (max-width: 767px) {
.coverage-summary[b-v7i44bn2xf] { grid-template-columns: repeat(2, 1fr); }
.coverage-columns[b-v7i44bn2xf] { grid-template-columns: 1fr; }
.module-row[b-v7i44bn2xf] { grid-template-columns: 120px 1fr 60px; }
}
/* /Components/Pages/Help/HelpMediaPlayer.razor.rz.scp.css */
/* Help Media Player Styles */
.help-media-player[b-ymfjbtwfeu] {
margin: 1.5rem 0;
border-radius: 12px;
overflow: hidden;
background: #f8fafc;
border: 1px solid #e2e8f0;
}
.media-container[b-ymfjbtwfeu] {
position: relative;
width: 100%;
background: #1e293b;
}
/* Video */
.media-video[b-ymfjbtwfeu] {
width: 100%;
display: block;
max-height: 500px;
}
/* GIF */
.media-gif-wrapper[b-ymfjbtwfeu] {
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
}
.media-thumbnail[b-ymfjbtwfeu],
.media-gif[b-ymfjbtwfeu] {
width: 100%;
max-height: 500px;
object-fit: contain;
display: block;
}
.play-overlay[b-ymfjbtwfeu] {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
color: white;
border: none;
cursor: pointer;
transition: background 0.2s;
}
.play-overlay:hover[b-ymfjbtwfeu] {
background: rgba(0, 0, 0, 0.6);
}
.play-overlay i[b-ymfjbtwfeu] {
font-size: 4rem;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.play-overlay span[b-ymfjbtwfeu] {
font-size: 0.875rem;
font-weight: 500;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.stop-overlay[b-ymfjbtwfeu] {
position: absolute;
bottom: 1rem;
right: 1rem;
background: rgba(0, 0, 0, 0.7);
color: white;
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
transition: opacity 0.2s;
}
.media-gif-wrapper:hover .stop-overlay[b-ymfjbtwfeu] {
opacity: 1;
}
.stop-overlay:hover[b-ymfjbtwfeu] {
background: rgba(0, 0, 0, 0.9);
}
.stop-overlay i[b-ymfjbtwfeu] {
font-size: 1.25rem;
}
/* Image */
.media-image[b-ymfjbtwfeu] {
width: 100%;
max-height: 500px;
object-fit: contain;
display: block;
cursor: pointer;
}
.expand-btn[b-ymfjbtwfeu] {
position: absolute;
bottom: 1rem;
right: 1rem;
background: rgba(0, 0, 0, 0.7);
color: white;
border: none;
width: 36px;
height: 36px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
transition: opacity 0.2s;
}
.media-container:hover .expand-btn[b-ymfjbtwfeu] {
opacity: 1;
}
.expand-btn:hover[b-ymfjbtwfeu] {
background: rgba(0, 0, 0, 0.9);
}
/* Caption */
.media-caption[b-ymfjbtwfeu] {
padding: 0.75rem 1rem;
font-size: 0.875rem;
color: #475569;
display: flex;
align-items: flex-start;
gap: 0.5rem;
line-height: 1.5;
}
.media-caption i[b-ymfjbtwfeu] {
color: #3b82f6;
flex-shrink: 0;
margin-top: 2px;
}
/* Lightbox */
.media-lightbox[b-ymfjbtwfeu] {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.9);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
cursor: pointer;
}
.lightbox-content[b-ymfjbtwfeu] {
position: relative;
max-width: 90vw;
max-height: 90vh;
cursor: default;
}
.lightbox-close[b-ymfjbtwfeu] {
position: absolute;
top: -3rem;
right: 0;
background: none;
border: none;
color: white;
font-size: 1.5rem;
cursor: pointer;
padding: 0.5rem;
opacity: 0.8;
transition: opacity 0.2s;
}
.lightbox-close:hover[b-ymfjbtwfeu] {
opacity: 1;
}
.lightbox-image[b-ymfjbtwfeu] {
max-width: 100%;
max-height: 80vh;
object-fit: contain;
border-radius: 8px;
}
.lightbox-caption[b-ymfjbtwfeu] {
color: white;
text-align: center;
padding: 1rem;
font-size: 0.875rem;
opacity: 0.9;
}
/* Responsive */
@media (max-width: 768px) {
.play-overlay i[b-ymfjbtwfeu] {
font-size: 3rem;
}
.media-lightbox[b-ymfjbtwfeu] {
padding: 1rem;
}
.lightbox-close[b-ymfjbtwfeu] {
top: -2.5rem;
}
}
/* /Components/Pages/Help/HelpPage.razor.rz.scp.css */
/* Help Page Styles */
.help-page[b-crjj02zmej] {
min-height: 100vh;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}
/* Header */
.help-header[b-crjj02zmej] {
background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
color: white;
padding: 3rem 2rem;
text-align: center;
}
.help-header-content[b-crjj02zmej] {
max-width: 800px;
margin: 0 auto;
}
.help-title[b-crjj02zmej] {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
}
.help-title i[b-crjj02zmej] {
font-size: 2rem;
}
.help-subtitle[b-crjj02zmej] {
font-size: 1.1rem;
opacity: 0.9;
margin: 0;
}
/* Search Section */
.help-search-section[b-crjj02zmej] {
padding: 0 2rem;
margin-top: -1.5rem;
position: relative;
z-index: 10;
}
.search-container[b-crjj02zmej] {
max-width: 700px;
margin: 0 auto;
}
.search-input-wrapper[b-crjj02zmej] {
position: relative;
display: flex;
align-items: center;
background: white;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.search-icon[b-crjj02zmej] {
position: absolute;
left: 1.25rem;
color: #64748b;
font-size: 1.25rem;
}
.search-input[b-crjj02zmej] {
width: 100%;
padding: 1.25rem 3rem 1.25rem 3.5rem;
border: none;
font-size: 1.1rem;
outline: none;
}
.search-input[b-crjj02zmej]::placeholder {
color: #94a3b8;
}
.search-spinner[b-crjj02zmej],
.search-clear-btn[b-crjj02zmej] {
position: absolute;
right: 1rem;
}
.search-clear-btn[b-crjj02zmej] {
background: none;
border: none;
color: #64748b;
cursor: pointer;
padding: 0.5rem;
border-radius: 50%;
transition: all 0.2s;
}
.search-clear-btn:hover[b-crjj02zmej] {
background: #f1f5f9;
color: #1e293b;
}
/* Main Content */
.help-content[b-crjj02zmej] {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
.loading-container[b-crjj02zmej] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4rem;
gap: 1rem;
color: #64748b;
}
/* Section Titles */
.section-title[b-crjj02zmej] {
font-size: 1.5rem;
font-weight: 600;
color: #1e293b;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.section-title i[b-crjj02zmej] {
color: #3b82f6;
}
/* Categories Grid */
.categories-section[b-crjj02zmej] {
margin-bottom: 3rem;
}
.categories-grid[b-crjj02zmej] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.25rem;
}
.category-card[b-crjj02zmej] {
background: white;
border-radius: 12px;
padding: 1.5rem;
display: flex;
align-items: center;
gap: 1rem;
cursor: pointer;
transition: all 0.2s;
border: 2px solid transparent;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.category-card:hover[b-crjj02zmej] {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.category-icon[b-crjj02zmej] {
width: 56px;
height: 56px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: white;
flex-shrink: 0;
}
.category-info h3[b-crjj02zmej] {
font-size: 1.1rem;
font-weight: 600;
margin: 0 0 0.25rem 0;
color: #1e293b;
}
.topic-count[b-crjj02zmej] {
font-size: 0.875rem;
color: #64748b;
}
/* Category Color Classes */
.category-getting-started .category-icon[b-crjj02zmej],
.category-getting-started.category-card:hover[b-crjj02zmej] { border-color: #10b981; }
.category-getting-started .category-icon[b-crjj02zmej] { background: linear-gradient(135deg, #10b981, #059669); }
.category-documents .category-icon[b-crjj02zmej],
.category-documents.category-card:hover[b-crjj02zmej] { border-color: #6366f1; }
.category-documents .category-icon[b-crjj02zmej] { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.category-esignature .category-icon[b-crjj02zmej],
.category-esignature.category-card:hover[b-crjj02zmej] { border-color: #f59e0b; }
.category-esignature .category-icon[b-crjj02zmej] { background: linear-gradient(135deg, #f59e0b, #d97706); }
.category-applications .category-icon[b-crjj02zmej],
.category-applications.category-card:hover[b-crjj02zmej] { border-color: #3b82f6; }
.category-applications .category-icon[b-crjj02zmej] { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.category-claims .category-icon[b-crjj02zmej],
.category-claims.category-card:hover[b-crjj02zmej] { border-color: #8b5cf6; }
.category-claims .category-icon[b-crjj02zmej] { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.category-admin .category-icon[b-crjj02zmej],
.category-admin.category-card:hover[b-crjj02zmej] { border-color: #64748b; }
.category-admin .category-icon[b-crjj02zmej] { background: linear-gradient(135deg, #64748b, #475569); }
/* Topics Grid */
.topics-grid[b-crjj02zmej] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.25rem;
}
.topic-card[b-crjj02zmej] {
background: white;
border-radius: 12px;
padding: 1.5rem;
cursor: pointer;
transition: all 0.2s;
border: 1px solid #e2e8f0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.topic-card:hover[b-crjj02zmej] {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
border-color: #3b82f6;
}
.topic-icon[b-crjj02zmej] {
width: 48px;
height: 48px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
color: white;
}
.topic-content[b-crjj02zmej] {
flex: 1;
}
.topic-title[b-crjj02zmej] {
font-size: 1.1rem;
font-weight: 600;
color: #1e293b;
margin: 0 0 0.5rem 0;
}
.topic-summary[b-crjj02zmej] {
font-size: 0.875rem;
color: #64748b;
margin: 0;
line-height: 1.5;
}
.topic-meta[b-crjj02zmej] {
display: flex;
align-items: center;
gap: 1rem;
margin-top: 0.75rem;
font-size: 0.75rem;
}
.topic-category[b-crjj02zmej] {
background: #f1f5f9;
padding: 0.25rem 0.75rem;
border-radius: 20px;
color: #475569;
font-weight: 500;
}
.topic-updated[b-crjj02zmej] {
color: #94a3b8;
}
/* Topics List */
.topics-list[b-crjj02zmej] {
background: white;
border-radius: 12px;
overflow: hidden;
border: 1px solid #e2e8f0;
}
.topic-list-item[b-crjj02zmej] {
display: flex;
align-items: center;
padding: 1rem 1.25rem;
gap: 1rem;
cursor: pointer;
transition: background 0.2s;
border-bottom: 1px solid #f1f5f9;
}
.topic-list-item:last-child[b-crjj02zmej] {
border-bottom: none;
}
.topic-list-item:hover[b-crjj02zmej] {
background: #f8fafc;
}
.topic-list-icon[b-crjj02zmej] {
width: 40px;
height: 40px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
flex-shrink: 0;
}
.topic-list-content[b-crjj02zmej] {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.topic-list-title[b-crjj02zmej] {
font-weight: 600;
color: #1e293b;
}
.topic-list-category[b-crjj02zmej] {
font-size: 0.75rem;
color: #64748b;
}
.topic-list-date[b-crjj02zmej] {
font-size: 0.75rem;
color: #94a3b8;
display: flex;
align-items: center;
gap: 0.5rem;
}
.version-badge[b-crjj02zmej] {
background: #e0f2fe;
color: #0369a1;
padding: 0.125rem 0.5rem;
border-radius: 4px;
font-weight: 500;
}
.topic-list-arrow[b-crjj02zmej] {
color: #94a3b8;
}
/* Search Results */
.search-results-section[b-crjj02zmej] {
margin-bottom: 2rem;
}
.search-results-header[b-crjj02zmej] {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.5rem;
}
.search-results-header h2[b-crjj02zmej] {
font-size: 1.5rem;
font-weight: 600;
color: #1e293b;
margin: 0;
}
.results-count[b-crjj02zmej] {
color: #64748b;
font-size: 0.875rem;
}
.search-results-list[b-crjj02zmej] {
display: flex;
flex-direction: column;
gap: 1rem;
}
.search-result-card[b-crjj02zmej] {
background: white;
border-radius: 12px;
padding: 1.25rem;
display: flex;
align-items: flex-start;
gap: 1rem;
cursor: pointer;
transition: all 0.2s;
border: 1px solid #e2e8f0;
}
.search-result-card:hover[b-crjj02zmej] {
transform: translateX(4px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
border-color: #3b82f6;
}
.result-icon[b-crjj02zmej] {
width: 48px;
height: 48px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
color: white;
flex-shrink: 0;
}
.result-content[b-crjj02zmej] {
flex: 1;
}
.result-header[b-crjj02zmej] {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.5rem;
}
.result-title[b-crjj02zmej] {
font-size: 1.1rem;
font-weight: 600;
color: #1e293b;
margin: 0;
}
.result-category[b-crjj02zmej] {
background: #f1f5f9;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.75rem;
color: #475569;
font-weight: 500;
}
.result-summary[b-crjj02zmej] {
font-size: 0.875rem;
color: #64748b;
margin: 0 0 0.75rem 0;
line-height: 1.5;
}
.result-keywords[b-crjj02zmej] {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.keyword-badge[b-crjj02zmej] {
background: #dbeafe;
color: #1d4ed8;
padding: 0.125rem 0.5rem;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 500;
}
.result-arrow[b-crjj02zmej] {
color: #94a3b8;
align-self: center;
}
/* No Results */
.no-results[b-crjj02zmej] {
text-align: center;
padding: 4rem 2rem;
background: white;
border-radius: 12px;
border: 1px solid #e2e8f0;
}
.no-results i[b-crjj02zmej] {
font-size: 3rem;
color: #cbd5e1;
margin-bottom: 1rem;
}
.no-results h3[b-crjj02zmej] {
font-size: 1.25rem;
font-weight: 600;
color: #1e293b;
margin-bottom: 0.5rem;
}
.no-results p[b-crjj02zmej] {
color: #64748b;
margin-bottom: 1.5rem;
}
/* Filtered Section */
.filtered-section[b-crjj02zmej] {
margin-bottom: 2rem;
}
.filtered-header[b-crjj02zmej] {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.filtered-header h2[b-crjj02zmej] {
font-size: 1.5rem;
font-weight: 600;
color: #1e293b;
margin: 0;
}
.btn-back[b-crjj02zmej] {
background: white;
border: 1px solid #e2e8f0;
padding: 0.5rem 0.75rem;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
}
.btn-back:hover[b-crjj02zmej] {
background: #f1f5f9;
}
/* Help Footer */
.help-footer[b-crjj02zmej] {
padding: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.quick-help-card[b-crjj02zmej] {
background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
color: white;
border-radius: 16px;
padding: 2rem;
display: flex;
align-items: center;
gap: 1.5rem;
flex-wrap: wrap;
}
.quick-help-card > i[b-crjj02zmej] {
font-size: 2.5rem;
opacity: 0.9;
}
.quick-help-content[b-crjj02zmej] {
flex: 1;
min-width: 200px;
}
.quick-help-content h4[b-crjj02zmej] {
font-size: 1.25rem;
font-weight: 600;
margin: 0 0 0.25rem 0;
}
.quick-help-content p[b-crjj02zmej] {
margin: 0;
opacity: 0.9;
}
.quick-help-card .btn[b-crjj02zmej] {
background: white;
color: #1e40af;
border: none;
font-weight: 600;
}
.quick-help-card .btn:hover[b-crjj02zmej] {
background: #f1f5f9;
}
/* Sections Spacing */
.popular-section[b-crjj02zmej],
.recent-section[b-crjj02zmej],
.all-topics-section[b-crjj02zmej] {
margin-bottom: 3rem;
}
/* Responsive */
@media (max-width: 768px) {
.help-header[b-crjj02zmej] {
padding: 2rem 1rem;
}
.help-title[b-crjj02zmej] {
font-size: 1.75rem;
}
.help-subtitle[b-crjj02zmej] {
font-size: 1rem;
}
.help-search-section[b-crjj02zmej] {
padding: 0 1rem;
}
.search-input[b-crjj02zmej] {
padding: 1rem 2.5rem 1rem 3rem;
font-size: 1rem;
}
.help-content[b-crjj02zmej] {
padding: 1.5rem 1rem;
}
.categories-grid[b-crjj02zmej] {
grid-template-columns: 1fr;
}
.topics-grid[b-crjj02zmej] {
grid-template-columns: 1fr;
}
.quick-help-card[b-crjj02zmej] {
flex-direction: column;
text-align: center;
}
.quick-help-card .btn[b-crjj02zmej] {
width: 100%;
}
.search-result-card[b-crjj02zmej] {
flex-direction: column;
}
.result-header[b-crjj02zmej] {
flex-direction: column;
align-items: flex-start;
}
}
/* /Components/Pages/Help/HelpTopicPage.razor.rz.scp.css */
/* Help Topic Page Styles */
.help-topic-page[b-tlbubm065p] {
min-height: 100vh;
background: #f8fafc;
padding: 1.5rem;
}
.loading-container[b-tlbubm065p] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4rem;
gap: 1rem;
color: #64748b;
}
/* Not Found */
.not-found[b-tlbubm065p] {
text-align: center;
padding: 4rem 2rem;
background: white;
border-radius: 12px;
max-width: 500px;
margin: 4rem auto;
border: 1px solid #e2e8f0;
}
.not-found i[b-tlbubm065p] {
font-size: 4rem;
color: #cbd5e1;
margin-bottom: 1rem;
}
.not-found h2[b-tlbubm065p] {
font-size: 1.5rem;
color: #1e293b;
margin-bottom: 0.5rem;
}
.not-found p[b-tlbubm065p] {
color: #64748b;
margin-bottom: 1.5rem;
}
/* Breadcrumb */
.topic-breadcrumb[b-tlbubm065p] {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1.5rem;
font-size: 0.875rem;
flex-wrap: wrap;
}
.breadcrumb-link[b-tlbubm065p] {
color: #3b82f6;
text-decoration: none;
display: flex;
align-items: center;
gap: 0.25rem;
}
.breadcrumb-link:hover[b-tlbubm065p] {
text-decoration: underline;
}
.breadcrumb-separator[b-tlbubm065p] {
color: #94a3b8;
font-size: 0.75rem;
}
.breadcrumb-category[b-tlbubm065p] {
color: #64748b;
}
.breadcrumb-current[b-tlbubm065p] {
color: #1e293b;
font-weight: 500;
}
/* Topic Header */
.topic-header[b-tlbubm065p] {
background: white;
border-radius: 16px;
padding: 2rem;
display: flex;
gap: 1.5rem;
margin-bottom: 1.5rem;
border: 1px solid #e2e8f0;
}
.topic-header-icon[b-tlbubm065p] {
width: 72px;
height: 72px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: white;
flex-shrink: 0;
}
.topic-header-content[b-tlbubm065p] {
flex: 1;
}
.topic-header-title[b-tlbubm065p] {
font-size: 1.75rem;
font-weight: 700;
color: #1e293b;
margin: 0 0 0.5rem 0;
}
.topic-header-summary[b-tlbubm065p] {
font-size: 1rem;
color: #64748b;
margin: 0 0 1rem 0;
line-height: 1.6;
}
.topic-header-meta[b-tlbubm065p] {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.meta-item[b-tlbubm065p] {
display: flex;
align-items: center;
gap: 0.375rem;
font-size: 0.875rem;
color: #64748b;
}
.meta-item i[b-tlbubm065p] {
color: #94a3b8;
}
.meta-item.version[b-tlbubm065p] {
background: #e0f2fe;
color: #0369a1;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-weight: 500;
}
/* Category Color Classes */
.category-getting-started[b-tlbubm065p] { background: linear-gradient(135deg, #10b981, #059669); }
.category-documents[b-tlbubm065p] { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.category-esignature[b-tlbubm065p] { background: linear-gradient(135deg, #f59e0b, #d97706); }
.category-applications[b-tlbubm065p] { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.category-claims[b-tlbubm065p] { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.category-admin[b-tlbubm065p] { background: linear-gradient(135deg, #64748b, #475569); }
/* Content Wrapper */
.topic-content-wrapper[b-tlbubm065p] {
display: grid;
grid-template-columns: 1fr 300px;
gap: 1.5rem;
max-width: 1400px;
margin: 0 auto;
}
/* Main Content */
.topic-main-content[b-tlbubm065p] {
background: white;
border-radius: 16px;
padding: 2rem;
border: 1px solid #e2e8f0;
}
.topic-placeholder[b-tlbubm065p] {
text-align: center;
padding: 4rem 2rem;
color: #64748b;
}
.topic-placeholder i[b-tlbubm065p] {
font-size: 3rem;
color: #cbd5e1;
margin-bottom: 1rem;
}
.topic-placeholder h3[b-tlbubm065p] {
font-size: 1.25rem;
color: #1e293b;
margin-bottom: 0.5rem;
}
/* Feedback Section */
.feedback-section[b-tlbubm065p] {
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid #e2e8f0;
}
.feedback-card[b-tlbubm065p] {
background: #f8fafc;
border-radius: 12px;
padding: 1.5rem;
text-align: center;
}
.feedback-card h4[b-tlbubm065p] {
font-size: 1.1rem;
font-weight: 600;
color: #1e293b;
margin: 0 0 1rem 0;
}
.feedback-buttons[b-tlbubm065p] {
display: flex;
justify-content: center;
gap: 1rem;
}
.feedback-btn[b-tlbubm065p] {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border-radius: 8px;
border: 2px solid #e2e8f0;
background: white;
cursor: pointer;
transition: all 0.2s;
font-weight: 500;
}
.feedback-btn:hover[b-tlbubm065p] {
border-color: #3b82f6;
}
.feedback-btn.yes:hover[b-tlbubm065p],
.feedback-btn.yes.selected[b-tlbubm065p] {
border-color: #10b981;
background: #ecfdf5;
color: #059669;
}
.feedback-btn.no:hover[b-tlbubm065p],
.feedback-btn.no.selected[b-tlbubm065p] {
border-color: #ef4444;
background: #fef2f2;
color: var(--error-600);
}
.feedback-btn:disabled[b-tlbubm065p] {
opacity: 0.6;
cursor: not-allowed;
}
.feedback-comment[b-tlbubm065p] {
margin-top: 1rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.feedback-comment textarea[b-tlbubm065p] {
resize: none;
}
.feedback-thank-you[b-tlbubm065p] {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
color: #059669;
font-weight: 500;
}
.feedback-thank-you i[b-tlbubm065p] {
font-size: 1.25rem;
}
/* Sidebar */
.topic-sidebar[b-tlbubm065p] {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.sidebar-section[b-tlbubm065p] {
background: white;
border-radius: 12px;
padding: 1.25rem;
border: 1px solid #e2e8f0;
}
.sidebar-title[b-tlbubm065p] {
font-size: 1rem;
font-weight: 600;
color: #1e293b;
margin: 0 0 1rem 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
.sidebar-title i[b-tlbubm065p] {
color: #3b82f6;
}
/* Related Topics */
.related-topics-list[b-tlbubm065p] {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.related-topic-link[b-tlbubm065p] {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
border-radius: 8px;
text-decoration: none;
transition: background 0.2s;
border: 1px solid #f1f5f9;
}
.related-topic-link:hover[b-tlbubm065p] {
background: #f8fafc;
border-color: #e2e8f0;
}
.related-topic-icon[b-tlbubm065p] {
width: 36px;
height: 36px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 0.875rem;
flex-shrink: 0;
}
.related-topic-content[b-tlbubm065p] {
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.related-topic-title[b-tlbubm065p] {
font-weight: 500;
color: #1e293b;
font-size: 0.875rem;
}
.related-topic-category[b-tlbubm065p] {
font-size: 0.75rem;
color: #64748b;
}
/* Quick Links */
.quick-links[b-tlbubm065p] {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.quick-link[b-tlbubm065p] {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
color: #3b82f6;
text-decoration: none;
border-radius: 6px;
font-size: 0.875rem;
transition: background 0.2s;
}
.quick-link:hover[b-tlbubm065p] {
background: #eff6ff;
}
.quick-link i[b-tlbubm065p] {
font-size: 1rem;
}
/* Help Card */
.sidebar-section.help-card[b-tlbubm065p] {
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
border-color: #bfdbfe;
text-align: center;
}
.help-card > i[b-tlbubm065p] {
font-size: 2rem;
color: #3b82f6;
margin-bottom: 0.75rem;
}
.help-card h4[b-tlbubm065p] {
font-size: 1rem;
font-weight: 600;
color: #1e293b;
margin: 0 0 0.25rem 0;
}
.help-card p[b-tlbubm065p] {
font-size: 0.875rem;
color: #64748b;
margin: 0 0 1rem 0;
}
/* Navigation Footer */
.topic-navigation[b-tlbubm065p] {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid #e2e8f0;
}
.btn-nav[b-tlbubm065p] {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.25rem;
background: white;
border: 1px solid #e2e8f0;
border-radius: 8px;
color: #1e293b;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.btn-nav:hover[b-tlbubm065p] {
background: #f8fafc;
border-color: #cbd5e1;
}
/* Responsive */
@media (max-width: 1024px) {
.topic-content-wrapper[b-tlbubm065p] {
grid-template-columns: 1fr;
}
.topic-sidebar[b-tlbubm065p] {
flex-direction: row;
flex-wrap: wrap;
}
.sidebar-section[b-tlbubm065p] {
flex: 1;
min-width: 250px;
}
}
@media (max-width: 768px) {
.help-topic-page[b-tlbubm065p] {
padding: 1rem;
}
.topic-header[b-tlbubm065p] {
flex-direction: column;
text-align: center;
}
.topic-header-icon[b-tlbubm065p] {
margin: 0 auto;
}
.topic-header-meta[b-tlbubm065p] {
justify-content: center;
}
.topic-main-content[b-tlbubm065p] {
padding: 1.25rem;
}
.topic-sidebar[b-tlbubm065p] {
flex-direction: column;
}
.sidebar-section[b-tlbubm065p] {
min-width: auto;
}
.feedback-buttons[b-tlbubm065p] {
flex-direction: column;
}
.feedback-btn[b-tlbubm065p] {
width: 100%;
justify-content: center;
}
}
/* Wiki-style Markdown body + table of contents (feature 032) */
.topic-toc[b-tlbubm065p] {
background: var(--bg-subtle);
border: 1px solid var(--border-light);
border-radius: 10px;
padding: 0.85rem 1rem;
margin-bottom: 1.5rem;
}
.topic-toc-label[b-tlbubm065p] {
display: block;
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
margin-bottom: 0.5rem;
}
.topic-toc ul[b-tlbubm065p] {
list-style: none;
margin: 0;
padding: 0;
}
.topic-toc li[b-tlbubm065p] {
margin: 0.2rem 0;
}
.topic-toc a[b-tlbubm065p] {
font-size: 0.875rem;
color: var(--text-secondary);
text-decoration: none;
}
.topic-toc a:hover[b-tlbubm065p] {
color: var(--brand-600);
text-decoration: underline;
}
.topic-toc-l3[b-tlbubm065p] { padding-left: 0.9rem; }
.topic-toc-l4[b-tlbubm065p] { padding-left: 1.8rem; }
.topic-article-body[b-tlbubm065p] {
font-size: 1rem;
line-height: 1.7;
color: var(--text-primary);
}
.topic-article-body[b-tlbubm065p] h1,
.topic-article-body[b-tlbubm065p] h2,
.topic-article-body[b-tlbubm065p] h3 {
letter-spacing: -0.01em;
color: var(--text-primary);
scroll-margin-top: 1rem;
margin: 1.75rem 0 0.75rem;
}
.topic-article-body[b-tlbubm065p] h1 { font-size: 1.5rem; }
.topic-article-body[b-tlbubm065p] h2 { font-size: 1.25rem; }
.topic-article-body[b-tlbubm065p] h3 { font-size: 1.05rem; }
.topic-article-body[b-tlbubm065p] p,
.topic-article-body[b-tlbubm065p] li {
color: var(--text-secondary);
}
.topic-article-body[b-tlbubm065p] a {
color: var(--brand-600);
}
.topic-article-body[b-tlbubm065p] code {
background: var(--bg-subtle);
padding: 0.1rem 0.4rem;
border-radius: 6px;
font-size: 0.9em;
}
.topic-article-body[b-tlbubm065p] pre {
background: var(--bg-secondary);
padding: 1rem;
border-radius: 10px;
overflow-x: auto;
}
.topic-article-body[b-tlbubm065p] img {
max-width: 100%;
height: auto;
border-radius: 10px;
border: 1px solid var(--border-light);
}
.topic-article-body[b-tlbubm065p] table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
font-size: 0.9rem;
}
.topic-article-body[b-tlbubm065p] th,
.topic-article-body[b-tlbubm065p] td {
border: 1px solid var(--border-light);
padding: 0.5rem 0.65rem;
text-align: left;
}
.topic-article-body[b-tlbubm065p] th {
background: var(--bg-subtle);
}
.topic-article-body[b-tlbubm065p] details.help-details {
border: 1px solid var(--border-light);
border-radius: 10px;
padding: 0.65rem 0.9rem;
margin: 1rem 0;
background: var(--bg-subtle);
}
.topic-article-body[b-tlbubm065p] details.help-details summary {
cursor: pointer;
font-weight: 600;
color: var(--text-primary);
}
/* /Components/Pages/Invoices/Components/ApplicationInvoiceRail.razor.rz.scp.css */
/* Application billing context rail (feature 030, design revision 2). A left
sidebar card on the invoice detail page — same card language as the page's
other cards (.card-section: white, 1px #e5e7eb border, 12px radius, soft
shadow) — with a header block (caps label, position badge, combined billed)
above a vertical stack of invoice items. Sticks below the app topbar while
the main column scrolls. */
.app-invoice-rail[b-i38n33rang] {
background: white;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 1rem 1rem 1.1rem;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
/* Stick just below the app topbar (64px sticky, leca-theme) while the
invoice document scrolls; a long list scrolls inside the rail instead
of pushing the page wider. */
position: sticky;
top: calc(var(--topbar-height, 64px) + 1rem);
max-height: calc(100vh - var(--topbar-height, 64px) - 2rem);
overflow-y: auto;
}
/* ── Header block: caps label + position badge, combined billed beneath ── */
.rail-head[b-i38n33rang] {
display: flex;
flex-direction: column;
gap: 0.6rem;
padding: 0 0.25rem;
margin-bottom: 0.85rem;
}
/* Same voice as .card-section h2 on the detail page — small caps, accent,
muted icon — so the rail reads as a native sibling of Bill To / Dates. */
.rail-title[b-i38n33rang] {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #2c5aa0;
font-weight: 700;
margin: 0;
}
.rail-title > i[b-i38n33rang] {
font-size: 0.85rem;
color: #94a3b8;
}
/* "2 of 3" position badge — the pay-ledger count pill's visual family. */
.rail-count[b-i38n33rang] {
margin-left: auto;
font-size: 0.7rem;
font-weight: 600;
color: #475569;
background: #f1f5f9;
border-radius: 999px;
padding: 0.05rem 0.5rem;
text-transform: none;
letter-spacing: 0;
white-space: nowrap;
}
/* Combined billed — prominent, dark, tabular; the honesty caveat sits under
it in small muted amber (same tone as round 1's inline caveat). */
.rail-billed[b-i38n33rang] {
display: flex;
flex-direction: column;
}
.billed-label[b-i38n33rang] {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #6b7280;
font-weight: 600;
}
.billed-value[b-i38n33rang] {
font-size: 1.35rem;
font-weight: 700;
color: #111827;
line-height: 1.2;
font-variant-numeric: tabular-nums;
}
.billed-caveat[b-i38n33rang] {
font-size: 0.72rem;
color: #92600a;
margin-top: 0.1rem;
}
/* ── Item stack: one card per sibling invoice, vertical, never scrolls
sideways ── */
.rail-list[b-i38n33rang] {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
/* One card per sibling invoice: pills row on top, invoice number as the
title line, the amount as the dominant element. */
.rail-item[b-i38n33rang] {
display: flex;
flex-direction: column;
gap: 0.3rem;
padding: 0.6rem 0.75rem 0.55rem;
border: 1px solid #e2e8f0;
border-radius: 10px;
background: #fff;
text-decoration: none;
color: #475569;
transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.item-pills[b-i38n33rang] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
flex-wrap: wrap;
}
.item-number[b-i38n33rang] {
font-size: 0.78rem;
font-weight: 600;
color: #475569;
letter-spacing: 0.01em;
line-height: 1.2;
white-space: nowrap;
}
.item-number-draft[b-i38n33rang] {
color: #6b7280;
font-weight: 500;
}
/* The amount is what an underwriter scans for — largest, darkest, tabular. */
.item-total[b-i38n33rang] {
font-size: 1.05rem;
font-weight: 700;
color: #111827;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
/* Navigable sibling — border shift + slight elevation on hover, visible
focus ring for keyboard users. */
a.rail-item[b-i38n33rang] {
cursor: pointer;
}
a.rail-item:hover[b-i38n33rang] {
border-color: #94b3d8;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
transform: translateY(-1px);
}
a.rail-item:hover .item-number[b-i38n33rang] { color: #2c5aa0; }
a.rail-item:focus-visible[b-i38n33rang] {
outline: 2px solid #2c5aa0;
outline-offset: 2px;
}
/* The invoice being viewed — brand wash + accent border + accent LEFT edge
(inset shadow, so the highlighted card stays the exact same size as its
navigable neighbors). Inert (no anchor), clearly distinct from hover. */
.rail-item-current[b-i38n33rang] {
border-color: #2c5aa0;
background: #f0f5fc;
box-shadow: inset 3px 0 0 0 #2c5aa0;
}
.rail-item-current .item-number[b-i38n33rang] { color: #1e3a5f; }
/* Voided sibling — kept for audit context, visibly excluded from the combined
figure (struck number and amount, same affordance as reversed payments in
the pay ledger). */
.rail-item-void[b-i38n33rang] {
opacity: 0.6;
background: #fafafa;
}
.rail-item-void .item-number[b-i38n33rang] {
text-decoration: line-through;
}
.rail-item-void .item-total[b-i38n33rang] {
text-decoration: line-through;
color: #9ca3af;
font-weight: 600;
}
/* Below the page's rail breakpoint the rail is stacked as a full-width block
above the invoice card (the page collapses its grid) — stop sticking, let
it size naturally, and put the combined figure back on the header row. */
@media (max-width: 991px) {
.app-invoice-rail[b-i38n33rang] {
position: static;
max-height: none;
overflow-y: visible;
}
.rail-head[b-i38n33rang] {
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
gap: 0.5rem 1.5rem;
}
.rail-billed[b-i38n33rang] {
align-items: flex-end;
text-align: right;
}
.rail-title[b-i38n33rang] { padding-top: 0.2rem; }
.rail-count[b-i38n33rang] { margin-left: 0; }
}
/* /Components/Pages/Invoices/Components/BoundInvoiceRecoveryBanner.razor.rz.scp.css */
.invoice-recovery-banner[b-5rsbwaqnrz] {
display: flex;
align-items: flex-start;
gap: 1rem;
margin: 1rem 1.5rem;
padding: 0.875rem 1rem;
background: linear-gradient(90deg, #fff8e6, #fffdf5);
border: 1px solid #f0c95c;
border-left: 4px solid #d4a017;
border-radius: 6px;
}
.banner-icon[b-5rsbwaqnrz] {
font-size: 1.25rem;
color: #d4a017;
flex-shrink: 0;
line-height: 1;
padding-top: 0.15rem;
}
.banner-body[b-5rsbwaqnrz] {
flex: 1;
min-width: 0;
}
.banner-title[b-5rsbwaqnrz] {
font-weight: 600;
color: #6b4f0f;
margin-bottom: 0.15rem;
}
.banner-text[b-5rsbwaqnrz] {
font-size: 0.875rem;
color: #735a1f;
}
.banner-message[b-5rsbwaqnrz] {
margin-top: 0.5rem;
padding: 0.4rem 0.6rem;
font-size: 0.85rem;
border-radius: 4px;
}
.banner-success[b-5rsbwaqnrz] {
background: #dcfce7;
color: #166534;
}
.banner-error[b-5rsbwaqnrz] {
background: #fee2e2;
color: #991b1b;
}
.banner-actions[b-5rsbwaqnrz] {
flex-shrink: 0;
align-self: center;
}
/* Subtle button — outline style with banner-tone colors. Stays quiet inside
an already-amber warning banner; hover fills in for affordance. */
.banner-btn[b-5rsbwaqnrz] {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0.85rem;
background: transparent;
border: 1px solid #c89512;
border-radius: 6px;
color: #6b4f0f;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: background-color 120ms, color 120ms;
}
.banner-btn:hover:not(:disabled)[b-5rsbwaqnrz] {
background: #d4a017;
color: white;
}
.banner-btn:disabled[b-5rsbwaqnrz] {
opacity: 0.6;
cursor: not-allowed;
}
/* Icon follows button text color — never the banner's gold cascade. */
.banner-btn i[b-5rsbwaqnrz] {
color: inherit;
}
/* /Components/Pages/Invoices/Components/InvoiceKindPill.razor.rz.scp.css */
.kind-pill[b-djytx7le7b] {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.15rem 0.6rem 0.15rem 0.5rem;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1.4;
border: 1px solid transparent;
white-space: nowrap;
}
.kind-pill-text[b-djytx7le7b] {
line-height: 1;
}
.kind-pill i[b-djytx7le7b] {
font-size: 0.75rem;
line-height: 1;
color: currentColor;
}
/* Diligence — amber tone, distinct from any of the status pills so the two
axes never visually conflict on the same row. */
.kind-pill-diligence[b-djytx7le7b] {
background: #fffbeb;
color: #b45309;
border-color: #fde68a;
}
/* Policy — slate/neutral so the eye reads the status pill as the primary
signal next to it. */
.kind-pill-policy[b-djytx7le7b] {
background: #f1f5f9;
color: #475569;
border-color: #e2e8f0;
}
/* Manual — indigo tone, distinct from the two auto kinds so an ad-hoc invoice
is recognizable at a glance. */
.kind-pill-manual[b-djytx7le7b] {
background: #eef2ff;
color: #4338ca;
border-color: #c7d2fe;
}
/* /Components/Pages/Invoices/Components/InvoiceStatusPill.razor.rz.scp.css */
.status-pill[b-kyk8oysife] {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.15rem 0.6rem 0.15rem 0.5rem;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1.4;
border: 1px solid transparent;
white-space: nowrap;
}
.status-pill-text[b-kyk8oysife] {
/* Wrap text in its own span so the icon stays vertically centered */
line-height: 1;
}
/* Status-specific icon. Sized small so the pill stays compact; inherits the
pill text color so it always matches the variant tone (no per-variant icon
color needed). */
.status-pill i[b-kyk8oysife] {
font-size: 0.75rem;
line-height: 1;
color: currentColor;
}
/* ── Variants — tinted background, darker matching text ───────────── */
.status-pill-draft[b-kyk8oysife] {
background: #f1f5f9;
color: #475569;
border-color: #e2e8f0;
}
.status-pill-issued[b-kyk8oysife] {
background: #eff6ff;
color: #1d4ed8;
border-color: #bfdbfe;
}
.status-pill-partial[b-kyk8oysife] {
background: #fefce8;
color: #a16207;
border-color: #fef08a;
}
.status-pill-paid[b-kyk8oysife] {
background: #f0fdf4;
color: #15803d;
border-color: #bbf7d0;
}
.status-pill-void[b-kyk8oysife] {
background: #fef2f2;
color: #b91c1c;
border-color: #fecaca;
}
.status-pill-overdue[b-kyk8oysife] {
background: #fff7ed;
color: #c2410c;
border-color: #fed7aa;
}
/* /Components/Pages/Invoices/Components/InvoiceStatusTimeline.razor.rz.scp.css */
.status-timeline[b-dnmdnaegrl] { padding: 0.25rem 0; }
.timeline-empty[b-dnmdnaegrl] {
display: flex;
align-items: center;
gap: 0.5rem;
color: #94a3b8;
font-size: 0.875rem;
padding: 0.75rem 0;
}
.timeline[b-dnmdnaegrl] {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.timeline-item[b-dnmdnaegrl] {
position: relative;
display: grid;
grid-template-columns: 1.75rem 1fr;
gap: 0.85rem;
padding-bottom: 1.1rem;
}
.timeline-item:last-child[b-dnmdnaegrl] { padding-bottom: 0; }
/* Connector rail — drawn from each node down to the next, behind the nodes. */
.timeline-item:not(:last-child)[b-dnmdnaegrl]::before {
content: "";
position: absolute;
left: 0.8rem;
top: 1.75rem;
bottom: -0.2rem;
width: 2px;
background: #e5e7eb;
}
/* ── Node (icon disc) ─────────────────────────────────────────────── */
.timeline-node[b-dnmdnaegrl] {
position: relative;
z-index: 1;
width: 1.75rem;
height: 1.75rem;
border-radius: 50%;
display: grid;
place-items: center;
color: #fff;
background: #94a3b8;
box-shadow: 0 0 0 4px #fff, 0 1px 2px rgba(15, 23, 42, 0.12);
}
.timeline-node i[b-dnmdnaegrl] { font-size: 0.8rem; line-height: 1; }
.node-draft[b-dnmdnaegrl] { background: #94a3b8; }
.node-issued[b-dnmdnaegrl] { background: #2c5aa0; }
.node-partial[b-dnmdnaegrl] { background: #ca8a04; }
.node-paid[b-dnmdnaegrl] { background: #16a34a; }
.node-void[b-dnmdnaegrl] { background: #dc2626; }
/* ── Content card ─────────────────────────────────────────────────── */
.timeline-card[b-dnmdnaegrl] {
background: #fff;
border: 1px solid #eef2f6;
border-radius: 10px;
padding: 0.6rem 0.8rem;
transition: border-color 120ms, box-shadow 120ms;
}
.timeline-card:hover[b-dnmdnaegrl] {
border-color: #e2e8f0;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}
.timeline-head[b-dnmdnaegrl] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
}
.timeline-transition[b-dnmdnaegrl] {
display: inline-flex;
align-items: center;
gap: 0.4rem;
flex-wrap: wrap;
}
.t-from[b-dnmdnaegrl] {
font-size: 0.85rem;
font-weight: 500;
color: #94a3b8;
}
.t-arrow[b-dnmdnaegrl] {
font-size: 0.75rem;
color: #cbd5e1;
}
.timeline-time[b-dnmdnaegrl] {
font-size: 0.75rem;
color: #94a3b8;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.timeline-actor[b-dnmdnaegrl] {
display: inline-flex;
align-items: center;
gap: 0.3rem;
margin-top: 0.3rem;
font-size: 0.78rem;
color: #64748b;
}
.timeline-actor i[b-dnmdnaegrl] { font-size: 0.85rem; color: #94a3b8; }
.timeline-reason[b-dnmdnaegrl] {
margin-top: 0.5rem;
padding: 0.4rem 0.65rem;
background: #f8fafc;
border-left: 2px solid #cbd5e1;
border-radius: 0 6px 6px 0;
font-size: 0.85rem;
color: #475569;
line-height: 1.45;
}
/* /Components/Pages/Invoices/Components/NetSuiteCsvPreviewModal.razor.rz.scp.css */
.ns-csv-preview-heading[b-jsgzbqvhrh] {
min-width: 0;
}
/* Mirrors the subtitle treatment of other header-with-icon modals
(e.g. FileClaimModal's .claim-modal-subtitle). */
.ns-csv-preview-subtitle[b-jsgzbqvhrh] {
font-size: 0.8rem;
color: var(--text-muted, #64748b);
line-height: 1.45;
margin: 2px 0 0;
}
.ns-csv-preview-scroll[b-jsgzbqvhrh] {
max-height: 55vh;
overflow: auto;
border: 1px solid var(--border, #e5e7eb);
border-radius: 6px;
}
.ns-csv-preview-table[b-jsgzbqvhrh] {
border-collapse: collapse;
font-size: 0.72rem;
font-family: ui-monospace, "SF Mono", monospace;
white-space: nowrap;
}
.ns-csv-preview-table th[b-jsgzbqvhrh],
.ns-csv-preview-table td[b-jsgzbqvhrh] {
padding: 0.3rem 0.6rem;
border-bottom: 1px solid var(--border, #e5e7eb);
border-right: 1px solid var(--border, #e5e7eb);
text-align: left;
/* Single long fields (payment URLs, logo links) shouldn't blow the column out —
ellipsize; the full value is on the cell's title tooltip. */
max-width: 20rem;
overflow: hidden;
text-overflow: ellipsis;
}
.ns-csv-preview-table th:last-child[b-jsgzbqvhrh],
.ns-csv-preview-table td:last-child[b-jsgzbqvhrh] {
border-right: none;
}
.ns-csv-preview-table th[b-jsgzbqvhrh] {
position: sticky;
top: 0;
z-index: 1;
background: var(--bg-muted, #f9fafb);
font-family: inherit;
font-size: 0.65rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--text-muted, #6b7280);
}
.ns-csv-preview-table tbody tr:nth-child(even)[b-jsgzbqvhrh] {
background: var(--bg-muted, #f9fafb);
}
.ns-csv-preview-table tbody tr.ns-csv-row-tax[b-jsgzbqvhrh] {
background: #FFFBEB;
}
.ns-csv-preview-table tbody tr.ns-csv-row-tax:nth-child(even)[b-jsgzbqvhrh] {
background: #FEF3C7;
}
.ns-csv-preview-table tbody tr:last-child td[b-jsgzbqvhrh] {
border-bottom: none;
}
/* /Components/Pages/Invoices/Components/NetSuiteSyncPill.razor.rz.scp.css */
/* Same shape language as InvoiceStatusPill so the two pills read as siblings
when shown side-by-side in the table. Smaller min-width to keep the NS column
tight, and a subtler palette so it doesn't out-compete the primary status. */
.ns-pill[b-hkv33d5r0z] {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.12rem 0.5rem;
border-radius: 999px;
font-size: 0.65rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1.4;
border: 1px solid transparent;
white-space: nowrap;
}
.ns-pill-text[b-hkv33d5r0z] {
line-height: 1;
}
.ns-pill i[b-hkv33d5r0z] {
font-size: 0.72rem;
line-height: 1;
color: currentColor;
}
/* Attempt counter on Failed pills — tiny inline badge so accounting can see at
a glance "this has retried N times" without hovering. */
.ns-pill-count[b-hkv33d5r0z] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.1rem;
height: 1.1rem;
padding: 0 0.3rem;
margin-left: 0.15rem;
background: rgba(255, 255, 255, 0.6);
border-radius: 999px;
font-size: 0.6rem;
color: inherit;
}
/* ── Variants ────────────────────────────────────────────────────────── */
.ns-pill-pending[b-hkv33d5r0z] {
background: #fefce8;
color: #854d0e;
border-color: #fde68a;
}
.ns-pill-synced[b-hkv33d5r0z] {
background: #ecfeff;
color: #0e7490;
border-color: #a5f3fc;
}
.ns-pill-failed[b-hkv33d5r0z] {
background: #fef2f2;
color: #b91c1c;
border-color: #fecaca;
}
/* /Components/Pages/Invoices/InvoiceDetailPage.razor.rz.scp.css */
.invoice-detail[b-5b2q4h4pf8] {
padding: 1.5rem;
max-width: 1100px;
margin: 0 auto;
}
/* ── Application invoice rail shell (feature 030 rev 2) ───────────────
.with-rail is applied only when the left rail actually renders (two or
more viewer-visible invoices on the application). Without it the shell
is a plain block and the page is byte-identical to the pre-030 layout. */
.invoice-detail.with-rail[b-5b2q4h4pf8] {
max-width: 1400px;
}
.detail-shell[b-5b2q4h4pf8] {
min-width: 0;
}
.with-rail .detail-shell[b-5b2q4h4pf8] {
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
gap: 1.25rem;
align-items: start;
}
.detail-content[b-5b2q4h4pf8] {
min-width: 0;
}
/* With the main column narrowed by the rail, the inner document/payments
two-column body collapses earlier than the no-rail 900px breakpoint. */
@media (max-width: 1280px) {
.with-rail .detail-columns[b-5b2q4h4pf8] {
grid-template-columns: 1fr;
}
}
/* Below the desktop breakpoint the rail becomes a full-width block stacked
ABOVE the invoice card — single column, rail first in DOM order; it never
turns into a horizontal scroller. */
@media (max-width: 991px) {
.with-rail .detail-shell[b-5b2q4h4pf8] {
grid-template-columns: 1fr;
}
}
.back-link[b-5b2q4h4pf8] {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-bottom: 0.85rem;
text-decoration: none;
color: #475569;
font-size: 0.875rem;
}
.back-link:hover[b-5b2q4h4pf8] { color: #2c5aa0; }
.state-block[b-5b2q4h4pf8] {
padding: 2.5rem 1rem;
text-align: center;
color: #6b7280;
background: white;
border: 1px solid #e5e7eb;
border-radius: 8px;
}
/* Skeleton loading state */
@keyframes inv-detail-skel-pulse-b-5b2q4h4pf8 {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.skel-block[b-5b2q4h4pf8] {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: inv-detail-skel-pulse-b-5b2q4h4pf8 1.5s ease-in-out infinite;
border-radius: 4px;
}
.inv-skeleton[b-5b2q4h4pf8] {
padding: 0;
}
.skel-hero[b-5b2q4h4pf8] {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 2rem;
padding: 1.25rem 1.5rem;
background: white;
border: 1px solid #e5e7eb;
border-radius: 10px;
margin-bottom: 0.85rem;
}
.skel-hero-left[b-5b2q4h4pf8] {
flex: 1;
}
.skel-hero-right[b-5b2q4h4pf8] {
text-align: right;
}
.skel-action-bar[b-5b2q4h4pf8] {
display: flex;
gap: 0.4rem;
margin-bottom: 1.25rem;
padding: 0 0.25rem;
flex-wrap: wrap;
}
.skel-meta-grid[b-5b2q4h4pf8] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.85rem;
margin-bottom: 0.85rem;
}
.skel-card-section[b-5b2q4h4pf8] {
background: white;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 1.25rem 1.5rem;
margin-bottom: 0.85rem;
}
.skel-line-row[b-5b2q4h4pf8] {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.6rem 0;
border-bottom: 1px solid #f1f5f9;
}
.skel-line-row:last-child[b-5b2q4h4pf8] {
border-bottom: none;
}
@media (max-width: 720px) {
.skel-meta-grid[b-5b2q4h4pf8] {
grid-template-columns: 1fr;
}
}
/* ── Hero header ──────────────────────────────────────────────────── */
.hero[b-5b2q4h4pf8] {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 2rem;
padding: 1.4rem 1.5rem;
background: white;
border: 1px solid #e5e7eb;
border-radius: 12px;
margin-bottom: 0.85rem;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.hero-title-row[b-5b2q4h4pf8] {
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
margin-bottom: 0.3rem;
}
.hero-title[b-5b2q4h4pf8] {
margin: 0;
font-size: 1.65rem;
font-weight: 700;
color: #111827;
letter-spacing: -0.01em;
}
.hero-subtitle[b-5b2q4h4pf8] {
color: #6b7280;
font-size: 0.9rem;
}
.hero-subtitle .dot[b-5b2q4h4pf8] { margin: 0 0.45rem; color: #cbd5e1; }
.link-muted[b-5b2q4h4pf8] {
color: #475569;
text-decoration: none;
font-weight: 500;
}
.link-muted:hover[b-5b2q4h4pf8] { color: #2c5aa0; text-decoration: underline; }
.total-display[b-5b2q4h4pf8] {
text-align: right;
}
.total-label[b-5b2q4h4pf8] {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #6b7280;
font-weight: 600;
}
.total-value[b-5b2q4h4pf8] {
font-size: 2rem;
font-weight: 700;
color: #2c5aa0;
line-height: 1.1;
font-variant-numeric: tabular-nums;
margin-top: 0.15rem;
}
/* ── Hero payment progress ────────────────────────────────────────── */
.pay-progress[b-5b2q4h4pf8] {
margin-top: 0.6rem;
width: 220px;
max-width: 100%;
margin-left: auto;
}
.pay-progress-track[b-5b2q4h4pf8] {
height: 6px;
background: #e2e8f0;
border-radius: 999px;
overflow: hidden;
}
.pay-progress-fill[b-5b2q4h4pf8] {
height: 100%;
background: #16a34a;
border-radius: 999px;
transition: width 0.3s ease;
}
.pay-progress-meta[b-5b2q4h4pf8] {
display: flex;
justify-content: space-between;
margin-top: 0.3rem;
font-size: 0.72rem;
font-variant-numeric: tabular-nums;
}
.pay-progress-meta .pp-paid[b-5b2q4h4pf8] { color: #15803d; font-weight: 600; }
.pay-progress-meta .pp-bal[b-5b2q4h4pf8] { color: #6b7280; }
.pay-paid-badge[b-5b2q4h4pf8] {
margin-top: 0.5rem;
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.75rem;
font-weight: 600;
color: #15803d;
}
/* ── Action bar ───────────────────────────────────────────────────── */
/* Buttons are the canonical Bootstrap .btn family (themed in leca-theme.css) —
same convention as /admin/netsuite-sync and the Invoices list. */
.action-bar[b-5b2q4h4pf8] {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.5rem 1rem;
margin-bottom: 1.25rem;
padding: 0 0.25rem;
flex-wrap: wrap;
}
.action-group[b-5b2q4h4pf8] {
display: flex;
align-items: center;
gap: 0.4rem;
flex-wrap: wrap;
}
/* Passive status pills that sit inline with the .inv-btn action buttons
(Auto-issues on NetSuite sync / Number assigned on Issue). Not clickable —
they only mirror the buttons' box metrics (padding, border, radius, font,
line-height) so the row reads as one aligned set instead of a tall button
next to a short badge. Bootstrap's bg-*-subtle / text-*-emphasis colours are
kept untouched — this class only normalises the height/shape. */
.action-status-badge[b-5b2q4h4pf8] {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.85rem;
border: 1px solid transparent;
border-radius: 6px;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.2;
}
/* Keeps the state-transition cluster hugging the right edge even when the bar
wraps to two rows on narrow screens — without this, the wrapped second row
left-aligns under the file actions and the bar reads as broken. */
.action-group-primary[b-5b2q4h4pf8] {
margin-left: auto;
}
/* Confirmation-modal body helpers. The child content passed to the shared
ConfirmationModal is authored here, so it carries this page's isolation scope
and these rules reach it. */
.modal-lead[b-5b2q4h4pf8] {
font-size: 0.9rem;
color: #475569;
margin: 0 0 1rem;
line-height: 1.5;
}
.modal-field[b-5b2q4h4pf8] { margin-bottom: 0.85rem; }
.modal-field:last-child[b-5b2q4h4pf8] { margin-bottom: 0; }
.modal-label[b-5b2q4h4pf8] {
display: block;
font-size: 0.8rem;
font-weight: 600;
color: #374151;
margin-bottom: 0.3rem;
}
.modal-error[b-5b2q4h4pf8],
.modal-hint[b-5b2q4h4pf8] {
display: flex;
align-items: center;
gap: 0.35rem;
margin-top: 0.35rem;
font-size: 0.78rem;
}
.modal-error[b-5b2q4h4pf8] { color: #b91c1c; }
.modal-hint[b-5b2q4h4pf8] { color: #15803d; }
/* ── Subtle, dismissable action alert ─────────────────────────────── */
.inv-alert[b-5b2q4h4pf8] {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 0.85rem;
margin-bottom: 0.85rem;
border: 1px solid transparent;
border-radius: 8px;
font-size: 0.875rem;
animation: inv-alert-in-b-5b2q4h4pf8 0.15s ease-out;
}
@keyframes inv-alert-in-b-5b2q4h4pf8 {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.inv-alert-icon[b-5b2q4h4pf8] { font-size: 0.95rem; }
.inv-alert-text[b-5b2q4h4pf8] { flex: 1; }
.inv-alert-success[b-5b2q4h4pf8] {
background: #f0fdf4;
border-color: #bbf7d0;
color: #15803d;
}
.inv-alert-error[b-5b2q4h4pf8] {
background: #fef2f2;
border-color: #fecaca;
color: #b91c1c;
}
.inv-alert-close[b-5b2q4h4pf8] {
background: none;
border: none;
padding: 0.15rem;
line-height: 1;
color: currentColor;
opacity: 0.55;
cursor: pointer;
border-radius: 4px;
transition: opacity 120ms, background-color 120ms;
}
.inv-alert-close:hover[b-5b2q4h4pf8] {
opacity: 1;
background: rgba(0, 0, 0, 0.06);
}
.inv-alert-close i[b-5b2q4h4pf8] { font-size: 0.8rem; }
/* ── Section cards ────────────────────────────────────────────────── */
.card-section[b-5b2q4h4pf8] {
background: white;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 1.25rem 1.5rem;
margin-bottom: 0.85rem;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.card-section h2[b-5b2q4h4pf8] {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #2c5aa0;
font-weight: 700;
margin: 0 0 0.85rem 0;
}
.card-section h2 > i[b-5b2q4h4pf8] {
font-size: 0.85rem;
color: #94a3b8;
}
.card-section h2 .small[b-5b2q4h4pf8] {
font-size: 0.7rem;
color: #94a3b8;
font-weight: 500;
margin-left: 0.4rem;
text-transform: none;
letter-spacing: 0;
}
.meta-grid[b-5b2q4h4pf8] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.85rem;
margin-bottom: 0.85rem;
}
.meta-grid .card-section[b-5b2q4h4pf8] { margin-bottom: 0; }
@media (max-width: 720px) {
.meta-grid[b-5b2q4h4pf8] { grid-template-columns: 1fr; }
}
/* ── Two-column body: document (main) + payments rail ─────────────── */
.detail-columns[b-5b2q4h4pf8] {
display: grid;
grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
gap: 0.85rem;
align-items: start;
}
.detail-main[b-5b2q4h4pf8], .detail-rail[b-5b2q4h4pf8] {
min-width: 0;
}
/* Cards inside the rail sit flush; the rail itself owns the vertical rhythm. */
.detail-rail .card-section[b-5b2q4h4pf8] { margin-bottom: 0.85rem; }
.detail-rail .card-section:last-child[b-5b2q4h4pf8] { margin-bottom: 0; }
/* Collapse to a single column on narrower viewports. */
@media (max-width: 900px) {
.detail-columns[b-5b2q4h4pf8] { grid-template-columns: 1fr; }
}
/* ── Payment summary (rail) ───────────────────────────────────────── */
.pay-summary[b-5b2q4h4pf8] {
border: 1px solid #e5e7eb;
border-radius: 8px;
overflow: hidden;
}
.pay-summary-row[b-5b2q4h4pf8] {
display: flex;
justify-content: space-between;
padding: 0.5rem 0.75rem;
font-size: 0.9rem;
color: #475569;
border-bottom: 1px solid #f1f5f9;
}
.pay-summary-row:last-child[b-5b2q4h4pf8] { border-bottom: none; }
.pay-summary-balance[b-5b2q4h4pf8] {
background: #f0f6ff;
font-weight: 700;
color: #2c5aa0;
font-size: 1rem;
}
/* ── Payment ledger (rail, compact list) ──────────────────────────── */
.pay-ledger-wrap[b-5b2q4h4pf8] {
margin-top: 0.85rem;
padding-top: 0.85rem;
border-top: 1px solid #f1f5f9;
}
.pay-ledger-head[b-5b2q4h4pf8] {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 700;
color: #64748b;
margin-bottom: 0.5rem;
}
.pay-ledger-head i[b-5b2q4h4pf8] { font-size: 0.8rem; color: #94a3b8; }
.pay-ledger-count[b-5b2q4h4pf8] {
margin-left: auto;
font-size: 0.7rem;
font-weight: 600;
color: #475569;
background: #f1f5f9;
border-radius: 999px;
padding: 0.05rem 0.45rem;
text-transform: none;
letter-spacing: 0;
}
.pay-ledger[b-5b2q4h4pf8] {
list-style: none;
margin: 0;
padding: 0;
}
.pay-ledger-item[b-5b2q4h4pf8] {
padding: 0.55rem 0;
border-bottom: 1px solid #f1f5f9;
}
.pay-ledger-item:last-child[b-5b2q4h4pf8] { border-bottom: none; }
.pli-top[b-5b2q4h4pf8] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.pli-amount[b-5b2q4h4pf8] {
font-weight: 600;
color: #111827;
}
.pli-meta[b-5b2q4h4pf8] {
font-size: 0.78rem;
color: #6b7280;
margin-top: 0.15rem;
}
.pay-ledger-item.is-reversed .pli-amount[b-5b2q4h4pf8] {
text-decoration: line-through;
color: #9ca3af;
}
.pli-reversed[b-5b2q4h4pf8] {
font-size: 0.72rem;
color: #b91c1c;
margin-top: 0.2rem;
}
.pli-reverse[b-5b2q4h4pf8] {
font-size: 0.78rem;
margin-top: 0.2rem;
}
/* ── Bill-to ──────────────────────────────────────────────────────── */
.entity-name[b-5b2q4h4pf8] {
font-size: 1rem;
font-weight: 600;
color: #111827;
margin: 0 0 0.2rem;
}
.address-line[b-5b2q4h4pf8] {
margin: 0.05rem 0;
color: #1f2937;
font-size: 0.9rem;
}
.contact-line[b-5b2q4h4pf8] {
margin-top: 0.6rem;
color: #1f2937;
font-size: 0.875rem;
}
.contact-line i[b-5b2q4h4pf8] { color: #6b7280; margin-right: 0.25rem; }
.muted[b-5b2q4h4pf8] { color: #6b7280; }
.muted i[b-5b2q4h4pf8] {
margin-right: 0.25rem;
}
/* ── Dates list ───────────────────────────────────────────────────── */
.date-list[b-5b2q4h4pf8] {
display: grid;
grid-template-columns: 90px 1fr;
gap: 0.3rem 0.85rem;
margin: 0;
font-size: 0.875rem;
}
.date-list dt[b-5b2q4h4pf8] {
color: #6b7280;
font-weight: 500;
}
.date-list dd[b-5b2q4h4pf8] {
margin: 0;
color: #111827;
font-variant-numeric: tabular-nums;
}
.ref-callout[b-5b2q4h4pf8] {
margin-top: 0.85rem;
padding: 0.55rem 0.75rem;
background: #f8fafc;
border-left: 3px solid #2c5aa0;
border-radius: 4px;
}
.ref-callout-danger[b-5b2q4h4pf8] {
background: #fef2f2;
border-left-color: #dc2626;
}
.ref-label[b-5b2q4h4pf8] {
display: block;
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #6b7280;
font-weight: 600;
margin-bottom: 0.15rem;
}
.ref-value[b-5b2q4h4pf8] {
font-size: 0.9rem;
color: #111827;
}
.ref-callout-danger .ref-label[b-5b2q4h4pf8] { color: #991b1b; }
.ref-callout-danger .ref-value[b-5b2q4h4pf8] { color: #7f1d1d; }
/* ── Line items table + totals ────────────────────────────────────── */
.line-table[b-5b2q4h4pf8] {
margin-bottom: 0;
}
.line-table thead th[b-5b2q4h4pf8] {
background: #f8fafc;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #475569;
font-weight: 600;
border-bottom: 1px solid #e5e7eb;
}
.line-table td[b-5b2q4h4pf8] { vertical-align: middle; }
.line-kind[b-5b2q4h4pf8] {
font-size: 0.75rem;
color: #6b7280;
background: #f1f5f9;
padding: 0.15rem 0.5rem;
border-radius: 4px;
}
/* NetSuite accounting code — mirrors stm-acct-code (StateTaxManagementPage)
and PremiumBreakdownCard's monospace sub-label. */
.line-acct-code[b-5b2q4h4pf8] {
font-size: 11px;
font-weight: 600;
color: #475569;
background: #f1f5f9;
padding: 2px 6px;
border-radius: 4px;
}
.mono[b-5b2q4h4pf8] { font-variant-numeric: tabular-nums; }
.totals-block[b-5b2q4h4pf8] {
margin-top: 0.85rem;
margin-left: auto;
width: 360px;
max-width: 100%;
}
.totals-row[b-5b2q4h4pf8] {
display: flex;
justify-content: space-between;
padding: 0.4rem 0.85rem;
font-size: 0.9rem;
color: #475569;
border-bottom: 1px solid #f1f5f9;
}
.totals-row-final[b-5b2q4h4pf8] {
background: #f0f6ff;
border: 1px solid #bfdbfe;
border-radius: 6px;
margin-top: 0.4rem;
padding: 0.7rem 0.85rem;
font-size: 1.05rem;
font-weight: 700;
color: #2c5aa0;
}
/* ── Notes ────────────────────────────────────────────────────────── */
.notes-text[b-5b2q4h4pf8] {
margin: 0;
color: #1f2937;
background: #f8fafc;
padding: 0.75rem 1rem;
border-left: 3px solid #2c5aa0;
border-radius: 4px;
font-size: 0.9rem;
line-height: 1.5;
}
/* ── Audit table ─────────────────────────────────────────────────── */
.audit-table thead th[b-5b2q4h4pf8] {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #475569;
}
.audit-table code[b-5b2q4h4pf8] {
background: #f8fafc;
padding: 0.1rem 0.35rem;
border-radius: 3px;
border: 1px solid #e5e7eb;
color: #475569;
}
.audit-table .small[b-5b2q4h4pf8] { font-size: 0.78rem; }
/* ── Webhook delivery panel ─────────────────────────────────────── */
.webhook-table thead th[b-5b2q4h4pf8] {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #475569;
}
.webhook-table code[b-5b2q4h4pf8] {
background: #f8fafc;
padding: 0.1rem 0.35rem;
border-radius: 3px;
border: 1px solid #e5e7eb;
color: #374151;
font-size: 0.78rem;
}
/* Tiny status pills — same family as InvoiceStatusPill but scoped to delivery state. */
.webhook-status[b-5b2q4h4pf8] {
display: inline-block;
padding: 0.1rem 0.5rem;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
border: 1px solid transparent;
}
.webhook-status-pending[b-5b2q4h4pf8] {
background: #fefce8;
color: #a16207;
border-color: #fde68a;
}
.webhook-status-succeeded[b-5b2q4h4pf8] {
background: #f0fdf4;
color: #15803d;
border-color: #bbf7d0;
}
.webhook-status-failed[b-5b2q4h4pf8] {
background: #fff7ed;
color: #c2410c;
border-color: #fed7aa;
}
.webhook-status-abandoned[b-5b2q4h4pf8] {
background: #fef2f2;
color: #b91c1c;
border-color: #fecaca;
}
.text-success[b-5b2q4h4pf8] { color: #15803d; }
.text-danger[b-5b2q4h4pf8] { color: #b91c1c; }
/* /Components/Pages/Invoices/InvoiceEditPage.razor.rz.scp.css */
.invoice-edit[b-fnjgqt1pbx] {
padding: 1.5rem;
max-width: 1100px;
margin: 0 auto;
}
.back-link[b-fnjgqt1pbx] {
display: inline-block;
margin-bottom: 0.75rem;
text-decoration: none;
color: #2c5aa0;
}
/* Page heading + context subtitle */
.invoice-edit h1[b-fnjgqt1pbx] {
font-size: 1.5rem;
font-weight: 700;
margin: 0 0 0.15rem;
}
/* Each form group reads as a card, consistent with the detail page's sections. */
.form-section[b-fnjgqt1pbx] {
margin: 1rem 0;
padding: 1rem 1.25rem;
background: white;
border: 1px solid #e5e7eb;
border-radius: 10px;
}
.form-section h2[b-fnjgqt1pbx] {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #2c5aa0;
margin-bottom: 0.6rem;
}
.form-section .form-label[b-fnjgqt1pbx] {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #475569;
font-weight: 600;
margin-bottom: 0.35rem;
}
.actions[b-fnjgqt1pbx] {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 1.5rem;
}
/* NetSuite accounting code sub-label — mirrors the detail page's line-acct-code. */
.line-acct-code[b-fnjgqt1pbx] {
display: inline-block;
margin-top: 0.25rem;
font-size: 11px;
font-weight: 600;
color: #475569;
background: #f1f5f9;
padding: 2px 6px;
border-radius: 4px;
}
/* /Components/Pages/Invoices/InvoicePreviewPage.razor.rz.scp.css */
.action-bar[b-4ikmdbxacr] {
display: flex;
align-items: center;
padding: 0.75rem 1.5rem;
background: #f1f5f9;
border-bottom: 1px solid #e5e7eb;
}
.btn-back[b-4ikmdbxacr], .btn-print[b-4ikmdbxacr] {
background: white;
border: 1px solid #d1d5db;
border-radius: 6px;
padding: 0.4rem 0.85rem;
font-size: 0.875rem;
cursor: pointer;
}
.btn-print[b-4ikmdbxacr] {
background: #2c5aa0;
color: white;
border-color: #2c5aa0;
}
.print-hint[b-4ikmdbxacr] {
margin-left: 0.75rem;
font-size: 0.75rem;
color: #6b7280;
}
.invoice-document[b-4ikmdbxacr] {
max-width: 8.5in;
margin: 1.5rem auto;
padding: 0.75in;
background: white;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
font-family: Helvetica, Arial, sans-serif;
color: #1a1a1a;
}
.document-header[b-4ikmdbxacr] {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.brand-title[b-4ikmdbxacr] {
margin: 0;
font-size: 1.6rem;
color: #2c5aa0;
}
.brand-subtitle[b-4ikmdbxacr] {
color: #666;
font-size: 0.875rem;
margin: 0;
}
.invoice-label[b-4ikmdbxacr] {
font-size: 0.75rem;
letter-spacing: 0.1em;
color: #6b7280;
}
.invoice-number[b-4ikmdbxacr] {
font-size: 1.5rem;
font-weight: 700;
color: #1a1a1a;
}
.invoice-status[b-4ikmdbxacr] {
display: inline-block;
margin-top: 0.25rem;
padding: 0.15rem 0.6rem;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.05em;
}
.status-draft[b-4ikmdbxacr] { background: #e5e7eb; color: #4b5563; }
.status-issued[b-4ikmdbxacr] { background: #dbeafe; color: #1e40af; }
.status-paid[b-4ikmdbxacr] { background: #dcfce7; color: #166534; }
.status-void[b-4ikmdbxacr] { background: #fee2e2; color: #991b1b; }
.divider[b-4ikmdbxacr] {
border: 0;
border-top: 2px solid #2c5aa0;
margin: 1rem 0;
}
.meta-row[b-4ikmdbxacr] {
display: flex;
gap: 2.5rem;
margin-bottom: 1.5rem;
font-size: 0.85rem;
}
.meta-label[b-4ikmdbxacr] {
display: block;
color: #6b7280;
text-transform: uppercase;
font-size: 0.7rem;
letter-spacing: 0.05em;
}
.meta-value[b-4ikmdbxacr] {
font-weight: 600;
}
.section-title[b-4ikmdbxacr] {
font-size: 0.85rem;
color: #2c5aa0;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-top: 1.5rem;
margin-bottom: 0.5rem;
border-bottom: 1px solid #e5e7eb;
padding-bottom: 0.25rem;
}
.bill-to-row .block h3[b-4ikmdbxacr] {
font-size: 0.8rem;
color: #2c5aa0;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.3rem;
}
.bill-to-row p[b-4ikmdbxacr] {
margin: 0.1rem 0;
}
.muted[b-4ikmdbxacr] { color: #6b7280; }
.line-table[b-4ikmdbxacr] {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
}
.line-table th[b-4ikmdbxacr], .line-table td[b-4ikmdbxacr] {
padding: 0.5rem 0.75rem;
border-bottom: 1px solid #e5e7eb;
}
.line-table thead th[b-4ikmdbxacr] {
background: #f1f5f9;
font-weight: 600;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.text-end[b-4ikmdbxacr] { text-align: right; }
.totals[b-4ikmdbxacr] {
margin-top: 1.5rem;
margin-left: auto;
width: 320px;
font-size: 0.875rem;
}
.totals .row[b-4ikmdbxacr] {
display: flex;
justify-content: space-between;
padding: 0.35rem 0;
border-bottom: 1px solid #e5e7eb;
}
.totals .row.total[b-4ikmdbxacr] {
background: #f1f5f9;
padding: 0.6rem 0.75rem;
margin-top: 0.4rem;
color: #2c5aa0;
font-weight: 700;
font-size: 1.05rem;
border-bottom: none;
}
.notes[b-4ikmdbxacr] {
background: #f8fafc;
padding: 0.75rem;
border-left: 3px solid #2c5aa0;
border-radius: 2px;
}
.document-footer[b-4ikmdbxacr] {
margin-top: 2rem;
border-top: 1px solid #e5e7eb;
padding-top: 0.75rem;
color: #6b7280;
font-size: 0.8rem;
}
.no-print[b-4ikmdbxacr] { /* honored by PrintableLayout's @media print */ }
@media print {
.no-print[b-4ikmdbxacr] { display: none !important; }
.invoice-document[b-4ikmdbxacr] { box-shadow: none; margin: 0; padding: 0.5in; }
}
/* /Components/Pages/Invoices/InvoicesPage.razor.rz.scp.css */
.invoices-page[b-v2ri8l0pd9] {
padding: 1.5rem;
max-width: 1400px;
margin: 0 auto;
}
/* ── Header (matches /admin/netsuite-sync's toolbar card) ─────────────── */
.logs-toolbar[b-v2ri8l0pd9] {
display: flex; justify-content: space-between; align-items: center; gap: 16px;
padding: 12px 16px; background: var(--bg-surface, #fff);
border: 1px solid var(--border, #e5e7eb); border-radius: 12px;
margin-bottom: 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); flex-wrap: wrap;
}
.tb-left[b-v2ri8l0pd9] { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tb-icon[b-v2ri8l0pd9] {
width: 40px; height: 40px; border-radius: 10px;
background: linear-gradient(135deg, var(--brand-500, #2563eb), var(--brand-700, #1e40af));
color: #fff; display: flex; align-items: center; justify-content: center;
font-size: 19px; flex-shrink: 0;
box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
}
.tb-title[b-v2ri8l0pd9] {
font-size: 17px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.2;
}
.tb-subtitle[b-v2ri8l0pd9] {
font-size: 12.5px; color: var(--text-muted, #6b7280); margin-top: 2px;
}
.tb-right[b-v2ri8l0pd9] { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
/* ── Stats grid ─────────────────────────────────────────────────────── */
.stats-grid[b-v2ri8l0pd9] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
margin-bottom: 16px;
}
.stat-card[b-v2ri8l0pd9] {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: var(--bg-surface, #fff);
border: 1px solid var(--border, #e5e7eb);
border-radius: 12px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
text-align: left;
cursor: pointer;
transition: border-color 120ms, transform 120ms, box-shadow 120ms;
font: inherit;
color: inherit;
}
.stat-card:hover[b-v2ri8l0pd9] {
border-color: var(--brand-500, #2563eb);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
}
.stat-card.stat-active[b-v2ri8l0pd9] {
border-color: var(--brand-500, #2563eb);
box-shadow: 0 0 0 2px rgba(0, 91, 159, 0.15);
background: var(--brand-50, #eff6ff);
}
.stat-card.stat-card-alert[b-v2ri8l0pd9] {
border-color: var(--error-500, #ef4444);
}
.stat-card.stat-card-alert .stat-icon-overdue[b-v2ri8l0pd9] {
background: var(--error-100, #fee2e2);
color: var(--error-600, #dc2626);
}
.stat-icon[b-v2ri8l0pd9] {
width: 38px;
height: 38px;
border-radius: 9px;
display: grid;
place-items: center;
font-size: 18px;
flex-shrink: 0;
}
.stat-icon-draft[b-v2ri8l0pd9] { background: var(--bg-muted, #f1f5f9); color: var(--text-muted, #475569); }
.stat-icon-issued[b-v2ri8l0pd9] { background: #eef2ff; color: #4f46e5; }
.stat-icon-partial[b-v2ri8l0pd9] { background: var(--accent-100, #fef9c3); color: var(--accent-700, #a16207); }
.stat-icon-overdue[b-v2ri8l0pd9] { background: var(--accent-100, #fef3c7); color: var(--accent-700, #b45309); }
.stat-icon-paid[b-v2ri8l0pd9] { background: var(--success-100, #dcfce7); color: var(--success-700, #166534); }
.stat-body[b-v2ri8l0pd9] { min-width: 0; }
.stat-label[b-v2ri8l0pd9] {
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted, #6b7280);
font-weight: 600;
}
.stat-value[b-v2ri8l0pd9] {
font-size: 22px;
font-weight: 700;
color: var(--text-primary, #111827);
line-height: 1.1;
margin-top: 0.1rem;
letter-spacing: -0.5px;
}
.stat-hint[b-v2ri8l0pd9] {
font-size: 0.75rem;
color: var(--text-muted, #6b7280);
margin-top: 0.15rem;
}
/* ── Missing-invoice banner ─────────────────────────────────────────── */
.alert-banner[b-v2ri8l0pd9] {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.75rem 1rem;
border-radius: 8px;
margin-bottom: 1rem;
}
.alert-banner-warn[b-v2ri8l0pd9] {
background: rgba(245, 158, 11, 0.08);
border: 1px solid rgba(245, 158, 11, 0.3);
border-left: 4px solid var(--accent-500, #f59e0b);
color: var(--accent-800, #6b4f0f);
}
/* Direct-child only — avoids cascading the gold color into icons inside the
action button, where it'd render gold-on-gold and look "missing". */
.alert-banner > i[b-v2ri8l0pd9] {
color: var(--accent-600, #d97706);
font-size: 1.1rem;
flex-shrink: 0;
}
.alert-body[b-v2ri8l0pd9] {
flex: 1;
font-size: 0.9rem;
}
/* Subtle outline button — sits inside an already-loud warning banner, so the
button itself doesn't need to shout. Matches the muted style of the page's
other secondary actions (header Refresh, bulk-export buttons). */
.alert-banner .btn-warning[b-v2ri8l0pd9] {
background: transparent;
border: 1px solid var(--accent-600, #c89512);
color: var(--accent-800, #6b4f0f);
font-weight: 500;
padding: 0.3rem 0.75rem;
}
.alert-banner .btn-warning:hover[b-v2ri8l0pd9] {
background: var(--accent-600, #d97706);
border-color: var(--accent-600, #d97706);
color: white;
}
.alert-banner .btn-warning i[b-v2ri8l0pd9] {
color: inherit; /* follow the button text color, not the banner's gold */
}
/* ── Unified data card (filters + table + pagination) — matches netsuite-sync's card-section ── */
.data-card[b-v2ri8l0pd9] {
background: var(--bg-surface, #fff);
border: 1px solid var(--border, #e5e7eb);
border-radius: 12px;
overflow: hidden; /* keeps the internal hairlines flush against the rounded corners */
}
.data-card-toolbar[b-v2ri8l0pd9] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.75rem 1rem;
background: var(--bg-muted, #f9fafb);
border-bottom: 1px solid var(--border, #e5e7eb);
flex-wrap: wrap;
}
/* In-card states: loading, empty. Padded so they don't crowd the toolbar above. */
.data-card-state[b-v2ri8l0pd9] {
padding: 2.5rem 1.5rem;
text-align: center;
color: var(--text-muted, #6b7280);
}
.data-card-footer[b-v2ri8l0pd9] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.65rem 1rem;
border-top: 1px solid var(--border, #e5e7eb);
background: var(--bg-muted, #f9fafb);
}
/* ── Filter chips + search (now lives inside .data-card-toolbar) ──── */
.filter-chips[b-v2ri8l0pd9] {
display: flex;
gap: 0.4rem;
flex-wrap: wrap;
}
.chip[b-v2ri8l0pd9] {
padding: 0.3rem 0.8rem;
border: 1px solid var(--border, #e5e7eb);
background: var(--bg-surface, #fff);
border-radius: 999px;
font-size: 0.8rem;
color: var(--text-muted, #475569);
cursor: pointer;
transition: all 120ms;
}
.chip:hover[b-v2ri8l0pd9] { border-color: var(--brand-500, #2563eb); color: var(--brand-600, #1d4ed8); }
.chip.chip-active[b-v2ri8l0pd9] {
background: var(--brand-600, #1d4ed8);
border-color: var(--brand-600, #1d4ed8);
color: white;
}
/* Hairline divider between filter-selector chips and the trailing view-option
toggle. Same height as a chip's text so it visually anchors to the row. */
.chip-divider[b-v2ri8l0pd9] {
width: 1px;
height: 1.1rem;
background: var(--border-medium, #cbd5e1);
margin: 0 0.15rem;
align-self: center;
}
/* Inline view-option toggle that sits at the end of the chip row. Reads as a
chip with a checkbox affordance: same pill geometry, same font, but with a
compact custom checkbox + icon so the on/off state is unambiguous at a glance.
Active state mirrors how a chip looks when filled — but tinted instead of
solid blue so the eye is drawn first to the actual filter chips. */
.chip-toggle[b-v2ri8l0pd9] {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.3rem 0.7rem 0.3rem 0.55rem;
border: 1px solid var(--border, #e5e7eb);
background: var(--bg-surface, #fff);
border-radius: 999px;
font-size: 0.8rem;
color: var(--text-muted, #475569);
cursor: pointer;
user-select: none;
transition: border-color 120ms, color 120ms, background-color 120ms;
margin: 0;
line-height: 1.2;
}
.chip-toggle:hover[b-v2ri8l0pd9] {
border-color: var(--border-medium, #94a3b8);
color: var(--text-primary, #1e293b);
}
.chip-toggle.chip-toggle-on[b-v2ri8l0pd9] {
background: var(--brand-50, #eff6ff);
border-color: var(--brand-100, #bfdbfe);
color: var(--brand-700, #1d4ed8);
}
.chip-toggle.chip-toggle-on > i[b-v2ri8l0pd9] { color: var(--brand-600, #2c5aa0); }
/* Native checkbox is the source of truth for state + accessibility, but visually
hidden so we can render a clearer custom box next to it. Stays in the focus
order via the wrapping