/* src/index.css or src/App.css */

:root {
  /* Primary Colors */
  --primary: 171, 82%, 45%; /* Teal-600 */
  --primary-foreground: 0, 0%, 100%; /* White */

  --primary-light: 171, 82%, 70%; /* Teal-400 */
  --primary-dark: 171, 82%, 35%; /* Teal-700 */

  /* Secondary Colors */
  --secondary: 207, 10%, 54%; /* Slate-600 */
  --secondary-foreground: 0, 0%, 100%; /* White */

  --secondary-light: 207, 10%, 75%; /* Slate-300 */
  --secondary-dark: 207, 10%, 40%; /* Slate-700 */

  /* Accent Colors */
  --accent: 171, 82%, 85%; /* Teal-100 */
  --accent-foreground: 207, 10%, 54%; /* Slate-600 */

  --accent-light: 171, 82%, 95%; /* Teal-50 */
  --accent-dark: 171, 82%, 80%; /* Teal-200 */

  /* Error Colors */
  --error: 0, 78%, 62%; /* Red-500 */
  --error-foreground: 0, 0%, 100%; /* White */

  /* Neutral Colors */
  --neutral: 0, 0%, 95%; /* Gray-50 */
  --neutral-foreground: 0, 0%, 10%; /* Gray-900 */

  /* Additional Colors (if needed) */
  --muted: 0, 0%, 80%; /* Gray-400 */
  --ring: 207, 10%, 54%; /* Slate-600 */
  --background: 0, 0%, 100%; /* White */
  --foreground: 0, 0%, 10%; /* Gray-900 */
  --border: 0, 0%, 85%; /* Gray-200 */
  --card: 0, 0%, 100%; /* White */
  --card-foreground: 0, 0%, 10%; /* Gray-900 */
  --popover: 0, 0%, 100%; /* White */
  --popover-foreground: 0, 0%, 10%; /* Gray-900 */
}

/* Fix for AIMarketplace overlapping sidebar */
.ai-marketplace-container {
  margin-left: 4.5rem; /* For collapsed sidebar */
}

@media (min-width: 640px) {
  .ai-marketplace-container {
    margin-left: 15rem; /* For expanded sidebar */
  }
}

/* ============================================
   Z-INDEX COMPONENT SELECTORS

   NOTE: Z-index CSS variables are defined in index.css
   These selectors apply the unified z-index scale:
   --z-sidebar: 1040, --z-navbar: 1050, --z-overlay: 1200,
   --z-modal: 1400, --z-tooltip: 1600, etc.
   ============================================ */

/* Apply z-index to common components */
.sidebar {
  z-index: var(--z-sidebar);
}

.navbar,
.topnav {
  z-index: var(--z-navbar);
}

.modal-backdrop {
  z-index: var(--z-overlay);
}

.modal {
  z-index: var(--z-modal);
}

.tooltip {
  z-index: var(--z-tooltip);
}

/* Widget positioning to prevent overlap */
.floating-widgets {
  pointer-events: none; /* Allow clicks to pass through container */
}

.floating-widgets > * {
  pointer-events: auto; /* But enable clicks on actual widgets */
}

/* Chat widget - bottom right */
.chat-widget {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: var(--z-chat-widget);
}

/* Feature tour - top right */
.feature-tour {
  position: fixed;
  top: 5rem; /* Below navbar */
  right: 1rem;
  z-index: var(--z-feature-tour);
}

/* Feature progress - bottom left */
.feature-progress {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: var(--z-feature-tour);
}

/* Command palette - centered */
.command-palette {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-command-palette);
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
  .feature-tour {
    top: 4rem; /* Adjust for mobile navbar */
    right: 0.5rem;
    max-width: calc(100vw - 1rem);
  }

  .feature-progress {
    left: 0.5rem;
    bottom: 5rem; /* Move up to avoid chat widget on mobile */
    max-width: calc(100vw - 1rem);
  }

  .chat-widget {
    bottom: 0.5rem;
    right: 0.5rem;
  }
}

/* Ensure widgets don't overlap with sidebar */
@media (min-width: 1024px) {
  .feature-progress {
    left: 17rem; /* Account for expanded sidebar */
  }

  /* When sidebar is collapsed */
  body.sidebar-collapsed .feature-progress {
    left: 5rem; /* Account for collapsed sidebar */
  }
}

/**
 * Affilync Calendar Theme - FullCalendar Overrides
 *
 * Matches the "Financial Edge" design system with:
 * - Dark terminal backgrounds (#0a0e1a)
 * - Glassmorphism effects
 * - Electric Blue primary (#0066e6)
 * - High contrast text (WCAG AAA)
 */

/* ====================
   ROOT VARIABLES
   ==================== */
.affilync-calendar {
  --fc-bg: #0a0e1a;
  --fc-bg-paper: #131825;
  --fc-bg-elevated: #1a2030;
  --fc-bg-panel: #232d42;
  --fc-border: rgba(255, 255, 255, 0.08);
  --fc-border-strong: rgba(0, 102, 230, 0.3);
  --fc-text-primary: #ffffff;
  --fc-text-secondary: #8892a6;
  --fc-text-disabled: #4d5666;
  --fc-primary: #0066e6;
  --fc-primary-light: #1a8aff;
  --fc-primary-dark: #0052b3;
  --fc-success: #00ff88;
  --fc-warning: #ffcc00;
  --fc-error: #ff3366;
  --fc-radius-sm: 0.25rem;
  --fc-radius-md: 0.5rem;
  --fc-radius-lg: 0.75rem;

  /* FullCalendar CSS Variables Override */
  --fc-border-color: var(--fc-border);
  --fc-button-bg-color: var(--fc-primary);
  --fc-button-border-color: var(--fc-primary);
  --fc-button-hover-bg-color: var(--fc-primary-dark);
  --fc-button-hover-border-color: var(--fc-primary-dark);
  --fc-button-active-bg-color: var(--fc-primary-dark);
  --fc-button-active-border-color: var(--fc-primary-dark);
  --fc-event-bg-color: var(--fc-primary);
  --fc-event-border-color: var(--fc-primary);
  --fc-event-text-color: #ffffff;
  --fc-today-bg-color: rgba(0, 102, 230, 0.1);
  --fc-neutral-bg-color: var(--fc-bg-paper);
  --fc-list-event-hover-bg-color: var(--fc-bg-elevated);
  --fc-page-bg-color: var(--fc-bg-paper);
  --fc-highlight-color: rgba(0, 102, 230, 0.15);
  --fc-now-indicator-color: var(--fc-primary);
}

/* ====================
   CUSTOM TOOLBAR
   ==================== */
.affilync-calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, rgba(19, 24, 37, 0.95) 0%, rgba(26, 32, 48, 0.95) 100%);
  border: 1px solid var(--fc-border);
  border-bottom: none;
  border-radius: var(--fc-radius-lg) var(--fc-radius-lg) 0 0;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

.affilync-calendar-toolbar-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.affilync-calendar-toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(0, 102, 230, 0.1);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-md);
  color: var(--fc-text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.affilync-calendar-toolbar-btn:hover {
  background: rgba(0, 102, 230, 0.2);
  border-color: var(--fc-border-strong);
}

.affilync-calendar-toolbar-btn:active {
  transform: scale(0.95);
}

.affilync-calendar-toolbar-title {
  font-family: 'Syne', 'DM Sans', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--fc-text-primary);
  letter-spacing: -0.02em;
}

.affilync-calendar-today-btn {
  padding: 0.5rem 1rem;
  background: rgba(0, 102, 230, 0.1);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-md);
  color: var(--fc-text-primary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.affilync-calendar-today-btn:hover {
  background: rgba(0, 102, 230, 0.2);
  border-color: var(--fc-border-strong);
}

.affilync-calendar-toolbar-views {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--fc-radius-md);
}

.affilync-calendar-view-btn {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: none;
  border-radius: var(--fc-radius-sm);
  color: var(--fc-text-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.affilync-calendar-view-btn:hover {
  color: var(--fc-text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.affilync-calendar-view-btn.active {
  background: var(--fc-primary);
  color: white;
}

/* ====================
   FULLCALENDAR CONTAINER
   ==================== */
.affilync-calendar .fc {
  background: var(--fc-bg-paper);
  border: 1px solid var(--fc-border);
  border-top: none;
  border-radius: 0 0 var(--fc-radius-lg) var(--fc-radius-lg);
  font-family:
    'DM Sans',
    system-ui,
    -apple-system,
    sans-serif;
  color: var(--fc-text-primary);
  overflow: hidden;
}

/* ====================
   HEADER CELLS
   ==================== */
.affilync-calendar .fc-col-header-cell {
  background: var(--fc-bg-elevated);
  border-color: var(--fc-border);
  padding: 0.75rem 0;
}

.affilync-calendar .fc-col-header-cell-cushion {
  color: var(--fc-text-secondary);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ====================
   DAY CELLS
   ==================== */
.affilync-calendar .fc-daygrid-day {
  background: var(--fc-bg-paper);
  border-color: var(--fc-border);
  transition: background-color 0.2s ease;
}

.affilync-calendar .fc-daygrid-day:hover {
  background: var(--fc-bg-elevated);
}

.affilync-calendar .fc-daygrid-day-number {
  color: var(--fc-text-primary);
  font-weight: 500;
  padding: 0.5rem;
}

.affilync-calendar .fc-day-today {
  background: rgba(0, 102, 230, 0.08) !important;
}

.affilync-calendar .fc-day-today .fc-daygrid-day-number {
  background: var(--fc-primary);
  color: white;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.affilync-calendar .fc-day-other .fc-daygrid-day-number {
  color: var(--fc-text-disabled);
}

/* ====================
   EVENTS
   ==================== */
.affilync-calendar .fc-event {
  border-radius: var(--fc-radius-sm);
  border: none;
  padding: 2px 6px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.affilync-calendar .fc-event:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.affilync-calendar .fc-event-title {
  font-weight: 500;
}

.affilync-calendar-event.event-published {
  background-color: var(--fc-success) !important;
  border-color: var(--fc-success) !important;
  color: #0a0e1a !important;
}

.affilync-calendar-event.event-failed {
  background-color: var(--fc-error) !important;
  border-color: var(--fc-error) !important;
}

.affilync-calendar-event.event-draft {
  background-color: var(--fc-text-disabled) !important;
  border: 1px dashed var(--fc-text-secondary) !important;
}

.affilync-calendar-event.event-scheduled {
  background-color: var(--fc-primary) !important;
  border-color: var(--fc-primary) !important;
}

/* More events link */
.affilync-calendar .fc-daygrid-more-link {
  color: var(--fc-primary);
  font-weight: 600;
  font-size: 0.75rem;
}

.affilync-calendar .fc-daygrid-more-link:hover {
  color: var(--fc-primary-light);
}

/* ====================
   TIME GRID VIEW
   ==================== */
.affilync-calendar .fc-timegrid-slot {
  border-color: var(--fc-border);
  height: 48px;
}

.affilync-calendar .fc-timegrid-slot-label {
  color: var(--fc-text-secondary);
  font-size: 0.75rem;
}

.affilync-calendar .fc-timegrid-now-indicator-line {
  border-color: var(--fc-primary);
  border-width: 2px;
}

.affilync-calendar .fc-timegrid-now-indicator-arrow {
  border-color: var(--fc-primary);
  border-top-color: transparent;
  border-bottom-color: transparent;
}

/* ====================
   LIST VIEW
   ==================== */
.affilync-calendar .fc-list {
  border-color: var(--fc-border);
}

.affilync-calendar .fc-list-day-cushion {
  background: var(--fc-bg-elevated);
}

.affilync-calendar .fc-list-day-text,
.affilync-calendar .fc-list-day-side-text {
  color: var(--fc-text-primary);
  font-weight: 600;
}

.affilync-calendar .fc-list-event {
  cursor: pointer;
}

.affilync-calendar .fc-list-event:hover td {
  background: var(--fc-bg-elevated);
}

.affilync-calendar .fc-list-event-time {
  color: var(--fc-text-secondary);
}

.affilync-calendar .fc-list-event-title {
  color: var(--fc-text-primary);
}

.affilync-calendar .fc-list-empty {
  background: var(--fc-bg-paper);
}

.affilync-calendar .fc-list-empty-cushion {
  color: var(--fc-text-secondary);
}

/* ====================
   SELECTION
   ==================== */
.affilync-calendar .fc-highlight {
  background: rgba(0, 102, 230, 0.15);
}

/* ====================
   POPOVER
   ==================== */
.affilync-calendar .fc-popover {
  background: var(--fc-bg-elevated);
  border: 1px solid var(--fc-border-strong);
  border-radius: var(--fc-radius-md);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.affilync-calendar .fc-popover-header {
  background: var(--fc-bg-panel);
  border-bottom: 1px solid var(--fc-border);
  padding: 0.75rem 1rem;
}

.affilync-calendar .fc-popover-title {
  color: var(--fc-text-primary);
  font-weight: 600;
}

.affilync-calendar .fc-popover-close {
  color: var(--fc-text-secondary);
}

.affilync-calendar .fc-popover-close:hover {
  color: var(--fc-text-primary);
}

/* ====================
   SCROLLBAR
   ==================== */
.affilync-calendar .fc-scroller::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.affilync-calendar .fc-scroller::-webkit-scrollbar-track {
  background: var(--fc-bg);
}

.affilync-calendar .fc-scroller::-webkit-scrollbar-thumb {
  background: var(--fc-text-disabled);
  border-radius: 3px;
}

.affilync-calendar .fc-scroller::-webkit-scrollbar-thumb:hover {
  background: var(--fc-text-secondary);
}

/* ====================
   RESPONSIVE
   ==================== */
@media (max-width: 768px) {
  .affilync-calendar-toolbar {
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
  }

  .affilync-calendar-toolbar-title {
    order: -1;
    width: 100%;
    text-align: center;
    font-size: 1.125rem;
  }

  .affilync-calendar-toolbar-nav {
    flex: 1;
    justify-content: flex-start;
  }

  .affilync-calendar-toolbar-views {
    flex: 1;
    justify-content: flex-end;
  }

  .affilync-calendar-view-btn span {
    display: none;
  }

  .affilync-calendar .fc-daygrid-day-number {
    font-size: 0.875rem;
    padding: 0.25rem;
  }
}

:root {
  --toastify-color-light: #fff;
  --toastify-color-dark: #121212;
  --toastify-color-info: #3498db;
  --toastify-color-success: #07bc0c;
  --toastify-color-warning: #f1c40f;
  --toastify-color-error: hsl(6, 78%, 57%);
  --toastify-color-transparent: rgba(255, 255, 255, 0.7);

  --toastify-icon-color-info: var(--toastify-color-info);
  --toastify-icon-color-success: var(--toastify-color-success);
  --toastify-icon-color-warning: var(--toastify-color-warning);
  --toastify-icon-color-error: var(--toastify-color-error);

  --toastify-container-width: fit-content;
  --toastify-toast-width: 320px;
  --toastify-toast-offset: 16px;
  --toastify-toast-top: max(var(--toastify-toast-offset), env(safe-area-inset-top));
  --toastify-toast-right: max(var(--toastify-toast-offset), env(safe-area-inset-right));
  --toastify-toast-left: max(var(--toastify-toast-offset), env(safe-area-inset-left));
  --toastify-toast-bottom: max(var(--toastify-toast-offset), env(safe-area-inset-bottom));
  --toastify-toast-background: #fff;
  --toastify-toast-padding: 14px;
  --toastify-toast-min-height: 64px;
  --toastify-toast-max-height: 800px;
  --toastify-toast-bd-radius: 6px;
  --toastify-toast-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  --toastify-font-family: sans-serif;
  --toastify-z-index: 9999;
  --toastify-text-color-light: #757575;
  --toastify-text-color-dark: #fff;

  /* Used only for colored theme */
  --toastify-text-color-info: #fff;
  --toastify-text-color-success: #fff;
  --toastify-text-color-warning: #fff;
  --toastify-text-color-error: #fff;

  --toastify-spinner-color: #616161;
  --toastify-spinner-color-empty-area: #e0e0e0;
  --toastify-color-progress-light: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
  --toastify-color-progress-dark: #bb86fc;
  --toastify-color-progress-info: var(--toastify-color-info);
  --toastify-color-progress-success: var(--toastify-color-success);
  --toastify-color-progress-warning: var(--toastify-color-warning);
  --toastify-color-progress-error: var(--toastify-color-error);
  /* used to control the opacity of the progress trail */
  --toastify-color-progress-bgo: 0.2;
}

.Toastify__toast-container {
  z-index: var(--toastify-z-index);
  -webkit-transform: translate3d(0, 0, var(--toastify-z-index));
  position: fixed;
  width: var(--toastify-container-width);
  box-sizing: border-box;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.Toastify__toast-container--top-left {
  top: var(--toastify-toast-top);
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--top-center {
  top: var(--toastify-toast-top);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}
.Toastify__toast-container--top-right {
  top: var(--toastify-toast-top);
  right: var(--toastify-toast-right);
  align-items: end;
}
.Toastify__toast-container--bottom-left {
  bottom: var(--toastify-toast-bottom);
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--bottom-center {
  bottom: var(--toastify-toast-bottom);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}
.Toastify__toast-container--bottom-right {
  bottom: var(--toastify-toast-bottom);
  right: var(--toastify-toast-right);
  align-items: end;
}

.Toastify__toast {
  --y: 0;
  position: relative;
  touch-action: none;
  width: var(--toastify-toast-width);
  min-height: var(--toastify-toast-min-height);
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: var(--toastify-toast-padding);
  border-radius: var(--toastify-toast-bd-radius);
  box-shadow: var(--toastify-toast-shadow);
  max-height: var(--toastify-toast-max-height);
  font-family: var(--toastify-font-family);
  /* webkit only issue #791 */
  z-index: 0;
  /* inner swag */
  display: flex;
  flex: 1 auto;
  align-items: center;
  word-break: break-word;
}

@media only screen and (max-width: 480px) {
  .Toastify__toast-container {
    width: 100vw;
    left: env(safe-area-inset-left);
    margin: 0;
  }
  .Toastify__toast-container--top-left,
  .Toastify__toast-container--top-center,
  .Toastify__toast-container--top-right {
    top: env(safe-area-inset-top);
    transform: translateX(0);
  }
  .Toastify__toast-container--bottom-left,
  .Toastify__toast-container--bottom-center,
  .Toastify__toast-container--bottom-right {
    bottom: env(safe-area-inset-bottom);
    transform: translateX(0);
  }
  .Toastify__toast-container--rtl {
    right: env(safe-area-inset-right);
    left: initial;
  }
  .Toastify__toast {
    --toastify-toast-width: 100%;
    margin-bottom: 0;
    border-radius: 0;
  }
}

.Toastify__toast-container[data-stacked='true'] {
  width: var(--toastify-toast-width);
}

.Toastify__toast--stacked {
  position: absolute;
  width: 100%;
  transform: translate3d(0, var(--y), 0) scale(var(--s));
  transition: transform 0.3s;
}

.Toastify__toast--stacked[data-collapsed] .Toastify__toast-body,
.Toastify__toast--stacked[data-collapsed] .Toastify__close-button {
  transition: opacity 0.1s;
}

.Toastify__toast--stacked[data-collapsed='false'] {
  overflow: visible;
}

.Toastify__toast--stacked[data-collapsed='true']:not(:last-child) > * {
  opacity: 0;
}

.Toastify__toast--stacked:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--g) * 1px);
  bottom: 100%;
}

.Toastify__toast--stacked[data-pos='top'] {
  top: 0;
}

.Toastify__toast--stacked[data-pos='bot'] {
  bottom: 0;
}

.Toastify__toast--stacked[data-pos='bot'].Toastify__toast--stacked:before {
  transform-origin: top;
}

.Toastify__toast--stacked[data-pos='top'].Toastify__toast--stacked:before {
  transform-origin: bottom;
}

.Toastify__toast--stacked:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  transform: scaleY(3);
  z-index: -1;
}

.Toastify__toast--rtl {
  direction: rtl;
}

.Toastify__toast--close-on-click {
  cursor: pointer;
}

.Toastify__toast-icon {
  -webkit-margin-end: 10px;
          margin-inline-end: 10px;
  width: 22px;
  flex-shrink: 0;
  display: flex;
}

.Toastify--animate {
  animation-fill-mode: both;
  animation-duration: 0.5s;
}

.Toastify--animate-icon {
  animation-fill-mode: both;
  animation-duration: 0.3s;
}

.Toastify__toast-theme--dark {
  background: var(--toastify-color-dark);
  color: var(--toastify-text-color-dark);
}

.Toastify__toast-theme--light {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}

.Toastify__toast-theme--colored.Toastify__toast--default {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}

.Toastify__toast-theme--colored.Toastify__toast--info {
  color: var(--toastify-text-color-info);
  background: var(--toastify-color-info);
}

.Toastify__toast-theme--colored.Toastify__toast--success {
  color: var(--toastify-text-color-success);
  background: var(--toastify-color-success);
}

.Toastify__toast-theme--colored.Toastify__toast--warning {
  color: var(--toastify-text-color-warning);
  background: var(--toastify-color-warning);
}

.Toastify__toast-theme--colored.Toastify__toast--error {
  color: var(--toastify-text-color-error);
  background: var(--toastify-color-error);
}

.Toastify__progress-bar-theme--light {
  background: var(--toastify-color-progress-light);
}

.Toastify__progress-bar-theme--dark {
  background: var(--toastify-color-progress-dark);
}

.Toastify__progress-bar--info {
  background: var(--toastify-color-progress-info);
}

.Toastify__progress-bar--success {
  background: var(--toastify-color-progress-success);
}

.Toastify__progress-bar--warning {
  background: var(--toastify-color-progress-warning);
}

.Toastify__progress-bar--error {
  background: var(--toastify-color-progress-error);
}

.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
  background: var(--toastify-color-transparent);
}

.Toastify__close-button {
  color: #fff;
  position: absolute;
  top: 6px;
  right: 6px;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s ease;
  z-index: 1;
}

.Toastify__toast--rtl .Toastify__close-button {
  left: 6px;
  right: unset;
}

.Toastify__close-button--light {
  color: #000;
  opacity: 0.3;
}

.Toastify__close-button > svg {
  fill: currentColor;
  height: 16px;
  width: 14px;
}

.Toastify__close-button:hover,
.Toastify__close-button:focus {
  opacity: 1;
}

@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}

.Toastify__progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.7;
  transform-origin: left;
}

.Toastify__progress-bar--animated {
  animation: Toastify__trackProgress linear 1 forwards;
}

.Toastify__progress-bar--controlled {
  transition: transform 0.2s;
}

.Toastify__progress-bar--rtl {
  right: 0;
  left: initial;
  transform-origin: right;
  border-bottom-left-radius: initial;
}

.Toastify__progress-bar--wrp {
  position: absolute;
  overflow: hidden;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
  border-bottom-right-radius: var(--toastify-toast-bd-radius);
}

.Toastify__progress-bar--wrp[data-hidden='true'] {
  opacity: 0;
}

.Toastify__progress-bar--bg {
  opacity: var(--toastify-color-progress-bgo);
  width: 100%;
  height: 100%;
}

.Toastify__spinner {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid;
  border-radius: 100%;
  border-color: var(--toastify-spinner-color-empty-area);
  border-right-color: var(--toastify-spinner-color);
  animation: Toastify__spin 0.65s linear infinite;
}

@keyframes Toastify__bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: none;
  }
}

@keyframes Toastify__bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, var(--y), 0);
  }
}

@keyframes Toastify__bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: none;
  }
}

@keyframes Toastify__bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, var(--y), 0);
  }
}

@keyframes Toastify__bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes Toastify__bounceOutUp {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes Toastify__bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: none;
  }
}

@keyframes Toastify__bounceOutDown {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}

.Toastify__bounce-enter--top-left,
.Toastify__bounce-enter--bottom-left {
  animation-name: Toastify__bounceInLeft;
}

.Toastify__bounce-enter--top-right,
.Toastify__bounce-enter--bottom-right {
  animation-name: Toastify__bounceInRight;
}

.Toastify__bounce-enter--top-center {
  animation-name: Toastify__bounceInDown;
}

.Toastify__bounce-enter--bottom-center {
  animation-name: Toastify__bounceInUp;
}

.Toastify__bounce-exit--top-left,
.Toastify__bounce-exit--bottom-left {
  animation-name: Toastify__bounceOutLeft;
}

.Toastify__bounce-exit--top-right,
.Toastify__bounce-exit--bottom-right {
  animation-name: Toastify__bounceOutRight;
}

.Toastify__bounce-exit--top-center {
  animation-name: Toastify__bounceOutUp;
}

.Toastify__bounce-exit--bottom-center {
  animation-name: Toastify__bounceOutDown;
}

@keyframes Toastify__zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}

@keyframes Toastify__zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: translate3d(0, var(--y), 0) scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}

.Toastify__zoom-enter {
  animation-name: Toastify__zoomIn;
}

.Toastify__zoom-exit {
  animation-name: Toastify__zoomOut;
}

@keyframes Toastify__flipIn {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}

@keyframes Toastify__flipOut {
  from {
    transform: translate3d(0, var(--y), 0) perspective(400px);
  }
  30% {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.Toastify__flip-enter {
  animation-name: Toastify__flipIn;
}

.Toastify__flip-exit {
  animation-name: Toastify__flipOut;
}

@keyframes Toastify__slideInRight {
  from {
    transform: translate3d(110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideInLeft {
  from {
    transform: translate3d(-110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideInUp {
  from {
    transform: translate3d(0, 110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideInDown {
  from {
    transform: translate3d(0, -110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideOutRight {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(110%, var(--y), 0);
  }
}

@keyframes Toastify__slideOutLeft {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(-110%, var(--y), 0);
  }
}

@keyframes Toastify__slideOutDown {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 500px, 0);
  }
}

@keyframes Toastify__slideOutUp {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -500px, 0);
  }
}

.Toastify__slide-enter--top-left,
.Toastify__slide-enter--bottom-left {
  animation-name: Toastify__slideInLeft;
}

.Toastify__slide-enter--top-right,
.Toastify__slide-enter--bottom-right {
  animation-name: Toastify__slideInRight;
}

.Toastify__slide-enter--top-center {
  animation-name: Toastify__slideInDown;
}

.Toastify__slide-enter--bottom-center {
  animation-name: Toastify__slideInUp;
}

.Toastify__slide-exit--top-left,
.Toastify__slide-exit--bottom-left {
  animation-name: Toastify__slideOutLeft;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--top-right,
.Toastify__slide-exit--bottom-right {
  animation-name: Toastify__slideOutRight;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--top-center {
  animation-name: Toastify__slideOutUp;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--bottom-center {
  animation-name: Toastify__slideOutDown;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

@keyframes Toastify__spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Custom Toast Styles - Uses Tailwind @apply and Design Tokens */
.custom-toast-container {
  z-index: var(--z-toast); /* 1700 - from unified z-index scale in index.css */
}

.custom-toast {
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
  --tw-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
  --tw-shadow-colored: 0 16px 48px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  font-family: inherit;
  min-height: 64px;
  margin-bottom: 1rem;
}

.custom-toast-body {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.custom-toast-progress {
  background: hsl(var(--primary));
}

/* Success Toast - Uses Design Tokens */
.toast-success {
  background: hsl(var(--success));
  color: hsl(var(--success-foreground));
  border: 1px solid hsl(var(--success));
}

.toast-success-progress {
  background: hsl(var(--success-text));
}

/* Error Toast - Uses Design Tokens */
.toast-error {
  background: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
  border: 1px solid hsl(var(--destructive));
}

.toast-error-progress {
  background: hsl(var(--destructive-text));
}

/* Warning Toast - Uses Design Tokens */
.toast-warning {
  background: hsl(var(--warning));
  color: hsl(var(--warning-foreground));
  border: 1px solid hsl(var(--warning));
}

.toast-warning-progress {
  background: hsl(var(--warning-text));
}

/* Info Toast - Uses Design Tokens */
.toast-info {
  background: hsl(var(--info));
  color: hsl(var(--info-foreground));
  border: 1px solid hsl(var(--primary));
}

.toast-info-progress {
  background: hsl(var(--info-text));
}

/* Loading Toast - Uses Design Tokens */
.toast-loading {
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  border: 1px solid hsl(var(--border));
}

/* Override default styles */
.Toastify__toast-container {
  padding: 1rem;
}

.Toastify__toast {
  margin-bottom: 1rem;
  border-radius: 1rem;
}

.Toastify__close-button {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.Toastify__close-button:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.Toastify__progress-bar {
  height: 3px;
}

/* Dark theme overrides - Uses Design Tokens */
.Toastify__toast-theme--dark {
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
}

/* Animations */
@keyframes toastSlideIn {
  from {
    transform: translate3d(110%, 0, 0);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.Toastify__toast--top-right {
  animation: toastSlideIn 0.15s ease-out;
}

/* Add smooth transitions */
.custom-toast {
  transition: all 0.15s ease-out;
}

/**
 * Affilync Design System - "Financial Edge" Aesthetic
 * CSS Variables & Design Tokens
 *
 * Design Philosophy:
 * - Deep Electric Blue (#0066e6) as primary
 * - Strategic Amber (#ffcc00) as accent
 * - Neon Green (#00ff88) for success states
 * - Dark terminal UI with glassmorphism
 * - DM Sans + Syne typography (NOT Inter/Roboto)
 *
 * This file provides CSS custom properties that align with:
 * @see /src/styles/design-tokens.js - JavaScript design tokens
 * @see /tailwind.config.js - Tailwind CSS configuration (source of truth)
 */

/* ============================================================================
   DESIGN TOKENS - Financial Edge Dark Mode (Default)
   ============================================================================ */

:root {
  /* Layout & Spacing */
  --radius: 0.5rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;

  /* === PRIMARY COLOR - Deep Electric Blue (#0066e6) === */
  --primary: 210 100% 45%; /* HSL for #0066e6 */
  --primary-foreground: 0 0% 100%;
  --primary-50: #e6f1ff;
  --primary-100: #b3d7ff;
  --primary-200: #80bdff;
  --primary-300: #4da3ff;
  --primary-400: #1a8aff;
  --primary-500: #0066e6;
  --primary-600: #0052b3;
  --primary-700: #003d80;
  --primary-800: #00294d;
  --primary-900: #00141a;

  /* === ACCENT COLOR - Strategic Amber (#ffcc00) === */
  --accent: 48 100% 50%; /* HSL for #ffcc00 */
  --accent-foreground: 220 50% 7%;
  --accent-50: #fffbeb;
  --accent-100: #fff3c1;
  --accent-200: #ffeb99;
  --accent-300: #ffe066;
  --accent-400: #ffd633;
  --accent-500: #ffcc00;
  --accent-600: #e6b800;
  --accent-700: #cc9900;
  --accent-800: #997300;
  --accent-900: #664d00;

  /* === SUCCESS - Neon Green (#00ff88) === */
  --success: 151 100% 50%; /* HSL for #00ff88 */
  --success-foreground: 220 50% 7%;
  --success-text: 151 100% 45%;
  --success-50: #e6fff5;
  --success-500: #00ff88;
  --success-600: #00cc6e;
  --success-700: #009954;

  /* === ERROR - Sharp Red (#ff3366) === */
  --destructive: 346 100% 60%; /* HSL for #ff3366 */
  --destructive-foreground: 0 0% 100%;
  --destructive-text: 346 100% 55%;
  --error-50: #ffebf0;
  --error-500: #ff3366;
  --error-600: #cc0033;
  --error-700: #990026;

  /* === WARNING - Amber (same as accent) === */
  --warning: 48 100% 50%;
  --warning-foreground: 220 50% 7%;
  --warning-text: 40 100% 45%;

  /* === INFO - Electric Blue (same as primary) === */
  --info: 210 100% 45%;
  --info-foreground: 0 0% 100%;
  --info-text: 210 100% 50%;

  /* === BACKGROUND - Dark Terminal === */
  --background: 220 50% 7%; /* HSL for #0a0e1a */
  --foreground: 0 0% 100%;
  --background-default: #0a0e1a;
  --background-elevated: #131825;
  --background-panel: #1a2030;
  --background-overlay: #232d42;

  /* === CARD / SURFACES === */
  --card: 220 40% 10%; /* HSL for #131825 */
  --card-foreground: 0 0% 100%;

  /* === POPOVER === */
  --popover: 220 40% 10%;
  --popover-foreground: 0 0% 100%;

  /* === SECONDARY === */
  --secondary: 220 35% 15%;
  --secondary-foreground: 0 0% 100%;

  /* === MUTED === */
  --muted: 220 30% 20%;
  --muted-foreground: 217 15% 55%;

  /* === TEXT COLORS === */
  --text-primary: 0 0% 100%;
  --text-secondary: 217 15% 55%; /* #8892a6 */
  --text-tertiary: 217 12% 35%; /* #4d5666 */
  --text-muted: 217 10% 28%;

  /* === SURFACE COLORS (Dark mode) === */
  --surface-50: 210 40% 98%;
  --surface-100: 210 40% 96%;
  --surface-200: 214 32% 91%;
  --surface-300: 213 27% 84%;
  --surface-400: 215 20% 65%;
  --surface-500: 215 16% 47%;
  --surface-600: 215 19% 35%;
  --surface-700: 217 33% 20%;
  --surface-800: 220 35% 15%;

  /* === BORDER COLORS === */
  --border: 0 0% 100% / 0.08;
  --border-light: 0 0% 100% / 0.04;
  --border-medium: 0 0% 100% / 0.12;
  --border-primary: 210 100% 45% / 0.2;
  --input: 220 35% 15%;
  --ring: 210 100% 45%;

  /* === EFFECTS === */
  --box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  --box-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --box-shadow-glow: 0 0 24px rgba(0, 102, 230, 0.4);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);

  /* === GLASSMORPHISM === */
  --glass-background: rgba(19, 24, 37, 0.95);
  --glass-border: rgba(0, 102, 230, 0.2);
  --glass-blur: blur(20px);

  /* === CHART COLORS === */
  --chart-1: #0066e6;
  --chart-2: #ffcc00;
  --chart-3: #00ff88;
  --chart-4: #00d4ff;
  --chart-5: #8b5cf6;
  --chart-6: #ff3366;
  --chart-7: #ec4899;
  --chart-8: #14b8a6;
  --chart-9: #f97316;
  --chart-10: #84cc16;
}

/* ============================================================================
   LIGHT MODE TOKENS (Optional - for future light theme support)
   ============================================================================ */

.light {
  --background: 210 40% 98%;
  --foreground: 220 50% 7%;
  --background-default: #f8fafc;
  --background-elevated: #ffffff;
  --background-panel: #f1f5f9;

  --card: 0 0% 100%;
  --card-foreground: 220 50% 7%;

  --popover: 0 0% 100%;
  --popover-foreground: 220 50% 7%;

  --primary: 210 100% 45%;
  --primary-foreground: 0 0% 100%;

  --secondary: 210 40% 96%;
  --secondary-foreground: 220 50% 7%;

  --muted: 210 40% 96%;
  --muted-foreground: 217 15% 45%;

  --accent: 48 100% 50%;
  --accent-foreground: 220 50% 7%;

  /* Light mode text colors */
  --text-primary: 222 47% 11%;
  --text-secondary: 215 16% 47%;
  --text-tertiary: 215 14% 60%;

  /* Light mode surface colors */
  --surface-50: 210 40% 98%;
  --surface-100: 210 40% 96%;
  --surface-200: 214 32% 91%;
  --surface-300: 213 27% 84%;
  --surface-400: 215 20% 65%;
  --surface-500: 215 16% 47%;
  --surface-600: 215 19% 35%;
  --surface-700: 217 19% 27%;
  --surface-800: 215 28% 17%;

  --border: 214 32% 91%;
  --border-light: 214 32% 95%;
  --border-medium: 214 32% 85%;
  --input: 214 32% 91%;
  --ring: 210 100% 45%;

  --glass-background: rgba(255, 255, 255, 0.9);
  --glass-border: rgba(0, 102, 230, 0.15);

  --box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  --box-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.15);
}

/* ============================================================================
   UTILITY CLASSES - Text Colors
   ============================================================================ */

.text-primary {
  color: hsl(var(--text-primary));
}

.text-secondary {
  color: hsl(var(--text-secondary));
}

.text-tertiary {
  color: hsl(var(--text-tertiary));
}

.text-muted {
  color: hsl(var(--text-muted));
}

/* Semantic text colors (WCAG 2.1 AA compliant) */
.text-success-safe {
  color: hsl(var(--success-text));
}

.text-warning-safe {
  color: hsl(var(--warning-text));
}

.text-error-safe,
.text-destructive-safe {
  color: hsl(var(--destructive-text));
}

.text-info-safe {
  color: hsl(var(--info-text));
}

/* ============================================================================
   UTILITY CLASSES - Background Colors
   ============================================================================ */

.bg-content {
  background-color: var(--background-default);
}

.bg-elevated {
  background-color: var(--background-elevated);
}

.bg-panel {
  background-color: var(--background-panel);
}

.bg-overlay {
  background-color: var(--background-overlay);
}

/* Semantic background colors */
.bg-success-safe {
  background-color: hsl(var(--success));
  color: hsl(var(--success-foreground));
}

.bg-warning-safe {
  background-color: hsl(var(--warning));
  color: hsl(var(--warning-foreground));
}

.bg-error-safe,
.bg-destructive-safe {
  background-color: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
}

.bg-info-safe {
  background-color: hsl(var(--info));
  color: hsl(var(--info-foreground));
}

/* ============================================================================
   UTILITY CLASSES - Glassmorphism
   ============================================================================ */

.glass-card {
  background: var(--glass-background);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
}

.glass-panel {
  background: rgba(10, 14, 26, 0.8);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(0, 102, 230, 0.15);
}

.glass-overlay {
  background: rgba(10, 14, 26, 0.95);
  -webkit-backdrop-filter: blur(24px);
          backdrop-filter: blur(24px);
  border: 1px solid rgba(0, 102, 230, 0.3);
}

/* ============================================================================
   UTILITY CLASSES - Effects
   ============================================================================ */

.shadow-custom {
  box-shadow: var(--box-shadow);
}

.shadow-custom-lg {
  box-shadow: var(--box-shadow-lg);
}

.shadow-glow {
  box-shadow: var(--box-shadow-glow);
}

.shadow-glow-accent {
  box-shadow: 0 0 32px rgba(255, 204, 0, 0.3);
}

.shadow-glow-success {
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
}

.shadow-glow-error {
  box-shadow: 0 0 20px rgba(255, 51, 102, 0.4);
}

.transition-custom {
  transition: var(--transition);
}

.transition-fast {
  transition: var(--transition-fast);
}

/* ============================================================================
   UTILITY CLASSES - Font Families (Financial Edge)
   Must match tailwind.config.js fontFamily settings
   ============================================================================ */

.font-sans {
  font-family:
    'DM Sans',
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
}

.font-display {
  font-family:
    'Syne',
    'DM Sans',
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
}

.font-mono {
  font-family: 'JetBrains Mono', 'SF Mono', Consolas, 'Courier New', monospace;
}

/* Global font family application */
.font-family-dm-sans {
  font-family:
    'DM Sans',
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
}

.font-family-dm-sans * {
  font-family: inherit;
}

.font-family-syne {
  font-family:
    'Syne',
    'DM Sans',
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
}

.font-family-syne * {
  font-family: inherit;
}

/* ============================================================================
   COMPONENT PATTERNS - Financial Edge Cards
   ============================================================================ */

.card-financial {
  background: linear-gradient(135deg, rgba(19, 24, 37, 0.95) 0%, rgba(26, 32, 48, 0.95) 100%);
  border: 1px solid rgba(0, 102, 230, 0.2);
  border-radius: var(--radius-md);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 1px rgba(0, 102, 230, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: var(--transition);
}

.card-financial:hover {
  border-color: rgba(0, 102, 230, 0.3);
  box-shadow:
    0 12px 48px rgba(0, 0, 0, 0.6),
    0 0 24px rgba(0, 102, 230, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(-4px);
}

/* Metric card with top accent line */
.metric-card {
  background: rgba(19, 24, 37, 0.6);
  border: 1px solid rgba(0, 102, 230, 0.2);
  border-radius: var(--radius-lg);
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

.metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #0066e6, transparent);
}

/* Amber accent variant */
.metric-card--accent::before {
  background: linear-gradient(90deg, transparent, #ffcc00, transparent);
}

/* Success accent variant */
.metric-card--success::before {
  background: linear-gradient(90deg, transparent, #00ff88, transparent);
}

/* ============================================================================
   BUTTON PATTERNS - Financial Edge
   ============================================================================ */

.btn-primary {
  background: linear-gradient(135deg, #0066e6 0%, #0052b3 100%);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-md);
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  transition: var(--transition);
  box-shadow: 0 4px 16px rgba(0, 102, 230, 0.3);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #1a8aff 0%, #0066e6 100%);
  transform: translateY(-2px);
  box-shadow: 0 0 24px rgba(0, 102, 230, 0.4);
}

.btn-accent {
  background: linear-gradient(135deg, #ffcc00 0%, #e6b800 100%);
  color: #0a0e1a;
  border: none;
  border-radius: var(--radius-md);
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  transition: var(--transition);
  box-shadow: 0 4px 16px rgba(255, 204, 0, 0.3);
}

.btn-accent:hover {
  background: linear-gradient(135deg, #ffd633 0%, #ffcc00 100%);
  transform: translateY(-2px);
  box-shadow: 0 0 32px rgba(255, 204, 0, 0.4);
}

.btn-ghost {
  background: transparent;
  color: hsl(var(--text-primary));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  transition: var(--transition);
}

.btn-ghost:hover {
  background: rgba(0, 102, 230, 0.1);
  border-color: rgba(0, 102, 230, 0.4);
}

/* ============================================================================
   INPUT PATTERNS - Financial Edge
   ============================================================================ */

.input-financial {
  background: rgba(26, 32, 48, 0.6);
  border: 1px solid rgba(0, 102, 230, 0.2);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  color: hsl(var(--text-primary));
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  transition: var(--transition);
}

.input-financial::placeholder {
  color: hsl(var(--text-tertiary));
}

.input-financial:hover {
  border-color: rgba(0, 102, 230, 0.4);
}

.input-financial:focus {
  outline: none;
  border-color: #0066e6;
  box-shadow: 0 0 0 3px rgba(0, 102, 230, 0.2);
}

/* ============================================================================
   BADGE PATTERNS - Financial Edge
   ============================================================================ */

.badge-primary {
  background: rgba(0, 102, 230, 0.2);
  color: #1a8aff;
  border: 1px solid rgba(0, 102, 230, 0.3);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-accent {
  background: rgba(255, 204, 0, 0.2);
  color: #ffcc00;
  border: 1px solid rgba(255, 204, 0, 0.3);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-success {
  background: rgba(0, 255, 136, 0.2);
  color: #00ff88;
  border: 1px solid rgba(0, 255, 136, 0.3);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-error {
  background: rgba(255, 51, 102, 0.2);
  color: #ff3366;
  border: 1px solid rgba(255, 51, 102, 0.3);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
}

/**
 * Components - Reusable UI Component Styles
 *
 * This file consolidates component styles from:
 * - unifiedDesignSystem.css (cards, buttons, badges)
 * - navigation-fixes.css (dropdowns, navigation components)
 *
 * Organization:
 * 1. Z-index Hierarchy
 * 2. Card Components
 * 3. Button Components
 * 4. Status Badges
 * 5. Navigation & Dropdown Components
 * 6. Section Components
 * 7. Loading States
 * 8. Accessibility Features
 */

/* ============================================================================
   Z-INDEX HIERARCHY
   ============================================================================ */

:root {
  /* These use values from the unified z-index scale in index.css */
  --z-navbar-container: 1050; /* Same as --z-navbar */
  --z-user-menu-button: 1055; /* Slightly above navbar */
  --z-navbar-backdrop: 1100; /* Same as --z-fixed */
  --z-navbar-dropdown: 1200; /* Same as --z-overlay */
}

/* ============================================================================
   CARD COMPONENTS
   ============================================================================ */

/* Base Card Styles - Used by both Brand and Affiliate */
.unified-card {
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.unified-card:hover {
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  transform: translateY(-2px);
}

.dark .unified-card {
  background: rgba(30, 41, 59, 0.95);
  border: 1px solid rgba(51, 65, 85, 0.5);
}

/* Metric Card Styles */
.metric-card {
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}
.metric-card:hover {
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  transform: translateY(-2px);
}
.dark .metric-card {
  background: rgba(30, 41, 59, 0.95);
  border: 1px solid rgba(51, 65, 85, 0.5);
}
.metric-card {
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}

.metric-icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.metric-value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  background: linear-gradient(to bottom right, var(--gray-900), var(--gray-700));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dark .metric-value {
  background: linear-gradient(to bottom right, white, var(--gray-300));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.metric-label {
  font-size: 0.875rem;
  color: var(--gray-600);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dark .metric-label {
  color: var(--gray-400);
}

/* Trend Indicators */
.trend-positive {
  color: var(--success-500);
}

.trend-negative {
  color: var(--error-500);
}

.trend-neutral {
  color: var(--gray-500);
}

/* ============================================================================
   BUTTON COMPONENTS
   ============================================================================ */

.btn-primary {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
  color: white;
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
  box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.4);
  transform: translateY(-1px);
}

.btn-secondary {
  background: white;
  color: var(--gray-700);
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition: all 0.2s ease;
  border: 1px solid var(--gray-300);
  cursor: pointer;
}

.btn-secondary:hover {
  background: var(--gray-50);
  border-color: var(--gray-400);
}

.dark .btn-secondary {
  background: var(--dark-surface);
  color: var(--gray-300);
  border-color: var(--dark-border);
}

.dark .btn-secondary:hover {
  background: var(--gray-800);
  border-color: var(--gray-600);
}

/* Quick Action Buttons */
.quick-action-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid;
  transition: all 0.2s ease;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.quick-action-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.quick-action-arrow {
  width: 1rem;
  height: 1rem;
  color: var(--gray-400);
}

/* User Menu Button */
.user-menu-button {
  position: relative;
  z-index: var(--z-user-menu-button);
  outline: none;
}

.user-menu-button:focus {
  box-shadow: 0 0 0 2px #3b82f6;
}

/* ============================================================================
   STATUS BADGES
   ============================================================================ */

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid;
}

.status-active {
  background: var(--success-500);
  background-opacity: 0.1;
  color: var(--success-500);
  border-color: var(--success-500);
  border-opacity: 0.2;
}

.status-pending {
  background: var(--warning-500);
  background-opacity: 0.1;
  color: var(--warning-500);
  border-color: var(--warning-500);
  border-opacity: 0.2;
}

.status-inactive {
  background: var(--gray-500);
  background-opacity: 0.1;
  color: var(--gray-500);
  border-color: var(--gray-500);
  border-opacity: 0.2;
}

/* ============================================================================
   NAVIGATION & DROPDOWN COMPONENTS
   ============================================================================ */

/* Navbar Container */
.navbar-container {
  position: relative;
  z-index: var(--z-navbar-container);
}

/* Dropdown Component */
.navbar-dropdown {
  position: absolute;
  z-index: var(--z-navbar-dropdown) !important;
  background: white;
  border-radius: 0.5rem;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border: 1px solid #e5e7eb;
  min-width: 200px;
  max-width: 320px;
  max-height: 400px;
  overflow-y: auto;
  animation: dropdown-enter 0.15s ease-out;
}

.dark .navbar-dropdown {
  background: #374151;
  border-color: #4b5563;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.3),
    0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

/* Dropdown Animation */
@keyframes dropdown-enter {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Dropdown Backdrop */
.navbar-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-navbar-backdrop) !important;
  background: transparent;
}

/* Dropdown Items */
.dropdown-item {
  position: relative;
  z-index: 1;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}

.dropdown-item:hover {
  background-color: #f9fafb;
}

.dark .dropdown-item:hover {
  background-color: #4b5563;
}

/* Mobile Dropdown Positioning */
@media (max-width: 768px) {
  .navbar-dropdown {
    left: 1rem;
    right: 1rem;
    width: auto;
    max-width: calc(100vw - 2rem);
  }
}

/* Mobile Search Overlay */
.mobile-search-overlay {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--z-navbar-dropdown); /* 1200 - overlay level */
  background: white;
  border-bottom: 1px solid #e5e7eb;
  padding: 1rem;
  animation: slide-down 0.2s ease-out;
}

.dark .mobile-search-overlay {
  background: #374151;
  border-color: #4b5563;
}

@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Safari Dropdown Rendering Fix */
@supports (-webkit-appearance: none) {
  .navbar-dropdown {
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
  }
}

/* Text Selection in Dropdowns */
.navbar-dropdown * {
  -webkit-user-select: none;
          user-select: none;
}

.navbar-dropdown input {
  -webkit-user-select: text;
          user-select: text;
}

/* ============================================================================
   SECTION COMPONENTS
   ============================================================================ */

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-900);
}

.dark .section-title {
  color: white;
}

.section-subtitle {
  font-size: 0.875rem;
  color: var(--gray-600);
  margin-top: 0.25rem;
}

.dark .section-subtitle {
  color: var(--gray-400);
}

/* ============================================================================
   LOADING STATES
   ============================================================================ */

.skeleton {
  animation: skeleton-loading 1.5s infinite ease-in-out;
  background: linear-gradient(
    90deg,
    var(--gray-200) 0px,
    var(--gray-100) 40px,
    var(--gray-200) 80px
  );
  background-size: 300%;
  background-position: 100% 0%;
}

.dark .skeleton {
  background: linear-gradient(
    90deg,
    var(--gray-700) 0px,
    var(--gray-600) 40px,
    var(--gray-700) 80px
  );
  background-size: 300%;
}

@keyframes skeleton-loading {
  0% {
    background-position: 100% 0%;
  }
  100% {
    background-position: -100% 0%;
  }
}

/* Navbar Skeleton */
.navbar-skeleton {
  animation: skeleton-loading 1.5s ease-in-out infinite alternate;
}

@keyframes skeleton-loading-dark {
  from {
    background-color: #4b5563;
  }
  to {
    background-color: #6b7280;
  }
}

.dark .navbar-skeleton {
  animation: skeleton-loading-dark 1.5s ease-in-out infinite alternate;
}

/* ============================================================================
   ACCESSIBILITY FEATURES
   ============================================================================ */

/* Focus Management */
.navbar-dropdown [role='menuitem']:focus,
.navbar-dropdown button:focus,
.navbar-dropdown a:focus {
  outline: 2px solid #3b82f6;
  outline-offset: -2px;
}

/* Smooth Transitions for Theme Switching */
.navbar-container * {
  transition:
    background-color 0.2s ease-in-out,
    color 0.2s ease-in-out,
    border-color 0.2s ease-in-out;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .navbar-dropdown {
    border-width: 2px;
    border-color: #000;
  }

  .dark .navbar-dropdown {
    border-color: #fff;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .navbar-dropdown,
  .mobile-search-overlay {
    animation: none;
  }

  .navbar-container * {
    transition: none;
  }
}

/* ============================================================================
   MARKDOWN / PROSE CONTENT - Code Block & Table Overflow Fixes
   ============================================================================ */

/**
 * Fix horizontal scrolling in markdown content.
 * Applied to elements with Tailwind's `prose` class used by react-markdown.
 * Ensures code blocks, tables, and long text wrap or scroll within container.
 */

/* Code block containers */
.prose pre {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Inline code elements */
.prose code {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Standalone code blocks (not in pre) */
.prose :not(pre) > code {
  white-space: pre-wrap;
  word-break: break-word;
}

/* SyntaxHighlighter wrapper fix */
.prose pre > div {
  max-width: 100%;
  overflow-x: auto;
}

/* Tables in markdown */
.prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}

/* Table wrapper for horizontal scroll */
.prose .table-wrapper {
  max-width: 100%;
  overflow-x: auto;
}

/* Long URLs and text in markdown */
.prose a,
.prose p {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Markdown message container */
.markdown-message {
  max-width: 100%;
  overflow-x: hidden;
}

.markdown-message .prose {
  max-width: 100%;
}

/* Dark mode prose code blocks */
.dark .prose pre,
.prose-invert pre {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Ensure code blocks within chat messages respect container */
.chat-message pre,
.ai-message pre,
.user-message pre {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}