@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* Define CSS variables globally for use in portals */
  :root {
    /* Background & Foreground - WordPress-aligned grays */
    --smx-background: 220 14% 98%;
    --smx-foreground: 222 47% 11%;

    /* Card */
    --smx-card: 0 0% 100%;
    --smx-card-foreground: 222 47% 11%;

    /* Popover */
    --smx-popover: 0 0% 100%;
    --smx-popover-foreground: 222 47% 11%;

    /* Primary - Teal brand identity (darkened for WCAG AA accessibility) */
    --smx-primary: 175 84% 32%;
    --smx-primary-foreground: 0 0% 100%;

    /* Secondary - Neutral */
    --smx-secondary: 220 14% 96%;
    --smx-secondary-foreground: 215 25% 27%;

    /* Muted */
    --smx-muted: 220 14% 96%;
    --smx-muted-foreground: 215 16% 47%;

    /* Accent - Teal variant for highlights */
    --smx-accent: 175 77% 97%;
    --smx-accent-foreground: 176 86% 22%;

    /* Destructive - Red */
    --smx-destructive: 0 84% 60%;
    --smx-destructive-foreground: 0 0% 100%;
    --smx-destructive-light: 0 86% 97%;

    /* Success - Green */
    --smx-success: 142 76% 36%;
    --smx-success-foreground: 0 0% 100%;
    --smx-success-light: 142 69% 95%;

    /* Warning - Amber */
    --smx-warning: 38 92% 50%;
    --smx-warning-foreground: 0 0% 0%;
    --smx-warning-light: 48 100% 96%;

    /* Info - WordPress-aligned blue */
    --smx-info: 206 91% 41%;
    --smx-info-foreground: 0 0% 100%;
    --smx-info-light: 204 94% 94%;

    /* Borders & Input */
    --smx-border: 220 13% 91%;
    --smx-input: 220 13% 91%;
    --smx-ring: 175 84% 32%;

    /* Radius */
    --smx-radius: 0.5rem;
  }

  #summix-getmd-export-root {
    /* Also apply to container for consistency */
    /* Background & Foreground - WordPress-aligned grays */
    --smx-background: 220 14% 98%;
    --smx-foreground: 222 47% 11%;

    /* Card */
    --smx-card: 0 0% 100%;
    --smx-card-foreground: 222 47% 11%;

    /* Popover */
    --smx-popover: 0 0% 100%;
    --smx-popover-foreground: 222 47% 11%;

    /* Primary - Teal brand identity (darkened for WCAG AA accessibility) */
    --smx-primary: 175 84% 32%;
    --smx-primary-foreground: 0 0% 100%;

    /* Secondary - Neutral */
    --smx-secondary: 220 14% 96%;
    --smx-secondary-foreground: 215 25% 27%;

    /* Muted */
    --smx-muted: 220 14% 96%;
    --smx-muted-foreground: 215 16% 47%;

    /* Accent - Teal variant for highlights */
    --smx-accent: 175 77% 97%;
    --smx-accent-foreground: 176 86% 22%;

    /* Destructive - Red */
    --smx-destructive: 0 84% 60%;
    --smx-destructive-foreground: 0 0% 100%;
    --smx-destructive-light: 0 86% 97%;

    /* Success - Green */
    --smx-success: 142 76% 36%;
    --smx-success-foreground: 0 0% 100%;
    --smx-success-light: 142 69% 95%;

    /* Warning - Amber */
    --smx-warning: 38 92% 50%;
    --smx-warning-foreground: 0 0% 0%;
    --smx-warning-light: 48 100% 96%;

    /* Info - WordPress-aligned blue */
    --smx-info: 206 91% 41%;
    --smx-info-foreground: 0 0% 100%;
    --smx-info-light: 204 94% 94%;

    /* Borders & Input */
    --smx-border: 220 13% 91%;
    --smx-input: 220 13% 91%;
    --smx-ring: 175 84% 39%;

    /* Radius */
    --smx-radius: 0.5rem;
  }

  :root.dark,
  #summix-getmd-export-root.dark {
    /* Background & Foreground */
    --smx-background: 222 47% 8%;
    --smx-foreground: 220 14% 96%;

    /* Card */
    --smx-card: 217 33% 12%;
    --smx-card-foreground: 220 14% 96%;

    /* Popover */
    --smx-popover: 217 33% 12%;
    --smx-popover-foreground: 220 14% 96%;

    /* Primary - Teal (lightened for dark mode) */
    --smx-primary: 175 68% 50%;
    --smx-primary-foreground: 176 64% 17%;

    /* Secondary */
    --smx-secondary: 215 25% 20%;
    --smx-secondary-foreground: 220 14% 96%;

    /* Muted */
    --smx-muted: 215 25% 20%;
    --smx-muted-foreground: 215 14% 66%;

    /* Accent */
    --smx-accent: 175 92% 26%;
    --smx-accent-foreground: 175 60% 92%;

    /* Destructive */
    --smx-destructive: 0 63% 45%;
    --smx-destructive-foreground: 0 0% 100%;
    --smx-destructive-light: 0 50% 15%;

    /* Success */
    --smx-success: 142 72% 42%;
    --smx-success-foreground: 0 0% 100%;
    --smx-success-light: 142 50% 15%;

    /* Warning */
    --smx-warning: 38 92% 50%;
    --smx-warning-foreground: 0 0% 0%;
    --smx-warning-light: 38 50% 15%;

    /* Info */
    --smx-info: 206 91% 55%;
    --smx-info-foreground: 0 0% 100%;
    --smx-info-light: 206 50% 15%;

    /* Borders & Input */
    --smx-border: 215 25% 20%;
    --smx-input: 215 25% 20%;
    --smx-ring: 175 68% 50%;
  }
}

@layer base {
  * {
    @apply smx-border-border;
  }
  #summix-getmd-export-root {
    @apply smx-bg-background smx-text-foreground;
  }
}

/* Portal styling fix for Radix UI dropdowns/popovers */
/* These elements render outside #summix-getmd-export-root, so we need global rules */
/* Higher than WordPress admin bar (99999) and dialogs (100000) */
.smx-z-wordpress-dropdown {
  z-index: 100050 !important;
  background-color: hsl(var(--smx-popover)) !important;
  color: hsl(var(--smx-popover-foreground)) !important;
  border: 1px solid hsl(var(--smx-border)) !important;
}

/* UI/UX Enhancement Utilities */
@layer components {
  /* Section label typography */
  .smx-section-label {
    @apply smx-text-xs smx-font-semibold smx-uppercase smx-tracking-wider smx-text-muted-foreground;
  }
}

/* Empty state animation */
@keyframes dash-pulse {
  0%, 100% { border-color: hsl(var(--smx-border)); }
  50% { border-color: hsl(var(--smx-primary) / 0.5); }
}

.smx-empty-state-animated:hover {
  animation: dash-pulse 2s ease-in-out infinite;
}

/* RTL (Right-to-Left) Language Support */
@layer utilities {
  /* Base RTL styles */
  [dir="rtl"] {
    text-align: right;
  }

  /* Reverse grid column order for RTL */
  [dir="rtl"] .smx-grid {
    direction: rtl;
  }

  [dir="rtl"] .smx-grid > * {
    direction: rtl;
  }

  /* Swap text alignment */
  [dir="rtl"] .smx-text-left {
    text-align: right;
  }

  [dir="rtl"] .smx-text-right {
    text-align: left;
  }

  /* Swap margins */
  [dir="rtl"] .smx-ml-auto {
    margin-left: 0;
    margin-right: auto;
  }

  [dir="rtl"] .smx-mr-auto {
    margin-right: 0;
    margin-left: auto;
  }

  [dir="rtl"] .smx-ml-1 { margin-left: 0; margin-right: 0.25rem; }
  [dir="rtl"] .smx-ml-2 { margin-left: 0; margin-right: 0.5rem; }
  [dir="rtl"] .smx-ml-3 { margin-left: 0; margin-right: 0.75rem; }
  [dir="rtl"] .smx-ml-4 { margin-left: 0; margin-right: 1rem; }
  [dir="rtl"] .smx-ml-6 { margin-left: 0; margin-right: 1.5rem; }
  [dir="rtl"] .smx-ml-8 { margin-left: 0; margin-right: 2rem; }

  [dir="rtl"] .smx-mr-1 { margin-right: 0; margin-left: 0.25rem; }
  [dir="rtl"] .smx-mr-2 { margin-right: 0; margin-left: 0.5rem; }
  [dir="rtl"] .smx-mr-3 { margin-right: 0; margin-left: 0.75rem; }
  [dir="rtl"] .smx-mr-4 { margin-right: 0; margin-left: 1rem; }
  [dir="rtl"] .smx-mr-6 { margin-right: 0; margin-left: 1.5rem; }
  [dir="rtl"] .smx-mr-8 { margin-right: 0; margin-left: 2rem; }

  /* Swap paddings */
  [dir="rtl"] .smx-pl-1 { padding-left: 0; padding-right: 0.25rem; }
  [dir="rtl"] .smx-pl-2 { padding-left: 0; padding-right: 0.5rem; }
  [dir="rtl"] .smx-pl-3 { padding-left: 0; padding-right: 0.75rem; }
  [dir="rtl"] .smx-pl-4 { padding-left: 0; padding-right: 1rem; }
  [dir="rtl"] .smx-pl-6 { padding-left: 0; padding-right: 1.5rem; }
  [dir="rtl"] .smx-pl-8 { padding-left: 0; padding-right: 2rem; }

  [dir="rtl"] .smx-pr-1 { padding-right: 0; padding-left: 0.25rem; }
  [dir="rtl"] .smx-pr-2 { padding-right: 0; padding-left: 0.5rem; }
  [dir="rtl"] .smx-pr-3 { padding-right: 0; padding-left: 0.75rem; }
  [dir="rtl"] .smx-pr-4 { padding-right: 0; padding-left: 1rem; }
  [dir="rtl"] .smx-pr-6 { padding-right: 0; padding-left: 1.5rem; }
  [dir="rtl"] .smx-pr-8 { padding-right: 0; padding-left: 2rem; }

  /* Swap border radius */
  [dir="rtl"] .smx-rounded-l { border-radius: 0 0.25rem 0.25rem 0; }
  [dir="rtl"] .smx-rounded-r { border-radius: 0.25rem 0 0 0.25rem; }
  [dir="rtl"] .smx-rounded-l-md { border-radius: 0 0.375rem 0.375rem 0; }
  [dir="rtl"] .smx-rounded-r-md { border-radius: 0.375rem 0 0 0.375rem; }
  [dir="rtl"] .smx-rounded-l-lg { border-radius: 0 0.5rem 0.5rem 0; }
  [dir="rtl"] .smx-rounded-r-lg { border-radius: 0.5rem 0 0 0.5rem; }

  /* Swap borders */
  [dir="rtl"] .smx-border-l { border-left: 0; border-right-width: 1px; }
  [dir="rtl"] .smx-border-r { border-right: 0; border-left-width: 1px; }
  [dir="rtl"] .smx-border-l-2 { border-left: 0; border-right-width: 2px; }
  [dir="rtl"] .smx-border-r-2 { border-right: 0; border-left-width: 2px; }

  /* Swap positioning */
  [dir="rtl"] .smx-left-0 { left: auto; right: 0; }
  [dir="rtl"] .smx-right-0 { right: auto; left: 0; }
  [dir="rtl"] .smx-left-1 { left: auto; right: 0.25rem; }
  [dir="rtl"] .smx-right-1 { right: auto; left: 0.25rem; }
  [dir="rtl"] .smx-left-2 { left: auto; right: 0.5rem; }
  [dir="rtl"] .smx-right-2 { right: auto; left: 0.5rem; }
  [dir="rtl"] .smx-left-4 { left: auto; right: 1rem; }
  [dir="rtl"] .smx-right-4 { right: auto; left: 1rem; }

  /* Flex direction swap for RTL - reverse all row-direction flex containers */
  [dir="rtl"] .smx-flex:not(.smx-flex-col):not(.smx-flex-col-reverse) {
    flex-direction: row-reverse;
  }

  /* smx-flex-row should also reverse */
  [dir="rtl"] .smx-flex-row {
    flex-direction: row-reverse;
  }

  /* Ensure flex-wrap still wraps correctly in RTL */
  [dir="rtl"] .smx-flex-wrap {
    flex-direction: row-reverse;
  }

  /* Space utilities (gap works, but space-x needs reversal) */
  [dir="rtl"] .smx-space-x-1 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 1;
  }
  [dir="rtl"] .smx-space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 1;
  }
  [dir="rtl"] .smx-space-x-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 1;
  }
  [dir="rtl"] .smx-space-x-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 1;
  }

  /* Rotate icons for RTL */
  [dir="rtl"] .smx-rotate-rtl {
    transform: scaleX(-1);
  }

  /* Table RTL support - reverse column order */
  [dir="rtl"] table {
    direction: rtl;
  }

  /* Table text alignment */
  [dir="rtl"] th,
  [dir="rtl"] td {
    text-align: right;
  }

  /* Actions column should be left-aligned in RTL */
  [dir="rtl"] .smx-text-right {
    text-align: left;
  }

  /* Form elements */
  [dir="rtl"] input,
  [dir="rtl"] textarea,
  [dir="rtl"] select {
    text-align: right;
  }

  /* Justify content swap */
  [dir="rtl"] .smx-justify-start {
    justify-content: flex-end;
  }

  [dir="rtl"] .smx-justify-end {
    justify-content: flex-start;
  }

  /* Items alignment for start/end */
  [dir="rtl"] .smx-items-start {
    align-items: flex-end;
  }

  [dir="rtl"] .smx-items-end {
    align-items: flex-start;
  }
}