:root {
    /* Same palette as Tingue_SAP_Photo_Attachment's header, for a
       consistent look across both apps. */
    --navy: #1E40AF;
    --dark-navy: #1E3A8A;
    --gray-50: #F9FAFB;
    --gray-200: #E5E7EB;
    --gray-500: #6B7280;
    --gray-900: #111827;
    --blue: #2563EB;
    --green: #15803D;
    --green-tint: #F0FDF4;
    --paper: #FFFBF2;
    --paper-edge: #E8DCC0;

    /* Shared spacing scale (4px base) -- every structural padding/margin/
       gap in this file is one of these, not an ad-hoc number. The point
       isn't uniformity (a dense table row and a spacious card SHOULD use
       different steps) -- it's that the jump between "table" and "card"
       reads as a deliberate ratio (space-2 to space-4, a clean double)
       rather than arbitrary values like 9px/10px/14px landing wherever
       looked fine in isolation. Tight decorative details that are
       intentionally smaller than the smallest step (badge pills, the
       identity chip) are documented as exceptions where they appear,
       not folded into the scale. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
}

* { box-sizing: border-box; }

/* Page chrome (header, tabs) stays fixed; only a tab's own row data
   scrolls -- a body-height flex column, top to bottom: header, then
   .app-shell (flex:1, everything below the header), with .tabs pinned
   at flex-shrink:0 and only .tab-panel.active taking the remaining
   height. .table-scroll (the actual data area, see below) is the one
   element that ends up with a bounded height + its own scrollbar; every
   ancestor in between needs min-height:0 or a flex child never shrinks
   below its content size and this whole chain does nothing. 100dvh, not
   100vh, so mobile Safari's address-bar show/hide doesn't leave a sliver
   of dead space at the bottom. */
html, body { height: 100vh; height: 100dvh; }
/* overflow-x:hidden is a safety net, not the fix for any specific bug --
   nothing on this page should ever need page-level horizontal scroll
   (.tab-panel below scrolls its own wide tables internally), so this
   just guarantees a stray overflowing element can never push the whole
   page wider than the viewport and leave blank space on narrow phones. */
body {
    font-family: -apple-system, system-ui, sans-serif; margin: 0; background: var(--gray-50); color: var(--gray-900);
    overflow-x: hidden; display: flex; flex-direction: column;
}

.login-card { max-width: 360px; margin: 80px auto; text-align: center; padding: var(--space-6); }
.btn { display: inline-block; padding: var(--space-3) var(--space-5); border-radius: 8px; text-decoration: none; font-weight: 600; }
.btn-primary { background: var(--blue); color: white; }
.btn-secondary { background: var(--gray-200); color: var(--gray-900); }

/* Wider than before (was 900px) -- these tables have grown to 9-12
   columns and a narrow shell just pushed the overflow out to the right
   of the page instead of containing it. Still capped so it doesn't
   stretch edge-to-edge on an ultrawide monitor. */
.app-shell {
    max-width: 1400px; margin: 0 auto; padding: var(--space-4);
    flex: 1 1 auto; min-height: 0; width: 100%;
    display: flex; flex-direction: column;
}

header {
    background: linear-gradient(180deg, var(--navy), var(--dark-navy));
    color: white;
    padding: var(--space-2) var(--space-5);
    display: flex;
    align-items: center;
    /* wrap, not nowrap (the default) -- the admin email + Audit Log/Sign
       out links don't shrink (see header-right's white-space:nowrap
       below), so on a narrow phone that row has nowhere to go but wrap
       onto its own line. Without this, the row was forced to cram into
       one line -- Safari on iPhone rendered that as the title text and
       the email overlapping, and let the row's real (wider) content
       width push past the visible screen edge as blank space. */
    flex-wrap: wrap;
    gap: var(--space-3);
    box-shadow: 0 2px 10px -2px rgba(17, 24, 39, 0.28);
    position: sticky;
    top: 0;
    z-index: 10;
    flex-shrink: 0;
    /* Explicit, not just block-default: this is what actually broke on
       iPhone. The table below has no scroll container of its own (fixed
       below), so a wide table used to widen the whole document and the
       header -- sized to its own (much narrower) content -- stopped
       covering the page once you scrolled right far enough to see the
       later columns. Scoping the table's overflow to its own box (below)
       is the root fix; this is a second line of defense so the header
       itself is never the thing measuring too narrow. */
    width: 100%;
}

.logo-badge { display: flex; align-items: center; }
.logo-badge img.logo { height: 38px; width: auto; display: block; }

header h1 { margin: 0; font-size: 1.05rem; font-weight: 700; flex: 1; min-width: 0; }
header .header-right { display: flex; align-items: center; gap: var(--space-4); font-size: 0.9rem; white-space: nowrap; margin: 2px 0; }
header .header-right a { color: white; }

.tabs { display: flex; border-bottom: 2px solid var(--gray-200); margin-bottom: var(--space-4); flex-shrink: 0; }
.tab-btn { flex: 1; padding: var(--space-3); border: none; background: none; font-size: 1.1rem; font-weight: 600; color: var(--gray-500); cursor: pointer; border-radius: 8px 8px 0 0; }
/* A filled background, not just an underline -- easier to spot which
   tab is active at a glance, especially on a small phone screen. */
.tab-btn.active { background: #DBEAFE; color: var(--navy); font-weight: 700; border-bottom: 3px solid var(--navy); margin-bottom: -2px; }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Frozen-header/bounded-scroll treatment is scoped to the THREE
   top-level tabs only (Current Orders/Sales Order History/Customer
   Lookup -- the only .tab-panel elements that are direct children of
   .app-shell). Customer Lookup's own sub-tabs (History/Details/
   Contacts/Address/Equipment) reuse the same ".tab-panel" class one
   level deeper, inside a plain (non-flex) <div> -- applying this rule
   to them too made their .table-scroll (flex:1;min-height:0;overflow:
   auto, below) collapse to near-zero height, since a flex item's
   min-height:0+overflow:auto inside an auto-sized flex container that
   ISN'T itself height-constrained can resolve to ~0px instead of its
   content height. That's what "order history not populating" actually
   was -- the rows were there, just rendered in a collapsed box.
   flex:1/min-height:0 lets THIS panel take exactly the remaining
   height below the tab bar (part of the fixed-header scheme, see body/
   html above) -- overflow-y:auto here is a fallback for panels whose
   content ISN'T a single .table-scroll (Customer Lookup's own search/
   detail mix), so a tall one scrolls internally instead of being
   clipped past the bottom of the screen. For the two table-only tabs
   (Current Orders, Sales Order History) this never actually engages --
   .table-scroll below fills the panel exactly and does its own
   scrolling instead. */
.app-shell > .tab-panel.active { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* These tables can run 9-12 columns wide -- scroll horizontally inside
   this box, not the whole page. This is the actual fix for the iPhone
   header bug and the "everything shifted right" look on desktop: before
   this, an overflowing table widened the whole document instead of just
   itself, which is what desynced the header's width from the page's. */
.tab-panel { overflow-x: auto; }

/* Dense mode: tables use the tightest step (space-2) for cell padding --
   this is a data grid, not a document, and every extra pixel here costs
   a column on a phone. */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: var(--space-2); border-bottom: 1px solid var(--gray-200); font-size: 0.9rem; }
/* Sticky within .table-scroll (its scrolling ancestor, see below) --
   every th in this app lives in a <thead>, so this is safe unqualified.
   Needs an opaque background or row content scrolling underneath shows
   through the header as it passes. */
th { color: var(--gray-500); font-weight: 600; position: sticky; top: 0; z-index: 1; background: white; }
th.sortable { cursor: pointer; user-select: none; font-weight: 800; color: var(--gray-900); }
th.sortable:hover { color: var(--navy); }

/* Most columns here are short, fixed-format values (dates, codes, IDs,
   one-word statuses) that should never wrap -- opt OUT per-column
   instead of per-column opt-in, since that's the common case. The
   wrappable columns (long free text) get .wrap explicitly in the JS. */
th, td { white-space: nowrap; }
th.wrap, td.wrap { white-space: normal; min-width: 200px; }

/* ShipVia ("CUSTOMER PICK UP") was stretching the column under the
   default nowrap -- capped to ~20 characters and allowed to wrap. */
/* px, not ch -- ch sizes off the "0" glyph, which runs narrower than
   this font's average character, so a "20ch" cap was wrapping names
   ("212 KOZLOWSKI", 13 real characters) that should've fit on one line. */
th.narrow, td.narrow { white-space: normal; max-width: 160px; }

/* Zebra striping for easier reading -- white/light-blue, matching the
   header's blue branding. Credit Hold rows get their OWN two-tone
   alternation (light/darker red) instead of joining this sequence, so
   they still stand out even sitting next to a light-blue row. */
.row-even { background: white; }
.row-odd { background: #EFF6FF; }
.row-credit-a { background: #FEE2E2; }
.row-credit-b { background: #FCA5A5; }

.error { color: #DC2626; font-size: 0.9rem; min-height: 1.2em; margin: var(--space-2) 0 0; }

/* Customer name in an order row -- jumps to Customer Lookup's Details
   sub-tab (see jumpToCustomerDetails in app.js). Same link treatment as
   .customer-item so both "ways to land on a customer's record" read as
   the same kind of control. */
.customer-link { color: var(--blue); text-decoration: underline; }
.customer-link:hover { color: var(--dark-navy); }

/* The table's own scroll box (see addTopScrollbar in app.js) -- this,
   not .tab-panel, is what actually scrolls a wide table horizontally
   now, so the top scrollbar below has an independent sibling to sync
   against instead of the thing carrying it away.

   It's ALSO the one that scrolls vertically now (overflow: auto, not
   overflow-x: auto) -- a sticky <th> only sticks relative to its
   nearest actual scrolling ancestor, and since this element already
   has to be a scroll container on the x-axis for the horizontal-scroll
   feature above, it (not .tab-panel two levels up) is unavoidably that
   ancestor. flex:1/min-height:0 makes its parent .tab-panel.active
   hand it a real bounded height instead of the auto height it had
   before, which is what makes "auto" on this axis actually do
   something instead of never having anything to scroll. */
.table-scroll { overflow: auto; flex: 1 1 auto; min-height: 0; }

/* A second, independent horizontal scrollbar pinned to the top of the
   panel -- only inserted (see addTopScrollbar) when the table is
   actually wider than the panel. The real one, at the table's own
   bottom edge, is invisible to a mouse-only laptop user until they've
   scrolled down through every row to find it; a touchscreen has no such
   problem (swipe works anywhere), which is why this only showed up as a
   laptop complaint. Height is just enough to show the browser's native
   scrollbar and nothing else. */
.top-scrollbar { overflow-x: auto; overflow-y: hidden; height: 16px; margin-bottom: var(--space-1); flex-shrink: 0; }
.top-scrollbar-spacer { height: 1px; }

.lookup-search-wrap { margin-bottom: var(--space-3); }
.lookup-search-wrap input {
    padding: var(--space-3) var(--space-4); font-size: 1rem; border: 1px solid var(--gray-200); border-radius: 8px;
    width: 100%; max-width: 420px; transition: border-color 0.15s, box-shadow 0.15s;
}
.lookup-search-wrap input:focus {
    outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.lookup-hint { color: var(--gray-500); font-size: 0.9rem; }

/* Spacious mode starts here: Customer Lookup's identity/cards use the
   space-4 step (double the table's space-2) as their base unit -- this
   is a record you're reading, not a grid you're scanning. */
.customer-list {
    max-height: 320px; overflow-y: auto; border: 1px solid var(--gray-200); border-radius: 8px;
    margin-bottom: var(--space-5); transition: max-height 0.2s ease;
}
/* Once a customer's picked, the results list only needs to stay handy
   for switching to someone else -- at full height it buried the actual
   answer (the record itself) below the fold on a phone. ~3 rows. */
.customer-list.collapsed { max-height: 132px; }
.customer-item { padding: var(--space-3) var(--space-4); font-size: 0.95rem; cursor: pointer; border-bottom: 1px solid var(--gray-200); color: var(--blue); text-decoration: underline; }
.customer-item:last-child { border-bottom: none; }
.customer-item:hover { background: #EFF6FF; color: var(--dark-navy); }

/* The record's identity anchor -- code as a tabular-figure chip (it's
   an ID, not prose), name carrying the weight, and the same navy-to-
   dark-navy gradient that opens the page reused here as an underline,
   so picking a customer feels like arriving at a specific record, not
   just another list row. The chip's own padding is deliberately tighter
   than the space-2 floor -- it's a compact inline label, not a block. */
.customer-identity { margin-bottom: var(--space-4); }
.customer-identity-code {
    display: inline-block; font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 0.8rem;
    font-weight: 600; letter-spacing: 0.02em; color: var(--navy); background: #DBEAFE;
    padding: 3px var(--space-2); border-radius: 5px; margin-bottom: var(--space-2);
}
.customer-identity h3 {
    font-size: 1.3rem; font-weight: 800; color: var(--gray-900); margin: 0 0 var(--space-3);
    padding-bottom: var(--space-3); border-bottom: 3px solid; border-image: linear-gradient(90deg, var(--navy), var(--dark-navy)) 1;
}

.sub-tabs {
    display: flex; gap: var(--space-1); border-bottom: 1px solid var(--gray-200); margin-bottom: var(--space-4);
    overflow-x: auto;
}
.sub-tab-btn {
    padding: var(--space-2) var(--space-4); border: none; background: none; font-size: 0.95rem; font-weight: 600;
    color: var(--gray-500); cursor: pointer; border-radius: 6px 6px 0 0; white-space: nowrap; flex-shrink: 0;
}
.sub-tab-btn.active { background: #DBEAFE; color: var(--navy); border-bottom: 2px solid var(--navy); margin-bottom: -1px; }

/* Details: two columns of label/value pairs where there's room, one
   where there isn't -- this is a form-density layout (account facts),
   not prose, so it reads left-to-right within each field rather than
   forcing every value into a single vertical list. Row padding drops
   back to space-2 here (matching table rhythm) since these rows ARE a
   data grid in spirit, just laid out as fields instead of columns. */
.customer-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-1) var(--space-8); max-width: 640px; }
.detail-field { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--gray-200); }
.detail-label { color: var(--gray-500); font-weight: 600; font-size: 0.9rem; }
.detail-value { font-weight: 600; text-align: right; }
.detail-value.status-active { color: var(--green); }
.detail-value.status-inactive { color: var(--gray-500); }

/* Badge padding is a deliberate exception below the space-2 floor --
   pills read as compact tags, not blocks, and space-2 would make them
   look like buttons. */
.badge {
    display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    padding: 2px var(--space-2); border-radius: 999px; background: var(--gray-200); color: var(--gray-500); margin-left: var(--space-2);
}
.badge-primary { background: var(--green-tint); color: var(--green); }

/* Contacts read like the business cards this data comes from -- name
   and role up top, then the ways to reach them. Card padding is
   symmetric space-4, matching address-card below (both are "record
   fragment" cards at the same density). */
.contact-card { background: white; border: 1px solid var(--gray-200); border-radius: 10px; padding: var(--space-4); margin-bottom: var(--space-3); }
.contact-name { font-size: 1.05rem; font-weight: 700; }
.contact-position { color: var(--gray-500); font-size: 0.9rem; font-style: italic; margin-top: 2px; }
.contact-fields { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-3); }
.contact-field { font-size: 0.9rem; }
.contact-field-label { color: var(--gray-500); margin-right: var(--space-2); }
.contact-field a { color: var(--blue); text-decoration: none; }
.contact-field a:hover { text-decoration: underline; }

/* Addresses styled like the shipping/bill-to labels they actually are
   on the source documents -- warm paper tone, dashed top edge evoking
   a perforated label, monospace block for the postal lines. Same
   space-4 card padding as contact-card. */
.address-card {
    background: var(--paper); border: 1px solid var(--paper-edge); border-top: 3px dashed var(--paper-edge);
    border-radius: 4px; padding: var(--space-4); margin-bottom: var(--space-3); max-width: 360px;
}
.address-badges { margin-bottom: var(--space-2); }
.address-badges .badge { margin-left: 0; margin-right: var(--space-2); }
.address-id { font-weight: 700; margin-bottom: var(--space-2); }
.address-label { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 0.9rem; line-height: 1.5; }

.admin-picker { padding: var(--space-4); background: white; border: 1px solid var(--gray-200); border-radius: 8px; flex-shrink: 0; }
.admin-picker input { padding: var(--space-2); border: 1px solid var(--gray-200); border-radius: 6px; width: 320px; max-width: 100%; }

.rep-search-wrap { position: relative; display: inline-block; }
.rep-dropdown {
    position: absolute; top: 100%; left: 0; z-index: 10;
    width: 320px; max-width: 100%; max-height: 240px; overflow-y: auto;
    background: white; border: 1px solid var(--gray-200); border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); margin-top: var(--space-1);
}
.rep-option { padding: var(--space-2) var(--space-3); font-size: 0.9rem; cursor: pointer; }
.rep-option:hover { background: var(--gray-50); }
.rep-option-empty { color: var(--gray-500); cursor: default; }
.rep-option-empty:hover { background: none; }

.impersonation-banner {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
    background: #FEF3C7; border: 1px solid #F59E0B; border-radius: 8px;
    font-size: 0.9rem; flex-shrink: 0;
}

footer.app-footer {
    text-align: center;
    color: var(--gray-500);
    font-size: 0.8rem;
    padding: var(--space-6) var(--space-4) var(--space-4);
    flex-shrink: 0;
}