/*
 * Brand Theme Override
 * ---------------------------------------------------------------
 * Fixed brand palette for the project:
 *   --brand-navy:   #1f1e4a  (indigo / navy)
 *   --brand-orange: #964817  (warm orange / brown)
 *   --brand-deep:   #083062  (deep blue)
 *
 * Application rules (aligned with the project's UI guidelines):
 *   - Navigation bars      : gradient #1f1e4a -> #083062
 *   - Stat card labels     : #964817
 *   - Stat card numbers    : #1f1e4a
 *   - Action card accents  : one of the three colors per card
 *   - Notifications: info #1f1e4a, success #083062, error #964817
 *
 * This file is loaded AFTER app.css so these overrides win without
 * having to rewrite every red/pink/purple utility across the project.
 */

:root {
    --brand-navy: #1f1e4a;
    --brand-navy-hover: #16153a;
    --brand-navy-50: #e9e8f0;
    --brand-navy-100: #c4c3d8;
    --brand-navy-200: #8d8bb0;

    --brand-orange: #964817;
    --brand-orange-hover: #7a3a12;
    --brand-orange-50: #fbefe7;
    --brand-orange-100: #f4d5bf;
    --brand-orange-200: #e0a478;

    --brand-deep: #083062;
    --brand-deep-hover: #051f42;
    --brand-deep-50: #e5ecf4;
    --brand-deep-100: #b7c6dd;
}

/* ---------------------------------------------------------------
 * Background colors
 * Red / pink  -> orange accent
 * Purple      -> navy
 * --------------------------------------------------------------- */
.bg-red-50, .bg-pink-50        { background-color: var(--brand-orange-50) !important; }
.bg-red-100, .bg-pink-100      { background-color: var(--brand-orange-100) !important; }
.bg-red-200, .bg-pink-200      { background-color: var(--brand-orange-200) !important; }
.bg-red-300, .bg-pink-300,
.bg-red-400, .bg-pink-400      { background-color: var(--brand-orange) !important; }
.bg-red-500, .bg-pink-500,
.bg-red-600, .bg-pink-600      { background-color: var(--brand-orange) !important; }
.bg-red-700, .bg-pink-700,
.bg-red-800, .bg-pink-800,
.bg-red-900, .bg-pink-900      { background-color: var(--brand-navy) !important; }

.bg-purple-50                  { background-color: var(--brand-navy-50) !important; }
.bg-purple-100                 { background-color: var(--brand-navy-100) !important; }
.bg-purple-500, .bg-purple-600,
.bg-purple-700, .bg-purple-800,
.bg-purple-900                 { background-color: var(--brand-navy) !important; }

.bg-indigo-500, .bg-indigo-600,
.bg-indigo-700, .bg-indigo-800 { background-color: var(--brand-navy) !important; }

/* ---------------------------------------------------------------
 * Text colors
 * --------------------------------------------------------------- */
.text-red-500, .text-pink-500,
.text-red-600, .text-pink-600  { color: var(--brand-orange) !important; }
.text-red-700, .text-pink-700,
.text-red-800, .text-pink-800,
.text-red-900, .text-pink-900  { color: var(--brand-navy) !important; }
.text-red-400, .text-pink-400  { color: var(--brand-orange) !important; }

.text-purple-500, .text-purple-600,
.text-purple-700, .text-purple-800 { color: var(--brand-navy) !important; }

.text-indigo-500, .text-indigo-600,
.text-indigo-700, .text-indigo-800 { color: var(--brand-navy) !important; }

/* ---------------------------------------------------------------
 * Border colors
 * --------------------------------------------------------------- */
.border-red-200, .border-pink-200 { border-color: var(--brand-orange-200) !important; }
.border-red-500, .border-pink-500,
.border-red-600, .border-pink-600 { border-color: var(--brand-orange) !important; }
.border-red-700, .border-red-800,
.border-pink-700                  { border-color: var(--brand-navy) !important; }
.border-b-2.border-b-purple-800,
.border-purple-500, .border-purple-600,
.border-purple-700, .border-purple-800 { border-color: var(--brand-navy) !important; }
.border-b-purple-800               { border-bottom-color: var(--brand-navy) !important; }

/* ---------------------------------------------------------------
 * Ring (focus outline)
 * --------------------------------------------------------------- */
.ring-red-500, .ring-pink-500,
.ring-red-600, .ring-pink-600      { --tw-ring-color: var(--brand-orange) !important; }
.focus\:ring-red-500:focus,
.focus\:ring-red-600:focus,
.focus\:ring-pink-500:focus,
.focus\:ring-pink-600:focus        { --tw-ring-color: var(--brand-orange) !important; }
.focus\:ring-purple-500:focus,
.focus\:ring-indigo-500:focus      { --tw-ring-color: var(--brand-navy) !important; }

/* ---------------------------------------------------------------
 * Hover states
 * --------------------------------------------------------------- */
.hover\:bg-red-600:hover,
.hover\:bg-red-700:hover,
.hover\:bg-pink-600:hover,
.hover\:bg-pink-700:hover          { background-color: var(--brand-orange-hover) !important; }
.hover\:bg-red-800:hover,
.hover\:bg-pink-800:hover          { background-color: var(--brand-navy-hover) !important; }
.hover\:bg-purple-700:hover,
.hover\:bg-purple-800:hover,
.hover\:bg-indigo-700:hover        { background-color: var(--brand-navy-hover) !important; }

.hover\:text-red-500:hover,
.hover\:text-red-600:hover,
.hover\:text-red-700:hover         { color: var(--brand-orange-hover) !important; }
.hover\:text-purple-700:hover,
.hover\:text-purple-800:hover      { color: var(--brand-navy-hover) !important; }

/* ---------------------------------------------------------------
 * Gradients
 * Map red-* gradients to the warm->cool brand gradient (#964817 -> #1f1e4a).
 * The nav gradient (purple-*) explicitly maps to #1f1e4a -> #083062.
 * Tailwind gradients are driven by three CSS variables, so we override all.
 * --------------------------------------------------------------- */
.from-red-500, .from-pink-500 {
    --tw-gradient-from: var(--brand-orange) !important;
    --tw-gradient-to: rgba(150, 72, 23, 0) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.from-red-600, .from-pink-600 {
    --tw-gradient-from: var(--brand-orange) !important;
    --tw-gradient-to: rgba(150, 72, 23, 0) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.from-red-700, .from-pink-700 {
    --tw-gradient-from: var(--brand-orange-hover) !important;
    --tw-gradient-to: rgba(122, 58, 18, 0) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-red-500, .to-pink-500        { --tw-gradient-to: var(--brand-orange) !important; }
.to-red-600, .to-pink-600,
.to-red-700, .to-pink-700        { --tw-gradient-to: var(--brand-navy) !important; }
.via-red-500, .via-red-600,
.via-red-700                     { --tw-gradient-via: var(--brand-navy) !important; }

.from-purple-500, .from-purple-600,
.from-purple-700, .from-purple-800 {
    --tw-gradient-from: var(--brand-navy) !important;
    --tw-gradient-to: rgba(31, 30, 74, 0) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-purple-500, .to-purple-600,
.to-purple-700, .to-purple-800,
.to-indigo-700, .to-indigo-800   { --tw-gradient-to: var(--brand-deep) !important; }

.hover\:from-red-600:hover,
.hover\:from-pink-600:hover      { --tw-gradient-from: var(--brand-orange-hover) !important; }
.hover\:to-red-700:hover,
.hover\:to-pink-700:hover        { --tw-gradient-to: var(--brand-navy-hover) !important; }

/* ---------------------------------------------------------------
 * Placeholder / status / utility classes used in the project
 * --------------------------------------------------------------- */
.status-live                      { background-color: var(--brand-orange) !important; }
.status-schedule                  { background-color: var(--brand-navy) !important; }
.status-archive                   { background-color: #6b7280 !important; } /* keep neutral gray for archive */

/* Admin dashboard stat cards (if card uses `.stat-label` / `.stat-number`) */
.stat-label                       { color: var(--brand-orange) !important; }
.stat-number                      { color: var(--brand-navy) !important; }

/* Notification types per the rules */
.alert-info,    .notice-info      { background-color: var(--brand-navy-50) !important; border-color: var(--brand-navy) !important; color: var(--brand-navy) !important; }
.alert-success, .notice-success   { background-color: var(--brand-deep-50) !important; border-color: var(--brand-deep) !important; color: var(--brand-deep) !important; }
.alert-error,   .notice-error,
.alert-danger,  .notice-danger    { background-color: var(--brand-orange-50) !important; border-color: var(--brand-orange) !important; color: var(--brand-orange) !important; }

/* Project-wide brand utility classes for new markup */
.bg-brand-navy    { background-color: var(--brand-navy) !important; }
.bg-brand-orange  { background-color: var(--brand-orange) !important; }
.bg-brand-deep    { background-color: var(--brand-deep) !important; }
.text-brand-navy  { color: var(--brand-navy) !important; }
.text-brand-orange{ color: var(--brand-orange) !important; }
.text-brand-deep  { color: var(--brand-deep) !important; }
.border-brand-navy   { border-color: var(--brand-navy) !important; }
.border-brand-orange { border-color: var(--brand-orange) !important; }
.border-brand-deep   { border-color: var(--brand-deep) !important; }

.bg-brand-gradient-nav {
    background-image: linear-gradient(to right, var(--brand-navy), var(--brand-deep)) !important;
}
.bg-brand-gradient-accent {
    background-image: linear-gradient(to right, var(--brand-orange), var(--brand-navy)) !important;
}
.bg-brand-gradient-deep {
    background-image: linear-gradient(to right, var(--brand-deep), var(--brand-navy)) !important;
}

/* Gradient headings that were styled via `bg-clip-text` stay readable */
.bg-gradient-to-r.from-red-500.to-red-700,
.bg-gradient-to-r.from-red-600.to-red-700,
.bg-gradient-to-r.from-pink-500.to-pink-700 {
    background-image: linear-gradient(to right, var(--brand-orange), var(--brand-navy)) !important;
}

/* Navigation header bottom border color from layouts/guest.blade.php */
.border-b-2.border-b-purple-800 { border-bottom-color: var(--brand-navy) !important; }

/* ---------------------------------------------------------------
 * Admin slate-800 surfaces -> brand navy / gradient
 * Nav bars use the brand gradient per the brand UI rules.
 * Modal headers / other panels use a solid brand navy.
 * --------------------------------------------------------------- */
nav.bg-slate-800 {
    background-color: var(--brand-navy) !important;
    background-image: linear-gradient(to right, var(--brand-navy), var(--brand-deep)) !important;
}
.bg-slate-800 {
    background-color: var(--brand-navy) !important;
}
.hover\:bg-slate-700:hover,
.hover\:bg-slate-800:hover,
.hover\:bg-slate-900:hover { background-color: var(--brand-navy-hover) !important; }