/* PLANBOARD SURFACE & TOOLBAR
 *
 * The planboard is deliberately flush — no .card/.card-body wrappers (see
 * allocations/index.html.erb). These rules give back the *structure* the card
 * used to provide (figure-ground separation, an anchor for the page title)
 * without giving back its padding. All colours come from theme_foundation
 * tokens so dark_theme.css only has to re-declare the variables.
 */

/* Grid surface — the scroll container becomes the page's primary surface. */
.planboard-surface {
  background-color: var(--cp-surface-bg);
  border-radius: var(--cp-surface-radius);
  box-shadow: 0 0 0 1px var(--cp-surface-border), var(--cp-surface-shadow);
  overflow: hidden;
  overflow-x: auto;
}

/* Bootstrap gives tables a 1rem bottom margin — inside a surface that reads as
   a dead strip below the last row. */
.planboard-surface > .table,
.planboard-surface > table {
  margin-bottom: 0;
}

/* Header band — a contained band, not a card. The shared gradient-wash +
   left-accent-bar + icon + bold-title treatment itself now lives in
   theme_foundation/layout.css as `.cp-header-banner` (promoted app-wide —
   see the Header Banner rollout). The allocations index / yearly planner
   views wear that class directly (`cp-header-banner planboard-controls`).
   The white-bg/colored-icon/hover-fills-whole-button `.btn-outline-secondary`
   treatment that originated here has since been generalized to
   `.cp-header-banner .btn-outline-secondary` in layout.css (per-module
   accent aware) — Planboard picks it up through that shared rule and no
   longer needs its own copy. What stays here is ONLY the in-grid month/year
   navigation buttons (`#calendar` — outside `.cp-header-banner`, so they
   can't inherit its accent override) and the planboard-specific
   form-control/input-group theming, both scoped so they don't leak onto
   the other 14+ pages that also use `.cp-header-banner`. */

/* In-grid month/year navigation — sits in the calendar body, not the header
   band, so it can't reach the `.cp-header-banner`-scoped --cp-header-accent
   override; falls back to the root --cp-header-accent (still blue), keeping
   Planboard's control language identical inside and outside the header. */
#calendar .btn-outline-secondary {
  --bs-btn-color: var(--cp-control-color);
  --bs-btn-bg: var(--cp-control-bg);
  --bs-btn-border-color: var(--cp-control-border);
  --bs-btn-hover-color: var(--cp-control-hover-color);
  --bs-btn-hover-bg: var(--cp-control-hover-bg);
  --bs-btn-hover-border-color: var(--cp-control-hover-border);
  --bs-btn-active-color: var(--cp-control-hover-color);
  --bs-btn-active-bg: var(--cp-control-hover-bg);
  --bs-btn-active-border-color: var(--cp-control-hover-border);
  --bs-btn-disabled-color: var(--cp-control-muted-color);
  --bs-btn-disabled-border-color: var(--cp-control-border);
  font-weight: 500;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#calendar .btn-outline-secondary > i,
#calendar .btn-outline-secondary > .bi {
  color: var(--cp-control-icon);
}

#calendar .btn-outline-secondary:hover > i,
#calendar .btn-outline-secondary:hover > .bi,
#calendar .btn-outline-secondary:focus-visible > i,
#calendar .btn-outline-secondary:focus-visible > .bi {
  color: inherit;
}

.planboard-controls .input-group-text {
  background-color: var(--cp-control-bg);
  border-color: var(--cp-control-border);
  color: var(--cp-control-icon);
}

.planboard-controls .form-control {
  border-color: var(--cp-control-border);
  color: var(--cp-control-color);
}

.planboard-controls .form-control::placeholder {
  color: var(--cp-control-muted-color);
  opacity: 1;
}

.planboard-controls .form-control:focus {
  border-color: var(--cp-control-icon);
  box-shadow: 0 0 0 0.2rem var(--cp-control-focus-ring);
}

.planboard-controls .input-group:focus-within .input-group-text {
  border-color: var(--cp-control-icon);
}

/* Keep a visible keyboard affordance — never rely on the hover wash alone. */
.planboard-controls .btn:focus-visible,
#calendar .btn:focus-visible {
  border-color: var(--cp-control-icon);
  box-shadow: 0 0 0 0.2rem var(--cp-control-focus-ring);
  outline: none;
}

/* BASE TABLE STRUCTURE */

#calendar table {
  table-layout: fixed;
  width: 100%;
}

/* Column header rail — separates the date header from the data grid. */
#calendar thead th {
  background-color: var(--cp-planboard-head-bg);
  color: var(--cp-planboard-head-color);
}

#calendar .table-bordered > thead > tr > th {
  border-bottom: 2px solid var(--cp-planboard-head-border) !important;
}

#calendar thead th.weekend-day {
  background-color: var(--cp-planboard-head-weekend-bg) !important;
}

/* "Today" must out-rank the weekend/head banding above — including when today
   falls on a weekend, and including the 2px header rule. */
#calendar .table-bordered > thead > tr > th.today-header {
  background-color: var(--cp-planboard-today-bg) !important;
  border-bottom: 2px solid var(--cp-planboard-today-border) !important;
}

/* Name column rail — reads as a row header, not as an empty data cell.
   background-color only: _allocation.html.erb paints the utilization
   progress bar on background-image, which layers on top of this. */
#calendar .first-column {
  background-color: var(--cp-planboard-namecol-bg);
}

#calendar .table-bordered > * > tr > .first-column {
  border-right: 2px solid var(--cp-planboard-namecol-border) !important;
}

/* Override Bootstrap's table-bordered to ensure all borders are visible */
#calendar .table-bordered > :not(caption) > * {
  border-width: 1px !important;
}

#calendar .table-bordered > :not(caption) > * > * {
  border-width: 1px !important;
}

.first-column {
  width: 18em;
  min-width: 20em;
  font-weight: bold;
}

.allocation-row,
.project-row {
  border-bottom: 1px solid var(--cp-planboard-grid-line);
}

#calendar tbody tr {
  height: 4.5em !important;
  max-height: 4.5em !important;
}

#calendar tbody td {
  padding: 0 !important;
  vertical-align: middle !important;
}

#calendar tbody td.first-column {
  padding-left: 0.75rem !important;
}

.header-cell {
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}

/* CELL STYLES */

.timesheet-cell {
  padding: 0 !important;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  background-color: var(--cp-planboard-cell-bg);
  border: 1px solid var(--cp-planboard-grid-line);
  vertical-align: middle;
  line-height: 1;
}

.cell-filled {
  background-color: #e0f0ff !important;
  color: #000 !important;
  font-weight: bold;
}

/* DUTY TINTS - subtle background for standby/SPOC duty days */

.duty-standby-bg {
  background-image: linear-gradient(
    rgba(var(--standby-duty-color-rgb, 251, 255, 0), var(--standby-duty-opacity, 0.03)),
    rgba(var(--standby-duty-color-rgb, 251, 255, 0), var(--standby-duty-opacity, 0.03))
  ) !important;
}

.duty-standby-bg.cell-filled {
  background-image: linear-gradient(
    rgba(var(--standby-duty-color-rgb, 251, 255, 0), var(--standby-duty-opacity-filled, 0.06)),
    rgba(var(--standby-duty-color-rgb, 251, 255, 0), var(--standby-duty-opacity-filled, 0.06))
  ),
  linear-gradient(#e0f0ff, #e0f0ff) !important;
}

body.hide-standby .duty-standby-bg {
  background-image: none !important;
}

body.hide-standby .duty-standby-bg.cell-filled {
  background-image: none !important;
  background-color: #e0f0ff !important;
}

.duty-spoc-bg {
  background-image: linear-gradient(
    rgba(var(--spoc-duty-color-rgb, 200, 133, 255), var(--spoc-duty-opacity, 0.03)),
    rgba(var(--spoc-duty-color-rgb, 200, 133, 255), var(--spoc-duty-opacity, 0.03))
  ) !important;
}

.duty-spoc-bg.cell-filled {
  background-image: linear-gradient(
    rgba(var(--spoc-duty-color-rgb, 200, 133, 255), var(--spoc-duty-opacity-filled, 0.06)),
    rgba(var(--spoc-duty-color-rgb, 200, 133, 255), var(--spoc-duty-opacity-filled, 0.06))
  ),
  linear-gradient(#e0f0ff, #e0f0ff) !important;
}

body.hide-spoc .duty-spoc-bg {
  background-image: none !important;
}

body.hide-spoc .duty-spoc-bg.cell-filled {
  background-image: none !important;
  background-color: #e0f0ff !important;
}

.duty-both-bg {
  background-image: linear-gradient(
    rgba(var(--both-duty-color-rgb, 255, 102, 0), var(--both-duty-opacity, 0.03)),
    rgba(var(--both-duty-color-rgb, 255, 102, 0), var(--both-duty-opacity, 0.03))
  ) !important;
}

.duty-both-bg.cell-filled {
  background-image: linear-gradient(
    rgba(var(--both-duty-color-rgb, 255, 102, 0), var(--both-duty-opacity-filled, 0.06)),
    rgba(var(--both-duty-color-rgb, 255, 102, 0), var(--both-duty-opacity-filled, 0.06))
  ),
  linear-gradient(#e0f0ff, #e0f0ff) !important;
}

body.hide-both .duty-both-bg {
  background-image: none !important;
}

body.hide-both .duty-both-bg.cell-filled {
  background-image: none !important;
  background-color: #e0f0ff !important;
}

#calendar .bg-light.text-muted {
  background-color: #f8f9fa !important;
  color: #adb5bd !important;
}

/* SPECIAL DAY STATES */

/* Weekend and Non-Working Days
 * Weekend banding is a *secondary* cue only — the weekday name is always
 * rendered in the column header, so colour is never the sole carrier. */
.weekend-day,
.weekend-trace-marker,
.before-project,
.after-project {
  background-color: var(--cp-planboard-weekend-bg) !important;
  color: var(--cp-planboard-weekend-color) !important;
  cursor: not-allowed;
}

#calendar .weekend-day.weekend-row,
#calendar .national-holiday {
  cursor: not-allowed;
}

.national-holiday {
  background-color: var(--cp-planboard-weekend-bg) !important;
  color: var(--cp-planboard-weekend-color) !important;
  cursor: not-allowed;
}

/* Weekend-band hairline — border-color ONLY, no width/style/background change.
   --cp-planboard-grid-line is calibrated against a WHITE weekday cell; on the
   weekend band it sits ~1% from the fill, so Sat|Sun and the row splits inside a
   weekend column vanish. Re-colouring only the cells that carry the weekend fill
   restores the division without adding weight to the weekday grid.

   Specificity: the #calendar group is (1,1,0) — it must clear Bootstrap's
   `.table-bordered > :not(caption) > * > *` (0,1,1), which otherwise wins over
   .timesheet-cell — and it stays BELOW
   `#calendar .table-bordered > thead > tr > th.today-header` (1,2,3), the 2px
   header rule (1,2,3) and the name-column rail (1,2,1), so the today, header and
   name-column treatments are not out-ranked. The .calendar-day group covers the
   yearly overview's mini-calendars at (0,2,0), which keeps it under
   `.calendar-day.national-holiday` / `.calendar-day.allocation-*` (both
   !important); those cells currently draw no border, so it is inert there. */
#calendar .weekend-day,
#calendar .weekend-trace-marker,
#calendar .before-project,
#calendar .after-project,
#calendar .national-holiday,
.calendar-day.weekend-day {
  border-color: var(--cp-planboard-weekend-border);
}

/* Left-edge fix — border-color above is real, but under border-collapse the
   browser paints only ONE resolved border per shared edge, chosen by a
   conflict-resolution algorithm that ignores CSS specificity entirely.
   Verified live (Playwright/CDP pixel sampling, not just computed style,
   since computed style keeps reporting each cell's OWN declared value even
   though it isn't what gets painted): overriding this cell's border-color or
   border-width with a more specific !important rule has ZERO effect on the
   rendered pixel. The tie-break Chromium actually uses for two cell-level
   borders of equal width/style is positional — the earlier (left) cell wins.
   Sat|Sun and Sun|Mon already have the correct cell on the left, so they
   render fine; Fri|Sat does not (Friday, the plain weekday cell, is on the
   left), which is exactly the bug reported: Saturday's LEFT edge shows
   --cp-planboard-grid-line instead of --cp-planboard-weekend-border.

   box-shadow is a paint-time property, not a border — it is never subject to
   table border-collapse conflict resolution, so it reliably shows the
   intended colour regardless of which side "wins" the border war. Scoped via
   the adjacent-sibling combinator so it only ever matches a weekend/holiday
   cell that immediately follows a plain weekday cell: it fixes the one
   broken edge without touching Friday's (or any other weekday cell's) CSS,
   and without adding a second line to the already-correct Sat|Sun or Sun|Mon
   edges (those aren't matched by the sibling combinator at all). !important
   is required to clear `.table > :not(caption) > * > * { box-shadow: none
   !important; }` a few hundred lines down, which exists to suppress
   Bootstrap's hover/focus ring on table cells.

   No `+ .weekend-trace-marker` clause here: in every markup source that
   emits `.weekend-trace-marker` it is only inserted `if day.sunday?`, so it
   always immediately follows the Sunday `.timesheet-cell` — which already
   carries `.weekend-day`. The `:not(.weekend-day)` predecessor requirement
   above can therefore never be satisfied for it; don't re-add the clause
   without checking the markup again. */
#calendar .timesheet-cell:not(.weekend-day):not(.weekend-trace-marker):not(.before-project):not(.after-project):not(.national-holiday) + .weekend-day,
#calendar .timesheet-cell:not(.weekend-day):not(.weekend-trace-marker):not(.before-project):not(.after-project):not(.national-holiday) + .before-project,
#calendar .timesheet-cell:not(.weekend-day):not(.weekend-trace-marker):not(.before-project):not(.after-project):not(.national-holiday) + .after-project,
#calendar .timesheet-cell:not(.weekend-day):not(.weekend-trace-marker):not(.before-project):not(.after-project):not(.national-holiday) + .national-holiday {
  box-shadow: inset 1px 0 0 var(--cp-planboard-weekend-border) !important;
}

/* First-day-of-row weekend edge — the yearly per-consultant "months as rows" view (and,
   in principle, any row whose day 1 happens to fall on a weekend). Verified live via CDP:
   a weekend cell that is the very FIRST day column in its row has `.first-column` (the
   resource/month-name rail <td>, NOT `.timesheet-cell`) as its DOM predecessor, so the
   sibling-combinator fix above can never match it (`:not(.weekend-day)` is satisfied, but
   `.timesheet-cell` isn't). getComputedStyle confirmed `box-shadow: none` on that cell —
   no paint-time fix was applying at all — while the very next weekend cell in the same row
   (predecessor = a plain .timesheet-cell) correctly got the box-shadow. Same box-shadow
   left-edge-fix technique, just keyed off `.first-column` as the predecessor instead of
   `.timesheet-cell:not(.weekend-day)`. */
#calendar .first-column + .weekend-day,
#calendar .first-column + .before-project,
#calendar .first-column + .after-project,
#calendar .first-column + .national-holiday {
  box-shadow: inset 1px 0 0 var(--cp-planboard-weekend-border) !important;
}

/* .weekend-trace-marker's own left edge — "hide weekends" toggle case. The marker is a
   thin seam <td>/<th> inserted immediately after every Sunday cell, normally display:none
   and only shown by planner_controls_controller.js when "hide weekends" collapses the
   actual Sat/Sun cells to display:none. The sibling-combinator fix above deliberately
   never targets .weekend-trace-marker (see the comment directly above it — the marker
   always immediately follows a .weekend-day predecessor in the DOM, so the :not(.weekend-day)
   requirement can never be satisfied for it). But display:none doesn't change DOM order or
   CSS-selector matching — it changes which VISIBLE cell sits to the marker's left at paint
   time. With weekends hidden, the marker's visually-adjacent left neighbour becomes Friday
   (the last actually-rendered cell before it), and border-collapse's left-cell-wins
   tie-break lets Friday's plain border win that edge, same bug as above under a different
   trigger. Since box-shadow is a paint-time property on the element's own box (not
   contingent on matching a sibling selector), give the marker an unconditional left inset
   box-shadow directly — harmless while display:none (default), correct once "hide weekends"
   makes it visible. Verified live via CDP pixel sampling in both hide-weekends states. */
#calendar .weekend-trace-marker {
  box-shadow: inset 1px 0 0 var(--cp-planboard-weekend-border) !important;
}

/* Left-edge fix, thead counterpart. The tbody fix above only targets
   .timesheet-cell (<td>), so it never matched the <thead> date-header row's
   Fri|Sat boundary (th.header-cell.weekend-day) — that boundary was never
   verified by cb32391d and was flagged as a follow-up by critic review.

   Confirmed live via CDP pixel sampling: in light theme the header row hits
   the exact same border-collapse bug as tbody — Friday (th.header-cell, no
   explicit border-color) sits left of Saturday (th.header-cell.weekend-day,
   which DOES carry --cp-planboard-weekend-border via the base rule above)
   and, per the same left-cell-wins tie-break, Friday's plain default border
   is what paints. Measured: Thu|Fri and Fri|Sat both painted identical
   rgb(227,228,229); Sat|Sun and Sun|Mon (weekend cell already on the left)
   correctly painted rgb(206,215,227), i.e. --cp-planboard-weekend-border.
   The header's own background step (head-bg → head-weekend-bg, ~14/12/9 per
   channel) is smaller than tbody's (cell-bg → weekend-bg, ~22/18/12) — the
   contrast tbody already relied on the border fix for — so the background
   alone does not make this boundary safe to leave unfixed.

   Dark theme is unaffected: body.dark-theme sets a blanket
   --bs-border-color: #343a40, which is the same value as the dark
   --cp-planboard-weekend-border token, so EVERY header border (not just the
   weekend edge) already paints that colour — Fri|Sat already reads
   correctly there without this rule. This box-shadow still resolves to the
   same colour in dark theme (same custom property), so it's a harmless
   no-op repaint rather than a behaviour change; no separate dark_theme.css
   restatement is needed the way the tbody fix needed one, because nothing
   in dark_theme.css stomps the header's border-color with a literal
   !important the way `body.dark-theme .table td` did for tbody. */
#calendar .header-cell:not(.weekend-day) + .header-cell.weekend-day {
  box-shadow: inset 1px 0 0 var(--cp-planboard-weekend-border) !important;
}

.weekend-trace {
  opacity: 0.2;
  pointer-events: none;
  min-width: 8px;
  max-width: 8px;
  width: 8px;
}

/* Adjacent-month preview columns — the plain monthly grid's leading/trailing boundary days
   (week-complete padding: 0–4 leading days back to the month's first-day-week Monday, 0–6
   trailing days forward to the last-day-week Sunday — see AllocationsController#fetch_consultants).
   Real allocation/blocked content renders in these cells exactly as it would in the adjacent
   month, but they must read as visibly muted and be completely inert. `pointer-events: none`
   on the <td> is what makes every embedded interactive element (modal triggers, allocation-edit
   links, the click-to-add affordance) inert without individually guarding each one. */
.other-month-day {
  opacity: 0.45;
  pointer-events: none;
}

#calendar th.other-month-day {
  color: var(--cp-planboard-weekend-color) !important;
}

/* Display-dropdown toggle ("Hide/Show Adjacent Month Days") — client-side only, mirrors
   hide-weekends/hide-reserved. Purely a visibility switch: the boundary columns are always
   fetched/rendered server-side (see .other-month-day above); this just hides them. Enabled
   (visible) by default — the body class is only ever added by an explicit user toggle
   (planner_controls_controller.js), never present on first load. A single body-scoped rule,
   rather than per-element inline styles, is deliberate: it keeps working correctly across
   Turbo Stream re-renders of #planboard-table-container (create/update/destroy/block_occurrence)
   without needing a re-apply hook after every swap, since #calendar's body ancestor is never
   itself replaced by those streams. */
body.hide-boundary-days .other-month-day {
  display: none !important;
}

#calendar th.other-month-day div {
  color: inherit !important;
}

/* Blocked Days */
.blocked-day {
  background-color: #ffcccc !important;
  opacity: 0.7;
}

.blocked-tag {
  color: #d9534f;
  font-weight: bold;
  font-size: 0.85em;
}

/* Today Highlighting */
.today-header {
  background-color: var(--cp-planboard-today-bg) !important;
  border-bottom: 2px solid var(--cp-planboard-today-border) !important;
}

/* LAYOUT UTILITIES */

.col-lg-2-5 {
  flex: 0 0 auto;
  width: 13.5%;
}

.col-lg-10-5 {
  flex: 0 0 auto;
  width: 86.5%;
}

/* BUTTON & DROPDOWN STYLES */

/* Button Groups */
.btn-group .dropdown-toggle {
  border-radius: 0.375rem !important;
}

.btn-group .dropdown-menu {
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.btn-group .dropdown-item {
  transition: all 0.2s ease;
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
}

.btn-group + .btn-group {
  margin-left: 0.5rem;
}

.btn-group .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Dropdown Menus */
.dropdown-menu {
  min-width: 200px;
  padding: 0.5rem 0;
}

.dropdown-item {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.dropdown-item i {
  width: 16px;
  text-align: center;
  margin-right: 0.5rem;
}

.dropdown-item:hover,
.btn-group .dropdown-item:hover {
  background-color: #f8f9fa;
  color: #212529;
}

.dropdown-item.active,
.btn-group .dropdown-item.active {
  background-color: #0d6efd;
  color: white;
}

/* Accessibility - Focus States */
.dropdown-item:focus {
  outline: 2px solid #0d6efd;
  outline-offset: -2px;
  background-color: #e9ecef;
}

.btn:focus {
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* YEARLY OVERVIEW */

.yearly-overview-card {
  transition: all 0.3s ease;
  cursor: default;
  border-radius: 8px;
  opacity: 1;
}

.monthly-grid {
  min-height: 140px;
}

.mini-calendar {
  font-size: 0.8em;
}

.weekday-header {
  font-weight: 600;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Allocation Level Indicators - High specificity to override weekend/holiday styles */
.yearly-overview-card .calendar-day.allocation-critical,
.calendar-day.allocation-critical {
  background-color: rgba(220, 53, 69, 0.8) !important; /* Red - 0-25% */
  border: 1px solid rgba(220, 53, 69, 0.9) !important;
  color: white !important;
  cursor: pointer !important;
}

.yearly-overview-card .calendar-day.allocation-low,
.calendar-day.allocation-low {
  background-color: rgba(255, 133, 27, 0.7) !important; /* Orange - 25-50% */
  border: 1px solid rgba(255, 133, 27, 0.8) !important;
  color: white !important;
  cursor: pointer !important;
}

.yearly-overview-card .calendar-day.allocation-medium,
.calendar-day.allocation-medium {
  background-color: rgba(255, 193, 7, 0.7) !important; /* Yellow - 50-75% */
  border: 1px solid rgba(255, 193, 7, 0.8) !important;
  color: #000 !important;
  cursor: pointer !important;
}

.yearly-overview-card .calendar-day.allocation-high,
.calendar-day.allocation-high {
  background-color: rgba(25, 135, 84, 0.8) !important; /* Green - 75-100% */
  border: 1px solid rgba(25, 135, 84, 0.9) !important;
  color: white !important;
  cursor: pointer !important;
}

/* National Holidays in Mini-Calendar */
.calendar-day.national-holiday {
  background-color: rgba(108, 117, 125, 0.3) !important;
  border: 1px solid rgba(108, 117, 125, 0.6) !important;
  color: #495057 !important;
  font-weight: 500 !important;
  position: relative;
}

/* Today Highlighting with Allocation */
.calendar-day.bg-primary.allocation-high,
.calendar-day.bg-primary.allocation-medium,
.calendar-day.bg-primary.allocation-low,
.calendar-day.bg-primary.allocation-critical {
  border: 2px solid #fff !important;
  box-shadow: 0 0 0 2px #0d6efd !important;
}

.yearly-overview-card .bg-primary {
  animation: pulse 2s infinite;
}

/* Monthly Statistics Styling */
.stat-item {
  padding: 2px;
  cursor: help;
  transition: transform 0.2s ease;
}

.stat-item:hover {
  transform: translateY(-1px);
}

.stat-number {
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  transition: all 0.3s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Animation for Card Loading */
.col-lg-3:nth-child(1) .yearly-overview-card { animation-delay: 0.1s; }
.col-lg-3:nth-child(2) .yearly-overview-card { animation-delay: 0.2s; }
.col-lg-3:nth-child(3) .yearly-overview-card { animation-delay: 0.3s; }
.col-lg-3:nth-child(4) .yearly-overview-card { animation-delay: 0.4s; }
.col-lg-3:nth-child(5) .yearly-overview-card { animation-delay: 0.5s; }
.col-lg-3:nth-child(6) .yearly-overview-card { animation-delay: 0.6s; }
.col-lg-3:nth-child(7) .yearly-overview-card { animation-delay: 0.7s; }
.col-lg-3:nth-child(8) .yearly-overview-card { animation-delay: 0.8s; }
.col-lg-3:nth-child(9) .yearly-overview-card { animation-delay: 0.9s; }
.col-lg-3:nth-child(10) .yearly-overview-card { animation-delay: 1.0s; }
.col-lg-3:nth-child(11) .yearly-overview-card { animation-delay: 1.1s; }
.col-lg-3:nth-child(12) .yearly-overview-card { animation-delay: 1.2s; }

/* ANIMATIONS */

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.7);
  }
  70% {
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(13, 110, 253, 0);
  }
}

/* RESPONSIVE DESIGN */

/* Large Screens */
@media (max-width: 991.98px) {
  #allocationControls {
    margin-top: 1rem;
  }
  
  #allocationControls .btn-group {
    margin-bottom: 0.5rem;
  }
}

/* Tablets */
@media (max-width: 768px) {
  .monthly-grid {
    min-height: 120px;
  }
  
  .mini-calendar {
    font-size: 0.7em;
  }
  
  .calendar-day {
    min-height: 18px;
  }
  
  .project-indicator {
    width: 3px;
    height: 3px;
  }
  
  .yearly-overview-card {
    margin-bottom: 15px;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .yearly-overview-card {
    margin-bottom: 20px;
  }
  
  .stat-number {
    font-size: 0.8em !important;
  }
  
  .stat-label {
    font-size: 0.6em !important;
  }
}

/* RESERVED ALLOCATIONS STYLING */

/* Reserved Allocation Visual Styling - Striped Background Pattern */
/* Apply pattern to the cell containing reserved allocations, not the icon */
.timesheet-cell:has(.allocation[data-status="reserved"]),
.timesheet-cell:has(.allocation-block[data-status="reserved"]) {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 4px,
    rgba(127, 134, 140, 0.2) 4px,
    rgba(116, 123, 128, 0.2) 8px
  ) !important;
}

/* Keep allocation icon transparent so pattern shows through */
.allocation[data-status="reserved"],
.allocation-block[data-status="reserved"],
a.allocation[data-status="reserved"],
a.allocation-block[data-status="reserved"],
.allocation.allocation-block[data-status="reserved"] {
  background-color: transparent;
  background-image: none;
}

/* Prevent table hover from overriding reserved allocation background */
.table-hover tbody tr:hover {
  background-color: transparent !important;
}

.table > :not(caption) > * > * {
  box-shadow: none !important;
}

/* RESERVED ALLOCATIONS FILTER */

/* Hide Reserved Allocations */
body.hide-reserved-allocations .allocation[data-status="reserved"],
body.hide-reserved-allocations .allocation-block[data-status="reserved"],
body.hide-reserved-allocations a.allocation[data-status="reserved"],
body.hide-reserved-allocations a.allocation-block[data-status="reserved"],
body.hide-reserved-allocations .allocation.allocation-block[data-status="reserved"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Update Hour Display */
body.hide-reserved-allocations .allocation-hours-display .total-hours-normal {
  display: none !important;
}

body.hide-reserved-allocations .allocation-hours-display .total-hours-filtered {
  display: inline !important;
}

/* Remove Styling from Reserved Days in Yearly View */
body.hide-reserved-allocations .calendar-day[data-purely-reserved="true"].allocation-high,
body.hide-reserved-allocations .calendar-day[data-purely-reserved="true"].allocation-medium,
body.hide-reserved-allocations .calendar-day[data-purely-reserved="true"].allocation-low,
body.hide-reserved-allocations .calendar-day[data-purely-reserved="true"].allocation-critical {
  background-color: transparent !important;
  border: none !important;
  color: inherit !important;
}

/* Note: Overbooked warnings are handled in allocation_overbooked.css */

/* ── Planboard favicon icons ─────────────────────────────────────────────── */
/* Circular crop, no padding, no background — matches the planboard's compact */
/* row style where icons sit inline next to project names.                    */
.favicon-icon-planboard {
  border-radius: 50%;
  padding: 0;
  object-fit: cover;
  vertical-align: middle;
}