/* ============================================================ SchedulaCore ↔ app theme bridge Remaps the scheduler's hardcoded SVG colours to the app's CSS custom properties. Because the app switches theme via the attribute (which redefines --bg-*, --border, --text-*, --accent…), the scheduler recolours automatically on every theme change — no JS re-init needed. Scoped to the planner container. ============================================================ */ /* Planner card in OS fullscreen (Fullscreen API): fill the screen, square corners, opaque bg */ #planner-card:fullscreen { width: 100%; height: 100%; border-radius: 0; background: var(--bg-card); } /* Timeline background (replaces the built-in vertical gradient) */ #bookings-planner-scheduler .bg { fill: var(--bg-card); } #bookings-planner-scheduler .bg-hl { stroke: var(--border); } /* Header (months row) */ #bookings-planner-scheduler .header-bg { fill: var(--bg-subtle); } #bookings-planner-scheduler .header-text { fill: var(--text-secondary); opacity: .9; } /* Month / week / day cells + footer */ #bookings-planner-scheduler .scheduler-footer, #bookings-planner-scheduler .monthbox, #bookings-planner-scheduler .week-element, #bookings-planner-scheduler .time-element { fill: var(--bg-subtle); stroke: var(--border); } #bookings-planner-scheduler .monthbox:hover, #bookings-planner-scheduler .week-element:hover, #bookings-planner-scheduler .time-unit:hover { fill: var(--accent-soft); } #bookings-planner-scheduler .week-element-text, #bookings-planner-scheduler .time-element-text { fill: var(--text-muted); } /* Weekend shading (header Sunday cell) + "today" column highlight */ #bookings-planner-scheduler .time-element.sunday { fill: var(--bg-hover); } #bookings-planner-scheduler .time-element.today { fill: var(--accent); } #bookings-planner-scheduler .time-element-text.today { fill: #fff; } /* Grid / capacity cells */ #bookings-planner-scheduler .box-element { color: var(--border); } #bookings-planner-scheduler .box-element:hover { fill: var(--bg-hover); } #bookings-planner-scheduler .daybox-element { fill: var(--bg-card); } /* Slightly highlight the full Saturday/Sunday columns */ #bookings-planner-scheduler .daybox-element.saturday, #bookings-planner-scheduler .daybox-element.sunday { fill: var(--bg-hover); } #bookings-planner-scheduler .box-element.saturday, #bookings-planner-scheduler .box-element.sunday { fill: var(--bg-hover); } /* Resource sidebar (room rows + labels) */ #bookings-planner-scheduler .resource { fill: var(--bg-card-2); stroke: var(--border); opacity: 1; } #bookings-planner-scheduler .resource:hover { fill: var(--bg-hover); stroke: var(--border-strong); } #bookings-planner-scheduler .resource-text { fill: var(--text-primary); stroke: none; opacity: 1; } /* Room-status icons (IconsPlugin) — colour by state category */ #bookings-planner-scheduler .resource-icon { fill: var(--text-muted); } #bookings-planner-scheduler .resource-icon.sri-ok { fill: var(--ok, #16a34a); } #bookings-planner-scheduler .resource-icon.sri-warn { fill: var(--warn, #d97706); } #bookings-planner-scheduler .resource-icon.sri-err { fill: var(--danger, #dc2626); } #bookings-planner-scheduler .resource-icon.sri-info { fill: var(--accent, #5c5fe9); } /* Booking (item) icons sit on the coloured bar → white for contrast; state is read by shape. */ #bookings-planner-scheduler .item-icon { fill: rgba(255, 255, 255, 0.95); } /* Context menu (ContextMenuPlugin). The plugin appends `.dropdown-menu.schedula-ctx-menu` to and only sets left/top + display — it relies on Bootstrap's .dropdown-* styles, which this app doesn't ship. Without these rules the menu is unstyled, static-positioned (falls to the bottom of the page, invisible as a popup) and reflows the layout. NOT scoped to the scheduler container because the menu lives on . */ .schedula-ctx-menu { position: fixed; z-index: 2000; min-width: 190px; padding: 6px; margin: 0; background: var(--bg-card, #fff); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); font: 500 13px/1.25 'Inter', system-ui, sans-serif; color: var(--text-primary); } .schedula-ctx-menu .dropdown-item { display: block; padding: 8px 12px; border-radius: 6px; color: var(--text-primary); text-decoration: none; white-space: nowrap; cursor: pointer; } .schedula-ctx-menu .dropdown-item:hover { background: var(--bg-hover); } .schedula-ctx-menu .dropdown-item.disabled { opacity: .5; cursor: default; background: none; } .schedula-ctx-menu .dropdown-divider { height: 0; margin: 6px 4px; border: 0; border-top: 1px solid var(--border); } /* Occupancy event bars (EventsPlugin): softer, less opaque than the raw fill so they read as a subtle background band rather than solid blocks. Colour comes from the event's `Color` (muted green/amber/red set in BuildOccupancyEvents). */ #scheduler-events rect.event-marker { fill-opacity: 0.72; } /* Connection lines between bookings of the same group (LinksPlugin). The plugin sets no stroke colour, so we map it to the app accent; non-interactive so it never intercepts bar clicks. */ #bookings-planner-scheduler .link-wire { stroke: var(--accent); stroke-opacity: 0.75; pointer-events: none; } /* Booking highlight (HotelPopupPlugin adds .hotel-linked / .hotel-linked-active to the item + a --hotel-highlight colour). The stock rule uses `outline` on the , which the browser traces around the element's bounding box (inflated by the drop-shadow filter) → it overshoots short bars. Drive the effect from the inner bar rect (.item) instead, so it hugs the real bar width, reusing the component's own marching-ants look (stroke-dash + `dash` keyframes) for the clicked bar. --hotel-highlight is set on the and inherits down to the rect. */ #bookings-planner-scheduler .hotel-linked { outline: none; } #bookings-planner-scheduler .hotel-linked rect.item { stroke: var(--hotel-highlight, #fbbf24); stroke-width: 2; } #bookings-planner-scheduler .hotel-linked-active rect.item { stroke-width: 3; stroke-dasharray: 16; stroke-dashoffset: 32; animation: dash 1s linear infinite; }