/* ============================================================
 * New design for the main (home) page that shows classes.
 * All rules are scoped under body.newdesign-home so they do
 * not affect other pages of the legacy Remini.css.
 * Source design: html-output/homepage/classes.{html,css}
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ----- Base scope ----- */
body.newdesign-home {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #FCFCFD;
}

/* Reset for buttons introduced by the new design. :where() gives this a
   specificity of 0 so any later class-targeted rule wins. */
body.newdesign-home :where(button) {
    border: none;
    background: var(--main-second-color);
    cursor: pointer;
    font-family: inherit;
    color:white;
}

/* ----- Quick Links card (legacy #topIcons, restyled) -----
   #topIcons is prepended to the list as the first card. Its icon links and
   their show/hide are driven by business logic in View.js — we only restyle. */
body.newdesign-home .card-body-mobile #topIcons {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch;
    background: #fff;
    border: 1px solid #E2E4E9;
    border-radius: 16px;
    overflow: hidden;
    padding: 0;
    margin: 0;
}
/* Card title bar (localized text injected by View.js as .ndQuickLinksTitle) */
body.newdesign-home .card-body-mobile #topIcons .ndQuickLinksTitle {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 8px 20px;
    border-bottom: 1px solid #E2E4E9;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #0A0C14;
}
/* Each icon link → a quick-link item (equal-width column) */
body.newdesign-home .card-body-mobile #topIcons > a {
    flex: 1 1 0;
    padding: 20px 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    color: #525666;
    text-align: center;
}
/* The legacy 64x64 svg becomes the 56x56 rounded icon tile */
body.newdesign-home .card-body-mobile #topIcons > a svg {
    display: block;
    margin: 0 auto 8px;
    width: 56px !important;
    height: 56px !important;
    padding: 14px;
    border: 1.4px solid #E2E4E9;
    border-radius: 12px;
    box-shadow: 0px 1.4px 2.8px rgba(228, 229, 231, 0.24);
    box-sizing: border-box;
}
/* Hide the legacy in-list "Create New Class..." add-item — the new design
   provides its own blue "Create New Class" button at the top of the page. */
body.newdesign-home .card-body-mobile .mainFaceTagItemAddItem {
    display: none !important;
}

/* ----- Each face-tag group renders as its own titled card -----
   (My Children, My Children's Classrooms, My Classes, Grades, Archive…).
   Whatever the view renders gets the new card look automatically. */
body.newdesign-home .card-body-mobile .mainFaceTagGroup {
    background: #fff !important;
    border: 1px solid #E2E4E9 !important;
    border-radius: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
}
/* Group header → card title bar */
body.newdesign-home .card-body-mobile .mainFaceTagGroupHeader {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: 8px 20px !important;
    border-bottom: 1px solid #E2E4E9;
    margin: 0 !important;
    background: transparent !important;
    width: auto !important;
}
body.newdesign-home .card-body-mobile .mainFaceTagGroupHeader > p {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #0A0C14;
    margin: 0;
    flex: 1;
}
/* Edit / delete icons that sit to the right of a card title (e.g. "My Classes"). */
body.newdesign-home .card-body-mobile .mainFaceTagGroupHeader > a {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex: none;
}
body.newdesign-home .card-body-mobile .mainFaceTagGroupHeader .mainFaceTagGroupHeaderEdit {
    display: flex;
    align-items: center;
    gap: 12px;
}
body.newdesign-home .card-body-mobile .mainFaceTagGroupHeader .mainFaceTagGroupHeaderEdit img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}
/* "View Profile" (per child row) and "Add Child" (My Children card header) buttons. */
body.newdesign-home .ndViewProfileBtn,
body.newdesign-home .ndAddChildBtn {
    flex: none;
    display: flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    border: 1px solid #E2E4E9;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #525966;
    box-shadow: 0px 1px 2px rgba(82, 88, 102, 0.06);
    white-space: nowrap;
    transition: background 0.1s;
}
body.newdesign-home .ndViewProfileBtn:hover,
body.newdesign-home .ndAddChildBtn:hover { background: #F6F7FA; }

/* Message (envelope) button on My Children's Classrooms rows + questionnaire button. */
body.newdesign-home .ndMessageBtn,
body.newdesign-home .ndQuizBtn {
    flex: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #E2E4E9;
    border-radius: 10px;
    box-shadow: 0px 1px 2px rgba(82, 88, 102, 0.06);
    transition: background 0.1s;
}
body.newdesign-home .ndMessageBtn:hover,
body.newdesign-home .ndQuizBtn:hover { background: #F6F7FA; }

/* Per-entity notification badge (added by updateEntitiesNotifications when a child/class has
   pending notifications) → small primary-colour pill, placed just before the row's actions. */
body.newdesign-home .card-body-mobile .mainFaceTagItem .mainFaceTagItemNotification {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    max-width: none !important;
    margin: 0 !important;
    flex: none;
    order: 1;
}
body.newdesign-home .card-body-mobile .mainFaceTagItem .mainFaceTagItemNotification > div {
    background: var(--main-color) !important;
    border-radius: 999px !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: 18px !important;
    padding: 0 7px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}
body.newdesign-home .card-body-mobile .mainFaceTagItem .mainFaceTagItemNotification p {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    color: #fff !important;
    text-align: center !important;
    overflow: visible !important;
}
/* Keep the row action buttons after the notification badge. */
body.newdesign-home .card-body-mobile .mainFaceTagItem .ndQuizBtn,
body.newdesign-home .card-body-mobile .mainFaceTagItem .ndViewProfileBtn,
body.newdesign-home .card-body-mobile .mainFaceTagItem .ndMessageBtn,
body.newdesign-home .card-body-mobile .mainFaceTagItem .ndMenuBtn {
    order: 2;
}

/* My Children: hide the legacy edit/delete header button — "Add Child" replaces it. */
body.newdesign-home .card-body-mobile .mainFaceTagGroup[data-id="myKids"] .mainFaceTagGroupHeader > a {
    display: none;
}
/* Group body → list of rows (dividers handled on the rows themselves) */
body.newdesign-home .card-body-mobile .mainFaceTagGroupBody {
    display: flex;
    flex-direction: column;
    padding: 4px 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    gap: 0 !important;
}

/* The legacy data-role="content" wrapper — strip its padding so the new
   layout fills the page edge-to-edge on mobile. */
body.newdesign-home #main .mainContent {
    padding: 0 !important;
    /* !important: Remini.css paints every .mainContent grey with !important. Same colour as
       .mobile-content, so the strip above it (the "Unread Messages" button) matches the section below. */
    background-color: #F6F7FA !important;
}

/* "Unread Messages" link at the top of Classes (View.js checkReady) → a new-design pill
   with an envelope + red dot instead of the old grey shadowed box. */
body.newdesign-home #main .mainContent .messagesMessage {
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: fit-content !important;
    margin: 16px auto 4px !important;
    padding: 8px 16px !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 999px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 20px;
    cursor: pointer;
    align-self: center;
}
body.newdesign-home #main .mainContent .messagesMessage::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e5534b;
    flex-shrink: 0;
}
body.newdesign-home #main .mainContent .messagesMessage:hover {
    background: #f5f8ff !important;
    border-color: #c7d7f5 !important;
    color: #1d4fb0 !important;
}
@media (max-width: 767px) {
    body.newdesign-home #main .mainContent .messagesMessage { margin: 12px auto 4px !important; }
}

/* ----- Mobile layout container ----- */
body.newdesign-home .mobile-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #FCFCFD;
}
@media (min-width: 768px) {
    body.newdesign-home .mobile-layout {
        max-width: 480px;
        margin: 0 auto;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    }
}

/* ----- Mobile header (top bar) ----- */
body.newdesign-home .mobile-header {
    background-color: white;
    width: 100%;
}
body.newdesign-home .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 12px 24px;
    height: 64px;
}
body.newdesign-home .header-left-mobile {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
body.newdesign-home .menu-btn-mobile {
    padding: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.newdesign-home .centre-name-mobile {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.27px;
    color: #0A0E14;
    flex: 1;
    min-width: 0;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.newdesign-home .header-right-mobile {
    display: flex;
    align-items: center;
    gap: 12px;
}
body.newdesign-home .icon-btn-mobile {
    position: relative;
    background-color: white;
    padding: 10px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.newdesign-home .notification-dot-mobile {
    position: absolute;
    right: 14px;
    top: 12px;
    width: 4px;
    height: 4px;
    background-color: #DF1C41;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0px 1px 2px rgba(226, 228, 233, 0.24);
}
body.newdesign-home .user-btn-mobile {
    background-color: white;
    padding: 10px;
    border-radius: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #D3E0F8;
}
body.newdesign-home .header-divider {
    height: 1px;
    background-color: #E2E3E9;
    width: 100%;
}

/* ----- Mobile content area ----- */
body.newdesign-home .mobile-content {
    background-color: #F6F7FA;
    padding: 24px 0 48px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
body.newdesign-home .content-section {
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
body.newdesign-home .title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
body.newdesign-home .page-title-mobile {
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: -0.36px;
    color: #0A0E14;
    flex: 1;
    margin: 0;
}
body.newdesign-home .edit-classes-link {
    padding: 6px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #2563D7;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.newdesign-home .done-btn {
    display: none;
    padding: 6px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #2563D7;
    background-color: white;
    border: 1px solid #2563D7;
    box-shadow: 0px 1px 2px rgba(55, 93, 251, 0.08);
}
body.newdesign-home.edit-mode .edit-classes-link { display: none; }
body.newdesign-home.edit-mode .done-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}
body.newdesign-home.edit-mode .create-class-btn-mobile { display: none; }

body.newdesign-home .create-class-btn-mobile {
    background-color: var(--main-second-color);
    border-radius: 10px;
    box-shadow: 0px 1px 2px rgba(55, 93, 251, 0.08);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: auto;
    flex: none;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: white;
}
body.newdesign-home .create-class-btn-mobile svg {
    width: 20px;
    height: 20px;
}

/* ----- Outer container — now just a transparent wrapper; each face-tag
   group inside is its own card (see .mainFaceTagGroup above). ----- */
body.newdesign-home .classes-card-mobile {
    background-color: transparent;
    border-radius: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    margin: 0;
}
/* Active/Archive toggle hidden — Archive (historic) now renders as its own
   card on the same page instead of behind a toggle. */
body.newdesign-home .card-header-mobile {
    display: none;
}
body.newdesign-home .view-toggle-mobile {
    background-color: #E2E4E9;
    border-radius: 10px;
    padding: 4px;
    display: flex;
    gap: 4px;
}
body.newdesign-home .toggle-btn-mobile {
    flex: 1;
    padding: 4px 2px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.084px;
    color: #525966;
    background-color: transparent;
    transition: all 0.2s;
}
body.newdesign-home .toggle-btn-mobile.active {
    background-color: white;
    color: #20252D;
    box-shadow: 0px 6px 10px rgba(27, 28, 29, 0.06), 0px 2px 4px rgba(27, 28, 29, 0.02);
}
body.newdesign-home .card-body-mobile {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* The legacy class list (mainFaceTagContainer) lives inside .card-body-mobile.
   Override its legacy CSS so children stack as new design cards. */
body.newdesign-home .card-body-mobile .mainFaceTagContainer {
    width: 100%;
    height: auto;
    overflow: visible;
    background: transparent;
    padding: 0;
}
body.newdesign-home .card-body-mobile .mainFaceTagContainer > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}
body.newdesign-home .card-body-mobile .mainFaceTagContainer a {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* Override legacy .mainFaceTagItem rules for the new design.
   Default = a list ROW inside a group card (avatar + name + actions). */
body.newdesign-home .card-body-mobile .mainFaceTagItem {
    list-style: none;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    padding: 12px 20px !important;
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    box-shadow: none;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}
/* Divider between rows — use border-TOP (skipped on the first row) so the
   hidden trailing "add" item never leaves a stray line at the card bottom. */
body.newdesign-home .card-body-mobile .mainFaceTagGroupBody .mainFaceTagItem {
    border-top: 1px solid #E2E4E9;
}
body.newdesign-home .card-body-mobile .mainFaceTagGroupBody > a:first-child .mainFaceTagItem,
body.newdesign-home .card-body-mobile .mainFaceTagGroupBody > .mainFaceTagItem:first-child {
    border-top: none;
}
/* A face-tag item that sits directly in the list (e.g. the "All Classes" /
   "All Children" rollup, not inside a group) keeps a standalone card look. */
body.newdesign-home .card-body-mobile .mainFaceTagContainer > ul > a > .mainFaceTagItem,
body.newdesign-home .card-body-mobile .mainFaceTagContainer > ul > .mainFaceTagItem {
    background-color: #fff;
    border: 1px solid #E2E4E9;
    border-radius: 16px;
    padding: 16px 20px !important;
}
/* Hide the legacy direct-child <img> only on the new design card variant
   (classCard wraps its avatar inside .ndAvatar). For legacy items still
   rendered without ndAvatar, fall back to styling the img as a 44px circle. */
body.newdesign-home .card-body-mobile .mainFaceTagItem.classCard > img {
    display: none;
}
body.newdesign-home .card-body-mobile .mainFaceTagItem:not(.classCard):not(.allClassesCard) > img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0;
    padding: 0;
    flex: none;
}
body.newdesign-home .card-body-mobile .mainFaceTagItem:not(.classCard):not(.allClassesCard) .mainFaceTagItemName {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    background: transparent;
    padding: 0;
    margin: 0;
}
body.newdesign-home .card-body-mobile .mainFaceTagItem:not(.classCard):not(.allClassesCard) .mainFaceTagItemName > p {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    color: #20252D;
    margin: 0;
}
body.newdesign-home .card-body-mobile .mainFaceTagItem:not(.classCard):not(.allClassesCard) {
    align-items: center;
    gap: 12px;
}
body.newdesign-home .card-body-mobile .mainFaceTagItem .mainFaceTagItemName {
    display: contents;
    background: transparent;
    padding: 0;
    margin: 0;
}
body.newdesign-home .card-body-mobile .mainFaceTagItem .mainFaceTagItemName > p {
    margin: 0;
    color: #20252D;
}

/* All-classes / grouped item (id == AllChildren / AllTeacherFrames / etc.) */
body.newdesign-home .card-body-mobile .mainFaceTagItem.allClassesCard {
    align-items: center;
    gap: 12px;
    /* Override every legacy absolute-positioned inner element so the card
       width stays constrained to the container. */
    overflow: visible;
}
body.newdesign-home .card-body-mobile .mainFaceTagItem.allClassesCard .faceTagSingleGroupImage,
body.newdesign-home .card-body-mobile .mainFaceTagItem.allClassesCard .faceTagSingleGroupImageRTL {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    position: static !important;
    overflow: visible !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    flex: none;
    margin: 0;
}
body.newdesign-home .card-body-mobile .mainFaceTagItem.allClassesCard .faceTagSingleGroupImage > img,
body.newdesign-home .card-body-mobile .mainFaceTagItem.allClassesCard .faceTagSingleGroupImage > .ndAvatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    margin: 0 -22px 0 0 !important;
    border: none !important;
    padding: 0 !important;
    object-fit: cover;
    flex: none;
    position: static !important;
    top: auto !important;
    left: auto !important;
    float: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.newdesign-home .card-body-mobile .mainFaceTagItem.allClassesCard .faceTagSingleGroupImage > *:last-child {
    margin-right: 0 !important;
}
/* Add right-padding inside the group so the stack doesn't run into the title. */
body.newdesign-home .card-body-mobile .mainFaceTagItem.allClassesCard .faceTagSingleGroupImage {
    padding-right: 22px !important;
}
body.newdesign-home .card-body-mobile .mainFaceTagItem.allClassesCard .mainFaceTagItemName {
    display: flex !important;
    flex: 1;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}
body.newdesign-home .card-body-mobile .mainFaceTagItem.allClassesCard .mainFaceTagItemName > p {
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 24px;
    letter-spacing: -0.27px;
    color: #20252D !important;
    flex: 1;
    margin: 0 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Single-class row */
body.newdesign-home .card-body-mobile .mainFaceTagItem.classCard {
    align-items: center;
}
body.newdesign-home .ndDragHandle {
    display: none;
    padding: 0;
    margin-top: 0;
    background: transparent;
    border: none;
    cursor: grab;
    align-self: center;
}
body.newdesign-home .ndDragHandle:active { cursor: grabbing; }
body.newdesign-home.edit-mode .ndDragHandle {
    display: flex;
    align-items: center;
    justify-content: center;
}
body.newdesign-home .ndAvatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21.859px;
    font-weight: 700;
    line-height: 29.145px;
    letter-spacing: -0.3279px;
    color: white;
    opacity: 0.8;
    flex: none;
    object-fit: cover;
    overflow: hidden;
}
body.newdesign-home .ndAvatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Photo layered over the letter fallback: letter fills the bubble behind, the
   <img> sits on top and covers it once the (possibly lazy-loaded) photo paints.
   If the image is missing/fails, .nd-img-failed hides it so the letter shows. */
body.newdesign-home .ndAvatar.nd-has-photo { position: relative; }
body.newdesign-home .ndAvatar.nd-has-photo .nd-avatar-letter {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.newdesign-home .ndAvatar.nd-has-photo img {
    position: absolute;
    top: 0; left: 0;
}
body.newdesign-home .ndAvatar.nd-has-photo img.nd-img-failed,
body.newdesign-home .ndAvatar.nd-has-photo img:not([src]) { display: none; }
/* If the resolved src is a default/placeholder icon (generic profile, school,
   empty face-tag) — including one injected later by the lazy-loader — hide it so
   the letter initials show instead of stacking under the icon. */
body.newdesign-home .ndAvatar.nd-has-photo img[src*="icons_profile"],
body.newdesign-home .ndAvatar.nd-has-photo img[src*="icons_school"],
body.newdesign-home .ndAvatar.nd-has-photo img[src*="emptyFaceTag"],
body.newdesign-home .ndAvatar.nd-has-photo img[src*="998.png"] { display: none; }
body.newdesign-home .ndAvatar.avatar-a { background: linear-gradient(135deg, #A855F7 0%, #9333EA 100%); }
body.newdesign-home .ndAvatar.avatar-b { background: linear-gradient(135deg, #F97316 0%, #EA580C 100%); }
body.newdesign-home .ndAvatar.avatar-c { background: linear-gradient(135deg, #EC4899 0%, #DB2777 100%); }
body.newdesign-home .ndAvatar.avatar-d { background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%); }

body.newdesign-home .ndClassDetails {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
body.newdesign-home .ndClassDetails h4 {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.16px;
    color: #20252D;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* New design rows show just the name (no "0 Children / 0 Staff" stats). */
body.newdesign-home .ndStats {
    display: none;
    gap: 12px;
    align-items: baseline;
}
body.newdesign-home .ndStats span {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: #525966;
}
body.newdesign-home .ndStats strong {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #20252D;
}
body.newdesign-home .ndMenuBtn {
    padding: 10px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    margin-top: 0;
    flex: none;
}
/* Remove the per-row "More" kebab from class/child rows — options come from the
   card's Edit button (My Classes) / dedicated buttons (My Children). */
body.newdesign-home .card-body-mobile .mainFaceTagItem.classCard .ndMenuBtn {
    display: none;
}

/* Badges */
body.newdesign-home .ndBadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: -0.084px;
    align-self: flex-start;
}
body.newdesign-home .ndBadge.badge-closed { background-color: #FFDAC2; color: #883C09; }
body.newdesign-home .ndBadge.badge-over-ratio { background-color: #F8C9D2; color: #710E21; }

/* ----- Footer ----- */
body.newdesign-home .mobile-footer {
    padding: 0 24px;
    text-align: center;
}
body.newdesign-home .mobile-footer p {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #525666;
    margin: 0;
}

/* ----- Drawer overlay ----- */
body.newdesign-home .drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 999;
}
body.newdesign-home .drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ----- Drawer (bottom sheet) ----- */
body.newdesign-home .nd-drawer {
    position: fixed;
    background-color: white;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transition: transform 0.3s ease;
    overflow: hidden;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 90vh;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    transform: translateY(100%);
}
body.newdesign-home .nd-drawer.active { transform: translateY(0); }
@media (min-width: 768px) {
    /* Desktop: full-height panel anchored to the right edge, sliding in from right to left. */
    body.newdesign-home .nd-drawer {
        top: 0;
        bottom: 0;
        right: 0;
        left: auto;
        width: 480px;
        max-width: 100%;
        height: 100%;
        max-height: none;
        border-radius: 0;
        transform: translateX(100%);
    }
    body.newdesign-home .nd-drawer.active { transform: translateX(0); }
}

body.newdesign-home .drawer-header {
    background-color: white;
    padding: 20px 24px;
}
body.newdesign-home .drawer-header-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}
body.newdesign-home .drawer-title-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
body.newdesign-home .drawer-title {
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: -0.36px;
    color: #20252D;
    margin: 0;
}
body.newdesign-home .drawer-subtitle {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #525966;
    margin: 0;
}
body.newdesign-home .close-drawer-btn {
    padding: 6px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}
body.newdesign-home .close-drawer-btn:hover { background-color: #F6F7FA; }
body.newdesign-home .drawer-divider {
    height: 1px;
    background-color: #E2E4E9;
    margin: 0 24px;
}
body.newdesign-home .drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px 26px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

body.newdesign-home .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
body.newdesign-home .form-label {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #20252D;
    display: flex;
    align-items: center;
    gap: 4px;
}
body.newdesign-home .label-optional { font-weight: 400; color: #525966; }
body.newdesign-home .form-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #E2E4E9;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #20252D;
    background-color: white;
    box-shadow: 0px 1px 2px 0px rgba(228, 229, 231, 0.24);
    transition: border-color 0.2s;
}
body.newdesign-home .form-input::placeholder { color: #6B7381; font-style: italic; }
body.newdesign-home .form-input:focus { outline: none; border-color: #2563D7; }

body.newdesign-home .date-input {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
}
body.newdesign-home .date-input svg { flex-shrink: 0; }
body.newdesign-home .date-value {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #20252D;
}

body.newdesign-home .form-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
body.newdesign-home .form-hint svg { flex-shrink: 0; margin-top: 2px; }
body.newdesign-home .form-hint p {
    flex: 1;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #6B7381;
    margin: 0;
}

body.newdesign-home .file-upload-area {
    background-color: #F6F7FA;
    border: 1px dashed #CDD0D5;
    border-radius: 12px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    text-align: center;
    cursor: pointer;
}
body.newdesign-home .file-upload-area.dragover {
    border-color: #2563D7;
    background-color: #EEF4FF;
}
/* Thumbnail of the chosen class image. */
body.newdesign-home .file-upload-area .nd-upload-preview {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    object-fit: cover;
    display: block;
}
/* Hide the placeholder upload icon once an image is chosen. */
body.newdesign-home .file-upload-area.has-image > svg { display: none; }
body.newdesign-home .upload-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
body.newdesign-home .upload-title {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #20252D;
    margin: 0;
}
body.newdesign-home .upload-subtitle {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: #6B7381;
    margin: 0;
}
body.newdesign-home .browse-file-btn {
    background-color: white;
    border: 1px solid #2563D7;
    border-radius: 8px;
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #2563D7;
    box-shadow: 0px 1px 2px 0px rgba(55, 93, 251, 0.08);
    transition: background-color 0.2s;
}
body.newdesign-home .browse-file-btn:hover { background-color: #EEF4FF; }

body.newdesign-home .toggle-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 16px;
    border: 1px solid #E2E4E9;
    border-radius: 10px;
    transition: border-color 0.2s;
}
body.newdesign-home .toggle-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
body.newdesign-home .toggle-title {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #20252D;
    margin: 0;
}
body.newdesign-home .toggle-description {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: #525966;
    margin: 0;
}
body.newdesign-home .nd-switch {
    position: relative;
    width: 32px;
    height: 20px;
    display: inline-block;
    cursor: pointer;
}
body.newdesign-home .nd-switch input { opacity: 0; width: 0; height: 0; }
body.newdesign-home .nd-switch-slider {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #CDD0D5;
    border-radius: 96px;
    transition: 0.3s;
    box-shadow: inset 0px 4px 4px 0px rgba(15, 15, 16, 0.06);
}
body.newdesign-home .nd-switch-slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    border-radius: 50%;
    transition: 0.3s;
    box-shadow: 0px 6px 10px 0px rgba(27, 28, 29, 0.06), 0px 2px 4px 0px rgba(27, 28, 29, 0.02);
}
body.newdesign-home .nd-switch input:checked + .nd-switch-slider { background-color: #2563D7; }
body.newdesign-home .nd-switch input:checked + .nd-switch-slider:before { transform: translateX(12px); }

body.newdesign-home .drawer-actions {
    background-color: white;
    padding: 12px 24px 20px;
    display: flex;
    gap: 16px;
    border-top: 1px solid transparent;
}
body.newdesign-home .btn-secondary,
body.newdesign-home .btn-primary {
    flex: 1;
    padding: 10px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: center;
    transition: all 0.2s;
}
body.newdesign-home .btn-secondary {
    background-color: white;
    border: 1px solid #E2E4E9;
    color: #525966;
    box-shadow: 0px 1px 2px 0px rgba(82, 88, 102, 0.06);
}
body.newdesign-home .btn-secondary:hover { background-color: #F6F7FA; }
body.newdesign-home .btn-primary {
    background-color: var(--main-second-color);
    border: none;
    color: white;
    box-shadow: 0px 1px 2px 0px rgba(55, 93, 251, 0.08);
}
body.newdesign-home .btn-primary:hover { background-color: #1D4ED8; }

body.newdesign-home.drawer-open { overflow: hidden; }

/* Remove-child button (Add Child drawer in edit / view-profile mode) */
body.newdesign-home .nd-remove-child-btn {
    margin-top: 4px;
    width: 100%;
    padding: 10px;
    background: #fff;
    border: 1px solid #f3c2cc;
    border-radius: 10px;
    color: #df1c41;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s;
}
body.newdesign-home .nd-remove-child-btn:hover { background: #fef2f4; }

/* Daily Questionnaire drawer fields */
body.newdesign-home .nd-quiz-q .form-label { line-height: 20px; }
body.newdesign-home .nd-quiz-options { display: flex; flex-wrap: wrap; gap: 8px; }
body.newdesign-home .nd-quiz-opt,
body.newdesign-home .nd-quiz-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid #E2E4E9;
    border-radius: 10px;
    background: #fff;
    font-size: 14px;
    color: #20252D;
    cursor: pointer;
}
body.newdesign-home .nd-quiz-check { width: 100%; }
body.newdesign-home .nd-quiz-opt input,
body.newdesign-home .nd-quiz-check input {
    width: auto;
    margin: 0;
    accent-color: var(--main-second-color);
}
body.newdesign-home .nd-quiz-alert { color: #df1c41; font-size: 13px; line-height: 18px; }

/* ===== Reports page (#attendanceReports) → new-design cards ===== */
body.newdesign-home #attendanceReports { background: #f6f7fa !important; }
body.newdesign-home #attendanceReports .mainContent {
    background: #f6f7fa !important;
    padding: 0 0 32px !important;
}
body.newdesign-home #attendanceReports .nd-reports-title {
    margin: 0;
    padding: 20px 24px 4px;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.36px;
    color: #0a0e14;
}
/* drop the legacy <br> spacers between sections */
body.newdesign-home #attendanceReports .mainContent > br { display: none; }
/* section heading */
body.newdesign-home #attendanceReports h3.h3 {
    margin: 0;
    padding: 20px 24px 8px;
    font-size: 15px;
    font-weight: 600;
    color: #525966;
    background: transparent;
    border: none;
    text-shadow: none;
}
/* each control group → a white card of rows */
body.newdesign-home #attendanceReports .ui-controlgroup {
    margin: 0 24px !important;
    background: #fff !important;
    border: 1px solid #e2e4e9 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: none !important;
}
body.newdesign-home #attendanceReports .ui-controlgroup-controls { width: 100%; }
body.newdesign-home #attendanceReports .ui-controlgroup .ui-btn {
    position: relative;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: 1px solid #eef0f3 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    text-shadow: none !important;
    padding: 14px 40px 14px 18px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #20252d !important;
    text-align: left !important;
    white-space: normal;
}
body.newdesign-home #attendanceReports .ui-controlgroup .ui-btn:last-child { border-bottom: none !important; }
body.newdesign-home #attendanceReports .ui-controlgroup .ui-btn:hover { background: #f6f7fa !important; }
/* right chevron affordance */
body.newdesign-home #attendanceReports .ui-controlgroup .ui-btn::after {
    content: "";
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; opacity: 0.55;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M6 4l4 4-4 4' stroke='%23525966' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
    margin: 0 !important;
}
@media (max-width: 768px) {
    body.newdesign-home #attendanceReports .nd-reports-title { padding: 16px 14px 4px; font-size: 20px; }
    body.newdesign-home #attendanceReports h3.h3 { padding: 16px 14px 8px; }
    body.newdesign-home #attendanceReports .ui-controlgroup { margin: 0 14px !important; }
}
/* Match the topbar height of the shared header (headerRoot is 60px). */
body.newdesign-home #attendanceReports .head { min-height: 60px; }

/* ===== Billing page (#billing) → new-design cards ===== */
body.newdesign-home #billing { background: #f6f7fa !important; }
/* Header: match the landing-page top-bar height (60px) + keep a back button */
body.newdesign-home #billing .head.headerRoot { min-height: 60px; }
body.newdesign-home #billing .head .settings { display: none !important; }
body.newdesign-home #billing .head .leftButton {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%); z-index: 5; margin: 0;
}
body.newdesign-home #billing .head .leftButton img {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5M11 18l-6-6 6-6' stroke='%2320252d' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    width: 26px !important; height: 26px !important; filter: none !important;
}
body.newdesign-home #billing .noMargin.ui-content { background: #f6f7fa !important; }
/* The controller's inline title bar → page title + tab row */
body.newdesign-home #billing .noMargin.ui-content > div:first-child {
    background: transparent !important;
    height: auto !important;
    top: 0 !important;
    margin: 0 !important;
    padding: 20px 24px 0 !important;
}
body.newdesign-home #billing .noMargin.ui-content > div:first-child > p:first-child {
    font-size: 24px !important;
    font-weight: 500 !important;
    letter-spacing: -0.36px;
    color: #0a0e14 !important;
    -webkit-text-stroke: 0 !important;
    left: 0 !important;
    padding: 0 !important;
    margin: 0 0 12px !important;
}
/* Create New button → blue pill */
body.newdesign-home #billing #createNewDivTop {
    top: 0 !important; right: 0 !important; float: right !important;
    height: 38px !important; width: auto !important; min-width: 120px;
    border-radius: 10px !important; padding: 0 16px 0 34px !important;
    text-align: center !important; font-size: 14px !important;
    background: var(--main-second-color) !important;
}
/* Forms-style toolbar: Billing title + Accounts/Reports/Settings toggle + Add Billing */
body.newdesign-home #billing .nd-billing-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px; position: relative; margin: 10 0 18px;
}
body.newdesign-home #billing .nd-billing-toolbar .nd-toolbar-left { display: flex; align-items: center; gap: 16px; }
body.newdesign-home #billing .nd-billing-toolbar .nd-forms-title {
    font-size: 24px; font-weight: 500; letter-spacing: -0.36px; line-height: 32px;
    color: #0a0e14; -webkit-text-stroke: 0 !important; margin: 0 !important; padding: 0 !important;
}
body.newdesign-home #billing .nd-billing-tabs {
    background: #fff; padding: 4px; border-radius: 10px; display: inline-flex; gap: 4px; border: 1px solid #e2e4e9;
}
body.newdesign-home #billing .nd-billing-tabs .nd-toggle-btn {
    background: transparent; border: none; padding: 7px 14px; border-radius: 7px;
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 500; line-height: 20px; color: #525966; cursor: pointer;
    height: auto !important; width: auto !important; min-height: 0 !important; margin: 0 !important;
}
body.newdesign-home #billing .nd-billing-tabs .nd-toggle-btn span { font-size: 14px !important; }
body.newdesign-home #billing .nd-billing-tabs .nd-toggle-btn:hover { background: #f6f7fa; }
body.newdesign-home #billing .nd-billing-tabs .nd-toggle-btn.active {
    background: var(--main-second-color); color: #fff; box-shadow: 0 1px 2px rgba(55,93,251,0.18);
}
body.newdesign-home #billing .nd-billing-tabs .nd-toggle-btn.active span { color: #fff !important; }
/* Add Billing pill */
body.newdesign-home #billing .nd-add-billing-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px; border: none; border-radius: 10px;
    background: var(--main-second-color); color: #fff;
    font-weight: 500; line-height: 20px; cursor: pointer;
    box-shadow: 0 1px 2px rgba(55,93,251,0.12);
    height: auto !important; width: auto !important;
}
body.newdesign-home #billing .nd-add-billing-btn:hover { filter: brightness(0.95); }
body.newdesign-home #billing .nd-add-billing-btn span { font-size: 14px !important; color: #fff !important; }
body.newdesign-home #billing .nd-add-billing-btn svg { flex-shrink: 0; }
/* The create dropdown, re-anchored under the Add Billing pill (display toggled inline by JS) */
body.newdesign-home #billing .nd-add-billing-menu {
    position: absolute !important; top: calc(100% + 6px) !important; right: 0 !important; left: auto !important;
    width: 220px !important; height: auto !important; margin: 0 !important; padding: 6px !important;
    background: #fff !important; border: 1px solid #e2e4e9 !important; border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important; overflow: hidden; z-index: 200;
}
body.newdesign-home #billing .nd-add-billing-menu button {
    position: static !important; display: block !important; width: 100% !important; height: auto !important;
    text-align: left !important; padding: 11px 12px !important; font-size: 14px !important;
    color: #20252d !important; background: #fff !important; border: none !important; border-radius: 8px !important;
}
body.newdesign-home #billing .nd-add-billing-menu button:hover { background: #f6f7fa !important; }
body.newdesign-home #billing .nd-add-billing-menu hr { display: none !important; }

/* List table → card */
body.newdesign-home #billing #divPage,
body.newdesign-home #billing #billingChildrenTable { margin: 14px 0px !important; left: 0 !important; }
body.newdesign-home #billing #billingChildrenTable {
    box-shadow: none !important;
    border: 1px solid #e2e4e9 !important;
    border-radius: 16px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden;
    width: calc(100% - 48px) !important;
}
body.newdesign-home #billing #billingChildrenTable tr { border: none !important; cursor: pointer; }
body.newdesign-home #billing #billingChildrenTable tr td { border-bottom: 1px solid #e2e4e9 !important; height: auto !important; padding: 12px 16px !important; font-size: 14px !important; color: #20252d !important; }
body.newdesign-home #billing #billingChildrenTable tr:last-child td { border-bottom: none !important; }
body.newdesign-home #billing #billingChildrenTable tr[data-id-child]:hover td { background: #f6f7fa !important; cursor: pointer; }
body.newdesign-home #billing #billingChildrenTable .tdTitle { background: #e9f0fb !important; color: #525966 !important; font-weight: 500 !important; font-size: 13px !important; }
body.newdesign-home #billing #billingChildrenTable td img { width: 36px !important; height: 36px !important; border-radius: 50% !important; }
body.newdesign-home #billing #billingChildrenTable td p { font-size: 14px !important; top: 9px !important; padding-left: 46px !important; }
body.newdesign-home #billing .addpayforparent { color: #2563d7 !important; font-weight: 500; }

/* Accounts toolbar (lives inside the table card, above the column header) */
body.newdesign-home #billing #billingChildrenTable .nd-acct-toolbar-row td { padding: 0 !important; background: #fff !important; border: none !important; }
body.newdesign-home #billing .nd-acct-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 16px 20px; background: #fff;
}
body.newdesign-home #billing .nd-acct-title { font-size: 16px; font-weight: 500; color: #0a0e14; }
body.newdesign-home #billing .nd-acct-toolbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; }
body.newdesign-home #billing .nd-acct-toolbar #inputSearch {
    float: none !important; display: inline-block !important; vertical-align: middle;
    box-shadow: none !important; border: 1px solid #e2e4e9 !important; border-radius: 8px !important;
    height: 36px !important; width: 240px !important; max-width: 44vw; margin: 0 !important;
    padding: 0 12px 0 34px !important; font-size: 14px !important; color: #20252d !important;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none'%3E%3Ccircle cx='6.5' cy='6.5' r='4.5' stroke='%23525966' stroke-width='1.33'/%3E%3Cpath d='M10 10l3 3' stroke='%23525966' stroke-width='1.33' stroke-linecap='round'/%3E%3C/svg%3E") 11px center / 15px no-repeat !important;
}
body.newdesign-home #billing .nd-acct-toolbar .divForSelect {
    /* Legacy Remini.css sets `.divForSelect:nth-child(2) { visibility:hidden }` (it
       hid the old 2nd filter dropdown) — ours is the 2nd child here, so force visible. */
    visibility: visible !important;
    float: none !important; display: inline-flex !important; align-items: center; vertical-align: middle; position: relative;
    border: 1px solid #e2e4e9 !important; border-radius: 8px !important; background: #fff !important;
    height: 36px !important; min-width: 150px; width: auto !important;
    margin: 0 !important; padding: 0 30px 0 12px !important; box-shadow: none !important; z-index: 1; overflow: visible !important;
}
body.newdesign-home #billing .nd-acct-toolbar .divForSelect select { visibility: visible !important; }
/* chevron drawn on the wrapper (don't depend on the legacy .arrowForSelect element) */
body.newdesign-home #billing .nd-acct-toolbar .divForSelect::after {
    content: ""; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    width: 12px; height: 12px; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none'%3E%3Cpath d='M3 4.5l3 3 3-3' stroke='%23525966' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
body.newdesign-home #billing .nd-acct-toolbar .divForSelect .arrowForSelect { display: none !important; }
body.newdesign-home #billing .nd-acct-toolbar .divForSelect select {
    height: 34px !important; width: 100% !important; min-width: 110px !important;
    border: none !important; background: transparent !important; box-shadow: none !important;
    font-size: 14px !important; color: #20252d !important; padding: 0 !important; margin: 0 !important;
    -webkit-appearance: none !important; appearance: none !important; cursor: pointer; opacity: 1 !important;
    position: static !important; float: none !important;
}
body.newdesign-home #billing .nd-acct-toolbar #downloadBillingR {
    width: auto !important; height: 36px !important; display: inline-flex !important; align-items: center; gap: 6px;
    padding: 0 14px !important; border: 1px solid #e2e4e9; border-radius: 8px; background: #fff; cursor: pointer; margin: 0 !important;
}
body.newdesign-home #billing .nd-acct-toolbar #downloadBillingR img { height: 18px !important; width: 18px !important; }
body.newdesign-home #billing .nd-acct-toolbar #downloadBillingR::after {
    content: "Download CSV"; font-size: 14px; font-weight: 500; color: #525966; white-space: nowrap;
}
/* Child cell: avatar / initials + name */
body.newdesign-home #billing .nd-acct-child { display: flex; align-items: center; gap: 10px; }
body.newdesign-home #billing .nd-acct-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
body.newdesign-home #billing .nd-acct-initials {
    width: 36px; height: 36px; border-radius: 50%; background: #a8c1f0; color: #0f2857;
    font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
body.newdesign-home #billing .nd-acct-name { font-size: 14px; font-weight: 500; color: #20252d; }

/* Sortable column headers (Child / Current / Outstanding) */
body.newdesign-home #billing #billingChildrenTable .nd-acct-head .nd-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
body.newdesign-home #billing #billingChildrenTable .nd-sort-ico {
    display: inline-block; width: 12px; height: 12px; margin-left: 5px; vertical-align: middle;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none'%3E%3Cpath d='M3.5 5L6 2.5 8.5 5' stroke='%239aa1ad' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.5 7L6 9.5 8.5 7' stroke='%239aa1ad' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
body.newdesign-home #billing #billingChildrenTable .nd-sort-asc .nd-sort-ico {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none'%3E%3Cpath d='M3.5 5L6 2.5 8.5 5' stroke='%232563d7' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.5 7L6 9.5 8.5 7' stroke='%23cbd2dc' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
body.newdesign-home #billing #billingChildrenTable .nd-sort-desc .nd-sort-ico {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none'%3E%3Cpath d='M3.5 5L6 2.5 8.5 5' stroke='%23cbd2dc' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.5 7L6 9.5 8.5 7' stroke='%232563d7' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* ----- Child billing DETAIL header (back + avatar + name/class + Action) ----- */
body.newdesign-home #billing .nd-bill-detail-header {
    display: flex; align-items: center; gap: 14px; padding: 18px 24px 6px;
}
body.newdesign-home #billing .nd-bill-back {
    width: 36px; height: 36px; border-radius: 10px; background: #f6f7fa; border: none;
    display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
body.newdesign-home #billing .nd-bill-back:hover { background: #e2e4e9; }
body.newdesign-home #billing .nd-bill-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
body.newdesign-home #billing .nd-bill-initials {
    width: 56px; height: 56px; border-radius: 50%; background: #a8c1f0; color: #0f2857;
    font-size: 18px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
body.newdesign-home #billing .nd-bill-peer { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
body.newdesign-home #billing .nd-bill-name {
    font-size: 22px; font-weight: 500; letter-spacing: -0.36px; color: #0a0e14;
    -webkit-text-stroke: 0 !important; line-height: 1.25;
}
body.newdesign-home #billing .nd-bill-class { font-size: 12px; color: #525966; }
/* Action button = the #selectAction <select> styled as a blue dropdown pill */
body.newdesign-home #billing .nd-bill-action-wrap { position: relative; margin-left: auto; flex-shrink: 0; }
body.newdesign-home #billing .nd-bill-action-select {
    -webkit-appearance: none !important; appearance: none !important; visibility: visible !important;
    background: var(--main-second-color) !important; color: #fff !important;
    border: none !important; border-radius: 10px !important; height: 38px !important; width: auto !important;
    padding: 0 36px 0 16px !important; font-size: 14px !important; font-weight: 500 !important; cursor: pointer;
    box-shadow: 0 1px 2px rgba(55,93,251,0.12); position: static !important; top: auto !important;
}
body.newdesign-home #billing .nd-bill-action-wrap::after {
    content: ""; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    width: 12px; height: 12px; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none'%3E%3Cpath d='M3 4.5l3 3 3-3' stroke='white' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
@media (max-width: 768px) {
    body.newdesign-home #billing .nd-bill-detail-header { flex-wrap: wrap; padding: 14px; gap: 10px; }
    body.newdesign-home #billing .nd-bill-avatar,
    body.newdesign-home #billing .nd-bill-initials { width: 44px; height: 44px; font-size: 15px; }
    body.newdesign-home #billing .nd-bill-name { font-size: 18px; }
    body.newdesign-home #billing .nd-bill-action-wrap { margin-left: 0; width: 100%; }
    body.newdesign-home #billing .nd-bill-action-select { width: 100% !important; }
}

/* Child billing detail — summary widget cards (Total Due / Past Due / Upcoming / Autopay) */
body.newdesign-home #billing .nd-bill-widgets {
    display: flex; gap: 12px; padding: 12px 24px 4px; flex-wrap: wrap;
}
body.newdesign-home #billing .nd-bill-widget {
    flex: 1 1 0; min-width: 150px;
    display: flex; align-items: flex-start; gap: 12px;
    background: #fff; border: 1px solid #e2e4e9; border-radius: 16px; padding: 16px;
    box-shadow: 0 1px 2px rgba(228,229,231,0.24);
}
body.newdesign-home #billing .nd-bill-widget-icon {
    width: 40px; height: 40px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
body.newdesign-home #billing .nd-w-blue   { background: #d3e0f8; }
body.newdesign-home #billing .nd-w-red    { background: #f8c9d2; }
body.newdesign-home #billing .nd-w-orange { background: #ffdac2; }
body.newdesign-home #billing .nd-w-purple { background: #e6c2ff; }
body.newdesign-home #billing .nd-bill-widget-body { display: flex; flex-direction: column; min-width: 0; }
body.newdesign-home #billing .nd-bill-widget-amount {
    font-size: 22px; font-weight: 500; letter-spacing: -0.36px; color: #20232d; line-height: 1.3;
    -webkit-text-stroke: 0 !important; white-space: nowrap;
}
body.newdesign-home #billing .nd-bill-widget-label { font-size: 13px; color: #525666; margin-top: 2px; }
@media (max-width: 768px) {
    body.newdesign-home #billing .nd-bill-widgets { padding: 12px 14px 4px; }
    body.newdesign-home #billing .nd-bill-widget { flex: 1 1 calc(50% - 6px); min-width: 0; padding: 12px; }
    body.newdesign-home #billing .nd-bill-widget-amount { font-size: 18px; }
}

/* Pending Charges table — title/total/filters band + status badges */
body.newdesign-home #billing .nd-pc-toolbar-row td { background: #fff !important; border: none !important; padding: 0 !important; }
body.newdesign-home #billing .nd-pc-toolbar {
   background-color:#fff; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 20px;
}
body.newdesign-home #billing .nd-pc-toolbar-left { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
body.newdesign-home #billing .nd-pc-title { font-size: 16px; font-weight: 500; color: #0a0e14; }
body.newdesign-home #billing .nd-pc-total { font-size: 13px; color: #525966; }
body.newdesign-home #billing .nd-pc-total strong { color: #20252d; font-weight: 600; }
body.newdesign-home #billing .nd-pc-toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* filter dropdowns (same treatment as the accounts class filter) */
body.newdesign-home #billing .nd-pc-filter {
    visibility: visible !important;
    float: none !important; display: inline-flex !important; align-items: center; position: relative;
    border: 1px solid #e2e4e9 !important; border-radius: 8px !important; background: #fff !important;
    height: 34px !important; min-width: 120px; width: auto !important;
    margin: 0 !important; padding: 0 28px 0 10px !important; box-shadow: none !important; z-index: 1; overflow: visible !important;
}
body.newdesign-home #billing .nd-pc-filter::after {
    content: ""; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    width: 12px; height: 12px; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none'%3E%3Cpath d='M3 4.5l3 3 3-3' stroke='%23525966' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
body.newdesign-home #billing .nd-pc-filter .arrowForSelect { display: none !important; }
body.newdesign-home #billing .nd-pc-filter select {
    visibility: visible !important; height: 32px !important; width: 100% !important; border: none !important;
    background: transparent !important; font-size: 13px !important; color: #525966 !important; padding: 0 !important; margin: 0 !important;
    -webkit-appearance: none !important; appearance: none !important; cursor: pointer;
}
body.newdesign-home #billing .nd-pc-daterange {
    display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
    background: #fff; border: 1px solid #e2e4e9; border-radius: 8px; color: #525966; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
body.newdesign-home #billing .nd-pc-head .tdTitle { background: #e9f0fb !important; color: #525966 !important; font-weight: 500 !important; font-size: 13px !important; }
body.newdesign-home #billing .nd-pc-desc { max-width: 240px; white-space: normal !important; color: #20252d; }
body.newdesign-home #billing .nd-pc-actions { width: 50px; text-align: right; }

/* Status badges (reused by Posted Transactions too) */
body.newdesign-home #billing .nd-badge {
    display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 500; white-space: nowrap;
}
body.newdesign-home #billing .nd-badge-processing { background: #dbeafe; color: #1e40af; }
body.newdesign-home #billing .nd-badge-failed { background: #fce7f3; color: #9d174d; border: 1px solid #fbcfe8; }
body.newdesign-home #billing .nd-badge-pending { background: #fef3c7; color: #92400e; }
body.newdesign-home #billing .nd-badge-completed { background: #d1fae5; color: #065f46; }
body.newdesign-home #billing .nd-badge-refunded { background: #fef3c7; color: #92400e; }
/* Posted-transactions receipt download icon */
body.newdesign-home #billing .nd-pt-dl { display: inline-flex; align-items: center; justify-content: center; color: #525966; text-decoration: none; padding: 5px; border-radius: 6px; }
body.newdesign-home #billing .nd-pt-dl:hover { background: #f6f7fa; color: #2563d7; }
body.newdesign-home #billing #ptrans .nd-pc-actions { text-align: center; width: 70px; }

/* Detail sections (#divPage): section headings + tables as cards */
body.newdesign-home #billing #divPage > p {
    top: 0 !important; left: 0 !important; margin: 20px 24px 8px !important;
    color: #525966 !important; font-size: 15px !important; font-weight: 600 !important;
    -webkit-text-stroke: 0 !important;
}
body.newdesign-home #billing #divPage table {
    background: #fff !important;
    box-shadow: none !important;
    border: 1px solid #e2e4e9 !important;
    border-radius: 16px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden;
    top: 0 !important; left: 0 !important;
    margin: 16px 24px 16px !important;
    width: calc(100% - 48px) !important;
}
body.newdesign-home #billing #divPage table tr td { border: none !important; border-bottom: 1px solid #e2e4e9 !important; height: auto !important; padding: 12px 16px !important; font-size: 14px !important; }
body.newdesign-home #billing #divPage table tr:last-child td { border-bottom: none !important; }
body.newdesign-home #billing #divPage table tr:first-child td { margin-top: 14px; color: #525966 !important; font-weight: 500 !important; font-size: 13px !important; }
/* The pending/posted toolbar band is the first row but is NOT a column header —
   keep it solid white with no separator (it would otherwise pick up the grey
   first-row background + bottom border above). */
body.newdesign-home #billing #divPage table tr.nd-pc-toolbar-row td { background: #fff !important; border: none !important; padding: 0 !important; }
body.newdesign-home #billing #divPage table tr.nd-pc-toolbar-row .nd-pc-toolbar { background: #fff !important; }
/* "In process" / pending-charges payment tables (.pcpss / .pcps / .ptps) → same card look */
body.newdesign-home #billing .pcpss,
body.newdesign-home #billing .pcps,
body.newdesign-home #billing .ptps {
    box-shadow: none !important;
    border: 1px solid #e2e4e9 !important;
    border-radius: 16px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden;
}
body.newdesign-home #billing .pcpss tr td,
body.newdesign-home #billing .pcps tr td,
body.newdesign-home #billing .ptps tr td { border: none !important; border-bottom: 1px solid #e2e4e9 !important; }
body.newdesign-home #billing .pcpss tr:first-child td,
body.newdesign-home #billing .pcps tr:first-child td,
body.newdesign-home #billing .ptps tr:first-child td { background: #e9f0fb !important; color: #525966 !important; }

@media (max-width: 768px) {
    body.newdesign-home #billing .noMargin.ui-content > div:first-child { padding: 16px 14px 0 !important; }
    body.newdesign-home #billing #divPage table { margin: 0 14px 14px !important; width: calc(100% - 28px) !important; }

    /* 1. Add Billing → full-width pill with side margins */
    body.newdesign-home #billing .nd-billing-toolbar { flex-direction: column; align-items: stretch; }
    body.newdesign-home #billing .nd-billing-toolbar .nd-toolbar-left { flex-wrap: wrap; }
    body.newdesign-home #billing .nd-add-billing-btn { width: auto !important; margin: 8px 4px 0 !important; justify-content: center; }
    body.newdesign-home #billing .nd-add-billing-menu { left: 4px !important; right: 4px !important; width: auto !important; }

    /* 2. Accounts toolbar: stack title, full-width search, then class + CSV row */
    body.newdesign-home #billing #billingChildrenTable { margin: 0 !important; width: 100% !important; border: none !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
    body.newdesign-home #billing #billingChildrenTable,
    body.newdesign-home #billing #billingChildrenTable tbody { display: block !important; }
    body.newdesign-home #billing .nd-acct-toolbar-row,
    body.newdesign-home #billing .nd-acct-toolbar-row td { display: block !important; }
    body.newdesign-home #billing .nd-acct-toolbar {
        flex-direction: column; align-items: stretch; gap: 10px;
        margin: 0 12px 12px; padding: 14px; background: #fff; border: 1px solid #e2e4e9; border-radius: 14px;
    }
    body.newdesign-home #billing .nd-acct-toolbar .nd-acct-title { font-size: 16px; }
    body.newdesign-home #billing .nd-acct-toolbar-right { margin-left: 0; width: 100%; flex-wrap: wrap; gap: 10px; box-sizing: border-box; }
    body.newdesign-home #billing .nd-acct-toolbar #inputSearch { width: 100% !important; max-width: none !important; flex: 1 0 100%; box-sizing: border-box !important; }
    body.newdesign-home #billing .nd-acct-toolbar .divForSelect { flex: 1 1 0; min-width: 0 !important; box-sizing: border-box; }
    body.newdesign-home #billing .nd-acct-toolbar #downloadBillingR { flex: 1 1 0; justify-content: center; box-sizing: border-box; }

    /* 3. Each data row → a simple card */
    body.newdesign-home #billing #billingChildrenTable .nd-acct-head { display: none !important; }
    body.newdesign-home #billing #billingChildrenTable tr[data-id-child] {
        display: block !important; background: #fff; border: 1px solid #e2e4e9; border-radius: 14px;
        margin: 0 12px 12px; padding: 6px 14px; box-shadow: 0 1px 2px rgba(16,24,40,0.04);
    }
    body.newdesign-home #billing #billingChildrenTable tr[data-id-child]:hover td { background: transparent !important; }
    body.newdesign-home #billing #billingChildrenTable tr[data-id-child] td {
        display: flex !important; align-items: center; justify-content: space-between; gap: 12px;
        border: none !important; border-bottom: 1px solid #f0f1f3 !important; padding: 10px 0 !important; height: auto !important;
    }
    body.newdesign-home #billing #billingChildrenTable tr[data-id-child] td:last-child { border-bottom: none !important; }
    body.newdesign-home #billing #billingChildrenTable tr[data-id-child] td::before {
        content: attr(data-label); color: #525966; font-size: 13px; font-weight: 500; flex-shrink: 0;
    }
    body.newdesign-home #billing #billingChildrenTable tr[data-id-child] td:first-child::before { display: none; }
    body.newdesign-home #billing #billingChildrenTable tr[data-id-child] td:first-child { justify-content: flex-start; }

    /* ── Pending Charges (#pcharges) + Posted Transactions (#ptrans) → cards ── */
    /* strip the outer table chrome so only the row cards show */
    body.newdesign-home #billing #pcharges,
    body.newdesign-home #billing #ptrans {
        margin: 0 !important; width: 100% !important; border: none !important; border-radius: 0 !important;
        background: transparent !important; box-shadow: none !important; overflow: visible !important;
    }
    body.newdesign-home #billing #pcharges,
    body.newdesign-home #billing #ptrans,
    body.newdesign-home #billing #pcharges tbody,
    body.newdesign-home #billing #ptrans tbody { display: block !important; }
    /* toolbar band (title + total + filters) → full width, stacked */
    body.newdesign-home #billing #pcharges .nd-pc-toolbar-row,
    body.newdesign-home #billing #ptrans .nd-pc-toolbar-row,
    body.newdesign-home #billing #pcharges .nd-pc-toolbar-row td,
    body.newdesign-home #billing #ptrans .nd-pc-toolbar-row td { display: block !important; }
    body.newdesign-home #billing #pcharges .nd-pc-toolbar,
    body.newdesign-home #billing #ptrans .nd-pc-toolbar { flex-direction: column; align-items: stretch; gap: 10px; padding: 4px 12px 12px; }
    /* hide the column-header row */
    body.newdesign-home #billing #pcharges .nd-pc-head,
    body.newdesign-home #billing #ptrans .nd-pc-head { display: none !important; }
    /* each data row → a card */
    body.newdesign-home #billing #pcharges tr[data-chargeId],
    body.newdesign-home #billing #ptrans tr:not(.nd-pc-toolbar-row):not(.nd-pc-head) {
        display: block !important; background: #fff; border: 1px solid #e2e4e9; border-radius: 14px;
        margin: 0 12px 12px; padding: 4px 14px; box-shadow: 0 1px 2px rgba(16,24,40,0.04);
    }
    /* each cell → label (left) + value (right) */
    body.newdesign-home #billing #pcharges tr[data-chargeId] td,
    body.newdesign-home #billing #ptrans tr:not(.nd-pc-toolbar-row):not(.nd-pc-head) td {
        display: flex !important; align-items: center; justify-content: space-between; gap: 12px;
        text-align: right !important; max-width: none !important; width: auto !important;
        border: none !important; border-bottom: 1px solid #f0f1f3 !important; padding: 10px 0 !important; height: auto !important;
    }
    body.newdesign-home #billing #pcharges tr[data-chargeId] td:last-child,
    body.newdesign-home #billing #ptrans tr:not(.nd-pc-toolbar-row):not(.nd-pc-head) td:last-child { border-bottom: none !important; }
    body.newdesign-home #billing #pcharges tr[data-chargeId] td[data-label]::before,
    body.newdesign-home #billing #ptrans tr:not(.nd-pc-toolbar-row):not(.nd-pc-head) td[data-label]::before {
        content: attr(data-label); color: #525966; font-size: 13px; font-weight: 500; flex-shrink: 0; text-align: left; white-space: nowrap;
    }
    /* description: label on its own line, value below (left-aligned) so long text wraps cleanly */
    body.newdesign-home #billing #pcharges tr[data-chargeId] td.nd-pc-desc,
    body.newdesign-home #billing #ptrans tr:not(.nd-pc-toolbar-row):not(.nd-pc-head) td.nd-pc-desc {
        flex-direction: column; align-items: flex-start; text-align: left !important; gap: 2px; color: #20252d;
    }
    /* actions cell (Retry / Download / edit-delete) → right-aligned; hide when empty */
    body.newdesign-home #billing #pcharges tr[data-chargeId] td.nd-pc-actions,
    body.newdesign-home #billing #ptrans tr:not(.nd-pc-toolbar-row):not(.nd-pc-head) td.nd-pc-actions {
        justify-content: flex-end; width: auto !important; padding-top: 8px !important;
    }
    body.newdesign-home #billing #pcharges tr[data-chargeId] td.nd-pc-actions:empty,
    body.newdesign-home #billing #ptrans tr:not(.nd-pc-toolbar-row):not(.nd-pc-head) td.nd-pc-actions:empty { display: none !important; }
}

/* ----- Legacy row action options (More / Remove / Edit / Up / Down) -----
   The legacy code appends a .listItemOptions panel inside the row when a card's
   edit button is tapped (My Classes, Archive, …). The new-design row clips it
   (overflow:hidden) and it's taller than the row, so only part showed. Let the
   full panel render as a right-anchored, vertically-centred strip over the row. */
body.newdesign-home .card-body-mobile .mainFaceTagItem {
    overflow: visible;
}
body.newdesign-home .card-body-mobile .mainFaceTagItem .listItemOptions {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    padding-left: 16px;
    z-index: 5;
}
body.newdesign-home .card-body-mobile .mainFaceTagItem .listItemOptions > a {
    display: block;
    text-decoration: none;
}
body.newdesign-home .card-body-mobile .mainFaceTagItem .listItemOption {
    height: auto;
    padding: 0 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 11px;
    line-height: 1.2;
}
body.newdesign-home .card-body-mobile .mainFaceTagItem .listItemOption p {
    margin: 0;
    font-size: 11px;
    font-weight: 500;
    color: #525966;
    line-height: 14px;
}
/* Each action icon → a 40px white tile (matches .ndMessageBtn), holding the ORIGINAL icon. */
body.newdesign-home .card-body-mobile .mainFaceTagItem .listItemOptionImage,
body.newdesign-home .card-body-mobile .mainFaceTagItem .listItemOptionImageMore {
    margin: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid #E2E4E9;
    background-color: #fff;
    box-shadow: 0px 1px 2px rgba(82, 88, 102, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
}
/* Draw clean grey icons via background-image; hide the legacy raster glyphs and jQM arrows
   (More had no visible dots, Remove was a white blob, Edit had a baked-in grey circle). */
body.newdesign-home .card-body-mobile .mainFaceTagItem .listItemOptionImage img,
body.newdesign-home .card-body-mobile .mainFaceTagItem .listItemOptionImageMore img,
body.newdesign-home .card-body-mobile .mainFaceTagItem .listItemOptionImage .ui-btn {
    display: none !important;
}
/* More → three vertical dots */
body.newdesign-home .card-body-mobile .mainFaceTagItem .listItemOption[data-goal="more"] .listItemOptionImageMore {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><circle cx='10' cy='4' r='1.6' fill='%23525966'/><circle cx='10' cy='10' r='1.6' fill='%23525966'/><circle cx='10' cy='16' r='1.6' fill='%23525966'/></svg>");
}
/* Remove → trash */
body.newdesign-home .card-body-mobile .mainFaceTagItem .listItemOption[data-goal="delete"] .listItemOptionImage {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M3.5 5.5h13M8 5.5V4a1 1 0 011-1h2a1 1 0 011 1v1.5M6.8 5.5l.6 10.1a1 1 0 001 .9h3.2a1 1 0 001-.9l.6-10.1M8.6 8.5v5M11.4 8.5v5' stroke='%23525966' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
/* Edit → pencil (no circle) */
body.newdesign-home .card-body-mobile .mainFaceTagItem .listItemOption[data-goal="edit"] .listItemOptionImage {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M13.6 3.4a1.7 1.7 0 012.4 2.4l-9 9-3.4 1 1-3.4 9-9z' stroke='%23525966' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/><path d='M12.4 4.6l2.4 2.4' stroke='%23525966' stroke-width='1.2' stroke-linecap='round'/></svg>");
}
/* Up / Down → grey arrows (original jQuery-Mobile arrow shape) */
body.newdesign-home .card-body-mobile .mainFaceTagItem .listItemOption[data-goal="moveup"] .listItemOptionImage {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><polygon fill='%23525966' points='5,7 5,14 9,14 9,7 14,7 7,0 0,7'/></svg>");
}
body.newdesign-home .card-body-mobile .mainFaceTagItem .listItemOption[data-goal="movedown"] .listItemOptionImage {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><polygon fill='%23525966' points='9,7 9,0 5,0 5,7 0,7 7,14 14,7'/></svg>");
}

/* ===== Generic dialog (View.Utils.Dialog) — restyled to the new design =====
   Scoped to body.newdesign-home so other (legacy) pages keep the old dialog. */
body.newdesign-home #dialog,
body.newdesign-home #dialog:after {
    border-radius: 16px;
    background-color: #fff;
    border: 1px solid #E2E4E9;
    box-shadow: 0 12px 32px rgba(10, 14, 20, 0.18);
    -webkit-box-shadow: 0 12px 32px rgba(10, 14, 20, 0.18);
    min-width: 280px;
    max-width: 360px;
    overflow: hidden;
    padding-top: 6px;
}
/* Close button → clean top-right */
body.newdesign-home #dialogX {
    top: 8px;
    left: auto;
    right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background-color: transparent;
    box-shadow: none;
    -webkit-box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100002;
}
body.newdesign-home #dialogX:hover { background-color: #F6F7FA; }
body.newdesign-home #dialogX img {
    position: static;
    top: auto;
    left: auto;
    width: 13px;
    opacity: 0.55;
}
/* Title text (dialogs that also have action buttons below) */
body.newdesign-home #dialog span h4 {
    margin: 18px 48px 12px 22px;
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
    color: #0A0E14;
    text-align: left;
}
/* Message-only dialogs (no action buttons) read as a clean notification: balanced
   vertical padding since there's no button row beneath. (span is the last child only
   when no .dialogButton divs follow it.) */
body.newdesign-home #dialog span:last-child h4 {
    margin-top: 20px;
    margin-bottom: 20px;
}
/* Action buttons → clean stacked list with dividers */
body.newdesign-home #dialog .dialogButton {
    background-color: #fff;
    border-top: 1px solid #E2E4E9;
    border-bottom: none;
    height: 52px;
    line-height: 52px;
    font-size: 15px;
    font-weight: 500;
    transition: background 0.1s;
}
body.newdesign-home #dialog .dialogButton:hover,
body.newdesign-home #dialog .dialogButton:active {
    background-color: #F6F7FA;
    border-radius: 0;
}
body.newdesign-home #dialog .dialogButton p {
    margin: 0;
    color: #20252D;
    font-weight: 500;
}
/* Destructive action (Delete / Remove) in red */
body.newdesign-home #dialog .dialogButton[id*="delete"] p,
body.newdesign-home #dialog .dialogButton[id*="Delete"] p,
body.newdesign-home #dialog .dialogButton[id*="remove"] p,
body.newdesign-home #dialog .dialogButton[id*="Remove"] p {
    color: #DF1C41;
}

/* ============================================================
 * New design — side menu (sidebar) + header (topbar).
 * Restyle-in-place: every #xxxLink, handler, badge and the
 * dynamic role-based items are kept; this only changes the look.
 * Fixed/always-visible sidebar on wide screens (>=1024px),
 * slide-in drawer on narrow. Scoped to body.newdesign-home
 * (a constant <body> class → applies on every page).
 * ============================================================ */

/* ----- Side menu → clean white sidebar ----- */
body.newdesign-home #sideMenu {
    width: 272px;
    background: #fff;
    border: none;
    border-right: 1px solid #E2E4E9;
    box-shadow: 0 0 24px rgba(10, 14, 20, 0.08);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
body.newdesign-home #sideMenu ul {
    list-style: none;
    margin: 0;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
body.newdesign-home #sideMenu li {
    background: transparent;
    border: none !important;
    margin: 0;
    height: auto;
    border-radius: 8px;
}
body.newdesign-home #sideMenu li > a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 10px 16px;
    border-radius: 8px;
    width: auto;
}
body.newdesign-home #sideMenu li > a:hover { background: #F6F7FA; }
body.newdesign-home #sideMenu li p,
body.newdesign-home #sideMenu li a {
    font-size: 14px !important;
    font-weight: 500;
    line-height: 20px;
    color: #525966;
    padding-left: 20px;
    font-family: inherit !important;
    display: inline-block;
    vertical-align: middle;
}
body.newdesign-home #sideMenu li img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    margin: 0 !important;
    flex-shrink: 0;
}
/* Count badges (Injury Report, notifications, messages) → small primary-colour
   pill pinned to the row's right end so it never overlaps the label. */
body.newdesign-home #sideMenu li > a { position: relative; }
body.newdesign-home #sideMenu li .notificationStyle,
body.newdesign-home #sideMenu li .sideMenuInjury {
    position: absolute !important;
    right: 2px !important;
    top: 38% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    left: auto !important;
}
body.newdesign-home #sideMenu li .notificationStyle > div,
body.newdesign-home #sideMenu li .sideMenuInjury > div {
    background: var(--main-color) !important;
    border-radius: 999px !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: 18px !important;
    padding: 0 7px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}
body.newdesign-home #sideMenu li .notificationStyle p,
body.newdesign-home #sideMenu li .sideMenuInjury p {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    display: block !important;
    overflow: visible !important;
    text-align: center !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    color: #fff !important;
}
/* Count badge on the topbar envelope → the same round pill as the side menu's (kept red). */
body.newdesign-home .nd-topbar-msg .notificationStyle > div {
    background: #e5534b !important;
    background-image: none !important;
    border-radius: 50% !important;
    /* fixed square → always a true circle; sized so two digits still fit inside */
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    border: 1.5px solid #fff !important;
    overflow: hidden !important;
}
body.newdesign-home .nd-topbar-msg .notificationStyle p {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    display: block !important;
    overflow: visible !important;
    text-align: center !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -0.3px !important;
    color: #fff !important;
}
/* The unread-messages marker has no number (checkReady clears it) → a small dot, not an empty circle. */
body.newdesign-home .nd-topbar-msg .msgNumber:has(p:empty) > div {
    width: 10px !important;
    min-width: 10px !important;
    max-width: 10px !important;
    height: 10px !important;
}
body.newdesign-home .nd-topbar-msg .msgNumber:has(p:empty) { top: -1px !important; right: -3px !important; }
/* The user-profile box at the top is replaced by the school-name brand header. */
body.newdesign-home #sideMenu li#adultProfileLink { display: none !important; }
/* Brand header (hamburger + school name OR Remini logo) — the new design's logo bar */
body.newdesign-home #sideMenu .nd-sidebar-brand {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    padding: 12px 56px;
    border-bottom: 1px solid #E2E4E9;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* Hamburger pinned left; logo/name centred in the bar. */
body.newdesign-home #sideMenu .nd-sidebar-toggle {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}
body.newdesign-home #sideMenu .nd-sidebar-toggle:hover { background: #F6F7FA; }
body.newdesign-home #sideMenu .nd-brand-name {
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.2px;
    color: #0A0E14;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}
body.newdesign-home #sideMenu .nd-brand-logo {
    height: 34px;
    width: auto;
    object-fit: contain;
}
/* Section heading (children / family / etc.) → uppercase label, sat left of items */
body.newdesign-home #sideMenu .sideMenuGroupHeading {
    padding: 10px 4px 4px;
    background: transparent;
}
/* Drop empty legacy section dividers */
body.newdesign-home #sideMenu .sideMenuGroupHeading:empty { display: none; }
body.newdesign-home #sideMenu .sideMenuGroupHeading h4 {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6B7381;
}

/* ----- Header → clean white topbar (all pages) ----- */
body.newdesign-home .head.headerRoot {
    background: #fff !important;
    background-color: #fff !important;
    border: none !important;
    border-bottom: 1px solid #E2E4E9 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
body.newdesign-home .head .textHeadline {
    font-size: 18px !important;
    font-weight: 500;
    color: #0A0E14;
}
/* Topbar right cluster: message icon + user pill */
body.newdesign-home #main .head.headerRoot {
    position: relative;
    min-height: 60px;
}
body.newdesign-home .nd-topbar-right {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 2;
}
body.newdesign-home .nd-topbar-msg {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
}
/* Notifications badge, relocated here from the menu button: render it inline as a
   flex item (not absolutely positioned over the header) so it sits to the left of
   the message icon and stays vertically centred. */
body.newdesign-home .nd-topbar-right .hamburgerNotification {
    position: static;
    top: auto;
    left: auto;
}
body.newdesign-home .nd-topbar-right .hamburgerNotification > div {
    margin-top: 0;
}
body.newdesign-home .nd-topbar-msg:hover { background: #F6F7FA; }
body.newdesign-home .nd-user-pill {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px 3px 3px;
    background: #E2E4E9;
    border-radius: 12px;
    border: none;
    font-size: 14px;
    font-weight: 500;
    color: #0A0E14;
    cursor: pointer;
}
body.newdesign-home .nd-user-pill-icon {
    width: 34px;
    height: 34px;
    background: #fff;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
body.newdesign-home .nd-user-pill-name {
    white-space: nowrap;
    padding: 0 8px;
}

/* ----- Generic sub-page headers (Calendar, etc.) → match the new topbar -----
   Every legacy .head header becomes a clean white bar. The #main home header
   (.head.headerRoot) keeps its injected message/user cluster; these stay blank
   apart from the page's own back / action button, with the title centred.
   Headers stay position:fixed (so each page's existing content top-offset is
   untouched); instead the fixed bar is sized to the visible content area so the
   centred title tracks the sidebar's open/closed state. */
body.newdesign-home .head {
    background: #fff !important;
    background-color: #fff !important;
    border: none !important;
    border-bottom: 1px solid #E2E4E9 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
body.newdesign-home .head:not(.headerRoot) {
    left: 0;
    right: auto;
    width: 100%;
    box-sizing: border-box;
}
/* Desktop, sidebar open: header spans only the area beside the fixed sidebar. */
@media (min-width: 1024px) {
    body.newdesign-home:not(.nd-sidebar-collapsed) .head:not(.headerRoot) {
        left: 272px;
        width: calc(100% - 272px);
        transition: left 0.2s ease, width 0.2s ease;
    }
}
/* Centre the title within the header (which now matches the visible area, so
   50% is the centre of what the user sees). */
body.newdesign-home .head:not(.headerRoot) .textHeadline {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    max-width: 60%;
    margin: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: none !important;
}
/* Keep the page's own left (back) / right buttons pinned to the edges. */
body.newdesign-home .head:not(.headerRoot) .leftButton,
body.newdesign-home .head:not(.headerRoot) .rightButton,
body.newdesign-home .head:not(.headerRoot) .rightButtonInvite {
    top: 61%;
    transform: translateY(-50%);
}
body.newdesign-home .head:not(.headerRoot) .leftButton { left: 12px; }
body.newdesign-home .head:not(.headerRoot) .rightButton,
body.newdesign-home .head:not(.headerRoot) .rightButtonInvite { right: 12px; }
/* The back arrow PNG is white (built for the old coloured bar); darken it so it
   reads on the white header. */
body.newdesign-home .head:not(.headerRoot) .leftButton img {
    filter: brightness(0.4);
}
/* A back button added to the home topbar (admin-dashboard → All Classes): the normal
   topbar has no .leftButton, so this only applies in that flow. Position it top-left
   and darken the white PNG so it reads on the white header. */
body.newdesign-home .head.headerRoot .leftButton {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; z-index: 6;
}
body.newdesign-home .head.headerRoot .leftButton img { filter: brightness(0.4); height: 20px; }
/* The back button is the top-left control on pages that have one, so the
   floating reopen-hamburger is hidden there (it only appears on pages without a
   back button, e.g. the main page). Avoids the two overlapping when collapsed. */
body.newdesign-home.nd-page-has-back #ndSidebarReopen { display: none !important; }

/* Injected section labels (TO-DO / ACCOUNT) — sit left of the nav items */
body.newdesign-home #sideMenu .nd-menu-section {
    padding: 14px 4px 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6B7381;
}
/* Active / hover highlight → light-blue rounded pill (new design) */
body.newdesign-home #sideMenu li:not(#adultProfileLink) > a:hover {
    background: #F6F7FA;
}
body.newdesign-home #sideMenu li.nd-active > a {
    background: #E9F0FB;
}
body.newdesign-home #sideMenu li.nd-active > a p {
    color: #163C83;
    font-weight: 600;
}
body.newdesign-home #sideMenu li.nd-active > a::before {
    /* tint the active icon blue */
    filter: invert(28%) sepia(83%) saturate(1500%) hue-rotate(205deg) brightness(95%);
}

/* ----- New SVG icons for menu items (legacy PNG icons hidden) ----- */
body.newdesign-home #sideMenu li:not(#adultProfileLink) > a > img { display: none !important; }
body.newdesign-home #sideMenu li:not(#adultProfileLink) > a::before {
    content: '';
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /* default: generic file */
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M5 2h7l4 4v12a1 1 0 01-1 1H5a1 1 0 01-1-1V3a1 1 0 011-1z' stroke='%23525966' stroke-width='1.33' stroke-linejoin='round'/><path d='M12 2v4h4' stroke='%23525966' stroke-width='1.33'/></svg>");
}
body.newdesign-home #sideMenu li#notificationsLink > a::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M10 2a6 6 0 016 6c0 3.5 1.5 5.5 2 6H2c.5-.5 2-2.5 2-6a6 6 0 016-6zM8 17.5a2 2 0 004 0' stroke='%23525966' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
body.newdesign-home #sideMenu li#attendanceReportsLink > a::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M4 16V9M10 16V4M16 16v-5' stroke='%23525966' stroke-width='1.6' stroke-linecap='round'/></svg>"); }
body.newdesign-home #sideMenu li#calendarLink > a::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><rect x='2.5' y='3.5' width='15' height='14' rx='2' stroke='%23525966' stroke-width='1.33'/><path d='M6.5 2v3M13.5 2v3M2.5 8.5h15' stroke='%23525966' stroke-width='1.33' stroke-linecap='round'/></svg>"); }
body.newdesign-home #sideMenu li#volunteerLink > a::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><circle cx='5' cy='6' r='1.3' fill='%23525966'/><circle cx='5' cy='10' r='1.3' fill='%23525966'/><circle cx='5' cy='14' r='1.3' fill='%23525966'/><path d='M9 6h8M9 10h8M9 14h8' stroke='%23525966' stroke-width='1.33' stroke-linecap='round'/></svg>"); }
body.newdesign-home #sideMenu li#enrollmentLink > a::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M8 9a3 3 0 100-6 3 3 0 000 6zM2 17c0-3.314 2.686-6 6-6M13 11v6M16 14h-6' stroke='%23525966' stroke-width='1.33' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
body.newdesign-home #sideMenu li#nrfLink > a::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M5 2h7l4 4v12a1 1 0 01-1 1H5a1 1 0 01-1-1V3a1 1 0 011-1z' stroke='%23525966' stroke-width='1.33' stroke-linejoin='round'/><path d='M12 2v4h4M7 9h6M7 12h4' stroke='%23525966' stroke-width='1.33' stroke-linecap='round'/></svg>"); }
body.newdesign-home #sideMenu li#messagingLink > a::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M2.5 5.5h15a1 1 0 011 1v9a1 1 0 01-1 1h-15a1 1 0 01-1-1v-9a1 1 0 011-1z' stroke='%23525966' stroke-width='1.33' stroke-linejoin='round'/><path d='M1.7 6L10 11.5 18.3 6' stroke='%23525966' stroke-width='1.33' stroke-linecap='round'/></svg>"); }
body.newdesign-home #sideMenu li#attendanceLink > a::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><circle cx='10' cy='10' r='7.5' stroke='%23525966' stroke-width='1.33'/><path d='M7 10l2 2 4-4' stroke='%23525966' stroke-width='1.33' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
body.newdesign-home #sideMenu li#schoolDocumentsLink > a::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M5 2h7l4 4v12a1 1 0 01-1 1H5a1 1 0 01-1-1V3a1 1 0 011-1z' stroke='%23525966' stroke-width='1.33' stroke-linejoin='round'/><path d='M12 2v4h4M7 9h6M7 12h4' stroke='%23525966' stroke-width='1.33' stroke-linecap='round'/></svg>"); }
body.newdesign-home #sideMenu li#addRegistrationFormLink > a::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><rect x='2' y='3' width='16' height='14' rx='2' stroke='%23525966' stroke-width='1.33'/><path d='M2 7h16M7 3v4M13 3v4M6 11h8M6 14h5' stroke='%23525966' stroke-width='1.33' stroke-linecap='round'/></svg>"); }
body.newdesign-home #sideMenu li#LidChildrenLink > a::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M10 10a3.5 3.5 0 100-7 3.5 3.5 0 000 7zM3 17c0-3.314 3.134-6 7-6s7 2.686 7 6' stroke='%23525966' stroke-width='1.33' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
body.newdesign-home #sideMenu li#menageChildrenLink > a::before,
body.newdesign-home #sideMenu li#menageTeachersLink > a::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M7.3 9a3 3 0 100-6 3 3 0 000 6zM1.5 17c0-3 2.6-5.3 5.8-5.3s5.8 2.3 5.8 5.3M13.4 4.2a3 3 0 010 5.6M14.6 11.7c1.9.5 3.4 2.2 3.4 4.3' stroke='%23525966' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
body.newdesign-home #sideMenu li#incidentLink > a::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M10 3L2 17h16L10 3z' stroke='%23525966' stroke-width='1.33' stroke-linejoin='round'/><path d='M10 8v4M10 14.4v.1' stroke='%23525966' stroke-width='1.5' stroke-linecap='round'/></svg>"); }
body.newdesign-home #sideMenu li#lessonsLink > a::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M4 4a1 1 0 011-1h11v13H5a1 1 0 01-1-1V4z' stroke='%23525966' stroke-width='1.33' stroke-linejoin='round'/><path d='M8 3v12' stroke='%23525966' stroke-width='1.33'/></svg>"); }
body.newdesign-home #sideMenu li#storageLink > a::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M3 6.5l7-3.5 7 3.5v7l-7 3.5-7-3.5v-7z' stroke='%23525966' stroke-width='1.33' stroke-linejoin='round'/><path d='M3 6.5l7 3.5 7-3.5M10 10v7' stroke='%23525966' stroke-width='1.33' stroke-linecap='round'/></svg>"); }
body.newdesign-home #sideMenu li#billingLink > a::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><rect x='2' y='4.5' width='16' height='11' rx='2' stroke='%23525966' stroke-width='1.33'/><path d='M2 8h16' stroke='%23525966' stroke-width='1.33'/></svg>"); }
body.newdesign-home #sideMenu li#settingsLink > a::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><circle cx='10' cy='10' r='2.6' stroke='%23525966' stroke-width='1.33'/><path d='M16 10a6 6 0 00-.1-1.1l1.6-1.2-1.5-2.6-1.9.6a6 6 0 00-1.9-1.1L11.9 2H8.1l-.4 1.6a6 6 0 00-1.9 1.1l-1.9-.6-1.5 2.6 1.6 1.2A6 6 0 004 10c0 .4 0 .7.1 1.1l-1.6 1.2 1.5 2.6 1.9-.6c.6.5 1.2.8 1.9 1.1l.4 1.6h3.8l.4-1.6c.7-.3 1.3-.6 1.9-1.1l1.9.6 1.5-2.6-1.6-1.2c.1-.4.1-.7.1-1.1z' stroke='%23525966' stroke-width='1.1' stroke-linejoin='round'/></svg>"); }
body.newdesign-home #sideMenu li#contactLink > a::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M2.5 4a1.5 1.5 0 011.5-1.5h12A1.5 1.5 0 0117.5 4v8a1.5 1.5 0 01-1.5 1.5H6.5L3 17V4z' stroke='%23525966' stroke-width='1.33' stroke-linejoin='round'/><path d='M6.5 7h7M6.5 10h4' stroke='%23525966' stroke-width='1.33' stroke-linecap='round'/></svg>"); }
body.newdesign-home #sideMenu li#logoffLink > a::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M7.5 17H4.5a1 1 0 01-1-1V4a1 1 0 011-1h3M13 13.5L16.5 10 13 6.5M16.5 10H7.5' stroke='%23525966' stroke-width='1.33' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
body.newdesign-home #sideMenu li#removeUserLink > a::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M3.5 5.5h13M8 5.5V4a1 1 0 011-1h2a1 1 0 011 1v1.5M6.8 5.5l.6 10.1a1 1 0 001 .9h3.2a1 1 0 001-.9l.6-10.1' stroke='%23525966' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }

/* ----- Wide screens: fixed, always-visible sidebar + shifted page content ----- */
/* Floating hamburger to re-open the sidebar once it's collapsed (hidden by default).
   Borderless so it sits inside the header like a normal header icon, not a floating box. */
body.newdesign-home #ndSidebarReopen {
    display: none;
    position: fixed;
    top: 8px;
    left: 16px;
    /* Just under the sidebar's z-index so the open drawer covers it. */
    z-index: 999990;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: transparent;
    border: none;
    box-shadow: none;
    align-items: center;
    justify-content: center;
}
body.newdesign-home #ndSidebarReopen:hover { background: #F6F7FA; }
/* On mobile the sidebar is an off-canvas drawer — keep the hamburger visible to open it
   (the open drawer, with a higher z-index, slides over and hides it). */
@media (max-width: 1023px) {
    body.newdesign-home #ndSidebarReopen { display: flex; }
}

@media (min-width: 1024px) {
    body.newdesign-home #sideMenu {
        left: 0 !important;
        transform: none !important;
        transition: left 0.2s ease !important;
    }
    body.newdesign-home [data-role="page"] {
        margin-left: 272px !important;
        /* Reduce the width too (not just shift), so content squeezes beside the
           sidebar instead of running off the right edge. */
        width: calc(100% - 272px) !important;
        box-sizing: border-box !important;
        transition: margin-left 0.2s ease, width 0.2s ease;
    }
    /* Collapsed: hide the sidebar and reclaim the full content width. */
    body.newdesign-home.nd-sidebar-collapsed #sideMenu {
        left: -272px !important;
    }
    body.newdesign-home.nd-sidebar-collapsed [data-role="page"] {
        margin-left: 0 !important;
        width: 100% !important;
    }
    /* When collapsed, surface the floating hamburger to bring the sidebar back. */
    body.newdesign-home.nd-sidebar-collapsed #ndSidebarReopen {
        display: flex;
    }
    /* Home content fills the area beside the sidebar, with comfortable padding. */
    body.newdesign-home .mobile-content {
        padding: 32px;
    }
    body.newdesign-home .content-section {
        padding: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Create Billing / One-Time Charge — right-to-left slide-in drawer
   (pixel-perfect port of html-output/billigslide-inpanel; classes namespaced
   `ndbd-` to avoid collisions. Replaces the legacy #createNewDivTopOpen modal.)
   ═══════════════════════════════════════════════════════════════════════════ */
body.newdesign-home .ndbd-overlay {
    display: none; position: fixed; inset: 0; background: rgba(15,20,40,0.25); z-index: 100000;
}
body.newdesign-home .ndbd-overlay.open { display: block; }
body.newdesign-home .ndbd-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 100vw;
    background: #fff; box-shadow: -6px 8px 32px 0 rgba(186,192,210,0.45); z-index: 100001;
    display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.32,0.72,0,1);
    font-family: 'Inter', sans-serif; color: #20252d;
}
body.newdesign-home .ndbd-drawer.open { transform: translateX(0); }
body.newdesign-home .ndbd-drawer *, body.newdesign-home .ndbd-drawer *::before, body.newdesign-home .ndbd-drawer *::after { box-sizing: border-box; }

/* header */
body.newdesign-home .ndbd-header { padding: 20px 24px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-shrink: 0; }
body.newdesign-home .ndbd-title-block { display: flex; flex-direction: column; gap: 2px; }
body.newdesign-home .ndbd-title { font-size: 24px; font-weight: 500; letter-spacing: -0.36px; color: #20252d; }
body.newdesign-home .ndbd-sub { font-size: 14px; color: #525966; }
body.newdesign-home .ndbd-close { width: 32px; height: 32px; border-radius: 8px; border: none; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; margin-top: 2px; }
body.newdesign-home .ndbd-close:hover { background: #f6f7fa; }
body.newdesign-home .ndbd-divider { height: 1px; background: #e2e4e9; margin: 0 24px; flex-shrink: 0; }

/* scrollable body */
body.newdesign-home .ndbd-body { flex: 1; overflow-y: auto; padding-bottom: 24px; }

/* step bar */
body.newdesign-home .ndbd-step-bar { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 0; margin-bottom: 20px; }
body.newdesign-home .ndbd-step-name { font-size: 18px; font-weight: 500; letter-spacing: -0.27px; color: #20252d; }
body.newdesign-home .ndbd-dots { display: flex; gap: 16px; align-items: center; }
body.newdesign-home .ndbd-dot { width: 10px; height: 10px; border-radius: 6px; background: #e2e4e9; }
body.newdesign-home .ndbd-dot.active { background: #2563d7; }

/* section + fields */
body.newdesign-home .ndbd-section-label {    margin-top: 6px; font-size: 16px; font-weight: 500; color: #0a0c14; margin-bottom: 12px; }
body.newdesign-home .ndbd-field-group { display: flex; flex-direction: column; gap: 16px; padding: 0 24px; }
body.newdesign-home .ndbd-field-group + .ndbd-field-group { margin-top: 32px; }
body.newdesign-home .ndbd-field { display: flex; flex-direction: column; gap: 8px; }
body.newdesign-home .ndbd-field-label { font-size: 14px; font-weight: 500; color: #20252d; }
body.newdesign-home .ndbd-field-hint { font-size: 12px; color: #6b7381; display: flex; align-items: center; gap: 4px; margin-top: 4px; }

/* select / input / date */
body.newdesign-home .ndbd-select, body.newdesign-home .ndbd-input {
    width: 100%; height: 42px; border: 1px solid #e2e4e9; border-radius: 10px; padding: 0 12px;
    font-family: inherit; font-size: 14px; font-weight: 500; color: #20252d; background: #fff; outline: none;
    cursor: pointer; -webkit-appearance: none; appearance: none; box-shadow: 0 1px 2px rgba(228,229,231,0.24);
}
body.newdesign-home .ndbd-select:focus, body.newdesign-home .ndbd-input:focus { border-color: #2563d7; box-shadow: 0 0 0 3px rgba(37,99,215,0.1); }
body.newdesign-home .ndbd-select-wrap { position: relative; }
body.newdesign-home .ndbd-select-wrap::after { content: ''; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #525966; pointer-events: none; }
body.newdesign-home .ndbd-date { width: 100%; height: 42px; border: 1px solid #e2e4e9; border-radius: 10px; padding: 0 12px 0 38px; font-family: inherit; font-size: 14px; color: #20252d; background: #fff; outline: none; box-shadow: 0 1px 2px rgba(228,229,231,0.24); }
body.newdesign-home .ndbd-date:focus { border-color: #2563d7; box-shadow: 0 0 0 3px rgba(37,99,215,0.1); }
body.newdesign-home .ndbd-date-wrap { position: relative; }
body.newdesign-home .ndbd-date-wrap > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }

/* radio pair */
body.newdesign-home .ndbd-radio-row { display: flex; gap: 12px; }
body.newdesign-home .ndbd-radio-opt { flex: 1; min-height: 42px; border: 1px solid #e2e4e9; border-radius: 10px; display: flex; align-items: center; gap: 8px; padding: 0 12px; cursor: pointer; font-size: 14px; font-weight: 500; color: #20252d; background: #fff; box-shadow: 0 1px 2px rgba(228,229,231,0.24); user-select: none; }
body.newdesign-home .ndbd-radio-opt.selected { border-color: #2563d7; }
body.newdesign-home .ndbd-radio-circle { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #e2e4e9; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #fff; }
body.newdesign-home .ndbd-radio-opt.selected .ndbd-radio-circle { border-color: #2563d7; }
body.newdesign-home .ndbd-radio-dot { width: 9px; height: 9px; border-radius: 50%; background: #2563d7; display: none; }
body.newdesign-home .ndbd-radio-opt.selected .ndbd-radio-dot { display: block; }

/* info box */
body.newdesign-home .ndbd-info-box { background: #e9f0fb; border-radius: 10px; padding: 14px 16px; display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: #20252d; line-height: 1.6; }
body.newdesign-home .ndbd-info-box-text { display: flex; flex-direction: column; gap: 2px; }

/* student panel */
body.newdesign-home .ndbd-student-panel { background: #fff; border: 1px solid #e2e4e9; border-radius: 20px; box-shadow: 0 8px 24px 0 rgba(82,88,102,0.16), 0 1px 3px 0 rgba(82,88,102,0.08); overflow: hidden; margin: 8px 24px 16px; }
body.newdesign-home .ndbd-panel-search { padding: 16px 16px 12px; border-bottom: 1px solid #e2e4e9; }
body.newdesign-home .ndbd-search-input { width: 100%; height: 38px; border: 1px solid #e2e4e9; border-radius: 10px; padding: 0 12px 0 34px; font-family: inherit; font-size: 14px; outline: none; box-shadow: 0 1px 2px rgba(82,88,102,0.06); background: #fff; }
body.newdesign-home .ndbd-search-input:focus { border-color: #2563d7; }
body.newdesign-home .ndbd-search-wrap { position: relative; }
body.newdesign-home .ndbd-search-wrap > svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); }
body.newdesign-home .ndbd-list { padding: 16px; display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
body.newdesign-home .ndbd-row { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 8px; cursor: pointer; }
body.newdesign-home .ndbd-row.checked { background: #e9f0fb; }
body.newdesign-home .ndbd-checkbox { width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid #e2e4e9; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #fff; }
body.newdesign-home .ndbd-checkbox.checked { background: #2563d7; border-color: #2563d7; }
body.newdesign-home .ndbd-checkbox.checked::after { content: ''; display: block; width: 10px; height: 7px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px,-1px); }
body.newdesign-home .ndbd-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
body.newdesign-home .ndbd-initials { width: 30px; height: 30px; border-radius: 50%; background: #a8c1f0; color: #163c83; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
body.newdesign-home .ndbd-name { font-size: 14px; font-weight: 500; color: #525966; }

/* empty state */
body.newdesign-home .ndbd-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 40px 24px; text-align: center; }
body.newdesign-home .ndbd-empty-ring { width: 46px; height: 46px; border-radius: 50%; border: 1px solid #2563d7; background: linear-gradient(180deg, rgba(228,229,231,0.48) 0%, rgba(247,248,248,0) 100%); display: flex; align-items: center; justify-content: center; }
body.newdesign-home .ndbd-empty-inner { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #e2e4e9; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(27,28,29,0.04); }
body.newdesign-home .ndbd-empty-title { font-size: 16px; font-weight: 500; color: #20252d; }
body.newdesign-home .ndbd-empty-desc { font-size: 14px; color: #525966; max-width: 280px; }

/* buttons */
body.newdesign-home .ndbd-btn-add { background: #2563d7; color: #fff; border: none; border-radius: 10px; padding: 10px 16px; font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 1px 2px rgba(55,93,251,0.08); }
body.newdesign-home .ndbd-btn-add:hover { background: #1d50b5; }

/* add-charge dropdown */
body.newdesign-home .ndbd-add-dd { background: #fff; border-radius: 16px; box-shadow: -6px 8px 8px rgba(186,192,210,0.3); overflow: hidden; min-width: 190px; padding: 8px; }
body.newdesign-home .ndbd-add-dd-item { display: flex; align-items: center; gap: 8px; padding: 10px 8px; border-radius: 8px; font-size: 14px; font-weight: 500; color: #525966; cursor: pointer; }
body.newdesign-home .ndbd-add-dd-item.blue { color: #2563d7; }
body.newdesign-home .ndbd-add-dd-item:hover { background: #f6f7fa; }
body.newdesign-home .ndbd-add-dd-divider { height: 1px; background: #e2e4e9; margin: 2px 0; }

/* saved-charges panel */
body.newdesign-home .ndbd-charges-panel { background: #fff; border-radius: 20px; box-shadow: -6px 8px 16px 0 rgba(186,192,210,0.3); overflow: hidden; margin: 16px 24px; }
body.newdesign-home .ndbd-charges-hdr { padding: 16px; border-bottom: 1px solid #e2e4e9; }
body.newdesign-home .ndbd-charges-back { display: flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 500; color: #20252d; cursor: pointer; margin-bottom: 12px; }
body.newdesign-home .ndbd-charges-back:hover { opacity: 0.7; }
body.newdesign-home .ndbd-charges-list { padding: 16px; display: flex; flex-direction: column; gap: 6px; }
body.newdesign-home .ndbd-charge-row { display: flex; align-items: center; gap: 8px; padding: 10px 8px; border-radius: 8px; cursor: pointer; }
body.newdesign-home .ndbd-charge-row.checked { background: #e9f0fb; }
body.newdesign-home .ndbd-charges-actions { display: flex; gap: 12px; padding: 12px 0 0; margin-top: 8px; border-top: 1px solid #e2e4e9; }

/* new-charge form card */
body.newdesign-home .ndbd-charge-card { margin: 0 24px; border: 1px solid #e2e4e9; border-radius: 12px; overflow: hidden; position: relative; }
body.newdesign-home .ndbd-charge-card-side { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: #6b7381; }
body.newdesign-home .ndbd-charge-card-body { padding: 16px 16px 16px 22px; display: flex; flex-direction: column; gap: 16px; }
body.newdesign-home .ndbd-row-2 { display: flex; gap: 12px; }
body.newdesign-home .ndbd-col { flex: 1; min-width: 0; }
body.newdesign-home .ndbd-amount-wrap { display: flex; border: 1px solid #e2e4e9; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 2px rgba(228,229,231,0.24); }
body.newdesign-home .ndbd-amount-left { flex: 1; display: flex; align-items: center; gap: 6px; padding: 0 10px; border-right: 1px solid #e2e4e9; }
body.newdesign-home .ndbd-amount-left input { border: none; outline: none; font-family: inherit; font-size: 14px; color: #20252d; width: 100%; background: transparent; height: 40px; }
body.newdesign-home .ndbd-amount-right { display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #f6f7fa; font-size: 14px; color: #20252d; white-space: nowrap; }
body.newdesign-home .ndbd-check-row { display: flex; align-items: center; gap: 8px; cursor: pointer; }
body.newdesign-home .ndbd-check-label { font-size: 14px; font-weight: 500; color: #20252d; }
body.newdesign-home .ndbd-dashed { border: none; border-top: 1px dashed #e2e4e9; margin: 4px 0; }
body.newdesign-home .ndbd-link-add { display: flex; align-items: center; gap: 6px; color: #2563d7; font-size: 14px; font-weight: 500; cursor: pointer; padding: 4px 0; }
body.newdesign-home .ndbd-adj-card { border: 1px solid #e2e4e9; border-radius: 10px; padding: 14px; margin-top: 4px; }
body.newdesign-home .ndbd-adj-title { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 500; color: #20252d; margin-bottom: 12px; }
body.newdesign-home .ndbd-adj-del { background: none; border: none; cursor: pointer; color: #6b7381; padding: 2px; }
body.newdesign-home .ndbd-adj-del:hover { color: #df1c41; }

/* review cards */
body.newdesign-home .ndbd-review-card { background: #fff; border: 1px solid #e2e4e9; border-radius: 16px; overflow: hidden; }
body.newdesign-home .ndbd-review-hdr { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-bottom: 1px solid #e2e4e9; }
body.newdesign-home .ndbd-review-hdr-title { font-size: 16px; font-weight: 500; color: #0a0c14; }
body.newdesign-home .ndbd-review-edit { background: none; border: none; cursor: pointer; padding: 6px; border-radius: 8px; }
body.newdesign-home .ndbd-review-body { padding: 20px; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
body.newdesign-home .ndbd-review-row { display: flex; gap: 12px; justify-content: space-between; }
body.newdesign-home .ndbd-review-row .k { color: #525966; }
body.newdesign-home .ndbd-review-row .v { font-weight: 500; color: #20252d; }

/* footer */
body.newdesign-home .ndbd-footer { background: #fff; border-top: 1px solid #e2e4e9; padding: 12px 24px 20px; display: flex; gap: 16px; flex-shrink: 0; }
body.newdesign-home .ndbd-btn-cancel, body.newdesign-home .ndbd-btn-back { flex: 1; height: 42px; border: 1px solid #e2e4e9; border-radius: 10px; background: #fff; font-family: inherit; font-size: 14px; font-weight: 500; color: #525966; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; box-shadow: 0 1px 2px rgba(82,88,102,0.06); }
body.newdesign-home .ndbd-btn-cancel:hover, body.newdesign-home .ndbd-btn-back:hover { background: #f6f7fa; }
body.newdesign-home .ndbd-btn-next { flex: 1; height: 42px; border: none; border-radius: 10px; background: #2563d7; font-family: inherit; font-size: 14px; font-weight: 500; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; box-shadow: 0 1px 2px rgba(55,93,251,0.08); }
body.newdesign-home .ndbd-btn-next.dimmed { opacity: 0.45; cursor: not-allowed; }
body.newdesign-home .ndbd-btn-next:not(.dimmed):hover { background: #1d50b5; }

/* shared pick-list / detail bits for the refund + offline-payment drawers */
body.newdesign-home .ndx-list { display: flex; flex-direction: column; gap: 10px; padding: 4px 24px 8px; }
body.newdesign-home .ndx-pick { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid #e2e4e9; border-radius: 12px; cursor: pointer; background: #fff; box-shadow: 0 1px 2px rgba(228,229,231,0.24); transition: border-color 0.15s, background 0.15s; }
body.newdesign-home .ndx-pick:hover { border-color: #2563d7; background: #f7f9fe; }
body.newdesign-home .ndx-pick-main { min-width: 0; }
body.newdesign-home .ndx-pick-desc { font-size: 14px; font-weight: 500; color: #20252d; margin-bottom: 4px; }
body.newdesign-home .ndx-pick-meta { font-size: 12px; color: #868c98; }
body.newdesign-home .ndx-pick-amt { font-size: 15px; font-weight: 600; color: #20252d; white-space: nowrap; }
body.newdesign-home .ndx-section { padding: 0 24px; }
body.newdesign-home .ndx-empty { text-align: center; padding: 48px 24px; }
body.newdesign-home .ndx-empty-title { font-size: 15px; font-weight: 500; color: #20252d; margin-bottom: 6px; }
body.newdesign-home .ndx-empty-desc { font-size: 13px; color: #868c98; }

/* mobile — bottom sheet: slide up from the bottom instead of in from the right */
@media (max-width: 767px) {
    body.newdesign-home .ndbd-drawer {
        width: 100vw; max-width: 100vw;
        top: auto; right: 0; left: 0; bottom: 0;
        height: 92vh; max-height: 92vh;
        border-top-left-radius: 20px; border-top-right-radius: 20px;
        transform: translateY(100%);
    }
    body.newdesign-home .ndbd-drawer.open { transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Billing Reports (newdesign) — report picker cards, "Reports > Name"
   breadcrumb alignment, grid bottom spacing, Overview CSV button.
   ═══════════════════════════════════════════════════════════════════════════ */
/* report picker cards */
body.newdesign-home #billing #reportContainer { justify-content: flex-start !important; padding: 24px !important; gap: 16px !important; }
body.newdesign-home #billing .report-box {
    width: 232px !important; height: auto !important; min-height: 116px;
    background: #fff !important; border: 1px solid #e2e4e9 !important; border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(82,88,102,0.06) !important; padding: 18px 18px 16px !important;
    font-size: 13px !important; color: #868c98 !important; cursor: pointer;
    display: flex; flex-direction: column; font-weight: 400;
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
body.newdesign-home #billing .report-box:hover { border-color: #2563d7 !important; box-shadow: 0 8px 20px rgba(82,88,102,0.14) !important; transform: translateY(-2px); }
body.newdesign-home #billing .report-box::first-line { font-weight: 600; color: #20252d; }
body.newdesign-home #billing .report-box hr { margin: 12px 0 !important; border: 0 !important; border-top: 1px solid #eceef1 !important; }

/* breadcrumb: "Reports > Name" on one aligned row (overrides the legacy float/negative-margin hack) */
body.newdesign-home #billing #divPage > .reportsBack,
body.newdesign-home #billing #divPage > .reportsBack + p,
body.newdesign-home #billing #divPage > .reportsBack + p + p {
    float: none !important; display: inline-block !important; vertical-align: middle !important;
    margin: 20px 0 14px !important; font-size: 13px !important; font-weight: 400 !important;
    color: #868c98 !important; -webkit-text-stroke: 0 !important;
}
body.newdesign-home #billing #divPage > .reportsBack { margin-left: 24px !important; cursor: pointer; }
body.newdesign-home #billing #divPage > .reportsBack + p { margin-left: 8px !important; margin-right: 8px !important; }
body.newdesign-home #billing #divPage > .reportsBack + p + p { color: #20252d !important; font-weight: 500 !important; }

/* grid not flush to the bottom of the scroll area */
body.newdesign-home #billing #divPage { padding-bottom: 40px !important; }

/* Overview CSV download button — align the bar to the table's right edge, drop the white box */
body.newdesign-home #billing #divPage .nd-report-csvbar {
    background: transparent !important; width: calc(100% - 48px) !important;
    margin: 8px 24px 0 !important; padding: 0 !important;
    display: flex !important; justify-content: flex-end !important; align-items: center;
}
body.newdesign-home #billing #divPage .nd-report-csvbar #downloadBillingRep { margin-right: 0 !important; }

/* Overview → per-child charges detail dialog: wide, content-fit, scrollable, sticky header */
body.newdesign-home #dialog.nd-ovcharges-dialog {
    left: 50% !important; top: 50% !important;
    margin-left: 0 !important; margin-top: 0 !important;
    transform: translate(-50%, -50%) !important;
    max-width: 96vw !important;
}
body.newdesign-home #dialog.nd-ovcharges-dialog span h4 { margin: 10px !important; max-height: none !important; }
body.newdesign-home #dialog.nd-ovcharges-dialog > div, body.newdesign-home #dialog.nd-ovcharges-dialog h { max-height: none !important; }
body.newdesign-home #dialog .nd-ovcharges-wrap { width: 90vw; max-width: 90vw; max-height: 74vh; overflow: auto; margin: 4px 0; text-align: left; }
body.newdesign-home #dialog .nd-ovcharges { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: auto; font-size: 13px; color: #20252d; }
body.newdesign-home #dialog .nd-ovcharges td { white-space: nowrap; padding: 11px 18px; text-align: left; border-bottom: 1px solid #e2e4e9; vertical-align: top; }
body.newdesign-home #dialog .nd-ovcharges tr:first-child td { position: sticky; top: 0; background: #f6f7fa; color: #525966; font-weight: 600; font-size: 12px; z-index: 1; }
body.newdesign-home #dialog .nd-ovcharges tr:last-child td { border-bottom: none; }
body.newdesign-home #dialog .nd-ovcharges td.nd-amt { text-align: right; font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════════════════
   Billing Settings (newdesign) — reskin the legacy inline-styled layout into
   clean stacked cards (DOM untouched; only classes added in JS).
   ═══════════════════════════════════════════════════════════════════════════ */
body.newdesign-home .nd-billing-settings { padding: 8px 6px 40px; overflow: hidden; }

/* step-number badges + post-save check circles → hidden */
body.newdesign-home .nd-billing-settings .nd-set-badge { display: none !important; }
body.newdesign-home .nd-billing-settings > div:has(> img[src*="VsettingsBilling"]) { display: none !important; }

/* the two summary cards: modern chrome, kept side by side */
body.newdesign-home .nd-billing-settings .nd-set-card {
    top: 0 !important; left: 0 !important; margin: 15px !important;
    border: 1px solid #e2e4e9 !important; border-radius: 16px !important;
}

/* accordion sections: stack vertically, full width, no overlap */
body.newdesign-home .nd-billing-settings .nd-set-acc {
    float: none !important; clear: both !important;
    top: 0 !important; left: 0 !important; margin: 0 15px 16px !important;
    width: calc(100% - 30px) !important; max-width: calc(100% - 30px) !important;
    box-sizing: border-box; overflow: hidden;
    border: 1px solid #e2e4e9 !important; border-radius: 16px !important;
}
/* accordion header row fills the card width; pin icon left + caret right */
body.newdesign-home .nd-billing-settings .nd-set-acc > div:first-child {
    width: 100% !important; height: auto !important; min-height: 30px;
    box-sizing: border-box; position: relative; padding: 16px 44px !important; cursor: pointer;
}
body.newdesign-home .nd-billing-settings .nd-set-acc > div:first-child > p {
    top: 0 !important; margin: 0 !important; font-size: 15px !important; font-weight: 600 !important; color: #20252d !important;
}
body.newdesign-home .nd-billing-settings .nd-set-acc > div:first-child > img {
    top: 50% !important; left: 16px !important; transform: translateY(-50%); position: absolute !important; margin: 0 !important;
}
body.newdesign-home .nd-billing-settings .nd-set-acc > div:first-child > .arrowForDiv {
    right: 20px !important; left: auto !important; top: 50% !important; margin-top: -3px !important; position: absolute !important;
}
/* hide the stray absolute dropdown carets inside the open panels */
body.newdesign-home .nd-billing-settings [id$="Open"] .arrowForDiv { display: none !important; }
/* open panel: padding + modern inputs/buttons */
body.newdesign-home .nd-billing-settings [id$="Open"] { padding: 4px 16px 16px !important; }
body.newdesign-home .nd-billing-settings [id$="Open"] input[type="text"] {
    border: 1px solid #e2e4e9 !important; border-radius: 10px !important;
    height: 42px !important; box-sizing: border-box; color: #20252d !important; font-size: 14px !important;
}
body.newdesign-home .nd-billing-settings [id$="Open"] input[type="button"] {
    background: #2563d7 !important; border-radius: 10px !important; height: 40px !important;
    width: auto !important; min-width: 80px; padding: 0 22px !important; font-size: 14px !important; font-weight: 500 !important;
}

/* Phone: the legacy markup is laid out in fixed pixels (360px cards, fields offset 60-331px, 680px headers),
   so everything overflowed / staggered. One column instead: full-width cards, label above its own field,
   button at the end. CSS only - the save handlers read the inputs by child index, so the DOM is untouched;
   the side-by-side pairs (Routing | Account, Legal name | EIN) are re-ordered with flex `order`. */
@media (max-width: 700px) {
    body.newdesign-home .nd-billing-settings { padding: 8px 0 40px; }
    /* Payment Options / Processing Fees */
    body.newdesign-home .nd-billing-settings .nd-set-card {
        float: none !important; width: auto !important; height: auto !important;
        margin: 0 15px 16px !important; padding-bottom: 4px; box-sizing: border-box;
    }
    body.newdesign-home .nd-billing-settings .nd-set-card:first-child { margin-top: 8px !important; }
    /* accordion sections */
    body.newdesign-home .nd-billing-settings .nd-set-acc { float: none !important; margin: 0 15px 16px !important; }
    body.newdesign-home .nd-billing-settings .nd-set-acc > div:first-child { padding: 16px 40px 16px 44px !important; }
    body.newdesign-home .nd-billing-settings [id$="Open"][style*="display: block"] {
        display: flex !important; flex-direction: column; align-items: stretch; padding: 4px 16px 16px !important;
    }
    body.newdesign-home .nd-billing-settings [id$="Open"] > hr { width: 100% !important; margin: 0 0 12px !important; }
    body.newdesign-home .nd-billing-settings [id$="Open"] p {
        margin: 0 0 6px !important; float: none !important;
    }
    body.newdesign-home .nd-billing-settings [id$="Open"] > p { margin-top: 10px !important; }
    body.newdesign-home .nd-billing-settings [id$="Open"] input[type="text"] {
        float: none !important; display: block; width: 100% !important; max-width: none !important;
        margin: 0 0 10px !important; padding: 0 12px !important; box-shadow: none !important;
    }
    body.newdesign-home .nd-billing-settings [id$="Open"] > div:not([id]) { display: block; width: 100%; }
    body.newdesign-home .nd-billing-settings [id$="Open"] input[type="button"] {
        float: none !important; align-self: flex-end; margin: 12px 0 0 !important;
    }
    /* label | field pairs: label, its field, the second label, its field, then the rest */
    body.newdesign-home .nd-billing-settings [id$="Open"] > p[style*="331px"] ~ * { order: 4; }
    body.newdesign-home .nd-billing-settings [id$="Open"] > p[style*="331px"] + input { order: 1; }
    body.newdesign-home .nd-billing-settings [id$="Open"] > p[style*="331px"] { order: 2; }
    body.newdesign-home .nd-billing-settings [id$="Open"] > p[style*="331px"] + input + input { order: 3; }
    body.newdesign-home .nd-billing-settings #depositTransitNumber,
    body.newdesign-home .nd-billing-settings #depositInstitutionNumber { order: 1 !important; }
    body.newdesign-home .nd-billing-settings #depositAccountNumber { order: 3 !important; }
    /* "registered as" choice cards: stacked, full width */
    body.newdesign-home .nd-billing-settings :is(#Corporation, #Individual) {
        float: none !important; width: auto !important; height: auto !important;
        margin: 0 0 10px !important; padding: 2px 4px 12px !important; box-sizing: border-box;
        box-shadow: none !important; border: 1px solid #e2e4e9; border-radius: 10px !important; cursor: pointer;
    }
    body.newdesign-home .nd-billing-settings :is(#Corporation, #Individual).borderBlue { border: 1.5px solid var(--main-color); }
    body.newdesign-home .nd-billing-settings :is(#Corporation, #Individual) p { margin: 10px 10px 0 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Parent billing view (newdesign) — header consistency, child account card,
   and hiding the redundant blank columns in the pending/posted tables.
   ═══════════════════════════════════════════════════════════════════════════ */
/* content header: staff-style toolbar — Billing title + pill tabs on the left, Add-method on the right */
body.newdesign-home #billing .nd-parent-billing-head {
    position: static !important; height: auto !important; top: 0 !important;
    margin: 0 0 8px !important; padding: 16px 24px 16px !important; background: transparent !important; overflow: visible;
    display: flex !important; align-items: center; gap: 16px; flex-wrap: wrap;
    border-bottom: none !important;
}
body.newdesign-home #billing .nd-parent-billing-title,
body.newdesign-home #billing .nd-parent-ul-legacy { display: none !important; }
body.newdesign-home #billing .nd-parent-left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
body.newdesign-home #billing .nd-parent-title-text {
    font-size: 24px; font-weight: 500; letter-spacing: -0.36px; line-height: 32px; color: #0a0e14;
}
body.newdesign-home #billing .nd-parent-tabs-pill { margin: 0 !important; }
/* Add Payment Method button → pill on the right, with the "+" anchored inside it */
body.newdesign-home #billing .nd-parent-billing-head #addPayment {
    position: relative !important; float: none !important; top: 0 !important; right: 0 !important;
    margin: 0 0 0 auto !important; height: 38px !important; width: auto !important; min-width: 180px;
    border-radius: 10px !important; padding: 0 18px 0 38px !important; text-align: center !important;
    box-shadow: 0 1px 2px rgba(55,93,251,0.12) !important;
}
body.newdesign-home #billing .nd-parent-billing-head #addPayment > div {
    position: absolute !important; left: 14px !important; top: 50% !important; transform: translateY(-50%) !important;
    margin: 0 !important; width: 17px !important; height: 17px !important;
}
body.newdesign-home #billing .nd-parent-billing-head #addPayment > div > p { top: 0 !important; left: 0 !important; line-height: 17px !important; }
/* Phone: on Accounts the same button becomes "Make a payment" (id -> #mp, class makePayment) - the rules above
   no longer matched, so it fell back to its legacy spot over the Accounts tab. Same place as Add Payment
   Method; while it is disabled (several children, none picked yet) it is hidden instead of a faded block. */
body.newdesign-home #billing .nd-parent-billing-head #mp {
    position: relative !important; float: none !important; top: 0 !important; right: 0 !important; left: 0 !important;
    margin: 0 0 0 auto !important; height: 38px !important; width: auto !important; min-width: 140px;
    border-radius: 10px !important; padding: 0 18px !important; text-align: center !important;
    background-color: var(--main-second-color) !important; color: #fff !important; font-size: 14px !important;
    box-shadow: 0 1px 2px rgba(55,93,251,0.12) !important; opacity: 1 !important;
}
body.newdesign-home #billing .nd-parent-billing-head #mp[disabled] { display: none !important; }

/* child account summary card */
body.newdesign-home #billing .noMargin.ui-content > div[data-id-child] {
    height: auto !important; min-height: 76px; margin: 16px 24px !important;
    border: 1px solid #e2e4e9 !important; border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(82,88,102,0.06) !important;
    display: flex !important; align-items: center !important; flex-wrap: wrap; gap: 14px; padding: 14px 18px !important;
}
body.newdesign-home #billing .noMargin.ui-content > div[data-id-child] > img {
    float: none !important; margin: 0 !important; height: 46px !important; width: 46px !important;
}
body.newdesign-home #billing .noMargin.ui-content > div[data-id-child] .childName {
    width: auto !important; height: auto !important; margin: 0 6px 0 0 !important; font-size: 15px !important;
}
body.newdesign-home #billing .noMargin.ui-content > div[data-id-child] > p {
    margin: 0 !important; box-shadow: none !important; background: #f6f7fa !important;
    border-radius: 8px !important; font-size: 13px !important; white-space: nowrap;
    padding: 9px 14px !important; min-height: 40px; display: inline-flex; align-items: center; gap: 4px;
}
/* the balance/past-due values are inline-positioned <b> in the legacy markup — make
   them flow so the value stays inside the chip instead of overflowing */
body.newdesign-home #billing .noMargin.ui-content > div[data-id-child] > p > b {
    position: static !important; margin: 0 0 0 4px !important;
}
body.newdesign-home #billing .noMargin.ui-content > div[data-id-child] .makePayment {
    float: none !important; margin: 0 0 0 auto !important; height: 40px !important;
    min-width: 160px !important; width: auto !important; border-radius: 10px !important; font-size: 13px !important;
}

/* hide the redundant blank columns: parent pending "Sends on" (2) + posted "Category" (3) */
/* only the outer table's own rows - not the Charge breakdown table nested in an expanded row (its 3rd
   column is the amount) */
body.newdesign-home #billing .pcps > tbody > tr > td:nth-child(2),
body.newdesign-home #billing .pcps > tr > td:nth-child(2) { display: none !important; }
body.newdesign-home #billing .ptps > tbody > tr > td:nth-child(3),
body.newdesign-home #billing .ptps > tr > td:nth-child(3) { display: none !important; }

/* ── Add Payment Method modal (parent view) ── centered rounded card + themed fields */
body.newdesign-home #addPaymentWithBlock {
    width: 420px !important; max-width: 94vw !important;
    height: auto !important; max-height: 90vh !important; overflow-y: auto !important;
    top: 50% !important; left: 50% !important; margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 16px !important; box-shadow: 0 16px 48px rgba(15,20,40,0.28) !important;
    padding-bottom: 20px !important; box-sizing: border-box; color: #20252d;
}
body.newdesign-home #addPaymentWithBlock * { box-sizing: border-box; }
body.newdesign-home #addPaymentWithBlock #closePropUp { z-index: 2; color: #868c98 !important; }
/* heading */
body.newdesign-home #addPaymentWithBlock > p[style*="font-size: 23px"] {
    margin: 22px 24px 16px !important; font-size: 20px !important; font-weight: 500 !important;
    -webkit-text-stroke: 0 !important; color: #20252d !important;
}
/* card brand image centered */
body.newdesign-home #addPaymentWithBlock img[src*="credits.png"] {
    display: block !important; margin: 4px auto 14px !important; width: 110px !important;
}
/* inputs → themed, full width */
body.newdesign-home #addPaymentWithBlock input[type="text"],
body.newdesign-home #addPaymentWithBlock input[type="tel"] {
    display: block !important; width: calc(100% - 48px) !important; height: 44px !important;
    margin: 0 24px 12px !important; border: 1px solid #e2e4e9 !important; border-radius: 10px !important;
    padding: 0 14px !important; font-size: 14px !important; color: #20252d !important; float: none !important; background: #fff !important;
}
/* buttons → themed, full width */
body.newdesign-home #addPaymentWithBlock input[type="button"],
body.newdesign-home #addPaymentWithBlock #addMyBank,
body.newdesign-home #addPaymentWithBlock #usingMicroDeposits,
body.newdesign-home #addPaymentWithBlock #cancelusingMicroDeposits {
    display: block !important; width: calc(100% - 48px) !important; min-height: 46px !important; height: auto !important;
    margin: 10px 24px 0 !important; border-radius: 10px !important; font-size: 14px !important; font-weight: 500 !important; float: none !important; padding: 6px 14px !important;
}
body.newdesign-home #addPaymentWithBlock #addMyBank,
body.newdesign-home #addPaymentWithBlock #addPaymentMethod {
    background: var(--main-second-color) !important; color: #fff !important; border: none !important;
}
body.newdesign-home #addPaymentWithBlock #usingMicroDeposits {
    background: #fff !important; color: var(--main-second-color) !important; border: 1px solid var(--main-second-color) !important;
}
body.newdesign-home #addPaymentWithBlock #cancelusingMicroDeposits {
    background: #fff !important; color: #868c98 !important; border: 1px solid #e2e4e9 !important;
}
/* radio row: the legacy markup floats the radios/labels and absolutely-positions the
   "Fees apply" hints + a manual selection dot, which overlaps the flow content below.
   Reflow it all inline so the row has real height and content sits beneath it. */
body.newdesign-home #addPaymentWithBlock input[type="radio"] {
    float: none !important; vertical-align: middle !important; margin: 0 6px 0 0 !important;
    width: 16px !important; height: 16px !important; accent-color: var(--main-second-color);
}
/* only the radio labels ("Bank Account" / "Credit Card") carry -webkit-text-stroke;
   scope to those so form field labels aren't clobbered */
body.newdesign-home #addPaymentWithBlock p[style*="font-size: 12px"][style*="text-stroke"] {
    display: inline-block !important; float: none !important; margin: 0 4px 0 0 !important;
    vertical-align: middle !important; font-size: 13px !important; -webkit-text-stroke: 0 !important;
}
/* bank-account form field labels ("Account holder name", "Routing number", …) →
   align with the full-width inputs instead of the legacy 95px indent */
body.newdesign-home #addPaymentWithBlock p:has(> b) {
    margin: 10px 24px 4px !important; text-align: left !important; -webkit-text-stroke: 0 !important; float: none !important;
}
/* hide the stray absolute "x" clear glyphs floating over the inputs */
body.newdesign-home #addPaymentWithBlock p[style*="position: absolute"][style*="color: gray"]:not([style*="font-size"]) { display: none !important; }
body.newdesign-home #addPaymentWithBlock p[style*="font-size: 9px"] {
    position: static !important; display: inline-block !important; top: auto !important; left: auto !important;
    font-size: 11px !important; color: #868c98 !important; margin: 0 16px 0 2px !important; vertical-align: middle !important;
}
/* the manual black selection dot is mis-anchored once reflowed — hide it, the native radio shows state */
body.newdesign-home #addPaymentWithBlock div[style*="background-color: black"] { display: none !important; }
/* indent the first radio; push the content below the radio row so nothing overlaps */
body.newdesign-home #addPaymentWithBlock input#radioAccount { margin-left: 20px !important; }
body.newdesign-home #addPaymentWithBlock img[src*="credits.png"] { clear: both !important; margin-top: 18px !important; }
body.newdesign-home #addPaymentWithBlock #addMyBank { clear: both !important; margin-top: 22px !important; }

/* ---------------------------------------------------------------------------------------------
 * Moved here from Remini.css when the design became switchable (School.newDesign): the branch
 * changed these two rules globally, which would have restyled every page of the old design too.
 * --------------------------------------------------------------------------------------------- */
body.newdesign-home .mainContent {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 24px;
    padding-right: 24px;
}
body.newdesign-home #Messages .conversations > div:not(.mess) {
    border: 0;
}
/* NrfView / ParentEnrollmentsView keep their inline max-width for the old design; the branch had
 * removed it - lift it only in the new design. */
body.newdesign-home #Nrf .mainContent[style*="max-width"],
body.newdesign-home #ParentEnrollments .mainContent[style*="max-width"],
body.newdesign-home #Nrf .nrf-fe-content-col {
    max-width: none !important;
}

/* The home header's legacy "Invite" button is drawn first and removed by
   View.Main.removeInviteButton() a moment later; in the new design it flashed over the
   topbar cluster (message icon + user pill). Never show it on the home header. */
body.newdesign-home .head.headerRoot .rightButtonInvite,
body.newdesign-home #main > .head .rightButtonInvite:not(.nd-invite) {
    display: none !important;
}

/* ---------------------------------------------------------------------------------------------
 * One header height on every new-design page. The base .head is 50px (display:table, so its
 * height acts as a minimum); only Home / Billing / Reports were raised to 60px, Messages stayed at
 * 50px and Conversation used 64px (56px on mobile). All page headers are now 60px, and the content
 * below starts at 60px so a taller header never covers the top of the page (Remini.css .mainContent
 * offsets for the 50px header).
 * --------------------------------------------------------------------------------------------- */
body.newdesign-home .ui-page > .head,
body.newdesign-home .ui-page > [data-role="header"].head {
    height: 60px !important;
    min-height: 60px !important;
    box-sizing: border-box;
}
body.newdesign-home .ui-page > .mainContent {
    margin-top: 60px;
}

/* Home page (#main) back button: the same chevron-left arrow the Messages / Conversation pages
   use (messages-remini.css). The <img src="img/backN.png"> element is kept - only its rendering is
   swapped - so code that looks for '.head .leftButton img' still finds it. */
body.newdesign-home #main .head .leftButton img {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5M11 18l-6-6 6-6' stroke='%2320252d' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    width: 28px !important;
    height: 28px !important;
    filter: none !important;
}

/* =============================================================================================
 * My Profile page (#AdultProfile, opened from the topbar user pill / side menu) - new design.
 * AdultController.decorateNewDesignProfile() adds .nd-profile, the topbar cluster and the
 * "Invite family" button; "Add" (new child) and "Family" open slide-in drawers.
 * ============================================================================================= */
body.newdesign-home #AdultProfile.nd-profile {
    background: #F6F7FA !important;
}
body.newdesign-home #AdultProfile.nd-profile .mainContent {
    background: transparent !important;
    max-width: 880px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 24px !important;
    box-sizing: border-box;
}
/* profile card */
body.newdesign-home #AdultProfile.nd-profile .profileImageContainer {
    display: flex !important;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid #E2E4E9;
    border-radius: 16px;
    padding: 20px 24px !important;
    margin: 0 0 20px 0 !important;
    height: auto !important;
    box-sizing: border-box;
    text-align: left !important;
}
body.newdesign-home #AdultProfile.nd-profile .profileImage {
    position: static !important;
    margin: 0 !important;
    width: 72px !important;
    height: 72px !important;
    flex: 0 0 72px;
    border-radius: 50%;
    overflow: hidden;
    background: #E2E4E9;
    cursor: pointer;
}
body.newdesign-home #AdultProfile.nd-profile .profileImage img {
    width: 72px !important;
    height: 72px !important;
    object-fit: cover;
    border-radius: 50%;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}
body.newdesign-home #AdultProfile.nd-profile .profileImageContainer > h2 {
    position: static !important;
    margin: 0 !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 28px;
    color: #20252D !important;
    text-shadow: none !important;
    text-align: left !important;
}
/* section card = header (top half) + strip (bottom half), they are siblings */
body.newdesign-home #AdultProfile.nd-profile .faceTagCollectionHeader {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 1px solid #E2E4E9;
    border-bottom: 1px solid #F0F1F4;
    border-radius: 16px 16px 0 0;
    padding: 14px 20px !important;
    margin: 0 !important;
    min-height: 56px;
    box-sizing: border-box;
}
body.newdesign-home #AdultProfile.nd-profile .faceTagCollectionHeader h4 {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #20252D !important;
    text-shadow: none !important;
}
body.newdesign-home #AdultProfile.nd-profile .nd-family-hdr h4 { cursor: pointer; }
body.newdesign-home #AdultProfile.nd-profile .childrenCollectionContainer {
    background: #fff;
    border: 1px solid #E2E4E9;
    border-top: none;
    border-radius: 0 0 16px 16px;
    padding: 16px 20px !important;
    margin: 0 0 20px 0 !important;
    height: auto !important;
    min-height: 0 !important;
    position: relative;
    box-sizing: border-box;
}
body.newdesign-home #AdultProfile.nd-profile .childrenCollection {
    height: auto !important;
    overflow: visible !important;
    position: static !important;
    width: auto !important;
}
/* iScroll transforms the strip sideways - lay it out as a wrapping grid instead */
body.newdesign-home #AdultProfile.nd-profile .faceTagCenterDiv {
    transform: none !important;
    width: auto !important;
    position: static !important;
}
body.newdesign-home #AdultProfile.nd-profile .faceTagCenterDiv ul {
    float: none !important;
    height: auto !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    list-style: none;
}
body.newdesign-home #AdultProfile.nd-profile .faceTagCenterDiv ul > li {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    width: 84px !important;
    height: auto !important;
    margin: 0 !important;
    float: none !important;
    cursor: pointer;
}
body.newdesign-home #AdultProfile.nd-profile .faceTagCenterDiv ul > li:empty,
body.newdesign-home #AdultProfile.nd-profile .faceTagCenterDiv ul > li:not([data-id]) {
    display: none !important; /* the &nbsp; spacer item */
}
body.newdesign-home #AdultProfile.nd-profile .faceTagCenterDiv ul > li > img {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    object-fit: cover;
    border: none !important;
    box-shadow: none !important;
    margin: 0 0 6px 0 !important;
    background: #E2E4E9;
}
body.newdesign-home #AdultProfile.nd-profile .faceTagCenterDiv .faceTagName {
    position: static !important;
    margin: 0 !important;
    font-size: 13px !important;
    color: #20252D !important;
    text-align: center;
    text-shadow: none !important;
    max-width: 84px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* "Add" tile -> dashed "+" circle */
body.newdesign-home #AdultProfile.nd-profile li[data-id="add"] .faceTagAdd,
body.newdesign-home #AdultProfile.nd-profile li[data-id="add"] .faceTagAdd a {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
}
/* the circle and "+" are drawn here - the legacy greenFaceTag.png sat off-centre (and shows as a broken image
   where it doesn't load), so it is hidden */
body.newdesign-home #AdultProfile.nd-profile li[data-id="add"] .faceTagAdd img { display: none !important; }
body.newdesign-home #AdultProfile.nd-profile li[data-id="add"] .faceTagAdd a::before {
    content: '';
    display: block;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 1.5px dashed #A0A5B1;
    box-sizing: border-box;
    margin: 0 0 6px 0;
    background: #F6F7FA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%232563D7' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
}
body.newdesign-home #AdultProfile.nd-profile li[data-id="add"] .faceTagAdd p {
    position: static !important;
    width: auto !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 500;
    color: #2563D7 !important;
    text-shadow: none !important;
}
/* no topbar cluster (messages + user pill) on the profile itself: the pill only links back to this page (and re-opening
   it left the loader spinning), and on phones the cluster overlapped the page title */
body.newdesign-home #AdultProfile .head .nd-topbar-right { display: none !important; }
/* "More" link (full list) at the top-right of the strip */
body.newdesign-home #AdultProfile.nd-profile .faceTagRightDiv {
    position: absolute !important;
    top: -46px !important;      /* vertically centred in the 56px header row above the strip */
    right: 20px;
    margin: 0 !important;
    height: 36px !important;
    width: auto !important;
    display: flex;
    align-items: center;
}
body.newdesign-home #AdultProfile.nd-profile .nd-family-hdr + .childrenCollectionContainer .faceTagRightDiv {
    right: 150px; /* leave room for the Invite family button */
}
body.newdesign-home #AdultProfile.nd-profile .faceTagMoreButtonNew {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
    line-height: normal !important;
    padding: 6px 8px !important;
    border-radius: 8px !important;
}
body.newdesign-home #AdultProfile.nd-profile .faceTagMoreButtonNew:hover { background: #F6F7FA !important; }
body.newdesign-home #AdultProfile.nd-profile .faceTagMoreButtonNew a {
    display: flex !important;
    align-items: center;
    gap: 4px;
    text-decoration: none;
}
body.newdesign-home #AdultProfile.nd-profile .faceTagMoreButtonNew img {
    position: static !important;
    order: 2;
    width: 12px !important;
    height: 12px !important;
    margin: 0 !important;
    opacity: 0.5;
}
body.newdesign-home #AdultProfile.nd-profile .faceTagMoreButtonNew p {
    position: static !important;
    width: auto !important;
    margin: 0 !important;
    font-size: 13px !important;
    color: #525966 !important;
    text-shadow: none !important;
}
body.newdesign-home #AdultProfile.nd-profile .childrenCollection h5 {
    flex: 1 1 100%;
    width: 100%;
    white-space: normal !important;
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #6B7381 !important;
    text-shadow: none !important;
    text-align: left !important;
}
/* "Invite family" button on the Family heading */
body.newdesign-home #AdultProfile.nd-profile .ndFamilyInviteBtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid #E2E4E9;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #20252D;
    cursor: pointer;
}
body.newdesign-home #AdultProfile.nd-profile .ndFamilyInviteBtn:hover { background: #F6F7FA; }
/* Invitations (N) button */
body.newdesign-home #AdultProfile.nd-profile .ui-btn:has(#AdultProfileInvitationButton),
body.newdesign-home #AdultProfile.nd-profile #AdultProfileInvitationButton {
    background: #fff !important;
    border: 1px solid #E2E4E9 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    color: #20252D !important;
    text-shadow: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* Same chevron-left back arrow as Messages on EVERY new-design page header (the legacy
   backN.png element stays; only its rendering is swapped). */
body.newdesign-home .head .leftButton img {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5M11 18l-6-6 6-6' stroke='%2320252d' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    width: 28px !important;
    height: 28px !important;
    filter: none !important;
}

/* =============================================================================================
 * Class Children (#childlist) and Class Teachers (#teacherlist), View.FaceTagList - new design.
 * NewDesign.decorateList() adds .nd-list and the letter avatars (FrameController.childrenListDisplayed).
 * ============================================================================================= */
body.newdesign-home .nd-list { background: #F6F7FA !important; }
body.newdesign-home .nd-list .mainContent {
    background: transparent !important;
    max-width: 880px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 24px !important;
    box-sizing: border-box;
}
/* "Edit" in the header -> outline button like the rest of the new design */
body.newdesign-home .nd-list .head .rightHeaderButton {
    top: 14px !important;
    right: 16px !important;
    width: auto !important;
    height: 32px !important;
    line-height: normal !important;
}
body.newdesign-home .nd-list .head .rightHeaderButton a { display: block; text-decoration: none !important; }
body.newdesign-home .nd-list .head .rightHeaderButton a > div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto !important;
    height: 32px !important;
    padding: 0 16px;
    background: #fff !important;
    border: 1px solid #E2E4E9 !important;
    border-radius: 8px !important;
    box-sizing: border-box;
}
body.newdesign-home .nd-list .head .rightHeaderButton a > div:hover { background: #F6F7FA !important; }
body.newdesign-home .nd-list .head .rightHeaderButton p {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    color: #20252D !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
}
/* "Invite Parent" / "Add Child" -> two outline buttons, icon left of the text */
body.newdesign-home .nd-list .faceTagListMenuButtons {
    display: flex;
    gap: 12px;
    margin: 0 0 16px 0 !important;
}
body.newdesign-home .nd-list .faceTagListMenuButtons > div {
    float: none !important;
    width: auto !important;
    flex: 1 1 0;
    padding: 0 !important;
}
body.newdesign-home .nd-list .faceTagListMenuButtons .ui-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    margin: 0 !important;
    padding: 0 16px !important;
    background: #fff !important;
    border: 1px solid #E2E4E9 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    color: #20252D !important;
    text-shadow: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    box-sizing: border-box;
}
body.newdesign-home .nd-list .faceTagListMenuButtons .ui-btn:hover { background: #F6F7FA !important; }
/* a single top button (Class Teachers: "Invite Teacher") keeps a button width, not the full row */
body.newdesign-home .nd-list .faceTagListMenuButtons > .ui-btn:only-child { flex: 0 1 280px; }
body.newdesign-home .nd-list .faceTagListMenuButtons .ui-btn:after {
    position: static !important;
    order: -1;
    margin: 0 !important;
    width: 20px !important;
    height: 20px !important;
    background-color: #2563D7 !important;
    border-radius: 50%;
}
/* the list -> one white card of rows */
body.newdesign-home .nd-list ul.ui-listview {
    margin: 0 !important;
    background: #fff;
    border: 1px solid #E2E4E9;
    border-radius: 16px;
    overflow: hidden;
}
body.newdesign-home .nd-list ul.ui-listview > p[data-role="spacer"] { display: none; }
body.newdesign-home .nd-list li.invContainer {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    min-height: 68px;
    padding: 12px 20px !important;
    border: none !important;
    border-bottom: 1px solid #F0F1F4 !important;
    background: #fff;
    box-sizing: border-box;
}
body.newdesign-home .nd-list li.invContainer:last-of-type { border-bottom: none !important; }
body.newdesign-home .nd-list li.invContainer:hover { background: #FAFBFC; }
/* avatar: photo over a coloured letter */
body.newdesign-home .nd-list .invLeftFaceTag {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: #E2E4E9;
}
body.newdesign-home .nd-list .invLeftFaceTag.avatar-a { background: linear-gradient(135deg, #A855F7 0%, #9333EA 100%); }
body.newdesign-home .nd-list .invLeftFaceTag.avatar-b { background: linear-gradient(135deg, #F97316 0%, #EA580C 100%); }
body.newdesign-home .nd-list .invLeftFaceTag.avatar-c { background: linear-gradient(135deg, #EC4899 0%, #DB2777 100%); }
body.newdesign-home .nd-list .invLeftFaceTag.avatar-d { background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%); }
/* !important: legacy Remini.css ".invLeftFaceTag span" makes every span in the face tag an 11px dot */
body.newdesign-home .nd-list .invLeftFaceTag .nd-list-letter {
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    background: none !important;
    line-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
}
body.newdesign-home .nd-list .invLeftFaceTag img {
    position: relative;
    z-index: 1;
    width: 44px !important;
    height: 44px !important;
    object-fit: cover;
    border-radius: 50%;
}
body.newdesign-home .nd-list .invLeftFaceTag.nd-no-photo img,
body.newdesign-home .nd-list .invLeftFaceTag .faceTagName { display: none !important; }
body.newdesign-home .nd-list .invLeftFaceTag .schoolClassCheckin { z-index: 2; top: 2px; left: 2px; }
body.newdesign-home .nd-list .invLeftFaceTag .schoolClassCheckin:empty:not([style]) { display: none; }
/* name + the small icons under it (questionnaire, messages) */
body.newdesign-home .nd-list .invText {
    flex: 1 1 160px;
    min-width: 0;
    margin: 0 !important;
}
body.newdesign-home .nd-list .invText h4 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #20252D !important;
    text-shadow: none !important;
}
body.newdesign-home .nd-list .invText h4 .ui-btn { margin: 0 !important; flex: none; }
body.newdesign-home .nd-list .invText p { margin: 4px 0 0 0 !important; }
body.newdesign-home .nd-list .invText p a {
    float: none !important;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
body.newdesign-home .nd-list .invText p a:empty { display: none; }
body.newdesign-home .nd-list .invText svg[coronaquiz] {
    position: static !important;
    width: 22px;
    height: 22px;
}
/* row actions (Add parents, and Remove / Edit / Change class / Copy after "Edit") */
body.newdesign-home .nd-list .listItemOptions {
    position: static !important;
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
    margin-left: auto;
    padding: 0 !important;
    background: transparent !important;
}
body.newdesign-home .nd-list .listItemOptions > a { text-decoration: none !important; }
body.newdesign-home .nd-list .listItemOption {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 44px !important;   /* no taller than the name + icons, so rows keep their height after Edit */
    min-width: 56px;
    padding: 0 6px !important;
    box-sizing: border-box;
    border-radius: 8px;
    color: #525966 !important;
}
body.newdesign-home .nd-list .listItemOption:hover { background: #F6F7FA; }
body.newdesign-home .nd-list .listItemOptionImage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    background: transparent !important;
}
body.newdesign-home .nd-list .listItemOptionImage img { margin: 0 !important; max-width: 22px; max-height: 22px; }
body.newdesign-home .nd-list .listItemOption p {
    margin: 2px 0 0 0 !important;
    font-size: 11px !important;
    line-height: 14px !important;
    font-weight: 500 !important;
    color: #525966 !important;
    white-space: nowrap;
    text-shadow: none !important;
}
body.newdesign-home .nd-list .listItemOption[data-goal="delete"] p { color: #DC2626 !important; }
@media (max-width: 600px) {
    body.newdesign-home .nd-list .mainContent { padding: 16px !important; }
    body.newdesign-home .nd-list li.invContainer { padding: 12px 16px !important; }
    body.newdesign-home .nd-list .listItemOptions { flex: 1 1 100%; }
}

/* =============================================================================================
 * Notifications (#notificationsList, View.FaceTagList) - new design. Builds on the .nd-list rows above;
 * NotificationController adds .nd-notifications after NewDesign.decorateList(). Clicks are unchanged.
 * ============================================================================================= */
body.newdesign-home .nd-notifications li.invContainer { align-items: flex-start; flex-wrap: nowrap; cursor: pointer; }
body.newdesign-home .nd-notifications .invText { flex: 1 1 auto; padding-top: 2px; }
body.newdesign-home .nd-notifications .invText h4 { font-size: 15px !important; line-height: 20px; }
body.newdesign-home .nd-notifications .invText p { margin: 2px 0 0 0 !important; }
body.newdesign-home .nd-notifications .invText p a {
    display: inline !important;
    color: #525966 !important;
    font-size: 14px !important;
    line-height: 20px;
    font-weight: 400 !important;
    white-space: normal;
    word-break: break-word;
}
/* "about" child photo on the right */
body.newdesign-home .nd-notifications .invRightFaceTag {
    position: static !important;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: #E2E4E9;
    margin-top: 4px;
}
body.newdesign-home .nd-notifications .invRightFaceTag img { width: 36px !important; height: 36px !important; object-fit: cover; border-radius: 50%; }
body.newdesign-home .nd-notifications .invRightFaceTag .faceTagName { display: none !important; }
/* unread: tinted row + "New" pill instead of the rotated red ribbon */
body.newdesign-home .nd-notifications li.invContainer:has(.invNew) { background: #F5F8FF; }
body.newdesign-home .nd-notifications .invNew {
    position: static !important;
    order: 5;
    flex: none;
    align-self: center;
    transform: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    background: #2563D7 !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 2px 8px !important;
    font-size: 12px !important;
    font-weight: 600;
    line-height: 16px;
}
body.newdesign-home .nd-notifications .invNew p { margin: 0 !important; color: #fff !important; text-shadow: none !important; font-size: 12px !important; }
body.newdesign-home #notificationsList #nonotmsg {
    max-width: 880px;
    margin: 24px auto;
    padding: 40px 20px;
    background: #fff;
    border: 1px solid #E2E4E9;
    border-radius: 16px;
    text-align: center;
    color: #6B7381;
    font-size: 15px;
}
body.newdesign-home #notificationsList { background: #F6F7FA !important; }

/* =============================================================================================
 * Calendar (#Calendar: month grid, day/list views, event list) and its New/Edit event form - new design.
 * CSS only, scoped to body.newdesign-home so other schools keep today's calendar. The month grid is
 * built by src/Controller/calender.js (it injects its own unscoped <style>, hence the !important).
 * ============================================================================================= */
body.newdesign-home #Calendar { background: #F6F7FA !important; }
body.newdesign-home #Calendar .mainContent {
    background: transparent !important;
    padding: 0 24px 32px !important;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}
body.newdesign-home #Calendar .mainContent > * { max-width: 980px; margin-left: auto !important; margin-right: auto !important; }

/* header "New" / "Save" -> primary blue button */
body.newdesign-home #Calendar .head .rightButtonInvite {
    top: 14px !important; right: 16px !important; width: auto !important; height: 32px !important; line-height: normal !important;
}
body.newdesign-home #Calendar .head .rightButtonInvite .rightButtonInvitediv {
    display: flex; align-items: center; justify-content: center;
    width: auto !important; height: 32px !important; padding: 0 16px; box-sizing: border-box;
    background: #2563D7 !important; border: none !important; border-radius: 8px !important; cursor: pointer;
}
body.newdesign-home #Calendar .head .rightButtonInvite .rightButtonInvitediv:hover { background: #1D4ED8 !important; }
body.newdesign-home #Calendar .head .rightButtonInvite .rightButtonInvitediv p {
    width: auto !important; height: auto !important; margin: 0 !important;
    color: #fff !important; font-size: 14px !important; font-weight: 600 !important; line-height: 20px !important;
}

/* month switcher: chevron buttons around the month name */
body.newdesign-home #Calendar .eventstop {
    display: flex !important; align-items: center; justify-content: space-between; gap: 12px;
    padding: 24px 0 12px; width: auto !important;
}
body.newdesign-home #Calendar .eventstop img {
    display: block !important; flex: none; cursor: pointer;
    width: 40px !important; height: 40px !important; padding: 10px; box-sizing: border-box;
    background: #fff; border: 1px solid #E2E4E9; border-radius: 10px;
}
body.newdesign-home #Calendar .eventstop img:first-child {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E%3Cpath d='M12.5 15l-5-5 5-5' stroke='%2320252d' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
body.newdesign-home #Calendar .eventstop img:last-child {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E%3Cpath d='M7.5 5l5 5-5 5' stroke='%2320252d' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
body.newdesign-home #Calendar .eventstop img:hover { background: #F6F7FA; }
body.newdesign-home #Calendar .eventstop span {
    display: block !important; flex: 1; width: auto !important; text-align: center;
    font: 500 24px/32px 'Inter', sans-serif !important; color: #20252D !important;
}

/* toolbar: download / month grid / list */
body.newdesign-home #Calendar .mainContent > div:has(#downloadCsv) { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 12px !important; text-align: right; }
body.newdesign-home #Calendar #downloadCsv,
body.newdesign-home #Calendar #daysView,
body.newdesign-home #Calendar #linesView {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 40px !important; height: 40px; margin: 0 !important; padding: 0 !important;
    background: #fff !important; border: 1px solid #E2E4E9 !important; border-radius: 10px !important; box-shadow: none !important;
}
body.newdesign-home #Calendar #downloadCsv:hover,
body.newdesign-home #Calendar #daysView:hover,
body.newdesign-home #Calendar #linesView:hover { background: #F6F7FA !important; }
body.newdesign-home #Calendar #downloadCsv img,
body.newdesign-home #Calendar #daysView img,
body.newdesign-home #Calendar #linesView img { height: 20px !important; opacity: 0.75; }

/* month grid */
body.newdesign-home #Calendar #newCalendar { margin-bottom: 16px !important; }
body.newdesign-home #Calendar #newCalendar #all {
    width: 100% !important; margin: 0 !important; box-sizing: border-box;
    background: #fff; border: 1px solid #E2E4E9 !important; border-radius: 16px; overflow: hidden; text-align: left !important;
}
body.newdesign-home #Calendar #newCalendar #all > div { display: grid !important; grid-template-columns: repeat(7, 1fr); }
body.newdesign-home #Calendar #newCalendar #all > div > br { display: none; }
body.newdesign-home #Calendar #newCalendar .dayNames {
    display: block !important; width: auto !important; padding: 10px 0 !important; box-sizing: border-box;
    border: none !important; border-bottom: 1px solid #E2E4E9 !important; background: #F6F7FA !important;
    text-align: center; font: 500 13px 'Inter', sans-serif; color: #6B7381;
}
body.newdesign-home #Calendar #newCalendar .dayBox {
    display: flex !important; flex-direction: column; gap: 4px; min-width: 0; min-height: 96px;
    padding: 6px 8px; box-sizing: border-box; background: #fff;
    border: none !important; border-right: 1px solid #F0F1F4 !important; border-bottom: 1px solid #F0F1F4 !important;
}
body.newdesign-home #Calendar #newCalendar .dayBox:nth-child(8n+7) { border-right: none !important; }
body.newdesign-home #Calendar #newCalendar .dayBox:hover { background: #FAFBFC; }
body.newdesign-home #Calendar #newCalendar .dayBox:has(.day[style]) { background: #FAFBFC; }
body.newdesign-home #Calendar #newCalendar .dayBox > br { display: none; }
body.newdesign-home #Calendar #newCalendar .day {
    display: block !important; width: auto !important; padding: 0 !important; background: none !important;
    font: 500 13px 'Inter', sans-serif; color: #20252D;
}
body.newdesign-home #Calendar #newCalendar .day[style] { color: #A0A5B1 !important; }
body.newdesign-home #Calendar #newCalendar .dayContent {
    display: flex !important; flex-direction: column; gap: 3px; height: auto !important; width: 100% !important;
    background: transparent !important; min-width: 0;
}
body.newdesign-home #Calendar #newCalendar .smallEvent {
    width: auto !important; max-width: 100%; box-sizing: border-box;
    padding: 2px 6px; border-radius: 6px; background: #EEF3FD; color: #2563D7 !important;
    font: 500 12px/16px 'Inter', sans-serif !important; text-decoration: none !important;
}
body.newdesign-home #Calendar #newCalendar .smallEvent:hover { background: #DCE6FB; }
/* phone grid (calender.js switches to .mobileDayBox under 750px) */
body.newdesign-home #Calendar #newCalendar .mobileDayBox {
    display: block !important; position: relative; width: auto !important; height: 48px !important; padding: 8px 0 0 !important;
    box-sizing: border-box; text-align: center; background: #fff !important;
    border: none !important; border-bottom: 1px solid #F0F1F4 !important;
    font: 500 14px 'Inter', sans-serif !important; color: #20252D;
}
body.newdesign-home #Calendar #newCalendar .mobileDayBox[style*="color"] { color: #A0A5B1 !important; background: #FAFBFC !important; }
body.newdesign-home #Calendar #newCalendar .mobileDayBox > br { display: none; }
body.newdesign-home #Calendar #newCalendar .mobileDayEvents {
    width: 6px !important; height: 6px !important; left: 50% !important; top: 32px !important;
    transform: translateX(-50%); background: #2563D7 !important;
}

/* event list (day cards) */
body.newdesign-home #Calendar #eventscontent { display: flex; flex-direction: column; gap: 12px; }
body.newdesign-home #Calendar #eventscontent > .mainFaceTagGroupHeader,
body.newdesign-home #Calendar .dayBoxLine {
    background: #fff !important; border: 1px solid #E2E4E9; border-radius: 16px; padding: 4px 20px !important; box-sizing: border-box;
}
body.newdesign-home #Calendar #eventscontent > .mainFaceTagGroupHeader { padding: 24px 20px !important; text-align: center; }
body.newdesign-home #Calendar #eventscontent .mainFaceTagGroupHeader {
    background: transparent !important; border-bottom: none !important; box-shadow: none !important; margin: 0 !important; height: auto !important;
}
body.newdesign-home #Calendar #eventscontent .mainFaceTagGroupHeader p {
    margin: 0 !important; padding: 12px 0 4px !important; position: static !important;
    font: 600 15px/20px 'Inter', sans-serif !important; color: #20252D !important; text-shadow: none !important;
}
body.newdesign-home #Calendar #eventscontent > .mainFaceTagGroupHeader p { color: #6B7381 !important; font-weight: 400 !important; padding: 0 !important; }
body.newdesign-home #Calendar .oneevent {
    display: flex !important; align-items: center; justify-content: space-between; gap: 12px;
    width: auto !important; margin: 0 !important; padding: 12px 0 0 !important;
    font: 600 15px/20px 'Inter', sans-serif !important; color: #20252D !important;
}
body.newdesign-home #Calendar .oneevent > span { display: inline-flex !important; align-items: center; gap: 8px; flex-wrap: wrap; }
body.newdesign-home #Calendar .oneevent > span:last-child {
    flex: none; color: #2563D7 !important; background: #EEF3FD; border-radius: 999px; padding: 2px 10px;
    font: 500 13px/18px 'Inter', sans-serif !important;
}
body.newdesign-home #Calendar .oneevent .endsBy {
    display: inline-block !important; padding: 1px 8px !important; margin: 0 !important; border-radius: 999px !important;
    background: #F0F1F4 !important; border: none !important; box-shadow: none !important;
    font: 500 12px/18px 'Inter', sans-serif !important; color: #525966 !important;
}
body.newdesign-home #Calendar .oneeventdetails {
    position: relative; display: block !important; width: auto !important; margin: 0 !important; padding: 6px 44px 12px 0 !important;
    font: 400 14px/20px 'Inter', sans-serif !important; color: #525966 !important;
}
body.newdesign-home #Calendar .oneeventdetails > span { display: block; text-align: left !important; line-height: 22px; }
body.newdesign-home #Calendar .oneeventdetails u { text-decoration: none; color: #6B7381; font-weight: 500; }
body.newdesign-home #Calendar .oneeventdetails > span:last-child { position: absolute; top: 4px; right: 0; }
body.newdesign-home #Calendar .oneeventdetails button {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 36px !important; height: 36px; margin: 0 !important; padding: 0 !important;
    background: transparent !important; border: none !important; border-radius: 8px !important; box-shadow: none !important;
}
body.newdesign-home #Calendar .oneeventdetails button:hover { background: #F6F7FA !important; }
body.newdesign-home #Calendar .oneeventdetails button img { height: 20px !important; opacity: 0.7; }
body.newdesign-home #Calendar .dayBoxLine hr { border: none; border-top: 1px solid #F0F1F4; margin: 0 !important; }
body.newdesign-home #Calendar .dayBoxLine hr:last-child { display: none; }

/* New / Edit event form (same page; the header button reads "Save") */
body.newdesign-home #Calendar form.newevent {
    max-width: 720px; margin: 24px auto 0 !important; padding: 24px; box-sizing: border-box;
    background: #fff; border: 1px solid #E2E4E9; border-radius: 16px;
    display: flex; flex-direction: column; gap: 18px;
}
body.newdesign-home #Calendar form.newevent .postTextbox { display: flex !important; flex-direction: column; gap: 6px; }
body.newdesign-home #Calendar form.newevent .postTextboxLabel {
    display: flex !important; align-items: center; justify-content: space-between; width: auto !important; min-width: 0 !important; position: relative;
}
body.newdesign-home #Calendar form.newevent .postTextboxLabel label {
    float: none !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important;
}
body.newdesign-home #Calendar form.newevent .postTextboxLabel label p {
    margin: 0 !important; font: 500 14px/20px 'Inter', sans-serif !important; color: #20252D !important; text-shadow: none !important;
}
body.newdesign-home #Calendar form.newevent #allDay {
    position: static !important; text-decoration: none !important;
    font: 500 13px/20px 'Inter', sans-serif; color: #2563D7 !important;
    padding: 2px 10px; border-radius: 999px; background: #EEF3FD;
}
body.newdesign-home #Calendar form.newevent .postTextboxInput { display: block !important; width: 100% !important; }
body.newdesign-home #Calendar form.newevent .ui-input-text {
    margin: 0 !important; border: 1px solid #E2E4E9 !important; border-radius: 8px !important;
    box-shadow: none !important; background: #fff !important;
}
body.newdesign-home #Calendar form.newevent .ui-input-text.ui-focus { border-color: #2563D7 !important; }
body.newdesign-home #Calendar form.newevent input,
body.newdesign-home #Calendar form.newevent textarea {
    font: 400 14px/20px 'Inter', sans-serif !important; color: #20252D !important; padding: 10px 12px !important; min-height: 42px;
}
body.newdesign-home #Calendar form.newevent textarea { min-height: 88px !important; }
body.newdesign-home #Calendar form.newevent #framecontent { display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px; }
body.newdesign-home #Calendar form.newevent #selectframe {
    width: auto !important; margin: 0 !important; padding: 0 16px !important; height: 40px;
    background: #fff !important; border: 1px solid #E2E4E9 !important; border-radius: 8px !important; box-shadow: none !important;
    font: 500 14px 'Inter', sans-serif !important; color: #20252D !important; text-shadow: none !important;
}
body.newdesign-home #Calendar form.newevent #selectframe:hover { background: #F6F7FA !important; }
body.newdesign-home #Calendar form.newevent #framenameselected { font: 400 14px/20px 'Inter', sans-serif; color: #525966; }

@media (max-width: 768px) {
    body.newdesign-home #Calendar .mainContent { padding: 0 16px 24px !important; }
    body.newdesign-home #Calendar .eventstop { padding-top: 16px; }
    body.newdesign-home #Calendar .eventstop span { font-size: 20px !important; }
    body.newdesign-home #Calendar form.newevent { padding: 16px; margin-top: 16px !important; }
}

/* ---- Calendar event form, round 2 ---- */
/* the form replaces the calendar on the same page: keep the month bar / toolbar / grid hidden
   (the .eventstop display:flex above would otherwise beat jQuery's inline display:none) */
body.newdesign-home #Calendar .mainContent:has(> form.newevent) > :not(form.newevent) { display: none !important; }
/* header button: vertically centred in the 60px header (New and Save) */
body.newdesign-home #Calendar .head .rightButtonInvite {
    top: 0 !important; bottom: 0 !important; height: auto !important; margin: 0 !important;
    display: flex !important; align-items: center;
    transform: none !important; /* the generic header rule's translateY(-50%) would lift it again */
}
body.newdesign-home #Calendar form.newevent {
    display: grid !important; grid-template-columns: 1fr 1fr; gap: 20px 16px;
    max-width: 760px; margin: 32px auto 0 !important; padding: 28px 32px 32px;
    text-align: left !important; align-items: start;
}
body.newdesign-home #Calendar form.newevent::before {
    content: "Event details"; grid-column: 1 / -1;
    font: 500 20px/28px 'Inter', sans-serif; color: #20252D;
    padding-bottom: 16px; border-bottom: 1px solid #F0F1F4;
}
body.newdesign-home #Calendar form.newevent > .postTextbox { grid-column: 1 / -1; width: 100% !important; min-width: 0; align-items: stretch; }
/* start / end side by side */
body.newdesign-home #Calendar form.newevent > .postTextbox:nth-of-type(2),
body.newdesign-home #Calendar form.newevent > .postTextbox:nth-of-type(3) { grid-column: auto; }
body.newdesign-home #Calendar form.newevent .postTextboxLabel { justify-content: flex-start !important; gap: 8px; text-align: left !important; }
body.newdesign-home #Calendar form.newevent .postTextboxLabel label p { color: #525966 !important; font-weight: 500 !important; }
body.newdesign-home #Calendar form.newevent .postTextboxInput { text-align: left !important; }
body.newdesign-home #Calendar form.newevent .ui-input-text {
    display: block !important; width: 100% !important; max-width: none !important; box-sizing: border-box;
}
body.newdesign-home #Calendar form.newevent .ui-input-text input,
body.newdesign-home #Calendar form.newevent .ui-input-text textarea,
body.newdesign-home #Calendar form.newevent input:not([type=hidden]),
body.newdesign-home #Calendar form.newevent textarea {
    width: 100% !important; box-sizing: border-box; text-align: left !important;
}
body.newdesign-home #Calendar form.newevent textarea { resize: vertical; }
body.newdesign-home #Calendar form.newevent #framecontent { justify-content: flex-start; }
body.newdesign-home #Calendar form.newevent #framenameselected:empty { display: none; }
@media (max-width: 768px) {
    body.newdesign-home #Calendar form.newevent { grid-template-columns: 1fr; padding: 20px 16px; margin-top: 16px !important; }
    body.newdesign-home #Calendar form.newevent > .postTextbox:nth-of-type(2),
    body.newdesign-home #Calendar form.newevent > .postTextbox:nth-of-type(3) { grid-column: 1 / -1; }
}
/* "All day" hides the End time row with jQuery .hide(); keep that working over the flex rule above */
body.newdesign-home #Calendar form.newevent > .postTextbox[style*="display: none"] { display: none !important; }

/* =============================================================================================
 * Kiosk (#Kiosk, src/View/KioskView.js): teacher / guardian code screens, the children list shown
 * after a guardian code, the signature step and the exit code screen - new design. CSS only; the
 * view paints each step's background inline (green/blue/pink), overridden here.
 * ============================================================================================= */
body.newdesign-home #Kiosk { background: #F6F7FA !important; }
body.newdesign-home #Kiosk .mainContent {
    background: transparent !important;
    font-family: 'Inter', sans-serif;
    color: #20252D;
    padding: 32px 24px !important;
    box-sizing: border-box;
}
/* code screens: one centred card with the instruction and the digit boxes */
body.newdesign-home #Kiosk .mainContent:has(#teacherCode),
body.newdesign-home #Kiosk .mainContent:has(#parentCode) {
    max-width: 560px;
    margin: 40px auto 0 !important;
    padding: 40px 32px !important;
    background: #fff !important;
    border: 1px solid #E2E4E9;
    border-radius: 20px;
    text-align: center;
}
body.newdesign-home #Kiosk .mainContent:has(#teacherCode) > div:first-child,
body.newdesign-home #Kiosk .mainContent:has(#parentCode) > div:first-child,
body.newdesign-home #Kiosk #teacherExit {
    font: 400 16px/24px 'Inter', sans-serif !important;
    color: #525966 !important;
    text-shadow: none !important;
}
body.newdesign-home #Kiosk #teacherCode,
body.newdesign-home #Kiosk #parentCode {
    display: flex !important;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px !important;
}
body.newdesign-home #Kiosk #teacherCode span,
body.newdesign-home #Kiosk #parentCode span { display: none !important; }
body.newdesign-home #Kiosk #teacherCode input,
body.newdesign-home #Kiosk #parentCode input {
    width: 56px !important;
    height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    border: 1.5px solid #E2E4E9 !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: none !important;
    font: 600 28px 'Inter', sans-serif !important;
    color: #20252D !important;
    text-align: center;
    outline: none;
}
body.newdesign-home #Kiosk #teacherCode input:focus,
body.newdesign-home #Kiosk #parentCode input:focus { border-color: #2563D7 !important; box-shadow: 0 0 0 3px rgba(37, 99, 215, 0.15) !important; }

/* children list (after the guardian code) */
body.newdesign-home #Kiosk .mainContent:has(#attendanceChildren) { max-width: 1100px; margin: 0 auto !important; }
body.newdesign-home #Kiosk .mainContent .ui-input-search {
    max-width: 420px;
    margin: 0 0 16px 0 !important;
    border: 1px solid #E2E4E9 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: none !important;
}
body.newdesign-home #Kiosk .mainContent .ui-input-search input { font: 400 15px 'Inter', sans-serif !important; }
body.newdesign-home #Kiosk #attendanceChildren {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    margin: 0 !important;
    padding: 0 !important;
}
body.newdesign-home #Kiosk #attendanceChildren li {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
    padding: 18px;
    background: #fff;
    border: 1px solid #E2E4E9;
    border-radius: 16px;
    box-sizing: border-box;
}
body.newdesign-home #Kiosk #attendanceChildren li > br,
body.newdesign-home #Kiosk #attendanceChildren li > hr,
body.newdesign-home #Kiosk #attendanceChildren li > div > br { display: none !important; }
body.newdesign-home #Kiosk #attendanceChildren li > img {
    flex: none;
    width: 56px !important;
    height: 56px !important;
    padding: 0 !important;
    border-radius: 50%;
    object-fit: cover;
    background: #E2E4E9;
}
body.newdesign-home #Kiosk #attendanceChildren li > div:nth-of-type(1) {
    display: flex !important;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 0;
    min-width: 0;
}
body.newdesign-home #Kiosk #attendanceChildren div span {
    font: 600 17px/22px 'Inter', sans-serif !important;
    color: #20252D !important;
    margin: 0 !important;
}
body.newdesign-home #Kiosk #attendanceChildren div font {
    display: inline-block;
    align-self: flex-start;
    padding: 2px 10px;
    border-radius: 999px;
    background: #F0F1F4;
    font: 500 13px/18px 'Inter', sans-serif !important;
    color: #525966 !important;
}
/* pickup questions (when the class asks them) */
body.newdesign-home #Kiosk #attendanceChildren li > div:nth-of-type(2) {
    display: block !important;
    flex: 1 1 100%;
    margin: 0 !important;
    padding-top: 12px;
    border-top: 1px solid #F0F1F4;
    line-height: 1.6 !important;
}
body.newdesign-home #Kiosk .kioskLabel { font: 500 14px 'Inter', sans-serif; color: #525966; min-width: 0; display: block; margin: 8px 0 4px; }
body.newdesign-home #Kiosk #attendanceChildren textarea {
    width: 100% !important; box-sizing: border-box; border: 1px solid #E2E4E9 !important; border-radius: 8px !important;
    font: 400 14px 'Inter', sans-serif !important;
}
/* Check in / Check out */
body.newdesign-home #Kiosk #attendanceChildren .checkin.ui-btn,
body.newdesign-home #Kiosk #attendanceChildren .checkout.ui-btn {
    flex: 1 1 0;
    margin: 4px 0 0 0 !important;
    height: 44px;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 10px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font: 600 15px 'Inter', sans-serif !important;
}
body.newdesign-home #Kiosk #attendanceChildren .checkin.ui-btn { background: #2563D7 !important; border: 1px solid #2563D7 !important; color: #fff !important; }
body.newdesign-home #Kiosk #attendanceChildren .checkin.ui-btn:hover { background: #1D4ED8 !important; }
body.newdesign-home #Kiosk #attendanceChildren .checkout.ui-btn { background: #fff !important; border: 1px solid #2563D7 !important; color: #2563D7 !important; }
body.newdesign-home #Kiosk #attendanceChildren .checkout.ui-btn:hover { background: #EEF3FD !important; }
body.newdesign-home #Kiosk #attendanceChildren .ui-btn[disabled],
body.newdesign-home #Kiosk #attendanceChildren .ui-btn.ui-state-disabled {
    opacity: 0.35 !important;
    background: #F0F1F4 !important;
    border-color: #E2E4E9 !important;
    color: #6B7381 !important;
}

/* signature step */
body.newdesign-home #Kiosk .sigPad {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    border: 1px solid #E2E4E9;
    border-radius: 20px;
}
body.newdesign-home #Kiosk canvas {
    max-width: 100%;
    border: 1px dashed #A0A5B1 !important;
    border-radius: 12px !important;
    background: #FAFBFC !important;
}
body.newdesign-home #Kiosk .sigPad .ui-btn {
    min-width: 120px;
    height: 44px;
    margin: 12px 4px 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font: 600 15px 'Inter', sans-serif !important;
}
body.newdesign-home #Kiosk .sigPad #ok { background: #2563D7 !important; border: 1px solid #2563D7 !important; color: #fff !important; }
body.newdesign-home #Kiosk .sigPad #clear { background: #fff !important; border: 1px solid #E2E4E9 !important; color: #20252D !important; }

@media (max-width: 768px) {
    body.newdesign-home #Kiosk .mainContent { padding: 16px !important; }
    body.newdesign-home #Kiosk .mainContent:has(#teacherCode),
    body.newdesign-home #Kiosk .mainContent:has(#parentCode) { margin: 16px !important; padding: 28px 16px !important; }
    body.newdesign-home #Kiosk #teacherCode input,
    body.newdesign-home #Kiosk #parentCode input { width: 46px !important; height: 56px !important; font-size: 24px !important; }
    body.newdesign-home #Kiosk #attendanceChildren { grid-template-columns: 1fr; }
}
/* Kiosk: keep every step clear of the fixed 60px header (the margins above replaced the global
   .mainContent margin-top:60px) */
body.newdesign-home #Kiosk .mainContent { margin-top: 60px !important; }
body.newdesign-home #Kiosk .mainContent:has(#teacherCode),
body.newdesign-home #Kiosk .mainContent:has(#parentCode) { margin-top: 100px !important; }
body.newdesign-home #Kiosk .mainContent:has(#attendanceChildren) { margin-top: 60px !important; padding-top: 24px !important; }
@media (max-width: 768px) {
    body.newdesign-home #Kiosk .mainContent:has(#teacherCode),
    body.newdesign-home #Kiosk .mainContent:has(#parentCode) { margin-top: 76px !important; }
    body.newdesign-home #Kiosk .mainContent:has(#attendanceChildren) { padding-top: 16px !important; }
}
/* Kiosk signature step: KioskView.showSignature() hides the list with .hide(); let that win over the
   grid rule above so the pad takes the screen like the old design (search box hidden too) */
body.newdesign-home #Kiosk #attendanceChildren[style*="display: none"] { display: none !important; }
body.newdesign-home #Kiosk .mainContent:has(.sigPad:not([style*="display: none"])) .ui-input-search { display: none !important; }
body.newdesign-home #Kiosk .mainContent:has(.sigPad) { max-width: none; }
body.newdesign-home #Kiosk .sigPad { max-width: none; margin: 0; padding: 16px; text-align: center; }
/* Kiosk child card: photo + name/status on the first row, Check in / Check out on their own row
   (they were sharing the row and squeezed the "in Class A at 16:53 - ..." status into a column) */
body.newdesign-home #Kiosk #attendanceChildren li > div:nth-of-type(1) { flex: 1 1 calc(100% - 70px) !important; }
body.newdesign-home #Kiosk #attendanceChildren .checkin.ui-btn,
body.newdesign-home #Kiosk #attendanceChildren .checkout.ui-btn { flex: 1 1 calc(50% - 7px) !important; min-width: 0; }
body.newdesign-home #Kiosk #attendanceChildren div font {
    max-width: 100%;
    box-sizing: border-box;
    border-radius: 8px !important;
    padding: 3px 10px !important;
    white-space: normal;
    word-break: normal;
}
/* Kiosk code card on phones: the side margins were added on top of a 100% width and pushed the card
   off the right edge - size it to the screen minus the 16px gutters */
@media (max-width: 768px) {
    body.newdesign-home #Kiosk .mainContent:has(#teacherCode),
    body.newdesign-home #Kiosk .mainContent:has(#parentCode) {
        width: calc(100% - 32px) !important;
        max-width: calc(100% - 32px) !important;
        margin-left: 16px !important;
        margin-right: 16px !important;
        box-sizing: border-box !important;
    }
    body.newdesign-home #Kiosk #teacherCode,
    body.newdesign-home #Kiosk #parentCode { gap: 8px; flex-wrap: nowrap; }
    body.newdesign-home #Kiosk #teacherCode input,
    body.newdesign-home #Kiosk #parentCode input { flex: 0 1 48px; width: 48px !important; min-width: 0; }
}

/* =============================================================================================
 * Documents (#SchoolDocuments.nd-docs, src/View/SchoolDocumentsView.js new-design branch).
 * ============================================================================================= */
body.newdesign-home #SchoolDocuments.nd-docs { background: #F6F7FA !important; }
body.newdesign-home #SchoolDocuments.nd-docs .mainContent { background: transparent !important; padding: 0 !important; }
.nd-docs-wrap { max-width: 1120px; margin: 0 auto; padding: 24px; box-sizing: border-box; font-family: 'Inter', sans-serif; color: #20252D; }
.nd-docs-wrap button { font-family: inherit; cursor: pointer; text-shadow: none !important; box-shadow: none !important; }
.nd-docs-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.nd-docs-title h1 { margin: 0; font-size: 26px; font-weight: 500; color: #20252D; text-shadow: none; }
.nd-docs-upload, .nd-docs-upload:hover {
    display: inline-flex !important; align-items: center; gap: 8px; height: 40px; padding: 0 16px !important; margin: 0;
    background: #2563D7 !important; border: none !important; border-radius: 8px !important; color: #fff !important;
    font-size: 14px !important; font-weight: 500 !important; width: auto !important;
}
.nd-docs-upload:hover { background: #1D4ED8 !important; }
.nd-docs-card { background: #fff; border: 1px solid #E2E4E9; border-radius: 16px; overflow: hidden; }
.nd-docs-toolbar { display: flex; align-items: center; gap: 12px; padding: 20px 24px; border-bottom: 1px solid #F0F1F4; flex-wrap: wrap; }
.nd-docs-card.is-empty .nd-docs-toolbar { display: none; }
.nd-docs-tabs { display: flex; gap: 2px; padding: 3px; background: #E2E4E9; border-radius: 10px; margin-right: auto; }
.nd-docs-tab, .nd-docs-tab:hover {
    height: 32px; padding: 0 20px !important; margin: 0; border: none !important; border-radius: 8px !important;
    background: transparent !important; color: #525966 !important; font-size: 14px !important; font-weight: 500 !important; width: auto !important;
}
.nd-docs-tab:hover { color: #20252D !important; }
.nd-docs-tab.active, .nd-docs-tab.active:hover { background: #fff !important; color: #20252D !important; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06) !important; }
.nd-docs-search {
    display: flex; align-items: center; gap: 8px; flex: 0 1 320px; height: 40px; padding: 0 12px;
    border: 1px solid #E2E4E9; border-radius: 8px; background: #fff; box-sizing: border-box;
}
.nd-docs-search svg { flex: none; }
.nd-docs-search input { flex: 1; min-width: 0; border: none !important; outline: none; background: transparent; font-size: 14px; padding: 0; margin: 0; box-shadow: none !important; }
.nd-docs-class { height: 40px; padding: 0 12px; border: 1px solid #E2E4E9; border-radius: 8px; background: #fff; font-size: 14px; color: #20252D; }
.nd-docs-list { display: flex; flex-direction: column; gap: 12px; padding: 20px 24px 24px; }
.nd-doc-row {
    display: flex; align-items: center; gap: 14px; padding: 16px; box-sizing: border-box;
    border: 1px solid #E2E4E9; border-radius: 12px; background: #fff;
}
.nd-doc-row:hover { border-color: #C9CDD6; }
.nd-doc-icon { position: relative; flex: none; width: 36px; height: 40px; cursor: pointer; }
.nd-doc-icon svg { display: block; }
.nd-doc-badge {
    position: absolute; left: -4px; bottom: 6px; padding: 1px 4px; border-radius: 3px;
    font-size: 10px; font-weight: 700; line-height: 12px; color: #fff; letter-spacing: 0.2px;
}
.nd-doc-pdf { background: #E11D48; }
.nd-doc-doc { background: #2563D7; }
.nd-doc-xls { background: #16A34A; }
.nd-doc-ppt { background: #EA580C; }
.nd-doc-main { flex: 1; min-width: 0; cursor: pointer; }
.nd-doc-name { font-size: 16px; font-weight: 500; line-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-doc-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; font-size: 13px; color: #6B7381; }
.nd-doc-meta span { display: inline-flex; align-items: center; gap: 4px; }
.nd-doc-dots, .nd-doc-dots:hover {
    flex: none; width: 36px !important; height: 36px; padding: 0 !important; margin: 0; display: inline-flex !important; align-items: center; justify-content: center;
    background: transparent !important; border: none !important; border-radius: 8px !important;
}
.nd-doc-dots:hover { background: #F6F7FA !important; }
.nd-doc-menu button { display: flex !important; align-items: center; gap: 10px; color: #20252D !important; }
.nd-doc-menu button svg { color: #525966; }
.nd-doc-menu button.nd-danger { border-top: 1px solid #F0F1F4 !important; margin-top: 4px; border-radius: 0 0 8px 8px !important; }
.nd-doc-menu button.nd-danger, .nd-doc-menu button.nd-danger svg { color: #DC2626 !important; }
/* empty state */
.nd-docs-card.is-empty { min-height: 480px; display: flex; align-items: center; justify-content: center; }
.nd-docs-empty { padding: 40px 20px; text-align: center; color: #6B7381; font-size: 14px; }
.nd-docs-empty h3 { margin: 16px 0 8px; font-size: 18px; font-weight: 500; color: #20252D; text-shadow: none; }
.nd-docs-empty p { margin: 0 auto 20px; max-width: 420px; line-height: 20px; }
.nd-docs-empty-icon {
    width: 84px; height: 84px; margin: 0 auto; border-radius: 50%; border: 1px solid #C7D7F8;
    display: flex; align-items: center; justify-content: center; position: relative;
}
.nd-docs-empty-icon span {
    width: 48px; height: 48px; border-radius: 50%; background: #fff; border: 1px solid #E2E4E9;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(16, 24, 40, 0.06);
}
.nd-docs-empty-icon:before, .nd-docs-empty-icon:after { content: ''; position: absolute; border-radius: 50%; background: #DCE6FB; }
.nd-docs-empty-icon:before { width: 8px; height: 8px; right: -10px; top: 40px; }
.nd-docs-empty-icon:after { width: 12px; height: 12px; left: 2px; bottom: -10px; }
/* upload slide-in */
.nd-doc-drawer form { display: flex; flex-direction: column; height: 100%; min-height: 0; margin: 0; }
.nd-doc-drawer .drawer-content { flex: 1; min-height: 0; }
.nd-doc-drawer select.form-input { appearance: auto; height: 42px; }
.nd-doc-drop {
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 16px; cursor: pointer;
    border: 1.5px dashed #C9CDD6; border-radius: 12px; background: #FAFBFC; color: #20252D; text-align: center;
}
.nd-doc-drop.is-over { border-color: #2563D7; background: #EEF3FD; }
.nd-doc-drop-title { margin: 6px 0 0; font-size: 14px; font-weight: 500; }
.nd-doc-drop-sub { margin: 0; font-size: 12px; color: #6B7381; }
.nd-doc-browse, .nd-doc-browse:hover {
    margin-top: 8px !important; height: 34px; padding: 0 18px !important; width: auto !important;
    background: #fff !important; border: 1px solid #2563D7 !important; border-radius: 8px !important; color: #2563D7 !important;
    font-size: 14px !important; font-weight: 500 !important; box-shadow: none !important; text-shadow: none !important; cursor: pointer;
}
.nd-doc-browse:hover { background: #EEF3FD !important; }
.nd-doc-file { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid #E2E4E9; border-radius: 12px; }
.nd-doc-file-icon { flex: none; }
.nd-doc-file-info { flex: 1; min-width: 0; }
.nd-doc-file-name { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-doc-file-size { font-size: 12px; color: #6B7381; margin-top: 2px; }
.nd-doc-progress { height: 6px; margin-top: 10px; border-radius: 3px; background: #E2E4E9; overflow: hidden; }
.nd-doc-progress span { display: block; width: 40%; height: 100%; border-radius: 3px; background: #2563D7; animation: ndDocProgress 1.2s ease-in-out infinite; }
@keyframes ndDocProgress { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
.nd-doc-file-remove, .nd-doc-file-remove:hover {
    flex: none; width: 36px !important; height: 36px; padding: 0 !important; margin: 0 !important; display: inline-flex !important; align-items: center; justify-content: center;
    background: transparent !important; border: none !important; border-radius: 8px !important; color: #6B7381 !important; box-shadow: none !important;
}
.nd-doc-file-remove:hover { background: #F6F7FA !important; color: #DC2626 !important; }
.nd-doc-drawer .btn-primary, .nd-doc-drawer .btn-primary:hover { background: #2563D7 !important; border: 1px solid #2563D7 !important; color: #fff !important; text-shadow: none !important; }
.nd-doc-drawer .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.nd-doc-drawer .btn-secondary, .nd-doc-drawer .btn-secondary:hover { background: #fff !important; border: 1px solid #E2E4E9 !important; color: #20252D !important; text-shadow: none !important; }
.nd-doc-drawer .close-drawer-btn, .nd-doc-drawer .close-drawer-btn:hover { background: transparent !important; border: none !important; box-shadow: none !important; }
@media (max-width: 768px) {
    .nd-docs-wrap { padding: 16px; }
    .nd-docs-title { flex-direction: column; align-items: stretch; }
    .nd-docs-title h1 { font-size: 24px; }
    .nd-docs-title .nd-docs-upload { justify-content: center; }
    .nd-docs-card { border-radius: 16px; }
    .nd-docs-toolbar { padding: 16px; }
    .nd-docs-tabs { width: 100%; margin-right: 0; }
    .nd-docs-tab { flex: 1; padding: 0 6px !important; }
    .nd-docs-search { flex: 1 1 100%; }
    .nd-docs-class { flex: 1 1 100%; }
    .nd-docs-list { padding: 0 16px 8px; gap: 0; }
    .nd-doc-row { border: none; border-bottom: 1px solid #F0F1F4; border-radius: 0; padding: 14px 0; align-items: flex-start; }
    .nd-doc-row:last-child { border-bottom: none; }
    .nd-doc-name { white-space: normal; font-size: 15px; }
    .nd-docs-card.is-empty { min-height: 420px; }
}

/* =============================================================================================
 * Sign Up Sheets (#Volunteer, src/View/VolunteerView.js) and its Add/Edit popup - new design.
 * CSS only (jQuery Mobile collapsibles); all clicks - expand, Publish, edit, delete, slot edit,
 * Sign Up, undo - are untouched.
 * ============================================================================================= */
body.newdesign-home #Volunteer { background: #F6F7FA !important; }
body.newdesign-home #Volunteer .mainContent {
    background: transparent !important; padding: 24px !important; box-sizing: border-box; font-family: 'Inter', sans-serif;
}
body.newdesign-home #Volunteer .mainContent > * { max-width: 980px; margin-left: auto !important; margin-right: auto !important; }
/* header "Add" -> blue button, vertically centred */
body.newdesign-home #Volunteer > .head .rightButtonInvite {
    top: 0 !important; bottom: 0 !important; right: 16px !important; width: auto !important; height: auto !important;
    margin: 0 !important; transform: none !important; display: flex !important; align-items: center; line-height: normal !important;
}
body.newdesign-home #Volunteer > .head .rightButtonInvite .rightButtonInvitediv {
    display: flex; align-items: center; justify-content: center; width: auto !important; height: 32px !important; padding: 0 16px;
    box-sizing: border-box; background: #2563D7 !important; border: none !important; border-radius: 8px !important;
}
body.newdesign-home #Volunteer > .head .rightButtonInvite .rightButtonInvitediv:hover { background: #1D4ED8 !important; }
body.newdesign-home #Volunteer > .head .rightButtonInvite .rightButtonInvitediv p {
    width: auto !important; height: auto !important; margin: 0 !important; color: #fff !important;
    font-size: 14px !important; font-weight: 600 !important; line-height: 20px !important;
}
/* empty state */
body.newdesign-home #Volunteer .mainContent > div:not(.ui-collapsible-set) {
    margin-top: 0 !important; padding: 48px 20px; background: #fff; border: 1px solid #E2E4E9; border-radius: 16px;
    color: #6B7381; font-size: 15px;
}
/* one card per sheet */
body.newdesign-home #Volunteer .ui-collapsible-set { margin: 0 auto !important; display: flex; flex-direction: column; gap: 12px; }
body.newdesign-home #Volunteer .ui-collapsible-set > .ui-collapsible {
    margin: 0 !important; border: 1px solid #E2E4E9 !important; border-radius: 14px !important; overflow: hidden;
    background: #fff; box-shadow: none !important;
}
body.newdesign-home #Volunteer .ui-collapsible-heading { margin: 0 !important; }
body.newdesign-home #Volunteer .ui-collapsible-heading-toggle {
    position: relative; display: block;
    padding: 16px 104px 16px 52px !important; margin: 0 !important;
    background: #fff !important; border: none !important; border-radius: 0 !important; box-shadow: none !important;
    font: 600 15px/22px 'Inter', sans-serif !important; color: #20252D !important; text-shadow: none !important;
    white-space: normal !important;
}
body.newdesign-home #Volunteer .ui-collapsible h3.pub > a { padding-right: 196px !important; }
body.newdesign-home #Volunteer .ui-collapsible-heading-toggle:hover { background: #FAFBFC !important; }
body.newdesign-home #Volunteer .ui-collapsible:not(.ui-collapsible-collapsed) .ui-collapsible-heading-toggle { border-bottom: 1px solid #F0F1F4 !important; }
/* expand icon: chevron instead of the grey +/- circle */
body.newdesign-home #Volunteer .ui-collapsible-heading-toggle:after {
    left: 18px !important; width: 20px !important; height: 20px !important; margin-top: -10px !important;
    background-color: transparent !important; border-radius: 0 !important; background-size: 20px 20px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E%3Cpath d='M7.5 5l5 5-5 5' stroke='%23525966' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    transition: transform 0.15s;
}
body.newdesign-home #Volunteer .ui-collapsible:not(.ui-collapsible-collapsed) .ui-collapsible-heading-toggle:after { transform: rotate(90deg); }
/* Publish (drafts) + edit / delete on the right of the heading */
body.newdesign-home #Volunteer .ui-collapsible-heading-toggle .publishdraft {
    right: 92px !important; top: 50% !important; transform: translateY(-50%);
    height: 28px; padding: 0 12px !important; margin: 0 !important;
    background: #EEF3FD !important; color: #2563D7 !important; border: none !important; border-radius: 999px !important;
    font: 600 13px/28px 'Inter', sans-serif !important; text-shadow: none !important; box-shadow: none !important;
}
body.newdesign-home #Volunteer .ui-collapsible-heading-toggle .publishdraft:hover { background: #DCE6FB !important; }
body.newdesign-home #Volunteer .ui-collapsible-heading-toggle span {
    right: 12px !important; top: 50% !important; transform: translateY(-50%); display: flex !important; gap: 6px;
}
body.newdesign-home #Volunteer .ui-collapsible-heading-toggle span a.ui-btn,
body.newdesign-home #Volunteer .ui-collapsible-content table th a.edit {
    width: 32px !important; height: 32px !important; padding: 0 !important; margin: 0 !important;
    background: #fff !important; border: 1px solid #E2E4E9 !important; border-radius: 8px !important; box-shadow: none !important;
}
body.newdesign-home #Volunteer .ui-collapsible-heading-toggle span a.ui-btn:hover,
body.newdesign-home #Volunteer .ui-collapsible-content table th a.edit:hover { background: #F6F7FA !important; }
body.newdesign-home #Volunteer .ui-collapsible-heading-toggle span a.ui-btn.ui-icon-delete:hover { background: #FEF2F2 !important; border-color: #FECACA !important; }
/* jQM's white glyphs on a grey dot -> dark-grey glyphs, no dot */
body.newdesign-home #Volunteer .ui-collapsible-heading-toggle span a.ui-btn:after,
body.newdesign-home #Volunteer .ui-collapsible-content table th a.edit:after {
    background-color: transparent !important; filter: brightness(0) opacity(0.55);
    width: 18px !important; height: 18px !important; margin: -9px 0 0 -9px !important; background-size: 16px 16px !important;
}
/* body: instructions + time slots table */
body.newdesign-home #Volunteer .ui-collapsible-content {
    padding: 16px 20px 20px !important; background: #fff !important; border: none !important;
    font-family: 'Inter', sans-serif; color: #20252D;
}
body.newdesign-home #Volunteer .ui-collapsible-content > p { margin: 0 0 14px !important; font-size: 14px; line-height: 20px; color: #525966; }
body.newdesign-home #Volunteer .ui-collapsible-content > p:empty { display: none; }
body.newdesign-home #Volunteer .ui-collapsible-content table {
    width: 100%; border-collapse: separate; border-spacing: 0; text-align: left;
    border: 1px solid #E2E4E9; border-radius: 12px; overflow: hidden;
}
body.newdesign-home #Volunteer .ui-collapsible-content table th {
    background: #F6F7FA !important; padding: 10px 16px !important; border-bottom: 1px solid #E2E4E9;
    font-size: 13px; font-weight: 500; color: #6B7381; text-shadow: none; text-align: left; border-radius: 0 !important; vertical-align: middle;
}
body.newdesign-home #Volunteer .ui-collapsible-content table th a.edit { display: inline-block !important; vertical-align: middle; margin-right: 8px !important; }
body.newdesign-home #Volunteer .ui-collapsible-content table td {
    padding: 12px 16px !important; border: none !important; border-bottom: 1px solid #F0F1F4 !important; border-radius: 0 !important;
    font-size: 14px; line-height: 20px; color: #20252D; text-align: left; vertical-align: top;
}
body.newdesign-home #Volunteer .ui-collapsible-content table tr:last-child td { border-bottom: none !important; }
body.newdesign-home #Volunteer .ui-collapsible-content table td b { font-weight: 500; color: #6B7381; }
body.newdesign-home #Volunteer .ui-collapsible-content table tr .edit,
body.newdesign-home #Volunteer .ui-collapsible-content table tr .delete { margin-left: 0 !important; }
body.newdesign-home #Volunteer td a.pSignUp {
    display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 8px;
    background: #2563D7; color: #fff !important; font-size: 13px; font-weight: 600; text-decoration: none !important; text-shadow: none;
}
body.newdesign-home #Volunteer td a.pSignUp:hover { background: #1D4ED8; }
body.newdesign-home #Volunteer td a.undo {
    margin-left: 6px; color: #2563D7 !important; font-size: 13px; font-weight: 500; text-decoration: none !important;
}
body.newdesign-home #Volunteer td a.undo:hover { text-decoration: underline !important; }

/* Add / Edit sheet popup */
body.newdesign-home #volunteerPopup {
    border-radius: 16px !important; padding: 0 20px 20px !important; background: #fff !important;
    border: 1px solid #E2E4E9 !important; box-shadow: 0 16px 40px rgba(16, 24, 40, 0.18) !important;
    font-family: 'Inter', sans-serif; color: #20252D; min-width: min(480px, 92vw); box-sizing: border-box;
}
body.newdesign-home #volunteerPopup > .head {
    margin: 0 -20px 16px !important; background: #fff !important; border-bottom: 1px solid #F0F1F4 !important;
    border-radius: 16px 16px 0 0 !important; height: 56px !important; min-height: 56px !important;
}
body.newdesign-home #volunteerPopup > .head .textHeadline { color: #20252D !important; font: 500 17px/56px 'Inter', sans-serif !important; text-shadow: none !important; }
body.newdesign-home #volunteerPopup #addBtn { top: 12px !important; width: auto !important; height: 32px !important; }
body.newdesign-home #volunteerPopup #addBtn div {
    width: auto !important; height: 32px !important; padding: 0 16px; display: flex; align-items: center;
    background: #2563D7 !important; border: none !important; border-radius: 8px !important;
}
body.newdesign-home #volunteerPopup #addBtn p { width: auto !important; height: auto !important; color: #fff !important; font-size: 14px !important; font-weight: 600 !important; line-height: 20px; }
body.newdesign-home #volunteerPopup #firstForm { display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: #525966; }
body.newdesign-home #volunteerPopup #firstForm > label { margin: 6px 0 0 !important; font-size: 14px; font-weight: 500; color: #20252D; }
body.newdesign-home #volunteerPopup .ui-input-text,
body.newdesign-home #volunteerPopup .ui-select .ui-btn {
    margin: 0 !important; border: 1px solid #E2E4E9 !important; border-radius: 8px !important;
    box-shadow: none !important; background: #fff !important; text-shadow: none !important;
}
body.newdesign-home #volunteerPopup .ui-select .ui-btn { font: 400 14px 'Inter', sans-serif !important; color: #20252D !important; text-align: left; }
body.newdesign-home #volunteerPopup .ui-input-text input,
body.newdesign-home #volunteerPopup .ui-input-text textarea { font: 400 14px 'Inter', sans-serif !important; color: #20252D !important; }
body.newdesign-home #volunteerPopup #firstForm > .ui-btn,
body.newdesign-home #volunteerPopup #firstForm button {
    margin: 0 !important; background: #fff !important; border: 1px dashed #A0A5B1 !important; border-radius: 8px !important;
    box-shadow: none !important; text-shadow: none !important; color: #2563D7 !important; font: 500 14px 'Inter', sans-serif !important;
}
@media (max-width: 768px) {
    body.newdesign-home #Volunteer .mainContent { padding: 16px !important; }
    body.newdesign-home #Volunteer .ui-collapsible-content { padding: 12px !important; }
    body.newdesign-home #Volunteer .ui-collapsible-content table th,
    body.newdesign-home #Volunteer .ui-collapsible-content table td { padding: 10px !important; }
}
/* Sign-up sheet popup header: legacy dialog-header widths clipped the title - lay it out as a flex row:
   [x] title ............ [Next] */
body.newdesign-home #volunteerPopup > .head {
    display: flex !important; align-items: center; gap: 12px;
    position: relative !important; width: auto !important; box-sizing: border-box;
    padding: 0 16px !important;
}
body.newdesign-home #volunteerPopup > .head > div:first-child {
    flex: 1 1 auto; min-width: 0; position: static !important; width: auto !important; margin: 0 !important; padding: 0 !important;
}
body.newdesign-home #volunteerPopup > .head .textHeadline {
    display: block; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important;
    text-align: left !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    position: static !important; transform: none !important; left: auto !important; right: auto !important;
}
body.newdesign-home #volunteerPopup > .head .popupBackButton {
    order: -1; position: static !important; margin: 0 !important; flex: none; display: flex; align-items: center;
}
body.newdesign-home #volunteerPopup > .head .popupBackButton a { margin: 0 !important; vertical-align: middle !important; }
body.newdesign-home #volunteerPopup > .head #addBtn {
    position: static !important; flex: none; margin: 0 !important; top: auto !important; right: auto !important; transform: none !important;
}
/* ...and span the popup's full width (legacy .ui-bar-f-dlg pins it to 344px), so Next sits top-right */
body.newdesign-home #volunteerPopup > .head.ui-bar-f-dlg { width: calc(100% + 40px) !important; max-width: none !important; left: 0 !important; }
body.newdesign-home #volunteerPopup > .head #addBtn { margin-left: auto !important; }

/* =============================================================================================
 * Child Management (#MenageChildren / #MenageChildrenInfo), Staff Management (#MenageTeachers /
 * #MenageTeachersInfo) and Lead Children (LidChildrenController - reuses the #MenageChildren ids) -
 * new design. CSS only; every button keeps its id/class so all handlers are untouched. The list pages'
 * action buttons get inline backgrounds from JS (.oncheck), hence the !important.
 * ============================================================================================= */
body.newdesign-home #MenageChildren, body.newdesign-home #MenageTeachers,
body.newdesign-home #MenageChildrenInfo, body.newdesign-home #MenageTeachersInfo { background: #F6F7FA !important; }
body.newdesign-home #MenageChildren .ui-content, body.newdesign-home #MenageTeachers .ui-content,
body.newdesign-home #MenageChildrenInfo .ui-content, body.newdesign-home #MenageTeachersInfo .ui-content {
    background: transparent !important; padding: 24px !important; box-sizing: border-box;
    max-width: 1180px; margin-left: auto !important; margin-right: auto !important;
    font-family: 'Inter', sans-serif; color: #20252D;
}

/* ---------- list pages: action bar + filters ---------- */
body.newdesign-home #MenageChildren .topdiv, body.newdesign-home #MenageTeachers .topdiv {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin: 0 0 12px !important; padding: 14px 16px !important; overflow: visible !important;
    background: #fff !important; border: 1px solid #E2E4E9; border-radius: 14px;
}
body.newdesign-home #MenageChildren .ui-btn:not(.ui-icon-carat-d),
body.newdesign-home #MenageTeachers .ui-btn:not(.ui-icon-carat-d) {
    float: none !important; display: inline-flex !important; align-items: center; justify-content: center;
    height: 38px; margin: 0 !important; padding: 0 14px !important; box-sizing: border-box;
    background: #fff !important; border: 1px solid #E2E4E9 !important; border-radius: 8px !important;
    color: #20252D !important; box-shadow: none !important; text-shadow: none !important;
    font: 500 14px 'Inter', sans-serif !important;
}
body.newdesign-home #MenageChildren .ui-btn:not(.ui-icon-carat-d):hover,
body.newdesign-home #MenageTeachers .ui-btn:not(.ui-icon-carat-d):hover { background: #F6F7FA !important; }
body.newdesign-home #MenageChildren .topdiv .oncheck.ui-disabled,
body.newdesign-home #MenageTeachers .topdiv .oncheck.ui-disabled { opacity: 0.45 !important; background: #fff !important; }
body.newdesign-home #MenageChildren .topdiv .oncheck:not(.ui-disabled),
body.newdesign-home #MenageTeachers .topdiv .oncheck:not(.ui-disabled) { background: #fff !important; border-color: #2563D7 !important; color: #2563D7 !important; }
body.newdesign-home #MenageChildren .topdiv #delete:not(.ui-disabled) { border-color: #FCA5A5 !important; color: #DC2626 !important; }
/* primary: Add child / Add staff / Search */
body.newdesign-home #MenageChildren #addChild, body.newdesign-home #MenageTeachers #addAdult,
body.newdesign-home #MenageChildren #search, body.newdesign-home #MenageTeachers #search {
    background: #2563D7 !important; border-color: #2563D7 !important; color: #fff !important; padding-left: 14px !important;
}
body.newdesign-home #MenageChildren #addChild:hover, body.newdesign-home #MenageTeachers #addAdult:hover,
body.newdesign-home #MenageChildren #search:hover, body.newdesign-home #MenageTeachers #search:hover { background: #1D4ED8 !important; }
body.newdesign-home #MenageChildren #addChild { margin-right: auto !important; }
body.newdesign-home #MenageTeachers #addAdult { margin-right: auto !important; }
body.newdesign-home #MenageChildren #addChild:after, body.newdesign-home #MenageTeachers #addAdult:after { display: none !important; }
body.newdesign-home #MenageChildren #search, body.newdesign-home #MenageTeachers #search { top: 0 !important; vertical-align: middle; }
/* filter inputs + Active/Archived select */
body.newdesign-home #MenageChildren .ui-content > .ui-input-text, body.newdesign-home #MenageTeachers .ui-content > .ui-input-text,
body.newdesign-home #MenageChildren .ui-content > .ui-select, body.newdesign-home #MenageTeachers .ui-content > .ui-select {
    display: inline-block !important; vertical-align: middle; margin: 0 8px 12px 0 !important;
}
body.newdesign-home #MenageChildren .ui-content > .ui-input-text, body.newdesign-home #MenageTeachers .ui-content > .ui-input-text {
    width: 220px; max-width: 100%; background: #fff !important; border: 1px solid #E2E4E9 !important; border-radius: 8px !important; box-shadow: none !important;
}
body.newdesign-home #MenageChildren .ui-content > .ui-input-text input, body.newdesign-home #MenageTeachers .ui-content > .ui-input-text input {
    height: 38px; padding: 0 12px !important; font: 400 14px 'Inter', sans-serif !important; color: #20252D !important;
}
body.newdesign-home #MenageChildren .ui-content > .ui-select .ui-btn, body.newdesign-home #MenageTeachers .ui-content > .ui-select .ui-btn {
    height: 40px; margin: 0 !important; padding: 0 36px 0 12px !important; line-height: 38px;
    background: #fff !important; border: 1px solid #E2E4E9 !important; border-radius: 8px !important; box-shadow: none !important;
    color: #20252D !important; text-shadow: none !important; font: 400 14px/38px 'Inter', sans-serif !important; text-align: left;
}
body.newdesign-home #MenageChildren .ui-content > .ui-select .ui-btn:after, body.newdesign-home #MenageTeachers .ui-content > .ui-select .ui-btn:after {
    background-color: transparent !important; filter: brightness(0) opacity(0.55);
}
body.newdesign-home #MenageChildren .ui-content > button#search, body.newdesign-home #MenageTeachers .ui-content > button#search { margin-bottom: 12px !important; }

/* ---------- tables (lists + detail sections) ---------- */
body.newdesign-home #MenageChildren table, body.newdesign-home #MenageTeachers table,
body.newdesign-home #MenageChildrenInfo table, body.newdesign-home #MenageTeachersInfo table {
    border-collapse: separate !important; border-spacing: 0; width: 100%;
    background: #fff; color: #20252D; box-shadow: none !important;
    border: 1px solid #E2E4E9; border-radius: 12px; overflow: hidden;
    font: 400 14px/20px 'Inter', sans-serif;
}
body.newdesign-home #MenageChildren table td, body.newdesign-home #MenageTeachers table td,
body.newdesign-home #MenageChildrenInfo table:not(.sch-grid) td, body.newdesign-home #MenageTeachersInfo table td {
    border-bottom: 1px solid #F0F1F4 !important; padding: 10px 14px !important; text-align: left;
}
body.newdesign-home #MenageChildren table tr:last-child td, body.newdesign-home #MenageTeachers table tr:last-child td,
body.newdesign-home #MenageChildrenInfo table tr:last-child td, body.newdesign-home #MenageTeachersInfo table tr:last-child td { border-bottom: none !important; }
/* first row = column titles (not the Schedule grid, which has a real <thead>) */
body.newdesign-home #MenageChildren table tr:first-child td, body.newdesign-home #MenageTeachers table tr:first-child td,
body.newdesign-home #MenageChildrenInfo table:not(.sch-grid) tr:first-child td, body.newdesign-home #MenageTeachersInfo table tr:first-child td {
    background: #F6F7FA !important; color: #6B7381; font-size: 13px; font-weight: 500;
    border-bottom: 1px solid #E2E4E9 !important; padding-top: 10px !important; padding-bottom: 10px !important; height: auto !important;
}
body.newdesign-home #MenageChildren table tr:not(:first-child):hover td,
body.newdesign-home #MenageTeachers table tr:not(:first-child):hover td { background: #FAFBFC; }
body.newdesign-home #MenageChildren table tr:not(:first-child) td,
body.newdesign-home #MenageTeachers table tr:not(:first-child) td { height: 56px; }
body.newdesign-home #MenageChildren table td:first-child, body.newdesign-home #MenageTeachers table td:first-child { width: 48px; padding-right: 0 !important; }
body.newdesign-home #MenageChildren table td img, body.newdesign-home #MenageTeachers table td img {
    width: 36px !important; height: 36px; object-fit: cover; border-radius: 50% !important; margin: 0 10px 0 0 !important; background: #E2E4E9;
}
body.newdesign-home #MenageChildren table td span, body.newdesign-home #MenageTeachers table td span { font-weight: 500; vertical-align: middle; }
body.newdesign-home #MenageChildren table td.classes { color: #525966; }
/* Staff list: Set / Unset Admin */
body.newdesign-home #MenageTeachers table button.setadmin {
    height: 30px; padding: 0 12px !important; margin: 0 !important; white-space: nowrap;
    background: #fff !important; border: 1px solid #2563D7 !important; border-radius: 8px !important;
    color: #2563D7 !important; font: 500 12px 'Inter', sans-serif !important; text-shadow: none !important; box-shadow: none !important;
}
body.newdesign-home #MenageTeachers table button.setadmin:hover { background: #EEF3FD !important; }
/* "No found" / empty blocks */
body.newdesign-home #MenageChildren #status, body.newdesign-home #MenageTeachers #status,
body.newdesign-home #MenageChildrenInfo #status, body.newdesign-home #MenageTeachersInfo #status {
    background: #fff !important; border: 1px solid #E2E4E9; border-radius: 12px !important;
    padding: 20px !important; color: #6B7381 !important; font-weight: 400 !important; font-size: 14px;
}

/* ---------- detail pages: section headings + edit links ---------- */
body.newdesign-home #MenageChildrenInfo .header, body.newdesign-home #MenageTeachersInfo .header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 24px 0 10px !important;
}
body.newdesign-home #MenageChildrenInfo .ui-content > .header:first-child,
body.newdesign-home #MenageTeachersInfo .ui-content > .header:first-child { margin-top: 0 !important; }
body.newdesign-home #MenageChildrenInfo .header > p, body.newdesign-home #MenageTeachersInfo .header > p { margin: 0 !important; }
body.newdesign-home #MenageChildrenInfo .header > p b, body.newdesign-home #MenageTeachersInfo .header > p b { font-size: 16px; font-weight: 600; color: #20252D; }
body.newdesign-home #MenageChildrenInfo .header > a, body.newdesign-home #MenageTeachersInfo .header > a {
    float: none !important; display: inline-flex; align-items: center; gap: 4px; flex: none;
    height: 32px; padding: 0 12px 0 6px; border-radius: 8px; text-decoration: none !important;
    background: #fff; border: 1px solid #E2E4E9; color: #2563D7 !important; font: 500 13px 'Inter', sans-serif !important;
}
body.newdesign-home #MenageChildrenInfo .header > a:hover, body.newdesign-home #MenageTeachersInfo .header > a:hover { background: #EEF3FD; border-color: #C7D7F8; }
body.newdesign-home #MenageChildrenInfo .header > a p, body.newdesign-home #MenageTeachersInfo .header > a p { margin: 0 !important; color: #2563D7 !important; }
body.newdesign-home #MenageChildrenInfo .header button, body.newdesign-home #MenageTeachersInfo .header button,
body.newdesign-home #MenageChildrenInfo table td button.ui-btn, body.newdesign-home #MenageTeachersInfo table td button.ui-btn {
    width: 26px !important; height: 26px !important; margin: 0 !important; padding: 0 !important;
    background: transparent !important; border: none !important; box-shadow: none !important;
}
body.newdesign-home #MenageChildrenInfo table td button.ui-btn, body.newdesign-home #MenageTeachersInfo table td button.ui-btn {
    width: 32px !important; height: 32px !important; border: 1px solid #E2E4E9 !important; border-radius: 8px !important; background: #fff !important;
}
body.newdesign-home #MenageChildrenInfo table td button.ui-btn:hover { background: #F6F7FA !important; }
body.newdesign-home #MenageChildrenInfo table td button.ui-icon-delete:hover { background: #FEF2F2 !important; border-color: #FECACA !important; }
/* jQM's white glyphs on a grey dot -> grey glyphs, no dot */
body.newdesign-home #MenageChildrenInfo .header button:after, body.newdesign-home #MenageTeachersInfo .header button:after,
body.newdesign-home #MenageChildrenInfo table td button.ui-btn:after, body.newdesign-home #MenageTeachersInfo table td button.ui-btn:after {
    background-color: transparent !important; filter: brightness(0) opacity(0.55);
}
body.newdesign-home #MenageChildrenInfo .header button:after, body.newdesign-home #MenageTeachersInfo .header button:after {
    filter: brightness(0) saturate(100%) invert(31%) sepia(86%) saturate(2200%) hue-rotate(211deg) brightness(92%);
}
body.newdesign-home #MenageChildrenInfo .table-sticky table tr td:last-child button { margin: 2px !important; }
body.newdesign-home #MenageChildrenInfo .table-sticky { border-radius: 12px; }
body.newdesign-home #MenageChildrenInfo .table-sticky table tr:first-child td { background: #F6F7FA !important; }
body.newdesign-home #MenageChildrenInfo .table-sticky table td:first-child { background: #fff; }
body.newdesign-home #MenageChildrenInfo table td img, body.newdesign-home #MenageTeachersInfo table td img { border-radius: 50%; }
/* document delete: the legacy delete-wN.png is a white bin on a filled circle, so a grey-out filter turns it into a
   solid square. It is an <img> (no :after) - push the PNG out of the box and draw the bin as the background. */
body.newdesign-home #MenageChildrenInfo table td img#deleteChildInfoDoc {
    width: 32px !important; height: 32px; padding: 0; box-sizing: border-box; border-radius: 8px !important; border: 1px solid #E2E4E9;
    box-shadow: none !important; filter: none !important; cursor: pointer;
    object-position: -9999px 0;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 20 20'%3E%3Cpath d='M3.5 5.5h13M8 5.5V4a1 1 0 011-1h2a1 1 0 011 1v1.5M5 5.5l.8 10.6a1 1 0 001 .9h6.4a1 1 0 001-.9L15 5.5M8.5 9v5M11.5 9v5' stroke='%23525966' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}
body.newdesign-home #MenageChildrenInfo table td img#deleteChildInfoDoc:hover {
    border-color: #FCA5A5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 20 20'%3E%3Cpath d='M3.5 5.5h13M8 5.5V4a1 1 0 011-1h2a1 1 0 011 1v1.5M5 5.5l.8 10.6a1 1 0 001 .9h6.4a1 1 0 001-.9L15 5.5M8.5 9v5M11.5 9v5' stroke='%23DC2626' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.newdesign-home #MenageChildrenInfo table td a { color: #2563D7 !important; text-decoration: none !important; font-weight: 500; }
body.newdesign-home #MenageChildrenInfo table td .regis { color: #6B7381 !important; font-size: 12px !important; }
/* contact tags -> soft pills */
body.newdesign-home #MenageChildrenInfo span.tag {
    display: inline-block; padding: 2px 8px !important; border-radius: 999px !important; font-size: 12px; font-weight: 500; line-height: 18px;
}
body.newdesign-home #MenageChildrenInfo span.tag.parent { background: #E0F2FE !important; color: #0369A1 !important; }
body.newdesign-home #MenageChildrenInfo span.tag.fans { background: #DCFCE7 !important; color: #15803D !important; }
body.newdesign-home #MenageChildrenInfo span.tag.emergency { background: #FEF3C7 !important; color: #B45309 !important; }
/* split billing card */
body.newdesign-home #MenageChildrenInfo #splitBillingBlock {
    border: 1px solid #E2E4E9; border-radius: 12px; padding: 16px 20px 20px !important; background: #fff !important;
}
body.newdesign-home #MenageChildrenInfo #splitSaveBtn {
    background: #2563D7 !important; border: none !important; border-radius: 8px !important; color: #fff !important;
    text-shadow: none !important; box-shadow: none !important; font: 600 14px 'Inter', sans-serif !important;
}
/* Lead child: Forms section */
body.newdesign-home #MenageChildrenInfo #formsInformationblock {
    margin: 24px 0 10px !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important;
}
body.newdesign-home #MenageChildrenInfo #formsInformationblock > p { margin: 0 !important; font: 600 16px 'Inter', sans-serif !important; color: #20252D !important; text-shadow: none !important; }
body.newdesign-home #MenageChildrenInfo #formsInformation { background: transparent !important; padding: 0 !important; }
body.newdesign-home #MenageChildrenInfo .viewFormContainer { border: 1px solid #E2E4E9 !important; border-radius: 12px !important; background: #fff; }
body.newdesign-home #MenageChildrenInfo .viewFormContainer .formHeader { background: #F6F7FA !important; padding: 12px 16px !important; }
body.newdesign-home #MenageChildrenInfo .viewFormContainer .toggleFormView {
    background: #fff !important; border: 1px solid #E2E4E9 !important; border-radius: 8px !important; box-shadow: none !important;
}
body.newdesign-home #MenageChildrenInfo .viewFormContainer .toggleFormView:after { background-color: transparent !important; filter: brightness(0) opacity(0.55); }

@media (max-width: 768px) {
    body.newdesign-home #MenageChildren .ui-content, body.newdesign-home #MenageTeachers .ui-content,
    body.newdesign-home #MenageChildrenInfo .ui-content, body.newdesign-home #MenageTeachersInfo .ui-content { padding: 16px !important; }
    body.newdesign-home #MenageChildren .ui-content > .ui-input-text, body.newdesign-home #MenageTeachers .ui-content > .ui-input-text,
    body.newdesign-home #MenageChildren .ui-content > .ui-select, body.newdesign-home #MenageTeachers .ui-content > .ui-select { width: 100%; margin-right: 0 !important; }
    body.newdesign-home #MenageChildren .ui-content > button#search, body.newdesign-home #MenageTeachers .ui-content > button#search { width: 100% !important; }
    body.newdesign-home #MenageChildren table td, body.newdesign-home #MenageTeachers table td { padding: 8px 10px !important; }
}
/* row / select-all checkboxes are jQM label.ui-btn too - keep them plain checkboxes, not buttons */
body.newdesign-home #MenageChildren .ui-checkbox .ui-btn, body.newdesign-home #MenageTeachers .ui-checkbox .ui-btn {
    display: block !important; width: 24px !important; height: 24px !important; min-height: 0; padding: 0 !important; margin: 0 !important;
    background: transparent !important; border: none !important; box-shadow: none !important; font-size: 0 !important;
}
body.newdesign-home #MenageChildren .ui-checkbox .ui-btn:after, body.newdesign-home #MenageTeachers .ui-checkbox .ui-btn:after {
    left: 2px !important; width: 20px !important; height: 20px !important; margin-top: -10px !important; border-radius: 5px !important;
}
body.newdesign-home #MenageChildren .ui-checkbox .ui-checkbox-on:after, body.newdesign-home #MenageTeachers .ui-checkbox .ui-checkbox-on:after { background-color: #2563D7 !important; }
body.newdesign-home #MenageChildren .ui-checkbox .ui-checkbox-off:after, body.newdesign-home #MenageTeachers .ui-checkbox .ui-checkbox-off:after {
    background-color: #fff !important; border: 1.5px solid #C9CDD6; box-sizing: border-box;
}
body.newdesign-home #MenageChildren table td:first-child .ui-checkbox, body.newdesign-home #MenageTeachers table td:first-child .ui-checkbox { margin: 0 auto !important; width: 24px; }
/* Delete buttons: the legacy delete-wN.png is a white bin on a filled circle, so the grey-out filter
   turned it into a dark dot. Draw the bin instead (Child/Staff detail pages and Sign Up Sheets). */
body.newdesign-home #MenageChildrenInfo .ui-icon-delete:after,
body.newdesign-home #MenageTeachersInfo .ui-icon-delete:after,
body.newdesign-home #Volunteer .ui-icon-delete:after {
    filter: none !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 20 20'%3E%3Cpath d='M3.5 5.5h13M8 5.5V4a1 1 0 011-1h2a1 1 0 011 1v1.5M5 5.5l.8 10.6a1 1 0 001 .9h6.4a1 1 0 001-.9L15 5.5M8.5 9v5M11.5 9v5' stroke='%23525966' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-position: center center !important;
    background-size: 18px 18px !important;
    background-repeat: no-repeat !important;
}
body.newdesign-home #MenageChildrenInfo .ui-icon-delete:hover:after,
body.newdesign-home #MenageTeachersInfo .ui-icon-delete:hover:after,
body.newdesign-home #Volunteer .ui-icon-delete:hover:after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 20 20'%3E%3Cpath d='M3.5 5.5h13M8 5.5V4a1 1 0 011-1h2a1 1 0 011 1v1.5M5 5.5l.8 10.6a1 1 0 001 .9h6.4a1 1 0 001-.9L15 5.5M8.5 9v5M11.5 9v5' stroke='%23DC2626' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
/* Section edit link with no label (just the pencil): square icon button, no right padding for the empty <p> */
body.newdesign-home #MenageChildrenInfo .header > a:has(> p:empty),
body.newdesign-home #MenageTeachersInfo .header > a:has(> p:empty) {
    width: 32px; padding: 0 !important; gap: 0; justify-content: center; box-sizing: border-box;
}
body.newdesign-home #MenageChildrenInfo .header > a > p:empty,
body.newdesign-home #MenageTeachersInfo .header > a > p:empty { display: none !important; }
/* Child detail - Schedule (Mon-Fri): centred columns, and the edit-mode time inputs as rounded fields */
body.newdesign-home #MenageChildrenInfo table:has(td[style*="height: 40px"]) td,
body.newdesign-home #MenageChildrenInfo table:has(input[type=time]) td { text-align: center !important; vertical-align: middle; }
body.newdesign-home #MenageChildrenInfo table td[style*="height: 40px"] { color: #20252D; font-weight: 500; }
body.newdesign-home #MenageChildrenInfo table input[type=time] {
    display: inline-block; vertical-align: middle; box-sizing: border-box;
    width: 112px; height: 34px; margin: 3px 2px !important; padding: 0 8px;
    background: #fff; border: 1px solid #E2E4E9; border-radius: 8px; outline: none;
    font: 400 13px 'Inter', sans-serif; color: #20252D;
}
body.newdesign-home #MenageChildrenInfo table input[type=time]:focus { border-color: #2563D7; box-shadow: 0 0 0 3px rgba(37, 99, 215, 0.12); }
body.newdesign-home #MenageChildrenInfo table tr:last-child td:has(input[type=time]) { padding: 10px 6px !important; color: #6B7381; }
/* Schedule edit: start above end, both centred under the weekday (the " - " text node between the two
   inputs pushed them off-centre once they wrapped; font-size:0 drops it, the inputs restate their font) */
body.newdesign-home #MenageChildrenInfo table td:has(> input[type=time]) { font-size: 0 !important; }
body.newdesign-home #MenageChildrenInfo table td > input[type=time] {
    display: block; margin: 3px auto !important; font-size: 13px !important;
}

/* =============================================================================================
 * Forms / Staff Forms (#RegistrationForms) and the form editor (#RegistrationFormsEdit) - new design.
 * CSS only (+ the editor background in FormsController.showEdit). The editor saves the form by exact
 * HTML string matching, so nothing here changes markup; the manager icons keep their DOM position
 * (h3 > a > span.action-buttons > a) that the handlers walk.
 * ============================================================================================= */
body.newdesign-home #RegistrationForms, body.newdesign-home #RegistrationFormsEdit { background: #F6F7FA !important; }
body.newdesign-home #RegistrationForms:not(.newdesign-forms) > .ui-content, body.newdesign-home #RegistrationFormsEdit > .ui-content {
    background: transparent !important; padding: 24px !important; box-sizing: border-box;
    max-width: 1180px; margin-left: auto !important; margin-right: auto !important;
    font-family: 'Inter', sans-serif; color: #20252D;
}
body.newdesign-home #RegistrationFormsEdit > .ui-content { max-width: 920px; }
/* header New / Save -> blue button, vertically centred */
body.newdesign-home #RegistrationForms > .head .rightButtonInvite,
body.newdesign-home #RegistrationFormsEdit > .head .rightButtonInvite {
    top: 0 !important; bottom: 0 !important; right: 16px !important; width: auto !important; height: auto !important;
    margin: 0 !important; transform: none !important; display: flex !important; align-items: center; line-height: normal !important;
}
body.newdesign-home #RegistrationForms > .head .rightButtonInvite[style*="display: none"] { display: none !important; }
body.newdesign-home #RegistrationForms > .head .rightButtonInvitediv,
body.newdesign-home #RegistrationFormsEdit > .head .rightButtonInvitediv {
    display: flex; align-items: center; justify-content: center; width: auto !important; height: 32px !important; padding: 0 16px;
    box-sizing: border-box; background: #2563D7 !important; border: none !important; border-radius: 8px !important;
}
body.newdesign-home #RegistrationForms > .head .rightButtonInvitediv:hover,
body.newdesign-home #RegistrationFormsEdit > .head .rightButtonInvitediv:hover { background: #1D4ED8 !important; }
body.newdesign-home #RegistrationForms > .head .rightButtonInvitediv p,
body.newdesign-home #RegistrationFormsEdit > .head .rightButtonInvitediv p {
    width: auto !important; height: auto !important; margin: 0 !important; color: #fff !important;
    font-size: 14px !important; font-weight: 600 !important; line-height: 20px !important;
}

/* ---------- list: category cards with form rows ---------- */
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .ui-content > .ui-collapsible-set { margin: 0 0 20px !important; display: flex; flex-direction: column; gap: 12px; }
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .ui-collapsible-set > .ui-collapsible {
    margin: 0 !important; border: 1px solid #E2E4E9 !important; border-radius: 14px !important;
    overflow: hidden; background: #fff; box-shadow: none !important;
}
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .ui-collapsible-heading { margin: 0 !important; }
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .ui-collapsible-heading-toggle {
    position: relative; display: block; margin: 0 !important; padding: 16px 20px 16px 50px !important;
    background: #fff !important; border: none !important; border-radius: 0 !important; box-shadow: none !important;
    font: 600 16px/22px 'Inter', sans-serif !important; color: #20252D !important; text-shadow: none !important; white-space: normal !important;
}
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .ui-collapsible-heading-toggle:hover { background: #FAFBFC !important; }
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .ui-collapsible:not(.ui-collapsible-collapsed) > .ui-collapsible-heading > .ui-collapsible-heading-toggle { border-bottom: 1px solid #F0F1F4 !important; }
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .ui-collapsible-heading-toggle:after {
    left: 18px !important; width: 20px !important; height: 20px !important; margin-top: -10px !important;
    background-color: transparent !important; border-radius: 0 !important; background-size: 20px 20px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E%3Cpath d='M7.5 5l5 5-5 5' stroke='%23525966' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    transition: transform 0.15s;
}
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .ui-collapsible:not(.ui-collapsible-collapsed) > .ui-collapsible-heading > .ui-collapsible-heading-toggle:after { transform: rotate(90deg); }
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .ui-collapsible-content { background: #fff !important; border: none !important; padding: 12px 16px 16px !important; }
/* forms inside a category: bordered rows */
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .ui-collapsible-content > .ui-collapsible-set { margin: 0 !important; display: flex; flex-direction: column; gap: 8px; }
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .ui-collapsible-content > .ui-collapsible-set > .ui-collapsible { border-radius: 12px !important; }
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .ui-collapsible-content .ui-collapsible-heading-toggle {
    font: 500 15px/22px 'Inter', sans-serif !important; padding: 14px 16px 14px 46px !important;
}
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .ui-collapsible-content .ui-collapsible-heading-toggle:after { left: 14px !important; }
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .ui-collapsible-content .ui-collapsible-heading-toggle:has(.action-buttons a) { padding-right: 200px !important; }
/* manager icons (delete / down / up / edit / csv): outlined square buttons, same right offsets */
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .action-buttons > a.ui-btn {
    top: 50% !important; margin-top: -16px !important; width: 32px !important; height: 32px !important; padding: 0 !important;
    background: #fff !important; border: 1px solid #E2E4E9 !important; border-radius: 8px !important; box-shadow: none !important;
}
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .action-buttons > a.ui-btn:hover { background: #F6F7FA !important; }
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .action-buttons > a.ui-btn.ui-icon-delete:hover { background: #FEF2F2 !important; border-color: #FECACA !important; }
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .action-buttons > a.ui-btn:after,
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .form > a.ui-icon-print:after {
    background-color: transparent !important; filter: brightness(0) opacity(0.55);
}
/* expanded form: content + Submit / print */
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .form { font-family: 'Inter', sans-serif; color: #20252D; }
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .form .submitForm,
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .form button.submitForm {
    height: 40px; padding: 0 20px !important; border: none !important; border-radius: 8px !important;
    background: #2563D7 !important; color: #fff !important; text-shadow: none !important; box-shadow: none !important;
    font: 600 14px 'Inter', sans-serif !important;
}
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .form .submitForm:hover { background: #1D4ED8 !important; }
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .form > a.ui-icon-print {
    width: 40px !important; height: 40px !important; padding: 0 !important;
    background: #fff !important; border: 1px solid #E2E4E9 !important; border-radius: 8px !important; box-shadow: none !important;
}
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .form .approveForm, body.newdesign-home #RegistrationForms:not(.newdesign-forms) .form .rejectForm {
    border: none !important; border-radius: 8px !important; text-shadow: none !important; box-shadow: none !important;
    font: 600 14px 'Inter', sans-serif !important; color: #fff !important;
}
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .form .approveForm { background: #16A34A !important; }
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .form .rejectForm { background: #DC2626 !important; }
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .pending-approval-indicator { border-radius: 10px !important; }
/* filled-PDF upload button */
body.newdesign-home #RegistrationForms button.fpdf.pdf {
    padding: 0 14px !important; height: 36px; border: 1px solid #2563D7 !important; border-radius: 8px !important;
    background: #fff !important; color: #2563D7 !important; text-shadow: none !important; box-shadow: none !important;
    font: 500 13px 'Inter', sans-serif !important;
}
body.newdesign-home #RegistrationForms button.fpdf.pdf:hover { background: #EEF3FD !important; }

/* ---------- list: Download / Print All / Send Reminder + class filter ---------- */
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .action-row { display: flex !important; flex-wrap: wrap; gap: 8px; margin: 0 0 12px !important; padding: 0 !important; }
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .action-row button.app-btn-primary,
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .action-row .app-btn-primary {
    float: none !important; display: inline-flex !important; align-items: center; width: auto !important;
    height: 38px; margin: 0 !important; padding: 0 16px !important; top: 0 !important;
    background: #fff !important; border: 1px solid #E2E4E9 !important; border-radius: 8px !important;
    color: #20252D !important; text-shadow: none !important; box-shadow: none !important; font: 500 14px 'Inter', sans-serif !important;
}
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .action-row .app-btn-primary:hover { background: #F6F7FA !important; }
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .action-row #remainderpae { background: #2563D7 !important; border-color: #2563D7 !important; color: #fff !important; }
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .action-row #remainderpae:hover { background: #1D4ED8 !important; }
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .classroomFilterRow { padding: 0 0 12px !important; }
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .classroomFilterRow .ui-select { margin: 0 !important; }
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .classroomFilterRow .ui-select .ui-btn,
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .classroomFilterRow select {
    height: 38px !important; min-width: 220px; padding: 0 36px 0 12px !important; line-height: 36px;
    background: #fff !important; border: 1px solid #E2E4E9 !important; border-radius: 8px !important; box-shadow: none !important;
    color: #20252D !important; text-shadow: none !important; font: 400 14px/36px 'Inter', sans-serif !important; text-align: left;
}
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .classroomFilterRow .ui-select .ui-btn:after { background-color: transparent !important; filter: brightness(0) opacity(0.55); }

/* ---------- list: children/staff x forms table + pending approvals ---------- */
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .table-sticky {
    background: #fff; border: 1px solid #E2E4E9; border-radius: 14px; overflow: auto; margin-bottom: 16px;
}
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .table-sticky > table {
    margin: 0 !important; width: 100%; border-collapse: separate !important; border-spacing: 0; background: #fff;
    font: 400 14px/20px 'Inter', sans-serif; color: #20252D;
}
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .table-sticky > table td {
    border: none !important; border-bottom: 1px solid #F0F1F4 !important; border-right: 1px solid #F0F1F4 !important;
    padding: 10px 12px !important; vertical-align: middle;
}
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .table-sticky > table td:last-child { border-right: none !important; }
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .table-sticky > table tr:last-child td { border-bottom: none !important; }
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .table-sticky > table tr:first-child td {
    background: #F6F7FA !important; color: #525966; font-size: 13px; font-weight: 500; border-bottom: 1px solid #E2E4E9 !important;
}
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .table-sticky > table tr:not(:first-child) td:first-child { font-weight: 500; background: #fff; }
/* N/A cells (grey inline) -> softer grey, muted text */
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .table-sticky > table td[style*="240, 240, 240"],
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .table-sticky > table td[style*="#f0f0f0"] { background: #F9FAFB !important; color: #A0A5B1; font-size: 13px; }
/* Done / View -> green pill */
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .table-sticky > table td a {
    display: inline-block; padding: 2px 10px; border-radius: 999px; background: #DCFCE7;
    color: #15803D !important; font-size: 12px; font-weight: 600; text-decoration: none !important;
}
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .table-sticky > table td a:hover { background: #BBF7D0; }
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .table-sticky > table td .p { font-size: 11px; color: #6B7381; text-shadow: none; margin-left: 4px; }
/* pending approvals */
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .pending-forms-section { margin-top: 24px !important; }
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .pending-forms-section > h3 {
    margin: 0 !important; padding: 14px 16px; text-align: left !important; color: #B45309 !important;
    font: 600 15px 'Inter', sans-serif; background: #FFFBEB; border-bottom: 1px solid #FDE68A;
}
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .table-sticky > table td span[style*="ff9800"] {
    display: inline-block; padding: 2px 10px; border-radius: 999px; background: #FEF3C7;
    color: #B45309 !important; font-size: 12px; font-weight: 600;
}

/* ---------- editor (#RegistrationFormsEdit) ---------- */
body.newdesign-home #RegistrationFormsEdit .formsControlBox {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 16px 20px; margin-bottom: 12px; background: #fff; border: 1px solid #E2E4E9; border-radius: 14px;
}
body.newdesign-home #RegistrationFormsEdit .formsControlBox .ui-input-text {
    flex: 1 1 100%; width: 100% !important; float: none !important; margin: 0 0 4px !important;
    border: 1px solid #E2E4E9 !important; border-radius: 8px !important; box-shadow: none !important; background: #fff !important;
}
body.newdesign-home #RegistrationFormsEdit .formsControlBox #formname {
    width: 100% !important; float: none !important; height: 42px !important; padding: 0 12px !important;
    font: 500 15px 'Inter', sans-serif !important; color: #20252D !important;
}
body.newdesign-home #RegistrationFormsEdit .formsControlBox button,
body.newdesign-home #RegistrationFormsEdit .formsControlBox #categoryTrigger {
    margin: 0 !important; height: 36px; padding: 0 14px !important; display: inline-flex !important; align-items: center;
    background: #fff !important; border: 1px solid #E2E4E9 !important; border-radius: 8px !important; box-shadow: none !important;
    color: #20252D !important; text-shadow: none !important; font: 500 13px 'Inter', sans-serif !important; width: auto !important;
}
body.newdesign-home #RegistrationFormsEdit .formsControlBox button:hover,
body.newdesign-home #RegistrationFormsEdit .formsControlBox #categoryTrigger:hover { background: #F6F7FA !important; }
body.newdesign-home #RegistrationFormsEdit .formsControlBox .categoryslectorclass { margin: 0 !important; width: auto !important; }
/* field toolbar (Text box / Signature / Checkbox / Date / Question / PDF / ...) -> chips */
body.newdesign-home #RegistrationFormsEdit > .ui-content > button {
    margin: 0 6px 8px 0 !important; height: 34px; padding: 0 12px !important; display: inline-flex !important; align-items: center; width: auto !important;
    background: #fff !important; border: 1px solid #C7D7F8 !important; border-radius: 999px !important; box-shadow: none !important;
    color: #2563D7 !important; text-shadow: none !important; font: 500 13px 'Inter', sans-serif !important;
}
body.newdesign-home #RegistrationFormsEdit > .ui-content > button:hover { background: #EEF3FD !important; }
body.newdesign-home #RegistrationFormsEdit > .ui-content > br:first-of-type { display: none; }
/* builder blocks */
body.newdesign-home #RegistrationFormsEdit #formHtml { margin: 8px 0 0 !important; }
body.newdesign-home #RegistrationFormsEdit .formdraggableDiv {
    margin: 0 0 12px !important; padding: 12px 14px 4px; background: #fff !important;
    border: 1px solid #E2E4E9 !important; border-radius: 12px; box-sizing: border-box;
}
body.newdesign-home #RegistrationFormsEdit .formdraggableDiv:hover { border-color: #C9CDD6 !important; }
body.newdesign-home #RegistrationFormsEdit .form-bottom-row { border-top: 1px solid #F0F1F4 !important; margin-top: 8px; }
body.newdesign-home #RegistrationFormsEdit [contenteditable] {
    outline: none !important; border: 1px solid #E2E4E9 !important; border-radius: 8px; padding: 8px 10px !important;
    font: 400 14px/20px 'Inter', sans-serif; color: #20252D; box-sizing: border-box;
}
body.newdesign-home #RegistrationFormsEdit [contenteditable]:focus { border-color: #2563D7 !important; box-shadow: 0 0 0 3px rgba(37, 99, 215, 0.12); }
body.newdesign-home #RegistrationFormsEdit #formHtml .ui-input-text { border-radius: 8px !important; box-shadow: none !important; border-color: #E2E4E9 !important; }
body.newdesign-home #RegistrationFormsEdit #formHtml .ui-btn-icon-notext {
    background: #fff !important; border: 1px solid #E2E4E9 !important; border-radius: 6px !important; box-shadow: none !important;
}
body.newdesign-home #RegistrationFormsEdit #formHtml .ui-btn-icon-notext:after { background-color: transparent !important; filter: brightness(0) opacity(0.55); }
body.newdesign-home #RegistrationFormsEdit .signature { border-color: #E2E4E9 !important; border-radius: 8px; }
body.newdesign-home #RegistrationFormsEdit .blue-background-class { background: #EEF3FD !important; border-color: #2563D7 !important; }
/* delete glyph: legacy delete-wN.png is a white bin on a filled circle - draw the bin (list + editor) */
body.newdesign-home #RegistrationForms:not(.newdesign-forms) .action-buttons > a.ui-icon-delete:after,
body.newdesign-home #RegistrationFormsEdit #formHtml .ui-icon-delete:after {
    filter: none !important; background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 20 20'%3E%3Cpath d='M3.5 5.5h13M8 5.5V4a1 1 0 011-1h2a1 1 0 011 1v1.5M5 5.5l.8 10.6a1 1 0 001 .9h6.4a1 1 0 001-.9L15 5.5M8.5 9v5M11.5 9v5' stroke='%23525966' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-position: center center !important; background-size: 16px 16px !important; background-repeat: no-repeat !important;
}

@media (max-width: 768px) {
    body.newdesign-home #RegistrationForms:not(.newdesign-forms) > .ui-content, body.newdesign-home #RegistrationFormsEdit > .ui-content { padding: 16px !important; }
    body.newdesign-home #RegistrationForms:not(.newdesign-forms) .ui-collapsible-content { padding: 10px !important; }
    body.newdesign-home #RegistrationForms:not(.newdesign-forms) .classroomFilterRow .ui-select, body.newdesign-home #RegistrationForms .classroomFilterRow select { width: 100%; }
}

/* ---- Forms: ported redesign (css/newdesign-forms.css styles #RegistrationForms.newdesign-forms) ----
   FormsController.showForm() adds .newdesign-forms only when the new design is on. */
/* the toolbar has "Create New Form", so the header "New" goes */
body.newdesign-home #RegistrationForms.newdesign-forms > .head .rightButtonInvite { display: none !important; }
/* forms waiting for approval stay visible in Form View too (approvers work from it) */
#RegistrationForms.newdesign-forms:not(.view-child-mode) .table-sticky.pending-forms-section { display: block !important; }
#RegistrationForms.newdesign-forms .pending-forms-section { margin-top: 24px !important; background: #fff; border: 1px solid #E2E4E9; border-radius: 14px; overflow: auto; }
#RegistrationForms.newdesign-forms .pending-forms-section > h3 {
    margin: 0 !important; padding: 14px 16px; text-align: left !important; color: #B45309 !important;
    font: 600 15px 'Inter', sans-serif; background: #FFFBEB; border-bottom: 1px solid #FDE68A;
}
#RegistrationForms.newdesign-forms .pending-forms-section table td span[style*="ff9800"] {
    display: inline-block; padding: 2px 10px; border-radius: 999px; background: #FEF3C7; color: #B45309 !important; font-size: 12px; font-weight: 600;
}
/* Download / Print All / Send Reminder (Child / Staff View) */
#RegistrationForms.newdesign-forms .action-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 4px !important; padding: 0 !important; }
#RegistrationForms.newdesign-forms .action-row .app-btn-primary {
    float: none !important; display: inline-flex !important; align-items: center; width: auto !important; top: 0 !important;
    height: 38px; margin: 0 !important; padding: 0 16px !important;
    background: #fff !important; border: 1px solid #E2E4E9 !important; border-radius: 8px !important;
    color: #20252D !important; text-shadow: none !important; box-shadow: none !important; font: 500 14px 'Inter', sans-serif !important;
}
#RegistrationForms.newdesign-forms .action-row .app-btn-primary:hover { background: #F6F7FA !important; }
#RegistrationForms.newdesign-forms .action-row #remainderpae { background: #2563D7 !important; border-color: #2563D7 !important; color: #fff !important; }
/* card menu: destructive item */
.nd-form-card-menu .nd-menu-item.nd-menu-danger, .nd-form-card-menu .nd-menu-item.nd-menu-danger span { color: #DC2626 !important; }
.nd-form-card-menu .nd-menu-item.nd-menu-danger { border-top: 1px solid #F0F1F4; }
/* printed marker next to a Completed badge */
#RegistrationForms.newdesign-forms .table-sticky td .p { font-size: 11px; color: #6B7381; text-shadow: none; margin-left: 4px; }
/* the per-child modal's Submit / approve buttons in the new design */
#RegistrationForms.newdesign-forms .form .submitForm {
    height: 40px; padding: 0 20px !important; border: none !important; border-radius: 8px !important;
    background: #2563D7 !important; color: #fff !important; text-shadow: none !important; box-shadow: none !important; font: 600 14px 'Inter', sans-serif !important;
}
#RegistrationForms.newdesign-forms .form .approveForm, #RegistrationForms.newdesign-forms .form .rejectForm {
    border: none !important; border-radius: 8px !important; text-shadow: none !important; box-shadow: none !important; font: 600 14px 'Inter', sans-serif !important; color: #fff !important;
}
#RegistrationForms.newdesign-forms .form .approveForm { background: #16A34A !important; }
#RegistrationForms.newdesign-forms .form .rejectForm { background: #DC2626 !important; }
#RegistrationForms.newdesign-forms button.fpdf.pdf {
    padding: 0 14px !important; height: 36px; border: 1px solid #2563D7 !important; border-radius: 8px !important;
    background: #fff !important; color: #2563D7 !important; text-shadow: none !important; box-shadow: none !important; font: 500 13px 'Inter', sans-serif !important;
}
/* Billing - weekly-charges "more (N)" row under the staff Pending Charges table */
body.newdesign-home #pcharges .nd-pc-more td { text-align: center; padding: 10px !important; border-top: 1px solid #F0F1F4; }
body.newdesign-home #pcharges .nd-pc-more a { color: #2563D7 !important; font-weight: 500; text-decoration: none; }
body.newdesign-home #pcharges .nd-pc-more a:hover { text-decoration: underline; }
/* Pending charges: rows behind "more (N)" (weekly-charges cap) and rows hidden by the Type filter stay
   hidden - the narrow-screen card layout above forces every row to display:block !important */
body.newdesign-home #billing #pcharges tr[data-weeklymore],
body.newdesign-home #billing #pcharges tr[data-chargeId][style*="display: none"] { display: none !important; }
/* Forms / Staff Forms (ported design): page gutter (the legacy content div has .noPadding) */
body.newdesign-home #RegistrationForms.newdesign-forms > .ui-content { padding: 20px 24px !important; box-sizing: border-box; }
@media (max-width: 768px) { body.newdesign-home #RegistrationForms.newdesign-forms > .ui-content { padding: 16px !important; } }
/* Download / Print All Forms / Send Reminder: one compact group of matching outlined buttons with icons,
   right-aligned (ids beat the legacy "#RegistrationForms #downloadtable.app-btn-primary" !important rules) */
body.newdesign-home #RegistrationForms.newdesign-forms .action-row {
    display: flex !important; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 0 0 4px !important; padding: 0 !important;
}
body.newdesign-home #RegistrationForms.newdesign-forms .action-row #downloadtable.app-btn-primary,
body.newdesign-home #RegistrationForms.newdesign-forms .action-row #printAllbutton.app-btn-primary,
body.newdesign-home #RegistrationForms.newdesign-forms .action-row #remainderpae.app-btn-primary {
    flex: 0 0 auto !important; display: inline-flex !important; align-items: center; gap: 8px;
    width: auto !important; min-width: 0 !important; height: 38px; min-height: 0 !important;
    margin: 0 !important; padding: 0 14px !important; top: 0 !important; transform: none !important;
    background: #fff !important; border: 1px solid #E2E4E9 !important; border-radius: 8px !important;
    color: #20252D !important; text-shadow: none !important; box-shadow: none !important;
    font: 500 14px/20px 'Inter', sans-serif !important; white-space: nowrap;
}
body.newdesign-home #RegistrationForms.newdesign-forms .action-row #downloadtable.app-btn-primary:hover,
body.newdesign-home #RegistrationForms.newdesign-forms .action-row #printAllbutton.app-btn-primary:hover,
body.newdesign-home #RegistrationForms.newdesign-forms .action-row #remainderpae.app-btn-primary:hover { background: #F6F7FA !important; border-color: #C9CDD6 !important; }
body.newdesign-home #RegistrationForms.newdesign-forms .action-row .app-btn-primary:before {
    content: ''; width: 18px; height: 18px; flex: none; background: no-repeat center / 18px 18px;
}
body.newdesign-home #RegistrationForms.newdesign-forms .action-row #downloadtable:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 20 20'%3E%3Cpath d='M3 13v2.5A1.5 1.5 0 004.5 17h11a1.5 1.5 0 001.5-1.5V13M10 3v10M6 9l4 4 4-4' stroke='%232563D7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.newdesign-home #RegistrationForms.newdesign-forms .action-row #printAllbutton:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 20 20'%3E%3Cpath d='M6 8V3h8v5M6 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h12a1 1 0 011 1v4a1 1 0 01-1 1h-2M6 12h8v5H6v-5z' stroke='%232563D7' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.newdesign-home #RegistrationForms.newdesign-forms .action-row #remainderpae:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 20 20'%3E%3Cpath d='M10 2.5a5 5 0 015 5c0 3 1.2 4.5 1.7 5H3.3c.5-.5 1.7-2 1.7-5a5 5 0 015-5zM8 16a2 2 0 004 0' stroke='%232563D7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (max-width: 768px) {
    body.newdesign-home #RegistrationForms.newdesign-forms .action-row { justify-content: stretch; }
    body.newdesign-home #RegistrationForms.newdesign-forms .action-row .app-btn-primary { flex: 1 1 auto !important; justify-content: center; }
}
/* Forms / Staff Forms (ported design): keep the toolbar clear of the fixed 60px header */
body.newdesign-home #RegistrationForms.newdesign-forms > .ui-content { margin-top: 60px !important; padding-top: 28px !important; }
@media (max-width: 768px) { body.newdesign-home #RegistrationForms.newdesign-forms > .ui-content { padding-top: 20px !important; } }
/* Forms / Staff Forms column chooser ("Select Forms to Display"): a global rule paints plain buttons
   green - restate this panel's buttons */
#ndColumnPanel .nd-col-reset, #ndColumnPanel .nd-col-reset:hover {
    display: inline-flex !important; align-items: center; gap: 6px; width: auto !important;
    margin: 0 !important; padding: 6px 8px !important; border-radius: 8px !important;
    background: transparent !important; border: none !important; box-shadow: none !important; text-shadow: none !important;
    color: #2563D7 !important; font: 500 13px 'Inter', sans-serif !important; cursor: pointer;
}
#ndColumnPanel .nd-col-reset:hover { background: #EEF3FD !important; }
#ndColumnPanel .nd-col-close, #ndColumnPanel .nd-col-close:hover {
    width: 36px !important; height: 36px; padding: 0 !important; margin: 0 !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    background: transparent !important; border: none !important; border-radius: 8px !important; box-shadow: none !important;
}
#ndColumnPanel .nd-col-close:hover { background: #F6F7FA !important; }
#ndColumnPanel .nd-col-cancel, #ndColumnPanel .nd-col-cancel:hover {
    background: #fff !important; border: 1px solid #E2E4E9 !important; color: #20252D !important; text-shadow: none !important; box-shadow: none !important;
}
#ndColumnPanel .nd-col-cancel:hover { background: #F6F7FA !important; }
#ndColumnPanel .nd-col-apply, #ndColumnPanel .nd-col-apply:hover {
    background: #2563D7 !important; border: 1px solid #2563D7 !important; color: #fff !important; text-shadow: none !important; box-shadow: none !important;
}
#ndColumnPanel .nd-col-apply:hover { background: #1D4ED8 !important; }
#ndColumnPanel input[type=checkbox] { accent-color: #2563D7; }
/* Download / Print All / Send Reminder belong to Child / Staff View only (the flex rule above beat the
   Form View hide in newdesign-forms.css) */
body.newdesign-home #RegistrationForms.newdesign-forms:not(.view-child-mode) .action-row { display: none !important; }

/* =============================================================================================
 * Injury Report (#IncidentReport, IncidentController2) and its editor (#IncidentReportEdit) -
 * new design. CSS only: report forms + "Filled injury reports" search + filled reports as cards;
 * every button / link keeps its markup and handler.
 * ============================================================================================= */
body.newdesign-home #IncidentReport, body.newdesign-home #IncidentReportEdit { background: #F6F7FA !important; }
body.newdesign-home #IncidentReport > .ui-content, body.newdesign-home #IncidentReportEdit > .ui-content {
    background: transparent !important; margin-top: 60px !important; padding: 24px !important; box-sizing: border-box;
    max-width: 1100px; margin-left: auto !important; margin-right: auto !important;
    font-family: 'Inter', sans-serif; color: #20252D;
}
/* header New / Save -> blue button, vertically centred */
body.newdesign-home #IncidentReport > .head .rightButtonInvite, body.newdesign-home #IncidentReportEdit > .head .rightButtonInvite {
    top: 0 !important; bottom: 0 !important; right: 16px !important; width: auto !important; height: auto !important;
    margin: 0 !important; transform: none !important; display: flex !important; align-items: center; line-height: normal !important;
}
body.newdesign-home #IncidentReport > .head .rightButtonInvitediv, body.newdesign-home #IncidentReportEdit > .head .rightButtonInvitediv {
    display: flex; align-items: center; justify-content: center; width: auto !important; height: 32px !important; padding: 0 16px;
    box-sizing: border-box; background: #2563D7 !important; border: none !important; border-radius: 8px !important;
}
body.newdesign-home #IncidentReport > .head .rightButtonInvitediv:hover, body.newdesign-home #IncidentReportEdit > .head .rightButtonInvitediv:hover { background: #1D4ED8 !important; }
body.newdesign-home #IncidentReport > .head .rightButtonInvitediv p, body.newdesign-home #IncidentReportEdit > .head .rightButtonInvitediv p {
    width: auto !important; height: auto !important; margin: 0 !important; color: #fff !important;
    font-size: 14px !important; font-weight: 600 !important; line-height: 20px !important;
}

/* report forms + filled reports: one card each */
body.newdesign-home #IncidentReport .ui-content > .ui-collapsible-set { margin: 0 !important; display: flex; flex-direction: column; gap: 10px; }
body.newdesign-home #IncidentReport .ui-collapsible-set > .ui-collapsible {
    margin: 0 !important; border: 1px solid #E2E4E9 !important; border-radius: 14px !important; overflow: hidden;
    background: #fff; box-shadow: none !important;
}
body.newdesign-home #IncidentReport .ui-collapsible-set > .incident-results { margin-top: 0 !important; }
body.newdesign-home #IncidentReport .ui-collapsible-heading { margin: 0 !important; }
body.newdesign-home #IncidentReport .ui-collapsible-heading-toggle {
    position: relative; display: block; margin: 0 !important; padding: 16px 20px 16px 50px !important;
    background: #fff !important; border: none !important; border-radius: 0 !important; box-shadow: none !important;
    font: 500 15px/22px 'Inter', sans-serif !important; color: #20252D !important; text-shadow: none !important; white-space: normal !important;
}
body.newdesign-home #IncidentReport .ui-collapsible-heading-toggle:has(span > a.ui-btn) { padding-right: 170px !important; }
body.newdesign-home #IncidentReport .incident-results .ui-collapsible-heading-toggle:has(span > a.ui-btn) { padding-right: 60px !important; }
body.newdesign-home #IncidentReport .ui-collapsible-heading-toggle:hover { background: #FAFBFC !important; }
body.newdesign-home #IncidentReport .ui-collapsible:not(.ui-collapsible-collapsed) > .ui-collapsible-heading > .ui-collapsible-heading-toggle { border-bottom: 1px solid #F0F1F4 !important; }
body.newdesign-home #IncidentReport .ui-collapsible-heading-toggle:after {
    left: 18px !important; width: 20px !important; height: 20px !important; margin-top: -10px !important;
    background-color: transparent !important; border-radius: 0 !important; background-size: 20px 20px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E%3Cpath d='M7.5 5l5 5-5 5' stroke='%23525966' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    transition: transform 0.15s;
}
body.newdesign-home #IncidentReport .ui-collapsible:not(.ui-collapsible-collapsed) > .ui-collapsible-heading > .ui-collapsible-heading-toggle:after { transform: rotate(90deg); }
/* filled report heading: form / child + adult / date lines */
body.newdesign-home #IncidentReport .incident-results .ui-collapsible-heading-toggle { font-weight: 400 !important; color: #525966 !important; line-height: 21px !important; }
/* manager icons (down / up / edit; delete on filled reports): outlined squares */
body.newdesign-home #IncidentReport .ui-collapsible-heading-toggle span > a.ui-btn {
    top: 50% !important; margin-top: -16px !important; width: 32px !important; height: 32px !important; padding: 0 !important;
    background: #fff !important; border: 1px solid #E2E4E9 !important; border-radius: 8px !important; box-shadow: none !important;
}
body.newdesign-home #IncidentReport .ui-collapsible-heading-toggle span > a.ui-btn:hover { background: #F6F7FA !important; }
body.newdesign-home #IncidentReport .ui-collapsible-heading-toggle span > a.ui-btn:after { background-color: transparent !important; filter: brightness(0) opacity(0.55); }
body.newdesign-home #IncidentReport .ui-icon-delete:after, body.newdesign-home #IncidentReportEdit .ui-icon-delete:after {
    filter: none !important; background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 20 20'%3E%3Cpath d='M3.5 5.5h13M8 5.5V4a1 1 0 011-1h2a1 1 0 011 1v1.5M5 5.5l.8 10.6a1 1 0 001 .9h6.4a1 1 0 001-.9L15 5.5M8.5 9v5M11.5 9v5' stroke='%23525966' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-position: center center !important; background-size: 16px 16px !important; background-repeat: no-repeat !important;
}
body.newdesign-home #IncidentReport .ui-collapsible-heading-toggle span > a.ui-icon-delete:hover { background: #FEF2F2 !important; border-color: #FECACA !important; }
/* "Publish to parents" */
body.newdesign-home #IncidentReport .confirm {
    display: inline-block; position: static !important; margin: 8px 0 0 !important; padding: 4px 12px !important;
    background: #EEF3FD !important; color: #2563D7 !important; border-radius: 999px !important;
    font: 600 13px 'Inter', sans-serif; text-decoration: none !important; text-shadow: none !important;
}
body.newdesign-home #IncidentReport .confirm:hover { background: #DCE6FB !important; }
/* expanded body */
body.newdesign-home #IncidentReport .ui-collapsible-content {
    background: #fff !important; border: none !important; padding: 16px 20px 20px !important; font-family: 'Inter', sans-serif;
}
body.newdesign-home #IncidentReport .ui-collapsible-content > div:first-child { display: flex; align-items: center; gap: 10px; font-weight: 500; margin-bottom: 12px; }
body.newdesign-home #IncidentReport .ui-collapsible-content .ui-select { margin: 0 !important; flex: 0 1 320px; }
body.newdesign-home #IncidentReport .ui-select .ui-btn, body.newdesign-home #IncidentReport select.childId {
    height: 38px !important; padding: 0 36px 0 12px !important; line-height: 36px; text-align: left;
    background: #fff !important; border: 1px solid #E2E4E9 !important; border-radius: 8px !important; box-shadow: none !important;
    color: #20252D !important; text-shadow: none !important; font: 400 14px/36px 'Inter', sans-serif !important;
}
body.newdesign-home #IncidentReport .ui-select .ui-btn:after { background-color: transparent !important; filter: brightness(0) opacity(0.55); }
body.newdesign-home #IncidentReport .form .submitForm {
    height: 40px; padding: 0 20px !important; border: none !important; border-radius: 8px !important;
    background: #2563D7 !important; color: #fff !important; text-shadow: none !important; box-shadow: none !important; font: 600 14px 'Inter', sans-serif !important;
}
body.newdesign-home #IncidentReport .form .submitForm:hover { background: #1D4ED8 !important; }
body.newdesign-home #IncidentReport .form a.ui-icon-print {
    width: 40px !important; height: 40px !important; padding: 0 !important;
    background: #fff !important; border: 1px solid #E2E4E9 !important; border-radius: 8px !important; box-shadow: none !important;
}
body.newdesign-home #IncidentReport .form a.ui-icon-print:after { background-color: transparent !important; filter: brightness(0) opacity(0.55); }
body.newdesign-home #IncidentReport button.fpdf.pdf {
    padding: 0 14px !important; height: 36px; border: 1px solid #2563D7 !important; border-radius: 8px !important;
    background: #fff !important; color: #2563D7 !important; text-shadow: none !important; box-shadow: none !important; font: 500 13px 'Inter', sans-serif !important;
}
/* "Filled injury reports" search card */
body.newdesign-home #IncidentReport .topIncidentDiv {
    margin: 14px 0 0 !important; padding: 16px 20px; background: #fff; border: 1px solid #E2E4E9; border-radius: 14px;
}
body.newdesign-home #IncidentReport .topIncidentDiv > div:first-child { margin: 0 0 12px !important; font: 600 16px 'Inter', sans-serif !important; color: #20252D; }
body.newdesign-home #IncidentReport #searchcontainer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; overflow: visible !important; }
body.newdesign-home #IncidentReport #searchcontainer .ui-input-text, body.newdesign-home #IncidentReport #searchcontainer .ui-select {
    float: none !important; flex: 1 1 160px; width: auto !important; margin: 0 !important;
}
body.newdesign-home #IncidentReport #searchcontainer .ui-input-text {
    background: #fff !important; border: 1px solid #E2E4E9 !important; border-radius: 8px !important; box-shadow: none !important;
}
body.newdesign-home #IncidentReport #searchcontainer .ui-input-text input {
    height: 38px; padding: 0 12px !important; font: 400 14px 'Inter', sans-serif !important; color: #20252D !important;
}
body.newdesign-home #IncidentReport #searchcontainer #search, body.newdesign-home #IncidentReport #searchcontainer .ui-btn:has(#search) {
    float: none !important; flex: 0 0 auto; width: auto !important; top: 0 !important; height: 38px; margin: 0 !important; padding: 0 20px !important;
    background: #2563D7 !important; border: none !important; border-radius: 8px !important; color: #fff !important;
    text-shadow: none !important; box-shadow: none !important; font: 600 14px 'Inter', sans-serif !important;
}
body.newdesign-home #IncidentReport #searchcontainer #search:hover { background: #1D4ED8 !important; }

/* editor */
body.newdesign-home #IncidentReportEdit > .ui-content > .ui-input-text {
    width: 100% !important; margin: 0 0 12px !important; background: #fff !important;
    border: 1px solid #E2E4E9 !important; border-radius: 10px !important; box-shadow: none !important;
}
body.newdesign-home #IncidentReportEdit #formname { height: 44px; padding: 0 14px !important; font: 500 15px 'Inter', sans-serif !important; color: #20252D !important; }
body.newdesign-home #IncidentReportEdit > .ui-content > button {
    margin: 0 6px 8px 0 !important; height: 34px; padding: 0 12px !important; display: inline-flex !important; align-items: center; width: auto !important;
    background: #fff !important; border: 1px solid #C7D7F8 !important; border-radius: 999px !important; box-shadow: none !important;
    color: #2563D7 !important; text-shadow: none !important; font: 500 13px 'Inter', sans-serif !important;
}
body.newdesign-home #IncidentReportEdit > .ui-content > button:hover { background: #EEF3FD !important; }
body.newdesign-home #IncidentReportEdit #formHtml {
    margin: 8px 0 0 !important; padding: 16px 20px 16px 52px; background: #fff; border: 1px solid #E2E4E9; border-radius: 14px; box-sizing: border-box;
}
body.newdesign-home #IncidentReportEdit .staffarea h3, body.newdesign-home #IncidentReportEdit .parentsarea h3 {
    background: #F6F7FA !important; border-radius: 8px; padding: 8px 12px !important; font: 600 14px 'Inter', sans-serif !important; color: #525966 !important;
}
body.newdesign-home #IncidentReportEdit .staffarea hr, body.newdesign-home #IncidentReportEdit .parentsarea hr { border: none; border-top: 1px solid #F0F1F4; }
body.newdesign-home #IncidentReportEdit [contenteditable] {
    outline: none !important; border: 1px solid #E2E4E9 !important; border-radius: 8px; padding: 8px 10px !important;
    font: 400 14px/20px 'Inter', sans-serif; color: #20252D; box-sizing: border-box;
}
body.newdesign-home #IncidentReportEdit [contenteditable]:focus { border-color: #2563D7 !important; box-shadow: 0 0 0 3px rgba(37, 99, 215, 0.12); }
body.newdesign-home #IncidentReportEdit #formHtml .ui-input-text { border-radius: 8px !important; box-shadow: none !important; border-color: #E2E4E9 !important; }
body.newdesign-home #IncidentReportEdit #formHtml .ui-btn-icon-notext {
    background: #fff !important; border: 1px solid #E2E4E9 !important; border-radius: 6px !important; box-shadow: none !important;
}
body.newdesign-home #IncidentReportEdit #formHtml .ui-btn-icon-notext:not(.ui-icon-delete):after { background-color: transparent !important; filter: brightness(0) opacity(0.55); }
body.newdesign-home #IncidentReportEdit .signature { border-color: #E2E4E9 !important; border-radius: 8px; }

@media (max-width: 768px) {
    body.newdesign-home #IncidentReport > .ui-content, body.newdesign-home #IncidentReportEdit > .ui-content { padding: 16px !important; }
    body.newdesign-home #IncidentReport .ui-collapsible-content { padding: 12px !important; }
    body.newdesign-home #IncidentReport #searchcontainer .ui-input-text, body.newdesign-home #IncidentReport #searchcontainer .ui-select { flex: 1 1 100%; }
    body.newdesign-home #IncidentReport #searchcontainer #search, body.newdesign-home #IncidentReport #searchcontainer .ui-btn:has(#search) { flex: 1 1 100%; }
    body.newdesign-home #IncidentReportEdit #formHtml { padding: 12px 12px 12px 44px; }
}
/* Print button inside a form (Injury Report + Forms): the legacy icon is an image (img/save.svg), which the
   grey-out filter turned into a solid blob - draw the printer instead */
body.newdesign-home #IncidentReport .form .ui-icon-print:after,
body.newdesign-home #RegistrationForms .form .ui-icon-print:after {
    filter: none !important; background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E%3Cpath d='M6 8V3h8v5M6 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h12a1 1 0 011 1v4a1 1 0 01-1 1h-2M6 12h8v5H6v-5z' stroke='%23525966' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-position: center center !important; background-size: 20px 20px !important; background-repeat: no-repeat !important;
    width: 22px !important; height: 22px !important; margin: -11px 0 0 -11px !important; border-radius: 0 !important;
}
/* Forms status slide-in: the "Form Tracking" table scrolls sideways on phones instead of squeezing */
@media (max-width: 768px) {
    #ndFormDetailPage .nd-tracking-table-wrapper {
        overflow-x: auto !important; -webkit-overflow-scrolling: touch; max-width: 100%;
    }
    #ndFormDetailPage .nd-tracking-table { min-width: 560px; width: 100%; }
    #ndFormDetailPage .nd-tracking-table th, #ndFormDetailPage .nd-tracking-table td { white-space: nowrap; }
}

/* =============================================================================================
 * Lessons (#LessonsControl, #LessonsReports, #LessonsReportA/B, #Lessons, #LessonsEdit, #Lesson,
 * #LessonsPlan, #LessonsPlanEdit, #LessonPlan - LessonsController) and Settings (#Settings and its
 * sub-pages #ChangePassword, #frameslist, #SchoolSettings, #frameChildrenFields, #RestoreClasses,
 * #CovidSettings, #AddQuestionnaires) - new design. CSS only; all ids / handlers untouched.
 * ============================================================================================= */
body.newdesign-home :is(#LessonsControl, #LessonsReports, #LessonsReportA, #LessonsReportB, #Lessons, #LessonsEdit, #Lesson, #LessonsPlan, #LessonsPlanEdit, #LessonPlan,
    #Settings, #ChangePassword, #frameslist, #SchoolSettings, #frameChildrenFields, #RestoreClasses, #CovidSettings, #AddQuestionnaires) {
    background: #F6F7FA !important;
}
body.newdesign-home :is(#LessonsControl, #LessonsReports, #LessonsReportA, #LessonsReportB, #Lessons, #LessonsEdit, #Lesson, #LessonsPlan, #LessonsPlanEdit, #LessonPlan,
    #Settings, #ChangePassword, #frameslist, #SchoolSettings, #frameChildrenFields, #RestoreClasses, #CovidSettings, #AddQuestionnaires) > .ui-content {
    background: transparent !important; margin-top: 60px !important; padding: 24px !important; box-sizing: border-box;
    width: 100% !important; max-width: 1100px !important; margin-left: auto !important; margin-right: auto !important;
    font-family: 'Inter', sans-serif; color: #20252D; overflow-x: visible !important;
}
body.newdesign-home :is(#Settings, #ChangePassword, #SchoolSettings, #frameChildrenFields, #RestoreClasses, #CovidSettings, #LessonsControl, #LessonsReports) > .ui-content { max-width: 680px !important; }

/* header New / Save -> blue button, vertically centred (inline widths beaten with !important) */
body.newdesign-home :is(#Lessons, #LessonsEdit, #Lesson, #LessonsPlan, #LessonsPlanEdit, #frameChildrenFields, #CovidSettings, #AddQuestionnaires) > .head .rightButtonInvite {
    top: 0 !important; bottom: 0 !important; right: 16px !important; width: auto !important; height: auto !important;
    margin: 0 !important; transform: none !important; align-items: center; line-height: normal !important;
}
body.newdesign-home :is(#Lessons, #LessonsEdit, #Lesson, #LessonsPlan, #LessonsPlanEdit, #frameChildrenFields, #CovidSettings, #AddQuestionnaires) > .head .rightButtonInvite:not([style*="display: none"]) { display: flex !important; }
body.newdesign-home :is(#Lessons, #LessonsEdit, #Lesson, #LessonsPlan, #LessonsPlanEdit, #frameChildrenFields, #CovidSettings, #AddQuestionnaires) > .head .rightButtonInvitediv {
    display: flex; align-items: center; justify-content: center; width: auto !important; height: 32px !important; padding: 0 16px;
    box-sizing: border-box; background: #2563D7 !important; border: none !important; border-radius: 8px !important;
}
body.newdesign-home :is(#Lessons, #LessonsEdit, #Lesson, #LessonsPlan, #LessonsPlanEdit, #frameChildrenFields, #CovidSettings, #AddQuestionnaires) > .head .rightButtonInvitediv:hover { background: #1D4ED8 !important; }
body.newdesign-home :is(#Lessons, #LessonsEdit, #Lesson, #LessonsPlan, #LessonsPlanEdit, #frameChildrenFields, #CovidSettings, #AddQuestionnaires) > .head .rightButtonInvitediv p {
    width: auto !important; height: auto !important; margin: 0 !important; color: #fff !important;
    font-size: 14px !important; font-weight: 600 !important; line-height: 20px !important;
}

/* ---------- shared controls on these pages ---------- */
/* text / date / search inputs (jQM wrapper) */
body.newdesign-home :is(#LessonsReportA, #Lessons, #LessonsEdit, #Lesson, #LessonsPlan, #LessonsPlanEdit, #ChangePassword, #frameChildrenFields) .ui-content .ui-input-text,
body.newdesign-home :is(#LessonsReportA, #Lessons, #LessonsEdit, #Lesson, #LessonsPlan, #LessonsPlanEdit, #ChangePassword, #frameChildrenFields) .ui-content .ui-input-search {
    background: #fff !important; border: 1px solid #E2E4E9 !important; border-radius: 8px !important; box-shadow: none !important;
}
body.newdesign-home :is(#LessonsReportA, #Lessons, #LessonsEdit, #Lesson, #LessonsPlan, #LessonsPlanEdit, #ChangePassword, #frameChildrenFields) .ui-content .ui-input-text.ui-focus,
body.newdesign-home :is(#LessonsReportA, #Lessons, #LessonsEdit, #Lesson, #LessonsPlan, #LessonsPlanEdit, #ChangePassword, #frameChildrenFields) .ui-content .ui-input-search.ui-focus { border-color: #2563D7 !important; }
body.newdesign-home :is(#LessonsReportA, #Lessons, #LessonsEdit, #Lesson, #LessonsPlan, #LessonsPlanEdit, #ChangePassword, #frameChildrenFields) .ui-content :is(input, textarea) {
    font: 400 14px/20px 'Inter', sans-serif !important; color: #20252D !important;
}
/* selects (jQM wrapper) */
body.newdesign-home :is(#LessonsReportA, #Lessons, #LessonsEdit, #Lesson, #LessonsPlan, #LessonsPlanEdit, #Settings, #CovidSettings) .ui-content .ui-select .ui-btn {
    background: #fff !important; border: 1px solid #E2E4E9 !important; border-radius: 8px !important; box-shadow: none !important;
    color: #20252D !important; text-shadow: none !important; font: 400 14px 'Inter', sans-serif !important; text-align: left;
}
body.newdesign-home :is(#LessonsReportA, #Lessons, #LessonsEdit, #Lesson, #LessonsPlan, #LessonsPlanEdit, #Settings, #CovidSettings) .ui-content .ui-select .ui-btn:after { background-color: transparent !important; filter: brightness(0) opacity(0.55); }
/* "No found" status */
body.newdesign-home :is(#LessonsReportA, #Lessons, #LessonsPlan) #status {
    background: #fff !important; border: 1px solid #E2E4E9; border-radius: 12px !important; padding: 20px !important;
    color: #6B7381 !important; font-weight: 400 !important; font-size: 14px;
}
/* list tables (first row = column titles) */
body.newdesign-home :is(#LessonsReportA, #Lessons, #LessonsPlan) .ui-content > table,
body.newdesign-home :is(#LessonsPlanEdit, #LessonPlan) #dayLessons {
    width: 100%; margin: 12px 0 0 !important; border-collapse: separate !important; border-spacing: 0;
    background: #fff !important; color: #20252D !important; box-shadow: none !important;
    border: 1px solid #E2E4E9; border-radius: 12px; overflow: hidden; font: 400 14px/20px 'Inter', sans-serif;
}
body.newdesign-home :is(#LessonsReportA, #Lessons, #LessonsPlan) .ui-content > table td,
body.newdesign-home :is(#LessonsPlanEdit, #LessonPlan) #dayLessons td {
    border: none !important; border-bottom: 1px solid #F0F1F4 !important; padding: 10px 14px !important; vertical-align: middle;
}
body.newdesign-home :is(#LessonsReportA, #Lessons, #LessonsPlan) .ui-content > table tr:last-child td,
body.newdesign-home :is(#LessonsPlanEdit, #LessonPlan) #dayLessons tr:last-child td { border-bottom: none !important; }
body.newdesign-home :is(#LessonsReportA, #Lessons, #LessonsPlan) .ui-content > table tr:first-child td {
    background: #F6F7FA !important; color: #6B7381 !important; font-size: 12px !important; font-weight: 600 !important;
    letter-spacing: 0.3px; border-bottom: 1px solid #E2E4E9 !important;
}
body.newdesign-home :is(#Lessons, #LessonsPlan) .ui-content > table tr:not(:first-child) { cursor: pointer; }
body.newdesign-home :is(#Lessons, #LessonsPlan) .ui-content > table tr:not(:first-child):hover td { background: #FAFBFC; }
body.newdesign-home :is(#Lessons, #LessonsPlan) .ui-content > table tr:not(:first-child) td:first-child { font-weight: 500; }
/* row icon buttons (print / delete / edit / copy / approve) -> outlined squares */
body.newdesign-home :is(#Lessons, #LessonsPlan, #LessonsReportA, #LessonsPlanEdit, #frameChildrenFields) .ui-content a.ui-btn-icon-notext,
body.newdesign-home :is(#Lessons, #LessonsPlan, #LessonsReportA, #LessonsPlanEdit, #frameChildrenFields) .ui-content button.ui-btn-icon-notext {
    width: 32px !important; height: 32px !important; padding: 0 !important; margin: 0 0 0 6px !important;
    background: #fff !important; background-color: #fff !important; border: 1px solid #E2E4E9 !important; border-radius: 8px !important; box-shadow: none !important;
}
body.newdesign-home :is(#Lessons, #LessonsPlan, #LessonsReportA, #LessonsPlanEdit, #frameChildrenFields) .ui-content a.ui-btn-icon-notext:hover,
body.newdesign-home :is(#Lessons, #LessonsPlan, #LessonsReportA, #LessonsPlanEdit, #frameChildrenFields) .ui-content button.ui-btn-icon-notext:hover { background: #F6F7FA !important; }
body.newdesign-home :is(#Lessons, #LessonsPlan, #LessonsReportA, #LessonsPlanEdit, #frameChildrenFields) .ui-content .ui-btn-icon-notext:not(.ui-icon-delete):after { background-color: transparent !important; filter: brightness(0) opacity(0.55); }
body.newdesign-home :is(#Lessons, #LessonsPlan, #LessonsReportA, #LessonsPlanEdit, #LessonPlan, #frameChildrenFields, #AddQuestionnaires) .ui-icon-delete:after {
    filter: none !important; background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 20 20'%3E%3Cpath d='M3.5 5.5h13M8 5.5V4a1 1 0 011-1h2a1 1 0 011 1v1.5M5 5.5l.8 10.6a1 1 0 001 .9h6.4a1 1 0 001-.9L15 5.5M8.5 9v5M11.5 9v5' stroke='%23525966' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-position: center center !important; background-size: 16px 16px !important; background-repeat: no-repeat !important;
}
body.newdesign-home :is(#Lessons, #LessonsPlan, #LessonsPlanEdit, #frameChildrenFields) .ui-content .ui-icon-delete:hover { background: #FEF2F2 !important; border-color: #FECACA !important; }
body.newdesign-home :is(#Lessons, #LessonsPlan) .ui-content > table td a.ui-btn-icon-notext { float: none !important; display: inline-block !important; vertical-align: middle; }
body.newdesign-home :is(#Lessons, #LessonsPlan) .ui-content > table td:last-child { white-space: nowrap; text-align: right; width: auto !important; max-width: none !important; }

/* ---------- menu-style pages: Lesson Panel, Lesson Reports, Settings + its sub-menus ---------- */
/* each button -> a white row card with a chevron */
body.newdesign-home :is(#LessonsControl, #LessonsReports) .ui-content > button,
body.newdesign-home :is(#Settings, #SchoolSettings) .ui-content .ui-input-btn,
body.newdesign-home #SchoolSettings .ui-content > button,
body.newdesign-home #CovidSettings .ui-content button.qbuttons {
    position: relative; display: flex !important; align-items: center; width: 100% !important; box-sizing: border-box;
    min-height: 54px; margin: 0 0 10px !important; padding: 0 44px 0 18px !important; text-align: left !important;
    background: #fff !important; border: 1px solid #E2E4E9 !important; border-radius: 12px !important;
    box-shadow: none !important; text-shadow: none !important; color: #20252D !important;
    font: 500 15px 'Inter', sans-serif !important; cursor: pointer;
}
body.newdesign-home :is(#LessonsControl, #LessonsReports) .ui-content > button:hover,
body.newdesign-home :is(#Settings, #SchoolSettings) .ui-content .ui-input-btn:hover,
body.newdesign-home #SchoolSettings .ui-content > button:hover,
body.newdesign-home #CovidSettings .ui-content button.qbuttons:hover { background: #FAFBFC !important; border-color: #C9CDD6 !important; }
body.newdesign-home :is(#LessonsControl, #LessonsReports) .ui-content > button:after,
body.newdesign-home :is(#Settings, #SchoolSettings) .ui-content .ui-input-btn:after,
body.newdesign-home #SchoolSettings .ui-content > button:after,
body.newdesign-home #CovidSettings .ui-content button.qbuttons:after {
    content: ''; position: absolute; right: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
    background: no-repeat center / 18px 18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E%3Cpath d='M7.5 5l5 5-5 5' stroke='%23A0A5B1' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    border: none !important;
}
body.newdesign-home :is(#Settings, #SchoolSettings) .ui-content .ui-input-btn input { cursor: pointer; }
/* Settings: language row as a card, Delete My Account in red, version line muted */
body.newdesign-home #Settings .ui-content .ui-field-contain {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    margin: 0 0 16px !important; padding: 12px 16px !important; background: #fff; border: 1px solid #E2E4E9 !important; border-radius: 12px;
}
body.newdesign-home #Settings .ui-content .ui-field-contain > label { margin: 0 !important; font: 500 15px 'Inter', sans-serif !important; color: #20252D !important; width: auto !important; float: none !important; }
body.newdesign-home #Settings .ui-content .ui-field-contain .ui-select { margin: 0 !important; flex: 0 1 240px; width: auto !important; float: none !important; }
body.newdesign-home #Settings .ui-content #removeUserLink {
    width: 100% !important; min-height: 50px; margin: 16px 0 0 !important; justify-content: center;
    background: #fff !important; border: 1px solid #FECACA !important; border-radius: 12px !important;
    color: #DC2626 !important; text-shadow: none !important; box-shadow: none !important; font: 600 14px 'Inter', sans-serif !important;
}
body.newdesign-home #Settings .ui-content #removeUserLink:hover { background: #FEF2F2 !important; }
body.newdesign-home #Settings > div[style*="300px"] { color: #6B7381; font: 400 13px 'Inter', sans-serif; padding-bottom: 24px; }

/* School Settings / COVID settings: label + switch rows as cards */
body.newdesign-home :is(#SchoolSettings, #CovidSettings) #forSchoolSettings,
body.newdesign-home #CovidSettings #ReminderSettings,
body.newdesign-home #CovidSettings #PickUpNotificationsDiv {
    background: #fff; border: 1px solid #E2E4E9; border-radius: 12px; padding: 8px 18px; margin: 0 0 12px; text-align: left;
}
body.newdesign-home :is(#SchoolSettings, #CovidSettings) label.allowComment,
body.newdesign-home :is(#SchoolSettings, #CovidSettings) label.showDailySheet {
    display: inline-block; margin: 14px 12px 0 0 !important; font: 500 14px 'Inter', sans-serif !important; color: #20252D !important;
}
body.newdesign-home :is(#SchoolSettings, #CovidSettings) .ui-slider-switch.ui-bar-inherit { border-radius: 999px !important; box-shadow: none !important; }
body.newdesign-home :is(#SchoolSettings, #CovidSettings) .ui-slider-switch .ui-slider-label-a { background: #2563D7 !important; text-shadow: none !important; }

/* Change Password: one card form */
body.newdesign-home #ChangePassword .ui-content {
    background: #fff !important; border: 1px solid #E2E4E9; border-radius: 16px; max-width: 520px !important; margin-top: 84px !important;
}
body.newdesign-home #ChangePassword .ui-content label { display: block; margin: 12px 0 6px !important; font: 500 14px 'Inter', sans-serif !important; color: #525966 !important; }
body.newdesign-home #ChangePassword .ui-content .resetPassText { color: #525966 !important; }
body.newdesign-home #ChangePassword .ui-content .ui-input-btn {
    margin: 20px 0 0 !important; height: 44px; background: #2563D7 !important; border: none !important; border-radius: 10px !important;
    color: #fff !important; text-shadow: none !important; box-shadow: none !important; font: 600 15px 'Inter', sans-serif !important;
}
body.newdesign-home #ChangePassword .ui-content .ui-input-btn:hover { background: #1D4ED8 !important; }

/* Restore Classes: rows card + Restore button */
body.newdesign-home #RestoreClasses #restoreList { background: #fff; border: 1px solid #E2E4E9; border-radius: 12px; overflow: hidden; }
body.newdesign-home #RestoreClasses .restoreRow { border-bottom: 1px solid #F0F1F4 !important; padding: 14px 16px !important; }
body.newdesign-home #RestoreClasses .restoreRow:last-child { border-bottom: none !important; }
body.newdesign-home #RestoreClasses .restoreRow .restoreBtn {
    height: 34px; padding: 0 16px !important; background: #fff !important; border: 1px solid #2563D7 !important; border-radius: 8px !important;
    color: #2563D7 !important; text-shadow: none !important; box-shadow: none !important; font: 500 13px 'Inter', sans-serif !important;
}
body.newdesign-home #RestoreClasses .restoreRow .restoreBtn:hover { background: #EEF3FD !important; }

/* Child data fields (School Settings -> Add data field) */
body.newdesign-home #frameChildrenFields .ui-content #addField,
body.newdesign-home #frameChildrenFields .ui-content .ui-btn:has(#addField) {
    height: 38px; padding: 0 16px !important; margin: 0 0 8px !important; width: auto !important; display: inline-flex !important; align-items: center;
    background: #fff !important; border: 1px solid #C7D7F8 !important; border-radius: 999px !important; color: #2563D7 !important;
    text-shadow: none !important; box-shadow: none !important; font: 500 14px 'Inter', sans-serif !important;
}

/* Teacher entrance (classes list, View.FaceTagList) */
body.newdesign-home #frameslist ul.ui-listview { background: #fff; border: 1px solid #E2E4E9; border-radius: 14px; overflow: hidden; margin: 0 !important; }
body.newdesign-home #frameslist li.invContainer { border-bottom: 1px solid #F0F1F4 !important; background: #fff; }
body.newdesign-home #frameslist li.invContainer:hover { background: #FAFBFC; }
body.newdesign-home #frameslist .invText h4 { font: 600 15px 'Inter', sans-serif !important; color: #20252D !important; text-shadow: none !important; }
body.newdesign-home #frameslist .invLeftFaceTag img { border-radius: 50%; object-fit: cover; }
body.newdesign-home #frameslist .faceTagListMenuButtons { margin: 0 0 12px !important; }
body.newdesign-home #frameslist .faceTagListMenuButtons .ui-btn {
    background: #fff !important; border: 1px solid #E2E4E9 !important; border-radius: 10px !important; box-shadow: none !important;
    color: #20252D !important; text-shadow: none !important; font: 500 14px 'Inter', sans-serif !important;
}

/* ---------- Lessons: filters, editor, reports, week grid ---------- */
body.newdesign-home :is(#Lessons, #LessonsPlan, #LessonsReportA) .ui-content > .ui-input-search,
body.newdesign-home :is(#Lessons, #LessonsPlan, #LessonsReportA) .ui-content > .ui-input-text,
body.newdesign-home :is(#Lessons, #LessonsPlan, #LessonsReportA) .ui-content > .ui-select { vertical-align: middle; margin: 0 8px 8px 0 !important; }
/* lesson / plan editor and viewer: one white card of fields */
body.newdesign-home :is(#LessonsEdit, #Lesson, #LessonsPlanEdit, #LessonPlan) .ui-content > :is(.category, .theme, .age, .location, .gs, .duration, .materialsNeeded) { margin: 6px 0 !important; }
body.newdesign-home :is(#LessonsEdit, #Lesson, #LessonsPlanEdit, #LessonPlan) .lessonFormHead,
body.newdesign-home :is(#Lesson, #LessonPlan) .lessonHead { font: 500 14px 'Inter', sans-serif !important; color: #525966 !important; }
body.newdesign-home :is(#LessonsEdit, #Lesson, #LessonPlan) :is(#allclasses, #allMilestone, .des) {
    background: #fff !important; border: 1px solid #E2E4E9 !important; border-radius: 10px !important; box-shadow: none !important;
}
body.newdesign-home :is(#LessonsEdit, #Lesson) :is(#cc, #am) { color: #2563D7 !important; font: 500 14px 'Inter', sans-serif; text-decoration: none !important; }
/* week grid */
body.newdesign-home :is(#LessonsPlanEdit, #LessonPlan) #daysArr { background: #fff; border: 1px solid #E2E4E9; border-radius: 14px; padding: 10px; margin: 12px 0 !important; }
body.newdesign-home :is(#LessonsPlanEdit, #LessonPlan) .day {
    border-radius: 10px !important; background: #fff !important; border: 1px solid #E2E4E9 !important; box-shadow: none !important;
    color: #2563D7 !important; font-family: 'Inter', sans-serif !important; text-decoration: none !important;
}
body.newdesign-home :is(#LessonsPlanEdit, #LessonPlan) .day span { color: #6B7381; font-size: 11px; }
body.newdesign-home :is(#LessonsPlanEdit, #LessonPlan) .day[style*="background"] { background: #2563D7 !important; border-color: #2563D7 !important; color: #fff !important; }
body.newdesign-home :is(#LessonsPlanEdit, #LessonPlan) .day[style*="background"] span { color: #DCE6FB; }
body.newdesign-home :is(#LessonsPlanEdit, #LessonPlan) #lessonsPlanDay {
    border: 1px solid #E2E4E9 !important; border-radius: 14px !important; background: #fff !important; padding: 14px !important; box-shadow: none !important;
}
body.newdesign-home :is(#LessonsPlanEdit, #LessonPlan) #addDayLesson { color: #2563D7 !important; font-weight: 500; text-decoration: none !important; }
/* Report A day columns */
body.newdesign-home #LessonsReportA .ui-content > table { border: 1px solid #E2E4E9; border-radius: 12px; overflow: hidden; box-shadow: none !important; background: #fff; }
body.newdesign-home #LessonsReportA .ui-content > table td { border: none !important; border-right: 1px solid #F0F1F4 !important; vertical-align: top; }
body.newdesign-home #LessonsReportA .dayHead { background: #F6F7FA; color: #525966; font: 600 13px 'Inter', sans-serif; padding: 8px; border-radius: 8px; }
body.newdesign-home #LessonsReportA .dayDes.dayDay { border: 1px solid #E2E4E9; border-radius: 8px; margin: 6px 0; padding: 8px; cursor: pointer; }
body.newdesign-home #LessonsReportA .dayDes.dayDay:hover { border-color: #2563D7; background: #EEF3FD; }
/* Add Questionnaires collapsibles */
body.newdesign-home #AddQuestionnaires .ui-collapsible { border: 1px solid #E2E4E9 !important; border-radius: 12px !important; overflow: hidden; margin: 0 0 10px !important; background: #fff; }
body.newdesign-home #AddQuestionnaires .ui-collapsible-heading-toggle {
    background: #fff !important; border: none !important; box-shadow: none !important; text-shadow: none !important;
    font: 600 15px 'Inter', sans-serif !important; color: #20252D !important;
}

@media (max-width: 768px) {
    body.newdesign-home :is(#LessonsControl, #LessonsReports, #LessonsReportA, #LessonsReportB, #Lessons, #LessonsEdit, #Lesson, #LessonsPlan, #LessonsPlanEdit, #LessonPlan,
        #Settings, #ChangePassword, #frameslist, #SchoolSettings, #frameChildrenFields, #RestoreClasses, #CovidSettings, #AddQuestionnaires) > .ui-content { padding: 16px !important; }
    body.newdesign-home #ChangePassword .ui-content { margin: 76px 16px 0 !important; width: auto !important; }
    body.newdesign-home :is(#Lessons, #LessonsPlan, #LessonsReportA) .ui-content { overflow-x: auto !important; }
}
/* Settings: keep the deliberately hidden entries hidden over the row-card display:flex above */
body.newdesign-home #Settings .ui-content .ui-input-btn:has(#PersonalSettings),
body.newdesign-home #Settings label[for="PersonalSettings"] + div,
body.newdesign-home :is(#Settings, #SchoolSettings) .ui-content .ui-input-btn[style*="display: none"],
body.newdesign-home :is(#Settings, #SchoolSettings) .ui-content .ui-input-btn:has(> input[style*="display: none"]),
body.newdesign-home #CovidSettings .ui-content button.qbuttons[style*="display: none"],
body.newdesign-home :is(#LessonsControl, #LessonsReports) .ui-content > button[style*="display: none"] { display: none !important; }
/* Teacher entrance / My Classes (#frameslist): top buttons, rows, Active / Historic tabs */
body.newdesign-home #frameslist .faceTagListMenuButtons {
    display: flex !important; flex-wrap: wrap; gap: 10px; margin: 0 0 14px !important; padding: 0 !important;
}
body.newdesign-home #frameslist .faceTagListMenuButtons > div,
body.newdesign-home #frameslist .faceTagListMenuButtons .fullWidth { float: none !important; width: auto !important; padding: 0 !important; margin: 0 !important; }
body.newdesign-home #frameslist .faceTagListMenuButtons input[type=button],
body.newdesign-home #frameslist .faceTagListMenuButtons .ui-btn {
    -webkit-appearance: none; appearance: none; display: inline-flex !important; align-items: center; justify-content: center;
    height: 40px !important; min-height: 0 !important; width: auto !important; margin: 0 !important; padding: 0 18px !important;
    background: #fff !important; border: 1px solid #E2E4E9 !important; border-radius: 8px !important; box-shadow: none !important;
    color: #20252D !important; text-shadow: none !important; font: 500 14px 'Inter', sans-serif !important; cursor: pointer;
}
body.newdesign-home #frameslist .faceTagListMenuButtons input[type=button]:hover,
body.newdesign-home #frameslist .faceTagListMenuButtons .ui-btn:hover { background: #F6F7FA !important; }
/* first button (Create New Class) = primary */
body.newdesign-home #frameslist .faceTagListMenuButtons > div:first-child input[type=button],
body.newdesign-home #frameslist .faceTagListMenuButtons > div:first-child .ui-btn,
body.newdesign-home #frameslist .faceTagListMenuButtons > .ui-btn:first-child,
body.newdesign-home #frameslist .faceTagListMenuButtons > input[type=button]:first-child {
    background: #2563D7 !important; border-color: #2563D7 !important; color: #fff !important;
}
body.newdesign-home #frameslist .faceTagListMenuButtons > div:first-child input[type=button]:hover,
body.newdesign-home #frameslist .faceTagListMenuButtons > div:first-child .ui-btn:hover { background: #1D4ED8 !important; }
body.newdesign-home #frameslist .faceTagListMenuButtons .ui-btn:after { display: none !important; }
/* rows */
body.newdesign-home #frameslist .ui-content { padding-bottom: 90px !important; }
body.newdesign-home #frameslist li.invContainer { min-height: 64px; cursor: pointer; }
body.newdesign-home #frameslist .invLeftFaceTag img { width: 44px !important; height: 44px !important; }
body.newdesign-home #frameslist .invText p, body.newdesign-home #frameslist .invText p a {
    color: #6B7381 !important; font: 400 13px 'Inter', sans-serif !important; text-shadow: none !important;
}
/* Active classes / Historic classes -> segmented tabs in a white bottom bar */
body.newdesign-home #frameslist .faceTagListFooterTabs {
    display: flex !important; gap: 4px; height: auto !important; line-height: normal !important;
    padding: 10px max(16px, calc((100% - 640px) / 2)) !important; box-sizing: border-box;
    background: #fff !important; border-top: 1px solid #E2E4E9; box-shadow: 0 -2px 8px rgba(16, 24, 40, 0.04);
}
body.newdesign-home #frameslist .faceTagListFooterTabs > div {
    float: none !important; width: auto !important; flex: 1 1 0; position: relative;
    background: #F0F1F4 !important; border: none !important; border-radius: 10px; padding: 0 !important;
}
body.newdesign-home #frameslist .faceTagListFooterTabs > div:after { display: none !important; }
body.newdesign-home #frameslist .faceTagListFooterTabs > div > div { background: transparent !important; border: none !important; }
body.newdesign-home #frameslist .faceTagListFooterTabs > div a { display: block; padding: 10px 0; text-decoration: none !important; }
body.newdesign-home #frameslist .faceTagListFooterTabs p {
    margin: 0 !important; text-align: center; color: #525966 !important; font: 500 14px 'Inter', sans-serif !important; text-shadow: none !important;
}
body.newdesign-home #frameslist .faceTagListFooterTabs > div.faceTagListFooterTabActive { background: #2563D7 !important; }
body.newdesign-home #frameslist .faceTagListFooterTabs > div.faceTagListFooterTabActive p { color: #fff !important; font-weight: 600 !important; }
@media (min-width: 1024px) {
    /* desktop: the bar sits right of the open side menu like the page itself */
    body.newdesign-home:not(.nd-sidebar-collapsed) #frameslist .faceTagListFooterTabs { left: 272px !important; }
}
/* School Settings: one row per setting - label on the left, switch on the right */
body.newdesign-home #SchoolSettings #forSchoolSettings {
    display: grid !important; grid-template-columns: 1fr auto; align-items: center; column-gap: 16px;
    padding: 4px 18px !important;
}
body.newdesign-home #SchoolSettings #forSchoolSettings > select { display: none !important; }
body.newdesign-home #SchoolSettings #forSchoolSettings > label {
    grid-column: 1; margin: 0 !important; padding: 16px 0; text-align: left;
    font: 500 15px 'Inter', sans-serif !important; color: #20252D !important;
}
body.newdesign-home #SchoolSettings #forSchoolSettings > .ui-slider-switch,
body.newdesign-home #SchoolSettings #forSchoolSettings > div[role=application] {
    grid-column: 2; margin: 0 !important; justify-self: end;
}
/* rows separated by spacing only (a border on the switch element would distort the switch) */
/* COVID-19 Settings -> Questionnaire Reminders: "Questionnaire Reminder" + switch on one row,
   Send At / Time Zone selects full width below */
body.newdesign-home #CovidSettings #ReminderSettings:not([style*="display: none"]),
body.newdesign-home #CovidSettings #PickUpNotificationsDiv:not([style*="display: none"]) {
    display: grid !important; grid-template-columns: 1fr auto; align-items: center; column-gap: 16px; row-gap: 10px;
    padding: 12px 18px 16px !important;
}
body.newdesign-home #CovidSettings :is(#ReminderSettings, #PickUpNotificationsDiv) > select { display: none !important; }
body.newdesign-home #CovidSettings :is(#ReminderSettings, #PickUpNotificationsDiv) > label {
    grid-column: 1; margin: 0 !important; padding: 6px 0; text-align: left;
    font: 500 15px 'Inter', sans-serif !important; color: #20252D !important;
}
body.newdesign-home #CovidSettings :is(#ReminderSettings, #PickUpNotificationsDiv) > label[style*="display: none"] { display: none !important; }
body.newdesign-home #CovidSettings :is(#ReminderSettings, #PickUpNotificationsDiv) > div[role=application] { grid-column: 2; margin: 0 !important; justify-self: end; }
body.newdesign-home #CovidSettings :is(#ReminderSettings, #PickUpNotificationsDiv) > .ui-select { grid-column: 1 / -1; margin: 0 !important; }
/* My Classes bottom tabs, round 2: drop the legacy texture strip (login_top.png on the active tab's inner
   div:after) and use the same segmented control as the Documents tabs (grey track, white active pill) */
body.newdesign-home #frameslist .faceTagListFooterTabs div:after,
body.newdesign-home #frameslist .faceTagListFooterTabs div:before { display: none !important; content: none !important; background: none !important; }
body.newdesign-home #frameslist .faceTagListFooterTabs { gap: 0; }
body.newdesign-home #frameslist .faceTagListFooterTabs > div:first-child { border-radius: 10px 0 0 10px !important; }
body.newdesign-home #frameslist .faceTagListFooterTabs > div:last-child { border-radius: 0 10px 10px 0 !important; }
body.newdesign-home #frameslist .faceTagListFooterTabs > div {
    background: #E2E4E9 !important; padding: 3px !important; box-shadow: none !important;
}
body.newdesign-home #frameslist .faceTagListFooterTabs > div > div {
    border-radius: 8px !important; background: transparent !important; box-shadow: none !important;
}
body.newdesign-home #frameslist .faceTagListFooterTabs > div a { padding: 8px 0 !important; }
body.newdesign-home #frameslist .faceTagListFooterTabs > div.faceTagListFooterTabActive { background: #E2E4E9 !important; }
body.newdesign-home #frameslist .faceTagListFooterTabs > div.faceTagListFooterTabActive > div {
    background: #fff !important; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08) !important;
}
body.newdesign-home #frameslist .faceTagListFooterTabs > div.faceTagListFooterTabActive p { color: #20252D !important; font-weight: 600 !important; }
body.newdesign-home #frameslist .faceTagListFooterTabs > div:hover:not(.faceTagListFooterTabActive) > div { background: rgba(255, 255, 255, 0.5) !important; }

/* =============================================================================================
 * Storage (#StorageMedia, src/View/StorageView.js): photo gallery of a class's posts - new design.
 * CSS only: tiles become cards in a responsive grid; selection tick, child / tag lists and the
 * tile menu keep their markup and handlers.
 * ============================================================================================= */
body.newdesign-home #StorageMedia { background: #F6F7FA !important; }
body.newdesign-home #StorageMedia > .mainContent { padding: 0 !important; min-height: 0 !important; height: auto !important; background: transparent !important; }
body.newdesign-home #StorageMedia > #FrameFeed {
    max-width: 1180px; margin: 0 auto !important; padding: 20px 24px 40px !important; box-sizing: border-box;
    list-style: none; font-family: 'Inter', sans-serif;
}
/* header: "New" blue button + the selection "⋮" as an outlined icon button left of it */
body.newdesign-home #StorageMedia > .head .rightButtonInvite {
    top: 0 !important; bottom: 0 !important; right: 16px !important; width: auto !important; height: auto !important;
    margin: 0 !important; transform: none !important; display: flex !important; align-items: center; line-height: normal !important;
}
body.newdesign-home #StorageMedia > .head .rightButtonInvitediv {
    display: flex; align-items: center; justify-content: center; width: auto !important; height: 32px !important; padding: 0 16px;
    box-sizing: border-box; background: #2563D7 !important; border: none !important; border-radius: 8px !important;
}
body.newdesign-home #StorageMedia > .head .rightButtonInvitediv:hover { background: #1D4ED8 !important; }
body.newdesign-home #StorageMedia > .head .rightButtonInvitediv p {
    width: auto !important; height: auto !important; margin: 0 !important; color: #fff !important;
    font-size: 14px !important; font-weight: 600 !important; line-height: 20px !important;
}
body.newdesign-home #StorageMedia > .head .leftButton + div + div {
    top: 50% !important; margin-top: -18px !important; right: 96px !important;
    width: 36px; height: 36px; box-sizing: border-box; font-size: 0 !important; line-height: 0 !important; color: transparent !important;
    background: #fff no-repeat center / 20px 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='4.5' r='1.5' fill='%23525966'/%3E%3Ccircle cx='10' cy='10' r='1.5' fill='%23525966'/%3E%3Ccircle cx='10' cy='15.5' r='1.5' fill='%23525966'/%3E%3C/svg%3E");
    border: 1px solid #E2E4E9; border-radius: 8px; z-index: 103;
}
body.newdesign-home #StorageMedia > .head .leftButton + div + div:hover { background-color: #F6F7FA; }
/* grid of tiles */
body.newdesign-home #StorageMedia #LazyScrollGrid {
    display: grid !important; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px;
}
body.newdesign-home #StorageMedia #LazyScrollGrid:after, body.newdesign-home #StorageMedia #LazyScrollGrid:before { display: none !important; }
body.newdesign-home #StorageMedia li.galleryPostContainer1 {
    float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; list-style: none;
    display: flex; flex-direction: column; position: relative;
    background: #fff !important; border: 1px solid #E2E4E9; border-radius: 14px; overflow: hidden;
}
body.newdesign-home #StorageMedia li.galleryPostContainer1:has(.tickIcon[style*="block"]) { border-color: #2563D7; box-shadow: 0 0 0 2px #2563D7 inset; }
/* tagged children (avatars) on top of the photo */
body.newdesign-home #StorageMedia .storageStatusOptions.storageChildList {
    position: absolute; top: 10px; left: 10px; z-index: 2; width: auto !important; max-width: calc(100% - 60px); height: auto !important;
    margin: 0 !important; padding: 3px; gap: 0; background: rgba(255, 255, 255, 0.9) !important; border-radius: 999px; cursor: pointer;
}
body.newdesign-home #StorageMedia .storageStatusOptions.storageChildList:empty { display: none; }
body.newdesign-home #StorageMedia .storageChildList img {
    width: 26px !important; height: 26px !important; padding: 0 !important; margin-left: -6px; object-fit: cover;
    border-radius: 50%; border: 2px solid #fff; background: #E2E4E9;
}
body.newdesign-home #StorageMedia .storageChildList img:first-child { margin-left: 0; }
/* photo */
body.newdesign-home #StorageMedia .galleryPostContainer1 article { margin: 0 !important; padding: 0 !important; border: none !important; }
body.newdesign-home #StorageMedia .galleryPost1 { height: 190px !important; background: #F0F1F4; }
body.newdesign-home #StorageMedia .galleryPost1:hover .storageimage { transform: scale(1.03); }
body.newdesign-home #StorageMedia .storageimage { transition: transform 0.2s ease; }
body.newdesign-home #StorageMedia .tickIcon {
    top: 10px !important; right: 10px !important; width: 26px; height: 26px; padding: 0 !important; box-sizing: border-box;
    border-radius: 50% !important; font-size: 0 !important; line-height: 0 !important;
    background: #2563D7 no-repeat center / 14px 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.3l2.6 2.6L11 4.3' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    border: 2px solid #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.25);
}
/* date + tags + menu */
body.newdesign-home #StorageMedia .storageDateClass {
    width: auto !important; margin: 0 !important; padding: 10px 12px 2px; text-align: left !important; background: transparent !important;
    font: 500 12px 'Inter', sans-serif !important; color: #6B7381;
}
body.newdesign-home #StorageMedia .storageStatusOptions:not(.storageChildList) {
    width: auto !important; margin: 0 !important; padding: 2px 6px 8px 12px; height: auto !important; min-height: 36px; gap: 6px;
    background: transparent !important;
}
body.newdesign-home #StorageMedia .storageStatusTags { flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; cursor: pointer; padding-bottom: 2px; }
body.newdesign-home #StorageMedia .storageStatusTags::-webkit-scrollbar { display: block; height: 4px; }
body.newdesign-home #StorageMedia .storageStatusTags::-webkit-scrollbar-thumb { background: #C9CDD6; border-radius: 4px; }
body.newdesign-home #StorageMedia .storageStatusTags > span { margin-right: 6px !important; }
body.newdesign-home #StorageMedia .storageStatusTags > span a {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: #EEF3FD; text-decoration: none !important;
}
body.newdesign-home #StorageMedia .storageStatusTags img { display: none !important; }
body.newdesign-home #StorageMedia .storageStatusTags > span p { color: #2563D7 !important; font: 500 12px 'Inter', sans-serif !important; }
body.newdesign-home #StorageMedia .storageStatusOptions:not(.storageChildList) > a { float: none !important; flex: none; }
body.newdesign-home #StorageMedia .storageImgOptions {
    height: auto !important; width: 32px; padding: 0 !important; box-sizing: border-box; border-radius: 8px;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='10.5' r='1.5' fill='%23525966'/%3E%3Ccircle cx='16' cy='16' r='1.5' fill='%23525966'/%3E%3Ccircle cx='16' cy='21.5' r='1.5' fill='%23525966'/%3E%3C/svg%3E");
}
body.newdesign-home #StorageMedia .storageImgOptions:hover { background: #F6F7FA; }
@media (max-width: 768px) {
    body.newdesign-home #StorageMedia > #FrameFeed { padding: 16px !important; }
    body.newdesign-home #StorageMedia #LazyScrollGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    body.newdesign-home #StorageMedia .galleryPost1 { height: 140px !important; }
    body.newdesign-home #StorageMedia > .head .leftButton + div + div { right: 86px !important; }
}

/* =============================================================================================
 * Pickers: Add folder / tags (#SelectTag, View.SelectTag) and Add child (#SelectFaceTag,
 * View.SelectFaceTag) - new design. CSS only; selection / search / create handlers untouched.
 * ============================================================================================= */
body.newdesign-home :is(#SelectTag, #SelectFaceTag) { background: #F6F7FA !important; }
body.newdesign-home :is(#SelectTag, #SelectFaceTag) > .ui-content {
    background: transparent !important; margin-top: 60px !important; padding: 24px !important; box-sizing: border-box;
    width: 100% !important; max-width: 860px !important; margin-left: auto !important; margin-right: auto !important;
    font-family: 'Inter', sans-serif; color: #20252D; position: relative;
}
/* header OK / Edit -> blue button */
body.newdesign-home :is(#SelectTag, #SelectFaceTag) > .head .rightHeaderButton {
    top: 0 !important; bottom: 0 !important; right: 16px !important; width: auto !important; height: auto !important;
    margin: 0 !important; transform: none !important; display: flex !important; align-items: center; line-height: normal !important;
}
body.newdesign-home :is(#SelectTag, #SelectFaceTag) > .head .rightHeaderButton a { display: block; text-decoration: none !important; }
body.newdesign-home :is(#SelectTag, #SelectFaceTag) > .head .rightHeaderButton a > div {
    display: flex; align-items: center; justify-content: center; width: auto !important; height: 32px !important; padding: 0 18px;
    box-sizing: border-box; background: #2563D7 !important; border: none !important; border-radius: 8px !important;
}
body.newdesign-home :is(#SelectTag, #SelectFaceTag) > .head .rightHeaderButton a > div:hover { background: #1D4ED8 !important; }
body.newdesign-home :is(#SelectTag, #SelectFaceTag) > .head .rightHeaderButton p {
    width: auto !important; height: auto !important; margin: 0 !important; color: #fff !important;
    font-size: 14px !important; font-weight: 600 !important; line-height: 20px !important;
}

/* ---------- folders / tags list ---------- */
body.newdesign-home #SelectTag .searchTagContainer { margin: 0 112px 14px 0 !important; }
body.newdesign-home #SelectTag .searchTagContainer .ui-input-text {
    margin: 0 !important; background: #fff !important; border: 1px solid #E2E4E9 !important; border-radius: 10px !important; box-shadow: none !important;
}
body.newdesign-home #SelectTag .searchTagContainer .ui-input-text.ui-focus { border-color: #2563D7 !important; }
body.newdesign-home #SelectTag .searchTagContainer input { height: 42px; padding: 0 14px !important; font: 400 14px 'Inter', sans-serif !important; color: #20252D !important; }
/* "Create" -> outlined pill next to the search */
body.newdesign-home #SelectTag .searchTagAddButton {
    top: 24px !important; right: 24px !important; width: auto !important; height: 44px !important; padding: 0 !important; box-sizing: border-box;
    background: #fff !important; border: 1px solid #2563D7 !important; border-radius: 10px !important; line-height: normal !important;
}
body.newdesign-home #SelectTag .searchTagAddButton a { display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 16px; text-decoration: none !important; }
body.newdesign-home #SelectTag .searchTagAddButton img {
    width: 16px !important; height: 16px !important;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' stroke='%232563D7' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}
body.newdesign-home #SelectTag .searchTagAddButton p { color: #2563D7 !important; font: 600 14px 'Inter', sans-serif !important; }
body.newdesign-home #SelectTag .searchTagAddButton:hover { background: #EEF3FD !important; }
body.newdesign-home #SelectTag .searchTagAddButton[data-disabled="true"] { border-color: #E2E4E9 !important; }
/* the tag rows -> one white card list with checkboxes */
body.newdesign-home #SelectTag fieldset.ui-controlgroup { margin: 0 !important; }
body.newdesign-home #SelectTag .ui-controlgroup-controls {
    background: #fff; border: 1px solid #E2E4E9; border-radius: 14px; overflow: hidden; box-shadow: none !important;
}
body.newdesign-home #SelectTag .ui-controlgroup-controls .ui-checkbox { margin: 0 !important; }
body.newdesign-home #SelectTag .ui-controlgroup-controls .ui-checkbox .ui-btn {
    margin: 0 !important; padding: 14px 16px 14px 52px !important; border: none !important; border-bottom: 1px solid #F0F1F4 !important;
    border-radius: 0 !important; background: #fff !important; box-shadow: none !important; text-shadow: none !important;
    font: 500 15px 'Inter', sans-serif !important; color: #20252D !important; text-align: left;
}
body.newdesign-home #SelectTag .ui-controlgroup-controls .ui-checkbox:last-child .ui-btn { border-bottom: none !important; }
body.newdesign-home #SelectTag .ui-controlgroup-controls .ui-checkbox .ui-btn:hover { background: #FAFBFC !important; }
body.newdesign-home #SelectTag .ui-controlgroup-controls .ui-checkbox .ui-btn:after {
    left: 16px !important; width: 20px !important; height: 20px !important; margin-top: -10px !important; border-radius: 5px !important;
}
body.newdesign-home #SelectTag .ui-controlgroup-controls .ui-checkbox .ui-checkbox-off:after { background-color: #fff !important; border: 1.5px solid #C9CDD6; box-sizing: border-box; }
body.newdesign-home #SelectTag .ui-controlgroup-controls .ui-checkbox .ui-checkbox-on:after { background-color: #2563D7 !important; }
body.newdesign-home #SelectTag .ui-controlgroup-controls .ui-checkbox .ui-checkbox-on { background: #F5F8FF !important; }
body.newdesign-home #SelectTag .ui-checkbox .edittag {
    width: 16px; height: 16px; margin: 0 8px 0 0; vertical-align: -2px;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 20 20'%3E%3Cpath d='M2.5 6A1.5 1.5 0 014 4.5h4l2 2h6A1.5 1.5 0 0117.5 8v7A1.5 1.5 0 0116 16.5H4A1.5 1.5 0 012.5 15V6z' stroke='%236B7381' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- children picker (photo tiles) ---------- */
body.newdesign-home #SelectFaceTag .ui-content > h4.center { margin: 0 0 12px !important; font: 500 15px 'Inter', sans-serif !important; color: #525966 !important; text-shadow: none !important; text-align: left !important; }
body.newdesign-home #SelectFaceTag .ui-content > br { display: none; }
body.newdesign-home #SelectFaceTag .ui-grid-b {
    display: grid !important; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px;
}
body.newdesign-home #SelectFaceTag .ui-grid-b:after, body.newdesign-home #SelectFaceTag .ui-grid-b:before { display: none !important; }
body.newdesign-home #SelectFaceTag .faceTagSelect {
    float: none !important; width: auto !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
    aspect-ratio: 1 / 1; overflow: hidden; cursor: pointer; border-radius: 14px !important;
    background: #E2E4E9 !important; border: 1px solid #E2E4E9 !important;
}
body.newdesign-home #SelectFaceTag .faceTagSelect:after { border-radius: 14px; background-image: linear-gradient(rgba(0,0,0,0) 55%, rgba(0,0,0,0.65) 100%) !important; box-shadow: none !important; }
body.newdesign-home #SelectFaceTag .faceTagSelect > img:first-child { width: 100% !important; height: 100% !important; object-fit: cover; margin: 0 !important; display: block; }
body.newdesign-home #SelectFaceTag .faceTagSelectName { padding: 8px 10px; background: none !important; }
body.newdesign-home #SelectFaceTag .faceTagSelectName p {
    text-align: left !important; color: #fff !important; font: 600 13px 'Inter', sans-serif !important; text-shadow: none !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* selected: blue ring + blue check badge */
body.newdesign-home #SelectFaceTag .faceTagSelectCheckmark {
    top: 8px !important; right: 8px !important; z-index: 3; width: 26px !important; height: 26px !important; box-sizing: border-box;
    border-radius: 50%; border: 2px solid #fff; background: #2563D7; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.25);
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.3l3 3 6-6.3' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.newdesign-home #SelectFaceTag .faceTagSelect:has(.faceTagSelectCheckmark:not([style*="display: none"])) {
    border-color: #2563D7 !important; box-shadow: 0 0 0 3px #2563D7;
}
@media (max-width: 768px) {
    body.newdesign-home :is(#SelectTag, #SelectFaceTag) > .ui-content { padding: 16px !important; }
    body.newdesign-home #SelectTag .searchTagAddButton { top: 16px !important; right: 16px !important; }
    body.newdesign-home #SelectTag .searchTagContainer { margin-right: 104px !important; }
    body.newdesign-home #SelectFaceTag .ui-grid-b { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
}

/* =============================================================================================
 * Story editor (#postStory, PostController): block toolbar, story blocks and the Save button -
 * new design. CSS only; the story HTML that gets saved is not changed (styles live here only).
 * ============================================================================================= */
body.newdesign-home #postStory { background: #F6F7FA !important; }
body.newdesign-home #postStory > .mainContent { background: transparent !important; font-family: 'Inter', sans-serif; }
/* header Save -> blue button (keeps the disabled look while nothing changed) */
body.newdesign-home #postStory > .head .rightButtonInvite {
    top: 0 !important; bottom: 0 !important; right: 16px !important; width: auto !important; height: auto !important;
    margin: 0 !important; transform: none !important; display: flex !important; align-items: center; line-height: normal !important;
}
body.newdesign-home #postStory > .head .rightButtonInvitediv {
    display: flex; align-items: center; justify-content: center; width: auto !important; height: 32px !important; padding: 0 18px;
    box-sizing: border-box; background: #2563D7 !important; border: none !important; border-radius: 8px !important;
}
body.newdesign-home #postStory > .head .rightButtonInvitediv:hover { background: #1D4ED8 !important; }
body.newdesign-home #postStory > .head .rightButtonInvitediv.disabled { background: #A9C1EF !important; opacity: 1 !important; }
body.newdesign-home #postStory > .head .rightButtonInvitediv p {
    width: auto !important; height: auto !important; margin: 0 !important; color: #fff !important;
    font-size: 14px !important; font-weight: 600 !important; line-height: 20px !important;
}
/* block toolbar: white bar of tiles under the header */
body.newdesign-home #postStory .storybuttons {
    background: #fff !important; border-bottom: 1px solid #E2E4E9; box-shadow: 0 2px 8px rgba(16, 24, 40, 0.04);
    padding: 10px 12px 10px !important; box-sizing: border-box;
    font: 500 12px 'Inter', sans-serif !important; color: #525966;
    display: flex; flex-wrap: nowrap; justify-content: center; gap: 6px; overflow-x: auto; scrollbar-width: none;
}
body.newdesign-home #postStory .storybuttons::-webkit-scrollbar { display: none; }
body.newdesign-home #postStory .storybuttons > span { flex: 0 0 auto; min-width: 72px; line-height: 16px; color: #525966; }
body.newdesign-home #postStory .storybuttons > span > br { display: none; }
body.newdesign-home #postStory .storybuttons > span { display: inline-flex !important; flex-direction: column; align-items: center; gap: 6px; }
body.newdesign-home #postStory .storybutton {
    width: 52px !important; height: 52px; margin: 0 !important; padding: 8px !important; box-sizing: border-box;
    background: #fff !important; border: 1px solid #E2E4E9 !important; border-radius: 12px !important;
    box-shadow: none !important; text-shadow: none !important; display: inline-flex !important; align-items: center; justify-content: center;
    cursor: pointer;
}
body.newdesign-home #postStory .storybutton:hover { background: #EEF3FD !important; border-color: #C7D7F8 !important; }
body.newdesign-home #postStory .storybutton svg { width: 34px; height: 34px; }
/* the story itself */
body.newdesign-home #postStory #storycontent { max-width: 860px; margin: 0 auto !important; }
body.newdesign-home #postStory #storycontent .draggablediv {
    position: relative; background: #fff; border: 1px solid #E2E4E9; border-radius: 12px; margin: 12px 0 !important; padding: 12px 12px 8px;
}
body.newdesign-home #postStory #storycontent .draggablediv:hover { border-color: #C9CDD6; }
body.newdesign-home #postStory h3[contenteditable="true"], body.newdesign-home #postStory div[contenteditable="true"] {
    background: #fff !important; border: 1px solid #E2E4E9 !important; border-radius: 8px; outline: none !important;
    padding: 10px 12px !important; font-family: 'Inter', sans-serif; color: #20252D;
}
body.newdesign-home #postStory h3[contenteditable="true"]:focus, body.newdesign-home #postStory div[contenteditable="true"]:focus {
    border-color: #2563D7 !important; box-shadow: 0 0 0 3px rgba(37, 99, 215, 0.12);
}
body.newdesign-home #postStory .storyimage, body.newdesign-home #postStory .story2image { border-radius: 10px; }
/* block icons (delete / move up / move down): outlined squares, same positions */
body.newdesign-home #postStory .ui-icon-delete, body.newdesign-home #postStory .ui-icon-arrow-u, body.newdesign-home #postStory .ui-icon-arrow-d {
    width: 28px !important; height: 28px !important; padding: 0 !important;
    background: #fff !important; border: 1px solid #E2E4E9 !important; border-radius: 8px !important; box-shadow: none !important;
}
body.newdesign-home #postStory .ui-icon-delete:hover { background: #FEF2F2 !important; border-color: #FECACA !important; }
body.newdesign-home #postStory .ui-icon-arrow-u:hover, body.newdesign-home #postStory .ui-icon-arrow-d:hover { background: #F6F7FA !important; }
body.newdesign-home #postStory .ui-icon-arrow-u:after, body.newdesign-home #postStory .ui-icon-arrow-d:after { background-color: transparent !important; filter: brightness(0) opacity(0.55); }
body.newdesign-home #postStory .ui-icon-delete:after {
    background-color: transparent !important; filter: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 20 20'%3E%3Cpath d='M3.5 5.5h13M8 5.5V4a1 1 0 011-1h2a1 1 0 011 1v1.5M5 5.5l.8 10.6a1 1 0 001 .9h6.4a1 1 0 001-.9L15 5.5M8.5 9v5M11.5 9v5' stroke='%23525966' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-position: center center !important; background-size: 15px 15px !important; background-repeat: no-repeat !important;
}
body.newdesign-home #postStory .sortable-ghost { opacity: 0.6; border-color: #2563D7 !important; background: #EEF3FD !important; }
@media (max-width: 768px) {
    body.newdesign-home #postStory .storybuttons { justify-content: flex-start; padding: 8px !important; }
    body.newdesign-home #postStory .storybuttons > span { min-width: 64px; }
    body.newdesign-home #postStory .storybutton { width: 46px !important; height: 46px; }
    body.newdesign-home #postStory .storybutton svg { width: 30px; height: 30px; }
    body.newdesign-home #postStory #storycontent { padding: 0 12px; }
}
/* Story: the fixed block toolbar is ~95px tall now (tiles + labels + padding); PostController sets
   #storycontent's margin-top from .height() (no padding), so the first block slid under the bar */
body.newdesign-home #postStory #storycontent { margin-top: 112px !important; }
body.newdesign-home #postStory .storybuttons > span { white-space: nowrap; }
@media (max-width: 768px) { body.newdesign-home #postStory #storycontent { margin-top: 102px !important; } }

/* Home loading state: until the home has at least one class / child card, its empty shell (title row,
   empty My Classes / My Children, footer) is hidden behind a spinner - so a manager going straight to
   the Admin Dashboard never sees it. NewDesign.js marks #main .nd-home-ready after 8s as a fallback
   (e.g. a parent with no children / classes, whose home really is empty). */
body.newdesign-home #main:not(.nd-home-ready):not(:has(.mainFaceTagItem)) > *:not(.head) { visibility: hidden !important; }
body.newdesign-home #main:not(.nd-home-ready):not(:has(.mainFaceTagItem)):after {
    content: ''; position: fixed; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; z-index: 50;
    border: 3px solid #DCE6FB; border-top-color: #2563D7; border-radius: 50%; box-sizing: border-box;
    animation: ndHomeSpin 0.8s linear infinite;
}
@keyframes ndHomeSpin { to { transform: rotate(360deg); } }
/* Messaging switched off for this person / their classes (NewDesign.messagingAllowed): no topbar message icon */
body.newdesign-home.nd-no-messages .nd-topbar-msg { display: none !important; }

/* Parent In-Progress table also has class .ptps; its 3rd column is Amount, not the
   posted table's Category - show it again (overrides the .ptps nth-child(3) hide). */
body.newdesign-home #billing .ptps.nd-ip-parent > tbody > tr > td:nth-child(3),
body.newdesign-home #billing .ptps.nd-ip-parent > tr > td:nth-child(3) { display: table-cell !important; }

/* Forms (new design): the "Waiting for approval" table stays usable on phones in both views -
   newdesign-forms.css hides every .table-sticky at <=768px (Child View uses phone cards instead). */
@media (max-width: 768px) {
    #RegistrationForms.newdesign-forms .table-sticky.pending-forms-section {
        display: block !important; max-width: 100%; overflow-x: auto !important; -webkit-overflow-scrolling: touch;
    }
}
/* ...but never print it with the per-child form (the Form View rule above outranks the print hide) */
@media print {
    body.nd-child-form-open #RegistrationForms.newdesign-forms .table-sticky.pending-forms-section { display: none !important; }
}
/* Billing: "Delete charge?" confirmation (#popUpDelete + #blockDiv, built with inline pixel offsets) ->
   centred new-design card with a red Delete button */
body.newdesign-home #blockDiv { background: rgba(16, 24, 40, 0.45) !important; opacity: 1 !important; height: 100% !important; }
body.newdesign-home #popUpDelete {
    top: 50% !important; left: 50% !important; transform: translate(-50%, -50%);
    width: min(380px, calc(100vw - 32px)) !important; height: auto !important; box-sizing: border-box;
    padding: 24px 20px 20px !important; border-radius: 16px !important; background: #fff !important;
    box-shadow: 0 20px 48px rgba(16, 24, 40, 0.22); font-family: 'Inter', sans-serif; text-align: center;
}
body.newdesign-home #popUpDelete > button:first-child {
    position: absolute !important; top: 10px !important; right: 10px !important; float: none !important;
    width: 32px !important; height: 32px !important; padding: 0 !important; margin: 0 !important;
    background: transparent !important; border: none !important; border-radius: 8px !important; box-shadow: none !important; cursor: pointer;
}
body.newdesign-home #popUpDelete > button:first-child:hover { background: #F6F7FA !important; }
body.newdesign-home #popUpDelete #closePropUp {
    position: static !important; float: none !important; margin: 0 !important; line-height: 32px;
    font: 400 20px 'Inter', sans-serif !important; color: #6B7381 !important;
}
body.newdesign-home #popUpDelete > p {
    margin: 4px 0 20px !important; font: 600 17px/24px 'Inter', sans-serif !important; color: #20252D !important; text-shadow: none !important;
}
body.newdesign-home #popUpDelete > hr { display: none !important; }
body.newdesign-home #popUpDelete #YesDelete,
body.newdesign-home #popUpDelete .ui-btn:has(#YesDelete) {
    position: static !important; top: auto !important; width: 100% !important; height: 44px !important; margin: 0 !important;
    background: #DC2626 !important; border: none !important; border-radius: 10px !important; box-shadow: none !important;
    color: #fff !important; text-shadow: none !important; font: 600 15px 'Inter', sans-serif !important; cursor: pointer;
}
body.newdesign-home #popUpDelete #YesDelete:hover { background: #B91C1C !important; }

/* =============================================================================================
 * Child Extended Info (#myparentslist in child-info mode: Contacts / Schedule / Personal Info /
 * More Info / Forms / Documents) - new design. ChildController adds .nd-xinfo in that mode only,
 * so the regular My Parents list is untouched. CSS only: the legacy markup is a flat run of
 * siblings (grey header bar, then its content), styled as card top (header) + card body.
 * Edit/save icons are swapped by src (the code toggles editN.png <-> check-mark.png and tests it).
 * ============================================================================================= */
body.newdesign-home #myparentslist.nd-xinfo { background: #F6F7FA !important; }
body.newdesign-home #myparentslist.nd-xinfo > .ui-content {
    background: transparent !important;
    max-width: 880px;
    margin: 0 auto !important;
    padding: 76px 24px 32px !important;   /* clears the fixed header (60px) */
    box-sizing: border-box;
    min-height: 0 !important;
}
/* first card: no extra top gap under the header */
body.newdesign-home #myparentslist.nd-xinfo > .ui-content > .mainFaceTagGroupHeader:first-child { margin-top: 0 !important; }
/* FaceTagList sizes the list to fill the screen (inline height) and adds a spacer row - neither belongs in a card */
body.newdesign-home #myparentslist.nd-xinfo .ui-content > .ui-listview { height: auto !important; min-height: 0 !important; }
body.newdesign-home #myparentslist.nd-xinfo .ui-content > .ui-listview > p[data-role="spacer"] { display: none !important; }
/* card top: section header */
body.newdesign-home #myparentslist.nd-xinfo .mainFaceTagGroupHeader {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: auto !important;
    height: auto !important;
    min-height: 56px;
    margin: 16px 0 0 0 !important;
    padding: 0 20px !important;
    background: #fff !important;
    border: 1px solid #E2E4E9 !important;
    border-bottom: 1px solid #F0F1F4 !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: none !important;
    box-sizing: border-box;
}
body.newdesign-home #myparentslist.nd-xinfo .mainFaceTagGroupHeader > p {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    color: #20252D !important;
    text-shadow: none !important;
    position: static !important;
}
body.newdesign-home #myparentslist.nd-xinfo .mainFaceTagGroupHeader > a {
    float: none !important;
    margin: 0 !important;
    position: static !important;
    display: flex;
}
body.newdesign-home #myparentslist.nd-xinfo .mainFaceTagGroupHeaderEdit {
    display: flex !important;
    align-items: center;
    gap: 4px;
    position: static !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
body.newdesign-home #myparentslist.nd-xinfo .mainFaceTagGroupHeaderEdit img {
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 8px;
    box-sizing: border-box;
    border-radius: 8px;
    cursor: pointer;
    position: static !important;
}
body.newdesign-home #myparentslist.nd-xinfo .mainFaceTagGroupHeaderEdit img:hover { background: #F6F7FA; }
body.newdesign-home #myparentslist.nd-xinfo .mainFaceTagGroupHeaderEdit img[style*="display: none"] { display: none !important; }
body.newdesign-home #myparentslist.nd-xinfo img[src="img/editN.png"] {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 20 20'%3E%3Cpath d='M12.5 4.5l3 3L7 16H4v-3l8.5-8.5z' stroke='%23525966' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.newdesign-home #myparentslist.nd-xinfo img[src="img/check-mark.png"] {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' stroke='%2316A34A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.newdesign-home #myparentslist.nd-xinfo img[src="img/icons_delete_grey.png"] {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 20 20'%3E%3Cpath d='M3.5 5.5h13M8 5.5V4a1 1 0 011-1h2a1 1 0 011 1v1.5M5 5.5l.8 10.6a1 1 0 001 .9h6.4a1 1 0 001-.9L15 5.5M8.5 9v5M11.5 9v5' stroke='%23525966' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* card body: shared look for every content block that follows a header */
body.newdesign-home #myparentslist.nd-xinfo .ui-content > .ui-listview,
body.newdesign-home #myparentslist.nd-xinfo .ui-content > div:has(> #addContact),
body.newdesign-home #myparentslist.nd-xinfo #childSchuedualUl,
body.newdesign-home #myparentslist.nd-xinfo #childSchuedualUl + div:not([class]):not([id]),
body.newdesign-home #myparentslist.nd-xinfo #childInfoContent,
body.newdesign-home #myparentslist.nd-xinfo #moreInformation,
body.newdesign-home #myparentslist.nd-xinfo #formsInformation,
body.newdesign-home #myparentslist.nd-xinfo #pdfInformation,
body.newdesign-home #myparentslist.nd-xinfo .nd-xinfo-doc-actions {
    background: #fff !important;
    border: 1px solid #E2E4E9 !important;
    border-top: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 22px;
    color: #20252D;
}
/* the last block of each card closes it */
body.newdesign-home #myparentslist.nd-xinfo .ui-content > div:has(> #addContact),
body.newdesign-home #myparentslist.nd-xinfo #childSchuedualUl:not(:has(+ div:not([class]):not([id]))),
body.newdesign-home #myparentslist.nd-xinfo #childSchuedualUl + div:not([class]):not([id]),
body.newdesign-home #myparentslist.nd-xinfo #childInfoContent,
body.newdesign-home #myparentslist.nd-xinfo #moreInformation,
body.newdesign-home #myparentslist.nd-xinfo #formsInformation,
body.newdesign-home #myparentslist.nd-xinfo .nd-xinfo-doc-actions {
    border-bottom: 1px solid #E2E4E9 !important;
    border-radius: 0 0 16px 16px !important;
}
body.newdesign-home #myparentslist.nd-xinfo #childInfoContent,
body.newdesign-home #myparentslist.nd-xinfo #moreInformation,
body.newdesign-home #myparentslist.nd-xinfo #formsInformation,
body.newdesign-home #myparentslist.nd-xinfo #pdfInformation { padding: 14px 20px !important; }
body.newdesign-home #myparentslist.nd-xinfo #moreInformation b,
body.newdesign-home #myparentslist.nd-xinfo #childInfoContent b { font-weight: 600; color: #525966; }
body.newdesign-home #myparentslist.nd-xinfo #moreInformation:empty { display: none; }
body.newdesign-home #myparentslist.nd-xinfo .childinfo { margin-bottom: 0 !important; line-height: 22px !important; }

/* contacts */
body.newdesign-home #myparentslist.nd-xinfo .ui-content > .ui-listview { padding: 4px 0 !important; }
body.newdesign-home #myparentslist.nd-xinfo .ui-content > .ui-listview > li.invContainer {
    display: flex !important;
    height: auto !important;
    align-items: center;
    gap: 12px;
    min-height: 0 !important;
    padding: 10px 20px !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #F0F1F4 !important;
    box-shadow: none !important;
}
body.newdesign-home #myparentslist.nd-xinfo .ui-content > .ui-listview .invLeftFaceTag {
    position: static !important;
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px;
    margin: 0 !important;
    border-radius: 50%;
    overflow: hidden;
    background: #E2E4E9;
}
body.newdesign-home #myparentslist.nd-xinfo .ui-content > .ui-listview .invLeftFaceTag img {
    width: 40px !important; height: 40px !important; object-fit: cover; border-radius: 50%; margin: 0 !important;
}
body.newdesign-home #myparentslist.nd-xinfo .ui-content > .ui-listview .invLeftFaceTag .faceTagName { display: none !important; }
body.newdesign-home #myparentslist.nd-xinfo .ui-content > .ui-listview .invText {
    position: static !important; margin: 0 !important; padding: 0 !important; flex: 1; min-width: 0;
}
body.newdesign-home #myparentslist.nd-xinfo .ui-content > .ui-listview .invText h4 {
    margin: 0 !important; font-size: 14px !important; font-weight: 500 !important; color: #20252D !important; text-shadow: none !important;
}
body.newdesign-home #myparentslist.nd-xinfo #noContactsFound {
    padding: 14px 20px; text-align: left; color: #6B7381; font-size: 14px;
}
/* Add contact / Add document: an outline button inside the card's bottom */
body.newdesign-home #myparentslist.nd-xinfo .ui-content > div:has(> #addContact),
body.newdesign-home #myparentslist.nd-xinfo .nd-xinfo-doc-actions { padding: 12px 20px 16px !important; }
/* no documents yet: the card body above the button is empty */
body.newdesign-home #myparentslist.nd-xinfo #pdfInformation:empty { display: none; }
body.newdesign-home #myparentslist.nd-xinfo #addContact,
body.newdesign-home #myparentslist.nd-xinfo #addDocument {
    position: static !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto !important;
    height: 40px;
    margin: 0 !important;
    padding: 0 16px !important;
    background: #fff !important;
    border: 1px solid #E2E4E9 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    color: #20252D !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-shadow: none !important;
}
body.newdesign-home #myparentslist.nd-xinfo #addContact:hover,
body.newdesign-home #myparentslist.nd-xinfo #addDocument:hover { background: #F6F7FA !important; }
body.newdesign-home #myparentslist.nd-xinfo #addContact:after,
body.newdesign-home #myparentslist.nd-xinfo #addDocument:after { display: none !important; }
body.newdesign-home #myparentslist.nd-xinfo #addContact:before,
body.newdesign-home #myparentslist.nd-xinfo #addDocument:before {
    content: ""; width: 16px; height: 16px; flex: 0 0 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v12M2 8h12' stroke='%23525966' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
/* schedule */
body.newdesign-home #myparentslist.nd-xinfo #childSchuedualUl { padding: 4px 0 !important; list-style: none; }
body.newdesign-home #myparentslist.nd-xinfo #childSchuedualUl > li.invContainer:not([style*="display: none"]) {
    display: flex !important;
    height: auto !important;
    align-items: center;
    gap: 8px;
    padding: 10px 20px !important;
    margin: 0 !important;
    min-height: 0 !important;
    border: none !important;
    border-bottom: 1px solid #F0F1F4 !important;
    background: transparent !important;
    font-size: 14px;
    color: #20252D;
}
body.newdesign-home #myparentslist.nd-xinfo #childSchuedualUl > li:last-child { border-bottom: none !important; }
body.newdesign-home #myparentslist.nd-xinfo #childSchuedualUl > li > font {
    width: 110px !important; padding: 0 !important; font-weight: 600; color: #525966;
}
body.newdesign-home #myparentslist.nd-xinfo #childSchuedualUl + div:not([class]):not([id]) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px !important;
    text-align: left !important;
    color: #6B7381;
}
body.newdesign-home #myparentslist.nd-xinfo #childSchuedualUl + div:not([class]):not([id]) .ui-btn {
    margin: 0 !important;
    height: 36px;
    display: inline-flex !important;
    align-items: center;
    padding: 0 14px !important;
    background: #fff !important;
    border: 1px solid #E2E4E9 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    color: #20252D !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-shadow: none !important;
}

/* forms + documents */
body.newdesign-home #myparentslist.nd-xinfo #formsInformation a.viewForm {
    display: inline-block;
    padding: 3px 0;
    color: #2563D7 !important;
    font-weight: 500;
    text-decoration: none;
}
body.newdesign-home #myparentslist.nd-xinfo #formsInformation a.viewForm:hover { text-decoration: underline; }
body.newdesign-home #myparentslist.nd-xinfo #pdfInformation { padding-bottom: 8px !important; }
body.newdesign-home #myparentslist.nd-xinfo #pdfInformation > li {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}
body.newdesign-home #myparentslist.nd-xinfo #pdfInformation .postDatafile {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    color: #2563D7 !important;
    font-weight: 500;
    text-decoration: none;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
}
body.newdesign-home #myparentslist.nd-xinfo #pdfInformation .feedFileTypeIcon { width: 32px !important; height: auto !important; margin: 0 !important; }

@media (max-width: 640px) {
    body.newdesign-home #myparentslist.nd-xinfo > .ui-content { padding: 72px 16px 24px !important; }
    body.newdesign-home #myparentslist.nd-xinfo .mainFaceTagGroupHeader { padding: 0 12px 0 16px !important; }
    body.newdesign-home #myparentslist.nd-xinfo #childInfoContent,
    body.newdesign-home #myparentslist.nd-xinfo #moreInformation,
    body.newdesign-home #myparentslist.nd-xinfo #formsInformation,
    body.newdesign-home #myparentslist.nd-xinfo #pdfInformation { padding: 12px 16px !important; }
}

/* Add/Edit Child drawer in "fields only" mode (Extended Info -> More Info edit): only the school's
   custom child fields (#ndChildFields) - photo / name / birth date / ID / notes are hidden. */
body.newdesign-home #addChildDrawer.nd-fields-only .drawer-content > .form-group,
body.newdesign-home #addChildDrawer.nd-fields-only #removeChildBtn { display: none !important; }
body.newdesign-home #addChildDrawer.nd-fields-only #ndChildFields:empty:after {
    content: "Loading\2026";
    display: block;
    color: #6B7381;
    font-size: 14px;
}

/* Loading spinner (new design): jQuery Mobile's loader ($.mobile.loading) gets the same spinner as the
   home loading state above, and is hidden while that home spinner is on screen so only one shows
   (on reload both used to appear: login/refresh calls show the jQM one, the empty home shows its own). */
body.newdesign-home .ui-loader.ui-loader-default {
    opacity: 1 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 36px !important;
    height: 36px !important;
    margin: -18px 0 0 -18px !important;
    padding: 0 !important;
    left: 50% !important;
    top: 50% !important;
}
body.newdesign-home .ui-loader.ui-loader-default .ui-icon-loading {
    display: block;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    opacity: 1 !important;
    border: 3px solid #DCE6FB;
    border-top-color: #2563D7;
    border-radius: 50%;
    box-sizing: border-box;
    box-shadow: none !important;
    animation: ndHomeSpin 0.8s linear infinite;
}
body.newdesign-home .ui-loader.ui-loader-default h1 { display: none !important; }
body.newdesign-home:has(#main.ui-page-active:not(.nd-home-ready):not(:has(.mainFaceTagItem))) .ui-loader { display: none !important; }

/* Documents (new design): delete confirmation (SchoolDocumentsView ndConfirmDelete) */
.nd-docdel-overlay { position: fixed; inset: 0; background: rgba(16, 24, 40, 0.45); z-index: 100001; }
.nd-docdel-modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100002;
    width: min(400px, calc(100vw - 32px)); box-sizing: border-box; padding: 24px;
    background: #fff; border-radius: 16px; box-shadow: 0 20px 48px rgba(16, 24, 40, 0.22);
    font-family: 'Inter', sans-serif; color: #20252D; text-align: center;
}
.nd-docdel-icon {
    width: 48px; height: 48px; margin: 0 auto 16px; border-radius: 50%; background: #FEE2E2;
    display: flex; align-items: center; justify-content: center; color: #DC2626;
}
.nd-docdel-icon svg { width: 22px; height: 22px; }
.nd-docdel-icon svg * { stroke: #DC2626; }
.nd-docdel-modal h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; color: #20252D; text-shadow: none; }
.nd-docdel-modal p { margin: 0 0 24px; font-size: 14px; line-height: 20px; color: #525966; word-break: break-word; }
.nd-docdel-modal p b { color: #20252D; font-weight: 600; }
.nd-docdel-actions { display: flex; gap: 12px; }
.nd-docdel-actions button {
    flex: 1; height: 44px; margin: 0; padding: 0 16px; border-radius: 10px; cursor: pointer;
    font: 600 15px 'Inter', sans-serif; text-shadow: none !important; box-shadow: none !important;
}
.nd-docdel-cancel { background: #fff !important; border: 1px solid #E2E4E9 !important; color: #20252D !important; }
.nd-docdel-cancel:hover { background: #F6F7FA !important; }
.nd-docdel-yes { background: #DC2626 !important; border: none !important; color: #fff !important; }
.nd-docdel-yes:hover { background: #B91C1C !important; }

/* Reports (#attendanceReports.nd-reports, opened from the side menu): no topbar cluster (message icon +
   user pill) - AttendanceView still builds it, and decorateHeader moves the old header badges into it,
   so hiding the cluster hides those too. */
body.newdesign-home #attendanceReports .nd-topbar-right { display: none !important; }

/* School selector (src/View/SchoolSwitcherView.js, users with 2+ schools and School.schoolSwitcher):
   vertically centred in the 60px new-design header, styled like the other topbar controls, and
   kept above the header's own centred title / logo. */
body.newdesign-home .head > div.schoolSwitch {
    top: 50% !important;
    transform: translateY(-50%);
    left: 72px;
    z-index: 3;
}
/* white control as in the design - !important beats the app-wide button colour (main/secondary colour) */
body.newdesign-home .schoolSwitchBtn,
body.newdesign-home .schoolSwitchBtn:hover,
body.newdesign-home .schoolSwitchBtn:focus,
body.newdesign-home .schoolSwitchBtn:active {
    height: 44px !important;
    min-width: 280px;
    padding: 0 14px 0 16px !important;
    justify-content: space-between !important;
    background: #fff !important;
    background-image: none !important;
    border: 1px solid #D0D5DD !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    color: #20252D !important;
    text-shadow: none !important;
    font: 500 16px 'Inter', sans-serif !important;
    text-align: left !important;
    outline: none;
}
body.newdesign-home .schoolSwitchBtn:hover { background: #F6F7FA !important; }
body.newdesign-home .schoolSwitchBtn .schoolSwitchName { color: #20252D !important; text-align: left; }
body.newdesign-home .schoolSwitchBtn .schoolSwitchChevron { border-color: #525966 !important; }
@media (max-width: 767px) {
    body.newdesign-home .head > div.schoolSwitch { left: 60px; max-width: calc(100vw - 200px); }
    body.newdesign-home .schoolSwitchBtn { min-width: 0 !important; font-size: 15px !important; }
}

/* =============================================================================================
 * Class page (#FrameProfile: class header + Class Children / Attendance / Class Teachers + feed) -
 * new design. CSS only. The child page (#ChildProfile) is built by the same ProfilePage view and
 * shares every rule here (:is(#FrameProfile, #ChildProfile)). Toolbar icons are swapped by src (they never change at runtime); the
 * selected list / gallery view keeps the legacy .feedDisplayOptionSelected class.
 * ============================================================================================= */
body.newdesign-home :is(#FrameProfile, #ChildProfile) { background: #F6F7FA !important; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) > .mainContent {
    background: transparent !important;
    max-width: 880px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 24px 24px 96px !important;
    box-sizing: border-box;
}

/* header card: class image + three action tiles */
body.newdesign-home :is(#FrameProfile, #ChildProfile) .profileImageContainer {
    display: flex !important;
    align-items: center;
    gap: 16px;
    height: auto !important;
    padding: 16px !important;
    margin: 0 0 16px !important;
    background: #fff !important;
    border: 1px solid #E2E4E9 !important;
    border-radius: 16px;
    box-sizing: border-box;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) .profileImage {
    display: block !important;
    flex: 0 0 72px;
    width: 72px !important;
    height: 72px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 12px;
    overflow: hidden;
    background: #F0F1F4;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) .profileImage img {
    width: 72px !important;
    height: 72px !important;
    object-fit: cover;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) .profileImage > div,
body.newdesign-home :is(#FrameProfile, #ChildProfile) .profileImage > a { display: none !important; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) .profilePageMenuContainer {
    flex: 1 1 auto;
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 12px;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) .profilePageMenuContainer > [class^="ui-block-"] {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) .profilePageMenuContainer a { display: block; text-decoration: none !important; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) .profilePageMenuItem {
    display: flex !important;
    align-items: center;
    gap: 12px;
    height: 64px !important;
    padding: 0 16px !important;
    box-sizing: border-box;
    background: #fff !important;
    border: 1px solid #E2E4E9 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    text-align: left !important;
    cursor: pointer;
    position: relative;
    transition: background .15s, border-color .15s;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) .profilePageMenuItem:hover { background: #F6F7FA !important; border-color: #D0D5DD !important; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) .profilePageMenuItem:active:after { display: none !important; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) .profilePageMenuItem > img {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px;
    padding: 9px;
    box-sizing: border-box;
    margin: 0 !important;
    position: static !important;
    border-radius: 10px;
    background: #EEF3FD;
    object-fit: contain;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) .profilePageMenuItem > p {
    margin: 0 !important;
    width: auto !important;
    font: 500 15px/20px 'Inter', sans-serif !important;
    color: #20252D !important;
    text-shadow: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block !important;
}
/* attendance count (e.g. 0/39): pill at the tile's right edge */
body.newdesign-home :is(#FrameProfile, #ChildProfile) .profilePageMenuItem > .notificationStyle {
    position: static !important;
    order: 3;
    margin: 0 0 0 auto !important;
    transform: none !important;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) .profilePageMenuItem > .notificationStyle > div {
    margin: 0 !important;
    min-width: 0 !important;
    width: auto !important;
    height: 22px !important;
    padding: 0 8px !important;
    border-radius: 11px !important;
    background: #EEF3FD !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) .profilePageMenuItem > .notificationStyle p {
    margin: 0 !important;
    font: 600 12px/22px 'Inter', sans-serif !important;
    color: #2563D7 !important;
    text-shadow: none !important;
}

/* feed toolbar: white bar, icon buttons with hover, blue selected view */
body.newdesign-home :is(#FrameProfile, #ChildProfile) .feedBar.feedBarAnchorClass {
    display: flex !important;
    align-items: center;
    gap: 4px;
    max-width: none !important;
    height: 56px !important;
    padding: 0 10px !important;
    margin: 0 0 16px !important;
    background: #fff !important;
    border: 1px solid #E2E4E9;
    border-radius: 12px;
    box-sizing: border-box;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) .feedBar .feedBarGroup {
    position: static !important;
    display: flex !important;
    align-items: center;
    gap: 4px;
    width: auto !important;
    height: 100%;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) .feedBar .feedBarGroupLeft { margin-right: auto; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) .feedBar .feedBarGroup > div:not(.ui-input-search) {
    float: none !important;
    height: 38px !important;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) .feedBar .feedBarButton {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    border-radius: 8px;
    position: relative;
    transition: background .15s;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) .feedBar .feedBarButton[style*="display: none"] { display: none !important; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) .feedBar .feedBarButton:hover { background: #F6F7FA; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) .feedBar .feedBarButton:active:after { display: none !important; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) .feedBar .feedBarButton img {
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    object-fit: contain;
    filter: brightness(0) opacity(.6);
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) .feedBar .feedBarButtonTextWrapper { display: none !important; }
/* the refresh icon carries an inline margin-top:13px !important - balance it so it centres like the others */
body.newdesign-home :is(#FrameProfile, #ChildProfile) .feedBar img[src="img/refreshN.png"] { margin-bottom: 13px !important; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) .feedBar .feedBarCenter { margin: 0 !important; float: none !important; }
/* list / gallery switch as a small segmented control */
body.newdesign-home :is(#FrameProfile, #ChildProfile) .feedBar .feedBarGroupRight:has(> [data-goal="postDisplay"]) {
    padding: 3px;
    gap: 2px;
    height: auto;
    margin-left: 6px;
    background: #F0F1F4;
    border-radius: 10px;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) .feedBar .feedBarGroupRight:has(> [data-goal="postDisplay"]) .feedBarButton { width: 34px !important; height: 32px !important; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) .feedBar .feedDisplayOptionSelected {
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) .feedBar .feedDisplayOptionSelected img {
    filter: invert(30%) sepia(90%) saturate(2400%) hue-rotate(212deg) brightness(92%);
}
/* cleaner line icons (same buttons, same handlers) */
body.newdesign-home :is(#FrameProfile, #ChildProfile) .feedBar img[src="img/refreshN.png"] {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E%3Cpath d='M16.5 10a6.5 6.5 0 11-1.9-4.6M16.5 3.5v3.6h-3.6' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) .feedBar img[src="img/downloadN.png"] {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E%3Cpath d='M10 3v9.5M6 8.5l4 4 4-4M3.5 15.5v1h13v-1' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) .feedBar img[src="img/filter.png"] {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E%3Cpath d='M3 4h14l-5.5 6.5V16l-3-1.5v-4L3 4z' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) .feedBar img[src="img/postGrey.png"] {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 17.5V3M4.5 3.5h10l-2 3.5 2 3.5h-10' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) .feedBar img[src="img/albums2N.png"] {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E%3Cpath d='M2.5 5.5a1 1 0 011-1h4l1.5 2h7.5a1 1 0 011 1v8a1 1 0 01-1 1h-13a1 1 0 01-1-1v-10z' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) .feedBar img[src="img/postDisplayN.png"] {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E%3Crect x='3' y='3.5' width='14' height='5.5' rx='1.2' stroke='%23000' stroke-width='1.5'/%3E%3Crect x='3' y='11' width='14' height='5.5' rx='1.2' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) .feedBar img[src="img/galleryDisplayN.png"] {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E%3Crect x='3' y='3' width='6' height='6' rx='1.2' stroke='%23000' stroke-width='1.5'/%3E%3Crect x='11' y='3' width='6' height='6' rx='1.2' stroke='%23000' stroke-width='1.5'/%3E%3Crect x='3' y='11' width='6' height='6' rx='1.2' stroke='%23000' stroke-width='1.5'/%3E%3Crect x='11' y='11' width='6' height='6' rx='1.2' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) .feedBar img[src="img/downloadObservation.png"] { filter: brightness(0) opacity(.6); }

/* posts: white rounded cards */
body.newdesign-home :is(#FrameProfile, #ChildProfile) .profileNewsFeed { background: transparent !important; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) .profileNewsFeed ul.postList {
    max-width: none !important;   /* legacy .postList caps it at 800px - match the header / toolbar width */
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) .profileNewsFeed { max-width: none !important; width: 100% !important; margin: 0 !important; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) .profileNewsFeed ul.postList > li {
    background: #fff !important;
    border: 1px solid #E2E4E9 !important;
    border-radius: 16px !important;
    margin: 0 0 16px !important;
    overflow: hidden;
    box-shadow: none !important;
}

@media (max-width: 767px) {
    body.newdesign-home :is(#FrameProfile, #ChildProfile) > .mainContent { padding: 16px 12px 96px !important; }
    body.newdesign-home :is(#FrameProfile, #ChildProfile) .profileImageContainer { flex-wrap: wrap; padding: 12px !important; gap: 12px; }
    body.newdesign-home :is(#FrameProfile, #ChildProfile) .profileImage,
    body.newdesign-home :is(#FrameProfile, #ChildProfile) .profileImage img { flex-basis: 56px; width: 56px !important; height: 56px !important; }
    body.newdesign-home :is(#FrameProfile, #ChildProfile) .profilePageMenuContainer { flex-basis: 100%; gap: 8px; }
    /* tiles stack icon over label on phones */
    body.newdesign-home :is(#FrameProfile, #ChildProfile) .profilePageMenuItem {
        flex-direction: column; justify-content: center; gap: 6px; height: 84px !important; padding: 8px 6px !important; text-align: center !important;
    }
    body.newdesign-home :is(#FrameProfile, #ChildProfile) .profilePageMenuItem > p { font-size: 13px !important; white-space: normal; text-align: center; line-height: 16px !important; }
    body.newdesign-home :is(#FrameProfile, #ChildProfile) .profilePageMenuItem > .notificationStyle { position: absolute !important; top: 6px; right: 6px; margin: 0 !important; }
    body.newdesign-home :is(#FrameProfile, #ChildProfile) .feedBar.feedBarAnchorClass { padding: 0 6px !important; gap: 2px; }
    body.newdesign-home :is(#FrameProfile, #ChildProfile) .feedBar .feedBarButton { width: 34px !important; }
}

/* =============================================================================================
 * Class / child page posts (#FrameProfile, #ChildProfile) - new design card, as in the design: avatar (or initials) + bold
 * creator name, "> class / child" line with small round pictures + names, date and a "Tag Child"
 * chip on the right, full-width media, icon-only footer (like / comment ... menu).
 * FaceTagHeaderView adds .nd-ft-initials / .nd-ft-creator / .nd-ft-name in the new design; they
 * are shown only here (other feeds keep today's header).
 * ============================================================================================= */
body.newdesign-home .nd-ft-initials,
body.newdesign-home .nd-ft-creator,
body.newdesign-home .nd-ft-name { display: none; }

/* header */
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postHeader {
    height: auto !important;
    padding: 20px 20px 12px !important;
    white-space: normal !important;
    position: relative;
    border-bottom: none !important;
    box-sizing: border-box;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postSettings {
    position: absolute !important;
    top: 20px; right: 20px;
    margin: 0 !important;
    height: auto !important;
    font: 400 14px 'Inter', sans-serif !important;
    color: #6B7381 !important;
    z-index: 2;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagDivContainer {
    display: grid !important;
    grid-template-columns: 48px auto minmax(0, 1fr);
    grid-template-areas: "av name name" "av arrow tags";
    column-gap: 0;
    row-gap: 4px;
    align-items: center;
    height: auto !important;
    padding: 0 150px 0 0 !important;
    box-sizing: border-box;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagLeftDiv { display: contents !important; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagLeftDiv > .faceTagImage {
    grid-area: av;
    align-self: center;
    width: 48px; height: 48px;
    margin: 0 !important;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    background: #E3F2F6;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagLeftDiv > .faceTagImage img {
    width: 48px !important; height: 48px !important;
    object-fit: cover; border-radius: 50%; display: block;
    background: transparent !important;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagImage .faceTagName { display: none !important; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagImage.nd-ft-nophoto img { visibility: hidden; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagImage.nd-ft-nophoto .nd-ft-initials {
    display: flex; position: absolute; inset: 0;
    align-items: center; justify-content: center;
    font: 600 15px 'Inter', sans-serif; color: #3E9DB8; letter-spacing: .02em;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .nd-ft-creator {
    display: block;
    grid-area: name;
    padding-left: 14px;
    font: 600 17px/24px 'Inter', sans-serif;
    color: #20252D;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagLeftDiv > .postArrowDiv:not(.faceTagImage) {
    grid-area: arrow;
    margin: 0 !important;
    padding-left: 14px;
    display: flex; align-items: center;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postArrowDiv > span:not(.nd-ft-initials) {
    margin: 0 8px 0 0 !important;
    font: 400 15px 'Inter', sans-serif !important;
    color: #9AA1AC !important;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagCenterIscrollWrapperDiv {
    grid-area: tags;
    position: relative !important;
    top: auto !important; left: auto !important; right: auto !important;
    height: 28px !important;
    min-width: 0;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagCenterDiv { padding: 0 !important; height: 28px; white-space: nowrap; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagCenterDiv ul {
    display: flex !important; align-items: center; gap: 14px;
    float: none !important; width: auto !important; height: 28px !important;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagCenterDiv li {
    display: inline-flex !important; align-items: center; gap: 8px;
    margin: 0 !important; overflow: visible !important; flex: 0 0 auto;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagCenterDiv li:not([data-id]):not(:has(.newPrivateIcon)) { display: none !important; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagCenterDiv li img {
    width: 26px !important; height: 26px !important;
    border-radius: 50%; object-fit: cover; background: #F0F1F4 !important;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagCenterDiv li img.newPrivateIcon { width: 18px !important; height: 18px !important; border-radius: 0; background: transparent !important; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagCenterDiv .nd-ft-name {
    display: inline; font: 400 15px 'Inter', sans-serif; color: #525966;
}
/* Tag Child chip, under the date */
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagRightDiv {
    position: absolute !important;
    top: 48px !important; right: 20px !important;
    margin: 0 !important;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagMoreButton,
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagMoreButton:hover {
    background: #F6F7FA !important;
    border: none !important; border-radius: 8px !important; box-shadow: none !important;
    padding: 0 !important; margin: 0 !important; width: auto !important; height: auto !important;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagMoreButton a {
    display: inline-flex !important; align-items: center; gap: 6px;
    padding: 5px 10px !important; text-decoration: none !important;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagMoreButton img {
    width: 16px !important; height: 16px !important; margin: 0 !important;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 20 20'%3E%3Cpath d='M10.6 2.5H16a1.5 1.5 0 011.5 1.5v5.4L9.4 17.5 2.5 10.6l8.1-8.1z' stroke='%236B7381' stroke-width='1.5' stroke-linejoin='round'/%3E%3Ccircle cx='13.5' cy='6.5' r='1.2' fill='%236B7381'/%3E%3C/svg%3E");
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagMoreButton p {
    /* legacy .faceTagMoreButton p is absolute (left:42px, width:10px) - back in the chip's flow */
    position: static !important; left: auto !important; top: auto !important; width: auto !important;
    margin: 0 !important; white-space: nowrap !important;
    font: 500 14px/20px 'Inter', sans-serif !important; color: #525966 !important; text-shadow: none !important;
}

/* body: text with the card padding, media edge to edge */
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postBody { margin: 0 !important; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .textPost {
    padding: 0 20px 14px !important;
    min-height: 0 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 17px !important;
    color: #20252D;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postMedia img.postImage { width: 100%; max-width: 100%; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postDatafileWrapper { margin-left: 20px !important; margin-right: 20px !important; }

/* footer: like + comment icons left, menu / edit right; counts stay as a small grey line */
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postStatus {
    border-top: none !important;
    padding: 4px 12px 12px !important;
    background: #fff !important;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postStatusTags { padding: 0 8px !important; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postStatusTagsStatus p {
    font: 400 13px 'Inter', sans-serif !important; color: #6B7381 !important;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postStatusOptions {
    display: flex !important; align-items: center; gap: 4px;
    height: auto !important; padding: 0 !important; margin: 0 !important;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postStatusOptions > a { display: inline-flex; float: none !important; }
/* order: like, comment, (draft / print buttons), then edit + menu pushed to the right */
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postStatusOptions > a:has(img[data-goal="postHeart"]) { order: 1; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postStatusOptions > a:has(img[data-goal="postComment"]) { order: 2; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postStatusOptions > button { order: 3; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postStatusOptions > a:has(img[data-goal="postEdit"]) { order: 8; margin-left: auto; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postStatusOptions > a:has(img[data-goal="postOptions"]) { order: 9; margin-left: auto; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postStatusOptions:has(img[data-goal="postEdit"]) > a:has(img[data-goal="postOptions"]) { margin-left: 0; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postStatusOptions img {
    width: 40px !important; height: 40px !important;
    padding: 9px; box-sizing: border-box; margin: 0 !important;
    border-radius: 8px; float: none !important; cursor: pointer;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postStatusOptions img:hover { background: #F6F7FA; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postStatusOptions img[src="img/icons_post_like.png"],
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postStatusOptions img[src="img/postHeart-sketch.png"] {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7.5-4.6-7.5-10.1A4.4 4.4 0 0112 7.1a4.4 4.4 0 017.5 2.8C19.5 15.4 12 20 12 20z' stroke='%23525966' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postStatusOptions img[src="img/icons_post_like_red.png"] {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7.5-4.6-7.5-10.1A4.4 4.4 0 0112 7.1a4.4 4.4 0 017.5 2.8C19.5 15.4 12 20 12 20z' fill='%23DC2626' stroke='%23DC2626' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postStatusOptions img[data-goal="postComment"] {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12a7.5 7.5 0 1114.1 3.6l1 3.9-3.9-1A7.5 7.5 0 014.5 12z' stroke='%23525966' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postStatusOptions img[data-goal="postOptions"] {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='5.5' r='1.6' fill='%239AA1AC'/%3E%3Ccircle cx='12' cy='12' r='1.6' fill='%239AA1AC'/%3E%3Ccircle cx='12' cy='18.5' r='1.6' fill='%239AA1AC'/%3E%3C/svg%3E");
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postStatusOptions img[data-goal="postEdit"] {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' viewBox='0 0 20 20'%3E%3Cpath d='M12.5 4.5l3 3L7 16H4v-3l8.5-8.5z' stroke='%23525966' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postStatusOptions button {
    margin: 0 0 0 8px !important;
    height: 32px; padding: 0 12px !important;
    border-radius: 8px !important; box-shadow: none !important; text-shadow: none !important;
    font: 500 13px 'Inter', sans-serif !important;
}

@media (max-width: 767px) {
    body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postHeader { padding: 16px 16px 10px !important; }
    body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagDivContainer { grid-template-columns: 40px auto minmax(0, 1fr); padding-right: 96px !important; }
    body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagLeftDiv > .faceTagImage,
    body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagLeftDiv > .faceTagImage img { width: 40px !important; height: 40px !important; }
    body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .nd-ft-creator { font-size: 15px; padding-left: 10px; }
    body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagLeftDiv > .postArrowDiv:not(.faceTagImage) { padding-left: 10px; }
    body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postSettings { top: 16px; right: 16px; font-size: 13px !important; }
    body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagRightDiv { top: 42px !important; right: 16px !important; }
    body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .textPost { padding: 0 16px 12px !important; }
}

/* =============================================================================================
 * Feed "Filter" dialog (FeedView feedFilterPosts -> .nd-feed-filter in the new design): white card,
 * header with title + close button, post-type chips (selected = included, .non = excluded),
 * search and date range fields, full-width Done.
 * ============================================================================================= */
/* Shown as the new-design slide-in: bottom sheet on phones, right-hand panel from 768px (like .nd-drawer).
   View.Utils.Dialog centres #dialog with inline left/top/margins measured before .nd-feed-filter is added,
   which pushed the card off the right edge on phones - those are overridden here. */
body.newdesign-home #dialog:has(.nd-feed-filter) {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: 90vh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 env(safe-area-inset-bottom) !important;
    box-sizing: border-box;
    border: none !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -8px 24px rgba(16, 24, 40, 0.12) !important;
    animation: ndFilterSheetUp 0.3s ease;
}
/* the dialog caps a tall body at 40vh with its own scroll (inline) - the sheet scrolls as a whole instead */
body.newdesign-home #dialog:has(.nd-feed-filter) > div { max-height: none !important; overflow: visible !important; }
@keyframes ndFilterSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes ndFilterSheetLeft { from { transform: translateX(100%); } to { transform: translateX(0); } }
@media (min-width: 768px) {
    body.newdesign-home #dialog:has(.nd-feed-filter) {
        top: 0 !important;
        left: auto !important;
        width: 480px !important;
        height: 100% !important;
        max-height: none !important;
        padding-bottom: 0 !important;
        border-radius: 0 !important;
        box-shadow: -8px 0 24px rgba(16, 24, 40, 0.12) !important;
        animation-name: ndFilterSheetLeft;
    }
}
body.newdesign-home #dialog:has(.nd-feed-filter) span h4 { margin: 0 !important; font-weight: 400; }
body.newdesign-home .nd-feed-filter { margin: 0 !important; font-family: 'Inter', sans-serif; color: #20252D; }
body.newdesign-home .nd-feed-filter .filterheader {
    display: flex; align-items: center; justify-content: space-between;
    height: auto !important;
    padding: 18px 16px 14px 24px;
    background: #fff !important;
    border-bottom: 1px solid #F0F1F4;
    border-radius: 0 !important;
    color: #20252D !important;
    font: 600 18px/26px 'Inter', sans-serif !important;
}
body.newdesign-home .nd-feed-filter .filterheader::after { display: none !important; }
body.newdesign-home #dialog:has(.nd-feed-filter) .filterheader { position: sticky; top: 0; z-index: 1; }
body.newdesign-home .nd-feed-filter .nd-filter-close {
    width: 34px; height: 34px; margin: 0; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: transparent !important; border: none !important; border-radius: 8px !important;
    box-shadow: none !important; cursor: pointer;
}
body.newdesign-home .nd-feed-filter .nd-filter-close:hover { background: #F6F7FA !important; }
body.newdesign-home .nd-feed-filter .filtercontent {
    max-width: none !important;
    padding: 8px 24px 24px !important;
    text-align: left;
}
/* section labels */
body.newdesign-home .nd-feed-filter .filtercontent > div:not(.ui-input-text):not(.ui-input-search):not(:has(input)) {
    margin: 18px 0 10px !important;
    font: 600 13px/18px 'Inter', sans-serif !important;
    color: #525966 !important;
    letter-spacing: .02em;
    text-transform: uppercase;
}
/* post type chips */
body.newdesign-home .nd-feed-filter .filtercontent > span {
    display: inline-flex !important; align-items: center; gap: 6px;
    height: 34px; padding: 0 14px !important; margin: 0 6px 8px 0 !important;
    border: 1px solid #2563D7 !important;
    border-radius: 999px !important;
    background: #EEF3FD !important;
    color: #1D4ED8 !important;
    font: 500 14px 'Inter', sans-serif !important;
    cursor: pointer; user-select: none;
    transition: background .15s, border-color .15s, color .15s;
}
body.newdesign-home .nd-feed-filter .filtercontent > span::before {
    content: ""; width: 14px; height: 14px; flex: 0 0 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='%231D4ED8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
body.newdesign-home .nd-feed-filter .filtercontent > span.non {
    border-color: #E2E4E9 !important;
    background: #fff !important;
    color: #525966 !important;
}
body.newdesign-home .nd-feed-filter .filtercontent > span.non::before { display: none; }
body.newdesign-home .nd-feed-filter .filtercontent > span.non:hover { background: #F6F7FA !important; }
/* search + dates */
body.newdesign-home .nd-feed-filter .ui-input-search,
body.newdesign-home .nd-feed-filter .ui-input-text {
    margin: 0 !important;
    border: 1px solid #E2E4E9 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: none !important;
}
body.newdesign-home .nd-feed-filter .ui-input-search {
    display: block !important;
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box !important;   /* jQM adds icon padding + border on top of the 100% */
}
body.newdesign-home .nd-feed-filter .ui-input-search input { width: 100% !important; max-width: 100%; box-sizing: border-box; }
body.newdesign-home .nd-feed-filter .ui-input-search:focus-within,
body.newdesign-home .nd-feed-filter .ui-input-text:focus-within { border-color: #2563D7 !important; box-shadow: 0 0 0 3px rgba(37, 99, 215, 0.12) !important; }
body.newdesign-home .nd-feed-filter input {
    height: 42px !important; min-height: 42px !important;
    font: 400 16px 'Inter', sans-serif !important; color: #20252D !important;   /* 16px: iOS doesn't zoom on focus */
    box-sizing: border-box; text-shadow: none !important;
}
body.newdesign-home .nd-feed-filter input[type="date"] { padding: 0 12px !important; }
body.newdesign-home .nd-feed-filter input:not(.ui-input-search input):not(.ui-input-text input) {
    border: 1px solid #E2E4E9 !important; border-radius: 10px !important; background: #fff !important; padding: 0 12px !important; outline: none;
}
body.newdesign-home .nd-feed-filter .filtercontent > div:has(input[type="date"]) {
    display: flex !important; align-items: center; gap: 10px;
    margin: 0 !important; font: 400 14px 'Inter', sans-serif; color: #6B7381; white-space: nowrap;
}
body.newdesign-home .nd-feed-filter .filtercontent > div:has(input[type="date"]) > * { flex: 1 1 0; min-width: 0; }
body.newdesign-home .nd-feed-filter hr { border: none; border-top: 1px solid #F0F1F4; margin: 24px -24px 20px; }
body.newdesign-home .nd-feed-filter .filtercontent > button,
body.newdesign-home .nd-feed-filter .filtercontent > .ui-btn:has(button),
body.newdesign-home .nd-feed-filter .filtercontent button:not(.nd-filter-close) {
    display: block !important;
    width: 100% !important;
    height: 44px;
    margin: 0 !important;
    padding: 0 16px !important;
    background: #2563D7 !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    color: #fff !important;
    text-shadow: none !important;
    font: 600 15px 'Inter', sans-serif !important;
    cursor: pointer;
}
body.newdesign-home .nd-feed-filter .filtercontent button:not(.nd-filter-close):hover { background: #1D4ED8 !important; }

/* Class page posts - compact header / footer (overrides the block above) */
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postHeader { padding: 14px 16px 10px !important; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagDivContainer {
    grid-template-columns: 38px auto minmax(0, 1fr);
    row-gap: 1px;
    padding-right: 120px !important;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagLeftDiv > .faceTagImage,
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagLeftDiv > .faceTagImage img { width: 38px !important; height: 38px !important; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagImage.nd-ft-nophoto .nd-ft-initials { font-size: 12px; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .nd-ft-creator { padding-left: 10px; font-size: 15px; line-height: 20px; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagLeftDiv > .postArrowDiv:not(.faceTagImage) { padding-left: 10px; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postArrowDiv > span:not(.nd-ft-initials) { font-size: 13px !important; margin-right: 6px !important; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagCenterIscrollWrapperDiv,
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagCenterDiv,
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagCenterDiv ul { height: 22px !important; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagCenterDiv ul { gap: 10px; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagCenterDiv li { gap: 6px; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagCenterDiv li img { width: 20px !important; height: 20px !important; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagCenterDiv li img.newPrivateIcon { width: 15px !important; height: 15px !important; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagCenterDiv .nd-ft-name { font-size: 13px; }
/* date + Tag Child stacked tight in the top-right, chip on the card's own white */
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postSettings { top: 14px; right: 16px; font-size: 13px !important; line-height: 18px; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagRightDiv { top: 34px !important; right: 8px !important; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagMoreButton,
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagMoreButton:hover { background: transparent !important; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagMoreButton a { padding: 3px 8px !important; gap: 5px; border-radius: 8px; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagMoreButton a:hover { background: #F6F7FA; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagMoreButton img { width: 14px !important; height: 14px !important; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagMoreButton p { font-size: 13px !important; line-height: 18px !important; color: #6B7381 !important; }
/* footer: no empty counts row, no trailing space */
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postStatus { padding: 2px 8px 6px !important; height: auto !important; min-height: 0 !important; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postStatusTagsStatus p { margin: 6px 4px 0 !important; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postStatusTagsStatus p:empty,
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postStatusTagsStatus a:has(> p:empty) { display: none !important; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postStatusTags:not(:has(.postStatusTagsStatus p:not(:empty))):not(:has(.postStatusTagsTags *)) { display: none !important; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postStatusOptions { margin: 0 !important; min-height: 0 !important; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postStatusOptions img { width: 36px !important; height: 36px !important; padding: 8px; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .commentsContainer:empty,
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .commentsContainer ol:empty { display: none !important; }
@media (max-width: 767px) {
    body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagDivContainer { padding-right: 96px !important; }
    body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagRightDiv { top: 32px !important; }
}
/* the post's <article class="postContainer"> keeps legacy margin-bottom:20px + padding:5px inside the
   card - that was the empty space under the footer icons (and the inset divider lines) */
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li > article.postContainer { margin: 0 !important; padding: 0 !important; }

/* Child page (#ChildProfile) extras: round child photo, a single menu tile ("info") at its natural
   width on the right instead of stretching across the card, tile labels start with a capital */
body.newdesign-home #ChildProfile .profileImage,
body.newdesign-home #ChildProfile .profileImage img { border-radius: 50% !important; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) .profilePageMenuContainer:has(> a:only-child) {
    grid-auto-columns: minmax(180px, 240px);
    justify-content: end;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) .profilePageMenuItem > p::first-letter { text-transform: uppercase; }
@media (max-width: 767px) {
    body.newdesign-home :is(#FrameProfile, #ChildProfile) .profilePageMenuContainer:has(> a:only-child) { grid-auto-columns: minmax(0, 1fr); }
}

/* =============================================================================================
 * Adult details (#AdultDetails: a parent / follower / teacher opened from a child or class) - new
 * design. One card: avatar + name on top (AdultController passes showNameNextToPicture in the new
 * design), then the Email / Phone / Attendance code lines as labelled rows (label left, value right).
 * ============================================================================================= */
body.newdesign-home #AdultDetails { background: #F6F7FA !important; }
body.newdesign-home #AdultDetails > .mainContent {
    background: transparent !important;
    max-width: 640px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 32px 24px 48px !important;
    box-sizing: border-box;
}
body.newdesign-home #AdultDetails .profileImageContainer {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    height: auto !important;
    margin: 0 !important;
    padding: 28px 24px 24px !important;
    background: #fff !important;
    border: 1px solid #E2E4E9 !important;
    border-radius: 16px;
    box-sizing: border-box;
    text-align: center;
}
/* with detail rows below, the avatar block is the card's top half */
body.newdesign-home #AdultDetails .profileImageContainer:has(~ h4) { border-radius: 16px 16px 0 0; border-bottom: none !important; }
body.newdesign-home #AdultDetails .profileImage {
    display: block !important;
    width: 96px !important; height: 96px !important;
    padding: 0 !important; margin: 0 !important;
    border-radius: 50%;
    overflow: hidden;
    background: #E3F2F6;
}
body.newdesign-home #AdultDetails .profileImage img {
    width: 96px !important; height: 96px !important;
    object-fit: cover; border-radius: 50%; margin: 0 !important;
    border: none !important; box-shadow: none !important;
}
body.newdesign-home #AdultDetails .profileImage > div,
body.newdesign-home #AdultDetails .profileImage > a { display: none !important; }
body.newdesign-home #AdultDetails .profileImageContainer > h2 {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    font: 600 20px/28px 'Inter', sans-serif !important;
    color: #20252D !important;
    text-shadow: none !important;
    text-align: center !important;
}
/* detail rows */
body.newdesign-home #AdultDetails > .mainContent > br { display: none; }
body.newdesign-home #AdultDetails > .mainContent > h4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 !important;
    padding: 16px 24px !important;
    background: #fff;
    border: 1px solid #E2E4E9;
    border-top: 1px solid #F0F1F4;
    border-bottom: none;
    font: 500 14px/20px 'Inter', sans-serif !important;
    color: #6B7381 !important;
    text-shadow: none !important;
    text-align: left;
    word-break: break-word;
}
body.newdesign-home #AdultDetails > .mainContent > h4:last-of-type {
    border-bottom: 1px solid #E2E4E9;
    border-radius: 0 0 16px 16px;
}
body.newdesign-home #AdultDetails > .mainContent > h4 a {
    color: #2563D7 !important;
    font-weight: 500;
    text-decoration: none !important;
    text-align: right;
    min-width: 0;
    overflow-wrap: anywhere;
}
body.newdesign-home #AdultDetails > .mainContent > h4 a:hover { text-decoration: underline !important; }
@media (max-width: 640px) {
    body.newdesign-home #AdultDetails > .mainContent { padding: 20px 16px 32px !important; }
    body.newdesign-home #AdultDetails > .mainContent > h4 { padding: 14px 16px !important; }
}

/* =============================================================================================
 * Class / child page - gallery view (feed "grid" switch). FeedView builds floated thirds
 * (.galleryPostContainer.ui-block-a/b/c > li > article > .galleryPost) with JS pixel heights; in the
 * new design they become an even grid of square, rounded cards (aspect-ratio instead of the px
 * heights). Text / daily-sheet tiles get a compact type scale and fade out at the bottom.
 * ============================================================================================= */
/* the tiles live in ul.postList > div.ui-grid-b (FeedView appends them to the list's first div) */
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > .ui-grid-b:has(> .galleryPostContainer) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0 !important;
    padding: 0 !important;
}
/* jQM's clearfix pseudo-elements would each take a grid cell */
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > .ui-grid-b:has(> .galleryPostContainer)::before,
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > .ui-grid-b:has(> .galleryPostContainer)::after { display: none !important; content: none !important; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > .ui-grid-b:has(> .galleryPostContainer) > :not(.galleryPostContainer) { grid-column: 1 / -1; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) .ui-grid-b > .galleryPostContainer {
    width: auto !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) .galleryPostContainer > li {
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) .galleryPostContainer article {
    position: relative;
    aspect-ratio: 1 / 1;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff;
    border: 1px solid #E2E4E9 !important;
    border-radius: 14px;
    overflow: hidden;
    box-sizing: border-box;
    transition: box-shadow .15s, border-color .15s, transform .15s;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) .galleryPostContainer article:hover {
    border-color: #D0D5DD !important;
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.10);
    transform: translateY(-1px);
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) .galleryPostContainer article.isSelected {
    opacity: 1;
    border: 2px solid #2563D7 !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 215, 0.15);
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) .galleryPostContainer .galleryPost,
body.newdesign-home :is(#FrameProfile, #ChildProfile) .galleryPostContainer .galleryPost:hover {
    height: 100% !important;          /* beats the JS pixel height - the article is the square */
    width: 100%;
    border: none !important;
    opacity: 1 !important;
    box-sizing: border-box;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) .postGalleryMedia { background-size: cover !important; background-position: center !important; }
/* text / daily sheet tiles */
body.newdesign-home :is(#FrameProfile, #ChildProfile) .textPostGallery {
    padding: 14px 14px 0 !important;
    font: 400 13px/18px 'Inter', sans-serif !important;
    color: #20252D;
    text-align: left;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) .textPostGallery > p { margin: 0 !important; font: inherit !important; color: inherit; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) .textPostGallery h1,
body.newdesign-home :is(#FrameProfile, #ChildProfile) .textPostGallery h2 {
    margin: 4px 0 8px !important;
    font: 600 14px/19px 'Inter', sans-serif !important;
    color: #20252D !important;
    text-align: left !important;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) .textPostGallery h3,
body.newdesign-home :is(#FrameProfile, #ChildProfile) .textPostGallery h4 {
    margin: 8px 0 2px !important;
    font: 600 12px/16px 'Inter', sans-serif !important;
    color: #525966 !important;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) .textPostGallery * { font-family: 'Inter', sans-serif !important; max-width: 100%; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) .textPostGallery .feedFileTypeIcon { width: 28px !important; height: auto !important; margin: 6px 0 4px !important; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) .textPostGallery a { color: #2563D7 !important; text-decoration: none; }
@media (max-width: 767px) {
    body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > .ui-grid-b:has(> .galleryPostContainer) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    body.newdesign-home :is(#FrameProfile, #ChildProfile) .galleryPostContainer article { border-radius: 12px; }
    body.newdesign-home :is(#FrameProfile, #ChildProfile) .textPostGallery { padding: 10px 10px 0 !important; font-size: 12px !important; }
}

/* =============================================================================================
 * Daily sheet (NewPostView daily-sheet mode: #NewPost<id>.nd-dailysheet) - new design.
 * Child header as a card, each section (Meals / Naps / Diapers / Activities / Supplies) a
 * collapsible card with a chevron, "Add ..." as an outline button, entries as rows with icon
 * edit / delete, then Notes and Date fields. Legacy markup and handlers unchanged.
 * ============================================================================================= */
body.newdesign-home :is(.nd-dailysheet, .nd-newpost) { background: #F6F7FA !important; }
body.newdesign-home :is(.nd-dailysheet, .nd-newpost) > [data-role="content"] {
    background: transparent !important;
    max-width: 880px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 24px 24px 48px !important;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}
/* header Save -> primary button */
body.newdesign-home :is(.nd-dailysheet, .nd-newpost) > .head #saveBtn a { text-decoration: none !important; }
body.newdesign-home :is(.nd-dailysheet, .nd-newpost) > .head #saveBtn a > div {
    display: flex !important; align-items: center; justify-content: center;
    height: 36px !important; min-width: 72px; padding: 0 16px !important; margin: 0 !important;
    background: #2563D7 !important; border: none !important; border-radius: 8px !important; box-shadow: none !important;
}
body.newdesign-home :is(.nd-dailysheet, .nd-newpost) > .head #saveBtn a > div:hover { background: #1D4ED8 !important; }
body.newdesign-home :is(.nd-dailysheet, .nd-newpost) > .head #saveBtn p { margin: 0 !important; font: 600 14px 'Inter', sans-serif !important; color: #fff !important; text-shadow: none !important; }

/* child header card: creator > child (names shown, small round pictures) */
body.newdesign-home :is(.nd-dailysheet, .nd-newpost) .postHeader {
    height: auto !important;
    margin: 0 0 16px !important;
    padding: 12px 16px !important;
    background: #fff;
    border: 1px solid #E2E4E9;
    border-radius: 14px;
    box-sizing: border-box;
    white-space: nowrap;
}
body.newdesign-home :is(.nd-dailysheet, .nd-newpost) .postHeader .faceTagDivContainer {
    display: flex !important; align-items: center; gap: 10px;
    height: auto !important; padding: 0 !important;
}
body.newdesign-home :is(.nd-dailysheet, .nd-newpost) .postHeader .faceTagLeftDiv {
    display: flex !important; align-items: center; gap: 8px;
    float: none !important; width: auto !important; margin: 0 !important;
}
body.newdesign-home :is(.nd-dailysheet, .nd-newpost) .postHeader .faceTagLeftDiv > .faceTagImage {
    width: 32px; height: 32px; margin: 0 !important; border-radius: 50%; overflow: hidden; position: relative; background: #E3F2F6;
}
body.newdesign-home :is(.nd-dailysheet, .nd-newpost) .postHeader .faceTagImage img { width: 32px !important; height: 32px !important; object-fit: cover; border-radius: 50%; background: transparent !important; }
body.newdesign-home :is(.nd-dailysheet, .nd-newpost) .postHeader .faceTagName { display: none !important; }
body.newdesign-home :is(.nd-dailysheet, .nd-newpost) .postHeader .faceTagImage.nd-ft-nophoto img { visibility: hidden; }
body.newdesign-home :is(.nd-dailysheet, .nd-newpost) .postHeader .faceTagImage.nd-ft-nophoto .nd-ft-initials {
    display: flex; position: absolute; inset: 0; align-items: center; justify-content: center;
    font: 600 11px 'Inter', sans-serif; color: #3E9DB8;
}
body.newdesign-home :is(.nd-dailysheet, .nd-newpost) .postHeader .nd-ft-creator { display: inline; font: 600 14px 'Inter', sans-serif; color: #20252D; }
body.newdesign-home :is(.nd-dailysheet, .nd-newpost) .postHeader .postArrowDiv:not(.faceTagImage) { margin: 0 !important; display: flex; }
body.newdesign-home :is(.nd-dailysheet, .nd-newpost) .postHeader .postArrowDiv > span:not(.nd-ft-initials) { margin: 0 !important; font: 400 14px 'Inter', sans-serif !important; color: #9AA1AC !important; }
body.newdesign-home :is(.nd-dailysheet, .nd-newpost) .postHeader .faceTagCenterIscrollWrapperDiv {
    position: relative !important; top: auto !important; left: auto !important; right: auto !important;
    flex: 1 1 auto; min-width: 0; height: 32px !important;
}
body.newdesign-home :is(.nd-dailysheet, .nd-newpost) .postHeader .faceTagCenterDiv { position: relative !important; padding: 0 !important; height: 32px; }
body.newdesign-home :is(.nd-dailysheet, .nd-newpost) .postHeader .faceTagCenterDiv ul { display: flex !important; align-items: center; gap: 12px; float: none !important; width: auto !important; height: 32px !important; }
body.newdesign-home :is(.nd-dailysheet, .nd-newpost) .postHeader .faceTagCenterDiv li { display: inline-flex !important; align-items: center; gap: 8px; margin: 0 !important; overflow: visible !important; flex: 0 0 auto; }
body.newdesign-home :is(.nd-dailysheet, .nd-newpost) .postHeader .faceTagCenterDiv li:not([data-id]):not(:has(.newPrivateIcon)) { display: none !important; }
body.newdesign-home :is(.nd-dailysheet, .nd-newpost) .postHeader .faceTagCenterDiv li img { width: 28px !important; height: 28px !important; border-radius: 50%; object-fit: cover; background: #F0F1F4 !important; }
body.newdesign-home :is(.nd-dailysheet, .nd-newpost) .postHeader .faceTagCenterDiv .nd-ft-name { display: inline; font: 500 14px 'Inter', sans-serif; color: #20252D; }
/* new sheet: the "Select child" button in place of the creator */
body.newdesign-home :is(.nd-dailysheet, .nd-newpost) .postHeader .faceTagLeftDiv > .ui-btn,
body.newdesign-home :is(.nd-dailysheet, .nd-newpost) .postHeader .faceTagLeftDiv button {
    position: static !important; top: auto !important; left: auto !important;
    margin: 0 !important; height: 36px; padding: 0 14px 0 34px !important;
    background: #fff !important; border: 1px solid #D0D5DD !important; border-radius: 10px !important;
    box-shadow: none !important; color: #20252D !important; text-shadow: none !important;
    font: 500 14px 'Inter', sans-serif !important;
}

/* section cards (jQM collapsibles) */
body.newdesign-home .nd-dailysheet .dsAcc {
    margin: 0 0 12px !important;
    background: #fff;
    border: 1px solid #E2E4E9 !important;
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: none !important;
}
body.newdesign-home .nd-dailysheet .dsAcc > .ui-collapsible-heading { margin: 0 !important; }
body.newdesign-home .nd-dailysheet .dsAcc .ui-collapsible-heading-toggle {
    position: relative;
    margin: 0 !important;
    padding: 16px 56px 16px 20px !important;
    background: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #20252D !important;
    text-shadow: none !important;
    font: 600 16px/22px 'Inter', sans-serif !important;
    text-align: left !important;
}
body.newdesign-home .nd-dailysheet .dsAcc .ui-collapsible-heading-toggle:hover { background: #FAFBFC !important; }
body.newdesign-home .nd-dailysheet .dsAcc .ui-collapsible-heading-toggle:after {
    left: auto !important; right: 16px !important;
    width: 28px !important; height: 28px !important; margin-top: -14px !important;
    border-radius: 8px !important;
    background-color: #F0F1F4 !important;
    background-size: 14px 14px !important;
    background-position: center !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23525966' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    box-shadow: none !important;
    transition: transform .2s;
}
body.newdesign-home .nd-dailysheet .dsAcc:not(.ui-collapsible-collapsed) .ui-collapsible-heading-toggle:after { transform: rotate(180deg); }
body.newdesign-home .nd-dailysheet .dsAcc .ui-collapsible-content {
    margin: 0 !important;
    padding: 16px 20px !important;
    background: #fff !important;
    border: none !important;
    border-top: 1px solid #F0F1F4 !important;
    font: 400 15px/22px 'Inter', sans-serif;
    color: #20252D;
}
/* "Add Meal / Nap / ..." */
body.newdesign-home .nd-dailysheet .dsAdd.ui-btn {
    display: inline-flex !important; align-items: center; gap: 8px;
    height: 38px; margin: 0 0 8px !important; padding: 0 14px !important;
    background: #fff !important; border: 1px solid #D0D5DD !important; border-radius: 10px !important;
    box-shadow: none !important; color: #20252D !important; text-shadow: none !important;
    font: 500 14px 'Inter', sans-serif !important;
}
body.newdesign-home :is(.nd-dailysheet, .nd-newpost) .dsAdd.ui-btn:hover { background: #F6F7FA !important; }
body.newdesign-home .nd-dailysheet .dsAdd.ui-btn::before {
    content: ""; width: 14px; height: 14px; flex: 0 0 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.5v11M2.5 8h11' stroke='%232563D7' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
/* entries */
body.newdesign-home .nd-dailysheet .dailyRow {
    position: relative;
    display: flex !important; align-items: center;
    min-height: 44px;
    padding: 10px 84px 10px 0 !important;
    border-top: 1px solid #F0F1F4;
    box-sizing: border-box;
}
body.newdesign-home .nd-dailysheet .dsAdd + * .dailyRow:first-child,
body.newdesign-home .nd-dailysheet .dailyRow:first-of-type { border-top: none; }
body.newdesign-home .nd-dailysheet .dailyRow > .ui-block-a { width: auto !important; float: none !important; color: #20252D; }
body.newdesign-home .nd-dailysheet .dailyRow b { font-weight: 600; }
body.newdesign-home .nd-dailysheet .dailyRow .listItemOptions {
    position: absolute !important; top: 50% !important; right: 0 !important; transform: translateY(-50%);
    display: flex !important; gap: 4px; opacity: 1 !important;
}
body.newdesign-home .nd-dailysheet .dailyRow .listItemOptions > a { display: block; }
body.newdesign-home .nd-dailysheet .dailyRow .listItemOption { margin: 0 !important; }
body.newdesign-home .nd-dailysheet .dailyRow .listItemOption p { display: none !important; }
body.newdesign-home .nd-dailysheet .dailyRow .listItemOptionImage {
    width: 36px !important; height: 36px !important; margin: 0 !important; padding: 0 !important;
    display: flex !important; align-items: center; justify-content: center;
    background: transparent !important; border: none !important; border-radius: 8px !important; box-shadow: none !important;
}
body.newdesign-home :is(.nd-dailysheet, .nd-newpost) .dailyRow .listItemOptionImage:hover { background: #F6F7FA !important; }
body.newdesign-home .nd-dailysheet .dailyRow .listItemOptionImage img { width: 18px !important; height: 18px !important; margin: 0 !important; }
body.newdesign-home .nd-dailysheet .dailyRow img[src="img/delete-wN.png"] {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 20 20'%3E%3Cpath d='M3.5 5.5h13M8 5.5V4a1 1 0 011-1h2a1 1 0 011 1v1.5M5 5.5l.8 10.6a1 1 0 001 .9h6.4a1 1 0 001-.9L15 5.5M8.5 9v5M11.5 9v5' stroke='%23DC2626' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.newdesign-home .nd-dailysheet .dailyRow img[src="img/editSketchN.png"] {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 20 20'%3E%3Cpath d='M12.5 4.5l3 3L7 16H4v-3l8.5-8.5z' stroke='%23525966' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Notes + Date */
body.newdesign-home .nd-dailysheet .postTextboxLabel { margin: 20px 0 8px !important; padding: 0 !important; }
body.newdesign-home .nd-dailysheet .postTextboxLabel p {
    margin: 0 !important;
    font: 600 13px/18px 'Inter', sans-serif !important;
    color: #525966 !important; letter-spacing: .02em; text-transform: uppercase;
}
body.newdesign-home .nd-dailysheet .editNewPostTextDiv { margin: 0 !important; padding: 0 !important; }
body.newdesign-home .nd-dailysheet .editNewPostTextDiv .ui-input-text,
body.newdesign-home .nd-dailysheet #NewPostTextarea {
    margin: 0 !important;
    background: #fff !important;
    border: 1px solid #E2E4E9 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}
body.newdesign-home .nd-dailysheet #NewPostTextarea {
    width: 100% !important; min-height: 120px; box-sizing: border-box;
    padding: 12px 14px !important;
    font: 400 15px/22px 'Inter', sans-serif !important; color: #20252D !important;
}
body.newdesign-home .nd-dailysheet .editNewPostTextDiv .ui-input-text #NewPostTextarea { border: none !important; }
body.newdesign-home .nd-dailysheet .editNewPostTextDiv:focus-within .ui-input-text,
body.newdesign-home .nd-dailysheet #NewPostTextarea:focus { border-color: #2563D7 !important; box-shadow: 0 0 0 3px rgba(37, 99, 215, 0.12) !important; outline: none; }
body.newdesign-home .nd-dailysheet .dailyBottom {
    display: flex !important; align-items: center; gap: 16px;
    margin: 16px 0 0 !important; padding: 0 !important;
}
body.newdesign-home .nd-dailysheet .dailyBottom .postTextboxLabel { margin: 0 !important; flex: 0 0 auto; width: auto !important; }
body.newdesign-home .nd-dailysheet .dailyBottom .postTextboxInput { flex: 0 1 260px; margin: 0 !important; width: auto !important; }
body.newdesign-home .nd-dailysheet .dailyBottom .ui-input-text {
    margin: 0 !important; background: #fff !important; border: 1px solid #E2E4E9 !important; border-radius: 10px !important; box-shadow: none !important;
}
body.newdesign-home .nd-dailysheet .dailyBottom input {
    height: 42px !important; min-height: 42px !important; padding: 0 12px !important;
    font: 400 15px 'Inter', sans-serif !important; color: #20252D !important;
}
@media (max-width: 640px) {
    body.newdesign-home :is(.nd-dailysheet, .nd-newpost) > [data-role="content"] { padding: 16px 12px 40px !important; }
    body.newdesign-home .nd-dailysheet .dsAcc .ui-collapsible-heading-toggle { padding: 14px 52px 14px 16px !important; }
    body.newdesign-home .nd-dailysheet .dsAcc .ui-collapsible-content { padding: 12px 16px !important; }
    body.newdesign-home .nd-dailysheet .dailyBottom .postTextboxInput { flex: 1 1 auto; }
}

/* Daily sheet: fixes - header Save inside the screen with centred text; child header row reads
   creator > child (the creator div comes last in the DOM; legacy floats put it first). */
body.newdesign-home :is(.nd-dailysheet, .nd-newpost) > .head .rightHeaderButton#saveBtn {
    position: absolute !important;
    right: 16px !important; left: auto !important;
    top: 50% !important; transform: translateY(-50%);
    width: auto !important; height: auto !important;
    margin: 0 !important; padding: 0 !important;
}
body.newdesign-home :is(.nd-dailysheet, .nd-newpost) > .head #saveBtn a > div { width: auto !important; }
body.newdesign-home :is(.nd-dailysheet, .nd-newpost) > .head #saveBtn p { position: static !important; width: auto !important; line-height: 36px !important; text-align: center !important; }
body.newdesign-home :is(.nd-dailysheet, .nd-newpost) .postHeader .faceTagLeftDiv { order: -1; }

/* =============================================================================================
 * Daily sheet entry pop-ups (Add Meal / Nap / Diapers-Bathroom / Activity / Supplies needed):
 * new-design card - header with back, title and a blue Add, segmented choices, clean select /
 * text / time fields. jQM popups, markup + handlers unchanged.
 * ============================================================================================= */
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) {
    width: min(420px, calc(100vw - 24px)) !important;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 0 20px 20px !important;
    background: #fff !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 48px rgba(16, 24, 40, 0.22) !important;
    font-family: 'Inter', sans-serif;
    color: #20252D;
}
body.newdesign-home .ui-popup-container:has(> :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup)) { max-width: none !important; }
/* header */
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) > .ui-bar-f-dlg {
    position: sticky !important; top: 0; z-index: 5;
    display: flex !important; align-items: center; justify-content: center;
    width: auto !important; height: 60px !important; min-height: 60px;
    margin: 0 -20px 4px !important; padding: 0 64px !important;
    background: #fff !important; border: none !important; border-bottom: 1px solid #F0F1F4 !important;
    border-radius: 16px 16px 0 0 !important; box-shadow: none !important; box-sizing: border-box;
}
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) > .ui-bar-f-dlg > div:first-child { position: static !important; display: block !important; }
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) .ui-bar-f-dlg .textHeadline {
    position: static !important; transform: none !important;
    font: 600 17px/24px 'Inter', sans-serif !important; color: #20252D !important; text-shadow: none !important;
    white-space: nowrap; overflow: visible !important; width: auto !important;
}
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) .popupBackButton {
    position: absolute !important; left: 12px; top: 50%; transform: translateY(-50%); margin: 0 !important;
}
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) .popupBackButton a {
    display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px;
}
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) .popupBackButton a:hover { background: #F6F7FA; }
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) .popupBackButton img {
    width: 22px !important; height: 22px !important; margin: 0 !important; filter: none !important;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5M11 18l-6-6 6-6' stroke='%2320252d' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) .rightHeaderButton {
    position: absolute !important; right: 12px !important; left: auto !important; top: 50% !important; transform: translateY(-50%);
    width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important;
}
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) .rightHeaderButton a { text-decoration: none !important; }
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) .rightHeaderButton a > div {
    display: flex !important; align-items: center; justify-content: center;
    width: auto !important; height: 34px !important; min-width: 60px; padding: 0 14px !important; margin: 0 !important;
    background: #2563D7 !important; border: none !important; border-radius: 8px !important; box-shadow: none !important;
}
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) .rightHeaderButton a > div:hover { background: #1D4ED8 !important; }
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) .rightHeaderButton p {
    position: static !important; width: auto !important; margin: 0 !important;
    font: 600 14px/34px 'Inter', sans-serif !important; color: #fff !important; text-shadow: none !important; text-align: center !important;
}
/* field labels */
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) .postTextboxLabel { margin: 18px 0 8px !important; padding: 0 !important; }
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) .postTextboxLabel p {
    margin: 0 !important; font: 600 12px/16px 'Inter', sans-serif !important; color: #525966 !important;
    letter-spacing: .03em; text-transform: uppercase; text-shadow: none !important;
}
/* segmented choices (Food / Bottle / Breastfeeding, None / Some / Most / All, ...) */
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) fieldset[data-role="controlgroup"],
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) .ui-controlgroup {
    margin: 16px 0 0 !important;
}
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) .postTextboxLabel + fieldset[data-role="controlgroup"],
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) .postTextboxLabel + .ui-controlgroup { margin-top: 0 !important; }
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) .ui-controlgroup-controls {
    display: flex !important; flex-wrap: wrap; gap: 3px;
    width: auto !important; padding: 3px; background: #F0F1F4; border-radius: 10px;
    box-shadow: none !important;
}
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) .ui-controlgroup-controls > .ui-radio,
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) .ui-controlgroup-controls > .ui-checkbox { flex: 1 1 auto; margin: 0 !important; }
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) .ui-controlgroup-controls label.ui-btn {
    margin: 0 !important; padding: 8px 12px !important;
    background: transparent !important; border: none !important; border-radius: 8px !important; box-shadow: none !important;
    color: #525966 !important; text-shadow: none !important; text-align: center !important;
    font: 500 14px/20px 'Inter', sans-serif !important; white-space: nowrap;
}
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) .ui-controlgroup-controls label.ui-btn:hover { color: #20252D !important; }
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) .ui-controlgroup-controls label.ui-btn.ui-btn-active,
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) .ui-controlgroup-controls label.ui-btn.ui-checkbox-on,
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) .ui-controlgroup-controls label.ui-btn.ui-radio-on {
    background: #fff !important; color: #1D4ED8 !important; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.10) !important;
}
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) .ui-controlgroup-controls label.ui-btn:after { display: none !important; }
/* select (jQM custom menu button) */
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) .ui-select { margin: 0 !important; }
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) .ui-select .ui-btn {
    margin: 0 !important; height: 44px; padding: 0 40px 0 14px !important; display: flex !important; align-items: center;
    background: #fff !important; border: 1px solid #E2E4E9 !important; border-radius: 10px !important; box-shadow: none !important;
    color: #20252D !important; text-shadow: none !important; font: 400 15px 'Inter', sans-serif !important; text-align: left !important;
}
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) .ui-select .ui-btn:after {
    right: 12px !important; width: 18px !important; height: 18px !important; margin-top: -9px !important;
    background-color: transparent !important; box-shadow: none !important; background-size: 14px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23525966' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) .ui-select .ui-btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* text areas + time / text inputs */
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) .editNewPostTextDiv { margin: 0 !important; padding: 0 !important; }
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) .ui-input-text {
    margin: 0 !important; background: #fff !important; border: 1px solid #E2E4E9 !important; border-radius: 10px !important; box-shadow: none !important;
}
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) .ui-input-text:focus-within {
    border-color: #2563D7 !important; box-shadow: 0 0 0 3px rgba(37, 99, 215, 0.12) !important;
}
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) textarea {
    min-height: 84px; padding: 10px 12px !important; box-sizing: border-box;
    font: 400 15px/21px 'Inter', sans-serif !important; color: #20252D !important;
}
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) input[type="time"],
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) input[type="text"],
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) input[type="number"] {
    height: 44px !important; min-height: 44px !important; padding: 0 12px !important; box-sizing: border-box;
    font: 400 15px 'Inter', sans-serif !important; color: #20252D !important;
}
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) fieldset[style*="margin-top: 40px"] { margin-top: 16px !important; }
/* entry pop-ups: the native radio / checkbox inputs sit behind each option label (jQM relies on an
   opaque label to cover them) - with transparent segmented options they showed as small circles.
   Hidden; the label still toggles them. */
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) .ui-controlgroup-controls :is(.ui-radio, .ui-checkbox) > input {
    opacity: 0 !important;
    pointer-events: none !important;
    width: 1px !important; height: 1px !important;
    margin: 0 !important;
}
/* header title + Add text vertically centred */
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) .ui-bar-f-dlg > div:first-child { margin: 0 !important; padding: 0 !important; line-height: normal !important; }
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) .ui-bar-f-dlg .textHeadline { margin: 0 !important; padding: 0 !important; top: auto !important; }
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) .rightHeaderButton a > div > p { padding: 0 !important; height: auto !important; line-height: 34px !important; }
/* Daily sheet Save + entry pop-up Add: legacy .headerButton p forces height:26px !important, which
   pushed the text below the middle of the taller new buttons - let it size to the text and centre it
   in the flex button instead */
body.newdesign-home :is(.nd-dailysheet, .nd-newpost) > .head #saveBtn a > div > p,
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) .rightHeaderButton a > div > p {
    display: block !important;
    height: auto !important;
    width: auto !important;
    line-height: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
}
body.newdesign-home :is(.nd-dailysheet, .nd-newpost) > .head #saveBtn a > div,
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) .rightHeaderButton a > div {
    line-height: normal !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* entry pop-up title: centred across the whole 60px header (legacy table-cell / line-height rules kept
   it near the top) */
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) .ui-bar-f-dlg > div:first-child {
    position: absolute !important;
    inset: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: auto !important;
    pointer-events: none;   /* back / Add stay clickable above it */
}
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) .ui-bar-f-dlg .textHeadline { line-height: 24px !important; height: auto !important; }
/* date fields that open the new-design calendar (read-only so the browser picker stays closed) */
body.newdesign-home input.nd-cal-input { cursor: pointer !important; background-color: #fff !important; color: #20252D !important; }
body.newdesign-home input.nd-cal-input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; }
/* the calendar can open from inside a dialog (#dialog is z-index 100001) */
body.newdesign-home .nda-cal.nd-cal { z-index: 100010; }

/* =============================================================================================
 * In-App Library picker (#MediaSelection: + > Photo / Video > In-App Library, after the class and
 * "storage or class feed" choices) - new design. Square photo / video tiles in an even grid, a
 * blue tick badge + blue outline on the selected ones, Done as the header's primary button.
 * Markup from MediaSelectionView (ul#FrameFeed > #LazyScrollGrid > li.galleryPostContainer1);
 * selection still toggles .tickIcon's inline display, which the outline follows.
 * ============================================================================================= */
body.newdesign-home #MediaSelection { background: #F6F7FA !important; }
body.newdesign-home #MediaSelection > .mainContent { margin-bottom: 0 !important; min-height: 0 !important; padding: 0 !important; }
body.newdesign-home #MediaSelection > #FrameFeed {
    max-width: 1040px !important;
    margin: 0 auto !important;
    padding: 24px 24px 48px !important;
    background: transparent !important;
    box-sizing: border-box;
}
/* header Done */
body.newdesign-home #MediaSelection > .head .rightButtonInvite {
    position: absolute !important; right: 16px !important; left: auto !important; top: 50% !important; transform: translateY(-50%);
    width: auto !important; height: auto !important; margin: 0 !important; z-index: 103;
}
body.newdesign-home #MediaSelection > .head .rightButtonInvite a { text-decoration: none !important; }
body.newdesign-home #MediaSelection > .head .rightButtonInvitediv {
    display: flex !important; align-items: center; justify-content: center;
    width: auto !important; height: 36px !important; min-width: 72px; padding: 0 16px !important; margin: 0 !important;
    background: #2563D7 !important; border: none !important; border-radius: 8px !important; box-shadow: none !important;
}
body.newdesign-home #MediaSelection > .head .rightButtonInvitediv:hover { background: #1D4ED8 !important; }
body.newdesign-home #MediaSelection > .head .rightButtonInvitediv p {
    position: static !important; width: auto !important; height: auto !important; margin: 0 !important;
    font: 600 14px/20px 'Inter', sans-serif !important; color: #fff !important; text-shadow: none !important;
}
/* grid */
body.newdesign-home #MediaSelection #LazyScrollGrid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
}
body.newdesign-home #MediaSelection #LazyScrollGrid::before,
body.newdesign-home #MediaSelection #LazyScrollGrid::after { display: none !important; content: none !important; }
body.newdesign-home #MediaSelection #LazyScrollGrid > .inAppStorageHeader { grid-column: 1 / -1; }
body.newdesign-home #MediaSelection li.galleryPostContainer1 {
    float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; list-style: none;
    position: relative;
    aspect-ratio: 1 / 1;
    background: #F0F1F4 !important;
    border: 1px solid #E2E4E9;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow .15s, border-color .15s, transform .15s;
}
body.newdesign-home #MediaSelection li.galleryPostContainer1:hover { border-color: #D0D5DD; box-shadow: 0 6px 18px rgba(16, 24, 40, 0.10); transform: translateY(-1px); }
body.newdesign-home #MediaSelection li.galleryPostContainer1:has(.tickIcon[style*="block"]) {
    border-color: #2563D7;
    box-shadow: 0 0 0 2px #2563D7 inset, 0 0 0 3px rgba(37, 99, 215, 0.15);
}
/* a light blue wash over a selected photo */
body.newdesign-home #MediaSelection li.galleryPostContainer1:has(.tickIcon[style*="block"]) .galleryPost1::after {
    content: ""; position: absolute; inset: 0; background: rgba(37, 99, 215, 0.12); pointer-events: none;
}
body.newdesign-home #MediaSelection .galleryPostContainer1 article { height: 100%; margin: 0 !important; padding: 0 !important; border: none !important; }
body.newdesign-home #MediaSelection .galleryPost1 {
    position: relative;
    height: 100% !important;          /* beats the inline 153px - the tile is the square */
    background-size: cover !important;
    background-position: center !important;
    border: none !important;
}
body.newdesign-home #MediaSelection .galleryPost1 video { object-fit: cover; display: block; pointer-events: none; }
body.newdesign-home #MediaSelection .tickIcon {
    top: 10px !important; right: 10px !important; width: 26px; height: 26px; padding: 0 !important; box-sizing: border-box; z-index: 2;
    border-radius: 50% !important; font-size: 0 !important; line-height: 0 !important; color: transparent !important;
    background: #2563D7 no-repeat center / 14px 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.3l2.6 2.6L11 4.3' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    border: 2px solid #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.25);
}
@media (max-width: 767px) {
    body.newdesign-home #MediaSelection > #FrameFeed { padding: 12px 12px 40px !important; }
    body.newdesign-home #MediaSelection #LazyScrollGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    body.newdesign-home #MediaSelection li.galleryPostContainer1 { border-radius: 10px; }
    body.newdesign-home #MediaSelection .tickIcon { top: 6px !important; right: 6px !important; width: 22px; height: 22px; background-size: 12px 12px !important; }
}

/* =============================================================================================
 * New post - text / photo / video (NewPostView: #NewPost<id>.nd-newpost) - new design.
 * Shares the page / Save / tagged-header rules with the daily sheet (:is(.nd-dailysheet, .nd-newpost)
 * above). Here: the classes list + Tag Child on the header's right, the editor as a card, and the
 * settings below (folder, date, visibility, draft, scheduled, files, observation) as rows of one
 * card - label left, control right, pill switches. Markup + handlers unchanged.
 * ============================================================================================= */
/* header right side: "Demo Class A, Add Classes" and Tag Child */
body.newdesign-home .nd-newpost .postHeader .faceTagDivContainer { flex-wrap: nowrap; }
body.newdesign-home .nd-newpost .postHeader .faceTagDivContainer > .classesRegen {
    order: 5; float: none !important; margin: 0 0 0 auto !important; max-width: 280px;
    font: 400 13px/18px 'Inter', sans-serif !important; color: #525966; text-align: right; white-space: normal;
}
body.newdesign-home .nd-newpost .postHeader .classesRegen a { color: #2563D7 !important; font-weight: 600; text-decoration: none !important; }
body.newdesign-home .nd-newpost .postHeader .faceTagRightDiv {
    order: 6; position: static !important; top: auto !important; right: auto !important; margin: 0 0 0 12px !important; flex: 0 0 auto;
}
body.newdesign-home .nd-newpost .postHeader .faceTagMoreButton,
body.newdesign-home .nd-newpost .postHeader .faceTagMoreButton:hover {
    background: transparent !important; border: none !important; box-shadow: none !important;
    margin: 0 !important; padding: 0 !important; width: auto !important; height: auto !important;
}
body.newdesign-home .nd-newpost .postHeader .faceTagMoreButton a {
    display: inline-flex !important; align-items: center; gap: 6px; padding: 6px 10px !important;
    border: 1px solid #E2E4E9; border-radius: 8px; text-decoration: none !important;
}
body.newdesign-home .nd-newpost .postHeader .faceTagMoreButton a:hover { background: #F6F7FA; }
body.newdesign-home .nd-newpost .postHeader .faceTagMoreButton img {
    width: 14px !important; height: 14px !important; margin: 0 !important;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 20 20'%3E%3Cpath d='M10.6 2.5H16a1.5 1.5 0 011.5 1.5v5.4L9.4 17.5 2.5 10.6l8.1-8.1z' stroke='%236B7381' stroke-width='1.5' stroke-linejoin='round'/%3E%3Ccircle cx='13.5' cy='6.5' r='1.2' fill='%236B7381'/%3E%3C/svg%3E");
}
body.newdesign-home .nd-newpost .postHeader .faceTagMoreButton p {
    position: static !important; left: auto !important; top: auto !important; width: auto !important;
    margin: 0 !important; white-space: nowrap !important;
    font: 500 13px/18px 'Inter', sans-serif !important; color: #525966 !important; text-shadow: none !important;
}

/* editor card (TinyMCE) + attached media strip */
body.newdesign-home .nd-newpost .editNewPostTextDiv {
    margin: 0 0 16px !important; padding: 0 !important;
    background: #fff; border: 1px solid #E2E4E9; border-radius: 14px; overflow: hidden;
}
body.newdesign-home .nd-newpost .editNewPostTextDiv .tox.tox-tinymce { border: none !important; border-radius: 0 !important; }
body.newdesign-home .nd-newpost .editNewPostTextDiv .tox .tox-editor-header { border-bottom: 1px solid #F0F1F4 !important; box-shadow: none !important; }
body.newdesign-home .nd-newpost .editNewPostTextDiv .tox .tox-toolbar,
body.newdesign-home .nd-newpost .editNewPostTextDiv .tox .tox-toolbar__primary,
body.newdesign-home .nd-newpost .editNewPostTextDiv .tox .tox-toolbar-overlord { background: #FAFBFC !important; }
body.newdesign-home .nd-newpost .editNewPostTextDiv .tox .tox-tbtn { border-radius: 6px !important; }
body.newdesign-home .nd-newpost .editNewPostTextDiv .tox .tox-tbtn:hover { background: #EEF0F3 !important; }
body.newdesign-home .nd-newpost .editNewPostTextDiv .tox .tox-statusbar { border-top: 1px solid #F0F1F4 !important; }
body.newdesign-home .nd-newpost .editNewPostTextDiv > .ui-input-text,
body.newdesign-home .nd-newpost .editNewPostTextDiv > textarea {
    margin: 0 !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; background: #fff !important;
}
body.newdesign-home .nd-newpost .editNewPostTextDiv img { border-radius: 10px; }

/* settings rows - one card */
body.newdesign-home .nd-newpost .postTextbox {
    display: flex !important; align-items: center; flex-wrap: wrap; gap: 8px 16px;
    margin: 0 !important; padding: 12px 20px !important; min-height: 56px; box-sizing: border-box;
    background: #fff; border: 1px solid #E2E4E9; border-top: 1px solid #F0F1F4; border-bottom: none;
}
body.newdesign-home .nd-newpost .postTextbox[style*="visibility: hidden"] { padding: 0 !important; min-height: 0; border: none; }
body.newdesign-home .nd-newpost .postTextbox:not(.postTextbox + .postTextbox) { border-top: 1px solid #E2E4E9; border-radius: 14px 14px 0 0; }
body.newdesign-home .nd-newpost .postTextbox:not(:has(+ .postTextbox)) { border-bottom: 1px solid #E2E4E9; border-radius: 0 0 14px 14px; }
body.newdesign-home .nd-newpost .postTextbox:not(.postTextbox + .postTextbox):not(:has(+ .postTextbox)) { border-radius: 14px; }
body.newdesign-home .nd-newpost .postTextboxLabel {
    flex: 0 0 150px; width: 150px !important; margin: 0 !important; padding: 0 !important; display: block !important; float: none !important;
}
body.newdesign-home .nd-newpost .postTextboxLabel p,
body.newdesign-home .nd-newpost .postTextboxLabel label {
    margin: 0 !important; font: 500 14px/20px 'Inter', sans-serif !important; color: #525966 !important; text-shadow: none !important; white-space: normal;
}
body.newdesign-home .nd-newpost .postTextboxInput {
    flex: 1 1 220px; min-width: 0; margin: 0 !important; padding: 0 !important; width: auto !important; float: none !important;
    display: flex !important; align-items: center; gap: 8px; font-size: 0;   /* drops the &nbsp; spacers before the switches */
}
body.newdesign-home .nd-newpost .postTextboxInput > * { font-size: 14px; }
body.newdesign-home .nd-newpost .postTextboxInput .ui-input-text {
    flex: 1 1 auto; margin: 0 !important; background: #fff !important; border: 1px solid #E2E4E9 !important; border-radius: 10px !important; box-shadow: none !important;
}
body.newdesign-home .nd-newpost .postTextboxInput .ui-input-text:focus-within { border-color: #2563D7 !important; box-shadow: 0 0 0 3px rgba(37, 99, 215, 0.12) !important; }
body.newdesign-home .nd-newpost .postTextboxInput input {
    height: 40px !important; min-height: 40px !important; padding: 0 12px !important;
    font: 400 14px 'Inter', sans-serif !important; color: #20252D !important;
}
/* on / off sliders -> pill switch */
body.newdesign-home .nd-newpost .postTextboxInput .ui-slider-switch {
    margin: 0 !important; height: 34px !important; min-width: 150px; width: auto !important;
    border: 1px solid #E2E4E9 !important; border-radius: 999px !important; box-shadow: none !important; background: #F0F1F4 !important; overflow: hidden;
}
body.newdesign-home .nd-newpost .postTextboxInput .ui-slider-switch .ui-slider-label {
    font: 600 13px/34px 'Inter', sans-serif !important; text-shadow: none !important; height: 34px !important;
}
body.newdesign-home .nd-newpost .postTextboxInput .ui-slider-switch .ui-slider-label-a { background: #2563D7 !important; color: #fff !important; }
body.newdesign-home .nd-newpost .postTextboxInput .ui-slider-switch .ui-slider-label-b { background: #F0F1F4 !important; color: #525966 !important; }
body.newdesign-home .nd-newpost .postTextboxInput .ui-slider-switch .ui-slider-handle {
    width: 28px !important; height: 28px !important; margin: 0 !important; top: 2px !important;
    border: none !important; border-radius: 50% !important; background: #fff !important; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.25) !important;
}
/* Files / Observation "Add..." */
body.newdesign-home .nd-newpost .postTextboxInput button.ui-btn,
body.newdesign-home .nd-newpost .postTextboxInput .ui-btn:has(> button) {
    display: inline-flex !important; align-items: center; gap: 8px;
    height: 38px; margin: 0 !important; padding: 0 14px !important;
    background: #fff !important; border: 1px solid #D0D5DD !important; border-radius: 10px !important;
    box-shadow: none !important; color: #20252D !important; text-shadow: none !important;
    font: 500 14px 'Inter', sans-serif !important; white-space: nowrap;
}
body.newdesign-home .nd-newpost .postTextboxInput button.ui-btn:hover { background: #F6F7FA !important; }
body.newdesign-home .nd-newpost .postTextboxInput button img { width: 18px !important; height: 18px !important; margin: 0 !important; position: static !important; object-fit: contain; opacity: .75; }
body.newdesign-home .nd-newpost .postTextboxInput button .observeText { display: inline !important; margin: 0 !important; font: inherit !important; }
/* attached files list (sits under the Files row) */
body.newdesign-home .nd-newpost .postTextbox .editNewPostAttachedFiles { flex: 1 1 100%; margin: 4px 0 0 !important; padding: 0 !important; }
body.newdesign-home .nd-newpost .postTextbox .editNewPostAttachedFiles a.editNewPostAttachedFileURL { width: auto !important; color: #2563D7 !important; }
body.newdesign-home .nd-newpost #staffOnlyMsg, body.newdesign-home .nd-newpost .staffOnlyMsg {
    width: auto !important; margin: 0 0 16px !important; padding: 10px 14px; border-radius: 10px; background: #FEF3C7; color: #92400E; font: 500 13px 'Inter', sans-serif;
}
@media (max-width: 640px) {
    body.newdesign-home .nd-newpost .postHeader .faceTagDivContainer { flex-wrap: wrap; }
    body.newdesign-home .nd-newpost .postHeader .faceTagDivContainer > .classesRegen { order: 7; flex-basis: 100%; max-width: none; text-align: left; margin: 4px 0 0 !important; }
    body.newdesign-home .nd-newpost .postTextbox { padding: 12px 16px !important; }
    body.newdesign-home .nd-newpost .postTextboxLabel { flex-basis: 110px; width: 110px !important; }
}
/* Sign Up sheet: the Sign Up button never wraps (it broke onto two lines in the narrow Name column on
   phones and spilled out of its 30px height); phones get tighter cells and the slots table scrolls
   sideways inside its card instead of being cut off */
body.newdesign-home #Volunteer td a.pSignUp { white-space: nowrap; flex-shrink: 0; line-height: 1; justify-content: center; box-sizing: border-box; }
@media (max-width: 640px) {
    body.newdesign-home #Volunteer .ui-collapsible-content { padding: 12px !important; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    body.newdesign-home #Volunteer .ui-collapsible-content table th { padding: 8px 10px !important; font-size: 12px; }
    body.newdesign-home #Volunteer .ui-collapsible-content table td { padding: 10px !important; font-size: 13px; line-height: 18px; }
    body.newdesign-home #Volunteer td a.pSignUp { height: 28px; padding: 0 10px; font-size: 12px; }
}
/* Change Password Save: jQM's .ui-input-btn padding sat on top of the 44px height (~64px tall, label
   near the top) - fixed 44px box with the label centred; the real input still covers it for clicks */
body.newdesign-home #ChangePassword .ui-content .ui-input-btn {
    box-sizing: border-box !important;
    height: 44px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    line-height: 20px !important;
    position: relative;
}
body.newdesign-home #ChangePassword .ui-content .ui-input-btn input { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; margin: 0 !important; }
/* Class / child page header on phones: the photo no longer takes its own row (the name is in the
   page header), the three tiles share one row as compact cards - icon over a label of up to two
   lines (no clipping), and the attendance count is a pill in the tile's top-right corner
   (!important: the badge carries inline top:-13px / left:50%). */
@media (max-width: 767px) {
    body.newdesign-home #FrameProfile .profileImageContainer:has(.profilePageMenuContainer) .profileImage { display: none !important; }
    body.newdesign-home :is(#FrameProfile, #ChildProfile) .profileImageContainer { padding: 10px !important; gap: 10px; }
    body.newdesign-home :is(#FrameProfile, #ChildProfile) .profilePageMenuContainer { gap: 8px; grid-auto-columns: minmax(0, 1fr); }
    body.newdesign-home :is(#FrameProfile, #ChildProfile) .profilePageMenuItem {
        height: auto !important; min-height: 80px;
        padding: 12px 6px 10px !important;
        gap: 6px;
        overflow: visible;
    }
    body.newdesign-home :is(#FrameProfile, #ChildProfile) .profilePageMenuItem > img { width: 36px !important; height: 36px !important; flex-basis: 36px; padding: 8px; }
    body.newdesign-home :is(#FrameProfile, #ChildProfile) .profilePageMenuItem > p {
        font-size: 12px !important; line-height: 15px !important;
        white-space: normal !important; overflow: hidden; text-overflow: clip;
        display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        text-align: center; width: 100% !important;
    }
    body.newdesign-home :is(#FrameProfile, #ChildProfile) .profilePageMenuItem > .notificationStyle {
        position: absolute !important;
        top: 6px !important; right: 6px !important; left: auto !important; bottom: auto !important;
        margin: 0 !important; transform: none !important;
    }
    body.newdesign-home :is(#FrameProfile, #ChildProfile) .profilePageMenuItem > .notificationStyle > div { height: 20px !important; padding: 0 6px !important; }
    body.newdesign-home :is(#FrameProfile, #ChildProfile) .profilePageMenuItem > .notificationStyle p { font-size: 11px !important; line-height: 20px !important; }
}
/* Child page header on phones: photo + compact Info button on one row (the single tile no longer
   drops to a full-width card below the photo). Posts on phones: Tag Child is icon-only so the
   "> Private  TEST11 188" line has room, and big daily-sheet titles are scaled down. */
@media (max-width: 767px) {
    body.newdesign-home #ChildProfile .profileImageContainer { flex-wrap: nowrap !important; align-items: center; padding: 12px 14px !important; }
    body.newdesign-home #ChildProfile .profileImage,
    body.newdesign-home #ChildProfile .profileImage img { flex: 0 0 52px; width: 52px !important; height: 52px !important; }
    body.newdesign-home #ChildProfile .profilePageMenuContainer {
        flex: 1 1 auto !important; flex-basis: auto !important; width: auto !important;
        display: flex !important; justify-content: flex-end; gap: 8px;
    }
    body.newdesign-home #ChildProfile .profilePageMenuContainer > a,
    body.newdesign-home #ChildProfile .profilePageMenuContainer > [class^="ui-block-"] { flex: 0 1 auto; min-width: 0; }
    body.newdesign-home #ChildProfile .profilePageMenuItem {
        flex-direction: row !important; justify-content: flex-start;
        height: 44px !important; min-height: 0 !important; padding: 0 14px 0 6px !important; gap: 8px;
        border-radius: 10px !important;
    }
    body.newdesign-home #ChildProfile .profilePageMenuItem > img { width: 32px !important; height: 32px !important; flex-basis: 32px; padding: 7px; border-radius: 8px; }
    body.newdesign-home #ChildProfile .profilePageMenuItem > p {
        display: block !important; -webkit-line-clamp: unset; width: auto !important;
        font-size: 14px !important; line-height: 20px !important; white-space: nowrap !important; text-overflow: ellipsis; text-align: left;
    }

    body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagDivContainer { padding-right: 84px !important; }
    body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagMoreButton p { display: none !important; }
    body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagMoreButton a { padding: 6px !important; }
    body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .faceTagRightDiv { top: 32px !important; right: 10px !important; }
    body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .textPost h1 { font-size: 22px !important; line-height: 28px !important; margin: 4px 0 12px !important; }
    body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .textPost h2 { font-size: 19px !important; line-height: 25px !important; }
    body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .textPost h3 { font-size: 16px !important; line-height: 22px !important; }
}
/* New post: switch handle - jQM centres it with a negative left margin (the travel is the inner
   offset); my margin:0 pushed the "on" handle past the track's right edge */
body.newdesign-home .nd-newpost .postTextboxInput .ui-slider-switch .ui-slider-inneroffset { margin: 0 17px !important; position: relative; height: 100%; }
body.newdesign-home .nd-newpost .postTextboxInput .ui-slider-switch .ui-slider-handle { margin: 0 0 0 -14px !important; }
/* Files / Observation buttons: label never truncated, sized to its text */
body.newdesign-home .nd-newpost .postTextboxInput button.ui-btn { width: auto !important; max-width: none; overflow: visible !important; text-overflow: clip !important; }
body.newdesign-home .nd-newpost .postTextboxInput button .nd-add-label,
body.newdesign-home .nd-newpost .postTextboxInput button .observeText { white-space: nowrap; overflow: visible; text-overflow: clip; }
/* New post editor: with photos / videos attached it also gets .editNewPostTextDivWithMedia (legacy
   display:table + width:98%) - full width like the header and settings cards */
body.newdesign-home .nd-newpost .editNewPostTextDiv,
body.newdesign-home .nd-newpost .editNewPostTextDivWithMedia {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
body.newdesign-home .nd-newpost .editNewPostTextDiv .tox.tox-tinymce { width: 100% !important; }
/* Development Observation pop-up (#observPopup) shares the entry pop-up rules above; its Add link is a
   jQM data-role=button, so drop that button chrome around the blue pill */
body.newdesign-home #observPopup .rightHeaderButton a.ui-btn { padding: 0 !important; margin: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; }
body.newdesign-home #observPopup form#devObserv > div[style*="clear"] { height: 0; }
/* New post attached files: the list is inserted right after the Add button inside the same row -
   give it its own full-width line, and each file a row of icon, name (ellipsis) and size. Legacy
   fixed width:315px / margin-left:-122px / floats removed, so it never runs off a phone screen. */
body.newdesign-home .nd-newpost .postTextboxInput:has(> .editNewPostAttachedFiles) { flex-wrap: wrap; }
body.newdesign-home .nd-newpost .postTextboxInput > .editNewPostAttachedFiles,
body.newdesign-home .nd-newpost .postTextbox .editNewPostAttachedFiles {
    flex: 1 1 100% !important; width: 100% !important; min-width: 0;
    margin: 8px 0 0 !important; padding: 0 !important; direction: inherit !important;
}
body.newdesign-home .nd-newpost .editNewPostAttachedFiles ul { margin: 0 !important; padding: 0 !important; list-style: none; }
body.newdesign-home .nd-newpost .editNewPostAttachedFiles li { list-style: none; margin: 0 0 6px !important; padding: 0 !important; }
body.newdesign-home .nd-newpost .editNewPostAttachedFiles a.editNewPostAttachedFileURL {
    display: flex !important; align-items: center; gap: 8px;
    width: auto !important; max-width: 100%; height: auto !important; min-height: 40px;
    padding: 8px 12px !important; box-sizing: border-box;
    background: #F6F7FA; border: 1px solid #E2E4E9; border-radius: 10px;
    font: 500 14px/20px 'Inter', sans-serif !important; color: #20252D !important; text-decoration: none !important;
}
body.newdesign-home .nd-newpost .editNewPostAttachedFiles a.editNewPostAttachedFileURL:hover { border-color: #D0D5DD; background: #EEF0F3; }
body.newdesign-home .nd-newpost .editNewPostAttachedFiles img.editNewPostFileTypeIcon { order: 0; float: none !important; height: 22px !important; width: auto; padding: 0 !important; flex: 0 0 auto; }
body.newdesign-home .nd-newpost .editNewPostAttachedFiles .editNewPostAttachedFileName {
    order: 1; float: none !important; flex: 1 1 auto; min-width: 0; max-width: none !important;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #2563D7;
}
body.newdesign-home .nd-newpost .editNewPostAttachedFiles .editNewPostAttachedFileSize {
    order: 2; float: none !important; width: auto !important; flex: 0 0 auto; text-align: right !important;
    font-size: 12px; font-weight: 400; color: #6B7381;
}
@media (max-width: 640px) {
    body.newdesign-home .nd-newpost .postTextbox { align-items: flex-start; }
    body.newdesign-home .nd-newpost .postTextboxLabel { flex: 1 1 100% !important; width: auto !important; }
    body.newdesign-home .nd-newpost .postTextboxInput { flex: 1 1 100% !important; }
}
/* Observation (and entry) pop-up dropdowns: long option text stays on one line with an ellipsis
   instead of wrapping out of the 44px field; full text is still in the open menu */
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) .ui-select .ui-btn {
    white-space: nowrap !important;
    overflow: hidden !important;
    max-width: 100%;
    box-sizing: border-box;
}
body.newdesign-home :is(#mealsPopup, #napPopup, #diapersBathroomPopup, #activityPopup, #suppliedNeededPopup, #observPopup) .ui-select .ui-btn > span {
    display: block !important;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 20px !important;
}
body.newdesign-home #observPopup .ui-select { width: 100%; }
/* level titles (Objective / Dimension / Observation) styled like the first one */
body.newdesign-home #observPopup label.select { display: block; margin: 0 !important; }
body.newdesign-home #observPopup label.select p,
body.newdesign-home #observPopup [id^="observLevel"][id$="title"] {
    margin: 18px 0 8px !important;
    font: 600 12px/16px 'Inter', sans-serif !important;
    color: #525966 !important;
    letter-spacing: .03em;
    text-transform: uppercase;
    text-shadow: none !important;
}
body.newdesign-home #observPopup .postTextboxLabel { margin: 0 !important; }

/* New post: tagged strip as a tidy grid.
   Desktop:  [AD1 Admin Demo 1] > [child chips, scroll sideways] ............ [Tag Child]
             ─────────────────────────────────────────────────────────────────────────────
             CLASSES  Demo Class A, Demo Class B, ...                     + Add Classes
   Phones:   creator + Tag Child / children / classes - each on its own line.
   (the class names keep their legacy "Name," text - only data-id is read on save) */
body.newdesign-home .nd-newpost .postHeader .faceTagDivContainer {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "creator kids tag" "classes classes classes";
    align-items: center;
    column-gap: 12px;
    row-gap: 0;
}
body.newdesign-home .nd-newpost .postHeader .faceTagLeftDiv { grid-area: creator; }
body.newdesign-home .nd-newpost .postHeader .faceTagCenterIscrollWrapperDiv { grid-area: kids; overflow: hidden; }
body.newdesign-home .nd-newpost .postHeader .faceTagCenterIscrollWrapperDivNoIscroll { overflow-x: auto !important; overflow-y: hidden !important; }
body.newdesign-home .nd-newpost .postHeader .faceTagCenterDiv li { padding: 3px 10px 3px 3px; background: #F6F7FA; border-radius: 999px; }
body.newdesign-home .nd-newpost .postHeader .faceTagCenterDiv li img { width: 24px !important; height: 24px !important; }
body.newdesign-home .nd-newpost .postHeader .faceTagCenterDiv li:has(.newPrivateIcon) { padding-left: 8px; }
body.newdesign-home .nd-newpost .postHeader .faceTagRightDiv { grid-area: tag; margin: 0 !important; }
body.newdesign-home .nd-newpost .postHeader .faceTagDivContainer > .classesRegen {
    grid-area: classes;
    order: 0;
    display: flex !important;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    max-width: none !important;
    margin: 12px 0 0 !important;
    padding: 10px 0 0 !important;
    border-top: 1px solid #F0F1F4;
    text-align: left !important;
    font: 400 13px/20px 'Inter', sans-serif !important;
    color: #20252D;
}
body.newdesign-home .nd-newpost .postHeader .classesRegen::before {
    content: "Classes";
    flex: 0 0 auto;
    font: 600 12px/20px 'Inter', sans-serif;
    color: #6B7381;
    letter-spacing: .03em;
    text-transform: uppercase;
}
body.newdesign-home .nd-newpost .postHeader .classesRegen #allclasses { flex: 1 1 auto; min-width: 0; color: #20252D; }
body.newdesign-home .nd-newpost .postHeader .classesRegen br { display: none; }
body.newdesign-home .nd-newpost .postHeader .classesRegen a {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 4px;
    font: 600 13px/20px 'Inter', sans-serif !important; color: #2563D7 !important; text-decoration: none !important; white-space: nowrap;
}
body.newdesign-home .nd-newpost .postHeader .classesRegen a::before { content: "+"; font-size: 16px; line-height: 1; }
body.newdesign-home .nd-newpost .postHeader .classesRegen a:hover { text-decoration: underline !important; }
/* no classes row (Hebrew / no active class): single line */
body.newdesign-home .nd-newpost .postHeader .faceTagDivContainer:not(:has(> .classesRegen)) { grid-template-areas: "creator kids tag"; }
@media (max-width: 640px) {
    body.newdesign-home .nd-newpost .postHeader .faceTagDivContainer {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "creator tag" "kids kids" "classes classes";
        row-gap: 10px;
    }
    body.newdesign-home .nd-newpost .postHeader .faceTagDivContainer:not(:has(> .classesRegen)) { grid-template-areas: "creator tag" "kids kids"; }
    body.newdesign-home .nd-newpost .postHeader .faceTagDivContainer > .classesRegen { margin: 2px 0 0 !important; flex-basis: auto; }
    body.newdesign-home .nd-newpost .postHeader .classesRegen a { margin-left: 0; }
}

/* Class / child page posts: upload status ("Uploading post.." spinner, "Post uploaded" tick, error)
   as a centred pill on the card's top line instead of piling onto the date / Tag Child corner.
   It lives inside the absolutely-positioned .postSettings, so while a status shows that box spans
   the header width (date still on the right) and the header gets room above the creator row. */
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postHeader:has(span[data-goal="uploadingStatus"]) { padding-top: 46px !important; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postSettings:has(span[data-goal="uploadingStatus"]) {
    left: 16px; right: 16px !important; text-align: right;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postSettings span[data-goal="uploadingStatus"] {
    position: absolute; top: -2px; left: 50%; transform: translateX(-50%);
    display: inline-flex !important; align-items: center; gap: 6px;
    height: 26px; padding: 0 12px 0 8px; box-sizing: border-box; white-space: nowrap;
    background: #EEF3FD; color: #1D4ED8; border-radius: 999px;
    font: 500 12px/26px 'Inter', sans-serif;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postSettings span[data-goal="uploadingStatus"] p {
    margin: 0 !important; padding: 0 !important; font: inherit !important; color: inherit !important; text-shadow: none !important;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postSettings span[data-goal="uploadingStatus"] .postUploadingImage {
    display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin: 0 !important; float: none !important;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postSettings span[data-goal="uploadingStatus"] img {
    width: 16px !important; height: 16px !important; margin: 0 !important; float: none !important;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postSettings span[data-uploadingStatus="UPLOADED"] { background: #ECFDF3; color: #027A48; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postSettings span[data-uploadingStatus="ERROR"] { background: #FEF3F2; color: #B42318; }
/* green progress strip: full width along the card's top edge */
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li { position: relative; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postProgressBar { left: 0; right: 0; top: 0; height: 4px; z-index: 4; }
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postProgressBar > div { height: 4px; border-radius: 0 4px 4px 0; background: #2563D7; }

/* =============================================================================================
 * Invitations (#invitations, View.FaceTagList) - new design. InvitationController calls
 * NewDesign.decorateList(), so rows / "New Invitation" / avatars come from the .nd-list rules;
 * here: the second picture on the right, Accept (primary) + Decline (outline) under each
 * invitation, and the empty state as a card.
 * ============================================================================================= */
body.newdesign-home #invitations.nd-list li.invContainer { flex-wrap: wrap; row-gap: 12px; }
body.newdesign-home #invitations.nd-list .invRightFaceTag {
    position: static !important; flex: 0 0 40px; width: 40px; height: 40px; margin: 0 0 0 auto !important;
    border-radius: 50%; overflow: hidden; background: #F0F1F4; order: 2;
}
body.newdesign-home #invitations.nd-list .invRightFaceTag img { width: 40px !important; height: 40px !important; object-fit: cover; border-radius: 50%; margin: 0 !important; }
body.newdesign-home #invitations.nd-list .invText { order: 1; }
body.newdesign-home #invitations.nd-list .invText p a { color: #525966 !important; font-weight: 400; }
body.newdesign-home #invitations.nd-list [class^="invButtons"] {
    order: 3; flex: 1 1 100%;
    display: flex; gap: 8px; flex-wrap: wrap;
    margin: 0 !important; padding: 0 0 0 52px !important;   /* lines up with the text, past the avatar */
    position: static !important; float: none !important; width: auto !important;
}
body.newdesign-home #invitations.nd-list [class^="invButtons"] .ui-btn {
    margin: 0 !important; height: 36px; padding: 0 16px !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    border-radius: 10px !important; box-shadow: none !important; text-shadow: none !important;
    font: 600 14px/20px 'Inter', sans-serif !important; position: relative;
}
body.newdesign-home #invitations.nd-list [class^="invButtons"] .ui-btn:after { display: none !important; }
body.newdesign-home #invitations.nd-list [class^="invButtons"] .ui-btn:has(input[name="accept"]) {
    background: #2563D7 !important; border: 1px solid #2563D7 !important; color: #fff !important;
}
body.newdesign-home #invitations.nd-list [class^="invButtons"] .ui-btn:has(input[name="accept"]):hover { background: #1D4ED8 !important; }
body.newdesign-home #invitations.nd-list [class^="invButtons"] .ui-btn:has(input[name="decline"]) {
    background: #fff !important; border: 1px solid #E2E4E9 !important; color: #B42318 !important;
}
body.newdesign-home #invitations.nd-list [class^="invButtons"] .ui-btn:has(input[name="decline"]):hover { background: #FEF3F2 !important; border-color: #FECDCA !important; }
body.newdesign-home #invitations.nd-list [class^="invButtons"] .ui-btn input { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; margin: 0 !important; }
/* empty state */
body.newdesign-home #invitations h4[data-purpose="emptyText"],
body.newdesign-home #invitations #noInvitations {
    margin: 16px 0 0 !important; padding: 40px 24px !important;
    background: #fff; border: 1px solid #E2E4E9; border-radius: 16px;
    text-align: center; font: 400 15px/22px 'Inter', sans-serif !important; color: #6B7381 !important; text-shadow: none !important;
}
body.newdesign-home #invitations h4[data-purpose="emptyText"]::before,
body.newdesign-home #invitations #noInvitations::before {
    content: ""; display: block; width: 48px; height: 48px; margin: 0 auto 14px; border-radius: 50%;
    background: #EEF3FD no-repeat center / 22px 22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='2' stroke='%232563D7' stroke-width='1.6'/%3E%3Cpath d='M3.5 6.5L12 13l8.5-6.5' stroke='%232563D7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (max-width: 640px) {
    body.newdesign-home #invitations.nd-list [class^="invButtons"] { padding-left: 0 !important; }
    body.newdesign-home #invitations.nd-list [class^="invButtons"] .ui-btn { flex: 1 1 0; }
}
/* any new-design list page (.nd-list): the "nothing here" text as a card */
body.newdesign-home .nd-list h4[data-purpose="emptyText"] {
    margin: 16px 0 0 !important; padding: 32px 24px !important;
    background: #fff; border: 1px solid #E2E4E9; border-radius: 16px;
    text-align: center; font: 400 15px/22px 'Inter', sans-serif !important; color: #6B7381 !important; text-shadow: none !important;
}

/* Profile pages (child / class / my profile): header "Invite" as the new-design primary button,
   with its pending-invitations count as a small badge; gallery "Select / Cancel / Remove / Select all"
   above the feed as tidy text actions */
body.newdesign-home :is(#ChildProfile, #FrameProfile, #AdultProfile) > .head .rightButtonInvite {
    top: 50% !important; transform: translateY(-50%); right: 16px !important;
    width: auto !important; height: 36px !important; line-height: normal !important;
}
body.newdesign-home :is(#ChildProfile, #FrameProfile, #AdultProfile) > .head .rightButtonInvite a { display: block; text-decoration: none !important; position: relative; }
body.newdesign-home :is(#ChildProfile, #FrameProfile, #AdultProfile) > .head .rightButtonInvite .rightButtonInvitediv {
    display: flex !important; align-items: center; justify-content: center;
    width: auto !important; height: 36px !important; padding: 0 16px !important; margin: 0 !important; box-sizing: border-box;
    background: #2563D7 !important; border: none !important; border-radius: 8px !important; box-shadow: none !important; cursor: pointer;
}
body.newdesign-home :is(#ChildProfile, #FrameProfile, #AdultProfile) > .head .rightButtonInvite .rightButtonInvitediv:hover { background: #1D4ED8 !important; }
body.newdesign-home :is(#ChildProfile, #FrameProfile, #AdultProfile) > .head .rightButtonInvite .rightButtonInvitediv p {
    position: static !important; width: auto !important; height: auto !important; margin: 0 !important;
    color: #fff !important; text-shadow: none !important; font: 600 14px/20px 'Inter', sans-serif !important;
}
body.newdesign-home :is(#ChildProfile, #FrameProfile, #AdultProfile) > .head .rightButtonInvite .notificationStyle {
    position: absolute !important; top: -6px !important; right: -6px !important; left: auto !important; margin: 0 !important; z-index: 2;
}
body.newdesign-home :is(#ChildProfile, #FrameProfile) .galleryActions {
    display: flex; align-items: center; gap: 4px 16px; flex-wrap: wrap;
    margin: 0 0 12px !important; padding: 0 4px !important;
    font: 600 14px/20px 'Inter', sans-serif;
}
body.newdesign-home :is(#ChildProfile, #FrameProfile) .galleryActions a {
    float: none !important; margin: 0 !important; color: #2563D7 !important; text-decoration: none !important; text-shadow: none !important;
}
body.newdesign-home :is(#ChildProfile, #FrameProfile) .galleryActions a:hover { text-decoration: underline !important; }
body.newdesign-home :is(#ChildProfile, #FrameProfile) .galleryActions a.galleryRemove { color: #B42318 !important; }
body.newdesign-home :is(#ChildProfile, #FrameProfile) .galleryActions a.gallerySelectAll { margin-left: auto !important; }
body.newdesign-home :is(#ChildProfile, #FrameProfile) .galleryActions .galleryCountSelected { float: none !important; margin: 0 !important; color: #6B7381 !important; font-weight: 500; }

/* =============================================================================================
 * Reports page - report outputs (new design). Audit of the Reports options: lists and dialogs were
 * already new design; these cover what they open:
 *   A. form fields / buttons inside the shared dialog (date / month / number inputs, selects,
 *      "Done" / "Download CSV" buttons) - except the post filter modal, which has its own look;
 *   B. inline results under the Attendance list (#dailyAttendance tables, collapsible lists,
 *      Name to face, 30 minute, Children naps, Visitor QR, Overstay...) - Monthly Meal Attendance and
 *      Meal Settings (table.njMeals, government template) are left exactly as they are;
 *   C. report pages: Ratio Report (#Ratios), Student Info (#childrenInfo), Roster (#rosterReport),
 *      Pick Up (#pickUpReportPage), Assessment Scores (#assessmentScores without the Report Card
 *      layout - Report Card keeps its own design).
 * ============================================================================================= */
/* A. dialog forms */
body.newdesign-home #dialog:not(:has(.nd-feed-filter)) span h4 :is(input[type="date"], input[type="month"], input[type="number"], input[type="text"], input[type="time"]):not([type="checkbox"]),
body.newdesign-home #dialog:not(:has(.nd-feed-filter)) span h4 select {
    height: 40px; padding: 0 12px; box-sizing: border-box; max-width: 100%;
    border: 1px solid #E2E4E9 !important; border-radius: 10px !important; background: #fff !important; box-shadow: none !important;
    font: 400 14px 'Inter', sans-serif !important; color: #20252D !important; outline: none;
}
body.newdesign-home #dialog:not(:has(.nd-feed-filter)) span h4 :is(input, select):focus { border-color: #2563D7 !important; box-shadow: 0 0 0 3px rgba(37, 99, 215, 0.12) !important; }
body.newdesign-home #dialog:not(:has(.nd-feed-filter)) span h4 .ui-input-text,
body.newdesign-home #dialog:not(:has(.nd-feed-filter)) span h4 .ui-select .ui-btn {
    border: 1px solid #E2E4E9 !important; border-radius: 10px !important; background: #fff !important; box-shadow: none !important;
}
body.newdesign-home #dialog:not(:has(.nd-feed-filter)) span h4 .ui-input-text input { border: none !important; }
body.newdesign-home #dialog:not(:has(.nd-feed-filter)) span h4 button:not(.nd-filter-close),
body.newdesign-home #dialog:not(:has(.nd-feed-filter)) span h4 .ui-btn:has(> button) {
    display: inline-flex !important; align-items: center; justify-content: center;
    height: 36px; width: auto !important; padding: 0 16px !important; margin: 8px 0 0 !important;
    background: #2563D7 !important; color: #fff !important; border: none !important; border-radius: 8px !important;
    box-shadow: none !important; text-shadow: none !important; font: 600 14px 'Inter', sans-serif !important; cursor: pointer;
}
body.newdesign-home #dialog:not(:has(.nd-feed-filter)) span h4 button:not(.nd-filter-close):hover { background: #1D4ED8 !important; }

/* B. inline report results under the Attendance list (not the section lists that follow it) */
body.newdesign-home #attendanceReports .attbuttons ~ :is(div, table):not(.ui-controlgroup):not([data-role="controlgroup"]):not(:has(table.njMeals)):not(table.njMeals) {
    font-family: 'Inter', sans-serif; color: #20252D;
}
body.newdesign-home #attendanceReports .attbuttons ~ :not(:has(table.njMeals)) table:not(.njMeals),
body.newdesign-home #attendanceReports .attbuttons ~ table:not(.njMeals) {
    width: 100%; border-collapse: separate !important; border-spacing: 0; margin: 12px 0 !important;
    background: #fff; border: 1px solid #E2E4E9 !important; border-radius: 12px; overflow: hidden;
    font: 400 13px/18px 'Inter', sans-serif; color: #20252D; text-shadow: none;
}
body.newdesign-home #attendanceReports .attbuttons ~ :not(:has(table.njMeals)) table:not(.njMeals) :is(th, td),
body.newdesign-home #attendanceReports .attbuttons ~ table:not(.njMeals) :is(th, td) {
    padding: 10px 12px !important; border: none !important; border-bottom: 1px solid #F0F1F4 !important; text-align: left; vertical-align: middle;
}
body.newdesign-home #attendanceReports .attbuttons ~ :not(:has(table.njMeals)) table:not(.njMeals) th,
body.newdesign-home #attendanceReports .attbuttons ~ :not(:has(table.njMeals)) table:not(.njMeals) tr:first-child > td:only-child,
body.newdesign-home #attendanceReports .attbuttons ~ table:not(.njMeals) th {
    background: #F6F7FA !important; color: #525966 !important; font-weight: 600 !important; font-size: 12px;
}
body.newdesign-home #attendanceReports .attbuttons ~ :not(:has(table.njMeals)) table:not(.njMeals) tr:last-child > td { border-bottom: none !important; }
body.newdesign-home #attendanceReports .attbuttons ~ :not(:has(table.njMeals)) table:not(.njMeals) tbody tr:hover > td { background: #FAFBFC; }
/* wide tables scroll inside their card on small screens */
@media (max-width: 900px) {
    body.newdesign-home #attendanceReports #dailyAttendance,
    body.newdesign-home #attendanceReports .attbuttons ~ div:not(.ui-controlgroup):not(:has(table.njMeals)) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* collapsible lists (Children currently in class, Comprehensive, Overstay, Metro forms, Active parents) */
body.newdesign-home #attendanceReports .attbuttons ~ * .ui-collapsible,
body.newdesign-home #attendanceReports .attbuttons ~ .ui-collapsible-set > .ui-collapsible {
    margin: 0 0 10px !important; background: #fff; border: 1px solid #E2E4E9 !important; border-radius: 12px !important; overflow: hidden; box-shadow: none !important;
}
body.newdesign-home #attendanceReports .attbuttons ~ * .ui-collapsible-heading-toggle,
body.newdesign-home #attendanceReports .attbuttons ~ .ui-collapsible-set .ui-collapsible-heading-toggle {
    margin: 0 !important; padding: 14px 52px 14px 16px !important; background: #fff !important; border: none !important; border-radius: 0 !important;
    box-shadow: none !important; text-shadow: none !important; color: #20252D !important; font: 600 15px/20px 'Inter', sans-serif !important; text-align: left !important;
}
body.newdesign-home #attendanceReports .attbuttons ~ * .ui-collapsible-heading-toggle:after,
body.newdesign-home #attendanceReports .attbuttons ~ .ui-collapsible-set .ui-collapsible-heading-toggle:after {
    left: auto !important; right: 14px !important; width: 26px !important; height: 26px !important; margin-top: -13px !important; border-radius: 8px !important;
    background-color: #F0F1F4 !important; box-shadow: none !important; background-size: 14px !important; background-position: center !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23525966' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
body.newdesign-home #attendanceReports .attbuttons ~ * .ui-collapsible:not(.ui-collapsible-collapsed) .ui-collapsible-heading-toggle:after,
body.newdesign-home #attendanceReports .attbuttons ~ .ui-collapsible-set .ui-collapsible:not(.ui-collapsible-collapsed) .ui-collapsible-heading-toggle:after { transform: rotate(180deg); }
body.newdesign-home #attendanceReports .attbuttons ~ * .ui-collapsible-content,
body.newdesign-home #attendanceReports .attbuttons ~ .ui-collapsible-set .ui-collapsible-content {
    margin: 0 !important; padding: 12px 16px !important; background: #fff !important; border: none !important; border-top: 1px solid #F0F1F4 !important;
    font: 400 14px/20px 'Inter', sans-serif; color: #20252D;
}
/* inline pickers + action buttons */
body.newdesign-home #attendanceReports .attbuttons ~ :not(:has(table.njMeals)) :is(.ui-input-text, .ui-select .ui-btn) {
    margin: 4px 8px 4px 0 !important; border: 1px solid #E2E4E9 !important; border-radius: 10px !important; background: #fff !important; box-shadow: none !important;
}
body.newdesign-home #attendanceReports .attbuttons ~ :not(:has(table.njMeals)) :is(input[type="date"], input[type="month"], select) {
    height: 40px; font: 400 14px 'Inter', sans-serif !important; color: #20252D !important;
}
body.newdesign-home #attendanceReports .attbuttons ~ :not(:has(table.njMeals)):not(.ui-controlgroup) :is(button, .ui-btn:not(.ui-collapsible-heading-toggle):not(.ui-select .ui-btn)) {
    display: inline-flex !important; align-items: center; justify-content: center; width: auto !important;
    height: 36px; padding: 0 14px !important; margin: 6px 8px 6px 0 !important;
    background: #fff !important; border: 1px solid #D0D5DD !important; border-radius: 10px !important;
    box-shadow: none !important; text-shadow: none !important; color: #20252D !important; font: 500 14px 'Inter', sans-serif !important;
}
body.newdesign-home #attendanceReports .attbuttons ~ :not(:has(table.njMeals)) :is(h3, h4) { font-family: 'Inter', sans-serif !important; color: #20252D !important; text-shadow: none !important; }
body.newdesign-home #attendanceReports #suppliesQrImg, body.newdesign-home #attendanceReports #childQr img { border-radius: 12px; border: 1px solid #E2E4E9; background: #fff; padding: 8px; }

/* C. report pages */
body.newdesign-home :is(#Ratios, #childrenInfo, #rosterReport, #pickUpReportPage, #assessmentScores:not(:has(.tamim-assessment-container))) { background: #F6F7FA !important; }
body.newdesign-home :is(#Ratios, #childrenInfo, #rosterReport, #pickUpReportPage, #assessmentScores:not(:has(.tamim-assessment-container))) > .mainContent {
    background: transparent !important; max-width: 1200px; margin-left: auto !important; margin-right: auto !important;
    padding: 24px !important; box-sizing: border-box; font-family: 'Inter', sans-serif; color: #20252D;
}
body.newdesign-home :is(#Ratios, #childrenInfo, #rosterReport, #pickUpReportPage, #assessmentScores:not(:has(.tamim-assessment-container))) table {
    width: 100%; border-collapse: separate !important; border-spacing: 0; margin: 12px 0 !important;
    background: #fff; border: 1px solid #E2E4E9 !important; border-radius: 12px; overflow: hidden;
    font: 400 13px/18px 'Inter', sans-serif; color: #20252D; text-shadow: none;
}
body.newdesign-home :is(#Ratios, #childrenInfo, #rosterReport, #pickUpReportPage, #assessmentScores:not(:has(.tamim-assessment-container))) table :is(th, td) {
    padding: 10px 12px !important; border: none !important; border-bottom: 1px solid #F0F1F4 !important; text-align: left; vertical-align: middle;
}
body.newdesign-home :is(#Ratios, #childrenInfo, #rosterReport, #pickUpReportPage, #assessmentScores:not(:has(.tamim-assessment-container))) table th,
body.newdesign-home :is(#Ratios, #childrenInfo, #rosterReport, #pickUpReportPage, #assessmentScores:not(:has(.tamim-assessment-container))) table thead td {
    background: #F6F7FA !important; color: #525966 !important; font-weight: 600 !important; font-size: 12px; position: sticky; top: 0; z-index: 1;
}
body.newdesign-home :is(#Ratios, #childrenInfo, #rosterReport, #pickUpReportPage, #assessmentScores:not(:has(.tamim-assessment-container))) table tr:last-child > td { border-bottom: none !important; }
body.newdesign-home :is(#Ratios, #childrenInfo, #rosterReport, #pickUpReportPage, #assessmentScores:not(:has(.tamim-assessment-container))) table tbody tr:hover > td { background: #FAFBFC; }
body.newdesign-home :is(#Ratios, #childrenInfo, #rosterReport, #pickUpReportPage, #assessmentScores:not(:has(.tamim-assessment-container))) :is(.table-sticky, .mainContent > div:has(> table)) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
body.newdesign-home :is(#Ratios, #childrenInfo, #rosterReport, #pickUpReportPage, #assessmentScores:not(:has(.tamim-assessment-container))) :is(select, input[type="date"]):not([data-role]) {
    height: 40px; padding: 0 12px; margin: 0 8px 8px 0; box-sizing: border-box;
    border: 1px solid #E2E4E9 !important; border-radius: 10px !important; background: #fff !important; box-shadow: none !important;
    font: 400 14px 'Inter', sans-serif !important; color: #20252D !important;
}
body.newdesign-home :is(#Ratios, #childrenInfo, #rosterReport, #pickUpReportPage, #assessmentScores:not(:has(.tamim-assessment-container))) :is(.ui-input-text, .ui-select .ui-btn) {
    border: 1px solid #E2E4E9 !important; border-radius: 10px !important; background: #fff !important; box-shadow: none !important;
}
body.newdesign-home :is(#Ratios, #childrenInfo, #rosterReport, #pickUpReportPage, #assessmentScores:not(:has(.tamim-assessment-container))) > .mainContent :is(button, .ui-btn:not(.ui-select .ui-btn)) {
    display: inline-flex !important; align-items: center; justify-content: center; width: auto !important;
    height: 36px; padding: 0 14px !important; margin: 0 8px 8px 0 !important;
    background: #fff !important; border: 1px solid #D0D5DD !important; border-radius: 10px !important;
    box-shadow: none !important; text-shadow: none !important; color: #20252D !important; font: 500 14px 'Inter', sans-serif !important;
}
/* header Save / Download on these pages -> primary */
body.newdesign-home :is(#rosterReport, #pickUpReportPage, #assessmentScores:not(:has(.tamim-assessment-container))) > .head .rightButtonInvite {
    top: 50% !important; transform: translateY(-50%); right: 16px !important; width: auto !important; height: 36px !important;
}
body.newdesign-home :is(#rosterReport, #pickUpReportPage, #assessmentScores:not(:has(.tamim-assessment-container))) > .head .rightButtonInvitediv {
    display: flex !important; align-items: center; justify-content: center; width: auto !important; height: 36px !important; padding: 0 16px !important; margin: 0 !important;
    background: #2563D7 !important; border: none !important; border-radius: 8px !important; box-shadow: none !important;
}
body.newdesign-home :is(#rosterReport, #pickUpReportPage, #assessmentScores:not(:has(.tamim-assessment-container))) > .head .rightButtonInvitediv p {
    position: static !important; width: auto !important; height: auto !important; margin: 0 !important; color: #fff !important; font: 600 14px/20px 'Inter', sans-serif !important; text-shadow: none !important;
}
@media (max-width: 640px) {
    body.newdesign-home :is(#Ratios, #childrenInfo, #rosterReport, #pickUpReportPage, #assessmentScores:not(:has(.tamim-assessment-container))) > .mainContent { padding: 12px !important; }
}
/* Enrollment Forms list (#Nrf): the page's own 1100px cap is lifted in the new design, and the inner
   .nrf-desktop-area (max 1104px) had no auto margins - centre it like the other pages */
body.newdesign-home #Nrf .nrf-desktop-area { margin-left: auto !important; margin-right: auto !important; box-sizing: border-box; width: 100%; }

/* Form editor (#RegistrationFormsEdit): each field's bottom row - delete | Required [switch]  For Staff
   [switch] | up / down - as one flex row (legacy floats + inline bottom/left offsets dropped), and the
   jQM flipswitches as small pill toggles (grey off / blue on, white handle). */
body.newdesign-home #RegistrationFormsEdit .form-bottom-row {
    display: flex !important; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 8px 0 0 !important; min-height: 40px; box-sizing: border-box;
}
body.newdesign-home #RegistrationFormsEdit .form-bottom-row > button.ui-icon-delete { order: 1; margin: 0 !important; float: none !important; }
body.newdesign-home #RegistrationFormsEdit .form-bottom-row > #formbottomrowtext,
body.newdesign-home #RegistrationFormsEdit .form-bottom-row > .ui-field-contain {
    order: 2;
    position: static !important; bottom: auto !important; left: auto !important; float: none !important;
    height: auto !important; margin: 0 0 0 8px !important; padding: 0 !important; border: none !important;
    display: flex !important; align-items: center; gap: 8px 16px; flex-wrap: wrap;
}
body.newdesign-home #RegistrationFormsEdit .form-bottom-row .flipStaffWrap:not([style*="display: none"]) { display: inline-flex !important; align-items: center; gap: 8px; }
body.newdesign-home #RegistrationFormsEdit .form-bottom-row label {
    margin: 0 !important; display: inline-block !important; width: auto !important; float: none !important;
    font: 500 13px/20px 'Inter', sans-serif !important; color: #525966 !important; text-shadow: none !important;
}
body.newdesign-home #RegistrationFormsEdit .form-bottom-row > .ui-icon-arrow-u { order: 3; margin-left: auto !important; }
body.newdesign-home #RegistrationFormsEdit .form-bottom-row > .ui-icon-arrow-d { order: 4; }
body.newdesign-home #RegistrationFormsEdit .form-bottom-row > :is(.ui-icon-arrow-u, .ui-icon-arrow-d) {
    position: static !important; float: none !important; bottom: auto !important; right: auto !important; margin-top: 0 !important; margin-bottom: 0 !important;
}
/* pill flipswitch */
body.newdesign-home #RegistrationFormsEdit .form-bottom-row .ui-flipswitch {
    position: relative; display: inline-block !important; flex: 0 0 auto;
    width: 38px !important; height: 22px !important; margin: 0 !important; padding: 0 !important;
    background: #D0D5DD !important; border: none !important; border-radius: 999px !important; box-shadow: none !important;
    vertical-align: middle; cursor: pointer; transition: background .15s;
}
body.newdesign-home #RegistrationFormsEdit .form-bottom-row .ui-flipswitch.ui-flipswitch-active { background: #2563D7 !important; padding: 0 !important; width: 38px !important; }
body.newdesign-home #RegistrationFormsEdit .form-bottom-row .ui-flipswitch .ui-flipswitch-on {
    position: absolute !important; top: 2px !important; left: 2px !important;
    width: 18px !important; height: 18px !important; margin: 0 !important; padding: 0 !important;
    border: none !important; border-radius: 50% !important; background: #fff !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.25) !important; text-indent: -9999px !important; overflow: hidden;
    transition: left .15s;
}
body.newdesign-home #RegistrationFormsEdit .form-bottom-row .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on { left: 18px !important; }
body.newdesign-home #RegistrationFormsEdit .form-bottom-row .ui-flipswitch .ui-flipswitch-off { display: none !important; }
body.newdesign-home #RegistrationFormsEdit .form-bottom-row .ui-flipswitch select { position: absolute; opacity: 0; pointer-events: none; }

/* Roster Report (#rosterReport) + Pick Up (#pickUpReportPage): both are copies of the Reports page, so
   they carried its message icon + user pill into a header that also has Save - hide the cluster. */
body.newdesign-home :is(#rosterReport, #pickUpReportPage) > .head .nd-topbar-right { display: none !important; }
body.newdesign-home :is(#rosterReport, #pickUpReportPage) > .head .rightHeaderButton {
    position: absolute !important; top: 50% !important; right: 16px !important; left: auto !important; transform: translateY(-50%);
    width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; z-index: 103;
}
body.newdesign-home :is(#rosterReport, #pickUpReportPage) > .head .rightHeaderButton a { text-decoration: none !important; }
body.newdesign-home :is(#rosterReport, #pickUpReportPage) > .head .rightHeaderButton a > div {
    display: flex !important; align-items: center; justify-content: center; width: auto !important; height: 36px !important; min-width: 72px;
    padding: 0 16px !important; margin: 0 !important; background: #2563D7 !important; border: none !important; border-radius: 8px !important; box-shadow: none !important;
}
body.newdesign-home :is(#rosterReport, #pickUpReportPage) > .head .rightHeaderButton a > div:hover { background: #1D4ED8 !important; }
body.newdesign-home :is(#rosterReport, #pickUpReportPage) > .head .rightHeaderButton p {
    position: static !important; width: auto !important; height: auto !important; margin: 0 !important;
    color: #fff !important; font: 600 14px/20px 'Inter', sans-serif !important; text-shadow: none !important;
}
/* Download: room for its icon (my generic button padding had removed it) */
body.newdesign-home :is(#rosterReport, #pickUpReportPage, #Ratios, #childrenInfo, #assessmentScores) > .mainContent .ui-btn.ui-btn-icon-left { padding-left: 38px !important; position: relative; }
body.newdesign-home :is(#rosterReport, #pickUpReportPage, #Ratios, #childrenInfo, #assessmentScores) > .mainContent .ui-btn.ui-btn-icon-left:after {
    left: 12px !important; width: 18px !important; height: 18px !important; margin-top: -9px !important;
    background-color: transparent !important; box-shadow: none !important; filter: brightness(0) opacity(.6);
}
/* hint line */
body.newdesign-home #rosterReport > .mainContent > span {
    width: auto !important; margin: 0 0 0 12px !important; vertical-align: middle;
    font: 500 14px/20px 'Inter', sans-serif !important; color: #6B7381 !important; text-decoration: none !important;
}
/* table: one white surface, two header rows, editable cells tinted on hover */
body.newdesign-home #rosterReport table { margin-top: 16px !important; }
body.newdesign-home #rosterReport table td { background: #fff !important; }
body.newdesign-home #rosterReport table tr:nth-child(-n+2) > :is(td, th) {
    background: #F6F7FA !important; color: #525966 !important; font-weight: 600 !important; font-size: 12px; text-transform: capitalize;
}
body.newdesign-home #rosterReport table td[table] { cursor: text; position: relative; }
body.newdesign-home #rosterReport table td[table]:hover { background: #EEF3FD !important; box-shadow: inset 0 0 0 1px #C7D7F8; }
body.newdesign-home #rosterReport table td[table] input {
    width: 100%; min-width: 140px; height: 32px; padding: 0 8px; box-sizing: border-box;
    border: 1px solid #2563D7 !important; border-radius: 8px !important; box-shadow: 0 0 0 3px rgba(37, 99, 215, 0.12) !important;
    font: 400 13px 'Inter', sans-serif !important; color: #20252D; outline: none; background: #fff;
}

/* Inline report card (#dailyAttendance: NJ Report, NJ Health Screening, Questionnaire & Check In,
   Visitor Questionnaire, Staff Attendance, 30 minute, Active parents) */
body.newdesign-home #attendanceReports #dailyAttendance {
    width: auto !important; max-width: 100%; box-sizing: border-box;
    margin: 16px 0 0 !important; padding: 20px !important;
    background: #fff !important; border: 1px solid #E2E4E9; border-radius: 16px;
    font-family: 'Inter', sans-serif; color: #20252D;
}
body.newdesign-home #attendanceReports #dailyAttendance > div[style*="text-align: center"] { text-align: left !important; }
/* NJ layout only (its centred header div): the line breaks between Download and the details table */
body.newdesign-home #attendanceReports #dailyAttendance > div[style*="text-align: center"]:has(#downloadNj) > br { display: none; }
body.newdesign-home #attendanceReports #dailyAttendance #downloadNj,
body.newdesign-home #attendanceReports #dailyAttendance .ui-btn:has(> #downloadNj),
body.newdesign-home #attendanceReports #dailyAttendance #dcsv,
body.newdesign-home #attendanceReports #dailyAttendance .ui-btn:has(> #dcsv) {
    background: #2563D7 !important; border-color: #2563D7 !important; color: #fff !important; margin: 0 0 12px !important;
}
body.newdesign-home #attendanceReports #dailyAttendance table th { text-align: left !important; }
body.newdesign-home #attendanceReports #dailyAttendance :is(input[type="text"], input:not([type]), input[type="date"], input[type="number"]) {
    height: 36px; min-width: 200px; padding: 0 10px; box-sizing: border-box;
    border: 1px solid #E2E4E9 !important; border-radius: 8px !important; background: #fff !important; box-shadow: none !important;
    font: 400 14px 'Inter', sans-serif !important; color: #20252D !important; outline: none;
}
body.newdesign-home #attendanceReports #dailyAttendance :is(input[type="text"], input:not([type]), input[type="date"], input[type="number"]):focus { border-color: #2563D7 !important; box-shadow: 0 0 0 3px rgba(37, 99, 215, 0.12) !important; }
body.newdesign-home #attendanceReports #dailyAttendance .ui-input-text { border: none !important; background: transparent !important; box-shadow: none !important; margin: 0 !important; }
/* "no data" notes */
body.newdesign-home #attendanceReports #dailyAttendance :is(h3, h4, p):only-child,
body.newdesign-home #attendanceReports #dailyAttendance > :is(h3, h4, p, b) {
    display: block; margin: 12px 0 0 !important; padding: 14px 16px; border-radius: 10px; background: #F6F7FA;
    font: 500 14px/20px 'Inter', sans-serif !important; color: #525966 !important; text-shadow: none !important; border: none !important;
}
/* report tables inside the card use its full width (inline width:auto / margin:0 auto) */
body.newdesign-home #attendanceReports #dailyAttendance table { width: 100% !important; margin: 12px 0 0 !important; font-size: 13px !important; }
body.newdesign-home #attendanceReports #dailyAttendance table th { padding: 10px 12px !important; }
/* a one-cell table is a "no data" note (e.g. "Questionnaire Data From Today Does Not Exist") */
body.newdesign-home #attendanceReports #dailyAttendance table:has(> tbody > tr:only-child > td:only-child),
body.newdesign-home #attendanceReports #dailyAttendance table:has(> tr:only-child > td:only-child) { border: none !important; background: transparent !important; }
body.newdesign-home #attendanceReports #dailyAttendance table:is(:has(> tbody > tr:only-child > td:only-child), :has(> tr:only-child > td:only-child)) td {
    padding: 14px 16px !important; border-radius: 10px; background: #F6F7FA !important; border: none !important;
    font: 500 14px/20px 'Inter', sans-serif !important; color: #525966 !important; text-align: left !important;
}
/* form editor row fixes: the up / down (and delete) buttons draw their icon with an absolutely positioned
   :after, so they must stay position:relative; the delete button keeps no legacy vertical offset */
body.newdesign-home #RegistrationFormsEdit .form-bottom-row > :is(.ui-icon-arrow-u, .ui-icon-arrow-d),
body.newdesign-home #RegistrationFormsEdit .form-bottom-row > button.ui-icon-delete {
    position: relative !important; top: auto !important; bottom: auto !important; right: auto !important; left: auto !important;
    align-self: center;
}
body.newdesign-home #RegistrationFormsEdit .form-bottom-row > button.ui-icon-delete { margin: 0 !important; vertical-align: middle; }
body.newdesign-home #RegistrationFormsEdit .form-bottom-row > :is(.ui-icon-arrow-u, .ui-icon-arrow-d, button.ui-icon-delete) {
    width: 30px !important; height: 30px !important; min-height: 0 !important; padding: 0 !important; box-sizing: border-box;
}
body.newdesign-home #RegistrationFormsEdit .form-bottom-row > :is(.ui-icon-arrow-u, .ui-icon-arrow-d, button.ui-icon-delete):after {
    left: 50% !important; top: 50% !important; margin: -9px 0 0 -9px !important; width: 18px !important; height: 18px !important;
}
/* Roster Report: Download keeps room for its icon (outranks the generic report-page button padding) */
body.newdesign-home :is(#rosterReport, #pickUpReportPage, #Ratios, #childrenInfo, #assessmentScores) > .mainContent .ui-btn.ui-btn-icon-left.ui-btn-icon-left.ui-btn-icon-left {
    padding-left: 38px !important; padding-right: 14px !important;
}
/* "Click on the white cells to edit": editable cells white, read-only cells a very light grey, header rows a
   slightly darker grey */
body.newdesign-home #rosterReport table td { background: #F8F9FB !important; color: #525966; }
body.newdesign-home #rosterReport table td[table] { background: #fff !important; color: #20252D; }
body.newdesign-home #rosterReport table tr:nth-child(-n+2) > :is(td, th) { background: #EEF0F3 !important; }
body.newdesign-home #rosterReport table td[table]:hover { background: #EEF3FD !important; }
body.newdesign-home #rosterReport table :is(td, th) { border-right: 1px solid #F0F1F4 !important; }

/* Inline report results: same side margins as the report list cards above (24px, 14px on phones) */
body.newdesign-home #attendanceReports #dailyAttendance { margin: 16px 24px 0 !important; }
body.newdesign-home #attendanceReports .attbuttons ~ :is(div, table):not(.ui-controlgroup):not([data-role="controlgroup"]):not(#dailyAttendance) { margin-left: 24px !important; margin-right: 24px !important; }
@media (max-width: 768px) {
    body.newdesign-home #attendanceReports #dailyAttendance { margin: 12px 14px 0 !important; padding: 14px !important; }
    body.newdesign-home #attendanceReports .attbuttons ~ :is(div, table):not(.ui-controlgroup):not([data-role="controlgroup"]):not(#dailyAttendance) { margin-left: 14px !important; margin-right: 14px !important; }
}
/* Questionnaire & Check In header: "Class Name: X" / "Date: [picker]" with room after the colon */
body.newdesign-home #attendanceReports #dailyAttendance > div[style*="text-align: left"] {
    margin-left: 0 !important; font: 500 14px/24px 'Inter', sans-serif; color: #20252D;
}
/* the gap after "Date:" - only in the Questionnaire & Check In header line (the NJ reports put #formdate in
   their details table, aligned with the inputs above it) */
body.newdesign-home #attendanceReports #dailyAttendance > div[style*="text-align: left"] #formdate { margin-left: 8px !important; vertical-align: middle; }
body.newdesign-home #attendanceReports #dailyAttendance table th #formdate { margin-left: 0 !important; }
body.newdesign-home #attendanceReports #dailyAttendance #refreshqac { margin-left: 4px; }
/* Download (.downbtn): its spreadsheet icon is filled white - dark on the white outline button */
body.newdesign-home #attendanceReports #dailyAttendance .downbtn { gap: 8px; margin-left: 12px !important; vertical-align: middle; }
body.newdesign-home #attendanceReports #dailyAttendance .downbtn svg { flex: 0 0 auto; }
body.newdesign-home #attendanceReports #dailyAttendance .downbtn svg path { fill: #217346 !important; }
/* dialog fields: when jQM wraps an input in .ui-input-text, the wrapper is the field - the inner input
   has no border of its own (it showed as a second border on the left, e.g. Questionnaire & More dates) */
body.newdesign-home #dialog:not(:has(.nd-feed-filter)) span h4 .ui-input-text > :is(input[type="date"], input[type="month"], input[type="number"], input[type="text"], input[type="time"]):not([type="checkbox"]) {
    border: none !important; border-radius: 10px !important; box-shadow: none !important; background: transparent !important;
    height: 40px; margin: 0 !important; width: 100%;
}
body.newdesign-home #dialog:not(:has(.nd-feed-filter)) span h4 .ui-input-text { margin: 4px 0 !important; padding: 0 !important; }
body.newdesign-home #dialog:not(:has(.nd-feed-filter)) span h4 .ui-input-text:focus-within { border-color: #2563D7 !important; box-shadow: 0 0 0 3px rgba(37, 99, 215, 0.12) !important; }
/* NJ reports details table (License ID / School Name / City / Class Name / Date): one column of equal
   fields - the Date label lost its leading <br>, and the date picker matches the text inputs */
body.newdesign-home #attendanceReports #dailyAttendance table th > br { display: none; }
body.newdesign-home #attendanceReports #dailyAttendance table th { vertical-align: middle !important; }
body.newdesign-home #attendanceReports #dailyAttendance table th :is(input, .ui-input-text) {
    width: 260px !important; max-width: 100%; margin: 0 !important; vertical-align: middle;
}
body.newdesign-home #attendanceReports #dailyAttendance table th .ui-input-text { display: inline-block; padding: 0 !important; }
body.newdesign-home #attendanceReports #dailyAttendance table th .ui-input-text input { width: 100% !important; }
/* the shared dialog is shown through $.blockUI, whose baseZ here is 99999999 (lib/jquery.blockUI.js) -
   the calendar popover must sit above that layer */
body.newdesign-home .nda-cal.nd-cal { z-index: 2147483000 !important; }

/* =============================================================================================
 * Live Report Format C (#AttendanceDashboard, views/attendance/dashboard.html +
 * AttendanceDashboardView) - new design. CSS only: chart + class table unchanged, the In / Not in
 * class counts still open their lists.
 * ============================================================================================= */
body.newdesign-home #AttendanceDashboard { background: #F6F7FA !important; }
body.newdesign-home #AttendanceDashboard > .mainContent {
    background: transparent !important; max-width: 1100px !important; margin-left: auto !important; margin-right: auto !important;
    padding: 24px !important; box-sizing: border-box; font-family: 'Inter', sans-serif; color: #20252D; text-align: left;
}
body.newdesign-home #AttendanceDashboard .mainContent h5 { display: none; }   /* duplicate of the header title */
body.newdesign-home #AttendanceDashboard .row { display: block; margin: 0 0 16px !important; }
body.newdesign-home #AttendanceDashboard .card {
    background: #fff !important; border: 1px solid #E2E4E9; border-radius: 16px !important; padding: 20px !important;
    box-shadow: none !important; box-sizing: border-box;
}
/* doughnut card */
body.newdesign-home #AttendanceDashboard .col-5:has(#allAttendanceDoughnut) { width: auto !important; max-width: 520px; }
body.newdesign-home #AttendanceDashboard .card:has(#allAttendanceDoughnut) .row { display: flex !important; flex-wrap: wrap; align-items: center; margin: 0 !important; gap: 12px 0; }
body.newdesign-home #AttendanceDashboard .card h6 {
    margin: 0 0 4px !important; font: 600 16px/22px 'Inter', sans-serif !important; color: #20252D !important; text-align: left !important;
}
body.newdesign-home #AttendanceDashboard .card:has(#allAttendanceDoughnut) p {
    margin: 0 0 8px !important; font: 400 14px/20px 'Inter', sans-serif !important; color: #525966 !important;
}
body.newdesign-home #AttendanceDashboard .card:has(#allAttendanceDoughnut) p b { color: #20252D; font-weight: 600; }
body.newdesign-home #AttendanceDashboard .card:has(#allAttendanceDoughnut) .col-auto > div { width: 12px !important; height: 12px !important; margin: 4px 10px 0 0 !important; }
/* class table */
body.newdesign-home #AttendanceDashboard .card:has(#activityTable) { padding: 0 !important; overflow: hidden; }
body.newdesign-home #AttendanceDashboard #activityTable { width: 100%; border-collapse: collapse; font: 400 14px/20px 'Inter', sans-serif; color: #20252D; }
body.newdesign-home #AttendanceDashboard #activityTable th {
    padding: 12px 16px !important; background: #F6F7FA; border-bottom: 1px solid #E2E4E9 !important;
    font: 600 12px/16px 'Inter', sans-serif !important; color: #525966; text-align: left !important; letter-spacing: .02em;
}
body.newdesign-home #AttendanceDashboard #activityTable th:not(:first-child) { text-align: center !important; }
body.newdesign-home #AttendanceDashboard #activityTable .tableDataRow td {
    padding: 8px 16px !important; border: none !important; border-bottom: 1px solid #F0F1F4 !important; vertical-align: middle;
}
body.newdesign-home #AttendanceDashboard #activityTable .tableDataRow:last-child td { border-bottom: none !important; }
body.newdesign-home #AttendanceDashboard #activityTable .tableDataRow:hover td { background: #FAFBFC; }
body.newdesign-home #AttendanceDashboard #activityTable .tableDataRow td:first-child { font-weight: 500; min-width: 200px; }
body.newdesign-home #AttendanceDashboard #activityTable .tableDataRow td img {
    width: 36px !important; height: 36px !important; margin: 0 12px 0 0 !important; padding: 6px; box-sizing: border-box; border-radius: 10px;
}
body.newdesign-home #AttendanceDashboard #activityTable .tableDataRow td span[style*="absolute"] { left: 64px; }
body.newdesign-home #AttendanceDashboard #activityTable .tableDataRow td[data-frame] {
    color: #2563D7 !important; text-decoration: none !important; font-weight: 600; text-align: center !important;
}
body.newdesign-home #AttendanceDashboard #activityTable .tableDataRow td[data-frame]:hover { text-decoration: underline !important; background: #EEF3FD; }
@media (max-width: 640px) {
    body.newdesign-home #AttendanceDashboard > .mainContent { padding: 12px !important; }
    body.newdesign-home #AttendanceDashboard .card { padding: 14px !important; }
    body.newdesign-home #AttendanceDashboard #activityTable .tableDataRow td { padding: 8px 10px !important; }
    body.newdesign-home #AttendanceDashboard #activityTable .tableDataRow td:first-child { min-width: 0; }
}

/* Overstay Report: header row ("Child / Total exception" + Download) as a tidy bar above the child cards,
   Download as the primary button (inline float / 40px margins dropped) */
body.newdesign-home #attendanceReports [data-role="collapsible-set"] > div:has(> #downloadOverstayCSV),
body.newdesign-home #attendanceReports .ui-collapsible-set > div:has(> #downloadOverstayCSV) {
    display: flex !important; align-items: center; gap: 12px;
    width: auto !important; margin: 4px 0 12px !important; padding: 0 16px !important;
    font: 600 12px/16px 'Inter', sans-serif !important; color: #525966; letter-spacing: .02em;
}
body.newdesign-home #attendanceReports div:has(> #downloadOverstayCSV) > span { min-width: 0 !important; }
body.newdesign-home #attendanceReports div:has(> #downloadOverstayCSV) > span:first-child { flex: 1 1 auto; }
body.newdesign-home #attendanceReports #downloadOverstayCSV {
    float: none !important; margin: 0 0 0 auto !important; height: 36px; padding: 0 16px !important;
    background: #2563D7 !important; border: none !important; color: #fff !important; border-radius: 8px !important;
    font: 600 14px 'Inter', sans-serif !important; letter-spacing: 0; cursor: pointer; box-shadow: none !important; text-shadow: none !important;
}
body.newdesign-home #attendanceReports #downloadOverstayCSV:hover { background: #1D4ED8 !important; }
/* child card heading: name left, total on the right */
body.newdesign-home #attendanceReports .ui-collapsible-heading-toggle:has(> span:not(.ui-collapsible-heading-status) ~ span:not(.ui-collapsible-heading-status)) { display: flex !important; align-items: center; gap: 12px; }
body.newdesign-home #attendanceReports .ui-collapsible-heading-toggle > span:not(.ui-collapsible-heading-status):not(:last-child) { flex: 1 1 auto; min-width: 0 !important; }
body.newdesign-home #attendanceReports .ui-collapsible-heading-toggle > span:not(.ui-collapsible-heading-status):last-child { font-weight: 500; color: #525966; }
/* month picker dialogs ("select month") - a clear label above the field */
body.newdesign-home #dialog:not(:has(.nd-feed-filter)) span h4:has(> input[type="month"]) {
    display: flex; flex-direction: column; gap: 8px; text-align: left !important; text-transform: capitalize;
}
body.newdesign-home #dialog:not(:has(.nd-feed-filter)) span h4:has(> input[type="month"]) > br { display: none; }
body.newdesign-home #dialog:not(:has(.nd-feed-filter)) span h4 > input[type="month"] { width: 100%; }

/* =============================================================================================
 * Meal Settings (Reports > Meal Settings: table.njMeals WITH the F / R / P radios, placed right after
 * the Attendance list). Monthly Meal Attendance shares the njMeals class (government template) but has
 * no radios and sits in its own wrapper - it is not matched here and stays exactly as it is.
 * ============================================================================================= */
body.newdesign-home #attendanceReports .attbuttons ~ table.njMeals:has(input[type="radio"]) {
    width: auto !important; margin: 16px 24px 0 !important; border-collapse: separate !important; border-spacing: 0;
    background: #fff; border: 1px solid #E2E4E9 !important; border-radius: 16px; overflow: hidden;
    font: 400 14px/20px 'Inter', sans-serif; color: #20252D;
}
body.newdesign-home #attendanceReports .attbuttons ~ table.njMeals:has(input[type="radio"]) td {
    padding: 10px 20px !important; border: none !important; border-bottom: 1px solid #F0F1F4 !important;
    text-align: left !important; vertical-align: middle; background: transparent;
}
body.newdesign-home #attendanceReports .attbuttons ~ table.njMeals:has(input[type="radio"]) tr:last-child td { border-bottom: none !important; }
body.newdesign-home #attendanceReports .attbuttons ~ table.njMeals:has(input[type="radio"]) tr:first-child td {
    background: #F6F7FA; border-bottom: 1px solid #E2E4E9 !important; padding: 12px 20px !important;
}
body.newdesign-home #attendanceReports .attbuttons ~ table.njMeals:has(input[type="radio"]) tr:first-child td p {
    margin: 0 !important; font: 600 12px/16px 'Inter', sans-serif !important; color: #525966 !important; letter-spacing: .02em;
}
body.newdesign-home #attendanceReports .attbuttons ~ table.njMeals:has(input[type="radio"]) tr:not(:first-child):hover td { background: #FAFBFC; }
body.newdesign-home #attendanceReports .attbuttons ~ table.njMeals:has(input[type="radio"]) td:last-child { text-align: right !important; width: 1%; white-space: nowrap; }
/* F / R / P as a segmented control (native radios hidden; the label still toggles them) */
body.newdesign-home #attendanceReports table.njMeals:has(input[type="radio"]) fieldset { margin: 0 !important; }
body.newdesign-home #attendanceReports table.njMeals:has(input[type="radio"]) .ui-controlgroup-controls {
    display: inline-flex !important; gap: 3px; padding: 3px; background: #F0F1F4; border-radius: 10px; box-shadow: none !important; border: none !important;
}
body.newdesign-home #attendanceReports table.njMeals:has(input[type="radio"]) .ui-controlgroup-controls > .ui-radio { margin: 0 !important; }
body.newdesign-home #attendanceReports table.njMeals:has(input[type="radio"]) .ui-radio > input { opacity: 0 !important; pointer-events: none !important; width: 1px !important; height: 1px !important; margin: 0 !important; }
body.newdesign-home #attendanceReports table.njMeals:has(input[type="radio"]) .ui-controlgroup-controls label.ui-btn {
    min-width: 40px; height: 32px; margin: 0 !important; padding: 0 12px !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    background: transparent !important; border: none !important; border-radius: 8px !important; box-shadow: none !important;
    color: #525966 !important; text-shadow: none !important; font: 600 13px/20px 'Inter', sans-serif !important;
}
body.newdesign-home #attendanceReports table.njMeals:has(input[type="radio"]) .ui-controlgroup-controls label.ui-btn:hover { color: #20252D !important; }
body.newdesign-home #attendanceReports table.njMeals:has(input[type="radio"]) .ui-controlgroup-controls label.ui-btn.ui-radio-on {
    background: #fff !important; color: #1D4ED8 !important; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12) !important;
}
body.newdesign-home #attendanceReports table.njMeals:has(input[type="radio"]) .ui-controlgroup-controls label.ui-btn:after { display: none !important; }
/* the Save it adds to the Reports header */
body.newdesign-home #attendanceReports > .head .rightButtonInvite {
    top: 50% !important; transform: translateY(-50%); right: 16px !important; width: auto !important; height: 36px !important; z-index: 103;
}
body.newdesign-home #attendanceReports > .head .rightButtonInvite a { text-decoration: none !important; }
body.newdesign-home #attendanceReports > .head .rightButtonInvitediv {
    display: flex !important; align-items: center; justify-content: center; width: auto !important; height: 36px !important; min-width: 72px;
    padding: 0 16px !important; margin: 0 !important; background: #2563D7 !important; border: none !important; border-radius: 8px !important; box-shadow: none !important;
}
body.newdesign-home #attendanceReports > .head .rightButtonInvitediv:hover { background: #1D4ED8 !important; }
body.newdesign-home #attendanceReports > .head .rightButtonInvitediv p {
    position: static !important; width: auto !important; height: auto !important; margin: 0 !important; color: #fff !important; font: 600 14px/20px 'Inter', sans-serif !important; text-shadow: none !important;
}
@media (max-width: 768px) {
    body.newdesign-home #attendanceReports .attbuttons ~ table.njMeals:has(input[type="radio"]) { margin: 12px 14px 0 !important; }
    body.newdesign-home #attendanceReports .attbuttons ~ table.njMeals:has(input[type="radio"]) td { padding: 10px 12px !important; }
}

/* Monthly Meal Attendance: only the Print / Print Summary buttons (the meal grid + printed output follow the
   government template and are untouched). Side by side, lined up with the report cards; Print primary,
   Print Summary outline, each with a printer icon. Inline margin-top:60px / margin-bottom:-50px dropped. */
body.newdesign-home #attendanceReports :is(#printNjMeals, #printSumaryNjMeals),
body.newdesign-home #attendanceReports .ui-btn:has(> :is(#printNjMeals, #printSumaryNjMeals)) {
    display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
    width: auto !important; height: 40px; padding: 0 18px 0 14px !important;
    margin: 20px 8px 16px 0 !important;
    border-radius: 10px !important; box-shadow: none !important; text-shadow: none !important;
    font: 600 14px/20px 'Inter', sans-serif !important; cursor: pointer; vertical-align: middle;
}
body.newdesign-home #attendanceReports :is(#printNjMeals, .ui-btn:has(> #printNjMeals)) { margin-left: 24px !important; }
body.newdesign-home #attendanceReports #printNjMeals { background: #2563D7 !important; border: 1px solid #2563D7 !important; color: #fff !important; }
body.newdesign-home #attendanceReports #printNjMeals:hover { background: #1D4ED8 !important; }
body.newdesign-home #attendanceReports #printSumaryNjMeals { background: #fff !important; border: 1px solid #D0D5DD !important; color: #20252D !important; }
body.newdesign-home #attendanceReports #printSumaryNjMeals:hover { background: #F6F7FA !important; }
body.newdesign-home #attendanceReports :is(#printNjMeals, #printSumaryNjMeals)::before {
    content: ""; width: 18px; height: 18px; flex: 0 0 18px; background: center / 18px no-repeat;
}
body.newdesign-home #attendanceReports #printNjMeals::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 7V3h9v4M5.5 14.5h-2a1 1 0 01-1-1V8a1 1 0 011-1h13a1 1 0 011 1v5.5a1 1 0 01-1 1h-2M5.5 11.5h9V17h-9z' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.newdesign-home #attendanceReports #printSumaryNjMeals::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 7V3h9v4M5.5 14.5h-2a1 1 0 01-1-1V8a1 1 0 011-1h13a1 1 0 011 1v5.5a1 1 0 01-1 1h-2M5.5 11.5h9V17h-9z' stroke='%23525966' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.newdesign-home #attendanceReports :is(#printNjMeals, #printSumaryNjMeals):after { display: none !important; }
@media (max-width: 768px) {
    body.newdesign-home #attendanceReports :is(#printNjMeals, .ui-btn:has(> #printNjMeals)) { margin-left: 14px !important; }
}
/* report pages (Student Info, Ratio...): when jQM wraps the date input in .ui-input-text, only the
   wrapper is the field - the inner input drew a second border on the left */
body.newdesign-home :is(#Ratios, #childrenInfo, #rosterReport, #pickUpReportPage, #assessmentScores) .ui-input-text {
    display: inline-block; margin: 0 8px 8px 0 !important; padding: 0 !important; vertical-align: middle; overflow: hidden;
}
body.newdesign-home :is(#Ratios, #childrenInfo, #rosterReport, #pickUpReportPage, #assessmentScores) .ui-input-text > input {
    border: none !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important;
    margin: 0 !important; height: 40px; padding: 0 12px !important;
}
body.newdesign-home :is(#Ratios, #childrenInfo, #rosterReport, #pickUpReportPage, #assessmentScores) .ui-input-text:focus-within {
    border-color: #2563D7 !important; box-shadow: 0 0 0 3px rgba(37, 99, 215, 0.12) !important;
}
/* inline report results on the Reports page: same rule */
body.newdesign-home #attendanceReports .attbuttons ~ * .ui-input-text > input { border: none !important; box-shadow: none !important; background: transparent !important; }
/* Ratio Report / Student Info class picker: wide enough for the full class name (native select sizes to
   the selected option where supported, else to the longest option), never wider than the screen */
body.newdesign-home :is(#Ratios, #childrenInfo) select.class {
    width: auto !important; min-width: 240px; max-width: calc(100vw - 48px) !important;
    field-sizing: content;
    padding-right: 36px !important;
}
body.newdesign-home :is(#Ratios, #childrenInfo) .ui-select:has(select.class) { width: auto !important; max-width: calc(100vw - 48px); display: inline-block; }

/* =============================================================================================
 * Name to face (Reports): <h3> + select#selectClass + input#dateButton + table#nameFace inserted loose
 * after the Attendance list - heading / filter row / card table lined up with the report cards.
 * ============================================================================================= */
body.newdesign-home #attendanceReports .attbuttons ~ h3:not(.h3):has(+ #selectClass),
body.newdesign-home #attendanceReports .attbuttons ~ h3:not(.h3):has(+ .ui-select #selectClass) {
    margin: 24px 24px 12px !important; padding: 0 !important;
    font: 600 16px/22px 'Inter', sans-serif !important; color: #20252D !important; text-shadow: none !important;
}
body.newdesign-home #attendanceReports #selectClass,
body.newdesign-home #attendanceReports #dateButton {
    height: 40px !important; margin: 0 8px 16px 0 !important; padding: 0 12px !important; box-sizing: border-box; vertical-align: middle;
    border: 1px solid #E2E4E9 !important; border-radius: 10px !important; background: #fff !important; box-shadow: none !important;
    font: 400 14px 'Inter', sans-serif !important; color: #20252D !important; outline: none;
}
body.newdesign-home #attendanceReports #selectClass { margin-left: 24px !important; min-width: 200px; padding-right: 32px !important; }
body.newdesign-home #attendanceReports :is(#selectClass, #dateButton):focus { border-color: #2563D7 !important; box-shadow: 0 0 0 3px rgba(37, 99, 215, 0.12) !important; }
body.newdesign-home #attendanceReports #nameFace {
    display: table; width: calc(100% - 48px) !important; margin: 0 24px 24px !important;
    border-collapse: separate !important; border-spacing: 0; border: 1px solid #E2E4E9 !important; border-radius: 16px !important;
    overflow: hidden; background: #fff !important; font: 400 14px/20px 'Inter', sans-serif; color: #20252D;
}
body.newdesign-home #attendanceReports #nameFace td {
    padding: 12px 16px !important; border: none !important; border-bottom: 1px solid #F0F1F4 !important; vertical-align: middle; text-align: left;
}
body.newdesign-home #attendanceReports #nameFace tr:first-child td { background: #F6F7FA !important; border-bottom-color: #E2E4E9 !important; }
body.newdesign-home #attendanceReports #nameFace tr:first-child td p { margin: 0 !important; font: 600 12px/16px 'Inter', sans-serif !important; color: #525966 !important; letter-spacing: .02em; }
body.newdesign-home #attendanceReports #nameFace tr:last-child td { border-bottom: none !important; }
body.newdesign-home #attendanceReports #nameFace tr:not(:first-child):hover td { background: #FAFBFC; }
/* children count + the "+" (show who) */
body.newdesign-home #attendanceReports #nameFace tr:not(:first-child) td:last-child { display: flex; align-items: center; gap: 10px; }
body.newdesign-home #attendanceReports #nameFace td:last-child > p { float: none !important; margin: 0 !important; font-weight: 600; min-width: 24px; }
body.newdesign-home #attendanceReports #nameFace .bPlus {
    position: relative !important; right: auto !important; width: 28px !important; height: 28px !important; min-width: 0; padding: 0 !important; margin: 0 !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    background: #EEF3FD !important; border: none !important; border-radius: 8px !important; box-shadow: none !important; cursor: pointer;
}
body.newdesign-home #attendanceReports #nameFace .bPlus:hover { background: #DCE6FB !important; }
body.newdesign-home #attendanceReports #nameFace .bPlus p {
    position: static !important; margin: 0 !important; font: 600 18px/1 'Inter', sans-serif !important; color: #2563D7 !important;
}
@media (max-width: 768px) {
    body.newdesign-home #attendanceReports .attbuttons ~ h3:not(.h3):has(+ #selectClass) { margin: 20px 14px 10px !important; }
    body.newdesign-home #attendanceReports #selectClass { margin-left: 14px !important; }
    body.newdesign-home #attendanceReports #nameFace { width: calc(100% - 28px) !important; margin: 0 14px 20px !important; }
    body.newdesign-home #attendanceReports #nameFace td { padding: 10px 12px !important; }
}

/* 30 Minute Report header: Class Name / Date / Teacher 1 / Teacher 2 - one per line, labels in a fixed
   grey column so the values line up (it shares the centred header div pattern with the NJ reports) */
body.newdesign-home #attendanceReports #dailyAttendance > div[style*="text-align: center"]:not(:has(#downloadNj)) {
    text-align: left !important; font: 400 14px/34px 'Inter', sans-serif; color: #20252D; margin-bottom: 8px;
}
body.newdesign-home #attendanceReports #dailyAttendance > div[style*="text-align: center"]:not(:has(#downloadNj)) > b {
    display: inline-block; min-width: 110px; margin-right: 8px;
    font: 600 13px/34px 'Inter', sans-serif; color: #525966;
}
body.newdesign-home #attendanceReports #dailyAttendance > div[style*="text-align: center"]:not(:has(#downloadNj)) #formdate { margin-left: 0 !important; vertical-align: middle; }

/* Download Observations filter (#observPopup reused as "Download Filter"): AttendanceView forces
   width:80px !important inline on the header button + its parts - fit "Download" inside those 80px;
   no sideways scroll; the From / To / Class labels like the AREA one; dates full width */
body.newdesign-home #observPopup { overflow-x: hidden !important; }
body.newdesign-home #observPopup #ObservAddBtn a > div { padding: 0 !important; min-width: 0 !important; }
body.newdesign-home #observPopup #ObservAddBtn p { font-size: 13px !important; padding: 0 !important; white-space: nowrap; text-align: center !important; }
body.newdesign-home #observPopup .ui-bar-f-dlg .textHeadline { padding-right: 0 !important; }
body.newdesign-home #observPopup #devObserv > label {
    display: block; margin: 16px 0 8px !important;
    font: 600 12px/16px 'Inter', sans-serif !important; color: #525966 !important; letter-spacing: .03em; text-transform: uppercase; text-shadow: none !important;
}
body.newdesign-home #observPopup #devObserv > div[data-id]:first-child,
body.newdesign-home #observPopup #devObserv > div[data-id]:not([data-mode]) {
    margin: 16px 0 8px !important; font: 400 14px/20px 'Inter', sans-serif; color: #20252D;
}
body.newdesign-home #observPopup #devObserv > div[data-id] b {
    display: block; margin-bottom: 8px; font: 600 12px/16px 'Inter', sans-serif; color: #525966; letter-spacing: .03em; text-transform: uppercase;
}
body.newdesign-home #observPopup #devObserv > input[type="date"] {
    width: 100% !important; height: 44px !important; padding: 0 12px !important; box-sizing: border-box; margin: 0 !important;
    border: 1px solid #E2E4E9 !important; border-radius: 10px !important; background: #fff !important; box-shadow: none !important;
    font: 400 15px 'Inter', sans-serif !important; color: #20252D !important;
}
body.newdesign-home #observPopup #devObserv > div[data-mode="child"] {
    display: inline-flex; align-items: center; margin: 8px 6px 0 0; padding: 4px 10px; border-radius: 999px; background: #EEF3FD; color: #1D4ED8; font: 500 13px 'Inter', sans-serif;
}
body.newdesign-home #observPopup select#selectChild { width: 100%; }

/* =============================================================================================
 * Approved Pickup (side menu > Approved Pickup): SideMenuView takes over the current page - #topMsg,
 * one li[special] per approved pickup, #add, and the #addNewContact form (+ a header Save). Scoped to
 * the page that holds #topMsg. Contacts as one list card, the note as an info banner, Add as an outline
 * button, the add form as a card of labelled fields.
 * ============================================================================================= */
body.newdesign-home .ui-page:has(#topMsg) { background: #F6F7FA !important; }
body.newdesign-home .mainContent:has(> #topMsg) {
    max-width: 880px !important; margin-left: auto !important; margin-right: auto !important;
    padding: 24px !important; box-sizing: border-box; background: transparent !important; font-family: 'Inter', sans-serif;
}
body.newdesign-home .mainContent > #topMsg {
    margin: 0 0 16px !important; padding: 14px 16px 14px 44px !important; position: relative;
    background: #EEF3FD; border: 1px solid #C7D7F8; border-radius: 12px;
    font: 400 14px/21px 'Inter', sans-serif !important; color: #1E3A8A !important; text-align: left !important; text-shadow: none !important;
}
body.newdesign-home .mainContent > #topMsg::before {
    content: ""; position: absolute; left: 14px; top: 15px; width: 18px; height: 18px;
    background: center / 18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7.5' stroke='%232563D7' stroke-width='1.5'/%3E%3Cpath d='M10 9v4.5M10 6.5v.01' stroke='%232563D7' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* contacts list */
body.newdesign-home .mainContent:has(> #topMsg) > li[special].invContainer {
    display: flex !important; align-items: center; gap: 12px; list-style: none;
    min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 12px 16px !important;
    background: #fff !important; border: 1px solid #E2E4E9 !important; border-top: none !important; cursor: pointer; box-sizing: border-box;
}
body.newdesign-home .mainContent:has(> #topMsg) > #topMsg + li[special],
body.newdesign-home .mainContent:has(> #topMsg) > li[special]:not(li[special] + li[special]) { border-top: 1px solid #E2E4E9 !important; border-radius: 14px 14px 0 0; }
body.newdesign-home .mainContent:has(> #topMsg) > li[special]:not(:has(+ li[special])) { border-radius: 0 0 14px 14px; }
body.newdesign-home .mainContent:has(> #topMsg) > li[special]:not(li[special] + li[special]):not(:has(+ li[special])) { border-radius: 14px; }
body.newdesign-home .mainContent:has(> #topMsg) > li[special] + li[special] { border-top: 1px solid #F0F1F4 !important; }
body.newdesign-home .mainContent:has(> #topMsg) > li[special]:hover { background: #FAFBFC !important; }
body.newdesign-home .mainContent:has(> #topMsg) > li[special] .invLeftFaceTag {
    position: static !important; flex: 0 0 40px; width: 40px !important; height: 40px !important; margin: 0 !important;
    border-radius: 50%; overflow: hidden; background: #E3F2F6;
}
body.newdesign-home .mainContent:has(> #topMsg) > li[special] .invLeftFaceTag img { width: 40px !important; height: 40px !important; object-fit: cover; margin: 0 !important; }
body.newdesign-home .mainContent:has(> #topMsg) > li[special] .invLeftFaceTag .faceTagName { display: none !important; }
body.newdesign-home .mainContent:has(> #topMsg) > li[special] .invText { position: static !important; flex: 1; min-width: 0; margin: 0 !important; padding: 0 !important; }
body.newdesign-home .mainContent:has(> #topMsg) > li[special] .invText h4 { margin: 0 !important; font: 600 15px/20px 'Inter', sans-serif !important; color: #20252D !important; text-shadow: none !important; }
body.newdesign-home .mainContent:has(> #topMsg) > li[special] .invText p { margin: 2px 0 0 !important; }
body.newdesign-home .mainContent:has(> #topMsg) > li[special] .invText p a:empty { display: none; }
body.newdesign-home .mainContent:has(> #topMsg) > li[special]::after {
    content: ""; flex: 0 0 16px; width: 16px; height: 16px; opacity: .55;
    background: center / 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M6 4l4 4-4 4' stroke='%23525966' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Add */
body.newdesign-home .mainContent:has(> #topMsg) > #add,
body.newdesign-home .mainContent:has(> #topMsg) > .ui-btn:has(> #add) {
    display: inline-flex !important; align-items: center; gap: 8px; width: auto !important; height: 40px;
    margin: 16px 0 0 !important; padding: 0 16px 0 12px !important;
    background: #fff !important; border: 1px solid #D0D5DD !important; border-radius: 10px !important;
    box-shadow: none !important; text-shadow: none !important; color: #20252D !important; font: 600 14px 'Inter', sans-serif !important; cursor: pointer;
}
body.newdesign-home .mainContent:has(> #topMsg) > #add:hover { background: #F6F7FA !important; }
body.newdesign-home .mainContent:has(> #topMsg) > #add::before {
    content: ""; width: 16px; height: 16px; flex: 0 0 16px;
    background: center / 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.5v11M2.5 8h11' stroke='%232563D7' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Add Approved Pickup form */
body.newdesign-home .mainContent:has(> #topMsg) > #addNewContact {
    margin: 0 !important; padding: 8px 20px 20px !important;
    background: #fff; border: 1px solid #E2E4E9; border-radius: 16px;
}
body.newdesign-home .mainContent:has(> #topMsg) > #addNewContact > div > div { margin: 14px 0 0 !important; }
body.newdesign-home .mainContent:has(> #topMsg) > #addNewContact b {
    display: block; margin: 0 0 6px; font: 600 12px/16px 'Inter', sans-serif; color: #525966; letter-spacing: .03em; text-transform: uppercase;
}
body.newdesign-home .mainContent:has(> #topMsg) > #addNewContact .ui-input-text {
    margin: 0 !important; border: 1px solid #E2E4E9 !important; border-radius: 10px !important; background: #fff !important; box-shadow: none !important;
}
body.newdesign-home .mainContent:has(> #topMsg) > #addNewContact .ui-input-text:focus-within { border-color: #2563D7 !important; box-shadow: 0 0 0 3px rgba(37, 99, 215, 0.12) !important; }
body.newdesign-home .mainContent:has(> #topMsg) > #addNewContact input {
    height: 42px !important; min-height: 42px !important; padding: 0 12px !important; border: none !important; background: transparent !important;
    font: 400 15px 'Inter', sans-serif !important; color: #20252D !important;
}
body.newdesign-home .mainContent:has(> #topMsg) > #addNewContact #errorMessage { position: static !important; margin: 8px 0 0 !important; color: #B42318 !important; font: 500 13px 'Inter', sans-serif; text-align: left !important; }
/* header Save (adding) */
body.newdesign-home .ui-page:has(#topMsg) > .head .rightButtonInvite:not(.nd-invite) {
    display: block !important; top: 50% !important; transform: translateY(-50%); right: 16px !important; width: auto !important; height: 36px !important; z-index: 103;
}
body.newdesign-home .ui-page:has(#topMsg) > .head .rightButtonInvite:not(.nd-invite) a { text-decoration: none !important; }
body.newdesign-home .ui-page:has(#topMsg) > .head .rightButtonInvite:not(.nd-invite)div {
    display: flex !important; align-items: center; justify-content: center; width: auto !important; height: 36px !important; min-width: 72px;
    padding: 0 16px !important; margin: 0 !important; background: #2563D7 !important; border: none !important; border-radius: 8px !important; box-shadow: none !important;
}
body.newdesign-home .ui-page:has(#topMsg) > .head .rightButtonInvite:not(.nd-invite)div p {
    position: static !important; width: auto !important; height: auto !important; margin: 0 !important; color: #fff !important; font: 600 14px/20px 'Inter', sans-serif !important; text-shadow: none !important;
}
/* while adding, Save sits where the message icon + user pill are - hide that cluster */
body.newdesign-home .ui-page:has(#addNewContact):has(#topMsg) > .head .nd-topbar-right { display: none !important; }
@media (max-width: 640px) {
    body.newdesign-home .mainContent:has(> #topMsg) { padding: 14px !important; }
}

/* =============================================================================================
 * Parent billing (new design) - Accounts strips + Payment Settings.
 * ============================================================================================= */
/* child strips: compact chips (inline display:inline-block / heights beat the earlier rules), the whole
   strip is clickable (billingController binds it) and the selected child is outlined in blue */
body.newdesign-home #billing .noMargin.ui-content > div[data-id-child] { cursor: pointer; min-height: 0 !important; padding: 12px 18px !important; gap: 12px !important; }
body.newdesign-home #billing .noMargin.ui-content > div[data-id-child]:hover { border-color: #D0D5DD !important; }
body.newdesign-home #billing .noMargin.ui-content > div[data-id-child]:has(.makePayment:not([disabled])) {
    border-color: #2563D7 !important; box-shadow: 0 0 0 3px rgba(37, 99, 215, 0.10) !important;
}
body.newdesign-home #billing .noMargin.ui-content > div[data-id-child] .childName {
    height: auto !important; min-height: 0 !important; padding: 0 !important; background: transparent !important;
    display: inline-flex !important; align-items: center; font: 600 15px/20px 'Inter', sans-serif !important; color: #20252D !important;
}
body.newdesign-home #billing .noMargin.ui-content > div[data-id-child] > p:not(.childName) {
    display: inline-flex !important; align-items: center; height: auto !important; min-height: 0 !important;
    padding: 6px 12px !important; line-height: 20px !important; font: 400 13px/20px 'Inter', sans-serif !important; color: #525966;
    border: 1px solid #E2E4E9 !important; background: #F6F7FA !important;
}
body.newdesign-home #billing .noMargin.ui-content > div[data-id-child] > p:not(.childName) b { color: #20252D; font-weight: 600; }
body.newdesign-home #billing .noMargin.ui-content > div[data-id-child] .makePayment { cursor: pointer; }
body.newdesign-home #billing .noMargin.ui-content > div[data-id-child] .makePayment[disabled] { cursor: default; }

/* Add Payment Method: the "+" drawn as two bars centred in the white circle (the 22px text glyph sat off-centre) */
body.newdesign-home #billing :is(#addPayment, #addPayment2) > div {
    position: absolute !important; left: 14px !important; top: 50% !important; transform: translateY(-50%) !important;
    width: 18px !important; height: 18px !important; margin: 0 !important; padding: 0 !important;
    background: #fff !important; border-radius: 50% !important; box-sizing: border-box;
}
body.newdesign-home #billing :is(#addPayment, #addPayment2) > div > p { display: none !important; }
body.newdesign-home #billing :is(#addPayment, #addPayment2) > div::before,
body.newdesign-home #billing :is(#addPayment, #addPayment2) > div::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 2px; border-radius: 1px;
    background: var(--main-second-color); transform: translate(-50%, -50%);
}
body.newdesign-home #billing :is(#addPayment, #addPayment2) > div::after { transform: translate(-50%, -50%) rotate(90deg); }
body.newdesign-home #billing #addPayment2 { position: relative; padding: 0 16px 0 40px !important; height: 38px !important; width: auto !important; border-radius: 10px !important; }
body.newdesign-home #billing #addPayment2 > p { margin: 0 !important; width: auto !important; font: 600 13px 'Inter', sans-serif !important; }

/* Payment Settings: each method of payment as one card - title + bin, card art on the left, autopay
   settings on the right (the legacy rows are absolutely positioned with px offsets; re-flowed here) */
body.newdesign-home #billing #cards:has(> div[style*="height: 190px"]) { background: transparent !important; box-shadow: none !important; border: none !important; padding: 0 !important; }
body.newdesign-home #billing #cards > div[style*="height: 190px"] {
    position: relative !important; height: auto !important;
    display: grid !important; grid-template-columns: 260px minmax(0, 1fr); grid-template-areas: "title title" "card autopay";
    column-gap: 24px; row-gap: 12px; align-items: center;
    margin: 0 0 16px !important; padding: 18px 20px !important;
    background: #fff; border: 1px solid #E2E4E9; border-radius: 16px; box-sizing: border-box;
}
body.newdesign-home #billing #cards > div[style*="height: 190px"] > p:first-child {
    grid-area: title; margin: 0 !important; padding: 0 !important; font: 600 15px/22px 'Inter', sans-serif !important; color: #20252D !important;
}
body.newdesign-home #billing #cards > div[style*="height: 190px"] > .mainFaceTagGroupHeaderEdit {
    position: absolute !important; top: 14px !important; right: 14px !important; left: auto !important; margin: 0 !important;
    width: 32px; height: 32px; display: flex !important; align-items: center; justify-content: center;
    background: transparent !important; border: 1px solid #E2E4E9 !important; border-radius: 8px !important; box-shadow: none !important; cursor: pointer;
}
body.newdesign-home #billing #cards > div[style*="height: 190px"] > .mainFaceTagGroupHeaderEdit:hover { background: #FEF3F2 !important; border-color: #FECDCA !important; }
body.newdesign-home #billing #cards > div[style*="height: 190px"] > .mainFaceTagGroupHeaderEdit img {
    width: 16px !important; height: 16px !important; margin: 0 !important;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 20 20'%3E%3Cpath d='M3.5 5.5h13M8 5.5V4a1 1 0 011-1h2a1 1 0 011 1v1.5M5 5.5l.8 10.6a1 1 0 001 .9h6.4a1 1 0 001-.9L15 5.5M8.5 9v5M11.5 9v5' stroke='%23B42318' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* card art */
body.newdesign-home #billing #cards > div[style*="height: 190px"] > div[style*="background-color: #4ec4dd"] {
    grid-area: card; position: relative; float: none !important;
    width: 260px !important; height: auto !important; min-height: 150px; margin: 0 !important; padding: 16px !important; box-sizing: border-box;
    display: flex; flex-wrap: wrap; align-content: space-between; row-gap: 14px;
    background: linear-gradient(135deg, #2563D7 0%, #1E40AF 100%) !important; border-radius: 14px; box-shadow: 0 8px 20px rgba(37, 99, 215, 0.25) !important;
    font-family: 'Inter', sans-serif; color: #fff;
}
body.newdesign-home #billing #cards > div[style*="height: 190px"] > div[style*="background-color: #4ec4dd"] > p {
    margin: 0 !important; float: none !important; font: 500 13px/18px 'Inter', sans-serif !important; color: #fff !important;
}
body.newdesign-home #billing #cards > div[style*="height: 190px"] > div[style*="background-color: #4ec4dd"] > p:first-child { flex: 1 1 100%; font-weight: 600 !important; font-size: 14px !important; }
body.newdesign-home #billing #cards > div[style*="height: 190px"] > div[style*="background-color: #4ec4dd"] > p:nth-of-type(2) { flex: 1 1 100%; letter-spacing: .08em; font-size: 15px !important; }
body.newdesign-home #billing #cards > div[style*="height: 190px"] > div[style*="background-color: #4ec4dd"] > p:last-of-type { margin-left: auto !important; opacity: .85; }
body.newdesign-home #billing #cards > div[style*="height: 190px"] > div[style*="background-color: #4ec4dd"] > span {
    top: 16px !important; left: auto !important; width: 24px !important; height: 24px !important; border-radius: 50% !important;
}
body.newdesign-home #billing #cards > div[style*="height: 190px"] > div[style*="background-color: #4ec4dd"] > span:first-of-type { right: 16px; }
body.newdesign-home #billing #cards > div[style*="height: 190px"] > div[style*="background-color: #4ec4dd"] > span:nth-of-type(2) { right: 30px; }
body.newdesign-home #billing #cards > div[style*="height: 190px"] :is(.defaultBtn, .defultORnot) {
    padding: 4px 10px !important; border-radius: 999px !important; cursor: pointer;
    background: rgba(255, 255, 255, 0.95) !important; color: #1D4ED8 !important; font: 600 12px/16px 'Inter', sans-serif !important;
}
body.newdesign-home #billing #cards > div[style*="height: 190px"] .defaultBtn { background: rgba(255, 255, 255, 0.22) !important; color: #fff !important; }
/* autopay settings */
body.newdesign-home #billing #cards > div[style*="height: 190px"] > div[style*="border-top"] {
    grid-area: autopay; position: relative; margin: 0 !important; width: auto !important; height: auto !important; padding: 14px 16px !important;
    border: 1px solid #F0F1F4 !important; border-radius: 12px; background: #FAFBFC; box-sizing: border-box;
    display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 16px; row-gap: 4px; align-items: center;
    font-family: 'Inter', sans-serif; color: #20252D;
}
body.newdesign-home #billing #cards > div[style*="height: 190px"] > div[style*="border-top"] > p {
    float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; line-height: 18px !important;
}
body.newdesign-home #billing #cards > div[style*="height: 190px"] > div[style*="border-top"] > p:nth-of-type(1) { grid-column: 1; grid-row: 1; font: 600 14px/20px 'Inter', sans-serif !important; }
body.newdesign-home #billing #cards > div[style*="height: 190px"] > div[style*="border-top"] > p:nth-of-type(2) { grid-column: 1; grid-row: 2 / span 2; font: 400 12px/18px 'Inter', sans-serif !important; color: #6B7381; }
body.newdesign-home #billing #cards > div[style*="height: 190px"] > div[style*="border-top"] > p:nth-of-type(3) { grid-column: 2; grid-row: 1; font: 500 13px/20px 'Inter', sans-serif !important; justify-self: end; }
body.newdesign-home #billing #cards > div[style*="height: 190px"] > div[style*="border-top"] > label.switch {
    grid-column: 3; grid-row: 1; position: relative !important; top: 0 !important; left: 0 !important; float: none !important; margin: 0 !important;
}
body.newdesign-home #billing #cards > div[style*="height: 190px"] > div[style*="border-top"] > p:nth-of-type(4) { grid-column: 2 / span 2; grid-row: 2; font: 400 12px/18px 'Inter', sans-serif !important; color: #6B7381; justify-self: end; }
body.newdesign-home #billing #cards > div[style*="height: 190px"] > div[style*="border-top"] > p:nth-of-type(5) { grid-column: 2; grid-row: 3; font: 400 12px/18px 'Inter', sans-serif !important; color: #6B7381; justify-self: end; }
body.newdesign-home #billing #cards > div[style*="height: 190px"] > div[style*="border-top"] > p:nth-of-type(6) { grid-column: 3; grid-row: 3; font: 500 12px/18px 'Inter', sans-serif !important; color: #20252D; justify-self: end; }
@media (max-width: 900px) {
    body.newdesign-home #billing #cards > div[style*="height: 190px"] { grid-template-columns: 1fr; grid-template-areas: "title" "card" "autopay"; }
    body.newdesign-home #billing #cards > div[style*="height: 190px"] > div[style*="background-color: #4ec4dd"] { width: 100% !important; max-width: 320px; }
}

/* Home header "Invite" (kept for users the old design shows it to): inside the topbar cluster as an
   outline button left of the message icon (overrides the home-header hide above) */
body.newdesign-home .head.headerRoot .nd-topbar-right .rightButtonInvite.nd-invite {
    display: block !important; position: static !important; top: auto !important; right: auto !important; transform: none !important;
    width: auto !important; height: auto !important; margin: 0 !important; float: none !important;
}
body.newdesign-home .nd-topbar-right .rightButtonInvite.nd-invite a { display: block; text-decoration: none !important; }
body.newdesign-home .nd-topbar-right .rightButtonInvite.nd-invite .rightButtonInvitediv {
    display: flex !important; align-items: center; justify-content: center;
    width: auto !important; height: 40px !important; padding: 0 16px !important; margin: 0 !important; box-sizing: border-box;
    background: #fff !important; border: 1px solid #D0D5DD !important; border-radius: 10px !important; box-shadow: none !important;
}
body.newdesign-home .nd-topbar-right .rightButtonInvite.nd-invite .rightButtonInvitediv:hover { background: #F6F7FA !important; }
body.newdesign-home .nd-topbar-right .rightButtonInvite.nd-invite .rightButtonInvitediv p {
    position: static !important; width: auto !important; height: auto !important; margin: 0 !important;
    color: #20252D !important; text-shadow: none !important; font: 600 14px/20px 'Inter', sans-serif !important;
}

/* Parent billing - Posted Transaction filters (Start date / End date / Type): one tidy row of rounded
   fields; the dates are real date fields now (new-design calendar), Type a rounded select */
body.newdesign-home #billing #tableElements.nd-parent-posted > div:not(:has(table)) {
    float: none !important; display: inline-flex !important; align-items: center; position: relative;
    width: auto !important; height: 40px !important; margin: 12px 8px 12px 0 !important; padding: 0 !important;
    border: 1px solid #E2E4E9 !important; border-radius: 10px; background: #fff; box-sizing: border-box; vertical-align: middle;
}
body.newdesign-home #billing #tableElements.nd-parent-posted > div:not(:has(table)):first-of-type { margin-left: 24px !important; }
body.newdesign-home #billing #tableElements.nd-parent-posted > div:not(:has(table)):focus-within { border-color: #2563D7 !important; box-shadow: 0 0 0 3px rgba(37, 99, 215, 0.12); }
body.newdesign-home #billing #tableElements.nd-parent-posted :is(#imgCalander1, #imgCalander2) { display: none !important; }
body.newdesign-home #billing #tableElements.nd-parent-posted .inputCalander {
    width: 160px !important; height: 38px !important; padding: 0 12px !important; margin: 0 !important; border: none !important; background: transparent !important;
    font: 400 14px 'Inter', sans-serif !important; color: #20252D !important; outline: none; box-sizing: border-box;
}
body.newdesign-home #billing #tableElements.nd-parent-posted #selectType {
    position: static !important; width: 180px !important; height: 38px !important; padding: 0 36px 0 12px !important; margin: 0 !important;
    font: 400 14px 'Inter', sans-serif !important; color: #20252D !important; cursor: pointer; background-color: transparent !important;
    background: no-repeat right 12px center / 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23525966' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
body.newdesign-home #billing #tableElements.nd-parent-posted #selectType + div { display: none !important; }   /* legacy drawn arrow */
@media (max-width: 640px) {
    body.newdesign-home #billing #tableElements.nd-parent-posted > div:not(:has(table)):first-of-type { margin-left: 14px !important; }
    body.newdesign-home #billing #tableElements.nd-parent-posted .inputCalander { width: 140px !important; }
}

/* Approved Pickup back button: the new-design arrow (it is added to the home header at runtime) */
body.newdesign-home .ui-page:has(#topMsg) > .head .leftButton img {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5M11 18l-6-6 6-6' stroke='%2320252d' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    width: 28px !important; height: 28px !important; filter: none !important;
}
/* while the Approved Pickup Save shows (adding), the moved Invite steps aside */
body.newdesign-home .ui-page:has(#addNewContact):has(#topMsg) > .head .rightButtonInvite.nd-invite { display: none !important; }

/* =============================================================================================
 * Parent billing - "Make a payment" modal (#makePaymentWithBlock, desktop + phone markup) as a
 * centred new-design card: white header with title + close, the invoice table with a blue Pay per
 * row, the payment summary (Amount due / Processing fee / You're paying / Your balance) as four
 * tiles, and a full-width Pay now. Markup + handlers unchanged.
 * ============================================================================================= */
body.newdesign-home #makePaymentWithBlock {
    position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%);
    width: min(680px, calc(100vw - 32px)) !important; min-height: 0 !important; height: auto !important;
    max-height: calc(100vh - 48px); overflow-y: auto; overflow-x: hidden;
    margin: 0 !important; padding: 0 0 20px !important; box-sizing: border-box;
    background: #fff !important; border-radius: 16px !important; box-shadow: 0 24px 56px rgba(16, 24, 40, 0.24) !important;
    font-family: 'Inter', sans-serif; color: #20252D;
}
/* header */
body.newdesign-home #makePaymentWithBlock > div:first-child {
    position: sticky; top: 0; z-index: 2;
    display: flex !important; align-items: center; justify-content: space-between;
    width: auto !important; height: auto !important; margin: 0 !important; padding: 18px 16px 16px 24px !important;
    background: #fff !important; border-bottom: 1px solid #F0F1F4; border-radius: 16px 16px 0 0 !important;
}
body.newdesign-home #makePaymentWithBlock > div:first-child > p {
    margin: 0 !important; padding: 0 !important; color: #20252D !important; font: 600 18px/26px 'Inter', sans-serif !important; text-shadow: none !important;
}
body.newdesign-home #makePaymentWithBlock > div:first-child > button {
    float: none !important; position: static !important; width: 34px !important; height: 34px !important; margin: 0 !important; padding: 0 !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    background: transparent !important; border: none !important; border-radius: 8px !important; box-shadow: none !important;
    color: #525966 !important; font: 400 18px/1 'Inter', sans-serif !important; cursor: pointer;
}
body.newdesign-home #makePaymentWithBlock > div:first-child > button:hover { background: #F6F7FA !important; }
/* "Select the invoice you wish to pay" */
body.newdesign-home #makePaymentWithBlock > p {
    margin: 20px 24px 10px !important; font: 600 13px/18px 'Inter', sans-serif !important; color: #525966 !important;
}
/* invoice table */
body.newdesign-home #makePaymentWithBlock table.pcpss {
    width: calc(100% - 48px) !important; margin: 0 24px !important; border-collapse: separate !important; border-spacing: 0;
    border: 1px solid #E2E4E9 !important; border-radius: 12px !important; overflow: hidden; box-shadow: none !important;
    font: 400 13px/18px 'Inter', sans-serif;
}
body.newdesign-home #makePaymentWithBlock table.pcpss td { width: auto !important; padding: 10px 12px !important; vertical-align: middle; }
body.newdesign-home #makePaymentWithBlock table.pcpss tr:first-child td { font: 600 12px/16px 'Inter', sans-serif !important; color: #525966 !important; }
body.newdesign-home #makePaymentWithBlock table.pcpss td:nth-child(2) { min-width: 180px; }
body.newdesign-home #makePaymentWithBlock table.pcpss td.amount { white-space: nowrap; }
body.newdesign-home #makePaymentWithBlock table.pcpss td button {
    height: 30px; padding: 0 14px !important; margin: 0 !important; width: auto !important;
    background: #2563D7 !important; border: none !important; border-radius: 8px !important; box-shadow: none !important;
    color: #fff !important; font: 600 13px/30px 'Inter', sans-serif !important; text-shadow: none !important; cursor: pointer;
}
body.newdesign-home #makePaymentWithBlock table.pcpss td button:hover { background: #1D4ED8 !important; }
/* payment summary tiles (shown once an invoice is picked) */
body.newdesign-home #makePaymentWithBlock .payingselected {
    float: none !important; display: inline-flex; flex-direction: column; vertical-align: top;
    width: calc((100% - 48px - 36px) / 4) !important; height: auto !important; min-height: 72px;
    margin: 16px 0 0 12px !important; padding: 12px !important; box-sizing: border-box;
    border: 1px solid #E2E4E9 !important; border-radius: 12px; background: #F6F7FA;
}
body.newdesign-home #makePaymentWithBlock input#amountPay + .payingselected { margin-left: 24px !important; }
body.newdesign-home #makePaymentWithBlock .payingselected[style*="display: none"] { display: none !important; }
body.newdesign-home #makePaymentWithBlock .payingselected > p {
    width: auto !important; margin: 0 !important; color: #6B7381 !important; font: 500 12px/16px 'Inter', sans-serif !important;
}
body.newdesign-home #makePaymentWithBlock .payingselected > p + p {
    margin-top: 6px !important; color: #20252D !important; font: 600 15px/20px 'Inter', sans-serif !important;
}
body.newdesign-home #makePaymentWithBlock .payingselected:last-of-type > p + p { color: #2563D7 !important; }
body.newdesign-home #makePaymentWithBlock > hr { width: auto !important; margin: 20px 0 0 !important; border: none !important; border-top: 1px solid #F0F1F4 !important; }
/* Pay now */
body.newdesign-home #makePaymentWithBlock #payNow {
    float: none !important; display: block; width: calc(100% - 48px) !important; height: 44px !important;
    margin: 16px 24px 0 !important; padding: 0 !important;
    background: #2563D7 !important; border: none !important; border-radius: 10px !important; box-shadow: none !important;
    color: #fff !important; font: 600 15px 'Inter', sans-serif !important; cursor: pointer;
}
body.newdesign-home #makePaymentWithBlock #payNow:hover { background: #1D4ED8 !important; }
body.newdesign-home #makePaymentWithBlock #payNow[style*="display: none"] { display: none !important; }
@media (max-width: 640px) {
    body.newdesign-home #makePaymentWithBlock .payingselected { width: calc((100% - 48px - 12px) / 2) !important; }
    body.newdesign-home #makePaymentWithBlock .payingselected { margin-left: 12px !important; }
    body.newdesign-home #makePaymentWithBlock #amountPay + .payingselected,
    body.newdesign-home #makePaymentWithBlock #amountPay + .payingselected + .payingselected + .payingselected { margin-left: 24px !important; }
    body.newdesign-home #makePaymentWithBlock table.pcpss td:nth-child(2) { min-width: 120px; }
}
/* Add Payment Method: the chosen method is the checked radio (billingController checks it); the legacy
   fake black "selected" dot is hidden; blue radios */
body.newdesign-home #addPaymentWithBlock > div[style*="background-color: black"][style*="border-radius: 50%"] { display: none !important; }
body.newdesign-home #addPaymentWithBlock :is(#radioAccount, #radioCredit) { accent-color: #2563D7; cursor: pointer; width: 18px !important; height: 18px !important; }
/* Approved Pickup screen: a sub-page header - back button + title only (the home topbar cluster, menu
   button and floating sidebar reopen stay off while it is open; its own Save shows when adding) */
body.newdesign-home .ui-page:has(#topMsg) > .head .nd-topbar-right,
body.newdesign-home .ui-page:has(#topMsg) > .head .settings { display: none !important; }
body.newdesign-home:has(.ui-page-active #topMsg) #ndSidebarReopen { display: none !important; }
body.newdesign-home .ui-page:has(#topMsg) > .head .leftButton {
    display: flex !important; align-items: center; position: absolute !important; left: 12px !important; top: 50% !important; transform: translateY(-50%);
    margin: 0 !important; z-index: 103;
}
/* Make a payment: the four summary tiles as equal columns of one grid row (same width AND height) -
   the modal is a grid; everything else spans the full width */
body.newdesign-home #makePaymentWithBlock {
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) 12px minmax(0, 1fr) 12px minmax(0, 1fr) 12px minmax(0, 1fr) 24px;
    align-content: start;
}
body.newdesign-home #makePaymentWithBlock > * { grid-column: 1 / -1; }
body.newdesign-home #makePaymentWithBlock > .payingselected {
    width: auto !important; margin: 16px 0 0 !important; height: auto !important; align-self: stretch;
}
body.newdesign-home #makePaymentWithBlock > #amountPay + .payingselected { grid-column: 2; }
body.newdesign-home #makePaymentWithBlock > #amountPay + .payingselected + .payingselected { grid-column: 4; }
body.newdesign-home #makePaymentWithBlock > #amountPay + .payingselected + .payingselected + .payingselected { grid-column: 6; }
body.newdesign-home #makePaymentWithBlock > #amountPay + .payingselected + .payingselected + .payingselected + .payingselected { grid-column: 8; }
body.newdesign-home #makePaymentWithBlock > #amountPay { display: none !important; }   /* hidden field */
@media (max-width: 640px) {
    body.newdesign-home #makePaymentWithBlock { grid-template-columns: 24px minmax(0, 1fr) 12px minmax(0, 1fr) 24px; }
    body.newdesign-home #makePaymentWithBlock > #amountPay + .payingselected,
    body.newdesign-home #makePaymentWithBlock > #amountPay + .payingselected + .payingselected + .payingselected { grid-column: 2; }
    body.newdesign-home #makePaymentWithBlock > #amountPay + .payingselected + .payingselected,
    body.newdesign-home #makePaymentWithBlock > #amountPay + .payingselected + .payingselected + .payingselected + .payingselected { grid-column: 4; }
    body.newdesign-home #makePaymentWithBlock > #amountPay + .payingselected { margin-left: 0 !important; }
    body.newdesign-home #makePaymentWithBlock > #amountPay + .payingselected + .payingselected + .payingselected { margin-left: 0 !important; }
}
/* (outranks the earlier per-tile left margins - the grid columns do the spacing now) */
body.newdesign-home #makePaymentWithBlock input#amountPay ~ .payingselected.payingselected { margin: 16px 0 0 !important; }

/* Home title row "Invite" (moved from the header by View.js): a button next to the page title -
   outline with a person-plus icon, same height as Create New Class; compact on phones */
body.newdesign-home #main .title-row .rightButtonInvite.nd-invite {
    display: block !important; position: static !important; top: auto !important; right: auto !important; transform: none !important;
    width: auto !important; height: auto !important; margin: 0 !important; float: none !important; flex: 0 0 auto;
}
body.newdesign-home #main .title-row .rightButtonInvite.nd-invite a { display: block; text-decoration: none !important; }
body.newdesign-home #main .title-row .rightButtonInvite.nd-invite .rightButtonInvitediv {
    display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
    width: auto !important; height: 40px !important; padding: 0 16px 0 12px !important; margin: 0 !important; box-sizing: border-box;
    background: #fff !important; border: 1px solid #D0D5DD !important; border-radius: 10px !important; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05) !important;
}
body.newdesign-home #main .title-row .rightButtonInvite.nd-invite .rightButtonInvitediv:hover { background: #F6F7FA !important; }
body.newdesign-home #main .title-row .rightButtonInvite.nd-invite .rightButtonInvitediv::before {
    content: ""; width: 18px; height: 18px; flex: 0 0 18px;
    background: center / 18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 20 20'%3E%3Ccircle cx='8' cy='6.5' r='3' stroke='%232563D7' stroke-width='1.5'/%3E%3Cpath d='M2.5 16.5c0-3 2.5-5 5.5-5s5.5 2 5.5 5M15.5 6v5M13 8.5h5' stroke='%232563D7' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
body.newdesign-home #main .title-row .rightButtonInvite.nd-invite .rightButtonInvitediv p {
    position: static !important; width: auto !important; height: auto !important; margin: 0 !important;
    color: #20252D !important; text-shadow: none !important; font: 600 14px/20px 'Inter', sans-serif !important; white-space: nowrap;
}
@media (max-width: 640px) {
    body.newdesign-home #main .title-row .rightButtonInvite.nd-invite .rightButtonInvitediv { height: 36px !important; padding: 0 12px 0 10px !important; gap: 6px; }
    body.newdesign-home #main .title-row .rightButtonInvite.nd-invite .rightButtonInvitediv p { font-size: 13px !important; }
}
/* Charge breakdown table nested in an expanded posted / pending row: not a header row, plain rows */
body.newdesign-home #billing :is(.ptps, .pcps, .pcpss) td table tr:first-child td { background: transparent !important; color: inherit !important; }
body.newdesign-home #billing :is(.ptps, .pcps, .pcpss) td table td:last-child { text-align: right !important; white-space: nowrap; }

/* =============================================================================================
 * Edit / New Class (#NewFrame, NewFrameView) - new design: a settings panel that slides in from the
 * right (white panel + shadow under the header), class photo + name / address fields, "Email daily
 * reports" as a segmented control, each setting a row (label left, pill switch right), red outline
 * Delete. CSS only - fields, the generated allSettings switches, timepicki and Save are unchanged.
 * ============================================================================================= */
@keyframes ndPanelIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
body.newdesign-home #NewFrame { background: #EEF0F3 !important; }
body.newdesign-home #NewFrame > .mainContent {
    max-width: none !important; width: min(560px, 100%) !important; box-sizing: border-box;
    margin: 60px 0 0 auto !important; min-height: calc(100vh - 60px);
    padding: 24px 24px 40px !important;
    background: #fff !important; border-left: 1px solid #E2E4E9;
    box-shadow: -12px 0 32px rgba(16, 24, 40, 0.10);
    font-family: 'Inter', sans-serif; color: #20252D;
    animation: ndPanelIn .22s ease-out;
}
body.newdesign-home #NewFrame > .mainContent > br { display: none; }
/* header: Save as the primary button */
body.newdesign-home #NewFrame > .head .rightHeaderButton {
    position: absolute !important; right: 16px !important; left: auto !important; top: 50% !important; transform: translateY(-50%);
    width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; z-index: 103;
}
body.newdesign-home #NewFrame > .head .rightHeaderButton a { text-decoration: none !important; }
body.newdesign-home #NewFrame > .head .rightHeaderButton a > div {
    display: flex !important; align-items: center; justify-content: center; width: auto !important; height: 36px !important; min-width: 72px;
    padding: 0 16px !important; margin: 0 !important; line-height: normal !important;
    background: #2563D7 !important; border: none !important; border-radius: 8px !important; box-shadow: none !important;
}
body.newdesign-home #NewFrame > .head .rightHeaderButton a > div:hover { background: #1D4ED8 !important; }
body.newdesign-home #NewFrame > .head .rightHeaderButton p {
    position: static !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important;
    color: #fff !important; text-shadow: none !important; font: 600 14px/20px 'Inter', sans-serif !important;
}
/* class photo */
body.newdesign-home #NewFrame .centerProfileImage {
    position: relative; display: flex !important; align-items: center; gap: 16px;
    width: auto !important; height: auto !important; margin: 0 0 20px !important; padding: 0 !important; text-align: left !important;
}
body.newdesign-home #NewFrame .centerProfileImage > img:first-child {
    width: 88px !important; height: 88px !important; margin: 0 !important; object-fit: cover;
    border-radius: 16px; border: 1px solid #E2E4E9; background-color: var(--main-second-color); cursor: pointer;
}
body.newdesign-home #NewFrame .centerProfileImage .intro_centerProfileImage { display: none !important; }
body.newdesign-home #NewFrame .centerProfileImage > div { position: static !important; width: auto !important; margin: 0 !important; }
body.newdesign-home #NewFrame .centerProfileImage > div p {
    margin: 0 !important; color: #2563D7 !important; font: 600 14px/20px 'Inter', sans-serif !important; text-decoration: none !important; cursor: pointer;
}
/* name / address */
body.newdesign-home #NewFrame > .mainContent > .ui-input-text {
    margin: 0 0 12px !important; border: 1px solid #E2E4E9 !important; border-radius: 10px !important; background: #fff !important; box-shadow: none !important;
}
body.newdesign-home #NewFrame > .mainContent > .ui-input-text:focus-within { border-color: #2563D7 !important; box-shadow: 0 0 0 3px rgba(37, 99, 215, 0.12) !important; }
body.newdesign-home #NewFrame > .mainContent > .ui-input-text input {
    height: 44px !important; min-height: 44px !important; padding: 0 14px !important; font: 400 15px 'Inter', sans-serif !important; color: #20252D !important;
}
/* setting rows */
body.newdesign-home #NewFrame > .mainContent > span:not([style*="display: none"]):not([style*="display:none"]) {
    display: flex !important; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding: 14px 0 !important; margin: 0 !important; border-bottom: 1px solid #F0F1F4;
}
body.newdesign-home #NewFrame > .mainContent > span > label { margin: 0 !important; flex: 1 1 200px; min-width: 0; }
body.newdesign-home #NewFrame > .mainContent > span > label h4 {
    margin: 0 !important; font: 500 14px/20px 'Inter', sans-serif !important; color: #20252D !important; text-shadow: none !important;
}
/* Email daily reports: label above a segmented control */
body.newdesign-home #NewFrame #dailySheetEmailblock { padding-top: 6px !important; }
body.newdesign-home #NewFrame #dailySheetEmailblock > label { flex-basis: 100%; }
body.newdesign-home #NewFrame #dailySheetEmail { margin: 0 !important; }
body.newdesign-home #NewFrame #dailySheetEmail .ui-controlgroup-controls {
    display: inline-flex !important; gap: 3px; padding: 3px; background: #F0F1F4; border-radius: 10px; box-shadow: none !important;
}
body.newdesign-home #NewFrame #dailySheetEmail .ui-radio { margin: 0 !important; }
body.newdesign-home #NewFrame #dailySheetEmail .ui-radio > input { opacity: 0 !important; pointer-events: none !important; width: 1px !important; height: 1px !important; margin: 0 !important; }
body.newdesign-home #NewFrame #dailySheetEmail label.ui-btn {
    margin: 0 !important; padding: 8px 14px !important; background: transparent !important; border: none !important; border-radius: 8px !important;
    box-shadow: none !important; text-shadow: none !important; color: #525966 !important; font: 500 14px/20px 'Inter', sans-serif !important;
}
body.newdesign-home #NewFrame #dailySheetEmail label.ui-btn.ui-radio-on,
body.newdesign-home #NewFrame #dailySheetEmail label.ui-btn.ui-btn-active { background: #fff !important; color: #1D4ED8 !important; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12) !important; }
body.newdesign-home #NewFrame #dailySheetEmail label.ui-btn:after { display: none !important; }
/* designated time + time zone */
body.newdesign-home #NewFrame #dailySheetManual:not([style*="display: none"]):not([style*="display:none"]) { justify-content: flex-start; gap: 8px; border-bottom: 1px solid #F0F1F4; }
body.newdesign-home #NewFrame #dailySheetManual :is(.ui-input-text, .ui-select .ui-btn) {
    margin: 0 !important; border: 1px solid #E2E4E9 !important; border-radius: 10px !important; background: #fff !important; box-shadow: none !important;
}
body.newdesign-home #NewFrame #dailySheetManual input { height: 40px !important; padding: 0 12px !important; font: 400 14px 'Inter', sans-serif !important; }
body.newdesign-home #NewFrame #dailySheetManual .ui-select .ui-btn { height: 40px; padding: 0 36px 0 12px !important; display: flex !important; align-items: center; text-shadow: none !important; font: 400 14px 'Inter', sans-serif !important; color: #20252D !important; }
/* pill switches (jQM flip slider) */
body.newdesign-home #NewFrame .ui-slider-switch {
    flex: 0 0 auto; margin: 0 !important; height: 32px !important; min-width: 84px; width: auto !important;
    border: 1px solid #E2E4E9 !important; border-radius: 999px !important; box-shadow: none !important; background: #F0F1F4 !important; overflow: hidden;
}
body.newdesign-home #NewFrame .ui-slider-switch .ui-slider-label { font: 600 12px/32px 'Inter', sans-serif !important; text-shadow: none !important; height: 32px !important; }
body.newdesign-home #NewFrame .ui-slider-switch .ui-slider-label-a { background: #2563D7 !important; color: #fff !important; }
body.newdesign-home #NewFrame .ui-slider-switch .ui-slider-label-b { background: #F0F1F4 !important; color: #525966 !important; }
body.newdesign-home #NewFrame .ui-slider-switch .ui-slider-inneroffset { margin: 0 16px !important; position: relative; height: 100%; }
body.newdesign-home #NewFrame .ui-slider-switch .ui-slider-handle {
    width: 26px !important; height: 26px !important; top: 2px !important; margin: 0 0 0 -13px !important;
    border: none !important; border-radius: 50% !important; background: #fff !important; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.25) !important;
}
/* Ratios (1:) + Ages */
body.newdesign-home #NewFrame #Ratiosblock .ui-input-text,
body.newdesign-home #NewFrame #Ratiosblock input#Ratios {
    width: 80px !important; margin: 0 !important; border: 1px solid #E2E4E9 !important; border-radius: 10px !important; background: #fff !important; box-shadow: none !important;
}
body.newdesign-home #NewFrame #Ratiosblock input { height: 36px !important; padding: 0 10px !important; text-align: center; font: 500 14px 'Inter', sans-serif !important; }
body.newdesign-home #NewFrame #ageblock .ui-select .ui-btn { margin: 0 !important; border: 1px solid #E2E4E9 !important; border-radius: 10px !important; background: #fff !important; box-shadow: none !important; text-shadow: none !important; font: 400 14px 'Inter', sans-serif !important; }
/* Delete class */
body.newdesign-home #NewFrame #removeFrame {
    margin: 28px 0 0 !important; height: 44px; display: flex; align-items: center; justify-content: center;
    background: #fff !important; border: 1px solid #FECDCA !important; border-radius: 10px !important; box-shadow: none !important; cursor: pointer;
}
body.newdesign-home #NewFrame #removeFrame:hover { background: #FEF3F2 !important; }
body.newdesign-home #NewFrame #removeFrame p { margin: 0 !important; color: #B42318 !important; font: 600 14px 'Inter', sans-serif !important; text-shadow: none !important; }
body.newdesign-home #NewFrame a:has(> #removeFrame) { text-decoration: none !important; display: block; }
@media (max-width: 640px) {
    body.newdesign-home #NewFrame > .mainContent { width: 100% !important; border-left: none; box-shadow: none; padding: 16px 16px 32px !important; animation: none; }
}

/* Edit Class as the standard new-design drawer: the page behind is the dimmed backdrop, the header sits
   inside the 480px panel (title left, Save right) like the Create Class / Add Child drawers */
body.newdesign-home #NewFrame { background: rgba(16, 24, 40, 0.45) !important; }
body.newdesign-home #NewFrame > .head {
    position: fixed !important; top: 0 !important; right: 0 !important; left: auto !important;
    width: min(480px, 100%) !important; height: 76px !important; min-height: 76px !important; box-sizing: border-box;
    background: #fff !important; border-bottom: 1px solid #F0F1F4 !important; box-shadow: none !important; z-index: 1001;
}
body.newdesign-home #NewFrame > .head .textHeadline {
    position: absolute !important; left: 60px !important; right: 120px !important; top: 50% !important; transform: translateY(-50%) !important;
    text-align: left !important; margin: 0 !important;
    font: 500 22px/30px 'Inter', sans-serif !important; letter-spacing: -0.3px; color: #20252D !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.newdesign-home #NewFrame > .head .leftButton { left: 14px !important; top: 50% !important; transform: translateY(-50%) !important; }
body.newdesign-home #NewFrame > .head .rightHeaderButton { right: 24px !important; }
body.newdesign-home #NewFrame > .mainContent {
    width: min(480px, 100%) !important; margin: 76px 0 0 auto !important; min-height: calc(100vh - 76px) !important;
    padding: 24px 24px 48px !important; border-left: none !important; box-shadow: -8px 0 32px rgba(16, 24, 40, 0.16) !important;
}
/* class photo: a clean rounded tile + "change" text (no legacy frame around it) */
body.newdesign-home #NewFrame .centerProfileImage {
    border: none !important; background: transparent !important; box-shadow: none !important; width: auto !important; height: auto !important;
}
body.newdesign-home #NewFrame .centerProfileImage > img:first-child { width: 72px !important; height: 72px !important; border-radius: 14px; border: none !important; }
@media (max-width: 640px) {
    body.newdesign-home #NewFrame { background: #fff !important; }
    body.newdesign-home #NewFrame > .head { width: 100% !important; height: 64px !important; min-height: 64px !important; }
    body.newdesign-home #NewFrame > .head .textHeadline { font-size: 18px !important; left: 52px !important; }
    body.newdesign-home #NewFrame > .mainContent { margin-top: 64px !important; min-height: calc(100vh - 64px) !important; box-shadow: none !important; }
}
/* Edit Class: yes/no switches as the default new-design toggle (.nd-switch look - 32x20 track, grey off /
   blue on, 12px white knob, no text). Switches whose options are not yes/no (Daily Sheet format A/B,
   time interval...) keep the labelled pill so their value stays readable. */
body.newdesign-home #NewFrame select:has(> option[value="yes"]) + .ui-slider-switch {
    width: 32px !important; min-width: 0 !important; height: 20px !important;
    border: none !important; border-radius: 96px !important; background: #CDD0D5 !important;
    box-shadow: inset 0 4px 4px rgba(15, 15, 16, 0.06) !important; overflow: visible; transition: background .3s;
}
body.newdesign-home #NewFrame select:has(> option[value="yes"]) + .ui-slider-switch:has(.ui-slider-handle[aria-valuenow="yes"]) { background: #2563D7 !important; }
body.newdesign-home #NewFrame select:has(> option[value="yes"]) + .ui-slider-switch .ui-slider-label { display: none !important; }
body.newdesign-home #NewFrame select:has(> option[value="yes"]) + .ui-slider-switch .ui-slider-inneroffset { margin: 0 10px !important; height: 100%; }
body.newdesign-home #NewFrame select:has(> option[value="yes"]) + .ui-slider-switch .ui-slider-handle {
    width: 12px !important; height: 12px !important; top: 4px !important; margin: 0 0 0 -6px !important;
    background: #fff !important; border: none !important; border-radius: 50% !important;
    box-shadow: 0 6px 10px rgba(27, 28, 29, 0.06), 0 2px 4px rgba(27, 28, 29, 0.02) !important;
}
/* Edit Class, round 3.
   Class photo: Remini.css draws .centerProfileImage as a 360px box scaled to 0.5 with negative margins, so
   undo that transform and show the photo + caption left-aligned. */
body.newdesign-home #NewFrame .centerProfileImage {
    transform: none !important; margin: 0 0 20px !important; justify-content: flex-start;
}
body.newdesign-home #NewFrame .centerProfileImage > div { position: static !important; width: auto !important; margin: 0 !important; left: auto !important; top: auto !important; }
body.newdesign-home #NewFrame .centerProfileImage > div p { font-size: 14px !important; font-family: 'Inter', sans-serif !important; }
/* Email daily reports: option cards with a radio dot, as in the NRF slide-ins */
body.newdesign-home #NewFrame #dailySheetEmailblock:not([style*="display: none"]):not([style*="display:none"]) { display: block !important; padding: 14px 0 !important; }
body.newdesign-home #NewFrame #dailySheetEmailblock > label { display: block; margin: 0 0 10px !important; }
body.newdesign-home #NewFrame #dailySheetEmail { margin: 0 !important; padding: 0 !important; border: none !important; }
body.newdesign-home #NewFrame #dailySheetEmail .ui-controlgroup-controls {
    display: flex !important; gap: 10px; padding: 0 !important; background: transparent !important; border-radius: 0; width: 100%;
}
body.newdesign-home #NewFrame #dailySheetEmail .ui-radio { flex: 1 1 0; min-width: 0; position: relative; }
body.newdesign-home #NewFrame #dailySheetEmail .ui-radio > input { position: absolute !important; left: 0; top: 0; }
body.newdesign-home #NewFrame #dailySheetEmail label.ui-btn,
body.newdesign-home #NewFrame #dailySheetEmail label.ui-btn.ui-radio-on,
body.newdesign-home #NewFrame #dailySheetEmail label.ui-btn.ui-btn-active {
    display: flex !important; align-items: center; gap: 8px; padding: 10px 12px !important; text-align: left !important;
    background: #fff !important; border: 1px solid #E2E4E9 !important; border-radius: 10px !important;
    box-shadow: 0 1px 2px rgba(228, 229, 231, 0.24) !important; color: #20252D !important; font: 500 14px/20px 'Inter', sans-serif !important;
    white-space: normal; transition: border-color .2s, background .2s;
}
body.newdesign-home #NewFrame #dailySheetEmail label.ui-btn:hover { background: #F6F9FE !important; }
body.newdesign-home #NewFrame #dailySheetEmail label.ui-btn:before {
    content: ""; display: block !important; position: static !important; flex: 0 0 16px; width: 16px; height: 16px; margin: 2px; border-radius: 50%;
    background: radial-gradient(circle, #fff 0 44%, #E2E4E9 47%) !important; box-shadow: none; transition: background .2s;
}
body.newdesign-home #NewFrame #dailySheetEmail label.ui-btn.ui-radio-on { border-color: #2563D7 !important; }
body.newdesign-home #NewFrame #dailySheetEmail label.ui-btn.ui-radio-on:before {
    background: radial-gradient(circle, #fff 0 30%, #2563D7 33%) !important; box-shadow: inset 0 2px 2px rgba(22, 38, 100, 0.32);
}
/* Backdrop: lighter, and the page the drawer was opened from stays visible behind it (NewDesign.js marks
   it .nd-under-drawer; jQM would otherwise hide it, leaving an empty grey screen). */
body.newdesign-home #NewFrame { background: rgba(15, 20, 40, 0.25) !important; }
body.newdesign-home .ui-page.nd-under-drawer {
    display: block !important; position: fixed !important; inset: 0; overflow: hidden; z-index: 0; pointer-events: none;
}
body.newdesign-home:has(.nd-under-drawer) #NewFrame.ui-page-active {
    position: fixed !important; inset: 0; overflow-y: auto; z-index: 1050; -webkit-overflow-scrolling: touch;
}
@media (max-width: 640px) {
    body.newdesign-home #NewFrame { background: #fff !important; }
    body.newdesign-home .ui-page.nd-under-drawer { display: none !important; }
    body.newdesign-home #NewFrame #dailySheetEmail .ui-controlgroup-controls { flex-direction: column; }
}
/* Edit Class: panel body uses border-box so it is exactly as wide as the fixed 480px header; the radio cards
   share the row evenly */
body.newdesign-home #NewFrame > .mainContent { box-sizing: border-box !important; max-width: 100% !important; }
body.newdesign-home #NewFrame #dailySheetEmail { display: block !important; width: 100% !important; }
body.newdesign-home #NewFrame #dailySheetEmail .ui-radio { margin: 0 !important; padding: 0 !important; }
body.newdesign-home #NewFrame #dailySheetEmail label.ui-btn { width: 100% !important; height: 100%; margin: 0 !important; box-sizing: border-box !important; }
/* Edit Class: let the window scroll the drawer instead of #NewFrame itself. An inner scroll container put
   its scrollbar inside the viewport, so the body (left of the scrollbar) sat ~16px left of the fixed header
   (which spans to the viewport edge). With the window scrolling, header and body share the same right edge. */
body.newdesign-home:has(.nd-under-drawer) #NewFrame.ui-page-active {
    position: absolute !important; inset: auto !important; top: 0 !important; left: 0 !important; width: 100% !important;
    min-height: 100vh; overflow: visible !important;
}
/* Edit Class: non yes/no settings as a segmented choice (NewDesign.js frameChoiceButtons) */
body.newdesign-home #NewFrame .nd-has-choice .ui-slider-switch { display: none !important; }
body.newdesign-home #NewFrame .nd-frame-choice { display: inline-flex; gap: 3px; padding: 3px; background: #F0F1F4; border-radius: 10px; flex: 0 0 auto; }
body.newdesign-home #NewFrame .nd-frame-choice button {
    min-width: 44px; height: 32px; margin: 0; padding: 0 14px; border: none !important; border-radius: 8px !important;
    background: transparent !important; color: #525966 !important; box-shadow: none !important; text-shadow: none !important;
    font: 500 14px/32px 'Inter', sans-serif !important; cursor: pointer;
}
body.newdesign-home #NewFrame .nd-frame-choice button.on { background: #fff !important; color: #1D4ED8 !important; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12) !important; }

/* ---- Child Extended Info (#myparentslist): Add / Edit contact as the new-design slide-in ----
   ChildController.ndContactSheet() adds .nd-contact-sheet (+ .active) to the form's wrapper and an overlay
   before it. Bottom sheet on phones, right-hand panel from 768px, like .nd-drawer. The doubled class
   outranks the card rules for div:has(> #addContact) above. */
body.newdesign-home #myparentslist .ui-content > div.nd-contact-sheet.nd-contact-sheet:has(> #addContact) {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    width: auto !important;
    max-height: 90vh;
    display: flex !important;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 12px;
    margin: 0 !important;
    padding: 0 24px calc(24px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff !important;
    border: none !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -8px 24px rgba(16, 24, 40, 0.12) !important;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}
body.newdesign-home #myparentslist .ui-content > div.nd-contact-sheet.nd-contact-sheet.active:has(> #addContact) { transform: translateY(0); }
@media (min-width: 768px) {
    body.newdesign-home #myparentslist .ui-content > div.nd-contact-sheet.nd-contact-sheet:has(> #addContact) {
        top: 0 !important;
        left: auto !important;
        width: 480px !important;
        max-width: 100%;
        height: 100%;
        max-height: none;
        padding-bottom: 24px !important;
        border-radius: 0 !important;
        box-shadow: -8px 0 24px rgba(16, 24, 40, 0.12) !important;
        transform: translateX(100%);
    }
    body.newdesign-home #myparentslist .ui-content > div.nd-contact-sheet.nd-contact-sheet.active:has(> #addContact) { transform: translateX(0); }
}
body.newdesign-home #myparentslist .nd-contact-sheet .nd-contact-sheet-head {
    order: 0;
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0 -24px;
    padding: 20px 24px 16px;
    background: #fff;
    border-bottom: 1px solid #E2E4E9;
}
body.newdesign-home #myparentslist .nd-contact-sheet .nd-contact-sheet-head h3 { margin: 0; }
/* fields */
body.newdesign-home #myparentslist .nd-contact-sheet #addNewContact { order: 1; flex: 0 0 100%; }
body.newdesign-home #myparentslist .nd-contact-sheet #addNewContact > div { margin: 0 0 14px !important; }
body.newdesign-home #myparentslist .nd-contact-sheet #addNewContact b {
    display: block; margin: 0 0 6px; font: 500 14px/20px 'Inter', sans-serif; color: #20252D;
}
body.newdesign-home #myparentslist .nd-contact-sheet #addNewContact .ui-input-text,
body.newdesign-home #myparentslist .nd-contact-sheet #addNewContact .ui-select .ui-btn {
    margin: 0 !important; border: 1px solid #E2E4E9 !important; border-radius: 8px !important; background: #fff !important;
    box-shadow: none !important; text-shadow: none !important;
}
body.newdesign-home #myparentslist .nd-contact-sheet #addNewContact .ui-input-text:focus-within { border-color: #2563D7 !important; box-shadow: 0 0 0 3px rgba(37, 99, 215, 0.12) !important; }
body.newdesign-home #myparentslist .nd-contact-sheet #addNewContact input {
    height: 44px !important; min-height: 44px !important; padding: 0 12px !important; border: none !important; background: transparent !important;
    font: 400 16px 'Inter', sans-serif !important; color: #20252D !important;   /* 16px: iOS doesn't zoom on focus */
}
body.newdesign-home #myparentslist .nd-contact-sheet #addNewContact .ui-select .ui-btn {
    height: 44px; padding: 0 40px 0 12px !important; display: flex; align-items: center; text-align: left;
    font: 400 16px 'Inter', sans-serif !important; color: #20252D !important;
}
body.newdesign-home #myparentslist .nd-contact-sheet #addNewContact .ui-select .ui-btn:after { background-color: transparent !important; filter: brightness(0) opacity(0.55); }
body.newdesign-home #myparentslist .nd-contact-sheet #addNewContact #errorMessage:empty { display: none !important; }
body.newdesign-home #myparentslist .nd-contact-sheet #addNewContact #errorMessage {
    position: static !important; margin: 0 0 12px !important; color: #B42318 !important; font: 500 13px 'Inter', sans-serif; text-align: left !important;
}
/* actions: Cancel + Add/Save side by side under the fields */
body.newdesign-home #myparentslist .nd-contact-sheet #cancelContact,
body.newdesign-home #myparentslist .nd-contact-sheet #addContact {
    position: static !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    width: auto !important;
    height: 44px;
    margin: 0 !important;
    padding: 0 16px !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font: 600 14px 'Inter', sans-serif !important;
}
body.newdesign-home #myparentslist .nd-contact-sheet #cancelContact { order: 2; background: #fff !important; border: 1px solid #E2E4E9 !important; color: #20252D !important; }
body.newdesign-home #myparentslist .nd-contact-sheet #addContact { order: 3; background: #2563D7 !important; border: 1px solid #2563D7 !important; color: #fff !important; }
body.newdesign-home #myparentslist .nd-contact-sheet #addContact:hover { background: #1D4ED8 !important; }
body.newdesign-home #myparentslist .nd-contact-sheet #addContact:before,
body.newdesign-home #myparentslist .nd-contact-sheet #addContact:after { display: none !important; }

/* ---- Child Extended Info (#myparentslist): row actions after a header pencil (Contacts) / trash (Documents) ----
   View.Utils.listItemOptions appends Edit / Remove into each row; the legacy look is a coloured disc with a white
   glyph (delete-wN.png / editSketchN.png). Here: icon + label buttons at the row's right, Remove in red. */
body.newdesign-home #myparentslist.nd-xinfo .listItemOptions {
    position: static !important;
    display: flex !important;
    align-items: center;
    gap: 4px;
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
body.newdesign-home #myparentslist.nd-xinfo .listItemOptions:empty { display: none !important; }
body.newdesign-home #myparentslist.nd-xinfo .listItemOptions > a { text-decoration: none !important; }
body.newdesign-home #myparentslist.nd-xinfo .listItemOption {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 44px !important;
    min-width: 52px;
    margin: 0 !important;
    padding: 0 6px !important;
    box-sizing: border-box;
    border-radius: 8px;
}
body.newdesign-home #myparentslist.nd-xinfo .listItemOption:hover { background: #F6F7FA; }
body.newdesign-home #myparentslist.nd-xinfo .listItemOptionImage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
body.newdesign-home #myparentslist.nd-xinfo .listItemOptionImage img { width: 18px !important; height: 18px !important; margin: 0 !important; }
body.newdesign-home #myparentslist.nd-xinfo .listItemOption[data-goal="delete"] .listItemOptionImage img {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 20 20'%3E%3Cpath d='M3.5 5.5h13M8 5.5V4a1 1 0 011-1h2a1 1 0 011 1v1.5M5 5.5l.8 10.6a1 1 0 001 .9h6.4a1 1 0 001-.9L15 5.5M8.5 9v5M11.5 9v5' stroke='%23DC2626' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.newdesign-home #myparentslist.nd-xinfo .listItemOption[data-goal="edit"] .listItemOptionImage img {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 20 20'%3E%3Cpath d='M12.5 4.5l3 3L7 16H4v-3l8.5-8.5z' stroke='%23525966' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.newdesign-home #myparentslist.nd-xinfo .listItemOption p {
    /* (Documents removes the label in code - the bin alone is shown there) */
    margin: 2px 0 0 !important;
    font: 500 11px/14px 'Inter', sans-serif !important;
    color: #525966 !important;
    white-space: nowrap;
    text-shadow: none !important;
}
body.newdesign-home #myparentslist.nd-xinfo .listItemOption[data-goal="delete"] p { color: #DC2626 !important; }

/* Post header initials (no photo): the avatar is .faceTagImage.postArrowDiv, so the initials span also matched the
   "> class" text rules (.postArrowDiv > span: legacy margin-left 6px, new-design margin-right / font-size) - the box
   shrank under the text and "AD1" sat off-centre. Full circle, no margins, centred. */
body.newdesign-home ul.postList > li .faceTagImage.nd-ft-nophoto > .nd-ft-initials,
body.newdesign-home :is(.nd-dailysheet, .nd-newpost) .postHeader .faceTagImage.nd-ft-nophoto > .nd-ft-initials {
    top: 0; right: 0; bottom: 0; left: 0;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
    vertical-align: baseline;
}

/* Class / child page posts: Draft / Scheduled badge. The legacy .postDraftSettings centres itself with
   margin-left:50% + translateX(-50%) and a solid fill - inside the new top-right .postSettings corner that put it
   on top of the date chip. Here: one row, [Draft] [Today / date], the badge as a soft pill; a long "Scheduled ..."
   label is cut with an ellipsis so the row stays clear of the creator name. */
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postSettings:has(> .postDraftSettings) {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postSettings > .postDraftSettings {
    display: inline-block;
    max-width: 160px;
    margin: 0 !important;
    transform: none !important;
    padding: 2px 10px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    background: #FEF3C7 !important;
    color: #B45309 !important;
    border-radius: 999px !important;
    font: 500 12px/18px 'Inter', sans-serif !important;
}
/* the date chip's inner span floats right (legacy inline style) - no float inside the flex row */
body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postSettings:has(> .postDraftSettings) .postSettingTime span { float: none !important; display: inline-block; }
@media (max-width: 600px) {
    body.newdesign-home :is(#FrameProfile, #ChildProfile) ul.postList > li .postSettings > .postDraftSettings { max-width: 96px; }
}

/* A comment on a post (NewPostView adds .nd-comment when activeUser.postParent is set): only the rich text editor,
   as in the old design. The settings rows (.postTextbox, display:flex !important above), the tags header and the
   attach / observe buttons are all post-only. */
body.newdesign-home .nd-newpost.nd-comment > [data-role="content"] > *:not(.editNewPostTextDiv) { display: none !important; }

/* ----- Feed pager (Back / page / Next + "Return to first page") - FeedView.js #pageNavigation<id>,
   shown under the class, child and all-classes feeds. Separate rounded buttons with plain chevrons
   instead of the jQuery Mobile joined control group with grey icon discs. ----- */
body.newdesign-home [id^="pageNavigation"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 20px auto 8px;
}
body.newdesign-home [id^="pageNavigation"] > p { display: none; }   /* the &nbsp; spacers */
body.newdesign-home [id^="pageNavigation"] .ui-controlgroup { margin: 0 !important; box-shadow: none !important; }
body.newdesign-home [id^="pageNavigation"] .ui-controlgroup-controls {
    display: flex !important;
    align-items: center;
    gap: 8px;
    box-shadow: none !important;
}
body.newdesign-home [id^="pageNavigation"] .ui-controlgroup-controls .ui-btn,
body.newdesign-home [id^="pageNavigation"] > .ui-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    float: none !important;
    margin: 0 !important;
    height: 36px;
    padding: 0 14px !important;
    background: #fff !important;
    border: 1px solid #E2E4E9 !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05) !important;
    color: #0A0D14 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-shadow: none !important;
    line-height: 1 !important;
    box-sizing: border-box;
    position: relative;
}
body.newdesign-home [id^="pageNavigation"] .ui-controlgroup-controls .ui-btn:hover:not(.ui-disabled):not([disabled]) {
    background: #F6F7FA !important;
    border-color: #CDD0D5 !important;
}
/* current page number: a filled square in the school colour */
body.newdesign-home [id^="pageNavigation"] [id^="pageNumber"] {
    min-width: 36px;
    padding: 0 10px !important;
    background: var(--main-color) !important;
    border-color: var(--main-color) !important;
    color: #fff !important;
    font-weight: 600 !important;
    opacity: 1 !important;
    pointer-events: none;
}
/* jQM icon discs -> plain chevrons in the text flow */
body.newdesign-home [id^="pageNavigation"] .ui-btn.ui-btn-icon-left,
body.newdesign-home [id^="pageNavigation"] .ui-btn.ui-btn-icon-right { padding: 0 14px !important; }
body.newdesign-home [id^="pageNavigation"] .ui-btn.ui-btn-icon-left:after,
body.newdesign-home [id^="pageNavigation"] .ui-btn.ui-btn-icon-right:after {
    position: static !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: inherit;
    font-size: 16px;
    line-height: 1;
}
body.newdesign-home [id^="pageNavigation"] .ui-btn.ui-icon-arrow-l:after { content: '\2190' !important; order: -1; }
body.newdesign-home [id^="pageNavigation"] .ui-btn.ui-icon-arrow-r:after { content: '\2192' !important; order: 1; }
body.newdesign-home [id^="pageNavigation"] .ui-btn.ui-icon-home:after { content: '\2191' !important; order: -1; }
/* "Return to first page": a quiet text link under the pager */
body.newdesign-home [id^="pageNavigation"] > .ui-btn {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--main-color) !important;
    height: 32px;
}
body.newdesign-home [id^="pageNavigation"] > .ui-btn:hover:not(.ui-state-disabled) { background: #fff !important; border-color: #E2E4E9 !important; }
/* disabled (first page / last page) */
body.newdesign-home [id^="pageNavigation"] .ui-btn.ui-disabled,
body.newdesign-home [id^="pageNavigation"] .ui-btn.ui-state-disabled {
    opacity: 1 !important;
    color: #A0A4AE !important;
    background: #F6F7FA !important;
    box-shadow: none !important;
}
body.newdesign-home [id^="pageNavigation"] > .ui-btn.ui-state-disabled { display: none !important; }   /* already on page 1 */