/* ==========================================================================
   GROUP MANAGEMENT (#/groups)

   Scoped to the .gm-* namespace so nothing here can affect another module.
   Values deliberately mirror css/cow-management.css so the two list screens
   read as one design: same KPI card shape, same filter bar, same table
   footer, same pager, same side rail.

   Colours, radii and shadows come from css/tokens.css only.
   ========================================================================== */

:root{
  --gm-section:16px;   /* gap between the page's stacked sections */
  --gm-gap:14px;       /* gap inside a grid                       */
}

/* --- action bar ---------------------------------------------------------- */
.gm-actions{
  display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;
  gap:10px;margin-bottom:var(--gm-section);
}
.gm-actions .btn{display:inline-flex;align-items:center;gap:7px;}

/* --- KPI strip ----------------------------------------------------------- */
.gm-kpis{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:var(--gm-gap);align-items:stretch;margin-bottom:var(--gm-section);
}
.gm-kpi{
  display:flex;align-items:center;gap:12px;min-width:0;
  padding:15px 16px;border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--surface);box-shadow:var(--shadow-sm);
}
.gm-kpi__art{width:40px;height:40px;flex:none;}
.gm-kpi__art svg{width:100%;height:100%;display:block;}
.gm-kpi__txt{display:flex;flex-direction:column;gap:2px;min-width:0;}
.gm-kpi__lbl{font-size:12.5px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Same component and same constraint as .cw-kpi__val - see the note there. */
.gm-kpi__val{
  font-size:var(--gm-kpi-val,23px);font-weight:700;line-height:1.15;
  color:var(--ink);font-family:var(--font-en);min-width:0;overflow-wrap:anywhere;
}
.gm-kpi__sub{font-size:11.5px;line-height:1.3;color:var(--muted);}

.gm-kpi--green {background:#f8fbf8;border-color:#e2efe7;}  .gm-kpi--green  .gm-kpi__lbl{color:var(--green-600);}
.gm-kpi--blue  {background:#f4f8fe;border-color:#d8e5f8;}  .gm-kpi--blue   .gm-kpi__lbl{color:var(--blue);}
.gm-kpi--amber {background:#fef9f2;border-color:#f7e6cb;}  .gm-kpi--amber  .gm-kpi__lbl{color:var(--orange);}
.gm-kpi--purple{background:#faf8fe;border-color:#e7defa;}  .gm-kpi--purple .gm-kpi__lbl{color:var(--purple);}
.gm-kpi--cyan  {background:#f7fbfe;border-color:#d9e9f6;}  .gm-kpi--cyan   .gm-kpi__lbl{color:#0e7490;}

/* --- filter bar ---------------------------------------------------------- */
.gm-panel{margin-bottom:var(--gm-section);overflow:hidden;}
.gm-filters{display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px;padding:15px 18px;}
.gm-field{display:flex;flex-direction:column;gap:6px;min-width:0;flex:0 0 190px;}
.gm-field--grow{flex:1 1 240px;}
.gm-field--btn{flex:none;}
.gm-field__lbl{font-size:12px;font-weight:600;line-height:1.2;color:var(--ink-2);}
.gm-field .inp{width:100%;}

.gm-search{display:flex;align-items:stretch;gap:0;min-width:0;}
.gm-search .inp{flex:1;min-width:0;border-top-right-radius:0;border-bottom-right-radius:0;}
.gm-search__go{
  flex:none;display:grid;place-items:center;padding:0 15px;
  border-top-left-radius:0;border-bottom-left-radius:0;
}

/* --- main split: table + side rail --------------------------------------- */
.gm-main{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;
  gap:var(--gm-gap);align-items:start;
}
.gm-list{display:flex;flex-direction:column;min-width:0;}
.gm-list .card__head{flex:none;}
.gm-list__count{font-size:12.5px;font-weight:500;color:var(--muted);font-family:var(--font-en);}
.gm-list .tbl-wrap{border:0;border-radius:0;box-shadow:none;}

.gm-tbl th{white-space:nowrap;}
.gm-tbl td{padding:11px 16px;}
.gm-tbl tr.is-on{background:var(--green-050);}
.gm-cbx{width:38px;text-align:center;}
.gm-cbx input{width:15px;height:15px;accent-color:var(--green-500);cursor:pointer;}
.gm-id{font-family:var(--font-en);font-size:13px;font-weight:600;color:var(--green-600);}
.gm-name{font-weight:600;}
.gm-num{font-family:var(--font-en);}
.gm-empty{text-align:center;padding:40px;color:var(--muted);}

.gm-kind{display:inline-flex;align-items:center;gap:8px;min-width:0;}
.gm-kind__ico{width:20px;height:20px;flex:none;display:grid;place-items:center;}
.gm-kind__ico svg{width:100%;height:100%;display:block;}

.gm-act{text-align:right;white-space:nowrap;}
.gm-ib{
  width:28px;height:28px;margin-left:5px;border-radius:7px;cursor:pointer;
  display:inline-grid;place-items:center;vertical-align:middle;
  border:1px solid var(--border);background:var(--surface);
  font-size:15px;line-height:1;transition:.13s;
}
.gm-ib--view{color:var(--green-600);} .gm-ib--view:hover{background:var(--green-050);border-color:var(--green-400);}
.gm-ib--edit{color:var(--blue);}      .gm-ib--edit:hover{background:var(--info-bg);border-color:#a8c8f2;}
.gm-ib--more{color:var(--muted);}     .gm-ib--more:hover{background:var(--canvas);border-color:var(--border-strong);}

/* --- table footer: count / per-page / pager ------------------------------ */
.gm-foot{
  display:flex;align-items:center;flex-wrap:wrap;gap:12px;
  padding:13px 18px;border-top:1px solid var(--border);
}
.gm-foot__info{font-size:12.5px;color:var(--muted);flex:1;min-width:0;}
.gm-foot__per{display:flex;align-items:center;gap:8px;flex:none;font-size:12.5px;color:var(--ink-2);}
.gm-foot__per .inp{width:auto;min-width:72px;padding:7px 10px;}

.gm-pg{display:flex;align-items:center;gap:5px;flex:none;flex-wrap:wrap;}
.gm-pg__b{
  min-width:32px;height:32px;padding:0 8px;border-radius:8px;cursor:pointer;
  border:1px solid var(--border);background:var(--surface);
  font-family:var(--font-en);font-size:12.5px;color:var(--ink-2);transition:.13s;
}
.gm-pg__b:hover:not(:disabled):not(.is-on){background:var(--green-050);border-color:var(--green-400);color:var(--green-600);}
.gm-pg__b:disabled{opacity:.4;cursor:default;}
.gm-pg__b.is-on{background:var(--green-500);border-color:var(--green-500);color:#fff;font-weight:600;}
.gm-pg__gap{padding:0 2px;color:var(--muted-2);font-size:12.5px;}

/* --- side rail ----------------------------------------------------------- */
.gm-side{display:flex;flex-direction:column;gap:var(--gm-gap);min-width:0;}

.gm-detail{display:flex;flex-direction:column;gap:1px;}
.gm-detail__none{font-size:12.5px;color:var(--muted);margin:0;padding:8px 0;}
.gm-dt__row{
  display:flex;align-items:center;gap:10px;padding:8px 0;min-width:0;
  border-bottom:1px solid var(--border);
}
.gm-dt__row:last-of-type{border-bottom:0;}
.gm-dt__k{flex:0 0 108px;font-size:12px;color:var(--muted);line-height:1.35;}
.gm-dt__v{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:var(--ink-2);line-height:1.35;overflow-wrap:anywhere;}
.gm-dt__note{padding-top:11px;margin-top:5px;border-top:1px solid var(--border);}
.gm-dt__note p{margin:6px 0 0;font-size:12.5px;line-height:1.6;color:var(--ink-2);}

.gm-quick{display:flex;flex-direction:column;gap:9px;}
.gm-qa{
  display:flex;align-items:center;gap:10px;width:100%;min-height:42px;
  padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--surface);text-align:left;cursor:pointer;transition:.14s;
  color:var(--ink-2);
}
.gm-qa:hover{background:var(--green-050);border-color:var(--green-400);color:var(--green-600);}
.gm-qa__ico{display:grid;place-items:center;flex:none;color:var(--muted);}
.gm-qa:hover .gm-qa__ico{color:inherit;}
.gm-qa__lbl{flex:1;min-width:0;font-size:12.5px;font-weight:600;line-height:1.3;overflow-wrap:anywhere;}

/* ==========================================================================
   RESPONSIVE — same breakpoints as css/responsive.css
   ========================================================================== */
@media (max-width:1450px){
  .gm-kpis{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:1240px){
  .gm-main{grid-template-columns:1fr;}
  .gm-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;}
}
@media (max-width:760px){
  :root{--gm-section:14px;--gm-gap:12px;}
}
@media (max-width:720px){
  .gm-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
  :root{--gm-kpi-val:17px;}
  .gm-side{grid-template-columns:1fr;}
  .gm-field{flex:1 1 100%;}
  .gm-actions{justify-content:stretch;}
  .gm-actions .btn{flex:1;justify-content:center;}
  .gm-foot{gap:10px;}
  .gm-foot__info{flex:1 1 100%;}
  .gm-dt__k{flex:0 0 96px;}
}