/* ============================================
   GLOBAL STYLES - Clean Modern SaaS Theme
   File: styles/global-styles.css
   Version: 5.0 (BS3 Compatible)

   Brand: #733FC1
   Philosophy: Clean, spacious, light, trustworthy
   Inspiration: Stripe, Clerk, Linear, Vercel

   - All custom utilities prefixed with jpl-
   - BS3 classes left untouched
   - Loads AFTER bootstrap 3
   ============================================ */


/* ============================================
   1. CSS CUSTOM PROPERTIES
   ============================================ */
:root {
    /* ==========================================
       BRAND COLORS — #733FC1
       Clean & accessible
       ========================================== */
    --jpl-brand-25:  #FBFAFF;
    --jpl-brand-50:  #F5F0FF;
    --jpl-brand-100: #EBE1FF;
    --jpl-brand-200: #D4C0FF;
    --jpl-brand-300: #B794F6;
    --jpl-brand-400: #9B6AE8;
    --jpl-brand-500: #8452D6;
    --jpl-brand-600: #733FC1;
    --jpl-brand-700: #5E2FA3;
    --jpl-brand-800: #4A2585;
    --jpl-brand-900: #381C66;
    --jpl-brand-950: #1E0E3D;

    /* ==========================================
       NEUTRAL PALETTE — Clean, slightly cool
       Light end is very light for spacious feel
       ========================================== */
    --jpl-gray-25:  #FCFCFD;
    --jpl-gray-50:  #F8F9FB;
    --jpl-gray-100: #F1F3F6;
    --jpl-gray-200: #E3E6EB;
    --jpl-gray-300: #CDD2DA;
    --jpl-gray-400: #9CA3B3;
    --jpl-gray-500: #6C7486;
    --jpl-gray-600: #4B5363;
    --jpl-gray-700: #374151;
    --jpl-gray-800: #1F2937;
    --jpl-gray-900: #111827;
    --jpl-gray-950: #0B0F1A;

    /* ==========================================
       STATUS COLORS — Clear & accessible
       ========================================== */
    --jpl-success-25:  #F0FFF5;
    --jpl-success-50:  #ECFDF5;
    --jpl-success-100: #D1FAE5;
    --jpl-success-500: #10B981;
    --jpl-success-600: #059669;
    --jpl-success-700: #047857;

    --jpl-error-25:  #FFFBFB;
    --jpl-error-50:  #FEF2F2;
    --jpl-error-100: #FEE2E2;
    --jpl-error-300: #FCA5A5;
    --jpl-error-500: #EF4444;
    --jpl-error-600: #DC2626;
    --jpl-error-700: #B91C1C;

    --jpl-warning-25:  #FFFCF5;
    --jpl-warning-50:  #FFFBEB;
    --jpl-warning-100: #FEF3C7;
    --jpl-warning-500: #F59E0B;
    --jpl-warning-600: #D97706;

    /* ==========================================
       TYPOGRAPHY — Inter for clean SaaS look
       ========================================== */
    --jpl-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* ==========================================
       SHADOWS — Subtle, layered, refined
       Stripe-style: barely visible but adds depth
       ========================================== */
    --jpl-shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.04);
    --jpl-shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
    --jpl-shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.03);
    --jpl-shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.03);
    --jpl-shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
    --jpl-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.1);

    /* Brand accent shadows (for buttons, focused cards) */
    --jpl-shadow-brand-sm: 0 1px 3px rgba(115, 63, 193, 0.12);
    --jpl-shadow-brand-md: 0 4px 12px rgba(115, 63, 193, 0.15);
    --jpl-shadow-brand-lg: 0 8px 24px rgba(115, 63, 193, 0.18);

    /* ==========================================
       FOCUS RINGS — Subtle, brand-colored
       Thinner ring than before (3px → 2px spread)
       ========================================== */
    --jpl-ring-brand: 0 0 0 2px #fff, 0 0 0 4px rgba(115, 63, 193, 0.25);
    --jpl-ring-error: 0 0 0 2px #fff, 0 0 0 4px rgba(239, 68, 68, 0.2);
    --jpl-ring-gray:  0 0 0 2px #fff, 0 0 0 4px rgba(107, 116, 134, 0.15);

    /* ==========================================
       TRANSITIONS — Snappy & modern
       ========================================== */
    --jpl-transition-fast:     100ms ease;
    --jpl-transition-base:     150ms ease;
    --jpl-transition-moderate:  250ms ease;
    --jpl-transition-slow:     400ms cubic-bezier(0.16, 1, 0.3, 1);

    /* ==========================================
       BORDER RADIUS — Clean, consistent
       ========================================== */
    --jpl-radius-xs: 4px;
    --jpl-radius-sm: 6px;
    --jpl-radius-md: 8px;
    --jpl-radius-lg: 10px;
    --jpl-radius-xl: 12px;
    --jpl-radius-2xl: 16px;

    /* ==========================================
       BORDERS — Lighter for cleaner look
       ========================================== */
    --jpl-border-color: var(--jpl-gray-200);
    --jpl-border-light: var(--jpl-gray-100);

    /* ==========================================
       Z-INDEX
       ========================================== */
    --jpl-z-dropdown: 1000;
    --jpl-z-sticky: 1020;
    --jpl-z-fixed: 1030;
    --jpl-z-modal-backdrop: 1040;
    --jpl-z-modal: 1050;
    --jpl-z-overlay: 1060;
    --jpl-z-toast: 1080;
    --jpl-z-tooltip: 1090;
}


/* ============================================
   2. BASE STYLES
   ============================================ */
*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    font-family: var(--jpl-font-primary) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    color: var(--jpl-gray-900);
    background-color: #fff;
    line-height: 1.5;
}

/* Links — clean, no underline */
a {
    color: var(--jpl-brand-600);
    text-decoration: none;
    -webkit-transition: color var(--jpl-transition-fast);
    transition: color var(--jpl-transition-fast);
}

a:hover,
a:focus {
    color: var(--jpl-brand-700);
    text-decoration: none;
}

/* Selection — brand purple */
::selection {
    background: var(--jpl-brand-100);
    color: var(--jpl-brand-900);
}

::-moz-selection {
    background: var(--jpl-brand-100);
    color: var(--jpl-brand-900);
}

/* BS3 form-control focus override */
.form-control:focus {
    border-color: var(--jpl-brand-400);
    -webkit-box-shadow: var(--jpl-ring-brand);
    box-shadow: var(--jpl-ring-brand);
}


/* ============================================
   3. SCROLLBAR — Thin, minimal
   ============================================ */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--jpl-gray-300);
    border-radius: 100px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--jpl-gray-400);
}


/* ============================================
   4. FLEXBOX UTILITIES
   ============================================ */
.jpl-d-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
}

.jpl-d-inline-flex {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
}

.jpl-d-block { display: block !important; }
.jpl-d-inline-block { display: inline-block !important; }
.jpl-d-inline { display: inline !important; }
.jpl-d-none { display: none !important; }

.jpl-flex-row {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
}

.jpl-flex-column {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
}

.jpl-flex-wrap { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; }
.jpl-flex-nowrap { -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; }
.jpl-flex-1 { -webkit-box-flex: 1 !important; -ms-flex: 1 1 0% !important; flex: 1 1 0% !important; }
.jpl-flex-shrink-0 { -ms-flex-negative: 0 !important; flex-shrink: 0 !important; }

.jpl-justify-start { -webkit-box-pack: start !important; -ms-flex-pack: start !important; justify-content: flex-start !important; }
.jpl-justify-center { -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; }
.jpl-justify-end { -webkit-box-pack: end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; }
.jpl-justify-between { -webkit-box-pack: justify !important; -ms-flex-pack: justify !important; justify-content: space-between !important; }

.jpl-items-start { -webkit-box-align: start !important; -ms-flex-align: start !important; align-items: flex-start !important; }
.jpl-items-center { -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; }
.jpl-items-end { -webkit-box-align: end !important; -ms-flex-align: end !important; align-items: flex-end !important; }
.jpl-items-stretch { -webkit-box-align: stretch !important; -ms-flex-align: stretch !important; align-items: stretch !important; }

.jpl-self-center { -ms-flex-item-align: center !important; align-self: center !important; }

.jpl-gap-1 { gap: 0.25rem; }
.jpl-gap-2 { gap: 0.5rem; }
.jpl-gap-3 { gap: 0.75rem; }
.jpl-gap-4 { gap: 1rem; }
.jpl-gap-5 { gap: 1.25rem; }
.jpl-gap-6 { gap: 1.5rem; }
.jpl-gap-8 { gap: 2rem; }


/* ============================================
   5. SPACING UTILITIES
   ============================================ */
.jpl-m-0 { margin: 0 !important; }
.jpl-mt-1 { margin-top: 0.25rem !important; }
.jpl-mt-2 { margin-top: 0.5rem !important; }
.jpl-mt-3 { margin-top: 0.75rem !important; }
.jpl-mt-4 { margin-top: 1rem !important; }
.jpl-mt-5 { margin-top: 1.25rem !important; }
.jpl-mt-6 { margin-top: 1.5rem !important; }
.jpl-mt-8 { margin-top: 2rem !important; }
.jpl-mt-10 { margin-top: 2.5rem !important; }

.jpl-mb-0 { margin-bottom: 0 !important; }
.jpl-mb-1 { margin-bottom: 0.25rem !important; }
.jpl-mb-2 { margin-bottom: 0.5rem !important; }
.jpl-mb-3 { margin-bottom: 0.75rem !important; }
.jpl-mb-4 { margin-bottom: 1rem !important; }
.jpl-mb-5 { margin-bottom: 1.25rem !important; }
.jpl-mb-6 { margin-bottom: 1.5rem !important; }
.jpl-mb-8 { margin-bottom: 2rem !important; }

.jpl-ml-2 { margin-left: 0.5rem !important; }
.jpl-mr-2 { margin-right: 0.5rem !important; }
.jpl-mx-auto { margin-left: auto !important; margin-right: auto !important; }

.jpl-p-0 { padding: 0 !important; }
.jpl-p-2 { padding: 0.5rem !important; }
.jpl-p-3 { padding: 0.75rem !important; }
.jpl-p-4 { padding: 1rem !important; }
.jpl-p-5 { padding: 1.25rem !important; }
.jpl-p-6 { padding: 1.5rem !important; }
.jpl-p-8 { padding: 2rem !important; }

.jpl-px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
.jpl-px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.jpl-py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.jpl-py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }


/* ============================================
   6. TYPOGRAPHY UTILITIES
   ============================================ */
.jpl-text-xs { font-size: 0.75rem !important; }
.jpl-text-sm { font-size: 0.875rem !important; }
.jpl-text-md { font-size: 1rem !important; }
.jpl-text-lg { font-size: 1.125rem !important; }
.jpl-text-xl { font-size: 1.25rem !important; }

.jpl-display-xs { font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.02em; }
.jpl-display-sm { font-size: 1.875rem; line-height: 1.25; letter-spacing: -0.02em; }
.jpl-display-md { font-size: 2.25rem; line-height: 1.2; letter-spacing: -0.02em; }
.jpl-display-lg { font-size: 3rem; line-height: 1.15; letter-spacing: -0.02em; }

.jpl-font-light { font-weight: 300 !important; }
.jpl-font-normal { font-weight: 400 !important; }
.jpl-font-medium { font-weight: 500 !important; }
.jpl-font-semibold { font-weight: 600 !important; }
.jpl-font-bold { font-weight: 700 !important; }

.jpl-text-brand { color: var(--jpl-brand-600) !important; }
.jpl-text-secondary { color: var(--jpl-gray-600) !important; }
.jpl-text-tertiary { color: var(--jpl-gray-500) !important; }
.jpl-text-placeholder { color: var(--jpl-gray-400) !important; }
.jpl-text-error { color: var(--jpl-error-600) !important; }
.jpl-text-success { color: var(--jpl-success-600) !important; }
.jpl-text-warning { color: var(--jpl-warning-600) !important; }
.jpl-text-white { color: #fff !important; }

.jpl-text-center { text-align: center !important; }
.jpl-text-left { text-align: left !important; }
.jpl-text-right { text-align: right !important; }


/* ============================================
   7. WIDTH UTILITIES
   ============================================ */
.jpl-w-full { width: 100% !important; }
.jpl-w-auto { width: auto !important; }
.jpl-max-w-xs { max-width: 320px; }
.jpl-max-w-sm { max-width: 384px; }
.jpl-max-w-md { max-width: 448px; }
.jpl-max-w-lg { max-width: 512px; }


/* ============================================
   8. BORDER UTILITIES
   ============================================ */
.jpl-rounded-xs { border-radius: var(--jpl-radius-xs) !important; }
.jpl-rounded-sm { border-radius: var(--jpl-radius-sm) !important; }
.jpl-rounded-md { border-radius: var(--jpl-radius-md) !important; }
.jpl-rounded-lg { border-radius: var(--jpl-radius-lg) !important; }
.jpl-rounded-xl { border-radius: var(--jpl-radius-xl) !important; }
.jpl-rounded-2xl { border-radius: var(--jpl-radius-2xl) !important; }
.jpl-rounded-full { border-radius: 9999px !important; }


/* ============================================
   9. POSITION UTILITIES
   ============================================ */
.jpl-relative { position: relative !important; }
.jpl-absolute { position: absolute !important; }
.jpl-fixed { position: fixed !important; }
.jpl-inset-0 { top: 0; right: 0; bottom: 0; left: 0; }


/* ============================================
   10. TRANSITION UTILITIES
   ============================================ */
.jpl-transition-all {
    -webkit-transition: all var(--jpl-transition-base);
    transition: all var(--jpl-transition-base);
}

.jpl-transition-colors {
    -webkit-transition: color var(--jpl-transition-base), background-color var(--jpl-transition-base), border-color var(--jpl-transition-base);
    transition: color var(--jpl-transition-base), background-color var(--jpl-transition-base), border-color var(--jpl-transition-base);
}


/* ============================================
   11. CURSOR UTILITIES
   ============================================ */
.jpl-cursor-pointer { cursor: pointer !important; }
.jpl-cursor-not-allowed { cursor: not-allowed !important; }


/* ============================================
   12. ANIMATIONS
   ============================================ */
@-webkit-keyframes jplFadeInUp {
    from { opacity: 0; -webkit-transform: translateY(8px); transform: translateY(8px); }
    to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}

@keyframes jplFadeInUp {
    from { opacity: 0; -webkit-transform: translateY(8px); transform: translateY(8px); }
    to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}

.jpl-animate-fade-in-up {
    -webkit-animation: jplFadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation: jplFadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.jpl-animate-delay-1 { -webkit-animation-delay: 60ms; animation-delay: 60ms; }
.jpl-animate-delay-2 { -webkit-animation-delay: 120ms; animation-delay: 120ms; }
.jpl-animate-delay-3 { -webkit-animation-delay: 180ms; animation-delay: 180ms; }
.jpl-animate-delay-4 { -webkit-animation-delay: 240ms; animation-delay: 240ms; }


/* ============================================
   13. ANGULARJS CLOAK
   ============================================ */
[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
    display: none !important;
}