/* Working views on laptop screens. Keep browser zoom, forms and print intact. */
@media screen {
  html .calendar-week-link {
    min-width: 44px;
    min-height: 44px;
    padding: 4px 8px;
    border: 1px solid var(--fliq8-control);
    background: var(--fliq8-selected);
    color: var(--fliq8-text);
    cursor: pointer;
  }
  html #calendarView .calendar-period-row { position: relative; flex-wrap: wrap; }
  html #calendarView .calendar-period-row h2 { margin: 0 auto 0 0; }
  html .calendar-context-details { margin: 0; }
  html .calendar-context-content {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 10;
    width: min(100%, 1000px);
    max-height: 60dvh;
    overflow: auto;
    padding: 16px;
    border: 1px solid var(--fliq8-control);
    border-radius: 8px;
    background: var(--fliq8-surface);
    box-shadow: var(--fliq-ui-depth);
  }
  html .calendar-context-details > summary {
    min-height: 44px;
    padding: 12px;
    cursor: pointer;
    color: var(--fliq8-secondary);
    font-size: 14px;
    font-weight: 600;
  }
}
@media screen and (min-width: 981px) and (max-width: 1600px) {
  html .topbar { height: 64px; }
  html .topbar .product-link img { width: 220px; height: 40px; }
  html .primary-nav { top: 64px; padding-block: 4px; }
  html .primary-nav a { padding-inline: 12px; font-size: 14px; }
  html #mainContent { padding-top: 16px; }
  html #calendarView .page-heading { flex-wrap: wrap; }
  html #calendarView .page-heading > div:first-child { flex: 1 1 480px; }
  html #calendarView .page-actions { flex: 0 1 560px; gap: 8px; }
  html #calendarView .page-actions .button { font-size: 14px; }
  html #calendarView .calendar-toolbar { padding: 8px 12px; margin-bottom: 8px; }
  html #calendarView .calendar-period-row { margin-block: 12px 8px; }
  html #calendarView .calendar-period-row h2 { font-size: 20px; }
  html #calendarView .calendar-kpis article { min-height: 64px; padding: 8px 12px; }
  html #calendarView .calendar-kpis strong { font-size: 24px; margin-top: 4px; }
}

/* Allocate the remaining window height to the complete calendar grid.
   Long lists scroll inside their day/month; dates and navigation stay visible.
   Reflow at narrow widths / zoom keeps normal document scrolling. */
@media screen and (min-width: 981px) and (min-height: 700px) {
  html body:has(#calendarView:not([hidden])) { height: 100dvh; display: flex; flex-direction: column; }
  html body:has(#calendarView:not([hidden])) > .hub-legal-footer { flex: none; padding-block: 0; font-size: 12px; }
  html .app-shell:has(#calendarView:not([hidden])) {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  html .app-shell:has(#calendarView:not([hidden])) > :is(.topbar, .primary-nav) { flex: none; }
  html #mainContent:has(#calendarView:not([hidden])) {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-block: 8px;
  }
  html #calendarView:not([hidden]) {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  html #calendarView > :not(#trainingTimeline) { flex: none; }
  html #calendarView .calendar-toolbar label { display: flex; align-items: center; gap: 8px; }
  html #calendarView .calendar-toolbar label > span { font-size: 12px; }
  html #calendarView .calendar-toolbar label > select { width: auto; }
  html #trainingTimeline { flex: 1; min-height: 0; }
  html #trainingTimeline:is(.week-view, .month-view) { display: flex; flex-direction: column; }
  html #trainingTimeline .calendar-weekdays { flex: none; }
  html #trainingTimeline .calendar-days { flex: 1; min-height: 0; grid-auto-rows: minmax(0, 1fr); }
  /* A sparse week follows its entries instead of filling the window.
     Keep flex shrinking so dense days still scroll within the available space. */
  html #trainingTimeline.week-view { flex: 0 1 auto; }
  html #trainingTimeline.week-view .calendar-days { flex: 0 1 auto; }
  html #trainingTimeline .calendar-day {
    min-height: 0;
    padding: 4px 8px;
    display: flex;
    flex-direction: column;
  }
  html #trainingTimeline .calendar-day-heading { flex: none; font-size: 13px; }
  html #trainingTimeline .calendar-day-units {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    align-content: start;
    grid-auto-rows: max-content;
    margin-top: 4px;
    padding: 4px;
    scrollbar-width: thin;
  }
  html #trainingTimeline.month-view .calendar-day { padding-block: 0; }
  html #trainingTimeline.year-view { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 8px; }
  html #trainingTimeline .year-month { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
}

/* Shared tab heading: the approved calendar arrangement at every desktop width. */
.hub-page-brand { display: block; }
.hub-page-brand img { display: block; width: 100%; height: auto; }
.hub-page-brand .hub-logo-dark { display: none; }
[data-theme="dark"] .hub-page-brand .hub-logo-light { display: none; }
[data-theme="dark"] .hub-page-brand .hub-logo-dark { display: block; }
@media screen {
  html #mainContent .view > .page-heading {
    padding-block: 4px 8px;
    margin-bottom: 8px;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }
  html #mainContent .view > .page-heading > div:first-child {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    align-items: center;
    column-gap: 16px;
    min-width: 0;
    max-width: 100%;
    flex: 1 1 480px;
  }
  html #mainContent .page-heading :is(.planiq-page-brand, .raceiq-page-brand, .hub-page-brand) {
    grid-column: 1;
    grid-row: 1;
    width: 160px;
    margin: 0;
    padding: 8px;
  }
  html #mainContent .page-heading h1 {
    grid-column: 2;
    grid-row: 1;
    font-size: 28px;
    line-height: 1.18;
    margin: 0;
    max-width: none;
    text-wrap: initial;
    overflow-wrap: anywhere;
  }
  html #mainContent .page-heading > div:first-child > .eyebrow { display: none; }
  html #mainContent .page-heading .supporting {
    grid-column: 1 / -1;
    font-size: 14px;
    margin-block: 8px 0;
    line-height: 1.5;
  }
  html #mainContent .page-heading > div:first-child > .status-pill { grid-column: 1 / -1; justify-self: start; }
}
@media screen and (max-width: 980px) {
  html #mainContent .view > .page-heading { align-items: stretch; }
  html #mainContent .view > .page-heading > div:first-child { flex: none; width: 100%; }
}
@media screen and (max-width: 620px) {
  html #mainContent .view > .page-heading > div:first-child {
    flex: none;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 8px;
  }
  html #mainContent .page-heading h1 { grid-column: 1; grid-row: 2; }
}
@media print {
  .hub-page-brand { display: none; }
}