/* The Events interface: on top of the HR lab's look (lab/05-hr/ui.css, .hr) and the CRM's (crm/crm.css, .crm), scoped to .events. */

.events { --st-inquiry: #8e8e93; --st-tentative: var(--orange); --st-definite: var(--accent); --st-live: var(--green); --st-closed: var(--indigo); }
.events .block { display: block; }
.events .bad { color: var(--red); font-weight: 600; }
.events .small { font-size: 12px; }
.events .hero-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.events .row-actions.start { justify-content: flex-start; align-items: center; margin-top: 10px; }
.events .row-actions .note { margin: 0; }
.events .group h2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.events .h-tools { display: flex; gap: 6px; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.events .list-group { padding: 14px 16px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--secondary); }
.events .link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; }
.events .link:hover { text-decoration: underline; }

/* Marks: an event by its kind, a space by its color, vendors and menus */
.events .mark { color: #fff; background: linear-gradient(160deg, var(--mk, var(--gray)), color-mix(in srgb, var(--mk, #636366) 70%, #000)); }
.events .mark .i { width: 55%; height: 55%; }
.events .mark.k-wedding, .events .mark.k-social { --mk: #e0569b; }
.events .mark.k-conference, .events .mark.k-training { --mk: var(--indigo); }
.events .mark.k-meeting { --mk: var(--accent); }
.events .mark.k-banquet, .events .mark.k-party { --mk: var(--orange); }
.events .mark.k-launch { --mk: #30b0c7; }
.events .mark.vendor { --mk: #a18cd1; }
.events .mark.menu { --mk: #e8743b; }

/* Needs you */
.events .task-icon.tone-red { background: var(--red); }
.events .task-icon.tone-orange { background: var(--orange); }
.events .task-icon.tone-accent { background: var(--accent); }
.events .task-icon.tone-green { background: var(--green); }

/* Bars: pipeline, occupancy, budget, pickup, checklist */
.events .bar { display: block; height: 10px; border-radius: 5px; background: var(--fill-2); overflow: hidden; }
.events .bar > span { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--accent), var(--indigo)); }
.events .bar > span.c-gray { background: var(--st-inquiry); }
.events .bar > span.c-orange { background: var(--orange); }
.events .bar > span.c-accent { background: var(--accent); }
.events .bar > span.c-green { background: var(--green); }
.events .bar > span.c-indigo { background: var(--indigo); }
.events .bar > span.c-red { background: var(--red); }
.events .mix { padding: 6px 0; }
.events .mix-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; grid-template-areas: "name bar amount" "name sub sub"; gap: 2px 12px; align-items: center; width: 100%; padding: 9px 16px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.events .mix-row:hover { background: var(--fill-2); }
.events .mix-row + .mix-row { border-top: 1px solid var(--hairline); }
.events .mix-name { grid-area: name; font-size: 14px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.events .mix-row .bar { grid-area: bar; }
.events .mix-row b { grid-area: amount; font-size: 13.5px; font-variant-numeric: tabular-nums; text-align: right; }
.events .mix-row small { grid-area: sub; color: var(--secondary); font-size: 12px; }

/* The week */
.events .agenda { padding: 4px 0; }
.events .ag-day + .ag-day { border-top: 1px solid var(--hairline); }
.events .ag-date { padding: 10px 16px 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--secondary); }
.events .ag-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 8px 16px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.events .ag-row:hover { background: var(--fill-2); }
.events .ag-time { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--secondary); }
.events .ag-what b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.events .ag-what small { display: block; color: var(--secondary); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Coming up */
.events .ev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.events .ev-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; text-align: left; border: 0; cursor: pointer; color: inherit; font: inherit; }
.events .ev-card small { color: var(--secondary); font-size: 12.5px; }
.events .lc-head { display: flex; align-items: center; gap: 10px; }
.events .lc-head b { flex: 1; font-size: 15px; min-width: 0; }
.events .lc-foot { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--secondary); }
.events .lc-foot b { color: var(--label); font-variant-numeric: tabular-nums; }

/* The event: tabs, tables with editable cells */
.events .seg.tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; margin: 22px 0 4px; max-width: 100%; scrollbar-width: none; }
.events .seg.tabs button { white-space: nowrap; }
.events .seg.tabs .n { margin-left: 4px; font-size: 11px; color: var(--secondary); }
.events .scroll-x { overflow-x: auto; }
.events .tt td { vertical-align: top; }
.events .tt .cell { width: 100%; min-width: 0; font: inherit; font-size: 13.5px; padding: 5px 8px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--label); }
.events .tt .cell:hover { border-color: var(--hairline); }
.events .tt .cell:focus { outline: none; border-color: var(--accent); background: var(--surface-2); }
.events .tt select.cell { border-color: var(--hairline); background: var(--surface-2); }
.events .tt .cell.sub { margin-top: 3px; font-size: 12.5px; color: var(--secondary); }
.events .tt .cell.num { text-align: right; font-variant-numeric: tabular-nums; max-width: 110px; margin-left: auto; display: block; }
.events .tt .cell.tiny { max-width: 72px; display: inline-block; }
/* Fixed proportions, so a narrow detail pane shrinks the cells instead of pushing columns out of sight. */
.events .tt.prog, .events .tt.orders, .events .tt.services { table-layout: fixed; width: 100%; min-width: 600px; }
.events .tt.prog th:nth-child(1) { width: 23%; } .events .tt.prog th:nth-child(2) { width: 29%; } .events .tt.prog th:nth-child(3) { width: 25%; }
.events .tt.prog th:nth-child(4) { width: 10%; } .events .tt.prog th:nth-child(5) { width: 10%; } .events .tt.prog th:nth-child(6) { width: 34px; }
.events .tt.orders th:nth-child(1) { width: 27%; } .events .tt.orders th:nth-child(2) { width: 20%; } .events .tt.orders th:nth-child(3) { width: 10%; }
.events .tt.orders th:nth-child(4) { width: 12%; } .events .tt.orders th:nth-child(5) { width: 12%; } .events .tt.orders th:nth-child(6) { width: 15%; } .events .tt.orders th:nth-child(7) { width: 34px; }
.events .tt.services th:nth-child(1) { width: 44px; } .events .tt.services th:nth-child(2) { width: 28%; } .events .tt.services th:nth-child(3) { width: 21%; }
.events .tt.services th:nth-child(4) { width: 14%; } .events .tt.services th:nth-child(5) { width: 13%; } .events .tt.services th:nth-child(6) { width: 17%; } .events .tt.services th:nth-child(7) { width: 34px; }
.events .tt.prog td, .events .tt.orders td, .events .tt.services td { padding-left: 6px; padding-right: 6px; }
.events .tt.prog .cell, .events .tt.orders .cell, .events .tt.services .cell { font-size: 12.5px; padding: 4px 6px; }
.events .tt .cell.num { max-width: none; }
.events .tt .clip { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.events .tt .btn.plain.small { padding: 4px 6px; font-size: 12.5px; white-space: normal; text-align: left; }
.events .tt tr.clash td { background: color-mix(in srgb, var(--red) 6%, transparent); }
.events .tt tr.late td { background: color-mix(in srgb, var(--orange) 8%, transparent); }
.events .tt tr.sub-row td { padding-top: 0; font-size: 12.5px; border-top: 0; }
.events .tt tr.sub-row .i { width: 14px; height: 14px; vertical-align: -2px; }
.events .tt tr.group-row td { background: var(--fill-2); font-size: 12px; font-weight: 600; color: var(--secondary); }
.events .tt tfoot td { font-size: 13.5px; border-top: 1px solid var(--hairline); }
.events .tt tfoot tr.total td { font-weight: 700; font-size: 15px; }
.events .tt .x, .events .checklist .x { background: none; border: 0; padding: 4px; cursor: pointer; color: var(--tertiary); border-radius: 6px; }
.events .tt .x:hover, .events .checklist .x:hover { color: var(--red); background: var(--fill-2); }
.events .tt .x .i { width: 16px; height: 16px; }
.events .tt .check { display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.events .tt .avatar.sm { width: 30px; height: 30px; }
.events .add-row { margin-top: 10px; background: var(--fill-2); box-shadow: none; }
.events .diet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; padding: 6px 0 4px; }
.events .diet-grid label { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12.5px; }
.events .diet-grid label.off span { color: var(--tertiary); text-decoration: line-through; }
.events .diet-grid input { width: 64px; font: inherit; font-size: 13px; padding: 4px 6px; border-radius: 7px; border: 1px solid var(--hairline); background: var(--surface-2); color: var(--label); text-align: right; }
.events .pay { display: flex; gap: 6px; align-items: center; }
.events .pay select { font: inherit; font-size: 13px; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--hairline); background: var(--surface-2); color: var(--label); }
.events .stay-links { display: flex; flex-wrap: wrap; gap: 4px 10px; }

/* Budget meter, pickup, checklist progress */
.events .budget-meter, .events .progress-card { padding: 14px 16px; margin-top: 18px; display: grid; gap: 8px; }
.events .bm-head { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.events .bm-head b { font-variant-numeric: tabular-nums; }
.events .budget-meter small, .events .progress-card small { color: var(--secondary); font-size: 12.5px; }
.events .bar.over > span { background: linear-gradient(90deg, var(--orange), var(--red)); }
.events .pickup { display: grid; grid-template-columns: minmax(80px, 200px) auto; gap: 10px; align-items: center; }

/* Checklist */
.events .checklist { padding: 4px 0; }
.events .ck { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 9px 16px; cursor: pointer; }
.events .ck + .ck { border-top: 1px solid var(--hairline); }
.events .ck input { width: 18px; height: 18px; accent-color: var(--green); margin: 0; }
.events .ck span { font-size: 14px; }
.events .ck small { color: var(--secondary); font-size: 12px; white-space: nowrap; }
.events .ck.done span { color: var(--secondary); text-decoration: line-through; }
.events .ck.late small { color: var(--red); font-weight: 600; }

/* Spaces: capacity by setup */
.events .cap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0; padding: 4px 0; }
.events .cap-grid label { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 10px 14px; font-size: 13.5px; }
.events .cap-grid label .i { width: 18px; height: 18px; color: var(--secondary); }
.events .cap-grid label.off span { color: var(--tertiary); }
.events .cap-grid input { width: 68px; font: inherit; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--hairline); background: var(--surface-2); color: var(--label); text-align: right; }

/* The calendar: the tape, a bar of tools, the function's panel */
.events .cal { display: flex; flex-direction: column; height: 100%; min-height: calc(100vh - 120px); }
.events .cal-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 14px 20px 10px; border-bottom: 1px solid var(--hairline); }
.events .cal-title { display: flex; align-items: baseline; gap: 12px; }
.events .cal-title h1 { margin: 0; font-size: 24px; }
.events .cal-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.events .cal-tools .chips { margin: 0 0 0 6px; }
.events .cal-tools .hint { margin: 0 0 0 6px; }
.events .chip.legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; background: var(--sw); }
.events .chip.legend:not(.on) .sw { opacity: 0.35; }
.events .st-inquiry { --sw: var(--st-inquiry); }
.events .st-tentative { --sw: var(--st-tentative); }
.events .st-definite { --sw: var(--st-definite); }
.events .st-live { --sw: var(--st-live); }
.events .st-closed { --sw: var(--st-closed); }
.events .cal-body { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.events .cal-body.has-panel { grid-template-columns: minmax(0, 1fr) 320px; }
.events .cal-panel { display: none; border-left: 1px solid var(--hairline); padding: 16px; overflow: auto; background: var(--surface); }
.events .cal-body.has-panel .cal-panel { display: block; }
.events .panel-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.events .panel-head h2 { margin: 6px 0 2px; font-size: 18px; }
.events .panel-head p { margin: 0; color: var(--secondary); font-size: 13px; }
.events .cal-panel .banner { margin-top: 10px; }
.events .ev-tape { min-height: 420px; height: calc(100vh - 210px); }

.events .vis-timeline { border: 0; font-family: inherit; font-size: 12.5px; }
.events .vis-panel.vis-top, .events .vis-panel.vis-left, .events .vis-panel.vis-center, .events .vis-panel.vis-bottom, .events .vis-labelset .vis-label { border-color: var(--hairline); }
.events .vis-labelset .vis-label, .events .vis-time-axis .vis-text { color: var(--label); }
.events .vis-time-axis .vis-text.vis-minor { color: var(--secondary); }
.events .vis-time-axis .vis-grid.vis-minor { border-color: var(--hairline); }
.events .vis-time-axis .vis-grid.vis-saturday, .events .vis-time-axis .vis-grid.vis-sunday { background: rgba(127, 127, 127, 0.05); }
.events .vis-current-time { background: var(--red); width: 2px; }
.events .vis-labelset .vis-label .vis-inner { padding: 8px 10px; }
.events .vis-label.lane-part .vis-inner { padding-left: 22px; }
.events .lane-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.events .lane-name::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.events .lane-cap { margin-left: 6px; font-size: 11px; color: var(--secondary); }
.events .vis-item.evbar { --c: var(--st-definite); border-radius: 6px; border: 1px solid color-mix(in srgb, var(--c) 70%, transparent); background: color-mix(in srgb, var(--c) 22%, var(--surface)); color: var(--label); padding: 0; }
.events .vis-item.evbar .vis-item-content { display: flex; align-items: center; width: 100%; box-sizing: border-box; padding: 3px 10px; overflow: hidden; }
.events .vis-item.evbar .bar-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.events .vis-item.evbar.st-inquiry { --c: var(--st-inquiry); border-style: dashed; background: color-mix(in srgb, var(--c) 10%, var(--surface)); }
.events .vis-item.evbar.st-tentative { --c: var(--st-tentative); border-style: dashed; }
.events .vis-item.evbar.st-live { --c: var(--st-live); }
.events .vis-item.evbar.st-closed { --c: var(--st-closed); opacity: 0.65; }
.events .vis-item.evbar.clash { box-shadow: inset 0 0 0 2px var(--red); }
.events .vis-item.evbar.mine { box-shadow: 0 0 0 2px var(--c); }
.events .vis-item.evbar.focused, .events .vis-item.evbar.vis-selected { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); border-color: var(--accent); }
.events .vis-item.evbar.shadow { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 12%, transparent) 0 6px, transparent 6px 12px); border-style: dotted; color: var(--secondary); }
.events .vis-item.evbar.vis-editable { cursor: grab; }
.events .vis-item.evbar .vis-drag-left, .events .vis-item.evbar .vis-drag-right { width: 10px; cursor: ew-resize; }

/* The event order (BEO), on screen and printed */
.events .beo { font-size: 13.5px; color: var(--label); }
.events .beo header { display: flex; justify-content: space-between; gap: 16px; border-bottom: 2px solid var(--label); padding-bottom: 10px; margin-bottom: 12px; }
.events .beo header small { color: var(--secondary); text-transform: uppercase; letter-spacing: 0.05em; font-size: 11px; }
.events .beo h1 { margin: 2px 0; font-size: 20px; }
.events .beo h2 { margin: 0; font-size: 15px; font-weight: 500; }
.events .beo-state { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.events .beo table { width: 100%; border-collapse: collapse; }
.events .beo .kv th { text-align: left; font-weight: 600; color: var(--secondary); width: 14%; padding: 4px 8px 4px 0; font-size: 12px; vertical-align: top; }
.events .beo .kv td { padding: 4px 12px 4px 0; vertical-align: top; }
.events .beo .notes { margin: 10px 0; padding: 8px 10px; background: var(--fill-2); border-radius: 8px; }
.events .beo-fn { border-top: 1px solid var(--hairline); padding: 10px 0; break-inside: avoid; }
.events .beo-fn h3 { margin: 0; font-size: 15px; }
.events .beo-fn .where { margin: 2px 0 6px; color: var(--secondary); }
.events .beo-fn h4 { margin: 8px 0 2px; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--secondary); }
.events .beo-fn ul { margin: 0; padding-left: 18px; }
.events .beo-fn li small { display: block; color: var(--secondary); font-size: 12px; }
.events .beo .totals { width: auto; margin: 12px 0 0 auto; }
.events .beo .totals th { text-align: right; padding: 3px 14px 3px 0; font-weight: 500; color: var(--secondary); }
.events .beo .totals td { text-align: right; font-variant-numeric: tabular-nums; }
.events .beo .totals tr.total th, .events .beo .totals tr.total td { font-weight: 700; color: var(--label); border-top: 1px solid var(--hairline); }
.events .beo .signs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.events .beo .signs span { border-top: 1px solid var(--label); padding-top: 4px; font-size: 12px; color: var(--secondary); text-align: center; }
.events.sheet h3 { margin: 18px 0 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--secondary); }
.events.sheet h3:first-child { margin-top: 0; }
.events.sheet .rows > button { width: 100%; }
body.print-beo { background: #fff; color: #000; padding: 24px; --label: #000; --secondary: #555; --hairline: #ccc; --fill-2: #f3f3f3; }
@media print { body.print-beo { padding: 0; } }

/* Grid cells may shrink below their content, or a phone scrolls sideways. */
.events .stats > *, .events .columns > *, .events .ev-grid > * { min-width: 0; }

@media (max-width: 720px) {
  .events .page.wide { padding-left: 16px; padding-right: 16px; }
  .events .mix-row { grid-template-columns: 96px minmax(0, 1fr) auto; }
  .events .ev-grid { grid-template-columns: 1fr; }
  .events .ag-row { grid-template-columns: 76px minmax(0, 1fr); }
  .events .ag-row .pill { display: none; }
  .events .cal-bar { padding: 10px 16px; }
  .events .cal-tools .hint { display: none; }
  .events .cal-body.has-panel { grid-template-columns: minmax(0, 1fr); }
  .events .cal-body.has-panel .cal-panel { position: absolute; inset: auto 0 0 0; max-height: 60%; border-left: 0; border-top: 1px solid var(--hairline); box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12); z-index: 5; }
  .events .beo .signs { grid-template-columns: 1fr; }
}