/* Schedule redesign — uses app.css tokens (--navy, --blue, --accent). Loaded from App.razor. */
.sr-page{display:flex;flex-direction:column;gap:16px}
.sr-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sr-tabs{display:flex;background:#f5f7fa;border:1px solid rgba(31,52,103,.12);border-radius:8px;padding:3px;gap:2px}
.sr-tab{padding:6px 14px;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;color:#44607e}
.sr-tab.active{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(26,43,73,.12)}
.sr-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:#44607e;align-items:center}
.sr-swatch{display:inline-block;width:12px;height:12px;border-radius:3px;border:2px solid;margin-right:6px;vertical-align:-2px}
.sr-card{background:#fff;border:1px solid rgba(31,52,103,.12);border-radius:10px;box-shadow:0 1px 3px rgba(26,43,73,.08);overflow:hidden}
.sr-mono{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace}

/* week */
.sr-week{display:grid;grid-template-columns:200px repeat(var(--days,7),minmax(0,1fr))}
.sr-week-hdr{background:#f5f7fa;border-bottom:1px solid rgba(31,52,103,.12);padding:8px 10px;text-align:center;cursor:pointer;border-left:1px solid rgba(31,52,103,.08)}
.sr-week-hdr:hover{background:#e6f4fb}
.sr-week-hdr.today{background:#e6f4fb;color:var(--blue)}
.sr-week-hdr.nonworking{color:#8299b3;background:#eef2f8}
.sr-dept{grid-column:1/-1;padding:6px 14px;background:#eef2f8;font-size:12px;font-weight:700;color:#1a2b49;border-bottom:1px solid rgba(31,52,103,.08)}
.sr-res{padding:10px 14px;display:flex;flex-direction:column;gap:6px;justify-content:center;border-bottom:1px solid rgba(31,52,103,.08)}
.sr-avatar{width:28px;height:28px;border-radius:50%;color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none}
.sr-cell{border-left:1px solid rgba(31,52,103,.08);border-bottom:1px solid rgba(31,52,103,.08);padding:6px;display:flex;flex-direction:column;gap:4px;cursor:cell;min-width:0;min-height:96px;position:relative}
.sr-cell.today{background:rgba(0,164,228,.06)}
/* Weekends and company holidays read as non-working (P47, 30 Sep). The old weekend tint was
   #fafbfd - so close to white that Saturday and Sunday were indistinguishable from a workday,
   which is what Jason was reporting. #eef2f8 is the grey this stylesheet already uses for
   .sr-bar, so it is an established tone rather than a new one.

   ORDER IS LOAD-BEARING: :hover comes LAST and at equal specificity, so it still wins on a
   non-working cell. These days remain bookable - Jason: "Its still dates you CAN book
   against" - so they must go on responding to the pointer like any other cell. */
.sr-cell.nonworking{background:#eef2f8}
.sr-cell:hover{background:#f2f7fc}
.sr-cap{margin-top:auto;display:flex;align-items:center;gap:5px}
.sr-bar{flex:1;height:3px;border-radius:2px;background:#eef2f8;overflow:hidden}
.sr-bar>span{display:block;height:100%}

/* block chip (week) */
.sr-chip{position:relative;z-index:1;border-radius:5px;padding:5px 7px 5px 8px;border:1.5px solid;border-left-width:4px;font-size:11px;line-height:1.3;min-width:0;overflow:hidden;cursor:grab}
.sr-chip:hover{filter:brightness(.96)}
.sr-chip.proposed{border-style:dashed;background:#fff!important}
.sr-chip.tentative{background:#fff!important}
.sr-chip.span-mid,.sr-chip.span-end{border-left-width:1.5px;border-top-left-radius:0;border-bottom-left-radius:0}
.sr-chip.span-start,.sr-chip.span-mid{border-top-right-radius:0;border-bottom-right-radius:0;margin-right:-13px}
.sr-chip.derived{cursor:default}
.sr-chip.conflict{background:#fdecee!important;border-color:#BF1E2C!important;color:#BF1E2C!important}
/* Shared by the week chip and the day block. These were chip-only, so in the Day view the company
   and time wrapped freely, the detail ran to four lines, and the approve/reject controls on a
   proposed block fell below the block's clipped bottom edge (Ryan, 9/3). */
/* Hierarchy on a block is font-size and weight, NEVER opacity. These lines carried opacity
   .75-.9 until 30 Sep, set back when every fill was a light pastel with dark text. Two things
   were wrong with that once the 9/4 palette change landed:

   1. On a DARK fill, knocking white back 10% reads as grey rather than white. Jason flagged
      exactly that on a Managed block (navy) - and its ratio was a comfortable 10:1 even dimmed,
      so the number did not catch what the eye did.
   2. It genuinely broke contrast on the light fills. Measured over the real dictionary:
      at opacity .9 Project fell to 4.08:1, Travel 4.33:1 and Lunch 4.13:1 - three types BELOW
      AA - and the Reason line's .75 put them near 3:1. The 9/4 harness measured each type's
      declared fill/text pair and reported all clear; it never saw the opacity applied on top.
      At full strength all seven clear AA (lowest is Project at 4.65:1).

   So: if a line needs de-emphasis, make it smaller or lighter in weight. */
.sr-chip .row1,.sr-block .row1{display:flex;justify-content:space-between;gap:6px;align-items:center;min-width:0}
.sr-chip .co,.sr-block .co{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.sr-chip .t,.sr-block .t{font-size:10px;white-space:nowrap}
.sr-chip .detail{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-block .detail{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sr-badge{font-size:9px;font-weight:700;padding:1px 5px;border-radius:3px;background:rgba(255,255,255,.85);color:var(--navy);letter-spacing:.3px}
.sr-badge.urgent{background:#BF1E2C;color:#fff}
.sr-handle-x{position:absolute;top:0;bottom:0;right:0;width:9px;cursor:ew-resize;z-index:2}
.sr-handle-x:hover{background:rgba(0,0,0,.18)}
.sr-handle-y{position:absolute;left:0;right:0;bottom:0;height:8px;cursor:ns-resize}
.sr-handle-y:hover{background:rgba(0,0,0,.18)}

/* day */
.sr-day{display:grid;grid-template-columns:64px repeat(var(--people,4),minmax(0,1fr))}
.sr-day-col{position:relative;border-left:1px solid rgba(31,52,103,.08);background:repeating-linear-gradient(180deg,transparent 0 55px,rgba(31,52,103,.08) 55px 56px);cursor:cell}
.sr-hour{position:absolute;right:8px;transform:translateY(-6px);font-size:10px;color:#8299b3}
.sr-now{position:absolute;left:0;right:0;height:2px;background:var(--orange,#F1592B);z-index:2;pointer-events:none}
.sr-block{position:absolute;left:6px;right:6px;border-radius:6px;padding:4px 8px 4px 10px;border:1.5px solid;border-left-width:4px;font-size:11.5px;line-height:1.3;overflow:hidden;cursor:grab;box-shadow:0 1px 2px rgba(26,43,73,.08)}
.sr-block.proposed{border-style:dashed;background:#fff!important}
.sr-block.tentative{background:#fff!important}
.sr-block.conflict{background:#fdecee!important;border-color:#BF1E2C!important;color:#BF1E2C!important}
.sr-approve{width:18px;height:18px;flex:none;border-radius:4px;background:#16a34a;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;line-height:1;cursor:pointer}
.sr-reject{width:18px;height:18px;flex:none;border-radius:4px;background:#fff;color:#BF1E2C;border:1px solid #f3c9cc;display:inline-flex;align-items:center;justify-content:center;font-size:11px;line-height:1;cursor:pointer}
.sr-approve:hover{filter:brightness(.92)}.sr-reject:hover{background:#fdecee}

/* banner + drawer */
.sr-banner{display:flex;align-items:center;gap:14px;background:var(--navy);color:#fff;border-radius:10px;padding:12px 16px}
.sr-dot{width:10px;height:10px;border-radius:50%;background:var(--accent,#00A4E4);box-shadow:0 0 0 4px rgba(0,164,228,.3);flex:none}
.sr-scrim{position:fixed;inset:0;background:rgba(26,43,73,.25);z-index:1040}
.sr-drawer{position:fixed;top:0;right:0;bottom:0;width:400px;background:#fff;z-index:1041;box-shadow:-8px 0 30px rgba(26,43,73,.15);display:flex;flex-direction:column}
.sr-drawer .body{padding:16px 22px;display:flex;flex-direction:column;gap:12px;overflow:auto;flex:1}
.sr-drawer .foot{padding:14px 22px;border-top:1px solid rgba(31,52,103,.12);display:flex;gap:8px;align-items:center}

/* Bootstrap ships no min-width utility; the schedule components use Tailwind's name for it. A flex or
   grid child with min-width:auto refuses to shrink below its own text, which is what pushed the Day
   header's Plan button out of its column and over the neighbour's name. */
.min-w-0{min-width:0}

/* Keyboard focus (round 4): every clickable board element is now reachable with Tab and activated with
   Enter or Space, so the focused one must be visible. */
.sr-cell:focus-visible, .sr-week-hdr:focus-visible, .sr-day-col:focus-visible, .sr-chip:focus-visible, .sr-block:focus-visible,
.sr-approve:focus-visible, .sr-reject:focus-visible, [role="button"][tabindex="0"]:focus-visible {
  outline: 2px solid #0079C2;
  outline-offset: -2px;
}