/* ==========================================================================================
     COMPACT HEADER (<=1279px: phones, tablets, and small or rotated laptop/monitor windows)
     The three-column header above holds at these sizes too - only the account button changes shape.
     With its name and role, the brand + tabs + clock + account row needs about 1280px (measured);
     below that it wrapped to a second row (104px of header instead of 61px on a 1024x768 or 1280x800
     window), which pushed the calendar down and left the page scrolling by exactly that overflow. So
     from here down it's the monogram circle alone, and the tabs are centred in the column they share
     with the brand. */
  /* Below ~1150px the brand and the room tabs no longer fit in a column that still leaves the clock a
     symmetric one to centre in (measured: brand + three tabs need ~490px per side against a ~94px
     clock), and the strip was being clipped mid-word right where the clock began. So the header
     becomes two rows here - brand, clock and buttons above, the full-width tab strip below - which
     keeps the clock exactly centred and gives the tabs room to be centred in turn. */
  @media(max-width:1150px){
    header{grid-template-areas:"brand clock right" "tabs tabs tabs"}
    .hdr-left{display:contents}
    .hdr-brand{grid-area:brand}
    html.signed-in #headerClock{grid-area:clock}
    .hdr-right{grid-area:right}
    html.signed-in #tabs{grid-area:tabs; margin-left:0}
  }
  /* The same two rows, applied above 1150px when the one row turns out not to fit after all. The width
     alone can't tell: a deployment with more rooms, or a selected zone with a long city name, needs more
     than one measured at three rooms and a "94px" clock did - a portrait desktop at 1199px was clipping
     "Split view" off the tab strip. updateHeaderFit measures the strip and sets this class. The width query
     above stays as the guaranteed case, so phones and tablets don't depend on a script having run first. */
  html.hdr-stacked header{grid-template-areas:"brand clock right" "tabs tabs tabs"}
  html.hdr-stacked .hdr-left{display:contents}
  html.hdr-stacked .hdr-brand{grid-area:brand}
  html.hdr-stacked.signed-in #headerClock{grid-area:clock}
  html.hdr-stacked .hdr-right{grid-area:right}
  html.hdr-stacked.signed-in #tabs{grid-area:tabs; margin-left:0}
  @media(max-width:1279px){
    header{gap:8px 10px; padding:8px 12px}
    .theme-toggle,.icon-btn{width:34px; height:34px}
    .acct-btn{width:34px; height:34px; padding:0; justify-content:center;
      background:var(--accent); border-color:var(--accent)}
    .acct-name,.acct-badge,.acct-caret{display:none}
    /* !important because paintBadgeEl (support.js) toggles this element's visibility via an
       INLINE style.display - which, unlike every other rule here, always wins over a plain
       stylesheet rule regardless of specificity. Without it, the one case that matters most
       (an actual unread count > 0, right when paintBadgeEl sets display:inline-flex) is exactly
       the case this compact-mode rule would silently fail to override. */
    #acctHeaderBadge{display:none!important}
    .acct-mono-wrap{width:100%; height:100%}
    .acct-mono{font-size:12px; background:transparent}
    /* Centred in the space the brand leaves. Auto margins on the end tabs rather than
       justify-content:center, because when the strip does overflow they collapse to 0 and it scrolls
       from its left edge; centred overflow would push the first tab out of reach instead. */
    html.signed-in #tabs{margin-left:2px; gap:6px; -webkit-overflow-scrolling:touch}
    html.signed-in #tabs>:first-child{margin-left:auto}
    html.signed-in #tabs>:last-child{margin-right:auto}
  }

  /* ==========================================================================================
     FRONT DESK CHAT ON NARROW SCREENS (<=1000px)
     Above 1000px the agent panel is a column beside the calendar. Below it .layout stacks, so the
     panel landed underneath a viewport-height calendar: you had to scroll the entire grid past to
     reach it, and once there its 340px box spent most of that on the title, the suggestion chips and
     the input row - leaving the messages themselves the smallest part of the panel, scrolled and
     clipped. So here the panel collapses to just its title bar (still right under the calendar,
     still one tap away) and opens as a full-screen overlay where the messages get all the space and
     the input row sits at the bottom of the screen.
     Open, it's a near-screen-height block still in the page flow - not a fixed overlay - so scrolling
     up from it reveals the calendar and everything else with the conversation left open behind you.
     ========================================================================================== */
  @media(max-width:1000px){
    .agent{max-height:none}
    .agent-h{cursor:pointer}
    .agent-toggle{display:inline-flex; align-items:center; padding:5px 12px; border:1px solid var(--line);
      border-radius:999px; font-family:'Inter',system-ui,sans-serif; font-size:12px; font-weight:600; color:var(--muted)}
    .agent .chat,.agent .quick,.agent .inrow{display:none}
    /* Definite height (not a max-height) so the message list can flex to fill it and the input row
       lands at the bottom; scrolled to, that's the whole screen bar a sliver of the calendar above. */
    html.chat-open .agent{height:min(calc(100dvh - 24px), 620px)}
    html.chat-open .agent .chat,html.chat-open .agent .quick,html.chat-open .agent .inrow{display:flex}
    .agent-close-label{display:none}
    html.chat-open .agent-open-label{display:none}
    html.chat-open .agent-close-label{display:inline}
    /* One sideways-scrolling row of suggestions rather than three wrapped ones. */
    .quick{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none}
    .quick::-webkit-scrollbar{display:none}
    .chip{flex-shrink:0; font-size:12px; padding:8px 12px}
    .inrow{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
    .inrow input{font-size:16px; padding:11px}
    .inrow button{min-height:42px}
  }

  /* ==========================================================================================
     TOOLBAR SHAPE (measured against the calendar card, not the viewport)
     The five view buttons need ~640px at desktop sizing, and the middle-clock layout only ever hands
     the left column half of whatever is left over - so the group wrapped, splitting "Week view" and
     "Month view" onto a second line away from "Day(s) view". How much room it has depends on the card
     rather than the screen: the date picker column and, when it's enabled, the agent panel can leave
     the card ~490px wide on a 1024px monitor and ~810px wide on a 1440px one. Container queries ask
     the card directly, so one set of rules covers every combination of screen width, picker and agent
     panel - which viewport breakpoints could only ever approximate.
     Each threshold below is the measured width at which that shape stops fitting: the five buttons
     measure ~640px at desktop sizing and ~526px tightened, and the date nav ~181px beside them.
       card >= 861   buttons and date nav on one row, desktop button sizing (unchanged on wide screens)
       card >= 747   same one row, tightened buttons        (526 + 181 + gap + padding)
       card >= 600   buttons get a row of their own, date nav on the next
       card <  600   buttons stack two-and-three, date nav on the last row
     ========================================================================================== */
  @media(min-width:701px){
    .cal{container-type:inline-size}
    @container (max-width:861px){
      .cal-toolbar button{font-size:12px !important; padding:6px 9px !important}
      #daysViewDropdown{margin-left:6px !important}
    }
    /* Not enough width for the buttons and the date nav on one line even tightened: give the buttons the
       whole row and put the nav underneath, so the three view buttons stay together. */
    @container (max-width:747px){
      .cal-toolbar{gap:8px 10px; grid-template-columns:1fr; grid-template-areas:"left" "nav"}
      .cal-toolbar-left{grid-area:left}
      .cal-toolbar-nav{grid-area:nav}
    }
    /* Narrower than the five buttons themselves (a small window with both the date picker and the agent
       panel): they take two rows, split the way the phone toolbar splits them - the two actions, then
       the three views as equal thirds - rather than wrapping wherever they happen to run out. */
    @container (max-width:600px){
      .cal-toolbar{grid-template-columns:repeat(6,minmax(0,1fr));
        grid-template-areas:
          "newev newev newev  today  today  today"
          "daysv daysv weekv  weekv  monthv monthv"
          "nav   nav   nav    nav    nav    nav"}
      .cal-toolbar-left{display:contents}
      .cal-toolbar button{width:100%}
      #newEventBtn{grid-area:newev}
      #todayBtn{grid-area:today}
      #daysViewDropdown{grid-area:daysv; margin-left:0 !important}
      #daysBtn{justify-content:center}
      #weekBtn{grid-area:weekv}
      #monthBtn{grid-area:monthv}
      /* The date nav keeps its natural shape - the width:100% above is for the five stacked buttons,
         and would otherwise blow the two arrows up to full width and break the row apart. */
      .cal-toolbar-nav{grid-area:nav; flex-wrap:nowrap; justify-content:flex-end; gap:6px}
      .cal-toolbar-nav button{width:40px; flex-shrink:0}
      #monthDisplay{min-width:0 !important}
    }
  }
  /* Landscape phones and other short windows: height is the scarce axis here, so buy some back out of
     the paddings. */
  @media(min-width:701px) and (max-height:520px){
    /* Height is scarce enough here that the date nav is worth keeping beside the buttons rather than on a
       row of its own: the second row costs ~27px of a ~180px grid. The card is a little too narrow for the
       one-row shape at the sizing above (a landscape phone leaves ~710px once the picker has its column),
       so the buttons tighten further to buy it back - which is the trade this breakpoint exists to make.
       Below the threshold the two-row fallback still applies; the buttons would be unreadable otherwise. */
    @container (min-width:700px){
      .cal-toolbar{grid-template-columns:1fr auto; grid-template-areas:"left nav"}
      /* Still allowed to wrap: the one-row shape needs ~710px of card and this tier starts at 700, so in
         that 10px band the buttons take a second line rather than being clipped off the end. */
      .cal-toolbar-left{grid-area:left; gap:5px}
      .cal-toolbar-nav{grid-area:nav}
      .cal-toolbar button{font-size:11px !important; padding:5px 7px !important}
      .cal-toolbar-nav button{padding:5px 6px !important}
      #daysViewDropdown{margin-left:4px !important}
    }
    .cal-toolbar{padding:6px 8px; gap:6px 10px}
    .note{padding:5px 12px; font-size:10px}
    /* Month rows are only ~34px tall on a screen this short, which cut every booking chip down to a
       sliver of colour; trimming the cell padding and the day number leaves room for a readable one. */
    .month-cell{padding:3px 4px}
    .month-daynum{font-size:11px; margin-bottom:1px}
    .month-chip{font-size:9px; padding:1px 4px}
  }
  /* Up to 1000px .layout is a column with no height of its own (the agent panel sits below the
     calendar rather than beside it), so the calendar has to claim the viewport itself - it used to
     be a flat 600px, which left the bottom of the grid and its footnote scrolled off screen. */
  @media(min-width:701px) and (max-width:1000px){
    #mainApp{height:auto !important}
    /* flex:0 0 auto, not the inherited flex:1, or its 0% flex-basis would win over this height and
       the block would silently fall back to sizing itself from its content. */
    /* Exactly the screen below the header - see the phone block, and publishHeaderHeight for --hdr-h. */
    .calendar-container{flex:0 0 auto; height:max(280px, calc(100dvh - var(--hdr-h, 91px) - 16px))}
    .mini-cal{max-height:none}
  }

  /* A touch device wide enough to escape the tiers below - a big tablet, either way up - is still a
     tablet: its calendar fills the screen below the header and scrolls its hours inside itself, rather
     than being handed a desktop's height and stretching ten business hours down it. renderDaysGrid tests
     the same pointer to decide whether to stretch its rows. This is the one combination that reads as a
     desktop to the width tiers and to nothing else. */
  @media(min-width:1001px) and (pointer:coarse){
    .layout{height:auto}
    .calendar-container{height:max(280px, calc(100dvh - var(--hdr-h, 61px) - 16px))}
  }

  /* ==========================================================================================
     PHONES (<=700px)
     Nothing here fits a row of anything: the toolbar's five buttons and the header's brand + tabs
     each need the full width. Both become named grids, one row per group of related controls, with
     tap targets sized for a thumb rather than a mouse:
       header  : [logo][title][theme][account]  /  room-tab strip (scrolls sideways)
       toolbar : clock / [+ New Event][Today] / [Day(s)][Week][Month] / [<  date  >]
     ========================================================================================== */
  @media(max-width:700px){
    /* Same two-row header as above, just tighter - and the clock drops its seconds-width padding. */
    header{gap:8px; padding:8px 10px}
    .hdr-brand{gap:6px}
    .title{font-size:14px}
    html.signed-in #headerClock{font-size:11px; letter-spacing:.2px}
    /* Only the seconds are dropped here - they're the least useful part on a phone, and losing them buys
       enough of the header's first row for the city to stay. */
    .clock-seconds{display:none}
    .tab{font-size:12px; padding:8px 14px}

    /* Docked, full-bleed account sheet - see .modal-bg.sheet above. */
    .modal-bg.sheet{align-items:flex-end; padding:0}
    .modal-bg.sheet .modal{max-width:none; border-width:2px 0 0; border-radius:16px 16px 0 0;
      padding:14px 14px calc(14px + env(safe-area-inset-bottom)); max-height:88dvh}

    /* Height comes from the content (.calendar-container below sizes itself to the viewport): the
       inline 100dvh is measured from the top of the page, so keeping it here would leave a header's
       worth of empty scroll under every screen. */
    #mainApp{height:auto !important}
    .layout{padding:6px; gap:6px}
    /* Fills the screen below the header instead of a flat 600px, so month view needs no scrolling
       at all on a tall phone, and doesn't overshoot the viewport on a short one. A definite height
       rather than a minimum, because the day/week grid inside sizes itself with height:100% - left
       as a minimum it resolves to auto, and the grid then grows the whole page instead of scrolling
       inside itself, which both unpins the sticky day-name row and defeats the "open at the current
       hour" scroll in renderDaysGrid. */
    /* flex:0 0 auto, not the inherited flex:1, or the 0% flex-basis would win over this height and
       the block would silently fall back to sizing itself from its content. */
    /* The calendar is exactly the screen below the header: it fills it, so there's no dead strip under
       the card and no part of the card below the fold, and whatever of the day doesn't fit is reached by
       scrolling the grid inside itself (it opens at opening time, see renderDaysGrid). --hdr-h is measured
       rather than assumed - see publishHeaderHeight - because the header is two rows here and three on a
       narrow phone; the constant this replaces was 30px short in landscape, which left the footnote
       unreachable below the fold. 16px covers .layout's own padding, 280px floors it on a tiny screen. */
    .calendar-container{flex:0 0 auto; height:max(280px, calc(100dvh - var(--hdr-h, 91px) - 16px))}
    .cal{border-radius:12px}

    /* A full month grid costs ~220px of the ~520px the schedule itself has to work with here, so it
       becomes a collapsible panel that starts closed: closed, the strip still names the month and
       opens the month/year jump when tapped; the caret expands the grid to pick a day, which closes
       it again (see collapseMiniCalOnPhone). No max-height: the old 220px cap clipped the grid's
       last week mid-row whenever it was open.
       Opening it used to borrow its ~220px from .calendar-container's own fixed height above, so the
       schedule grid below (flex:1) shrank to make room - every row got shorter the moment you picked a
       date. Adding that same amount back here instead means the picker gets genuinely new page height
       (the schedule keeps the size it already had), which .layout (height:auto below 1000px - see
       calendar.css) just grows to fit and the page scrolls the rest, rather than squeezing it. */
    .calendar-container:has(.mini-cal:not(.collapsed)){height:calc(max(280px, calc(100dvh - var(--hdr-h, 91px) - 16px)) + 220px)}
    .mini-cal{max-height:none; padding:8px; border-radius:12px}
    .mini-cal.collapsed .mini-cal-grid{display:none}
    .mini-cal.collapsed .mini-cal-header{margin-bottom:0}
    /* Collapsed, the picker is one strip: month name (tap to jump to another month/year) plus the
       caret. Its own < > would only duplicate the toolbar's date nav a few pixels below. */
    .mini-cal.collapsed .mini-cal-header button:not(.mini-cal-toggle){display:none}
    /* The picker folds upwards here rather than sideways, so it's the vertical caret that shows. */
    .mini-cal-header .mini-cal-toggle{display:block; padding:6px 10px; font-size:12px; background:var(--paper); color:var(--muted)}
    .mini-cal-toggle .toggle-caret-v{display:inline}
    .mini-cal-toggle .toggle-caret-h{display:none}
    .mini-cal-header{margin-bottom:6px}
    .mini-cal-header button{padding:6px 12px; font-size:14px}
    .mini-cal-month{flex:1; font-size:14px} /* centres the month between < and >, caret at the end */
    .mini-cal-grid{margin-top:4px}
    .mini-cal-day-header{font-size:11px}
    .mini-cal-day{padding:6px 4px; font-size:12px; border-radius:6px}

    /* minmax(0,1fr), not 1fr: a plain 1fr floors each column at the min-content of whatever spans it,
       so "Month view" made its two columns wider than "Day(s) view" made theirs and the three view
       buttons came out different widths. With a 0 minimum the six columns are exactly equal, which
       makes the view switcher a proper thirds-and-halves segmented row. */
    .cal-toolbar{gap:7px; padding:8px;
      grid-template-columns:repeat(6,minmax(0,1fr));
      grid-template-areas:
        "newev newev newev  today  today  today"
        "daysv daysv weekv  weekv  monthv monthv"
        "nav   nav   nav    nav    nav    nav"}
    .cal-toolbar-left{display:contents}
    .cal-toolbar button{width:100%; min-height:40px; font-size:13px !important; padding:8px 6px !important}
    #newEventBtn{grid-area:newev}
    #todayBtn{grid-area:today}
    #daysViewDropdown{grid-area:daysv; margin-left:0 !important}
    #daysBtn{justify-content:center}
    #daysMenu{min-width:100% !important}
    #weekBtn{grid-area:weekv}
    #monthBtn{grid-area:monthv}
    /* Arrows pinned to the two ends with the label centered between them, so they never move as the
       label's width changes - the fixed min-width the desktop nav reserves for that isn't needed. */
    .cal-toolbar-nav{grid-area:nav; flex-wrap:nowrap; justify-content:space-between; gap:6px}
    .cal-toolbar-nav button{width:46px; flex-shrink:0; font-size:18px !important}
    #monthDisplay{flex:1; min-width:0 !important; font-size:15px !important}

    /* Seven columns across ~380px leaves each day ~48px, where "10:00-11:00 Pluragon" can only ever
       render as "1...". Show just the start time - the chip's colour already carries the company,
       and the full detail is one tap away in the booking details. */
    .month-chip{font-size:10px; padding:3px 4px; margin-bottom:3px; text-align:center}
    .month-chip .mc-rest{display:none}

    /* Split view: two 7-column grids side-by-side inside ~380px is unreadable, so the two rooms stack
       instead, each keeping the full width (see setupGridContainers). Each room is then given the whole
       grid area - flex-basis:100% of it - so it's the same table it is with split view off, and the
       second room sits directly below at that same size. #monthGrid is what scrolls between the two,
       which keeps the page itself one screen tall; the hours and days still scroll inside each room. */
    html.split-active #monthGrid{flex-direction:column !important; overflow-y:auto !important}
    /* min-height:0 or a flex item's automatic minimum size wins: the week grid's content is taller than
       the grid area, so the pane grew to fit the whole business day instead of holding it and scrolling. */
    html.split-active .split-col{flex:0 0 100%; min-height:0}

    .modal-bg{padding:10px}
    /* Full-width, thumb-sized dialog buttons (the >div wrappers are the Edit/Delete split buttons
       in the booking details modal). */
    .modal-actions button,.modal-actions>div{flex:1 1 auto; min-height:44px}
    .modal-actions>div>button{width:100%; min-height:44px}
    /* Kept from shrinking for the desktop row layout, so on a phone the role/reset/remove group
       runs off the edge of the panel instead of wrapping - give it a row of its own. */
    .au-row-actions{flex-shrink:1 !important; width:100%}
    /* renderWorkspaceRow/renderMyTenantsList's own info column (admin.js) - a fixed min-width
       (360-400px, so the URL+Copy row has real room to breathe on desktop before its own ellipsis
       truncation ever needs to kick in - see admin.js) is a hard floor a flex item won't shrink
       below no matter how narrow the actual screen gets, which is exactly what was pushing the
       whole row (URL text and the Copy button both) past a phone's edge instead of wrapping or
       truncating. !important is needed here specifically to beat that inline min-width - there's
       no other way to override an inline style from a stylesheet. */
    .ws-row-info{min-width:0 !important;}
    .field input,.field select{font-size:16px}
    /* Booking form: the zone's city is enough here - the offset is what makes the line long enough to
       crowd the heading it sits beside. */
    .tz-offset{display:none}
    .recur-box{padding:12px}
    .dow-circle{width:34px; height:34px}

    .agent{border-radius:12px}
  }
  /* Under ~400px the logo, the wordmark, the clock with its city, and the two buttons can't share the
     header's first row - something has to go, and the logo says the same thing the wordmark does. */
  @media(max-width:400px){
    .title{display:none}
  }