/*@import url("/assets/iconfonts/font-awesome/css/font-awesome.min.css");*/

:root {
    --ck-active: #2ca02c; /* green */
    --ck-hold: #ef476f; /* coral */
    --ck-done: #17a2b8; /* blue/teal */
    --ck-cancel: #5f5a72; /* white text */
    --ck-scheduled: #ecb403;
    --ck-due: #2ca02c;
    --ck-overdue: #ef476f;
    --ck-future: #5f5a72;
    --menu-prime-color: #312c65;
    --body-bg-rgb: 242, 243, 249;
    --primary-rgb: 98, 89, 202;
    --secondary-rgb: 251, 107, 37;
    --warning-rgb: 247, 183, 49;
    --info-rgb: 69, 170, 242;
    --success-rgb: 9, 173, 149;
    --danger-rgb: 248, 38, 73;
    --light-rgb: 242, 242, 249;
    --dark-rgb: 52, 58, 64;
    --orange-rgb: 252, 115, 3;
    --pink-rgb: 252, 82, 150;
    --teal-rgb: 28, 175, 159;
    --purple-rgb: 137, 39, 236;
}

/* --menu-prime-color: orig: #495984, tried: #272350 */
.card-pay .tabs-menu li {
    width: 25%;
}

select. form-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-size: 10px auto;
    background-repeat: no-repeat;
    background-position: right;
    color: var(--bs-primary);
}

.text-due,
.text-due i {
    color: var(--ck-due);
}

.text-overdue,
.text-overdue i {
    color: var(--ck-overdue);
}

.text-future,
.text-future i {
    color: var(--ck-future);
}


/* if the colours for the tenancies change they need to be added here */
.border-bottom-yellow {
    border-bottom: 4px solid #ecb403 !important;
}

.border-bottom-cyan {
    border-bottom: 4px solid #17a2b8 !important;
}

.border-bottom-purple {
    border-bottom: 4px solid #867efc !important;
}

.border-bottom-coral {
    border-bottom: 4px solid #ef476f !important;
}

tr.bar-yellow td:nth-child(1),
td.bar-yellow {
    border-left: 0.25em solid #ecb403 !important;
}

tr.bar-cyan td:nth-child(1),
td.bar-cyan {
    border-left: 0.25em solid #17a2b8 !important;
}

tr.bar-purple td:nth-child(1),
td.bar-purple {
    border-left: 0.25em solid #867efc !important;
}

tr.bar-coral td:nth-child(2),
td.bar-coral {
    border-left: 0.25em solid #ef476f !important;
}

tr.status-ok td:nth-child(1) {
    border-left: 0.25em solid var(--ck-scheduled) !important;
}

tr.status-due td:nth-child(1) {
    border-left: 0.25em solid var(--ck-due) !important;
}

tr.status-overdue td:nth-child(1) {
    border-left: 0.25em solid var(--ck-overdue) !important;
}

tr.status-future td:nth-child(1) {
    border-left: 0.25em solid var(--ck-future) !important;
}

.badge-active,
.badge-active i,
i.text-active {
    background-color: var(--ck-active) !important;
    color: #fff;
}


.badge-hold,
.badge-hold i,
i.text-hold {
    background-color: var(--ck-hold) !important;
    color: #000;
}

.badge-done,
.badge-done i,
i.text-done {
    background-color: var(--ck-done) !important;
    color: #fff;
}

.badge-cancel,
.badge-cancel i,
i.text-cancel {
    background-color: var(--ck-cancel) !important;
    color: #fff;
}

.badge-scheduled,
.badge-scheduled i,
i.text-scheduled {
    background: var(--ck-scheduled) !important;
    color: #000;
}

.bg-scheduled-soft {
    background: color-mix(in oklab, var(--ck-scheduled) 18%, white);
}

/* original colour
#eaedf1
https://www.color-hex.com/color/eaedf1
darker: #8c8e90
*/

.form-control {
    border: 1px solid #a3a5a8;
}

.form-control:focus {
    border-color: #a3a5a8;
}

.input-group-text {
    border: 1px solid #a3a5a8;
}


/* to make fontawesome visible when used in buttons */
.btn-outline-primary i {
    color: var(--bs-primary); /* Bootstrap primary color */
}

.tab-content .btn i {
    /*  color: var(--bs-primary);*/
}


table.dataTable {
    font-size: 1.05rem;
}

.card-title {
    font-size: 1.5rem;
}

.page-title {
    font-size: 2rem;
    font-weight: 800;
}

/* data tables processing                */
/* Processing state uses --processing-bg */
.dataTables_wrapper .dataTables_processing {
    background: var(--processing-bg, #0275D8);
}

/* Selected rows tinted via --selection-bg */
table.dataTable tr.selected > * {
    box-shadow: inset 0 0 0 9999px var(--selection-bg, rgba(2, 117, 216, .15));
}


/*#0d6efd8f*/
/*table.dataTable {*/
/*    --dt-row-selected: 13, 10, 253; !* #ecb403 *!*/
/*    --dt-row-selected-text: 33, 37, 41; !* #212529 *!*/
/*}*/
table.table.dataTable.table-striped > tbody > tr.selected > * {
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), .28) !important;
    color: rgb(var(--dt-row-selected-text)) !important;
}

/* 3) Neutralise the odd-row stripe when selected */
table.table.dataTable.table-striped > tbody > tr.selected:nth-of-type(odd) > * {
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), .28) !important;
}

.dt-buttons .btn.active {
    background-color: #e6432b !important;
}

/* end of data tables processing */

/* Make header/body select cells identical */
table.dataTable thead th.dt-select,
table.dataTable tbody td.dt-select {
    text-align: center;
    vertical-align: middle;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

/* Remove Bootstrap’s default checkbox margins */
table.dataTable td .dt-select .form-check-input[type=checkbox] {
    margin: 0;
}

table.dataTable th .form-check-input[type=checkbox] {
    margin-left: -.75em;
    margin-top: -.75em;
}


table.dataTable thead th.dt-select {
    border-left: 0.25em solid #eaedf1 !important;
}

/*tr.dt-nonselectable {*/
/*    opacity: .6;*/
/*}*/

tr.dt-nonselectable .form-check-input[type=checkbox] {
    background-color: silver;
}

tr.dt-nonselectable td.dt-select {
    cursor: not-allowed;
}

td .form-check-input[type=checkbox] {
    margin-right: 1em;
    margin-left: 1em;
}

td.dt-select .form-check-input[type=checkbox] {
    margin-left: -.5em;
    margin-top: -.5em;
}

/* If you still see a 1–2px vertical nudge, add: */
/* table.dataTable .dt-select .form-check-input { transform: translateY(1px); } */


/* R I P P L E   F I X */
/* .modal-footer .btn,*/
/* todo, actually fix it */
.btn.ripple-surface,
.ripple-wave.active {
    display: inline-flex; /* stable inline sizing */
    align-items: center;
    justify-content: center;
    overflow: hidden; /* clip ripple without needing extra width */
    min-width: auto !important; /* neutralize inline min-width from plugin */
    flex: 0 0 auto; /* don't let flexbox stretch it */
}

/* Avoid animating width/height/padding/font changes */
.btn {
    transition-property: color, background-color, border-color, box-shadow;
}

.btn:hover, .btn:active, .btn:focus {
    transform: none;
    letter-spacing: normal;
}

/* end of R I P P L E   F I X */

/* datepicker */
.ui-datepicker .ui-datepicker-calendar td a.ui-state-active {
    background: #5965f9; /* or background-color */
    color: #fff;
    border-color: #003eff; /* if you want the 1px border visible */
}


/* styles lost because we're not using switcher */
.app-sidebar .side-menu__item.active {
    color: #fff;
    background: linear-gradient(to bottom right, var(--primary-color) 0, var(--primary06) 100%);
    border-start-start-radius: 0;
    border-start-end-radius: 60px;
    border-end-end-radius: 60px;
    border-end-start-radius: 0;
    box-shadow: 0 7px 12px 0 var(--primary02);
}

[data-nav-layout=vertical] .app-sidebar .side-menu__item {
    margin: 2px 0;
}

.app-sidebar .side-menu__item.active {
    font-weight: 600;
}

.app-sidebar .side-menu__item.active, .app-sidebar .side-menu__item:hover {
    color: var(--menu-prime-color);
    background-color: rgba(var(--light-rgb), .5);
}

.app-sidebar .side-menu .side-menu__item {
    padding: 10px 30px;
    position: relative;
    display: flex;
    align-items: center;
    text-decoration: none;
    font-size: .813rem;
    color: var(--menu-prime-color);
    font-weight: 900;
    border-radius: .313rem;
}

/* end of D A T E P I C K E R  */
/* Make the prev/next anchors the positioning box for ::before */
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-header .ui-datepicker-next {
    position: relative;
    width: 1.75rem;
    height: 1.75rem;
    line-height: 1.75rem;
    text-indent: 0; /* no big negative indent on the anchors */
    background: transparent; /* kill any bg */
    border: 0;
    color: #6c757d;
    cursor: pointer;
}

/* Hide jQuery-UI's inner sprite span so only ::before shows */
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-header .ui-datepicker-next .ui-icon {
    display: none !important; /* simplest & safest for just these two */
    background: none !important;
}

/* Your custom arrows via Font Awesome 6 Free (solid) */
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev::before,
.ui-datepicker .ui-datepicker-header .ui-datepicker-next::before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Font Awesome 6 Free";
    font-weight: 900; /* solid style */
    font-size: 16px;
    line-height: 1;
    color: #6c757d;
    pointer-events: none; /* clicks pass through to anchor */
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-prev::before {
    content: "\f104";
    left: 6px;
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-next::before {
    content: "\f105";
    right: 6px;
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:hover::before,
.ui-datepicker .ui-datepicker-header .ui-datepicker-next:hover::before,
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:focus::before,
.ui-datepicker .ui-datepicker-header .ui-datepicker-next:focus::before {
    color: #343a40;
}

/* end of datepicker */

/* S I D E B A R */

.sidebar-right .tab-content i {
    font-size: 1em;
    border-radius: 50%;
    height: 2em;
    width: 2em;
    margin-right: .5rem;
}

.comma-list .list-inline-item:not(:last-child)::after {
    content: ", ";
}

.sidebar-right .tab-content i.small {
    font-weight: 900;
    font-size: .75em;
}

#taskFiltering.shadow {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

dd, dt {
    font-size: 1.1em;
}

/* makes a card look disabled */
.card-haze {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .3);
}

.card.custom-card .card-header.with-tabs {
    margin-bottom: 0;
    padding-bottom: 0;
}

.card.custom-card .card-header.with-tabs .nav-tabs {
    border-bottom: 0;
}