/*
 * Tu Streaming client-area colour layer.
 * Loaded after the Twenty-One core styles. The original theme files are intact.
 */
:root {
    --primary: #824bf7;
    --ts-purple: #824bf7;
    --ts-purple-dark: #6937d5;
    --ts-purple-hover: #9d73fa;
    --ts-purple-deep: #40227e;
    --ts-purple-soft: #f3efff;
    --ts-purple-border: #d9ccff;
}

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

/* Header, navigation and client account bar */
header.header .topbar { background-color: var(--ts-purple-deep); }
header.header .main-navbar-wrapper { background-color: var(--ts-purple); }
header.header .main-navbar-wrapper .navbar-collapse { background-color: var(--ts-purple); }
header.header .main-navbar-wrapper .navbar a,
header.header .main-navbar-wrapper .navbar-nav a,
header.header .main-navbar-wrapper .dropdown-item { color: #fff; }
header.header .main-navbar-wrapper .navbar a:hover,
header.header .main-navbar-wrapper .navbar a:focus,
header.header .main-navbar-wrapper .dropdown-item:hover,
header.header .main-navbar-wrapper .dropdown-item:focus,
header.header .main-navbar-wrapper .dropdown-item.active,
header.header .main-navbar-wrapper .dropdown-item:active {
    background-color: rgba(255,255,255,.16);
    color: #fff;
}
/* Dropdown submenus under the main navigation. */
header.header .dropdown-menu,
header.header .main-navbar-wrapper .navbar-nav .dropdown-menu {
    background-color: var(--ts-purple-deep) !important;
    border-color: rgba(255,255,255,.22) !important;
    box-shadow: 0 .5rem 1rem rgba(64,34,126,.22) !important;
}
header.header .dropdown-menu > .dropdown-item,
header.header .dropdown-menu > li.dropdown-item,
header.header .dropdown-menu a.dropdown-item {
    background-color: transparent !important;
    color: #fff !important;
}
header.header .dropdown-menu > .dropdown-item:hover,
header.header .dropdown-menu > .dropdown-item:focus,
header.header .dropdown-menu > li.dropdown-item:hover,
header.header .dropdown-menu > li.dropdown-item:focus,
header.header .dropdown-menu a.dropdown-item:hover,
header.header .dropdown-menu a.dropdown-item:focus,
header.header .dropdown-menu a.dropdown-item.active,
header.header .dropdown-menu a.dropdown-item:active {
    background-color: var(--ts-purple) !important;
    color: #fff !important;
}
header.header .dropdown-menu .dropdown-divider {
    border-top-color: rgba(255,255,255,.20) !important;
}
header.header .toolbar .nav-link { border-color: var(--ts-purple-border); color: var(--ts-purple-dark); }
header.header .toolbar .nav-link:hover { color: var(--ts-purple); }
header.header .toolbar .nav-link .badge, .badge-info { background-color: var(--ts-purple); }
header.header .search:focus-within { border-color: var(--ts-purple); box-shadow: 0 0 0 .15rem rgba(130,75,247,.14); }
.master-breadcrumb { background-color: var(--ts-purple-soft); }

/* Calls to action, forms and checkout controls */
.btn-primary, .btn-info, .btn-primary:focus, .btn-info:focus,
.btn-primary:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle, .show > .btn-info.dropdown-toggle {
    color: #fff;
    background-color: var(--ts-purple);
    border-color: var(--ts-purple-dark);
}
.btn-primary:hover, .btn-info:hover, .btn-primary:focus:hover, .btn-info:focus:hover {
    color: #fff;
    background-color: var(--ts-purple-hover);
    border-color: var(--ts-purple);
}
.btn-outline-primary { color: var(--ts-purple-dark); border-color: var(--ts-purple); }
.btn-outline-primary:hover, .btn-outline-primary:focus { background-color: var(--ts-purple); border-color: var(--ts-purple); color: #fff; }
.form-control:focus, .custom-select:focus {
    border-color: var(--ts-purple);
    box-shadow: 0 0 0 .2rem rgba(130,75,247,.18);
}
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--ts-purple); border-color: var(--ts-purple-dark); }

/* Panels, sidebar, lists, tables and pagination */
.sidebar .list-group-item.active, .sidebar .list-group-item.active:hover, .sidebar .list-group-item.active:focus,
.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
    background-color: var(--ts-purple);
    border-color: var(--ts-purple-dark);
}
.sidebar .list-group-item > i.far.fa-circle { color: var(--ts-purple); }
.card-header, .client-home-cards .card-header { border-bottom-color: var(--ts-purple-border); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link,
.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(--ts-purple);
    border-color: var(--ts-purple-dark);
}
.table-hover tbody tr:hover { background-color: var(--ts-purple-soft); }
.alert-info { background-color: var(--ts-purple-soft); border-color: var(--ts-purple-border); color: #4c268f; }
.bg-primary { background-color: var(--ts-purple) !important; }
.progress-bar { background-color: var(--ts-purple); }

/* Customer invoice, quotation and payment views */
.invoice-container .invoice-status.unpaid, .invoice-container .payment-btn-container .btn-primary {
    background-color: var(--ts-purple);
    border-color: var(--ts-purple-dark);
}
.invoice-container .invoice-status.draft { background-color: var(--ts-purple-deep); }
.invoice-container td.total-row { background-color: var(--ts-purple-soft); }

/* Keep customer-facing status colours meaningful: success, warning and error stay distinct. */