/* === CWH FULLCALENDAR (v6) BRAND STYLING ===
   Brand-palette styling shared by every FullCalendar v6 calendar in the system
   (the dashboard jobs calendar and the facilitator schedule). Brand tokens come
   from brandingPalette.css.

   IMPORTANT: every selector below targets a FullCalendar **v6-only** class
   (.fc-button-primary, .fc-toolbar-title, .fc-col-header-cell-cushion,
   .fc-daygrid-*, .fc-timegrid-*, .fc-list-*). FullCalendar v2.9 (still used by
   other portals) uses different markup, so this file is globally auto-loaded by
   sharedCSS.php without affecting those v2.9 calendars. It also neutralises the
   legacy theme.min.css v2 `.fc-event` rule (blue !important text + left border +
   light-blue background) that otherwise leaks onto v6 events and list rows. */
@import url('brandingPalette.css');

.fc {
    font-family: var(--cwh-font-family);
}

/* --- Toolbar --------------------------------------------------------------- */
.fc .fc-toolbar-title {
    font-family: var(--cwh-font-family);
    font-weight: var(--cwh-font-bold);
    color: var(--cwh-dark-blue);
    font-size: 18px;
}

.fc .fc-button-primary {
    font-family: var(--cwh-font-family);
    font-weight: var(--cwh-font-medium);
    background: var(--cwh-white);
    color: var(--cwh-dark-blue);
    border: 1px solid var(--cwh-border);
    text-transform: capitalize;
    box-shadow: none;
}

.fc .fc-button-primary:hover {
    background: var(--cwh-light-blue);
    color: var(--cwh-dark-blue);
    border-color: var(--cwh-border);
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    background: var(--cwh-dark-blue);
    color: var(--cwh-white);
    border-color: var(--cwh-dark-blue);
}

.fc .fc-button-primary:focus,
.fc .fc-button-primary:not(:disabled).fc-button-active:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 51, 126, 0.25);
}

.fc .fc-button-primary:disabled {
    background: var(--cwh-light-grey);
    border-color: var(--cwh-light-grey);
    color: var(--cwh-white);
    opacity: 1;
}

/* --- Grid, headers, today -------------------------------------------------- */
.fc .fc-col-header-cell-cushion {
    color: var(--cwh-dark-blue);
    font-family: var(--cwh-font-family);
    font-weight: var(--cwh-font-bold);
    text-decoration: none;
}

.fc .fc-daygrid-day-number,
.fc .fc-timegrid-axis-cushion,
.fc .fc-timegrid-slot-label-cushion {
    color: var(--cwh-dark-blue);
    text-decoration: none;
}

.fc-theme-standard .fc-scrollgrid,
.fc-theme-standard td,
.fc-theme-standard th {
    border-color: var(--cwh-border);
}

.fc .fc-day-today {
    background: rgba(153, 209, 250, 0.20) !important;
}

/* Slim, button-less scrollbars on the calendar scrollers. In time-grid (Week/
   Day) views the body scrolls and FullCalendar adds matching scrollbar gutters
   to the date-header and all-day rows to keep columns aligned; on Windows the
   native chunky scrollbars (with arrow buttons) make those gutters look broken.
   Slimming them and hiding the arrow buttons keeps the alignment without the
   ugly bars. */
.fc .fc-scroller {
    scrollbar-width: thin;
    scrollbar-color: var(--cwh-light-grey) transparent;
}

.fc .fc-scroller::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.fc .fc-scroller::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

.fc .fc-scroller::-webkit-scrollbar-track {
    background: transparent;
}

.fc .fc-scroller::-webkit-scrollbar-thumb {
    background: var(--cwh-light-grey);
    border-radius: 4px;
}

.fc .fc-daygrid-more-link {
    color: var(--cwh-open-blue);
    font-weight: var(--cwh-font-medium);
}

/* --- Events: default dark text (readable on light fills, e.g. facilitator
       status colours) and remove the legacy theme's blue left-border. --------- */
.fc .fc-daygrid-block-event,
.fc .fc-timegrid-event,
.fc .fc-daygrid-dot-event {
    border-left: none !important;
}

.fc .fc-daygrid-block-event .fc-event-title,
.fc .fc-daygrid-block-event .fc-event-time,
.fc .fc-timegrid-event .fc-event-title,
.fc .fc-timegrid-event .fc-event-time,
.fc .fc-daygrid-dot-event .fc-event-title {
    color: var(--cwh-black) !important;
}

/* --- List view: white rows (the legacy theme tints them light blue), brand
       day headers, dark readable text. ----------------------------------------- */
.fc .fc-list-day-cushion {
    background: var(--cwh-border) !important;
}

.fc .fc-list-day-text,
.fc .fc-list-day-side-text {
    color: var(--cwh-dark-blue);
    font-family: var(--cwh-font-family);
    font-weight: var(--cwh-font-bold);
    text-decoration: none;
}

.fc .fc-list-event td {
    background: var(--cwh-white) !important;
    border-left: none !important;
}

.fc .fc-list-event:hover td {
    background: rgba(153, 209, 250, 0.18) !important;
}

.fc .fc-list-event-title,
.fc .fc-list-event-title a,
.fc .fc-list-event-time {
    color: var(--cwh-black) !important;
    font-family: var(--cwh-font-family);
}

/* ========================================================================== */
/* Dashboard jobs calendar specifics (welcome dashboard)                       */
/* ========================================================================== */

#dashCalendar {
    font-family: var(--cwh-font-family);
}

/* Type tabs: All / Mobile / Pharmacy */
.dash-cal-tab {
    font-family: var(--cwh-font-family);
    font-weight: var(--cwh-font-medium);
    font-size: 13px;
    color: var(--cwh-dark-blue);
    background: var(--cwh-white);
    border: 1px solid var(--cwh-border);
    padding: 6px 16px;
    line-height: 1.4;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.dash-cal-tab:hover {
    background: var(--cwh-light-blue);
    color: var(--cwh-dark-blue);
}

.dash-cal-tab.active {
    background: var(--cwh-dark-blue);
    color: var(--cwh-white);
    border-color: var(--cwh-dark-blue);
}

/* Dashboard events use solid brand-blue fills, so their text must be white
   (overrides the global dark-text default above). */
#dashCalendar .fc-daygrid-block-event .fc-event-title,
#dashCalendar .fc-daygrid-block-event .fc-event-time,
#dashCalendar .fc-timegrid-event .fc-event-title,
#dashCalendar .fc-timegrid-event .fc-event-time {
    color: var(--cwh-white) !important;
}

/* Month view: collapse each event to a slim coloured bar; the title/time text
   is hidden and the details surface via the hover tooltip (eventDidMount). */
#dashCalendar .dash-cal-monthbar {
    min-height: 7px;
    border: none;
    margin: 1px 2px;
}

#dashCalendar .dash-cal-monthbar .fc-event-main {
    padding: 0;
}

#dashCalendar .dash-cal-monthbar .fc-event-title,
#dashCalendar .dash-cal-monthbar .fc-event-time {
    display: none;
}

/* Month view, quiet days: a compact client + times bar (markup from the JS
   eventDidMount). Busy days keep the slim bar above. */
#dashCalendar .dash-cal-fullbar {
    border: none;
    border-radius: 4px;
    margin: 1px 2px;
    padding: 1px 5px;
}

#dashCalendar .dash-cal-fullbar .fc-event-main {
    padding: 0;
}

/* Detailed event body — month quiet days (client + times) and week/day views
   (client, location, address, times, services stacked); white text on the
   event's coloured fill, each line clipped to keep the block tidy. */
#dashCalendar .dash-cal-detail {
    overflow: hidden;
    line-height: 1.25;
    color: var(--cwh-white);
}

#dashCalendar .dash-cal-detail > div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#dashCalendar .dash-cal-detail-client {
    font-size: 11px;
    font-weight: var(--cwh-font-bold);
}

#dashCalendar .dash-cal-detail-loc {
    font-size: 10.5px;
    font-weight: var(--cwh-font-medium);
}

#dashCalendar .dash-cal-detail-time {
    font-size: 10.5px;
    font-weight: var(--cwh-font-medium);
}

#dashCalendar .dash-cal-detail-addr,
#dashCalendar .dash-cal-detail-svc {
    font-size: 10px;
    opacity: 0.92;
}

#dashCalendar .dash-cal-detail-svc {
    font-style: italic;
}

/* List-view variant: dark text on the white list rows, wrapping allowed (list
   rows have room) and slightly larger for readability. */
#dashCalendar .dash-cal-detail.dash-cal-detail--dark {
    color: var(--cwh-dark-blue);
}

#dashCalendar .dash-cal-detail--dark > div {
    white-space: normal;
}

#dashCalendar .dash-cal-detail--dark .dash-cal-detail-client {
    font-size: 13px;
}

#dashCalendar .dash-cal-detail--dark .dash-cal-detail-loc {
    font-size: 12px;
}

#dashCalendar .dash-cal-detail--dark .dash-cal-detail-addr,
#dashCalendar .dash-cal-detail--dark .dash-cal-detail-svc {
    color: var(--cwh-black);
    font-size: 11.5px;
    opacity: 1;
}

/* Month view: signal that clicking a day adds a job — highlight the day on
   hover and reveal a "+" badge in its top-left corner. dateClick on the dashboard
   calendar opens the Add Job flow prefilled with that date (see fluger_k.js). */
#dashCalendar .fc-daygrid-day {
    cursor: pointer;
}

#dashCalendar .fc-daygrid-day-frame {
    position: relative;
    transition: background 0.12s ease;
}

/* `dash-suppress-add` is toggled on the day frame (fluger_k.js) while the mouse
   is over an event, so the add affordance never shows alongside an open job
   tooltip. */
#dashCalendar .fc-daygrid-day:hover .fc-daygrid-day-frame:not(.dash-suppress-add) {
    background: rgba(153, 209, 250, 0.18);
}

#dashCalendar .fc-daygrid-day:hover .fc-daygrid-day-frame:not(.dash-suppress-add)::after {
    content: "+";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 28px;
    line-height: 26px;
    text-align: center;
    border-radius: 50%;
    background: var(--cwh-middle-blue);
    color: var(--cwh-white);
    font-size: 20px;
    font-weight: var(--cwh-font-bold);
    pointer-events: none;
    /* Above the day's events so the + reads clearly even over a full day. */
    z-index: 6;
}

/* Week/day views: floating highlight over the hovered time slot (positioned by
   fluger_k.js). Click-through, so the click lands on the slot and dateClick adds
   a job with that start time. */
#dashTgHover {
    position: fixed;
    z-index: 15;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(153, 209, 250, 0.18);
    border-radius: 4px;
}

#dashTgHover .dash-tg-hover-plus {
    width: 26px;
    height: 26px;
    line-height: 24px;
    text-align: center;
    border-radius: 50%;
    background: var(--cwh-middle-blue);
    color: var(--cwh-white);
    font-size: 18px;
    font-weight: var(--cwh-font-bold);
}

/* ========================================================================== */
/* Dashboard event hover tooltip (customClass 'dash-cal-tip')                  */
/* Sectioned, hierarchical layout so a busy job stays scannable.               */
/* ========================================================================== */
/* Bootstrap renders tooltips at 90% opacity by default — force fully opaque. */
.dash-cal-tip {
    --bs-tooltip-opacity: 1;
    opacity: 1;
}

.dash-cal-tip .tooltip-inner {
    max-width: 260px;
    padding: 0;
    text-align: left;
    overflow: hidden;
    border-radius: 6px;
    /* --dash-tip-bg is set per-event (the job's calendar colour) in fluger_k.js;
       falls back to brand dark-blue. */
    background: var(--dash-tip-bg, var(--cwh-dark-blue));
    font-family: var(--cwh-font-family);
}

/* Match the arrow to the event's tooltip background for top/bottom placements. */
.dash-cal-tip.bs-tooltip-top .tooltip-arrow::before,
.dash-cal-tip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: var(--dash-tip-bg, var(--cwh-dark-blue));
}

.dash-cal-tip.bs-tooltip-bottom .tooltip-arrow::before,
.dash-cal-tip.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
    border-bottom-color: var(--dash-tip-bg, var(--cwh-dark-blue));
}

.dash-cal-tip .dash-tip {
    color: var(--cwh-white);
}

/* Header: client (primary) → location → address (muted). */
.dash-cal-tip .dash-tip-head {
    padding: 8px 10px;
}

.dash-cal-tip .dash-tip-client {
    font-size: 13px;
    font-weight: var(--cwh-font-bold);
    line-height: 1.25;
}

.dash-cal-tip .dash-tip-loc {
    font-size: 12px;
    font-weight: var(--cwh-font-medium);
    margin-top: 1px;
}

.dash-cal-tip .dash-tip-addr {
    font-size: 11px;
    margin-top: 1px;
}

/* Time: its own band, divided from the header. */
.dash-cal-tip .dash-tip-time {
    padding: 5px 10px;
    font-size: 12px;
    font-weight: var(--cwh-font-bold);
    border-top: 1px solid var(--cwh-white);
}

/* Services: labelled section, one bulleted line each. */
.dash-cal-tip .dash-tip-section {
    padding: 6px 10px;
    border-top: 1px solid var(--cwh-white);
}

.dash-cal-tip .dash-tip-label {
    font-size: 9.5px;
    font-weight: var(--cwh-font-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 2px;
}

.dash-cal-tip .dash-tip-svc {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dash-cal-tip .dash-tip-svc li {
    position: relative;
    padding-left: 11px;
    font-size: 11.5px;
    line-height: 1.5;
}

.dash-cal-tip .dash-tip-svc li::before {
    content: "•";
    position: absolute;
    left: 0;
}

/* Status: small solid pill (job colour text on white). */
.dash-cal-tip .dash-tip-status {
    display: inline-block;
    margin: 8px 10px 9px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--cwh-white);
    color: var(--dash-tip-bg, var(--cwh-dark-blue));
    font-size: 10px;
    font-weight: var(--cwh-font-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ========================================================================== */
/* Corporate Access portal clinic calendar (dashboard)                         */
/* Events carry solid status-colour fills (upcoming/completed/cancelled) set   */
/* per-event in auth.js, so their block text must be white to stay readable    */
/* (overrides the global dark-text default above).                             */
/* ========================================================================== */
#corporateJobsCalendar .fc-daygrid-block-event .fc-event-title,
#corporateJobsCalendar .fc-daygrid-block-event .fc-event-time,
#corporateJobsCalendar .fc-timegrid-event .fc-event-title,
#corporateJobsCalendar .fc-timegrid-event .fc-event-time {
    color: var(--cwh-white) !important;
}