:root {
    color-scheme: dark;

    --font-sans:
        Inter, ui-sans-serif, system-ui, -apple-system,
        BlinkMacSystemFont, "Segoe UI", sans-serif;

    --colour-bg: #141518;
    --colour-bg-deep: #101114;
    --colour-sidebar: #17181c;
    --colour-panel: #1d1f24;
    --colour-panel-raised: #22252b;
    --colour-panel-muted: #191b20;
    --colour-border: #2d3037;
    --colour-border-soft: #25282e;

    --colour-text: #f5f6f8;
    --colour-text-soft: #c1c5cd;
    --colour-muted: #8f949e;

    --colour-primary: #2f5ef5;
    --colour-primary-hover: #416df7;
    --colour-primary-soft: var(--colour-panel-raised);

    --colour-success: #31c46c;
    --colour-warning: #f0ad42;
    --colour-danger: #ef5b63;

    --shadow-panel:
        0 22px 55px rgb(0 0 0 / 22%);

    --radius-small: 0.6rem;
    --radius-medium: 0.85rem;
    --radius-large: 1.1rem;
    --radius-xl: 1.4rem;

    font-family: var(--font-sans);
    color: var(--colour-text);
    background: var(--colour-bg);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    margin: 0;
    background: var(--colour-bg);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}

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

button,
a {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: inherit;
}

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

svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

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

h1,
h2,
h3 {
    letter-spacing: -0.025em;
}

h1 {
    margin-bottom: 0.65rem;
    font-size: clamp(2rem, 3vw, 3.15rem);
    line-height: 1.05;
}

h2 {
    margin-bottom: 0.45rem;
    font-size: 1.25rem;
}

h3 {
    margin-bottom: 0.4rem;
    font-size: 1rem;
}

p {
    color: var(--colour-text-soft);
    line-height: 1.65;
}

.eyebrow {
    margin-bottom: 0.65rem;
    color: #7693ff;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.muted {
    color: var(--colour-muted);
}

.button {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.72rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-medium);
    cursor: pointer;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition:
        background 160ms ease,
        border-color 160ms ease,
        transform 160ms ease;
}

.button:hover {
    transform: translateY(-1px);
}

.button-primary {
    color: #ffffff;
    background: var(--colour-primary);
}

.button-primary:hover {
    background: var(--colour-primary-hover);
}

.button-secondary {
    border-color: var(--colour-border);
    color: var(--colour-text);
    background: var(--colour-panel-raised);
}

.button-secondary:hover {
    border-color: var(--colour-primary);
    background: var(--colour-primary-soft);
}

.button-small {
    min-height: 2.35rem;
    padding: 0.55rem 0.8rem;
    font-size: 0.86rem;
}

.button-full {
    width: 100%;
}

.icon-button {
    display: inline-grid;
    width: 2.45rem;
    height: 2.45rem;
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-small);
    color: var(--colour-muted);
    background: transparent;
    cursor: pointer;
    place-items: center;
}

.icon-button:hover {
    color: var(--colour-text);
    background: var(--colour-panel-raised);
}

.icon-button svg {
    width: 1.1rem;
    height: 1.1rem;
}

.field {
    margin-top: 1.25rem;
}

.field label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--colour-text-soft);
    font-size: 0.88rem;
    font-weight: 700;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 0.82rem 0.9rem;
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-medium);
    outline: none;
    color: var(--colour-text);
    background: var(--colour-panel);
    transition:
        border-color 150ms ease,
}

.field input::placeholder,
.field textarea::placeholder {
    color: var(--colour-muted);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--colour-primary);
    outline: 2px solid var(--colour-primary);
    outline-offset: 2px;
}

.field-error {
    margin: 0.4rem 0 0;
    color: #ff8a91;
    font-size: 0.84rem;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 1rem 0 1.4rem;
    color: var(--colour-text-soft);
    font-size: 0.9rem;
}

.checkbox-row input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--colour-primary);
}

.flash {
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid;
    border-radius: var(--radius-medium);
    font-size: 0.9rem;
}

.flash-error {
    border-color: var(--colour-danger);
    color: #ffafb4;
    background: var(--colour-panel-raised);
}

.flash-success {
    border-color: var(--colour-success);
    color: #85e6ab;
    background: var(--colour-panel-raised);
}

.flash-warning {
    border-color: var(--colour-warning);
    color: #ffd083;
    background: var(--colour-panel-raised);
}

/* Authentication */

.auth-layout {
    display: grid;
    min-height: 100vh;
    grid-template-columns: minmax(0, 1.15fr) minmax(420px, 0.85fr);
}

.auth-brand-panel {
    position: relative;
    display: flex;
    min-height: 100vh;
    align-items: flex-end;
    overflow: hidden;
    padding: clamp(2rem, 6vw, 6rem);
    background: var(--colour-bg-deep);
}

.auth-brand-content {
    position: relative;
    z-index: 1;
    max-width: 650px;
}

.auth-brand-logo {
    width: min(350px, 80%);
    height: auto;
    object-fit: contain;
    margin-bottom: clamp(3rem, 8vh, 7rem);
}

.auth-brand-content h1 {
    max-width: 600px;
    font-size: clamp(3rem, 6vw, 6rem);
}

.auth-brand-content p:last-child {
    max-width: 580px;
    font-size: 1.08rem;
}

.auth-form-panel {
    display: grid;
    min-height: 100vh;
    padding: 2rem;
    background: var(--colour-bg-deep);
    place-items: center;
}

.auth-form-container {
    width: min(100%, 430px);
}

.auth-card {
    padding: clamp(1.5rem, 4vw, 2.4rem);
    border: 1px solid var(--colour-border-soft);
    border-radius: var(--radius-xl);
    background: var(--colour-panel);
    box-shadow: var(--shadow-panel);
}

.auth-heading {
    margin-bottom: 1.8rem;
}

.auth-heading h2 {
    font-size: 2rem;
}

/* Platform administration */

.platform-page {
    color: var(--colour-text);
    background: var(--colour-bg);
}

.platform-header {
    display: flex;
    min-height: 74px;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    border-bottom: 1px solid var(--colour-border);
    background: var(--colour-sidebar);
}

.platform-brand {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    color: var(--colour-text);
    font-weight: 800;
    text-decoration: none;
}

.platform-brand img {
    width: 145px;
    height: auto;
    object-fit: contain;
}

.platform-brand span {
    padding-left: 0.9rem;
    border-left: 1px solid var(--colour-border);
    color: var(--colour-text-soft);
}

.account-menu {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.account-copy strong,
.account-copy span {
    display: block;
    text-align: right;
}

.account-copy span {
    margin-top: 0.18rem;
    color: var(--colour-muted);
    font-size: 0.78rem;
}

.platform-page .button-secondary {
    border-color: var(--colour-border);
    color: var(--colour-text);
    background: var(--colour-panel-raised);
}

.platform-content {
    width: min(1180px, calc(100% - 2rem));
    margin: 0 auto;
    padding: 3rem 0;
}

.platform-page .page-heading p,
.platform-page .muted {
    color: var(--colour-muted);
}

.panel,
.metric-card {
    border: 1px solid var(--colour-border);
    border-radius: 1rem;
    background: var(--colour-panel);
    box-shadow: 0 12px 36px rgb(0 0 0 / 5%);
}

.panel {
    padding: 1.5rem;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 2rem 0 1rem;
}

.metric-card {
    padding: 1.35rem;
}

.metric-card span {
    display: block;
    color: #74808d;
}

.metric-card strong {
    display: block;
    margin-top: 0.45rem;
    color: #18212d;
    font-size: 2rem;
}

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

.record-list {
    display: grid;
}

.record-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid #edf0f3;
}

.record-row:last-child {
    border-bottom: 0;
}

.record-row strong,
.record-row span {
    display: block;
}

.record-row div > span {
    margin-top: 0.22rem;
    color: #788391;
    font-size: 0.84rem;
}

.status-badge {
    padding: 0.35rem 0.58rem;
    border-radius: 999px;
    color: #344051;
    background: #edf1f5;
    font-size: 0.75rem;
    text-transform: capitalize;
}

/* Operator workspace */

.operator-shell {
    display: grid;
    min-height: 100vh;
    grid-template-columns: 264px minmax(0, 1fr);
}

.operator-sidebar {
    position: fixed;
    z-index: 50;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    width: 264px;
    flex-direction: column;
    padding: 1.2rem 1rem;
    border-right: 1px solid var(--colour-border-soft);
    background: var(--colour-sidebar);
}

.sidebar-header {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.55rem;
}

.sidebar-brand {
    display: block;
}

.sidebar-brand img {
    width: 148px;
    height: auto;
    object-fit: contain;
}

.sidebar-close {
    display: none;
    border: 0;
    color: var(--colour-muted);
    background: transparent;
    cursor: pointer;
    font-size: 1.8rem;
}

.facility-identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.1rem 0 1.5rem;
    padding: 0.85rem;
    border: 1px solid var(--colour-border-soft);
    border-radius: var(--radius-medium);
    background: var(--colour-panel);
}

.facility-avatar,
.account-avatar {
    display: grid;
    flex: 0 0 auto;
    border-radius: 0.65rem;
    color: #ffffff;
    background: var(--colour-primary);
    font-weight: 800;
    place-items: center;
}

.facility-avatar {
    width: 2.3rem;
    height: 2.3rem;
}

.facility-identity strong,
.facility-identity span {
    display: block;
}

.facility-identity strong {
    overflow: hidden;
    max-width: 150px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.facility-identity span {
    margin-top: 0.18rem;
    color: var(--colour-muted);
    font-size: 0.73rem;
}

.sidebar-navigation {
    overflow-y: auto;
}

.nav-section-label {
    margin: 0.2rem 0 0.55rem;
    padding: 0 0.75rem;
    color: var(--colour-muted);
    font-size: 0.66rem;
    font-weight: 750;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.nav-section-spaced {
    margin-top: 1.4rem;
}

.nav-link {
    display: flex;
    min-height: 2.85rem;
    align-items: center;
    gap: 0.85rem;
    margin: 0.12rem 0;
    padding: 0.7rem 0.78rem;
    border: 1px solid transparent;
    border-radius: var(--radius-medium);
    color: var(--colour-text-soft);
    font-size: 0.91rem;
    font-weight: 650;
    text-decoration: none;
    transition:
        color 150ms ease,
        background 150ms ease,
        border-color 150ms ease;
}

.nav-link:hover {
    color: var(--colour-text);
    background: var(--colour-panel-raised);
}

.nav-link.active {
    border-color: var(--colour-primary);
    color: var(--colour-primary);
    background: var(--colour-primary-soft);
}

.nav-icon {
    display: grid;
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    place-items: center;
}

.nav-icon svg {
    width: 1.15rem;
    height: 1.15rem;
}

.sidebar-account {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: auto;
    padding: 1rem 0.35rem 0;
    border-top: 1px solid var(--colour-border-soft);
}

.account-avatar {
    width: 2.45rem;
    height: 2.45rem;
    font-size: 0.76rem;
}

.sidebar-account-copy {
    min-width: 0;
    flex: 1;
}

.sidebar-account-copy strong,
.sidebar-account-copy span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-account-copy strong {
    font-size: 0.82rem;
}

.sidebar-account-copy span {
    margin-top: 0.2rem;
    color: var(--colour-muted);
    font-size: 0.68rem;
}

.sidebar-account form {
    margin: 0;
}

.operator-workspace {
    min-width: 0;
    grid-column: 2;
}

.operator-topbar {
    display: flex;
    min-height: 66px;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    border-bottom: 1px solid var(--colour-border-soft);
    background: var(--colour-sidebar);
}

.mobile-nav-toggle {
    display: inline-grid;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-small);
    color: var(--colour-text-soft);
    background: var(--colour-panel);
    cursor: pointer;
    place-items: center;
}

.mobile-nav-toggle svg {
    width: 1.2rem;
    height: 1.2rem;
}

.topbar-brand img {
    width: 40px;
    height: auto;
    object-fit: contain;
}

.topbar-context {
    color: var(--colour-muted);
    font-size: 0.78rem;
}

.operator-content {
    width: min(1420px, 100%);
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 3.5rem);
}

.operator-page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2rem;
}

.operator-page-heading p:last-child {
    max-width: 650px;
    margin-bottom: 0;
}

.operator-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.operator-metric-card,
.workspace-panel {
    border: 1px solid var(--colour-border-soft);
    border-radius: var(--radius-large);
    background: var(--colour-panel);
    box-shadow: 0 14px 38px rgb(0 0 0 / 14%);
}

.operator-metric-card {
    position: relative;
    overflow: hidden;
    min-height: 175px;
    padding: 1.25rem;
}

.metric-card-accent {
    border-color: var(--colour-primary);
    background: var(--colour-panel);
}

.metric-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.metric-label {
    color: var(--colour-text-soft);
    font-size: 0.82rem;
    font-weight: 650;
}

.metric-icon {
    display: grid;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 0.62rem;
    color: #7794ff;
    background: var(--colour-primary-soft);
    place-items: center;
}

.metric-icon-success {
    color: #7ee5a7;
    background: var(--colour-panel-raised);
}

.metric-icon svg {
    width: 1rem;
    height: 1rem;
}

.operator-metric-card > strong {
    display: block;
    margin: 1.3rem 0 0.25rem;
    font-size: 2.15rem;
    line-height: 1;
}

.metric-caption {
    color: var(--colour-muted);
    font-size: 0.75rem;
}

.operator-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.75fr);
    gap: 1rem;
}

.workspace-panel {
    min-height: 400px;
    padding: 1.35rem;
}

.panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.panel-heading .eyebrow {
    margin-bottom: 0.3rem;
}

.panel-heading h2 {
    margin-bottom: 0;
}

.text-link {
    color: #829cff;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
}

.text-link:hover {
    color: #a6b7ff;
}

.empty-state {
    display: flex;
    min-height: 300px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 2rem;
    border: 1px dashed var(--colour-border);
    border-radius: var(--radius-medium);
    text-align: center;
}

.empty-state-compact {
    min-height: 260px;
}

.empty-state-icon {
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1rem;
    border-radius: 1rem;
    color: #819bff;
    background: var(--colour-primary-soft);
    place-items: center;
}

.empty-state-icon svg {
    width: 1.45rem;
    height: 1.45rem;
}

.empty-state p {
    max-width: 430px;
    margin-bottom: 1.25rem;
    color: var(--colour-muted);
    font-size: 0.88rem;
}

.navigation-overlay {
    display: none;
}

@media (max-width: 1100px) {
    .operator-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .operator-dashboard-grid {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 860px) {
    .auth-layout {
        grid-template-columns: 1fr;
    }

    .auth-brand-panel {
        display: none;
    }

    .operator-shell {
        display: block;
    }

    .operator-sidebar {
        width: min(310px, calc(100vw - 44px));
        transform: translateX(-105%);
        box-shadow: 20px 0 50px rgb(0 0 0 / 45%);
        transition: transform 200ms ease;
    }

    .nav-open {
        overflow: hidden;
    }

    .nav-open .operator-sidebar {
        transform: translateX(0);
    }

    .sidebar-close {
        display: block;
    }

    .navigation-overlay {
        position: fixed;
        z-index: 40;
        inset: 0;
        display: block;
        visibility: hidden;
        background: rgb(0 0 0 / 55%);
        opacity: 0;
        transition:
            opacity 200ms ease,
            visibility 200ms ease;
    }

    .nav-open .navigation-overlay {
        visibility: visible;
        opacity: 1;
    }

    .operator-workspace {
        min-height: 100vh;
    }

    .operator-topbar {
        display: flex;
    }

    .operator-content {
        padding-top: 1.5rem;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .operator-page-heading {
        align-items: stretch;
        flex-direction: column;
        gap: 1.25rem;
    }

    .operator-page-heading .button {
        width: 100%;
    }

    .operator-metric-grid,
    .metric-grid {
        grid-template-columns: 1fr;
    }

    .operator-metric-card {
        min-height: 155px;
    }

    .operator-content {
        padding: 1.15rem;
    }

    .workspace-panel {
        min-height: 350px;
        padding: 1rem;
    }

    .platform-header {
        align-items: flex-start;
        padding: 1rem;
    }

    .platform-brand img {
        width: 115px;
    }

    .account-copy {
        display: none;
    }

    .platform-content {
        padding-top: 1.5rem;
    }
}

/* Customer management */

.button-quiet {
    color: var(--colour-muted);
    background: transparent;
}

.button-quiet:hover {
    color: var(--colour-text);
    background: var(--colour-panel-raised);
}

.button-danger {
    border-color: var(--colour-danger);
    color: #ff9aa0;
    background: var(--colour-panel-raised);
}

.button-danger:hover {
    border-color: var(--colour-danger);
    background: var(--colour-panel-raised);
}

.customer-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 240px));
    gap: 1rem;
    margin-bottom: 1rem;
}

.summary-card {
    padding: 1.15rem 1.25rem;
    border: 1px solid var(--colour-border-soft);
    border-radius: var(--radius-large);
    background: var(--colour-panel);
}

.summary-card span,
.summary-card strong {
    display: block;
}

.summary-card span {
    color: var(--colour-muted);
    font-size: 0.8rem;
}

.summary-card strong {
    margin-top: 0.4rem;
    font-size: 1.75rem;
}

.customer-list-panel {
    min-height: 480px;
}

.customer-toolbar {
    margin-bottom: 1rem;
}

.customer-search-form {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.search-input-wrap {
    position: relative;
    flex: 1;
}

.search-input-wrap svg {
    position: absolute;
    top: 50%;
    left: 0.9rem;
    width: 1rem;
    height: 1rem;
    color: var(--colour-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.search-input-wrap input,
.customer-search-form select {
    min-height: 2.75rem;
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-medium);
    outline: none;
    color: var(--colour-text);
    background: var(--colour-panel);
}

.search-input-wrap input {
    width: 100%;
    padding: 0.72rem 0.9rem 0.72rem 2.65rem;
}

.customer-search-form select {
    min-width: 165px;
    padding: 0.72rem 2rem 0.72rem 0.85rem;
}

.search-input-wrap input:focus,
.customer-search-form select:focus {
    border-color: var(--colour-primary);
    outline: 2px solid var(--colour-primary);
    outline-offset: 2px;
}

.customer-table-wrap {
    overflow-x: auto;
}

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

.data-table th {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--colour-border);
    color: var(--colour-muted);
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.09em;
    text-align: left;
    text-transform: uppercase;
}

.data-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--colour-border-soft);
    color: var(--colour-text-soft);
    vertical-align: middle;
}

.data-table tbody tr {
    transition: background 140ms ease;
}

.data-table tbody tr:hover {
    background: var(--colour-panel-raised);
}

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

.data-table td span,
.data-table td small {
    display: block;
}

.data-table td small {
    margin-top: 0.25rem;
    color: var(--colour-muted);
}

.customer-name-link {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--colour-text);
    text-decoration: none;
}

.customer-name-link strong {
    display: block;
}

.customer-list-avatar,
.customer-profile-avatar {
    display: grid;
    flex: 0 0 auto;
    color: #ffffff;
    background: var(--colour-primary);
    font-weight: 800;
    place-items: center;
}

.customer-list-avatar {
    width: 2.45rem;
    height: 2.45rem;
    border-radius: 0.72rem;
    font-size: 0.8rem;
}

.table-muted,
.profile-empty {
    color: var(--colour-muted);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.58rem;
    border: 1px solid;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
}

.status-pill::before {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    content: "";
}

.status-pill-active {
    border-color: var(--colour-success);
    color: #83e3a9;
    background: var(--colour-panel-raised);
}

.status-pill-active::before {
    background: var(--colour-success);
}

.status-pill-archived {
    border-color: var(--colour-border);
    color: #b4b8c0;
    background: var(--colour-panel-raised);
}

.status-pill-archived::before {
    background: var(--colour-muted);
}

.table-action-cell {
    width: 50px;
    text-align: right;
}

.table-open-link {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    border-radius: 0.55rem;
    color: #819bff;
    text-decoration: none;
    place-items: center;
}

.table-open-link:hover {
    background: var(--colour-primary-soft);
}

.customer-empty-state {
    min-height: 360px;
}

.customer-form-layout {
    display: grid;
    align-items: start;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 1rem;
}

.customer-form-main {
    display: grid;
    gap: 1rem;
}

.form-section {
    min-height: 0;
}

.form-section-heading {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--colour-border-soft);
}

.form-section-heading h2 {
    margin-bottom: 0.25rem;
}

.form-section-heading p {
    margin-bottom: 0;
    color: var(--colour-muted);
    font-size: 0.84rem;
}

.form-section-number {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    border-radius: 0.65rem;
    color: #819bff;
    background: var(--colour-primary-soft);
    font-size: 0.72rem;
    font-weight: 800;
    place-items: center;
}

.form-grid {
    display: grid;
    gap: 1rem;
}

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

.form-section textarea {
    resize: vertical;
}

.customer-form-actions {
    position: relative;
}

.sticky-action-panel {
    position: sticky;
    top: 1.5rem;
    min-height: 0;
}

.sticky-action-panel p {
    color: var(--colour-muted);
    font-size: 0.84rem;
}

.sticky-action-panel .button + .button {
    margin-top: 0.7rem;
}

.customer-profile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.customer-profile-identity {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.customer-profile-avatar {
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 1.15rem;
    font-size: 1.35rem;
}

.customer-profile-identity h1 {
    margin-bottom: 0;
}

.customer-profile-identity p {
    margin: 0.4rem 0 0;
    color: var(--colour-muted);
}

.profile-title-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.profile-actions {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.profile-actions form {
    margin: 0;
}

.customer-profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.65fr);
    gap: 1rem;
}

.customer-profile-main,
.customer-profile-aside {
    display: grid;
    align-content: start;
    gap: 1rem;
}

.profile-panel {
    min-height: 0;
}

.profile-details,
.profile-metadata {
    display: grid;
    margin: 0;
}

.profile-details {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.profile-details div,
.profile-metadata div {
    min-width: 0;
}

.profile-details dt,
.profile-metadata dt {
    margin-bottom: 0.4rem;
    color: var(--colour-muted);
    font-size: 0.73rem;
    font-weight: 700;
    text-transform: uppercase;
}

.profile-details dd,
.profile-metadata dd {
    margin: 0;
    color: var(--colour-text-soft);
    overflow-wrap: anywhere;
}

.profile-details a {
    color: #8aa1ff;
    text-decoration: none;
}

.profile-details a:hover {
    text-decoration: underline;
}

.profile-metadata {
    gap: 1rem;
}

.profile-metadata div {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--colour-border-soft);
}

.profile-metadata div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.metadata-id {
    color: var(--colour-muted) !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.72rem;
}

.customer-address {
    display: grid;
    gap: 0.3rem;
    color: var(--colour-text-soft);
    font-style: normal;
    line-height: 1.5;
}

.customer-notes {
    color: var(--colour-text-soft);
    line-height: 1.7;
}

.mini-empty-state {
    padding: 1rem;
    border: 1px dashed var(--colour-border);
    border-radius: var(--radius-medium);
    background: var(--colour-panel-raised);
}

.mini-empty-state p {
    margin: 0;
    color: var(--colour-muted);
    font-size: 0.84rem;
}

@media (max-width: 1050px) {
    .customer-form-layout,
    .customer-profile-grid {
        grid-template-columns: 1fr;
    }

    .sticky-action-panel {
        position: static;
    }

    .customer-form-actions {
        order: -1;
    }
}

@media (max-width: 760px) {
    .customer-search-form {
        align-items: stretch;
        flex-direction: column;
    }

    .customer-search-form select {
        width: 100%;
    }

    .customer-summary-grid,
    .form-grid-two,
    .profile-details {
        grid-template-columns: 1fr;
    }

    .customer-profile-header {
        align-items: stretch;
        flex-direction: column;
    }

    .profile-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .profile-actions .button,
    .profile-actions form,
    .profile-actions form button {
        width: 100%;
    }

    .customer-profile-identity {
        align-items: flex-start;
    }

    .profile-title-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.55rem;
    }

    .customer-table {
        min-width: 760px;
    }
}

/* Unit CRUD */

.field select {
    width: 100%;
    padding: 0.82rem 0.9rem;
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-medium);
    outline: none;
    color: var(--colour-text);
    background: var(--colour-panel);
}

.unit-feature-options,
.unit-feature-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.unit-feature-options label,
.unit-feature-list span {
    display: flex;
    min-height: 3rem;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--colour-border-soft);
    border-radius: var(--radius-medium);
    color: var(--colour-text-soft);
    background: var(--colour-panel-raised);
}

.unit-feature-options input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--colour-primary);
}

.status-pill-available {
    border-color: var(--colour-success);
    color: #83e3a9;
    background: var(--colour-panel-raised);
}

.status-pill-available::before {
    background: var(--colour-success);
}

.status-pill-reserved {
    border-color: var(--colour-warning);
    color: #ffd083;
    background: var(--colour-panel-raised);
}

.status-pill-reserved::before {
    background: var(--colour-warning);
}

.status-pill-occupied {
    border-color: var(--colour-primary);
    color: #9bb0ff;
    background: var(--colour-panel-raised);
}

.status-pill-occupied::before {
    background: var(--colour-primary);
}

.status-pill-maintenance {
    border-color: var(--colour-danger);
    color: #ff9ca2;
    background: var(--colour-panel-raised);
}

.status-pill-maintenance::before {
    background: var(--colour-danger);
}

@media (max-width: 680px) {
    .unit-feature-options,
    .unit-feature-list {
        grid-template-columns: 1fr;
    }
}

/* Bulk unit creation */

.page-heading-actions {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.bulk-reference-grid {
    grid-template-columns:
        minmax(140px, 1.3fr)
        repeat(3, minmax(110px, 0.8fr));
}

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

.bulk-unit-preview {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
    padding: 1rem;
    border: 1px solid var(--colour-primary);
    border-radius: var(--radius-medium);
    background: var(--colour-primary-soft);
}

.bulk-unit-preview span,
.bulk-unit-preview strong,
.bulk-unit-preview small {
    display: block;
}

.bulk-unit-preview span {
    color: #91a7ff;
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.bulk-unit-preview strong {
    color: var(--colour-text);
    font-size: 1rem;
}

.bulk-unit-preview small {
    margin-left: auto;
    color: var(--colour-muted);
}

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

    .page-heading-actions .button {
        width: 100%;
    }

    .bulk-reference-grid,
    .form-grid-three {
        grid-template-columns: 1fr;
    }

    .bulk-unit-preview {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.3rem;
    }

    .bulk-unit-preview small {
        margin-left: 0;
    }
}

/* Bulk unit editing */

.bulk-selection-toolbar {
    display: flex;
    min-height: 3.5rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--colour-border-soft);
    border-radius: var(--radius-medium);
    background: var(--colour-panel-raised);
}

.bulk-selection-toolbar span {
    color: var(--colour-text-soft);
    font-size: 0.84rem;
}

.button:disabled {
    cursor: not-allowed;
    color: #d5d7dc;
    opacity: 0.72;
    transform: none;
}

.selection-cell {
    width: 44px;
    text-align: center !important;
}

.selection-cell input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--colour-primary);
}

.selected-unit-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.selected-unit-list span {
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--colour-border);
    border-radius: 999px;
    color: var(--colour-text-soft);
    background: var(--colour-panel-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.bulk-edit-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.bulk-edit-field,
.bulk-boolean-field {
    padding: 1rem;
    border: 1px solid var(--colour-border-soft);
    border-radius: var(--radius-medium);
    background: var(--colour-panel-raised);
}

.bulk-edit-field .field {
    margin-top: 0.85rem;
}

.apply-field-toggle,
.boolean-value-toggle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--colour-text-soft);
    font-size: 0.84rem;
    font-weight: 700;
}

.apply-field-toggle input,
.boolean-value-toggle input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--colour-primary);
}

.apply-field-toggle {
    color: #91a7ff;
}

.bulk-boolean-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.boolean-value-toggle {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--colour-border-soft);
}

@media (max-width: 760px) {
    .bulk-edit-fields,
    .bulk-boolean-grid {
        grid-template-columns: 1fr;
    }

    .bulk-selection-toolbar {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Move-in workflow */

.money-input {
    position: relative;
}

.money-input > span {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 0.9rem;
    color: var(--colour-muted);
    transform: translateY(-50%);
}

.money-input input {
    padding-left: 2rem;
}

.move-in-review-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.review-card {
    min-height: 0;
}

.review-terms-card {
    grid-column: 1 / -1;
}

.review-identity {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
}

.review-identity h2,
.review-identity p {
    margin-bottom: 0;
}

.review-identity p {
    margin-top: 0.25rem;
    color: var(--colour-muted);
    font-size: 0.84rem;
}

.review-unit-reference {
    margin: 0.75rem 0 0.35rem;
    color: var(--colour-text);
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1;
}

.review-terms {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
}

.review-terms div {
    padding: 1rem;
    border: 1px solid var(--colour-border-soft);
    border-radius: var(--radius-medium);
    background: var(--colour-panel-raised);
}

.review-terms dt {
    margin-bottom: 0.4rem;
    color: var(--colour-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.review-terms dd {
    margin: 0;
    color: var(--colour-text);
    font-weight: 700;
}

.review-notes {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--colour-border-soft);
}

.review-notes p {
    margin: 0.4rem 0 0;
}

.move-in-confirm-panel {
    display: flex;
    min-height: 0;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.move-in-confirm-panel h2,
.move-in-confirm-panel p {
    margin-bottom: 0;
}

.move-in-confirm-panel p {
    margin-top: 0.35rem;
}

.move-in-confirm-panel form {
    margin: 0;
}

.rental-summary-list {
    display: grid;
    gap: 0.6rem;
}

.rental-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem;
    border: 1px solid var(--colour-border-soft);
    border-radius: var(--radius-medium);
    color: var(--colour-text);
    background: var(--colour-panel-raised);
    text-decoration: none;
}

.rental-summary-row:hover {
    border-color: var(--colour-primary);
    background: var(--colour-primary-soft);
}

.rental-summary-row strong,
.rental-summary-row span,
.rental-summary-price small {
    display: block;
}

.rental-summary-row span,
.rental-summary-price small {
    margin-top: 0.2rem;
    color: var(--colour-muted);
    font-size: 0.74rem;
}

.rental-summary-price {
    text-align: right;
    white-space: nowrap;
}

.rental-customer-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--colour-text);
    text-decoration: none;
}

.rental-customer-link strong,
.rental-customer-link small {
    display: block;
}

.rental-customer-link small {
    margin-top: 0.2rem;
    color: var(--colour-muted);
}

.rental-metadata {
    margin-top: 1rem;
}

@media (max-width: 760px) {
    .move-in-review-grid,
    .review-terms {
        grid-template-columns: 1fr;
    }

    .review-terms-card {
        grid-column: auto;
    }

    .move-in-confirm-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .move-in-confirm-panel .page-heading-actions,
    .move-in-confirm-panel form,
    .move-in-confirm-panel button {
        width: 100%;
    }
}

/* Move-out workflow */

.active-rental-actions {
    margin-top: 1rem;
}

.move-out-warning-panel {
    display: flex;
    min-height: 0;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    border-color: var(--colour-danger);
    background: var(--colour-panel-raised);
}

.move-out-warning-copy {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.move-out-warning-copy h2,
.move-out-warning-copy p {
    margin-bottom: 0;
}

.move-out-warning-copy p {
    margin-top: 0.35rem;
}

.move-out-warning-icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    flex: 0 0 auto;
    border-radius: 0.85rem;
    color: #ff9ca2;
    background: var(--colour-panel-raised);
    font-size: 1.25rem;
    font-weight: 850;
    place-items: center;
}

.move-out-warning-panel form {
    margin: 0;
}

@media (max-width: 760px) {
    .move-out-warning-panel,
    .move-out-warning-copy {
        align-items: stretch;
        flex-direction: column;
    }

    .move-out-warning-panel .page-heading-actions,
    .move-out-warning-panel form,
    .move-out-warning-panel button {
        width: 100%;
    }
}

/* Rental history */

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

.rental-history-item {
    position: relative;
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr);
    gap: 0.85rem;
    padding-bottom: 1.5rem;
}

.rental-history-item:last-child {
    padding-bottom: 0;
}

.rental-history-item:not(:last-child)::before {
    position: absolute;
    top: 0.75rem;
    bottom: 0;
    left: 0.35rem;
    width: 1px;
    background: var(--border-color, #d9dde3);
    content: "";
}

.rental-history-marker {
    position: relative;
    z-index: 1;
    width: 0.75rem;
    height: 0.75rem;
    margin-top: 0.35rem;
    border: 2px solid var(--brand-blue, #2777c8);
    border-radius: 50%;
    background: var(--panel-background, #ffffff);
}

.rental-history-content {
    min-width: 0;
}

.rental-history-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.rental-history-heading a {
    color: inherit;
    font-weight: 700;
    text-decoration: none;
}

.rental-history-heading a:hover {
    text-decoration: underline;
}

.rental-history-metadata {
    display: grid;
    gap: 0.55rem;
    margin: 0.8rem 0 0;
}

.rental-history-metadata div {
    display: grid;
    gap: 0.15rem;
}

.rental-history-metadata dt {
    color: var(--muted-text, #667085);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.rental-history-metadata dd {
    margin: 0;
    font-size: 0.9rem;
}

.status-pill-ended,
.status-pill-cancelled {
    background: #eef0f3;
    color: #4b5563;
}

@media (max-width: 520px) {
    .rental-history-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.45rem;
    }
}


/* RC1.2b operator dashboard */

.dashboard-quick-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.dashboard-action {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem;
    border: 1px solid var(--colour-border-soft);
    border-radius: var(--radius-medium);
    color: var(--colour-text);
    background: var(--colour-panel);
    text-decoration: none;
    transition:
        border-color 160ms ease,
        transform 160ms ease,
        background 160ms ease;
}

.dashboard-action:hover {
    border-color: var(--colour-primary);
    background: var(--colour-panel-raised);
    transform: translateY(-2px);
}

.dashboard-action-icon {
    display: grid;
    flex: 0 0 auto;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.7rem;
    color: #91a6ff;
    background: var(--colour-primary-soft);
    font-size: 1.05rem;
    font-weight: 800;
    place-items: center;
}

.dashboard-action > span:last-child {
    display: grid;
    min-width: 0;
    gap: 0.15rem;
}

.dashboard-action strong {
    font-size: 0.88rem;
}

.dashboard-action small {
    overflow: hidden;
    color: var(--colour-muted);
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.facility-summary {
    display: grid;
    gap: 1.25rem;
}

.facility-occupancy {
    padding: 1.15rem;
    border: 1px solid var(--colour-border-soft);
    border-radius: var(--radius-medium);
    background: var(--colour-panel-raised);
}

.facility-occupancy-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.facility-occupancy-heading > div {
    display: grid;
    gap: 0.2rem;
}

.facility-summary-label,
.facility-occupancy-heading > span {
    color: var(--colour-muted);
    font-size: 0.76rem;
}

.facility-occupancy-heading strong {
    font-size: 1.8rem;
    line-height: 1;
}

.occupancy-progress {
    overflow: hidden;
    height: 0.55rem;
    border-radius: 999px;
    background: var(--colour-panel-raised);
}

.occupancy-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--colour-primary);
}

.facility-status-grid,
.facility-financial-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.facility-status-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.9rem;
    border: 1px solid var(--colour-border-soft);
    border-radius: var(--radius-medium);
    background: var(--colour-panel-raised);
}

.facility-status-item > div,
.facility-financial-grid > div {
    display: grid;
    gap: 0.2rem;
}

.facility-status-item span:not(.status-dot),
.facility-financial-grid span {
    color: var(--colour-muted);
    font-size: 0.72rem;
}

.facility-status-item strong {
    font-size: 1.2rem;
}

.status-dot {
    flex: 0 0 auto;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
}

.status-dot-available {
    background: #4fd482;
}

.status-dot-occupied {
    background: #6d8cff;
}

.status-dot-reserved {
    background: #e5b94f;
}

.status-dot-maintenance {
    background: #e67b65;
}

.facility-financial-grid > div {
    min-width: 0;
    padding: 1rem;
    border-radius: var(--radius-medium);
    background: var(--colour-panel-raised);
}

.facility-financial-grid strong {
    overflow: hidden;
    font-size: 1rem;
    text-overflow: ellipsis;
}

.activity-list {
    display: grid;
}

.activity-item {
    display: grid;
    grid-template-columns: 0.65rem minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--colour-border-soft);
}

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

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

.activity-marker {
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.35rem;
    border-radius: 50%;
    background: #6685ff;
}

.activity-content {
    display: grid;
    min-width: 0;
    gap: 0.2rem;
}

.activity-content strong {
    font-size: 0.82rem;
}

.activity-description {
    overflow: hidden;
    color: var(--colour-text-soft);
    font-size: 0.77rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-content time {
    color: var(--colour-muted);
    font-size: 0.68rem;
}

@media (max-width: 1100px) {
    .dashboard-quick-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 620px) {
    .dashboard-quick-actions {
        grid-template-columns: 1fr;
    }

    .facility-occupancy-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .facility-status-grid,
    .facility-financial-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 430px) {
    .facility-status-grid,
    .facility-financial-grid {
        grid-template-columns: 1fr;
    }
}


/* Reporting and insights */
.report-heading-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.report-heading-actions .button:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.report-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.report-kpi-card {
    display: grid;
    min-width: 0;
    gap: 0.45rem;
    padding: 1.15rem;
    border: 1px solid var(--colour-border-soft);
    border-radius: var(--radius-medium);
    background: var(--colour-surface);
    box-shadow: var(--shadow-small);
}

.report-kpi-card strong {
    overflow: hidden;
    font-size: clamp(1.45rem, 3vw, 2rem);
    line-height: 1;
    text-overflow: ellipsis;
}

.report-kpi-card > span:last-child {
    color: var(--colour-text-soft);
    font-size: 0.76rem;
}

.report-kpi-label {
    color: var(--colour-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.report-kpi-accent {
    border-color: var(--colour-primary);
    background: var(--colour-panel);
}

.report-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.report-panel {
    min-width: 0;
}

.report-panel-wide {
    grid-column: 1 / -1;
}

.report-occupancy-hero {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.report-occupancy-hero > div {
    display: grid;
    gap: 0.25rem;
}

.report-occupancy-hero span {
    color: var(--colour-text-soft);
    font-size: 0.78rem;
}

.report-occupancy-hero strong {
    font-size: clamp(2rem, 6vw, 3rem);
    line-height: 1;
}

.report-progress {
    margin-bottom: 1.25rem;
}

.report-status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
}

.report-status-grid > div {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.85rem;
    border-radius: var(--radius-medium);
    background: var(--colour-panel-raised);
}

.report-status-grid > div > span:nth-child(2) {
    overflow: hidden;
    color: var(--colour-text-soft);
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-definition-list {
    display: grid;
    margin: 0;
}

.report-definition-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--colour-border-soft);
}

.report-definition-list > div:first-child {
    padding-top: 0;
}

.report-definition-list > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.report-definition-list dt {
    color: var(--colour-text-soft);
    font-size: 0.8rem;
}

.report-definition-list dd {
    margin: 0;
    font-weight: 700;
}

.report-bar-list {
    display: grid;
    gap: 1rem;
}

.report-bar-item {
    display: grid;
    gap: 0.4rem;
}

.report-bar-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.82rem;
}

.report-bar-heading strong {
    text-align: right;
}

.report-bar-track {
    overflow: hidden;
    height: 0.55rem;
    border-radius: 999px;
    background: var(--colour-panel-raised);
}

.report-bar-track span {
    display: block;
    height: 100%;
    min-width: 0;
    border-radius: inherit;
    background: var(--colour-primary);
}

.report-bar-item small {
    color: var(--colour-muted);
    font-size: 0.68rem;
}

.report-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.report-feature-card {
    display: grid;
    min-width: 0;
    gap: 0.35rem;
    padding: 0.9rem;
    border-radius: var(--radius-medium);
    background: var(--colour-panel-raised);
}

.report-feature-card > span {
    overflow: hidden;
    color: var(--colour-text-soft);
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-feature-card strong {
    font-size: 1.35rem;
}

.report-feature-card small {
    color: var(--colour-muted);
    font-size: 0.67rem;
}

@media (max-width: 1100px) {
    .report-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 760px) {
    .report-layout {
        grid-template-columns: 1fr;
    }

    .report-panel-wide {
        grid-column: auto;
    }

    .report-heading-actions {
        width: 100%;
    }

    .report-heading-actions .button {
        flex: 1 1 auto;
    }
}

@media (max-width: 520px) {
    .report-kpi-grid,
    .report-status-grid,
    .report-feature-grid {
        grid-template-columns: 1fr;
    }

    .report-occupancy-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .report-heading-actions {
        display: grid;
    }
}

/* Epic 3 Alpha 3 billing workspace */
.billing-workspace-grid,
.invoice-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 1.25rem;
    align-items: start;
}
.billing-filter-bar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(170px, 220px) auto;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.billing-filter-bar input,
.billing-filter-bar select,
.billing-generation-form input,
.invoice-side-stack textarea { width: 100%; }
.billing-checkbox {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin: 1rem 0;
}
.billing-checkbox span,
.billing-checkbox small { display: block; }
.billing-form-note,
.billing-checkbox small { color: var(--text-muted); }
.button-block { width: 100%; }
.money-cell { text-align: right; white-space: nowrap; }
.status-pill-draft { background: #eef1f5; color: #45505f; }
.status-pill-issued { background: #e6f0ff; color: #1557a0; }
.status-pill-part-paid { background: #fff4d6; color: #765700; }
.status-pill-paid { background: #e2f6e9; color: #176b38; }
.status-pill-overdue { background: #fde8e8; color: #a82424; }
.status-pill-void { background: #ece9ee; color: #5c5361; }
.status-pill-large { padding: 0.65rem 0.9rem; font-size: 0.9rem; }
.invoice-parties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    padding-bottom: 1.5rem;
}
.invoice-parties span { display: block; }
.invoice-label {
    margin-bottom: 0.35rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.invoice-totals {
    width: min(100%, 360px);
    margin: 1.5rem 0 0 auto;
}
.invoice-totals > div,
.invoice-payment-list > div,
.invoice-meta-list > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border-color);
}
.invoice-balance {
    margin-top: 0.4rem;
    padding-top: 1rem !important;
    font-size: 1.1rem;
}
.invoice-side-stack { display: grid; gap: 1.25rem; }
.invoice-meta-list { margin: 0; }
.invoice-meta-list dt { color: var(--text-muted); }
.invoice-meta-list dd { margin: 0; text-align: right; }
.invoice-void-notice {
    margin-top: 1.5rem;
    padding: 1rem;
    border-left: 4px solid #a82424;
    background: #fde8e8;
}
.danger-panel { border-top: 3px solid #a82424; }
.button-danger {
    background: #a82424;
    border-color: #a82424;
    color: #fff;
}
@media (max-width: 980px) {
    .billing-workspace-grid,
    .invoice-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .billing-filter-bar,
    .invoice-parties { grid-template-columns: 1fr; }
    .billing-table { min-width: 760px; }
    .invoice-lines-table { min-width: 650px; }
}


/* Epic 3 Alpha 4: printable invoices */

.invoice-heading-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.invoice-print-body {
    margin: 0;
    background: #eceff1;
    color: #20262b;
    font-family: Arial, Helvetica, sans-serif;
}

.print-invoice {
    width: min(210mm, calc(100% - 2rem));
    min-height: 297mm;
    margin: 2rem auto 6rem;
    padding: 18mm;
    background: #ffffff;
    box-sizing: border-box;
    box-shadow: 0 1rem 3rem rgb(0 0 0 / 15%);
}

.print-invoice-header,
.print-invoice-meta,
.print-invoice-summary,
.print-invoice-footer {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
}

.print-invoice-header {
    align-items: flex-start;
    padding-bottom: 2rem;
    border-bottom: 3px solid #252d32;
}

.print-invoice-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.print-invoice-brand div,
.print-address-block {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.print-invoice-logo {
    display: block;
    width: 150px;
    height: auto;
    max-height: 70px;
    object-fit: contain;
    object-position: left center;
}

.print-invoice-title {
    text-align: right;
}

.print-invoice-title p {
    margin: 0 0 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.75rem;
    font-weight: 700;
}

.print-invoice-title h1 {
    margin: 0 0 0.75rem;
    font-size: 1.65rem;
}

.print-invoice-meta {
    padding: 2rem 0;
}

.print-address-block {
    min-width: 45%;
}

.print-invoice-dates {
    margin: 0;
    min-width: 240px;
}

.print-invoice-dates div {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid #dfe3e6;
}

.print-invoice-dates dt {
    color: #667078;
}

.print-invoice-dates dd {
    margin: 0;
    font-weight: 700;
    text-align: right;
}

.print-invoice-lines table {
    width: 100%;
    border-collapse: collapse;
}

.print-invoice-lines th,
.print-invoice-lines td {
    padding: 0.8rem 0.65rem;
    border-bottom: 1px solid #dfe3e6;
    text-align: left;
    vertical-align: top;
}

.print-invoice-lines th {
    background: #252d32;
    color: #ffffff;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.print-invoice-lines .money-cell {
    text-align: right;
    white-space: nowrap;
}

.print-invoice-summary {
    align-items: flex-start;
    margin-top: 2rem;
}

.print-invoice-payment-note {
    max-width: 48%;
    padding-top: 0.75rem;
}

.print-invoice-payment-note p {
    margin: 0.5rem 0 0;
    line-height: 1.5;
}

.print-totals {
    width: min(100%, 340px);
    margin-left: auto;
}

.print-invoice-footer {
    margin-top: 4rem;
    padding-top: 1rem;
    border-top: 1px solid #dfe3e6;
    color: #667078;
    font-size: 0.8rem;
}

.print-invoice-actions {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    background: #ffffff;
    box-shadow: 0 0.5rem 2rem rgb(0 0 0 / 18%);
}

@media (max-width: 720px) {
    .print-invoice {
        width: 100%;
        min-height: 0;
        margin: 0 0 5rem;
        padding: 1.25rem;
        box-shadow: none;
    }

    .print-invoice-header,
    .print-invoice-meta,
    .print-invoice-summary,
    .print-invoice-footer {
        flex-direction: column;
    }

    .print-invoice-title {
        text-align: left;
    }

    .print-invoice-lines {
        overflow-x: auto;
    }

    .print-invoice-payment-note,
    .print-totals {
        width: 100%;
        max-width: none;
    }
}

@media print {
    @page {
        size: A4;
        margin: 12mm;
    }

    .invoice-print-body {
        background: #ffffff;
    }

    .print-invoice {
        width: auto;
        min-height: auto;
        margin: 0;
        padding: 0;
        box-shadow: none;
    }

    .print-invoice-actions {
        display: none !important;
    }

    .print-invoice-header,
    .print-invoice-meta,
    .print-invoice-summary,
    .print-invoice-footer {
        break-inside: avoid;
    }

    .print-invoice-lines tr {
        break-inside: avoid;
    }

    .status-pill {
        border: 1px solid currentColor;
    }
}


/* Historic move-in invoice review */
.historic-invoice-warning {
    border-left: 4px solid var(--warning, #b7791f);
}

.historic-invoice-list {
    margin-top: 1.25rem;
    border-top: 1px solid var(--border-color, #d9dde3);
}

.historic-invoice-row,
.historic-invoice-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border-color, #d9dde3);
}

.historic-invoice-total {
    margin-top: 0.5rem;
    font-size: 1.05rem;
    border-bottom: 0;
}

.historic-invoice-total strong {
    font-size: 1.25rem;
}

.move-in-confirm-form {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
}

.checkbox-field {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    cursor: pointer;
}

.checkbox-field input {
    width: 1.1rem;
    height: 1.1rem;
}
/* v0.5.0-alpha1 Customer Accounts */
.customer-workspace-tabs{display:flex;gap:.35rem;margin:1rem 0 1.25rem;padding:.35rem;overflow-x:auto;border:1px solid var(--colour-border-soft);border-radius:var(--radius-medium);background:var(--colour-panel)}
.customer-workspace-tab{display:inline-flex;min-height:2.7rem;align-items:center;justify-content:center;padding:.65rem 1rem;border-radius:calc(var(--radius-medium) - 2px);color:var(--colour-muted);font-size:.86rem;font-weight:750;text-decoration:none;white-space:nowrap}.customer-workspace-tab:hover{color:var(--colour-text);background:var(--colour-panel-raised)}.customer-workspace-tab.is-active{color:var(--color-primary-text);background:var(--colour-primary)}
.customer-account-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-bottom:1rem}.account-metric{display:grid;gap:.35rem}.account-metric>span{color:var(--colour-muted);font-size:.73rem;font-weight:750;text-transform:uppercase}.account-metric>strong{font-size:clamp(1.35rem,2vw,2rem)}.account-metric>small{color:var(--colour-muted)}
.customer-account-heading,.customer-account-filter,.customer-custom-dates{display:flex;align-items:flex-end;gap:.75rem}.customer-account-heading{justify-content:space-between}.customer-account-filter label{display:grid;gap:.35rem}.customer-account-filter label>span{color:var(--colour-muted);font-size:.7rem;font-weight:750;text-transform:uppercase}.customer-account-filter select,.customer-account-filter input{min-height:2.65rem;padding:.65rem .75rem;border:1px solid var(--colour-border);border-radius:var(--radius-medium);color:var(--colour-text);background:var(--colour-panel)}.customer-custom-dates.is-hidden{display:none}.account-filter-error{margin-bottom:1rem;padding:.8rem 1rem;border-left:3px solid var(--colour-danger);color:var(--colour-danger);background:var(--colour-panel-raised)}.customer-account-table{min-width:880px}.customer-account-table td strong,.customer-account-table td small{display:block}.customer-account-table td small{color:var(--colour-muted)}.account-credit{color:var(--colour-success)}.customer-account-table tfoot td{border-top:2px solid var(--colour-border);font-weight:750}
@media(max-width:1100px){.customer-account-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.customer-account-heading{align-items:stretch;flex-direction:column}.customer-account-filter{align-items:stretch;flex-wrap:wrap}}@media(max-width:680px){.customer-account-metrics{grid-template-columns:1fr}.customer-account-filter,.customer-custom-dates{align-items:stretch;flex-direction:column}.customer-account-filter select,.customer-account-filter input,.customer-account-filter .button{width:100%}}

/* v0.5.0-alpha1: compact customer account metrics */

.customer-account-metrics {
    gap: 0.7rem;
    margin-bottom: 0.75rem;
}

.account-metric {
    min-height: 0;
    gap: 0.12rem;
    padding: 0.72rem 0.9rem;
}

.account-metric > span {
    font-size: 0.68rem;
    line-height: 1.15;
}

.account-metric > strong {
    margin: 0.08rem 0;
    font-size: clamp(1.35rem, 1.8vw, 1.7rem);
    line-height: 1.05;
}

.account-metric > small {
    font-size: 0.7rem;
    line-height: 1.2;
}

.account-metric-outstanding > strong {
    color: #91a7ff;
}

.account-metric-overdue > strong {
    color: var(--colour-muted);
}

.account-metric-overdue.has-balance > strong {
    color: #ff9ca2;
}

.account-metric-paid > strong {
    color: #83e3a9;
}

@media (max-width: 680px) {
    .customer-account-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
    }

    .account-metric {
        padding: 0.68rem 0.75rem;
    }

    .account-metric > strong {
        font-size: 1.35rem;
    }

    .account-metric > small {
        font-size: 0.66rem;
    }
}

@media (max-width: 390px) {
    .customer-account-metrics {
        grid-template-columns: 1fr;
    }
}

/* Customer account payment recording */
.payment-modal{width:min(620px,calc(100% - 2rem));max-height:calc(100vh - 2rem);padding:0;border:0;overflow:auto;background:#fff;box-shadow:0 24px 80px rgb(0 0 0 / 28%)}
.payment-modal::backdrop{background:rgb(15 23 42 / 58%)}
.payment-form{padding:1.25rem}.payment-modal-header,.payment-modal-actions{display:flex;align-items:center;justify-content:space-between;gap:1rem}.payment-modal-header{margin-bottom:1.25rem}.payment-modal-header h2{margin:0}.payment-modal-close{width:2.5rem;height:2.5rem;border:0;background:transparent;font-size:2rem;line-height:1;cursor:pointer}.payment-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.payment-form-grid .form-group{margin:0}.payment-form-grid .form-group>span{display:block;margin-bottom:.4rem;font-weight:700}.payment-notes-field{grid-column:1/-1}.money-input{display:grid;grid-template-columns:auto 1fr;align-items:center;border:1px solid #cbd5e1;background:#fff}.money-input>span{padding-left:.8rem;font-weight:700}.money-input .form-control{border:0}.payment-allocation-note{display:grid;gap:.25rem;margin:1rem 0;padding:.9rem 1rem;background:var(--colour-panel-raised);border-left:3px solid var(--colour-primary)}.payment-allocation-note span{color:#64748b;font-size:.9rem}.payment-modal-actions{justify-content:flex-end;padding-top:1rem;border-top:1px solid #e2e8f0}
@media(max-width:640px){.payment-modal{width:calc(100% - 1rem);max-height:calc(100vh - 1rem)}.payment-form{padding:1rem}.payment-form-grid{grid-template-columns:1fr}.payment-notes-field{grid-column:auto}.payment-modal-actions{display:grid;grid-template-columns:1fr 1fr}}

/* Multi-unit move-in workflow */
.move-in-unit-table{overflow:hidden;border:1px solid var(--border-color);background:var(--surface-colour,#fff)}
.move-in-unit-table-head,.move-in-unit-row{display:grid;grid-template-columns:minmax(14rem,1.6fr) minmax(9rem,.8fr) minmax(9rem,.8fr) 2.75rem;gap:.75rem;align-items:center}
.move-in-unit-table-head{padding:.65rem .8rem;border-bottom:1px solid var(--border-color);background:var(--colour-panel-raised);color:var(--text-muted);font-size:.78rem;font-weight:750;letter-spacing:.03em;text-transform:uppercase}
.move-in-unit-row{padding:.7rem .8rem;border-bottom:1px solid var(--border-color)}
.move-in-unit-row:last-child{border-bottom:0}
.move-in-unit-row select,.move-in-unit-row input{width:100%;min-width:0}
.move-in-unit-field,.move-in-money-field{min-width:0}
.move-in-mobile-label{display:none}
.move-in-unit-row .money-input{min-height:2.75rem}
.move-in-unit-row .money-input input{border:0}
.move-in-remove-unit{display:inline-grid;width:2.35rem;height:2.35rem;place-items:center;border:1px solid transparent;background:transparent;color:var(--text-muted);font-size:1.45rem;line-height:1;cursor:pointer}
.move-in-remove-unit:hover,.move-in-remove-unit:focus-visible{border-color:var(--border-color);background:var(--colour-panel-raised);color:var(--text-colour,#0f172a)}
.move-in-add-unit{margin-top:.85rem}
.move-in-add-unit>span{margin-right:.35rem;font-size:1.15rem;line-height:1}
.move-in-live-summary>div{display:flex;justify-content:space-between;padding:.55rem 0;border-bottom:1px solid var(--border-color)}
.move-in-live-summary dd{margin:0;font-weight:750}
.move-in-review-units{display:grid;gap:.85rem}
.move-in-review-unit{display:flex;justify-content:space-between;gap:1.5rem;padding:1rem 0;border-bottom:1px solid var(--border-color)}
.move-in-review-unit>div span{display:block;color:var(--text-muted)}
.move-in-review-unit dl{display:grid;grid-template-columns:repeat(2,minmax(7rem,1fr));gap:1rem;margin:0}
.move-in-review-unit dl div{text-align:right}
.move-in-review-unit dd{margin:.15rem 0 0;font-weight:750}
@media(max-width:760px){.move-in-unit-table{overflow:visible;border:0;background:transparent}.move-in-unit-table-head{display:none}.move-in-unit-rows{display:grid;gap:.75rem}.move-in-unit-row{grid-template-columns:1fr 1fr auto;gap:.75rem;padding:.85rem;border:1px solid var(--border-color);background:var(--surface-colour,#fff)}.move-in-unit-field{grid-column:1/-1}.move-in-mobile-label{display:block;margin-bottom:.35rem;color:var(--text-muted);font-size:.78rem;font-weight:750}.move-in-remove-unit{align-self:end;margin-bottom:.2rem}.move-in-review-unit{display:grid}.move-in-review-unit dl div{text-align:left}}
@media(max-width:520px){.move-in-unit-row{grid-template-columns:1fr auto}.move-in-money-field{grid-column:1}.move-in-remove-unit{grid-column:2;grid-row:2/span 2;align-self:center}}

/* Move-in compact selector polish */
.move-in-unit-table {
    max-height: 30rem;
    overflow: auto;
    border: 1px solid var(--border-color);
    background: transparent;
}

.move-in-unit-table-head {
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: 2.35rem;
    padding: .45rem .65rem;
    background: var(--surface-alt, #f1f5f9);
    box-shadow: 0 1px 0 var(--border-color);
}

.move-in-unit-row {
    min-height: 3.35rem;
    padding: .45rem .65rem;
    background: transparent;
    transition:
        background-color 140ms ease,
}

.move-in-unit-row:nth-child(even) {
    background: var(--colour-panel-raised);
}

.move-in-unit-row:hover,
.move-in-unit-row:focus-within {
    border-left: 3px solid var(--colour-primary);
    background: var(--colour-panel-raised);
}

.move-in-unit-row select,
.move-in-unit-row input {
    min-height: 2.35rem;
    padding-top: .4rem;
    padding-bottom: .4rem;
    border: 1px solid var(--border-color);
    background: var(--surface-alt, #f8fafc);
    color: var(--text-colour, #0f172a);
    box-shadow: none;
}

.move-in-unit-row select:hover,
.move-in-unit-row input:hover {
    border-color: rgb(100 116 139 / 70%);
}

.move-in-unit-row select:focus,
.move-in-unit-row input:focus {
    border-color: var(--colour-primary);
    outline: 2px solid var(--colour-primary);
    outline-offset: 2px;
}

.move-in-unit-row .money-input {
    min-height: 2.35rem;
    border: 1px solid var(--border-color);
    background: var(--surface-alt, #f8fafc);
}

.move-in-unit-row .money-input:focus-within {
    border-color: var(--colour-primary);
    outline: 2px solid var(--colour-primary);
    outline-offset: 2px;
}

.move-in-unit-row .money-input > span {
    padding-left: .65rem;
    background: transparent;
    color: var(--text-muted);
}

.move-in-unit-row .money-input input {
    min-height: 2.2rem;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.move-in-unit-row .money-input input:focus {
    box-shadow: none;
}

.move-in-remove-unit {
    opacity: .35;
    transition:
        opacity 140ms ease,
        background-color 140ms ease,
        color 140ms ease;
}

.move-in-unit-row:hover .move-in-remove-unit,
.move-in-unit-row:focus-within .move-in-remove-unit,
.move-in-remove-unit:focus-visible {
    opacity: 1;
}

.move-in-remove-unit:hover,
.move-in-remove-unit:focus-visible {
    border-color: rgb(220 38 38 / 18%);
    background: var(--colour-panel-raised);
    color: #b91c1c;
}

.move-in-add-unit {
    min-height: 2.5rem;
    padding: .55rem .8rem;
}

@media (max-width: 760px) {
    .move-in-unit-table {
        max-height: none;
        overflow: visible;
    }

    .move-in-unit-row {
        min-height: 0;
        padding: .7rem;
    }

    .move-in-unit-row:nth-child(even) {
        background: transparent;
    }

    .move-in-unit-row:hover,
    .move-in-unit-row:focus-within {
        border-left: 3px solid var(--colour-primary);
    }

    .move-in-remove-unit {
        opacity: 1;
    }
}

/* Move-in dark layout correction */
[data-multi-move-in].customer-form-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: 1.25rem;
}

[data-multi-move-in] .customer-form-main,
[data-multi-move-in] .form-section,
[data-multi-move-in] .move-in-unit-table {
    min-width: 0;
}

[data-multi-move-in] .customer-form-actions {
    min-width: 0;
}

[data-multi-move-in] .sticky-action-panel {
    position: sticky;
    top: 1rem;
    width: 100%;
    box-sizing: border-box;
}

[data-multi-move-in] .move-in-unit-table {
    max-height: none;
    overflow: visible;
    border: 1px solid var(--colour-border);
    background: var(--colour-panel);
}

[data-multi-move-in] .move-in-unit-table-head {
    position: static;
    padding: .55rem .75rem;
    border-bottom: 1px solid var(--colour-border);
    background: var(--colour-panel-raised);
    color: var(--colour-muted);
    box-shadow: none;
}

[data-multi-move-in] .move-in-unit-row {
    padding: .55rem .75rem;
    border-bottom: 1px solid var(--colour-border-soft);
    background: var(--colour-panel);
}

[data-multi-move-in] .move-in-unit-row:nth-child(even) {
    background: var(--colour-panel-raised);
}

[data-multi-move-in] .move-in-unit-row:hover,
[data-multi-move-in] .move-in-unit-row:focus-within {
    background: var(--colour-panel-raised);
    border-left: 3px solid var(--colour-primary);
}

[data-multi-move-in] .move-in-unit-row select,
[data-multi-move-in] .move-in-unit-row input {
    min-height: 2.5rem;
    border: 1px solid var(--colour-border);
    background: var(--colour-panel);
    color: var(--colour-text);
    box-shadow: none;
}

[data-multi-move-in] .move-in-unit-row select option {
    background: var(--colour-panel);
    color: var(--colour-text);
}

[data-multi-move-in] .move-in-unit-row select:focus,
[data-multi-move-in] .move-in-unit-row input:focus {
    border-color: var(--colour-primary);
    outline: 2px solid var(--colour-primary);
    outline-offset: 2px;
}

[data-multi-move-in] .move-in-unit-row .money-input {
    min-height: 2.5rem;
    border: 1px solid var(--colour-border);
    background: var(--colour-panel);
}

[data-multi-move-in] .move-in-unit-row .money-input > span {
    color: var(--colour-muted);
    background: transparent;
}

[data-multi-move-in] .move-in-unit-row .money-input input {
    border: 0;
    background: transparent;
    color: var(--colour-text);
}

[data-multi-move-in] .move-in-remove-unit {
    opacity: .65;
    color: var(--colour-muted);
}

[data-multi-move-in] .move-in-unit-row:hover .move-in-remove-unit,
[data-multi-move-in] .move-in-unit-row:focus-within .move-in-remove-unit {
    opacity: 1;
}

[data-multi-move-in] .move-in-add-unit {
    margin-top: .85rem;
    border-color: var(--colour-border);
    background: var(--colour-panel-raised);
    color: var(--colour-text);
}

[data-multi-move-in] .move-in-add-unit:hover,
[data-multi-move-in] .move-in-add-unit:focus-visible {
    border-color: var(--colour-primary);
    background: var(--colour-primary-soft);
}

@media (max-width: 1180px) {
    [data-multi-move-in].customer-form-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    [data-multi-move-in] .customer-form-actions {
        grid-column: 1;
    }

    [data-multi-move-in] .sticky-action-panel {
        position: static;
    }
}

@media (max-width: 760px) {
    [data-multi-move-in] .move-in-unit-table {
        border: 0;
        background: transparent;
    }

    [data-multi-move-in] .move-in-unit-row {
        padding: .75rem;
        border: 1px solid var(--colour-border);
        background: var(--colour-panel);
    }

    [data-multi-move-in] .move-in-unit-row:nth-child(even) {
        background: var(--colour-panel);
    }
}


/* Move-in add-customer action */
.move-in-add-customer-link {
    display: inline-flex;
    margin-top: .55rem;
    color: #8ea8ff;
    font-size: .86rem;
    font-weight: 700;
    text-decoration: none;
}

.move-in-add-customer-link:hover,
.move-in-add-customer-link:focus-visible {
    color: #b5c5ff;
    text-decoration: underline;
}

.signing-page {
    width: min(900px, calc(100% - 32px));
    margin: 0 auto;
    padding: 40px 0 70px;
}

.signing-header {
    margin-bottom: 24px;
}

.signing-header h1 {
    margin: 4px 0 8px;
}

.signing-document,
.signing-form,
.signing-status-card {
    margin-bottom: 20px;
    padding: 32px;
    border: 1px solid #d7dce3;
    background: #fff;
    color: #1f2937;
    box-shadow: 0 10px 30px rgb(0 0 0 / 8%);
}

.signing-document {
    min-height: 600px;
    font-family: Arial, sans-serif;
    line-height: 1.65;
}

.signing-form {
    display: grid;
    gap: 22px;
}

.signing-form label > span {
    display: block;
    margin-bottom: 7px;
    font-weight: 700;
}

.signing-form input[type="text"] {
    width: 100%;
    min-height: 44px;
    padding: 9px 11px;
    border: 1px solid #b9c0ca;
    font: inherit;
}

.signature-field {
    display: grid;
    gap: 8px;
}

.signature-field-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.signature-field-heading > span {
    font-weight: 700;
}

.signature-field-heading button {
    border: 0;
    background: transparent;
    color: #2563eb;
    cursor: pointer;
}

.signature-field canvas {
    width: 100%;
    height: 220px;
    border: 1px solid #9ca3af;
    background: var(--colour-panel);
    touch-action: none;
    cursor: crosshair;
}

.signing-confirmation {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.signing-confirmation input {
    margin-top: 4px;
}

.signing-confirmation span {
    margin: 0 !important;
    font-weight: 400 !important;
}

.signing-status-card {
    text-align: center;
}

.signing-status-card dl {
    display: grid;
    gap: 14px;
    margin: 26px auto 0;
    max-width: 420px;
    text-align: left;
}

.signing-status-card dl div {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 10px;
}

.signing-status-card dt {
    color: #6b7280;
}

.signing-status-card dd {
    margin: 0;
    font-weight: 700;
}

@media (max-width: 700px) {
    .signing-page {
        width: min(100% - 16px, 900px);
        padding-top: 16px;
    }

    .signing-document,
    .signing-form,
    .signing-status-card {
        padding: 20px 16px;
    }

    .signing-document {
        min-height: 400px;
    }

    .signature-field canvas {
        height: 180px;
    }
}

/* ==========================================================
   Customer portal
   ========================================================== */

.customer-portal-body {
    min-height: 100vh;
    margin: 0;
    background: var(--colour-bg);
    color: var(--colour-text);
}

.customer-portal-shell {
    min-height: 100vh;
}

.customer-portal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 68px;
    padding: 0 5vw;
    border-bottom: 1px solid var(--colour-border);
    background: var(--colour-panel);
}

.customer-portal-brand {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    color: var(--colour-text);
    text-decoration: none;
}

.customer-portal-brand strong {
    letter-spacing: 0.12em;
}

.customer-portal-brand span {
    color: var(--colour-muted);
    font-size: 0.78rem;
}

.customer-portal-header form {
    margin: 0;
}

.customer-portal-header button {
    border: 0;
    background: transparent;
    color: var(--brand-primary);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.customer-portal-content {
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
    padding: 48px 0 80px;
}

.customer-portal-auth-card {
    width: min(480px, 100%);
    box-sizing: border-box;
    margin: 5vh auto;
    padding: 2rem;
    border: 1px solid var(--colour-border);
    background: var(--colour-panel);
    box-shadow: var(--shadow-panel);
}

.customer-portal-auth-card h1 {
    margin: 0.35rem 0 0.8rem;
}

.customer-portal-auth-card > p {
    color: var(--colour-muted);
    line-height: 1.6;
}

.customer-portal-auth-card form {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
}

.customer-portal-auth-card label {
    display: grid;
    gap: 0.45rem;
}

.customer-portal-auth-card label span {
    font-size: 0.8rem;
    font-weight: 700;
}

.customer-portal-auth-card input {
    min-height: 46px;
    box-sizing: border-box;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--colour-border);
    background: var(--colour-panel);
    color: var(--colour-text);
    font: inherit;
}

.customer-portal-auth-card button {
    min-height: 46px;
    border: 0;
    background: var(--brand-primary);
    color: var(--brand-primary-text);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.customer-portal-auth-card a {
    color: var(--brand-primary);
    font-weight: 700;
}

.customer-portal-alert {
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    border-left: 4px solid var(--brand-accent);
    background: var(--colour-panel);
}

.customer-portal-alert-error {
    border-left-color: var(--colour-danger);
}

.customer-portal-welcome {
    margin-bottom: 2rem;
}

.customer-portal-welcome h1 {
    margin: 0.35rem 0 0.5rem;
    font-size: clamp(2rem, 5vw, 3.6rem);
}

.customer-portal-welcome p:last-child {
    color: #607a76;
}

.customer-portal-empty-dashboard {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.customer-portal-empty-dashboard article {
    min-height: 180px;
    padding: 1.4rem;
    border: 1px solid #d8e5e2;
    background: #ffffff;
}

.customer-portal-empty-dashboard article > span {
    color: #53a095;
    font-size: 0.72rem;
    font-weight: 800;
}

.customer-portal-empty-dashboard h2 {
    margin: 1.5rem 0 0.5rem;
}

.customer-portal-empty-dashboard p {
    color: #607a76;
}

@media (max-width: 760px) {
    .customer-portal-header {
        padding: 0 16px;
    }

    .customer-portal-brand span {
        display: none;
    }

    .customer-portal-content {
        width: min(100% - 20px, 1120px);
        padding-top: 24px;
    }

    .customer-portal-auth-card {
        margin-top: 0;
        padding: 1.4rem;
    }

    .customer-portal-empty-dashboard {
        grid-template-columns: 1fr;
    }
}

.customer-portal-summary-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.customer-portal-summary-grid article,
.customer-portal-panel,
.customer-portal-rental-card {
    padding: 1.35rem;
    border: 1px solid #d8e5e2;
    background: #ffffff;
}

.customer-portal-summary-grid article {
    display: grid;
    gap: 0.35rem;
}

.customer-portal-summary-grid span {
    color: #607a76;
    font-size: 0.75rem;
    font-weight: 700;
}

.customer-portal-summary-grid strong {
    color: #123f39;
    font-size: 1.8rem;
}

.customer-portal-summary-grid small {
    color: #718985;
}

.customer-portal-section {
    margin-bottom: 2rem;
}

.customer-portal-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.customer-portal-section-heading h2 {
    margin: 0.2rem 0 0;
}

.customer-portal-rental-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.customer-portal-rental-card h3 {
    margin: 0.25rem 0 1.2rem;
    font-size: 1.35rem;
}

.customer-portal-rental-card > div > span {
    color: #64817c;
    font-size: 0.72rem;
    font-weight: 700;
}

.customer-portal-rental-card dl {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
}

.customer-portal-rental-card dl div {
    display: grid;
    gap: 0.25rem;
}

.customer-portal-rental-card dt {
    color: #718985;
    font-size: 0.68rem;
}

.customer-portal-rental-card dd {
    margin: 0;
    color: #18312e;
    font-weight: 700;
}

.customer-portal-two-column {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.customer-portal-list {
    display: grid;
}

.customer-portal-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0;
    border-top: 1px solid #e3ecea;
}

.customer-portal-list > div:first-child {
    border-top: 0;
}

.customer-portal-list span {
    display: grid;
    gap: 0.18rem;
}

.customer-portal-list small {
    color: #718985;
    font-size: 0.68rem;
}

.customer-portal-list-value {
    text-align: right;
    font-weight: 700;
}

.customer-portal-empty-state {
    padding: 1.25rem;
    border: 1px dashed var(--colour-border);
    background: var(--colour-panel-raised);
    color: var(--colour-muted);
}

@media (max-width: 760px) {
    .customer-portal-summary-grid,
    .customer-portal-rental-grid,
    .customer-portal-two-column {
        grid-template-columns: 1fr;
    }

    .customer-portal-rental-card dl {
        grid-template-columns: 1fr;
    }
}

.customer-portal-header-actions,
.customer-portal-header-actions nav {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.customer-portal-header-actions nav a {
    padding: 0.45rem 0;
    color: var(--colour-muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
}

.customer-portal-header-actions nav a:hover,
.customer-portal-header-actions nav a[aria-current="page"] {
    color: var(--brand-primary);
}

.customer-portal-header-actions nav a[aria-current="page"] {
    border-bottom: 2px solid var(--brand-accent);
}

.customer-portal-page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.customer-portal-page-heading h1 {
    margin: 0.3rem 0 0.5rem;
    font-size: clamp(2rem, 5vw, 3.2rem);
}

.customer-portal-page-heading > div > p:last-child {
    margin: 0;
    color: var(--colour-muted);
}

.customer-portal-page-actions,
.customer-portal-card-actions {
    display: flex;
    gap: 0.65rem;
}

.customer-portal-primary-button,
.customer-portal-secondary-button,
.customer-portal-card-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    box-sizing: border-box;
    padding: 0.65rem 0.9rem;
    font-size: 0.76rem;
    font-weight: 800;
    text-decoration: none;
}

.customer-portal-primary-button {
    border: 1px solid var(--brand-primary);
    background: var(--brand-primary);
    color: var(--brand-primary-text);
}

.customer-portal-secondary-button {
    border: 1px solid var(--brand-accent);
    background: var(--colour-panel);
    color: var(--brand-accent);
}

.customer-portal-agreement-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.customer-portal-agreement-card {
    padding: 1.35rem;
    border: 1px solid var(--colour-border);
    background: var(--colour-panel);
}

.customer-portal-agreement-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.customer-portal-agreement-card-heading > div > span {
    color: var(--colour-muted);
    font-size: 0.7rem;
    font-weight: 700;
}

.customer-portal-agreement-card h2 {
    margin: 0.3rem 0 0;
}

.customer-portal-status {
    padding: 0.3rem 0.55rem;
    background: var(--colour-panel-raised);
    color: var(--color-info);
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
}

.customer-portal-status-signed {
    background: var(--colour-panel-raised);
    color: var(--colour-success);
}

.customer-portal-agreement-card dl {
    display: grid;
    gap: 0.75rem;
    margin: 1.25rem 0;
}

.customer-portal-agreement-card dl div {
    display: grid;
    grid-template-columns:
        minmax(120px, 0.7fr)
        minmax(0, 1fr);
    gap: 1rem;
}

.customer-portal-agreement-card dt {
    color: var(--colour-muted);
    font-size: 0.7rem;
}

.customer-portal-agreement-card dd {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: right;
}

.customer-portal-card-actions {
    padding-top: 1rem;
    border-top: 1px solid var(--colour-border);
}

.customer-portal-card-actions a {
    flex: 1;
    border: 1px solid var(--brand-accent);
    color: var(--brand-accent);
}

.customer-portal-card-actions a:last-child {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: var(--brand-primary-text);
}

.customer-portal-agreement-summary {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.customer-portal-agreement-summary article {
    display: grid;
    gap: 0.3rem;
    padding: 1rem;
    border: 1px solid var(--colour-border);
    background: var(--colour-panel);
}

.customer-portal-agreement-summary span {
    color: var(--colour-muted);
    font-size: 0.68rem;
}

.customer-portal-signing-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--brand-accent);
    background: var(--colour-panel-raised);
}

.customer-portal-signing-notice h2 {
    margin: 0.25rem 0;
}

.customer-portal-signing-notice p:last-child {
    margin-bottom: 0;
    color: var(--colour-muted);
}

.customer-portal-document {
    padding: clamp(1.25rem, 5vw, 3.5rem);
    border: 1px solid var(--colour-border);
    background: var(--colour-panel);
    color: var(--colour-text);
    font-family: Arial, sans-serif;
    font-size: 0.9rem;
    line-height: 1.65;
}

.customer-portal-document h1 {
    text-align: center;
}

.customer-portal-signature {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(220px, 340px);
    gap: 2rem;
    align-items: center;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--colour-border);
}

.customer-portal-signature-image {
    display: grid;
    min-height: 110px;
    padding: 1rem;
    place-items: center;
    border: 1px solid var(--colour-border);
}

.customer-portal-signature-image svg {
    width: 100%;
    max-height: 120px;
}

.customer-portal-section-link,
.customer-portal-list-value a {
    color: var(--brand-primary);
    font-size: 0.7rem;
    font-weight: 800;
    text-decoration: none;
}

@media (max-width: 760px) {
    .customer-portal-header-actions nav {
        display: none;
    }

    .customer-portal-page-heading,
    .customer-portal-signing-notice {
        flex-direction: column;
    }

    .customer-portal-page-actions,
    .customer-portal-page-actions a {
        width: 100%;
    }

    .customer-portal-agreement-grid,
    .customer-portal-agreement-summary,
    .customer-portal-signature {
        grid-template-columns: 1fr;
    }

    .customer-portal-card-actions {
        display: grid;
    }
}

.payment-provider-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.payment-provider-card {
    padding: 1.2rem;
    border: 1px solid var(--colour-border);
    background: var(--colour-panel-raised);
}

.payment-provider-card header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.payment-provider-card header span:first-child {
    color: var(--colour-text-soft);
    font-size: 0.68rem;
    font-weight: 750;
}

.payment-provider-card h3 {
    margin: 0.25rem 0 0;
}

.payment-provider-card form {
    display: grid;
    gap: 1rem;
}

.payment-provider-toggle {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    color: var(--colour-text-soft);
    font-size: 0.75rem;
}

.payment-provider-toggle input {
    margin-top: 0.15rem;
}

@media (max-width: 760px) {
    .payment-provider-grid {
        grid-template-columns: 1fr;
    }
}

/* Operator move-in readiness */
.move-in-readiness-panel {
    margin-bottom: 1.25rem;
}

.move-in-readiness-list {
    display: grid;
    gap: 1rem;
}

.move-in-readiness-card {
    padding: 1.1rem;
    border: 1px solid var(--border-color);
    background: #fff;
}

.move-in-readiness-card > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.move-in-readiness-card > header span:first-child {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.move-in-readiness-card h3 {
    margin: 0.2rem 0 0;
}

.move-in-readiness-checklist {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 1rem 0;
}

.move-in-readiness-checklist > div {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 0.55rem;
    align-items: center;
    padding: 0.8rem;
    border: 1px solid var(--border-color);
    background: var(--surface-subtle, #f8fafc);
}

.move-in-readiness-checklist > div > span {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    background: #e5e7eb;
    color: #475569;
    font-weight: 900;
}

.move-in-readiness-checklist > div.is-complete > span {
    background: #17695f;
    color: #fff;
}

.move-in-readiness-checklist > div div {
    display: grid;
    gap: 0.15rem;
}

.move-in-readiness-checklist small,
.move-in-readiness-blocked span,
.move-in-access-issued span {
    color: var(--text-muted);
}

.move-in-keyfob-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: 0.75rem;
    align-items: end;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.move-in-keyfob-form label {
    display: grid;
    gap: 0.35rem;
}

.move-in-keyfob-form label > span {
    font-size: 0.78rem;
    font-weight: 750;
}

.move-in-readiness-blocked,
.move-in-access-issued {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border-left: 4px solid #c17220;
    background: #fff8ec;
}

.move-in-access-issued {
    border-left-color: #17695f;
    background: #e8f3f1;
}

@media (max-width: 760px) {
    .move-in-readiness-checklist {
        grid-template-columns: 1fr;
    }

    .move-in-keyfob-form {
        grid-template-columns: 1fr;
    }

    .move-in-keyfob-form button {
        width: 100%;
    }

    .move-in-readiness-blocked,
    .move-in-access-issued {
        display: grid;
    }
}

/* =========================================================
   Alpha10 operator move-in readiness theme corrections
   ========================================================= */

.move-in-readiness-card {
    border-color: var(--colour-border);
    background: var(--colour-panel);
    color: var(--colour-text);
}

.move-in-readiness-card > header {
    border-bottom-color: var(--colour-border);
}

.move-in-readiness-card > header span:first-child,
.move-in-readiness-checklist small,
.move-in-readiness-blocked span,
.move-in-access-issued span {
    color: var(--colour-muted);
}

.move-in-readiness-card h3,
.move-in-readiness-checklist strong,
.move-in-keyfob-form label > span {
    color: var(--colour-text);
}

.move-in-readiness-checklist > div {
    border-color: var(--colour-border);
    background: var(--colour-panel-raised);
}

.move-in-readiness-checklist > div > span {
    background: var(--colour-border-soft);
    color: var(--colour-text-soft);
}

.move-in-readiness-checklist > div.is-complete > span {
    background: var(--colour-success);
    color: var(--color-primary-text);
}

.move-in-keyfob-form {
    border-top-color: var(--colour-border);
}

.move-in-keyfob-form input {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--colour-border);
    border-radius: 4px;
    background: var(--colour-panel);
    color: var(--colour-text);
    font: inherit;
}

.move-in-keyfob-form input::placeholder {
    color: var(--colour-muted);
    opacity: 1;
}

.move-in-keyfob-form input:focus {
    border-color: var(--colour-primary);
    outline: 2px solid var(--colour-primary);
    outline-offset: 1px;
}

.move-in-readiness-blocked {
    border-left-color: var(--colour-warning);
    background: var(--colour-panel-raised);
    color: var(--colour-text);
}

.move-in-access-issued {
    border-left-color: var(--colour-success);
    background: var(--colour-panel-raised);
    color: var(--colour-text);
}

.move-in-readiness-card .status-pill {
    border: 1px solid var(--colour-border);
    background: var(--colour-panel-raised);
    color: var(--colour-text-soft);
}

.move-in-readiness-card
.status-pill-ready-for-access {
    border-color: var(--colour-success);
    background: var(--colour-panel-raised);
    color: var(--colour-success);
}

.move-in-readiness-card
.status-pill-access-issued {
    border-color: var(--colour-success);
    background: var(--colour-success);
    color: var(--color-primary-text);
}

@media (max-width: 760px) {
    .move-in-readiness-card > header {
        display: grid;
    }

    .move-in-readiness-card .status-pill {
        justify-self: start;
    }
}