/* Statutory Compliance — module styles.
 *
 * Only what the shared chrome does not already give us. KPI cards, .surface,
 * .pill and .page-header all come from the app stylesheet; everything here is
 * the register/row/calendar furniture specific to this module.
 *
 * Colours are taken from the app's own tokens with a literal fallback, so the
 * module follows the light/dark theme without redefining a palette.
 */

/* --- Small hint line under a KPI value ------------------------------------ */
.kpi__hint {
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--text-subtle, #667085);
}

/* --- Row: the list primitive used on the dashboard, entities, masters ----- */
.compliance-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border, #e4e7ec);
  color: inherit;
  text-decoration: none;
}
.compliance-row:last-child { border-bottom: 0; }
a.compliance-row:hover { background: var(--surface-hover, rgba(127, 127, 127, 0.06)); }

.compliance-row__main { flex: 1 1 auto; min-width: 0; }

.compliance-row__title {
  font-weight: 600;
  overflow-wrap: anywhere;
}
a.compliance-row .compliance-row__title { color: var(--brand, #6941c6); }

.compliance-row__sub {
  margin-top: 2px;
  font-size: 0.8125rem;
  color: var(--text-subtle, #667085);
  overflow-wrap: anywhere;
}

.compliance-row__due {
  flex: 0 0 auto;
  font-size: 0.8125rem;
  text-align: right;
  white-space: nowrap;
  color: var(--text-subtle, #667085);
}

/* Establishments sit under their entity. */
.compliance-row--nested { padding-left: 18px; }
.compliance-row--nested .compliance-row__title { font-weight: 500; }

.compliance-entity + .compliance-entity {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border, #e4e7ec);
}

/* Catalogue picker rows carry a checkbox and are clickable labels. */
.compliance-row--pick { cursor: pointer; }
.compliance-row--pick.is-adopted { opacity: 0.6; cursor: default; }

.compliance-group {
  margin: 18px 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.6875rem;
  color: var(--text-subtle, #667085);
}
.compliance-group:first-child { margin-top: 0; }

/* --- Due-date emphasis ---------------------------------------------------- */
/* Overdue is the one thing on this screen that must never be missed, so it is
   the only place the module spends a strong colour. */
.compliance-due--overdue { color: var(--err, #b42318); font-weight: 600; }
.compliance-due--soon    { color: var(--warn, #b45309); }

.compliance-detail__due { font-size: 1.25rem; font-weight: 600; }

/* --- Cells inside the shared data table ---------------------------------- */
.compliance-cell__title { font-weight: 600; }
.compliance-cell__sub {
  margin-top: 2px;
  font-size: 0.8125rem;
  color: var(--text-subtle, #667085);
}

/* --- Definition list on the detail page ---------------------------------- */
.compliance-dl { margin: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
.compliance-dl dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-subtle, #667085);
  font-weight: 500;
  margin-top: 12px;
}
.compliance-dl dt:first-child { margin-top: 0; }
.compliance-dl dd { margin: 2px 0 0; overflow-wrap: anywhere; }

/* --- A quiet callout: penalties, disclaimers, rework notes --------------- */
.compliance-note {
  padding: 10px 12px;
  border-radius: 8px;
  border-left: 3px solid var(--warn, #b45309);
  background: var(--surface-sunken, rgba(127, 127, 127, 0.06));
  font-size: 0.8125rem;
}

/* --- Empty states --------------------------------------------------------- */
.compliance-empty { text-align: center; padding: 28px 16px; }
.compliance-empty h2 { font-weight: 600; }

/* --- Analytics bars ------------------------------------------------------- */
.compliance-bar-row {
  display: grid;
  grid-template-columns: minmax(90px, 32%) 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}
.compliance-bar-row__label {
  font-size: 0.8125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compliance-bar-row__val { font-size: 0.8125rem; text-align: right; }
.compliance-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-sunken, rgba(127, 127, 127, 0.12));
  overflow: hidden;
}
.compliance-bar__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--brand, #6941c6);
}

/* --- Calendar ------------------------------------------------------------- */
/* A plain 7-column grid. It scrolls sideways rather than squashing on a phone,
   because a squashed month grid is unreadable and the register is the better
   small-screen view anyway. */
.compliance-cal { min-width: 720px; }
.compliance-cal__head,
.compliance-cal__week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.compliance-cal__head {
  margin-bottom: 6px;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-subtle, #667085);
}
.compliance-cal__week { margin-bottom: 6px; }

.compliance-cal__cell {
  min-height: 92px;
  padding: 6px;
  border: 1px solid var(--border, #e4e7ec);
  border-radius: 8px;
}
.compliance-cal__cell.is-empty { border-color: transparent; background: none; }
.compliance-cal__cell.is-today { border-color: var(--brand, #6941c6); }

.compliance-cal__day { font-size: 0.75rem; color: var(--text-subtle, #667085); }

.compliance-cal__item {
  display: block;
  margin-top: 4px;
  padding: 3px 5px;
  border-radius: 5px;
  font-size: 0.6875rem;
  line-height: 1.25;
  background: var(--surface-sunken, rgba(127, 127, 127, 0.1));
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compliance-cal__item:hover { text-decoration: underline; }
.compliance-cal__item.is-overdue {
  background: color-mix(in srgb, var(--err, #b42318) 14%, transparent);
  color: var(--err, #b42318);
}

/* The month grid is the one thing here wider than a phone; let it scroll
   inside its own panel instead of pushing the page sideways. */
.surface > .compliance-cal { overflow-x: auto; }

@media (max-width: 640px) {
  .compliance-row { flex-wrap: wrap; }
  .compliance-row__due { width: 100%; text-align: left; }
}