/* =============================================================================
   LantechNet - shared theme.

   Loaded AFTER StyleSheet7.css (legacy, still referenced by page bodies - e.g. ".newsLinks",
   ".largeFont", ".smallFont") so these rules refresh the look sitewide - typography, links, buttons,
   chrome - without depending on every page's markup having been rewritten yet.

   This file is served by the ROOT application at "/css/site.css" and is intended to be the single
   theme for both deployments (see lantechnet-iis-two-deployments: "/" and "/02" publish separately
   and can drift). Sales Center links it root-absolute for the same reason it already links
   "/css/StyleSheet7.css" that way.

   Deliberately does NOT touch border-collapse/cellspacing on existing tables: most legacy pages use
   <table> purely for pixel layout, and collapsing borders makes browsers ignore the cellspacing
   attribute those layouts depend on. De-tabling is per-page work (improvement 1, Tier B), not a
   sitewide default.
   ============================================================================= */

:root {
    --lantech-blue: #002f87;
    --lantech-blue-dark: #001f5c;
    --lantech-blue-accent: #1d4ba0; /* the milonic menu's own rollover colour */
    --lantech-gray-bar: #54565b;    /* the legacy cross-application bar */
    --lantech-gray-bg: #f4f6f9;

    /* Re-point Bootstrap 5's theme variables at Lantech blue so its components (buttons, links,
       focus rings, badges) pick it up automatically wherever Bootstrap classes are used. */
    --bs-primary: var(--lantech-blue);
    --bs-primary-rgb: 0, 47, 135;
    --bs-link-color: var(--lantech-blue);
    --bs-link-color-rgb: 0, 47, 135;
    --bs-link-hover-color: var(--lantech-blue-dark);
    --bs-link-hover-color-rgb: 0, 31, 92;

    /* File-type markers for .doc-list. These are MASKS, not images: the glyph supplies the shape and
       the rule's background-color supplies the colour, so one SVG serves every file type and the
       per-type colours below stay a one-line change. A browser without mask support falls back to a
       plain coloured block - which is exactly what these rules replaced, so the degradation is safe. */
    --doc-icon-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 1h5v4h4v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z'/%3E%3Cpath d='M9 1l4 4h-4z' fill-opacity='.45'/%3E%3C/svg%3E");
    --doc-icon-folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 4a1 1 0 0 1 1-1h3.1l1.3 1.6h6.6a1 1 0 0 1 1 1v6.9a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
    --doc-icon-video: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M2 4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm4.5 1.6v4.8L10.8 8z'/%3E%3C/svg%3E");
    --doc-icon-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8.6 2H14v5.4h-1.6V4.7l-5.9 5.9-1.1-1.1 5.9-5.9H8.6z'/%3E%3Cpath d='M2.5 4.6h4.2v1.6H4.1v7.2h7.2v-2.6h1.6v4.2h-10.4z'/%3E%3C/svg%3E");
}

/* -----------------------------------------------------------------------------
   Page shell: header pinned at the top, footer pinned at the bottom, content scrolling with the
   browser's own scrollbar - never a contained inner one.

   Two mechanisms together, because "position: sticky" alone only pins once the document overflows:
     - flex column + "min-height: 100vh" + "main { flex: 1 0 auto }" pushes the footer to the bottom
       of the viewport on SHORT pages;
     - "position: sticky" keeps the bars in view on TALL pages while the document scrolls normally.
   Deliberately no "overflow" on <main>: that gives page content its own independent scrollbar
   ("overflow-x: auto" alone makes an element a scroll container on BOTH axes). Anything genuinely
   too wide overflows to the document instead.
   ----------------------------------------------------------------------------- */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    /* 14px, the same size the "td, th" rule below gives table text.

       Without this, body text was Bootstrap's 1rem/16px. That went unnoticed while every page body
       was still a layout table - all of its text was inside <td>, so all of it took the 14px rule.
       De-tabling (improvement 1, Tier B) turns those cells into <div>/<p>, which silently fall back
       to the body size, so each converted page came out a step larger than the pages around it and
       a step larger than it had been. One size here, and de-tabling stops changing the type size.

       Deliberately does not disturb anything sized in rem: rem resolves against <html>, not <body>,
       so every explicit size in this file and in Bootstrap itself is unaffected. Only text that
       inherits its size changes. */
    font-size: .875rem;
    background-color: var(--lantech-gray-bg);
    color: #26292e;
}

body > header {
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    z-index: 1030; /* above page content, so the nav dropdowns are not clipped once scrolled */
}

body > .site-footer {
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    z-index: 1020;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--lantech-blue);
    font-weight: 600;
}

a {
    color: var(--lantech-blue);
}

a:hover {
    color: var(--lantech-blue-dark);
}

/* Legacy content sits almost entirely inside table cells, and StyleSheet7.css's plain
   "td { font-size: 11px }" wins on specificity over a body-level size, so table text has to be set
   here as well. Same 14px as "body" above - the two exist to say one thing, not two. This is the one
   deliberate, visible part of the typography refresh; it may reflow a few tightly fixed-width
   columns. */
td, th {
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

/* Plain WebForms-style submit/button inputs, restyled to match a Bootstrap primary button.
   ".dropdown-item" is excluded alongside the other Bootstrap components: the header's "Log out" is a
   real <button> but has to look like the menu row it sits in, not a blue block filling the dropdown.

   ".btn-plain" is the opt-out for the rest. A <button> is often the correct ELEMENT for something
   that must not look like a button at all - an image-faced control, a row toggle, a bare X - and
   because each :not() here contributes a class's worth of specificity, this selector beats any
   single-class rule a page might write. Such controls carry .btn-plain and style themselves. */
input[type="submit"],
input[type="button"],
button:not(.btn-close):not(.navbar-toggler):not(.dropdown-item):not(.btn):not(.btn-plain) {
    background-color: var(--lantech-blue);
    border: 1px solid var(--lantech-blue);
    color: #fff;
    padding: 6px 16px;
    border-radius: .375rem;
    font-size: .95rem;
    cursor: pointer;
}

input[type="submit"]:hover,
input[type="button"]:hover,
button:not(.btn-close):not(.navbar-toggler):not(.dropdown-item):not(.btn):not(.btn-plain):hover {
    background-color: var(--lantech-blue-dark);
    border-color: var(--lantech-blue-dark);
}

/* The opt-out itself: strips every trace of button chrome so the control is only what the page
   puts inside it. */
.btn-plain {
    border: 0;
    background: transparent;
    padding: 0;
    border-radius: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

/* =============================================================================
   ACTION CONTROLS - the house button vocabulary.

   Legacy LantechNET drew every operation as a bare anchor: "EDIT", "DELETE", "PROCESS>>",
   "Change content >>". They read as prose, not as controls, and the only thing marking the
   destructive one was the word itself. Anything that DOES something is a button now.

   FOUR VARIANTS, AND NO OTHERS. Pick by what the control does, not by what colour is wanted:

     btn btn-primary            the one affirmative action on the page - Save, Submit, Send, Update
     btn btn-outline-primary    a secondary action - Edit, Change, Add, Process, View, Download
     btn btn-outline-danger     destructive - Delete, Remove
     btn btn-outline-secondary  leaving without acting - Cancel, Back, Return

   Add btn-sm for a control inside a table row. Wrap several in .row-actions.

   btn-danger - SOLID red - is the one exception, reserved for a page whose entire purpose is the
   destruction ("Delete Associate", "Yes, remove file"). There the user has already chosen and is
   confirming, so the control should be unmissable. In a list, where the same button repeats on
   every row next to things the user did not come to delete, it is outlined.

   Navigation stays a link. A breadcrumb, a document in a .doc-list, a shortcut in the home page's
   side column and an ordinary sentence link are all reading, not doing, and buttoning them would
   make the real controls stop standing out - which is the whole point.

   Bootstrap 5.1 hardcodes its button colours (#0d6efd) instead of reading --bs-primary, so
   re-pointing that variable never reached buttons and the site was running two different blues.
   These rules put every .btn variant on the Lantech palette; they match Bootstrap's own
   specificity and win on order, because this file is loaded after it.
   ============================================================================= */

.btn {
    border-radius: .375rem;
    font-weight: 500;
}

.btn-primary {
    color: #fff;
    background-color: var(--lantech-blue);
    border-color: var(--lantech-blue);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    color: #fff;
    background-color: var(--lantech-blue-dark);
    border-color: var(--lantech-blue-dark);
}

.btn-outline-primary {
    color: var(--lantech-blue);
    border-color: var(--lantech-blue);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
    color: #fff;
    background-color: var(--lantech-blue);
    border-color: var(--lantech-blue);
}

/* Destructive. #c8102e is Lantech's red rather than Bootstrap's, so the site does not run two.
   It used to be shared with the PDF marker in .doc-list; that marker moved to a deeper brick
   (2026-10-01) precisely so the delete colour is not also the "here is a document" colour.
   Outlined at rest and solid on hover:
   a delete control should be findable without shouting from every row of a table. */
.btn-danger,
.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active {
    color: #fff;
    background-color: #c8102e;
    border-color: #c8102e;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    color: #fff;
    background-color: #a30d25;
    border-color: #a30d25;
}

.btn-outline-danger {
    color: #c8102e;
    border-color: #c8102e;
}

.btn-outline-secondary {
    color: var(--lantech-gray-bar);
    border-color: #adb5bd;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    color: #fff;
    background-color: var(--lantech-gray-bar);
    border-color: var(--lantech-gray-bar);
}

/* One focus ring for all of them, in the theme's blue - red for the destructive variants so the
   ring never contradicts the control it is on. */
.btn:focus,
.btn:focus-visible {
    box-shadow: 0 0 0 .2rem rgba(0, 47, 135, .25);
}

.btn-danger:focus,
.btn-outline-danger:focus {
    box-shadow: 0 0 0 .2rem rgba(200, 16, 46, .3);
}

/* Several controls together, in a table cell or at the foot of a form. Keeps them from touching
   and lets them wrap as a unit on a narrow screen. */
.row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
}

/* A table's action column should be only as wide as its buttons. */
td.row-actions-cell,
th.row-actions-cell {
    width: 1%;
    white-space: nowrap;
}

/* ...which means the group inside it must NOT wrap. "width: 1%" asks the browser to shrink the
   column to its minimum content width, and a wrapping flex row's minimum is its widest single
   button - so the controls would stack and double the height of every row in the table. */
.row-actions-cell .row-actions {
    flex-wrap: nowrap;
}

/* Gives every page a uniform "card" presentation instead of sitting flush on the page background -
   the main visible lever for a renewed look applied without touching page markup. */
main {
    display: block;
    flex: 1 0 auto;
    width: 100%;
    max-width: 1240px;
    margin: 20px auto;
    background: #fff;
    border-radius: .5rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
    padding: 24px;
}

/* Pages that still carry a legacy full-bleed <body background="..."> - set through
   ViewData["BodyBackgroundImage"], today only the Europe Portal (Pages/05) - opt out of the card so
   their background image is not covered by a white panel. Removed per page as Tier B reaches them. */
body.has-legacy-background main {
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

/* Opt-in wrapper for content that is legitimately wider than the page and must NOT be shrunk to
   fit: a genuinely wide data grid (.table-scroll) or a fixed-size graphic whose geometry carries
   meaning (.scroll-x). That one element scrolls sideways instead of pushing the whole document
   wide. */
.table-scroll,
.scroll-x {
    overflow-x: auto;
}

/* Images shrink to their column rather than widening the page.

   Two deliberate exclusions, both of which this rule would silently break (improvement 1, task 1.15):

     - "body.has-legacy-background" is the Europe Portal, whose pages are a 990px bitmap stage with
       transparent spacer.gif hotspots positioned over a photograph. Those hotspots are sized by
       width=/height= attributes, so any rule that makes their size automatic collapses every hit
       area - see PROGRESS §85, where exactly that turned 224x250 hotspots into 224x224 squares.
       Those pages scroll horizontally inside ".portal-page-fixed" instead.
     - "[usemap]" is an image map: its <area> coordinates are absolute pixels against the image's
       natural size, so scaling the image moves every hotspot out from under its target. The one
       image map in the codebase (Travel's ConcurContacts.png) is wrapped in ".scroll-x" instead. */
body:not(.has-legacy-background) main img:not([usemap]) {
    max-width: 100%;
    height: auto;
}

/* A group heading INSIDE a data table - the legacy "2026" / "2025" band rows that break a long list
   into sections. It is a real header cell spanning the row, so the grouping is announced rather than
   only coloured. Overrides the striping underneath it. */
.table > tbody > tr.table-group-head > th {
    background-color: var(--lantech-blue);
    color: #fff;
    font-weight: 600;
}

/* =============================================================================
   PAGE CONVENTIONS - the vocabulary every de-tabled page uses (improvement 1, Tier B).

   The legacy pages are built from four repeated idioms. Each one has a replacement here, so
   converting a page is mechanical rather than a fresh design decision every time:

     1. <table width="990" align="center"> wrapper, one <tr><td>, wrapping the whole page
              -> delete it. <main> in this stylesheet already centres and widths the page.
                 (58 pages carried this; two carried width="1200".)
     2. the 01_nav.gif + <em><font size="3"> breadcrumb block, in its own table
              -> <partial name="_Breadcrumb" model='new[] { new BreadcrumbItem(...) }' />
                 (38 pages carried this.)
     3. a bordered table of document links with alternating bgcolor and an icon_*.gif per row
              -> <ul class="doc-list"> ... <li><a>...</a></li>
     4. a full-width coloured bar introducing a section ("View All:", "Department:")
              -> <h2 class="section-bar">

   Real DATA grids stay tables - they are tabular data, not layout. Give them
   "table table-sm table-hover align-middle" and wrap in .table-scroll if wide.
   ============================================================================= */

.page-breadcrumb .breadcrumb {
    margin: 0 0 1rem 0;
    padding: 0;
    background: none;
    font-size: .9375rem;
}

/* The legacy trail separated its steps with "&gt;". Kept, but supplied by CSS instead of markup. */
.page-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: ">";
    color: #6c757d;
}

.page-breadcrumb .breadcrumb-item.active {
    color: #6c757d;
}

/* Section heading bar - the legacy full-width strip of pale colour introducing a block of links. */
.section-bar {
    background-color: #eef2f8;
    border-left: 4px solid var(--lantech-blue);
    color: var(--lantech-blue);
    font-size: 1rem;
    font-weight: 600;
    margin: 1.5rem 0 .75rem 0;
    padding: .5rem .75rem;
}

.section-bar:first-child {
    margin-top: 0;
}

/* Document / link list - replaces the bordered, alternately shaded link tables. The icon comes from
   the file extension via the modifier classes below, so rows no longer carry an <img>. */
.doc-list {
    list-style: none;
    margin: 0 0 1rem 0;
    padding: 0;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    overflow: hidden;
    max-width: 640px;
}

.doc-list > li {
    border-bottom: 1px solid #e9ecef;
}

.doc-list > li:last-child {
    border-bottom: 0;
}

.doc-list > li > a {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    text-decoration: none;
}

.doc-list > li > a:hover {
    background-color: #f4f6f9;
    text-decoration: underline;
}

/* The legacy icon_pdf.gif / icon_excel.gif / icon_word.gif markers, as CSS rather than markup.
   Applied to the <li>: <li class="doc-pdf">. Colours match the familiar file-type conventions so the
   list still scans the same way at a glance.

   These were solid coloured SQUARES until 2026-10-01. Two problems, both reported by Frank on the
   Sales Center news list: a square carries no meaning, so the colour was doing all the work - and the
   colour it used for PDF was #c8102e, the same red as .btn-danger. A page of 22 sales bulletins (or 52,
   on literature/Default) therefore rendered as a column of danger markers. Red reads as "something is
   wrong", which is the opposite of "here is a document to read".

   Now each type gets an actual glyph via mask-image (see --doc-icon-* on :root). The shape says
   "document" / "folder" / "video" / "external link", so the colour is no longer the only signal, and
   PDF moves off the danger red onto a deeper brick that is still conventionally PDF without being the
   delete colour. Keep .btn-danger and .doc-pdf on DIFFERENT reds - that separation is the point. */
.doc-list > li[class*="doc-"] > a::before {
    content: "";
    flex: 0 0 auto;
    width: 1.1em;
    height: 1.1em;
    background-color: #6c757d;
    -webkit-mask: var(--doc-icon-file) center / contain no-repeat;
    mask: var(--doc-icon-file) center / contain no-repeat;
}

.doc-list > li.doc-pdf > a::before { background-color: #a4262c; }
.doc-list > li.doc-excel > a::before { background-color: #1d6f42; }
.doc-list > li.doc-word > a::before { background-color: #2b579a; }

/* The three that are not a document at all get their own shape as well as their own colour. */
.doc-list > li.doc-folder > a::before {
    background-color: #c9922b;
    -webkit-mask-image: var(--doc-icon-folder);
    mask-image: var(--doc-icon-folder);
}

.doc-list > li.doc-video > a::before {
    background-color: #6a3d9a;
    -webkit-mask-image: var(--doc-icon-video);
    mask-image: var(--doc-icon-video);
}

.doc-list > li.doc-link > a::before {
    background-color: var(--lantech-blue-accent);
    -webkit-mask-image: var(--doc-icon-link);
    mask-image: var(--doc-icon-link);
}

/* Sub-heading INSIDE a section, labelling one group of documents - the legacy "Q Series" /
   "L Series" left-hand cell that ran alongside its own block of links. A .section-bar is the
   section; this is a group within it, so it is quieter than one. */
.doc-group-title {
    color: #495057;
    font-size: .9375rem;
    font-weight: 600;
    margin: 1rem 0 .375rem 0;
}

.section-bar + .doc-group-title {
    margin-top: .5rem;
}

/* Tool panel - the boxed form used throughout 01/pages/tools/ (file upload, video upload, PDF
   convert, price deviation...). The legacy version was a fixed 486px table with a "general_back.gif"
   tile behind it and a "dashboard_bttm.gif" image capping the bottom edge; the rounded border here
   does the same job without either graphic. */
.tool-panel {
    max-width: 520px;
    margin: 0 auto;
    background-color: #f7f9fc;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    padding: 1.25rem 1.5rem;
}

.tool-panel-title {
    color: #19456b;
    font-size: 1.125rem;
    font-style: italic;
    font-weight: 400;
    margin: 0 0 1rem 0;
}

/* Standalone pages - Login, Logout, AccessDenied, LoginChoose, Feedback and the MFA pages set
   Layout = null and carry their own <html>, deliberately: they are reached by users who are not
   employees, and the shared layout's chrome is the associate intranet's. They still link this file,
   so they need the shell rules the layout would otherwise provide.

   ".standalone-page" goes on <body>: it turns off the flex column the layout relies on and centres a
   single card on the legacy background. */
body.standalone-page {
    display: block;
    min-height: 100vh;
    padding: 1.5rem;
    background-repeat: repeat;
}

.standalone-brand {
    margin-bottom: 2.5rem;
}

.standalone-card {
    max-width: 30rem;
    margin: 0 auto;
    background: #fff;
    border-radius: .5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    padding: 1.75rem;
    text-align: center;
}

.standalone-card .stack-links a {
    display: block;
    padding: .25rem 0;
}

/* Data tables. Applied on top of Bootstrap's .table, so only the deltas are here. */
main .table > :not(caption) > * > * {
    padding: .4rem .5rem;
}

main .table > thead {
    background-color: #eef2f8;
    color: var(--lantech-blue);
}

/* RETIRED. The legacy pages tinted the edit/delete cells of a row (#CEE4CD / #ECDBDD) because the
   controls in them were bare anchors and nothing else said which was which. Now that those are
   real buttons, the tint says the same thing twice and stripes every data table with two columns
   of colour. Kept as no-ops so any page still carrying the class renders cleanly; remove the
   attribute when the page is next touched. */
.cell-edit,
.cell-delete {
    background-color: transparent;
}

/* Pages whose whole body is a single embedded iframe. The legacy markup asks for "height: 100%",
   which resolves against an auto-height ancestor and collapses the frame to ~150px; a
   viewport-relative height is the modern equivalent. The subtracted amount covers the sticky header,
   footer, and <main>'s own margin + padding. */
.embedded-tool-frame {
    display: block;
    width: 100%;
    height: calc(100vh - 175px);
    min-height: 480px;
    border: 0;
}

/* -----------------------------------------------------------------------------
   Cross-application bar - the slim grey strip above the main navigation, carrying the links to the
   other LantechNET applications (ERP Tools, WinMan, Sales Center, Europe Portal, Machine Tracker...).
   Replaces the legacy #54565b table row and its ".header_grayLinks" anchors.
   ----------------------------------------------------------------------------- */
.app-bar {
    background-color: var(--lantech-gray-bar);
    /* Legacy ".header_grayLinks" was "font-size: 14px !important" (App_Themes/main2/StyleSheet7.css).
       Restored 2026-09-29 - the bar had been converted at 13px and read smaller than it used to. */
    font-size: .875rem;
}

.app-bar .nav-link {
    color: #b9b9b9;
    padding: .2rem .6rem;
}

.app-bar .nav-link:hover,
.app-bar .nav-link:focus,
.app-bar .nav-link.active {
    color: #fff;
}

/* The legacy bar put "&nbsp;...|&nbsp;..." between every anchor (01/header.ascx lines 55-69).
   De-tabling dropped them and the links ran together with nothing but padding between, which is
   hard to scan - restored 2026-10-02 at Frank's request.

   Drawn, not typed: a 1px box one em tall rather than a literal "|" character. It tracks the bar's
   font-size, stays out of the accessibility tree (a screen reader would otherwise read "pipe"
   between every link), and does not get picked up when the bar is selected and copied.

   The "+" combinator puts a separator BETWEEN items instead of after each one, so the last link
   never trails a stray rule and the list stays correct when the conditional LINC item is absent.

   >= 992px only: below Bootstrap's lg breakpoint the bar collapses into a stacked list, where a
   vertical rule between rows would mean nothing.

   ONLY the items that actually carry a separator become flex containers. Applying it to every
   .nav-item broke the LOGOS dropdown (2026-10-02, caught immediately): for an absolutely positioned
   child with `top: auto`, a flex parent's align-items decides the static position, so `center` hung
   the 219px menu off the middle of its 27px item - `(27 - 219) / 2` = `top: -96px`, i.e. above the
   bar with its top clipped. The hover-opened menu has no explicit `top`, so it depends on that
   static position. LOGOS is the first item and never takes a separator, so it simply stays a block;
   the `top: 100%` below makes any FUTURE dropdown safe even if one is added mid-list. */
@media (min-width: 992px) {
    .app-bar .navbar-nav > .nav-item + .nav-item {
        display: flex;
        align-items: center;
    }

    .app-bar .navbar-nav > .nav-item.dropdown > .dropdown-menu {
        top: 100%;
    }

    .app-bar .navbar-nav > .nav-item + .nav-item::before {
        content: "";
        flex: 0 0 auto;
        width: 1px;
        height: 1em;
        background-color: #83868b;
    }
}

.app-bar .dropdown-menu {
    background-color: #fff;
    border: 0;
    border-radius: .375rem;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .2);
    font-size: .875rem;
}

/* Between Bootstrap's "lg" breakpoint (992px, where the menu stops being a hamburger and becomes a
   row of links) and about 1050px, the expanded link list plus the user's name is a few pixels wider
   than the bar has - so from 992 to 1049 the HEADER was pushing every page sideways, on every page
   in the app. The links wrap to a second row in that band instead. Nothing changes above it: there
   is room. Deliberately bounded at both ends: allowing the links to wrap at ANY width makes them
   wrap whenever the row merely has to shrink, which starts around 1100px and costs 65px of header
   on widths that were never broken. Found by measuring the shell at 1024 (improvement 1, task
   1.15). */
/* Page titles.

   Sales Center writes its page title as a bare <h1> - 38 of them, not one carrying a class - which
   takes Bootstrap's 2.5rem/40px. The WebApp writes <h1 class="h3"> and lands at 28px. So the two
   applications that share this stylesheet had drifted a full 12px apart on the most prominent text
   on every page, and 40px is two to three steps above anything the legacy pages had: those titles
   were <font size="3"> to <font size="6">, 16px to 32px.

   Bare <h1> is normalised to the WebApp's 28px. An explicit .h1-.h6 class still wins on specificity
   (0,1,0 beats an element selector), so a page that wants something else says so. Not scoped to
   <main>: five standalone pages (Layout = null) link this stylesheet and have no <main> of their own -
   StartupPackages, EmailVideo, SeeUsers, Confirm, LoginMfa. The three WinMan document templates are
   unaffected either way; they do not link this file. Found by backlog 56's audit. */
h1 {
    font-size: 1.75rem;
}

/* The brand image is the only thing in the bar with a text baseline, so as an inline element it
   carries descender space underneath and sits high: measured 12px above / 7px below, where it had
   been an even 10/10. Making it a block removes the line box and lets the navbar's own centring do
   the work. Only visible since the doctype fix put both applications into standards mode - in quirks
   mode that descender space did not exist. See backlog 58 / §91. */
.navbar-brand img {
    display: block;
}

@media (min-width: 992px) and (max-width: 1049.98px) {
    .navbar-expand-lg .navbar-nav {
        flex-wrap: wrap;
    }
}

/* The legacy bar opened its LOGOS list on hover. Kept, additively: data-bs-toggle still provides
   click and keyboard behaviour, which is what touch devices and screen readers use. */
@media (min-width: 992px) {
    .app-bar .nav-item.dropdown:hover > .dropdown-menu,
    .user-menu .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
    }
}

/* -----------------------------------------------------------------------------
   Header user-name menu (the "Log out" control).

   Styled as part of the blue bar rather than as a default Bootstrap dropdown: the toggle is a
   translucent pill on the navbar's own blue, and the menu continues in the darker blue so it reads
   as the bar extending downwards instead of a white panel appearing over it.

   NOTE: the bundled Bootstrap is 5.1, which has no --bs-dropdown-* CSS variables (those arrive in
   5.3), so the menu is restyled with real rules. Setting those variables here would look correct and
   do nothing.
   ----------------------------------------------------------------------------- */
.user-menu .nav-link {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: #fff;
    background-color: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    padding: .15rem .7rem .15rem .2rem;
    font-size: .875rem;
    transition: background-color .15s ease-in-out;
}

.user-menu .nav-link:hover,
.user-menu .nav-link:focus,
.user-menu .nav-link.show {
    color: #fff;
    background-color: rgba(255, 255, 255, .22);
}

.user-menu .user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .25);
}

.user-menu .user-avatar svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

/* Long "Name - Company" labels truncate rather than pushing the pill off the end of the bar; the
   full value stays available as the accessible name. */
.user-menu .user-name {
    max-width: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu .dropdown-menu {
    background-color: var(--lantech-blue-dark);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: .5rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .30);
    padding: .3rem;
    min-width: 11rem;
    margin-top: .5rem;
}

/* Invisible bridge across the gap above the menu, so travelling from the pill down to "Log out"
   never leaves the hover area and closes it mid-move. Must match the margin-top above. */
.user-menu .dropdown-menu::before {
    content: "";
    position: absolute;
    top: -.5rem;
    left: 0;
    right: 0;
    height: .5rem;
}

.user-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .45rem .6rem;
    border: 0;
    border-radius: .375rem;
    background: none;
    color: #dfe7f5;
    font-size: .875rem;
    text-align: left;
}

.user-menu .dropdown-item svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
    opacity: .85;
}

.user-menu .dropdown-item:hover,
.user-menu .dropdown-item:focus {
    background-color: var(--lantech-blue-accent);
    color: #fff;
}

.site-footer {
    background-color: var(--lantech-blue);
    color: #cfd8ea;
    text-align: center;
    font-size: .75rem;
    padding: 4px 0;
}

/* =============================================================================
   INTRANET HOME (Pages/01/Home) - improvement 1, Tier B.

   The home page is a three-column widget board and was the most table-heavy page in the
   application (42 of them). Almost all of those tables were drawing one of three things, so each
   gets a class here and the page becomes a list of widgets.
   ============================================================================= */

.home-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
}

/* Legacy column widths: 230 left, fluid centre, 250 right, inside a 1200px table. The centre
   column may shrink but not below 480px before the columns wrap. */
.home-col-left {
    flex: 0 0 230px;
    max-width: 100%;
}

.home-col-main {
    flex: 1 1 480px;
    min-width: 0;
}

.home-col-right {
    flex: 0 0 250px;
    max-width: 100%;
}

/* The centre column's news/announcement widget: a pale header strip over a paler body, which the
   legacy drew as a 1px-cellspacing table over a #dae2e4 background. */
.home-card {
    border: 1px solid #dae2e4;
    margin-bottom: 1rem;
}

.home-card-head {
    background-color: #e4ecf4;
    padding: .625rem;
    /* Legacy was <font size="4"><strong> - a NAMED size of 18px, not 24px. See the note at the top
       of the ".side-link" rule below. */
    font-size: 1.125rem;
    font-weight: 700;
}

.home-card-body {
    background-color: #f0f7fd;
    padding: .625rem;
}

/* A whole card that is itself a link (TCP Fleet Performance). */
a.home-card {
    display: block;
    color: inherit;
    text-decoration: none;
}

a.home-card:hover .home-card-head,
a.home-card:focus-visible .home-card-head {
    background-color: #c1cdd6;
}

/* The right column's stack of shortcuts. These were <td class="menuList" onclick="..."> with
   onmouseover/onmouseout recolouring - clickable cells that no keyboard or screen reader could
   reach. They are real links now; the hover colour is the same, from CSS instead of inline JS. */
.side-link {
    display: block;
    margin-bottom: .25rem;
    padding: .5rem;
    background-color: #d2d2d2;
    color: inherit;
    /* Legacy was <font size="3"> inside the cell - 16px. "size=3" is the MIDDLE of HTML's seven
       named font sizes and means 16px; it is not a pixel value, and reading it as one is what made
       this and the card heads above a step or two larger than they had ever been. Same unit trap as
       the PriceDeviationReport DEL control (PROGRESS backlog 47): <font size=N> is a named size. */
    font-size: 1rem;
    text-decoration: none;
}

.side-link:hover,
.side-link:focus-visible {
    background-color: #c1cdd6;
    color: inherit;
}

/* The two shaded side panels - "This Week's Events" (over celebrations_back.png) and
   "My Websites". */
.home-panel {
    background-color: #d4dade;
    padding: .5rem;
    margin-bottom: 1rem;
}

.home-panel-title {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 18px;
    font-weight: 600;
}

/* Exchange Rates panel. The legacy box was deliberately smaller than its neighbours and the
   conversion flattened that out - every line came back a size or two larger:

       "Exchange Rates:"    <font size=2>  = small = 13px   -> had become 16px
       "(from US Dollar)"   no font tag    = td's 11px      -> had become 16px
       "last updated" + date, and the six rate rows, likewise 11px -> 14px

   (home.aspx.vb loadExchangeRates, line 910. Note the parenthetical sits OUTSIDE the size=2 tag
   there, which is why it was the smallest thing in the box and had become the largest.)

   Going back to 11px would undo the deliberate sitewide 14px baseline, so this steps down one from
   the baseline instead - the same call Frank made for the celebration lists (".home-celebration").
   Scoped to this panel: the other home panels really were 16px in the legacy, so .home-panel-title
   stays as it is for them. Frank, 2026-10-02. */
.home-panel-rates {
    font-size: .8125rem;
}

.home-panel-rates .home-panel-title {
    font-size: .875rem;
    line-height: 1.25;
}

.home-panel-rates .home-panel-title span {
    font-size: .8125rem;
}

/* The calendar chip in the corner of the events panel - today's date, drawn in CSS.

   Legacy did this with "celebrations_back.png", and the first pass of the conversion carried it
   over: a 240x1000 image, transparent everywhere except a 50x53 calendar in one corner, hung
   behind the WHOLE panel as a background and relied on to line up under two loose text divs. It
   could not scale, it tied the panel's geometry to a bitmap, and 99.7% of the bytes were empty
   pixels. This is the same chip - same red, same proportions - as one self-contained element, so
   it scales with the type around it and the panel is free to move. The image is no longer
   referenced by anything. */
.home-datechip {
    display: block;
    flex: 0 0 auto;
    width: 3.25rem;
    overflow: hidden;
    border: 1px solid #9c9c9c;
    border-radius: .25rem;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1;
    text-align: center;
}

.home-datechip .home-datechip-month {
    display: block;
    position: relative;
    /* The red of the graphic this replaces, sampled from it: #dc6f70 at the top down to #ad4344. */
    background-image: linear-gradient(#dc6f70, #ad4344);
    color: #fff;
    font-size: .625rem;   /* 10px, as the text over the graphic was */
    font-weight: 700;
    letter-spacing: .04em;
    padding: .5rem 0 .1875rem;   /* the top padding is room for the binding rings below */
}

/* The two binding rings across the top of the red bar. */
.home-datechip .home-datechip-month::before,
.home-datechip .home-datechip-month::after {
    content: "";
    position: absolute;
    top: .125rem;
    width: .1875rem;
    height: .3125rem;
    border-radius: 1px;
    background-color: #e6e6e6;
}

.home-datechip .home-datechip-month::before {
    left: 30%;
}

.home-datechip .home-datechip-month::after {
    right: 30%;
}

.home-datechip .home-datechip-day {
    display: block;
    /* <font size="4"><i> - 18px, as above. */
    font-size: 1.125rem;
    font-style: italic;
    color: #26292e;
    padding: .25rem 0 .3125rem;
}

/* Celebration rows: a 24x18 slot that holds the cake/anniversary icon on the day itself and is
   empty otherwise. The legacy used a spacer.gif of the same size to hold the column open. */
.home-celebration {
    display: flex;
    align-items: flex-end;
    gap: .25rem;
    /* One step below the 14px body baseline. The legacy list was smaller still - the names carried no
       font tag at all, so they took StyleSheet7.css's `td { font-size: 11px }`, while the "Birthdays:" /
       "Anniversaries:" labels above them are <font size="3"> = medium = 16px resolved against the ROOT,
       not against that 11px cell - which is why the labels already matched and only the names did not.
       Going back to 11px would undo the deliberate sitewide 14px baseline, so this stops one step down.
       Frank, 2026-10-01. */
    font-size: .8125rem;
}

.home-celebration-icon {
    flex: 0 0 24px;
    height: 18px;
}

.home-celebration-years {
    margin-left: auto;
    padding-left: .5rem;
    white-space: nowrap;
}

/* "My Websites" rows: a 16px lock/globe icon then the link. */
.home-website {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    padding: .1rem 0;
}

.home-website img.home-website-icon {
    flex: 0 0 16px;
}

.home-website a {
    text-decoration: none;
}

.home-website a:hover {
    text-decoration: underline;
}

/* Summary Dashboard. The numbers ARE tabular data, so they stay a <table> - what goes is the
   bgcolor/<font> pair on every single cell, which is all the legacy markup used for colour. */
.dashboard-table {
    font-size: .8125rem;
    margin-bottom: 0;
}

.dashboard-table > :not(caption) > * > * {
    padding: .25rem .4rem;
}

/* The two header bands and the totals band, in the legacy colours. !important is needed only to
   beat Bootstrap's own --bs-table-bg shadow on <td>/<th>. */
.dashboard-head > *,
.dashboard-total > * {
    color: #fff !important;
}

.dashboard-head > * {
    background-color: #19456b !important;
}

.dashboard-total > * {
    background-color: #006600 !important;
}

.dashboard-head a,
.dashboard-total a {
    color: #fff;
}

.dashboard-subtotal > * {
    background-color: #eaffea !important;
}

.dashboard-subtotal a {
    color: #006600;
}

.dashboard-row > * {
    background-color: #f0f7fd !important;
}

/* A region: the grey toggle bar, then the breakdown it shows or hides. */
.dashboard-region {
    margin-bottom: .25rem;
}

.dashboard-region-head {
    display: flex;
    align-items: center;
    /* Wraps rather than overflows once the column is too narrow to hold the toggle and all four
       figures on one line - which is what the home page's centre column is on a phone. No media
       query: the break happens when it has to, at whatever width that turns out to be. */
    flex-wrap: wrap;
    gap: .5rem;
    background-color: #666;
    padding: .15rem .25rem;
}

.dashboard-region-toggle {
    flex: 0 0 100px;
    border: none;
    background-color: transparent;
    color: #fff;
    text-align: left;
    cursor: pointer;
}

/* The collapsed row's four figures. They line up with the four money columns of the breakdown
   underneath, so the widths match _RegionDashboard's. That alignment only means anything while the
   breakdown is not itself scrolling sideways (".table-scroll"), so on a narrow column these wrap
   instead of widening the page. */
.dashboard-region-summary {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .4rem;
    font-size: .8125rem;
}

.dashboard-region-summary a {
    flex: 0 0 88px;
    color: #fff;
    text-align: right;
}

/* New-hire cards in the left column. */
.home-newhire {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: .75rem;
}

.home-newhire img {
    border: 1px solid #000;
}

/* =============================================================================
   EUROPE PORTAL (Pages/05) - improvement 1, Tier B.

   Area 05 is the only part of LantechNET whose look is carried by images rather than by markup:
   a 990px stage over a photographic backdrop, with panels drawn from three sliced PNGs. The
   de-tabling therefore preserves the images and replaces only the table scaffolding around them -
   unlike area 01, where the tables were the whole of the styling and could simply go.

   Every rule below reproduces an HTML background= attribute. That attribute means, exactly:
   repeat from the top-left at natural size, never scaled. The declarations keep that, so a
   de-tabled page renders pixel-for-pixel as the table version did.
   ============================================================================= */

/* The fixed 990px column every 05 page is built in. max-width lets it shrink on a phone instead
   of forcing a horizontal scrollbar; at >=990px it is the legacy width exactly. */
.portal-page {
    width: 990px;
    max-width: 100%;
    margin: 0 auto;
}

/* The tall photographic backdrop behind the page body. Both files are 990x2000, so at the legacy
   width they fill without tiling; the repeat only matters if a page runs past 2000px, which is
   what the legacy table did too. Pages set their own min-height (legacy: 550/588/662). */
.portal-stage {
    background-image: url("/05/graphics/background.jpg");
    background-repeat: repeat;
}

.portal-stage-grey {
    background-image: url("/05/graphics/background_grey.jpg");
    background-repeat: repeat;
}

/* Panel: category_header.png (606x38) + category_body.png (606x500) + category_bottom.png (606x8).
   Used by every 05 form - password update, media add/delete, content manager, the e-mail pages. */
.portal-panel {
    width: 606px;
    max-width: 100%;
    margin: 0 auto;
    text-align: left;
}

.portal-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    min-height: 38px;
    padding: 0 .5rem;
    background-image: url("/05/graphics/category_header.png");
    background-repeat: repeat-x;
    /* Every legacy panel head this replaces was <font size="3"> - a NAMED 16px, not 18. Checked on
       all six: admin_ContentAdd, admin_MediaAdd, admin_MediaDelete, admin_Users_Change/Search,
       contactEmail, emailDocument and passwordUpdate. Was 1.125rem; corrected with backlog 56. */
    font-size: 1rem;
}

.portal-panel-body {
    min-height: 140px;
    padding: .75rem 1rem;
    background-image: url("/05/graphics/category_body.png");
    background-repeat: repeat;
}

/* The admin user pages use a different body tile (291x365) behind the same panel. */
.portal-panel-body-alt {
    background-image: url("/05/graphics/contentBackground.png");
}

.portal-panel-foot {
    height: 8px;
    background-image: url("/05/graphics/category_bottom.png");
    background-repeat: no-repeat;
}

/* Section bar inside a portal panel ("COMPANY", "USER"). Area 01's .section-bar is a pale blue
   strip on a white card; this one is the portal's dark navy, which is what the legacy
   bgcolor="#3F4F78" table was. Kept separate rather than themed, because the two sit on
   completely different backgrounds. */
.portal-section-bar {
    background-color: #3f4f78;
    color: #fff;
    margin: 1rem 0 .5rem 0;
    padding: .35rem .75rem;
    font-size: .9375rem;
}

/* The portal's buttons are PNGs (bttn_add, bttn_change, bttn_cancel, bttn_email2, bttn_download2).
   A borderless, transparent <button> keeps them submitting a form while looking like the image
   alone, which is what the legacy <input type="image">/linked <img> did. */
.portal-img-button {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    border: 0;
    background: transparent;
    padding: 0;
}

/* "Cancel" in the panel head - the dark red word plus bttn_cancel.png, as a real <button> when it
   posts and a plain link when it only goes back. */
.portal-cancel {
    color: #9d0b0a;
    font-weight: 700;
    text-decoration: none;
}

a.portal-cancel:hover,
a.portal-cancel:focus {
    color: #9d0b0a;
    text-decoration: underline;
}

/* Product-line landing pages (case / tray-lid / stretch). The artwork is a single 1063x626 image
   and the "links" are transparent boxes sitting over the machines drawn in it, so the hit areas
   have to keep their legacy pixel sizes - see the page files. Cropped, never scaled, exactly as
   the 990x600 table with background= cropped it. */
.portal-hotspots {
    display: flex;
    min-height: 600px;
    padding: 3px;
    background-repeat: no-repeat;
}

/* flex:1 1 0 is the legacy width="33%"/"25%"/"50%" columns; align-items:center is a table cell's
   default valign. A page overrides both with Bootstrap's justify-content and align-items
   utilities where the legacy cell carried an explicit align= or valign=. */
.portal-hotspots > div {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    padding: 3px;
}

.portal-hotspots a {
    display: block;
}

/* The portal's own header strip and black menu bar (legacy 05/05_header.ascx + 05/menu.ascx).
   The menu rules were an inline <style> in menu.ascx; they live here now so the partial is markup
   only and the bar is styled once rather than on every page that renders it. */
.portal-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 4px 0 0 40px;
}

.portal-welcome {
    padding-bottom: .35rem;
    font-size: .875rem;
    font-style: italic;
}

.portal-menu {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 45px;
    padding: 0 8px;
    background: #000;
}

.portal-menu a,
.portal-menu a:link,
.portal-menu a:visited,
.portal-menu a:hover,
.portal-menu a:active {
    display: inline-block;
    padding: 4px 18px;
    background-color: rgba(255, 255, 255, .15);
    font-family: "Times New Roman", Georgia, serif;
    font-style: italic;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 2px;
    text-decoration: none;
    color: #c8c8c8;
}

/* 05/Home's promotion block: a 680x450 area over promo artwork, with the editable copy sitting in
   a 288px column at its top-left. The artwork is 729x515 and the legacy table cropped it to
   680x450 - no-repeat at natural size does the same. */
.portal-promo {
    width: 680px;
    max-width: 100%;
    min-height: 450px;
    padding-top: 2rem;
    background-repeat: no-repeat;
}

.portal-promo-copy {
    max-width: 288px;
}

/* The narrow right-hand column on 05/Home. The tile behind the "Add/Edit users" link is the same
   contentBackground.png the admin panels use. */
.portal-side {
    width: 250px;
    max-width: 100%;
}

.portal-side-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    background-image: url("/05/graphics/contentBackground.png");
    background-repeat: repeat;
}

/* machineCategory - the content sits in a right-hand column because the machine artwork behind it
   occupies the left of the 990px stage. */
.machine-content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-top: 1rem;
}

/* The "SHOWING:" strip. header_back.png is 628x116 behind a 780-wide box, so it tiles - which is
   exactly what the legacy background= did, seam included. */
.machine-header {
    width: 780px;
    max-width: 100%;
    padding: .5rem;
    background-image: url("/05/graphics/header_back.png");
    background-repeat: repeat;
}

/* One machine in the SHOWING selector. The on/off PNGs are 1x60 gradient strips, so they repeat
   across the button's width and give it its fill. */
.machine-pick {
    display: flex;
    justify-content: center;
    min-width: 96px;
    min-height: 52px;
    padding: .45rem .5rem 0 .5rem;
    background-repeat: repeat-x;
    color: #fff;
    font-size: .875rem;
    text-align: center;
}

.machine-pick a {
    color: #fff;
    text-decoration: none;
}

.machine-pick a:hover {
    text-decoration: underline;
}

.machine-tabs {
    display: flex;
    flex-wrap: wrap;
}

/* machineCategory's file rows. Each row's background is one of three tiles that stripe the row;
   which one is chosen per row in the page, so only the shared geometry is here. */
.media-list {
    width: 620px;
    max-width: 100%;
}

.media-row {
    display: flex;
    align-items: center;
    min-height: 35px;
    background-repeat: repeat;
}

.media-row > * {
    padding: 0 .5rem;
}

/* The file name takes the free space; the trailing cell (email+download, or change+delete) keeps
   the fixed width the legacy table gave it so the buttons line up down the list. */
.media-row-name {
    flex: 1 1 auto;
    min-width: 0;
}

.media-row-actions {
    flex: 0 0 auto;
    white-space: nowrap;
}

.media-group-header {
    min-height: 33px;
    color: #fff;
    font-size: .875rem;
    background-image: url("/05/graphics/fileBack_application.jpg");
}

.media-back-blue {
    background-image: url("/05/graphics/fileBack_blue.jpg");
}

.media-back-images {
    background-image: url("/05/graphics/fileBack_blue_images.jpg");
}

/* Narrow screens.

   The portal splits in two here. Panel pages - every form - are ordinary content in a 606px box
   that shrinks to the viewport, and they need no rule.

   The artwork pages cannot reflow. Their links are transparent boxes positioned over machines
   drawn INTO a bitmap, so the moment the geometry moves the links stop pointing at the machines
   they name. Scaling the images does not work either: the hit areas are 1x1 spacer.gifs sized by
   width=/height=, and any rule that makes their height automatic collapses them to a square.

   So those pages keep the 990px stage at full size and scroll it horizontally inside the page.
   The scrollbar is on .portal-page-fixed, not on the document, so the rest of the site - header,
   footer, menu - stays put. */
.portal-page-fixed {
    overflow-x: auto;
}

.portal-page-fixed .portal-stage,
.portal-page-fixed .portal-hotspots,
.portal-page-fixed .machine-content {
    width: 990px;
}

/* =============================================================================
   SALES CENTER - the pieces that exist only in the "/02" application (improvement 1, Tier B').

   Kept in this shared file rather than in LantechNet.SalesCenter/wwwroot/css/site.css because that
   copy is superseded and no longer linked: the root application owns "/css" and serves one theme to
   both deployments. See the file header and lantechnet-iis-two-deployments.
   ============================================================================= */

/* Regional Sales Manager directory (pages/contact/rsm.aspx). Was three columns of 220px bordered
   tables, one row per person. The COLOURS ARE LOAD-BEARING: each territory bar matches that
   territory's colour on RSMMap.gif beside it, so every one is kept exactly, inline on the element.
   These rules only supply the shape. */
.rsm-card {
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    overflow: hidden;
    margin-bottom: 1rem;
}

.rsm-card-head {
    background-color: #000;
    color: #fff;
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .02em;
    padding: .375rem .625rem;
}

/* One territory. The background colour (and, for the pale ones, the text colour) comes from the
   page, so this rule must not set either. */
.rsm-region {
    font-size: .875rem;
    padding: .3125rem .625rem;
}

.rsm-person {
    display: flex;
    gap: .625rem;
    padding: .625rem;
    background-color: #f3f3f3;
    font-size: .875rem;
}

.rsm-person-body {
    flex: 1 1 auto;
    min-width: 0;
}

.rsm-person-name {
    font-weight: 700;
}

/* The legacy rows printed the labels in black and the values in grey; this keeps that reading
   without a <font> per line. */
.rsm-person-body .rsm-label {
    color: #000;
}

.rsm-person-body {
    color: #666;
}

.rsm-photo {
    flex: 0 0 auto;
    order: 2; /* the photo sat at the right of the cell (align="right") */
    width: 50px;
    height: 66px;
    object-fit: cover;
}

/* Sales Center home page (02/home.aspx). The left-hand shortcut column keeps leftMenu.png behind
   it, repeated from the top-left at natural size exactly as the legacy background= attribute
   painted it - but the IMAGE URL is set inline on the element by the page, not here. This file is
   served by the ROOT application at /css/site.css, so a url() in it would resolve against "/css/",
   and hard-coding "/02/graphics/..." instead would only be right in production: in development
   Sales Center runs as its own process with no "/02" PathBase. Url.Content("~/...") on the page is
   correct in both. Same trap as razor-tilde-not-resolved-in-background, one level further out.
   The buttons stay at their native 252x52 so the artwork lines up. */
.sc-home-menu {
    width: 300px;
    max-width: 100%;
    padding: 1rem 0;
    background-repeat: repeat;
    text-align: center;
}

.sc-home-menu > a,
.sc-home-menu > img {
    display: inline-block;
    margin: 6px 0;
}

.sc-home-menu .leftMenuBtn {
    width: 252px;
    height: 52px;
}

.sc-home-banner {
    background-color: #f0f0f0;
    padding: 10px;
    margin-bottom: 1rem;
}

/* The banner spans the content column. Stated explicitly rather than left to the intrinsic size:
   the artwork is wider than the column, so "max-width: 100%" alone would happen to fill it today and
   would silently stop filling the moment anyone re-exported the file smaller. The legacy width=661
   attribute pinned it to the old table cell and left ~190px of grey showing in the de-tabled column.
   width/height on the <img> stay at the file's intrinsic size, so the ratio is known before it loads
   and the block does not jump. Frank, 2026-10-01. */
.sc-home-banner img {
    display: block;
    width: 100%;
    height: auto;
}

.sc-home-news {
    background-color: #e5e5e5;
    padding: 1rem;
}

.sc-home-news .doc-list {
    background-color: #fff;
    max-width: none;
}

/* =============================================================================
   PRINT (improvement 1, task 1.16)

   The legacy site had no print stylesheet at all - not one "@media print", no media="print" link
   and no window.print() anywhere in C:\Projects\LantechNET. So nothing below is a restoration of
   lost behaviour; it is the converted layout's own obligation.

   Three things print wrong by default, and the first two are silent - the page looks fine on screen
   and comes out of the printer missing content:

     1. Anything inside ".table-scroll" / ".scroll-x" / ".portal-page-fixed" is CLIPPED on paper.
        Those containers exist so wide content scrolls instead of pushing the page sideways (task
        1.15), but "overflow-x: auto" has no scrollbar on paper - whatever sits past the right edge
        is simply not printed, with nothing to say so. There are 24 of them across the two apps.
     2. White-on-dark bands - the dashboard head and totals, the grouped-table bands, the region
        rows - lose their background, because browsers drop backgrounds when printing unless a page
        asks otherwise. White text on white paper prints as nothing at all.
     3. The report results table paginates by setting an inline "display: none" on the rows of every
        page except the one being viewed, so printing an 800-row report produced 25 rows.

   Deliberately NOT done: expanding the collapsed dashboard regions. That looks like the same
   problem as (3) and is not - report pagination is an artefact of page size, whereas collapsing a
   region is the reader saying which regions they care about, and the summary row still carries that
   region's four figures.
   ============================================================================= */
@media print {
    /* Screen chrome. Note this hides ".btn" and the pager, but NOT plain <button>: the dashboard's
       region toggles are buttons whose label IS the region name, so hiding buttons wholesale would
       print the dashboard with every region unlabelled. */
    header,
    .portal-header,
    .site-footer,
    .navbar-toggler,
    #report-pagination,
    .sort-arrow,
    .row-actions,
    .btn {
        display: none !important;
    }

    /* The white card is a screen device; on paper the sheet already is the card. */
    body {
        background: #fff !important;
    }

    main {
        max-width: none;
        margin: 0;
        padding: 0;
        background: #fff;
        border-radius: 0;
        box-shadow: none;
    }

    /* (1) Release every horizontal-scroll container, or its right-hand content never reaches the
       paper at all. */
    .table-scroll,
    .scroll-x,
    .portal-page-fixed {
        overflow: visible !important;
    }

    /* (2) Keep the bands that carry white text - without this they print white on white. */
    .dashboard-head > *,
    .dashboard-total > *,
    .dashboard-region-head,
    .table > tbody > tr.table-group-head > th {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* (3) A printed report is the whole report. The pager hides rows with an inline style, which an
       "!important" author rule outranks. */
    #report-results-table tbody tr[data-row] {
        display: table-row !important;
    }

    /* Ordinary table hygiene: repeat the head on each sheet, keep a row on one sheet. */
    table thead {
        display: table-header-group;
    }

    table tr,
    .home-card,
    .home-panel {
        page-break-inside: avoid;
    }

    /* On an intranet every href is relative, so printing URLs after links is noise. */
    a {
        color: #000;
        text-decoration: none;
    }
}