body {
    font-family: 'Maven Pro', sans-serif;
}

.logo {
    text-align: center;
    margin-bottom: 20px;
    background-color: white;
    padding: 1.2em;
    border-bottom: 2px solid #00A670;
}

.logo img {
    max-width: 150px;
}

.app-header {
    display: block;
    margin-bottom: 12px;
    padding: 0.65rem 0;
    text-align: left;
}

.app-header__inner {
    align-items: center;
    display: flex;
    gap: 0.9rem;
    justify-content: flex-start;
    position: relative;
}

.app-header img {
    flex: 0 0 auto;
    max-width: 104px;
}

.app-header__title {
    color: #40036e;
    flex: 1 1 auto;
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.title {
    font-size: 24px;
    text-align: start;
    font-weight: bold;
    margin-bottom: 20px;
    color: white;
    border-radius: 5px;
}

.booking-date {
    font-size: 1.25rem;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
    color: white;
}

.admin-menu {
    flex: 0 0 auto;
    margin-left: auto;
    position: relative;
}

.admin-menu__button {
    align-items: center;
    background: #f8f5fb;
    border: 1px solid #d9cfe3;
    border-radius: 0.5rem;
    cursor: pointer;
    display: inline-flex;
    height: 42px;
    justify-content: center;
    list-style: none;
    transition: all 0.2s ease;
    width: 42px;
}

.admin-menu__button::-webkit-details-marker {
    display: none;
}

.admin-menu__button::marker {
    content: "";
}

.admin-menu__button:hover,
.admin-menu__button:focus {
    background: #efe6f5;
    border-color: #cdb9dd;
}

.admin-menu[open] .admin-menu__button {
    background: #40036e;
    border-color: #40036e;
}

.admin-menu__icon {
    display: grid;
    gap: 4px;
}

.admin-menu__icon span {
    background: #40036e;
    border-radius: 999px;
    display: block;
    height: 2px;
    width: 18px;
}

.admin-menu[open] .admin-menu__icon span {
    background: #fff;
}

.admin-tabs {
    background: #fff;
    border: 1px solid #e3d9ec;
    border-radius: 0.5rem;
    box-shadow: 0 14px 32px rgba(31, 15, 44, 0.18);
    display: grid;
    gap: 0.25rem;
    min-width: 230px;
    padding: 0.35rem;
    position: absolute;
    right: 0;
    top: calc(100% + 0.45rem);
    z-index: 30;
}

.admin-tab {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 40px;
    color: #3e234f;
    font-size: 0.94rem;
    font-weight: 700;
    padding: 0.65rem 0.75rem;
    border: 0;
    background: transparent;
    border-radius: 0.35rem;
    text-align: left;
    text-decoration: none;
    transition: all 0.2s ease;
}

.admin-tab:hover,
.admin-tab:focus {
    color: #3e234f;
    background: #f5f0f8;
    text-decoration: none;
}

.admin-tab.active {
    background: #40036e;
    color: #fff;
    box-shadow: none;
}

.card {
    margin-bottom: 10px;
    min-height: 7em;
}

.card-body {
    display: flex;
    align-items: center;
    padding: 1rem;
}

.card-time {
    font-size: 1.25rem;
    font-weight: bold;
    margin-right: 20px;
    border-right: 2px solid black;
    padding-right: 20px;
}

.card-details {
    flex-grow: 1;
}

.card-details .name {
    font-size: 1rem;
    font-weight: bold;
}

.card-details .service {
    color: #555;
}

.centered-message-title {
    color: white;
    font-size: 2.5rem;
    font-weight: bold;
}

.agenda-flash {
    border-radius: 0.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 1rem;
    padding: 0.8rem 1rem;
}

.agenda-flash--notice {
    background: #d1e7dd;
    border: 1px solid #a3cfbb;
    color: #0f5132;
}

.agenda-flash--alert {
    background: #f8d7da;
    border: 1px solid #f1aeb5;
    color: #842029;
}

/* ========== Daily availability ========== */

.booking-date--with-status {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.booking-date__label {
    flex: 0 0 auto;
}

.agenda-open-status {
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 0.5rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    font-size: 0.82rem;
    font-weight: 800;
    gap: 0.2rem;
    line-height: 1.2;
    max-width: 100%;
    padding: 0.45rem 0.7rem;
}

.agenda-open-status__row {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.agenda-open-status__label {
    color: #b8f3dc;
    text-transform: uppercase;
}

.agenda-open-status__label--secondary {
    color: #d7c6e6;
}

.agenda-open-status__time {
    color: #fff;
}

.agenda-open-status__time--secondary {
    color: #f1eaf7;
    font-weight: 700;
}

.block-card {
    background: #fffafa;
    border-left: 4px solid #dc3545;
}

.block-card__time {
    color: #8d1f1f;
    border-right-color: #dc3545;
    display: flex;
    flex-direction: column;
    font-size: 1.05rem;
    line-height: 1.15;
    min-width: 78px;
}

.block-card__title {
    color: #7b1d1d;
}

.block-card__badge {
    background: #fff1f1;
    border: 1px solid #f5bbbb;
    border-radius: 999px;
    color: #8d1f1f;
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    margin-left: 0.35rem;
    padding: 0.15rem 0.5rem;
    vertical-align: middle;
}

.block-card__details {
    color: #6d3939;
    font-weight: 600;
}

.block-card__actions {
    flex: 0 0 auto;
    margin-left: 1rem;
}

.block-card__release-form {
    margin: 0;
}

.remove-block-btn {
    background-color: #fff;
    border: 1px solid #00A670;
    color: #087f5b;
    font-size: 0.95rem;
    font-weight: 800;
    min-width: 145px;
    padding: 0.65rem 0.9rem;
    white-space: nowrap;
}

.remove-block-btn:hover,
.remove-block-btn:focus {
    background-color: #00A670;
    border-color: #00A670;
    color: #fff;
}

/* ========== Strike management (Phase 4 — Barbeariavila first) ========== */

.booking-card--flagged {
    opacity: 0.7;
    border-left: 4px solid #ffc107;
}

.strike-badge {
    display: inline-block;
    background: #ffc107;
    color: #3a2200;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
}

.strike-badge--hot {
    background: #dc3545;
    color: #fff;
}

.birthday-discount-badge {
    background: #e8f7f1;
    border: 1px solid #98d9bf;
    border-radius: 8px;
    color: #075f44;
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    margin-left: 6px;
    padding: 2px 8px;
    vertical-align: middle;
}

.strike-flag {
    display: inline-block;
    font-size: 0.72rem;
    padding: 2px 7px;
    border-radius: 8px;
    margin-left: 6px;
    vertical-align: middle;
}

.strike-flag--ok   { background: #d1e7dd; color: #0f5132; }
.strike-flag--late { background: #fff3cd; color: #664d03; }
.strike-flag--miss { background: #f8d7da; color: #842029; }

.register-event-btn,
.unpause-btn {
    background-color: #fff;
    border: 1px solid #40036e;
    color: #40036e;
    font-size: 1rem;
    font-weight: 700;
    min-width: 170px;
    padding: 0.7rem 1rem;
    margin-left: 1rem;
    white-space: nowrap;
}

.register-event-btn:hover,
.register-event-btn:focus,
.unpause-btn:hover,
.unpause-btn:focus {
    background-color: #40036e;
    color: #fff;
    border-color: #40036e;
}

.paused-customer-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    width: 100%;
    gap: 1rem;
}

.paused-customer-card .card-body {
    display: block;
}

.paused-customer-details {
    flex: 1 1 auto;
}

.paused-customer-details a {
    color: #40036e;
    font-weight: 700;
    text-decoration: underline;
}

.paused-customer-actions {
    display: flex;
    justify-content: flex-end;
    flex: 0 0 auto;
    margin-left: auto;
}

.paused-customer-actions .unpause-btn {
    margin-left: 0;
}

/* ========== Financial reports ========== */

.finance-page {
    padding-bottom: 2rem;
}

.finance-alert {
    background: #fff3cd;
    border: 1px solid #ffda6a;
    border-radius: 0.5rem;
    color: #664d03;
    font-weight: 700;
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
}

.finance-section {
    margin: 2rem 0 2.4rem;
}

.finance-section--primary {
    margin-top: 1rem;
}

.finance-section__header {
    align-items: baseline;
    color: #fff;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.finance-section__header h2 {
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0;
}

.finance-section__header span {
    color: #d9f4ea;
    font-weight: 700;
}

.period-toolbar {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0 0 1rem;
    padding: 0.5rem;
}

.period-pill {
    border-radius: 0.4rem;
    color: #fff;
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1;
    min-height: 38px;
    padding: 0.72rem 0.85rem;
    text-decoration: none;
}

.period-pill:hover,
.period-pill:focus {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.period-pill.active {
    background: #fff;
    color: #40036e;
}

.custom-period-form {
    align-items: end;
    background: #fff;
    border-radius: 0.5rem;
    display: grid;
    gap: 0.75rem;
    margin: 0 0 1rem;
    padding: 1rem;
}

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

.custom-period-form label {
    color: #4a235f;
    font-size: 0.76rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
}

.custom-period-form__action {
    align-self: end;
}

.finance-explainer {
    color: #f4edf9;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.45;
    margin: -0.3rem 0 1rem;
    max-width: 780px;
}

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

.finance-kpi {
    background: #fff;
    border-radius: 0.5rem;
    min-height: 92px;
    padding: 0.9rem;
}

.finance-kpi span {
    color: #5f4c6d;
    display: block;
    font-size: 0.78rem;
    font-weight: 800;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
}

.finance-kpi strong {
    color: #25102e;
    display: block;
    font-size: 1.35rem;
    line-height: 1.2;
}

.finance-table-wrap {
    background: #fff;
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    overflow-x: auto;
}

.finance-table {
    border-collapse: collapse;
    color: #24122f;
    font-size: 0.94rem;
    min-width: 720px;
    width: 100%;
}

.finance-table th,
.finance-table td {
    border-bottom: 1px solid #ece5f2;
    padding: 0.75rem;
    text-align: left;
    vertical-align: top;
}

.finance-table th {
    background: #f5f0f8;
    color: #4a235f;
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
}

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

.finance-muted {
    color: #695777;
    display: block;
    font-size: 0.82rem;
}

.finance-empty {
    background: #fff;
    border-radius: 0.5rem;
    color: #4a235f;
    font-weight: 700;
    margin-bottom: 0.75rem;
    padding: 1rem;
}

.finance-closed-list {
    display: grid;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}

.finance-closed-item {
    background: #e9f8f2;
    border: 1px solid #b8e6d3;
    border-radius: 0.5rem;
    color: #0f5132;
    display: grid;
    gap: 0.2rem;
    padding: 0.85rem 1rem;
}

.commission-form {
    background: #fff;
    border-radius: 0.5rem;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 0.85rem;
    padding: 1rem;
}

.commission-form label {
    color: #4a235f;
    font-size: 0.76rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
}

.commission-form__action {
    align-self: end;
}

.finance-btn {
    background-color: #fff;
    border: 1px solid #00A670;
    color: #087f5b;
    font-weight: 800;
    min-width: 108px;
    white-space: nowrap;
}

.finance-btn:hover,
.finance-btn:focus,
.finance-btn--primary {
    background-color: #00A670;
    border-color: #00A670;
    color: #fff;
}

.finance-btn--primary:hover,
.finance-btn--primary:focus {
    background-color: #087f5b;
    border-color: #087f5b;
    color: #fff;
}

.finance-link-btn {
    background: transparent;
    border: 0;
    color: #842029;
    font-weight: 800;
    padding: 0;
}

.monthly-history {
    display: grid;
    gap: 0.6rem;
}

.monthly-history__row {
    background: #fff;
    border-radius: 0.5rem;
    overflow: hidden;
}

.monthly-history__row summary {
    align-items: center;
    color: #25102e;
    cursor: pointer;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(160px, 1.2fr) minmax(120px, 0.8fr) minmax(110px, 0.6fr) 24px;
    list-style: none;
    padding: 0.9rem 1rem;
}

.monthly-history__row summary::-webkit-details-marker {
    display: none;
}

.monthly-history__row summary::after {
    color: #40036e;
    content: "+";
    font-size: 1.2rem;
    font-weight: 900;
    text-align: right;
}

.monthly-history__row[open] summary::after {
    content: "-";
}

.monthly-history__month {
    font-weight: 900;
}

.monthly-history__metric span {
    color: #6b5a78;
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.monthly-history__metric strong {
    color: #25102e;
    display: block;
    font-size: 1rem;
    line-height: 1.2;
}

.monthly-history__details {
    border-top: 1px solid #ece5f2;
    padding: 0.75rem;
}

.monthly-history__details .finance-table-wrap {
    margin-bottom: 0;
}

.ledger-details {
    margin-top: 1rem;
}

.ledger-details summary {
    align-items: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0.5rem;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-weight: 800;
    gap: 0.55rem;
    justify-content: space-between;
    list-style: none;
    padding: 0.85rem 1rem;
}

.ledger-details summary::-webkit-details-marker {
    display: none;
}

.ledger-details summary::after {
    content: "+";
    font-size: 1.1rem;
    line-height: 1;
}

.ledger-details[open] summary {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.ledger-details[open] summary::after {
    content: "-";
}

.ledger-details summary strong {
    background: #fff;
    border-radius: 999px;
    color: #40036e;
    min-width: 36px;
    padding: 0.25rem 0.55rem;
    text-align: center;
}

.ledger-details .finance-table-wrap {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* On small screens the button drops below the details block to keep the
   card readable without horizontal scrolling. */
@media (max-width: 576px) {
    .app-header__inner {
        gap: 0.65rem;
    }

    .app-header img {
        max-width: 94px;
    }

    .app-header__title {
        font-size: 0.98rem;
    }

    .admin-tab {
        font-size: 0.94rem;
    }

    .admin-tabs {
        min-width: min(250px, calc(100vw - 2rem));
    }

    .card-body {
        flex-wrap: wrap;
    }

    .booking-date--with-status {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.4rem;
    }

    .agenda-open-status {
        align-items: flex-start;
        border-radius: 0.5rem;
        flex-direction: column;
        gap: 0.15rem;
        width: 100%;
    }

    .register-event-btn,
    .unpause-btn {
        margin-left: 0;
        min-width: 0;
    }

    .block-card__actions {
        display: flex;
        justify-content: flex-start;
        margin-left: 0;
        width: 100%;
    }

    .remove-block-btn {
        min-width: 0;
    }

    .paused-customer-row {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .paused-customer-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .finance-kpis,
    .commission-form,
    .custom-period-form {
        grid-template-columns: 1fr;
    }

    .finance-section__header {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.25rem;
    }

    .finance-kpi {
        min-height: 76px;
    }

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

    .period-pill {
        text-align: center;
    }

    .monthly-history__row summary {
        grid-template-columns: 1fr 1fr 32px;
    }

    .monthly-history__month {
        grid-column: 1 / -1;
    }
}