/* ============================================================
   calendar-dash.css — v16 calendar dashboard
   Week/month calendar (Box 3), today timeline (Box 1),
   FAB speed-dial (Box 2), AI file-drop overlay + proposals.
   All colors come from design tokens in variables.css.
   ============================================================ */

.ws-dash-body--cal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 20px;
  align-items: start;
}
.ws-dash-body--cal .ws-dash-main,
.ws-dash-body--cal .ws-dash-aside { min-width: 0; }

/* ── Calendar card (Box 3) ── */

.ws-cal-card {
  position: relative;
  background: var(--surface-elevated);
  border: 1px solid rgba(10, 37, 54, 0.08);
  border-radius: 14px;
  overflow: hidden;
}

.ws-cal-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(10, 37, 54, 0.08);
}
.ws-cal-toolbar__nav { display: flex; align-items: center; gap: 8px; }
.ws-cal-navbtn {
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid rgba(10, 37, 54, 0.12); background: var(--surface-elevated);
  color: var(--brand-navy); font-size: 16px; line-height: 1; cursor: pointer;
}
.ws-cal-navbtn:hover { background: rgba(10, 37, 54, 0.05); }
.ws-cal-today {
  height: 30px; padding: 0 12px; border-radius: 8px;
  border: 1px solid rgba(10, 37, 54, 0.12); background: var(--surface-elevated);
  color: var(--brand-navy); font-size: 0.8125rem; font-weight: 600; cursor: pointer;
}
.ws-cal-today:hover { background: rgba(10, 37, 54, 0.05); }
.ws-cal-range { font-size: 0.9375rem; font-weight: 700; color: var(--brand-navy); margin-left: 6px; }

.ws-cal-toolbar__modes {
  display: inline-flex; border: 1px solid rgba(10, 37, 54, 0.12);
  border-radius: 8px; overflow: hidden;
}
.ws-cal-mode {
  height: 30px; padding: 0 14px; border: none; background: var(--surface-elevated); cursor: pointer;
  font-size: 0.8125rem; font-weight: 600; color: var(--brand-navy);
}
.ws-cal-mode + .ws-cal-mode { border-left: 1px solid rgba(10, 37, 54, 0.12); }
.ws-cal-mode.is-active { background: var(--brand-navy); color: var(--surface-canvas); }

.ws-cal-grid { overflow-x: auto; }
.ws-cal-loading { padding: 40px; text-align: center; font-size: 0.875rem; color: var(--text-muted, rgba(10, 37, 54,0.55)); }

/* ── Week view ── */

.ws-week-head,
.ws-week-allday,
.ws-week-body { display: grid; grid-template-columns: 56px repeat(7, minmax(76px, 1fr)); min-width: 640px; }

.ws-week-head { border-bottom: 1px solid rgba(10, 37, 54, 0.08); }
.ws-week-gutterhead {
  font-size: 0.625rem; color: var(--text-muted, rgba(10, 37, 54,0.5));
  display: flex; align-items: flex-end; justify-content: center; padding: 4px 2px;
}
.ws-week-dayhead {
  padding: 8px 4px 6px; text-align: center;
  border-left: 1px solid rgba(10, 37, 54, 0.06);
}
.ws-week-dayhead__dow {
  display: block; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted, rgba(10, 37, 54,0.55));
}
.ws-week-dayhead__num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 28px; margin-top: 2px; border-radius: 50%;
  font-size: 0.9375rem; font-weight: 700; color: var(--brand-navy);
}
.ws-week-dayhead.is-today .ws-week-dayhead__num { background: var(--brand-gold); color: var(--surface-canvas); }

.ws-week-allday { border-bottom: 1px solid rgba(10, 37, 54, 0.08); }
.ws-week-allday__cell {
  min-height: 26px; padding: 3px 3px;
  border-left: 1px solid rgba(10, 37, 54, 0.06);
  display: flex; flex-direction: column; gap: 3px;
}

.ws-week-scroll { max-height: 540px; overflow-y: auto; }
.ws-week-gutter { position: relative; }
.ws-week-hour {
  position: relative; font-size: 0.625rem; color: var(--text-muted, rgba(10, 37, 54,0.5));
}
.ws-week-hour span { position: absolute; top: -6px; right: 6px; background: var(--surface-elevated); padding: 0 2px; }

.ws-week-col {
  position: relative;
  border-left: 1px solid rgba(10, 37, 54, 0.06);
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(10, 37, 54, 0.05) 0, rgba(10, 37, 54, 0.05) 1px,
    transparent 1px, transparent 48px
  );
  cursor: crosshair;
}
.ws-week-col.is-today { background-color: rgba(51, 86, 109, 0.035); }

/* Event chips (week + all-day) — clean rounded-square tiles. Colour coding
   (wine outline = matter, grey outline = meeting, navy/red = deadline) rides
   on the chipClass() modifier below; the icon swatch repeats the same accent
   so the category reads instantly even on very short tiles. */
.ws-cal-chip {
  display: flex; flex-direction: column; gap: 3px;
  text-align: left; cursor: pointer;
  border: 1px solid rgba(10, 37, 54, 0.05);
  background: var(--brand-gold-soft);
  color: var(--brand-navy);
  border-radius: 12px; font-size: 0.71875rem; font-weight: 600;
  padding: 7px 8px 6px; line-height: 1.3;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(10, 37, 54, 0.05);
  transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.15s ease, filter 0.12s ease;
}
.ws-cal-chip--timed { position: absolute; left: 3px; right: 3px; z-index: 2; white-space: normal; }
.ws-cal-chip--allday { width: 100%; flex-direction: row; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 10px; white-space: nowrap; }
/* No flex-grow here by default — on a tall tile (a long meeting), growing
   this row would stretch it to fill the tile and vertically centre the
   icon+title within it, pushing the time down to the bottom edge instead of
   keeping everything anchored at the top. The sm/compact row-layout tiers
   below re-declare flex-grow for their own single-row layout. */
.ws-cal-chip__row { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.ws-cal-chip__icon {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 6px;
  background: var(--brand-gold-deep); color: var(--surface-canvas);
}
.ws-cal-chip__title {
  min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-weight: 700;
}
.ws-cal-chip__time { font-weight: 600; opacity: 0.72; font-size: 0.65625rem; padding-left: 26px; flex-shrink: 0; white-space: nowrap; }
.ws-cal-chip--allday .ws-cal-chip__time { padding-left: 0; }

/* Compact tiers — short timed slots collapse the icon/time so text never
   overflows a 20–30 px block; taller slots keep the full "rounded square"
   card with icon + title + time. */
.ws-cal-chip--sm { flex-direction: row; align-items: center; gap: 6px; padding: 4px 8px; }
.ws-cal-chip--sm .ws-cal-chip__icon { display: none; }
.ws-cal-chip--sm .ws-cal-chip__row { flex: 1 1 auto; min-width: 16px; }
.ws-cal-chip--sm .ws-cal-chip__time { padding-left: 0; opacity: 0.6; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ws-cal-chip--compact { flex-direction: row; align-items: center; padding: 3px 7px; }
.ws-cal-chip--compact .ws-cal-chip__row { flex: 1 1 auto; min-width: 0; }
.ws-cal-chip--compact .ws-cal-chip__icon,
.ws-cal-chip--compact .ws-cal-chip__time { display: none; }

.ws-cal-chip--deadline { background: rgba(10, 37, 54, 0.07); }
.ws-cal-chip--deadline .ws-cal-chip__icon { background: var(--brand-navy); }
.ws-cal-chip--deadline.ws-cal-chip--hot { background: var(--status-danger-soft); }
.ws-cal-chip--deadline.ws-cal-chip--hot .ws-cal-chip__icon { background: var(--status-danger); }
/* Colour coding — wine: tied to a matter · warm grey: general meeting
   (no matter attached). Applies to week chips, month pills and the Today
   agenda alike. Both categories share the same neutral white-grey tile
   fill; only the outline + icon carry the accent colour, so the calendar
   reads as a single tint with a category-coloured border, not a solid
   colour wash. */
.ws-cal-chip--matter  { background: #f4f4f5; border: 1.5px solid #5a0334; }
.ws-cal-chip--matter .ws-cal-chip__icon  { background: #5a0334; }
.ws-cal-chip--meeting { background: #f2e9d8; border: 1.5px solid #5c575a; }
.ws-cal-chip--meeting .ws-cal-chip__icon { background: #5c575a; }
.ws-cal-chip--ai { outline: 1.5px dashed var(--brand-gold); outline-offset: -1.5px; }
/* A canceled event is struck through on the grid, matching the Today agenda */
.ws-cal-chip.is-canceled, .ws-cal-pill.is-canceled {
  opacity: 0.55;
  text-decoration: line-through;
  text-decoration-color: var(--status-danger);
  text-decoration-thickness: 1.5px;
}
.ws-cal-chip:hover { filter: brightness(0.97); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(10, 37, 54, 0.12); }
.ws-cal-chip--timed:hover { transform: translateY(-1px); }
/* The tile behind an open popover — a quiet ring, not a colour override, so
   the event keeps its own category colour while reading as "selected". */
.ws-cal-chip.is-active {
  box-shadow: 0 0 0 2px var(--brand-navy), 0 8px 18px rgba(10, 37, 54, 0.18);
  transform: translateY(-1px);
  z-index: 6;
}

/* Drag-to-create ghost — shown while dragging out a new event's span on an
   empty week column; mirrors the rounded-tile language so the preview reads
   as "this is about to become a tile". */
.ws-cal-dragcreate {
  position: absolute; left: 3px; right: 3px; z-index: 5;
  background: rgba(51, 86, 109, 0.16);
  border: 1.5px dashed var(--brand-navy);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6875rem; font-weight: 700; color: var(--brand-navy);
  pointer-events: none;
}
.ws-week-col.is-creating { cursor: crosshair; }

/* Red now-line */
.ws-cal-nowline {
  position: absolute; left: 0; right: 0; z-index: 3;
  border-top: 2px solid var(--status-danger);
  pointer-events: none;
}
.ws-cal-nowline span {
  position: absolute; left: -4px; top: -5px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--status-danger);
}

/* ── Month view ── */

.ws-month-head {
  display: grid; grid-template-columns: repeat(7, minmax(90px, 1fr)); min-width: 640px;
  border-bottom: 1px solid rgba(10, 37, 54, 0.08);
}
.ws-month-head > div {
  padding: 8px 6px; text-align: center;
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted, rgba(10, 37, 54,0.55));
}
.ws-month-body { display: grid; grid-template-columns: repeat(7, minmax(90px, 1fr)); min-width: 640px; }
.ws-month-cell {
  min-height: 96px; padding: 4px;
  border-left: 1px solid rgba(10, 37, 54, 0.06);
  border-bottom: 1px solid rgba(10, 37, 54, 0.06);
  display: flex; flex-direction: column; gap: 2px;
  cursor: pointer;
}
.ws-month-cell.is-out { background: rgba(10, 37, 54, 0.02); }
.ws-month-cell.is-out .ws-month-cell__num { opacity: 0.4; }
.ws-month-cell__num {
  align-self: flex-start;
  min-width: 24px; height: 24px; border-radius: 50%;
  border: none; background: transparent; cursor: pointer;
  font-size: 0.75rem; font-weight: 700; color: var(--brand-navy);
}
.ws-month-cell__num:hover { background: rgba(10, 37, 54, 0.07); }
.ws-month-cell.is-today .ws-month-cell__num { background: var(--brand-gold); color: var(--surface-canvas); }

.ws-cal-pill {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: none; border-radius: 7px;
  background: var(--brand-gold-soft); color: var(--brand-navy);
  border-left: 3px solid var(--brand-gold);
  font-size: 0.6875rem; font-weight: 600; padding: 1px 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ws-cal-pill--more { background: transparent; border-left-color: transparent; color: var(--text-muted, rgba(10, 37, 54,0.55)); }
.ws-cal-pill__time { font-weight: 700; opacity: 0.75; }
.ws-cal-pill.ws-cal-chip--matter { background: #f4f4f5; border-left-color: #5a0334; }
.ws-cal-pill.ws-cal-chip--meeting { background: #f2e9d8; border-left-color: #5c575a; }
.ws-cal-pill.ws-cal-chip--deadline { background: rgba(10, 37, 54, 0.07); border-left-color: var(--brand-navy); }
.ws-cal-pill.ws-cal-chip--hot { border-left-color: var(--status-danger); background: var(--status-danger-soft); }

/* ── Drop overlay ── */

.ws-cal-drop {
  position: absolute; inset: 0; z-index: 10;
  background: rgba(243, 250, 255, 0.92);
  display: flex; align-items: center; justify-content: center;
}
.ws-cal-drop__inner {
  border: 2px dashed var(--brand-gold);
  border-radius: 14px; padding: 34px 44px; text-align: center;
  background: var(--color-gold-bg, #F3FAFF);
  max-width: 420px;
}
.ws-cal-drop__icon { font-size: 30px; margin-bottom: 6px; }
.ws-cal-drop__title { font-size: 1rem; font-weight: 700; color: var(--brand-navy); }
.ws-cal-drop__sub { margin-top: 4px; font-size: 0.8125rem; color: var(--text-muted, rgba(10, 37, 54,0.6)); }
.ws-cal-drop.is-busy .ws-cal-drop__icon { animation: ws-cal-spinicon 1s linear infinite; }
@keyframes ws-cal-spinicon { to { transform: rotate(360deg); } }

/* ── AI proposals dialog + event dialogs ── */

.ws-cal-modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 22px 12px;
}
.ws-cal-modal__title { margin: 0; font-size: 1.0625rem; font-weight: 700; color: var(--brand-navy); flex: 1; }
/* Small circular icon buttons, à la macOS traffic-light controls. */
.ws-cal-modal__close {
  width: 24px; height: 24px; border-radius: 50%; border: none; background: rgba(10, 37, 54,0.08);
  color: var(--brand-navy); cursor: pointer; font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
}
.ws-cal-modal__edit {
  width: 24px; height: 24px; border-radius: 50%; border: none; background: rgba(10, 37, 54,0.08);
  color: var(--brand-navy); cursor: pointer; margin-right: 6px;
  display: inline-flex; align-items: center; justify-content: center;
}
.ws-cal-modal__edit:hover, .ws-cal-modal__close:hover { background: rgba(10, 37, 54, 0.16); }
.ws-cal-modal__body { padding: 4px 22px 8px; max-height: 56vh; overflow-y: auto; }
.ws-cal-modal__footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 22px 18px;
}
.ws-cal-danger { color: var(--status-danger); border-color: var(--status-danger-soft); }

/* ── Event details popover ──────────────────────────────────────────────────
   Anchored to the tile that was clicked (not a centred modal) — pops up
   beside it with a dashed connector, like a speech bubble reading off the
   calendar itself. Edit/Add-reminder/AI-proposals dialogs stay as regular
   centred modals (.ws-cal-modal*, above); only the read-only event-detail
   view uses this. */

.ws-cal-popover-wrap { position: fixed; inset: 0; z-index: 950; pointer-events: none; }
.ws-cal-popover-catcher { position: absolute; inset: 0; pointer-events: auto; cursor: default; }

.ws-cal-popover-connector {
  position: fixed; z-index: 951; height: 0; pointer-events: none;
  border-top: 2px dashed var(--pv-line, var(--brand-navy));
  opacity: 0; transition: opacity 0.18s ease;
  transform: translateY(-1px);
}
.ws-cal-popover-connector::before {
  content: ''; position: absolute; left: -3px; top: -4px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--pv-line, var(--brand-navy));
}
.ws-cal-popover-wrap.is-open .ws-cal-popover-connector { opacity: 0.55; }

.ws-cal-popover {
  position: fixed; z-index: 952; pointer-events: auto;
  width: 320px; max-width: calc(100vw - 28px);
  background: var(--surface-elevated);
  border-radius: 16px;
  box-shadow: 0 20px 48px rgba(10, 37, 54, 0.22), 0 2px 8px rgba(10, 37, 54, 0.1);
  border: 1.5px solid var(--pv-accent, rgba(10, 37, 54, 0.1));
  opacity: 0; transform: scale(0.92) translateY(4px);
  transform-origin: var(--pv-origin-x, 0%) var(--pv-origin-y, 50%);
  transition: opacity 0.2s cubic-bezier(0.34,1.56,0.64,1), transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
}
.ws-cal-popover.is-open { opacity: 1; transform: scale(1) translateY(0); }

/* Header: icon + title share the top row (title is the event's name — no
   redundant "Meeting" label), edit/close sit at the far right. */
.ws-cal-popover__head { display: flex; align-items: flex-start; gap: 8px; padding: 14px 12px 0; }
.ws-cal-popover__head-icon {
  flex-shrink: 0; margin-top: 1px; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--pv-accent, var(--brand-navy)); color: var(--surface-canvas);
}
.ws-cal-popover__head-label {
  flex: 1; min-width: 0; padding-top: 2px;
  font-size: 0.9375rem; font-weight: 700; line-height: 1.3; color: var(--brand-navy);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ws-cal-popover__head-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; margin-top: 1px; }

/* A single flex gap governs the vertical rhythm between every section
   (time, badges, notes, matter row, and — in the Add-reminder card — each
   form field) instead of a mismatched pile of per-child margins. */
.ws-cal-popover__body { display: flex; flex-direction: column; gap: 10px; padding: 8px 16px 16px; }
.ws-cal-popover__meta-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.65625rem; font-weight: 600; color: var(--text-muted, rgba(10, 37, 54, 0.62));
}
.ws-cal-popover__meta-item .ws-i { flex-shrink: 0; opacity: 0.65; width: 11px; height: 11px; }
.ws-cal-popover__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-cal-popover__notes {
  position: relative; margin: 0; max-height: 58px; overflow: hidden;
  font-size: 0.8125rem; line-height: 1.55; color: var(--brand-navy); opacity: 0.82;
  transition: max-height 0.32s cubic-bezier(0.34,1.56,0.64,1);
}
.ws-cal-popover__notes.has-overflow:not(.is-expanded)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22px;
  background: linear-gradient(to bottom, transparent, var(--surface-elevated));
  pointer-events: none;
}
.ws-cal-popover__notes-toggle {
  display: inline-block; margin-top: 5px; border: none; background: none; padding: 0;
  font-size: 0.75rem; font-weight: 700; color: var(--pv-accent, var(--brand-gold-deep)); cursor: pointer;
}
.ws-cal-popover__notes-toggle:hover { text-decoration: underline; }
.ws-cal-popover__matter { margin: 0; }
.ws-cal-popover__matter-label {
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted, rgba(10, 37, 54, 0.5)); margin-bottom: 5px;
}

/* ── "Add reminder" card — same shell as the read-only popover, but its
   form fields must match the same compact type scale (labels/inputs were
   inheriting the app's normal 14–16px form sizing, which looked oversized
   and inconsistent next to the popover's 11–13px rhythm). Scoped to
   .ws-cal-popover so no other form in the app is affected. ── */
.ws-cal-popover .form-group { gap: 4px; }
.ws-cal-popover .form-label {
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted, rgba(10, 37, 54, 0.5));
}
.ws-cal-popover .form-input,
.ws-cal-popover .form-select {
  height: 34px; padding: 0 10px; font-size: 0.8125rem;
}
.ws-cal-popover textarea.form-input { height: auto; padding: 8px 10px; }
.ws-cal-popover .ws-cal-popover__title-input { height: 38px; font-size: 0.84375rem; }
.ws-cal-popover .ws-rem-row { margin-bottom: 0; }
.ws-cal-popover .ws-rem-allday { height: 34px; font-size: 0.75rem; padding: 0 12px; }
/* Link (or "link a matter" select) + delete share one row, aligned, in both
   the linked and unlinked states — no separate footer row. */
.ws-cal-popover__matter-row { display: flex; align-items: center; gap: 8px; }
.ws-cal-popover__link {
  flex: 1 1 auto; min-width: 0; width: 100%; height: 32px; padding: 0 10px;
  font-size: 0.78125rem;
}
/* The Add-reminder card's title field — no label, larger/bolder to read as
   the card's own title, matching the read-only popover's header text. */
.ws-cal-popover__title-input {
  font-size: 0.9375rem; font-weight: 700; color: var(--brand-navy);
}
/* The matter's own title, with a small "open" arrow — replaces a separate
   "Open matter" button; the whole thing is the affordance. */
.ws-cal-popover__matterlink {
  flex: 1 1 auto; min-width: 0;
  display: inline-flex; align-items: center; gap: 6px;
  border: none; background: none; padding: 0; cursor: pointer;
  font-size: 0.8125rem; font-weight: 700; color: var(--brand-navy);
}
.ws-cal-popover__matterlink-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-cal-popover__matterlink .ws-i { flex-shrink: 0; opacity: 0.6; transition: transform 0.12s ease; }
.ws-cal-popover__matterlink:hover { color: var(--pv-accent, var(--brand-gold-deep)); }
.ws-cal-popover__matterlink:hover .ws-i { opacity: 1; transform: translate(1px, -1px); }
.ws-cal-popover__trash {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid rgba(10, 37, 54, 0.12); background: var(--surface-elevated);
  color: var(--status-danger); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.12s ease, transform 0.1s ease;
}
.ws-cal-popover__trash:hover { background: var(--status-danger-soft); border-color: var(--status-danger); transform: scale(1.08); }

/* Footer — only the Add-reminder card uses this (the read-only event
   popover hides it and keeps delete inline with the matter row instead).
   Smaller and more evenly matched than the app's default .btn--small. */
.ws-cal-popover__footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 4px 16px 14px; }
.ws-cal-popover__footer .btn {
  height: 30px; padding: 0 13px; font-size: 0.75rem; border-radius: 8px;
}

/* Add-reminder form */
.ws-rem-row {
  display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 12px;
  align-items: end; margin-bottom: 16px;
}
.ws-rem-row .form-group { margin-bottom: 0; min-width: 0; }
.ws-rem-optional {
  font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.01em;
  color: var(--text-muted, rgba(10, 37, 54, 0.5)); margin-left: 4px;
}
.ws-rem-allday {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 14px; height: 42px; align-self: end;
  border: 1px solid rgba(10, 37, 54, 0.16); border-radius: 8px;
  background: var(--surface-elevated); color: var(--brand-navy);
  font-size: 0.8125rem; font-weight: 600;
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.ws-rem-allday input { accent-color: var(--brand-navy); margin: 0; }
.ws-rem-allday:hover { border-color: var(--brand-navy); }
.ws-rem-allday.is-on { background: var(--brand-navy); border-color: var(--brand-navy); color: var(--surface-canvas); }
.ws-rem-allday.is-on input { accent-color: #F3FAFF; }
.ws-rem-row--date { grid-template-columns: 1fr auto; }
.ws-rem-row--time { grid-template-columns: 1fr 1fr; }
#ws-rem-time-group.is-disabled,
#ws-rem-end-time-group.is-disabled { opacity: 0.45; }
@media (max-width: 560px) {
  .ws-rem-row { grid-template-columns: 1fr 1fr; }
  .ws-rem-allday { grid-column: 1 / -1; justify-content: center; }
}

.ws-cal-badge {
  display: inline-block; padding: 3px 9px; border-radius: 100px;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.01em;
  background: rgba(10, 37, 54, 0.07); color: var(--brand-navy);
}
.ws-cal-badge--ai { background: var(--brand-gold-soft); color: var(--brand-gold-deep); }
.ws-cal-badge--matter   { background: #f4f4f5; color: #5a0334; border: 1px solid #5a0334; }
.ws-cal-badge--meeting  { background: #f2e9d8; color: #5c575a; border: 1px solid #5c575a; }
.ws-cal-badge--done     { background: var(--brand-gold-soft); color: #5a0334; }
.ws-cal-badge--canceled { background: var(--status-danger-soft); color: var(--status-danger); }

.ws-cal-skipped { font-size: 0.75rem; color: var(--status-danger); margin: 0 0 8px; }
.ws-cal-props { display: flex; flex-direction: column; gap: 8px; }
.ws-cal-prop {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid rgba(10, 37, 54, 0.1); border-radius: 10px;
  padding: 10px 12px; cursor: pointer;
}
.ws-cal-prop:hover { border-color: var(--brand-gold); }
.ws-cal-prop input { margin-top: 3px; }
.ws-cal-prop__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ws-cal-prop__title { font-size: 0.875rem; font-weight: 700; color: var(--brand-navy); }
.ws-cal-prop__when  { font-size: 0.75rem; font-weight: 600; color: var(--brand-gold-deep); }
.ws-cal-prop__ctx   { font-size: 0.75rem; color: var(--text-muted, rgba(10, 37, 54,0.6)); line-height: 1.4; }

/* ── Today panel (Box 1) ── */

.ws-today-card {
  background: var(--surface-elevated);
  border: 1px solid rgba(10, 37, 54, 0.08);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 320px;
}
.ws-today-card__header {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(10, 37, 54, 0.08);
}
.ws-today-card__title { margin: 0; font-size: 0.9375rem; font-weight: 700; color: var(--brand-navy); }
.ws-today-card__date  { font-size: 0.75rem; color: var(--text-muted, rgba(10, 37, 54,0.55)); }
.ws-today-scroll { flex: 1; max-height: 520px; overflow-y: auto; position: relative; display: flex; flex-direction: column; }

.ws-today-empty {
  margin: auto;
  padding: 32px 20px;
  text-align: center;
  color: var(--text-muted, rgba(10, 37, 54, 0.55));
}
.ws-today-empty__icon { opacity: 0.5; margin-bottom: 8px; }
.ws-today-empty__title { margin: 0 0 4px; font-size: 0.875rem; font-weight: 700; color: var(--brand-navy); }
.ws-today-empty__sub { margin: 0; font-size: 0.75rem; line-height: 1.5; }

/* Agenda list — one detailed row per event, not a mini calendar */
.ws-today-agenda { display: flex; flex-direction: column; padding: 8px 10px 12px; gap: 6px; }
.ws-today-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 12px;
  text-align: left; cursor: pointer;
  border: none; border-radius: 12px;
  background: var(--brand-gold-soft);
  font-family: inherit;
  transition: filter 0.12s ease;
}
.ws-today-item:hover { filter: brightness(0.97); }
.ws-today-item.ws-cal-chip--deadline { background: rgba(10, 37, 54, 0.07); }
.ws-today-item.ws-cal-chip--hot { background: var(--status-danger-soft); }
.ws-today-item.ws-cal-chip--matter  { background: #f4f4f5; border: 1.5px solid #5a0334; }
.ws-today-item.ws-cal-chip--meeting { background: #f2e9d8; border: 1.5px solid #5c575a; }
.ws-today-item.is-past { opacity: 0.55; }
.ws-today-item__when {
  display: flex; flex-direction: column; gap: 1px;
  flex-shrink: 0; width: 58px; padding-top: 1px;
}
.ws-today-item__start { font-size: 0.8125rem; font-weight: 700; color: var(--brand-navy); }
.ws-today-item__end   { font-size: 0.6875rem; font-weight: 600; color: var(--text-muted, rgba(10, 37, 54, 0.55)); }
.ws-today-item__body  { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ws-today-item__title { font-size: 0.84375rem; font-weight: 700; color: var(--brand-navy); line-height: 1.35; }
.ws-today-item__meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; min-width: 0; }
.ws-today-tag {
  font-size: 0.625rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 2px 8px; border-radius: 100px;
  background: rgba(10, 37, 54, 0.08); color: var(--brand-navy);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Agenda item actions — edit + cancel, reset when canceled */
.ws-today-item__actions {
  display: flex; gap: 4px; margin-left: auto; flex-shrink: 0;
  align-self: flex-start; padding-left: 6px;
}
.ws-today-act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(10, 37, 54, 0.16); background: var(--surface-elevated);
  color: var(--brand-navy); cursor: pointer;
  transition: transform 0.1s ease, background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.ws-today-act:hover { transform: scale(1.1); }
.ws-today-act--cancel { color: var(--status-danger); }
.ws-today-act--cancel:hover { background: var(--status-danger-soft); border-color: var(--status-danger); }
.ws-today-act--edit:hover,
.ws-today-act--reset:hover { background: rgba(10, 37, 54, 0.06); border-color: var(--brand-navy); }

/* Done — a green wash overlaps the whole entry */
.ws-today-item.is-done { background: var(--brand-gold-soft); }

/* Canceled — struck through, dimmed, only the reset control remains */
.ws-today-item.is-canceled { opacity: 0.62; }
.ws-today-item.is-canceled .ws-today-item__title,
.ws-today-item.is-canceled .ws-today-item__start,
.ws-today-item.is-canceled .ws-today-item__end {
  text-decoration: line-through;
  text-decoration-color: var(--status-danger);
  text-decoration-thickness: 1.5px;
}

/* Diary KPI foot-note ("N items canceled") */
.ws-dash-kpi__note {
  margin-top: 2px;
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--status-danger);
}

/* Postpone dialog */
.ws-postpone-what { margin: 0 0 12px; font-size: 0.875rem; font-weight: 700; color: var(--brand-navy); }
.ws-rem-row--postpone { grid-template-columns: 1fr 1fr; }

/* "Now" separator between what's done and what's next */
.ws-today-now { display: flex; align-items: center; gap: 8px; margin: 4px 2px; }
.ws-today-now__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--status-danger); flex-shrink: 0; }
.ws-today-now__label {
  font-size: 0.625rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--status-danger); white-space: nowrap;
}
.ws-today-now__line { flex: 1; height: 2px; border-radius: 1px; background: var(--status-danger); opacity: 0.45; }

/* ── FAB speed-dial (Box 2) ── */

.ws-fab {
  position: fixed; left: 234px; bottom: 22px; z-index: 720;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  /* The closed speed-dial still takes layout space; keep the container
     transparent to clicks so the calendar behind it stays usable. */
  pointer-events: none;
  transition: left 0.16s ease;
}
/* Hug the sidebar's edge when it collapses (60px) instead of floating in the
   space the expanded sidebar (210px) used to occupy. */
body:has(.sb-sidebar.is-collapsed) .ws-fab { left: 84px; }
/* A soft blur behind the open speed-dial so its actions read clearly
   against the calendar grid instead of blending into it. */
.ws-fab__backdrop {
  position: fixed; inset: 0; z-index: -1;
  backdrop-filter: blur(6px); background: rgba(10, 37, 54, 0.1);
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s ease;
}
.ws-fab.is-open .ws-fab__backdrop { opacity: 1; pointer-events: auto; }
.ws-fab__main {
  width: 56px; height: 56px; border-radius: 50%;
  border: none; padding: 0; cursor: pointer;
  pointer-events: auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-gold); color: var(--surface-canvas);
  font-size: 28px; line-height: 1; font-weight: 400;
  box-shadow: 0 6px 18px rgba(10, 37, 54, 0.22);
  transition: transform 0.18s ease, background 0.15s ease;
}
.ws-fab__main:hover { background: var(--brand-gold-deep); }
.ws-fab.is-open .ws-fab__main { transform: rotate(45deg); }

.ws-fab__actions {
  display: flex; flex-direction: column; gap: 10px;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.ws-fab.is-open .ws-fab__actions { opacity: 1; transform: translateY(0); pointer-events: auto; }

.ws-fab__action { display: flex; align-items: center; gap: 10px; }
.ws-fab__label {
  background: var(--brand-navy); color: var(--surface-canvas);
  font-size: 0.75rem; font-weight: 600;
  padding: 5px 10px; border-radius: 7px;
  box-shadow: 0 2px 8px rgba(10, 37, 54, 0.18);
  white-space: nowrap;
  order: 2;
}
.ws-fab__mini {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(10, 37, 54, 0.1); padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-elevated); color: var(--brand-navy); font-size: 17px;
  box-shadow: 0 4px 12px rgba(10, 37, 54, 0.16);
  order: 1;
}
.ws-fab__mini:hover { background: var(--brand-gold-soft); }

/* ── Responsive ── */

@media (max-width: 1100px) {
  .ws-dash-body--cal { grid-template-columns: minmax(0, 1fr); }
  .ws-dash-aside { order: 2; }
  .ws-today-scroll { max-height: 380px; }
}

@media (max-width: 900px) {
  .ws-fab { left: 16px; bottom: 16px; }
  .ws-cal-toolbar { padding: 10px 12px; }
  .ws-cal-range { font-size: 0.8125rem; width: 100%; order: 3; margin-left: 0; }
  .ws-week-scroll { max-height: 440px; }
}

@media (max-width: 640px) {
  .ws-dash-kpi-strip { grid-template-columns: 1fr 1fr; }
  .ws-fab__main { width: 50px; height: 50px; font-size: 24px; }
}

/* Shell top bar: pre-existing fixed-width layout overflowed the page on
   narrow screens (visible on every view, incl. the dashboard). Let it wrap
   and let the search shrink instead of pushing the page wider. */
@media (max-width: 900px) {
  .sb-topbar { flex-wrap: wrap; height: auto; min-height: 64px; padding: 8px 12px; row-gap: 6px; }
  .sb-topbar__right { flex-wrap: wrap; justify-content: flex-end; min-width: 0; flex: 1 1 auto; }
  .ws-search-wrap { min-width: 0; max-width: 100%; flex: 1 1 160px; }
  .ws-user-chip__name { display: none; }
}

/* ── Calendar drag & drop ─────────────────────────────────────────────────── */
.ws-cal-chip.is-draggable,
.ws-cal-pill.is-draggable { touch-action: none; cursor: grab; }
.ws-cal-chip.is-dragging,
.ws-cal-pill.is-dragging {
  opacity: 0.85;
  z-index: 60;
  cursor: grabbing;
  box-shadow: 0 8px 20px rgba(10, 37, 54, 0.25);
  user-select: none;
}
.ws-cal-pill.is-dragging { position: relative; }
.ws-week-col.ws-cal-droptarget,
.ws-week-allday__cell.ws-cal-droptarget,
.ws-month-cell.ws-cal-droptarget { background: rgba(51, 86, 109, 0.08); }