/* FFSmonitor workspace density system.
   Canonical typography, density and proportions for internal pages. */

.ffs-page,
.ffs-page * { box-sizing: border-box; }

.ffs-page {
  width: min(var(--content-max-width), 100%);
  margin: 0 auto;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--line-height-body);
}

.ffs-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.ffs-page-header__body { min-width: 0; }
.ffs-page-title {
  margin: 0;
  font: 700 var(--page-title-size)/1.2 var(--font-heading);
  color: var(--text);
}
.ffs-page-subtitle {
  margin: var(--space-1) 0 0;
  color: var(--text-muted);
  font-size: var(--font-size-md);
  line-height: 1.4;
}

.ffs-section-title {
  margin: 0;
  font: 700 var(--section-title-size)/1.25 var(--font-heading);
  color: var(--text);
}

.ffs-card-title {
  margin: 0;
  color: var(--text);
  font: 700 var(--font-size-base)/1.3 var(--font-heading);
}

.ffs-card {
  padding: var(--panel-padding);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.ffs-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.ffs-kpi { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.ffs-kpi__label { color: var(--text-muted); font-size: var(--font-size-sm); font-weight: 700; line-height: 1.3; }
.ffs-kpi__value { margin-top: var(--space-1); color: var(--text); font-size: 22px; font-weight: 700; line-height: 1.15; }
.ffs-filter-bar {
  display: flex;
  align-items: end;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.ffs-filter-bar .ffs-field { flex: 1 1 210px; }
.ffs-control--compact { min-height: var(--control-height-compact); padding-block: 6px; }
.ffs-btn.ffs-btn--compact { min-height: var(--control-height-compact); padding: 7px 11px; white-space: nowrap; overflow-wrap: normal; word-break: normal; }

.ffs-table-shell {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--table-border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  position: relative;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}
.ffs-table {
  width: 100% !important;
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body) !important;
  font-size: var(--table-text-size) !important;
  font-weight: var(--table-text-weight);
  line-height: var(--table-line-height);
}
.ffs-table > thead > tr > th,
.ffs-table > tbody > tr > td,
.ffs-table > tbody > tr > th {
  box-sizing: border-box;
  height: var(--table-row-height);
  padding: var(--table-cell-padding-y) var(--table-cell-padding-x) !important;
  border: 0;
  border-bottom: 1px solid var(--table-border) !important;
  vertical-align: middle !important;
}
.ffs-table > thead > tr > th {
  background: var(--table-head-bg) !important;
  color: var(--text-muted) !important;
  font-family: var(--font-body) !important;
  font-size: var(--table-head-size) !important;
  font-weight: var(--table-head-weight) !important;
  line-height: var(--table-head-line-height) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: left;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}
.ffs-table > tbody > tr > td,
.ffs-table > tbody > tr > th {
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body) !important;
  font-size: var(--table-text-size) !important;
  font-weight: var(--table-text-weight) !important;
  line-height: var(--table-line-height) !important;
  transition: background-color .12s ease;
}
.ffs-table > tbody > tr > th { font-weight: 600 !important; }
.ffs-table > tbody > tr:last-child > td,
.ffs-table > tbody > tr:last-child > th { border-bottom: 0 !important; }
.ffs-table > tbody > tr:hover > td,
.ffs-table > tbody > tr:hover > th { background: var(--table-row-hover-bg); }
.ffs-table--compact > thead > tr > th,
.ffs-table--compact > tbody > tr > td,
.ffs-table--compact > tbody > tr > th {
  height: var(--table-row-height-compact);
  padding: var(--table-cell-padding-y-compact) var(--table-cell-padding-x-compact) !important;
}
.ffs-table--striped > tbody > tr:nth-child(even) > td,
.ffs-table--striped > tbody > tr:nth-child(even) > th { background: var(--surface-muted); }
.ffs-table--sticky-head > thead > tr > th { position: sticky; top: 0; z-index: 2; }
.ffs-table .ffs-table__id { min-width: var(--table-col-id-min); text-align: center !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ffs-table .ffs-table__date { min-width: var(--table-col-date-min); text-align: center !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ffs-table .ffs-table__time { min-width: var(--table-col-time-min); text-align: center !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ffs-table .ffs-table__numeric { min-width: var(--table-col-number-min); text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ffs-table .ffs-table__status { min-width: var(--table-col-status-min); text-align: center !important; white-space: nowrap; }
.ffs-table .ffs-table__plate { min-width: var(--table-col-plate-min); text-align: center !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ffs-table .ffs-table__primary { min-width: var(--table-col-primary-min); text-align: left !important; }
.ffs-table > tbody > tr > .ffs-table__primary { font-weight: 600 !important; }
.ffs-table .ffs-table__text { min-width: var(--table-col-text-min); text-align: left !important; white-space: normal; overflow-wrap: anywhere; }
.ffs-table .ffs-table__text--wide { min-width: var(--table-col-text-wide-min); text-align: left !important; white-space: normal; overflow-wrap: anywhere; }
.ffs-table .ffs-table__actions { min-width: var(--table-col-actions-min); text-align: right !important; white-space: nowrap; }
.ffs-table .ffs-table__center { text-align: center !important; }
.ffs-table .ffs-table__nowrap { white-space: nowrap !important; }
.ffs-table .ffs-table__muted { color: var(--text-muted) !important; }
.ffs-table small { font-size: var(--font-size-xs); line-height: 1.3; }
.ffs-table--sticky-first > thead > tr > th:first-child,
.ffs-table--sticky-first > tbody > tr > td:first-child,
.ffs-table--sticky-first > tbody > tr > th:first-child {
  position: sticky !important;
  left: 0 !important;
  z-index: 1;
  background: var(--surface);
  box-shadow: 1px 0 0 var(--table-border);
}
.ffs-table--sticky-first > thead > tr > th:first-child { z-index: 3; background: var(--table-head-bg) !important; }
.ffs-table--sticky-first > tbody > tr:hover > td:first-child,
.ffs-table--sticky-first > tbody > tr:hover > th:first-child { background: var(--table-row-hover-bg); }
.ffs-table--striped.ffs-table--sticky-first > tbody > tr:nth-child(even) > td:first-child,
.ffs-table--striped.ffs-table--sticky-first > tbody > tr:nth-child(even) > th:first-child { background: var(--surface-muted); }
.ffs-table a:focus-visible,
.ffs-table button:focus-visible,
.ffs-table input:focus-visible,
.ffs-table select:focus-visible { outline: 0; box-shadow: var(--focus-ring); }

/* DataTables is behavior, not a second visual system. */
.ffs-table-region .dataTables_wrapper,
.ffs-table-shell .dataTables_wrapper {
  color: var(--text);
  font-family: var(--font-body) !important;
  font-size: var(--font-size-sm) !important;
  line-height: 1.35;
}
.ffs-table-region .dataTables_length,
.ffs-table-region .dataTables_filter,
.ffs-table-region .dataTables_info,
.ffs-table-region .dataTables_paginate,
.ffs-table-shell .dataTables_length,
.ffs-table-shell .dataTables_filter,
.ffs-table-shell .dataTables_info,
.ffs-table-shell .dataTables_paginate {
  color: var(--text-muted) !important;
  font-family: var(--font-body) !important;
  font-size: var(--font-size-sm) !important;
}
.ffs-table-region .dataTables_length select,
.ffs-table-region .dataTables_filter input,
.ffs-table-shell .dataTables_length select,
.ffs-table-shell .dataTables_filter input {
  min-height: var(--control-height);
  padding: 8px 11px;
  border: 1px solid var(--control-border);
  border-radius: var(--control-radius);
  background: var(--control-bg);
  color: var(--text);
  font-family: var(--font-body) !important;
  font-size: var(--control-text-size) !important;
}
.ffs-table-region .dataTables_paginate .paginate_button,
.ffs-table-shell .dataTables_paginate .paginate_button {
  min-width: 34px;
  min-height: 34px;
  margin: 0 2px;
  padding: 7px 9px !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-muted) !important;
  background: transparent !important;
  font-family: var(--font-body) !important;
  font-size: var(--font-size-sm) !important;
  line-height: 1.35 !important;
}
.ffs-table-region .dataTables_paginate .paginate_button.current,
.ffs-table-shell .dataTables_paginate .paginate_button.current {
  border-color: var(--border-strong) !important;
  color: var(--text) !important;
  background: var(--surface-strong) !important;
}
.ffs-table-region .dataTables_paginate .paginate_button:hover,
.ffs-table-shell .dataTables_paginate .paginate_button:hover {
  border-color: var(--border) !important;
  color: var(--text) !important;
  background: var(--surface-muted) !important;
}

.ffs-table-region .dataTables_wrapper label,
.ffs-table-shell .dataTables_wrapper label,
.ffs-table-region .dt-container,
.ffs-table-shell .dt-container,
.ffs-table-region .dt-container label,
.ffs-table-shell .dt-container label {
  color: var(--text-muted) !important;
  font-family: var(--font-body) !important;
  font-size: var(--font-size-sm) !important;
  line-height: 1.35 !important;
}
.ffs-table-region .dt-info,
.ffs-table-region .dt-search,
.ffs-table-region .dt-length,
.ffs-table-region .dt-paging,
.ffs-table-shell .dt-info,
.ffs-table-shell .dt-search,
.ffs-table-shell .dt-length,
.ffs-table-shell .dt-paging {
  color: var(--text-muted) !important;
  font-family: var(--font-body) !important;
  font-size: var(--font-size-sm) !important;
}
.ffs-table-region .dt-input,
.ffs-table-shell .dt-input {
  min-height: var(--control-height-compact);
  border: 1px solid var(--control-border) !important;
  border-radius: var(--control-radius) !important;
  background: var(--control-bg) !important;
  color: var(--text) !important;
  font-family: var(--font-body) !important;
  font-size: var(--control-text-size) !important;
}
.ffs-table-region .dt-paging-button,
.ffs-table-shell .dt-paging-button {
  min-width: var(--table-tool-height) !important;
  min-height: var(--table-tool-height) !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-md) !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  font-family: var(--font-body) !important;
  font-size: var(--table-tool-text-size) !important;
  font-weight: var(--table-tool-weight) !important;
}

.ffs-table-region .dt-buttons,
.ffs-table-shell .dt-buttons {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin: 0 0 var(--space-3) !important;
}

.ffs-table-region .dt-buttons .dt-button,
.ffs-table-region button.dt-button,
.ffs-table-shell .dt-buttons .dt-button,
.ffs-table-shell button.dt-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: var(--table-tool-height) !important;
  padding: 6px 10px !important;
  border: 1px solid var(--table-border) !important;
  border-radius: var(--radius-md) !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  box-shadow: none !important;
  font-family: var(--font-body) !important;
  font-size: var(--table-tool-text-size) !important;
  font-weight: var(--table-tool-weight) !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
}
.ffs-table-region .dt-buttons .dt-button:hover,
.ffs-table-region .dt-buttons .dt-button:focus,
.ffs-table-shell .dt-buttons .dt-button:hover,
.ffs-table-shell .dt-buttons .dt-button:focus {
  border-color: var(--border-strong) !important;
  background: var(--surface-muted) !important;
  color: var(--text) !important;
}
.ffs-table-region .dt-buttons .dt-button:focus-visible,
.ffs-table-shell .dt-buttons .dt-button:focus-visible {
  outline: 0 !important;
  box-shadow: var(--focus-ring) !important;
}

.ffs-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}
.ffs-pager__meta { color: var(--text-muted); font-size: var(--font-size-sm); line-height: 1.35; }
.ffs-empty {
  padding: var(--space-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--font-size-base);
  font-weight: 600;
  line-height: 1.4;
}
.ffs-meta { color: var(--text-muted); font-size: var(--font-size-sm); line-height: 1.35; }
.ffs-page-note { margin: var(--space-3) 0 0; }

@media (max-width: 767px) {
  .ffs-page { width: 100%; }
  .ffs-page-header { align-items: stretch; flex-direction: column; margin-bottom: var(--space-4); }
  .ffs-page-title { font-size: var(--page-title-size-mobile); }
  .ffs-section-title { font-size: var(--section-title-size-mobile); }
  .ffs-card { padding: var(--panel-padding-mobile); }
  .ffs-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ffs-filter-bar { display: grid; grid-template-columns: 1fr; }
  .ffs-filter-bar .ffs-field { width: 100%; }
  .ffs-pager { align-items: stretch; }
  .ffs-pager .ffs-btn { flex: 0 0 auto; }
  .ffs-pager__meta { flex: 1 1 150px; text-align: center; }
}

.ffs-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: 700;
  line-height: 1.2;
}

.ffs-inline-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Phase 20: quiet table chrome keeps attention on the dataset. */
.ffs-table > tbody > tr > td.dataTables_empty,
.ffs-table > tbody > tr > td.dt-empty {
  padding-block: var(--space-5) !important;
  background: var(--surface) !important;
  color: var(--text-muted) !important;
  font-size: var(--table-text-size) !important;
  font-weight: 400 !important;
  text-align: center !important;
}
.ffs-table thead .dt-column-order,
.ffs-table.dataTable thead > tr > th::before,
.ffs-table.dataTable thead > tr > th::after {
  opacity: .32 !important;
}
.ffs-table thead th[aria-sort="ascending"] .dt-column-order,
.ffs-table thead th[aria-sort="descending"] .dt-column-order,
.ffs-table.dataTable thead > tr > th[aria-sort="ascending"]::before,
.ffs-table.dataTable thead > tr > th[aria-sort="descending"]::after {
  opacity: .68 !important;
}

/* Registry utility layout follows the width of its table region. */
@container departure-registry (max-width: 599px) {
  #registry-table-card .dataTables_filter { float: none; text-align: left; margin-bottom: var(--space-3); }
  #registry-table-card .dataTables_filter label { display: flex; align-items: center; gap: var(--space-2); }
  #registry-table-card .dataTables_filter input { min-width: 0; width: 100%; }
  #registry-table-card .dt-buttons { display: flex; flex-wrap: wrap; }
  #registry-table-card .dataTables_info,
  #registry-table-card .dataTables_paginate { float: none; text-align: left; }
}

/* Visibility is behavioral, independent of component display rules. */
[hidden] { display: none !important; }
.ffs-table .ffs-table__id { width: 1%; min-width: 8ch; white-space: nowrap !important; overflow-wrap: normal !important; word-break: normal !important; }
.ffs-table .ffs-table__numeric, .ffs-table .ffs-table__plate { overflow-wrap: normal; word-break: normal; }
.ffs-kpi-grid--operational { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1100px; }
.season-group #btnSummer[aria-pressed="true"] { color: var(--warning-fg); background: var(--warning-bg); border-color: var(--warning-border); }
.season-group #btnWinter[aria-pressed="true"] { color: var(--info-fg); background: var(--info-bg); border-color: var(--info-border); }
#brigadeRows .fuel-risk { display: inline-flex; justify-content: center; min-width: 13ch; white-space: nowrap; border-radius: var(--control-radius); }

/* Grid tracks must shrink independently of a wide table's minimum content. */
.ffs-tabs.tabs { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.ffs-tabs > [role="tabpanel"] { min-width: 0; }
@media (max-width: 760px) { .ffs-kpi-grid--operational { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .ffs-kpi-grid--operational { grid-template-columns: 1fr; } }