/*
 * Theme Overrides
 *
 * Loaded AFTER style.bundle.css and style-{locale}.css.
 * Overrides compiled brand colors with CSS custom properties.
 *
 * --t-{color}-text variables auto-switch between #fff and #2A2A2A
 * based on background luminance (computed server-side in PHP).
 */

/* =============================================
   SIDEBAR MENU
   Must match or exceed compiled SCSS specificity.
   Compiled selectors use:
     .win-aside-menu.win-aside-menu--skin-light .win-menu__nav > .win-menu__item.win-menu__item--active > .win-menu__link ...
   ============================================= */

/* Icon default color */
.win-menu__link-icon {
    color: var(--t-gray8);
}

/* --- ACTIVE MENU ITEM --- */

/* Active: background */
.win-aside-menu.win-aside-menu--skin-light .win-menu__nav > .win-menu__item.win-menu__item--active > .win-menu__link {
    background-color: var(--t-yellow-subtle) !important;
}

/* Active: text color */
.win-aside-menu.win-aside-menu--skin-light .win-menu__nav > .win-menu__item.win-menu__item--active > .win-menu__link .win-menu__link-text {
    color: var(--t-black) !important;
}

/* Active: icon color */
.win-aside-menu.win-aside-menu--skin-light .win-menu__nav > .win-menu__item.win-menu__item--active > .win-menu__link .win-menu__link-icon {
    color: var(--t-yellow) !important;
}

/* Active: SVG icon fill */
.win-aside-menu.win-aside-menu--skin-light .win-menu__nav > .win-menu__item.win-menu__item--active > .win-menu__link .win-menu__link-icon svg path:last-child {
    fill: var(--t-yellow) !important;
}

/* Active: SVG icon transition */
.win-aside-menu.win-aside-menu--skin-light .win-menu__nav > .win-menu__item.win-menu__item--active > .win-menu__link .win-menu__link-icon svg {
    transition: all ease-in-out 0.3s;
}

/* Active: accent bar (left stripe) */
.win-aside-menu.win-aside-menu--skin-light .win-menu__nav > .win-menu__item.win-menu__item--active > .win-menu__link::after {
    background-color: var(--t-yellow) !important;
}

/* Active: minimized sidebar icon */
.win-aside-left--minimize .win-aside-menu.win-aside-menu--skin-light .win-menu__nav > .win-menu__item.win-menu__item--active > .win-menu__link > .win-menu__link-icon {
    color: var(--t-yellow) !important;
}

/* --- HOVER MENU ITEM --- */

/* Hover: background on non-active items */
.win-aside-menu.win-aside-menu--skin-light .win-menu__nav > .win-menu__item:not(.win-menu__item--parent):not(.win-menu__item--open):not(.win-menu__item--expanded):not(.win-menu__item--active):hover > .win-menu__link {
    background-color: var(--t-yellow-subtle) !important;
}

/* Hover: text color */
.win-aside-menu.win-aside-menu--skin-light .win-menu__nav > .win-menu__item:hover > .win-menu__link .win-menu__link-text {
    color: var(--t-black) !important;
}

/* Hover: icon color */
.win-aside-menu.win-aside-menu--skin-light .win-menu__nav > .win-menu__item:hover > .win-menu__link .win-menu__link-icon {
    color: var(--t-black) !important;
}

/* Hover: SVG icon fill */
.win-aside-menu.win-aside-menu--skin-light .win-menu__nav > .win-menu__item:hover .win-menu__link-icon svg path:last-child {
    fill: var(--t-yellow) !important;
}

/* --- SUBMENU ITEMS --- */

/* Submenu hover: text */
.win-aside-menu .win-menu__submenu .win-menu__item:not(.win-menu__item--parent):not(.win-menu__item--open):not(.win-menu__item--expanded):not(.win-menu__item--active):hover > .win-menu__link .win-menu__link-text {
    color: var(--t-yellow) !important;
}

/* Submenu hover: icon */
.win-aside-menu .win-menu__submenu .win-menu__item:not(.win-menu__item--active):hover > .win-menu__link .win-menu__link-icon {
    color: var(--t-yellow) !important;
}

/* Submenu active: text */
.win-aside-menu .win-menu__submenu .win-menu__item.win-menu__item--active > .win-menu__link .win-menu__link-text {
    color: var(--t-yellow) !important;
}

/* Submenu active: icon */
.win-aside-menu .win-menu__submenu .win-menu__item.win-menu__item--active > .win-menu__link .win-menu__link-icon {
    color: var(--t-yellow) !important;
}

/* --- ARROW ICONS --- */

/* Menu toggle arrow hover/active */
.win-menu__item:hover > .win-menu__link > .win-menu__ver-arrow,
.win-menu__item.win-menu__item--active > .win-menu__link > .win-menu__ver-arrow,
.win-menu__item.win-menu__item--open > .win-menu__link > .win-menu__ver-arrow {
    color: var(--t-yellow) !important;
}

/* --- BRAND / ASIDE --- */

/* Brand logo area toggle icon hover */
.win-brand.win-brand--skin-light .win-brand__icon > i:hover {
    color: var(--t-yellow);
}

/* Aside close button */
.win-aside-left-close.win-aside-left-close--skin-dark {
    background-color: var(--t-yellow);
    color: var(--t-yellow-text);
}

.win-aside-left-close.win-aside-left-close--skin-dark:hover {
    background-color: var(--t-gray);
}

/* =============================================
   LINKS
   ============================================= */
a:hover {
    color: var(--t-yellow);
}

/* Dropdown nav link hover */
.button-drop.win-dropdown .win-nav li a:hover {
    color: var(--t-yellow);
}

/* =============================================
   PRIMARY (yellow) - buttons, badges, backgrounds
   ============================================= */
.btn-yellow {
    background-color: var(--t-yellow);
    border-color: var(--t-yellow);
    color: #2A2A2A !important;
    box-shadow: 0px 5px 10px 2px var(--t-yellow-shadow) !important;
}

.btn-yellow:hover,
.btn-yellow:focus,
.btn-yellow:active {
    background-color: var(--t-yellow) !important;
    border-color: var(--t-yellow) !important;
    color: #2A2A2A !important;
    box-shadow: 0px 5px 10px 2px var(--t-yellow-shadow-hover) !important;
}

.bg-yellow {
    background: var(--t-yellow);
    color: var(--t-yellow-text);
}

.bg-yellow strong,
.bg-yellow span,
.bg-yellow a {
    color: var(--t-yellow-text);
}

.win-badge-yellow,
.m-badge--yellow {
    background: var(--t-yellow);
    color: var(--t-yellow-text);
}

/* =============================================
   BLUE - buttons, badges, backgrounds
   ============================================= */
.btn-blue {
    background-color: var(--t-blue);
    border-color: var(--t-blue);
    color: #fff !important;
}

.btn-blue:hover,
.btn-blue:focus,
.btn-blue:active {
    background-color: var(--t-blue) !important;
    border-color: var(--t-blue) !important;
    color: #fff !important;
}

.bg-blue {
    background: var(--t-blue);
    color: var(--t-blue-text);
}

.bg-blue strong,
.bg-blue span,
.bg-blue a {
    color: var(--t-blue-text);
}

/* =============================================
   GREEN - buttons, badges, backgrounds
   ============================================= */
.btn-green {
    background-color: var(--t-green);
    border-color: var(--t-green);
    color: #fff !important;
}

.btn-green:hover,
.btn-green:focus,
.btn-green:active {
    background-color: var(--t-green) !important;
    border-color: var(--t-green) !important;
    color: #fff !important;
}

.bg-green {
    background: var(--t-green);
    color: var(--t-green-text);
}

.bg-green strong,
.bg-green span,
.bg-green a {
    color: var(--t-green-text);
}

/* =============================================
   PINK - buttons, badges, backgrounds
   ============================================= */
.btn-pink {
    background-color: var(--t-pink);
    border-color: var(--t-pink);
    color: #fff !important;
}

.btn-pink:hover,
.btn-pink:focus,
.btn-pink:active {
    background-color: var(--t-pink) !important;
    border-color: var(--t-pink) !important;
    color: #fff !important;
}

.bg-pink {
    background: var(--t-pink);
    color: var(--t-pink-text);
}

.bg-pink strong,
.bg-pink span,
.bg-pink a {
    color: var(--t-pink-text);
}

/* =============================================
   ORANGE - buttons, badges, backgrounds
   ============================================= */
.btn-orange {
    background-color: var(--t-orange);
    border-color: var(--t-orange);
    color: #fff !important;
}

.btn-orange:hover,
.btn-orange:focus,
.btn-orange:active {
    background-color: var(--t-orange) !important;
    border-color: var(--t-orange) !important;
    color: #fff !important;
}

.bg-orange {
    background: var(--t-orange);
    color: var(--t-orange-text);
}

.bg-orange strong,
.bg-orange span,
.bg-orange a {
    color: var(--t-orange-text);
}

/* =============================================
   HOVER UTILITY CLASSES (hover-yellow, etc.)
   ============================================= */
.hover-yellow:hover {
    color: var(--t-yellow);
}

.hover-blue:hover {
    color: var(--t-blue);
}

.hover-green:hover {
    color: var(--t-green);
}

.hover-pink:hover {
    color: var(--t-pink);
}

.hover-orange:hover {
    color: var(--t-orange);
}

/* =============================================
   BEFORE PSEUDO-ELEMENT CLASSES
   ============================================= */
.before-yellow:before {
    background-color: var(--t-yellow);
}

.before-blue:before {
    background-color: var(--t-blue);
}

.before-green:before {
    background-color: var(--t-green);
}

.before-pink:before {
    background-color: var(--t-pink);
}

.before-orange:before {
    background-color: var(--t-orange);
}

/* =============================================
   TEXT COLOR UTILITIES
   ============================================= */
.color-yellow {
    color: var(--t-yellow);
}

.color-blue {
    color: var(--t-blue);
}

.color-green {
    color: var(--t-green);
}

.color-pink {
    color: var(--t-pink);
}

.color-orange {
    color: var(--t-orange);
}

/* =============================================
   FORM ELEMENTS
   ============================================= */

/* Select2 focus/open border */
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--t-yellow-light);
}

/* Bootstrap select focus */
.bootstrap-select > .dropdown-toggle.btn-light:focus:focus {
    border-color: var(--t-yellow) !important;
}

/* =============================================
   MISC
   ============================================= */

/* Spinner / loading */
.fa-spinner {
    color: var(--t-yellow);
}

/* Spinner border (loading state) */
.spinner {
    border-top-color: var(--t-yellow);
}

/* Favorite star */
.fav-page .star-shape {
    color: var(--t-gray);
}

.fav-page.added .star-shape {
    fill: var(--t-yellow);
}

/* SVG hover utilities (from cp.blade.php inline styles) */
.svg-hover-pink svg:hover g {
    fill: var(--t-pink);
}

.svg-hover-info svg:hover .hover-path {
    fill: var(--t-blue);
}

/* Comment highlight */
.comment-content .highlight {
    background-color: var(--t-yellow-light);
}

/* Row selected state */
.row-selected {
    background-color: var(--t-yellow-bg) !important;
}

/* =============================================
   IMAGE UPLOAD (browse1) COMPONENTS
   ============================================= */

.image-container-browse1 {
    position: relative;
    display: inline-block;
    overflow: visible !important;
}

button.browse1-removable-action,
span.browse1-removable-action,
.browse1-removable-action {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    width: 15px !important;
    height: 15px !important;
    border-radius: 50% !important;
    background-color: #EF4351 !important;
    border: none !important;
    opacity: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-shadow: none !important;
    color: #fff !important;
    font-weight: 300 !important;
    font-size: 10px !important;
    line-height: 1 !important;
    padding: 0 !important;
    cursor: pointer;
    transition: all ease-in-out 0.3s;
    z-index: 2;
    overflow: hidden;
}

button.browse1-removable-action:hover,
span.browse1-removable-action:hover,
.browse1-removable-action:hover {
    background-color: #dc3545 !important;
}