/**
 * ROSSUM DESIGN SYSTEM v1.0
 * Centralized CSS for the Rossum marketplace platform
 *
 * MANDATORY: All templates must use these classes
 * DO NOT duplicate these styles in template <style> blocks
 *
 * Last Updated: 2025-10-31
 * Reference: notes/DESIGN_SYSTEM.md
 */

/* ============================================
   COLOR SYSTEM
   ============================================ */

:root {
    /* Primary Blue */
    --rossum-blue-900: #0d4493;
    --rossum-blue-700: #2364c9;
    --rossum-blue-500: #3c88ff;

    /* Purple Accents */
    --rossum-purple-500: #7B68EE;
    --rossum-purple-600: #6A5ACD;
}

/* ============================================
   GRADIENTS
   ============================================ */

/**
 * Light Cyan Gradient Background
 * MANDATORY for all page containers
 */
.bg-rossum-gradient {
    background: linear-gradient(180deg, #5DBCD2 0%, #4A9FBD 50%, #3B8BA8 100%);
}

/**
 * Alternative gradient (used in some admin templates)
 */
.bg-rossum-gradient-alt {
    background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%);
}

/* ============================================
   SHADOWS
   ============================================ */

/**
 * Dramatic 3-layer Card Shadow
 * Apply to: cards, sidebar, modals, dropdowns
 */
.card-shadow {
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.15),   /* Close layer */
        0 20px 60px rgba(0, 0, 0, 0.25),   /* Mid layer */
        0 30px 90px rgba(0, 0, 0, 0.2) !important;  /* Far layer */
}

/**
 * Bottom-only shadow (for content cards)
 */
.card-shadow-bottom {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}

/**
 * Lighter shadow (for subtle elevation)
 */
.card-shadow-light {
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 20px 25px -5px rgba(0, 0, 0, 0.05);
}

/* ============================================
   BUTTONS
   ============================================ */

/**
 * Primary Button (Blue with Glow)
 * MANDATORY for all primary actions
 */
.bg-rossum-button {
    background: linear-gradient(135deg, #3c88ff 0%, #2563eb 100%) !important;
    box-shadow: 0 4px 14px rgba(60, 136, 255, 0.4);
    transition: all 0.2s ease;
}

.bg-rossum-button:hover {
    box-shadow: 0 6px 20px rgba(60, 136, 255, 0.6);
    transform: translateY(-2px);
}

.bg-rossum-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(60, 136, 255, 0.4);
}

/**
 * Alternative button style (solid color variant)
 */
.bg-rossum-button-solid {
    background-color: #3c88ff !important;
    box-shadow:
        0 4px 14px rgba(60, 136, 255, 0.5),
        0 2px 6px rgba(60, 136, 255, 0.3) !important;
}

.bg-rossum-button-solid:hover {
    background-color: #2364c9 !important;
    box-shadow:
        0 6px 20px rgba(35, 100, 201, 0.6),
        0 3px 10px rgba(35, 100, 201, 0.4) !important;
    transform: translateY(-1px) !important;
    transition: all 0.3s ease !important;
}

/* ============================================
   INPUTS
   ============================================ */

/**
 * Modern Input Field
 * MANDATORY for all form inputs
 */
.input-modern {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 2px solid rgba(60, 136, 255, 0.2) !important;
    border-radius: 0.75rem; /* 12px - rounded-xl */
    padding: 0.75rem 1rem; /* py-3 px-4 */
    transition: all 0.3s ease !important;
}

/* Extra padding for select dropdowns to accommodate arrow */
select.input-modern {
    padding-right: 4rem !important; /* Extra generous space for dropdown arrow */
    padding-left: 1rem !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    appearance: auto; /* Ensure native dropdown arrow shows */
    -webkit-appearance: auto;
    -moz-appearance: auto;
    min-width: 280px !important; /* Force significantly wider dropdown */
    width: 100% !important; /* Allow full width within container */
}

.input-modern:focus {
    background: rgba(255, 255, 255, 1) !important;
    border-color: #3c88ff !important;
    box-shadow: 0 0 0 3px rgba(60, 136, 255, 0.1) !important;
    outline: none !important;
}

.input-modern:disabled {
    background: rgba(243, 244, 246, 0.5) !important;
    cursor: not-allowed;
}

/**
 * Input variant (Tailwind compatible)
 */
.input-field {
    @apply border-gray-300 rounded-xl px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all;
}

/* ============================================
   CARDS
   ============================================ */

/**
 * Standard Card Component
 * White background with shadow and rounded corners
 */
.rossum-card {
    background: white;
    border-radius: 2rem; /* 32px */
    padding: 2rem; /* 32px */
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.15),
        0 20px 60px rgba(0, 0, 0, 0.25),
        0 30px 90px rgba(0, 0, 0, 0.2);
}

/**
 * Compact Card (less padding)
 */
.rossum-card-compact {
    background: white;
    border-radius: 1.5rem; /* 24px */
    padding: 1.5rem; /* 24px */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* ============================================
   NAVIGATION
   ============================================ */

/**
 * Navigation Link (default state)
 */
.rossum-nav-link {
    padding: 0.5rem 1rem; /* py-2 px-4 */
    border-radius: 0.75rem; /* rounded-xl */
    color: rgb(55, 65, 81); /* text-gray-700 */
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.rossum-nav-link:hover {
    background-color: rgb(243, 244, 246); /* bg-gray-100 */
}

/**
 * Navigation Link (active state)
 */
.rossum-nav-link-active {
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    background-color: rgb(219, 234, 254); /* bg-blue-100 */
    color: rgb(29, 78, 216); /* text-blue-700 */
    font-weight: 500;
}

/* ============================================
   TABLES
   ============================================ */

/**
 * Standard Data Table
 */
.rossum-table {
    width: 100%;
    border-collapse: collapse;
}

.rossum-table th {
    text-align: left;
    font-size: 0.75rem; /* text-xs */
    font-weight: 600;
    color: rgb(75, 85, 99); /* text-gray-600 */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgb(229, 231, 235); /* border-gray-200 */
}

.rossum-table td {
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgb(243, 244, 246); /* border-gray-100 */
}

.rossum-table tbody tr:hover {
    background-color: rgb(249, 250, 251); /* bg-gray-50 */
    transition: background-color 0.15s ease;
}

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

/**
 * Status Badges
 */
.badge-base {
    display: inline-block;
    padding: 0.25rem 0.75rem; /* py-1 px-3 */
    font-size: 0.75rem; /* text-xs */
    font-weight: 600;
    border-radius: 9999px; /* rounded-full */
}

.badge-success {
    background-color: rgb(220, 252, 231); /* bg-green-100 */
    color: rgb(21, 128, 61); /* text-green-700 */
}

.badge-warning {
    background-color: rgb(254, 249, 195); /* bg-yellow-100 */
    color: rgb(161, 98, 7); /* text-yellow-700 */
}

.badge-danger {
    background-color: rgb(254, 226, 226); /* bg-red-100 */
    color: rgb(185, 28, 28); /* text-red-700 */
}

.badge-info {
    background-color: rgb(219, 234, 254); /* bg-blue-100 */
    color: rgb(29, 78, 216); /* text-blue-700 */
}

.badge-gray {
    background-color: rgb(243, 244, 246); /* bg-gray-100 */
    color: rgb(55, 65, 81); /* text-gray-700 */
}

/* ============================================
   TEXT UTILITIES
   ============================================ */

.text-rossum-blue {
    color: var(--rossum-blue-500);
}

.text-rossum-blue-dark {
    color: var(--rossum-blue-700);
}

.text-rossum-purple {
    color: var(--rossum-purple-500);
}

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

/**
 * Loading Spinner
 */
.rossum-spinner {
    border: 3px solid rgba(60, 136, 255, 0.2);
    border-top-color: #3c88ff;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    animation: spin 0.8s linear infinite;
}

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

/**
 * Skeleton Loading
 */
.rossum-skeleton {
    background: linear-gradient(
        90deg,
        rgb(243, 244, 246) 0%,
        rgb(229, 231, 235) 50%,
        rgb(243, 244, 246) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

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

/* ============================================
   FORM STATES
   ============================================ */

/**
 * Form Error State
 */
.input-error {
    border-color: rgb(239, 68, 68) !important; /* border-red-500 */
    background-color: rgb(254, 242, 242) !important; /* bg-red-50 */
}

.input-error:focus {
    border-color: rgb(220, 38, 38) !important; /* border-red-600 */
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.error-message {
    color: rgb(220, 38, 38); /* text-red-600 */
    font-size: 0.875rem; /* text-sm */
    margin-top: 0.25rem;
}

/**
 * Form Success State
 */
.input-success {
    border-color: rgb(34, 197, 94) !important; /* border-green-500 */
}

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */

/**
 * Mobile Bottom Navigation
 */
.mobile-nav-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

@media (min-width: 1024px) {
    .mobile-nav-bottom {
        display: none;
    }
}

/* ============================================
   ANIMATION UTILITIES
   ============================================ */

/**
 * Smooth Transitions (Default)
 */
.transition-smooth {
    transition: all 0.3s ease;
}

/**
 * Fade In Animation
 */
.fade-in {
    animation: fadeIn 0.3s ease-in;
}

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

/**
 * Slide Up Animation
 */
.slide-up {
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .bg-rossum-gradient,
    .card-shadow,
    .rossum-card {
        background: white !important;
        box-shadow: none !important;
    }

    nav, .mobile-nav-bottom {
        display: none !important;
    }
}

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

/**
 * Enhanced Focus Indicators (WCAG 2.1 AA Compliant)
 * Visible focus ring for keyboard navigation
 */

/* Global focus-visible for all interactive elements */
*:focus-visible {
    outline: 3px solid #3c88ff;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Buttons - Enhanced focus with inner ring */
button:focus-visible,
.bg-rossum-button:focus-visible,
.bg-rossum-button-solid:focus-visible {
    outline: 3px solid #3c88ff;
    outline-offset: 2px;
    box-shadow:
        0 0 0 3px rgba(60, 136, 255, 0.3),
        0 4px 14px rgba(60, 136, 255, 0.4);
}

/* Links - Distinct focus style */
a:focus-visible {
    outline: 3px solid #3c88ff;
    outline-offset: 3px;
    text-decoration: underline;
}

/* Form Inputs - Already styled in input-modern but add extra emphasis */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid #3c88ff;
    outline-offset: 0px;
    box-shadow: 0 0 0 4px rgba(60, 136, 255, 0.2) !important;
}

/* Checkboxes and Radio Buttons */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: 3px solid #3c88ff;
    outline-offset: 2px;
}

/* Navigation Links */
.rossum-nav-link:focus-visible {
    outline: 3px solid #3c88ff;
    outline-offset: 2px;
    background-color: rgb(219, 234, 254); /* bg-blue-100 */
}

/* Table Rows (for keyboard navigation) */
.rossum-table tbody tr:focus-within {
    outline: 2px solid #3c88ff;
    outline-offset: -2px;
}

/* Cards - for when they're interactive */
.rossum-card:focus-within,
.rossum-card-compact:focus-within {
    outline: 2px solid rgba(60, 136, 255, 0.5);
    outline-offset: 2px;
}

/* Dropdown menus and modals */
[role="menu"]:focus-within,
[role="menuitem"]:focus-visible,
[role="dialog"]:focus-within {
    outline: 2px solid #3c88ff;
}

/**
 * Skip to Content Link
 * Hidden by default, visible on focus for keyboard users
 */
.skip-to-content {
    position: absolute;
    top: -100px;
    left: 0;
    background: #3c88ff;
    color: white;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    border-radius: 0 0 0.75rem 0;
    font-weight: 600;
    z-index: 9999;
    box-shadow: 0 4px 14px rgba(60, 136, 255, 0.4);
    transition: top 0.2s ease;
}

.skip-to-content:focus {
    top: 0;
    outline: 3px solid white;
    outline-offset: -6px;
}

/**
 * Reduced Motion for Accessibility
 * Respects user's preference for reduced animations
 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .skip-to-content:focus {
        transition: none;
    }
}

/* ============================================
   DARK MODE SUPPORT (Future Enhancement)
   ============================================ */

@media (prefers-color-scheme: dark) {
    /* Dark mode styles will be added in future version */
    /* Currently, Rossum uses light mode only */
}

/* ============================================
   END OF DESIGN SYSTEM
   ============================================ */