/* Church Planner 1.30.55 — directions screen: fit content to the viewport. */
[data-panel="directions"],
[data-panel="directions"] .panel,
[data-panel="directions"] .panel-head,
#directionsToolbar,
#directionsTable,
.directions-controls {
  min-width: 0;
  max-width: 100%;
}
.directions-filter-row { display: grid; min-width: 0; gap: 10px; }
.directions-search-row { display: flex; align-items: end; gap: 10px; min-width: 0; }
.directions-search-row .search-field { width: min(360px, 100%); min-width: 0; }
.directions-filters-trigger, .directions-role-trigger { display: none; }
.directions-filters-extra { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; min-width: 0; }
.directions-filters-extra .select-field { width: min(195px, 100%); min-width: 0; }
.directions-column-panel { display: flex; align-items: flex-start; gap: 10px; min-width: 0; flex-wrap: wrap; }
.directions-column-heading { display: flex; align-items: center; gap: 8px; min-width: 0; }
.directions-column-heading > span { color: var(--muted); font-size: 12px; font-weight: 800; }
.directions-column-panel .column-toggle-strip { min-width: 0; }
.directions-column-panel .directions-actions-row { width: 100%; }

@media (max-width: 820px) {
  [data-panel="directions"] .panel { width: 100%; padding: 14px; overflow: clip; }
  [data-panel="directions"] .panel-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
  [data-panel="directions"] .panel-head h3 { font-size: 22px; }
  #directionsToolbar { width: 100%; min-width: 0; flex: none; margin: 0; padding: 0; }
  .directions-controls { display: grid; gap: 12px; width: 100%; }
  .directions-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
  .directions-search-row .search-field { width: 100%; min-width: 0; }
  .directions-search-row input { width: 100%; min-width: 0; }
  .directions-filters-trigger { display: inline-flex; min-height: 44px; align-items: center; gap: 6px; padding: 8px 10px; white-space: nowrap; font-size: 13px; }
  .directions-filters-trigger[aria-expanded="true"] > span,
  .directions-role-trigger[aria-expanded="true"] > span { transform: rotate(180deg); }
  .directions-filters-trigger > span,
  .directions-role-trigger > span { transition: transform .16s ease; }
  .directions-filters-extra { display: none; width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-alt); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 10px; }
  .directions-filters-extra.is-open { display: grid; }
  .directions-filters-extra .select-field { width: 100%; min-width: 0; }
  .directions-filters-extra .select-field select { width: 100%; min-width: 0; }
  .directions-filters-extra .select-field:first-child { grid-column: 1 / -1; }
  .directions-toggle { min-width: 0; border-radius: 10px; padding: 10px; font-size: 12px; }
  .directions-toggle input { width: 18px; min-width: 18px; min-height: 18px; }
  .directions-column-panel { display: grid; gap: 0; width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
  .directions-column-heading { display: flex; justify-content: space-between; gap: 8px; padding: 10px 12px; }
  .directions-column-heading > span { font-size: 13px; color: var(--ink); }
  .directions-role-trigger { display: inline-flex; gap: 8px; align-items: center; justify-content: center; min-height: 40px; padding: 7px 10px; font-size: 12px; }
  .directions-column-panel .column-toggle-strip { display: none; width: 100%; max-height: min(45vh, 330px); overflow-x: hidden; overflow-y: auto; padding: 10px 12px; border-top: 1px solid var(--line); scrollbar-width: thin; }
  .directions-column-panel .column-toggle-strip.is-open { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .directions-column-panel .column-toggle-strip button { width: 100%; min-width: 0; min-height: 42px; white-space: normal; text-align: center; overflow-wrap: anywhere; border-radius: 10px; padding: 8px 6px; font-size: 12px; }
  .directions-column-panel .column-toggle-strip button.active { border-color: var(--teal); color: var(--ink); background: color-mix(in srgb, var(--teal) 16%, var(--surface)); }
  .directions-column-panel .directions-actions-row { display: none; padding: 0 12px 12px; }
  .directions-column-panel:has(.column-toggle-strip.is-open) .directions-actions-row { display: flex; }
  .directions-quick-controls { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0; background: transparent; border: 0; }
  .directions-quick-controls .ghost-button { min-width: 0; min-height: 40px; white-space: normal; line-height: 1.2; padding: 8px 7px; }
  .directions-quick-controls .ghost-button:last-child { grid-column: 1 / -1; }
  #directionsTable { width: 100%; min-width: 0; }
  .directions-mobile-list { width: 100%; min-width: 0; gap: 10px; }
  .direction-mobile-card { width: 100%; min-width: 0; border-radius: 13px; overflow: hidden; }
  .direction-mobile-event { width: 100%; min-width: 0; display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; padding: 12px 13px 7px; border-bottom: 0; }
  .direction-mobile-event > span { min-width: 0; flex: 1; }
  .direction-mobile-event strong { font-size: 15px; line-height: 1.35; overflow: visible; white-space: normal; overflow-wrap: anywhere; }
  .direction-mobile-event small { margin-top: 3px; font-size: 12px; }
  .direction-mobile-event em { max-width: 40%; overflow: hidden; white-space: normal; overflow-wrap: anywhere; flex: 0 1 auto; line-height: 1.25; font-size: 11px; }
  .direction-mobile-count { font-size: 11px; font-weight: 650; color: var(--muted); padding: 0 13px 10px; }
  .direction-mobile-roles { display: block; }
  .direction-mobile-role { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; padding: 9px 13px; min-height: 0; align-items: center; }
  .direction-mobile-role > span { grid-column: 1; color: var(--muted); font-size: 11px; font-weight: 700; }
  .direction-mobile-role > div { grid-column: 1; grid-row: 2; min-width: 0; font-size: 13px; }
  .direction-mobile-role .direction-primary-assignee { max-width: 100%; }
  .direction-mobile-role .direction-primary-assignee strong { white-space: normal; overflow-wrap: anywhere; font-size: 14px; line-height: 1.3; }
  .direction-mobile-role .direction-primary-assignee span { white-space: normal; font-size: 11px; }
  .direction-mobile-role .direction-cell-edit { grid-column: 2; grid-row: 1 / 3; align-self: center; width: 40px; height: 40px; }
  .direction-mobile-role .direction-assignment-preview { gap: 3px; }
  .direction-mobile-role .direction-assignment-meta { gap: 3px; }
  .direction-mobile-role .direction-more-button { min-height: 28px; }
  .direction-mobile-more { display: block; }
  .direction-mobile-more > summary { min-height: 44px; padding: 11px 13px; border-top: 1px solid var(--line); border-bottom: 0; font-size: 12px; }
  .direction-mobile-more[open] > summary { border-bottom: 1px solid var(--line); }
}
@media (max-width: 360px) {
  .directions-search-row { grid-template-columns: 1fr; }
  .directions-filters-trigger { justify-content: center; }
  .directions-filters-extra.is-open { grid-template-columns: minmax(0, 1fr); }
  .directions-filters-extra .select-field:first-child { grid-column: auto; }
  .directions-column-panel .column-toggle-strip.is-open { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .directions-filters-trigger > span, .directions-role-trigger > span { transition: none; }
}