/* Iteration 5: «جدول» (<RecordTable />) shared design (rtk-) — used by every table case study — and the table→kanban case (tkb-). */
.rtk .toast { pointer-events: auto; }
.rtk .w-actions:empty { padding: 0; }

/* toolbar: search + count + filter … add (left) — the bulk bar fades over it while rows are selected */
.rtk-tb { position: relative; height: 38px; flex: none; }
.rtk-tb .toolbar { height: 38px; }
.rtk-q { width: 250px; min-height: 34px; height: 34px; flex: none; }
.rtk-q input { all: unset; flex: 1; min-width: 0; font: inherit; font-size: 13.5px; }
.rtk-q input::placeholder { color: var(--muted-foreground); opacity: .8; }
.rtk-q:focus-within { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent); }
.rtk .cnt { font-size: 12.5px; white-space: nowrap; }
.rtk-sp { flex: 1; }
.rtk-fb { gap: 6px; }
.rtk-fb.on { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); }
.rtk-fc:empty { display: none; }
.rtk-fc { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--primary); color: var(--primary-foreground); font-size: 11px; display: inline-grid; place-items: center; }
.tb-bulk { position: absolute; inset: 0; background: var(--card); opacity: 0; pointer-events: none; transition: opacity .2s; gap: 6px; }
.tb-bulk.show { opacity: 1; pointer-events: auto; }
.tb-bulk .selc { font-size: 14px; white-space: nowrap; }
.tb-bulk .sum { font-size: 12.5px; white-space: nowrap; }

/* active tag filters + select-all banner */
.rtk-chips { display: flex; align-items: center; gap: 6px; height: 0; overflow: hidden; flex: none; margin-top: -8px; transition: height .2s, margin .2s; }
.rtk-chips.show { height: 28px; margin-top: 0; }
.rtk-chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding-inline: 10px 4px; border-radius: 99px; background: color-mix(in srgb, var(--primary) 10%, var(--card)); color: var(--primary); font-size: 12px; }
.rtk-chip button { all: unset; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; cursor: pointer; }
.rtk-chip button:hover { background: color-mix(in srgb, var(--primary) 18%, transparent); }
.rtk-chip .i { width: 12px; height: 12px; }
.rtk .btn.link { background: none; color: var(--primary); height: 24px; }
.rtk .allbanner { height: 0; overflow: hidden; flex: none; margin-top: -8px; transition: height .2s, margin .2s; }
.rtk .allbanner.show { height: 34px; margin-top: 0; }
.rtk .allbanner > div { height: 34px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 8px; font-size: 13px; background: color-mix(in srgb, var(--chart-5) 10%, var(--card)); }
.rtk .allbanner.all > div { background: color-mix(in srgb, var(--primary) 10%, var(--card)); }

/* table */
.rtk-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; transition: grid-template-columns .3s var(--ease); }
.rtk.has-side .rtk-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.rtk-side:empty { display: none; }
.rtk.alt-on .rtk-main { display: none; }
.rtk-alt { flex: 1; min-height: 0; }
.rtk-tbl { border: 1px solid var(--border); border-radius: 10px; overflow: auto; position: relative; min-height: 0; }
.rtk-t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rtk-t th, .rtk-t td { padding: 0 12px; text-align: start; white-space: nowrap; }
.rtk-t thead th { position: sticky; top: 0; z-index: 1; background: var(--muted); color: var(--muted-foreground); font-size: 12px; font-weight: 600; height: 36px; }
.rtk-t .num { text-align: end; font-variant-numeric: tabular-nums; }
.rtk-t th.rtk-g, .rtk-t td.rtk-g { width: 26px; padding: 0; padding-inline-start: 4px; }
.rtk-t th.rtk-c, .rtk-t td.rtk-c { width: 40px; padding: 0 10px; }
.rtk-t th.rtk-a, .rtk-t td.rtk-a { width: 72px; padding: 0 6px; }
.rtk-t td.rtk-a .row { gap: 2px; justify-content: flex-end; }
.rtk-t tr.rtk-open { cursor: pointer; }
.rtk-t tfoot td { background: var(--muted); font-weight: 700; border-top: 1px solid var(--border); height: 38px; }
.rtk-t td[contenteditable] { outline: 0; cursor: text; }
.rtk-t td[contenteditable]:focus { box-shadow: inset 0 0 0 2px var(--ring); background: var(--field-filled); }
.rtk-t tbody tr.flash td { animation: rtk-flash 1.3s ease; }
@keyframes rtk-flash { 0%, 100% { background: transparent; } 25% { background: color-mix(in srgb, var(--primary) 16%, transparent); } }
.rtk-hl { font-weight: 600; }
.grip[aria-disabled="true"] { cursor: not-allowed; opacity: .2 !important; }

/* 3-state header sort: label → label ↑ → label ↓ → label */
.rtk-sb { all: unset; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 6px; margin-inline: -6px; border-radius: 6px; font-weight: 600; cursor: pointer; color: inherit; }
.rtk-sb:hover { background: color-mix(in srgb, var(--foreground) 7%, transparent); color: var(--foreground); }
.rtk-sb:focus-visible { outline: 2px solid var(--ring); }
.rtk-sb.on { color: var(--foreground); }
.rtk-sb .i { width: 13px; height: 13px; color: var(--primary); animation: reveal .25s both; }
.rtk-tag { cursor: pointer; display: inline-flex; border-radius: 99px; }
.rtk-tag:hover .badge { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 30%, transparent); }
.rtk-empty { display: grid; place-items: center; text-align: center; gap: 6px; padding: 40px 0; color: var(--muted-foreground); font-size: 12.5px; }
.rtk-empty b { color: var(--foreground); font-size: 14px; }
.rtk-pg { flex: none; height: 28px; display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--muted-foreground); }

/* menus + dialogs */
.rtk-menu { padding: 6px; }
.rtk-menu .mi { justify-content: flex-start; gap: 8px; }
.rtk-menu .mi .cb { width: 16px; height: 16px; }
.rtk-mh { font-size: 11.5px; color: var(--muted-foreground); padding: 4px 8px 2px; }
.rtk-fail { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--chart-3) 35%, var(--border)); border-radius: 8px; margin-bottom: 6px; background: color-mix(in srgb, var(--chart-3) 7%, var(--card)); font-size: 13px; }

/* ── table → kanban (tkb-) ── */
.tkb-board { display: flex; gap: 10px; height: 100%; overflow: auto; direction: rtl; }
.tkb-col { flex: 1 1 0; min-width: 150px; background: var(--muted); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow: auto; transition: background .2s, box-shadow .2s; }
.tkb-col.over { background: color-mix(in srgb, var(--primary) 9%, var(--muted)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 40%, transparent); }
.tkb-ch { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.tkb-ch b { flex: 1; }
.tkb-card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px; display: grid; gap: 6px; cursor: grab; font-size: 12.5px; transition: opacity .2s, border-color .2s; }
.tkb-card:hover, .tkb-card:focus-visible { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); outline: none; }
.tkb-card.dragging { opacity: .35; }
.tkb-card b { font-size: 13px; }
.tkb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted-foreground); }
.tkb-ghost { position: absolute; z-index: 20; width: 170px; background: var(--card); border: 1px solid var(--primary); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; box-shadow: var(--shadow-pop); pointer-events: none; rotate: -2deg; }
.tkb-empty { text-align: center; font-size: 12px; color: var(--muted-foreground); padding: 18px 0; }
.dlg.tkb-dlg { width: 760px; }
.tkb-bd { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; }
.tkb-pv { border: 1px solid var(--border); border-radius: 10px; padding: 10px; background: var(--card); min-width: 0; height: 280px; display: flex; flex-direction: column; gap: 6px; }
.tkb-pv .tkb-board { flex: 1; }
.tkb-pv .tkb-col { min-width: 96px; padding: 6px; gap: 5px; }
.tkb-pv .tkb-card { padding: 6px 7px; font-size: 11px; gap: 3px; cursor: default; }
.tkb-pv .tkb-card b { font-size: 11.5px; }
.tkb-pv .tkb-ch { font-size: 11.5px; }
.tkb-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.tkb-ro .chip[disabled] { opacity: .45; cursor: not-allowed; }
.tkb-note { font-size: 12px; color: var(--muted-foreground); display: flex; gap: 6px; align-items: flex-start; }
.tkb-note .i { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.rtk .seg.tkb-view button { display: inline-flex; align-items: center; gap: 5px; height: 26px; }
.rtk .seg.tkb-view .i { width: 14px; height: 14px; }
.rtk [hidden] { display: none !important; }
.tkb-pvb { display: flex; }
.tkb-pvb .tkb-board { flex: 1; height: auto; }
.tkb-dlg .chip[disabled] { opacity: .45; cursor: not-allowed; }
.rtk-side .tc-card { height: 100%; }
.dlg.tkb-dlg { width: 840px; }
.tkb-dlg .tkb-bd { grid-template-columns: 250px minmax(0, 1fr); }
.tkb-pv .tkb-board { overflow: hidden; gap: 6px; }
.tkb-pv .tkb-col { min-width: 0; overflow: hidden; }
.tkb-pv .tkb-meta { gap: 3px; font-size: 10.5px; }
.tkb-pv .tkb-meta .i { width: 11px; height: 11px; }
.tkb-pv .badge { height: 17px; padding: 0 6px; font-size: 10.5px; }

/* multi-term search (chips, same as the panel SearchBox) and inline single-select combo cells */
.rtk-qbox { flex-wrap: wrap; min-height: 36px; height: auto; width: 300px; padding: 4px 8px; gap: 6px; }
.rtk-terms { display: inline-flex; gap: 4px; flex-wrap: wrap; min-width: 0; }
.rtk-term { gap: 2px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rtk-term .btn.icon.xs { height: 16px; width: 16px; }
.rtk-combo { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 8px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; }
.rtk-combo:hover, .rtk-combo:focus-visible { border-color: var(--border); background: var(--accent); outline: none; }
.rtk-combo .i { width: 14px; height: 14px; flex: none; color: var(--muted-foreground); }
.rtk-combo-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rtk-cal { border: 1px solid var(--border); border-radius: 10px; padding: 10px; background: var(--card); }
.rtk-cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.rtk-cal-h { font-size: 12px; padding: 3px 0; }
.rtk-cal .cal-c { all: unset; box-sizing: border-box; height: 32px; display: grid; place-items: center; border-radius: 8px; cursor: pointer; font-size: 13px; }
.rtk-cal .cal-c:hover { background: var(--accent); }
.rtk-cal .cal-c.sel { background: var(--primary); color: var(--primary-foreground); }

/* ── generic add / edit form (record-table): tag chips, file drop, chart error ── */
.rtk-pickrow { display: flex; flex-wrap: wrap; gap: 6px; }
.rtk-pick { all: unset; cursor: pointer; border-radius: 999px; padding: 3px 3px; border: 1.5px solid transparent; }
.rtk-pick:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.rtk-pick.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.rtk-drop { border: 1.5px dashed var(--border); border-radius: 10px; padding: 14px; text-align: center; font-size: 12.5px; color: var(--muted-foreground); cursor: pointer; }
.tc-err { color: var(--destructive); font-size: 12.5px; line-height: 1.7; border: 1px solid color-mix(in srgb, var(--destructive) 35%, transparent); background: color-mix(in srgb, var(--destructive) 8%, transparent); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; }
.tc-err[hidden] { display: none; }
.tkb-opts .chip[aria-pressed="false"] { opacity: .55; }