@import '_content/Sillium.Core.Components/Sillium.Core.Components.ujn225dupp.bundle.scp.css';

/* /Components/Pages/ResourcePlan.razor.rz.scp.css */
/*
 * Page-scoped styles for ResourcePlan.razor.
 *
 * Blazor scopes the selectors below to this component only. The `::deep`
 * combinator lets us reach into the descendants rendered by child components
 * (here: Sillium.Core.Components.GanttChart) without affecting any other
 * consumer of those components.
 *
 * NOTE: Blazor scoped CSS needs an actual HTML element in the .razor file
 * to attach the scope attribute to. Top-level Blazor components (Container,
 * Card, GanttChart) do NOT receive the scope attribute. That's why the
 * .razor wraps the GanttChart in <div class="ep-resource-plan-gantt contents">
 * — it's layout-neutral (display: contents) but gives us a scope anchor.
 */

/*
 * RFA slot bars must stay two-line even when the bar is narrow.
 * Core's GanttChart hides the secondary line via display:none at
 * .gantt-bar-width-sm / .gantt-bar-width-xs (GanttChart.razor.css:644-647).
 *
 * For RFA slots that looks bad — the user wants the type + status visible
 * on every bar, regardless of width. Appointment and Job bars are not
 * affected because we don't set their SecondaryText (nothing to render).
 */
.ep-resource-plan-gantt[b-laxm0ivuyl]  .gantt-bar-width-sm .gantt-bar-content-main .gantt-bar-secondary-text,
.ep-resource-plan-gantt[b-laxm0ivuyl]  .gantt-bar-width-xs .gantt-bar-content-main .gantt-bar-secondary-text {
    display: block !important;
}

/*
 * At .gantt-bar-width-xs Core shrinks the primary text to 0.625rem (10 px),
 * which makes the two-line RFA bars look squashed. Keep the normal 12 px.
 */
.ep-resource-plan-gantt[b-laxm0ivuyl]  .gantt-bar-width-xs .gantt-bar-content-main .gantt-bar-primary-text {
    font-size: 0.75rem !important;
}

/*
 * Cross-section hover highlight: when hovering a bar, all bars in the same
 * appointment group (AppointmentId or LinkedToAppointmentId match) receive
 * the ep-bar-highlighted class via BarCssClassSelector. The outline + glow
 * makes the relationship visible across the Termine and Ressourcen sections.
 *
 * z-index: 5 sits just below the direct hover bar (z-index: 6 via .gantt-bar:hover)
 * so highlighted bars don't overlap the focused bar but sit above unrelated bars.
 */
.ep-resource-plan-gantt[b-laxm0ivuyl]  .gantt-bar.ep-bar-highlighted {
    outline: 2px solid var(--ui-color-primary);
    outline-offset: 1px;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-color-primary) 22%, transparent);
    z-index: 5;
}