/* ===== المهام ===== */
.tk { display: flex; flex-direction: column; gap: 12px; }
.tk-bar, .tk-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tk-sp { flex: 1; }
.tk-seg { display: inline-flex; background: #f1f5f9; border-radius: 10px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.tk-seg button { border: 0; background: transparent; padding: .4rem .85rem; border-radius: 8px; font: inherit; font-size: .85rem; font-weight: 800; color: var(--muted); cursor: pointer; transition: background .15s, color .15s; }
.tk-seg button:hover { color: var(--ink); }
.tk-seg button.is-on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.tk-filters label { display: flex; flex-direction: column; gap: 3px; font-size: .74rem; font-weight: 700; color: var(--muted); }
.tk-filters select, .tk-filters input { font: inherit; font-size: .85rem; padding: .42rem .6rem; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); }
.tk-filters input[type="search"] { align-self: flex-end; min-width: 200px; }
.tk-muted { color: var(--muted); font-size: .76rem; }
.tk-red { color: var(--red); font-weight: 900; }
.tk-ref { color: var(--muted); font-weight: 700; font-size: .7rem; }
.tk-chip { padding: .08rem .5rem; border-radius: 999px; font-size: .7rem; font-weight: 800; background: #f1f5f9; color: #334155; white-space: nowrap; }
.tk-prio { padding: .08rem .5rem; border-radius: 999px; font-size: .7rem; font-weight: 900; white-space: nowrap; }
.tk-prio.is-urgent { background: #fee2e2; color: #b91c1c; }
.tk-prio.is-high { background: #ffedd5; color: #c2410c; }
.tk-prio.is-normal { background: #e0f2fe; color: #0369a1; }
.tk-prio.is-low { background: #f1f5f9; color: #64748b; }
.tk-stage { padding: .08rem .5rem; border-radius: 6px; font-size: .7rem; font-weight: 800; background: #eef2ff; color: #3730a3; }
.tk-stage.is-wait { background: #fef3c7; color: #92400e; }
.tk-stage.is-done { background: #dcfce7; color: #166534; }
.tk-stage.is-cancel { background: #e2e8f0; color: #475569; }
.tk-due { font-size: .72rem; font-weight: 800; color: #475569; white-space: nowrap; }
.tk-due.is-today { color: #b45309; }
.tk-due.is-late { color: var(--red); }
.tk-steps { font-size: .7rem; font-weight: 900; color: #475569; background: #f8fafc; border: 1px solid var(--line); border-radius: 6px; padding: 0 .35rem; }
.tk-steps.is-full { color: #166534; border-color: #bbf7d0; background: #f0fdf4; }
.tk-av { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #e0e7ff; color: #3730a3; font-size: .66rem; font-weight: 900; flex: none; }
.tk-who { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; font-weight: 700; }
/* KPIs */
.tk-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.tk-kpis > div { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; border-inline-start: 4px solid #cbd5e1; }
.tk-kpis span { font-size: .76rem; color: var(--muted); font-weight: 700; }
.tk-kpis b { font-size: 1.4rem; }
.tk-kpis .is-late { border-inline-start-color: var(--red); } .tk-kpis .is-today { border-inline-start-color: #f59e0b; }
.tk-kpis .is-wait { border-inline-start-color: #eab308; } .tk-kpis .is-done { border-inline-start-color: var(--green); }
/* my list */
.tk-group { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.tk-group > summary { list-style: none; cursor: pointer; padding: 10px 14px; font-weight: 900; display: flex; gap: 8px; align-items: center; background: #fafafa; }
.tk-group > summary::-webkit-details-marker { display: none; }
.tk-group > summary b { background: #e2e8f0; border-radius: 999px; padding: 0 .5rem; font-size: .75rem; }
.tk-group.is-late > summary { color: #b91c1c; } .tk-group.is-today > summary { color: #b45309; }
.tk-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-top: 1px solid #f1f5f9; cursor: pointer; border-inline-start: 3px solid transparent; transition: background .15s; }
.tk-row:hover { background: #f8fafc; }
.tk-row.is-urgent { border-inline-start-color: #ef4444; } .tk-row.is-high { border-inline-start-color: #f97316; }
.tk-row.is-done .tk-row-t { text-decoration: line-through; color: var(--muted); }
.tk-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.tk-row-t { font-weight: 800; overflow-wrap: anywhere; }
.tk-row-m { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tk-check input { width: 20px; height: 20px; accent-color: var(--green); cursor: pointer; margin-top: 2px; }
.tk-empty { background: #fff; border: 1px dashed var(--line); border-radius: 14px; padding: 22px; text-align: center; display: flex; flex-direction: column; gap: 4px; color: var(--muted); }
.tk-empty b { color: var(--ink); }
.tk-notes { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.tk-notes-h { display: flex; justify-content: space-between; align-items: center; }
.tk-note { border: 0; background: #fff; border-radius: 9px; padding: .45rem .6rem; text-align: start; font: inherit; font-size: .84rem; cursor: pointer; transition: background .15s; }
.tk-note:hover { background: #dbeafe; }
/* board */
.tk-board { display: grid; grid-template-columns: repeat(var(--cols), minmax(210px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 6px; align-items: start; }
.tk-col { background: #f1f5f9; border-radius: 14px; padding: 8px; min-height: 240px; display: flex; flex-direction: column; gap: 8px; transition: background .15s, outline-color .15s; outline: 2px dashed transparent; }
.tk-col > header { display: flex; justify-content: space-between; align-items: center; font-weight: 900; font-size: .86rem; padding: 2px 6px; border-top: 3px solid #6366f1; padding-top: 8px; border-radius: 4px; }
.tk-col.is-wait > header { border-top-color: #eab308; } .tk-col.is-done > header { border-top-color: var(--green); }
.tk-col > header b { background: #fff; border-radius: 999px; padding: 0 .5rem; font-size: .75rem; }
.tk-col.is-over { background: #e0e7ff; outline-color: #6366f1; }
.tk-col-list { display: flex; flex-direction: column; gap: 8px; }
.tk-col-empty { color: var(--muted); font-size: .76rem; text-align: center; padding: 18px 6px; margin: 0; }
.tk-card[draggable="false"] { cursor: pointer; }
.tk-card { background: #fff; border-radius: 11px; padding: 10px 11px; box-shadow: 0 1px 2px rgba(15, 23, 42, .08); cursor: grab; display: flex; flex-direction: column; gap: 7px; border-inline-start: 3px solid transparent; transition: box-shadow .15s, transform .15s; }
.tk-card:hover { box-shadow: 0 4px 12px rgba(15, 23, 42, .12); }
.tk-card.is-drag { opacity: .5; transform: rotate(1deg); }
.tk-card.is-urgent { border-inline-start-color: #ef4444; } .tk-card.is-high { border-inline-start-color: #f97316; }
.tk-card.is-late { background: #fff7f7; }
.tk-card-t { font-weight: 800; font-size: .88rem; overflow-wrap: anywhere; }
.tk-card-m, .tk-card-f { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
/* team */
.tk-team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 12px; align-items: start; }
.tk-team { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.tk-team > header { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-bottom: 8px; }
.tk-team h4 { margin: 0; }
.tk-tr { cursor: pointer; } .tk-tr:hover td { background: #f8fafc; }
/* task modal */
.tk-modal { width: min(820px, 96vw) !important; max-width: 96vw !important; padding: 18px 22px !important; max-height: 92vh; overflow: auto; }
.tk-d, .tk-new { display: flex; flex-direction: column; gap: 12px; }
.tk-d-h { display: flex; gap: 8px; align-items: center; }
.tk-d-title { flex: 1; min-width: 0; font: inherit; font-size: 1.1rem; font-weight: 900; border: 1px solid transparent; border-radius: 8px; padding: .3rem .5rem; background: transparent; color: var(--ink); }
.tk-d-title:hover:not(:disabled), .tk-d-title:focus { border-color: var(--line); background: #fff; outline: none; }
.tk-d-stages { display: flex; flex-wrap: wrap; gap: 4px; }
.tk-st { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: .3rem .8rem; font: inherit; font-size: .8rem; font-weight: 800; cursor: pointer; color: #475569; transition: background .15s, border-color .15s; }
.tk-st:hover:not(:disabled) { border-color: #6366f1; }
.tk-st.is-on { background: #6366f1; border-color: #6366f1; color: #fff; }
.tk-st.is-wait.is-on { background: #eab308; border-color: #eab308; color: #422006; }
.tk-st.is-done.is-on { background: var(--green); border-color: var(--green); }
.tk-st:disabled { cursor: default; }
.tk-d-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.tk-d-grid label, .tk-d-desc { display: flex; flex-direction: column; gap: 4px; font-size: .76rem; font-weight: 700; color: var(--muted); }
.tk-d-grid .tk-wide { grid-column: 1 / -1; }
.tk-d input, .tk-d select, .tk-d textarea, .tk-new input, .tk-new select, .tk-new textarea, .tk-cfg input, .tk-cfg select, .tk-cfg textarea, .tk-tpl input, .tk-tpl select, .tk-tpl textarea {
  font: inherit; font-size: .86rem; color: var(--ink); padding: .42rem .55rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.tk-d :disabled { background: #f8fafc; color: #334155; }
.tk-inline { display: flex; gap: 6px; align-items: center; }
.tk-inline > input, .tk-inline > textarea { flex: 1; min-width: 0; }
.tk-d-sec { border-top: 1px solid #f1f5f9; padding-top: 10px; }
.tk-d-sec h4 { margin: 0 0 6px; display: flex; gap: 8px; align-items: center; }
.tk-d-sec > summary { cursor: pointer; font-weight: 800; }
.tk-step { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.tk-step label { flex: 1; display: flex; gap: 8px; align-items: center; cursor: pointer; }
.tk-step input { width: 18px; height: 18px; accent-color: var(--green); }
.tk-step.is-done label { text-decoration: line-through; color: var(--muted); }
.tk-cm { background: #f8fafc; border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; }
.tk-cm p { margin: 4px 0 0; white-space: pre-line; line-height: 1.7; }
.tk-act { font-size: .8rem; padding: 2px 0; }
.tk-d-f { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tk-assign { border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tk-assign legend { font-size: .76rem; font-weight: 700; color: var(--muted); padding: 0 4px; }
.tk-pick { display: inline-flex; gap: 5px; align-items: center; background: #f8fafc; border: 1px solid var(--line); border-radius: 999px; padding: .2rem .6rem; font-size: .8rem; cursor: pointer; }
.tk-pick:has(input:checked) { background: #eef2ff; border-color: #6366f1; }
/* settings */
.tk-cfg { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.tk-cfg h4 { margin: 0 0 4px; display: flex; gap: 8px; align-items: center; }
.tk-cfg-row { display: flex; gap: 6px; align-items: center; }
.tk-cfg-row input { flex: 1; min-width: 0; }
.tk-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 10px; }
.tk-tpl { border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; background: #fcfcfd; }
.tk-tpl-h { display: flex; gap: 6px; } .tk-tpl-h input { flex: 1; font-weight: 800; }
@media (max-width: 700px) {
  .tk-board { grid-template-columns: repeat(var(--cols), 82vw); scroll-snap-type: x mandatory; }
  .tk-col { scroll-snap-align: start; }
  .tk-filters input[type="search"] { min-width: 0; flex: 1; }
}