/*
 |--------------------------------------------------------------------------
 | V2 Visual Theme  (design-only re-skin)
 |--------------------------------------------------------------------------
 | Restores the legacy V2 look & feel on top of the V3 markup WITHOUT touching
 | any page structure, Alpine logic, routes or business rules. Loaded globally
 | from resources/views/v3/layouts/base.blade.php.
 |
 | What it does:
 |   1. Typography  -> V2 used 'Montserrat'  (V3 shipped 'Inter')
 |   2. Brand accent -> V3's indigo (#4f46e5) is remapped to V2's blue (#0080ff)
 |      across every Tailwind indigo utility (bg/text/border/ring/gradient +
 |      hover/focus variants). The navbar & footer were already V2-styled.
 |
 | Pure CSS. No V2 functionality, workflow or legacy code is reintroduced.
 */

:root {
    --v2-blue:        #0080ff;
    --v2-blue-dark:   #006ad6;
    --v2-blue-600:    #0080ff;
    --v2-navy:        #002b5b;
    --v2-navy-deep:   #010564;

    /* Redefine the Tailwind v4 indigo colour scale -> V2 blue family.
       v4 utilities reference these vars, so bg/text/border/ring/gradients
       all recolour automatically where the CDN/compiled build uses them. */
    --color-indigo-50:  #eef6ff;
    --color-indigo-100: #d6e8fb;
    --color-indigo-200: #b3d4f7;
    --color-indigo-300: #8cbef2;
    --color-indigo-400: #4d9bec;
    --color-indigo-500: #1a86ff;
    --color-indigo-600: #0080ff;
    --color-indigo-700: #006ad6;
    --color-indigo-800: #0056b3;
    --color-indigo-900: #003c80;
    --color-indigo-950: #002a5c;
}

/* 1) Typography & shared V2 design language (matches the home page) -------- */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #1E293B;
}

/* Playfair Display headings — the V2 "display" look used on the home page */
.font-display { font-family: 'Playfair Display', Georgia, serif; letter-spacing: -0.02em; }

/* V2 gradient text + buttons + card hover (same as the home page) */
.gradient-text {
    background: linear-gradient(135deg, #0080FF 0%, #002B5B 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.btn-primary {
    background: linear-gradient(135deg, #0080FF 0%, #0066CC 100%);
    box-shadow: 0 4px 12px rgba(0, 128, 255, 0.3);
    transition: all 0.3s ease;
}
.btn-primary:hover { box-shadow: 0 8px 20px rgba(0, 128, 255, 0.4); transform: translateY(-2px); }
.card-hover { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.card-hover:hover { transform: translateY(-8px); box-shadow: 0 20px 40px -12px rgba(0, 128, 255, 0.2); }

/* 2) Explicit utility overrides --------------------------------------------
   Guaranteed remap regardless of Tailwind version / CDN vs compiled build. */

/* backgrounds */
.bg-indigo-50  { background-color: #eef6ff !important; }
.bg-indigo-100 { background-color: #d6e8fb !important; }
.bg-indigo-500 { background-color: #1a86ff !important; }
.bg-indigo-600 { background-color: #0080ff !important; }
.bg-indigo-700 { background-color: #006ad6 !important; }
.hover\:bg-indigo-50:hover  { background-color: #eef6ff !important; }
.hover\:bg-indigo-100:hover { background-color: #d6e8fb !important; }
.hover\:bg-indigo-600:hover { background-color: #0080ff !important; }
.hover\:bg-indigo-700:hover { background-color: #006ad6 !important; }

/* text */
.text-indigo-100 { color: #d6e8fb !important; }
.text-indigo-400 { color: #4d9bec !important; }
.text-indigo-500 { color: #1a86ff !important; }
.text-indigo-600 { color: #0080ff !important; }
.text-indigo-700 { color: #006ad6 !important; }
.text-indigo-800 { color: #0056b3 !important; }
.text-indigo-900 { color: #003c80 !important; }
.hover\:text-indigo-600:hover { color: #0080ff !important; }
.hover\:text-indigo-700:hover { color: #006ad6 !important; }
.hover\:text-indigo-800:hover { color: #0056b3 !important; }
.hover\:text-indigo-900:hover { color: #003c80 !important; }

/* borders */
.border-indigo-200 { border-color: #b3d4f7 !important; }
.border-indigo-300 { border-color: #8cbef2 !important; }
.border-indigo-400 { border-color: #4d9bec !important; }
.border-indigo-500 { border-color: #0080ff !important; }
.hover\:border-indigo-300:hover { border-color: #8cbef2 !important; }
.hover\:border-indigo-400:hover { border-color: #4d9bec !important; }
.focus\:border-indigo-500:focus { border-color: #0080ff !important; }

/* rings (focus states) */
.ring-indigo-200 { --tw-ring-color: #b3d4f7 !important; }
.ring-indigo-500 { --tw-ring-color: #0080ff !important; }
.focus\:ring-indigo-500:focus { --tw-ring-color: #0080ff !important; }

/* gradients (hero buttons / banners) */
.from-indigo-50  { --tw-gradient-from: #eef6ff !important; }
.from-indigo-600 { --tw-gradient-from: #0080ff !important; }
.via-indigo-600  { --tw-gradient-via:  #0080ff !important; }
.to-indigo-50    { --tw-gradient-to:   #eef6ff !important; }
.to-indigo-600   { --tw-gradient-to:   #0080ff !important; }
.hover\:to-indigo-700:hover { --tw-gradient-to: #006ad6 !important; }

/* Accent-coloured native form controls (checkboxes/radios) -> V2 blue */
.text-indigo-600[type="checkbox"],
.text-indigo-600[type="radio"] { accent-color: #0080ff !important; }

/* 2b) Hard-coded blue-* utilities ------------------------------------------
   The shared x-v3 form components (input / select / checkbox / search) and
   many page forms use blue-500/600 for focus rings, borders and check colour.
   Tailwind's blue-500 (#3b82f6) is NOT the V2 brand blue (#0080ff), so those
   controls looked subtly "off" vs V2. Remap the focus/interaction blues to the
   exact V2 blue. NOTE: bg-blue-100 / text-blue-800 (info badges) are left
   untouched on purpose so status pills keep their light-blue look. */
.focus\:border-blue-500:focus { border-color: #0080ff !important; }
.focus\:ring-blue-500:focus   { --tw-ring-color: #0080ff !important; }
.border-blue-500 { border-color: #0080ff !important; }
.ring-blue-500   { --tw-ring-color: #0080ff !important; }
.text-blue-600   { color: #0080ff !important; }
.hover\:text-blue-600:hover { color: #0080ff !important; }
.hover\:text-blue-700:hover { color: #006ad6 !important; }
.bg-blue-600 { background-color: #0080ff !important; }
.hover\:bg-blue-600:hover { background-color: #0080ff !important; }
.hover\:bg-blue-700:hover { background-color: #006ad6 !important; }
.text-blue-600[type="checkbox"],
.text-blue-600[type="radio"] { accent-color: #0080ff !important; }

/* 3) Legacy Bootstrap-style utility classes -------------------------------
   A handful of module views (admin categories, some event-create forms)
   still carry Bootstrap-era class names — .form-control, .btn.btn-secondary,
   .is-invalid, etc. Under CDN Tailwind these had NO definition and rendered
   as raw, unstyled browser defaults (the "this page doesn't look like V2"
   effect). Give them the V2 look. These names are never emitted by the V3
   x-v3::* components (those use raw Tailwind utilities), so there is no
   collision. Design-only. */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .5rem 1rem; border-radius: .5rem;
    font-size: .875rem; font-weight: 600; line-height: 1.25rem;
    border: 1px solid transparent; cursor: pointer; text-decoration: none;
    transition: all .2s ease;
}
/* .btn-primary already carries the V2 blue gradient above; ensure legible text */
.btn-primary { color: #fff; }
.btn-secondary {
    background: #ffffff; border-color: #d1d5db; color: #374151;
}
.btn-secondary:hover { background: #f9fafb; border-color: #9ca3af; }
.btn-success { background: #16a34a; color: #fff; }
.btn-success:hover { background: #15803d; }
.btn-danger  { background: #dc2626; color: #fff; }
.btn-danger:hover  { background: #b91c1c; }
.btn:disabled, .btn.disabled { opacity: .5; cursor: not-allowed; }

.form-control, .form-input, .form-select {
    display: block; width: 100%;
    padding: .625rem .875rem;
    font-size: .875rem; line-height: 1.5; color: #1e293b;
    background-color: #fff; border: 1px solid #d1d5db; border-radius: .5rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-input:focus, .form-select:focus {
    outline: none; border-color: #0080ff;
    box-shadow: 0 0 0 3px rgba(0, 128, 255, .15);
}
.form-control::placeholder, .form-input::placeholder { color: #9ca3af; }
.form-control.is-invalid, .form-input.is-invalid, .form-select.is-invalid { border-color: #dc2626; }
.form-label { display: block; font-size: .875rem; font-weight: 500; color: #374151; margin-bottom: .375rem; }
.form-group { margin-bottom: 1rem; }
.invalid-feedback { display: block; margin-top: .375rem; font-size: .8125rem; color: #dc2626; }