/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    color-scheme: light;
}

body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;

    color: var(--color-text);
    background: var(--color-page);

    font-family: var(--font-family);
    font-size: 14px;
}

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

button,
a {
    color: inherit;
}

a {
    text-decoration: none;
}

button {
    border: 0;
}


/* =========================================================
   APP HEADER
   ========================================================= */

.app-header {
    color: var(--color-text);
    background: var(--brand-green);
    border-bottom: 1px solid #88b66f;
}

.app-header__inner {
    display: grid;
    grid-template-columns: 190px 1fr auto;
    align-items: center;
    gap: 20px;

    width: min(
        calc(100% - (var(--admin-gutter) * 2)),
        var(--admin-max-width)
    );

    min-height: 62px;
    margin-inline: auto;
}

.app-brand {
    display: flex;
    flex-direction: column;
}

.app-brand strong {
    font-size: 16px;
}

.app-brand span {
    margin-top: 2px;
    font-size: 11px;
    opacity: 0.72;
}

.main-navigation {
    display: flex;
    align-self: stretch;
    gap: 4px;
}

.main-navigation__item {
    display: inline-flex;
    align-items: center;

    padding-inline: 15px;

    color: var(--color-text);
    background: transparent;
    border-radius: var(--radius-small);

    cursor: pointer;
}

.main-navigation__item.is-active {
    margin-block: 8px;
    background: var(--color-surface);
    font-weight: 700;
}

.main-navigation__item:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.app-header__actions {
    display: flex;
    justify-content: flex-end;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-height: 36px;
    padding: 7px 12px;

    border: 1px solid transparent;
    border-radius: var(--radius-small);

    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
}

.button--primary {
    color: white;
    background: var(--brand-red);
    border-color: #a84d4d;
}

.button--primary:hover {
    background: #a94f4f;
}

.button--secondary {
    color: var(--color-text);
    background: var(--color-surface);
    border-color: var(--color-border);
}

.button--secondary:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-border-strong);
}

.button--selected {
    color: #294526;
    background: var(--brand-green-soft);
    border-color: var(--brand-green);
}


/* =========================================================
   SCHEDULE TOOLBAR
   ========================================================= */

.schedule-toolbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;

    margin-top: 10px;
    padding: 8px;

    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius:
        var(--radius-medium)
        var(--radius-medium)
        0
        0;
}

.schedule-toolbar__navigation,
.schedule-toolbar__actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.schedule-toolbar__actions {
    justify-content: flex-end;
}

.schedule-toolbar__period {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.schedule-toolbar__period span {
    color: var(--color-text-muted);
    font-size: 11px;
}

.schedule-toolbar__period strong {
    font-size: 15px;
}

.schedule-summary {
    display: flex;
    align-items: center;
    gap: 14px;

    min-height: 36px;
    padding-inline: 10px;

    color: var(--color-text-muted);
    background: var(--color-surface);
    border-inline: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.schedule-summary strong {
    color: var(--color-text);
}

.schedule-summary strong span {
    color: #397b71;
}

.schedule-summary__separator {
    width: 1px;
    height: 16px;
    background: var(--color-border);
}

.schedule-summary__placeholder {
    margin-left: auto;
    font-size: 12px;
}


/* =========================================================
   ADMIN WIDTH
   ========================================================= */

.page-container {
    width: min(
        calc(100% - (var(--admin-gutter) * 2)),
        var(--admin-max-width)
    );

    margin-inline: auto;
    padding-block: 10px 40px;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.eyebrow {
    margin: 0 0 4px;

    color: var(--color-primary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

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

h1 {
    margin-bottom: 0;
    font-size: 32px;
}

h2 {
    margin-bottom: 0;
    font-size: 24px;
}


/* =========================================================
   VIEW SWITCHER
   ========================================================= */

.view-switcher {
    display: flex;
    gap: 4px;
    padding: 4px;

    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
}

.view-button {
    padding: 8px 16px;

    color: var(--color-text-muted);
    background: transparent;
    border: 0;
    border-radius: 8px;

    cursor: pointer;
}

.view-button.is-active {
    color: white;
    background: var(--color-primary);
}

.view-button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}


/* =========================================================
   DATE NAVIGATION
   ========================================================= */

.date-navigation {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-block: 28px 18px;
}

.navigation-button,
.today-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;
    padding-inline: 16px;

    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
}

.navigation-button {
    width: 42px;
    padding: 0;
}

.navigation-button:hover,
.today-button:hover {
    border-color: var(--color-primary);
}


/* =========================================================
   DATE HEADING
   ========================================================= */

.date-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    margin-bottom: 14px;
}

.weekday {
    margin-bottom: 2px;

    color: var(--color-text-muted);
    font-size: 14px;
}

.appointment-count {
    padding: 7px 11px;

    color: #ffd3e4;
    background: var(--color-primary-soft);
    border-radius: 999px;

    font-size: 14px;
    font-weight: 700;
}


/* =========================================================
   APPOINTMENT LIST
   ========================================================= */

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

.appointment-card {
    display: grid;
    grid-template-columns: 78px 1fr;
    gap: 18px;

    padding: 18px;

    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
}

.appointment-time {
    display: flex;
    flex-direction: column;
    gap: 3px;

    padding-right: 16px;
    border-right: 1px solid var(--color-border);
}

.appointment-time strong {
    color: var(--color-primary);
    font-size: 19px;
}

.appointment-time span {
    color: var(--color-text-muted);
    font-size: 13px;
}

.appointment-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.appointment-title h3 {
    margin-bottom: 0;
    font-size: 18px;
}

.service-name {
    margin-block: 6px 0;
    color: var(--color-text-muted);
}

.customer-phone,
.appointment-note {
    margin-block: 6px 0;
    font-size: 14px;
}

.appointment-note {
    color: var(--color-warning);
}


/* =========================================================
   STATUS
   ========================================================= */

.status {
    padding: 5px 9px;

    background: var(--color-surface-soft);
    border-radius: 999px;

    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.status--confirmed {
    color: #8fd8ff;
}

.status--completed {
    color: var(--color-success);
}

.status--cancelled,
.status--no_show {
    color: var(--color-danger);
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.empty-state {
    padding: 48px 24px;

    color: var(--color-text-muted);
    text-align: center;

    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--border-radius);
}

.empty-state p {
    margin-bottom: 0;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {
    .page-container {
        width: min(100% - 20px, var(--page-width));
        padding-top: 20px;
    }

    .page-header {
        align-items: flex-start;
    }

    h1 {
        font-size: 26px;
    }

    .appointment-card {
        grid-template-columns: 62px 1fr;
        gap: 12px;
        padding: 14px;
    }

    .appointment-time {
        padding-right: 10px;
    }

    .appointment-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }
}

/* =========================================================
   OFFICIAL WEEK SCHEDULE
   ========================================================= */

.schedule-scroll {
    overflow-x: auto;
    padding-bottom: 14px;
}

.schedule-board {
    min-width: 1280px;

    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 0;
    border-radius:
        0
        0
        var(--radius-medium)
        var(--radius-medium);

    overflow: hidden;
}

.schedule-header {
    display: grid;
    grid-template-columns:
        62px
        repeat(7, minmax(145px, 1fr))
        62px;
}

.schedule-header {
    position: sticky;
    top: 0;
    z-index: 20;
}

.schedule-corner,
.schedule-day-heading {
    color: var(--color-text);
    background: var(--brand-yellow);
    border-color: #d8c36e;
}

.schedule-corner {
    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--color-text-muted);
    font-size: 12px;
}

.schedule-day-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;

    border-left: 0;
}

.schedule-day-heading span,
.schedule-day-heading small {
    color: var(--color-text-muted);
    font-size: 12px;
}

.schedule-day-heading strong {
    font-size: 16px;
}

.schedule-day-heading.is-today {
    color: var(--color-text);
    background: var(--brand-green);
}

.schedule-day-heading.is-today strong {
    color: var(--color-text);
}




.schedule-day-column.is-today {
    box-shadow:
        inset 2px 0 0 var(--brand-green),
        inset -2px 0 0 var(--brand-green);
}



.schedule-hour-cell:nth-child(even) {
    background: var(--color-surface-muted);
}


/* =========================================================
   APPOINTMENTS INSIDE TIMELINE
   ========================================================= */

.timeline-appointment {
    position: absolute;
    top: calc(var(--appointment-top) + 2px);
    z-index: 4;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    height: calc(var(--appointment-height) - 4px);
    min-height: 26px;
    padding: 4px 5px;

    color: var(--color-text);
    text-align: center;

    background: var(--brand-blue-soft);
    border: 1px solid var(--brand-blue);
    border-radius: var(--radius-small);

    cursor: pointer;
    overflow: hidden;
}

.timeline-appointment.is-lane-0 {
    left: 3px;
    width: calc(50% - 5px);
}

.timeline-appointment.is-lane-1 {
    left: calc(50% + 2px);
    width: calc(50% - 5px);
}

.timeline-appointment.is-full-width {
    left: 3px;
    width: calc(100% - 6px);
}

.timeline-appointment time,
.timeline-appointment span {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timeline-appointment strong {
    display: block;

    width: 100%;

    font-size: 12px;
    line-height: 1.15;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.appointment-payment {
    display: block;

    width: 100%;
    margin-top: 3px;

    color: #397b57;

    font-size: 9px;
    font-weight: 700;
    line-height: 1.1;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timeline-appointment time {
    font-size: 10px;
    font-weight: 800;
}

.timeline-appointment strong {
    margin-top: 2px;

    font-size: 12px;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.timeline-appointment span {
    margin-top: 2px;

    font-size: 10px;
    opacity: 0.72;
}

.timeline-appointment--combo {
    background: var(--brand-yellow-soft);
    border-color: #d6b94e;
}

.timeline-appointment--removal {
    background: var(--brand-green-soft);
    border-color: var(--brand-green);
}

.timeline-appointment:hover {
    filter: brightness(1.08);
    z-index: 8;
}

/* =========================================================
   TIMELINE GEOMETRY
   Giữ toàn bộ quy tắc định vị timeline tại một chỗ.
   ========================================================= */

.schedule-body {
    position: relative;

    display: grid;
    grid-template-columns:
        62px
        repeat(7, minmax(145px, 1fr))
        62px;

    height: var(--timeline-height);
}


/* =========================================================
   TIME RAILS
   ========================================================= */

.time-rail {
    position: relative;
    z-index: 6;

    height: var(--timeline-height);

    background: var(--brand-yellow);
    border-inline: 1px solid #d8c36e;
}

.time-label {
    position: absolute;
    top: var(--time-position);
    left: 0;
    z-index: 7;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: var(--row-height);

    color: var(--color-text);
    background: var(--brand-yellow);
    border-bottom: 1px solid #d8c36e;

    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}


/* =========================================================
   DAY COLUMNS
   ========================================================= */

.schedule-day-column {
    position: relative;

    height: var(--timeline-height);

    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
}

/*
 * Ngày hiện tại dùng màu xanh lá nhẹ.
 * Không dùng primary vì primary hiện là màu đỏ.
 */
.schedule-day-column.is-today {
    box-shadow:
        inset 2px 0 0 var(--brand-green),
        inset -2px 0 0 var(--brand-green);
}


/* =========================================================
   FIXED HOUR ROWS
   ========================================================= */

.schedule-hour-rows {
    position: absolute;
    inset: 0;
    z-index: 0;

    display: block;
}

.schedule-hour-cell {
    display: block;

    width: 100%;
    height: var(--row-height);

    background: #ffffff;
    border-bottom: 1px solid var(--color-border);

    cursor: pointer;
}

/* Row giờ xen kẽ đậm và nhạt */
.schedule-hour-cell:nth-child(even) {
    background: var(--color-surface-muted);
}

/* Ngày hiện tại dùng nền xanh rất nhẹ */
.schedule-day-column.is-today
.schedule-hour-cell:nth-child(odd) {
    background: #f6faf3;
}

.schedule-day-column.is-today
.schedule-hour-cell:nth-child(even) {
    background: var(--brand-green-soft);
}

.schedule-hour-cell {
    cursor: pointer;
    transition:
        background-color 220ms ease,
        box-shadow 220ms ease;
}

.schedule-hour-cell:hover {
    background: var(--brand-green) !important;
    box-shadow: inset 0 0 0 1px rgb(134 188 189 / 55%);
}

.schedule-hour-cell:focus-visible {
    outline: 2px solid var(--color-teal);
    outline-offset: -2px;
}

/* =========================================================
   APPOINTMENTS LAYER
   ========================================================= */

.timeline-appointment {
    position: absolute;
    top: calc(var(--appointment-top) + 2px);
    left: calc(var(--appointment-left) + 3px);
    z-index: 4;

    width: calc(var(--appointment-width) - 6px);
    height: calc(var(--appointment-height) - 4px);

    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    height: calc(var(--appointment-height) - 4px);
    min-height: 26px;
    padding: 4px 5px;

    color: var(--color-text);
    text-align: center;

    background: var(--brand-blue-soft);
    border: 1px solid var(--brand-blue);
    border-radius: var(--radius-small);

    cursor: pointer;
    overflow: hidden;
}



.timeline-appointment--combo {
    background: var(--brand-yellow-soft);
    border-color: #d6b94e;
}

.timeline-appointment--removal {
    background: var(--brand-green-soft);
    border-color: var(--brand-green);
}


/* =========================================================
   CURRENT TIME LINE
   ========================================================= */

.current-time-line {
    position: absolute;
    top: var(--current-time-top);
    left: 62px;
    right: 62px;
    z-index: 10;

    height: 2px;

    background: var(--brand-red);
    pointer-events: none;
}

.current-time-line__dot {
    position: absolute;
    top: 50%;
    left: -5px;

    width: 10px;
    height: 10px;

    background: var(--brand-red);
    border: 2px solid white;
    border-radius: 50%;

    transform: translateY(-50%);
}

.current-time-line__label {
    position: absolute;
    top: 50%;
    left: 5px;

    padding: 2px 5px;

    color: white;
    background: var(--brand-red);
    border-radius: 4px;

    font-size: 10px;
    font-weight: 800;
    line-height: 1;

    transform: translateY(-50%);
}


/* =========================================================
   MODAL
   ========================================================= */

.modal {
    position: fixed;
    inset: 0;
    z-index: 100;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 20px;
}

.modal.is-open {
    display: flex;
}

.modal__backdrop {
    position: absolute;
    inset: 0;

    background: rgb(28 35 32 / 55%);
}

.modal__dialog {
    position: relative;
    z-index: 1;

    width: min(100%, 460px);
    max-height: calc(100vh - 30px);

    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);

    box-shadow: 0 16px 44px rgb(38 48 45 / 20%);
    overflow-y: auto;
}

.modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    padding: 14px 16px;

    border-bottom: 1px solid var(--color-border);
}

.modal__eyebrow {
    color: var(--brand-red);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.modal__header h2 {
    margin: 3px 0 0;
    font-size: 18px;
    text-transform: uppercase;
    color: var(--brand-red);
}

.modal__close {
    width: 32px;
    height: 32px;
    font-size: 20px;

    color: var(--color-text);
    background: var(--color-surface-muted);
    border-radius: var(--radius-small);

    font-size: 24px;
    cursor: pointer;
}

.modal__body {
    padding: 14px 16px;
}

.modal-message {
    padding: 30px;

    color: var(--color-text-muted);
    text-align: center;
}

.detail-highlight {
    padding: 16px;

    background: var(--brand-blue-soft);
    border: 1px solid var(--brand-blue);
    border-radius: var(--radius-medium);
}

.detail-highlight > strong,
.detail-highlight > span {
    display: block;
    font-size: 16px;
}

.detail-highlight > strong {
    font-size: 16px;
}

.detail-highlight > span {
    margin-top: 4px;
    color: var(--color-text-muted);
}

.detail-date-time {
    display: flex;
    justify-content: space-between;
    gap: 12px;

    margin-top: 10px;
    padding-top: 9px;

    border-top: 1px solid var(--brand-blue);
}

.detail-service {
    font-weight: 700;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;

    margin-top: 10px;
}

.detail-item {
    padding: 9px 10px;

    background: var(--color-surface-muted);
    border-radius: var(--radius-small);
}

.detail-item span,
.detail-item strong {
    display: block;
}

.detail-item span {
    margin-bottom: 4px;
    color: var(--color-text-muted);
    font-size: 12px;
}

.detail-note {
    margin-top: 10px;
    padding: 9px 10px;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
}

.detail-note span {
    color: var(--color-text-muted);
    font-size: 12px;
}

.detail-note p {
    margin: 5px 0 0;
}

.modal__footer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;

    padding: 0 16px 16px;
}

/* Nút quan trọng nằm một hàng riêng */
.modal__footer .button--success {
    grid-column: 1 / -1;
}

/* Ba hành động phụ nằm cùng hàng */
.modal__footer .button {
    min-height: 36px;
    padding-inline: 8px;
    font-size: 12px;
}

.button--success {
    color: var(--color-text);
    background: var(--brand-green);
    border-color: #82ad69;
}

.button--danger {
    color: white;
    background: var(--brand-red);
    border-color: #a84d4d;
}

.button--warning {
    color: #5d4a0a;
    background: var(--brand-yellow);
    border-color: #d6b94e;
}

.button--warning:hover:not(:disabled) {
    background: #efd477;
}

.modal__footer .button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.modal-open {
    overflow: hidden;
}

@media (max-width: 600px) {
    .modal {
        padding: 10px;
    }

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

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

    .modal__footer .button:first-child {
        grid-column: 1 / -1;
    }
}


/* =========================================================
   RESPONSIVE FALLBACK
   Desktop-first, mobile vẫn sử dụng được
   ========================================================= */

@media (max-width: 800px) {
    :root {
        --admin-gutter: 10px;
    }

    .app-header__inner {
        grid-template-columns: 1fr auto;
        gap: 10px;
    }

    .main-navigation {
        grid-column: 1 / -1;
        order: 3;

        overflow-x: auto;
        padding-bottom: 7px;
    }

    .main-navigation__item {
        min-height: 36px;
        padding-inline: 12px;
        white-space: nowrap;
    }

    .schedule-toolbar {
        grid-template-columns: 1fr auto;
    }

    .schedule-toolbar__period {
        grid-column: 1 / -1;
        grid-row: 1;

        margin-bottom: 4px;
    }

    .schedule-toolbar__navigation {
        grid-column: 1;
        grid-row: 2;
    }

    .schedule-toolbar__actions {
        grid-column: 2;
        grid-row: 2;
    }

    .schedule-summary {
        overflow-x: auto;
        white-space: nowrap;
    }

    .schedule-summary__placeholder {
        margin-left: 0;
    }

    .schedule-scroll {
        width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
    }
}



/* =========================================================
   APPOINTMENT DRAG AND DROP
   ========================================================= */

.timeline-appointment {
    touch-action: none;
    user-select: none;
}

.timeline-appointment.is-dragging {
    opacity: 0.3;
}

.appointment-drag-ghost {
    position: fixed !important;
    z-index: 1000 !important;

    left: 0;
    top: 0;

    margin: 0 !important;

    opacity: 0.9;
    pointer-events: none;

    box-shadow: 0 8px 24px rgb(38 48 45 / 25%);
    transform: rotate(1deg);
}

.appointment-dragging {
    cursor: grabbing;
}

.appointment-dragging * {
    cursor: grabbing !important;
}

.schedule-hour-cell.is-drop-target {
    position: relative;

    background: var(--brand-yellow-soft) !important;

    box-shadow:
        inset 0 0 0 2px var(--brand-red);
}

.schedule-hour-cell.is-saving-target {
    background: var(--brand-yellow) !important;
}

.schedule-hour-cell.is-drop-success {
    background: var(--brand-green) !important;
}


/* =========================================================
   STATUS CONFIRMATION
   ========================================================= */

.status-confirm-message {
    margin: 0;

    color: var(--color-text);
    line-height: 1.5;
}

.form-field {
    display: grid;
    gap: 6px;

    margin-top: 14px;
}

.form-field span {
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 700;
}

.form-field textarea {
    width: 100%;
    padding: 10px;

    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);

    resize: vertical;
}

.form-field textarea:focus {
    border-color: var(--brand-blue);
    outline: 2px solid var(--brand-blue-soft);
}

.status-confirm-actions {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 8px;

    padding: 0 16px 16px;
}

.timeline-appointment--status-cancelled {
    background: color-mix(
        in srgb,
        var(--color-red) 24%,
        #6f6f74 76%
    ) !important;

    border-color: #686064 !important;
    color: #c5c5c5 !important;
    opacity: 0.58;
    filter: saturate(0.55);
    color: inherit;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    background: #80022c !important;
    

}

/*
 * Khách không đến:
 * xám đậm hơn lịch huỷ nhưng không gạch ngang.
 */
.timeline-appointment--status-no_show {
    background: #686b6d !important;
    border-color: #505355 !important;
    color: #f3f3f3 !important;
    opacity: 0.66;
    filter: grayscale(1);
}

.timeline-appointment--status-no_show .timeline-appointment__name {
    color: inherit;
}


.timeline-appointment--status-no_show {
    opacity: 0.65;
    filter: grayscale(0.65);
}

.timeline-appointment--status-completed {
    box-shadow:
        inset 0 -3px 0 var(--brand-green);
}


/* =========================================================
   MODAL SỬA LỊCH
   ========================================================= */

.appointment-edit-modal {
    z-index: 1100;
}

.appointment-edit-modal .modal__backdrop {
    z-index: 0;
}

.appointment-edit {
    position: relative;
    z-index: 1;

    width: min(500px, calc(100vw - 28px));
    max-height: calc(100vh - 28px);
    overflow-y: auto;

    background: #ffffff;
    border: 1px solid rgb(0 0 0 / 12%);
    border-radius: 12px;
    box-shadow: 0 20px 55px rgb(0 0 0 / 24%);
}

.appointment-edit__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding: 16px 18px;
    border-bottom: 1px solid rgb(0 0 0 / 10%);
}

.appointment-edit__eyebrow {
    margin: 0 0 3px;

    color: var(--color-red);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.appointment-edit__header h2 {
    margin: 0;

    color: var(--color-red);
    font-size: 20px;
    line-height: 1.2;
}

.appointment-edit__close {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;

    padding: 0;
    border: 1px solid rgb(0 0 0 / 14%);
    border-radius: 8px;

    background: #ffffff;
    color: #333333;

    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.appointment-edit__close:hover {
    background: var(--color-yellow);
}

.appointment-edit__form {
    display: grid;
    gap: 14px;
    padding: 16px 18px 18px;
}

.appointment-edit__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}

.appointment-edit__field {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.appointment-edit__field > span {
    color: #414141;
    font-size: 12px;
    font-weight: 650;
}

.appointment-edit__field input,
.appointment-edit__field select,
.appointment-edit__field textarea {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;

    padding: 9px 10px;
    border: 1px solid #c9ceca;
    border-radius: 7px;

    background: #ffffff;
    color: #202320;

    font: inherit;
    font-size: 14px;
}

.appointment-edit__field input,
.appointment-edit__field select {
    height: 38px;
}

.appointment-edit__field textarea {
    min-height: 78px;
    resize: vertical;
    line-height: 1.4;
}

.appointment-edit__field input:focus,
.appointment-edit__field select:focus,
.appointment-edit__field textarea:focus {
    border-color: var(--color-teal);
    outline: 3px solid rgb(134 188 189 / 22%);
}

.appointment-edit__field input[readonly] {
    border-color: #dde2de;
    background: #f1f3f1;
    color: #626762;
    cursor: default;
}

.appointment-edit__error {
    margin: 0;
    padding: 9px 11px;

    border: 1px solid rgb(186 90 90 / 35%);
    border-radius: 7px;

    background: rgb(186 90 90 / 10%);
    color: #873f3f;

    font-size: 13px;
}

.appointment-edit__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;

    padding-top: 2px;
    font-size: 13px;
}

.appointment-edit__footer .button {
    min-width: 104px;
}

/* Mobile vẫn dùng được, nhưng admin desktop là giao diện chính. */
@media (max-width: 540px) {
    .appointment-edit {
        width: calc(100vw - 18px);
        max-height: calc(100vh - 18px);
    }

    .appointment-edit__header {
        padding: 14px;
    }

    .appointment-edit__form {
        gap: 12px;
        padding: 14px;
    }

    .appointment-edit__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .appointment-edit__footer {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .appointment-edit__footer .button {
        width: 100%;
        min-width: 0;
    }
}


.payment-customer {
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgb(164 206 139 / 22%);
}

.payment-customer strong {
    color: #31462d;
    font-size: 16px;
}

.payment-customer span {
    color: #657063;
    font-size: 12px;
}

.payment-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.payment-summary > div {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid rgb(0 0 0 / 10%);
    border-radius: 8px;
    background: #f6f7f5;
}

.payment-summary span {
    color: #686d68;
    font-size: 12px;
}

.payment-summary strong {
    font-size: 16px;
}

#payment-final-amount,
#payment-paid-amount {
    color: #3d7336;
}

#payment-debt-amount {
    color: var(--color-red);
}




.form-label-row label {
    margin-bottom: 0;
}

/* =========================================================
   MODAL THANH TOÁN
   ========================================================= */

.appointment-payment .form-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 32px;
    gap: 8px;
    margin-bottom: 6px;
}

.appointment-payment .form-label-row label {
    margin: 0;
    color: #333;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}

.payment-label-placeholder {
    width: 1px;
    height: 30px;
}

/* Nhóm nút giảm giá nhanh */
.payment-quick-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Nút 0%, 15% và Nhận đủ */
.payment-quick-button,
.payment-fill-button {
    min-width: 48px;
    min-height: 30px;
    padding: 4px 10px;

    border: 1px solid #d4a900;
    border-radius: 6px;

    background-color: #f7e49b;
    color: #463800;

    font: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;
    box-shadow: 0 1px 2px rgb(0 0 0 / 12%);

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease;
}

.payment-fill-button {
    min-width: 72px;
}

.payment-quick-button:hover,
.payment-fill-button:hover {
    background-color: #efd36b;
    border-color: #b98f00;
}

.payment-quick-button:active,
.payment-fill-button:active {
    transform: translateY(1px);
    box-shadow: none;
}

.payment-quick-button:focus-visible,
.payment-fill-button:focus-visible {
    outline: 2px solid #86bcbd;
    outline-offset: 2px;
}

/* Tiền mặt và chuyển khoản */
.payment-method-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

/* Màu chữ mặc định trong modal thanh toán */
.appointment-payment {
    color: #2f3437;
}

.appointment-payment label,
.appointment-payment .appointment-edit__field > span,
.appointment-payment .payment-summary__item span {
    color: #555;
}

.payment-customer strong {
    color: #2f3437;
}

.payment-customer span {
    color: #666;
}

/* Mặc định số tiền dùng màu đen xám */
.payment-summary__item strong {
    color: #333;
}

/* Chỉ Thành tiền và Đã thu dùng màu xanh */
.payment-summary__item--final strong,
.payment-summary__item--paid strong {
    color: #4f812f;
}

/* Tiền giảm và Công nợ không dùng màu xanh */
.payment-summary__item--discount strong,
.payment-summary__item--debt strong {
    color: #444;
}

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



.payment-quick-button:hover,
.payment-fill-button:hover {
    background: var(--color-green);
    color: #fff;
}

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

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


/* Thanh toán đủ */
.detail-item--paid {
    background-color: #e2f1dc;
    border: 1px solid #a4ce8b;
}

.detail-item--paid #detail-payment {
    color: #42782f;
    font-weight: 800;
}

/* Mới thanh toán một phần */
.detail-item--partial #detail-payment {
    color: #333;
    font-weight: 800;
}

/* Còn công nợ */
.detail-item--debt {
    background-color: #f8e1e1;
    border: 1px solid #d99494;
}

.detail-item--debt #detail-debt {
    color: #ba5a5a;
    font-weight: 800;
}


.timeline-appointment--has-debt {
    background-color: #f3dcdc !important;
    border-color: #ba5a5a !important;
    box-shadow: inset 4px 0 0 #ba5a5a;
    color: #713636;
}

.timeline-appointment--has-debt strong {
    color: #713636;
}


/* =========================================================
   DAY SCHEDULE TABLE
   Bảng ngày dùng cùng chiều rộng với bảng tuần.
   ========================================================= */

.day-summary__debt {
    color: var(--brand-red) !important;
}

.day-schedule-scroll {
    overflow-x: auto;
    padding-bottom: 14px;
}

.day-schedule-table-wrap {
    position: relative;
    min-width: 1280px;

    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 0;
    border-radius:
        0
        0
        var(--radius-medium)
        var(--radius-medium);

    overflow: hidden;
}

.day-schedule-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.day-column--time {
    width: 72px;
}

.day-column--customer {
    width: 15%;
}

.day-column--phone {
    width: 130px;
}

.day-column--service {
    width: 205px;
}

.day-column--status {
    width: 140px;
}

.day-column--payment {
    width: 245px;
}

.day-column--note {
    width: auto;
}

.day-column--actions {
    width: 136px;
}

.day-schedule-table th,
.day-schedule-table td {
    height: 50px;
    padding: 6px 9px;

    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);

    vertical-align: middle;
}

.day-schedule-table tr > :last-child {
    border-right: 0;
}

.day-schedule-table tbody tr:last-child > * {
    border-bottom: 0;
}

.day-schedule-table thead th {
    height: 42px;

    color: var(--color-text);
    background: var(--brand-yellow);

    font-size: 12px;
    text-align: center;
}

/* Timeline được căn giữa cả ngang lẫn dọc. */
.day-time-cell {
    color: var(--color-text);
    background: var(--brand-yellow-soft);

    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-align: center;
    vertical-align: middle !important;
}

.day-schedule-row:nth-child(even) td {
    background: var(--color-surface-soft);
}

.day-empty-cell {
    color: var(--color-text-muted);
    text-align: center;
}

.day-customer-link {
    display: block;
    max-width: 100%;
    padding: 0;

    color: var(--brand-blue);
    background: transparent;

    font-weight: 750;
    text-align: left;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

/* Màu tên khách dùng cùng quy ước màu dịch vụ của bảng tuần. */
.day-customer-link--hand,
.day-customer-link--nail_hand,
.day-customer-link--tay {
    color: #397b71;
}

.day-customer-link--foot,
.day-customer-link--nail_foot,
.day-customer-link--chan {
    color: var(--brand-red);
}

.day-customer-link--combo {
    color: #8a6900;
}

.day-customer-link--removal {
    color: #4f812f;
}

.day-customer-meta,
.day-service-time,
.day-payment {
    display: block;
    margin-top: 3px;
    font-size: 11px;
}

.day-customer-meta {
    color: var(--color-text-muted);
}

.day-customer-meta span,
.day-payment--debt {
    color: var(--brand-red);
    font-weight: 750;
}

.day-service-time,
.day-cell-muted {
    color: var(--color-text-muted);
}

.day-phone-link {
    color: #397b71;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.day-payment--paid {
    color: #4f812f;
}

.day-payment--partial {
    color: var(--color-text);
}

.day-note-cell {
    max-width: 0;
    color: var(--color-text-muted);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.day-schedule-table .status {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 8px;

    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.day-schedule-table .status--completed {
    color: #4f812f;
    background: var(--brand-green-soft);
    border-color: var(--brand-green);
}

.day-schedule-table .status--cancelled {
    color: #864141;
    background: #f6dddd;
    border-color: #d9a0a0;
}

.day-schedule-table .status--no_show {
    color: #4e5350;
    background: #dfe2e0;
    border-color: #aeb5b0;
}

.day-schedule-row--has-debt td {
    background: #fbefef !important;
}

.day-schedule-row--status-cancelled,
.day-schedule-row--status-no_show {
    opacity: 0.64;
}

.day-schedule-row--status-cancelled .day-customer-link {
    color: #4e5350;
    text-decoration: line-through;
}

.day-schedule-row--status-completed {
    opacity: 0.76;
}

.day-quick-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.day-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 30px;
    padding: 0;

    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);

    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}

.day-action-button--complete {
    color: #477135;
    background: var(--brand-green-soft);
    border-color: var(--brand-green);
}

.day-action-button--no-show {
    color: #705d16;
    background: var(--brand-yellow-soft);
    border-color: var(--brand-yellow);
}

.day-action-button--cancel {
    color: #914242;
    background: #f8e4e4;
    border-color: #d9a0a0;
}

.day-action-button:hover:not(:disabled) {
    filter: brightness(0.96);
    transform: translateY(-1px);
}

.day-action-button:disabled {
    cursor: not-allowed;
    filter: grayscale(1);
    opacity: 0.35;
}

.day-current-time {
    position: absolute;
    z-index: 3;
    top: var(--day-current-time-top);
    right: 0;
    left: 72px;

    height: 2px;
    background: var(--brand-red);
    pointer-events: none;
}

.day-current-time span {
    position: absolute;
    top: -10px;
    left: -56px;

    min-width: 48px;
    padding: 2px 5px;

    color: white;
    background: var(--brand-red);
    border-radius: 8px;

    font-size: 11px;
    line-height: 16px;
    text-align: center;
}

.day-schedule-help {
    margin-top: 8px;
    color: var(--color-text-muted);
    font-size: 12px;
}

@media (max-width: 800px) {
    .day-summary {
        flex-wrap: wrap;
        gap: 6px 12px;
        padding-block: 8px;
    }

    .day-summary .schedule-summary__placeholder {
        width: 100%;
        margin-left: 0;
    }

    .day-schedule-table-wrap {
        min-width: 1080px;
    }

    .day-column--customer {
        width: 190px;
    }

    .day-column--actions {
        width: 148px;
    }

    /* Nút nhìn gọn nhưng vùng bấm đủ lớn trên màn hình cảm ứng. */
    .day-action-button {
        width: 40px;
        height: 40px;
    }
}

/* =========================================================
   DAY SCHEDULE DRAG AND DROP
   ========================================================= */

/*
 * Chỉ những tên khách đang hẹn mới có thuộc tính này.
 */
.day-customer-link[data-day-drag-appointment] {
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.day-customer-link[data-day-drag-appointment]:active {
    cursor: grabbing;
}

/*
 * Làm mờ tên khách gốc trong lúc kéo.
 */
.day-customer-link.is-dragging {
    opacity: 0.3;
}

/*
 * Hàng giờ trống khi con trỏ kéo đi qua.
 */
.day-drop-target.is-drop-target > * {
    background: var(--brand-yellow-soft) !important;

    box-shadow:
        inset 0 2px 0 var(--brand-red),
        inset 0 -2px 0 var(--brand-red);
}

/*
 * Khi kéo qua giờ đã có khách,
 * cả hàng sáng lên để báo có thể thả.
 */
.day-schedule-row.day-drop-target.is-drop-target > td,
.day-schedule-row.day-drop-target.is-drop-target > th {
    background: var(--brand-yellow-soft) !important;
}

.day-schedule-row.day-drop-target.is-drop-target
.day-customer-link {
    color: var(--brand-red);
}

.day-drop-target.is-drop-target .day-empty-cell {
    color: var(--brand-red);
    font-weight: 700;
}

/*
 * Trong lúc hệ thống đang gửi yêu cầu chuyển lịch.
 */
.day-drop-target.is-saving-target > * {
    background: var(--brand-yellow) !important;
}

/*
 * API đã trả thành công.
 */
.day-drop-target.is-drop-success > * {
    background: var(--brand-green) !important;
}

/*
 * Ghost của tên khách không cần dài bằng ô khách hàng.
 */
.day-customer-link.appointment-drag-ghost {
    display: inline-flex;
    align-items: center;

    min-width: 150px;
    min-height: 38px;
    padding: 8px 12px;

    background: var(--color-surface);
    border: 1px solid var(--brand-blue);
    border-radius: var(--radius-small);

    text-decoration: none;
}


/* =========================================================
   THU CÔNG NỢ
   ========================================================= */

.button--collect-debt {
    color: #713636;
    background: #f3dcdc;
    border-color: var(--brand-red);
}

.button--collect-debt:hover:not(:disabled) {
    background: #eacaca;
}

.appointment-debt {
    width: min(460px, calc(100vw - 28px));
}

#debt-current-amount {
    color: var(--brand-red);
    font-weight: 800;
}

.debt-receipt-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 10px 12px;
    border: 1px solid var(--brand-green);
    border-radius: var(--radius-small);

    background: rgb(164 206 139 / 22%);
}

.debt-receipt-summary span {
    color: var(--color-text-muted);
    font-size: 13px;
}

.debt-receipt-summary strong {
    color: #42782f;
    font-size: 17px;
}

/* Ô khách hàng có thể click để thêm lịch cùng giờ. */
.day-customer-create-cell {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.day-customer-create-cell:hover {
    background-color: rgba(96, 230, 19, 0.473);
}

.day-customer-create-cell.day-empty-cell {
    color: #527a43;
    font-weight: 700;
    text-align: center;
}

/* =========================================================
   CUSTOMER LIST
   ========================================================= */

.customer-page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;

    margin-bottom: 12px;
}

.customer-page-heading h1 {
    margin: 0;
    color: var(--brand-red);
    font-size: 22px;
}

.customer-page-heading p {
    margin: 4px 0 0;
    color: var(--color-text-muted);
}

.customer-summary {
    display: flex;
    gap: 8px;
}

.customer-summary__item {
    min-width: 135px;
    padding: 8px 11px;

    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
}

.customer-summary__item span,
.customer-summary__item strong {
    display: block;
}

.customer-summary__item span {
    color: var(--color-text-muted);
    font-size: 12px;
}

.customer-summary__item strong {
    margin-top: 3px;
    font-size: 16px;
}

.customer-summary__item--debt strong {
    color: var(--brand-red);
}

.customer-toolbar {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto;
    gap: 10px;

    padding: 11px;

    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius:
        var(--radius-small)
        var(--radius-small)
        0
        0;
}

.customer-search input {
    box-sizing: border-box;
    width: 100%;
    min-height: 38px;

    padding: 8px 11px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);

    font: inherit;
}

.customer-search input:focus {
    border-color: var(--brand-blue);
    outline: 3px solid rgb(134 188 189 / 20%);
}

.customer-filters {
    display: flex;
    gap: 7px;
}

.customer-table-scroll {
    overflow-x: auto;

    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 0;
    border-radius:
        0
        0
        var(--radius-small)
        var(--radius-small);
}

.customer-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
}

.customer-table th,
.customer-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border);
    text-align: center;
}

.customer-table th {
    background: var(--brand-yellow);
    color: #40391c;
    font-size: 12px;
}

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

.customer-table tbody tr:hover {
    background: rgb(164 206 139 / 12%);
}

.customer-table__row--debt {
    background: rgb(186 90 90 / 10%);
}

.customer-table__name {
    text-align: left !important;
}

.customer-name-button {
    padding: 0;
    border: 0;

    color: #397879;
    background: transparent;

    font: inherit;
    font-weight: 800;
    text-decoration: underline;
    cursor: pointer;
}

.customer-phone {
    color: #397879;
    font-weight: 700;
    text-decoration: none;
}

.customer-money {
    font-weight: 700;
}

.customer-debt {
    color: var(--brand-red);
}

.customer-paid {
    color: #4f812f;
}

.customer-muted {
    color: var(--color-text-muted);
}

.customer-detail-button {
    min-height: 32px;
    padding: 5px 10px;
    font-size: 12px;
}

.customer-table__empty {
    padding: 35px !important;
    color: var(--color-text-muted);
}

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

    .customer-summary {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .customer-summary__item {
        min-width: 0;
    }

    .customer-toolbar {
        grid-template-columns: 1fr;
    }

    .customer-filters .button {
        flex: 1;
    }
}


.customer-heading-actions {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.customer-heading-actions > .button {
    min-height: 50px;
}

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

    .customer-heading-actions > .button {
        min-height: 38px;
    }
}


/* =========================================================
   CUSTOMER DETAIL MODAL
   ========================================================= */

.customer-detail-dialog {
    width: min(680px, 100%);
}

.customer-detail-profile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;

    padding: 13px;

    background: var(--brand-blue-soft);
    border: 1px solid var(--brand-blue);
    border-radius: var(--radius-medium);
}

.customer-detail-profile strong,
.customer-detail-profile span {
    display: block;
}

.customer-detail-profile > div:first-child > strong {
    font-size: 17px;
}

.customer-detail-profile > div:first-child > span {
    margin-top: 4px;
    color: var(--color-text-muted);
}

.customer-detail-profile__debt {
    text-align: right;
}

.customer-detail-profile__debt span {
    color: var(--color-text-muted);
    font-size: 12px;
}

.customer-detail-profile__debt strong {
    margin-top: 3px;
    color: var(--brand-red);
    font-size: 17px;
}

.customer-history-title {
    margin: 14px 0 7px;
    font-size: 14px;
}

.customer-history-scroll {
    overflow-x: auto;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
}

.customer-history-table {
    width: 100%;
    min-width: 590px;
    border-collapse: collapse;
}

.customer-history-table th,
.customer-history-table td {
    padding: 8px 9px;
    border-bottom: 1px solid var(--color-border);
    font-size: 12px;
    text-align: center;
}

.customer-history-table th {
    background: var(--brand-yellow);
    color: #40391f;
}

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

.customer-history-row--debt {
    background: rgb(186 90 90 / 12%);
}

.customer-history-debt {
    color: var(--brand-red);
    font-weight: 800;
}

.customer-history-empty {
    padding: 25px !important;
    color: var(--color-text-muted);
}

.customer-detail-footer {
    grid-template-columns: repeat(5, 1fr);
}

.customer-detail-footer .button {
    min-width: 0;
}

.customer-detail-footer .button--danger {
    background: var(--brand-red);
}

@media (max-width: 650px) {
    .customer-detail-profile {
        grid-template-columns: 1fr;
    }

    .customer-detail-profile__debt {
        text-align: left;
    }

    .customer-detail-footer {
        grid-template-columns: repeat(2, 1fr);
    }

    .customer-detail-footer
    [data-action="collect-customer-debt"] {
        grid-column: 1 / -1;
        grid-row: 1;
    }
}


.customer-debt-modal {
    width: min(500px, calc(100vw - 28px));
}

.customer-selected-debt {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 9px 11px;

    background: rgb(247 228 155 / 35%);
    border: 1px solid #d7bd56;
    border-radius: var(--radius-small);
}

.customer-selected-debt span {
    color: var(--color-text-muted);
    font-size: 12px;
}

.customer-selected-debt strong {
    color: var(--brand-red);
    font-size: 16px;
}

.customer-debt-label-row {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.customer-edit-modal {
    width: min(460px, calc(100vw - 28px));
}

.customer-merge-modal {
    width: min(520px, calc(100vw - 28px));
}

.customer-merge-source {
    display: grid;
    gap: 3px;

    padding: 11px 12px;

    background: var(--brand-blue-soft);
    border: 1px solid var(--brand-blue);
    border-radius: var(--radius-small);
}

.customer-merge-source span,
.customer-merge-source small {
    color: var(--color-text-muted);
}

.customer-merge-source span {
    font-size: 12px;
}

.customer-merge-preview {
    padding: 11px 12px;

    background: rgb(164 206 139 / 20%);
    border: 1px solid var(--brand-green);
    border-radius: var(--radius-small);
}

.customer-merge-preview > span {
    color: var(--color-text-muted);
    font-size: 12px;
}

.customer-merge-preview p {
    margin: 5px 0;
}

.customer-merge-preview small {
    color: var(--color-text-muted);
}

.customer-merge-warning {
    padding: 9px 11px;

    background: rgb(247 228 155 / 42%);
    border: 1px solid #d7bd56;
    border-radius: var(--radius-small);

    color: #5d4a0a;
    font-size: 12px;
}

.customer-merge-confirm {
    display: flex;
    align-items: flex-start;
    gap: 9px;

    padding: 9px 0;
}

.customer-merge-confirm input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

.customer-merge-confirm span {
    font-size: 13px;
}

/* Chưa xác nhận: nút tối và không thể bấm */
#customer-merge-submit:disabled {
    background-color: #d8d8d8 !important;
    border-color: #c8c8c8 !important;
    color: #888 !important;
    opacity: 1;
    cursor: not-allowed;
}

/* Đã xác nhận: nút trở lại màu chính */
#customer-merge-submit:not(:disabled) {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    cursor: pointer;
}


.customer-split-dialog {
    width: min(680px, calc(100vw - 24px));
}

.customer-split-help {
    margin: 0 0 14px;
}

.customer-split-section {
    margin: 0 0 14px;
    padding: 12px;
    border: 1px solid #d9dfdc;
    border-radius: 8px;
}

.customer-split-section legend {
    padding: 0 6px;
    font-weight: 700;
}

.customer-split-appointments {
    display: grid;
    gap: 7px;
    max-height: 250px;
    overflow-y: auto;
}

.customer-split-appointment {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    background: #f7f9f7;
    border: 1px solid #d9dfdc;
    border-radius: 7px;
    cursor: pointer;
}

.customer-split-appointment:has(input:checked) {
    background: rgba(164, 206, 139, 0.28);
    border-color: #A4CE8B;
}

.customer-split-appointment__content {
    display: grid;
    gap: 2px;
}

.customer-split-appointment__content small {
    color: #626b67;
}

.customer-split-confirm {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px;
    background: rgba(247, 228, 155, 0.35);
    border-radius: 7px;
}

#customer-split-submit:disabled {
    background: #d8d8d8;
    border-color: #c8c8c8;
    color: #888;
    opacity: 1;
    cursor: not-allowed;
}

@media (max-width: 600px) {
    .customer-split-dialog {
        width: calc(100vw - 12px);
    }

    .customer-split-appointments {
        max-height: 210px;
    }
}

/* =========================================================
   THU CHI - DOANH THU NGÀY
   ========================================================= */

.finance-page {
    width: 100%;
    max-width: 1480px;
    margin: 18px auto 30px;
}

.finance-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding: 14px 16px;

    background: var(--color-green, #A4CE8B);
    border-radius: 9px 9px 0 0;
}

.finance-toolbar__title h1 {
    margin: 0 0 3px;

    font-size: 20px;
    color: #26322d;
}

.finance-toolbar__title span {
    font-size: 13px;
    color: #53605a;
}

.finance-date-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 10px 14px;

    background: #fff;
    border-right: 1px solid #d8dfdb;
    border-bottom: 1px solid #d8dfdb;
    border-left: 1px solid #d8dfdb;
}

.finance-date-navigation strong {
    min-width: 210px;
    text-align: center;
}

/* Ba số tổng quan đầu trang */

.finance-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;

    padding: 10px 0;
}

.finance-summary__item {
    padding: 11px 14px;

    background: #fff;
    border: 1px solid #d8dfdb;
    border-radius: 8px;
}

.finance-summary__item span {
    display: block;
    margin-bottom: 4px;

    font-size: 13px;
    color: #65716c;
}

.finance-summary__item strong {
    font-size: 19px;
}

/* Bảng */

.finance-table-scroll {
    width: 100%;
    overflow-x: auto;

    background: #fff;
    border: 1px solid #cfd8d3;
    border-radius: 8px;
}

.finance-table {
    width: 100%;
    min-width: 1280px;

    border-spacing: 0;
    border-collapse: collapse;

    font-size: 13px;
}

.finance-table th {
    padding: 10px 7px;

    background: #F7E49B;
    border-right: 1px solid rgba(108, 87, 20, 0.18);
    border-bottom: 1px solid #cfb95e;

    color: #342f1e;
    text-align: center;
    white-space: nowrap;
}

.finance-table td {
    padding: 9px 7px;

    border-right: 1px solid #e4e9e6;
    border-bottom: 1px solid #d8dfdb;

    vertical-align: middle;
}

.finance-table th:last-child,
.finance-table td:last-child {
    border-right: 0;
}

.finance-table tbody tr:hover {
    background: rgba(134, 188, 189, 0.1);
}

.finance-table__center {
    text-align: center;
}

.finance-table__money {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.finance-table__empty {
    padding: 30px !important;

    color: #65716c;
    text-align: center;
}

.finance-customer-name {
    min-width: 145px;

    color: #286b69;
    font-weight: 700;
}

.finance-row-note {
    display: block;
    margin-top: 3px;

    color: #65716c;
    font-size: 11px;
}

.finance-promotion,
.finance-discount,
.finance-debt {
    color: #BA5A5A;
}

.finance-money--received {
    color: #287248;
    font-weight: 800;
}

.finance-money--cash {
    color: #8a6800;
}

.finance-money--bank {
    color: #287477;
}

/*
 * Dòng thu công nợ lịch cũ có nền xanh nhạt
 * để phân biệt với khách làm dịch vụ trong ngày.
 */
.finance-row--old-debt {
    background: rgba(134, 188, 189, 0.13);
}

/*
 * Dòng đã kiểm tra chuyển khoản có nền xanh lá nhẹ.
 */
.finance-row--checked {
    background: rgba(164, 206, 139, 0.24) !important;
}

.finance-bank-check {
    width: 19px;
    height: 19px;

    accent-color: #5f946c;
    cursor: pointer;
}

/* Dòng tổng cuối ngày */

.finance-table tfoot td {
    padding-top: 12px;
    padding-bottom: 12px;

    border-top: 2px solid #b79428;
    border-bottom: 0;

    background: #f4e7b5;
    font-weight: 800;
}

/*
 * Ba ô tổng sử dụng màu khác nhau:
 * xanh lá = thực nhận
 * vàng = tiền mặt
 * xanh dương = chuyển khoản
 */
.finance-table tfoot .finance-total--received {
    background: rgba(164, 206, 139, 0.72);
    color: #205a39;
}

.finance-table tfoot .finance-total--cash {
    background: rgba(247, 228, 155, 0.95);
    color: #745800;
}

.finance-table tfoot .finance-total--bank {
    background: rgba(134, 188, 189, 0.62);
    color: #245f62;
}

/* Nút đối soát nằm dưới bảng, bên phải */

.finance-check-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;

    padding-top: 10px;
}

.finance-check-actions span {
    color: #65716c;
    font-size: 12px;
}

#finance-check-all-bank {
    min-width: 180px;
}

/* Mobile vẫn dùng được bằng cách kéo ngang bảng */

@media (max-width: 760px) {
    .finance-page {
        margin-top: 10px;
    }

    .finance-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .finance-date-navigation {
        justify-content: flex-start;
        overflow-x: auto;
    }

    .finance-date-navigation strong {
        min-width: 175px;
        white-space: nowrap;
    }

    .finance-summary {
        grid-template-columns: 1fr;
    }

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

    .finance-check-actions span {
        text-align: right;
    }

    #finance-check-all-bank {
        align-self: flex-end;

        min-height: 44px;
    }
}

/* =========================================================
   KHOẢN CHI TRONG NGÀY
   ========================================================= */

.finance-toolbar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* =========================================================
   BẢNG KHOẢN CHI
   ========================================================= */

.daily-expense-table th:last-child {
    width: 1%;
    min-width: 104px;
    padding-right: 10px;
    text-align: right;
    white-space: nowrap;
}

.daily-expense-table__actions {
    width: 1%;
    min-width: 104px;
    padding-right: 8px !important;
    text-align: right;
    white-space: nowrap;
}

.daily-expense-table__actions .button {
    min-width: 0;
    min-height: 28px;
    margin-left: 3px;
    padding: 4px 9px;
    border-radius: 5px;
    font-size: 0.78rem;
    line-height: 1.1;
}

/* =========================================================
   MODAL THÊM / SỬA KHOẢN CHI
   ========================================================= */

.expense-modal-dialog {
    width: min(480px, calc(100vw - 24px));
    border-radius: 8px;
    overflow: hidden;
}

.expense-modal-dialog .modal__header {
    padding: 14px 16px 11px;
}

.expense-modal-dialog .modal__eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
}

.expense-modal-dialog .modal__header h2 {
    margin-top: 3px;
    font-size: 1.15rem;
}

.expense-modal-dialog .modal__body {
    display: grid;
    gap: 12px;
    padding: 14px 16px;
}

/*
 * Hai trường đầu tách nhau rõ ràng.
 */
.expense-quick-fields {
    display: grid;
    grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1.4fr);
    gap: 10px;
}

.expense-modal-dialog .form-field {
    display: grid;
    gap: 5px;
    margin: 0;
}

.expense-modal-dialog .form-field > span,
.expense-modal-dialog legend {
    color: #363636;
    font-size: 0.82rem;
    font-weight: 700;
}

.expense-modal-dialog input[type="number"],
.expense-modal-dialog input[type="text"],
.expense-modal-dialog textarea {
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid #c9d2cf;
    border-radius: 6px;
    background: #fff;
    font: inherit;
}

.expense-modal-dialog input:focus,
.expense-modal-dialog textarea:focus {
    border-color: #86bcbd;
    outline: 2px solid rgb(134 188 189 / 22%);
    outline-offset: 0;
}

.expense-choice-group {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.expense-choice-group legend {
    margin-bottom: 6px;
}

.expense-category-grid,
.expense-payment-grid {
    display: grid;
    gap: 6px;
}

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

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

/*
 * Nút Khác chiếm hết dòng cuối,
 * tránh để một khoảng trống khó chịu bên phải.
 */
.expense-category-grid label:last-child {
    grid-column: 1 / -1;
}

.expense-category-grid label,
.expense-payment-grid label {
    display: block;
    cursor: pointer;
}

.expense-category-grid input,
.expense-payment-grid input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.expense-category-grid span,
.expense-payment-grid span {
    display: flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border: 1px solid #ccd5d2;
    border-radius: 6px;
    background: #f7f9f8;
    color: #333;
    font-size: 0.82rem;
    font-weight: 700;
    text-align: center;
}

.expense-category-grid input:checked + span {
    border-color: #a4ce8b;
    background: #e7f2df;
    color: #365c33;
}

.expense-payment-grid input:checked + span {
    border-color: #86bcbd;
    background: #dceff0;
    color: #285f61;
}

.expense-modal-dialog textarea {
    min-height: 58px;
    resize: vertical;
}

/*
 * Đóng và Lưu nằm sát bên phải.
 */
.expense-modal-dialog .modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 11px 16px 14px;
}

.expense-modal-dialog .modal__footer .button {
    min-height: 36px;
    padding: 7px 16px;
}

/* Modal xác nhận xoá cũng canh nút sang phải */
.expense-delete-dialog .modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Mobile vẫn giữ được thao tác */
@media (max-width: 520px) {
    .expense-modal-dialog {
        width: calc(100vw - 16px);
    }

    .expense-quick-fields {
        grid-template-columns: 0.8fr 1.2fr;
        gap: 8px;
    }

    .expense-modal-dialog .modal__body {
        padding: 12px;
    }

    .expense-modal-dialog .modal__footer {
        padding: 10px 12px 12px;
    }
}


/* =========================================================
   ADMIN LOGIN
   ========================================================= */

.auth-page {
    min-height: 100vh;
    margin: 0;
    background:
        linear-gradient(
            145deg,
            rgb(164 206 139 / 32%),
            rgb(134 188 189 / 18%)
        ),
        #f7f8f6;
}

.auth-container {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 20px;
}

.auth-card {
    width: min(400px, 100%);
    overflow: hidden;
    border: 1px solid #d6dfda;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 16px 45px rgb(50 70 60 / 12%);
}

.auth-card__header {
    padding: 22px 24px 18px;
    border-bottom: 1px solid #e2e7e4;
    background: #edf6e8;
}

.auth-card__header span {
    color: #ba5a5a;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.auth-card__header h1 {
    margin: 5px 0 3px;
    color: #333;
    font-size: 1.35rem;
}

.auth-card__header p {
    margin: 0;
    color: #68736c;
    font-size: 0.88rem;
}

.auth-form {
    display: grid;
    gap: 15px;
    padding: 22px 24px 24px;
}

.auth-field {
    display: grid;
    gap: 6px;
}

.auth-field span {
    color: #3f4943;
    font-size: 0.84rem;
    font-weight: 700;
}

.auth-field input {
    width: 100%;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid #cbd5cf;
    border-radius: 6px;
    background: #fff;
    color: #222;
    font: inherit;
}

.auth-field input:focus {
    border-color: #86bcbd;
    outline: 3px solid rgb(134 188 189 / 20%);
}

.auth-submit {
    width: 100%;
    min-height: 42px;
    margin-top: 2px;
}

.auth-message {
    margin: 16px 24px 0;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 0.86rem;
}

.auth-message--error {
    border: 1px solid rgb(186 90 90 / 35%);
    background: rgb(186 90 90 / 10%);
    color: #8c3e3e;
}





/* =========================================================
   TỔNG HỢP THU CHI CUỐI TRANG
   ========================================================= */

.finance-bottom-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.65fr)
        minmax(280px, 0.75fr);

    align-items: stretch;
    gap: 12px;

    margin-top: 32px;
}

/* Cột khoản chi */

.daily-expense-panel,
.daily-revenue-result {
    overflow: hidden;

    background: #fff;
    border: 1px solid #d8dfdb;
    border-radius: 9px;
}

.daily-expense-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 10px 12px;

    background: rgba(164, 206, 139, 0.34);
}

.daily-expense-panel__header h2,
.daily-revenue-result__header h2 {
    margin: 0 0 2px;
    font-size: 16px;
}

.daily-expense-panel__header span,
.daily-revenue-result__header span {
    color: #65716c;
    font-size: 12px;
}

.daily-expense-table-scroll {
    overflow-x: auto;
}

.daily-expense-table {
    width: 100%;
    min-width: 620px;

    border-spacing: 0;
    border-collapse: collapse;

    font-size: 12px;
}

.daily-expense-table th {
    padding: 7px 8px;

    background: #F7E49B;
    border-right: 1px solid rgba(108, 87, 20, 0.15);

    text-align: left;
    white-space: nowrap;
}

.daily-expense-table th:first-child,
.daily-expense-table td:first-child {
    width: 48px;
    text-align: center;
}

.daily-expense-table th:last-child,
.daily-expense-table td:last-child {
    text-align: right;
}

.daily-expense-table td {
    padding: 7px 8px;

    border-top: 1px solid #d8dfdb;
}

.daily-expense-table td strong {
    display: block;
}

.daily-expense-table td small {
    display: block;
    margin-top: 2px;

    color: #65716c;
}

.daily-expense-table__center {
    text-align: center;
}

.daily-expense-table__money {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.daily-expense-table__empty {
    padding: 22px !important;

    color: #65716c;
    text-align: center !important;
}

.daily-expense-table tfoot td {
    background: #f5e8b8;
    border-top: 2px solid #c2a33b;

    font-weight: 800;
}

/* Cột tổng doanh thu */

.daily-revenue-result {
    display: flex;
    flex-direction: column;
}

.daily-revenue-result__header {
    padding: 10px 12px;

    background: rgba(134, 188, 189, 0.28);
}

.daily-revenue-result__body {
    flex: 1;
}

.daily-revenue-result__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 11px 12px;

    border-top: 1px solid #d8dfdb;
}

.daily-revenue-result__row span {
    color: #65716c;
    font-size: 12px;
}

.daily-revenue-result__row strong {
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.daily-revenue-result__row .is-income {
    color: #287248;
}

.daily-revenue-result__row .is-expense {
    color: #BA5A5A;
}

/*
 * Kết quả quan trọng nhất được canh phải
 * theo yêu cầu để dễ đọc cùng các con số phía trên.
 */
.daily-revenue-result__total {
    display: grid;
    justify-items: end;
    gap: 2px;

    padding: 12px;

    background: rgba(164, 206, 139, 0.3);
    border-top: 1px solid #9fc48a;

    text-align: right;
}

.daily-revenue-result__total span {
    color: #506259;
    font-size: 12px;
}

.daily-revenue-result__total strong {
    color: #287248;
    font-size: 24px;
    font-variant-numeric: tabular-nums;
}

.daily-revenue-result__total strong.is-negative {
    color: #BA5A5A;
}

.daily-revenue-result__total small {
    color: #65716c;
    font-size: 11px;
}

/* Mobile: chuyển thành hai khối xếp dọc */

@media (max-width: 760px) {
    .finance-bottom-grid {
        grid-template-columns: 1fr;
        margin-top: 24px;
    }

    .daily-expense-panel__header {
        align-items: flex-start;
    }

    .daily-expense-panel__header .button {
        min-height: 44px;
        white-space: nowrap;
    }

    .daily-revenue-result__total {
        min-height: 90px;
    }
}


.finance-customer-button {
    appearance: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: #3f7855;
    font: inherit;
    font-weight: 700;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.finance-customer-button:hover {
    color: #ba5a5a;
}

.finance-customer-button:focus-visible {
    outline: 2px solid #86bcbd;
    outline-offset: 3px;
    border-radius: 3px;
}



.expense-delete-dialog {
    width: min(420px, calc(100vw - 24px));
}

.expense-delete-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px;
    border: 1px solid #eadb9d;
    border-radius: 6px;
    background: #fff8d8;
}

.expense-delete-summary strong {
    color: #333;
}

.expense-delete-summary span {
    color: #ba5a5a;
    font-weight: 800;
    white-space: nowrap;
}

.expense-delete-warning {
    margin-bottom: 0;
    color: #7a7070;
    font-size: 0.88rem;
}


/* Tài khoản đang đăng nhập trên thanh điều hướng */
.app-user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 12px;
    border-left: 1px solid rgba(0, 0, 0, 0.12);
}

.app-user__name {
    max-width: 160px;
    overflow: hidden;
    color: #263238;
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-user form {
    margin: 0;
}

.app-user__logout {
    min-height: 36px;
    padding: 7px 12px;
}

/* Mobile vẫn thao tác được, không để header tràn ngang */
@media (max-width: 720px) {
    .app-user {
        padding-left: 6px;
        border-left: 0;
    }

    .app-user__name {
        display: none;
    }

    .app-user__logout {
        padding-inline: 9px;
    }
}