html,
body {
    background: #f4f6f8;
    color: #1f2933;
    font-family: Arial, Helvetica, sans-serif;
    max-width: 100%;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

a,
.btn-link {
    color: #1769aa;
}

.btn-primary {
    background-color: #1769aa;
    border-color: #1769aa;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem rgba(23, 105, 170, 0.28);
}

.content {
    padding-top: 1.25rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #2e7d32;
}

.invalid {
    outline: 1px solid #c62828;
}

.validation-message {
    color: #c62828;
    font-size: 0.9rem;
}

.page-header {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.portal-header-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.portal-user-context {
    color: #667085;
    display: inline-block;
    font-size: 0.9rem;
    margin-top: 0.35rem;
}

.page-header h1 {
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 700;
    margin: 0;
}

.eyebrow {
    color: #667085;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
    margin: 0 0 0.25rem;
    text-transform: uppercase;
}

.stats-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: 1rem;
}

.stat-card,
.list-panel,
.map-panel,
.report-form,
.coordinates-card,
.map-sidebar {
    background: #fff;
    border: 1px solid #d9e2ec;
    border-radius: 8px;
}

.stat-card {
    color: inherit;
    cursor: pointer;
    padding: 1rem;
    text-align: left;
}

.stat-card:hover,
.stat-card:focus,
.stat-card.active {
    border-color: #1769aa;
    box-shadow: 0 0 0 2px rgba(23, 105, 170, 0.12);
}

.stat-card span {
    color: #667085;
    display: block;
    font-size: 0.9rem;
}

.stat-card strong {
    display: block;
    font-size: 2rem;
    line-height: 1.1;
    margin-top: 0.35rem;
}

.work-surface {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
}

.list-panel,
.map-panel,
.report-form,
.map-sidebar {
    padding: 1rem;
}

.section-title {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.section-title h2 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}

.section-title span {
    color: #667085;
    font-size: 0.85rem;
}

.report-row {
    align-items: flex-start;
    border-top: 1px solid #e6edf3;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 1rem 0;
}

.report-row:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.report-row h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
}

.report-row p {
    margin: 0 0 0.5rem;
}

.meta-row {
    color: #667085;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.85rem;
    gap: 0.65rem;
}

.status-actions {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 130px;
}

.status-pill {
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
}

.status-submitted {
    background: #fff4cc;
    color: #7a5900;
}

.status-inreview {
    background: #dff3ff;
    color: #075985;
}

.status-assigned {
    background: #e8f5e9;
    color: #1b5e20;
}

.status-resolved {
    background: #e7f6ed;
    color: #0f6b3a;
}

.status-rejected {
    background: #fde7e9;
    color: #9f1239;
}

.map-canvas {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.32) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.32) 1px, transparent 1px),
        linear-gradient(135deg, #d9ead3, #b8d8d8 45%, #e7d8b1);
    background-size: 32px 32px, 32px 32px, cover;
    border: 1px solid #cad6df;
    border-radius: 8px;
    min-height: 360px;
    position: relative;
}

.map-canvas-large {
    min-height: 620px;
}

.map-pin {
    background: #c62828;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
    height: 22px;
    position: absolute;
    transform: translate(-50%, -50%);
    width: 22px;
}

.report-form {
    display: grid;
    gap: 1rem;
    max-width: 920px;
}

.report-form label {
    color: #344054;
    display: grid;
    font-weight: 700;
    gap: 0.35rem;
}

.form-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.photo-input {
    align-items: center;
    background: #f8fafc;
    border: 1px dashed #b6c2cf;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem;
}

.photo-input span {
    color: #667085;
}

.coordinates-card {
    padding: 1rem;
}

.submit-button {
    justify-self: start;
    min-width: 180px;
}

.citizen-report-shell {
    display: grid;
    gap: 0.85rem;
    margin: 0 auto;
    max-width: 520px;
    min-width: 0;
    padding-bottom: 5.75rem;
    width: 100%;
}

.report-success-panel {
    align-items: center;
    background: #e7f6ed;
    border: 1px solid #a9ddb9;
    border-radius: 8px;
    color: #0f5132;
    display: grid;
    gap: 0.85rem;
    grid-template-columns: auto minmax(0, 1fr);
    margin: 0 auto 0.85rem;
    max-width: 520px;
    padding: 1rem;
    width: 100%;
}

.report-success-panel h2 {
    color: #0f5132;
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
}

.report-success-panel p {
    margin: 0.2rem 0 0;
}

.report-success-panel .secondary-photo-button {
    grid-column: 1 / -1;
}

.success-mark {
    align-items: center;
    background: #16834b;
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 1.2rem;
    font-weight: 700;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.capture-panel,
.quick-options-panel,
.report-details-panel,
.settings-panel {
    background: #fff;
    border: 1px solid #d9e2ec;
    border-radius: 8px;
    min-width: 0;
    padding: 1rem;
}

.capture-panel {
    padding: 0.75rem;
}

.capture-topbar,
.settings-header {
    align-items: flex-start;
    display: flex;
    gap: 0.55rem;
    justify-content: space-between;
}

.mobile-brand-title {
    align-items: center;
    display: flex;
    gap: 0.55rem;
    min-width: 0;
}

.mobile-brand-title img {
    border-radius: 8px;
    flex: 0 0 auto;
    height: 34px;
    width: 34px;
}

.capture-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-end;
}

.capture-heading {
    margin-top: 0.45rem;
}

.capture-heading h1,
.settings-header h1 {
    font-size: 1.28rem;
    font-weight: 700;
    line-height: 1.05;
    margin: 0;
}

.capture-heading h1 {
    font-size: 1.38rem;
}

.capture-intro {
    color: #667085;
    font-size: 0.82rem;
    line-height: 1.25;
    margin: 0.2rem 0 0;
}

.settings-link {
    border: 1px solid #b8c7d6;
    border-radius: 8px;
    color: #1769aa;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.45rem 0.65rem;
    text-decoration: none;
}

.icon-link {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #b8c7d6;
    border-radius: 8px;
    color: #1769aa;
    display: inline-flex;
    font-size: 1rem;
    font-weight: 700;
    height: 36px;
    justify-content: center;
    line-height: 1;
    text-decoration: none;
    width: 36px;
}

.language-chip {
    align-items: center;
    background: #eef6ff;
    border: 1px solid #9cc7ec;
    border-radius: 8px;
    color: #155f9c;
    display: inline-flex;
    gap: 0.3rem;
    font-size: 0.84rem;
    font-weight: 800;
    height: 36px;
    justify-content: center;
    min-width: 56px;
    padding: 0 0.45rem;
    text-decoration: none;
}

.language-chip span {
    font-size: 1rem;
    line-height: 1;
}

.icon-link:hover,
.icon-link:focus,
.language-chip:hover,
.language-chip:focus {
    border-color: #1769aa;
    color: #125487;
}

.report-step-strip {
    display: grid;
    gap: 0.4rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0.65rem;
}

.report-step-strip span {
    background: #f8fafc;
    border: 1px solid #d9e2ec;
    border-radius: 999px;
    color: #667085;
    font-size: 0.8rem;
    font-weight: 700;
    min-width: 0;
    overflow: hidden;
    padding: 0.42rem 0.5rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-step-strip span.ready {
    background: #e7f6ed;
    border-color: #b7e1c4;
    color: #0f6b3a;
}

.mobile-flow-section {
    display: grid;
    gap: 0.6rem;
    margin-top: 0.95rem;
}

.flow-section-title {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
}

.flow-section-title h2 {
    color: #102a43;
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}

.flow-section-title span {
    color: #667085;
    font-size: 0.82rem;
    font-weight: 700;
}

.independence-notice {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    color: #7c2d12;
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0.85rem 0 0;
    padding: 0.65rem 0.75rem;
}

.independence-notice a {
    color: #155f9c;
    white-space: nowrap;
}

.document-shell {
    display: grid;
    gap: 1rem;
    min-height: calc(100vh - 6rem);
}

.mobile-document-shell {
    margin: 0 auto;
    max-width: 760px;
    width: 100%;
}

.document-header {
    align-items: flex-start;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
}

.document-header h1 {
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.15;
    margin: 0;
}

.document-frame {
    background: #fff;
    border: 1px solid #d9e2ec;
    border-radius: 8px;
    min-height: calc(100vh - 11rem);
    width: 100%;
}

.camera-dropzone {
    align-items: center;
    background: #f8fafc;
    border: 2px dashed #9eb1c2;
    border-radius: 8px;
    cursor: pointer;
    display: grid;
    gap: 0.45rem;
    justify-items: center;
    min-height: 160px;
    overflow: hidden;
    padding: 0.9rem;
    position: relative;
    text-align: center;
    width: 100%;
}

.native-photo-actions {
    display: grid;
    gap: 0.6rem;
    min-width: 0;
    width: 100%;
}

.native-photo-button {
    border-style: solid;
    width: 100%;
}

.secondary-photo-button {
    background: #eef6ff;
    border: 1px solid #9cc7ec;
    border-radius: 8px;
    color: #155f9c;
    font-weight: 700;
    min-height: 48px;
}

.secondary-photo-button:disabled,
.native-photo-button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.camera-dropzone input[type="file"] {
    cursor: pointer;
    inset: 0;
    opacity: 0;
    position: absolute;
}

.camera-dropzone strong {
    color: #102a43;
    font-size: 1.05rem;
}

.camera-dropzone small,
.feedback-toggle small,
.coordinate-preview span,
.status-tile span,
.selected-photo-name {
    color: #667085;
    font-size: 0.86rem;
}

.camera-icon {
    border: 4px solid #1769aa;
    border-radius: 8px;
    display: block;
    height: 46px;
    position: relative;
    width: 66px;
}

.camera-icon::before {
    background: #1769aa;
    border-radius: 8px 8px 0 0;
    content: "";
    height: 10px;
    left: 14px;
    position: absolute;
    top: -13px;
    width: 24px;
}

.camera-icon::after {
    border: 4px solid #1769aa;
    border-radius: 50%;
    content: "";
    height: 22px;
    left: 18px;
    position: absolute;
    top: 8px;
    width: 22px;
}

.capture-status-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0.75rem;
}

.photo-selection-summary {
    align-items: center;
    background: #eef6ff;
    border: 1px solid #c8def2;
    border-radius: 8px;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    margin-top: 0.65rem;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    padding: 0.6rem 0.7rem;
}

.photo-preview-strip {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.photo-preview-tile {
    aspect-ratio: 1;
    background: #f8fafc;
    border: 1px solid #d9e2ec;
    border-radius: 8px;
    margin: 0;
    min-width: 0;
    overflow: hidden;
    position: relative;
}

.photo-preview-tile img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.remove-photo-button {
    align-items: center;
    background: rgba(15, 23, 42, 0.78);
    border: 2px solid #fff;
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 1rem;
    font-weight: 700;
    height: 28px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    position: absolute;
    right: 0.35rem;
    top: 0.35rem;
    width: 28px;
}

.remove-photo-button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.photo-selection-summary strong {
    color: #155f9c;
}

.photo-selection-summary button {
    background: transparent;
    border: 0;
    color: #a33a3a;
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0;
}

.status-tile {
    background: #f8fafc;
    border: 1px solid #d9e2ec;
    border-radius: 8px;
    display: grid;
    gap: 0.2rem;
    min-height: 74px;
    padding: 0.75rem;
    text-align: left;
}

.status-action {
    color: inherit;
    cursor: pointer;
}

.status-tile strong {
    color: #102a43;
    font-size: 1rem;
}

.location-card {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #d9e2ec;
    border-radius: 8px;
    color: inherit;
    display: flex;
    gap: 0.75rem;
    min-height: 72px;
    padding: 0.75rem;
    text-align: left;
    width: 100%;
}

.location-card.ready {
    background: #e7f6ed;
    border-color: #b7e1c4;
}

.location-card:disabled {
    cursor: wait;
    opacity: 0.78;
}

.location-card strong,
.location-card small {
    display: block;
}

.location-card strong {
    color: #102a43;
}

.location-card small {
    color: #667085;
    font-size: 0.86rem;
    margin-top: 0.1rem;
}

.location-pin {
    align-items: center;
    background: #eef6ff;
    border-radius: 999px;
    color: #1769aa;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.25rem;
    font-weight: 700;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.quick-options-panel,
.details-content,
.settings-page,
.settings-form {
    display: grid;
    gap: 0.85rem;
}

.category-choice-grid {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.category-choice {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #d9e2ec;
    border-radius: 8px;
    color: #344054;
    display: inline-flex;
    font-weight: 700;
    justify-content: center;
    min-height: 46px;
    padding: 0.55rem 0.45rem;
    text-align: center;
    width: 100%;
}

.category-choice.selected {
    background: #e7f6ed;
    border-color: #16834b;
    color: #0f6b3a;
}

.category-choice:focus {
    outline: 3px solid rgba(23, 105, 170, 0.28);
    outline-offset: 2px;
}

.category-choice:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.feedback-toggle {
    align-items: flex-start;
    display: flex;
    gap: 0.75rem;
}

.switch-toggle {
    align-items: center;
    cursor: pointer;
}

.switch-toggle input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.switch-toggle i {
    background: #cbd5e1;
    border-radius: 999px;
    flex: 0 0 auto;
    height: 28px;
    position: relative;
    width: 50px;
}

.switch-toggle i::after {
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.28);
    content: "";
    height: 22px;
    left: 3px;
    position: absolute;
    top: 3px;
    transition: transform 0.16s ease;
    width: 22px;
}

.switch-toggle input:checked + i {
    background: #1769aa;
}

.switch-toggle input:checked + i::after {
    transform: translateX(22px);
}

.switch-toggle input:focus + i {
    outline: 3px solid rgba(23, 105, 170, 0.28);
    outline-offset: 2px;
}

.feedback-toggle span {
    display: grid;
    gap: 0.15rem;
}

.compact-label {
    color: #344054;
    display: grid;
    font-weight: 700;
    gap: 0.35rem;
}

.report-details-panel summary {
    cursor: pointer;
    font-weight: 700;
}

.details-content {
    margin-top: 0.85rem;
}

.coordinate-preview {
    background: #f8fafc;
    border: 1px solid #e6edf3;
    border-radius: 8px;
    display: grid;
    gap: 0.15rem;
    padding: 0.75rem;
}

.submit-report-button {
    align-items: center;
    background: #1769aa;
    border: 0;
    border-radius: 8px;
    color: #fff;
    display: inline-flex;
    font-weight: 700;
    justify-content: center;
    min-height: 52px;
    padding: 0.75rem 1rem;
    text-decoration: none;
    width: 100%;
}

.submit-report-button:hover {
    background: #125487;
    color: #fff;
}

.submit-report-button:disabled {
    background: #9fb3c8;
    cursor: not-allowed;
}

.submit-report-sticky {
    background: rgba(244, 246, 248, 0.94);
    bottom: 0;
    left: 0;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    position: fixed;
    right: 0;
    z-index: 10;
}

.submit-report-sticky .submit-report-button {
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
    margin: 0 auto;
    max-width: 520px;
}

.submit-readiness {
    display: grid;
    gap: 0.45rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.submit-readiness span {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    color: #9a3412;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.55rem 0.65rem;
}

.submit-readiness span.ready {
    background: #e7f6ed;
    border-color: #b7e1c4;
    color: #0f6b3a;
}

.settings-page {
    margin: 0 auto;
    max-width: 560px;
    padding-bottom: 1.5rem;
}

.settings-page-with-sticky-action {
    padding-bottom: 5.75rem;
}

.settings-panel h2 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
}

.settings-panel-title {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.settings-panel-title h2 {
    margin: 0;
}

.settings-panel p {
    color: #667085;
    margin: 0 0 0.85rem;
}

.local-photo-list {
    border: 1px solid #e6edf3;
    border-radius: 8px;
    display: grid;
    margin-top: 0.75rem;
    overflow: hidden;
}

.local-photo-row {
    align-items: center;
    background: #fff;
    border-top: 1px solid #e6edf3;
    display: grid;
    gap: 0.65rem;
    grid-template-columns: auto minmax(0, 1fr);
    margin: 0;
    padding: 0.7rem;
}

.local-photo-row:first-child {
    border-top: 0;
}

.local-photo-row input {
    height: 20px;
    width: 20px;
}

.local-photo-row span {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.local-photo-row strong {
    color: #102a43;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.local-photo-row small {
    color: #667085;
}

.photo-cleanup-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.photo-cleanup-actions span {
    color: #667085;
    font-size: 0.88rem;
    font-weight: 700;
    margin-right: auto;
}

.delete-confirm-panel {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.75rem;
}

.delete-confirm-panel p {
    color: #7c2d12;
    flex-basis: 100%;
    font-weight: 700;
    margin: 0;
}

.map-page {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) 320px;
}

.portal-layout {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) 360px;
}

.portal-workspace {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) 360px;
}

.portal-main-column {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.portal-workspace > .portal-detail-panel {
    position: sticky;
    top: 1rem;
}

.dashboard-panel,
.portal-map-panel,
.outreach-panel {
    background: #fff;
    border: 1px solid #d9e2ec;
    border-radius: 8px;
    margin-bottom: 1rem;
    padding: 1rem;
}

.portal-main-column > .portal-map-panel,
.portal-main-column > .outreach-panel {
    margin-bottom: 0;
}

.portal-layout > .portal-map-panel,
.portal-layout > .outreach-panel {
    margin-bottom: 0;
}

.period-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.period-filter button {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: #344054;
    font-weight: 700;
    min-height: 34px;
    padding: 0.35rem 0.65rem;
}

.period-filter button.active {
    background: #1769aa;
    border-color: #1769aa;
    color: #fff;
}

.dashboard-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-grid article {
    border: 1px solid #e6edf3;
    border-radius: 8px;
    display: grid;
    gap: 0.65rem;
    padding: 0.85rem;
}

.dashboard-grid h3 {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0;
}

.outreach-panel p {
    color: #667085;
    margin: 0 0 0.85rem;
}

.outreach-list {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.outreach-item {
    background: #f8fafc;
    border: 1px solid #d9e2ec;
    border-radius: 8px;
    color: inherit;
    display: grid;
    gap: 0.15rem;
    min-height: 86px;
    padding: 0.75rem;
    text-align: left;
}

.outreach-item:hover,
.outreach-item:focus {
    border-color: #1769aa;
    color: #1769aa;
}

.outreach-item span,
.outreach-item small {
    color: #667085;
    font-size: 0.84rem;
}

.metric-bar {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: inherit;
    cursor: pointer;
    display: grid;
    gap: 0.5rem;
    grid-template-columns: minmax(100px, 0.9fr) minmax(80px, 1fr) auto;
    padding: 0.2rem 0.25rem;
    text-align: left;
    width: 100%;
}

.metric-bar:hover,
.metric-bar:focus {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.metric-bar.active {
    background: #eef6ff;
    border-color: #1769aa;
}

.metric-bar span {
    color: #344054;
    font-size: 0.88rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.metric-bar div {
    background: #eef2f6;
    border-radius: 999px;
    height: 10px;
    overflow: hidden;
}

.metric-bar i {
    background: #1769aa;
    display: block;
    height: 100%;
}

.metric-bar strong {
    font-size: 0.9rem;
}

.active-dashboard-filter {
    align-items: center;
    background: #eef6ff;
    border: 1px solid #b9d7f0;
    border-radius: 8px;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    margin: 0.85rem 0 1rem;
    padding: 0.65rem 0.75rem;
}

.active-dashboard-filter span {
    color: #184e77;
    font-weight: 700;
}

.active-dashboard-filter button {
    background: #fff;
    border: 1px solid #b9d7f0;
    border-radius: 8px;
    color: #1769aa;
    font-weight: 800;
    min-height: 34px;
    padding: 0.35rem 0.65rem;
}

.portal-form-stack,
.portal-user-admin {
    display: grid;
    gap: 1rem;
}

.portal-form-stack label,
.portal-form-grid label {
    color: #344054;
    display: grid;
    font-weight: 700;
    gap: 0.35rem;
}

.portal-form-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.portal-user-admin h3 {
    font-size: 1rem;
    margin: 0 0 0.75rem;
}

.portal-users-grid {
    min-height: 380px;
    width: 100%;
}

.portal-user-reset {
    border-top: 1px solid #d9e2ec;
    margin-top: 1rem;
    padding-top: 1rem;
}

.portal-user-reset h4 {
    font-size: 0.95rem;
    margin: 0 0 0.75rem;
}

.portal-template-editor {
    display: grid;
    gap: 0.85rem;
}

.portal-template-editor label {
    color: #344054;
    display: grid;
    font-weight: 700;
    gap: 0.35rem;
}

.template-scope-row {
    background: #f8fafc;
    border: 1px solid #d9e2ec;
    border-radius: 8px;
    display: grid;
    gap: 0.35rem;
    padding: 0.75rem;
}

.template-scope-row span,
.template-description {
    color: #667085;
    font-size: 0.88rem;
    margin: 0;
}

.portal-map-canvas {
    background:
        linear-gradient(90deg, rgba(23, 105, 170, 0.1) 1px, transparent 1px),
        linear-gradient(rgba(23, 105, 170, 0.1) 1px, transparent 1px),
        linear-gradient(135deg, #e8f5e9 0%, #d8edf4 48%, #f3ecd2 100%);
    background-size: 42px 42px, 42px 42px, cover;
    border: 1px solid #cad6df;
    border-radius: 8px;
    min-height: 340px;
    overflow: hidden;
    position: relative;
}

.portal-map-workspace {
    align-items: stretch;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.34fr);
}

.azure-report-map {
    border: 1px solid #cad6df;
    border-radius: 8px;
    min-height: 420px;
    overflow: hidden;
    width: 100%;
}

.azure-report-pin {
    border: 3px solid #fff;
    border-radius: 999px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
    cursor: pointer;
    height: 22px;
    padding: 0;
    width: 22px;
}

.azure-report-pin:hover,
.azure-report-pin:focus,
.azure-report-pin.selected {
    outline: 3px solid rgba(23, 105, 170, 0.28);
    outline-offset: 2px;
}

.azure-report-popup {
    color: #1f2933;
    display: grid;
    gap: 0.55rem;
    min-width: 210px;
    padding: 0.2rem;
}

.azure-report-popup strong {
    color: #102a43;
    font-size: 0.95rem;
}

.azure-report-popup .status-pill {
    justify-self: start;
}

.azure-report-popup dl {
    display: grid;
    gap: 0.35rem;
    margin: 0;
}

.azure-report-popup dl div {
    display: grid;
    gap: 0.1rem;
}

.azure-report-popup dt {
    color: #667085;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.azure-report-popup dd {
    margin: 0;
}

.portal-map-canvas::before {
    border: 1px solid rgba(23, 105, 170, 0.22);
    border-radius: 50%;
    content: "";
    height: 76%;
    left: 12%;
    position: absolute;
    top: 12%;
    width: 76%;
}

.portal-map-pin {
    align-items: center;
    border: 3px solid #fff;
    border-radius: 999px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
    cursor: pointer;
    display: inline-flex;
    height: 22px;
    justify-content: center;
    padding: 0;
    position: absolute;
    transform: translate(-50%, -50%);
    width: 22px;
    z-index: 1;
}

.portal-map-pin:hover,
.portal-map-pin:focus,
.portal-map-pin.selected {
    outline: 3px solid rgba(23, 105, 170, 0.28);
    outline-offset: 2px;
    z-index: 2;
}

.portal-map-pin span {
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.status-pin-submitted {
    background: #f6c343;
}

.status-pin-inreview {
    background: #2f80ed;
}

.status-pin-assigned {
    background: #27ae60;
}

.status-pin-resolved {
    background: #0f8f4d;
}

.status-pin-rejected {
    background: #d64545;
}

.map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.85rem;
}

.map-legend span {
    align-items: center;
    color: #344054;
    display: inline-flex;
    font-size: 0.88rem;
    gap: 0.35rem;
}

.map-legend i {
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #cbd5e1;
    display: inline-block;
    height: 12px;
    width: 12px;
}

.map-detail-panel {
    background: #f8fafc;
    border: 1px solid #d9e2ec;
    border-radius: 8px;
    min-width: 0;
    padding: 1rem;
}

.map-report-detail {
    display: grid;
    gap: 0.85rem;
}

.map-report-detail header {
    align-items: flex-start;
    display: grid;
    gap: 0.45rem;
}

.map-report-detail header strong {
    color: #102a43;
    font-size: 1rem;
}

.map-report-detail dl {
    display: grid;
    gap: 0.5rem;
    margin: 0;
}

.map-report-detail dl div {
    border-top: 1px solid #e6edf3;
    display: grid;
    gap: 0.15rem;
    padding-top: 0.5rem;
}

.map-report-detail dt {
    color: #667085;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.map-report-detail dd {
    margin: 0;
}

.map-report-detail h3 {
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
}

.map-report-detail p {
    margin: 0;
}

.portal-grid-panel,
.portal-detail-panel {
    background: #fff;
    border: 1px solid #d9e2ec;
    border-radius: 8px;
    min-width: 0;
    padding: 1rem;
}

.portal-grid {
    min-height: 520px;
}

.portal-grid .dxbl-grid-selected-row > td {
    background: #eaf4ff;
}

.portal-task {
    border-top: 1px solid #e6edf3;
    display: grid;
    gap: 0.65rem;
    padding: 0.9rem 0;
}

.portal-task:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.portal-task div:first-child {
    display: grid;
    gap: 0.15rem;
}

.portal-task strong {
    color: #102a43;
}

.portal-task span,
.portal-task small,
.empty-state {
    color: #667085;
}

.portal-task p {
    margin: 0;
}

.portal-task-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.portal-note {
    color: #344054;
    display: grid;
    font-weight: 700;
    gap: 0.35rem;
}

.work-order-panel {
    background: #f8fafc;
    border: 1px solid #d9e2ec;
    border-radius: 8px;
    display: grid;
    gap: 0.75rem;
    padding: 0.85rem;
}

.work-order-panel h3 {
    margin-bottom: 0;
}

.portal-report-detail {
    display: grid;
    gap: 0.85rem;
}

.portal-report-detail header {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
}

.portal-report-detail header strong {
    color: #102a43;
    font-size: 1.05rem;
}

.portal-report-detail dl {
    display: grid;
    gap: 0.5rem;
    margin: 0;
}

.portal-report-detail dl div {
    border-top: 1px solid #e6edf3;
    display: grid;
    gap: 0.15rem;
    padding-top: 0.5rem;
}

.portal-report-detail dt {
    color: #667085;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.portal-report-detail dd {
    margin: 0;
}

.portal-report-detail h3 {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
}

.portal-report-detail p {
    margin: 0;
}

.portal-photo {
    background: #f8fafc;
    border: 1px solid #d9e2ec;
    border-radius: 8px;
    margin: 0;
    overflow: hidden;
}

.portal-photo button {
    background: transparent;
    border: 0;
    cursor: zoom-in;
    display: block;
    min-height: 96px;
    padding: 0;
    position: relative;
    width: 100%;
}

.portal-photo-gallery {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}

.portal-photo img {
    aspect-ratio: 4 / 3;
    display: block;
    min-height: 96px;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.18s ease;
    width: 100%;
}

.portal-photo img.loaded {
    opacity: 1;
}

.portal-photo-loading {
    align-items: center;
    background: #eef4fb;
    color: #176fb0;
    display: flex;
    inset: 0;
    justify-content: center;
    position: absolute;
    z-index: 1;
}

.portal-photo figcaption {
    color: #667085;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.35rem 0.5rem;
    text-align: center;
}

.portal-photo-preview {
    display: grid;
    gap: 0.75rem;
}

.portal-photo-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.portal-photo-toolbar button,
.portal-photo-toolbar a {
    align-items: center;
    background: #fff;
    border: 1px solid #cfd8e3;
    border-radius: 8px;
    color: #1f2937;
    display: inline-flex;
    font-size: 0.92rem;
    font-weight: 700;
    justify-content: center;
    min-height: 36px;
    min-width: 40px;
    padding: 0.35rem 0.7rem;
    text-decoration: none;
}

.portal-photo-toolbar button:hover,
.portal-photo-toolbar a:hover {
    background: #f3f7fb;
    border-color: #98a9bc;
}

.portal-photo-toolbar span {
    color: #344054;
    font-size: 0.9rem;
    font-weight: 800;
    min-width: 48px;
    text-align: center;
}

.portal-photo-preview-stage {
    align-items: center;
    background: #0f172a;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    max-height: 76vh;
    min-height: 420px;
    overflow: auto;
    position: relative;
}

.portal-photo-preview-stage img {
    display: block;
    max-height: 72vh;
    max-width: 100%;
    object-fit: contain;
    opacity: 0;
    transform-origin: center center;
    transition: opacity 0.18s ease, transform 0.18s ease;
    width: 100%;
}

.portal-photo-preview-stage img.loaded {
    opacity: 1;
}

.portal-photo-preview-loading {
    align-items: center;
    color: #fff;
    display: grid;
    gap: 0.75rem;
    justify-items: center;
    position: absolute;
    z-index: 1;
}

.portal-reply-form {
    display: grid;
    gap: 0.85rem;
}

.portal-reply-form label {
    color: #344054;
    display: grid;
    font-weight: 700;
    gap: 0.35rem;
}

.portal-popup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.portal-history {
    border-top: 1px solid #d9e2ec;
    display: grid;
    gap: 0.65rem;
    margin-top: 0.25rem;
    padding-top: 0.85rem;
}

.portal-history article {
    border-left: 3px solid #1769aa;
    display: grid;
    gap: 0.15rem;
    padding-left: 0.65rem;
}

.portal-history strong {
    color: #102a43;
    font-size: 0.92rem;
}

.portal-history span {
    color: #667085;
    font-size: 0.82rem;
}

.portal-history small {
    color: #667085;
    font-size: 0.78rem;
}

.portal-history p {
    margin: 0.25rem 0 0;
}

.portal-detail-group {
    border-top: 1px solid #e6edf3;
    display: grid;
    gap: 0.45rem;
    padding-top: 0.65rem;
}

.portal-detail-group:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.portal-action-groups {
    border-top: 1px solid #d9e2ec;
    display: grid;
    gap: 0.75rem;
    padding-top: 0.85rem;
}

.portal-action-groups > div {
    display: grid;
    gap: 0.35rem;
}

.portal-action-hint {
    color: #667085;
    display: block;
    font-size: 0.82rem;
}

.login-shell {
    display: grid;
    min-height: calc(100vh - 4rem);
    place-items: center;
}

.login-panel {
    background: #fff;
    border: 1px solid #d9e2ec;
    border-radius: 8px;
    display: grid;
    gap: 1rem;
    max-width: 420px;
    padding: 1.25rem;
    width: 100%;
}

.login-panel h1 {
    font-size: 1.55rem;
    font-weight: 700;
    margin: 0;
}

.login-panel label {
    color: #344054;
    display: grid;
    font-weight: 700;
    gap: 0.35rem;
}

.login-contact {
    border-top: 1px solid #e6edf3;
    color: #475467;
    display: grid;
    gap: 0.25rem;
    padding-top: 0.9rem;
}

.login-contact a {
    color: #0f766e;
    font-weight: 700;
    text-decoration: none;
}

.login-link-button {
    display: inline-flex;
    justify-content: center;
    text-decoration: none;
}

.activation-link-output {
    display: grid;
    gap: 0.35rem;
    margin-top: 0.75rem;
}

.activation-link-output textarea {
    min-height: 5rem;
    resize: vertical;
}

.map-sidebar {
    align-self: start;
}

.map-sidebar h2 {
    font-size: 1.1rem;
    margin: 0 0 1rem;
}

.map-sidebar article {
    border-top: 1px solid #e6edf3;
    display: grid;
    gap: 0.2rem;
    padding: 0.75rem 0;
}

.map-sidebar article:first-of-type {
    border-top: 0;
}

.map-sidebar span,
.map-sidebar small {
    color: #667085;
}

.blazor-error-boundary {
    background: #b32121;
    color: white;
    padding: 1rem;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

@media (max-width: 900px) {
    .stats-grid,
    .work-surface,
    .map-page,
    .portal-map-workspace,
    .portal-workspace,
    .portal-layout,
    .dashboard-grid,
    .outreach-list,
    .portal-form-grid {
        grid-template-columns: 1fr;
    }

    .portal-workspace > .portal-detail-panel {
        position: static;
    }
}

@media (max-width: 640px) {
    .page-header,
    .report-row,
    .section-title,
    .photo-input {
        align-items: stretch;
        flex-direction: column;
    }

    .page-header {
        display: grid;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .status-actions {
        align-items: stretch;
        min-width: 0;
    }

    .capture-status-grid {
        grid-template-columns: 1fr;
    }

    .submit-readiness {
        grid-template-columns: 1fr;
    }

    .category-choice-grid {
        grid-template-columns: 1fr;
    }

    .settings-header,
    .document-header {
        display: grid;
    }

    .settings-link,
    .capture-actions {
        justify-self: start;
    }
}

.eko-landing {
    --landing-ink: #132238;
    --landing-muted: #5d6a7d;
    --landing-green: #117a43;
    --landing-green-dark: #075d32;
    --landing-blue: #176fb0;
    --landing-line: #dfe7ef;
    background: #f6faf8;
    color: var(--landing-ink);
    min-height: 100vh;
}

.landing-nav {
    align-items: center;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid var(--landing-line);
    display: flex;
    gap: 24px;
    justify-content: space-between;
    padding: 14px clamp(16px, 4vw, 56px);
    position: sticky;
    top: 0;
    z-index: 10;
}

.landing-brand {
    align-items: center;
    color: var(--landing-ink);
    display: inline-flex;
    font-size: 1.2rem;
    font-weight: 800;
    gap: 10px;
    text-decoration: none;
}

.landing-brand img {
    height: 42px;
    width: 42px;
}

.landing-nav nav {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: flex-end;
}

.landing-nav nav a {
    color: var(--landing-muted);
    font-weight: 700;
    text-decoration: none;
}

.landing-nav nav a:hover {
    color: var(--landing-green);
}

.landing-nav .portal-link {
    border: 1px solid var(--landing-green);
    border-radius: 8px;
    color: var(--landing-green);
    padding: 8px 12px;
}

.landing-hero,
.landing-section,
.landing-showcase {
    margin: 0 auto;
    max-width: 1180px;
    padding: clamp(34px, 6vw, 72px) clamp(16px, 4vw, 32px);
}

.landing-hero {
    align-items: center;
    display: grid;
    gap: 36px;
    grid-template-columns: minmax(0, 760px);
}

.landing-eyebrow {
    color: var(--landing-green);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin: 0 0 10px;
    text-transform: uppercase;
}

.landing-hero h1,
.landing-section h2,
.showcase-copy h2,
.partner-strip h2 {
    color: var(--landing-ink);
    font-weight: 850;
    letter-spacing: 0;
    line-height: 1.08;
    margin: 0;
}

.landing-hero h1 {
    font-size: clamp(1.9rem, 4vw, 3.25rem);
}

.landing-hero-copy > p:not(.landing-eyebrow),
.section-heading > p,
.showcase-copy > p,
.download-card p,
.feature-grid p {
    color: var(--landing-muted);
    font-size: 1.02rem;
    line-height: 1.6;
}

.landing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.primary-landing-button,
.secondary-landing-button,
.store-button {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    font-weight: 800;
    justify-content: center;
    min-height: 46px;
    padding: 11px 16px;
    text-decoration: none;
}

.primary-landing-button,
.store-button {
    background: var(--landing-green);
    color: #fff;
}

.primary-landing-button:hover,
.store-button:hover {
    background: var(--landing-green-dark);
    color: #fff;
}

.secondary-landing-button {
    border: 1px solid var(--landing-line);
    color: var(--landing-ink);
}

.secondary-landing-button:hover {
    border-color: var(--landing-green);
    color: var(--landing-green);
}

.landing-hero-media img,
.portal-screenshot {
    border: 1px solid var(--landing-line);
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(19, 34, 56, 0.12);
    display: block;
    width: 100%;
}

.section-heading {
    max-width: 760px;
}

.section-heading h2,
.showcase-copy h2,
.partner-strip h2 {
    font-size: clamp(1.7rem, 3vw, 3rem);
}

.feature-grid,
.download-grid {
    display: grid;
    gap: 16px;
    margin-top: 28px;
}

.feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feature-grid article,
.download-card {
    background: #fff;
    border: 1px solid var(--landing-line);
    border-radius: 8px;
    padding: 22px;
}

.feature-grid strong {
    align-items: center;
    background: #e6f5ec;
    border-radius: 999px;
    color: var(--landing-green);
    display: inline-flex;
    font-size: 1.2rem;
    height: 38px;
    justify-content: center;
    margin-bottom: 18px;
    width: 38px;
}

.feature-grid h3,
.download-card h3 {
    font-size: 1.25rem;
    margin: 0 0 8px;
}

.landing-showcase {
    align-items: center;
    display: grid;
    gap: 44px;
    grid-template-columns: minmax(240px, 360px) minmax(0, 1fr);
}

.phone-frame {
    background: #101928;
    border-radius: 34px;
    box-shadow: 0 18px 50px rgba(19, 34, 56, 0.18);
    padding: 12px;
}

.phone-frame img {
    border-radius: 24px;
    display: block;
    width: 100%;
}

.portal-section {
    max-width: 1280px;
}

.portal-screenshot {
    margin-top: 28px;
}

.download-section {
    text-align: center;
}

.download-section .section-heading {
    margin: 0 auto;
}

.download-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-left: auto;
    margin-right: auto;
    max-width: 760px;
}

.download-card {
    align-items: center;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.qr-code {
    border: 1px solid var(--landing-line);
    border-radius: 8px;
    height: 180px;
    margin-bottom: 16px;
    padding: 10px;
    width: 180px;
}

.store-button {
    margin-top: auto;
    width: 100%;
}

.store-button.muted {
    background: #758195;
}

.partner-strip {
    align-items: center;
    background: #e8f6ee;
    border: 1px solid #c7ead5;
    border-radius: 8px;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    margin-bottom: 48px;
}

@media (max-width: 860px) {
    .landing-nav {
        align-items: flex-start;
        flex-direction: column;
    }

    .landing-nav nav {
        justify-content: flex-start;
    }

    .landing-hero,
    .landing-showcase,
    .feature-grid,
    .download-grid {
        grid-template-columns: 1fr;
    }

    .landing-hero {
        padding-top: 28px;
    }

    .landing-hero h1 {
        font-size: 1.85rem;
    }

    .landing-showcase {
        gap: 28px;
    }

    .phone-frame {
        justify-self: center;
        max-width: 320px;
    }

    .partner-strip {
        align-items: stretch;
        flex-direction: column;
    }
}