/* CLAIMS-PROFILE-FEATURE-COMPLETENESS-V1.1 (2026-05-27).
 * Styles for claimDocumentsTab + claimTimelineTab.
 * Surface-scoped — all selectors live under .claim-documents-tab /
 * .claim-timeline-tab so nothing leaks into adjacent screens.
 */

/* ─── Documents tab ─── */
/* BUG-8.b DOC-VIEWER-CORE-RENDER (2026-05-29): flex:1 + min-height:0 so
   the tab fills its host and the .cd-split-pane fill chain below has a
   resolved parent height (mirrors driver-documents.css
   .driver-documents-tab). Without this the embedded viewer iframe's
   height:100% collapses to the 400px floor. */
.claim-documents-tab {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  gap: 8px;
  padding: 0;
  font-size: 12px;
  color: var(--text, #d4d4d4);
}
.claim-documents-tab__loading,
.claim-documents-tab__error {
  padding: 16px;
  text-align: center;
  color: var(--text3, #888);
  font-size: 11px;
}
.claim-documents-tab__error {
  color: #ef4444;
}

.cd-toolbar {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border2, #333);
  align-items: center;
}
.cd-toolbar__spacer { flex: 1; }

.cd-upload-btn,
.cd-email-selected {
  background: var(--blue, #3b82f6);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.cd-email-selected {
  background: var(--accent, #f59e0b);
}

/* BUG-8.b DOC-VIEWER-CORE-RENDER (2026-05-29): the embedded claims
   viewer pane mounts the emrDocumentViewer <iframe> (height:100%) via
   viewDocumentInline. It previously rendered minimized — not fit-to-
   window — for two reasons:
     (1) .cd-split-pane / .cd-viewer-pane had no flex height chain, so
         the iframe's height:100% had no resolved parent height (only a
         400px floor), and
     (2) an A4 cap (max-width:720px; aspect-ratio:210/297) shrank the
         iframe to a small portrait frame anchored top-left.
   Mirror the working Driver Docs fill chain (driver-documents.css
   .driver-documents-tab__pane / __viewer-mount): a continuous
   flex:1 / min-height:0 chain + stretched content + no A4 cap. */
.cd-split-pane {
  display: flex;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 400px;
  align-items: stretch;
}
.cd-list-pane {
  flex: 0 0 42%;
  max-width: 42%;
  min-height: 0;
  border-right: 1px solid var(--border2, #333);
  overflow-y: auto;
  padding-right: 6px;
}
.cd-viewer-pane {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 6px;
  /* CLAIMS-DOCS-TAB-INTERACTION-MODEL-REPAIR (2026-05-28): icon/thumbnail
     click renders the document here (NO floating modal). BUG-8.b: stretch
     content to fill the pane (was a centered A4 frame). */
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}
/* Images + canvas still fit inside via object-fit: contain, but are
   allowed to fill the pane width rather than being capped. */
.cd-viewer-pane img,
.cd-viewer-pane canvas {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
/* BUG-8.b: the inline viewer iframe/embed fills the pane (no A4 cap).
   The emrDocumentViewer iframe is height:100%; give it a resolved
   parent height via the flex chain above + fill width/height here. */
.cd-viewer-pane iframe,
.cd-viewer-pane embed {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  max-width: none;
  border: 0;
  margin: 0;
  display: block;
}
.cd-viewer-placeholder,
.cd-viewer-error {
  padding: 16px;
  text-align: center;
  color: var(--text3, #888);
}
.cd-viewer-error { color: #ef4444; }

.cd-dropzone {
  border: 2px dashed transparent;
  border-radius: 6px;
  padding: 4px;
  transition: border-color 120ms ease, background 120ms ease;
}
.cd-dropzone.ddu-drag-over {
  border-color: var(--blue, #3b82f6);
  background: rgba(59,130,246,0.08);
}
.cd-dropzone__hint {
  padding: 6px 10px;
  margin-bottom: 6px;
  font-size: 10px;
  color: var(--text3, #888);
  text-align: center;
  background: var(--bg2, #161617);
  border-radius: 4px;
}

.cd-category {
  margin-bottom: 10px;
}
.cd-category__header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  background: var(--bg2, #161617);
  border-bottom: 1px solid var(--border2, #333);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.cd-category__count {
  color: var(--text3, #888);
  font-weight: 500;
}
.cd-category__empty {
  padding: 8px 10px;
  font-size: 10px;
  color: var(--text3, #666);
  font-style: italic;
}

.cd-doc-row {
  display: grid;
  grid-template-columns: 24px 56px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border2, #2a2a2b);
  transition: background 80ms ease;
}
.cd-doc-row:hover {
  background: rgba(255,255,255,0.03);
}
.cd-doc-row--selected {
  background: rgba(59,130,246,0.10);
}

.cd-doc-select {
  display: inline-flex;
  align-items: center;
}
.cd-doc-thumb-btn {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.cd-doc-thumb,
.cd-doc-thumb--placeholder {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--bg3, #1c1c1d);
  display: block;
}
.cd-doc-thumb--placeholder {
  display: inline-block;
}
.cd-doc-thumb--image {
  background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
}
.cd-doc-thumb--file::before {
  content: "📄";
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
}
.cd-doc-meta {
  min-width: 0;
}
.cd-doc-filename {
  font-size: 11px;
  font-weight: 600;
  color: var(--text, #d4d4d4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cd-doc-sub {
  font-size: 10px;
  color: var(--text3, #888);
  margin-top: 2px;
}
.cd-doc-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}
.cd-doc-actions button {
  background: var(--bg3, #1c1c1d);
  border: 1px solid var(--border2, #333);
  color: var(--text2, #c0c0c0);
  border-radius: 3px;
  padding: 3px 8px;
  font-size: 10px;
  cursor: pointer;
}
.cd-danger {
  color: #ef4444 !important;
  border-color: #ef4444 !important;
}

/* Category-selection modal */
.cd-cat-select__intro {
  font-size: 11px;
  color: var(--text3, #888);
  margin-bottom: 8px;
}
.cd-cat-select__rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
}
.cd-cat-select__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: var(--bg2, #161617);
  border-radius: 4px;
}
.cd-cat-select__filename {
  flex: 1;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cd-cat-select__dropdown {
  background: var(--bg3, #1c1c1d);
  border: 1px solid var(--border2, #333);
  color: var(--text, #d4d4d4);
  border-radius: 3px;
  padding: 3px 8px;
  font-size: 11px;
}

/* Email-export modal */
.cd-email-export__field {
  margin-bottom: 8px;
}
.cd-email-export__field label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--text3, #888);
}
.cd-email-export__field input,
.cd-email-export__field textarea {
  background: var(--bg3, #1c1c1d);
  border: 1px solid var(--border2, #333);
  color: var(--text, #d4d4d4);
  border-radius: 3px;
  padding: 5px 8px;
  font-size: 12px;
  font-family: inherit;
}
.cd-email-export__attachments {
  margin-top: 8px;
  padding: 6px 8px;
  background: var(--bg2, #161617);
  border-radius: 4px;
}
.cd-email-export__attachments-title {
  font-size: 10px;
  color: var(--text3, #888);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}
.cd-email-export__attachments-list {
  margin: 0;
  padding-left: 20px;
  font-size: 11px;
}
.cd-email-export__size {
  color: var(--text3, #888);
}

/* ─── Timeline tab ─── */
.claim-timeline-tab {
  font-size: 12px;
}
.claim-timeline-tab__count {
  padding: 4px 10px;
  font-size: 10px;
  color: var(--text3, #888);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.claim-timeline-tab__empty,
.claim-timeline-tab__loading,
.claim-timeline-tab__error {
  padding: 12px;
  text-align: center;
  font-size: 11px;
  color: var(--text3, #888);
}
.claim-timeline-tab__error { color: #ef4444; }
.claim-timeline-tab__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 10px;
}
.claim-timeline-entry {
  border-left: 2px solid var(--border2, #333);
  padding: 6px 10px;
  background: var(--bg2, #161617);
  border-radius: 4px;
}
.claim-timeline-entry__header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  color: var(--text3, #888);
  margin-bottom: 2px;
}
.claim-timeline-entry__by {
  font-weight: 600;
  color: var(--text2, #b0b0b0);
}
.claim-timeline-entry__note {
  font-size: 12px;
  color: var(--text, #d4d4d4);
  white-space: pre-wrap;
}
.claim-timeline-entry__edited {
  font-size: 10px;
  color: #f59e0b;
  font-style: italic;
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════
 * CLAIMS-DOCUMENT-SMART-SUGGEST-V2.1 (2026-05-27)
 *
 * Phase 6 styles — Hub upload form claim-search field, claim subtype
 * dropdown, smart-suggest panel. All scoped under .emr-doc-* prefix
 * to match the existing documents.js / dashboard.html naming.
 * ═══════════════════════════════════════════════════════════════ */

/* Hidden-state class used by the V2.1 UI to toggle conditional
 * fields. Override anything inline. NEVER set inline display:none on
 * .panel — banked feedback_panel_inline_display_none_trap; this is
 * scoped to the Hub upload form so it does not collide. */
.hub-upload-claim-search.hidden,
.hub-upload-claim-subtype.hidden,
.hub-upload-smart-suggest.hidden,
.emr-doc-claim-selected.hidden {
  display: none !important;
}

/* Claim search autocomplete dropdown */
.emr-doc-claim-autocomplete {
  display: none;
  max-height: 240px;
  overflow-y: auto;
  background: var(--card2, #1a1a1a);
  border: 1px solid var(--line, #333);
  border-radius: 4px;
  margin-top: 4px;
}
.emr-doc-claim-autocomplete.open { display: block; }
.emr-doc-claim-result {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 12px;
  border-bottom: 1px solid var(--line, #333);
}
.emr-doc-claim-result:last-child { border-bottom: none; }
.emr-doc-claim-result:hover { background: var(--card3, #252525); }
.emr-doc-claim-result-num { font-weight: 700; color: #7c3aed; flex: 0 0 auto; min-width: 90px; }
.emr-doc-claim-result-who { flex: 1; color: var(--text, #d4d4d4); }
.emr-doc-claim-result-status { font-size: 10px; text-transform: uppercase; color: var(--text3, #888); }
.emr-doc-claim-noresults { padding: 8px 10px; font-size: 12px; color: var(--text3, #888); font-style: italic; }

/* Selected-claim chip */
.emr-doc-claim-selected {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.emr-doc-claim-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: rgba(124, 58, 237, 0.15);
  color: #c4b5fd;
  border: 1px solid rgba(124, 58, 237, 0.4);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}
.emr-doc-claim-clear {
  background: transparent;
  border: 1px solid var(--line, #333);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  color: var(--text2, #b0b0b0);
  cursor: pointer;
  font-size: 11px;
  padding: 0;
}
.emr-doc-claim-clear:hover { background: var(--card3, #252525); color: #ef4444; }

/* Smart-suggest panel */
.hub-upload-smart-suggest {
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(124, 58, 237, 0.07);
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: 6px;
}
.emr-doc-smart-suggest-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text2, #b0b0b0);
  font-style: italic;
}
.emr-doc-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(124, 58, 237, 0.3);
  border-top-color: #7c3aed;
  border-radius: 50%;
  animation: emr-doc-spin 0.8s linear infinite;
}
@keyframes emr-doc-spin {
  to { transform: rotate(360deg); }
}
.emr-doc-smart-suggest-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  margin-bottom: 8px;
  color: var(--text, #d4d4d4);
}
.emr-doc-smart-suggest-time { font-size: 10px; color: var(--text3, #888); }
.emr-doc-smart-suggest-list { display: flex; flex-direction: column; gap: 6px; }
.emr-doc-smart-suggest-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--card2, #1a1a1a);
  border: 1px solid var(--line, #333);
  border-radius: 4px;
}
.emr-doc-smart-suggest-info { flex: 1; min-width: 0; }
.emr-doc-smart-suggest-claim { font-size: 12px; color: var(--text, #d4d4d4); }
.emr-doc-smart-suggest-via { font-size: 11px; color: var(--text2, #b0b0b0); margin-top: 2px; }
.emr-doc-smart-suggest-conf { font-size: 11px; color: var(--text2, #b0b0b0); margin-top: 2px; }
.emr-doc-smart-suggest-fuzzy { color: #f59e0b; font-style: italic; }
.emr-doc-smart-suggest-use {
  background: #7c3aed;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  flex: 0 0 auto;
}
.emr-doc-smart-suggest-use:hover { background: #6d28d9; }
.emr-doc-smart-suggest-footer,
.emr-doc-smart-suggest-empty,
.emr-doc-smart-suggest-hint {
  font-size: 11px;
  color: var(--text3, #888);
  font-style: italic;
  text-align: center;
  margin-top: 6px;
}
.emr-doc-smart-suggest-error {
  font-size: 11px;
  color: #ef4444;
  text-align: center;
  padding: 6px;
}

/* Attach-to-claim modal contents (Phase 6.2) */
.emr-doc-attach-modal { font-size: 12px; }
.emr-doc-attach-status { font-size: 11px; color: #ef4444; padding-top: 6px; }

/* Bug 6.a fix (2026-05-27) — modal title + actions inside contentEl
   per canonical pattern. Buttons + title styling for the 3 modal sites
   (_confirmModal, _categorySelectionModal, _openEmailExport). */
.cd-confirm,
.cd-cat-select,
.cd-email-export-wrapper {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  max-height: 80vh;
  overflow: auto;
}
.cd-confirm__title,
.cd-cat-select__title,
.cd-email-export__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text, #fff);
  margin: 0;
}
.cd-confirm__msg {
  font-size: 13px;
  color: var(--text2, #cbd5e1);
  line-height: 1.4;
}
.cd-confirm__actions,
.cd-cat-select__actions,
.cd-email-export__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}
.cd-btn {
  padding: 7px 14px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--border, #2a3441);
  background: var(--bg3, #0b1220);
  color: var(--text2, #cbd5e1);
  transition: background 120ms, color 120ms;
}
.cd-btn--secondary:hover { background: var(--bg2, #1f2937); }
.cd-btn--primary {
  background: #2563eb;
  border-color: #1d4ed8;
  color: #fff;
}
.cd-btn--primary:hover { background: #1d4ed8; }
.cd-btn--danger {
  background: #b91c1c;
  border-color: #991b1b;
  color: #fff;
}
.cd-btn--danger:hover { background: #991b1b; }

/* ── RECATEGORIZE-V1 (2026-06-01) ───────────────────────────────
   "Move to category" button + picker modal. Reuses existing
   tokens / variants so the surface stays visually consistent with
   the row-action toolbar (.cd-doc-actions) and the upload + email
   modals. */
.cd-doc-move {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  background: var(--bg3, #0b1220);
  color: var(--text2, #cbd5e1);
  border: 1px solid var(--border, #2a3441);
  transition: background 120ms, color 120ms;
}
.cd-doc-move:hover {
  background: var(--bg2, #1f2937);
  color: var(--text1, #f1f5f9);
}

.cd-move-modal { min-width: 360px; max-width: 480px; }
.cd-move-modal__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text1, #f1f5f9);
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cd-move-modal__intro {
  font-size: 12px;
  color: var(--text2, #cbd5e1);
  margin-bottom: 12px;
}
.cd-move-modal__rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
  margin-bottom: 12px;
  border: 1px solid var(--border, #2a3441);
  border-radius: 6px;
  padding: 4px;
  background: var(--bg3, #0b1220);
}
.cd-move-modal__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text2, #cbd5e1);
  transition: background 120ms;
}
.cd-move-modal__row:hover {
  background: var(--bg2, #1f2937);
  color: var(--text1, #f1f5f9);
}
.cd-move-modal__row input[type="radio"] {
  margin: 0;
  cursor: pointer;
}
.cd-move-modal__row-label { flex: 1; }
.cd-move-modal__row--current {
  background: var(--bg2, #1f2937);
}
.cd-move-modal__current-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  background: #1d4ed8;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cd-move-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}