/* Focus rings are provided by crds-civic.css §5 (gold). The old ASP.NET-template blue ring was removed
   (#34 L26) — it conflicted on buttons (.btn:focus vs the civic .btn:focus-visible). */
html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  margin-bottom: 60px;
}

/* Calendar/list palette tokens (#34 L27) — centralised so the repeated conflict red and the other
   calendar tints stay consistent. (The CR/interpreter/zoom marker glyphs are civic gold — see
   .fc-ev-status-icon.is-cr/.is-interpreter/.is-zoom below.) */
:root {
  --crds-conflict: #dc3545; /* double-booking outline + badge */
  --crds-unassigned: #5a6678; /* no-facilitator sessions (civic --crds-muted slate); kept in sync with IndexModel.UnassignedColor */
  --crds-pcao-green-rgb: 67, 160, 71; /* PCAO green — calendar "today" tint */
  --crds-inperson: #15803d; /* in-person (map-pin) marker — green, distinct from the gold online/zoom marker (AzDO #55) */
  /* Completed dot ON a facilitator-colour bar (AzDO #143) — civic --crds-success (#2E7D32) lifted to
     hsl(123 65% 60%): same hue, but light enough to read on the dark bars (3.2:1 on the #5A6678 unassigned
     slate, 4.8:1 on the #1f2fd6 default blue). The key chip + the Completed badge keep #2E7D32 — that's the
     AA-correct green on the white page surface. */
  --crds-marker-complete: #57db5d;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Conflict-aware pickers: render disabled (busy) calendar days as crossed out. */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  text-decoration: line-through;
}

/* Bulk-create review (#21): master/detail layout. On wide screens the record list scrolls within
   itself for long batches and the list + the detail's action bar stay in view (no scrolling to jump
   between sessions or to reach the nav buttons). Below lg the wizard stacks (list above the detail),
   so the 65vh internal scroller is gated to lg+ — on a phone/tablet the list takes its natural height
   above the form instead of eating 65% of the viewport (AzDO #100). */
@media (min-width: 992px) {
  #wzRecordList {
    max-height: 65vh;
    overflow-y: auto;
  }
  #wizardSection .wz-list-col {
    position: sticky;
    top: 1rem;
    align-self: flex-start;
  }
  #wizardSection .wz-detail-footer {
    position: sticky;
    bottom: 0;
    z-index: 5;
  }
}

/* Compose Email (#10): the Quill link tooltip is absolutely positioned, so the editor's card must
   not clip it (our .crds-section uses overflow:hidden) and it must layer above nearby controls. */
.crds-allow-overflow {
  overflow: visible;
}
.ql-tooltip {
  z-index: 1056;
}

/* Compose Email (#29): collapsible recipient groups — rotate the chevron on expand (▶ collapsed → ▼ open).
   Keyed on Bootstrap's aria-expanded so it stays in sync whether toggled per-group or via Expand/Collapse all. */
.js-grp-toggle {
  text-decoration: none;
}
.js-grp-toggle i {
  transition: transform 0.15s ease;
}
.js-grp-toggle[aria-expanded="true"] i {
  transform: rotate(90deg);
}

/* Calendar view on the Sessions index (#28): FullCalendar theming + the facilitator legend.
   App-only styles live here (not crds-civic.css) so the design/ui-kit copy stays untouched. */
.fc {
  --fc-button-bg-color: var(--bs-primary);
  --fc-button-border-color: var(--bs-primary);
  --fc-button-hover-bg-color: var(--bs-primary);
  --fc-button-hover-border-color: var(--bs-primary);
  --fc-button-active-bg-color: var(--bs-primary);
  --fc-button-active-border-color: var(--bs-primary);
  --fc-today-bg-color: rgba(var(--crds-pcao-green-rgb), 0.12);
  --fc-event-text-color: #fff;
}
.fc .fc-button {
  text-transform: none;
  box-shadow: none;
}
.fc .fc-button:focus {
  box-shadow: none;
}
.fc .fc-toolbar-title {
  font-size: 1.25rem;
}
.fc .fc-event {
  cursor: pointer;
}
/* Slightly bolder event text (time + defendant title) so it reads more clearly on the colour bars. */
.fc .fc-event-time,
.fc .fc-event-title {
  font-weight: 600;
}
/* Bump the start-time text a bit larger than the default small event font. */
.fc .fc-event-time {
  font-size: 0.9rem;
}

/* Dark mode: align FullCalendar's surfaces/borders with the app theme. */
[data-bs-theme="dark"] .fc {
  --fc-border-color: #2c3344;
  --fc-page-bg-color: transparent;
  --fc-neutral-bg-color: rgba(255, 255, 255, 0.05);
  --fc-today-bg-color: rgba(var(--crds-pcao-green-rgb), 0.15);
  --fc-list-event-hover-bg-color: rgba(255, 255, 255, 0.06);
}

/* Concluded sessions keep the facilitator colour; status reads from a compact inline-SVG icon + the click
   popover. No background behind the icon — a small drop-shadow gives just enough edge to stay legible on any
   facilitator-colour bar (incl. a same-colour bar). */
.fc-ev-status-icons {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 0.35em;
}
.fc-ev-status-icon {
  width: 1rem;
  height: 1rem;
  vertical-align: middle;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.75));
}
.fc-ev-status-icon.is-complete {
  color: var(--crds-success);
}
.fc-ev-status-icon.is-notcomplete {
  color: rgb(var(--bs-warning-rgb));
}
.fc-ev-status-icon.is-cr {
  color: var(--crds-gold);
}
.fc-ev-status-icon.is-interpreter {
  color: var(--crds-gold);
}
.fc-ev-status-icon.is-zoom {
  color: var(--crds-gold);
}
.fc-ev-status-icon.is-inperson {
  color: var(--crds-gold);
}
/* CR (fa-handshake-angle), interpreter (fa-comment), zoom (fa-video) and in-person (fa-location-dot) markers
   are Font Awesome glyphs, not SVGs. Render each as a fixed 1rem square box with the glyph centred so it lines
   up (vertically + in size) with the SVG status markers and its label — webfont glyphs otherwise sit on the
   text baseline and the wide handshake glyph reads oversized. font-size sits a touch under the box so wide
   glyphs match the SVG circles. */
.fc-ev-status-icon.is-cr,
.fc-ev-status-icon.is-interpreter,
.fc-ev-status-icon.is-zoom,
.fc-ev-status-icon.is-inperson {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  font-size: 0.85rem;
  line-height: 1;
}

/* On-bar legibility (AzDO #143). A marker sits on the facilitator's colour, which ranges from pale lavender
   (#e7a7fc) to amber (#fdbd28) to deep blue (#1f2fd6), so no single fill works everywhere and the old 1px
   soft drop-shadow was too weak to separate a gold glyph from an amber bar. Two changes, together:
     1. a HARD black rim (no blur) — separates every marker from a light or same-hue bar;
     2. brighter fills — the rim alone vanishes on the DARK bars (#1f2fd6, #5A6678 unassigned, and the
        #B23A48 overdue red), so the marker itself has to carry those.
   Scoped to .fc-h-event/.fc-v-event — FullCalendar's own classes for "event painted with a background
   colour" (dayGrid month incl. the "+N more" popover, plus timeGrid week/day), on BOTH calendars (Sessions
   and the dashboard "Scheduled" card share this file). Deliberately NOT .fc-event: the phone agenda's
   listWeek rows DO carry fc-event but have no colour fill (only their .fc-list-event-dot is coloured) — they
   sit on the page surface, where a heavy black rim would be wrong. Same for the .cal-key-item chips below
   both calendars, which keep the base treatment untouched.
   The chips therefore stay one step darker than the same marker on a bar (--crds-gold vs --crds-gold-soft,
   #2E7D32 vs --crds-marker-complete). That's intentional: the chips sit on white in light mode, where the
   darker pair is the AA-correct choice — the same light/dark-surface pairing the civic kit already uses. */
.fc-h-event .fc-ev-status-icon,
.fc-v-event .fc-ev-status-icon {
  /* Replace the base soft shadow rather than layering it — a blurred grey halo outside a solid black rim
     only muddies the edge, and is invisible on dark bars. Also drops a filter pass per marker, so the bars
     end up cheaper to paint than before. */
  filter: none;
}
/* Status SVGs: a real stroke, painted UNDER the fill (paint-order) so the whole rim sits outside the shape
   and the dot/triangle keeps its current size. Stroke only the currentColor shapes — the warning triangle's
   exclamation is a hard-coded near-black rect + circle (see statusSvg() in Pages/Sessions/Index.cshtml and
   wwwroot/js/dashboard-scheduled.js); a stroke on the <svg> would inherit down and blob it. Those two are
   drawn after the path, so they still paint on top of the rim. */
.fc-h-event .fc-ev-status-icon [fill="currentColor"],
.fc-v-event .fc-ev-status-icon [fill="currentColor"] {
  stroke: #000;
  /* User units in the 16-unit viewBox = px at the 1rem marker size; half sits outside → a 1px rim. 2 is the
     ceiling: the <svg> clips to its viewBox and the triangle's bottom-left vertex is at x=1, so a round join
     of radius sw/2 reaches exactly x=0 at sw:2 and would be shaved flat beyond it. */
  stroke-width: 2;
  /* Round, not miter: the apex is a ~57° join, so a miter would spike above the viewBox and clip square. */
  stroke-linejoin: round;
  paint-order: stroke fill;
}
/* Webfont glyph markers (CR / interpreter / zoom / in-person) can't take a stroke, so the rim is 8 hard
   text-shadow offsets. The `i` type selector is exactly the set of glyph markers, and every one of them is a
   gold role/format marker — so the rim and the brighter gold are one rule. --crds-gold-soft is the kit's
   documented "lighter gold for dark backgrounds"; a colour-filled bar is one (3.6:1 on the unassigned slate
   vs 2.4:1 for plain gold). */
.fc-h-event i.fc-ev-status-icon,
.fc-v-event i.fc-ev-status-icon {
  text-shadow:
    1px 0 0 #000,
    -1px 0 0 #000,
    0 1px 0 #000,
    0 -1px 0 #000,
    1px 1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    -1px -1px 0 #000;
  color: var(--crds-gold-soft);
}
/* Completed dot only. Not Completed keeps #ffc107 — it's already the brightest marker (3.6:1 on the slate
   bar) and it matches the Not-Completed badge amber. */
.fc-h-event .fc-ev-status-icon.is-complete,
.fc-v-event .fc-ev-status-icon.is-complete {
  color: var(--crds-marker-complete);
}

/* Meeting-format cue on the Sessions list grid + dashboard grids: fa-video (online) / fa-location-dot
   (in-person), civic gold to match the calendar's is-zoom/is-inperson markers. (The --crds-inperson green
   token exists if in-person should later be differentiated — apply it here AND on .fc-ev-status-icon.is-inperson
   so all three views stay consistent.) */
.session-format-icon {
  color: var(--crds-gold);
}

/* Double-booked sessions: a red inner outline (reads on any facilitator-colour bar, month + week/day),
   mirroring the list view's red "Conflict" badge. */
.fc-event.fc-ev-conflict {
  box-shadow: inset 0 0 0 3px var(--crds-conflict);
}
.cal-pop-conflict {
  color: var(--crds-conflict);
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.cal-key-conflict {
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  border-radius: 3px;
  box-shadow: inset 0 0 0 2px var(--crds-conflict);
}

/* Global CR "new sessions available" notice (AzDO #86). Sticky at the top of the content area (below the
   non-fixed navbar, so it never covers the menu); toggling .d-none hides it. Lives inside the page container,
   so it keeps the civic rounded corners + bottom margin (a card, not a full-width bar). display:flex lays out
   the text + action button; the dismiss "×" is absolutely positioned by Bootstrap's .alert-dismissible. */
.cr-live-banner {
  position: sticky;
  top: 0;
  z-index: 1020; /* above page content, below Bootstrap modals (1055) */
  display: flex;
  align-items: center;
}
#cr-live-banner-text,
#session-live-banner-text,
#dashboard-live-banner-text,
#facilitator-live-banner-text {
  flex: 1 1 auto;
}
/* The .alert::before ⓘ is top-anchored (crds-civic.css §10); these alerts are flex rows taller than one line (an
   action button), so top-anchoring leaves the icon high. Centre it against the flex-centered text. Id selectors
   so they beat crds-civic's equal-specificity, later-loading .alert::before rule regardless of source order.
   #session-live-banner is the Session-Details live-update banner (AzDO #88); #dashboard-live-banner is the
   Dashboard live-update banner (AzDO #92) — both same flex-row shape. */
#cr-live-banner::before,
#cr-claiming-bar::before,
#session-live-banner::before,
#dashboard-live-banner::before,
#sessions-live-banner::before,
#facilitator-live-banner::before {
  top: 50%;
  transform: translateY(-50%);
}

/* Live CR claim/release cell flash on the Send-Available-Sessions page: when send-availability-live.js rewrites
   a row's Community Rep name, it adds .cr-updated to briefly highlight the change so the coordinator notices it
   (re-armed on each update via a remove + reflow + add). A gold->transparent fade matching the civic accent; the
   animation ends transparent, so the class staying applied between updates is visually inert. */
@keyframes crCrUpdatedFlash {
  from {
    background-color: rgba(212, 175, 55, 0.55);
  }
  to {
    background-color: transparent;
  }
}
.js-cr-name.cr-updated {
  animation: crCrUpdatedFlash 1.4s ease-out;
  border-radius: 0.2rem;
}

/* Sessions list — Not-Completed reason / needs-rescheduling sub-lines stacked under the Status badge.
   A tight, compact stack so the outcome lines fit under the badge without sprawling. (The Scheduled
   per-party email-notification stack that also used these classes was removed in AzDO #96.) */
.notif-grid {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  text-align: left; /* keep the NotCompleted sub-lines left even when the Status cell is centered (#106) */
}
.notif-grid-line {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--crds-muted);
}
.notif-grid-line .fa-fw {
  margin-right: 0.1rem;
}

/* Dashboard "needs attention" issue badges — civic tones (#65). Bootstrap's .text-bg-* utilities read the
   default --bs-*-rgb values (bright yellow/cyan/red), which crds-civic.css does NOT override, so they clash
   with the civic palette. These use the restrained --crds-* status tones with AA-accessible text colours
   (dark text on the amber warning, white on the deeper danger/info), matching the design system. */
.badge-issue-warning { background-color: var(--crds-warning); color: #212529; }
.badge-issue-danger  { background-color: var(--crds-danger);  color: #fff; }
.badge-issue-info    { background-color: var(--crds-info);    color: #fff; }

/* "Available Sessions" nav count badge (AzDO #98) — the green used for a "Completed" session
   (--crds-success, matching .badge-completed) with white text. */
.nav-badge-available { background-color: var(--crds-success); color: #fff; font-size: 0.75em; }

/* Sessions list — stack an "Overdue" badge under the status badge: equal width + centered text.
   align-items: stretch makes both badges take the width of the wider one ("Scheduled"); 0.85em matches
   the status-badge size (crds-civic.css §9) so the two read as a consistent pair. */
.status-badge-stack { display: inline-flex; flex-direction: column; align-items: stretch; gap: 0.2rem; }
.status-badge-stack .badge { display: block; text-align: center; font-size: 0.85em; }

/* Session Details "Reschedule history" Status column (AzDO #143). The substituted "Overdue" badge is
   .badge-issue-danger, which is NOT one of the civic status badges, so it would sit at Bootstrap's default
   0.75em beside a 0.85em "Not Completed". Match the size, then make every badge in the column exactly the
   same width. Deliberately NOT a min-width like the dashboard's .dash-status: that only equalises labels
   SHORTER than the chosen value, so it has to be hand-tuned above the longest label and silently stops
   working when a longer one appears ("Not Completed" already sat just above a 7rem min-width, leaving the
   rows visibly uneven). Filling the cell instead is label-independent — every cell in a column is the same
   width, so every badge is too — with a max-width so a wide column doesn't stretch them. */
.reschedule-status .badge {
  display: block;
  width: 100%;
  max-width: 9rem;
  font-size: 0.85em;
  text-align: center;
}

/* Sessions grid — denser rows (smaller font + tighter padding) buy horizontal room so the Defendant /
   Facilitator / Community Rep names fit on one line (text-nowrap, set on the columns in Index.cshtml, no
   truncation); the Charges column stays the elastic wrapping column. The id selector outranks the
   crds-civic.css `.table:not(.table-sm)` font/padding rules; app-only, so the design/ui-kit copy is untouched. */
#sessions-table { font-size: 0.9rem; }
#sessions-table > thead > tr > th,
#sessions-table > tbody > tr > td { padding: 0.4rem 0.5rem; }

/* Dashboard period grid — column widths come from cols() in Index.cshtml, which DataTables applies itself
   (autoWidth:true). We deliberately DON'T set table-layout:fixed: it collapsed the empty-state "No sessions in
   this period." colspan cell to the first column. Letting DataTables own the widths keeps that empty cell
   full-width (its native behavior) while the widths still stick. The one thing CSS must do is let the Session
   cell's chips wrap: they carry Bootstrap's .text-nowrap (white-space: nowrap !important) to keep each icon
   glued to its label, which would make a long charges string overflow into the Status column — so within the
   Session column (3rd) override that to wrap (also !important, ID-scoped so it wins on specificity).
   NB the 3rd position survived AzDO #152: Date+Time merged into one column and Case # took the freed slot,
   so the order is still Date/Time, Case #, Session. Re-check this selector if the columns move again. */
#dash-period-table > tbody > tr > td:nth-child(3),
#dash-period-table > tbody > tr > td:nth-child(3) .text-nowrap {
  white-space: normal !important;
  overflow-wrap: break-word;
}
#dash-period-table td.dataTables_empty {
  text-align: center;
  white-space: nowrap;
}

/* Dashboard card-header controls (period + report toggles / arrows / download) — compact so these headers
   stay the same height as the plain card headers (Needs attention / Time-off), whose height is set by text. */
.crds-header-tools .btn {
  --bs-btn-padding-y: 0.05rem;
  --bs-btn-padding-x: 0.45rem;
  --bs-btn-font-size: 0.75rem;
  line-height: 1.35;
}

/* Dashboard period grid — render every badge (Status + Issues columns) at one size so the two columns line up.
   The status badges are 0.85em (crds-civic.css §10) but the issue badges default to Bootstrap's 0.75em;
   match them all to 0.85em. */
#dash-period-table .badge {
  font-size: 0.85em;
}
/* Uniform-width status badges (Scheduled / Completed / Not completed) so the Status column lines up. The
   min-width fits the longest label; shorter labels centre within it. */
.dash-status {
  min-width: 7rem;
  text-align: center;
}
/* Uniform-width issue pills so every pill is the same size. The min-width clears the longest issue label
   ("Scheduling conflict" / "Needs community rep") at btn-sm, so all labels sit at this width (shorter ones
   centre within it) rather than sizing to their text. */
.dash-issue {
  min-width: 11.5rem;
  text-align: center;
}
/* When a session has multiple issues, stack the pills vertically (small gap). align-items: stretch makes every
   pill in the stack the same width (the widest one), so multi-issue rows aren't ragged. */
.dash-issues-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
}

/* "Needs attention" header info tooltip — a list of this role's issue types, which needs more room than
   Bootstrap's 200px default (a wrapped "Needs community rep" reads badly). Left-aligned because it's a list,
   not a one-line hint. Applied via data-bs-custom-class on the trigger. */
.issue-tip {
  --bs-tooltip-max-width: 275px;
}
.issue-tip .tooltip-inner {
  text-align: left;
}

/* Collapse chevron in a card header (dashboard period + needs-attention cards). Borderless button that
   inherits the header colour; the chevron points down when expanded and rotates to point right when the
   card is collapsed (Bootstrap adds .collapsed to the toggle when its target is hidden). */
.crds-collapse-toggle {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
  line-height: 1;
}
.crds-collapse-toggle .fa-chevron-down { transition: transform 0.15s ease; }
.crds-collapse-toggle.collapsed .fa-chevron-down { transform: rotate(-90deg); }

/* Week/Day (timeGrid): pin the icon to the block's top-right corner instead of letting the tall title
   container push it onto a detached bottom line. Month/dayGrid keeps it inline after the title. */
.fc-timegrid-event .fc-event-main {
  position: relative;
}
.fc-timegrid-event .fc-ev-status-icons {
  position: absolute;
  top: 3px;
  right: 4px;
  margin-left: 0;
}

/* Event detail popover (#28 follow-up) — mirrors the grid cell on click. */
.cal-pop {
  --bs-popover-max-width: 320px;
}
.cal-pop .cal-pop-row {
  margin-bottom: 0.3rem;
  font-size: 0.85rem;
}
.cal-pop .cal-pop-label {
  font-weight: 600;
  margin-right: 0.35rem;
}
.cal-pop .cal-pop-swatch {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 3px;
  margin-right: 0.35rem;
  vertical-align: -1px;
}
.cal-pop .cal-pop-charges {
  margin: 0.15rem 0 0;
  padding-left: 1.1rem;
}
.cal-pop .cal-pop-reason {
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
}
.cal-pop .cal-pop-resched {
  margin-top: 0.25rem;
  font-size: 0.8rem;
}
.cal-pop .cal-pop-actions {
  margin-top: 0.5rem;
}

/* Facilitator colour legend under the calendar. */
.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.cal-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
}
.cal-legend-swatch {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 3px;
  display: inline-block;
}

/* Facilitator colour dot next to the name in the Sessions list — same swatch as the calendar legend. */
.fac-color-dot {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 3px;
  margin-right: 0.4rem;
  vertical-align: middle;
}
/* Vertically center the colour dot with the facilitator name (Sessions list + details + contacts). */
.fac-name {
  display: inline-flex;
  align-items: center;
}

/* Clickable filter chips — shared by the facilitator legend and the status/role key (#34 L28); only the
   horizontal padding differs. */
.cal-legend-item[role="button"],
.cal-key-item[role="button"] {
  cursor: pointer;
  border-radius: 999px;
  border: 1px solid transparent;
}
.cal-legend-item[role="button"] {
  padding: 0.1rem 0.4rem;
}
.cal-key-item[role="button"] {
  padding: 0.1rem 0.5rem;
}
.cal-legend-item[role="button"]:hover,
.cal-key-item[role="button"]:hover {
  background: var(--bs-secondary-bg);
}
.cal-legend-item.is-active,
.cal-key-item.is-active {
  border-color: var(--bs-primary);
  background: var(--bs-secondary-bg);
  font-weight: 600;
}
.cal-legend-heading {
  font-size: 0.85rem;
  font-weight: 600;
}

/* Status-icon key (what the on-bar markers mean). */
.cal-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}
.cal-key-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
}
.cal-key-item .fc-ev-status-icon {
  width: 1.25rem;
  height: 1.25rem;
}
.cal-key-item .fc-ev-status-icon.is-cr,
.cal-key-item .fc-ev-status-icon.is-interpreter,
.cal-key-item .fc-ev-status-icon.is-zoom,
.cal-key-item .fc-ev-status-icon.is-inperson {
  font-size: 1.05rem; /* glyph centred in the 1.25rem key box — a touch under so wide glyphs match the SVGs */
}

/* DataTables server-side grids (#56): give the length menu / search (top) and info / pager (bottom) controls
   breathing room so they don't sit flush against the .crds-section card edges. The table itself stays
   full-width. */
.dt-container .dt-length,
.dt-container .dt-info {
  padding-left: 0.85rem;
}
.dt-container .dt-search,
.dt-container .dt-paging {
  padding-right: 0.85rem;
}
.dt-container .dt-length,
.dt-container .dt-search {
  padding-top: 0.6rem;
}
.dt-container .dt-info,
.dt-container .dt-paging {
  padding-bottom: 0.6rem;
}

/* Charges autocomplete (AzDO #73) — a suggestion menu positioned under the charges textarea. Colours come
   from the Bootstrap/civic theme vars so it matches light + dark. */
.charges-ac-wrap {
  position: relative;
}
.charges-ac-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1080;
  margin-top: 2px;
  max-height: 14rem;
  overflow-y: auto;
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.18);
}
.charges-ac-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.35rem 0.65rem;
  border: 0;
  background: transparent;
  color: var(--bs-body-color);
  font-size: 0.9rem;
}
.charges-ac-item:hover,
.charges-ac-item.active {
  background-color: var(--bs-tertiary-bg);
}

/* Session Rules chips (AzDO #94) — the allowed/excluded charge pill list on the CommunityRep Edit page. */
.rule-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-height: 1.5rem;
}
.rule-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.82rem;
  border-radius: 999px;
  background-color: var(--crds-unassigned, #5a6678);
  color: #fff;
}
.rule-chip .btn-close {
  font-size: 0.6rem;
  padding: 0.15rem;
}

/* Session Rules cell descriptions (AzDO #94) — reserve two lines so the paired inputs in each row line up
   regardless of whether the helper text wraps to one or two lines (only matters at md+ where cells sit
   side by side; stacked on mobile). */
.rule-cell-desc {
  min-height: 3em;
}

/* ===== Mobile / tablet responsive tweaks (AzDO #100) =====================================================
   All rules here are max-width, so desktop (>= 992px) is unaffected and renders exactly as before. The two
   crds-civic.css copies (app + design/ui-kit) are untouched — this file has no ui-kit twin. */

/* Phones + tablet portrait (< lg): the dashboard period grid's uniform-width pills demand ~300px between the
   Status (7rem) and Issues (11.5rem) columns, which forces the grid wide before DataTables Responsive can
   collapse it. Drop the fixed min-widths so the pills size to their content and the grid fits / collapses
   per data-priority. (Uniform pill width is a desktop nicety, not needed on a phone.) */
@media (max-width: 991.98px) {
  .dash-status,
  .dash-issue {
    min-width: 0;
  }
}

/* Small screens (< md): the sticky live-update banners are a flex row (text + action button + a
   Bootstrap-absolute close ×). When the row is tight, let the action button wrap below the text instead of
   crushing the message. */
@media (max-width: 767.98px) {
  .cr-live-banner {
    flex-wrap: wrap;
  }
}