/* Custom styles for the application */

/* ===============================================
 * CRITICAL FIX: Override Tailwind's transparent background reset
 * 
 * Tailwind CSS sets `background-color: transparent` on ALL buttons/inputs
 * at line 483 of dashboard.css:
 *   button, input, select, optgroup, textarea { background-color: transparent; }
 * 
 * This breaks both default and hover backgrounds across the UI. The fixes 
 * below restore proper backgrounds using !important to override Tailwind's base layer.
 * =============================================== */

/* Default background colors (non-hover)
 * Light-shade classes are scoped to html:not(.dark) so Tailwind's dark:bg-*
 * variants can take effect in dark mode without being overridden. */
html:not(.dark) .bg-blue-100 {
    background-color: #dbeafe !important;
}

.bg-blue-400 {
    background-color: #60a5fa !important;
}

.bg-blue-500 {
    background-color: #3b82f6 !important;
}

.bg-blue-600 {
    background-color: #2563eb !important;
}

/* Hover state for blue-500 */
.hover\:bg-blue-500:hover {
    background-color: #3b82f6 !important;
}

/* Hover state for blue-600 */
.hover\:bg-blue-600:hover {
    background-color: #2563eb !important;
}

.bg-blue-700 {
    background-color: #1d4ed8 !important;
}

html:not(.dark) .bg-purple-100 {
    background-color: #f3e8ff !important;
}

html:not(.dark) .bg-teal-100 {
    background-color: #ccfbf1 !important;
}

html:not(.dark) .bg-orange-100 {
    background-color: #ffedd5 !important;
}

html:not(.dark) .bg-gray-100 {
    background-color: #f3f4f6 !important;
}

html:not(.dark) .bg-gray-200 {
    background-color: #e5e7eb !important;
}

.bg-gray-800 {
    background-color: #1f2937 !important;
}

html:not(.dark) .bg-white {
    background-color: #ffffff !important;
}

/* Gray scale hover backgrounds - light mode only */
html:not(.dark) .hover\:bg-gray-50:hover {
    background-color: #f9fafb !important;
}

html:not(.dark) .hover\:bg-gray-100:hover {
    background-color: #f3f4f6 !important;
}

html:not(.dark) .hover\:bg-gray-200:hover {
    background-color: #e5e7eb !important;
}

/* Blue hover backgrounds - light shades are light mode only */
html:not(.dark) .hover\:bg-blue-50:hover {
    background-color: #eff6ff !important;
}

html:not(.dark) .hover\:bg-blue-100:hover {
    background-color: #dbeafe !important;
}

.hover\:bg-blue-600:hover {
    background-color: #2563eb !important;
}

.hover\:bg-blue-700:hover {
    background-color: #1d4ed8 !important;
}

/* Red hover backgrounds - light mode only */
html:not(.dark) .hover\:bg-red-50:hover {
    background-color: #fef2f2 !important;
}

html:not(.dark) .hover\:bg-red-100:hover {
    background-color: #fee2e2 !important;
}

/* Green hover backgrounds - light mode only */
html:not(.dark) .hover\:bg-green-50:hover {
    background-color: #f0fdf4 !important;
}

html:not(.dark) .hover\:bg-green-100:hover {
    background-color: #dcfce7 !important;
}

/* Yellow hover backgrounds - light mode only */
html:not(.dark) .hover\:bg-yellow-50:hover {
    background-color: #fefce8 !important;
}

html:not(.dark) .hover\:bg-yellow-100:hover {
    background-color: #fef9c3 !important;
}

/* Purple hover backgrounds - light mode only */
html:not(.dark) .hover\:bg-purple-50:hover {
    background-color: #faf5ff !important;
}

html:not(.dark) .hover\:bg-purple-100:hover {
    background-color: #f3e8ff !important;
}

/* Orange hover backgrounds - light mode only */
html:not(.dark) .hover\:bg-orange-50:hover {
    background-color: #fff7ed !important;
}

html:not(.dark) .hover\:bg-orange-100:hover {
    background-color: #ffedd5 !important;
}

/* Custom mega menu hover backgrounds - light mode only */
html:not(.dark) .analytics-category:hover {
    background-color: #f9fafb !important;
}

html:not(.dark) .analytics-link:hover {
    background-color: #eff6ff !important;
    color: #2563eb !important;
}

html:not(.dark) .analytics-menu-item:hover {
    background-color: #dbeafe !important;
}

/* Dark mode hover fixes */
.dark .hover\:bg-gray-700:hover {
    background-color: #374151 !important;
}

.dark .hover\:bg-gray-800:hover {
    background-color: #1f2937 !important;
}

.dark .hover\:bg-blue-900\/20:hover {
    background-color: rgba(30, 58, 138, 0.3) !important;
}

/* Dark mode: suppress light gray hover backgrounds (dark:hover:bg-gray-700/50 not in compiled CSS) */
html.dark .hover\:bg-gray-50:hover,
html.dark .hover\:bg-gray-100:hover {
    background-color: rgba(55, 65, 81, 0.5) !important;
}

/* Dark mode: all selected-row / row-selected patterns — global override so column-specific
   td backgrounds don't bleed through the selection highlight */
html.dark tr.selected-row,
html.dark tr.selected-row td {
    background-color: #1e3a8a !important;
    color: #e2e8f0 !important;
}
html.dark tr.row-selected,
html.dark tr.row-selected td {
    background-color: rgba(30, 58, 138, 0.35) !important;
    color: #e2e8f0 !important;
}

/* Base utility classes */
.container-custom {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Custom button styles */
.btn-primary-custom {
    background-color: #60a5fa;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-primary-custom:hover {
    background-color: #2563eb;
}

.btn-secondary-custom {
    background-color: #f3f4f6;
    color: #374151;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 500;
    border: 1px solid #d1d5db;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-secondary-custom:hover {
    background-color: #e5e7eb;
}

/* Form styling */
.form-input-custom {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.form-input-custom:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Card styling */
.card-custom {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    padding: 1.5rem;
}

/* Dashboard specific styles */
.dashboard-stat {
    text-align: center;
    padding: 1rem;
}

.dashboard-stat-value {
    font-size: 2rem;
    font-weight: bold;
    color: #1f2937;
}

/* Dark mode overrides */
html.dark #budgetTable tbody tr {
    background-color: rgba(17, 24, 39, 0.72);
}

html.dark #budgetTable tbody tr:nth-child(odd) {
    background-color: rgba(17, 24, 39, 0.86);
}

html.dark #budgetTable thead {
    background-color: rgba(15, 23, 42, 0.95);
    color: #e2e8f0;
}

.dashboard-stat-label {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

/* Responsive utilities */
@media (max-width: 640px) {
    .container-custom {
        padding: 0 0.5rem;
    }

    .card-custom {
        padding: 1rem;
    }
}

/* ===============================================
 * Marketing page utilities missing from flowbite-dashboard.css
 * (landing.html uses these but they were scanned from a different build)
 * =============================================== */

/* ml-16 = margin-left: 4rem — used by feature card icon+text layout */
.ml-16 {
    margin-left: 4rem;
}

/* leading-8 = line-height: 2rem — used by "Independent Analytics" heading */
.leading-8 {
    line-height: 2rem;
}

/* space-y-10 — vertical spacing between feature card rows */
.space-y-10 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
}

/* sm:space-x-6 — used by the Free Trial info box */
@media (min-width: 640px) {
    .sm\:space-x-6 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(1.5rem * var(--tw-space-x-reverse));
        margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
    }
}

/* md:gap-y-10 — grid row gap for feature card grid at md breakpoint */
@media (min-width: 768px) {
    .md\:gap-y-10 {
        row-gap: 2.5rem;
    }
}

/* lg:mx-auto — centers the subtitle paragraph in the features section */
@media (min-width: 1024px) {
    .lg\:mx-auto {
        margin-left: auto;
        margin-right: auto;
    }
}

/* mt-10 — top margin on the feature cards grid */
.mt-10 {
    margin-top: 2.5rem;
}

/* xl:gap-0 — removes hero grid gap at xl breakpoint */
@media (min-width: 1280px) {
    .xl\:gap-0 {
        gap: 0px;
    }
}

/* ===============================================
 * Additional landing page utilities missing from flowbite-dashboard.css
 * =============================================== */

/* py-12 — section vertical padding */
.py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* shadow-xl — hero dashboard image shadow */
.shadow-xl {
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* text-blue-200 — light blue text used in CTA sections */
.text-blue-200 {
    color: #bfdbfe;
}

@media (min-width: 640px) {
    /* sm:py-20 — hero section padding at sm */
    .sm\:py-20 {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
}

@media (min-width: 768px) {
    /* md:text-lg — paragraph font size at md */
    .md\:text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
}

@media (min-width: 1024px) {
    /* lg:mb-8 — image bottom margin at lg */
    .lg\:mb-8 {
        margin-bottom: 2rem;
    }
    /* lg:text-xl — subtitle font size at lg */
    .lg\:text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
}

@media (min-width: 1280px) {
    /* xl:text-6xl — hero headline at xl */
    .xl\:text-6xl {
        font-size: 3.75rem;
        line-height: 1;
    }
}

/* ===============================================
 * Home page fix: md:space-y-0 must override space-y-10 added above.
 * Without this, the 2-col feature grid items get extra top margin at md+.
 * =============================================== */
@media (min-width: 768px) {
    .md\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(0px * var(--tw-space-y-reverse));
    }
}

/* ===============================================
 * DSP page utilities missing from flowbite-dashboard.css
 * (unbundled-dsp.html and related public marketing pages)
 * =============================================== */

/* --- Gradient support --- */
.bg-gradient-to-b {
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.from-primary-50 {
    --tw-gradient-from: var(--color-primary-50);
    --tw-gradient-to: rgb(239 246 255 / 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-white {
    --tw-gradient-to: #ffffff;
}

.dark .dark\:from-gray-900 {
    --tw-gradient-from: #111827;
    --tw-gradient-to: rgb(17 24 39 / 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark .dark\:to-gray-800 {
    --tw-gradient-to: #1f2937;
}

/* --- Blue / accent backgrounds --- */
html:not(.dark) .bg-blue-50 {
    background-color: #eff6ff !important;
}

.dark .dark\:bg-blue-900\/20 {
    background-color: rgba(30, 58, 138, 0.2) !important;
}

.dark .dark\:bg-blue-900\/30 {
    background-color: rgba(30, 58, 138, 0.3) !important;
}

.dark .dark\:hover\:bg-blue-900\/30:hover {
    background-color: rgba(30, 58, 138, 0.3) !important;
}

/* --- Left/top border widths --- */
.border-l-4 {
    border-left-width: 4px;
}

/* --- Blue border colors --- */
html:not(.dark) .border-blue-200 {
    border-color: #bfdbfe !important;
}

html:not(.dark) .border-blue-300 {
    border-color: #93c5fd !important;
}

.dark .dark\:border-blue-600 {
    border-color: #2563eb !important;
}

.dark .dark\:border-blue-800 {
    border-color: #1e40af !important;
}

.dark .dark\:border-primary-400 {
    border-color: var(--color-primary-400) !important;
}

/* --- Blue divide (separator) colors --- */
/* Uses :not(:last-child) to match Tailwind v4's divide-y selector pattern */
html:not(.dark) .divide-blue-200 > :not(:last-child) {
    border-color: #bfdbfe;
}

.dark .dark\:divide-blue-800 > :not(:last-child) {
    border-color: #1e40af;
}

/* --- Divide direction overrides at lg breakpoint --- */
@media (min-width: 1024px) {
    .lg\:divide-y-0 > :not(:last-child) {
        border-top-width: 0;
        border-bottom-width: 0;
    }

    /* Add inline-end (right in LTR) border, matching Tailwind v4 divide-x */
    .lg\:divide-x > :not(:last-child) {
        --tw-divide-x-reverse: 0;
        border-right-style: solid;
        border-left-style: solid;
        border-right-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
        border-left-width: calc(1px * var(--tw-divide-x-reverse));
    }
}

/* --- Blue / dark-mode text colors --- */
.text-blue-700 {
    color: #1d4ed8;
}

.text-blue-400 {
    color: #60a5fa;
}

.dark .dark\:text-blue-400 {
    color: #60a5fa !important;
}

/* --- Transition --- */
.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* --- Missing padding utilities (DSP page hero / sections) --- */
.pt-12 {
    padding-top: 3rem;
}

.pb-16 {
    padding-bottom: 4rem;
}

.pt-10 {
    padding-top: 2.5rem;
}

.py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.px-7 {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
}

.py-3\.5 {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
}

.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}

@media (min-width: 1024px) {
    .lg\:pt-20 {
        padding-top: 5rem;
    }

    .lg\:pb-24 {
        padding-bottom: 6rem;
    }

    .lg\:pl-12 {
        padding-left: 3rem;
    }

    /* Hero heading and subtitle responsive sizes */
    .lg\:text-6xl {
        font-size: 3.75rem;
        line-height: 1;
    }

    .lg\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }
}

/* --- Missing gap utilities --- */
.gap-x-12 {
    column-gap: 3rem;
}

.gap-y-12 {
    row-gap: 3rem;
}

/* --- Fractional margin utilities --- */
.mt-0\.5 {
    margin-top: 0.125rem;
}

/* ============================================================
   Pricing page — missing Tailwind utilities
   ============================================================ */

/* Negative position offsets */
.-top-2 { top: -0.5rem; }
.-top-4 { top: -1rem; }
.-right-2 { right: -0.5rem; }

/* Extra margin / padding scale */
.mt-12 { margin-top: 3rem; }
.mt-16 { margin-top: 4rem; }
.mb-16 { margin-bottom: 4rem; }
.p-8 { padding: 2rem; }
.pb-8 { padding-bottom: 2rem; }
.pt-14 { padding-top: 3.5rem; }

/* XL responsive grid */
@media (min-width: 1280px) {
    .xl\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .xl\:col-span-3 {
        grid-column: span 3 / span 3;
    }
}

/* MD responsive utilities */
@media (min-width: 768px) {
    .md\:col-span-2 {
        grid-column: span 2 / span 2;
    }
}

/* SM responsive utilities */
@media (min-width: 640px) {
    .sm\:mt-12 { margin-top: 3rem; }
}

/* LG responsive utilities */
@media (min-width: 1024px) {
    .lg\:pb-16 { padding-bottom: 4rem; }
    .lg\:py-8 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

/* Arbitrary height */
.h-\[52px\] { height: 52px; }

/* flex-shrink-0 */
.flex-shrink-0 { flex-shrink: 0; }

/* Amber text */
.text-amber-500 { color: #f59e0b; }

/* Hover shadow */
.hover\:shadow-md:hover {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* transition-shadow */
.transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Group hover text colors */
.group:hover .group-hover\:text-primary-600 { color: #7e3af2; }
.dark .group:hover .dark\:group-hover\:text-primary-400 { color: #ac94fa; }

/* Standalone hover text colors */
.dark .dark\:hover\:text-primary-400:hover { color: #ac94fa; }

/* Dark mode opacity background variants */
.dark .dark\:bg-primary-900\/30 { background-color: rgb(74 29 150 / 0.3); }
.dark .dark\:border-primary-700 { border-color: #6c2bd9; }

/* ============================================================
   About page — missing Tailwind utilities
   ============================================================ */

/* Horizontal gradient direction */
.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

/* Gradient start colors */
.from-blue-50 {
    --tw-gradient-from: #eff6ff;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(239 246 255 / 0));
}
.from-green-50 {
    --tw-gradient-from: #f0fdf4;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(240 253 244 / 0));
}
.from-purple-50 {
    --tw-gradient-from: #faf5ff;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(250 245 255 / 0));
}

/* Dark mode gradient overrides */
.dark .dark\:from-gray-800 {
    --tw-gradient-from: #1f2937;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(31 41 55 / 0));
}
.dark .dark\:to-gray-900 {
    --tw-gradient-to: #111827;
}

/* Border colors */
.border-green-600 { border-color: #16a34a; }
.border-purple-600 { border-color: #9333ea; }
.dark .dark\:border-green-500 { border-color: #22c55e; }
.dark .dark\:border-purple-500 { border-color: #a855f7; }

/* LG responsive typography */
@media (min-width: 1024px) {
    .lg\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
}

/* Spacing */
.px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}

/* ============================================================
   Emerald color utilities — missing from compiled flowbite-dashboard.css
   Used by: budget-lookup (Import Plan button), bid-adjust-lookup
   ============================================================ */

/* Backgrounds — light shades scoped to light mode */
html:not(.dark) .bg-emerald-50  { background-color: #ecfdf5 !important; }
html:not(.dark) .bg-emerald-100 { background-color: #d1fae5 !important; }
html:not(.dark) .bg-emerald-200 { background-color: #a7f3d0 !important; }

/* Backgrounds — solid shades apply in both modes */
.bg-emerald-300 { background-color: #6ee7b7 !important; }
.bg-emerald-400 { background-color: #34d399 !important; }
.bg-emerald-500 { background-color: #10b981 !important; }
.bg-emerald-600 { background-color: #059669 !important; }
.bg-emerald-700 { background-color: #047857 !important; }
.bg-emerald-800 { background-color: #065f46 !important; }
.bg-emerald-900 { background-color: #064e3b !important; }

/* Hover backgrounds */
.hover\:bg-emerald-400:hover { background-color: #34d399 !important; }
.hover\:bg-emerald-500:hover { background-color: #10b981 !important; }
.hover\:bg-emerald-600:hover { background-color: #059669 !important; }
.hover\:bg-emerald-700:hover { background-color: #047857 !important; }

/* Dark mode overrides */
.dark .dark\:bg-emerald-500  { background-color: #10b981 !important; }
.dark .dark\:bg-emerald-600  { background-color: #059669 !important; }
.dark .dark\:bg-emerald-900  { background-color: #064e3b !important; }

/* Dark mode hover */
.dark .dark\:hover\:bg-emerald-400:hover { background-color: #34d399 !important; }
.dark .dark\:hover\:bg-emerald-500:hover { background-color: #10b981 !important; }
.dark .dark\:hover\:bg-emerald-700:hover { background-color: #047857 !important; }

/* Border colors */
html:not(.dark) .border-emerald-200 { border-color: #a7f3d0 !important; }
.border-emerald-500 { border-color: #10b981 !important; }
.border-emerald-600 { border-color: #059669 !important; }

/* Text colors */
html:not(.dark) .text-emerald-700 { color: #047857 !important; }
html:not(.dark) .text-emerald-800 { color: #065f46 !important; }
.dark .dark\:text-emerald-100 { color: #d1fae5 !important; }

/* Focus ring colors — sets the ring color CSS variable */
.focus\:ring-emerald-300:focus { --tw-ring-color: #6ee7b7; }
.focus\:ring-emerald-500:focus { --tw-ring-color: #10b981; }
.focus\:ring-emerald-800:focus { --tw-ring-color: #065f46; }
.dark .dark\:focus\:ring-emerald-800:focus { --tw-ring-color: #065f46; }

/* ============================================================
   Contact page — missing Tailwind utilities
   ============================================================ */

/* Max-width container */
.max-w-screen-sm { max-width: 640px; }

/* Missing dark mode blue variants (not compiled into flowbite-dashboard.css) */
.dark .dark\:bg-blue-900\/20 {
    background-color: rgb(30 58 138 / 0.2);
}
.dark .dark\:border-blue-400 {
    border-color: var(--color-blue-400);
}
.dark .dark\:border-blue-700 {
    border-color: var(--color-blue-700);
}
.dark .dark\:border-blue-800 {
    border-color: var(--color-blue-800);
}
.dark .dark\:border-blue-800\/50 {
    border-color: rgb(30 64 175 / 0.5);
}
.dark .dark\:text-blue-200 {
    color: var(--color-blue-200);
}
.dark .dark\:text-blue-300 {
    color: var(--color-blue-300);
}
.dark .dark\:text-blue-400 {
    color: var(--color-blue-400);
}

/* Dark mode light shadow (Flowbite form inputs) */
.dark .dark\:shadow-sm-light {
    --tw-shadow: 0 2px 5px 0 rgb(0 0 0 / 0.07);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* SM responsive width */
@media (min-width: 640px) {
    .sm\:w-fit { width: fit-content; }
}

/* LG responsive sizing (contact card icons) */
@media (min-width: 1024px) {
    .lg\:mb-16 { margin-bottom: 4rem; }
    .lg\:h-16 { height: 4rem; }
    .lg\:w-16 { width: 4rem; }
    .lg\:h-8 { height: 2rem; }
    .lg\:w-8 { width: 2rem; }
}

/* ============================================================
   Global dark mode: force Tailwind dark: variant overrides
   The flowbite-dashboard.css uses CSS nesting (&:where(.dark, .dark *))
   which loses the specificity battle against other bg-* rules in some
   cascade situations. These rules use html.dark ancestor + !important
   to guarantee the correct dark-mode colors win on every analytics page.
   ============================================================ */

/* Backgrounds */
html.dark .dark\:bg-gray-700  { background-color: #374151 !important; }
html.dark .dark\:bg-gray-800  { background-color: #1f2937 !important; }
html.dark .dark\:bg-gray-900  { background-color: #111827 !important; }
html.dark .dark\:bg-gray-900\/20 { background-color: rgba(17,24,39,0.2) !important; }

/* Borders */
html.dark .dark\:border-gray-600 { border-color: #4b5563 !important; }
html.dark .dark\:border-gray-700 { border-color: #374151 !important; }

/* Text */
html.dark .dark\:text-white     { color: #ffffff !important; }
html.dark .dark\:text-gray-100  { color: #f3f4f6 !important; }
html.dark .dark\:text-gray-200  { color: #e5e7eb !important; }
html.dark .dark\:text-gray-300  { color: #d1d5db !important; }

/* ============================================================
   ApexCharts — dark mode tooltip overrides (all charts)
   Overrides ApexCharts' default white bg so tooltips are readable
   in dark mode. Covers both built-in and custom tooltip templates.
   Two selector strategies for maximum compatibility:
   - html.dark: catches pages that don't set tooltip.theme
   - .apexcharts-theme-dark: catches built-in tooltips when tooltip.theme='dark'
   ============================================================ */
html.dark .apexcharts-tooltip,
.apexcharts-theme-dark.apexcharts-tooltip {
    background: #1f2937 !important;
    border-color: #374151 !important;
    color: #f3f4f6 !important;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4) !important;
}
html.dark .apexcharts-tooltip-title,
.apexcharts-theme-dark .apexcharts-tooltip-title {
    background: #374151 !important;
    border-bottom-color: #4b5563 !important;
    color: #f3f4f6 !important;
}
html.dark .apexcharts-tooltip-series-group,
.apexcharts-theme-dark .apexcharts-tooltip-series-group {
    color: #f3f4f6 !important;
}
html.dark .apexcharts-tooltip-text-y-label,
html.dark .apexcharts-tooltip-text-y-value,
html.dark .apexcharts-tooltip-text-goals-label,
html.dark .apexcharts-tooltip-text-goals-value,
html.dark .apexcharts-tooltip-text-z-value,
.apexcharts-theme-dark .apexcharts-tooltip-text-y-label,
.apexcharts-theme-dark .apexcharts-tooltip-text-y-value,
.apexcharts-theme-dark .apexcharts-tooltip-text-goals-label,
.apexcharts-theme-dark .apexcharts-tooltip-text-goals-value,
.apexcharts-theme-dark .apexcharts-tooltip-text-z-value {
    color: #f3f4f6 !important;
}

/* ============================================================
   Missing dark mode opacity variants — not compiled into flowbite-dashboard.css
   Used in: date range selector Relative panel, negative-targets expand rows,
   apply modal thead, and other components using Tailwind opacity-modifier syntax.
   ============================================================ */
html.dark .dark\:bg-gray-700\/20 { background-color: rgba(55, 65, 81, 0.2) !important; }
html.dark .dark\:bg-gray-700\/30 { background-color: rgba(55, 65, 81, 0.3) !important; }
html.dark .dark\:bg-gray-700\/50 { background-color: rgba(55, 65, 81, 0.5) !important; }
html.dark .dark\:bg-gray-800\/50 { background-color: rgba(31, 41, 55, 0.5) !important; }
html.dark .dark\:bg-gray-800\/80 { background-color: rgba(31, 41, 55, 0.8) !important; }
html.dark .dark\:bg-gray-900\/20 { background-color: rgba(17, 24, 39, 0.2) !important; }
html.dark .dark\:bg-gray-900\/30 { background-color: rgba(17, 24, 39, 0.3) !important; }
html.dark .dark\:bg-gray-900\/50 { background-color: rgba(17, 24, 39, 0.5) !important; }
html.dark .dark\:text-gray-400  { color: #9ca3af !important; }

/* ============================================================
   Amber colour classes — not compiled into flowbite-dashboard.css.
   Used by the stale-data banner on /analytics/search-terms/ and other
   pages that show "no data for selected period" warnings.
   Light-mode classes are needed too because bg-amber-* / text-amber-* are
   entirely absent from the compiled bundle.
   ============================================================ */
/* Light mode */
.bg-amber-50    { background-color: #fffbeb !important; }
.text-amber-800 { color: #92400e !important; }
.border-amber-200 { border-color: #fde68a !important; }
/* Dark mode */
html.dark .dark\:bg-amber-900\/30 { background-color: rgba(120, 53, 15, 0.3) !important; }
html.dark .dark\:text-amber-200   { color: #fde68a !important; }
html.dark .dark\:border-amber-700 { border-color: #b45309 !important; }