.app-modal,
.app-modal-page {
    --modal-accent: #6f8f72;
    --modal-accent-strong: #5f7f63;
    --modal-accent-soft: #edf5ee;
    --modal-surface: #fcfcf8;
    --modal-shell: linear-gradient(180deg, #f6f4ef 0%, #fbfbf7 100%);
    --modal-border: #dce6dc;
    --modal-border-strong: rgba(169, 185, 170, 0.45);
    --modal-shadow: 0 18px 40px rgba(45, 67, 50, 0.12);
    --modal-shadow-soft: 0 8px 24px rgba(63, 80, 67, 0.06);
    --modal-text: #223127;
    --modal-muted: #66756a;
    --modal-danger: #b55252;
}

.app-modal .app-modal-dialog {
    width: min(100% - 1rem, 680px);
    margin: 0.5rem auto;
}

.app-modal .app-modal-content,
.app-modal-page .app-modal-panel {
    background: var(--modal-shell);
    border: 1px solid var(--modal-border-strong);
    border-radius: 28px;
    box-shadow: var(--modal-shadow);
    overflow: hidden;
}

.app-modal .app-modal-header,
.app-modal-page .app-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid rgba(169, 185, 170, 0.35);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(8px);
}

.app-modal .app-modal-kicker,
.app-modal-page .app-modal-kicker {
    margin-bottom: 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--modal-accent);
}

.app-modal .app-modal-title,
.app-modal-page .app-modal-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--modal-text);
}

#bookingWizardModal .booking-wizard-title-accent {
    color: var(--modal-accent);
}

#bookingWizardModal .booking-card-head {
    margin-bottom: 1rem;
}

#bookingWizardModal .booking-card-head h6 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--modal-text);
}

.app-modal .app-modal-body,
.app-modal-page .app-modal-body {
    padding: 1rem;
}

.app-modal .app-modal-footer,
.app-modal-page .app-modal-footer {
    display: grid;
    gap: 0.65rem;
    padding: 1rem;
    border-top: 1px solid rgba(169, 185, 170, 0.35);
    background: rgba(252, 252, 248, 0.96);
    backdrop-filter: blur(10px);
}

.app-modal-section,
.app-modal-field,
.app-modal-details {
    padding: 1rem;
    border: 1px solid var(--modal-border);
    border-radius: 24px;
    background: var(--modal-surface);
    box-shadow: var(--modal-shadow-soft);
}

.app-modal-section + .app-modal-section,
.app-modal-details + .app-modal-section,
.app-modal-page .alert + .app-modal-panel,
.app-modal-page .app-modal-panel + .app-modal-panel {
    margin-top: 1rem;
}

.app-modal-section-title {
    margin: 0 0 0.9rem;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--modal-text);
}

.app-modal-grid {
    display: grid;
    gap: 0.85rem;
}

.app-modal-page {
    max-width: 820px;
    margin: 0 auto;
}

.app-modal-page.app-modal-page-wide {
    max-width: 1040px;
}

.app-modal-page .app-modal-panel {
    width: 100%;
}

.app-modal-page .app-modal-body > :last-child,
.app-modal .app-modal-body > :last-child,
.app-modal-section > :last-child,
.app-modal-field > :last-child,
.app-modal-details > :last-child {
    margin-bottom: 0;
}

.app-modal .form-label,
.app-modal-page .form-label {
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--modal-text);
}

.app-modal .form-control,
.app-modal .form-select,
.app-modal-page .form-control,
.app-modal-page .form-select {
    min-height: 3.2rem;
    border: 1px solid #d8e2d8;
    border-radius: 18px;
    background: #f8faf7;
    box-shadow: none;
}

.app-modal .form-control:focus,
.app-modal .form-select:focus,
.app-modal-page .form-control:focus,
.app-modal-page .form-select:focus {
    border-color: #9cb39f;
    box-shadow: 0 0 0 0.2rem rgba(111, 143, 114, 0.16);
    background: #fff;
}

.app-modal textarea.form-control,
.app-modal-page textarea.form-control {
    min-height: 8rem;
    padding-top: 0.85rem;
}

.app-modal .form-check-input,
.app-modal-page .form-check-input {
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 0.35rem;
    border-color: #b8c8ba;
}

.app-modal .form-check-input:checked,
.app-modal-page .form-check-input:checked {
    background-color: var(--modal-accent);
    border-color: var(--modal-accent);
}

.app-modal-close {
    padding: 0.6rem;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.82);
    box-shadow: inset 0 0 0 1px rgba(169, 185, 170, 0.28);
    opacity: 1;
}

.app-modal-close:focus {
    box-shadow: 0 0 0 0.2rem rgba(111, 143, 114, 0.16);
}

.app-modal-btn {
    min-height: 3.2rem;
    padding: 0.8rem 1.2rem;
    border-radius: 18px;
    font-weight: 700;
}

.app-modal-btn-secondary {
    border: 1px solid #d4ddd4;
    background: #fff;
    color: var(--modal-text);
}

.app-modal-btn-primary {
    border: none;
    background: var(--modal-accent);
    color: #fff;
    box-shadow: 0 14px 24px rgba(84, 120, 89, 0.24);
}

.app-modal-btn-primary:hover,
.app-modal-btn-primary:focus {
    background: var(--modal-accent-strong);
    color: #fff;
}

.app-modal-btn-danger {
    border: none;
    background: var(--modal-danger);
    color: #fff;
    box-shadow: 0 14px 24px rgba(181, 82, 82, 0.2);
}

.app-modal-meta,
.app-modal-note {
    color: var(--modal-muted);
}

.app-modal-note {
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 18px;
    background: #f1f5ef;
    font-size: 0.95rem;
}

.app-modal-details dl,
.app-modal-details ul {
    margin: 0;
}

.app-modal-details dt {
    color: var(--modal-muted);
    font-weight: 600;
}

.app-modal-details dd {
    color: var(--modal-text);
}

.app-modal-list {
    padding-left: 1.1rem;
}

.app-modal-actions {
    display: grid;
    gap: 0.65rem;
}

.app-calendar-block-form {
    display: flex;
    flex-direction: column;
}

.app-calendar-block-grid {
    align-items: start;
}

.app-calendar-toggle-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.app-calendar-all-employees-toggle {
    min-width: 8.5rem;
}

.btn-check:checked + .app-calendar-all-employees-toggle {
    border-color: transparent;
    background: var(--modal-accent);
    color: #fff;
    box-shadow: 0 14px 24px rgba(84, 120, 89, 0.2);
}

.app-calendar-toggle-note {
    margin-top: 0.75rem;
    margin-bottom: 0;
}

.app-calendar-form-errors {
    margin-bottom: 1rem;
    border-radius: 18px;
}

.app-modal-table-wrap {
    padding: 0.25rem;
    border: 1px solid var(--modal-border);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.72);
}

.app-modal-page .table {
    margin-bottom: 0;
}

.app-modal-page .table > :not(caption) > * > * {
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
    vertical-align: middle;
}

.trainer-action-dialog {
    max-width: 760px;
}

.trainer-action-dialog.trainer-action-dialog-wide {
    max-width: 980px;
}

.trainer-action-modal-body {
    padding: 0;
    background: rgba(252, 252, 248, 0.96);
}

.trainer-action-frame {
    display: block;
    width: 100%;
    min-height: 72vh;
    border: 0;
    background: transparent;
}

.lesson-action-dialog {
    max-width: 760px;
}

.reservation-action-dialog {
    max-width: 980px;
}

.booking-detail-dialog {
    max-width: 920px;
}

.customer-action-dialog {
    max-width: 1120px;
}

.lesson-action-modal-body {
    padding: 0;
    background: rgba(252, 252, 248, 0.96);
}

.reservation-action-modal-body {
    padding: 0;
    background: rgba(252, 252, 248, 0.96);
}

.customer-action-modal-body {
    padding: 0;
    background: rgba(252, 252, 248, 0.96);
}

.lesson-action-frame {
    display: block;
    width: 100%;
    min-height: 72vh;
    border: 0;
    background: transparent;
}

.reservation-action-frame {
    display: block;
    width: 100%;
    min-height: 78vh;
    border: 0;
    background: transparent;
}

.customer-action-frame {
    display: block;
    width: 100%;
    min-height: 82vh;
    border: 0;
    background: transparent;
}

.app-reservation-modal-summary {
    display: grid;
    gap: 1rem;
}

.app-reservation-modal-summary-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.app-reservation-modal-id {
    font-family: "Consolas", "Courier New", monospace;
    font-size: 1rem;
    font-weight: 700;
    color: var(--modal-text);
}

.app-customer-detail-actions {
    align-items: stretch;
}

.customer-detail-body {
    display: grid;
}

.app-customer-detail-summary {
    display: grid;
    gap: 1rem;
}

.app-customer-detail-stats {
    display: grid;
    gap: 0.85rem;
}

.app-customer-detail-stat {
    padding: 0.95rem 1rem;
    border: 1px solid rgba(169, 185, 170, 0.24);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.72);
}

.app-customer-detail-stat .app-stat-label,
.app-customer-detail-stat .app-stat-value,
.app-customer-detail-stat-date {
    margin: 0;
}

.app-customer-detail-stat-date {
    display: block;
    margin-top: 0.35rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--modal-text);
}

.app-customer-course-list {
    display: grid;
    gap: 0.85rem;
}

.app-customer-course-card {
    padding: 0.95rem 1rem;
    border: 1px solid rgba(169, 185, 170, 0.24);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.76);
}

.app-customer-course-name {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--modal-text);
}

.app-customer-course-meta {
    margin: 0.35rem 0 0;
    color: var(--modal-muted);
}

.app-customer-detail-reservations-table td:nth-child(1),
.app-customer-detail-reservations-table td:nth-child(2),
.app-customer-detail-reservations-table td:nth-child(3),
.app-customer-detail-reservations-table td:nth-child(4),
.app-customer-detail-reservations-table td:nth-child(6) {
    white-space: nowrap;
}

.booking-detail-layout {
    display: grid;
    gap: 1rem;
}

.booking-detail-summary {
    display: grid;
    gap: 1rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 246, 0.96)),
        radial-gradient(circle at top right, rgba(111, 143, 114, 0.08), transparent 36%);
}

.booking-detail-summary-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.booking-detail-summary-kicker {
    color: var(--modal-accent);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.booking-detail-summary-title {
    margin: 0.35rem 0 0;
    font-size: 1.2rem;
    font-weight: 750;
    color: var(--modal-text);
}

.booking-detail-summary-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.4rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: rgba(241, 245, 239, 0.98);
    color: var(--modal-text);
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
}

.booking-detail-meta-grid {
    display: grid;
    gap: 0.85rem;
}

.booking-detail-meta-card {
    display: grid;
    gap: 0.25rem;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(169, 185, 170, 0.24);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.82);
}

.booking-detail-meta-label {
    color: var(--modal-muted);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.booking-detail-meta-value {
    color: var(--modal-text);
    font-size: 0.98rem;
    font-weight: 700;
}

.booking-detail-columns {
    display: grid;
    gap: 1rem;
}

.booking-detail-section {
    display: grid;
    gap: 0.85rem;
}

.booking-detail-list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
}

.booking-detail-row {
    display: grid;
    gap: 0.2rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(169, 185, 170, 0.22);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
}

.booking-detail-row dt {
    margin: 0;
    color: var(--modal-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.booking-detail-row dd {
    margin: 0;
    color: var(--modal-text);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.booking-detail-notes-section {
    align-content: start;
}

.booking-detail-note {
    min-height: 100%;
    padding: 1rem;
    border: 1px solid rgba(169, 185, 170, 0.22);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--modal-text);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.modal-layout-body {
    min-height: 100vh;
    margin: 0;
    background: radial-gradient(circle at top left, rgba(111, 143, 114, 0.08), transparent 34%), linear-gradient(180deg, #f6f4ef 0%, #fbfbf7 100%);
}

.modal-layout-main {
    min-height: 100vh;
    padding: 0.75rem;
}

#bookingWizardModal .booking-wizard-dialog {
    max-width: 760px;
    height: calc(100dvh - 1rem);
    margin: 0.5rem auto;
}

#bookingWizardModal .btn-close {
    padding: 0.6rem;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.82);
    box-shadow: inset 0 0 0 1px rgba(169, 185, 170, 0.28);
    opacity: 1;
}

#bookingWizardModal .booking-wizard-modal {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: none;
    min-height: 0;
    overflow: hidden;
}

#bookingWizardModal .booking-wizard-header {
    flex: 0 0 auto;
    align-items: flex-start;
}

#bookingWizardModal .booking-wizard-form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

#bookingWizardModal .booking-wizard-body {
    display: grid;
    flex: 1 1 auto;
    gap: 1.15rem;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    padding: 1.35rem 1.35rem 1.4rem;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

#bookingWizardModal .booking-wizard-body::-webkit-scrollbar {
    width: 12px;
}

#bookingWizardModal .booking-wizard-body::-webkit-scrollbar-track {
    margin: 0.35rem 0;
    border-radius: 999px;
    background: rgba(220, 230, 220, 0.72);
}

#bookingWizardModal .booking-wizard-body::-webkit-scrollbar-thumb {
    border: 3px solid rgba(220, 230, 220, 0.72);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(111, 143, 114, 0.92), rgba(95, 127, 99, 0.98));
}

#bookingWizardModal .booking-wizard-body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(101, 133, 104, 0.96), rgba(86, 117, 90, 1));
}

#bookingWizardModal .booking-wizard-body {
    scrollbar-width: thin;
    scrollbar-color: rgba(111, 143, 114, 0.95) rgba(220, 230, 220, 0.72);
}

#bookingWizardModal .booking-flow-section {
    scroll-margin-top: 1rem;
}

#bookingWizardModal .booking-card {
    padding: 1.1rem;
    border: 1px solid var(--modal-border);
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 251, 247, 0.98)),
        radial-gradient(circle at top right, rgba(111, 143, 114, 0.08), transparent 36%);
    box-shadow: 0 14px 28px rgba(63, 80, 67, 0.08);
}

#bookingWizardModal .booking-choice-grid,
#bookingWizardModal .booking-field-stack {
    display: grid;
    gap: 0.85rem;
}

#bookingWizardModal .booking-step-badge {
    display: none;
}

#bookingWizardModal .booking-required-note {
    margin-top: 0.3rem;
    color: var(--modal-muted);
    font-size: 0.85rem;
}

#bookingWizardModal .booking-required-note span {
    color: #b55252;
    font-weight: 700;
}

#bookingWizardModal .booking-required-note span[aria-hidden="true"],
#bookingWizardModal .form-label span[aria-hidden="true"] {
    color: #c94e4e;
}

#bookingWizardModal .booking-minor-document-text {
    color: #b84242;
}

#bookingWizardModal .lesson-picker-note,
#bookingWizardModal .lesson-selected-value {
    display: none;
}

#bookingWizardModal .booking-choice-card,
#bookingWizardModal .booking-field-card {
    width: 100%;
    border: 1px solid var(--modal-border);
    border-radius: 22px;
    background: #fff;
}

#bookingWizardModal .booking-choice-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.95rem 1rem;
    border-width: 1px;
    appearance: none;
    text-align: left;
    font: inherit;
    color: inherit;
    box-shadow: 0 6px 20px rgba(74, 91, 74, 0.06);
    transition: all 0.2s ease;
    cursor: pointer;
}

#bookingWizardModal .booking-choice-card.is-selected {
    border-color: var(--modal-accent);
    background: var(--modal-accent-soft);
    box-shadow: 0 10px 24px rgba(82, 118, 88, 0.16);
}

#bookingWizardModal .booking-choice-card:hover,
#bookingWizardModal .booking-choice-card:focus-visible {
    border-color: #b8cab9;
    box-shadow: 0 10px 24px rgba(82, 118, 88, 0.12);
    outline: none;
}

#bookingWizardModal .booking-choice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: #f1f3ed;
    color: var(--modal-accent);
    font-weight: 700;
}

#bookingWizardModal .booking-choice-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

#bookingWizardModal .booking-choice-title {
    color: var(--modal-text);
    font-weight: 700;
}

#bookingWizardModal .booking-choice-meta {
    margin-top: 0.2rem;
    color: var(--modal-muted);
    font-size: 0.92rem;
}

#bookingWizardModal .booking-choice-check {
    width: 22px;
    height: 22px;
    border: 2px solid #c8d5c9;
    border-radius: 999px;
    background: #fff;
}

#bookingWizardModal .booking-choice-card.is-selected .booking-choice-check {
    border-color: var(--modal-accent);
    background: radial-gradient(circle at center, var(--modal-accent) 0 45%, transparent 46%);
}

#bookingWizardModal .booking-field-card {
    padding: 0.95rem 1rem;
    box-shadow: 0 6px 20px rgba(74, 91, 74, 0.05);
}

#bookingWizardModal .booking-field-card .text-danger,
#bookingWizardModal .booking-card .text-danger {
    display: block;
    margin-top: 0.55rem;
}

#bookingWizardModal .booking-select,
#bookingWizardModal .booking-input {
    min-height: 3.35rem;
}

#bookingWizardModal .booking-hint {
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 18px;
    background: #f1f5ef;
    color: var(--modal-muted);
    font-size: 0.95rem;
}

#bookingWizardModal .booking-hint-compact {
    margin-top: -0.15rem;
}

.booking-confirm-card,
#bookingWizardModal .booking-confirm-card {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(169, 185, 170, 0.28);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(244, 248, 242, 0.96), rgba(255, 255, 255, 0.98));
}

.booking-confirm-card-warning,
#bookingWizardModal .booking-confirm-card-warning {
    border-color: rgba(192, 159, 67, 0.42);
    background: linear-gradient(180deg, rgba(255, 248, 223, 0.98), rgba(255, 253, 245, 0.98));
    box-shadow: 0 8px 22px rgba(192, 159, 67, 0.10);
    padding: 0.85rem 0.95rem;
}

#bookingWizardModal .booking-confirm-copy {
    color: var(--modal-muted);
}

#bookingWizardModal .booking-confirm-submit {
    width: 100%;
}

#bookingWizardModal .time-slot-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

#bookingWizardModal .time-slot-button {
    display: grid;
    gap: 0.15rem;
    justify-items: center;
    min-height: 3rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--modal-border);
    border-radius: 16px;
    background: #fff;
    appearance: none;
    font: inherit;
    font-weight: 600;
    color: var(--modal-text);
    box-shadow: 0 6px 18px rgba(74, 91, 74, 0.05);
    transition: all 0.2s ease;
    cursor: pointer;
}

#bookingWizardModal .time-slot-button:hover,
#bookingWizardModal .time-slot-button:focus-visible {
    border-color: #b8cab9;
    box-shadow: 0 10px 20px rgba(82, 118, 88, 0.12);
    outline: none;
}

#bookingWizardModal .time-slot-button.is-selected {
    border-color: var(--modal-accent);
    background: var(--modal-accent);
    color: #fff;
    box-shadow: 0 10px 18px rgba(84, 120, 89, 0.22);
}

#bookingWizardModal .time-slot-placeholder {
    grid-column: 1 / -1;
    padding-top: 0.9rem;
    color: var(--modal-muted);
    font-size: 0.95rem;
}

#bookingWizardModal .booking-wizard-footer {
    flex: 0 0 auto;
    grid-auto-flow: row;
    grid-auto-columns: unset;
    justify-content: stretch;
    padding-top: 1rem;
    background: linear-gradient(180deg, rgba(252, 253, 250, 0), rgba(252, 253, 250, 0.96) 28%, rgba(252, 253, 250, 1) 100%);
}

#bookingWizardModal .time-slot-capacity {
    color: var(--modal-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

#bookingWizardModal .time-slot-button.is-selected .time-slot-capacity {
    color: rgba(255, 255, 255, 0.86);
}

#bookingWizardModal .booking-price-summary {
    display: grid;
    gap: 0.45rem;
    padding: 1rem;
    border: 1px solid rgba(169, 185, 170, 0.28);
    border-radius: 20px;
    background: rgba(244, 248, 242, 0.96);
    color: var(--modal-text);
}

#bookingWizardModal .booking-wizard-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

@media (min-width: 768px) {
    .app-modal .app-modal-dialog {
        width: min(100% - 2rem, 680px);
        margin: 1rem auto;
    }

    .app-modal .app-modal-body,
    .app-modal .app-modal-footer,
    .app-modal .app-modal-header,
    .app-modal-page .app-modal-body,
    .app-modal-page .app-modal-footer,
    .app-modal-page .app-modal-header {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .app-modal .app-modal-footer,
    .app-modal-page .app-modal-footer,
    .app-modal-actions {
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, max-content);
        justify-content: start;
    }

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

    .app-customer-detail-actions {
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, max-content);
        justify-content: start;
    }

    .app-customer-detail-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

    .booking-detail-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    #bookingWizardModal .booking-choice-grid,
    #bookingWizardModal .booking-field-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #bookingWizardModal .booking-field-stack .booking-field-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    #bookingWizardModal .time-slot-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #bookingWizardModal .booking-wizard-footer {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-flow: initial;
        justify-content: stretch;
    }
}

@media (max-width: 767.98px) {
    .booking-detail-summary-head {
        flex-direction: column;
        align-items: flex-start;
    }

    #bookingWizardModal .booking-wizard-dialog {
        height: 100dvh;
        margin: 0;
    }

    #bookingWizardModal .booking-wizard-modal {
        height: 100dvh;
        border-radius: 0;
    }

    #bookingWizardModal .booking-card,
    #bookingWizardModal .booking-confirm-card {
        border-radius: 22px;
    }

    .app-customer-detail-actions .app-modal-btn {
        width: 100%;
    }
}
#bookingWizardModal .lesson-picker-layout {
    display: grid;
    gap: 0.85rem;
}

#bookingWizardModal .lesson-date-card,
#bookingWizardModal .lesson-time-card {
    display: grid;
    gap: 0.9rem;
}

#bookingWizardModal .lesson-picker-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

#bookingWizardModal .lesson-picker-note {
    color: var(--modal-muted);
    font-size: 0.88rem;
}

#bookingWizardModal .lesson-selected-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 9.75rem;
    min-height: 2rem;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    background: #f1f5ef;
    color: var(--modal-text);
    font-size: 0.82rem;
    font-weight: 700;
    text-align: center;
}

#bookingWizardModal .lesson-date-calendar {
    display: grid;
    gap: 0.7rem;
}

#bookingWizardModal .lesson-calendar-header {
    display: grid;
    grid-template-columns: 2.2rem minmax(0, 1fr) 2.2rem;
    align-items: center;
    gap: 0.5rem;
}

#bookingWizardModal .lesson-calendar-title {
    text-align: center;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--modal-text);
    text-transform: capitalize;
}

#bookingWizardModal .lesson-calendar-nav {
    width: 2.2rem;
    height: 2.2rem;
    border: 1px solid var(--modal-border);
    border-radius: 999px;
    background: #fff;
    color: var(--modal-text);
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(74, 91, 74, 0.05);
    transition: all 0.2s ease;
}

#bookingWizardModal .lesson-calendar-nav:hover,
#bookingWizardModal .lesson-calendar-nav:focus-visible {
    border-color: #b8cab9;
    box-shadow: 0 10px 20px rgba(82, 118, 88, 0.12);
    outline: none;
}

#bookingWizardModal .lesson-calendar-nav:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

#bookingWizardModal .lesson-calendar-weekdays,
#bookingWizardModal .lesson-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.35rem;
}

#bookingWizardModal .lesson-calendar-weekdays span {
    text-align: center;
    color: var(--modal-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#bookingWizardModal .lesson-calendar-day {
    min-height: 2.55rem;
    border: 1px solid transparent;
    border-radius: 14px;
    background: #f6f8f4;
    color: #a3ada3;
    font: inherit;
    font-weight: 700;
    transition: all 0.18s ease;
}

#bookingWizardModal .lesson-calendar-day.is-current-month {
    color: var(--modal-text);
}

#bookingWizardModal .lesson-calendar-day.is-outside-month {
    opacity: 0.55;
}

#bookingWizardModal .lesson-calendar-day.is-available {
    border-color: rgba(169, 185, 170, 0.3);
    background: rgba(223, 238, 225, 0.98);
    color: var(--modal-text);
    box-shadow: 0 6px 16px rgba(74, 91, 74, 0.05);
    cursor: pointer;
}

#bookingWizardModal .lesson-calendar-day.is-available:hover,
#bookingWizardModal .lesson-calendar-day.is-available:focus-visible {
    border-color: #b8cab9;
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(82, 118, 88, 0.12);
    outline: none;
}

#bookingWizardModal .lesson-calendar-day.is-today {
    box-shadow: inset 0 0 0 1px rgba(111, 143, 114, 0.35);
}

#bookingWizardModal .lesson-calendar-day.is-selected {
    border-color: var(--modal-accent);
    background: linear-gradient(180deg, rgba(111, 143, 114, 0.98), rgba(95, 127, 99, 0.94));
    color: #fff;
    box-shadow: 0 12px 22px rgba(84, 120, 89, 0.24);
}

#bookingWizardModal .lesson-calendar-day:disabled {
    cursor: not-allowed;
}

#bookingWizardModal .lesson-calendar-empty {
    padding: 1rem;
    border-radius: 18px;
    background: #f3f6f1;
    color: var(--modal-muted);
    font-size: 0.92rem;
    text-align: center;
}

#bookingWizardModal .time-slot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

#bookingWizardModal .time-slot-button {
    display: grid;
    justify-items: start;
    gap: 0.1rem;
    min-height: 4rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--modal-border);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbf7 100%);
    box-shadow: 0 8px 18px rgba(74, 91, 74, 0.06);
}

#bookingWizardModal .time-slot-button:hover,
#bookingWizardModal .time-slot-button:focus-visible {
    border-color: #b8cab9;
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(82, 118, 88, 0.12);
    outline: none;
}

#bookingWizardModal .time-slot-button.is-selected {
    border-color: var(--modal-accent);
    background: linear-gradient(180deg, rgba(111, 143, 114, 0.98), rgba(95, 127, 99, 0.95));
    color: #fff;
    box-shadow: 0 12px 22px rgba(84, 120, 89, 0.24);
}

#bookingWizardModal .time-slot-time {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.1;
}

#bookingWizardModal .time-slot-meta {
    font-size: 0.78rem;
    color: var(--modal-muted);
}

#bookingWizardModal .time-slot-button.is-selected .time-slot-meta {
    color: rgba(255, 255, 255, 0.82);
}

#bookingWizardModal .time-slot-placeholder {
    padding: 1rem 0.25rem 0.2rem;
    color: var(--modal-muted);
    font-size: 0.92rem;
    text-align: center;
}

@media (min-width: 768px) {
    #bookingWizardModal .lesson-picker-layout {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        align-items: start;
    }

    #bookingWizardModal .time-slot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
#bookingWizardModal .time-slot-button {
    display: grid;
    align-items: center;
    justify-content: center;
    justify-items: center;
    gap: 0.15rem;
    min-height: 4rem;
    padding: 0.8rem 0.9rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
}
.course-reservation-form .lesson-picker-layout {
    display: grid;
    gap: 0.85rem;
}

.course-reservation-form .lesson-date-card,
.course-reservation-form .lesson-time-card {
    display: grid;
    gap: 0.9rem;
}

.course-reservation-form .lesson-picker-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.course-reservation-form .lesson-picker-note {
    color: var(--modal-muted);
    font-size: 0.88rem;
}

.course-reservation-form .lesson-selected-value {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    background: #f1f5ef;
    color: var(--modal-text);
    font-size: 0.82rem;
    font-weight: 700;
    text-align: right;
}

.course-reservation-form .lesson-date-calendar {
    display: grid;
    gap: 0.7rem;
}

.course-reservation-form .lesson-calendar-header {
    display: grid;
    grid-template-columns: 2.2rem minmax(0, 1fr) 2.2rem;
    align-items: center;
    gap: 0.5rem;
}

.course-reservation-form .lesson-calendar-title {
    text-align: center;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--modal-text);
    text-transform: capitalize;
}

.course-reservation-form .lesson-calendar-nav {
    width: 2.2rem;
    height: 2.2rem;
    border: 1px solid var(--modal-border);
    border-radius: 999px;
    background: #fff;
    color: var(--modal-text);
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(74, 91, 74, 0.05);
    transition: all 0.2s ease;
}

.course-reservation-form .lesson-calendar-nav:hover,
.course-reservation-form .lesson-calendar-nav:focus-visible {
    border-color: #b8cab9;
    box-shadow: 0 10px 20px rgba(82, 118, 88, 0.12);
    outline: none;
}

.course-reservation-form .lesson-calendar-nav:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

.course-reservation-form .lesson-calendar-weekdays,
.course-reservation-form .lesson-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.35rem;
}

.course-reservation-form .lesson-calendar-weekdays span {
    text-align: center;
    color: var(--modal-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.course-reservation-form .lesson-calendar-day {
    min-height: 2.55rem;
    border: 1px solid transparent;
    border-radius: 14px;
    background: #f6f8f4;
    color: #a3ada3;
    font: inherit;
    font-weight: 700;
    transition: all 0.18s ease;
}

.course-reservation-form .lesson-calendar-day.is-current-month {
    color: var(--modal-text);
}

.course-reservation-form .lesson-calendar-day.is-outside-month {
    opacity: 0.55;
}

.course-reservation-form .lesson-calendar-day.is-available {
    border-color: rgba(169, 185, 170, 0.3);
    background: rgba(223, 238, 225, 0.98);
    color: var(--modal-text);
    box-shadow: 0 6px 16px rgba(74, 91, 74, 0.05);
    cursor: pointer;
}

.course-reservation-form .lesson-calendar-day.is-available:hover,
.course-reservation-form .lesson-calendar-day.is-available:focus-visible {
    border-color: #b8cab9;
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(82, 118, 88, 0.12);
    outline: none;
}

.course-reservation-form .lesson-calendar-day.is-today {
    box-shadow: inset 0 0 0 1px rgba(111, 143, 114, 0.35);
}

.course-reservation-form .lesson-calendar-day.is-selected {
    border-color: var(--modal-accent);
    background: linear-gradient(180deg, rgba(111, 143, 114, 0.98), rgba(95, 127, 99, 0.94));
    color: #fff;
    box-shadow: 0 12px 22px rgba(84, 120, 89, 0.24);
}

.course-reservation-form .lesson-calendar-empty {
    padding: 1rem;
    border-radius: 18px;
    background: #f3f6f1;
    color: var(--modal-muted);
    font-size: 0.92rem;
    text-align: center;
}

.course-reservation-form .time-slot-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.course-reservation-form .time-slot-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 4rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--modal-border);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbf7 100%);
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: var(--modal-text);
    text-align: center;
    box-shadow: 0 8px 18px rgba(74, 91, 74, 0.06);
}

.course-reservation-form .time-slot-button:hover,
.course-reservation-form .time-slot-button:focus-visible {
    border-color: #b8cab9;
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(82, 118, 88, 0.12);
    outline: none;
}

.course-reservation-form .time-slot-button.is-selected {
    border-color: var(--modal-accent);
    background: linear-gradient(180deg, rgba(111, 143, 114, 0.98), rgba(95, 127, 99, 0.95));
    color: #fff;
    box-shadow: 0 12px 22px rgba(84, 120, 89, 0.24);
}

.course-reservation-form .time-slot-placeholder {
    grid-column: 1 / -1;
    padding: 1rem 0.25rem 0.2rem;
    color: var(--modal-muted);
    font-size: 0.92rem;
    text-align: center;
}

@media (min-width: 768px) {
    .course-reservation-form .lesson-picker-layout {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        align-items: start;
    }
}
.booking-wizard-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


.trainer-working-hours-page {
    max-width: 1120px;
}

.trainer-working-hours-body {
    display: grid;
    gap: 1rem;
}

.trainer-working-hours-note {
    margin-bottom: 0;
}

.trainer-working-hours-card {
    display: grid;
    gap: 1.25rem;
    padding: 1.1rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(249, 251, 247, 0.96)),
        radial-gradient(circle at top left, rgba(111, 143, 114, 0.08), transparent 42%);
}

.trainer-working-hours-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.trainer-working-hours-identity {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.trainer-working-hours-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.65rem;
    height: 3.65rem;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(111, 143, 114, 0.98), rgba(95, 127, 99, 0.95));
    color: #fff;
    font-size: 1.2rem;
    font-weight: 800;
    box-shadow: 0 14px 24px rgba(84, 120, 89, 0.2);
}

.trainer-working-hours-name {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 750;
    color: var(--modal-text);
}

.trainer-working-hours-meta {
    margin-top: 0.2rem;
    color: var(--modal-muted);
}

.trainer-working-hours-summary {
    display: flex;
    align-items: center;
}

.trainer-working-hours-pill {
    display: inline-flex;
    align-items: center;
    min-height: 2.2rem;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    background: var(--modal-accent-soft);
    color: var(--modal-accent-strong);
    font-size: 0.82rem;
    font-weight: 700;
}

.trainer-working-hours-columns {
    display: grid;
    gap: 1rem;
}

.trainer-editor-panel {
    display: grid;
    gap: 1rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid rgba(169, 185, 170, 0.28);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.74);
    box-shadow: 0 10px 24px rgba(63, 80, 67, 0.06);
}

.trainer-editor-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
}

.trainer-editor-panel-head-breaks {
    align-items: flex-start;
}

.trainer-editor-panel-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--modal-text);
}

.trainer-editor-panel-note {
    margin-top: 0.35rem;
    color: var(--modal-muted);
    font-size: 0.93rem;
}

.trainer-panel-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.2rem;
    min-width: 9.5rem;
    padding: 0.82rem 1.3rem;
    border: 1px solid transparent;
    border-radius: 18px;
    font-weight: 800;
    line-height: 1;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.trainer-panel-button:hover,
.trainer-panel-button:focus {
    transform: translateY(-1px);
}

.trainer-panel-button-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.trainer-save-button-hours {
    background: linear-gradient(135deg, #6f8f72, #5d7b61);
    color: #fff;
    box-shadow: 0 14px 26px rgba(84, 120, 89, 0.22);
}

.trainer-save-button-hours:hover,
.trainer-save-button-hours:focus {
    background: linear-gradient(135deg, #668768, #547157);
    color: #fff;
    box-shadow: 0 16px 28px rgba(84, 120, 89, 0.26);
}

.trainer-save-button-breaks {
    background: linear-gradient(135deg, #f4efe2, #ebe2cc);
    border-color: #ded1b4;
    color: #5f5134;
    box-shadow: 0 12px 22px rgba(121, 101, 61, 0.12);
}

.trainer-save-button-breaks:hover,
.trainer-save-button-breaks:focus {
    background: linear-gradient(135deg, #efe7d5, #e4d8bb);
    border-color: #cfbf9d;
    color: #513f23;
    box-shadow: 0 14px 26px rgba(121, 101, 61, 0.16);
}

.trainer-save-button:disabled {
    transform: none;
    opacity: 0.75;
    box-shadow: none;
}

.trainer-working-day-list,
.trainer-breaks-list {
    display: grid;
    gap: 0.85rem;
}

.trainer-working-day-row,
.trainer-break-row {
    border: 1px solid rgba(169, 185, 170, 0.24);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 246, 0.96));
    box-shadow: 0 8px 18px rgba(74, 91, 74, 0.05);
}

.trainer-working-day-row {
    display: grid;
    gap: 0.85rem;
    padding: 0.95rem 1rem;
    transition: opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.trainer-working-day-row.is-disabled {
    opacity: 0.72;
    background: linear-gradient(180deg, rgba(246, 247, 244, 0.96), rgba(240, 243, 239, 0.96));
}

.trainer-working-day-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
}

.trainer-working-day-name {
    font-weight: 700;
    color: var(--modal-text);
}

.trainer-working-day-status {
    margin-top: 0.18rem;
    color: var(--modal-muted);
    font-size: 0.88rem;
}

.trainer-working-day-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
}

.trainer-working-day-toggle-wrap .trainer-working-day-toggle {
    margin: 0;
}

.trainer-working-day-toggle-label {
    color: var(--modal-text);
    font-weight: 600;
    font-size: 0.92rem;
}

.trainer-working-day-times {
    display: grid;
    gap: 0.75rem;
}

.trainer-time-field,
.trainer-break-field {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.trainer-break-field {
    min-width: 7.25rem;
}

.trainer-time-select {
    min-height: 3.45rem;
    padding: 0.95rem 3.35rem 0.95rem 1.15rem;
    border: 1px solid rgba(132, 157, 135, 0.34);
    border-radius: 26px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(243, 247, 241, 0.98)),
        radial-gradient(circle at top right, rgba(111, 143, 114, 0.14), transparent 42%);
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(243, 247, 241, 0.98)),
        radial-gradient(circle at top right, rgba(111, 143, 114, 0.14), transparent 42%),
        linear-gradient(45deg, transparent 50%, #5f7f63 50%),
        linear-gradient(135deg, #5f7f63 50%, transparent 50%);
    background-repeat: no-repeat;
    background-size: auto, auto, 0.6rem 0.6rem, 0.6rem 0.6rem;
    background-position: 0 0, 0 0, calc(100% - 1.5rem) calc(50% - 0.12rem), calc(100% - 1.1rem) calc(50% - 0.12rem);
    color: var(--modal-text);
    font-family: "Aptos", "Segoe UI", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.015em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    box-shadow: 0 14px 28px rgba(74, 91, 74, 0.07);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.trainer-time-select:hover {
    border-color: rgba(111, 143, 114, 0.5);
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(240, 246, 239, 0.99)),
        radial-gradient(circle at top right, rgba(111, 143, 114, 0.18), transparent 42%),
        linear-gradient(45deg, transparent 50%, #547157 50%),
        linear-gradient(135deg, #547157 50%, transparent 50%);
    box-shadow: 0 16px 30px rgba(74, 91, 74, 0.1);
}

.trainer-time-select:focus {
    border-color: rgba(111, 143, 114, 0.74);
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(239, 246, 238, 1)),
        radial-gradient(circle at top right, rgba(111, 143, 114, 0.2), transparent 42%),
        linear-gradient(45deg, transparent 50%, #4f6f53 50%),
        linear-gradient(135deg, #4f6f53 50%, transparent 50%);
    box-shadow: 0 0 0 0.24rem rgba(111, 143, 114, 0.16), 0 16px 30px rgba(74, 91, 74, 0.12);
    transform: translateY(-1px);
}

.trainer-time-select:disabled {
    color: rgba(79, 87, 78, 0.56);
    background-image:
        linear-gradient(180deg, rgba(241, 243, 240, 0.96), rgba(236, 239, 235, 0.96)),
        linear-gradient(45deg, transparent 50%, rgba(95, 127, 99, 0.38) 50%),
        linear-gradient(135deg, rgba(95, 127, 99, 0.38) 50%, transparent 50%);
    background-size: auto, 0.6rem 0.6rem, 0.6rem 0.6rem;
    background-position: 0 0, calc(100% - 1.5rem) calc(50% - 0.12rem), calc(100% - 1.1rem) calc(50% - 0.12rem);
    border-color: rgba(169, 185, 170, 0.22);
    box-shadow: none;
}

.trainer-working-day-start,
.trainer-break-start {
    border-color: rgba(111, 143, 114, 0.34);
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(240, 247, 241, 0.98)),
        radial-gradient(circle at top right, rgba(111, 143, 114, 0.18), transparent 42%),
        linear-gradient(45deg, transparent 50%, #5f7f63 50%),
        linear-gradient(135deg, #5f7f63 50%, transparent 50%);
}

.trainer-working-day-end,
.trainer-break-end {
    border-color: rgba(185, 164, 121, 0.34);
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(250, 245, 236, 0.98)),
        radial-gradient(circle at top right, rgba(196, 164, 106, 0.18), transparent 42%),
        linear-gradient(45deg, transparent 50%, #9b7a42 50%),
        linear-gradient(135deg, #9b7a42 50%, transparent 50%);
}

.trainer-working-day-start:hover,
.trainer-break-start:hover {
    border-color: rgba(111, 143, 114, 0.54);
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(236, 246, 237, 0.99)),
        radial-gradient(circle at top right, rgba(111, 143, 114, 0.22), transparent 42%),
        linear-gradient(45deg, transparent 50%, #547157 50%),
        linear-gradient(135deg, #547157 50%, transparent 50%);
}

.trainer-working-day-end:hover,
.trainer-break-end:hover {
    border-color: rgba(185, 164, 121, 0.5);
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(248, 241, 229, 0.99)),
        radial-gradient(circle at top right, rgba(196, 164, 106, 0.22), transparent 42%),
        linear-gradient(45deg, transparent 50%, #8d6d37 50%),
        linear-gradient(135deg, #8d6d37 50%, transparent 50%);
}

.trainer-working-day-start:focus,
.trainer-break-start:focus {
    border-color: rgba(111, 143, 114, 0.74);
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(233, 245, 235, 1)),
        radial-gradient(circle at top right, rgba(111, 143, 114, 0.24), transparent 42%),
        linear-gradient(45deg, transparent 50%, #4f6f53 50%),
        linear-gradient(135deg, #4f6f53 50%, transparent 50%);
}

.trainer-working-day-end:focus,
.trainer-break-end:focus {
    border-color: rgba(185, 164, 121, 0.68);
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(247, 239, 224, 1)),
        radial-gradient(circle at top right, rgba(196, 164, 106, 0.24), transparent 42%),
        linear-gradient(45deg, transparent 50%, #7c5d2c 50%),
        linear-gradient(135deg, #7c5d2c 50%, transparent 50%);
    box-shadow: 0 0 0 0.24rem rgba(196, 164, 106, 0.16), 0 16px 30px rgba(121, 101, 61, 0.12);
}

.trainer-time-label {
    color: #6a746b;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.trainer-break-row {
    display: grid;
    gap: 0.75rem;
    padding: 0.9rem 0.8rem 0.9rem 0.72rem;
    min-width: 0;
}

.trainer-break-row.is-disabled-by-day {
    display: none;
}

.trainer-break-actions {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    padding-left: 0.2rem;
    padding-right: 0.08rem;
    min-width: 0;
}

.trainer-break-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    width: 3.25rem;
    height: 3.45rem;
    min-width: 3.25rem;
    padding: 0;
    border: 1px solid #efc1c1;
    border-radius: 22px;
    background: #fff5f5;
    color: #bf4b4b;
    font-size: 1.3rem;
    line-height: 1;
    box-shadow: none;
}

.trainer-break-remove:hover,
.trainer-break-remove:focus {
    background: #ffeaea;
    border-color: #e29a9a;
    color: #a53b3b;
}

.trainer-break-remove span[aria-hidden="true"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    transform: translateY(-0.04em);
}

.trainer-breaks-pending-note {
    padding: 0.95rem 1rem;
    border-radius: 18px;
    font-size: 0.94rem;
    background: #fff7e9;
    color: #7d612b;
    border: 1px solid #efdfc2;
}

.trainer-breaks-footer {
    display: flex;
    justify-content: flex-start;
    padding-top: 0.15rem;
}

.trainer-breaks-footer.is-empty {
    justify-content: center;
    padding-top: 0;
}

.trainer-break-add-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    padding: 0;
    border: 1px dashed #c8d6c8;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff, #f2f7f1);
    color: #5f7f63;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1;
    box-shadow: 0 10px 20px rgba(84, 120, 89, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}

.trainer-break-add-button:hover,
.trainer-break-add-button:focus {
    transform: translateY(-1px);
    border-color: #9db39f;
    background: linear-gradient(180deg, #ffffff, #eaf3e8);
    color: #49684d;
    box-shadow: 0 14px 24px rgba(84, 120, 89, 0.14);
}

.trainer-capacity-input-cell {
    max-width: 160px;
}

@media (min-width: 768px) {
    .trainer-working-hours-card {
        padding: 1.25rem;
    }

    .trainer-working-hours-columns {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
        align-items: start;
    }

    .trainer-working-day-times {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trainer-break-row {
        grid-template-columns: minmax(7.7rem, 1.06fr) repeat(2, minmax(7.25rem, 0.8fr)) minmax(3.35rem, auto);
        align-items: end;
    }
}

@media (max-width: 767.98px) {
    .trainer-working-hours-card-header,
    .trainer-editor-panel-head,
    .trainer-editor-panel-head-breaks,
    .trainer-working-day-main {
        flex-direction: column;
        align-items: flex-start;
    }

    .trainer-panel-button {
        width: 100%;
    }

    .trainer-break-actions .trainer-break-remove {
        width: 100%;
        min-width: 0;
    }
}

.trainer-working-hours-admin-page {
    display: grid;
    gap: 1rem;
}

.trainer-working-hours-admin-list {
    display: grid;
    gap: 1rem;
}

.trainer-working-hours-form {
    display: grid;
    gap: 0;
}