/* Kohezion Kanban - Enterprise UI (B1 Inline Grid Expand redesign) */

/* 0) A11y */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* 1) Tokens (Figma-aligned) */
:root{
  --bg-top:#F8FDFF;
  --border:#DEE0E3;
  --text:#212121;

  --radius:5px;
  --shadow-1:0 1px 2px rgba(0,0,0,0.05);
  --shadow-2:0 6px 18px rgba(0,0,0,0.08);
  --shadow-pop:0 8px 28px rgba(0,0,0,0.14), 0 2px 10px rgba(0,0,0,0.06);

  --blue-50:#EBF2F8;
  --blue-100:#C3E2FF;
  --blue-600:#0D69D4;
  --blue-700:#0B3764;

  --green:#0C3810;
  --red:#C54600;

  --muted:#5f6368;
  --control-h:34px;
}

/* 2) Outer Layout */
.kanban-wrap{ overflow-x:auto; overflow-y:hidden; padding:12px; }
.kanban-board-host{ display:block; }

/* Step 12d: Font family scoped to kanban component */
.kanban-component{
  font-family: Inter, Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

/* 3) Toolbar (Step 12a: wrapped container) */
.kz-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px;
  padding:8px 12px; background:#fff; border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-1);
}
.kz-left,.kz-right{ display:flex; align-items:center; gap:10px; flex-wrap:nowrap; }

/* Base bar styles (standalone) */
.kanban-groupbar,.kanban-searchbar,.kanban-sortbar{
  background:var(--bg-top); border:1px solid var(--border); border-radius:var(--radius);
  padding:6px 8px; height:var(--control-h); display:flex; align-items:center; gap:8px; box-shadow:var(--shadow-1);
}
/* Step 12a: Remove inner bar borders/shadows when inside toolbar wrapper */
.kz-toolbar .kanban-groupbar,
.kz-toolbar .kanban-searchbar,
.kz-toolbar .kanban-sortbar,
.kz-toolbar .kanban-expand-bar,
.kz-toolbar .kz-search-popout{
  border:none; box-shadow:none; background:transparent;
}

/* Step 12e: Toolbar labels */
.kanban-groupbar .label,.kanban-sortbar .label,.kanban-expand-bar .label{
  font-size:12px; font-weight:500; color:var(--muted); white-space:nowrap;
}
.kanban-groupbar select,.kanban-sortbar select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235f6368'/%3E%3C/svg%3E") no-repeat right 8px center;
  color:var(--text);
  border:1px solid var(--border); border-radius:var(--radius);
  padding:.28rem 24px .28rem .5rem; height:26px; cursor:pointer;
}

/* Search popout */
.kz-search-popout{ position:relative; display:inline-flex; align-items:center; }
.kz-search-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--control-h); height:var(--control-h); border-radius:var(--radius);
  background:#fff; border:1px solid var(--border); cursor:pointer;
  color:var(--muted); transition:background .12s ease, border-color .12s ease, color .12s ease; padding:0;
}
.kz-search-toggle svg{ width:16px; height:16px; display:block; pointer-events:none; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.kz-search-toggle:hover{ background:var(--blue-50); border-color:#C3E2FF; color:#0D69D4; }
.kz-search-toggle.is-active{
  background:#C3E2FF; border-color:#ABCEEB; color:#0B3764;
}
.kz-search-dropdown{
  position:absolute; top:calc(100% + 6px); left:0; z-index:20;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-pop); padding:8px; display:flex; align-items:center; gap:6px;
  white-space:nowrap;
}
.kz-search-dropdown.hidden{ display:none; }
.kz-search-dropdown input{
  border:1px solid var(--border); border-radius:var(--radius); outline:0;
  background:#fff; width:220px; font:inherit; color:var(--text);
  padding:4px 8px; height:30px; box-sizing:border-box; font-size:13px;
}
.kz-search-dropdown input:focus{ border-color:#249EF5; box-shadow:0 0 0 2px rgba(36,158,245,0.15); }
.kz-search-close{
  background:none; border:none; cursor:pointer; color:var(--muted);
  font-size:18px; padding:0 4px; line-height:1;
}
.kz-search-close:hover{ color:var(--text); }

/* Sort segment (Step 12b: Figma-aligned colors) */
.kanban-sortbar .seg{ display:inline-flex; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:#fff; }
.kanban-sortbar .seg button{
  background:#fff; border:0; padding:.28rem .6rem; height:26px; cursor:pointer; color:var(--muted);
  transition:background .12s ease, color .12s ease, box-shadow .12s ease;
}
.kanban-sortbar .seg button:hover{ background:#F4F9FE; }

/* Explicit ASC/DESC states */
.kanban-sortbar .seg .kz-dir-asc,
.kanban-sortbar .seg .kz-dir-desc{
  background:#fff; color:var(--muted);
}
.kanban-sortbar .seg .kz-dir-asc[aria-pressed="true"],
.kanban-sortbar .seg .kz-dir-desc[aria-pressed="true"]{
  background:#C3E2FF; color:#0B3764; box-shadow:inset 0 0 0 1px #ABCEEB;
}
.kanban-sortbar .seg .kz-dir-asc[aria-pressed="true"]:hover,
.kanban-sortbar .seg .kz-dir-desc[aria-pressed="true"]:hover{ background:#C3E2FF; }
.kanban-sortbar .seg .kz-dir-asc[aria-pressed="false"]:hover,
.kanban-sortbar .seg .kz-dir-desc[aria-pressed="false"]:hover{ background:#F4F9FE; }

.kanban-sortbar.dir-asc .kz-sort-field,
.kanban-sortbar.dir-desc .kz-sort-field{
  background-color:#EBF2F8; border-color:#C3E2FF;
}
.kz-sort-field{ background-color:#fff !important; }

/* Kebab menu (Step 12c: Figma accent colors) */
.kz-more-wrap{ position:relative; display:inline-block; }
.kz-more-toggle{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  width:var(--control-h); height:var(--control-h); display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
}
.kz-more-toggle.has-changes::after{
  content:''; position:absolute; top:6px; right:6px; width:6px; height:6px; background:#249EF5; border-radius:50%;
}
.kz-menu{
  position:absolute; right:0; top:calc(var(--control-h) + 4px); background:#fff; border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-pop); min-width:220px; padding:6px; z-index:20;
}
.kz-menu.hidden{ display:none; }
.kz-menu-item{
  display:flex; align-items:center; gap:8px; width:100%; background:transparent; border:0; padding:.45rem .55rem;
  border-radius:var(--radius); cursor:pointer; text-align:left;
}
.kz-menu-item:hover{ background:var(--blue-50); }
.kz-menu-item .chk{ width:14px; height:14px; border:1px solid var(--border); border-radius:3px; display:inline-block; }
.kz-menu-item.checked .chk{ background:#249EF5; border-color:#249EF5; }
.kz-menu-item.disabled{ opacity:.55; cursor:default; }

/* Expand/Collapse All toolbar bar (Step 9n) */
.kanban-expand-bar{
  background:var(--bg-top); border:1px solid var(--border); border-radius:var(--radius);
  padding:6px 8px; height:var(--control-h); display:flex; align-items:center; gap:8px;
  box-shadow:var(--shadow-1);
}
.kanban-expand-bar .label{ font-size:13px; font-weight:600; color:var(--muted); white-space:nowrap; }
.kanban-expand-bar button{
  font-size:12px; font-weight:600; padding:5px 14px; border-radius:5px;
  border:1px solid var(--border); background:#fff; cursor:pointer; color:var(--muted);
  transition:background-color 120ms ease, border-color 120ms ease, color 120ms ease; display:inline-flex; align-items:center; gap:4px;
}
.kanban-expand-bar button:hover{
  background:#F4F9FE; border-color:#249EF5; color:#249EF5;
}
.kanban-expand-bar button.is-expanded{
  background:#C3E2FF; color:#0B3764; border-color:#ABCEEB;
}
.kanban-expand-bar button.is-expanded:hover{
  background:#ABCEEB; border-color:#249EF5; color:#0B3764;
}
.kanban-expand-bar .arrow{ font-size:10px; }

/* 4) Board & Columns */
.kanban-board{ display:flex; gap:14px; }
@media (max-width:1200px){ .kanban-board{ gap:12px; } }

.kanban-column{
  flex:0 0 320px; background:#F7F7F8; border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-1);
  transition:box-shadow .15s ease, border-color .15s ease;
}
.kanban-column:hover{ box-shadow:var(--shadow-2); }

/* Column header */
.kanban-col-header{
  display:flex; align-items:center; gap:10px; flex-wrap:nowrap;
  padding:12px 14px; border-bottom:1px solid var(--border);
}
.kanban-col-header:focus-visible{ outline:2px solid #1a73e8; outline-offset:2px; border-radius:6px; }

.kanban-col-drag-handle{ display:none; } /* header is the handle */

/* Color bar (vertical) */
.kanban-col-bar{
  width:4px; height:28px; border-radius:2px; flex-shrink:0;
  background:#249EF5;
}
/* Stacked column info */
.kanban-col-info{ flex:1; }
.kanban-col-title{ font-weight:700; font-size:14px; color:var(--text); }
.kanban-col-meta{ font-size:12px; color:var(--muted); margin-top:1px; }

/* Per-column expand/collapse toggle */
.kanban-col-toggle{
  width:22px; height:22px; border:1px solid var(--border); border-radius:5px;
  background:#fff; cursor:pointer; font-size:10px; color:var(--muted);
  display:flex; align-items:center; justify-content:center;
  transition:border-color 120ms ease, color 120ms ease; flex-shrink:0;
}
.kanban-col-toggle:hover{ border-color:#249EF5; color:#249EF5; }
.kanban-col-toggle[data-state="expanded"] .arrow-down{ display:none; }
.kanban-col-toggle[data-state="collapsed"] .arrow-up{ display:none; }

/* Column body */
.kanban-col-body{ padding:6px 8px; }

/* Legacy col-title-badge - hidden */
.col-title-badge{ display:none; }

/* Column header % ring (Step 9m) */
.kanban-col-ring{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:conic-gradient(
    var(--ring-c, #249EF5) calc(var(--ring-p, 0) * 1% - 0.5%),
    #DEE0E3 calc(var(--ring-p, 0) * 1% + 0.5%)
  );
  display:flex; align-items:center; justify-content:center;
}
.kanban-col-ring-inner{
  width:30px; height:30px; border-radius:50%;
  background:#F7F7F8; display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:800; color:var(--text); line-height:1;
}

.add-btn{
  width:30px; height:30px; padding:0; border:1px solid var(--border); border-radius:50%;
  background:#fff; line-height:1; display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
}

/* 5) Cards (B1 two-zone layout) */
.kanban-task{
  background:#fff; border:1px solid rgba(0,0,0,0.08); border-radius:8px;
  box-shadow:0 1px 2px rgba(0,0,0,0.06); padding:0;
  transition:box-shadow 180ms cubic-bezier(0.4,0,0.2,1), border-color 120ms ease;
  position:relative; margin-bottom:6px;
}
.kanban-task:hover{ box-shadow:0 6px 18px rgba(0,0,0,0.10); border-color:#DEE0E3; }
.kanban-task:active{ box-shadow:0 1px 4px rgba(0,0,0,0.06); transition-duration:80ms; }
.kanban-task:focus-visible{ outline:2px solid #0f5edd; outline-offset:2px; border-radius:8px; }
.kanban-task.kanban-open{ border-color:#ABCEEB; }
.kanban-task.dragging{ opacity:.65; }

/* Old header-line hidden for backward compat (Step 9d) */
.kanban-header-line{ display:none; }

/* Collapsed header row (Step 9c) */
.kanban-header-row{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; min-height:40px;
}

/* Drag handle (Step 9f) */
.kanban-drag-handle{
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:2px;
  width:16px; flex-shrink:0; cursor:grab; padding:4px 0;
  opacity:0.35; transition:opacity 120ms ease;
}
.kanban-task:hover .kanban-drag-handle{ opacity:0.7; }
.kanban-drag-handle:active{ cursor:grabbing; opacity:1; }
.kanban-drag-dot{ width:3px; height:3px; border-radius:50%; background:var(--muted); }
.kanban-drag-row{ display:flex; gap:3px; }

/* Title in header row (Step 9e) */
.kanban-title{
  flex:1; font-weight:700; font-size:14px; line-height:24px; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  display:flex; align-items:center; gap:6px;
}

/* Mini pill - collapsed row (Step 9g) */
.kanban-mini-pill{
  font-size:12px; font-weight:600; padding:2px 8px;
  border-radius:10px; white-space:nowrap; letter-spacing:0.2px;
  background:var(--blue-50); color:var(--blue-700);
}

/* User badge (Step 9h) */
.kanban-user-badge{
  width:40px; height:40px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px; letter-spacing:0.3px; color:#fff;
  background:#249EF5; flex-shrink:0; cursor:default;
  position:relative; vertical-align:middle; line-height:1;
}
.kanban-user-badge.empty{
  width:40px; height:40px;
  background:#fff; border:1.5px solid #ef4444; color:#ef4444;
  font-size:0; /* hide text */
}
.kanban-user-badge:hover::after{
  content:attr(title); position:absolute; bottom:calc(100% + 4px); left:50%;
  transform:translateX(-50%); white-space:nowrap; padding:4px 8px;
  background:#212121; color:#fff; border-radius:4px; font-size:11px;
  font-weight:500; pointer-events:none; z-index:10;
}

/* Header mini pill for enum/dropdown fields */
.kanban-header-pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:2px 10px; border-radius:12px; font-size:11px; font-weight:600;
  white-space:nowrap; vertical-align:middle; line-height:1.4;
  background:#e8e8e8; color:#333;
}

/* Header mini percent dial (same conic-gradient as column ring, scaled to match badge) */
.kanban-header-ring{
  width:40px; height:40px; min-width:40px; min-height:40px;
  border-radius:50%; flex-shrink:0;
  background:conic-gradient(
    var(--ring-c, #249EF5) calc(var(--ring-p, 0) * 1% - 0.5%),
    #DEE0E3 calc(var(--ring-p, 0) * 1% + 0.5%)
  );
  position:relative; display:inline-block;
  vertical-align:middle; cursor:default;
}
.kanban-header-ring > .kanban-header-ring-inner{
  width:30px; height:30px;
  border-radius:50%; box-sizing:border-box;
  background:#fff; display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:800; color:#212121; line-height:1;
  position:absolute; top:5px; left:5px;
}

/* Header date pill - subtle neutral style */
.kanban-header-pill.kanban-header-date{
  background:#f0f0f0; color:#555;
}

/* Date chip (Step 9i) */
.kanban-due-chip{
  font-size:12px; font-weight:600; padding:2px 8px;
  border-radius:10px; white-space:nowrap;
}
.kanban-due-ok{ background:#E5FAF3; color:#0C3810; }
.kanban-due-warn{ background:#ECE8AA; color:#5D5D5D; }
.kanban-due-over{ background:#FCE5E4; color:#C54600; }

/* Chevron (Step 9j) */
.kanban-chevron{
  width:20px; height:20px; border:none; background:none;
  cursor:pointer; font-size:10px; color:var(--muted);
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  transition:transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.kanban-chevron:hover{ color:var(--text); }
.kanban-task.kanban-open .kanban-chevron{ transform:rotate(180deg); }

/* Expand region - CSS Grid 0fr/1fr technique (Step 9k) */
.kanban-expand{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.kanban-task.kanban-open .kanban-expand{ grid-template-rows:1fr; }
.kanban-expand-inner{ overflow:hidden; min-height:0; }
.kanban-expand-content{
  padding:8px 10px 10px;
  border-top:1px solid rgba(0,0,0,0.06);
}
/* Subtitle in collapsed header row - right-aligned, muted */
.kanban-header-row .kanban-subtitle{
  font-size:12px; color:var(--muted); font-weight:500; line-height:24px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  margin-left:auto; flex-shrink:1; min-width:0;
  display:flex; align-items:center; gap:6px;
}
/* Subtitle/description inside expanded content */
.kanban-expand-content .kanban-subtitle{
  font-size:13px; color:var(--muted); line-height:1.5;
  margin:8px 0;
}
/* Details container (holds grid chunks + inline progress bar) */
.kanban-details-container{ display:flex; flex-direction:column; }

/* Progress bar (Step 9l) */
.kanban-progress-row{
  display:flex; align-items:center; gap:8px; margin-bottom:8px;
}
.kanban-progress-bar{
  flex:1; height:5px; background:#DEE0E3;
  border-radius:3px; overflow:hidden;
}
.kanban-progress-fill{
  height:100%; border-radius:3px;
  transition:width 300ms ease;
}
.kanban-progress-label{
  font-size:12px; font-weight:700; color:var(--text);
  white-space:nowrap; min-width:32px; text-align:right;
}

/* Pills row */
.kanban-badges{
  display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px; padding:0; padding-top:4px; background:transparent; border:0; border-radius:var(--radius);
}
.kanban-badge{
  font-size:12px; font-weight:600; line-height:1.1; padding:4px 10px;
  border-radius:10px; border:0; background:#eef2ff;
  box-shadow:0 1px 2px rgba(0,0,0,0.05); display:inline-flex; align-items:center;
}
.kanban-badge.true{ background:#e3f5ea; color:var(--green); border:0; }
.kanban-badge.false{ background:#fde8e8; color:var(--red); border:0; }

/* Details grid */
.kanban-kv{
  display:grid; grid-template-columns:auto 1fr;
  gap:4px 10px;
  margin-bottom:8px; font-size:13px;
}
.kanban-k{ color:#166534; font-weight:700; }
.kanban-v{
  color:#374151; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.kanban-v a{
  text-decoration:none; border-bottom:1px dotted rgba(0,0,0,0.25);
}
.kanban-v a:hover{ border-bottom-color:rgba(0,0,0,0.5); }

/* Field value overflow popup */
.kanban-field-popup{
  position:fixed; z-index:10000;
  max-width:360px; min-width:160px;
  background:#fff; border:1px solid #d1d5db; border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.06);
  padding:10px 14px; opacity:0;
  transition:opacity .15s ease;
  pointer-events:auto;
}
.kanban-field-popup-label{
  font-size:11px; font-weight:700; color:#166534;
  margin-bottom:4px; text-transform:uppercase; letter-spacing:.3px;
}
.kanban-field-popup-body{
  font-size:13px; color:#374151; line-height:1.5;
  word-wrap:break-word; overflow-wrap:break-word;
  white-space:normal;
  max-height:240px; overflow-y:auto;
}
.kanban-field-popup-body p{ margin:0 0 6px; }
.kanban-field-popup-body p:last-child{ margin-bottom:0; }

/* Utility pill look used inside kv values */
.kanban-pillBorderRadius{ border-radius:8px; padding:3px 10px; display:inline-block; }

/* Actions (Step 9o: Figma-aligned) */
.kanban-actions{ display:flex; gap:6px; justify-content:flex-end; }
.btn-pill{
  display:inline-flex; align-items:center; gap:6px; padding:4px 14px;
  border:1px solid var(--border); border-radius:5px;
  background:#FAFCFE; cursor:pointer;
  font-family:inherit; font-size:12px; font-weight:600; color:#2A5B88;
  transition:box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}
.btn-pill:hover{ box-shadow:0 1px 2px rgba(0,0,0,.08); border-color:#ABCEEB; background-color:#F4F9FE; }
.btn-pill.edit{ background:#FAFCFE; border-color:#ABCEEB; }
.btn-pill.delete{ background:#fff; border-color:#efc6c6; color:#991b1b; }
.btn-pill.delete:hover{ border-color:#ef4444; box-shadow:0 1px 2px rgba(0,0,0,.08); }

/* 6) Placeholders (DnD) */
.kanban-drop-placeholder{
  border:2px dashed #0f5edd; border-radius:var(--radius);
  background:rgba(15,94,221,.06); min-height:56px; display:flex; align-items:center; justify-content:center;
  color:#0b49aa; font-size:12px;
}
/* Column drag: shadow (the original column dimmed in place) */
.kanban-col-shadow{
  opacity:0.3; outline:2px dashed #0f5edd; outline-offset:-2px;
  border-radius:var(--radius); transition:opacity .15s ease;
  pointer-events:none;
}
/* Column drag: floating ghost */
.kanban-col-ghost{
  cursor:grabbing; border-radius:var(--radius);
  background:#fff; overflow:hidden;
}
/* Smooth transition when columns shift position during drag (only while a drag is active) */
.kanban-board.col-dragging .kanban-column{
  transition:transform .2s ease;
}

/* 7) Swimlanes */
.lane{
  margin-bottom:12px; border:1px solid var(--border); border-radius:var(--radius);
  background:#fff; box-shadow:var(--shadow-1); overflow:hidden;

  /* v1.002 responsive fix */
  min-width:max-content; overflow-x:visible;
}
.lane-header{
  display:flex; align-items:center; gap:8px; padding:.55rem .65rem;
  border-bottom:1px solid var(--border); background:var(--bg-top);
  border-top-left-radius:var(--radius); border-top-right-radius:var(--radius);
}
.lane-title{ font-weight:700; letter-spacing:.2px; }
.lane-count{ font-size:12px; color:var(--muted); }
.lane-toggle{
  margin-left:auto; background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:.2rem .45rem; cursor:pointer; width:28px; height:24px; display:inline-flex; align-items:center; justify-content:center;
}
.lane-body{ padding:12px; }
.lane-collapsed .lane-body{ display:none; }

/* 8) Highlights & Focus */
.kz-highlight{ box-shadow:inset 0 0 0 2px #0f5edd; background:rgba(15,94,221,.06); }
.kz-dim{ opacity:.55; }
/* Scoped to kanban DOM: the un-scoped ":focus-visible" was leaking
   border-radius:var(--radius) (5px) onto every focused element across
   the app, including plain form inputs. The two rules above this one
   (.kanban-col-header:focus-visible, .kanban-task:focus-visible) already
   scope to kanban classes; this rule was missing the scope. */
.kanban-component :focus-visible,
.kanban-board-host :focus-visible{ outline:2px solid #0f5edd; outline-offset:2px; border-radius:var(--radius); }

/* 10) Responsive columns */
@media (max-width:1100px){ .kanban-column{ flex:0 0 280px; } }

/* 11) Subtle flash animation for changed field values */
@keyframes kzFlash {
  0%   { background: rgba(15,94,221,.18); box-shadow: 0 0 0 0 rgba(15,94,221,.25); }
  35%  { background: rgba(15,94,221,.10); box-shadow: 0 0 0 2px rgba(15,94,221,.20); }
  65%  { background: rgba(15,94,221,.08); box-shadow: 0 0 0 1px rgba(15,94,221,.15); }
  100% { background: transparent;           box-shadow: none; }
}
.kz-flash{
  animation: kzFlash 1600ms ease-out 1;
  border-radius: var(--radius);
  transition: background 200ms ease-out, box-shadow 200ms ease-out;
}

/* 12) Collapse expanded cards during drag (Step 9r) */
.kanban-task.dragging .kanban-expand{ grid-template-rows:0fr !important; }
.kanban-task.dragging .kanban-chevron{ transform:none !important; }

/* 13) Reduced motion support (Step 9q) */
@media (prefers-reduced-motion: reduce){
  .kanban-expand{ transition:none !important; }
  .kanban-chevron{ transition:none !important; }
  .kanban-task{ transition:none !important; }
}