/* Home kanban (kanban.js). Approved prototype: sklad/prototype/v2/dash-d1 (owner 28.10.2026). Uses the variables of styles.css; status chips come from status-chip.css.
   The visible columns share the full width (auto-fit), no horizontal page scroll; on a phone the columns are stacked and collapsible. */
main:has(.kb-page) { max-width: none; padding: 12px 14px 60px; }
.kb-page { --soft: #f1f2f4; --warn: #b7791f; --gold: #b8963e; --grn: #2e9e5b; }
@supports (color: oklch(0 0 0)) { .kb-page { --soft: oklch(0.96 0.005 250); } }

.kb-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.kb-top .btn { width: auto; }
.kb-top .kb-refresh { margin-left: auto; min-height: 40px; }
.kb-sum { font-size: 13px; color: var(--muted); margin: 0 0 4px; }
.kb-sum b { color: var(--fg); }
.kb-sum .late { color: var(--bad); font-weight: 700; }
.kb-sum .soon { color: var(--warn); font-weight: 700; }
.kb-src { font-size: 12px; color: var(--muted); margin: 0 0 6px; }
.kb-src.bad, .kb-err { color: var(--bad); }
.kb-err { font-size: 13px; margin: 0 0 6px; }
.kb-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: 12px; color: var(--muted); margin: 0 0 8px; }
.kb-legend .lg { width: 14px; height: 10px; display: inline-block; border: 1px solid var(--border); margin-right: -8px; background: #fff; }
.kb-legend .lg.cl { background: #eaf7ee; border-color: #b7dfc3; border-left: 3px solid var(--grn); }

.kb { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 6px; align-items: start; }
.kcol { background: var(--soft); border: 1px solid var(--border); border-top: 3px solid var(--sc, #999); min-width: 0; }
.kh { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 6px; align-items: center; justify-items: start; width: 100%; padding: 4px 5px 6px; background: var(--card); border: 0; border-bottom: 1px solid var(--border); text-align: left; cursor: default; }
.kh .schip { width: 100%; font-size: 11px; padding: 1px 5px 1px 4px; gap: 4px; align-items: flex-start; white-space: normal; line-height: 1.3; }
.kh .schip svg { width: 12px; height: 12px; margin-top: 1px; }
.kh .schip .schip-name { overflow: visible; text-overflow: clip; min-width: 0; overflow-wrap: anywhere; }
.kh .cn { font-size: 12px; font-weight: 700; color: var(--muted); justify-self: end; line-height: 1.2; }
.kh .chev { display: none; }
.kh .nt { grid-column: 1 / -1; font-size: 10px; line-height: 1.25; color: var(--muted); font-weight: 400; }
.kcards { padding: 5px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; }

.kc { position: relative; display: grid; gap: 1px; background: #fff; border: 1px solid var(--border); padding: 4px; min-width: 0; }
.kc:hover { border-color: var(--primary); }
.kc-a { display: grid; gap: 1px; min-width: 0; }
.kc.kl { border-left: 3px solid var(--bad); padding-left: 3px; }
.kc.ks { border-left: 3px solid var(--warn); padding-left: 3px; }
.kc.cl { background: #eaf7ee; border-color: #b7dfc3; border-left: 3px solid var(--grn); padding-left: 3px; }
.kc.cl.kl { border-left-color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); }
.kc.cl.ks { border-left-color: var(--warn); }
.kc.sk.kl { box-shadow: inset 0 0 0 1px var(--bad); }
.kc.pp { background: #fff; padding: 6px 5px; gap: 3px; }
.kc.pp.late { box-shadow: inset 0 0 0 1px var(--bad); }
.kc .ph { display: block; width: 100%; aspect-ratio: 2 / 1; margin-bottom: 2px; border: 1px solid var(--border); background: #fff; overflow: hidden; }
.kc .ph img { display: block; width: 100%; height: 100%; object-fit: contain; }
.kc .ph.addph { aspect-ratio: auto; height: 22px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 10px; font-weight: 700; color: #e06a00; background: #fff4ea; border: 1px dashed #f0a35e; }
.kc-no { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; font-size: 11.5px; font-weight: 700; min-width: 0; }
.kc-no .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.kc-no .src { flex: none; font-size: 9.5px; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.kc-no .src.mine { color: var(--fg); border: 1px solid var(--border); padding: 0 3px; background: #fff; }
.kc-l1 { font-size: 11.5px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.kc-l2 { font-size: 11px; line-height: 1.2; color: var(--muted); overflow-wrap: anywhere; }
.kc-cs { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.kc-ch { display: inline-flex; align-items: center; gap: 2px; font-size: 10.5px; font-weight: 600; line-height: 1; padding: 2px 4px; border: 1px solid var(--border); background: #fff; font-variant-numeric: tabular-nums; }
.kc-ch.balls { padding: 2px 3px; gap: 5px; }
.kc-cc { display: inline-flex; align-items: center; gap: 2px; }
.kc-stg { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font-size: 10.5px; line-height: 1.25; color: var(--muted); }
.kc-stg .stg { color: var(--fg); font-weight: 600; }
.kc-stg .stg.none, .kc-stg.none { color: var(--muted); font-weight: 400; }
.kc-stg .more { margin-left: auto; }
.kc-pr { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; font-size: 11px; font-variant-numeric: tabular-nums; }
.kc-pr b { font-weight: 700; white-space: nowrap; }
.kc-pr .who { color: var(--muted); font-weight: 600; letter-spacing: .02em; font-size: 10.5px; }
.kc-cl { font-size: 11.5px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.kc-ln { display: flex; justify-content: space-between; gap: 4px; border-top: 1px solid var(--border); padding-top: 2px; margin-top: 1px; font-size: 10px; white-space: nowrap; overflow: hidden; }
.kc-ln .dd { flex: 0 0 auto; max-width: 100%; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; } /* the days to hand-over come first: the days in the status give way */
.kc-ln .dd.none { color: var(--muted); }
.kc-ln .sd { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-variant-numeric: tabular-nums; }
.kc .late, .kc .soon { font-weight: 700; }
.kc .late { color: var(--bad); }
.kc .soon { color: var(--warn); }
.kc.pp .when { font-size: 10.5px; color: var(--muted); font-weight: 400; }
.kc .mk { display: block; text-align: center; margin-top: 3px; padding: 4px 2px; border: 1px solid var(--fg); background: var(--fg); color: var(--bg); font-size: 10.5px; font-weight: 600; letter-spacing: .04em; }
.kc .mk:hover { background: var(--primary); border-color: var(--primary); color: #fff; }

/* our own orders: the status changes from the card */
.kc-st { overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 2px; width: 100%; margin-top: 3px; padding: 2px; border: 1px dashed var(--border); background: #fff; min-height: 28px; }
.kc-st .schip { font-size: 10.5px; padding: 0 4px 0 3px; gap: 3px; min-width: 0; flex: 0 1 auto; overflow: hidden; }
.kc-st .schip svg { width: 11px; height: 11px; }
.kc-st .ar { width: 6px; height: 6px; flex: none; margin: 0 4px 2px 0; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); }
.kc-menu { position: fixed; z-index: 60; display: grid; gap: 3px; width: 230px; max-height: 70vh; overflow-y: auto; padding: 6px; background: var(--card); border: 1px solid var(--fg); }
.kc-menu button { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 36px; padding: 2px 4px; border: 1px solid transparent; background: transparent; text-align: left; }
.kc-menu button:hover, .kc-menu button.cur { border-color: var(--border); background: var(--bg); }
.kc-menu .ck { font-size: 11px; color: var(--muted); }

.kmore { border: 1px dashed var(--border); background: transparent; color: var(--muted); font-size: 11px; padding: 3px 0; }
.kmore:hover { color: var(--fg); border-color: var(--fg); }

/* the large hover preview of a thumbnail (desktop with a mouse) */
#kb-pv { position: fixed; z-index: 100; width: 300px; height: 300px; background: #fff; border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); pointer-events: none; display: none; }
#kb-pv img { width: 100%; height: 100%; object-fit: contain; display: block; }

@media (max-width: 1100px) and (min-width: 801px) { .kb { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
@media (max-width: 800px) {
  main:has(.kb-page) { padding: 10px 10px 60px; }
  .kb { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .kh { cursor: pointer; grid-template-columns: minmax(0, 1fr) auto 14px; align-items: center; justify-items: stretch; padding: 9px 10px; min-height: 44px; }
  .kh .cn { order: 0; justify-self: auto; }
  .kh .schip { width: auto; justify-self: start; font-size: 13px; align-items: center; }
  .kh .schip svg { width: 14px; height: 14px; margin-top: 0; }
  .kh .chev { display: block; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin-bottom: 3px; transition: transform .15s; }
  .kcol.shut .kh { border-bottom: 0; }
  .kcol.shut .kh .chev { transform: rotate(-45deg); }
  .kcol.shut .kcards { display: none; }
  .kcards { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 6px; gap: 6px; align-items: start; }
  .kcards:has(> :only-child:not(.kmore)) { grid-template-columns: minmax(0, 1fr); }
  .kc .ph { aspect-ratio: 3 / 2; } .kc .ph.addph { aspect-ratio: auto; }
  .kc-no { font-size: 12px; } .kc-l1 { font-size: 12px; } .kc-l2 { font-size: 11.5px; } .kc-ch { font-size: 11px; } .kc-pr { font-size: 12px; } .kc-cl { font-size: 12px; }
  .kc-ln { font-size: 10.5px; }
  .kmore { grid-column: 1 / -1; padding: 9px 0; font-size: 12px; }
}