/* eTrakLogic brand palette — nominal placeholders, swap when a real brand guide lands. Kept as CSS variables so a retheme is a one-block change. */ :root { --etl-brand: #1f8a5b; /* primary brand green (track & trace) */ --etl-brand-dark: #14663f; /* hover/active */ --etl-brand-active: #17734a; --etl-ink: #1f2a37; /* dark slate text/marks */ --etl-bg: #eef1f4; /* clean neutral app background (was stone beige) */ } html { font-size: 14px; } .bag-tile { width: 220px; display: flex; flex-direction: column; background-color: #fff; overflow: hidden; } .bag-tile-header { font-weight: 600; } .bag-tile-body { flex-grow: 1; min-height: 60px; } .bag-tile-footer input[type="text"] { min-width: 0; } .specimen-chip { cursor: pointer; font-size: 0.9rem; padding: 0.35rem 0.5rem; } .specimen-chip.dragging { opacity: 0.5; } .bag-tile-footer.drag-over input[type="text"] { outline: 2px dashed #0d6efd; } .bag-tile-body.drag-over { outline: 2px dashed #0d6efd; outline-offset: -2px; background-color: rgba(13, 110, 253, 0.08); } .js-specimen-drop-target.drag-over { outline: 2px dashed #198754; outline-offset: -2px; background-color: rgba(25, 135, 84, 0.08); } .specimen-chip-inline[draggable="true"] { cursor: pointer; } .specimen-chip-inline.dragging { opacity: 0.5; } @media (min-width: 768px) { html { font-size: 16px; } } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; } .nav-tabs .nav-link.disabled { color: dimgray !important; } .nav-tabs .nav-link { color: #007bff; } html { min-height: 100%; } /* Set padding to keep content from hitting the edges */ .body-content { margin-top: 15px; padding-left: 15px; padding-right: 15px; } /* Override the default bootstrap behavior where horizontal description lists will truncate terms that are too long to fit in the left column */ .dl-horizontal dt { white-space: normal; } /* Set width on the form input elements since they're 100% wide by default */ input, select, textarea { max-width: 280px; } body { background-color: var(--etl-bg); } button { background-color: #666666; color: white; border-radius: 5px; /* Rounded corners */ } /* The stock ASP.NET template pinned this footer with position:absolute + width:100% against an html made position:relative, and reserved room for it with a 60px margin on body. None of that survives contact with this layout: the footer is the last child of #page-content-wrapper, a flex column that sits BESIDE a 220px sidebar. Taken out of flow it measured 100% of , so it started at the content edge and ran 220px past the right of the window - a horizontal scrollbar on every page in the portal - and the body margin added 60px of empty document under every page, which is a vertical scrollbar on pages short enough not to need one. Left in flow it is simply the last row of the column. */ footer { white-space: nowrap; line-height: 60px; } .narrow-content-wrapper { display: inline-flex; flex-direction: column; align-items: flex-start; background-color: rgba(255, 255, 255, 0.8); /* White with 80% opacity */ padding: 10px; /* Adjusted for tighter layout */ border-radius: 10px; margin: 0 auto; overflow: hidden; } .content-wrapper { background-color: rgba(255, 255, 255, 0.8); /* White with 80% opacity */ padding: 20px; border-radius: 10px; width: 100%; max-width: auto; margin: 0 auto; } .status-complete { background-color: #58d68d !important; } .status-ready-to-ship { background-color: #f5b041 !important; } .status-in-progress { background-color: #5dade2 !important; } .status-pending { background-color: #5dade2 !important; } .status-cancelled { background-color: #d3d3d3 !important; } .status-on-hold { background-color: #ffdab9 !important; } .nav-button { /* Makes the text bold */ color: white; padding: 10px 20px; /* Padding for button effect */ text-decoration: none; /* Remove underline */ border-radius: 5px; /* Rounded corners */ display: inline-block; /* Aligns with other inline elements */ transition: background-color 0.3s; /* Smooth transition for hover effect */ } .nav-button:hover { background-color: lightgray; } .generic-button { background-color: dimgrey; color: white; padding: 10px 20px; /* Padding for button effect */ text-decoration: none; /* Remove underline */ border-radius: 5px; /* Rounded corners */ display: inline-block; /* Aligns with other inline elements */ } .create-order-btn { background-color: dimgrey; /* Button background color */ color: white; /* Text color */ border: none; /* Remove border */ padding: 10px 20px; /* Padding */ font-size: 16px; /* Font size */ border-radius: 5px; /* Rounded corners */ cursor: pointer; /* Pointer cursor on hover */ display: inline-block; /* Use flexbox for alignment */ align-items: center; /* Center items vertically */ gap: 10px; /* Space between icon and text */ transition: background-color 0.3s; /* Smooth transition */ text-decoration: none; /* Remove underline */ } .create-order-btn i { font-size: 20px; /* Icon size */ } .create-order-btn:hover { background-color: #3d3d3d; /* Darker background on hover */ } .create-order-btn:active { background-color: var(--etl-brand-active); /* brand tint on click */ } .view-order-btn { background-color: var(--etl-brand); /* Button background color */ color: white; /* Text color */ border: none; /* Remove border */ padding: 10px 20px; /* Padding */ font-size: 16px; /* Font size */ border-radius: 5px; /* Rounded corners */ cursor: pointer; /* Pointer cursor on hover */ display: inline-block; /* Use flexbox for alignment */ align-items: center; /* Center items vertically */ gap: 10px; /* Space between icon and text */ transition: background-color 0.3s; /* Smooth transition */ text-decoration: none; /* Remove underline */ } .view-order-btn:hover { background-color: var(--etl-brand-dark); /* Darker background on hover */ } .view-order-btn:active { background-color: var(--etl-brand-active); /* Darker background on click */ } .action-button-div { margin-bottom: 1em; } input:focus:invalid { border-color: red; outline: none; box-shadow: 0 0 0 0.2rem rgba(255, 0, 0, 0.25); } .lookup-values { background-color: white; padding: 10px; border: 1px solid #ddd; border-radius: 5px; max-height: 200px; max-width: 25em; overflow-y: auto; } .lookup-value-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; } .remove-button { background-color: red; color: white; border: none; padding: 5px 10px; border-radius: 3px; cursor: pointer; } .square-image { width: 40%; height: 9em; background-position: center; } .d-flex { display: flex; } .justify-content-center { justify-content: center; } .align-items-center { align-items: center; } .payment-type-section { margin-top: 2em; } .hint { font-style: italic; color: grey; } .order-confirm-heading { text-align: center; margin-bottom: 1.5em; } .tooltip-container { position: relative; display: inline-block; cursor: help; } .tooltip-icon { color: #555; margin-left: 6px; font-size: 0.9em; } .tooltip-text { visibility: hidden; opacity: 0; width: 260px; background-color: #333; color: #fff; text-align: left; border-radius: 4px; padding: 8px; position: absolute; top: 50%; left: 110%; /* Position to the right */ transform: translateY(-50%); z-index: 9999; transition: opacity 0.3s ease; white-space: normal; font-size: 0.85em; line-height: 1.4em; } .tooltip-container:hover .tooltip-text { visibility: visible; opacity: 1; } /* "% completed wheels" on the dashboard's Task Status Group Summary (backoffice spec). Drawn with a conic-gradient rather than a charting library - it's one value per wheel, so pulling in a chart dependency for it isn't warranted. --wheel-percent (0-100) and --wheel-colour are set inline per wheel. */ .status-wheel { --wheel-percent: 0; --wheel-colour: var(--bs-secondary); position: relative; width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: conic-gradient(var(--wheel-colour) calc(var(--wheel-percent) * 1%), #e9ecef 0); } /* Punches the centre out so the ring reads as a wheel rather than a pie. */ .status-wheel::before { content: ""; position: absolute; width: 62px; height: 62px; border-radius: 50%; background-color: #fff; } .status-wheel-value { position: relative; font-weight: 600; font-size: 0.95rem; } /* Breadcrumb trail dots. Sized to stay tappable and readable at a glance: the back office scans a row of these to see how a run is progressing, which Jon called 95% of what these users do. The stop number sits inside the dot so a site can be found without hovering every one of them. */ .breadcrumb-dot { width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.25); font-size: 0.75rem; font-weight: 600; line-height: 1; padding: 0; cursor: pointer; } .breadcrumb-dot:hover, .breadcrumb-dot:focus-visible { outline: 2px solid #14508f; outline-offset: 1px; } /* App header: the account bar plus, on pages that define a PageHead section, that page's own title / filters / tab strip. Sticky as one block so a page never has to know the navbar's height in order to sit under it. z-index sits at Bootstrap's $zindex-fixed (1030): above dropdown-menu (1000) and sticky (1020) so the account menu and any page-head select open over the content, and below modal (1055) so a dialog still covers the header. */ .etl-app-header { position: sticky; top: 0; z-index: 1030; } /* Cap the head so a tall filter row cannot eat the viewport it is meant to make usable; it scrolls internally in the rare case it would. */ .etl-page-head { max-height: 45vh; overflow-y: auto; } /* A tab strip that wrapped onto a second line would change the sticky header's height as the window narrowed, so it scrolls sideways instead. */ .etl-page-head .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; border-bottom: 0; } .etl-page-head .nav-tabs .nav-link { white-space: nowrap; } /* Row counts on the tabs. Without them a tab hides whether it holds anything, and the whole point of splitting the dashboard up is to stop people hunting for the panel that actually has today's data in it. */ .etl-tab-count { font-size: 0.7rem; font-weight: 600; vertical-align: middle; } /* The run's drop-off stop. Marked because it is the one dot whose meaning is different - nothing is collected there, the whole run's load is booked in - and because it is not reliably the last dot, so position is not a safe way to find it. A ring rather than another colour: the fill is already carrying job status, and the client's palette has no spare value. */ .breadcrumb-dot-dropoff { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #11181f; } /* ---- Environment band ----------------------------------------------------- Rendered by _Layout on every page INCLUDING login, and only when this is not prod. Colours follow the VoiceCare Admin Portal so anyone moving between the two products reads the same signal: orange is dev, green is test. The "unconfigured" case is deliberately the loudest of the three. A missing Environment:Name must never be able to make an environment look like prod, so it shouts rather than hides. */ .etl-env-band { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 0.3rem 1rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-align: center; /* Sits above the sticky app header, which sets its own stacking context. */ position: relative; z-index: 1040; } .etl-env-band-version { font-weight: 400; opacity: 0.85; /* Hidden on a phone-width window: the environment matters more than the build number, and at this width one line is all there is room for. */ white-space: nowrap; } @media (max-width: 575.98px) { .etl-env-band-version { display: none; } } .etl-env-band-dev { background: #e65c00; color: #fff; } .etl-env-band-test { background: #059669; color: #fff; } /* Not a colour anyone could mistake for a working environment. */ .etl-env-band-unconfigured { background: repeating-linear-gradient(45deg, #b91c1c, #b91c1c 12px, #7f1d1d 12px, #7f1d1d 24px); color: #fff; } /* ---- Build footer --------------------------------------------------------- Shown on every page in every environment, prod included. */ .etl-build-footer { margin-top: 2rem; padding: 0.5rem 1rem; border-top: 1px solid #dee2e6; text-align: center; font-size: 0.72rem; color: #6c757d; } .etl-build-footer-version { font-weight: 600; color: #495057; } .etl-build-footer-env { margin-left: 0.5rem; padding: 0.05rem 0.4rem; border-radius: 0.2rem; background: #e9ecef; font-weight: 600; }