/* V226 - UI/UX polish: Regulatory Report + Task Management tables.
   UI-only. Loaded last so it can safely win the cascade over the older
   versioned layers (style.css, task-table-*.css, task-layout-v202.css,
   enterprise-saas-v221.css). No routes, permissions, task data, titles,
   contracts, companies, drugs, provinces, staff or workflow logic are
   touched here — presentation only. Every selector below targets
   classes/attributes that already exist in the markup. */

/* =====================================================================
   1. Typography - final consistency pass.
   Most of the app already uses Inter via global-typography-v200.css and
   enterprise-saas-v221.css; this just closes any remaining gaps so no
   browser-default serif can show through anywhere.
   ===================================================================== */
:root{
  --v226-font: Inter, "Be Vietnam Pro", Roboto, "Helvetica Neue", Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html, body, button, input, select, textarea,
table, th, td, label, .hint, .muted, small,
.reg-column-item span, .reg-column-group-title span,
.column-menu .column-check span{
  font-family: var(--v226-font) !important;
}

body{
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =====================================================================
   2. Task list - Task cell: contract code badge + drug name + meta line.
   Renders real contract/crop/pest_target/province fields directly
   (tasks.html), replacing the old single long concatenated title text.
   The stored task.title / DB value is never changed - display only.
   ===================================================================== */
#taskDataGrid .task-title-cell a{
  display: grid !important;
  gap: 3px !important;
  align-content: start !important;
}

#taskDataGrid .contract-code-badge{
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#taskDataGrid .task-title-main{
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  max-height: none !important;
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}

#taskDataGrid .task-title-cell a:hover .task-title-main{
  color: #1d4ed8 !important;
}

#taskDataGrid .task-title-meta{
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #64748b;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
}

/* =====================================================================
   3. Task list table - scroll container, full-width ID, sticky columns.
   ===================================================================== */
.task-saas-table-wrap,
.data-grid-wrap{
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  position: relative !important;
}

/* Fix: a generic `table{overflow:hidden}` rule in style.css makes the
   <table> element itself the nearest "scroll container" for position:sticky
   purposes (per spec, any overflow != visible qualifies, even without an
   actual scrollbar) - which breaks sticky since the table doesn't scroll,
   only its wrapper (.task-saas-table-wrap) does. Also switch
   border-collapse to separate: sticky <td>/<th> do not stick reliably with
   border-collapse:collapse in Chromium/Firefox. */
#taskDataGrid.table-tasks,
#taskDataGrid.task-saas-table,
table#taskDataGrid{
  overflow: visible !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

#taskDataGrid tbody td{
  line-height: 1.5 !important;
}

/* Fix: drug/pest_target/crop columns previously had no explicit width in
   the fixed-table-layout rules, which let the table layout drift and
   misaligned header/body columns under table-layout:fixed. */
#taskDataGrid th[data-col="drug"], #taskDataGrid td[data-col="drug"]{
  width: 190px !important; min-width: 190px !important; max-width: 190px !important;
}
#taskDataGrid th[data-col="pest_target"], #taskDataGrid td[data-col="pest_target"]{
  width: 170px !important; min-width: 170px !important; max-width: 170px !important;
}
#taskDataGrid th[data-col="crop"], #taskDataGrid td[data-col="crop"]{
  width: 150px !important; min-width: 150px !important; max-width: 150px !important;
}

/* Full 5-6 digit task ID must not be clipped. */
#taskDataGrid th[data-col="id"], #taskDataGrid td[data-col="id"]{
  width: 86px !important; min-width: 86px !important; max-width: 96px !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-variant-numeric: tabular-nums !important;
}

#taskDataGrid th[data-col="actual_start"], #taskDataGrid td[data-col="actual_start"],
#taskDataGrid th[data-col="actual_end"], #taskDataGrid td[data-col="actual_end"]{
  width: 120px !important; min-width: 120px !important; max-width: 120px !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums !important;
}

#taskDataGrid th[data-col="status"], #taskDataGrid td[data-col="status"]{
  width: 190px !important; min-width: 190px !important;
}

#taskDataGrid th[data-col="actions"], #taskDataGrid td[data-col="actions"]{
  width: 96px !important; min-width: 96px !important;
}

/* Sticky checkbox + ID on the left. */
#taskDataGrid th.select-col, #taskDataGrid td.select-col{
  position: sticky !important;
  left: 0 !important;
  z-index: 6 !important;
  background: #ffffff !important;
}

#taskDataGrid th[data-col="id"], #taskDataGrid td[data-col="id"]{
  position: sticky !important;
  left: 48px !important;
  z-index: 6 !important;
  background: #ffffff !important;
  box-shadow: 4px 0 8px rgba(15, 23, 42, .05) !important;
}

#taskDataGrid th.select-col, #taskDataGrid th[data-col="id"]{
  z-index: 9 !important;
}

/* Sticky Actions on the right. */
#taskDataGrid th[data-col="actions"], #taskDataGrid td[data-col="actions"]{
  position: sticky !important;
  right: 0 !important;
  z-index: 7 !important;
  background: #ffffff !important;
  box-shadow: -6px 0 10px rgba(15, 23, 42, .06) !important;
}

#taskDataGrid th[data-col="actions"]{
  z-index: 9 !important;
}

#taskDataGrid tbody tr:nth-child(even) td.select-col,
#taskDataGrid tbody tr:nth-child(even) td[data-col="id"],
#taskDataGrid tbody tr:nth-child(even) td[data-col="actions"]{
  background: #fcfdff !important;
}

#taskDataGrid tbody tr:hover td.select-col,
#taskDataGrid tbody tr:hover td[data-col="id"],
#taskDataGrid tbody tr:hover td[data-col="actions"]{
  background: #f8fafc !important;
}

/* col-hidden columns must never keep a stale sticky slot. */
#taskDataGrid th.col-hidden, #taskDataGrid td.col-hidden{
  position: static !important;
  box-shadow: none !important;
}

/* =====================================================================
   4. Status badges - full color coverage for all 7 statuses, applied to
   both the task list/detail's .status-badge and the Regulatory Report's
   own .reg-status-badge, so no status ever falls back to plain text.
   ===================================================================== */
.status-badge.status-not_started, .reg-status-badge.status-not_started{
  color: #475569 !important; background: #f1f5f9 !important; border-color: #e2e8f0 !important;
}
.status-badge.status-in_progress, .reg-status-badge.status-in_progress{
  color: #92400e !important; background: #fef3c7 !important; border-color: #fde68a !important;
}
.status-badge.status-experiment_finished, .reg-status-badge.status-experiment_finished{
  color: #047857 !important; background: #d1fae5 !important; border-color: #a7f3d0 !important;
}
.status-badge.status-dossier_sent, .reg-status-badge.status-dossier_sent{
  color: #3730a3 !important; background: #e0e7ff !important; border-color: #c7d2fe !important;
}
.status-badge.status-dossier_review, .reg-status-badge.status-dossier_review{
  color: #6d28d9 !important; background: #ede9fe !important; border-color: #ddd6fe !important;
}
.status-badge.status-dossier_need_update, .reg-status-badge.status-dossier_need_update{
  color: #b45309 !important; background: #ffedd5 !important; border-color: #fed7aa !important;
}
.status-badge.status-completed, .reg-status-badge.status-completed{
  color: #065f46 !important; background: #ccfbf1 !important; border-color: #99f6e4 !important;
}
.status-badge.status-overdue, .reg-status-badge.status-overdue{
  color: #991b1b !important; background: #fee2e2 !important; border-color: #fecaca !important;
}

/* =====================================================================
   5. Regulatory report - fix overlapping Expected/Actual date cells and
   the clipped contract code column; allow horizontal scroll instead of
   compressing columns until text overlaps.
   ===================================================================== */
.reg-table-wrap{
  overflow-x: auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.reg-table.reg-preview-table{
  table-layout: auto !important;
  width: max-content !important;
  min-width: 100% !important;
}

.reg-preview-table td.mono{
  min-width: 110px !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.reg-preview-table .reg-date-cell{
  min-width: 150px !important;
  overflow: visible !important;
}

.date-cell .date-range{
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 108px !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
}

.date-range__line{
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
}

.date-range__label{
  min-width: 22px !important;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
}

.date-range__value{
  color: #0f172a !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums !important;
}

/* =====================================================================
   6. Regulatory report - export column config panel: guaranteed scroll +
   size. Actual screen position is computed in JS as position:fixed
   (anchored to the trigger button), so it can never be clipped by an
   ancestor's overflow or stacking context.
   ===================================================================== */
/* :not([hidden]) matters: without it, this !important display:flex would
   override the browser's default [hidden]{display:none} and force the
   popover to always render open regardless of the hidden attribute. */
.reg-column-menu.compact:not([hidden]){
  max-height: min(70vh, 620px) !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 500 !important;
  overflow: hidden !important;
}

.reg-column-menu.compact .reg-column-menu-head,
.reg-column-menu.compact .reg-column-search,
.reg-column-menu.compact .reg-column-actions{
  flex: 0 0 auto !important;
}

.reg-column-list.grouped.compact{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}