/* =============================================================
lender-lev.css — RatePlug Lender Portal
Lev.com-inspired light SaaS design system
============================================================= */
/* ---- Google Font (Inter) ----------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
/* ---- Design Tokens ----------------------------------------- */
:root {
--bg-app: #f0f4f8;
--bg-sidebar: #ffffff;
--bg-card: #ffffff;
--accent: #25a6d8;
--accent-dark: #166e94;
--accent-hover: #135d7e;
--accent-light: #e8f4fa;
--accent-subtle: rgba(37,99,235,.06);
--accent-border: rgba(37,99,235,.15);
--text-primary: #1a2c3e;
--text-secondary:#4d6880;
--text-muted: #8fa5b8;
--border: #dde6ee;
--border-focus: #25a6d8;
--table-head: #f0f5f9;
--table-alt: #f8fafb;
--bg-offset: #f8fafc;
--sidebar-w: 230px;
--topbar-h: 58px;
--shadow-sm: 0 1px 3px rgba(26,44,62,.08), 0 1px 2px rgba(26,44,62,.04);
--shadow-md: 0 4px 16px rgba(26,44,62,.12);
--radius: 8px;
--radius-sm: 5px;
--font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* ---- Medium Theme ------------------------------------------ */
body.lender-theme-medium {
--bg-app: #dce4ec;
--bg-sidebar: #2a3a4d;
--bg-card: #eef2f7;
--accent: #25a6d8;
--accent-dark: #166e94;
--accent-hover: #135d7e;
--accent-light: #daeef7;
--accent-subtle: rgba(37,99,235,.08);
--accent-border: rgba(37,99,235,.18);
--text-primary: #1a2c3e;
--text-secondary:#4d6880;
--text-muted: #7a8fa2;
--border: #c5d0dc;
--border-focus: #25a6d8;
--table-head: #dce4ec;
--table-alt: #e4eaf0;
--bg-offset: #e4eaf0;
--shadow-sm: 0 1px 3px rgba(26,44,62,.1), 0 1px 2px rgba(26,44,62,.06);
--shadow-md: 0 4px 16px rgba(26,44,62,.14);
}
body.lender-theme-medium .lender-sidebar {
color: #c8d5e2;
}
body.lender-theme-medium .lender-sidebar a {
color: #c8d5e2;
}
body.lender-theme-medium .lender-sidebar a:hover {
color: #ffffff;
}
body.lender-theme-medium .lender-nav-group-toggle span {
color: #c8d5e2;
}
body.lender-theme-medium .lender-nav-group-toggle .chevron {
color: #64748b;
}
body.lender-theme-medium .lender-nav-label {
color: #64748b;
}
body.lender-theme-medium .lender-sidebar-footer {
border-top-color: #374a5e;
}
body.lender-theme-medium .lender-avatar {
background: #374a5e;
color: #c8d5e2;
}
body.lender-theme-medium .lender-avatar-name {
color: #e2e8f0;
}
body.lender-theme-medium .lender-avatar-name a {
color: #64748b;
}
body.lender-theme-medium .lender-avatar-role a {
color: #64748b;
}
body.lender-theme-medium .lender-badge {
background: #374a5e;
color: #94a3b8;
}
/* ---- Dark Theme -------------------------------------------- */
body.lender-theme-dark {
--bg-app: #0f1419;
--bg-sidebar: #161d24;
--bg-card: #1a2332;
--accent: #38bdf8;
--accent-dark: #7dd3fc;
--accent-hover: #5cc8f9;
--accent-light: rgba(56,189,248,.12);
--accent-subtle: rgba(56,189,248,.08);
--accent-border: rgba(56,189,248,.2);
--text-primary: #e8edf2;
--text-secondary:#8899aa;
--text-muted: #566778;
--border: #2a3a4d;
--border-focus: #38bdf8;
--table-head: #141c26;
--table-alt: #1e2a38;
--bg-offset: #1e2a38;
--shadow-sm: 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
--shadow-md: 0 4px 16px rgba(0,0,0,.45);
}
body.lender-theme-dark .lender-sidebar a {
color: #b8c8d8;
}
body.lender-theme-dark .lender-sidebar a:hover {
color: #ffffff;
}
body.lender-theme-dark .lender-nav-group-toggle span {
color: #b8c8d8;
}
body.lender-theme-dark .lender-nav-group-toggle .chevron {
color: #6b7f92;
}
body.lender-theme-dark .lender-nav-label {
color: #6b7f92;
}
body.lender-theme-dark .lender-nav-icon {
opacity: .8;
}
/* ---- Theme Toggle Button ----------------------------------- */
.lender-theme-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
color: var(--text-secondary);
background: var(--bg-app);
border: 1px solid var(--border);
cursor: pointer;
transition: color .15s, border-color .15s;
padding: 0;
font-size: 0;
}
.lender-theme-toggle:hover {
color: var(--accent);
border-color: var(--accent);
}
.lender-theme-toggle svg {
width: 18px;
height: 18px;
}
/* ---- Page Loader ------------------------------------------- */
.p-loader-overlay {
position: fixed;
inset: 0;
z-index: 99999;
background: var(--bg-app);
display: flex;
align-items: center;
justify-content: center;
transition: opacity .4s ease;
}
.p-loader-overlay.p-loader-fade {
opacity: 0;
pointer-events: none;
}
.p-loader-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.p-loader-icon {
width: 72px;
height: auto;
animation: p-loader-pulse 1.6s ease-in-out infinite;
}
@keyframes p-loader-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .5; transform: scale(.92); }
}
.p-loader-text {
font-family: var(--font);
font-size: 13px;
font-weight: 500;
color: var(--text-muted);
letter-spacing: .2px;
}
/* ---- Base Reset -------------------------------------------- */
body.lender-body,
body.lender-login-body {
margin: 0;
padding: 0;
background: var(--bg-app);
font-family: var(--font);
font-size: 14px;
color: var(--text-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body.lender-body *,
body.lender-login-body * {
box-sizing: border-box;
}
/* ---- App Shell --------------------------------------------- */
.lender-app {
display: flex;
min-height: 100vh;
}
/* ============================================================
SIDEBAR
============================================================ */
.lender-sidebar {
width: var(--sidebar-w);
height: 100vh;
background: var(--bg-sidebar);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
position: fixed;
top: 0;
left: 0;
z-index: 100;
box-shadow: var(--shadow-sm);
overflow-y: auto;
overflow-x: hidden;
}
.lender-sidebar-logo {
padding: 20px 20px 16px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.lender-sidebar-logo a {
display: block;
margin-bottom: 8px;
}
.lender-sidebar-logo img {
max-width: 130px;
height: auto;
display: block;
}
.lender-badge {
display: inline-block;
background: var(--accent-light);
color: var(--accent-dark);
font-size: 10px;
font-weight: 700;
letter-spacing: .6px;
text-transform: uppercase;
padding: 3px 9px;
border-radius: 10px;
border: 1px solid rgba(0,168,144,.2);
}
/* ---- Nav --------------------------------------------------- */
.lender-nav {
flex: 1;
padding: 8px 0 16px;
}
.lender-nav-section {
margin-bottom: 4px;
}
.lender-nav-label {
font-size: 10px;
font-weight: 700;
letter-spacing: .8px;
text-transform: uppercase;
color: var(--text-muted);
padding: 10px 20px 4px;
}
.lender-nav a {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 20px;
color: var(--text-secondary);
text-decoration: none;
font-size: 13px;
font-weight: 500;
border-left: 3px solid transparent;
transition: all .12s ease;
line-height: 1.4;
}
.lender-nav a:hover {
background: var(--accent-light);
color: var(--accent-dark);
border-left-color: var(--accent);
text-decoration: none;
}
.lender-nav a.active {
background: var(--accent-light);
color: var(--accent);
border-left-color: var(--accent);
font-weight: 600;
}
.lender-nav-icon {
width: 15px;
height: 15px;
flex-shrink: 0;
opacity: .65;
}
/* ---- Collapsible Nav Groups -------------------------------- */
.lender-nav-group {
margin-bottom: 2px;
}
.lender-nav-group-toggle {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 20px;
color: var(--text-secondary);
font-size: 13px;
font-weight: 600;
cursor: pointer;
border-left: 3px solid transparent;
transition: all .12s ease;
user-select: none;
}
.lender-nav-group-toggle > span {
display: flex;
align-items: center;
gap: 10px;
}
.lender-nav-group-toggle .lender-nav-icon {
width: 15px;
height: 15px;
flex-shrink: 0;
}
.lender-nav-group-toggle:hover {
background: var(--accent-light);
color: var(--accent-dark);
border-left-color: var(--accent);
}
.lender-nav-group-toggle .chevron {
width: 12px;
height: 12px;
transition: transform .2s ease;
opacity: .4;
flex-shrink: 0;
}
.lender-nav-group.open > .lender-nav-group-toggle {
color: var(--accent-dark);
border-left-color: var(--accent);
}
.lender-nav-group.open > .lender-nav-group-toggle .chevron {
transform: rotate(90deg);
opacity: .7;
}
.lender-nav-group-items {
max-height: 0;
overflow: hidden;
transition: max-height .25s ease;
}
.lender-nav-group.open > .lender-nav-group-items {
max-height: 500px;
}
.lender-nav-group-items a {
padding-left: 36px;
font-size: 12px;
font-weight: 500;
}
/* ---- Sidebar footer / user info --------------------------- */
.lender-sidebar-footer {
border-top: 1px solid var(--border);
padding: 14px 20px;
flex-shrink: 0;
}
.lender-sidebar-user {
display: flex;
align-items: center;
gap: 10px;
}
.lender-avatar {
width: 34px;
height: 34px;
background: var(--accent);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 12px;
font-weight: 700;
flex-shrink: 0;
text-transform: uppercase;
}
.lender-avatar-name {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 140px;
}
.lender-avatar-role {
font-size: 11px;
color: var(--text-muted);
margin-top: 1px;
}
/* ============================================================
MAIN CONTENT AREA
============================================================ */
.lender-main {
margin-left: var(--sidebar-w);
flex: 1;
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* ---- Top Bar ---------------------------------------------- */
.lender-topbar {
height: var(--topbar-h);
background: var(--bg-card);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 28px;
position: sticky;
top: 0;
z-index: 50;
flex-shrink: 0;
}
.lender-topbar-title {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 6px;
letter-spacing: -.1px;
}
.lender-topbar-title .breadcrumb-sep {
color: var(--text-muted);
font-weight: 400;
margin: 0 2px;
}
.lender-topbar-actions {
display: flex;
align-items: center;
gap: 10px;
}
.lender-topbar-meta {
font-size: 12px;
color: var(--text-muted);
font-weight: 500;
}
.lender-topbar-profile {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
color: var(--text-secondary);
background: var(--bg-app);
border: 1px solid var(--border);
transition: color .15s, border-color .15s;
text-decoration: none;
}
.lender-topbar-profile:hover {
color: var(--accent);
border-color: var(--accent);
}
/* ── Account Switcher ── */
.lender-acct-switcher {
position: relative;
}
.lender-acct-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-card);
color: var(--text-secondary);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: border-color .15s, color .15s, background .15s;
max-width: 260px;
white-space: nowrap;
}
.lender-acct-btn span {
overflow: hidden;
text-overflow: ellipsis;
}
.lender-acct-btn:hover {
border-color: var(--accent);
color: var(--accent);
}
.lender-acct-chev {
flex-shrink: 0;
transition: transform .2s;
}
.lender-acct-switcher.open .lender-acct-chev {
transform: rotate(180deg);
}
.lender-acct-dropdown {
display: none;
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 280px;
max-width: 360px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 8px 24px rgba(0,0,0,.12);
z-index: 200;
padding: 6px 0;
}
.lender-acct-switcher.open .lender-acct-dropdown {
display: block;
}
.lender-acct-dropdown-label {
padding: 8px 14px 6px;
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: .5px;
}
.lender-acct-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
font-size: 13px;
color: var(--text-primary);
text-decoration: none;
cursor: pointer;
transition: background .12s;
}
a.lender-acct-item:hover {
background: var(--accent-subtle);
color: var(--accent);
}
.lender-acct-item.active {
color: var(--text-secondary);
font-weight: 500;
cursor: default;
}
.lender-acct-item .p-badge {
margin-left: auto;
}
.lender-acct-divider {
height: 1px;
background: var(--border);
margin: 4px 0;
}
/* ---- Page Content wrapper --------------------------------- */
.lender-page-content {
flex: 1;
padding: 24px 28px 36px;
}
/* Auto-card: give direct child tables and forms a white card background */
.lender-page-content > table:not(.p-table),
.lender-page-content > form {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
padding: 20px;
margin-bottom: 20px;
}
/* Forms that contain p-cards: transparent wrapper, no double-card */
.lender-page-content > form:has(.p-card) {
background: transparent;
border: none;
box-shadow: none;
padding: 0;
}
/* Tables inside auto-carded forms stay transparent */
.lender-page-content > form > table,
.lender-page-content > form > .p-card {
border: none;
box-shadow: none;
padding: 0;
margin-bottom: 0;
background: transparent;
}
/* Bootstrap .table class gets white background */
.lender-page-content .table {
background: var(--bg-card);
}
/* ============================================================
PAGE HEADER
============================================================ */
.p-page-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 20px;
flex-wrap: wrap;
gap: 12px;
}
.p-page-title {
font-size: 20px;
font-weight: 700;
color: var(--text-primary);
margin: 0 0 3px;
line-height: 1.2;
letter-spacing: -.3px;
}
.p-page-subtitle {
font-size: 13px;
color: var(--text-secondary);
margin: 0;
}
.p-page-desc {
font-size: 12px;
color: var(--text-muted);
margin: 4px 0 0;
font-weight: 400;
}
.p-page-header-logo {
flex-shrink: 0;
}
.p-page-header-logo img {
max-height: 65px;
max-width: 200px;
object-fit: contain;
}
/* ============================================================
CARDS
============================================================ */
.p-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
margin-bottom: 20px;
overflow: hidden;
}
.p-card-header {
padding: 14px 20px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
background: var(--table-head);
gap: 12px;
}
.p-card-title {
font-size: 13px;
font-weight: 700;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 8px;
letter-spacing: -.1px;
margin: 0;
}
.p-card-title-dot {
width: 8px;
height: 8px;
background: var(--accent);
border-radius: 50%;
flex-shrink: 0;
}
.p-card-body {
padding: 20px;
}
/* ============================================================
STATS GRID
============================================================ */
.p-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
margin-bottom: 24px;
}
.p-stat-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-left: 3px solid var(--accent);
border-radius: var(--radius);
padding: 18px 20px;
box-shadow: var(--shadow-sm);
}
.p-stat-label {
font-size: 10px;
font-weight: 700;
letter-spacing: .6px;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 6px;
}
.p-stat-value {
font-size: 28px;
font-weight: 700;
color: var(--text-primary);
line-height: 1;
letter-spacing: -.5px;
}
.p-stat-sub {
font-size: 12px;
color: var(--text-muted);
margin-top: 5px;
}
/* ============================================================
TABLES
============================================================ */
.p-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
table.p-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
margin: 0;
}
table.p-table th {
background: var(--table-head);
color: var(--text-secondary);
font-size: 11px;
font-weight: 700;
letter-spacing: .5px;
text-transform: uppercase;
padding: 10px 14px;
text-align: left;
border-bottom: 2px solid var(--border);
white-space: nowrap;
}
table.p-table th.sortable {
cursor: pointer;
padding-right: 22px;
position: relative;
user-select: none;
transition: color .15s;
}
table.p-table th.sortable:hover {
color: var(--text-primary);
}
table.p-table th.sortable::after {
content: '\25B2\25BC';
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
font-size: 7px;
letter-spacing: -1px;
opacity: .25;
line-height: 1;
}
table.p-table th.sort-asc::after {
content: '\25B2';
opacity: .7;
font-size: 9px;
}
table.p-table th.sort-desc::after {
content: '\25BC';
opacity: .7;
font-size: 9px;
}
table.p-table td {
padding: 11px 14px;
border-bottom: 1px solid var(--border);
color: var(--text-primary);
vertical-align: top;
line-height: 1.5;
}
table.p-table tr:last-child td {
border-bottom: none;
}
table.p-table tr:nth-child(even) td {
background: var(--table-alt);
}
table.p-table tbody tr:hover td {
background: var(--accent-light);
transition: background .1s ease;
}
table.p-table .td-label {
font-weight: 600;
color: var(--text-secondary);
white-space: nowrap;
width: 160px;
}
table.p-table .td-secondary {
color: var(--text-secondary);
font-size: 12px;
}
/* ============================================================
BADGES / STATUS
============================================================ */
.p-badge {
display: inline-flex;
align-items: center;
padding: 2px 9px;
border-radius: 10px;
font-size: 11px;
font-weight: 600;
letter-spacing: .3px;
white-space: nowrap;
}
.p-badge-active { background: #d1fae5; color: #065f46; }
.p-badge-training { background: #fff3e0; color: #b45309; }
.p-badge-contract { background: #dbeafe; color: #1e40af; }
.p-badge-lead { background: #f3f4f6; color: #6b7280; }
.p-badge-inactive { background: #fee2e2; color: #991b1b; }
.p-badge-default { background: var(--accent-light); color: var(--accent-dark); }
/* ============================================================
BUTTONS
============================================================ */
.p-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 18px;
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 600;
font-family: var(--font);
cursor: pointer;
border: none;
transition: all .12s ease;
text-decoration: none;
white-space: nowrap;
line-height: 1;
}
.p-btn:focus {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.p-btn-primary {
background: var(--accent);
color: #fff;
}
.p-btn-primary:hover {
background: var(--accent-hover);
color: #fff;
text-decoration: none;
box-shadow: 0 2px 8px rgba(19,93,126,.35);
}
.p-btn-secondary {
background: #fff;
color: var(--text-secondary);
border: 1px solid var(--border);
}
.p-btn-secondary:hover {
background: var(--accent-light);
color: var(--accent-dark);
border-color: var(--accent);
text-decoration: none;
}
.p-btn-ghost {
background: transparent;
color: var(--accent);
border: 1px solid var(--accent);
}
.p-btn-ghost:hover {
background: var(--accent-light);
text-decoration: none;
}
.p-btn-sm {
padding: 5px 12px;
font-size: 12px;
}
.p-btn-lg {
padding: 11px 24px;
font-size: 14px;
border-radius: var(--radius);
}
.p-btn-full {
width: 100%;
}
/* ============================================================
FORMS
============================================================ */
.p-form-group {
margin-bottom: 16px;
}
.p-form-label {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 5px;
letter-spacing: -.1px;
}
.p-form-label .req {
color: var(--accent);
margin-left: 2px;
}
.p-form-input,
.p-form-select,
.p-form-textarea {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 13px;
font-family: var(--font);
color: var(--text-primary);
background: #fff;
transition: border-color .12s ease, box-shadow .12s ease;
-webkit-appearance: none;
appearance: none;
}
.p-form-input:focus,
.p-form-select:focus,
.p-form-textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(0,168,144,.12);
}
.p-form-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238fa5b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 32px;
}
.p-form-textarea {
resize: vertical;
min-height: 90px;
}
.p-form-hint {
font-size: 11px;
color: var(--text-muted);
margin-top: 4px;
}
.p-form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}
.p-form-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.p-form-grid-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
}
.p-form-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.p-form-section-title {
font-size: 11px;
font-weight: 700;
letter-spacing: .6px;
text-transform: uppercase;
color: var(--text-muted);
padding: 14px 0 8px;
border-bottom: 1px solid var(--border);
margin-bottom: 16px;
}
.p-form-actions {
display: flex;
align-items: center;
gap: 10px;
padding-top: 8px;
}
/* Checkbox */
.p-check {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 13px;
color: var(--text-primary);
font-weight: 500;
}
.p-check input[type="checkbox"],
.p-check input[type="radio"] {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
border: 2px solid var(--border);
border-radius: 3px;
background: #fff;
cursor: pointer;
position: relative;
flex-shrink: 0;
transition: all .12s ease;
}
.p-check input[type="radio"] { border-radius: 50%; }
.p-check input[type="checkbox"]:checked {
background: var(--accent);
border-color: var(--accent);
}
.p-check input[type="checkbox"]:checked::after {
content: '';
position: absolute;
left: 4px;
top: 1px;
width: 5px;
height: 9px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.p-check input[type="radio"]:checked {
background: var(--accent);
border-color: var(--accent);
}
.p-check input[type="radio"]:checked::after {
content: '';
position: absolute;
left: 3px;
top: 3px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
}
/* Date range row */
.p-date-range {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.p-date-range label {
font-size: 12px;
color: var(--text-secondary);
white-space: nowrap;
}
.p-date-range .p-form-input {
width: 130px;
}
/* ============================================================
ALERTS
============================================================ */
.p-alert {
padding: 12px 16px;
border-radius: var(--radius-sm);
font-size: 13px;
margin-bottom: 16px;
display: flex;
gap: 10px;
align-items: flex-start;
line-height: 1.5;
}
.p-alert-error {
background: #fef2f2;
border: 1px solid #fca5a5;
color: #991b1b;
}
.p-alert-success {
background: #d1fae5;
border: 1px solid #6ee7b7;
color: #065f46;
}
.p-alert-info {
background: var(--accent-light);
border: 1px solid rgba(0,168,144,.25);
color: var(--accent-dark);
}
.p-alert-warn {
background: #fffbeb;
border: 1px solid #fcd34d;
color: #92400e;
}
/* ---- Bootstrap-style .alert used by DisplayErrors2 --------- */
.alert {
padding: 14px 18px;
border-radius: var(--radius-sm);
font-family: var(--font);
font-size: 13px;
font-weight: 500;
line-height: 1.6;
margin-bottom: 10px;
}
.alert-danger {
background: #fef2f2;
border: 1px solid #fca5a5;
color: #991b1b;
}
/* ============================================================
LINKS
============================================================ */
a.p-link {
color: var(--accent);
text-decoration: none;
font-weight: 500;
}
a.p-link:hover {
color: var(--accent-dark);
text-decoration: underline;
}
/* ============================================================
DIVIDER
============================================================ */
.p-divider {
border: none;
border-top: 1px solid var(--border);
margin: 20px 0;
}
/* ============================================================
VIEW TABS (overview / summary toggle)
============================================================ */
.p-view-tabs {
display: flex;
align-items: center;
gap: 4px;
background: var(--table-head);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 3px;
}
.p-view-tab {
padding: 5px 14px;
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
text-decoration: none;
border-radius: 4px;
transition: all .1s ease;
}
.p-view-tab:hover {
color: var(--accent-dark);
text-decoration: none;
}
.p-view-tab.active {
background: var(--bg-card);
color: var(--accent);
box-shadow: var(--shadow-sm);
}
/* ============================================================
RESULT COUNT BAR
============================================================ */
.p-result-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
background: var(--table-head);
border-bottom: 1px solid var(--border);
font-size: 13px;
flex-wrap: wrap;
gap: 8px;
}
.p-result-count {
color: var(--text-secondary);
font-weight: 500;
}
.p-result-count strong {
color: var(--accent);
}
/* ============================================================
LOGIN PAGE
============================================================ */
body.lender-login-body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(145deg, #eef6f5 0%, #deeeed 100%);
}
.lender-login-wrapper {
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.lender-login-box {
width: 420px;
max-width: 100%;
background: #fff;
border-radius: 12px;
box-shadow: var(--shadow-md);
overflow: hidden;
}
.lender-login-header {
background: var(--accent);
padding: 28px 32px;
text-align: center;
}
.lender-login-header img {
display: block;
width: 150px;
height: auto;
margin: 0 auto 12px;
padding: 15px;
background: #fff;
border-radius: 8px;
}
.lender-login-header h1 {
margin: 0 0 4px;
font-size: 18px;
font-weight: 700;
color: #fff;
letter-spacing: -.2px;
}
.lender-login-header p {
margin: 0;
font-size: 13px;
color: rgba(255,255,255,.8);
}
.lender-login-body-inner {
padding: 28px 32px;
}
.lender-login-footer {
padding: 14px 32px;
background: var(--table-head);
border-top: 1px solid var(--border);
text-align: center;
font-size: 12px;
color: var(--text-muted);
}
/* ============================================================
PORTAL FOOTER
============================================================ */
.lender-footer {
text-align: center;
padding: 18px 28px;
font-size: 12px;
color: var(--text-muted);
border-top: 1px solid var(--border);
background: var(--bg-card);
margin-top: auto;
flex-shrink: 0;
}
/* ============================================================
MODAL
============================================================ */
.p-modal-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(26, 44, 62, .45);
backdrop-filter: blur(3px);
align-items: center;
justify-content: center;
}
.p-modal-overlay.active {
display: flex;
}
.p-modal {
background: var(--bg-card);
border-radius: var(--radius);
box-shadow: var(--shadow-md), 0 12px 40px rgba(26, 44, 62, .18);
width: 94%;
max-width: 680px;
max-height: 85vh;
display: flex;
flex-direction: column;
overflow: hidden;
animation: p-modal-in .2s ease-out;
}
.p-modal.p-modal-wide {
max-width: 95vw;
}
.p-modal.p-modal-viewemail {
max-height: 90vh;
min-height: 70vh;
}
.p-modal.p-modal-sm {
max-width: 340px;
max-height: 260px;
}
.p-modal.p-modal-tall {
max-height: 92vh;
}
@keyframes p-modal-in {
from { opacity: 0; transform: translateY(12px) scale(.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.p-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.p-modal-title {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
}
.p-modal-close {
background: none;
border: none;
font-size: 22px;
line-height: 1;
color: var(--text-muted);
cursor: pointer;
padding: 0 4px;
transition: color .15s;
}
.p-modal-close:hover {
color: var(--text-primary);
}
.p-modal-iframe {
border: none;
width: 100%;
flex: 1 1 auto;
min-height: 420px;
}
/* ============================================================
DASHBOARD STAT CARDS & ACTIVITY
============================================================ */
.p-dash-stat-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 20px;
}
.p-dash-stats-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
}
.p-dash-stats-header {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
padding: 10px 16px;
border-bottom: 1px solid var(--border);
}
.p-dash-stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.p-dash-stat-item {
padding: 14px 20px;
border-left: 3px solid var(--accent);
margin: 8px 0 8px 12px;
}
.p-dash-stat-item:nth-child(2),
.p-dash-stat-item:nth-child(4) {
margin-left: 0;
margin-right: 12px;
border-left: 3px solid #6ec8e6;
}
.p-dash-stat-value {
font-size: 24px;
font-weight: 700;
color: var(--text-primary);
line-height: 1;
}
.p-dash-stat-label {
font-size: 12px;
font-weight: 500;
color: var(--text-muted);
margin-top: 2px;
text-transform: uppercase;
letter-spacing: .4px;
}
/* Activity card (right column) */
.p-dash-activity-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
}
.p-dash-activity-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
border-bottom: 1px solid var(--border);
}
.p-dash-activity-title {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
}
.p-dash-activity-select {
font-family: var(--font);
font-size: 11px;
font-weight: 500;
color: var(--text-secondary);
background: var(--bg-app);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 4px 8px;
cursor: pointer;
outline: none;
transition: border-color .15s;
}
.p-dash-activity-select:focus {
border-color: var(--border-focus);
}
.p-dash-activity-body {
padding: 6px 16px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.p-dash-activity-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 7px 0;
border-bottom: 1px solid #f0f4f8;
}
.p-dash-activity-row:last-child {
border-bottom: none;
}
.p-dash-activity-label {
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
}
.p-dash-activity-val {
font-size: 14px;
font-weight: 700;
color: var(--text-primary);
}
.p-dash-activity-soon .p-dash-activity-label {
color: var(--text-muted);
}
.p-dash-activity-badge {
font-size: 10px;
font-weight: 600;
color: var(--accent-dark);
background: var(--accent-light);
border-radius: 10px;
padding: 2px 8px;
letter-spacing: .2px;
}
@media (max-width: 1100px) {
.p-dash-stat-section {
grid-template-columns: 1fr;
}
}
/* ============================================================
DASHBOARD LAYOUT (main.asp two-column)
============================================================ */
.p-dash-layout {
display: grid;
grid-template-columns: 280px 1fr;
gap: 20px;
align-items: start;
}
.p-dash-left {
display: flex;
flex-direction: column;
gap: 0;
}
.p-dash-right {
display: flex;
flex-direction: column;
gap: 0;
}
.p-dash-right .p-card-body div {
padding: 4px 0;
line-height: 1.6;
}
.p-dash-left .p-card-body div {
padding: 3px 0;
line-height: 1.6;
}
@media (max-width: 900px) {
.p-dash-layout {
grid-template-columns: 1fr;
}
}
/* ============================================================
DASHBOARD QUICK-LINKS
============================================================ */
.p-quick-links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
margin-bottom: 8px;
}
.p-quick-link {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
text-decoration: none;
color: var(--text-primary);
font-size: 13px;
font-weight: 500;
transition: all .12s ease;
box-shadow: var(--shadow-sm);
}
.p-quick-link:hover {
border-color: var(--accent);
background: var(--accent-light);
color: var(--accent-dark);
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,168,144,.15);
}
.p-quick-link-icon {
width: 36px;
height: 36px;
background: var(--accent-light);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.p-quick-link-icon svg {
width: 18px;
height: 18px;
color: var(--accent);
stroke: var(--accent);
}
.p-quick-link-text {
flex: 1;
}
.p-quick-link-label {
font-weight: 600;
color: inherit;
display: block;
margin-bottom: 1px;
}
.p-quick-link-desc {
font-size: 11px;
color: var(--text-muted);
}
/* ============================================================
COMPANY INFO / LOGO PANEL
============================================================ */
.p-company-panel {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 20px;
background: var(--accent-light);
border: 1px solid rgba(0,168,144,.2);
border-radius: var(--radius);
margin-bottom: 20px;
}
.p-company-logo {
max-width: 80px;
max-height: 60px;
object-fit: contain;
flex-shrink: 0;
}
.p-company-info {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.6;
}
.p-company-info strong {
color: var(--text-primary);
display: block;
font-size: 14px;
margin-bottom: 2px;
}
/* ============================================================
BREADCRUMB
============================================================ */
.p-breadcrumb {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--text-muted);
margin-bottom: 16px;
flex-wrap: wrap;
}
.p-breadcrumb a {
color: var(--text-muted);
text-decoration: none;
}
.p-breadcrumb a:hover {
color: var(--accent);
}
.p-breadcrumb-sep {
color: var(--border);
}
.p-breadcrumb-current {
color: var(--text-secondary);
font-weight: 500;
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 900px) {
:root { --sidebar-w: 200px; }
.lender-topbar { padding: 0 16px; }
.lender-page-content { padding: 16px; }
}
@media (max-width: 700px) {
.lender-sidebar {
transform: translateX(-100%);
transition: transform .2s ease;
}
.lender-sidebar.open {
transform: translateX(0);
box-shadow: 0 0 24px rgba(0,0,0,.2);
}
.lender-main {
margin-left: 0;
}
.p-form-grid-2,
.p-form-grid-3 {
grid-template-columns: 1fr;
}
}
/* ============================================================
LEGACY HTML ATTRIBUTE OVERRIDES
These ensure old bgcolor/font/valign HTML still looks modern
when wrapped inside the partner layout.
============================================================ */
/* ---- Nuke ALL bgcolor attributes on tables, rows, and cells ---- */
.lender-page-content table[bgcolor],
.lender-page-content tr[bgcolor],
.lender-page-content td[bgcolor],
.lender-page-content th[bgcolor],
.lender-page-content table[bgcolor] td,
.lender-page-content table[bgcolor] th,
.lender-page-content tr[bgcolor] td,
.lender-page-content tr[bgcolor] th {
background-color: transparent !important;
}
/* Reset inline bgcolor that may remain in ASP-generated rows */
.p-table tr td[bgcolor],
.p-table tr[bgcolor] td {
background-color: inherit !important;
}
/* ---- Convert old bgcolor header rows to modern section headers ---- */
/* Only target td cells that DON'T have their own lighter bgcolor override */
.lender-page-content tr[bgcolor="#40678a"] td:not([bgcolor]),
.lender-page-content tr[bgcolor="#4a5968"] td:not([bgcolor]),
.lender-page-content td[bgcolor="#40678a"],
.lender-page-content td[bgcolor="#4a5968"],
.lender-page-content td[bgcolor="#283039"] {
background: var(--accent) !important;
color: #fff !important;
font-weight: 600;
font-family: var(--font);
font-size: 13px;
padding: 10px 14px !important;
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
/* White text for content inside accent-colored cells only */
.lender-page-content tr[bgcolor="#40678a"] td:not([bgcolor]) *,
.lender-page-content tr[bgcolor="#4a5968"] td:not([bgcolor]) *,
.lender-page-content td[bgcolor="#40678a"] *,
.lender-page-content td[bgcolor="#4a5968"] *,
.lender-page-content td[bgcolor="#283039"] * {
color: #fff !important;
}
/* Buttons inside accent rows keep their own styling — high specificity to override td * rule */
.lender-page-content tr[bgcolor="#40678a"] td:not([bgcolor]) a.p-btn.p-btn-secondary,
.lender-page-content tr[bgcolor="#4a5968"] td:not([bgcolor]) a.p-btn.p-btn-secondary,
.lender-page-content tr[bgcolor="#40678a"] td a.p-btn.p-btn-secondary,
.lender-page-content tr[bgcolor="#4a5968"] td a.p-btn.p-btn-secondary {
color: #4d6880 !important;
background: #fff !important;
border: 1px solid #dde6ee !important;
}
.lender-page-content tr[bgcolor="#40678a"] td:not([bgcolor]) a.p-btn.p-btn-secondary:hover,
.lender-page-content tr[bgcolor="#4a5968"] td:not([bgcolor]) a.p-btn.p-btn-secondary:hover,
.lender-page-content tr[bgcolor="#40678a"] td a.p-btn.p-btn-secondary:hover,
.lender-page-content tr[bgcolor="#4a5968"] td a.p-btn.p-btn-secondary:hover {
color: #1e8bb5 !important;
border-color: #25a6d8 !important;
background: #e8f4fa !important;
}
.lender-page-content tr[bgcolor="#40678a"] td a.p-btn svg,
.lender-page-content tr[bgcolor="#4a5968"] td a.p-btn svg {
color: #4d6880 !important;
stroke: #4d6880 !important;
}
.lender-page-content tr[bgcolor="#40678a"] td a.p-btn:hover svg,
.lender-page-content tr[bgcolor="#4a5968"] td a.p-btn:hover svg {
color: #1e8bb5 !important;
stroke: #1e8bb5 !important;
}
/* Cells inside a dark row that have their OWN bgcolor get normal text */
.lender-page-content tr[bgcolor="#40678a"] td[bgcolor="#eeeeee"],
.lender-page-content tr[bgcolor="#40678a"] td[bgcolor="#ffffff"],
.lender-page-content tr[bgcolor="#40678a"] td[bgcolor="#FFFFFF"],
.lender-page-content tr[bgcolor="#4a5968"] td[bgcolor="#eeeeee"],
.lender-page-content tr[bgcolor="#4a5968"] td[bgcolor="#ffffff"] {
background: var(--table-head) !important;
color: var(--text-primary) !important;
font-weight: 500;
border-radius: 0;
}
.lender-page-content tr[bgcolor="#40678a"] td[bgcolor="#eeeeee"] *,
.lender-page-content tr[bgcolor="#40678a"] td[bgcolor="#ffffff"] *,
.lender-page-content tr[bgcolor="#40678a"] td[bgcolor="#FFFFFF"] *,
.lender-page-content tr[bgcolor="#4a5968"] td[bgcolor="#eeeeee"] *,
.lender-page-content tr[bgcolor="#4a5968"] td[bgcolor="#ffffff"] * {
color: var(--text-primary) !important;
}
/* Alternating row colors → subtle modern stripes */
.lender-page-content tr[bgcolor="#eeeeee"] td,
.lender-page-content td[bgcolor="#eeeeee"] {
background: var(--table-alt) !important;
}
.lender-page-content tr[bgcolor="#ffffff"] td,
.lender-page-content td[bgcolor="#ffffff"],
.lender-page-content tr[bgcolor="#FFFFFF"] td,
.lender-page-content td[bgcolor="#FFFFFF"] {
background: #fff !important;
}
/* cccccc/CCCCCC — with and without # prefix */
.lender-page-content tr[bgcolor="#cccccc"] td,
.lender-page-content tr[bgcolor="#CCCCCC"] td,
.lender-page-content td[bgcolor="#cccccc"],
.lender-page-content td[bgcolor="#CCCCCC"],
.lender-page-content tr[bgcolor="cccccc"] td,
.lender-page-content tr[bgcolor="CCCCCC"] td {
background: var(--table-head) !important;
color: var(--text-secondary) !important;
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
letter-spacing: .3px;
}
.lender-page-content tr[bgcolor="cccccc"] td font,
.lender-page-content tr[bgcolor="CCCCCC"] td font,
.lender-page-content tr[bgcolor="#cccccc"] td font,
.lender-page-content tr[bgcolor="#CCCCCC"] td font {
color: var(--text-secondary) !important;
font-size: 12px !important;
}
.lender-page-content td[bgcolor="#333333"],
.lender-page-content table[bgcolor="#333333"] {
background: transparent !important;
border: 1px solid var(--border) !important;
}
.lender-page-content table[bgcolor="#999999"] {
background: transparent !important;
border: 1px solid var(--border) !important;
}
.lender-page-content table[bgcolor="#999999"] td {
background: transparent !important;
}
/* ---- Strip font tags — normalize to design system ---- */
.lender-page-content font {
font-family: var(--font) !important;
font-size: 13px !important;
}
/* Default font color — dark text for readability */
.lender-page-content font:not([color="#FFFFFF"]):not([color="#ffffff"]):not([color="white"]):not([color="#fff"]) {
color: var(--text-primary) !important;
}
/* White font ONLY inside accent-colored header rows */
.lender-page-content tr[bgcolor="#40678a"] font,
.lender-page-content tr[bgcolor="#4a5968"] font,
.lender-page-content td[bgcolor="#40678a"] font,
.lender-page-content td[bgcolor="#4a5968"] font,
.lender-page-content td[bgcolor="#283039"] font,
.lender-page-content td[style*="background-color:#283039"] font {
color: #fff !important;
}
/* ---- Modernize all tables in the content area ---- */
.lender-page-content table:not(.p-table) {
border-collapse: collapse;
width: 100%;
}
.lender-page-content table:not(.p-table) td,
.lender-page-content table:not(.p-table) th {
vertical-align: top;
padding: 8px 12px;
font-family: var(--font);
font-size: 13px;
color: var(--text-primary);
border-bottom: 1px solid var(--border);
}
/* Form-layout tables: label column shrinks, input column grows */
.lender-page-content table:not(.p-table) td:first-child:not([colspan]) {
white-space: nowrap;
width: 1%;
}
/* Nested tables inside cells should not be full width */
.lender-page-content table:not(.p-table) table {
width: auto;
}
/* Remove border-bottom from nested layout tables (cellspacing/cellpadding tables) */
.lender-page-content table:not(.p-table) table td,
.lender-page-content table:not(.p-table) table th {
border-bottom: none;
}
/* Legacy copy classes - unify font styling */
.lender-page-content .copy,
.lender-page-content .smallcopy,
.lender-page-content .medcopy,
.lender-page-content .largecopy,
.lender-page-content .compressedcopy,
.lender-page-content .biggercopy {
font-family: var(--font) !important;
font-size: 13px !important;
line-height: 1.5 !important;
color: var(--text-primary) !important;
text-decoration: none;
}
/* Legacy
elements */
.lender-page-content hr {
border: none;
border-top: 1px solid var(--border);
margin: 16px 0;
}
/* Modernize legacy tags */
.lender-page-content center {
text-align: left;
}
/* Prevent font-weight and text-transform change on legacy table row hover - keep row highlighting only */
.lender-page-content tr.copy:hover,
.lender-page-content tr.copy:hover td,
.lender-page-content tr.copy:hover td *,
.lender-page-content tr.copy:hover b,
.lender-page-content tr.copy:hover strong,
.lender-page-content tr.copy:hover font {
font-weight: normal !important;
text-transform: none !important;
}
/* ---- Modern form inputs (auto-applied to ALL inputs in content area) ---- */
.lender-page-content input[type="text"],
.lender-page-content input[type="password"],
.lender-page-content input[type="email"],
.lender-page-content input[type="number"],
.lender-page-content input[type="date"],
.lender-page-content input[type="tel"],
.lender-page-content input[type="url"],
.lender-page-content select,
.lender-page-content textarea {
padding: 8px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-family: var(--font);
font-size: 13px;
color: var(--text-primary);
background: #fff;
transition: border-color .12s ease, box-shadow .12s ease;
max-width: 100%;
-webkit-appearance: none;
appearance: none;
}
/* Constrain numeric-sized inputs by maxlength */
.lender-page-content input[type="text"][maxlength="1"],
.lender-page-content input[type="text"][maxlength="2"],
.lender-page-content input[type="text"][maxlength="3"] { width: 60px; }
.lender-page-content input[type="text"][maxlength="4"],
.lender-page-content input[type="text"][maxlength="5"] { width: 80px; }
.lender-page-content input[type="text"][maxlength="6"],
.lender-page-content input[type="text"][maxlength="7"] { width: 95px; }
.lender-page-content input[type="text"][maxlength="8"],
.lender-page-content input[type="text"][maxlength="9"],
.lender-page-content input[type="text"][maxlength="10"] { width: 110px; }
.lender-page-content input[type="number"] { width: 110px; }
/* Also apply to popup pages */
/* Style inputs in popups — fit naturally, don't force 100% width */
body.popup-body input[type="text"],
body.popup-body input[type="password"],
body.popup-body input[type="email"],
body.popup-body input[type="url"] {
max-width: 100%;
box-sizing: border-box;
padding: 7px 10px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-family: var(--font);
font-size: 13px;
color: var(--text-primary);
background: #fff;
transition: border-color .12s ease;
}
body.popup-body input[type="text"]:focus,
body.popup-body input[type="password"]:focus,
body.popup-body input[type="email"]:focus,
body.popup-body input[type="url"]:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(37,166,216,.12);
}
body.popup-body .form-control {
max-width: 100%;
box-sizing: border-box;
padding: 7px 10px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-family: var(--font);
font-size: 13px;
color: var(--text-primary);
background: #fff;
box-shadow: none;
height: auto;
}
body.popup-body .form-control:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(37,166,216,.12);
outline: none;
}
body.popup-body select {
padding: 7px 10px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-family: var(--font);
font-size: 13px;
color: var(--text-primary);
background: #fff;
}
body.popup-body textarea {
padding: 7px 10px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-family: var(--font);
font-size: 13px;
max-width: 100%;
}
body.popup-body input[type="checkbox"],
body.popup-body input[type="radio"] {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
border: 2px solid var(--border);
border-radius: 3px;
background: #fff;
cursor: pointer;
position: relative;
vertical-align: middle;
transition: all .12s ease;
}
body.popup-body input[type="radio"] { border-radius: 50%; }
body.popup-body input[type="checkbox"]:checked {
background: var(--accent);
border-color: var(--accent);
}
body.popup-body input[type="checkbox"]:checked::after {
content: '';
position: absolute;
left: 4px;
top: 1px;
width: 5px;
height: 9px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
body.popup-body input[type="radio"]:checked {
background: var(--accent);
border-color: var(--accent);
}
body.popup-body input[type="radio"]:checked::after {
content: '';
position: absolute;
left: 3px;
top: 3px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
}
body.popup-body table { max-width: 100%; }
body.popup-body td { word-wrap: break-word; overflow-wrap: break-word; }
/* Short numeric inputs in popups keep tight widths */
body.popup-body input[type="text"][maxlength="1"],
body.popup-body input[type="text"][maxlength="2"],
body.popup-body input[type="text"][maxlength="3"] { width: 60px !important; }
body.popup-body input[type="text"][maxlength="4"],
body.popup-body input[type="text"][maxlength="5"] { width: 80px; }
body.popup-body input[type="text"][maxlength="6"],
body.popup-body input[type="text"][maxlength="7"] { width: 95px; }
body.popup-body input[type="text"][maxlength="8"],
body.popup-body input[type="text"][maxlength="9"],
body.popup-body input[type="text"][maxlength="10"] { width: 110px; }
body.popup-body input[type="number"] { width: 110px; }
.lender-page-content input[type="text"]:focus,
.lender-page-content input[type="password"]:focus,
.lender-page-content input[type="email"]:focus,
.lender-page-content input[type="number"]:focus,
.lender-page-content input[type="date"]:focus,
.lender-page-content input[type="tel"]:focus,
.lender-page-content input[type="url"]:focus,
.lender-page-content select:focus,
.lender-page-content textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(37,166,216,.12);
}
/* Checkboxes and radios */
/* Modern checkbox and radio styling */
.lender-page-content input[type="checkbox"],
.lender-page-content input[type="radio"] {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
border: 2px solid var(--border);
border-radius: 3px;
background: #fff;
cursor: pointer;
position: relative;
vertical-align: middle;
transition: all .12s ease;
flex-shrink: 0;
}
.lender-page-content input[type="radio"] {
border-radius: 50%;
}
.lender-page-content input[type="checkbox"]:checked {
background: var(--accent);
border-color: var(--accent);
}
.lender-page-content input[type="checkbox"]:checked::after {
content: '';
position: absolute;
left: 4px;
top: 1px;
width: 5px;
height: 9px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.lender-page-content input[type="radio"]:checked {
background: var(--accent);
border-color: var(--accent);
}
.lender-page-content input[type="radio"]:checked::after {
content: '';
position: absolute;
left: 3px;
top: 3px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
}
.lender-page-content input[type="checkbox"]:focus,
.lender-page-content input[type="radio"]:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(37,166,216,.12);
}
/* Select dropdown arrow */
.lender-page-content select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238fa5b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 30px;
}
/* Bootstrap .form-control override */
.lender-page-content .form-control {
padding: 8px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-family: var(--font);
font-size: 13px;
color: var(--text-primary);
background: #fff;
box-shadow: none;
height: auto;
width: auto;
transition: border-color .12s ease, box-shadow .12s ease;
}
.lender-page-content .form-control:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(37,166,216,.12);
outline: none;
}
/* form-control inputs with maxlength — respect size constraints */
.lender-page-content .form-control[maxlength="1"],
.lender-page-content .form-control[maxlength="2"],
.lender-page-content .form-control[maxlength="3"] { width: 60px; }
.lender-page-content .form-control[maxlength="4"],
.lender-page-content .form-control[maxlength="5"] { width: 80px; }
.lender-page-content .form-control[maxlength="6"],
.lender-page-content .form-control[maxlength="7"] { width: 95px; }
.lender-page-content .form-control[maxlength="8"],
.lender-page-content .form-control[maxlength="9"],
.lender-page-content .form-control[maxlength="10"] { width: 110px; }
/* ---- Modern buttons (auto-applied) ---- */
.lender-page-content input[type="submit"],
.lender-page-content input[type="button"],
.lender-page-content button[type="submit"] {
padding: 9px 20px;
background: var(--accent);
color: #fff;
border: none;
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 600;
font-family: var(--font);
cursor: pointer;
transition: background .12s ease;
letter-spacing: .2px;
}
.lender-page-content input[type="submit"]:hover,
.lender-page-content input[type="button"]:hover,
.lender-page-content button[type="submit"]:hover {
background: var(--accent-hover);
box-shadow: 0 2px 8px rgba(19,93,126,.35);
}
.lender-page-content input[type="reset"] {
padding: 9px 20px;
background: #fff;
color: var(--text-secondary);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 600;
font-family: var(--font);
cursor: pointer;
transition: all .12s ease;
}
.lender-page-content input[type="reset"]:hover {
background: var(--accent-light);
border-color: var(--accent);
color: var(--accent-dark);
}
/* Bootstrap .btn overrides */
.lender-page-content .btn {
padding: 9px 20px;
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 600;
font-family: var(--font);
border: none;
cursor: pointer;
transition: background .12s ease;
}
.lender-page-content .btn-success,
.lender-page-content .btn-primary,
.lender-page-content .btn-info,
.lender-page-content font .btn-success,
.lender-page-content font .btn-primary,
.lender-page-content font .btn-info,
.lender-page-content font a.btn {
background: var(--accent) !important;
color: #fff !important;
border: none !important;
text-decoration: none !important;
}
.lender-page-content .btn-success:hover,
.lender-page-content .btn-primary:hover,
.lender-page-content .btn-info:hover,
.lender-page-content font .btn-success:hover,
.lender-page-content font .btn-primary:hover,
.lender-page-content font .btn-info:hover,
.lender-page-content font a.btn:hover {
background: var(--accent-hover) !important;
color: #fff !important;
box-shadow: 0 2px 8px rgba(19,93,126,.35) !important;
text-decoration: none !important;
}
.lender-page-content .btn-danger,
.lender-page-content font .btn-danger,
.lender-page-content font a.btn-danger {
background: #991b1b !important;
color: #fff !important;
border: none !important;
text-decoration: none !important;
}
.lender-page-content .btn-danger:hover,
.lender-page-content font .btn-danger:hover,
.lender-page-content font a.btn-danger:hover {
background: #7f1d1d !important;
color: #fff !important;
text-decoration: none !important;
}
.lender-page-content .btn-warning,
.lender-page-content .btn-default {
background: #fff !important;
color: var(--text-secondary) !important;
border: 1px solid var(--border) !important;
}
.lender-page-content .btn-warning:hover,
.lender-page-content .btn-default:hover {
background: var(--accent-light) !important;
border-color: var(--accent) !important;
color: var(--accent-dark) !important;
}
.lender-page-content .btn-block {
display: block;
width: 100%;
}
/* ---- Bootstrap panel/alert overrides ---- */
.lender-page-content .panel {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
margin-bottom: 16px;
}
.lender-page-content .panel-heading,
.lender-page-content .panel-primary > .panel-heading {
background: var(--accent) !important;
color: #fff !important;
border: none !important;
border-radius: var(--radius) var(--radius) 0 0;
padding: 10px 16px;
font-family: var(--font);
font-size: 13px;
font-weight: 600;
}
.lender-page-content .panel-body {
padding: 16px;
font-family: var(--font);
}
.lender-page-content .alert {
padding: 12px 16px;
border-radius: var(--radius-sm);
font-family: var(--font);
font-size: 13px;
font-weight: 500;
line-height: 1.6;
margin-bottom: 12px;
}
.lender-page-content .alert-primary {
background: var(--accent) !important;
border-color: var(--accent-dark) !important;
color: #fff !important;
}
.lender-page-content .alert-danger {
background: #fef2f2 !important;
border: 1px solid #fca5a5 !important;
color: #991b1b !important;
}
.lender-page-content .alert-success {
background: #d1fae5 !important;
border: 1px solid #6ee7b7 !important;
color: #065f46 !important;
}
/* ---- Override inline background-color styles on table cells ---- */
.lender-page-content td[style*="background-color:#283039"],
.lender-page-content td[style*="background-color: #283039"] {
background-color: var(--accent) !important;
color: #fff !important;
font-weight: 600;
font-family: var(--font);
font-size: 13px;
padding: 10px 14px !important;
}
/* ---- Glyphicon icons cleanup ---- */
.lender-page-content .glyphicon {
font-size: 11px;
color: var(--accent) !important;
margin-right: 4px;
}
/* Links in content area */
.lender-page-content a:not(.p-btn):not(.p-link):not(.p-quick-link):not(.p-view-tab):not(.lender-nav a):not(.btn) {
color: var(--accent) !important;
text-decoration: none;
font-weight: 500;
}
.lender-page-content a:not(.p-btn):not(.p-link):not(.p-quick-link):not(.p-view-tab):not(.btn):hover {
color: var(--accent-dark) !important;
text-decoration: underline;
}
/* Links inside font tags must override the font color reset — exclude .btn */
.lender-page-content font a:not(.btn),
.lender-page-content font a:not(.btn) font,
.lender-page-content a:not(.btn) font {
color: var(--accent) !important;
}
.lender-page-content font a:not(.btn):hover,
.lender-page-content font a:not(.btn):hover font,
.lender-page-content a:not(.btn):hover font {
color: var(--accent-dark) !important;
}
/* ============================================================
UTILITY HELPERS
============================================================ */
.mt0 { margin-top: 0; }
.mb0 { margin-bottom: 0; }
.mt4 { margin-top: 4px; }
.mb4 { margin-bottom: 4px; }
.mt8 { margin-top: 8px; }
.mb8 { margin-bottom: 8px; }
.mt16 { margin-top: 16px; }
.mb16 { margin-bottom: 16px; }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-accent { color: var(--accent); }
.text-sm { font-size: 12px; }
.text-xs { font-size: 11px; }
.font-bold { font-weight: 700; }
.font-semi { font-weight: 600; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
/* Width utility classes (from legacy AddRedesignResources) */
.w50px { width: 50px; display: inline-block; }
.w75px { width: 75px; display: inline-block; }
.w100px { width: 100px; display: inline-block; }
.w150px { width: 150px; display: inline-block; }
.w200px { width: 200px; display: inline-block; }
.dib { display: inline-block; }
.mb5 { margin-bottom: 5px; }
/* Action button columns — stack neatly */
.lender-page-content td > .btn {
display: inline-block;
margin-bottom: 4px;
white-space: nowrap;
vertical-align: top;
}
.lender-page-content .btn-sm {
padding: 5px 10px;
font-size: 11px;
}
.lender-page-content .btn.w100px {
width: 100px;
text-align: center;
}
/* ============================================================
POPUP WINDOW STYLES
============================================================ */
body.popup-body {
margin: 0;
padding: 16px;
background: var(--bg-app);
font-family: var(--font);
font-size: 13px;
color: var(--text-primary);
-webkit-font-smoothing: antialiased;
}
body.popup-body * { box-sizing: border-box; }
.popup-header {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 12px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border);
}
.popup-meta {
font-size: 12px;
color: var(--text-secondary);
margin-bottom: 16px;
}
.popup-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
margin-bottom: 16px;
box-shadow: var(--shadow-sm);
}
.popup-card-header {
background: var(--accent);
color: #fff;
padding: 10px 14px;
font-size: 13px;
font-weight: 600;
}
.popup-card-body {
padding: 14px;
}
.popup-field {
display: grid;
grid-template-columns: 240px 1fr;
gap: 4px 12px;
padding: 6px 0;
border-bottom: 1px solid var(--border);
font-size: 13px;
}
.popup-field:last-child { border-bottom: none; }
.popup-field-label {
font-weight: 600;
color: var(--text-secondary);
font-size: 12px;
}
.popup-body-content {
padding: 14px;
background: #fff;
line-height: 1.6;
font-size: 13px;
}
.popup-close {
display: block;
text-align: center;
margin-top: 16px;
}
.popup-close a {
display: inline-block;
padding: 8px 20px;
background: var(--accent);
color: #fff;
border-radius: var(--radius-sm);
text-decoration: none;
font-size: 13px;
font-weight: 600;
}
.popup-close a:hover {
background: var(--accent-dark);
}
.popup-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.popup-table th {
background: var(--table-head);
color: var(--text-secondary);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .5px;
padding: 8px 10px;
text-align: left;
border-bottom: 1px solid var(--border);
}
.popup-table td {
padding: 8px 10px;
border-bottom: 1px solid var(--border);
vertical-align: top;
}
.popup-table tr:last-child td { border-bottom: none; }
.popup-table tr:nth-child(even) td { background: var(--table-alt); }
/* Override old popup table attributes */
body.popup-body table[bgcolor="#999999"] { border: 1px solid var(--border) !important; background: none !important; }
body.popup-body table[bgcolor="#999999"] td { background: none !important; }
body.popup-body td[bgcolor="#4a5968"],
body.popup-body tr[bgcolor="#4a5968"] td,
body.popup-body td[bgcolor="#40678a"],
body.popup-body tr[bgcolor="#40678a"] td:not([bgcolor]),
body.popup-body tr[bgcolor="#4a5968"] td:not([bgcolor]) { background: var(--accent) !important; color: #fff !important; }
body.popup-body td[bgcolor="#40678a"] *,
body.popup-body tr[bgcolor="#40678a"] td:not([bgcolor]) *,
body.popup-body td[bgcolor="#4a5968"] *,
body.popup-body tr[bgcolor="#4a5968"] td:not([bgcolor]) * { color: #fff !important; }
body.popup-body tr[bgcolor="#40678a"] td[bgcolor="#eeeeee"],
body.popup-body tr[bgcolor="#40678a"] td[bgcolor="#ffffff"],
body.popup-body tr[bgcolor="#4a5968"] td[bgcolor="#eeeeee"],
body.popup-body tr[bgcolor="#4a5968"] td[bgcolor="#ffffff"] { background: var(--table-head) !important; color: var(--text-primary) !important; }
body.popup-body tr[bgcolor="#40678a"] td[bgcolor="#eeeeee"] *,
body.popup-body tr[bgcolor="#40678a"] td[bgcolor="#ffffff"] *,
body.popup-body tr[bgcolor="#4a5968"] td[bgcolor="#eeeeee"] *,
body.popup-body tr[bgcolor="#4a5968"] td[bgcolor="#ffffff"] * { color: var(--text-primary) !important; }
body.popup-body td[bgcolor="#eeeeee"],
body.popup-body tr[bgcolor="#eeeeee"] td { background: var(--table-alt) !important; }
body.popup-body td[bgcolor="#ffffff"],
body.popup-body tr[bgcolor="#ffffff"] td { background: #fff !important; }
body.popup-body td[bgcolor="#CCCCCC"],
body.popup-body tr[bgcolor="#CCCCCC"] td { background: var(--table-head) !important; }
body.popup-body font { font-family: var(--font) !important; font-size: 13px !important; }
body.popup-body font:not([color="#FFFFFF"]):not([color="#ffffff"]):not([color="white"]) { color: var(--text-primary) !important; }
body.popup-body b { font-weight: 600; }
body.popup-body hr { border: none; border-top: 1px solid var(--border); margin: 12px 0; }
/* Links in popup pages */
body.popup-body a:not(.p-btn):not(.p-cal-trigger) {
color: var(--accent) !important;
text-decoration: none;
font-weight: 500;
}
body.popup-body a:not(.p-btn):not(.p-cal-trigger):hover {
color: var(--accent-dark) !important;
text-decoration: underline;
}
body.popup-body font a,
body.popup-body font a font,
body.popup-body a font {
color: var(--accent) !important;
}
body.popup-body font a:hover,
body.popup-body a:hover font {
color: var(--accent-dark) !important;
}
/* Modern buttons for popup pages */
body.popup-body input[type="submit"],
body.popup-body input[type="button"],
body.popup-body button[type="submit"] {
padding: 9px 20px !important;
background: var(--accent) !important;
color: #fff !important;
border: none !important;
border-radius: var(--radius-sm) !important;
font-size: 13px !important;
font-weight: 600 !important;
font-family: var(--font) !important;
cursor: pointer;
transition: background .12s ease;
}
body.popup-body input[type="submit"]:hover,
body.popup-body input[type="button"]:hover,
body.popup-body button[type="submit"]:hover {
background: var(--accent-hover) !important;
box-shadow: 0 2px 8px rgba(19,93,126,.35) !important;
}
body.popup-body input[type="reset"] {
padding: 9px 20px;
background: #fff;
color: var(--text-secondary);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 600;
font-family: var(--font);
cursor: pointer;
}
body.popup-body .btn {
padding: 9px 20px;
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 600;
font-family: var(--font);
cursor: pointer;
}
body.popup-body .btn-success,
body.popup-body .btn-primary,
body.popup-body .btn-info {
background: var(--accent) !important;
color: #fff !important;
border: none !important;
}
body.popup-body .btn-success:hover,
body.popup-body .btn-primary:hover,
body.popup-body .btn-info:hover {
background: var(--accent-hover) !important;
box-shadow: 0 2px 8px rgba(19,93,126,.35) !important;
}
body.popup-body .btn-default,
body.popup-body .btn-warning {
background: #fff !important;
color: var(--text-secondary) !important;
border: 1px solid var(--border) !important;
}
body.popup-body .btn-danger {
background: #991b1b !important;
color: #fff !important;
border: none !important;
}
body.popup-body .btn-danger:hover {
background: #7f1d1d !important;
}
/* ============================================================
LEGACY TABLE ATTRIBUTE OVERRIDES (main partner pages)
Applied globally to pages using partner-lev.css
============================================================ */
.p-table td[bgcolor="#4a5968"],
.p-table tr[bgcolor="#4a5968"] td,
.p-table th[bgcolor="#4a5968"] { background: var(--table-head) !important; color: var(--text-secondary) !important; }
.p-table td[bgcolor="#eeeeee"],
.p-table tr[bgcolor="#eeeeee"] td { background: var(--table-alt) !important; }
.p-table td[bgcolor="#ffffff"],
.p-table tr[bgcolor="#ffffff"] td { background: var(--bg-card) !important; }
.p-table td[bgcolor="#dddddd"],
.p-table tr[bgcolor="#dddddd"] td { background: var(--bg-app) !important; }
.p-table td[bgcolor="#CCCCCC"],
.p-table tr[bgcolor="#CCCCCC"] td { background: var(--table-head) !important; }
.p-table td[bgcolor="#000000"],
.p-table tr[bgcolor="#000000"] td { background: var(--border) !important; }
.p-table font { font-family: var(--font) !important; color: inherit !important; }
.p-table font[color="#FFFFFF"] { color: #fff !important; }
.p-table font[color="#cc0000"] { color: var(--accent) !important; }
/* ============================================================
DASHBOARD CHARTS & LAYOUT
============================================================ */
.p-dash-chart-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 24px;
}
.p-dash-chart-card {
margin-bottom: 0;
}
.p-dash-chart-body {
height: 220px;
padding: 16px 20px;
}
.p-dash-chart-body canvas {
width: 100% !important;
height: 100% !important;
}
.p-dash-nav {
display: flex;
align-items: center;
gap: 8px;
}
.p-dash-nav-label {
min-width: 150px;
text-align: center;
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
white-space: nowrap;
}
.p-dash-links-body {
display: flex;
flex-direction: column;
padding: 0;
}
.p-dash-links-body .p-quick-link {
border: none;
border-radius: 0;
box-shadow: none;
border-bottom: 1px solid var(--border);
padding: 12px 16px;
}
.p-dash-links-body .p-quick-link:last-child {
border-bottom: none;
}
.p-dash-links-body .p-quick-link:hover {
transform: none;
box-shadow: none;
}
@media (max-width: 1100px) {
.p-dash-chart-row {
grid-template-columns: 1fr;
}
}
/* ============================================================
DATE PICKER MODAL
============================================================ */
.p-cal-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 10000;
background: rgba(26, 44, 62, .45);
backdrop-filter: blur(3px);
align-items: center;
justify-content: center;
}
.p-cal-overlay.active {
display: flex;
}
.p-cal-modal {
background: var(--bg-card);
border-radius: var(--radius);
box-shadow: var(--shadow-md), 0 12px 40px rgba(26, 44, 62, .18);
width: 320px;
max-width: 94vw;
display: flex;
flex-direction: column;
overflow: hidden;
animation: p-modal-in .2s ease-out;
}
.p-cal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid var(--border);
}
.p-cal-title {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
}
.p-cal-close-btn {
background: none;
border: none;
font-size: 20px;
line-height: 1;
color: var(--text-muted);
cursor: pointer;
padding: 0 4px;
transition: color .15s;
}
.p-cal-close-btn:hover {
color: var(--text-primary);
}
.p-cal-body {
padding: 12px 16px 16px;
}
/* Navigation */
.p-cal-nav {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.p-cal-nav-btn {
background: none;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
width: 30px;
height: 30px;
font-size: 16px;
line-height: 1;
color: var(--text-secondary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all .12s ease;
}
.p-cal-nav-btn:hover {
border-color: var(--accent);
color: var(--accent-dark);
background: var(--accent-light);
}
.p-cal-month-year {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
text-align: center;
flex: 1;
}
/* Calendar grid */
.p-cal-grid {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.p-cal-grid th {
padding: 6px 0;
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
text-align: center;
text-transform: uppercase;
letter-spacing: .3px;
}
.p-cal-grid td {
padding: 0;
text-align: center;
font-size: 13px;
}
.p-cal-day {
cursor: pointer;
border-radius: var(--radius-sm);
padding: 6px 0;
color: var(--text-primary);
transition: all .1s ease;
}
.p-cal-day:hover {
background: var(--accent-light);
color: var(--accent-dark);
}
.p-cal-today {
background: var(--accent);
color: #fff;
font-weight: 700;
border-radius: var(--radius-sm);
}
.p-cal-today:hover {
background: var(--accent-dark);
color: #fff;
}
.p-cal-weekend {
color: var(--text-muted);
}
.p-cal-weekend:hover {
color: var(--accent-dark);
}
.p-cal-empty {
padding: 6px 0;
}
.p-cal-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-secondary);
background: #fff;
cursor: pointer;
transition: all .12s ease;
vertical-align: middle;
text-decoration: none;
}
.p-cal-trigger:hover {
border-color: var(--accent);
color: var(--accent);
background: var(--accent-light);
}
/* ---- Tip Icon & Flyout ------------------------------------- */
.p-tip-wrap {
position: relative;
display: inline-flex;
align-items: center;
margin-left: 6px;
}
.p-tip-btn {
width: 15px;
height: 15px;
border-radius: 50%;
border: 1px solid var(--border);
background: var(--bg-app);
color: var(--text-muted);
font-size: 10px;
font-weight: 600;
font-family: var(--font);
line-height: 13px;
text-align: center;
cursor: pointer;
transition: border-color .15s, color .15s, background .15s;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.p-tip-btn:hover,
.p-tip-btn.active {
border-color: var(--accent);
color: var(--accent);
background: var(--accent-light);
}
.p-tip-flyout {
display: none;
position: absolute;
left: 50%;
top: calc(100% + 8px);
transform: translateX(-50%);
width: 220px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-md);
padding: 10px 12px;
font-size: 11px;
font-weight: 400;
line-height: 1.5;
color: var(--text-secondary);
z-index: 100;
}
.p-tip-flyout::before {
content: "";
position: absolute;
left: 50%;
top: -5px;
transform: translateX(-50%) rotate(45deg);
width: 8px;
height: 8px;
background: var(--bg-card);
border-left: 1px solid var(--border);
border-top: 1px solid var(--border);
}
.p-tip-flyout.show {
display: block;
}
/* ── Dashboard card grid ── */
.p-dash-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.p-dash-grid > .p-card {
margin-bottom: 0;
}
.p-dash-grid-full {
grid-column: 1 / -1;
}
@media (max-width: 1100px) {
.p-dash-grid {
grid-template-columns: 1fr;
}
}
/* ── Card title icons ── */
.p-card-title-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
color: var(--accent);
}
/* ── Card section dividers ── */
.p-card-section-title {
font-size: 10px;
font-weight: 700;
letter-spacing: .8px;
text-transform: uppercase;
color: var(--text-muted);
padding: 12px 0 6px;
margin-top: 8px;
border-top: 1px solid var(--border);
}
.p-card-section-title:first-child {
margin-top: 0;
border-top: none;
padding-top: 0;
}
/* ── Empty state ── */
.p-empty-state {
color: var(--text-muted);
font-size: 13px;
padding: 8px 0;
}
.p-empty-state a {
color: var(--accent);
font-weight: 500;
}
/* ── Alert banner (full-width above grid) ── */
.p-dash-alert-banner {
margin-bottom: 20px;
}
/* ── Dashboard nav links ── */
.p-dash-link {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-radius: var(--radius);
color: var(--text-primary);
text-decoration: none;
font-size: 13px;
font-weight: 500;
transition: background .15s, color .15s;
border: 1px solid transparent;
}
.p-dash-link:hover {
background: var(--accent-subtle);
color: var(--accent);
border-color: var(--accent-border, rgba(37,99,235,.15));
}
.p-dash-link svg {
flex-shrink: 0;
width: 16px;
height: 16px;
color: var(--text-muted);
transition: color .15s;
}
.p-dash-link:hover svg { color: var(--accent); }
.p-dash-link .p-dash-link-meta {
margin-left: auto;
font-size: 11px;
font-weight: 400;
color: var(--text-muted);
}
.p-dash-link-list {
display: flex;
flex-direction: column;
gap: 2px;
}
/* Dashboard stat rows inside cards */
.p-dash-stat-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
border-radius: var(--radius);
font-size: 13px;
color: var(--text-secondary);
}
.p-dash-stat-row:nth-child(odd) {
background: var(--bg-offset, #f8fafc);
}
.p-dash-stat-row a,
.p-dash-stat-row > span {
display: flex;
align-items: center;
gap: 8px;
color: var(--accent);
text-decoration: none;
font-weight: 500;
}
.p-dash-stat-row > span { color: var(--text-secondary); font-weight: 400; }
.p-dash-stat-row a:hover { text-decoration: underline; }
.p-dash-stat-row svg { flex-shrink: 0; }
.p-dash-stat-row strong {
font-weight: 600;
color: var(--text-primary);
min-width: 40px;
text-align: right;
}
/* ── Two-column stat grid ── */
.p-dash-stat-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 20px;
}
.p-dash-stat-col-title {
font-size: 10px;
font-weight: 700;
letter-spacing: .5px;
text-transform: uppercase;
color: var(--text-muted);
padding: 0 12px 6px;
}
@media (max-width: 700px) {
.p-dash-stat-cols {
grid-template-columns: 1fr;
}
}