:root { color-scheme: light; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #222d2a; background: #f3f4f0; line-height: 1.5; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: #17675e; text-underline-offset: .2em; }
a:hover { color: #104b45; text-decoration-thickness: 2px; }
button, .button { background: #17675e; color: white; border: 1px solid #17675e; border-radius: 7px; padding: .68rem 1.1rem; font: inherit; font-weight: 650; text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
button:hover, .button:hover { background: #104b45; color: white; }
button:active, .button:active { background: #0b3935; }
button:disabled { opacity: .65; cursor: not-allowed; }
:focus-visible { outline: 3px solid #a76216; outline-offset: 3px; }
header { background: #25302d; color: #fff; }
.header-inner { max-width: 1500px; margin: auto; padding: .95rem clamp(1rem, 3vw, 2.5rem); display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.brand { color: white; font-weight: 700; text-decoration: none; font-size: 1rem; letter-spacing: -.02em; }
.brand:hover { color: white; }
.account { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: .875rem; color: #d5ded9; }
.account a { color: #fff; }
.account a:hover { color: #fff; }
.quiet { background: transparent; border-color: #71817a; padding: .45rem .85rem; min-height: 40px; }
main { max-width: 1500px; margin: auto; padding: clamp(1.25rem, 3vw, 2.75rem); min-height: 75vh; }
footer { max-width: 1500px; margin: auto; padding: 1.5rem clamp(1rem, 3vw, 2.5rem); color: #5b6963; font-size: .8rem; }
h1 { font-size: clamp(1.8rem, 3vw, 2.45rem); line-height: 1.15; letter-spacing: -.035em; margin: .3rem 0 .6rem; }
h2 { font-size: 1.15rem; }
p { margin: .4rem 0 1rem; }
.eyebrow { font-size: .8rem; color: #61736c; font-weight: 650; margin-bottom: .2rem; }
.heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.heading p:last-child { color: #5b6963; margin-bottom: 0; }
.panel { background: #fff; padding: clamp(1.25rem, 2vw, 2rem); border: 1px solid #dce2dc; border-radius: 12px; }
.login { max-width: 460px; margin: 6vh auto; }
label { display: flex; flex-direction: column; gap: .4rem; font-size: .875rem; font-weight: 650; min-width: 0; }
input, select, textarea { width: 100%; min-width: 0; min-height: 44px; border: 1px solid #aebbb4; border-radius: 6px; padding: .65rem .75rem; font: inherit; font-weight: 400; color: #222d2a; background: white; }
input:hover, select:hover, textarea:hover { border-color: #4e6860; }
textarea { resize: vertical; }
.stack { display: grid; gap: 1rem; }
.filter-disclosure { background: #fff; border: 1px solid #dce2dc; border-radius: 10px; }
.filter-disclosure summary { padding: .9rem 1.2rem; cursor: pointer; font-size: .9rem; font-weight: 650; }
.filter-disclosure[open] summary { border-bottom: 1px solid #e5eae5; }
.filters { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: end; padding: 1.2rem; }
.export-form { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.2fr) auto; }
.export-form .actions { align-self: end; }
.export-form button { white-space: nowrap; }
.actions { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.actions a { padding: .5rem 0; }
.table-toolbar { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center; margin: 2rem 0 .85rem; }
.table-toolbar p { margin: 0; }
.table-toolbar p span { color: #64736c; font-size: .85rem; margin-left: .75rem; }
.table-toolbar a { font-size: .875rem; font-weight: 600; }
.table-scroll { position: relative; overflow-x: auto; border: 1px solid #dce2dc; border-radius: 10px; background: white; }
table { border-collapse: collapse; width: 100%; text-align: left; font-size: .875rem; }
th { background: #edf1ed; color: #52645b; font-size: .75rem; font-weight: 700; }
th, td { padding: 1rem .85rem; border-bottom: 1px solid #e5eae5; vertical-align: top; min-width: 100px; max-width: 280px; overflow-wrap: anywhere; }
td:first-child { min-width: 180px; }
tbody tr:hover { background: #f7faf7; }
tr:last-child td { border-bottom: 0; }
.record-number, time, .numeric { font-variant-numeric: tabular-nums; }
.record-number { color: #17675e; font-size: .8rem; font-weight: 700; }
.secondary { display: block; color: #64736c; margin-top: .2rem; }
.status { font-weight: 700; border-left: 3px solid; padding-left: .5rem; }
.status-open { color: #982d27; }.status-hold { color: #795200; }.status-closed { color: #24643e; }
.hint { font-size: .85rem; color: #5b6963; margin-top: 1rem; }
.empty { text-align: center; padding: 3rem 1rem; }
.incident-form { max-width: 900px; }
fieldset { border: 0; border-bottom: 1px solid #e1e7e1; padding: 0 0 1.75rem; margin: 0 0 1.75rem; min-width: 0; }
legend { font-weight: 700; font-size: 1.1rem; margin-bottom: 1rem; padding: 0; }
.form-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.checkbox { flex-direction: row; align-items: center; min-height: 44px; }
.checkbox input { width: 20px; min-height: 20px; height: 20px; accent-color: #17675e; }
.form-actions { margin-top: 1.5rem; }
.notice, .error { padding: 1rem; margin-bottom: 1.5rem; border-left: 4px solid; background: white; }
.notice { color: #24643e; }.error, .field-error { color: #982d27; }
.field-error { font-weight: 400; }
[aria-invalid="true"] { border-color: #982d27; }
.pagination { display: flex; gap: 1.5rem; align-items: center; justify-content: center; margin-top: 1.5rem; }
.sr-only, .skip { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip:focus { position: fixed; top: 0; left: 0; width: auto; height: auto; clip: auto; margin: 0; padding: 1rem; background: white; z-index: 10; }
.view-tabs { display: flex; gap: 1.5rem; overflow-x: auto; border-bottom: 1px solid #d4ddd5; margin-bottom: 1.25rem; }
.view-tabs a { white-space: nowrap; color: #5b6963; padding: .75rem .1rem; text-decoration: none; border-bottom: 3px solid transparent; font-size: .9rem; }
.view-tabs a[aria-current="page"] { color: #17675e; border-color: #17675e; font-weight: 700; }
@media (min-width: 620px) { .form-grid, .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }.wide, .search { grid-column: 1 / -1; } }
@media (min-width: 1050px) { .filters { grid-template-columns: minmax(230px, 2fr) repeat(4, minmax(130px, 1fr)); }.search { grid-column: auto; }.filters .actions { grid-column: 1 / -1; } }
@media (min-width: 1250px) { .filters { grid-template-columns: minmax(200px, 2fr) repeat(4, minmax(120px, 1fr)) auto; }.filters .actions { grid-column: auto; } }
@media (min-width: 701px) { .filter-disclosure .export-form { grid-template-columns: minmax(180px, 1.25fr) minmax(180px, 1fr) minmax(220px, 1.2fr) auto; }.filter-disclosure .export-form .actions { grid-column: auto; } }
@media (max-width: 700px) { .table-scroll { overflow: visible; border: 0; background: transparent; } table, tbody, tr, td { display: block; width: 100%; } thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } tbody tr { background: #fff; border: 1px solid #dce2dc; border-radius: 10px; margin-bottom: .75rem; padding: .6rem 1rem; } td, td:first-child { min-width: 0; max-width: none; display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border: 0; text-align: right; } td::before { content: attr(data-label); color: #64736c; font-size: .8rem; font-weight: 650; text-align: left; flex: 0 0 40%; } td br { display: none; } td:first-child { flex-wrap: wrap; } td:first-child time { margin-left: auto; } .secondary { margin: 0; } }
@media (min-width: 701px) { .export-form { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.2fr) auto; } }