/* The sprint taskboard: rows are the items that own the work, columns are the stages their children
   pass through. Laid out after Azure DevOps — the row header holds the owning item, every cell is a
   drop target, and the vertical rules run the height of each row. */

.tb {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    font-size: 13px;
}

/* ── The bar above the board ─────────────────────────────────────────────── */

.tb-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 0 12px;
}

.tb-bar-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tb-bar-right {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-left: auto;
    text-align: right;
}

.tb-picker {
    min-width: 210px;
}

.tb-picker-person {
    min-width: 180px;
}

.tb-period {
    font-weight: 600;
    color: #0f172a;
}

.tb-workdays {
    color: #64748b;
    font-size: 12px;
}

.tb-refusal {
    margin-bottom: 8px;
    padding: 8px 12px;
    border-left: 3px solid #dc2626;
    background: #fef2f2;
    color: #991b1b;
    font-size: 12px;
}

.tb-empty {
    padding: 32px;
    color: #6b7280;
}

/* ── The matrix ──────────────────────────────────────────────────────────── */

.tb-grid {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    border-top: 1px solid #e2e8f0;
}

.tb-head,
.tb-row {
    display: grid;
    grid-template-columns: var(--tb-cols);
}

.tb-head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    border-bottom: 1px solid #cbd5e1;
}

.tb-head-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-left: 1px solid #e2e8f0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #334155;
}

.tb-head-cell:first-child {
    border-left: 0;
}

.tb-head-count {
    padding: 0 7px;
    border-radius: 10px;
    background: #e2e8f0;
    color: #334155;
    font-weight: 600;
}

.tb-collapse-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}

.tb-row {
    border-bottom: 1px solid #e2e8f0;
    align-items: stretch;
}

.tb-rowhead {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 12px;
    background: #f8fafc;
}

.tb-chevron-button {
    padding: 2px;
    border: 0;
    background: none;
    color: #64748b;
    cursor: pointer;
    line-height: 1;
}

.tb-chevron {
    display: inline-block;
    transition: transform .12s ease;
}

.tb-chevron-closed {
    transform: rotate(-90deg);
}

.tb-cell {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border-left: 1px solid #e2e8f0;
    min-height: 64px;
}

/* Says which cell will take the card, while it is in the air. */
.tb-cell-over {
    background: #eef2ff;
    box-shadow: inset 0 0 0 1px #c7d2fe;
}

/* ── Cards ───────────────────────────────────────────────────────────────── */

.tb-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #64748b;
    border-radius: 3px;
    box-shadow: 0 1px 1px rgba(15, 23, 42, .05);
    cursor: pointer;
}

.tb-card[draggable="true"] {
    cursor: grab;
}

.tb-card-owner {
    flex: 1 1 auto;
    background: #fff;
}

.tb-card-top {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.tb-card-glyph {
    display: inline-flex;
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    align-self: center;
}

.tb-card-glyph svg {
    width: 14px;
    height: 14px;
}

/* The number is the handle people quote to each other, so it reads as a link even though the whole
   card is the click target. */
.tb-card-nr {
    flex: 0 0 auto;
    color: #2563eb;
    font-weight: 600;
}

.tb-card-title {
    font-weight: 600;
    color: #0f172a;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tb-card-state {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #475569;
    font-size: 12px;
}

.tb-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.tb-card-hours {
    margin-left: auto;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

.tb-card-person {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #475569;
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tb-card-person img {
    border-radius: 50%;
    flex: 0 0 auto;
}

.tb-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tb-tag {
    padding: 1px 8px;
    border-radius: 10px;
    background: #e0e7ff;
    color: #3730a3;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* The board fills its view: every link in the DevExpress layout chain sizes to content unless told
   otherwise, and a matrix that sizes to content leaves its columns as tall as the tallest card. */
.dxbl-fl-ctrl:has(> .tb),
.dxbl-fl-item:has(.tb),
.dxbl-row:has(.tb) {
    height: 100%;
    min-height: 0;
}

/* ── Collapsed rows ──────────────────────────────────────────────────────── */

/* Folded away, a row is one line across the whole board: chevron, type, title. Keeping the card and
   its columns would defeat the point of folding it. */
.tb-row-collapsed {
    display: block;
}

.tb-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    background: #f8fafc;
    color: #0f172a;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.tb-strip:hover {
    background: #f1f5f9;
}

.tb-strip-glyph {
    display: inline-flex;
    width: 14px;
    height: 14px;
}

.tb-strip-glyph svg {
    width: 14px;
    height: 14px;
}

.tb-strip-title {
    font-weight: 500;
}

/* ── Adding a card ───────────────────────────────────────────────────────── */

/* Sits at the top of the first stage, where new work starts. Faint until the row is hovered: it is
   an affordance, not a thing to look at. */
/* The foot of the cell, whether or not anything is above it. */
.tb-add-wrap {
    margin-top: auto;
    align-self: flex-start;
}

/* Always readable: adding work is the thing most often done from a row, and a control that has to
   be found by hovering is a control people stop using. It reacts on hover like any other button. */
.tb-add {
    align-self: flex-start;
    min-width: 28px;
}


/* The inline card being typed: the same shape as a card, so a list grows in place. */
.tb-add-card {
    gap: 4px;
    border-left-color: #6366f1;
    cursor: default;
}

.tb-add-hint {
    color: #94a3b8;
    font-size: 11px;
}

/* The type menu, drawn here rather than by the button so each type keeps its own glyph and colour. */
.tb-add-menu {
    display: flex;
    flex-direction: column;
    min-width: 160px;
    padding: 4px 0;
}

.tb-add-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 0;
    background: none;
    color: #0f172a;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.tb-add-menu-item:hover {
    background: #f1f5f9;
}

/* The unparented row has no card to draw — just a heading saying whose work nobody claimed. */
.tb-loose {
    padding: 4px 0;
    color: #64748b;
    font-style: italic;
}

/* The options panel: which columns, and what a card says. */
.tb-options {
    display: flex;
    flex-direction: column;
    min-width: 200px;
    padding: 6px 0;
}

.tb-options-head {
    padding: 6px 12px 2px;
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.tb-options-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    cursor: pointer;
}

.tb-options-item:hover {
    background: #f1f5f9;
}

/* Only on cards in the unparented row, and only worth looking at when reached for. */
.tb-assign {
    align-self: flex-start;
    margin-top: 2px;
    opacity: .5;
}

.tb-card:hover .tb-assign {
    opacity: 1;
}

/* The way into an item: its number and title. The rest of the card is for dragging. */
.tb-open {
    cursor: pointer;
}

.tb-open:hover {
    text-decoration: underline;
}

.tb-card {
    cursor: default;
}

/* Tags on a card are clickable — they are how tagging happens from here. */
.tb-card-tags {
    cursor: pointer;
}

.tb-card-tags-empty {
    opacity: 0;
    transition: opacity .12s ease;
}

.tb-card:hover .tb-card-tags-empty,
.tb-card-tags-empty:focus-within {
    opacity: 1;
}

.tb-tag-add {
    padding: 1px 8px;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    color: #94a3b8;
    font-size: 11px;
}

/* The parent control is an affordance, not a field: out of the way until reached for. */
.tb-assign {
    min-width: 26px;
    padding: 0 4px;
    opacity: 0;
    transition: opacity .12s ease;
}

.tb-card:hover .tb-assign,
.tb-assign:focus-within {
    opacity: .7;
}

.tb-assign:hover {
    opacity: 1;
}