/*
 * Patient-specific styles.
 * New patient-only classes should use the `.pt-` prefix (doctor uses `.dd-`, vendor uses `.vv-`).
 * Do not add generic/shared rules here — those belong in style.css / custom.css.
 */

/* ── Shared utility classes (patient views) ─────────────────────────────── */
.pt-flex-1 { flex: 1; }
.pt-flex-1-no-mb { flex: 1; margin-bottom: 0; }
.pt-hint-text { font-size: var(--font-size-2xs); color: var(--text-muted-cst); }
.pt-emphasis { color: var(--text-primary-cst); }
.pt-required { color: var(--status-error); font-size: var(--font-size-2xs); }
.pt-form-row { display: flex; gap: var(--space-md); }
.pt-form-row-mb { display: flex; gap: var(--space-md); margin-bottom: 0; }
.pt-stack-md { display: flex; flex-direction: column; gap: var(--space-md); }

/* Advance/additional charge notice box (booking_popup.blade.php / booking_request_popup.blade.php) */
.pt-notice-box {
    margin-bottom: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    background: color-mix(in srgb, var(--status-pending) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--status-pending) 20%, transparent);
    font-size: var(--font-size-2xs);
    color: var(--text-muted-cst);
    line-height: var(--line-height-base);
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
}
.pt-notice-box-icon { flex-shrink: 0; margin-top: var(--space-xxs); }
.pt-notice-box-opacity { opacity: .75; }

/* "Didn't find a slot? / No slots?" divider row (doctor.blade.php) */
.pt-divider-row { display: flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-sm); margin-bottom: var(--space-xxs); }
.pt-divider-line { flex: 1; height: 1px; background: var(--border-default); }
.pt-divider-label { font-size: var(--font-size-2xs); color: var(--text-muted-cst); white-space: nowrap; }

/* booking_request_popup.blade.php: taller variant of .booking-popup */
.pt-booking-popup--tall { max-height: 92vh; }

.pt-cursor-pointer { cursor: pointer; }
.pt-icon-inline { vertical-align: middle; margin-right: var(--space-xxs); }

/* doctor.blade.php: doctor name shown at larger size inside the shared .booking-price */
.pt-booking-price--doctor-name { font-size: var(--font-size-md); }

/* doctor.blade.php: calendar legend dot colors */
.pt-legend-dot--available { background: var(--accent-gold); }
.pt-legend-dot--filling { background: var(--status-filling); }
.pt-legend-dot--full { background: var(--status-error); }
.pt-legend-dot--none { background: var(--border-default); }

.pt-avail-schedule-label { font-size: var(--font-size-2xs); color: var(--text-muted-cst); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); margin-bottom: var(--space-xs); }
#avail-location { font-size: var(--font-size-2xs); color: var(--text-muted-cst); margin-top: var(--space-xs); }
#avail-booked { font-size: var(--font-size-2xs); color: var(--text-muted-cst); margin-top: var(--space-xs); }

/* "Request a Booking" secondary buttons */
.pt-btn-request { margin-top: var(--space-xs); }
.pt-btn-request--ghost { margin-top: var(--space-xs); background: transparent; }

/* Generic spacing utilities (patient views) */
.pt-mr-10 { margin-right: var(--space-sm); }
.pt-mt-0 { margin-top: 0; }
.pt-mt-20 { margin-top: var(--space-md); }
.pt-inline-flex-gap10 { display: flex; align-items: center; gap: var(--space-sm); }

/* my_appointments.blade.php: appointments card header + date filter form */
.pt-card-header-wrap { flex-wrap: wrap; gap: var(--space-sm); }
.pt-date-filter-form { display: flex; align-items: center; gap: var(--space-xs); margin-left: auto; }
.pt-date-filter-label { font-size: var(--font-size-2xs); color: var(--text-muted-cst); white-space: nowrap; margin-bottom: 0; line-height: var(--line-height-tight); }
.pt-date-filter-input { border: 1px solid var(--neutral-line); border-radius: var(--radius-sm); padding: var(--space-xxs) var(--space-sm); font-size: var(--font-size-2xs); cursor: pointer; }
.pt-clear-link { font-size: var(--font-size-2xs); color: var(--color-primary); white-space: nowrap; }

/* Approve/reject/pay action button color tones (my_appointments / doctor_booking_requests) */
.pt-tone-green { background: var(--accent-gold-icon); color: var(--accent-gold-dark); border-color: color-mix(in srgb, var(--accent-gold) 30%, transparent); }
.pt-tone-red { background: color-mix(in srgb, var(--status-full) 8%, transparent); color: var(--status-full); border-color: color-mix(in srgb, var(--status-full) 20%, transparent); }
.plx-appt-view-btn--pay { margin-top: var(--space-xxs); display: block; }

.pt-btn-cta { margin-top: var(--space-sm); display: inline-block; }

/* small secondary note below a label/value (my_appointments charge breakdown, doctor_patient_bookings "Full" tag) */
.pt-small-note { font-size: var(--font-size-2xs); display: block; margin-top: var(--space-xxs); }

/* doctor_booking_requests.blade.php */
.pt-mb-20 { margin-bottom: var(--space-md); }
.pt-phone-text { font-size: var(--font-size-2xs); }
.pt-status-payment-pending { background: color-mix(in srgb, var(--status-payment-pending) 10%, transparent); color: var(--status-payment-pending); border-color: color-mix(in srgb, var(--status-payment-pending) 30%, transparent); }
.pt-btn-approve-solid { background: color-mix(in srgb, var(--accent-gold) 80%, transparent); }
.pt-btn-reject-solid { background: color-mix(in srgb, var(--status-full) 80%, transparent); }

/* doctor_patient_bookings.blade.php */
.pt-fs-14 { font-size: var(--font-size-xs); }

/* patient/search.blade.php */
.pt-star-rating-icon { color: var(--status-warning); font-size: var(--font-size-2xs); line-height: var(--line-height-tight); }
.pt-icon-muted { color: var(--text-muted-cst); }
.pt-icon-muted-fade { color: var(--text-muted-cst); opacity: 0.85; }
.pt-lcard-desc--specialization { color: var(--text-muted-cst); font-size: var(--font-size-2xs); margin-bottom: var(--space-xxs); }
.pt-lcard-desc--location { color: var(--text-muted-cst); font-size: var(--font-size-2xs); display: flex; align-items: center; gap: var(--space-xxs); margin-top: var(--space-xxs); margin-bottom: var(--space-xs); }
.pt-lcard-price--label { color: var(--text-muted-cst); font-size: var(--font-size-2xs); font-weight: var(--font-weight-med); }

/* my_appointments.blade.php: rating modal visibility (state via data-state, not inline style) */
#ratingModal[data-state="hidden"] { display: none; }
#ratingModal[data-state="visible"] { display: flex; }

/* doctor.blade.php / booking_request_popup.blade.php: calendar picker state via
   data-state, not inline style. Class-based (not ID-based) so it covers every
   .custom-date-picker instance, not just doctor.blade.php's #custom-date-picker. */
.custom-date-picker[data-state="hidden"] { display: none; }
.custom-date-picker[data-state="visible"] { display: block; }

/* booking_request_popup.blade.php: class-based twin of the shared #calendar-month-year
   rule (custom.css) — that one is ID-scoped to listing/show.blade.php's calendar and
   doesn't match this popup's own id, so its span was missing flex:1/centering, breaking
   the .calendar-header space-between balance at narrow widths. */
.calendar-month-year { color: var(--text-primary-cst); font-size: 12px; text-align: center; flex: 1; }

#avail-panel {
    margin: var(--space-sm) 0 0;
}
#avail-panel[data-state="hidden"] { display: none; }
#avail-panel[data-state="visible"] { display: block; }

#avail-loading {
    text-align: center;
    padding: var(--space-sm) 0;
    color: var(--text-muted-cst);
    font-size: var(--font-size-2xs);
}
#avail-loading[data-state="hidden"] { display: none; }
#avail-loading[data-state="visible"] { display: block; }

#avail-content[data-state="hidden"] { display: none; }
#avail-content[data-state="visible"] { display: block; }

#space-picker-section[data-state="hidden"] { display: none; }
#space-picker-section[data-state="visible"] { display: block; }

#avail-window {
    padding: var(--space-sm) var(--space-sm);
}
#avail-window[data-state="hidden"] { display: none; }
#avail-window[data-state="visible"] { display: block; }

#avail-full-msg {
    text-align: center;
    padding: var(--space-sm);
    background: color-mix(in srgb, var(--status-full) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--status-full) 15%, transparent);
    font-size: var(--font-size-2xs);
    color: var(--status-full);
    margin-top: var(--space-sm);
}
#avail-full-msg[data-state="hidden"] { display: none; }
#avail-full-msg[data-state="visible"] { display: block; }

#avail-full-request-hint {
    margin-top: var(--space-sm);
    padding: var(--space-sm) var(--space-sm);
    background: var(--accent-gold-bg);
    border: 1px solid var(--accent-gold-border);
    font-size: var(--font-size-2xs);
    color: var(--text-muted-cst);
    line-height: var(--line-height-base);
}
#avail-full-request-hint[data-state="hidden"] { display: none; }
#avail-full-request-hint[data-state="visible"] { display: block; }

#no-avail-msg {
    text-align: center;
    padding: var(--space-sm) 0;
    color: var(--text-muted-cst);
    font-size: var(--font-size-2xs);
}
#no-avail-msg[data-state="hidden"] { display: none; }
#no-avail-msg[data-state="visible"] { display: block; }

#advance-charge-note {
    margin-top: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    background: color-mix(in srgb, var(--status-pending) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--status-pending) 20%, transparent);
    font-size: var(--font-size-2xs);
    color: var(--text-muted-cst);
    line-height: var(--line-height-base);
}
#advance-charge-note[data-state="hidden"] { display: none; }
#advance-charge-note[data-state="visible"] { display: block; }

#book-now-btn {
    margin-top: var(--space-sm);
}
#book-now-btn[data-state="hidden"] { display: none; }
#book-now-btn[data-state="visible"] { display: block; }

/* doctor profile page (patient/doctor.blade.php) */
.plx-doc-hero { display: flex; gap: var(--space-sm); align-items: flex-start; margin-bottom: var(--space-md); background: var(--bg-surface); border: 1px solid var(--border-subtle); padding: var(--space-sm); }
.plx-doc-hero-photo { width: 96px; height: 96px; flex-shrink: 0; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-elevated); border: 1px solid var(--border-default); display: flex; align-items: center; justify-content: center; }
.plx-doc-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.plx-doc-hero-initials { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--text-muted-cst); }
.plx-doc-hero-info { display: flex; flex-direction: column; gap: var(--space-xxs); }
.plx-doc-hero-name { font-size: var(--font-size-base); font-weight: var(--font-weight-bold); color: var(--text-primary-cst); margin: 0; line-height: var(--line-height-tight); }
.plx-doc-hero-spec { display: inline-block; font-size: var(--font-size-2xs); font-weight: var(--font-weight-semi); color: var(--text-primary-cst); background: var(--bg-elevated); border: 1px solid var(--border-default); padding: var(--space-xxs) var(--space-xs); align-self: flex-start; }
.plx-doc-hero-meta { display: flex; flex-wrap: wrap; gap: var(--space-xxs) var(--space-sm); margin-top: var(--space-xxs); }
.plx-doc-hero-meta span { font-size: var(--font-size-2xs); color: var(--text-muted-cst); display: flex; align-items: center; gap: var(--space-xxs); }

.plx-doc-section { margin-bottom: var(--space-sm); }
.plx-doc-section-title { font-size: var(--font-size-2xs); font-weight: var(--font-weight-bold); color: var(--text-muted-cst); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); margin: 0 0 var(--space-sm); padding-bottom: var(--space-xs); border-bottom: 1px solid var(--border-subtle); }
.plx-doc-bio { font-size: var(--font-size-2xs); color: var(--text-muted-cst); line-height: var(--line-height-base); margin: 0; white-space: pre-line; }

.plx-doc-prof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xs); }
.plx-doc-prof-tile { background: var(--bg-surface); border: 1px solid var(--border-subtle); padding: var(--space-sm) var(--space-sm); }
.plx-doc-prof-tile-label { font-size: var(--font-size-2xs); color: var(--text-muted-cst); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); margin-bottom: var(--space-xxs); }
.plx-doc-prof-tile-value { font-size: var(--font-size-2xs); font-weight: var(--font-weight-semi); color: var(--text-primary-cst); }

.plx-avail-at-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.plx-avail-at-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); overflow: hidden; }
.plx-avail-at-top { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-sm); }
.plx-avail-at-thumb { width: 52px; height: 52px; flex-shrink: 0; overflow: hidden; background: var(--bg-elevated); border: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: center; }
.plx-avail-at-thumb img { width: 100%; height: 100%; object-fit: cover; }
.plx-avail-at-thumb-ph { color: var(--text-muted-cst); }
.plx-avail-at-meta { flex: 1; min-width: 0; }
.plx-avail-at-name { font-size: var(--font-size-2xs); font-weight: var(--font-weight-bold); color: var(--text-primary-cst); margin-bottom: var(--space-xxs); }
.plx-avail-at-loc { font-size: var(--font-size-2xs); color: var(--text-muted-cst); display: flex; align-items: center; gap: var(--space-xxs); }
.plx-avail-at-badge { font-size: var(--font-size-2xs); font-weight: var(--font-weight-semi); padding: var(--space-xxs) var(--space-xs); border: 1px solid var(--border-default); color: var(--text-muted-cst); white-space: nowrap; flex-shrink: 0; }
.plx-avail-at-schedule { border-top: 1px solid var(--border-subtle); padding: var(--space-xs) var(--space-sm); display: flex; flex-wrap: wrap; gap: var(--space-xxs); }
.plx-avail-at-chip { display: inline-flex; align-items: center; gap: var(--space-xxs); padding: var(--space-xxs) var(--space-xs); background: var(--bg-elevated); border: 1px solid var(--border-subtle); font-size: var(--font-size-2xs); white-space: nowrap; }
.plx-avail-at-chip-day { font-weight: var(--font-weight-bold); color: var(--text-primary-cst); }
.plx-avail-at-chip-sep { color: var(--text-muted-cst); opacity: 0.4; }
.plx-avail-at-chip-time { color: var(--text-muted-cst); font-weight: var(--font-weight-med); }
.avail-slot-row { padding: var(--space-xs) 0; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.avail-slot-row:last-child { border-bottom: none; }
.avail-slot-time { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--text-primary-cst); white-space: nowrap; }
.avail-slot-purposes { font-size: var(--font-size-2xs); color: var(--text-muted-cst); background: var(--bg-elevated); border: 1px solid var(--border-subtle); padding: var(--space-xxs) var(--space-xs); border-radius: var(--radius-xl); white-space: nowrap; }

/* Doctor Card Rating Badge in Search Page (patient/search.blade.php + patient/doctor.blade.php) */
.doc-search-rating {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
}

.doc-rating-badge {
    background-color: var(--accent-gold);
    color: var(--text-inverse-cst);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold);
    padding: var(--space-xxs) var(--space-xs);
    border-radius: var(--radius-sm);
    line-height: var(--line-height-tight);
}

.doc-rating-stars {
    display: flex;
    gap: var(--space-xxs);
}

.doc-rating-stars .star {
    font-size: var(--font-size-2xs);
    color: var(--neutral-line); /* empty star color */
}

.doc-rating-stars .star.filled {
    color: var(--status-warning); /* filled star color */
}

.doc-rating-stars .star.half-filled {
    background: linear-gradient(90deg, var(--status-warning) 50%, var(--neutral-line) 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.doc-reviews-count {
    font-size: var(--font-size-2xs);
    color: var(--text-muted-cst);
}

/* ── Patient Dashboard — Appointments Table (doctor_booking_requests / doctor_patient_bookings) ─────────────────────────────────── */
.dpb-group { margin-bottom: var(--space-lg); }
.dpb-group:last-child { margin-bottom: 0; }
.dpb-group-header {
    padding: var(--space-sm) var(--space-sm);
    margin-bottom: 0;
    background: var(--bg-subtle, var(--bg-surface));
    border: 1px solid var(--border-default);
    border-bottom: none;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}
.dpb-group-space-title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semi);
    color: var(--text-primary-cst);
    flex-shrink: 0;
}
.dpb-group-meta {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
}
.dpb-group-header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}
.dpb-group-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xxs);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-med);
    color: var(--text-muted-cst);
    background: var(--bg-default, var(--bg-page));
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    padding: var(--space-xxs) var(--space-sm);
    white-space: nowrap;
}
.dpb-group-meta-chip svg {
    opacity: .65;
    flex-shrink: 0;
}
.dpb-group-meta-chip--time {
    color: var(--color-primary);
    border-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}

.dpb-table-wrap { overflow-x: auto; border: 1px solid var(--border-default); border-radius: 0 0 var(--radius-md) var(--radius-md); }
.dpb-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-2xs); }
.dpb-table thead tr { border-bottom: 1px solid var(--border-default); }
.dpb-table th {
    padding: var(--space-sm) var(--space-sm);
    text-align: left;
    color: var(--text-muted-cst);
    font-weight: var(--font-weight-med);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    font-size: var(--font-size-2xs);
}
.dpb-table tbody tr { border-bottom: 1px solid var(--border-subtle); transition: background 0.15s; }
.dpb-table td { padding: var(--space-sm); color: var(--text-primary-cst); }
.dpb-td-muted { color: var(--text-muted-cst); }
.dpb-td-nowrap { white-space: nowrap; }
.dpb-td-bold { font-weight: var(--font-weight-med); }
.dpb-td-booked { font-size: var(--font-size-2xs); color: var(--text-muted-cst); }
.dpb-td-space-title { font-weight: var(--font-weight-med); }
.dpb-td-space-sub { font-size: var(--font-size-2xs); color: var(--text-muted-cst); margin-top: var(--space-xxs); }
.dpb-td-link { font-size: var(--font-size-2xs); color: var(--text-muted-cst); text-decoration: none; margin-top: var(--space-xxs); display: inline-block; }
.dpb-td-link:hover { text-decoration: underline; }

.dpb-status-badge {
    padding: var(--space-xxs) var(--space-xs);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semi);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}
.dpb-status-pending   { background: color-mix(in srgb, var(--status-pending) 12%, transparent); color: var(--status-pending); }
.dpb-status-confirmed { background: color-mix(in srgb, var(--accent-gold) 12%, transparent);  color: var(--accent-gold); }
.dpb-status-cancelled { background: color-mix(in srgb, var(--status-error) 12%, transparent);  color: var(--status-error); }
.dpb-stat-full { color: var(--status-full); }
.dpb-bookings-card { margin-top: var(--space-xs); }

.dpb-date-bar {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin: var(--space-md) 0 var(--space-sm);
    flex-wrap: wrap;
}
.dpb-nav-btn {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    color: var(--text-muted-cst);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    transition: color 0.15s, border-color 0.15s;
}
.dpb-nav-btn:hover { color: var(--text-primary-cst); border-color: var(--border-focus); }
.dpb-date-input {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    color: var(--text-primary-cst);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-med);
    font-family: inherit;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    cursor: pointer;
    outline: none;
    height: 34px;
}
.dpb-date-input:focus { border-color: var(--border-focus); }
.dpb-date-input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.6; }
.dpb-today-btn {
    padding: var(--space-xs) var(--space-sm);
    background: none;
    border: 1px solid var(--border-default);
    color: var(--text-muted-cst);
    font-size: var(--font-size-2xs);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s;
}
.dpb-today-btn:hover { color: var(--text-primary-cst); border-color: var(--border-focus); text-decoration: none; }
.dpb-today-btn.active { background: var(--accent-gold); color: var(--text-inverse-cst); border-color: var(--accent-gold); }
.dpb-count-badge { margin-left: auto; font-size: var(--font-size-2xs); color: var(--text-muted-cst); }

.dpb-limit-bar { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-bottom: var(--space-sm); }
.dpb-limit-chip {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xxs) var(--space-sm);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-2xs);
}
.dpb-limit-chip--full { border-color: color-mix(in srgb, var(--status-full) 30%, transparent); background: color-mix(in srgb, var(--status-full) 5%, transparent); }
.dpb-limit-name { color: var(--text-muted-cst); }
.dpb-limit-val  { font-weight: var(--font-weight-bold); color: var(--text-primary-cst); }
.dpb-limit-tag  { font-size: var(--font-size-2xs); font-weight: var(--font-weight-bold); text-transform: uppercase; color: var(--status-full); letter-spacing: var(--letter-spacing-wide); }

/* ── Booking Popup (partials/booking_popup.blade.php, partials/booking_request_popup.blade.php) ───────────────────────────────────── */
#booking-popup-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-modal);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm);
}
#booking-popup-overlay[data-state="hidden"] { display: none; }
#booking-popup-overlay[data-state="visible"] { display: flex; }
#popup-form[data-state="hidden"] { display: none; }
#popup-form[data-state="visible"] { display: block; }

/* booking_request_popup.blade.php: state via data-state, not inline style */
#booking-request-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-light);
    z-index: 1100;
    align-items: center;
    justify-content: center;
}
#booking-request-overlay[data-state="hidden"] { display: none; }
#booking-request-overlay[data-state="visible"] { display: flex; }
#req-popup-form[data-state="hidden"] { display: none; }
#req-popup-form[data-state="visible"] { display: block; }

.booking-popup {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    padding: var(--space-md) var(--space-sm);
    position: relative;
    gap: var(--space-md);
}

/* Wraps the scrollable body between the fixed header (.popup-title) and the
   fixed footer (.popup-submit-btn), so header/button stay visible while the
   content in between scrolls. */
.pt-popup-scroll {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

/* booking_popup.blade.php: .pt-form-grid IS the scrollable body directly (no
   .pt-popup-scroll wrapper needed) since the popup has nothing above the
   grid besides the title. Single shared scroll by default; at lg+ (see
   ccc-patient-responsive.css) each column scrolls independently instead,
   since the left column (static info/alerts) doesn't need to move just
   because the right column (form) is taller. */
.pt-form-grid {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Vertical rhythm inside each .pt-form-grid column comes from gap, not
   per-element margin — reset the direct children's own margins so gap is
   the single source of spacing between them. */
.pt-form-grid > div {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}
.pt-form-grid > div > * {
    margin-top: 0;
    margin-bottom: 0;
}

.booking-popup-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: none;
    border: none;
    color: var(--text-muted-cst);
    cursor: pointer;
    padding: var(--space-xxs);
    line-height: var(--line-height-tight);
    transition: color 0.15s;
}
.booking-popup-close:hover { color: var(--text-primary-cst); }

.popup-title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semi);
    color: var(--text-primary-cst);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    flex-shrink: 0;
}

.popup-slot-info {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    padding: var(--space-xs) var(--space-sm);
    margin-bottom: 0;
}

.popup-slot-row {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-2xs);
    padding: var(--space-xxs) 0;
}

.popup-slot-label {
    color: var(--text-muted-cst);
    font-weight: var(--font-weight-med);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    font-size: var(--font-size-2xs);
}

.popup-slot-value {
    color: var(--text-primary-cst);
    font-weight: var(--font-weight-med);
    text-align: right;
}

.popup-divider {
    border: none;
    border-top: 1px solid var(--border-subtle);
    margin: var(--space-sm) 0;
}

.popup-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xxs);
}

.popup-form-label {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semi);
    color: var(--text-muted-cst);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    margin: 0;
}

.popup-form-input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary-cst);
    padding: var(--space-xxs) var(--space-sm);
    font-size: var(--font-size-2xs);
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}
.popup-form-input:focus {
    border-color: var(--border-focus);
    background: var(--bg-elevated);
    box-shadow: 0 0 0 3px rgba(247, 247, 247, 0.05);
}
.popup-form-input::placeholder { color: var(--text-muted-cst); opacity: 0.5; }

.popup-error {
    color: var(--status-error);
    font-size: var(--font-size-2xs);
    margin-bottom: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    background: var(--status-error-bg);
    border: 1px solid var(--status-error-border);
}
.popup-error[data-state="hidden"] { display: none; }
.popup-error[data-state="visible"] { display: block; }

.popup-submit-btn {
    width: 100%;
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    color: var(--text-primary-cst);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semi);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    font-family: inherit;
    flex-shrink: 0;
    margin-top: 0;
}
#popup-submit-btn[data-state="hidden"],
#req-popup-submit-btn[data-state="hidden"] { display: none; }
.popup-submit-btn:hover:not(:disabled) { border-color: var(--text-primary-cst); }
.popup-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.popup-success {
    text-align: center;
    padding: var(--space-md) 0 var(--space-xs);
}
.popup-success[data-state="hidden"] { display: none; }
.popup-success[data-state="visible"] { display: block; }
.popup-success-icon { color: var(--accent-gold); margin-bottom: var(--space-sm); }
.popup-success-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semi); color: var(--text-primary-cst); margin: 0 0 var(--space-xs) 0; }
.popup-success-msg { font-size: var(--font-size-2xs); color: var(--text-muted-cst); margin: 0; }

.plx-popup-textarea {
    resize: vertical;
    min-height: 72px;
}

.plx-popup-file-hint {
    font-weight: var(--font-weight-reg);
    text-transform: none;
    letter-spacing: var(--letter-spacing-normal);
    font-size: var(--font-size-2xs);
    color: var(--text-primary-cst);
    /* opacity: 0.7; */
}

.plx-popup-file-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
}

.plx-popup-file-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xxs);
    width: 76px;
}

.plx-popup-file-thumb {
    width: 76px;
    height: 76px;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border-subtle);
    background: var(--bg-elevated);
    display: block;
    cursor: pointer;
}

.plx-popup-file-pdf {
    width: 76px;
    height: 76px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--status-error-border);
    background: var(--status-error-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--status-error-light);
}

.plx-popup-file-item-name {
    font-size: var(--font-size-2xs);
    color: var(--text-muted-cst);
    max-width: 76px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    line-height: var(--line-height-tight);
}

.plx-popup-file-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    background: color-mix(in srgb, var(--status-error) 12%, transparent);
    border: none;
    color: var(--status-error);
    font-size: var(--font-size-2xs);
    line-height: var(--line-height-tight);
    width: 16px;
    height: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.plx-popup-file-remove:hover { background: color-mix(in srgb, var(--status-error) 25%, transparent); }

/* ── Appointment Modal Close Buttons (my_appointments / doctor_booking_requests / doctor_patient_bookings) ─────────────────────────── */
.plx-modal-close-btn {
    background: none;
    border: none;
    padding: var(--space-xxs);
    cursor: pointer;
    color: var(--text-muted-cst);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: color 0.15s, background 0.15s;
    margin-left: auto;
}
.plx-modal-close-btn:hover { color: var(--text-primary-cst); background: var(--bg-elevated); }

.plx-modal-close-text-btn {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    color: var(--text-muted-cst);
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-2xs);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.plx-modal-close-text-btn:hover { color: var(--text-primary-cst); border-color: var(--border-focus); }

/* ── Appointment Report Tiles (my_appointments / doctor_booking_requests / doctor_patient_bookings) ───────────────────────────────── */
.plx-appt-report-grid { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xxs); }
.plx-appt-report-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 64px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    overflow: hidden;
    text-decoration: none;
    color: var(--text-muted-cst);
    background: var(--bg-elevated);
    transition: border-color 0.15s;
}
.plx-appt-report-tile:hover { border-color: var(--border-focus); }
.plx-appt-report-tile-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plx-appt-report-tile-pdf { flex-direction: column; gap: var(--space-xxs); font-size: var(--font-size-2xs); font-weight: var(--font-weight-semi); }

.plx-appt-view-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xxs);
    padding: var(--space-xxs) var(--space-sm);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-med);
    color: var(--text-muted-cst);
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.plx-appt-view-btn:hover { color: var(--text-primary-cst); border-color: var(--border-focus); }

.plx-appt-reports { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.plx-appt-report-link {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-subtle);
    background: var(--bg-elevated);
    text-decoration: none;
    color: var(--text-muted-cst);
    transition: border-color 0.15s;
    overflow: hidden;
}
.plx-appt-report-link:hover { border-color: var(--border-focus); }
.plx-appt-report-thumb { width: 44px; height: 38px; object-fit: cover; display: block; }
.plx-appt-report-pdf { width: 44px; height: 38px; font-size: var(--font-size-2xs); font-weight: var(--font-weight-semi); flex-direction: column; gap: var(--space-xxs); }

/* ── Doctor Card inside Bookings/Requests Modals ───────────────────────────────── */
.popup-doctor-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-sm);
    padding: var(--space-sm);
    margin-bottom: var(--space-xs);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.popup-doctor-card-body {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.popup-doctor-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-primary);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-md);
    flex-shrink: 0;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.popup-doctor-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.popup-doctor-avatar-initials {
    text-transform: uppercase;
}
.popup-doctor-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-xxs);
    flex: 1;
}
.popup-doctor-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary-cst);
    margin: 0;
    line-height: 1.2;
}
.popup-doctor-meta {
    font-size: var(--font-size-2xs);
    color: var(--text-muted-cst);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    line-height: 1.3;
}
.popup-doctor-meta svg {
    flex-shrink: 0;
    color: var(--color-primary);
}

/* Override scrolling behavior on requested booking form grid to prevent layout height clipping */
.pt-form-grid--request {
    overflow-y: visible !important;
}
.pt-form-grid--request > div {
    overflow-y: visible !important;
}

#popup-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
#popup-form[data-state="hidden"] {
    display: none !important;
}

/* ── Patient Badge and Alignment Styles ─────────────────────────── */
.pt-patient-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    text-transform: capitalize;
}

.pt-patient-badge-dependent {
    background: #e0e7ff;
    color: #3730a3;
}

.pt-patient-badge-self {
    background: #f3f4f6;
    color: #4b5563;
}

.pt-patient-activity-badge-wrapper {
    margin-left: auto;
}

/* ── Popup Form Layout helper classes ─────────────────────────── */
.pt-dependant-fields-container {
    margin-top: 14px;
    margin-bottom: 20px;
}

.pt-popup-form-group-nested {
    margin-top: 6px;
    margin-bottom: 12px;
}

.pt-popup-form-label-styled {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}

.pt-popup-form-input-readonly {
    background-color: #f9fafb;
    cursor: not-allowed;
}

.pt-notice-box-timing {
    margin-top: 12px;
    background: rgba(99, 102, 241, 0.05);
    border-color: rgba(99, 102, 241, 0.2);
}

.pt-notice-title-timing {
    font-weight: 600;
    color: #4f46e5;
}

.pt-notice-body-timing {
    font-size: 12px;
    color: var(--text-primary-cst);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pt-margin-top-md {
    margin-top: 16px;
}

/* ── Dashboard Upcoming Mini Card Styles ────────────────────────── */
@media (min-width: 992px) {
    .stat-card.span-2 {
        grid-column: span 2;
        padding: 16px 20px !important;
    }
}
.pt-upcoming-mini-card {
    margin-top: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
    text-decoration: none !important;
    display: block;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    width: 100%;
}
.pt-upcoming-mini-card:hover {
    border-color: #10b981;
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.1);
    transform: translateY(-1px);
}
.pt-upcoming-mini-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 8px;
    width: 100%;
}
.pt-upcoming-mini-card-spacename {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
    margin-top: 1px;
}
.pt-upcoming-mini-card-doctor {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pt-upcoming-mini-card-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pt-upcoming-mini-card-docname {
    font-weight: 600;
    font-size: 0.88rem;
    color: #0f172a;
}
.pt-upcoming-mini-card-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-transform: capitalize;
}
.pt-upcoming-mini-card-badge-self {
    background: #f3f4f6;
    color: #4b5563;
    border: 1px solid #e5e7eb;
}
.pt-upcoming-mini-card-badge-dependent {
    background: #e0e7ff;
    color: #3730a3;
    border: 1px solid #c7d2fe;
}
.pt-upcoming-mini-card-badge-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}
.pt-upcoming-mini-card-badge-dot-self {
    background-color: #9ca3af;
}
.pt-upcoming-mini-card-badge-dot-dependent {
    background-color: #4f46e5;
}
.pt-upcoming-mini-card-body {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
}
.pt-upcoming-mini-card-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    color: #475569;
    background: #ffffff;
    padding: 3px 8px;
    border-radius: 5px;
    border: 1px solid #e2e8f0;
    font-weight: 500;
}
.pt-upcoming-mini-card-pill svg {
    color: #10b981;
    flex-shrink: 0;
}

/* ── Booking & Booking Request Popups Unified Styling ───────────── */
.popup-form-group {
    margin-bottom: 16px !important;
}
.pt-dependant-fields-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 8px;
}
.pt-bfor-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    margin-top: 8px;
}
@media (max-width: 576px) {
    .pt-bfor-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.pt-bfor-card {
    position: relative;
    cursor: pointer;
    margin: 0;
}
.pt-bfor-radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.pt-bfor-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 4px;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
}
.pt-bfor-btn svg {
    color: #64748b;
    transition: all 0.2s ease;
}
.pt-bfor-card:hover .pt-bfor-btn {
    border-color: #ec4899;
    color: #ec4899;
    background: #fdf2f8;
}
.pt-bfor-card:hover .pt-bfor-btn svg {
    color: #ec4899;
}
.pt-bfor-radio:checked + .pt-bfor-btn {
    background: linear-gradient(135deg, #ec4899 0%, #d946ef 100%);
    border-color: #ec4899;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}
.pt-bfor-radio:checked + .pt-bfor-btn svg {
    color: #ffffff !important;
}
.pt-required-star {
    color: #ef4444;
}
.pt-bg-white {
    background: #ffffff !important;
}
.pt-save-checkbox-wrap {
    margin-top: 4px;
    margin-bottom: 0;
}
.pt-save-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    cursor: pointer;
    color: #475569;
}
.pt-pink-checkbox {
    accent-color: #ec4899;
}
.pt-primary-badge {
    font-size: 9px;
    font-weight: 600;
    background: rgba(236, 72, 153, 0.1);
    color: #ec4899;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}
.pt-flex-title-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}
.pt-meta-line-top {
    margin-top: 4px;
}
.pt-margin-bottom-xs {
    margin-bottom: var(--space-xs);
}
.pt-meta-border-top {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border-subtle);
    color: var(--text-primary-cst);
}
.pt-meta-icon-pink {
    color: #ec4899;
}
.pt-margin-top-zero {
    margin-top: 0;
}
.pt-margin-bottom-20 {
    margin-bottom: 20px;
}

/* ── Patient slot picker ────────────────────────────────────────────────────── */
#patient-slot-picker[data-state="hidden"] { display: none; }
.pt-patient-slot-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
}
.pt-slot-pill {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-med);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border-default);
    background: var(--bg-surface);
    color: var(--text-primary-cst);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    white-space: nowrap;
}
.pt-slot-pill:hover:not(:disabled) {
    border-color: var(--color-primary);
    background: rgba(var(--color-primary-rgb, 37,99,235), 0.06);
    color: var(--color-primary);
}
.pt-slot-pill--selected {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
}
.pt-slot-pill--booked {
    border-color: var(--border-subtle);
    background: var(--bg-elevated);
    color: var(--text-muted-cst);
    cursor: not-allowed;
    text-decoration: line-through;
    opacity: 0.6;
}