/* Calendar layout only. Shared visual roles live in forms.css. */
.calendar-page { min-width: 0; }
.calendar-page .titlebar { margin-bottom: 15px; }
.calendar-preview-label { color: var(--muted); font-size: 12px; }
.calendar-filters { display: flex; align-items: center; gap: 16px; padding: 16px; margin-bottom: 16px; }
.calendar-view-field { flex: 0 1 280px; }
.calendar-user-field { flex: 0 1 440px; }
.calendar-filters .floating-field { margin-top: 4px; min-width: 0; }
.calendar-filters .field select { height: 43px; font-size: 14px; padding-top: 10px; }
.calendar-filters .floating-field:has(>select)::after { top: 17px; }
.calendar-board { overflow: hidden; }
.calendar-month-bar { padding: 15px 18px; display: flex; gap: 16px; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.calendar-month-bar h2 { font-size: 21px; letter-spacing: -.3px; margin: 0; font-weight: 650; }
.calendar-nav { display: flex; gap: 7px; align-items: center; }
.calendar-nav button { min-width: 36px; height: 34px; padding: 5px 12px; }
.calendar-nav .calendar-arrow { display: grid; place-items: center; padding: 6px; }
.calendar-nav svg { width: 16px; height: 16px; }
.calendar-scroll { overflow-x: auto; }
.calendar-month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); min-width: 770px; }
.calendar-weekday { padding: 9px 12px; font-size: 12px; font-weight: 650; text-align: left; border-right: 1px solid #ffffff18; }
.calendar-cell { min-height: 126px; padding: 7px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.calendar-cell:nth-child(7n) { border-right: 0; }
.calendar-cell.weekend { background: var(--stripe); }
.calendar-cell.outside { background: light-dark(#edf1f5, #142130); }
.calendar-day-heading { display: flex; justify-content: flex-end; align-items: center; gap: 5px; margin: 0 0 4px; min-height: 26px; color: var(--text); font-size: 12px; font-weight: 600; }
.calendar-day-number { display: inline-grid; place-items: center; min-width: 26px; height: 26px; border-radius: 50%; }
.calendar-cell.outside .calendar-day-heading { color: var(--muted); font-weight: 400; }
.calendar-cell.today { box-shadow: inset 0 0 0 1px var(--blue); background: light-dark(#f4f9fe, #1b3249); }
.calendar-cell.today .calendar-day-number { background: #0968bd; color: #fff; font-weight: 700; }
.calendar-today-label { color: var(--blue); font-size: 10px; font-weight: 600; }
.calendar-item { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 5px; padding: 6px 7px; margin-bottom: 5px; background: light-dark(#eaf2fa, #2a4662); color: light-dark(#234a6c, #e1efff); border-left: 3px solid light-dark(#4688bd, #7cbcff); border-radius: 4px; min-width: 0; line-height: 1.35; }
.calendar-item.completed { background: light-dark(#ecf5f0, #1e4038); color: light-dark(#26583f, #cbf2df); border-left-color: light-dark(#519b71, #7dd7a3); }
.calendar-item strong, .calendar-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-item strong { grid-column: 1; grid-row: 1; font-size: 11px; font-weight: 650; }
.calendar-item small { grid-column: 1 / -1; grid-row: 2; font-size: 10px; opacity: .85; margin-top: 2px; }
.calendar-item time { grid-column: 2; grid-row: 1; font-weight: 400; font-size: 10px; white-space: nowrap; }
.calendar-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; }
.calendar-footer strong { color: var(--text); font-weight: 600; }
.calendar-footer .calendar-key { display: flex; align-items: center; gap: 7px; }
.calendar-key::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #4688bd; }
.calendar-footer.is-completed .calendar-key::before { background: #519b71; }
.calendar-empty { margin: 0; padding: 10px 16px; color: var(--muted); border-top: 1px solid var(--line); font-size: 12px; }
/* T2827: page content follows the width #content has (container "main", base.css), not the viewport; the @media copy keeps dialogs/menus outside #content on the viewport */
@container main (max-width:736px){
  .calendar-filters { gap: 12px; }
  .calendar-view-field { flex-basis: 240px; }
}
@media (max-width: 900px){.calendar-filters:where(:not(#content *)){ gap: 12px; }.calendar-view-field:where(:not(#content *)){ flex-basis: 240px; }}
@container main (max-width:576px){
  .calendar-filters { flex-direction: column; align-items: stretch; padding: 14px; }
  .calendar-view-field, .calendar-user-field { flex: auto; }
  .calendar-filters .field select { font-size: 16px; }
  .calendar-month-bar { padding: 12px; }
  .calendar-month-bar h2 { font-size: 18px; }
  .calendar-nav { gap: 4px; }
  .calendar-nav button { min-height: 38px; height: 38px; padding: 4px 8px; }
  .calendar-footer { flex-wrap: wrap; font-size: 11px; }
  .calendar-preview-label { font-size: 11px; }
}
@media (max-width: 600px){.calendar-filters:where(:not(#content *)){ flex-direction: column; align-items: stretch; padding: 14px; }.calendar-view-field:where(:not(#content *)),.calendar-user-field:where(:not(#content *)){ flex: auto; }.calendar-filters .field select:where(:not(#content *)){ font-size: 16px; }.calendar-month-bar:where(:not(#content *)){ padding: 12px; }.calendar-month-bar h2:where(:not(#content *)){ font-size: 18px; }.calendar-nav:where(:not(#content *)){ gap: 4px; }.calendar-nav button:where(:not(#content *)){ min-height: 38px; height: 38px; padding: 4px 8px; }.calendar-footer:where(:not(#content *)){ flex-wrap: wrap; font-size: 11px; }.calendar-preview-label:where(:not(#content *)){ font-size: 11px; }}

/* Status always overrides category. Labels carry the meaning without color. */
.calendar-filters { flex-wrap:wrap; }
.calendar-filters .field { flex:0 1 285px; }
.calendar-completed { margin-left:auto;display:flex;gap:8px;align-items:center; }
.calendar-overdue,.calendar-awaiting { margin-bottom:16px;overflow:hidden; }
.calendar-overdue header,.calendar-awaiting header { padding:12px 16px;background:var(--stripe);display:flex;align-items:center;gap:18px;flex-wrap:wrap; }
.calendar-overdue h2,.calendar-awaiting h2 { font-size:16px;margin:0; }
.calendar-overdue header p,.calendar-awaiting header p { margin:0;color:var(--muted);font-size:12px; }
.calendar-overdue h2 span,.calendar-awaiting h2 span { margin-left:7px; }
.calendar-overdue-items { display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:7px;padding:10px 14px;max-height:192px;overflow:auto; }
.calendar-legend { display:flex;gap:10px 18px;flex-wrap:wrap;margin:12px 0;color:var(--muted);font-size:11px; }
.calendar-legend-item { display:inline-flex;gap:6px;align-items:center; }
.calendar-legend-item::before { content:'';width:9px;height:9px;background:var(--event-border);border-radius:2px; }
.calendar-item { width:100%;text-align:left;height:auto;box-shadow:none;white-space:normal;background:var(--event-bg);color:var(--event-text);border:0;border-left:3px solid var(--event-border); }
.calendar-item:hover { background:var(--event-bg);filter:brightness(.97);box-shadow:0 0 0 1px var(--event-border); }
.calendar-item:focus-visible { outline:2px solid var(--blue);outline-offset:2px; }
.calendar-item small { grid-row:2; }
.calendar-item .calendar-event-context { grid-row:3; }
.calendar-item.tasks,.calendar-legend-item.tasks { --event-bg:light-dark(#eaf2fa,#29445d);--event-text:light-dark(#234a6c,#d7ebff);--event-border:#4688bd; }
.calendar-item.so,.calendar-legend-item.so { --event-bg:light-dark(#eeeafa,#393052);--event-text:light-dark(#57457e,#e6dafc);--event-border:#8c72bb; }
.calendar-item.ship,.calendar-legend-item.ship { --event-bg:light-dark(#f3e9f3,#48334c);--event-text:light-dark(#724674,#f0d7f2);--event-border:#a46ea7; }
.calendar-item.invoice,.calendar-legend-item.invoice { --event-bg:light-dark(#e8edf8,#2e3a55);--event-text:light-dark(#41537c,#d7e1ff);--event-border:#788dbe; }
.calendar-item.certificates,.calendar-legend-item.certificates { --event-bg:light-dark(#fff3da,#4a3e26);--event-text:light-dark(#7a5b20,#ffe6b5);--event-border:#c09636; }
.calendar-item.incoming,.calendar-legend-item.incoming { --event-bg:light-dark(#e2f3f1,#244a47);--event-text:light-dark(#24665f,#c7f3e9);--event-border:#3d9a8e; }
.calendar-item.outgoing,.calendar-legend-item.outgoing { --event-bg:light-dark(#e5f0fa,#263f59);--event-text:light-dark(#285c85,#d2eaff);--event-border:#4e91c9; }
.calendar-item.current,.calendar-legend-item.current { --event-bg:light-dark(#e9f5ed,#244b36);--event-text:light-dark(#28613c,#cef4dc);--event-border:#509567; }
.calendar-item.overdue,.calendar-legend-item.overdue { --event-bg:light-dark(#fcebec,#512d34);--event-text:light-dark(#962f3a,#ffd7db);--event-border:#cf616d; }
.calendar-item.completed,.calendar-legend-item.completed { --event-bg:light-dark(#edf0f2,#343f49);--event-text:light-dark(#68747e,#c6ccd3);--event-border:#939ea7;background:var(--event-bg);color:var(--event-text);border-left-color:var(--event-border); }
.calendar-nav [aria-pressed=true] { background:var(--blue);color:#fff;border-color:var(--blue); }
.calendar-nav [role=group] { display:flex;gap:4px;margin-right:8px; }
.calendar-day-grid { grid-template-columns:1fr;min-width:0; }
.calendar-day-grid .calendar-cell { min-height:280px; }
.calendar-day-grid .calendar-item { max-width:550px; }
.calendar-detail-lines { overflow:auto;margin-top:16px; }
.calendar-awaiting { margin-top:16px; }
@container main (max-width:676px){.calendar-month-bar{align-items:flex-start;flex-direction:column}.calendar-completed{margin-left:0}.calendar-overdue-items{max-height:220px}.calendar-nav{flex-wrap:wrap}.calendar-filters .field{flex:auto;width:100%}}
@media (max-width:700px){.calendar-month-bar:where(:not(#content *)){align-items:flex-start;flex-direction:column}.calendar-completed:where(:not(#content *)){margin-left:0}.calendar-overdue-items:where(:not(#content *)){max-height:220px}.calendar-nav:where(:not(#content *)){flex-wrap:wrap}.calendar-filters .field:where(:not(#content *)){flex:auto;width:100%}}

/* T2824 (Mike): calendar search, and on phones a compact month with a count bubble per day; tap a day to list its events */
.calendar-search-field { flex: 0 1 260px; }
.calendar-search-field input { height: 43px; font-size: 14px; padding-top: 12px; }
.calendar-matches { margin-bottom: 16px; }
.calendar-matches header { display: flex; align-items: baseline; gap: 12px; padding: 12px 16px 4px; flex-wrap: wrap; }
.calendar-matches h2 { font-size: 16px; margin: 0; }
.calendar-matches header p { margin: 0; color: var(--muted); font-size: 12px; }
.calendar-wd-short, .calendar-count, .calendar-agenda { display: none; }
@container calpage (max-width: 880px) {
  .calendar-search-field { flex: auto; width: 100%; }
  .calendar-search-field input { font-size: 16px; }
  .calendar-scroll { overflow: visible; }
  .calendar-month-grid:not(.calendar-day-grid) { min-width: 0; }
  .calendar-month-grid:not(.calendar-day-grid) .calendar-weekday { padding: 6px 0; text-align: center; border-right: 0; }
  .calendar-month-grid:not(.calendar-day-grid) .calendar-wd-long { display: none; }
  .calendar-month-grid:not(.calendar-day-grid) .calendar-wd-short { display: inline; }
  .calendar-month-grid:not(.calendar-day-grid) .calendar-cell { min-height: 0; aspect-ratio: 1 / 1; padding: 2px; display: grid; place-items: center; cursor: pointer; border-right: 1px solid var(--line); }
  .calendar-month-grid:not(.calendar-day-grid) .calendar-cell .calendar-item,
  .calendar-month-grid:not(.calendar-day-grid) .calendar-today-label { display: none; }
  .calendar-month-grid:not(.calendar-day-grid) .calendar-day-heading { flex-direction: column; justify-content: center; gap: 2px; margin: 0; min-height: 0; font-size: 13px; }
  .calendar-month-grid:not(.calendar-day-grid) .calendar-day-number { min-width: 24px; height: 24px; }
  .calendar-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--blue, #0968bd); color: #fff; font-size: 10px; font-weight: 700; line-height: 1; }
  .calendar-count.late { background: #c0392b; }
  .calendar-cell.outside .calendar-count { opacity: .6; }
  .calendar-cell.picked { box-shadow: inset 0 0 0 2px var(--blue, #0968bd); background: light-dark(#e7f1fb, #1d3a57); }
  .calendar-agenda { display: block; padding: 12px; border-top: 1px solid var(--line); }
  .calendar-agenda h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15px; }
  .calendar-agenda-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--group); font-size: 11px; }
  .calendar-agenda .calendar-item { margin-bottom: 7px; padding: 9px 10px; }
  .calendar-agenda .calendar-item strong { font-size: 13px; }
  .calendar-agenda .calendar-item small { font-size: 11px; }
  .calendar-agenda .calendar-empty { border-top: 0; padding: 4px 0; }
}
@container calpage (max-width: 880px) {
  /* phones: the month comes right after the filters; overdue and the legend follow it */
  .calendar-page > .titlebar { order: 0; } .calendar-page > .calendar-filters { order: 1; } .calendar-page > .calendar-matches { order: 2; }
  .calendar-page > .calendar-board { order: 3; margin-bottom: 16px; } .calendar-page > .calendar-overdue { order: 4; }
  .calendar-page > .calendar-legend { order: 5; } .calendar-page > .calendar-awaiting { order: 6; }
}
/* T2826: the compact layout follows the space the calendar has (narrow windows, sidebar open), not only phone widths */
.calendar-page { container: calpage / inline-size; display: flex; flex-direction: column; }
@container calpage (max-width: 880px) {
  .calendar-month-grid:not(.calendar-day-grid) .calendar-cell { aspect-ratio: auto; height: clamp(46px, 13cqi, 74px); }
}