/*
 * gig-design-system.css — Coverband unified visual layer
 * -------------------------------------------------------
 * Loaded in base.html AFTER TailwindCSS CDN. Overrides Tailwind's
 * default gray-centric form and component styles with the warm
 * gig-* palette so every page looks intentionally designed.
 *
 * Principle: cascade-level normalisation — no template changes needed.
 * Every <input>, <select>, <button>, <table>, <a.pagination>, etc.
 * inherits a consistent warm treatment. Templates can still override
 * with inline Tailwind utilities.
 *
 * Color tokens (matching Tailwind config in base.html):
 *   --gig-dark:    #231F20
 *   --gig-surface: #FFF9F0
 *   --gig-primary: #FF6120
 *   --gig-accent:  #FFDC6E
 *   --gig-success: #01985A
 *   --gig-danger:  #C81A11
 *   --gig-info:    #231F20
 *   --gig-special: #E04293
 */

:root {
    --gig-dark: #231F20;
    --gig-surface: #FFF9F0;
    --gig-primary: #FF6120;
    --gig-primary-hover: #E85515;
    --gig-accent: #FFDC6E;
    --gig-success: #01985A;
    --gig-danger: #C81A11;
    --gig-info: #FF6120;
    --gig-border: rgba(35, 31, 32, 0.08);
    --gig-border-strong: rgba(35, 31, 32, 0.15);
    --gig-shadow-sm: 0 1px 3px rgba(35, 31, 32, 0.06);
    --gig-shadow-md: 0 4px 12px rgba(35, 31, 32, 0.08);
    --gig-shadow-lg: 0 8px 24px rgba(35, 31, 32, 0.1);
    --gig-radius-sm: 8px;
    --gig-radius-md: 12px;
    --gig-radius-lg: 16px;
    --gig-radius-xl: 20px;
}

/* ============================================================
 * 1. TYPOGRAPHY — warm, readable, consistent
 * ============================================================ */

main h1, main .text-3xl, main .text-4xl {
    letter-spacing: -0.02em;
    font-weight: 800;
}

main h2, main .text-2xl {
    letter-spacing: -0.01em;
    font-weight: 700;
}

main h3, main .text-xl {
    font-weight: 700;
}

/* ============================================================
 * 2. FORM CONTROLS — warm cream bg, soft orange focus
 * ============================================================
 * Replaces default Tailwind gray borders/backgrounds on inputs.
 */

main input[type="text"],
main input[type="email"],
main input[type="password"],
main input[type="search"],
main input[type="tel"],
main input[type="url"],
main input[type="number"],
main input[type="date"],
main input[type="time"],
main input[type="datetime-local"],
main select,
main textarea {
    background-color: rgba(255, 249, 240, 0.6);
    border: 1.5px solid var(--gig-border-strong);
    border-radius: var(--gig-radius-sm);
    color: var(--gig-dark);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

main input:focus,
main select:focus,
main textarea:focus {
    border-color: var(--gig-primary);
    box-shadow: 0 0 0 3px rgba(255, 97, 32, 0.15);
    outline: none;
}

main input::placeholder,
main textarea::placeholder {
    color: rgba(35, 31, 32, 0.35);
}

/* Checkboxes & radios — warm accent */
main input[type="checkbox"]:checked,
main input[type="radio"]:checked {
    accent-color: var(--gig-primary);
}

/* Labels — slightly bolder */
main label {
    font-weight: 600;
    color: var(--gig-dark);
}

/* ============================================================
 * 3. BUTTONS — gradient warm, press feedback
 * ============================================================ */

/* Primary buttons (orange backgrounds in existing templates) */
main .bg-gig-primary,
main a.bg-gig-primary,
main button.bg-gig-primary {
    background: linear-gradient(135deg, #FF8C20 0%, #FF5510 100%) !important;
    box-shadow: var(--gig-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition: transform 100ms ease, box-shadow 100ms ease;
    -webkit-tap-highlight-color: transparent;
}

main .bg-gig-primary:hover,
main a.bg-gig-primary:hover,
main button.bg-gig-primary:hover {
    box-shadow: var(--gig-shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

main .bg-gig-primary:active,
main a.bg-gig-primary:active,
main button.bg-gig-primary:active {
    transform: scale(0.97);
    box-shadow: var(--gig-shadow-sm);
}

/* Success buttons */
main .bg-gig-success,
main button.bg-gig-success {
    background: linear-gradient(135deg, #02B06A 0%, #01985A 100%) !important;
    box-shadow: var(--gig-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Danger buttons */
main .bg-gig-danger,
main button.bg-gig-danger {
    background: linear-gradient(135deg, #E02D1B 0%, #B01808 100%) !important;
    box-shadow: var(--gig-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Info buttons */
main .bg-gig-info,
main button.bg-gig-info {
    background: linear-gradient(135deg, #FF8C20 0%, #FF5510 100%) !important;
    box-shadow: var(--gig-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* All main buttons get press feedback */
main button,
main a[role="button"],
main input[type="submit"] {
    -webkit-tap-highlight-color: transparent;
}

main button:active,
main a[role="button"]:active,
main input[type="submit"]:active {
    transform: scale(0.97);
}

/* ============================================================
 * 4. CARDS & CONTAINERS — unified warm surfaces
 * ============================================================
 * Any container with bg-white or rounded-lg + shadow combo
 * gets the warm treatment.
 */

/* Warm up all white containers — the gradient background bleeds through
   just enough to feel intentional rather than generic. Modals (outside
   <main>) stay fully opaque. */
main .bg-white {
    background-color: rgba(255, 255, 255, 0.8) !important;
    box-shadow: var(--gig-shadow-sm);
}

main .bg-gig-surface {
    box-shadow: var(--gig-shadow-sm);
}

main .rounded-lg,
main .rounded-xl {
    border-color: var(--gig-border);
}

/* ============================================================
 * 5. TABLES — warm headers, alternating rows
 * ============================================================ */

main table thead th {
    background-color: rgba(35, 31, 32, 0.04);
    color: var(--gig-dark);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 2px solid var(--gig-border-strong);
}

main table tbody tr {
    border-bottom: 1px solid var(--gig-border);
    transition: background-color 120ms ease;
}

main table tbody tr:hover {
    background-color: rgba(255, 97, 32, 0.03);
}

/* ============================================================
 * 6. PAGINATION — gig colors instead of grays
 * ============================================================ */

main .pagination a,
main .page-link,
main a[aria-label="Previous"],
main a[aria-label="Next"],
main nav[aria-label*="pagination"] a,
main nav[aria-label*="Pagination"] a {
    color: var(--gig-dark);
    border-color: var(--gig-border-strong);
    transition: all 120ms ease;
}

main .pagination a:hover,
main .page-link:hover,
main nav[aria-label*="pagination"] a:hover,
main nav[aria-label*="Pagination"] a:hover {
    background-color: rgba(255, 97, 32, 0.08);
    border-color: var(--gig-primary);
    color: var(--gig-primary);
}

main .pagination .active a,
main .page-link.active,
main nav[aria-label*="pagination"] .bg-gig-primary,
main nav[aria-label*="Pagination"] .bg-gig-primary {
    background: var(--gig-primary);
    color: white;
    border-color: var(--gig-primary);
}

/* ============================================================
 * 7. ALERTS & MESSAGES — unified rounded treatment
 * ============================================================ */

.alert,
[class*="alert-"] {
    border-radius: var(--gig-radius-md);
    border-width: 1.5px;
}

/* ============================================================
 * 8. BADGES & PILLS — refined colors
 * ============================================================ */

main .rounded-full {
    font-weight: 600;
}

/* ============================================================
 * 9. LINKS — warm hover color
 * ============================================================ */

main a:not([class*="bg-"]):not(.app-tabbar__item):not(.app-fab) {
    transition: color 120ms ease;
}

main a:not([class*="bg-"]):not(.app-tabbar__item):not(.app-fab):hover {
    color: var(--gig-primary);
}

/* ============================================================
 * 10. FOCUS RINGS — warm orange everywhere
 * ============================================================ */

:focus-visible {
    outline: 2px solid rgba(255, 97, 32, 0.6);
    outline-offset: 2px;
}

/* Override Tailwind's ring utilities */
.focus\:ring-blue-500:focus,
.focus\:ring-indigo-500:focus {
    --tw-ring-color: rgba(255, 97, 32, 0.4) !important;
}

/* ============================================================
 * 11. SCROLLBAR — dark, thin, warm
 * ============================================================ */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: rgba(35, 31, 32, 0.2);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(35, 31, 32, 0.35);
}

/* ============================================================
 * 12. MODALS — warm backdrop
 * ============================================================ */

main [x-show][x-transition],
main .modal-backdrop,
main [class*="bg-black/50"],
main [class*="bg-gray-900/50"] {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ============================================================
 * 13. EMPTY STATES — warmer illustration feel
 * ============================================================ */

main .text-gray-400 i.fas,
main .text-gray-400 i.far,
main .text-gray-300 i.fas,
main .text-gray-300 i.far {
    color: rgba(255, 97, 32, 0.25);
}

/* ============================================================
 * 14. TOOLTIPS & HOVER CARDS
 * ============================================================ */

main [title]:hover {
    cursor: help;
}

/* ============================================================
 * 15. GRAY → WARM remapping
 * ============================================================
 * The codebase has ~1140 Tailwind gray-* class usages across 91
 * templates. Instead of editing each template, we cascade-override
 * the most common grays within <main> to warm equivalents.
 * This instantly warms up every list, form, and detail page.
 */

/* Text grays → warm dark with matching opacity */
main .text-gray-900 { color: #231F20 !important; }
main .text-gray-800 { color: rgba(35, 31, 32, 0.85) !important; }
main .text-gray-700 { color: rgba(35, 31, 32, 0.75) !important; }
main .text-gray-600 { color: rgba(35, 31, 32, 0.6) !important; }
main .text-gray-500 { color: rgba(35, 31, 32, 0.5) !important; }
main .text-gray-400 { color: rgba(35, 31, 32, 0.35) !important; }

/* Border grays → warm borders */
main .border-gray-200 { border-color: rgba(35, 31, 32, 0.06) !important; }
main .border-gray-300 { border-color: rgba(35, 31, 32, 0.12) !important; }
main .border-gray-400 { border-color: rgba(35, 31, 32, 0.18) !important; }

/* Background grays → warm surfaces */
main .bg-gray-50 { background-color: rgba(255, 249, 240, 0.5) !important; }
main .bg-gray-100 { background-color: rgba(255, 249, 240, 0.7) !important; }
main .bg-gray-200 { background-color: rgba(35, 31, 32, 0.05) !important; }

/* Placeholder grays → warm */
main .placeholder-gray-400::placeholder,
main .placeholder-gray-500::placeholder {
    color: rgba(35, 31, 32, 0.3) !important;
}

/* Hover background grays → warm hover */
main .hover\:bg-gray-50:hover { background-color: rgba(255, 249, 240, 0.5) !important; }
main .hover\:bg-gray-100:hover { background-color: rgba(255, 249, 240, 0.7) !important; }

/* Ring/focus grays → warm */
main .ring-gray-300 { --tw-ring-color: rgba(35, 31, 32, 0.12) !important; }
main .focus\:ring-gray-300:focus { --tw-ring-color: rgba(35, 31, 32, 0.12) !important; }

/* ============================================================
 * 16. BLUE → GIG-INFO remapping
 * ============================================================
 * The codebase uses raw Tailwind blue-* classes (bg-blue-600,
 * text-blue-800, etc.) that clash with the gig palette. Remap
 * them to existing palette colors within <main>:
 *   - button bg → gig-dark (#231F20)
 *   - tint bg   → gig-accent (#FFDC6E) at low opacity
 *   - text      → gig-dark
 * No new colors — only gig-primary, gig-dark, gig-accent.
 */

/* Blue backgrounds → gig-primary gradient */
main .bg-blue-600,
main .bg-blue-700,
main .hover\:bg-blue-700:hover {
    background: linear-gradient(135deg, #FF8C20 0%, #FF5510 100%) !important;
    border-color: transparent !important;
}

main .bg-blue-500 {
    background-color: #FF6120 !important;
}

main .bg-blue-50 {
    background-color: rgba(255, 220, 110, 0.12) !important;
}

main .bg-blue-100 {
    background-color: rgba(255, 220, 110, 0.2) !important;
}

main .bg-indigo-100 {
    background-color: rgba(255, 97, 32, 0.1) !important;
}

/* Blue text → gig-info / gig-dark warm */
main .text-blue-600,
main .text-blue-700,
main .text-blue-800 {
    color: var(--gig-dark) !important;
}

main .text-blue-500,
main .text-blue-400 {
    color: var(--gig-primary) !important;
}

main .text-blue-100 {
    color: rgba(255, 255, 255, 0.7) !important;
}

main .text-indigo-800 {
    color: var(--gig-primary) !important;
}

/* Blue borders → gig-info tints */
main .border-blue-200 {
    border-color: rgba(255, 220, 110, 0.25) !important;
}

main .border-blue-400 {
    border-color: var(--gig-primary) !important;
}

main .border-blue-500 {
    border-color: var(--gig-primary) !important;
}

/* Blue hover states */
main .hover\:text-blue-800:hover,
main .hover\:text-blue-600:hover {
    color: var(--gig-primary) !important;
}

main .hover\:bg-blue-50:hover {
    background-color: rgba(255, 97, 32, 0.06) !important;
}

/* ============================================================
 * 17. DROPDOWNS AND POPUPS z-index fix for app mode tab bar
 * ============================================================
 * The tab bar sits at z-60. Alpine.js dropdown menus and action
 * popups typically use Tailwind's z-50, which means they get
 * hidden behind the tab bar. Bump all dropdowns inside main to
 * z-[65] so they float above the tab bar.
 */

main [x-show],
main [x-cloak],
main .dropdown-menu,
main .absolute.z-50,
main .absolute.z-40,
main [role="menu"],
main [role="listbox"],
main .fixed.z-50 {
    z-index: 65 !important;
}

/* ============================================================
 * 18b. GREEN → GIG-SUCCESS remapping
 * ============================================================
 * Raw Tailwind green-* classes mapped to gig-success (#01985A)
 */

main .bg-green-600,
main .bg-green-700,
main .hover\:bg-green-700:hover {
    background: linear-gradient(135deg, #02B06A 0%, #01985A 100%) !important;
}

main .bg-green-500 {
    background-color: #01985A !important;
}

main .bg-green-50 {
    background-color: rgba(1, 152, 90, 0.06) !important;
}

main .bg-green-100 {
    background-color: rgba(1, 152, 90, 0.12) !important;
}

main .text-green-600,
main .text-green-700,
main .text-green-800 {
    color: #01985A !important;
}

main .border-green-500 {
    border-color: #01985A !important;
}

/* ============================================================
 * 18c. RED → GIG-DANGER remapping
 * ============================================================ */

main .bg-red-600,
main .bg-red-700,
main .hover\:bg-red-700:hover {
    background: linear-gradient(135deg, #E02D1B 0%, #B01808 100%) !important;
}

main .bg-red-50 {
    background-color: rgba(200, 26, 17, 0.06) !important;
}

main .bg-red-100 {
    background-color: rgba(200, 26, 17, 0.12) !important;
}

main .text-red-600,
main .text-red-700 {
    color: #C81A11 !important;
}

/* ============================================================
 * 19. MOBILE PRESS FEEDBACK (app mode only)
 * ============================================================
 * All interactive elements in main get a subtle scale-down on
 * press (:active) in app mode. Feels like pushing a physical
 * button. Only applies via the app-mode activation selectors.
 */

@media (display-mode: standalone) {
    main button:active,
    main a:active,
    main input[type="submit"]:active,
    main [role="button"]:active {
        transform: scale(0.97);
        transition: transform 80ms ease;
    }

    /* Larger press on big CTA buttons */
    main .bg-gig-primary:active,
    main .bg-gig-success:active,
    main .bg-gig-danger:active,
    main .bg-gig-info:active {
        transform: scale(0.95);
    }
}

/* ============================================================
 * 19. SMOOTH SCROLL
 * ============================================================ */

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* ============================================================
 * 16. SELECTION COLOR — brand warm
 * ============================================================ */

::selection {
    background: rgba(255, 97, 32, 0.2);
    color: var(--gig-dark);
}

/* ============================================================
 * 17. LOADING / SKELETON states
 * ============================================================ */

@keyframes gig-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.2; }
}

.gig-skeleton {
    background: linear-gradient(90deg, rgba(35,31,32,0.06) 25%, rgba(35,31,32,0.1) 50%, rgba(35,31,32,0.06) 75%);
    background-size: 200% 100%;
    animation: gig-pulse 1.8s ease-in-out infinite;
    border-radius: var(--gig-radius-sm);
}