/* Calendar page. Built on the experience page's pieces (admin shell, rounded section cards, the month grid
   from experience-calendar.js, dialogs and file rows) so it matches the dashboards. No blur or backdrop effects. */

/* Tag colours: the month-grid bar, the colour key, and the tag pill all use the same palette. */
.xc-seg.tag-none,.cal-tag.tag-none{background:#e3efe9;color:#245a4a}
.xc-seg.tag-green,.cal-tag.tag-green{background:#d6f1e3;color:#1f8a5f}
.xc-seg.tag-blue,.cal-tag.tag-blue{background:#dde2fb;color:#5163c9}
.xc-seg.tag-amber,.cal-tag.tag-amber{background:#f9e9c8;color:#a46f0c}
.xc-seg.tag-red,.cal-tag.tag-red{background:#f6d5da;color:#c4414f}
.xc-seg.tag-purple,.cal-tag.tag-purple{background:#e8dcf7;color:#7a4bb8}
.xc-seg.tag-teal,.cal-tag.tag-teal{background:#d2f0ee;color:#1d7c77}
.xc-seg.tag-pink,.cal-tag.tag-pink{background:#f9dbea;color:#b83a7d}
.xc-seg.tag-grey,.cal-tag.tag-grey{background:#e8ece9;color:#5d6d65}
.xc-key.tag-none{background:#245a4a}
.xc-key.tag-green{background:#1f8a5f}
.xc-key.tag-blue{background:#5163c9}
.xc-key.tag-amber{background:#e0a520}
.xc-key.tag-red{background:#c4414f}
.xc-key.tag-purple{background:#7a4bb8}
.xc-key.tag-teal{background:#1d8580}
.xc-key.tag-pink{background:#c23d84}
.xc-key.tag-grey{background:#8b9992}

/* View switch and filters */
.cal-views{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line,#dce6de);border-radius:999px;background:#f1f6f2}
.cal-views button{min-height:36px;padding:6px 18px;border:0;border-radius:999px;background:transparent;color:var(--forest-deep,#173f35);font:inherit;font-size:.8rem;font-weight:800;cursor:pointer}
.cal-views button[aria-pressed="true"]{background:var(--forest,#245a4a);color:#fff}
.cal-views button:focus-visible,.cal-tag-clear:focus-visible,.cal-tag:focus-visible{outline:3px solid var(--forest-deep,#173f35);outline-offset:2px}
.cal-filters{display:grid;gap:12px;padding:0 30px 18px}
.cal-filters .experience-filters{padding:0}
.cal-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cal-tags[hidden],.cal-filters [hidden]{display:none}
.cal-tags-label{color:var(--muted,#66766f);font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.cal-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:1.5px solid transparent;border-radius:999px;font:inherit;font-size:.74rem;font-weight:800;line-height:1.2}
button.cal-tag{cursor:pointer}
.cal-tag-presets{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}.cal-tag-presets[hidden]{display:none}button.cal-tag:disabled{opacity:.5;cursor:not-allowed}
button.cal-tag[aria-pressed="true"]{border-color:currentColor;box-shadow:inset 0 0 0 1px currentColor}
.cal-tag button{display:inline-grid;place-items:center;width:18px;height:18px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}
.cal-tag button svg{width:12px;height:12px}
.cal-tag-clear{padding:5px 11px;border:0;background:none;color:var(--forest,#245a4a);font:inherit;font-size:.76rem;font-weight:800;text-decoration:underline;cursor:pointer}
.cal-overlay{margin:0}

/* List view */
.cal-agenda{display:grid;gap:12px;padding:0 30px 30px}
.cal-agenda-title{margin:10px 0 0;color:var(--forest-deep,#173f35);font-size:1rem;letter-spacing:-.02em}
.cal-agenda-list{display:grid;gap:10px}
.cal-item{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:16px;padding:14px 18px;border:1px solid var(--line,#dce6de);border-radius:14px;background:#fff}
.cal-item.is-shared{background:#fafcf8}
.cal-item-date{display:grid;justify-items:center;padding:8px 4px;border-radius:12px;background:#edf3ee;color:var(--forest-deep,#173f35);text-align:center;line-height:1.2}
.cal-item-date strong{font-size:.95rem}
.cal-item-date span{color:var(--muted,#66766f);font-size:.7rem;font-weight:700}
.cal-item-body h3{margin:0 0 3px;color:var(--forest-deep,#173f35);font-size:1rem;overflow-wrap:anywhere}
.cal-item-body p{margin:0;color:var(--muted,#66766f);font-size:.8rem;line-height:1.5}
.cal-item-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.cal-item-tags:empty{display:none}

/* Overview */
.cal-outcome h4{margin:0 0 4px;color:var(--forest-deep,#173f35);font-size:.9rem}

/* Form */
.cal-dialog{width:min(620px,calc(100% - 32px))}
.cal-dialog input[type="text"],.cal-dialog input[type="time"],.cal-dialog input[type="search"],.cal-dialog select{width:100%;box-sizing:border-box;min-height:46px;padding:10px 12px;border:1px solid rgba(23,63,53,.2);border-radius:12px;background:#fff;color:inherit;font:inherit;font-size:max(16px,.95rem)}
.cal-dialog input:focus-visible,.cal-dialog select:focus-visible{outline:none;border-color:var(--forest,#245a4a);box-shadow:0 0 0 3px rgba(57,167,123,.22)}
.cal-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cal-row[hidden]{display:none}
/* Place with a maps search button, extra reminders, and the places and reminders shown on events */
.cal-place-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.cal-maps-button{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.cal-maps-button[disabled]{opacity:.55;cursor:not-allowed}
.cal-reminder-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;margin-bottom:8px}
.cal-reminder-row.is-first{grid-template-columns:minmax(0,1fr)}
#cal-reminders .button-small{display:inline-flex;align-items:center;gap:6px}
#cal-reminders .button-small[hidden]{display:none}
.cal-reminder-chip{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;border:1px solid var(--line,#d7e3dd);background:var(--mint,#e8f4ee);color:var(--forest-deep,#173f35);font-size:.72rem;font-weight:800}
.cal-reminder-list{margin:0;padding-left:1.1em}
.cal-map-link{color:var(--forest,#245a4a);font-weight:800;text-decoration:underline}
.cal-map-link:focus-visible{outline:3px solid var(--forest-deep,#173f35);outline-offset:2px;border-radius:4px}
@media (max-width:640px){
  .cal-place-row{grid-template-columns:1fr}
}
.cal-fieldset{display:grid;gap:10px;margin:0;padding:14px 16px;border:1px solid var(--line,#dce6de);border-radius:14px}
.cal-fieldset[hidden]{display:none}
.cal-fieldset legend{padding:0 6px;color:var(--forest-deep,#173f35);font-size:.85rem;font-weight:800}
.cal-tag-add{display:grid;grid-template-columns:minmax(0,1fr) 120px auto;gap:8px;align-items:center}
.cal-tag-list{display:flex;flex-wrap:wrap;gap:8px}
.cal-tag-list:empty{display:none}
.cal-choices{display:flex;flex-wrap:wrap;gap:8px}
.cal-choice{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line-strong,#a9c7ba);border-radius:999px;background:#fff;font-size:.85rem;font-weight:700;cursor:pointer}
.cal-choice:has(input:checked){border-color:var(--forest,#245a4a);background:#e8f3ec}
.cal-pick{display:grid;gap:8px}
.cal-pick[hidden]{display:none}
.cal-student-list{display:grid;gap:6px;max-height:220px;padding:8px 10px;overflow:auto;border:1px solid var(--line,#dce6de);border-radius:12px;background:#fff}

/* Connect to a calendar app */
.cal-connect{display:grid;gap:14px;padding:0 30px 30px}
.cal-link-row{display:grid;gap:10px}
.cal-link-row[hidden]{display:none}
.cal-link-row input{width:100%;box-sizing:border-box;min-height:46px;padding:10px 12px;border:1px solid rgba(23,63,53,.2);border-radius:12px;background:#f5f8f4;color:inherit;font:inherit;font-size:.85rem}
.cal-link-actions{display:flex;flex-wrap:wrap;gap:10px}
.cal-quick,.cal-colours{display:grid;gap:8px;margin:0 0 12px}
.cal-colours [hidden],.cal-quick [hidden]{display:none}
.cal-colour-add{display:inline-flex;align-items:center;gap:8px}
.cal-colour-dot{width:12px;height:12px;border-radius:50%;flex:none}
.cal-colour-dot.tag-green{background:#1f8a5f}.cal-colour-dot.tag-blue{background:#5163c9}.cal-colour-dot.tag-amber{background:#e0a520}.cal-colour-dot.tag-red{background:#c4414f}.cal-colour-dot.tag-purple{background:#7a4bb8}.cal-colour-dot.tag-teal{background:#1d8580}.cal-colour-dot.tag-pink{background:#c23d84}.cal-colour-dot.tag-grey{background:#8b9992}
.cal-link-actions [hidden]{display:none}
.cal-connect-dialog{width:min(560px,calc(100% - 32px))}
.cal-connect-question{margin:0 0 12px;color:var(--forest-deep,#173f35);font-weight:800}
.cal-app-choices{display:grid;gap:10px}
.cal-app-choice{display:grid;gap:2px;width:100%;padding:14px 16px;border:1px solid var(--line-strong,#a9c7ba);border-radius:14px;background:#fff;color:var(--forest-deep,#173f35);font:inherit;text-align:left;cursor:pointer}
.cal-app-choice span{color:var(--muted,#66766f);font-size:.8rem}
.cal-app-choice:hover{border-color:var(--forest,#245a4a);background:#e8f3ec}
.cal-app-choice:focus-visible,.cal-back:focus-visible,.cal-text-button:focus-visible{outline:3px solid var(--forest-deep,#173f35);outline-offset:2px}
#calendar-connect-steps{display:grid;gap:14px}
#calendar-connect-steps[hidden],#calendar-connect-choose[hidden]{display:none}
#calendar-connect-steps h3{margin:0;color:var(--forest-deep,#173f35);font-size:1.05rem}
.cal-back,.cal-text-button{justify-self:start;padding:2px 0;border:0;background:none;color:var(--forest,#245a4a);font:inherit;font-size:.82rem;font-weight:800;text-decoration:underline;cursor:pointer}
.cal-steps{display:grid;gap:8px;margin:0;padding-left:22px;color:var(--ink,#153d32);font-size:.9rem;line-height:1.55}
.cal-link-small{display:flex;flex-wrap:wrap;gap:16px}
.cal-link-small [hidden]{display:none}

/* Custom tick box: a rounded square that fills forest green with a tick. The real checkbox stays in place, invisible,
   so keyboards and screen readers work as normal. */
.cal-check{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:.9rem;font-weight:700;color:var(--ink,#153d32)}
.cal-check[hidden]{display:none}
.cal-check input{position:absolute;left:0;width:22px;height:22px;margin:0;opacity:0;cursor:pointer}
.cal-box{display:inline-grid;flex:none;place-items:center;width:22px;height:22px;border:2px solid var(--line-strong,#8fb3a3);border-radius:7px;background:#fff;color:transparent}
.cal-check input:checked+.cal-box{border-color:var(--forest,#245a4a);background:var(--forest,#245a4a);color:#fff}
.cal-check input:focus-visible+.cal-box{outline:3px solid var(--forest-deep,#173f35);outline-offset:2px}
.cal-check input:disabled+.cal-box{opacity:.5}
.cal-check input:disabled~.cal-check-text{opacity:.6}

@media (max-width:640px){
  .cal-filters,.cal-agenda,.cal-connect{padding-left:16px;padding-right:16px}
  .cal-agenda,.cal-connect{padding-bottom:20px}
  .calendar-shell .section-heading{flex-wrap:wrap;gap:12px}
  .cal-item{grid-template-columns:52px minmax(0,1fr);gap:12px}
  .cal-item>.button{grid-column:1 / -1}
  .cal-row{grid-template-columns:1fr}
  .cal-tag-add{grid-template-columns:minmax(0,1fr) 100px}
  .cal-tag-add .button{grid-column:1 / -1}
  .cal-link-actions .button{flex:1 1 auto;text-align:center}
}

.cal-place-wrap{position:relative;min-width:0}
.cal-place-list{position:absolute;z-index:5;inset:calc(100% + 4px) 0 auto 0;margin:0;padding:4px;list-style:none;border:1px solid var(--line-strong,rgba(36,90,74,.29));border-radius:12px;background:var(--paper,#fffefa);box-shadow:0 12px 30px rgba(16,43,35,.16);max-height:240px;overflow:auto}
.cal-place-list li{padding:9px 10px;border-radius:8px;color:var(--text,#18352d);font-size:.875rem;line-height:1.35;cursor:pointer}
.cal-place-list li:hover,.cal-place-list li[aria-selected="true"]{background:var(--mint,#dff2e9);color:var(--forest-deep,#173f35)}