/* ---------------------------------------------------------------------------
 * App shell (see app/Views/base_view.php)
 * body = d-flex flex-column vh-100 overflow-hidden  -> fixed-height page frame
 * nav/footer = flex: 0 0 auto                       -> never grow or shrink
 * main = flex-fill overflow-auto                    -> the only scroll container
 * Views that need to fill can use h-100 / d-flex flex-column on a direct child
 * of <main>; add .min-h-0 to any intermediate flex item that must be allowed
 * to shrink below its content (the flexbox min-height:auto gotcha).
 * ------------------------------------------------------------------------ */
html {height: 100%;}
body {min-height: 100vh;}
/* dvh so mobile browser chrome doesn't push the footer below the fold */
@supports (height: 100dvh) { body.vh-100 {height: 100dvh;} }

main {
    background-color: var(--tt-white);
    border: 1px solid var(--tt-green);
    min-height: 0;   /* allow <main> to shrink so its own scrollbar takes over */
    min-width: 0;
}
.webapp-navbar {padding-left:5%;padding-right:5%; flex: 0 0 auto; z-index: 1020;}

.webapp-footer {background:var(--tt-blue);color:white;opacity: 1; flex: 0 0 auto;}

/* Escape hatches for nested flex scrollers inside views. */
.min-h-0 {min-height: 0 !important;}
.min-w-0 {min-width: 0 !important;}

.form-control:focus, .form-select:focus{
    border-color: var(--tt-red);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px var(--tt-red-half);
}

.now-you-know {font-family: 'Montserrat', 'Poppins', 'Avenir Next', Arial, sans-serif; font-weight: 700; color:var(--tt-gray);}

@media (max-width: 576px) {
    .webapp-navbar img {
        width: 180px;
        height:auto;
    }
}

a.text-muted:focus, a.text-muted:active {outline: none; box-shadow: none; color: var(--tt-red);}

.btn-secondary {
    --bs-btn-bg: gray;
    --bs-btn-hover-bg: var(--tt-red);
    --bs-btn-hover-border-color: var(--tt-green);
}

.btn-list {
    --bs-btn-bg: var(--tt-white);
    --bs-btn-hover-bg: var(--tt-white);
    --bs-btn-hover-border-color: var(--tt-red);
}

.dropdown-menu {
    --bs-dropdown-border-color: var(--tt-red);
    --bs-dropdown-link-hover-bg: var(--tt-green);
}

.table-hover { --bs-table-hover-bg: var(--tt-green); }
.table > thead { --bs-table-bg: var(--tt-blue); --bs-table-color: white; }
.table-hover tbody tr td button { display: none; }
.table-hover tbody tr:hover td button { display: inline; }

/*input[type="radio"]:checked + label.btn-radio { background-color: #C621270F; border-color: #C62127; }*/


.btn-group button{border: 1px solid var(--tt-red); color: var(--tt-red); width:33%;}
.btn-group button:hover{background-color: var(--tt-red); border: 1px solid var(--tt-green);}

input[type="radio"]:checked + label.btn-radio { background-color: var(--tt-red-half); border-color: var(--tt-red); color: var(--tt-red);}
.btn-group label{border: 1px solid var(--tt-red); color: var(--tt-green);}

.form-check-input:not(:checked) {border-color: var(--tt-red);}
.form-check-input:checked { background-color: var(--tt-red); border-color: var(--tt-green); }
.form-check-input:focus{ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px var(--tt-red); border-color: var(--tt-red); }

.list-group { --bs-list-group-active-bg: var(--tt-red); --bs-list-group-active-border-color: var(--tt-green); }

.offcanvas.offcanvas-top.offcanvas-size-xxl{ --bs-offcanvas-height: 80vh !important; }
.offcanvas.offcanvas-end.offcanvas-size-xxl{ --bs-offcanvas-width: min(50vw, 50vw) !important; }
.offcanvas.offcanvas-end.offcanvas-size-med{ --bs-offcanvas-width: min(33vw, 33vw) !important; }


.badge{background-color: var(--tt-red);}

.bg-tt{background-color: var(--tt-red);}

/*!* For BS tooltip modifications *!*/
/*.tooltip-inner { max-width: 400px; !* Adjust the width as needed *! }*/
/*.tooltip-inner ul {*/
/*    text-align: left; margin: 0; !* Optional: Adjust margin if needed *!*/
/*    padding: 20px; !* Optional: Adjust padding if needed *!*/
/*}*/
/*.tooltip-inner ul li {*/
/*    text-align: left; !* Ensure list items are left-aligned *!*/
/*}*/
.tooltip { --bs-tooltip-max-width: 400px; }
.tooltip-inner ul { text-align: left; margin: 0; padding: 20px; }