/*
 * IMS theme
 * =========
 * Sits on top of AdminLTE 2. Two jobs:
 *
 *   1. Supply the handful of classes the old Flaty skin defined that the 59
 *      .aspx pages still use, so none of that markup had to be edited.
 *   2. Tighten AdminLTE's defaults for a dense, form-heavy back-office app -
 *      these screens carry 400 inputs and 38 grids, so the stock spacing
 *      wastes a lot of vertical room.
 *
 * Presentation only. No control ids, markup structure or logic depend on this.
 */

/* ============================================================
   1. PANELS  -  Flaty .box-title / .box-content / .box-gray
   AdminLTE already defines .box; it expects .box-header/.box-body.
   These map the old names onto the same look.
   ============================================================ */

.box {
    border-top: 3px solid #3c8dbc;   /* AdminLTE's primary accent */
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
    margin-bottom: 18px;
}

.box.box-gray {
    border-top-color: #79858f;
}

/* Flaty's .box-title is a full header bar, unlike AdminLTE's inline heading. */
.box > .box-title {
    display: block;
    position: relative;
    padding: 11px 15px;
    margin: 0;
    background: #fbfcfd;
    border-bottom: 1px solid #eef1f4;
    border-radius: 3px 3px 0 0;
    color: #2f3c48;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
}

/* The pages put <h1>-<h5> inside .box-title; normalise them all. */
.box > .box-title > h1,
.box > .box-title > h2,
.box > .box-title > h3,
.box > .box-title > h4,
.box > .box-title > h5 {
    display: inline-block;
    margin: 0;
    padding: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: inherit;
    text-transform: capitalize;
}

.box-content {
    padding: 15px;
    background: #fff;
    border-radius: 0 0 3px 3px;
}

.box-content:before,
.box-content:after { content: " "; display: table; }
.box-content:after { clear: both; }

.box-tool {
    float: right;
    color: #9aa5b1;
    margin-left: 8px;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.4;
}

.box-tool:hover { color: #5a6570; text-decoration: none; }

/* Some panels put action buttons in the header rather than an icon link
   (Add Term / Add FOB on the invoice, temp-invoice and quotation screens).
   The header is padded for a title, so pull the buttons up by half the
   difference to sit them on the title's optical centre, and cancel the
   inherited link colour so .btn styling wins.

   These carried inline "margin-top:-13px; height:25px" tuned for the old
   Flaty header; that fixed height clipped the label and the offset lifted
   them clear out of the bar. Handling it here keeps all three pages
   consistent and leaves nothing to drift. */
.box > .box-title > .box-tool {
    margin-top: -5px;
    margin-left: 0;
    color: inherit;
    line-height: normal;
}

.box > .box-title > .box-tool .btn {
    height: auto;
    margin-left: 6px;
    padding: 5px 12px;
    font-size: 12px;
    line-height: 1.4;
    vertical-align: middle;
}

/* An UpdatePanel wraps these buttons and renders as a block-level <div>,
   which would otherwise drop them onto their own line. */
.box > .box-title > .box-tool > div { display: inline-block; }

.fill-head {
    background: #f7f9fa;
    padding: 8px 15px;
    margin: 0;
    border-bottom: 1px solid #eef1f4;
    font-weight: 600;
}

/* ============================================================
   2. FORMS  -  denser than AdminLTE's default
   ============================================================ */

/* Bootstrap 2 holdover Flaty kept; BS3 dropped it. Plain wrapper. */
.controls { position: relative; min-height: 1px; }
.form-horizontal .controls { margin-bottom: 0; }

.form-group { margin-bottom: 12px; }

.control-label {
    font-weight: 600;
    color: #4a5560;
    font-size: 13px;
    padding-top: 7px;
}

.form-control {
    height: 32px;
    padding: 5px 10px;
    font-size: 13px;
    border-color: #d5dbe0;
    border-radius: 3px;
    box-shadow: none;
    transition: border-color .15s ease-in-out;
}

.form-control:focus {
    border-color: #3c8dbc;
    box-shadow: 0 0 0 2px rgba(60, 141, 188, .12);
}

textarea.form-control { height: auto; }

/* ASP.NET renders validators as inline spans; keep them from breaking layout. */
span[id*="RequiredFieldValidator"],
span[id*="RegularExpressionValidator"],
span[id*="CompareValidator"] {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    margin-top: 2px;
}

/* ============================================================
   3. BUTTONS
   ============================================================ */

.btn {
    border-radius: 3px;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 14px;
    transition: background-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.btn:active, .btn.active { box-shadow: inset 0 2px 4px rgba(0,0,0,.1); }

/* BS3 dropped .btn-inverse; Flaty's dark + neutral buttons. */
.btn-inverse {
    color: #fff;
    background-color: #3c8dbc;
    border-color: #367fa9;
}

.btn-inverse:hover, .btn-inverse:focus, .btn-inverse:active, .btn-inverse.active {
    color: #fff;
    background-color: #367fa9;
    border-color: #2b6a8f;
}

.btn-gray {
    color: #fff;
    background-color: #6c757d;
    border-color: #60686f;
}

.btn-gray:hover, .btn-gray:focus, .btn-gray:active, .btn-gray.active {
    color: #fff;
    background-color: #60686f;
    border-color: #525960;
}

/* Small round icon buttons in the grids (edit / delete). */
.btn-circle {
    width: 28px;
    height: 28px;
    padding: 0;
    line-height: 28px;
    border-radius: 50%;
    text-align: center;
    font-size: 12px;
}

.btn-circle.btn-sm {
    width: 25px;
    height: 25px;
    line-height: 25px;
    font-size: 11px;
}

/* ------------------------------------------------------------
   Grid action buttons (Update / Delete columns)
   ------------------------------------------------------------
   These are LinkButtons whose icon comes from a class on the button
   itself (e.g. "btn btn-success btn-sm icon-ok") rather than from a
   child <i>, so they render as an <a> with no text content. Without
   a fixed size an empty <a class="btn"> collapses to its padding and
   the pair wraps onto two lines in a narrow column - which is what
   made the Update cell render as one tall block.

   Sized as equal squares, laid out in a row, and centred in the cell.
   ------------------------------------------------------------ */

.table td > .btn[class*="icon-"] {
    display: inline-block;
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0 2px;
    line-height: 30px;
    text-align: center;
    font-size: 13px;
    vertical-align: middle;
    border-radius: 3px;
}

/* The icon glyph itself: Font Awesome v3 sets these on :before. Keep it
   centred and drop the right margin FA adds for text-bearing buttons. */
.table td > .btn[class*="icon-"]:before {
    margin: 0;
    line-height: inherit;
}

/* Keep both buttons on one line and centred within the action column. */
.table td:has(> .btn[class*="icon-"]) {
    white-space: nowrap;
    text-align: center;
}

/* :has() is unsupported in older engines; this fallback centres any cell
   whose only content is action buttons, via the grid's own centered class. */
.table .btn[class*="icon-"] + .btn[class*="icon-"] {
    margin-left: 4px;
}

/* Hover feedback - these are destructive/committing actions, so make the
   distinction obvious rather than relying on colour alone. */
.table td > .btn[class*="icon-"]:hover {
    box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
}

/* btn-success / btn-danger are Bootstrap's own; soften them slightly so a
   grid full of them is not overwhelming. */
.table td > .btn-success[class*="icon-"] {
    background-color: #46a24a;
    border-color: #3e9142;
}

.table td > .btn-success[class*="icon-"]:hover {
    background-color: #3e9142;
    border-color: #35803a;
}

.table td > .btn-danger[class*="icon-"] {
    background-color: #d9534f;
    border-color: #c9433f;
}

.table td > .btn-danger[class*="icon-"]:hover {
    background-color: #c9433f;
    border-color: #b53c38;
}

/* Round variants used on the list screens keep their circle. */
.table td > .btn-circle[class*="icon-"] {
    width: 28px;
    height: 28px;
    line-height: 28px;
    border-radius: 50%;
}

/* ============================================================
   4. TABLES / GRIDVIEWS
   38 GridViews render as <table class="table table-bordered">.
   ============================================================ */

.table { margin-bottom: 0; background: #fff; }

.table > thead > tr > th {
    background: #f4f7f9;
    border-bottom: 2px solid #e3e8ec !important;
    color: #35414d;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 9px 8px;
    vertical-align: middle;
    white-space: nowrap;
}

.table > tbody > tr > td {
    padding: 7px 8px;
    font-size: 13px;
    vertical-align: middle;
    border-top: 1px solid #eef1f4;
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
    border-color: #e6eaee;
}

.table-hover > tbody > tr:hover { background-color: #f6f9fb; }

/* Zebra striping: GridViews rarely set AlternatingRowStyle. */
.table > tbody > tr:nth-child(even) { background-color: #fcfdfe; }
.table > tbody > tr:nth-child(even):hover { background-color: #f6f9fb; }

/* Used by 5 of the invoice/CM/quotation pages; was never defined anywhere. */
.centered,
.centered > tbody > tr > td,
.centered > thead > tr > th { text-align: center; }

.centered > tbody > tr > td:first-child,
.centered > thead > tr > th:first-child { text-align: left; }

/* GridView pager */
.table + table,
tr.pager td table { margin-top: 6px; }

tr.pager td table td {
    padding: 0 3px;
    font-size: 12px;
}

/* Inputs inside grid cells should not blow the row height out. */
.table .form-control { height: 28px; padding: 3px 7px; font-size: 12px; }

/* ============================================================
   5. SIDEBAR
   The menu now uses AdminLTE's own .sidebar-menu / .treeview-menu,
   so this only adds the bits the stock theme leaves open.
   ============================================================ */

.skin-blue .sidebar-menu > li > a { font-size: 14px; }

.skin-blue .sidebar-menu > li > a > .fa {
    width: 20px;
    text-align: center;
    margin-right: 6px;
}

.skin-blue .sidebar-menu .treeview-menu > li > a {
    font-size: 13px;
    padding: 6px 5px 6px 18px;
}

.skin-blue .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li:hover > a { border-left-color: #3c8dbc; }

/* AdminLTE positions .user-panel > .info absolutely at left:55px, sized for a
   45px <img>. This app has no avatar image, so the icon stands in for one and
   must occupy the same box or the username collides with the first menu item. */
.user-panel { min-height: 65px; }

.user-panel > .image.user-avatar {
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
}

.user-panel > .image.user-avatar > [class^="icon-"] {
    font-size: 22px;
    color: #fff;
    line-height: 45px;
}

.user-panel > .info {
    position: absolute;
    left: 65px;
    padding: 6px 5px 5px 0;
    line-height: 1.3;
}

.user-panel > .info > p {
    font-weight: 600;
    margin-bottom: 4px;
    text-transform: capitalize;
    color: #fff;
    font-size: 14px;
}

.user-panel > .info > a { font-size: 12px; }

/* ============================================================
   6. HEADER / CONTENT
   ============================================================ */

/* No .content-header: pages carry their own title in .box-title, so the content
   section starts straight below the navbar. */
.content { padding: 15px; }

.main-header .navbar .nav > li > a { font-weight: 500; }

.main-header .navbar .year-display > a,
.main-header .navbar .year-display > a:hover {
    background: transparent;
    cursor: default;
    opacity: .9;
}

/* The logout LinkButton is an <a> inside an <li>; match navbar link styling. */
.main-header .navbar .user-profile > a {
    display: block;
    padding: 15px;
    color: #fff;
    line-height: 20px;
}

.main-header .navbar .user-profile > a:hover { background: rgba(0, 0, 0, .1); }

/* ============================================================
   7. LOGIN
   ============================================================ */

/* The login box is centred with flexbox rather than a percentage margin.

   The old rule paired min-height:100vh on the page with margin:8% auto on the
   box. Those add together - a full-viewport-height body plus the margin above
   and below it - so the document was always taller than the viewport and the
   browser showed a scrollbar even though the box itself fits on screen.

   Centring with flex keeps the box optically centred without contributing any
   extra height, so there is nothing to scroll. min-height (not height) means
   that if the viewport is ever shorter than the box - a small laptop, or a
   browser zoomed well in - the box still grows and the page scrolls normally
   rather than clipping the Sign In button out of reach. */
.login-page {
    background: #e4e7ea;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    margin: 0;
}

.login-wrapper {
    width: 340px;
    max-width: 100%;
    margin: 0;
    background: #fff;
    padding: 24px 24px 14px;
    border-top: 4px solid #3c8dbc;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}

.login-wrapper hr {
    margin: 10px 0 18px;
    border-top: 1px solid #eef1f4;
}

.login-wrapper .form-control { height: 38px; font-size: 14px; }
.login-wrapper .btn { padding: 9px 14px; font-size: 14px; font-weight: 600; }

/* ============================================================
   8. ICONS
   The bundled Font Awesome is v3.2.1, which defines .icon-* (not v4's .fa).
   It already supplies every glyph the markup uses, so nothing is aliased here
   - overriding its rules only risks breaking icons that already work.
   Sizing for icons used in the sidebar and buttons:
   ============================================================ */

.sidebar-menu > li > a > [class^="icon-"] {
    width: 20px;
    text-align: center;
    margin-right: 6px;
    font-size: 14px;
}

.btn > [class^="icon-"] { margin-right: 4px; }
.btn-circle > [class^="icon-"] { margin-right: 0; }

/* ============================================================
   9. MODALS
   ------------------------------------------------------------
   20 modals across 10 pages, all sharing one malformed shape:

       .modal-header
           button.close
           <b> or <h3>   <- the actual title
           .modal-body   <- NESTED INSIDE the header, not a sibling
           [UpdatePanel + GridView]  <- after the body, still in the header

   Bootstrap's own rules assume .modal-header and .modal-body are
   siblings, so the stock padding and bottom border wrap the entire
   dialog and the body inherits header chrome. Rather than edit 20
   blocks of markup across 10 pages, the fix here treats .modal-header
   as a plain container and moves the header appearance onto its
   direct title children, which are the only things that should
   actually look like a header.

   Widths stay as the pages set them inline (350px / 370px); only the
   narrow fixed widths are made responsive so they do not overflow a
   phone screen.
   ============================================================ */

.modal-content {
    border: none;
    border-radius: 4px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .25);
}

.modal-backdrop.in { opacity: .45; }

/* Neutralise the header-as-wrapper: no padding, no border, no min-height.
   Its children supply their own spacing below. */
.modal-content > .modal-header {
    padding: 0;
    border-bottom: none;
    min-height: 0;
}

/* The real header bar: the title elements that sit directly in the header. */
.modal-content > .modal-header > b,
.modal-content > .modal-header > h3,
.modal-content > .modal-header > h4 {
    display: block;
    margin: 0;
    padding: 13px 40px 13px 16px;   /* right gap clears the close button */
    background: #f7f9fa;
    border-bottom: 1px solid #e6eaee;
    border-radius: 4px 4px 0 0;
    color: #2f3c48;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

/* Three modals (the print dialogs on the invoice/quotation entry screens)
   have a genuinely empty <h3>. Collapse it so it does not render as a bare
   grey bar above the content. :empty only matches with no whitespace, so
   the &nbsp;-prefixed titles elsewhere are unaffected. */
.modal-content > .modal-header > h3:empty {
    display: none;
}

/* Close button, positioned against the dialog rather than the flow. */
.modal-content > .modal-header > .close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: 42px;
    height: 46px;
    margin: 0;
    padding: 0;
    color: #8a949e;
    font-size: 22px;
    font-weight: 400;
    line-height: 46px;
    text-align: center;
    text-shadow: none;
    opacity: .75;
}

.modal-content > .modal-header > .close:hover,
.modal-content > .modal-header > .close:focus {
    color: #d9534f;
    opacity: 1;
}

/* Body: restore normal padding now that the header no longer supplies any. */
.modal-content > .modal-header > .modal-body {
    padding: 16px;
}

/* Six modals trail an UpdatePanel + GridView after the body but still inside
   the header. UpdatePanel renders as a plain <div>, so give any such stray
   block the same padding as the body - minus the top, since the body above
   already provides that gap. */
.modal-content > .modal-header > div:not(.modal-body) {
    padding: 0 16px 16px;
}

/* Grids inside modals: tighter than the page grids, and scrollable rather
   than overflowing a narrow dialog. */
.modal-content .table { font-size: 12px; }
.modal-content .table > thead > tr > th { padding: 7px 8px; font-size: 11px; }
.modal-content .table > tbody > tr > td { padding: 6px 8px; }

.modal-content > .modal-header > div:not(.modal-body) > div {
    overflow-x: auto;
}

/* Form controls and buttons inside modals. */
.modal-content .form-control { height: 30px; font-size: 13px; }
.modal-content .btn { margin-top: 2px; }

/* The print dialogs lay their options out in a bare <table>; give those rows
   room so the radio buttons and labels are not crushed together. */
.modal-content .modal-body > table > tbody > tr > td { padding: 3px 4px; }

/* Inline widths in the markup are 350px/370px. Keep them on desktop but stop
   them forcing a horizontal scroll on a phone. */
@media (max-width: 480px) {
    .modal-content[style*="width"] {
        width: auto !important;
    }
}

@media (min-width: 768px) {
    /* Centre the fixed-width dialogs: the inline width is on .modal-content,
       so the dialog around it stays 600px and the box would sit left. */
    .modal-dialog { text-align: center; }
    .modal-dialog > .modal-content {
        display: inline-block;
        text-align: left;
        max-width: 100%;
    }
    /* The wide modals (no inline width) should still fill the dialog. */
    .modal-dialog > .modal-content:not([style*="width"]) { display: block; }
}

/* ============================================================
   10. DASHBOARD (homepage.aspx)
   ------------------------------------------------------------
   Only the homepage uses these. Presentation only - the figures
   and their scoping live in homepage.aspx.cs.
   ============================================================ */

.dash { margin-top: 2px; }

.dash .row { margin-bottom: 0; }

/* ---- KPI tiles ---- */

.dash-kpis { margin-bottom: 4px; }

.dash-tile {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 92px;
    margin-bottom: 16px;
    padding: 14px 16px;
    background: #fff;
    border-radius: 4px;
    border-left: 4px solid #3c8dbc;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .09);
}

.dash-tile-icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    margin-right: 14px;
    border-radius: 50%;
    background: rgba(60, 141, 188, .10);
    color: #3c8dbc;
    font-size: 19px;
    line-height: 46px;
    text-align: center;
}

.dash-tile-body { flex: 1 1 auto; min-width: 0; }

.dash-tile-label {
    display: block;
    color: #7a848d;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.dash-tile-value {
    display: block;
    margin: 2px 0 1px;
    color: #2f3c48;
    font-size: 23px;
    font-weight: 600;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-tile-value small {
    margin-right: 1px;
    color: #9aa5b1;
    font-size: 14px;
    font-weight: 600;
}

.dash-tile-sub { display: block; color: #97a1aa; font-size: 12px; }
.dash-tile-sub a { color: #3c8dbc; }

/* Tile accents. Colour is a secondary cue only - each tile is also
   labelled, so this is not the sole carrier of meaning. */
.dash-tile-green { border-left-color: #46a24a; }
.dash-tile-green .dash-tile-icon { background: rgba(70, 162, 74, .10); color: #46a24a; }

.dash-tile-red { border-left-color: #d9534f; }
.dash-tile-red .dash-tile-icon { background: rgba(217, 83, 79, .10); color: #d9534f; }

.dash-tile-amber { border-left-color: #e0921f; }
.dash-tile-amber .dash-tile-icon { background: rgba(224, 146, 31, .12); color: #e0921f; }

.dash-tile-purple { border-left-color: #8e6fb5; }
.dash-tile-purple .dash-tile-icon { background: rgba(142, 111, 181, .12); color: #8e6fb5; }

/* Count tiles carry a bare number, so give it a little more presence. */
.dash-kpis .dash-tile-value { font-size: 26px; }

/* ---- Chart legend (in the panel header) ---- */

.dash-legend {
    display: inline-block;
    margin-left: 14px;
    color: #7a848d;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

.dash-key {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 5px;
    border-radius: 2px;
    vertical-align: baseline;
}

.dash-key-inv { background: #3c8dbc; }
.dash-key-cm  { background: #8e6fb5; }
.dash-key-qt  { background: #46a24a; }

@media (max-width: 767px) {
    /* The legend would crowd the title on a phone; stack it underneath. */
    .dash .box > .box-title > .box-tool {
        float: none;
        display: block;
        margin: 6px 0 0;
    }
    .dash-legend:first-child { margin-left: 0; }
}

/* ---- Chart ---- */

.dash-chart {
    width: 100%;
    height: 260px;
    margin-top: 4px;
}

.dash-tip {
    position: absolute;
    display: none;
    z-index: 1000;
    padding: 6px 10px;
    background: rgba(47, 60, 72, .94);
    border-radius: 3px;
    color: #fff;
    font-size: 12px;
    line-height: 1.45;
    pointer-events: none;
    white-space: nowrap;
}

.dash-tip-sub { color: #b8c2cc; font-size: 11px; }

.dash-empty {
    padding: 34px 15px;
    color: #97a1aa;
    font-size: 13px;
    text-align: center;
}

/* ---- Panels and tables ---- */

.dash .box > .box-title > h4 { font-size: 14px; }

.dash-link {
    color: #3c8dbc;
    font-size: 12px;
    font-weight: 500;
}

.dash .box-content.dash-table { padding: 0; }

.dash-table .table { margin-bottom: 0; }
.dash-table .table > thead > tr > th { padding: 8px 12px; }
.dash-table .table > tbody > tr > td { padding: 7px 12px; font-size: 12.5px; }
.dash-table .table > tbody > tr > td:first-child { font-weight: 600; }

.dash-note {
    margin: 0;
    padding: 9px 12px;
    background: #fbfcfd;
    border-bottom: 1px solid #eef1f4;
    color: #8a949e;
    font-size: 12px;
}

.dash-stock { font-weight: 600; color: #b5761a; }

/* GridView's EmptyDataText renders as a single full-width cell. */
.dash-table .table > tbody > tr > td[colspan] {
    padding: 26px 12px;
    color: #97a1aa;
    font-size: 13px;
    text-align: center;
}

@media (max-width: 991px) {
    .dash-tile { min-height: 84px; }
    .dash-tile-value { font-size: 20px; }
    .dash-chart { height: 220px; }
}

/* ============================================================
   10b. REPORT SHEETS (rptshipmentinv and similar printable grids)
   ------------------------------------------------------------
   These pages render a document-style grid that is also the print
   target, so they read as a sheet of paper inside the panel rather
   than as a normal data grid. The grid's own header rows are built
   in the code-behind (a banner row, then the column row) and the
   footer carries the column totals - the rules below respect that
   structure rather than restyling the cells individually.
   ============================================================ */

.rpt-box > .box-content.rpt-content {
    padding: 16px;
    background: #eef1f4;   /* desk behind the sheet */
}

.rpt-sheet {
    padding: 18px 16px;
    background: #fff;
    border: 1px solid #dfe4e9;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .10);
    overflow-x: auto;      /* wide reports scroll rather than overflow */
}

.rpt-grid {
    margin: 0 auto;
    font-size: 13px;
    color: #2f3c48;
}

/* Both header rows: the code-behind banner and the column headings. */
.rpt-grid > tbody > tr > th,
.rpt-grid > thead > tr > th {
    padding: 8px 10px;
    background: #f4f7f9;
    border-color: #d4dae0 !important;
    color: #2f3c48;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: none;   /* the banner is a sentence, not a label */
    vertical-align: middle;
}

.rpt-grid > tbody > tr > td {
    padding: 6px 10px;
    border-color: #e2e7ec !important;
    font-size: 13px;
    vertical-align: middle;
}

/* Item code reads as an identifier; keep it left and mono-ish so the
   codes line up under one another. */
.rpt-grid > tbody > tr > td:first-child {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Figures line up on their digits. */
.rpt-grid > tbody > tr > td + td {
    font-variant-numeric: tabular-nums;
}

.rpt-grid > tbody > tr:nth-child(even) > td { background: #fafbfc; }
.rpt-grid > tbody > tr:hover > td { background: #f2f7fb; }

/* Totals row, emitted as the GridView footer. */
.rpt-grid > tfoot > tr > td,
.rpt-grid > tbody > tr:last-child > td[style*="font-weight"] {
    background: #f4f7f9;
    border-top: 2px solid #cdd5dc !important;
    font-weight: 700;
}

/* The print button sits in the panel header beside the title. */
.rpt-box > .box-title > .box-tool .btn > [class^="icon-"] {
    margin-right: 5px;
}

@media (max-width: 767px) {
    .rpt-box > .box-content.rpt-content { padding: 8px; }
    .rpt-sheet { padding: 10px 8px; }
    .rpt-grid { font-size: 12px; }
}

/* ============================================================
   11. PRINT
   PrintDiv() opens a popup; the .A4 pages must carry no chrome.
   ============================================================ */

@media print {
    .main-sidebar, .main-header, .content-header,
    .navbar, #sidebar, #navbar, .btn,
    .modal, .modal-backdrop {
        display: none !important;
    }
    /* Report sheets print as plain paper: no desk, no shadow, and solid
       rules so the grid stays legible in black and white. PrintDiv() writes
       only the grid's innerHTML into a popup, so these apply there too. */
    .rpt-content, .rpt-sheet {
        padding: 0 !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        overflow: visible !important;
    }
    .rpt-grid > tbody > tr > th,
    .rpt-grid > thead > tr > th,
    .rpt-grid > tfoot > tr > td { background: none !important; }
    .rpt-grid > tbody > tr:nth-child(even) > td { background: none !important; }
    .rpt-grid > tbody > tr > td,
    .rpt-grid > tbody > tr > th { border-color: #000 !important; }
    .content-wrapper { margin-left: 0 !important; }
    .box { border: none; box-shadow: none; }
    .box > .box-title { background: none; }
}

/* "Change branch" link under the Sign In button.

   The login page is reachable directly (bookmark, session timeout, sign-out),
   so this is a real link to the launcher at the site root rather than a
   history.back() - there is frequently no history to go back to, and on a
   signed-out page going back would land on a page that just redirects here.

   href="../" resolves to the site root, matching the launcher's own relative
   scheme: the branches sit at /Atlanta/, /Baltimore/ and so on, so "../" is
   the branch list from any of them, with no hostname or port written down. */
.login-wrapper .back-link {
    display: block;
    margin: 10px 0 4px;
    padding: 8px 14px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.42857;

    color: #79858f;
    background-color: #fff;
    border: 1px solid #d6dbe0;
    border-radius: 3px;
    text-decoration: none;

    transition: color .15s ease-in-out, background-color .15s ease-in-out,
                border-color .15s ease-in-out;
}

/* Outlined rather than solid: Sign In is the primary action here and is a
   filled .btn-gray, so this stays visually subordinate to it while still
   reading as a control instead of stray text. */
.login-wrapper .back-link:hover,
.login-wrapper .back-link:focus {
    color: #3c8dbc;
    background-color: #f6f8f9;
    border-color: #3c8dbc;
    text-decoration: none;
}

/* Keyboard users get a visible focus ring, matching the launcher's cards. */
.login-wrapper .back-link:focus {
    outline: 2px solid #3c8dbc;
    outline-offset: 2px;
}

.login-wrapper .back-link:active {
    background-color: #eef1f4;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .1);
}

/* Nudge the chevron off the label. */
.login-wrapper .back-link [class^="icon-"] { margin-right: 5px; }