/* Shared look for the B2B dashboards (approvals, sales terminal, team, home), matching Field
   Sales: navy masthead with the tabs in it, Dashboards / Day-Night / account menu on the
   right, segmented filters instead of round chips, tables that fit the window.
   Loaded last on each page so it wins over the page's own styles. Night mode is
   [data-theme="dark"] on <html>, or the device setting when nothing has been chosen. */
:root {
  --f: "DM Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mast: #0f4c80; --mast-ink: #fff; --mast-mut: #bcd3e8;
  --btn: #0f4c80; --btn-dk: #0a3152; --btn-ink: #fff;
  --seg-bg: #e9edf2; --hover: #f3f7fb; --th: #ffffff; --input: #ffffff;
  --r: 6px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --navy: #7db4e6; --navy-dark: #a9cdef; --teal: #2cc7c7; --steel: #4d6280;
  --bg: #0d1620; --card: #14202d; --line: #24364a; --line2: #1b2a3a;
  --ink: #d6e6f5; --body: #c3d2e2; --mut: #8aa0b8; --muted: #8aa0b8;
  --green: #7ccf80; --green-bg: #16301c; --green-line: #24502c;
  --red: #ff8a80; --red-bg: #3a1a1a; --red-line: #5c2a2a;
  --amber: #f0c070; --amber-bg: #33280f; --amber-line: #56441a;
  --mast: #0a2a47; --mast-mut: #93b4d3;
  --btn: #2a6aa8; --btn-dk: #3a7ab8; --btn-ink: #fff;
  --seg-bg: #1b2a3a; --hover: #1a2836; --th: #14202d; --input: #0f1924;
  --shadow: 0 1px 2px rgba(0,0,0,.4);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --navy: #7db4e6; --navy-dark: #a9cdef; --teal: #2cc7c7; --steel: #4d6280;
    --bg: #0d1620; --card: #14202d; --line: #24364a; --line2: #1b2a3a;
    --ink: #d6e6f5; --body: #c3d2e2; --mut: #8aa0b8; --muted: #8aa0b8;
    --green: #7ccf80; --green-bg: #16301c; --green-line: #24502c;
    --red: #ff8a80; --red-bg: #3a1a1a; --red-line: #5c2a2a;
    --amber: #f0c070; --amber-bg: #33280f; --amber-line: #56441a;
    --mast: #0a2a47; --mast-mut: #93b4d3;
    --btn: #2a6aa8; --btn-dk: #3a7ab8; --btn-ink: #fff;
    --seg-bg: #1b2a3a; --hover: #1a2836; --th: #14202d; --input: #0f1924;
    --shadow: 0 1px 2px rgba(0,0,0,.4);
  }
}
body { background: var(--bg) !important; color: var(--body); font-family: var(--f) !important; font-size: 14px; }

/* ---------- masthead ---------- */
.masthead { background: var(--mast) !important; padding: 10px 24px 0 !important; gap: 4px 18px !important; flex-wrap: wrap !important; min-height: 64px; }
.masthead .brand { padding-bottom: 8px; }
.masthead .mastbtns { padding-bottom: 8px; margin-left: auto; }
.masthead .brand { flex: none; }
.masthead .brand h1 { font-size: 19px !important; color: var(--mast-ink); }
.masthead .brand .tag { color: var(--mast-mut) !important; }
.masthead .tabs.inmast { order: 3; flex: 1 1 100%; display: flex; gap: 4px; margin: 0 -8px !important; padding: 2px 0 0; min-width: 0; overflow-x: auto; scrollbar-width: none; border-top: 1px solid rgba(255,255,255,.12); }
.masthead .tabs.inmast::-webkit-scrollbar { display: none; }
.masthead .tabs.inmast .tabbtn { background: none !important; border: 0 !important; color: var(--mast-mut) !important; font-size: 14.5px !important; font-weight: 500 !important;
  text-transform: none !important; letter-spacing: 0 !important; padding: 9px 13px !important; border-radius: var(--r); margin: 0 !important; white-space: nowrap; }
.masthead .tabs.inmast .tabbtn:hover { color: #fff !important; background: rgba(255,255,255,.08) !important; }
.masthead .tabs.inmast .tabbtn { border-radius: 0 !important; padding: 11px 14px !important; border-bottom: 3px solid transparent !important; }
.masthead .tabs.inmast .tabbtn.on { color: #fff !important; background: transparent !important; font-weight: 700 !important; border-bottom-color: var(--teal) !important; }
.masthead .mastbtns { flex: none; flex-wrap: nowrap !important; gap: 8px !important; color: var(--mast-mut); }
.masthead .mastbtns > .mastlink, .masthead #fsLinkHost, .masthead #teamLink, .masthead #logoutBtn, .masthead #pwBtn, .masthead #uname { display: none !important; }
.masthead .mastbtns button.onwhite, .masthead .mastbtns .amsel { background: rgba(255,255,255,.10) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: 999px !important; min-height: 36px; padding: 0 13px !important; font-size: 13px !important; font-weight: 700; text-transform: none !important; letter-spacing: 0 !important; }
.masthead .mastbtns button.onwhite:hover { background: rgba(255,255,255,.2) !important; }
.masthead .amsel option, select option { color: #14202d; background: #fff; }

.dcp-right { display: flex; align-items: center; gap: 8px; flex: none; }
.dcp-hbtn { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.10); color: #fff !important; font: 700 13.5px var(--f); cursor: pointer; text-transform: none !important; letter-spacing: 0 !important; white-space: nowrap; }
.dcp-hbtn:hover { background: rgba(255,255,255,.2) !important; }
.dcp-hbtn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.dcp-hbtn.av { padding: 0 3px; }
.dcp-av { width: 30px; height: 30px; border-radius: 50%; background: var(--teal); color: #06343a; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.dcp-wrap { position: relative; }
.dcp-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 240px; background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25); padding: 6px; z-index: 200; display: none; flex-direction: column; gap: 2px; }
.dcp-menu.open { display: flex; }
.dcp-menu a, .dcp-menu button { display: flex !important; align-items: center; gap: 10px; width: 100%; text-align: left; background: none !important; border: 0 !important; border-radius: 6px;
  padding: 10px 12px !important; color: var(--ink) !important; font: 500 14.5px var(--f) !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; text-decoration: none; min-height: 0 !important; }
.dcp-menu a:hover, .dcp-menu button:hover { background: var(--line2) !important; }
.dcp-menu a.on { background: var(--teal-bg, #e5f6f6) !important; color: #0e7f80 !important; font-weight: 700 !important; }
.dcp-menu svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; flex: none; }
.dcp-menu .who { padding: 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.dcp-menu .who b { color: var(--ink); display: block; }
.dcp-menu .who span { color: var(--mut); font-size: 13px; }
.dcp-menu .extra { padding: 6px 12px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; color: var(--mut); font-size: 12px; }
.dcp-menu .extra select { width: 100%; margin-top: 6px; max-width: none; }

/* ---------- segmented filters instead of round chips ---------- */
.chips, #periodChips, .subchips { display: inline-flex !important; flex-wrap: wrap; gap: 2px !important; background: var(--seg-bg); padding: 3px; border-radius: 9px; border: 0 !important; margin: 4px 0 12px !important; }
.chipf { border: 0 !important; border-radius: 7px !important; background: transparent !important; color: var(--mut) !important; text-transform: none !important; letter-spacing: 0 !important;
  font-size: 13.5px !important; font-weight: 500 !important; padding: 7px 13px !important; }
.chipf:hover { color: var(--ink) !important; }
.chipf.on { background: var(--card) !important; color: var(--ink) !important; font-weight: 700 !important; box-shadow: 0 1px 2px rgba(10,49,82,.12), 0 1px 3px rgba(10,49,82,.08); }
.chipf .n, .chipf b { opacity: .8; }

/* ---------- cards, tables, KPIs ---------- */
.tcard, .kpi, .pipe .stage, .dbox, .vaside { border-radius: var(--r) !important; background: var(--card) !important; border-color: var(--line) !important; }
.kpi { border-top: 3px solid var(--teal) !important; }
.kpi .kv { color: var(--ink); }
th { background: var(--th) !important; color: var(--mut) !important; border-bottom: 1px solid var(--line) !important; font-size: 10.5px !important; padding: 9px 10px !important; }
td { border-top: 1px solid var(--line2) !important; }
tr.main:hover td { background: var(--hover) !important; }
.sechead h2 { color: var(--ink); font-size: 16px !important; }
.cname { color: var(--ink); }

/* ---------- controls ---------- */
button { border-radius: var(--r) !important; background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
button:hover { background: var(--btn-dk); }
button.ghost { background: var(--card) !important; color: var(--navy) !important; border-color: var(--line) !important; }
button.ghost:hover { background: var(--hover) !important; }
button.danger { background: var(--card) !important; color: var(--red) !important; border-color: var(--red-line) !important; }
button.danger.armed { background: var(--red) !important; color: #fff !important; }
button.approve { background: #148f8f !important; border-color: #148f8f !important; color: #fff !important; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=search], input[type=number], select, textarea {
  border-radius: var(--r) !important; background: var(--input) !important; color: var(--body) !important; border-color: var(--steel) !important; }
.cform { border-radius: var(--r); background: var(--card) !important; border-color: var(--line) !important; }
.cbox { border-radius: var(--r) !important; background: var(--card); }

/* ---------- night mode: the pages' fixed light colours ---------- */
:root[data-theme="dark"] .tabbtn { background: var(--card); border-color: var(--line); }
:root[data-theme="dark"] .pill.navy, :root[data-theme="dark"] .pill.status-new, :root[data-theme="dark"] .pay.terms, :root[data-theme="dark"] .pay.old { background: #1b2a3a; color: var(--navy); border-color: var(--line); }
:root[data-theme="dark"] .pill.teal, :root[data-theme="dark"] .countbadge.teal { background: #0f2f31; color: #5fd6d6; border-color: #1c5456; }
:root[data-theme="dark"] .pay.soon { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-line); }
:root[data-theme="dark"] .pay.over { background: var(--red-bg); color: var(--red); border-color: var(--red-line); }
:root[data-theme="dark"] tr.detail td, :root[data-theme="dark"] tr.cdiv td, :root[data-theme="dark"] tr.histrow > td, :root[data-theme="dark"] tr.main.openrow td,
:root[data-theme="dark"] tr.grp td, :root[data-theme="dark"] .sub, :root[data-theme="dark"] tr.amrow-me > td { background: #17232f !important; }
:root[data-theme="dark"] tr.firstever > td { background: #16301c !important; }
:root[data-theme="dark"] .logincard, :root[data-theme="dark"] details, :root[data-theme="dark"] .note { background: var(--card); }
:root[data-theme="dark"] .note { background: var(--amber-bg) !important; }
:root[data-theme="dark"] [style*="background:#fff"], :root[data-theme="dark"] [style*="background: #fff"], :root[data-theme="dark"] [style*="background:#fbfcfd"],
:root[data-theme="dark"] [style*="background:#f4f8fb"], :root[data-theme="dark"] [style*="background:#f8f9fb"], :root[data-theme="dark"] [style*="background:#f4f6f9"],
:root[data-theme="dark"] [style*="background:#eef2f6"], :root[data-theme="dark"] [style*="background:#fffdf2"], :root[data-theme="dark"] [style*="background:#fdf3e0"] { background: var(--card) !important; color: var(--body); }
:root[data-theme="dark"] .brandmark { background: #fff; }
:root[data-theme="dark"] a { color: var(--navy); }

/* the same fixes when the phone or computer is in dark mode and no theme was picked here */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .tabbtn { background: var(--card); border-color: var(--line); }
:root:not([data-theme="light"]) .pill.navy, :root:not([data-theme="light"]) .pill.status-new, :root:not([data-theme="light"]) .pay.terms, :root:not([data-theme="light"]) .pay.old { background: #1b2a3a; color: var(--navy); border-color: var(--line); }
:root:not([data-theme="light"]) .pill.teal, :root:not([data-theme="light"]) .countbadge.teal { background: #0f2f31; color: #5fd6d6; border-color: #1c5456; }
:root:not([data-theme="light"]) .pay.soon { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-line); }
:root:not([data-theme="light"]) .pay.over { background: var(--red-bg); color: var(--red); border-color: var(--red-line); }
:root:not([data-theme="light"]) tr.detail td, :root:not([data-theme="light"]) tr.cdiv td, :root:not([data-theme="light"]) tr.histrow > td, :root:not([data-theme="light"]) tr.main.openrow td,
:root:not([data-theme="light"]) tr.grp td, :root:not([data-theme="light"]) .sub, :root:not([data-theme="light"]) tr.amrow-me > td { background: #17232f !important; }
:root:not([data-theme="light"]) tr.firstever > td { background: #16301c !important; }
:root:not([data-theme="light"]) .logincard, :root:not([data-theme="light"]) details, :root:not([data-theme="light"]) .note { background: var(--card); }
:root:not([data-theme="light"]) .note { background: var(--amber-bg) !important; }
:root:not([data-theme="light"]) [style*="background:#fff"], :root:not([data-theme="light"]) [style*="background: #fff"], :root:not([data-theme="light"]) [style*="background:#fbfcfd"],
:root:not([data-theme="light"]) [style*="background:#f4f8fb"], :root:not([data-theme="light"]) [style*="background:#f8f9fb"], :root:not([data-theme="light"]) [style*="background:#f4f6f9"],
:root:not([data-theme="light"]) [style*="background:#eef2f6"], :root:not([data-theme="light"]) [style*="background:#fffdf2"], :root:not([data-theme="light"]) [style*="background:#fdf3e0"] { background: var(--card) !important; color: var(--body); }
:root:not([data-theme="light"]) .brandmark { background: #fff; }
:root:not([data-theme="light"]) a { color: var(--navy); }
}

/* ---------- sales terminal: every table fits the window ---------- */
body.page-sales .wrap { max-width: none !important; padding-left: 20px !important; padding-right: 20px !important; }
body.page-sales .tcard { overflow-x: visible !important; }
body.page-sales .tcard::before { display: none !important; }
body.page-sales table { min-width: 0 !important; table-layout: auto; }
body.page-sales th { white-space: normal !important; line-height: 1.25; vertical-align: bottom; }
body.page-sales td { white-space: normal !important; overflow-wrap: anywhere; padding: 7px 8px !important; font-size: 12.5px !important; }
body.page-sales td .pill, body.page-sales td .pay, body.page-sales td .cbox, body.page-sales td button { white-space: nowrap; overflow-wrap: normal; }
body.page-sales td .actions { flex-wrap: wrap; white-space: normal; }
body.page-sales .amcol { white-space: normal; }
@media (min-width: 1500px) { body.page-sales td { font-size: 13px !important; } }

/* ---------- phones ---------- */
@media (max-width: 899px) {
  .masthead { flex-wrap: wrap !important; padding: 10px 12px !important; }
  .masthead .mastbtns { flex: 1 1 auto; justify-content: flex-end; flex-wrap: wrap !important; }
  .dcp-hbtn .lbl { display: none; }
  body.page-sales .tcard { overflow-x: auto !important; }
}

/* ---------- approvals queue: cards on the left, the selected application on the right ---------- */
@media (min-width: 701px) {
  body.page-approvals #queueOut .tcard { overflow: visible !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
  body.page-approvals #queueOut .tcard::before { display: none !important; }
  body.page-approvals #queueOut table { min-width: 0 !important; display: block; }
  body.page-approvals #queueOut tbody { display: block; }
  body.page-approvals #queueOut table tr:first-child { display: none; }
  body.page-approvals #queueOut tr { display: block; }
  body.page-approvals #queueOut tr.grp td { display: block; background: transparent !important; border: 0 !important; padding: 14px 2px 6px !important; font-size: 15px; }
  body.page-approvals #queueOut tr.grp-ready td b { color: var(--green); }
  body.page-approvals #queueOut tr.main { display: grid; grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1fr); gap: 6px 14px; background: var(--card); border: 1px solid var(--line);
    border-left: 4px solid var(--navy); border-radius: var(--r); box-shadow: var(--shadow); padding: 12px 14px; margin-bottom: 10px; cursor: pointer; }
  body.page-approvals #queueOut tr.grp-ready ~ tr.main { border-left-color: var(--green); }
  body.page-approvals #queueOut tr.main.sel { outline: 2px solid var(--teal); }
  body.page-approvals #queueOut tr.main td { display: block; border: 0 !important; padding: 0 !important; font-size: 13.5px; background: transparent !important; }
  body.page-approvals #queueOut tr.main td::before { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--mut); font-weight: 700; margin-bottom: 1px; }
  body.page-approvals #queueOut tr.main td:nth-child(1) { grid-row: 1 / span 3; padding-top: 3px !important; }
  body.page-approvals #queueOut tr.main td:nth-child(2) { grid-column: 2 / 4; font-size: 15px; }
  body.page-approvals #queueOut tr.main td:nth-child(1) { grid-column: 1; grid-row: 1 / span 5 !important; }
  body.page-approvals #queueOut tr.main td:nth-child(3), body.page-approvals #queueOut tr.main td:nth-child(5), body.page-approvals #queueOut tr.main td:nth-child(7) { grid-column: 2; }
  body.page-approvals #queueOut tr.main td:nth-child(4), body.page-approvals #queueOut tr.main td:nth-child(6), body.page-approvals #queueOut tr.main td:nth-child(8) { grid-column: 3; }
  body.page-approvals #queueOut tr.main td:nth-child(3)::before { content: "Applied"; }
  body.page-approvals #queueOut tr.main td:nth-child(4)::before { content: "Ship to"; }
  body.page-approvals #queueOut tr.main td:nth-child(5)::before { content: "Why not approved"; }
  body.page-approvals #queueOut tr.main td:nth-child(6)::before { content: "NetSuite"; }
  body.page-approvals #queueOut tr.main td:nth-child(7)::before { content: "Last NetSuite order"; }
  body.page-approvals #queueOut tr.main td:nth-child(8)::before { content: "Catalogue"; }
  body.page-approvals #queueOut tr.main td:nth-child(9) { grid-column: 2 / 4; display: flex; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--line2) !important; padding-top: 10px !important; margin-top: 4px; }
}
/* phones: the same card as on desktop, laid out in one column with short fields paired up */
@media (max-width: 700px) {
  body.page-approvals #queueOut tr.grp td, body.page-approvals #searchOut tr.grp td { background: transparent !important; border: 0 !important; padding: 16px 2px 6px !important; font-size: 14px; line-height: 1.5; color: var(--body); }
  body.page-approvals #queueOut tr.grp td b { color: var(--ink); font-size: 15px; }
  body.page-approvals #queueOut tr.grp-ready td b { color: var(--green); }
  body.page-approvals #queueOut tr.grp-needs td b { color: var(--amber, #d98c00); }
  body.page-approvals #queueOut tr.grp td button { display: block; margin: 8px 0 0 !important; width: 100%; }
  body.page-approvals #queueOut tr.main, body.page-approvals #searchOut tr.main {
    display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; position: relative;
    background: var(--card) !important; border: 1px solid var(--line) !important; border-left: 4px solid var(--navy) !important;
    border-radius: var(--r, 10px); box-shadow: var(--shadow); padding: 14px 14px 12px !important; margin: 0 0 12px !important; }
  body.page-approvals #queueOut tr.grp-ready ~ tr.main { border-left-color: var(--green) !important; }
  body.page-approvals #queueOut tr.grp-needs ~ tr.main { border-left-color: var(--amber, #d98c00) !important; }
  body.page-approvals #queueOut tr.grp-ready ~ tr.grp-needs ~ tr.main { border-left-color: var(--amber, #d98c00) !important; }
  body.page-approvals #queueOut tr.grp-checking ~ tr.main { border-left-color: var(--line) !important; }
  body.page-approvals #queueOut tr.main td, body.page-approvals #searchOut tr.main td { display: block; border: 0 !important; padding: 0 !important; font-size: 14px; line-height: 1.4; color: var(--body); background: transparent !important; min-width: 0; overflow-wrap: anywhere; grid-column: 1 / -1; }
  body.page-approvals #queueOut tr.main td::before, body.page-approvals #searchOut tr.main td::before { font-size: 10.5px; color: var(--mut); margin-bottom: 3px; }
  body.page-approvals #queueOut tr.main td:nth-child(1), body.page-approvals #searchOut tr.main td:nth-child(1) { position: absolute; top: 14px; right: 14px; }
  body.page-approvals #queueOut tr.main td:nth-child(1) input, body.page-approvals #searchOut tr.main td:nth-child(1) input { width: 22px; height: 22px; min-height: 0; }
  body.page-approvals #queueOut tr.main td:nth-child(2), body.page-approvals #searchOut tr.main td:nth-child(2) { order: 1; font-size: 16px; padding-right: 36px !important; }
  body.page-approvals #queueOut tr.main td:nth-child(2) b, body.page-approvals #queueOut tr.main td:nth-child(2) a, body.page-approvals #searchOut tr.main td:nth-child(2) b { color: var(--ink); }
  body.page-approvals #queueOut tr.main td:nth-child(3), body.page-approvals #searchOut tr.main td:nth-child(3) { order: 2; grid-column: 1; }
  body.page-approvals #queueOut tr.main td:nth-child(7), body.page-approvals #searchOut tr.main td:nth-child(7) { order: 3; grid-column: 2; }
  body.page-approvals #queueOut tr.main td:nth-child(4), body.page-approvals #searchOut tr.main td:nth-child(4) { order: 4; }
  body.page-approvals #queueOut tr.main td:nth-child(5), body.page-approvals #searchOut tr.main td:nth-child(5) { order: 5; }
  body.page-approvals #queueOut tr.main td:nth-child(6), body.page-approvals #searchOut tr.main td:nth-child(6) { order: 6; }
  body.page-approvals #queueOut tr.main td:nth-child(8), body.page-approvals #searchOut tr.main td:nth-child(8) { order: 7; }
  body.page-approvals #queueOut tr.main td:nth-child(6) select, body.page-approvals #queueOut tr.main td:nth-child(8) select,
  body.page-approvals #searchOut tr.main td:nth-child(6) select, body.page-approvals #searchOut tr.main td:nth-child(8) select { width: 100% !important; max-width: 100%; font-size: 16px; min-height: 44px; margin-top: 6px; }
  body.page-approvals #queueOut tr.main td:nth-child(9), body.page-approvals #searchOut tr.main td:nth-child(9) { order: 8; display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; border-top: 1px solid var(--line2) !important; padding-top: 12px !important; margin-top: 2px; }
  body.page-approvals #queueOut tr.main td:nth-child(9) button, body.page-approvals #searchOut tr.main td:nth-child(9) button { width: 100%; min-height: 46px; margin: 0 !important; }
  body.page-approvals #queueOut tr.main .pill, body.page-approvals #searchOut tr.main .pill { white-space: normal; }
  body.page-approvals #queueOut tr.detail, body.page-approvals #searchOut tr.detail { background: var(--card) !important; border: 1px solid var(--line) !important; border-top: 0 !important; border-radius: 0 0 var(--r, 10px) var(--r, 10px); margin: -14px 0 12px !important; padding: 10px 14px !important; }
}
@media (min-width: 1100px) {
  body.page-approvals #queueWrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 16px; align-items: start; }
  body.page-approvals #queueSide { display: block; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
  body.page-approvals #queueOut tr.detail { display: none !important; }
}
#queueSide { display: none; }
#queueSide .tcard { padding: 16px; }
#queueSide table, #queueSide tbody, #queueSide tr, #queueSide td { display: block !important; min-width: 0 !important; border: 0 !important; padding: 0 !important; background: transparent !important; }
#queueSide .qs-h { margin: 0 0 4px; color: var(--ink); font-size: 19px; }
#queueSide .qs-sub { color: var(--mut); font-size: 13px; margin-bottom: 12px; }
#queueSide .dgrid { grid-template-columns: 1fr 1fr; }

/* ---------- company card (assets/company-card.js) ---------- */
.dcc-scrim { position: fixed; inset: 0; background: rgba(6, 20, 34, .5); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.dcc-card { position: relative; background: var(--bg, #f7f7f7); color: var(--body, #26415c); width: 100%; max-width: 620px; max-height: 100%; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.35);
  display: flex; flex-direction: column; overflow: hidden; font-family: var(--f); }
.dcc-h { display: flex; justify-content: space-between; gap: 12px; padding: 16px 18px 14px; background: var(--card, #fff); border-bottom: 1px solid var(--line, #e4e6ea); }
.dcc-h h2 { margin: 0 0 6px; font-size: 22px; line-height: 1.2; color: var(--ink, #0f4c80); }
.dcc-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.dcc-pill { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--line2, #f0f1f3); color: var(--ink, #0f4c80); text-decoration: none; white-space: nowrap; }
.dcc-pill.g { background: var(--green-bg, #e8f5e9); color: var(--green, #2e7d32); }
.dcc-pill.a { background: var(--amber-bg, #fff4e0); color: var(--amber, #8a5a00); }
.dcc-pill.r { background: var(--red-bg, #fdecec); color: var(--red, #c62828); }
.dcc-pill.t { background: var(--teal-bg, #e5f6f6); color: #0e7f80; }
.dcc-pill.n:hover { text-decoration: underline; }
.dcc-sub { font-size: 13px; color: var(--mut, #6f8299); }
.dcc-sub b { color: var(--ink, #0f4c80); }
.dcc-x { flex: none; width: 38px; height: 38px; border-radius: 50% !important; border: 1px solid var(--line, #e4e6ea) !important; background: var(--card, #fff) !important; color: var(--ink, #0f4c80) !important;
  display: grid !important; place-items: center; padding: 0 !important; cursor: pointer; }
.dcc-card svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.dcc-body { padding: 16px 18px; overflow: auto; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.dcc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.dcc-stat { background: var(--card, #fff); border: 1px solid var(--line, #e4e6ea); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.dcc-k { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--mut, #6f8299); }
.dcc-v { font-size: 22px; font-weight: 700; color: var(--ink, #0f4c80); font-variant-numeric: tabular-nums; margin: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dcc-s { font-size: 12px; color: var(--mut, #6f8299); }
.dcc-s.up { color: var(--green, #2e7d32); } .dcc-s.dn { color: var(--red, #c62828); }
.dcc-box { background: var(--card, #fff); border: 1px solid var(--line, #e4e6ea); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.dcc-box h3 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--mut, #6f8299); }
.dcc-ph { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line2, #f0f1f3); }
.dcc-box h3 + .dcc-ph { border-top: 0; padding-top: 0; }
.dcc-num { font-size: 19px; font-weight: 700; color: var(--ink, #0f4c80); user-select: all; font-variant-numeric: tabular-nums; }
.dcc-mail { font-size: 15px; font-weight: 500; color: var(--ink, #0f4c80); overflow-wrap: anywhere; user-select: all; }
.dcc-btns { display: flex; gap: 6px; }
.dcc-card .dcc-b { display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 14px !important; border-radius: 8px !important;
  border: 1px solid var(--line, #e4e6ea) !important; background: var(--card, #fff) !important; color: var(--ink, #0f4c80) !important; font: 700 14px var(--f) !important;
  text-transform: none !important; letter-spacing: 0 !important; text-decoration: none !important; cursor: pointer; white-space: nowrap; }
.dcc-card .dcc-b:hover { border-color: var(--teal, #1fb6b6) !important; }
.dcc-card .dcc-b.pri { background: var(--btn, #0f4c80) !important; border-color: var(--btn, #0f4c80) !important; color: var(--btn-ink, #fff) !important; }
.dcc-card .dcc-b.order { background: var(--teal, #1fb6b6) !important; border-color: var(--teal, #1fb6b6) !important; color: #06323a !important; font-weight: 800 !important; padding: 0 18px !important; box-shadow: 0 2px 8px rgba(31,182,182,.35); }
.dcc-card .dcc-b.order:hover { filter: brightness(1.08); border-color: var(--teal, #1fb6b6) !important; }
.dcc-card .dcc-b.order svg { stroke-width: 2.2; }
.dcc-card .dcc-b.ok { border-color: var(--green, #2e7d32) !important; color: var(--green, #2e7d32) !important; }
.dcc-card .dcc-b:disabled { opacity: .6; }
.dcc-kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: 14.5px; }
.dcc-kv dt { color: var(--mut, #6f8299); }
.dcc-kv dd { margin: 0; color: var(--ink, #0f4c80); font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.dcc-lnk { display: inline-flex; align-items: center; gap: 3px; color: var(--navy, #0f4c80); font-weight: 700; text-decoration: none; }
.dcc-lnk:hover { text-decoration: underline; }
.dcc-lnk svg { width: 14px; height: 14px; }
.dcc-warn { color: var(--red, #c62828); font-weight: 700; }
.dcc-ord { display: flex; justify-content: space-between; gap: 10px; font-size: 14.5px; padding-top: 8px; border-top: 1px solid var(--line2, #f0f1f3); font-variant-numeric: tabular-nums; }
.dcc-box h3 + .dcc-ord { border-top: 0; padding-top: 0; }
.dcc-ord b { color: var(--ink, #0f4c80); }
.dcc-note { font-size: 13.5px; color: var(--mut, #6f8299); }
.dcc-err { background: var(--red-bg, #fdecec); color: var(--red, #c62828); border-radius: 8px; padding: 9px 12px; font-size: 14px; }
.dcc-f { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 18px; background: var(--card, #fff); border-top: 1px solid var(--line, #e4e6ea); }
.dcc-body .dcc-f { padding: 0; background: none; border: 0; }
.dcc-fld { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; color: var(--ink, #0f4c80); min-width: 0; }
.dcc-fld input { padding: 9px 11px; border: 1px solid var(--steel, #9fafc9); border-radius: 8px; font: 500 15px var(--f); background: var(--input, #fff); color: var(--body, #26415c); width: 100%; box-sizing: border-box; }
.dcc-fld small { font-weight: 500; color: var(--mut, #6f8299); }
.dcc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dcc-chk { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--body, #26415c); }
.dcc-toast { position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%); background: #0a3152; color: #fff; padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 700; box-shadow: 0 6px 20px rgba(0,0,0,.25); white-space: nowrap; }
[data-card-co], [data-card-ns] { cursor: pointer; }
@media (max-width: 640px) {
  .dcc-scrim { padding: 0; align-items: flex-end; }
  .dcc-card { max-height: 94%; border-radius: 14px 14px 0 0; }
  .dcc-two { grid-template-columns: 1fr; }
  .dcc-v { font-size: 19px; }
}
:root[data-theme="dark"] .dcc-pill.t { background: #0f3a3c; color: #7fe0e0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dcc-pill.t { background: #0f3a3c; color: #7fe0e0; } }

/* company card: what they buy, notes */
.dcc-item { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line2, #f0f1f3); font-size: 13px; }
.dcc-box h3 + .dcc-item { border-top: 0; padding-top: 0; }
.dcc-bar { height: 4px; background: var(--line2, #f0f1f3); border-radius: 2px; margin-top: 4px; overflow: hidden; }
.dcc-bar i { display: block; height: 100%; background: var(--navy, #0f4c80); border-radius: 2px; }
.dcc-nadd { display: flex; gap: 8px; align-items: flex-end; }
.dcc-nadd textarea { flex: 1; min-height: 44px; resize: vertical; font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--steel, #9fafc9); border-radius: 8px; background: var(--card, #fff); color: var(--body, #26415c); }
.dcc-nadd textarea:focus { outline: none; border-color: var(--teal, #1fb6b6); box-shadow: 0 0 0 3px rgba(31,182,182,.15); }
.dcc-nt { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line, #e4e6ea); border-left: 4px solid; border-radius: 8px; background: var(--bg, #f7f7f7); font-size: 13px; }
.dcc-av { flex: none; width: 28px; height: 28px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.dcc-ntx { white-space: pre-wrap; word-break: break-word; margin-top: 2px; }
.dcc-nx { float: right; border: 0; background: none; color: var(--mut, #7d90a5); cursor: pointer; padding: 0 2px; }
.dcc-nx:hover { color: var(--red, #d32f2f); }
.dcc-nx svg { width: 14px; height: 14px; }
.dcc-card svg.dcc-hist { width: 100%; height: auto; display: block; stroke: none; fill: currentColor; }
.dcc-card svg.dcc-hist rect { stroke: none; }
.dcc-pp { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line2, #f0f1f3); font-size: 13px; flex-wrap: wrap; }
.dcc-box h3 + .dcc-pp, .dcc-box .dcc-ok + .dcc-pp { border-top: 0; }
.dcc-ppa { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.dcc-b.sm { padding: 4px 9px; font-size: 12px; min-height: 0; }
.dcc-b.danger { color: var(--red, #d32f2f); }
.dcc-mini { border: 0; background: none; color: inherit; cursor: pointer; font-weight: 700; padding: 0 0 0 4px; }
.dcc-sel { padding: 4px 6px; font: inherit; font-size: 12px; border: 1px solid var(--steel, #9fafc9); border-radius: 6px; background: var(--card, #fff); color: var(--body, #26415c); max-width: 200px; }
.dcc-ok { background: var(--green-bg, #e8f5e9); color: var(--green, #2e7d32); border: 1px solid var(--green-line, #c8e6c9); border-radius: 8px; padding: 6px 10px; font-size: 13px; font-weight: 600; }

/* ---------- company card: Overview / Timeline tabs and the timeline ---------- */
.dcc-tabs { display: flex; gap: 4px; background: var(--line2, #f0f1f3); border-radius: 10px; padding: 3px; }
.dcc-tabs button { flex: 1; border: 0 !important; background: transparent !important; color: var(--mut, #6f8299) !important; font: 700 13px var(--f, inherit) !important; padding: 8px !important; border-radius: 8px !important; cursor: pointer; text-transform: none !important; letter-spacing: 0 !important; min-height: 0 !important; }
.dcc-tabs button.on { background: var(--card, #fff) !important; color: var(--ink, #0f4c80) !important; box-shadow: 0 1px 3px rgba(10,49,82,.12); }
.dcc-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.dcc-chips button { border: 1px solid var(--line, #e4e6ea) !important; background: var(--card, #fff) !important; color: var(--body, #26415c) !important; border-radius: 999px !important; padding: 5px 12px !important; font: 600 12.5px var(--f, inherit) !important; cursor: pointer; min-height: 0 !important; text-transform: none !important; letter-spacing: 0 !important; }
.dcc-chips button.on { background: var(--teal, #1fb6b6) !important; border-color: var(--teal, #1fb6b6) !important; color: #fff !important; }
.dcc-tl { position: relative; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; }
.dcc-tl:before { content: ""; position: absolute; left: 6px; top: 4px; bottom: 4px; width: 2px; background: var(--line, #e4e6ea); }
.dcc-ev { position: relative; }
.dcc-ev:before { content: ""; position: absolute; left: -18px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--steel, #9fafc9); border: 2px solid var(--card, #fff); }
.dcc-ev.k-order:before { background: #2e8b57; } .dcc-ev.k-visit:before { background: var(--teal, #1fb6b6); } .dcc-ev.k-call:before { background: #2a6fb0; }
.dcc-ev.k-task:before { background: #8e44ad; } .dcc-ev.k-note:before { background: #c47f12; } .dcc-ev.s-approval:before { background: #0f4c80; }
.dcc-ev.due:before { background: var(--card, #fff); border-color: #d98c00; }
.dcc-evt { font-size: 11.5px; color: var(--mut, #6f8299); }
.dcc-who { display: inline-block; font-size: 11px; padding: 0 6px; border-radius: 6px; background: var(--line2, #f0f1f3); color: var(--body, #26415c); margin-left: 4px; }
.dcc-evh { font-weight: 700; color: var(--ink, #0f4c80); font-size: 13.5px; }
.dcc-evx { font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.dcc-evx.clip { max-height: 4.4em; overflow: hidden; cursor: pointer; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }