/* Workorey admin · top navigation + Groups tab */

/* ---- desktop: sections live in a top bar, not a sidebar ---- */
@media(min-width:701px){
  .app{display:block}
  .side{width:auto;flex-direction:row;align-items:center;gap:6px;padding:8px 20px;border-right:0;border-bottom:1px solid var(--line);position:sticky;top:68px;z-index:30;overflow-x:auto}
  .side button{width:auto;white-space:nowrap}
  .side button:hover:not(:disabled){transform:none}
  .side button.on,.side button.on:hover:not(:disabled){box-shadow:inset 0 -3px 0 var(--teal)}
  .side .sp{flex:1}
  .pane{max-width:1240px;margin:0 auto;padding:28px 24px}
}

/* ---- groups layout ---- */
.gl{display:grid;grid-template-columns:300px minmax(0,1fr);gap:18px;align-items:start}
.gl-side{display:grid;gap:10px;position:sticky;top:140px}
.gl-list{display:grid;gap:8px}
.gl-main .card{margin-bottom:14px}
.gnew.card{margin:0;padding:14px 16px}
.gnew summary{cursor:pointer;font-weight:700;display:flex;align-items:center;gap:8px;list-style:none}
.gnew summary::-webkit-details-marker{display:none}
.gcard{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:12px 16px;cursor:pointer;display:grid;gap:2px;transition:border-color .2s,background .2s}
.gcard:hover{border-color:var(--teal)}
.gcard.on{border-color:var(--teal);background:var(--mint);box-shadow:inset 4px 0 0 var(--teal)}
.gcard b{font-size:16px}

/* label left, value right */
.kv{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.kv>span{color:var(--mut);font-weight:700;font-size:13px;flex-shrink:0}
.kv>div{text-align:right;min-width:0;overflow-wrap:anywhere}
.tk{border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:12px;background:#fff}
.tk-h{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.tk>.row{margin-top:12px}
.pick{display:flex;align-items:center;gap:10px;padding:9px 4px;margin:0;font-weight:500;cursor:pointer;border-bottom:1px solid var(--line)}
.pv{background:var(--mint);color:var(--teal-d);border-radius:12px;padding:12px 14px;margin:14px 0;font-weight:700;font-size:14px}

/* add-task rows */
.trow{display:grid;grid-template-columns:28px 1fr 1fr 1.4fr;gap:8px;margin-bottom:8px;align-items:start}
.trow textarea{min-height:48px}
.tn{width:28px;height:28px;margin-top:8px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font:700 13px var(--fh)}
.tn span{display:none}
select.gs{width:auto;min-width:190px;padding:8px 10px;font-size:13px;border-radius:10px}

/* ---- tablet and phone ---- */
@media(max-width:900px){
    .gl{grid-template-columns:minmax(0,1fr)}
  .gl-side,.gl-main{min-width:0}
  .gl-side{position:static}
  .gl-list{display:flex;align-items:flex-start;overflow-x:auto;gap:8px;padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .gl-list::-webkit-scrollbar{display:none}
  .gcard{flex:0 0 auto;min-width:140px;max-width:220px;padding:10px 14px}
}
@media(max-width:700px){
  .trow{grid-template-columns:1fr;gap:8px;padding:12px;border:1px solid var(--line);border-radius:14px;background:#F8FAF9;margin-bottom:12px}
  .tn{display:inline-flex;align-items:center;white-space:nowrap;width:auto;height:auto;margin:0;justify-self:start;border-radius:4px;padding:4px 10px;background:var(--teal)}
  .tn span{display:inline;margin-right:4px}
  .trow input,.trow textarea{padding:11px 12px;font-size:15px}
  select.gs{width:100%}
  .tk>.row .s{flex:1 1 30%}
}

/* ===== Results cards and tables: clearer, no sideways shift ===== */

/* small squared labels everywhere (youtube, facebook, statuses) */
.tag{border-radius:4px;padding:4px 8px;font-size:12px;line-height:1.2}

/* desktop: calmer, easier-to-scan table */
@media(min-width:701px){
  table{border-collapse:separate;border-spacing:0}
  th{background:#F6F8F7;padding:12px;border-bottom:1px solid var(--line)}
  th:first-child{border-radius:10px 0 0 10px}
  th:last-child{border-radius:0 10px 10px 0}
  td{padding:16px 12px;border-bottom:1px solid var(--line)}
  tr.clk td:nth-child(1){width:36px}
  tr.clk td:nth-child(2){width:44px}
  tr.clk td .tag{margin:4px 4px 0 0}
  td .sm a{white-space:nowrap}
}

/* phone: each worker is one tidy card, label left and value right */
@media(max-width:700px){
  .pane{max-width:100%;overflow-x:hidden}
  .card.scroll{overflow-x:visible}
  td{align-items:flex-start}
  tr.clk{padding:0 0 6px;overflow:hidden}
  tr.clk td.nolbl:nth-child(-n+2){display:inline-flex;width:auto;align-items:center;padding:14px 2px 6px 14px}
  tr.clk td[data-label]{display:grid;grid-template-columns:92px minmax(0,1fr);column-gap:12px;row-gap:4px;align-items:start;text-align:right;padding:10px 14px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
  tr.clk td[data-label]::before{grid-column:1;text-align:left}
  tr.clk td[data-label]>*{grid-column:2;justify-self:end}
  tr.clk td[data-label]>br{display:none}
  tr.clk td[data-label="Actions"]{display:block;border-bottom:0;padding:12px 14px 8px}
  tr.clk td[data-label="Actions"] .row{justify-content:flex-start;gap:8px}
  tr.clk td[data-label="Actions"] .row>*{flex:1 1 40%}
}

/* ===== Status labels: background and text clearly different, one color per status ===== */
.tag.st-val{background:#1E9E5A;color:#fff}
.tag.st-bad{background:#D64545;color:#fff}
.tag.st-prog{background:#EDE4FF;color:#4C1D95}
.tag.st-rev{background:#FFE08A;color:#5C3B00}
.tag.st-avail{background:#DBEAFE;color:#1E3A8A}
.tag.st-asg{background:#FFE0C2;color:#8A3B00}
.tag.st-none{background:#E8ECEF;color:#3B4A52}


/* ===== Groups: move created groups to a centered top selector ===== */
.gl{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:16px;
  align-items:start;
}
.gl-side{
  position:static;
  display:grid;
  justify-items:center;
  gap:12px;
  min-width:0;
}
.gnew.card{
  width:min(100%,560px);
  margin:0 auto;
}
.gl-list{
  width:100%;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:stretch;
  gap:10px;
  padding:2px 0 6px;
}
.gcard{
  flex:0 1 210px;
  min-width:160px;
  max-width:260px;
  text-align:center;
  justify-items:center;
  padding:12px 16px;
}
.gcard.on{
  box-shadow:inset 0 -3px 0 var(--teal);
}
.gl-main{min-width:0}
@media(max-width:700px){
  .gl-list{
    flex-wrap:nowrap;
    justify-content:flex-start;
    overflow-x:auto;
    padding:2px 2px 10px;
  }
  .gcard{
    flex:0 0 165px;
    min-width:165px;
    max-width:220px;
  }
}