/* PRTY OS — calendar screen styles. Screen-specific layout only; reuse components.css for everything else. */

.cal-nav { display: inline-flex; gap: 4px; }

/* ---------- Toolbar ---------- */
.cal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; padding-bottom: var(--s-4); }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-12); color: var(--text-2); }
.cal-legend .dot { width: 7px; height: 7px; }
.cal-legend__outline { width: 12px; height: 10px; border: 1px solid var(--line-strong); border-radius: 3px; }

/* ---------- Month grid ---------- */
.cal-month { overflow: hidden; }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.cal-weekday {
  height: 34px; display: flex; align-items: center; padding: 0 10px;
  font-size: var(--fs-11); font-weight: 500; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3);
  border-left: 1px solid var(--line-soft);
}
.cal-weekday:first-child { border-left: 0; }
.cal-weekday.is-weekend { background: var(--bg-2); }

.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(128px, auto); }
.cal-cell {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
  padding: 8px 8px 10px;
  border-left: 1px solid var(--line-soft);
  border-top: 1px solid var(--line-soft);
}
.cal-cell:nth-child(7n+1) { border-left: 0; }
.cal-cell:nth-child(-n+7) { border-top: 0; }
.cal-cell.is-weekend { background: var(--bg-2); }
.cal-cell.is-outside .cal-cell__num { color: var(--text-4); }
.cal-cell.is-outside .cal-cell__items { opacity: 0.55; }

.cal-cell__head { display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 22px; padding-left: 2px; }
.cal-cell__num { font-size: var(--fs-12); font-weight: 500; color: var(--text-2); }
.cal-cell.is-past:not(.is-outside) .cal-cell__num { color: var(--text-3); }
.cal-cell.is-today .cal-cell__num {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 22px; padding: 0 6px; margin-left: -2px;
  border-radius: 999px;
  background: var(--inverse); color: var(--on-inverse); font-weight: 600;
}
.cal-cell.is-today { box-shadow: inset 0 0 0 1px var(--line-strong); }
.cal-cell__today { font-size: var(--fs-10); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-2); }
.cal-cell__items { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

/* Event marker — tinted with the status hue (same mix as .pill) */
.cal-ev {
  --c: var(--grey);
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 6px;
  padding: 5px 7px 5px 6px;
  border-radius: var(--r-1);
  background: color-mix(in srgb, var(--c) 13%, transparent);
  box-shadow: inset 2px 0 0 var(--c);
  color: var(--text);
  min-width: 0;
  transition: background var(--dur-1) var(--ease);
}
.cal-ev:hover { background: color-mix(in srgb, var(--c) 22%, transparent); }
.cal-ev.is-dashed { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); }
.cal-ev.is-dashed:hover { background: color-mix(in srgb, var(--c) 10%, transparent); }
.cal-ev.is-past { color: var(--text-2); }
.cal-ev.is-cancelled .cal-ev__name { text-decoration: line-through; text-decoration-color: var(--text-3); }
.cal-ev__name { font-size: var(--fs-12); font-weight: 500; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-ev__venue { grid-column: 2; font-size: var(--fs-11); color: var(--text-3); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Project badge on a calendar day: tags a child event as part of a project; clicking it opens the parent, never the day itself */
.cal-ev__proj { grid-column: 2; display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-10); color: var(--text-3); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-ev__proj:hover { color: var(--text); text-decoration: underline; }
.cal-ev__proj--inline { grid-column: auto; display: inline-flex; margin-left: 6px; }

@media (max-width: 1100px) {
  .cal-ev__proj { display: none; }
}

/* Key date marker — neutral outline so it never competes with status colour */
.cal-key {
  display: flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 6px;
  border: 1px solid var(--line); border-radius: var(--r-1);
  color: var(--text-3); font-size: var(--fs-11);
  min-width: 0;
  transition: border-color var(--dur-1), color var(--dur-1), background var(--dur-1);
}
.cal-key:hover { border-color: var(--line-strong); color: var(--text); background: var(--hover); }
.cal-key .icon { color: var(--text-4); }
.cal-key__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cal-key__label { color: var(--text-2); font-weight: 500; }

@media (max-width: 1100px) {
  .cal-grid { grid-auto-rows: minmax(108px, auto); }
  .cal-cell { padding: 6px 5px 8px; }
  .cal-ev__venue { display: none; }
  .cal-key__label { display: none; }
}

/* ---------- Agenda (mobile) ---------- */
.cal-agenda .panel { overflow: hidden; }
.cal-agenda__day {
  display: flex; align-items: center; justify-content: space-between;
  height: 32px; padding: 0 var(--s-4);
  background: var(--bg-2);
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-11); font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-2);
}
.cal-agenda__day .t-3 { text-transform: none; letter-spacing: 0; font-weight: 500; }
.cal-agenda__day.is-today { color: var(--text); }
.cal-agenda__row { min-height: 56px; color: inherit; }
.cal-agenda__row.is-past .list-row__title { color: var(--text-2); font-weight: 400; }
.cal-agenda__row--key { min-height: 48px; }
.cal-agenda__row--key .list-row__title { font-weight: 400; color: var(--text-2); }
.cal-agenda__icon { width: 40px; display: grid; place-items: center; color: var(--text-3); flex-shrink: 0; }

@media (max-width: 720px) {
  .cal-toolbar .chips .chip { height: 32px; }
  .cal-nav .btn { --btn-h: 38px; }
}