/* Calendar (Erweiterung 1 + Erweiterung 2, docs/erweiterung-2-plan.md K1-K9) and calendar shares.
 * Page colours come from the variables and colour pairs of app.css (documented contrast).
 * Calendar colours come from the server, are validated as #rrggbb and set via CSSOM custom properties only:
 *   --occ-bg / --occ-fg / --occ-border  fill, text and border of an entry. --occ-fg is black or white, whichever has
 *                                       the higher WCAG contrast with --occ-bg (calendar-layout.js entryColors; every
 *                                       colour reaches >= 4.58:1 with one of the two, the palette >= 4.99:1).
 *   --cal-color                         swatches/dots (no text on them).
 * Everything inside an entry inherits --occ-fg, so no text sits on a colour it was not checked against. Status and
 * kind are always also shown as symbol + text (colour is never the only hint). */

/* ---------- toolbar, view switch, period ---------- */
.cal-toolbar { align-items: flex-end; }
.cal-jump { display: inline-flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; }
.cal-jump .field { margin: 0; }
.seg-views { gap: 2px; padding: 2px; border: 2px solid var(--c-primary); border-radius: calc(var(--radius) + 2px); background: var(--c-surface); }
.seg-views .seg { border-color: transparent; min-width: 4.75rem; }
.seg-views .seg[aria-pressed="true"] { background: var(--c-primary); color: var(--c-on-primary); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; }
.seg-views .seg[aria-pressed="false"] { font-weight: 400; }
.cal-nav .btn { font-size: 1.1rem; }
.range-label { font-size: 1.25rem; color: var(--c-text); margin: 0 0 .75rem; }

/* ---------- layout: side bar (selection + legend) and calendar ---------- */
.cal-layout { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) { .cal-layout { grid-template-columns: 14.5rem minmax(0, 1fr); } }
.cal-content { min-width: 0; }
.cal-side { min-width: 0; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 0 .75rem .25rem; }
.cal-side-summary { min-height: var(--tap); display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .5rem; cursor: pointer; font-weight: 700; color: var(--c-text); }
.cal-side-dots { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.cal-side-count { font-weight: 400; font-size: .9rem; color: var(--c-muted); }
.cal-side-body { padding-bottom: .5rem; }
.cal-side-h { font-size: 1rem; margin: .5rem 0 .25rem; }
.cal-toggles { border: 0; padding: 0; margin: 0 0 .5rem; min-width: 0; }
.cal-toggles legend { padding: 0; font-weight: 700; font-size: .95rem; }
.cal-toggle label { gap: .4rem; flex-wrap: nowrap; }
.cal-name { min-width: 0; flex: 1 1 auto; }
.legend-list li .cal-name { flex: 1 1 8rem; }
.cal-access { font-size: .85rem; }
.cal-dot { display: inline-block; flex: 0 0 auto; width: .8rem; height: .8rem; border-radius: 50%; background: var(--cal-color, #57606a); border: 1px solid rgba(0, 0, 0, .35); vertical-align: middle; }
.cal-dot-lg { width: 1.1rem; height: 1.1rem; border-radius: 4px; }
.cal-legend { margin: .25rem 0; }
.cal-legend summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; color: var(--c-primary); font-weight: 600; }
.legend-list { list-style: none; margin: .25rem 0 .5rem; padding: 0; display: grid; gap: .35rem; }
.legend-list li { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .9rem; }
.legend-sample { display: inline-block; min-width: 4.5rem; padding: .05rem .4rem; border-radius: 6px; border: 2px solid var(--occ-border, #57606a); background: var(--occ-bg, #57606a); color: var(--occ-fg, #fff); font-size: .8rem; font-weight: 700; }
.legend-cancelled { text-decoration: line-through; }
.cont-mark { font-style: italic; }
.cal-hint { margin-top: -.25rem; }
.cal-hint[hidden] { display: none; }
.cal-fixed { color: var(--c-muted); }
@media (min-width: 1000px) {
  .cal-side > .cal-side-summary { cursor: default; }
}

/* ---------- entries: full fill in the colour of the home calendar ---------- */
.cal-content .occ { border-bottom: 0; padding: 0; margin: 0 0 .3rem; }
.occ-btn.occ-fill { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; min-height: var(--tap); padding: .25rem .45rem; margin: 0;
  border: 2px solid var(--occ-border, #57606a); border-radius: 6px; background: var(--occ-bg, #57606a); color: var(--occ-fg, #ffffff);
  font: inherit; font-size: .9rem; line-height: 1.25; text-align: left; cursor: pointer; overflow: hidden; }
.occ-btn.occ-fill:hover { background: var(--occ-bg, #57606a); box-shadow: inset 0 0 0 2px var(--occ-fg, #ffffff); }
.occ-btn.occ-fill:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; box-shadow: inset 0 0 0 2px var(--occ-fg, #ffffff); }
.occ-fill * { color: inherit; }
.occ-head { display: flex; flex-wrap: wrap; gap: 0 .3rem; align-items: baseline; min-width: 0; }
.occ-head .time { flex: 0 1 auto; min-width: 0; font-variant-numeric: tabular-nums; }
.occ-head .time:empty { display: none; }
.occ-fill .occ-title { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.occ-sym { font-weight: 700; }
.occ-meta { display: flex; flex-wrap: wrap; gap: .15rem .25rem; margin-top: .15rem; font-size: .78rem; }
.occ-tag { border: 1px solid currentColor; border-radius: 999px; padding: 0 .35rem; line-height: 1.35; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.occ-loc { white-space: normal; border-style: dotted; }
.occ-warn { font-weight: 700; }
/* status (K8): open = lighter fill + dashed border + "?"; done = struck through + "✔"; confirmed = "✓" */
.occ-fill.st-open { border-style: dashed; border-width: 3px; }
.occ-fill.st-done .occ-title, .occ-fill.st-done .time { text-decoration: line-through; text-decoration-thickness: 2px; }
.occ-fill.st-confirmed { border-width: 3px; }
/* kinds: task blocks with a thick left bar and "☑ Aufgabe"; busy = dashed, anonymous; cancelled = struck through */
.occ-fill.occ-task { border-left-width: 7px; }
.occ-fill.occ-busy { border-style: dashed; }
.occ-fill.occ-busy .occ-title { font-weight: 600; }
.occ-fill.occ-cancelled .occ-title { text-decoration: line-through; }
.occ-fill.occ-continued .occ-title { font-style: italic; }
.legend-sample.st-open { border-style: dashed; }
.legend-sample.st-done { text-decoration: line-through; }
.legend-sample.occ-busy { border-style: dashed; }
.legend-sample.occ-task { border-left-width: 7px; }
.day-link { font-weight: 700; min-height: 44px; padding: .1rem 0; }
.week-card.is-today, .day-view.is-today { outline: 2px solid var(--c-primary); outline-offset: -2px; }

/* ---------- time grid (day / week, K3) ---------- */
.tg { --hour-h: 56px; --gutter: 4rem; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); min-width: 0; }
.tg-head, .tg-allday, .tg-body { display: grid; grid-template-columns: var(--gutter) repeat(var(--days, 7), minmax(0, 1fr)); }
.tg-head { border-bottom: 1px solid var(--c-border); background: var(--c-subtle); border-radius: var(--radius) var(--radius) 0 0; }
.tg-dayhead { text-align: center; min-width: 0; border-left: 1px solid var(--c-border); }
.tg-dayhead .day-link { width: 100%; justify-content: center; text-align: center; color: var(--c-primary); }
.tg-dayhead.is-today { background: var(--c-info-bg); box-shadow: inset 0 -3px 0 var(--c-primary); }
.tg-allday { border-bottom: 2px solid var(--c-border); }
.tg-label { font-size: .72rem; line-height: 1.2; color: var(--c-muted); padding: .25rem .2rem; overflow-wrap: normal; word-break: normal; hyphens: auto; }
.tg-allday-list { list-style: none; margin: 0; padding: .2rem; border-left: 1px solid var(--c-border); min-width: 0; font-size: .85rem; }
.tg-allday-list .occ { margin: 0 0 .2rem; }
.tg-allday-empty .tg-allday-list { padding: .1rem .2rem; }
.tg-body { position: relative; }
.tg-hours { display: flex; flex-direction: column; }
.tg-hour { height: var(--hour-h); font-size: .75rem; color: var(--c-muted); padding: 0 .25rem; text-align: right; transform: translateY(-.55em); }
.tg-hour:first-child { transform: none; }
.tg-col { position: relative; list-style: none; margin: 0; padding: 0; min-width: 0; height: calc(var(--hours) * var(--hour-h)); border-left: 1px solid var(--c-border);
  background-image: repeating-linear-gradient(to bottom, var(--c-border) 0, var(--c-border) 1px, transparent 1px, transparent var(--hour-h)); }
.tg-col.is-today { background-color: var(--c-info-bg); }
.tg-item { position: absolute; z-index: 1; top: calc(var(--top) * var(--hour-h) / 60); height: max(44px, calc(var(--len) * var(--hour-h) / 60));
  left: calc(var(--col) * 100% / var(--cols)); width: calc(100% / var(--cols)); padding: 1px 2px; }
.tg-item .occ-fill { height: 100%; min-height: 44px; padding: .15rem .3rem; font-size: .82rem; }
.tg-item .occ-meta { font-size: .72rem; }
.tg-item:focus-within { z-index: 3; }
.tg .occ-fill .occ-title, .tg .occ-fill .time { word-break: normal; overflow-wrap: break-word; hyphens: auto; }
.tg-single { --gutter: 4rem; }
.tg-single .tg-item .occ-fill { font-size: .9rem; }

/* ---------- smartphone week: day cards (K5) ---------- */
.week-cards { display: grid; gap: .5rem; }
.week-card { margin: 0; padding: .6rem .75rem; }
.week-card .day-head { margin: 0 0 .25rem; }

/* ---------- month grid (K2, K5) ---------- */
.month-table { width: 100%; table-layout: fixed; border-collapse: collapse; background: var(--c-surface); border: 1px solid var(--c-border); }
.month-table th { padding: .35rem .25rem; font-size: .9rem; color: var(--c-muted); background: var(--c-subtle); border-bottom: 1px solid var(--c-border); }
.month-table abbr { text-decoration: none; }
.m-cell { vertical-align: top; border: 1px solid var(--c-border); padding: .2rem; height: 8rem; min-width: 0; overflow: hidden; }
.m-out { background: var(--c-bg); }
.m-out .m-num { color: var(--c-muted); font-weight: 400; }
.m-out .m-entries { opacity: 1; }
.m-day { display: flex; align-items: center; gap: .25rem; width: 100%; min-height: 44px; padding: .1rem .25rem; background: none; border: 0; border-radius: 6px; font: inherit; color: var(--c-text); cursor: pointer; text-align: left; }
.m-day:hover { background: var(--c-info-bg); }
.m-num { font-weight: 700; min-width: 1.6rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.m-today .m-num { background: var(--c-primary); color: var(--c-on-primary); }
.m-dots { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; justify-content: center; }
.m-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--cal-color, #57606a); border: 1px solid rgba(0, 0, 0, .35); }
.m-dot-busy { background: transparent; border: 2px dashed var(--cal-color, #57606a); }
.m-count { font-size: .8rem; font-weight: 700; color: var(--c-text); }
.m-entries { margin: 0; }
.m-entries .occ { margin: 0 0 2px; }
.m-entries .occ-fill { min-height: 0; padding: .05rem .25rem; font-size: .78rem; line-height: 1.2; }
.m-entries .occ-head { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-entries .occ-head > span { display: inline; margin-right: .25rem; }
.m-entries .occ-title { white-space: nowrap; }
.m-entries .occ-meta { font-size: .68rem; margin-top: 0; flex-wrap: nowrap; overflow: hidden; }
.m-entries .occ-people, .m-entries .occ-warn { display: none; }
.m-more { min-height: 44px; padding: .1rem .2rem; font-size: .85rem; font-weight: 700; }

/* ---------- colour dialog (K6) ---------- */
.color-rows { display: grid; gap: .75rem; margin: .5rem 0; }
.color-row label { display: block; font-weight: 600; margin-bottom: .25rem; }
.color-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.color-controls input[type="color"] { width: 3.5rem; height: var(--tap); min-width: var(--tap); padding: 2px; border: 1px solid var(--c-border); border-radius: 6px; background: var(--c-surface); cursor: pointer; }
.color-sample { display: inline-flex; align-items: center; min-height: 2rem; padding: .2rem .6rem; border-radius: 6px; border: 2px solid var(--occ-border, #57606a); background: var(--occ-bg, #57606a); color: var(--occ-fg, #ffffff); font-weight: 700; }

/* ---------- smartphone (< 640 px) ---------- */
@media (max-width: 639.98px) {
  .seg-views { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .seg-views .seg { min-width: 0; padding: .5rem .25rem; }
  .cal-jump { width: 100%; }
  .range-label { font-size: 1.1rem; }
  .month-table th { padding: .25rem 0; font-size: .8rem; }
  .m-cell { height: 3.6rem; padding: 0; }
  .m-day { flex-direction: column; justify-content: flex-start; align-items: center; gap: .1rem; min-height: 3.5rem; height: 100%; padding: .15rem 0; border-radius: 0; text-align: center; }
  .m-day[aria-pressed="true"] { background: var(--c-info-bg); box-shadow: inset 0 0 0 3px var(--c-primary); }
  .m-num { min-width: 1.5rem; height: 1.5rem; font-size: .9rem; }
  .month-daylist { margin-top: .75rem; }
  .tg { --gutter: 3.25rem; }
  .tg-single { --gutter: 3.5rem; }
}

/* ---------- shares ---------- */
.share-intro p { margin: 0 0 .35rem; }
.share-intro p:last-child { margin: 0; }
.share-list { list-style: none; margin: 0; padding: 0; }
.share-row { margin: 0 0 .5rem; padding: .75rem; }
.share-who { margin: 0 0 .25rem; }
.share-actions { align-items: flex-end; }
.share-actions .field { margin: 0; }
.share-scopes .field-check { align-items: flex-start; }
.share-scopes input[type="radio"] { width: 1.4rem; height: 1.4rem; margin: .6rem 0 0; flex: 0 0 auto; accent-color: var(--c-primary); }
.share-scopes .hint { flex-basis: 100%; margin: -.4rem 0 .25rem 1.9rem; }
.share-scopes input[disabled] + label { color: var(--c-muted); cursor: not-allowed; }