/*!
 * QuantKey overrides for Skote app.min.css (Skote 4.4.0)
 *
 * Load immediately after public/assets/css/app.min.css.
 *
 * Brand colours that Skote exposes as variables (topbar #000e2f and its item
 * colour, dark sidebar #000e2f and its text/icon colour, danger = amber) now come
 * from resources/scss/_quantkey-variables.scss (`npm run build:theme`); the
 * declarations those variables made redundant were removed after re-parsing the
 * compiled output. Everything else here is maintained by hand.
 *
 * History: started as the extracted hand edits to the Skote 3.x compiled CSS
 * (deployment/tools/css_override_diff.py, STOCK 4240f8f3 vs CURRENT 76c60cae).
 * Areas are grouped for readability; within an area rules keep their
 * original source order. [new] = rule not present in stock Skote,
 * [changed] = only the declarations that differ from stock,
 * [carried] = an unchanged stock declaration repeated so that it still
 * comes after an override it used to follow (same specificity).
 */

/* ========================================================================
   Topbar, header dropdowns and notifications
   ======================================================================== */

/* [changed] */
.header-item,
.header-item:hover {
    color: #CCDEFB;
}

/* [new] */
#page-header-organization-dropdown:hover,
#page-header-project-dropdown:hover {
    color: #FFFFFF !important;
}

/* [new] */
#page-header-organization-dropdown:hover i,
#page-header-project-dropdown:hover i {
    color: #FFFFFF !important;
}

/* [new] */
#page-header-organization-dropdown[aria-expanded="true"] {
    background-color: #FFFFFF !important;
    color: #000E2F !important;
}

/* [new] */
#page-header-organization-dropdown[aria-expanded="true"] i {
    color: #000E2F !important;
}

/* [new] */
#page-header-organization-dropdown[aria-expanded="true"]:hover,
#page-header-organization-dropdown[aria-expanded="true"]:hover i {
    color: #0346EF !important;
}

/* [new] */
.org-dropdown-1 .btn.waves-effect,
.org-dropdown-2 .btn.waves-effect,
.org-dropdown-3 .btn.waves-effect,
.org-dropdown-4 .btn.waves-effect,
.project-dropdown-1 .btn.waves-effect,
.project-dropdown-2 .btn.waves-effect,
.project-dropdown-3 .btn.waves-effect,
.project-dropdown-4 .btn.waves-effect {
    background-color: #F2F3F4 !important;
    color: #000E2F !important;
    border: none !important;
    transition: all 0.5s ease-out;
}

/* [new] */
.org-dropdown-1 .btn.waves-effect:hover,
.org-dropdown-2 .btn.waves-effect:hover,
.org-dropdown-3 .btn.waves-effect:hover,
.org-dropdown-4 .btn.waves-effect:hover,
.project-dropdown-1 .btn.waves-effect:hover,
.project-dropdown-2 .btn.waves-effect:hover,
.project-dropdown-3 .btn.waves-effect:hover,
.project-dropdown-4 .btn.waves-effect:hover {
    background-color: #F2F3F4 !important;
    color: #0346EF !important;
}

/* [new] */
#page-header-organization-dropdown + .dropdown-menu {
    background-color: #F2F3F4 !important;
}

/* [new] */
#page-header-project-dropdown + .dropdown-menu {
    background-color: #F2F3F4 !important;
}

/* [new] */
#page-header-notifications-dropdown + .dropdown-menu {
    background-color: #F2F3F4 !important;
}

/* [new] */
#page-header-notifications-dropdown + .dropdown-menu .notification-item {
    color: #000E2F !important;
    transition: all 0.5s ease-out;
}

/* [new] */
#page-header-notifications-dropdown + .dropdown-menu .notification-item:hover {
    color: #0346EF !important;
}

/* [new] */
#page-header-notifications-dropdown + .dropdown-menu h6 {
    color: #000E2F !important;
}

/* [new] */
#page-header-notifications-dropdown + .dropdown-menu .small,
#page-header-notifications-dropdown + .dropdown-menu .btn-link {
    color: #000E2F !important;
    transition: all 0.5s ease-out;
}

/* [new] */
#page-header-notifications-dropdown + .dropdown-menu .small:hover,
#page-header-notifications-dropdown + .dropdown-menu .btn-link:hover {
    color: #0346EF !important;
}

/* [new] */
#page-header-notifications-dropdown + .dropdown-menu .notification-item h6,
#page-header-notifications-dropdown + .dropdown-menu .notification-item .text-muted {
    color: inherit !important;
}

/* [new] */
#page-header-project-dropdown[aria-expanded="true"] {
    background-color: #FFFFFF !important;
    color: #000E2F !important;
}

/* [new] */
#page-header-project-dropdown[aria-expanded="true"] i {
    color: #000E2F !important;
}

/* [new] */
#page-header-project-dropdown[aria-expanded="true"]:hover,
#page-header-project-dropdown[aria-expanded="true"]:hover i {
    color: #0346EF !important;
}

/* [new] */
#page-header-notifications-dropdown {
    position: relative;
    overflow: hidden;
    transition: color 0.5s ease-out;
}

/* [new] */
#page-header-notifications-dropdown i {
    font-size: 22px;
    color: #CCDEFB;
    transition: color 0.5s ease-out;
}

/* [new] */
#page-header-notifications-dropdown .badge {
    position: absolute;
    top: 12px;
    right: 4px;
}

/* [new] */
#page-header-notifications-dropdown.btn.header-item.waves-effect:hover,
#page-header-notifications-dropdown.btn.header-item.waves-effect:hover i {
    color: #FFFFFF !important;
}

/* [new] */
#page-header-notifications-dropdown.btn.header-item.waves-effect.show {
    background-color: #FFFFFF !important;
    color: #000E2F !important;
}

/* [new] */
#page-header-notifications-dropdown.btn.header-item.waves-effect.show i {
    color: #000E2F !important;
}

/* [new] */
#page-header-notifications-dropdown.btn.header-item.waves-effect.show:hover,
#page-header-notifications-dropdown.btn.header-item.waves-effect.show:hover i {
    color: #0346EF !important;
}

/* [new] */
#page-header-notifications-dropdown.waves-effect .waves-ripple {
    background: rgba(255, 255, 255, 0.25);
}

/* [changed] */
.noti-icon i {
    color: #CCDEFB;
}

/* [changed] */
body[data-sidebar=dark] .navbar-brand-box {
    background: #000e2f;
}

/* [changed] */
.chat-noti-dropdown.active:before {
    background-color: #EFAC03;
}

/* [new] */
.header-profile-user {
    background: #1E3756;
}

/* ========================================================================
   Sidebar / vertical menu
   ======================================================================== */

/* [new] */
#vertical-menu-btn:hover {
    color: #FFFFFF !important;
}

/* [changed] */
body[data-sidebar=dark] .vertical-menu {
    background: #000e2f;
}

/* [new] */
body[data-sidebar=dark] #sidebar-menu ul li.mm-active a.mm-active i {
    color: #fff !important;
}

/* [new] */
body[data-sidebar=dark] #sidebar-menu ul li.mm-active ul li.mm-active a.active i {
    color: #fff !important;
}

/* [changed] */
body[data-sidebar=dark] .menu-title {
    color: #fff;
}

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

/* [new] */
.google-btn {
    color: #fff;
    background: #F1B425;
    border: 1px solid #F1B425;
}

/* [new] */
.google-btn:hover {
    color: #F1B425;
    background: #fff;
}

/* [new] */
.sign-btn {
    color: #fff;
    background: #0346EF;
    border: 1px solid #0346EF;
}

/* [new] */
.sign-btn:hover {
    color: #0346EF;
    background: #fff;
}

/* [new] */
.btn-primary {
    background-color: #0346EF !important;
    border-color: #0346EF !important;
}

/* [new] */
.btn-primary:hover {
    background-color: #2288b3 !important;
    border-color: #2288b3 !important;
}

/* ========================================================================
   Tables / DataTables
   ======================================================================== */

/* [new] */
.table-light {
    --bs-table-bg: #000E2F;
}

/* [new] */
.table-light th {
    color: #CCDAFB !important;
}

/* [compat] Skote 4.4's datatable plugin forces border-collapse: collapse on
   DataTables; Skote 3.x / the DataTables BS5 stylesheet used separate (taller rows
   and shifted borders otherwise). */
.table.dataTable,
table.dataTable {
    border-collapse: separate !important;
}

/* ========================================================================
   Forms, validation and inputs
   ======================================================================== */

/* [changed] */
.form-check-danger .form-check-input:checked,
.form-radio-danger .form-check-input:checked {
    background-color: #EFAC03;
    border-color: #EFAC03;
}

/* [changed] */
.form-radio-danger .form-check-input:checked:after {
    background-color: #EFAC03;
}

/* [changed] */
.parsley-error {
    border-color: #EFAC03;
}

/* [new] */
.err-p {
    margin-top: 1rem;
}

/* [new] */
.form-control,
input {
    background: rgb(242 242 242);
}

/* [new] */
#userpassword::placeholder,
#confirmpassword::placeholder,
#useremail::placeholder,
#username::placeholder {
    color: #495057;
}

/* [new] */
.form-control:focus {
    background: rgb(224, 224, 224) !important;
    color: black !important;
}

/* [new] */
.form-control:disabled {
    background: rgb(243 243 243) !important;
}

/* [new] */
.form-control:disabled {
    background: rgb(243 243 243) !important;
}

/* [new] */
.form-control::placeholder {
    color: #313131;
}

/* [new] */
.form-check-input:checked {
    background-color: #F1B425;
    background-repeat: no-repeat;
    border-color: #F1B425;
}

/* [new] */
input[type=file]::file-selector-button {
    background-color: #0346EF;
    color: #fff;
}

/* [new] */
input[type=file]::file-selector-button:hover {
    border: 2px solid #0346EF;
    background-color: #fff;
    color: #0346EF !important;
}

/* ========================================================================
   Colour utilities, alerts, badges, text/background helpers
   ======================================================================== */

/* [changed] */
.toast-danger {
    border: 2px solid #EFAC03 !important;
}

/* [changed] */
.toast-error {
    border: 2px solid #EFAC03;
}

/* [compat] Pre-4.4 (Skote 3.x) fills: amber border, Skote red (#f46a6a) tint.
   Only the border was branded; Skote 4.4 builds the fill from $danger (amber). */
.toast-danger {
    background-color: rgba(244, 106, 106, .8) !important;
}

.toast-error {
    background-color: rgba(244, 106, 106, .8);
}

.waves-effect.waves-danger .waves-ripple {
    background-color: rgba(244, 106, 106, .4);
}

/* [new] */
.text-primary-quantkey {
    color: #0346EF !important;
}

/* [new] */
.bg-primary-quantkey:checked {
    background-color: #0346EF !important;
}

/* [new] */
.text-warning-quantkey {
    color: #F1B425;
}

/* [new] */
.nav-link.active {
    background-color: #0346EF !important;
}

/* [new] */
.nav-link.active:hover {
    color: #fff !important;
}

/* [new] */
.nav-link:hover {
    color: #0346EF !important;
}

/* [new] */
.bg-info {
    --bs-bg-opacity: 1;
    background-color: #0346EF !important;
}

/* [new] */
.bg-info:hover {
    --bs-bg-opacity: 1;
    background-color: #2288b3 !important;
}

/* [new] */
.alert-success {
    color: #fff;
    background-color: #0346EF !important;
    border-color: #0346EF !important;
}

/* ========================================================================
   Misc
   ======================================================================== */

/* [compat] Skote 4.4 uses --bs-emphasis-color (#343a40) for these links;
   3.x used the body colour. */
.breadcrumb-item>a,
.nav-tabs>li>a,
.nav-pills>li>a,
.nav-pills>a {
    color: #495057;
}

/* [compat] Skote 4.4 colours .card-title with --bs-emphasis-color (#343a40);
   3.x inherited the card's body colour. */
.card-title {
    color: inherit;
}

/* [compat] 3.x values */
.nav-tabs-custom {
    border-bottom-color: #f6f6f6;
}

.nav-tabs-custom .nav-item {
    color: #343a40;
}

.notification-item .d-flex:hover {
    background-color: #f6f6f6;
}

.dropzone {
    border-color: #ced4da;
}

/* [compat] Skote 4.4 pads page content/footer with 18px (gutter * .75);
   Skote 3.x used 12px. */
.page-content {
    padding: 94px 12px 60px;
}

.footer {
    padding: 20px 12px;
}

/* [carried] */
.right-bar .right-bar-toggle {
    color: #eff2f7;  /* carried: stock value, keeps it after the override above */
}

/* [new] */
.add-rounded-circle {
    background: #F1B425;
    padding: 15px;
    border-radius: 50% !important;
}

/* [changed] */
.avatar-md {
    height: 5.5rem;
    width: 5.5rem;
}

/* [changed] */
.tui-full-calendar-confirm {
    background-color: #EFAC03 !important;
}

/* [changed] */
.error {
    color: #EFAC03;
}

/* [changed] */
.mail-list a.active {
    color: #EFAC03;
}

/* [new] */
.card {
    border-radius: 1rem !important;
}

/* [new] */
span.avatar-title img {
    background: #000e2f;
}

/* [new] */
.card-body {
    background: rgb(224, 224, 224);
}

/* SweetAlert2 11 changed its default button colours; keep the 10.x look. */
.swal2-styled.swal2-confirm { background-color: #2778c4; }
.swal2-styled.swal2-deny { background-color: #d14529; }
.swal2-styled.swal2-cancel { background-color: #757575; }
.swal2-styled.swal2-confirm:focus,
.swal2-styled.swal2-deny:focus,
.swal2-styled.swal2-cancel:focus { box-shadow: none; }
/* 11 gives toasts a fixed 360px grid column, so short messages wrap; 10 sized the (top-end)
   toast to its content. All our toasts are top-end. */
body.swal2-toast-shown .swal2-container.swal2-top-end { display: flex; flex-direction: column; align-items: flex-end; width: auto; }
.swal2-popup.swal2-toast { width: auto !important; grid-template-columns: auto auto auto; padding: 1.25em; } /* 11 sets width:100% inline; its 1fr/99fr columns make content sizing explode */
.swal2-popup.swal2-toast { align-items: center; }
.swal2-popup.swal2-toast .swal2-icon { grid-row: 1; }
.swal2-popup.swal2-toast .swal2-title { margin: 0 .625em; }
.swal2-popup.swal2-toast .swal2-html-container { grid-column: 1 / 4; margin: 0 .625em; padding: .625em 0 0; }
/* 11 re-spaced the modal (icon/title/text/buttons); restore the 10.x spacing. */
.swal2-popup:not(.swal2-toast) { padding: 1.25em; }
.swal2-popup:not(.swal2-toast) .swal2-icon { margin: 1.25em auto 1.875em; }
.swal2-popup:not(.swal2-toast) .swal2-title { padding: 0; margin: 0 0 .4em; }
.swal2-popup:not(.swal2-toast) .swal2-html-container { margin: 0 1.6em; }