/**
 * Equivista Color System
 * Version: 1.0.0
 * Last Updated: 2026-06-08
 * 
 * Complete CSS custom properties for the Equivista color palette.
 * Import this file at the root of your stylesheet before all other styles.
 * 
 * Usage:
 *   background-color: var(--color-navy);
 *   color: var(--color-text-primary);
 *   border: 1px solid var(--color-border-light);
 */

:root {
  /* ============================================================
     PRIMARY BRAND COLORS
     ============================================================ */
  
  /* Navy - Primary color for headers, text, navigation */
  --color-navy: #0F172A;
  --color-navy-rgb: 15, 23, 42;
  
  /* Teal - Primary accent for CTAs, highlights, interactive elements */
  --color-teal: #0891B2;
  --color-teal-rgb: 8, 145, 178;
  --color-teal-hover: #0a7ba3;
  --color-teal-active: #066a8f;
  
  /* Emerald - Semantic color for growth, uptrends, positive states */
  --color-emerald: #06D6A0;
  --color-emerald-rgb: 6, 214, 160;
  --color-emerald-dark: #059669;
  
  /* Vibrant Gold - Premium accent for featured items, top performers */
  --color-gold: #FCA311;
  --color-gold-rgb: 252, 163, 17;
  --color-gold-dark: #b45309;
  
  /* Coral Red - Semantic color for risk, alerts, negative states */
  --color-coral: #FF6B6B;
  --color-coral-rgb: 255, 107, 107;
  --color-coral-dark: #dc2626;
  
  /* ============================================================
     BACKGROUND COLORS
     ============================================================ */
  
  /* White - Primary background for cards, modals, content */
  --color-bg-primary: #FFFFFF;
  --color-bg-primary-rgb: 255, 255, 255;
  
  /* Light Background - Page backgrounds, subtle separations */
  --color-bg-secondary: #F0F4F8;
  --color-bg-secondary-rgb: 240, 244, 248;
  
  /* Light Gray - Borders, dividers, subtle accents */
  --color-bg-tertiary: #E2E8F0;
  --color-bg-tertiary-rgb: 226, 232, 240;
  
  /* Dark Navy - Dark mode card backgrounds */
  --color-bg-dark: #0F172A;
  --color-bg-dark-rgb: 15, 23, 42;
  
  /* Dark Navy Alt - Elevated dark surfaces */
  --color-bg-dark-alt: #1E293B;
  --color-bg-dark-alt-rgb: 30, 41, 59;
  
  /* ============================================================
     TEXT COLORS
     ============================================================ */
  
  /* Primary Text - Headings, labels, main content */
  --color-text-primary: #0F172A;
  --color-text-primary-rgb: 15, 23, 42;
  
  /* Secondary Text - Supporting text, descriptions, captions */
  --color-text-secondary: #64748B;
  --color-text-secondary-rgb: 100, 116, 139;
  
  /* Muted Text - Hints, disabled states, subtle information */
  --color-text-muted: #94A3B8;
  --color-text-muted-rgb: 148, 163, 184;
  
  /* White Text - Text on dark backgrounds */
  --color-text-white: #FFFFFF;
  
  /* ============================================================
     SEMANTIC COLORS - POSITIVE / GROWTH
     ============================================================ */
  
  --color-positive: #06D6A0;
  --color-positive-rgb: 6, 214, 160;
  --color-positive-light: rgba(6, 214, 160, 0.15);
  --color-positive-dark: #059669;
  
  /* ============================================================
     SEMANTIC COLORS - NEUTRAL / FOCUS
     ============================================================ */
  
  --color-neutral: #0891B2;
  --color-neutral-rgb: 8, 145, 178;
  --color-neutral-light: rgba(8, 145, 178, 0.15);
  --color-neutral-hover: #0a7ba3;
  
  /* ============================================================
     SEMANTIC COLORS - PREMIUM / FEATURED
     ============================================================ */
  
  --color-premium: #FCA311;
  --color-premium-rgb: 252, 163, 17;
  --color-premium-light: rgba(252, 163, 17, 0.15);
  --color-premium-dark: #b45309;
  
  /* ============================================================
     SEMANTIC COLORS - NEGATIVE / RISK
     ============================================================ */
  
  --color-negative: #FF6B6B;
  --color-negative-rgb: 255, 107, 107;
  --color-negative-light: rgba(255, 107, 107, 0.15);
  --color-negative-dark: #dc2626;
  
  /* ============================================================
     BORDERS & DIVIDERS
     ============================================================ */
  
  --color-border-light: #E2E8F0;
  --color-border-light-rgb: 226, 232, 240;
  
  /* ============================================================
     BUTTON STATES
     ============================================================ */
  
  /* Primary Button */
  --button-primary-bg: #0891B2;
  --button-primary-text: #FFFFFF;
  --button-primary-hover-bg: #0a7ba3;
  --button-primary-active-bg: #066a8f;
  --button-primary-disabled-bg: #94A3B8;
  --button-primary-disabled-text: #FFFFFF;
  
  /* Secondary Button */
  --button-secondary-bg: transparent;
  --button-secondary-border: #0891B2;
  --button-secondary-text: #0891B2;
  --button-secondary-hover-bg: #F0F4F8;
  
  /* Destructive Button */
  --button-destructive-bg: #FF6B6B;
  --button-destructive-text: #FFFFFF;
  --button-destructive-hover-bg: #ff5252;
  
  /* ============================================================
     INPUT STATES
     ============================================================ */
  
  --input-bg: #FFFFFF;
  --input-border: #E2E8F0;
  --input-border-hover: #94A3B8;
  --input-border-focus: #0891B2;
  --input-focus-shadow: rgba(8, 145, 178, 0.1);
  --input-text: #0F172A;
  --input-placeholder: #94A3B8;
  
  /* Error State */
  --input-border-error: #FF6B6B;
  --input-error-shadow: rgba(255, 107, 107, 0.1);
  
  /* ============================================================
     CARD STYLES
     ============================================================ */
  
  --card-bg: #FFFFFF;
  --card-border: #E2E8F0;
  --card-border-width: 1.5px;
  --card-border-radius: 12px;
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  --card-shadow-hover: 0 8px 24px rgba(8, 145, 178, 0.12);
  
  /* Featured Card */
  --card-featured-border: #FCA311;
  --card-featured-border-width: 2px;
  --card-featured-bg: rgba(252, 163, 17, 0.02);
  
  /* ============================================================
     TABLE STYLES
     ============================================================ */
  
  --table-header-bg: #0F172A;
  --table-header-text: #FFFFFF;
  --table-row-alternate-bg: #F0F4F8;
  --table-border: #E2E8F0;
  
  /* ============================================================
     FOCUS & ACCESSIBILITY
     ============================================================ */
  
  --focus-outline: 0 0 0 3px rgba(8, 145, 178, 0.1);
  --focus-outline-color: #0891B2;
  
  /* ============================================================
     BADGES & TAGS
     ============================================================ */
  
  /* Positive Badge */
  --badge-positive-bg: rgba(6, 214, 160, 0.15);
  --badge-positive-text: #059669;
  
  /* Neutral Badge */
  --badge-neutral-bg: rgba(8, 145, 178, 0.15);
  --badge-neutral-text: #0891B2;
  
  /* Premium Badge */
  --badge-premium-bg: rgba(252, 163, 17, 0.15);
  --badge-premium-text: #b45309;
  
  /* Negative Badge */
  --badge-negative-bg: rgba(255, 107, 107, 0.15);
  --badge-negative-text: #dc2626;
  
  /* ============================================================
     GRADIENTS (Optional, for enhanced UI)
     ============================================================ */
  
  --gradient-navy-dark: linear-gradient(135deg, #0F172A 0%, #1a2f4a 100%);
  --gradient-teal-dark: linear-gradient(180deg, #0891B2 0%, #0a7ba3 100%);
  --gradient-gold-dark: linear-gradient(180deg, #FCA311 0%, #e89c0a 100%);
  --gradient-teal-emerald: linear-gradient(135deg, #0891B2 0%, #06D6A0 100%);
  
  /* ============================================================
     LEGACY VARIABLE NAMES (For backward compatibility)
     ============================================================ */
  
  --navy: var(--color-navy);
  --teal: var(--color-teal);
  --emerald: var(--color-emerald);
  --gold: var(--color-gold);
  --coral: var(--color-coral);
  --light-bg: var(--color-bg-secondary);
  --light-border: var(--color-bg-tertiary);
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);
}

/* ============================================================
   DARK MODE (Optional)
   Apply automatically via @media (prefers-color-scheme: dark)
   or manually via .dark class
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root {
    /* Invert backgrounds for dark mode */
    --color-bg-primary: #1E293B;
    --color-bg-secondary: #0F172A;
    --color-bg-tertiary: #2C3E50;
    
    /* Keep text readable */
    --color-text-primary: #FFFFFF;
    --color-text-secondary: #CBD5E1;
    --color-text-muted: #94A3B8;
    
    /* Adjust borders for dark mode */
    --color-border-light: #2C3E50;
  }
}

/* Alternative: Dark mode class selector */
.dark {
  --color-bg-primary: #1E293B;
  --color-bg-secondary: #0F172A;
  --color-bg-tertiary: #2C3E50;
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #CBD5E1;
  --color-text-muted: #94A3B8;
  --color-border-light: #2C3E50;
}
/*


 */

.ui-button-loading {
  background-color: var(--color-muted);
  border-color: var(--color-muted);
  color: #fff;
  cursor: wait;
  opacity: 1;
}

.ui-button-loading:hover {
  background-color: var(--color-muted);
  border-color: var(--color-muted);
}

.ui-upload-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid rgb(255 255 255 / 45%);
  border-top-color: #fff;
  border-radius: 9999px;
  flex: none;
  animation: ui-upload-spin 0.75s linear infinite;
}

@keyframes ui-upload-spin {
  to {
    transform: rotate(360deg);
  }
}

.recurring-job-log-items {
  max-width: 40rem;
}

.recurring-job-log-items-content {
  display: -webkit-box;
  max-height: 12.5rem;
  overflow: hidden;
  overflow-wrap: anywhere;
  line-height: 1.25rem;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 10;
}

.recurring-job-log-items-content:not(.recurring-job-log-items-content-expanded) {
  display: none;
}

.recurring-job-log-items-content-expanded {
  display: block;
  max-height: none;
  overflow: visible;
  -webkit-line-clamp: unset;
}

.recurring-job-log-items-toggle {
  margin-top: 0.5rem;
}

.recurring-job-log-items-toggle[aria-expanded="true"] {
  display: none;
}