/* ============================================================
Asialink CRM — modern theme (override layer, loaded last)
Shell: .app-shell > .app-sidebar + .app-main(.app-topbar + #content/#main + #footer)
Features: light/dark theme, collapsible sidebar, spinner, skeletons, animations.
Rollback = remove the .
============================================================ */
:root {
--brand-navy: #14305c;
--brand-navy-2: #1c4079;
--brand-red: #e02127;
--sidebar-bg: #14305c;
--sidebar-bg-2: #1c4079;
--sidebar-ink: #cdd7e6;
--bg: #eef1f6; /* page background */
--surface: #ffffff; /* cards / topbar */
--surface-2: #f1f4f9; /* muted surfaces */
--ink: #1f2733; /* primary text */
--ink-soft: #5b6675; /* secondary text */
--line: #e3e8ef; /* borders / dividers */
/* semantic status colors (text + soft background) — single source for alerts/badges/buttons */
--success: #1b7a43; --success-bg: #e6f5ec;
--warning: #8a5a06; --warning-bg: #fdf1da;
--danger: #c0362c; --danger-bg: #fbeae8;
--info: #1c4079; --info-bg: #e7eefc;
/* radius / elevation / motion */
--radius: 8px;
--radius-lg: 12px;
--shadow-sm: 0 1px 3px rgba(16,24,40,.06);
--shadow-md: 0 4px 16px rgba(16,24,40,.10);
--shadow-lg: 0 10px 30px rgba(16,24,40,.16);
--focus-ring: 0 0 0 3px rgba(28,64,121,.18);
/* pagination accent — adapts per theme so the active page stays legible in light & dark */
--pager-active: var(--brand-navy);
--pager-hover: var(--surface-2);
/* spacing scale (4·8·12·16·20·24) and type scale (22/18/16/14/13/12) are applied via utilities/components below */
}
/* dark theme */
body.theme-dark {
--sidebar-bg: #0d1b33;
--sidebar-bg-2: #14305c;
--bg: #0f141c;
--surface: #1a2230;
--surface-2: #232c3b;
--ink: #e6eaf0;
--ink-soft: #9aa6b6;
--line: #2c3647;
--success: #4ec07e; --success-bg: #14301f;
--warning: #e0a94a; --warning-bg: #322611;
--danger: #ef6a5e; --danger-bg: #3a1c19;
--info: #7fa9e8; --info-bg: #16243d;
--shadow-sm: 0 1px 3px rgba(0,0,0,.3);
--shadow-md: 0 4px 16px rgba(0,0,0,.4);
--shadow-lg: 0 10px 30px rgba(0,0,0,.5);
--focus-ring: 0 0 0 3px rgba(127,169,232,.25);
--pager-active: #3a63b0; /* lighter navy so the active page reads on dark surfaces */
--pager-hover: #2c3647;
}
/* ---------- base ---------- */
html { height: 100%; }
html, body { margin: 0; }
body {
min-height: 100vh; display: flex; flex-direction: column; /* shell fills viewport; stray body-appended nodes isolate below */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
color: var(--ink); background: var(--bg); font-size: 14px; line-height: 1.5;
transition: background .2s ease, color .2s ease;
}
/* audio beep node global.js appends to — never take layout space */
#messageAudio, audio:not([controls]) { display: none !important; }
a { color: var(--brand-navy-2); }
body.theme-dark a { color: #7fa9e8; }
/* ---------- app shell ---------- */
.app-shell { display: flex; align-items: stretch; min-height: 100vh; flex: 1 0 auto; }
.app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: var(--bg); }
/* ---------- sidebar ---------- */
.app-sidebar {
flex: 0 0 240px; width: 240px; background: var(--sidebar-bg);
display: flex; flex-direction: column; transition: width .2s ease, transform .2s ease;
overflow-y: auto; overflow-x: hidden;
}
.app-logo { background: var(--surface); padding: 14px 16px; text-align: center; transition: padding .2s ease; }
.app-logo img { max-width: 100%; max-height: 58px; height: auto; }
.app-nav { padding: 8px 0; }
.app-nav ul.nav { list-style: none; margin: 0; padding: 0; display: block !important; float: none !important; }
.app-nav ul.nav > li { list-style: none; position: relative; display: block !important; float: none !important; width: 100%; height: auto !important; min-height: 0 !important; }
/* section header (e.g. "MAIN") */
.app-nav ul.nav > li.nav-section { pointer-events: none; }
.app-nav ul.nav > li.nav-section > span {
display: block; padding: 14px 22px 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em;
text-transform: uppercase; color: #6b7c99;
}
/* nav items: rounded pill rows (hover slide + gradient active highlight) */
.app-nav ul.nav > li > a {
display: flex; align-items: center; gap: 12px; margin: 2px 10px; padding: 10px 12px; color: var(--sidebar-ink);
text-decoration: none; border-radius: 10px; font-size: 14px; white-space: nowrap;
transition: background .15s ease, color .15s ease, transform .15s ease;
}
.app-nav ul.nav > li > a:hover { background: rgba(255,255,255,.08); color: #fff; transform: translateX(2px); }
.app-nav ul.nav > li.active > a {
background: linear-gradient(90deg, rgba(56,121,230,.30), rgba(56,121,230,.10)); color: #fff;
font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.app-nav ul.nav > li.active > a .nav-ico svg { stroke: #7fa9e8; }
.app-nav .nav-ico { flex: 0 0 20px; width: 20px; height: 20px; display: inline-flex; transition: transform .15s ease; }
.app-nav ul.nav > li > a:hover .nav-ico { transform: scale(1.08); }
.app-nav .nav-ico svg { width: 20px; height: 20px; stroke: currentColor; fill: none; }
/* submenu — in-sidebar accordion (click to expand inline).
override legacy core.css superfish (position:absolute + :hover flyout + 130px li). */
.app-nav ul.nav li ul {
list-style: none; margin: 0; padding: 2px 0 4px; display: none; background: transparent;
position: static !important; top: auto !important; left: auto !important;
width: auto !important; min-width: 0 !important; z-index: auto !important; box-shadow: none !important;
}
.app-nav ul.nav > li.open > ul { display: block; }
/* never show submenus on hover in expanded mode (kill the legacy superfish flyout) */
.app-nav ul.nav > li:hover > ul { display: none; }
.app-nav ul.nav > li.open:hover > ul { display: block; }
/* bulletproof: #navbar is an ID in legacy CSS, so use the ID here too to outweigh it.
expanded sidebar => submenus are INLINE (static), shown only when the group is .open */
body:not(.sidebar-collapsed) #navbar ul.nav li ul {
position: static !important; top: auto !important; left: auto !important;
width: auto !important; min-width: 0 !important; float: none !important; z-index: auto !important;
}
body:not(.sidebar-collapsed) #navbar ul.nav > li:hover > ul { display: none !important; }
body:not(.sidebar-collapsed) #navbar ul.nav > li.open > ul { display: block !important; }
/* full width for inline submenu — beat legacy core.css ul.nav ul{width:10em} + ul.nav ul li{width:130px}
that pinned items to ~130px and made labels wrap per-word */
body:not(.sidebar-collapsed) #navbar ul.nav li ul,
body:not(.sidebar-collapsed) #navbar ul.nav li ul li,
body:not(.sidebar-collapsed) #navbar ul.nav li ul li > a { width: auto !important; max-width: none !important; min-width: 0 !important; }
/* blend submenu items into the sidebar — override legacy skin_clean.css
(ul.nav li li{background:#353535} + ul.nav ul li{border-left:3px solid #000}) that caused the dark recessed panel */
.app-nav ul.nav li ul li {
list-style: none; width: 100% !important; padding: 0 !important; height: auto !important;
background: transparent !important; border: 0 !important;
display: block !important; float: none !important; /* override legacy core.css ul.nav li{float:left} so items STACK, not column/overlap */
}
.app-nav ul.nav li ul li a {
display: flex; align-items: center; margin: 1px 10px 1px 16px; padding: 8px 12px; color: var(--sidebar-muted, #9fb0cc);
text-decoration: none; font-size: 13px; line-height: 1.35; border-radius: 8px;
transition: background .15s ease, color .15s ease, transform .15s ease;
}
/* submenu item icons (bootstrap-icons) — match the reference */
.app-nav ul.nav li ul li a .nav-subico {
flex: 0 0 18px; width: 18px; margin-right: 10px; font-size: 15px; line-height: 1;
display: inline-flex; align-items: center; justify-content: center; opacity: .9;
}
.app-nav ul.nav li ul li a:hover { background: rgba(255,255,255,.08); color: #fff; transform: translateX(2px); }
.app-nav ul.nav li ul li a.active {
background: linear-gradient(90deg, rgba(56,121,230,.30), rgba(56,121,230,.10)); color: #fff;
font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.app-nav ul.nav li ul li a.active .nav-subico { opacity: 1; color: #7fa9e8; }
/* caret on items that have a submenu */
.app-nav .nav-caret { margin-left: auto; transition: transform .15s ease; font-size: 18px; line-height: 1; }
.app-nav ul.nav > li.open > a .nav-caret { transform: rotate(90deg); }
/* collapsed sidebar (icons only): submenu becomes a CLICK flyout (no room inline).
Click-driven (.open), NOT hover — consistent with the expanded accordion. */
body.sidebar-collapsed .app-nav ul.nav li ul {
position: absolute !important; left: 64px !important; top: 0 !important; min-width: 240px !important;
z-index: 1200 !important; padding: 6px 0;
background: var(--sidebar-bg-2); box-shadow: 0 10px 30px rgba(0,0,0,.3) !important;
border-radius: 0 var(--radius) var(--radius) 0; max-height: 82vh; overflow-y: auto;
}
/* show flyout only when the group is .open (clicked); never on hover */
body.sidebar-collapsed .app-nav ul.nav > li:hover > ul { display: none !important; }
body.sidebar-collapsed .app-nav ul.nav > li.open > ul { display: block !important; }
body.sidebar-collapsed .app-nav ul.nav li ul li a { padding-left: 16px; }
body.sidebar-collapsed .app-nav .nav-caret { display: none; }
/* grouped Tools submenu sections */
.app-nav ul.nav li ul.tools-menu { }
.app-nav ul.nav li ul .nav-grp { list-style: none; }
.app-nav ul.nav li ul .nav-grp span {
display: block; padding: 11px 16px 4px; font-size: 11px; font-weight: 500; letter-spacing: .04em;
text-transform: uppercase; color: #8fa3c4; border-top: 1px solid rgba(255,255,255,.10); margin-top: 4px;
}
.app-nav ul.nav li ul .nav-grp:first-child span { border-top: none; margin-top: 0; }
/* ---------- collapsed sidebar (desktop) ---------- */
body.sidebar-collapsed .app-sidebar { flex-basis: 64px; width: 64px; }
body.sidebar-collapsed .app-logo { padding: 12px 6px; }
body.sidebar-collapsed .app-nav ul.nav > li > a { justify-content: center; padding: 14px 0; gap: 0; }
body.sidebar-collapsed .app-nav ul.nav > li > a .nav-label { display: none; }
body.sidebar-collapsed .app-nav ul.nav > li > ul { left: 64px; } /* flyout still works */
/* ---------- top bar ---------- */
.app-topbar { display: flex; align-items: center; gap: 12px; background: var(--surface); border-bottom: 1px solid var(--line); padding: 10px 20px; }
.app-topbar-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.userDetails { color: var(--ink) !important; font-weight: 500; margin: 0 !important; float: none !important; font-size: 14px; }
.meta { display: inline-flex; }
.meta ul { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.meta ul li { list-style: none; float: none !important; }
.meta ul li a {
display: inline-flex; align-items: center; justify-content: center; padding: 4px;
background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: var(--radius); box-shadow: none !important;
}
.meta ul li a:hover { background: var(--surface-2) !important; border-color: var(--brand-navy) !important; }
.meta ul li a img { width: 30px; height: 30px; }
/* topbar control buttons (theme / collapse) injected by modern-ui.js */
.ui-controls { display: inline-flex; align-items: center; gap: 8px; }
.ui-btn {
display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
}
.ui-btn:hover { background: var(--surface-2); border-color: var(--brand-navy); }
.ui-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
.mobile-nav-toggle {
display: none; background: var(--brand-navy); color: #fff !important; border: none;
border-radius: var(--radius); padding: 6px 12px; font-size: 18px; line-height: 1; cursor: pointer;
}
/* ---------- content ---------- */
#content { flex: 1 1 auto; min-width: 0; float: none !important; width: auto !important; margin: 0 !important; background: none !important; }
#main {
float: none !important; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
box-shadow: 0 1px 3px rgba(16,24,40,.05); margin: 20px !important; padding: 24px !important;
animation: aslFade .25s ease;
}
#main h1 { font-size: 22px; font-weight: 500; color: var(--ink); margin: 0 0 4px; }
#main hr { border: none; border-top: 1px solid var(--line); margin: 12px 0 20px; }
/* sticky CAM tools tabs (Application Warning / Application Tools) — stay reachable on the long form */
#application-header-tabs > ul,
#application-header-tabs .ui-tabs-nav {
position: sticky; top: 0; z-index: 50;
background: var(--surface); margin: 0; border-bottom: 1px solid var(--line);
}
/* sticky submit/cancel action bar at the bottom of the CAM edit form */
#cam-action-bar {
position: sticky; bottom: 0; z-index: 40;
background: var(--surface); border-top: 1px solid var(--line);
box-shadow: 0 -2px 10px rgba(16,24,40,.08); margin-top: 12px;
}
/* ---------- CAM validation: flash the first errored field on failed submit ---------- */
@keyframes aslErrFlash {
0%, 100% { box-shadow: 0 0 0 0 rgba(252, 74, 67, 0); }
20%, 60% { box-shadow: 0 0 0 4px rgba(252, 74, 67, .35); }
}
.crm-input-error-flash {
animation: aslErrFlash 1.6s ease;
outline: 2px solid #fc4a43 !important;
outline-offset: 1px;
}
/* ---------- footer ---------- */
/* override legacy core.css #footer {float:left; height:120px; position:relative} + skin_clean bg */
#footer {
background: var(--sidebar-bg) !important; color: var(--sidebar-ink);
padding: 14px 20px; text-align: center; font-size: 12px; margin-top: auto;
float: none !important; height: auto !important; position: static !important;
clear: both; border-top: 1px solid var(--line);
}
#footer p, #footer .mid { margin: 3px 0; color: var(--sidebar-ink); }
#footer a, #footer .mid a { color: #fff !important; text-decoration: none; margin: 0 6px; }
#footer a:hover { text-decoration: underline; }
/* Bootstrap 5's .tooltip component class collides with legacy class="tooltip" elements
(footer Top·Dashboard·Account·Logout links, dashboard) -> Bootstrap forced them
position:absolute; opacity:0; display:block = invisible + stray dots + a tall broken band.
Reset the STATIC legacy ones; Bootstrap's live tooltips carry role="tooltip" (excluded). */
.tooltip:not([role="tooltip"]) {
position: static !important; opacity: 1 !important; display: inline !important;
visibility: visible !important; pointer-events: auto !important; z-index: auto !important;
margin: 0; padding: 0; background: none !important; border: 0; font-size: inherit; line-height: inherit;
}
#footer .tooltip:not([role="tooltip"]) { color: #fff !important; }
/* ---------- dashboard tiles -> cards ---------- */
#content ul.dash { float: none !important; display: grid !important; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; gap: 14px !important; padding: 0 !important; margin: 0 0 20px !important; list-style: none; width: auto !important; }
#content ul.dash li { float: none !important; list-style: none; margin: 0 !important; }
#content ul.dash li a {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
width: auto; min-height: 118px; padding: 14px 10px; background: var(--surface); color: var(--ink) !important;
border: 1px solid var(--line); border-radius: var(--radius-lg); text-decoration: none; text-align: center;
transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
#content ul.dash li a:hover { border-color: var(--brand-navy); box-shadow: 0 2px 10px rgba(20,48,92,.12); transform: translateY(-2px); }
/* margin:0 !important resets legacy core.css `margin-left:29px; margin-top:20px`
on ul.dash img (loads after modern.css) which pushed the tile icons off-centre */
#content ul.dash li a img { width: 40px; height: 40px; object-fit: contain; margin: 0 !important; }
body.theme-dark #content ul.dash li a img, body.theme-dark .meta ul li a img { filter: invert(.85); }
#content ul.dash li a span { font-size: 13px; font-weight: 500; }
/* ---------- demographics status cards (colorized + iconized by js/dashboard-cards.js) ---------- */
#content ul.dash li.dg-card { --dg-accent: var(--brand-navy); }
#content ul.dash li.dg-card a {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
position: relative; overflow: hidden; min-width: 128px; min-height: 110px; padding: 18px 14px 14px;
text-align: center;
}
#content ul.dash li.dg-card a::before { /* top accent bar in the status colour */
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--dg-accent);
}
#content ul.dash li.dg-card a .dg-ico { font-size: 22px; line-height: 1; color: var(--dg-accent); transition: transform .15s ease; }
#content ul.dash li.dg-card a p {
font-size: 30px !important; font-weight: 700; margin: 2px 0 0 !important; padding: 0 !important;
line-height: 1; color: var(--dg-accent); text-align: center; animation: dgPop .4s ease;
}
#content ul.dash li.dg-card a span {
font-size: 12px; font-weight: 600; color: var(--ink-soft); text-align: center;
text-transform: uppercase; letter-spacing: .02em;
}
#content ul.dash li.dg-card a:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(16,24,40,.14); border-color: var(--dg-accent); }
#content ul.dash li.dg-card a:hover .dg-ico { transform: scale(1.14); }
@keyframes dgPop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* per-status accent colours (theme-independent, readable on light + dark surfaces) */
#content ul.dash li.dg-green { --dg-accent: #1ca35a; }
#content ul.dash li.dg-red { --dg-accent: #e5484d; }
#content ul.dash li.dg-amber { --dg-accent: #d98014; }
#content ul.dash li.dg-blue { --dg-accent: #3b82f6; }
#content ul.dash li.dg-orange { --dg-accent: #ef6c2e; }
#content ul.dash li.dg-purple { --dg-accent: #8b5cf6; }
#content ul.dash li.dg-teal { --dg-accent: #14b8a6; }
#content ul.dash li.dg-indigo { --dg-accent: #6366f1; }
#content ul.dash li.dg-cyan { --dg-accent: #06b6d4; }
#content ul.dash li.dg-grey { --dg-accent: #8a94a6; }
#content ul.dash li.dg-navy { --dg-accent: var(--brand-navy-2); }
/* ---------- Loan Application form modernization (scoped to the form; legacy inline-styled table layout) ---------- */
#new_application_form, #renewal_application_form { max-width: 1120px; }
#new_application_form table, #renewal_application_form table { max-width: 100%; }
/* grey section header bars (inline background-color:gray) -> brand card-header */
#new_application_form td[style*="background-color:gray"], #new_application_form td[style*="background-color: gray"],
#renewal_application_form td[style*="background-color:gray"], #renewal_application_form td[style*="background-color: gray"] {
background: var(--brand-navy) !important; color: #fff !important;
font-size: 12px !important; font-weight: 600 !important; letter-spacing: .03em; text-transform: uppercase;
padding: 10px 14px !important; text-align: left !important; border-radius: 6px;
}
/* bordered section boxes -> light cards (subtle so nested boxes don't get heavy) */
#new_application_form table[frame="box"], #renewal_application_form table[frame="box"] {
border: 1px solid var(--line) !important; border-radius: 8px; background: var(--surface); margin-bottom: 12px;
}
#new_application_form table[frame="box"] table[frame="box"],
#renewal_application_form table[frame="box"] table[frame="box"] { box-shadow: none; margin-bottom: 6px; }
/* modern inputs/selects/textareas (keep inline widths, just restyle the box) */
#new_application_form input[type="text"], #new_application_form input[type="number"], #new_application_form select,
#new_application_form textarea, #new_application_form .crm-input-text,
#renewal_application_form input[type="text"], #renewal_application_form input[type="number"], #renewal_application_form select,
#renewal_application_form textarea, #renewal_application_form .crm-input-text {
border: 1px solid var(--line); border-radius: 6px; padding: 5px 9px; font-size: 13px;
background: var(--surface); color: var(--ink); box-sizing: border-box; min-height: 32px; max-width: 100%; vertical-align: middle;
}
#new_application_form input:focus, #new_application_form select:focus, #new_application_form textarea:focus,
#renewal_application_form input:focus, #renewal_application_form select:focus, #renewal_application_form textarea:focus {
outline: none; border-color: var(--brand-navy-2); box-shadow: 0 0 0 2px rgba(28,64,121,.12);
}
#new_application_form td, #renewal_application_form td { font-size: 13px; }
#new_application_form .button, #renewal_application_form .button { vertical-align: middle; }
/* ---------- buttons ---------- */
.button, input[type="submit"], input[type="button"], button:not(.ui-btn):not(.mobile-nav-toggle) {
background: var(--brand-navy); color: #fff !important; border: 1px solid var(--brand-navy);
border-radius: var(--radius); padding: 8px 14px; cursor: pointer; font-size: 13px; line-height: 1.2;
}
.button:hover, input[type="submit"]:hover, input[type="button"]:hover { background: var(--brand-navy-2); }
.dt-export-tools .button, .button.secondary { background: var(--surface); color: var(--brand-navy) !important; border-color: var(--line); }
/* ---------- legacy Tools-page form controls (theme-aware tidy-up;
excludes Bootstrap .form-control and all CAM/CRM-classed fields so CAM forms are untouched) ---------- */
#content form input[type="text"]:not(.form-control):not([class*="crm-"]):not([class*="cam-"]),
#content form input[type="password"]:not(.form-control):not([class*="crm-"]),
#content form input[type="email"]:not(.form-control):not([class*="crm-"]),
#content form input[type="number"]:not(.form-control):not([class*="crm-"]),
#content form textarea:not(.form-control):not([class*="crm-"]):not([class*="cam-"]),
#content form select:not(.form-control):not([class*="crm-"]):not([class*="cam-"]) {
border: 1px solid var(--line); border-radius: var(--radius);
padding: 6px 10px; font-size: 13px; max-width: 100%;
background: var(--surface); color: var(--ink);
}
#content form textarea:not(.form-control):not([class*="crm-"]) { min-height: 72px; }
/* legacy form-LAYOUT tables (direct child of form): readable spacing — not data/.table-prop tables */
#content form > table td, #content form > center > table td { padding: 5px 8px; vertical-align: middle; }
/* consistent Tools CRUD forms (search/new/edit) -> clean left-aligned panels (ids are uniform across modules) */
#content #search_form, #content #new_form, #content #edit_form {
display: inline-block; text-align: left; vertical-align: top;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
padding: 16px 20px; box-shadow: 0 1px 3px rgba(16,24,40,.05); margin: 4px 0 14px;
}
#content #search_form table, #content #new_form table, #content #edit_form table { margin: 0; width: auto; }
#content #search_form td, #content #new_form td, #content #edit_form td { padding: 6px 8px; vertical-align: middle; font-size: 13px; color: var(--ink); }
#content #search_form .button, #content #new_form .button, #content #edit_form .button,
#content #search_form input[type="submit"], #content #new_form input[type="submit"], #content #edit_form input[type="submit"] { margin: 2px 0 2px 6px; }
/* CAM toolbar buttons: uniform size, readable in both themes, no legacy sprite bg */
.application-header-tools {
display: inline-flex !important; align-items: center; justify-content: center; box-sizing: border-box !important;
width: auto !important; min-width: 132px; min-height: 38px;
padding: 8px 14px !important; margin: 3px !important;
background: var(--surface) !important; background-image: none !important; color: var(--ink) !important;
border: 1px solid var(--line) !important; border-radius: var(--radius) !important;
font-size: 13px !important; font-weight: 500 !important; line-height: 1.25; text-align: center;
box-shadow: none !important; cursor: pointer; vertical-align: middle; white-space: normal;
transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.application-header-tools:hover { background: var(--surface-2) !important; border-color: var(--brand-navy) !important; color: var(--brand-navy) !important; }
.application-header-tools b, .application-header-tools span:not([style]) { color: inherit !important; font-weight: 500 !important; }
/* bulletproof: these buttons sit inside the jQuery UI tabs (.ui-widget), whose
.ui-widget button / .ui-widget-content rules fight ours. ID-scoped explicit colors
that win in BOTH themes. (Exit CAM keeps its inline red via span:not([style]).) */
#application-header-tabs button.application-header-tools,
#application-header-tabs .application-header-tools {
background: #ffffff !important; background-image: none !important;
color: #1f2733 !important; border: 1px solid var(--line) !important;
}
#application-header-tabs .application-header-tools b,
#application-header-tabs .application-header-tools font,
#application-header-tabs .application-header-tools span:not([style]) { color: #1f2733 !important; }
body.theme-dark #application-header-tabs button.application-header-tools,
body.theme-dark #application-header-tabs .application-header-tools { background: var(--surface) !important; color: #e6eaf0 !important; }
/* QA #11: the "This page is currently in use by…" lock buttons render inside
.page-warning (NOT #application-header-tabs), so the bulletproof colors above never
reach them and a stray .ui-widget button rule left the label white-on-white in LIGHT
mode. Pin readable colors here too, in both themes. (Exit CAM keeps its inline red.) */
.page-warning button.application-header-tools,
.page-warning .application-header-tools { background: #ffffff !important; color: #1f2733 !important; border: 1px solid var(--line) !important; }
.page-warning .application-header-tools b,
.page-warning .application-header-tools font,
.page-warning .application-header-tools span:not([style]) { color: #1f2733 !important; }
body.theme-dark .page-warning button.application-header-tools,
body.theme-dark .page-warning .application-header-tools { background: var(--surface) !important; color: #e6eaf0 !important; }
body.theme-dark .page-warning .application-header-tools b,
body.theme-dark .page-warning .application-header-tools font,
body.theme-dark .page-warning .application-header-tools span:not([style]) { color: #e6eaf0 !important; }
/* QA #10: the lock banner (.page-warning, incl. #page-lock-warning "This page is currently
locked and viewed by you…") had no theme-aware CONTAINER style, so in dark mode its
text/background didn't adapt and became unreadable. Give it a proper amber warning box
in both themes. (Buttons inside keep their own colors from the rules above.) */
.page-warning {
background: #fff8e1; color: #8a6d3b; border: 1px solid #f0d98c;
border-radius: var(--radius, 6px); padding: 10px 14px; margin: 8px 0;
}
body.theme-dark .page-warning {
background: #2a2410; color: #e8c766; border-color: #5c4d1f;
}
/* QA #12: the Update Status panel (#application-header-tabs-2) hardcodes an inline
background:#FAFAFA, so in DARK mode its light text renders on a light panel and is
unreadable. Make the panel + its text/labels theme-aware in dark mode. */
body.theme-dark #application-header-tabs-2 { background: var(--surface) !important; color: var(--ink) !important; }
body.theme-dark #application-header-tabs-2 td,
body.theme-dark #application-header-tabs-2 span,
body.theme-dark #application-header-tabs-2 span[style*="777"] { color: var(--ink) !important; }
body.theme-dark #application-header-tabs .application-header-tools b,
body.theme-dark #application-header-tabs .application-header-tools font,
body.theme-dark #application-header-tabs .application-header-tools span:not([style]) { color: #e6eaf0 !important; }
/* unified, theme-aware alerts (CAM validation + page/lock warnings) — clear + visible */
.page-warning,
#error_validation_top, #error_validation_bottom,
#error_telepersonal_top, #error_validation_employhistory {
background: #fdecea !important; border: 1px solid #e2553f !important; color: #a32d1a !important;
border-radius: var(--radius) !important; padding: 12px 16px !important;
font-size: 13px !important; font-weight: 500 !important; text-align: center;
margin: 10px 0 !important;
}
body.theme-dark .page-warning,
body.theme-dark #error_validation_top, body.theme-dark #error_validation_bottom,
body.theme-dark #error_telepersonal_top, body.theme-dark #error_validation_employhistory {
background: rgba(226,85,63,.14) !important; border-color: #8a3322 !important; color: #f1a594 !important;
}
.page-warning img, #error_validation_top img, #error_validation_bottom img { vertical-align: middle; margin-right: 6px; }
/* ---- Pagination: ONE consistent look across all 3 renderers
(BS5 .page-link, legacy .paginate_button, custom tfoot .pg-btn) — accent adapts light/dark ---- */
.dataTables_paginate .paginate_button,
.dataTables_paginate a,
.dataTables_paginate .page-link {
display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px;
border: 1px solid var(--line); border-radius: var(--radius); padding: 5px 11px; margin: 0 2px;
cursor: pointer; background: var(--surface); color: var(--ink) !important; text-decoration: none;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.dataTables_paginate .paginate_button:hover,
.dataTables_paginate a:hover,
.dataTables_paginate .page-link:hover { background: var(--pager-hover); border-color: var(--brand-navy-2); }
.dataTables_paginate .paginate_active,
.dataTables_paginate .paginate_button_active,
.dataTables_paginate .page-item.active .page-link {
background: var(--pager-active) !important; color: #fff !important; border-color: var(--pager-active) !important;
}
.dataTables_paginate .paginate_button.disabled,
.dataTables_paginate .paginate_button.disabled:hover,
.dataTables_paginate .page-item.disabled .page-link {
opacity: .45; cursor: default; background: var(--surface) !important; color: var(--ink-soft) !important; border-color: var(--line) !important;
}
.dataTables_paginate .page-item { margin: 0; }
/* ---------- forms ---------- */
input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="date"], select, textarea {
border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; font-size: 13px;
background: var(--surface); color: var(--ink); box-sizing: border-box; max-width: 100%;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand-navy-2); box-shadow: 0 0 0 3px rgba(28,64,121,.12); }
/* ---------- tables ---------- */
table.fullwidth, table.display, .dataTable, #messagecontainer {
width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius-lg); overflow: hidden; color: var(--ink);
}
/* DataTables writes an inline px width (autoWidth) that can leave the table narrower than its
container — especially after columns are hidden. Force it to fill the wrapper. */
.dataTables_wrapper { width: 100%; }
table.dataTable { width: 100% !important; }
.dataTable thead th, table.fullwidth thead td, #messagecontainer thead td {
background: var(--surface-2); color: var(--ink-soft); font-weight: 500; text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line);
}
.dataTable tbody td, table.fullwidth tbody td, #messagecontainer tbody td { padding: 9px 12px; border-bottom: 1px solid var(--line); }
.dataTable tbody tr:hover td { background: var(--surface-2); }
.dt-export-tools { margin: 0 0 12px 0; display: inline-flex; gap: 8px; }
.dt-export-tools .btn { display: inline-flex; align-items: center; gap: 6px; }
/* ---------- searchable branch picker (New / Edit user) ---------- */
.branch-picker {
border: 1px solid var(--line); border-radius: var(--radius);
background: var(--surface); max-width: 420px;
}
.branch-picker-bar {
display: flex; align-items: center; gap: 8px; padding: 8px;
border-bottom: 1px solid var(--line);
}
.branch-picker-bar .branch-search { flex: 1 1 auto; }
.branch-picker-tools { flex: 0 0 auto; white-space: nowrap; }
.branch-picker-tools .btn-link { padding: 2px 6px; font-size: 12px; text-decoration: none; }
.branch-list { max-height: 200px; overflow-y: auto; padding: 4px 0; }
.branch-opt {
display: flex; align-items: center; gap: 8px; margin: 0;
padding: 6px 12px; font-size: 13px; color: var(--ink); cursor: pointer;
}
.branch-opt:hover { background: var(--surface-2); }
.branch-opt input { flex: 0 0 auto; }
.branch-picker-foot {
padding: 6px 12px; border-top: 1px solid var(--line);
font-size: 12px; color: var(--ink-soft);
}
.branch-count-n { font-weight: 600; color: var(--ink); }
/* ---------- tools CRUD form polish ---------- */
.asl-form { max-width: 880px; }
.asl-form .form-label { margin-bottom: 4px; font-weight: 500; }
/* RESPONSIVE / runaway-content guard: cap cell width + truncate to one line (ellipsis),
and let wide tables scroll horizontally inside the content area instead of breaking the page.
(fixes e.g. the Users table where BRANCH lists every branch = thousands of lines tall) */
.dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* ManageTable wraps its (often wide) table in #print_area; scroll it INSIDE the card instead of
overflowing the card to the right (e.g. Manage Users = 14 columns). */
#content #print_area { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
/* also covers the custom server-rendered tables (View::ManageTable / logs.class.php = class="fullwidth")
so e.g. the Users BRANCH column (lists every branch) truncates instead of breaking the page */
.dataTable td, .dataTable th,
table.fullwidth tbody td, table.normal tbody td {
max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
}
/* keep the action/Tools column and the filter row fully usable (not clipped) */
.dataTable thead tr.dt-filter-row th { overflow: visible; white-space: normal; max-width: none; }
.dataTable td:last-child, .dataTable th:last-child,
table.fullwidth tbody td:last-child, table.normal tbody td:last-child { overflow: visible; white-space: nowrap; max-width: none; }
/* legacy fullwidth-table pagination footer (logs / ManageTable) -> clean band; btn_*.png imgs become
modern icon buttons via js/legacy-tables.js */
table.fullwidth tfoot, table.fullwidth tfoot td, table.fullwidth tfoot tr {
background: var(--surface) !important; border-top: 1px solid var(--line) !important; color: var(--ink) !important;
padding: 12px !important; height: auto !important; text-align: center;
}
table.fullwidth tfoot a.pg-btn {
display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink);
margin: 0 3px; font-size: 16px; text-decoration: none; transition: background .15s ease, color .15s ease;
}
table.fullwidth tfoot a.pg-btn:hover { background: var(--pager-active); color: #fff; border-color: var(--pager-active); }
/* ---------- DataTables controls (length / search / info / processing / sort) ---------- */
/* DataTables top controls: keep them inside the container so they never cause
a horizontal page scroll (the wide search box was the culprit). */
.dataTables_wrapper { max-width: 100%; box-sizing: border-box; }
.dataTables_wrapper .dt-export-tools, .dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_paginate { max-width: 100%; }
.dataTables_length { float: left; margin-bottom: 12px; }
.dataTables_filter { float: right; margin-bottom: 12px; max-width: 100%; }
.dataTables_length label, .dataTables_filter label { font-size: 13px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 8px; max-width: 100%; }
.dataTables_filter input[type="search"], .dataTables_filter input {
/* !important: legacy core.css/skin_clean.css load AFTER modern.css and
shrink generic inputs (~130px), which made the table search box tiny */
border: 1.5px solid var(--line) !important; border-radius: var(--radius); font-size: 14px !important;
padding: 9px 12px 9px 34px !important;
width: 300px !important; min-width: 0; max-width: 100%; box-sizing: border-box;
color: var(--ink); margin-left: 4px;
background: var(--surface) url('data:image/svg+xml;utf8,') no-repeat 11px center !important;
}
.dataTables_filter input:focus {
outline: none; border-color: #1e4a91 !important; box-shadow: 0 0 0 3px rgba(30,74,145,.13);
}
@media (max-width: 640px) {
.dataTables_filter input[type="search"], .dataTables_filter input { width: 100% !important; }
}
.dataTables_length select { padding: 6px 26px 6px 10px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.dataTables_info { color: var(--ink-soft); font-size: 13px; padding-top: 12px; clear: left; }
/* center the DataTables pagination (handles BS5 flex AND legacy inline buttons) */
.dataTables_paginate { float: none !important; clear: both; display: flex; justify-content: center; text-align: center; padding-top: 12px; }
.dataTables_paginate .pagination { margin: 0; justify-content: center; }
.dataTables_paginate .paginate_button, .dataTables_paginate a, .dataTables_paginate span { float: none !important; }
/* legacy fullwidth/logs tfoot pagination already centers via align="center"; enforce it */
table.fullwidth tfoot td { text-align: center !important; }
.dataTables_processing {
background: var(--surface) !important; border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: 0 6px 20px rgba(0,0,0,.14); color: var(--ink) !important; padding: 12px 18px; font-size: 13px;
}
/* sortable header arrows */
.dataTable thead th { cursor: pointer; position: relative; white-space: nowrap; }
.dataTable thead th.sorting, .dataTable thead th.sorting_asc, .dataTable thead th.sorting_desc { padding-right: 22px; }
.dataTable thead th.sorting:after, .dataTable thead th.sorting_asc:after, .dataTable thead th.sorting_desc:after {
position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 11px;
}
.dataTable thead th.sorting:after { content: "\2195"; opacity: .4; } /* ↕ */
.dataTable thead th.sorting_asc:after { content: "\2191"; color: var(--brand-navy-2); } /* ↑ */
.dataTable thead th.sorting_desc:after { content: "\2193"; color: var(--brand-navy-2); } /* ↓ */
/* zebra + hover */
.dataTable tbody tr.even td { background: var(--surface-2); }
.dataTable tbody tr.odd td { background: var(--surface); }
.dataTable tbody tr:hover td { background: rgba(28,64,121,.07) !important; }
body.theme-dark .dataTable tbody tr:hover td { background: rgba(127,169,232,.10) !important; }
/* legacy action ![]()
icons in the Tools column -> modern clickable hover-buttons */
.dataTable td img[id^="edit-"], .dataTable td img[id^="delete-"], .dataTable td img[id^="status-"],
.dataTable td img[id^="view-"], .dataTable td img[id^="sync-"], .dataTable td a.tool-btn img {
cursor: pointer; padding: 6px; border-radius: 6px; box-sizing: content-box; vertical-align: middle;
transition: background .15s ease, transform .1s ease;
}
.dataTable td img[id^="edit-"]:hover, .dataTable td img[id^="view-"]:hover { background: rgba(28,64,121,.14); }
.dataTable td img[id^="delete-"]:hover { background: rgba(224,33,39,.16); }
.dataTable td img[id^="status-"]:hover, .dataTable td img[id^="sync-"]:hover { background: var(--surface-2); }
.dataTable td img[id^="edit-"]:active, .dataTable td img[id^="delete-"]:active { transform: scale(.9); }
/* modern action-icon buttons (legacy-tables.js converts the legacy PNG icons -> ) */
.act-ico {
cursor: pointer; font-size: 16px; padding: 6px; border-radius: 6px; vertical-align: middle;
display: inline-flex; align-items: center; justify-content: center;
transition: background .15s ease, transform .1s ease;
}
.act-edit { color: var(--brand-navy-2); } .act-edit:hover { background: rgba(28,64,121,.14); }
.act-delete { color: var(--danger); } .act-delete:hover { background: var(--danger-bg); }
.act-pos { color: var(--success); } .act-pos:hover { background: var(--success-bg); }
.act-neg { color: var(--ink-soft); } .act-neg:hover { background: var(--surface-2); }
.act-view { color: var(--info); } .act-view:hover { background: var(--info-bg); }
.act-ico:active { transform: scale(.9); }
td a.toggle, td a[id^="del_"], td a.user-view { text-decoration: none; margin: 0 1px; }
/* ---- Details modal: label/value grid (shared: Users + Demographics) ---- */
.user-details .ud-row, .detail-grid .ud-row {
display: grid; grid-template-columns: 180px 1fr; gap: 10px;
padding: 9px 4px; border-bottom: 1px solid var(--line, #e6e8ec);
}
.user-details .ud-row:last-child, .detail-grid .ud-row:last-child { border-bottom: 0; }
.user-details .ud-label, .detail-grid .ud-label {
font-weight: 600; color: var(--ink-soft, #5a6472);
text-transform: capitalize; font-size: 13px;
}
.user-details .ud-value, .detail-grid .ud-value { color: var(--ink, #1d2430); word-break: break-word; }
.user-details .ud-empty, .detail-grid .ud-empty { color: var(--ink-soft, #9aa3af); }
@media (max-width: 540px) {
.user-details .ud-row, .detail-grid .ud-row { grid-template-columns: 1fr; gap: 2px; }
}
/* clickable demographics rows -> open details modal */
table.dt-clickable tbody tr { cursor: pointer; }
table.dt-clickable tbody tr:hover td { background: var(--surface-2); }
/* ---------- Notification bell + dropdown (header) ---------- */
.notif-bell { position: relative; display: inline-flex; align-items: center; margin: 0 6px; }
.notif-toggle {
position: relative; display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%;
background: transparent; color: var(--ink-soft); font-size: 19px; cursor: pointer;
transition: background .15s ease, color .15s ease;
}
.notif-toggle:hover { background: var(--surface-2); color: var(--ink); }
.notif-toggle[aria-expanded="true"] { background: var(--surface-2); color: var(--brand-navy-2); }
.notif-badge {
position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px;
border-radius: 9px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700;
line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--surface);
}
.notif-panel {
position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-width: 92vw;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg); z-index: 1200; overflow: hidden;
}
.notif-head {
display: flex; align-items: center; justify-content: space-between;
padding: 11px 14px; border-bottom: 1px solid var(--line);
}
.notif-title { font-weight: 600; font-size: 14px; color: var(--ink); display: inline-flex; align-items: center; gap: 7px; }
.notif-mark-all {
border: 0; background: transparent; color: var(--brand-navy-2); font-size: 12px; font-weight: 600;
cursor: pointer; padding: 2px 4px; border-radius: 5px;
}
.notif-mark-all:hover { text-decoration: underline; }
.notif-list { max-height: 380px; overflow-y: auto; }
.notif-item {
display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px;
border-bottom: 1px solid var(--line); transition: background .12s ease;
}
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--surface-2); }
.notif-clickable { cursor: pointer; }
.notif-ico {
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: 50%; font-size: 15px;
background: var(--info-bg); color: var(--info);
}
.notif-ico-lock { background: var(--danger-bg); color: var(--danger); }
.notif-ico-password { background: var(--warning-bg); color: var(--warning); }
.notif-body { flex: 1 1 auto; min-width: 0; }
.notif-text { font-size: 13px; color: var(--ink); line-height: 1.4; word-break: break-word; }
.notif-text b { font-weight: 600; }
.notif-time { font-size: 11px; color: var(--ink-soft); margin-top: 3px; }
.notif-dismiss {
flex: 0 0 auto; border: 0; background: transparent; color: var(--ink-soft); cursor: pointer;
font-size: 12px; padding: 4px; border-radius: 5px; line-height: 1;
}
.notif-dismiss:hover { background: var(--danger-bg); color: var(--danger); }
.notif-empty { padding: 28px 14px; text-align: center; color: var(--ink-soft); font-size: 13px; }
.notif-empty .bi { display: block; font-size: 26px; margin-bottom: 6px; opacity: .6; }
@media (max-width: 520px) {
.notif-panel { position: fixed; top: 58px; right: 8px; left: 8px; width: auto; }
}
/* per-column filter row injected by dt-enhance.js */
.dataTable thead tr.dt-filter-row th { padding: 6px 8px; background: var(--surface); border-bottom: 1px solid var(--line); cursor: auto; white-space: normal; }
.dataTable thead tr.dt-filter-row th:after { content: none !important; } /* no sort arrow on the filter row */
.dt-col-filter {
width: 100%; box-sizing: border-box; padding: 5px 8px; font-size: 12px; font-weight: 400;
border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink);
}
.dt-col-filter::placeholder { color: var(--ink-soft); opacity: .7; }
.dt-col-filter:focus { outline: none; border-color: var(--brand-navy-2); box-shadow: 0 0 0 2px rgba(28,64,121,.12); }
/* dropdown variant (auto-used for low-cardinality columns, e.g. Product Type) */
.dt-col-filter-select { cursor: pointer; padding-right: 4px; height: 28px; }
/* ---------- status badges (tokenized, theme-aware) ---------- */
.badge { display: inline-block; font-size: 12px; padding: 3px 9px; border-radius: var(--radius); }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-info { background: var(--info-bg); color: var(--info); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
/* ======================================================================
DESIGN-SYSTEM COMPONENTS (Phase 1) — reusable, token-driven, theme-aware.
Use these everywhere instead of inline styles. See views/styleguide.php.
====================================================================== */
/* status pill — for loan dep_stat, sync flags, enabled/disabled, etc. */
.status-pill {
display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
padding: 3px 10px; border-radius: 999px; line-height: 1.4; white-space: nowrap;
}
.status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .9; }
.status-success { background: var(--success-bg); color: var(--success); }
.status-warning { background: var(--warning-bg); color: var(--warning); }
.status-danger { background: var(--danger-bg); color: var(--danger); }
.status-info { background: var(--info-bg); color: var(--info); }
.status-neutral { background: var(--surface-2); color: var(--ink-soft); }
/* page header — title + optional subtitle + right-aligned actions */
.page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; }
.page-header .ph-title { font-size: 20px; font-weight: 500; color: var(--ink); margin: 0; }
.page-header .ph-sub { font-size: 13px; color: var(--ink-soft); margin: 2px 0 0; }
.page-header .ph-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* empty / loading / error states */
.state-block { text-align: center; padding: 40px 20px; color: var(--ink-soft); }
.state-block .state-ico { font-size: 40px; opacity: .5; display: block; margin-bottom: 10px; }
.state-block .state-title { font-size: 15px; font-weight: 500; color: var(--ink); margin: 0 0 4px; }
.state-block .state-msg { font-size: 13px; margin: 0 0 14px; }
.state-error { color: var(--danger); }
/* inline spinner */
.ds-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--line); border-top-color: var(--brand-navy); border-radius: 50%; animation: aslSpin .7s linear infinite; vertical-align: middle; }
@keyframes aslSpin { to { transform: rotate(360deg); } }
/* token-driven focus ring for any focusable control */
.ds-focusable:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius); }
/* ---------- Bootstrap 5 brand theming ---------- */
.btn-primary {
--bs-btn-bg: var(--brand-navy); --bs-btn-border-color: var(--brand-navy);
--bs-btn-hover-bg: var(--brand-navy-2); --bs-btn-hover-border-color: var(--brand-navy-2);
--bs-btn-active-bg: var(--brand-navy-2); --bs-btn-active-border-color: var(--brand-navy-2);
--bs-btn-disabled-bg: var(--brand-navy); --bs-btn-disabled-border-color: var(--brand-navy);
}
.btn-danger {
--bs-btn-bg: var(--brand-red); --bs-btn-border-color: var(--brand-red);
--bs-btn-hover-bg: #c81b20; --bs-btn-hover-border-color: #c81b20;
}
.btn-outline-primary { --bs-btn-color: var(--brand-navy); --bs-btn-border-color: var(--brand-navy); --bs-btn-hover-bg: var(--brand-navy); --bs-btn-hover-border-color: var(--brand-navy); }
.text-primary { color: var(--brand-navy) !important; }
.bg-primary { background-color: var(--brand-navy) !important; }
.link-primary, a.text-primary { color: var(--brand-navy-2) !important; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--brand-navy); }
.page-link { color: var(--ink); background: var(--surface); border-color: var(--line); }
.page-link:hover { background: var(--pager-hover); }
.page-item.active .page-link { background-color: var(--pager-active); border-color: var(--pager-active); color: #fff; }
.page-item.disabled .page-link { color: var(--ink-soft); background: var(--surface); border-color: var(--line); }
.card { border-radius: var(--radius-lg); }
.form-control:focus, .form-select:focus { border-color: var(--brand-navy-2); box-shadow: 0 0 0 .2rem rgba(28,64,121,.15); }
:root { --bs-link-color: var(--brand-navy-2); --bs-primary: var(--brand-navy); }
/* ---------- CAM (loan application) rebuild ---------- */
.cam-container { width: 100%; }
.cam-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.cam-card .card-header {
background: var(--surface-2); color: var(--ink-soft); font-weight: 500; font-size: 13px;
text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--line);
}
.cam-memo-title { font-size: 18px; color: var(--brand-navy); font-weight: 500; }
.cam-product { font-weight: 500; color: var(--ink); }
.cam-branch { font-size: 13px; }
/* CAM view-mode fields as a bordered DOCUMENT TABLE (label cell shaded, value
cell aligned) — a credit memo should read like a formal printed form, not
floating text. Edit mode does not use .cam-field, so inputs are unaffected.
Border model (robust to any col-md-6 / col-12 mix in one .row):
• the .row grid draws the OUTER top + left border
• every .cam-field cell draws its OWN bottom + right border
so cells tile into a clean grid regardless of full/half-width ordering —
no fragile :nth-child parity that a col-12 row would break. */
.cam-card .card-body:has(> .row.g-0) { padding: 0; }
.cam-card .card-body > .row.g-0 {
border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.cam-field {
display: flex; gap: 0; padding: 0; align-items: stretch;
border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
}
.cam-field .cam-label {
flex: 0 0 40%; color: var(--ink-soft); font-size: 13px;
background: var(--surface-2); border-right: 1px solid var(--line);
padding: 8px 12px; display: flex; align-items: center;
}
.cam-field .cam-value {
flex: 1; color: var(--ink); font-size: 13px; font-weight: 500; word-break: break-word;
padding: 8px 12px; display: flex; align-items: center; min-width: 0;
}
/* single-value body (e.g. "Personal Information — Remarks": card-body IS a
.cam-field with only a value) — no grid, so no cell borders, just padding */
.cam-card .card-body.cam-field {
border: 0; padding: 8px 14px; display: block;
}
.cam-card .card-body.cam-field > .cam-value { padding: 0; display: block; }
/* the one bootstrap-style table inside the CAM gets the same document borders */
.cam-container table.cam-table { border: 1px solid var(--line); }
.cam-container table.cam-table th, .cam-container table.cam-table td {
border: 1px solid var(--line); padding: 7px 12px; font-size: 13px; vertical-align: top;
}
.cam-container table.cam-table thead th, .cam-container table.cam-table thead td {
background: var(--surface-2); color: var(--ink-soft); font-weight: 600;
}
/* header rows inside .table-prop grids (bold first-row cells) read as column heads */
.cam-container .table-prop tr:first-child td b { color: var(--ink-soft); font-weight: 600; }
/* QA #12: draw a clear divider between the BORROWER block and the SPOUSE block on
Update CAM. The spouse rows (#spouse_data_1..3) are shown only when civil status =
Married / Common Law, so a top border on the first spouse row appears exactly when
the block is visible (and disappears with it when hidden). */
#spouse_data_1 > td { border-top: 2px solid var(--line); padding-top: 8px; }
/* card-style treatment for the legacy .table-prop CAM sections not yet fully rebuilt
(unifies the whole memorandum with the new card look; theme-aware) */
.cam-container .table-prop {
width: 100%; background: var(--surface); color: var(--ink);
border: 1px solid var(--line) !important; margin-bottom: 16px;
}
.cam-container .table-prop td {
border: 1px solid var(--line) !important;
padding: 7px 12px; font-size: 13px; vertical-align: top;
}
.cam-container .table-prop b { color: var(--ink); font-weight: 500; }
/* section-label tables (class added in markup) -> card-header bar that sits
directly on top of the .table-prop data table below it */
.cam-container table.cam-sec {
width: 100%; margin: 16px 0 0; border-collapse: collapse;
}
.cam-container table.cam-sec td {
background: var(--surface-2); color: var(--ink-soft);
font-weight: 500; font-size: 13px; text-transform: uppercase; letter-spacing: .03em;
padding: 10px 14px;
border: 1px solid var(--line) !important; border-bottom: none !important;
}
.cam-container table.cam-sec + .table-prop { margin-top: 0; }
/* ---------- spinner overlay ---------- */
#asl-spinner {
position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
background: rgba(15,20,28,.25); z-index: 4000;
}
#asl-spinner.show { display: flex; }
#asl-spinner .asl-spin {
width: 44px; height: 44px; border: 4px solid rgba(255,255,255,.5);
border-top-color: var(--brand-red); border-radius: 50%; animation: aslSpin .8s linear infinite;
}
/* ---------- skeleton loading ---------- */
.skeleton, .skeleton-line, .skeleton-card {
background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 37%, var(--surface-2) 63%);
background-size: 400% 100%; animation: aslSkeleton 1.4s ease infinite; border-radius: 6px;
}
.skeleton-line { height: 14px; margin: 8px 0; }
.skeleton-card { height: 110px; }
/* ---------- animations ---------- */
@keyframes aslSpin { to { transform: rotate(360deg); } }
@keyframes aslFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes aslSkeleton { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
/* ---------- responsive ---------- */
@media (max-width: 900px) {
.app-sidebar { position: fixed; left: 0; top: 0; bottom: 0; height: 100%; transform: translateX(-100%); z-index: 1300; }
body.nav-open .app-sidebar { transform: translateX(0); }
body.sidebar-collapsed .app-sidebar { flex-basis: 240px; width: 240px; } /* collapse is desktop-only */
.mobile-nav-toggle { display: inline-flex; align-items: center; }
/* mobile uses the same click accordion as desktop (.open controls display) */
.app-nav ul.nav > li > a .nav-label { display: inline !important; }
#main { margin: 12px !important; padding: 16px !important; }
#content { overflow-x: auto; }
.dataTable, table.fullwidth, #messagecontainer { display: block; overflow-x: auto; white-space: nowrap; }
}
/* ===========================================================================
* CAM / Leads tool modal (#camToolModal) — the reusable Bootstrap 5 popup used
* by Call / SMS / History / Remarks / Diary and the leads-list row tools.
* Gives it brand-consistent spacing, colors, DataTables fit, and responsiveness.
* ======================================================================== */
/* Force a consistent large, vertically-centered, responsive dialog — a fixed
width (not just max-width) stops it shrink-wrapping to narrow content, and
these win regardless of which shim built the modal or what size class it used. */
#camToolModal { padding: 0 !important; }
#camToolModal .modal-dialog {
width: min(940px, 96vw) !important; max-width: min(940px, 96vw) !important;
margin: 1.75rem auto !important; display: flex !important; align-items: center !important;
min-height: calc(100% - 3.5rem) !important;
}
#camToolModal .modal-content { width: 100% !important; border: 0; border-radius: 16px; box-shadow: 0 24px 60px rgba(16,24,40,.28); overflow: hidden; }
#camToolModal .modal-header {
background: linear-gradient(90deg, #011C75, #1e4a91);
border-bottom: 0; padding: .55rem .85rem; min-height: 46px; align-items: center;
}
/* Force a clean white X — legacy `button{}` rules otherwise give btn-close a white box */
#camToolModal .modal-header .btn-close {
width: 1.5rem; height: 1.5rem; padding: 0; margin: 0; border: 0; border-radius: 7px;
opacity: .95; box-shadow: none !important;
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E") center / .95rem no-repeat !important;
}
#camToolModal .modal-header .btn-close:hover { background-color: rgba(255,255,255,.18) !important; opacity: 1; }
#camToolModal .modal-body { padding: 1.15rem 1.35rem 1.35rem; max-height: calc(100vh - 3rem); overflow-y: auto; background: #fff; }
#camToolModal h2 { font-size: 1.05rem; font-weight: 700; color: #011C75; margin: 0 0 .6rem; }
#camToolModal hr { margin: .5rem 0 .9rem; opacity: .12; }
/* Consistent form controls inside every tool modal */
#camToolModal .modal-body label { font-size: 12.5px; color: #5b6675; font-weight: 600; margin-bottom: 3px; }
#camToolModal .modal-body input[type="text"],
#camToolModal .modal-body input[type="password"],
#camToolModal .modal-body input[type="email"],
#camToolModal .modal-body input[type="number"],
#camToolModal .modal-body input:not([type]),
#camToolModal .modal-body select,
#camToolModal .modal-body textarea {
max-width: 100%; border: 1.5px solid #e2e6ee; border-radius: 8px; padding: 8px 11px;
font-size: 14px; background: #fff; transition: border-color .15s, box-shadow .15s;
}
#camToolModal .modal-body input:focus,
#camToolModal .modal-body select:focus,
#camToolModal .modal-body textarea:focus {
outline: none; border-color: #1e4a91; box-shadow: 0 0 0 3px rgba(30,74,145,.13);
}
/* Branded action buttons (Submit / Upload / Send) — exclude close + DataTables controls */
#camToolModal .modal-body button:not(.btn-close):not(.paginate_button):not(.dt-export-btn),
#camToolModal .modal-body input[type="submit"],
#camToolModal .modal-body input[type="button"] {
background: linear-gradient(135deg, #011C75, #1e4a91); color: #fff; border: 0; border-radius: 9px;
padding: 9px 20px; font-size: 14px; font-weight: 600; cursor: pointer;
box-shadow: 0 6px 16px rgba(1,28,117,.28); transition: transform .15s, filter .15s;
}
#camToolModal .modal-body button:not(.btn-close):not(.paginate_button):not(.dt-export-btn):hover,
#camToolModal .modal-body input[type="submit"]:hover,
#camToolModal .modal-body input[type="button"]:hover { transform: translateY(-1px); filter: brightness(1.08); }
/* Bootstrap 5 tabs inside the modal (History) */
#camToolModal .nav-tabs { border-bottom: 2px solid #e6e9ef; gap: 2px; margin-bottom: 14px; }
#camToolModal .nav-tabs .nav-link {
color: #4a5568 !important; font-weight: 600; border: 0; border-radius: 8px 8px 0 0;
padding: .5rem .95rem; background: transparent;
}
#camToolModal .nav-tabs .nav-link:hover { color: #1e4a91 !important; background: #f2f5fb; }
#camToolModal .nav-tabs .nav-link.active {
color: #011C75 !important; background: #fff; border-bottom: 3px solid #1e4a91;
}
#camToolModal .tab-content { padding-top: .25rem; }
#camToolModal .tab-pane { background: transparent !important; }
/* jQuery-UI tabs (Client Details modal) restyled to match the BS5 look */
#camToolModal .ui-tabs, #camToolModal .ui-widget-content { border: 0 !important; background: #fff !important; }
#camToolModal .ui-tabs .ui-tabs-nav {
background: transparent !important; border: 0 !important; border-bottom: 2px solid #e6e9ef !important;
border-radius: 0; padding: 0 !important; margin: 0 0 14px !important;
}
#camToolModal .ui-tabs .ui-tabs-nav li { background: transparent !important; border: 0 !important; margin: 0 2px !important; top: 0; }
#camToolModal .ui-tabs .ui-tabs-nav li a {
color: #4a5568 !important; font-weight: 600; padding: 9px 15px !important; border-radius: 8px 8px 0 0;
}
#camToolModal .ui-tabs .ui-tabs-nav li.ui-state-active a,
#camToolModal .ui-tabs .ui-tabs-nav li.ui-tabs-active a {
color: #011C75 !important; background: #fff !important; border-bottom: 3px solid #1e4a91;
}
#camToolModal .ui-tabs .ui-tabs-panel { padding: 6px 2px !important; }
/* DataTables fit + tidy spacing inside the modal */
#camToolModal table.dataTable { width: 100% !important; font-size: .86rem; }
#camToolModal table.dataTable thead td,
#camToolModal table.dataTable thead th { background: #f4f6fa; color: #011C75; font-weight: 700; }
#camToolModal .dataTables_wrapper .dataTables_paginate .paginate_button { padding: .2rem .55rem; }
#camToolModal .dataTables_wrapper .dt-export-btn,
#camToolModal .dataTables_wrapper .dataTables_filter { margin-bottom: .5rem; }
@media (max-width: 640px) {
#camToolModal .modal-dialog { width: 96vw !important; max-width: 96vw !important; margin: .5rem auto !important; min-height: calc(100% - 1rem) !important; }
#camToolModal .modal-body { padding: .85rem .9rem 1rem; }
#camToolModal .nav-tabs .nav-link,
#camToolModal .ui-tabs .ui-tabs-nav li a { padding: .4rem .6rem !important; font-size: .85rem; }
#camToolModal table.dataTable { font-size: .8rem; }
}