.resource-page {
    --resource-ink: var(--tenant-secondary, #10282f);
    --resource-muted: var(--tenant-muted, #62767a);
    --resource-aqua: var(--tenant-primary, #27c7c2);
    --resource-aqua-dark: var(--tenant-primary-dark, #159f9b);
    --resource-mint: var(--tenant-primary-soft, #e6f8f5);
    --resource-cream: var(--tenant-section-background, #f3faf8);
    --resource-line: var(--tenant-line, rgba(16, 40, 47, .11));
    min-height: calc(100vh - 120px);
    padding: 48px 16px 64px;
    color: var(--resource-ink);
    background:
        radial-gradient(circle at 8% 92%, rgba(255, 255, 255, .88), transparent 22%),
        radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--resource-aqua) 18%, transparent), transparent 25%),
        linear-gradient(145deg, var(--tenant-page-start, #f8fcfb), var(--tenant-page-end, #eef8f7));
}

.resource-shell {
    width: min(100%, 980px);
    margin: 0 auto;
}

.resource-editor-shell {
    width: min(100%, 860px);
    margin: 0 auto;
}

.resource-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 30px;
}

.resource-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--resource-aqua-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.resource-eyebrow::before {
    width: 28px;
    height: 1px;
    background: currentColor;
    content: "";
}

.resource-page-header h1,
.resource-editor-header h1 {
    margin: 16px 0 10px;
    color: var(--resource-ink);
    font-size: clamp(36px, 6vw, 52px);
    font-weight: 600;
    letter-spacing: -.035em;
    line-height: 1.05;
}

.resource-page-header > div > p:last-child,
.resource-editor-header > p:last-child {
    max-width: 620px;
    margin: 0;
    color: var(--resource-muted);
    font-size: 16px;
    line-height: 1.7;
}

.resource-primary-button,
.resource-secondary-button,
.resource-edit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: var(--tenant-control-radius, 999px);
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.resource-primary-button {
    min-height: 50px;
    border: 0;
    padding: 0 22px;
    background: var(--resource-ink);
    color: #fff;
    font-size: 13px;
    box-shadow: 0 14px 30px rgba(16, 40, 47, .16);
}

.resource-primary-button:hover {
    transform: translateY(-2px);
    color: #fff;
    box-shadow: 0 18px 36px rgba(16, 40, 47, .23);
}

.resource-secondary-button {
    min-height: 50px;
    border: 1px solid var(--resource-line);
    padding: 0 22px;
    background: var(--tenant-surface, #fff);
    color: var(--resource-ink);
    font-size: 13px;
}

.resource-secondary-button:hover {
    transform: translateY(-1px);
    border-color: var(--resource-aqua);
    color: var(--resource-ink);
}

.resource-message {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 22px;
    padding: 14px 16px;
    border: 1px solid transparent;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.55;
}

.resource-message.success {
    border-color: #b9e3c6;
    background: #edf9f1;
    color: #256d3b;
}

.resource-message.error {
    border-color: #efc2c2;
    background: #fff1f1;
    color: #9d2929;
}

.resource-message.validation-summary-valid {
    display: none;
}

.resource-message ul {
    margin: 0;
    padding-left: 20px;
}

.resource-list-card,
.resource-empty-state,
.resource-editor-section {
    border: 1px solid transparent;
    background:
        linear-gradient(var(--tenant-surface, #fff), var(--tenant-surface, #fff)) padding-box,
        linear-gradient(145deg, color-mix(in srgb, var(--resource-aqua) 30%, transparent), var(--resource-line)) border-box;
    box-shadow: 0 22px 56px rgba(16, 40, 47, .08);
}

.resource-list-card,
.resource-empty-state {
    border-radius: var(--tenant-card-radius, 26px);
}

.resource-list-card {
    padding: clamp(22px, 4vw, 34px);
}

.resource-list-heading {
    margin-bottom: 20px;
}

.resource-list-heading h2 {
    margin: 0 0 4px;
    color: var(--resource-ink);
    font-size: 24px;
    font-weight: 650;
    letter-spacing: -.02em;
}

.resource-list-heading p {
    margin: 0;
    color: var(--resource-muted);
    font-size: 13px;
}

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

.resource-list-item {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--resource-line);
    border-radius: 18px;
    background: linear-gradient(145deg, #fff, #f7fbfa);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.resource-list-item:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--resource-aqua) 48%, transparent);
    box-shadow: 0 12px 24px rgba(16, 40, 47, .07);
}

.resource-avatar {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: var(--resource-mint);
    color: var(--resource-aqua-dark);
    font-family: Georgia, serif;
    font-size: 22px;
    font-weight: 700;
}

.resource-list-copy > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.resource-list-copy h3 {
    margin: 0;
    color: var(--resource-ink);
    font-size: 18px;
    font-weight: 650;
    letter-spacing: -.015em;
}

.resource-list-copy p {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 6px 0 0;
    color: var(--resource-muted);
    font-size: 12px;
}

.resource-list-copy i {
    font-style: normal;
}

.resource-status {
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.resource-status.active {
    background: var(--resource-mint);
    color: var(--resource-aqua-dark);
}

.resource-status.inactive {
    background: #eef1f1;
    color: var(--resource-muted);
}

.resource-edit-button {
    min-height: 40px;
    border: 1px solid var(--resource-line);
    padding: 0 15px;
    background: var(--tenant-surface, #fff);
    color: var(--resource-ink);
    font-size: 11px;
}

.resource-edit-button:hover {
    transform: translateY(-1px);
    border-color: var(--resource-aqua);
    color: var(--resource-ink);
}

.resource-empty-state {
    display: grid;
    justify-items: center;
    padding: 62px 24px;
    text-align: center;
}

.resource-empty-state > span {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--resource-mint);
    color: var(--resource-aqua-dark);
    font-size: 28px;
}

.resource-empty-state h2 {
    margin: 20px 0 8px;
    color: var(--resource-ink);
    font-size: 25px;
}

.resource-empty-state p {
    max-width: 480px;
    margin: 0 0 22px;
    color: var(--resource-muted);
    font-size: 14px;
}

.resource-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 28px;
    color: var(--resource-aqua-dark);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.resource-back-link:hover {
    color: var(--resource-ink);
}

.resource-editor-header {
    margin-bottom: 28px;
}

.resource-editor-section {
    padding: clamp(22px, 4vw, 34px);
    border-radius: var(--tenant-card-radius, 24px);
}

.resource-editor-section + .resource-editor-section {
    margin-top: 20px;
}

.resource-section-heading {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 24px;
}

.resource-section-heading > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--resource-mint);
    color: var(--resource-aqua-dark);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
}

.resource-section-heading h2 {
    margin: 1px 0 4px;
    color: var(--resource-ink);
    font-size: 23px;
    font-weight: 650;
    letter-spacing: -.02em;
}

.resource-section-heading p,
.resource-toggle-card p {
    margin: 0;
    color: var(--resource-muted);
    font-size: 13px;
    line-height: 1.6;
}

.resource-general-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
    gap: 16px;
}

.resource-field,
.resource-time-field {
    display: grid;
    gap: 7px;
}

.resource-field label,
.resource-time-field label,
.resource-toggle-card label {
    color: var(--resource-ink);
    font-size: 13px;
    font-weight: 800;
}

.resource-field input,
.resource-time-field input {
    width: 100%;
    min-height: 52px;
    border: 1px solid var(--resource-line);
    border-radius: 15px;
    padding: 0 15px;
    background: var(--tenant-surface, #fff);
    color: var(--resource-ink);
    font: inherit;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.resource-field input:focus,
.resource-time-field input:focus {
    border-color: var(--resource-aqua);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--resource-aqua) 12%, transparent);
}

.resource-validation {
    color: #a12626;
    font-size: 12px;
    font-weight: 700;
}

.resource-validation:empty {
    display: none;
}

.resource-section-validation {
    display: block;
    margin: -12px 0 16px;
}

.resource-toggle-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 84px;
    padding: 16px;
    border: 1px solid var(--resource-line);
    border-radius: 16px;
    background: linear-gradient(145deg, var(--resource-cream), #f4fbfa);
}

.resource-toggle {
    position: relative;
    flex: 0 0 auto;
    width: 54px;
    height: 30px;
    margin: 0;
    appearance: none;
    border: 0;
    border-radius: 999px;
    background: #cbd5d6;
    cursor: pointer;
    outline: none;
    transition: background .2s ease, box-shadow .2s ease;
}

.resource-toggle::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 3px 8px rgba(16, 40, 47, .2);
    content: "";
    transition: transform .2s ease;
}

.resource-toggle:checked {
    background: var(--resource-aqua);
}

.resource-toggle:checked::after {
    transform: translateX(24px);
}

.resource-toggle:focus-visible {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--resource-aqua) 20%, transparent);
}

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

.resource-treatment-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 70px;
    border: 1px solid var(--resource-line);
    border-radius: 16px;
    padding: 13px;
    background: #fff;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.resource-treatment-option:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--resource-aqua) 50%, transparent);
}

.resource-treatment-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.resource-treatment-check {
    display: grid;
    place-items: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border: 1px solid var(--resource-line);
    border-radius: 9px;
    background: #f5f8f8;
    color: transparent;
    font-size: 12px;
    font-weight: 900;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.resource-treatment-option:has(input:checked) {
    border-color: color-mix(in srgb, var(--resource-aqua) 56%, transparent);
    background: var(--resource-mint);
}

.resource-treatment-option input:focus-visible + .resource-treatment-check {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--resource-aqua) 20%, transparent);
}

.resource-treatment-option input:checked + .resource-treatment-check {
    border-color: var(--resource-aqua);
    background: var(--resource-aqua);
    color: #fff;
}

.resource-treatment-option > span:last-child {
    display: grid;
    gap: 3px;
}

.resource-treatment-option strong {
    color: var(--resource-ink);
    font-size: 13px;
}

.resource-treatment-option strong em {
    margin-left: 5px;
    border-radius: 999px;
    padding: 3px 6px;
    background: #eef1f1;
    color: var(--resource-muted);
    font-size: 8px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.resource-treatment-option small {
    color: var(--resource-muted);
    font-size: 11px;
}

.resource-inline-empty {
    padding: 20px;
    border: 1px dashed var(--resource-line);
    border-radius: 16px;
    background: var(--resource-cream);
    color: var(--resource-muted);
    font-size: 13px;
    text-align: center;
}

.resource-schedule {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--resource-line);
    border-radius: 18px;
}

.resource-day-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(130px, .55fr) minmax(130px, .55fr);
    align-items: start;
    gap: 14px;
    padding: 15px 17px;
    background: #fff;
    transition: background .2s ease, opacity .2s ease;
}

.resource-day-row + .resource-day-row {
    border-top: 1px solid var(--resource-line);
}

.resource-day-row.disabled {
    background: #f8f9f9;
}

.resource-day-row.disabled .resource-time-field {
    opacity: .42;
}

.resource-day-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
}

.resource-day-toggle label {
    color: var(--resource-ink);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.resource-time-field label {
    font-size: 10px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.resource-time-field input {
    min-height: 42px;
    padding-inline: 11px;
    font-size: 13px;
}

.resource-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
}

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

.resource-override-item {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--resource-line);
    border-radius: 18px;
    background: linear-gradient(145deg, #fff, #f7fbfa);
}

.resource-override-date {
    display: grid;
    place-items: center;
    width: 58px;
    min-height: 58px;
    border-radius: 15px;
    background: var(--resource-mint);
    color: var(--resource-aqua-dark);
    line-height: 1;
}

.resource-override-date strong {
    align-self: end;
    font-family: Georgia, serif;
    font-size: 22px;
}

.resource-override-date span {
    align-self: start;
    margin-top: 4px;
    font-size: 9px;
    font-weight: 850;
    text-transform: uppercase;
}

.resource-override-copy h3 {
    margin: 0;
    font-size: 17px;
    text-transform: capitalize;
}

.resource-override-copy p {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 7px 0 0;
    color: var(--resource-muted);
    font-size: 12px;
}

.resource-override-status {
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.resource-override-status.off {
    background: #fff0f0;
    color: #a13a3a;
}

.resource-override-status.available {
    background: var(--resource-mint);
    color: var(--resource-aqua-dark);
}

.resource-override-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.resource-override-actions form {
    margin: 0;
}

.resource-delete-button {
    min-height: 40px;
    border: 1px solid var(--resource-line);
    border-radius: 999px;
    padding: 0 15px;
    background: #fff;
    color: #a13a3a;
    font-size: 11px;
    font-weight: 800;
}

.resource-delete-dialog {
    width: min(92vw, 510px);
    margin: auto;
    border: 1px solid rgba(161, 58, 58, .18);
    border-radius: 26px;
    padding: 0;
    background: #fff;
    color: var(--resource-ink);
    box-shadow: 0 28px 80px rgba(11, 35, 42, .24);
}

.resource-delete-dialog[open] {
    animation: resource-dialog-in .18s ease-out;
}

.resource-delete-dialog::backdrop {
    background: rgba(8, 29, 35, .58);
    backdrop-filter: blur(4px);
}

.resource-delete-dialog-content {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 30px 30px 24px;
}

.resource-delete-dialog-icon {
    display: grid;
    flex: 0 0 48px;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: #fff0f0;
    color: #a13a3a;
    font-family: Georgia, serif;
    font-size: 26px;
    font-weight: 800;
}

.resource-delete-dialog-copy .resource-eyebrow {
    margin: 1px 0 7px;
    color: #a13a3a;
}

.resource-delete-dialog-copy h2 {
    margin: 0;
    font-family: Georgia, serif;
    font-size: 19px;
    line-height: 1.3;
}

.resource-delete-dialog-copy > p:last-child {
    margin: 9px 0 0;
    color: var(--resource-muted);
    font-size: 13px;
    line-height: 1.6;
}

.resource-delete-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid var(--resource-line);
    padding: 18px 30px 22px;
    background: #fbfdfc;
}

.resource-confirm-delete-button {
    min-height: 44px;
    border: 0;
    border-radius: 999px;
    padding: 0 20px;
    background: #a13a3a;
    color: #fff;
    font-size: 12px;
    font-weight: 850;
    box-shadow: 0 10px 24px rgba(161, 58, 58, .2);
}

.resource-confirm-delete-button:hover {
    background: #842d2d;
}

@keyframes resource-dialog-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

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

.resource-override-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.resource-toggle-card.disabled {
    opacity: .48;
}

.resource-end-date-field[hidden] {
    display: none;
}

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

[data-override-times-section] {
    transition: opacity .2s ease;
}

[data-override-times-section].disabled {
    opacity: .48;
}

@media (max-width: 760px) {
    .resource-page-header {
        align-items: stretch;
        flex-direction: column;
    }

    .resource-page-header .resource-primary-button {
        align-self: flex-start;
    }

    .resource-general-grid,
    .resource-treatment-grid,
    .resource-override-date-grid,
    .resource-override-options {
        grid-template-columns: 1fr;
    }

    .resource-day-row {
        grid-template-columns: 1fr 1fr;
    }

    .resource-day-toggle {
        grid-column: 1 / -1;
    }
}

@media (max-width: 520px) {
    .resource-page {
        padding: 28px 14px 44px;
    }

    .resource-list-card,
    .resource-empty-state,
    .resource-editor-section {
        border-radius: 21px;
    }

    .resource-list-item {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .resource-avatar {
        width: 48px;
        height: 48px;
    }

    .resource-edit-button {
        grid-column: 1 / -1;
    }

    .resource-day-row {
        grid-template-columns: 1fr;
    }

    .resource-day-toggle {
        grid-column: auto;
    }

    .resource-form-actions {
        display: grid;
    }

    .resource-override-item {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .resource-override-date {
        width: 52px;
        min-height: 52px;
    }

    .resource-override-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    .resource-override-time-grid {
        grid-template-columns: 1fr;
    }

    .resource-delete-dialog-content {
        padding: 24px 20px 20px;
    }

    .resource-delete-dialog-actions {
        display: grid;
        padding: 16px 20px 20px;
    }
}