/* =====================================================================
   Calendar page (cal-) and the booking box (bk-), which the Dialer uses too.
   Colours come from the tokens in app.css.
   ===================================================================== */

/* ---------- page layout ---------- */
.cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; align-items: start; }
.cal-main { min-width: 0; padding: 0.9rem; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border); }
.cal-side { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.cal-side .card h2 { font-size: 1rem; margin-bottom: 0.5rem; }
.cal-side-hint { margin: -0.2rem 0 0.6rem !important; font-size: 0.8rem; color: var(--muted) !important; }
.cal-loading { padding: 2rem 1rem; text-align: center; }

.cal-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin-bottom: 0.8rem; }
.cal-nav { display: flex; align-items: center; gap: 0.3rem; }
.cal-arrow { padding: 0.4rem 0.5rem; }
.cal-range { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }
.cal-sum { margin-left: auto; font-size: 0.8rem; color: var(--muted); }
.cal-tip { margin: 0.6rem 0 0; font-size: 0.76rem; color: var(--muted); }

/* ---------- the week grid ---------- */
.cal-scroll { overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid var(--border); background: rgba(5, 10, 28, 0.35); }
.cal-grid { --hour-h: 3.6rem; --gutter: 3.3rem; min-width: 700px; }
.cal-head, .cal-body { display: grid; grid-template-columns: var(--gutter) repeat(7, minmax(0, 1fr)); }
.cal-head { border-bottom: 1px solid var(--border-strong); background: rgba(8, 14, 36, 0.6); }
.cal-dayhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.15rem 0.35rem; padding: 0.5rem 0.2rem;
               min-width: 0; overflow: hidden;
               font-size: 0.75rem; color: var(--muted); font-weight: 600; border-left: 1px solid var(--border); }
.cal-dayhead b { font-size: 1.05rem; color: var(--text); font-weight: 800; }
.cal-dayhead small { display: inline-grid; place-items: center; min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem;
                     border-radius: 99px; background: var(--accent-soft); color: var(--accent-bright); font-size: 0.66rem; font-weight: 800; }
.cal-dayhead.today { color: var(--accent-bright); }
.cal-dayhead.today b { color: #fff; background: var(--accent); border-radius: 7px; padding: 0 0.35rem; }
.cal-dayhead.weekend, .cal-col.weekend { background-color: rgba(255, 255, 255, 0.012); }

.cal-body { position: relative; height: calc(var(--hour-h) * var(--hours)); }
.cal-hours { position: relative; }
.cal-hour { height: var(--hour-h); position: relative; }
.cal-hour span { position: absolute; top: -0.5rem; right: 0.45rem; font-size: 0.68rem; color: var(--muted);
                 font-variant-numeric: tabular-nums; }
.cal-hour:first-child span { top: 0.1rem; }
.cal-col { position: relative; border-left: 1px solid var(--border); cursor: copy;
           background-image:
             linear-gradient(to bottom, var(--border) 1px, transparent 1px),
             linear-gradient(to bottom, transparent calc(var(--hour-h) / 2), rgba(110, 140, 220, 0.06) calc(var(--hour-h) / 2),
                             rgba(110, 140, 220, 0.06) calc(var(--hour-h) / 2 + 1px), transparent calc(var(--hour-h) / 2 + 1px));
           background-size: 100% var(--hour-h); }
.cal-col:hover { background-color: rgba(77, 155, 255, 0.03); }
.cal-col.today { background-color: rgba(47, 123, 255, 0.05); }

.cal-ev { position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0.05rem;
          min-height: 1.15rem; padding: 0.2rem 0.4rem; overflow: hidden; text-align: left; cursor: pointer;
          border-radius: 7px; border: 1px solid transparent; border-left-width: 3px;
          font: inherit; font-size: 0.74rem; line-height: 1.2; color: var(--text); }
.cal-ev:hover { filter: brightness(1.18); z-index: 2; }
.cal-ev.k-call { background: rgba(43, 201, 194, 0.17); border-color: rgba(43, 201, 194, 0.35); border-left-color: var(--teal); }
.cal-ev.k-meeting { background: rgba(157, 128, 255, 0.2); border-color: rgba(157, 128, 255, 0.38); border-left-color: var(--purple); }
.cal-ev-time { font-weight: 700; font-size: 0.68rem; color: var(--text-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cal-ev-theirs { font-size: 0.66rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.cal-ev-title { font-weight: 700; overflow: hidden; display: -webkit-box; -webkit-line-clamp: var(--lines, 2); -webkit-box-orient: vertical; word-break: break-word; line-height: 1.2; flex: none; }
.cal-ev.short { flex-direction: row; align-items: baseline; gap: 0.35rem; max-width: 100%; padding-top: 0.1rem; padding-bottom: 0.1rem; }
.cal-ev.short .cal-ev-title { -webkit-line-clamp: 1; white-space: nowrap; text-overflow: ellipsis; display: block; flex: 1 1 auto; min-width: 0; }
.cal-ev.s-showed { border-left-color: var(--green); }
.cal-ev.s-no_show { background: var(--red-soft); border-color: rgba(255, 95, 120, 0.35); border-left-color: var(--red); }
.cal-ev.s-no_show .cal-ev-title, .cal-ev.s-cancelled .cal-ev-title { text-decoration: line-through; }
.cal-ev.s-cancelled { background: var(--grey-soft); border-color: rgba(138, 149, 184, 0.25); border-left-color: var(--grey); opacity: 0.6; }
.cal-star { color: var(--amber); margin-right: 0.2rem; }

.cal-now { position: absolute; left: 0; right: 0; z-index: 3; height: 2px; background: var(--red); pointer-events: none; }
.cal-now::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }

/* ---------- lists (Upcoming, Did they show up?, a day on a phone) ---------- */
.cal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.cal-group { margin: 0.55rem 0 0.1rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.cal-group:first-child { margin-top: 0; }
.cal-group small { font-weight: 600; letter-spacing: 0.02em; text-transform: none; margin-left: 0.3rem; }
.cal-none { font-size: 0.85rem; color: var(--muted); }
.cal-item { display: flex; align-items: center; gap: 0.7rem; width: 100%; padding: 0.55rem 0.65rem; text-align: left;
            border-radius: var(--radius-sm); border: 1px solid var(--border); background: rgba(5, 10, 28, 0.35);
            color: var(--text); font: inherit; cursor: pointer; }
.cal-item:hover { border-color: var(--accent-bright); background: var(--accent-soft); }
.cal-item-when { flex: none; display: flex; flex-direction: column; min-width: 3.1rem; font-variant-numeric: tabular-nums; }
.cal-item-when b { font-size: 0.95rem; }
.cal-item-when small { font-size: 0.7rem; color: var(--muted); }
.cal-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cal-item-main b { font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-item-main small { font-size: 0.74rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-item-pills { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; }
.cal-item-pills .pill { font-size: 0.66rem; padding: 0.08rem 0.45rem; }
.cal-link-dot { display: inline-flex; color: var(--muted); }
.cal-link-dot svg { width: 0.9rem; height: 0.9rem; }
.cal-item-wrap.s-cancelled .cal-item, .cal-item-wrap.s-no_show .cal-item { opacity: 0.7; }
.cal-item-wrap.s-cancelled .cal-item-main b, .cal-item-wrap.s-no_show .cal-item-main b { text-decoration: line-through; }
.cal-needs { border-color: rgba(243, 181, 63, 0.45); }
.cal-quick { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.3rem 0 0.35rem; }
.cal-quick .btn { flex: 1 1 auto; }
.cal-q-showed { color: var(--green); border-color: rgba(47, 214, 123, 0.4); }
.cal-q-noshow { color: var(--red); border-color: rgba(255, 95, 120, 0.4); }

/* phone: one day at a time */
.cal-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.25rem; margin-bottom: 0.8rem; }
.cal-day { display: flex; flex-direction: column; align-items: center; gap: 0.05rem; padding: 0.4rem 0 0.3rem;
           border-radius: var(--radius-sm); border: 1px solid var(--border); background: rgba(5, 10, 28, 0.35);
           color: var(--text-soft); font: inherit; font-size: 0.68rem; font-weight: 600; cursor: pointer; }
.cal-day b { font-size: 1rem; color: var(--text); }
.cal-day i { font-style: normal; min-height: 0.95rem; font-size: 0.64rem; font-weight: 800; color: var(--accent-bright); }
.cal-day.today { border-color: rgba(77, 155, 255, 0.55); }
.cal-day.on { background: var(--accent); border-color: var(--accent-bright); color: #fff; }
.cal-day.on b, .cal-day.on i { color: #fff; }
.cal-day-title { margin: 0 0 0.5rem; font-size: 1rem; }
.cal-day-title small { font-size: 0.8rem; color: var(--muted); font-weight: 600; margin-left: 0.3rem; }
.cal-empty { padding: 1.2rem 0.5rem; text-align: center; color: var(--muted); }
.cal-empty p { margin: 0 0 0.6rem; }

@media (max-width: 1180px) {
  .cal-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .cal-main { padding: 0.75rem; }
  .cal-range { font-size: 0.98rem; }
  .cal-sum { width: 100%; margin-left: 0; }
  .cal-tip { display: none; }
}

/* =====================================================================
   The booking box (new / edit / details). Sits above the lead panel.
   The Dialer can keep its call panel visible underneath by setting
   --bk-bottom-space on <body> to the call panel's height.
   ===================================================================== */
.bk-shell { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center;
            padding: 1rem 1rem var(--bk-bottom-space, 1rem); pointer-events: none; }
.bk-backdrop { position: fixed; inset: 0 0 var(--bk-bottom-space, 0) 0; background: rgba(2, 6, 18, 0.6); backdrop-filter: blur(2px); pointer-events: auto; }
body.bk-open { overflow: hidden; }
.bk-modal { position: relative; display: flex; flex-direction: column; width: min(560px, 100%);
            max-height: calc(100vh - 1rem - var(--bk-bottom-space, 1rem)); max-height: calc(100dvh - 1rem - var(--bk-bottom-space, 1rem));
            overflow: hidden; border-radius: var(--radius); background: var(--panel-solid);
            border: 1px solid var(--border-strong); box-shadow: var(--shadow); outline: none; pointer-events: auto;
            animation: bk-in 0.18s ease; }
@keyframes bk-in { from { opacity: 0; transform: translateY(8px) scale(0.99); } }
.bk-loading { padding: 2rem 1.3rem; }
.bk-form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.bk-head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem;
           padding: 1rem 1.2rem 0.8rem; border-bottom: 1px solid var(--border); }
.bk-head-text { min-width: 0; }
.bk-head h2 { margin: 0; font-size: 1.15rem; line-height: 1.3; overflow-wrap: anywhere; }
.bk-sub { margin: 0.15rem 0 0; font-size: 0.82rem; color: var(--muted); }
.bk-pills { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.35rem; }
.bk-signed-pill svg { width: 0.8rem; height: 0.8rem; fill: currentColor; stroke: none; }
.bk-x { padding: 0.4rem; flex: none; }
.bk-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0.9rem 1.2rem 1rem; }
.bk-body section { padding: 0.7rem 0; border-bottom: 1px solid var(--border); }
.bk-body section:first-child { padding-top: 0; }
.bk-body section:last-of-type { border-bottom: none; }
.bk-body section > p { font-size: 0.88rem; }
.bk-body h3 { margin: 0 0 0.45rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.bk-foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.75rem 1.2rem;
           border-top: 1px solid var(--border); background: rgba(8, 14, 36, 0.6); }
.bk-foot-gap { flex: 1; }
.bk-delete { color: #ffb3c0; }
.bk-delete:hover { background: var(--red-soft); }

/* form */
.bk-field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.8rem; min-width: 0; }
.bk-field label small, .bk-label small { font-weight: 400; color: var(--muted); margin-left: 0.25rem; }
.bk-label { font-size: 0.82rem; font-weight: 600; color: var(--text-soft); }
.bk-field input, .bk-field select, .bk-field textarea { width: 100%; min-width: 0; }
.bk-field textarea { resize: vertical; min-height: 4.5rem; }
.bk-field input[type="date"], .bk-field input[type="time"] { min-height: 2.4rem; }
.bk-row3 { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 0 0.7rem; }
.bk-seg { display: inline-flex; padding: 0.2rem; gap: 0.2rem; border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
          background: rgba(5, 10, 28, 0.6); align-self: flex-start; }
.bk-seg label { position: relative; cursor: pointer; }
.bk-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.bk-seg span { display: block; padding: 0.35rem 1rem; border-radius: 7px; font-weight: 700; font-size: 0.85rem; color: var(--text-soft); }
.bk-seg input:checked + span { background: var(--accent); color: #fff; }
.bk-seg input:focus-visible + span { outline: 2px solid var(--accent-bright); outline-offset: 1px; }
.bk-field-error, .bk-error { margin: 0.2rem 0 0; color: var(--red); font-size: 0.82rem; font-weight: 600; }
.bk-error { margin: 0.2rem 0 0; padding: 0.55rem 0.75rem; border-radius: var(--radius-sm); background: var(--red-soft); border: 1px solid rgba(255, 95, 120, 0.4); color: #ffd3da; }
.bk-field input[aria-invalid="true"] { border-color: var(--red); }
.hint.bk-from-call { margin-top: 0.4rem; }

.bk-search { position: relative; }
.bk-search input { width: 100%; }
.bk-results { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); max-height: 16rem; overflow-y: auto;
              list-style: none; margin: 0; padding: 0.3rem; border-radius: var(--radius-sm); background: var(--panel-raised);
              border: 1px solid var(--border-strong); box-shadow: var(--shadow); }
.bk-result { display: flex; flex-direction: column; width: 100%; padding: 0.45rem 0.6rem; border: none; border-radius: 7px;
             background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.bk-result b { font-size: 0.88rem; }
.bk-result small { font-size: 0.74rem; color: var(--muted); }
.bk-result:hover, .bk-result:focus { background: var(--accent-soft); outline: none; }
.bk-result-none { padding: 0.5rem 0.6rem; font-size: 0.84rem; color: var(--muted); }

.bk-chip, .bk-lead-open { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.7rem; border-radius: var(--radius-sm);
                          border: 1px solid var(--border-strong); background: var(--panel); color: var(--text); }
.bk-chip-text, .bk-lead-open > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bk-chip-text b, .bk-lead-open b { font-size: 0.9rem; overflow-wrap: anywhere; }
.bk-chip-text small, .bk-lead-open small { font-size: 0.76rem; color: var(--muted); }
.bk-chip-lock { flex: none; font-size: 0.74rem; color: var(--muted); }
.bk-lead-icon { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 8px;
                background: var(--accent-soft); color: var(--accent-bright); }
.bk-lead-open { width: 100%; font: inherit; text-align: left; cursor: pointer; }
.bk-lead-open:hover { border-color: var(--accent-bright); background: var(--accent-soft); }
.bk-lead-open > svg { color: var(--muted); width: 1rem; height: 1rem; }
.bk-phone { margin: 0.55rem 0 0 0; }
.bk-note { margin: 0.45rem 0 0; padding: 0.4rem 0.6rem; border-radius: 8px; font-size: 0.8rem; color: var(--amber);
           background: var(--amber-soft); border: 1px solid rgba(243, 181, 63, 0.3); }

.bk-when { margin: -0.2rem 0 0.9rem; padding: 0.6rem 0.75rem; border-radius: var(--radius-sm);
           background: var(--accent-soft); border: 1px solid rgba(77, 155, 255, 0.3); font-size: 0.86rem; }
.bk-when span { color: var(--text-soft); }
.bk-when-theirs { margin-top: 0.2rem; }
.bk-when-theirs b { color: var(--teal); }
.bk-when-theirs.odd b { color: var(--amber); }
.bk-when-theirs em { display: block; font-style: normal; font-size: 0.78rem; color: var(--amber); }
.bk-warn { margin: 0.35rem 0 0; font-size: 0.78rem; color: var(--amber); }

/* details */
.bk-time-card { display: flex; flex-direction: column; gap: 0.1rem; }
.bk-time-day { font-size: 1.05rem; font-weight: 800; }
.bk-time-day small { font-size: 0.82rem; font-weight: 600; color: var(--muted); margin-left: 0.3rem; }
.bk-time-main { font-size: 0.95rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.bk-time-main small { font-weight: 500; color: var(--muted); margin-left: 0.25rem; }
.bk-time-theirs { font-size: 0.88rem; color: var(--teal); font-weight: 600; }
.bk-time-theirs.odd { color: var(--amber); }
.bk-link-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.bk-link-text { margin: 0.4rem 0 0; font-family: var(--mono); font-size: 0.76rem; color: var(--muted); overflow-wrap: anywhere; }
.bk-notes { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.88rem; color: var(--text-soft); }
.bk-status { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.35rem; }
.bk-status-btn { padding: 0.5rem 0.3rem; border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
                 background: var(--panel-raised); color: var(--text-soft); font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; }
.bk-status-btn:hover { border-color: var(--accent-bright); color: var(--text); }
.bk-status-btn:disabled { opacity: 0.6; cursor: wait; }
.bk-status-btn.on.s-booked { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); }
.bk-status-btn.on.s-showed { background: var(--green-soft); border-color: var(--green); color: var(--green); }
.bk-status-btn.on.s-no_show { background: var(--red-soft); border-color: var(--red); color: var(--red); }
.bk-status-btn.on.s-cancelled { background: var(--grey-soft); border-color: var(--grey); color: var(--text); }
.bk-signed { display: flex; align-items: flex-start; gap: 0.6rem; margin-top: 0.7rem; padding: 0.6rem 0.7rem; cursor: pointer;
             border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: rgba(5, 10, 28, 0.35); }
.bk-signed input { width: 1.15rem; height: 1.15rem; margin: 0.1rem 0 0; accent-color: var(--amber); flex: none; }
.bk-signed span { display: flex; flex-direction: column; }
.bk-signed b { color: var(--text); font-size: 0.9rem; }
.bk-signed small { font-weight: 400; color: var(--muted); font-size: 0.76rem; }
.bk-signed:has(input:checked) { border-color: rgba(243, 181, 63, 0.55); background: var(--amber-soft); }

@media (max-width: 600px) {
  .bk-shell { align-items: flex-end; padding: 0.5rem 0 var(--bk-bottom-space, 0); }
  .bk-modal { width: 100%; border-radius: var(--radius) var(--radius) 0 0;
              max-height: calc(100vh - 0.5rem - var(--bk-bottom-space, 0px)); max-height: calc(100dvh - 0.5rem - var(--bk-bottom-space, 0px)); }
  .bk-head, .bk-body, .bk-foot { padding-left: 1rem; padding-right: 1rem; }
  .bk-row3 { grid-template-columns: 1fr 1fr; }
  .bk-row3 .bk-field:first-child { grid-column: 1 / -1; }
  .bk-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-foot .btn { flex: 1 1 auto; }
  .bk-foot-gap { display: none; }
  .bk-field input, .bk-field select, .bk-field textarea { font-size: 16px; }  /* stops iPhones zooming in */
}