/* dtable-grid.css — visual da grade editável (dtable-grid.js). Vem junto com dtable.css; usa só as variáveis do tema do app. */
.dtg{position:relative;display:grid;gap:12px;min-width:0}
.dtg .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dtg-ic{width:16px;height:16px;flex:none;vertical-align:-3px}
.dtg-ph{color:var(--mut)}

/* barra de ferramentas */
.dtg-tools{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center}
.dtg-search{display:flex;align-items:center;gap:8px;flex:1 1 240px;max-width:380px;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--mut)}
.dtg-search input{flex:1;min-width:0;border:0;background:transparent;outline:0;padding:0;color:var(--ink);min-height:0}
.dtg-search:focus-within{border-color:var(--pri);box-shadow:0 0 0 3px color-mix(in srgb,var(--pri) 20%,transparent)}
.dtg-grp{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--mut)}
.dtg-grp select{min-height:44px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);padding:0 10px;font-weight:600}
.dtg-btns{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.dtg-btns .btn{display:inline-flex;align-items:center;gap:6px;min-height:40px}
.dtg-btns .btn[aria-pressed=true]{background:var(--pri-l);border-color:var(--pri);color:var(--pri-d)}
.dtg-btns .btn:disabled{opacity:.4;pointer-events:none}

/* aviso de resultado (salvou, erro, colou…) */
.dtg-note{padding:9px 14px;border-radius:10px;font-size:.88rem;background:var(--ok-l);color:var(--ok)}
.dtg-note.bad{background:var(--bad-l);color:var(--bad)}

/* edição em lote */
.dtg-bulk{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:10px 14px;border-radius:12px;background:var(--pri-l);color:var(--pri-d)}
:root[data-theme=dark] .dtg-bulk{color:#fdba74}
.dtg-bulk select,.dtg-bulk input{min-height:38px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);padding:0 10px;max-width:200px}

/* células */
.dtg-table td.dtg-cell{position:relative;cursor:cell;outline:0}
.dtg-table td.dtg-cell:focus-visible{outline:0}
.dtg-cell.is-active{box-shadow:inset 0 0 0 2px var(--pri);background:color-mix(in srgb,var(--pri) 8%,var(--card))}
.dtg-cell.in-range{background:color-mix(in srgb,var(--pri) 12%,var(--card))}
.dtg-cell.is-invalid{box-shadow:inset 0 0 0 2px var(--bad);background:var(--bad-l)}
.dtg-cell.is-locked{cursor:not-allowed;background-image:repeating-linear-gradient(135deg,transparent 0 6px,color-mix(in srgb,var(--mut) 8%,transparent) 6px 7px)}
.dtg-cell.is-editing{padding:6px 8px;background:var(--card);box-shadow:inset 0 0 0 2px var(--pri)}
.dtg-cell.is-sticky{position:sticky;left:0;z-index:1;background:var(--card)}
.dtg-cellin{display:flex;align-items:center;gap:8px;min-width:0}
.dtg-cell.right .dtg-cellin{justify-content:flex-end}
.dtg-lockic{position:absolute;right:4px;top:4px;color:var(--mut);opacity:.7}
.dtg-lockic .dtg-ic{width:12px;height:12px}
.dtg-table tr.is-locked td:not(.dtg-selcol){color:var(--mut)}
.dtg-selcol{width:44px;padding-right:0!important}
.dtg-table tbody tr.is-sel td{background:var(--pri-l)}
.dtg-table tbody tr.is-sel td.dtg-cell.is-active{background:color-mix(in srgb,var(--pri) 18%,var(--pri-l))}
.dtg-empty{padding:28px;text-align:center;color:var(--mut)}
.dt.is-busy .dt-scroll{opacity:.55;transition:opacity .15s}

/* editores */
.dtg-in{width:100%;min-height:36px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font:inherit;box-sizing:border-box}
.dtg-in:focus{outline:2px solid var(--pri);outline-offset:0;border-color:var(--pri)}
.dtg-cell.right .dtg-in{text-align:right}
.dtg-tagpick{position:absolute;left:0;top:100%;z-index:25;min-width:200px;display:grid;gap:2px;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--card);box-shadow:0 12px 32px #0003}
.dtg-tagpick label{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;cursor:pointer}
.dtg-tagpick label:hover{background:var(--bg)}
.dtg-tagpick input{width:18px;height:18px;accent-color:var(--pri);margin:0}

/* tipos de célula */
.dtg-sel{display:inline-flex;align-items:center;gap:6px;min-width:0}
.dtg-sel>.dtg-ic{opacity:.45;width:14px;height:14px}
.dtg-minis{display:inline-flex;gap:4px;flex-wrap:wrap}
.dtg-tag{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;font-size:.82rem;font-weight:600;background:var(--bg);color:var(--mut);white-space:nowrap}
.dtg-tag.mini{padding:2px 8px;font-size:.75rem}
.dtg-tag.c-ok{background:var(--ok-l);color:var(--ok)}.dtg-tag.c-warn{background:var(--warn-l);color:var(--warn)}.dtg-tag.c-bad{background:var(--bad-l);color:var(--bad)}
.dtg-tag.c-info{background:var(--info-l);color:var(--info)}.dtg-tag.c-pri{background:var(--pri-l);color:var(--pri-d)}
:root[data-theme=dark] .dtg-tag.c-pri{color:#fdba74}
.dtg-prog{width:70px;height:8px;border-radius:4px;background:var(--bg);overflow:hidden;flex:none}
.dtg-prog i{display:block;height:100%;background:var(--pri);border-radius:4px}
.dtg-prog i.full{background:var(--ok)}
.dtg-stars{display:inline-flex;gap:1px}
.dtg-star{all:unset;cursor:pointer;display:grid;place-items:center;width:22px;height:22px;color:var(--line);border-radius:6px}
.dtg-star .dtg-ic{fill:currentColor;stroke:none;width:18px;height:18px}
.dtg-star.on{color:#f2a900}
.dtg-star:hover{background:var(--bg)}
.dtg-chk{all:unset;cursor:pointer;width:22px;height:22px;border-radius:6px;border:2px solid var(--line);display:grid;place-items:center;color:transparent;box-sizing:border-box}
.dtg-chk.on{background:var(--ok);border-color:var(--ok);color:#fff}
.dtg-chk .dtg-ic{width:14px;height:14px;stroke-width:3}
.dtg-star:focus-visible,.dtg-chk:focus-visible,.dtg-open:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.dtg-open{all:unset;cursor:pointer;margin-left:auto;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;color:var(--mut);opacity:0}
.dtg-cell:hover .dtg-open,.dtg-cell.is-active .dtg-open{opacity:1}
.dtg-open:hover{background:var(--bg);color:var(--ink)}

/* grupos */
.dtg-group td{padding:0!important;background:var(--bg);border-bottom:1px solid var(--line)}
.dtg-group button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;font-weight:600}
.dtg-group button:focus-visible{outline:2px solid var(--pri);outline-offset:-2px}
.dtg-chev{display:inline-grid;transition:transform .15s}
.dtg-chev.shut{transform:rotate(-90deg)}
.dtg-count{color:var(--mut);font-weight:500;font-size:.85rem}

/* menus (colunas e botão direito) */
.dtg-menu{position:absolute;z-index:40;min-width:200px;max-width:260px;padding:6px;display:grid;gap:2px;border:1px solid var(--line);border-radius:12px;background:var(--card);box-shadow:0 12px 32px #0003}
.dtg-menu-h{padding:6px 10px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--mut)}
.dtg-menu button,.dtg-menu-i{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;font-weight:550;font-size:.92rem}
.dtg-menu button:hover,.dtg-menu button:focus-visible,.dtg-menu-i:hover{background:var(--bg)}
.dtg-menu button:focus-visible{outline:2px solid var(--pri);outline-offset:-2px}
.dtg-menu .danger{color:var(--bad)}
.dtg-menu-i input{width:18px;height:18px;accent-color:var(--pri);margin:0}

/* celular: cada linha vira um cartão; os controles de edição continuam funcionando */
@media (max-width:900px){
  .dtg-table tbody tr.dtg-group{display:block}
  .dtg-table td.dtg-selcol{grid-column:1/-1;width:auto}
  .dtg-table td.dtg-cell{cursor:pointer}
  .dtg-cell.right .dtg-cellin{justify-content:flex-start}
  .dtg-cell.right .dtg-in{text-align:left}
  .dtg-btns{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){.dtg-chev,.dt.is-busy .dt-scroll{transition:none}}