:root {
  --sidebar-width: 260px;
  --topbar-height: 64px;
  --brand: #4f46e5;
  --brand-dark: #4338ca;
  --sidebar-bg: #111827;
  --sidebar-bg-active: #1f2937;
  --sidebar-text: #cbd5e1;
  --sidebar-text-muted: #64748b;
  --brand-gold: #eab308;

  /* Status colors — fixed, reserved for task status; same hex in both themes */
  --status-good: #0ca30c;
  --status-warning: #fab219;
  --status-critical: #d03b3b;
  --status-info: #3b82d0;

  /* Chart chrome */
  --chart-grid: #e1e0d9;
  --chart-axis: #c3c2b7;
  --chart-tick: #898781;
  --chart-surface: var(--bs-card-bg, var(--bs-body-bg));
  --chart-shadow: rgba(15, 23, 42, 0.12);
}

[data-bs-theme="dark"] {
  --chart-grid: #2c2c2a;
  --chart-axis: #383835;
  --chart-tick: #898781;
  --chart-shadow: rgba(0, 0, 0, 0.45);
}

body {
  background-color: var(--bs-tertiary-bg);
  min-height: 100vh;
}

/* ---------- Theme transition ---------- */

body,
.card,
.app-topbar,
.table,
.dropdown-menu,
.form-control,
.form-select {
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* ---------- Auth pages (login / password reset) ---------- */

.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top left, var(--brand) 0%, var(--brand-dark) 45%, #1e1b4b 100%);
  padding: 1.5rem;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  border: none;
  border-radius: 1rem;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.35);
}

.auth-brand {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.4rem;
}

/* ---------- App shell ---------- */

.app-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  overflow-y: auto;
  z-index: 1040;
  transition: transform 0.2s ease-in-out;
}

.app-sidebar .brand {
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 1.25rem;
  color: #fff;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.app-sidebar .brand i {
  color: var(--brand-gold);
}

.sidebar-profile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-profile-name {
  color: #fff;
  font-weight: 600;
  font-size: 0.88rem;
  line-height: 1.25;
}

.sidebar-profile-role {
  color: var(--sidebar-text-muted);
  font-size: 0.76rem;
  line-height: 1.3;
}

.sidebar-profile-status {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: var(--status-good);
  margin-top: 0.2rem;
}

.status-dot-inline {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--status-good);
  display: inline-block;
  flex-shrink: 0;
}

.app-sidebar .nav-link {
  color: var(--sidebar-text);
  border-radius: 0.5rem;
  padding: 0.55rem 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.925rem;
}

.app-sidebar .nav-link:hover {
  background: var(--sidebar-bg-active);
  color: #fff;
}

.app-sidebar .nav-link.active {
  background: var(--brand);
  color: #fff;
}

.app-sidebar .nav-section-title {
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--sidebar-text-muted);
  padding: 1rem 1.1rem 0.35rem;
}

.app-sidebar .nav-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--sidebar-text-muted);
  padding: 1rem 1.1rem 0.35rem;
  cursor: pointer;
  text-decoration: none;
}

.app-sidebar .nav-section-toggle:hover {
  color: #fff;
}

.app-sidebar .nav-section-toggle::after {
  content: "\F282";
  font-family: "bootstrap-icons";
  font-size: 0.7rem;
  transition: transform 0.15s ease-in-out;
}

.app-sidebar .nav-section-toggle[aria-expanded="true"]::after {
  transform: rotate(90deg);
}

.app-sidebar .submenu .nav-link {
  padding-left: 2.4rem;
  font-size: 0.875rem;
}

.app-sidebar .nav-toggle::after {
  content: "\F282";
  font-family: "bootstrap-icons";
  margin-left: auto;
  font-size: 0.7rem;
  transition: transform 0.15s ease-in-out;
}

.app-sidebar .nav-toggle[aria-expanded="true"]::after {
  transform: rotate(90deg);
}

.app-sidebar .nav-link.disabled {
  opacity: 0.45;
}

.nav-link-badge {
  margin-left: auto;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--status-critical);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.2rem;
  text-align: center;
}

.app-main {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-topbar {
  height: var(--topbar-height);
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--bs-body-bg);
  border-bottom: 1px solid var(--bs-border-color);
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  gap: 1rem;
}

.app-content {
  padding: 1.75rem;
  flex: 1;
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  z-index: 1035;
}

@media (max-width: 991.98px) {
  .app-sidebar {
    transform: translateX(-100%);
  }
  .app-sidebar.show {
    transform: translateX(0);
  }
  .app-main {
    margin-left: 0;
  }
  .sidebar-backdrop.show {
    display: block;
  }
}

/* ---------- Stat cards ---------- */

.stat-card {
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: 0.9rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  transition: box-shadow 0.15s ease, transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.stat-card:hover {
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
  transform: translateY(-2px);
}

.stat-card .stat-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  flex-shrink: 0;
}

.stat-card .stat-icon.stat-icon-success { background: var(--status-good); }
.stat-card .stat-icon.stat-icon-info { background: var(--brand); }
.stat-card .stat-icon.stat-icon-review { background: var(--status-info); }
.stat-card .stat-icon.stat-icon-warning { background: var(--status-warning); }
.stat-card .stat-icon.stat-icon-danger { background: var(--status-critical); }

.stat-card .stat-value {
  font-size: 1.75rem;
  font-weight: 700;
}

/* ---------- Leads: KPI cards (icon badge + value + label + subtext) ---------- */

.kpi-card-icon {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

.kpi-card-value {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 0.5rem;
}

.kpi-card-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
}

.kpi-card-sub {
  font-size: 0.7rem;
  color: var(--bs-secondary-color);
  margin-top: 0.1rem;
}

.stat-card.kpi-card .card-body {
  padding: 1rem 1.1rem;
}

.kpi-delta-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
}

.kpi-delta-up { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.kpi-delta-down { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }

.kpi-card-chart {
  height: 38px;
  margin-top: 0.5rem;
}

.kpi-card-chart canvas {
  width: 100% !important;
  height: 100% !important;
}

/* ---------- KPI cards: icon + text in one row (compact variant) ---------- */

.kpi-card-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.kpi-card-row .kpi-card-icon {
  width: 1.9rem;
  height: 1.9rem;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.kpi-card-row .kpi-card-text {
  min-width: 0;
}

.kpi-card-row .kpi-card-value {
  font-size: 1.05rem;
  margin-top: 0;
  line-height: 1.15;
}

.kpi-card-row .kpi-card-label {
  font-size: 0.68rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-card-row .kpi-card-sub {
  font-size: 0.62rem;
}

/* Expenses: keeps all 5 stat cards on one row at lg+ — bare .col-lg is a
   flex item with the browser default min-width:auto, so without this it
   won't shrink below its content's natural width and wraps to a new line
   once enough cards' combined minimums exceed the container. */
.stat-card-col {
  min-width: 0;
}

.stat-card-col .kpi-card-value {
  font-size: 0.85rem;
}

.stat-card-col .kpi-card-label {
  font-size: 0.6rem;
}

.stat-card-col .kpi-card-sub {
  font-size: 0.56rem;
}

.stat-card-col .kpi-delta-badge {
  font-size: 0.58rem;
  padding: 0.1rem 0.35rem;
}

/* Bookings list KPI row (six cards across at lg+). Every count takes the
   same fluid size so the row reads as one set, and a figure never wraps or
   breaks mid-number. .kpi-col is the min-width guard .stat-card-col gives the
   finance pages, without .stat-card-col's smaller fonts. The Booked value
   card stacks one row per currency, each in a smaller shared size of its own
   (a currency code plus digits is far wider than a count, and at the count
   size it read as oversized); amounts of 100,000 and over are already
   shortened ("LKR 1.2M") by the kpi_money filter. */
.kpi-col {
  min-width: 0;
}

.kpi-row-fluid .kpi-card-value {
  font-size: clamp(0.9rem, 0.4rem + 0.55vw, 1.15rem);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow-wrap: normal;
}

.kpi-row-fluid .kpi-card-money {
  font-size: clamp(0.8rem, 0.3rem + 0.45vw, 0.9rem);
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Labels wrap rather than ending in "…" ("Upcoming t…" is not a label). */
.kpi-row-fluid .kpi-card-label {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.25;
}

/* Six across needs roughly 1340px of screen with the sidebar open; below
   that (down to where Bootstrap's lg ends) the cards go three per row. */
@media (min-width: 992px) and (max-width: 1339.98px) {
  .kpi-row-fluid > .kpi-col {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
}

/* ---------- Tables & misc ---------- */

.table-card {
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: 0.9rem;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.07);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* ---------- Payments: row highlight + details panel ---------- */

.payment-row-active {
  background-color: var(--bs-primary-bg-subtle);
}

#paymentDetailsPanel .detail-list {
  margin-bottom: 0;
}

#paymentDetailsPanel .detail-list dt {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--bs-secondary-color);
  margin-top: 0.65rem;
}

#paymentDetailsPanel .detail-list dt:first-child {
  margin-top: 0;
}

#paymentDetailsPanel .detail-list dd {
  font-size: 0.8rem;
  margin-bottom: 0;
}

.payment-proof-card {
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: 0.75rem;
  padding: 0.85rem;
  background: var(--bs-tertiary-bg);
  height: 100%;
}

.payment-proof-card-body .proof-field-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.72rem;
  padding: 0.2rem 0;
  border-bottom: 1px dashed var(--bs-border-color-translucent);
}

.payment-proof-card-body .proof-field-row:last-of-type {
  border-bottom: none;
}

.payment-proof-card-body .proof-field-row span {
  color: var(--bs-secondary-color);
}

/* ---------- Bank Accounts: row highlight + details panel ---------- */

.bank-account-row-active {
  background-color: var(--bs-primary-bg-subtle);
}

#bankAccountDetailsPanel .detail-list {
  margin-bottom: 0;
}

#bankAccountDetailsPanel .detail-list dt {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--bs-secondary-color);
  margin-top: 0.65rem;
}

#bankAccountDetailsPanel .detail-list dt:first-child {
  margin-top: 0;
}

#bankAccountDetailsPanel .detail-list dd {
  font-size: 0.8rem;
  margin-bottom: 0;
}

/* The "Remove Account" action is a Bootstrap .btn-link, which sets its own
   font-size and would otherwise stand out against the plain <a> links next
   to it — force it back down to the dd's text size for a uniform look. */
#bankAccountDetailsPanel .detail-list dd .btn-link {
  font-size: inherit;
}

/* ---------- KPI & Targets ---------- */

.kpi-tab-strip {
  border-bottom: 1px solid var(--bs-border-color-translucent);
}

.kpi-tab-strip .nav-link {
  color: var(--bs-secondary-color);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 2px solid transparent;
}

.kpi-tab-strip .nav-link.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

.kpi-tab-strip .nav-link.disabled {
  color: var(--bs-tertiary-color);
  cursor: default;
}

.kpi-card-row .kpi-card-label-wrap {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.15;
}

.kpi-month-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: 999px;
  padding: 0.3rem 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
}

.kpi-ring-card {
  text-align: center;
  padding: 0.9rem 0.5rem;
}

.kpi-ring-card .kpi-ring-canvas-wrap {
  width: 96px;
  height: 96px;
  margin: 0 auto 0.6rem;
  position: relative;
}

.kpi-ring-card .kpi-ring-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
}

.kpi-ring-card .kpi-ring-sub {
  font-size: 0.7rem;
  color: var(--bs-tertiary-color);
}

.kpi-gauge-wrap {
  width: 150px;
  height: 150px;
  margin: 0 auto;
  position: relative;
}

.kpi-gauge-label {
  text-align: center;
  font-weight: 700;
  margin-top: 0.5rem;
}

.achievement-badge {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--bs-border-color-translucent);
}

.achievement-badge:last-child {
  border-bottom: none;
}

.achievement-badge-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-gold), var(--status-warning));
  flex-shrink: 0;
}

.achievement-badge-title {
  font-size: 0.82rem;
  font-weight: 600;
}

.achievement-badge-desc {
  font-size: 0.72rem;
  color: var(--bs-secondary-color);
}

.achievement-badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.75rem;
}

.achievement-badge-grid .achievement-badge {
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: 0.6rem;
  padding: 0.75rem;
}

.avatar-circle {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.85rem;
  flex-shrink: 0;
  object-fit: cover;
}

.theme-toggle-btn {
  border: none;
  background: transparent;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bs-body-color);
}

.theme-toggle-btn:hover {
  background: var(--bs-tertiary-bg);
}

[data-bs-theme="dark"] .icon-sun,
.icon-moon {
  display: none;
}

[data-bs-theme="dark"] .icon-moon,
.icon-sun {
  display: inline-block;
}

/* ---------- Chart tooltip (Chart.js external tooltip) ---------- */

.chart-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  min-width: 150px;
  pointer-events: none;
  background: var(--chart-surface);
  border: 1px solid var(--chart-grid);
  border-radius: 0.6rem;
  box-shadow: 0 10px 28px var(--chart-shadow);
  padding: 0.6rem 0.75rem;
  font-size: 0.8rem;
  opacity: 0;
  transition: opacity 0.1s ease;
}

.chart-tooltip-title {
  font-weight: 600;
  color: var(--bs-body-color);
  margin-bottom: 0.4rem;
}

.chart-tooltip-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.15rem 0;
}

.chart-tooltip-row + .chart-tooltip-row {
  margin-top: 0.1rem;
}

.chart-tooltip-key {
  width: 10px;
  height: 3px;
  border-radius: 2px;
  flex-shrink: 0;
}

.chart-tooltip-label {
  color: var(--bs-secondary-color);
  flex: 1 1 auto;
}

.chart-tooltip-value {
  font-weight: 600;
  color: var(--bs-body-color);
  margin-left: 0.75rem;
}

/* ---------- Worklog: mini calendar & donut legends ---------- */

.calendar-table td {
  position: relative;
  padding: 0.15rem 0;
}

.calendar-day {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  text-decoration: none;
  color: var(--bs-body-color);
  font-size: 0.72rem;
}

.calendar-day:hover {
  background: var(--bs-tertiary-bg);
}

.calendar-day-today {
  border: 1px solid var(--brand);
  font-weight: 600;
}

.calendar-day-selected {
  background: var(--brand);
  color: #fff;
}

.calendar-day-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brand);
  margin: 1px auto 0;
}

.chart-legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}

/* ---------- Topbar: notification dots + online status ---------- */

.topbar-date-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.6rem;
  font-size: 0.85rem;
  color: var(--bs-body-color);
  background: var(--bs-tertiary-bg);
  white-space: nowrap;
}

.topbar-date-pill .bi-calendar3 {
  color: var(--brand);
}

.topbar-date-pill .bi-chevron-down {
  font-size: 0.7rem;
  color: var(--bs-secondary-color);
}

.topbar-company-filter select {
  min-width: 160px;
  font-size: 0.8rem;
}

.topbar-badge {
  position: absolute;
  top: 0;
  right: -0.1rem;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--status-critical);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.05rem;
  text-align: center;
  border: 1.5px solid var(--bs-body-bg);
}

.notification-dropdown-menu {
  width: 320px;
  padding: 0;
}

.notification-list {
  max-height: 320px;
  overflow-y: auto;
}

.notification-item.fw-semibold {
  background: var(--bs-tertiary-bg);
}

.notification-item {
  white-space: normal;
}

.notification-item .d-block.small {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.online-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--status-good);
  border: 2px solid var(--bs-body-bg);
}

/* Bigger avatars (KPI leaderboard podium): a larger dot, pulled in to sit on the
   circle's edge rather than floating off the square corner. */
.podium-card .online-dot {
  width: 0.85rem;
  height: 0.85rem;
  bottom: 0.15rem;
  right: 0.15rem;
}

/* ---------- Worklog: dense table rows + pill status/priority badges ---------- */

.worklog-table thead th {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.55rem 0.9rem;
}

.worklog-table tbody td {
  padding: 0.5rem 0.9rem;
  font-size: 0.8rem;
  vertical-align: middle;
}

.worklog-table .btn-sm {
  padding: 0.2rem 0.4rem;
  font-size: 0.78rem;
}

.badge.rounded-pill {
  padding: 0.4em 0.75em;
  font-weight: 600;
}

/* ---------- Inline "Status" dropdown (Projects / My Tasks / Daily Work) ---------- */
/* Colored via the same bg-*-subtle / text-*-emphasis / border-*-subtle
   utility classes the read-only status badge uses (status_badge /
   project_status_badge filters) — this just gives it pill/badge proportions
   and select-specific affordances (caret, pointer, disabled/error states). */

.status-select {
  display: inline-block;
  width: auto;
  min-width: 8.5rem;
  padding: 0.3em 1.75em 0.3em 0.75em;
  font-size: 0.76rem;
  font-weight: 600;
  border-radius: 50rem;
  cursor: pointer;
  background-position: right 0.6em center;
  background-size: 0.65em auto;
}

.status-select:hover {
  filter: brightness(0.97);
}

.status-select:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15);
}

.status-select:disabled {
  cursor: wait;
  opacity: 0.7;
}

.status-select.status-select-error {
  border-color: var(--bs-danger) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-danger-rgb), 0.2);
}

/* ---------- Worklog: "Assign to" checkbox list (Add/Edit Task modal) ---------- */

.assignees-field > div,
.assignees-field fieldset > div {
  max-height: 12.5rem;
  overflow-y: auto;
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: 0.5rem;
  padding: 0.35rem 0.85rem;
  background: var(--bs-tertiary-bg);
}

.assignees-field legend {
  float: none;
  width: auto;
}

.assignees-field .form-check {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  padding-left: 1.75rem;
  margin-bottom: 0;
}

.assignees-field .form-check + .form-check {
  border-top: 1px solid var(--bs-border-color-translucent);
}

.assignees-field .form-check-input {
  cursor: pointer;
}

.assignees-field .form-check-label {
  cursor: pointer;
  font-size: 0.85rem;
}

/* ---------- Worklog: compact stat cards (4-up in the primary column) ---------- */

.stat-card-compact .card-body {
  padding: 0.65rem 0.85rem;
}

.stat-card-compact .stat-icon {
  width: 1.85rem;
  height: 1.85rem;
  font-size: 0.8rem;
}

.stat-card-compact .stat-value {
  font-size: 1.1rem;
  line-height: 1.2;
}

.stat-card-compact .stat-label {
  font-size: 0.68rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-card-compact .stat-subtext {
  font-size: 0.65rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-subtext-good { color: var(--status-good); font-weight: 700; }
.stat-subtext-warning { color: var(--status-warning); font-weight: 700; }
.stat-subtext-critical { color: var(--status-critical); font-weight: 700; }
.stat-subtext-info { color: var(--status-info); font-weight: 700; }

/* ---------- Worklog: filter toolbar ---------- */

.filter-bar-compact .form-select,
.filter-bar-compact .form-control {
  font-size: 0.78rem;
  padding: 0.25rem 0.5rem;
}

.filter-bar-compact .btn {
  font-size: 0.78rem;
  padding: 0.3rem 0.6rem;
}

/* The toolbar card holds no table, so it opts out of .table-card's
   overflow:hidden — otherwise the People dropdown is clipped at its edge.
   No z-index is needed on top of that: .card is position:relative/z-index:auto,
   so it opens no stacking context and the menu's own z-index:1000 lifts it
   clear of the tasks table below. */
.filter-card {
  overflow: visible;
}

/* ---------- Worklog: "Assigned People" checkbox filter ----------
   A scrollable checkbox list in a Bootstrap dropdown. Sticky search header and
   footer stay put while the names scroll; everything is drawn from Bootstrap's
   own CSS variables so the light/dark toggle needs no extra rules. */

.people-filter .dropdown-toggle {
  max-width: 170px;
}

.people-filter .dropdown-toggle [data-people-label] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.people-filter-menu {
  width: 250px;
  overflow: hidden;
  border-color: var(--bs-border-color-translucent);
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.12);
}

.people-filter-search {
  padding: 0.5rem;
  border-bottom: 1px solid var(--bs-border-color-translucent);
  background: var(--bs-tertiary-bg);
}

.people-filter-search .form-control,
.people-filter-search .input-group-text {
  font-size: 0.78rem;
}

.people-filter-list {
  max-height: 14rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Chrome 121+ / Firefox honour the standard properties and then ignore the
     ::-webkit- rules below, which are kept for older WebKit builds.
     scrollbar-gutter reserves the track's width up front so the rows don't
     shift sideways when a search narrows the list below the scroll point. */
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 23, 42, 0.3) rgba(15, 23, 42, 0.06);
}

[data-bs-theme="dark"] .people-filter-list {
  scrollbar-color: rgba(255, 255, 255, 0.32) rgba(255, 255, 255, 0.07);
}

.people-filter-list::-webkit-scrollbar {
  width: 8px;
}

.people-filter-list::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.06);
}

.people-filter-list::-webkit-scrollbar-thumb {
  background-color: rgba(15, 23, 42, 0.3);
  border-radius: 4px;
}

[data-bs-theme="dark"] .people-filter-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.07);
}

[data-bs-theme="dark"] .people-filter-list::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.32);
}

.people-filter-list::-webkit-scrollbar-thumb:hover {
  background-color: var(--bs-secondary-color);
}

.people-filter-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0;
  padding: 0.4rem 0.75rem 0.4rem 2rem;
  transition: background-color 0.12s ease-in-out;
}

.people-filter-option + .people-filter-option {
  border-top: 1px solid var(--bs-border-color-translucent);
}

.people-filter-option:hover {
  background: var(--bs-tertiary-bg);
}

.people-filter-option:has(.form-check-input:checked) {
  background: rgba(var(--bs-primary-rgb), 0.08);
}

.people-filter-option .form-check-input {
  cursor: pointer;
  margin-top: 0;
  flex-shrink: 0;
}

.people-filter-option .form-check-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1.2;
}

.people-filter-avatar {
  flex-shrink: 0;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--bs-primary);
  background: rgba(var(--bs-primary-rgb), 0.14);
}

.people-filter-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.people-filter-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
  border-top: 1px solid var(--bs-border-color-translucent);
  background: var(--bs-tertiary-bg);
}

.people-filter-footer .btn {
  font-size: 0.78rem;
}

/* Inline day navigator: prev / date / next stay on a single line even when the
   form shares a flex row with other controls. */
.date-nav {
  flex: 0 0 auto;
}

.date-nav .input-group {
  flex-wrap: nowrap;
  width: auto;
}

.date-nav .input-group .form-control {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
}

/* ---------- Worklog: status summary cards (replaces nav-tabs) ---------- */

.nav-card-compact .card-body {
  padding: 0.55rem 0.85rem;
}

.nav-card-icon {
  font-size: 0.95rem;
  color: var(--brand);
}

.nav-card-label {
  font-size: 0.8rem;
  font-weight: 500;
}

.nav-card-badge {
  font-size: 0.68rem;
  padding: 0.3em 0.6em;
}

.nav-card-active {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, transparent);
}

.nav-card-compact.disabled {
  opacity: 0.75;
}

/* ---------- Worklog: sidebar widgets (calendar / status / summary) ---------- */

.sidebar-widget-title {
  font-size: 0.8rem;
}

/* ---------- List pages: collapsible right-hand widget column ---------- */
/* My Tasks, Projects, Bookings, Leads, Follow-Ups, Income, Expenses, Invoices,
   Payments and Bank Accounts. The element carrying data-collapsible-row is
   rendered with .sidebar-collapsed, so collapsed is the default and there's
   no expanded-then-collapsed flash on first paint. When collapsed, the whole
   side column leaves the flow, not just its content, so no empty gutter
   column is left behind (at <992px that gutter would otherwise sit under the
   table). The toggle (includes/_sidebar_toggle.html) is outside the row, in
   the page header's top-right corner; app.js pairs the two by id. */

[data-collapsible-row].sidebar-collapsed [data-side-col] {
  display: none;
}

@media (min-width: 992px) {
  [data-collapsible-row].sidebar-collapsed [data-main-col] {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }
}

/* Both icons are in the button; show the one for the action a click will take. */
.sidebar-collapse-btn[aria-expanded="false"] .sidebar-collapse-icon-collapse,
.sidebar-collapse-btn[aria-expanded="true"] .sidebar-collapse-icon-expand {
  display: none;
}

/* ---------- Dashboard: professional card-section headings ---------- */

.card-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bs-secondary-color);
}

.text-2xs {
  font-size: 0.7rem;
}

/* ---------- Topbar: profile name/role ---------- */

.topbar-profile-info {
  text-align: left;
  line-height: 1.25;
  gap: 1px;
}

.topbar-profile-name {
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

.topbar-profile-role {
  font-size: 0.66rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* ---------- Worklog: professional modal chrome ---------- */

/* The <form> wraps modal-header/body/footer, one level below .modal-content's
   flex column — without this, .modal-body's flex/scroll never applies, the
   form renders at full content height, and .modal-content's overflow:hidden
   silently clips the footer (and its submit button) on short viewports. */
.modal-dialog-scrollable .modal-content > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.modal-professional .modal-content {
  border: none;
  border-radius: 0.9rem;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
}

.modal-professional .modal-header {
  background: color-mix(in srgb, var(--brand) 6%, var(--bs-body-bg));
  border-bottom: 1px solid var(--bs-border-color-translucent);
  padding: 1rem 1.25rem;
}

.modal-professional .modal-title {
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.modal-professional .modal-title i {
  color: var(--brand);
}

.modal-professional .modal-body {
  padding: 1.25rem;
}

.modal-professional .modal-body label.form-label {
  font-weight: 600;
  font-size: 0.82rem;
}

.modal-professional .modal-body .form-control,
.modal-professional .modal-body .form-select {
  font-size: 0.875rem;
}

.modal-professional .modal-footer {
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--bs-border-color-translucent);
  background: var(--bs-tertiary-bg);
}

/* ---------- Checkout: premium fingerprint confirm ---------- */

.checkout-premium-modal .modal-header {
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 14%, var(--bs-body-bg)), var(--bs-body-bg));
}

.checkout-premium-greeting {
  font-size: 1.05rem;
  font-weight: 700;
}

.checkout-fingerprint-wrap {
  display: flex;
  justify-content: center;
}

.fingerprint-scan {
  position: relative;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, var(--bs-body-bg));
  border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--bs-border-color-translucent));
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.fingerprint-scan.scanning::before,
.fingerprint-scan.scanning::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--brand) 55%, transparent);
  animation: fingerprint-ripple 1.6s ease-out infinite;
}

.fingerprint-scan.scanning::after {
  animation-delay: 0.5s;
}

.fingerprint-scan.scanning i {
  animation: fingerprint-pulse 1.2s ease-in-out infinite;
}

.fingerprint-scan.verified {
  color: #fff;
  background: var(--bs-success);
  border-color: var(--bs-success);
}

.fingerprint-scan.verified i {
  animation: none;
}

@keyframes fingerprint-ripple {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

@keyframes fingerprint-pulse {
  0%, 100% {
    opacity: 0.65;
  }
  50% {
    opacity: 1;
  }
}

/* ---------- Accounts: user form (professional) ---------- */

.form-fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.form-fieldset + .form-fieldset {
  margin-top: 2.25rem;
}

.form-fieldset legend {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  float: none;
  width: auto;
}

.form-fieldset legend i {
  color: var(--brand);
  font-size: 1rem;
}

.team-pills .form-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  margin: 0 0.5rem 0.5rem 0;
}

.team-pills .form-check-input {
  margin-top: 0;
}

.team-pills .form-check-input:checked ~ .form-check-label {
  color: var(--brand);
  font-weight: 600;
}

.company-checklist {
  max-height: 12rem;
  overflow-y: auto;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  padding: 0.6rem 0.9rem;
}

.company-checklist .form-check {
  margin-bottom: 0.35rem;
}

.company-checklist .form-check:last-child {
  margin-bottom: 0;
}

.checklist-scroll {
  max-height: 12rem;
  overflow-y: auto;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  padding: 0.6rem 0.9rem;
  scrollbar-width: thin;
}

.checklist-scroll .form-check {
  margin-bottom: 0.35rem;
}

.checklist-scroll .form-check:last-child {
  margin-bottom: 0;
}

.checklist-scroll::-webkit-scrollbar {
  width: 0.45rem;
}

.checklist-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.checklist-scroll::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--brand) 35%, transparent);
  border-radius: 999px;
}

.checklist-scroll::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--brand) 55%, transparent);
}

.user-preview-card {
  position: sticky;
  top: calc(var(--topbar-height) + 1.75rem);
}

/* ---------- Leads: numbered fieldset step badge ---------- */

.fieldset-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  flex-shrink: 0;
}

/* ---------- Forms: bordered section cards (fs-card) ---------- */
/* One look for every form section: Field Studio's generated layouts
   (fieldstudio.formbuilder.build_layout, which also gives fields with no
   section an "Other details" card), the Lead / Booking / Customer forms,
   the account, leave and project forms, and the Income / Expense / Payment /
   Invoice modals.

   Markup: <fieldset class="form-fieldset fs-card"> whose <legend> is the
   header strip: a .fieldset-step badge, an optional bi-* icon, the title,
   and an optional .fs-card-chip pushed to the right. The legend can carry
   .fs-card-header (hand-written templates) or no class at all (crispy's
   Fieldset has no way to give it one); both get the strip.
     .fs-card--shared  info-coloured left band and an info chip ("Shared
                       with Bookings"), for the Customer record that the
                       Lead and Booking forms both edit
     .fs-card--system  muted background and a lock icon, for data the form
                       shows but the user doesn't edit
     .fs-reveal        a conditionally revealed block inside a card, with an
                       optional .fs-reveal-tag ("Shown when …") on top

   Colours come from Bootstrap's tokens (the info ones match the app's
   bg-info-subtle / text-info-emphasis chips), so the dark theme needs no
   overrides here.

   The base .form-fieldset rules above stay borderless: only fieldsets that
   add fs-card change. Borders can't be switched off (owner decision), so
   there's deliberately no modifier that removes them. */

.form-fieldset.fs-card {
  --fs-card-pad: 1.25rem;
  --fs-card-radius: 0.75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--fs-card-radius);
  /* Crispy ends every field in .mb-3, which already spaces the bottom edge. */
  padding: var(--fs-card-pad) var(--fs-card-pad) max(0.25rem, calc(var(--fs-card-pad) - 0.75rem));
  background: var(--bs-body-bg);
}

/* `~`, not `+`: on the Lead and Booking forms crispy's non-field error alert
   can sit between the hand-written Customer card and the first generated
   card, and `+` would then butt the two cards against each other. */
.form-fieldset.fs-card ~ .form-fieldset.fs-card {
  margin-top: 1rem;
}

/* ...and that alert would otherwise touch the card above it. */
.form-fieldset.fs-card + .alert {
  margin-top: 1rem;
}

/* Floated, a legend is laid out as ordinary content instead of being cut
   into the top border, which is what lets it stretch into a full-width
   strip. The negative margins pull it out to the card's edges. No
   wrapping: on a phone a long title wraps within itself rather than
   dropping onto a line below its step badge or icon. */
.form-fieldset.fs-card > legend,
.form-fieldset.fs-card > .fs-card-header {
  float: left;
  width: calc(100% + 2 * var(--fs-card-pad));
  margin: calc(-1 * var(--fs-card-pad)) calc(-1 * var(--fs-card-pad)) 1rem;
  padding: 0.65rem var(--fs-card-pad);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--bs-emphasis-color);
  background: var(--bs-tertiary-bg);
  border-bottom: 1px solid var(--bs-border-color);
  border-radius: calc(var(--fs-card-radius) - 1px) calc(var(--fs-card-radius) - 1px) 0 0;
}

/* Bootstrap's reboot only clears the legend's next sibling, and that can be
   a hidden input, which has no box to clear with. */
.form-fieldset.fs-card > legend ~ *,
.form-fieldset.fs-card > .fs-card-header ~ * {
  clear: both;
}

/* `.form-fieldset legend i` paints icons brand-coloured, which would hide
   an icon placed inside the brand-coloured step badge. */
.form-fieldset.fs-card .fieldset-step i {
  color: inherit;
  font-size: 0.85rem;
}

.fs-card-chip {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  background: var(--bs-body-bg);
  color: var(--bs-secondary-color);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.form-fieldset.fs-card .fs-card-chip i {
  color: inherit;
  font-size: 0.8rem;
}

.form-fieldset.fs-card--shared {
  border-left: 4px solid var(--bs-info);
}

.form-fieldset.fs-card--shared > legend,
.form-fieldset.fs-card--shared > .fs-card-header {
  border-top-left-radius: calc(var(--fs-card-radius) - 4px) calc(var(--fs-card-radius) - 1px);
}

.fs-card--shared .fs-card-chip {
  color: var(--bs-info-text-emphasis);
  border-color: var(--bs-info-border-subtle);
  background: var(--bs-info-bg-subtle);
}

.form-fieldset.fs-card--system {
  background: var(--bs-tertiary-bg);
}

.form-fieldset.fs-card--system > legend,
.form-fieldset.fs-card--system > .fs-card-header {
  background: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
}

/* bi-lock from the bundled Bootstrap Icons font, so a template only has to
   add the modifier class. The lock takes the right edge; when the header
   also has a chip, the chip takes the right edge and the lock follows it. */
.form-fieldset.fs-card--system > legend::after,
.form-fieldset.fs-card--system > .fs-card-header::after {
  content: "\f47b";
  font-family: bootstrap-icons;
  font-weight: 400;
  line-height: 1;
  margin-left: auto;
  color: var(--bs-secondary-color);
}

.form-fieldset.fs-card--system > legend:has(.fs-card-chip)::after,
.form-fieldset.fs-card--system > .fs-card-header:has(.fs-card-chip)::after {
  margin-left: 0;
}

/* The plan's reveal: indented, a dashed brand outline with a solid brand
   band on the left, and a faint brand tint that deepens when nested. */
.fs-reveal {
  margin: 0 0 1rem 0.35rem;
  padding: 0.6rem 0.9rem 0.1rem;
  border: 1px dashed color-mix(in srgb, var(--brand) 60%, transparent);
  border-left: 3px solid var(--brand);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--brand) 5%, var(--bs-body-bg));
}

.fs-reveal .fs-reveal {
  background: color-mix(in srgb, var(--brand) 9%, var(--bs-body-bg));
}

/* Mixed with the body colour so the label reads on both themes. */
.fs-reveal-tag {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--brand) 70%, var(--bs-body-color));
}

/* The Field Studio builder canvas draws its sections the same way, so the
   builder previews the form's borders. */
.fs-section {
  border: 1px solid var(--bs-border-color);
  border-radius: 0.75rem;
  padding: 0.85rem 1rem;
  background: var(--bs-body-bg);
}

@media (max-width: 575.98px) {
  .form-fieldset.fs-card {
    --fs-card-pad: 0.9rem;
  }
}

/* ---------- Leads: sticky side panel (Follow-Up Settings) ---------- */

.sticky-panel {
  position: sticky;
  top: calc(var(--topbar-height) + 1.75rem);
}

/* ---------- Leads: tag/label chip input (form) ---------- */

.tag-input {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  padding: 0.4rem 0.5rem;
  background: var(--bs-body-bg);
}

.tag-input:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--brand) 25%, transparent);
}

.tag-input .tag-chip-editable {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--bs-tertiary-bg);
  border-radius: 999px;
  padding: 0.2rem 0.4rem 0.2rem 0.7rem;
  font-size: 0.78rem;
  white-space: nowrap;
}

.tag-input .tag-chip-editable button {
  border: none;
  background: transparent;
  line-height: 1;
  color: var(--bs-secondary-color);
  padding: 0.1rem 0.3rem;
}

.tag-input .tag-chip-editable button:hover {
  color: var(--status-critical);
}

.tag-input .tag-input-text {
  border: none;
  outline: none;
  background: transparent;
  flex: 1 1 120px;
  min-width: 100px;
  font-size: 0.85rem;
  padding: 0.2rem 0;
  color: var(--bs-body-color);
}

/* ---------- Leads: table tag chips (list page) ---------- */

.tag-chip {
  display: inline-block;
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  color: var(--bs-body-color);
  font-weight: 500;
  font-size: 0.7rem;
  margin: 0 0.25rem 0.25rem 0;
}

.tag-chip-more {
  display: inline-block;
  background: transparent;
  border: 1px dashed var(--bs-border-color);
  color: var(--bs-secondary-color);
  font-size: 0.7rem;
}

/* ---------- Leads: country flag cell ---------- */

.country-flag-cell {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* ---------- Leads: follow-up plan checkbox cards ---------- */

.followup-plan-cards legend {
  display: none;
}

.followup-plan-cards fieldset > div {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.followup-plan-cards .form-check {
  margin: 0;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.6rem;
  padding: 0.6rem 0.75rem 0.6rem 2.2rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.followup-plan-cards .form-check-input {
  margin-left: -1.6rem;
}

.followup-plan-cards .form-check:has(.form-check-input:checked) {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, transparent);
}

.followup-plan-cards .form-check-input:checked ~ .form-check-label {
  color: var(--brand);
  font-weight: 600;
}

.next-followup-box {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  border: 1px solid var(--bs-border-color-translucent);
  background: var(--bs-tertiary-bg);
  border-radius: 0.6rem;
  padding: 0.65rem 0.85rem;
  margin: 0.75rem 0;
}

.next-followup-box i {
  color: var(--brand);
  font-size: 1.2rem;
}

/* ---------- Leads: document upload dropzone ---------- */

.upload-dropzone-field input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.upload-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border: 2px dashed var(--bs-border-color);
  border-radius: 0.75rem;
  padding: 1.75rem 1rem;
  text-align: center;
  color: var(--bs-secondary-color);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.upload-dropzone i {
  font-size: 1.75rem;
  color: var(--brand);
}

.upload-dropzone.dragover {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 6%, transparent);
}

.upload-file-list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  font-size: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.upload-file-list li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--bs-secondary-color);
}

/* ---------- Leads: list-page status pill tabs ---------- */

.lead-status-tabs .nav-link {
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  font-size: 0.76rem;
  color: var(--bs-body-color);
  margin-right: 0.4rem;
  margin-bottom: 0.4rem;
}

.lead-status-tabs .nav-link.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.lead-status-tabs .nav-link .badge {
  margin-left: 0.3rem;
  font-size: 0.65rem;
  padding: 0.25em 0.5em;
}

/* ---------- Leads: compact list table ---------- */

.leads-table thead th {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.55rem 0.9rem;
}

.leads-table tbody td {
  padding: 0.5rem 0.9rem;
  font-size: 0.8rem;
  vertical-align: middle;
}

.leads-table .btn-sm {
  padding: 0.2rem 0.4rem;
  font-size: 0.78rem;
}

.leads-table .badge {
  font-size: 0.7rem;
}

/* ---------- Leads: donut chart legend dots ---------- */

.chart-legend-dot-0 { background: var(--bs-primary); }
.chart-legend-dot-1 { background: var(--bs-success); }
.chart-legend-dot-2 { background: var(--bs-warning); }
.chart-legend-dot-3 { background: var(--bs-info); }
.chart-legend-dot-4 { background: var(--bs-danger); }
.chart-legend-dot-5 { background: var(--bs-secondary); }
.chart-legend-dot-6 { background: var(--bs-dark); }

/* ---------- Invoices: payment-status donut legend dots (fixed semantic colors) ---------- */

.chart-legend-dot-paid { background: var(--bs-success); }
.chart-legend-dot-partial { background: var(--bs-primary); }
.chart-legend-dot-unpaid { background: var(--bs-warning); }
.chart-legend-dot-overdue { background: var(--bs-danger); }

.chart-legend-dot-current { background: var(--bs-success); }
.chart-legend-dot-due { background: var(--bs-warning); }

/* ---------- Payments: status donut legend dots (fixed semantic colors) ---------- */

.chart-legend-dot-received { background: var(--bs-success); }
.chart-legend-dot-pending { background: var(--bs-warning); }
.chart-legend-dot-refunded { background: var(--bs-danger); }

/* ---------- Financial Reports: summary donut legend dots (fixed semantic colors) ---------- */
/* Expenses-by-category donut reuses the numbered .chart-legend-dot-0..4 set
   above instead — it's an open categorical breakdown, not a status. */

.chart-legend-dot-cost-of-sales { background: var(--bs-primary); }
.chart-legend-dot-other-expenses { background: var(--bs-danger); }
.chart-legend-dot-net-profit { background: var(--bs-success); }

/* ---------- Balance Sheet: summary donut legend dots (fixed semantic colors) ---------- */

.chart-legend-dot-current-assets { background: var(--bs-primary); }
.chart-legend-dot-non-current-assets { background: var(--bs-info); }
.chart-legend-dot-total-liabilities { background: var(--bs-danger); }
.chart-legend-dot-total-equity { background: var(--bs-success); }

/* ---------- Balance Sheet: Accounts Receivable / Payable drill-down dropdown ----------
   A label button + count pill on the statement line; clicking expands a compact table of
   what the number is made of, in place (an inline collapse, not a floating menu, so it is
   never clipped by the card and works the same on mobile). */

.bs-drill-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.bs-drill-toggle:hover .bs-drill-chevron,
.bs-drill-toggle:focus-visible .bs-drill-chevron {
  color: var(--bs-primary);
}

.bs-drill-toggle:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

.bs-drill-count {
  min-width: 1.35rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}

.bs-drill-chevron {
  color: var(--bs-secondary-color);
  font-size: 0.65rem;
  transition: transform 0.15s ease;
}

.bs-drill-toggle[aria-expanded="true"] .bs-drill-chevron {
  transform: rotate(180deg);
}

/* width:0 + min-width keeps the dropdown out of the statement table's intrinsic width:
   without it a narrow phone widens the whole table and the card clips the Amount column.
   The wide content scrolls inside .bs-drill-scroll instead. */
.bs-drill {
  width: 0;
  min-width: calc(100% - 1rem);
  margin: 0.15rem 0 0.4rem 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.4rem;
  background: var(--bs-tertiary-bg);
  overflow: hidden;
}

.bs-drill-scroll {
  max-height: 14rem;
  overflow: auto;
}

.bs-drill-table {
  --bs-table-bg: transparent;
  font-size: 0.68rem;
}

.bs-drill-table th {
  position: sticky;
  top: 0;
  background: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.bs-drill-table td,
.bs-drill-table th {
  padding: 0.3rem 0.5rem;
}

.bs-drill-party {
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bs-drill-kind {
  margin-left: 0.25rem;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  font-size: 0.55rem;
  font-weight: 600;
  vertical-align: 1px;
}

.bs-drill-kind-bill {
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
}

.bs-drill-kind-pending {
  background: var(--bs-warning-bg-subtle);
  color: var(--bs-warning-text-emphasis);
}

.bs-drill-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.35rem 0.5rem;
  border-top: 1px solid var(--bs-border-color);
  color: var(--bs-secondary-color);
  font-size: 0.65rem;
}

.bs-drill-footer a {
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* ---------- Profit & Loss: summary donut legend dots (fixed semantic colors) ---------- */

.chart-legend-dot-income { background: var(--bs-success); }
.chart-legend-dot-expenses { background: var(--bs-danger); }

/* ---------- Reports Overview hub: Cash Flow donut legend dots (fixed semantic colors) ---------- */
/* Revenue by Company reuses the numbered .chart-legend-dot-0..6 set above
   instead — it's an open categorical breakdown (one company each), not a
   fixed set of activity types. */

.chart-legend-dot-operating { background: var(--bs-primary); }
.chart-legend-dot-investing { background: var(--bs-warning); }
.chart-legend-dot-financing { background: var(--bs-info); }

/* ---------- Leads: status distribution bars ---------- */

.status-bar-row + .status-bar-row {
  margin-top: 0.85rem;
}

.status-bar-track {
  height: 0.4rem;
  border-radius: 999px;
  background: var(--bs-tertiary-bg);
  overflow: hidden;
  margin-top: 0.3rem;
}

.status-bar-fill {
  height: 100%;
  border-radius: 999px;
}

.status-bar-fill-new { background: var(--brand); }
.status-bar-fill-in_progress { background: var(--status-warning); }
.status-bar-fill-follow_up { background: var(--brand-gold); }
.status-bar-fill-converted { background: var(--status-good); }
.status-bar-fill-lost { background: var(--status-critical); }

/* ---------- Bookings: compact list table ---------- */

.bookings-table thead th {
  font-size: 0.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.4rem 0.65rem;
  color: var(--bs-secondary-color);
}

.bookings-table tbody td {
  padding: 0.3rem 0.65rem;
  font-size: 0.58rem;
  vertical-align: middle;
}

.bookings-table tbody td small {
  font-size: 0.9em;
}

.bookings-table .btn-sm {
  padding: 0.1rem 0.3rem;
  font-size: 0.58rem;
}

.bookings-table .badge {
  font-size: 0.54rem;
}

.bookings-table .avatar-circle {
  width: 1.4rem;
  height: 1.4rem;
  font-size: 0.52rem;
}

/* ---------- Payments: compact list table ---------- */

.payment-table thead th {
  font-size: 0.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.4rem 0.65rem;
  color: var(--bs-secondary-color);
}

.payment-table tbody td {
  padding: 0.3rem 0.65rem;
  font-size: 0.58rem;
  vertical-align: middle;
}

.payment-table tbody td small {
  font-size: 0.9em;
}

.payment-table .btn-sm {
  padding: 0.1rem 0.3rem;
  font-size: 0.58rem;
}

.payment-table .badge {
  font-size: 0.54rem;
}

/* ---------- Expenses: compact list table ---------- */

.expenses-table thead th {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.4rem 0.6rem;
  color: var(--bs-secondary-color);
}

.expenses-table tbody td {
  padding: 0.35rem 0.6rem;
  font-size: 0.66rem;
  vertical-align: middle;
}

.expenses-table tbody td small {
  font-size: 0.9em;
}

.expenses-table .badge {
  font-size: 0.6rem;
}

.expenses-table .btn-sm {
  padding: 0.15rem 0.35rem;
  font-size: 0.65rem;
}

/* Row actions ⋮ menu — detached to <body> on open (see bookings.js) so it
   renders as a top layer above .table-card instead of being clipped by it. */
.row-actions-menu {
  position: fixed;
  z-index: 3000;
  margin: 0;
  font-size: 0.66rem;
  min-width: 9rem;
}

.row-actions-menu .dropdown-item {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.table-row-actions form {
  margin: 0;
}

/* ---------- Bookings: quick actions grid ---------- */

.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.quick-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.75rem 0.5rem;
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: 0.6rem;
  font-size: 0.72rem;
  text-align: center;
  text-decoration: none;
  color: var(--bs-body-color);
  background: transparent;
}

.quick-action-btn i {
  font-size: 1.1rem;
  color: var(--brand);
}

.quick-action-btn:hover {
  border-color: var(--brand);
  color: var(--bs-body-color);
}

.quick-action-btn.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* ---------- Projects ---------- */

.projects-table thead th {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.4rem 0.65rem;
  color: var(--bs-secondary-color);
}

.projects-table tbody td {
  padding: 0.45rem 0.65rem;
  font-size: 0.62rem;
  vertical-align: middle;
}

.projects-table tbody td small {
  font-size: 0.9em;
}

.projects-table .btn-sm {
  padding: 0.1rem 0.3rem;
  font-size: 0.6rem;
}

.projects-table .badge {
  font-size: 0.56rem;
}

.projects-table .avatar-circle {
  width: 1.4rem;
  height: 1.4rem;
  font-size: 0.52rem;
}

/* ---------- Projects → Tasks tab: per-column sort/filter menus ---------- */

/* The funnel sits inside the heading rather than beside it so adding five of
   them costs the table no extra width — the Tasks tab is already seven
   columns inside an expandable row. */
.th-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
}

.th-filter-btn {
  border: 0;
  background: transparent;
  padding: 0 0.1rem;
  line-height: 1;
  color: var(--bs-secondary-color);
  opacity: 0.55;
  font-size: 0.7rem;
}

.th-filter-btn:hover,
.th-filter-btn:focus-visible {
  opacity: 1;
  color: var(--brand);
}

/* A filled funnel is the only sign, once the menu closes again, that this
   column is hiding rows or holding a sort. */
.th-filter-btn.is-active {
  opacity: 1;
  color: var(--brand);
}

/* These menus are re-parented to <body> while open (app.js,
   setupRowActionDropdowns), so they inherit .row-actions-menu's fixed
   positioning and need only their own width and inner spacing. */
.row-actions-menu.task-filter-dropdown,
.task-filter-dropdown {
  min-width: 11rem;
}

.task-filter-dropdown .dropdown-header {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-bottom: 0.15rem;
}

/* Caps a long assignee list at roughly seven rows rather than letting the
   menu run off the bottom of the viewport. */
.task-filter-options {
  max-height: 13rem;
  overflow-y: auto;
  padding: 0 0.25rem;
}

.task-filter-option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.5rem;
  border-radius: 0.3rem;
  cursor: pointer;
}

.task-filter-option:hover {
  background-color: var(--bs-tertiary-bg);
}

.task-filter-option .form-check-input {
  margin: 0;
  flex: 0 0 auto;
}

.task-filter-actions {
  display: flex;
  gap: 0.75rem;
  padding: 0.1rem 0.75rem 0.25rem;
}

.task-filter-actions .btn-link {
  font-size: 0.62rem;
  text-decoration: none;
}

/* Nine columns is three more than the Tasks tab carries, so the Projects
   list's funnels sit tighter against their headings — at the shared 0.35rem
   the seven of them push the table into a horizontal scroll on a 1500px
   screen that had none before. */
[data-projects-table] thead .th-filter {
  gap: 0.1rem;
}

/* The Projects list re-runs its query on the server for every header sort or
   filter, so the rows it is replacing are dimmed rather than torn out — the
   table keeps its height and the page doesn't jump under the open menu. */
.projects-table.is-reloading tbody {
  opacity: 0.45;
  transition: opacity 120ms ease-in;
  pointer-events: none;
}

/* ---------- Media/Files tabs (Project & Task): image/video preview thumbnails ---------- */

.file-preview-thumb {
  width: 84px;
  height: 60px;
  object-fit: cover;
  display: block;
  background-color: var(--bs-tertiary-bg);
}

a.file-preview-thumb-link {
  display: inline-block;
  line-height: 0;
}

.file-preview-thumb-doc {
  width: 84px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bs-tertiary-bg);
}

/* ---------- Paste-to-attach (static/js/paste-attach.js) ----------
   Two users of the same look: the Media/Files tabs' upload target, and the
   staging box that create/edit forms grow under their file input. */

.paste-zone {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--bs-secondary-color);
  background-color: var(--bs-tertiary-bg);
  border: 1px dashed var(--bs-border-color);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.paste-zone:hover,
.paste-zone:focus,
.paste-zone.is-armed {
  outline: none;
  color: var(--bs-body-color);
  border-color: var(--brand);
  background-color: color-mix(in srgb, var(--brand) 6%, transparent);
}

.paste-zone.is-dragover {
  border-style: solid;
  border-color: var(--brand);
  background-color: color-mix(in srgb, var(--brand) 12%, transparent);
}

.paste-zone.is-uploading {
  cursor: progress;
  opacity: 0.65;
}

.paste-zone-icon {
  font-size: 1.1rem;
  color: var(--brand);
}

.paste-zone.is-uploading .paste-zone-icon {
  animation: paste-zone-pulse 0.9s ease-in-out infinite;
}

@keyframes paste-zone-pulse {
  50% { opacity: 0.25; }
}

.paste-zone kbd {
  padding: 0.05rem 0.3rem;
  font-size: 0.72rem;
}

.paste-zone-browse {
  color: var(--brand);
  text-decoration: underline;
}

.paste-zone-hint {
  font-size: 0.72rem;
}

/* The thumbnails of files staged into a form but not yet saved. A native
   file input only ever says "3 files", which is useless once pasting makes
   it easy to lose track of what's queued. */

.paste-staged {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.paste-staged-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  width: 5.5rem;
  padding: 0.35rem;
  font-size: 0.68rem;
  background-color: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.4rem;
}

.paste-staged-item img,
.paste-staged-icon {
  width: 100%;
  height: 3rem;
  object-fit: cover;
  border-radius: 0.25rem;
  background-color: var(--bs-secondary-bg);
}

.paste-staged-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--bs-secondary-color);
}

.paste-staged-name {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  color: var(--bs-secondary-color);
}

.paste-staged-remove {
  position: absolute;
  top: -0.4rem;
  right: -0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  line-height: 1;
  color: var(--bs-body-bg);
  background-color: var(--bs-secondary-color);
  border: none;
  border-radius: 50%;
}

.paste-staged-remove:hover {
  background-color: var(--bs-danger);
}

/* ---------- Bank Accounts: compact list table ---------- */

.bank-account-table thead th {
  font-size: 0.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.4rem 0.65rem;
  color: var(--bs-secondary-color);
}

.bank-account-table tbody td {
  padding: 0.3rem 0.65rem;
  font-size: 0.58rem;
  vertical-align: middle;
}

.bank-account-table tbody td small {
  font-size: 0.9em;
}

.bank-account-table .btn-sm {
  padding: 0.1rem 0.3rem;
  font-size: 0.58rem;
}

.bank-account-table .badge {
  font-size: 0.54rem;
}

/* ---------- Attendance: compact list table ---------- */

.attendance-table thead th {
  font-size: 0.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.4rem 0.65rem;
  color: var(--bs-secondary-color);
}

.attendance-table tbody td {
  padding: 0.3rem 0.65rem;
  font-size: 0.58rem;
  vertical-align: middle;
}

.attendance-table tbody td small {
  font-size: 0.9em;
}

.attendance-table .badge {
  font-size: 0.54rem;
}

/* ---------- Leave Approvals: compact list table ---------- */

.leave-approvals-table thead th {
  font-size: 0.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.4rem 0.65rem;
  color: var(--bs-secondary-color);
}

.leave-approvals-table tbody td {
  padding: 0.3rem 0.65rem;
  font-size: 0.58rem;
  vertical-align: middle;
}

.leave-approvals-table tbody td small {
  font-size: 0.9em;
}

.leave-approvals-table .btn-sm {
  padding: 0.1rem 0.3rem;
  font-size: 0.58rem;
}

.leave-approvals-table .badge {
  font-size: 0.54rem;
}

.leave-approval-row-active {
  background-color: var(--bs-primary-bg-subtle);
}

.leave-approval-row {
  cursor: pointer;
}

/* A row whose inline detail panel opens on a click anywhere in it — see
   setupExpandableRows() in app.js. The chevron is still the affordance;
   this just tells the pointer the whole row is live. */
.expandable-row {
  cursor: pointer;
}

/* Expand-toggle chevron — rotates via Bootstrap's own aria-expanded, no JS.
   Used by both the Projects table row toggle and the My Tasks row toggle. */
.project-row-toggle,
.row-toggle {
  color: var(--bs-secondary-color);
  line-height: 1;
}

.project-row-toggle i,
.row-toggle i {
  display: inline-block;
  transition: transform 0.15s ease;
}

.project-row-toggle[aria-expanded="true"] i,
.row-toggle[aria-expanded="true"] i {
  transform: rotate(90deg);
}

/* Income list: a sale / booking with several payment lines is one parent row
   that opens to them (static/js/income.js). Colours only; no sizes, so the
   table keeps its own type scale. */
.income-group-row {
  cursor: pointer;
  --bs-table-bg: var(--bs-tertiary-bg);
}

.income-group-row[aria-expanded="true"] .row-toggle i {
  transform: rotate(90deg);
}

.income-child-row > td {
  background: var(--bs-body-bg);
}

.income-child-row > td:nth-child(2) {
  text-align: right;
}

/* Expenses list: a booking's cost lines are one parent row that opens to them
   (static/js/expenses.js). The same colours-only rules as the Income list,
   under their own names: there the second column is a row number and is
   right-aligned, here it is the Expense # and must not be. */
.expense-group-row {
  cursor: pointer;
  --bs-table-bg: var(--bs-tertiary-bg);
}

.expense-group-row[aria-expanded="true"] .row-toggle i {
  transform: rotate(90deg);
}

.expense-child-row > td {
  background: var(--bs-body-bg);
}

/* Inline detail panel — a sibling <tr> under the project row, hidden via
   d-none until Bootstrap's collapse actually opens it (see projects.js). */
.project-detail-row > td {
  background: var(--bs-tertiary-bg);
}

.project-detail-panel,
.task-detail-panel {
  border-left: 3px solid var(--brand);
}

/* One level deeper: a task's own detail row inside the project panel's Tasks
   tab. The panel it sits in is already --bs-tertiary-bg, so this needs the
   body background to read as nested rather than as more of the same. */
.project-task-detail-row > td {
  background: var(--bs-body-bg);
}

.project-task-detail {
  border-left: 3px solid var(--bs-border-color);
}

.project-detail-panel .nav-tabs,
.task-detail-panel .nav-tabs {
  font-size: 0.7rem;
  border-bottom-color: var(--bs-border-color-translucent);
}

.project-detail-panel .nav-tabs .nav-link,
.task-detail-panel .nav-tabs .nav-link {
  padding: 0.4rem 0.75rem;
  color: var(--bs-secondary-color);
}

.project-detail-panel .nav-tabs .nav-link.active,
.task-detail-panel .nav-tabs .nav-link.active {
  color: var(--brand);
  font-weight: 600;
}

.project-detail-panel .tab-content,
.task-detail-panel .tab-content {
  padding-top: 1rem;
}

.coming-soon-tab i {
  font-size: 1.75rem;
  color: var(--bs-secondary-color);
  opacity: 0.5;
  display: block;
  margin-bottom: 0.5rem;
}

/* ---------- Leave approval stepper ---------- */

.approval-stepper {
  margin: 0;
  padding: 0;
}

.approval-step {
  display: flex;
  gap: 0.75rem;
  position: relative;
  padding-bottom: 1.25rem;
}

.approval-step:last-child {
  padding-bottom: 0;
}

.approval-step::before {
  content: "";
  position: absolute;
  left: 0.85rem;
  top: 1.9rem;
  bottom: 0;
  width: 2px;
  background: var(--bs-border-color);
}

.approval-step:last-child::before {
  display: none;
}

.approval-step-marker {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: #fff;
  background: var(--bs-secondary-color);
  z-index: 1;
}

.approval-step.is-completed .approval-step-marker { background: var(--status-good); }
.approval-step.is-pending .approval-step-marker { background: var(--status-warning); }
.approval-step.is-rejected .approval-step-marker { background: var(--status-critical); }
.approval-step.is-skipped .approval-step-marker { background: var(--bs-secondary-color); opacity: 0.6; }

.approval-step-body {
  flex: 1;
  min-width: 0;
  padding-top: 0.15rem;
}

.approval-step-title {
  font-weight: 600;
  font-size: 0.85rem;
}

.approval-step-meta {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
  margin-top: 0.15rem;
}

/* ---------- Leave calendar ---------- */

.leave-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--bs-border-color-translucent);
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: 0.5rem;
  overflow: hidden;
  width: 100%;
}

.leave-calendar-weekday {
  background: var(--bs-tertiary-bg);
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
  padding: 0.5rem 0;
}

.leave-calendar-day {
  background: var(--bs-body-bg);
  min-height: 5.5rem;
  min-width: 0;
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  overflow: hidden;
}

.leave-calendar-day.is-outside {
  background: var(--bs-tertiary-bg);
  opacity: 0.55;
}

.leave-calendar-day.is-today .leave-calendar-day-number {
  background: var(--brand);
  color: #fff;
  border-radius: 50%;
}

.leave-calendar-day-number {
  font-size: 0.75rem;
  font-weight: 600;
  width: 1.4rem;
  height: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.leave-calendar-event {
  display: block;
  width: 100%;
  font-size: 0.65rem;
  padding: 0.1rem 0.35rem;
  border-radius: 0.25rem;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
}

.leave-calendar-day.is-non-working {
  background: var(--bs-tertiary-bg);
}

.leave-calendar-day.is-non-working .leave-calendar-day-number {
  color: var(--bs-secondary-color);
}

.leave-calendar-off-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--bs-secondary-color);
  text-transform: uppercase;
}

.leave-calendar-grid-compact .leave-calendar-day {
  min-height: 3.6rem;
  padding: 0.25rem;
}

@media (max-width: 420px) {
  .leave-calendar-weekday {
    font-size: 0.65rem;
    padding: 0.35rem 0;
  }

  .leave-calendar-day {
    min-height: 3.2rem;
    padding: 0.2rem;
  }

  .leave-calendar-grid-compact .leave-calendar-day {
    min-height: 2.6rem;
  }

  .leave-calendar-day-number {
    font-size: 0.65rem;
    width: 1.1rem;
    height: 1.1rem;
  }
}

.sortable-th {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

/* ---------- Premium toast notifications ---------- */

.app-toast-stack {
  position: fixed;
  bottom: 6rem;
  right: 1rem;
  z-index: 1090;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.6rem;
  width: 340px;
  max-width: calc(100vw - 2rem);
  pointer-events: none;
}

.app-toast {
  pointer-events: auto;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: 0.75rem;
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.18);
  overflow: hidden;
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.app-toast.app-toast-visible {
  opacity: 1;
  transform: translateX(0);
}

.app-toast.app-toast-leaving {
  opacity: 0;
  transform: translateX(16px);
}

.app-toast-clickable {
  cursor: pointer;
}

.app-toast-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.75rem 0.75rem 0.6rem;
}

.app-toast-icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary);
}

.app-toast-success .app-toast-icon {
  background: var(--bs-success-bg-subtle);
  color: var(--bs-success);
}

.app-toast-danger .app-toast-icon {
  background: var(--bs-danger-bg-subtle);
  color: var(--bs-danger);
}

.app-toast-warning .app-toast-icon {
  background: var(--bs-warning-bg-subtle);
  color: var(--bs-warning);
}

.app-toast-content {
  flex: 1;
  min-width: 0;
}

.app-toast-title {
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.1rem;
}

.app-toast-message {
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
  word-break: break-word;
}

.app-toast-close {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: var(--bs-secondary-color);
  padding: 0.1rem;
  line-height: 1;
  border-radius: 0.25rem;
}

.app-toast-close:hover {
  background: var(--bs-tertiary-bg);
}

.app-toast-progress {
  height: 3px;
  background: var(--bs-tertiary-bg);
}

.app-toast-progress-bar {
  height: 100%;
  width: 100%;
  background: var(--brand, var(--bs-primary));
  animation-name: app-toast-shrink;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

.app-toast-progress-bar.app-toast-paused {
  animation-play-state: paused;
}

@keyframes app-toast-shrink {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

/* ---------- Attendance calendar (employee monitoring dashboard) ---------- */

.attendance-card-layout {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.attendance-stats {
  flex: 0 0 auto;
  min-width: 8rem;
  border-right: 1px solid var(--bs-border-color);
  padding-right: 1rem;
}

.attendance-rating {
  font-size: 0.85rem;
  font-weight: 700;
}

.attendance-calendar {
  flex: 1 1 auto;
  min-width: 0;
}

.attendance-mini-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.3rem;
}

.attendance-mini-weekday {
  text-align: center;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
}

.attendance-mini-day {
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  color: var(--bs-body-color);
  background: var(--bs-tertiary-bg);
}

.attendance-mini-day.is-today {
  box-shadow: 0 0 0 2px var(--brand);
}

.attendance-mini-day.is-outside {
  visibility: hidden;
}

.attendance-mini-day.status-present { background: var(--status-good); color: #fff; }
.attendance-mini-day.status-late { background: var(--status-warning); color: #fff; }
.attendance-mini-day.status-no_checkout { background: var(--status-info); color: #fff; }
.attendance-mini-day.status-absent { background: var(--status-critical); color: #fff; }
.attendance-mini-day.status-weekend,
.attendance-mini-day.status-future { background: var(--bs-tertiary-bg); }

/* Work Monitoring's Daily Work Submission calendar reuses this same
   attendance-mini-* grid component with its own status vocabulary. */
.attendance-mini-day.status-submitted { background: var(--status-good); color: #fff; }
.attendance-mini-day.status-draft { background: var(--status-warning); color: #fff; }
.attendance-mini-day.status-missing { background: var(--status-critical); color: #fff; }

/* ---------- Work Monitoring: task status bar + roster cards ---------- */

.wm-status-bar {
  display: flex;
  gap: 2px;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bs-tertiary-bg);
}

.wm-status-bar > span {
  display: block;
  height: 100%;
}

.wm-seg-completed { background: var(--status-good); }
.wm-seg-inprogress { background: var(--brand); }
.wm-seg-review { background: var(--status-info); }
.wm-seg-pending { background: var(--status-warning); }
.wm-seg-overdue { background: var(--status-critical); }
.wm-seg-empty { background: var(--bs-border-color-translucent); }

.stat-subtext-progress { color: var(--brand); font-weight: 700; }

/* ---------- Work Monitoring: Daily/Weekly/Monthly segmented switch ----------
   A native-style segmented control (macOS/iOS grouped-button pattern): a
   recessed "groove" track with a lifted white chip for the active segment,
   rather than a flat filled button — reads as a filter, not a call-to-action.
   The buttons are real <button> elements (needed for Bootstrap's data-bs-toggle
   pill JS), so they need an explicit reset — Bootstrap's .nav-link styles
   assume an <a>, not a <button>, and leaves native button chrome (border,
   background, font) in place otherwise. */

.wm-period-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--bs-tertiary-bg);
  border-radius: 0.65rem;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

.wm-period-switch .nav-link {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--bs-secondary-color);
  background: transparent;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.wm-period-switch .nav-link i {
  font-size: 0.85rem;
}

.wm-period-switch .nav-link:hover:not(.active) {
  background: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}

.wm-period-switch .nav-link.active {
  background: var(--bs-body-bg);
  color: var(--brand);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.16);
}

.wm-period-switch .nav-link:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

/* ---------- Leaderboard ---------- */

.leaderboard-tab-strip {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  background: var(--bs-tertiary-bg);
  border-radius: 0.75rem;
  padding: 0.25rem;
}

.leaderboard-tab-strip .nav-link {
  border-radius: 0.55rem;
  padding: 0.45rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
}

.leaderboard-tab-strip .nav-link.active {
  background: var(--bs-body-bg);
  color: var(--brand);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.podium-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  align-items: end;
}

@media (max-width: 767.98px) {
  .podium-row {
    grid-template-columns: 1fr;
  }
}

.podium-card {
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: 0.9rem;
  padding: 1.5rem 1rem 1.25rem;
  text-align: center;
  position: relative;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  background: var(--bs-body-bg);
}

.podium-card-first {
  border-color: var(--brand-gold);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand-gold) 14%, var(--bs-body-bg)) 0%, var(--bs-body-bg) 65%);
  transform: translateY(-0.9rem);
  box-shadow: 0 12px 26px rgba(234, 179, 8, 0.2);
}

.podium-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.85rem;
  color: #fff;
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
}

.podium-rank-badge-1 { background: linear-gradient(135deg, var(--brand-gold), #f59e0b); }
.podium-rank-badge-2 { background: linear-gradient(135deg, #94a3b8, #64748b); }
.podium-rank-badge-3 { background: linear-gradient(135deg, #d18b53, #b56a34); }

.podium-name {
  font-weight: 700;
  font-size: 0.95rem;
  margin-top: 0.5rem;
}

.podium-role {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
}

.podium-score {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--brand-gold);
  margin: 0.5rem 0 0.25rem;
}

.podium-meta {
  font-size: 0.72rem;
  color: var(--bs-secondary-color);
}

.leaderboard-table .rank-cell {
  font-weight: 700;
  color: var(--bs-secondary-color);
  font-size: 0.85rem;
}

.leaderboard-score-bar {
  height: 6px;
  max-width: 60px;
  border-radius: 999px;
  background: var(--bs-tertiary-bg);
  overflow: hidden;
}

.leaderboard-table th,
.leaderboard-table td {
  white-space: nowrap;
}

.leaderboard-score-bar-fill {
  height: 100%;
  background: var(--status-good);
  border-radius: 999px;
}

.leaderboard-donut-wrap {
  width: 100%;
  max-width: 190px;
  height: 190px;
  margin: 0 auto;
  position: relative;
}

.scoring-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.scoring-breakdown-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 140px;
}

.scoring-breakdown-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand);
  font-size: 1rem;
  flex-shrink: 0;
}

.scoring-breakdown-label {
  font-size: 0.72rem;
  color: var(--bs-secondary-color);
  font-weight: 600;
}

.scoring-breakdown-value {
  font-size: 1rem;
  font-weight: 700;
}

.scoring-breakdown-total .scoring-breakdown-icon {
  background: color-mix(in srgb, var(--brand-gold) 18%, transparent);
  color: var(--brand-gold);
}

.reward-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0;
}

.reward-row:not(:last-child) {
  border-bottom: 1px solid var(--bs-border-color-translucent);
}

.reward-rank-icon {
  width: 1.75rem;
  text-align: center;
  color: var(--brand-gold);
  font-size: 1rem;
}

/* "How is this calculated?" — a floating dropdown on each podium card and an
   expanding row under each table row. Both draw the same .score-breakdown. */
.podium-breakdown {
  margin-top: 0.75rem;
}

.podium-breakdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: 999px;
  background: transparent;
  color: var(--bs-secondary-color);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
}

.podium-breakdown-toggle:hover,
.podium-breakdown-toggle[aria-expanded="true"] {
  border-color: var(--brand);
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, transparent);
}

.podium-breakdown-toggle .bi {
  font-size: 0.65rem;
  transition: transform 0.15s ease;
}

.podium-breakdown-toggle[aria-expanded="true"] .bi {
  transform: rotate(180deg);
}

.dropdown-menu.podium-breakdown-menu {
  width: min(19.5rem, calc(100vw - 2rem));
  padding: 0;
  text-align: left;
  border-radius: 0.8rem;
  box-shadow: 0 16px 36px -14px rgba(15, 23, 42, 0.35);
}

/* An open panel hangs over the neighbouring cards, which come later in the
   DOM; lift the card it belongs to above them. (:has and :focus-within are
   separate rules so an older browser dropping one keeps the other.) */
.podium-card:focus-within {
  z-index: 20;
}

.podium-card:has(.podium-breakdown-menu.show) {
  z-index: 20;
}

.score-breakdown {
  padding: 0.9rem 1rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--bs-body-color);
  text-align: left;
}

.score-breakdown-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--bs-border-color-translucent);
}

.score-breakdown-title {
  font-weight: 700;
  font-size: 0.8rem;
}

.score-breakdown-score {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--brand);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.score-breakdown-score small {
  margin-left: 0.1rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
}

.score-breakdown-note {
  margin: 0.6rem 0 0;
  font-size: 0.72rem;
  color: var(--bs-secondary-color);
}

.score-breakdown-lines {
  list-style: none;
  margin: 0;
  padding: 0;
}

.score-breakdown-lines li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--bs-border-color-translucent);
}

.score-breakdown-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand);
  font-size: 0.85rem;
}

.score-breakdown-main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.score-breakdown-name {
  font-weight: 600;
}

.score-breakdown-calc {
  font-size: 0.72rem;
  color: var(--bs-secondary-color);
  font-variant-numeric: tabular-nums;
}

.score-breakdown-hint {
  margin-top: 0.1rem;
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--bs-secondary-color);
}

.score-breakdown-points {
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.score-breakdown-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.6rem;
  font-weight: 700;
}

.score-breakdown-total .score-breakdown-points {
  font-size: 1.05rem;
  color: var(--brand);
}

.score-breakdown-members {
  max-height: 14rem;
  overflow-y: auto;
}

.score-breakdown-members li {
  align-items: center;
  padding: 0.4rem 0;
}

.score-breakdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--bs-secondary-color);
}

.score-breakdown-toggle:hover,
.score-breakdown-toggle[aria-expanded="true"] {
  border-color: var(--brand);
  color: var(--brand);
}

.score-breakdown-toggle .bi {
  font-size: 0.7rem;
  transition: transform 0.15s ease;
}

.score-breakdown-toggle[aria-expanded="true"] .bi {
  transform: rotate(180deg);
}

/* The detail row costs nothing while it is collapsed, and never takes the
   hover tint of the row above it. */
.leaderboard-table .score-breakdown-row > td {
  padding: 0;
  border-bottom: 0;
}

.leaderboard-table.table-hover > tbody > tr.score-breakdown-row:hover > * {
  --bs-table-bg-state: transparent;
  box-shadow: none;
}

/* Pinned to the left edge so it stays in view when a phone scrolls the table
   sideways; white-space put back because the table cells are nowrap. */
.score-breakdown-inline {
  position: sticky;
  left: 0;
  width: min(26rem, calc(100vw - 4rem));
  margin: 0.25rem 0 0.75rem 0.5rem;
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: 0.8rem;
  background: var(--bs-tertiary-bg);
  white-space: normal;
}

/* ---------- Task form: One time / Daily / Weekly / Monthly repeat picker ----
   A single bordered well inside the task modal, so the whole repeat
   configuration reads as one decision rather than four loose fields. The
   mode switch reuses the recessed-groove segmented control established by
   .wm-period-switch (Work Monitoring); the well itself stays untinted on
   the default "One time" setting and only lifts once a cadence is chosen,
   so an ordinary task's form looks no busier than before. */

.repeat-picker {
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: 0.85rem;
  padding: 0.9rem 1rem;
  background: var(--bs-body-bg);
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.repeat-picker.is-repeating {
  background: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* ---- header: icon + label + live cadence summary, switch on the right ---- */

.repeat-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.repeat-head-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
  font-size: 0.95rem;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.repeat-picker.is-repeating .repeat-head-icon {
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  color: var(--brand);
}

.repeat-head-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  margin-right: auto;
}

.repeat-head-title {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--bs-body-color);
}

.repeat-head-summary {
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--bs-secondary-color);
}

.repeat-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--bs-tertiary-bg);
  border-radius: 0.65rem;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

.repeat-picker.is-repeating .repeat-switch {
  background: var(--bs-secondary-bg);
}

.repeat-seg {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--bs-secondary-color);
  background: transparent;
  border-radius: 0.5rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.repeat-seg i {
  font-size: 0.85rem;
}

.repeat-seg:hover:not(.active) {
  background: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}

.repeat-seg.active {
  background: var(--bs-body-bg);
  color: var(--brand);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.16);
}

.repeat-seg:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

/* Narrow screens: the labels are the first thing worth dropping — the four
   icons still read as a switch, and the summary line spells out the mode. */
@media (max-width: 30rem) {
  .repeat-seg span {
    display: none;
  }

  .repeat-seg {
    padding: 0.45rem 0.6rem;
  }
}

/* ---- body: the day/date pickers, revealed once a cadence is chosen ---- */

.repeat-body {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--bs-border-color-translucent);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.repeat-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.repeat-panel-label,
.repeat-field-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bs-secondary-color);
}

.repeat-presets {
  display: inline-flex;
  gap: 0.15rem;
}

.repeat-preset {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 0.15rem 0.4rem;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--brand);
  border-radius: 0.35rem;
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.repeat-preset:hover {
  background: color-mix(in srgb, var(--brand) 12%, transparent);
}

.repeat-preset:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

.repeat-week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.3rem;
  max-width: 26rem;
}

/* Seven across, so a month's dates line up in rows the way they would on a
   calendar instead of reflowing into an arbitrary ribbon of numbers. */
.repeat-day-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.3rem;
  max-width: 26rem;
}

.repeat-chip {
  position: relative;
  margin: 0;
  cursor: pointer;
}

.repeat-chip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.repeat-chip span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--bs-secondary-color);
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.repeat-chip-day span {
  border-radius: 0.45rem;
}

.repeat-chip:hover span {
  border-color: var(--brand);
  color: var(--bs-body-color);
}

.repeat-chip input:checked + span {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--brand) 40%, transparent);
}

.repeat-chip input:focus-visible + span {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

/* ---- footer: end date on the left, live "next up" preview on the right ---- */

.repeat-footer {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  flex-wrap: wrap;
}

/* Daily has no day/date panel above it, so the footer would otherwise draw a
   second rule directly under .repeat-body's — separate it only when a panel
   is actually on screen. */
.repeat-panel:not([hidden]) ~ .repeat-footer {
  padding-top: 0.85rem;
  border-top: 1px solid var(--bs-border-color-translucent);
}

.repeat-end,
.repeat-preview {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.repeat-end {
  flex: 0 0 auto;
  width: 10.5rem;
}

.repeat-end input[type="date"] {
  font-variant-numeric: tabular-nums;
}

.repeat-preview {
  flex: 1 1 14rem;
  min-width: 0;
}

.repeat-preview-dates {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--bs-body-color);
  font-variant-numeric: tabular-nums;
}

.repeat-field-hint {
  display: flex;
  align-items: flex-start;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--bs-secondary-color);
}

.repeat-hint {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  margin: 0.55rem 0 0;
  font-size: 0.72rem;
  color: var(--bs-secondary-color);
}

.repeat-hint i,
.repeat-field-hint i {
  margin-top: 0.1rem;
  flex: 0 0 auto;
}

.repeat-error {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  color: var(--bs-danger);
}

/* The repeat cadence badge shown next to a task's name in the task tables. */
.repeat-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.45rem;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
  border-radius: 0.35rem;
  white-space: nowrap;
  vertical-align: middle;
}

/* ---------- Task notes ----------

   The review conversation on a task: written from the Submit-for-review
   popup and from a reviewer's approve/send-back decision, read on the
   task's Notes tab and read-only above the daily work in a project's task
   detail. Built from Bootstrap's own surface/border tokens so both themes
   come out of one definition. */

/* The "N notes" flag under a task's name in the task tables. Quieter than
   .repeat-badge next to it — it reports that a conversation exists, it
   isn't a property of the task the way the repeat cadence is. */
.task-note-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.25rem;
  padding: 0.05rem 0.4rem;
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--bs-secondary-color);
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.35rem;
  white-space: nowrap;
}

.task-note-flag i {
  color: var(--brand);
  font-size: 0.7rem;
}

.note-thread {
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--bs-body-bg);
}

/* Hairlines between notes rather than a card each: it reads as one
   conversation, and a stack of shadowed cards would flatten the tab's own
   hierarchy. */
.note-item {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid var(--bs-border-color-translucent);
}

.note-item:last-child {
  border-bottom: 0;
}

.note-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.25rem;
}

.note-author {
  font-weight: 600;
  font-size: 0.82rem;
}

.note-role {
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bs-secondary-color);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.25rem;
  padding: 0 0.3rem;
  line-height: 1.6;
}

.note-status-chip {
  font-size: 0.65rem;
}

/* Pushed to the end of the meta row, so every note's timestamp lines up
   down the right edge however long the name and chips are. */
.note-time {
  margin-left: auto;
  font-size: 0.68rem;
  color: var(--bs-secondary-color);
  font-variant-numeric: tabular-nums;
}

.note-body {
  font-size: 0.82rem;
  color: var(--bs-body-color);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.note-attachments {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.note-attachment-thumb {
  width: 5rem;
  height: 3.5rem;
  object-fit: cover;
  background: var(--bs-tertiary-bg);
}

.note-attachment-doc {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 12rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.7rem;
  color: var(--bs-body-color);
  text-decoration: none;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.35rem;
  background: var(--bs-tertiary-bg);
}

.note-attachment-doc:hover {
  border-color: var(--brand);
}

.note-thread-empty {
  margin: 0;
  padding: 0.85rem;
  font-size: 0.78rem;
  color: var(--bs-secondary-color);
}

/* The Add note box above the thread. */
.note-composer {
  margin-bottom: 0.75rem;
}

.note-composer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* ---------- Bookings: Add/Edit form ---------- */

.guest-total-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1rem;
  border: 1px dashed var(--bs-border-color);
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 6%, transparent);
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.guest-total-chip strong {
  font-size: 1.1rem;
  color: var(--brand);
}

.booking-guide li + li {
  margin-top: 0.5rem;
}

.currency-switch .btn {
  font-weight: 600;
  font-size: 0.85rem;
}

.currency-switch .btn.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* ---------- Bookings: the Add page, drawn like the approved mockup (2026-10-05) ----------
   Colours: the app's own tokens (--brand, Bootstrap's body / border / tertiary
   variables) plus one quiet tint per service, so the dark theme follows. Every
   rule is scoped to #booking-form or a .booking-* class. */
#booking-form {
  --bk-line-strong: color-mix(in srgb, var(--bs-body-color) 28%, var(--bs-body-bg));
  --bk-brand-soft: color-mix(in srgb, var(--brand) 12%, var(--bs-body-bg));
  --bk-brand-line: color-mix(in srgb, var(--brand) 40%, var(--bs-body-bg));
  --bk-room: #0b7a70;
  --bk-room-soft: #dcf3ef;
  --bk-safari: #955608;
  --bk-safari-soft: #fcefd6;
  --bk-good: #15803d;
  --bk-good-soft: #e1f4e8;
  --bk-warn: #9a5700;
  --bk-warn-soft: #fff2d4;
  --bk-warn-line: #e8b95c;
  --bk-bad: #c02a2a;
}

[data-bs-theme="dark"] #booking-form {
  --bk-room: #4fd1c0;
  --bk-room-soft: #12343a;
  --bk-safari: #f0b45a;
  --bk-safari-soft: #3a2c14;
  --bk-good: #62d490;
  --bk-good-soft: #14301f;
  --bk-warn: #f2b44d;
  --bk-warn-soft: #3a2c10;
  --bk-warn-line: #8a6a22;
  --bk-bad: #ff8f8f;
}

/* The section cards' small tags: Room Sale, Safari, Safari only, Optional. */
.fs-card-chip--room {
  background: var(--bk-room-soft, #dcf3ef);
  color: var(--bk-room, #0b7a70);
  border-color: transparent;
}

.fs-card-chip--safari {
  background: var(--bk-safari-soft, #fcefd6);
  color: var(--bk-safari, #955608);
  border-color: transparent;
}

/* The Add page's payment and cost cards are filled in on the page, so they are
   drawn like every other card instead of the muted, locked system look. */
#booking-form[data-add-page] .form-fieldset.fs-card--system {
  background: var(--bs-body-bg);
}

#booking-form[data-add-page] .form-fieldset.fs-card--system > legend,
#booking-form[data-add-page] .form-fieldset.fs-card--system > .fs-card-header {
  background: var(--bs-tertiary-bg);
  color: var(--bs-emphasis-color);
}

#booking-form[data-add-page] .form-fieldset.fs-card--system > legend::after,
#booking-form[data-add-page] .form-fieldset.fs-card--system > .fs-card-header::after {
  content: none;
}

.booking-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
  letter-spacing: 0.01em;
  margin-bottom: 0.4rem;
}

.booking-label__hint {
  font-weight: 400;
  margin-left: 0.4rem;
}

/* ---------- Booking type tiles ---------- */
.booking-services {
  margin-bottom: 1rem;
}

.booking-tiles {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.service-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--bk-line-strong, var(--bs-border-color));
  border-radius: 0.75rem;
  background: var(--bs-body-bg);
  cursor: pointer;
  transition: border-color 0.12s, background-color 0.12s, box-shadow 0.12s;
}

.service-tile:hover {
  background: var(--bs-tertiary-bg);
}

.service-tile input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.service-tile:focus-within {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.service-tile__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.65rem;
}

.service-tile__icon svg {
  width: 1.4rem;
  height: 1.4rem;
}

.service-tile[data-service-kind="room"] .service-tile__icon {
  background: var(--bk-room-soft, #dcf3ef);
  color: var(--bk-room, #0b7a70);
}

.service-tile[data-service-kind="safari"] .service-tile__icon {
  background: var(--bk-safari-soft, #fcefd6);
  color: var(--bk-safari, #955608);
}

.service-tile__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.service-tile__text strong {
  font-size: 1rem;
}

.service-tile__text small {
  color: var(--bs-secondary-color);
  font-size: 0.8rem;
}

/* A tick that only shows while the tile is on: a booking can hold both. */
.service-tile__tick {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  margin-left: auto;
  border-radius: 50%;
  color: transparent;
  border: 1px solid var(--bs-border-color);
  font-size: 0.8rem;
}

.service-tile.is-on,
.service-tile:has(input:checked) {
  background: var(--bs-body-bg);
}

.service-tile[data-service-kind="room"].is-on,
.service-tile[data-service-kind="room"]:has(input:checked) {
  border-color: var(--bk-room, #0b7a70);
  box-shadow: inset 0 0 0 1px var(--bk-room, #0b7a70);
}

.service-tile[data-service-kind="safari"].is-on,
.service-tile[data-service-kind="safari"]:has(input:checked) {
  border-color: var(--bk-safari, #955608);
  box-shadow: inset 0 0 0 1px var(--bk-safari, #955608);
}

.service-tile.is-on .service-tile__tick,
.service-tile:has(input:checked) .service-tile__tick {
  color: #fff;
  border-color: transparent;
}

.service-tile[data-service-kind="room"].is-on .service-tile__tick,
.service-tile[data-service-kind="room"]:has(input:checked) .service-tile__tick {
  background: var(--bk-room, #0b7a70);
}

.service-tile[data-service-kind="safari"].is-on .service-tile__tick,
.service-tile[data-service-kind="safari"]:has(input:checked) .service-tile__tick {
  background: var(--bk-safari, #955608);
}

/* ---------- Booking setup: the fields, the rate box and the currency switch ---------- */
.booking-setup-grid {
  display: grid;
  gap: 0.9rem 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}

.booking-setup-grid > div > .mb-3,
.booking-setup-grid > div > div[id^="div_"] {
  margin-bottom: 0 !important;
}

.booking-setup .booking-rate-group .input-group-text {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
  background: var(--bs-tertiary-bg);
}

.booking-setup .currency-switch {
  border: 1px solid var(--bk-line-strong);
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--bs-body-bg);
  height: 2.4rem;
}

.booking-setup .currency-switch .btn {
  flex: 1;
  border: 0;
  border-right: 1px solid var(--bs-border-color);
  border-radius: 0;
  color: var(--bs-secondary-color);
  font-weight: 600;
  font-size: 0.9rem;
  background: transparent;
}

.booking-setup .currency-switch .btn:last-child {
  border-right: 0;
}

.booking-setup .currency-switch .btn:hover {
  background: var(--bs-tertiary-bg);
}

.booking-setup .currency-switch .btn.active {
  background: var(--bk-brand-soft);
  color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}

/* ---------- Readouts, steppers, option cards ---------- */
.booking-readout-field {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-bottom: 1rem;
}

.booking-readout-field .form-label {
  margin-bottom: 0.25rem;
}

.booking-readout {
  min-height: 2.4rem;
  display: flex;
  align-items: center;
  padding: 0 0.7rem;
  border: 1px dashed var(--bk-line-strong);
  border-radius: 0.5rem;
  background: var(--bs-tertiary-bg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.booking-stepper {
  display: flex;
  width: fit-content;
  align-items: stretch;
  height: 2.4rem;
  border: 1px solid var(--bk-line-strong);
  border-radius: 0.5rem;
  background: var(--bs-body-bg);
  overflow: hidden;
}

.booking-stepper button {
  width: 2.5rem;
  border: 0;
  background: transparent;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--bs-secondary-color);
  cursor: pointer;
}

.booking-stepper button:hover {
  background: var(--bs-tertiary-bg);
}

.booking-stepper .booking-stepper__input.form-control {
  width: 3rem;
  height: auto;
  border: 0;
  border-radius: 0;
  padding: 0;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: none;
  appearance: textfield;
  -moz-appearance: textfield;
}

.booking-stepper .booking-stepper__input::-webkit-outer-spin-button,
.booking-stepper .booking-stepper__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.booking-opts {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
}

.booking-opt {
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  text-align: left;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--bk-line-strong);
  border-radius: 0.65rem;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  cursor: pointer;
}

.booking-opt:hover {
  background: var(--bs-tertiary-bg);
}

.booking-opt strong {
  font-weight: 700;
}

.booking-opt span {
  color: var(--bs-secondary-color);
  font-size: 0.78rem;
}

.booking-opt[aria-pressed="true"] {
  border-color: var(--brand);
  background: var(--bk-brand-soft);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.booking-opts.is-invalid .booking-opt {
  border-color: var(--bk-bad);
}

.booking-opts ~ .invalid-feedback {
  display: block;
}

.booking-add-page .input-group ~ .invalid-feedback,
#booking-form .input-group ~ .invalid-feedback {
  display: block;
}

/* ---------- Pricing ---------- */
.booking-price-note {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  align-items: center;
  margin: -0.35rem 0 1rem;
}

.booking-calc {
  font-size: 0.84rem;
  color: var(--bs-secondary-color);
  font-variant-numeric: tabular-nums;
}

.booking-netbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.35rem 1rem;
  padding: 0.9rem 1rem;
  margin-bottom: 1rem;
  border-radius: 0.65rem;
  background: var(--bk-brand-soft);
  border: 1px solid var(--bk-brand-line);
}

.booking-netbox .form-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
}

.booking-netbox__big {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.booking-netbox__eq {
  color: var(--bs-secondary-color);
  font-variant-numeric: tabular-nums;
}

/* ---------- Chips, buttons, small pieces shared by the money cards ---------- */
.booking-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  color: var(--bs-secondary-color);
  white-space: nowrap;
}

.booking-chip:empty {
  display: none;
}

.booking-chip--room {
  background: var(--bk-room-soft);
  color: var(--bk-room);
  border-color: transparent;
}

.booking-chip--safari {
  background: var(--bk-safari-soft);
  color: var(--bk-safari);
  border-color: transparent;
}

.booking-chip--brand {
  background: var(--bk-brand-soft);
  color: var(--brand);
  border-color: transparent;
}

.booking-ibtn {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--bs-secondary-color);
  cursor: pointer;
}

.booking-ibtn:hover {
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}

.booking-ibtn--danger:hover {
  background: color-mix(in srgb, var(--bk-bad) 14%, var(--bs-body-bg));
  color: var(--bk-bad);
}

.booking-foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  margin-bottom: 0.75rem;
}

.booking-foot,
.booking-hint {
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
}

.booking-err {
  font-size: 0.8rem;
  color: var(--bk-bad);
  margin-top: 0.25rem;
}

.booking-empty {
  padding: 1.1rem;
  margin-bottom: 0.75rem;
  border: 1px dashed var(--bk-line-strong);
  border-radius: 0.65rem;
  text-align: center;
  color: var(--bs-secondary-color);
}

.booking-notice {
  padding: 0.5rem 0.8rem;
  margin-bottom: 0.75rem;
  border-radius: 0.5rem;
  background: var(--bk-brand-soft);
  border: 1px solid var(--bk-brand-line);
  font-size: 0.88rem;
  font-weight: 600;
}

.booking-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.booking-field > .booking-label,
.booking-field > label.booking-label {
  margin-bottom: 0;
}

.booking-seg {
  display: flex;
  border: 1px solid var(--bk-line-strong);
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--bs-body-bg);
  max-width: 100%;
}

.booking-seg button {
  appearance: none;
  flex: 1;
  min-width: 0;
  min-height: 2.25rem;
  padding: 0.2rem 0.4rem;
  border: 0;
  border-right: 1px solid var(--bs-border-color);
  background: transparent;
  color: var(--bs-secondary-color);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

.booking-seg button:last-child {
  border-right: 0;
}

.booking-seg button:hover {
  background: var(--bs-tertiary-bg);
}

.booking-seg button[aria-pressed="true"] {
  background: var(--bk-brand-soft);
  color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}

/* ---------- Payments received ---------- */
.booking-pay__top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}

.booking-pstats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
}

.booking-pstat {
  display: flex;
  flex-direction: column;
}

.booking-pstat span {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}

.booking-pstat strong {
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
}

.booking-pstat strong.is-paid {
  color: var(--bk-good);
}

.booking-pstat strong.is-over {
  color: var(--bk-bad);
}

.booking-quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.booking-quick .booking-label {
  margin: 0 0.15rem 0 0;
}

.booking-paycard {
  container-type: inline-size;
  border: 1px solid var(--bk-line-strong);
  border-radius: 0.65rem;
  background: var(--bs-body-bg);
  margin-bottom: 0.9rem;
}

.booking-paycard__h {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  background: var(--bs-tertiary-bg);
  border-bottom: 1px solid var(--bs-border-color);
  border-radius: 0.65rem 0.65rem 0 0;
}

.booking-paycard__n {
  font-weight: 700;
}

.booking-paycard__kind {
  width: auto;
  font-weight: 600;
}

.booking-paycard__h .booking-ibtn {
  margin-left: auto;
}

.booking-paycard__b {
  display: grid;
  gap: 0.8rem 0.9rem;
  padding: 0.8rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr));
}

@container (min-width: 640px) {
  .booking-paycard__b {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .booking-field--wide {
    grid-column: span 2;
  }
}

.booking-paycard .form-select.is-needed {
  border-color: var(--bk-warn-line);
  background-color: var(--bk-warn-soft);
}

.booking-paycard__note {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.1rem;
  padding: 0.55rem 0.8rem;
  border-top: 1px dashed var(--bk-line-strong);
  font-size: 0.84rem;
  color: var(--bs-secondary-color);
  font-variant-numeric: tabular-nums;
}

.booking-paycard__note strong {
  color: var(--bs-body-color);
}

/* ---------- Booking costs ---------- */
.booking-cost-head,
.booking-cost {
  display: grid;
  gap: 0.5rem 0.75rem;
  grid-template-columns: minmax(8rem, 1.1fr) minmax(8rem, 1.2fr) minmax(11.5rem, 1.3fr) 2rem;
  align-items: start;
}

.booking-cost-head {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  padding: 0 0.15rem 0.4rem;
}

.booking-cost {
  padding: 0.65rem 0;
  border-top: 1px solid var(--bs-border-color);
}

.booking-cost__cl {
  display: none;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
}

.booking-cost__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.4rem;
  font-weight: 700;
}

.booking-cost__cur {
  max-width: 5rem;
  flex: none;
  font-weight: 600;
  font-size: 0.85rem;
}

@media (max-width: 760px) {
  .booking-cost-head {
    display: none;
  }

  .booking-cost {
    grid-template-columns: minmax(0, 1fr) 2rem;
  }

  .booking-cost > .booking-field:nth-child(1) {
    grid-column: 1 / -1;
  }

  .booking-cost > .booking-field:nth-child(2),
  .booking-cost > .booking-field:nth-child(3) {
    grid-column: 1 / 2;
  }

  .booking-cost > .booking-cost__x {
    grid-column: 2;
    grid-row: 3;
  }

  .booking-cost__cl {
    display: block;
  }
}

/* ---------- Folded cards (More details, Additional payments, Reviews & notes) ---------- */
.js-folds .fs-card--collapsible {
  display: flow-root;
}

.js-folds .fs-card--collapsible > legend {
  cursor: pointer;
}

.js-folds .fs-card--collapsible > legend:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.fs-card-toggle {
  transition: transform 0.15s;
  color: var(--bs-secondary-color);
}

.fs-card--collapsible.is-open .fs-card-toggle {
  transform: rotate(90deg);
}

.js-folds .fs-card--collapsible:not(.is-open) {
  padding-bottom: 0;
}

.js-folds .fs-card--collapsible:not(.is-open) > legend {
  margin-bottom: 0;
  border-bottom: 0;
  border-radius: calc(var(--fs-card-radius) - 1px);
}

/* !important: the money blocks inside are Bootstrap's d-none d-sm-block tables. */
.js-folds .fs-card--collapsible:not(.is-open) > :not(legend) {
  display: none !important;
}

/* ---------- The right-hand column: summary, checklist, Save ---------- */
.booking-summary-card {
  border-radius: 0.75rem;
  margin-bottom: 1rem;
}

.booking-sum-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--bs-border-color);
}

.booking-sum-h h2 {
  font-size: 0.98rem;
  font-weight: 700;
  margin: 0;
}

.booking-sum-b {
  padding: 0.35rem 1rem 1rem;
}

.booking-sum-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--bs-border-color);
  font-variant-numeric: tabular-nums;
}

.booking-sum-row > span:first-child {
  color: var(--bs-secondary-color);
}

.booking-sum-row--strong {
  font-weight: 700;
  font-size: 1rem;
}

.booking-sum-row--strong > span:first-child {
  color: var(--bs-body-color);
}

.booking-sum-row--sub {
  font-size: 0.88rem;
}

.booking-sum-row--due {
  border-bottom: 0;
  padding-top: 0.75rem;
  font-weight: 700;
  font-size: 1.1rem;
}

.booking-sum-row--due > span:first-child {
  color: var(--bs-body-color);
}

.booking-sum-row .is-due,
.booking-mobile-bar .is-due {
  color: var(--bk-warn);
}

.booking-sum-row .is-paid,
.booking-mobile-bar .is-paid {
  color: var(--bk-good);
}

.booking-sum-row .is-over,
.booking-mobile-bar .is-over {
  color: var(--bk-bad);
}

.booking-sum-note {
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
  margin: 0.15rem 0 0;
}

.booking-sum-note:empty {
  display: none;
}

.booking-checks {
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0.8rem 0 0;
  border-top: 1px solid var(--bs-border-color);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.86rem;
}

.booking-checks li {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}

.booking-checks li i {
  margin-top: 0.15rem;
  color: var(--bk-warn);
}

.booking-checks li.is-ok i {
  color: var(--bk-good);
}

.booking-linkbtn {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  text-align: left;
  color: var(--bs-body-color);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--bk-line-strong);
  text-underline-offset: 3px;
}

.booking-sum-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.booking-after-card {
  padding: 0.9rem 1rem;
  font-size: 0.86rem;
  border-radius: 0.75rem;
}

.booking-after-card h3 {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.booking-after-card ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  counter-reset: after;
}

.booking-after-card li {
  display: flex;
  gap: 0.6rem;
  color: var(--bs-secondary-color);
}

.booking-after-card li::before {
  counter-increment: after;
  content: counter(after);
  flex: none;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--bk-brand-soft);
  color: var(--brand);
  font-weight: 700;
  font-size: 0.74rem;
}

.booking-after-card strong {
  color: var(--bs-body-color);
}

/* The summary sits under the form on a narrow screen, so the balance and Save
   stay in reach in a bar at the bottom (the mockup's mobile bar). */
.booking-mobile-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
  background: var(--bs-body-bg);
  border-top: 1px solid var(--bs-border-color);
}

.booking-mobile-bar small {
  display: block;
  color: var(--bs-secondary-color);
  font-size: 0.74rem;
}

.booking-mobile-bar strong {
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 1200px) {
  .booking-mobile-bar {
    display: none;
  }
}

@media (max-width: 1199.98px) {
  #booking-form[data-add-page] {
    padding-bottom: 4.5rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .booking-opt,
  .booking-seg button,
  .service-tile {
    transition: background-color 0.12s, border-color 0.12s, color 0.12s;
  }
}

/* The Add page's summary and guide share one sticky column that scrolls inside
   itself, so a tall summary never hides the Save button under it. */
@media (min-width: 1200px) {
  .booking-aside {
    position: sticky;
    top: calc(var(--topbar-height) + 1.75rem);
    max-height: calc(100vh - var(--topbar-height) - 3.5rem);
    overflow-y: auto;
  }
}

.booking-guide-details > summary {
  cursor: pointer;
  list-style: none;
}

.booking-guide-details > summary::-webkit-details-marker {
  display: none;
}

.booking-guide-details > summary::after {
  content: "\F282"; /* bootstrap-icons chevron-down */
  font-family: "bootstrap-icons";
  float: right;
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
  transition: transform 0.15s;
}

.booking-guide-details[open] > summary::after {
  transform: rotate(180deg);
}

/* A Cash Book payment that has not said which Cash Book yet. */
.form-select.is-needed {
  border-color: var(--bs-warning);
  background-color: var(--bs-warning-bg-subtle);
}

/* ---------------------------------------------------------------------------
   Field Studio builder
   Rows on the form canvas and chips in the table-columns strip. Both are
   drag sources and drop targets; see static/js/field-studio.js.
   --------------------------------------------------------------------------- */

.fs-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  background: var(--bs-body-bg);
  cursor: grab;
}

.fs-row:hover {
  border-color: color-mix(in srgb, var(--brand) 40%, var(--bs-border-color));
}

.fs-row-selected {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 18%, transparent);
}

.fs-row-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.fs-grip {
  cursor: grab;
}

.fs-row.fs-dragging,
.fs-chip.fs-dragging {
  opacity: 0.45;
  cursor: grabbing;
}

.fs-droplist {
  min-height: 2rem;
  border-radius: 0.5rem;
}

.fs-droplist-over {
  outline: 2px dashed color-mix(in srgb, var(--brand) 45%, transparent);
  outline-offset: 3px;
}

/* Declarative twin of field-studio.js's init()-time pointerEvents fixup —
   this rule also covers a placeholder "Empty — drag a field here" row that
   arrives later, e.g. in the canvas HTML an instant Add-a-field save swaps
   into #fsCanvasRoot without re-running init(). */
.fs-droplist > li:not([data-fs-key]) {
  pointer-events: none;
}

/* The click-to-open hint on a field row (popup redesign): understated until
   the row is actually hovered, so it doesn't compete with the chips. */
.fs-row-chevron {
  margin-left: 0.35rem;
  font-size: 0.75rem;
  opacity: 0.35;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.fs-row:hover .fs-row-chevron {
  opacity: 0.85;
  transform: translateX(2px);
}

.fs-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  background: var(--bs-body-bg);
  font-size: 0.85rem;
  cursor: grab;
}

.fs-chip:hover {
  border-color: color-mix(in srgb, var(--brand) 40%, var(--bs-border-color));
}

/* The builder is dense; at phone width the three panes stack and the row
   metadata would overflow, so drop to label + lock only. */
@media (max-width: 575.98px) {
  .fs-row {
    grid-template-columns: auto 1fr auto;
  }

  .fs-row-meta {
    display: none;
  }
}

/* A schema-driven table (Bookings, Follow-Ups) carries however many columns
   the company configured,
   so headings stay on one line. That gives each column a real minimum width
   and lets .table-responsive scroll the table sideways, instead of every cell
   wrapping to three lines the moment a fourth column is added. */
.schema-table th {
  white-space: nowrap;
}

.schema-table td {
  min-width: 4.5rem;
}

/* With enough configured columns the table scrolls sideways, which would
   otherwise carry the row actions off the right-hand edge. Pin the last
   column so ⋮ stays reachable at any column count. */
.schema-table th:last-child,
.schema-table td:last-child {
  position: sticky;
  right: 0;
  z-index: 2;
  background: var(--bs-card-bg, var(--bs-body-bg));
  box-shadow: -0.5rem 0 0.5rem -0.5rem rgba(15, 23, 42, 0.18);
}

.schema-table thead th:last-child {
  z-index: 3;
}

.schema-table tbody tr:hover td:last-child {
  background: var(--bs-tertiary-bg, var(--bs-card-bg));
}

/* The Log-follow-up form lives inside a dropdown, which is narrow by
   default; give it room and stop a click inside it closing the menu. */
.fs-log-attempt {
  min-width: 15rem;
}

.fs-attempts .badge {
  min-width: 1.5rem;
  cursor: help;
}

/* ==========================================================================
   YouTube Ads (Ads & All Campaigns): templates/ads/youtube_overview.html
   and static/js/youtube-ads.js. Everything here is a .yt-* class or a --yt-*
   token; the charts read the colour tokens through getComputedStyle.
   ========================================================================== */

:root {
  /* The brand tile and "New Campaign" button carry white text, so they keep
     one fixed red in both themes. */
  --yt-brand: #e62117;
  --yt-brand-hover: #c81b12;
  --yt-brand-active: #ae170f;

  /* Series and KPI tint colours. Hex on purpose: youtube-ads.js turns them
     into rgba() for the area fills. */
  --yt-red: #e62117;
  --yt-blue: #3b82f6;
  --yt-green: #16a34a;
  --yt-amber: #d97706;
  --yt-indigo: #6366f1;
  --yt-teal: #0d9488;

  /* Delta text is small, so it gets darker shades than the chart lines to
     stay readable on a white card. */
  --yt-good-text: #15803d;
  --yt-bad-text: #c81e1e;
}

[data-bs-theme="dark"] {
  --yt-red: #ff5a52;
  --yt-blue: #60a5fa;
  --yt-green: #4ade80;
  --yt-amber: #fbbf24;
  --yt-indigo: #a5b4fc;
  --yt-teal: #2dd4bf;
  --yt-good-text: #4ade80;
  --yt-bad-text: #ff7b72;
}

/* ---------- Header ---------- */

.yt-brand-tile {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.4rem;
  color: #fff;
  background: var(--yt-brand);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--yt-brand) 30%, transparent);
}

.yt-brand-tile-lg {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 0.9rem;
  font-size: 1.8rem;
}

.btn-yt {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--yt-brand);
  --bs-btn-border-color: var(--yt-brand);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--yt-brand-hover);
  --bs-btn-hover-border-color: var(--yt-brand-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--yt-brand-active);
  --bs-btn-active-border-color: var(--yt-brand-active);
  --bs-btn-focus-shadow-rgb: 230, 33, 23;
}

.yt-account-select {
  width: auto;
  max-width: 16rem;
  border-radius: 999px;
  font-size: 0.78rem;
}

.yt-range-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: 100%;
  padding-left: 0.75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  background: var(--bs-body-bg);
  font-size: 0.78rem;
}

.yt-range-pill:focus-within {
  border-color: var(--bs-primary-border-subtle);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15);
}

.yt-range-pill > .bi {
  color: var(--bs-secondary-color);
}

.yt-range-span {
  font-weight: 600;
  white-space: nowrap;
}

.yt-range-select {
  width: auto;
  border: 0;
  border-left: 1px solid var(--bs-border-color);
  border-radius: 0 999px 999px 0;
  background-color: transparent;
  font-size: 0.78rem;
}

.yt-range-select:focus {
  box-shadow: none;
}

/* A class rather than .d-flex: Bootstrap's !important display utilities
   beat the [hidden] attribute youtube-ads.js toggles. */
.yt-custom-dates {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.yt-date-input {
  width: 9.5rem;
  font-size: 0.78rem;
}

.yt-meta-sep {
  opacity: 0.5;
}

.yt-empty-copy {
  max-width: 34rem;
}

.yt-card-title {
  font-size: 0.9rem;
  font-weight: 700;
}

/* ---------- KPI cards ---------- */

.yt-tint-red { --yt-tint: var(--yt-red); }
.yt-tint-blue { --yt-tint: var(--yt-blue); }
.yt-tint-green { --yt-tint: var(--yt-green); }
.yt-tint-amber { --yt-tint: var(--yt-amber); }
.yt-tint-indigo { --yt-tint: var(--yt-indigo); }
.yt-tint-teal { --yt-tint: var(--yt-teal); }

.stat-card.yt-kpi .card-body {
  padding: 0.8rem 0.85rem;
}

/* Icon on the left beside the label and value; the delta line runs the full
   card width underneath so "vs last month" has room. */
.yt-kpi-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.65rem;
  align-items: center;
}

.yt-kpi-icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: var(--yt-tint, var(--brand));
  background: color-mix(in srgb, var(--yt-tint, var(--brand)) 14%, transparent);
}

[data-bs-theme="dark"] .yt-kpi-icon {
  background: color-mix(in srgb, var(--yt-tint, var(--brand)) 20%, transparent);
}

.yt-kpi-label,
.yt-kpi-value {
  grid-column: 2;
  min-width: 0;
}

.yt-kpi-label {
  align-self: end;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--bs-secondary-color);
}

/* No overflow-wrap: anywhere here: it split "Rs 779,008.14" mid-number.
   Big money arrives already shortened ("Rs 779K"), so values fit. */
.yt-kpi-value {
  align-self: start;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  overflow-wrap: normal;
}

.yt-kpi-delta {
  grid-column: 1 / -1;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 0.45rem;
}

.yt-kpi-delta .bi {
  font-size: 0.9rem;
  vertical-align: -0.15em;
  margin-right: -0.1rem;
}

.yt-kpi-compare {
  font-weight: 400;
  color: var(--bs-secondary-color);
}

.yt-delta-good { color: var(--yt-good-text); }
.yt-delta-bad { color: var(--yt-bad-text); }
.yt-delta-flat { color: var(--bs-secondary-color); }

/* Wherever a card is too narrow for the icon beside the value, the icon
   moves up beside the label and the value gets the whole card width: two
   cards a row on phones, four from md until the sidebar has room (a 90px
   value box at 992px), and all eight from xxl until the screen is very wide.
   Measured so "Rs 99,999.99", the longest money before the short form, and
   mostly "CHF 99,999.99" too, stay on one line. */
@media (max-width: 575.98px), (min-width: 768px) and (max-width: 1199.98px), (min-width: 1400px) and (max-width: 2099.98px) {
  .yt-kpi-grid {
    column-gap: 0.45rem;
  }

  .yt-kpi-icon {
    grid-row: 1;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 0.45rem;
    font-size: 0.8rem;
  }

  .yt-kpi-label {
    align-self: center;
  }

  .yt-kpi-value {
    grid-column: 1 / -1;
    margin-top: 0.3rem;
    font-size: 1.05rem;
  }
}

/* The narrowest of those: phones, and eight a row just past xxl. */
@media (max-width: 575.98px), (min-width: 1400px) and (max-width: 1599.98px) {
  .yt-kpi-value {
    font-size: 0.98rem;
  }
}

/* ---------- Charts ---------- */

.yt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.8rem;
  font-size: 0.7rem;
  color: var(--bs-secondary-color);
}

.yt-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  margin-right: 0.3rem;
  vertical-align: 0.05em;
}

.yt-dot-red { background: var(--yt-red); }
.yt-dot-blue { background: var(--yt-blue); }
.yt-dot-green { background: var(--yt-green); }

.yt-granularity {
  width: auto;
  flex-shrink: 0;
  padding: 0.15rem 1.7rem 0.15rem 0.55rem;
  background-position: right 0.45rem center;
  font-size: 0.72rem;
}

.yt-chart-box {
  position: relative;
  height: 230px;
}

.yt-chart-empty {
  height: 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 1rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
  border: 1px dashed var(--bs-border-color);
  border-radius: 0.6rem;
}

.yt-chart-empty .bi {
  font-size: 1.4rem;
  opacity: 0.6;
}

/* ---------- Campaigns table ---------- */

.yt-campaign-table {
  font-size: 0.8rem;
}

.yt-campaign-table th {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
  white-space: nowrap;
}

.yt-campaign-table td {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.yt-campaign-table td.yt-campaign-name {
  min-width: 13rem;
  font-weight: 600;
  white-space: normal;
}

.yt-campaign-tile {
  width: 1.7rem;
  height: 1.15rem;
  border-radius: 0.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--yt-red);
  background: color-mix(in srgb, var(--yt-red) 14%, transparent);
}

/* ---------- Campaigns and Budget row ---------- */

/* Eleven columns need the full content width until the screen is very
   wide: at 1280-1536px two thirds of it cut off Status and Cost / Conv. So
   the Budget card sits under the table and only moves beside it here. At
   1680px an LKR account's Last 90 days still overflowed by a few pixels;
   1800px leaves about 45px to spare. */
@media (min-width: 1800px) {
  .yt-campaigns-col {
    width: 66.66666667%;
  }

  .yt-budget-col {
    width: 33.33333333%;
  }
}

/* ---------- Budget & Billing ---------- */

/* While the card spans the page, the spend summary and the budget rows sit
   side by side instead of one long, mostly empty column. */
@media (min-width: 768px) and (max-width: 1799.98px) {
  .yt-budget-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 2.5rem;
  }

  .yt-budget-summary > :last-child {
    margin-bottom: 0 !important;
  }
}

.yt-budget-headline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.4rem;
}

.yt-budget-spend {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.yt-budget-of {
  font-size: 1rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
}

.yt-budget-bar {
  height: 0.55rem;
  border-radius: 999px;
  overflow: hidden;
  background: var(--bs-secondary-bg);
}

.yt-budget-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--yt-green);
}

.yt-budget-bar-fill.is-over {
  background: var(--yt-red);
}

.yt-budget-rows li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--bs-border-color-translucent);
  font-size: 0.8rem;
}

.yt-budget-rows li span:first-child {
  color: var(--bs-secondary-color);
}

.yt-budget-rows li span:last-child {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Add / Edit ad account popup: the manager account ID sits behind a disclosure. */
.yt-form-advanced > summary {
  cursor: pointer;
  width: fit-content;
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
}

/* ---------- End YouTube Ads ---------- */