/* ==========================================================================
   3DSurgical — Date UI theme
   --------------------------------------------------------------------------
   Presentation-only restyle of the three date widgets used across the app:

     1. bootstrap-datepicker 1.9.0  (.datepicker)        — single date fields
     2. daterangepicker 3.1         (.daterangepicker)   — range filters
     3. FullCalendar 3.10.0         (.fc)                — case schedule

   This file is loaded AFTER the plugin stylesheets (which come in through
   @yield('custom_css')) and after css/style.css + css/style-custom.css, so
   every rule below wins on source order alone. No !important is used except
   where a plugin writes an inline style (documented at the single site).

   Nothing here changes markup or behaviour — no display/position/float
   changes on structural nodes, no z-index changes, no cell-size changes that
   would reflow a calendar grid.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */

:root {
    /* Brand */
    --dp-primary: #FF5500;
    --dp-primary-hover: #E64A00;
    --dp-primary-active: #CC4400;
    --dp-primary-light: #FFF3EB;
    --dp-primary-border: #FFD2BF;

    /* Neutrals */
    --dp-bg: #FFFFFF;
    --dp-surface: #FAFAFA;
    --dp-border: #E5E7EB;
    --dp-text: #1F2937;
    --dp-text-secondary: #6B7280;
    --dp-muted: #9CA3AF;
    --dp-disabled: #C7C7C7;

    /* Status */
    --dp-success: #16A34A;
    --dp-warning: #F59E0B;
    --dp-danger: #DC2626;

    /* Shape & motion */
    --dp-radius: 8px;
    --dp-radius-sm: 6px;
    --dp-shadow: 0 10px 30px rgba(0, 0, 0, .10);
    --dp-transition: all .2s ease;
    --dp-cell: 36px;
    --dp-nav: 32px;
}


/* ==========================================================================
   2. bootstrap-datepicker 1.9.0
   ========================================================================== */

/* 2.1 Popup container ----------------------------------------------------- */

.datepicker {
    padding: 12px;
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius);
    background-color: var(--dp-bg);
    box-shadow: var(--dp-shadow);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.4;
    color: var(--dp-text);
}

.datepicker-dropdown {
    padding: 12px;
}

/* Inline (non-dropdown) instances sit inside a card already — soften the lift. */
.datepicker-inline {
    width: 100%;
    box-shadow: none;
}

/* Caret tinted to the container border instead of the plugin's grey. */
.datepicker-dropdown:before {
    border-bottom-color: var(--dp-border);
}

.datepicker-dropdown:after {
    border-bottom-color: var(--dp-bg);
}

.datepicker-dropdown.datepicker-orient-bottom:before {
    border-top-color: var(--dp-border);
}

.datepicker-dropdown.datepicker-orient-bottom:after {
    border-top-color: var(--dp-bg);
}

/* Row gap gives the header and the day grid breathing room without touching
   any cell's box (margins are ignored on table cells). */
.datepicker table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0 2px;
}


/* 2.2 Header row — month/year title + prev/next ---------------------------- */
/* The plugin's first thead row is the (normally hidden) `.datepicker-title`,
   so the nav controls are targeted by class, not by row position. */

.datepicker thead .datepicker-title {
    padding-bottom: 6px;
    color: var(--dp-text);
    font-size: 13px;
    font-weight: 700;
}

.datepicker .datepicker-switch {
    width: auto;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--dp-text);
    border-radius: var(--dp-radius-sm);
    transition: var(--dp-transition);
}

.datepicker .prev,
.datepicker .next {
    width: var(--dp-nav);
    height: var(--dp-nav);
    padding: 0;
    font-size: 15px;
    line-height: 1;
    color: var(--dp-primary);
    background-color: transparent;
    border-radius: 50%;
    transition: var(--dp-transition);
}

.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover,
.datepicker tfoot tr th:hover {
    background-color: var(--dp-primary-light);
    color: var(--dp-primary);
}

.datepicker .prev:active,
.datepicker .next:active {
    background-color: var(--dp-primary-border);
}

/* Plugin hides disabled arrows outright; dim them instead so the header
   keeps its width and the control stays announced to assistive tech. */
.datepicker .prev.disabled,
.datepicker .next.disabled {
    visibility: visible;
    color: var(--dp-disabled);
    opacity: .6;
    cursor: not-allowed;
    background-color: transparent;
}


/* 2.3 Weekday names -------------------------------------------------------- */
/* The tinted strip carries the header's bottom rule. Putting the hairline
   here rather than on the nav row keeps prev/next perfectly circular. */

.datepicker table tr th.dow {
    height: 30px;
    background-color: var(--dp-surface);
    color: var(--dp-text-secondary);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-radius: 0;
    border-bottom: 1px solid var(--dp-border);
}

.datepicker table tr th.dow:first-child {
    border-radius: var(--dp-radius-sm) 0 0 var(--dp-radius-sm);
}

.datepicker table tr th.dow:last-child {
    border-radius: 0 var(--dp-radius-sm) var(--dp-radius-sm) 0;
}

/* Week-number gutter (calendarWeeks option). */
.datepicker .cw,
.datepicker table tr td.cw {
    color: var(--dp-muted);
    font-size: 11px;
    background-color: transparent;
}


/* 2.4 Day cells — base ----------------------------------------------------- */

.datepicker table tr td,
.datepicker table tr th {
    width: var(--dp-cell);
    height: var(--dp-cell);
    border: none;
    border-radius: var(--dp-radius-sm);
    color: var(--dp-text);
    font-weight: 500;
    transition: var(--dp-transition);
}

/* Leading/trailing days from the adjacent months. */
.datepicker table tr td.new,
.datepicker table tr td.old {
    color: var(--dp-muted);
    font-weight: 400;
}


/* 2.5 Day cells — hover ---------------------------------------------------- */

.datepicker table tr td.day:hover,
.datepicker table tr td.day.focused {
    background-color: var(--dp-primary-light);
    color: var(--dp-primary);
    cursor: pointer;
}


/* 2.6 Day cells — today ---------------------------------------------------- */
/* Outlined, never filled. The ring is an inset shadow rather than a real
   border so the cell box never grows and the grid columns cannot shift. */

.datepicker table tr td.today,
.datepicker table tr td.today.focus,
.datepicker table tr td.today:focus,
.datepicker table tr td.today.focused,
.datepicker table tr td.today:hover {
    background-color: var(--dp-primary-light);
    background-image: none;
    color: var(--dp-primary);
    font-weight: 700;
    border-color: transparent;
    box-shadow: inset 0 0 0 2px var(--dp-primary);
}

.datepicker table tr td.today:hover {
    background-color: var(--dp-primary-border);
}

.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today.disabled:active {
    background-color: transparent;
    color: var(--dp-disabled);
    box-shadow: inset 0 0 0 2px var(--dp-primary-border);
    opacity: .6;
}


/* 2.7 Day cells — selected / active ---------------------------------------- */

.datepicker table tr td.active,
.datepicker table tr td.active.active,
.datepicker table tr td.active.highlighted,
.datepicker table tr td.active.highlighted.active,
.datepicker table tr td.active.focus,
.datepicker table tr td.active:focus,
.datepicker table tr td.active.focused,
.datepicker table tr td.selected,
.datepicker table tr td.selected.highlighted {
    background-color: var(--dp-primary);
    background-image: none;
    border-color: var(--dp-primary);
    color: #FFFFFF;
    font-weight: 600;
    text-shadow: none;
    box-shadow: none;
}

.datepicker table tr td.active:hover,
.datepicker table tr td.active.active:hover,
.datepicker table tr td.active.highlighted:hover,
.datepicker table tr td.active.highlighted.active:hover,
.datepicker table tr td.selected:hover,
.datepicker table tr td.selected.highlighted:hover {
    background-color: var(--dp-primary-hover);
    border-color: var(--dp-primary-hover);
    color: #FFFFFF;
}

.datepicker table tr td.active:active,
.datepicker table tr td.active.active:active,
.datepicker table tr td.active.highlighted:active,
.datepicker table tr td.active.highlighted.active:active {
    background-color: var(--dp-primary-active);
    border-color: var(--dp-primary-active);
}

/* Selected + today: keep the fill, drop the outline so it reads as one state. */
.datepicker table tr td.active.today,
.datepicker table tr td.active.today:hover {
    box-shadow: none;
    color: #FFFFFF;
}


/* 2.8 Day cells — range (input-daterange / range mode) --------------------- */

.datepicker table tr td.range,
.datepicker table tr td.range:hover,
.datepicker table tr td.range.highlighted,
.datepicker table tr td.range.highlighted:hover,
.datepicker table tr td.range.today,
.datepicker table tr td.range.today:hover {
    background-color: var(--dp-primary-light);
    background-image: none;
    color: var(--dp-primary);
    border-color: transparent;
    border-radius: 0;
    box-shadow: none;
}

.datepicker table tr td.range:hover,
.datepicker table tr td.range.highlighted:hover {
    background-color: var(--dp-primary-border);
}

.datepicker table tr td.range.disabled,
.datepicker table tr td.range.disabled:hover,
.datepicker table tr td.range.disabled:active {
    background-color: transparent;
    color: var(--dp-disabled);
}


/* 2.9 Day cells — highlighted (beforeShowDay / datesDisabled) -------------- */

.datepicker table tr td.highlighted,
.datepicker table tr td.highlighted:hover,
.datepicker table tr td.highlighted.focus,
.datepicker table tr td.highlighted:focus,
.datepicker table tr td.highlighted.focused {
    background-color: var(--dp-primary-light);
    background-image: none;
    color: var(--dp-primary);
    border-color: var(--dp-primary-border);
}

.datepicker table tr td.highlighted.disabled,
.datepicker table tr td.highlighted.disabled:active {
    background-color: transparent;
    color: var(--dp-disabled);
}


/* 2.10 Day cells — disabled ------------------------------------------------ */

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover,
.datepicker table tr td.day.disabled,
.datepicker table tr td.day.disabled:hover {
    background-color: transparent;
    background-image: none;
    color: var(--dp-disabled);
    opacity: .6;
    cursor: not-allowed;
    box-shadow: none;
}


/* 2.11 Month / year / decade pickers --------------------------------------- */
/* These views have no weekday strip, so the header is separated by spacing
   on the single full-width body cell instead of a rule. */

.datepicker-months table tbody td,
.datepicker-years table tbody td,
.datepicker-decades table tbody td,
.datepicker-centuries table tbody td {
    padding-top: 8px;
}

.datepicker table tr td span {
    height: 44px;
    line-height: 44px;
    margin: 1%;
    border-radius: var(--dp-radius);
    color: var(--dp-text);
    font-weight: 500;
    transition: var(--dp-transition);
}

.datepicker table tr td span:hover,
.datepicker table tr td span.focused {
    background-color: var(--dp-primary-light);
    color: var(--dp-primary);
    cursor: pointer;
}

.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active.focus,
.datepicker table tr td span.active:focus,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover {
    background-color: var(--dp-primary);
    background-image: none;
    border-color: var(--dp-primary);
    color: #FFFFFF;
    font-weight: 600;
    text-shadow: none;
    box-shadow: none;
}

.datepicker table tr td span.active:hover {
    background-color: var(--dp-primary-hover);
    border-color: var(--dp-primary-hover);
}

.datepicker table tr td span.disabled,
.datepicker table tr td span.disabled:hover {
    background-color: transparent;
    color: var(--dp-disabled);
    opacity: .6;
    cursor: not-allowed;
}

.datepicker table tr td span.new,
.datepicker table tr td span.old {
    color: var(--dp-muted);
}


/* 2.12 Footer — Today / Clear buttons -------------------------------------- */

.datepicker tfoot tr th {
    height: 34px;
    margin-top: 4px;
    border-top: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-sm);
    color: var(--dp-primary);
    font-size: 12px;
    font-weight: 600;
    transition: var(--dp-transition);
}


/* 2.13 Attached input group ------------------------------------------------ */

.input-group.date .input-group-addon,
.input-group.date .input-group-text {
    background-color: var(--dp-surface);
    border-color: var(--dp-border);
    color: var(--dp-text-secondary);
    cursor: pointer;
    transition: var(--dp-transition);
}

.input-group.date .input-group-addon:hover,
.input-group.date .input-group-text:hover {
    background-color: var(--dp-primary-light);
    color: var(--dp-primary);
}

.input-daterange .input-group-addon,
.input-daterange .input-group-text {
    background-color: var(--dp-surface);
    border-color: var(--dp-border);
    color: var(--dp-text-secondary);
}


/* ==========================================================================
   3. daterangepicker 3.1
   ========================================================================== */

/* 3.1 Popup container ------------------------------------------------------ */

.daterangepicker {
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius);
    background-color: var(--dp-bg);
    box-shadow: var(--dp-shadow);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.4;
    color: var(--dp-text);
}

.daterangepicker:before {
    border-bottom-color: var(--dp-border);
}

.daterangepicker:after {
    border-bottom-color: var(--dp-bg);
}

.daterangepicker.drop-up:before {
    border-top-color: var(--dp-border);
}

.daterangepicker.drop-up:after {
    border-top-color: var(--dp-bg);
}

.daterangepicker .drp-calendar {
    padding: 12px;
    max-width: none;
}

.daterangepicker .calendar-table {
    border: none;
    border-radius: var(--dp-radius-sm);
    background-color: var(--dp-bg);
}


/* 3.2 Header — month/year title + prev/next -------------------------------- */

.daterangepicker .calendar-table th.month {
    width: auto;
    color: var(--dp-text);
    font-size: 14px;
    font-weight: 700;
}

.daterangepicker .calendar-table th.prev,
.daterangepicker .calendar-table th.next {
    width: var(--dp-nav);
    min-width: var(--dp-nav);
    height: var(--dp-nav);
    border-radius: 50%;
    background-color: transparent;
    transition: var(--dp-transition);
}

/* Chevrons are drawn with borders on the inner span — recolour, don't resize. */
.daterangepicker .calendar-table .prev span,
.daterangepicker .calendar-table .next span {
    border-color: var(--dp-primary);
    border-width: 0 2px 2px 0;
}

.daterangepicker .calendar-table th.prev:hover,
.daterangepicker .calendar-table th.next:hover,
.daterangepicker th.available:hover {
    background-color: var(--dp-primary-light);
}

.daterangepicker .calendar-table th.prev.disabled span,
.daterangepicker .calendar-table th.next.disabled span {
    border-color: var(--dp-disabled);
}


/* 3.3 Weekday names -------------------------------------------------------- */
/* thead row 1 is prev / month / next, row 2 is the weekday strip — which
   carries the header rule, as in the single-date picker. */

.daterangepicker .calendar-table thead tr:last-child th {
    background-color: var(--dp-surface);
    color: var(--dp-text-secondary);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-radius: 0;
    border-bottom: 1px solid var(--dp-border);
}

.daterangepicker .calendar-table thead tr:last-child th:first-child {
    border-radius: var(--dp-radius-sm) 0 0 var(--dp-radius-sm);
}

.daterangepicker .calendar-table thead tr:last-child th:last-child {
    border-radius: 0 var(--dp-radius-sm) var(--dp-radius-sm) 0;
}


/* 3.4 Day cells ------------------------------------------------------------ */

.daterangepicker td,
.daterangepicker th {
    border-radius: var(--dp-radius-sm);
    color: var(--dp-text);
    font-weight: 500;
    transition: var(--dp-transition);
}

.daterangepicker td.available:hover {
    background-color: var(--dp-primary-light);
    color: var(--dp-primary);
    border-color: transparent;
    cursor: pointer;
}

/* Today — outlined, matching the single-date picker. */
.daterangepicker td.today,
.daterangepicker td.available.today {
    background-color: var(--dp-primary-light);
    color: var(--dp-primary);
    font-weight: 700;
    box-shadow: inset 0 0 0 2px var(--dp-primary);
}

/* Days spilling in from the neighbouring month. */
.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
    background-color: var(--dp-bg);
    color: var(--dp-muted);
    font-weight: 400;
    box-shadow: none;
}

/* Range interior — square edges so the band reads as continuous. */
.daterangepicker td.in-range {
    background-color: var(--dp-primary-light);
    color: var(--dp-primary);
    border-radius: 0;
}

.daterangepicker td.in-range:hover {
    background-color: var(--dp-primary-border);
}

.daterangepicker td.start-date {
    border-radius: var(--dp-radius-sm) 0 0 var(--dp-radius-sm);
}

.daterangepicker td.end-date {
    border-radius: 0 var(--dp-radius-sm) var(--dp-radius-sm) 0;
}

.daterangepicker td.start-date.end-date {
    border-radius: var(--dp-radius-sm);
}

/* Range endpoints / selected. */
.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker td.active.today {
    background-color: var(--dp-primary);
    border-color: var(--dp-primary);
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: none;
}

.daterangepicker td.active:hover {
    background-color: var(--dp-primary-hover);
    border-color: var(--dp-primary-hover);
}

.daterangepicker td.disabled,
.daterangepicker td.disabled:hover,
.daterangepicker option.disabled {
    background-color: transparent;
    color: var(--dp-disabled);
    opacity: .6;
    cursor: not-allowed;
    text-decoration: none;
}

.daterangepicker td.week,
.daterangepicker th.week {
    color: var(--dp-muted);
    font-size: 11px;
}


/* 3.5 Month / year dropdowns and time selects ------------------------------ */

.daterangepicker select.monthselect,
.daterangepicker select.yearselect,
.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect {
    height: 30px;
    padding: 2px 6px;
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-sm);
    background-color: var(--dp-bg);
    color: var(--dp-text);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--dp-transition);
}

.daterangepicker select.monthselect:hover,
.daterangepicker select.yearselect:hover,
.daterangepicker select.hourselect:hover,
.daterangepicker select.minuteselect:hover,
.daterangepicker select.secondselect:hover,
.daterangepicker select.ampmselect:hover {
    border-color: var(--dp-primary-border);
}

.daterangepicker select.monthselect:focus,
.daterangepicker select.yearselect:focus,
.daterangepicker select.hourselect:focus,
.daterangepicker select.minuteselect:focus,
.daterangepicker select.secondselect:focus,
.daterangepicker select.ampmselect:focus {
    border-color: var(--dp-primary);
    outline: 2px solid var(--dp-primary);
    outline-offset: 2px;
}

.daterangepicker .calendar-time {
    padding-top: 8px;
    margin-top: 8px;
    border-top: 1px solid var(--dp-border);
    color: var(--dp-text-secondary);
}

.daterangepicker .calendar-time select.disabled {
    color: var(--dp-disabled);
    cursor: not-allowed;
}


/* 3.6 Predefined ranges list ----------------------------------------------- */

.daterangepicker .ranges {
    padding: 8px 0;
}

.daterangepicker .ranges li {
    margin: 0 8px 2px;
    padding: 8px 12px;
    border-radius: var(--dp-radius-sm);
    color: var(--dp-text);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--dp-transition);
}

.daterangepicker .ranges li:hover {
    background-color: var(--dp-primary-light);
    color: var(--dp-primary);
}

.daterangepicker .ranges li.active {
    background-color: var(--dp-primary);
    color: #FFFFFF;
}


/* 3.7 Footer — Apply / Cancel ---------------------------------------------- */

.daterangepicker .drp-buttons {
    padding: 10px 12px;
    border-top: 1px solid var(--dp-border);
}

.daterangepicker .drp-selected {
    color: var(--dp-text-secondary);
    font-size: 12px;
    font-weight: 500;
}

.daterangepicker .drp-buttons .btn {
    padding: 6px 14px;
    border-radius: var(--dp-radius-sm);
    font-size: 12px;
    font-weight: 600;
    transition: var(--dp-transition);
}

.daterangepicker .drp-buttons .btn.btn-primary,
.daterangepicker .drp-buttons .applyBtn {
    background-color: var(--dp-primary);
    border-color: var(--dp-primary);
    color: #FFFFFF;
}

.daterangepicker .drp-buttons .btn.btn-primary:hover,
.daterangepicker .drp-buttons .applyBtn:hover {
    background-color: var(--dp-primary-hover);
    border-color: var(--dp-primary-hover);
}

.daterangepicker .drp-buttons .btn.btn-primary:active,
.daterangepicker .drp-buttons .applyBtn:active {
    background-color: var(--dp-primary-active);
    border-color: var(--dp-primary-active);
}

.daterangepicker .drp-buttons .btn.btn-default,
.daterangepicker .drp-buttons .cancelBtn {
    background-color: var(--dp-bg);
    border-color: var(--dp-border);
    color: var(--dp-text-secondary);
}

.daterangepicker .drp-buttons .btn.btn-default:hover,
.daterangepicker .drp-buttons .cancelBtn:hover {
    background-color: var(--dp-surface);
    border-color: var(--dp-muted);
    color: var(--dp-text);
}


/* ==========================================================================
   4. FullCalendar 3.10.0 — case schedule
   ========================================================================== */

/* 4.1 Toolbar -------------------------------------------------------------- */

.fc-toolbar h2 {
    color: var(--dp-text);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -.01em;
    text-transform: none;
}

.fc-toolbar .fc-button,
.fc button.fc-button {
    height: auto;
    padding: 6px 14px;
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-sm);
    background-color: var(--dp-bg);
    background-image: none;
    color: var(--dp-text-secondary);
    font-size: 13px;
    font-weight: 600;
    text-shadow: none;
    box-shadow: none;
    transition: var(--dp-transition);
}

/* Prev/next sit either side of the title — render them as circular icons. */
.fc-toolbar .fc-prev-button,
.fc-toolbar .fc-next-button {
    width: var(--dp-nav);
    height: var(--dp-nav);
    padding: 0;
    border-color: transparent;
    border-radius: 50%;
    color: var(--dp-primary);
}

.fc-toolbar .fc-button:hover,
.fc-toolbar .fc-state-hover,
.fc .fc-button.fc-state-hover {
    background-color: var(--dp-primary-light);
    background-image: none;
    border-color: var(--dp-primary-border);
    color: var(--dp-primary);
}

.fc-toolbar .fc-prev-button:hover,
.fc-toolbar .fc-next-button:hover {
    border-color: transparent;
}

.fc-toolbar .fc-button.fc-state-active,
.fc-toolbar .fc-button.fc-state-down,
.fc .fc-state-active,
.fc .fc-state-down {
    background-color: var(--dp-primary);
    background-image: none;
    border-color: var(--dp-primary);
    color: #FFFFFF;
    box-shadow: none;
    text-shadow: none;
}

.fc-toolbar .fc-button.fc-state-disabled,
.fc .fc-state-disabled {
    background-color: transparent;
    background-image: none;
    border-color: var(--dp-border);
    color: var(--dp-disabled);
    opacity: .6;
    cursor: not-allowed;
    box-shadow: none;
}


/* 4.2 Grid, weekday header and cells --------------------------------------- */

.fc-unthemed th,
.fc-unthemed td,
.fc-unthemed thead,
.fc-unthemed tbody,
.fc-unthemed .fc-divider,
.fc-unthemed .fc-row,
.fc-unthemed .fc-popover {
    border-color: var(--dp-border);
}

.fc th.fc-widget-header,
.fc .fc-day-header {
    padding: 10px 0;
    background-color: var(--dp-surface);
    color: var(--dp-text-secondary);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.fc-unthemed td.fc-past {
    background-color: var(--dp-surface);
}

.fc-unthemed td.fc-future {
    background-color: var(--dp-bg);
}

/* Today — tinted cell, never a heavy fill. */
.fc-unthemed td.fc-today,
.fc-unthemed .fc-today {
    background-color: var(--dp-primary-light);
}

.fc-unthemed .fc-disabled-day {
    background-color: var(--dp-surface);
    opacity: .5;
}

/* Day numbers: transparent chips by default, outlined ring on today. */
.fc-ltr .fc-basic-view .fc-day-top .fc-day-number,
.fc-rtl .fc-basic-view .fc-day-top .fc-day-number {
    width: 22px;
    height: 22px;
    line-height: 22px;
    background-color: transparent;
    color: var(--dp-text-secondary);
    font-size: 11px;
    font-weight: 600;
    transition: var(--dp-transition);
}

.fc-basic-view .fc-day-top.fc-today .fc-day-number {
    background-color: var(--dp-bg);
    color: var(--dp-primary);
    box-shadow: inset 0 0 0 2px var(--dp-primary);
}

.fc-day-top.fc-other-month {
    opacity: .4;
}

.fc-basic-view .fc-day-top .fc-week-number {
    background-color: var(--dp-surface);
    color: var(--dp-muted);
}


/* 4.3 Events --------------------------------------------------------------- */
/* Per-case colours arrive as inline backgroundColor/borderColor from
   ScheduleController (priority_color_code) and must keep winning. Only the
   fallback colour and the shape are set here. */

.fc-event {
    padding: 4px 6px;
    margin: 4px 6px;
    border: none;
    border-radius: var(--dp-radius-sm);
    font-size: .8125rem;
    font-weight: 600;
}

.fc-event,
.fc-event-dot {
    background-color: var(--dp-primary);
}

.fc-event,
.fc-event:hover {
    color: #FFFFFF;
}

.fc-event.fc-selected,
.fc-event:focus {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

a.fc-more {
    color: var(--dp-primary);
    font-weight: 600;
}

.fc-unthemed .fc-popover {
    border-color: var(--dp-border);
    border-radius: var(--dp-radius);
    box-shadow: var(--dp-shadow);
}

.fc-unthemed .fc-popover .fc-header,
.fc-unthemed .fc-divider,
.fc-unthemed .fc-list-heading td {
    background-color: var(--dp-surface);
    color: var(--dp-text);
}

.fc-unthemed .fc-list-item:hover td {
    background-color: var(--dp-primary-light);
}


/* ==========================================================================
   5. Accessibility — keyboard focus
   --------------------------------------------------------------------------
   bootstrap-datepicker drives arrow-key navigation with a `.focused` class
   rather than real DOM focus, so both are covered. Outlines are used (not
   borders/shadows) so nothing in the grid reflows.
   ========================================================================== */

.datepicker table tr td.focused,
.datepicker table tr td span.focused,
.datepicker table tr td:focus,
.datepicker table tr th:focus,
.daterangepicker td:focus,
.daterangepicker th:focus,
.daterangepicker .ranges li:focus,
.fc button:focus,
.fc a[data-goto]:focus,
.fc-event:focus {
    outline: 2px solid var(--dp-primary);
    outline-offset: 2px;
}

/* Inputs that own a picker. */
input.form-control[data-provide="datepicker"]:focus,
.input-group.date .form-control:focus,
.input-daterange .form-control:focus {
    border-color: var(--dp-primary);
    box-shadow: 0 0 0 .2rem rgba(255, 85, 0, .15);
}


/* ==========================================================================
   6. Responsive
   ========================================================================== */

@media (max-width: 575.98px) {

    .datepicker,
    .datepicker-dropdown {
        padding: 10px;
    }

    .datepicker table tr td,
    .datepicker table tr th {
        width: 32px;
        height: 32px;
    }

    .datepicker table tr td span {
        height: 40px;
        line-height: 40px;
    }

    .daterangepicker .drp-calendar {
        padding: 10px;
    }

    .daterangepicker .drp-buttons {
        padding: 10px;
    }

    .daterangepicker .drp-selected {
        display: block;
        margin-bottom: 8px;
        text-align: center;
    }

    .fc-toolbar h2 {
        font-size: 1rem;
    }

    .fc-event {
        margin: 2px 3px;
        padding: 3px 4px;
        font-size: .75rem;
    }
}


/* ==========================================================================
   7. RTL
   --------------------------------------------------------------------------
   The app ships an RTL locale (css/rtl.css). Only the mirrored corner radii
   need correcting; the plugins handle direction themselves.
   ========================================================================== */

.datepicker-rtl table tr th.dow:first-child,
.daterangepicker.rtl .calendar-table thead tr:last-child th:first-child {
    border-radius: 0 var(--dp-radius-sm) var(--dp-radius-sm) 0;
}

.datepicker-rtl table tr th.dow:last-child,
.daterangepicker.rtl .calendar-table thead tr:last-child th:last-child {
    border-radius: var(--dp-radius-sm) 0 0 var(--dp-radius-sm);
}

.daterangepicker.rtl td.start-date {
    border-radius: 0 var(--dp-radius-sm) var(--dp-radius-sm) 0;
}

.daterangepicker.rtl td.end-date {
    border-radius: var(--dp-radius-sm) 0 0 var(--dp-radius-sm);
}


/* ==========================================================================
   8. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .datepicker,
    .datepicker table tr td,
    .datepicker table tr th,
    .datepicker table tr td span,
    .daterangepicker td,
    .daterangepicker th,
    .daterangepicker .ranges li,
    .daterangepicker .drp-buttons .btn,
    .fc-toolbar .fc-button,
    .fc .fc-day-number {
        transition: none;
    }
}