/**
 * PerfectShot System - Theme & Custom Styles
 *
 * All visual tokens are defined as CSS custom properties in :root.
 * Override them in a [data-theme="name"] block to create custom themes.
 *
 * Color format: space-separated RGB components (R G B) for Tailwind
 * opacity modifier compatibility (e.g. bg-primary-500/50).
 */


/* ============================================
   THEME VARIABLES
   ============================================ */

:root {
    /* --- Primary Palette (Sky Blue) --- */
    --primary-50:  240 249 255;
    --primary-100: 224 242 254;
    --primary-200: 186 230 253;
    --primary-300: 125 211 252;
    --primary-400: 56 189 248;
    --primary-500: 14 165 233;
    --primary-600: 2 132 199;
    --primary-700: 3 105 161;
    --primary-800: 7 89 133;
    --primary-900: 12 74 110;
    --primary-950: 8 47 73;

    /* --- Gray Palette --- */
    --gray-50:  249 250 251;
    --gray-100: 243 244 246;
    --gray-200: 229 231 235;
    --gray-300: 209 213 219;
    --gray-400: 156 163 175;
    --gray-500: 107 114 128;
    --gray-600: 75 85 99;
    --gray-700: 55 65 81;
    --gray-800: 31 41 55;
    --gray-900: 17 24 39;
    --gray-950: 3 7 18;

    /* --- White (surface base) --- */
    --white: 255 255 255;

    /* --- Red (danger / error) --- */
    --red-50:  254 242 242;
    --red-100: 254 226 226;
    --red-200: 254 202 202;
    --red-300: 252 165 165;
    --red-400: 248 113 113;
    --red-500: 239 68 68;
    --red-600: 220 38 38;
    --red-700: 185 28 28;
    --red-800: 153 27 27;
    --red-900: 127 29 29;
    --red-950: 69 10 10;

    /* --- Green (success) --- */
    --green-50:  240 253 244;
    --green-100: 220 252 231;
    --green-200: 187 247 208;
    --green-300: 134 239 172;
    --green-400: 74 222 128;
    --green-500: 34 197 94;
    --green-600: 22 163 74;
    --green-700: 21 128 61;
    --green-800: 22 101 52;
    --green-900: 20 83 45;
    --green-950: 5 46 22;

    /* --- Blue (info) --- */
    --blue-50:  239 246 255;
    --blue-100: 219 234 254;
    --blue-200: 191 219 254;
    --blue-300: 147 197 253;
    --blue-400: 96 165 250;
    --blue-500: 59 130 246;
    --blue-600: 37 99 235;
    --blue-700: 29 78 216;
    --blue-800: 30 64 175;
    --blue-900: 30 58 138;
    --blue-950: 23 37 84;

    /* --- Yellow (warning) --- */
    --yellow-50:  254 252 232;
    --yellow-100: 254 249 195;
    --yellow-200: 254 240 138;
    --yellow-300: 253 224 71;
    --yellow-400: 250 204 21;
    --yellow-500: 234 179 8;
    --yellow-600: 202 138 4;
    --yellow-700: 161 98 7;
    --yellow-800: 133 77 14;
    --yellow-900: 113 63 18;
    --yellow-950: 66 32 6;

    /* --- Purple (accent) --- */
    --purple-50:  250 245 255;
    --purple-100: 243 232 255;
    --purple-200: 233 213 255;
    --purple-300: 216 180 254;
    --purple-400: 192 132 252;
    --purple-500: 168 85 247;
    --purple-600: 147 51 234;
    --purple-700: 126 34 206;
    --purple-800: 107 33 168;
    --purple-900: 88 28 135;
    --purple-950: 59 7 100;

    /* --- Orange (editing / secondary warning) --- */
    --orange-50:  255 247 237;
    --orange-100: 255 237 213;
    --orange-200: 254 215 170;
    --orange-300: 253 186 116;
    --orange-400: 251 146 60;
    --orange-500: 249 115 22;
    --orange-600: 234 88 12;
    --orange-700: 194 65 12;
    --orange-800: 154 52 18;
    --orange-900: 124 45 18;
    --orange-950: 67 20 7;

    /* --- Amber (caution) --- */
    --amber-50:  255 251 235;
    --amber-100: 254 243 199;
    --amber-200: 253 230 138;
    --amber-300: 252 211 77;
    --amber-400: 251 191 36;
    --amber-500: 245 158 11;
    --amber-600: 217 119 6;
    --amber-700: 180 83 9;
    --amber-800: 146 64 14;
    --amber-900: 120 53 15;
    --amber-950: 69 26 3;

    /* --- Cyan --- */
    --cyan-50:  236 254 255;
    --cyan-100: 207 250 254;
    --cyan-200: 165 243 252;
    --cyan-300: 103 232 249;
    --cyan-400: 34 211 238;
    --cyan-500: 6 182 212;
    --cyan-600: 8 145 178;
    --cyan-700: 14 116 144;
    --cyan-800: 21 94 117;
    --cyan-900: 22 78 99;
    --cyan-950: 8 51 68;

    /* --- Pink --- */
    --pink-50:  253 242 248;
    --pink-100: 252 231 243;
    --pink-200: 251 207 232;
    --pink-300: 249 168 212;
    --pink-400: 244 114 182;
    --pink-500: 236 72 153;
    --pink-600: 219 39 119;
    --pink-700: 190 24 93;
    --pink-800: 157 23 77;
    --pink-900: 131 24 67;
    --pink-950: 80 7 36;

    /* --- Border Radius --- */
    --radius: 0.5rem;

    /* --- Shadows --- */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow:    0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    /* --- Typography --- */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', 'Fira Code', Consolas, monospace;
}


/* ============================================
   BASE STYLES
   ============================================ */

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Selection */
::selection {
    background-color: rgb(var(--primary-500));
    color: white;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgb(var(--gray-100));
}

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

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

/* HTMX Loading Indicator */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: block;
}

.htmx-request.htmx-indicator {
    display: block;
}

/* Loading animation for page transitions */
#page-loader {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.htmx-request #page-loader {
    opacity: 1;
}

/* Button Loading State */
button.htmx-request {
    pointer-events: none;
    opacity: 0.7;
}

/* Form Focus Styles */
input:focus,
select:focus,
textarea:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgb(var(--primary-500) / 0.2);
}

/* Table Row Hover Animation */
tbody tr {
    transition: background-color 0.15s ease;
}

/* Card Hover Animation */
.card-hover {
    transition: all 0.2s ease;
}

.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Sidebar Active Item */
.sidebar-active {
    background-color: rgb(var(--primary-500) / 0.1);
    color: rgb(var(--primary-400));
    position: relative;
}

.sidebar-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background-color: rgb(var(--primary-500));
    border-radius: 0 2px 2px 0;
}

/* Badge Styles */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 9999px;
}

.badge-success {
    background-color: rgb(var(--green-100));
    color: rgb(var(--green-800));
}

.badge-warning {
    background-color: rgb(var(--amber-100));
    color: rgb(var(--amber-800));
}

.badge-danger {
    background-color: rgb(var(--red-100));
    color: rgb(var(--red-800));
}

.badge-info {
    background-color: rgb(var(--blue-100));
    color: rgb(var(--blue-800));
}

/* Toast Animations */
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.toast-enter {
    animation: slideIn 0.3s ease forwards;
}

.toast-exit {
    animation: slideOut 0.2s ease forwards;
}

/* Modal Backdrop Blur */
.modal-backdrop {
    backdrop-filter: blur(4px);
}

/* Form Validation States */
.is-invalid {
    border-color: rgb(var(--red-500)) !important;
}

.is-invalid:focus {
    box-shadow: 0 0 0 2px rgb(var(--red-500) / 0.2) !important;
}

.is-valid {
    border-color: rgb(var(--green-500)) !important;
}

.is-valid:focus {
    box-shadow: 0 0 0 2px rgb(var(--green-500) / 0.2) !important;
}

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(90deg, rgb(var(--gray-100)) 25%, rgb(var(--gray-200)) 50%, rgb(var(--gray-100)) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

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

/* Dropdown Animation */
.dropdown-enter {
    animation: dropdownEnter 0.2s ease forwards;
}

@keyframes dropdownEnter {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Status Dot Pulse Animation */
.status-dot-pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Responsive Table */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Print Styles */
@media print {
    .no-print {
        display: none !important;
    }

    body {
        background: white;
    }

    .sidebar,
    header,
    footer {
        display: none;
    }

    main {
        margin: 0;
        padding: 0;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}