/* Calendar Flow Phase 1 geometry layer.
   This file owns shared UI geometry and shell stability only. Calendar
   logical geometry, event placement, lanes, and link routing stay in app.js. */

:root {
  --cf-unit: 4px;

  --cf-space-1: 4px;
  --cf-space-2: 8px;
  --cf-space-3: 12px;
  --cf-space-4: 16px;
  --cf-space-5: 20px;
  --cf-space-6: 24px;
  --cf-space-8: 32px;
  --cf-space-10: 40px;
  --cf-space-12: 48px;

  --cf-line-thin: 1px;
  --cf-line-strong: 2px;
  --cf-line-grid-color: #dfe4ec;
  --cf-line-pane-color: #e5e7eb;

  --cf-menubar-h: 30px;
  --cf-toolbar-h: 44px;
  --cf-date-title-h: 26px;
  --cf-lane-header-h: 28px;
  --cf-date-header-h: calc(var(--cf-date-title-h) + var(--cf-lane-header-h));
  --cf-all-day-min-h: 30px;
  --cf-time-axis-w: 76px;

  --cf-sidebar-w: 310px;
  --cf-pane-min-w: 260px;
  --cf-pane-default-w: 360px;
  --cf-pane-max-w: 720px;
  --cf-pane-resizer-hit-w: 12px;

  --cf-hit-small: 24px;
  --cf-hit-normal: 32px;
  --cf-hit-resize: 16px;

  --cf-scroll-gutter: stable;

  --time-axis-width: var(--cf-time-axis-w);
  --date-title-height-v284: var(--cf-date-title-h);
  --lane-header-height-v284: var(--cf-lane-header-h);
  --header-height: var(--cf-date-header-h);
  --grid-line: var(--cf-line-grid-color);
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.app-menubar-v305 {
  flex: 0 0 var(--cf-menubar-h);
  height: var(--cf-menubar-h);
  position: relative;
  top: auto;
}

.layout {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  overflow: hidden;
  grid-template-columns: var(--cf-sidebar-w) minmax(0, 1fr) var(--diagram-pane-width-v296, var(--cf-pane-default-w));
}

.layout.diagram-pane-hidden-v296 {
  grid-template-columns: var(--cf-sidebar-w) minmax(0, 1fr) 0;
}

.layout.sidebar-hidden-v289 {
  grid-template-columns: minmax(0, 1fr) var(--diagram-pane-width-v296, var(--cf-pane-default-w));
}

.layout.sidebar-hidden-v289.diagram-pane-hidden-v296 {
  grid-template-columns: minmax(0, 1fr) 0;
}

.sidebar,
.workspace-wrap,
.workspace,
.calendar-canvas,
.diagram-pane-v296,
.diagram-pane-inner-v296 {
  min-height: 0;
}

.sidebar,
.calendar-body-viewport,
.diagram-pane-inner-v296,
.account-menu-popover-v316,
.lane-popover-v270,
.event-hover-card-v283,
.modal,
.tracking-modal-v305,
.activity-type-list-v305,
.tracking-trend-scroll-v305 {
  scrollbar-gutter: var(--cf-scroll-gutter);
}

.calendar-body-viewport,
.diagram-pane-inner-v296,
.sidebar {
  overscroll-behavior: contain;
}

.calendar-header-viewport,
.calendar-body-viewport {
  min-width: 0;
}

.workspace-toolbar {
  flex: 0 0 var(--cf-toolbar-h);
  height: var(--cf-toolbar-h);
}

.header-corner,
.all-day-label,
.calendar-body-viewport .time-axis {
  width: var(--cf-time-axis-w);
  min-width: var(--cf-time-axis-w);
  max-width: var(--cf-time-axis-w);
}

.calendar-sticky-header {
  width: max-content !important;
  min-width: 100%;
  grid-template-rows: var(--cf-date-header-h) var(--all-day-height);
}

.header-corner,
.days-header,
.day-header-cell.lane-aware-header-v270 {
  height: var(--cf-date-header-h);
  min-height: var(--cf-date-header-h);
}

.date-title-v270 {
  height: var(--cf-date-title-h);
  min-height: var(--cf-date-title-h);
  max-height: var(--cf-date-title-h);
}

.lane-header-row-v270 {
  height: var(--cf-lane-header-h);
  min-height: var(--cf-lane-header-h);
  max-height: var(--cf-lane-header-h);
}

.event-card,
.event-card .flow-shape-body,
.connector,
.resize-handle,
.route-handle-v270,
.diagram-pane-resizer-v296,
.diagram-resize-handle-v304 {
  box-sizing: border-box;
}

.event-card.link-target,
.link-selection-mode .event-card,
.event-card.event-focus-v286 .flow-shape-body,
.event-card.marquee-selected-v293 .flow-shape-body {
  outline-style: solid;
}

.connector {
  overflow: visible;
}

.connector::before {
  content: "";
  position: absolute;
  left: calc((10px - var(--cf-hit-small)) / 2);
  top: calc((10px - var(--cf-hit-small)) / 2);
  width: var(--cf-hit-small);
  height: var(--cf-hit-small);
  border-radius: 999px;
}

.resize-handle {
  min-height: var(--cf-hit-resize);
}

.diagram-pane-resizer-v296 {
  width: var(--cf-pane-resizer-hit-w);
  transform: translateX(calc(var(--cf-pane-resizer-hit-w) / -2));
}

@media (max-width: 760px) {
  .layout {
    height: auto;
    min-height: 0;
  }
}