.kanban-container { width: min(99vw, 1920px); margin: 0.75rem auto; padding: 0 0.75rem; }
.kanban-header { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom: .75rem; }
.kanban-board { display:flex; gap:.75rem; align-items:flex-start; overflow:auto; padding-bottom: 1.25rem; }
.kanban-board.kb-wrap { display: grid; grid-auto-rows: auto; grid-gap: .75rem; overflow-x: hidden; --kb-min-col: 280px; }
.kanban-board.kb-wrap.kb-cols-auto { grid-template-columns: repeat(auto-fit, minmax(var(--kb-min-col), 1fr)); }
.kanban-board.kb-wrap.kb-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kanban-board.kb-wrap.kb-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kanban-board.kb-wrap.kb-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kanban-board.kb-wrap.kb-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kanban-toolbar { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin:.4rem 0 .8rem; }
.kanban-toolbar--sticky { position: sticky; top: 12px; z-index: 100; background: transparent; backdrop-filter: saturate(1.2); transition: box-shadow .18s ease, background-color .18s ease; }
.kanban-toolbar--sticky.is-stuck { box-shadow: 0 10px 24px rgba(15,76,129,0.12); background: rgba(255,255,255,0.65); border-radius: 12px; }
.kanban-toolbar--sticky::after { content:''; display:block; width:100%; height:0; }
.kpi-row { display:flex; gap:.5rem; flex-wrap:wrap; width:100%; }
.filter-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:.5rem; width:100%; }
.toolbar-actions { display:flex; align-items:center; justify-content:space-between; gap:.5rem; width:100%; }
.toolbar-actions .left, .toolbar-actions .right { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.kanban-toolbar input, .kanban-toolbar select { min-height: 36px; }
.kanban-toolbar .btn { min-height: 34px; }
.icon-btn { width: 36px; height: 36px; padding: 0; border-radius: 50%; display:inline-flex; align-items:center; justify-content:center; font-size: 16px; }
.kb-col { transition: transform .12s ease, box-shadow .12s ease; }
.kb-col:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15,76,129,0.12); }
.kb-card { transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.kb-card:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(15,76,129,0.12); border-color: rgba(15,76,129,0.28); }
.kanban-toolbar input, .kanban-toolbar select { border:1px solid rgba(15,76,129,0.2); border-radius: 999px; padding:.4rem .7rem; font: inherit; }
.kpi { display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .6rem; border-radius:999px; background: rgba(15,76,129,0.06); border:1px solid rgba(15,76,129,0.18); font-weight:700; color:#0a365c; }
.toggle-chip { border:1px solid rgba(15,76,129,0.2); background:#fff; color:#0a365c; border-radius:999px; padding:.25rem .6rem; font-weight:700; cursor:pointer; }
.toggle-chip[aria-pressed="true"] { background: rgba(15,76,129,0.12); border-color: rgba(15,76,129,0.35); color:#0a365c; }
.label-chips { display:flex; gap:.35rem; flex-wrap:wrap; }
.label-chip { border:1px solid rgba(15,76,129,0.2); background:#fff; color:#0a365c; border-radius:999px; padding:.15rem .5rem; font-weight:700; cursor:pointer; }
.label-chip.is-active { background: rgba(15,76,129,0.12); border-color: rgba(15,76,129,0.35); }
.kb-col { background:#fff; border:1px solid rgba(15,76,129,0.12); border-radius:12px; min-width: 280px; max-width: 340px; padding: .65rem; box-shadow: 0 8px 20px rgba(15,76,129,0.08); }
.kb-col--pending { border-left: 4px solid #0a365c; }
.kb-col--approved { border-left: 4px solid #1c7c54; }
.kb-col--rejected { border-left: 4px solid #b13f3f; }
.kb-col.kb-col--wip-over { border-color: rgba(222,22,59,0.35); box-shadow: 0 10px 24px rgba(222,22,59,0.16); animation: kb-pulse 1.6s ease-in-out infinite; }
@keyframes kb-pulse { 0%, 100% { box-shadow: 0 10px 24px rgba(222,22,59,0.12); } 50% { box-shadow: 0 12px 30px rgba(222,22,59,0.32); } }
.kb-col__title { position: sticky; top: 0; z-index: 1; background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85)); backdrop-filter: saturate(1.2); padding:.25rem .25rem; margin: 0 0 .5rem 0; border-bottom:1px solid rgba(15,76,129,0.08); font-weight: 700; color:#0a365c; display:flex; align-items:center; justify-content:space-between; border-radius:8px; }
.kb-col--wip-over .kb-col__title .wip { background: rgba(222,22,59,0.12); border-color: rgba(222,22,59,0.45); color:#741a2a; animation: kb-badge 1.2s ease-in-out infinite; }
@keyframes kb-badge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
.kb-col__summary { display:flex; align-items:center; justify-content:space-between; font-weight:600; color:#0a365c; background:#f5f8ff; border:1px solid rgba(15,76,129,0.12); border-radius:8px; padding:.25rem .5rem; margin:.35rem 0 .5rem; font-size:.85rem; }
.kb-col--wip-over .kb-col__summary { background: rgba(222,22,59,0.06); border-color: rgba(222,22,59,0.22); color:#741a2a; }
.kb-col__title .wip { font-size:.8rem; font-weight:700; border:1px solid rgba(15,76,129,0.18); padding:.1rem .4rem; border-radius:999px; }
.kb-col__title .wip--over { background: rgba(222,22,59,0.12); color:#741a2a; border-color: rgba(222,22,59,0.35); }
.kb-col__title .wip__btn { margin-left:.35rem; border:none; background:rgba(15,76,129,0.08); border-radius:999px; padding:.1rem .45rem; cursor:pointer; }
.kb-cards { display:flex; flex-direction:column; gap:.5rem; min-height: 60px; }
.kb-card { background: #fff; border:1px solid rgba(15,76,129,0.16); border-radius:10px; padding: .55rem .6rem; box-shadow: 0 4px 12px rgba(15,76,129,0.06); cursor: grab; opacity: 0; transform: translateY(3px); transition: transform .16s ease, opacity .16s ease, box-shadow .12s ease, border-color .12s ease; }
.kb-card.is-in { opacity: 1; transform: none; }
.kb-card:active { cursor: grabbing; }
.kb-card__title { font-weight: 700; color:#0a365c; margin: 0 0 .25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-card__meta { font-size:.85rem; color:#586a82; display:flex; gap:.5rem; flex-wrap:wrap; }
.kb-drop { background: rgba(15,76,129,0.06); border: 2px dashed rgba(15,76,129,0.25); border-radius:10px; padding: .5rem; min-height: 40px; }
.kb-card__chips { display:flex; gap:.35rem; flex-wrap:wrap; margin-top:.25rem; }
.chip--tiny { font-size:.72rem; padding:.05rem .4rem; }
.kb-card__assignees { display:flex; gap:.25rem; margin-top:.25rem; }
.avatar { width: 22px; height:22px; border-radius:50%; background: rgba(15,76,129,0.12); color:#0a365c; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:.72rem; border:1px solid rgba(15,76,129,0.18); }

/* Drawer */
.kb-drawer { position: fixed; right: 0; top: 0; bottom: 0; width: min(520px, 90vw); background:#fff; border-left:1px solid rgba(15,76,129,0.2); box-shadow: -12px 0 28px rgba(15,76,129,0.12); z-index: 1300; display:none; flex-direction:column; }
.kb-drawer__header { display:flex; align-items:center; justify-content:space-between; padding: .75rem 1rem; border-bottom:1px solid rgba(15,76,129,0.12); }
.kb-drawer__body { padding: 1rem; overflow:auto; }
.kb-drawer--open { display:flex; }
.kb-backdrop { position: fixed; inset: 0; background: rgba(10,54,92,0.35); backdrop-filter: blur(2px); z-index: 1200; display: none; }
.kb-backdrop--show { display: block; }
.kb-section { margin: .75rem 0 1rem; }
.kb-section h3 { margin: 0 0 .35rem 0; font-size: 1rem; color:#0a365c; }
.kb-chips { display:flex; gap:.35rem; flex-wrap:wrap; }
.kb-chip { display:inline-flex; align-items:center; gap:.35rem; padding:.15rem .5rem; border-radius:999px; background:#fff; border:1px solid rgba(15,76,129,0.2); font-weight:700; }
.kb-chip button { border:none; background:transparent; cursor:pointer; font-weight:700; }

/* Analytics */
.kb-analytics { margin-top: 1rem; background:#fff; border:1px solid rgba(15,76,129,0.12); border-radius:12px; padding:1rem; box-shadow: 0 8px 20px rgba(15,76,129,0.06); }
.is-hidden { display:none !important; }
.kb-analytics__row { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:1rem; }
.kb-chart { background: #f9fbff; border:1px solid rgba(15,76,129,0.12); border-radius:10px; padding:.5rem; }
.kb-chart__title { font-weight:700; color:#0a365c; margin: 0 0 .25rem 0; }
.kb-actionbar { display:flex; align-items:center; gap:.5rem; margin:.5rem 0 1rem; flex-wrap:wrap; }
.kb-actionbar input, .kb-actionbar select { border:1px solid rgba(15,76,129,0.2); border-radius: 999px; padding:.35rem .6rem; }
.kb-actionbar .btn { padding:.35rem .6rem; }
/* Toolbar sizing for new selects */
.kanban-toolbar select#kbCols { min-height: 36px; }

/* Hide optional controls (views/density/wrap/auto/star) */
#kbViewName, #kbSaveView, #kbDeleteView, #kbViews, #kbDensity, #kbCols, #kbWrapCols, #kbAutoWrap, #kbStarView, #kbStarredRow {
  display: none !important;
}

/* Density toggle */
body.kb-compact .kb-card { padding: .45rem .55rem; }
body.kb-compact .kb-card__title { margin: 0 0 .15rem; font-size: .95rem; }
body.kb-compact .kb-card__meta { font-size: .8rem; gap:.35rem; }
body.kb-compact .kb-cards { gap:.35rem; }
body.kb-compact .kb-col { min-width: 260px; max-width: 320px; padding: .5rem; }
body.kb-compact .kanban-board { gap:.5rem; }
body.kb-compact .kanban-board.kb-wrap { grid-gap: .5rem; --kb-min-col: 260px; }
body.kb-compact .kanban-toolbar input, body.kb-compact .kanban-toolbar select { min-height: 32px; }

/* Dense mode */
body.kb-dense .kanban-board { gap:.4rem; }
body.kb-dense .kb-col { min-width: 240px; max-width: 300px; padding: .45rem; }
body.kb-dense .kanban-board.kb-wrap { grid-gap: .4rem; --kb-min-col: 240px; }
body.kb-dense .kb-card { padding: .4rem .45rem; }
body.kb-dense .kb-card__title { font-size: .92rem; margin: 0 0 .1rem; }
body.kb-dense .kb-card__meta { font-size: .78rem; gap:.3rem; }
body.kb-dense .kanban-toolbar input, body.kb-dense .kanban-toolbar select { min-height: 28px; }
body.kb-dense .kanban-container { padding: 0 .5rem; }

/* Assignee avatars */
.kb-card__assignees { display:flex; gap:.25rem; margin-top:.25rem; }
.avatar { width: 22px; height:22px; border-radius:50%; background: rgba(15,76,129,0.12); color:#0a365c; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:.72rem; border:1px solid rgba(15,76,129,0.18); }

/* Skeletons */
.kb-skel { position: relative; overflow: hidden; background: #eef3fa; border-radius: 8px; }
.kb-skel::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%); transform: translateX(-100%); animation: kb-shimmer 1.2s infinite; }
@keyframes kb-shimmer { 100% { transform: translateX(100%); } }
.kb-skel-card { height: 56px; margin:.4rem 0; }

/* Star button state */
#kbStarView[aria-pressed="true"] { background: rgba(255,215,0,0.18); border-color: rgba(255,215,0,0.38); color:#7a5a00; }

/* Legends and KPI active state */
.kb-legend { display:flex; gap:.35rem; flex-wrap:wrap; align-items:center; margin-top:.25rem; }
.kb-legend__item { display:inline-flex; align-items:center; gap:.35rem; padding:.15rem .5rem; border-radius:999px; border:1px solid rgba(15,76,129,.18); background:#fff; font-weight:600; color:#0a365c; }
.kb-legend__dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
.kpi.is-active { background: rgba(15,76,129,0.18); border-color: rgba(15,76,129,0.4); }
.kpi .kpi__close { margin-left:.25rem; cursor:pointer; font-weight:800; opacity:.75; }

/* Drawer tabs */
.kb-tabs { display:flex; gap:.25rem; border-bottom:1px solid rgba(15,76,129,0.12); margin: .25rem 0 .75rem; }
.kb-tab { appearance:none; border:none; background:transparent; padding:.45rem .75rem; border-radius:8px 8px 0 0; cursor:pointer; font-weight:600; color:#0a365c; }
.kb-tab[aria-selected="true"] { background:#f0f5ff; border:1px solid rgba(15,76,129,0.2); border-bottom-color: transparent; }
.kb-tabpanel { display:none; }
.kb-tabpanel[aria-hidden="false"] { display:block; }

/* Quick menu popover */
.kb-pop { position:absolute; z-index:1200; background:#fff; border:1px solid rgba(15,76,129,0.2); border-radius:10px; box-shadow: 0 8px 20px rgba(15,76,129,0.12); padding:.5rem; min-width: 220px; }
.kb-pop h4 { margin:.25rem 0; font-size:.9rem; color:#0a365c; }
.kb-pop .row { display:flex; gap:.35rem; margin:.25rem 0; }
.kb-pop .row input { flex:1; min-height: 30px; border:1px solid rgba(15,76,129,0.2); border-radius:999px; padding:.25rem .5rem; }
.kb-pop .row button { min-height:30px; }
.kb-card__more { float:right; border:none; background:transparent; font-weight:700; cursor:pointer; color:#586a82; }
.kb-pop .action { display:block; width:100%; text-align:left; padding:.35rem .5rem; border-radius:8px; border:none; background:transparent; cursor:pointer; color:#0a365c; font-weight:600; }
.kb-pop .action:hover { background:#f0f5ff; }

/* Responsive charts: prevent overflow */
.kb-chart canvas { width: 100%; height: auto; display:block; }