/* Opus-authored modal light theme. Scoped client-folder integration follows below. */
/* Remap dark tokens locally so existing inline var() styles flip to light ink and surfaces. */
#jobModal {
  --white: #172033; --ink: #172033; --muted: #536078; --gray: #536078;
  --navy-2: #ffffff; --navy-3: #f3f5fa; --green: #0f6e64; --blue: #2f4fd8;
  --pk-line: #d9dfeb; --pk-control: #7d879c; --border: #d9dfeb;
  color: #172033;
  background-color: rgba(23, 32, 51, 0.4);
  overscroll-behavior: contain;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #jobModal { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
}

/* Box keeps 720px max width; dvh tracks mobile browser chrome, vh is the fallback. */
#jobModal .modal-box {
  box-sizing: border-box;
  max-width: min(720px, calc(100vw - 16px));
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  scroll-padding-top: 76px; /* focused fields scroll clear of the sticky header */
  background: #ffffff; color: #172033;
  border: 1px solid var(--pk-line); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(23, 32, 51, 0.06), 0 18px 48px rgba(23, 32, 51, 0.18);
  font-size: 16px; line-height: 1.5;
}

/* Opaque header so scrolled content never bleeds through. */
#jobModal .modal-header {
  position: sticky; top: 0; z-index: 1;
  gap: 12px; align-items: center;
  background: #ffffff;
  border-bottom: 1px solid var(--pk-line);
}
#jobModal .modal-header > :not(.modal-close) { min-width: 0; }
#jobModal .modal-title { color: #172033; font-size: 20px; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
#jobModal #modalSubtitle { color: #536078; font-size: 14px !important; overflow-wrap: anywhere; }
#jobModal .modal-close {
  flex: 0 0 auto; width: 44px; height: 44px; min-width: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #172033; background: #ffffff;
  border: 1px solid var(--pk-line); border-radius: 10px; cursor: pointer;
}
#jobModal .modal-close:hover { background: #f3f5fa; }

#jobModal .modal-body { color: #172033; font-size: 16px; min-width: 0; }
/* Long filenames and unbroken message text wrap instead of forcing horizontal overflow. */
#jobModal .modal-body :where(div, span, p, a, article, li, h3, label) { min-width: 0; overflow-wrap: anywhere; }

/* Inline sizes need !important to beat style attributes; matched narrowly by exact value. */
#jobModal .modal-body :is([style*='font-size:13px'], [style*='font-size: 13px'], [style*='font-size:14px'], [style*='font-size: 14px']) { font-size: 16px !important; }
#jobModal :is([style*='font-size:10px'], [style*='font-size: 10px'], [style*='font-size:11px'], [style*='font-size: 11px'], [style*='font-size:12px'], [style*='font-size: 12px']) { font-size: 14px !important; }

/* Timeline */
#jobModal .tl-item { gap: 12px; }
#jobModal .tl-dot { background-color: #c3cad8; border-color: var(--pk-control); }
#jobModal .tl-dot.done { background-color: #0f6e64; border-color: #0f6e64; }
#jobModal .tl-dot.active { background-color: #2f4fd8; border-color: #2f4fd8; box-shadow: 0 0 0 3px rgba(47, 79, 216, 0.18); }
#jobModal .tl-time { font-size: 14px !important; color: #536078; }
#jobModal .tl-label { font-size: 16px; }

/* Uploaded files */
#jobModal .admin-action-btn {
  flex: 0 0 auto; min-height: 44px; padding: 0 14px;
  font: inherit; font-size: 14px; font-weight: 600;
  color: #172033; background: #ffffff;
  border: 1px solid var(--pk-control); border-radius: 8px; cursor: pointer;
}

/* Codex integration: the primary client entry expands this inline folder, not a modal. */
#page-dashboard .folder-detail-inner {
  --white:#172033; --navy-2:#fff; --navy-3:#f3f5fa; --muted:#536078;
  --border:#d9dfeb; --green:#0f6e64; --blue:#2f4fd8; --orange:#954309;
  color:#172033; background:#fbfcff; font-size:16px; line-height:1.55;
}
#page-dashboard .folder-detail-inner :where(div,p,span,article,label,a) {min-width:0;overflow-wrap:anywhere;}
#page-dashboard .folder-detail-inner :is(.folder-tabs,.folder-tab-content) {background:#fff;color:#172033;}
#page-dashboard .folder-detail-inner .folder-tabs {padding:0 8px;gap:4px;border-color:#d9dfeb;}
#page-dashboard .folder-detail-inner .folder-tab {min-height:44px;font-size:14px;letter-spacing:.02em;padding:10px 12px;color:#536078;white-space:normal;}
#page-dashboard .folder-detail-inner .folder-tab.active {color:#2f4fd8;border-color:#2f4fd8;}
#page-dashboard .folder-detail-inner .folder-tab-content {padding:24px;}
#page-dashboard .folder-detail-inner :is([style*='font-size:13px'],[style*='font-size: 13px']) {font-size:16px!important;}
#page-dashboard .folder-detail-inner :is([style*='font-size:10px'],[style*='font-size: 10px'],[style*='font-size:11px'],[style*='font-size: 11px'],[style*='font-size:12px'],[style*='font-size: 12px']) {font-size:14px!important;}
#page-dashboard .folder-detail-inner .receipt {max-width:380px;width:100%;box-sizing:border-box;background:#f3f5fa;border-color:#c9d1df;color:#172033;}
#page-dashboard .folder-detail-inner :is(.receipt-header,.receipt-line,.receipt-total) {border-color:#c9d1df;gap:12px;}
#page-dashboard .folder-detail-inner .receipt-line {flex-wrap:wrap;}
#page-dashboard .folder-detail-inner :is(.receipt-logo,.receipt-line .rv,.receipt-total,.file-item-name,.msg-text) {font-size:16px;color:#172033;}
#page-dashboard .folder-detail-inner :is(.receipt-sub,.receipt-line .rl,.receipt-stamp,.file-item-type,.msg-meta) {font-size:14px;color:#536078;}
#page-dashboard .folder-detail-inner .receipt-stamp {color:#0f6e64;opacity:1;}
#page-dashboard .folder-detail-inner :is(.file-item,.msg-item) {background:#f3f5fa;border:1px solid #d9dfeb;color:#172033;}
#page-dashboard .folder-detail-inner .file-item {gap:12px;flex-wrap:wrap;}
#page-dashboard .folder-detail-inner :is(button,input,textarea) {min-height:44px;font-size:16px;max-width:100%;}
#page-dashboard .folder-detail-inner :is(input,textarea) {box-sizing:border-box;color:#172033;background:#fff;border-color:#7d879c;}
#page-dashboard .folder-detail-inner :is(input,textarea)::placeholder {color:#536078;opacity:1;}
#page-dashboard .folder-detail-inner .msg-compose {flex-wrap:wrap;gap:8px;}
#page-dashboard .folder-detail-inner .msg-compose input {flex:1 1 180px;min-width:0;}
#page-dashboard .folder-detail-inner :is(.btn-primary,.msg-send,.btn-next) {color:#fff;background:#2f4fd8;border:1px solid #2f4fd8;}
#page-dashboard .folder-detail-inner :is(.btn-secondary,.file-download-btn) {color:#2f4fd8;background:#fff;border:1px solid #2f4fd8;}
#page-dashboard .folder-detail-inner :focus-visible {outline:3px solid #2f4fd8;outline-offset:2px;}
:is(#jobModal,#page-dashboard .folder-detail-inner) .job-conversation {font-size:16px;color:#172033;min-width:0;}
:is(#jobModal,#page-dashboard .folder-detail-inner) .job-conversation h3 {font-size:20px;line-height:1.3;margin:0 0 12px;}
:is(#jobModal,#page-dashboard .folder-detail-inner) .job-conversation > p {margin:12px 0;line-height:1.6;}
:is(#jobModal,#page-dashboard .folder-detail-inner) .job-conversation article {margin:12px 0;padding:14px;background:#f3f5fa;border:1px solid #d9dfeb;border-radius:10px;color:#172033;overflow-wrap:anywhere;}
:is(#jobModal,#page-dashboard .folder-detail-inner) .job-conversation article p {margin:4px 0;font-size:16px;line-height:1.6;}
:is(#jobModal,#page-dashboard .folder-detail-inner) .job-conversation article p:first-child {font-size:14px;font-weight:650;color:#536078;}
:is(#jobModal,#page-dashboard .folder-detail-inner) .job-conversation article time {display:block;margin-top:8px;font-size:14px;color:#536078;}
:is(#jobModal,#page-dashboard .folder-detail-inner) .job-conversation label {display:block;font-size:14px;font-weight:600;margin:18px 0 12px;}
:is(#jobModal,#page-dashboard .folder-detail-inner) .job-conversation textarea {display:block;width:100%;margin-top:8px;font-size:16px;line-height:1.5;resize:vertical;}
@media(max-width:760px) {
  #page-dashboard .folder-detail-inner .folder-tab-content {padding:18px 12px;}
  #page-dashboard .folder-detail-inner .receipt {padding:16px;}
}
@media(prefers-reduced-motion:reduce) {#page-dashboard .folder-detail-inner,#page-dashboard .folder-detail-inner * {animation:none!important;transition:none!important;scroll-behavior:auto!important;}}
@media(forced-colors:active) {
  #page-dashboard .folder-detail-inner :is(.folder-tabs,.folder-tab-content,.receipt,.msg-item,.file-item),:is(#jobModal,#page-dashboard .folder-detail-inner) .job-conversation article {background:Canvas;color:CanvasText;border:1px solid CanvasText;box-shadow:none;}
  #page-dashboard .folder-detail-inner :is(button,input,textarea) {border:1px solid ButtonText;}
  #page-dashboard .folder-detail-inner :focus-visible {outline-color:Highlight;}
}
#jobModal .admin-action-btn:hover { background: #f3f5fa; }

/* Legacy thread: padding leaves room so focus rings and card edges are not clipped by the scroller. */
#jobModal .msg-thread {
  max-height: 220px; overflow-y: auto; overscroll-behavior: contain;
  gap: 12px; padding: 6px; scrollbar-gutter: stable;
}
/* Legacy items and new conversation articles share one light card style. */
#jobModal .msg-item, #jobModal .modal-body article {
  background: #f3f5fa; color: #172033;
  border: 1px solid var(--pk-line); border-radius: 10px; padding: 12px 14px;
}
#jobModal .msg-meta, #jobModal .modal-body article time { display: block; font-size: 14px; color: #536078; }
#jobModal .msg-text { font-size: 16px; }
#jobModal .msg-compose { gap: 8px; flex-wrap: wrap; }
#jobModal .msg-compose input { flex: 1 1 12rem; min-width: 0; }

/* New conversation module (bare elements, no host class) */
#jobModal .modal-body h3 { margin: 24px 0 8px; font-size: 18px; font-weight: 650; line-height: 1.3; color: #172033; }
#jobModal .modal-body article { margin: 0 0 10px; }
#jobModal .modal-body article p { margin: 0 0 4px; }
#jobModal .modal-body article p:first-child { font-weight: 600; }
#jobModal .modal-body label { display: block; font-size: 14px; font-weight: 600; color: #172033; }
#jobModal .modal-body label textarea { display: block; width: 100%; margin-top: 6px; }
#jobModal .modal-body p[role='status'] { margin: 8px 0 0; font-size: 14px; color: #536078; }

/* Controls: 16px text also prevents iOS focus zoom. */
#jobModal .modal-body :is(input:not([type='checkbox']):not([type='radio']), textarea, select) {
  box-sizing: border-box; max-width: 100%; min-height: 44px; padding: 10px 12px;
  font: inherit; font-size: 16px; font-weight: 400;
  color: #172033; background: #ffffff;
  border: 1px solid var(--pk-control); border-radius: 8px;
}
#jobModal .modal-body textarea { resize: vertical; }
#jobModal .modal-body :is(input, textarea)::placeholder { color: #536078; opacity: 1; }

/* Literal #fff: --white now means ink, so primary button text must not use the token. */
#jobModal :is(.btn-primary, .msg-send) {
  min-height: 44px; padding: 0 18px;
  font: inherit; font-size: 16px; font-weight: 600;
  color: #ffffff; background: #2f4fd8;
  border: 1px solid #2f4fd8; border-radius: 8px; cursor: pointer;
}
#jobModal :is(.btn-primary, .msg-send):hover { background: #2441b8; border-color: #2441b8; }
#jobModal .btn-secondary {
  min-height: 44px; padding: 0 16px;
  font: inherit; font-size: 16px; font-weight: 600;
  color: #2f4fd8; background: #ffffff;
  border: 1px solid #2f4fd8; border-radius: 8px; cursor: pointer;
}
#jobModal .btn-secondary:hover { background: #eef1fd; }
#jobModal button:disabled { opacity: 0.55; cursor: not-allowed; }

#jobModal :focus-visible { outline: 3px solid #2f4fd8; outline-offset: 2px; }
#jobModal .modal-body :is(input, textarea, select):focus-visible { outline-offset: 0; border-color: #2f4fd8; }

/* Mobile: drop blur (cost and legibility), tighten padding. */
@media (max-width: 480px) {
  #jobModal { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: rgba(23, 32, 51, 0.55); }
  #jobModal .modal-box { border-radius: 12px; }
  #jobModal .modal-header { padding-left: 16px; padding-right: 16px; }
  #jobModal .modal-body { padding: 20px 16px; }
  #jobModal .modal-body :is([style*='justify-content:space-between'], [style*='justify-content: space-between']) { flex-wrap: wrap; gap: 8px; }
}
/* Stack the inline two-column detail grid only at very narrow widths. */
@media (max-width: 380px) {
  #jobModal .modal-body [style*='grid-template-columns'] { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (prefers-reduced-transparency: reduce) {
  #jobModal { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: rgba(23, 32, 51, 0.6); }
}
@media (prefers-reduced-motion: reduce) {
  #jobModal, #jobModal * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Forced colors: restore boundaries that shadows and tints conveyed. */
@media (forced-colors: active) {
  #jobModal .modal-box, #jobModal .msg-item, #jobModal .modal-body article { border: 1px solid CanvasText; }
  #jobModal .modal-header { border-bottom: 1px solid CanvasText; }
  #jobModal :is(button, input, textarea, select) { border: 1px solid ButtonText; }
  #jobModal .tl-dot { forced-color-adjust: none; border: 1px solid CanvasText; background-color: Canvas; }
  #jobModal .tl-dot:is(.active, .done) { background-color: Highlight; }
  #jobModal :focus-visible { outline-color: Highlight; }
}

/* The legacy expanded table row must not show navy around the light floating panel. */
#page-dashboard .jobs-table tbody tr.row-expanded{background:transparent!important}
/* Four destinations stay visible without horizontal scrolling on phones. */
@media(max-width:600px){
 #page-dashboard .folder-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:4px;}
 #page-dashboard .folder-tabs .folder-tab{min-width:0;min-height:44px;white-space:normal;text-align:center;justify-content:center;font-size:14px;line-height:1.4;padding:10px 8px;}
 #page-dashboard .folder-tabs .folder-tab.active{background:#eef2ff;color:#173ab5;border-radius:8px;}
}