@import './scheduler.css';
@import './event-tooltip.css';
@import './unscheduled-tasks.css';
@import './unplanned-grid.css';
@import './map-panel.css';
@import './event-details.css';
@import './routing.css';
@import './directions.css';
@import './resource-combo.css';

/* Outer container */
.b-container[role="main"] {
    display        : flex;
    flex-direction : column;
    flex           : 1;
    gap            : 0;
}

/* Scheduler row container */
.b-container.scheduler-row {
    display        : flex;
    flex-direction : row;
    flex           : 1;
}

/* Main content area */
.b-container.main-content {
    display        : flex;
    flex-direction : row;
    flex           : 1 1 100%;

    .b-resource-header {
        height : 100%;
    }

    > .b-panel .b-toolbar {
        height                 : 5em;
        border-bottom          : 1px solid var(--b-grid-header-border-color);
        padding-inline         : 0.75em;
        gap                    : 0.5em;

        --b-toolbar-background : var(--b-grid-header-background);

        .widget-title {
            display        : flex;
            align-items    : center;
            font-size      : 1.2em;
            font-weight    : 500;
            white-space    : nowrap;
            overflow       : hidden;
            text-overflow  : ellipsis;
            min-width      : 0;
        }
    }
}

/* WebGL error — shown in the map area when WebGL is unavailable */
.webgl-error-container {
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    height          : 100%;
    padding         : 40px;
    text-align      : center;
    color           : var(--b-neutral-60, #666);
}

.webgl-error-icon {
    font-size     : 48px;
    color         : var(--b-orange, #ff9800);
    margin-bottom : 20px;
}

.webgl-error-title {
    margin      : 0 0 12px 0;
    color       : currentColor;
    font-size   : 18px;
    font-weight : 600;
}

.webgl-error-message {
    margin      : 0;
    font-size   : 14px;
    line-height : 1.6;
    max-width   : 400px;
}