/* The shared calendar board (Smoothin.PrivateModels.Calendar, task #93). These rules came out of the CRM's
   crm.css, where they were scoped under .crm; they are scoped under .cal-board here so the SAME board renders
   the same way inside the CRM (where .crm is an ancestor and the two scopes agree declaration for
   declaration) and inside a Workspace page (where there is no .crm at all). The palette rides the app-wide
   variables exactly as the CRM's does, so tenant styling reaches it. Only the generic chrome the board
   actually uses is re-declared — card, buttons, pills, the form rows of the booking dialog, the modal — not
   the CRM's whole visual system. */

.cal-board { --indigo:var(--accent, #4F46E5); --indigo-dark:var(--accent-strong, #4338CA); --indigo-soft:color-mix(in srgb, var(--accent, #4F46E5) 8%, white); --indigo-line:color-mix(in srgb, var(--accent, #4F46E5) 20%, white); --card:var(--surface, #FFFFFF); --line:var(--border, #E8EAEF); --line-soft:#F1F2F5; --ink:var(--text, #15171C); --muted:var(--text-muted, #6B7280); --faint:#9AA0AA; --red:var(--danger, #DC2626); --red-soft:#FEECEC; --amber:var(--warning, #B45309); --amber-soft:#FEF3E2; --green:var(--success, #047857); --green-soft:#E7F6F0; --slate-soft:#F3F4F6; --r:12px; --r-sm:8px; }
.cal-board * { box-sizing:border-box }
.cal-board { color:var(--ink); font-size:14px; line-height:1.5 }
.cal-board h2 { font-size:17px;margin:0;letter-spacing:-.01em }
.cal-board h3 { font-size:13px;margin:0;color:var(--muted);font-weight:600 }
.cal-board p { margin:0 }
.cal-board .card { background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden }
.cal-board .card + .card { margin-top:16px }
.cal-board .ch { padding:14px 18px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:10px;flex-wrap:wrap }
.cal-board .ch .rt { margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap }
.cal-board .cb { padding:18px }
.cal-board .btn { background:var(--indigo);color:#fff;border:0;border-radius:var(--r-sm);height:36px;padding:0 16px;font:inherit; font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center; white-space:nowrap;line-height:1 }
.cal-board .btn.ghost { background:#fff;color:var(--ink);border:1px solid var(--line) }
.cal-board .btn.sm { height:30px;padding:0 12px;font-size:13px }
.cal-board .btn:disabled { opacity:.45; cursor:not-allowed; }
.cal-board .pill { display:inline-flex;align-items:center;gap:6px;background:var(--indigo-soft);color:var(--indigo-dark); border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;white-space:nowrap }
.cal-board .pill.grey { background:var(--slate-soft);color:var(--muted) }
.cal-board .muted { color:var(--muted) }
.cal-board .faint { color:var(--faint) }
.cal-board .tiny { font-size:12px }
.cal-board .empty { padding:34px 18px;text-align:center;color:var(--muted) }
.cal-board .warn { background:var(--amber-soft); color:var(--amber); border-radius:var(--r-sm); padding:10px 12px; font-size:13px; }
.cal-board .quote { border-left:2px solid var(--indigo-line);padding-left:12px;color:var(--ink) }
.cal-board .help { color:var(--muted); font-size:12.5px; }
.cal-board .inline-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.cal-board .field-row { display:flex; flex-direction:column; gap:5px; margin-bottom:14px; }
.cal-board .field-row > span { font-weight:600; font-size:13px; }
.cal-board .field-row .help { color:var(--muted); font-size:12.5px; }
.cal-board input[type=text], .cal-board input[type=date], .cal-board input[type=time], .cal-board input[type=number],
.cal-board textarea, .cal-board select { border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 12px; font:inherit;width:100%;background:#fff }
.cal-board textarea { resize:vertical }

/* The zone note used to sit in the card header's right slot; the toolbar lives there now, so it gets a line
   of its own under the header rather than fighting six buttons for the width. */
.cal-board .cal-zone { padding:6px 18px 0; }

/* ---- the modal (the CRM's crm-scrim / crm-modal, renamed so a board outside the CRM has one) ---- */
.cal-board .cal-scrim { position:fixed; inset:0; background:rgba(18,20,26,.32); z-index:60; animation:cal-fade .14s ease; }
@keyframes cal-fade { from { opacity:0 } to { opacity:1 } }
.cal-board .cal-modal {
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:560px; max-width:94vw;
    max-height:86vh; display:flex; flex-direction:column; background:#fff; border-radius:14px; z-index:62;
    box-shadow:0 24px 60px rgba(0,0,0,.24); animation:cal-pop .15s ease;
}
@keyframes cal-pop { from { opacity:0; transform:translate(-50%,-46%) scale(.98) } to { opacity:1; transform:translate(-50%,-50%) scale(1) } }
.cal-board .cal-modal .mh { padding:20px 22px 0; }
.cal-board .cal-modal .mb { padding:14px 22px 4px; overflow:auto; flex:1; }
.cal-board .cal-modal .mb p { margin:0 0 6px; }
.cal-board .cal-modal .mf { padding:16px 22px 18px; display:flex; gap:8px; justify-content:flex-end; align-items:center; }
.cal-board .cal-modal .mf .left { margin-right:auto; }

/* ---- the grid: the team's occupancy, week and day (task #83) ------------------------------------------
   The week grid is one CSS grid: a fixed "who" column plus one column per day, so a person's row and the
   day headings can never drift apart. Both views draw the same working window, which is why a segment's
   position is a percentage of that window rather than of the cell. */

.cal-board .cal-card .ch h2 { white-space:nowrap }
.cal-board .cal-scroll { overflow-x:auto;max-width:100% }

.cal-board .cal-week { display:grid; grid-template-columns:190px repeat(var(--cal-days), minmax(96px, 1fr)); min-width:760px }
.cal-board .cal-day  { display:grid; grid-template-columns:190px 1fr; /* Sized from the hours actually drawn, so a day stretched to midnight SCROLLS rather than squeezing an
   ordinary working morning into slivers. */
min-width:calc(190px + var(--cal-hours) * 56px) }

.cal-board .cal-corner,
.cal-board .cal-dayhead { padding:9px 10px;border-bottom:1px solid var(--line);background:var(--slate-soft);font-size:12px }
.cal-board .cal-corner { font-weight:600;color:var(--muted) }
.cal-board .cal-dayhead { display:flex;flex-direction:column;gap:1px;text-align:center;border-left:1px solid var(--line-soft) }
.cal-board .cal-dayhead b { font-size:12px }
.cal-board .cal-dayhead span { color:var(--muted);font-size:11px }
.cal-board .cal-dayhead em { color:var(--faint);font-size:10px;font-style:normal }
.cal-board .cal-dayhead.now { background:var(--indigo-soft) }
.cal-board .cal-dayhead.now b { color:var(--indigo-dark) }
.cal-board .cal-dayhead.off { background:#FAFAFB }

/* The day view's hour scale is ONE header cell divided into hours, so it lines up with the lane beneath it
   (the grid itself has a single lane column, so hours cannot be grid columns). */
.cal-board .cal-hourscale { display:grid;grid-template-columns:repeat(var(--cal-hours), 1fr);padding:9px 0; border-bottom:1px solid var(--line);background:var(--slate-soft);color:var(--muted);font-size:11px }
.cal-board .cal-hourscale span { padding-left:5px;border-left:1px solid var(--line-soft) }

.cal-board .cal-who { padding:10px;border-bottom:1px solid var(--line-soft);display:flex;flex-direction:column;gap:1px;min-width:0;justify-content:center }
.cal-board .cal-who b { font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.cal-board .cal-who.me { background:var(--indigo-soft) }

.cal-board .cal-cell { border-left:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft); padding:10px 8px;cursor:pointer;display:flex;flex-direction:column;gap:5px;justify-content:center }
.cal-board .cal-cell:hover { background:var(--indigo-soft) }
.cal-board .cal-cell.off { background:#FAFAFB }
/* Unknown is NOT free: somebody who connected nothing gets a dash, never an empty (readable as free) cell. */
.cal-board .cal-cell.unknown { color:var(--faint);text-align:center;cursor:default;background:repeating-linear-gradient(135deg,#FAFAFB,#FAFAFB 6px,#F3F4F6 6px,#F3F4F6 12px) }
.cal-board .cal-cell.unknown:hover { background:repeating-linear-gradient(135deg,#FAFAFB,#FAFAFB 6px,#F3F4F6 6px,#F3F4F6 12px) }

.cal-board .cal-strip { position:relative;height:12px;border-radius:3px;background:var(--slate-soft);overflow:hidden }
.cal-board .cal-seg { position:absolute;top:0;bottom:0;border-radius:2px }
.cal-board .cal-load { font-size:10px;color:var(--muted);text-align:center }

.cal-board .cal-lane { position:relative;min-height:56px;border-bottom:1px solid var(--line-soft);border-left:1px solid var(--line-soft); background:repeating-linear-gradient(to right,transparent,transparent calc(100% / var(--cal-hours) - 1px),var(--line-soft) calc(100% / var(--cal-hours) - 1px),var(--line-soft) calc(100% / var(--cal-hours))) }
.cal-board .cal-lane.unknown { background:repeating-linear-gradient(135deg,#FAFAFB,#FAFAFB 6px,#F3F4F6 6px,#F3F4F6 12px) }
.cal-board .cal-block { position:absolute;top:6px;bottom:6px;border-radius:var(--r-sm);padding:0 7px;font-size:11px;font-weight:600; display:flex;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis }

/* One palette for both views: busy is the primary colour, tentative is hatched-light, out of office is amber. */
.cal-board .cal-seg.busy,  .cal-board .cal-block.busy { background:var(--indigo);color:#fff }
.cal-board .cal-seg.tentative { background:var(--indigo-line) }
.cal-board .cal-block.tentative { background:var(--indigo-soft);color:var(--indigo-dark);border:1px dashed var(--indigo-line) }
.cal-board .cal-seg.oof,   .cal-board .cal-block.oof { background:var(--amber);color:#fff }
.cal-board .cal-seg.allday { opacity:.55 }

.cal-board .cal-legend { display:flex;gap:16px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line-soft);color:var(--muted);font-size:12px }
.cal-board .cal-legend .cal-key { width:22px;height:9px;border-radius:2px;display:inline-block;margin-right:6px;vertical-align:middle }
.cal-board .cal-legend .cal-key.busy { background:var(--indigo) }
.cal-board .cal-legend .cal-key.tentative { background:var(--indigo-line) }
.cal-board .cal-legend .cal-key.oof { background:var(--amber) }
.cal-board .cal-legend .tiny { margin-left:auto }

/* ---- booking a meeting into a colleague's calendar (task #83) ---------------------------------------- */

.cal-board .cal-who .cal-bookbtn { margin-top:5px; align-self:flex-start; }

/* A block booked from an app screen is ringed rather than recoloured: it is still busy time and still belongs
   to the same palette, it just also happens to be ours to withdraw. */
.cal-board .cal-block.booked { box-shadow:0 0 0 2px var(--amber) inset; cursor:pointer; }
.cal-board .cal-seg.booked { box-shadow:0 0 0 2px var(--amber) inset; }
.cal-board .cal-legend .cal-key.booked { background:var(--indigo); box-shadow:0 0 0 2px var(--amber) inset; }

.cal-board .cal-picks { display:flex; flex-direction:column; gap:2px; max-height:190px; overflow:auto; border:1px solid var(--line); border-radius:var(--r-sm); padding:6px; }
.cal-board .cal-pick { display:flex; align-items:center; gap:8px; padding:5px 6px; border-radius:var(--r-sm); cursor:pointer; margin:0; }
.cal-board .cal-pick:hover { background:var(--slate-soft); }
.cal-board .cal-pick input { width:auto; margin:0; }
/* Somebody who cannot be booked is SHOWN, greyed, with the reason — "no calendar" and "read only" need
   different fixes, and leaving them off the list would tell the booker neither. */
.cal-board .cal-pick.off { color:var(--faint); cursor:default; }
.cal-board .cal-pick.off:hover { background:none; }
.cal-board .cal-pick .tiny { margin-left:auto; }

/* The agenda-item details dialog: a plain label/value list, so a meeting with little to say about it looks
   sparse rather than broken. */
.cal-board .cal-detail { display:flex; flex-direction:column; gap:0; }
.cal-board .cal-detail > div { display:flex; gap:16px; padding:8px 0; border-bottom:1px solid var(--line-soft); align-items:baseline; }
.cal-board .cal-detail > div:last-child { border-bottom:0; }
.cal-board .cal-detail span { flex:0 0 96px; color:var(--muted); font-size:12.5px; }
.cal-board .cal-detail b { flex:1; min-width:0; }
.cal-board .cal-block[role=button] { cursor:pointer; }
.cal-board .cal-block[role=button]:hover { filter:brightness(1.08); }
/* A section break inside the details dialog, so "Booked from …" reads as a heading over the rows beneath it
   rather than as one more field label in the left column. */
.cal-board .cal-detail-head { margin:18px 0 2px; padding-top:14px; border-top:1px solid var(--line); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); font-weight:700; }

/* ---- drag a timeslot out of a lane (task #83) -------------------------------------------------------- */

/* Only lanes you could actually book into invite the gesture. */
.cal-board .cal-lane[data-bookable] { cursor:crosshair }
.cal-board .cal-drag { position:absolute; top:4px; bottom:4px; border-radius:var(--r-sm); pointer-events:none;
    background:color-mix(in srgb, var(--indigo) 20%, white); border:1px dashed var(--indigo); }

/* Set on <body> while a drag is in flight: without it the pointer paints a text selection across the grid,
   which is both ugly and swallows the release. Unscoped on purpose — body is outside the board. */
body.cal-dragging, body.cal-dragging * { user-select:none !important; }