/* Oct 30 2026 (Jeremy): quiet manual "Off shift" — Cabarrus only (lais-auto-status data-toggle="1" + My status card).
   Deliberately NOT a third pill: small, muted, set apart from Available | Busy so it is never mistaken for them.
   Off shift state = dimmed row / card with the existing small slate "Off shift" tag. Available or Busy brings you back. */

/* ---- Interpreters today rows ---- */
.lais-st-offbtn { -webkit-appearance: none; appearance: none; margin: 0 0 0 4px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 32px; min-width: 32px; padding: 0 6px; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--muted); opacity: .62;
  font: 500 11.5px/1 Outfit, system-ui, sans-serif; letter-spacing: .01em;
  transition: opacity .18s ease, color .18s ease, background .18s ease, border-color .18s ease; }
.lais-st-offspace { display: inline-block; flex: 0 0 auto; width: 32px; margin-left: 4px; }
.lais-st-officon { font-size: 13px; line-height: 1; }
.lais-st-offbtn:hover { opacity: 1; color: var(--fg); border-color: var(--line); }
.lais-st-offbtn:focus-visible { opacity: 1; outline: 2px solid #C9A45C; outline-offset: 2px; }
.lais-st-offbtn:active { transform: scale(.96); }
html[data-theme="maroon"] .lais-st-offbtn { color: #8A7B82; }
html[data-theme="enterprise"] .lais-st-offbtn { color: #7A8BA0; }
html[data-theme="maroon"] .lais-st-offbtn:hover, html[data-theme="enterprise"] .lais-st-offbtn:hover { color: #334155; border-color: #CBD5E1; background: #fff; }
/* the text label only where there is room; phones and the narrow monitor column keep the icon (aria-label says it) */
@media (max-width: 860px) { .lais-st-offtxt { display: none; } }
@media (min-width: 861px) { html:not(.cab-me-mode):not(.cab-interp-mode) body .layout.cab-3col .lais-st-offtxt { display: none; } }

/* off-shift row: quiet, dimmed; the slate "Off shift" tag (lais-auto-status.css) stays; Available | Busy stay usable */
.lais-st-has-toggle.lais-st-off { background: transparent; }
.lais-st-has-toggle.lais-st-off .lais-st-name { opacity: .55; }
.lais-st-has-toggle.lais-st-off .lais-st-pill { font-size: 11px; padding: 2px 8px; font-weight: 600; opacity: .85; }
.lais-st-has-toggle.lais-st-off .lais-st-since { opacity: .6; }
.lais-st-has-toggle.lais-st-off .lais-st-toggle { opacity: .8; }

/* ---- My status card ---- */
.cab-me-offrow { flex: 1 0 100%; display: flex; justify-content: flex-end; margin-top: -8px; }
.cab-me-off { -webkit-appearance: none; appearance: none; margin: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px;
  border: 1px solid transparent; border-radius: 10px; background: transparent;
  font: 500 13px/1 Outfit, system-ui, sans-serif; color: var(--muted); opacity: .7;
  transition: opacity .18s ease, color .18s ease, border-color .18s ease, background .18s ease; }
.cab-me-off span { font-size: 14px; }
.cab-me-off:hover { opacity: 1; color: var(--fg); border-color: var(--line); }
.cab-me-off:focus-visible { opacity: 1; outline: 2px solid #E2B65C; outline-offset: 2px; }
.cab-me-off:disabled { cursor: progress; opacity: .45; }
.cab-me-off[hidden] { display: none; }
html[data-theme="maroon"] .cab-me-off { color: #8A7B82; }
html[data-theme="enterprise"] .cab-me-off { color: #7A8BA0; }
html[data-theme="maroon"] .cab-me-off:hover, html[data-theme="enterprise"] .cab-me-off:hover { color: #334155; border-color: #CBD5E1; background: #fff; }
.cab-me-card[data-st="off"] .cab-me-state::before { background: transparent; box-shadow: inset 0 0 0 2px #94A3B8; }
.cab-me-card[data-st="off"] .cab-me-offrow { display: none; }
/* off shift: the card calms down (gold glow off, name softened); Available | Busy stay full strength to come back on */
html body .panel.cab-me-card[data-st="off"] { border-color: rgba(148,163,184,.45); box-shadow: none; background: var(--card); }
html body .panel.cab-me-card[data-st="off"] .cab-me-name { opacity: .6; }
html[data-theme="maroon"] body .panel.cab-me-card[data-st="off"], html[data-theme="enterprise"] body .panel.cab-me-card[data-st="off"] { border-color: #CBD5E1; background: #F8FAFC; box-shadow: none; }
@media (max-width: 860px) { .cab-me-offrow { margin-top: -6px; } }
@media (prefers-reduced-motion: reduce) { .lais-st-offbtn, .cab-me-off { transition: none; } .lais-st-offbtn:active { transform: none; } }