/* ==========================================================================
   Figma round 5 (Hershey Nov 10 2026, after the round-4 review): the Figma
   Overview body (summary cards, who's here, needs attention, activity,
   quick actions), the Attendance tab counts and child cards, and the
   floating AI button moved off the cards. Screen only (media="screen").
   ========================================================================== */
.fig-ov { display: none; }
html.fg-shell .fig-ov { display: block; }
/* The Overview's old blocks the Figma body replaces (still printed). */
html.fg-shell #figOverview ~ #here-now,
html.fg-shell #figOverview ~ .portal-header h1,
html.fg-shell #figOverview ~ .portal-header .portal-sub { display: none; }
@media (min-width: 821px) {
    html.fg-shell #figOverview ~ .inline-search,
    html.fg-shell #figOverview ~ #dashQuickLinks { display: none; }
}
html.fg-shell .fig-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 17px; }
html.fg-shell .fig-stat { background: #fff; border: 1px solid var(--fg-line); border-radius: 12px; box-shadow: 0 1px 2px rgba(25,46,40,.04), 0 6px 18px rgba(25,46,40,.04); padding: 18px; display: flex; align-items: flex-start; gap: 13px; min-width: 0; }
html.fg-shell .fig-stat > div { display: flex; flex-direction: column; min-width: 0; }
html.fg-shell .fig-stat p { margin: 0 0 3px; font-size: 12px; color: var(--fg-muted); }
html.fg-shell .fig-stat strong { font-family: var(--fg-serif); font-size: 26px; line-height: 1.1; letter-spacing: -.5px; color: var(--fg-ink-strong); font-weight: 600; }
html.fg-shell .fig-stat small { color: #7c8783; font-size: 11px; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.fg-shell .fig-stat-icon { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 9px; display: grid; place-items: center; }
html.fg-shell .fig-stat-icon.is-teal { color: var(--fg-teal); background: #e3f0ed; }
html.fg-shell .fig-stat-icon.is-blue { color: #477695; background: #e8f0f5; }
html.fg-shell .fig-stat-icon.is-amber { color: #9a651d; background: #f8eedc; }
html.fg-shell .fig-stat-icon.is-green { color: #397759; background: #e6f1e9; }
html.fg-shell .fig-ov-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 17px; align-items: start; margin-bottom: 24px; }
html.fg-shell .fig-ov-col { display: flex; flex-direction: column; gap: 17px; min-width: 0; }
html.fg-shell .fig-panel { background: #fff; border: 1px solid var(--fg-line); border-radius: 12px; box-shadow: 0 1px 2px rgba(25,46,40,.04), 0 6px 18px rgba(25,46,40,.04); min-width: 0; overflow: hidden; }
html.fg-shell .fig-panel-head { min-height: 66px; padding: 16px 19px; border-bottom: 1px solid #e7ebe7; display: flex; align-items: center; justify-content: space-between; gap: 15px; box-sizing: border-box; }
html.fg-shell .fig-panel-head > div { min-width: 0; }
html.fg-shell .fig-panel-head h2 { margin: 0; font-size: 15px; letter-spacing: -.2px; font-family: inherit; font-weight: 700; color: var(--fg-ink-strong); }
html.fg-shell .fig-panel-head p { color: #7a8581; font-size: 11.5px; margin: 3px 0 0; }
html.fg-shell .fig-text-btn { display: inline-flex; gap: 4px; align-items: center; color: var(--fg-teal); font-size: 12px; font-weight: 700; padding: 4px; text-decoration: none; white-space: nowrap; }
html.fg-shell .fig-presence-group { padding: 17px 19px; display: flex; align-items: center; border-bottom: 1px solid #edf0ed; gap: 10px; }
html.fg-shell .fig-presence-label { width: 142px; flex: none; display: grid; grid-template-columns: 10px 1fr; align-items: center; column-gap: 7px; }
html.fg-shell .fig-presence-label strong { font-size: 13px; color: var(--fg-ink-strong); }
html.fg-shell .fig-presence-label > span:last-child { grid-column: 2; color: #79837f; font-size: 11.5px; margin-top: 2px; }
html.fg-shell .fig-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
html.fg-shell .fig-dot.is-green { background: #46a371; }
html.fg-shell .fig-dot.is-blue { background: #5e88ad; }
html.fg-shell .fig-avatar-stack { display: flex; flex-wrap: wrap; row-gap: 6px; }
html.fg-shell .fig-ov .fig-avatar { width: 35px; height: 35px; font-size: 11px; }
html.fg-shell .fig-avatar-stack .fig-avatar { margin-left: -6px; }
html.fg-shell .fig-avatar-stack .fig-avatar:first-child { margin-left: 0; }
html.fg-shell .fig-avatar.is-more { background: #eef0ed; color: #65706c; }
html.fg-shell .fig-avatar.is-blue { background: #e3edf5; color: #385d78; }
html.fg-shell .fig-avatar.is-lavender { background: #ede7f4; color: #645078; }
html.fg-shell .fig-avatar.is-peach { background: #f6e7df; color: #82523f; }
html.fg-shell .fig-avatar.is-mint { background: #dfeee7; color: #33654f; }
html.fg-shell .fig-avatar.is-rose { background: #f2e4e6; color: #815258; }
html.fg-shell .fig-named-avatars { display: flex; gap: 15px; flex-wrap: wrap; }
html.fg-shell .fig-named-avatars span { display: flex; align-items: center; gap: 6px; color: #53615d; font-size: 12px; }
html.fg-shell .fig-ratio-banner { margin: 15px 19px 18px; border: 1px solid #cfe4d8; background: #f0f7f2; border-radius: 9px; padding: 12px; display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fg-ink); }
html.fg-shell .fig-ratio-banner.is-short { border-color: #efd9b6; background: #fbf4e8; }
html.fg-shell .fig-ratio-banner.is-empty { border-color: #e1e6e1; background: #f6f8f6; }
html.fg-shell .fig-ratio-banner > div { flex: 1; min-width: 0; }
html.fg-shell .fig-ratio-banner strong { display: block; font-size: 13px; }
html.fg-shell .fig-ratio-banner p { margin: 2px 0 0; color: #63766f; font-size: 11.5px; }
html.fg-shell .fig-ratio-icon { width: 32px; height: 32px; flex: none; border-radius: 50%; background: #dceee3; color: #397759; display: grid; place-items: center; }
html.fg-shell .fig-pill { border-radius: 99px; padding: 5px 10px; display: inline-flex; align-items: center; font-size: 11px; font-weight: 650; white-space: nowrap; }
html.fg-shell .fig-pill.is-success { background: #e0f0e5; color: #2c704d; }
html.fg-shell .fig-pill.is-warning { background: #f8ebd8; color: #946018; }
html.fg-shell .fig-pill.is-neutral { background: #edf0ed; color: #65716d; }
html.fg-shell .fig-count-badge { min-width: 25px; height: 25px; padding: 0 6px; box-sizing: border-box; border-radius: 99px; background: #f5e8e3; color: #a64e39; display: grid; place-items: center; font-size: 11px; font-weight: 800; }
html.fg-shell .fig-attention-item { padding: 13px 17px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #edf0ed; text-decoration: none; color: var(--fg-ink); }
html.fg-shell .fig-attention-item:hover { background: #f8faf8; }
html.fg-shell .fig-attention-item > div { flex: 1; min-width: 0; }
html.fg-shell .fig-attention-item strong { display: block; font-size: 12.5px; overflow-wrap: anywhere; }
html.fg-shell .fig-attention-item p { color: #7b8581; margin: 2px 0 0; font-size: 11.5px; overflow-wrap: anywhere; }
html.fg-shell .fig-attention-item > .fig-icon { color: #75817d; flex: none; }
html.fg-shell .fig-alert-symbol { width: 28px; height: 28px; flex: none; border-radius: 7px; display: grid; place-items: center; font-size: 13px; font-weight: 800; }
html.fg-shell .fig-alert-symbol.is-red { color: #a64e39; background: #f8e7e2; }
html.fg-shell .fig-alert-symbol.is-amber { color: #9a651c; background: #f8eddc; }
html.fg-shell .fig-alert-symbol.is-blue { color: #456e8e; background: #e8f0f5; font-family: var(--fg-serif); }
html.fg-shell .fig-btn.fig-btn-full { display: flex; justify-content: center; margin: 14px 17px 17px; }
html.fg-shell .fig-activity-item { display: flex; align-items: center; padding: 10px 19px; gap: 10px; border-bottom: 1px solid #edf0ed; }
html.fg-shell .fig-activity-item > div { flex: 1; min-width: 0; }
html.fg-shell .fig-activity-item strong { display: block; font-size: 12.5px; }
html.fg-shell .fig-activity-item p { color: #7d8783; font-size: 11.5px; margin: 2px 0 0; }
html.fg-shell .fig-activity-item time { color: #7a8581; font-size: 11.5px; white-space: nowrap; }
html.fg-shell .fig-shortcut-grid { display: grid; grid-template-columns: 1fr 1fr; padding: 13px; gap: 8px; }
html.fg-shell .fig-shortcut-grid a { min-height: 73px; background: #fafbfa; border: 1px solid #e3e8e3; border-radius: 9px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 7px; padding: 11px; color: #3d4c48; font-size: 12.5px; font-weight: 700; text-decoration: none; box-sizing: border-box; }
html.fg-shell .fig-shortcut-grid a:hover { border-color: #9bbab4; background: #f5faf8; }
html.fg-shell .fig-shortcut-grid a span { width: 26px; height: 26px; display: grid; place-items: center; color: var(--fg-teal); background: #e3f0ed; border-radius: 6px; }
html.fg-shell .fig-empty { color: var(--fg-muted); font-size: 12.5px; margin: 0; }
html.fg-shell .fig-empty.fig-pad { padding: 18px 19px; }
@media (max-width: 1100px) {
    html.fg-shell .fig-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
    html.fg-shell .fig-ov-grid { grid-template-columns: minmax(0, 1fr); }
    html.fg-shell .fig-stats { gap: 9px; }
    html.fg-shell .fig-stat { padding: 13px; gap: 10px; }
    html.fg-shell .fig-stat strong { font-size: 22px; }
    html.fg-shell .fig-stat-icon { width: 32px; height: 32px; }
    html.fg-shell .fig-presence-group { align-items: flex-start; flex-direction: column; }
    html.fg-shell .fig-panel-head { padding: 14px; }
}

/* Attendance tabs: the count on each tab (Figma "Children 12"). */
html.fg-shell .kiosk-tab .fig-tab-count { margin-left: 8px; min-width: 22px; height: 22px; padding: 0 7px; box-sizing: border-box; border-radius: 99px; background: #edf2ef; color: #56635f; font-size: 12px; font-weight: 750; display: inline-grid; place-items: center; }
html.fg-shell .kiosk-tab.is-current .fig-tab-count { background: #e3f0ed; color: var(--fg-teal); }
.fig-tab-count[hidden] { display: none !important; }

/* The floating AI button: on a desktop it no longer floats over the cards --
   the same link sits in the top bar (fig-topbar-ai); phones keep the button. */
.fig-topbar-ai { display: none; }
@media (min-width: 821px) {
    html.fg-shell .portal-nav:has(.fig-topbar-ai) ~ .ai-fab { display: none; }
    html.fg-shell .fig-topbar-ai { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border: 1px solid var(--fg-line); border-radius: 9px; background: #fff; color: var(--fg-teal); font-size: 12.5px; font-weight: 650; text-decoration: none; white-space: nowrap; flex: none; }
    html.fg-shell .fig-topbar-ai:hover { border-color: #aab8b2; }
}

/* Top bar: Home becomes the icon, "Sign out" the Figma's text button. */
.fig-topbar-out { display: none; }
@media (min-width: 821px) {
    html.fg-shell .fig-topbar-out { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border: 1px solid var(--fg-line); border-radius: 9px; background: #fff; color: #42514d; font-size: 12.5px; font-weight: 650; text-decoration: none; white-space: nowrap; flex: none; }
    html.fg-shell .fig-topbar-out:hover { border-color: #aab8b2; color: var(--fg-ink); }
    html.fg-shell .fig-bell ~ #navHome .portal-nav-home-label { display: none; }
    html.fg-shell .fig-bell ~ #navHome { width: 36px; height: 36px; padding: 0; justify-content: center; border: 1px solid var(--fg-line); border-radius: 9px; background: #fff; }
}

/* Attendance child cards like the Figma cards (desktop): face centred on
   top, name, date of birth, status pill, the buttons at the bottom. */
@media (min-width: 821px) {
    html.fg-shell #childrenGrid.children-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
    html.fg-shell #childrenGrid .child-card { position: relative; display: flex; flex-direction: column; align-items: stretch; min-height: 176px; border: 1px solid var(--fg-line); border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(25,46,40,.04), 0 6px 18px rgba(25,46,40,.04); padding: 16px 12px 12px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
    html.fg-shell #childrenGrid .child-card:hover { transform: translateY(-2px); border-color: #9dbbb5; box-shadow: 0 8px 25px rgba(31,68,59,.1); }
    html.fg-shell #childrenGrid .child-card .card-head { display: block; width: 100%; }
    html.fg-shell #childrenGrid .child-info-button { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; width: 100%; background: none; border: 0; padding: 0; }
    html.fg-shell #childrenGrid .child-photo { margin: 0 auto 9px; }
    html.fg-shell #childrenGrid .child-photo img, html.fg-shell #childrenGrid .child-photo .avatar { width: 62px; height: 62px; border-radius: 50%; }
    html.fg-shell #childrenGrid .child-info { display: flex; flex-direction: column; align-items: center; min-width: 0; width: 100%; }
    html.fg-shell #childrenGrid .child-info h3 { font-size: 13.5px; margin: 0; font-weight: 700; color: var(--fg-ink-strong); overflow-wrap: anywhere; }
    html.fg-shell #childrenGrid .child-dob { color: #87918e; font-size: 11px; margin-top: 2px; }
    html.fg-shell #childrenGrid .child-status { margin-top: 8px; }
    html.fg-shell #childrenGrid .info-badge { position: absolute; right: 10px; top: 8px; }
    html.fg-shell #childrenGrid .child-actions { margin-top: auto; padding-top: 10px; display: flex; flex-direction: column; gap: 6px; width: 100%; }
}