/*
 * Mobiscroll accent, tied to the app's own palette.
 *
 * The bundled ios theme ships a fixed blue, which showed through on the month title, the "Today"
 * control and the selected-day pill — the only blue on otherwise green pages.
 *
 * The accent is bound to --mud-palette-primary rather than to a literal, because the primary is
 * per-tenant branding (MainLayout reads it from the company record). Hardcoding a green here would
 * look right for Ramil and wrong for the next clone.
 */

.mbsc-ios {
    --mbsc-ios-accent: var(--mud-palette-primary);
}

.mbsc-ios.mbsc-dark,
.mbsc-ios .mbsc-dark {
    --mbsc-ios-dark-accent: var(--mud-palette-primary);
}

/* A few spots in the ios theme paint the blue directly instead of going through the accent
   variable, so they need pointing at the palette as well. */
.mbsc-ios.mbsc-calendar-button.mbsc-button,
.mbsc-ios.mbsc-calendar-title,
.mbsc-ios .mbsc-calendar-title {
    color: var(--mud-palette-primary);
}

.mbsc-ios.mbsc-calendar-today,
.mbsc-ios .mbsc-calendar-today {
    color: var(--mud-palette-primary);
}

.mbsc-ios.mbsc-selected .mbsc-calendar-cell-text,
.mbsc-ios .mbsc-selected .mbsc-calendar-cell-text {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: #fff;
}

/* The timeline's current-day pill is painted on ::after, not on the element, so a background rule
   on the element itself silently does nothing — this is the one that was left blue. */
.mbsc-ios .mbsc-timeline-header-active::after,
.mbsc-ios.mbsc-timeline-header-active::after {
    background: var(--mud-palette-primary);
}

/* Week-of-year gutter. A bare number in the first column reads as another day number, which is
   exactly the confusion reported — so it gets an "S" prefix and a tinted column of its own. */
.mbsc-ios .mbsc-calendar-week-nr,
.mbsc-ios .mbsc-timeline-week-nr {
    color: var(--mud-palette-primary);
    font-weight: 700;
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

/* The "S" goes on the column header only. Repeating it per row wraps: the gutter is 24px and each
   cell already carries the number plus a screen-reader label. */
.mbsc-ios .mbsc-calendar-week-day.mbsc-calendar-week-nr::before {
    content: "Sem.";
    font-size: 0.7em;
    opacity: 0.75;
}

.mbsc-ios .mbsc-calendar-week-nr {
    min-width: 2.6em;
}

/* ── Gantt: the technician column ──────────────────────────────────────────────
   The row labels are the axis, not data, so the column is tinted to read as a
   header strip and the names are bold. Mobiscroll leaves the top-left cell empty,
   which makes the reader infer what the rows are — it gets a title instead. */
.mbsc-ios .mbsc-timeline-resource-col {
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
}

.mbsc-ios .mbsc-timeline-resource-header::before {
    content: "Técnico";
    font-weight: 700;
    color: var(--mud-palette-primary);
    padding-left: 0.85em;
}

.mbsc-ios .mbsc-timeline-resource-header {
    display: flex;
    align-items: center;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.mbsc-ios .mbsc-timeline-resource-title {
    font-weight: 700;
}