/* ===========================================================
   MAX3 Momentum OS — DataGrid styles (scoped .dgrid)
   =========================================================== */
/* ⚠ THE GRID IS ITS OWN SCROLLER — do not remove `overflow-y`.
   The shell is a fixed-height frame: `.os` / `.shell-col` are height:100vh and
   `.main` is overflow:hidden, so NOTHING scrolls unless a page opts in. Only five
   pages ever did (via `.scr-body`), and the DataGrid was not one of them — so
   every list built on it (Students, Families, Staff, Transactions, Orders,
   Registrations…) silently CLIPPED at the fold with no scrollbar and no way to
   reach the rest. Measured on prod: the tenant ledger rendered 53 rows 3,265px
   tall inside a 719px box — ~40 rows unreachable. `min-height:0` is required too:
   without it a flex child refuses to shrink below its content and the overflow
   never engages. */
.dgrid{padding:18px 24px 40px;overflow-y:auto;min-height:0}

.dg-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.dg-h1{font-size:19px;font-weight:800;letter-spacing:-.3px}
.dg-count{font-size:12px;color:var(--m3-text-3);font-weight:600}
.dg-add{background:var(--m3-lime);color:#15200a;border:0;border-radius:8px;padding:9px 15px;font-size:12.5px;font-weight:800;cursor:pointer;font-family:var(--ff)}
.dg-add.ghost{background:var(--m3-surface);color:var(--m3-text);border:1px solid var(--m3-line)}
.dg-add.ghost:hover{border-color:var(--m3-gray)}
.dg-add.gated{background:var(--m3-surface-2);color:var(--m3-text-2);border:1px solid var(--m3-line)}
.dg-add .dg-lock{margin-right:5px;font-size:10px}

/* staff cell renderers */
.dg-roles{display:flex;flex-wrap:wrap;gap:4px}
.dg-roletag{font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:5px;background:var(--m3-surface-3);color:var(--m3-text-2);border:1px solid var(--m3-line);white-space:nowrap}
.dg-clock{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--m3-text-3)}
.dg-clock .d{width:8px;height:8px;border-radius:50%;background:var(--m3-text-3)}
.dg-clock.on{color:var(--m3-lime)}
.dg-clock.on .d{background:var(--m3-lime);box-shadow:0 0 0 3px rgba(170,221,68,.16)}

/* saved views */
.dg-views{display:flex;align-items:center;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.dg-view{background:var(--m3-surface);border:1px solid var(--m3-line);color:var(--m3-text-2);border-radius:8px;padding:7px 13px;font-size:12px;font-weight:700;cursor:pointer;font-family:var(--ff);display:flex;align-items:center;gap:7px}
.dg-view:hover{border-color:var(--m3-gray)}
.dg-view.on{background:var(--m3-surface-2);color:var(--m3-text);border-color:var(--m3-gray)}
.dg-view .vc{font-size:10px;color:var(--m3-text-3);font-weight:800;background:var(--m3-surface-3);border-radius:9px;padding:0 6px}
.dg-view.on .vc{color:var(--m3-lime)}
.dg-view-add{background:transparent;border:1px dashed var(--m3-line);color:var(--m3-text-3);border-radius:8px;padding:7px 11px;font-size:12px;font-weight:700;cursor:pointer;font-family:var(--ff)}
.dg-view-add:hover{border-color:var(--m3-gray);color:var(--m3-text-2)}

/* controls */
.dg-controls{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.dg-search{flex:1;min-width:200px;max-width:340px;display:flex;align-items:center;gap:8px;background:var(--m3-surface);border:1px solid var(--m3-line);border-radius:8px;padding:8px 12px}
.dg-search input{flex:1;background:transparent;border:0;color:var(--m3-text);font-family:var(--ff);font-size:13px;outline:none}
.dg-search .ic{color:var(--m3-text-3);font-size:13px}
.dg-ctrlwrap{position:relative}
.dg-ctrl{background:var(--m3-surface);border:1px solid var(--m3-line);color:var(--m3-text);border-radius:8px;padding:8px 13px;font-size:12px;font-weight:700;cursor:pointer;font-family:var(--ff);display:flex;align-items:center;gap:7px;white-space:nowrap}
.dg-ctrl:hover{border-color:var(--m3-gray)}
.dg-ctrl.on{border-color:var(--m3-gray);background:var(--m3-surface-2)}
.dg-ctrl .cnt{background:var(--m3-lime);color:#15200a;border-radius:9px;font-size:10px;font-weight:800;padding:0 6px}

/* popovers */
.dg-pop{position:absolute;top:40px;left:0;z-index:40;background:var(--m3-surface);border:1px solid var(--m3-line);border-radius:10px;
  padding:8px;box-shadow:0 18px 50px rgba(0,0,0,.55);max-height:340px;overflow-y:auto}
.dg-fgroup{padding:4px 2px}
.dg-fgroup + .dg-fgroup{border-top:1px solid var(--m3-line);margin-top:4px;padding-top:8px}
.dg-fglabel{font-size:9px;letter-spacing:.5px;text-transform:uppercase;color:var(--m3-text-3);font-weight:700;padding:2px 8px 6px}
.dg-fopt{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;color:var(--m3-text-2);font-family:var(--ff);
  font-size:12.5px;font-weight:600;text-align:left;padding:7px 9px;border-radius:7px;cursor:pointer}
.dg-fopt:hover{background:var(--m3-surface-2);color:var(--m3-text)}
.dg-fopt.on{color:var(--m3-text)}
.dg-fopt.locked{opacity:.55;cursor:default}
.dg-check{width:14px;text-align:center;color:var(--m3-lime);font-weight:900;font-size:11px;flex:0 0 auto}
.dg-odot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.dg-pin{margin-left:auto;font-size:9px;color:var(--m3-text-3);border:1px solid var(--m3-line);border-radius:4px;padding:1px 5px;text-transform:uppercase;font-weight:700}

/* active filter chips */
.dg-chips{display:flex;align-items:center;gap:7px;margin-bottom:14px;flex-wrap:wrap}
.dg-chip{display:flex;align-items:center;gap:6px;background:var(--m3-surface-2);border:1px solid var(--m3-line);border-radius:7px;padding:5px 10px;font-size:11.5px;font-weight:600}
.dg-chip .x{color:var(--m3-text-3);cursor:pointer;font-size:11px}
.dg-chip .x:hover{color:var(--m3-text)}
.dg-clear{font-size:11px;color:var(--m3-blue);font-weight:700;cursor:pointer;margin-left:2px}

/* bulk bar */
.dg-bulk{display:flex;align-items:center;gap:10px;background:rgba(170,221,68,.1);border:1px solid rgba(170,221,68,.35);border-radius:10px;padding:9px 14px;margin-bottom:12px}
.dg-bulk .selcount{font-size:12.5px;font-weight:800;color:var(--m3-lime)}
.dg-bulk .ba{background:var(--m3-surface-2);border:1px solid var(--m3-line);color:var(--m3-text);border-radius:7px;padding:7px 13px;font-size:12px;font-weight:700;cursor:pointer;font-family:var(--ff);display:flex;align-items:center;gap:6px}
.dg-bulk .ba:hover{border-color:var(--m3-gray)}
.dg-bulk .deselect{margin-left:auto;font-size:11.5px;color:var(--m3-text-3);cursor:pointer;font-weight:600}
.dg-bulk .deselect:hover{color:var(--m3-text)}

/* grid table */
.dg-table{background:var(--m3-surface);border:1px solid var(--m3-line);border-radius:var(--radius);overflow:hidden}
.dg-row{display:grid;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--m3-line);font-size:13px}
.dg-row:last-child{border-bottom:0}
.dg-row.head{background:var(--m3-surface-3);font-size:9.5px;letter-spacing:.4px;text-transform:uppercase;color:var(--m3-text-3);font-weight:700}
.dg-row.head .dg-sortable{cursor:pointer;display:flex;align-items:center;gap:5px;user-select:none}
.dg-row.head .dg-sortable:hover{color:var(--m3-text-2)}
.dg-row.head .ar{font-size:7px}
.dg-row.body{cursor:pointer}
.dg-row.body:hover{background:var(--m3-surface-2)}
.dg-row.body.sel{background:rgba(170,221,68,.06)}
.dg-cell{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dg-cbcell{display:flex;align-items:center}
.dg-cb{width:17px;height:17px;border-radius:4px;border:1.5px solid var(--m3-line);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;color:transparent;cursor:pointer}
.dg-cb.on{background:var(--m3-lime);border-color:var(--m3-lime);color:#15200a}
.dg-empty{padding:46px;text-align:center;color:var(--m3-text-3);font-size:12.5px}

/* cell renderers */
.dg-name{display:flex;align-items:center;gap:10px;min-width:0}
.dg-name .av{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.dg-name .nm{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:5px}
.dg-name .nm .chev{color:var(--m3-text-3);font-weight:600}
.dg-name .age{font-size:10.5px;color:var(--m3-text-3)}
.dg-belt{display:inline-flex;align-items:center;font-size:10px;font-weight:800;padding:3px 9px;border-radius:6px;border:1.5px solid var(--bc);color:var(--bc);background:transparent;white-space:nowrap}
.dg-memb{font-size:9.5px;font-weight:800;letter-spacing:.3px;padding:2px 7px;border-radius:5px;text-transform:uppercase}
.dg-memb.basic{background:var(--m3-surface-3);color:var(--m3-text-2)}
.dg-memb.lead{background:rgba(59,158,232,.16);color:var(--m3-blue)}
.dg-att{font-size:12px;color:var(--m3-text-2)}
.dg-att.stale{color:var(--m3-amber)}
.dg-att.risk{color:#ff8b8b;font-weight:600}
.dg-status{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700}
.dg-status .d{width:8px;height:8px;border-radius:50%}
.dg-status.active{color:var(--m3-lime)}.dg-status.active .d{background:var(--m3-lime)}
.dg-status.frozen{color:var(--m3-blue)}.dg-status.frozen .d{background:var(--m3-blue)}
.dg-status.pastdue{color:#ff8b8b}.dg-status.pastdue .d{background:var(--m3-red)}
.dg-status.inactive{color:var(--m3-text-3)}.dg-status.inactive .d{background:var(--m3-text-3)}
.dg-track{font-size:10px;color:var(--m3-text-2)}
.dg-muted{color:var(--m3-text-3)}
.fam-count{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;border-radius:7px;
  background:var(--m3-surface-3);border:1px solid var(--m3-line);font-weight:800;font-size:12px;font-family:var(--mono)}
.fam-members{font-size:12.5px;color:var(--m3-text);font-weight:600}

.dg-foot{margin-top:16px;font-size:11px;color:var(--m3-text-3);background:var(--m3-surface);border:1px solid var(--m3-line);padding:10px 13px;border-radius:8px}

.dg-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#000;border:1px solid var(--m3-line);color:var(--m3-text);
  padding:11px 16px;border-radius:11px;font-size:12.5px;font-weight:600;z-index:90;box-shadow:0 14px 34px rgba(0,0,0,.55)}

@media print{
  .rail,.scr-head,.dg-views,.dg-controls,.dg-chips,.dg-bulk,.dg-add,.dg-foot,.dg-cbcell,.dg-toast{display:none !important}
  /* overflow:visible is load-bearing — the grid is a scroller on screen, and a
     scroller prints only the slice you can see. Orders' print doc depends on this. */
  body,.os,.shell-col,.main,.dgrid{display:block !important;background:#fff !important;color:#000 !important;
    overflow:visible !important;height:auto !important}
  .dg-table{border-color:#ccc}
  .dg-row{border-color:#ddd;grid-template-columns:none !important;display:flex !important;gap:18px}
  .dg-status,.dg-belt,.dg-memb{color:#000 !important}
}

/* ---------- Prompt B 4d — broadcast-audience creation banner ---------- */
.dg-audience{display:flex;align-items:center;gap:10px;margin:0 16px 10px;padding:9px 12px;border:1px solid rgba(170,221,68,.35);
  border-radius:9px;background:rgba(170,221,68,.06);font-size:12px;color:var(--m3-text-2)}
.dg-audience .ic{flex:0 0 auto}
.dg-audience .t{flex:1;min-width:0;text-wrap:pretty}
.dg-audience .t b{color:var(--m3-text)}
.dg-aud-name{height:28px;width:170px;background:var(--m3-surface);border:1px solid var(--m3-line);border-radius:6px;color:var(--m3-text);
  font-size:12px;padding:0 9px;font-family:inherit}
.dg-aud-name:focus{outline:none;border-color:var(--m3-lime)}
.dg-aud-cancel{height:28px;padding:0 11px;border-radius:6px;border:1px solid var(--m3-line);background:transparent;color:var(--m3-text-2);
  font-size:11.5px;font-weight:700;cursor:pointer;font-family:inherit}
.dg-aud-cancel:hover{color:var(--m3-text)}