/* ==========================================================================
   SHED MANAGEMENT (#/sheds)

   Scoped to the .sd-* namespace so nothing here can affect another module.
   Values deliberately mirror css/group-management.css so the list screens all
   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{
  --sd-section:16px;   /* gap between the page's stacked sections */
  --sd-gap:14px;       /* gap inside a grid                       */
}

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

/* --- KPI strip ----------------------------------------------------------- */
.sd-kpis{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:var(--sd-gap);align-items:stretch;margin-bottom:var(--sd-section);
}
.sd-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);
}
.sd-kpi__art{width:40px;height:40px;flex:none;}
.sd-kpi__art svg{width:100%;height:100%;display:block;}
.sd-kpi__txt{display:flex;flex-direction:column;gap:2px;min-width:0;}
.sd-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. */
.sd-kpi__val{
  font-size:var(--sd-kpi-val,23px);font-weight:700;line-height:1.15;
  color:var(--ink);font-family:var(--font-en);min-width:0;overflow-wrap:anywhere;
}
.sd-kpi__sub{font-size:11.5px;line-height:1.3;color:var(--muted);}

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

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

.sd-search{display:flex;align-items:stretch;gap:0;min-width:0;}
.sd-search .inp{flex:1;min-width:0;border-top-right-radius:0;border-bottom-right-radius:0;}
.sd-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 --------------------------------------- */
.sd-main{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;
  gap:var(--sd-gap);align-items:start;
}
.sd-list{display:flex;flex-direction:column;min-width:0;}
.sd-list .card__head{flex:none;}
.sd-list__count{font-size:12.5px;font-weight:500;color:var(--muted);font-family:var(--font-en);}
.sd-list .tbl-wrap{border:0;border-radius:0;box-shadow:none;}

.sd-tbl th{white-space:nowrap;}
.sd-tbl td{white-space:nowrap;}
.sd-tbl td{padding:11px 16px;}
.sd-tbl tr.is-on{background:var(--green-050);}
.sd-id{font-family:var(--font-en);font-size:13px;font-weight:600;color:var(--green-600);}
.sd-name{font-weight:600;}
.sd-num{font-family:var(--font-en);}
.sd-empty{text-align:center;padding:40px;color:var(--muted);}

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

.sd-act{text-align:right;white-space:nowrap;}
.sd-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;
}
.sd-ib--view{color:var(--green-600);} .sd-ib--view:hover{background:var(--green-050);border-color:var(--green-400);}
.sd-ib--edit{color:var(--blue);}      .sd-ib--edit:hover{background:var(--info-bg);border-color:#a8c8f2;}
.sd-ib--more{color:var(--muted);}     .sd-ib--more:hover{background:var(--canvas);border-color:var(--border-strong);}

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

.sd-pg{display:flex;align-items:center;gap:5px;flex:none;flex-wrap:wrap;}
.sd-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;
}
.sd-pg__b:hover:not(:disabled):not(.is-on){background:var(--green-050);border-color:var(--green-400);color:var(--green-600);}
.sd-pg__b:disabled{opacity:.4;cursor:default;}
.sd-pg__b.is-on{background:var(--green-500);border-color:var(--green-500);color:#fff;font-weight:600;}
.sd-pg__gap{padding:0 2px;color:var(--muted-2);font-size:12.5px;}

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

.sd-detail{display:flex;flex-direction:column;gap:1px;}
.sd-detail__none{font-size:12.5px;color:var(--muted);margin:0;padding:8px 0;}
.sd-dt__row{
  display:flex;align-items:center;gap:10px;padding:8px 0;min-width:0;
  border-bottom:1px solid var(--border);
}
.sd-dt__row:last-of-type{border-bottom:0;}
.sd-dt__k{flex:0 0 108px;font-size:12px;color:var(--muted);line-height:1.35;}
.sd-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;}
.sd-dt__note{padding-top:11px;margin-top:5px;border-top:1px solid var(--border);}
.sd-dt__note p{margin:6px 0 0;font-size:12.5px;line-height:1.6;color:var(--ink-2);}

.sd-quick{display:flex;flex-direction:column;gap:9px;}
.sd-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);
}
.sd-qa:hover{background:var(--green-050);border-color:var(--green-400);color:var(--green-600);}
.sd-qa__ico{display:grid;place-items:center;flex:none;color:var(--muted);}
.sd-qa:hover .sd-qa__ico{color:inherit;}
.sd-qa__lbl{flex:1;min-width:0;font-size:12.5px;font-weight:600;line-height:1.3;overflow-wrap:anywhere;}

/* --- occupancy bar in the details panel ---------------------------------- */
.sd-dt__row--bar .sd-dt__v{display:flex;align-items:center;gap:9px;}
.sd-bar{
  flex:1;min-width:0;height:7px;border-radius:99px;overflow:hidden;
  background:var(--border);
}
.sd-bar__fill{display:block;height:100%;border-radius:99px;transition:width .25s;}
.sd-bar__fill--low {background:var(--green-500);}
.sd-bar__fill--mid {background:var(--orange);}
.sd-bar__fill--high{background:var(--danger);}
.sd-bar__pct{flex:none;font-family:var(--font-en);font-size:12px;color:var(--muted);}

/* --- groups housed in the shed ------------------------------------------- */
.sd-dt__groups{padding-top:11px;margin-top:5px;border-top:1px solid var(--border);}
.sd-gchips{display:flex;flex-direction:column;gap:6px;margin-top:8px;}
.sd-gchip{
  display:block;width:100%;text-align:left;cursor:pointer;
  padding:7px 10px;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--green-050);color:var(--green-600);
  font-family:inherit;font-size:12px;font-weight:600;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:.13s;
}
.sd-gchip:hover{border-color:var(--green-400);background:var(--surface);}
.sd-dt__empty{margin:8px 0 0;font-size:12px;color:var(--muted);}

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