/* recommendations page styles (owned by the recommendations module).
   Screen rules are scoped under [data-page="recommendations"] or .rec-* classes (drawer/modals live outside
   the page element); print rules use .rec-p-* (A4 register) and .rec-s-* (before/after slide). */

/* ------------------------------------------------------------------ header / toolbar */
[data-page="recommendations"] .rec-view-toggle .seg span { gap: 6px; }
[data-page="recommendations"] .rec-view-toggle .seg .icon { width: 16px; height: 16px; }
[data-page="recommendations"] .page-actions { align-items: center; }

[data-page="recommendations"] .rec-kpis .kpi.is-selected { border-color: var(--tone); box-shadow: 0 0 0 1px var(--tone), var(--shadow); }

.rec-park-chips { gap: 6px; }
.rec-chip { gap: 8px; padding-inline: 12px 8px; }
.rec-chip-count {
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--radius-pill);
  background: var(--c-gray-tint); color: #555; font-size: 12px; font-weight: 700; display: inline-grid; place-items: center;
}
.rec-chip.is-active .rec-chip-count { background: #fff; color: var(--c-forest); }
.rec-chip-late {
  min-width: 20px; height: 20px; padding: 0 6px; margin-inline-start: -4px; border-radius: var(--radius-pill);
  background: var(--c-orange); color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center;
  font-variant-numeric: tabular-nums;
}

.rec-toolbar .rec-search { flex: 1 1 220px; }
.rec-toolbar .field { min-width: 140px; }
.rec-toolbar-end { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 42px; }
.rec-overdue-toggle { min-height: 40px; }
.rec-overdue-toggle .icon { width: 16px; height: 16px; color: var(--c-orange); }
.rec-overdue-toggle.is-active { background: var(--c-orange-tint); border-color: #F7CDBC; color: var(--c-orange-700); font-weight: 700; }
.rec-result-line { font-size: var(--fs-sm); color: var(--c-muted-strong); margin: -8px 2px -6px; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ board */
.rec-board { display: grid; gap: 14px; align-items: start; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rec-board.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rec-board.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rec-board.cols-1 { grid-template-columns: minmax(0, 1fr); }
.rec-board-tabs { display: none; }

.rec-col {
  --col: var(--c-gold); --col-tint: #FCFAF4;
  min-width: 0; display: flex; flex-direction: column;
  background: var(--col-tint); border: 1px solid var(--c-line-soft); border-top: 3px solid var(--col);
  border-radius: var(--radius); transition: box-shadow .15s, border-color .15s, opacity .15s;
}
.rec-col-in_progress { --col: var(--c-teal); --col-tint: #F5FAFA; }
.rec-col-done { --col: var(--c-green); --col-tint: #F6FAF2; }
.rec-col-cancelled { --col: #A9A9A0; --col-tint: #F8F8F4; }
.rec-col-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px 10px; }
.rec-col-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--col); flex: none; }
.rec-col-title { font-size: var(--fs-base); font-weight: 700; flex: 1 1 auto; }
.rec-col-count {
  min-width: 26px; height: 24px; padding: 0 8px; border-radius: var(--radius-pill); background: #fff;
  border: 1px solid var(--c-line-soft); font-size: 12px; font-weight: 700; display: inline-grid; place-items: center;
}
.rec-col-body { display: flex; flex-direction: column; gap: 10px; padding: 0 10px 12px; min-height: 96px; }
.rec-col-body.is-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: start; }
.rec-col-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  min-height: 84px; padding: 12px; border: 1px dashed var(--c-line); border-radius: 12px; color: var(--c-muted); font-size: var(--fs-sm);
}
.rec-col-empty .icon { width: 20px; height: 20px; color: var(--col); opacity: .7; }
.rec-col-more { align-self: center; }
.rec-col.is-drop-ok { box-shadow: 0 0 0 2px var(--c-mint); }
.rec-col.is-drop-over { box-shadow: 0 0 0 2px var(--c-green); background: var(--c-tint); }
.rec-col.is-drop-no { opacity: .55; }

.rec-card {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px;
  background: #fff; border: 1px solid var(--c-line-soft); border-inline-start: 3px solid transparent; border-radius: 12px;
  box-shadow: var(--shadow-sm); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; min-width: 0;
}
.rec-card:hover { border-color: var(--c-mint); box-shadow: var(--shadow); }
.rec-card:focus-visible { outline: 2px solid var(--c-green); outline-offset: 2px; }
.rec-card.is-high { border-inline-start-color: var(--c-gold); }
.rec-card.is-overdue { border-inline-start-color: var(--c-orange); }
.rec-card.is-dragging { opacity: .5; transform: scale(.98); }
.rec-card[draggable="true"] { cursor: grab; }
.rec-card-top { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.rec-card-thumb { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex: none; background: #EEE; }
.rec-card-thumb.is-empty { display: grid; place-items: center; color: #B5B5AC; background: var(--c-gray-tint); }
.rec-card-thumb.is-empty .icon { width: 20px; height: 20px; }
.rec-card-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rec-card-title { font-size: 15px; font-weight: 700; line-height: 1.45; color: var(--c-ink); overflow-wrap: anywhere; }
.rec-card-park { display: flex; align-items: center; gap: 2px 10px; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--c-muted-strong); }
.rec-card-where { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.rec-card-park .icon { width: 13px; height: 13px; color: var(--c-green); }
.rec-dot { color: #BBB; }
.rec-card-detail {
  font-size: var(--fs-sm); color: #555; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rec-card-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.rec-card-badges:empty { display: none; }
.rec-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding-top: 8px; border-top: 1px dashed var(--c-line-soft); }
.rec-card-photos { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--c-muted-strong); }
.rec-card-photos .icon { width: 14px; height: 14px; }
.rec-slash { color: #BBB; }
.rec-card-quick { margin-top: 2px; }

.rec-due { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--c-muted-strong); white-space: nowrap; }
.rec-due .icon { width: 14px; height: 14px; }
.rec-due.is-overdue { color: var(--c-orange-700); font-weight: 700; }
.rec-due.is-overdue .icon { color: var(--c-orange); }
.rec-due.is-soon { color: #7E6127; font-weight: 600; }
.rec-due.is-none { color: var(--c-muted); }
.rec-due.is-past .icon { color: var(--c-green); }

/* ------------------------------------------------------------------ table view */
.rec-table-card { overflow: hidden; }
.rec-table-card > .table-wrap { border: 0; border-radius: var(--radius); }
.rec-t-title { display: flex; flex-direction: column; gap: 2px; min-width: 200px; max-width: 420px; }
.rec-t-detail { font-size: var(--fs-xs); color: var(--c-muted-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------------ detail (drawer + page) */
.rec-drawer { --drawer-w: 640px; }
.rec-drawer .drawer-head { gap: 6px; }
.rec-drawer .drawer-title { flex: 1 1 auto; }
.rec-drawer-tools { display: flex; gap: 2px; }
.rec-drawer .drawer-body { background: var(--c-cream); }
.rec-detail { display: flex; flex-direction: column; gap: 16px; }
.rec-d-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rec-d-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rec-d-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
.rec-d-layout .rec-d-main { background: #fff; border: 1px solid var(--c-line-soft); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); }
.rec-d-head { display: flex; flex-direction: column; gap: 8px; }
.rec-d-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.rec-d-title { font-size: var(--fs-lg); font-weight: 700; line-height: 1.4; color: var(--c-ink); }
.rec-d-meta { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; font-size: var(--fs-sm); color: var(--c-muted-strong); }
.rec-d-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.rec-d-meta .icon { width: 15px; height: 15px; color: var(--c-green); }
.rec-d-meta .rec-due .icon { color: inherit; }
.rec-d-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px; background: var(--c-tint); border: 1px solid #DCEBD0; border-radius: 12px; }
.rec-d-actions .rec-act-cancel { color: var(--c-orange-700); }
.rec-d-readonly { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--c-gray-tint); color: var(--c-muted-strong); font-size: var(--fs-sm); }
.rec-d-readonly .icon { width: 16px; height: 16px; }
.rec-d-text { white-space: pre-line; line-height: 1.8; padding: 12px 14px; border: 1px solid var(--c-line-soft); border-radius: 12px; background: #fff; overflow-wrap: anywhere; }
.rec-d-text.is-empty { color: var(--c-muted); font-size: var(--fs-sm); }
.rec-drawer .card { box-shadow: none; }

.rec-d-photos { display: flex; flex-direction: column; gap: 16px; }
.rec-photos { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; background: #fff; border: 1px solid var(--c-line-soft); }
.rec-photos.is-before { border-top: 3px solid var(--c-gold); }
.rec-photos.is-after { border-top: 3px solid var(--c-green); }
.rec-photos-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.rec-photos.is-before .section-title::before { background: var(--c-gold); }
.rec-photos-hint { font-size: var(--fs-xs); color: var(--c-muted-strong); }
.rec-count-pill {
  display: inline-flex; align-items: center; gap: 3px; min-width: 24px; height: 22px; padding: 0 8px; border-radius: var(--radius-pill);
  background: var(--c-gray-tint); color: #555; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.rec-gallery { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.rec-gallery .rec-kind-visit { color: var(--c-teal); }
.rec-gallery .rec-kind-stale { color: var(--c-muted-strong); }
.rec-gallery .gallery-tile:has(.rec-kind-stale) img { filter: grayscale(.6); opacity: .8; }
.rec-more-tile {
  aspect-ratio: 4 / 3; border-radius: 12px; border: 1px dashed var(--c-line); background: var(--c-gray-tint);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--c-forest); font-weight: 600;
}
.rec-more-tile .num { font-size: var(--fs-lg); font-weight: 700; }
.rec-more-tile:hover { border-color: var(--c-mint); background: var(--c-tint); }

.rec-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rec-tl-item { --tl: var(--c-muted); position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding-bottom: 14px; }
.rec-tl-item:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 14px; top: 30px; bottom: 0; width: 2px; background: var(--c-line-soft); }
.rec-tl-item.tone-green { --tl: var(--c-green); }
.rec-tl-item.tone-forest { --tl: var(--c-forest); }
.rec-tl-item.tone-teal { --tl: var(--c-teal); }
.rec-tl-item.tone-gold { --tl: var(--c-gold); }
.rec-tl-item.tone-orange { --tl: var(--c-orange); }
.rec-tl-dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--tl) 12%, white); color: var(--tl); }
.rec-tl-dot .icon { width: 15px; height: 15px; }
.rec-tl-body { min-width: 0; padding-top: 3px; }
.rec-tl-title { font-weight: 600; font-size: var(--fs-sm); line-height: 1.5; }
.rec-tl-meta { display: flex; gap: 4px 10px; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--c-muted-strong); }
.rec-tl-note { margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: var(--c-zebra); border: 1px solid var(--c-line-soft); font-size: var(--fs-sm); white-space: pre-line; overflow-wrap: anywhere; }
.rec-tl-prev { margin-top: 4px; font-size: var(--fs-xs); color: var(--c-muted-strong); }
.rec-tl-changes { margin: 4px 0 0; padding-inline-start: 18px; font-size: var(--fs-xs); color: #555; }

/* ------------------------------------------------------------------ dialogs */
.rec-dlg-summary { padding: 10px 12px; border-radius: 10px; background: var(--c-zebra); border: 1px solid var(--c-line-soft); }
.rec-dlg-title { font-weight: 700; }
.rec-dlg-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--c-muted-strong); margin-top: 2px; }
.rec-dlg-meta .icon { width: 13px; height: 13px; color: var(--c-green); }
.rec-dlg-label { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 600; color: #444; }
.rec-dlg-label .req { color: var(--c-orange); }
.rec-quick-due { display: flex; gap: 6px; flex-wrap: wrap; }
.rec-quick-due .chip { min-height: 30px; padding: 2px 10px; font-size: var(--fs-xs); }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1200px) {
  .rec-board, .rec-board.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rec-d-layout { grid-template-columns: minmax(0, 1fr); }
  [data-page="recommendations"] .rec-hide-md { display: none; }
}
@media (max-width: 900px) {
  [data-page="recommendations"] .page-actions .rec-view-toggle { order: 3; }
}
@media (max-width: 600px) {
  /* Compact KPI strip on phones so the board starts on the first screen. */
  [data-page="recommendations"] .rec-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  [data-page="recommendations"] .rec-kpis .kpi { padding: 10px 12px; gap: 2px; }
  [data-page="recommendations"] .rec-kpis .kpi-icon,
  [data-page="recommendations"] .rec-kpis .kpi-meta,
  [data-page="recommendations"] .rec-kpis .kpi-hint { display: none; }
  [data-page="recommendations"] .rec-kpis .kpi-label { font-size: var(--fs-xs); }
  [data-page="recommendations"] .rec-kpis .kpi-value { font-size: 22px; }
  .rec-board-tabs { display: flex; margin-bottom: 10px; }
  .rec-board, .rec-board.cols-2, .rec-board.cols-3 { grid-template-columns: minmax(0, 1fr); }
  .rec-board:not(.cols-1) .rec-col:not(.is-active) { display: none; }
  .rec-col-body.is-grid { grid-template-columns: minmax(0, 1fr); }
  [data-page="recommendations"] .rec-hide-sm { display: none; }
  [data-page="recommendations"] .page-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-page="recommendations"] .page-actions > .rec-view-toggle { grid-column: 1 / -1; width: 100%; }
  [data-page="recommendations"] .rec-view-toggle .seg { flex: 1 1 0; }
  [data-page="recommendations"] .rec-view-toggle .seg span { width: 100%; }
  .rec-park-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--pad) * -1); padding: 2px var(--pad); scrollbar-width: none; }
  .rec-park-chips::-webkit-scrollbar { display: none; }
  .rec-park-chips .chip { flex: none; }
  .rec-toolbar .rec-search { flex-basis: 100%; }
  .rec-toolbar-end { flex-basis: 100%; justify-content: space-between; }
  .rec-t-title { min-width: 160px; }
  .rec-drawer .drawer-body { padding: 14px; }
  .rec-d-actions .btn { flex: 1 1 auto; }
  .rec-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .rec-d-layout .rec-d-main { padding: 14px; }
}

/* ------------------------------------------------------------------ print: A4 register (.rec-p-*) */
.rec-p-sheet .rec-p-h2 { font-size: 13px; font-weight: 700; color: var(--c-forest, #2C5F2D); margin: 12px 0 4px; display: flex; align-items: center; gap: 6px; }
.rec-p-sheet .rec-p-h2::before { content: ""; width: 4px; height: 14px; border-radius: 2px; background: var(--c-primary, #76BC21); }
.rec-p-sheet .sheet-meta dd { font-weight: 600; }
.rec-p-table { table-layout: fixed; }
.rec-p-table td { overflow-wrap: anywhere; }
.rec-p-table tr.is-total td { text-align: start; color: var(--c-forest, #2C5F2D); }
.rec-p-table tr { break-inside: avoid; }
.rec-p-sub { font-size: 9.5px; color: #666; font-weight: 400; margin-top: 1px; }
.rec-p-note { font-size: 10px; }
.rec-p-table td.rec-p-date { white-space: nowrap; font-size: 10px; padding-inline: 3px; }
.rec-p-late { color: #C9441A; font-weight: 700; }
.rec-p-late .rec-p-sub { color: #C9441A; }
.rec-p-muted td { color: #888; }
.rec-p-empty { text-align: center; color: #666; padding: 18px; }
.rec-p-summary td.t-num, .rec-p-summary th { width: 11%; }

/* ------------------------------------------------------------------ print: before/after slide (.rec-s-*) */
.rec-s-slide .slide-title { font-size: 34px; }
.rec-s-slide .slide-body { gap: 14px; }
.rec-s-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.rec-s-late { background: #FDEDE6; color: #C9441A; }
.rec-s-detail { font-size: 19px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rec-s-grid { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
/* Text rows keep their height (they clip with overflow: hidden, so they would otherwise shrink to nothing). */
.rec-s-pills, .rec-s-detail, .rec-s-closure { flex: none; }
.rec-s-card .slide-photo.rec-s-lowres { display: grid; place-items: center; background: #F4F4EE; }
.rec-s-card .slide-photo.rec-s-lowres img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; }
.rec-s-card { display: flex; flex-direction: column; min-height: 0; padding: 14px 16px; }
.rec-s-card .slide-card-title { justify-content: flex-start; }
.rec-s-count { margin-inline-start: auto; font-size: 14px; font-weight: 500; color: #777; font-variant-numeric: tabular-nums; }
.rec-s-card .slide-photos { gap: 10px; }
.rec-s-card .slide-photos.rec-s-one { grid-template-columns: minmax(0, 1fr); }
.rec-s-card .slide-photo { border-radius: 12px; }
.rec-s-empty {
  flex: 1 1 auto; display: grid; place-items: center; border: 2px dashed #CFD8C4; border-radius: 12px;
  color: #888; font-size: 18px; background: rgba(255, 255, 255, .6);
}
.rec-s-closure { font-size: 17px; line-height: 1.6; color: #333; padding: 8px 14px; border-radius: 12px; background: var(--c-tint, #EAF3E4); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rec-s-closure strong { color: var(--c-forest, #2C5F2D); }

/* Overdue rows keep their orange tint on zebra (even) rows too. */
[data-page="recommendations"] .table tbody tr.is-warn td { background: #FFF8F4; }
[data-page="recommendations"] .table tbody tr.is-warn:hover td { background: var(--c-orange-tint); }