/*
 * Chatsurf purple theme.
 *
 * Optional override layer for the AdminLTE "skin-blue" palette. Loaded last,
 * after every vendor stylesheet and after the @stack('head-styles') block, so
 * plain selectors are enough - each rule mirrors the vendor selector it
 * replaces and wins on cascade order rather than on specificity. That keeps
 * the existing override chain (e.g. .btn-default still beats a) intact.
 *
 * Toggle: config chatsurf.ui.theme (env CHATSURF_UI_THEME=purple|blue).
 * Purple is the default; set CHATSURF_UI_THEME=blue to fall back to the stock
 * AdminLTE skin - the file is then not requested at all.
 *
 * Base hue #8774e1 - the accent purple sampled from the Telegram reference.
 */

:root {
    /* Brand */
    --cs-purple: #8774e1;        /* surfaces: navbar, buttons, badges, bubbles */
    --cs-purple-dark: #7360d4;   /* hover, borders, logo panel */
    --cs-purple-darker: #6450c2; /* pressed / active */
    --cs-purple-deep: #5b47b8;   /* replaces the darker .bg-blue / .text-blue */
    --cs-purple-light: #a08fea;  /* link hover */
    --cs-purple-link: #6d59cf;   /* body links - 5.3:1 on white */

    /* Chrome */
    --cs-content-bg: #eeebf7;    /* page background, lavender-tinted */
    --cs-auth-bg: #e7e3f2;       /* login / lockscreen background */

    /* Sidebar - violet charcoal, sits under the purple header without clashing */
    --cs-sidebar-bg: #221f2e;
    --cs-sidebar-hover: #2c2740;
    --cs-sidebar-submenu: #1a1826;
    --cs-sidebar-header-bg: #17141f;
    --cs-sidebar-header-ink: #6f6785;
    --cs-sidebar-link: #b3abc4;
    --cs-sidebar-link-sub: #8d85a0;
    --cs-sidebar-form-bg: #332d47;
    --cs-sidebar-form-border: #3a3350;
}

/* ==========================================================================
   Header
   ========================================================================== */

.skin-blue .main-header .navbar {
    background-color: var(--cs-purple);
}

.skin-blue .main-header .navbar .sidebar-toggle:hover {
    background-color: var(--cs-purple-dark);
}

.skin-blue .main-header .logo {
    background-color: var(--cs-purple-dark);
}

.skin-blue .main-header .logo:hover {
    background-color: var(--cs-purple-darker);
}

.skin-blue .main-header li.user-header {
    background-color: var(--cs-purple);
}

.skin-blue.layout-top-nav .main-header > .logo {
    background-color: var(--cs-purple);
}

.skin-blue.layout-top-nav .main-header > .logo:hover {
    background-color: var(--cs-purple-dark);
}

@media (max-width: 767px) {
    .skin-blue .main-header .navbar .dropdown-menu li a:hover {
        background: var(--cs-purple-dark);
    }
}

/* ==========================================================================
   Sidebar
   ========================================================================== */

.skin-blue .wrapper,
.skin-blue .main-sidebar,
.skin-blue .left-side {
    background-color: var(--cs-sidebar-bg);
}

.skin-blue .sidebar-menu > li.header {
    color: var(--cs-sidebar-header-ink);
    background: var(--cs-sidebar-header-bg);
}

.skin-blue .sidebar-menu > li:hover > a,
.skin-blue .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li.menu-open > a {
    color: #fff;
    background: var(--cs-sidebar-hover);
}

.skin-blue .sidebar-menu > li.active > a {
    border-left-color: var(--cs-purple);
}

.skin-blue .sidebar-menu > li > .treeview-menu {
    background: var(--cs-sidebar-submenu);
}

.skin-blue .sidebar a {
    color: var(--cs-sidebar-link);
}

.skin-blue .sidebar-menu .treeview-menu > li > a {
    color: var(--cs-sidebar-link-sub);
}

.skin-blue .sidebar-menu .treeview-menu > li.active > a,
.skin-blue .sidebar-menu .treeview-menu > li > a:hover {
    color: #fff;
}

.skin-blue .sidebar-form {
    border: 1px solid var(--cs-sidebar-form-border);
}

.skin-blue .sidebar-form input[type="text"],
.skin-blue .sidebar-form .btn {
    background-color: var(--cs-sidebar-form-bg);
}

/* ==========================================================================
   Page canvas
   ========================================================================== */

.content-wrapper {
    background-color: var(--cs-content-bg);
}

.login-page,
.register-page,
.lockscreen {
    background: var(--cs-auth-bg);
}

/* ==========================================================================
   Links
   ========================================================================== */

a {
    color: var(--cs-purple-link);
}

a:hover,
a:active,
a:focus {
    color: var(--cs-purple-light);
}

.btn-link {
    color: var(--cs-purple-link);
}

.btn-link:hover,
.btn-link:focus {
    color: var(--cs-purple-darker);
}

.text-primary {
    color: var(--cs-purple-link);
}

a.text-primary:hover,
a.text-primary:focus {
    color: var(--cs-purple-darker);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn-primary {
    color: #fff;
    background-color: var(--cs-purple);
    border-color: var(--cs-purple-dark);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary.hover {
    background-color: var(--cs-purple-dark);
}

.btn-primary:focus,
.btn-primary.focus {
    color: #fff;
    background-color: var(--cs-purple-dark);
    border-color: var(--cs-purple-darker);
}

.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    color: #fff;
    background-color: var(--cs-purple-darker);
    border-color: var(--cs-purple-darker);
}

.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus {
    color: #fff;
    background-color: var(--cs-purple-darker);
    border-color: var(--cs-purple-deep);
}

.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus {
    background-color: var(--cs-purple);
    border-color: var(--cs-purple-dark);
}

.btn-primary .badge {
    color: var(--cs-purple);
    background-color: #fff;
}

/*
 * .btn-info is only ever the "send message" button in this app, so it follows
 * the brand rather than the aqua accent. Informational surfaces (.alert-info,
 * .callout-info, .text-aqua) keep their own colour.
 */
.btn-info {
    background-color: var(--cs-purple);
    border-color: var(--cs-purple-dark);
}

.btn-info:hover,
.btn-info:active,
.btn-info.hover,
.btn-info:focus,
.btn-info.focus {
    background-color: var(--cs-purple-dark);
    border-color: var(--cs-purple-darker);
}

.btn-info:active:hover,
.btn-info.active:hover,
.open > .dropdown-toggle.btn-info:hover,
.btn-info:active:focus,
.btn-info.active:focus,
.open > .dropdown-toggle.btn-info:focus,
.btn-info:active.focus,
.btn-info.active.focus,
.open > .dropdown-toggle.btn-info.focus {
    background-color: var(--cs-purple-darker);
    border-color: var(--cs-purple-deep);
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form-control:focus {
    border-color: var(--cs-purple);
    box-shadow: none;
}

:focus-visible {
    outline: 2px solid var(--cs-purple);
    outline-offset: 1px;
}

/* ==========================================================================
   Boxes, tabs, panels
   ========================================================================== */

.box.box-primary {
    border-top-color: var(--cs-purple);
}

.box.box-solid.box-primary {
    border: 1px solid var(--cs-purple);
}

.box.box-solid.box-primary > .box-header {
    color: #fff;
    background: var(--cs-purple);
    background-color: var(--cs-purple);
}

.nav-tabs-custom > .nav-tabs > li.active,
.nav-tabs-custom.tab-primary > .nav-tabs > li.active {
    border-top-color: var(--cs-purple);
}

.panel-primary {
    border-color: var(--cs-purple);
}

.panel-primary > .panel-heading {
    color: #fff;
    background-color: var(--cs-purple);
    border-color: var(--cs-purple);
}

.panel-primary > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: var(--cs-purple);
}

.panel-primary > .panel-footer + .panel-collapse > .panel-body {
    border-bottom-color: var(--cs-purple);
}

.panel-primary > .panel-heading .badge {
    color: var(--cs-purple);
    background-color: #fff;
}

.todo-list .primary {
    border-left-color: var(--cs-purple);
}

/* ==========================================================================
   Navs, dropdowns, pagination, lists
   ========================================================================== */

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    color: #fff;
    background-color: var(--cs-purple);
    border-top-color: var(--cs-purple);
}

.nav-stacked > li.active > a,
.nav-stacked > li.active > a:hover {
    background: transparent;
    color: #444;
    border-top: 0;
    border-left-color: var(--cs-purple);
}

.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
    border-color: var(--cs-purple);
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background-color: var(--cs-purple);
}

.pagination > li > a,
.pagination > li > span {
    color: var(--cs-purple-link);
}

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
    color: var(--cs-purple-darker);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    background-color: var(--cs-purple);
    border-color: var(--cs-purple);
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    background-color: var(--cs-purple);
    border-color: var(--cs-purple);
}

.list-group-item.active > .badge,
.nav-pills > .active > a > .badge {
    color: var(--cs-purple);
}

a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
    border-color: var(--cs-purple);
}

/* ==========================================================================
   Labels, badges, progress, helper backgrounds
   ========================================================================== */

.label-primary {
    background-color: var(--cs-purple);
}

.label-primary[href]:hover,
.label-primary[href]:focus {
    background-color: var(--cs-purple-dark);
}

.progress-bar,
.progress-bar-primary,
.progress-bar-light-blue {
    background-color: var(--cs-purple);
}

.bg-primary {
    color: #fff;
    background-color: var(--cs-purple);
}

a.bg-primary:hover,
a.bg-primary:focus {
    background-color: var(--cs-purple-dark);
}

.bg-light-blue,
.label-primary,
.modal-primary .modal-body {
    background-color: var(--cs-purple) !important;
}

.bg-light-blue-active,
.modal-primary .modal-header,
.modal-primary .modal-footer {
    background-color: var(--cs-purple-darker) !important;
}

.bg-blue {
    background-color: var(--cs-purple-deep) !important;
}

.text-light-blue {
    color: var(--cs-purple) !important;
}

.text-blue {
    color: var(--cs-purple-deep) !important;
}

.bg-light-blue-gradient {
    background: linear-gradient(to top, var(--cs-purple), var(--cs-purple-light)) !important;
    filter: none !important;
    color: #fff;
}

.bg-blue-gradient {
    background: linear-gradient(to top, var(--cs-purple-deep), var(--cs-purple)) !important;
    filter: none !important;
    color: #fff;
}

/* ==========================================================================
   Chat
   ========================================================================== */

.chat-item {
    border-color: var(--cs-purple-dark);
    background: var(--cs-purple);
}

.chat-item-row__waiting .chat-item {
    background: rgba(135, 116, 225, 0.8);
    border-color: rgba(115, 96, 212, 0.8);
}

.direct-chat-primary .right > .direct-chat-text {
    background: var(--cs-purple);
    border-color: var(--cs-purple);
    color: #fff;
}

.direct-chat-primary .right > .direct-chat-text:after,
.direct-chat-primary .right > .direct-chat-text:before {
    border-left-color: var(--cs-purple);
}

/* ==========================================================================
   User menu
   ========================================================================== */

.navbar-nav > .user-menu .user-initials {
    background-color: var(--cs-purple-dark);
}

.navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-lang {
    color: var(--cs-purple-link);
}

/* Constructor diagram (host app only) */
.diagram-add-node {
    background: var(--cs-purple);
}

/* ==========================================================================
   Select2
   ========================================================================== */

.select2-container--default.select2-container--open {
    border-color: var(--cs-purple);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--cs-purple);
    color: #fff;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-search--dropdown .select2-search__field {
    border-color: var(--cs-purple) !important;
}

.select2-container--default .select2-selection--multiple:focus {
    border-color: var(--cs-purple);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--cs-purple);
    border-color: var(--cs-purple-dark);
    color: #fff;
}

.select2-container--classic .select2-selection--single:focus,
.select2-container--classic.select2-container--open .select2-selection--single,
.select2-container--classic .select2-selection--multiple:focus,
.select2-container--classic.select2-container--open .select2-selection--multiple {
    border: 1px solid var(--cs-purple);
}

.select2-container--classic.select2-container--open .select2-dropdown {
    border-color: var(--cs-purple);
}

.select2-container--classic .select2-results__option--highlighted[aria-selected] {
    background-color: var(--cs-purple-dark);
    color: #fff;
}

/* ==========================================================================
   Date range picker
   ========================================================================== */

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: var(--cs-purple);
    border-color: transparent;
    color: #fff;
}

.daterangepicker .ranges li.active {
    background-color: var(--cs-purple-dark);
    color: #fff;
}