/* =========================================
   Customer Appointment UI
========================================= */

.appointment-booking-wrapper,
.appointment-dashboard-wrapper,
.appointment-details-wrapper {
    --appointment-surface: #ffffff;
    --appointment-surface-muted: #f9fafb;
    --appointment-border: #e5e7eb;
    --appointment-border-strong: #d8dee8;
    --appointment-text: #1f2937;
    --appointment-text-muted: #6b7280;
    --appointment-primary: #1e6dfb;
    --appointment-primary-soft: rgba(30, 109, 251, 0.08);
    --appointment-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    --appointment-shadow-hover: 0 10px 24px rgba(15, 23, 42, 0.12);
    --appointment-radius-card: 8px;
    --appointment-radius-input: 6px;
    --appointment-radius-button: 8px;
}

[data-bs-theme=dark] .appointment-booking-wrapper,
[data-bs-theme=dark] .appointment-dashboard-wrapper,
[data-bs-theme=dark] .appointment-details-wrapper,
body[data-bs-theme=dark] [data-bs-theme=light] .appointment-booking-wrapper,
body[data-bs-theme=dark] [data-bs-theme=light] .appointment-dashboard-wrapper,
body[data-bs-theme=dark] [data-bs-theme=light] .appointment-details-wrapper {
    --appointment-surface: #121f33;
    --appointment-surface-muted: #1b2b45;
    --appointment-border: #30435f;
    --appointment-border-strong: #3a5276;
    --appointment-text: #e5edf8;
    --appointment-text-muted: #b2c1d8;
    --appointment-primary: #4f9cfb;
    --appointment-primary-soft: rgba(79, 156, 251, 0.16);
    --appointment-shadow: 0 4px 14px rgba(2, 8, 18, 0.45);
    --appointment-shadow-hover: 0 12px 30px rgba(2, 8, 18, 0.55);
}

.appointment-booking-wrapper .text-muted,
.appointment-dashboard-wrapper .text-muted,
.appointment-details-wrapper .text-muted {
    color: var(--appointment-text-muted) !important;
}

.appointment-booking-wrapper .bb-customer-card,
.appointment-dashboard-wrapper .bb-customer-card,
.appointment-details-wrapper .bb-customer-card,
.appointment-details-wrapper .card {
    background: var(--appointment-surface);
    border: 1px solid var(--appointment-border);
    border-radius: var(--appointment-radius-card);
    box-shadow: var(--appointment-shadow);
    overflow: hidden;
}

.appointment-booking-wrapper .bb-customer-card-header,
.appointment-dashboard-wrapper .bb-customer-card-header,
.appointment-details-wrapper .bb-customer-card-header,
.appointment-details-wrapper .panel-heading {
    background: var(--appointment-surface-muted);
    border-bottom: 1px solid var(--appointment-border);
    padding: 1rem 1.25rem;
}

.appointment-booking-wrapper .bb-customer-card-body,
.appointment-dashboard-wrapper .bb-customer-card-body,
.appointment-details-wrapper .bb-customer-card-body,
.appointment-details-wrapper .panel-body,
.appointment-details-wrapper .card-body {
    padding: 1.25rem;
    background: var(--appointment-surface);
}

.appointment-booking-wrapper h2,
.appointment-booking-wrapper h3,
.appointment-booking-wrapper h4,
.appointment-booking-wrapper h5,
.appointment-dashboard-wrapper h2,
.appointment-dashboard-wrapper h3,
.appointment-dashboard-wrapper h4,
.appointment-dashboard-wrapper h5,
.appointment-details-wrapper h2,
.appointment-details-wrapper h3,
.appointment-details-wrapper h4,
.appointment-details-wrapper h5 {
    color: var(--appointment-text);
}

.appointment-booking-wrapper h5.border-bottom,
.appointment-dashboard-wrapper .appointment-section-title {
    border-bottom: 1px solid var(--appointment-border) !important;
    color: var(--appointment-text);
    font-weight: 700;
    padding-bottom: 0.75rem;
}

.appointment-booking-wrapper .form-label,
.appointment-dashboard-wrapper .form-label,
.appointment-details-wrapper .form-label {
    color: var(--appointment-text);
    font-weight: 600;
}

.appointment-booking-wrapper .form-control,
.appointment-booking-wrapper .form-select,
.appointment-dashboard-wrapper .form-control,
.appointment-dashboard-wrapper .form-select,
.appointment-details-wrapper .form-control,
.appointment-details-wrapper .form-select,
.appointment-details-wrapper textarea.form-control {
    background: #fff;
    border: 1px solid var(--appointment-border-strong);
    border-radius: var(--appointment-radius-input);
    color: var(--appointment-text);
    min-height: 44px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[data-bs-theme=dark] .appointment-booking-wrapper .form-control,
[data-bs-theme=dark] .appointment-booking-wrapper .form-select,
[data-bs-theme=dark] .appointment-dashboard-wrapper .form-control,
[data-bs-theme=dark] .appointment-dashboard-wrapper .form-select,
[data-bs-theme=dark] .appointment-details-wrapper .form-control,
[data-bs-theme=dark] .appointment-details-wrapper .form-select,
[data-bs-theme=dark] .appointment-details-wrapper textarea.form-control,
body[data-bs-theme=dark] [data-bs-theme=light] .appointment-booking-wrapper .form-control,
body[data-bs-theme=dark] [data-bs-theme=light] .appointment-booking-wrapper .form-select,
body[data-bs-theme=dark] [data-bs-theme=light] .appointment-dashboard-wrapper .form-control,
body[data-bs-theme=dark] [data-bs-theme=light] .appointment-dashboard-wrapper .form-select,
body[data-bs-theme=dark] [data-bs-theme=light] .appointment-details-wrapper .form-control,
body[data-bs-theme=dark] [data-bs-theme=light] .appointment-details-wrapper .form-select,
body[data-bs-theme=dark] [data-bs-theme=light] .appointment-details-wrapper textarea.form-control {
    background: #0e1828;
    color: var(--appointment-text);
}

.appointment-booking-wrapper textarea.form-control,
.appointment-dashboard-wrapper textarea.form-control,
.appointment-details-wrapper textarea.form-control {
    min-height: 120px;
}

.appointment-booking-wrapper .form-control:focus,
.appointment-booking-wrapper .form-select:focus,
.appointment-dashboard-wrapper .form-control:focus,
.appointment-dashboard-wrapper .form-select:focus,
.appointment-details-wrapper .form-control:focus,
.appointment-details-wrapper .form-select:focus {
    border-color: var(--appointment-primary);
    box-shadow: 0 0 0 0.2rem rgba(30, 109, 251, 0.12);
}

.appointment-booking-wrapper .form-select:disabled,
.appointment-dashboard-wrapper .form-select:disabled {
    background-color: #f3f4f6;
    color: var(--appointment-text-muted);
}

[data-bs-theme=dark] .appointment-booking-wrapper .form-select:disabled,
[data-bs-theme=dark] .appointment-dashboard-wrapper .form-select:disabled,
body[data-bs-theme=dark] [data-bs-theme=light] .appointment-booking-wrapper .form-select:disabled,
body[data-bs-theme=dark] [data-bs-theme=light] .appointment-dashboard-wrapper .form-select:disabled {
    background-color: #1b2b45;
}

.appointment-booking-wrapper .btn,
.appointment-dashboard-wrapper .btn,
.appointment-details-wrapper .btn {
    border-radius: var(--appointment-radius-button);
}

.appointment-booking-wrapper .btn-primary,
.appointment-dashboard-wrapper .btn-primary,
.appointment-details-wrapper .btn-primary {
    box-shadow: 0 8px 18px rgba(30, 109, 251, 0.18);
}

.appointment-booking-wrapper .btn-primary:hover,
.appointment-dashboard-wrapper .btn-primary:hover,
.appointment-details-wrapper .btn-primary:hover {
    box-shadow: 0 10px 22px rgba(30, 109, 251, 0.22);
    transform: translateY(-1px);
}

.appointment-booking-wrapper .appointment-type-card {
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--appointment-border);
    border-left-width: 4px;
    border-radius: var(--appointment-radius-button);
    box-shadow: var(--appointment-shadow);
    color: var(--appointment-text);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    justify-content: center;
    min-height: 90px;
    padding: 1.0rem 1.1rem;
    position: relative;
    text-align: left;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

[data-bs-theme=dark] .appointment-booking-wrapper .appointment-type-card,
body[data-bs-theme=dark] [data-bs-theme=light] .appointment-booking-wrapper .appointment-type-card {
    background: #16243a !important;
    border-color: #3c5579 !important;
    color: #e6edf7 !important;
}

.appointment-booking-wrapper .appointment-type-option:nth-child(1n) .appointment-type-card {
    border-left-color: #5bc0de;
}

.appointment-booking-wrapper .appointment-type-option:nth-child(2n) .appointment-type-card {
    border-left-color: #f0ad4e;
}

.appointment-booking-wrapper .appointment-type-option:nth-child(3n) .appointment-type-card {
    border-left-color: #5cb85c;
}

.appointment-booking-wrapper .appointment-type-card:hover,
.appointment-booking-wrapper .btn-check:focus + .appointment-type-card {
    background: #f8fbff;
    border-color: #bff8e2;
    box-shadow: var(--appointment-shadow-hover);
    color: var(--appointment-text);
    transform: translateY(-2px);
}

[data-bs-theme=dark] .appointment-booking-wrapper .appointment-type-card:hover,
[data-bs-theme=dark] .appointment-booking-wrapper .btn-check:focus + .appointment-type-card,
body[data-bs-theme=dark] [data-bs-theme=light] .appointment-booking-wrapper .appointment-type-card:hover,
body[data-bs-theme=dark] [data-bs-theme=light] .appointment-booking-wrapper .btn-check:focus + .appointment-type-card {
    background: #1d3150 !important;
    border-color: #4e6d98 !important;
    color: #f0f5ff !important;
}

.appointment-booking-wrapper .appointment-type-option:nth-child(1n) .appointment-type-card:hover,
.appointment-booking-wrapper .appointment-type-option:nth-child(1n) .btn-check:focus + .appointment-type-card {
    border-left-color: #5bc0de;
}

.appointment-booking-wrapper .appointment-type-option:nth-child(2n) .appointment-type-card:hover,
.appointment-booking-wrapper .appointment-type-option:nth-child(2n) .btn-check:focus + .appointment-type-card {
    border-left-color: #f0ad4e;
}

.appointment-booking-wrapper .appointment-type-option:nth-child(3n) .appointment-type-card:hover,
.appointment-booking-wrapper .appointment-type-option:nth-child(3n) .btn-check:focus + .appointment-type-card {
    border-left-color: #5cb85c;
}

.appointment-booking-wrapper .appointment-type-card:hover .appointment-type-label,
.appointment-booking-wrapper .appointment-type-card:hover .appointment-type-icon,
.appointment-booking-wrapper .btn-check:focus + .appointment-type-card .appointment-type-label,
.appointment-booking-wrapper .btn-check:focus + .appointment-type-card .appointment-type-icon {
    color: var(--appointment-text) !important;
}

.appointment-booking-wrapper .appointment-type-card:hover .appointment-type-meta,
.appointment-booking-wrapper .btn-check:focus + .appointment-type-card .appointment-type-meta {
    color: var(--appointment-text-muted) !important;
}

.appointment-booking-wrapper .btn-check:checked + .appointment-type-card {
    background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
    border-color: var(--appointment-primary);
    box-shadow: 0 0 0 1px rgba(30, 109, 251, 0.08), 0 10px 24px rgba(30, 109, 251, 0.14);
    color: var(--appointment-primary);
}

[data-bs-theme=dark] .appointment-booking-wrapper .btn-check:checked + .appointment-type-card,
body[data-bs-theme=dark] [data-bs-theme=light] .appointment-booking-wrapper .btn-check:checked + .appointment-type-card {
    background: linear-gradient(180deg, #213a5f 0%, #1b3151 100%) !important;
    border-color: #6ba8ff !important;
    color: #9ec5ff !important;
}

.appointment-booking-wrapper .appointment-type-icon {
    align-items: center;
    color: inherit;
    display: inline-flex;
    font-size: 1.5rem;
    justify-content: center;
}

.appointment-booking-wrapper .appointment-type-label {
    color: inherit;
    display: block;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}

.appointment-booking-wrapper .appointment-type-meta {
    color: var(--appointment-text-muted);
    display: block;
    font-size: 0.8125rem;
    line-height: 1.4;
}

[data-bs-theme=dark] .appointment-booking-wrapper .appointment-type-label,
[data-bs-theme=dark] .appointment-booking-wrapper .appointment-type-icon,
body[data-bs-theme=dark] [data-bs-theme=light] .appointment-booking-wrapper .appointment-type-label,
body[data-bs-theme=dark] [data-bs-theme=light] .appointment-booking-wrapper .appointment-type-icon {
    color: #e6edf7 !important;
}

[data-bs-theme=dark] .appointment-booking-wrapper .appointment-type-meta,
body[data-bs-theme=dark] [data-bs-theme=light] .appointment-booking-wrapper .appointment-type-meta {
    color: #b7c6dd !important;
}

.appointment-booking-wrapper .btn-check:checked + .appointment-type-card .appointment-type-meta {
    color: rgba(30, 109, 251, 0.72);
}

.appointment-booking-wrapper .alert-warning,
.appointment-details-wrapper .alert-warning {
    background: #fff8e6;
    border: 1px solid #f4dca2;
    color: #795800;
}

.appointment-dashboard-wrapper .appointment-toolbar {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.appointment-dashboard-wrapper .appointment-toolbar-title {
    margin: 0;
}

.appointment-dashboard-wrapper .appointment-toolbar-subtitle {
    color: var(--appointment-text-muted);
    margin: 0.25rem 0 0;
}

.appointment-dashboard-wrapper .appointment-card {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.appointment-dashboard-wrapper .appointment-card:hover {
    box-shadow: var(--appointment-shadow-hover);
    transform: translateY(-2px);
}

.appointment-dashboard-wrapper .appointment-status-badge {
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.4rem 0.8rem;
}

.appointment-dashboard-wrapper .appointment-meta {
    color: var(--appointment-text-muted);
    font-size: 0.9375rem;
}

.appointment-dashboard-wrapper .meta-pill {
    align-items: center;
    background: #f3f4f6;
    border-radius: 999px;
    color: #374151;
    display: inline-flex;
    gap: 0.35rem;
    line-height: 1.3;
    padding: 0.35rem 0.75rem;
}

.appointment-dashboard-wrapper .meta-purpose {
    color: var(--appointment-text-muted);
}

.appointment-dashboard-wrapper .appointment-actions .btn {
    min-width: 128px;
}

.appointment-dashboard-wrapper .bb-customer-empty-state {
    background: var(--appointment-surface);
    border: 1px solid var(--appointment-border);
    border-radius: var(--appointment-radius-card);
    box-shadow: var(--appointment-shadow);
    padding: 2rem 1.5rem;
}

.appointment-details-wrapper .panel {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.appointment-details-wrapper .panel-heading,
.appointment-details-wrapper .panel-body {
    border-radius: var(--appointment-radius-card);
}

.appointment-details-wrapper .table-borderless th,
.appointment-details-wrapper .table-borderless td {
    border-bottom: 1px solid var(--appointment-border);
    padding: 0.75rem 0;
}

.appointment-details-wrapper .table-borderless tr:last-child th,
.appointment-details-wrapper .table-borderless tr:last-child td {
    border-bottom: 0;
}

.appointment-details-wrapper .card-title,
.appointment-details-wrapper .customer-page-title {
    font-weight: 700;
}

.appointment-details-wrapper .appointment-detail-actions {
    display: flex;
    gap: 0.75rem;
}

/* Datepicker polish */
.ui-datepicker {
    border: 1px solid var(--appointment-border);
    border-radius: 12px;
    box-shadow: 0 14px 26px rgba(24, 39, 75, 0.18);
    padding: 0.5rem;
    width: 19rem;
}

[data-bs-theme=dark] .ui-datepicker,
body[data-bs-theme=dark] [data-bs-theme=light] .ui-datepicker {
    background: #121f33;
    border-color: #30435f;
}

.ui-datepicker .ui-datepicker-header {
    background: var(--appointment-surface-muted);
    border: 0;
    border-radius: 10px;
    color: #24344e;
    padding: 0.5rem 0.35rem;
}

[data-bs-theme=dark] .ui-datepicker .ui-datepicker-header,
body[data-bs-theme=dark] [data-bs-theme=light] .ui-datepicker .ui-datepicker-header {
    background: #1b2b45;
    color: #d8e5f5;
}

.ui-datepicker .ui-datepicker-title,
.ui-datepicker th {
    font-weight: 700;
}

.ui-datepicker th {
    color: #4c5f7c;
    padding: 0.45rem 0.35rem;
}

[data-bs-theme=dark] .ui-datepicker th,
body[data-bs-theme=dark] [data-bs-theme=light] .ui-datepicker th {
    color: #9db3cf;
}

.ui-datepicker td {
    padding: 0.1rem;
}

.ui-datepicker td a,
.ui-datepicker td span {
    border: 0 !important;
    border-radius: 8px;
    padding: 0.42rem 0.2rem;
    text-align: center;
}

.ui-datepicker td a.ui-state-default {
    background: #f7f9fc !important;
    color: #2f425f !important;
}

[data-bs-theme=dark] .ui-datepicker td a.ui-state-default,
body[data-bs-theme=dark] [data-bs-theme=light] .ui-datepicker td a.ui-state-default {
    background: #142134 !important;
    color: #d7e2f1 !important;
}

.ui-datepicker td a.ui-state-hover {
    background: #e8f1ff !important;
    color: var(--appointment-primary) !important;
}

[data-bs-theme=dark] .ui-datepicker td a.ui-state-hover,
body[data-bs-theme=dark] [data-bs-theme=light] .ui-datepicker td a.ui-state-hover {
    background: #21334d !important;
}

.ui-datepicker td .ui-state-active {
    background: var(--appointment-primary) !important;
    color: #fff !important;
    font-weight: 700;
}

.ui-datepicker td .ui-state-highlight {
    box-shadow: inset 0 0 0 1px #b5c9ef;
}

.ui-datepicker td.bb-unavailable-day .ui-state-default,
.ui-datepicker td.bb-unavailable-day .ui-state-disabled {
    background: #fff2f2 !important;
    color: #d43d3d !important;
    opacity: 1 !important;
    text-decoration: line-through;
}

@media (max-width: 767px) {
    .appointment-booking-wrapper .appointment-type-card {
        min-height: 110px;
    }

    .appointment-dashboard-wrapper .appointment-toolbar,
    .appointment-details-wrapper .appointment-detail-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .appointment-dashboard-wrapper .appointment-actions {
        width: 100%;
    }

    .appointment-dashboard-wrapper .appointment-actions .btn,
    .appointment-dashboard-wrapper .appointment-toolbar .btn,
    .appointment-details-wrapper .appointment-detail-actions .btn {
        width: 100%;
    }
}