/* ============================================================================
   Doccol modern layer — Phase 4b (customer account modernization, 2026-09).

   Two jobs:
   1. A light restyle of the legacy osCommerce *content* chrome — info
      boxes, product listings, message stacks, footer, forms, page
      headings — so page bodies pick up the redesign palette/type without
      touching markup. The HEADER, slogan, breadcrumb bar and category nav
      are deliberately left to base stylesheet.css: dev.doccol.com's
      header must be the real production legacy header (www.doccol.com),
      not a half-restyled hybrid (Joshua, 2026-09-07).
   2. The component styles for the rebuilt Account area (everything prefixed
      .dcacct-), used only by account*.php / quote*.php / checkout.php.

   Palette + type mirror next_storefront/src/app/globals.css :root.
   Imported from the top of stylesheet.css. To disable the whole layer,
   remove that one @import line — nothing else depends on this file.
   ============================================================================ */

:root {
  --dc-navy: #073b4c;
  --dc-blue: #0b4f6c;
  --dc-teal: #167d9a;
  --dc-aqua: #dff3f7;
  --dc-ink: #18242a;
  --dc-muted: #5c6b73;
  --dc-line: #d9e2e6;
  --dc-soft: #f4f8f9;
  --dc-white: #ffffff;
  --dc-success: #176b3a;
  --dc-warning: #8a5a00;
  --dc-danger: #9b2c2c;
  --dc-radius: 10px;
  --dc-shadow: 0 12px 35px rgba(7, 59, 76, 0.09);
  /* body/content font — plain Arial, same as base stylesheet.css's own
     `arial, FreeSans` and next_storefront globals.css `body`. */
  --dc-font: Arial, Helvetica, sans-serif;
}

/* ---- 1. site-wide chrome ------------------------------------------------- */

body {
  font-family: var(--dc-font);
  color: var(--dc-ink);
  background: var(--dc-soft);
  font-size: 14px;
  line-height: 1.5;
}

a { color: var(--dc-blue); text-decoration: none; }
a:hover { color: var(--dc-teal); text-decoration: underline; }

/* Header, slogan, breadcrumb bar and category nav are LEFT ENTIRELY TO
   base stylesheet.css so dev.doccol.com's header is the real production
   legacy header (www.doccol.com) — not a half-restyled hybrid. The only
   thing kept here is a structural clearfix the account area needs:
   .sf-menu's top-level <li>s are float:left with nothing in the legacy
   CSS to clear them, so .navbar_bg collapses and the account area's
   <main class="dcacct"> renders overlapping the floated menu. A plain
   clearfix (not overflow:hidden — that would clip the absolutely
   positioned submenu dropdowns) fixes the height and nothing else. */
.cat_navbar::after, .navbar_bg::after { content: ""; display: table; clear: both; }

/* ...and pin the gray nav bar back to legacy metrics. The site-wide
   `body { font-size:14px; line-height:1.5 }` below shrinks .sf-menu's
   relative text, and the modern input rule below fattens the quick-
   search field with padding + a radius — together they change the bar
   height and field width vs the stock www.doccol.com nav. */
.cat_navbar { font-size: 16px; line-height: normal; }
.cat_navbar input[type="text"] {
  font-size: 12px;          /* base stylesheet.css `INPUT` */
  padding: revert;          /* the modern rule set 8px 10px */
  border: revert;           /* back to the UA field border (base sets none) */
  border-radius: 0;
  background: revert;
}

/* page heading */
TD.pageHeading, DIV.pageHeading {
  font-family: var(--dc-font);
  font-size: 22px;
  font-weight: 700;
  color: var(--dc-navy);
  line-height: 1.3;
}

/* info boxes → cards */
.infoBox {
  background: var(--dc-white);
  border: 1px solid var(--dc-line);
  border-radius: var(--dc-radius);
  border-collapse: separate;
  box-shadow: var(--dc-shadow);
  overflow: hidden;
}
.infoBoxContents { background: var(--dc-white); }
TD.infoBoxHeading {
  background: var(--dc-blue);
  color: var(--dc-white);
  font-family: var(--dc-font);
  font-weight: 700;
}

/* body text */
TD.main, P.main { font-family: var(--dc-font); font-size: 14px; color: var(--dc-ink); line-height: 1.55; }
TD.smallText, SPAN.smallText, P.smallText { font-family: var(--dc-font); font-size: 12px; color: var(--dc-muted); }

/* product listing tables */
.productListing-heading, TR.productListing-heading TD {
  background: var(--dc-navy) !important;
  color: var(--dc-white) !important;
  font-family: var(--dc-font);
  font-weight: 700;
  font-size: 12px;
}
TD.productListing-data { font-family: var(--dc-font); font-size: 13px; border-bottom: 1px solid var(--dc-line); }
TR.productListing-even TD { background: var(--dc-white); }
TR.productListing-odd TD { background: var(--dc-soft); }

/* message stacks — the legacy colours are broken (green error boxes) */
.messageStackError, .messageStackWarning, .messageStackSuccess {
  font-family: var(--dc-font) !important;
  font-size: 13px !important;
  border-radius: 8px;
  padding: 10px 14px !important;
  border: 1px solid transparent;
}
.messageStackError   { background: #fdecec !important; border-color: #f2c2c2 !important; color: var(--dc-danger) !important; }
.messageStackWarning { background: #fdf5e6 !important; border-color: #efd9ac !important; color: var(--dc-warning) !important; }
.messageStackSuccess { background: #eaf5ee !important; border-color: #bfe0cc !important; color: var(--dc-success) !important; }

/* forms */
input[type="text"], input[type="password"], input[type="email"], input[type="tel"],
input[type="number"], input[type="search"], select, textarea {
  font-family: var(--dc-font);
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--dc-line);
  border-radius: 7px;
  background: var(--dc-white);
  color: var(--dc-ink);
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
select:focus, textarea:focus { outline: 2px solid var(--dc-teal); outline-offset: 1px; border-color: var(--dc-teal); }

@media (max-width: 900px) {
  /* 16px minimum stops iOS Safari auto-zooming the page on focus */
  input[type="text"], input[type="password"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="search"], select, textarea { font-size: 16px; }
  img { max-width: 100%; height: auto; }
}

/* footer */
TD.footer {
  background: var(--dc-navy);
  color: var(--dc-aqua);
  font-family: var(--dc-font);
  font-size: 12px;
}
TD.footer a { color: var(--dc-aqua); }

/* ---- 2. Account area components --------------------------------------- */

.dcacct {
  max-width: 1080px;
  margin: 0 auto;
  padding: 20px 18px 48px;
  font-family: var(--dc-font);
  color: var(--dc-ink);
}
.dcacct * { box-sizing: border-box; }

.dcacct-head { margin: 4px 0 18px; }
.dcacct-head h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  color: var(--dc-navy);
  letter-spacing: -0.01em;
}
.dcacct-head .dcacct-sub { margin-top: 4px; color: var(--dc-muted); font-size: 14px; }
.dcacct-head .dcacct-sub b { color: var(--dc-blue); }

/* tab nav */
.dcacct-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 2px solid var(--dc-line);
  margin-bottom: 24px;
}
.dcacct-tabs a {
  padding: 10px 16px;
  font-weight: 650;
  font-size: 14px;
  color: var(--dc-muted);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}
.dcacct-tabs a:hover { color: var(--dc-blue); text-decoration: none; }
.dcacct-tabs a.is-active { color: var(--dc-navy); border-bottom-color: var(--dc-teal); }

/* generic card */
.dcacct-card {
  background: var(--dc-white);
  border: 1px solid var(--dc-line);
  border-radius: var(--dc-radius);
  box-shadow: var(--dc-shadow);
  padding: 20px;
  margin-bottom: 18px;
}
.dcacct-card > h2 {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 750;
  color: var(--dc-navy);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.dcacct-card > h2 .dcacct-card-link { float: right; font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; }

.dcacct-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 820px) { .dcacct-grid { grid-template-columns: 1fr; } }

/* key/value list */
.dcacct-kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; font-size: 14px; }
.dcacct-kv dt { color: var(--dc-muted); }
.dcacct-kv dd { margin: 0; font-weight: 600; }

/* terms panel — deliberately quiet, not a dashboard of gauges */
.dcacct-terms { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 14px; }
.dcacct-terms div { min-width: 130px; }
.dcacct-terms .dcacct-terms-label { color: var(--dc-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.dcacct-terms .dcacct-terms-value { font-weight: 700; color: var(--dc-navy); font-size: 15px; }

/* status pill */
.dcacct-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: var(--dc-aqua);
  color: var(--dc-blue);
  white-space: nowrap;
}
.dcacct-pill--open      { background: #e7f0fb; color: #1d4e89; }
.dcacct-pill--progress  { background: #fdf3e2; color: var(--dc-warning); }
.dcacct-pill--done      { background: #eaf5ee; color: var(--dc-success); }
.dcacct-pill--cancelled { background: #f1f1f2; color: var(--dc-muted); }
.dcacct-pill--expired   { background: #fdecec; color: var(--dc-danger); }

/* order / quote row list */
.dcacct-list { display: flex; flex-direction: column; gap: 12px; }
.dcacct-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  padding: 14px 16px;
  border: 1px solid var(--dc-line);
  border-radius: 9px;
  background: var(--dc-white);
}
.dcacct-row:hover { border-color: var(--dc-teal); }
.dcacct-row .dcacct-row-main { flex: 1 1 220px; }
.dcacct-row .dcacct-row-main .dcacct-row-title { font-weight: 700; color: var(--dc-navy); font-size: 15px; }
.dcacct-row .dcacct-row-main .dcacct-row-meta { color: var(--dc-muted); font-size: 13px; margin-top: 2px; }
.dcacct-row .dcacct-row-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* buttons */
.dcacct-btn {
  display: inline-block;
  padding: 9px 15px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid var(--dc-blue);
  background: var(--dc-blue);
  color: var(--dc-white);
  cursor: pointer;
  line-height: 1.2;
  text-align: center;
}
.dcacct-btn:hover { background: var(--dc-navy); border-color: var(--dc-navy); color: var(--dc-white); text-decoration: none; }
.dcacct-btn--ghost { background: var(--dc-white); color: var(--dc-blue); }
.dcacct-btn--ghost:hover { background: var(--dc-aqua); color: var(--dc-navy); }
.dcacct-btn--sm { padding: 6px 11px; font-size: 12px; }
.dcacct-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* timeline */
.dcacct-timeline { list-style: none; margin: 0; padding: 0; }
.dcacct-timeline li { position: relative; padding: 0 0 18px 26px; border-left: 2px solid var(--dc-line); }
.dcacct-timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.dcacct-timeline li::before {
  content: ""; position: absolute; left: -7px; top: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--dc-white); border: 2px solid var(--dc-line);
}
.dcacct-timeline li.is-current::before { background: var(--dc-teal); border-color: var(--dc-teal); }
.dcacct-timeline .dcacct-tl-status { font-weight: 700; color: var(--dc-navy); }
.dcacct-timeline .dcacct-tl-date { color: var(--dc-muted); font-size: 12px; }
.dcacct-timeline .dcacct-tl-comment { font-size: 13px; margin-top: 3px; white-space: pre-wrap; }

/* data table (quote lines, order products, spend) */
.dcacct-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dcacct-table th {
  text-align: left; padding: 9px 10px;
  background: var(--dc-soft); color: var(--dc-navy);
  border-bottom: 2px solid var(--dc-line); font-size: 12px;
  text-transform: uppercase; letter-spacing: .03em;
}
.dcacct-table td { padding: 9px 10px; border-bottom: 1px solid var(--dc-line); vertical-align: top; }
.dcacct-table td.num, .dcacct-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.dcacct-table tfoot td { font-weight: 700; border-top: 2px solid var(--dc-line); border-bottom: none; }

/* small helpers */
.dcacct-note { font-size: 13px; color: var(--dc-muted); }
.dcacct-empty { padding: 34px 20px; text-align: center; color: var(--dc-muted); background: var(--dc-white); border: 1px dashed var(--dc-line); border-radius: var(--dc-radius); }
.dcacct-inline-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.dcacct-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.dcacct-field label { color: var(--dc-muted); font-weight: 600; }
.dcacct-hr { border: none; border-top: 1px solid var(--dc-line); margin: 18px 0; }
.dcacct-back { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 600; }
.dcacct-share-url { width: 100%; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; }

/* ---- 3. Mobile primary navigation (Phase M1) ------------------------- */
/* Pairs with includes/doccol_nav.js. Breakpoint 900px must match that file. */

.dc-nav-toggle,
.dc-nav-close { display: none; }

.dc-nav-backdrop {
  position: fixed; inset: 0;
  background: rgba(7, 22, 28, 0.55);
  z-index: 9998;
}
body.dc-nav-locked { overflow: hidden; }

@media (max-width: 900px) {
  /* the bar: just a navy strip carrying the toggle */
  .cat_navbar { background: var(--dc-navy); border-radius: 0; padding: 0; min-height: 0; overflow: visible; }
  .cat_navbar .navbar_bg { background: transparent; margin: 0; min-height: 0; border-radius: 0; }
  .cat_navbar .home { display: none; }

  .dc-nav-toggle {
    display: inline-flex; align-items: center; gap: 9px;
    margin: 0; padding: 13px 16px; min-height: 46px;
    background: transparent; border: 0;
    color: var(--dc-white); font: 700 15px/1 var(--dc-font);
    letter-spacing: .02em; cursor: pointer;
  }
  .dc-nav-toggle__bars,
  .dc-nav-toggle__bars::before,
  .dc-nav-toggle__bars::after {
    content: ""; display: block; width: 20px; height: 2px;
    background: var(--dc-white); position: relative;
  }
  .dc-nav-toggle__bars::before { position: absolute; top: -6px; }
  .dc-nav-toggle__bars::after  { position: absolute; top: 6px; }

  /* slide-in panel */
  .cat_navbar .navbar_bg {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(86vw, 340px);
    background: var(--dc-navy);
    transform: translateX(102%);
    transition: transform .22s ease;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    z-index: 9999;
    box-shadow: -12px 0 40px rgba(0, 0, 0, .3);
    padding: 56px 0 40px;
  }
  .cat_navbar.is-open .navbar_bg { transform: translateX(0); }
  .cat_navbar:not(.is-open) .dc-nav-backdrop,
  .cat_navbar:not(.is-open) ~ .dc-nav-backdrop { display: none; }

  .dc-nav-close {
    display: block; position: absolute; top: 8px; right: 10px;
    width: 40px; height: 40px; padding: 0;
    background: transparent; border: 0;
    color: var(--dc-white); font-size: 30px; line-height: 1; cursor: pointer;
  }

  /* the list, vertical */
  .cat_navbar ul.sf-menu { display: block; float: none; margin: 0; line-height: 1.3; }
  .sf-menu > li {
    float: none; display: block; position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    background: none !important;
  }
  .sf-menu > li > a,
  .sf-menu a {
    display: block; float: none; position: static;
    padding: 14px 46px 14px 20px; min-height: 44px;
    color: var(--dc-white) !important;
    font: 600 15px/1.3 var(--dc-font) !important;
    text-transform: none !important; text-decoration: none;
  }
  .sf-menu > li li > a { font-weight: 500 !important; font-size: 14px !important; padding-left: 34px; color: #cfe3ea !important; }
  .sf-menu > li li li > a { padding-left: 48px; font-size: 13px !important; }

  /* neutralise the desktop absolute/hover submenu positioning */
  .sf-menu ul {
    position: static !important; top: auto !important; left: auto !important;
    width: auto !important; margin: 0 !important; padding: 0 !important;
    background: rgba(0, 0, 0, .18) !important;
    display: none;
  }
  .sf-menu li.dc-nav-open > ul { display: block; }
  .sf-menu li:hover ul, .sf-menu li.sfHover ul { top: auto !important; left: auto !important; } /* kill the :hover reveal */

  /* accordion chevron */
  .dc-nav-sub-toggle {
    position: absolute; top: 0; right: 0;
    width: 46px; height: 48px; padding: 0;
    background: transparent; border: 0; border-left: 1px solid rgba(255, 255, 255, .12);
    cursor: pointer;
  }
  .dc-nav-sub-toggle span,
  .dc-nav-sub-toggle span::before {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 9px; height: 2px; background: var(--dc-white);
    transform: translate(-50%, -50%) rotate(45deg); transform-origin: center;
  }
  .dc-nav-sub-toggle span::before { transform: translate(-50%, -50%) rotate(-45deg); }
  .dc-nav-has-sub.dc-nav-open > .dc-nav-sub-toggle span { transform: translate(-50%, -50%) rotate(-45deg); }
  .dc-nav-has-sub.dc-nav-open > .dc-nav-sub-toggle span::before { transform: translate(-50%, -50%) rotate(45deg); }

  /* old superfish arrow images off */
  .sf-sub-indicator, .sf-sub-indicator2, .sf-arrows { display: none !important; }

  /* the nav search box (first li -> a form with a table) */
  .sf-menu > li form[name="quick_find"] table { width: 100%; }
  .sf-menu > li form[name="quick_find"] input[type="text"] {
    width: 100% !important; box-sizing: border-box; min-height: 42px; font-size: 16px;
  }
  .sf-menu > li form[name="quick_find"] { padding: 10px 16px; display: block; }
}

@media (min-width: 901px) {
  /* desktop: controls hidden, backdrop never shows */
  .dc-nav-toggle, .dc-nav-close { display: none !important; }
  .dc-nav-backdrop { display: none !important; }
  .dc-nav-sub-toggle { display: none; }
}

/* ---- 4. Page layout reflow (Phase M2, high-traffic pages) ------------ */
/*
   Every legacy page body is a 3-column <table>: a BOX_WIDTH(240px) left
   nav column (category tree + specials/featured/news boxes), the content
   column, and a BOX_WIDTH(240px) right column (mini-cart, manufacturer
   info, order history, best sellers, currency picker, information box).
   The old mobile media queries (stylesheet.css, ~line 628) just shrank
   the *whole* 3-column table to a fixed 412-1024px box with
   `overflow: scroll` -- a horizontally-scrolling miniature desktop
   layout, not a real reflow.

   Fix: below 1024px, drop both side columns (redundant with the header
   cart link and the M1 hamburger menu -- see MOBILE_COMPAT_PLAN.md,
   "left category box" decision, extended here to the right column for
   the same reason) and let the content column take the full width.

   Selector safety: `td[width="240"]` matches only ever the two BOX_WIDTH
   layout cells site-wide (verified -- the only other literal "240" in
   any customer-facing page is an <img width> on logos_display.php, which
   this selector can't match). `.responsive-table` wraps only the outer
   layout <table>, never anything nested inside the content column, so
   real data tables (cart lines, order history, product specs) are
   untouched and keep their own overflow-x safety net.
*/
@media (max-width: 1024px) {
  .responsive-table {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    margin-top: 0 !important;
  }
  td[width="240"] { display: none !important; }
  td[width="100%"] { width: 100% !important; }

  /* Superseded by the same drop: the old server-side (User-Agent
     sniffed) "mobile" stand-ins for these two columns
     (includes/column_left_m.html / column_right_m.html, still included
     by ~16 pages on a real phone UA). Their content duplicates the M1
     hamburger menu one-for-one; hidden outright rather than left as a
     second, differently-broken mobile nav. */
  .leftmenu-container, .rightmenu-container { display: none !important; }
}

/* ---- 5. Touch & content polish (Phase M3) ----------------------------- */
/*
   Viewport-zoom correction, img max-width and the 16px form-field
   floor (stops iOS zoom-on-focus) shipped with M1. This adds: a page-
   level safety net against any remaining wide element forcing the whole
   body to scroll sideways, a scroll container for the one real legacy
   *data* table left (the cart), the same for the new account area's
   tables, and larger touch targets on checkboxes/radios, submit/image
   buttons, and the small icon-button links (View/Back/Continue/etc.).

   `:has()` is used below (Chrome/Edge/Safari/Firefox all support it as
   of 2023) -- on a browser that doesn't, the rule is simply ignored, so
   this only ever adds a fix, never removes one.
*/
@media (max-width: 1024px) {
  /* last-resort clamp: something unaccounted-for overflowing no longer
     drags the whole page sideways -- it clips instead, which given M2's
     column removal should rarely even trigger */
  html, body { overflow-x: hidden; }

  /* the cart's product table (includes/classes/boxes.php productListingBox,
     the one real multi-column data table left in the legacy pages that
     still see checkout traffic) scrolls in place instead of widening
     the page. Table layout itself is untouched -- overflow is set on
     the containing cell, found via :has(), not on the table. */
  td:has(> table.productListing) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* same safety net for the Phase 4b account/quote tables -- .dcacct-card
     is already a real <div> ancestor of every .dcacct-table */
  .dcacct-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ---- tap targets ---- */
  input[type="checkbox"], input[type="radio"] {
    width: 20px; height: 20px;
  }
  input[type="submit"] {
    min-height: 44px; padding: 10px 16px;
  }
  input[type="image"] {
    padding: 6px; box-sizing: content-box; cursor: pointer;
  }
  /* the small .gif icon-button links (View/Back/Continue/Update, etc. --
     tep_image_button() output, always served from a languages/*/images/
     buttons/ path): pad + negative-margin the wrapping link so the tap
     target grows without resizing the image itself */
  a:has(> img[src*="/buttons/"]) {
    display: inline-block;
    padding: 10px;
    margin: -10px;
  }
  /* "Result Pages" / prev-next pagination links */
  .smallText a {
    display: inline-block;
    padding: 4px 2px;
  }
}