/* Admins' calendar + "Today" warning (office/calendar.js): used in the client portal and the Office app. Phone first;
   sized by the box it sits in. The views get bigger as you zoom in: 12 months, Month, Week, Day. */
.cal, .cal-alert, .cal-sheet {
  --c-navy: #0d2438; --c-brass: #b3894f; --c-cream: #fbf8f1; --c-line: #e4dccb; --c-soft: #5c6b7a; --c-red: #a2361c;
  --t-meeting: #0d2438; --t-call: #2f6b8f; --t-arrival: #b3894f; --t-delivery: #2f6b45; --t-install: #6b4f8f; --t-measure: #8a5a2b; --t-other: #5c6b7a; --t-job: #9aa5ae;
}
.cal { container-type: inline-size; font-size: 15px; color: var(--c-navy); }
.cal button { font: inherit; color: inherit; cursor: pointer; }
.t-meeting { --tc: var(--t-meeting); } .t-call { --tc: var(--t-call); } .t-arrival { --tc: var(--t-arrival); } .t-delivery { --tc: var(--t-delivery); }
.t-install { --tc: var(--t-install); } .t-measure { --tc: var(--t-measure); } .t-other { --tc: var(--t-other); } .t-job { --tc: var(--t-job); }
.cal-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--tc, var(--t-other)); flex: none; }

/* top bar: back / Today / forward, the title, + Add */
.cal-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-ib { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--c-line); border-radius: 8px; background: #fff; padding: 0; }
.cal-ib svg { width: 20px; height: 20px; }
.cal-ib-s { width: 36px; height: 36px; font-size: 20px; line-height: 1; }
.cal-today { height: 44px; padding: 0 14px; border: 1px solid var(--c-line); border-radius: 8px; background: #fff; font-weight: 600 !important; }
.cal-title { order: 3; flex: 1 1 100%; margin: 2px 0 0; font-size: 21px; line-height: 1.2; }
.cal-add { margin-left: auto; height: 44px; padding: 0 18px; border: 0; border-radius: 8px; background: var(--c-brass); color: #fff !important; font-weight: 700 !important; letter-spacing: .04em; }
.cal-add-s { height: 40px; margin: 0; font-size: 13px; }

/* view switch: the buttons grow toward Day, like the views */
.cal-views { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; margin-bottom: 8px; border-radius: 10px; background: #efe9dc; }
.cal-vbtn { min-height: 42px; padding: 6px 4px; border: 0; border-radius: 7px; background: transparent; color: var(--c-navy); font-weight: 600 !important; }
.cal-v0 { font-size: 12.5px !important; } .cal-v1 { font-size: 13.5px !important; } .cal-v2 { font-size: 14.5px !important; } .cal-v3 { font-size: 15.5px !important; }
.cal-vbtn.is-on { background: var(--c-navy); color: #fff; box-shadow: 0 1px 3px rgba(13, 36, 56, .25); }
.cal-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 12px; font-size: 12px; color: var(--c-soft); }
.cal-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cal-empty, .cal-none { margin: 8px 0; color: var(--c-soft); font-size: 14px; }

/* 12 months */
.cal-year { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.cal-mini { background: #fff; border: 1px solid var(--c-line); border-radius: 10px; padding: 8px; }
.cal-mini-h { display: block; width: 100%; margin: 0 0 4px; padding: 4px; border: 0; background: none; text-align: left; font-weight: 700 !important; font-size: 14px; }
.cal-mini-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; text-align: center; font-size: 11.5px; }
.cal-wd { color: var(--c-soft); font-size: 10px; padding-bottom: 2px; }
.cal-md { position: relative; min-height: 26px; padding: 2px 0 7px; border: 0; border-radius: 5px; background: none; font-size: 11.5px !important; }
.cal-md.has { background: #f5efe2; font-weight: 700 !important; }
.cal-md.is-today { box-shadow: inset 0 0 0 2px var(--c-brass); }
.cal-md .cal-dots { position: absolute; left: 0; right: 0; bottom: 2px; justify-content: center; }
.cal-md .cal-dot { width: 4px; height: 4px; }
.cal-dots { display: flex; gap: 2px; }

/* month */
.cal-mhead, .cal-mgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-mhead span { padding: 4px 0; text-align: center; font-size: 12px; font-weight: 700; color: var(--c-soft); text-transform: uppercase; letter-spacing: .05em; }
.cal-mgrid { border-top: 1px solid var(--c-line); border-left: 1px solid var(--c-line); background: #fff; border-radius: 0 0 8px 8px; }
.cal-cell { min-height: 58px; border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); padding: 2px; min-width: 0; }
.cal-cell.is-out { background: #faf8f3; } .cal-cell.is-out .cal-cday { color: #a7b0b8; }
.cal-cday { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; min-height: 48px; padding: 6px 0; border: 0; border-radius: 6px; background: none; font-weight: 600 !important; }
.cal-cell.is-today .cal-cday { color: #fff; background: var(--c-navy); }
.cal-clist { display: none; }
.cal-chip { display: block; width: 100%; margin: 0 0 3px; padding: 3px 6px; border: 0; border-left: 3px solid var(--tc); border-radius: 4px; background: color-mix(in srgb, var(--tc) 12%, #fff); text-align: left; font-size: 12.5px !important; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-chip.t-job { color: var(--c-soft); background: #f1f3f4; }
.cal-more { border: 0; background: none; padding: 2px 4px; font-size: 12px !important; color: var(--c-soft); text-decoration: underline; }

/* week: a card per day on a phone, seven columns on a wide screen */
.cal-week { display: grid; gap: 10px; }
.cal-wday { background: #fff; border: 1px solid var(--c-line); border-radius: 10px; padding: 8px 10px 10px; min-width: 0; }
.cal-wday.is-today { border-color: var(--c-brass); box-shadow: 0 0 0 2px rgba(179, 137, 79, .25); }
.cal-wday-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cal-wday-n { border: 0; background: none; padding: 6px 0; font-size: 16px !important; }
.cal-wday .cal-chip { font-size: 14px !important; padding: 7px 8px; white-space: normal; margin-bottom: 5px; }
.cal-move { display: block; width: 100%; margin: 0 0 5px; padding: 7px 8px; border: 1px dashed #c9d0d5; border-radius: 6px; background: #f7f8f9; text-align: left; font-size: 13.5px !important; line-height: 1.35; }
.cal-move-t, .cal-move-s, .cal-move-by { display: block; }
.cal-move-s { color: var(--c-soft); }
.cal-move-s svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 3px; }
.cal-move.is-crew { border-style: solid; border-color: var(--t-delivery); background: #eef5f0; }
.cal-move.is-crew .cal-move-s { color: var(--t-delivery); font-weight: 600; }
.cal-move-by { font-size: 12.5px; color: var(--c-soft); margin-top: 2px; }
.cal-move.is-big { padding: 12px 14px; font-size: 16px !important; margin-bottom: 8px; }
.cal-tag { font-style: normal; font-size: 11px; padding: 1px 6px; border-radius: 99px; background: #e6e9eb; color: var(--c-soft); }

/* day: the biggest */
.cal-day { display: grid; gap: 16px; }
.cal-day-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.cal-day-h h4 { margin: 0; font-size: 19px; }
.cal-ev { display: grid; grid-template-columns: 78px 1fr auto; gap: 12px; align-items: start; margin: 0 0 10px; padding: 14px; background: #fff; border: 1px solid var(--c-line); border-left: 5px solid var(--tc); border-radius: 10px; }
.cal-ev-time { font-weight: 700; font-size: 17px; line-height: 1.3; }
.cal-ev-type { margin: 0 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tc); }
.cal-ev h5 { margin: 0 0 4px; font-size: 19px; line-height: 1.3; overflow-wrap: anywhere; }
.cal-ev-notes { margin: 6px 0 0; white-space: pre-wrap; font-size: 15px; overflow-wrap: anywhere; }
.cal-ev-by { margin: 6px 0 0; font-size: 12.5px; color: var(--c-soft); }
.cal-warn { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 7px; border-radius: 99px; background: #fbf1df; color: #8a5a10; letter-spacing: 0; text-transform: none; font-size: 11.5px; }
.cal-warn svg { width: 12px; height: 12px; }
.cal-link { padding: 4px 0; border: 0; background: none; color: #8a6634 !important; font-weight: 600 !important; text-decoration: underline; text-align: left; }
.cal-edit { min-height: 40px; padding: 0 12px; border: 1.5px solid var(--c-navy); border-radius: 7px; background: #fff; font-weight: 600 !important; font-size: 13px !important; }

@container (max-width: 459px) {
  .cal-ev { grid-template-columns: 1fr auto; }
  .cal-ev-time { grid-column: 1 / -1; font-size: 16px; }
  .cal-legend { font-size: 11.5px; }
}
@container (min-width: 560px) {
  .cal-title { order: 0; flex: 1 1 auto; text-align: center; font-size: 23px; margin: 0; }
  .cal-add { margin-left: 0; }
  .cal-cell { min-height: 96px; }
  .cal-cday { flex-direction: row; justify-content: flex-start; min-height: 0; padding: 3px 6px; width: auto; }
  .cal-cday .cal-dots { display: none; }
  .cal-clist { display: block; }
  .cal-cell.is-today .cal-cday { border-radius: 99px; }
}
@container (min-width: 720px) { .cal-year { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } .cal-mini-g { font-size: 12.5px; } .cal-md { min-height: 30px; font-size: 12.5px !important; } }
@container (min-width: 900px) {
  .cal-week { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
  .cal-wday { min-height: 240px; padding: 6px; }
  .cal-wday .cal-chip, .cal-wday .cal-move { font-size: 13px !important; padding: 5px 6px; }
  .cal-day { grid-template-columns: 3fr 2fr; align-items: start; }
}

/* add / change sheet: from the bottom on a phone, centered on a big screen */
body.cal-open { overflow: hidden; }
.cal-sheet-bg { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: flex-end; justify-content: center; background: rgba(13, 36, 56, .45); }
.cal-sheet { width: 100%; max-width: 560px; max-height: 92vh; overflow: auto; box-sizing: border-box; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); background: #fff; border-radius: 14px 14px 0 0; color: var(--c-navy); font-size: 15px; }
@media (min-width: 640px) { .cal-sheet-bg { align-items: center; } .cal-sheet { border-radius: 14px; padding: 20px 22px; } }
.cal-sheet-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-sheet-h h3 { margin: 0; font-size: 21px; }
.cal-x { width: 44px; height: 44px; border: 0; background: none; font-size: 28px; line-height: 1; color: var(--c-soft); cursor: pointer; }
.cal-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin: 0 0 12px; padding: 0; border: 0; }
.cal-types legend { padding: 0; margin-bottom: 6px; font-size: 13px; font-weight: 700; }
.cal-type { position: relative; }
.cal-type input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cal-type span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 4px 6px; border: 1.5px solid var(--c-line); border-left: 5px solid var(--tc); border-radius: 8px; font-weight: 600; font-size: 14px; }
.cal-type input:checked + span { background: var(--tc); border-color: var(--tc); color: #fff; }
.cal-type input:focus-visible + span { outline: 3px solid rgba(179, 137, 79, .6); outline-offset: 2px; }
.cal-f { display: block; margin: 0 0 10px; font-size: 13px; font-weight: 700; }
.cal-opt { font-weight: 400; color: var(--c-soft); }
.cal-f input, .cal-f select, .cal-f textarea { display: block; margin-top: 4px; width: 100%; box-sizing: border-box; min-height: 46px; padding: 10px 12px; border: 1px solid #d6cdbb; border-radius: 7px; font: inherit; font-size: 16px; font-weight: 400; color: inherit; background: #fff; }
.cal-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.cal-warnbox { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 10px; padding: 10px 12px; border-radius: 8px; background: #fbf1df; cursor: pointer; }
.cal-warnbox input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--c-navy); }
.cal-warnbox b { display: block; font-size: 15px; } .cal-warnbox span { font-size: 13px; color: #6a5530; }
.cal-msg { margin: 0 0 8px; color: var(--c-red); font-size: 14px; } .cal-msg:empty { display: none; }
.cal-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cal-btn { min-height: 46px; padding: 0 20px; border: 0; border-radius: 7px; background: var(--c-navy); color: #fff; font-family: inherit; font-weight: 600; font-size: 14px; line-height: 1; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }
.cal-btn.cal-ghost { background: transparent; color: var(--c-navy); border: 1.5px solid var(--c-navy); }
.cal-btn:disabled { opacity: .6; }
.cal-del { margin-left: auto; min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--c-red); text-decoration: underline; font: inherit; cursor: pointer; }

/* "Today" warning */
.cal-alert { margin: 0 0 14px; padding: 12px 14px; background: #fffaf0; border: 1px solid #ead7b2; border-left: 5px solid var(--c-brass); border-radius: 10px; color: var(--c-navy); font-size: 15px; box-shadow: 0 2px 8px rgba(13, 36, 56, .08); }
.cal-alert-h { display: flex; align-items: center; gap: 8px; }
.cal-alert-h > svg { width: 22px; height: 22px; color: var(--c-brass); flex: none; }
.cal-alert-h b { font-size: 17px; }
.cal-alert-h span { color: var(--c-soft); font-size: 13.5px; }
.cal-alert-h .cal-x { margin-left: auto; width: 40px; height: 40px; }
.cal-alert ul { list-style: none; margin: 6px 0 8px; padding: 0; display: grid; gap: 6px; }
.cal-alert li { display: flex; gap: 9px; align-items: flex-start; line-height: 1.4; }
.cal-alert li .cal-dot { width: 10px; height: 10px; margin-top: 6px; }
.cal-alert li.is-crew svg { width: 18px; height: 18px; flex: none; color: var(--t-delivery); margin-top: 2px; }
.cal-alert em { font-style: normal; color: #8a6634; font-weight: 600; }
.cal-alert-next { margin: 0 0 8px; font-size: 13.5px; color: var(--c-soft); }
.cal-alert-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.cal-alert .cal-btn { min-height: 42px; font-size: 13px; }
.cal-also { font-style: normal; font-size: .85em; color: var(--c-soft); white-space: nowrap; }
/* Ryan 10-29: a day with a meeting, call, arrival... (anything that warns admins) glows red in 12 months, Month and Week */
.cal { --c-glow: #e03131; }
.cal-glow-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; box-shadow: 0 0 0 2px var(--c-glow), 0 0 6px 2px rgba(224, 49, 49, .55); }
.cal-md.is-alert { box-shadow: 0 0 0 2px var(--c-glow), 0 0 7px 2px rgba(224, 49, 49, .55); }
.cal-md.is-alert.is-today { box-shadow: inset 0 0 0 2px var(--c-brass), 0 0 0 2px var(--c-glow), 0 0 7px 2px rgba(224, 49, 49, .55); }
.cal-cell.is-alert { position: relative; z-index: 1; box-shadow: inset 0 0 0 2px var(--c-glow), 0 0 10px 2px rgba(224, 49, 49, .5); }
.cal-wday.is-alert { border-color: var(--c-glow); box-shadow: 0 0 0 1px var(--c-glow), 0 0 12px 3px rgba(224, 49, 49, .42); }
.cal-wday.is-alert.is-today { box-shadow: 0 0 0 2px var(--c-brass), 0 0 0 4px var(--c-glow), 0 0 14px 4px rgba(224, 49, 49, .42); }
.cal-wday.is-alert { position: relative; }
.cal-md.is-alert::after, .cal-cell.is-alert::after, .cal-wday.is-alert::after {   /* the soft pulse: a glow layer that breathes */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 12px 4px rgba(224, 49, 49, .55); opacity: .45;
}
@media (prefers-reduced-motion: no-preference) {
  .cal-md.is-alert::after, .cal-cell.is-alert::after, .cal-wday.is-alert::after { animation: cal-glow 2.4s ease-in-out infinite; }
  @keyframes cal-glow { 50% { opacity: 1; } }
}
/* Ryan 10-29: swipe between days (a short slide in from the side it came from) */
.cal-swipe-hint { display: none; margin: -2px 0 10px; font-size: 13px; color: var(--c-soft); }
@media (pointer: coarse) { .cal-swipe-hint { display: block; } }
@media (prefers-reduced-motion: no-preference) {
  .cal-body.cal-in-left { animation: cal-in-left .22s ease-out; }
  .cal-body.cal-in-right { animation: cal-in-right .22s ease-out; }
  @keyframes cal-in-left { from { transform: translateX(28px); opacity: .35; } }
  @keyframes cal-in-right { from { transform: translateX(-28px); opacity: .35; } }
}
.cal { touch-action: pan-y; }
.cal[data-view=day] .cal-body { min-height: 55vh; }   /* room to swipe on a quiet day */