/* Канбан «Производство сейчас». Только свои классы td-board-*. */
.td-board-top { margin-bottom: .5rem; }
.td-board-filters { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: flex-end; margin-bottom: .6rem; }
.td-board-filter { display: flex; flex-direction: column; gap: .15rem; font-size: .75rem; color: var(--gray-600); min-width: 9rem; }
.td-board-filter .td-dash-input { color: inherit; max-width: 14rem; }
.td-board-filter .td-dash-input option { color: var(--gray-900); }
.td-board-filter-actions { flex-direction: row; align-items: center; gap: .6rem; min-width: 0; }
.td-board-toggle { border: 1px solid rgba(128, 128, 128, .4); border-radius: .5rem; padding: .4rem .75rem; background: transparent; color: inherit; font-size: .9rem; min-height: 38px; cursor: pointer; }
.td-board-toggle.is-on { background: rgba(245, 158, 11, .18); border-color: var(--warning-600); font-weight: 600; }
.td-board-filter-actions .td-dash-link { margin-bottom: 0; min-height: 38px; }
.td-board-hint { margin: 0 0 .35rem; }

.td-board-scroll { position: relative; }
/* Тень у правого края, пока есть что прокрутить: класс ставит Alpine по положению прокрутки. */
.td-board-scroll.has-more::after { content: ''; position: absolute; top: 0; right: 0; bottom: .5rem; width: 2.5rem; pointer-events: none; background: linear-gradient(to right, transparent, rgb(250 251 249 / .95)); border-radius: 0 .65rem .65rem 0; }
.td-board-grid { display: flex; gap: .75rem; align-items: flex-start; overflow-x: auto; padding-bottom: .5rem; scroll-snap-type: x proximity; }
.td-board-col { scroll-snap-align: start; }
.td-board-col { flex: 1 0 13rem; min-width: 13rem; border: 1px solid rgba(128, 128, 128, .25); border-radius: .65rem; background: rgba(128, 128, 128, .05); }
.td-board-col-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .5rem; width: 100%; padding: .6rem .7rem; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: default; }
.td-board-col-title { font-weight: 700; }
.td-board-col-stats { font-size: .82rem; color: var(--gray-600); }
.td-board-count { font-weight: 700; color: inherit; }
.td-board-sigcount { color: var(--warning-700); font-weight: 600; }
.td-board-chevron { display: none; }
.td-board-col-body { padding: 0 .5rem .6rem; display: flex; flex-direction: column; gap: .45rem; }
.td-board-note { margin: 0 .2rem; font-size: .72rem; color: var(--gray-600); }
.td-board-group { margin: .35rem .2rem 0; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--gray-600); }
.td-board-empty { margin: .4rem .2rem; color: var(--gray-600); font-size: .85rem; }

.td-board-card { display: flex; flex-direction: column; gap: .15rem; width: 100%; text-align: left; padding: .5rem .6rem; border: 1px solid rgba(128, 128, 128, .3); border-left-width: 4px; border-radius: .5rem; background: rgba(255, 255, 255, .5); color: inherit; font: inherit; cursor: pointer; transition: box-shadow .12s ease; }
.dark .td-board-card { background: rgba(255, 255, 255, .05); }
.td-board-card:hover { box-shadow: 0 0 0 2px rgb(81 175 47 / .45); }
.td-board-card:focus-visible { outline: 2px solid var(--td-accent); outline-offset: 2px; }
.td-board-card.tone-warning { border-left-color: var(--warning-500); }
.td-board-card.tone-danger { border-left-color: var(--danger-500); }
.td-board-card-row { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.td-board-card-title { font-weight: 700; overflow-wrap: break-word; min-width: 0; }
.td-board-card-row { flex-wrap: wrap; }
.td-board-card-weight { font-size: .85rem; white-space: nowrap; }
.td-board-card-sub { font-size: .76rem; color: var(--gray-600); overflow-wrap: anywhere; }
.td-board-card-sources { font-size: .76rem; }
.td-board-money { font-weight: 600; color: inherit; }
.td-board-card-age { font-size: .7rem; color: var(--gray-600); }
.td-board-bar { display: flex; height: .4rem; border-radius: .25rem; overflow: hidden; background: rgba(128, 128, 128, .3); margin-top: .1rem; }
.td-board-bar-done { background: var(--td-accent); }
.td-board-bar-returned { background: var(--gray-400); }
.td-board-badges { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .15rem; }
.td-board-badge { display: inline-flex; align-items: center; gap: .2rem; font-size: .72rem; line-height: 1.2; padding: .1rem .4rem; border-radius: .75rem; border: 1px solid transparent; }
.td-board-badge.tone-danger { background: rgba(239, 68, 68, .14); color: var(--danger-700); border-color: rgba(239, 68, 68, .4); }
.td-board-badge.tone-warning { background: rgba(245, 158, 11, .16); color: var(--warning-800); border-color: rgba(245, 158, 11, .45); }
.td-board-badge.tone-info { background: rgba(59, 130, 246, .12); color: var(--info-700); border-color: rgba(59, 130, 246, .35); }
.td-board-badge.tone-success { background: rgb(81 175 47 / .13); color: var(--td-link); border-color: rgb(81 175 47 / .35); }
.td-board-badge.tone-gray { background: rgba(128, 128, 128, .14); color: var(--gray-700); }
.dark .td-board-badge.tone-danger { color: var(--danger-300); }
.dark .td-board-badge.tone-warning { color: var(--warning-300); }
.dark .td-board-badge.tone-info { color: var(--info-300); }
.dark .td-board-badge.tone-success { color: var(--primary-300); }
.dark .td-board-badge.tone-gray { color: var(--gray-300); }
.td-board-ico { width: .85rem; height: .85rem; flex: none; }
.td-board-more { align-self: flex-start; background: none; border: 0; color: var(--td-link); font-weight: 500; cursor: pointer; padding: .3rem .2rem; min-height: 32px; }
.td-board-open { margin-top: .15rem; }

@media (max-width: 640px) {
    .td-board-scroll.has-more::after { display: none; }
    .td-board-grid { flex-direction: column; overflow-x: visible; gap: .5rem; scroll-snap-type: none; }
    .td-board-col { flex: none; min-width: 0; width: 100%; }
    .td-board-col-head { cursor: pointer; min-height: 48px; align-items: center; padding-right: 2rem; position: relative; }
    .td-board-chevron { display: block; position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); transition: transform .15s ease; }
    .td-board-col.is-open .td-board-chevron { transform: translateY(-50%) rotate(180deg); }
    .td-board-col:not(.is-open) .td-board-col-body { display: none; }
    .td-board-filter { min-width: 0; flex: 1 1 calc(50% - .5rem); }
    .td-board-filter .td-dash-input { max-width: none; width: 100%; }
    .td-board-more, .td-board-toggle { min-height: 40px; }
}

/* Стрелки прокрутки канбана: круглые кнопки по краям, видны только когда есть куда листать. */
.td-board-arrow { position: absolute; top: 1.25rem; z-index: 2; width: 2.25rem; height: 2.25rem; border-radius: 999px; border: 1px solid var(--gray-300); background: #fff; color: var(--td-link); font-size: 1.4rem; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgb(16 32 26 / .12); }
.td-board-arrow:hover { background: var(--primary-50); }
.td-board-arrow-left { left: -.5rem; }
.td-board-arrow-right { right: -.5rem; }
.dark .td-board-arrow { background: var(--gray-900); border-color: rgb(255 255 255 / .15); }
@media (max-width: 640px) { .td-board-arrow { display: none !important; } }