@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root {
    font-family: 'DM Sans', sans-serif;
    color: #183239;
    background: #f6f9f8;
    font-size: 16px
}

* {
    box-sizing: border-box
}

body {
    margin: 0
}

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

button {
    cursor: pointer
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 3px solid #84d6c9;
    outline-offset: 2px
}

.shell {
    min-height: 100vh;
    display: flex
}

.sidebar {
    width: 232px;
    flex: none;
    background: #fff;
    border-right: 1px solid #e0e9e6;
    padding: 27px 14px;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column
}

.logo {
    display: flex;
    align-items: center;
    gap: 11px;
    font: 800 23px Manrope, sans-serif;
    letter-spacing: -1px;
    padding: 0 12px 35px;
    color: #124c49
}

.logo small,
.sidebar-bottom small {
    display: block;
    font: 500 12px 'DM Sans', sans-serif;
    letter-spacing: 0;
    color: #859894;
    margin-top: 2px
}

.logo-mark {
    background: #0c897e;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: 23px;
    letter-spacing: -3px;
    padding-right: 3px
}

.sidebar nav {
    display: grid;
    gap: 5px
}

.sidebar nav button {
    border: 0;
    background: transparent;
    text-align: left;
    border-radius: 11px;
    padding: 13px 15px;
    display: flex;
    gap: 13px;
    align-items: center;
    color: #506963;
    font-weight: 700;
    width: 100%;
    font-size: 15px
}

.sidebar nav button.active {
    background: #e8f7f2;
    color: #087c71
}

.sidebar nav button:hover {
    background: #edf5f2
}

.nav-icon {
    width: 22px;
    text-align: center;
    font-size: 20px;
    font-weight: 500
}

.sidebar-bottom {
    margin-top: auto;
    border-top: 1px solid #e5ebe8;
    padding: 20px 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px
}

.profile-mark {
    display: grid;
    place-items: center;
    background: #eaf5f2;
    color: #087c71;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    font-weight: 800
}

.workspace {
    min-width: 0;
    flex: 1
}

.topbar {
    height: 74px;
    background: white;
    border-bottom: 1px solid #e2eae7;
    padding: 0 38px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.topbar strong {
    font-size: 15px
}

.topbar small {
    display: block;
    color: #7b918a;
    font-size: 13px;
    margin-top: 3px
}

.icon-button {
    width: 39px;
    height: 39px;
    border-radius: 11px;
    border: 1px solid #dce8e3;
    background: white;
    color: #3c645c;
    font-size: 21px
}

.page {
    max-width: 1180px;
    padding: 35px 38px 90px;
    margin: 0 auto
}

.page-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 23px
}

.page-title h1 {
    font: 800 clamp(27px, 3vw, 34px)/1.2 Manrope, sans-serif;
    letter-spacing: -1.2px;
    margin: 0
}

.page-title p {
    color: #718881;
    margin: 7px 0 0;
    font-size: 15px
}

.primary,
.secondary,
.plain {
    min-height: 45px;
    border-radius: 10px;
    padding: 10px 17px;
    font-weight: 700;
    border: 1px solid transparent
}

.primary {
    background: #087f74;
    color: white
}

.primary:hover {
    background: #066e65
}

.secondary {
    background: white;
    border-color: #cbded7;
    color: #14665f
}

.secondary:hover {
    background: #f0f8f5
}

.plain {
    background: none;
    color: #087f74;
    padding: 8px 5px
}

.button-row {
    display: flex;
    gap: 9px;
    flex-wrap: wrap
}

.surface {
    background: white;
    border: 1px solid #e1ebe6;
    border-radius: 17px
}

.summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 13px;
    margin-bottom: 23px
}

.summary .tile {
    background: #fff;
    border: 1px solid #e1ebe6;
    border-radius: 14px;
    padding: 20px
}

.tile small {
    color: #738b83;
    font-weight: 700;
    font-size: 13px
}

.tile strong {
    font: 800 27px Manrope, sans-serif;
    display: block;
    margin: 10px 0 2px;
    letter-spacing: -1px
}

.tile em {
    font-size: 13px;
    color: #7d938b;
    font-style: normal
}

.tile.featured {
    background: #0b776e;
    color: white;
    border-color: #0b776e
}

.tile.featured small,
.tile.featured em {
    color: #c2e6de
}

.section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 22px 0 13px
}

.section-title h2 {
    font: 800 18px Manrope, sans-serif;
    margin: 0
}

.search {
    border: 1px solid #d5e4de;
    border-radius: 10px;
    background: white;
    min-height: 45px;
    padding: 10px 13px;
    width: 100%;
    font-size: 15px
}

.filterbar {
    display: flex;
    gap: 10px;
    margin-bottom: 15px
}

.filterbar .search {
    flex: 1
}

.filterbar select,
.form-field select,
.form-field input,
.form-field textarea {
    min-height: 45px;
    border: 1px solid #d1e1da;
    border-radius: 10px;
    padding: 10px 12px;
    background: white;
    color: #183239;
    width: 100%
}

.filterbar select {
    width: auto;
    min-width: 140px
}

.record {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 17px 19px;
    border-bottom: 1px solid #edf2ef
}

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

.avatar {
    width: 43px;
    height: 43px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #e8f6f1;
    color: #087c72;
    font-weight: 800;
    flex: none
}

.record-body {
    flex: 1;
    min-width: 0
}

.record-body strong {
    font-size: 16px;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.record-body small {
    font-size: 13px;
    color: #768c84;
    display: block;
    margin-top: 4px
}

.record-end {
    display: flex;
    align-items: center;
    gap: 12px
}

.record-end .amount {
    font-weight: 800;
    white-space: nowrap
}

.status {
    border-radius: 7px;
    padding: 6px 9px;
    font-weight: 800;
    font-size: 12px;
    white-space: nowrap;
    background: #e9f6ec;
    color: #26804c
}

.status.pending {
    background: #fff1df;
    color: #a96713
}

.status.paused {
    background: #eff1f2;
    color: #657574
}

.empty {
    padding: 42px 20px;
    text-align: center;
    color: #718a80
}

.empty strong {
    display: block;
    color: #284740;
    font-size: 18px;
    margin-bottom: 5px
}

.split {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 18px
}

.note {
    background: #eaf6f1;
    border-radius: 12px;
    padding: 16px;
    color: #32665b;
    font-size: 14px;
    line-height: 1.55
}

.hint {
    color: #789086;
    font-size: 13px;
    line-height: 1.5
}

.customer-header {
    display: flex;
    align-items: center;
    gap: 13px
}

.customer-header .avatar {
    width: 52px;
    height: 52px;
    font-size: 20px
}

.customer-header h1 {
    margin: 0;
    font: 800 27px Manrope, sans-serif
}

.customer-header small {
    color: #778c84
}

/* Customer detail visual system */
.page:has(.customer-ledger) .customer-header {
    padding: 15px 18px;
    border: 1px solid #dce7f2;
    border-radius: 18px;
    background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
    box-shadow: 0 10px 24px #1e3d7510
}

.page:has(.customer-ledger) .customer-header .avatar {
    background: #dff0ff;
    color: #315bb2;
    box-shadow: inset 0 0 0 1px #c8e2fa
}

.page:has(.customer-ledger) .customer-header h1 {
    color: #142b52
}

.page:has(.customer-ledger) .customer-actions {
    margin: 14px 0 25px;
    align-items: center
}

.page:has(.customer-ledger) .customer-actions .primary,
.page:has(.customer-ledger) .customer-actions .secondary {
    box-shadow: 0 6px 14px #24458f18
}

.page:has(.customer-ledger) .customer-actions .plain {
    font-weight: 800
}

.page:has(.customer-ledger) > .section-title {
    padding-bottom: 10px;
    border-bottom: 1px solid #dce6f0
}

.page:has(.customer-ledger) .summary .tile {
    box-shadow: 0 9px 22px #2445760c
}

.page:has(.customer-ledger) .summary .tile.featured {
    background: linear-gradient(135deg, #3658c3 0%, #2949aa 100%);
    box-shadow: 0 12px 24px #2949aa30
}

.page:has(.customer-ledger) .customer-ledger > .section-title {
    margin-top: 26px
}

.page:has(.customer-ledger) .delivery-calendar {
    border-color: #dce7f2;
    box-shadow: 0 10px 26px #2445760c
}

.page:has(.customer-ledger) .calculation {
    border-color: #dce7f2;
    box-shadow: 0 8px 20px #2445760a
}

/* Customer detail composition */
.customer-overview {
    padding: 25px 28px 28px;
    border-radius: 24px;
    color: white;
    background: #142d5c;
    box-shadow: 0 16px 32px #142d5c22
}

.customer-overview .back {
    margin-bottom: 24px;
    color: #b8ccff
}

.customer-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px
}

.customer-header {
    gap: 15px
}

.customer-overview .customer-header .avatar {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: #e4f2ff;
    color: #315bb2;
    font-size: 25px
}

.customer-overview .customer-header h1 {
    color: white;
    font-size: clamp(27px, 3vw, 38px)
}

.customer-overview .customer-header small {
    color: #b8c9e4
}

.customer-overview .customer-actions {
    margin: 0
}

.customer-overview .customer-actions .secondary {
    border-color: #7189c2;
    background: transparent;
    color: white
}

.customer-overview .customer-actions .plain {
    color: #c7d6ff
}

.customer-period {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 15px;
    margin-top: 28px
}

.customer-period .overline {
    color: #8faeff
}

.customer-period h2 {
    margin: 4px 0 0;
    color: white;
    font: 800 20px Manrope, sans-serif
}

.customer-period .month-picker select {
    border-color: #6e88c2;
    background: #203c72;
    color: white
}

.customer-overview .summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 18px 0 0
}

.customer-overview .summary .tile {
    min-width: 0;
    min-height: 86px;
    padding: 14px;
    border: 0;
    box-shadow: none;
    background: #1e3b70;
    color: white
}

.customer-overview .summary .tile small,
.customer-overview .summary .tile em {
    color: #b8c9e4
}

.customer-overview .summary .tile.featured {
    background: #3c61c9
}

.customer-overview .summary .tile small,
.customer-overview .summary .tile em {
    display: block;
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.customer-overview .summary .tile strong {
    display: block;
    overflow: hidden;
    font-size: 22px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.customer-overview .summary .tile.featured small,
.customer-overview .summary .tile.featured em {
    color: #d7e2ff
}

.customer-ledger {
    padding-top: 25px
}

.customer-ledger > .section-title {
    margin-top: 0
}

/* Compact full-page customer workspace */
.page:has(.customer-overview) {
    padding-top: 14px;
    padding-bottom: 18px
}

.customer-overview {
    padding: 14px 18px 16px;
    border-radius: 18px
}

.customer-overview .back {
    margin-bottom: 12px
}

.customer-overview .customer-header .avatar {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    font-size: 21px
}

.customer-overview .customer-header h1 {
    font-size: 29px
}

.customer-period {
    margin-top: 14px
}

.customer-overview .summary {
    margin-top: 10px
}

.customer-overview .summary .tile {
    min-height: 64px;
    padding: 9px 11px
}

.customer-overview .summary .tile strong {
    margin-top: 3px;
    font-size: 18px
}

.customer-overview .summary .tile:first-child strong {
    font-size: 20px
}

.customer-ledger {
    padding-top: 13px
}

.customer-ledger > .section-title {
    margin-bottom: 5px
}

.customer-ledger .delivery-calendar {
    padding: 8px;
    margin-bottom: 10px
}

.customer-ledger .calendar-weekdays {
    padding-bottom: 4px;
    font-size: 9px
}

.customer-ledger .calendar-grid {
    gap: 5px
}

.customer-ledger .calendar-day,
.customer-ledger .calendar-day-empty {
    min-height: 0;
    height: 82px;
    padding: 7px;
    gap: 3px
}

.customer-ledger .calendar-date strong {
    font-size: 19px
}

.customer-ledger .calendar-supply > strong,
.customer-ledger .calendar-amount > strong {
    font-size: 10px
}

.customer-ledger .calculation {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: 8px 10px
}

.customer-ledger .calculation .record {
    display: block;
    min-height: 0;
    padding: 5px 8px;
    border-bottom: 0;
    border-right: 1px solid #e7eef5
}

.customer-ledger .calculation .record:last-child {
    border-right: 0
}

.customer-ledger .calculation .record-body {
    font-size: 10px;
    color: #8291a7
}

.customer-ledger .calculation .record > strong {
    display: block;
    margin-top: 3px;
    font-size: 13px
}

.back {
    border: 0;
    background: none;
    color: #087f74;
    font-weight: 800;
    padding: 0;
    margin: 0 0 19px
}

.month-picker {
    display: flex;
    align-items: center;
    gap: 9px
}

.month-picker select {
    border: 1px solid #d6e5dd;
    background: white;
    border-radius: 10px;
    min-height: 43px;
    padding: 8px 12px
}

.ledger {
    width: 100%;
    border-collapse: collapse
}

.ledger th {
    text-align: left;
    background: #f8faf9;
    color: #70877d;
    font-size: 12px;
    letter-spacing: .5px;
    text-transform: uppercase
}

.ledger th,
.ledger td {
    padding: 13px 17px;
    border-bottom: 1px solid #edf2ef
}

.ledger tr:last-child td {
    border: 0
}

.ledger td {
    font-size: 14px
}

.right {
    text-align: right !important
}

.bill-total {
    background: #eaf7f1;
    border-radius: 11px;
    padding: 16px 18px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-weight: 800;
    font-size: 19px
}

.form-field {
    display: grid;
    gap: 7px;
    color: #34564c;
    font-weight: 700;
    font-size: 14px
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

.form-field.wide {
    grid-column: 1/-1
}

.form-field textarea {
    resize: vertical;
    min-height: 85px
}

.form-actions {
    display: flex;
    gap: 9px;
    margin-top: 23px
}

.modal-layer {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: #102c286b;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px
}

.modal {
    background: white;
    width: min(100%, 520px);
    border-radius: 19px;
    box-shadow: 0 20px 70px #09262138;
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column
}

.modal-head {
    padding: 22px 24px;
    border-bottom: 1px solid #e7eee9;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.modal-head h2 {
    font: 800 22px Manrope, sans-serif;
    margin: 0
}

.modal-head button {
    border: 0;
    background: #f0f4f2;
    width: 33px;
    height: 33px;
    border-radius: 9px;
    font-size: 21px;
    color: #3c5a51
}

.modal-body {
    padding: 24px;
    overflow: auto
}

.form-note {
    font-size: 13px;
    color: #71877d;
    margin: 8px 0 0
}

.unit-options {
    display: flex;
    gap: 9px
}

.unit-options label {
    border: 1px solid #cfdfd7;
    border-radius: 10px;
    padding: 10px 13px;
    flex: 1;
    cursor: pointer;
    font-size: 14px
}

.unit-options input {
    width: auto
}

.simple-list {
    display: grid
}

.simple-list button {
    border: 0;
    background: white;
    text-align: left;
    padding: 17px 19px;
    border-bottom: 1px solid #ebf0ec;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-weight: 700
}

.simple-list button:last-child {
    border: 0
}

.simple-list button:hover {
    background: #f5faf7
}

.simple-list span {
    color: #7c9288;
    font-weight: 500
}

.bottom-nav {
    display: none
}

#toast:not(:empty) {
    position: fixed;
    right: 18px;
    bottom: 18px;
    background: #154f46;
    color: white;
    padding: 12px 17px;
    border-radius: 10px;
    z-index: 80;
    box-shadow: 0 8px 28px #132b2533;
    font-size: 14px
}

.demo-banner {
    border: 1px solid #dbe8df;
    background: #fff;
    border-radius: 10px;
    padding: 10px 13px;
    color: #657d71;
    font-size: 13px;
    margin-top: 22px
}

@media(max-width:900px) {
    .sidebar {
        width: 195px
    }

    .page {
        padding: 27px 23px 90px
    }

    .topbar {
        padding: 0 23px
    }

    .summary {
        gap: 8px
    }

    .summary .tile {
        padding: 15px
    }

    .tile strong {
        font-size: 23px
    }

    .split {
        grid-template-columns: 1fr
    }
}

@media(max-width:700px) {
    .sidebar {
        display: none
    }

    .topbar {
        height: 59px;
        padding: 0 17px
    }

    .topbar small {
        font-size: 12px
    }

    .page {
        padding: 23px 15px 102px
    }

    .page-title {
        align-items: flex-start
    }

    .page-title h1 {
        font-size: 27px
    }

    .page-title p {
        font-size: 14px
    }

    .page-title .primary {
        padding: 9px 12px;
        min-height: 42px;
        font-size: 13px
    }

    .summary {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px
    }

    .summary .tile {
        padding: 14px;
        min-height: 103px
    }

    .summary .tile:first-child {
        grid-column: 1/-1;
        min-height: 88px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px
    }

    .tile strong {
        font-size: 22px;
        margin: 6px 0 2px
    }

    .summary .tile:first-child strong {
        font-size: 26px
    }

    .summary .tile:first-child em {
        display: none
    }

    .tile small,
    .tile em {
        font-size: 12px
    }

    .record {
        padding: 15px 13px;
        gap: 10px;
        align-items: flex-start
    }

    .avatar {
        height: 38px;
        width: 38px;
        border-radius: 10px
    }

    .record-body strong {
        font-size: 15px
    }

    .record-body small {
        font-size: 12px;
        line-height: 1.35
    }

    .record-end {
        align-items: flex-end;
        flex-direction: column;
        gap: 7px
    }

    .record-end .primary,
    .record-end .secondary {
        padding: 7px 10px;
        font-size: 13px;
        min-height: 36px
    }

    .section-title h2 {
        font-size: 17px
    }

    .filterbar {
        flex-wrap: wrap
    }

    .filterbar .search {
        min-width: 100%
    }

    .filterbar select {
        width: 100%
    }

    .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-top: 1px solid #e1eae5;
        justify-content: space-around;
        z-index: 20;
        padding: 7px 2px max(8px, env(safe-area-inset-bottom));
        box-shadow: 0 -5px 17px #172e1a0b
    }

    .bottom-nav button {
        border: 0;
        background: none;
        color: #75897f;
        display: grid;
        justify-items: center;
        gap: 2px;
        font-size: 11px;
        font-weight: 700;
        padding: 5px 1px;
        min-width: 60px
    }

    .bottom-nav button.active {
        color: #087f74
    }

    .bottom-nav .nav-icon {
        font-size: 21px
    }

    .modal-layer {
        align-items: flex-end;
        padding: 0
    }

    .modal {
        border-radius: 19px 19px 0 0;
        max-height: 94vh;
        width: 100%
    }

    .modal-head {
        padding: 19px
    }

    .modal-body {
        padding: 19px 19px max(22px, env(safe-area-inset-bottom))
    }

    .form-grid {
        grid-template-columns: 1fr;
        gap: 13px
    }

    .form-field.wide {
        grid-column: auto
    }

    .customer-header h1 {
        font-size: 23px
    }

    .ledger th,
    .ledger td {
        padding: 11px 9px;
        font-size: 12px
    }

    .bill-total {
        font-size: 16px
    }

    .month-picker select {
        font-size: 13px;
        max-width: 180px
    }

    .demo-banner {
        margin-top: 15px
    }
}

/* Aqua 02: fast operational workspace */
:root {
    color: #132643;
    background: #f3f7fd
}

body {
    background: #f3f7fd;
    overflow-x: hidden
}

.sidebar {
    width: 246px;
    background: #101f42;
    border-right: 0;
    padding: 30px 15px;
    color: #d6e3ff
}

.logo {
    color: white;
    font-size: 24px;
    padding: 0 14px 38px;
    letter-spacing: -1.5px
}

.logo small {
    color: #9cafce;
    font-size: 12px;
    margin-top: 4px
}

.logo-mark {
    background: #58d8df;
    color: #10284f;
    border-radius: 12px;
    box-shadow: 0 6px 17px #27bfc84a
}

.sidebar nav {
    gap: 7px
}

.sidebar nav button {
    color: #acbdd8;
    font-size: 15px;
    min-height: 48px;
    border-radius: 12px;
    gap: 14px
}

.sidebar nav button:hover {
    background: #23365b;
    color: white
}

.sidebar nav button.active {
    background: #364fb4;
    color: white
}

.nav-icon {
    display: grid;
    place-items: center
}

.sidebar-bottom {
    border-color: #364767;
    color: #fff
}

.sidebar-bottom small {
    color: #9cafce
}

.profile-mark {
    background: #2a426a;
    color: #a3ecf0
}

.topbar {
    background: #fff;
    border-color: #e2eaf3;
    padding: 0 44px;
    height: 76px
}

.topbar strong {
    font-size: 15px;
    color: #192b4c
}

.topbar small {
    font-size: 12px;
    color: #8ca0b7
}

.icon-button {
    background: #eff5fb;
    border-color: #e0eaf4;
    color: #375373;
    width: 42px;
    height: 42px
}

.workspace {
    background: #f3f7fd
}

.page {
    max-width: 1240px;
    padding: 36px 44px 90px
}

.primary {
    background: #334fb8;
    border-color: #334fb8;
    color: white;
    box-shadow: 0 4px 10px #2343a626;
    min-height: 46px
}

.primary:hover {
    background: #233f9c
}

.secondary {
    border-color: #d4e1ed;
    color: #264973;
    background: white
}

.secondary:hover {
    background: #f5f8ff
}

.plain {
    color: #3355ad
}

.page-title h1 {
    color: #142b52;
    letter-spacing: -1.5px
}

.page-title p {
    color: #8090a8
}

.surface {
    border-color: #e3ebf3;
    box-shadow: 0 5px 22px #18356008
}

.summary .tile {
    border-color: #e2eaf3;
    box-shadow: 0 5px 22px #18356009
}

.tile.featured {
    background: #2b4eb4;
    border-color: #2b4eb4
}

.tile.featured small,
.tile.featured em {
    color: #d0dcff
}

.section-title h2 {
    color: #183058
}

.search,
.filterbar select,
.form-field input,
.form-field select,
.form-field textarea {
    border-color: #d8e3ef
}

.search:focus,
.form-field input:focus,
.form-field select:focus {
    border-color: #6a90e5
}

.record {
    border-color: #eaf0f6;
    min-height: 75px
}

.record:hover {
    background: #fbfdff
}

.avatar {
    background: #e6f2fc;
    color: #3769a7;
    border-radius: 14px;
    width: 44px;
    height: 44px
}

.record-body strong {
    color: #203453
}

.record-body small {
    color: #7e91a6
}

.record-end .amount {
    color: #273f66
}

.status {
    background: #e5f6ef;
    color: #207858
}

.status.pending {
    background: #fff2e0;
    color: #ab6820
}

.back {
    color: #3557ba
}

.bill-total {
    background: #ebf3ff;
    color: #204891
}

.note {
    background: #e8f6f8;
    color: #246975
}

.modal-layer {
    background: #0c1d3b94
}

.modal {
    border-radius: 24px
}

.modal-head {
    border-color: #e5ecf3
}

.modal-head h2 {
    color: #142b52
}

.modal-head button {
    background: #eef3f8;
    color: #415773
}

.form-field {
    color: #304c71
}

.form-note {
    color: #788da6
}

.demo-banner {
    background: #f8fbff;
    color: #71839a;
    border-color: #e0e8f1
}

.bottom-nav {
    border-color: #e1e9f3
}

.bottom-nav button.active {
    color: #3155bf
}

#toast:not(:empty) {
    background: #173577
}

.daily-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px
}

.daily-heading h1 {
    font: 800 clamp(30px, 3vw, 38px)/1.14 Manrope, sans-serif;
    letter-spacing: -1.8px;
    color: #142b52;
    margin: 6px 0
}

.daily-heading p {
    font-size: 15px;
    color: #7a8da6;
    margin: 0
}

.overline {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.8px;
    color: #5673b1
}

.route-hero {
    background: #1a377d;
    border-radius: 23px;
    color: white;
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    min-height: 206px;
    overflow: hidden;
    box-shadow: 0 14px 30px #203d8928
}

.hero-main {
    padding: 28px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.hero-kicker {
    color: #8ee5ea;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px
}

.hero-title {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 9px 0 4px
}

.hero-title strong {
    font: 800 clamp(48px, 5vw, 66px)/1 Manrope, sans-serif;
    letter-spacing: -3px
}

.hero-title span {
    font: 700 21px/1.17 Manrope, sans-serif
}

.hero-main p {
    color: #b8c9eb;
    margin: 5px 0 20px;
    font-size: 14px
}

.route-track {
    height: 8px;
    border-radius: 10px;
    background: #405a98;
    max-width: 330px;
    overflow: hidden
}

.route-track span {
    display: block;
    background: #65e0d8;
    height: 100%;
    border-radius: 10px;
    transition: width .25s
}

.hero-side {
    background: #20438f;
    border-left: 1px solid #5270ae78;
    display: grid;
    align-content: center;
    padding: 20px 25px;
    gap: 15px
}

.hero-mini {
    display: flex;
    align-items: center;
    gap: 13px
}

.hero-mini-icon {
    display: grid;
    place-items: center;
    width: 37px;
    height: 37px;
    border-radius: 10px;
    background: #4265a5;
    color: #87f3e6;
    font-size: 18px;
    flex: none
}

.hero-mini strong {
    display: block;
    font: 800 17px Manrope, sans-serif
}

.hero-mini small {
    font-size: 12px;
    color: #c2d3f2;
    display: block;
    margin-top: 2px
}

.list-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 15px;
    margin: 30px 0 15px
}

.list-heading h2 {
    font: 800 20px Manrope, sans-serif;
    letter-spacing: -.5px;
    margin: 0;
    color: #142b52
}

.list-heading p {
    color: #8191a5;
    font-size: 14px;
    margin: 5px 0 0
}

.segmented {
    display: flex;
    gap: 3px;
    padding: 4px;
    background: #e8eef7;
    border-radius: 11px
}

.segmented button {
    border: 0;
    background: transparent;
    border-radius: 8px;
    padding: 9px 12px;
    font-weight: 700;
    color: #6b7e9b;
    font-size: 13px;
    white-space: nowrap
}

.segmented button.selected {
    background: #fff;
    color: #244da8;
    box-shadow: 0 2px 7px #12295416
}

.segmented button span {
    font-size: 11px;
    background: #dbe5f1;
    border-radius: 6px;
    padding: 2px 5px;
    margin-left: 4px
}

.segmented button.selected span {
    background: #e7efff
}

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

.delivery-card {
    background: white;
    border: 1px solid #e2eaf3;
    border-radius: 16px;
    padding: 18px;
    display: flex;
    gap: 13px;
    align-items: center;
    min-width: 0;
    box-shadow: 0 4px 14px #18356008
}

.delivery-card .avatar {
    flex: none
}

.delivery-info {
    min-width: 0;
    flex: 1
}

.delivery-info strong {
    font-size: 16px;
    color: #1c365b;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.delivery-info small {
    font-size: 13px;
    color: #8194a9;
    display: block;
    margin-top: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.middle-dot {
    margin: 0 3px;
    color: #b0bfd0
}

.delivery-action {
    display: grid;
    justify-items: end;
    gap: 3px
}

.delivery-action .primary {
    padding: 9px 12px;
    font-size: 13px;
    min-height: 40px;
    box-shadow: none
}

.delivery-action .plain {
    min-height: 34px;
    padding: 3px 7px;
    font-size: 13px
}

.done-tag {
    color: #16846c;
    background: #e6f7f1;
    border-radius: 7px;
    padding: 6px 9px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap
}

@media(max-width:1050px) {
    .sidebar {
        width: 210px
    }

    .page {
        padding-left: 25px;
        padding-right: 25px
    }

    .topbar {
        padding-left: 25px;
        padding-right: 25px
    }

    .customer-feed {
        grid-template-columns: 1fr
    }
}

@media(max-width:700px) {
    .topbar {
        padding: 0 16px;
        height: 62px
    }

    .page {
        padding: 24px 14px 106px
    }

    .daily-heading {
        align-items: flex-start;
        margin-bottom: 18px
    }

    .daily-heading h1 {
        font-size: 29px
    }

    .daily-heading p {
        font-size: 13px;
        max-width: 220px;
        line-height: 1.4
    }

    .daily-heading .secondary {
        font-size: 12px;
        padding: 7px 10px;
        min-height: 38px
    }

    .route-hero {
        grid-template-columns: 1fr;
        min-height: auto;
        border-radius: 20px;
        box-shadow: 0 11px 25px #23458b25
    }

    .hero-main {
        padding: 23px 23px 19px
    }

    .hero-kicker {
        font-size: 10px
    }

    .hero-title {
        margin: 7px 0 3px;
        gap: 12px
    }

    .hero-title strong {
        font-size: 53px
    }

    .hero-title span {
        font-size: 19px
    }

    .hero-main p {
        font-size: 12px;
        margin: 3px 0 15px
    }

    .route-track {
        max-width: none;
        height: 7px
    }

    .hero-side {
        border-left: 0;
        border-top: 1px solid #6b8ac044;
        background: #234893;
        grid-template-columns: repeat(3, 1fr);
        gap: 3px;
        padding: 14px 13px
    }

    .hero-mini {
        display: block;
        text-align: center
    }

    .hero-mini-icon {
        display: none
    }

    .hero-mini strong {
        font-size: 14px;
        white-space: nowrap
    }

    .hero-mini small {
        font-size: 10px;
        line-height: 1.3
    }

    .list-heading {
        align-items: stretch;
        display: block;
        margin: 24px 0 13px
    }

    .list-heading h2 {
        font-size: 19px
    }

    .list-heading p {
        font-size: 12px;
        margin-bottom: 13px
    }

    .segmented {
        display: grid;
        grid-template-columns: repeat(3, 1fr)
    }

    .segmented button {
        padding: 9px 3px;
        font-size: 12px
    }

    .customer-feed {
        gap: 9px
    }

    .delivery-card {
        padding: 13px;
        border-radius: 13px;
        gap: 9px
    }

    .delivery-card .avatar {
        width: 39px;
        height: 39px
    }

    .delivery-info strong {
        font-size: 14px
    }

    .delivery-info small {
        font-size: 11px
    }

    .delivery-action .primary {
        font-size: 11px;
        padding: 7px 8px;
        min-height: 37px
    }

    .done-tag {
        font-size: 10px;
        padding: 5px 6px
    }

    .delivery-action .plain {
        font-size: 11px;
        min-height: 25px
    }

    .bottom-nav {
        padding: 7px 1px max(9px, env(safe-area-inset-bottom))
    }

    .bottom-nav button {
        font-size: 11px;
        min-height: 50px
    }

    .bottom-nav .nav-icon {
        height: 22px
    }

    .bottom-nav .nav-icon svg {
        width: 21px;
        height: 21px
    }

    .modal {
        border-radius: 21px 21px 0 0
    }
}

@media(max-width:370px) {
    .delivery-card .avatar {
        display: none
    }

    .hero-mini strong {
        font-size: 12px
    }

    .daily-heading .secondary {
        max-width: 104px;
        white-space: normal
    }
}

.quantity-confirm {
    background: #eef5ff;
    border: 1px solid #d8e6fa;
    border-radius: 16px;
    padding: 21px;
    color: #203960
}

.quantity-confirm .confirm-label {
    display: block;
    color: #5d76a1;
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 7px
}

.quantity-confirm strong {
    font: 800 20px Manrope, sans-serif;
    display: block;
    margin-bottom: 17px
}

.quantity-confirm small {
    display: block;
    color: #6980a5;
    margin-top: 13px;
    font-size: 13px
}

.quantity-stepper {
    display: flex;
    align-items: center;
    gap: 9px
}

.quantity-stepper button {
    border: 1px solid #bfd2eb;
    background: white;
    color: #244993;
    border-radius: 10px;
    height: 48px;
    width: 48px;
    font-size: 26px;
    line-height: 1
}

.quantity-stepper input {
    background: white;
    border: 1px solid #bfd2eb;
    border-radius: 10px;
    max-width: 118px;
    height: 48px;
    text-align: center;
    font: 800 22px Manrope, sans-serif;
    color: #173363
}

.quantity-stepper span {
    font-weight: 800;
    color: #5071a3
}

.quantity-stepper input::-webkit-inner-spin-button,
.quantity-stepper input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.delivery-action .secondary {
    padding: 8px 11px;
    min-height: 38px;
    font-size: 12px;
    white-space: nowrap
}

.daily-heading .button-row {
    justify-content: flex-end
}

@media(max-width:700px) {
    .daily-heading {
        display: block
    }

    .daily-heading .button-row {
        justify-content: stretch;
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin-top: 13px
    }

    .daily-heading .button-row .secondary {
        max-width: none;
        width: 100%;
        font-size: 12px
    }

    .delivery-card:has(.done-tag) {
        align-items: flex-start
    }

    .delivery-card:has(.done-tag) .delivery-action {
        gap: 7px
    }

    .delivery-action .secondary {
        font-size: 11px;
        padding: 7px 8px;
        min-height: 36px
    }

    .quantity-stepper input {
        max-width: 105px
    }

    .quantity-confirm {
        padding: 18px
    }
}

/* Customer delivery calendar */
.customer-ledger {
    width: 100%
}

.bill-surface {
    max-width: none;
    padding: 16px
}

.page:has(.bill-surface) {
    padding-top: 10px;
    padding-bottom: 0
}

.page:has(.bill-surface) .back {
    margin-bottom: 8px
}

.page:has(.bill-surface) .page-title {
    margin-bottom: 12px
}

.bill-surface .section-subtitle {
    display: none
}

.bill-surface .section-title {
    margin: 12px 0 8px
}

.bill-surface .ledger td {
    padding: 8px 14px
}

.bill-surface .bill-total {
    padding: 10px 14px
}

.bill-surface .delivery-calendar {
    padding: 9px;
    margin-bottom: 12px
}

.bill-surface .calendar-weekdays {
    padding-bottom: 5px
}

.bill-surface .calendar-grid {
    gap: 5px
}

.bill-surface .calendar-day,
.bill-surface .calendar-day-empty {
    height: 76px;
    min-height: 0;
    gap: 2px;
    padding: 7px;
    border-radius: 8px
}

.bill-surface .calendar-date {
    display: block
}

.bill-surface .calendar-date small {
    display: none
}

.bill-surface .calendar-date span {
    display: inline;
    margin-left: 4px;
    font-size: 8px
}

.bill-surface .ledger td {
    padding-top: 5px;
    padding-bottom: 5px
}

.bill-surface .bill-total {
    min-height: 38px;
    padding-top: 7px;
    padding-bottom: 7px
}

.bill-surface > .section-title {
    margin-top: 8px;
    margin-bottom: 5px
}

.bill-surface .form-actions {
    margin-top: 10px
}

.bill-surface .form-actions button {
    min-height: 34px;
    padding-top: 6px;
    padding-bottom: 6px
}

.bill-surface .calendar-date strong {
    font-size: 18px
}

.bill-surface .calendar-date span,
.bill-surface .calendar-date small {
    font-size: 8px
}

.bill-surface .calendar-supply > strong,
.bill-surface .calendar-amount > strong {
    font-size: 11px;
    margin-bottom: 3px
}

.bill-surface .calendar-supply {
    overflow: hidden
}

.bill-surface .delivery-chip {
    padding: 3px 4px;
    font-size: 8px
}

.bill-surface .calendar-actions {
    display: none
}

.section-subtitle {
    margin: 4px 0 0;
    color: #8090a8;
    font-size: 13px
}

.delivery-calendar {
    overflow: hidden;
    margin-bottom: 24px;
    padding: 14px;
    max-width: 100%
}

.calendar-weekdays,
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px
}

.calendar-weekdays {
    padding: 0 4px 9px;
    color: #8291a7;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase
}

.calendar-day {
    min-width: 0;
    min-height: 142px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 12px;
    border: 1px solid #e2eaf3;
    border-radius: 12px;
    background: #fbfdff;
    overflow: hidden
}

.calendar-day:not(.calendar-day-empty):hover {
    border-color: #9eb4ed;
    background: #f6f9ff
}

.calendar-day-empty {
    min-height: 142px;
    border: 0;
    background: transparent
}

.calendar-day-no-delivery {
    background: #f7f9fc;
    border-style: dashed
}

.calendar-day-delivered {
    background: #effaf5;
    border-color: #9bd8bd
}

.calendar-day-delivered .calendar-date strong,
.calendar-day-delivered .calendar-date span,
.calendar-day-delivered .calendar-supply > strong,
.calendar-day-delivered .calendar-amount > strong {
    color: #167653
}

.calendar-day-missed {
    background: #fff3f2;
    border-color: #f0b4b0
}

.calendar-day-missed .calendar-date strong,
.calendar-day-missed .calendar-date span,
.calendar-day-missed .calendar-supply > strong,
.calendar-day-missed .calendar-amount > strong {
    color: #bd4b48
}

.calendar-day-upcoming {
    background: #f7f9fc;
    border-color: #dce5ef
}

.calendar-date {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 7px;
    align-items: baseline
}

.calendar-date strong {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    grid-row: span 2;
    color: #3154bb;
    font: 800 24px Manrope, sans-serif
}

.calendar-date span {
    min-width: 0;
    overflow: hidden;
    color: #3154bb;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase
}

.calendar-date small {
    min-width: 0;
    overflow: hidden;
    color: #8291a7;
    font-size: 10px
}

.calendar-supply {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    flex: 1
}

.calendar-supply > strong {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    display: block;
    color: #183058;
    font-size: 13px;
    margin-bottom: 7px
}

.calendar-day-no-delivery .calendar-supply > strong,
.calendar-day-no-delivery .calendar-amount > strong {
    color: #a3afbf;
    font-weight: 600
}

.delivery-chips {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.delivery-chip {
    overflow: hidden;
    border-radius: 5px;
    background: #edf3ff;
    color: #3b5c9e;
    padding: 4px 6px;
    font-size: 10px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap
}

.delivery-chip.extra {
    background: #e8f8f3;
    color: #16846c
}

.calendar-amount {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    margin-top: auto
}

.calendar-amount > strong {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    color: #183058;
    font-size: 13px
}

.calendar-actions {
    display: flex;
    gap: 2px
}

.calendar-actions button {
    min-height: 24px;
    padding: 2px 4px;
    font-size: 11px
}

.bill-surface .section-title .hint {
    min-width: 0;
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.page-title > div:first-child {
    min-width: 0
}

.page-title > div:first-child h1,
.bill-surface .section-title h2 {
    overflow-wrap: anywhere
}

.page-title [data-actions] {
    flex: none
}

.customer-ledger .calendar-day,
.customer-ledger .calendar-day-empty {
    display: grid;
    min-height: 104px;
    padding: 9px;
    gap: 5px;
    grid-template-rows: auto minmax(0, 1fr) auto
}

.customer-ledger .calendar-supply {
    flex: 0 1 auto;
    min-height: 0
}

.customer-ledger .calendar-supply > strong,
.customer-ledger .calendar-amount > strong {
    line-height: 1.2;
    white-space: nowrap
}

.customer-ledger .calendar-amount {
    flex: 0 0 auto;
    margin-top: 2px;
    padding-top: 3px;
    border-top: 1px solid #bfe5d1
}

.customer-ledger .calendar-day-missed .calendar-amount {
    border-color: #f0c4c1
}

.customer-ledger .calendar-date strong {
    font-size: 21px
}

.customer-ledger .calendar-date span,
.customer-ledger .calendar-date small {
    font-size: 9px
}

.customer-ledger .calendar-supply > strong,
.customer-ledger .calendar-amount > strong {
    font-size: 11px;
    margin-bottom: 4px
}

.customer-ledger .delivery-chips {
    gap: 3px
}

.customer-ledger .delivery-chip {
    padding: 3px 5px;
    font-size: 9px
}

.customer-ledger .calendar-actions button {
    min-height: 22px;
    font-size: 10px
}

@media(max-width:600px) {
    .page:has(.customer-overview) {
        padding-top: 8px;
        padding-bottom: 74px
    }

    .customer-overview {
        padding: 10px 10px 11px;
        border-radius: 14px
    }

    .customer-overview .back {
        margin-bottom: 9px
    }

    .customer-hero {
        display: block
    }

    .customer-overview .customer-header {
        gap: 9px
    }

    .customer-overview .customer-header .avatar {
        width: 38px;
        height: 38px;
        font-size: 16px
    }

    .customer-overview .customer-header h1 {
        font-size: 21px;
        line-height: 1.05
    }

    .customer-overview .customer-header small {
        display: block;
        max-width: 245px;
        overflow: hidden;
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .customer-overview .customer-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
        align-items: center;
        gap: 6px;
        margin-top: 9px
    }

    .customer-overview .customer-actions button {
        min-height: 32px;
        padding: 5px 6px;
        font-size: 11px
    }

    .customer-overview .customer-actions .secondary:last-child {
        grid-column: auto;
        justify-self: end;
        min-height: 25px;
        padding: 3px 5px;
        font-size: 10px;
        white-space: nowrap
    }

    .customer-period {
        align-items: start;
        margin-top: 11px
    }

    .customer-period h2 {
        font-size: 16px
    }

    .customer-period .month-picker select {
        max-width: 125px;
        min-height: 32px;
        padding: 5px 8px;
        font-size: 10px
    }

    .customer-overview .summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
        margin: 8px 0 0
    }

    .customer-overview .summary .tile {
        min-height: 56px;
        padding: 7px 5px
    }

    .customer-overview .summary .tile:first-child {
        min-height: 56px;
        display: block;
        grid-column: auto
    }

    .customer-overview .summary .tile small,
    .customer-overview .summary .tile em {
        font-size: 8px
    }

    .customer-overview .summary .tile strong {
        margin: 4px 0 0;
        font-size: 14px
    }

    .customer-overview .summary .tile:first-child strong {
        font-size: 16px
    }

    .customer-ledger {
        padding-top: 9px
    }

    .customer-ledger > .section-title {
        margin: 0 0 4px
    }

    .customer-ledger .section-subtitle {
        margin-top: 2px;
        font-size: 11px
    }

    .customer-ledger .delivery-calendar {
        padding: 6px;
        margin-bottom: 7px
    }

    .customer-ledger .calendar-weekdays {
        padding-bottom: 3px;
        font-size: 7px
    }

    .customer-ledger .calendar-grid {
        gap: 4px
    }

    .customer-ledger .calendar-day,
    .customer-ledger .calendar-day-empty {
        height: 48px;
        padding: 4px;
        gap: 1px
    }

    .customer-ledger .calendar-date strong {
        font-size: 16px
    }

    .customer-ledger .calendar-supply > strong,
    .customer-ledger .calendar-amount > strong {
        font-size: 7px
    }

    .customer-ledger .calculation {
        padding: 5px 3px
    }

    .customer-ledger .calculation .record {
        padding: 3px 4px
    }

    .customer-ledger .calculation .record-body {
        font-size: 8px
    }

    .customer-ledger .calculation .record > strong {
        font-size: 10px
    }

    .delivery-calendar {
        padding: 9px
    }

    .calendar-weekdays,
    .calendar-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 7px
    }

    .calendar-weekdays {
        display: grid;
        padding: 0 1px 5px;
        font-size: 8px
    }

    .calendar-day-empty {
        display: flex
    }

    .calendar-day {
        min-height: 0;
        height: 72px;
        padding: 5px;
        gap: 2px;
        border-radius: 7px
    }

    .customer-ledger .calendar-day,
    .customer-ledger .calendar-day-empty {
        min-height: 0;
        height: 68px;
        padding: 5px;
        gap: 1px;
        overflow: hidden;
        grid-template-rows: auto minmax(0, 1fr) auto
    }

    .customer-ledger .calendar-date,
    .customer-ledger .calendar-supply,
    .customer-ledger .calendar-amount {
        min-height: 0;
        max-height: 100%;
        overflow: hidden
    }

    .calendar-date strong {
        font-size: 22px
    }

    .calendar-date span,
    .calendar-date small {
        display: none
    }

    .calendar-date {
        display: block
    }

    .customer-ledger .calendar-date strong {
        font-size: 20px
    }

    .customer-ledger .calendar-date span,
    .customer-ledger .calendar-date small {
        display: none
    }

    .customer-ledger .calendar-date {
        display: block
    }

    .customer-ledger .calendar-supply > strong,
    .customer-ledger .calendar-amount > strong {
        overflow: hidden;
        display: block;
        font-size: 8px;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .customer-ledger .calendar-amount {
        margin-top: 0;
        padding-top: 1px;
        border-top: 0
    }

    .customer-ledger .delivery-chips,
    .customer-ledger .calendar-actions {
        display: none
    }

    .customer-ledger .delivery-chip {
        font-size: 8px
    }

    .calendar-supply > strong,
    .calendar-amount > strong {
        font-size: 12px
    }

    .delivery-chip {
        font-size: 9px
    }

    .bill-surface {
        padding: 10px
    }

    .page:has(.bill-surface) {
        padding: 10px 10px 86px
    }

    .bill-surface .calendar-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 6px
    }

    .bill-surface .calendar-day,
    .bill-surface .calendar-day-empty {
        display: flex;
        height: 64px;
        min-height: 0;
        min-width: 0;
        padding: 6px;
        gap: 3px
    }

    .bill-surface .calendar-day-empty {
        display: flex
    }

    .bill-surface .calendar-date strong {
        font-size: 17px
    }

    .bill-surface .calendar-date span {
        display: none
    }

    .bill-surface .calendar-date,
    .bill-surface .calendar-supply,
    .bill-surface .calendar-amount {
        min-width: 0;
        max-width: 100%;
        overflow: hidden
    }

    .calendar-date,
    .calendar-supply,
    .calendar-amount {
        min-width: 0;
        max-width: 100%;
        overflow: hidden
    }

    .calendar-date strong,
    .calendar-supply > strong,
    .calendar-amount > strong {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .bill-surface .calendar-supply > strong,
    .bill-surface .calendar-amount > strong {
        overflow: hidden;
        font-size: 8px;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .bill-surface .delivery-chip {
        padding: 2px 4px;
        font-size: 8px
    }
}

/* Final compact calendar sizing */
.customer-ledger .calendar-day,
.customer-ledger .calendar-day-empty {
    min-height: 0;
    height: 80px;
    padding: 5px;
    gap: 2px
}

.customer-ledger .calendar-grid {
    gap: 4px
}

.customer-ledger .calendar-date strong {
    font-size: 17px
}

.customer-ledger .calendar-supply > strong,
.customer-ledger .calendar-amount > strong {
    margin-bottom: 0;
    font-size: 9px
}

.customer-ledger > .section-title:has(+ .calculation:empty),
.customer-ledger .calculation:empty {
    display: none
}

@media(max-width:600px) {
    .customer-ledger .calendar-day,
    .customer-ledger .calendar-day-empty {
        height: 45px;
        padding: 3px
    }

    .customer-ledger .calendar-date strong {
        font-size: 14px
    }

    .customer-ledger .calendar-supply > strong,
    .customer-ledger .calendar-amount > strong {
        font-size: 6px
    }
}

@media(min-width:601px) {
    .page:has(.customer-overview) {
        padding-top: 0;
        padding-bottom: 0
    }

    .customer-overview {
        padding: 7px 18px 9px
    }

    .customer-overview .back {
        margin-bottom: 6px
    }

    .customer-overview .customer-header .avatar {
        width: 48px;
        height: 48px;
        font-size: 20px
    }

    .customer-overview .customer-header h1 {
        font-size: 28px
    }

    .customer-period {
        margin-top: 8px
    }

    .customer-overview .summary {
        margin-top: 9px
    }

    .customer-overview .summary .tile {
        min-height: 58px;
        padding: 8px 12px
    }

    .customer-overview .summary .tile strong {
        margin-top: 2px;
        font-size: 19px
    }

    .customer-overview .summary .tile:first-child strong {
        font-size: 21px
    }

    .customer-ledger {
        padding-top: 2px
    }
}

@media(min-width:601px) and (max-width:900px) {
    .customer-overview {
        padding: 10px 14px 12px
    }

    .customer-overview .customer-hero {
        align-items: flex-start
    }

    .customer-overview .customer-header .avatar {
        width: 44px;
        height: 44px;
        font-size: 18px
    }

    .customer-overview .customer-header h1 {
        font-size: 25px
    }

    .customer-overview .customer-header small {
        display: block;
        max-width: 190px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .customer-overview .customer-actions {
        display: grid;
        grid-template-columns: repeat(3, auto);
        gap: 5px
    }

    .customer-overview .customer-actions button {
        min-height: 32px;
        padding: 5px 7px;
        font-size: 11px
    }

    .customer-period {
        margin-top: 12px
    }

    .customer-overview .summary .tile {
        min-height: 55px;
        padding: 7px
    }

    .customer-overview .summary .tile small,
    .customer-overview .summary .tile em {
        font-size: 9px
    }

    .customer-overview .summary .tile strong,
    .customer-overview .summary .tile:first-child strong {
        margin-top: 2px;
        font-size: 17px
    }

    .customer-ledger .calendar-day,
    .customer-ledger .calendar-day-empty {
        height: 58px;
        min-height: 0;
        padding: 5px;
        gap: 2px
    }

    .customer-ledger .calendar-date {
        display: block
    }

    .customer-ledger .calendar-date span,
    .customer-ledger .calendar-date small,
    .customer-ledger .delivery-chips,
    .customer-ledger .calendar-actions {
        display: none
    }

    .customer-ledger .calendar-date strong {
        display: block;
        font-size: 17px
    }

    .customer-ledger .calendar-supply > strong,
    .customer-ledger .calendar-amount > strong {
        display: block;
        font-size: 8px;
        margin: 0;
        text-overflow: ellipsis;
        white-space: nowrap
    }
}

/* Calendar date header cleanup */
.customer-ledger .calendar-date {
    display: flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0
}

.customer-ledger .calendar-date strong {
    flex: none;
    grid-row: auto
}

.customer-ledger .calendar-date span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.customer-ledger .calendar-date small {
    display: none
}

.customer-ledger .calendar-actions {
    min-width: 0;
    overflow: hidden;
    flex-wrap: nowrap
}

.customer-ledger .calendar-actions button {
    flex: none;
    min-height: 20px;
    padding: 1px 4px;
    font-size: 10px
}

.customer-ledger .calendar-actions button:not(:first-child) {
    display: none
}

@media(min-width:601px) {
    .customer-ledger .delivery-chips {
        display: flex;
        min-width: 0;
        overflow: hidden
    }

    .customer-ledger .delivery-chip {
        overflow: hidden;
        padding: 2px 4px;
        font-size: 9px;
        text-overflow: ellipsis;
        white-space: nowrap
    }
}

@media(min-width:601px) and (max-width:900px) {
    .customer-ledger .calendar-day,
    .customer-ledger .calendar-day-empty {
        height: 64px
    }

    .customer-ledger .calendar-date span {
        display: none
    }

    .customer-ledger .delivery-chips {
        display: flex
    }

    .customer-ledger .delivery-chip {
        max-width: 100%;
        font-size: 8px
    }

    .customer-ledger .calendar-actions {
        display: flex
    }
}

@media(max-width:600px) {
    .customer-ledger .calendar-date span,
    .customer-ledger .calendar-date small {
        display: none
    }

    .customer-ledger .delivery-chips,
    .customer-ledger .calendar-actions {
        display: none
    }
}

/* Keep delivery details visible. Earlier compact overrides gave each day a
   fixed height, which clipped the quantity chips and edit actions. */
@media(min-width:901px) {
    .customer-ledger .calendar-day,
    .customer-ledger .calendar-day-empty {
        height: 108px;
        min-height: 0;
        padding: 7px;
        gap: 3px;
        overflow: hidden
    }

    .customer-ledger .calendar-grid {
        align-items: stretch;
        gap: 8px
    }

    .customer-ledger .calendar-supply,
    .customer-ledger .delivery-chips,
    .customer-ledger .calendar-actions {
        overflow: hidden
    }

    .customer-ledger .delivery-chips,
    .customer-ledger .calendar-actions {
        flex-wrap: wrap
    }

    .customer-ledger .delivery-chip {
        max-width: 100%;
        padding: 2px 4px;
        font-size: 8px;
        line-height: 1.15;
        white-space: nowrap;
        text-overflow: ellipsis
    }

    .customer-ledger .calendar-actions button:not(:first-child) {
        display: inline-flex
    }

    .customer-ledger .calendar-date strong {
        font-size: 18px
    }

    .customer-ledger .calendar-supply > strong,
    .customer-ledger .calendar-amount > strong {
        font-size: 10px
    }

    .customer-ledger .calendar-actions button {
        min-height: 20px;
        padding: 1px 3px;
        font-size: 9px
    }

    .customer-ledger .calendar-grid[data-weeks="6"] .calendar-day,
    .customer-ledger .calendar-grid[data-weeks="6"] .calendar-day-empty {
        height: 88px;
        padding-block: 5px
    }
}

@media(min-width:601px) and (max-width:900px) {
    .customer-ledger .calendar-day,
    .customer-ledger .calendar-day-empty {
        height: auto;
        min-height: 96px;
        overflow: visible
    }

    .customer-ledger .calendar-supply,
    .customer-ledger .delivery-chips,
    .customer-ledger .calendar-actions {
        overflow: visible
    }
}

.calendar-day-clickable {
    cursor: pointer
}

.calendar-day-clickable:focus-visible {
    outline: 3px solid #84d6c9;
    outline-offset: 2px
}

.day-delivery-list {
    display: grid;
    gap: 10px
}

.day-delivery-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px;
    border: 1px solid #dce8e3;
    border-radius: 11px;
    background: #f8fbfa
}

.day-delivery-row > div {
    min-width: 0
}

.day-delivery-row strong,
.day-delivery-row small {
    display: block
}

.day-delivery-row small {
    margin-top: 4px;
    color: #71877d
}

.day-delivery-row button {
    flex: none;
    min-height: 36px;
    padding: 6px 12px
}