/* ===== MATERIAL ICONS ===== */
.material-icons-outlined {
  font-family: 'Material Icons Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
}

/* ===== SIDEBAR ===== */
#sidebar {
  width: 260px;
  min-width: 260px;
  transition: width 200ms ease, min-width 200ms ease;
  overflow: hidden;
}

#sidebar.collapsed {
  width: 64px;
  min-width: 64px;
}

#sidebar .sidebar-label {
  transition: opacity 200ms ease, width 200ms ease;
  opacity: 1;
  white-space: nowrap;
  overflow: hidden;
}

#sidebar.collapsed .sidebar-label {
  opacity: 0;
  width: 0;
}

#sidebar .sidebar-logo-text {
  transition: opacity 200ms ease;
}

#sidebar.collapsed .sidebar-logo-text {
  opacity: 0;
  pointer-events: none;
}

#sidebar .sidebar-submenu {
  transition: max-height 200ms ease, opacity 200ms ease;
  max-height: 1000px; /* generous fallback before JS sets exact scrollHeight; must clear the tallest submenu so items aren't clipped */
  opacity: 1;
  overflow: hidden;
}

#sidebar.collapsed .sidebar-submenu {
  max-height: 0;
  opacity: 0;
}

/* ===== MOBILE SIDEBAR (off-canvas drawer) =====
   Below the `sm` breakpoint (640px, matching the topbar hamburger which is
   `sm:hidden`), the sidebar becomes a fixed drawer that is hidden by default
   and slides in when `.mobile-open` is toggled. The main content then occupies
   the full width because the drawer is taken out of the document flow. */
#mobile-sidebar-backdrop { display: none; }

@media (max-width: 639.98px) {
  #sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 260px;
    min-width: 260px;
    transform: translateX(-100%);
    transition: transform 220ms ease;
    z-index: 50;
  }
  /* Always show the full-width drawer on mobile, never the icon-only rail. */
  #sidebar.collapsed {
    width: 260px;
    min-width: 260px;
  }
  #sidebar.collapsed .sidebar-label {
    opacity: 1;
    width: auto;
  }
  #sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  }
  #mobile-sidebar-backdrop:not(.hidden) {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 40;
  }
}

/* ===== SLIDE-OVER ===== */
.slide-over-overlay {
  animation: fadeInOverlay 200ms ease-out forwards;
}

.slide-over-panel {
  animation: slideInFromRight 200ms ease-out forwards;
}

.slide-over-panel.closing {
  animation: slideOutToRight 200ms ease-in forwards;
}

@keyframes fadeInOverlay {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideInFromRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@keyframes slideOutToRight {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}

/* ===== MODAL ===== */
.modal-overlay {
  animation: modalFadeIn 150ms ease forwards;
}

.modal-panel {
  animation: modalScaleIn 150ms ease forwards;
}

.modal-panel.closing {
  animation: modalScaleOut 150ms ease forwards;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes modalScaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes modalScaleOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.95); }
}

/* ===== TOAST ===== */
#toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.toast-item {
  pointer-events: all;
  animation: toastSlideIn 200ms ease-out forwards;
  min-width: 280px;
  max-width: 400px;
}

.toast-item.dismissing {
  animation: toastSlideOut 200ms ease-in forwards;
}

@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes toastSlideOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(100%); }
}

/* ===== PAGE TRANSITION ===== */
.page-fade-in {
  animation: pageFadeIn 150ms ease forwards;
}

@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ===== KANBAN DRAG ===== */
.kanban-card.dragging {
  opacity: 0.6;
  cursor: grabbing;
}

.kanban-column.drag-over {
  border: 2px solid var(--c-primary) !important;
  background-color: color-mix(in srgb, var(--c-primary) 10%, transparent);
}

/* ===== KPI TREND ARROW ===== */
@keyframes trendBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}

.trend-arrow {
  animation: trendBounce 600ms ease 300ms 2;
}

/* ===== URGENCY CRITICAL PULSE ===== */
@keyframes pulse-magenta {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-accent-magenta) 40%, transparent); }
  50%       { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-accent-magenta) 0%, transparent); }
}

.pulse-magenta {
  animation: pulse-magenta 1.5s infinite;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--c-surface-2);
}

::-webkit-scrollbar-thumb {
  background: var(--c-primary);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--c-primary-hover);
}

/* ===== RANGE / SLIDER ===== */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--c-border-strong);
  border-radius: 2px;
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c-primary);
  cursor: pointer;
  border: 2px solid var(--c-surface);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c-primary);
  cursor: pointer;
  border: 2px solid var(--c-surface);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* ===== SKELETON PULSE ===== */
@keyframes skeletonPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

.skeleton-pulse {
  animation: skeletonPulse 1.5s ease-in-out infinite;
  background: var(--c-surface-2);
  border-radius: 4px;
}

/* ===== PRINT ===== */
@media print {
  #sidebar,
  #topbar,
  .no-print {
    display: none !important;
  }

  #main {
    margin-left: 0 !important;
    padding: 0 !important;
  }

  table thead {
    display: table-header-group;
  }

  table tr {
    page-break-inside: avoid;
  }

  body {
    background: white;
    color: black;
  }
}

/* ===== SIDEBAR COLLAPSED TOOLTIPS ===== */
#sidebar-tooltip {
  position: fixed;
  background: #111827;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  transition: opacity 100ms ease;
}

#sidebar-tooltip::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-right-color: #111827;
}

/* ===== MISC UTILITIES ===== */
.nav-item-active {
  background-color: rgba(19, 153, 149, 0.15);
  color: #4FD6D0;   /* teal-light: brand #139995 was 2.63:1 on this tint (2026-10-01) */
}

.nav-item-active .material-icons-outlined {
  color: #4FD6D0;
}

.lead-card {
  cursor: grab;
}

.lead-card:active {
  cursor: grabbing;
}

/* Heatmap cell */
.heatmap-cell {
  transition: background-color 200ms ease;
}

/* Inline edit */
.inline-edit-field {
  cursor: pointer;
  border-bottom: 1px dashed var(--c-border-strong);
  transition: border-color 150ms ease;
}

.inline-edit-field:hover {
  border-bottom-color: var(--c-primary);
}

/* ===== REDUCED MOTION =====
   Kill decorative/infinite animation for users who ask for it. Skeletons
   stay visible (static), toasts/modals still appear (instantly). The
   transition clamp keeps transitionend firing so no JS flow breaks. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .pulse-magenta, .skeleton-pulse, .trend-arrow {
    animation: none !important;
  }
}

/* ===== HELP ARTICLE PROSE ===== */
/* Scoped so it only affects rendered help articles. Colours use the app's
   semantic theme tokens, so light/dark themes work automatically. */
.help-prose section { scroll-margin-top: 5rem; } /* clear the sticky top bar when anchor-scrolling */
.help-prose section + section { margin-top: 2rem; }
.help-prose h2 { font-size: 1.25rem; font-weight: 600; color: var(--c-fg); margin-bottom: .5rem; }
.help-prose h3 { font-size: 1.05rem; font-weight: 600; color: var(--c-fg); margin: 1.25rem 0 .25rem; }
.help-prose p { color: var(--c-fg-muted); margin-bottom: .75rem; line-height: 1.6; }
.help-prose ul, .help-prose ol { margin: .5rem 0 1rem 1.5rem; color: var(--c-fg-muted); }
.help-prose ul { list-style: disc; }
.help-prose ol { list-style: decimal; }
.help-prose li { margin-bottom: .35rem; line-height: 1.55; }
.help-prose strong { color: var(--c-fg); font-weight: 600; }
.help-prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; background: var(--c-surface-2); padding: .1em .35em; border-radius: .25rem; }
.help-prose a { color: var(--c-primary); text-decoration: underline; }

/* System Health gauges (dashboard card, utils/systemHealth.js) — a pure-CSS
   half-circle: a conic fill of --pct (0-100) over the border colour, masked to
   an arc. Colour follows the CHECK'S STATUS via the modifier class, so it
   themes with the tokens and needs no chart library. Ported from Daybook #223. */
.health-gauge {
  --gauge-fill: var(--c-success);
  width: 4.5rem;
  aspect-ratio: 2 / 1;
  border-radius: 9999px 9999px 0 0;
  background: conic-gradient(from -90deg at 50% 100%,
    var(--gauge-fill) calc(var(--pct, 0) * 0.5%), var(--c-border) 0 50%, transparent 0);
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent 58%, #000 59%);
          mask: radial-gradient(circle at 50% 100%, transparent 58%, #000 59%);
}
.health-gauge--warn { --gauge-fill: var(--c-warning); }
.health-gauge--fail { --gauge-fill: var(--c-danger); }
.health-gauge--skip { --gauge-fill: var(--c-fg-subtle); }