/* Calendar: tokens, the toolbar, month grid, time grid, agenda, chips and the editor. The colours come from the shared
 * ITpris theme (--sl-*, set by shared/theme/theme.js); the category colours below are fixed event colours. Nothing scrolls
 * sideways: at 390 px the agenda replaces the week and day views. */
:root {
  --bg: var(--sl-background, #0e0e10); --panel: var(--sl-surface, #17171b); --ink: var(--sl-text, #f1ede4);
  --panel-2: color-mix(in srgb, var(--panel) 88%, var(--ink)); --chip: color-mix(in srgb, var(--panel) 90%, var(--ink));
  --mute: color-mix(in srgb, var(--ink) 68%, transparent); --line: var(--sl-border, #2b2b33);
  --accent: var(--sl-accent, #a2fff6); --accent-ink: var(--sl-on-accent, #0e0e10); --danger: #c81e44;
  --focus: var(--accent); --today: color-mix(in srgb, var(--accent) 9%, transparent);
  --c-blue: #5b8cff; --c-green: #5fc97a; --c-amber: #f5b041; --c-red: #ff5d6c; --c-violet: #a78bfa; --c-teal: #2dd4bf; --c-pink: #f472b6; --c-grey: #9aa0a6;
}
/* The status red is lighter on the dark surfaces. */
:root[data-tlbx-theme="dark"], :root[data-tlbx-theme="lime"] { --danger: #ff4f6e; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.4 system-ui, sans-serif; }
body { min-height: 100vh; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.note { color: var(--mute); font-size: 13px; margin: 4px 0 10px; }
.empty { color: var(--mute); padding: 24px 0; text-align: center; }
.btn, .tb-btn, .seg button, .mo-more { background: var(--chip); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; cursor: pointer; font: inherit; }
/* The toolbar's buttons and fields are as tall as the shared header buttons (shared/ui/hbtn.css, 32 px). */
.toolbar .btn, .toolbar .seg button, .toolbar select { height: 32px; padding-top: 0; padding-bottom: 0; font-size: 14px; }
.toolbar .btn, .toolbar .seg button { padding-left: 10px; padding-right: 10px; }
#cZone { width: 190px; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn[hidden], .seg button[hidden] { display: none; }
.brand-mark { width: 26px; height: 26px; fill: var(--accent); }
.appname b { font-size: 16px; margin-right: 8px; }
.home-link { color: var(--mute); font-size: 13px; }
.local-badge { font-size: 12px; color: var(--mute); border: 1px solid var(--line); border-radius: 99px; padding: 2px 8px; }
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.toolbar h2 { font-size: 18px; margin: 0 8px 0 4px; flex: 1 1 auto; white-space: nowrap; }
.toolbar label { font-size: 13px; color: var(--mute); display: inline-flex; gap: 6px; align-items: center; }
.toolbar select, .ev-form select, .ev-form input, .ev-form textarea, .search { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font: inherit; max-width: 100%; }
.seg { display: inline-flex; }
.seg button { border-radius: 0; margin-left: -1px; }
.seg button:first-child { border-radius: 8px 0 0 8px; }
.seg button:last-child { border-radius: 0 8px 8px 0; }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.main { padding: 0 16px 24px; }
.msg { color: var(--danger); }
/* month */
.mo-head, .mo-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mo-dow { font-size: 12px; color: var(--mute); padding: 8px 4px; text-transform: capitalize; }
.mo-cell { min-height: 104px; border: 1px solid var(--line); padding: 4px; min-width: 0; overflow: hidden; cursor: pointer; }
.mo-cell.is-other { opacity: 0.8; }
.mo-cell.is-today { background: var(--today); }
.mo-num { font-size: 12px; color: var(--mute); margin-bottom: 2px; }
.is-today .mo-num { color: color-mix(in srgb, var(--accent) 75%, var(--ink, currentColor)); font-weight: 700; }
.mo-more { font-size: 11px; padding: 1px 6px; margin-top: 2px; border: none; background: none; color: var(--mute); }
/* chips */
.chip { display: flex; align-items: center; gap: 4px; font-size: 12px; border-radius: 5px; padding: 2px 5px; margin: 2px 0; background: color-mix(in srgb, var(--cc) 22%, transparent); border-left: 3px solid var(--cc); cursor: pointer; min-width: 0; overflow: hidden; }
.chip-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip .chk { margin: 0; flex: none; accent-color: var(--cc); }
.chip.is-task { border-left-style: dashed; }
.chip.dragging { opacity: 0.8; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); z-index: 3; }
.c-blue { --cc: var(--c-blue); } .c-green { --cc: var(--c-green); } .c-amber { --cc: var(--c-amber); } .c-red { --cc: var(--c-red); }
.c-violet { --cc: var(--c-violet); } .c-teal { --cc: var(--c-teal); } .c-pink { --cc: var(--c-pink); } .c-grey { --cc: var(--c-grey); }
/* time grid */
.tg { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel); }
.tg-head, .tg-allday { display: grid; grid-template-columns: 52px repeat(var(--cols), minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.tg-dh { font-size: 13px; padding: 8px 4px; text-align: center; color: var(--mute); }
.tg-dh.is-today { color: var(--accent); font-weight: 700; }
.tg-gut { font-size: 11px; color: var(--mute); padding: 4px; }
.tg-ad { min-height: 30px; padding: 3px; border-left: 1px solid var(--line); min-width: 0; }
.tg-scroll { overflow-y: auto; max-height: 70vh; }
.tg-body { display: grid; grid-template-columns: 52px repeat(var(--cols), minmax(0, 1fr)); position: relative; }
.tg-hours { position: relative; }
.tg-hour { position: absolute; left: 4px; transform: translateY(-6px); }
.tg-col { position: relative; border-left: 1px solid var(--line); min-width: 0;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 47px, var(--line) 47px, var(--line) 48px); }
.tg-block { position: absolute; margin: 0; align-items: flex-start; }
.tg-block .chip-t { white-space: normal; }
.tg-block .rz { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; cursor: ns-resize; }
/* Touch: an event a finger drags never scrolls the view or selects its text; the resize edge is 22 px for a finger */
.chip.can-drag { touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
@media (pointer: coarse) { .tg-block .rz { height: max(8px, var(--tlbx-hit-r, 22px)); } }
.tg-block.dragging { transition: none; }
.tg-now { position: absolute; left: 0; right: 0; border-top: 2px solid var(--danger); pointer-events: none; z-index: 2; }
/* agenda */
.ag-h { font-size: 14px; margin: 16px 0 6px; color: var(--mute); display: flex; gap: 8px; align-items: center; }
.ag-day.is-today .ag-h { color: var(--accent); }
.ag-today { font-size: 11px; border: 1px solid var(--accent); border-radius: 99px; padding: 0 6px; color: var(--accent); }
.ag-row { display: grid; grid-template-columns: 96px 1fr auto; gap: 10px; align-items: start; padding: 10px 12px; margin-bottom: 6px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--cc); border-radius: 8px; cursor: pointer; }
.ag-time { font-size: 13px; color: var(--mute); }
.ag-main { min-width: 0; }
.ag-main b { display: block; overflow-wrap: anywhere; }
.ag-sub { font-size: 12px; color: var(--mute); overflow-wrap: anywhere; }
.ag-row .chk { margin-top: 4px; }
/* editor and dialogs */
.ev-form, .ics-preview { display: grid; gap: 10px; min-width: min(420px, 80vw); }
.ev-form .field, .ics-preview .field { display: grid; gap: 4px; font-size: 13px; color: var(--mute); }
.ev-form .field.check { display: flex; gap: 8px; align-items: center; }
.ev-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.cal-side .ev-form { min-width: 0; width: auto; }   /* the editor in the day panel (js/ui/panel.js) */
.cal-side .ev-form select, .cal-side .ev-form input:not([type="checkbox"]), .cal-side .ev-form textarea { width: 100%; box-sizing: border-box; }
.ev-form textarea { width: 100%; resize: vertical; }
.ev-zones { margin: 0; font-size: 13px; }
.ics-list { list-style: none; padding: 0; margin: 0; max-height: 40vh; overflow: auto; }
.ics-row { display: grid; padding: 6px 0; border-bottom: 1px solid var(--line); }
.ics-warn { color: var(--mute); font-size: 13px; padding-left: 18px; }
.row-sub { color: var(--mute); font-size: 12px; }
/* phones: the toolbar wraps, the grid turns into the agenda, nothing scrolls sideways */
/* The select has its own label for screen readers; the words go when the toolbar would not fit on one row. */
@media (min-width: 641px) and (max-width: 1500px) { .tb-lbl { display: none; } }
@media (max-width: 640px) {
  .main { padding: 0 10px 20px; }
  .toolbar { padding: 8px 10px; }
  .toolbar h2 { flex-basis: 100%; order: -1; font-size: 16px; }
  #cZone { width: auto; flex: 1 1 0; min-width: 0; }
  .toolbar label:has(#cZone) { flex: 1 1 100%; }
  .toolbar .btn, .toolbar .seg button { padding-left: 8px; padding-right: 8px; }
  #cNew, #cImport, #cExport, #cConfig { flex: 1 1 auto; }
  .mo-cell { min-height: 62px; }
  .ev-form, .ics-preview { min-width: 0; width: min(92vw, 420px); }
}