/* ==========================================================================
   Travilista B2B — Brand Theme Overrides
   --------------------------------------------------------------------------
   Centralized corporate branding for the AdminLTE/Bootstrap design system.

   Only the PRIMARY theme color is replaced with the Travilista brand color.
   AdminLTE's secondary, success, warning, danger and info colors are kept
   intact. Change the values in :root below to re-brand the whole app.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Brand color tokens
   --------------------------------------------------------------------------
   --tv-brand        : solid primary brand color (small UI elements)
   --tv-brand-rgb    : rgba() compatible form
   --tv-brand-dark   : darker shade used in gradients / hover states
   --tv-brand-darker : deepest shade for gradient ends
   -------------------------------------------------------------------------- */
:root {
    --tv-brand: #dd0000;
    --tv-brand-rgb: 221, 0, 0;
    --tv-brand-dark: #b30000;
    --tv-brand-darker: #990000;
    --tv-brand-light: #e31b1b;

    /* Subtle brand gradient for large visual areas (sidebar, navbar, headers) */
    --tv-brand-gradient: linear-gradient(135deg, #dd0000 0%, #b30000 100%);
    --tv-brand-gradient-soft: linear-gradient(135deg, #e31b1b 0%, #990000 100%);
}

/* --------------------------------------------------------------------------
   2. Override Bootstrap/AdminLTE primary color variables
   --------------------------------------------------------------------------
   These cascade through every component that uses the primary color:
   buttons, badges, links, progress bars, nav pills, pagination, focus rings,
   text-bg-primary, bg-primary, border-primary, alerts, callouts, etc.
   -------------------------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
    --bs-primary: var(--tv-brand);
    --bs-primary-rgb: var(--tv-brand-rgb);
    --bs-primary-text-emphasis: #8c0000;
    --bs-primary-bg-subtle: rgb(251.8, 204, 204);
    --bs-primary-border-subtle: rgb(247.6, 153, 153);
    --bs-primary-emphasis: var(--tv-brand-dark);

    /* Form focus color (used by .form-control:focus / .form-select:focus) */
    --bs-focus-ring-color: rgba(var(--tv-brand-rgb), 0.25);
}

[data-bs-theme="dark"] {
    --bs-primary: var(--tv-brand);
    --bs-primary-rgb: var(--tv-brand-rgb);
    --bs-primary-text-emphasis: rgb(243.6, 102, 102);
    --bs-primary-bg-subtle: rgb(55.2, 0, 0);
    --bs-primary-border-subtle: rgb(110.4, 0, 0);
    --bs-primary-emphasis: var(--tv-brand-light);

    --bs-focus-ring-color: rgba(var(--tv-brand-rgb), 0.25);
}

/* --------------------------------------------------------------------------
   3. Solid primary components (buttons, badges, pills, progress, pagination)
   -------------------------------------------------------------------------- */

/* Primary button */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--tv-brand);
    --bs-btn-border-color: var(--tv-brand);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--tv-brand-dark);
    --bs-btn-hover-border-color: var(--tv-brand-dark);
    --bs-btn-focus-shadow-rgb: var(--tv-brand-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--tv-brand-darker);
    --bs-btn-active-border-color: var(--tv-brand-darker);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--tv-brand);
    --bs-btn-disabled-border-color: var(--tv-brand);
}

/* Outline primary button */
.btn-outline-primary {
    --bs-btn-color: var(--tv-brand);
    --bs-btn-border-color: var(--tv-brand);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--tv-brand);
    --bs-btn-hover-border-color: var(--tv-brand);
    --bs-btn-focus-shadow-rgb: var(--tv-brand-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--tv-brand);
    --bs-btn-active-border-color: var(--tv-brand);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--tv-brand);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--tv-brand);
}

/* Nav pills active state */
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--tv-brand);
}

/* Progress bar default background */
.progress {
    --bs-progress-bar-bg: var(--tv-brand);
}

/* Pagination active state */
.page-link.active,
.active > .page-link {
    background-color: var(--tv-brand);
    border-color: var(--tv-brand);
}

/* Accordion active header */
.accordion-button:not(.collapsed) {
    background-color: var(--bs-primary-bg-subtle);
}

/* Form controls focus border color */
.form-control:focus,
.form-select:focus {
    border-color: rgb(var(--tv-brand-rgb), 0.6);
    box-shadow: 0 0 0 0.25rem rgba(var(--tv-brand-rgb), 0.25);
}

/* Login/register input group focus accent */
.login-card-body .input-group .form-control:focus ~ .input-group-prepend .input-group-text,
.login-card-body .input-group .form-control:focus ~ .input-group-append .input-group-text,
.register-card-body .input-group .form-control:focus ~ .input-group-prepend .input-group-text,
.register-card-body .input-group .form-control:focus ~ .input-group-append .input-group-text {
    border-color: rgb(var(--tv-brand-rgb), 0.6);
}

/* Loading spinner / busy indicator border */
.loading[aria-busy="true"]::after {
    border-top-color: var(--tv-brand);
}

/* --------------------------------------------------------------------------
   4. Sidebar — transparent background, solid brand active item
   --------------------------------------------------------------------------
   The sidebar background is kept transparent so it blends with the page
   background (AdminLTE body). The selected/active menu item uses the solid
   brand color to clearly indicate the current location.
   -------------------------------------------------------------------------- */
.app-sidebar {
    background: transparent !important;
    color: var(--bs-body-color);
    --lte-sidebar-color: var(--bs-body-color);
    --lte-sidebar-hover-color: var(--tv-brand);
    --lte-sidebar-active-color: #fff;
    --lte-sidebar-hover-bg: rgba(var(--tv-brand-rgb), 0.1);
    --lte-sidebar-menu-active-bg: var(--tv-brand);
    --lte-sidebar-menu-active-color: #fff;
    --lte-sidebar-submenu-bg: transparent;
    --lte-sidebar-submenu-color: var(--bs-secondary-color);
    --lte-sidebar-submenu-hover-color: var(--tv-brand);
    --lte-sidebar-submenu-hover-bg: rgba(var(--tv-brand-rgb), 0.1);
    --lte-sidebar-submenu-active-color: #fff;
    --lte-sidebar-submenu-active-bg: var(--tv-brand);
    --lte-sidebar-header-color: var(--bs-secondary-color);
}

/* Sidebar brand text uses the brand color */
.app-sidebar .brand-link,
.app-sidebar .brand-text {
    color: var(--tv-brand);
}

.app-sidebar .brand-text:hover {
    color: var(--tv-brand-dark);
}

/* Sidebar links inherit body color; active links are white on brand */
.app-sidebar .sidebar-wrapper a {
    color: var(--lte-sidebar-color);
}

/* Active sidebar menu item: solid brand background + white text */
.sidebar-wrapper .sidebar-menu > .nav-item > .nav-link.active,
.sidebar-wrapper .sidebar-menu > .nav-item.menu-open > .nav-link.active,
.sidebar-wrapper .nav-treeview > .nav-item > .nav-link.active {
    background-color: var(--tv-brand) !important;
    color: #fff !important;
    box-shadow: none;
}

/* Hover state for non-active items: subtle brand tint */
.sidebar-wrapper .sidebar-menu > .nav-item > .nav-link:hover,
.sidebar-wrapper .sidebar-menu > .nav-item > .nav-link:focus,
.sidebar-wrapper .nav-treeview > .nav-item > .nav-link:hover,
.sidebar-wrapper .nav-treeview > .nav-item > .nav-link:focus {
    background-color: rgba(var(--tv-brand-rgb), 0.1);
    color: var(--tv-brand);
}

/* Menu-open parent item gets a subtle brand tint */
.sidebar-wrapper .sidebar-menu > .nav-item.menu-open > .nav-link {
    background-color: rgba(var(--tv-brand-rgb), 0.1);
    color: var(--tv-brand);
}

/* --------------------------------------------------------------------------
   5. Navbar — subtle brand gradient on the header (large area)
   --------------------------------------------------------------------------
   The main app header uses a light AdminLTE style by default. We keep that
   look but tint the active nav link with the brand color so the header still
   feels like AdminLTE while carrying the brand accent.
   -------------------------------------------------------------------------- */
.app-header.navbar .navbar-nav .nav-link.active {
    color: var(--tv-brand);
}

/* User menu header (the avatar panel) uses the brand gradient */
.user-menu .user-header {
    background: var(--tv-brand-gradient) !important;
}

/* --------------------------------------------------------------------------
   6. Auth (login/register) card accent
   -------------------------------------------------------------------------- */
.login-box .card.card-primary,
.register-box .card.card-primary,
.login-box .card.card-outline.card-primary,
.register-box .card.card-outline.card-primary {
    --bs-card-border-color: var(--tv-brand);
}

.login-box .card.card-outline.card-primary > .card-header,
.register-box .card.card-outline.card-primary > .card-header {
    background: var(--tv-brand-gradient);
    color: #fff;
}

/* --------------------------------------------------------------------------
   7. Page header / hero / banner helpers
   --------------------------------------------------------------------------
   Reusable utility classes for large colored areas across views.
   -------------------------------------------------------------------------- */
.tv-brand-gradient {
    background: var(--tv-brand-gradient) !important;
    color: #fff;
}

.tv-brand-gradient-soft {
    background: var(--tv-brand-gradient-soft) !important;
    color: #fff;
}

.tv-brand-solid {
    background: var(--tv-brand) !important;
    color: #fff;
}

/* Card header brand accent */
.card-header.tv-brand-gradient {
    background: var(--tv-brand-gradient) !important;
}

/* Small-box primary variant uses solid brand color */
.small-box.text-bg-primary,
.small-box.bg-primary {
    background-color: var(--tv-brand) !important;
    color: #fff;
}

/* --------------------------------------------------------------------------
   8. Wizard step indicators (used in the Add Hotel wizard)
   -------------------------------------------------------------------------- */
.wizard-steps li.active {
    color: var(--tv-brand);
}

.wizard-steps li.active::before {
    background: var(--tv-brand);
    border-color: var(--tv-brand);
    color: #fff;
}

/* --------------------------------------------------------------------------
   9. Brand link / accent text
   -------------------------------------------------------------------------- */
.text-brand {
    color: var(--tv-brand) !important;
}

.bg-brand {
    background-color: var(--tv-brand) !important;
    color: #fff;
}

.border-brand {
    border-color: var(--tv-brand) !important;
}

/* --------------------------------------------------------------------------
   10. RTL parity
   --------------------------------------------------------------------------
   The same overrides apply in RTL; no directional rules are needed because
   we only override colors. The RTL layout loads this file after
   adminlte.rtl.min.css so cascade order is preserved.
   -------------------------------------------------------------------------- */