/* ============================================================
   MyStar Gestionale — Attività (tasks board) styles
   Ported from Liaison's tasks screen, re-themed on MyStar tokens.
   ============================================================ */

/* ---- head / toolbar ---- */
.tk-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
.tk-head__count{ font-size:14px; color:var(--ink-3); font-weight:500; }
.tk-head__count b{ color:var(--ink); font-weight:600; }
.tk-head__actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tk-viewtog{ display:flex; gap:3px; background:var(--line-2); padding:3px; border-radius:11px; }
.tk-viewtog__b{ display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px; border:none; background:transparent; border-radius:8px; font-size:13.5px; font-weight:600; color:var(--ink-3); transition:all .12s; }
.tk-viewtog__b i{ font-size:16px; }
.tk-viewtog__b:hover{ color:var(--ink); }
.tk-viewtog__b.is-on{ background:var(--white); color:var(--ink); box-shadow:var(--shadow-sm); }
.tk-new i{ font-size:16px; }

/* ---- filter bar ---- */
.tk-filter{ margin-bottom:18px; }
.tk-filter__top{ display:flex; align-items:center; gap:10px; }
.tk-search{ position:relative; flex:1; max-width:420px; }
.tk-search i{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--ink-4); font-size:17px; }
.tk-search input{ width:100%; height:44px; padding:0 14px 0 38px; background:var(--white); border:1px solid var(--line); border-radius:11px; font-size:14.5px; color:var(--ink); outline:none; box-shadow:var(--shadow-sm); transition:border-color .15s, box-shadow .15s; }
.tk-search input::placeholder{ color:var(--ink-4); }
.tk-search input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); }
.tk-filter__toggle{ display:inline-flex; align-items:center; gap:7px; height:44px; padding:0 15px; border:1px solid var(--line); background:var(--white); border-radius:11px; font-size:14px; font-weight:600; color:var(--ink-2); box-shadow:var(--shadow-sm); }
.tk-filter__toggle i{ font-size:16px; }
.tk-filter__toggle:hover{ background:var(--canvas); }
.tk-filter__toggle.is-active{ border-color:var(--accent); color:var(--accent-ink); background:var(--accent-wash); }
.tk-filter__badge{ display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:99px; background:var(--accent); color:#fff; font-size:11px; font-weight:700; }
.tk-filter__clear{ display:inline-flex; align-items:center; gap:6px; height:44px; padding:0 13px; border:none; background:transparent; color:var(--ink-3); font-size:14px; font-weight:600; border-radius:10px; }
.tk-filter__clear:hover{ background:var(--line-2); color:var(--ink); }
.tk-filter__body{ max-height:0; overflow:hidden; transition:max-height .22s ease, margin .22s ease; }
.tk-filter.is-open .tk-filter__body{ max-height:320px; margin-top:14px; }
.tk-filter__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:14px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-sm); }
.tk-f{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.tk-f > span{ font-size:12.5px; font-weight:600; color:var(--ink-2); }

/* ---- inputs ---- */
.tk-input{ width:100%; height:44px; padding:0 13px; border:1px solid var(--line); border-radius:10px; font-size:14.5px; color:var(--ink); background:var(--white); outline:none; font-family:inherit; transition:border-color .14s, box-shadow .14s; }
textarea.tk-input{ height:auto; padding:11px 13px; resize:vertical; min-height:70px; line-height:1.5; }
.tk-input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); }
select.tk-input{ appearance:none; cursor:pointer; }

/* ---- board ---- */
.tk-board{ display:flex; gap:16px; align-items:flex-start; overflow-x:auto; padding-bottom:8px; }
.tk-col{ flex:0 0 304px; width:304px; background:var(--canvas); border:1px solid var(--line); border-radius:var(--radius); display:flex; flex-direction:column; max-height:calc(100vh - 250px); }
.tk-col__head{ display:flex; align-items:center; gap:9px; padding:13px 14px 11px; }
.tk-col__dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.tk-col__title{ font-weight:700; font-size:13.5px; letter-spacing:-.01em; }
.tk-col__count{ margin-left:auto; font-family:var(--mono); font-size:12px; font-weight:600; color:var(--ink-4); background:var(--line-2); padding:2px 8px; border-radius:99px; }
.tk-col__body{ display:flex; flex-direction:column; gap:9px; padding:4px 10px 10px; overflow-y:auto; flex:1; min-height:24px; border-radius:10px; transition:background .12s; }
.tk-col__body.is-over{ background:var(--accent-wash); outline:2px dashed #B9D7FB; outline-offset:-4px; }
.tk-col__empty{ color:var(--ink-4); font-size:13px; text-align:center; padding:14px 0; }
.tk-col__add{ display:flex; align-items:center; justify-content:center; gap:6px; margin:2px 10px 12px; height:36px; border:1px dashed var(--line); border-radius:9px; background:transparent; color:var(--ink-3); font-size:13px; font-weight:600; }
.tk-col__add i{ font-size:15px; }
.tk-col__add:hover{ border-color:var(--accent); color:var(--accent); background:var(--white); }
.tk-col-add{ flex:0 0 200px; align-self:flex-start; display:flex; align-items:center; justify-content:center; gap:7px; height:46px; border:1px dashed var(--line); border-radius:var(--radius); background:transparent; color:var(--ink-3); font-size:13.5px; font-weight:600; }
.tk-col-add i{ font-size:16px; }
.tk-col-add:hover{ border-color:var(--accent); color:var(--accent); background:var(--white); }

/* ---- card ---- */
.tk-card{ background:var(--white); border:1px solid var(--line); border-radius:11px; padding:11px 12px; box-shadow:var(--shadow-sm); cursor:pointer; transition:box-shadow .12s, transform .06s; }
.tk-card:hover{ box-shadow:var(--shadow-md); }
.tk-card.is-dragging{ opacity:.5; }
.tk-card__row{ display:flex; align-items:flex-start; gap:8px; }
.tk-card__pri{ margin-top:2px; flex:none; }
.tk-card__title{ font-weight:600; font-size:14px; line-height:1.35; letter-spacing:-.01em; }
.tk-card__chips{ display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; }
.tk-card__foot{ display:flex; align-items:center; gap:10px; margin-top:10px; }

/* ---- chips (student = accent, meta = neutral) ---- */
.tk-chip{ display:inline-flex; align-items:center; gap:5px; height:23px; padding:0 9px; border-radius:7px; font-size:11.5px; font-weight:600; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.tk-chip i{ font-size:13px; }
.tk-chip--acct{ background:var(--accent-wash); color:var(--accent-ink); }
.tk-chip--acct::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none; }
.tk-chip--obj{ background:var(--line-2); color:var(--ink-2); }

/* ---- priority glyph ---- */
.tk-pri{ display:inline-flex; align-items:center; gap:6px; }
.tk-pri__txt{ font-size:12.5px; font-weight:600; color:var(--ink-2); }
.tk-pri-ico{ display:block; }

/* ---- due ---- */
.tk-due{ display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:11.5px; font-weight:600; color:var(--ink-3); }
.tk-due i{ font-size:13px; }
.tk-due.is-soon{ color:var(--amber); }
.tk-due.is-overdue{ color:var(--red); }

/* ---- list view ---- */
.tk-list--grouped{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; }
.tk-lsection{ border-bottom:1px solid var(--line-2); }
.tk-lsection:last-child{ border-bottom:none; }
.tk-lsection__head{ display:flex; align-items:center; gap:9px; width:100%; padding:11px 16px; background:var(--canvas); border:none; border-bottom:1px solid var(--line-2); font-size:13px; font-weight:700; color:var(--ink-2); cursor:pointer; }
.tk-lsection__caret{ font-size:14px; color:var(--ink-4); }
.tk-lsection__dot{ width:9px; height:9px; border-radius:50%; }
.tk-lsection__count{ margin-left:auto; font-family:var(--mono); font-size:12px; color:var(--ink-4); }
.tk-lsection.is-collapsed .tk-lsection__body{ display:none; }
.tk-lrow{ display:flex; align-items:center; gap:12px; width:100%; padding:13px 16px; background:var(--white); border:none; border-bottom:1px solid var(--line-2); cursor:pointer; text-align:left; transition:background .1s; }
.tk-lsection__body .tk-lrow:last-child{ border-bottom:none; }
.tk-lrow:hover{ background:var(--accent-wash); }
.tk-lrow__status{ width:8px; height:8px; border-radius:50%; flex:none; }
.tk-lrow__main{ flex:1; min-width:0; display:flex; align-items:center; gap:12px; }
.tk-lrow__title{ font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:46%; }
.tk-lrow__chips{ display:flex; gap:5px; overflow:hidden; }
.tk-lrow__meta{ display:flex; align-items:center; gap:14px; flex:none; }

.empty{ padding:60px 24px; text-align:center; color:var(--ink-3); }

/* ============================================================
   MODAL (Liaison-style overlay, MyStar look)
   ============================================================ */
.modal-overlay{ position:fixed; inset:0; z-index:100; background:rgba(0,9,18,.42); backdrop-filter:blur(2px); display:grid; place-items:center; padding:24px; opacity:0; pointer-events:none; transition:opacity .16s; }
.modal-overlay.is-open{ opacity:1; pointer-events:auto; }
.modal-overlay .modal{ width:100%; max-width:560px; background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); max-height:92vh; display:flex; flex-direction:column; overflow:hidden; transform:translateY(8px) scale(.99); transition:transform .18s; }
.modal-overlay.is-open .modal{ transform:none; }
.modal__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:24px 26px 6px; }
.modal__title{ font-size:21px; font-weight:700; letter-spacing:-.01em; margin:0; }
.modal__subtitle{ font-size:13.5px; color:var(--ink-3); margin-top:5px; }
.modal__close{ width:34px; height:34px; flex:none; border:none; background:var(--line-2); color:var(--ink-3); border-radius:9px; display:grid; place-items:center; font-size:18px; }
.modal__close:hover{ background:var(--line); color:var(--ink); }
.modal__body{ padding:18px 26px 8px; overflow-y:auto; }
.modal__body .tk-f{ margin-bottom:16px; }
.modal__foot{ padding:16px 26px 22px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid var(--line-2); margin-top:10px; }
.tk-foot{ }
.tk-f-row{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.tk-chosen{ margin-top:10px; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.tk-chosen__empty{ font-size:13px; color:var(--ink-4); }
.tk-chosen__x{ width:22px; height:22px; border:none; background:var(--line-2); color:var(--ink-3); border-radius:6px; display:grid; place-items:center; font-size:13px; }
.tk-chosen__x:hover{ background:var(--red-bg); color:var(--red); }
.tk-del{ display:inline-flex; align-items:center; gap:6px; border:none; background:transparent; color:var(--red); font-size:14px; font-weight:600; padding:8px 6px; border-radius:8px; }
.tk-del i{ font-size:15px; }
.tk-del:hover{ background:var(--red-bg); }

/* stage editor + palette */
.tk-stagelist{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.tk-stage-item{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; }
.tk-stage-item__lbl{ font-weight:600; font-size:14px; }
.tk-stage-item__tag{ margin-left:auto; font-size:11px; font-weight:600; color:var(--ink-4); background:var(--line-2); padding:3px 8px; border-radius:99px; }
.tk-stage-item__del{ margin-left:auto; width:26px; height:26px; border:none; background:transparent; color:var(--ink-4); border-radius:7px; display:grid; place-items:center; font-size:14px; }
.tk-stage-item__del:hover{ background:var(--red-bg); color:var(--red); }
.tk-addstage{ display:flex; gap:9px; }
.tk-addstage .tk-input{ flex:1; }
.tk-palette{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.tk-swatch{ aspect-ratio:1; border:2px solid transparent; border-radius:10px; display:grid; place-items:center; color:#fff; font-size:16px; cursor:pointer; }
.tk-swatch.is-current{ border-color:var(--ink); }

/* ============================================================
   ENHANCED SELECT (lia-sel)
   ============================================================ */
.lia-sel__native{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); opacity:0; pointer-events:none; }
.lia-sel{ position:relative; }
.lia-sel__btn{ display:flex; align-items:center; gap:8px; width:100%; height:44px; padding:0 12px; border:1px solid var(--line); border-radius:10px; background:var(--white); font-size:14.5px; font-weight:500; color:var(--ink); cursor:pointer; text-align:left; }
.lia-sel__btn:hover{ border-color:var(--ink-4); }
.lia-sel.is-disabled .lia-sel__btn{ opacity:.55; cursor:not-allowed; }
.lia-sel__val{ flex:1; display:flex; align-items:center; gap:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lia-sel__car{ font-size:15px; color:var(--ink-4); flex:none; }
.lia-sel__sk{ flex:1; height:14px; border-radius:5px; background:linear-gradient(90deg,var(--line-2),var(--line),var(--line-2)); background-size:200% 100%; animation:tkshimmer 1.2s infinite; }
.lia-sel__menu{ background:var(--white); border:1px solid var(--line); border-radius:11px; box-shadow:var(--shadow-md); padding:5px; max-height:260px; overflow-y:auto; }
.lia-sel__menu--portal{ position:fixed; z-index:120; display:none; }
.lia-sel__menu--portal.is-open{ display:block; }
.lia-sel__item{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 11px; border-radius:8px; cursor:pointer; font-size:14px; }
.lia-sel__item:hover{ background:var(--accent-wash); }
.lia-sel__item.is-current{ color:var(--accent-ink); font-weight:600; }
.lia-sel__item i{ color:var(--accent); }
.lia-sel__item-txt{ display:flex; align-items:center; gap:7px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ============================================================
   DATE FIELD + CALENDAR (portal)
   ============================================================ */
.tk-datefield__btn{ display:flex; align-items:center; gap:8px; width:100%; height:44px; padding:0 13px; border:1px solid var(--line); border-radius:10px; background:var(--white); font-size:14.5px; color:var(--ink); cursor:pointer; font-family:inherit; }
.tk-datefield__btn i{ color:var(--ink-4); font-size:16px; }
.tk-datefield__btn span{ font-family:var(--mono); }
.tk-datefield__btn.is-empty span{ color:var(--ink-4); font-family:var(--sans); }
.tk-datefield__btn:hover{ border-color:var(--ink-4); }
.tk-cal{ width:264px; background:var(--white); border:1px solid var(--line); border-radius:13px; box-shadow:var(--shadow-lg); padding:12px; }
.tk-cal--portal{ position:fixed; z-index:130; }
.tk-cal__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.tk-cal__title{ font-size:14px; font-weight:700; }
.tk-cal__nav{ width:30px; height:30px; border:none; background:transparent; color:var(--ink-2); border-radius:8px; display:grid; place-items:center; font-size:15px; }
.tk-cal__nav:hover{ background:var(--line-2); color:var(--accent); }
.tk-cal__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.tk-cal__dow{ text-align:center; font-size:10.5px; font-weight:600; color:var(--ink-4); padding:4px 0; text-transform:uppercase; }
.tk-cal__day{ aspect-ratio:1; border:none; background:transparent; border-radius:8px; font-family:var(--mono); font-size:12.5px; color:var(--ink); cursor:pointer; }
.tk-cal__day:hover:not(:disabled){ background:var(--accent-wash); }
.tk-cal__day.is-empty{ visibility:hidden; }
.tk-cal__day.is-today{ font-weight:700; color:var(--accent); }
.tk-cal__day.is-inrange{ background:var(--accent-wash); border-radius:0; }
.tk-cal__day.is-sel{ background:var(--accent); color:#fff; font-weight:700; }
.tk-cal__foot{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; padding-top:8px; border-top:1px solid var(--line-2); }
.tk-cal__foot button{ border:none; background:transparent; color:var(--accent-ink); font-size:12.5px; font-weight:600; padding:5px 8px; border-radius:7px; }
.tk-cal__foot button:hover{ background:var(--accent-wash); }
.tk-cal__hint{ font-size:11px; color:var(--ink-4); }

/* ============================================================
   CONTEXT MENU
   ============================================================ */
.tk-ctx{ position:fixed; z-index:140; min-width:190px; background:var(--white); border:1px solid var(--line); border-radius:11px; box-shadow:var(--shadow-lg); padding:5px; }
.tk-ctx__item{ display:flex; align-items:center; gap:10px; width:100%; padding:9px 11px; border:none; background:transparent; border-radius:8px; font-size:13.5px; font-weight:500; color:var(--ink); cursor:pointer; text-align:left; }
.tk-ctx__item i{ font-size:16px; color:var(--ink-3); }
.tk-ctx__item:hover{ background:var(--accent-wash); }
.tk-ctx__item.is-danger{ color:var(--red); }
.tk-ctx__item.is-danger i{ color:var(--red); }
.tk-ctx__more{ margin-left:auto; }

/* skeleton shimmer */
@keyframes tkshimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }
.tk-sk{ background:linear-gradient(90deg,var(--line-2),var(--line),var(--line-2)); background-size:200% 100%; animation:tkshimmer 1.2s infinite; border-radius:8px; }
.tk-sk--card{ height:60px; }
.tk-sk--mini{ width:24px; height:16px; }
.tk-sk--count{ display:inline-block; width:70px; height:14px; }

@media (max-width:760px){
  .tk-f-row{ grid-template-columns:1fr; }
  .tk-col{ flex-basis:264px; width:264px; }
}