/*
 * Video calls screens (docs/14-video-visits, Stage 6): the Schedule week view,
 * the time-off list on My hours, and the admin "patients can't book" widget.
 *
 * Registered in AppServiceProvider through FilamentAsset; `php artisan
 * filament:assets` copies it to public/css/app/video-calls.css (CI runs that
 * on every deploy). Colours come from Filament's own variables, so the panel
 * colour (teal or indigo) and dark mode follow automatically.
 *
 * Blade views keep only per-block coordinates inline (top and height of a
 * call or of working hours, computed from the database); everything else
 * belongs here.
 */

/* ---------- Schedule (/prescriber/schedule) ---------- */

.bc-sch { display: flex; flex-direction: column; gap: 1rem; }

/* ---------- Video call card on the consultation (/prescriber/visits/...) ---------- */

.bc-call-card p { margin: 0; font-size: .875rem; }
.bc-call-card .fi-section-content { display: flex; flex-direction: column; gap: .75rem; }
.bc-call-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.bc-call-hint { color: var(--gray-500); }
.bc-call-ended { display: inline-flex; align-items: center; padding: .375rem .75rem; border-radius: .5rem; background: var(--gray-100); color: var(--gray-600); font-size: .875rem; font-weight: 500; }
.dark .bc-call-ended { background: var(--gray-800); color: var(--gray-300); }
.bc-call-late { padding: .5rem .75rem; border-radius: .5rem; background: var(--warning-50); color: var(--warning-800); }
.dark .bc-call-late { background: color-mix(in oklab, var(--warning-500) 15%, var(--gray-900)); color: var(--warning-300); }
/* After a cancelled call: tell the patient. */
.bc-call-follow { display: flex; flex-direction: column; gap: .5rem; padding: .625rem .75rem; border-radius: .5rem; background: var(--primary-50); }
.dark .bc-call-follow { background: color-mix(in oklab, var(--primary-500) 15%, var(--gray-900)); }
.bc-call-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; margin: 0; font-size: .875rem; }
.bc-call-facts dt { color: var(--gray-500); font-size: .75rem; }
.bc-call-facts dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.bc-call-facts small { display: block; font-weight: 400; color: var(--gray-500); }
.bc-call-earlier { border-top: 1px solid var(--gray-200); padding-top: .75rem; font-size: .875rem; }
.dark .bc-call-earlier { border-color: var(--gray-700); }
.bc-call-earlier h3 { margin: 0 0 .5rem; font-size: .75rem; font-weight: 600; color: var(--gray-500); }
.bc-call-earlier div { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .25rem 0; font-variant-numeric: tabular-nums; }

/* Calls open now (Stage 9): each a row above the week; the wrapper adds no gap when empty. */
.bc-sch-open { display: contents; }
.bc-sch-open-call { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1rem; border-radius: .75rem; border: 1px solid var(--primary-200); background: var(--primary-50); font-size: .875rem; color: var(--gray-950); }
.dark .bc-sch-open-call { border-color: color-mix(in oklab, var(--primary-500) 40%, transparent); background: color-mix(in oklab, var(--primary-500) 15%, var(--gray-900)); color: #fff; }
.bc-sch-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.bc-sch-range { font-size: 1rem; font-weight: 600; margin-inline: .25rem; font-variant-numeric: tabular-nums; }
.bc-sch-spacer { flex: 1; }
/* Prescriber picker on the admin Call schedule. */
.bc-sch-pick { min-width: 16rem; }
.bc-sch-hint { font-size: .875rem; color: var(--gray-500); }
.bc-sch-busy { opacity: .6; }

.bc-sch-views { display: inline-flex; gap: .25rem; padding: .25rem; border-radius: .5rem; background: var(--gray-100); }
.dark .bc-sch-views { background: var(--gray-800); }
.bc-sch-views button { padding: .25rem .75rem; border-radius: .375rem; border: 0; background: transparent; font-size: .875rem; font-weight: 500; color: var(--gray-500); cursor: pointer; }
.bc-sch-views button.is-on { background: #fff; color: var(--gray-950); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.dark .bc-sch-views button.is-on { background: var(--gray-700); color: #fff; }

.bc-sch-card { border-radius: .75rem; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .05); border: 1px solid var(--gray-200); overflow: hidden; }
.dark .bc-sch-card { background: var(--gray-900); border-color: rgb(255 255 255 / .1); }
.bc-sch-scroll { overflow: auto; max-height: 42rem; }
.bc-sch-grid { display: grid; grid-template-columns: 4rem repeat(7, minmax(7rem, 1fr)); min-width: 56rem; }

.bc-sch-head { position: sticky; top: 0; z-index: 3; padding: .5rem; text-align: center; font-size: .8125rem; color: var(--gray-500); background: #fff; border-bottom: 1px solid var(--gray-200); }
.dark .bc-sch-head { background: var(--gray-900); border-color: rgb(255 255 255 / .1); }
.bc-sch-corner { border-right: 1px solid var(--gray-200); }
.dark .bc-sch-corner { border-right-color: rgb(255 255 255 / .1); }
.bc-sch-head b { display: block; margin: .125rem auto 0; width: 2rem; height: 2rem; line-height: 2rem; font-size: 1.125rem; color: var(--gray-950); font-variant-numeric: tabular-nums; }
.dark .bc-sch-head b { color: #fff; }
.bc-sch-head.is-today b { border-radius: 9999px; background: var(--primary-600); color: #fff; }
.bc-sch-head small { display: block; font-size: .6875rem; }

.bc-sch-gutter { position: relative; border-right: 1px solid var(--gray-200); }
.dark .bc-sch-gutter { border-color: rgb(255 255 255 / .1); }
.bc-sch-gutter span { position: absolute; right: .5rem; transform: translateY(-50%); font-size: .6875rem; color: var(--gray-500); }
.bc-sch-gutter span.is-first { transform: none; top: .25rem; }

.bc-sch-day { position: relative; border-right: 1px solid var(--gray-200); background: repeating-linear-gradient(135deg, var(--gray-50) 0 8px, var(--gray-100) 8px 9px); }
.dark .bc-sch-day { border-color: rgb(255 255 255 / .1); background: repeating-linear-gradient(135deg, var(--gray-950) 0 8px, var(--gray-900) 8px 9px); }
.bc-sch-day.is-past { opacity: .55; }

/* Working hours: a light tint of the panel colour, so they read as "open" next to the stripes. */
.bc-sch-work { position: absolute; inset-inline: 0; background: color-mix(in oklab, var(--primary-50) 70%, #fff); }
.dark .bc-sch-work { background: color-mix(in oklab, var(--primary-500) 10%, var(--gray-900)); }

.bc-sch-line { position: absolute; inset-inline: 0; border-top: 1px solid var(--gray-200); }
.dark .bc-sch-line { border-color: rgb(255 255 255 / .06); }

.bc-sch-off { position: absolute; inset-inline: .25rem; z-index: 1; padding: .25rem .375rem; border: 1px dashed var(--gray-300); border-radius: .375rem; background: var(--gray-100); font-size: .6875rem; color: var(--gray-500); overflow: hidden; }
.dark .bc-sch-off { border-color: var(--gray-600); background: var(--gray-800); }

.bc-sch-call { position: absolute; inset-inline: .25rem; z-index: 2; display: flex; align-items: center; gap: .25rem; padding: 0 .375rem; border-radius: .375rem; border-left: 3px solid var(--primary-600); background: var(--primary-100); color: var(--gray-950); font-size: .75rem; line-height: 1.2; overflow: hidden; white-space: nowrap; text-decoration: none; }
.dark .bc-sch-call { background: color-mix(in oklab, var(--primary-500) 35%, var(--gray-900)); color: #fff; }
.bc-sch-call:hover { background: var(--primary-200); }
.dark .bc-sch-call:hover { background: color-mix(in oklab, var(--primary-500) 45%, var(--gray-900)); }
.bc-sch-call.is-audio { border-left-style: dashed; }
/* A call that is over (its time passed, or held / no-show): grey, still a link to the consult. */
.bc-sch-call.is-over { border-left-color: var(--gray-400); background: var(--gray-100); color: var(--gray-600); }
.dark .bc-sch-call.is-over { border-left-color: var(--gray-500); background: var(--gray-800); color: var(--gray-300); }
.bc-sch-call.is-over:hover { background: var(--gray-200); }
.dark .bc-sch-call.is-over:hover { background: var(--gray-700); }

/* "Now" on today's column: a line with a dot at the left edge, above the calls. */
.bc-sch-now { position: absolute; inset-inline: 0; z-index: 3; border-top: 2px solid var(--danger-500); pointer-events: none; }
.bc-sch-now::before { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 9999px; background: var(--danger-500); }
/* Calls in a row (5-minute calls): one block, a tick where each next call starts; click opens the List. */
.bc-sch-group { border-top: 0; border-right: 0; border-bottom: 0; align-items: flex-start; padding-top: .1875rem; font: inherit; font-size: .75rem; text-align: left; cursor: pointer; background-image: linear-gradient(90deg, transparent, rgb(255 255 255 / .35)); }
.dark .bc-sch-group { background-image: none; }
.bc-sch-tick { position: absolute; inset-inline: 0; border-top: 1px solid color-mix(in oklab, var(--primary-600) 60%, transparent); pointer-events: none; }
.dark .bc-sch-tick { border-color: color-mix(in oklab, var(--primary-300) 60%, transparent); }
.bc-sch-group.is-over .bc-sch-tick { border-color: color-mix(in oklab, var(--gray-500) 50%, transparent); }
/* The label may shrink: a narrow column ends it with "…" instead of cutting it. */
.bc-sch-call.bc-sch-group b { position: relative; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.bc-sch-call b { font-weight: 600; font-variant-numeric: tabular-nums; flex: none; }
.bc-sch-call span { overflow: hidden; text-overflow: ellipsis; }

.bc-sch-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .8125rem; color: var(--gray-500); }
.bc-sch-legend span { display: inline-flex; align-items: center; gap: .375rem; }
.bc-sch-legend i { display: inline-block; width: 1rem; height: .75rem; border-radius: .1875rem; }
.bc-sch-legend .is-work { background: color-mix(in oklab, var(--primary-50) 70%, #fff); border: 1px solid var(--gray-200); }
.dark .bc-sch-legend .is-work { background: color-mix(in oklab, var(--primary-500) 10%, var(--gray-900)); border-color: rgb(255 255 255 / .1); }
.bc-sch-legend .is-outside { background: repeating-linear-gradient(135deg, var(--gray-50) 0 3px, var(--gray-200) 3px 4px); border: 1px solid var(--gray-200); }
.dark .bc-sch-legend .is-outside { background: repeating-linear-gradient(135deg, var(--gray-950) 0 3px, var(--gray-700) 3px 4px); border-color: rgb(255 255 255 / .1); }
.bc-sch-legend .is-off { background: var(--gray-100); border: 1px dashed var(--gray-400); }
.dark .bc-sch-legend .is-off { background: var(--gray-800); border-color: var(--gray-500); }
.bc-sch-legend .is-call { background: var(--primary-100); border-left: 3px solid var(--primary-600); }
.dark .bc-sch-legend .is-call { background: color-mix(in oklab, var(--primary-500) 35%, var(--gray-900)); }
.bc-sch-legend .is-group { height: 1rem; background: repeating-linear-gradient(180deg, var(--primary-100) 0 4px, color-mix(in oklab, var(--primary-600) 35%, var(--primary-100)) 4px 5px); border-left: 3px solid var(--primary-600); }
.dark .bc-sch-legend .is-group { background: repeating-linear-gradient(180deg, color-mix(in oklab, var(--primary-500) 35%, var(--gray-900)) 0 4px, var(--primary-600) 4px 5px); }
.bc-sch-legend .is-over { background: var(--gray-100); border-left: 3px solid var(--gray-400); }
.dark .bc-sch-legend .is-over { background: var(--gray-800); border-left-color: var(--gray-500); }
.bc-sch-legend .is-now { height: 2px; border-radius: 0; background: var(--danger-500); }

.bc-sch-list { display: none; }
.bc-sch-list-day { padding: .75rem 1rem; border-bottom: 1px solid var(--gray-200); display: grid; gap: .5rem; }
.dark .bc-sch-list-day { border-color: rgb(255 255 255 / .1); }
.bc-sch-list-day:last-child { border-bottom: 0; }
.bc-sch-list-day h3 { font-size: .8125rem; font-weight: 600; }
.bc-sch-item { display: flex; gap: .75rem; align-items: center; padding: .625rem .75rem; border-radius: .5rem; background: var(--primary-50); color: inherit; text-decoration: none; }
.dark .bc-sch-item { background: color-mix(in oklab, var(--primary-500) 18%, transparent); }
.bc-sch-item.is-over { background: var(--gray-100); color: var(--gray-600); }
.dark .bc-sch-item.is-over { background: var(--gray-800); color: var(--gray-300); }
.bc-sch-item .t { min-width: 4.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.bc-sch-item small, .bc-sch-none { display: block; font-size: .8125rem; color: var(--gray-500); }

.bc-sch.is-list .bc-sch-scroll { display: none; }
.bc-sch.is-list .bc-sch-list { display: block; }

@media (max-width: 767px) {
    .bc-sch .bc-sch-scroll { display: none; }
    .bc-sch .bc-sch-list { display: block; }
    .bc-sch-views { display: none; }
}

/* ---------- Time off list (/prescriber/my-hours) ---------- */

.bc-off-empty { font-size: .875rem; color: var(--gray-500); }
.bc-off-list { list-style: none; margin: 0; padding: 0; }
.bc-off-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .75rem 0; font-size: .875rem; border-top: 1px solid var(--gray-200); }
.bc-off-row:first-child { border-top: 0; padding-top: 0; }
.dark .bc-off-row { border-color: rgb(255 255 255 / .1); }
.bc-off-when { font-variant-numeric: tabular-nums; }
.bc-off-note { color: var(--gray-500); }

/* ---------- Admin widget "Video calls: patients can't book" ---------- */

.bc-vcw-wrap { overflow-x: auto; }
.bc-vcw-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.bc-vcw-table th { text-align: start; font-weight: 500; color: var(--gray-500); padding: .5rem .75rem; border-bottom: 1px solid var(--gray-200); }
.bc-vcw-table td { padding: .625rem .75rem; border-bottom: 1px solid var(--gray-200); }
.bc-vcw-table tr:last-child td { border-bottom: 0; }
.dark .bc-vcw-table th, .dark .bc-vcw-table td { border-color: rgb(255 255 255 / .1); }
.bc-vcw-num { font-variant-numeric: tabular-nums; }

/* ---------- Booked calls on a category's page (/admin/categories/.../edit) ---------- */

.bc-cat-calls { display: grid; gap: .5rem; font-size: .875rem; }
.bc-cat-calls-head { font-weight: 500; }
.bc-cat-calls-none { color: var(--gray-500); }
.bc-cat-calls ul { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.bc-cat-calls li { display: flex; flex-wrap: wrap; gap: .25rem 1rem; padding: .5rem .75rem; border-radius: .5rem; background: var(--gray-50); font-variant-numeric: tabular-nums; }
.dark .bc-cat-calls li { background: rgb(255 255 255 / .05); }