/* Board list mode (Editors/Board): a column per stage, sharing the width and the board's full height (so the
   whole column takes a drop, empty or not), scrolling sideways only when they no longer fit at 14rem each.
   Refusals and failures are the application's own toasts, so the board has no message area.
   Colours name the Fluent --dxds-* tokens, but the portal's theme defines none of them (live run 2026-10-27), so
   the light fallbacks are what shows; the app's Dark Mode (Settings) puts .dxbl-theme-dark on <body> and gets its
   own values at the end of this file, as the other Tevarai stylesheets do. */
.tev-board {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
}

.tev-board-columns {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    padding-bottom: 0.5rem;
}

.tev-board-column {
    /* An equal share of the width, never under 14rem: five columns fit beside the expanded menu in a 1440px
       window (1207px of board, live run 2026-10-27; 16rem needed 1328px). The explicit min-width also replaces
       the flex default (min-width: auto), which would let a long card field (a customer's full name) widen
       its column. */
    flex: 1 1 0;
    min-width: 14rem;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    background: var(--dxds-color-surface-neutral-subdued-rest, #f3f4f6);
    border: 1px solid rgba(var(--midgrey), 0.35);
}

.tev-board-column-over {
    border-color: rgba(var(--primary), 0.6);
    box-shadow: 0 0 0 2px rgba(var(--primary), 0.25);
}

.tev-board-column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    font-weight: 600;
}

.tev-board-column-header-end {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Collapse / expand: a plain button, so it works on touch screens, where the card menu's right-click does not. */
.tev-board-column-toggle,
.tev-board-column-strip {
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.tev-board-column-toggle {
    display: inline-flex;
    padding: 0.15rem;
    border-radius: 4px;
    color: var(--dxds-color-content-neutral-subdued-rest, #6c757d);
}

.tev-board-column-toggle:hover,
.tev-board-column-strip:hover {
    background: rgba(var(--midgrey), 0.15);
}

.tev-board-column-toggle:focus-visible,
.tev-board-column-strip:focus-visible {
    outline: 2px solid rgba(var(--primary), 0.6);
    outline-offset: -2px;
}

.tev-board-chevron {
    width: 1rem;
    height: 1rem;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* A collapsed column: a narrow strip the full height of the board, caption running down it, count below. The
   strip is the expand button, and the column around it keeps its drop handlers. */
.tev-board-column-collapsed {
    flex: 0 0 2.75rem;
    min-width: 2.75rem;
}

.tev-board-column-strip {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-radius: 6px;
    font-weight: 600;
}

.tev-board-column-strip .tev-board-column-caption {
    writing-mode: vertical-rl;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 0;
}

.tev-board-column-count {
    min-width: 1.75rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    text-align: center;
    font-weight: 500;
    background: rgba(var(--midgrey), 0.2);
}

.tev-board-cards {
    /* Fills the column below its header and scrolls on its own, so the header stays put. */
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0 0.5rem 0.5rem;
    overflow-y: auto;
}

.tev-board-card {
    padding: 0.5rem 0.6rem;
    border-radius: 4px;
    background: var(--dxds-color-surface-neutral-default-rest, #fff);
    border: 1px solid rgba(var(--midgrey), 0.35);
    cursor: pointer;
    min-width: 0;
}

.tev-board-card-draggable {
    cursor: grab;
}

.tev-board-card:hover {
    border-color: rgba(var(--primary), 0.5);
}

.tev-board-card-title {
    font-weight: 600;
}

.tev-board-card-field {
    font-size: 0.875em;
    color: var(--dxds-color-content-neutral-subdued-rest, #6c757d);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tev-board-empty {
    padding: 0.5rem;
    text-align: center;
    color: var(--dxds-color-content-neutral-subdued-rest, #6c757d);
}

.tev-board-more {
    align-self: center;
}

/* Cards are tab stops (Enter opens one); show where the keyboard is. */
.tev-board-card:focus-visible {
    outline: 2px solid rgba(var(--primary), 0.8);
    outline-offset: 2px;
}

/* Where the board menu was opened; Card Fields' chooser is positioned under it. */
.tev-board-menu-anchor {
    position: fixed;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

/* The board menu's check for the current sort: every sort item keeps the icon slot so captions line up. */
.tev-board-menu-icon {
    width: 1rem;
    height: 1rem;
}

.tev-board-menu-check {
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The Card fields chooser, styled after DxGrid's Column Chooser. It renders in DevExpress's popup layer, outside
   .tev-board. A row per column with a divider; the shown ones carry a drag handle. */
.tev-board-chooser-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.5rem;
}

.tev-board-chooser-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.tev-board-chooser-close:hover {
    background: rgba(var(--midgrey), 0.2);
}

.tev-board-chooser-close svg {
    width: 0.9rem;
    height: 0.9rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
}

.tev-board-fields {
    display: flex;
    flex-direction: column;
}

.tev-board-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.25rem;
    border-bottom: 1px solid rgba(var(--midgrey), 0.3);
}

.tev-board-field:last-child {
    border-bottom: 0;
}

.tev-board-field-shown {
    cursor: grab;
}

.tev-board-field-droppable:hover {
    box-shadow: inset 0 2px 0 rgba(var(--primary), 0.7);
}

.tev-board-field-check {
    min-width: 0;
}

.tev-board-field-handle {
    flex: none;
    width: 1rem;
    height: 1rem;
    fill: currentColor;
    opacity: 0.7;
}

.tev-board-fields-footer {
    display: flex;
    justify-content: center;
    width: 100%;
}

.tev-board-fields-reset {
    width: 100%;
}

.tev-board-reset-icon {
    width: 1rem;
    height: 1rem;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8a5 5 0 1 0 1.5-3.5M3 2.5V5h2.5' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8a5 5 0 1 0 1.5-3.5M3 2.5V5h2.5' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Dark Mode: the light fallbacks above under the theme's white text left headers and card titles unreadable. */
.dxbl-theme-dark .tev-board-column {
    background: rgba(255, 255, 255, 0.05);
}

.dxbl-theme-dark .tev-board-card {
    background: rgba(255, 255, 255, 0.08);
}

.dxbl-theme-dark .tev-board-card-field,
.dxbl-theme-dark .tev-board-empty {
    color: rgba(255, 255, 255, 0.65);
}

.dxbl-theme-dark .tev-board-column-toggle {
    color: rgba(255, 255, 255, 0.65);
}

.dxbl-theme-dark .tev-board-column-toggle:hover,
.dxbl-theme-dark .tev-board-column-strip:hover {
    background: rgba(255, 255, 255, 0.1);
}


.dxbl-theme-dark .tev-board-chooser-close:hover {
    background: rgba(255, 255, 255, 0.1);
}