/* Adjusted OTD Review — scoped styles. Tokens from docs/design/otd-review. */
#tab-otd .otd-head{display:flex;justify-content:space-between;align-items:flex-start;margin:4px 0 14px}
#tab-otd .otd-head h1{font-size:17px;font-weight:600;color:#f0ede8;margin:0 0 4px}
#tab-otd .otd-sub{font-size:12.5px;color:#a09e98}
#tab-otd .otd-counter{padding:5px 14px;border-radius:20px;font-size:12px;font-weight:600;background:#3a2c12;color:#fac775;white-space:nowrap}
#tab-otd .otd-counter.done{background:#04342c;color:#9fe1cb}
#tab-otd .otd-toolbar{display:flex;gap:8px;margin-bottom:10px}
#tab-otd .otd-toolbar input[type=text]{flex:1;background:#1c1c1a;border:1px solid rgba(255,255,255,.12);border-radius:8px;color:#f0ede8;padding:8px 12px;font-size:13px}
/* Toolbar + date buttons deliberately carry NO base style: they inherit
   index.html's global `select,button` rule (and its hover) so they look
   identical to the Driver Directory toolbar. Only pressed/busy states here. */
#tab-otd .otd-toolbar button:active,#tab-otd .otd-date-btn:active{background:var(--bg2);transform:translateY(1px)}
#tab-otd #otd-sync.busy{color:#e6b968;border-color:rgba(230,185,104,.4);pointer-events:none}
#tab-otd .otd-spin{display:inline-block}
#tab-otd #otd-sync.busy .otd-spin{animation:otdspin .9s linear infinite}
@keyframes otdspin{to{transform:rotate(360deg)}}
#tab-otd .otd-toolbar2{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:8px}
#tab-otd .otd-seg{display:inline-flex;background:#1c1c1a;border:1px solid rgba(255,255,255,.08);border-radius:9px;padding:3px;gap:2px}
#tab-otd .otd-seg-btn{background:none;border:none;border-radius:7px;color:#a09e98;padding:6px 14px;font-size:12.5px;cursor:pointer}
#tab-otd .otd-seg-btn.active{background:#2c2c2a;color:#f0ede8}
#tab-otd .otd-count{display:inline-block;min-width:18px;padding:1px 6px;border-radius:10px;background:#252523;font-size:10.5px;margin-left:4px}
#tab-otd .otd-dates{display:flex;gap:6px;align-items:center}
#tab-otd .otd-date-btn.active{border-color:#e92030;color:#f0ede8}
#tab-otd .otd-dates input[type=date]{background:#1c1c1a;border:1px solid rgba(255,255,255,.12);border-radius:7px;color:#d6d4ce;padding:5px 8px;font-size:12px}
#tab-otd .otd-note{background:#3a2c12;color:#fac775;border-radius:8px;padding:8px 12px;font-size:12px;margin-bottom:10px}
#tab-otd .otd-tablewrap{background:#1c1c1a;border:1px solid rgba(255,255,255,.06);border-radius:13px;overflow:auto;max-height:calc(100vh - 320px)}
#tab-otd .otd-table{width:100%;border-collapse:collapse;min-width:1560px;font-size:14px}
#tab-otd .otd-table th{position:sticky;top:0;background:#161615;color:#a09e98;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;text-align:left;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.08);white-space:nowrap;z-index:2}
/* Frozen Order ID column: first cell sticks left during horizontal scroll so
   the reviewer never loses which order a row belongs to. Solid backgrounds
   are required (sticky cells float over scrolling content); z layering =
   corner (4) > header row (2) > frozen tds (1) > body. */
#tab-otd .otd-table th:first-child{position:sticky;left:0;z-index:4}
#tab-otd .otd-table td:first-child{position:sticky;left:0;z-index:1;background:#1c1c1a;box-shadow:1px 0 0 rgba(255,255,255,.06)}
#tab-otd tr.otd-decided td:first-child{background:#20201e}   /* opaque blend of the row tint for the frozen cell */
#tab-otd tbody tr:hover td:first-child{background:var(--bg2)}
/* font-size must live on td (not the table): index.html's global `td` rule
   sets 12px directly on cells, which beats anything inherited from .otd-table */
#tab-otd .otd-table td{padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.05);color:#d6d4ce;vertical-align:top;font-size:14px}
#tab-otd .otd-table th{cursor:default}   /* override index.html's global thead th pointer — Comment/Status aren't clickable */
#tab-otd .otd-th-label[data-sort]{cursor:pointer}
#tab-otd .otd-sort{color:#6b6a65}
#tab-otd .otd-sort.on{color:#e92030}
#tab-otd .otd-cf{cursor:pointer;color:#6b6a65}
#tab-otd .otd-cf.on{color:#e92030}
#tab-otd .otd-link{color:#b5d4f4;text-decoration:none}
#tab-otd .otd-link:hover{color:#d5e8fb}
#tab-otd .otd-pill{display:inline-block;background:#3a2c12;color:#e6b968;border-radius:20px;padding:3px 11px;font-size:14px;margin:1px 2px 1px 0;white-space:nowrap}
#tab-otd .otd-pill-row{white-space:nowrap}
#tab-otd .otd-pill-row+.otd-pill-row{margin-top:3px}
#tab-otd .otd-late{color:#e6975a;font-size:14px}
#tab-otd .otd-btns{white-space:nowrap}
#tab-otd .otd-btns button{border:none;border-radius:7px;padding:7px 16px;font-size:14px;font-weight:600;cursor:pointer;margin-right:6px}
#tab-otd .otd-yes{background:#0c2a24;color:#7fc9ac;opacity:.9}
#tab-otd .otd-yes.active{background:#0f6e56;color:#fff;opacity:1;box-shadow:0 0 0 2px rgba(15,110,86,.25)}
#tab-otd .otd-no{background:#3a1414;color:#d99b9b;opacity:.9}
#tab-otd .otd-no.active{background:#c2321f;color:#fff;opacity:1;box-shadow:0 0 0 2px rgba(194,50,31,.25)}
#tab-otd .otd-btns button.dim{opacity:.5}
/* decided rows keep FULL-strength text (user call 2026-08-05: the .7 dim made
   whole rows read gray) — only a whisper of background tint marks them; the
   Saved badge, colored reason, and dimmed Yes/No carry the reviewed signal */
#tab-otd tr.otd-decided td{background:rgba(255,255,255,.015)}
#tab-otd .otd-badge{display:inline-flex;align-items:center;gap:4px;border-radius:20px;padding:4px 12px;font-size:14px;font-weight:600}
#tab-otd .otd-badge.ok{background:#04342c;color:#9fe1cb}
#tab-otd .otd-reason-td{max-width:230px}
#tab-otd .otd-reason{font-size:14px;font-weight:600;padding:2px 0;cursor:pointer}
#tab-otd .otd-reason.yes{color:#9fe1cb}
#tab-otd .otd-reason.no{color:#e0a3a3}
/* width (not just max-width) — the only wrapping cell in an auto-layout
   table otherwise collapses to its minimum while nowrap columns take all
   the slack (QA: 99px column, 244px-tall rows) */
#tab-otd .otd-comment-td{width:280px;min-width:200px;max-width:280px;white-space:normal}
/* long comments clamp to 3 lines — full text on hover (title) and in the
   sheet on click; row height stays sane no matter what gets written */
#tab-otd .otd-comment{font-size:14px;color:#a09e98;line-height:1.45;text-wrap:pretty;cursor:pointer;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
#tab-otd .otd-none{color:#6b6a65}
#tab-otd .otd-pop{display:inline-block;animation:otdpop .28s ease-out}
@keyframes otdpop{0%{transform:scale(.6)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
#tab-otd .otd-pending{color:#6b6a65}
#tab-otd .otd-empty{text-align:center;color:#6b6a65;padding:28px}
#tab-otd{position:relative}
#tab-otd .otd-cf-pop{position:absolute;background:#252523;border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:10px;box-shadow:0 16px 44px rgba(0,0,0,.55);z-index:40;min-width:200px;max-width:260px}
#tab-otd .otd-cf-pop input[type=text]{width:100%;background:#1c1c1a;border:1px solid rgba(255,255,255,.12);border-radius:7px;color:#f0ede8;padding:6px 9px;font-size:12px}
#tab-otd .otd-cf-list{max-height:220px;overflow:auto;display:flex;flex-direction:column;gap:4px;font-size:12px;color:#d6d4ce}
#tab-otd .otd-cf-actions{display:flex;gap:6px;margin-top:8px}
#tab-otd .otd-cf-actions button{flex:1;background:#2c2c2a;border:1px solid rgba(255,255,255,.1);border-radius:7px;color:#d6d4ce;padding:5px 0;font-size:12px;cursor:pointer}
.otd-sheet-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:2147482000;display:flex;align-items:center;justify-content:center;padding:40px}
.otd-sheet{width:620px;max-height:88vh;overflow:auto;background:#252523;border:1px solid rgba(255,255,255,.12);border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.65);animation:otdrise .16s ease-out}
@keyframes otdrise{0%{transform:translateY(10px);opacity:0}100%{transform:translateY(0);opacity:1}}
.otd-sheet.norise{animation:none}
.otd-sheet-head{padding:20px 24px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.otd-sheet-chips{display:flex;gap:9px;align-items:center;margin-bottom:7px}
.otd-sheet-chip{border-radius:20px;padding:3px 11px;font-size:12px;font-weight:700}
.otd-sheet-chip.yes{background:#04342c;color:#9fe1cb}
.otd-sheet-chip.no{background:#3a1414;color:#e0a3a3}
.otd-sheet-ctx{font-size:12px;color:#8a8880}
.otd-sheet-oid{color:#b5d4f4}
.otd-sheet-title{font-size:16.5px;font-weight:600;color:#f0ede8}
.otd-sheet-sub{font-size:12.5px;color:#a09e98;line-height:1.5;margin-top:5px}
.otd-sheet-list{padding:16px 24px 4px;display:flex;flex-direction:column;gap:7px}
.otd-sheet-label{font-size:11px;font-weight:600;color:#6b6a65;text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}
.otd-sheet-label .req{color:#e92030;text-transform:none;letter-spacing:0}
.otd-sheet-label .opt{color:#6b6a65;font-weight:500;text-transform:none;letter-spacing:0}
.otd-sheet-opt{display:flex;gap:11px;padding:11px 13px;border-radius:10px;cursor:pointer;background:#1f1f1d;border:1px solid rgba(255,255,255,.08)}
.otd-sheet-opt.sel.yes{background:rgba(15,110,86,.16);border-color:#0f6e56}
.otd-sheet-opt.sel.no{background:rgba(194,50,31,.16);border-color:#c2321f}
.otd-sheet-radio{width:16px;height:16px;border-radius:50%;flex:none;margin-top:2px;border:1px solid rgba(255,255,255,.28);background:transparent;position:relative}
.otd-sheet-radio.sel{border:none}
.otd-sheet-radio.sel.yes{background:#0f6e56}
.otd-sheet-radio.sel.no{background:#c2321f}
.otd-sheet-radio.sel::after{content:'';position:absolute;inset:5px;border-radius:50%;background:#fff}
.otd-sheet-optlabel{font-size:14px;font-weight:600;color:#f0ede8}
.otd-sheet-optdesc{font-size:12.5px;color:#a09e98;line-height:1.5;margin-top:2px;text-wrap:pretty}
.otd-sheet-commentwrap{padding:16px 24px 0}
.otd-sheet-comment{width:100%;height:66px;resize:none;background:#1c1c1a;border:1px solid rgba(255,255,255,.12);border-radius:9px;color:#f0ede8;font-size:13px;line-height:1.5;padding:10px 12px;outline:none;font-family:inherit}
.otd-sheet-comment.need{border-color:rgba(233,32,48,.55)}
/* sticky: on short viewports the sheet scrolls internally — Save/Cancel must
   never sit invisibly below the fold */
.otd-sheet-foot{padding:16px 24px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px;position:sticky;bottom:0;background:#252523;border-top:1px solid rgba(255,255,255,.06)}
.otd-sheet-hint{font-size:12px;color:#8a8880;max-width:300px}
.otd-sheet-btns{display:flex;gap:8px}
.otd-sheet-btns button{border:none;border-radius:8px;padding:9px 16px;font-size:14px;font-weight:600;cursor:pointer}
#otd-sheet-cancel{background:#2c2c2a;color:#d6d4ce}
.otd-sheet-save{padding:9px 18px}
.otd-sheet-save.yes{background:#0f6e56;color:#fff}
.otd-sheet-save.no{background:#c2321f;color:#fff}
.otd-sheet-save.disabled{background:#2c2c2a;color:#6b6a65;cursor:not-allowed}
#otd-toast-host{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:2147483000;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.otd-toast{max-width:520px;background:#252523;color:#f0ede8;border-radius:8px;padding:10px 14px;font:12px/1.5 Inter,system-ui,sans-serif;box-shadow:0 10px 30px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.1)}
.otd-toast-ok{border-color:rgba(15,110,86,.6)}
.otd-toast-no{border-color:rgba(194,50,31,.6)}
.otd-toast-switch{border-color:rgba(24,95,165,.6)}
.otd-toast-err{border-color:rgba(233,32,48,.7)}