/* DASHBOARD LAYOUT */

.ts-dashboard {
  /* Single outer padding for the whole dashboard surface */
  padding: 24px;
  background: radial-gradient(circle at top left, #111827 0%, #020617 55%, #020617 100%);
  min-height: calc(100vh - 72px); /* adjust for header height */

  /* Dashboard widget sizing (desktop stable grid, mobile flexible) */
  --ts-widget-height-desktop: 400px;
  --ts-widget-max-height-mobile: 560px;
}

/* ============================= */
/* DASHBOARD WIDGET: HEIGHT+SCROLL */
/* ============================= */

.ts-dashboard .ts-widget {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden; /* keep scroll regions clipped to rounded corners */
}

/* When inside gridstack, let gridstack control height */
.grid-stack .ts-widget {
  height: 100%;
}

@media (min-width: 1024px) {
  .ts-dashboard .ts-widget:not(.grid-stack .ts-widget) {
    height: var(--ts-widget-height-desktop);
  }
}

@media (max-width: 1023px) {
  .ts-dashboard .ts-widget {
    height: auto;
    max-height: var(--ts-widget-max-height-mobile);
  }
}

.ts-dashboard .ts-widget__header,
.ts-dashboard .ts-widget__footer {
  flex: 0 0 auto;
  min-width: 0;
}

.ts-dashboard .ts-widget__body {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overflow-x: auto;

  /* Subtle scrollbar (dark + unobtrusive) */
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.25) transparent;
}

.ts-dashboard .ts-widget__body::-webkit-scrollbar {
  width: 10px;
}

.ts-dashboard .ts-widget__body::-webkit-scrollbar-track {
  background: transparent;
}

.ts-dashboard .ts-widget__body::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}

.ts-dashboard .ts-widget__body::-webkit-scrollbar-thumb:hover {
  background-color: rgba(148, 163, 184, 0.28);
}

/* Team detail: inline role editor */
.ts-member-role-form {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Ensure role <select> text is visible on macOS (native select text can render dark-on-dark) */
.ts-member-role-form select.ts-input.ts-input-xs {
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  color: #f9fafb !important;
  opacity: 1 !important;
  background: rgba(0, 0, 0, 0.3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 16px 16px !important;
  padding: 0 30px 0 10px !important;
  line-height: 26px !important;
  font-size: 12px !important;
  height: 26px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.ts-member-role-form select.ts-input.ts-input-xs option {
  background: #1e293b;
  color: #f9fafb;
}

/* Dashboard pills (status badges) */
.ts-dashboard .ts-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  font-weight: 600;
  white-space: nowrap;
  padding: 2px 10px;
  font-size: 11px;
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.ts-dashboard .ts-pill-muted {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
}

.ts-dashboard .ts-pill-warn {
  background: rgba(255, 122, 50, 0.14);
  border-color: rgba(255, 122, 50, 0.35);
  color: rgba(255, 199, 159, 0.95);
}

/* ============================= */
/* DASH HEADER + TEAM MODULE     */
/* ============================= */

.ts-dash-header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}

/* we don't want left/right containers to fight layout */
.ts-dash-header-left,
.ts-dash-header-right {
  display: contents;
}

/* if you ever show the logo inside the mock */
.ts-dash-logo {
  height: 24px;
  flex-shrink: 0;
}

/* TEAM: avatar + text */
.ts-dash-team-module {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Circular 22 avatar */
.ts-dash-team-avatar {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: linear-gradient(135deg, #3b82f6, #ff7a32);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  color: #f9fafb;
  box-shadow: 0 0 0 1px #020617, 0 6px 14px rgba(0, 0, 0, 0.55);
}

/* Team text */
.ts-dash-team-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}

.ts-dash-team-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(148, 163, 184, 0.9);
}

.ts-dash-team-name {
  font-size: 20px;
  font-weight: 600;
  color: #f9fafb;
}

.ts-dash-team-series {
  font-size: 14px;
  color: #a5b4fc;
}

/* second row under the team info: Season + user */
.ts-dash-header-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: 62px; /* visually lines up under team name */
}

/* Season pill */
.ts-dash-season {
  padding: 6px 14px;
  border-radius: 999px;
  background: #1a1d25;
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-size: 14px;
}

/* ============================= */
/* CAR SELECTOR DROPDOWN         */
/* ============================= */

.ts-dash-car {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #1a1d25;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 14px;
  transition: all 0.15s ease;
}

.ts-dash-car:hover {
  border-color: rgba(255, 122, 50, 0.4);
  background: rgba(26, 29, 37, 0.95);
}

.ts-car-icon {
  opacity: 0.7;
  flex-shrink: 0;
}

.ts-car-label {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ts-car-arrow {
  font-size: 11px;
  color: rgba(209, 213, 219, 0.7);
  margin-left: 2px;
}

.ts-car-loading {
  display: none;
  align-items: center;
  gap: 4px;
  margin-left: 2px;
}

.ts-dash-car.is-loading {
  pointer-events: none;
  color: rgba(226, 232, 240, 0.7);
}

.ts-dash-car.is-loading .ts-car-arrow {
  display: none;
}

.ts-dash-car.is-loading .ts-car-loading {
  display: inline-flex;
}

/* Car dropdown menu */
.ts-dropdown-menu-car {
  min-width: 220px;
}

.ts-dropdown-header {
  padding: 8px 16px 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(148, 163, 184, 0.7);
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
  margin-bottom: 4px;
}

.ts-car-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ts-car-number {
  font-weight: 600;
  color: #ff7a32;
  min-width: 36px;
}

.ts-car-name {
  color: rgba(209, 213, 219, 0.9);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ts-car-default-badge {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #86efac;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: auto;
}

.ts-dropdown-item.ts-car-item.active .ts-car-number {
  color: #ff9f5a;
}

.ts-dropdown-item.ts-car-item.active {
  background: rgba(255, 122, 50, 0.08);
}

.ts-dropdown-empty {
  padding: 16px;
  text-align: center;
  color: rgba(148, 163, 184, 0.6);
  font-size: 13px;
}

.ts-dropdown-action {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(148, 163, 184, 0.9);
}

.ts-dropdown-action svg {
  opacity: 0.7;
}

.ts-dropdown-action:hover {
  color: #ff7a32;
}

.ts-dropdown-action:hover svg {
  opacity: 1;
  stroke: #ff7a32;
}

/* User (Crew Chief + DR avatar) */
.ts-dash-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ts-dash-user-name {
  color: rgba(249, 250, 251, 0.9);
  font-size: 14px;
}

.ts-dash-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #3b82f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #f9fafb;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

/* main grid */

.ts-dash-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ts-dash-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.ts-dash-row-top {
  grid-template-columns: repeat(2, 1fr);
}

.ts-dash-row-mid {
  grid-template-columns: repeat(2, 1fr);
}

/* Row 2: keep Monthly Utilization and Active Setup visually aligned */
.ts-dash-row-mid > .ts-card {
  min-height: 260px;
  display: flex;
  flex-direction: column;
}

.ts-dash-row-mid #ts-budget-content {
  flex: 1;
}

/* Widget span utilities */
.ts-widget-span-1 {
  grid-column: span 1;
}

.ts-widget-span-2 {
  grid-column: span 2;
}

/* Dashboard rule: first four widgets should be equal width.
   Top row: Recent Events + Upcoming Events (2-up)
   Middle row: Monthly Utilization + Active Setup (2-up)
*/
.ts-dash-row-top .ts-widget-span-2,
.ts-dash-row-mid .ts-widget-span-2 {
  grid-column: span 1;
}

/* Bottom row with mixed spans: Budget(1) + On Car Parts(2) on first logical row, Sponsors(1) below or beside */
.ts-dash-row-bottom {
  grid-template-columns: repeat(3, 1fr);
}

/* ============ */
/* CARDS        */
/* ============ */

.ts-dashboard .ts-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin: 0;

  background: rgba(15, 23, 42, 0.9);
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  padding: 20px 22px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.7);
}

.ts-dashboard .ts-card-lg {
  padding: 20px 22px;
}

.ts-card-chart {
  position: relative;
}

.ts-dashboard .ts-card__header,
.ts-dashboard .ts-card-header,
.ts-dashboard .ts-widget__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
  min-width: 0;
  flex-wrap: wrap;
  padding-bottom: 12px;
  margin: 0;
}

.ts-dashboard .ts-card__title,
.ts-dashboard .ts-card__header h1,
.ts-dashboard .ts-card__header h2,
.ts-dashboard .ts-card__header h3,
.ts-dashboard .ts-card-header h1,
.ts-dashboard .ts-card-header h2,
.ts-dashboard .ts-card-header h3 {
  font-size: 15px;
  font-weight: 600;
  color: rgba(249, 250, 251, 0.95);
  margin: 0;
  line-height: 1.25;
}

.ts-dashboard .ts-card__content {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

.ts-card-subtitle {
  font-size: 13px;
  color: rgba(148, 163, 184, 0.9);
  margin-bottom: 14px;
}

/* ===================== */
/* TAGS & STATUS CHIPS   */
/* ===================== */

.ts-tag {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  color: rgba(209, 213, 219, 0.9);
}

.ts-tag-orange {
  background: rgba(255, 122, 50, 0.12);
  border-color: rgba(255, 122, 50, 0.75);
  color: #fed7aa;
}

.ts-tag-green {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.7);
  color: #bbf7d0;
}

.ts-tag-yellow {
  background: rgba(234, 179, 8, 0.12);
  border-color: rgba(234, 179, 8, 0.75);
  color: #fef08a;
}

.ts-tag-red {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.8);
  color: #fecaca;
}

/* ============ */
/* METRICS      */
/* ============ */

.ts-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.ts-metric-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ts-metric {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ts-metric-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(148, 163, 184, 0.9);
}

.ts-metric-value {
  font-size: 18px;
  font-weight: 600;
  color: #f9fafb;
}

.ts-metric-delta {
  font-size: 12px;
  color: rgba(148, 163, 184, 0.9);
}

.ts-metric-good {
  color: #4ade80;
}

.ts-metric-warn {
  color: #f97316;
}

/* ===================== */
/* CHART PLACEHOLDER     */
/* ===================== */

.ts-card-legend {
  margin-left: auto;
  font-size: 11px;
  color: rgba(148, 163, 184, 0.9);
  display: flex;
  align-items: center;
  gap: 8px;
}

.ts-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  display: inline-block;
}

.ts-dot-white {
  background: #f9fafb;
}

.ts-dot-blue {
  background: #3b82f6;
}

.ts-chart-placeholder {
  margin-top: 12px;
  position: relative;
  height: 150px;
  border-radius: 10px;
  background: radial-gradient(circle at top left, #020617, #020617 55%, #020617 100%);
  overflow: hidden;
}

.ts-chart-line {
  position: absolute;
  width: 100%;
  height: 1px;
  top: 50%;
  left: 0;
  opacity: 0.7;
}

.ts-chart-line-white {
  border-bottom: 2px solid rgba(249, 250, 251, 0.7);
  transform: translateY(-10px);
}

.ts-chart-line-blue {
  border-bottom: 2px solid rgba(59, 130, 246, 0.8);
  transform: translateY(14px);
}

.ts-chart-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #ff7a32;
  box-shadow: 0 0 0 4px rgba(255, 122, 50, 0.28);
}

.ts-chart-dot-1 {
  left: 20%;
  top: 40%;
}

.ts-chart-dot-2 {
  left: 47%;
  top: 55%;
}

.ts-chart-dot-3 {
  left: 78%;
  top: 42%;
}

.ts-chart-caption {
  position: absolute;
  bottom: 6px;
  left: 10px;
  font-size: 11px;
  color: rgba(148, 163, 184, 0.9);
}

/* ============ */
/* SETUP GRID   */
/* ============ */

.ts-setup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  margin-bottom: 10px;
}

.ts-setup-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(209, 213, 219, 0.9);
}

.ts-setup-row strong {
  font-weight: 600;
  color: #e5e7eb;
}

/* ======================= */
/* ACTIVE SETUP QUICK VIEW */
/* ======================= */

.ts-active-setup-rows {
  display: grid;
  grid-template-columns: 1fr;
  margin-bottom: 10px;
}

.ts-active-setup-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 30px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(15, 23, 42, 1);
}

.ts-active-setup-row:last-child {
  border-bottom: 0;
}

.ts-active-setup-label {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
  font-size: 12px;
  color: rgba(148, 163, 184, 0.9);
}

.ts-active-setup-label-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ts-active-setup-default-dot {
  margin-left: auto;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.55);
}

.ts-active-setup-value {
  font-size: 13px;
  font-weight: 600;
  color: #e5e7eb;
  text-align: right;
  white-space: nowrap;
}

/* ======================= */
/* RECENT EVENTS (UNIFIED) */
/* ======================= */

.ts-recent-events-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.ts-recent-event-row {
  display: grid;
  grid-template-columns: minmax(150px, 2fr) 110px 80px 100px minmax(140px, 1.5fr) 110px;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(15, 23, 42, 1);
  text-decoration: none;
}

.ts-recent-event-row > * {
  min-width: 0;
}

.ts-recent-event-row--header {
  padding-top: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.ts-recent-event-row--header .ts-recent-event-cell {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: rgba(148, 163, 184, 0.7);
}

.ts-recent-event-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.ts-recent-event-row:hover {
  background: rgba(148, 163, 184, 0.06);
}

.ts-recent-event-cell {
  font-size: 13px;
  color: rgba(148, 163, 184, 0.9);
  white-space: nowrap;
  line-height: 1.4;
}

.ts-recent-event-name {
  color: #e5e7eb;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ts-recent-event-car {
  color: rgba(226, 232, 240, 0.85);
  font-weight: 600;
}

.ts-recent-event-finish {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ts-recent-event-status {
  display: flex;
  justify-content: flex-end;
}

.ts-link-muted {
  font-size: 12px;
  color: rgba(148, 163, 184, 0.9);
  text-decoration: none;
}

/* ======= */
/* TABLE   */
/* ======= */

.ts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ts-table th,
.ts-table td {
  padding: 6px 4px;
}

.ts-table thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(148, 163, 184, 0.9);
  border-bottom: 1px solid rgba(31, 41, 55, 1);
}

.ts-table tbody td {
  color: rgba(209, 213, 219, 0.9);
  border-bottom: 1px solid rgba(15, 23, 42, 1);
}

.ts-table-right {
  text-align: right;
}

.ts-table-center {
  text-align: center;
}

.ts-table-empty {
  text-align: center;
  padding: 24px 16px !important;
  color: rgba(148, 163, 184, 0.7);
}

.ts-table-empty p {
  margin: 0 0 8px;
  font-size: 13px;
}

.ts-table-empty .ts-link-muted {
  font-size: 12px;
}

/* =============== */
/* BUDGET BAR      */
/* =============== */

.ts-budget-bar {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 1);
  overflow: hidden;
  margin-bottom: 8px;
}

.ts-budget-spent {
  width: 78%;
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #ff7a32);
}

.ts-budget-spent-zero {
  width: 0;
}

.ts-budget-marker {
  position: absolute;
  right: 0;
  top: -3px;
  width: 2px;
  height: 16px;
  background: rgba(249, 250, 251, 0.7);
}

.ts-budget-text,
.ts-budget-breakdown {
  font-size: 12px;
  color: rgba(148, 163, 184, 0.95);
}

.ts-budget-text-muted {
  color: rgba(148, 163, 184, 0.6);
}

/* Budget empty states */
.ts-budget-empty-state {
  text-align: center;
  padding: 6px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

#ts-budget-widget #ts-budget-no-active {
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

/* Compact empty state for tighter budget widget */
.ts-budget-empty-compact {
  padding: 0;
}

.ts-budget-empty-compact .ts-budget-empty-title {
  margin-bottom: 0;
}

.ts-budget-empty-title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(249, 250, 251, 0.9);
  margin: 0 0 4px;
}

.ts-budget-empty-state .ts-btn {
  align-self: center;
  width: auto;
  padding-left: 16px;
  padding-right: 16px;
}

.ts-budget-empty-subtitle {
  font-size: 12px;
  color: rgba(148, 163, 184, 0.7);
  margin: 0 0 12px;
}

/* Compact budget widget header */
.ts-dashboard .ts-card-header-compact {
  padding-bottom: 12px;
}

.ts-dashboard .ts-card-header-compact h2 {
  font-size: 15px;
}

/* Compact budget content */
.ts-budget-content-compact {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Monthly Utilization: center body content, keep header pinned via ts-widget layout */
#ts-budget-widget .ts-budget-content-compact {
  align-items: stretch;
}

/* Monthly Utilization: period label in header */
.ts-budget-period {
  font-size: 11px;
  font-weight: 400;
  color: rgba(148, 163, 184, 0.7);
  margin-left: 8px;
}

#ts-budget-widget .ts-budget-content-compact > * {
  width: 100%;
  max-width: none;
}

/* Monthly Utilization: internal layout should fill the widget height.
   Keep global .ts-widget__body behavior intact; override only this widget body to
   use internal scroll regions (transactions + legend). */
#ts-budget-widget #ts-budget-content.ts-widget__body {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* Allow the widget body to scroll if content grows; prevents chart clipping */
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0;
}

#ts-budget-widget #ts-budget-loading,
#ts-budget-widget #ts-budget-no-active,
#ts-budget-widget #ts-budget-active {
  min-height: 0;
}

#ts-budget-widget #ts-budget-active {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Make transactions use remaining height and scroll internally */
#ts-budget-widget #ts-budget-transactions {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-right: 6px;

  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.25) transparent;
}

#ts-budget-widget #ts-budget-transactions::-webkit-scrollbar {
  width: 10px;
}

#ts-budget-widget #ts-budget-transactions::-webkit-scrollbar-track {
  background: transparent;
}

#ts-budget-widget #ts-budget-transactions::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}

#ts-budget-widget #ts-budget-transactions::-webkit-scrollbar-thumb:hover {
  background-color: rgba(148, 163, 184, 0.28);
}

/* Keep loading/empty/active states aligned (avoid layout jumps) */
#ts-budget-loading,
#ts-budget-no-active,
#ts-budget-active {
  width: 100%;
}

/* Compact summary line */
.ts-budget-summary-line {
  margin: 0;
  line-height: 1.25;
}

/* Compact breakdown line */
.ts-budget-breakdown-compact {
  margin: 0;
  font-size: 11px;
  line-height: 1.25;
}

/* Budget Transactions List */
.ts-budget-transactions {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 11px;
  border-top: 1px solid rgba(148, 163, 184, 0.1);
  padding-top: 8px;
}

.ts-budget-txn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  color: rgba(148, 163, 184, 0.9);
}

.ts-budget-txn-empty {
  color: rgba(148, 163, 184, 0.5);
  font-style: italic;
  padding: 4px 0;
}

.ts-budget-txn-desc {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ts-budget-txn-amount {
  font-weight: 500;
  color: rgba(249, 250, 251, 0.8);
}

/* Status dots for transactions */
.ts-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ts-status-ok { background: #22c55e; }
.ts-status-warn { background: #f97316; }
.ts-status-muted { background: rgba(148, 163, 184, 0.4); }

/* Budget Quick Add Form */
.ts-budget-quick-add {
  margin-top: 0;
  padding-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.ts-budget-quick-add-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px 170px auto;
  gap: 10px;
  align-items: end;
}

.ts-budget-quick-field {
  min-width: 0;
}

.ts-budget-quick-label {
  display: block;
  margin: 0 0 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(148, 163, 184, 0.8);
}

.ts-budget-quick-input {
  width: 100%;
  height: 32px;
  font-size: 13px;
  border-radius: 8px;
}

.ts-budget-quick-amount {
  text-align: right;
}

.ts-budget-quick-submit {
  height: 32px;
  border-radius: 8px;
  padding: 0 14px;
  font-size: 12px;
}

@media (max-width: 520px) {
  .ts-budget-quick-add-form {
    grid-template-columns: 1fr;
  }
}

/* Dashboard widgets use fixed height on desktop; do not opt-out per widget. */
.dst-card.ts-widget .dst-events {
  flex: 1 1 auto;
  min-height: 0;
}

.dst-card.ts-widget .dst-events__body.ts-widget__body {
  flex: 1 1 auto;
  min-height: 0;
}

.ts-widget-empty-link {
  margin-top: 10px;
  display: inline-block;
}

/* ============================= */
/* MONTHLY UTILIZATION: CHART AREA */
/* ============================= */

/* Chart section must not clip its contents */
.ts-budget-category-section {
  margin-top: 0;
  padding-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.1);
  min-height: 240px;
  flex: 0 0 auto;
  overflow: visible;
}

.ts-budget-chart-area {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: flex-start;
  min-height: 240px;
}

/* Left: doughnut chart wrapper with explicit sizing */
.ts-budget-donut-wrap {
  width: 280px;
  height: 220px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

/* Chart.js should size to this container */
.ts-budget-donut-wrap .ts-budget-chart-wrap {
  width: 100%;
  height: 100%;
}

.ts-budget-chart-canvas {
  width: 100% !important;
  height: 100% !important;
}

/* Right: breakdown panel */
.ts-budget-chart-area .ts-budget-breakdown {
  flex: 1 1 260px;
  min-width: 260px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ts-budget-breakdown-header {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(148, 163, 184, 0.9);
}

.ts-budget-breakdown-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow: auto;
  padding-right: 6px;

  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.25) transparent;
}

.ts-budget-breakdown-list::-webkit-scrollbar {
  width: 10px;
}

.ts-budget-breakdown-list::-webkit-scrollbar-track {
  background: transparent;
}

.ts-budget-breakdown-list::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}

.ts-budget-breakdown-list::-webkit-scrollbar-thumb:hover {
  background-color: rgba(148, 163, 184, 0.28);
}

.ts-budget-breakdown-empty {
  font-size: 12px;
  color: rgba(148, 163, 184, 0.6);
}

.ts-budget-breakdown-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ts-budget-breakdown-row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.ts-budget-breakdown-name {
  font-size: 12px;
  font-weight: 600;
  color: rgba(249, 250, 251, 0.9);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ts-budget-breakdown-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  color: rgba(148, 163, 184, 0.95);
  font-size: 12px;
}

.ts-budget-breakdown-amount {
  font-family: 'Roboto Mono', monospace;
  font-size: 11px;
  color: rgba(249, 250, 251, 0.85);
}

.ts-budget-breakdown-pct {
  font-size: 11px;
  color: rgba(148, 163, 184, 0.85);
}

.ts-budget-breakdown-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 1);
  overflow: hidden;
}

.ts-budget-breakdown-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #3b82f6, #ff7a32);
}

/* Ultra-wide refinement: use a two-column main area so the widget fills space.
   Keep IDs stable for JS; only re-lay out existing children. */
@media (min-width: 1800px) {
  #ts-budget-widget #ts-budget-active {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: 18px;
    row-gap: 12px;
    align-content: start;
  }

  #ts-budget-widget #ts-budget-bar-container {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  #ts-budget-widget .ts-budget-summary-line {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  #ts-budget-widget #ts-budget-breakdown {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  #ts-budget-widget #ts-budget-quick-add {
    grid-column: 1 / -1;
    grid-row: 4;
  }

  #ts-budget-widget #ts-budget-transactions {
    grid-column: 1;
    grid-row: 5;
  }

  #ts-budget-widget #ts-budget-category-section {
    grid-column: 2;
    grid-row: 5;
    min-height: 0;
    overflow: visible;
  }

  #ts-budget-widget #ts-budget-chart-area,
  #ts-budget-widget .ts-budget-chart-area {
    height: 100%;
    min-height: 0;
  }
}

.ts-budget-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(148, 163, 184, 0.9);
}

.ts-budget-legend-color {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

.ts-budget-legend-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ts-budget-legend-amount {
  font-family: 'Roboto Mono', monospace;
  font-size: 10px;
  color: rgba(249, 250, 251, 0.8);
}

.ts-budget-category-empty {
  font-size: 11px;
  color: rgba(148, 163, 184, 0.5);
  font-style: italic;
  padding: 4px 0;
}

/* Extra small inputs for quick-add */
.ts-input-xs {
  height: 26px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: rgba(249, 250, 251, 0.95);
}

/* Budget widget quick-add uses a slightly larger control size for readability */
.ts-budget-quick-add .ts-budget-quick-input.ts-input-xs {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 8px;
}

.ts-input-xs:hover {
  border-color: rgba(148, 163, 184, 0.35);
}

.ts-input-xs:focus {
  outline: none;
  border-color: #ff7a32;
  background: rgba(255, 122, 50, 0.05);
}

.ts-input-xs::placeholder {
  color: rgba(148, 163, 184, 0.5);
}

/* Extra small button */
.ts-btn-xs {
  height: 26px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: linear-gradient(135deg, #ff7a32, #f97316);
  color: #fff;
  border: none;
}

.ts-budget-quick-add .ts-budget-quick-submit.ts-btn-xs {
  height: 32px;
  border-radius: 8px;
  padding: 0 14px;
  font-size: 12px;
}

.ts-btn-xs:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(255, 122, 50, 0.35);
}

.ts-btn-xs:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.ts-btn-cta {
  background: linear-gradient(135deg, #ff7a32, #f97316);
  color: #fff;
  border: none;
  box-shadow: 0 2px 8px rgba(255, 122, 50, 0.3);
}

.ts-btn-cta:hover {
  box-shadow: 0 4px 12px rgba(255, 122, 50, 0.4);
  transform: translateY(-1px);
}

/* Budget detail breakdown */
.ts-budget-detail {
  color: rgba(148, 163, 184, 0.8);
}

.ts-budget-detail-sep {
  margin: 0 6px;
  color: rgba(148, 163, 184, 0.4);
}

/* Budget widget clickable */
.ts-budget-active {
  cursor: pointer;
}

.ts-budget-active:hover .ts-budget-bar {
  opacity: 0.9;
}

/* Hidden utility */
.ts-hidden {
  display: none !important;
}

/* ================= */
/* SPONSOR LIST      */
/* ================= */

.ts-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: rgba(209, 213, 219, 0.9);
}

.ts-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin-right: 6px;
  display: inline-block;
}

.ts-status-ok {
  background: #22c55e;
}

.ts-status-warn {
  background: #f97316;
}

.ts-status-bad {
  background: #ef4444;
}

/* ================================ */
/* INTERACTIVE DASHBOARD STYLES    */
/* ================================ */

/* TOAST NOTIFICATIONS */
.ts-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none; /* Let underlying UI receive clicks; individual toasts stay clickable */
}

.ts-toast {
  padding: 12px 20px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  color: #f9fafb;
  font-size: 13px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: ts-toast-in 0.3s ease;
  max-width: 320px;
  pointer-events: auto; /* Restore interactivity for toast content */
}

.ts-toast-success { border-left: 3px solid #22c55e; }
.ts-toast-warning { border-left: 3px solid #f97316; }
.ts-toast-error { border-left: 3px solid #ef4444; }
.ts-toast-info { border-left: 3px solid #3b82f6; }

.ts-toast.ts-toast-out {
  animation: ts-toast-out 0.3s ease forwards;
}

@keyframes ts-toast-in {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes ts-toast-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(100%); }
}

/* DROPDOWNS */
.ts-dropdown {
  position: relative;
  display: inline-block;
}

.ts-dropdown-trigger {
  cursor: pointer;
  transition: color 0.15s ease;
}

.ts-dropdown-trigger:hover {
  color: #ffffff;
}

.ts-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 200px;
  background: rgba(15, 23, 42, 0.98);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  padding: 6px 0;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  z-index: 100;
}

.ts-dropdown.active .ts-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ts-dropdown-right {
  left: auto;
  right: 0;
}

.ts-dropdown-item {
  padding: 10px 16px;
  font-size: 13px;
  color: rgba(209, 213, 219, 0.9);
  cursor: pointer;
  transition: background 0.15s ease;
}

.ts-dropdown-item:hover {
  background: rgba(255, 122, 50, 0.1);
  color: #ffffff;
}

.ts-dropdown-item.active {
  color: #ff7a32;
}

.ts-dropdown-divider {
  height: 1px;
  background: rgba(148, 163, 184, 0.15);
  margin: 6px 0;
}

.ts-dash-team-name.ts-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ts-team-arrow {
  font-size: 12px;
  color: rgba(209, 213, 219, 0.8);
}

.ts-team-loading {
  display: none;
  align-items: center;
  gap: 4px;
  margin-left: 2px;
}

.ts-dropdown-trigger.is-loading {
  color: rgba(226, 232, 240, 0.9);
  pointer-events: none;
}

.ts-dropdown-trigger.is-loading .ts-team-arrow {
  display: none;
}

.ts-dropdown-trigger.is-loading .ts-team-loading {
  display: inline-flex;
}

.ts-loading-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #ff7a32;
  opacity: 0.85;
  animation: ts-loading-bounce 0.9s ease-in-out infinite;
}

.ts-loading-dot:nth-child(2) {
  animation-delay: 0.12s;
}

.ts-loading-dot:nth-child(3) {
  animation-delay: 0.24s;
}

@keyframes ts-loading-bounce {
  0% {
    transform: translateY(0);
    opacity: 0.75;
  }
  50% {
    transform: translateY(-3px);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 0.75;
  }
}

/* HEADER EXTRAS */
.ts-dash-import {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ts-import-status {
  font-size: 12px;
  color: rgba(148, 163, 184, 0.7);
}

.ts-btn-small {
  padding: 6px 14px;
  font-size: 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ts-btn-outline {
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.3);
  color: #f9fafb;
}

.ts-btn-outline:hover {
  border-color: #ff7a32;
  background: rgba(255, 122, 50, 0.1);
}

.ts-dash-notifications {
  position: relative;
  cursor: pointer;
}

.ts-notification-bell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(249, 250, 251, 0.8);
  transition: all 0.15s ease;
}

.ts-notification-bell:hover {
  background: rgba(255, 122, 50, 0.15);
  color: #ff7a32;
}

.ts-notification-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #ef4444;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* CARD INTERACTIONS */
.ts-card-interactive {
  /* Hover lift effect disabled - was causing top border to be cut off in grid layout */
  transition: box-shadow 0.2s ease;
}

.ts-card-interactive:hover {
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.4);
}

.ts-clickable {
  cursor: pointer;
  transition: color 0.15s ease;
}

.ts-clickable:hover {
  color: #ff7a32;
}

/* METRIC INTERACTIONS */
.ts-metric-clickable {
  padding: 8px;
  margin: -8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.ts-metric-clickable:hover {
  background: rgba(255, 122, 50, 0.08);
}

.ts-metric-pulse {
  animation: ts-pulse 2s ease-in-out infinite;
}

@keyframes ts-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* TAG INTERACTIONS */
.ts-tag-clickable {
  cursor: pointer;
  transition: all 0.15s ease;
}

.ts-tag-clickable:hover {
  transform: scale(1.05);
  border-color: rgba(255, 122, 50, 0.8);
}

.ts-tag-action {
  cursor: pointer;
}

.ts-tag-action:hover {
  filter: brightness(1.2);
}

/* CHART INTERACTIONS */
.ts-chart-placeholder {
  cursor: crosshair;
}

.ts-chart-dot {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ts-chart-dot:hover {
  transform: scale(1.5);
  box-shadow: 0 0 0 6px rgba(255, 122, 50, 0.4);
}

.ts-chart-tooltip {
  position: absolute;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(255, 122, 50, 0.5);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: #f9fafb;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 10;
  white-space: nowrap;
}

.ts-chart-tooltip.active {
  opacity: 1;
}

.ts-chart-crosshair {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background: rgba(255, 122, 50, 0.3);
  pointer-events: none;
  opacity: 0;
}

.ts-legend-item {
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.15s ease;
}

.ts-legend-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.ts-legend-item.disabled .ts-dot {
  opacity: 0.3;
}

/* SETUP EDITING */
.ts-setup-editable {
  position: relative;
  padding: 6px 8px;
  margin: -6px -8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.ts-setup-editable:hover {
  background: rgba(255, 122, 50, 0.08);
}

.ts-edit-icon {
  position: absolute;
  right: 8px;
  opacity: 0;
  font-size: 12px;
  color: rgba(148, 163, 184, 0.8);
  transition: opacity 0.15s ease;
}

.ts-setup-editable:hover .ts-edit-icon {
  opacity: 1;
}

.ts-link-animated {
  display: inline-flex;
  align-items: center;
  transition: color 0.15s ease;
}

.ts-link-animated:hover {
  color: #ff7a32;
}

/* TABLE INTERACTIONS */
.ts-table-interactive .ts-sortable {
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease;
}

.ts-table-interactive .ts-sortable:hover {
  color: #ff7a32;
}

.ts-sort-icon {
  font-size: 10px;
  margin-left: 4px;
  opacity: 0.5;
}

.ts-sortable.sorted-asc .ts-sort-icon::after { content: '↑'; }
.ts-sortable.sorted-desc .ts-sort-icon::after { content: '↓'; }

.ts-table-row-clickable {
  cursor: pointer;
  transition: background 0.15s ease;
}

.ts-table-row-clickable:hover {
  background: rgba(255, 122, 50, 0.06);
}

.ts-table-row-clickable.expanded {
  background: rgba(255, 122, 50, 0.1);
}

/* Critical Components table layout */
.ts-critical-components-table {
  table-layout: fixed;
}

.ts-critical-components-table tbody td {
  vertical-align: middle;
}

.ts-part-cell {
  min-width: 0;
}

.ts-part-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
  max-height: calc(1.25em * 2);
  min-height: calc(1.25em * 2);
}

.ts-life-bar {
  width: 60px;
  height: 4px;
  background: rgba(15, 23, 42, 0.8);
  border-radius: 2px;
  margin-top: 4px;
  overflow: hidden;
}

.ts-life-used-cell {
  width: 220px;
}

.ts-life-used {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.ts-life-bars {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-end;
}

.ts-life-bar-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.ts-life-dim {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
  width: 44px;
  text-align: right;
  flex: 0 0 auto;
}

.ts-life-bar.ts-life-bar-compact {
  width: 90px;
  margin-top: 0;
}

.ts-life-bar-row .ts-life-bar {
  margin-top: 0;
}

.ts-life-bar-shell {
  position: relative;
  width: 90px;
  height: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ts-life-bar-shell.ts-life-bar-compact {
  width: 90px;
}

.ts-life-bar-shell .ts-life-bar-empty {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.ts-life-dash {
  font-size: 11px;
  opacity: 0.65;
  line-height: 1;
}

.ts-status-cell {
  width: 120px;
  white-space: nowrap;
}

.ts-components-footer {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 10px;
}

.ts-life-fill {
  height: 100%;
  background: linear-gradient(90deg, #f97316, #ef4444);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.ts-life-fill.ts-life-ok {
  background: linear-gradient(90deg, #22c55e, #16a34a);
}

.ts-life-fill.ts-life-warn {
  background: linear-gradient(90deg, #f97316, #ea580c);
}

.ts-life-fill.ts-life-inspect {
  background: linear-gradient(90deg, #eab308, #ca8a04);
}

.ts-life-fill.ts-life-critical {
  background: linear-gradient(90deg, #ef4444, #dc2626);
}

.ts-component-detail {
  display: none;
  padding: 16px;
  margin-top: 12px;
  background: rgba(15, 23, 42, 0.6);
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.1);
}

.ts-component-detail.active {
  display: block;
  animation: ts-expand 0.2s ease;
}

@keyframes ts-expand {
  from { opacity: 0; max-height: 0; }
  to { opacity: 1; max-height: 400px; }
}

/* BUDGET INTERACTIONS */
.ts-budget-interactive {
  cursor: pointer;
}

.ts-budget-segments {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.ts-budget-interactive:hover .ts-budget-segments {
  opacity: 1;
}

.ts-budget-segment {
  height: 100%;
  transition: filter 0.15s ease;
}

.ts-budget-segment[data-category="tires"] { background: #3b82f6; }
.ts-budget-segment[data-category="travel"] { background: #8b5cf6; }
.ts-budget-segment[data-category="fuel"] { background: #f97316; }
.ts-budget-segment[data-category="parts"] { background: #22c55e; }

.ts-budget-cat {
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.15s ease;
}

.ts-budget-cat:hover {
  background: rgba(255, 255, 255, 0.1);
}

.ts-budget-cat.highlighted {
  background: rgba(255, 122, 50, 0.2);
  color: #ff7a32;
}

/* SPONSOR DELIVERABLES */
.ts-deliverable {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  margin: -4px -10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.ts-deliverable:hover {
  background: rgba(255, 255, 255, 0.04);
}

.ts-deliverable-text {
  flex: 1;
}

.ts-deliverable-actions {
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.ts-deliverable:hover .ts-deliverable-actions {
  opacity: 1;
}

.ts-action-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.ts-action-btn:hover {
  background: rgba(255, 122, 50, 0.2);
}

.ts-action-check {
  color: #22c55e;
}

.ts-action-urgent {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.ts-action-urgent:hover {
  background: rgba(239, 68, 68, 0.4);
}

.ts-status-pulse {
  animation: ts-status-pulse 1.5s ease-in-out infinite;
}

@keyframes ts-status-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

.ts-deliverable.completed .ts-deliverable-text {
  text-decoration: line-through;
  opacity: 0.6;
}

/* DELIVERABLE SUMMARY STATS */
.ts-deliverable-summary {
  padding: 12px 16px 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
  margin-bottom: 8px;
}

.ts-deliverable-summary-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.ts-deliverable-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px;
  background: rgba(30, 41, 59, 0.4);
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.08);
}

.ts-deliverable-summary-row a.ts-deliverable-stat {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.ts-deliverable-summary-row a.ts-deliverable-stat:hover {
  border-color: rgba(148, 163, 184, 0.16);
}

.ts-deliverable-summary-row a.ts-deliverable-stat:focus-visible {
  outline: 2px solid rgba(255, 122, 50, 0.45);
  outline-offset: 2px;
}

.ts-deliverable-stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #f9fafb;
  line-height: 1.2;
}

.ts-deliverable-stat-label {
  font-size: 0.7rem;
  color: rgba(148, 163, 184, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 2px;
}

.ts-deliverable-stat-bad {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
}

.ts-deliverable-stat-bad .ts-deliverable-stat-value {
  color: #ef4444;
}

.ts-deliverable-stat-warn {
  background: rgba(250, 204, 21, 0.08);
  border-color: rgba(250, 204, 21, 0.15);
}

.ts-deliverable-stat-warn .ts-deliverable-stat-value {
  color: #facc15;
}

.ts-deliverable-stat-ok .ts-deliverable-stat-value {
  color: #22c55e;
}

.ts-deliverable-rate {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ts-deliverable-rate-bar {
  height: 6px;
  background: rgba(148, 163, 184, 0.15);
  border-radius: 3px;
  overflow: hidden;
}

.ts-deliverable-rate-fill {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #4ade80);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.ts-deliverable-rate-text {
  font-size: 0.75rem;
  color: rgba(148, 163, 184, 0.7);
  text-align: center;
}

.ts-widget-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  text-align: center;
}

.ts-widget-empty-text {
  font-size: 0.85rem;
  color: rgba(148, 163, 184, 0.6);
  margin: 0 0 12px;
  line-height: 1.5;
}

.ts-widget-empty-inline {
  padding: 16px;
  text-align: center;
}

.ts-widget-empty-inline .ts-widget-empty-text {
  margin: 0;
}

/* MODAL */
.ts-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.85);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
}

.ts-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.ts-modal {
  background: rgba(15, 23, 42, 0.98);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 16px;
  width: 90%;
  max-width: 600px;
  max-height: 85vh;
  overflow: hidden;
  transform: scale(0.95) translateY(20px);
  transition: transform 0.2s ease;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
}

.ts-modal-overlay.active .ts-modal {
  transform: scale(1) translateY(0);
}

.ts-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.ts-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #f9fafb;
}

.ts-modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: rgba(148, 163, 184, 0.9);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.ts-modal-close:hover {
  background: rgba(255, 122, 50, 0.2);
  color: #ff7a32;
}

.ts-modal-body {
  padding: 24px;
  overflow-y: auto;
  max-height: 60vh;
}

.ts-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid rgba(148, 163, 184, 0.1);
}

/* Modal content styles */
.ts-modal-section {
  margin-bottom: 20px;
}

.ts-modal-section:last-child {
  margin-bottom: 0;
}

.ts-modal-section h4 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(148, 163, 184, 0.9);
  margin: 0 0 12px;
}

.ts-modal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.ts-modal-stat {
  background: rgba(15, 23, 42, 0.6);
  padding: 12px;
  border-radius: 8px;
  text-align: center;
}

.ts-modal-stat-value {
  font-size: 20px;
  font-weight: 600;
  color: #f9fafb;
}

.ts-modal-stat-label {
  font-size: 11px;
  color: rgba(148, 163, 184, 0.8);
  margin-top: 4px;
}

.ts-lap-table {
  width: 100%;
  font-size: 12px;
}

.ts-lap-table th,
.ts-lap-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.ts-lap-table th {
  color: rgba(148, 163, 184, 0.9);
  font-weight: 500;
}

.ts-mini-chart {
  height: 80px;
  background: rgba(15, 23, 42, 0.6);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.ts-mini-chart-bar {
  position: absolute;
  bottom: 0;
  width: 8px;
  background: linear-gradient(180deg, #3b82f6, #1d4ed8);
  border-radius: 2px 2px 0 0;
}

.ts-form-group {
  margin-bottom: 16px;
}

.ts-form-group label {
  display: block;
  font-size: 13px;
  color: rgba(148, 163, 184, 0.9);
  margin-bottom: 6px;
}

.ts-form-input {
  width: 100%;
  padding: 10px 14px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  color: #f9fafb;
  font-size: 14px;
  transition: border-color 0.15s ease;
}

.ts-form-input:focus {
  outline: none;
  border-color: #ff7a32;
}

.ts-btn-modal {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ts-btn-modal-primary {
  background: linear-gradient(135deg, #ff7a32, #ff944d);
  border: none;
  color: #020617;
}

.ts-btn-modal-primary:hover {
  filter: brightness(1.1);
}

.ts-btn-modal-secondary {
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.3);
  color: #f9fafb;
}

.ts-btn-modal-secondary:hover {
  border-color: rgba(148, 163, 184, 0.5);
}

/* ================================ */
/* RESPONSIVE / MOBILE STYLES      */
/* ================================ */

/* Tablet breakpoint */
@media (max-width: 1024px) {
  .ts-dashboard {
    padding: 24px 24px 32px;
  }

  .ts-dash-row {
    grid-template-columns: 1fr 1fr;
  }

  .ts-dash-row-top {
    grid-template-columns: 1fr;
  }

  /* Prevent span-2 cards from creating tablet gaps */
  .ts-widget-span-2 {
    grid-column: span 1;
  }

  /* On tablet (2 cols), span-2 widgets take full width */
  .ts-dash-row-bottom {
    grid-template-columns: 1fr 1fr;
  }

  .ts-widget-span-2 {
    grid-column: span 2;
  }

  /* Dashboard layout rule: avoid empty cells at tablet widths.
     - Row-bottom: Sponsors + On Car Parts should sit side-by-side.
     - Row-mid: keep 2-up first row (Budget + Active Setup), then let Upcoming Events take full width.
  */
  .ts-dash-row-bottom .ts-widget-span-2 {
    grid-column: span 1;
  }

  .ts-dash-row-mid #upcoming-events-widget {
    grid-column: span 2;
  }

  .ts-dash-header-meta {
    margin-left: 0;
    flex-wrap: wrap;
    gap: 12px;
  }

  .ts-metric-grid {
    gap: 10px;
  }

  .ts-modal {
    max-width: 90%;
  }

  .ts-modal-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile breakpoint */
@media (max-width: 768px) {
  .ts-dashboard {
    padding: 16px 16px 24px;
  }

  /* Header adjustments */
  .ts-dash-header {
    gap: 12px;
    margin-bottom: 16px;
  }

  .ts-dash-team-module {
    gap: 10px;
  }

  .ts-dash-team-avatar {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .ts-dash-team-name {
    font-size: 16px;
  }

  .ts-dash-team-series {
    font-size: 12px;
  }

  .ts-dash-header-meta {
    margin-left: 0;
    gap: 10px;
    flex-wrap: wrap;
  }

  .ts-dash-import {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .ts-import-status {
    font-size: 11px;
  }

  /* Hide user name on mobile, show only avatar */
  .ts-dash-user-name {
    display: none;
  }

  /* Main grid - single column on mobile */
  .ts-dash-main {
    gap: 16px;
  }

  .ts-dash-row,
  .ts-dash-row-top,
  .ts-dash-row-bottom {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* On mobile, all widgets are full width */
  .ts-widget-span-1,
  .ts-widget-span-2 {
    grid-column: span 1;
  }

  /* Cards */
  .ts-card {
    padding: 14px 14px 16px;
    border-radius: 10px;
  }

  .ts-card-lg {
    padding: 14px 16px 16px;
  }

  .ts-card-header {
    flex-wrap: wrap;
    gap: 8px;
  }

  .ts-card-header h2 {
    font-size: 14px;
    width: 100%;
  }

  /* Metrics */
  .ts-metric-grid,
  .ts-metric-grid-3 {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .ts-metric-value {
    font-size: 16px;
  }

  .ts-metric-label {
    font-size: 10px;
  }

  .ts-metric-delta {
    font-size: 11px;
  }

  .ts-metric-clickable {
    padding: 6px;
    margin: -6px;
  }

  /* Chart */
  .ts-chart-placeholder {
    height: 120px;
  }

  .ts-card-legend {
    font-size: 10px;
    gap: 6px;
  }

  .ts-chart-caption {
    font-size: 10px;
  }

  /* Setup grid */
  .ts-setup-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .ts-setup-row {
    font-size: 12px;
  }

  /* Table */
  .ts-table {
    font-size: 12px;
  }

  .ts-table th,
  .ts-table td {
    padding: 8px 4px;
  }

  .ts-table thead th {
    font-size: 10px;
  }

  .ts-life-bar {
    width: 50px;
  }

  .ts-life-bar.ts-life-bar-compact {
    width: 70px;
  }

  .ts-life-bar-shell.ts-life-bar-compact {
    width: 70px;
  }

  .ts-life-dim {
    width: 38px;
    font-size: 9px;
  }

  .ts-life-used-cell {
    width: 170px;
  }

  .ts-life-value {
    font-size: 11px;
  }

  /* Tags */
  .ts-tag {
    font-size: 10px;
    padding: 2px 6px;
  }

  /* Budget */
  .ts-budget-text,
  .ts-budget-breakdown {
    font-size: 11px;
  }

  .ts-budget-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  /* Sponsor list */
  .ts-list {
    font-size: 12px;
    gap: 4px;
  }

  .ts-deliverable {
    padding: 10px 8px;
    margin: -4px -8px;
  }

  .ts-deliverable-text {
    font-size: 12px;
    line-height: 1.3;
  }

  /* Show action buttons always on mobile (touch devices) */
  .ts-deliverable-actions {
    opacity: 1;
  }

  .ts-action-btn {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }

  /* Modal */
  .ts-modal {
    width: 95%;
    max-width: none;
    max-height: 90vh;
    border-radius: 12px;
  }

  .ts-modal-header {
    padding: 14px 16px;
  }

  .ts-modal-title {
    font-size: 16px;
  }

  .ts-modal-body {
    padding: 16px;
    max-height: 55vh;
  }

  .ts-modal-footer {
    padding: 12px 16px;
    flex-direction: column;
    gap: 8px;
  }

  .ts-btn-modal {
    width: 100%;
    padding: 12px 20px;
    text-align: center;
  }

  .ts-modal-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .ts-modal-stat {
    padding: 10px;
  }

  .ts-modal-stat-value {
    font-size: 18px;
  }

  .ts-form-group {
    margin-bottom: 12px;
  }

  .ts-form-input {
    padding: 12px 14px;
    font-size: 16px; /* Prevents iOS zoom on focus */
  }

  /* Dropdowns */
  .ts-dropdown-menu {
    min-width: 180px;
  }

  .ts-dropdown-item {
    padding: 12px 16px;
  }

  /* Toast */
  .ts-toast-container {
    bottom: 16px;
    right: 16px;
    left: 16px;
  }

  .ts-toast {
    max-width: none;
    width: 100%;
  }

  /* Notifications */
  .ts-notification-bell {
    width: 40px;
    height: 40px;
  }

  /* Season pill */
  .ts-dash-season {
    padding: 5px 12px;
    font-size: 13px;
  }
}

/* Small mobile breakpoint */
@media (max-width: 480px) {
  .ts-dashboard {
    padding: 12px 12px 20px;
  }

  .ts-dash-team-name {
    font-size: 14px;
  }

  .ts-dash-team-series {
    font-size: 11px;
  }

  .ts-dash-team-label {
    font-size: 10px;
  }

  /* Stack metrics vertically on very small screens */
  .ts-metric-grid,
  .ts-metric-grid-3 {
    grid-template-columns: 1fr;
  }

  .ts-card-header h2 {
    font-size: 13px;
  }

  /* Full-width modal on tiny screens */
  .ts-modal {
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }

  .ts-modal-body {
    max-height: calc(100vh - 140px);
  }

  .ts-modal-grid {
    grid-template-columns: 1fr;
  }

  /* Budget breakdown stack */
  .ts-budget-breakdown {
    flex-direction: column;
    gap: 2px;
  }

  /* Table scrollable on tiny screens */
  .ts-card[data-card="components"] {
    overflow-x: auto;
  }

  .ts-table {
    min-width: 320px;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  /* Always show edit icons on touch devices */
  .ts-edit-icon {
    opacity: 0.6;
  }

  /* Always show deliverable actions */
  .ts-deliverable-actions {
    opacity: 1;
  }

  /* Larger touch targets */
  .ts-setup-editable {
    padding: 10px 8px;
    margin: -10px -8px;
  }

  .ts-table-row-clickable td {
    padding: 12px 4px;
  }

  .ts-dropdown-item {
    padding: 14px 16px;
  }

  .ts-legend-item {
    padding: 6px 10px;
  }

  .ts-budget-cat {
    padding: 6px 10px;
  }

  /* Disable hover effects that don't work well on touch */
  .ts-card-interactive:hover {
    transform: none;
  }

  .ts-chart-dot:hover {
    transform: scale(1.3);
  }
}

/* Landscape phone orientation */
@media (max-width: 896px) and (orientation: landscape) {
  .ts-dashboard {
    padding: 12px 20px 20px;
  }

  .ts-dash-row,
  .ts-dash-row-top,
  .ts-dash-row-bottom {
    grid-template-columns: 1fr 1fr;
  }

  .ts-widget-span-2 {
    grid-column: span 2;
  }

  .ts-modal {
    max-height: 85vh;
  }

  .ts-modal-body {
    max-height: 50vh;
  }
}

/* Dark mode / OLED optimization - ensure pure blacks for battery saving */
@media (prefers-color-scheme: dark) {
  .ts-dashboard {
    background: radial-gradient(circle at top left, #0a0f1a 0%, #000000 55%, #000000 100%);
  }
}

/* ============================= */
/* EMPTY STATE STYLES            */
/* ============================= */

/* Fade-in-up animation keyframes */
@keyframes ts-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animation utility class */
.ts-animate-in {
  animation: ts-fade-in-up 0.5s ease-out both;
}

/* Demo Mode Badge */
.ts-demo-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

/* Minimal header for empty state */
.ts-dash-header-minimal {
  justify-content: space-between;
}

.ts-dash-header-minimal .ts-dash-header-left {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Empty avatar state */
.ts-dash-team-avatar-empty {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(255, 122, 50, 0.3));
  border: 1px dashed rgba(255, 255, 255, 0.2);
}

.ts-dash-team-avatar-empty svg {
  opacity: 0.7;
}

/* Empty State Layout */
.ts-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);
  padding: 40px 20px;
}

/* Glassmorphism Container */
.ts-empty-state-container {
  max-width: 800px;
  width: 100%;
  padding: 48px 40px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  backdrop-filter: blur(12px);
  box-shadow: 
    0 4px 24px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Hero Section */
.ts-empty-state-hero {
  text-align: center;
  margin-bottom: 48px;
}

.ts-empty-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  margin-bottom: 24px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(255, 122, 50, 0.15));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
}

.ts-empty-state-icon svg {
  color: #60a5fa;
}

.ts-empty-state-title {
  font-size: 32px;
  font-weight: 700;
  color: #f9fafb;
  margin: 0 0 12px 0;
  letter-spacing: -0.02em;
}

.ts-empty-state-subtitle {
  font-size: 16px;
  color: #9ca3af;
  margin: 0 0 32px 0;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* ========================================
   Parts-style no-team empty state (shared)
   Matches Parts Inventory empty hero
======================================== */
.ts-pm-empty-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

.ts-pm-empty-hero {
  text-align: center;
  padding: 40px;
}

.ts-pm-empty-hero .ts-pm-empty-icon {
  width: 72px;
  height: 72px;
}

.ts-pm-empty-hero .ts-pm-empty-title,
h1.ts-pm-empty-title {
  font-size: 22px;
  margin-bottom: 12px;
}

.ts-pm-empty-hero .ts-pm-empty-subtitle,
p.ts-pm-empty-subtitle {
  font-size: 15px;
  color: rgba(148, 163, 184, 0.9);
  margin: 0 0 24px;
}

/* CTA Actions */
.ts-empty-state-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.ts-btn-lg {
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.2s ease;
  text-decoration: none;
}

.ts-btn-primary {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  border: none;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
}

.ts-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.45);
}

.ts-btn-ghost {
  background: transparent;
  color: #9ca3af;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.ts-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #f9fafb;
  border-color: rgba(255, 255, 255, 0.25);
}

/* CTA Hint Text */
.ts-empty-state-cta-hint {
  margin-top: 20px;
  font-size: 13px;
  color: #6b7280;
  text-align: center;
}

/* Features Section */
.ts-empty-state-features {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 40px;
}

.ts-empty-state-features-title {
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  margin: 0 0 24px 0;
}

.ts-empty-state-features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* Feature Cards */
.ts-empty-state-feature-card {
  padding: 24px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  transition: all 0.25s ease;
}

.ts-empty-state-feature-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

/* Staggered animation delays for feature cards */
.ts-empty-state-feature-card:nth-child(1) { animation-delay: 0.25s; }
.ts-empty-state-feature-card:nth-child(2) { animation-delay: 0.35s; }
.ts-empty-state-feature-card:nth-child(3) { animation-delay: 0.45s; }
.ts-empty-state-feature-card:nth-child(4) { animation-delay: 0.55s; }

.ts-empty-state-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(255, 122, 50, 0.1));
  border-radius: 12px;
}

.ts-empty-state-feature-icon svg {
  color: #60a5fa;
}

.ts-empty-state-feature-card h3 {
  font-size: 16px;
  font-weight: 600;
  color: #f9fafb;
  margin: 0 0 8px 0;
}

.ts-empty-state-feature-card p {
  font-size: 14px;
  color: #9ca3af;
  margin: 0;
  line-height: 1.5;
}

/* Responsive adjustments for empty state */
@media (max-width: 640px) {
  .ts-empty-state-container {
    padding: 32px 24px;
    border-radius: 20px;
  }

  .ts-empty-state-title {
    font-size: 26px;
  }

  .ts-empty-state-subtitle {
    font-size: 15px;
  }

  .ts-empty-state-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .ts-btn-lg {
    justify-content: center;
  }

  .ts-empty-state-features-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================= */
/* TEAM MANAGEMENT STYLES        */
/* ============================= */

/* Back Link */
.ts-back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #9ca3af;
  transition: all 0.2s ease;
  text-decoration: none;
}

.ts-back-link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f9fafb;
}

/* Teams Grid */
.ts-teams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 24px;
  padding: 0;
}

/* Team Card */
.ts-team-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 24px;
  transition: all 0.25s ease;
}

.ts-team-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

.ts-team-card-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.ts-team-avatar-lg {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, #3b82f6, #ff7a32);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 20px;
  color: #f9fafb;
  flex-shrink: 0;
}

.ts-team-card-info {
  flex: 1;
  min-width: 0;
}

.ts-team-card-name {
  font-size: 18px;
  font-weight: 600;
  color: #f9fafb;
  margin: 0 0 4px 0;
}

.ts-team-card-meta {
  font-size: 13px;
  color: #6b7280;
  margin: 0 0 8px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ts-tag-small {
  font-size: 11px;
  padding: 3px 8px;
}

/* ============================= */
/* INSTALLED PARTS (Dashboard)   */
/* ============================= */

.ts-installed-parts-header {
  align-items: flex-start;
  flex-wrap: wrap;
}

.ts-installed-parts-header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.ts-installed-parts-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ts-installed-parts-meta {
  font-size: 12px;
  color: rgba(148, 163, 184, 0.9);
}

.ts-installed-parts-controls {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.ts-installed-parts-bulk {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0 14px;
}

.ts-installed-parts-bulk-row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  align-items: center;
}

.ts-installed-parts-bulk-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(148, 163, 184, 0.9);
}

.ts-installed-parts-bulk-controls {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.ts-installed-parts-quick,
.ts-installed-parts-apply {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.ts-installed-parts-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ts-installed-parts-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ts-installed-parts-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ts-installed-parts-group-title {
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.ts-installed-parts-group-title h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.ts-installed-parts-count {
  font-size: 12px;
  color: rgba(148, 163, 184, 0.9);
}

.ts-installed-parts-table th:first-child,
.ts-installed-parts-table td:first-child {
  width: 42px;
}

.ts-installed-parts-actions-cell {
  white-space: nowrap;
}

.ts-installed-parts-row-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.ts-installed-parts-popover {
  position: absolute;
  z-index: 2000;
  min-width: 260px;
}

.ts-installed-parts-popover .ts-installed-parts-popover-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

.ts-installed-parts-popover .ts-installed-parts-popover-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
}

@media (max-width: 640px) {
  .ts-installed-parts-header-right {
    width: 100%;
    justify-content: flex-start;
  }

  .ts-installed-parts-bulk-row {
    grid-template-columns: 1fr;
  }

  .ts-installed-parts-controls {
    width: 100%;
  }

  .ts-installed-parts-controls .ts-input,
  .ts-installed-parts-controls .ts-form-select {
    width: 100%;
  }
}

/* ============================= */
/* ============================= */
/* ON CAR PARTS WIDGET (Pro)     */
/* Redesigned: Session Wear Update */
/* ============================= */

/* Screen-reader only utility */
.ts-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Widget shell */
.ts-oncar-widget {
  display: flex;
  flex-direction: column;
  background: #0F1117;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}

/* Header */
.ts-oncar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ts-oncar-title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ts-oncar-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1.3;
}

.ts-oncar-subtitle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 400;
}

.ts-oncar-count {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 500;
  background: rgba(255, 255, 255, 0.06);
  padding: 4px 10px;
  border-radius: 6px;
}

/* Session Running Control Bar */
.ts-oncar-bar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px;
  background: #1A1D25;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ts-oncar-bar-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FF7A32;
}

.ts-oncar-bar-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.ts-oncar-bar-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ts-oncar-bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* Preset buttons */
.ts-oncar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.ts-oncar-btn:focus-visible {
  outline: 2px solid #FF7A32;
  outline-offset: 2px;
}

.ts-oncar-btn-preset {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.ts-oncar-btn-preset:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}

.ts-oncar-btn-primary {
  background: #FF7A32;
  color: #FFFFFF;
}

.ts-oncar-btn-primary:hover {
  background: #E45E1B;
}

.ts-oncar-btn-secondary {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.ts-oncar-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}

/* Custom laps input */
.ts-oncar-custom-input {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  overflow: hidden;
}

.ts-oncar-input {
  width: 52px;
  height: 30px;
  padding: 0 8px;
  background: transparent;
  border: none;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}

.ts-oncar-input:focus {
  outline: none;
}

.ts-oncar-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.ts-oncar-input-suffix {
  padding: 0 10px 0 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

/* Footer hint + selection indicator */
.ts-oncar-bar-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ts-oncar-bar-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
}

.ts-oncar-bar-selection {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

.ts-oncar-bar-selection.has-selection {
  color: #FF7A32;
}

/* Parts List Container */
.ts-oncar-list {
  flex: 1;
  min-height: 100px;
  overflow-y: auto;
  padding: 8px 0;
}

.ts-oncar-list::-webkit-scrollbar {
  width: 6px;
}

.ts-oncar-list::-webkit-scrollbar-track {
  background: transparent;
}

.ts-oncar-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

/* Empty state */
.ts-oncar-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}

.ts-oncar-empty p {
  margin: 0 0 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

.ts-oncar-empty .ts-btn {
  margin-top: 8px;
}

/* Component Card Row (replaces table rows) */
.ts-oncar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.12s ease;
}

.ts-oncar-item:last-child {
  border-bottom: none;
}

.ts-oncar-item:hover {
  background: rgba(255, 255, 255, 0.02);
}

.ts-oncar-item.ts-oncar-item--critical {
  background: rgba(239, 68, 68, 0.06);
}

.ts-oncar-item.ts-oncar-item--replace-soon {
  background: rgba(251, 146, 60, 0.05);
}

/* Checkbox */
.ts-oncar-checkbox {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: #FF7A32;
  cursor: pointer;
}

/* Part info (left block) */
.ts-oncar-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ts-oncar-item-name {
  font-size: 13px;
  font-weight: 500;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ts-oncar-item-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.ts-oncar-item-meta-sep {
  opacity: 0.4;
}

/* Life Used (center block) */
.ts-oncar-item-life {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 100px;
}

.ts-oncar-item-life-text {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

/* Mini progress bar */
.ts-oncar-progress {
  width: 80px;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}

.ts-oncar-progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.ts-oncar-progress-fill--ok {
  background: #22c55e;
}

.ts-oncar-progress-fill--monitor {
  background: #eab308;
}

.ts-oncar-progress-fill--warn {
  background: #f97316;
}

.ts-oncar-progress-fill--critical {
  background: #ef4444;
}

/* Status pill (right block) */
.ts-oncar-item-status {
  flex-shrink: 0;
}

.ts-oncar-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 4px;
  white-space: nowrap;
}

.ts-oncar-status-pill--ok {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.ts-oncar-status-pill--monitor {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
}

.ts-oncar-status-pill--warn {
  background: rgba(249, 115, 22, 0.15);
  color: #f97316;
}

.ts-oncar-status-pill--critical {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

/* Overflow menu trigger */
.ts-oncar-item-actions {
  flex-shrink: 0;
}

.ts-oncar-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 16px;
  cursor: pointer;
  transition: all 0.12s ease;
}

.ts-oncar-menu-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}

.ts-oncar-menu-btn:focus-visible {
  outline: 2px solid #FF7A32;
  outline-offset: 2px;
}

/* Select All Row */
.ts-oncar-select-all {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}

.ts-oncar-select-all-label {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Footer */
.ts-oncar-footer {
  padding: 12px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
}

.ts-oncar-link {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.15s ease;
}

.ts-oncar-link:hover {
  color: #FF7A32;
}

/* Keep legacy floating menu styles (unchanged) */
.ts-on-car-menu {
  position: fixed;
  z-index: 9999;
  min-width: 160px;
  padding: 6px;
  background: #1A1D25;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.ts-on-car-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}

.ts-on-car-menu-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.ts-on-car-menu-item-danger {
  color: #ef4444;
}

.ts-on-car-menu-item-danger:hover {
  background: rgba(239, 68, 68, 0.1);
}

.ts-on-car-menu-divider {
  height: 1px;
  margin: 6px 0;
  background: rgba(255, 255, 255, 0.08);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .ts-oncar-bar-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .ts-oncar-bar-group {
    flex-wrap: wrap;
  }
  
  .ts-oncar-bar-actions {
    margin-left: 0;
    justify-content: flex-start;
  }
  
  .ts-oncar-item {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .ts-oncar-item-life {
    align-items: flex-start;
    min-width: auto;
    flex: 1;
  }
  
  .ts-oncar-bar-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* Legacy compatibility - keep old class aliases */
.ts-on-car-parts-card {
  display: flex;
  flex-direction: column;
}

.ts-on-car-header {
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.ts-on-car-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ts-on-car-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.ts-on-car-title h2 {
  margin: 0;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 600;
  color: #f9fafb;
  line-height: 1.3;
}

.ts-on-car-meta {
  font-size: 12px;
  color: rgba(148, 163, 184, 0.9);
  font-weight: 400;
}

.ts-on-car-header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.ts-link-sm {
  font-size: 12px;
  color: var(--ts-primary);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}

.ts-link-sm:hover {
  opacity: 1;
  text-decoration: underline;
}

/* Quick Add Controls */
.ts-on-car-quick-add {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}

.ts-quick-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ts-quick-add-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(148, 163, 184, 0.8);
  font-weight: 500;
}

.ts-quick-add-laps {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ts-quick-add-custom {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ts-quick-add-divider {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 4px;
}

.ts-quick-add-mode {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ts-quick-add-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(148, 163, 184, 0.8);
  cursor: pointer;
  user-select: none;
}

.ts-quick-add-toggle input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--ts-primary);
}

/* Extra small buttons */
.ts-btn-xs {
  padding: 4px 8px;
  font-size: 11px;
  height: 24px;
  border-radius: 4px;
}

.ts-input-xs {
  padding: 4px 8px;
  font-size: 11px;
  height: 24px;
  width: 56px;
  border-radius: 4px;
}

/* On Car Parts List */
.ts-on-car-list {
  flex: 1;
  min-height: 120px;
  overflow-y: auto;
}

.ts-on-car-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  text-align: center;
}

.ts-on-car-empty p {
  margin: 0 0 12px;
  color: rgba(148, 163, 184, 0.7);
}

.ts-on-car-empty .ts-btn {
  margin-top: 8px;
}

/* On Car Parts Table */
.ts-on-car-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ts-on-car-table th {
  padding: 8px 10px;
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(148, 163, 184, 0.7);
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  white-space: nowrap;
}

.ts-on-car-table td {
  padding: 8px 10px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.ts-on-car-table tbody tr:last-child td {
  border-bottom: none;
}

.ts-on-car-table th:first-child,
.ts-on-car-table td:first-child {
  width: 32px;
  padding-left: 8px;
  padding-right: 4px;
}

.ts-on-car-table th:last-child,
.ts-on-car-table td:last-child {
  width: 32px;
  padding-right: 8px;
  padding-left: 4px;
  text-align: right;
}

/* Row highlighting for critical/replace_soon */
.ts-on-car-row-critical {
  background: rgba(239, 68, 68, 0.08);
}

.ts-on-car-row-replace-soon {
  background: rgba(251, 146, 60, 0.06);
}

.ts-on-car-row-critical:hover,
.ts-on-car-row-replace-soon:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* Part cell */
.ts-on-car-part-cell {
  max-width: 180px;
}

.ts-on-car-part-name {
  font-weight: 500;
  color: var(--ts-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  line-height: 1.3;
}

.ts-on-car-part-number {
  font-size: 10px;
  color: rgba(148, 163, 184, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* Life cell */
.ts-on-car-life {
  font-size: 12px;
  color: rgba(148, 163, 184, 0.9);
  white-space: nowrap;
}

/* Actions */
.ts-on-car-actions-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: rgba(148, 163, 184, 0.6);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.12s ease;
}

.ts-on-car-actions-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ts-text);
}

/* Checkbox styling */
.ts-on-car-checkbox {
  width: 14px;
  height: 14px;
  accent-color: var(--ts-primary);
  cursor: pointer;
}

/* Footer */
.ts-on-car-footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.08);
  text-align: center;
}

/* Floating actions menu */
.ts-on-car-menu {
  position: fixed;
  z-index: 9999;
  min-width: 140px;
  padding: 4px;
  background: var(--ts-surface, #1a1f2e);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.ts-on-car-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--ts-text);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}

.ts-on-car-menu-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.ts-on-car-menu-item-danger {
  color: #ef4444;
}

.ts-on-car-menu-item-danger:hover {
  background: rgba(239, 68, 68, 0.1);
}

.ts-on-car-menu-divider {
  height: 1px;
  margin: 4px 0;
  background: rgba(255, 255, 255, 0.08);
}

/* Part Detail Modal (Dashboard) */
.ts-part-detail-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ts-part-detail-images {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 8px;
}

.ts-part-detail-img {
  max-width: 120px;
  max-height: 120px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.ts-part-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ts-part-detail-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--ts-text, #f9fafb);
}

.ts-part-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.ts-part-detail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ts-part-detail-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--ts-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ts-part-detail-value {
  font-size: 14px;
  color: var(--ts-text, #f9fafb);
}

.ts-part-detail-usage {
  display: flex;
  gap: 24px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
}

.ts-part-detail-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.ts-part-detail-stat-value {
  font-size: 24px;
  font-weight: 600;
  color: var(--ts-text, #f9fafb);
}

.ts-part-detail-stat-label {
  font-size: 11px;
  color: var(--ts-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ts-part-detail-url {
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Part Detail Section Headers */
.ts-part-detail-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ts-part-detail-section-header {
  font-size: 11px;
  font-weight: 600;
  color: var(--ts-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

/* Part Lap History */
.ts-part-lap-history {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ts-part-lap-history-empty {
  font-size: 13px;
  color: var(--ts-muted, #94a3b8);
  font-style: italic;
}

.ts-lap-history-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
}

.ts-lap-history-delta {
  font-size: 14px;
  font-weight: 600;
  min-width: 48px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ts-lap-delta-positive {
  color: #22c55e;
}

.ts-lap-delta-negative {
  color: #f97316;
}

.ts-lap-history-details {
  flex: 1;
  min-width: 0;
}

.ts-lap-history-source {
  font-size: 13px;
  color: var(--ts-text, #f9fafb);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ts-lap-history-meta {
  font-size: 11px;
  color: var(--ts-muted, #94a3b8);
  margin-top: 2px;
}

.ts-lap-history-more {
  font-size: 12px;
  color: var(--ts-muted, #94a3b8);
  text-align: center;
  padding-top: 4px;
}

/* Mobile responsive */
@media (max-width: 640px) {
  .ts-part-detail-grid {
    grid-template-columns: 1fr;
  }
  
  .ts-part-detail-usage {
    flex-direction: column;
    gap: 12px;
  }
  
  .ts-part-detail-stat {
    flex-direction: row;
    justify-content: space-between;
  }
  
  .ts-on-car-title-row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .ts-on-car-header-actions {
    justify-content: flex-end;
  }
  
  .ts-quick-add-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .ts-quick-add-divider {
    display: none;
  }
  
  .ts-on-car-table {
    font-size: 12px;
  }
  
  .ts-on-car-table th,
  .ts-on-car-table td {
    padding: 6px 8px;
  }
  
  .ts-on-car-part-cell {
    max-width: 140px;
  }
}

.ts-team-card-body {
  margin-bottom: 16px;
}

.ts-team-card-desc {
  font-size: 14px;
  color: #9ca3af;
  margin: 0 0 12px 0;
  line-height: 1.5;
}

.ts-team-card-role {
  display: flex;
}

.ts-team-card-actions {
  display: flex;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Role Badges */
.ts-role-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  text-transform: capitalize;
}

.ts-role-owner {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

.ts-role-manager {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

.ts-role-crew {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

.ts-role-partner {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
}

.ts-role-view_only {
  background: rgba(107, 114, 128, 0.15);
  color: #9ca3af;
}

/* Small Button */
.ts-btn-sm {
  padding: 8px 14px;
  font-size: 13px;
}

/* Form Page */
.ts-form-page {
  display: flex;
  justify-content: center;
  padding: 40px 20px;
}

.ts-form-container {
  max-width: 560px;
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 40px;
}

.ts-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ts-form-errors {
  padding: 16px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 12px;
}

.ts-error {
  color: #f87171;
  font-size: 14px;
  margin: 0;
}

.ts-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ts-form-row {
  display: flex;
  gap: 16px;
}

.ts-form-group-half {
  flex: 1;
}

.ts-label {
  font-size: 14px;
  font-weight: 500;
  color: #d1d5db;
}

.ts-required {
  color: #f87171;
}

.ts-input {
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
  color: #f9fafb;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  transition: all 0.2s ease;
  font-family: inherit;
}

.ts-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.ts-input::placeholder {
  color: #6b7280;
}

.ts-textarea {
  resize: vertical;
  min-height: 80px;
}

.ts-help-text {
  font-size: 13px;
  color: #6b7280;
  margin: 0;
}

.ts-field-error {
  font-size: 13px;
  color: #f87171;
  margin: 0;
}

.ts-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Form helper note - subtle info callout */
.ts-form-helper-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 10px;
  margin-top: 8px;
  margin-bottom: 8px;
}

.ts-form-helper-note svg {
  flex-shrink: 0;
  color: #60a5fa;
  margin-top: 1px;
}

.ts-form-helper-note span {
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.5;
}

.ts-form-helper-note a {
  color: #60a5fa;
  text-decoration: none;
  font-weight: 500;
}

.ts-form-helper-note a:hover {
  color: #93c5fd;
  text-decoration: underline;
}

/* Team Detail Page */
.ts-team-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.ts-detail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ts-detail-full {
  grid-column: 1 / -1;
}

.ts-detail-label {
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ts-detail-value {
  font-size: 15px;
  color: #f9fafb;
}

/* Member List */
.ts-member-list {
  list-style: none;
  padding: 0;
  margin: 20px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ts-member-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
}

.ts-member-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #4b5563, #374151);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  color: #f9fafb;
  flex-shrink: 0;
}

.ts-member-info {
  flex: 1;
  min-width: 0;
}

.ts-member-name {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #f9fafb;
}

.ts-member-email {
  display: block;
  font-size: 13px;
  color: #6b7280;
}

.ts-member-count {
  font-size: 13px;
  color: #6b7280;
}

.ts-card-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Danger Zone */
.ts-card-danger {
  border-color: rgba(239, 68, 68, 0.2);
}

.ts-card-danger .ts-card-header h2 {
  color: #f87171;
}

.ts-danger-zone {
  margin-top: 16px;
}

.ts-danger-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px;
  background: rgba(239, 68, 68, 0.05);
  border-radius: 12px;
}

.ts-danger-info strong {
  display: block;
  font-size: 14px;
  color: #f9fafb;
  margin-bottom: 4px;
}

.ts-danger-info p {
  font-size: 13px;
  color: #9ca3af;
  margin: 0;
}

.ts-btn-danger {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ts-btn-danger:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.5);
}

/* Responsive for team management */
@media (max-width: 640px) {
  .ts-teams-grid {
    grid-template-columns: 1fr;
  }

  .ts-form-container {
    padding: 24px;
  }

  .ts-form-row {
    flex-direction: column;
  }

  .ts-team-detail-grid {
    grid-template-columns: 1fr;
  }

  .ts-danger-item {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
}

/* ============================= */
/* TEAM DETAIL PAGE LAYOUT       */
/* ============================= */

/* Main container for team detail page - CSS Grid layout */
.ts-team-detail-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Grid row for 2-column layout */
.ts-detail-grid-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start; /* Prevent cards from stretching to match heights */
}

/* Full-width row variant */
.ts-detail-grid-row.ts-detail-grid-full {
  grid-template-columns: 1fr;
}

/* Cards within the detail layout - consistent sizing */
.ts-detail-card {
  height: auto;
  min-height: 0;
  align-self: start;
}

/* Full-width card variant (for Danger Zone) */
.ts-detail-card-full {
  max-width: 100%;
  width: 100%;
}

/* Placeholder for grid alignment when conditional content is hidden */
.ts-detail-placeholder {
  display: none;
}

/* Override old row styles when inside detail layout */
.ts-team-detail-layout .ts-cars-card,
.ts-team-detail-layout .ts-pending-invites-card {
  max-width: none;
  width: 100%;
  height: auto;
  min-height: 0;
}

/* Animation delays for staggered entrance */
.ts-team-detail-layout .ts-detail-grid-row:nth-child(1) {
  animation: fadeSlideIn 0.3s ease forwards;
}

.ts-team-detail-layout .ts-detail-grid-row:nth-child(2) {
  animation: fadeSlideIn 0.3s ease 0.05s forwards;
  opacity: 0;
}

.ts-team-detail-layout .ts-detail-grid-row:nth-child(3) {
  animation: fadeSlideIn 0.3s ease 0.1s forwards;
  opacity: 0;
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive: Stack to single column on tablets */
@media (max-width: 900px) {
  .ts-detail-grid-row {
    grid-template-columns: 1fr;
  }
  
  .ts-team-detail-layout {
    padding: 20px;
    gap: 20px;
  }
}

/* Responsive: Mobile adjustments */
@media (max-width: 640px) {
  .ts-team-detail-layout {
    padding: 16px;
    gap: 16px;
  }
  
  .ts-detail-grid-row {
    gap: 16px;
  }
}

/* ============================= */
/* TEAM INVITE STYLES            */
/* ============================= */

/* Modal Pattern - Fixed position centered overlay with backdrop */
/* Use .ts-modal-overlay-fixed for standalone modals that don't use .ts-modal-overlay wrapper */
.ts-modal.ts-modal-overlay-fixed,
#inviteModal.ts-modal,
#addCarModal.ts-modal,
#editCarModal.ts-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  transform: none !important;
  max-width: none !important;
  max-height: none !important;
  width: 100% !important;
  height: 100% !important;
  box-shadow: none !important;
}

/* Allow standalone fixed modals to be shown via .active */
.ts-modal.ts-modal-overlay-fixed.active {
  display: flex;
}

.ts-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.85);
  backdrop-filter: blur(4px);
}

.ts-modal-content {
  position: relative;
  background: rgba(15, 23, 42, 0.98);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 16px;
  width: 90%;
  max-width: 480px;
  max-height: 85vh;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
  animation: modalSlideIn 0.2s ease;
}

/* Budget categories modal tweaks */
#ts-categories-modal .ts-modal-content {
  max-width: 600px;
}

.ts-form-input.ts-form-input-compact {
  padding: 6px 8px;
}

.ts-categories-add-form {
  margin-bottom: 20px;
}

.ts-categories-add-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.ts-categories-add-row .ts-categories-field-name {
  flex: 2;
}

.ts-categories-add-row .ts-categories-field-amount {
  flex: 1;
}

.ts-categories-add-row .ts-categories-add-btn {
  white-space: nowrap;
}

.ts-categories-grid-header,
.ts-categories-grid-row {
  display: grid;
  grid-template-columns: 1fr 120px 80px 90px;
  gap: 12px;
  padding: 10px 12px;
  align-items: center;
}

.ts-categories-grid-header {
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
}

.ts-categories-grid-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ts-categories-col-right {
  text-align: right;
}

.ts-categories-col-center {
  text-align: center;
}

.ts-category-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.ts-category-input {
  background: transparent;
  border-color: transparent;
}

.ts-category-input:focus {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.25);
}

.ts-categories-grid-row.is-dirty .ts-category-input {
  border-color: var(--ts-accent);
}

@keyframes modalSlideIn {
  from {
    transform: scale(0.95) translateY(20px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.ts-modal-content .ts-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.ts-modal-content .ts-modal-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #f9fafb;
}

/* Form styles for invite modal */
.ts-form-group {
  margin-bottom: 20px;
}

.ts-form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #e5e7eb;
  margin-bottom: 8px;
}

.ts-form-input,
.ts-form-select,
.ts-form-textarea {
  width: 100%;
  padding: 12px 16px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  color: #f9fafb;
  font-size: 14px;
  font-family: inherit;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.ts-form-input:focus,
.ts-form-select:focus,
.ts-form-textarea:focus {
  outline: none;
  border-color: #ff7a32;
  box-shadow: 0 0 0 3px rgba(255, 122, 50, 0.15);
}

.ts-form-input::placeholder,
.ts-form-textarea::placeholder {
  color: rgba(148, 163, 184, 0.5);
}

.ts-form-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}

.ts-form-select option {
  background: #1e293b;
  color: #f9fafb;
}

.ts-form-textarea {
  resize: vertical;
  min-height: 80px;
}

.ts-form-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #9ca3af;
}

.ts-modal-content form {
  padding: 24px;
}

.ts-modal-content .ts-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid rgba(148, 163, 184, 0.1);
  margin-top: 0;
}

/* Pending Invites List */
.ts-card-full {
  grid-column: 1 / -1;
}

.ts-invite-count {
  font-size: 13px;
  color: #9ca3af;
  font-weight: 400;
}

/* Pending Invites SECTION - legacy styles for pages not using .ts-team-detail-layout */
.ts-dash-row-invites {
  flex: none;
  flex-grow: 0;
  align-self: flex-start;
  align-items: start;
  grid-auto-rows: min-content;
  height: auto;
  min-height: 0;
}

/* Pending Invites card - content-driven height (legacy) */
.ts-dash-row-invites .ts-card.ts-pending-invites-card {
  height: auto;
  min-height: 0;
  align-self: start;
  max-width: 600px;
  width: 100%;
}

/* Container should be content-driven */
.ts-pending-invites-container {
  min-height: 0 !important;
  height: auto !important;
}

/* Container should be content-driven */
.ts-pending-invites-container {
  /* No min-height, let content determine height */
  min-height: 0;
}

/* Empty state: compact, centered within small container */
.ts-pending-invites-container .ts-empty-state {
  padding: 24px 20px;
  text-align: center;
  color: #9ca3af;
  font-size: 14px;
  /* No large min-height - just natural padding */
}

/* Loading state: also compact */
.ts-pending-invites-container .ts-loading {
  padding: 24px 20px;
  text-align: center;
}

.ts-invite-list {
  list-style: none;
  padding: 0;
  margin: 0;
  /* Only apply max-height when there are invites */
  max-height: 320px;
  overflow-y: auto;
}

.ts-invite-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}

.ts-invite-item:last-child {
  border-bottom: none;
}

.ts-invite-item.ts-invite-accepted,
.ts-invite-item.ts-invite-expired,
.ts-invite-item.ts-invite-revoked {
  opacity: 0.6;
}

.ts-invite-info {
  flex: 1;
  min-width: 0;
}

.ts-invite-email {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #f9fafb;
  margin-bottom: 4px;
}

.ts-invite-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #9ca3af;
}

.ts-invite-date,
.ts-invite-expiry {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ts-invite-expiry {
  color: #fbbf24;
}

.ts-invite-status {
  flex-shrink: 0;
}

.ts-status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ts-status-pending {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

.ts-status-accepted {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.ts-status-expired {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
}

.ts-status-revoked {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.ts-invite-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.ts-btn-xs {
  padding: 6px 10px;
  font-size: 12px;
}

.ts-btn-danger-text {
  color: #f87171;
}

.ts-btn-danger-text:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

/* Empty/Error states */
.ts-empty-state,
.ts-error-state {
  padding: 20px 16px;
  text-align: center;
  color: #9ca3af;
  font-size: 14px;
}

.ts-loading {
  padding: 20px 16px;
  text-align: center;
  color: #9ca3af;
  font-size: 14px;
}

.ts-link {
  background: none;
  border: none;
  color: #ff7a32;
  cursor: pointer;
  font-size: inherit;
  text-decoration: underline;
}

.ts-link:hover {
  color: #e45e1b;
}

/* ============================= */
/* CARS PANEL STYLES             */
/* ============================= */

/* Legacy styles for pages not using .ts-team-detail-layout */
.ts-dash-row-cars {
  flex: none;
  flex-grow: 0;
  align-self: flex-start;
  height: auto;
  min-height: 0;
}

.ts-dash-row-cars .ts-cars-card {
  height: auto;
  min-height: 0;
  align-self: start;
  max-width: 600px;
  width: 100%;
}

.ts-car-count {
  font-size: 13px;
  color: #9ca3af;
  font-weight: 400;
}

.ts-cars-list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ts-car-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  transition: background 0.15s ease;
}

.ts-car-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.ts-car-row.ts-car-archived {
  opacity: 0.6;
  background: rgba(148, 163, 184, 0.05);
}

.ts-car-row.ts-car-default {
  border-left: 3px solid #ff7a32;
}

.ts-car-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.ts-car-number-lg {
  font-size: 18px;
  font-weight: 700;
  color: #ff7a32;
  min-width: 50px;
}

.ts-car-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ts-car-name-text {
  font-size: 14px;
  font-weight: 500;
  color: #f9fafb;
}

.ts-car-class-text {
  font-size: 12px;
  color: #9ca3af;
}

.ts-car-badges {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.ts-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ts-badge-default {
  background: rgba(255, 122, 50, 0.15);
  color: #ff7a32;
  border: 1px solid rgba(255, 122, 50, 0.3);
}

.ts-badge-archived {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.ts-car-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.ts-car-row:hover .ts-car-actions {
  opacity: 1;
}

.ts-cars-empty {
  padding: 24px 16px;
  text-align: center;
  color: #9ca3af;
  font-size: 14px;
}

/* Modal size variant - applies to content inside modal */
.ts-modal-sm .ts-modal-content {
  max-width: 420px;
}

/* Toast notifications */
.ts-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: #1e293b;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  z-index: 9999;
  animation: toastSlideIn 0.3s ease;
}

@keyframes toastSlideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.ts-toast-success {
  border-color: rgba(34, 197, 94, 0.3);
}

.ts-toast-success::before {
  content: "✓";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
}

.ts-toast-error {
  border-color: rgba(239, 68, 68, 0.3);
}

.ts-toast-error::before {
  content: "!";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
}

.ts-toast-message {
  color: #f9fafb;
  font-size: 14px;
}

.ts-toast-close {
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.ts-toast-close:hover {
  color: #f9fafb;
}

/* Responsive for invites */
@media (max-width: 640px) {
  .ts-invite-item {
    flex-wrap: wrap;
  }

  .ts-invite-actions {
    width: 100%;
    margin-top: 12px;
  }

  .ts-modal-content {
    width: 95%;
    max-height: 90vh;
  }

  .ts-toast {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }
}

.ts-invites-empty {
  padding: 24px 20px;
  text-align: center;
  color: #9ca3af;
  font-size: 14px;

  /* critical: prevent the full-page empty state behavior */
  min-height: 0;
}

/* ============================= */
/* TEAM CREATE WIZARD STYLES     */
/* ============================= */

.ts-wizard-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.ts-wizard-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  opacity: 0.5;
  transition: all 0.2s ease;
}

.ts-wizard-step.active {
  opacity: 1;
}

.ts-wizard-step.completed {
  opacity: 0.8;
}

.ts-wizard-step-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
  transition: all 0.2s ease;
}

.ts-wizard-step.active .ts-wizard-step-number {
  background: #ff7a32;
  color: #fff;
}

.ts-wizard-step.completed .ts-wizard-step-number {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.ts-wizard-step-label {
  font-size: 14px;
  font-weight: 500;
  color: #9ca3af;
}

.ts-wizard-step.active .ts-wizard-step-label {
  color: #f9fafb;
}

.ts-wizard-step-divider {
  width: 40px;
  height: 2px;
  background: rgba(148, 163, 184, 0.2);
  margin: 0 8px;
}

.ts-wizard-panel-title {
  font-size: 18px;
  font-weight: 600;
  color: #f9fafb;
  margin: 0 0 8px 0;
}

.ts-wizard-panel-desc {
  font-size: 14px;
  color: #9ca3af;
  margin: 0 0 20px 0;
}

/* Wizard Cars List */
.ts-wizard-cars-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.ts-wizard-car-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  transition: background 0.15s ease;
}

.ts-wizard-car-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.ts-wizard-car-default {
  border-left: 3px solid #ff7a32;
}

.ts-wizard-car-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.ts-wizard-car-number {
  font-size: 16px;
  font-weight: 700;
  color: #ff7a32;
  min-width: 45px;
}

.ts-wizard-car-details {
  font-size: 14px;
  color: #9ca3af;
}

.ts-wizard-car-badges {
  flex-shrink: 0;
}

.ts-wizard-car-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.ts-wizard-car-item:hover .ts-wizard-car-actions {
  opacity: 1;
}

.ts-wizard-cars-empty {
  padding: 24px 16px;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
  background: rgba(148, 163, 184, 0.05);
  border-radius: 10px;
  border: 1px dashed rgba(148, 163, 184, 0.2);
  margin-bottom: 16px;
}

/* Add Car Inline Form */
.ts-wizard-add-car {
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}

.ts-wizard-add-car-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  cursor: pointer;
  color: #ff7a32;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.15s ease;
}

.ts-wizard-add-car-header:hover {
  background: rgba(255, 122, 50, 0.08);
}

.ts-wizard-add-car-form {
  padding: 16px;
  background: rgba(15, 23, 42, 0.5);
  border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.ts-wizard-add-car-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

/* Form third-width groups */
.ts-form-group-third {
  flex: 1;
  min-width: 0;
}

/* Form Error Message */
.ts-form-error-message {
  padding: 12px 16px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  color: #f87171;
  font-size: 14px;
  margin-bottom: 16px;
}

/* Input error state */
.ts-input-error {
  border-color: rgba(239, 68, 68, 0.5) !important;
}

.ts-input-error:focus {
  border-color: #f87171 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

/* Responsive wizard */
@media (max-width: 640px) {
  .ts-wizard-steps {
    flex-direction: column;
    gap: 8px;
  }

  .ts-wizard-step-divider {
    width: 2px;
    height: 20px;
  }

  .ts-wizard-add-car-form .ts-form-row {
    flex-direction: column;
  }
}

/* =============================================
   ADD PART MODAL STYLES
   ============================================= */

/* Checkbox group for "Track life by" */
.ts-checkbox-group {
  display: flex;
  gap: 24px;
  padding: 8px 0;
}

.ts-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #d1d5db;
}

.ts-checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #3b82f6;
  cursor: pointer;
}

/* Threshold sections */
.ts-threshold-section {
  padding: 16px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  margin-top: 8px;
}

.ts-form-section-title {
  font-size: 13px;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 12px 0;
}

/* 4-column row for thresholds */
.ts-form-row-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

/* Smaller inputs for threshold values */
.ts-input-sm {
  padding: 8px 12px;
  font-size: 14px;
}

.ts-label-sm {
  font-size: 12px;
}

/* Form hint text */
.ts-form-hint {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}

/* Invalid input styling */
.ts-input-invalid {
  border-color: rgba(239, 68, 68, 0.5) !important;
}

.ts-input-invalid:focus {
  border-color: #f87171 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

/* Modal loading state */
.ts-modal-loading {
  text-align: center;
  padding: 40px 20px;
  color: #9ca3af;
}

/* Button link style (for empty state CTA) */
.ts-btn-link {
  background: none;
  border: none;
  color: #60a5fa;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  transition: color 0.2s ease;
}

.ts-btn-link:hover {
  color: #93c5fd;
  text-decoration: underline;
}

.ts-btn-link:focus {
  outline: none;
  text-decoration: underline;
}

/* Form container for Add Part modal */
.ts-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Responsive for threshold grid */
@media (max-width: 600px) {
  .ts-form-row-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .ts-checkbox-group {
    flex-direction: column;
    gap: 12px;
  }
}

/* =============================
   URL ENRICHMENT STYLES
   ============================= */

/* Input with status indicator */
.ts-input-with-status {
  position: relative;
}

/* Enrichment status indicator */
.ts-enrichment-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 13px;
  color: #94a3b8;
}

.ts-enrichment-status.ts-enrichment-pending .ts-enrichment-text {
  color: #94a3b8;
}

.ts-enrichment-status.ts-enrichment-success .ts-enrichment-text {
  color: #22c55e;
}

.ts-enrichment-status.ts-enrichment-failed .ts-enrichment-text {
  color: #f59e0b;
}

/* Hide spinner when not pending */
.ts-enrichment-status.ts-enrichment-success .ts-spinner-sm,
.ts-enrichment-status.ts-enrichment-failed .ts-spinner-sm {
  display: none;
}

/* Small spinner for inline use */
.ts-spinner-sm {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(148, 163, 184, 0.25);
  border-top-color: #60a5fa;
  border-radius: 50%;
  animation: ts-spin 0.8s linear infinite;
}

@keyframes ts-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Enriched image preview */
.ts-enriched-preview {
  display: flex;
  justify-content: center;
  padding: 12px 0;
}

.ts-enriched-image {
  max-width: 120px;
  max-height: 120px;
  border-radius: 8px;
  object-fit: contain;
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Prefilled field highlight */
.ts-input.ts-prefilled {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.35);
}

.ts-input.ts-prefilled:focus {
  border-color: #3b82f6;
}


/* =============================
   BUDGET PAGE STYLES
   ============================= */

.ts-budget-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

/* Page Header */
.ts-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}

.ts-page-header-text {
  flex: 1;
  min-width: 200px;
}

.ts-page-title {
  font-size: 24px;
  font-weight: 700;
  color: #f9fafb;
  margin: 0 0 4px;
}

.ts-page-subtitle {
  font-size: 14px;
  color: rgba(148, 163, 184, 0.9);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ts-page-header-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* Breadcrumb */
.ts-breadcrumb {
  font-size: 13px;
  color: rgba(148, 163, 184, 0.7);
  margin-bottom: 8px;
}

.ts-breadcrumb a {
  color: #3b82f6;
  text-decoration: none;
}

.ts-breadcrumb a:hover {
  text-decoration: underline;
}

.ts-breadcrumb-sep {
  margin: 0 8px;
  color: rgba(148, 163, 184, 0.4);
}

/* Budget Status Tags */
.ts-budget-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ts-budget-status-draft {
  background: rgba(148, 163, 184, 0.2);
  color: #94a3b8;
}

.ts-budget-status-active {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.ts-budget-status-closed {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}

.ts-budget-status-archived {
  background: rgba(107, 114, 128, 0.2);
  color: #6b7280;
}

.ts-budget-date-range {
  color: rgba(148, 163, 184, 0.7);
}

/* Budget Card Grid */
.ts-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.ts-budget-card-wrapper {
  position: relative;
}

.ts-budget-card {
  display: block;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ts-budget-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.ts-budget-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.ts-budget-card-title {
  font-size: 16px;
  font-weight: 600;
  color: #f9fafb;
  margin: 0;
}

.ts-budget-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ts-budget-amounts {
  display: flex;
  gap: 24px;
}

.ts-budget-amount {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ts-budget-amount-label {
  font-size: 11px;
  color: rgba(148, 163, 184, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ts-budget-amount-value {
  font-size: 18px;
  font-weight: 600;
  color: #f9fafb;
}

.ts-budget-card-dates {
  font-size: 12px;
  color: rgba(148, 163, 184, 0.6);
  margin: 0;
}

.ts-budget-card-action {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 2;
}

.ts-budget-card-inline-action {
  position: absolute;
  right: 16px;
  top: 52px;
  z-index: 2;
}

.ts-budget-set-active-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #f9fafb;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.ts-budget-set-active-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.24);
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45);
}

.ts-budget-set-active-btn:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.7);
  outline-offset: 2px;
}

/* Budget Summary Grid */
.ts-budget-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.ts-budget-summary-card {
  text-align: center;
  padding: 16px 12px;
}

.ts-budget-summary-label {
  font-size: 11px;
  color: rgba(148, 163, 184, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.ts-budget-summary-value {
  font-size: 24px;
  font-weight: 700;
  color: #f9fafb;
}

.ts-text-success {
  color: #22c55e;
}

.ts-text-danger {
  color: #ef4444;
}

.ts-text-muted {
  color: rgba(148, 163, 184, 0.5);
}

/* Budget Snapshot Card */
.ts-budget-snapshot-card {
  margin-bottom: 24px;
}

.ts-budget-snapshot-card .ts-card-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.ts-card-title-period {
  font-size: 11px;
  font-weight: 400;
  color: rgba(148, 163, 184, 0.7);
  text-transform: none;
  letter-spacing: 0;
}

.ts-budget-snapshot-stats {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.ts-budget-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ts-budget-stat-value {
  font-size: 16px;
  font-weight: 600;
  color: #f9fafb;
}

.ts-budget-stat-label {
  font-size: 11px;
  color: rgba(148, 163, 184, 0.7);
  text-transform: uppercase;
}

/* Line Items Card */
.ts-budget-line-items-card {
  margin-bottom: 24px;
}

.ts-budget-line-items-card .ts-card-header {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 0;
}

.ts-card-title {
  font-size: 14px;
  font-weight: 600;
  color: #f9fafb;
  margin: 0;
}

/* Line Item Status */
.ts-line-item-status {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.ts-line-item-status-planned {
  background: rgba(148, 163, 184, 0.2);
  color: #94a3b8;
}

.ts-line-item-status-committed {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

.ts-line-item-status-paid {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.ts-line-item-status-cancelled {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

/* Budget Notes */
.ts-budget-notes {
  font-size: 14px;
  color: rgba(209, 213, 219, 0.9);
  line-height: 1.6;
}

/* Empty State Card */
.ts-empty-state-card {
  text-align: center;
  padding: 48px 24px;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}

.ts-empty-state-card .ts-empty-state-icon {
  margin-bottom: 16px;
  color: rgba(148, 163, 184, 0.5);
}

.ts-empty-state-card .ts-empty-state-title {
  font-size: 18px;
  font-weight: 600;
  color: #f9fafb;
  margin: 0 0 8px;
}

.ts-empty-state-card .ts-empty-state-text {
  font-size: 14px;
  color: rgba(148, 163, 184, 0.7);
  margin: 0 0 20px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================= */
/* GRIDSTACK DASHBOARD LAYOUT */
/* ============================= */

/* Force gutters via Gridstack 10.x approach: inset on item-content (desktop only)
   On mobile, Gridstack one-column mode should not be fought by positional offsets. */
@media (min-width: 1024px) {
  .grid-stack > .grid-stack-item > .grid-stack-item-content {
    top: 8px;
    right: 8px;
    bottom: 8px;
    left: 8px;
  }
}

/* Card wrappers inside grid items - fill the content area */
.grid-stack-item-content > .ts-card,
.grid-stack-item-content > .ts-widget,
.grid-stack-item-content > section {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  min-width: 0;
}

/* Customize Layout Controls */
.ts-dash-customize {
  display: flex;
  align-items: center;
  gap: 8px;
}

#ts-customize-toggle[data-active="true"] {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
  color: #3b82f6;
}

#ts-customize-toggle svg,
#ts-reset-layout svg {
  margin-right: 6px;
}

/* Edit Mode Banner */
.ts-edit-mode-banner {
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.15) 0%, rgba(99, 102, 241, 0.15) 100%);
  border-bottom: 1px solid rgba(59, 130, 246, 0.3);
  padding: 12px 40px;
  display: none;
  align-items: center;
  justify-content: center;
}

.ts-edit-mode-content {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #93c5fd;
  font-size: 14px;
  font-weight: 500;
}

.ts-edit-mode-content svg {
  flex-shrink: 0;
}

/* Gridstack drag handles (visible in edit mode) */
.grid-stack.grid-stack-animate .grid-stack-item {
  transition: left 0.3s, top 0.3s, width 0.3s, height 0.3s;
}

/* Only show move cursor in edit mode */
.grid-stack:not(.grid-stack-static) .grid-stack-item {
  cursor: move;
}

/* Edit mode only - show borders on the visible widget wrapper (not the grid node) */
.grid-stack:not(.grid-stack-static) .grid-stack-item-content > * {
  cursor: default;
  border: 2px solid rgba(59, 130, 246, 0.4);
  border-radius: 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.grid-stack:not(.grid-stack-static) .grid-stack-item:hover .grid-stack-item-content > * {
  border-color: rgba(59, 130, 246, 0.6);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

/* Override Gridstack default styles */
.grid-stack-item > .ui-resizable-handle {
  z-index: 10;
}

/* Hide all resize handles in static (view) mode */
.grid-stack.grid-stack-static .ui-resizable-handle {
  display: none !important;
}

/* Show resize handles only in edit mode */
.grid-stack:not(.grid-stack-static) .ui-resizable-handle {
  opacity: 0.5;
  transition: opacity 0.2s;
}

.grid-stack:not(.grid-stack-static) .grid-stack-item:hover .ui-resizable-handle {
  opacity: 1;
}

.grid-stack:not(.grid-stack-static) .ui-resizable-se,
.grid-stack:not(.grid-stack-static) .ui-resizable-s,
.grid-stack:not(.grid-stack-static) .ui-resizable-e,
.grid-stack:not(.grid-stack-static) .ui-resizable-sw,
.grid-stack:not(.grid-stack-static) .ui-resizable-w {
  background: none;
}

.grid-stack:not(.grid-stack-static) .ui-resizable-se {
  width: 24px;
  height: 24px;
  right: 0;
  bottom: 0;
}

.grid-stack:not(.grid-stack-static) .ui-resizable-se::after {
  content: '';
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 14px;
  height: 14px;
  border-right: 3px solid rgba(59, 130, 246, 0.8);
  border-bottom: 3px solid rgba(59, 130, 246, 0.8);
  border-radius: 0 0 4px 0;
}

/* Recent Events - Fix Grid Layout and Overflow */
.ts-recent-events-list {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0;
  padding: 0;
}

.ts-recent-event-row {
  min-width: 700px;
}

.ts-recent-event-row--header .ts-recent-event-cell {
  white-space: nowrap !important;
}

.ts-recent-event-name {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0;
}

/* Mobile: hide customize controls */
@media (max-width: 1023px) {
  .ts-dash-customize {
    display: none !important;
  }
  
  .ts-edit-mode-banner {
    display: none !important;
  }
}

/* Gridstack placeholder */
.grid-stack-placeholder {
  background: rgba(59, 130, 246, 0.1) !important;
  border: 2px dashed rgba(59, 130, 246, 0.4) !important;
  border-radius: 12px !important;
}