/* EventHarmon!: styles that exist only in this tool. Shared look: ../../shared/css/style.css */

/* Page shell: same as the other tools. Desktop is one screen; below 1024px
   the columns stack and the page scrolls normally. */
html, body { min-height: 100%; }

.app-shell { min-height: 100vh; min-height: 100dvh; }

@media (min-width: 1024px) {
  html, body { height: 100%; overflow: hidden; }

  .app-shell { height: 100vh; height: 100dvh; }
}

#eventTemplateWrap {
  width: 168px;
}

#eventTemplateWrap select {
  width: 100%;
}

/* ---------------------------------------------------------- 4. COMPONENTS */

.conflict-card {
  background: #ffffff;
  border: 1px solid #fca5a5;
  border-left: 4px solid var(--danger);
  border-radius: 10px;
  padding: 8px 12px;
  box-shadow: 0 1px 3px rgba(225, 29, 72, 0.05);
}

.conflict-card.warning {
  border-color: #fde68a;
  border-left-color: var(--warning);
}

.time-pill {
  font-size: 8.5pt;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  background: #eef2ff;
  color: #4338ca;
  border: 1px solid #c7d2fe;
  white-space: nowrap;
}

.email-source-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #6366f1;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
  margin-bottom: 10px;
}

.email-source-card .sender-tag {
  font-size: 10pt;
  font-weight: 700;
  color: #1e1b4b;
}

/*
  pre-line preserves the newlines in extracted email bodies WITHOUT the text
  being parsed as HTML. This is what lets the renderer use textContent safely
  and still produce readable multi-line output.
*/

.email-source-card .body-text {
  font-size: 9.5pt;
  color: #334155;
  line-height: 1.55;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.editable-cell {
  outline: none;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background-color 0.15s ease;
  overflow-wrap: anywhere;
  min-height: 1.4em;
  /* pre-wrap keeps line breaks inside a note. Without it, innerText collapses
     a two-line note into one line the moment the cell is read back. */
  white-space: pre-wrap;
}

.editable-cell:hover {
  background-color: rgba(99, 102, 241, 0.06);
}

.editable-cell:focus {
  background-color: #ffffff;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.4);
}

/* An empty notes cell collapses to nothing so it does not add a blank line to
   every row. The "Add notes..." hint appears only when the row is hovered or
   the cell has focus. */

.editable-cell[data-field="notes"]:empty {
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

tr:hover .editable-cell[data-field="notes"]:empty::before,
.editable-cell[data-field="notes"]:empty:focus::before {
  content: 'Add notes...';
  color: #cbd5e1;
}

.screen-collisions { height: 32%; }

.print-banner { display: none; }

/* Narrow screens: stack the two columns instead of squeezing them. */

@media (max-width: 1024px) {
  html, body { overflow: auto; height: auto; min-height: 100%; }

  main {
    display: flex !important;
    flex-direction: column;
    min-height: 0;
  }

  main > div {
    width: 100%;
    height: auto !important;
    min-height: 0;
  }

  .screen-collisions { height: auto; max-height: 40vh; }

  .screen-timeline { min-height: 50vh; }
}

/* Phone-width screens: the Print/Sync/Copy/Add-row button row has no room to
   sit next to the tab buttons, so the whole row wraps onto its own line
   underneath the tabs instead of overflowing off the edge of the screen. */

@media (max-width: 640px) {
  #timelineTabRow {
    flex-wrap: wrap;
  }

  #timelineActionButtons {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/* ================================================================
   6. PRINT: multi-page executive binder sheet
   ================================================================ */

@media print {
  @page {
    margin: 12mm;
    size: letter portrait;
  }

  /* Unlock every container so content can paginate instead of being clipped. */

  html, body, main,
  .printable-area,
  .screen-timeline,
  #timelineViewContainer {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    position: static !important;
    display: block !important;
  }

  /* Hide interactive chrome. */

  .no-print,
  header,
  .orb,
  #outputLockOverlay,
  #paywallModal,
  #shareModal,
  #restoreModal,
  #toastContainer,
  #emailsViewContainer,
  button,
  .pill-3d,
  th:last-child,
  td:last-child {
    display: none !important;
  }

  /* The left input column is hidden by its own no-print class; this keeps the
     output column at full width. */

  .printable-area {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .print-banner {
    display: block !important;
    border-bottom: 2px solid #0f172a;
    padding-bottom: 6px;
    margin-bottom: 12px;
  }

  .print-banner h1 {
    font-size: 18pt !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 2px 0 !important;
  }

  .print-banner p {
    font-size: 9.5pt !important;
    color: #475569 !important;
    font-weight: 600 !important;
    margin: 0 !important;
  }

  .screen-collisions {
    height: auto !important;
    max-height: none !important;
    margin-bottom: 12px !important;
  }

  #conflictsList {
    display: block !important;
    break-inside: avoid !important;
  }

  .conflict-card {
    border: 1px solid #cbd5e1 !important;
    border-left: 4px solid #b91c1c !important;
    background: #fff8f8 !important;
    padding: 6px 10px !important;
    margin-bottom: 6px !important;
    break-inside: avoid !important;
  }

  .conflict-card.warning {
    border-left-color: #d97706 !important;
    background: #fffdf5 !important;
  }

  .time-pill {
    background: transparent !important;
    border: none !important;
    color: #334155 !important;
    font-size: 8pt !important;
    padding: 0 !important;
  }

  /* Multi-page table pagination. */

  table {
    width: 100% !important;
    border-collapse: collapse !important;
    break-inside: auto !important;
  }

  /* Reprints the header row at the top of every printed page. */

  thead {
    display: table-header-group !important;
  }

  thead tr { background-color: #f1f5f9 !important; }

  thead th {
    color: #0f172a !important;
    border-top: 1.5px solid #0f172a !important;
    border-bottom: 2px solid #0f172a !important;
    font-size: 8.5pt !important;
    padding: 6px 4px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-align: left !important;
  }

  /* Never split a single milestone across a page boundary. */

  tbody tr {
    break-inside: avoid !important;
  }

  tbody td {
    padding: 6px 4px !important;
    font-size: 9pt !important;
    border-bottom: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
    vertical-align: top !important;
  }

  tbody tr:nth-child(even) { background-color: #f8fafc !important; }

  .editable-cell {
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .editable-cell[data-field="notes"]:empty::before { content: '' !important; }
}