/* ==========================================================================
   app.css — screen-level composition.

   Three workspace layouts serve all four pages, so every screen inherits the
   same responsive engine:

     .layout-quad   2x2 panel grid        (Hotel Management, Package SPO)
     .layout-lr     master left + stack   (B2B Contract Groups, Flight Declare)
     .layout-stack  master over detail    (Hotel Contracts list)

   Below 1200px all three collapse to "master + tabbed detail", and below
   768px to a drill-down. That transformation lives in responsive.css.
   ========================================================================== */

/* ==========================================================================
   1. QUAD LAYOUT — four related panels reading as one workspace
   ========================================================================== */
/* Two stacked rows rather than one 2x2 grid. A single grid shares its column
   tracks between both rows, which would force one divider position on the
   whole screen; an operator wants more width for Periods and more width for
   Rooms at the same time, so each row owns its own boundary.

   .panel-row is the row; .split-pair (layout.css) makes its boundary
   draggable. Below 1200px the rows become display:contents so the four panels
   rejoin the collapsed flex flow untouched — the same trick .detail-stack
   already uses on the left/right layout. */
.tab-panel.layout-quad {
  display: flex;
  flex-direction: column;
  gap: var(--tn-gap-panel);
  flex: 1 1 auto;
  min-height: 0;
}

.panel-row {
  display: flex;
  gap: var(--tn-gap-panel);
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
}

.layout-quad > .panel,
.layout-quad > .panel-row > .panel {
  min-height: 0;
  min-width: 0;
}

.layout-quad > .detail-tabs {
  display: none;
}

/* Optional emphasis: the master row is taller than the supporting row */
.layout-quad--weighted > .panel-row:first-of-type {
  flex: 1.05 1 0;
}

/* ==========================================================================
   2. LEFT/RIGHT LAYOUT — dominant master grid + stacked detail panes
   ========================================================================== */
.tab-panel.layout-lr {
  display: flex;
  flex-direction: row;          /* .tab-panel defaults to column */
  gap: var(--tn-gap-panel);
  flex: 1 1 auto;
  min-height: 0;
}

/* The left/right layout is a resizable pair in its own right: the master grid
   on one side, the stack of detail panes on the other. .split-pair supplies
   the widths, so only the default proportion is declared here. */
.layout-lr {
  --tn-split: 46%;
}

.layout-lr > .panel--master {
  min-width: 0;
}

.detail-stack {
  display: flex;
  flex-direction: column;
  gap: var(--tn-gap-panel);
  min-width: 0;
  min-height: 0;
}

.detail-stack > .panel {
  flex: 1 1 0;
  min-height: 0;
}

/* The legs panel is a short reference list; prices need the room */
.detail-stack > .panel--short {
  flex: 0 0 auto;
  max-height: 40%;
}

.layout-lr > .detail-tabs,
.layout-stack > .detail-tabs {
  display: none;
}

/* ==========================================================================
   3. STACK LAYOUT — master grid spanning the top, two panes underneath
   ========================================================================== */
.tab-panel.layout-stack {
  display: grid;
  grid-template-columns: 46fr 54fr;
  grid-template-rows: minmax(0, 46fr) minmax(0, 54fr);
  gap: var(--tn-gap-panel);
  flex: 1 1 auto;
  min-height: 0;
}

.layout-stack > .panel--master {
  grid-column: 1 / -1;
}

/* Reservation Monitor used to weight this grid 70/30 for a master list over
   two detail panels. The Passengers and Products panels were removed, so the
   screen is a single panel in a plain .tab-panel and the variant that
   weighted the split — and the measurements behind it — went with them. */

.layout-stack > .panel {
  min-width: 0;
  min-height: 0;
}

/* ==========================================================================
   3b. THE DOCUMENT WORKSPACE — E-Mail Template

     Fields  │  metadata · toolbar · document

   Two panels, not a dialog laid into a page. The left column is the
   merge-field library and it does not scroll away: the workspace scrolls
   nothing, the DOCUMENT does, which is what keeps a field within reach at
   the bottom of a long letter.

   That is also why nothing here is positioned against the viewport. The
   field library is a flex child of .workspace-body, so it is bounded by the
   topbar and the sidebar the same way every other panel is; a position:fixed
   column would be correct once and wrong at every other width and in every
   scrolled state.

   Below 1200px the workspace becomes one column and the field library
   becomes a sheet — see responsive.css.
   ========================================================================== */
.mail-workspace {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: var(--tn-gap-panel);
  flex: 1 1 auto;
  min-height: 0;
}

.mail-fields {
  min-height: 0;
}

.mail-fields > .panel__body {
  padding: var(--tn-pad-panel);
}

.mail-editor {
  min-width: 0;
  min-height: 0;
}

/* The editor's own body does not scroll: the metadata row and the toolbar
   are fixed to the top of the panel and only the canvas under them moves.
   An operator who has scrolled to the foot of a long letter can still reach
   Bold without scrolling back up for it. */
.mail-editor__body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* The Fields command in the panel head is the way back to the library on a
   narrow screen. On desktop the library is already on screen beside the
   document, so the command only moves focus into it. */
.mail-editor__fields {
  flex: 0 0 auto;
}

/* ==========================================================================
   3c. THE EVEN PANEL ROW — two working panels of equal weight

     Page Content  |  Content                          (CMS Example)

   .panel-row on its own is a row whose children take their width from
   somewhere else: in the quad layouts that is the draggable .split-pair
   boundary, which sets the first panel's width and lets the second have the
   rest. This modifier is the other case — neither panel is the master of the
   other, there is no boundary to drag, and the two simply halve the row.

   The halves are flex fractions, not widths. The row is whatever the
   workspace hands it, so the columns are 817px each at 1920 and 638px each
   at 1366 without a single viewport being named here.

   Below 1200px two working columns are two cramped columns, so the row
   stacks — in responsive.css, with the rest of the breakpoint behaviour.
   ========================================================================== */
.panel-row--even > .panel {
  flex: 1 1 0;
  min-width: 0;
}

/* In a scrolling document workspace every panel carries its own bottom
   margin (layout.css). Inside a row that margin belongs to the ROW: left on
   the panels it would both push whatever follows the row down by a gap too
   many and — because only the last child clears it — leave the two columns
   10px different in height under a stretch that is supposed to make them
   equal. */
.workspace-body--doc .panel-row {
  margin-bottom: var(--tn-gap-panel);
}

.workspace-body--doc .panel-row > .panel { margin-bottom: 0; }
.workspace-body--doc .panel-row:last-child { margin-bottom: 0; }

/* ==========================================================================
   4. MOBILE DRILL-DOWN CHROME (visibility controlled in responsive.css)
   ========================================================================== */
.drill-bar {
  align-items: center;
  gap: var(--tn-sp-4);
  flex: 0 0 auto;
  padding: var(--tn-sp-3) var(--tn-sp-5);
  background: var(--tn-surface);
  border-bottom: 1px solid var(--tn-border);
}

.drill-bar__back {
  display: inline-flex;
  align-items: center;
  gap: var(--tn-sp-2);
  min-height: var(--tn-h-touch);
  padding: 0 var(--tn-sp-3) 0 0;
  background: none;
  border: 0;
  color: var(--tn-text-link);
  font-family: inherit;
  font-size: var(--tn-fs-base);
  font-weight: var(--tn-fw-medium);
  cursor: pointer;
}

.drill-bar__title {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
  line-height: 1.2;
}

.drill-bar__hotel {
  color: var(--tn-text);
  font-size: var(--tn-fs-base);
  font-weight: var(--tn-fw-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drill-bar__sub {
  color: var(--tn-text-muted);
  font-size: var(--tn-fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-panes {
  gap: var(--tn-sp-1);
  flex: 0 0 auto;
  padding: 0 var(--tn-sp-5);
  background: var(--tn-surface);
  border-bottom: 1px solid var(--tn-border);
  overflow-x: auto;
  scrollbar-width: none;
}

.mobile-panes::-webkit-scrollbar {
  display: none;
}

.mobile-pane {
  flex: 1 0 auto;
  min-height: var(--tn-h-touch);
  padding: 0 var(--tn-sp-5);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--tn-text-secondary);
  font-family: inherit;
  font-size: var(--tn-fs-base);
  font-weight: var(--tn-fw-medium);
  white-space: nowrap;
  cursor: pointer;
}

.mobile-pane.is-active {
  border-bottom-color: var(--tn-accent);
  color: var(--tn-accent);
  font-weight: var(--tn-fw-semibold);
}

/* ==========================================================================
   5. HOME PAGE — an operational analytics dashboard

   Twelve columns, and each block declares the span it wants. That is what
   lets Workspaces be a genuinely NARROW column (3 of 12) while the analytics
   beside it keep the other nine, without a single fixed pixel width to
   re-tune at every breakpoint.

   The dashboard is taller than the viewport by design, so it — and not the
   shell — is what scrolls. The top bar and the page header stay exactly
   where they are, which is the whole point of an operations shell.
   ========================================================================== */
.tab-panel.home-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: min-content;
  align-content: start;
  gap: var(--tn-gap-panel);
  flex: 1 1 auto;
  min-height: 0;
  padding-right: var(--tn-sp-1);   /* breathing room beside the scrollbar */
  overflow-y: auto;
  overflow-x: hidden;
}

/* Every dashboard block is a panel, so it inherits the surface, the border
   and the elevation the rest of the application already uses. */
.home-grid > * {
  min-width: 0;
}

/* --- the KPI strip: full width, its own auto-fit inside ----------------- */
.home-grid > .home-kpis {
  grid-column: 1 / -1;
  background: none;
  border: 0;
  box-shadow: none;
}

/* --- rows 2-3: the two trends, with Workspaces and the arrivals rail
       either side. Upcoming is the only two-row block, and it is the one
       with enough rows to fill two. Workspaces takes a single row so its
       four links fill it rather than floating in a tall empty column. --- */
.home-grid > .panel--screens   { grid-column: span 3; }
.home-grid > .home-trend       { grid-column: span 6; }
.home-grid > .home-upcoming    { grid-column: span 3; grid-row: span 2; }
.home-grid > .home-source      { grid-column: span 3; }
.home-grid > .home-revenue     { grid-column: span 6; }

/* --- row 4: four equal analysis panels --------------------------------- */
.home-grid > .home-status      { grid-column: span 3; }
.home-grid > .home-destinations{ grid-column: span 3; }
.home-grid > .home-roomtype    { grid-column: span 3; }
.home-grid > .home-pace        { grid-column: span 3; }

/* --- row 5: growth beside the quarterly columns ------------------------ */
.home-grid > .home-growth      { grid-column: span 6; }
.home-grid > .home-quarters    { grid-column: span 6; }

/* --- row 6: the existing activity grid, unchanged ---------------------- */
.home-grid > .home-activity    { grid-column: 1 / -1; }

/* The two headline trends get the most room; the quarterly columns need
   less because seven bars read at any height. */
.home-trend .chart-plot,
.home-revenue .chart-plot  { height: 196px; }
.home-quarters .chart-plot { height: 150px; }

.home-activity .panel__body { min-height: 220px; }

/* The Workspaces panel is narrow now, so its rows lose the description and
   tighten up rather than wrapping into four-line blocks. */
.panel--screens .screen-link {
  min-height: 54px;
  padding: var(--tn-sp-4) var(--tn-sp-5);
  gap: var(--tn-sp-4);
}

.panel--screens .screen-link__icon {
  width: 30px;
  height: 30px;
  font-size: var(--tn-fs-lg);
}

.panel--screens .screen-link__title { font-size: var(--tn-fs-md); }

.panel--screens .screen-link__text {
  font-size: var(--tn-fs-xs);
  line-height: 1.35;
}

.screen-list {
  display: flex;
  flex-direction: column;
}

.screen-link {
  display: flex;
  align-items: center;
  gap: var(--tn-sp-5);
  min-height: 62px;
  padding: var(--tn-sp-5) var(--tn-sp-6);
  border-bottom: 1px solid var(--tn-grid-border);
  color: inherit;
  text-decoration: none;
  transition: background var(--tn-dur-fast) var(--tn-ease);
}

.screen-link:hover,
.screen-link:focus-visible {
  background: var(--tn-grid-row-hover);
  outline: none;
}

.screen-link:focus-visible {
  box-shadow: inset 0 0 0 2px var(--tn-accent);
}

.screen-link__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: 1px;
  width: 36px;
  height: 36px;
  background: var(--tn-accent-soft);
  border: 1px solid var(--tn-accent-border);
  border-radius: var(--tn-radius-md);
  color: var(--tn-accent);
  font-size: var(--tn-fs-xl);
}

.screen-link__body {
  flex: 1 1 auto;
  min-width: 0;
}

/* Both are spans inside a blockified flex child, so without an explicit
   display they render on ONE line — "Hotel ManagementContract prices...".
   The title owns its own line and the description sits under it. */
.screen-link__title {
  display: block;
  color: var(--tn-text);
  font-size: var(--tn-fs-base);
  font-weight: var(--tn-fw-semibold);
  line-height: 1.3;
}

.screen-link__text {
  display: block;
  margin-top: 2px;
  color: var(--tn-text-secondary);
  font-size: var(--tn-fs-md);
  line-height: 1.4;
}

.screen-link__go {
  flex: 0 0 auto;
  align-self: center;
  color: var(--tn-text-muted);
  font-size: var(--tn-fs-lg);
  transition: transform var(--tn-dur-fast) var(--tn-ease),
              color var(--tn-dur-fast) var(--tn-ease);
}

/* A small, restrained affordance: the chevron leans in on hover. */
.screen-link:hover .screen-link__go,
.screen-link:focus-visible .screen-link__go {
  transform: translateX(2px);
  color: var(--tn-accent);
}

/* The original Key-figures block. Operations Home now leads with the richer
   .metric-card strip, but this stays a shared component: it is the compact
   form, and nothing else has to change to use it. */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--tn-sp-5);
  padding: var(--tn-pad-panel);
}

.stat {
  display: flex;
  flex-direction: column;
  padding: var(--tn-sp-6) var(--tn-sp-5);
  background: var(--tn-surface-sunken);
  border: 1px solid var(--tn-border);
  border-radius: var(--tn-radius-md);
}

/* Reserving two lines keeps every value on the same baseline, whether the
   label wraps ("ACTIVE CONTRACTS") or not ("PACKAGE SPOS"). */
.stat__label {
  display: block;
  min-height: 32px;
  color: var(--tn-text-secondary);
  font-size: var(--tn-fs-xs);
  font-weight: var(--tn-fw-semibold);
  letter-spacing: var(--tn-tracking-caps);
  line-height: 1.3;
  text-transform: uppercase;
}

.stat__value {
  display: block;
  margin-top: var(--tn-sp-1);
  color: var(--tn-text);
  font-size: 26px;
  font-weight: var(--tn-fw-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.stat__delta {
  display: inline-flex;
  align-items: center;
  gap: var(--tn-sp-2);
  margin-top: var(--tn-sp-3);
  font-size: var(--tn-fs-xs);
  line-height: 1.3;
  white-space: nowrap;
}

.stat__delta .bi {
  font-size: var(--tn-fs-sm);
  line-height: 1;
}

.stat__delta--up   { color: var(--tn-success); }
.stat__delta--down { color: var(--tn-danger); }
.stat__delta--flat { color: var(--tn-text-muted); }

/* ==========================================================================
   6. UTILITIES
   ========================================================================== */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nowrap {
  white-space: nowrap;
}

/* ==========================================================================
   7. PRINT — see css/print.css

   This file used to hold a print block that hid the sidebar, the toolbar and
   the panel controls and then let the browser print the application. It is
   gone, and deliberately: printing the running screen is what the shared
   export layer replaced. Print now builds a real document from the report
   model — #printDoc — and under @media print the whole .app-shell is
   display:none, which supersedes every rule this block had.

   There is one print stylesheet, and it is css/print.css.
   ========================================================================== */