/*
 * Remaining pages (Oct 2026): the public refresh's look for the pages it did
 * not redesign. Two parts:
 *   1. Login and the CMS content pages (Contact, Parts & Service, Privacy).
 *   2. A light pass for everything else (account pages, admin): page
 *      headings, tabs, ui-grid tables, buttons and form controls take the
 *      site tokens; their layouts are unchanged.
 *
 * Loaded after site.css and the redesigned pages' sheets. Rules here are
 * deliberately low-specificity (no #page-wrapper unless scoped to a state
 * class), so home/products/product/checkout keep their own, more specific
 * rules, and the admin sheets loaded after this still win.
 */

/* ======================================================================
   1a. Login
   ====================================================================== */

#page-wrapper.login { padding: 64px 24px 80px; }
.login-card {
    max-width: 400px;
    margin: 0 auto;
    padding: 32px;
    border: 1px solid var(--pp-line);
    border-radius: var(--pp-radius-card);
    background: #fff;
}
.login-card .login-title { margin: 0 0 24px; font-size: 28px; font-weight: 300; text-transform: none; }
.login-card .form-group { margin-bottom: 18px; }
.login-card .control-label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--pp-text); }
.login-card .form-control { height: 44px; font-size: 15px; }
.login-card .help-block { margin: 6px 0 0; font-size: 13px; }
.login-card .login-submit {
    width: 100%;
    min-height: 48px;
    margin-top: 8px;
    font-size: 16px;
    font-weight: 600;
}

/* ======================================================================
   1b. CMS content pages (views/common/content.html): admin-written HTML,
   so only type and spacing here, nothing that assumes its structure.
   ====================================================================== */

#page-wrapper.content-page { padding: 40px 56px 56px; font-size: 16px; line-height: 1.6; color: var(--pp-text); }
.content-page > h1:first-child,
.content-page > h2:first-child { margin: 0 0 20px; font-size: 32px; font-weight: 300; color: var(--pp-heading); }
.content-page h2 { margin: 32px 0 14px; font-size: 22px; font-weight: 600; }
.content-page h3 { margin: 24px 0 10px; }
.content-page p { margin: 0 0 14px; max-width: 72ch; }
.content-page ul,
.content-page ol { margin: 0 0 14px; padding-left: 22px; }
.content-page font { font-size: inherit; }   /* legacy <font size="2"> in the CMS rows */
.content-page b:first-of-type { font-weight: 600; }
.content-page img { max-width: 100%; height: auto; }
.content-page table { margin: 0 0 16px; border-collapse: collapse; }
.content-page th,
.content-page td { padding: 8px 12px; border-bottom: 1px solid var(--pp-line); text-align: left; vertical-align: top; }

/* Contact: the intro, a row of three "Contact Sales / Service / Parts"
   buttons (each in a bare .col-md-4), then the chosen block. Laid out as a
   button row and, for Sales, a grid of office cards. */
#page-wrapper.contact > b { display: block; max-width: 72ch; margin-bottom: 8px; font-size: 18px; line-height: 1.5; color: var(--pp-heading); }
#page-wrapper.contact > .col-md-4 { float: left; width: auto; min-height: 0; padding: 0 12px 0 0; margin: 12px 0 0; }
#page-wrapper.contact > .col-md-4 > .btn { float: none; width: auto; min-height: 44px; padding: 0 24px; font-size: 15px; font-weight: 600; }
#page-wrapper.contact > br { display: none; }
#page-wrapper.contact > div[ng-show] {
    clear: both;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    padding-top: 32px;
}
#page-wrapper.contact > div[ng-show] > h2 { grid-column: 1 / -1; margin: 0; }
#page-wrapper.contact > div[ng-show] > p { grid-column: 1 / -1; margin: 0; }
#page-wrapper.contact > div[ng-show] > ul {
    margin: 0;
    padding: 18px 20px;
    border: 1px solid var(--pp-line);
    border-radius: var(--pp-radius-card);
    background: var(--pp-panel);
    list-style: none;
}
#page-wrapper.contact > div[ng-show] > ul > li > p { margin: 0; }
#page-wrapper.contact > div[ng-show] strong { color: var(--pp-heading); }

/* ======================================================================
   2. Light pass: every other page
   ====================================================================== */

#page-wrapper { padding: 32px 40px 48px; }

/* Page headings: Orders / Quotes / Customers use the old template's
   .page-heading row; Reports and others a bare .pageHeader. */
#page-wrapper > br:first-child { display: none; }
#page-wrapper .page-heading {
    margin: 0 0 8px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--pp-line);
}
#page-wrapper .page-heading > [class*="col-"] { padding: 0; }
#page-wrapper .page-heading h2,
.pageHeader { margin: 0; font-size: 32px; line-height: 1.2; font-weight: 300; color: var(--pp-heading); text-transform: none; }
#page-wrapper .wrapper-content { padding: 0; }
#page-wrapper.reports > .row > .pageHeader { margin: 0 0 24px; padding: 0 15px; }

/* Tabs: the product page's underline tabs (product.css is more specific). */
.nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0 28px;
    border-bottom: 1px solid var(--pp-line);
}
.nav-tabs::before,
.nav-tabs::after { display: none; }
.nav-tabs > li { float: none; flex: 0 0 auto; margin: 0 0 -1px; }
.nav-tabs > li > a,
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
    margin: 0;
    padding: 12px 0;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: none;
    font-size: 15px;
    font-weight: 500;
    color: var(--pp-muted);
}
.nav-tabs > li > a:hover { color: var(--pp-heading); }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    border: 0;
    border-bottom: 3px solid var(--pp-red);
    background: none;
    color: var(--pp-heading);
}
/* The active tab keeps the same weight: a bolder label is wider than the
   width Safari laid the tab out at, so it spilled out of its box. */
.nav-tabs > li > a { white-space: nowrap; }
.nav-tabs > li > a:focus:not(:focus-visible) { outline: 0; }
.tabs-container .tab-content > .tab-pane > .panel-body,
.tab-content > .tab-pane > .panel-body { padding: 20px 0 0; border: 0; background: none; }

/* ui-grid tables (Orders, Quotes, Customers, Audit log), styled like the
   2026-10 mockups: a light header band with small caps titles, a white filter
   row, white rows split by hairlines, no column rules and no zebra.
   ui-grid.min.css is lazy-loaded after this file, so every rule leads with
   `body` to outrank its equal-specificity grays. */
body .ui-grid {
    border: 1px solid var(--pp-line);
    border-radius: var(--pp-radius-card);
    font-size: 14px;
    color: var(--pp-text);
    background: #fff;
}
body .ui-grid-contents-wrapper,
body .ui-grid-render-container,
body .ui-grid-viewport { background: #fff; }
body .ui-grid-top-panel,
body .ui-grid-header,
body .ui-grid-header-cell {
    background: var(--pp-band);
    filter: none;
}
body .ui-grid-top-panel,
body .ui-grid-header { border-bottom: 1px solid var(--pp-line); }
body .ui-grid-header-cell,
body .ui-grid-header-cell:last-child { border-right: 0; }
body .ui-grid-header-cell .ui-grid-cell-contents {
    padding: 11px 18px 9px 12px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--pp-muted);
}
body .ui-grid-header-cell:hover .ui-grid-cell-contents { color: var(--pp-heading); }
body .ui-grid-header-cell .ui-grid-invisible { display: none; }
body .ui-grid-header-cell .ui-grid-icon-up-dir,
body .ui-grid-header-cell .ui-grid-icon-down-dir { color: var(--pp-red); }
body .ui-grid-column-menu-button { color: var(--pp-muted); }
body .ui-grid-filter-container {
    padding: 6px 6px 8px;
    background: #fff;
    border-top: 1px solid var(--pp-line);
}
body .ui-grid-filter-container input[type="text"].ui-grid-filter-input,
body .ui-grid-filter-container select {
    height: 30px;
    padding: 2px 22px 2px 8px;
    border: 1px solid var(--pp-input);
    border-radius: var(--pp-radius);
    background: #fff;
    font-size: 13px;
    font-weight: 400;
    color: var(--pp-heading);
}
body .ui-grid-filter-container input[type="text"].ui-grid-filter-input:focus,
body .ui-grid-filter-container select:focus { border-color: var(--pp-heading); outline: 0; }
body .ui-grid-filter-container .ui-grid-filter-button [class^="ui-grid-icon"] { color: var(--pp-red); }
body .ui-grid-row .ui-grid-cell,
body .ui-grid-row:nth-child(odd) .ui-grid-cell,
body .ui-grid-row:nth-child(even) .ui-grid-cell {
    background-color: #fff;
    border-right: 0;
    border-bottom: 1px solid var(--pp-line);
}
body .ui-grid-row .ui-grid-cell-contents { display: flex; align-items: center; padding: 0 12px; height: 100%; }
body .ui-grid-row .ui-grid-cell.num .ui-grid-cell-contents { justify-content: flex-end; }
body .ui-grid-row:hover .ui-grid-cell { background-color: var(--pp-tint); }
body .ui-grid-row.ui-grid-row-selected > [ui-grid-row] > .ui-grid-cell { background-color: var(--pp-tint); }
body .ui-grid-cell-contents a { font-weight: 600; }
body .ui-grid-footer-panel,
body .ui-grid-footer-info { background: #fff; border-top: 1px solid var(--pp-line); color: var(--pp-muted); font-size: 13px; }
body .ui-grid-footer-info { padding: 6px 12px; }
body .ui-grid-menu-button { border: 0; border-left: 1px solid var(--pp-line); background: var(--pp-band); }

/* Buttons and form controls. */
.btn { font-weight: 500; }
.btn-default {
    border-color: var(--pp-input);
    background: #fff;
    color: var(--pp-heading);
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
    border-color: var(--pp-heading);
    background: var(--pp-band);
    color: var(--pp-heading);
}
.form-control {
    border-color: var(--pp-input);
    border-radius: var(--pp-radius);
    box-shadow: none;
    color: var(--pp-heading);
}
.input-group-addon,
.input-group-btn > .btn-default {
    border-color: var(--pp-input);
    background: var(--pp-band);
    color: var(--pp-text-2);
}
.control-label { font-weight: 600; color: var(--pp-text); }

@media (max-width: 700px) {
    #page-wrapper,
    #page-wrapper.content-page { padding: 24px 16px 32px; }
    #page-wrapper.login { padding: 32px 16px 48px; }
    .login-card { padding: 24px 20px; }
    .nav-tabs { gap: 0 20px; }
}