/* =============================================================
   mc-schedule.css - iMIP and Create Schedule (js/mc-schedule.js).

   Both are pictures with real controls laid over them. Boxes are placed in
   percentages of the picture (set inline from config.js), so they follow it at
   any size. Sizes of text are written in "picture pixels": N * var(--p), where
   --p is one pixel of THAT picture, worked out from the picture's own width
   (container query units), never from the browser window.
   ============================================================= */

/* ---------- iMIP ---------- */
.mc-imip {
  position: absolute; inset: 0; z-index: 30;
  container-type: size;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #dbe8f8;
  --bar: calc(46 * var(--u));
  opacity: 0; transition: opacity 150ms ease;
}
.mc-imip[hidden] { display: none; }
.mc-imip.on { opacity: 1; }

/* The way back to Midea Connect, in the strip above the picture (outside it). */
.imip-bar { position: absolute; left: 0; right: 0; top: 0; height: var(--bar); display: flex; align-items: center; padding: 0 calc(16 * var(--u)); z-index: 3; }
.imip-back {
  display: inline-flex; align-items: center; gap: calc(6 * var(--u));
  height: calc(34 * var(--u)); padding: 0 calc(14 * var(--u)) 0 calc(8 * var(--u));
  border-radius: calc(17 * var(--u)); background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 1px rgba(20, 90, 200, 0.18);
  color: #1663c7; font-size: calc(16 * var(--u)); font-weight: 600;
  transition: background-color 120ms ease, transform 80ms ease;
}
.imip-back svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); stroke: #1663c7; }
.imip-back:hover { background: #fff; }
.imip-back:active { transform: scale(0.97); }

.imip-stage {
  --p: calc(100cqw / 1815);            /* one pixel of imip.png (a descendant reads this) */
  position: relative;
  width: min(100cqw, calc((100cqh - 2 * var(--bar)) * 1815 / 866));
  aspect-ratio: 1815 / 866;
  container-type: inline-size;
  user-select: none;
}
.imip-ref { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; -webkit-user-drag: none; }

/* New Schedule: a transparent button over the picture's own, with a hover cue. */
.imip-hot { position: absolute; border-radius: calc(8 * var(--p)); transition: background-color 110ms ease, box-shadow 110ms ease, transform 80ms ease; }
.imip-hot:hover { background: rgba(255, 255, 255, 0.16); box-shadow: 0 0 0 calc(3 * var(--p)) rgba(28, 134, 252, 0.35); }
.imip-hot:active { transform: scale(0.98); background: rgba(0, 40, 120, 0.12); }

/* The day under the pointer: a click on it schedules something on that day. */
.imip-cell-hover { position: absolute; pointer-events: none; background: rgba(28, 134, 252, 0.09); box-shadow: inset 0 0 0 calc(2 * var(--p)) rgba(28, 134, 252, 0.4); }
.imip-cell-hover[hidden] { display: none; }

/* The player's meeting, drawn over its day. */
.imip-events { position: absolute; inset: 0; pointer-events: none; }
.imip-ev {
  position: absolute; pointer-events: auto;
  display: flex; flex-direction: column; justify-content: center; gap: calc(2 * var(--p));
  padding: calc(4 * var(--p)) calc(8 * var(--p));
  background: #d6e7ff; color: #0f4ea8; text-align: left;
  border-left: calc(5 * var(--p)) solid #1c86fc; border-radius: calc(4 * var(--p));
  font-size: calc(15 * var(--p)); line-height: 1.2; overflow: hidden;
  box-shadow: 0 calc(1 * var(--p)) calc(3 * var(--p)) rgba(15, 60, 140, 0.22);
  transition: background-color 110ms ease;
}
.imip-ev:hover { background: #c5ddff; }
.imip-ev .ev-time { font-weight: 700; white-space: nowrap; }
.imip-ev .ev-subject { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imip-ev.fresh { animation: imipFresh 1.4s ease-out 1; }
@keyframes imipFresh {
  0% { box-shadow: 0 0 0 0 rgba(28, 134, 252, 0.7); transform: scale(0.96); opacity: 0; }
  25% { opacity: 1; transform: scale(1); }
  100% { box-shadow: 0 0 0 calc(14 * var(--p)) rgba(28, 134, 252, 0); }
}

.imip-detail-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(20, 40, 80, 0.18); }
.imip-detail-wrap[hidden] { display: none; }
.imip-detail {
  width: calc(560 * var(--p)); background: #fff; border-radius: calc(10 * var(--p)); overflow: hidden;
  box-shadow: 0 calc(12 * var(--p)) calc(40 * var(--p)) rgba(15, 40, 90, 0.35), 0 0 0 1px rgba(20, 90, 200, 0.15);
  color: #1c2a44; font-size: calc(22 * var(--p)); user-select: text;
}
.imip-detail .d-head { display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--p)); padding: calc(16 * var(--p)) calc(20 * var(--p)); background: #dbecfe; border-bottom: 1px solid #c6dcf7; }
.imip-detail .d-subject { font-weight: 700; font-size: calc(26 * var(--p)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imip-detail .d-x { font-size: calc(34 * var(--p)); line-height: 1; padding: 0 calc(6 * var(--p)); color: #4a5f86; }
.imip-detail .d-row { display: flex; gap: calc(16 * var(--p)); padding: calc(12 * var(--p)) calc(20 * var(--p)); border-bottom: 1px solid #edf1f7; }
.imip-detail .d-row:last-child { border-bottom: none; }
.imip-detail .d-row b { flex: 0 0 calc(130 * var(--p)); color: #6b7a96; font-weight: 600; }
.imip-detail .d-row span { min-width: 0; overflow-wrap: anywhere; }

/* ---------- Create Schedule ---------- */
.mc-cs {
  position: absolute; inset: 0; z-index: 40;
  container-type: size;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 32, 56, 0.38);
  opacity: 0; transition: opacity 150ms ease;
}
.mc-cs[hidden] { display: none; }
.mc-cs.on { opacity: 1; }

.cs-stage {
  --p: calc(100cqw / 1415);            /* one pixel of createmeeting.png */
  position: relative;
  width: min(calc(100cqw * 0.66), calc(100cqh * 0.94 * 1415 / 1112));
  aspect-ratio: 1415 / 1112;
  container-type: inline-size;
  border-radius: calc(14 * var(--p)); overflow: visible;
  box-shadow: 0 calc(20 * var(--p)) calc(60 * var(--p)) rgba(4, 20, 60, 0.5);
  color: #1d2543;
  font-family: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
.cs-ref { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: fill; border-radius: calc(14 * var(--p)); -webkit-user-drag: none; user-select: none; }

/* A patch of the picture's own colour over something it already shows filled in. */
.cs-cover { position: absolute; }
.cs-white { background: #fcfdfe; }
.cs-body { background: #f5f9fd; }
.cs-val { display: flex; align-items: center; font-size: calc(29 * var(--p)); font-weight: 500; letter-spacing: 0.2px; padding-left: calc(6 * var(--p)); pointer-events: none; white-space: nowrap; }

/* Transparent controls over the picture's own. */
.cs-hot { position: absolute; border-radius: calc(8 * var(--p)); transition: background-color 110ms ease, box-shadow 110ms ease, transform 80ms ease; }
.cs-hot:hover { background: rgba(28, 134, 252, 0.06); box-shadow: inset 0 0 0 calc(2 * var(--p)) rgba(28, 134, 252, 0.45); }
.cs-hot.open { box-shadow: inset 0 0 0 calc(3 * var(--p)) rgba(28, 134, 252, 0.8); }
.cs-hot:active { transform: scale(0.985); }
.cs-save:hover { background: rgba(255, 255, 255, 0.14); box-shadow: none; }
.cs-save:active { background: rgba(0, 30, 100, 0.16); }
.cs-cancel:hover { background: rgba(28, 134, 252, 0.07); box-shadow: none; }
.cs-attfield { border-radius: calc(6 * var(--p)); }

.cs-subject {
  position: absolute; border: none; outline: none; background: #fcfdfe; border-radius: calc(4 * var(--p));
  padding: 0 calc(8 * var(--p)); font-family: inherit; font-size: calc(29 * var(--p)); font-weight: 500; color: #1d2543; letter-spacing: 0.2px;
}
.cs-subject::placeholder { color: #93a4c6; font-weight: 400; }
.cs-subject:focus { box-shadow: 0 0 0 calc(3 * var(--p)) rgba(28, 134, 252, 0.55); }

/* Meeting Dial */
.cs-radio { position: absolute; display: flex; align-items: center; gap: calc(16 * var(--p)); padding: 0 calc(4 * var(--p)); border-radius: calc(8 * var(--p)); font-size: calc(29 * var(--p)); font-weight: 500; color: #1d2543; text-align: left; white-space: nowrap; }
.cs-radio i { flex: 0 0 auto; width: calc(40 * var(--p)); height: calc(40 * var(--p)); border-radius: 50%; border: calc(3 * var(--p)) solid #8d9dbb; background: #fff; box-sizing: border-box; transition: border-color 110ms ease, box-shadow 110ms ease; }
.cs-radio:hover i { border-color: #1c86fc; }
.cs-radio.on { color: #1163d6; }
.cs-radio.on i { border-color: #1c86fc; box-shadow: inset 0 0 0 calc(8 * var(--p)) #fff, inset 0 0 0 calc(30 * var(--p)) #1c86fc; }
.cs-help { position: absolute; display: flex; align-items: center; justify-content: center; }
.cs-help { color: #fff; font-weight: 700; font-size: calc(26 * var(--p)); }
.cs-help::before { content: ""; position: absolute; width: calc(40 * var(--p)); height: calc(40 * var(--p)); border-radius: 50%; background: #1c86fc; z-index: -1; }
.cs-help { z-index: 1; }

/* Attendees */
.cs-chips { position: absolute; display: flex; align-items: center; gap: calc(12 * var(--p)); pointer-events: none; overflow: hidden; }
.cs-chip {
  display: inline-flex; align-items: center; gap: calc(12 * var(--p)); height: calc(52 * var(--p)); padding: 0 calc(12 * var(--p)) 0 calc(18 * var(--p));
  background: #e8effb; border: calc(2 * var(--p)) solid #d3dff3; border-radius: calc(6 * var(--p));
  font-size: calc(29 * var(--p)); font-weight: 500; white-space: nowrap; pointer-events: none;
  animation: csChip 160ms ease-out;
}
.cs-chip button { pointer-events: auto; font-size: calc(30 * var(--p)); line-height: 1; color: #55688e; padding: 0 calc(2 * var(--p)); border-radius: 50%; }
.cs-chip button:hover { color: #d13438; }
@keyframes csChip { from { transform: scale(0.85); opacity: 0; } to { transform: none; opacity: 1; } }

.cs-avail { display: flex; align-items: center; gap: calc(12 * var(--p)); padding-left: calc(8 * var(--p)); font-size: calc(29 * var(--p)); color: #4a9a2a; }
.cs-avail > * { visibility: hidden; }
.cs-avail.on > * { visibility: visible; }
.cs-avail i { flex: 0 0 auto; width: calc(36 * var(--p)); height: calc(36 * var(--p)); border-radius: 50%; background: #5bad38; color: #fff; font-style: normal; font-size: calc(24 * var(--p)); display: flex; align-items: center; justify-content: center; }

/* Gentle validation, beside Save. */
.cs-msg { position: absolute; display: flex; align-items: center; justify-content: flex-end; padding-right: calc(20 * var(--p)); font-size: calc(26 * var(--p)); font-weight: 500; color: #b4570f; opacity: 0; transform: translateY(calc(4 * var(--p))); transition: opacity 160ms ease, transform 160ms ease; pointer-events: none; text-align: right; }
.cs-msg.on { opacity: 1; transform: none; }

.nudge { animation: csNudge 1.4s ease-out 1; }
@keyframes csNudge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 120, 30, 0); }
  15%, 60% { box-shadow: 0 0 0 calc(4 * var(--p)) rgba(224, 120, 30, 0.6); }
}

/* Pickers */
.cs-pop {
  position: absolute; z-index: 5; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: calc(10 * var(--p));
  box-shadow: 0 calc(10 * var(--p)) calc(32 * var(--p)) rgba(15, 40, 90, 0.32), 0 0 0 calc(2 * var(--p)) rgba(28, 134, 252, 0.35);
}
.cs-pop[hidden] { display: none; }
.cs-timepop { height: calc(350 * var(--p)); }
.cs-now { padding: calc(8 * var(--p)) calc(16 * var(--p)); background: #eaf2fe; color: #35507f; font-size: calc(22 * var(--p)); font-weight: 600; letter-spacing: 0.5px; flex: 0 0 auto; }
.cs-now[hidden] { display: none; }
.cs-list { flex: 1; min-height: 0; overflow-y: auto; padding: calc(4 * var(--p)) 0; }
.cs-opt { display: flex; align-items: baseline; justify-content: space-between; width: 100%; height: calc(50 * var(--p)); padding: 0 calc(16 * var(--p)); font-size: calc(27 * var(--p)); font-weight: 500; color: #1d2543; text-align: left; }
.cs-opt small { font-size: calc(19 * var(--p)); color: #7a89a6; font-weight: 400; }
.cs-opt:hover { background: #edf4ff; }
.cs-opt.sel { background: #dcebff; color: #0f5bd0; }

.cs-attpop { padding: calc(10 * var(--p)); gap: calc(8 * var(--p)); }
.cs-search { flex: 0 0 auto; height: calc(56 * var(--p)); padding: 0 calc(16 * var(--p)); border: calc(2 * var(--p)) solid #b7c7e6; border-radius: calc(6 * var(--p)); outline: none; font-family: inherit; font-size: calc(27 * var(--p)); color: #1d2543; background: #fcfdfe; }
.cs-search:focus { border-color: #1c86fc; box-shadow: 0 0 0 calc(3 * var(--p)) rgba(28, 134, 252, 0.25); }
.cs-emps { padding: 0; }
.cs-emp { display: flex; align-items: center; gap: calc(16 * var(--p)); width: 100%; height: calc(68 * var(--p)); padding: 0 calc(12 * var(--p)); border-radius: calc(6 * var(--p)); text-align: left; }
.cs-emp:hover { background: #edf4ff; }
.cs-emp img { flex: 0 0 auto; width: calc(48 * var(--p)); height: calc(48 * var(--p)); border-radius: calc(8 * var(--p)); object-fit: cover; }
.cs-emp .who { display: flex; flex-direction: column; min-width: 0; }
.cs-emp b { font-size: calc(26 * var(--p)); font-weight: 600; color: #1d2543; }
.cs-emp small { font-size: calc(20 * var(--p)); color: #6b7a96; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-none { padding: calc(20 * var(--p)); color: #7a89a6; font-size: calc(24 * var(--p)); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .mc-imip, .mc-cs, .cs-msg { transition-duration: 1ms; }
  .imip-ev.fresh, .cs-chip, .nudge { animation: none; }
}