/* ==========================================================================
General Shared Styles
========================================================================== */
/*-------- Google Fonts Import -------- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');
/* ---- Reset & Base ---- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
font-family: 'Manrope', sans-serif;
/* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; */
font-size: 14px;
line-height: 1.5;
color: #1a1a2e;
background: #f0f2f5;
/* Full-width shell: the topbar/footer/QA banner are flex children of ,
so the body must span the viewport at any zoom level. Content width is
capped/centered by inner wrappers (.page-wrapper/.page-wrap = 1500px,
.app-footer-inner = 1140px), not by the body. */
width: 100%;
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* ---- Topbar ---- */
.topbar {
background: #1d1d1b;
height: 56px;
display: flex;
align-items: center;
padding: 0 24px;
border-bottom: 3px solid #0f3460;
position: sticky;
top: 0;
z-index: 100;
}
.topbar-back {
display: flex;
align-items: center;
gap: 4px;
font-size: 13px;
color: #999;
text-decoration: none;
margin-right: 18px;
padding-right: 18px;
border-right: 1px solid rgba(255,255,255,.12);
}
.topbar-back:hover { color: #fff; }
.topbar-back svg { opacity: .7; }
.topbar-brand {
font-size: 15px;
font-weight: 600;
color: #e0e0e0;
letter-spacing: .3px;
}
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
/* ---- User Dropdown ---- */
.user-dropdown { position: relative; display: inline-block; }
.user-btn {
background: none;
border: 1px solid rgba(255,255,255,.15);
border-radius: 4px;
padding: 7px 14px;
font-size: 13px;
color: #ccc;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
}
.user-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.user-btn svg { opacity: .7; }
.user-name { text-transform: uppercase; color: #fff; }
.caret { font-size: 9px; color: rgba(255,255,255,.4); }
/* Styled to echo the left main-menu drawer: rounded icon chips, item titles,
chevrons and the same hover treatment (see .menu-drawer-item). */
.dropdown-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 6px);
background: #fff;
border: 1px solid #e3e7ec;
border-radius: 12px;
list-style: none;
min-width: 252px;
padding: 7px;
margin: 0;
z-index: 1000;
box-shadow: 0 14px 34px rgba(15,28,54,.18);
}
.dropdown-menu.open { display: block; }
.dropdown-menu li { list-style: none; }
.dropdown-head {
display: flex;
flex-direction: column;
gap: 2px;
padding: 7px 10px 10px;
margin-bottom: 5px;
border-bottom: 1px solid #e8ebef;
}
.dropdown-head-eyebrow {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .8px;
color: #8a909a;
}
.dropdown-head-name {
font-size: 13.5px;
font-weight: 700;
color: #1a1a2e;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Secondary line under the full name: the username/display name, styled to read
as quieter metadata (lighter weight + muted color) so it's clearly distinct
from the bold full name above it. */
.dropdown-head-user {
margin-top: 1px;
font-size: 12px;
font-weight: 500;
color: #707682;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dropdown-menu li a {
display: flex;
align-items: center;
gap: 11px;
padding: 8px 9px;
border-radius: 9px;
color: #1a1a2e;
text-decoration: none;
font-size: 13px;
}
.dropdown-menu li a:hover { background: #f2f6fb; }
.dropdown-ico {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 9px;
background: #f0f4ff;
color: #0f3460;
}
.dropdown-label { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.dropdown-chev {
flex-shrink: 0;
display: inline-flex;
color: #c2c8cf;
transition: color .15s, transform .15s;
}
.dropdown-menu li a:hover .dropdown-chev { color: #0f3460; transform: translateX(2px); }
.dropdown-menu .divider { background: #e8ebef; margin: 5px 8px; }
.dropdown-menu li a.dropdown-item--danger:hover { background: #fdf2f2; }
.dropdown-menu li a.dropdown-item--danger:hover .dropdown-ico { background: #fde8e8; color: #c0392b; }
.dropdown-menu li a.dropdown-item--danger:hover .dropdown-chev { color: #c0392b; }
.divider { height: 1px; background: #eee; }
/* ---- Page Wrapper ---- */
.page-wrapper {
width: 100%;
max-width: 1500px;
margin-left: auto;
margin-right: auto;
padding: 32px 20px 0 24px;
flex: 1;
}
.page-wrap {
width: 100%;
max-width: 1500px;
margin-left: auto;
margin-right: auto;
flex: 1;
padding: 32px 20px 0 24px;
}
/* ---- Page Header ---- */
.page-header { margin-bottom: 24px; }
.page-title {
font-size: 22px;
font-weight: 700;
color: #1a1a2e;
margin: 0 0 6px 0;
}
.page-info {
font-size: 13px;
color: #666;
line-height: 1.6;
}
/* ---- Page Hero ---- */
.page-hero {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 20px 24px;
background: #f7f8fa;
border: 1px solid #e8e8e8;
border-radius: 10px;
margin-bottom: 26px;
}
.page-hero-icon {
flex-shrink: 0;
width: 46px;
height: 46px;
border-radius: 10px;
background: #fdeee8;
color: #e8451c;
display: flex;
align-items: center;
justify-content: center;
}
.page-hero-text { flex: 1; min-width: 0; }
.page-hero-title {
font-size: 22px;
font-weight: 700;
margin: 0 0 4px 0;
color: #1a1a2e;
}
.page-hero-desc {
font-size: 13px;
line-height: 1.6;
color: #666;
}
.page-hero-desc p { margin: 0 0 6px 0; }
.page-hero-desc p:last-child { margin-bottom: 0; }
.page-hero-desc a { color: #e8451c; }
.page-hero-aside { flex-shrink: 0; align-self: center; }
@media (max-width: 640px) {
.page-hero {
flex-wrap: wrap;
padding: 16px 18px;
gap: 12px;
}
.page-hero-aside { flex: 1 1 100%; align-self: stretch; }
}
/* ---- Buttons ---- */
.btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 14px;
border-radius: 5px;
font-size: 12px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
border: none;
line-height: 1.4;
white-space: nowrap;
letter-spacing: .2px;
}
.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn-primary { background: #0f3460; color: #fff; }
.btn-primary:hover { background: #1a4a7a; }
.btn-warning { background: #f39c12; color: #fff; }
.btn-warning:hover { background: #d68910; }
.btn-success { background: #27ae60; color: #fff; }
.btn-success:hover { background: #219a52; }
.btn-info { background: #2980b9; color: #fff; }
.btn-info:hover { background: #2471a3; }
.btn-link {
background: none;
color: #0f3460;
padding: 5px 6px;
font-weight: 500;
border: none;
}
.btn-link:hover { text-decoration: underline; }
.btn-secondary {
background: #f0f0f0;
color: #333;
border: 1px solid #ccc;
border-radius: 4px;
padding: 6px 16px;
font-size: 13px;
cursor: pointer;
font-weight: 500;
}
.btn-secondary:hover {
background: #e4e4e4;
}
/* Standard "View/Details" action button for record cards (list + grid cards).
Outline style; goes full-width inside a mobile card (see the 700px rules). */
.btn-card-action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
font-size: 12px;
padding: 6px 14px;
border-radius: 4px;
background: #fff;
color: #0f3460;
border: 1px solid #0f3460;
cursor: pointer;
text-decoration: none;
}
.btn-card-action:hover { background: #0f3460; color: #fff; }
.btn-outline {
padding: 8px 18px;
font-size: 13px;
font-weight: 500;
color: #555;
background: #fff;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-outline:hover {
background: #f5f7fa;
border-color: #999;
color: #333;
}
/* Shared disabled / pending button state. `.btn-pending` keeps the element
clickable (so handlers can explain why it's not ready) while looking inactive;
`:disabled` is the hard-disabled state used during in-flight requests. */
.btn:disabled,
.btn.btn-pending {
opacity: .45;
cursor: not-allowed;
box-shadow: none;
}
/* ---- Back Link ---- */
.back-link {
font-size: 13px;
color: #0f3460;
text-decoration: none;
font-weight: 500;
}
.back-link:hover { text-decoration: underline; }
/* ---- Desktop/Mobile Visibility ---- */
.mobile-only { display: none; }
.desktop-only { display: inline; }
/* ---- Empty State ---- */
.empty-state {
text-align: center;
padding: 80px 24px;
color: #888;
font-size: 15px;
background: #fff;
border-radius: 8px;
border: 1px solid #d5d5d5;
}
.empty-state-icon { margin-bottom: 16px; }
.empty-state-icon svg { display: block; margin: 0 auto; }
.empty-state h3 {
font-size: 17px;
color: #555;
font-weight: 600;
margin-bottom: 8px;
}
.empty-state p { max-width: 420px; margin: 0 auto; line-height: 1.6; color: #888; font-size: 14px; }
/* ---- Collapsible Sections ---- */
.detail-sections { margin-bottom: 48px; }
.detail-section {
background: #fff;
border: 1px solid #d5d5d5;
border-radius: 8px;
margin-bottom: 12px;
overflow: hidden;
}
.section-heading {
display: flex;
align-items: center;
padding: 14px 20px;
font-size: 14px;
font-weight: 700;
color: #1a1a2e;
cursor: pointer;
user-select: none;
list-style: none;
border-left: 4px solid #0f3460;
background: #fafbfc;
}
.section-heading::-webkit-details-marker { display: none; }
.section-heading::before {
content: "\25B6";
font-size: 9px;
color: #999;
margin-right: 10px;
transition: transform 0.15s ease;
display: inline-block;
}
details[open] > .section-heading::before {
transform: rotate(90deg);
}
.section-heading:hover { background: #f0f2f5; }
.section-body { padding: 16px 20px 20px; }
/* ---- Subsection Heading ---- */
.subsection-heading {
font-size: 14px;
font-weight: 700;
color: #0f3460;
margin: 20px 0 12px;
padding-bottom: 6px;
border-bottom: 1px solid #e0e0e0;
}
/* ---- Field Table ---- */
.field-table {
width: 100%;
border-collapse: collapse;
}
.field-table tr { border-bottom: 1px solid #f4f4f4; }
.field-table tr:last-child { border-bottom: none; }
.field-table td {
padding: 7px 8px;
vertical-align: top;
font-size: 13px;
}
.field-table td.lbl {
font-weight: 600;
color: #555;
width: 260px;
white-space: nowrap;
}
.field-table td.val { color: #222; }
/* ---- Section Note ---- */
.section-note {
background: #f8f9fb;
border-left: 3px solid #0f3460;
padding: 10px 14px;
margin-bottom: 14px;
font-size: 13px;
color: #555;
line-height: 1.5;
}
.section-note p { margin: 0 0 6px 0; }
.section-note p:last-child { margin-bottom: 0; }
.section-note a { color: #0f3460; }
/* ---- File Link ---- */
.file-link {
color: #0f3460;
text-decoration: none;
font-weight: 500;
}
.file-link:hover { text-decoration: underline; }
/* ---- Form System ---- */
.form-row {
margin-bottom: 16px;
}
.form-label {
display: block;
font-size: 13px;
font-weight: 600;
color: #444;
margin-bottom: 5px;
}
.req-star {
color: #c0392b;
font-weight: 700;
}
.form-field {
display: block;
width: 100%;
max-width: 520px;
padding: 8px 12px;
font-size: 13px;
color: #222;
background: #fff;
border: 1px solid #ccc;
border-radius: 4px;
line-height: 1.4;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.form-field:focus {
outline: none;
border-color: #0f3460;
}
.form-field[readonly] {
background: #f5f6f8;
color: #666;
}
select.form-field {
max-width: 520px;
padding-right: 28px;
background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
}
.form-textarea {
resize: vertical;
min-height: 60px;
}
.form-value-readonly {
font-size: 13px;
color: #555;
padding: 8px 0;
line-height: 1.4;
}
.form-help-text {
font-size: 12px;
color: #888;
margin-top: 4px;
line-height: 1.4;
}
/* ---- Info tooltip (reusable label/field affordance) ----
Discoverable "(i)" icon that reveals an explanatory bubble on hover, keyboard
focus, or tap. Markup:
...explanatory text...
Keep aria-label and the bubble text identical so AT and sighted users match.
NOTE: the bubble is position:absolute, so an ancestor with overflow:hidden
(e.g. .detail-section) clips it. Place the trigger where there is room above
and to the sides; for a trigger that can sit near a clipped edge, a
JS-positioned tooltip is the more robust choice. */
.app-tip {
position: relative;
display: inline-flex;
align-items: center;
margin-left: 2px;
padding: 3px; /* roomier hover/tap target around the 14px glyph */
color: #8b8ba3;
cursor: help;
vertical-align: middle;
}
.app-tip:hover,
.app-tip:focus { color: #0f3460; outline: none; }
.app-tip-ico { display: block; }
.app-tip-bubble {
position: absolute;
left: 50%;
bottom: calc(100% + 9px);
transform: translateX(-50%) translateY(4px);
z-index: 50;
width: 240px;
max-width: 70vw;
background: #1a1a2e;
color: #e8e8ef;
border: 1px solid #2d2d44;
border-radius: 6px;
padding: 9px 12px;
font-size: 12px;
font-weight: 400;
line-height: 1.5;
text-align: left;
white-space: normal;
box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.app-tip-bubble::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -6px;
border: 6px solid transparent;
border-top-color: #1a1a2e;
}
/* Reveal on hover/focus of the tip itself, and (convenience) when hovering the
whole form label that contains a tip — so the user never has to land on the
small icon or click to see it. */
.app-tip:hover .app-tip-bubble,
.app-tip:focus .app-tip-bubble,
.app-tip:focus-within .app-tip-bubble,
.form-label:hover .app-tip-bubble {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
/* ---- Callout Banner (reusable) ---- */
.callout-banner {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 18px;
margin-bottom: 16px;
border: 1px solid #d5d5d5;
border-left: 4px solid #888;
border-radius: 6px;
background: #f9f9f9;
}
.callout-banner-icon {
flex-shrink: 0;
color: #666;
margin-top: 1px;
}
.callout-banner-content {
min-width: 0;
}
.callout-banner-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #666;
margin-bottom: 3px;
}
.callout-banner-value {
font-size: 15px;
font-weight: 600;
color: #1a1a2e;
line-height: 1.4;
}
.callout-banner--warn {
background: #fffbeb;
border-color: #f0d77c;
border-left-color: #d4a017;
}
.callout-banner--warn .callout-banner-icon { color: #b8860b; }
.callout-banner--warn .callout-banner-label { color: #92711a; }
.callout-banner--info {
background: #eff6ff;
border-color: #b3cde8;
border-left-color: #2c5282;
}
.callout-banner--info .callout-banner-icon { color: #2c5282; }
.callout-banner--info .callout-banner-label { color: #2c5282; }
.callout-banner--success {
background: #f0fdf4;
border-color: #a3d5b3;
border-left-color: #16a34a;
}
.callout-banner--success .callout-banner-icon { color: #16a34a; }
.callout-banner--success .callout-banner-label { color: #155724; }
.callout-banner--error {
background: #fef2f2;
border-color: #f5c6cb;
border-left-color: #c0392b;
}
.callout-banner--error .callout-banner-icon { color: #c0392b; }
.callout-banner--error .callout-banner-label { color: #721c24; }
/* ---- Form Actions ---- */
.form-actions {
padding-top: 16px;
border-top: 1px solid #eee;
margin-top: 8px;
}
.save-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
padding-top: 16px;
border-top: 1px solid #eee;
margin-top: 8px;
}
/* ---- Radio Pills ---- */
.radio-group {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.radio-pill {
display: inline-flex;
cursor: pointer;
margin: 0;
}
.radio-pill input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.radio-pill-text {
display: inline-block;
padding: 6px 16px;
font-size: 13px;
font-weight: 500;
color: #555;
background: #f0f2f5;
border: 1px solid #d0d0d0;
border-radius: 4px;
line-height: 1.4;
white-space: nowrap;
}
.radio-pill input[type="radio"]:checked + .radio-pill-text {
background: #0f3460;
color: #fff;
border-color: #0f3460;
}
.radio-pill:hover .radio-pill-text {
border-color: #999;
}
/* ---- Lookup Fields ---- */
.lookup-field {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
padding: 6px 10px;
border: 1px solid transparent;
border-radius: 6px;
transition: border-color .15s, background-color .15s;
}
.lookup-field.form-field-error {
border-color: #dc2626 !important;
background-color: #fef2f2 !important;
}
.lookup-display {
font-size: 14px;
color: #222;
font-weight: 500;
min-height: 20px;
}
.lookup-display:empty::before {
content: "None selected";
color: #aaa;
font-weight: 400;
font-style: italic;
}
.lookup-btn { flex-shrink: 0; }
.lookup-clear-btn {
font-size: 18px;
line-height: 1;
padding: 2px 6px;
color: #c00;
}
/* ---- File Uploads ---- */
.file-upload-area {
display: flex;
flex-direction: column;
gap: 6px;
}
.form-field-file {
font-size: 0;
width: 0;
height: 0;
overflow: hidden;
position: absolute;
opacity: 0;
}
.file-upload-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 16px;
font-size: 13px;
font-weight: 500;
color: #2962cc;
background: #f0f5ff;
border: 1px dashed #a0bfee;
border-radius: 5px;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
width: fit-content;
}
.file-upload-btn:hover {
background: #e2edff;
border-color: #6e9fe0;
}
.file-upload-btn svg {
width: 16px;
height: 16px;
fill: currentColor;
}
.file-upload-hint {
font-size: 12px;
color: #8a93a0;
}
.file-upload-area.drag-over,
.form-row.drag-over {
outline: 2px dashed #6e9fe0;
outline-offset: 3px;
background: #f0f5ff;
border-radius: 6px;
}
.file-upload-area.drag-over .file-upload-btn,
.form-row.drag-over .file-upload-btn {
background: #e2edff;
border-color: #6e9fe0;
}
.file-upload-area.drag-over .file-upload-hint,
.form-row.drag-over .file-upload-hint {
color: #2962cc;
}
.upload-file-list {
margin-bottom: 4px;
}
.upload-file-list:empty {
display: none;
}
.upload-file-item {
display: flex;
align-items: center;
padding: 7px 10px;
margin-bottom: 4px;
background: #f8f9fb;
border: 1px solid #e2e5ea;
border-radius: 5px;
font-size: 13px;
transition: background 0.12s;
}
.upload-file-item:hover {
background: #eef1f5;
}
.upload-file-item .file-icon {
margin-right: 8px;
color: #6b7a8d;
flex-shrink: 0;
}
.upload-file-item .file-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #333;
}
.upload-file-item .file-remove {
background: none;
border: none;
color: #aab2bd;
cursor: pointer;
font-size: 18px;
font-weight: 400;
padding: 0 2px;
margin-left: 10px;
line-height: 1;
transition: color 0.15s;
}
.upload-file-item .file-remove:hover {
color: #c33;
}
.upload-file-item.existing-file .file-name a {
color: #2962cc;
text-decoration: none;
}
.upload-file-item.existing-file .file-name a:hover {
text-decoration: underline;
}
.upload-file-item.pending-file .file-name {
color: #555;
font-style: italic;
}
.upload-file-item.pending-file .file-name::after {
content: ' (pending upload)';
font-size: 11px;
color: #999;
font-style: italic;
}
/* ---- Checkbox List ---- */
.checkbox-list {
border: 1px solid #ddd;
border-radius: 4px;
padding: 8px 12px;
max-height: 200px;
overflow-y: auto;
background: #fff;
}
.checkbox-list label {
display: block;
padding: 4px 0;
font-size: 13px;
cursor: pointer;
}
.checkbox-list label:hover {
background: #f5f7fa;
}
.checkbox-list input[type="checkbox"] {
margin-right: 8px;
}
.checkbox-list-loading {
color: #999;
font-size: 13px;
padding: 6px 0;
}
/* ---- Validation ---- */
.validation-summary {
background: #fef2f2;
border: 1px solid #fca5a5;
border-left: 4px solid #dc2626;
border-radius: 6px;
padding: 14px 18px;
margin-bottom: 20px;
font-size: 13px;
color: #991b1b;
}
.validation-summary strong { display: block; margin-bottom: 6px; }
.validation-summary ul { margin: 0; padding-left: 18px; }
.validation-summary li { margin-bottom: 2px; }
.form-field-error {
border-color: #dc2626 !important;
background-color: #fef2f2 !important;
}
.form-field-error-file {
outline: 2px solid #dc2626;
outline-offset: 2px;
border-radius: 4px;
}
.form-field.is-invalid,
.form-field.form-field-error,
select.form-field-error {
border-color: #dc2626 !important;
background-color: #fef2f2 !important;
}
.radio-group.is-invalid .radio-pill-text {
border-color: #dc2626;
background-color: #fef2f2;
}
.field-error {
font-size: 12px;
color: #c0392b;
margin-top: 4px;
}
.email-error-msg {
font-size: 12px;
color: #c0392b;
margin-top: 4px;
}
/* ---- Info Blocks ---- */
.section-info-block {
background: #f0f4ff;
border: 1px solid #c9d6f0;
border-radius: 6px;
padding: 14px 18px;
margin-bottom: 18px;
font-size: 13px;
line-height: 1.6;
color: #333;
}
.section-info-block p { margin: 0 0 8px; }
.section-info-block p:last-child { margin-bottom: 0; }
.section-info-block ul { margin: 4px 0 8px; }
.section-info-block li { margin-bottom: 2px; }
.section-info-block a { color: #4a6fa5; text-decoration: underline; }
.section-info-block-elevated {
background: #fff8e1;
border-color: #e8d48a;
}
.section-sub-heading {
font-size: 14px;
font-weight: 600;
color: #1a1a2e;
margin: 0 0 14px;
padding-bottom: 6px;
border-bottom: 1px solid #e0e0e0;
}
/* ---- Context Banners ---- */
.context-banner {
display: flex;
align-items: flex-start;
gap: 12px;
background: #f0f4ff;
border: 1px solid #c9d6f0;
border-left: 4px solid #4a6fa5;
border-radius: 6px;
padding: 14px 18px;
margin-bottom: 24px;
}
.context-banner-icon {
flex-shrink: 0;
color: #4a6fa5;
margin-top: 1px;
}
.context-banner-body {
flex: 1;
min-width: 0;
}
.context-banner-line {
font-size: 13.5px;
color: #1a1a2e;
line-height: 1.6;
}
.context-banner-line .context-label {
font-weight: 600;
color: #333;
}
.context-banner-note {
font-size: 12px;
color: #667;
margin-top: 6px;
line-height: 1.5;
font-style: italic;
}
.context-banner-link {
display: inline-block;
margin-top: 8px;
font-size: 13px;
font-weight: 600;
color: #4a6fa5;
text-decoration: none;
}
.context-banner-link:hover {
color: #2d4f7e;
text-decoration: underline;
}
/* ---- Modals ---- */
.modal-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 9000;
background: rgba(0, 0, 0, .45);
justify-content: center;
align-items: center;
}
.modal-overlay.open { display: flex; }
.modal-dialog {
background: #fff;
border-radius: 8px;
box-shadow: 0 8px 30px rgba(0,0,0,.25);
width: 560px;
max-width: 94vw;
max-height: 85vh;
display: flex;
flex-direction: column;
animation: modalIn .2s ease;
}
@keyframes modalIn {
from { opacity: 0; }
to { opacity: 1; }
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
border-bottom: 1px solid #e8e8e8;
}
.modal-header h2 { font-size: 16px; font-weight: 600; margin: 0; }
.modal-close {
background: none;
border: none;
font-size: 22px;
color: #888;
cursor: pointer;
padding: 0 4px;
line-height: 1;
}
.modal-close:hover { color: #333; }
.modal-body {
padding: 20px;
overflow-y: auto;
position: relative;
}
.modal-body .doc-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 12px 0;
border-bottom: 1px solid #f0f0f0;
}
.modal-body .doc-row:last-child { border-bottom: none; }
.modal-body .doc-label {
font-weight: 500;
color: #555;
min-width: 160px;
flex-shrink: 0;
}
.modal-body .doc-value { color: #333; }
.modal-body .doc-value a { color: #1a73e8; text-decoration: none; }
.modal-body .doc-value a:hover { text-decoration: underline; }
.modal-body .doc-empty { color: #999; font-style: italic; }
.modal-md {
width: 640px;
max-width: 94vw;
}
.modal-lg {
width: 840px;
max-width: 94vw;
max-height: 90vh;
}
.modal-loading {
text-align: center;
padding: 40px 20px;
color: #888;
font-size: 15px;
}
.modal-body-scroll {
max-height: 78vh;
overflow-y: auto;
padding: 16px 24px;
}
/* ---- Modal detail header/actions (shared by subscription + capital call modals) ---- */
.detail-modal-header-info {
font-size: 14px;
color: #555;
margin-bottom: 14px;
}
.detail-modal-actions {
margin-bottom: 20px;
}
.modal-subsection {
font-size: 14px;
font-weight: 700;
color: #0f3460;
margin: 20px 0 12px;
padding-bottom: 6px;
border-bottom: 1px solid #e0e0e0;
}
.modal-subsection:first-child { margin-top: 0; }
/* ---- Lookup Modal Elements ---- */
.lookup-search-row {
margin-bottom: 12px;
}
.lookup-search-input {
max-width: 100% !important;
}
.lookup-results {
min-height: 80px;
max-height: 320px;
overflow-y: auto;
border: 1px solid #e0e0e0;
border-radius: 4px;
background: #fafafa;
}
.lookup-loading,
.lookup-empty {
text-align: center;
padding: 24px 12px;
font-size: 13px;
color: #888;
}
.lookup-list {
list-style: none;
margin: 0;
padding: 0;
}
.lookup-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border-bottom: 1px solid #eee;
font-size: 13px;
color: #333;
}
.lookup-item:last-child { border-bottom: none; }
.lookup-item:hover { background: #f0f4ff; }
.lookup-item-name { flex: 1; margin-right: 10px; }
.lookup-select-btn { flex-shrink: 0; }
.lookup-add-new-row {
padding: 10px 0 0;
text-align: left;
}
/* ---- Tabs ---- */
.contact-tabs {
margin-bottom: 16px;
}
.contact-tab-bar {
display: flex;
border-bottom: 2px solid #dee2e6;
margin-bottom: 0;
}
.contact-tab {
padding: 9px 20px;
font-size: 13px;
font-weight: 500;
color: #666;
background: none;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
}
.contact-tab:hover {
color: #333;
}
.contact-tab.active {
color: #2962cc;
border-bottom-color: #2962cc;
}
.contact-tab-panel {
display: none;
padding-top: 16px;
}
.contact-tab-panel.active {
display: block;
}
/* ---- Inner Sections ---- */
.inner-section {
border: 1px solid #e0e0e0;
border-radius: 6px;
margin-bottom: 16px;
overflow: hidden;
}
.inner-section-heading {
display: flex;
align-items: center;
padding: 10px 16px;
font-size: 13px;
font-weight: 600;
color: #0f3460;
cursor: pointer;
user-select: none;
list-style: none;
background: #f8f9fb;
}
.inner-section-heading::-webkit-details-marker { display: none; }
.inner-section-heading::before {
content: "\25B6";
font-size: 8px;
color: #999;
margin-right: 8px;
display: inline-block;
}
details[open] > .inner-section-heading::before {
transform: rotate(90deg);
}
.inner-section-body {
padding: 12px 16px;
}
/* ---- Misc Shared ---- */
@keyframes fieldHighlight {
0% { box-shadow: 0 0 0 0 rgba(204, 51, 51, 0.5); }
50% { box-shadow: 0 0 0 4px rgba(204, 51, 51, 0.3); }
100% { box-shadow: 0 0 0 0 rgba(204, 51, 51, 0); }
}
.field-highlight-pulse {
animation: fieldHighlight 0.75s ease 2;
}
.saving-spinner {
width: 32px;
height: 32px;
border: 3px solid #e0e0e0;
border-top-color: #0f3460;
border-radius: 50%;
margin: 0 auto;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.save-success-bar {
background: #27ae60;
color: #fff;
text-align: center;
padding: 10px 16px;
font-size: 14px;
font-weight: 500;
transition: opacity 0.3s ease;
}
/* ---- Layout Shell (sidebar + main) ---- */
.layout {
display: flex;
gap: 28px;
align-items: flex-start;
}
.summary-sidebar {
width: 220px;
flex-shrink: 0;
position: sticky;
top: 72px;
max-height: calc(100vh - 90px);
overflow-y: auto;
background: #fff;
border: 1px solid #e2e5ea;
border-radius: 8px;
padding: 0 0 8px 0;
box-shadow: 0 1px 4px rgba(0,0,0,0.05);
align-self: flex-start;
}
.summary-sidebar-header {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #999;
padding: 14px 16px 10px;
border-bottom: 1px solid #eef0f3;
margin-bottom: 4px;
}
.page-main {
flex: 1;
min-width: 0;
max-width: 1150px;
padding: 0 0 48px 0;
}
/* ---- Sidebar Summary Items ---- */
.summary-sidebar .summary-item {
padding: 11px 16px;
display: flex;
align-items: center;
gap: 12px;
border-left: 3px solid transparent;
position: relative;
transition: background 0.12s, color 0.12s;
}
.summary-item[data-filter-category=""] { border-left-color: #8899aa; }
.summary-item[data-filter-category="action_needed"] { border-left-color: #3498db; }
.summary-item[data-filter-category="in_progress"] { border-left-color: #e67e22; }
.summary-item[data-filter-category="completed"] { border-left-color: #27ae60; }
.summary-item[data-filter-category="approved_modified"] { border-left-color: #d4880f; }
.summary-item[data-filter-category="approved"] { border-left-color: #2980b9; }
.summary-item[data-filter-category="pending_approval"] { border-left-color: #e67e22; }
.summary-clickable { cursor: pointer; transition: background-color 0.15s ease; }
.summary-clickable:hover { background: #f5f7fa; }
.summary-clickable.active[data-filter-category=""] { background: #f4f6f8; border-left-color: #8899aa; }
.summary-clickable.active[data-filter-category="action_needed"] { background: #eef6fc; border-left-color: #3498db; }
.summary-clickable.active[data-filter-category="in_progress"] { background: #fef5ec; border-left-color: #e67e22; }
.summary-clickable.active[data-filter-category="completed"] { background: #edfbf3; border-left-color: #27ae60; }
.summary-clickable.active[data-filter-category="approved_modified"] { background: #fef8ec; border-left-color: #d4880f; }
.summary-clickable.active[data-filter-category="approved"] { background: #eef3fc; border-left-color: #2980b9; }
.summary-clickable.active[data-filter-category="pending_approval"] { background: #fef5ec; border-left-color: #e67e22; }
.summary-icon {
display: flex;
flex-shrink: 0;
}
.summary-icon svg { display: block; }
.summary-count {
font-size: 20px;
font-weight: 700;
color: #1a1a2e;
line-height: 1;
min-width: 24px;
}
.summary-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: .4px;
color: #888;
font-weight: 500;
line-height: 1.2;
}
.summary-meta {
display: flex;
flex-direction: column;
gap: 2px;
}
/* ---- Filter Row ---- */
.filter-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
margin-bottom: 18px;
font-size: 13px;
color: #888;
}
.filter-row .record-count {
margin: 0;
font-size: 13px;
}
.filter-row .record-count strong { color: #555; }
.filter-sep { color: #d0d0d0; }
.filter-select {
padding: 6px 28px 6px 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 13px;
color: #333;
background: #fff;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.filter-select:focus { outline: none; border-color: #0f3460; }
/* ---- AppSelect (shared searchable dropdown — the standard filter control) ---- */
.app-select { position: relative; display: inline-block; }
.app-select-trigger {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
padding: 6px 10px;
font-size: 13px;
color: #333;
background: #fff;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
text-align: left;
}
.app-select-trigger:hover { border-color: #0f3460; }
.app-select.open .app-select-trigger,
.app-select--active .app-select-trigger { border-color: #0f3460; color: #0f3460; }
.app-select--active .app-select-trigger { background: #f0f4ff; }
.app-select-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-select-caret { color: #999; flex-shrink: 0; transition: transform 0.15s, color 0.15s; }
.app-select.open .app-select-caret { color: #0f3460; transform: rotate(180deg); }
.app-select-panel {
display: none;
position: absolute;
z-index: 40;
top: calc(100% + 4px);
left: 0;
/* Grow to fit the widest option so long labels (e.g. full investor names)
are not clipped, but never narrower than the trigger nor wider than the
viewport. Anything still longer than the cap wraps (see -item-text). */
width: max-content;
min-width: 100%;
max-width: min(440px, calc(100vw - 24px));
background: #fff;
border: 1px solid #d5d5d5;
border-radius: 6px;
box-shadow: 0 6px 20px rgba(20, 30, 50, 0.12);
}
.app-select.open .app-select-panel { display: block; }
/* When a widened panel would spill past the right edge of the viewport, JS adds
this class so the panel right-aligns to the trigger and stays on-screen. */
.app-select--flip-right .app-select-panel { left: auto; right: 0; }
/* On mobile the filter grid is single-column and the trigger already spans the
row, so keep the panel at the trigger width (long labels wrap within it)
rather than growing — a wider panel can't be kept on-screen beside a
near-full-width trigger. */
@media (max-width: 700px) {
.app-select-panel { width: auto; max-width: 100%; }
}
.app-select-search { padding: 8px 10px; border-bottom: 1px solid #eef0f3; }
.app-select-search-input {
width: 100%;
padding: 6px 10px;
font-size: 13px;
border: 1px solid #ddd;
border-radius: 5px;
outline: none;
box-sizing: border-box;
}
.app-select-search-input:focus { border-color: #0f3460; }
/* width:max-content lets the list (and thus the panel) size to its widest
option even though it is a vertical scroll container; max-width:100% keeps it
within the panel's cap so long labels wrap rather than scroll horizontally. */
.app-select-list { width: max-content; min-width: 100%; max-width: 100%; max-height: 240px; overflow-y: auto; padding: 4px 0; }
.app-select-item {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
padding: 7px 12px;
font-size: 13px;
color: #333;
cursor: pointer;
}
.app-select-item:hover { background: #f5f7fa; }
.app-select-item--active { color: #0f3460; font-weight: 600; background: #f0f4ff; }
/* Wrap long labels (full investor names etc.) instead of clipping them with an
ellipsis, so the whole value is always readable. */
.app-select-item-text { min-width: 0; white-space: normal; overflow-wrap: break-word; word-break: break-word; line-height: 1.35; }
.app-select-check { flex-shrink: 0; margin-top: 2px; color: #0f3460; }
/* Section header for an AppSelect built from a