/*
 * Skiftplan — Patch 1: lesbarhet.
 *
 * Dette laget endrer bare presentasjon: typografi, trefflater, luft og
 * kolonnebredder. Struktur, dataflyt og handlinger er uendret.
 */

#shiftPlansView {
  --shift-readable-body: var(--bs-text-15);
  --shift-readable-meta: var(--bs-text-14);
  --shift-readable-overline: var(--bs-text-12-5);
}

/* Sidehierarki og navigasjon. */
#shiftPlansView .view-heading .kicker {
  font-size: var(--shift-readable-overline);
  line-height: 1.35;
  letter-spacing: .1em;
}

#shiftPlansView .view-heading h1 {
  font-size: var(--bs-text-28);
  line-height: 1.2;
  letter-spacing: -.025em;
}

#shiftPlansView .view-heading > div > p:not(.kicker) {
  font-size: var(--shift-readable-body);
  line-height: 1.55;
}

#shiftPlansView .shift-view-tabs button,
#shiftPlansView .shift-subtabs button {
  min-height: 44px;
  padding-inline: 16px;
  font-size: var(--shift-readable-body);
  font-weight: 550;
}

#shiftPlansView .shift-toolbar-view {
  gap: 5px;
  width: 236px;
  flex-basis: 236px;
}

#shiftPlansView .shift-toolbar-view > span,
#shiftPlansView .shift-toolbar-view > small {
  font-size: var(--shift-readable-meta);
  line-height: 1.4;
}

#shiftPlansView .shift-toolbar-view > small {
  display: none;
}

#shiftPlansView .shift-toolbar-view select {
  min-height: 44px;
  font-size: var(--shift-readable-body);
}

/* Arbeidsplan: kontroller og prosjektoversikt. */
#shiftPlansView .shift-toolbar label > span,
#shiftPlansView .shift-hired-filters label > span,
#shiftPlansView .shift-directory-toolbar label > span {
  font-size: var(--shift-readable-meta);
  line-height: 1.35;
}

#shiftPlansView .shift-toolbar input,
#shiftPlansView .shift-toolbar select,
#shiftPlansView .shift-toolbar button,
#shiftPlansView .shift-hired-filters input,
#shiftPlansView .shift-hired-filters select,
#shiftPlansView .shift-directory-toolbar input,
#shiftPlansView .shift-directory-toolbar select {
  min-height: 44px;
  font-size: var(--shift-readable-body);
}

#shiftPlansView .shift-project-summary p,
#shiftPlansView .shift-project-head p {
  font-size: var(--shift-readable-overline);
  line-height: 1.35;
}

#shiftPlansView .shift-project-summary h2,
#shiftPlansView .shift-project-head h2 {
  font-size: var(--bs-text-22);
  line-height: 1.25;
}

#shiftPlansView .shift-project-summary-count,
#shiftPlansView .shift-project-head > div > span {
  font-size: var(--shift-readable-meta);
  line-height: 1.45;
}

#shiftPlansView .shift-project-manage-shifts,
#shiftPlansView .shift-project-head button,
#shiftPlansView .shift-official-actions button {
  min-height: 44px;
  font-size: var(--shift-readable-meta);
}

#shiftPlansView .shift-grid-edit-guide,
#shiftPlansView .shift-grid-edit-guide-tip {
  font-size: var(--shift-readable-meta);
  line-height: 1.45;
}

/* Arbeidsplan: kalenderhode og personrader. */
#shiftPlansView .shift-grid-worker-head-row > span,
#shiftPlansView .shift-grid .shift-worker-info-head > span,
#shiftPlansView .shift-week-band,
#shiftPlansView .shift-day-header > span,
#shiftPlansView .shift-day-header > small {
  font-size: var(--bs-text-13) !important;
  line-height: 1.35;
}

#shiftPlansView .shift-day-header > strong {
  font-size: var(--shift-readable-meta);
  line-height: 1.25;
}

#shiftPlansView .shift-grid tbody .shift-worker-name,
#shiftPlansView .shift-grid tbody .shift-worker-role-column,
#shiftPlansView .shift-grid tbody .shift-worker-shift-column,
#shiftPlansView .shift-grid tbody .shift-worker-actions-column,
#shiftPlansView .shift-grid tbody > tr[data-shift-worker-row] > td {
  height: 64px;
}

#shiftPlansView .shift-grid tbody .shift-worker-name {
  min-height: 64px;
  padding-block: 7px;
}

#shiftPlansView .shift-worker-name-cell .shift-grid-worker-name-copy strong,
#shiftPlansView .shift-worker-role-column strong {
  font-size: var(--shift-readable-body);
  line-height: 1.35;
}

#shiftPlansView .shift-worker-role-column small {
  font-size: var(--shift-readable-meta);
  line-height: 1.35;
}

#shiftPlansView .shift-worker-shift-select {
  width: 52px;
  height: 40px;
  font-size: var(--shift-readable-meta);
}

#shiftPlansView .shift-grid tbody > tr[data-shift-worker-row] > td > button {
  height: 63px;
}

#shiftPlansView .shift-worker-actions-column > button {
  min-width: 44px;
  font-size: var(--bs-text-18);
}

/* Bemanningsoversikt: tydelig informasjonsrekkefølge og romsligere tabell. */
#shiftPlansView .shift-directory-head .kicker {
  font-size: var(--shift-readable-overline);
  line-height: 1.35;
}

#shiftPlansView .shift-directory-head h2 {
  font-size: var(--bs-text-22);
  line-height: 1.25;
}

#shiftPlansView .shift-directory-head p:not(.kicker) {
  font-size: var(--shift-readable-meta);
  line-height: 1.55;
}

#shiftPlansView .shift-directory-head .primary-small,
#shiftPlansView .shift-directory-head .secondary-btn,
#shiftPlansView .shift-directory-head > button {
  min-height: 44px;
  padding-inline: 16px;
  font-size: var(--shift-readable-meta);
}

#shiftPlansView .shift-directory-metrics article {
  gap: 4px;
  padding-block: 16px;
}

#shiftPlansView .shift-directory-metrics span,
#shiftPlansView .shift-directory-metrics small {
  font-size: var(--shift-readable-meta);
  line-height: 1.35;
}

#shiftPlansView .shift-directory-metrics strong {
  font-size: var(--bs-text-30);
  line-height: 1.1;
}

#shiftPlansView .shift-directory-table-head {
  min-height: 44px;
  font-size: var(--bs-text-13);
  line-height: 1.3;
}

#shiftPlansView .shift-directory-row {
  min-height: 64px;
}

#shiftWorkersPanel .shift-worker-columns {
  grid-template-columns:
    minmax(220px, 1.15fr)
    minmax(135px, .7fr)
    minmax(170px, .85fr)
    minmax(235px, 1.3fr)
    82px
    116px;
}

/* Innleie: status og handlinger skal ha hver sin faste, romslige kolonne. */
#shiftHiredPanel .shift-hired-columns {
  grid-template-columns:
    minmax(165px, 1.15fr)
    minmax(120px, .75fr)
    minmax(105px, .65fr)
    minmax(105px, .65fr)
    minmax(155px, 1fr)
    82px
    132px;
}

#shiftHiredPanel .shift-worker-state {
  justify-self: start;
}

#shiftHiredPanel .shift-worker-actions {
  min-width: 132px;
}

#shiftHiredPanel .shift-worker-actions button,
#shiftHiredPanel .shift-worker-actions summary {
  white-space: nowrap;
}

#shiftPlansView .shift-worker-identity {
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 11px;
}

#shiftPlansView .shift-avatar {
  width: 40px;
  height: 40px;
  font-size: var(--shift-readable-meta);
}

#shiftPlansView .shift-worker-identity strong {
  font-size: var(--shift-readable-body);
  line-height: 1.35;
}

#shiftPlansView .shift-worker-identity small,
#shiftPlansView .shift-directory-secondary,
#shiftPlansView .shift-airport,
#shiftPlansView .shift-worker-projects,
#shiftPlansView .shift-worker-projects b,
#shiftPlansView .shift-link-chip,
#shiftPlansView .shift-worker-state {
  font-size: var(--shift-readable-meta);
  line-height: 1.4;
}

#shiftPlansView .shift-worker-actions button,
#shiftPlansView .shift-worker-actions summary,
#shiftPlansView .shift-project-admin-actions button,
#shiftPlansView .shift-project-admin-actions summary {
  min-height: 44px;
  padding-inline: 12px;
  font-size: var(--shift-readable-meta);
}

#shiftPlansView .shift-worker-actions details[open] > button,
#shiftPlansView .shift-project-admin-actions details[open] > button {
  top: 49px;
}

#shiftPlansView .shift-directory-footnote {
  padding-block: 12px;
  font-size: var(--shift-readable-meta);
  line-height: 1.4;
}

/* Bemanningsprosjekter: samme skala, rytme og handlingsbredde som personelloversikten. */
#shiftProjectsPanel .shift-project-form label > span {
  font-size: var(--shift-readable-meta);
  line-height: 1.35;
}

#shiftProjectsPanel .shift-project-form input,
#shiftProjectsPanel .shift-project-form select,
#shiftProjectsPanel .shift-project-form button {
  min-height: 44px;
  font-size: var(--shift-readable-body);
}

#shiftProjectsPanel .shift-project-columns {
  grid-template-columns:
    minmax(190px, 1.15fr)
    100px
    72px
    minmax(160px, .95fr)
    120px
    82px
    132px;
}

#shiftProjectsPanel .shift-project-admin-row > div:first-child strong {
  font-size: var(--shift-readable-body);
  line-height: 1.35;
}

#shiftProjectsPanel .shift-project-admin-row > div:first-child small,
#shiftProjectsPanel .shift-project-admin-row > span,
#shiftProjectsPanel .shift-project-admin-row > span b {
  font-size: var(--shift-readable-meta);
  line-height: 1.4;
}

#shiftProjectsPanel .shift-project-admin-actions {
  min-width: 132px;
}

#shiftProjectsPanel .shift-project-admin-actions button,
#shiftProjectsPanel .shift-project-admin-actions summary {
  white-space: nowrap;
}

#shiftProjectsPanel .shift-project-sidebar {
  gap: 12px;
}

#shiftProjectsPanel .shift-project-sidebar article {
  padding: 18px;
}

#shiftProjectsPanel .shift-project-sidebar h3 {
  font-size: var(--bs-text-16);
  line-height: 1.35;
}

#shiftProjectsPanel .shift-project-sidebar p {
  font-size: var(--shift-readable-meta);
  line-height: 1.55;
}

#shiftProjectsPanel .shift-project-sidebar button {
  min-height: 44px;
  font-size: var(--shift-readable-meta);
}

/* Ferieoppsett: samme sidehode, kontrollhøyde og tabellrytme som bemanningsoversikten. */
#shiftHolidaysPanel .shift-holiday-head .kicker {
  font-size: var(--shift-readable-overline);
  line-height: 1.35;
}

#shiftHolidaysPanel .shift-holiday-head h2 {
  font-size: var(--bs-text-22);
  line-height: 1.25;
}

#shiftHolidaysPanel .shift-holiday-head p:not(.kicker) {
  font-size: var(--shift-readable-meta);
  line-height: 1.55;
}

#shiftHolidaysPanel .shift-holiday-head-actions label > span,
#shiftHolidaysPanel .shift-holiday-form label > span {
  font-size: var(--shift-readable-meta);
  line-height: 1.35;
}

#shiftHolidaysPanel .shift-holiday-head-actions select,
#shiftHolidaysPanel .shift-holiday-head-actions button,
#shiftHolidaysPanel .shift-holiday-form input,
#shiftHolidaysPanel .shift-holiday-form select,
#shiftHolidaysPanel .shift-holiday-form button {
  min-height: 44px;
  font-size: var(--shift-readable-body);
}

#shiftHolidaysPanel .shift-holiday-months b {
  font-size: var(--bs-text-13);
  line-height: 1.3;
}

#shiftHolidaysPanel .shift-holiday-timeline-row {
  min-height: 68px;
}

#shiftHolidaysPanel .shift-holiday-timeline-row strong {
  font-size: var(--shift-readable-body);
  line-height: 1.35;
}

#shiftHolidaysPanel .shift-holiday-timeline-row small,
#shiftHolidaysPanel .shift-holiday-bar,
#shiftHolidaysPanel .shift-holiday-empty {
  font-size: var(--shift-readable-meta);
  line-height: 1.4;
}

#shiftHolidaysPanel .shift-holiday-bar {
  min-height: 40px;
}

#shiftHolidaysPanel .shift-holiday-section-head h3 {
  font-size: var(--bs-text-18);
  line-height: 1.35;
}

#shiftHolidaysPanel .shift-holiday-section-head p,
#shiftHolidaysPanel .shift-holiday-section-head .count {
  font-size: var(--shift-readable-meta);
  line-height: 1.45;
}

#shiftHolidaysPanel .shift-holiday-table-head {
  min-height: 44px;
  font-size: var(--bs-text-13);
  line-height: 1.3;
}

#shiftHolidaysPanel .shift-holiday-row {
  min-height: 64px;
}

#shiftHolidaysPanel .shift-holiday-row strong {
  font-size: var(--shift-readable-body);
  line-height: 1.35;
}

#shiftHolidaysPanel .shift-holiday-row small,
#shiftHolidaysPanel .shift-holiday-row > span,
#shiftHolidaysPanel .shift-holiday-row > span b {
  font-size: var(--shift-readable-meta);
  line-height: 1.4;
}

#shiftHolidaysPanel .shift-holiday-row > button {
  min-width: 44px;
  min-height: 44px;
  font-size: var(--shift-readable-meta);
}

/* Offisiell plan og reise beholder samme struktur, men følger skalaen. */
#shiftPlansView .shift-official-head p {
  font-size: var(--shift-readable-overline);
}

#shiftPlansView .shift-official-head h2 {
  font-size: var(--bs-text-22);
  line-height: 1.25;
}

#shiftPlansView .shift-official-head > div > span,
#shiftPlansView .shift-official-foot {
  font-size: var(--shift-readable-meta);
  line-height: 1.45;
}

#shiftPlansView .shift-travel-metrics span,
#shiftPlansView .shift-travel-metrics small,
#shiftPlansView .shift-travel-queue header span,
#shiftPlansView .shift-travel-queue header p,
#shiftPlansView .shift-travel-person span,
#shiftPlansView .shift-travel-person small,
#shiftPlansView .shift-travel-period span,
#shiftPlansView .shift-travel-period small,
#shiftPlansView .shift-travel-leg-overview strong,
#shiftPlansView .shift-travel-leg-overview small {
  font-size: var(--shift-readable-meta);
  line-height: 1.4;
}

#shiftPlansView .shift-travel-list-head {
  min-height: 44px;
  font-size: var(--bs-text-13);
}

/* Skjemaet for personell skal ha samme lesbarhet som oversikten. */
#shiftPlansView .shift-worker-editor-form header p,
#shiftPlansView .shift-worker-editor-fields label > span {
  font-size: var(--shift-readable-meta);
  line-height: 1.35;
}

#shiftPlansView .shift-worker-editor-form header h3 {
  font-size: var(--bs-text-22);
}

#shiftPlansView .shift-worker-editor-form header span {
  font-size: var(--shift-readable-meta);
  line-height: 1.45;
}

#shiftPlansView .shift-worker-editor-fields input,
#shiftPlansView .shift-worker-editor-fields select,
#shiftPlansView .shift-worker-editor-form > footer button {
  min-height: 44px;
  font-size: var(--shift-readable-body);
}

@media (max-width: 1360px) {
  #shiftHiredPanel .shift-hired-overview-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1250px) {
  #shiftWorkersPanel .shift-worker-columns,
  #shiftHiredPanel .shift-hired-columns,
  #shiftProjectsPanel .shift-project-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #shiftHiredPanel .shift-worker-actions,
  #shiftProjectsPanel .shift-project-admin-actions {
    min-width: 0;
  }
}

@media (max-width: 700px) {
  #shiftPlansView .shift-toolbar-view {
    width: 100%;
    flex-basis: auto;
  }

  #shiftWorkersPanel .shift-worker-columns,
  #shiftHiredPanel .shift-hired-columns,
  #shiftProjectsPanel .shift-project-columns {
    grid-template-columns: 1fr;
  }

  #shiftWorkersPanel .shift-directory-row > div:first-child {
    grid-column: 1;
  }

  #shiftPlansView .shift-directory-metrics span,
  #shiftPlansView .shift-directory-metrics small {
    font-size: var(--bs-text-13);
  }

  #shiftHolidaysPanel .shift-holiday-head,
  #shiftHolidaysPanel .shift-holiday-list-section {
    padding-inline: 18px;
  }
}