/* ============================================================
   Planning Module Styles — /MapasPlaneamento
   Colours come from the MudBlazor palette variables so the map
   follows the Furnor brand and the light/dark theme automatically.
   ============================================================ */

/* ── Filter bar accent ── */
.border-success-left {
    border-left: 3px solid var(--mud-palette-primary);
    border-radius: 2px;
}

/* ── Fixed height scroll columns (sidebar + stats) ── */
.coluna-fixa-scroll {
    max-height: calc(100vh - 200px);
    min-height: 450px;
    overflow-y: auto;
}
.coluna-fixa-scroll .mud-table-container {
    max-height: none;
}

/* ── Stats cards grid (auto-fills available width) ── */
.boxs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    gap: 16px;
    justify-items: center;
}

/* ── Mobiscroll resource column ──
   160px: wide enough that work-center codes and names are no longer truncated
   (the original 100px cut every one of them), while giving the day columns back
   the width Mobiscroll's own 12em default would have taken. */
.mbsc-timeline-resource-col {
    width: 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
}

/* ── Planning resource cell (custom render) ── */
.planning-resource {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 6px 8px;
    line-height: 1.35;
}
.planning-resource-accent {
    flex: 0 0 3px;
    border-radius: 2px;
    background: var(--mud-palette-primary);
    opacity: 0.85;
}
.planning-resource-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.planning-resource-code {
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.01em;
    color: var(--mud-palette-text-primary);
}
.planning-resource-name,
.planning-resource-section {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.planning-resource-name {
    font-size: 0.74rem;
    color: var(--mud-palette-text-secondary);
}
.planning-resource-section {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
    opacity: 0.7;
}

/* ── Operation bar on the map ──
   Mobiscroll paints the background inline from the event colour, so the text
   is white with a soft shadow to stay legible on every status colour.
   The three lines below add up to ~52px — the bar height must stay at or above
   that or the centred content gets clipped at the top. The height lives in
   EVENT_HEIGHT in mobiscroll-timeline.js; keep the two in step. */
.planning-event {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    height: 100%;
    padding: 4px 10px;
    line-height: 1.25;
    overflow: hidden;
    /* Inherit Mobiscroll's own event text colour: the theme paints the bar as a pale
       tint of the status colour, so forcing white here made the label unreadable. */
    color: inherit;
}
.planning-event-title,
.planning-event-op-name,
.planning-event-detail {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.planning-event-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.planning-event-op {
    font-weight: 600;
    opacity: 0.85;
}
.planning-event-op-name {
    font-size: 0.72rem;
    font-weight: 500;
    opacity: 0.95;
}
.planning-event-detail {
    font-size: 0.68rem;
    font-weight: 500;
    opacity: 0.82;
}

/* Month and quarter list operations inside the cell instead of drawing them to
   scale, so each one is a single-line row rather than a full-height bar. */
.planning-event--list {
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    height: auto;
    padding: 2px 8px;
}
.planning-event--list .planning-event-title {
    font-size: 0.72rem;
    flex: 0 1 auto;
}
.planning-event--list .planning-event-detail {
    font-size: 0.66rem;
    flex: 0 1 auto;
}

/* ── Event selection / search focus highlight ── */
.mbsc-schedule-event-selected {
    outline: 3px solid var(--mud-palette-primary) !important;
    z-index: 900 !important;
    border-radius: 6px;
    box-shadow: 0 0 12px rgba(var(--mud-palette-primary-rgb), 0.55);
}
.planning-event-focus {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    transform: scale(1.04);
    box-shadow: 0 6px 18px rgba(var(--mud-palette-primary-rgb), 0.75);
    z-index: 900;
}

/* ── Status legend ── */
.planning-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    padding: 2px 4px 6px;
}
.planning-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    color: var(--mud-palette-text-secondary);
}
.planning-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex: 0 0 auto;
}

/* ── Timeline grid container (search + cards + timeline) ── */
.timeline-grid-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px;
}

/* ── Horizontal scroll for search result cards ── */
.search-results-scroll {
    display: flex;
    flex-direction: row;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 4px 6px;
    scrollbar-width: thin;
    scroll-behavior: smooth;
}
.search-results-scroll::-webkit-scrollbar {
    height: 6px;
}
.search-results-scroll::-webkit-scrollbar-thumb {
    background-color: var(--mud-palette-primary);
    border-radius: 4px;
}

/* ── Search result card ── */
.result-card {
    min-width: 248px;
    max-width: 248px;
    border: 2px solid transparent;
    border-radius: 8px;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.result-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(var(--mud-palette-primary-rgb), 0.22);
}
.selected-card {
    border-color: var(--mud-palette-primary);
}

/* ── Timeline wrapper ──
   The floor is deliberately low: Mobiscroll shrinks its own columns to fit the
   container, so a high min-width only forces page-level scrolling before it gets
   the chance. */
.timeline-wrapper {
    flex: 1;
    min-width: 600px;
    height: 100%;
}

/* ── Custom hover tooltip ── */
.md-tooltip,
.md-tooltip * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.md-tooltip {
    --tooltip-accent: var(--mud-palette-primary);
    position: fixed;
    z-index: 9999;
    width: 360px;
    max-width: calc(100vw - 16px);
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.16s ease, transform 0.16s ease;
    font-family: inherit;
    font-size: 0.86rem;
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
.md-tooltip-visible {
    opacity: 1;
    transform: translateY(0);
}
.md-tooltip-header {
    position: relative;
    padding: 12px 16px 12px 20px;
    color: #fff;
    background: var(--tooltip-accent);
}
.md-tooltip-header::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: rgba(0, 0, 0, 0.22);
}
.md-tooltip-time {
    display: block;
    font-size: 0.74rem;
    letter-spacing: 0.02em;
    opacity: 0.92;
    margin-bottom: 3px;
}
.md-tooltip-header-title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.md-tooltip-status {
    display: inline-block;
    margin-top: 8px;
    padding: 2px 10px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
}
.md-tooltip-info {
    padding: 10px 16px 12px;
}
.md-tooltip-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 5px 0;
    border-bottom: 1px solid var(--mud-palette-divider);
}
.md-tooltip-row:last-child {
    border-bottom: none;
}
.md-tooltip-row .label {
    flex: 0 0 auto;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}
.md-tooltip-row .value {
    text-align: right;
    font-weight: 500;
    overflow-wrap: anywhere;
}

/* ── Late tasks list in stats panel ── */
.late-tasks-list {
    max-height: 200px;
    overflow-y: auto;
}