/* resources/css/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@plugin "daisyui";

@layer components {
  .badge.badge-success {
    color: white !important;
  }
}
/* Custom styles for venue overlay pills */
.venue-pill {
    @apply absolute text-white text-xs px-2 py-1 rounded shadow font-semibold;
}

  .previous-price {
    text-decoration: line-through;
    color: red;
    margin-right: 0.5rem;
  }
  .current-price {
    font-weight: bold;
    color: black;
  }


.text-bv-blue {
    color: #0081C6;
}
.bg-bv-blue {
    background-color: #0081C6;
}
.border-bv-blue {
    border-color: #0081C6;
}
.venue-pill-green {
    @apply bg-green-600;
}
.venue-pill-red {
    @apply bg-red-600;
}

.trix-toolbar {
    display: block !important;
    border-bottom: 1px solid #e5e7eb; /* Tailwind gray-200 */
    margin-bottom: 0.5rem;
}
.trix-editor {
    min-height: 120px;
    background-color: white;
    border: 1px solid #d1d5db; /* Tailwind gray-300 */
    border-radius: 0.375rem;   /* rounded-md */
    padding: 0.5rem;
}

.overflow-x-auto {
  overflow-x: auto !important; /* keep horizontal scroll */
  overflow-y: visible !important; /* allow vertical dropdown */
  position: relative; /* ensure dropdown absolute positioning works */
  z-index: auto;
}

/* Also ensure DataTables dropdown z-index */
.dt-button-collection {
  position: absolute !important;
  z-index: 9999 !important;
}

/* These were previously nested inside .dt-button-collection and an unclosed
   brace, so neither rule applied. */
.badge.badge-success { color: #fff !important; }
.badge.badge-error   { color: #fff !important; }

/* ─────────────────────────────────────────────────────────────────────────
   DaisyUI theme — Bien Venue brand
   ─────────────────────────────────────────────────────────────────────────
   DaisyUI is loaded from a CDN (layouts/app.blade.php), so it arrives with
   its stock theme: primary is a purple at hue 275. That's why anything using
   btn-primary / badge-primary / tab-active renders purple instead of BV blue
   — the `daisyui.themes` block in tailwind.config.js never reaches the
   browser, because there is no Vite build in the layout.

   Rather than rewrite ~270 DaisyUI class usages across 51 blades, override
   the theme variables here. This file loads after the CDN, so these win.

   DaisyUI v4 expects OKLCH components, "L% C H" with no function wrapper.
   Values converted from the brand hex codes:
     #0081c6  ->  57.975% 0.1406 243.15   (primary, BV blue)
     #5fc5f2  ->  78.016% 0.1142 229.59   (accent)
     #111827  ->  21.008% 0.0318 264.66   (neutral)
     #64748b  ->  55.439% 0.0407 257.42   (secondary)

   Secondary is a mid slate rather than the near-white in tailwind.config.js
   on purpose: several badges hard-code `text-white`, which would be invisible
   on a pale background.
   ───────────────────────────────────────────────────────────────────────── */
:root,
[data-theme='light'],
[data-theme='dark'] {
  --p:  57.975% 0.1406 243.15;   /* primary            */
  --pc: 100% 0 0;                /* primary content    */
  --s:  55.439% 0.0407 257.42;   /* secondary          */
  --sc: 100% 0 0;                /* secondary content  */
  --a:  78.016% 0.1142 229.59;   /* accent             */
  --ac: 21.008% 0.0318 264.66;   /* accent content     */
  --n:  21.008% 0.0318 264.66;   /* neutral            */
  --nc: 100% 0 0;                /* neutral content    */
}

/* ─────────────────────────────────────────────────────────────────────────
   Dark skin for the STAFF portal — [data-theme="dark"] only
   ─────────────────────────────────────────────────────────────────────────
   layouts/app.blade.php sets data-theme explicitly ('system' follows the OS,
   or the topbar toggle forces light/dark). DaisyUI's own components (navbar,
   btn, input, menu, base-*) re-skin themselves from the theme; this block
   retrofits the ~50 hard-coded Tailwind utility colours the blades use
   (bg-white, text-gray-*, border-gray-*, status tints…) so the whole page
   flips together instead of the half-dark mess DaisyUI's auto dark theme
   used to produce.

   Palette is aligned to DaisyUI v4 stock dark base colours:
     base-100 #1d232a (cards)   base-200 #191e24 (page)   base-300 #15191e
     base-content #bac1cc
   Client/venue/public layouts pin data-theme="light", so none of this can
   leak into client-facing pages.
   ───────────────────────────────────────────────────────────────────────── */

/* DaisyUI stock dark base-content (#a6adbb) reads grey-on-black; lift the
   default text colour to match the remapped ladder below. Surfaces stay stock. */
[data-theme='dark'] {
  --bc: 84.5% 0.0216 264.435964; /* ~#bac1cc */
}

/* ---- neutral surfaces ---- */
html[data-theme="dark"] .bg-white          { background-color: #1d232a; }
html[data-theme="dark"] .bg-gray-50        { background-color: #191e24; }
html[data-theme="dark"] .bg-gray-50\/60    { background-color: rgba(25, 30, 36, .6); }
html[data-theme="dark"] .bg-gray-100       { background-color: #232a33; }
html[data-theme="dark"] .bg-gray-200       { background-color: #2c3440; }
html[data-theme="dark"] .bg-\[\#f0f7fd\]   { background-color: rgba(0, 129, 198, .12); }
html[data-theme="dark"] .hover\:bg-white:hover   { background-color: #232a33; }
html[data-theme="dark"] .hover\:bg-gray-50:hover  { background-color: #232a33; }
html[data-theme="dark"] .hover\:bg-gray-100:hover { background-color: #2c3440; }
html[data-theme="dark"] .hover\:bg-gray-200:hover { background-color: #353e4c; }

/* ---- neutral text ---- */
html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-gray-800,
html[data-theme="dark"] .text-\[\#0d1e30\] { color: #f1f4f8; }
html[data-theme="dark"] .text-gray-700     { color: #d4dae2; }
html[data-theme="dark"] .text-gray-600     { color: #bac1cc; }
html[data-theme="dark"] .text-gray-500,
html[data-theme="dark"] .text-slate-500    { color: #a4acba; }
html[data-theme="dark"] .text-gray-400,
html[data-theme="dark"] .text-slate-400    { color: #8b93a2; }
html[data-theme="dark"] .text-gray-300     { color: #6e7787; }
html[data-theme="dark"] .text-slate-700,
html[data-theme="dark"] .text-slate-600    { color: #c6cdd7; }
html[data-theme="dark"] .hover\:text-gray-900:hover { color: #f8fafc; }
html[data-theme="dark"] .hover\:text-gray-700:hover,
html[data-theme="dark"] .hover\:text-gray-600:hover,
html[data-theme="dark"] .hover\:text-slate-600:hover { color: #e2e7ed; }
html[data-theme="dark"] .hover\:text-gray-500:hover,
html[data-theme="dark"] .hover\:text-gray-400:hover,
html[data-theme="dark"] .hover\:text-gray-300:hover { color: #bac1cc; }
html[data-theme="dark"] .placeholder-gray-400::placeholder,
html[data-theme="dark"] .placeholder-gray-500::placeholder { color: #6e7787; }

/* ---- neutral borders / dividers / rings ---- */
html[data-theme="dark"] .border-gray-100   { border-color: #232a33; }
html[data-theme="dark"] .border-gray-200   { border-color: #2c3440; }
html[data-theme="dark"] .border-gray-300   { border-color: #39424e; }
html[data-theme="dark"] .border-gray-400   { border-color: #4b5563; }
html[data-theme="dark"] .hover\:border-gray-300:hover { border-color: #4b5563; }
html[data-theme="dark"] .hover\:border-gray-400:hover { border-color: #5b6573; }
html[data-theme="dark"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #232a33; }
html[data-theme="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #2c3440; }
html[data-theme="dark"] .ring-gray-900\/5  { --tw-ring-color: rgba(255, 255, 255, .06); }

/* ---- status tints: blue / sky ---- */
html[data-theme="dark"] .bg-blue-50,
html[data-theme="dark"] .bg-sky-50         { background-color: rgba(56, 152, 216, .14); }
html[data-theme="dark"] .bg-blue-100,
html[data-theme="dark"] .bg-sky-100        { background-color: rgba(56, 152, 216, .24); }
html[data-theme="dark"] .hover\:bg-blue-50:hover { background-color: rgba(56, 152, 216, .18); }
html[data-theme="dark"] .text-blue-600     { color: #55b1e6; }
html[data-theme="dark"] .text-blue-700,
html[data-theme="dark"] .text-blue-800,
html[data-theme="dark"] .text-sky-700      { color: #7cc4ec; }
html[data-theme="dark"] .border-blue-200,
html[data-theme="dark"] .border-sky-200    { border-color: rgba(85, 177, 230, .35); }

/* ---- status tints: red / rose ---- */
html[data-theme="dark"] .bg-red-50,
html[data-theme="dark"] .bg-rose-50        { background-color: rgba(239, 68, 68, .13); }
html[data-theme="dark"] .bg-red-100,
html[data-theme="dark"] .bg-rose-100       { background-color: rgba(239, 68, 68, .22); }
html[data-theme="dark"] .hover\:bg-red-50:hover  { background-color: rgba(239, 68, 68, .17); }
html[data-theme="dark"] .hover\:bg-red-100:hover { background-color: rgba(239, 68, 68, .26); }
html[data-theme="dark"] .text-red-500,
html[data-theme="dark"] .text-red-600,
html[data-theme="dark"] .text-rose-500,
html[data-theme="dark"] .text-rose-600     { color: #f47c7c; }
html[data-theme="dark"] .text-red-700,
html[data-theme="dark"] .text-red-800,
html[data-theme="dark"] .text-rose-700     { color: #f8a3a3; }
html[data-theme="dark"] .hover\:text-red-500:hover,
html[data-theme="dark"] .hover\:text-red-600:hover,
html[data-theme="dark"] .hover\:text-rose-600:hover { color: #f8a3a3; }
html[data-theme="dark"] .border-red-200,
html[data-theme="dark"] .border-rose-200   { border-color: rgba(244, 124, 124, .35); }

/* ---- status tints: green / emerald / teal ---- */
html[data-theme="dark"] .bg-green-50,
html[data-theme="dark"] .bg-emerald-50,
html[data-theme="dark"] .bg-teal-50        { background-color: rgba(16, 185, 129, .13); }
html[data-theme="dark"] .bg-green-100,
html[data-theme="dark"] .bg-emerald-100    { background-color: rgba(16, 185, 129, .22); }
html[data-theme="dark"] .text-green-600,
html[data-theme="dark"] .text-emerald-600  { color: #3fce9f; }
html[data-theme="dark"] .text-green-700,
html[data-theme="dark"] .text-green-800,
html[data-theme="dark"] .text-emerald-700,
html[data-theme="dark"] .text-teal-700     { color: #79dcb9; }
html[data-theme="dark"] .border-green-200,
html[data-theme="dark"] .border-emerald-200 { border-color: rgba(63, 206, 159, .35); }

/* ---- status tints: amber / yellow / orange ---- */
html[data-theme="dark"] .bg-amber-50,
html[data-theme="dark"] .bg-yellow-50,
html[data-theme="dark"] .bg-orange-50      { background-color: rgba(245, 158, 11, .13); }
html[data-theme="dark"] .bg-amber-100,
html[data-theme="dark"] .bg-yellow-100     { background-color: rgba(245, 158, 11, .22); }
html[data-theme="dark"] .text-amber-600,
html[data-theme="dark"] .text-amber-700,
html[data-theme="dark"] .text-yellow-700,
html[data-theme="dark"] .text-orange-700   { color: #f0b64b; }
html[data-theme="dark"] .text-amber-800,
html[data-theme="dark"] .text-amber-900,
html[data-theme="dark"] .text-yellow-800   { color: #f5cd85; }
html[data-theme="dark"] .border-amber-200,
html[data-theme="dark"] .border-yellow-200 { border-color: rgba(240, 182, 75, .35); }

/* ---- status tints: indigo / violet / purple ---- */
html[data-theme="dark"] .bg-indigo-50,
html[data-theme="dark"] .bg-violet-50,
html[data-theme="dark"] .bg-purple-50      { background-color: rgba(129, 140, 248, .14); }
html[data-theme="dark"] .bg-indigo-100,
html[data-theme="dark"] .bg-purple-100     { background-color: rgba(129, 140, 248, .24); }
html[data-theme="dark"] .text-indigo-600,
html[data-theme="dark"] .text-indigo-700,
html[data-theme="dark"] .text-violet-700,
html[data-theme="dark"] .text-purple-700   { color: #a5b0fa; }
html[data-theme="dark"] .border-indigo-200,
html[data-theme="dark"] .border-purple-200 { border-color: rgba(165, 176, 250, .35); }

/* ---- rules earlier in this file that hard-code light colours ---- */
html[data-theme="dark"] .current-price     { color: #f1f4f8; }
html[data-theme="dark"] .trix-editor       { background-color: #1d232a; border-color: #39424e; color: #f1f4f8; }
html[data-theme="dark"] .trix-toolbar      { border-bottom-color: #2c3440; }

/* ---- shared admin table (bv-table): header is dark in both themes ---- */
html[data-theme="dark"] table.bv-table { background: #1d232a; border-color: #2c3440; }
html[data-theme="dark"] table.bv-table tbody td { border-bottom-color: #2c3440; }
html[data-theme="dark"] table.bv-table tbody tr:nth-child(even) td { background: #191e24; }
html[data-theme="dark"] table.bv-table tbody tr:hover td,
html[data-theme="dark"] table.dataTable.bv-table tbody tr:hover td { background: #22303f !important; }

/* ---- DataTables chrome (search box, length select, info, pagination) ---- */
html[data-theme="dark"] .dataTables_wrapper .dataTables_length,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
html[data-theme="dark"] .dataTables_wrapper .dataTables_info,
html[data-theme="dark"] .dataTables_wrapper .dataTables_processing,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate { color: #bac1cc; }
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button { color: #bac1cc !important; }
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: #f1f4f8 !important;
  background: #2c3440;
  border-color: #39424e;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length select,
html[data-theme="dark"] .dt-button {
  background-color: #191e24;
  border: 1px solid #39424e;
  color: #f1f4f8;
}
html[data-theme="dark"] .dt-button-collection {
  background-color: #1d232a;
  border-color: #39424e;
}
html[data-theme="dark"] .dt-button-collection .dt-button { border: 0; }
html[data-theme="dark"] table.dataTable tbody tr { background-color: transparent; }

/* ---- Quill / Trix toolbars ---- */
html[data-theme="dark"] .ql-toolbar.ql-snow,
html[data-theme="dark"] .ql-container.ql-snow { border-color: #39424e; }
html[data-theme="dark"] .ql-toolbar.ql-snow { background: #191e24; }
html[data-theme="dark"] .ql-snow .ql-stroke { stroke: #bac1cc; }
html[data-theme="dark"] .ql-snow .ql-fill { fill: #bac1cc; }
html[data-theme="dark"] .ql-snow .ql-picker { color: #bac1cc; }
html[data-theme="dark"] .ql-editor { color: #f1f4f8; }
html[data-theme="dark"] trix-toolbar .trix-button { background: #191e24; border-color: #39424e; filter: invert(.85); }

/* ---- flatpickr ---- */
html[data-theme="dark"] .flatpickr-calendar {
  background: #1d232a;
  border: 1px solid #2c3440;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
  color: #f1f4f8;
}
html[data-theme="dark"] .flatpickr-months .flatpickr-month,
html[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months,
html[data-theme="dark"] .flatpickr-weekday { background: transparent; color: #f1f4f8; fill: #f1f4f8; }
html[data-theme="dark"] .flatpickr-day { color: #d4dae2; }
html[data-theme="dark"] .flatpickr-day.prevMonthDay,
html[data-theme="dark"] .flatpickr-day.nextMonthDay,
html[data-theme="dark"] .flatpickr-day.flatpickr-disabled { color: #6e7787; }
html[data-theme="dark"] .flatpickr-day:hover { background: #2c3440; border-color: #2c3440; }
html[data-theme="dark"] .flatpickr-day.selected { background: #0081c6; border-color: #0081c6; color: #fff; }

/* ---- exception: panels that are ALREADY dark in the light design ----
   Chips/heros built as bg-gray-700/800/900 (or the slate/hex equivalents)
   pair with text-gray-300/400/500 for legibility. The gray-text remaps above
   would dim those to mud, so restore Tailwind's stock values when the text
   sits on (or inside) one of these dark surfaces. Higher specificity than
   the remaps, so it wins without !important. */
html[data-theme="dark"] .bg-gray-700 .text-gray-300,  html[data-theme="dark"] .bg-gray-700.text-gray-300,
html[data-theme="dark"] .bg-gray-800 .text-gray-300,  html[data-theme="dark"] .bg-gray-800.text-gray-300,
html[data-theme="dark"] .bg-gray-900 .text-gray-300,  html[data-theme="dark"] .bg-gray-900.text-gray-300,
html[data-theme="dark"] .bg-slate-800 .text-gray-300, html[data-theme="dark"] .bg-slate-800.text-gray-300,
html[data-theme="dark"] .bg-slate-900 .text-gray-300, html[data-theme="dark"] .bg-slate-900.text-gray-300,
html[data-theme="dark"] .bg-\[\#1e293b\] .text-gray-300, html[data-theme="dark"] .bg-\[\#1e293b\].text-gray-300,
html[data-theme="dark"] .bg-\[\#0b1020\] .text-gray-300, html[data-theme="dark"] .bg-\[\#0b1020\].text-gray-300 { color: #d1d5db; }

html[data-theme="dark"] .bg-gray-700 .text-gray-400,  html[data-theme="dark"] .bg-gray-700.text-gray-400,
html[data-theme="dark"] .bg-gray-800 .text-gray-400,  html[data-theme="dark"] .bg-gray-800.text-gray-400,
html[data-theme="dark"] .bg-gray-900 .text-gray-400,  html[data-theme="dark"] .bg-gray-900.text-gray-400,
html[data-theme="dark"] .bg-slate-800 .text-gray-400, html[data-theme="dark"] .bg-slate-800.text-gray-400,
html[data-theme="dark"] .bg-slate-900 .text-gray-400, html[data-theme="dark"] .bg-slate-900.text-gray-400,
html[data-theme="dark"] .bg-\[\#1e293b\] .text-gray-400, html[data-theme="dark"] .bg-\[\#1e293b\].text-gray-400,
html[data-theme="dark"] .bg-\[\#0b1020\] .text-gray-400, html[data-theme="dark"] .bg-\[\#0b1020\].text-gray-400 { color: #9ca3af; }

html[data-theme="dark"] .bg-gray-700 .text-gray-500,  html[data-theme="dark"] .bg-gray-700.text-gray-500,
html[data-theme="dark"] .bg-gray-800 .text-gray-500,  html[data-theme="dark"] .bg-gray-800.text-gray-500,
html[data-theme="dark"] .bg-gray-900 .text-gray-500,  html[data-theme="dark"] .bg-gray-900.text-gray-500,
html[data-theme="dark"] .bg-slate-800 .text-gray-500, html[data-theme="dark"] .bg-slate-800.text-gray-500,
html[data-theme="dark"] .bg-slate-900 .text-gray-500, html[data-theme="dark"] .bg-slate-900.text-gray-500,
html[data-theme="dark"] .bg-\[\#1e293b\] .text-gray-500, html[data-theme="dark"] .bg-\[\#1e293b\].text-gray-500,
html[data-theme="dark"] .bg-\[\#0b1020\] .text-gray-500, html[data-theme="dark"] .bg-\[\#0b1020\].text-gray-500 { color: #a4acba; }

/* ---- belt-and-braces: DaisyUI form controls ----
   These should follow the dark theme via DaisyUI's own vars, but stale or
   partial CSS loads have left them white-on-dark in the wild; pin them. */
html[data-theme="dark"] .input,
html[data-theme="dark"] .select,
html[data-theme="dark"] .textarea,
html[data-theme="dark"] .file-input {
  background-color: #191e24;
  border-color: #39424e;
  color: #f1f4f8;
}

/* form.blade.php styles the <trix-editor> ELEMENT white (the earlier
   override only covered the .trix-editor class) */
html[data-theme="dark"] trix-editor {
  background-color: #1d232a;
  border-color: #39424e;
  color: #f1f4f8;
}

/* Bare `border` utilities take Tailwind's preflight default (gray-200) —
   bright lines on dark cards. :where() keeps specificity at element level
   so every explicit border-colour utility still outranks this. */
:where(html[data-theme="dark"]) .border,
:where(html[data-theme="dark"]) .border-t,
:where(html[data-theme="dark"]) .border-b,
:where(html[data-theme="dark"]) .border-l,
:where(html[data-theme="dark"]) .border-r,
:where(html[data-theme="dark"]) .border-x,
:where(html[data-theme="dark"]) .border-y {
  border-color: #2c3440;
}

/* ---- proposals index (admin/proposals/index.blade.php page styles) ---- */
html[data-theme="dark"] .bv-eventdate { color: #c6cdd7; }
html[data-theme="dark"] table#proposalsTable { border-color: #2c3440; }
html[data-theme="dark"] table#proposalsTable thead th { background: #191e24; border-color: #2c3440; color: #8b93a2; }
html[data-theme="dark"] table#proposalsTable tbody td { border-color: #232a33; color: #f1f4f8; }
html[data-theme="dark"] table#proposalsTable tbody tr td { border-bottom-color: #232a33 !important; }
html[data-theme="dark"] table#proposalsTable tbody tr:hover td { background: #22303f; }
html[data-theme="dark"] #proposalsTable_wrapper .dataTables_length label,
html[data-theme="dark"] #proposalsTable_wrapper .dataTables_filter label { color: #bac1cc; }
html[data-theme="dark"] #proposalsTable_wrapper .dataTables_length select,
html[data-theme="dark"] #proposalsTable_wrapper .dataTables_filter input { background: #191e24; border-color: #39424e; color: #f1f4f8; }
html[data-theme="dark"] #proposalsTable_wrapper .dataTables_paginate .paginate_button { background: #1d232a !important; border-color: #39424e !important; color: #bac1cc !important; }
html[data-theme="dark"] #proposalsTable_wrapper .dataTables_paginate .paginate_button:hover { background: #232a33 !important; color: #f1f4f8 !important; }