/* ComponentERP beta: UX batch C (T2861 / T2865). Record pages and navigation. Tokens from base.css (light-dark()). */

/* #22 copy buttons */
.ux27c-copy{display:inline-grid;place-items:center;vertical-align:middle;min-height:0;width:22px;height:22px;padding:0;margin-left:4px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--muted);opacity:.75;font-size:0;line-height:0}
.ux27c-copy:hover{opacity:1;color:var(--blue);border-color:var(--line);background:var(--panel)}
.ux27c-copy:focus-visible{opacity:1}
.ux27c-copy.is-done{color:var(--good);opacity:1}
h1 .ux27c-copy{width:26px;height:26px;margin:0 6px 0 4px;vertical-align:2px}
h1 .ux27c-copy svg{width:15px;height:15px}
td .ux27c-copy{width:20px;height:20px;margin-left:2px}

/* #9 chain: Invoice and Shipment steps */
.ux27c-chain{flex-wrap:wrap}
.ux27c-ship{white-space:nowrap}
.ux27c-ship small{color:var(--muted);margin-left:3px}

/* #10 balance due */
.iv-totals dt.ux27c-bal,.iv-totals dd.ux27c-bal{font-weight:700;border-top:1px solid var(--line);padding-top:6px;margin-top:2px}
.iv-totals dd.ux27c-bal.is-due{color:light-dark(#a3291b,#ff9d8f)}
.iv-totals dd.ux27c-bal.is-zero{color:var(--good)}
button.ux27c-off,button.ux27c-off:hover{opacity:.45;cursor:not-allowed;border-color:var(--line)}

/* #13 couldn't load */
.ux27c-loadfail{padding:16px;border:1px solid var(--line);border-radius:7px;background:var(--panel)}
.ux27c-loadfail p{margin:0 0 8px}
.ux27c-failmsg{color:light-dark(#8e4714,#ffbe91);font-weight:600;font-size:14px}

/* #25 company summary strip */
.ux27c-sum{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 14px}
.ux27c-sum-item{display:flex;flex-direction:column;gap:2px;min-width:118px;padding:8px 12px;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--text);text-decoration:none}
.ux27c-sum-item span{font-size:11px;color:var(--muted);font-weight:600}
.ux27c-sum-item strong{font-size:15px;font-variant-numeric:tabular-nums;color:var(--blue)}
.ux27c-sum-item:hover{border-color:var(--blue);text-decoration:none}
.ux27c-sum-item.is-bad strong{color:light-dark(#a3291b,#ff9d8f)}
.company-page>.back{margin-bottom:10px}

/* #26 breadcrumb links */
#crumb a[data-ux27c-crumb]{color:var(--muted);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
#crumb a[data-ux27c-crumb]:hover{color:var(--blue);text-decoration-color:currentColor}

/* #30 phones: one Actions menu */
.ux27c-actmenu{position:relative;margin:8px 0 12px}
.ux27c-actmenu>summary{list-style:none;display:inline-flex;align-items:center;gap:6px;padding:7px 14px;min-height:36px;border:1px solid var(--line);border-radius:5px;background:var(--panel);color:var(--text);font-weight:600;cursor:pointer}
.ux27c-actmenu>summary::-webkit-details-marker{display:none}
.ux27c-actmenu>summary::after{content:'▾';font-size:11px;color:var(--muted)}
.ux27c-actmenu[open]>summary{border-color:var(--blue)}
.ux27c-actlist{display:flex;flex-direction:column;gap:6px;margin-top:6px;padding:8px;border:1px solid var(--line);border-radius:7px;background:var(--panel);box-shadow:0 8px 24px #0002}
.ux27c-actlist>button,.ux27c-actlist>a{width:100%;text-align:left;min-height:38px}
.ux27c-actlist>a{display:block;padding:9px 11px;border:1px solid var(--line);border-radius:5px}
.pageactions.ux27c-has-menu{display:block;width:100%}

/* T2950: clickable document-chain boxes */
.record-chain-step.is-link{cursor:pointer;transition:background-color .12s,border-color .12s,box-shadow .12s}
.record-chain-step.is-link:hover,.record-chain-step.is-link:focus-visible{background:light-dark(#eaf4fd,#17324a);border-color:light-dark(#2184cf,#5aa9e6);box-shadow:0 1px 4px light-dark(rgba(16,133,216,.25),rgba(0,0,0,.5));outline:none}
.record-chain-step.is-link:hover>span,.record-chain-step.is-link:focus-visible>span{color:light-dark(#0b5cad,#8cc8f5)}
.record-chain-step.is-current.is-link:hover{box-shadow:inset 3px 0 0 light-dark(#2184cf,#5aa9e6),0 1px 4px light-dark(rgba(16,133,216,.25),rgba(0,0,0,.5))}
.chain-pick{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:160px;padding:4px;background:var(--panel,#fff);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.chain-pick a{padding:7px 10px;border-radius:5px;font-weight:600;text-decoration:none;color:inherit}
.chain-pick a:hover,.chain-pick a:focus{background:light-dark(#eaf4fd,#17324a);outline:none}

/* T2951 (Mike 10/22): scrollbars with some life - rounded thumb that lights up brand blue on hover, light/dark aware.
   Chrome/Edge/Safari use the ::-webkit-scrollbar rules; Firefox only understands scrollbar-color/width. */
:root{--sb-track:light-dark(#e9eff6,#142030);--sb-thumb:light-dark(#a9bdd3,#41597a);--sb-hover:light-dark(#1085d8,#4aa8f0);--sb-active:light-dark(#0866ba,#87c2ff)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--sb-track);border-radius:10px}
::-webkit-scrollbar-thumb{background:var(--sb-thumb);border-radius:10px;border:3px solid var(--sb-track);min-height:40px;min-width:40px;transition:background-color .15s}
::-webkit-scrollbar-thumb:hover{background:var(--sb-hover);border-width:2px}
::-webkit-scrollbar-thumb:active{background:var(--sb-active);border-width:2px}
::-webkit-scrollbar-corner{background:var(--sb-track)}
/* the dark sidebar gets its own darker track */
.sidebar ::-webkit-scrollbar-track,.sidebar::-webkit-scrollbar-track{background:#16243a}
.sidebar ::-webkit-scrollbar-thumb,.sidebar::-webkit-scrollbar-thumb{background:#3d5878;border-color:#16243a}
.sidebar ::-webkit-scrollbar-thumb:hover,.sidebar::-webkit-scrollbar-thumb:hover{background:#4aa8f0}
@supports not selector(::-webkit-scrollbar){html,*{scrollbar-width:thin;scrollbar-color:var(--sb-thumb) var(--sb-track)}.sidebar,.sidebar *{scrollbar-color:#3d5878 #16243a}}

/* T2952 (Mike 10/22): every clickable row hovers like Quote Search (tinted row + thin dark-blue outline around the whole row) and shows the hand. */
:is(tr[data-row-href],tr[data-dashboard-sales-row],tr[data-dashboard-prospect],tr[data-dashboard-task],tr[data-purchasing-part],tr[data-operations-line],tr.dashboard-purchasing-row,tr[tabindex="0"]),
:is(tr[data-row-href],tr[data-dashboard-sales-row],tr[data-dashboard-prospect],tr[data-dashboard-task],tr[data-purchasing-part],tr[data-operations-line],tr.dashboard-purchasing-row,tr[tabindex="0"])>td{cursor:pointer}
:is(tr[data-row-href],tr[data-dashboard-sales-row],tr[data-dashboard-prospect],tr[data-dashboard-task],tr[data-purchasing-part],tr[data-operations-line],tr.dashboard-purchasing-row,tr[tabindex="0"]):hover:not(.selected):not(.vp-active)>td{background:light-dark(#d6e8ff,#1d4a74)!important}
:is(tr[data-row-href],tr[data-dashboard-sales-row],tr[data-dashboard-prospect],tr[data-dashboard-task],tr[data-purchasing-part],tr[data-operations-line],tr.dashboard-purchasing-row,tr[tabindex="0"]):hover:not(.selected):not(.vp-active){outline:1px solid light-dark(#0b3d91,#6cc0ff);outline-offset:-1px}

/* T2956 (Mike 10/22): expanded detail panels show all their rows (no 230-480 px inner box) and never trap the mouse wheel;
   wide tables still scroll sideways. Applies to dashboard accounting/warehouse/sales/purchasing details and list detail panels. */
.vp-scroller{max-height:none!important;overflow-y:visible!important;overflow-x:auto;overscroll-behavior:auto!important}