/* Enterprise workspace: shared tokens, navigation and page-specific layouts. */
:root {
  --bg: #f5f6f8; --card: #fff; --ink: #202938; --ink-2: #4e5b6c; --ink-3: #667386;
  --brand: #245bdb; --brand-2: #3972ee; --brand-soft: #eef3ff;
  --green: #18794e; --green-soft: #edf7f1; --amber: #996000; --amber-soft: #fff6e5;
  --red: #bd3634; --red-soft: #fff0ef; --hair: #e5e9f0;
  --shadow-card: none; --shadow-brand: none; --shadow-pop: 0 12px 32px #20293814;
  --r-lg: 10px; --r-md: 7px; --r-in: 6px; --r-sm: 5px;
}
* { -webkit-tap-highlight-color: transparent; }
body { max-width: none; font-size: 14px; }
button,input,select { font: inherit; }
button, [role="button"], summary { touch-action: manipulation; }
button:focus-visible, [role="button"]:focus-visible, summary:focus-visible, select:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
button:disabled { cursor: not-allowed; }
[hidden] { display: none !important; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 100; padding: 12px; background: white; color: var(--brand); }
.skip-link:focus { top: 10px; }
header { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; padding: 12px 16px; box-shadow: none; border-bottom: 1px solid var(--hair); backdrop-filter: none; }
.workspace-context { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 13px; }
.workspace-mark { display: grid; place-items: center; width: 28px; height: 28px; color: #fff; background: var(--brand); border-radius: 6px; font-weight: 700; }
.context-divider { color: #a0a9b7; margin: 0 12px; }
.header-actions { display: flex; gap: 16px; align-items: center; }
header .badge { float: none; margin: 0; border-radius: 4px; background: #f1f3f6; color: var(--ink-2); font-size: 11px; padding: 3px 7px; white-space: nowrap; }
#role-pill { display: flex; align-items: center; gap: 9px; margin: 0; background: none; box-shadow: none; border: 0; border-radius: 6px; padding: 0; color: var(--ink); text-align: left; }
#role-pill small { display: block; font-size: 11px; font-weight: 400; color: var(--ink-3); }
#role-pill .sw { margin: 0 0 0 5px; color: var(--ink-3); }
.role-avatar { width: 32px; height: 32px; display: grid; place-items: center; background: #eaf0fb; color: var(--brand); font-size: 13px; border-radius: 50%; }
main { padding: 24px 16px 100px; }
main:has(#p-chat.active) { padding-bottom: 180px; }
.page-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 auto 24px; }
.eyebrow { color: var(--ink-3); font-size: 10px; font-weight: 600; letter-spacing: .12em; margin-bottom: 7px; }
.page-heading h1 { font-size: 25px; letter-spacing: -.02em; font-weight: 650; line-height: 1.4; }
.page-heading p { color: var(--ink-3); margin-top: 6px; font-size: 13px; }
#connection-status { flex-shrink: 0; border: 1px solid var(--hair); border-radius: 5px; padding: 5px 9px; font-size: 11px; color: var(--ink-3); background: #fff; }
#connection-status::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #8b97a8; margin-right: 6px; }
#connection-status[data-state="ready"]::before { background: var(--green); }
#connection-status[data-state="error"] { color: var(--red); cursor: pointer; }
#connection-status[data-state="error"]::before { background: var(--red); }
.page.active { animation: none; }
.card, .room-card, .audit-card, .stat, .kcard, .bubble { border: 1px solid var(--hair); }
.card { padding: 20px; margin-bottom: 16px; }
.card h3 { font-size: 15px; margin-bottom: 12px; text-wrap: initial; }
.card.slim { padding: 11px 16px; }
.tiny { font-size: 12px; line-height: 1.6; }
.muted { font-size: 13px; line-height: 1.7; }
.btn, .btn.small, .btn.ghost, .chip, .bsel button, .fchip, .pchip { border-radius: 6px; }
.btn, .btn:active, .bsel button.on, .fchip.on { background: var(--brand); box-shadow: none; transform: none; }
.btn.danger { background: var(--red); box-shadow: none; }
.btn.ghost { background: #fff; color: var(--brand); border: 1px solid #d9e2f4; }
.btn:disabled { opacity: .5; }
.btn:hover { filter: none; background: #194cc1; }
.btn.ghost:hover { background: var(--brand-soft); }
.btn.danger:hover { background: #a22b29; }
.chip:hover, .room-card:hover, .sku-row:hover, .kcard:hover { transform: none; box-shadow: none; border-color: #acc2f1; }
.chip:active, .room-card:active, .sku-row:active, .kcard:active, .fchip:active, .bsel button:active { transform: none; }
.tag { border-radius: 4px; padding: 2px 6px; font-size: 11px; font-weight: 500; white-space: nowrap; }
.seg { border: 1px solid var(--hair); border-radius: 7px; background: #edf0f4; padding: 3px; margin-bottom: 0; }
.seg button { min-height: 32px; padding: 0 16px; border-radius: 4px; font-weight: 500; }
.seg button.on { color: var(--brand); box-shadow: 0 1px 2px #20293812; }
.search { border: 1px solid #dbe1ea; border-radius: 6px; min-height: 38px; margin: 0; font-size: 13px; }
.filter-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.filter-bar .search { max-width: 340px; flex: 1; min-width: 160px; }
.filter-bar select { border: 1px solid #dbe1ea; border-radius: 6px; background: #fff; color: var(--ink-2); min-height: 38px; padding: 0 30px 0 12px; font-size: 13px; }
.filter-count { color: var(--ink-3); font-size: 12px; margin-left: auto; }
.scope-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--hair); }
.scope-tabs button { position: relative; border: none; background: none; min-height: 44px; padding: 0 0 12px; color: var(--ink-3); cursor: pointer; white-space: nowrap; font-size: 14px; }
.scope-tabs button.on { color: var(--brand); font-weight: 600; }
.scope-tabs button.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brand); }
.scope-tabs button span { background: #e9edf3; font-size: 11px; padding: 2px 6px; margin-left: 4px; border-radius: 4px; }
.scope-tabs button.on span { background: var(--brand-soft); }
/* Assistant */
.assistant-intro { display: flex; align-items: center; gap: 16px; padding: 18px 0 28px; }
.assistant-emblem { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: #eaf0ff; color: var(--brand); font-size: 18px; font-weight: 650; }
.assistant-intro h2 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.assistant-intro p { margin-top: 5px; color: var(--ink-3); font-size: 13px; }
#chips { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); overflow: visible; gap: 12px; padding: 0; max-width: none; }
#chips .chip { display: flex; text-align: left; gap: 12px; min-height: 98px; padding: 18px; border: 1px solid var(--hair); border-radius: 9px; background: #fff; }
#chips .chip:hover { background: #fafcff; border-color: #b4c7f0; }
#chips .chip strong { display: block; font-size: 14px; font-weight: 600; margin-bottom: 5px; }
#chips .chip small { display: block; font-size: 12px; color: var(--ink-3); font-weight: 400; }
.action-icon { color: var(--brand); flex-shrink: 0; display: flex; }
.action-icon svg, #cam-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.action-arrow { margin-left: auto; align-self: flex-start; color: #8b97a8; font-size: 16px; }
.assistant-secondary { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 18px 0 28px; color: var(--ink-3); font-size: 12px; }
.assistant-secondary .chip { min-height: 32px; border: 0; padding: 0; background: none; font-size: 12px; color: var(--ink-2); }
#chat-log { max-width: none; gap: 20px; }
.avatar { border-radius: 7px; background: var(--brand-soft); color: var(--brand); font-size: 11px; font-weight: 700; box-shadow: none; }
.bubble { max-width: 88%; border-radius: 8px; padding: 14px 16px; line-height: 1.7; }
.msg.user .bubble { background: #eaf0ff; color: var(--ink); border-color: #dbe5ff; border-radius: 8px; }
.msg.welcome-message .bubble { background: transparent; border: 0; padding-top: 0; }
.msg.welcome-message .b-title { font-size: 13px; }
#composer { width: calc(100% - 32px); max-width: 800px; background: #fff; border: 1px solid #d3dcea; border-radius: 10px; padding: 10px; box-shadow: 0 6px 24px #2029380d; gap: 8px; }
#composer input { min-width: 0; background: none; box-shadow: none; border-radius: 5px; padding: 0 8px; }
#composer .btn { border-radius: 6px; }
#cam-btn { border-radius: 6px; background: #f3f5f9; color: var(--ink-2); }
/* Ledger */
.ledger-toolbar { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 16px; background: #fff; border: 1px solid var(--hair); border-radius: 9px; margin-bottom: 20px; }
.ledger-toolbar .seg { min-width: 280px; }
.ledger-toolbar .search { max-width: 320px; }
.bsel { gap: 8px; }
.bsel button { border: 1px solid var(--hair); font-weight: 500; min-height: 36px; }
.bsel button.on { border-color: var(--brand); }
.fsel { gap: 6px; }
.fchip { border: 1px solid var(--hair); min-height: 32px; font-weight: 500; }
.fchip.on { border-color: var(--brand); }
.room-card { padding: 18px; }
.room-card .rmeta { margin-top: 6px; margin-bottom: 14px; }
.room-card.dim .rid { color: var(--ink-2); }
.room-card.dim .rcnt, .room-card.dim .rcnt b { color: var(--ink-3); }
.room-card .rid { font-size: 16px; font-weight: 600; }
.room-card .rcnt b { font-size: 20px; }
.sku-row { padding: 16px; }
/* Tasks */
.task-toolbar { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 20px; }
.task-toolbar .scope-tabs { flex: 1; }
.task-toolbar .seg { flex-shrink: 0; }
#moves-body:has(.move-card) { display: block; }
.task-list { display: grid; gap: 16px; }
.kcol { border-radius: 8px; padding: 12px; background: #edf0f4; min-width: 0; }
.kcol-h { font-size: 12px; padding: 2px 2px 14px; }
.kcard { padding: 14px; border-radius: 7px; margin-bottom: 10px; }
.kcard.mine { outline: none; border-left: 3px solid var(--brand); }
.kc-top { flex-wrap: wrap; }
.kc-items { font-size: 13px; margin-top: 12px; line-height: 1.65; }
.kc-route { margin-top: 6px; font-size: 12px; }
.kc-foot { margin-top: 16px; font-size: 11px; }
.kc-foot .num:first-child { font-size: 17px; }
.kc-wait { border-radius: 4px; margin-top: 10px; font-size: 11px; }
.kempty { padding: 30px 0; font-size: 12px; }
.move-card .mst { border-radius: 4px; }
/* Overview */
.stat { display: flex; flex-direction: column-reverse; align-items: flex-start; justify-content: flex-end; gap: 12px; background: #fff; padding: 20px; border-top: 1px solid var(--hair); }
.stat::before { display: none; }
.stat .sv { color: var(--ink); font-size: 27px; font-weight: 650; line-height: 1.15; }
.stat .sk { font-size: 12px; color: var(--ink-3); margin: 0; }
.stat .sv small { font-size: 12px; font-weight: 400; color: var(--ink-3); }
.stat.brand .sv { color: var(--brand); }
.stat.bad .sv { color: var(--red); }
.bars .bar { background: #c2d3f5; border-radius: 4px 4px 0 0; }
.bar-col.hot .bar { background: var(--brand); }
/* Audit */
#audit-body > .audit-kpis { margin: 0 0 24px; gap: 16px; }
.audit-kpis > div { border: 1px solid var(--hair); background: #fff; padding: 20px; border-radius: 8px; }
.audit-kpis b { margin-top: 12px; color: var(--ink); font-size: 28px; }
.audit-kpis span { font-size: 12px; color: var(--ink-3); }
.audit-card { border-radius: 7px; margin-bottom: 8px; }
.audit-card summary { padding: 16px; }
.audit-top { align-items: center; gap: 14px; }
.audit-dot { margin: 0; width: 6px; height: 6px; flex-basis: 6px; }
.audit-summary { flex: 1; min-width: 0; }
.audit-summary b { font-size: 13px; font-weight: 600; }
.audit-summary p { color: var(--ink-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 4px 0; }
.audit-duration { color: var(--ink-3); font-size: 12px; }
.audit-chevron { color: var(--ink-3); }
.audit-card[open] .audit-chevron { transform: rotate(180deg); }
.audit-card[open] summary { background: #f9fafc; }
.audit-body { padding: 20px; font-size: 13px; gap: 12px; }
.audit-body > div { grid-template-columns: 90px minmax(0,1fr); }
.audit-body b { overflow-wrap: anywhere; }
.needs-review { color: var(--red) !important; }
/* Administration and login */
#admin-body { max-width: none; }
.admin-tabs { margin: 24px 0; }
.perm-row { display: flex; align-items: center; gap: 24px; padding: 18px 0; }
.pr-name { flex: 0 0 110px; margin: 0; }
.pr-chips { gap: 8px; }
.pchip { min-height: 34px; font-weight: 500; font-size: 12px; border-width: 1px; }
.pchip.ro { opacity: 1; }
.api-grid { gap: 16px; }
.api-grid label { font-size: 12px; gap: 7px; }
.api-grid input, .api-grid select { min-height: 40px; border-width: 1px; border-radius: 6px; }
.api-sec { padding: 18px; margin-bottom: 16px; background: #fafbfc; }
.api-h { margin-bottom: 14px; }
.airule-row { padding: 20px 0; }
.airule-row .ar-d { margin-top: 10px; }
#login-mask { background: #f3f5f9; }
#login-card { max-width: 440px; padding: 40px 32px; border: 1px solid var(--hair); border-radius: 12px; box-shadow: 0 16px 48px #2029380a; }
.lg-logo { background: var(--brand); border-radius: 12px; width: 52px; height: 52px; font-size: 25px; }
.lg-title { font-size: 23px; }
.lg-sub { margin: 8px 0 28px; font-size: 13px; }
.btn.wecom { background: var(--brand); box-shadow: none; }
.role-opt { border-radius: 8px; }
.footnote { margin-top: 20px; line-height: 1.7; }
/* Desktop: stable sidebar, clear toolbar and content width. */
.nav-brand, .nav-group, .nav-footer { display: none; }
nav button .nav-label { white-space: nowrap; }
@media (min-width: 960px) {
  nav { width: 216px; padding: 24px 12px; border-right: 1px solid var(--hair); background: #fff; gap: 4px; box-shadow: none; }
  nav::before, nav::after { display: none; }
  .nav-brand { display: flex; align-items: center; gap: 11px; padding: 0 8px 32px; font-size: 18px; font-weight: 650; }
  .nav-brand > span { width: 36px; height: 36px; display: grid; place-items: center; background: var(--brand); color: #fff; border-radius: 8px; font-size: 21px; }
  .nav-brand small { display: block; font-size: 10px; font-weight: 400; color: var(--ink-3); letter-spacing: 1px; margin-top: 3px; }
  .nav-group { display: block; font-size: 11px; color: var(--ink-3); padding: 0 14px 10px; }
  nav button { min-height: 44px; padding: 10px 14px; border-radius: 6px; color: var(--ink-2); font-weight: 400; gap: 11px; font-size: 13px; }
  nav button.on { color: var(--brand); font-weight: 600; background: var(--brand-soft); }
  nav button:hover { background: #f5f7fb; }
  nav button.on:hover { background: var(--brand-soft); }
  nav button[data-page="p-audit"] { margin-top: 28px; }
  .nav-footer { display: block; margin-top: auto; padding: 16px 10px 0; border-top: 1px solid var(--hair); font-size: 12px; color: var(--ink-2); }
  .nav-footer small { display: block; font-size: 10px; color: var(--ink-3); margin-top: 6px; }
  .tenant-dot { display: inline-block; width: 6px; height: 6px; background: var(--brand); border-radius: 50%; margin-right: 8px; }
  header { margin-left: 216px; min-height: 68px; padding: 12px 32px; }
  .workspace-mark { display: none; }
  main { margin-left: 216px; padding: 30px 32px 60px; }
  .page.active, .page-heading { max-width: 1240px; }
  #p-chat { max-width: 960px; }
  #composer { left: calc(216px + (100vw - 216px)/2); width: calc(100vw - 312px); max-width: 800px; bottom: 28px; }
  .kanban { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; align-items: stretch; }
  .kcol { min-height: 370px; }
  .task-list { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; }
  #dash-body { gap: 20px; }
  #dash-body > .stat-grid { gap: 14px; }
  .room-grid { gap: 14px; }
}
@media (min-width: 960px) and (max-width: 1199px) {
  #chips { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .kanban { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #dash-body > .stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .room-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
/* Mobile and tablets retain the same hierarchy and comfortable touch targets. */
@media (max-width: 959px) {
  .workspace-context { font-size: 12px; }
  .workspace-context > span:last-child { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .context-divider { margin: 0 6px; }
  header .badge { display: none; }
  .header-actions { gap: 0; }
  #role-pill small, #role-pill .sw { display: none; }
  #role-pill { font-size: 12px; }
  .page-heading { align-items: flex-start; margin-bottom: 20px; }
  .page-heading h1 { font-size: 23px; }
  .page-heading p { font-size: 12px; max-width: 280px; }
  #connection-status { font-size: 10px; margin-top: 22px; padding: 4px 6px; }
  .eyebrow { font-size: 9px; }
  nav { width: 100%; max-width: none; padding-bottom: max(8px,env(safe-area-inset-bottom)); background: #fff; box-shadow: none; border-top: 1px solid var(--hair); }
  nav button { font-size: 10px; min-height: 52px; padding: 7px 0; gap: 4px; }
  nav button .ni svg { width: 20px; height: 20px; }
  #composer { bottom: calc(72px + env(safe-area-inset-bottom)); }
  #composer input { font-size: 16px; }
  #chips { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  #chips .chip { gap: 9px; min-height: 98px; padding: 13px 10px; }
  #chips .chip small { font-size: 11px; }
  #chips .chip strong { font-size: 13px; }
  .action-arrow { display: none; }
  .action-icon svg { width: 20px; height: 20px; }
  .assistant-intro { padding: 4px 0 20px; gap: 12px; }
  .assistant-intro h2 { font-size: 17px; }
  .assistant-intro p { font-size: 12px; }
  .assistant-emblem { width: 36px; height: 36px; flex: 0 0 36px; font-size: 14px; border-radius: 8px; }
  .assistant-secondary { gap: 12px; margin: 14px 0 20px; }
  .bubble { max-width: calc(100% - 38px); padding: 12px; }
  .ledger-toolbar { flex-direction: column; align-items: stretch; padding: 12px; gap: 12px; }
  .ledger-toolbar .seg { min-width: 0; }
  .ledger-toolbar .search { max-width: none; }
  .bsel { overflow-x: auto; padding-bottom: 12px; }
  .bsel button, .fchip { min-height: 40px; }
  .room-card { padding: 14px; }
  .task-toolbar { flex-wrap: wrap; gap: 12px; }
  .task-toolbar .scope-tabs { min-width: 100%; }
  .task-toolbar .seg { max-width: 200px; width: 100%; }
  .kanban { grid-template-columns: 1fr; gap: 16px; }
  .kcol { padding: 12px; }
  .kcol-h { font-size: 13px; }
  .kcard { padding: 16px; }
  .kc-top { flex-wrap: nowrap; }
  .kid { font-size: 12px; }
  .kc-items { font-size: 14px; }
  .kc-foot { font-size: 12px; }
  .kempty { padding: 14px 0; }
  .filter-bar { gap: 8px; }
  .filter-bar .search { max-width: none; flex-basis: 100%; }
  .filter-bar select { flex: 1; }
  .filter-count { flex: 0 0 auto; }
  .stat { padding: 16px; gap: 10px; }
  .stat .sv { font-size: 23px; }
  .stat .sk { font-size: 11px; }
  .stat .sv small { font-size: 10px; }
  .audit-kpis > div { padding: 14px 10px; }
  #audit-body > .audit-kpis { gap: 8px; }
  .audit-kpis span { font-size: 11px; }
  .audit-kpis b { font-size: 24px; }
  .audit-top { gap: 8px; }
  .audit-duration { display: none; }
  .audit-card summary { padding: 12px; }
  .audit-summary p { font-size: 12px; }
  .audit-body { padding: 14px; }
  .audit-body > div { grid-template-columns: 70px minmax(0,1fr); }
  .admin-tabs { gap: 20px; overflow-x: auto; }
  .admin-tabs button { font-size: 12px; }
  .card { padding: 16px; }
  .perm-row { display: block; }
  .pr-name { margin-bottom: 12px; }
  .pchip { min-height: 38px; }
  .api-grid { grid-template-columns: 1fr; }
  .api-sec { padding: 14px; }
}
@media (max-width: 359px) {
  .workspace-context > span:last-child { max-width: 120px; }
  .page-heading { flex-wrap: wrap; gap: 8px; }
  #connection-status { margin: 0; }
  #chips { grid-template-columns: 1fr; }
  nav button { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .msg, .room-card, .room-card.dim { opacity: 1; transform: none; animation: none; }
}
.retry-connection { border: 0; padding: 0; background: none; color: inherit; cursor: pointer; font-size: inherit; }
.floor-caption { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--ink-2); margin: 0 0 8px; }
.floor-caption > span { font-size: 11px; color: var(--ink-3); }
.mobile-scroll-hint { display: none; }
@media (max-width: 959px) {
  .mobile-scroll-hint { display: inline; }
  #admin-body > .card .sku-head { flex-wrap: wrap; }
  #admin-body > .card .sku-head > div[style] { min-width: 180px; }
  #admin-body > .card .sku-head > .btn { margin-left: auto; }
}
/* Task board: workflow-aware movement, dense list, details and confirmation. */
.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;}
.task-toolbar #task-refresh {white-space:nowrap;min-height:38px;}
.task-filters .search {max-width:300px;}
.task-filters select {padding-right:24px;}
.clear-filters {border:0;background:none;color:var(--brand);font-size:12px;cursor:pointer;min-height:36px;}
.board-context {display:flex;justify-content:space-between;gap:16px;font-size:12px;color:var(--ink-3);margin-bottom:10px;}
.board-help {font-size:12px;color:var(--ink-3);margin-bottom:20px;line-height:1.7;}
.kcol {position:relative;border:1px solid transparent;transition:background .15s,border-color .15s;}
.kcol-h {padding-bottom:6px;}
.kcol-h::before {background:var(--amber);}
.kcol.stage-x .kcol-h::before {background:var(--brand);}
.kcol.stage-d .kcol-h::before {background:var(--green);}
.kcol-meta {display:flex;justify-content:space-between;gap:8px;color:var(--ink-3);font-size:10px;margin-bottom:16px;}
.kcol.drop-allowed {border:2px dashed #86a6ee;background:#edf3ff;padding:11px;}
.kcol.drop-over {border-style:solid;background:#dde9ff;box-shadow:inset 0 0 0 2px #b0c6f5;}
.column-drop-hint {display:none;color:var(--brand);font-size:12px;text-align:center;padding:12px;margin-bottom:10px;background:#fff;border-radius:6px;}
.drop-allowed .column-drop-hint {display:block;}
.kcard {cursor:default;}
.kcard[draggable="true"] {cursor:grab;}
.kcard.dragging {opacity:.4;}
.drag-handle {display:grid;place-items:center;min-width:28px;height:28px;border:0;color:var(--ink-3);background:transparent;cursor:grab;font-size:20px;line-height:1;margin-left:auto;touch-action:none;border-radius:4px;}
.drag-handle:hover {background:#eef2f8;}
.drag-handle:disabled {opacity:.25;cursor:default;}
.task-open {display:block;background:none;border:0;padding:0;text-align:left;color:var(--ink);font-size:13px;line-height:1.7;font-weight:600;cursor:pointer;margin-top:8px;width:100%;}
.task-open:hover,.table-task-open:hover {color:var(--brand);}
.kc-actions {display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:14px;border-top:1px solid var(--hair);padding-top:10px;}
.kc-actions .kc-wait {margin:0;font-size:10px;}
.task-advance {border:0;background:transparent;color:var(--brand);font-size:12px;cursor:pointer;min-height:32px;padding:0 3px;white-space:nowrap;}
.task-risk {font-size:11px;color:var(--amber);margin-top:10px;}
.board-empty {display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;padding:30px 16px;background:#fff;border:1px dashed var(--hair);border-radius:8px;margin-bottom:20px;}
.board-empty span {font-size:12px;color:var(--ink-3);}
.task-table-wrap {background:#fff;overflow:auto;border:1px solid var(--hair);border-radius:8px;}
.task-table {border-collapse:collapse;min-width:850px;width:100%;text-align:left;font-size:12px;}
.task-table th {padding:14px 16px;background:#f8fafc;border-bottom:1px solid var(--hair);color:var(--ink-3);font-size:11px;font-weight:500;white-space:nowrap;}
.task-table td {padding:16px;border-bottom:1px solid var(--hair);vertical-align:top;max-width:250px;}
.task-table tbody tr:last-child td {border:0;}
.task-table tbody tr:hover {background:#fafcff;}
.task-table td p {font-size:12px;line-height:1.7;margin-top:7px;}
.task-table small {display:block;font-size:11px;color:var(--ink-3);margin-top:6px;}
.table-task-open {border:0;background:none;color:var(--brand);font-size:12px;font-weight:600;padding:0;cursor:pointer;}
.status-pill {display:inline-block;padding:3px 7px;font-size:11px;white-space:nowrap;border-radius:4px;background:var(--amber-soft);color:var(--amber);}
.status-pill.stage-x {background:var(--brand-soft);color:var(--brand);}
.status-pill.stage-d {background:var(--green-soft);color:var(--green);}
dialog {color:var(--ink);border:1px solid var(--hair);padding:0;background:#fff;box-shadow:0 20px 60px #17212b26;}
dialog::backdrop {background:#14233d50;}
.task-drawer {position:fixed;inset:0 0 0 auto;width:560px;max-width:100%;height:100dvh;max-height:100dvh;margin:0;border:0;border-left:1px solid var(--hair);}
.task-drawer[open] {display:flex;flex-direction:column;}
.drawer-header {display:flex;justify-content:space-between;align-items:center;gap:16px;padding:24px;border-bottom:1px solid var(--hair);flex-shrink:0;}
.drawer-header h2 {font-size:20px;}
.icon-button {width:36px;height:36px;display:grid;place-items:center;background:#f4f6f9;border:0;border-radius:6px;font-size:24px;color:var(--ink-3);cursor:pointer;}
.drawer-content {flex:1;min-height:0;overflow-y:auto;padding:24px;overscroll-behavior:contain;}
.drawer-content h3 {font-size:14px;margin:24px 0 12px;}
.drawer-content p {font-size:13px;line-height:1.7;}
.detail-meta {display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px;}
.detail-meta span {font-size:12px;color:var(--ink-3);}
.detail-meta b {display:block;margin-top:7px;color:var(--ink);font-size:14px;font-weight:500;}
.detail-route {background:#f5f7fb;padding:12px;border-radius:6px;}
.detail-items > div {display:flex;justify-content:space-between;gap:14px;border-bottom:1px solid var(--hair);padding:14px 0;font-size:13px;}
.detail-items small {display:block;color:var(--ink-3);font-size:11px;margin-top:5px;}
.task-timeline {list-style:none;padding:0 0 0 8px;}
.task-timeline li {position:relative;padding:0 0 20px 20px;border-left:1px solid #dbe3f1;}
.task-timeline li::before {content:'';position:absolute;width:7px;height:7px;left:-4px;top:6px;border-radius:50%;background:var(--brand);}
.task-timeline li:last-child {border-color:transparent;}
.task-timeline b {display:block;font-size:12px;font-weight:500;}
.task-timeline span {display:block;font-size:11px;color:var(--ink-3);margin-top:5px;}
.drawer-footer {flex-shrink:0;padding:16px 24px max(20px,env(safe-area-inset-bottom));border-top:1px solid var(--hair);background:#fff;}
.drawer-footer p {font-size:12px;line-height:1.7;color:var(--ink-3);}
.task-confirm {margin:auto;max-height:calc(100dvh - 32px);width:480px;max-width:calc(100vw - 32px);border-radius:12px;padding:24px;overflow-y:auto;}
.confirm-header {display:flex;justify-content:space-between;align-items:center;gap:16px;}
.confirm-header h2 {font-size:19px;}
.confirm-task {font-size:12px;color:var(--ink-3);margin:6px 0 20px;}
.stage-transition {display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px;background:var(--brand-soft);border-radius:7px;font-size:13px;margin-bottom:16px;}
.stage-transition strong {color:var(--brand);font-weight:600;}
.task-confirm > p {font-size:13px;line-height:1.75;}
.confirm-summary {display:flex;flex-direction:column;gap:8px;margin:18px 0;padding:14px;background:#f7f9fb;border-radius:6px;font-size:12px;line-height:1.7;}
.confirm-summary b {font-weight:500;}
.confirm-summary span {color:var(--ink-3);}
.confirm-actions {display:flex;justify-content:flex-end;gap:10px;margin-top:24px;}
.settlement-label {display:flex;flex-direction:column;gap:8px;font-size:13px;}
.settlement-label input {border:1px solid #cbd5e5;border-radius:6px;padding:11px 12px;font-size:16px;width:100%;}
.settlement-label small {font-size:11px;color:var(--ink-3);}
.transition-error {background:var(--red-soft);border-radius:6px;color:var(--red);padding:12px;margin-top:16px;}
@media (min-width:1200px) {.kanban {gap:12px;} .kcol {padding:10px;} .kcol.drop-allowed {padding:9px;} .kcard {padding:12px;}}
@media (max-width:959px) {
 .task-toolbar .seg {width:auto;flex:1;max-width:none;}
 .task-toolbar #task-refresh {margin-left:auto;}
 .task-filters select {flex:1;min-width:140px;}
 .task-filters .search {max-width:none;}
 .board-context {flex-wrap:wrap;gap:4px;}
 .kcol-meta {font-size:11px;}
 .drag-handle {min-width:40px;height:36px;}
 .task-open {font-size:14px;}
 .task-advance {font-size:13px;min-height:40px;}
 .kc-actions .kc-wait {font-size:11px;}
 .task-confirm {padding:20px;}
 .drawer-header,.drawer-content {padding:20px;}
 .drawer-footer {padding:16px 20px max(20px,env(safe-area-inset-bottom));}
 .board-help {font-size:11px;}
}

/* Asset catalog illustrations: same visual language in catalog, room and search. */
.asset-visual { display:block; width:100%; height:100%; }
.sku-row .ico { width:52px; height:48px; flex-basis:52px; border-radius:12px; background:#f3f5f7; }
.sku-head .ico.big:has(.asset-visual) { width:76px; height:68px; flex-basis:76px; }
.inv-row .ico:has(.asset-visual), .hit .ico:has(.asset-visual), .idle-row .ico:has(.asset-visual) { width:52px; height:46px; flex-basis:52px; }
@media(max-width:600px) { .sku-row { padding:12px; gap:10px; } .sku-row .ico { width:46px; height:44px; flex-basis:46px; } .sku-head .ico.big:has(.asset-visual) { width:68px; height:60px; flex-basis:68px; } }

/* Dense audit rows keep the summary and metadata visible without opening. */
#audit-body > .audit-kpis { margin-bottom:16px; gap:12px; }
.audit-kpis > div { padding:12px 16px; }
.audit-kpis b { margin-top:4px; font-size:24px; }
.audit-card { margin-bottom:4px; border-radius:5px; }
.audit-card summary { padding:9px 12px; }
.audit-top { gap:10px; }
.audit-summary { display:grid; grid-template-columns:76px minmax(0,1fr); column-gap:10px; row-gap:2px; align-items:baseline; }
.audit-summary b { font-size:12px; }
.audit-summary p { margin:0; line-height:1.5; }
.audit-summary > .tiny { grid-column:2; font-size:11px; line-height:1.4; }
.audit-duration { min-width:36px; text-align:right; font-size:11px; }
.audit-body { padding:12px 16px; gap:7px; font-size:12px; }
@media(max-width:600px) {
 #audit-body > .audit-kpis { gap:8px; margin-bottom:12px; }
 .audit-kpis > div { padding:10px; }
 .audit-card summary { padding:9px 10px; }
 .audit-top { gap:7px; }
 .audit-summary { grid-template-columns:minmax(0,1fr); gap:1px; }
 .audit-summary > .tiny { grid-column:1; }
 .audit-summary p { font-size:12px; }
 .audit-body { padding:10px 12px; }
}

.stocktake-picker { width:min(560px,calc(100vw - 32px)); max-height:80vh; padding:0; border:1px solid var(--hair); border-radius:12px; color:var(--ink); }
.stocktake-picker::backdrop { background:#17263866; }
.stocktake-picker-content { padding:16px 20px; }
.stocktake-picker-content .search { width:100%; }
#stocktake-room-results { display:grid; gap:6px; max-height:48vh; overflow:auto; }
.stocktake-room-option { display:flex; justify-content:space-between; align-items:center; gap:12px; text-align:left; padding:12px; border:1px solid var(--hair); border-radius:6px; background:white; cursor:pointer; }
.stocktake-room-option:hover { background:#f0f4ff; border-color:#a2b7eb; }
.stocktake-room-option span { font-size:11px; color:var(--ink-3); }