/* ==========================================================================
   Bilbo — brand layer on top of AdminLTE 4 / Bootstrap 5
   Night navy #0f1b2d · Signal yellow #ffc400 · Traffic orange #ff6b1a
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

:root {
    --bb-navy: #0f1b2d;
    --bb-navy-800: #16263d;
    --bb-navy-600: #2a3d5a;
    --bb-navy-300: #8795ab;
    --bb-yellow: #ffc400;
    --bb-yellow-600: #e6ad00;
    --bb-yellow-50: #fff8dc;
    --bb-orange: #ff6b1a;
    --bb-orange-50: #fff1e8;
    --bb-paper: #f6f5f1;
    --bb-ink: #121a26;
    --bb-muted: #6b7486;
    --bb-line: #e7e5de;
    --bb-radius: .9rem;
    --bb-shadow: 0 1px 2px rgba(15, 27, 45, .05), 0 8px 24px -14px rgba(15, 27, 45, .25);
    --bb-shadow-lg: 0 24px 50px -22px rgba(15, 27, 45, .45);
    --bb-stripes: repeating-linear-gradient(-45deg, #ffc400 0 14px, #0f1b2d 14px 28px);
    --bb-display: 'Archivo', 'DM Sans', system-ui, sans-serif;

    --bs-primary: #0f1b2d;
    --bs-primary-rgb: 15, 27, 45;
    --bs-link-color: #1f5fbf;
    --bs-link-color-rgb: 31, 95, 191;
    --bs-link-hover-color: #0f1b2d;
    --bs-link-hover-color-rgb: 15, 27, 45;
    --bs-body-font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-body-color: #121a26;
    --bs-body-bg: #f6f5f1;
    --bs-border-color: #e7e5de;
    --lte-sidebar-width: 260px;
}

body { font-family: var(--bs-body-font-family); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--bb-display); font-weight: 800; letter-spacing: -.02em; color: var(--bb-ink); }
.app-main, .app-wrapper { background: var(--bb-paper); }
::selection { background: rgba(255, 196, 0, .45); }

/* ---- Buttons ------------------------------------------------------------ */
.btn { font-weight: 600; border-radius: .6rem; }
.btn-sm { border-radius: .5rem; }
.btn-primary {
    --bs-btn-bg: var(--bb-navy); --bs-btn-border-color: var(--bb-navy);
    --bs-btn-hover-bg: var(--bb-navy-600); --bs-btn-hover-border-color: var(--bb-navy-600);
    --bs-btn-active-bg: #081120; --bs-btn-active-border-color: #081120;
    --bs-btn-disabled-bg: var(--bb-navy); --bs-btn-disabled-border-color: var(--bb-navy);
}
.btn-outline-primary {
    --bs-btn-color: var(--bb-navy); --bs-btn-border-color: rgba(15, 27, 45, .35);
    --bs-btn-hover-bg: var(--bb-navy); --bs-btn-hover-border-color: var(--bb-navy);
    --bs-btn-active-bg: var(--bb-navy); --bs-btn-active-border-color: var(--bb-navy);
}
.btn-signal { background: var(--bb-yellow); border-color: var(--bb-yellow); color: var(--bb-navy); box-shadow: 0 8px 18px -10px rgba(230, 173, 0, .9); }
.btn-signal:hover, .btn-signal:focus { background: var(--bb-yellow-600); border-color: var(--bb-yellow-600); color: var(--bb-navy); }
.btn-soft { background: var(--bb-yellow-50); color: var(--bb-navy); border: 0; }
.btn-soft:hover { background: #ffefb0; color: var(--bb-navy); }
.btn-whatsapp { background: #25d366; border-color: #25d366; color: #fff; }
.btn-whatsapp:hover { background: #1ebe5b; border-color: #1ebe5b; color: #fff; }
.btn-icon { width: 2rem; height: 2rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; }

/* ---- Forms -------------------------------------------------------------- */
.form-control, .form-select { border-radius: .6rem; border-color: #dcd9cf; padding: .55rem .8rem; }
.form-control-sm, .form-select-sm { border-radius: .5rem; padding: .3rem .6rem; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--bb-yellow-600); box-shadow: 0 0 0 .25rem rgba(255, 196, 0, .25); }
.form-check-input:checked { background-color: var(--bb-navy); border-color: var(--bb-navy); }
.form-label { font-weight: 600; font-size: .85rem; margin-bottom: .3rem; }
.form-text { color: var(--bb-muted); }
.input-group-text { border-color: #dcd9cf; background: #faf9f5; color: var(--bb-muted); border-radius: .6rem; }
.form-switch .form-check-input { width: 2.4em; height: 1.3em; cursor: pointer; }

/* ---- Sidebar ------------------------------------------------------------ */
.app-sidebar.sidebar-bilbo { background: linear-gradient(180deg, #0f1b2d 0%, #0a1321 100%) !important; border-right: 0; }
.sidebar-bilbo .sidebar-brand { border-bottom: 1px solid rgba(255, 255, 255, .07); height: 3.75rem; position: relative; }
.sidebar-bilbo .sidebar-brand::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; background: var(--bb-stripes); opacity: .9; }
.sidebar-bilbo .brand-link .brand-image { width: 2.1rem; height: 2.1rem; max-height: none; border-radius: .45rem; }
.brand-wordmark { font-family: var(--bb-display); font-weight: 600 !important; font-size: 1.4rem; letter-spacing: -.04em; color: #fff; }
.brand-wordmark b { font-weight: 900; color: var(--bb-yellow); }
.sidebar-bilbo .nav-header { color: rgba(255, 255, 255, .35) !important; font-size: .68rem !important; font-weight: 700; letter-spacing: .16em; padding-top: 1.1rem !important; }
.sidebar-bilbo .sidebar-menu .nav-link { color: rgba(255, 255, 255, .72); border-radius: .6rem; margin: .1rem .6rem; padding: .6rem .8rem; font-weight: 500; width: auto; transition: background .15s, color .15s; }
.sidebar-bilbo .sidebar-menu .nav-link .nav-icon { color: rgba(255, 255, 255, .45); }
.sidebar-bilbo .sidebar-menu .nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.sidebar-bilbo .sidebar-menu .nav-link:hover .nav-icon { color: var(--bb-yellow); }
.sidebar-bilbo .sidebar-menu .nav-link.active { background: var(--bb-yellow) !important; color: var(--bb-navy) !important; font-weight: 700; }
.sidebar-bilbo .sidebar-menu .nav-link.active .nav-icon { color: var(--bb-navy); }

/* ---- Header ------------------------------------------------------------- */
.app-header { background: rgba(255, 255, 255, .85) !important; backdrop-filter: blur(10px); border-bottom: 1px solid var(--bb-line) !important; }
.app-header .nav-link { color: var(--bb-muted); }
.app-header .nav-link:hover { color: var(--bb-navy); }
.app-content-header { padding-top: 1.4rem; }
.app-content-header h1, .app-content-header .h3 { font-size: 1.55rem; }
.page-subtitle { color: var(--bb-muted); font-size: .9rem; margin-top: .15rem; }
.bb-crumb { font-size: .8rem; color: var(--bb-muted); font-weight: 600; margin-bottom: .2rem; }
.bb-crumb a { color: var(--bb-muted); text-decoration: none; }
.bb-crumb a:hover { color: var(--bb-navy); }

/* ---- Cards -------------------------------------------------------------- */
.card { border: 1px solid var(--bb-line); border-radius: var(--bb-radius); box-shadow: var(--bb-shadow); }
.card > .card-header { background: transparent; border-bottom: 1px solid var(--bb-line); padding: .9rem 1.2rem; }
.card > .card-header:first-child { border-radius: var(--bb-radius) var(--bb-radius) 0 0; }
.card-title { font-family: var(--bb-display); font-weight: 700; font-size: 1rem; margin: 0; display: flex; align-items: center; gap: .5rem; }
.card-title .bi { color: var(--bb-orange); }
.card-body { padding: 1.2rem; }
.card-footer { background: #fbfaf7; border-top: 1px solid var(--bb-line); border-radius: 0 0 var(--bb-radius) var(--bb-radius) !important; }

/* ---- Stat tiles --------------------------------------------------------- */
.stat-tile { position: relative; overflow: hidden; border-radius: var(--bb-radius); padding: 1.1rem 1.2rem; background: #fff; border: 1px solid var(--bb-line); box-shadow: var(--bb-shadow); height: 100%; display: block; color: inherit; text-decoration: none; }
a.stat-tile:hover { color: inherit; box-shadow: var(--bb-shadow-lg); }
.stat-tile .stat-icon { width: 2.6rem; height: 2.6rem; border-radius: .7rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: .8rem; }
.stat-tile .stat-value { font-family: var(--bb-display); font-size: 1.65rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.stat-tile .stat-label { font-size: .75rem; color: var(--bb-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.stat-tile .stat-foot { font-size: .8rem; color: var(--bb-muted); margin-top: .35rem; }
.stat-tile.is-hero { background: var(--bb-navy); border: 0; color: #fff; }
.stat-tile.is-hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--bb-stripes); }
.stat-tile.is-hero .stat-value { color: var(--bb-yellow); }
.stat-tile.is-hero .stat-label, .stat-tile.is-hero .stat-foot { color: rgba(255, 255, 255, .7); }
.stat-tile.is-hero .stat-icon { background: rgba(255, 196, 0, .15); color: var(--bb-yellow); }
.stat-tile.is-signal { background: var(--bb-yellow); border: 0; }
.stat-tile.is-signal .stat-label, .stat-tile.is-signal .stat-foot { color: rgba(15, 27, 45, .7); }
.stat-tile.is-signal .stat-icon { background: rgba(15, 27, 45, .1); color: var(--bb-navy); }

.tint-yellow { background: var(--bb-yellow-50); color: #a67c00; }
.tint-orange { background: var(--bb-orange-50); color: #d9530b; }
.tint-navy { background: #e8ecf3; color: var(--bb-navy); }
.tint-green { background: #e6f6ec; color: #198754; }
.tint-blue { background: #e7f0fd; color: #1f5fbf; }
.tint-grey { background: #efeee9; color: #5f6573; }
.tint-red { background: #fdecec; color: #c62f3a; }

/* ---- Tables ------------------------------------------------------------- */
.table { --bs-table-bg: transparent; margin-bottom: 0; vertical-align: middle; }
.table > thead th { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--bb-muted); font-weight: 700; border-bottom: 1px solid var(--bb-line); background: #fbfaf7; padding-top: .75rem; padding-bottom: .75rem; white-space: nowrap; }
.table > tbody td { border-color: var(--bb-line); padding-top: .8rem; padding-bottom: .8rem; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: #fffbea; }
.table td:first-child, .table th:first-child { padding-left: 1.2rem; }
.table td:last-child, .table th:last-child { padding-right: 1.2rem; }
.table td.actions, .table th.actions, td.actions, th.actions { white-space: nowrap; width: 1%; text-align: right; }
.table td.actions .btn + .btn, .table td.actions form { margin-left: .25rem; }
.table td.actions form { display: inline-block; }
[data-href] { cursor: pointer; }
.ref { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-weight: 700; font-size: .84rem; color: var(--bb-navy); letter-spacing: .02em; text-decoration: none; white-space: nowrap; }
a.ref:hover { color: var(--bb-orange); }
.money { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.muted { color: var(--bb-muted) !important; }
.tiny { font-size: .75rem; }
.min-w-0 { min-width: 0; }
.pagination { --bs-pagination-active-bg: var(--bb-navy); --bs-pagination-active-border-color: var(--bb-navy); --bs-pagination-color: var(--bb-navy); --bs-pagination-border-radius: .5rem; margin: 0; }

/* ---- Pills -------------------------------------------------------------- */
.pill { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .62rem; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; line-height: 1.2; }
.pill-primary { background: #e8ecf3; color: var(--bb-navy); }
.pill-warning { background: #fff4d1; color: #9a6c00; }
.pill-info { background: #e5f2fb; color: #0a6e9a; }
.pill-success { background: #e3f5ea; color: #16784a; }
.pill-danger { background: #fdecec; color: #c62f3a; }
.pill-secondary { background: #efeee9; color: #5f6573; }
.pill-dark { background: var(--bb-navy); color: #fff; }
.pill-signal { background: var(--bb-yellow); color: var(--bb-navy); }

/* ---- Avatars ------------------------------------------------------------ */
.avatar { width: 2.4rem; height: 2.4rem; border-radius: .6rem; flex-shrink: 0; object-fit: cover; background: var(--bb-navy); }
.avatar-sm { width: 1.9rem; height: 1.9rem; border-radius: .5rem; }
.avatar-lg { width: 4.5rem; height: 4.5rem; border-radius: 1rem; }
.avatar-round { border-radius: 50%; }

/* ---- Alerts ------------------------------------------------------------- */
.alert { border: 0; border-radius: .75rem; font-weight: 500; box-shadow: var(--bb-shadow); display: flex; align-items: flex-start; gap: .6rem; }
.alert > .bi { font-size: 1.1rem; line-height: 1.3; }
.alert-success { background: #e6f6ec; color: #11663a; }
.alert-danger { background: #fdecee; color: #a4202d; }
.alert-warning { background: #fff5d6; color: #7d5800; }
.alert-info { background: #e8f1fb; color: #154c85; }

/* ---- Empty state -------------------------------------------------------- */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--bb-muted); }
.empty-state .empty-icon { width: 4.25rem; height: 4.25rem; border-radius: 1rem; background: var(--bb-yellow-50); color: #a67c00; display: inline-flex; align-items: center; justify-content: center; font-size: 1.9rem; margin-bottom: 1rem; }
.empty-state h5 { margin-bottom: .25rem; }

/* ---- Filter bar --------------------------------------------------------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.filter-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .38rem .8rem; border-radius: 999px; background: #fff; border: 1px solid var(--bb-line); color: var(--bb-muted); font-size: .82rem; font-weight: 600; text-decoration: none; }
.filter-chip:hover { color: var(--bb-navy); border-color: var(--bb-navy-300); }
.filter-chip.active { background: var(--bb-navy); color: #fff; border-color: var(--bb-navy); }
.filter-chip .count { background: rgba(0, 0, 0, .07); border-radius: 999px; padding: 0 .45rem; font-size: .72rem; }
.filter-chip.active .count { background: var(--bb-yellow); color: var(--bb-navy); }
.search-input { position: relative; }
.search-input .bi { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--bb-muted); pointer-events: none; }
.search-input .form-control { padding-left: 2.2rem; }

/* ---- Timeline ----------------------------------------------------------- */
.timeline-bb { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline-bb::before { content: ""; position: absolute; left: .45rem; top: .4rem; bottom: .4rem; width: 2px; background: var(--bb-line); }
.timeline-bb > li { position: relative; padding: 0 0 1rem 1.75rem; }
.timeline-bb > li::before { content: ""; position: absolute; left: 0; top: .3rem; width: .95rem; height: .95rem; border-radius: 50%; background: #fff; border: 3px solid var(--bb-yellow); }
.timeline-bb .tl-title { font-weight: 600; font-size: .88rem; }
.timeline-bb .tl-meta { font-size: .74rem; color: var(--bb-muted); }

/* ---- Key/value ---------------------------------------------------------- */
.kv { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; margin: 0; font-size: .9rem; }
.kv dt { color: var(--bb-muted); font-weight: 500; }
.kv dd { margin: 0; font-weight: 600; text-align: right; }
.split-row { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px dashed var(--bb-line); font-size: .9rem; }
.split-row:last-child { border-bottom: 0; }
.split-row.total { font-weight: 800; font-size: 1.05rem; border-top: 2px solid var(--bb-ink); border-bottom: 0; margin-top: .25rem; padding-top: .6rem; }
.section-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; color: var(--bb-muted); font-weight: 700; margin-bottom: .7rem; }

/* ---- Billboard bits ----------------------------------------------------- */
.bb-thumb { width: 4.5rem; height: 3rem; border-radius: .45rem; object-fit: cover; flex-shrink: 0; background: #e8ecf3; }
.bb-thumb-lg { width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: var(--bb-radius); }
.code-tag { display: inline-block; font-family: ui-monospace, Menlo, monospace; font-weight: 800; font-size: .74rem; letter-spacing: .04em; background: var(--bb-navy); color: var(--bb-yellow); padding: .18rem .45rem; border-radius: .3rem; white-space: nowrap; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.photo-grid .ph { position: relative; border-radius: .6rem; overflow: hidden; aspect-ratio: 4 / 3; background: #e8ecf3; }
.photo-grid .ph img { width: 100%; height: 100%; object-fit: cover; }
.photo-grid .ph .ph-actions { position: absolute; inset: auto .4rem .4rem auto; display: flex; gap: .25rem; }
.photo-grid .ph .pill { position: absolute; top: .4rem; left: .4rem; }
.map-box { height: 300px; border-radius: var(--bb-radius); border: 1px solid var(--bb-line); z-index: 0; }

/* Availability calendar: 12 month cells coloured by occupancy */
.avail-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .4rem; }
.avail-grid .m { border-radius: .5rem; padding: .45rem .3rem; text-align: center; font-size: .72rem; font-weight: 700; line-height: 1.2; border: 1px solid transparent; }
.avail-grid .m small { display: block; font-weight: 500; font-size: .66rem; opacity: .8; }
.avail-grid .m.free { background: #e3f5ea; color: #16784a; }
.avail-grid .m.partial { background: #fff4d1; color: #8a6100; }
.avail-grid .m.full { background: #fdecec; color: #b3252f; }
.avail-legend { display: flex; gap: 1rem; font-size: .75rem; color: var(--bb-muted); margin-top: .6rem; }
.avail-legend i { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; margin-right: .3rem; vertical-align: -1px; }
@media (max-width: 575.98px) { .avail-grid { grid-template-columns: repeat(4, 1fr); } }

.commission-box { background: var(--bb-navy); color: #fff; border-radius: var(--bb-radius); padding: 1rem 1.1rem; position: relative; overflow: hidden; }
.commission-box::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--bb-stripes); }
.commission-box .v { font-family: var(--bb-display); font-size: 1.5rem; font-weight: 800; color: var(--bb-yellow); }
.commission-box .l { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(255, 255, 255, .65); font-weight: 700; }
.copy-field { font-family: ui-monospace, Menlo, monospace; font-size: .78rem; }

.progress-thin { height: .45rem; border-radius: 999px; background: var(--bb-line); }
.progress-thin .progress-bar { background: var(--bb-orange); border-radius: 999px; }
.rank { width: 1.6rem; height: 1.6rem; border-radius: .4rem; background: #efeee9; color: var(--bb-navy); font-weight: 800; font-size: .75rem; display: inline-flex; align-items: center; justify-content: center; }
.rank-1 { background: var(--bb-yellow); }

/* ==========================================================================
   Login
   ========================================================================== */
.bb-login { min-height: 100vh; display: grid; grid-template-columns: 1.15fr 1fr; background: #fff; }
.bb-login-art { position: relative; overflow: hidden; background: var(--bb-navy) url('../images/login-bg.gif') center / cover no-repeat; color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: 2.5rem 3rem; }
.bb-login-art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 27, 45, .6) 0%, rgba(15, 27, 45, .55) 40%, rgba(15, 27, 45, .92) 100%); }
.bb-login-art > * { position: relative; }
.bb-login-art .art-brand { display: flex; align-items: center; gap: .7rem; font-size: 1.7rem; }
.bb-login-art .art-brand img { width: 2.6rem; height: 2.6rem; border-radius: .5rem; }
.bb-login-art h1 { color: #fff; font-size: clamp(2rem, 3.6vw, 3.3rem); font-weight: 900; line-height: 1.02; letter-spacing: -.04em; max-width: 15ch; text-shadow: 0 2px 18px rgba(0, 0, 0, .55); }
.bb-login-art h1 span { color: var(--bb-yellow); }
.bb-login-art .art-lead { color: rgba(255, 255, 255, .82); max-width: 36ch; font-size: 1.02rem; }
.bb-login-art .art-flow { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.bb-login-art .art-flow span { background: rgba(15, 27, 45, .55); backdrop-filter: blur(6px); border: 1px solid rgba(255, 196, 0, .35); padding: .4rem .75rem; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.bb-login-art .art-foot { font-size: .8rem; color: rgba(255, 255, 255, .6); }
.bb-login-form { display: flex; align-items: center; justify-content: center; padding: 2rem; background: #fff; position: relative; }
.bb-login-form::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: var(--bb-stripes); }
.bb-login-card { width: 100%; max-width: 400px; }
.bb-login-card h2 { font-size: 1.9rem; font-weight: 900; letter-spacing: -.035em; }
.bb-login-card .lead-icon { position: relative; }
.bb-login-card .lead-icon > .bi { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--bb-muted); z-index: 3; }
.bb-login-card .lead-icon .form-control { padding: .8rem 1rem .8rem 2.7rem; border-radius: .7rem; background: #faf9f5; }
.bb-login-card .lead-icon .toggle-pw { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--bb-muted); z-index: 3; }
.bb-login-card .btn-signal { padding: .8rem 1rem; border-radius: .7rem; font-size: 1rem; }
.bb-login-mobile-brand { display: none; }
.demo-logins { font-size: .8rem; background: #faf9f5; border: 1px dashed #dcd9cf; border-radius: .7rem; padding: .75rem .9rem; }
.demo-logins button { font-size: .78rem; }
@media (max-width: 991.98px) {
    .bb-login { grid-template-columns: 1fr; }
    .bb-login-art { display: none; }
    .bb-login-form { min-height: 100vh; background: linear-gradient(180deg, rgba(15, 27, 45, .75), rgba(15, 27, 45, .5)), url('../images/login-bg.gif') center / cover; }
    .bb-login-card { background: #fff; border-radius: 1.25rem; padding: 2rem 1.5rem; box-shadow: var(--bb-shadow-lg); }
    .bb-login-mobile-brand { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.25rem; font-size: 1.4rem; }
    .bb-login-mobile-brand img { width: 2.2rem; height: 2.2rem; border-radius: .45rem; }
    .bb-login-mobile-brand .brand-wordmark { color: var(--bb-ink); }
}

/* ==========================================================================
   Public site
   ========================================================================== */
.pub { background: var(--bb-paper); color: var(--bb-ink); }
.pub-nav { position: sticky; top: 0; z-index: 1030; background: rgba(15, 27, 45, .96); backdrop-filter: blur(10px); }
.pub-nav .navbar-brand { display: flex; align-items: center; gap: .55rem; }
.pub-nav .navbar-brand img { width: 2.1rem; height: 2.1rem; border-radius: .45rem; }
.pub-nav .nav-link { color: rgba(255, 255, 255, .78); font-weight: 600; font-size: .92rem; }
.pub-nav .nav-link:hover, .pub-nav .nav-link.active { color: var(--bb-yellow); }
.pub-nav .navbar-toggler { border-color: rgba(255, 255, 255, .25); }
.pub-nav .navbar-toggler-icon { filter: invert(1); }
.ref-banner { background: var(--bb-yellow); color: var(--bb-navy); font-size: .85rem; font-weight: 600; padding: .45rem 0; }
.ref-banner img { width: 1.6rem; height: 1.6rem; border-radius: 50%; object-fit: cover; }

.pub-hero { position: relative; overflow: hidden; background: var(--bb-navy); color: #fff; padding: 5rem 0 6.5rem; }
.pub-hero::before { content: ""; position: absolute; inset: 0; background: var(--hero-photo, none) center / cover; opacity: .38; }
.pub-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15, 27, 45, .97) 0%, rgba(15, 27, 45, .75) 55%, rgba(15, 27, 45, .35) 100%); }
.pub-hero > * { position: relative; z-index: 1; }
.pub-hero h1 { color: #fff; font-size: clamp(2.4rem, 5.6vw, 4.4rem); font-weight: 900; letter-spacing: -.045em; line-height: 1; }
.pub-hero h1 .hl { color: var(--bb-yellow); }
.pub-hero .lead { color: rgba(255, 255, 255, .8); font-size: 1.15rem; max-width: 36rem; }
.hero-search { background: #fff; border-radius: 1rem; padding: .6rem; box-shadow: var(--bb-shadow-lg); margin-top: -3.5rem; position: relative; z-index: 5; }
.hero-search .form-select, .hero-search .form-control { border: 0; background-color: #f6f5f1; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 2rem; }
.hero-stats .v { font-family: var(--bb-display); font-size: 2rem; font-weight: 900; color: var(--bb-yellow); line-height: 1; }
.hero-stats .l { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(255, 255, 255, .65); font-weight: 700; }

.pub-section { padding: 4.5rem 0; }
.pub-section h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 900; letter-spacing: -.04em; }
.eyebrow { font-size: .74rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--bb-orange); }
.stripe-rule { height: 6px; background: var(--bb-stripes); border-radius: 3px; width: 64px; margin: .75rem 0 1.25rem; }

.board-card { display: block; text-decoration: none; color: inherit; background: #fff; border-radius: var(--bb-radius); overflow: hidden; border: 1px solid var(--bb-line); box-shadow: var(--bb-shadow); transition: transform .2s, box-shadow .2s; height: 100%; }
.board-card:hover { transform: translateY(-4px); box-shadow: var(--bb-shadow-lg); color: inherit; }
.board-card .bc-photo { aspect-ratio: 16 / 10; background: #e8ecf3 center / cover; position: relative; }
.board-card .bc-photo .code-tag { position: absolute; left: .7rem; top: .7rem; }
.board-card .bc-photo .pill { position: absolute; right: .7rem; top: .7rem; }
.board-card .bc-body { padding: .95rem 1.05rem 1.1rem; }
.board-card h5 { font-size: 1.02rem; font-weight: 800; margin-bottom: .15rem; }
.board-card .bc-meta { display: flex; flex-wrap: wrap; gap: .35rem .85rem; font-size: .8rem; color: var(--bb-muted); margin: .5rem 0 .75rem; }
.board-card .bc-price { font-family: var(--bb-display); font-weight: 900; font-size: 1.2rem; }
.board-card .bc-price small { font-family: var(--bs-body-font-family); font-size: .75rem; font-weight: 500; color: var(--bb-muted); }

.type-tile { display: flex; align-items: center; gap: .8rem; background: #fff; border: 1px solid var(--bb-line); border-radius: var(--bb-radius); padding: 1rem; text-decoration: none; color: inherit; height: 100%; transition: border-color .15s, transform .15s; }
.type-tile:hover { border-color: var(--bb-yellow-600); transform: translateY(-2px); color: inherit; }
.type-tile .ti { width: 2.8rem; height: 2.8rem; border-radius: .6rem; background: var(--bb-navy); color: var(--bb-yellow); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }

.step-card { background: #fff; border-radius: var(--bb-radius); padding: 1.5rem; border: 1px solid var(--bb-line); height: 100%; box-shadow: var(--bb-shadow); }
.step-num { width: 2.5rem; height: 2.5rem; border-radius: .5rem; background: var(--bb-yellow); color: var(--bb-navy); font-family: var(--bb-display); font-weight: 900; display: inline-flex; align-items: center; justify-content: center; margin-bottom: .9rem; }

.dark-band { background: var(--bb-navy); color: #fff; border-radius: 1.25rem; padding: 3rem; position: relative; overflow: hidden; }
.dark-band h2, .dark-band h3 { color: #fff; }
.dark-band::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 18px; background: var(--bb-stripes); }
.dark-band .muted { color: rgba(255, 255, 255, .7) !important; }

.results-layout { display: grid; grid-template-columns: 1fr 42%; gap: 1.25rem; align-items: start; }
.results-map { position: sticky; top: 5rem; height: calc(100vh - 6.5rem); border-radius: var(--bb-radius); border: 1px solid var(--bb-line); z-index: 0; }
@media (max-width: 1199.98px) { .results-layout { grid-template-columns: 1fr; } .results-map { position: relative; top: 0; height: 320px; order: -1; } }
.filter-panel { background: #fff; border: 1px solid var(--bb-line); border-radius: var(--bb-radius); padding: 1rem; box-shadow: var(--bb-shadow); }

.gallery-main { aspect-ratio: 16 / 9; border-radius: var(--bb-radius); background: #e8ecf3 center / cover; box-shadow: var(--bb-shadow); }
.gallery-thumbs { display: flex; gap: .5rem; margin-top: .6rem; overflow-x: auto; }
.gallery-thumbs button { border: 2px solid transparent; padding: 0; border-radius: .5rem; overflow: hidden; flex-shrink: 0; background: none; }
.gallery-thumbs button.active { border-color: var(--bb-yellow); }
.gallery-thumbs img { width: 88px; height: 56px; object-fit: cover; display: block; }
.spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.spec { background: #fff; border: 1px solid var(--bb-line); border-radius: .7rem; padding: .75rem .85rem; }
.spec .l { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--bb-muted); font-weight: 700; }
.spec .v { font-weight: 700; margin-top: .15rem; }
.sticky-quote { position: sticky; top: 5.25rem; }
.price-big { font-family: var(--bb-display); font-weight: 900; font-size: 2rem; letter-spacing: -.03em; line-height: 1; }

.agent-chip { display: flex; align-items: center; gap: .75rem; background: #fff; border: 1px solid var(--bb-line); border-radius: .8rem; padding: .7rem .85rem; }
.agent-chip img { width: 2.8rem; height: 2.8rem; border-radius: 50%; object-fit: cover; }

.pub-foot { background: #0a1321; color: rgba(255, 255, 255, .6); padding: 3rem 0 2rem; font-size: .88rem; }
.pub-foot h6 { color: #fff; font-family: var(--bb-display); }
.pub-foot a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.pub-foot a:hover { color: var(--bb-yellow); }
.wa-fab { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1040; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; box-shadow: 0 16px 30px -10px rgba(37, 211, 102, .8); text-decoration: none; }
.wa-fab:hover { color: #fff; transform: scale(1.06); }

.thanks-card { max-width: 560px; margin: 4rem auto; background: #fff; border-radius: 1.25rem; padding: 2.5rem 2rem; text-align: center; box-shadow: var(--bb-shadow-lg); border-top: 8px solid var(--bb-yellow); }
.thanks-card .ic { width: 5rem; height: 5rem; border-radius: 50%; background: #e3f5ea; color: #16784a; display: inline-flex; align-items: center; justify-content: center; font-size: 2.4rem; margin-bottom: 1rem; }

/* Proposal document (public + print) */
.proposal-doc { max-width: 960px; margin: 2rem auto; background: #fff; border-radius: 1rem; box-shadow: var(--bb-shadow-lg); overflow: hidden; }
.proposal-doc .pd-head { background: var(--bb-navy); color: #fff; padding: 2rem 2.25rem; position: relative; }
.proposal-doc .pd-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--bb-stripes); }
.proposal-doc .pd-head h1 { color: #fff; font-size: 1.8rem; }
.proposal-doc .pd-body { padding: 2rem 2.25rem; }
.pd-item { display: grid; grid-template-columns: 180px 1fr auto; gap: 1.25rem; padding: 1.1rem 0; border-bottom: 1px solid var(--bb-line); align-items: start; }
.pd-item img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: .6rem; }
@media (max-width: 767.98px) { .pd-item { grid-template-columns: 1fr; } .proposal-doc .pd-head, .proposal-doc .pd-body { padding: 1.5rem 1.25rem; } .dark-band { padding: 2rem 1.5rem; } .kv dd { text-align: left; } }
@media print {
    body { background: #fff !important; }
    .no-print { display: none !important; }
    .proposal-doc { box-shadow: none; margin: 0; max-width: none; border-radius: 0; }
    .proposal-doc .pd-head { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .pd-item { break-inside: avoid; }
}

.leaflet-popup-content { margin: .6rem .75rem; font-family: var(--bs-body-font-family); }
.map-pin { background: var(--bb-navy); color: var(--bb-yellow); border: 2px solid var(--bb-yellow); border-radius: .4rem; font: 800 11px/1 ui-monospace, Menlo, monospace; padding: 4px 6px; white-space: nowrap; box-shadow: 0 4px 10px rgba(0, 0, 0, .3); text-align: center; }
.map-pin.is-active { background: var(--bb-yellow); color: var(--bb-navy); }

/* AdminLTE's clearfix ::after becomes a flex item and pushes header links to the middle. */
.card-header.d-flex::after { display: none; }
.card-header.d-flex > .card-title { margin-bottom: 0; }

/* ---------- Marketing kit ---------- */
.mk-qr { width: 132px; height: 132px; border-radius: .75rem; background: #fff; padding: 6px; flex: none; image-rendering: pixelated; }
.mk-pdf { flex: none; width: 72px; height: 92px; border-radius: .6rem; background: var(--bb-navy, #0f1b2d); color: #ffc400; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 2rem; line-height: 1; box-shadow: 6px 6px 0 #ffc400; }
.mk-pdf span { font-size: .7rem; font-weight: 800; letter-spacing: .1em; color: #fff; margin-top: .35rem; }
.mk-thumb { position: relative; border-radius: .75rem; overflow: hidden; background: #e8e6df; box-shadow: 0 1px 2px rgba(15, 27, 45, .08), 0 8px 24px -12px rgba(15, 27, 45, .35); transition: transform .15s ease, box-shadow .15s ease; }
.mk-thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.mk-poster:hover .mk-thumb { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(15, 27, 45, .08), 0 14px 30px -12px rgba(15, 27, 45, .45); }
.mk-video { width: 100%; display: block; border-radius: .75rem; background: #0f1b2d; object-fit: cover; }
.mk-caption { border: 1px solid rgba(15, 27, 45, .1); border-radius: .75rem; padding: .9rem 1rem; background: #fbfaf7; }
.mk-caption-text { white-space: pre-line; font-size: .85rem; color: #3a4456; }
@media (max-width: 575.98px) {
    .mk-qr { width: 96px; height: 96px; }
}

/* ---------- Help center ---------- */
.help-hero { background: #0f1b2d; border-radius: 1rem; padding: 1.25rem; color: #fff; position: relative; overflow: hidden; }
.help-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: repeating-linear-gradient(-45deg, #ffc400 0 12px, #0f1b2d 12px 24px); }
.help-search { position: relative; }
.help-search i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #6b7486; }
.help-search input { padding-left: 2.6rem; border: 0; border-radius: .75rem; }
.help-link { display: flex; align-items: center; gap: .75rem; padding: .65rem .75rem; border-radius: .6rem; color: inherit; text-decoration: none; }
.help-link:hover { background: #f6f5f1; color: inherit; }
.help-link-icon { flex: none; width: 2.2rem; height: 2.2rem; border-radius: .6rem; background: #fff4cc; color: #0f1b2d; display: inline-flex; align-items: center; justify-content: center; }
.help-article { font-size: 1rem; line-height: 1.65; max-width: 78ch; }
.help-article h2 { font-size: 1.3rem; margin: 1.8rem 0 .7rem; padding-top: .2rem; }
.help-article h2:first-child { margin-top: 0; }
.help-article h3 { font-size: 1.08rem; margin: 1.4rem 0 .5rem; }
.help-article ol, .help-article ul { padding-left: 1.3rem; }
.help-article li { margin-bottom: .3rem; }
.help-article code { background: #f1efe8; color: #0f1b2d; padding: .1rem .35rem; border-radius: .3rem; font-size: .88em; }
.help-article table { font-size: .9rem; }
.help-shot { display: block; margin: 1rem 0 1.25rem; }
.help-shot img { max-width: 100%; height: auto; border-radius: .6rem; border: 1px solid rgba(15, 27, 45, .12); box-shadow: 0 10px 28px -16px rgba(15, 27, 45, .45); }
.help-article blockquote { border-left: 4px solid #c9ced8; background: #f6f5f1; padding: .75rem 1rem; border-radius: 0 .6rem .6rem 0; margin: 1rem 0; }
.help-article blockquote p:last-child { margin-bottom: 0; }
.help-article .callout-tip { border-left-color: #1f9d55; background: #eaf7ef; }
.help-article .callout-note { border-left-color: #2f6fdb; background: #eaf1fd; }
.help-article .callout-important { border-left-color: #ff6b1a; background: #fff1e8; }
.help-toc { position: sticky; top: 1rem; }
.help-toc-home { display: block; font-weight: 600; padding: .45rem .6rem; color: inherit; text-decoration: none; }
.help-toc-section { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: #6b7486; padding: .8rem .6rem .25rem; }
.help-toc-link { display: block; font-size: .88rem; padding: .35rem .6rem; border-radius: .45rem; color: #3a4456; text-decoration: none; }
.help-toc-link:hover { background: #f6f5f1; color: #0f1b2d; }
.help-toc-link.active { background: #ffc400; color: #0f1b2d; font-weight: 600; }
.help-pager { display: flex; flex-direction: column; gap: .15rem; padding: .85rem 1rem; border-radius: .75rem; background: #fff; border: 1px solid rgba(15, 27, 45, .1); color: inherit; text-decoration: none; }
.help-pager:hover { border-color: #ffc400; color: inherit; }
@media (max-width: 991.98px) { .help-toc { position: static; } }
/* In-page help modal */
#helpModal .modal-header { align-items: flex-start; }
#helpModal .help-article { max-width: none; }
.help-modal-kicker { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: #6b7486; }
.help-modal-summary { font-size: 1.05rem; color: #3a4456; }
.help-modal-related { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem; }

/* Help video walkthroughs */
.help-video { background: #0d1b34; border-radius: var(--bs-card-inner-border-radius, .5rem) var(--bs-card-inner-border-radius, .5rem) 0 0; padding: .6rem .6rem .7rem; }
.help-video video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: .4rem; background: #000; }
.help-video-label { color: #ffc53d; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 .45rem .15rem; }
.help-video-modal { border-radius: .5rem; margin-bottom: 1rem; }
.help-video-badge { display: inline-flex; align-items: center; gap: .2rem; margin-left: .35rem; padding: .05rem .45rem; border-radius: 999px; background: #fff4d1; color: #8a5a00; font-size: .68rem; font-weight: 700; vertical-align: middle; }