html, body, .header {
    background-color: rgb(248, 249, 250, 1) !important;
    color: #333 !important;
}

.header {
    color: white !important;
    background-color: #1A2B3F !important;
    max-width: 100% !important;
}

.fs-7 {
    font-size: .875rem !important
}

.nav-link {
    color: white !important;
}

.theme-background {
    background-color: #3f6898 !important;
    border-color: #1A2B3F !important;
}

.theme-background-secondary {
    background-color: #82a4cb !important;
    border-color: #4c7cb5 !important;
}

.bsb-animated {
    --bsb-animation-duration: 1s;
    animation-duration: var(--bsb-animation-duration);
    animation-fill-mode: both
}

@keyframes bsb-fadeIn {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.bsb-fadeIn {
    animation-name: bsb-fadeIn
}

@keyframes bsb-fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 100%, 0)
    }
    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

.bsb-fadeInUp {
    animation-name: bsb-fadeInUp
}

@keyframes bsb-fadeInDown {
    0% {
        opacity: 0;
        transform: translate3d(0, -100%, 0)
    }
    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

.bsb-fadeInDown {
    animation-name: bsb-fadeInDown
}

@keyframes bsb-fadeInLeft {
    0% {
        opacity: 0;
        transform: translate3d(-100%, 0, 0)
    }
    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

.bsb-fadeInLeft {
    animation-name: bsb-fadeInLeft
}

@keyframes bsb-fadeInRight {
    0% {
        opacity: 0;
        transform: translate3d(100%, 0, 0)
    }
    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

.bsb-fadeInRight {
    animation-name: bsb-fadeInRight
}

@keyframes bsb-fadeOut {
    0% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

.bsb-fadeOut {
    animation-name: bsb-fadeOut
}

@keyframes bsb-fadeOutUp {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        transform: translate3d(0, -100%, 0)
    }
}

.bsb-fadeOutUp {
    animation-name: bsb-fadeOutUp
}

@keyframes bsb-fadeOutDown {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        transform: translate3d(0, 100%, 0)
    }
}

.bsb-fadeOutDown {
    animation-name: bsb-fadeOutDown
}

@keyframes bsb-fadeOutLeft {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        transform: translate3d(-100%, 0, 0)
    }
}

.bsb-fadeOutLeft {
    animation-name: bsb-fadeOutLeft
}

@keyframes bsb-fadeOutRight {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        transform: translate3d(100%, 0, 0)
    }
}

.bsb-fadeOutRight {
    animation-name: bsb-fadeOutRight
}

@keyframes bsb-zoomIn {
    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }
    50% {
        opacity: 1
    }
}

.bsb-zoomIn {
    animation-name: bsb-zoomIn
}

.bsb-dropdown-animation.dropdown-menu.show.bsb-fadeIn {
    --bsb-animation-duration: 500ms;
    animation-duration: var(--bsb-animation-duration);
    animation-fill-mode: both;
    animation-name: bsb-fadeIn
}

.bsb-dropdown-animation.dropdown-menu.show.bsb-fadeInUp {
    --bsb-animation-duration: 500ms;
    animation-duration: var(--bsb-animation-duration);
    animation-fill-mode: both;
    animation-name: bsb-fadeInUp
}

.bsb-dropdown-animation.dropdown-menu.show.bsb-fadeInDown {
    --bsb-animation-duration: 500ms;
    animation-duration: var(--bsb-animation-duration);
    animation-fill-mode: both;
    animation-name: bsb-fadeInDown
}

.bsb-dropdown-animation.dropdown-menu.show.bsb-fadeInLeft {
    --bsb-animation-duration: 500ms;
    animation-duration: var(--bsb-animation-duration);
    animation-fill-mode: both;
    animation-name: bsb-fadeInLeft
}

.bsb-dropdown-animation.dropdown-menu.show.bsb-fadeInRight {
    --bsb-animation-duration: 500ms;
    animation-duration: var(--bsb-animation-duration);
    animation-fill-mode: both;
    animation-name: bsb-fadeInRight
}

.bsb-dropdown-animation.dropdown-menu.show.bsb-zoomIn {
    --bsb-animation-duration: 500ms;
    animation-duration: var(--bsb-animation-duration);
    animation-fill-mode: both;
    animation-name: bsb-zoomIn
}

.bsb-dropdown-toggle-caret-disable.dropdown-toggle:after {
    display: none
}

.bsb-navbar-3 {
    --bs-navbar-nav-link-padding-x: 0.8rem
}

.bsb-navbar-3 .navbar-collapse .navbar-nav {
    flex-direction: row;
    justify-content: center
}

@media (max-width: 767.98px) {
    .bsb-navbar-3 .navbar-collapse .navbar-nav {
        padding-bottom: 1rem;
        padding-top: 1rem
    }
}

.bsb-navbar-3 .navbar-collapse .navbar-nav .dropdown-menu {
    position: absolute
}

.bsb-navbar-3 .navbar-collapse .navbar-nav .nav-link {
    padding-left: var(--bs-navbar-nav-link-padding-x);
    padding-right: var(--bs-navbar-nav-link-padding-x)
}

.bsb-navbar-3 .navbar-collapse .bsb-dropdown-menu-responsive {
    position: relative
}

@media (max-width: 767.98px) {
    .bsb-navbar-3 .navbar-collapse .bsb-dropdown-menu-responsive .dropdown, .bsb-navbar-3 .navbar-collapse .bsb-dropdown-menu-responsive .dropdown-center, .bsb-navbar-3 .navbar-collapse .bsb-dropdown-menu-responsive .dropend, .bsb-navbar-3 .navbar-collapse .bsb-dropdown-menu-responsive .dropstart, .bsb-navbar-3 .navbar-collapse .bsb-dropdown-menu-responsive .dropup, .bsb-navbar-3 .navbar-collapse .bsb-dropdown-menu-responsive .dropup-center {
        position: static
    }
}

.bsb-navbar-3 .navbar-collapse .bsb-dropdown-menu-responsive .dropdown-menu {
    max-width: 280px;
    min-width: 80%
}

@media (min-width: 576px) {
    .bsb-navbar-3 .navbar-collapse .bsb-dropdown-menu-responsive .dropdown-menu {
        min-width: 280px
    }
}

.bsb-navbar-3 .navbar-collapse .bsb-dropdown-menu-responsive .dropdown-menu.bsb-dropdown-sm {
    max-width: 160px;
    min-width: 160px
}

@media (max-width: 767.98px) {
    .bsb-navbar-3 .navbar-collapse .bsb-dropdown-menu-responsive .dropdown-menu[data-bs-popper] {
        left: 50%;
        transform: translateX(-50%)
    }
}

.bsb-sidebar-1.offcanvas.offcanvas-start {
    max-width: 300px !important
}

.bsb-sidebar-1.offcanvas .offcanvas-header .btn-close {
    opacity: .3 !important
}

.bsb-sidebar-1.offcanvas .offcanvas-body {
    padding: 1rem 2rem
}

.page-link {
    color: #1A2B3F !important;
}

.active>.page-link {
    background-color: #1A2B3F !important;
    border-color: #1A2B3F !important;
    color: white !important;
}

.pointer-hover {
    cursor: pointer;
}

.unviewed-update td {
    background-color: #ddd !important;
}

table tr th.dt-type-numeric.dt-left {
  text-align: left;
}

table tr td.dt-type-numeric.dt-left {
  text-align: left;
}

/* =====================================================================
   Buildsnapper modern UI layer — applies to all assessor pages via the
   bb-app body class (set in assessor/base.html). styles.css loads before
   Bootstrap, so .bb-app descendant selectors win on specificity; the few
   overrides of Bootstrap utilities / existing !important rules restate
   !important to match. The navbar has no cards/tables/badges/.btn, so it
   is unaffected.
   ===================================================================== */
.bb-app{
  --bb-navy:#1a2b3f; --bb-accent:#3f6898; --bb-accent-strong:#34557d;
  --bb-accent-soft:#eef3f9; --bb-accent-border:#d6e2ef;
  --bb-ink:#22303f; --bb-muted:#6b7785; --bb-line:#e7ebf1; --bb-surface:#fff;
  --bb-radius:16px;
  --bb-shadow:0 1px 2px rgba(26,43,63,.05), 0 10px 28px -14px rgba(26,43,63,.22);
}
@keyframes bbFade{ from{opacity:0} to{opacity:1} }

/* Headings + optional hero */
.bb-app section h1{ font-weight:760; letter-spacing:-.025em; color:var(--bb-navy); }
.bb-hero{ margin:.25rem 0 1.75rem; }
.bb-hero h1{ font-size:2rem; margin:0; }
.bb-kicker{ font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--bb-accent); margin-bottom:.45rem; }
.bb-sub{ color:var(--bb-muted); margin:.4rem 0 0; font-size:.97rem; }

/* Info / empty panels */
.bb-app .alert-light{
  position:relative; background:linear-gradient(180deg,#fbfcfe,#f5f9fd);
  border:1px solid var(--bb-line); border-radius:var(--bb-radius);
  box-shadow:var(--bb-shadow); padding:1.05rem 1.25rem 1.05rem 1.5rem; overflow:hidden;
}
.bb-app .alert-light::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,var(--bb-accent),#6a90bd); }
.bb-app .alert-light li::marker{ color:var(--bb-accent); }
.bb-app .alert-secondary{ background:#fff; border:1px dashed var(--bb-line); border-radius:var(--bb-radius); color:var(--bb-muted); box-shadow:var(--bb-shadow); }
.bb-app .alert-secondary a{ color:var(--bb-accent); font-weight:600; }

/* Chips / badges */
.bb-app .badge{ display:inline-flex; align-items:center; gap:.45rem; font-weight:600; font-size:.82rem; border-radius:999px; padding:.5em .85em; border:1px solid transparent; }
.bb-app .badge.bg-success{ background:var(--bb-accent-soft)!important; color:#2f5e8c!important; border-color:var(--bb-accent-border); }
.bb-app .badge.bg-secondary{ background:#f1f3f6!important; color:#5a6675!important; border-color:#e3e7ec; }
.bb-app .badge.bg-success::before, .bb-app .badge.bg-secondary::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }

/* Cards */
.bb-app .card{ border:1px solid var(--bb-line); border-radius:var(--bb-radius); background:var(--bb-surface); box-shadow:var(--bb-shadow); overflow:hidden; animation:bbFade .35s ease both; transition:transform .18s ease, box-shadow .18s ease; }
.bb-app .card:hover{ transform:translateY(-2px); box-shadow:0 2px 4px rgba(26,43,63,.06), 0 18px 42px -18px rgba(26,43,63,.32); }
.bb-app .card-header{ background:var(--bb-surface); border-bottom:1px solid var(--bb-line); padding:.85rem 1.1rem; }
.bb-app .card-header strong{ color:var(--bb-navy); font-weight:650; }

/* Tables — white surface; standalone tables become clean panels, in-card tables stay flat */
.bb-app .table{ margin:0; --bs-table-bg:transparent; background:#fff; }
.bb-app section .table{
  border:1px solid var(--bb-line); border-radius:var(--bb-radius); box-shadow:var(--bb-shadow);
  border-collapse:separate; border-spacing:0; overflow:hidden;
}
.bb-app .card .table{ border:0; box-shadow:none; border-radius:0; }
.bb-app .table>:not(caption)>*>*{ border-bottom-color:var(--bb-line); }
.bb-app .table thead th{ text-transform:uppercase; font-size:.7rem; letter-spacing:.08em; font-weight:700; color:var(--bb-muted); padding:.75rem 1.1rem; background:#fff; border-bottom:1px solid var(--bb-line); }
.bb-app .table tbody td{ padding:.85rem 1.1rem; vertical-align:middle; background:transparent; }
.bb-app .table tbody tr{ transition:background .15s ease; }
.bb-app .table tbody tr:hover{ background:var(--bb-accent-soft); }
.bb-app section .table caption{ padding:.75rem 1.1rem; }

/* Secured status pill (opt-in via .bb-status) */
.bb-app .bb-status{ display:inline-flex; align-items:center; gap:.4rem; background:var(--bb-accent-soft); color:var(--bb-accent-strong)!important; border:1px solid var(--bb-accent-border); border-radius:999px; padding:.25rem .65rem; font-weight:600; font-size:.8rem; }

/* Buttons */
.bb-app section .btn, .bb-app .modal .btn{ border-radius:9px; font-weight:550; transition:all .15s ease; }
.bb-app .btn:focus-visible{ box-shadow:0 0 0 .22rem var(--bb-accent-soft); }
.bb-app section .btn-primary, .bb-app .modal .btn-primary{ background:var(--bb-accent); border-color:var(--bb-accent); }
.bb-app section .btn-primary:hover, .bb-app .modal .btn-primary:hover{ background:var(--bb-accent-strong); border-color:var(--bb-accent-strong); transform:translateY(-1px); box-shadow:0 5px 14px -4px rgba(63,104,152,.5); }
.bb-app .theme-background{ box-shadow:0 1px 2px rgba(26,43,63,.18); }
.bb-app .theme-background:hover{ background-color:var(--bb-accent-strong)!important; border-color:var(--bb-accent-strong)!important; transform:translateY(-1px); box-shadow:0 5px 14px -4px rgba(63,104,152,.5); }
.bb-app section .btn-outline-secondary, .bb-app .modal .btn-outline-secondary{ border-color:var(--bb-line); color:var(--bb-ink); }
.bb-app section .btn-outline-secondary:hover, .bb-app .modal .btn-outline-secondary:hover{ background:var(--bb-navy); border-color:var(--bb-navy); color:#fff; }
.bb-app section .btn-outline-primary:hover{ background:var(--bb-accent); border-color:var(--bb-accent); color:#fff; transform:translateY(-1px); }
.bb-app section .btn-outline-info{ border-color:#cfe0ee; color:#2f6395; }
.bb-app section .btn-outline-info:hover{ background:#eaf2fa; color:#234e74; }
.bb-app section .btn-outline-warning{ border-color:#efe1bf; color:#977a23; }
.bb-app section .btn-outline-warning:hover{ background:#fbf3da; color:#7c6113; }

/* Modals */
.bb-app .modal .modal-content{ border:0; border-radius:18px; overflow:hidden; box-shadow:0 24px 70px -20px rgba(26,43,63,.45); }
.bb-app .modal .modal-header{ border-bottom:1px solid #eef1f5; padding:1.1rem 1.35rem; }
.bb-app .modal .modal-title{ color:var(--bb-navy); font-weight:700; letter-spacing:-.01em; }
.bb-app .modal .modal-footer{ border-top:1px solid #eef1f5; padding:1rem 1.35rem; }
.bb-app .modal .form-check-input:checked{ background-color:var(--bb-accent); border-color:var(--bb-accent); }
.bb-app .modal .progress-bar{ background:var(--bb-accent); }

/* Forms — soft "filled" inputs that light up to white + accent on focus */
.bb-app section .form-control, .bb-app section .form-select,
.bb-app .modal .form-control, .bb-app .modal .form-select{
  background-color:#f4f7fb; border:1px solid #e3e9f1; border-radius:12px; color:var(--bb-ink);
  transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.bb-app section .form-control:hover, .bb-app section .form-select:hover,
.bb-app .modal .form-control:hover, .bb-app .modal .form-select:hover{ border-color:#cfd9e6; }
.bb-app section .form-control::placeholder, .bb-app .modal .form-control::placeholder{ color:#aeb6c0; }
/* A floating label stands in for the placeholder, which Bootstrap keeps transparent there;
   the rule above would show both, one over the other, on an empty unfocused field. */
.bb-app section .form-floating > .form-control::placeholder,
.bb-app .modal .form-floating > .form-control::placeholder{ color:transparent; }
.bb-app section .form-control:focus, .bb-app section .form-select:focus,
.bb-app .modal .form-control:focus, .bb-app .modal .form-select:focus{
  background-color:#fff; border-color:var(--bb-accent); box-shadow:0 0 0 .22rem var(--bb-accent-soft);
}
.bb-app section .form-control::file-selector-button{ background:#e9eef5; border:0; border-right:1px solid #e3e9f1; color:var(--bb-ink); }
.bb-app section .form-label, .bb-app .modal .form-label{
  color:var(--bb-muted); font-weight:550; font-size:.85rem; letter-spacing:.01em;
}
.bb-app section .form-floating > label, .bb-app .modal .form-floating > label{ color:var(--bb-muted); }
.bb-app section .form-floating > .form-control:focus ~ label{ color:var(--bb-accent); opacity:.9; }
/* Bootstrap sits a floated label on a chip of the page background (white). Match the field
   instead (tinted at rest, white when focused); the chip still masks text a textarea scrolls. */
.bb-app section .form-floating > .form-control ~ label::after,
.bb-app section .form-floating > .form-select ~ label::after,
.bb-app .modal .form-floating > .form-control ~ label::after,
.bb-app .modal .form-floating > .form-select ~ label::after{ background-color:#f4f7fb; }
.bb-app section .form-floating > .form-control:focus ~ label::after,
.bb-app section .form-floating > .form-select:focus ~ label::after,
.bb-app .modal .form-floating > .form-control:focus ~ label::after,
.bb-app .modal .form-floating > .form-select:focus ~ label::after{ background-color:#fff; }
.bb-app section .form-check-input, .bb-app .modal .form-check-input{ border-color:#cdd5df; transition:border-color .15s, background-color .15s, box-shadow .15s; }
.bb-app section .form-check-input:checked, .bb-app .modal .form-check-input:checked{ background-color:var(--bb-accent); border-color:var(--bb-accent); }
.bb-app section .form-check-input:focus, .bb-app .modal .form-check-input:focus{ border-color:var(--bb-accent); box-shadow:0 0 0 .2rem var(--bb-accent-soft); }
.bb-app section .input-group-text{ background:#eef2f7; border:1px solid #e3e9f1; color:var(--bb-muted); border-radius:12px; }
.bb-app section .form-text{ color:var(--bb-muted); }