/* =============================================================================
   LEAD TIMES — Cost History › Lead Times sub-tab + #leadTimeModal (lead-times.js)
   Every class is lt- prefixed and scoped under #cost-tab-leadtimes or
   #leadTimeModal. The table is its own .lt-tbl rather than .tbl: .tbl carries
   even-row striping, a mobile display:block and !important cell paddings that
   would break the grouped rows and the bar/gridline alignment, so its final
   look (styles.css "body .tbl" layer) is mirrored here instead.
   ========================================================================== */
/* Cell padding + the lead-time label width drive BOTH the row bars and the
   header axis, so gridlines and tick labels always line up. */
#cost-tab-leadtimes{--lt-pad:12px;--lt-wks:76px;--lt-gap:8px}
#cost-tab-leadtimes .lt-controls{grid-template-columns:1.5fr repeat(3,auto) auto}

/* ---- table shell ---- */
#cost-tab-leadtimes .lt-scroll{overflow:auto;max-height:640px;border:1px solid #EFEFEF;border-radius:12px;-webkit-overflow-scrolling:touch}
/* Fixed layout: the colgroup sets widths (Item takes the rest), so long text
   ellipsizes/wraps inside its cell and never pushes the table past the card
   at a 1280 laptop with the sidebar open (~930px). Below 860px it scrolls. */
#cost-tab-leadtimes .lt-tbl{width:100%;min-width:860px;table-layout:fixed;border-collapse:separate;border-spacing:0}
#cost-tab-leadtimes .lt-col-mfr{width:14%}
#cost-tab-leadtimes .lt-col-lt{width:28%}
#cost-tab-leadtimes .lt-col-asof{width:146px}
#cost-tab-leadtimes .lt-col-proj{width:12%}
#cost-tab-leadtimes .lt-col-act{width:66px}
#cost-tab-leadtimes .lt-tbl th{position:sticky;top:0;z-index:3;background:#FAFAFA;border-bottom:1px solid #E5E5E5;color:#525252;font-weight:700;font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;padding:10px var(--lt-pad);text-align:left;line-height:1.3}
#cost-tab-leadtimes .lt-tbl th:first-child::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:2px;background:var(--red);border-radius:1px}
#cost-tab-leadtimes .lt-tbl td{padding:12px var(--lt-pad);border-bottom:1px solid #F0F0F0;font-size:12.5px;color:#262626;vertical-align:middle}
#cost-tab-leadtimes .lt-tbl tbody tr:last-child td{border-bottom:none}
#cost-tab-leadtimes .lt-row td{transition:background .12s ease}
#cost-tab-leadtimes .lt-row:hover td{background:rgba(231,0,0,0.025)}

/* ---- division group header ---- */
#cost-tab-leadtimes .lt-grp td{background:#F6F6F7;padding:9px var(--lt-pad);border-bottom:1px solid #EAEAEA}
#cost-tab-leadtimes .lt-grp-in{display:flex;align-items:center;gap:10px}
#cost-tab-leadtimes .lt-div-pill{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--red);background:rgba(231,0,0,0.08);border:1px solid rgba(231,0,0,0.18);border-radius:6px;padding:1px 7px;min-width:32px;text-align:center;font-variant-numeric:tabular-nums}
#cost-tab-leadtimes .lt-div-pill.lt-none{color:#737373;background:#EDEDED;border-color:#E0E0E0}
#cost-tab-leadtimes .lt-grp-name{font-size:12.5px;font-weight:700;color:#171717}
#cost-tab-leadtimes .lt-grp-count{font-size:11px;color:#8A8A8A;font-family:var(--mono)}
#cost-tab-leadtimes .lt-grp-range{margin-left:auto;font-size:11px;color:#737373;white-space:nowrap}
#cost-tab-leadtimes .lt-grp-range b{font-family:var(--mono);font-weight:700;color:#171717;font-variant-numeric:tabular-nums}

/* ---- item / text cells ---- */
#cost-tab-leadtimes .lt-item{font-weight:700;color:#171717;line-height:1.35;overflow-wrap:anywhere}
#cost-tab-leadtimes .lt-notes{margin-top:2px;font-size:11px;color:#8A8A8A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cost-tab-leadtimes .lt-c-mfr{overflow-wrap:anywhere}
#cost-tab-leadtimes .lt-c-asof{line-height:1.3}
#cost-tab-leadtimes .lt-asof{white-space:nowrap}
#cost-tab-leadtimes .lt-src{margin-top:4px}
#cost-tab-leadtimes .lt-mono{font-family:var(--mono);font-size:11.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
#cost-tab-leadtimes .lt-muted{color:#C4C4C4}
#cost-tab-leadtimes .lt-stale{display:inline-block;margin-left:5px;padding:1px 5px;border-radius:4px;background:#FEF3C7;color:#92400E;font-size:9px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;vertical-align:1px;cursor:help}
#cost-tab-leadtimes .lt-proj{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- lead-time bar on the shared scale ---- */
#cost-tab-leadtimes td.lt-c-lt{position:relative}
#cost-tab-leadtimes .lt-axis-title{white-space:nowrap}
/* Gridlines span the full cell height, so quarters read as one continuous
   column grid down each division — a look-ahead-schedule feel. */
#cost-tab-leadtimes .lt-grid,#cost-tab-leadtimes .lt-axis{position:absolute;top:0;bottom:0;left:calc(var(--lt-pad) + var(--lt-wks) + var(--lt-gap));right:var(--lt-pad);pointer-events:none}
#cost-tab-leadtimes .lt-grid i{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed rgba(15,17,23,0.10)}
#cost-tab-leadtimes .lt-axis span{position:absolute;top:50%;white-space:nowrap;transform:translate(-50%,-50%);font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:0.02em;color:#A3A3A3;font-variant-numeric:tabular-nums}
#cost-tab-leadtimes .lt-axis span:first-child{transform:translate(0,-50%)}
#cost-tab-leadtimes .lt-axis .lt-axis-end{transform:translate(-100%,-50%);color:#737373}
#cost-tab-leadtimes .lt-lt{position:relative;z-index:1;display:flex;align-items:center;gap:var(--lt-gap)}
#cost-tab-leadtimes .lt-wks{flex:0 0 var(--lt-wks);font-family:var(--mono);font-size:12px;font-weight:700;color:#171717;white-space:nowrap;font-variant-numeric:tabular-nums}
#cost-tab-leadtimes .lt-wks small{font-size:10px;font-weight:500;color:#A3A3A3}
#cost-tab-leadtimes .lt-wks.lt-long{color:var(--red)}
#cost-tab-leadtimes .lt-track{position:relative;flex:1;height:8px;border-radius:4px;background:rgba(15,17,23,0.045)}
#cost-tab-leadtimes .lt-seg{position:absolute;top:0;bottom:0;min-width:3px;background:#3F3F46}
#cost-tab-leadtimes .lt-seg-base{left:0;border-radius:4px 0 0 4px}
#cost-tab-leadtimes .lt-seg-range{opacity:0.32;border-radius:0 4px 4px 0}
#cost-tab-leadtimes .lt-seg.lt-solo{border-radius:4px}
#cost-tab-leadtimes .lt-track.lt-long .lt-seg{background:var(--red)}

/* ---- row actions ---- */
#cost-tab-leadtimes .lt-tbl .lt-c-act{text-align:right;white-space:nowrap;padding-left:4px;padding-right:6px}
#cost-tab-leadtimes .lt-icon-btn{width:28px;height:28px;border:none;background:transparent;border-radius:7px;color:#8A8A8A;cursor:pointer;font-size:12px;transition:background .12s,color .12s}
#cost-tab-leadtimes .lt-icon-btn:hover{background:rgba(0,0,0,0.06);color:#262626}
#cost-tab-leadtimes .lt-icon-btn.lt-del:hover{background:rgba(231,0,0,0.08);color:var(--red)}
#cost-tab-leadtimes .lt-icon-btn:focus-visible{outline:2px solid var(--red);outline-offset:1px}

/* Just-saved row: a brief tint so it's easy to find in a long table. */
@keyframes ltFlash{from{background:rgba(231,0,0,0.10)}to{background:transparent}}
#cost-tab-leadtimes .lt-flash td{animation:ltFlash 1.6s ease-out}

/* ---- empty / loading states ----
   Named lt-start*, not lt-empty*: styles.css pads every [class*="empty"]
   element 36px, which would balloon the icon tile and title. */
#cost-tab-leadtimes .lt-start{text-align:center;padding:40px 24px 34px;border:1px dashed #E5E5E5;border-radius:14px;background:linear-gradient(180deg,#FCFCFC,#FFFFFF)}
#cost-tab-leadtimes .lt-start-icon{width:52px;height:52px;margin:0 auto 14px;border-radius:14px;background:rgba(231,0,0,0.08);color:var(--red);display:flex;align-items:center;justify-content:center;font-size:20px}
#cost-tab-leadtimes .lt-start-title{font-size:15px;font-weight:700;color:#171717;margin-bottom:6px}
#cost-tab-leadtimes .lt-start p{font-size:12.5px;color:#737373;max-width:460px;margin:0 auto 16px;line-height:1.55}
#cost-tab-leadtimes .lt-nomatch{padding:26px}
#cost-tab-leadtimes .lt-nomatch .btn{margin-top:10px}
/* .empty-state i is the big faded glyph — keep it off the button's own icon. */
#cost-tab-leadtimes .lt-nomatch .btn i{display:inline;font-size:inherit;margin:0;opacity:1}
#cost-tab-leadtimes .lt-loading{padding:28px;text-align:center;color:#8A8A8A;font-size:12.5px}
#cost-tab-leadtimes .lt-loading i{color:var(--red);margin-right:6px}

/* ---- add / edit modal ---- */
#leadTimeModal .lt-weeks{display:flex;align-items:center;gap:8px}
#leadTimeModal .lt-weeks .form-input{flex:1;min-width:0;font-family:var(--mono)}
#leadTimeModal .lt-weeks span{font-size:11.5px;color:var(--gray-500);flex-shrink:0}
#leadTimeModal .lt-hint{font-size:11px;color:var(--gray-400);margin-top:5px}

@media (max-width:768px){
  #cost-tab-leadtimes{--lt-pad:10px}
  /* One page scroll on phones — no nested vertical scroller; the table still scrolls sideways. */
  #cost-tab-leadtimes .lt-scroll{max-height:none}
  #cost-tab-leadtimes .lt-start{padding:30px 16px 26px}
  /* styles.css stacks .form-row on phones but not .form-row-3. */
  #leadTimeModal .form-row-3{grid-template-columns:1fr;gap:8px}
}