/* Chamados (GLPI): cartões de status, lista com prioridade, quadro por status */
.tk-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 12px; align-items: stretch; margin-bottom: 14px; }
.tk-tile { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius-sm); cursor: pointer; text-align: left; font: inherit; color: inherit; transition: border-color .15s, transform .15s; }
.tk-tile:hover { border-color: hsl(var(--tc) / .55); transform: translateY(-1px); }
.tk-tile.on { border-color: hsl(var(--tc)); box-shadow: 0 0 0 1px hsl(var(--tc)) inset, var(--shadow); }
.tk-ti { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: hsl(var(--tc) / .14); color: hsl(var(--tc)); flex-shrink: 0; }
.tk-ti svg { width: 19px; height: 19px; }
.tk-tile small { display: block; font-size: 12px; color: hsl(var(--muted-fg)); font-weight: 600; }
.tk-tile b { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.tk-view { align-self: center; }
.tk-view button { display: inline-flex; align-items: center; gap: 5px; }
.tk-view button svg { width: 14px; height: 14px; }
.tk-view button.on { background: hsl(var(--primary) / .14); color: hsl(var(--primary)); }

/* lista */
.tk-tbl td { vertical-align: middle; font-size: 13px; padding-top: 10px; padding-bottom: 10px; }
.tk-tbl tbody tr { cursor: pointer; }
.tk-tbl tbody td:first-child { box-shadow: inset 4px 0 0 var(--pc, transparent); padding-left: 16px; }
tr.p-crit, .tk-card.p-crit { --pc: hsl(var(--danger)); }
tr.p-high, .tk-card.p-high { --pc: hsl(var(--orange)); }
tr.p-med, .tk-card.p-med { --pc: hsl(var(--primary) / .55); }
tr.p-low, .tk-card.p-low { --pc: hsl(var(--border)); }
.tk-t { display: flex; align-items: baseline; gap: 8px; max-width: 380px; }
.tk-t b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-id { font-size: 12px; color: hsl(var(--muted-fg)); flex-shrink: 0; }
.tk-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 5px; }
.tk-prio { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 4px; border: 1px solid hsl(var(--border)); color: hsl(var(--muted-fg)); white-space: nowrap; }
.tk-prio.p-crit { color: hsl(var(--danger)); background: hsl(var(--danger) / .1); border-color: hsl(var(--danger) / .35); }
.tk-prio.p-high { color: hsl(var(--orange)); background: hsl(var(--orange) / .1); border-color: hsl(var(--orange) / .35); }
.tk-prio.p-med { color: hsl(var(--fg)); }
.tk-cat, .tk-age { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: hsl(var(--muted-fg)); white-space: nowrap; }
.tk-cat svg, .tk-age svg { width: 12px; height: 12px; }
.tk-age.mid { color: hsl(38 92% 38%); } .dark .tk-age.mid { color: hsl(var(--warning)); }
.tk-age.old { color: hsl(var(--danger)); font-weight: 600; }
.tk-av { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; font-size: 10.5px; font-weight: 700; flex-shrink: 0; }
.tk-av.sm { width: 20px; height: 20px; font-size: 9px; }
.tk-client { display: inline-flex; align-items: center; gap: 8px; max-width: 170px; }
.tk-client span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.tk-users { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.tk-user { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.tk-more { font-size: 11.5px; color: hsl(var(--muted-fg)); font-weight: 600; }
.tk-groups { display: flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 11.5px; color: hsl(var(--muted-fg)); max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-groups svg { width: 12px; height: 12px; flex-shrink: 0; }
.tk-none { color: hsl(var(--danger)); font-size: 12px; font-weight: 600; }
.tk-req { max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: hsl(var(--muted-fg)); }
.tk-upd { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tk-upd i { width: 7px; height: 7px; border-radius: 50%; background: hsl(var(--border)); }
.tk-upd i.mid { background: hsl(var(--primary) / .5); }
.tk-upd i.on { background: hsl(var(--success)); box-shadow: 0 0 0 3px hsl(var(--success) / .18); }

/* quadro */
.tk-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 14px; }
.tk-col { background: hsl(var(--muted) / .6); border-radius: 12px; padding: 10px; min-width: 0; }
.tk-col-h { display: flex; align-items: center; gap: 8px; margin: 2px 4px 10px; font-size: 13px; }
.tk-col-h::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: hsl(var(--tc)); }
.tk-col-h span { margin-left: auto; font-size: 12px; font-weight: 700; color: hsl(var(--muted-fg)); }
.tk-card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-left: 4px solid var(--pc, hsl(var(--border))); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; font-size: 13px; transition: box-shadow .15s; }
.tk-card:hover { box-shadow: var(--shadow); }
.tk-card > b { line-height: 1.3; }
.tk-card-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tk-card-ft { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; font-size: 12px; }
.tk-card .tk-client { font-size: 12.5px; }
.tk-card .tk-av { width: 20px; height: 20px; font-size: 9px; }
.tk-empty { font-size: 12px; color: hsl(var(--muted-fg)); text-align: center; padding: 12px 0; }

@media (max-width: 1100px) { .tk-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tk-view { grid-column: 1 / -1; justify-self: end; } .tk-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tk-board { grid-template-columns: 1fr; } }
.tk-card .tk-groups { display: none; }
@media (max-width: 1100px) { .tk-board { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 640px) { .tk-board { grid-template-columns: 1fr !important; } }

/* painel de chamados no cliente */
.sd-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.sd-tiles .tk-tile { padding: 10px 12px; gap: 10px; }
.sd-tiles .tk-ti { width: 32px; height: 32px; border-radius: 9px; }
.sd-tiles .tk-tile b { font-size: 20px; }
.sd-tiles .tk-tile:not([data-sdst]) { cursor: default; }
.sd-tiles .tk-tile:not([data-sdst]):hover { transform: none; border-color: hsl(var(--border)); }
.sd-hrow { grid-template-columns: minmax(80px, 46%) 1fr auto !important; }
.sd-hrow .v { min-width: 28px !important; }
@media (max-width: 1300px) { .sd-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tk-catc { display: flex; flex-direction: column; max-width: 190px; line-height: 1.3; }
.tk-catc small { font-size: 11px; color: hsl(var(--muted-fg)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-catc span { font-weight: 600; font-size: 12.5px; }

/* filtros de status na aba de chamados do cliente */
.sd-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 16px; border-bottom: 1px solid hsl(var(--border)); font-size: 13px; }
.sd-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; border: 1px solid hsl(var(--border)); background: transparent; color: hsl(var(--muted-fg)); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.sd-chip svg { width: 13px; height: 13px; }
.sd-chip b { font-weight: 700; font-size: 11.5px; padding: 0 6px; border-radius: 999px; background: hsl(var(--muted)); color: hsl(var(--fg)); }
.sd-chip.on { border-color: hsl(var(--primary)); background: hsl(var(--primary) / .12); color: hsl(var(--primary)); }
.sd-tiles .tk-tile.on { border-color: hsl(var(--tc)); box-shadow: 0 0 0 1px hsl(var(--tc)) inset; }
/* filtro de entidade (lista do GLPI) */
.tk-ent { display: inline-flex; align-items: center; gap: 6px; border: 1px solid hsl(var(--border)); border-radius: 8px; padding: 0 6px 0 9px; background: hsl(var(--input-bg)); width: 230px; }
.tk-ent svg { width: 14px; height: 14px; color: hsl(var(--muted-fg)); flex-shrink: 0; }
.tk-ent input { border: 0; background: transparent; padding: 6px 0; font-size: 13px; box-shadow: none !important; min-width: 0; }
.tk-ent button { border: 0; background: none; color: hsl(var(--muted-fg)); cursor: pointer; display: grid; place-items: center; padding: 2px; }