/* QA site indicator: thin bar pinned to the very top of the viewport so it stays
   visible while scrolling. Body gets `.has-qa-banner` when this is rendered, which
   pushes the fixed topnav and content-page down by the banner height. */
.qa-site-banner {
    background: #c62828;
    color: #fff3cd;
    font-weight: 700;
    text-align: center;
    padding: 2px 0;
    font-size: 12px;
    letter-spacing: 3px;
    border-bottom: 1px solid #c62828;
    line-height: 1.4;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 22px;
    z-index: 1100; /* above #topnav (1001) */
}

body.has-qa-banner #topnav { top: 22px; }
/* Only push content-page down on desktop — at <992px the theme collapses the
   fixed topnav and resets content-page padding to 0 (see app.css ~line 790). */
@media (min-width: 992px) {
    body.has-qa-banner .content-page { padding-top: 82px; } /* 60 topnav + 22 banner */
}
body.has-qa-banner.authentication-bg { padding-top: 22px; }

/* Minimal focus accent: a subtle border tint on inputs / selects / checkboxes app-wide. */
.form-control:focus,
.custom-select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
textarea:focus,
select:focus {
    border-color: #78c350;
    box-shadow: 0 0 0 1px rgba(120, 195, 80, 0.25);
    outline: none;
}

input[type="checkbox"]:focus,
input[type="radio"]:focus {
    outline: 1px solid #78c350;
    outline-offset: 1px;
}

/* Bigger hit target for plain (non-Bootstrap-custom) checkboxes/radios.
   Bootstrap's .form-check / .custom-control variants already have generous
   padding, so scope this to bare inputs that aren't wrapped in those. */
input[type="checkbox"]:not(.form-check-input):not(.custom-control-input),
input[type="radio"]:not(.form-check-input):not(.custom-control-input) {
    width: 18px;
    height: 18px;
    cursor: pointer;
    vertical-align: middle;
}

/* Make the surrounding cell act as the hit target when it only holds a
   checkbox (the toggles in the Unbilled Hours grid). Pairs with a small JS
   handler in the page footer that forwards td clicks to the inner checkbox. */
td.js-cell-toggle {
    cursor: pointer;
    padding: 0.6rem;
}
td.js-cell-toggle:hover {
    background-color: rgba(120, 195, 80, 0.08);
}

.js-review-note.is-saved {
    border-color: #78c350;
    background-color: #f3faee;
    transition: background-color 0.4s ease;
}

.btn-form-control {
    width: 100%;
    height: calc(1.5em + .9rem + 2px);
    padding: .45rem .9rem;
    font-size: .8125rem;
    font-weight: 400;
    line-height: 1.5;
    color: #6c757d;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .2rem;
}

.app-search {
    overflow: inherit !important;
}

.dropdown-menu-search {
    max-height: 400px;
    overflow-y: auto;
    margin-top: 2px;
    width: calc(100% + 40px) !important;
    padding: .45rem .45rem !important;
}

.dropdown-item-search {
    padding: .45rem .45rem !important;
}

.bootstrap-select .inner {
     overflow-y: auto !important;
}

/* bootstrap-select otherwise stamps an inline min-width matched to the parent
   container (form-inline blows the menu out to the full row). Clamp it so the
   popup hugs its trigger / its content. */
.bootstrap-select > .dropdown-menu {
    min-width: 0 !important;
}

.badge-light {
    color: #FFF;
    background-color: #bbb;
}

.nav-tabs {
    border-bottom: 1px solid #bbb;
}

    .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
        color: #495057;
        background-color: #fff;
        border-color: #bbb #bbb #fff #bbb;
        border-top-width: 3px;
        border-top-color: #78c350;
    }

.tab-content {
    padding: 20px 0 0 0;
    border-top: 0px;
    border-left: solid 1px #bbb;
    border-right: solid 1px #bbb;
    border-bottom: solid 1px #bbb;
}

.form-inline .form-checkboxlist-horizontal,
.form-checkboxlist-horizontal {
    /* Used with  RepeatLayout="UnorderedList" */
    padding: 0;
    margin-bottom: 0;
    list-style-type: none;
}

    .form-inline .form-checkboxlist-horizontal li,
    .form-checkboxlist-horizontal li {
        display: inline-block;
        margin-right: 15px;
        margin-top: 3px;
    }
        .form-inline .form-checkboxlist-horizontal li label,
        .form-checkboxlist-horizontal li label {
            margin-left: 7px;
            font-weight: normal;
            display: inline-block;
        }

/* --- Mobile form ergonomics -------------------------------------------------
   Phones (iOS Safari especially) auto-zoom into any focused input whose font is
   under 16px, then leave the user panning around the page. Bumping form fields
   to 16px on small screens stops the zoom. Also tame the native date picker,
   which renders oversized / overflows its container on mobile webkit. */
@media (max-width: 767.98px) {
    .form-control,
    .custom-select,
    select.form-control,
    textarea.form-control {
        font-size: 16px;
    }

    /* Native date/time inputs: strip the webkit widget chrome so the field sizes
       like a normal text input (no extra height, no oversized intrinsic width)
       and can shrink inside a flex .input-group. The OS date picker still opens
       on tap. Scoped to mobile so desktop keeps its native calendar control. */
    input[type="date"].form-control,
    input[type="time"].form-control,
    input[type="datetime-local"].form-control {
        -webkit-appearance: none;
        appearance: none;
        min-width: 0;
    }
    input[type="date"]::-webkit-date-and-time-value {
        text-align: left;
        margin: 0;
    }
}

/* Modal footers lay Cancel/Save and Delete out in two col-6 halves. On a narrow
   phone a half-width column can't hold two buttons, so they wrap and stack. Give
   each footer column the full width on xs screens — the buttons sit side by side
   again, and the second column drops cleanly onto its own row. */
@media (max-width: 575.98px) {
    .modal-footer .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .modal-footer .row > [class*="col-"] + [class*="col-"] {
        margin-top: .5rem;
    }
}