/* ─────────────────────────────────── */
/* FEATURE: Tools                      */
/* ─────────────────────────────────── */

/* ─────────────────────────────────── */
/* BLOCK: Tool stakeholders field      */
/* ─────────────────────────────────── */

.tool-stakeholders {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* ─────────────────────────────────── */
/* ─────────────────────────────────── */
/* BLOCK: Planner table                */
/* ─────────────────────────────────── */

.planner-table-wrap {
    width: 100%;
}

.planner-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.planner-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-xs);
}

.planner-table th,
.planner-table td {
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-border);
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
}

.planner-table thead th {
    background-color: var(--color-grey-100);
    color: var(--color-grey-500);
    font-weight: var(--weight-semibold);
}

.planner-table__label {
    text-align: left !important;
    min-width: 10rem;
    max-width: 10rem;
    width: 10rem;
    overflow: hidden;
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: var(--color-surface);
}

.planner-table thead .planner-table__label {
    background-color: var(--color-grey-100);
    z-index: 2;
}

.planner-table tbody .planner-table__label {
    background-color: var(--color-white);
}

.planner-table__name {
    display: block;
    font-weight: var(--weight-medium);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.planner-table__location {
    display: block;
    font-size: var(--font-xs);
    color: var(--color-grey-400);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.planner-table__hour {
    min-width: 3rem;
    width: 3rem;
    white-space: nowrap;
}

.planner-table__day {
    display: block;
    font-size: var(--font-xs);
    color: var(--color-grey-400);
}