:root{--bg:#f6f8f7;--text:#1f2937;--muted:#6b7280;--line:#e5e7eb;--green:#2f8f4e;--green-soft:#eef8f0;--pink:#e94b72;--pink-soft:#fff1f5;--blue:#2f6fb4;--blue-soft:#eef5ff;--card:#fff;--shadow:0 8px 24px rgba(31,41,55,.07)}
*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}button,input,textarea,select{font:inherit}.app-shell{max-width:1440px;margin:auto;padding:20px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}.topbar h1{margin:0;font-size:28px}.topbar p{margin:4px 0 0;color:var(--muted)}.role-switcher{display:flex;background:white;border:1px solid var(--line);border-radius:14px;padding:4px;box-shadow:var(--shadow)}.role-btn{border:0;background:transparent;padding:10px 16px;border-radius:10px;cursor:pointer;color:var(--muted)}.role-btn.active{background:#111827;color:#fff}.role-panel{display:none}.role-panel.active{display:block}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:24px;border-radius:20px;margin-bottom:18px}.panel-header.teacher{background:var(--green-soft)}.panel-header.parent{background:var(--pink-soft)}.panel-header.admin{background:var(--blue-soft)}.panel-header h2{margin:4px 0 4px;font-size:28px}.panel-header p{margin:0;color:var(--muted)}.eyebrow{font-weight:800;letter-spacing:.08em;font-size:12px}.status-badge{background:#fff;padding:8px 12px;border-radius:999px;border:1px solid var(--line);font-weight:700}.grid{display:grid;gap:18px}.teacher-grid{grid-template-columns:240px 1fr}.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow)}.class-list h3,.card h3{margin-top:0}.class-card{width:100%;display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:#fff;padding:12px;border-radius:12px;margin-bottom:10px;text-align:left;cursor:pointer}.class-card span{display:flex;flex-direction:column}.class-card small{color:var(--muted);margin-top:3px}.class-card.selected{border-color:var(--green);background:var(--green-soft)}.section-title-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.muted{color:var(--muted);font-size:13px}.tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:16px}.tab-btn{border:0;background:transparent;padding:12px 16px;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent}.tab-btn.active{color:var(--green);border-color:var(--green);font-weight:700}.tab-content{display:none}.tab-content.active{display:block}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;min-width:850px}th,td{border-bottom:1px solid var(--line);padding:9px 8px;text-align:center;font-size:13px}th{color:var(--muted);font-weight:700;background:#fafafa;position:sticky;top:0}td:first-child,th:first-child{text-align:left}.child-name{font-weight:700;white-space:nowrap}.cell-input{width:66px;border:1px solid var(--line);border-radius:8px;padding:7px}.meal-select{border:1px solid var(--line);border-radius:8px;padding:7px;background:#fff}.nap-input{width:76px;border:1px solid var(--line);border-radius:8px;padding:7px}.count-input{width:48px;border:1px solid var(--line);border-radius:8px;padding:7px}.legend{font-size:12px;color:var(--muted);padding-top:10px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-grid label{display:flex;flex-direction:column;gap:8px;font-weight:700}.form-grid textarea{resize:vertical;border:1px solid var(--line);border-radius:12px;padding:12px}.photo-upload{display:block;margin-top:16px;border:1px dashed #cbd5e1;border-radius:14px;padding:16px;font-weight:700;cursor:pointer}.photo-upload input{display:block;margin:10px 0}.photo-upload span{font-weight:400;color:var(--muted)}.photo-preview{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.photo-preview img{width:130px;height:90px;object-fit:cover;border-radius:12px;border:1px solid var(--line)}.action-row{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.btn{border:0;border-radius:12px;padding:11px 16px;font-weight:800;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.btn.primary{background:var(--green);color:#fff}.btn.secondary{background:#f3f4f6;color:#111827;border:1px solid var(--line)}.btn.small{padding:7px 10px;font-size:12px}.parent-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}.daily-card p{line-height:1.6}.parent-photos img{width:180px;height:120px}.info-list{display:grid;gap:0;border-top:1px solid var(--line)}.info-list div{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--line)}.whatsapp{background:#25D366;color:#fff;width:100%;margin-top:16px}.admin-grid{display:grid;gap:18px}.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.metric{padding:18px;border:1px solid var(--line);border-radius:14px}.metric span{display:block;color:var(--muted);font-size:13px}.metric strong{font-size:28px}.progress-list{margin-top:18px;display:grid;gap:12px}.progress-list div{display:grid;grid-template-columns:180px 1fr 60px;gap:10px;align-items:center}.progress-list progress{width:100%;accent-color:var(--blue)}.account-table{min-width:700px}.status-active{color:#15803d;font-weight:800}.status-inactive{color:#b91c1c;font-weight:800}.account-action{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 8px;cursor:pointer}.account-action.danger{color:#b91c1c;border-color:#fecaca}.account-action.success{color:#15803d;border-color:#bbf7d0}
@media(max-width:900px){.app-shell{padding:12px}.topbar{align-items:flex-start;flex-direction:column}.role-switcher{width:100%}.role-btn{flex:1}.teacher-grid,.parent-layout{grid-template-columns:1fr}.class-list{display:flex;gap:8px;overflow:auto}.class-list h3{display:none}.class-card{min-width:180px;margin:0}.form-grid{grid-template-columns:1fr}.summary-grid{grid-template-columns:1fr 1fr}.panel-header{align-items:flex-start;gap:12px;flex-direction:column}.panel-header h2{font-size:24px}.progress-list div{grid-template-columns:130px 1fr 52px}}

.note-input{min-width:180px;width:100%;border:1px solid var(--line);border-radius:8px;padding:7px}.info-list #pNote{max-width:55%;text-align:right;white-space:normal}
.time-cell{width:82px;border:1px solid var(--line);border-radius:8px;padding:7px}.teacher-attendance{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}.attendance-grid{display:grid;grid-template-columns:160px 160px 1fr;gap:14px;align-items:start}.attendance-grid label{display:flex;flex-direction:column;gap:8px;font-weight:700}.attendance-grid input[type="time"]{border:1px solid var(--line);border-radius:10px;padding:10px}.signature-box{display:flex;flex-direction:column;gap:8px;font-weight:700}.signature-box canvas{width:100%;max-width:520px;height:150px;background:#fff;border:1px dashed #9ca3af;border-radius:12px;touch-action:none}.signature-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.attendance-table{min-width:760px}.signed-badge{display:inline-block;padding:4px 8px;border-radius:999px;background:var(--green-soft);color:#15803d;font-weight:800}@media(max-width:900px){.attendance-grid{grid-template-columns:1fr 1fr}.signature-box{grid-column:1/-1}}
.hidden{display:none!important}.login-screen{min-height:100vh;display:grid;place-items:center;padding:20px;background:linear-gradient(135deg,#eef8f0,#eef5ff)}.login-card{width:min(420px,100%);background:white;border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:var(--shadow)}.login-brand{font-size:28px;font-weight:900;color:var(--green);margin-bottom:18px}.login-card h1{margin:0 0 8px}.login-card form{display:grid;gap:14px;margin-top:20px}.login-card label{display:grid;gap:7px;font-weight:700}.login-card input{border:1px solid var(--line);border-radius:11px;padding:12px}.login-submit{width:100%;margin-top:4px}.login-error{min-height:20px;color:#b91c1c;margin:0;font-size:13px}.user-menu{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.child-switcher{display:flex;gap:8px;overflow:auto;margin:0 0 14px}.child-chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 12px;cursor:pointer}.child-chip.active{background:var(--pink-soft);border-color:var(--pink);font-weight:800}.role-panel.active{display:block}@media(max-width:700px){.user-menu{width:100%;justify-content:space-between}.login-card{padding:22px}}

.photo-card{position:relative;width:150px;min-height:118px;border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;display:flex;flex-direction:column}.photo-card img{width:100%;height:90px;object-fit:cover;border:0;border-radius:0}.photo-card.file-only{justify-content:flex-end;padding-top:42px}.photo-meta{font-size:11px;padding:7px 28px 7px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}.photo-remove{position:absolute;top:5px;right:5px;width:26px;height:26px;border:0;border-radius:50%;background:rgba(17,24,39,.78);color:white;font-size:20px;line-height:22px;cursor:pointer}.photo-count{display:flex;align-items:center;padding:8px 2px;font-size:12px;color:var(--muted);font-weight:700}.photo-preview.parent-photos .photo-card{width:180px}.photo-preview.parent-photos .photo-remove,.photo-preview.parent-photos .photo-meta{display:none}

.photo-upload-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.photo-card.file-only{display:flex;align-items:center;justify-content:center;min-height:112px;padding:12px;background:#f8fafc}.photo-card.file-only .photo-meta{white-space:normal;text-align:center}.photo-count{grid-column:1/-1;font-size:13px;color:#64748b;margin-top:4px}

/* V4: sibling child selector */
.child-switcher{display:flex;gap:10px;overflow:auto;margin:0 0 16px;padding:2px 1px 5px;scrollbar-width:thin}
.child-chip{min-width:150px;border:1px solid var(--line);background:#fff;border-radius:14px;padding:10px 14px;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:2px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.child-chip:hover{border-color:#f0a9c1}.child-chip.active{background:var(--pink-soft);border-color:var(--pink);font-weight:800;box-shadow:0 0 0 2px rgba(236,72,153,.08)}
.child-chip-name{font-weight:800}.child-chip small{font-size:11px;color:var(--muted);font-weight:600}
@media(max-width:700px){.child-chip{min-width:132px;padding:9px 12px}}

/* V4.1: parent history + photo retention */
.parent-history-nav{display:flex;align-items:center;justify-content:center;gap:12px;margin:14px 0;padding:12px 16px;flex-wrap:wrap}
.parent-date-picker{display:flex;align-items:center;gap:8px;font-weight:700}.parent-date-picker input{padding:8px 10px;border:1px solid #d8dee8;border-radius:10px}
.photo-retention-note{font-size:.82rem;color:#6b7280;margin-top:10px}.photo-expired{padding:18px;border:1px dashed #d1d5db;border-radius:12px;color:#6b7280;background:#f9fafb}
@media(max-width:640px){.parent-history-nav{gap:8px}.parent-history-nav .btn{flex:1}.parent-date-picker{width:100%;justify-content:center}}

/* V4.1 admin attendance */
.compact-date{display:flex;align-items:center;gap:8px;font-size:13px;color:#667085}
.compact-date input{padding:8px 10px;border:1px solid #dfe5df;border-radius:10px;background:#fff}
.empty-state{padding:14px 4px;text-align:center}
.attendance-table td strong{font-weight:700;color:#24352b}

.forgot-password{border:0;background:transparent;color:#2f9854;text-decoration:underline;cursor:pointer;font-weight:600;margin:2px auto 0;display:block}
.login-help{font-size:12px;line-height:1.45;color:#7a817c;text-align:center;margin:8px 0 0}
.auth-modal{position:fixed;inset:0;background:rgba(20,30,25,.55);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}
.auth-modal.hidden{display:none}.auth-modal-card{width:min(430px,100%);background:#fff;border-radius:18px;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.auth-modal-card h2{margin:0 0 6px}.auth-modal-card label{display:block;margin:14px 0 0}.auth-modal-card input{width:100%;box-sizing:border-box;margin-top:6px;padding:12px;border:1px solid #d8dfda;border-radius:10px}.auth-modal-card button{width:100%;margin-top:16px}


/* ===== V4.3 Growing Memories visual refresh ===== */
:root{
  --gm-mint:#74be91;
  --gm-mint-dark:#3f8e65;
  --gm-cream:#fffaf1;
  --gm-pink:#f7b7c7;
  --gm-yellow:#ffd977;
  --gm-blue:#b9dceb;
  --gm-lav:#d9c9ef;
  --gm-ink:#304238;
}

body{
  background:
    radial-gradient(circle at 5% 10%,rgba(255,217,119,.22),transparent 22%),
    radial-gradient(circle at 95% 2%,rgba(247,183,199,.22),transparent 21%),
    #fbfcf8;
  color:var(--gm-ink);
}

.login-screen{
  background:
    radial-gradient(circle at 15% 18%,rgba(255,217,119,.35),transparent 18%),
    radial-gradient(circle at 88% 20%,rgba(247,183,199,.32),transparent 20%),
    radial-gradient(circle at 86% 86%,rgba(185,220,235,.35),transparent 22%),
    linear-gradient(145deg,#fffaf1,#f2fbf5);
}
.login-card{
  border:1px solid #e9e3d8;
  border-radius:30px;
  box-shadow:0 22px 70px rgba(74,105,83,.16);
  padding:32px;
  position:relative;
  overflow:hidden;
}
.login-card:after{
  content:"";
  position:absolute;right:-35px;bottom:-35px;width:110px;height:110px;
  background:rgba(116,190,145,.10);border-radius:50%;
  pointer-events:none;
}
.login-illustration{height:52px;position:relative;margin-bottom:5px}
.login-sun,.login-heart,.login-sprout{position:absolute;font-size:25px}
.login-sun{right:12%;top:0;color:#e8ad16}
.login-heart{left:13%;top:8px;color:#ee8ca6}
.login-sprout{left:46%;top:4px;font-size:28px}
.login-school{text-transform:uppercase;letter-spacing:.18em;font-size:12px;font-weight:900;color:var(--gm-mint-dark);text-align:center}
.login-memories{font-size:31px;line-height:1.1;font-weight:950;color:#3b7758;text-align:center;margin-top:5px}
.login-tagline{font-family:Georgia,serif;font-style:italic;color:#8a6f74;text-align:center;font-size:13px;margin-top:4px}
.login-service{
  display:table;margin:15px auto 16px;padding:7px 16px;border-radius:999px;
  background:#fff0f4;color:#a65068;font-weight:900;font-size:13px;letter-spacing:.04em
}
.login-card h1{text-align:center;font-size:24px;margin-bottom:4px;color:#34493c}
.login-welcome{text-align:center;margin-bottom:8px}
.login-card input:focus{outline:3px solid rgba(116,190,145,.18);border-color:var(--gm-mint)}
.login-submit{background:linear-gradient(135deg,var(--gm-mint),#59a879)!important;box-shadow:0 7px 18px rgba(75,155,106,.20)}
.forgot-password{color:var(--gm-mint-dark)}
.login-help{background:#f7faf7;border-radius:12px;padding:9px}

.topbar{background:rgba(255,255,255,.93);backdrop-filter:blur(8px);border-radius:19px;padding:13px 16px;box-shadow:0 4px 18px rgba(69,92,76,.08)}
.app-brand{display:flex;align-items:center;gap:11px}
.app-brand h1{margin:0;font-size:21px;color:#3e7858}
.app-brand p{margin:2px 0 0;color:#78867e;font-size:12px}
.mini-logo{width:39px;height:39px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,#80c99d,#61ad80);color:white;font-weight:950;box-shadow:0 4px 12px rgba(71,147,99,.18)}

.card{border-radius:20px;border-color:#e7ebe5;box-shadow:0 5px 22px rgba(61,83,67,.06)}
.panel-header{border-radius:22px}
.panel-header.parent{background:linear-gradient(135deg,#fff0f4,#fff8ed)}
.panel-header.teacher{background:linear-gradient(135deg,#edf9f1,#f8fbec)}
.panel-header.admin{background:linear-gradient(135deg,#edf7fb,#f5f0fb)}
.status-badge{border-radius:999px}
.child-chip{border-radius:18px}
.child-chip.active{background:linear-gradient(135deg,#fff0f4,#fff8ed);border-color:#f1afc0}
.info-list div:nth-child(odd){background:#fcfdfb;margin:0 -8px;padding-left:8px;padding-right:8px;border-radius:8px}
.photo-card,.photo-preview img{border-radius:16px}
.whatsapp{
  background:linear-gradient(135deg,#25d366,#20b958);
  border-radius:15px;box-shadow:0 7px 18px rgba(37,211,102,.18)
}
.install-app{background:#fff4cf!important;color:#745c16!important;border:1px solid #efd98f!important}

@media(max-width:700px){
  .login-card{padding:24px 20px;border-radius:24px}
  .login-memories{font-size:28px}
  .topbar{border-radius:15px}
  .app-brand h1{font-size:19px}
}


/* ===== V4.4 Admin management ===== */
.admin-setup-card{grid-column:1/-1}
.admin-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0}
.admin-form-grid label{font-weight:750;color:#43554a;font-size:13px}
.admin-form-grid input,.admin-form-grid select{display:block;width:100%;box-sizing:border-box;margin-top:6px;padding:11px 12px;border:1px solid #dce5dd;border-radius:12px;background:#fff;color:#2d4035}
.admin-form-grid input:focus,.admin-form-grid select:focus{outline:3px solid rgba(116,190,145,.16);border-color:#74be91}
.admin-form-grid .span-2{grid-column:1/-1}
.admin-form-grid input[readonly]{background:#f6f8f6;color:#748078}
.admin-chip-list{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}
.admin-chip{display:inline-flex;gap:5px;align-items:center;padding:8px 11px;border-radius:999px;background:#eef8f1;border:1px solid #d5ebdc;color:#35684d;font-weight:800}
.admin-chip small{font-weight:600;color:#728077}
.admin-choice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin:9px 0 13px}
.admin-choice{display:flex;align-items:center;gap:8px;padding:10px 11px;border:1px solid #dfe7e0;border-radius:12px;background:#fbfdfb;cursor:pointer;font-size:13px}
.admin-choice:has(input:checked){border-color:#74be91;background:#eef8f1;box-shadow:0 0 0 2px rgba(116,190,145,.12)}
.admin-choice input{accent-color:#58a877}
.admin-choice small{color:#7b857f}
.admin-help{font-size:12px;color:#7d8781;margin:8px 0 0}
.compact-admin-table{margin-top:12px}
.compact-admin-table table{width:100%;border-collapse:collapse}
.compact-admin-table th,.compact-admin-table td{padding:9px 8px;border-bottom:1px solid #edf0ed;text-align:left;font-size:13px}
.compact-admin-table th{color:#69766e;font-size:12px}
@media(max-width:700px){.admin-form-grid{grid-template-columns:1fr}.admin-form-grid .span-2{grid-column:auto}.admin-choice-grid{grid-template-columns:1fr}}

.child-name small{display:block;font-size:10px;color:#8a958e;margin-top:2px;font-weight:600}
.attendance-select{min-width:112px;padding:8px 9px;border:1px solid #dce5dd;border-radius:10px;background:#fff}
.absent-row{background:#fff6f5!important;opacity:.88}.absent-row .child-detail-input{background:#f2f2f2;color:#999}
.admin-status-card{grid-column:1/-1}.admin-child-detail{margin-top:16px;padding-top:14px;border-top:1px solid #e7ece8}.admin-child-detail h4{margin:0 0 10px}
.attendance-pill{display:inline-block;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:800}.attendance-pill.present{background:#e9f8ef;color:#24734a}.attendance-pill.absent{background:#fff0ee;color:#b24a40}.attendance-pill.pending{background:#f2f4f3;color:#6d7771}
.admin-actions{display:flex;gap:6px;flex-wrap:wrap}.account-action.edit{background:#eef6fb;color:#35677f;border:1px solid #d6e8f1}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.auth-modal-card select{width:100%;box-sizing:border-box;margin-top:6px;padding:12px;border:1px solid #d8dfda;border-radius:10px;background:#fff}.admin-choice span{display:flex;flex-direction:column;gap:2px}.admin-choice span small{display:block}

/* ===== V4.7 ===== */
.attendance-lock-note{margin:10px 0 0;color:#68756d;font-size:12px}
.signature-locked{pointer-events:none;opacity:.72;background:#f4f5f4}
.assignment-note{margin:0 0 10px;padding:8px 10px;background:#f5f8f6;border-radius:10px}
.wide-modal{max-width:720px}

/* ===== V4.7.1 hotfix: child -> teacher assignment UI ===== */
.compact-admin-table td:nth-child(4){min-width:220px}

/* ===== V4.7.2 hotfix: scalable child assignment modal ===== */
.roster-modal{
  width:min(760px,calc(100vw - 24px));
  max-width:760px;
  height:min(760px,calc(100dvh - 32px));
  max-height:calc(100dvh - 32px);
  padding:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.roster-modal-header{
  flex:0 0 auto;
  padding:22px 22px 10px;
  background:#fff;
  border-radius:18px 18px 0 0;
}
.roster-modal-header h2{margin:0 0 6px}
.roster-tools{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:10px;
}
.roster-tools input[type="search"]{
  flex:1;
  width:auto;
  margin:0;
  min-width:0;
}
.selected-count{
  flex:0 0 auto;
  white-space:nowrap;
  font-size:13px;
  font-weight:800;
  color:#3f8e65;
  background:#eef8f1;
  border:1px solid #d5ebdc;
  border-radius:999px;
  padding:8px 11px;
}
.roster-choice-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  align-content:start;
  margin:0;
  padding:8px 22px 14px;
  background:#fafcfb;
}
.roster-choice-scroll .admin-choice[hidden]{display:none!important}
.roster-modal-actions{
  flex:0 0 auto;
  position:sticky;
  bottom:0;
  z-index:2;
  margin:0;
  padding:12px 22px 18px;
  background:#fff;
  border-top:1px solid #e8ede9;
  box-shadow:0 -8px 20px rgba(35,55,42,.06);
  border-radius:0 0 18px 18px;
}
.roster-modal-actions .btn{
  margin-top:0;
}
@media (max-width:600px){
  .auth-modal{padding:8px}
  .roster-modal{
    width:100%;
    height:calc(100dvh - 16px);
    max-height:calc(100dvh - 16px);
    border-radius:16px;
  }
  .roster-modal-header{padding:16px 14px 8px}
  .roster-choice-scroll{
    grid-template-columns:1fr;
    padding:8px 14px 12px;
  }
  .roster-modal-actions{padding:10px 14px 14px}
  .roster-tools{align-items:stretch;flex-direction:column}
  .selected-count{align-self:flex-start}
}