:root {
    color-scheme: light;
    --color-bg: #f5f3ef;
    --color-surface: #ffffff;
    --color-border: #ded8d0;
    --color-text: #3f3a39;
    --color-muted: #7a706b;
    --color-primary: #3b6f9f;
    --color-primary-dark: #2f587d;
    --color-accent: #8a6f5a;
    --color-success: #0f9d58;
    --color-warning: #d99000;
    --color-danger: #c62828;
    --color-info: #2f6f9f;
    --color-success-bg: #e8f6ee;
    --color-warning-bg: #fff4dc;
    --color-danger-bg: #fae8e8;
    --color-info-bg: #eaf2f8;
    --shadow-card: 0 18px 40px rgba(63, 58, 57, 0.08);
    --radius: 8px;
    --container: 1180px;
}

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.58;
}

img,
svg {
    display: block;
    max-width: 100%;
}

button,
input,
textarea,
select {
    font: inherit;
}

a {
    color: var(--color-primary-dark);
    text-decoration: none;
}

a:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.app-shell {
    min-height: 100vh;
}

.container {
    width: min(var(--container), calc(100% - 32px));
    margin-inline: auto;
}

.site-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 96px;
    padding: 12px 0;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    color: var(--color-text);
}

.site-brand:hover {
    color: var(--color-text);
}

.site-brand__mark {
    width: auto;
    height: auto;
    max-height: 90px;
    object-fit: contain;
}

.site-brand__logo {
    width: auto;
    height: auto;
    max-width: min(280px, 58vw);
    max-height: 90px;
    object-fit: contain;
}

.site-header__title {
    display: grid;
    gap: 3px;
    text-align: right;
}

.site-header__context {
    color: var(--color-muted);
    font-size: 14px;
}

.site-header__name {
    color: var(--color-text);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.1;
}

.site-header__ppr {
    display: flex;
    flex: 1 1 220px;
    justify-content: flex-end;
    align-items: center;
    margin-left: auto;
}

.site-header__ppr-link {
    display: inline-flex;
    align-items: center;
}

.site-header__ppr-link:hover {
    color: inherit;
}

.site-header__ppr-logo {
    width: auto;
    height: auto;
    max-width: min(320px, 42vw);
    max-height: 82px;
    object-fit: contain;
}

.site-header__safety-logo {
    max-width: min(460px, 48vw);
    max-height: 96px;
}

.top-nav {
    border-top: 1px solid var(--color-border);
    position: relative;
    z-index: 20;
}

.top-nav__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 48px;
    overflow: visible;
}

.top-nav a,
.top-nav__toggle {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 18px;
    border-bottom: 3px solid transparent;
    color: var(--color-muted);
    font-size: 14px;
    font-weight: 650;
    white-space: nowrap;
}

.top-nav__dropdown {
    position: relative;
    display: inline-flex;
}

.top-nav__toggle {
    list-style: none;
    cursor: pointer;
}

.top-nav__toggle::-webkit-details-marker {
    display: none;
}

.top-nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    min-width: 230px;
    padding: 6px;
    border: 1px solid var(--color-border);
    border-radius: 0 0 6px 6px;
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    z-index: 30;
}

.top-nav__dropdown:hover .top-nav__menu,
.top-nav__dropdown:focus-within .top-nav__menu,
.top-nav__dropdown[open] .top-nav__menu {
    display: grid;
}

.top-nav__menu a {
    min-height: 34px;
    padding: 0 12px;
    border-bottom: 0;
    border-radius: 4px;
    font-size: 13px;
}

.top-nav__menu span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 4px;
    color: var(--color-muted);
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
}

.nav-action-menu .top-nav__menu {
    min-width: 280px;
}

.top-nav__menu a:hover,
.top-nav__menu a.is-active {
    background: #f8f7f5;
    color: var(--color-text);
}

.top-nav form {
    display: inline-flex;
    margin: 0;
}

.top-nav__locale {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

.top-nav__locale span {
    color: var(--color-muted);
    font-size: 12px;
}

.top-nav__locale form {
    display: inline-flex;
}

.top-nav__locale button {
    min-height: 32px;
    padding: 0 8px;
    border-bottom-width: 2px;
    font-size: 12px;
}

.top-nav button {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 18px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--color-muted);
    font-size: 14px;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
}

.top-nav .top-nav__auth {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
}

.top-nav .top-nav__locale + .top-nav__auth {
    margin-left: 4px;
}

.top-nav__identity {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 18px;
    color: var(--color-muted);
    font-size: 14px;
    font-weight: 650;
    white-space: nowrap;
}

.top-nav a:hover,
.top-nav a.is-active,
.top-nav__toggle:hover,
.top-nav__toggle.is-active,
.top-nav button:hover {
    border-bottom-color: var(--color-primary);
    color: var(--color-text);
}

.page-content {
    padding: 24px 0 64px;
}

.hero,
.page-header {
    margin-bottom: 28px;
    padding: 34px 0 38px;
    border-bottom: 1px solid var(--color-border);
}

.hero {
    display: grid;
    min-height: 292px;
    align-items: center;
}

.hero__content {
    max-width: 780px;
}

.eyebrow,
.card__kicker {
    display: block;
    margin: 0 0 10px;
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1,
h2,
h3 {
    color: var(--color-text);
    line-height: 1.16;
}

h1 {
    margin-bottom: 12px;
    font-size: clamp(38px, 6vw, 64px);
    font-weight: 720;
    letter-spacing: 0;
}

h2 {
    margin-bottom: 12px;
    font-size: 23px;
    font-weight: 700;
}

p {
    color: var(--color-muted);
}

.hero__lead,
.page-header__subtitle {
    max-width: 760px;
    color: var(--color-muted);
    font-size: 21px;
}

.button-row,
.component-row,
.admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.hero .button-row {
    margin-top: 24px;
}

.hero--compact {
    min-height: 190px;
    padding-top: 22px;
    padding-bottom: 28px;
}

.page-header--compact {
    margin-bottom: 16px;
    padding: 8px 0 14px;
}

.compact-title {
    margin-bottom: 6px;
    font-size: 24px;
}

.compact-meta {
    margin-bottom: 0;
    color: var(--color-muted);
    font-size: 14px;
}

.field-error {
    color: var(--color-danger);
    font-size: 13px;
    font-weight: 650;
}

.occurrence-header-compact {
    margin-bottom: 6px;
    padding: 0 0 8px;
}

.occurrence-header-compact__main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
}

.occurrence-header-compact .compact-title {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
}

.compact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-left: auto;
}

.compact-actions .btn,
.compact-actions .report-menu summary {
    min-height: 28px;
    padding: 0 9px;
    font-size: 12px;
    font-weight: 750;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 5px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.btn:hover {
    text-decoration: none;
}

.btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(59, 111, 159, 0.18);
}

.btn-primary:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #ffffff;
}

.btn-secondary {
    background: #f8f7f5;
    border-color: var(--color-border);
    color: var(--color-text);
}

.btn-secondary:hover {
    background: #efebe6;
    color: var(--color-text);
}

.btn-danger {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: #ffffff;
}

.btn-danger:hover {
    background: #a91f1f;
    color: #ffffff;
}

.btn-sm {
    min-height: 32px;
    padding: 0 10px;
    font-size: 12px;
}

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

.card,
.stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.card {
    padding: 24px;
}

.auth-card,
.confirmation-card {
    max-width: 760px;
}

.card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.card__header--with-actions {
    flex-wrap: wrap;
}

.list-clean,
.link-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 20px;
    color: var(--color-muted);
}

.text-link,
.link-list a {
    color: var(--color-primary-dark);
    font-weight: 700;
}

.text-link:hover,
.link-list a:hover {
    color: var(--color-primary);
}

.status-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-top: 20px;
}

.status-card h2 {
    margin-bottom: 0;
}

.status-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.status-item {
    display: grid;
    gap: 5px;
    min-width: 150px;
}

.status-item__detail {
    color: var(--color-muted);
    font-size: 13px;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: #f7f5f2;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.badge-success {
    border-color: rgba(15, 157, 88, 0.3);
    background: var(--color-success-bg);
    color: var(--color-success);
}

.badge-warning {
    border-color: rgba(217, 144, 0, 0.32);
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.badge-danger {
    border-color: rgba(198, 40, 40, 0.28);
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.badge-info {
    border-color: rgba(47, 111, 159, 0.28);
    background: var(--color-info-bg);
    color: var(--color-info);
}

.badge-status-received {
    border-color: rgba(217, 144, 0, 0.28);
    background: #fff6d8;
    color: #7a5200;
}

.badge-status-triage {
    border-color: rgba(213, 108, 32, 0.3);
    background: #fff0df;
    color: #8a4314;
}

.badge-status-analysis {
    border-color: rgba(15, 157, 88, 0.32);
    background: #e7f6ed;
    color: #0b6b3d;
}

.badge-status-actions-pending {
    border-color: rgba(0, 132, 150, 0.28);
    background: #ddf5f7;
    color: #096676;
}

.badge-status-closed {
    border-color: rgba(53, 94, 75, 0.35);
    background: #dfeee6;
    color: #234b38;
}

.badge-status-archived {
    border-color: rgba(78, 82, 88, 0.34);
    background: #eceff1;
    color: #33383d;
}

.badge-official-not-assessed {
    border-color: rgba(47, 111, 159, 0.28);
    background: var(--color-info-bg);
    color: var(--color-info);
}

.badge-official-to-assess {
    border-color: rgba(217, 144, 0, 0.34);
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.badge-official-required {
    border-color: rgba(198, 81, 40, 0.34);
    background: #ffe6dc;
    color: #a13b16;
}

.badge-official-submitted {
    border-color: rgba(15, 157, 88, 0.3);
    background: var(--color-success-bg);
    color: var(--color-success);
}

.badge-official-not-required {
    border-color: rgba(74, 101, 124, 0.24);
    background: #edf3f7;
    color: #4a657c;
}

.badge-official-notifiable {
    border-color: rgba(198, 40, 40, 0.28);
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.badge--compact {
    min-height: 22px;
    padding: 0 8px;
    font-size: 11px;
}

.alert {
    margin-bottom: 12px;
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text);
}

.alert-success {
    border-color: rgba(15, 157, 88, 0.35);
    background: var(--color-success-bg);
    color: #0a7040;
}

.alert-warning {
    border-color: rgba(217, 144, 0, 0.38);
    background: var(--color-warning-bg);
    color: #825700;
}

.alert-danger {
    border-color: rgba(198, 40, 40, 0.32);
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.alert-info {
    border-color: rgba(47, 111, 159, 0.32);
    background: var(--color-info-bg);
    color: var(--color-info);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 20px;
}

.stat-card {
    padding: 22px;
    transition: border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}

.stat-card__label {
    display: block;
    color: var(--color-muted);
    font-size: 14px;
    font-weight: 650;
}

.stat-card__value {
    display: block;
    margin-top: 12px;
    color: var(--color-text);
    font-size: 46px;
    font-weight: 760;
    line-height: 1;
}

.stat-card__value--success {
    color: var(--color-success);
}

.stat-card__value--warning {
    color: var(--color-warning);
}

.stat-card__value--danger {
    color: var(--color-danger);
}

.stat-card--changed {
    animation: stat-card-soft-flash 4.2s ease;
}

@keyframes stat-card-soft-flash {
    0%,
    100% {
        background: var(--color-surface);
        border-color: var(--color-border);
        box-shadow: var(--shadow-card);
    }

    18%,
    62% {
        background: var(--color-info-bg);
        border-color: rgba(47, 111, 159, 0.38);
        box-shadow: 0 12px 28px rgba(47, 111, 159, 0.12);
    }
}

.admin-actions {
    margin-bottom: 16px;
}

.table-scroll {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
}

.data-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.data-table--compact {
    min-width: 640px;
}

.data-table th,
.data-table td {
    padding: 13px 14px;
    border-bottom: 1px solid #ece7df;
    text-align: left;
    vertical-align: middle;
}

.data-table--compact th,
.data-table--compact td {
    padding: 9px 10px;
}

.data-table th {
    background: #f7f5f2;
    color: var(--color-text);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.data-table tbody tr:last-child td {
    border-bottom: 0;
}

.data-table tbody tr:hover td {
    background: #fbfaf8;
}

.row-pending td {
    background: #fff7f7;
}

.row-pending td:first-child {
    border-left: 4px solid var(--color-danger);
}

.empty-state {
    color: var(--color-muted);
    text-align: center;
}

.component-section {
    margin-bottom: 20px;
}

.table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.table-actions form {
    margin: 0;
}

.compact-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px 18px;
    align-items: start;
    padding: 18px;
}

.compact-summary__actions {
    grid-column: 1 / -1;
}

.compact-summary__badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.ppr-detail-card,
.status-admin-card,
.ppr-activity-card,
.compact-comment-form {
    padding: 18px;
}

.ppr-detail-card .card__header,
.status-admin-card .card__header,
.ppr-activity-card .card__header,
.compact-comment-form .card__header {
    margin-bottom: 12px;
}

.ppr-detail-card h2,
.status-admin-card h2,
.ppr-activity-card h2,
.compact-comment-form h2 {
    margin-bottom: 0;
    font-size: 20px;
}

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

.detail-item {
    display: grid;
    grid-template-columns: minmax(118px, 0.46fr) minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    min-width: 0;
    padding: 8px 0;
    border-bottom: 1px solid #ece7df;
}

.detail-item--wide {
    grid-column: 1 / -1;
}

.detail-label {
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.detail-value {
    min-width: 0;
    color: var(--color-text);
    font-size: 14px;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.status-admin-layout {
    display: grid;
    gap: 12px;
}

.status-admin-form {
    gap: 10px;
}

.status-admin-danger {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(198, 40, 40, 0.28);
    border-radius: 6px;
    background: var(--color-danger-bg);
}

.status-admin-danger form {
    flex: 0 0 auto;
    margin: 0;
}

.ppr-activity-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.timeline-list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.timeline-item {
    padding: 10px 0;
    border-bottom: 1px solid #ece7df;
}

.timeline-item:first-child {
    padding-top: 0;
}

.timeline-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.timeline-item p {
    margin: 4px 0 0;
    color: var(--color-text);
    font-size: 14px;
}

.timeline-item__meta {
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 650;
}

.timeline-item__status {
    margin-top: 2px;
    color: var(--color-text);
    font-size: 14px;
    font-weight: 700;
}

.compact-comment-form textarea {
    min-height: 88px;
}

.reporting-filter {
    display: grid;
    grid-template-columns: minmax(150px, 0.7fr) minmax(120px, 0.5fr) auto;
    gap: 10px;
    align-items: end;
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
}

.reporting-filter .form-field {
    gap: 4px;
    font-size: 13px;
}

.reporting-filter input,
.reporting-filter select {
    padding: 7px 9px;
}

.reporting-filter--year {
    grid-template-columns: minmax(120px, 0.5fr) auto;
    max-width: 420px;
}

.reporting-stat-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.reporting-stat-card {
    padding: 16px;
}

.reporting-stat-card .stat-card__value {
    margin-top: 8px;
    font-size: 30px;
}

.reporting-chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.reporting-chart-grid--single {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 18px;
}

.reporting-chart-card,
.reporting-panel {
    padding: 18px;
}

.reporting-chart-card .card__header,
.reporting-panel .card__header {
    margin-bottom: 12px;
}

.reporting-chart-card h2,
.reporting-panel h2 {
    margin-bottom: 0;
    font-size: 20px;
}

.donut-chart {
    display: grid;
    grid-template-columns: minmax(170px, 220px) minmax(0, 1fr);
    gap: 18px;
    align-items: center;
}

.donut-chart__svg {
    width: 100%;
    aspect-ratio: 1;
}

.donut-chart__track,
.donut-chart__segment {
    fill: transparent;
    stroke-width: 6;
}

.donut-chart__track {
    stroke: #ece7df;
}

.donut-chart__segment {
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

.donut-chart__number,
.donut-chart__label {
    fill: var(--color-text);
    text-anchor: middle;
}

.donut-chart__number {
    font-size: 6px;
    font-weight: 800;
}

.donut-chart__label {
    fill: var(--color-muted);
    font-size: 3px;
    font-weight: 700;
}

.chart-legend {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.chart-legend--inline {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 14px;
}

.chart-legend li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    color: var(--color-muted);
    font-size: 13px;
}

.chart-legend--inline li {
    display: inline-flex;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
}

.reporting-tone-submitted {
    stroke: #b28704;
}

.reporting-tone-accepted {
    stroke: #0f9d58;
}

.reporting-tone-rejected {
    stroke: #c62828;
}

.reporting-tone-cancelled {
    stroke: #2f6f9f;
}

.reporting-tone-web,
.reporting-tone-manual {
    stroke: #2f6f9f;
}

.reporting-tone-admin {
    stroke: #d99000;
}

.reporting-tone-automatic {
    stroke: #0f9d58;
}

.reporting-tone-phone {
    stroke: #7b61ff;
}

.reporting-tone-radio {
    stroke: #0097a7;
}

.reporting-tone-email {
    stroke: #8a6f5a;
}

.reporting-tone-other {
    stroke: #c2185b;
}

.reporting-tone-unknown {
    stroke: #807670;
}

.reporting-fill-submitted {
    background: #b28704;
}

.reporting-fill-accepted {
    background: #0f9d58;
}

.reporting-fill-rejected {
    background: #c62828;
}

.reporting-fill-cancelled {
    background: #2f6f9f;
}

.reporting-fill-web,
.reporting-fill-manual {
    background: #2f6f9f;
}

.reporting-fill-admin {
    background: #d99000;
}

.reporting-fill-automatic {
    background: #0f9d58;
}

.reporting-fill-phone {
    background: #7b61ff;
}

.reporting-fill-radio {
    background: #0097a7;
}

.reporting-fill-email {
    background: #8a6f5a;
}

.reporting-fill-other {
    background: #c2185b;
}

.reporting-fill-unknown {
    background: #807670;
}

.stacked-day-chart {
    display: grid;
    gap: 8px;
}

.stacked-day {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 42px;
    gap: 10px;
    align-items: center;
}

.stacked-month {
    display: grid;
    grid-template-columns: minmax(92px, 120px) minmax(0, 1fr) 42px;
    gap: 10px;
    align-items: center;
}

.stacked-day__label {
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 800;
    text-align: right;
}

.stacked-month__label {
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 800;
    text-align: right;
}

.stacked-day__bar {
    display: flex;
    height: 18px;
    overflow: hidden;
    border-radius: 999px;
    background: #ece7df;
}

.stacked-day__segment {
    min-width: 3px;
}

.reporting-empty-note {
    margin: 14px 0 0;
}

.progress-list {
    display: grid;
    gap: 12px;
}

.progress-row {
    display: grid;
    gap: 6px;
}

.progress-row__meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--color-text);
    font-size: 14px;
    font-weight: 700;
}

.progress-row__track {
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: #ece7df;
}

.progress-row__bar {
    display: block;
    height: 100%;
    min-width: 3px;
    border-radius: inherit;
    background: var(--color-primary);
}

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

.form-grid--aligned .form-field {
    grid-template-rows: minmax(24px, auto) auto;
    align-content: start;
}

.form-grid--aligned input,
.form-grid--aligned select {
    min-height: 46px;
}

.form-grid--filters {
    align-items: end;
}

.ppr-filter-card {
    padding: 14px 16px;
}

.ppr-filter-form {
    display: grid;
    grid-template-columns: minmax(126px, 0.8fr) minmax(126px, 0.8fr) minmax(150px, 1fr) minmax(150px, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.ppr-filter-form .form-field {
    gap: 4px;
    font-size: 13px;
}

.ppr-filter-form input {
    padding: 7px 9px;
}

.ppr-filter-form .button-row {
    flex-wrap: nowrap;
    gap: 8px;
}

.ppr-filter-form .btn {
    min-height: 34px;
}

.ppr-result-note {
    margin: -4px 0 14px;
    color: var(--color-muted);
    font-size: 13px;
    font-weight: 600;
}

.airport-import-error {
    color: var(--color-danger);
    white-space: pre-line;
}

.required-marker {
    color: var(--color-danger);
    font-weight: 800;
}

.form-field {
    display: grid;
    gap: 7px;
    color: var(--color-text);
    font-weight: 700;
}

fieldset.form-field {
    margin: 0;
    border: 0;
    padding: 0;
}

fieldset.form-field legend {
    margin-bottom: 7px;
    padding: 0;
}

.form-field__label {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
}

.form-field small {
    color: var(--color-muted);
    font-size: 13px;
    font-weight: 600;
}

.form-field__hint {
    display: block;
    line-height: 1.35;
}

.airport-search {
    position: relative;
}

.airport-search__control {
    position: relative;
    display: block;
}

.airport-search__suggestions {
    position: absolute;
    z-index: 45;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    box-shadow: 0 14px 30px rgba(63, 58, 57, 0.14);
}

.airport-search__option {
    display: grid;
    width: 100%;
    gap: 2px;
    padding: 9px 11px;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    text-align: left;
}

.airport-search__option:last-child {
    border-bottom: 0;
}

.airport-search__option:hover,
.airport-search__option:focus {
    background: var(--color-info-bg);
    outline: none;
}

.airport-search__option strong {
    font-size: 14px;
}

.airport-search__option span,
.airport-search__selected,
.detail-subvalue {
    color: var(--color-muted);
    font-size: 13px;
    font-weight: 600;
}

.airport-search__selected,
.detail-subvalue {
    line-height: 1.35;
}

.detail-subvalue {
    display: block;
    margin-top: 2px;
}

.form-field--wide {
    grid-column: 1 / -1;
}

.customs-admin-fields {
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: #fffdfb;
}

.checkbox-grid--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-content-block {
    display: grid;
    gap: 12px;
    padding: 12px 0 18px;
    border-bottom: 1px solid var(--color-border);
}

.home-content-locales {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.home-content-locale {
    display: grid;
    gap: 12px;
}

.checkbox-field {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--color-text);
    font-weight: 700;
}

.checkbox-field input[type="checkbox"] {
    width: auto;
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 14px;
}

input,
textarea,
select {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    background: #fffdfb;
    color: var(--color-text);
    padding: 11px 12px;
}

textarea {
    resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--color-primary);
    outline: 3px solid rgba(59, 111, 159, 0.14);
}

.safety-form-section {
    padding-top: 14px;
    border-top: 1px solid #ece7df;
}

.safety-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.safety-choice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    min-height: 100%;
    padding: 14px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: #fffdfb;
    color: var(--color-text);
    cursor: pointer;
}

.safety-choice:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-info-bg);
}

.safety-choice input[type="radio"] {
    width: auto;
    margin-top: 4px;
}

.safety-choice strong,
.safety-choice small {
    display: block;
}

.safety-choice small {
    margin-top: 4px;
    color: var(--color-muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

.safety-occurrence-form:has(#reporting_mode_anonymous:checked) .safety-identity-section {
    display: none;
}

.safety-text-block {
    white-space: pre-wrap;
}

.compact-page {
    display: grid;
    gap: 12px;
}

.compact-page .component-section {
    margin-bottom: 12px;
}

.compact-card {
    padding: 14px 16px;
}

.compact-card .card__header {
    margin-bottom: 8px;
}

.compact-card h2 {
    margin-bottom: 0;
    font-size: 18px;
}

.compact-card p {
    margin-bottom: 6px;
}

.list-card-header {
    align-items: center;
    margin-bottom: 10px;
}

.list-card-header h2 {
    margin-bottom: 0;
    font-size: 20px;
}

.admin-checkbox-grid,
.permission-section__items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
}

.permission-matrix {
    display: grid;
    gap: 10px;
}

.permission-section {
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fffdfb;
}

.permission-section--sensitive {
    background: #fffaf0;
}

.permission-section__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.placeholder-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.placeholder-list code {
    padding: 3px 6px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: #f8f7f5;
    color: var(--color-text);
    font-size: 12px;
}

.compact-alert {
    margin-bottom: 4px;
    padding: 10px 12px;
    font-size: 14px;
}

.compact-grid {
    gap: 10px 12px;
}

.compact-field,
.compact-form .form-field {
    gap: 4px;
    font-size: 13px;
}

.compact-form .form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 12px;
}

.compact-form .form-grid--aligned input,
.compact-form .form-grid--aligned select,
.compact-grid input,
.compact-grid select {
    min-height: 38px;
    padding: 7px 9px;
}

.compact-form textarea,
.compact-grid textarea {
    min-height: 76px;
    padding: 8px 9px;
}

.compact-form fieldset.form-field legend {
    margin-bottom: 5px;
}

.compact-form .safety-form-section {
    padding-top: 8px;
}

.compact-form .safety-choice-grid {
    gap: 8px;
}

.compact-form .safety-choice {
    gap: 8px;
    padding: 9px 10px;
}

.compact-form .safety-choice small {
    margin-top: 2px;
    font-size: 12px;
}

.status-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.status-strip__item {
    display: grid;
    gap: 3px;
    min-width: 118px;
    padding: 6px 8px;
    border: 1px solid #ece7df;
    border-radius: 6px;
    background: #fffdfb;
}

.status-strip__item--wide {
    min-width: min(260px, 100%);
    flex: 1 1 220px;
}

.status-strip__item span:first-child {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.status-strip__item strong {
    min-width: 0;
    color: var(--color-text);
    font-size: 13px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.occurrence-summary-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    padding: 6px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: none;
}

.summary-pill {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    max-width: 100%;
    gap: 4px;
    padding: 2px 7px;
    border: 1px solid #ece7df;
    border-radius: 999px;
    background: #fffdfb;
    color: var(--color-text);
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
}

.summary-pill span:first-child {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 700;
}

.summary-pill strong {
    min-width: 0;
    font-size: 12px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.summary-pill--code {
    flex: 0 1 auto;
}

.summary-pill--code strong {
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
}

.summary-pill--count {
    min-width: 0;
}

.summary-pill .badge {
    min-height: 20px;
    padding: 0 7px;
}

.tabs {
    display: grid;
    gap: 8px;
}

.tabs__list {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--color-border);
    scrollbar-width: thin;
}

.tabs__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    color: var(--color-muted);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.tabs__tab:hover,
.tabs__tab.is-active {
    border-color: var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
}

.tab-panel {
    padding: 18px;
}

.tab-panel[hidden] {
    display: none;
}

.tab-panel .card__header {
    margin-bottom: 12px;
}

.tab-panel h2 {
    margin-bottom: 0;
    font-size: 19px;
}

.invitation-status {
    display: grid;
    gap: 3px;
    min-width: 150px;
}

.person-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: flex-start;
}

.person-actions form {
    margin: 0;
}

.questionnaire-response-panel {
    width: 100%;
}

.questionnaire-response-card {
    display: grid;
    gap: 8px;
    width: min(460px, 80vw);
    margin-top: 8px;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: #fffdfb;
}

.questionnaire-response-card p {
    margin-bottom: 0;
    color: var(--color-text);
    font-size: 13px;
}

.questionnaire-public-shell {
    display: grid;
    min-height: 100vh;
    align-items: start;
    padding: 24px 0 56px;
}

.questionnaire-public-card {
    width: min(920px, calc(100% - 32px));
    margin-inline: auto;
}

.questionnaire-public-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-border);
}

.questionnaire-public-mark {
    max-height: 70px;
    width: auto;
}

.questionnaire-public-logo {
    max-height: 70px;
    width: auto;
}

.questionnaire-public-intro h1 {
    margin-bottom: 8px;
    font-size: 30px;
}

.questionnaire-public-summary {
    margin: 12px 0;
}

.questionnaire-public-form {
    margin-top: 14px;
}

.readonly-actor-field {
    align-content: start;
}

.readonly-actor-field strong {
    min-height: 38px;
    padding: 8px 9px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    background: #f8f7f5;
    font-size: 13px;
}

.audit-diff-list {
    display: grid;
    gap: 3px;
    color: var(--color-text);
    font-size: 13px;
}

.action-followup-cell {
    background: #fffdfb;
}

.action-followup-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.action-followup-panel {
    display: flex;
    min-height: 100%;
    flex-direction: column;
}

.action-followup-grid h3 {
    margin-bottom: 8px;
    font-size: 15px;
}

.action-inline-form {
    gap: 8px 10px;
    margin-top: 8px;
}

.action-inline-form--status,
.action-inline-form--comment {
    grid-template-columns: minmax(160px, 0.7fr) minmax(220px, 1.3fr);
}

.action-inline-form--comment {
    margin-top: auto;
}

.action-inline-form__submit {
    align-self: end;
}

.action-inline-form__submit .btn {
    width: max-content;
}

.action-comment-list {
    margin-bottom: 8px;
}

.panel-section {
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid #ece7df;
}

.panel-section--last,
.panel-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.details-header-actions {
    display: flex;
    flex: 1 1 auto;
    margin-left: auto;
    align-items: flex-start;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.details-edit-panel {
    margin-left: 0;
}

.details-edit-panel[open] {
    flex-basis: 100%;
    margin-left: 0;
    width: 100%;
}

.details-edit-panel summary {
    width: max-content;
    list-style: none;
    cursor: pointer;
}

.details-edit-panel summary::-webkit-details-marker {
    display: none;
}

.details-edit-form {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fffdfb;
}

.person-actions {
    display: grid;
    gap: 6px;
    align-items: start;
}

.person-edit-panel summary {
    width: max-content;
    list-style: none;
    cursor: pointer;
}

.person-edit-panel summary::-webkit-details-marker {
    display: none;
}

.person-edit-panel[open] {
    min-width: min(720px, calc(100vw - 70px));
}

.person-edit-panel .occurrence-person-form {
    margin-top: 8px;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fffdfb;
}

.occurrence-person-form {
    margin-bottom: 0;
}

.report-menu {
    position: relative;
}

.report-menu summary {
    list-style: none;
}

.report-menu summary::-webkit-details-marker {
    display: none;
}

.report-menu__content {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 40;
    display: grid;
    min-width: 260px;
    padding: 6px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.report-menu__content a,
.report-menu__content span,
.report-list__placeholder {
    padding: 8px 10px;
    border-radius: 4px;
    color: var(--color-text);
    font-size: 13px;
    font-weight: 700;
}

.report-menu__content a:hover {
    background: #f8f7f5;
}

.report-menu__content span,
.report-list__placeholder {
    color: var(--color-muted);
}

.report-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

@media (max-width: 860px) {
    .site-header__inner {
        align-items: center;
        gap: 18px;
    }

    .site-header__title {
        text-align: left;
    }

    .site-header__ppr {
        width: auto;
        justify-content: flex-end;
    }

    .hero {
        min-height: auto;
        padding-top: 20px;
    }

    .card-grid,
    .stats-grid,
    .detail-grid,
    .ppr-activity-grid,
    .reporting-chart-grid,
    .reporting-stat-grid,
    .form-grid,
    .safety-choice-grid {
        grid-template-columns: 1fr;
    }

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

    .donut-chart {
        grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
    }

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

    .ppr-filter-form .filter-actions {
        grid-column: span 2;
    }

    .home-content-locales {
        grid-template-columns: 1fr;
    }

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

    .checkbox-grid--compact {
        grid-template-columns: 1fr;
    }

    .status-card {
        flex-direction: column;
    }

    .status-list {
        justify-content: flex-start;
    }

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

@media (max-width: 560px) {
    .container {
        width: min(var(--container), calc(100% - 22px));
    }

    .site-brand {
        gap: 10px;
    }

    .site-brand__mark {
        max-height: 64px;
    }

    .site-brand__logo {
        max-height: 64px;
        max-width: min(230px, 58vw);
    }

    .site-header__ppr-logo {
        max-width: min(220px, 64vw);
        max-height: 54px;
    }

    .site-header__safety-logo {
        max-width: min(310px, 92vw);
        max-height: 82px;
    }

    .site-header__ppr {
        flex-basis: 100%;
    }

    .site-header__name {
        font-size: 28px;
    }

    .top-nav__dropdown {
        display: grid;
    }

    .top-nav__menu {
        position: static;
        min-width: min(260px, calc(100vw - 44px));
        box-shadow: none;
    }

    .nav-action-menu .top-nav__menu span {
        white-space: normal;
    }

    .page-content {
        padding-top: 18px;
    }

    .hero,
    .page-header {
        padding-bottom: 28px;
    }

    .occurrence-header-compact {
        padding-bottom: 8px;
    }

    .btn {
        width: 100%;
    }

    .list-card-header .btn {
        width: auto;
    }

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

    .reporting-filter {
        grid-template-columns: 1fr;
    }

    .reporting-filter--year {
        max-width: none;
    }

    .stacked-month {
        grid-template-columns: minmax(74px, 96px) minmax(0, 1fr) 34px;
    }

    .donut-chart {
        grid-template-columns: 1fr;
    }

    .donut-chart__svg {
        max-width: 220px;
        margin-inline: auto;
    }

    .ppr-filter-form .filter-actions {
        grid-column: auto;
    }

    .ppr-filter-form .button-row {
        flex-wrap: wrap;
    }

    .table-actions .btn,
    .table-actions button {
        width: auto;
    }

    .compact-summary {
        grid-template-columns: 1fr;
    }

    .admin-checkbox-grid,
    .permission-section__items {
        grid-template-columns: 1fr;
    }

    .detail-item {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .status-admin-danger {
        align-items: flex-start;
        flex-direction: column;
    }

    .action-followup-grid,
    .action-inline-form--status,
    .action-inline-form--comment {
        grid-template-columns: 1fr;
    }

    .action-inline-form--comment {
        margin-top: 8px;
    }

    .details-header-actions {
        width: 100%;
        margin-left: 0;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

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

    .report-menu,
    .report-menu summary {
        width: 100%;
    }

    .compact-actions {
        width: 100%;
        margin-left: 0;
    }

    .compact-actions .btn,
    .compact-actions .report-menu,
    .compact-actions .report-menu summary {
        width: auto;
    }

    .summary-pill {
        white-space: normal;
    }

    .summary-pill--code {
        flex: 1 1 auto;
    }

    .report-menu__content {
        right: auto;
        left: 0;
        min-width: min(280px, calc(100vw - 44px));
    }
}