:root {
    --dygg-green: #245c3b;
    --dygg-green-dark: #153a27;
    --dygg-green-soft: #e8f1eb;
    --dygg-orange: #c76528;
    --dygg-ink: #18221c;
    --dygg-muted: #5b665f;
    --dygg-border: #d8e0da;
    --dygg-surface: #ffffff;
    --dygg-background: #f6f8f5;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--dygg-background);
    color: var(--dygg-ink);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
}

a {
    color: var(--dygg-green);
}

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

.app-header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    align-items: center;
    padding: 1rem;
    background: var(--dygg-surface);
    border-bottom: 1px solid var(--dygg-border);
}

.brand {
    color: var(--dygg-green-dark);
    font-size: 1.35rem;
    font-weight: 750;
    text-decoration: none;
}

.user-context {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    color: var(--dygg-muted);
    font-size: 0.9rem;
}

.logout-form button,
.stacked-form button,
.checklist-form button,
.action-form button,
.primary-action {
    min-height: 2.75rem;
    border: 0;
    border-radius: 0.4rem;
    background: var(--dygg-green);
    color: #fff;
    cursor: pointer;
    font-weight: 700;
    text-decoration: none;
}

.logout-form button {
    padding: 0.55rem 0.8rem;
}

.app-nav {
    display: flex;
    gap: 1rem;
    padding: 0.65rem 1rem;
    background: var(--dygg-green-soft);
    border-bottom: 1px solid var(--dygg-border);
}

.app-nav a {
    font-weight: 700;
    text-decoration: none;
}

.page-shell {
    width: min(100%, 52rem);
    margin: 0 auto;
    padding: 1rem;
}

.page-heading,
.detail-section,
.auth-panel,
.empty-state,
.visit-card,
.staff-card,
.customer-card {
    background: var(--dygg-surface);
    border: 1px solid var(--dygg-border);
    border-radius: 0.5rem;
    padding: 1rem;
}

.page-heading {
    margin-bottom: 1rem;
}

.page-heading h1,
.auth-panel h1,
.empty-state h2,
.detail-section h2,
.visit-card h2 {
    margin: 0;
    line-height: 1.2;
}

.page-heading p,
.visit-card p {
    margin: 0.25rem 0 0;
}

.eyebrow {
    color: var(--dygg-muted);
    font-size: 0.8rem;
    font-weight: 750;
    letter-spacing: 0;
    text-transform: uppercase;
}

.visit-list,
.staff-list,
.customer-list,
.task-list,
.plain-list {
    display: grid;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.visit-card__header,
.staff-card__header,
.customer-card__header,
.site-item__header,
.task-item__header {
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    align-items: flex-start;
}

.status-pill {
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--dygg-green-soft);
    color: var(--dygg-green-dark);
    padding: 0.2rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 700;
}

address {
    margin-top: 0.85rem;
    color: var(--dygg-muted);
    font-style: normal;
}

.metadata-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.85rem;
    color: var(--dygg-muted);
}

.notes-preview,
.supporting-text {
    color: var(--dygg-muted);
}

.primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 1rem;
}

.action-form {
    margin: 0;
}

.action-row {
    display: grid;
    gap: 0.7rem;
    margin-top: 1rem;
}

.secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    border: 1px solid var(--dygg-green);
    border-radius: 0.4rem;
    background: #fff;
    color: var(--dygg-green);
    cursor: pointer;
    font-weight: 700;
    text-decoration: none;
}

.detail-section {
    margin-top: 1rem;
}

.detail-list {
    display: grid;
    gap: 0.9rem;
    margin: 1rem 0 0;
}

.detail-list div {
    display: grid;
    gap: 0.2rem;
}

.detail-list dt {
    color: var(--dygg-muted);
    font-weight: 700;
}

.detail-list dd {
    margin: 0;
}

.task-item {
    border: 1px solid var(--dygg-border);
    border-radius: 0.4rem;
    padding: 0.85rem;
}

.auth-panel {
    max-width: 26rem;
    margin: 2rem auto 0;
}

.stacked-form {
    display: grid;
    gap: 0.7rem;
    margin-top: 1rem;
}

.checklist-form {
    display: grid;
    gap: 0.7rem;
    margin-top: 1rem;
}

.stacked-form input,
.stacked-form select,
.stacked-form textarea,
.checklist-form select,
.checklist-form textarea {
    min-height: 2.75rem;
    width: 100%;
    border: 1px solid var(--dygg-border);
    border-radius: 0.35rem;
    padding: 0.6rem;
    background: #fff;
}

.form-field {
    display: grid;
    gap: 0.35rem;
}

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

.form-field--inline-checkbox {
    grid-template-columns: auto 1fr;
    align-items: center;
}

.form-field--checkboxes ul {
    display: grid;
    gap: 0.45rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.form-field--checkboxes label {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.checkbox-group {
    display: grid;
    gap: 0.5rem;
    border: 0;
    margin: 1rem 0 0;
    padding: 0;
}

.checkbox-group legend {
    color: var(--dygg-muted);
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.checkbox-group label {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.checkbox-group input[type="checkbox"] {
    min-height: auto;
    width: auto;
}

.staff-card h2,
.customer-card h2 {
    margin: 0;
    line-height: 1.2;
}

.staff-card p,
.customer-card p {
    margin: 0.25rem 0 0;
    color: var(--dygg-muted);
}

.staff-status-list {
    display: grid;
    gap: 0.6rem;
    margin: 1rem 0 0;
}

.staff-status-list div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.staff-status-list dt {
    color: var(--dygg-muted);
    font-weight: 700;
}

.staff-status-list dd {
    margin: 0;
}

.site-item {
    border: 1px solid var(--dygg-border);
    border-radius: 0.4rem;
    padding: 0.85rem;
}

@media (min-width: 40rem) {
    .action-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.error-message {
    color: #8b1d1d;
    font-weight: 700;
}

.message-list {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.message {
    margin: 0;
    border: 1px solid var(--dygg-border);
    border-radius: 0.4rem;
    background: var(--dygg-surface);
    padding: 0.75rem;
}

.message--error {
    border-color: #d9a7a7;
    background: #fff5f5;
    color: #8b1d1d;
}

.readonly-note {
    border-left: 0.25rem solid var(--dygg-border);
    color: var(--dygg-muted);
    margin: 1rem 0 0;
    padding-left: 0.75rem;
}

.back-link {
    display: inline-block;
    margin-bottom: 0.75rem;
    font-weight: 700;
    text-decoration: none;
}

@media (min-width: 42rem) {
    .app-header {
        grid-template-columns: auto 1fr auto;
    }

    .user-context {
        grid-column: auto;
        justify-content: flex-end;
    }
}