html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}
/* ======================= left menu (H044) =======================
   Light sidebar, fixed 240px, scrolls on its own; sections (CRM / LaborIQ / Admin) with a small uppercase label and a rotating chevron;
   items = icon + label with a soft-blue active state and a 3px accent bar; count pills on the right; collapsed = 64px icon rail. */
#sideNav {
    flex: 0 0 240px; width: 240px; max-width: 240px;
    background: #f8f9fa; border-right: 1px solid #e3e6ea;
    padding: .75rem .5rem 1rem;
    position: sticky; top: 0; align-self: flex-start;
    max-height: 100vh; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin;
}
#mainContent { flex: 1 1 0; min-width: 0; max-width: 100%; }

#sideNav .nav-group { margin-bottom: .5rem; }
#sideNav .nav-group > summary {
    list-style: none; cursor: pointer; user-select: none;
    display: flex; align-items: center; justify-content: space-between;
    padding: .35rem .75rem; border-radius: 8px;
    text-transform: uppercase; font-size: .7rem; font-weight: 700; letter-spacing: .09em; color: #6c757d;
}
#sideNav .nav-group > summary::-webkit-details-marker { display: none; }
#sideNav .nav-group > summary::marker { content: ""; }
#sideNav .nav-group > summary::after {            /* chevron: points right when closed, rotates down when open */
    content: ""; width: .45rem; height: .45rem; margin-right: .15rem;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(-45deg); transition: transform .15s ease;
}
#sideNav .nav-group[open] > summary::after { transform: rotate(45deg); }
#sideNav .nav-group > summary:hover { color: #212529; background: #eceff2; }

/* small sub-labels inside LaborIQ (Customer / Job / Employee / Sales): aligned with the item text column, items keep the normal indent */
#sideNav .nav-sub { font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #8a9097; padding: .55rem .75rem .15rem 2.55rem; }

#sideNav .nav-link {
    position: relative; display: flex; align-items: center; gap: .65rem;
    padding: 6px .75rem; margin: 1px 0; border-radius: 8px;
    color: #212529; font-size: .92rem; line-height: 1.35;
}
#sideNav .nav-link .bi { flex: 0 0 1.25rem; width: 1.25rem; text-align: center; font-size: 1.05rem; color: #5f6770; }
#sideNav .nav-link .nav-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sideNav .nav-link:hover { background: #e9ecef; color: #212529; }
#sideNav .nav-link.active { background: #e7f1ff; color: #0b5ed7; font-weight: 600; }
#sideNav .nav-link.active .bi { color: #0b5ed7; }
#sideNav .nav-link.active::before {               /* 3px accent bar on the left edge */
    content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: #0d6efd;
}
#sideNav .nav-link:focus-visible, #sideNav .nav-group > summary:focus-visible { outline: 2px solid #0d6efd; outline-offset: -2px; }
#sideNav .nav-badge { flex: 0 0 auto; margin-left: auto; font-size: .68rem; font-weight: 600; padding: .2em .55em; }

/* ---- whole-menu toggle (hamburger): wide screens -> 64px icon rail; narrow screens -> hidden ---- */
@media (min-width: 768px) {
    body.menu-collapsed #sideNav { flex-basis: 64px; width: 64px; max-width: 64px; padding-left: .4rem; padding-right: .4rem; scrollbar-width: none; }
    body.menu-collapsed #sideNav::-webkit-scrollbar { display: none; }
    body.menu-collapsed #sideNav .nav-text,
    body.menu-collapsed #sideNav .nav-section,
    body.menu-collapsed #sideNav .nav-sub {          /* still there for screen readers, not drawn */
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
    body.menu-collapsed #sideNav .nav-group > summary { pointer-events: none; padding: 0; margin: .35rem .6rem; min-height: 0; height: 0; border-top: 1px solid #dfe3e7; border-radius: 0; }
    body.menu-collapsed #sideNav .nav-group > summary::after { display: none; }
    body.menu-collapsed #sideNav .nav-link { justify-content: center; padding: 8px 0; }
    body.menu-collapsed #sideNav .nav-link .bi { flex-basis: auto; }
    body.menu-collapsed #sideNav .nav-badge { position: absolute; top: 1px; right: 4px; margin: 0; padding: .05em .35em; font-size: .6rem; }
}
@media (max-width: 767.98px) {
    #sideNav { flex-basis: 100%; width: 100%; max-width: 100%; position: static; max-height: none; border-right: 0; border-bottom: 1px solid #e3e6ea; }
    body.menu-collapsed #sideNav { display: none; }
}

/* sortable column headers */
th .sort-link { color: inherit; text-decoration: none; white-space: nowrap; }
th .sort-link:hover { text-decoration: underline; }
.sort-arrow { font-size: .7em; margin-left: .25rem; }
span > .sort-link.sorted { font-weight: 600; }

/* user menu in the top bar: do not let a long name push the page wider */
#userMenu { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }