/* ============================================================ DRS BRAND REFRESH — token layer + self-hosted font Direction C (Modern Slate). Branch: feature/site-refresh. Components below reference these tokens; dark mode flows from the same variables (re-declared under body.dark-mode). ============================================================ */ @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/IBMPlexSans-400.woff2') format('woff2')} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/IBMPlexSans-500.woff2') format('woff2')} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/IBMPlexSans-600.woff2') format('woff2')} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/IBMPlexSans-700.woff2') format('woff2')} :root{ --ui-font:'IBM Plex Sans',system-ui,'Segoe UI',Arial,sans-serif; --brand:#2a3c74; --brand-hover:#1f2d57; --secondary:#2f7d90; --secondary-tint:#e7f1f3; --success:#57b84a; --success-tint:#e8f4e3; /* brand green from the logo/display */ --danger:#ce1616; --danger-hover:#a50000; --warn:#b9760a; --warn-tint:#fbeecd; /* Light mode: clean WHITE page; the white→blue gradient lives on the chrome (cards/header/panels via --chrome-grad), not the page background. Brand stays navy/teal. */ --surface:#ffffff; --surface-2:#eef3fb; --text:#1a1e28; --muted:#5a6478; --border:#c4d1e6; --nav:#161d2e; --nav-text:#c3cadd; --field:#f5f8fd; --field-border:#c8d4e8; --brand-tint:#e6e9f3; --grid-header:#2a3c74; --grid-header-text:#ffffff; --row-odd:#ffffff; --row-even:#eef4fc; --row-hover:#dce8f8; --chrome-grad:linear-gradient(180deg,#ffffff 0%,#dbe7f8 100%); --row-selected:#d8def4; --row-selected-text:#15224d; --radius:6px; --shadow:0 1px 2px rgba(16,22,40,.07),0 4px 10px rgba(16,22,40,.07); } body.dark-mode{ --brand:#5b78e0; --brand-hover:#6f88e7; --secondary:#43a7bd; --secondary-tint:#10333b; --success:#52c01b; --success-tint:#16320c; --danger:#e0524f; --danger-hover:#c23b38; --warn:#e0a23a; --warn-tint:#3a2c10; --surface:#121826; --surface-2:#0a0e16; --text:#e7ecf3; --muted:#8b96a8; --border:#243044; --nav:#0b0f18; --nav-text:#aab4c8; --field:#0d1422; --field-border:#26324a; --brand-tint:#16203a; --grid-header:#1c2740; --grid-header-text:#ffffff; --row-odd:#0f1626; --row-even:#121a2b; --row-hover:#1b2740; --row-selected:#243a66; --row-selected-text:#dfe7fb; --shadow:0 2px 8px rgba(0,0,0,.55); } /* base typography — IBM Plex Sans across the app */ html, body { font-family: var(--ui-font); } button, input, select, textarea, table, .btn { font-family: var(--ui-font); } /* Move down content because we have a fixed navbar that is 50px tall */ /*body { padding-top: 50px; padding-bottom: 20px; }*/ /* Wrapping element */ /* Set some basic padding to keep content from hitting the edges */ /*.body-content { padding-left: 15px; padding-right: 15px; }*/ /* Set widths on the form inputs since otherwise they're 100% wide */ /*input, select, textarea { max-width: 280px; }*/ /* Responsive: Portrait tablets and up */ /*@media screen and (min-width: 768px) { .jumbotron { margin-top: 20px; } .body-content { padding: 0; } }*/ /* Move down content because we have a fixed navbar that is 50px tall */ body { padding-top: 50px; padding-bottom: 20px; background-color: var(--surface-2); color: var(--text); } /* ===== LIGHT-MODE "WAVE" CHROME (global) ============================== Silvery blue-grey page lifted from the trade-show display, thin straight tri-color lines under the navbar, and a fixed layered swoop wave behind ALL content. Dark mode keeps its own look (every rule is :not(.dark-mode)). Markup for .lm-lines / .lm-wave lives once in Site.Master. ==========*/ body:not(.dark-mode) { padding-top: 59px; /* 50px navbar + 9px tri-color lines */ background-color: #c4d0df; /* fallback under the gradient */ background-image: radial-gradient(1200px 540px at 88% -8%, rgba(47,140,163,.10), transparent 60%), radial-gradient(1100px 520px at -6% 8%, rgba(42,60,116,.08), transparent 58%), linear-gradient(176deg, #eef2f6 0%, #dbe3ee 42%, #c4d0df 100%); background-attachment: fixed; } /* ----- DARK MODE: same wave chrome, tuned for the deep-navy base ----- */ body.dark-mode { padding-top: 59px; background-image: radial-gradient(1200px 560px at 88% -10%, rgba(47,140,163,.16), transparent 60%), radial-gradient(1100px 540px at -8% 6%, rgba(63,90,160,.20), transparent 58%); background-attachment: fixed; } body.dark-mode .lm-lines { display: block; position: fixed; top: 50px; left: 0; right: 0; height: 9px; z-index: 1029; background: linear-gradient(180deg, #57b84a 0 33.34%, #2f8ca3 33.34% 66.67%, #3f5aa0 66.67% 100%); box-shadow: 0 3px 12px rgba(0,0,0,.55); } body.dark-mode .lm-wave { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: -1; pointer-events: none; } body.dark-mode .lm-wave svg { display: block; width: 100%; height: 100px; } /* lift the navy band so the swoop reads against the near-black background */ body.dark-mode .lm-wave svg path:last-child { fill: #3f5aa0; } body.dark-mode .body-content { padding-bottom: 50px; } /* Copyright as a frosted pill so it stays legible where it overlaps the wave */ .body-content > footer { margin-top: 8px; } .body-content > footer p { display: inline-block; margin: 0; padding: 5px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.5; color: var(--brand); background: rgba(255,255,255,.82); border: 1px solid var(--border); box-shadow: 0 2px 9px rgba(28,42,85,.18); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } body.dark-mode .body-content > footer p { color: #dbe4f7; background: rgba(16,22,36,.78); border-color: rgba(255,255,255,.12); box-shadow: 0 2px 10px rgba(0,0,0,.55); } /* thin straight tri-color lines, pinned just under the navbar */ .lm-lines, .lm-wave { display: none; } body:not(.dark-mode) .lm-lines { display: block; position: fixed; top: 50px; left: 0; right: 0; height: 9px; z-index: 1029; background: linear-gradient(180deg, #57b84a 0 33.34%, #2f8ca3 33.34% 66.67%, #2a3c74 66.67% 100%); box-shadow: 0 2px 8px rgba(28,42,85,.16); } /* fixed layered swoop wave, behind all content (z-index:-1) */ body:not(.dark-mode) .lm-wave { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: -1; pointer-events: none; } body:not(.dark-mode) .lm-wave svg { display: block; width: 100%; height: 100px; } /* TOGGLE: comment out the next line to bring the bottom swoop wave back. */ .lm-wave { display: none !important; } /* tighter bottom: footer tucks down over the top of the wave. vfill.js reserves this same padding so grid pages don't over-scroll. */ body:not(.dark-mode) .body-content { padding-bottom: 50px; } /* cards/panels stay crisp white so they pop on the silvery base */ body:not(.dark-mode) .stats-wrapper, body:not(.dark-mode) .stat-card, body:not(.dark-mode) .kpi, body:not(.dark-mode) .ui-card, body:not(.dark-mode) .login-container, body:not(.dark-mode) .jumbotron, body:not(.dark-mode) .qa, body:not(.dark-mode) .toolbar, body:not(.dark-mode) .page-head { background-color: #ffffff !important; background-image: none !important; } .oporg-sticky-note { background: var(--brand-tint); border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: 8px; box-shadow: none; padding: 12px 15px; font-size: 13px; line-height: 1.5; color: var(--text); font-family: var(--ui-font); position: relative; } .reject-callout { background: linear-gradient(135deg, #fff3cd 0%, #ffe29a 100%); border: 1px solid rgba(220, 53, 69, 0.25); border-left: 4px solid #dc3545; border-radius: 6px; padding: 0.6rem 0.85rem; margin-top: 6px; color: #721c24; font-size: 13.5px; line-height: 1.4; box-shadow: 0 2px 6px rgba(220, 53, 69, 0.08); } .reject-callout strong { color: #a02533; } .reject-callout em { display: block; margin-top: 3px; font-style: italic; color: #8d4a50; font-size: 12px; } body.dark-mode .reject-callout { background: linear-gradient(135deg, #3a1a1d 0%, #241013 100%); border: 1px solid rgba(255, 99, 112, 0.35); border-left: 4px solid #ff6370; color: #ffd6da; box-shadow: 0 2px 6px rgba(255, 99, 112, 0.18); } body.dark-mode .reject-callout strong { color: #ff8892; } body.dark-mode .reject-callout em { color: #e0a8ad; } .note { position: relative; } .note:after { /* Magic Happens Here!!! */ content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; display: block; border-left: 10px solid transparent; border-bottom: 10px solid transparent; border-top: 10px solid #0047AB; } /* */ .btn-compact { padding: 2px 8px; /* tighter padding */ font-size: 12px; /* smaller text */ line-height: 1.1; /* reduce height */ border-radius: 3px; /* slightly sharper corners */ } .reload { font-family: Lucida Sans Unicode; } .text-sm { font-weight: normal; font-size: 1.2rem; line-height: 1.4; } .btn-center { text-align: center; } .ModalPopupBG { background-color: #666699; filter: opacity(); opacity: 0.7; } .info-modal { background: gainsboro; margin: 0 auto; width: auto; position: absolute; z-index: 998; top: 439px; left: 179px; padding: 30px; -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.4); -moz-box-shadow: 0 0 10px rgba(0,0,0,0.4); box-shadow: 0 0 10px rgba(0,0,0,0.4); } .HellowWorldPopup { min-width: 300px; min-height: 150px; background: white; border: solid 2px; border-radius: 10px; position: absolute; top: 50%; left: 50%; padding: 2em; z-index: 101; } .HellowWorldPopupUpload { min-width: 300px; min-height: 150px; background: white; border: solid 2px; border-radius: 10px; padding: 2em; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgb(0, 0, 0); box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgb(0, 0, 0); position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 999999999999; } .ModalPopupWait { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 999999999999; /* Optional: add background overlay */ /* background: rgba(0,0,0,0.5); */ } .ModalPopupWaitDiv { color: Black; font-weight: bolder; background-color: White; padding: 15px; width: 200px; } .HellowWorldPopupInfo { min-width: 300px; min-height: 150px; background: white; border: solid 2px; border-radius: 10px; position: fixed; top: 10%; left: 10%; padding: 2em; z-index: 101; } .center { margin-left: auto; margin-right: auto; } .auto-style1 { width: 216px; } .button-yellow-noflex-pulsate { animation: pulsate 2s ease-out infinite; background-color: gold; font-size: 10px; font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif; color: black; border-radius: 10px; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3); text-align: center; justify-content: center; align-items: center; } .button-red-noflex { background: var(--danger); background-color: var(--danger); font-size: 13px; font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif; color: white; border-radius: 10px; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3); text-align: center; justify-content: center; align-items: center; } .button-red-noflex:hover { background: var(--danger-hover); background-color: var(--danger-hover); color: lime; text-decoration: none; } .button-red-noflex:visited { text-decoration: none; } .button-blue-noflex { background: var(--brand); background-color: var(--brand); font-size: 13px; font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif; color: white; border-radius: 10px; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3); text-align: center; justify-content: center; align-items: center; } .button-blue-noflex:hover { background: var(--brand-hover); background-color: var(--brand-hover); color: lime; text-decoration: none; } .button-blue-noflex:visited { text-decoration: none; } .button-drsblue, .button-drsgreen, .button-steelblue, .button-green, .button-red, .button-yellow, .button-orange, .button-blue, .button-purple, .button-light-purple, .button-black { font-size: 13px; font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif; color: white; border-radius: 10px; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3); text-align: center; display: flex; justify-content: center; align-items: center; } .button-drsblue { background: var(--brand); } .button-drsgreen { background: var(--success); } .button-green { background: var(--success); } .button-yellow { background: yellow; color: black !important; } .button-red { background: var(--danger); } .button-orange { background: rgb(223, 117, 20); } .button-steelblue { background: var(--secondary); } .button-blue { background: var(--brand); background-color: var(--brand); } .button-purple { background: rgb(128, 0, 128); } .button-light-purple { background: rgb(182, 149, 192); } .button-black { background: rgb(0, 0, 0); } .cssPager span { font-size: 20px; font-weight: bold; } .cssPage td { padding: 1px 4px 2px 4px; } .cssPager a { text-decoration: underline; } .box { float: left; width: 50%; } .clearfix::after { content: ""; clear: both; display: table; } /* Wrapping element */ /* Set some basic padding to keep content from hitting the edges */ .body-content { padding-left: 5px; padding-right: 5px; } /* Set widths on the form inputs since otherwise they're 100% wide */ input, select, textarea { /*max-width: 280px;*/ max-width: 600px; } .cssDetailsViewInput { max-width: none !important; width: 100%; } .btn-primary-logout { color: #fff; background-color: #ce1616; border-color: #2e6da4; margin-top: 14px; margin-left: 10px; } .btn-primary-logout:hover { color: #fff; background-color: #a50000; border-color: #204d74; } .btn-primary-cancel { color: #fff; background-color: #ce1616; border-color: #2e6da4; margin-top: 4px; } .btn-primary-cancel:hover { color: #fff; background-color: #a50000; border-color: #204d74; } .milestoneNote { min-width: 150px; } .legendBox { float: left; height: 20px; width: 20px; margin-bottom: 1px; border: 1px solid black; clear: both; } .legendLightPink { background-color: lightpink; } .legendLime { background-color: lime; } /* Set the size of the div element that contains the map */ #map { BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-RIGHT: black 1px solid } .rows:hover { background-color: Yellow; } .lockHead { position: sticky; top: 0; /* Don't forget this, required for the stickiness */ z-index: 99; /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/ -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .justShadow { -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .divRounded { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .circlewhite { width: 30px; height: 30px; line-height: 30px; border-radius: 50%; font-size: 12px; color: #000; text-align: center; background: #FFFFFF; border-style: solid; border-width: thin } .circleblue { width: 30px; height: 30px; line-height: 30px; border-radius: 50%; font-size: 12px; color: #FFF; text-align: center; background: #30a2f8; border-style: solid; border-width: thin; border-color: black } .circlegreen { width: 30px; height: 30px; line-height: 30px; border-radius: 50%; font-size: 12px; color: #000; text-align: center; background: #00FF00; border-style: solid; border-width: thin } .circleyellow { width: 30px; height: 30px; line-height: 30px; border-radius: 50%; font-size: 12px; color: #000; text-align: center; background: #FFFF00; border-style: solid; border-width: thin } /* HEARBEAT */ .heartbeat { position: absolute; display: none; margin: 5px; color: red; right: 0; top: 0; } .circlered { width: 30px; height: 30px; line-height: 30px; border-radius: 50%; font-size: 12px; color: #FFF; text-align: center; background: #FF0000; border-style: solid; border-width: thin; border-color: black } @-webkit-keyframes pulsate { 0% { box-shadow: 0 0 0 black; } 50% { box-shadow: 0 0 17px black; } 100% { box-shadow: 0 0 0 black; } } /* Responsive: Portrait tablets and up */ @media screen and (min-width: 768px) { .jumbotron { margin-top: 10px; } .body-content { padding: 0; } .login-container { background-color: white; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.1); max-width: 400px; margin: 0 auto; margin-top: 20px; } .form-group { margin-bottom: 15px; } /* Button icons: crisp white SVGs from the same family as the modal header icons (replaces the old PNG image-file icons). Background color comes from the brand rule below; here we only set the left icon + padding. */ .btn-with-edit-image,.btn-with-add-image,.btn-with-minus-image, .btn-with-export-image,.btn-with-save-image{ padding:5px 9px 5px 29px!important;background-repeat:no-repeat!important; background-position:8px center!important;background-size:15px 15px!important} .btn-with-edit-image{background-image:url("data:image/svg+xml;utf8,")!important} .btn-with-add-image{background-image:url("data:image/svg+xml;utf8,")!important} .btn-with-minus-image{background-image:url("data:image/svg+xml;utf8,")!important} .btn-with-export-image{background-image:url("data:image/svg+xml;utf8,")!important} .btn-with-save-image{background-image:url("data:image/svg+xml;utf8,")!important} .color-button { width: 25px; height: 25px; border-radius: 50%; /*background-color: #4CAF50; color: white;*/ border: 1px solid black; cursor: pointer; display: flex; justify-content: center; align-items: center; } } .onboard-progress { background: #fff; padding: 8px; border-radius: 3px; } .onboard-progress .progress-item { padding: 8px 6px; border-bottom: 1px solid #eee; display: flex; align-items: center; } .onboard-progress .progress-item:last-child { border-bottom: none; } .onboard-progress .stage-icon { width: 34px; text-align: center; font-size: 18px; margin-right: 8px; } .onboard-progress .stage-title { font-weight: 700; display: block; } .onboard-progress .stage-sub { display: block; font-size: 0.9em; color: #666; } .onboard-progress .completed .stage-icon { color: #28a745; } /* green */ .onboard-progress .pending .stage-icon { color: #6c757d; } /* gray */ /* Dark mode basics */ body.dark-mode .ModalPopupWaitDiv { color: White; font-weight: bolder; background-color: #181818; padding: 15px; width: 200px; } body.dark-mode, body .dark-mode { background-color: #121212 !important; color: #e6e6e6 !important; } /* jumbotron / panels */ body.dark-mode .jumbotron { background-color: #1e1e1e; color: #e6e6e6; border-color: #222; } /* table */ body.dark-mode .table { background-color: #1b1b1b; color: #ddd; border-color: #2a2a2a; } /* navbar */ body.dark-mode .navbar { background-color: #111 !important; border-color: #222; } body.dark-mode .navbar a, body.dark-mode .navbar-brand, body.dark-mode .navbar-nav > li > a { color: #ddd !important; } /* buttons: invert primary look slightly */ body.dark-mode .btn-primary { background-color: #2a6f9e; border-color: #1f5a83; color: #fff; } body.dark-mode .btn-primary:hover { color: #fff; background-color: #286090; border-color: #204d74; } body.dark-mode .btn-primary-cancel { color: #fff; background-color: #ce1616; border-color: #2e6da4; margin-top: 4px; } body.dark-mode .btn-primary-cancel:hover { color: #fff; background-color: #a50000; border-color: #204d74; } body.dark-mode .btn-primary-logout { color: #fff; background-color: #ce1616; border-color: #2e6da4; margin-top: 14px; margin-left: 10px; } body.dark-mode .btn-primary-logout:hover { color: #fff; background-color: #a50000; border-color: #204d74; } /* form controls */ body.dark-mode input, body.dark-mode textarea, body.dark-mode select { background-color: var(--field); color: var(--text); border-color: var(--field-border); } /* labels/messages */ body.dark-mode label, body.dark-mode .lead, body.dark-mode p, body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 { color: #e6e6e6; } /* Dark-mode modal overrides — append after existing dark-mode rules */ body.dark-mode .ModalPopupBG { background-color: rgba(0, 0, 0, 0.75); /* dark overlay */ opacity: 1; /* keep children fully opaque */ filter: none; } body.dark-mode .info-modal, body.dark-mode .HellowWorldPopup, body.dark-mode .HellowWorldPopupUpload, body.dark-mode .HellowWorldPopupInfo, body.dark-mode .ModalPopupWait { background-color: #181818; color: #e6e6e6; border-color: #2f2f2f; -webkit-box-shadow: 0 8px 30px rgba(0,0,0,0.75); -moz-box-shadow: 0 8px 30px rgba(0,0,0,0.75); box-shadow: 0 8px 30px rgba(0,0,0,0.75); } /* Ensure popup borders are visible */ body.dark-mode .HellowWorldPopup, body.dark-mode .HellowWorldPopupUpload, body.dark-mode .HellowWorldPopupInfo, body.dark-mode .info-modal { border: 1px solid #2f2f2f; } /* Keep upload popup inset shadow readable */ body.dark-mode .HellowWorldPopupUpload { -webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,0.02), 0 0 8px rgba(0,0,0,0.8); box-shadow: inset 0 1px 1px rgba(255,255,255,0.02), 0 0 8px rgba(0,0,0,0.8); } /* Text, headings and paragraph color inside popups */ body.dark-mode .info-modal h1, body.dark-mode .info-modal h2, body.dark-mode .info-modal h3, body.dark-mode .HellowWorldPopup h1, body.dark-mode .HellowWorldPopup h2, body.dark-mode .HellowWorldPopup h3, body.dark-mode .HellowWorldPopupInfo h1, body.dark-mode .HellowWorldPopupInfo h2 { color: #ffffff; } body.dark-mode .info-modal p, body.dark-mode .HellowWorldPopup p, body.dark-mode .HellowWorldPopupInfo p { color: #d7d7d7; } /* Inputs and selects inside popups */ body.dark-mode .info-modal input, body.dark-mode .info-modal textarea, body.dark-mode .info-modal select, body.dark-mode .HellowWorldPopup input, body.dark-mode .HellowWorldPopup textarea, body.dark-mode .HellowWorldPopup select { background-color: #222; color: #e6e6e6; border-color: #333; } /* Buttons inside popups — reuse primary style */ body.dark-mode .info-modal .btn-primary, body.dark-mode .HellowWorldPopup .btn-primary, body.dark-mode .HellowWorldPopupUpload .btn-primary, body.dark-mode .HellowWorldPopupInfo .btn-primary { background-color: #2a6f9e; border-color: #1f5a83; color: #fff; } body.dark-mode .info-modal .btn-primary:hover, body.dark-mode .HellowWorldPopup .btn-primary:hover, body.dark-mode .HellowWorldPopupUpload .btn-primary:hover, body.dark-mode .HellowWorldPopupInfo .btn-primary:hover { color: #fff; background-color: #286090; border-color: #204d74; } body.dark-mode .info-modal .btn-primary-cancel, body.dark-mode .HellowWorldPopup .btn-primary-cancel, body.dark-mode .HellowWorldPopupUpload .btn-primary-cancel, body.dark-mode .HellowWorldPopupInfo .btn-primary-cancel, body.dark-mode .ModalPopupWait .btn-primary-cancel { background-color: #ce1616; border-color: #2e6da4; color: #fff; } /* Hover state */ body.dark-mode .info-modal .btn-primary-cancel:hover, body.dark-mode .HellowWorldPopup .btn-primary-cancel:hover, body.dark-mode .HellowWorldPopupUpload .btn-primary-cancel:hover, body.dark-mode .HellowWorldPopupInfo .btn-primary-cancel:hover, body.dark-mode .ModalPopupWait .btn-primary-cancel:hover { background-color: #a50000; border-color: #204d74; } /* Dark-mode tab styles — append after existing dark-mode rules */ /* Bootstrap 3 nav-tabs */ body.dark-mode .nav-tabs { border-bottom: 1px solid #2a2a2a; } body.dark-mode .nav-tabs > li > a { color: #d7d7d7; background-color: transparent; border: 1px solid transparent; border-radius: 4px 4px 0 0; } body.dark-mode .nav-tabs > li > a:hover { background-color: #222; color: #fff; } body.dark-mode .nav-tabs > li.active > a, body.dark-mode .nav-tabs > li.active > a:hover, body.dark-mode .nav-tabs > li.active > a:focus { color: #fff; background-color: #1f1f1f; border: 1px solid #333; border-bottom-color: transparent; /* visually connect active tab to pane */ } /* Bootstrap 4/5 .nav-link */ body.dark-mode .nav-tabs .nav-link, body.dark-mode .nav-pills .nav-link { color: #d7d7d7; background-color: transparent; } body.dark-mode .nav-tabs .nav-link.active, body.dark-mode .nav-pills .nav-link.active, body.dark-mode .nav-link.show { color: #fff; background-color: #1f1f1f; border: 1px solid #333; } /* nav-pills */ body.dark-mode .nav-pills > li > a, body.dark-mode .nav-pills .nav-link { color: #d7d7d7; } body.dark-mode .nav-pills > li.active > a, body.dark-mode .nav-pills .nav-link.active { background-color: #2a6f9e; /* keep same accent used for btn-primary */ color: #fff; } /* Tab content / panes */ body.dark-mode .tab-content, body.dark-mode .tab-pane { background-color: #161616; color: #d7d7d7; border: 1px solid #2a2a2a; padding: 12px 15px; border-radius: 0 4px 4px 4px; } body.dark-mode .ajax__tab_panel, body.dark-mode .ajax__tab_body { background-color: #2E2E2E; } /* ASP.NET AJAX TabContainer (common AJAX Control Toolkit classes) */ body.dark-mode .ajax__tab_header, body.dark-mode .ajax__tab_outer, body.dark-mode .ajax__tab_tab, body.dark-mode .ajax__tab_inner { background-color: #1e1e1e; color: #d7d7d7; border-color: #2e2e2e; } /* jQuery UI tabs */ body.dark-mode .ui-tabs .ui-tabs-nav li a { background: transparent; color: #d7d7d7; } body.dark-mode .ui-tabs .ui-tabs-nav li.ui-state-active a { background: #1f1f1f; color: #fff; border-color: #333; } body.dark-mode .ui-tabs .ui-tabs-panel { background: #161616; color: #d7d7d7; border: 1px solid #2a2a2a; } /* Generic fallback for custom tab markup */ body.dark-mode .tabs, body.dark-mode .tabs-header, body.dark-mode .tab, body.dark-mode .tab-link, body.dark-mode .tabs .tab-link { background-color: #121212; color: #d7d7d7; } body.dark-mode .tabs .tab-link.active, body.dark-mode .tab.active, body.dark-mode .tab-link.active { background-color: #1f1f1f; color: #fff; border: 1px solid #333; } /* Hover/focus polish */ body.dark-mode .nav-tabs > li > a:focus, body.dark-mode .nav-tabs > li > a:hover, body.dark-mode .nav-pills > li > a:focus, body.dark-mode .nav-pills > li > a:hover, body.dark-mode .nav-link:focus, body.dark-mode .nav-link:hover { background-color: #222; color: #fff; } /* Ensure tabbable links remain visible (increase specificity if needed) */ body.dark-mode a.nav-link, body.dark-mode a.nav-tabs a, body.dark-mode a.nav-pills a { color: inherit; } /* Strong dark-mode tab overrides (append at end of file) */ body.dark-mode .nav.nav-tabs > li > a, body.dark-mode .nav-tabs > li > a, body.dark-mode .nav-tabs .nav-link { color: #d7d7d7 !important; background-color: transparent !important; border-color: transparent !important; } body.dark-mode .nav.nav-tabs > li.active > a, body.dark-mode .nav-tabs > li.active > a, body.dark-mode .nav-tabs .nav-link.active { color: #fff !important; background-color: #1f1f1f !important; border: 1px solid #333 !important; border-bottom-color: transparent !important; } body.dark-mode .nav-pills .nav-link, body.dark-mode .nav-pills > li > a { color: #d7d7d7 !important; } body.dark-mode .nav-pills .nav-link.active, body.dark-mode .nav-pills > li.active > a { background-color: #2a6f9e !important; color: #fff !important; } body.dark-mode .tab-content, body.dark-mode .tab-pane { background-color: #161616 !important; color: #d7d7d7 !important; border: 1px solid #2a2a2a !important; padding: 12px 15px !important; } /* ASP.NET AJAX TabContainer / table-based tabs */ body.dark-mode .ajax__tab_outer .ajax__tab_header, body.dark-mode .ajax__tab_outer .ajax__tab_header td, body.dark-mode .ajax__tab_outer .ajax__tab_tab { background: #2e2e2e !important; color: #92cdff !important; border-color: #2a2a2a !important; } /* jQuery UI fallback */ body.dark-mode .ui-tabs .ui-tabs-nav li a { color: #d7d7d7 !important; } body.dark-mode .ui-tabs .ui-tabs-nav li.ui-state-active a { background: #1f1f1f !important; color: #fff !important; } body.dark-mode .login-container { background-color: #1f1f1f !important; color: #fff !important; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.1); max-width: 400px; margin: 0 auto; margin-top: 20px; } /* Dark-mode: brighter glow for .justShadow (replace or append at end of file) */ body.dark-mode .justShadow { /* core depth + a brighter cool glow and faint rim */ -webkit-box-shadow: 0 12px 30px rgba(0,0,0,0.68), /* deeper core shadow */ 0 0 12px rgba(255,255,255,0.03), /* faint rim for separation */ 0 0 28px rgba(79,176,255,0.20), /* bright inner blue glow */ 0 0 56px rgba(79,176,255,0.12); /* softer outer glow */ -moz-box-shadow: 0 12px 30px rgba(0,0,0,0.68), 0 0 12px rgba(255,255,255,0.03), 0 0 28px rgba(79,176,255,0.20), 0 0 56px rgba(79,176,255,0.12); box-shadow: 0 12px 30px rgba(0,0,0,0.68), 0 0 12px rgba(255,255,255,0.03), 0 0 28px rgba(79,176,255,0.20), 0 0 56px rgba(79,176,255,0.12); transition: box-shadow 220ms ease, transform 220ms ease; } /* Dark-mode table.gridview overrides --------------------------------- */ /* Target your GridView tables via the CssClass "gridview" */ table.gridview, table.gridview tbody, table.gridview thead, table.gridview tbody tr { border-collapse: collapse; } /* headers */ body.dark-mode table.gridview thead th { background-color: #222; color: #fff; border-color: #333; } /* cells: use per-row CSS var if set, otherwise fallback to a dark default. Do NOT use !important here so inline styles and explicit classes win. */ body.dark-mode table.gridview tbody tr td { background-color: var(--row-bg, var(--row-even)); color: var(--text); border-color: var(--border); } /* Dark-mode GridView: stronger zebra contrast (apply on TR) */ body.dark-mode table.gridview tbody tr:nth-child(odd) { background-color: var(--row-odd); } body.dark-mode table.gridview tbody tr:nth-child(even) { background-color: var(--row-even); } /* Ensure TDs inherit the row background instead of overriding it */ body.dark-mode table.gridview tbody tr:not(.cssPager) td { background-color: transparent; /* inherit from TR */ } /* Keep selected row clearly visible */ body.dark-mode table.gridview tbody tr.selected-row td { background-color: var(--row-selected) !important; color: var(--row-selected-text); } /* Optional: hover, but don’t overpower selected */ body.dark-mode table.gridview tbody tr:hover:not(.cssPager) td { background-color: var(--row-hover); } /* Light-mode GridView: stronger zebra contrast */ body:not(.dark-mode) table.gridview tbody tr:nth-child(odd) { background-color: var(--row-odd); } body:not(.dark-mode) table.gridview tbody tr:nth-child(even) { background-color: var(--row-even); } /* Cells inherit row background and keep clear borders/text */ body:not(.dark-mode) table.gridview tbody tr td { background-color: transparent; color: var(--text); border-color: var(--border); } /* Hover: slightly stronger tint to stand out */ body:not(.dark-mode) table.gridview tbody tr:hover td { background-color: var(--row-hover); } /* Selected row: higher contrast highlight */ body:not(.dark-mode) table.gridview tbody tr.selected-row td { background-color: var(--row-selected) !important; color: var(--row-selected-text); } /* hover for rows that did not specify inline background */ body.dark-mode table.gridview tbody tr:not([style]):hover td { background-color: rgba(255,255,255,0.03); } body.dark-mode li > a { color: #29a5fb !important; } /* Select column is first column */ body.dark-mode table.gridview tbody tr td:first-child a, body.dark-mode table.gridview tbody tr td:nth-child(1) a { color: #2a6f9e !important; } /*Hover+Selected Tab*/ /* hover on tabs to preview active state */ body.dark-mode .ajax__tab_outer .ajax__tab_tab:hover { background-color: #1f1f1f; color: #d7d7d7 !important; transform: translateY(-2px); } body.dark-mode .ajax__tab_active .ajax__tab_inner .ajax__tab_tab { color: #fff !important; background-color: var(--brand) !important; font-weight: 700; } /* Onboarding Progress */ /* Dark-mode overrides for onboard progress */ body.dark-mode .onboard-progress { background: linear-gradient(180deg, #0f1112 0%, #161617 100%); color: #e6e6e6; border: 1px solid rgba(255,255,255,0.04); box-shadow: 0 8px 22px rgba(0,0,0,0.6); padding: 6px; } /* Items: tighter spacing for compact appearance */ body.dark-mode .onboard-progress .progress-item { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.03); display: flex; align-items: center; transition: background-color 140ms ease, transform 140ms ease; } body.dark-mode .onboard-progress .progress-item:last-child { border-bottom: none; } /* Circle-style icon with subtle surface */ body.dark-mode .onboard-progress .stage-icon { width: 34px; height: 34px; line-height: 34px; text-align: center; font-size: 16px; margin-right: 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,0.02); color: #9aa4ad; /* default muted */ box-shadow: inset 0 1px 0 rgba(255,255,255,0.02); transition: all 160ms ease; } /* Titles and subtitles */ body.dark-mode .onboard-progress .stage-title { font-weight: 700; color: #e6e6e6; display: block; } body.dark-mode .onboard-progress .stage-sub { display: block; font-size: 0.88em; color: #9aa4ad; } /* Completed: bright, slightly glowing green */ body.dark-mode .onboard-progress .completed .stage-icon { color: #2fe08a; background: linear-gradient(180deg, rgba(47,224,138,0.13), rgba(47,224,138,0.05)); box-shadow: 0 6px 18px rgba(47,224,138,0.06); } /* Pending: muted, low-contrast */ body.dark-mode .onboard-progress .pending .stage-icon { color: #9aa4ad; background: rgba(255,255,255,0.015); } /* Hover / focus polish */ body.dark-mode .onboard-progress .progress-item:hover { background-color: rgba(255,255,255,0.02); transform: translateY(-1px); } /* Keyboard focus fallback (if a focusable control exists inside the item) */ body.dark-mode .onboard-progress .progress-item:focus-within { outline: 2px solid rgba(42,111,158,0.22); outline-offset: 2px; } /* Dark-mode sticky note now flows from tokens (subtle, no blue gradient); only the background needs a nudge for contrast on dark. */ body.dark-mode .oporg-sticky-note { background: var(--surface-2); } body.dark-mode .button-yellow-noflex-pulsate { /* slightly brighten the button base for better contrast in dark mode */ background: linear-gradient(180deg, #ffd44d 0%, #ffdd69 100%); background-color: gold; color: #111; animation: pulsate-dark 1.6s ease-in-out infinite; position: relative; z-index: 3; font-size: 10px; font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif; color: black; border-radius: 10px; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3); text-align: center; justify-content: center; align-items: center; } /* Keyframes for dark theme — bright, high-contrast multi-layer glow so it reads on dark backgrounds */ @keyframes pulsate-dark { 0% { box-shadow: 0 0 0 0 rgba(255, 235, 140, 0), 0 0 0 rgba(255, 160, 0, 0); transform: scale(1); } 40% { box-shadow: 0 0 12px 4px rgba(255, 235, 140, 0.98), /* tight bright rim */ 0 0 32px 10px rgba(255, 160, 0, 0.40); /* soft warm outer glow */ transform: scale(1.035); } 100% { box-shadow: 0 0 0 0 rgba(255, 235, 140, 0), 0 0 0 rgba(255, 160, 0, 0); transform: scale(1); } } /* Ultra modern blue gradient header style (dark-mode only) */ body.dark-mode .button-blue.lockHead { background: linear-gradient(135deg,#0a1b2b 0%, #0d3558 22%, #0f4e86 45%, #106bb7 70%, #1e90ff 100%); background-size: 240% 240%; animation: drsBlueSweep 14s ease-in-out infinite; color: #e6f4ff; border: 1px solid #1273dc; box-shadow: 0 6px 18px rgba(0,0,0,0.7), inset 0 0 14px rgba(255,255,255,0.05), 0 0 28px rgba(30,144,255,0.25); transition: box-shadow .4s, transform .35s; } body.dark-mode .button-blue.lockHead h1, body.dark-mode .button-blue.lockHead h2, body.dark-mode .button-blue.lockHead h3, body.dark-mode .button-blue.lockHead h4, body.dark-mode .button-blue.lockHead h5, body.dark-mode .button-blue.lockHead h6 { margin: 0; font-weight: 600; letter-spacing: .6px; /* remove gradient text effect */ background: none; -webkit-background-clip: initial; -webkit-text-fill-color: initial; color: #e6f4ff; /* plain readable color */ line-height: 1.25; } body.dark-mode .button-blue.lockHead:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,0.75), 0 0 36px rgba(30,144,255,0.35); } body.dark-mode .button-blue.lockHead:active { transform: translateY(0); box-shadow: 0 4px 14px rgba(0,0,0,0.65), 0 0 20px rgba(30,144,255,0.25); } @keyframes drsBlueSweep { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } body.dark-mode .button-blue.lockHead { /* adjust vertical size: slightly shorter than previous (was 10px/44px) */ padding: 6px 12px; min-height: 34px; display: flex; align-items: center; } /* keep heading line-height consistent */ body.dark-mode .button-blue.lockHead h1, body.dark-mode .button-blue.lockHead h2, body.dark-mode .button-blue.lockHead h3, body.dark-mode .button-blue.lockHead h4, body.dark-mode .button-blue.lockHead h5, body.dark-mode .button-blue.lockHead h6 { line-height: 1.2; } /* Light-mode enhanced gradient header style to match dark-mode styling */ .button-blue.lockHead { background: linear-gradient(135deg,#0a1b2b 0%, #0d3558 22%, #0f4e86 45%, #106bb7 70%, #1e90ff 100%); background-size: 240% 240%; animation: drsBlueSweep 14s ease-in-out infinite; color: #0d1e29; /* darker text for light context inside header if plain text elements */ border: 1px solid #1273dc; box-shadow: 0 6px 18px rgba(0,0,0,0.35), inset 0 0 14px rgba(255,255,255,0.25), 0 0 18px rgba(30,144,255,0.25); transition: box-shadow .4s, transform .35s; padding: 6px 12px; /* match adjusted height */ min-height: 34px; display: flex; align-items: center; } .button-blue.lockHead h1, .button-blue.lockHead h2, .button-blue.lockHead h3, .button-blue.lockHead h4, .button-blue.lockHead h5, .button-blue.lockHead h6 { margin: 0; font-weight: 600; letter-spacing: .6px; background: none; -webkit-background-clip: initial; -webkit-text-fill-color: initial; color: #e6f4ff; /* keep same readable heading color */ line-height: 1.2; } .button-blue.lockHead:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,0.45), 0 0 26px rgba(30,144,255,0.35); } .button-blue.lockHead:active { transform: translateY(0); box-shadow: 0 4px 14px rgba(0,0,0,0.30), 0 0 18px rgba(30,144,255,0.25); } /* Disable animation on gradient headers (light & dark) */ body.dark-mode .button-blue.lockHead, .button-blue.lockHead { animation: none !important; background-size: 100% 100%; /* static background */ } /* Modern stats cards */ .stats-wrapper { background: linear-gradient(135deg,#ffffff 0%, #e6f3ff 40%, #d4e9ff 75%, #c5e1ff 100%); border: 1px solid #a8cce6; border-radius: 14px; padding: 8px 12px 8px; margin-bottom: 20px; position: relative; overflow: hidden; } .grid-section-wrapper { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; box-shadow: var(--shadow); padding: 0; margin-bottom: 14px; position: relative; overflow: hidden; margin-right: 5px; margin-left: 5px; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 14px; } .stat-card { background: linear-gradient(180deg,#deeeff 0%, #e6f2ff 35%, #dfe9ff 70%, #d9e3f5 100%); border: 1px solid #98bfe0; border-radius: 12px; padding: 6px 8px 6px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 72px; position: relative; box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06); transition: box-shadow .25s ease, transform .25s ease; } .stat-card:before { content: ""; position: absolute; inset: 0; border-radius: 12px; pointer-events: none; background: radial-gradient(circle at 30% 20%, rgba(43,58,140,0.12), transparent 65%); opacity: .7; } .stat-card:hover { box-shadow: 0 8px 20px rgba(43,58,140,0.14); transform: translateY(-3px); } .stat-label { font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: #1e5a99; margin-bottom: 4px; position: relative; z-index: 1; } .stat-value { font-size: 32px; font-weight: 700; line-height: 1; color: #0a3f7d; text-shadow: 0 1px 0 rgba(255,255,255,0.6); position: relative; z-index: 1; } @media (max-width: 600px) { .stat-value { font-size: 26px; } } /* Dark mode stats */ body.dark-mode .stats-wrapper { background: #12191f; border: 1px solid #1f2a33; } body.dark-mode .grid-section-wrapper { background: #12191f; border: 1px solid #1f2a33; } body.dark-mode .stat-card { background: linear-gradient(180deg,#1a242c 0%, #162026 100%); border: 1px solid #23323b; box-shadow: 0 2px 6px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.03); min-height: 72px; padding: 6px 8px 6px; border-radius: 12px; } body.dark-mode .stat-card:before { background: radial-gradient(circle at 30% 20%, rgba(91,120,224,0.18), transparent 60%); opacity: .5; border-radius: 12px; } body.dark-mode .stat-card:hover { box-shadow: 0 10px 28px rgba(0,0,0,0.65), 0 0 0 1px rgba(79,176,255,0.25); } body.dark-mode .stat-label { color: #8aa6bb; } body.dark-mode .stat-value { color: #e6f4ff; text-shadow: 0 1px 0 rgba(0,0,0,0.6); } /* Grid section wrapper for col-md-6 spacing */ .grid-section-wrapper { margin-right: 5px; margin-left: 5px; } .col-md-6.grid-section-wrapper { padding-left: 10px; padding-right: 10px; } /* Adjust row containing grid-section-wrapper to handle margins */ .row > .col-md-6.grid-section-wrapper { width: calc(50% - 10px); } /* Mobile/Tablet responsive: restore full width on smaller screens */ @media (max-width: 991px) { .row > .col-md-6.grid-section-wrapper { width: 100%; margin-right: 0; margin-left: 0; padding-left: 15px; padding-right: 15px; } } /* Checkbox Styling - Light Mode (all checkboxes) */ input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 15px; height: 15px; border: 1px solid #337ab7; border-radius: 4px; background-color: #fff; cursor: pointer; position: relative; vertical-align: middle; transition: all 0.15s ease-in-out; } input[type="checkbox"]:checked { background-color: #337ab7; border-color: #337ab7; } input[type="checkbox"]:checked::after { content: '\2713'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 14px; font-weight: bold; } input[type="checkbox"]:hover { border-color: #286090; box-shadow: 0 0 4px rgba(51, 122, 183, 0.4); } input[type="checkbox"]:disabled { opacity: 0.6; cursor: not-allowed; } /* Checkbox Styling - Dark Mode (all checkboxes) */ body.dark-mode input[type="checkbox"] { border: 1px solid #4fb0ff; background-color: #222; } body.dark-mode input[type="checkbox"]:checked { background-color: #2a6f9e; border-color: #4fb0ff; } body.dark-mode input[type="checkbox"]:checked::after { color: #fff; } body.dark-mode input[type="checkbox"]:hover { border-color: #7cc4ff; box-shadow: 0 0 6px rgba(79, 176, 255, 0.5); } /* ============================================================ BRAND REFRESH — component layer (Direction C) Tokens drive both light & dark. INTENTIONALLY no !important on grid cell/row backgrounds or label text, so data-driven code-behind styling (expiry Red/Yellow cells, status labels) still wins. No layout/markup/responsive changes here. ============================================================ */ /* --- Navbar (recolor only; Bootstrap collapse/layout untouched) --- */ .navbar-inverse{background-color:var(--nav)!important;border-color:transparent!important} .navbar-inverse .navbar-brand{color:#fff!important;font-weight:600} .navbar-inverse .navbar-nav>li>a{color:var(--nav-text)!important} .navbar-inverse .navbar-nav>li>a:hover,.navbar-inverse .navbar-nav>li>a:focus, .navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.active>a:hover{ color:#fff!important;background-color:rgba(255,255,255,.07)!important} .navbar-inverse .navbar-toggle{border-color:rgba(255,255,255,.28)!important} .navbar-inverse .navbar-toggle .icon-bar{background-color:#fff!important} .navbar-inverse .navbar-toggle:hover,.navbar-inverse .navbar-toggle:focus{background-color:rgba(255,255,255,.10)!important} /* --- Buttons --- */ .btn{border-radius:var(--radius)} .btn-primary,body.dark-mode .btn-primary{background-color:var(--brand)!important;border-color:var(--brand)!important;color:#fff!important} .btn-primary:hover,.btn-primary:focus,.btn-primary:active,body.dark-mode .btn-primary:hover{ background-color:var(--brand-hover)!important;border-color:var(--brand-hover)!important;color:#fff!important} .btn-primary-cancel,.btn-primary-logout, body.dark-mode .btn-primary-cancel,body.dark-mode .btn-primary-logout{ background-color:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important} .btn-primary-cancel:hover,.btn-primary-logout:hover, body.dark-mode .btn-primary-cancel:hover,body.dark-mode .btn-primary-logout:hover{ background-color:var(--danger-hover)!important;border-color:var(--danger-hover)!important;color:#fff!important} .btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px} /* --- Form fields (dark handled by retokened rule above) --- */ input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=image]), textarea, select, .form-control{ background-color:var(--field);color:var(--text); border:1px solid var(--field-border);border-radius:var(--radius)} input:not([type=checkbox]):not([type=radio]):focus,textarea:focus,select:focus,.form-control:focus{ border-color:var(--brand);outline:none;box-shadow:0 0 0 3px var(--brand-tint)} /* --- Card surfaces --- */ .jumbotron{background-color:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);color:var(--text)} .login-container{background-color:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);color:var(--text)} /* --- Login form: centered, aligned, responsive --- */ .login-container table{margin:0 auto;border-collapse:separate;border-spacing:0 10px} .login-container table td{vertical-align:middle} .login-container table tr td:first-child{text-align:right;padding-right:10px;white-space:nowrap;font-weight:600;color:var(--muted)} .login-container input:not([type=checkbox]){width:200px;max-width:100%;height:38px;padding:7px 11px;box-sizing:border-box;font-size:14px} /* --- Stat cards --- */ .stats-wrapper{background:var(--surface)!important;border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow)} .stat-card,body.dark-mode .stat-card{background:var(--surface)!important;border:1px solid var(--border)!important;border-radius:8px;box-shadow:none!important} .stat-card .stat-label,body.dark-mode .stat-card .stat-label{color:var(--muted)!important} .stat-card .stat-value,body.dark-mode .stat-card .stat-value{color:var(--brand)!important} /* --- Modals / popups --- */ .HellowWorldPopup,.HellowWorldPopupUpload,.HellowWorldPopupInfo,.info-modal, body.dark-mode .HellowWorldPopup,body.dark-mode .HellowWorldPopupUpload,body.dark-mode .HellowWorldPopupInfo{ background-color:var(--surface)!important;color:var(--text)!important;border:1px solid var(--border)!important;border-radius:10px} .ModalPopupBG,body.dark-mode .ModalPopupBG{background-color:rgba(8,12,20,.55)!important} /* --- GridView header: brand navy. NOTE: ASP.NET GridView does NOT emit , so the header cells are plain (often inside the browser-inserted ). Target th directly, not thead th. The inline HeaderStyle BackColor="#006699" is beaten with !important. Headers are not data-driven, so forcing color here is safe. --- */ table.gridview th, table.gridview thead th{ background-color:var(--grid-header)!important;color:var(--grid-header-text)!important;border:none!important; font-size:12px!important;font-weight:600!important;letter-spacing:.02em;padding:6px 12px!important;text-align:left} /* Kill the GridView's white BackColor + outer #CCCCCC border so no light sliver shows past the header cells / at the table edge. */ table.gridview{background-color:var(--surface)!important;border:none!important} /* --- Links --- */ a{color:var(--brand)} a:hover,a:focus{color:var(--brand-hover)} /* --- Icon buttons (keep their bg-image; recolor only) --- */ .btn-with-edit-image,.btn-with-add-image,.btn-with-minus-image, .btn-with-export-image,.btn-with-save-image{background-color:var(--brand)!important} /* --- Checkboxes (tokens drive both modes) --- */ input[type="checkbox"]:checked{background-color:var(--brand)!important;border-color:var(--brand)!important} input[type="checkbox"]:hover{border-color:var(--brand)!important} /* Native date/time picker icon: the default glyph is dark and vanishes on the dark field background — invert it in dark mode so it's visible. */ body.dark-mode input[type="date"]::-webkit-calendar-picker-indicator, body.dark-mode input[type="time"]::-webkit-calendar-picker-indicator, body.dark-mode input[type="datetime-local"]::-webkit-calendar-picker-indicator, body.dark-mode input[type="month"]::-webkit-calendar-picker-indicator, body.dark-mode input[type="week"]::-webkit-calendar-picker-indicator{filter:invert(1) brightness(1.7);cursor:pointer} /* --- Theme-toggle button: navbar is dark navy in BOTH modes, so keep it light --- */ .theme-toggle-btn,body:not(.dark-mode) .theme-toggle-btn{color:#fff!important;border-color:rgba(255,255,255,.28)!important} .theme-toggle-btn:hover{background:rgba(255,255,255,.12)!important} /* ============================================================ BRAND REFRESH — Phase 2 layout components (Direction C) Additive, token-driven, used by the revamped Dashboard + search pages. New class names, so other pages are unaffected. ============================================================ */ /* Page header */ .page-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:10px; margin:2px 0 12px;padding-bottom:10px;border-bottom:1px solid var(--border)} .page-head .ph-title{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:700;letter-spacing:-.01em;color:var(--text)} .page-head .ph-title .ph-bar{width:4px;height:21px;border-radius:3px;background:var(--brand);display:inline-block} .page-head .ph-sub{font-size:12.5px;color:var(--muted);margin:2px 0 0 14px} .page-head .ph-actions{display:flex;gap:8px;align-items:center} /* KPI cards */ .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px} .kpi{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--border); border-radius:8px;padding:9px 14px;box-shadow:var(--shadow)} .kpi::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent,var(--brand))} .kpi .kpi-ico{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center; font-size:13px;margin-bottom:3px;background:color-mix(in srgb,var(--accent,var(--brand)) 16%,var(--surface))} .kpi .kpi-label{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)} .kpi .kpi-value{font-size:22px;font-weight:700;line-height:1.05;margin-top:1px;color:var(--accent,var(--brand))} .kpi.k1{--accent:var(--brand)} .kpi.k2{--accent:var(--secondary)} .kpi.k3{--accent:var(--success)} .kpi.k4{--accent:var(--warn)} /* Quick-action tiles */ .quick{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px} .quick .qa{flex:1 1 200px} .qa-logo{position:relative;flex:0 0 220px;align-self:stretch;background:#fff;display:flex;align-items:center;justify-content:center;padding:10px;border-radius:8px;border:1px solid var(--border);min-height:88px} .qa-logo img{max-width:100%;max-height:58px} .qa-logo .dash-cog{position:absolute;top:6px;right:6px} .grid-section-wrapper h4 .gs-count{margin-left:8px;background:var(--brand-tint);color:var(--brand);font-size:11px;font-weight:700;padding:1px 8px;border-radius:20px} .grid-section-wrapper h4 .gs-meta{margin-left:auto;font-weight:400;font-size:11.5px;color:var(--muted)} .qa{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text); background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:11px 13px;box-shadow:var(--shadow); transition:border-color .2s,transform .12s,box-shadow .2s} .qa:hover{border-color:color-mix(in srgb,var(--accent,var(--brand)) 40%,var(--border));transform:translateY(-2px);text-decoration:none;color:var(--text)} .qa .qa-ico{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center; font-size:17px;background:color-mix(in srgb,var(--accent,var(--brand)) 14%,var(--surface))} .qa .qa-title{font-weight:600;font-size:13.5px} .qa .qa-sub{font-size:11.5px;color:var(--muted)} .qa.q1{--accent:var(--brand)} .qa.q2{--accent:var(--secondary)} .qa.q3{--accent:#9aa3b2} .qa.qa-disabled{opacity:.55;pointer-events:none} /* Generic card + section header */ .ui-card{background:var(--surface);border:1px solid var(--border);border-radius:9px;box-shadow:var(--shadow);overflow:hidden} .ui-card .card-head{display:flex;align-items:center;gap:9px;padding:9px 13px;border-bottom:1px solid var(--border)} .ui-card .card-head .hb{width:3px;height:15px;border-radius:2px;background:var(--brand)} .ui-card .card-head .ht{font-weight:600;font-size:13.5px;color:var(--text)} .ui-card .card-head .cnt{background:var(--brand-tint);color:var(--brand);font-size:11px;font-weight:700;padding:1px 8px;border-radius:20px} .ui-card .card-head .meta{margin-left:auto;font-size:11.5px;color:var(--muted)} .ui-card .card-body{padding:0} /* Details card: clean key/value table (replaces the old .table-bordered look) */ .detail-card .kv-body{padding:4px 14px 11px} .kv-table{width:100%;border-collapse:collapse;font-size:13px} .kv-table>tbody>tr>th{text-align:left;color:var(--muted);font-weight:600;font-size:11.5px;text-transform:uppercase; letter-spacing:.02em;padding:7px 10px 7px 0;border-bottom:1px solid var(--border);vertical-align:middle;white-space:nowrap} .kv-table>tbody>tr>td{padding:7px 14px 7px 0;border-bottom:1px solid var(--border);font-weight:500;vertical-align:middle} .kv-table>tbody>tr:last-child>th,.kv-table>tbody>tr:last-child>td{border-bottom:none} .kv-table table{border:none} /* inner onboarding status mini-table */ .kv-table table td{border:none!important;padding:0 6px 0 0!important} /* Sub-group header inside a field table (e.g. "Emergency Contact"): a clear tinted banner with a brand left-accent, so the grouped fields read as a unit (and can drop the repeated word). box-shadow fills the cell background so it survives the modal's transparent-cell overrides. */ .field-group{color:var(--brand)!important;font-weight:700!important;font-size:11.5px!important; text-transform:uppercase;letter-spacing:.05em;padding:8px 12px!important;border:none!important; box-shadow:inset 0 0 0 100px var(--brand-tint),inset 4px 0 0 var(--brand)!important} /* Rows belonging to that group (class="fg-row"): tinted block with a continuous brand left-accent so the banner + its fields read as one boxed sub-card. The box-shadow tint fill survives the modal's transparent-cell overrides. */ .fg-row>th,.fg-row>td{box-shadow:inset 0 0 0 100px color-mix(in srgb,var(--brand) 7%,var(--surface))!important;border-color:transparent!important} .fg-row>th:first-child,.fg-row>td:first-child{box-shadow:inset 0 0 0 100px color-mix(in srgb,var(--brand) 7%,var(--surface)),inset 4px 0 0 var(--brand)!important} .fg-row:last-of-type>th,.fg-row:last-of-type>td{box-shadow:inset 0 0 0 100px color-mix(in srgb,var(--brand) 7%,var(--surface)),inset 0 -2px 0 color-mix(in srgb,var(--brand) 22%,var(--border))!important} .fg-row:last-of-type>th:first-child,.fg-row:last-of-type>td:first-child{box-shadow:inset 0 0 0 100px color-mix(in srgb,var(--brand) 7%,var(--surface)),inset 4px 0 0 var(--brand),inset 0 -2px 0 color-mix(in srgb,var(--brand) 22%,var(--border))!important} /* Padding for a kv-table that sits directly in a scroll box (no card body). */ .kv-pad{padding:2px 14px} /* Detail tab revamp: responsive grid of section cards (Additional Details). Cards reflow from multi-column to single column as the tab narrows. */ /* Additional Details: details cards on the left, a standalone aside (Travel / Preferred Airlines + its grid) on the right so it sits beside the details on wide screens and its grid scrolls in place instead of overflowing the flow. */ .addl-layout{display:flex;gap:14px;align-items:flex-start} .addl-main{flex:1 1 auto;min-width:0} .addl-aside{flex:0 0 380px;max-width:380px} @media (max-width:900px){.addl-layout{flex-direction:column}.addl-aside{flex:1 1 auto;max-width:none;width:100%}} .detail-sections{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;align-items:start} .detail-sections .span2{grid-column:span 2} @media (max-width:680px){.detail-sections .span2{grid-column:auto}} /* Inline editor row inside a section card (e.g. add a preferred airline). */ .ed-row{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin:12px 0 10px} .ed-row .fld{flex:1 1 140px} .ed-row .fld>label{display:block;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:3px} .ed-row select,.ed-row input[type="text"],.ed-row .form-control{width:100%!important;height:32px!important;box-sizing:border-box!important; padding:5px 9px!important;background:var(--field)!important;color:var(--text)!important;border:1px solid var(--field-border)!important; border-radius:6px!important;font:500 13px var(--ui-font)!important;margin:0!important} .ed-row select{-webkit-appearance:none!important;appearance:none!important;cursor:pointer;padding-right:28px!important; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%)!important; background-position:calc(100% - 15px) 13px,calc(100% - 10px) 13px!important;background-size:5px 5px,5px 5px!important;background-repeat:no-repeat!important} /* 2-up panel grid */ .panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} /* Filter toolbar */ .toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:11px;background:var(--surface); border:1px solid var(--border);border-radius:8px;padding:12px;box-shadow:var(--shadow);margin-bottom:12px} .toolbar .fld{display:flex;flex-direction:column;gap:4px} .toolbar .fld label{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em} .toolbar .fld input,.toolbar .fld select,.toolbar .fld .form-control{height:34px!important;box-sizing:border-box;padding:5px 9px;font-size:13px} .toolbar .chk{display:flex;align-items:center;gap:7px;font-size:12.5px;padding-bottom:7px} .toolbar .tb-actions{margin-left:auto;display:flex;gap:8px;align-items:flex-end} /* Status badge */ .badge-status{display:inline-block;padding:3px 12px;border-radius:999px;font-size:12px;font-weight:700;line-height:1.5; letter-spacing:.02em;color:#fff!important;text-shadow:0 1px 1px rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.22);white-space:nowrap} .badge-status.is-ok{background:var(--success);box-shadow:0 1px 2px rgba(0,0,0,.18),0 0 11px color-mix(in srgb,var(--success) 65%,transparent)} .badge-status.is-soon{background:var(--warn);box-shadow:0 1px 2px rgba(0,0,0,.18),0 0 11px color-mix(in srgb,var(--warn) 65%,transparent)} .badge-status.is-exp{background:var(--danger);box-shadow:0 1px 2px rgba(0,0,0,.18),0 0 12px color-mix(in srgb,var(--danger) 70%,transparent)} .badge-status.is-muted{background:var(--muted);box-shadow:0 1px 2px rgba(0,0,0,.18),0 0 9px color-mix(in srgb,var(--muted) 50%,transparent)} /* Center any table cell whose content is a status pill (grids, details, modals). */ td:has(> .badge-status),th:has(> .badge-status){text-align:center!important} /* Back/Home buttons: a clean white left-arrow icon in place of the old « glyph */ .btn-back{padding-left:30px!important;background-repeat:no-repeat!important;background-position:9px center!important;background-size:14px 14px!important; background-image:url("data:image/svg+xml;utf8,")} /* --- Public About / Contact pages --- */ .pub-wrap{max-width:1080px;margin:0 auto} .contact-hero{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:16px 20px} .contact-hero .ch-logo{height:50px;background:#fff;border-radius:8px;padding:6px 10px} .contact-hero .ch-org{font-size:20px;font-weight:700;color:var(--text)} .contact-hero address{margin:4px 0 0;font-style:normal;color:var(--muted);font-size:13.5px;line-height:1.7} .contact-hero address a{color:var(--brand);font-weight:600;text-decoration:none} .people-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:16px} .person{display:flex;gap:13px;align-items:flex-start;padding:15px 16px} .person .avatar{flex:0 0 46px;width:46px;height:46px;border-radius:50%;overflow:hidden; background-color:var(--accent,var(--brand));box-shadow:0 2px 6px color-mix(in srgb,var(--accent,var(--brand)) 45%,transparent); background-repeat:no-repeat;background-position:center 7px;background-size:34px 34px; background-image:url("data:image/svg+xml;utf8,")} .person .avatar img{width:100%;height:100%;object-fit:cover;display:block} /* drop a photo in later */ .person .p-body{min-width:0} .person .pname{font-weight:700;font-size:15px;color:var(--text);line-height:1.2} .person .ptitle{color:var(--muted);font-size:12px;margin:2px 0 8px;text-transform:uppercase;letter-spacing:.03em} .person .p-row{font-size:13px;margin-top:3px;color:var(--muted)} .person .p-row a{color:var(--brand);text-decoration:none;font-weight:500;word-break:break-word} .person.a1{--accent:var(--brand)} .person.a2{--accent:var(--secondary)} .person.a3{--accent:var(--success)} .person.a4{--accent:var(--warn)} .person.a5{--accent:#6d5bd0} .person.a6{--accent:#0e8a8a} /* About page */ .about-card{max-width:800px;margin:0 auto} .about-hero{text-align:center;padding:24px 20px 4px} .about-hero .ah-logo{height:58px;background:#fff;border-radius:8px;padding:8px 12px} .about-hero h2{margin:14px 0 2px;font-size:23px;font-weight:700;color:var(--text)} .about-hero .ah-since{color:var(--secondary);font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase} .about-body{padding:8px 26px 24px;font-size:15px;line-height:1.75;color:var(--text)} .about-body p{margin:0 0 14px} /* Account / settings pages: a grid of setting cards */ .settings-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px;align-items:start;max-width:760px} .set-body{padding:14px 16px} .set-body .form-control{display:block;width:100%;box-sizing:border-box;height:36px;padding:6px 10px; background:var(--field)!important;color:var(--text)!important;border:1px solid var(--field-border)!important;border-radius:6px!important;margin:0 0 9px!important} .set-body .btn{margin:2px 6px 0 0} .set-body img[id]{max-width:228px;border-radius:8px;background:#fff;padding:6px;margin-bottom:10px;display:block} .set-body .set-note{display:block;margin-top:9px;font-weight:600;font-size:12.5px} .set-body .checkbox,.set-body label{font-size:13.5px} /* CoordinatorOnboarding compact header: brand bar + tips strip + horizontal progress stepper (replaces the tall logo + details + progress stack). Fully responsive — bar wraps, steps go full-width on phones. */ .onb-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border); border-radius:11px;box-shadow:var(--shadow);padding:12px 16px;margin:2px 0 10px} .onb-bar .onb-logo{flex:0 0 auto;height:42px;background:#fff;border:1px solid var(--border);border-radius:6px;padding:4px 8px;display:flex;align-items:center} .onb-bar .onb-logo img{height:32px;width:auto;display:block} .onb-bar .onb-id{flex:1 1 220px;min-width:0} .onb-bar .onb-id .t{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .onb-bar .onb-id .n{font-size:18px;font-weight:700;color:var(--text);line-height:1.2} .onb-bar .onb-id .n .e{font-weight:400;font-size:13px;color:var(--muted)} .onb-tip{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;background:var(--brand-tint);border:1px solid var(--border); border-left:3px solid var(--brand);border-radius:8px;padding:8px 13px;margin-bottom:12px;font-size:11.5px;color:var(--text)} .onb-tip .lead{flex:1 1 340px} .onb-tip .lead strong{color:var(--brand)} .onb-tip .onb-legend{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:12px} .onb-tip .onb-legend b{color:var(--text);font-weight:600} /* turn the existing vertical .onboard-progress into a horizontal stepper */ .onb-steps{display:flex!important;gap:8px;flex-wrap:wrap;background:transparent!important;border:none!important; box-shadow:none!important;padding:0!important;margin:0 0 14px!important} .onb-steps .progress-item{flex:1 1 210px;display:flex!important;align-items:center;gap:10px;margin:0!important; padding:10px 13px!important;border:1px solid var(--border)!important;border-radius:9px!important;background:var(--surface)!important;box-shadow:var(--shadow)!important} .onb-steps .progress-item .stage-icon{flex:0 0 auto;margin:0!important} .onb-steps .stage-body{display:flex;flex-direction:column;min-width:0} .onb-steps .stage-title{font-size:13px;font-weight:700;color:var(--text);line-height:1.2} .onb-steps .stage-tip{font-size:11px;color:var(--muted);line-height:1.3} .onb-steps .stage-sub{font-size:11.5px;font-weight:600;line-height:1.35} @media (max-width:680px){.onb-steps .progress-item{flex:1 1 100%}} /* Dashboard fused header: big logo joined to a 2-row right side (Nav over KPIs) in one card. Flatten the dashboard's outer box so this + the grids float. */ .home-section.stats-wrapper.jumbotron{background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important;margin:0!important} .fuse{display:flex;align-items:stretch;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;margin:14px 0} .fuse .fuse-logo{flex:0 0 235px;background:#fff;display:flex;align-items:center;justify-content:center;padding:16px;border-right:1px solid var(--border)} .fuse .fuse-logo img{max-width:100%;max-height:104px} .fuse .fuse-right{flex:1;display:flex;flex-direction:column;min-width:0} .fuse-nav{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--border)} .fuse-nav>a,.fuse-nav>span{display:flex;align-items:center;gap:11px;padding:12px 16px;border-left:1px solid var(--border);text-decoration:none;color:var(--text);transition:background .15s} .fuse-nav>*:first-child{border-left:none} .fuse-nav>a:hover{background:var(--brand-tint);text-decoration:none;color:var(--text)} .fuse-nav .ico{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:17px;flex:0 0 auto;background:color-mix(in srgb,var(--accent,var(--brand)) 14%,var(--surface))} .fuse-nav .ttl{font-weight:600;font-size:13.5px} .fuse-nav .sub{font-size:11.5px;color:var(--muted)} .fuse-nav .n1{--accent:var(--brand)} .fuse-nav .n2{--accent:var(--secondary)} .fuse-nav .n3{--accent:#9aa3b2} .fuse-nav .disabled{opacity:.6;pointer-events:none} .fuse-kpi{display:grid;grid-template-columns:repeat(4,1fr)} .fuse-kpi .k{position:relative;padding:11px 16px;border-left:1px solid var(--border);display:flex;flex-direction:column;justify-content:center} .fuse-kpi .k:first-child{border-left:none} .fuse-kpi .k::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent,var(--brand))} .fuse-kpi .num{font-size:23px;font-weight:700;line-height:1;color:var(--accent,var(--brand))} .fuse-kpi .lab{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:4px} .fuse-kpi .s1{--accent:var(--brand)} .fuse-kpi .s2{--accent:var(--secondary)} .fuse-kpi .s3{--accent:var(--success)} .fuse-kpi .s4{--accent:var(--warn)} @media (max-width:760px){ .fuse{flex-direction:column} .fuse .fuse-logo{flex-basis:auto;border-right:none;border-bottom:1px solid var(--border);padding:14px} .fuse .fuse-logo img{max-height:60px} .fuse-nav{grid-template-columns:1fr} .fuse-nav>*{border-left:none;border-top:1px solid var(--border)} .fuse-nav>*:first-child{border-top:none} .fuse-kpi{grid-template-columns:1fr 1fr} .fuse-kpi .k:nth-child(2){border-left:1px solid var(--border)} } /* Action-button icons selected by the button's value text (zero markup): Search / Clear / Accept / Reject / Delete — plus .btn-ext for "open in new window". White SVGs from the same family; buttons are brand/cancel colored. */ .btn[value="Search"],.btn[value="Clear"],.btn[value="Accept"],.btn[value="Reject"],.btn[value="Delete"], .btn[value="Cancel"],.btn[value="Close"],.btn[value="Re-send Invite"],.btn[value="OK"],.btn-ext{ padding-left:29px!important;background-repeat:no-repeat!important;background-position:9px center!important;background-size:14px 14px!important} .btn[value="Cancel"],.btn[value="Close"]{background-image:url("data:image/svg+xml;utf8,")!important} .btn[value="Re-send Invite"]{background-image:url("data:image/svg+xml;utf8,")!important} .btn[value="Search"]{background-image:url("data:image/svg+xml;utf8,")!important} .btn[value="Clear"]{background-image:url("data:image/svg+xml;utf8,")!important} .btn[value="Accept"],.btn[value="OK"]{background-image:url("data:image/svg+xml;utf8,")!important} .btn[value="Reject"]{background-image:url("data:image/svg+xml;utf8,")!important} .btn[value="Delete"]{background-image:url("data:image/svg+xml;utf8,")!important} .btn-ext{background-image:url("data:image/svg+xml;utf8,")!important} /* Logout button: exit-door (log-out) icon */ .btn-primary-logout{padding-left:30px!important;background-repeat:no-repeat!important;background-position:9px center!important;background-size:15px 15px!important; background-image:url("data:image/svg+xml;utf8,")!important} /* Responsive: collapse grids on narrow screens */ @media (max-width:900px){ .kpis{grid-template-columns:repeat(2,1fr)} .panel-grid{grid-template-columns:1fr} .quick{grid-template-columns:1fr} } @media (max-width:520px){ .kpis{grid-template-columns:1fr} .page-head{align-items:flex-start} } /* Dashboard grid panels: turn the existing .grid-section-wrapper (h4 + scroll div) into a card with an accent-bar section header. Markup unchanged. */ .grid-section-wrapper h4{margin:0;padding:8px 13px;font-size:13.5px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--border)} .grid-section-wrapper h4::before{content:"";width:3px;height:15px;border-radius:2px;background:var(--brand)} .grid-section-wrapper > div[id]{border:none!important;box-shadow:none;background:transparent} .col-md-6.grid-section-wrapper{padding-left:0;padding-right:0} /* Smash a section title bar (.lockHead) onto the grid box directly beneath it, so header + grid read as one card (like the dashboard). Zero markup. */ .button-blue.lockHead:has(+ br + .justShadow), .button-blue.lockHead:has(+ .justShadow){border-radius:7px 7px 0 0!important;margin-bottom:0!important} .button-blue.lockHead:has(+ br + .justShadow) + br{display:none} .button-blue.lockHead:has(+ br + .justShadow) + br + .justShadow, .button-blue.lockHead:has(+ .justShadow) + .justShadow{ margin-top:0!important;border:1px solid var(--border)!important;border-top:none!important; border-left:3px solid var(--brand)!important;border-radius:0 0 8px 8px!important} /* --- Tabs (AjaxControlToolkit ajax__custom-theme): brand-styled, both modes --- */ /* line-height sets the height of each wrapped row of tabs; it must exceed the tab's own height (padding+text+border ~38px) or wrapped rows overlap. */ .ajax__tab_header{border-bottom:1px solid var(--border);padding-bottom:0;line-height:2.6} .ajax__tab_outer,.ajax__tab_inner,.ajax__tab_tab{display:inline-block!important;vertical-align:top;float:none!important;line-height:1.15} /* Kill ACT's default tab edge/separator sprite images (the whiteish double lines between tabs) so only our own clean tab borders show. */ .ajax__tab_outer,.ajax__tab_inner{background-image:none!important;background-color:transparent!important;padding:0!important;margin:0!important} .ajax__tab_tab{background:var(--surface-2)!important;color:var(--text)!important;border:1px solid var(--border)!important;border-bottom:none!important;padding:4px 14px!important;margin:0 3px 5px 0!important;border-radius:7px 7px 0 0;font-weight:600;line-height:1.15;font-size:13px} .ajax__tab_outer .ajax__tab_tab:hover{background:var(--brand-tint)!important;color:var(--text)!important;transform:none} .ajax__tab_active .ajax__tab_inner .ajax__tab_tab,.ajax__tab_active .ajax__tab_tab{background:var(--brand)!important;color:#fff!important;border-color:var(--brand)!important;font-weight:700} .ajax__tab_body{background:var(--surface)!important;color:var(--text)!important;border:1px solid var(--border)!important;border-top:none!important;padding:12px!important;border-radius:0 0 9px 9px} /* --- Section title bar (.button-blue.lockHead): match the clean .card-head look (brand left-accent + bold title), replacing the old 1990s blue gradient bar. Light mode gets a darker tinted band for presence; dark mode stays minimal. --- */ .button-blue.lockHead, body.dark-mode .button-blue.lockHead{ background:color-mix(in srgb,var(--brand) 12%,var(--surface))!important;background-image:none!important;background-size:auto!important; color:var(--brand)!important;border:none!important;border-left:3px solid var(--brand)!important;border-radius:7px!important; box-shadow:none!important;animation:none!important;transform:none!important;padding:8px 14px!important;min-height:0!important; display:block!important;text-align:left!important} body.dark-mode .button-blue.lockHead{ background:color-mix(in srgb,var(--brand) 16%,var(--surface))!important;color:var(--text)!important} .button-blue.lockHead h1,.button-blue.lockHead h2,.button-blue.lockHead h3, .button-blue.lockHead h4,.button-blue.lockHead h5,.button-blue.lockHead h6{ margin:0!important;color:inherit!important;font-weight:700!important;font-size:14px!important;text-shadow:none!important;letter-spacing:.01em;text-align:left!important} .button-blue.lockHead:hover{transform:none!important;box-shadow:none!important} /* Search/list: grid scroll container sits inside the Results card */ .ui-card #coords,.ui-card #oporgs{border:none!important;border-radius:0 0 9px 9px} /* Vertical-fill scroll containers (sized by vfill.js). Keep the grid's column headers pinned to the top of the box while the rows scroll underneath. */ .vfill{overflow:auto} .vfill table.gridview th{position:sticky;top:0;z-index:3} /* --- Themed scrollbars for grid scroll-boxes (token-driven → adapts to both themes; mainly to kill the stark default scrollbar in dark mode). --- */ .vfill, .justShadow, .body-content div:has(> table.gridview){ scrollbar-width: thin; scrollbar-color: var(--muted) transparent; /* Firefox: thumb / track */ } .vfill::-webkit-scrollbar, .justShadow::-webkit-scrollbar, .body-content div:has(> table.gridview)::-webkit-scrollbar{ width:11px; height:11px; } .vfill::-webkit-scrollbar-track, .justShadow::-webkit-scrollbar-track, .body-content div:has(> table.gridview)::-webkit-scrollbar-track{ background:transparent; } .vfill::-webkit-scrollbar-thumb, .justShadow::-webkit-scrollbar-thumb, .body-content div:has(> table.gridview)::-webkit-scrollbar-thumb{ background: var(--muted); border-radius:8px; border:2px solid transparent; background-clip:padding-box; /* inset look */ } .vfill::-webkit-scrollbar-thumb:hover, .justShadow::-webkit-scrollbar-thumb:hover, .body-content div:has(> table.gridview)::-webkit-scrollbar-thumb:hover{ background: var(--brand); background-clip:padding-box; border:2px solid transparent; } .vfill::-webkit-scrollbar-corner, .justShadow::-webkit-scrollbar-corner, .body-content div:has(> table.gridview)::-webkit-scrollbar-corner{ background:transparent; } /* GridView empty-data row (ShowHeaderWhenEmpty): tidy muted "no records" line */ table.gridview tr.grid-empty td{text-align:center!important;color:var(--muted)!important;font-style:italic;padding:16px 12px!important} /* ============================================================ MODAL OVERHAUL — clean themed cards for every ACT popup. Site-wide structure is uniform: .HellowWorldPopup > .PopupHeader + .PopupBody + .Controls. Token-driven, both modes. Appended last so it authoritatively governs appearance (wins source-order ties against the older modal rules above). Header/footer go full-bleed via negative margins so modals with loose content (stray checkboxes/
) stay clean too. ============================================================ */ /* Dim backdrop */ .ModalPopupBG,body.dark-mode .ModalPopupBG{background:rgba(8,12,20,.55)!important;opacity:1!important;filter:none!important} /* Card shell */ .HellowWorldPopup,.HellowWorldPopupUpload,.HellowWorldPopupInfo, body.dark-mode .HellowWorldPopup,body.dark-mode .HellowWorldPopupUpload,body.dark-mode .HellowWorldPopupInfo{ background:var(--surface)!important;color:var(--text)!important;border:1px solid var(--border)!important; border-radius:11px!important;box-shadow:0 18px 50px rgba(0,0,0,.40)!important;overflow:hidden!important} .HellowWorldPopup{padding:0 16px!important;min-width:360px!important;max-width:94vw!important} /* Mobile / short screens: let a tall modal scroll inside itself instead of running off-screen. */ @media (max-width:600px),(max-height:680px){ .HellowWorldPopup,.HellowWorldPopupUpload,.HellowWorldPopupInfo{max-height:92vh!important;overflow-y:auto!important;overflow-x:hidden!important} } .HellowWorldPopupUpload,.HellowWorldPopupInfo{padding:16px!important} /* The "Please Wait" overlay reuses .HellowWorldPopupUpload but is just a small centered spinner box, not a form card. Strip the card chrome so the inner .ModalPopupWaitDiv is the visible box and stays centered. */ #ModalPopupWait{padding:0!important;background:transparent!important;border:none!important;box-shadow:none!important; overflow:visible!important;min-width:0!important;min-height:0!important} #ModalPopupWait table.center{width:auto!important;margin:0!important} #ModalPopupWait .ModalPopupWaitDiv{background-color:var(--surface)!important;color:var(--text)!important; border:1px solid var(--border)!important;border-radius:11px!important;box-shadow:0 18px 50px rgba(0,0,0,.4)!important;text-align:center} /* Techy "Please Wait" spinner — tri-color orbit (brand navy / teal / green dots) that replaces the old mismatched blue pleasewait.gif. Parent spins; the three dots are pinned at 120deg intervals around the ring. Tokens keep it on-brand in both themes. Markup: */ .tech-spin{display:inline-block;width:60px;height:60px;position:relative;margin:4px auto 2px; animation:tech-orbit 1.1s linear infinite} .tech-spin i{position:absolute;width:13px;height:13px;border-radius:50%;left:50%;top:50%;margin:-6.5px 0 0 -6.5px} .tech-spin i:nth-child(1){background:var(--brand);transform:translateY(-22px)} .tech-spin i:nth-child(2){background:var(--secondary);transform:rotate(120deg) translateY(-22px)} .tech-spin i:nth-child(3){background:var(--success);transform:rotate(240deg) translateY(-22px)} @keyframes tech-orbit{to{transform:rotate(360deg)}} /* Full-bleed brand header (replaces the old 👉 blue look) */ .HellowWorldPopup .PopupHeader,body.dark-mode .HellowWorldPopup .PopupHeader{ margin:0 -16px 13px!important;padding:10px 16px!important;background:var(--brand)!important;color:#fff!important; text-align:left!important;border:none!important;display:flex!important;align-items:center;gap:10px} /* Polished standout icon: a crisp white glyph in a translucent chip. One rule gives every modal a consistent header mark (white SVG reads clearly on the brand bar, unlike a dark emoji glyph which CSS can't recolor). */ .HellowWorldPopup .PopupHeader::before{ content:"";flex:0 0 auto;width:26px;height:26px;border-radius:7px; background-color:rgba(255,255,255,.18);background-repeat:no-repeat;background-position:center;background-size:16px 16px; background-image:url("data:image/svg+xml;utf8,")} /* Per-type modal header icons, selected by the PopupHeader's id (CSS-only, no markup): edit=pencil, add=plus, delete=trash, print=printer, accept=check, reject/void=x. Everything else keeps the neutral document mark above. */ .HellowWorldPopup .PopupHeader[id*="Edit"]::before{background-image:url("data:image/svg+xml;utf8,")} .HellowWorldPopup .PopupHeader[id*="Add"]::before{background-image:url("data:image/svg+xml;utf8,")} .HellowWorldPopup .PopupHeader[id*="Delete"]::before{background-image:url("data:image/svg+xml;utf8,")} .HellowWorldPopup .PopupHeader[id*="Print"]::before{background-image:url("data:image/svg+xml;utf8,")} .HellowWorldPopup .PopupHeader[id*="Accept"]::before{background-image:url("data:image/svg+xml;utf8,")} .HellowWorldPopup .PopupHeader[id*="Reject"]::before,.HellowWorldPopup .PopupHeader[id*="Void"]::before{background-image:url("data:image/svg+xml;utf8,")} .HellowWorldPopup .PopupHeader h1,.HellowWorldPopup .PopupHeader h2,.HellowWorldPopup .PopupHeader h3, .HellowWorldPopup .PopupHeader h4,.HellowWorldPopup .PopupHeader h5,.HellowWorldPopup .PopupHeader h6{ margin:0!important;color:#fff!important;font-size:15px!important;font-weight:600!important;text-shadow:none!important} /* Body: kill stray inline borders; keep inline heights/scroll */ .HellowWorldPopup .PopupBody{border:none!important;background:transparent!important} /* Clean form layout (form tables only — never GridViews) */ .HellowWorldPopup table:not(.gridview),.HellowWorldPopupUpload table:not(.gridview),.HellowWorldPopupInfo table:not(.gridview){ width:100%!important;border:none!important;margin:0!important;background:transparent!important;border-collapse:collapse!important} .HellowWorldPopup table:not(.gridview)>tbody>tr>td,.HellowWorldPopup table:not(.gridview)>tbody>tr>th, .HellowWorldPopupUpload table:not(.gridview)>tbody>tr>td,.HellowWorldPopupInfo table:not(.gridview)>tbody>tr>td{ border:none!important;padding:5px 8px!important;background:transparent!important;vertical-align:middle!important} .HellowWorldPopup table:not(.gridview)>tbody>tr>td:first-child{color:var(--muted)!important;font-weight:600!important;white-space:nowrap;width:1%} /* Inputs/selects/textarea: full-width, box-sizing so they never overlap a cell border */ .HellowWorldPopup input[type="text"],.HellowWorldPopup input[type="date"],.HellowWorldPopup input[type="email"], .HellowWorldPopup input[type="password"],.HellowWorldPopup input[type="number"],.HellowWorldPopup input[type="search"], .HellowWorldPopup input[type="tel"],.HellowWorldPopup textarea,.HellowWorldPopup select, .HellowWorldPopupUpload input[type="text"],.HellowWorldPopupUpload textarea,.HellowWorldPopupUpload select, .HellowWorldPopupInfo input[type="text"],.HellowWorldPopupInfo textarea,.HellowWorldPopupInfo select{ width:100%!important;box-sizing:border-box!important;height:34px;padding:6px 10px!important; background:var(--field)!important;color:var(--text)!important;border:1px solid var(--field-border)!important; border-radius:6px!important;font:500 13px/1.2 var(--ui-font)!important;margin:0!important;min-width:0} .HellowWorldPopup textarea,.HellowWorldPopupUpload textarea,.HellowWorldPopupInfo textarea{height:auto!important;min-height:64px;line-height:1.4!important} .HellowWorldPopup input:focus,.HellowWorldPopup textarea:focus,.HellowWorldPopup select:focus, .HellowWorldPopupUpload input:focus,.HellowWorldPopupInfo input:focus{ border-color:var(--brand)!important;box-shadow:0 0 0 3px var(--brand-tint)!important;outline:none!important} /* Beat the old .btn/.btn-primary look that these selects carry (esp. the high-specificity body.dark-mode .HellowWorldPopup .btn-primary rule). */ .HellowWorldPopup select.btn,.HellowWorldPopup select.btn-primary,.HellowWorldPopup select.dropdown-toggle, body.dark-mode .HellowWorldPopup select,body.dark-mode .HellowWorldPopup select.btn-primary, body.dark-mode .HellowWorldPopup input[type="text"],body.dark-mode .HellowWorldPopup input[type="date"], body.dark-mode .HellowWorldPopup textarea{ background-color:var(--field)!important;color:var(--text)!important;border:1px solid var(--field-border)!important; font:500 13px/1.2 var(--ui-font)!important} /* Selects: strip the old btn/dropdown look, render as a real field with a chevron */ .HellowWorldPopup select,.HellowWorldPopupUpload select,.HellowWorldPopupInfo select{ -webkit-appearance:none!important;appearance:none!important;cursor:pointer;padding-right:30px!important; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%)!important; background-position:calc(100% - 16px) 14px,calc(100% - 11px) 14px!important;background-size:5px 5px,5px 5px!important;background-repeat:no-repeat!important} /* Footer: full-bleed, right-aligned actions */ .HellowWorldPopup .Controls,body.dark-mode .HellowWorldPopup .Controls{ margin:13px -16px 0!important;padding:11px 16px!important;border-top:1px solid var(--border)!important; background:var(--surface-2)!important;display:flex!important;gap:8px;justify-content:flex-end;align-items:center;flex-wrap:wrap} /* In-modal GridViews keep the standard themed look (already styled via table.gridview) */ .HellowWorldPopup table.gridview{margin:0!important} /* ============================================================ SUBMITTED DOCUMENTS tab (CoordinatorDetails): make the three left panels share the column's full height (matched to the viewer on the right) instead of three fixed 200px boxes that left big dead gaps. Each box still scrolls on overflow with its .lockHead grid header pinned, and empty grids show the header + a centered "No records" line (ShowHeaderWhenEmpty). md+ only — stacks normally on mobile. ============================================================ */ @media (min-width:768px){ .submitted-docs-row{display:flex;align-items:stretch} .submitted-docs-row > [class*="col-"]{float:none;flex:0 0 auto} /* Close the wide inter-column gutter: trim the two facing paddings so the grids and the viewer nearly meet (keeps the 1/3 ÷ 2/3 column split). */ .submitted-docs-left{padding-right:6px} .submitted-docs-row > .col-md-8{padding-left:6px} } .submitted-docs-left{display:flex;flex-direction:column;min-height:0} .sd-panel{display:flex;flex-direction:column;flex:1 1 0;min-height:0} .sd-panel + .sd-panel{margin-top:10px} .sd-box{flex:1 1 0;min-height:0;overflow:auto}