and do NOT cascade
into those spans. Visually confirmed unchanged.
PDF safety: DinkToPdf and WeasyPrint views render without _Layout —
zero leakage from this file.
========================================================================== */
/* --------------------------------------------------------------------------
1. INTER FONT
-------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
body,
h1, h2, h3, h4, h5, h6,
.panel, .panel-heading, .panel-body, .panel-footer,
table, thead, tbody, th, td,
input, select, textarea, button,
.btn, .form-control, .dropdown-menu,
.modal, .modal-header, .modal-body, .modal-footer,
.mainTitle, label, .label, .badge {
font-family: 'Inter', sans-serif !important;
}
/* --------------------------------------------------------------------------
2. PAGE BACKGROUND / BODY TEXT
-------------------------------------------------------------------------- */
body {
background: #FAF9FD !important;
color: #1A1C1E !important;
}
/* --------------------------------------------------------------------------
3. BUTTONS
-------------------------------------------------------------------------- */
/* Primary → navy */
.btn-primary,
.btn-primary:visited {
background-color: #0D1B34 !important;
border-color: #0D1B34 !important;
color: #ffffff !important;
padding: 6px 12px !important;
font-size: 14px !important;
line-height: 1.42857143 !important;
box-sizing: border-box !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
background-color: #1A2A4A !important;
border-color: #1A2A4A !important;
color: #ffffff !important;
}
/* Warning → orange accent/CTA */
.btn-warning,
.btn-warning:visited {
background-color: #F58220 !important;
border-color: #F58220 !important;
color: #ffffff !important;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active {
background-color: #E4731A !important;
border-color: #E4731A !important;
color: #ffffff !important;
}
/* Default → neutral light — border uses input-border token so it reads as "styled" */
.btn-default {
background-color: #ffffff !important;
border-color: #C5C6CE !important;
color: #1A1C1E !important;
padding: 6px 12px !important;
font-size: 14px !important;
line-height: 1.42857143 !important;
box-sizing: border-box !important;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active {
background-color: #F4F3F7 !important;
border-color: #9EA1AB !important;
color: #1A1C1E !important;
}
/* Shared radius + height normalization */
.btn {
border-radius: 4px !important;
padding: 6px 12px !important;
line-height: 1.42857143 !important;
box-sizing: border-box !important;
}
/* --------------------------------------------------------------------------
3b. BTN-INFO — navy to stay consistent with theme (Search buttons etc.)
-------------------------------------------------------------------------- */
.btn-info,
.btn-info:visited {
background-color: #0D1B34 !important;
border-color: #0D1B34 !important;
color: #ffffff !important;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active {
background-color: #1A2A4A !important;
border-color: #1A2A4A !important;
color: #ffffff !important;
}
/* --------------------------------------------------------------------------
3c. PAGE TITLE BAND
styles.css: #page-title { padding: 50px 0 } → too tall.
styles.css: .mainTitle { font-size: 15px } → too small.
New padding: 12px 0. New font: 15 × 1.3 = 19.5 → 20px.
Peach background on the band.
BARE-H2 FIX: views still using Title
without #page-title get
normalised size + peach background. Selectors use child combinators so
panel/modal h2 tags are not caught.
-------------------------------------------------------------------------- */
#page-title {
padding: 12px 0 !important;
background-color: #FEF0E6 !important;
border-bottom: 1px solid #F0D4C0 !important;
}
.sub-title-band {
padding: 12px 15px !important;
background-color: #E8F1FB !important;
border-bottom: 1px solid #C0D4F0 !important;
margin-bottom: 10px !important;
width: 100% !important;
}
h2.mainTitle,
.mainTitle {
font-size: 20px !important;
}
/* Bare-h2 normalization: font + peach band for remaining unfixed pages */
.main-content > div > h2:not(.mainTitle),
.main-content > div > div > h2:not(.mainTitle),
.main-content > div > div > div > h2:not(.mainTitle) {
font-size: 20px !important;
font-weight: bold !important;
margin: 0 0 16px 0 !important;
color: #1A1C1E !important;
background-color: #FEF0E6 !important;
border-bottom: 1px solid #F0D4C0 !important;
padding: 12px 15px !important;
display: block !important;
}
/* --------------------------------------------------------------------------
3d. FOOTER POSITIONING
Footer is position:absolute;bottom:0 on #app{min-height:100%;position:relative}.
Problem: html/body have no height set, so min-height:100% resolves to 0
on some browsers. Also .app-content needs padding-bottom so content is
never hidden behind the 50px footer.
-------------------------------------------------------------------------- */
html, body {
min-height: 100vh;
}
#app {
min-height: 100vh !important;
}
#app .app-content {
padding-bottom: 60px !important; /* clearance for 50px footer + margin */
}
/* --------------------------------------------------------------------------
4. PANELS / CARDS
-------------------------------------------------------------------------- */
.panel {
background: #ffffff !important;
border: 1px solid #E3E2E6 !important;
border-radius: 4px !important;
box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
color: #1A1C1E !important;
}
.panel-default > .panel-heading {
background: #F4F3F7 !important;
border-bottom: 1px solid #E3E2E6 !important;
border-radius: 4px 4px 0 0 !important;
font-weight: 600 !important;
color: #1A1C1E !important;
}
.panel-footer {
background: #F4F3F7 !important;
border-top: 1px solid #E3E2E6 !important;
border-radius: 0 0 4px 4px !important;
}
/* --------------------------------------------------------------------------
4b. FIELDSET — card shadow + lighter border
styles.css: fieldset { border: 1px solid #353535 } — near-black, heavy.
Lighten to #E3E2E6 (same as panel border) + add shadow for card feel.
-------------------------------------------------------------------------- */
fieldset {
border-color: #E3E2E6 !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}
/* --------------------------------------------------------------------------
5. TABLES
Navy header, zebra, hover.
.tat-* timer spans are on inside — not affected by th/tr rules.
-------------------------------------------------------------------------- */
.table > thead > tr > th {
background-color: #0D1B34 !important;
color: #ffffff !important;
font-size: 11px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
padding: 8px 8px !important;
border-bottom: none !important;
white-space: normal;
word-break: break-word;
}
/* Separator between header cells */
.table > thead > tr > th + th {
border-left: 1px solid rgba(255,255,255,0.12) !important;
}
/* Table container: round corners + top breathing room.
.table-responsive clips the navy header corners via overflow:hidden.
For tables not in .table-responsive, round individual th corners below. */
.table-responsive {
overflow-x: auto !important;
border-radius: 6px !important;
margin-top: 16px !important;
}
.table-responsive > .table {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Round the first row of corners for tables NOT wrapped in .table-responsive
(e.g. tables sitting directly inside a fieldset or panel-body). */
.table > thead > tr:first-child > th:first-child {
border-top-left-radius: 6px !important;
}
.table > thead > tr:first-child > th:last-child {
border-top-right-radius: 6px !important;
}
/* Space above tables that are rendered directly in a container (no .table-responsive).
16px margin-top; overridden to 0 when inside .table-responsive (rule above). */
.table {
margin-top: 16px;
}
.table-responsive > .table {
margin-top: 0;
}
/* Zebra — specified as nth-of-type per prompt */
.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th {
background-color: #EFF3FA !important;
}
.table-striped > tbody > tr:nth-of-type(even) > td,
.table-striped > tbody > tr:nth-of-type(even) > th {
background-color: #F8FAFD !important;
}
/* Row hover — table-hover class */
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
background-color: #EEF0F8 !important;
}
/* Cell baseline */
.table > tbody > tr > td,
.table > tbody > tr > th {
border-top: 0.5px solid #E3E2E6 !important;
color: #1A1C1E;
vertical-align: middle !important;
background-color: #F8FAFD;
}
/* Keep in-cell inputs clearly editable in data-entry tables */
.table > tbody > tr > td > input,
.table > tbody > tr > td > select {
background-color: #ffffff !important;
border: 1px solid #C5C6CE !important;
border-radius: 3px !important;
}
/* --------------------------------------------------------------------------
6. INPUTS / FORMS
-------------------------------------------------------------------------- */
.form-control {
background-color: #ffffff !important;
border: 1px solid #C5C6CE !important;
border-radius: 4px !important;
color: #1A1C1E !important;
box-shadow: none !important;
}
.form-control:focus {
border-color: #0D1B34 !important;
box-shadow: 0 0 0 3px rgba(13,27,52,0.10) !important;
outline: none !important;
}
/* Readonly / prefilled — lighten from heavy grey to #F4F3F7 */
.form-control[readonly],
.form-control[disabled],
input[readonly].form-control,
textarea[readonly].form-control,
select[disabled].form-control {
background-color: #F4F3F7 !important;
color: #75777E !important;
border-color: #D8D7DC !important;
cursor: default;
}
/* --------------------------------------------------------------------------
7. MODALS — Bootstrap modals
-------------------------------------------------------------------------- */
.modal-content {
border-radius: 12px !important;
box-shadow: 0 8px 40px rgba(0,0,0,0.28) !important;
border: none !important;
overflow: hidden !important;
}
.modal-header {
background-color: #0D1B34 !important;
border-bottom: none !important;
padding: 8px 16px !important;
border-radius: 0 !important;
}
.modal-title {
color: #ffffff !important;
font-weight: 600 !important;
font-size: 14px !important;
line-height: 1.4 !important;
}
.modal-header .close {
color: #ffffff !important;
opacity: 0.75 !important;
text-shadow: none !important;
font-size: 20px !important;
}
.modal-header .close:hover {
opacity: 1 !important;
}
/* --------------------------------------------------------------------------
7b. MODALS — jQuery UI dialogs (.ui-dialog)
-------------------------------------------------------------------------- */
.ui-dialog {
border-radius: 12px !important;
box-shadow: 0 8px 40px rgba(0,0,0,0.28) !important;
border: none !important;
overflow: hidden !important;
padding: 0 !important;
}
.ui-dialog .ui-dialog-titlebar {
background: #0D1B34 !important;
border: none !important;
border-radius: 0 !important;
padding: 8px 16px !important;
}
.ui-dialog .ui-dialog-title {
color: #ffffff !important;
font-weight: 600 !important;
font-size: 13px !important;
line-height: 1.4 !important;
}
.ui-dialog .ui-dialog-titlebar-close {
background: transparent !important;
border: none !important;
color: #ffffff !important;
opacity: 0.75 !important;
top: 50% !important;
margin-top: -10px !important;
box-shadow: none !important;
}
.ui-dialog .ui-dialog-titlebar-close:hover {
background: transparent !important;
opacity: 1 !important;
}
.ui-dialog .ui-dialog-titlebar-close .ui-icon {
background-image: none !important;
text-indent: 0 !important;
color: #ffffff !important;
font-size: 18px !important;
}
.ui-dialog .ui-dialog-titlebar-close .ui-icon::after {
content: '×';
color: #ffffff;
}
.ui-dialog .ui-dialog-content {
background: #ffffff !important;
padding: 20px !important;
}
/* --------------------------------------------------------------------------
8. BORDER RADIUS (panels + form-control covered above; consolidate modal) */
.form-control { border-radius: 4px !important; } /* already set above — explicit */
/* --------------------------------------------------------------------------
9. STATUS PILLS (additive utility classes — safe, no existing class risk)
-------------------------------------------------------------------------- */
.status-pill {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
line-height: 1.6;
}
.status-completed {
background-color: #DCFCE7;
color: #15803D;
}
.status-progress {
background-color: #FFF7ED;
color: #C2410C;
}
.status-pending {
background-color: #F3F4F6;
color: #4B5563;
}
/* --------------------------------------------------------------------------
10b. BUTTON GROUP FLEX FIX
Bootstrap 3 btn-group floats children left; our border-radius !important
overrides the group's border-radius resets, which can misplace buttons when
ng-class switches dynamically between btn-primary and btn-default.
Switching the group to inline-flex removes the float dependency entirely.
-------------------------------------------------------------------------- */
.btn-group {
display: inline-flex !important;
flex-wrap: nowrap !important;
vertical-align: middle !important;
}
.btn-group > .btn {
float: none !important;
position: relative !important;
}
/* --------------------------------------------------------------------------
10. AVATAR UTILITY (additive)
-------------------------------------------------------------------------- */
.avatar-circle {
width: 24px;
height: 24px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
color: #ffffff;
background: #0D1B34;
text-transform: uppercase;
}
|