/* -------------------------------------------------------------------------- */
/*                                Falcon Button                               */
/* -------------------------------------------------------------------------- */
:root,
[data-bs-theme=light] {
  --falcon-navbar-vertical-inverted-bg-color: #0B1727;
  --falcon-navbar-vertical-inverted-label-color: #fff;
  --falcon-navbar-vertical-inverted-link-color: #fff;
  --falcon-primary-rgb: 46, 46, 229;
  --falcon-blue: #2e2ee5;
  --falcon-red: #f24040;
  --falcon-green: #00dc99;
}

/* Force Menu Background Color with Gradients */
.navbar-vertical.navbar-inverted {
    background-color: #0B1727 !important;
    background-image: 
        radial-gradient(circle at top right, #2531ab, transparent 40%),
        radial-gradient(circle at bottom left, #121d5c, transparent 40%) !important;
    background-repeat: no-repeat !important;
}

/* Floating effect (clip) only when expanded (Desktop) */
@media (min-width: 1200px) {
    html:not(.navbar-vertical-collapsed) .navbar-vertical.navbar-inverted {
        background-clip: content-box !important;
    }
}

/* Remove default background from collapse so parent gradient shows through (RTL) */
.navbar-vertical .navbar-collapse,
.navbar-vertical.navbar-inverted .navbar-collapse {
    background-color: transparent !important;
}

/* Fix Search Bar Alignment when collapsed */
/* Fix Search Bar Alignment when collapsed - selector updated for decoupled topbar */
html.navbar-vertical-collapsed .navbar-top {
    padding-right: 1rem !important;
}



/* -------------------------------------------------------------------------- */
/*                            Navbar Toggle & Brand                           */
/* -------------------------------------------------------------------------- */

/* Brand visibility on collapse - BUT show on hover */
html.navbar-vertical-collapsed:not(.navbar-vertical-collapsed-hover) .navbar-vertical .navbar-brand {
    visibility: hidden !important;
}

/* Toggle Icon Styling - Default State */
.navbar-vertical-toggle .navbar-toggle-icon .toggle-line,
.navbar-vertical-toggle .navbar-toggle-icon::before,
.navbar-vertical-toggle .navbar-toggle-icon::after {
    background-color: #fff !important;
}

/* Hover State - Button Background White Circle */
.navbar-vertical-toggle:hover {
    background-color: #fff !important;
    border-radius: 50%;
}

/* Hover State - Icon Lines Dark Blue */
.navbar-vertical-toggle:hover .navbar-toggle-icon .toggle-line,
.navbar-vertical-toggle:hover .navbar-toggle-icon::before,
.navbar-vertical-toggle:hover .navbar-toggle-icon::after {
    background-color: #0B1727 !important;
}

/* -------------------------------------------------------------------------- */
/*                                Menu Hover                                  */
/* -------------------------------------------------------------------------- */

/* Light Mode */
html:not(.navbar-vertical-collapsed)[data-bs-theme="light"] .navbar-vertical .nav-link:hover,
html:not(.navbar-vertical-collapsed)[data-bs-theme="light"] .navbar-vertical .nav-link.active {
  background-color: #fff !important;
  color: #2e2ee5 !important;
  border-radius: 15px;
  padding-right: 1rem; /* RTL: Changed from padding-left */
}

html:not(.navbar-vertical-collapsed)[data-bs-theme="light"] .navbar-vertical .nav-link:hover .nav-link-icon,
html:not(.navbar-vertical-collapsed)[data-bs-theme="light"] .navbar-vertical .nav-link:hover .nav-link-text,
html:not(.navbar-vertical-collapsed)[data-bs-theme="light"] .navbar-vertical .nav-link.active .nav-link-icon,
html:not(.navbar-vertical-collapsed)[data-bs-theme="light"] .navbar-vertical .nav-link.active .nav-link-text {
  color: #2e2ee5 !important;
}


/* Dark Mode */
html:not(.navbar-vertical-collapsed)[data-bs-theme="dark"] .navbar-vertical .nav-link:hover,
html:not(.navbar-vertical-collapsed)[data-bs-theme="dark"] .navbar-vertical .nav-link.active {
  background-color: #121e2d !important;
  color: #d8e2ef !important;
  border-radius: 15px;
  padding-right: 1rem; /* RTL: Changed from padding-left */
}

html:not(.navbar-vertical-collapsed)[data-bs-theme="dark"] .navbar-vertical .nav-link:hover .nav-link-icon,
html:not(.navbar-vertical-collapsed)[data-bs-theme="dark"] .navbar-vertical .nav-link:hover .nav-link-text,
html:not(.navbar-vertical-collapsed)[data-bs-theme="dark"] .navbar-vertical .nav-link.active .nav-link-icon,
html:not(.navbar-vertical-collapsed)[data-bs-theme="dark"] .navbar-vertical .nav-link.active .nav-link-text {
  color: #d8e2ef !important;
}

/* -------------------------------------------------------------------------- */
/*                            Media Add Button                                */
/* -------------------------------------------------------------------------- */

.add-media-btn .add-media-icon {
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.2s ease-in-out;
  width: 30px;
  height: 30px;
  background-color: transparent;
}

/* Light Mode Hover */
html:not(.navbar-vertical-collapsed)[data-bs-theme="light"] .add-media-btn:hover .add-media-icon {
  background-color: #fff;
  color: #2e2ee5;
  border-radius: 50%; /* Ensure it's a circle on hover */
}

/* Dark Mode Hover */
html:not(.navbar-vertical-collapsed)[data-bs-theme="dark"] .add-media-btn:hover .add-media-icon {
  background-color: #121e2d;
  color: #d8e2ef;
  border-radius: 50%; /* Ensure it's a circle on hover */
}

/* Override collapsed sidebar width to be slimmer - BUT allow expansion on hover */
@media (min-width: 1200px) {
    html:not(.navbar-vertical-collapsed) .navbar-vertical.navbar-expand-xl.navbar-inverted ~ .content,
    html:not(.navbar-vertical-collapsed) .navbar-vertical.navbar-expand-xl.navbar-card ~ .content,
    html:not(.navbar-vertical-collapsed) .navbar-vertical.navbar-expand-xl.navbar-vibrant ~ .content {
        margin-right: 15.625rem !important;
        margin-left: 1rem;
    }

    /* Collapsed Content Margin Override (RTL) */
    html.navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl.navbar-inverted + .content,
    html.navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl.navbar-card + .content,
    html.navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl.navbar-vibrant + .content {
        margin-right: 4.125rem !important;
    }
    html.navbar-vertical-collapsed:not(.navbar-vertical-collapsed-hover) .navbar-vertical.navbar-expand-xl.navbar-inverted {
        width: 3.125rem !important;
    }

    /* Fix Menu Right Alignment on Desktop (Counteract Container Padding) */
    .navbar-vertical {
        margin-right: calc(var(--falcon-gutter-x) * -0.5) !important;
    }
    
    /* Hide Topbar Toggler and Brand when Menu is Expanded (Desktop RTL) */
    html:not(.navbar-vertical-collapsed) .navbar-top .navbar-toggler,
    html:not(.navbar-vertical-collapsed) .navbar-top .navbar-brand {
        display: none !important;
    }

    /* Decoupled Topbar Rules for Expanded Menu (RTL) */
    html:not(.navbar-vertical-collapsed) .navbar-top {
        margin-right: 15.625rem !important;
        padding-right: 0 !important;
    }
    
    /* Decoupled Topbar Rules for Collapsed Menu (RTL) */
    html.navbar-vertical-collapsed .navbar-top {
        margin-right: 3.125rem !important;
        padding-right: 0 !important;
    }
}

/* prettier-ignore */
/*# sourceMappingURL=user-rtl.css.map */

/* Ensure background covers top on mobile (RTL) */
@media (max-width: 1200px) {
    .navbar-top {
        background-color: #0B1727 !important;
        background-image: 
            radial-gradient(circle at top right, #2531ab, transparent 40%),
            radial-gradient(circle at bottom left, #121d5c, transparent 40%) !important;
        background-repeat: no-repeat !important;
        
        /* Mobile Layout: Full Width, Internal Padding */
        padding-right: 1rem !important;
        padding-left: 1rem !important;
        border-radius: 0 0 0.375rem 0.375rem !important; /* Flatten top corners, keep bottom radius */
    }

    /* Force White Toggler on Mobile (Dark Background) */
    .navbar-toggler .navbar-toggle-icon .toggle-line,
    .navbar-toggler .navbar-toggle-icon::before,
    .navbar-toggler .navbar-toggle-icon::after {
        background-color: #fff !important;
    }
    
    /* Force Toggler Display despite navbar-expand, fix margin, and center icon in circle */
    .navbar-top .navbar-toggler {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-right: 1rem !important; /* RTL: Margin Right */
        width: 45px !important;
        height: 45px !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }
    
    /* Remove background when collapsed (Mobile) */
    .navbar-top .navbar-toggler.collapsed {
        background-color: transparent !important;
        border-radius: 0 !important;
    }
    
    /* Fix Logo Centering: Remove me-2/ms-2 effect on mobile */
    .navbar-top .navbar-brand > div {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    
    html, body {
        background-attachment: fixed; /* prevent white gap at top if gradient is on body */
    }
    
    /* Fix Mobile Menu Position: Reset margins/left/right/width when open */
    .navbar-vertical {
        margin: 0 !important;
        right: 0 !important; 
        left: 0 !important; /* Force zero on both sides */
        width: 100% !important; 
        max-width: none !important; /* Prevent width constraints */
        position: absolute; 
        transform: none !important;
    }
    
    .navbar-vertical .navbar-collapse.show {
        min-height: 100vh !important; 
        top: 0;
    }
    
    /* Force White Icons in Topbar on Mobile (Dark Background) */
    .navbar-top .nav-link,
    .navbar-top .search-box-icon {
        color: var(--falcon-navbar-vertical-inverted-link-color) !important;
    }

    /* Remove padding on mobile to ensure full width background (User Request) */
    .navbar-vertical.navbar-card, 
    .navbar-vertical.navbar-vibrant, 
    .navbar-vertical.navbar-inverted {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
}

/* Fix Z-Index to prevent Gallery overlap bleed-through */
/* .navbar-vertical { z-index: 1040 !important; }  <-- Already in user.css, verify? Probably safe to add here too if missing */
.navbar-vertical {
    z-index: 1040 !important;
}

/* Center Navbar Brand on Mobile (RTL) */
@media (max-width: 991.98px) {
    .navbar-top .navbar-brand {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin-right: 0 !important;
    }
}

/* Choices.js keeps the same rounded corners whatever its state: the theme and the
   vendor CSS square the input off while it is focused, open or flipped. */
.choices .choices__inner,
.choices.is-focused .choices__inner,
.choices.is-open .choices__inner,
.choices.is-flipped.is-open .choices__inner,
.selectize-input {
    border-radius: 0.75rem !important;
}

/* Tag selects: stronger radius for multi-pill containers */
.choices[data-type*="select-multiple"] .choices__inner,
.choices[data-type*="select-multiple"].is-focused .choices__inner,
.choices[data-type*="select-multiple"].is-open .choices__inner,
.choices[data-type*="select-multiple"].is-flipped.is-open .choices__inner {
    border-radius: 1.25rem !important;
}

/* The open list of a single select and its search field get the same rounded
   corners as the select: the vendor CSS draws the field as a square bar. */
.choices[data-type*="select-one"] .choices__list--dropdown {
    border-radius: 0.75rem;
    overflow: hidden;
}

.choices[data-type*="select-one"] .choices__list--dropdown .choices__input {
    width: calc(100% - 1rem);
    margin: 0.5rem;
    border: 1px solid var(--falcon-gray-300);
    border-radius: 0.75rem;
}

/* A selected single value reads as normal text, even inside a dropdown-menu whose
   light text color would otherwise be inherited (only the placeholder stays dimmed). */
.choices__list--single .choices__item {
    color: var(--falcon-body-color);
}

/* A remove button whose background gets reset by a page must never tile its icon. */
.choices__item.choices__item--selectable .choices__button {
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Localized date pickers (SPDate): the visible input replaces the ISO one. */
.sp-date-display { cursor: pointer; }
.modal .flatpickr-wrapper { display: block; }