:root {
    --fs-navy: #0d2a4a;
    --bs-primary: #1f5fa8;
    --bs-primary-rgb: 31, 95, 168;
    --bs-link-color: #1f5fa8;
    --bs-link-color-rgb: 31, 95, 168;
}

html { font-size: 16px; }
body { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* Installed PWA on iPhone: the page extends under the status bar (black-translucent), so push the
   navbar's content below it and let the navy fill the notch area. */
.fs-navbar { background: var(--fs-navy); padding-top: calc(.5rem + env(safe-area-inset-top, 0px)); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
.offcanvas.offcanvas-start { padding-top: env(safe-area-inset-top, 0px); }
.fs-main { max-width: 1140px; padding-left: max(.75rem, env(safe-area-inset-left, 0px)); padding-right: max(.75rem, env(safe-area-inset-right, 0px)); }

/* ---------- Brand / footer ---------- */
.fs-brand-logo { height: 28px; width: auto; max-width: 140px; object-fit: contain; border-radius: 4px; background: rgba(255,255,255,.9); padding: 2px 4px; }
.fs-footer { color: var(--bs-secondary-color); padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px)); }
.fs-footer a { color: inherit; text-decoration: none; font-weight: 600; }
.fs-login-page .fs-footer { color: rgba(255,255,255,.75); }
.fs-login-page .fs-footer a { color: #fff; }

/* ---------- Login ---------- */
.fs-login-page { background: var(--fs-navy) url('/img/login-bg.svg') center / cover no-repeat; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.fs-login-page .fs-main { flex: 1 1 auto; display: flex; align-items: flex-start; padding-top: calc(clamp(1.5rem, 9vh, 7rem) + env(safe-area-inset-top, 0px)) !important; padding-bottom: 2rem !important; }
@media (max-width: 991.98px) {
    .fs-login-page .fs-main { padding-top: calc(1rem + env(safe-area-inset-top, 0px)) !important; }
}
.fs-login-hero { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.45); }
.fs-login-logo { height: 40px; width: auto; max-width: 160px; object-fit: contain; background: rgba(255,255,255,.92); padding: 3px 6px; }
.fs-login-hero h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 700; letter-spacing: -.01em; }
.fs-login-hero p { font-size: clamp(1rem, 2vw, 1.25rem); max-width: 34rem; opacity: .9; }
.fs-login-card { background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.5); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.fs-login-card .form-control { background: rgba(255,255,255,.85); }
.fs-login-foot { color: rgba(255,255,255,.75); }
.fs-login-foot a { color: #fff; }
@media (max-width: 991.98px) {
    .fs-login-hero { text-align: center; margin-bottom: 0; }
    .fs-login-hero h1 { margin-bottom: .25rem !important; }
    .fs-login-hero p { margin-left: auto; margin-right: auto; }
    .fs-login-card { background: rgba(255,255,255,.88); }
    .fs-login-page { background-position: 38% center; }
}

/* ---------- Maps ---------- */
.fs-map { width: 100%; height: 260px; }
.fs-map-tall { height: calc(100vh - 220px); min-height: 360px; }
.fs-map-list { max-height: calc(100vh - 220px); overflow-y: auto; }
@media (max-width: 991.98px) {
    .fs-map-tall { height: 60vh; min-height: 300px; }
    .fs-map-list { max-height: none; }
}
.fs-address-search { width: 100%; display: block; }
.fs-address-search-wrap gmp-place-autocomplete { --gmp-mat-color-surface: #fff; border-radius: .375rem; }
.fs-legend { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c); vertical-align: middle; margin-right: 2px; }
.fs-map .gm-style .small a { color: #1f5fa8; }

/* ---------- Install guide ---------- */
.fs-steps li { margin-bottom: .5rem; }
.fs-steps li::marker { font-weight: 700; color: #1f5fa8; }

/* ---------- PDF viewer ---------- */
.fs-pdf-toolbar { position: sticky; top: calc(56px + env(safe-area-inset-top, 0px)); z-index: 5; background: var(--bs-body-bg); }
.fs-pdf-pages { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.fs-pdf-pages canvas { background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.2); max-width: 100%; height: auto; }

.btn-primary { --bs-btn-bg: #1f5fa8; --bs-btn-border-color: #1f5fa8; --bs-btn-hover-bg: #184b85; --bs-btn-hover-border-color: #184b85; --bs-btn-active-bg: #133c6a; }
.btn-outline-primary { --bs-btn-color: #1f5fa8; --bs-btn-border-color: #1f5fa8; --bs-btn-hover-bg: #1f5fa8; --bs-btn-hover-border-color: #1f5fa8; --bs-btn-active-bg: #1f5fa8; }

/* Bigger tap targets on phones */
@media (max-width: 575.98px) {
    .btn { padding-top: .55rem; padding-bottom: .55rem; }
    .form-control, .form-select { min-height: 2.75rem; }
    .list-group-item-action { padding-left: .9rem; padding-right: .9rem; }
}

.fs-prewrap { white-space: pre-wrap; }
.min-w-0 { min-width: 0; }

.fs-row-link { cursor: pointer; }

.fs-timeline li:last-child { border-bottom: 0 !important; }

.fs-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Signature pad */
.fs-sigpad-wrap { border: 1px dashed #9aa5b1; border-radius: .5rem; background: #fff; position: relative; }
.fs-sigpad-wrap::after { content: "Sign here"; position: absolute; left: .75rem; bottom: .4rem; font-size: .75rem; color: #9aa5b1; pointer-events: none; }
.fs-sigpad { display: block; width: 100%; height: 180px; touch-action: none; border-radius: .5rem; }

/* Input group "Now" buttons shouldn't shrink the input too much on phones */
.input-group > .form-control[type="datetime-local"] { min-width: 0; }