/**
 * Support Page "Ledger" Redesign
 * Fintech-inspired visual overhaul with orange (#ea580c) accent palette
 * Scoped to: body[data-page-context="support"]
 *
 * Design Philosophy:
 * - Wise/Mercury/Stripe fintech aesthetic
 * - Support cards with gradient top accents
 * - Clean ticket form with orange focus states
 * - Monospace typography for ticket IDs
 * - Full dark mode support
 * - Responsive (768px/480px breakpoints)
 * - Print styles + reduced-motion compliance
 */

/* ============================================================
   1. CUSTOM PROPERTIES (Orange Palette)
   ============================================================ */

body[data-page-context="support"] {
    --sp-orange-50: #fff7ed !important;
    --sp-orange-100: #ffedd5 !important;
    --sp-orange-200: #fed7aa !important;
    --sp-orange-300: #fdba74 !important;
    --sp-orange-400: #fb923c !important;
    --sp-orange-500: #f97316 !important;
    --sp-orange-600: #ea580c !important;
    --sp-orange-700: #c2410c !important;
    --sp-orange-800: #9a3412 !important;
    --sp-orange-900: #7c2d12 !important;

    --sp-accent: #ea580c !important;
    --sp-accent-hover: #c2410c !important;
    --sp-accent-light: rgba(234, 88, 12, 0.08) !important;
    --sp-accent-ring: rgba(234, 88, 12, 0.12) !important;

    --sp-mono: 'SF Mono', 'Cascadia Code', 'Fira Code', 'Menlo', 'Consolas', monospace !important;

    --sp-radius: 12px !important;
    --sp-radius-sm: 8px !important;
    --sp-radius-xs: 6px !important;

    --sp-shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03) !important;
    --sp-shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04) !important;
    --sp-shadow-lg: 0 8px 24px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04) !important;

    --sp-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}


/* ============================================================
   2. PAGE HEADER
   ============================================================ */

body[data-page-context="support"] .page-header-with-actions {
    background: linear-gradient(to right, rgba(234, 88, 12, 0.03), rgba(234, 88, 12, 0.01)) !important;
    border-bottom: 1px solid rgba(234, 88, 12, 0.1) !important;
    padding: 2rem 2rem 1.5rem !important;
    margin-bottom: 2rem !important;
}

body[data-page-context="support"] .page-header-content {
    max-width: 1400px !important;
    margin: 0 auto !important;
}

body[data-page-context="support"] .page-header-top {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    margin-bottom: 0.75rem !important;
}

body[data-page-context="support"] .page-title {
    font-size: 1.875rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: #1f2937 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

body[data-page-context="support"] .page-title svg {
    width: 32px !important;
    height: 32px !important;
    color: var(--sp-accent) !important;
    flex-shrink: 0 !important;
}

body[data-page-context="support"] .header-subtitle {
    color: #6b7280 !important;
    font-size: 0.9375rem !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}


/* ============================================================
   3. SUPPORT CARDS GRID
   ============================================================ */

body[data-page-context="support"] .support-options {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem !important;
    max-width: 1400px !important;
    margin: 0 auto 2rem !important;
    padding: 0 2rem !important;
}

body[data-page-context="support"] .support-card {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: var(--sp-radius) !important;
    padding: 2rem !important;
    transition: all var(--sp-transition) !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: var(--sp-shadow-sm) !important;
}

/* 3px gradient top accent */
body[data-page-context="support"] .support-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(
        to right,
        var(--sp-orange-600),
        var(--sp-orange-500)
    ) !important;
}

body[data-page-context="support"] .support-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--sp-shadow-md) !important;
    border-color: rgba(234, 88, 12, 0.2) !important;
}

body[data-page-context="support"] .support-card h3 {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    margin: 0 0 0.5rem !important;
    letter-spacing: -0.01em !important;
}

body[data-page-context="support"] .support-card p {
    color: #6b7280 !important;
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
    margin: 0 0 1.5rem !important;
}

body[data-page-context="support"] .support-card .btn {
    width: 100% !important;
    margin-top: auto !important;
}


/* ============================================================
   4. SUPPORT CARD ICONS
   ============================================================ */

body[data-page-context="support"] .support-card-icon {
    width: 48px !important;
    height: 48px !important;
    background: linear-gradient(
        135deg,
        var(--sp-accent-light),
        rgba(234, 88, 12, 0.04)
    ) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.5rem !important;
    margin-bottom: 1rem !important;
    transition: all var(--sp-transition) !important;
}

body[data-page-context="support"] .support-card:hover .support-card-icon {
    transform: scale(1.05) !important;
    background: linear-gradient(
        135deg,
        rgba(234, 88, 12, 0.12),
        rgba(234, 88, 12, 0.06)
    ) !important;
}


/* ============================================================
   5. SUCCESS & ERROR MESSAGES
   ============================================================ */

body[data-page-context="support"] .success-message,
body[data-page-context="support"] .error-message {
    max-width: 1400px !important;
    margin: 0 auto 1.5rem !important;
    padding: 1rem 1.5rem !important;
    border-radius: var(--sp-radius-sm) !important;
    font-size: 0.9375rem !important;
    line-height: 1.5 !important;
    border-left: 4px solid !important;
    box-shadow: var(--sp-shadow-sm) !important;
}

body[data-page-context="support"] .success-message {
    background: #f0fdf4 !important;
    color: #166534 !important;
    border-left-color: #22c55e !important;
}

body[data-page-context="support"] .error-message {
    background: #fef2f2 !important;
    color: #991b1b !important;
    border-left-color: #ef4444 !important;
}

body[data-page-context="support"] .success-message[style*="display: none"],
body[data-page-context="support"] .error-message[style*="display: none"] {
    display: none !important;
}


/* ============================================================
   6. TICKET FORM CONTAINER
   ============================================================ */

body[data-page-context="support"] .support-form {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 2rem 2rem !important;
    display: none !important;
}

body[data-page-context="support"] .support-form.active {
    display: block !important;
}

body[data-page-context="support"] .support-form > div {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: var(--sp-radius) !important;
    padding: 2rem !important;
    box-shadow: var(--sp-shadow-sm) !important;
}

body[data-page-context="support"] .support-form h3 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    margin: 0 0 1.5rem !important;
    letter-spacing: -0.01em !important;
    padding-bottom: 1rem !important;
    border-bottom: 2px solid var(--sp-accent-light) !important;
}


/* ============================================================
   7. FORM ELEMENTS
   ============================================================ */

body[data-page-context="support"] .form-group {
    margin-bottom: 1.5rem !important;
}

body[data-page-context="support"] .form-group:last-of-type {
    margin-bottom: 2rem !important;
}

body[data-page-context="support"] .form-group label {
    display: block !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #374151 !important;
    margin-bottom: 0.5rem !important;
    letter-spacing: 0.01em !important;
}

body[data-page-context="support"] .form-group input[type="text"],
body[data-page-context="support"] .form-group select,
body[data-page-context="support"] .form-group textarea {
    width: 100% !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.9375rem !important;
    color: #1f2937 !important;
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    border-radius: var(--sp-radius-sm) !important;
    transition: all var(--sp-transition) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

body[data-page-context="support"] .form-group input[type="text"]:focus,
body[data-page-context="support"] .form-group select:focus,
body[data-page-context="support"] .form-group textarea:focus {
    outline: none !important;
    border-color: var(--sp-accent) !important;
    box-shadow: 0 0 0 3px var(--sp-accent-ring) !important;
}

body[data-page-context="support"] .form-group textarea {
    min-height: 120px !important;
    resize: vertical !important;
    line-height: 1.6 !important;
}

body[data-page-context="support"] .form-group select {
    cursor: pointer !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-position: right 0.75rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.25em !important;
    padding-right: 2.5rem !important;
}

body[data-page-context="support"] .form-group input::placeholder,
body[data-page-context="support"] .form-group textarea::placeholder {
    color: #9ca3af !important;
}


/* ============================================================
   8. FORM ACTIONS & BUTTONS
   ============================================================ */

body[data-page-context="support"] .form-actions {
    display: flex !important;
    gap: 1rem !important;
    justify-content: flex-end !important;
    padding-top: 1rem !important;
    border-top: 1px solid #f3f4f6 !important;
}

body[data-page-context="support"] .btn {
    padding: 0.75rem 1.5rem !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    border-radius: var(--sp-radius-sm) !important;
    transition: all var(--sp-transition) !important;
    cursor: pointer !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    text-decoration: none !important;
}

/* Primary button (orange) */
body[data-page-context="support"] .btn:not(.btn-secondary) {
    background: var(--sp-accent) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(234, 88, 12, 0.3) !important;
}

body[data-page-context="support"] .btn:not(.btn-secondary):hover {
    background: var(--sp-accent-hover) !important;
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.4) !important;
    transform: translateY(-1px) !important;
}

body[data-page-context="support"] .btn:not(.btn-secondary):active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 3px rgba(234, 88, 12, 0.3) !important;
}

/* Secondary button (outlined) */
body[data-page-context="support"] .btn-secondary {
    background: #ffffff !important;
    color: #374151 !important;
    border: 1px solid #d1d5db !important;
    box-shadow: var(--sp-shadow-sm) !important;
}

body[data-page-context="support"] .btn-secondary:hover {
    background: #f9fafb !important;
    border-color: #9ca3af !important;
    box-shadow: var(--sp-shadow-md) !important;
}

body[data-page-context="support"] .btn-secondary:active {
    background: #f3f4f6 !important;
}


/* ============================================================
   9. TYPOGRAPHY ENHANCEMENTS
   ============================================================ */

body[data-page-context="support"] {
    font-variant-numeric: tabular-nums !important;
}

/* Monospace for ticket IDs (if present) */
body[data-page-context="support"] .ticket-id,
body[data-page-context="support"] [data-ticket-id] {
    font-family: var(--sp-mono) !important;
    font-size: 0.875rem !important;
    color: var(--sp-accent) !important;
    background: var(--sp-accent-light) !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: var(--sp-radius-xs) !important;
    letter-spacing: 0.02em !important;
}


/* ============================================================
   10. LOADING STATES
   ============================================================ */

body[data-page-context="support"] .btn[disabled],
body[data-page-context="support"] .btn.loading {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

body[data-page-context="support"] .spinner {
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-top-color: #ffffff !important;
    border-radius: 50% !important;
    width: 16px !important;
    height: 16px !important;
    animation: sp-spin 0.6s linear infinite !important;
}

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


/* ============================================================
   11. DARK MODE (prefers-color-scheme)
   ============================================================ */

@media (prefers-color-scheme: dark) {
    body[data-page-context="support"] {
        --sp-orange-50: #431407 !important;
        --sp-orange-100: #7c2d12 !important;
        --sp-orange-900: #ffedd5 !important;
    }

    body[data-page-context="support"] .page-header-with-actions {
        background: linear-gradient(to right, rgba(234, 88, 12, 0.08), rgba(234, 88, 12, 0.03)) !important;
        border-bottom-color: rgba(234, 88, 12, 0.15) !important;
    }

    body[data-page-context="support"] .page-title {
        color: #f9fafb !important;
    }

    body[data-page-context="support"] .header-subtitle {
        color: #9ca3af !important;
    }

    body[data-page-context="support"] .support-card {
        background: #1f2937 !important;
        border-color: #374151 !important;
    }

    body[data-page-context="support"] .support-card:hover {
        border-color: rgba(234, 88, 12, 0.3) !important;
    }

    body[data-page-context="support"] .support-card h3 {
        color: #f9fafb !important;
    }

    body[data-page-context="support"] .support-card p {
        color: #d1d5db !important;
    }

    body[data-page-context="support"] .support-card-icon {
        background: linear-gradient(
            135deg,
            rgba(234, 88, 12, 0.15),
            rgba(234, 88, 12, 0.08)
        ) !important;
    }

    body[data-page-context="support"] .support-form > div {
        background: #1f2937 !important;
        border-color: #374151 !important;
    }

    body[data-page-context="support"] .support-form h3 {
        color: #f9fafb !important;
        border-bottom-color: rgba(234, 88, 12, 0.2) !important;
    }

    body[data-page-context="support"] .form-group label {
        color: #e5e7eb !important;
    }

    body[data-page-context="support"] .form-group input[type="text"],
    body[data-page-context="support"] .form-group select,
    body[data-page-context="support"] .form-group textarea {
        background: #111827 !important;
        border-color: #4b5563 !important;
        color: #f9fafb !important;
    }

    body[data-page-context="support"] .form-group input::placeholder,
    body[data-page-context="support"] .form-group textarea::placeholder {
        color: #6b7280 !important;
    }

    body[data-page-context="support"] .form-actions {
        border-top-color: #374151 !important;
    }

    body[data-page-context="support"] .btn-secondary {
        background: #374151 !important;
        color: #f9fafb !important;
        border-color: #4b5563 !important;
    }

    body[data-page-context="support"] .btn-secondary:hover {
        background: #4b5563 !important;
        border-color: #6b7280 !important;
    }

    body[data-page-context="support"] .success-message {
        background: rgba(34, 197, 94, 0.1) !important;
        color: #86efac !important;
        border-left-color: #22c55e !important;
    }

    body[data-page-context="support"] .error-message {
        background: rgba(239, 68, 68, 0.1) !important;
        color: #fca5a5 !important;
        border-left-color: #ef4444 !important;
    }
}


/* ============================================================
   12. DARK MODE (data-theme attribute)
   ============================================================ */

body[data-page-context="support"][data-theme="dark"] {
    --sp-orange-50: #431407 !important;
    --sp-orange-100: #7c2d12 !important;
    --sp-orange-900: #ffedd5 !important;
}

body[data-page-context="support"][data-theme="dark"] .page-header-with-actions {
    background: linear-gradient(to right, rgba(234, 88, 12, 0.08), rgba(234, 88, 12, 0.03)) !important;
    border-bottom-color: rgba(234, 88, 12, 0.15) !important;
}

body[data-page-context="support"][data-theme="dark"] .page-title {
    color: #f9fafb !important;
}

body[data-page-context="support"][data-theme="dark"] .header-subtitle {
    color: #9ca3af !important;
}

body[data-page-context="support"][data-theme="dark"] .support-card {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

body[data-page-context="support"][data-theme="dark"] .support-card:hover {
    border-color: rgba(234, 88, 12, 0.3) !important;
}

body[data-page-context="support"][data-theme="dark"] .support-card h3 {
    color: #f9fafb !important;
}

body[data-page-context="support"][data-theme="dark"] .support-card p {
    color: #d1d5db !important;
}

body[data-page-context="support"][data-theme="dark"] .support-card-icon {
    background: linear-gradient(
        135deg,
        rgba(234, 88, 12, 0.15),
        rgba(234, 88, 12, 0.08)
    ) !important;
}

body[data-page-context="support"][data-theme="dark"] .support-form > div {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

body[data-page-context="support"][data-theme="dark"] .support-form h3 {
    color: #f9fafb !important;
    border-bottom-color: rgba(234, 88, 12, 0.2) !important;
}

body[data-page-context="support"][data-theme="dark"] .form-group label {
    color: #e5e7eb !important;
}

body[data-page-context="support"][data-theme="dark"] .form-group input[type="text"],
body[data-page-context="support"][data-theme="dark"] .form-group select,
body[data-page-context="support"][data-theme="dark"] .form-group textarea {
    background: #111827 !important;
    border-color: #4b5563 !important;
    color: #f9fafb !important;
}

body[data-page-context="support"][data-theme="dark"] .form-group input::placeholder,
body[data-page-context="support"][data-theme="dark"] .form-group textarea::placeholder {
    color: #6b7280 !important;
}

body[data-page-context="support"][data-theme="dark"] .form-actions {
    border-top-color: #374151 !important;
}

body[data-page-context="support"][data-theme="dark"] .btn-secondary {
    background: #374151 !important;
    color: #f9fafb !important;
    border-color: #4b5563 !important;
}

body[data-page-context="support"][data-theme="dark"] .btn-secondary:hover {
    background: #4b5563 !important;
    border-color: #6b7280 !important;
}

body[data-page-context="support"][data-theme="dark"] .success-message {
    background: rgba(34, 197, 94, 0.1) !important;
    color: #86efac !important;
    border-left-color: #22c55e !important;
}

body[data-page-context="support"][data-theme="dark"] .error-message {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #fca5a5 !important;
    border-left-color: #ef4444 !important;
}


/* ============================================================
   13. RESPONSIVE (Tablet - 768px)
   ============================================================ */

@media (max-width: 768px) {
    body[data-page-context="support"] .page-header-with-actions {
        padding: 1.5rem 1rem 1rem !important;
    }

    body[data-page-context="support"] .page-title {
        font-size: 1.5rem !important;
    }

    body[data-page-context="support"] .page-title svg {
        width: 28px !important;
        height: 28px !important;
    }

    body[data-page-context="support"] .support-options {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        padding: 0 1rem !important;
    }

    body[data-page-context="support"] .support-card {
        padding: 1.5rem !important;
    }

    body[data-page-context="support"] .support-form {
        padding: 0 1rem 1.5rem !important;
    }

    body[data-page-context="support"] .support-form > div {
        padding: 1.5rem !important;
    }

    body[data-page-context="support"] .form-actions {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    body[data-page-context="support"] .btn {
        width: 100% !important;
    }
}


/* ============================================================
   14. RESPONSIVE (Mobile - 480px)
   ============================================================ */

@media (max-width: 480px) {
    body[data-page-context="support"] .page-header-with-actions {
        padding: 1rem 0.75rem 0.75rem !important;
    }

    body[data-page-context="support"] .page-title {
        font-size: 1.25rem !important;
    }

    body[data-page-context="support"] .page-title svg {
        width: 24px !important;
        height: 24px !important;
    }

    body[data-page-context="support"] .header-subtitle {
        font-size: 0.875rem !important;
    }

    body[data-page-context="support"] .support-options {
        padding: 0 0.75rem !important;
        gap: 0.75rem !important;
    }

    body[data-page-context="support"] .support-card {
        padding: 1.25rem !important;
    }

    body[data-page-context="support"] .support-card-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.25rem !important;
    }

    body[data-page-context="support"] .support-form {
        padding: 0 0.75rem 1rem !important;
    }

    body[data-page-context="support"] .support-form > div {
        padding: 1.25rem !important;
    }

    body[data-page-context="support"] .support-form h3 {
        font-size: 1.125rem !important;
    }

    body[data-page-context="support"] .form-group label {
        font-size: 0.8125rem !important;
    }

    body[data-page-context="support"] .form-group input[type="text"],
    body[data-page-context="support"] .form-group select,
    body[data-page-context="support"] .form-group textarea {
        font-size: 0.875rem !important;
        padding: 0.625rem 0.875rem !important;
    }
}


/* ============================================================
   15. PRINT STYLES
   ============================================================ */

@media print {
    body[data-page-context="support"] .page-header-with-actions {
        background: none !important;
        border-bottom: 1px solid #000 !important;
    }

    body[data-page-context="support"] .support-card {
        box-shadow: none !important;
        border: 1px solid #000 !important;
        page-break-inside: avoid !important;
    }

    body[data-page-context="support"] .support-card::before {
        display: none !important;
    }

    body[data-page-context="support"] .support-card:hover {
        transform: none !important;
    }

    body[data-page-context="support"] .btn {
        border: 1px solid #000 !important;
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
    }

    body[data-page-context="support"] .support-form > div {
        box-shadow: none !important;
        border: 1px solid #000 !important;
    }
}


/* ============================================================
   16. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    body[data-page-context="support"] * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    body[data-page-context="support"] .support-card:hover {
        transform: none !important;
    }

    body[data-page-context="support"] .support-card-icon:hover {
        transform: none !important;
    }

    body[data-page-context="support"] .btn:hover {
        transform: none !important;
    }
}