/* LuxStay Custom Theme - Bootstrap 5 Override */
/* Primary Color: Red */

:root {
    /* Primary color - Red */
    --bs-primary: #dc3545;
    --bs-primary-rgb: 220, 53, 69;

    /* Primary color variations */
    --bs-primary-bg-subtle: #f8d7da;
    --bs-primary-border-subtle: #f1aeb5;
    --bs-primary-text-emphasis: #58151c;

    /* Link colors based on primary */
    --bs-link-color: #dc3545;
    --bs-link-hover-color: #b02a37;
    --bs-link-color-rgb: 220, 53, 69;
    --bs-link-hover-color-rgb: 176, 42, 55;
}

/* Bootstrap primary button overrides */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #dc3545;
    --bs-btn-border-color: #dc3545;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #bb2d3b;
    --bs-btn-hover-border-color: #b02a37;
    --bs-btn-focus-shadow-rgb: 225, 83, 97;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #b02a37;
    --bs-btn-active-border-color: #a52834;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #dc3545;
    --bs-btn-disabled-border-color: #dc3545;
}

/* Bootstrap outline primary button */
.btn-outline-primary {
    --bs-btn-color: #dc3545;
    --bs-btn-border-color: #dc3545;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #dc3545;
    --bs-btn-hover-border-color: #dc3545;
    --bs-btn-focus-shadow-rgb: 220, 53, 69;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #dc3545;
    --bs-btn-active-border-color: #dc3545;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #dc3545;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #dc3545;
    --bs-gradient: none;
}

/* Background utilities */
.bg-primary {
    background-color: #dc3545 !important;
}

.text-bg-primary {
    color: #fff !important;
    background-color: RGBA(220, 53, 69, 1) !important;
}

/* Border utilities */
.border-primary {
    border-color: #dc3545 !important;
}

/* Text utilities */
.text-primary {
    color: #dc3545 !important;
}

.link-primary {
    color: RGBA(220, 53, 69, 1) !important;
    text-decoration-color: RGBA(220, 53, 69, 1) !important;
}

.link-primary:hover,
.link-primary:focus {
    color: RGBA(176, 42, 55, 1) !important;
    text-decoration-color: RGBA(176, 42, 55, 1) !important;
}

/* Badge */
.badge.text-bg-primary {
    color: #fff !important;
    background-color: RGBA(220, 53, 69, 1) !important;
}

/* Alert */
.alert-primary {
    --bs-alert-color: #58151c;
    --bs-alert-bg: #f8d7da;
    --bs-alert-border-color: #f1aeb5;
    --bs-alert-link-color: #58151c;
}

/* List group */
.list-group-item-primary {
    --bs-list-group-color: #58151c;
    --bs-list-group-bg: #f8d7da;
    --bs-list-group-border-color: #f1aeb5;
    --bs-list-group-action-hover-color: #58151c;
    --bs-list-group-action-hover-bg: #f1aeb5;
    --bs-list-group-action-active-color: #58151c;
    --bs-list-group-action-active-bg: #f1aeb5;
    --bs-list-group-active-color: #fff;
    --bs-list-group-active-bg: #dc3545;
    --bs-list-group-active-border-color: #dc3545;
}

/* Progress bar */
.progress-bar {
    background-color: #dc3545;
}

/* Form controls focus */
.form-control:focus,
.form-select:focus {
    border-color: #fca9ae;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

/* Form check */
.form-check-input:checked {
    background-color: #dc3545;
    border-color: #dc3545;
}

.form-check-input:focus {
    border-color: #fca9ae;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

/* Pagination */
.pagination .page-link {
    color: #dc3545;
}

.pagination .page-link:hover {
    color: #b02a37;
    background-color: #f8d7da;
    border-color: #dc3545;
}

.pagination .page-item.active .page-link {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

/* Nav pills */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #fff;
    background-color: #dc3545;
}

/* Dropdown */
.dropdown-item.active,
.dropdown-item:active {
    color: #fff;
    background-color: #dc3545;
}

/* ============================================ */
/* Serenity Framework Specific Overrides */
/* ============================================ */

/* Main Layout Header - Primary background with white text */
.s-sidebar-header,
header.s-sidebar-header,
.navbar.s-sidebar-header {
    background-color: #dc3545 !important;
    color: #ffffff !important;
}

/* Header branding and title */
.s-sidebar-header-branding,
.s-sidebar-header-title {
    color: #ffffff !important;
}

/* Header links and icons */
.s-sidebar-header-link,
.s-sidebar-header-actions a,
.s-sidebar-header-actions i {
    color: #ffffff !important;
}

.s-sidebar-header-link:hover,
.s-sidebar-header-actions a:hover {
    color: #f8f9fa !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Sidebar toggler button */
.s-sidebar-toggler,
.s-sidebar-toggler i {
    color: #ffffff !important;
}

/* Sidebar Navigation - Black background with white text */
.s-sidebar,
.s-sidebar-pane,
.s-SidebarPanel,
aside.sidebar,
nav.sidebar {
    background-color: #000000 !important;
}

/* Sidebar search */
.s-sidebar-search {
    background-color: #000000 !important;
}

.s-sidebar-search-input {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border-color: #333333 !important;
}

.s-sidebar-search-input::placeholder {
    color: #999999 !important;
}

.s-sidebar-search-icon {
    color: #ffffff !important;
}

/* Sidebar menu */
.s-sidebar-menu {
    background-color: #000000 !important;
}

/* Sidebar links */
.s-sidebar a,
.s-sidebar-link,
.s-SidebarPanel a {
    color: #ffffff !important;
}

.s-sidebar-link-text {
    color: #ffffff !important;
}

/* Sidebar icons */
.s-sidebar-icon,
.s-sidebar i {
    color: #ffffff !important;
}

/* Sidebar menu toggle icon */
.s-sidebar-menu-toggle {
    color: #ffffff !important;
}

/* Sidebar hover states */
.s-sidebar a:hover,
.s-sidebar-link:hover,
.s-SidebarPanel a:hover {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

.s-sidebar-link:hover .s-sidebar-icon,
.s-sidebar-link:hover .s-sidebar-link-text,
.s-sidebar-link:hover .s-sidebar-menu-toggle {
    color: #ffffff !important;
}

/* Active sidebar item */
.s-sidebar-item.active > .s-sidebar-link,
.s-sidebar-link.active {
    background-color: #dc3545 !important;
    color: #ffffff !important;
}

.s-sidebar-item.active > .s-sidebar-link .s-sidebar-icon,
.s-sidebar-item.active > .s-sidebar-link .s-sidebar-link-text,
.s-sidebar-item.active > .s-sidebar-link .s-sidebar-menu-toggle {
    color: #ffffff !important;
}

/* Collapsed submenu items */
.s-sidebar-menu.collapse,
.s-sidebar-menu.show {
    background-color: #000000 !important;
}

/* Navigation Menu Items */
.nav-link {
    color: #dc3545 !important;
}

.nav-link:hover {
    color: #b02a37 !important;
}

.nav-link.active {
    color: #ffffff !important;
    background-color: #dc3545 !important;
}

/* Page Title Section */
.s-page-title,
.page-title {
    color: #dc3545;
}

/* Breadcrumb */
.breadcrumb a {
    color: #dc3545;
}

.breadcrumb a:hover {
    color: #b02a37;
}

/* ============================================ */
/* Login Page Customization - Professional Design */
/* ============================================ */

/* Login page body background with sophisticated gradient */
body:has(.s-LoginPanel) {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e22ce 100%) !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Animated background pattern */
body:has(.s-LoginPanel)::before {
    content: '' !important;
    position: absolute !important;
    width: 200% !important;
    height: 200% !important;
    top: -50% !important;
    left: -50% !important;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px) !important;
    background-size: 50px 50px !important;
    animation: moveBackground 20s linear infinite !important;
    pointer-events: none !important;
}

@keyframes moveBackground {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

/* Login container - increased size */
.s-container-tight {
    max-width: 480px !important;
    width: 100% !important;
    margin: 0 auto !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Login panel - professional card styling */
.s-LoginPanel {
    background: rgba(255, 255, 255, 0.98) !important;
    border-radius: 20px !important;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.2) !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    overflow: hidden !important;
    backdrop-filter: blur(10px) !important;
}

/* Login panel header with elegant gradient */
.s-LoginPanel > h2 {
    background: linear-gradient(135deg, #dc3545 0%, #c41e3a 50%, #8b0000 100%) !important;
    color: #ffffff !important;
    padding: 2.5rem 2rem !important;
    margin: 0 !important;
    text-align: center !important;
    border-radius: 0 !important;
    position: relative !important;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3) !important;
}

/* Elegant header overlay */
.s-LoginPanel > h2::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%) !important;
    pointer-events: none !important;
}

/* Logo styling - professional appearance */
.s-LoginPanel .s-site-logo-img {
    max-width: 160px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto 0.75rem !important;
    filter: brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0,0,0,0.2)) !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Login panel body */
.s-LoginPanel .s-Panel {
    padding: 2.5rem !important;
    background: #ffffff !important;
}

/* Login form title */
.s-LoginPanel .s-Panel h5 {
    color: #1a1a1a !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin: 0 0 2.5rem 0 !important;
    text-align: center !important;
    letter-spacing: -0.5px !important;
}

/* Form field containers */
.s-LoginPanel .field {
    margin-bottom: 1.75rem !important;
}

/* Form labels */
.s-LoginPanel label.caption {
    color: #1a1a1a !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    margin-bottom: 0.625rem !important;
    display: block !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Form inputs - professional styling */
.s-LoginPanel input.editor {
    width: 100% !important;
    padding: 0.875rem 1.25rem !important;
    border: 2px solid #e8e8e8 !important;
    border-radius: 10px !important;
    font-size: 1rem !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: #ffffff !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important;
}

.s-LoginPanel input.editor:hover {
    border-color: #d0d0d0 !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08) !important;
}

.s-LoginPanel input.editor:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.1), 0 4px 12px rgba(220, 53, 69, 0.15) !important;
    outline: none !important;
    background: #ffffff !important;
    transform: translateY(-1px) !important;
}

.s-LoginPanel input.editor::placeholder {
    color: #a0a0a0 !important;
    font-weight: 400 !important;
}

/* Forgot password link */
.s-LoginPanel .px-field a {
    color: #dc3545 !important;
    text-decoration: none !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
}

.s-LoginPanel .px-field a:hover {
    color: #b02a37 !important;
    text-decoration: underline !important;
}

/* Login button - professional design */
.s-LoginPanel button[type="submit"],
.s-LoginPanel #LoginPanel0_LoginButton {
    width: 100% !important;
    padding: 1rem 1.5rem !important;
    background: linear-gradient(135deg, #dc3545 0%, #c41e3a 50%, #8b0000 100%) !important;
    border: none !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4), 0 2px 6px rgba(220, 53, 69, 0.2) !important;
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Button shine effect */
.s-LoginPanel button[type="submit"]::before,
.s-LoginPanel #LoginPanel0_LoginButton::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent) !important;
    transition: left 0.5s ease !important;
}

.s-LoginPanel button[type="submit"]:hover::before,
.s-LoginPanel #LoginPanel0_LoginButton:hover::before {
    left: 100% !important;
}

.s-LoginPanel button[type="submit"]:hover,
.s-LoginPanel #LoginPanel0_LoginButton:hover {
    background: linear-gradient(135deg, #c41e3a 0%, #8b0000 50%, #660000 100%) !important;
    box-shadow: 0 8px 25px rgba(220, 53, 69, 0.5), 0 4px 12px rgba(220, 53, 69, 0.3) !important;
    transform: translateY(-3px) !important;
}

.s-LoginPanel button[type="submit"]:active,
.s-LoginPanel #LoginPanel0_LoginButton:active {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4) !important;
}

/* Sign up link at bottom */
.s-LoginPanel + .text-center {
    background: rgba(255, 255, 255, 0.95) !important;
    padding: 1rem !important;
    border-radius: 8px !important;
    margin-top: 1.5rem !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

.s-LoginPanel + .text-center a {
    color: #dc3545 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    font-size: 0.95rem !important;
}

.s-LoginPanel + .text-center a:hover {
    color: #b02a37 !important;
    text-decoration: underline !important;
}

/* Property grid styling */
.s-LoginPanel .s-PropertyGrid {
    margin-bottom: 0 !important;
}

.s-LoginPanel .categories,
.s-LoginPanel .category {
    margin: 0 !important;
    padding: 0 !important;
}

/* Required field indicator */
.s-LoginPanel label sup {
    color: #dc3545 !important;
    font-size: 0.9rem !important;
}

/* Validation message styling */
.s-LoginPanel .vx {
    color: #dc3545 !important;
    font-size: 0.85rem !important;
    margin-top: 0.25rem !important;
}

/* Responsive design for mobile */
@media (max-width: 576px) {
    .s-container-tight {
        max-width: 95% !important;
        margin: 1rem auto !important;
    }

    .s-LoginPanel .s-Panel {
        padding: 1.5rem !important;
    }

    .s-LoginPanel > h2 {
        padding: 1.5rem !important;
    }

    .s-LoginPanel .s-site-logo-img {
        max-width: 150px !important;
    }

    .s-LoginPanel button[type="submit"],
    .s-LoginPanel #LoginPanel0_LoginButton {
        padding: 0.75rem 1rem !important;
        font-size: 0.95rem !important;
    }
}

/* Tablet responsive */
@media (max-width: 768px) {
    .s-container-tight {
        max-width: 90% !important;
    }
}

/* Loading state for button */
.s-LoginPanel button[type="submit"]:disabled,
.s-LoginPanel #LoginPanel0_LoginButton:disabled {
    background: linear-gradient(135deg, #e0e0e0 0%, #cccccc 100%) !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* ============================================ */
/* Language Selection Dropdown Menu */
/* ============================================ */

/* Language dropdown menu items - primary color text */
.s-language-selection-menu .dropdown-item {
    color: #dc3545 !important;
}

.s-language-selection-menu .dropdown-item:hover {
    color: #ffffff !important;
    background-color: #dc3545 !important;
}

.s-language-selection-menu .dropdown-item:active,
.s-language-selection-menu .dropdown-item.active {
    color: #ffffff !important;
    background-color: #dc3545 !important;
}

/* ============================================ */
/* User Profile Dropdown Menu */
/* ============================================ */

/* User profile dropdown menu items - primary color text */
.s-user-profile-menu .dropdown-item {
    color: #dc3545 !important;
}

.s-user-profile-menu .dropdown-item:hover {
    color: #ffffff !important;
    background-color: #dc3545 !important;
}

.s-user-profile-menu .dropdown-item:active,
.s-user-profile-menu .dropdown-item.active {
    color: #ffffff !important;
    background-color: #dc3545 !important;
}

/* User profile menu icons */
.s-user-profile-menu .dropdown-item .icon {
    color: inherit !important;
}