/* Task4Today animation integration: safe, non-destructive mappings */
:root {
  --anim-brand: var(--brand, var(--primary, #1d9e75));
  --anim-brand-light: rgba(29, 158, 117, .12);
  --anim-success: #1d9e75;
}

button, .btn, [class*="-btn"], [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

/* Do not force position:relative on every button. Absolute-position controls
   (notably the date-picker clear X) must retain their authored position. */
.t4t-anim-button {
  transition: translate 140ms cubic-bezier(.22,1,.36,1), scale 140ms cubic-bezier(.22,1,.36,1), box-shadow 180ms ease, filter 180ms ease !important;
}
.t4t-anim-button:hover:not(:disabled):not([aria-disabled="true"]) {
  translate: 0 -1px;
  filter: brightness(1.025);
}
.t4t-anim-button:active:not(:disabled):not([aria-disabled="true"]) {
  translate: 0 0;
  scale: .97;
}
.t4t-ripple-static-host { position: relative !important; }
.t4t-ripple-host {
  overflow: hidden !important;
  isolation: isolate;
}
.t4t-anim-button > i, .t4t-anim-button > svg,
.t4t-anim-button .bi, .t4t-anim-button [class*="icon"] {
  transition: transform 180ms cubic-bezier(.22,1,.36,1), opacity 180ms ease;
}
.t4t-anim-button:hover > i, .t4t-anim-button:hover > svg,
.t4t-anim-button:hover .bi, .t4t-anim-button:hover [class*="icon"] {
  transform: translateY(-1px) scale(1.08);
}

.t4t-icon-control:hover:not(:disabled) {
  box-shadow: 0 0 0 3px rgba(29, 158, 117, .10);
}


/* User-managed Status/Priority colors must win over legacy semantic pill
   selectors in ui-final-fixes.css that use !important. */
.pill.t4t-managed-field-pill {
  background: var(--t4t-pill-bg, rgba(107,114,128,.16)) !important;
  color: var(--t4t-pill-color, #6b7280) !important;
  border-color: var(--t4t-pill-border, transparent) !important;
}

/* Calendar clear control stays centered inside its date entry field. */
.asana-datepicker .asana-dp-clear-entry,
.asana-datepicker .asana-dp-clear-entry.t4t-anim-button {
  position: absolute !important;
  right: 5px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  translate: none !important;
  scale: 1 !important;
  margin: 0 !important;
}

.t4t-anim-card {
  transition: translate 180ms cubic-bezier(.22,1,.36,1), box-shadow 180ms ease, border-color 180ms ease !important;
}
.t4t-anim-card:hover {
  translate: 0 -2px;
}

/* Table rows/section names and dashboard widgets must not shift while hovered.
   Stable geometry is required for readable names and drag-and-drop. */
.t4t-stable-hover:not(.dragging):not(.widget-dragging):hover,
.task-row:not(.dragging):hover,
.section-header:not(.dragging):hover,
.section-header .section-title,
.section-header:hover .section-title,
.dash-chart-card:not(.widget-dragging):hover,
.dash-kpi-card:hover,
.dash-add-widget-card:hover,
.manage-widget-row:hover,
.widget-picker-item:hover {
  translate: none !important;
  transform: none !important;
}

.section-header .section-title,
.section-header:hover .section-title {
  position: static !important;
  left: auto !important;
  margin-left: 0 !important;
  max-width: calc(100% - 110px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Keep table and dashboard drag handles calm until an actual drag starts. */
.section-header .t4t-drag-handle:hover,
.task-row .t4t-drag-handle:hover,
.dash-chart-card .t4t-drag-handle:hover,
.manage-widgets-modal .t4t-drag-handle:hover {
  transform: none !important;
}

.t4t-anim-input {
  transition: border-color 170ms ease, box-shadow 170ms ease, background-color 170ms ease !important;
}
.t4t-anim-input:focus {
  box-shadow: 0 0 0 3px rgba(29, 158, 117, .11) !important;
}

.t4t-anim-tab {
  transition: color 170ms ease, background-color 170ms ease, translate 170ms ease !important;
}
.t4t-anim-tab:hover { translate: 0 -1px; }

.t4t-drag-handle {
  transition: transform 160ms ease, opacity 160ms ease !important;
}
.t4t-drag-handle:hover { transform: scale(1.12); opacity: 1 !important; }
.t4t-drag-handle:active { cursor: grabbing !important; transform: scale(.96) rotate(-2deg); }

.t4t-search-active { position: relative; }
.t4t-search-active::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  right: 10px;
  top: 50%;
  margin-top: -6px;
  border: 2px solid rgba(29,158,117,.25);
  border-top-color: var(--anim-brand);
  border-radius: 50%;
  animation: animSpin 700ms linear infinite;
  pointer-events: none;
}

/* Empty Favorites and Trash states use the animation kit's gentle float. */
.starred-view .team-empty-state.starred-empty > i,
.trash-page .team-empty-state.starred-empty > i,
.archived-projects-page .team-empty-state.starred-empty > i {
  will-change: transform;
}

/* Pulse only online/active status dots. The animation uses box-shadow rather
   than pseudo-elements so it also works on dots that disable ::before/::after. */
.t4t-presence-pulse {
  animation: t4tPresenceRing 2s ease-out infinite !important;
  overflow: visible !important;
}
@keyframes t4tPresenceRing {
  0% {
    outline: 0 solid rgba(11, 133, 147, .50);
    outline-offset: 0;
  }
  68% {
    outline: 4px solid rgba(11, 133, 147, .16);
    outline-offset: 2px;
  }
  100% {
    outline: 1px solid rgba(11, 133, 147, 0);
    outline-offset: 7px;
  }
}

/* The kit's priority pulse is intentionally limited to High/Urgent badges. */
.anim-badge-pulse {
  border-radius: 999px;
  will-change: box-shadow;
}
.anim-badge-pulse.t4t-priority-urgent {
  --t4t-priority-ring: rgba(239, 68, 68, .42);
}

.anim-urgency-flash,
.t4t-due-overdue.anim-urgency-flash {
  border-radius: 4px;
  padding-inline: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .t4t-anim-button, .t4t-anim-card, .t4t-anim-input, .t4t-anim-tab, .t4t-drag-handle,
  .t4t-presence-pulse, .anim-badge-pulse, .anim-float, .anim-urgency-flash {
    animation: none !important;
    transition-duration: .01ms !important;
    translate: none !important;
    scale: none !important;
    transform: none !important;
  }
  .t4t-search-active::after { animation: none !important; }
}


/* Organization/member validation: the actual invalid control must stay red
   even while focused. These selectors intentionally outrank the modal theme's
   more-specific !important border and the shared green input focus glow. */
html body .tm-page-modal-body .form-group input[aria-invalid="true"],
html body .tm-page-modal-body .form-group select[aria-invalid="true"],
html body .tm-page-modal-body .form-group textarea[aria-invalid="true"],
html body input.t4t-anim-input[aria-invalid="true"],
html body select.t4t-anim-input[aria-invalid="true"],
html body textarea.t4t-anim-input[aria-invalid="true"] {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14) !important;
  outline: none !important;
}

html body .tm-page-modal-body .form-group input[aria-invalid="true"]:focus,
html body .tm-page-modal-body .form-group select[aria-invalid="true"]:focus,
html body .tm-page-modal-body .form-group textarea[aria-invalid="true"]:focus,
html body input.t4t-anim-input[aria-invalid="true"]:focus,
html body select.t4t-anim-input[aria-invalid="true"]:focus,
html body textarea.t4t-anim-input[aria-invalid="true"]:focus {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14) !important;
}

/* v141 - Softer sidebar click feedback.
   Keep a small click response, but remove the bright white blink/flash on the green sidebar. */
.sidebar .anim-ripple {
  background: rgba(255, 255, 255, .16) !important;
  animation: sidebarRippleSoft 260ms ease-out forwards !important;
}

@keyframes sidebarRippleSoft {
  from {
    transform: scale(0);
    opacity: .22;
  }
  to {
    transform: scale(1.75);
    opacity: 0;
  }
}

.sidebar .t4t-anim-button:active:not(:disabled):not([aria-disabled="true"]) {
  translate: 0 0 !important;
  scale: .99 !important;
}