/* nb-p9-ui.css (P9 "reparatii UI", 24.10.2026)
 * Only adds: hint line, busy button, keyboard focus on the admin calendar, readable canceled classes, a global reduced-motion guard,
 * the dashboard overflow clip. No colour/font/identity change; nothing is removed from any other sheet.
 * !important + the `html body:not(#_p9)` prefix on purpose: the admin/trainer sheets (contrast-aa, sidebar-compact, skins) and page <style> blocks
 * use !important as well. Revert = remove the <link> tags (header.ejs, booking-modal.ejs, confirm-cancel.ejs, customer/m-calendar.ejs). */

/* ── 1. hint under a disabled button ───────────────────────────────────────── */
.nb-p9-hint {
  margin: 8px 0 0;
  font-size: var(--nb-fs-14, 14px);
  line-height: 1.4;
  color: var(--nb-text-muted, #c0c0c0);
}
.nb-p9-hint[hidden] { display: none !important; }
.nb-p9-hint--end { text-align: right; }
html[data-theme="light"] .nb-p9-hint, html.theme-light .nb-p9-hint { color: #4b4b55; }

/* ── 2. busy button / visually hidden live region ──────────────────────────── */
.nb-p9-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
html body:not(#_p9) button.nb-p9-busy,
html body:not(#_p9) button.nb-p9-busy:disabled {
  cursor: progress !important;
  opacity: .85 !important;
  pointer-events: none;
}
.nb-p9-busy:not(.nb-p9-busy--overlay)::before {
  content: ''; display: inline-block; box-sizing: border-box; width: 1em; height: 1em; margin-right: .5em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -.15em;
  animation: nb-p9-spin .8s linear infinite;
}
.nb-p9-busy--overlay { position: relative; color: transparent !important; }
.nb-p9-busy--overlay > * { visibility: hidden; }
.nb-p9-busy--overlay::after {
  content: ''; position: absolute; left: 50%; top: 50%; box-sizing: border-box; width: 1.1em; height: 1.1em; margin: -.55em 0 0 -.55em;
  border: 2px solid var(--nb-text-main, #fff); border-right-color: transparent; border-radius: 50%;
  animation: nb-p9-spin .8s linear infinite;
}
@keyframes nb-p9-spin { to { transform: rotate(360deg); } }

/* ── 4. admin calendar: visible keyboard focus inside the clipped class blocks ── */
html body:not(#_p9) .calendar-class-block :is(button, a, [role="button"]):focus-visible {
  outline: 2px solid #ffd700 !important;
  outline-offset: -2px !important;
}
html[data-theme="light"] body:not(#_p9) .calendar-class-block :is(button, a, [role="button"]):focus-visible,
html.theme-light body:not(#_p9) .calendar-class-block :is(button, a, [role="button"]):focus-visible {
  outline-color: #1d4ed8 !important;
}
.calendar-class-block > .class-name[role="button"] { cursor: pointer; }

/* ── 5. canceled classes: still clearly "canceled" (struck through, dashed red edge, no fill) but readable ── */
html body:not(#_p9) .cal-event--canceled,
html body:not(#_p9) .cal-event--canceled:hover {
  opacity: 1 !important;
  border-left-style: dashed !important;
  text-decoration: line-through !important;
  text-decoration-thickness: 1.5px;
  background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(239, 68, 68, .10) 6px 12px) !important;
}
html body:not(#_p9) .cal-event--canceled, html body:not(#_p9) .cal-event--canceled *:not(.btn):not(button):not(.badge) {
  color: #c4c4cc !important;
}
html[data-theme="light"] body:not(#_p9) .cal-event--canceled, html[data-theme="light"] body:not(#_p9) .cal-event--canceled *:not(.btn):not(button):not(.badge),
html.theme-light body:not(#_p9) .cal-event--canceled, html.theme-light body:not(#_p9) .cal-event--canceled *:not(.btn):not(button):not(.badge) {
  color: #52525b !important;
}
html body:not(#_p9) .trainer-tl__slot--canceled { opacity: 1 !important; text-decoration: line-through; text-decoration-thickness: 1.5px; }
html body:not(#_p9) .trainer-tl__slot--canceled :is(.trainer-tl__time, .trainer-tl__info, .trainer-tl__info *) { color: #c4c4cc !important; }
html[data-theme="light"] body:not(#_p9) .trainer-tl__slot--canceled :is(.trainer-tl__time, .trainer-tl__info, .trainer-tl__info *),
html.theme-light body:not(#_p9) .trainer-tl__slot--canceled :is(.trainer-tl__time, .trainer-tl__info, .trainer-tl__info *) { color: #52525b !important; }

/* 5b. trainer week: classes in PAST cells were drawn at 0.3 (inline, calendar-week.js) x 0.85 (block) = 0.255 effective opacity, contrast about 2:1.
   Past stays obvious without fading the text: the cell keeps its hatching, the card turns grey (desaturated, grey tint, dashed grey border) at
   full text contrast. Upcoming cards and "unavailable" cells are not touched. */
html body:not(#_p9) td.calendar-slot.past-slot:has(.calendar-class-block) { opacity: 1 !important; }
html body:not(#_p9) td.calendar-slot.past-slot .calendar-class-block {
  opacity: 1 !important;
  filter: none !important;
  background-color: rgba(128, 128, 140, .16) !important;
  border: 1px dashed rgba(150, 150, 165, .75) !important;
}
/* [P13] the grey filter sits on the card's content, not on the card: a filter on the block also greyed the attendance toggle, whose green
   "present" state is its only colour cue. The toggle / "Attendance" buttons keep the colours of attendance-toggle.css. */
html body:not(#_p9) td.calendar-slot.past-slot .calendar-class-block > :not(.nb-att-toggle):not(.nb-att-open) {
  filter: grayscale(1) !important;
}

/* ── 6. reduced motion: nothing animates or transitions; content that waits for a reveal class is shown ── */
@media (prefers-reduced-motion: reduce) {
  html body:not(#_p9) *, html body:not(#_p9) *::before, html body:not(#_p9) *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}
/* ── 6b. reduced motion: spinners / busy indicators are ESSENTIAL motion (they tell "something is loading"), so they keep a slow,
   steady rotation; everything decorative stays off (the guard above). Rotation only: no zoom, parallax or sliding (vestibular-safe).
   P14: before, the guard above (and the older ones in reset.css, tokens.css, sintra-theme.css ...) froze every spinner into a static ring. ── */
@keyframes nb-p9-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  html body:not(#_p9) :is(.spinner-border, .fa-spin, .bi-spin, .spin, .spinner, .spinner-gold, .loading-spinner, .ds-spinner, .nac-spinner,
      .ua-spinner, .hr-spinner, .lp-schedule-spinner, .calendar-2025-spinner, .calendar-pull-refresh-spinner, .ptr-indicator.refreshing),
  html body:not(#_p9) :is(.btn-loading, .card-loading, .ds-btn.is-loading, .calendar-loading, .enhanced-player-wrapper.loading)::after,
  html body:not(#_p9) .nb-p9-busy:not(.nb-p9-busy--overlay)::before,
  html body:not(#_p9) .nb-p9-busy--overlay::after {
    animation-name: nb-p9-spin !important;
    animation-duration: 2.4s !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
    animation-delay: 0s !important;
  }
  html body:not(#_p9) :is(.spinner-grow, .fa-pulse) {
    animation-name: nb-p9-pulse !important;
    animation-duration: 1.6s !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
    animation-delay: 0s !important;
    transform: none !important;
  }
}
/* the scroll-reveal / magnetic effects are decorative: content is simply there (also removes the 0.6 s fade-up) */
html body:not(#_p9) .viewport-reveal,
html body:not(#_p9) .viewport-reveal-scale,
html body:not(#_p9) .viewport-reveal-rotate,
html body:not(#_p9) .ds-scroll-reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ── 7. /tenant/dashboard at 1366 px: the card row's -6px gutters pushed the document 6px past the viewport ── */
html body:not(#_p9) .dashboard-widgets-grid { overflow-x: clip; }