/* FieldNest design system: tokens, shared controls, workspace layouts, then responsive rules.
   Reuse component classes; avoid page-specific variants of standard controls. */
@media print { .sidebar, .topbar, .toolbar, .form-grid, .button, nav { display:none !important; } .main-content, main, .content { margin:0 !important; padding:0 !important; } .table-scroll { overflow:visible !important; } table { font-size:9pt; } thead { display:table-header-group; } }
:root {
    font-family:Inter,"Segoe UI",Arial,sans-serif;
    color:#233e32;
    background:#f6f7f2;
    font-synthesis:none;
    --forest:#193f32;
    --green:#345d43;
    --line:#e2e7dc;
    --muted:#68766a;
    --cream:#f6f7f2;
    --surface:#fff;
    --control-height:44px;
    --control-radius:7px;
    --panel-radius:10px;
    --text-control:13px;
    --text-label:13px;
    --space-xs:4px;
    --space-sm:8px;
    --space-md:16px;
    --space-lg:24px;
    --space-xl:32px
}
* {
    box-sizing:border-box
}
body {
    margin:0;
    font-size:14px;
    line-height:1.5
}
button,input,select,textarea {
    font:inherit
}
button,a {
    touch-action:manipulation
}
button {
    cursor:pointer
}
button:disabled {
    opacity:.5;
    cursor:not-allowed
}
a {
    color:var(--green);
    text-decoration:none
}
a:hover {
    text-decoration:none;
    color:#173b29
}
button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible {
    outline:3px solid #789842;
    outline-offset:4px
}
h1,h2,h3,p {
    margin-top:0
}
h1 {
    font-size:30px;
    line-height:1.25;
    letter-spacing:-1.2px;
    margin-bottom:9px;
    font-weight:650
}
h2 {
    font-size:17px;
    font-weight:650;
    line-height:1.45;
    margin-bottom:7px;
    letter-spacing:-.3px
}
p {
    line-height:1.7
}
small {
    font-size:12px
}
.icon {
    width:21px;
    height:21px;
    flex-shrink:0;
    vertical-align:middle
}
.app-shell {
    display:flex;
    min-height:100dvh
}
.sidebar {
    width:256px;
    position:fixed;
    inset:0 auto 0 0;
    background:var(--forest);
    color:#d3ded0;
    padding:27px 16px 20px;
    display:flex;
    flex-direction:column;
    z-index:30;
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:#63816a transparent
}
.brand {
    display:flex;
    align-items:center;
    gap:11px;
    padding:0 12px;
    color:white
}
.brand:hover {
    color:white
}
.brand img {
    width:40px;
    height:48px;
    object-fit:contain;
    border-radius:5px;
    background:white;
    flex:none
}
.brand strong {
    font-size:16px;
    letter-spacing:-.2px;
    font-weight:650;
    display:block;
    line-height:1.2
}
.nav-caption {
    font-size:10px;
    font-weight:600;
    color:#a5bba3;
    letter-spacing:1.7px;
    padding:16px 14px 8px
}
.sidebar nav>a,.sidebar-foot>a {
    display:flex;
    align-items:center;
    gap:12px;
    padding:11px 14px;
    margin:3px 0;
    color:#cad8ca;
    border-radius:7px;
    font-size:13px
}
.sidebar nav>a .icon {
    width:18px;
    height:18px
}
.sidebar nav>a:hover,.sidebar-foot>a:hover {
    background:#ffffff0b;
    color:white
}
.sidebar nav>a.active {
    background:#dce9b9;
    color:#254b34;
    font-weight:650
}
.status-dot {
    display:inline-block;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#829e5d;
    margin-right:7px;
    flex-shrink:0
}
.main-shell {
    margin-left:256px;
    width:calc(100% - 256px);
    min-width:0
}
.topbar {
    height:76px;
    border-bottom:1px solid var(--line);
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 36px;
    gap:16px
}
.branch-label {
    font-size:12px;
    color:#63725f
}
.icon-button {
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:7px
}
.icon-button:hover {
    background:#edf2e6
}
.avatar {
    display:inline-flex;
    width:34px;
    height:34px;
    align-items:center;
    justify-content:center;
    background:#e8eedc;
    border:1px solid #dbe4cf;
    border-radius:50%;
    font-size:12px;
    color:#476039;
    font-weight:650;
    flex-shrink:0
}
.mobile-brand {
    display:none
}
.content {
    max-width:1600px;
    padding:25px 36px 18px;
    margin:0 auto
}
.eyebrow {
    font-size:10px;
    letter-spacing:1.8px;
    font-weight:650;
    color:#70805c;
    margin-bottom:11px
}
.page-heading {
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:flex-end;
    margin-bottom:26px
}
.page-heading p {
    color:var(--muted);
    font-size:13px;
    margin:0
}
.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:10px 15px;
    min-height:var(--control-height);
    border:1px solid var(--line);
    background:var(--surface);
    border-radius:var(--control-radius);
    color:var(--green);
    font-size:var(--text-control);
    font-weight:600;
    white-space:nowrap;
    line-height:1.4
}
.button .icon {
    width:16px;
    height:16px
}
.button:hover {
    background:#eaf0df;
    color:#274b34
}
.button.primary {
    background:var(--forest);
    border-color:var(--forest);
    color:#fff
}
.button.primary:hover {
    background:#2c5a40
}
.button-group {
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap
}
.button.wide {
    width:100%
}
.metrics {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:15px;
    margin-bottom:31px
}
.metric {
    display:block;
    background:#fff;
    border:1px solid var(--line);
    border-radius:9px;
    padding:17px 19px;
    color:#2e4939
}
.metric:hover {
    border-color:#b7c6a4;
    box-shadow:0 4px 15px #173e3207
}
.metric>div {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:4px;
    font-size:11px;
    color:#61715f
}
.metric strong {
    display:block;
    font-size:32px;
    letter-spacing:-1px;
    font-weight:600;
    margin:9px 0 3px;
    line-height:1.2
}
.metric em {
    font-style:normal;
    font-size:13px;
    letter-spacing:0;
    margin-left:5px;
    color:#6c7b61
}
.metric small {
    font-size:10px;
    color:#78846b;
    display:flex;
    justify-content:space-between
}
.icon-tile {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:39px;
    height:39px;
    border-radius:10px;
    flex-shrink:0
}
.metric .icon-tile {
    width:30px;
    height:30px;
    border-radius:8px
}
.metric .icon {
    width:16px;
    height:16px
}
.sage {
    background:#eaf0de;
    color:#5e7d44
}
.sand {
    background:#f7f0da;
    color:#a48438
}
.blue {
    background:#e8eff0;
    color:#56808a
}
.rose {
    background:#f5e8e1;
    color:#ad7563
}
.lilac {
    background:#eeebf2;
    color:#83708b
}
.section-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-bottom:16px
}
.section-heading h2 {
    font-size:17px;
    margin-bottom:3px
}
.section-heading p {
    font-size:12px;
    color:var(--muted);
    margin:0
}
.small {
    font-size:11px
}
.muted {
    color:var(--muted)
}
.dashboard-bottom {
    display:grid;
    grid-template-columns:minmax(0,1.8fr) minmax(250px,1fr);
    gap:20px
}
.panel {
    background:#fff;
    border:1px solid var(--line);
    border-radius:10px;
    overflow:hidden;
    margin-bottom:20px
}
.panel-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:21px 22px;
    border-bottom:1px solid #edf0e7
}
.panel-heading h2 {
    font-size:15px;
    margin-bottom:3px
}
.panel-heading p {
    font-size:11px;
    color:var(--muted);
    margin:0
}
.panel-heading>a {
    font-size:11px;
    white-space:nowrap;
    font-weight:550
}
.activity-row {
    display:flex;
    align-items:center;
    gap:13px;
    padding:17px 22px;
    border-bottom:1px solid #edf0e7
}
.activity-row:last-child {
    border:0
}
.activity-row .icon-tile {
    width:33px;
    height:33px;
    border-radius:8px
}
.activity-row .icon {
    width:16px;
    height:16px
}
.activity-row>div {
    flex:1;
    min-width:0
}
.activity-row strong {
    font-size:11px;
    font-weight:600
}
.activity-row p {
    font-size:11px;
    color:var(--muted);
    margin:3px 0 0
}
.activity-row small {
    font-size:10px;
    color:var(--muted)
}
.badge {
    display:inline-flex;
    align-items:center;
    border-radius:5px;
    padding:4px 7px;
    font-size:10px;
    white-space:nowrap;
    line-height:1.6;
    font-weight:500
}
.badge.green {
    background:#ecf3e3;
    color:#4a6a36
}
.badge.amber {
    background:#faf0da;
    color:#8e6a20
}
.field-note {
    padding:25px 27px;
    background:#edf0e2;
    border:1px solid #dfe6ce;
    border-radius:10px;
    margin-bottom:20px;
    overflow:hidden
}
.field-note>.icon {
    width:37px;
    height:37px;
    color:#8caa66;
    margin:9px 0 14px;
    display:block
}
.field-note h2 {
    font-size:25px;
    line-height:1.25;
    letter-spacing:-.7px;
    font-weight:550
}
.field-note p {
    font-size:12px;
    color:#697b57;
    margin:13px 0 18px
}
.field-note .button {
    background:#ffffff88
}
.bottom-nav {
    display:none
}
.toolbar {
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 20px;
    flex-wrap:wrap
}
.search-field {
    display:flex;
    align-items:center;
    gap:9px;
    flex:1;
    min-width:180px;
    border:1px solid var(--line);
    border-radius:7px;
    padding:0 12px;
    background:#fff;
    color:#88947d
}
.search-field .icon {
    width:17px;
    height:17px
}
.search-field input {
    border:0;
    box-shadow:none;
    padding:11px 0;
    background:transparent;
    width:100%;
    min-width:0
}
.search-field input:focus {
    outline:none;
    box-shadow:none
}
.search-field:focus-within {
    outline:2px solid #8da970;
    outline-offset:2px
}
input,select,textarea {
    width:100%;
    border:1px solid var(--line);
    border-radius:var(--control-radius);
    padding:11px 12px;
    background:var(--surface);
    color:#2f4939;
    min-height:var(--control-height);
    font-size:var(--text-control)
}
input::placeholder,textarea::placeholder {
    color:#889080
}
input:focus,select:focus,textarea:focus {
    outline:2px solid #a5be84;
    outline-offset:1px
}
input[readonly] {
    background:#f2f4ed;
    color:#6c7962
}
.toolbar select {
    width:auto;
    max-width:230px;
    min-width:150px
}
.record-count {
    display:flex;
    justify-content:space-between;
    gap:12px;
    font-size:11px;
    color:#768269;
    padding:0 20px 13px
}
.table-scroll {
    overflow:auto;
    scrollbar-width:thin;
    max-width:100%
}
table {
    border-collapse:collapse;
    width:100%;
    text-align:left;
    white-space:nowrap;
    font-size:13px
}
th {
    padding:13px 20px;
    background:#f0f3e9;
    border-block:1px solid var(--line);
    color:#647359;
    font-size:12px;
    font-weight:600
}
td {
    padding:17px 20px;
    border-bottom:1px solid #edf0e7;
    color:#56694e
}
tr:last-child td {
    border-bottom:0
}
td strong {
    display:block;
    color:#334b38;
    font-weight:550;
    font-size:13px
}
td small,th small {
    display:block;
    color:#829073;
    font-size:10px;
    margin-top:3px
}
td a {
    font-size:11px;
    font-weight:500
}
.numeric {
    font-variant-numeric:tabular-nums;
    text-align:right
}
.person-cell {
    display:flex;
    align-items:center;
    gap:11px
}
.analysis-table table {
    min-width:1000px
}
.analysis-table th:nth-child(n+4) {
    text-align:right
}
.empty-state {
    padding:45px 25px;
    text-align:center;
    color:#768469;
    line-height:1.8;
    font-size:13px
}
.notice {
    padding:13px 16px;
    border:1px solid #e8d8ac;
    background:#fff8e8;
    color:#7f622e;
    border-radius:7px;
    font-size:12px;
    margin:0 0 20px;
    line-height:1.7
}
.notice.subtle {
    background:#edf2e5;
    border-color:#dce5ce;
    color:#62754f
}
.tabs {
    display:flex;
    gap:23px;
    border-bottom:1px solid var(--line);
    margin-bottom:21px;
    overflow:auto
}
.tabs button {
    padding:11px 0;
    border:0;
    border-bottom:2px solid transparent;
    background:none;
    font-size:12px;
    color:#7a866d;
    white-space:nowrap
}
.tabs button.active {
    border-color:#54753d;
    color:#355632;
    font-weight:600
}
.tabs span {
    display:inline-block;
    background:#e4ebd8;
    padding:1px 6px;
    border-radius:5px;
    margin-left:7px;
    font-size:10px
}
.form-panel {
    padding:25px 27px;
    overflow:visible
}
.form-panel>p {
    font-size:12px
}
.form-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-top:22px
}
label {
    display:flex;
    flex-direction:column;
    gap:7px;
    font-size:var(--text-label);
    color:#536a48;
    font-weight:500
}
label>span {
    display:contents;
    color:#9a7d41
}
.full {
    grid-column:1/-1
}
.check-label {
    flex-direction:row;
    align-items:flex-start;
    font-size:11px;
    line-height:1.7
}
.check-label input {
    width:17px;
    min-height:17px;
    margin:2px 2px 0 0;
    accent-color:#335c3f
}
.form-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    border-top:1px solid var(--line);
    padding-top:19px;
    margin-top:24px;
    font-size:11px
}
.form-section-heading {
    display:flex;
    align-items:flex-start;
    gap:14px
}
.form-section-heading>span {
    background:#edf2e4;
    border-radius:7px;
    width:33px;
    height:33px;
    display:grid;
    place-items:center;
    color:#6e8b50;
    font-size:11px;
    flex-shrink:0
}
.form-section-heading h2 {
    font-size:16px;
    margin-bottom:4px
}
.form-section-heading p {
    font-size:11px;
    color:var(--muted);
    margin-bottom:0
}
.booking-layout {
    display:grid;
    grid-template-columns:minmax(0,1fr) 270px;
    gap:24px;
    align-items:start
}
.booking-aside {
    background:#ecf0e1;
    border:1px solid #dfe6ce;
    border-radius:9px;
    padding:24px;
    position:sticky;
    top:24px
}
.booking-aside h2 {
    font-size:24px;
    line-height:1.25;
    font-weight:550;
    margin-top:19px;
    margin-bottom:14px;
    letter-spacing:-.7px
}
.booking-aside p,.booking-aside ol {
    font-size:12px;
    color:#6a7b57;
    line-height:1.9
}
.booking-aside ol {
    padding-left:17px;
    margin:19px 0 23px
}
.booking-aside li {
    margin-bottom:7px
}
.aside-note {
    font-size:11px;
    color:#63784e;
    border-top:1px solid #d3dfc2;
    padding-top:17px;
    line-height:1.8
}
.inline-link {
    display:inline-flex;
    font-size:11px;
    font-weight:600;
    margin-top:17px
}
.back-link {
    font-size:11px;
    display:inline-flex;
    gap:8px;
    margin-bottom:20px
}
.sticky-footer {
    margin-top:0;
    background:#f6f7f2;
    padding:18px 0
}
.attendance-layout {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(230px,.65fr);
    max-width:1000px;
    gap:24px
}
.time-card {
    padding:31px 25px;
    text-align:center;
    border-radius:12px;
    background:var(--forest);
    color:#e8efd8;
    margin-bottom:20px
}
.time-card>span {
    font-size:9px;
    letter-spacing:1.5px;
    color:#c4d3b6
}
.time-card strong {
    display:block;
    font-size:54px;
    font-weight:350;
    line-height:1.7;
    letter-spacing:1px;
    font-variant-numeric:tabular-nums
}
.time-card p {
    font-size:14px;
    margin-bottom:13px;
    color:#d1dec4
}
.time-card small {
    font-size:10px;
    color:#b4c8a9;
    display:inline-flex;
    gap:7px;
    align-items:center
}
.time-card .icon {
    width:14px
}
.attendance-status {
    padding:22px;
    display:flex;
    gap:14px;
    align-items:center
}
.attendance-status h2 {
    font-size:16px;
    margin-bottom:4px
}
.attendance-status p {
    font-size:11px;
    color:var(--muted);
    margin:2px 0
}
.activity-tabs {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:22px
}
.activity-tabs a {
    background:#fff;
    border:1px solid var(--line);
    padding:9px 13px;
    border-radius:6px;
    color:#65755a;
    font-size:11px
}
.activity-tabs a.active {
    background:var(--forest);
    color:#fff;
    border-color:var(--forest)
}
.module-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px
}
.module-card {
    display:block;
    padding:24px;
    margin:0;
    color:#3a573c
}
.module-card:hover {
    border-color:#b5c69f
}
.module-card h2 {
    font-size:16px;
    margin-top:18px;
    margin-bottom:8px
}
.module-card p {
    font-size:12px;
    color:var(--muted);
    min-height:42px
}
.module-card>span:last-child {
    font-size:11px;
    font-weight:600
}
.scope-list {
    padding:0;
    list-style:none;
    margin:24px 0 30px
}
.scope-list li {
    padding:14px 0;
    display:flex;
    align-items:center;
    gap:12px;
    border-bottom:1px solid var(--line);
    font-size:13px;
    color:#607353
}
.scope-list .icon {
    width:18px;
    color:#86a06a
}
.faq {
    padding:7px 24px
}
.faq details {
    border-bottom:1px solid var(--line);
    padding:20px 0
}
.faq details:last-child {
    border:0
}
.faq summary {
    cursor:pointer;
    font-size:14px;
    font-weight:550
}
.faq p {
    font-size:13px;
    color:var(--muted);
    margin:12px 0 2px;
    max-width:760px
}
.validation-message,.validation-errors {
    color:#9d493a;
    font-size:12px
}
.invalid {
    border-color:#be7869
}
#blazor-error-ui {
    display:none;
    background:#fff2d3;
    bottom:0;
    padding:12px 25px;
    position:fixed;
    width:100%;
    z-index:1000;
    font-size:13px
}
#blazor-error-ui .dismiss {
    float:right;
    background:none;
    border:0
}
.blazor-error-boundary {
    padding:20px;
    background:#fff1df;
    color:#7e4c27
}
@media(min-width:1500px) {
    .content {
        padding:30px 44px
    }
    .topbar {
        padding-inline:44px
    }
    .sidebar nav>a {
        font-size:13px
    }
}
@media(max-width:1180px) {
    .sidebar {
        width:225px;
        padding-inline:12px
    }
    .main-shell {
        margin-left:225px;
        width:calc(100% - 225px)
    }
    .content {
        padding:24px
    }
    .topbar {
        padding-inline:24px
    }
    .metrics {
        gap:11px
    }
    .metric {
        padding:15px
    }
    .metric>div {
        font-size:10px
    }
    .booking-layout {
        grid-template-columns:minmax(0,1fr) 230px;
        gap:18px
    }
    .booking-aside {
        padding:20px
    }
    .form-panel {
        padding:22px
    }
    .module-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}
@media(max-width:960px) {
    .sidebar {
        width:200px
    }
    .main-shell {
        margin-left:200px;
        width:calc(100% - 200px)
    }
    .brand {
        padding:0 6px;
        gap:8px
    }
    .brand strong {
        font-size:14px
    }
    .sidebar nav>a {
        padding:10px;
        font-size:12px;
        gap:8px
    }
    .metrics {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .dashboard-bottom {
        grid-template-columns:1fr
    }
    .dashboard-bottom .field-note {
        display:none
    }
    .page-heading {
        align-items:flex-start
    }
    .page-heading h1 {
        font-size:27px
    }
    .page-heading>.button {
        margin-top:4px
    }
    .booking-layout {
        grid-template-columns:1fr
    }
    .booking-aside {
        position:static;
        display:none
    }
    .attendance-layout {
        grid-template-columns:1fr
    }
    .attendance-layout>.field-note {
        display:none
    }
    .branch-label {
        display:none
    }
    .record-count span {
        font-size:10px
    }
}
@media(max-width:700px) {
    body {
        font-size:14px
    }
    .sidebar {
        display:none
    }
    .main-shell {
        width:100%;
        margin-left:0
    }
    .topbar {
        height:71px;
        background:var(--forest);
        padding:0 20px;
        color:#f1f4e9;
        border:0
    }
    .mobile-brand {
        display:flex;
        align-items:center;
        gap:9px;
        font-size:14px;
        font-weight:650;
        color:white;
        line-height:1.2
    }
    .mobile-brand:hover {
        color:white
    }
    .mobile-brand img {
        width:30px;
        height:38px;
        object-fit:contain;
        border-radius:4px;
        background:white;
        flex:none
    }
    .content {
        padding:18px 17px 100px
    }
    .page-heading {
        flex-wrap:wrap;
        margin-bottom:22px;
        gap:15px
    }
    .page-heading h1 {
        font-size:27px;
        letter-spacing:-.9px
    }
    .page-heading p {
        font-size:12px
    }
    .eyebrow {
        font-size:9px;
        letter-spacing:1.5px
    }
    .page-heading>.button {
        padding:10px 15px
    }
    .metrics {
        gap:10px;
        margin-bottom:27px
    }
    .metric {
        padding:14px;
        min-height:126px
    }
    .metric>div {
        font-size:10px
    }
    .metric strong {
        font-size:29px;
        margin-top:11px
    }
    .metric small {
        font-size:9px
    }
    .metric .icon-tile {
        width:26px;
        height:26px
    }
    .metric .icon {
        width:14px;
        height:14px
    }
    .section-heading h2 {
        font-size:17px
    }
    .section-heading p {
        font-size:11px
    }
    .section-heading>.small {
        display:none
    }
    .panel-heading {
        padding:17px
    }
    .panel-heading h2 {
        font-size:14px
    }
    .panel-heading p {
        font-size:10px
    }
    .panel-heading>a {
        font-size:10px
    }
    .activity-row {
        padding:16px;
        gap:10px;
        align-items:flex-start
    }
    .activity-row strong {
        font-size:11px
    }
    .activity-row strong .muted {
        display:block;
        margin-top:3px
    }
    .activity-row .badge {
        font-size:9px;
        margin-top:4px
    }
    .activity-row p {
        font-size:10px
    }
    .bottom-nav {
        position:fixed;
        bottom:0;
        left:0;
        right:0;
        z-index:50;
        background:#fff;
        border-top:1px solid #dfe5d8;
        display:flex;
        justify-content:space-around;
        padding:11px 4px max(11px,env(safe-area-inset-bottom));
        box-shadow:0 -3px 14px #173e3204
    }
    .bottom-nav a {
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:5px;
        color:#819073;
        font-size:10px;
        min-width:52px;
        min-height:42px
    }
    .bottom-nav a.active {
        color:#315733;
        font-weight:600
    }
    .bottom-nav .icon {
        width:20px;
        height:20px
    }
    .toolbar {
        padding:14px;
        gap:10px
    }
    .toolbar .search-field {
        flex-basis:100%;
        min-width:0
    }
    .toolbar select {
        flex:1;
        min-width:120px;
        max-width:100%;
        font-size:11px
    }
    .record-count {
        padding:0 14px 12px;
        font-size:10px;
        flex-wrap:wrap
    }
    .record-count span {
        font-size:9px
    }
    th,td {
        padding:14px 16px
    }
    table {
        font-size:12px
    }
    td strong {
        font-size:12px
    }
    .panel {
        border-radius:9px;
        margin-bottom:17px
    }
    .form-panel {
        padding:21px 18px
    }
    .form-grid {
        grid-template-columns:1fr;
        gap:17px
    }
    .full {
        grid-column:auto
    }
    label {
        font-size:12px
    }
    input,select,textarea {
        font-size:16px;
        min-height:46px
    }
    .check-label {
        font-size:11px
    }
    .form-section-heading p {
        font-size:11px
    }
    .form-section-heading h2 {
        font-size:15px
    }
    .form-footer {
        flex-wrap:wrap;
        font-size:10px;
        gap:12px
    }
    .form-footer>.button,.form-footer>.button-group {
        width:100%
    }
    .form-footer .button-group>* {
        flex:1
    }
    .sticky-footer {
        padding-block:15px
    }
    .time-card {
        padding:30px 20px
    }
    .time-card strong {
        font-size:48px
    }
    .time-card small {
        font-size:9px
    }
    .attendance-status {
        padding:22px 18px
    }
    .attendance-status p {
        font-size:11px
    }
    .tabs {
        gap:18px
    }
    .tabs button {
        font-size:11px
    }
    .activity-tabs {
        gap:8px
    }
    .activity-tabs a {
        font-size:10px;
        padding:9px 10px
    }
    .module-grid {
        grid-template-columns:1fr;
        gap:13px
    }
    .module-card {
        padding:21px
    }
    .module-card p {
        min-height:0
    }
    .scope-list li {
        font-size:12px;
        align-items:flex-start
    }
    .faq {
        padding-inline:18px
    }
    .faq summary {
        font-size:13px
    }
    .faq p {
        font-size:12px
    }
    .notice {
        font-size:11px
    }
    .button {
        min-height:44px
    }
}
@media(prefers-reduced-motion:no-preference) {
    a,button {
        transition:background-color .15s,border-color .15s
    }
}
@media print {
    .sidebar,.topbar,.environment-strip,.bottom-nav,.page-footer,.button,.toolbar {
        display:none!important
    }
    .main-shell {
        margin:0;
        width:100%
    }
    .content {
        padding:0
    }
    .table-scroll {
        overflow:visible
    }
    body {
        background:white
    }
    .panel {
        break-inside:avoid
    }
}

h1:focus { outline: none; }

.notice.error { background: #fff1e9; border-color: #edd1c4; color: #924a37; }

h1[tabindex='-1']:focus-visible { outline: none; }

.text-button { border: 0; padding: 0; background: none; color: var(--green); font: inherit; font-size: 12px; cursor: pointer; }

.audit-form-fields {
    border:0;
    margin:0;
    padding:0;
    min-width:0
}
.audit-details {
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 2fr);
    gap:5px 14px;
    overflow-wrap:anywhere
}
.audit-details dd {
    margin:0
}
.audit-photo {
    display:block;
    max-width:100%;
    max-height:420px;
    margin:12px 0;
    border-radius:8px
}


/* Authentication and signed-in workspace */
:root {
    --forest: #173d30;
    --green: #275b42;
    --cream: #f4f6f3;
    --line: #dbe3dc;
    --muted: #526459;
    --control-height: 38px;
    --text-control: 14px;
}
h1 { font-size: 28px; letter-spacing: -.65px; }
h2 { letter-spacing: -.15px; }
label, td { color: #283f34; }
input::placeholder, textarea::placeholder { color: #596b61; }
.auth-shell {
    min-height: 100dvh;
    display: grid;
    align-items: center;
    justify-items: center;
    padding: 24px 16px;
    background: #eff4ef;
}
.auth-card {
    width: min(100%, 410px);
    padding: 30px 32px 26px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 4px solid var(--forest);
    border-radius: 12px;
    box-shadow: 0 10px 32px #173d3010;
}
.auth-logo { display: block; width: 66px; height: auto; margin-bottom: 21px; }
.auth-card h1 { margin-bottom: 4px; }
.auth-card > .muted { margin-bottom: 20px; }
.auth-form { display: grid; gap: 14px; }
.auth-field label { margin-bottom: 5px; font-weight: 600; }
.auth-form input, .auth-form .button { min-height: 44px; }
.auth-form .validation-message { margin-top: 4px; color: #9a3528; }
.password-field { position: relative; }
.password-field input { padding-right: 74px; }
.password-field button { position: absolute; inset: 0 3px 0 auto; min-width: 62px; font-weight: 650; font-size: 13px; }
.auth-help { color: var(--muted); margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; }
.auth-link { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; }
.auth-card .page-heading { margin-bottom: 12px; }
.connection-form .button-group, .form-inline-actions { margin-top: 14px; }

.app-shell { --sidebar-width: 222px; }
.sidebar { width: var(--sidebar-width); padding: 16px 12px; }
.brand { min-height: 58px; gap: 9px; padding: 0 7px 12px; margin-bottom: 5px; border-bottom: 1px solid #ffffff25; }
.brand img { width: 32px; height: auto; }
.brand strong { font-size: 14px; }
.brand small { color: #c4d4c8; font-size: 11px; }
.nav-caption { padding: 12px 9px 4px; color: #c5d6c8; letter-spacing: .6px; text-transform: uppercase; font-size: 10px; }
.sidebar nav > a { padding: 7px 9px; min-height: 36px; margin: 2px 0; gap: 9px; font-size: 13px; color: #ebf2ec; }
.sidebar nav > a.active { background: #e1eedc; color: var(--forest); }
.main-shell { margin-left: var(--sidebar-width); width: calc(100% - var(--sidebar-width)); }
.topbar { height: 56px; padding-inline: 24px; }
.topbar-context, .account-menu summary { display: flex; align-items: center; gap: 10px; }
.branch-label { display: inline; color: var(--muted); font-weight: 600; font-size: 13px; }
.sidebar-toggle { background: white; border: 1px solid var(--line); color: var(--forest); }
.account-menu { position: relative; z-index: 5; }
.account-menu summary { cursor: pointer; list-style: none; min-height: 44px; font-weight: 600; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-menu summary::after { content: "⌄"; color: var(--muted); }
.account-name { max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-panel {
    position: absolute;
    inset: calc(100% + 4px) 0 auto auto;
    min-width: 215px;
    display: grid;
    gap: 6px;
    background: var(--surface);
    color: var(--forest);
    border: 1px solid var(--line);
    border-radius: var(--panel-radius);
    padding: 13px;
    box-shadow: 0 8px 24px #173d3020;
}
.account-menu-panel a { padding-block: 7px; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 8px 12px; background: white; }
.skip-link:not(:focus) { clip-path: inset(50%); }



.content { padding: 22px 24px 28px; }
.page-heading { align-items: center; margin-bottom: 18px; gap: 12px; }
.page-heading h1 { margin-bottom: 2px; }
.page-heading .button-group { justify-content: flex-end; }
.panel { margin-bottom: 16px; }
.panel-heading { padding: 13px 16px; }
.panel-heading h2 { margin: 0; }
.panel-heading p { font-size: 13px; }
.panel-heading > a, .activity-row p, .activity-row time { font-size: 12px; color: var(--muted); }
.activity-row { padding: 11px 16px; }
.activity-row strong, .metric > div { font-size: 13px; font-weight: 600; }
.metrics { gap: 12px; margin-bottom: 16px; }
.metric { padding: 12px 14px; }
.metric strong { margin-top: 5px; font-size: 27px; font-variant-numeric: tabular-nums; }
.metric small { font-size: 12px; color: var(--muted); }
.dashboard-actions .button-group { padding: 12px 16px; }
.dashboard-bottom { gap: 14px; align-items: start; }
.workspace-directory { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.directory-link { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 14px; border-bottom: 1px solid var(--line); }
.directory-link > span { flex: 1; }
.directory-link > .icon { width: 17px; height: 17px; }
.directory-link:last-child { border-bottom: 0; }
.directory-link:hover { background: #f2f6f2; }
.directory-link strong { font-variant-numeric: tabular-nums; }

.toolbar { padding: 11px 14px; gap: 9px; }
.toolbar select { min-width: 0; }
.search-field input { padding-block: 7px; }
.record-count { padding: 0 14px 9px; font-size: 12px; color: var(--muted); }
th, td { padding: 10px 13px; }
th { background: #edf2ee; color: #344b3d; }
td small, th small { color: var(--muted); font-size: 11px; }
td a { font-size: inherit; }
tbody tr:hover { background: #f8faf7; }
.numeric { font-variant-numeric: tabular-nums; }
.analysis-table table { min-width: 0; }
.badge { font-size: 12px; font-weight: 600; background: #edf1ee; color: #3b5144; }
.button.compact { min-height: 32px; padding: 5px 10px; font-size: 13px; }
.empty-state { padding: 25px 15px; color: var(--muted); }
.form-panel { padding: 16px; }
.form-grid { margin-top: 12px; gap: 13px 16px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.form-grid > label { min-width: 0; }
.form-footer { margin-top: 16px; padding-top: 13px; }
.transaction-form { max-width: 960px; }
.report-filters .form-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.filter-hint { margin: 10px 0 0; }
.report-results .panel-heading { flex-wrap: wrap; }
.report-results tbody tr:nth-child(even) { background: #f7f9f7; }
.booking-aside h2, .field-note h2 { font-size: 17px; letter-spacing: 0; }

@media (min-width: 701px) {
    .app-shell.sidebar-collapsed { --sidebar-width: 63px; }
    .sidebar-collapsed .sidebar { padding-inline: 8px; }
    .sidebar-collapsed .brand { justify-content: center; padding-inline: 0; }
    .sidebar-collapsed .brand span, .sidebar-collapsed .nav-caption, .sidebar-collapsed .sidebar nav > a span { display: none; }
    .sidebar-collapsed .sidebar nav > a { justify-content: center; padding-inline: 0; }
}
@media (max-width: 960px) {
    .workspace-directory { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
    :root { --control-height: 44px; }
    .auth-shell { min-height: calc(100dvh - env(safe-area-inset-top)); }
    .auth-card { padding: 22px; }
    .main-shell { margin: 0; width: 100%; }
    .topbar { background: white; color: var(--forest); padding-inline: 14px; border-bottom: 1px solid var(--line); }
    .topbar-context, .account-name { display: none; }
    .mobile-brand, .mobile-brand:hover { color: var(--forest); }
    .mobile-brand img { width: 24px; height: auto; }
    .content { padding: 16px 13px calc(87px + env(safe-area-inset-bottom)); }
    .page-heading { flex-wrap: wrap; }
    .page-heading > .button-group { justify-content: flex-start; }
    .metrics { gap: 8px; }
    .metric { padding: 10px; }
    .metric strong { font-size: 24px; }
    .workspace-directory, .form-grid, .report-filters .form-grid { grid-template-columns: minmax(0,1fr); }
    .bottom-nav { padding-block: 4px max(4px,env(safe-area-inset-bottom)); }
    .bottom-nav a { color: var(--muted); justify-content: center; gap: 3px; min-height: 48px; font-size: 11px; }
    .bottom-nav a.active { color: var(--forest); background: #e7f0e7; border-radius: 7px; }
    .button.compact { min-height: 44px; }
    .stacked-grid { overflow: visible; }
    .stacked-grid table, .stacked-grid tbody { display: block; white-space: normal; }
    .stacked-grid thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .stacked-grid tbody tr {
        display: flex;
        flex-direction: column;
        margin: 0 10px 10px;
        padding: 8px 11px;
        border: 1px solid var(--line);
        border-radius: 8px;
    }
    .stacked-grid td { display: flex; justify-content: space-between; padding: 5px 0; border: 0; gap: 8px; overflow-wrap: anywhere; }
    .stacked-grid td[data-label]::before { content: attr(data-label); color: var(--muted); }
    .stacked-grid td[data-label] > * { text-align: right; }
    .stacked-grid .record-title { order: -1; border-bottom: 1px solid var(--line); margin-bottom: 3px; }
    .stacked-grid .record-actions:empty { display: none; }
}
@media print {
    .skip-link, .report-filters { display: none !important; }
    .main-shell { margin: 0; width: 100%; }
    .content { padding: 0; }
}