/* _content/DailyReport.Web/Components/Layout/MainLayout.razor.rz.scp.css */
/* =========================================
   DAILY REPORT - MAIN LAYOUT
   Kiddy Place | Responsive Layout
   ========================================= */

.dr-shell[b-xwgfd1crxj] {
    --dr-primary: #087cf0;
    --dr-primary-dark: #075fbd;
    --dr-text: #142b4d;
    --dr-muted: #718096;
    --dr-border: #e5edf6;
    --dr-page: #f4f8fd;
    --dr-white: #ffffff;
    display: flex;
    align-items: flex-start;
    min-height: 100vh;
    background: var(--dr-page);
    color: var(--dr-text);
    font-family: "Segoe UI", Arial, sans-serif;
}

/* =========================================
   SIDEBAR
   ========================================= */

.dr-sidebar[b-xwgfd1crxj] {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex: 0 0 248px;
    flex-direction: column;
    width: 248px;
    height: 100vh;
    min-height: 0;
    overflow: hidden;
    background: var(--dr-white);
    border-right: 1px solid var(--dr-border);
    box-shadow: 4px 0 20px rgba(31, 78, 121, 0.025);
}

    .dr-sidebar > .dr-brand[b-xwgfd1crxj] {
        flex: 0 0 auto;
    }

.dr-navigation[b-xwgfd1crxj] {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-height: 0;
    height: 0;
    gap: 4px;
    padding: 20px 9px 14px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    scrollbar-color: #d8e3ef transparent;
}

    .dr-navigation[b-xwgfd1crxj]::-webkit-scrollbar {
        width: 5px;
    }

    .dr-navigation[b-xwgfd1crxj]::-webkit-scrollbar-thumb {
        background: #d8e3ef;
        border-radius: 8px;
    }

.dr-sidebar-bottom[b-xwgfd1crxj] {
    flex: 0 0 auto;
    margin-top: auto;
    padding: 12px 9px;
    background: #fff;
}

/* =========================================
   BRAND
   ========================================= */

.dr-brand[b-xwgfd1crxj] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 88px;
    padding: 15px 18px;
    background: #ffffff;
    border-bottom: 1px solid #edf2f8;
}

.dr-brand-logo[b-xwgfd1crxj] {
    display: flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: linear-gradient(145deg, #effbea, #fff8df);
    border: 1px solid #e8f2df;
    border-radius: 14px;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.dr-brand:hover .dr-brand-logo[b-xwgfd1crxj] {
    transform: rotate(-4deg) scale(1.04);
    box-shadow: 0 4px 12px rgba(70, 145, 90, .10);
}

.dr-brand-logo svg[b-xwgfd1crxj] {
    width: 34px;
    height: 34px;
    fill: #62b76c;
    stroke: #398b52;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dr-brand-text[b-xwgfd1crxj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

    .dr-brand-text strong[b-xwgfd1crxj] {
        color: #12633e;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.2;
        letter-spacing: -.15px;
    }

    .dr-brand-text span[b-xwgfd1crxj] {
        color: #526680;
        font-size: 11px;
        font-weight: 600;
    }

/* =========================================
   NAVIGATION
   ========================================= */

.dr-nav-section-label[b-xwgfd1crxj] {
    padding: 8px 11px 9px;
    color: #9aa9bd;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.15px;
    line-height: 1.4;
}

.dr-nav-section-spaced[b-xwgfd1crxj] {
    margin-top: 13px;
}

.dr-sidebar[b-xwgfd1crxj]  .dr-navigation a.dr-nav-link,
.dr-sidebar[b-xwgfd1crxj]  .dr-navigation a.dr-nav-link:link,
.dr-sidebar[b-xwgfd1crxj]  .dr-navigation a.dr-nav-link:visited {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    min-height: 40px;
    padding: 9px 12px;
    color: #52647c;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none !important;
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.dr-sidebar[b-xwgfd1crxj]  .dr-navigation .dr-nav-link svg {
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 180ms ease;
}

.dr-sidebar[b-xwgfd1crxj]  .dr-sidebar ::deep .dr-navigation a.dr-nav-link:hover {
    color: #0874df;
    background: #f3f8ff;
    border-color: #eaf2ff;
    text-decoration: none !important;
    transform: translateX(2px);
}

    .dr-sidebar[b-xwgfd1crxj]  .dr-sidebar ::deep .dr-navigation a.dr-nav-link:hover svg {
        transform: scale(1.05);
    }

.dr-sidebar[b-xwgfd1crxj]  .dr-sidebar ::deep .dr-navigation a.dr-nav-link.active,
.dr-sidebar[b-xwgfd1crxj]  .dr-sidebar ::deep .dr-navigation a.dr-nav-link.active:visited {
    color: #0869d1;
    background: linear-gradient(100deg, #e5f2ff, #eff7ff);
    border-color: #dcecff;
    box-shadow: 0 2px 7px rgba(25, 105, 190, .045);
    font-weight: 750;
    text-decoration: none !important;
}

    .dr-sidebar[b-xwgfd1crxj]  .dr-sidebar ::deep .dr-navigation a.dr-nav-link.active::before {
        position: absolute;
        top: 8px;
        bottom: 8px;
        left: 0;
        width: 3px;
        background: #1684f8;
        border-radius: 0 4px 4px 0;
        content: "";
    }

.dr-sidebar[b-xwgfd1crxj]  .dr-sidebar ::deep .dr-navigation a.dr-nav-link:active {
    transform: scale(.985);
}

.dr-sidebar[b-xwgfd1crxj]  .dr-sidebar ::deep .dr-navigation a.dr-nav-link:focus-visible {
    outline: 2px solid #80baff;
    outline-offset: 2px;
}

/* =========================================
   SIDEBAR BOTTOM NOTE
   ========================================= */

.dr-sidebar-note[b-xwgfd1crxj] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 10px;
    background: linear-gradient(135deg, #f0f9ff, #f3fbf4);
    border: 1px solid #e5f1f5;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(30, 80, 120, .025);
    transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

    .dr-sidebar-note:hover[b-xwgfd1crxj] {
        border-color: #d7e9f2;
        box-shadow: 0 5px 14px rgba(30, 80, 120, .055);
        transform: translateY(-2px);
    }

.dr-sidebar-note-icon[b-xwgfd1crxj] {
    display: flex;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: #e77991;
    background: #ffffff;
    border-radius: 10px;
    font-size: 14px;
}

.dr-sidebar-note div[b-xwgfd1crxj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.dr-sidebar-note strong[b-xwgfd1crxj] {
    color: #38536e;
    font-size: 10px;
    font-weight: 750;
}

.dr-sidebar-note div span[b-xwgfd1crxj] {
    color: #8292a6;
    font-size: 9px;
    line-height: 1.4;
}

/* =========================================
   MAIN CONTENT AND TOPBAR
   ========================================= */

.dr-main[b-xwgfd1crxj] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 100vh;
}

.dr-topbar[b-xwgfd1crxj] {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 76px;
    padding: 14px 28px;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid var(--dr-border);
    backdrop-filter: blur(12px);
    transition: box-shadow 180ms ease;
}

.dr-topbar-left[b-xwgfd1crxj],
.dr-topbar-right[b-xwgfd1crxj] {
    display: flex;
    align-items: center;
}

.dr-topbar-left[b-xwgfd1crxj] {
    gap: 10px;
    min-width: 0;
}

.dr-topbar-right[b-xwgfd1crxj] {
    gap: 18px;
}

.dr-topbar-date[b-xwgfd1crxj] {
    color: var(--dr-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
}

.dr-user[b-xwgfd1crxj] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 4px 7px 4px 4px;
    border-radius: 14px;
    transition: background-color 180ms ease;
}

    .dr-user:hover[b-xwgfd1crxj] {
        background: #f6f9fe;
    }

.dr-avatar[b-xwgfd1crxj] {
    display: flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #075fbd;
    background: #e5f2ff;
    border: 2px solid #d2e8ff;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 800;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.dr-user:hover .dr-avatar[b-xwgfd1crxj] {
    transform: scale(1.04);
    box-shadow: 0 3px 8px rgba(8, 124, 240, 0.08);
}

.dr-user-info[b-xwgfd1crxj] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.dr-user-name[b-xwgfd1crxj] {
    overflow: hidden;
    max-width: 170px;
    color: var(--dr-text);
    font-size: 13px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dr-user-role[b-xwgfd1crxj] {
    color: var(--dr-muted);
    font-size: 11px;
    text-transform: capitalize;
}

.dr-logout-form[b-xwgfd1crxj] {
    margin: 0;
}

.dr-logout-button[b-xwgfd1crxj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 39px;
    padding: 0 12px;
    color: #64748b;
    background: #fff;
    border: 1px solid var(--dr-border);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

    .dr-logout-button svg[b-xwgfd1crxj] {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .dr-logout-button:hover[b-xwgfd1crxj] {
        color: #d9485f;
        background: #fff4f4;
        border-color: #ffd8dc;
    }

    .dr-logout-button:active[b-xwgfd1crxj] {
        transform: scale(.97);
    }

    .dr-logout-button:focus-visible[b-xwgfd1crxj] {
        outline: 2px solid #80baff;
        outline-offset: 3px;
    }

.dr-content[b-xwgfd1crxj] {
    flex: 1 0 auto;
    width: 100%;
    min-width: 0;
    padding: 26px 28px;
}

.dr-footer[b-xwgfd1crxj] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 28px;
    color: #8a9ab0;
    background: #fff;
    border-top: 1px solid var(--dr-border);
    font-size: 11px;
}

/* =========================================
   MOBILE MENU BUTTON AND OVERLAY
   ========================================= */

.dr-mobile-menu-button[b-xwgfd1crxj] {
    display: none;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 8px;
    border: 1px solid #e3eaf3;
    border-radius: 10px;
    color: #415873;
    background: #fff;
    cursor: pointer;
}

    .dr-mobile-menu-button svg[b-xwgfd1crxj] {
        width: 21px;
        height: 21px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
    }

.dr-sidebar-overlay[b-xwgfd1crxj] {
    display: none;
}

/* =========================================
   TABLET
   ========================================= */

@media (min-width: 768px) and (max-width: 1000px) {
    .dr-sidebar[b-xwgfd1crxj] {
        flex-basis: 220px;
        width: 220px;
    }

    .dr-topbar[b-xwgfd1crxj] {
        padding-right: 20px;
        padding-left: 20px;
    }

    .dr-content[b-xwgfd1crxj] {
        padding: 22px 20px;
    }
}

/* =========================================
   MOBILE DRAWER
   ========================================= */

@media (max-width: 767px) {
    .dr-shell[b-xwgfd1crxj] {
        position: relative;
        display: flex;
        flex-direction: row;
        min-height: 100vh;
        overflow-x: clip;
    }

    .dr-sidebar[b-xwgfd1crxj] {
        position: fixed;
        z-index: 1200;
        inset: 0 auto 0 0;
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
        width: min(290px, 84vw);
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
        background: #fff;
        box-shadow: 8px 0 30px rgb(30 50 80 / 10%);
        transform: translateX(-105%);
        visibility: hidden;
        transition: transform 220ms ease, visibility 220ms ease;
    }

        .dr-sidebar > .dr-brand[b-xwgfd1crxj] {
            flex: 0 0 auto;
            min-height: 67px;
            padding: 11px 15px;
        }

    .dr-brand-logo[b-xwgfd1crxj] {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
    }

        .dr-brand-logo svg[b-xwgfd1crxj] {
            width: 30px;
            height: 30px;
        }

    .dr-sidebar[b-xwgfd1crxj]  .dr-navigation {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        height: 0;
        min-height: 0;
        gap: 5px;
        padding: 12px 9px;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .dr-nav-section-label[b-xwgfd1crxj] {
        margin-top: 10px;
        padding: 8px 11px;
    }

    .dr-nav-section-spaced[b-xwgfd1crxj] {
        margin-top: 5px;
    }

    .dr-sidebar[b-xwgfd1crxj]  .dr-navigation a.dr-nav-link,
    .dr-sidebar[b-xwgfd1crxj]  .dr-navigation a.dr-nav-link:link,
    .dr-sidebar[b-xwgfd1crxj]  .dr-navigation a.dr-nav-link:visited {
        gap: 8px;
        min-height: 42px;
        padding: 8px 10px;
        font-size: 11px;
    }

    .dr-sidebar[b-xwgfd1crxj]  .dr-navigation .dr-nav-link svg {
        flex-basis: 16px;
        width: 16px;
        height: 16px;
    }

    .dr-sidebar-bottom[b-xwgfd1crxj] {
        display: block;
        flex: 0 0 auto;
        margin-top: 0;
        padding: 10px 9px;
    }

    .dr-shell.dr-sidebar-open .dr-sidebar[b-xwgfd1crxj] {
        transform: translateX(0);
        visibility: visible;
    }

    .dr-sidebar-overlay[b-xwgfd1crxj] {
        position: fixed;
        z-index: 1190;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        background: rgb(20 35 55 / 42%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 220ms ease, visibility 220ms ease;
    }

    .dr-shell.dr-sidebar-open .dr-sidebar-overlay[b-xwgfd1crxj] {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .dr-mobile-menu-button[b-xwgfd1crxj] {
        display: inline-flex;
    }

    .dr-topbar[b-xwgfd1crxj] {
        position: sticky;
        min-height: 64px;
        gap: 8px;
        padding: 12px 16px;
    }

    .dr-topbar-date[b-xwgfd1crxj] {
        max-width: 120px;
        font-size: 10px;
        line-height: 1.5;
    }

    .dr-topbar-right[b-xwgfd1crxj] {
        gap: 9px;
    }

    .dr-user[b-xwgfd1crxj] {
        gap: 7px;
    }

    .dr-avatar[b-xwgfd1crxj] {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
        font-size: 11px;
    }

    .dr-user-name[b-xwgfd1crxj] {
        max-width: 95px;
        font-size: 11px;
    }

    .dr-user-role[b-xwgfd1crxj] {
        font-size: 10px;
    }

    .dr-logout-button[b-xwgfd1crxj] {
        width: 35px;
        height: 35px;
        min-height: 35px;
        padding: 0;
    }

        .dr-logout-button span[b-xwgfd1crxj] {
            display: none;
        }

    .dr-content[b-xwgfd1crxj] {
        padding: 18px 14px;
    }

    .dr-footer[b-xwgfd1crxj] {
        padding: 14px;
        font-size: 10px;
    }
}

@media (max-width: 380px) {
    .dr-topbar-date[b-xwgfd1crxj] {
        max-width: 85px;
    }

    .dr-user-role[b-xwgfd1crxj] {
        display: none;
    }

    .dr-user-name[b-xwgfd1crxj] {
        max-width: 78px;
    }
}

/* =========================================
   ERROR UI
   ========================================= */

#blazor-error-ui[b-xwgfd1crxj] {
    display: none;
    position: fixed;
    right: 16px;
    bottom: 16px;
    left: 16px;
    z-index: 1300;
    padding: 16px 44px 16px 18px;
    color: #7f1d1d;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.12);
}

    #blazor-error-ui .reload[b-xwgfd1crxj] {
        margin-left: 8px;
        color: #075fbd;
        font-weight: 700;
    }

    #blazor-error-ui .dismiss[b-xwgfd1crxj] {
        position: absolute;
        top: 8px;
        right: 12px;
        color: inherit;
        background: transparent;
        border: 0;
        font-size: 22px;
        cursor: pointer;
    }

/* =========================================
   ACCESSIBILITY
   ========================================= */

@media (prefers-reduced-motion: reduce) {
    .dr-brand-logo[b-xwgfd1crxj],
    .dr-sidebar[b-xwgfd1crxj]  .dr-navigation .dr-nav-link,
    .dr-sidebar[b-xwgfd1crxj]  .dr-navigation .dr-nav-link svg,
    .dr-sidebar-note[b-xwgfd1crxj],
    .dr-logout-button[b-xwgfd1crxj],
    .dr-topbar[b-xwgfd1crxj],
    .dr-user[b-xwgfd1crxj],
    .dr-avatar[b-xwgfd1crxj],
    .dr-sidebar[b-xwgfd1crxj],
    .dr-sidebar-overlay[b-xwgfd1crxj] {
        transition: none !important;
        animation: none !important;
    }
}
/* _content/DailyReport.Web/Components/Layout/NavMenu.razor.rz.scp.css */
/* =========================================
   DAILY REPORT - NAVIGATION
   Kiddy Place | Soft Pastel UI
   ========================================= */

.dr-brand[b-72nj7mjr4c] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    min-height: 88px;
    padding: 15px 18px;
    background: #ffffff;
    border-bottom: 1px solid #edf2f8;
}

.dr-brand-logo[b-72nj7mjr4c] {
    display: flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: linear-gradient(145deg, #effbea, #fff8df);
    border: 1px solid #e8f2df;
    border-radius: 14px;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.dr-brand:hover .dr-brand-logo[b-72nj7mjr4c] {
    transform: rotate(-4deg) scale(1.04);
    box-shadow: 0 4px 12px rgba(70, 145, 90, .10);
}

.dr-brand-logo svg[b-72nj7mjr4c] {
    width: 34px;
    height: 34px;
    fill: #62b76c;
    stroke: #398b52;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dr-brand-text[b-72nj7mjr4c] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

    .dr-brand-text strong[b-72nj7mjr4c] {
        color: #12633e;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.2;
        letter-spacing: -.15px;
    }

    .dr-brand-text span[b-72nj7mjr4c] {
        color: #526680;
        font-size: 11px;
        font-weight: 600;
    }

/* AREA MENU: FLEX CHILD SIDEBAR + SCROLL */

.dr-navigation[b-72nj7mjr4c] {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-height: 0;
    height: 0;
    gap: 4px;
    padding: 20px 9px 14px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    scrollbar-color: #d8e3ef transparent;
}

    .dr-navigation[b-72nj7mjr4c]::-webkit-scrollbar {
        width: 5px;
    }

    .dr-navigation[b-72nj7mjr4c]::-webkit-scrollbar-thumb {
        background: #d8e3ef;
        border-radius: 8px;
    }

.dr-nav-section-label[b-72nj7mjr4c] {
    flex: 0 0 auto;
    padding: 8px 11px 9px;
    color: #9aa9bd;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.15px;
    line-height: 1.4;
}

.dr-nav-section-spaced[b-72nj7mjr4c] {
    margin-top: 13px;
}

.dr-navigation a.dr-nav-link[b-72nj7mjr4c],
.dr-navigation a.dr-nav-link:link[b-72nj7mjr4c],
.dr-navigation a.dr-nav-link:visited[b-72nj7mjr4c] {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 9px 12px;
    color: #52647c;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none !important;
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.dr-navigation .dr-nav-link svg[b-72nj7mjr4c] {
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 180ms ease;
}

.dr-navigation a.dr-nav-link:hover[b-72nj7mjr4c] {
    color: #0874df;
    background: #f3f8ff;
    border-color: #eaf2ff;
    text-decoration: none !important;
    transform: translateX(2px);
}

    .dr-navigation a.dr-nav-link:hover svg[b-72nj7mjr4c] {
        transform: scale(1.05);
    }

.dr-navigation a.dr-nav-link.active[b-72nj7mjr4c],
.dr-navigation a.dr-nav-link.active:visited[b-72nj7mjr4c] {
    color: #0869d1;
    background: linear-gradient(100deg, #e5f2ff, #eff7ff);
    border-color: #dcecff;
    box-shadow: 0 2px 7px rgba(25, 105, 190, .045);
    font-weight: 750;
    text-decoration: none !important;
}

    .dr-navigation a.dr-nav-link.active[b-72nj7mjr4c]::before {
        position: absolute;
        top: 8px;
        bottom: 8px;
        left: 0;
        width: 3px;
        background: #1684f8;
        border-radius: 0 4px 4px 0;
        content: "";
    }

.dr-navigation a.dr-nav-link:active[b-72nj7mjr4c] {
    transform: scale(.985);
}

.dr-navigation a.dr-nav-link:focus-visible[b-72nj7mjr4c] {
    outline: 2px solid #80baff;
    outline-offset: 2px;
}

/* SIDEBAR FOOTER */

.dr-sidebar-bottom[b-72nj7mjr4c] {
    flex: 0 0 auto;
    margin-top: auto;
    padding: 12px 9px;
}

.dr-sidebar-note[b-72nj7mjr4c] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 10px;
    background: linear-gradient(135deg, #f0f9ff, #f3fbf4);
    border: 1px solid #e5f1f5;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(30, 80, 120, .025);
    transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

    .dr-sidebar-note:hover[b-72nj7mjr4c] {
        border-color: #d7e9f2;
        box-shadow: 0 5px 14px rgba(30, 80, 120, .055);
        transform: translateY(-2px);
    }

.dr-sidebar-note-icon[b-72nj7mjr4c] {
    display: flex;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: #e77991;
    background: #ffffff;
    border-radius: 10px;
    font-size: 14px;
}

.dr-sidebar-note div[b-72nj7mjr4c] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.dr-sidebar-note strong[b-72nj7mjr4c] {
    color: #38536e;
    font-size: 10px;
    font-weight: 750;
}

.dr-sidebar-note div span[b-72nj7mjr4c] {
    color: #8292a6;
    font-size: 9px;
    line-height: 1.4;
}

/* MOBILE: drawer still has a single vertical scroll area */

@media (max-width: 767px) {
    .dr-brand[b-72nj7mjr4c] {
        min-height: 67px;
        padding: 11px 15px;
    }

    .dr-brand-logo[b-72nj7mjr4c] {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
    }

        .dr-brand-logo svg[b-72nj7mjr4c] {
            width: 30px;
            height: 30px;
        }

    .dr-navigation[b-72nj7mjr4c] {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        height: 0;
        min-height: 0;
        gap: 5px;
        padding: 12px 9px;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .dr-nav-section-label[b-72nj7mjr4c] {
        padding: 7px 11px 5px;
    }

    .dr-nav-section-spaced[b-72nj7mjr4c] {
        margin-top: 5px;
    }

    .dr-navigation a.dr-nav-link[b-72nj7mjr4c],
    .dr-navigation a.dr-nav-link:link[b-72nj7mjr4c],
    .dr-navigation a.dr-nav-link:visited[b-72nj7mjr4c] {
        gap: 8px;
        min-height: 42px;
        padding: 8px 10px;
        font-size: 11px;
    }

    .dr-navigation .dr-nav-link svg[b-72nj7mjr4c] {
        flex-basis: 16px;
        width: 16px;
        height: 16px;
    }

    .dr-sidebar-bottom[b-72nj7mjr4c] {
        display: block;
        flex: 0 0 auto;
        margin-top: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dr-brand-logo[b-72nj7mjr4c],
    .dr-navigation .dr-nav-link[b-72nj7mjr4c],
    .dr-navigation .dr-nav-link svg[b-72nj7mjr4c],
    .dr-sidebar-note[b-72nj7mjr4c] {
        transition: none !important;
    }
}
/* _content/DailyReport.Web/Components/Pages/Admin/AkunGuru.razor.rz.scp.css */
.account-page[b-5t6dxpmozy]{max-width:1280px;margin:0 auto;padding:24px;color:#172033}.account-head[b-5t6dxpmozy]{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:24px}.account-eyebrow[b-5t6dxpmozy]{font-size:.72rem;letter-spacing:.14em;font-weight:800;color:#64748b}.account-head h1[b-5t6dxpmozy],.register-card h1[b-5t6dxpmozy]{margin:7px 0;font-size:clamp(1.6rem,3vw,2.15rem);font-weight:800;letter-spacing:-.035em}.account-head p[b-5t6dxpmozy],.register-card>p[b-5t6dxpmozy]{color:#64748b;margin:0}.account-btn[b-5t6dxpmozy]{border:0;border-radius:10px;padding:11px 16px;background:#3159d9;color:white;font-weight:700;cursor:pointer;box-shadow:0 4px 10px #3159d922}.account-btn:hover[b-5t6dxpmozy]{filter:brightness(.96)}.account-btn:disabled[b-5t6dxpmozy]{opacity:.55;cursor:wait}.account-btn.secondary[b-5t6dxpmozy]{background:#eef2ff;color:#334155;box-shadow:none}.account-btn.small[b-5t6dxpmozy]{padding:7px 10px;font-size:.8rem}.account-btn.danger[b-5t6dxpmozy]{background:#fff0f0;color:#b42318;box-shadow:none}.account-card[b-5t6dxpmozy]{background:white;border:1px solid #e6eaf1;border-radius:16px;padding:22px;margin:0 0 18px;box-shadow:0 6px 22px #17203308}.account-card h2[b-5t6dxpmozy]{font-size:1.05rem;font-weight:800;margin:0 0 18px}.account-card-head[b-5t6dxpmozy]{display:flex;align-items:center;justify-content:space-between;gap:12px}.account-grid[b-5t6dxpmozy]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.account-grid label[b-5t6dxpmozy],.register-fields label[b-5t6dxpmozy],.portal-select[b-5t6dxpmozy]{display:flex;flex-direction:column;gap:7px;font-weight:700;font-size:.86rem;color:#334155}.account-grid input[b-5t6dxpmozy],.account-grid select[b-5t6dxpmozy],.register-fields input[b-5t6dxpmozy],.register-fields select[b-5t6dxpmozy],.portal-select select[b-5t6dxpmozy]{width:100%;border:1px solid #d9e0ea;border-radius:9px;padding:11px 12px;background:#fff;color:#172033;outline:none}.account-grid input:focus[b-5t6dxpmozy],.account-grid select:focus[b-5t6dxpmozy],.register-fields input:focus[b-5t6dxpmozy],.register-fields select:focus[b-5t6dxpmozy],.portal-select select:focus[b-5t6dxpmozy]{border-color:#647ce7;box-shadow:0 0 0 3px #647ce71c}.account-actions[b-5t6dxpmozy]{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.account-table-wrap[b-5t6dxpmozy]{width:100%;overflow-x:auto}.account-table[b-5t6dxpmozy]{border-collapse:collapse;width:100%;min-width:650px}.account-table th[b-5t6dxpmozy]{text-align:left;background:#f7f8fc;color:#64748b;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em}.account-table th[b-5t6dxpmozy],.account-table td[b-5t6dxpmozy]{padding:13px 14px;border-bottom:1px solid #edf0f5;vertical-align:middle}.account-table td[b-5t6dxpmozy]{font-size:.9rem}.account-table td small[b-5t6dxpmozy]{display:block;color:#64748b;margin-top:4px}.account-status[b-5t6dxpmozy]{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:.75rem;font-weight:800;white-space:nowrap}.account-status.active[b-5t6dxpmozy]{background:#e8f8ef;color:#137447}.account-status.inactive[b-5t6dxpmozy]{background:#fff0f0;color:#b42318}.account-status.pending[b-5t6dxpmozy]{background:#fff5df;color:#8b5a00}.account-alert[b-5t6dxpmozy]{border-radius:10px;padding:12px 14px;margin-bottom:16px;font-size:.9rem}.account-alert.success[b-5t6dxpmozy]{background:#eaf9f0;color:#12683e}.account-alert.error[b-5t6dxpmozy]{background:#fff0f0;color:#a51d26}.register-shell[b-5t6dxpmozy]{min-height:calc(100vh - 100px);display:grid;place-items:center;padding:28px 16px;background:linear-gradient(135deg,#f2f6ff,#fbfcff)}.register-card[b-5t6dxpmozy]{width:min(100%,560px);background:white;border:1px solid #e5eaf3;border-radius:20px;padding:clamp(22px,5vw,38px);box-shadow:0 20px 60px #1c2d5012}.register-fields[b-5t6dxpmozy]{display:grid;gap:14px;margin:24px 0}.account-btn.full[b-5t6dxpmozy]{width:100%;padding:13px}.portal-report-list[b-5t6dxpmozy]{display:grid;gap:10px;margin-top:20px}.portal-report[b-5t6dxpmozy]{display:flex;justify-content:space-between;align-items:center;gap:15px;border:1px solid #e8edf4;border-radius:12px;padding:16px}.portal-report div[b-5t6dxpmozy]{display:grid;gap:5px}.portal-report span[b-5t6dxpmozy],.portal-report small[b-5t6dxpmozy]{color:#64748b;font-size:.84rem}.portal-select[b-5t6dxpmozy]{max-width:480px}@media(max-width:760px){.account-page[b-5t6dxpmozy]{padding:16px}.account-head[b-5t6dxpmozy]{align-items:flex-start;flex-direction:column}.account-grid[b-5t6dxpmozy]{grid-template-columns:1fr}.account-card[b-5t6dxpmozy]{padding:16px}.account-actions[b-5t6dxpmozy]{flex-direction:column-reverse}.account-actions .account-btn[b-5t6dxpmozy]{width:100%}.portal-report[b-5t6dxpmozy]{align-items:flex-start}}
/* _content/DailyReport.Web/Components/Pages/Admin/AkunOrangTua.razor.rz.scp.css */
.account-page[b-2avtzrugdm]{max-width:1280px;margin:0 auto;padding:24px;color:#172033}.account-head[b-2avtzrugdm]{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:24px}.account-eyebrow[b-2avtzrugdm]{font-size:.72rem;letter-spacing:.14em;font-weight:800;color:#64748b}.account-head h1[b-2avtzrugdm],.register-card h1[b-2avtzrugdm]{margin:7px 0;font-size:clamp(1.6rem,3vw,2.15rem);font-weight:800;letter-spacing:-.035em}.account-head p[b-2avtzrugdm],.register-card>p[b-2avtzrugdm]{color:#64748b;margin:0}.account-btn[b-2avtzrugdm]{border:0;border-radius:10px;padding:11px 16px;background:#3159d9;color:white;font-weight:700;cursor:pointer;box-shadow:0 4px 10px #3159d922}.account-btn:hover[b-2avtzrugdm]{filter:brightness(.96)}.account-btn:disabled[b-2avtzrugdm]{opacity:.55;cursor:wait}.account-btn.secondary[b-2avtzrugdm]{background:#eef2ff;color:#334155;box-shadow:none}.account-btn.small[b-2avtzrugdm]{padding:7px 10px;font-size:.8rem}.account-btn.danger[b-2avtzrugdm]{background:#fff0f0;color:#b42318;box-shadow:none}.account-card[b-2avtzrugdm]{background:white;border:1px solid #e6eaf1;border-radius:16px;padding:22px;margin:0 0 18px;box-shadow:0 6px 22px #17203308}.account-card h2[b-2avtzrugdm]{font-size:1.05rem;font-weight:800;margin:0 0 18px}.account-card-head[b-2avtzrugdm]{display:flex;align-items:center;justify-content:space-between;gap:12px}.account-grid[b-2avtzrugdm]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.account-grid label[b-2avtzrugdm],.register-fields label[b-2avtzrugdm],.portal-select[b-2avtzrugdm]{display:flex;flex-direction:column;gap:7px;font-weight:700;font-size:.86rem;color:#334155}.account-grid input[b-2avtzrugdm],.account-grid select[b-2avtzrugdm],.register-fields input[b-2avtzrugdm],.register-fields select[b-2avtzrugdm],.portal-select select[b-2avtzrugdm]{width:100%;border:1px solid #d9e0ea;border-radius:9px;padding:11px 12px;background:#fff;color:#172033;outline:none}.account-grid input:focus[b-2avtzrugdm],.account-grid select:focus[b-2avtzrugdm],.register-fields input:focus[b-2avtzrugdm],.register-fields select:focus[b-2avtzrugdm],.portal-select select:focus[b-2avtzrugdm]{border-color:#647ce7;box-shadow:0 0 0 3px #647ce71c}.account-actions[b-2avtzrugdm]{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.account-table-wrap[b-2avtzrugdm]{width:100%;overflow-x:auto}.account-table[b-2avtzrugdm]{border-collapse:collapse;width:100%;min-width:650px}.account-table th[b-2avtzrugdm]{text-align:left;background:#f7f8fc;color:#64748b;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em}.account-table th[b-2avtzrugdm],.account-table td[b-2avtzrugdm]{padding:13px 14px;border-bottom:1px solid #edf0f5;vertical-align:middle}.account-table td[b-2avtzrugdm]{font-size:.9rem}.account-table td small[b-2avtzrugdm]{display:block;color:#64748b;margin-top:4px}.account-status[b-2avtzrugdm]{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:.75rem;font-weight:800;white-space:nowrap}.account-status.active[b-2avtzrugdm]{background:#e8f8ef;color:#137447}.account-status.inactive[b-2avtzrugdm]{background:#fff0f0;color:#b42318}.account-status.pending[b-2avtzrugdm]{background:#fff5df;color:#8b5a00}.account-alert[b-2avtzrugdm]{border-radius:10px;padding:12px 14px;margin-bottom:16px;font-size:.9rem}.account-alert.success[b-2avtzrugdm]{background:#eaf9f0;color:#12683e}.account-alert.error[b-2avtzrugdm]{background:#fff0f0;color:#a51d26}.register-shell[b-2avtzrugdm]{min-height:calc(100vh - 100px);display:grid;place-items:center;padding:28px 16px;background:linear-gradient(135deg,#f2f6ff,#fbfcff)}.register-card[b-2avtzrugdm]{width:min(100%,560px);background:white;border:1px solid #e5eaf3;border-radius:20px;padding:clamp(22px,5vw,38px);box-shadow:0 20px 60px #1c2d5012}.register-fields[b-2avtzrugdm]{display:grid;gap:14px;margin:24px 0}.account-btn.full[b-2avtzrugdm]{width:100%;padding:13px}.portal-report-list[b-2avtzrugdm]{display:grid;gap:10px;margin-top:20px}.portal-report[b-2avtzrugdm]{display:flex;justify-content:space-between;align-items:center;gap:15px;border:1px solid #e8edf4;border-radius:12px;padding:16px}.portal-report div[b-2avtzrugdm]{display:grid;gap:5px}.portal-report span[b-2avtzrugdm],.portal-report small[b-2avtzrugdm]{color:#64748b;font-size:.84rem}.portal-select[b-2avtzrugdm]{max-width:480px}@media(max-width:760px){.account-page[b-2avtzrugdm]{padding:16px}.account-head[b-2avtzrugdm]{align-items:flex-start;flex-direction:column}.account-grid[b-2avtzrugdm]{grid-template-columns:1fr}.account-card[b-2avtzrugdm]{padding:16px}.account-actions[b-2avtzrugdm]{flex-direction:column-reverse}.account-actions .account-btn[b-2avtzrugdm]{width:100%}.portal-report[b-2avtzrugdm]{align-items:flex-start}}
.student-picker[b-2avtzrugdm]{margin-top:20px}.student-picker>strong[b-2avtzrugdm]{display:block;margin-bottom:10px}.student-checks[b-2avtzrugdm]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:260px;overflow:auto;padding:10px;border:1px solid #e6eaf1;border-radius:10px}.student-checks label[b-2avtzrugdm]{display:flex;align-items:flex-start;gap:9px;padding:8px;border-radius:8px;background:#f8faff;font-weight:600}.student-checks input[b-2avtzrugdm]{margin-top:4px}.student-checks small[b-2avtzrugdm]{display:block;color:#64748b;font-weight:400}@media(max-width:760px){.student-checks[b-2avtzrugdm]{grid-template-columns:1fr}}
/* _content/DailyReport.Web/Components/Pages/Admin/Dashboard.razor.rz.scp.css */
/* Dashboard Administrator — CSS isolation */
.admin-dashboard[b-x5g2pd3iym] {
    --admin-ink: #26364b;
    --admin-muted: #7b899c;
    --admin-line: #e6ebf2;
    --admin-blue: #3278bd;
    --admin-blue-dark: #245e98;
    max-width: 1440px;
    margin: 0 auto;
    padding: 22px 24px 30px;
    color: var(--admin-ink);
}

.admin-hero[b-x5g2pd3iym] {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 218px;
    overflow: hidden;
    isolation: isolate;
    padding: 30px 34px;
    border: 1px solid #f0dfca;
    border-radius: 20px;
    background: linear-gradient(105deg, #fffaf0 0%, #fff3df 48%, #f8dfc6 100%);
}

.admin-hero-copy[b-x5g2pd3iym] {
    position: relative;
    z-index: 2;
    max-width: 510px;
}

.admin-eyebrow[b-x5g2pd3iym] {
    color: #3477a8;
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .13em;
}

.admin-hero h1[b-x5g2pd3iym] {
    margin: 10px 0 9px;
    color: #24364b;
    font-size: clamp(1.65rem, 2.8vw, 2.35rem);
    font-weight: 850;
    letter-spacing: -.04em;
    line-height: 1.12;
}

.admin-hero p[b-x5g2pd3iym] {
    max-width: 470px;
    margin: 0;
    color: #657184;
    font-size: .91rem;
    line-height: 1.65;
}

.admin-hero-date[b-x5g2pd3iym] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 17px;
    padding: 8px 11px;
    border: 1px solid rgb(255 255 255 / 85%);
    border-radius: 9px;
    color: #50647a;
    background: rgb(255 255 255 / 75%);
    font-size: .78rem;
    font-weight: 700;
}

.admin-hero-date-icon[b-x5g2pd3iym] {
    color: var(--admin-blue);
    font-size: 1rem;
}

.admin-hero-image[b-x5g2pd3iym] {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    width: 60%;
    background-image: url("/images/dashboard-kiddy-place.png");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 100%;
    pointer-events: none;
}

.admin-dashboard-toolbar[b-x5g2pd3iym] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin: 28px 0 15px;
}

.admin-dashboard-toolbar h2[b-x5g2pd3iym],
.admin-panel-heading h2[b-x5g2pd3iym] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.admin-dashboard-toolbar p[b-x5g2pd3iym],
.admin-panel-heading p[b-x5g2pd3iym] {
    margin: 5px 0 0;
    color: var(--admin-muted);
    font-size: .82rem;
}

.admin-date-filters[b-x5g2pd3iym] {
    display: flex;
    align-items: flex-end;
    gap: 9px;
}

.admin-filter label[b-x5g2pd3iym] {
    display: block;
    margin-bottom: 5px;
    color: #68788e;
    font-size: .72rem;
    font-weight: 750;
}

.admin-filter input[b-x5g2pd3iym] {
    box-sizing: border-box;
    width: 145px;
    min-height: 39px;
    padding: 8px 10px;
    border: 1px solid #dce4ee;
    border-radius: 9px;
    outline: none;
    background: #fff;
    color: var(--admin-ink);
    font: inherit;
    font-size: .78rem;
}

.admin-filter input:focus[b-x5g2pd3iym] {
    border-color: #82b5e9;
    box-shadow: 0 0 0 3px rgb(50 120 189 / 11%);
}

.admin-btn[b-x5g2pd3iym] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 39px;
    padding: 9px 13px;
    border: 1px solid transparent;
    border-radius: 9px;
    font: inherit;
    font-size: .78rem;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.admin-btn:hover[b-x5g2pd3iym] {
    transform: translateY(-1px);
    text-decoration: none;
}

.admin-btn:disabled[b-x5g2pd3iym] {
    cursor: wait;
    opacity: .65;
}

.admin-btn-primary[b-x5g2pd3iym] {
    color: #fff;
    background: var(--admin-blue);
}

.admin-btn-primary:hover[b-x5g2pd3iym] {
    color: #fff;
    background: var(--admin-blue-dark);
}

.admin-btn-outline[b-x5g2pd3iym] {
    color: var(--admin-blue);
    border-color: #d8e6f5;
    background: #fff;
}

.admin-btn-outline:hover[b-x5g2pd3iym] {
    color: var(--admin-blue-dark);
    background: #f5f9ff;
}

.admin-stat-grid[b-x5g2pd3iym] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.admin-stat-card[b-x5g2pd3iym] {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--admin-line);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 4px 16px rgb(37 57 82 / 3%);
}

.admin-stat-top[b-x5g2pd3iym] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-stat-icon[b-x5g2pd3iym] {
    display: grid;
    flex: 0 0 36px;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    font-size: 1.05rem;
    font-weight: 800;
}

.admin-stat-blue[b-x5g2pd3iym] { color: #3278bd; background: #edf5ff; }
.admin-stat-green[b-x5g2pd3iym] { color: #27865a; background: #eaf8f0; }
.admin-stat-amber[b-x5g2pd3iym] { color: #a97619; background: #fff5df; }
.admin-stat-pink[b-x5g2pd3iym] { color: #bd6279; background: #fff0f3; }

.admin-stat-label[b-x5g2pd3iym] {
    color: #718097;
    font-size: .78rem;
    font-weight: 700;
}

.admin-stat-number[b-x5g2pd3iym] {
    display: block;
    margin-top: 14px;
    color: #27384e;
    font-size: 2rem;
    font-weight: 850;
    line-height: 1.1;
    letter-spacing: -.04em;
}

.admin-stat-date[b-x5g2pd3iym] {
    font-size: 1.55rem;
}

.admin-stat-foot[b-x5g2pd3iym] {
    display: block;
    margin-top: 8px;
    color: #95a0b0;
    font-size: .72rem;
}

.admin-latest-panel[b-x5g2pd3iym] {
    margin-top: 22px;
    overflow: hidden;
    border: 1px solid var(--admin-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 16px rgb(37 57 82 / 3%);
}

.admin-panel-heading[b-x5g2pd3iym] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 19px 20px;
    border-bottom: 1px solid #edf0f5;
}

.admin-table-wrap[b-x5g2pd3iym] {
    overflow-x: auto;
}

.admin-report-table[b-x5g2pd3iym] {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
}

.admin-report-table th[b-x5g2pd3iym] {
    padding: 12px 16px;
    color: #8190a4;
    background: #f9fbfd;
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .045em;
    text-align: left;
    white-space: nowrap;
}

.admin-report-table td[b-x5g2pd3iym] {
    padding: 14px 16px;
    border-top: 1px solid #eff2f6;
    color: #526177;
    vertical-align: middle;
}

.admin-report-table tbody tr:hover[b-x5g2pd3iym] {
    background: #fbfdff;
}

.admin-table-date[b-x5g2pd3iym] {
    color: #35465d;
    font-weight: 700;
    white-space: nowrap;
}

.admin-class-name[b-x5g2pd3iym],
.admin-class-code[b-x5g2pd3iym] {
    display: block;
}

.admin-class-name[b-x5g2pd3iym] {
    color: #35465d;
    font-weight: 750;
}

.admin-class-code[b-x5g2pd3iym] {
    margin-top: 3px;
    color: #9aa5b5;
    font-size: .72rem;
}

.admin-align-center[b-x5g2pd3iym] { text-align: center !important; }
.admin-align-right[b-x5g2pd3iym] { text-align: right !important; }

.admin-status[b-x5g2pd3iym] {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 800;
    white-space: nowrap;
}

.admin-status-final[b-x5g2pd3iym] {
    color: #23794b;
    background: #e8f7ee;
}

.admin-status-draft[b-x5g2pd3iym] {
    color: #9a6a16;
    background: #fff4dc;
}

.admin-row-action[b-x5g2pd3iym] {
    padding: 6px 9px;
    border: 1px solid #e0eaf6;
    border-radius: 8px;
    color: var(--admin-blue);
    background: #fff;
    font: inherit;
    font-size: .75rem;
    font-weight: 750;
    cursor: pointer;
}

.admin-row-action:hover[b-x5g2pd3iym] {
    background: #f0f7ff;
}

.admin-table-empty[b-x5g2pd3iym] {
    padding: 34px 16px !important;
    color: #8a97a8 !important;
    text-align: center;
}

.admin-panel-footer[b-x5g2pd3iym] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 20px;
    border-top: 1px solid #edf0f5;
    color: #9aa5b5;
    font-size: .73rem;
}

.admin-panel-footer a[b-x5g2pd3iym] {
    color: var(--admin-blue);
    font-weight: 750;
    text-decoration: none;
}

.admin-panel-footer a:hover[b-x5g2pd3iym] {
    text-decoration: underline;
}

.admin-data-note[b-x5g2pd3iym] {
    margin: 13px 2px 0;
    color: #98a3b2;
    font-size: .72rem;
    line-height: 1.5;
}

.admin-state[b-x5g2pd3iym],
.admin-error[b-x5g2pd3iym] {
    padding: 28px;
    border: 1px solid var(--admin-line);
    border-radius: 14px;
    background: #fff;
    color: #728198;
    text-align: center;
}

.admin-error[b-x5g2pd3iym] {
    color: #8c3443;
    border-color: #f0d2d7;
    background: #fff9fa;
}

.admin-error p[b-x5g2pd3iym] {
    margin: 8px 0 15px;
    font-size: .85rem;
}

.admin-spinner[b-x5g2pd3iym] {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 8px;
    border: 2px solid #dce7f4;
    border-top-color: var(--admin-blue);
    border-radius: 50%;
    animation: admin-spin-b-x5g2pd3iym .8s linear infinite;
    vertical-align: -3px;
}

@keyframes admin-spin-b-x5g2pd3iym {
    to { transform: rotate(360deg); }
}

@media (max-width: 1050px) {
    .admin-stat-grid[b-x5g2pd3iym] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-hero-image[b-x5g2pd3iym] {
        width: 55%;
        opacity: .75;
    }

    .admin-dashboard-toolbar[b-x5g2pd3iym] {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-date-filters[b-x5g2pd3iym] {
        width: 100%;
        flex-wrap: wrap;
    }
}

@media (max-width: 650px) {
    .admin-dashboard[b-x5g2pd3iym] {
        padding: 14px;
    }

    .admin-hero[b-x5g2pd3iym] {
        min-height: 255px;
        align-items: flex-start;
        padding: 23px 20px;
    }

    .admin-hero-copy[b-x5g2pd3iym] {
        max-width: 100%;
    }

    .admin-hero p[b-x5g2pd3iym] {
        max-width: 360px;
        font-size: .84rem;
    }

    .admin-hero-image[b-x5g2pd3iym] {
        top: auto;
        right: -5px;
        bottom: 0;
        width: 76%;
        height: 105px;
        opacity: .6;
        background-size: auto 100%;
    }

    .admin-hero-date[b-x5g2pd3iym] {
        margin-top: 12px;
        font-size: .72rem;
    }

    .admin-stat-grid[b-x5g2pd3iym] {
        gap: 10px;
    }

    .admin-stat-card[b-x5g2pd3iym] {
        padding: 13px;
    }

    .admin-stat-icon[b-x5g2pd3iym] {
        flex-basis: 31px;
        width: 31px;
        height: 31px;
    }

    .admin-stat-label[b-x5g2pd3iym] {
        font-size: .72rem;
    }

    .admin-stat-number[b-x5g2pd3iym] {
        font-size: 1.65rem;
    }

    .admin-stat-date[b-x5g2pd3iym] {
        font-size: 1.25rem;
    }

    .admin-date-filters[b-x5g2pd3iym] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-filter input[b-x5g2pd3iym] {
        width: 100%;
    }

    .admin-date-filters > .admin-btn[b-x5g2pd3iym] {
        grid-column: 1 / -1;
    }

    .admin-panel-heading[b-x5g2pd3iym] {
        align-items: flex-start;
        flex-direction: column;
        padding: 16px;
    }

    .admin-report-table[b-x5g2pd3iym] {
        min-width: 720px;
    }

    .admin-panel-footer[b-x5g2pd3iym] {
        align-items: flex-start;
        flex-direction: column;
        padding: 13px 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-btn[b-x5g2pd3iym],
    .admin-spinner[b-x5g2pd3iym] {
        transition: none !important;
        animation: none !important;
    }
}
/* _content/DailyReport.Web/Components/Pages/Admin/VerifikasiOrangTua.razor.rz.scp.css */
.account-page[b-p8mo0os5lz]{max-width:1280px;margin:0 auto;padding:24px;color:#172033}.account-head[b-p8mo0os5lz]{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:24px}.account-eyebrow[b-p8mo0os5lz]{font-size:.72rem;letter-spacing:.14em;font-weight:800;color:#64748b}.account-head h1[b-p8mo0os5lz],.register-card h1[b-p8mo0os5lz]{margin:7px 0;font-size:clamp(1.6rem,3vw,2.15rem);font-weight:800;letter-spacing:-.035em}.account-head p[b-p8mo0os5lz],.register-card>p[b-p8mo0os5lz]{color:#64748b;margin:0}.account-btn[b-p8mo0os5lz]{border:0;border-radius:10px;padding:11px 16px;background:#3159d9;color:white;font-weight:700;cursor:pointer;box-shadow:0 4px 10px #3159d922}.account-btn:hover[b-p8mo0os5lz]{filter:brightness(.96)}.account-btn:disabled[b-p8mo0os5lz]{opacity:.55;cursor:wait}.account-btn.secondary[b-p8mo0os5lz]{background:#eef2ff;color:#334155;box-shadow:none}.account-btn.small[b-p8mo0os5lz]{padding:7px 10px;font-size:.8rem}.account-btn.danger[b-p8mo0os5lz]{background:#fff0f0;color:#b42318;box-shadow:none}.account-card[b-p8mo0os5lz]{background:white;border:1px solid #e6eaf1;border-radius:16px;padding:22px;margin:0 0 18px;box-shadow:0 6px 22px #17203308}.account-card h2[b-p8mo0os5lz]{font-size:1.05rem;font-weight:800;margin:0 0 18px}.account-card-head[b-p8mo0os5lz]{display:flex;align-items:center;justify-content:space-between;gap:12px}.account-grid[b-p8mo0os5lz]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.account-grid label[b-p8mo0os5lz],.register-fields label[b-p8mo0os5lz],.portal-select[b-p8mo0os5lz]{display:flex;flex-direction:column;gap:7px;font-weight:700;font-size:.86rem;color:#334155}.account-grid input[b-p8mo0os5lz],.account-grid select[b-p8mo0os5lz],.register-fields input[b-p8mo0os5lz],.register-fields select[b-p8mo0os5lz],.portal-select select[b-p8mo0os5lz]{width:100%;border:1px solid #d9e0ea;border-radius:9px;padding:11px 12px;background:#fff;color:#172033;outline:none}.account-grid input:focus[b-p8mo0os5lz],.account-grid select:focus[b-p8mo0os5lz],.register-fields input:focus[b-p8mo0os5lz],.register-fields select:focus[b-p8mo0os5lz],.portal-select select:focus[b-p8mo0os5lz]{border-color:#647ce7;box-shadow:0 0 0 3px #647ce71c}.account-actions[b-p8mo0os5lz]{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.account-table-wrap[b-p8mo0os5lz]{width:100%;overflow-x:auto}.account-table[b-p8mo0os5lz]{border-collapse:collapse;width:100%;min-width:650px}.account-table th[b-p8mo0os5lz]{text-align:left;background:#f7f8fc;color:#64748b;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em}.account-table th[b-p8mo0os5lz],.account-table td[b-p8mo0os5lz]{padding:13px 14px;border-bottom:1px solid #edf0f5;vertical-align:middle}.account-table td[b-p8mo0os5lz]{font-size:.9rem}.account-table td small[b-p8mo0os5lz]{display:block;color:#64748b;margin-top:4px}.account-status[b-p8mo0os5lz]{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:.75rem;font-weight:800;white-space:nowrap}.account-status.active[b-p8mo0os5lz]{background:#e8f8ef;color:#137447}.account-status.inactive[b-p8mo0os5lz]{background:#fff0f0;color:#b42318}.account-status.pending[b-p8mo0os5lz]{background:#fff5df;color:#8b5a00}.account-alert[b-p8mo0os5lz]{border-radius:10px;padding:12px 14px;margin-bottom:16px;font-size:.9rem}.account-alert.success[b-p8mo0os5lz]{background:#eaf9f0;color:#12683e}.account-alert.error[b-p8mo0os5lz]{background:#fff0f0;color:#a51d26}.register-shell[b-p8mo0os5lz]{min-height:calc(100vh - 100px);display:grid;place-items:center;padding:28px 16px;background:linear-gradient(135deg,#f2f6ff,#fbfcff)}.register-card[b-p8mo0os5lz]{width:min(100%,560px);background:white;border:1px solid #e5eaf3;border-radius:20px;padding:clamp(22px,5vw,38px);box-shadow:0 20px 60px #1c2d5012}.register-fields[b-p8mo0os5lz]{display:grid;gap:14px;margin:24px 0}.account-btn.full[b-p8mo0os5lz]{width:100%;padding:13px}.portal-report-list[b-p8mo0os5lz]{display:grid;gap:10px;margin-top:20px}.portal-report[b-p8mo0os5lz]{display:flex;justify-content:space-between;align-items:center;gap:15px;border:1px solid #e8edf4;border-radius:12px;padding:16px}.portal-report div[b-p8mo0os5lz]{display:grid;gap:5px}.portal-report span[b-p8mo0os5lz],.portal-report small[b-p8mo0os5lz]{color:#64748b;font-size:.84rem}.portal-select[b-p8mo0os5lz]{max-width:480px}@media(max-width:760px){.account-page[b-p8mo0os5lz]{padding:16px}.account-head[b-p8mo0os5lz]{align-items:flex-start;flex-direction:column}.account-grid[b-p8mo0os5lz]{grid-template-columns:1fr}.account-card[b-p8mo0os5lz]{padding:16px}.account-actions[b-p8mo0os5lz]{flex-direction:column-reverse}.account-actions .account-btn[b-p8mo0os5lz]{width:100%}.portal-report[b-p8mo0os5lz]{align-items:flex-start}}
/* _content/DailyReport.Web/Components/Pages/DailyReportEditor.razor.rz.scp.css */
/* =========================================================
   DAILY REPORT EDITOR
   File: DailyReportEditor.razor.css
   ========================================================= */

.dr-form-page[b-00t1kb16ix] {
    --ink: #172b4d;
    --muted: #6c7a91;
    --border: #e2e9f3;
    --blue: #e8f4ff;
    --green: #eaf8ef;
    --red: #fff0f1;
    --orange: #fff4e3;
    --purple: #f1edff;
    box-sizing: border-box;
    width: 100%;
    max-width: 1440px;
    min-height: 100%;
    margin: 0 auto;
    padding: 24px;
    background: #f5f8fd;
    color: var(--ink);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

    .dr-form-page *[b-00t1kb16ix],
    .dr-form-page *[b-00t1kb16ix]::before,
    .dr-form-page *[b-00t1kb16ix]::after {
        box-sizing: border-box;
    }

/* PAGE HEADER */

.dr-page-head[b-00t1kb16ix] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.dr-eyebrow[b-00t1kb16ix] {
    margin-bottom: 5px;
    color: #536fc4;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.dr-page-head h1[b-00t1kb16ix] {
    margin: 5px 0;
    color: #172b4d;
    font-size: clamp(1.45rem, 3vw, 1.8rem);
    font-weight: 800;
    line-height: 1.3;
}

.dr-page-head p[b-00t1kb16ix],
.dr-student-title p[b-00t1kb16ix] {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.dr-badge[b-00t1kb16ix] {
    flex: 0 0 auto;
    padding: 7px 12px;
    border-radius: 999px;
    background: #d9f8e7;
    color: #14734a;
    font-size: 0.8rem;
    font-weight: 750;
}

/* STUDENT SELECTOR */

.dr-student-picker[b-00t1kb16ix] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 13px;
}

    .dr-student-picker label[b-00t1kb16ix] {
        flex: 0 0 auto;
        color: #35435a;
        font-size: 0.85rem;
        font-weight: 750;
    }

    .dr-student-picker select[b-00t1kb16ix] {
        min-width: 260px;
        max-width: 100%;
        min-height: 40px;
        padding: 9px 12px;
        background: #ffffff;
        border: 1px solid #d9e2ef;
        border-radius: 9px;
        color: var(--ink);
        font: inherit;
    }

    .dr-student-picker span[b-00t1kb16ix] {
        margin-left: auto;
        color: var(--muted);
        font-size: 0.82rem;
    }

/* STUDENT IDENTITY */

.dr-student-title[b-00t1kb16ix] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
}

.dr-avatar[b-00t1kb16ix] {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background: #dcecff;
    border-radius: 14px;
    color: #1760bf;
    font-weight: 800;
}

.dr-student-title h2[b-00t1kb16ix] {
    margin: 0 0 4px;
    color: var(--ink);
    font-size: 1.1rem;
}

/* GRID LAYOUT */

.dr-grid[b-00t1kb16ix] {
    display: grid;
    gap: 16px;
}

.dr-grid--2[b-00t1kb16ix] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dr-main-panels[b-00t1kb16ix] {
    margin: 16px 0;
}

.dr-span-2[b-00t1kb16ix] {
    grid-column: span 2;
}

/* CONTENT PANELS */

.dr-panel[b-00t1kb16ix] {
    min-width: 0;
    margin: 16px 0;
    padding: 18px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 15px;
    box-shadow: 0 3px 12px #142d4b06;
}

    .dr-panel > header[b-00t1kb16ix] {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: -18px -18px 17px;
        padding: 13px 17px;
        border-radius: 14px 14px 0 0;
    }

        .dr-panel > header span[b-00t1kb16ix] {
            flex: 0 0 auto;
            font-size: 1.15rem;
            font-weight: 800;
        }

        .dr-panel > header h3[b-00t1kb16ix] {
            margin: 0;
            font-size: 0.98rem;
            font-weight: 800;
            line-height: 1.4;
        }

.dr-panel--blue > header[b-00t1kb16ix] {
    background: var(--blue);
    color: #0757a8;
}

.dr-panel--green > header[b-00t1kb16ix] {
    background: var(--green);
    color: #087a4d;
}

.dr-panel--red > header[b-00t1kb16ix] {
    background: var(--red);
    color: #b4232c;
}

.dr-panel--orange > header[b-00t1kb16ix] {
    background: var(--orange);
    color: #9a4c00;
}

.dr-panel--purple > header[b-00t1kb16ix] {
    background: var(--purple);
    color: #4d2db6;
}

/* FORM FIELDS */

.dr-field[b-00t1kb16ix] {
    min-width: 0;
    margin-bottom: 13px;
}

    .dr-field:last-child[b-00t1kb16ix] {
        margin-bottom: 0;
    }

    .dr-field label[b-00t1kb16ix] {
        display: block;
        margin-bottom: 7px;
        color: #35435a;
        font-size: 0.82rem;
        font-weight: 750;
        line-height: 1.5;
    }

    .dr-field input[b-00t1kb16ix],
    .dr-field select[b-00t1kb16ix],
    .dr-field textarea[b-00t1kb16ix],
    .dr-assessment select[b-00t1kb16ix] {
        display: block;
        width: 100%;
        min-width: 0;
        min-height: 40px;
        padding: 9px 11px;
        background: #ffffff;
        border: 1px solid #d9e2ef;
        border-radius: 8px;
        color: #172b4d;
        font-family: inherit;
        font-size: 0.87rem;
        line-height: 1.45;
        outline: none;
        box-shadow: none;
    }

    .dr-field textarea[b-00t1kb16ix] {
        min-height: 88px;
        resize: vertical;
        line-height: 1.5;
    }

        .dr-field input:focus[b-00t1kb16ix],
        .dr-field select:focus[b-00t1kb16ix],
        .dr-field textarea:focus[b-00t1kb16ix],
        .dr-assessment select:focus[b-00t1kb16ix],
        .dr-student-picker select:focus[b-00t1kb16ix] {
            border-color: #7da6ed;
            outline: 3px solid #2d6cdf14;
        }

        .dr-field input[b-00t1kb16ix]::placeholder,
        .dr-field textarea[b-00t1kb16ix]::placeholder {
            color: #9aa6b8;
        }

/* ASSESSMENT / OBSERVATION */

.dr-assessment-list[b-00t1kb16ix] {
    display: grid;
    gap: 0;
}

.dr-assessment[b-00t1kb16ix] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #edf1f7;
}

    .dr-assessment:first-child[b-00t1kb16ix] {
        padding-top: 0;
    }

    .dr-assessment:last-child[b-00t1kb16ix] {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .dr-assessment label[b-00t1kb16ix] {
        color: #35435a;
        font-size: 0.85rem;
        line-height: 1.5;
    }

.dr-hint[b-00t1kb16ix] {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.6;
}

/* PHOTO UPLOAD */

.dr-photo-panel > header[b-00t1kb16ix] {
    background: #fff4e3;
    color: #9a4c00;
}

.dr-photo-section-title[b-00t1kb16ix] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 20px 0 12px;
    color: #35435a;
    font-size: 0.84rem;
}

    .dr-photo-section-title span[b-00t1kb16ix] {
        color: #6c7a91;
        font-size: 0.78rem;
        font-weight: 600;
        white-space: nowrap;
    }

.dr-photo-list[b-00t1kb16ix] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.dr-photo-chip[b-00t1kb16ix] {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 8px 10px;
    background: #f6f9ff;
    border: 1px solid #dce7f7;
    border-radius: 9px;
    font-size: 0.8rem;
}

.dr-photo-file-icon[b-00t1kb16ix] {
    flex: 0 0 auto;
    color: #9a4c00;
}

.dr-photo-file-name[b-00t1kb16ix] {
    overflow: hidden;
    color: #35435a;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dr-upload-box[b-00t1kb16ix] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 22px 16px;
    background: #fffaf1;
    border: 1px dashed #e7bc83;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

    .dr-upload-box:hover[b-00t1kb16ix] {
        background: #fff5e5;
        border-color: #c88735;
    }

    .dr-upload-box:focus-within[b-00t1kb16ix] {
        outline: 3px solid #d99b3b30;
        outline-offset: 2px;
    }

.dr-upload-icon[b-00t1kb16ix] {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #ffedd2;
    color: #a65300;
    font-size: 1.6rem;
    font-weight: 500;
}

.dr-upload-box strong[b-00t1kb16ix] {
    color: #79400b;
    font-size: 0.9rem;
}

.dr-upload-box > span[b-00t1kb16ix] {
    color: #8a755e;
    font-size: 0.8rem;
    line-height: 1.5;
}

.dr-upload-format[b-00t1kb16ix] {
    color: #9a8062;
    font-size: 0.74rem;
}

/* ::deep diperlukan agar CSS isolation bisa menargetkan input hasil render InputFile. */
.dr-upload-box[b-00t1kb16ix]  input[type="file"] {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    opacity: 0;
    cursor: pointer;
}

    .dr-upload-box[b-00t1kb16ix]  input[type="file"]:disabled {
        cursor: not-allowed;
    }



.dr-photo-grid[b-00t1kb16ix] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 156px));
    align-items: start;
    gap: 12px;
}

.dr-photo-card[b-00t1kb16ix] {
    min-width: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e2e9f3;
    border-radius: 11px;
}

.dr-photo-image[b-00t1kb16ix] {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: #f1f4f9;
}

    .dr-photo-image img[b-00t1kb16ix] {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.dr-photo-remove[b-00t1kb16ix] {
    position: absolute;
    top: 7px;
    right: 7px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #b4232c;
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px #0003;
}

    .dr-photo-remove:hover:not(:disabled)[b-00t1kb16ix] {
        background: #8f1720;
    }

    .dr-photo-remove:focus-visible[b-00t1kb16ix] {
        outline: 3px solid #b4232c55;
        outline-offset: 2px;
    }

    .dr-photo-remove:disabled[b-00t1kb16ix] {
        opacity: 0.55;
        cursor: not-allowed;
    }

.dr-photo-caption[b-00t1kb16ix] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 9px 10px;
}

    .dr-photo-caption span[b-00t1kb16ix] {
        overflow: hidden;
        color: #35435a;
        font-size: 0.76rem;
        font-weight: 650;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dr-photo-caption small[b-00t1kb16ix] {
        color: #6c7a91;
        font-size: 0.72rem;
    }

.dr-photo-note[b-00t1kb16ix] {
    margin-top: 12px;
}

/* BUTTONS */

.dr-btn[b-00t1kb16ix] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 10px 15px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-family: inherit;
    font-size: 0.87rem;
    font-weight: 750;
    line-height: 1.35;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

    .dr-btn:hover:not(:disabled)[b-00t1kb16ix] {
        filter: brightness(0.97);
    }

    .dr-btn:focus-visible[b-00t1kb16ix] {
        outline: 3px solid #3159dc30;
        outline-offset: 2px;
    }

    .dr-btn:disabled[b-00t1kb16ix] {
        opacity: 0.55;
        cursor: not-allowed;
    }

.dr-btn--light[b-00t1kb16ix] {
    background: #ffffff;
    border-color: #d6e0ef;
    color: #263956;
}

    .dr-btn--light:hover:not(:disabled)[b-00t1kb16ix] {
        background: #f7f9fc;
        border-color: #bdcce1;
    }

.dr-btn--primary[b-00t1kb16ix] {
    background: #3159dc;
    border-color: #3159dc;
    color: #ffffff;
    box-shadow: 0 5px 12px #3159dc25;
}

    .dr-btn--primary:hover:not(:disabled)[b-00t1kb16ix] {
        background: #294bc4;
        border-color: #294bc4;
    }

/* BOTTOM ACTION BAR */

.dr-actions[b-00t1kb16ix] {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
    padding: 14px 0 4px;
    background: linear-gradient(180deg, #f5f8fd00, #f5f8fd 25%);
}

    .dr-actions > span[b-00t1kb16ix] {
        margin-right: auto;
        color: var(--muted);
        font-size: 0.8rem;
        line-height: 1.5;
    }

/* ALERTS / STATUS MESSAGES */

.dr-alert[b-00t1kb16ix],
.dr-success[b-00t1kb16ix] {
    margin: 12px 0;
    padding: 12px 14px;
    border-radius: 9px;
    font-size: 0.87rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.dr-alert[b-00t1kb16ix] {
    background: #fff0f0;
    border: 1px solid #ffd4d4;
    color: #a12424;
}

.dr-success[b-00t1kb16ix] {
    background: #e7fbf1;
    border: 1px solid #c5f0db;
    color: #126b45;
}

.dr-empty[b-00t1kb16ix] {
    padding: 80px 12px;
    color: var(--muted);
    text-align: center;
}

/* RESPONSIVE LAYOUT */

@media (max-width: 900px) {
    .dr-photo-grid[b-00t1kb16ix] {
        grid-template-columns: repeat(auto-fill, minmax(124px, 148px));
    }

    .dr-actions[b-00t1kb16ix] {
        position: static;
    }
}

@media (max-width: 760px) {
    .dr-form-page[b-00t1kb16ix] {
        padding: 12px;
    }

    .dr-page-head[b-00t1kb16ix] {
        align-items: flex-start;
        flex-direction: column;
    }

    .dr-badge[b-00t1kb16ix] {
        align-self: flex-start;
    }

    .dr-grid--2[b-00t1kb16ix] {
        grid-template-columns: 1fr;
    }

    .dr-span-2[b-00t1kb16ix] {
        grid-column: auto;
    }

    .dr-student-picker[b-00t1kb16ix] {
        align-items: stretch;
        flex-direction: column;
    }

        .dr-student-picker select[b-00t1kb16ix] {
            width: 100%;
            min-width: 0;
        }

        .dr-student-picker span[b-00t1kb16ix] {
            margin-left: 0;
        }

    .dr-assessment[b-00t1kb16ix] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .dr-actions[b-00t1kb16ix] {
        align-items: stretch;
        flex-direction: column;
    }

        .dr-actions > span[b-00t1kb16ix] {
            margin-right: 0;
        }

        .dr-actions .dr-btn[b-00t1kb16ix] {
            width: 100%;
        }
}

@media (max-width: 560px) {
    .dr-photo-grid[b-00t1kb16ix] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .dr-photo-card[b-00t1kb16ix] {
        max-width: 100%;
    }

    .dr-upload-box[b-00t1kb16ix] {
        padding: 18px 12px;
    }

        .dr-upload-box input[type="file"][b-00t1kb16ix] {
            max-width: 100%;
            font-size: 0.78rem;
        }

    .dr-panel[b-00t1kb16ix] {
        padding: 14px;
    }

        .dr-panel > header[b-00t1kb16ix] {
            margin: -14px -14px 15px;
            padding: 12px 14px;
        }

    .dr-photo-section-title[b-00t1kb16ix] {
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dr-btn[b-00t1kb16ix] {
        transition: none;
    }
}

.dr-page-heading[b-00t1kb16ix] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
}

.dr-page-title[b-00t1kb16ix] {
    min-width: 0;
}

.dr-btn--back[b-00t1kb16ix] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid #d9e2ef;
    border-radius: 9px;
    background: #ffffff;
    color: #35435a;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

    .dr-btn--back:hover[b-00t1kb16ix] {
        background: #f0f5fb;
        border-color: #b8c8df;
    }

    .dr-btn--back:focus-visible[b-00t1kb16ix] {
        outline: 2px solid #536fc4;
        outline-offset: 2px;
    }

@media (max-width: 768px) {
    .dr-page-heading[b-00t1kb16ix] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .dr-btn--back[b-00t1kb16ix] {
        min-height: 38px;
    }
}
/* _content/DailyReport.Web/Components/Pages/DailyReportIndex.razor.rz.scp.css */
/* =========================================================
   DAILY REPORT INDEX
   File: DailyReportIndex.razor.css
   ========================================================= */

.dr-page[b-rj5oj8g7uw] {
    --dr-ink: #172033;
    --dr-muted: #6b7487;
    --dr-line: #e5eaf2;
    --dr-blue: #3458d4;
    box-sizing: border-box;
    width: 100%;
    max-width: 1440px;
    min-height: 100%;
    margin: 0 auto;
    padding: 28px 30px 40px;
    background: #f5f7fb;
    color: var(--dr-ink);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

    .dr-page *[b-rj5oj8g7uw],
    .dr-modal-backdrop *[b-rj5oj8g7uw],
    .dr-modal-backdrop *[b-rj5oj8g7uw]::before,
    .dr-modal-backdrop *[b-rj5oj8g7uw]::after {
        box-sizing: border-box;
    }

/* =========================================================
   PAGE HEADER
   ========================================================= */

.dr-heading[b-rj5oj8g7uw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.dr-eyebrow[b-rj5oj8g7uw] {
    margin-bottom: 7px;
    color: #6678b9;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.dr-heading h1[b-rj5oj8g7uw] {
    margin: 0;
    color: #172033;
    font-size: clamp(1.65rem, 3vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.2;
}

.dr-heading p[b-rj5oj8g7uw],
.dr-panel-head p[b-rj5oj8g7uw] {
    margin: 7px 0 0;
    color: var(--dr-muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.dr-page .dr-btn[b-rj5oj8g7uw],
.dr-modal-backdrop .dr-btn[b-rj5oj8g7uw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 10px 15px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

    .dr-page .dr-btn:hover:not(:disabled)[b-rj5oj8g7uw],
    .dr-modal-backdrop .dr-btn:hover:not(:disabled)[b-rj5oj8g7uw] {
        transform: translateY(-1px);
    }

    .dr-page .dr-btn:focus-visible[b-rj5oj8g7uw],
    .dr-modal-backdrop .dr-btn:focus-visible[b-rj5oj8g7uw] {
        outline: 3px solid #3458d433;
        outline-offset: 2px;
    }

    .dr-page .dr-btn:disabled[b-rj5oj8g7uw],
    .dr-modal-backdrop .dr-btn:disabled[b-rj5oj8g7uw] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

.dr-page .dr-btn-primary[b-rj5oj8g7uw],
.dr-modal-backdrop .dr-btn-primary[b-rj5oj8g7uw] {
    background: #3458d4 !important;
    border-color: #3458d4 !important;
    color: #ffffff !important;
    box-shadow: 0 5px 14px #3458d422;
}

    .dr-page .dr-btn-primary:hover:not(:disabled)[b-rj5oj8g7uw],
    .dr-modal-backdrop .dr-btn-primary:hover:not(:disabled)[b-rj5oj8g7uw] {
        background: #2948b8 !important;
        border-color: #2948b8 !important;
    }

.dr-page .dr-btn-light[b-rj5oj8g7uw],
.dr-modal-backdrop .dr-btn-light[b-rj5oj8g7uw] {
    background: #ffffff;
    border-color: var(--dr-line);
    color: #344054;
}

    .dr-page .dr-btn-light:hover:not(:disabled)[b-rj5oj8g7uw],
    .dr-modal-backdrop .dr-btn-light:hover:not(:disabled)[b-rj5oj8g7uw] {
        background: #f8faff;
        border-color: #cbd5e4;
    }

/* =========================================================
   STATISTICS
   ========================================================= */

.dr-stats[b-rj5oj8g7uw] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.dr-stat[b-rj5oj8g7uw] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 19px;
    background: #ffffff;
    border: 1px solid var(--dr-line);
    border-radius: 15px;
    box-shadow: 0 5px 18px #16244306;
}

.dr-stat-icon[b-rj5oj8g7uw] {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 1.25rem;
    font-weight: 800;
}

.dr-blue[b-rj5oj8g7uw] {
    background: #edf2ff;
    color: #3458d4;
}

.dr-amber[b-rj5oj8g7uw] {
    background: #fff5df;
    color: #b77708;
}

.dr-green[b-rj5oj8g7uw] {
    background: #e6f8ef;
    color: #168654;
}

.dr-stat small[b-rj5oj8g7uw],
.dr-stat strong[b-rj5oj8g7uw] {
    display: block;
}

.dr-stat small[b-rj5oj8g7uw] {
    margin-bottom: 4px;
    color: var(--dr-muted);
    font-size: 0.8rem;
}

.dr-stat strong[b-rj5oj8g7uw] {
    color: #172033;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
}

/* =========================================================
   MAIN PANEL
   ========================================================= */

.dr-page .dr-panel[b-rj5oj8g7uw] {
    min-width: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--dr-line);
    border-radius: 16px;
    box-shadow: 0 8px 28px #17203307;
}

.dr-panel-head[b-rj5oj8g7uw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 22px 24px;
    border-bottom: 1px solid var(--dr-line);
}

    .dr-panel-head h2[b-rj5oj8g7uw] {
        margin: 0;
        color: #172033;
        font-size: 1.08rem;
        font-weight: 800;
        line-height: 1.35;
    }

/* =========================================================
   FILTERS
   ========================================================= */

.dr-filters[b-rj5oj8g7uw] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    padding: 17px 24px;
    border-bottom: 1px solid var(--dr-line);
}

    .dr-filters label[b-rj5oj8g7uw] {
        display: flex;
        flex-direction: column;
        gap: 7px;
        color: #465066;
        font-size: 0.79rem;
        font-weight: 700;
    }

    .dr-filters input[b-rj5oj8g7uw],
    .dr-filters select[b-rj5oj8g7uw] {
        min-width: 0;
        min-height: 40px;
        padding: 8px 10px;
        background: #ffffff;
        border: 1px solid #dce2ec;
        border-radius: 9px;
        color: var(--dr-ink);
        font-family: inherit;
        font-size: 0.84rem;
    }

        .dr-filters input:focus[b-rj5oj8g7uw],
        .dr-filters select:focus[b-rj5oj8g7uw] {
            outline: 3px solid #3458d41c;
            border-color: #8da2f0;
        }

/* =========================================================
   REPORT TABLE
   ========================================================= */

.dr-table-wrap[b-rj5oj8g7uw] {
    width: 100%;
    overflow-x: auto;
}

.dr-table[b-rj5oj8g7uw] {
    width: 100%;
    min-width: 740px;
    border-collapse: collapse;
    border-spacing: 0;
}

    .dr-table th[b-rj5oj8g7uw] {
        padding: 14px 20px;
        background: #f8faff;
        border-bottom: 1px solid var(--dr-line);
        color: #707a8d;
        font-size: 0.69rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-align: left;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .dr-table td[b-rj5oj8g7uw] {
        padding: 16px 20px;
        border-bottom: 1px solid #edf0f5;
        color: #344054;
        font-size: 0.86rem;
        vertical-align: middle;
    }

    .dr-table tbody tr:last-child td[b-rj5oj8g7uw] {
        border-bottom: 0;
    }

    .dr-table tbody tr:hover[b-rj5oj8g7uw] {
        background: #fbfcff;
    }

    .dr-table td strong[b-rj5oj8g7uw],
    .dr-table td small[b-rj5oj8g7uw] {
        display: block;
    }

    .dr-table td strong[b-rj5oj8g7uw] {
        color: #172033;
        font-weight: 700;
    }

    .dr-table td small[b-rj5oj8g7uw] {
        margin-top: 4px;
        color: var(--dr-muted);
        font-size: 0.76rem;
    }

.dr-status[b-rj5oj8g7uw] {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

.dr-status-draft[b-rj5oj8g7uw] {
    background: #fff4d8;
    color: #96610b;
}

.dr-status-final[b-rj5oj8g7uw] {
    background: #e5f8ee;
    color: #167347;
}

.dr-page .dr-actions[b-rj5oj8g7uw] {
    text-align: right;
    white-space: nowrap;
}

    .dr-page .dr-actions .dr-btn[b-rj5oj8g7uw] {
        min-height: 34px;
        padding: 7px 10px;
        font-size: 0.78rem;
    }

/* =========================================================
   EMPTY / LOADING STATES
   ========================================================= */

.dr-empty[b-rj5oj8g7uw] {
    padding: 55px 20px;
    color: var(--dr-muted);
    text-align: center;
}

    .dr-empty strong[b-rj5oj8g7uw] {
        display: block;
        margin-top: 12px;
        color: var(--dr-ink);
        font-size: 1rem;
    }

    .dr-empty p[b-rj5oj8g7uw] {
        margin: 7px 0 15px;
        font-size: 0.86rem;
        line-height: 1.5;
    }

.dr-empty-icon[b-rj5oj8g7uw] {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: 0 auto;
    background: #edf2ff;
    border-radius: 16px;
    color: #3458d4;
    font-size: 1.6rem;
}

.dr-empty-error strong[b-rj5oj8g7uw] {
    color: #b42318;
}

.dr-spinner[b-rj5oj8g7uw] {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    border: 2px solid #d9e0ef;
    border-top-color: #3458d4;
    border-radius: 50%;
    animation: dr-spin-b-rj5oj8g7uw 0.7s linear infinite;
    vertical-align: middle;
}

@keyframes dr-spin-b-rj5oj8g7uw {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   ALERTS
   ========================================================= */

.dr-page .dr-alert[b-rj5oj8g7uw],
.dr-modal-backdrop .dr-alert[b-rj5oj8g7uw] {
    margin: 15px 0;
    padding: 12px 15px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 0.86rem;
    line-height: 1.5;
}

.dr-page .dr-alert-error[b-rj5oj8g7uw],
.dr-modal-backdrop .dr-alert-error[b-rj5oj8g7uw] {
    background: #fff0ef;
    border-color: #ffd8d5;
    color: #b42318;
}

.dr-page .dr-alert-success[b-rj5oj8g7uw],
.dr-modal-backdrop .dr-alert-success[b-rj5oj8g7uw] {
    background: #eaf8f0;
    border-color: #c8efd9;
    color: #167347;
}

/* =========================================================
   CREATE MODAL
   ========================================================= */

.dr-modal-backdrop[b-rj5oj8g7uw] {
    --dr-ink: #172033;
    --dr-muted: #6b7487;
    --dr-line: #e5eaf2;
    --dr-blue: #3458d4;
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 18px;
    overflow-y: auto;
    background: #10182880;
}

.dr-modal[b-rj5oj8g7uw] {
    width: min(100%, 700px);
    max-height: calc(100vh - 36px);
    overflow-y: auto;
    padding: 26px;
    background: #ffffff;
    border-radius: 19px;
    box-shadow: 0 24px 80px #0003;
}

.dr-modal-head[b-rj5oj8g7uw] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

    .dr-modal-head .dr-eyebrow[b-rj5oj8g7uw] {
        margin-bottom: 6px;
    }

    .dr-modal-head h2[b-rj5oj8g7uw] {
        margin: 0;
        color: #172b4d;
        font-size: 1.35rem;
        font-weight: 800;
        line-height: 1.35;
    }

.dr-icon-btn[b-rj5oj8g7uw] {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    background: #f1f4f9;
    border: 0;
    border-radius: 10px;
    color: #475467;
    font-family: inherit;
    font-size: 1.35rem;
    cursor: pointer;
}

    .dr-icon-btn:hover[b-rj5oj8g7uw] {
        background: #e8edf5;
    }

/* =========================================================
   CREATE FORM
   ========================================================= */

.dr-form-grid[b-rj5oj8g7uw] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
}

    .dr-form-grid > label[b-rj5oj8g7uw] {
        display: flex;
        flex-direction: column;
        gap: 7px;
        min-width: 0;
        color: #465066;
        font-size: 0.79rem;
        font-weight: 700;
    }

    .dr-form-grid .dr-full[b-rj5oj8g7uw] {
        grid-column: 1 / -1;
    }

.dr-modal .dr-input[b-rj5oj8g7uw] {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 10px 11px;
    background: #ffffff;
    border: 1px solid #dce2ec;
    border-radius: 9px;
    color: var(--dr-ink);
    font-family: inherit;
    font-size: 0.87rem;
    line-height: 1.4;
}

.dr-modal textarea.dr-input[b-rj5oj8g7uw] {
    min-height: 88px;
    resize: vertical;
}

.dr-modal .dr-input:focus[b-rj5oj8g7uw] {
    outline: 3px solid #3458d41c;
    border-color: #8da2f0;
}

.dr-modal .validation-message[b-rj5oj8g7uw] {
    margin-top: 4px;
    color: #b42318;
    font-size: 0.78rem;
}

.dr-modal .validation-summary-errors[b-rj5oj8g7uw] {
    margin-top: 12px;
    color: #b42318;
    font-size: 0.84rem;
}

    .dr-modal .validation-summary-errors ul[b-rj5oj8g7uw] {
        margin: 6px 0 0;
        padding-left: 20px;
    }

/* =========================================================
   MODAL FOOTER / ACTIONS
   ========================================================= */

.dr-modal-actions[b-rj5oj8g7uw] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--dr-line);
}

    .dr-modal-actions .dr-btn[b-rj5oj8g7uw] {
        min-height: 46px;
    }

        .dr-modal-actions .dr-btn.dr-btn-primary[b-rj5oj8g7uw] {
            min-width: 120px;
            background: #3458d4 !important;
            border-color: #3458d4 !important;
            color: #ffffff !important;
            opacity: 1;
        }

            .dr-modal-actions .dr-btn.dr-btn-primary:hover:not(:disabled)[b-rj5oj8g7uw] {
                background: #2948b8 !important;
                border-color: #2948b8 !important;
            }

            .dr-modal-actions .dr-btn.dr-btn-primary:disabled[b-rj5oj8g7uw] {
                background: #3458d4 !important;
                border-color: #3458d4 !important;
                color: #ffffff !important;
                opacity: 0.65;
                cursor: not-allowed;
            }

        .dr-modal-actions .dr-btn.dr-btn-light[b-rj5oj8g7uw] {
            min-width: 76px;
            background: #ffffff;
            border-color: #344054;
            color: #344054;
        }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
    .dr-page[b-rj5oj8g7uw] {
        padding: 22px 20px 32px;
    }

    .dr-stats[b-rj5oj8g7uw] {
        gap: 12px;
    }

    .dr-stat[b-rj5oj8g7uw] {
        padding: 15px;
    }

    .dr-panel-head[b-rj5oj8g7uw] {
        padding: 18px 20px;
    }

    .dr-filters[b-rj5oj8g7uw] {
        padding: 16px 20px;
    }
}

@media (max-width: 760px) {
    .dr-page[b-rj5oj8g7uw] {
        padding: 20px 14px 28px;
    }

    .dr-heading[b-rj5oj8g7uw] {
        align-items: flex-start;
        flex-direction: column;
    }

        .dr-heading > .dr-btn[b-rj5oj8g7uw] {
            width: 100%;
        }

    .dr-stats[b-rj5oj8g7uw] {
        grid-template-columns: 1fr;
    }

    .dr-stat[b-rj5oj8g7uw] {
        padding: 15px;
    }

    .dr-panel-head[b-rj5oj8g7uw] {
        align-items: flex-start;
        flex-direction: column;
        padding: 18px;
    }

    .dr-filters[b-rj5oj8g7uw] {
        align-items: stretch;
        padding: 16px;
    }

        .dr-filters label[b-rj5oj8g7uw] {
            flex: 1 1 140px;
        }

        .dr-filters > .dr-btn[b-rj5oj8g7uw] {
            width: 100%;
        }

    .dr-table[b-rj5oj8g7uw] {
        min-width: 740px;
    }

    .dr-modal-backdrop[b-rj5oj8g7uw] {
        place-items: start center;
        padding: 12px;
    }

    .dr-modal[b-rj5oj8g7uw] {
        max-height: calc(100vh - 24px);
        padding: 19px;
        border-radius: 15px;
    }

    .dr-form-grid[b-rj5oj8g7uw] {
        grid-template-columns: 1fr;
    }

        .dr-form-grid .dr-full[b-rj5oj8g7uw] {
            grid-column: auto;
        }

    .dr-modal-actions[b-rj5oj8g7uw] {
        align-items: stretch;
    }

        .dr-modal-actions .dr-btn[b-rj5oj8g7uw] {
            flex: 1 1 auto;
        }
}

@media (prefers-reduced-motion: reduce) {
    .dr-page .dr-btn[b-rj5oj8g7uw],
    .dr-modal-backdrop .dr-btn[b-rj5oj8g7uw] {
        transition: none;
    }

    .dr-spinner[b-rj5oj8g7uw] {
        animation-duration: 1.5s;
    }
}
/* _content/DailyReport.Web/Components/Pages/Dashboard.razor.rz.scp.css */
/* =========================================
   DAILY REPORT - TEACHER DASHBOARD
   ========================================= */

.dg-page[b-sqmkqlqns9] {
    --dg-text: #10284c;
    --dg-muted: #71839c;
    --dg-border: #e5edf6;
    --dg-blue: #087cf0;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    color: var(--dg-text);
    font-family: "Segoe UI", Arial, sans-serif;
}

.dg-loading[b-sqmkqlqns9] {
    display: flex;
    min-height: 280px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--dg-muted);
    font-size: 13px;
}

.dg-spinner[b-sqmkqlqns9] {
    width: 23px;
    height: 23px;
    border: 3px solid #dcecff;
    border-top-color: var(--dg-blue);
    border-radius: 50%;
    animation: dg-spin-b-sqmkqlqns9 0.8s linear infinite;
}

@keyframes dg-spin-b-sqmkqlqns9 {
    to { transform: rotate(360deg); }
}

/* Welcome banner */

.dg-welcome[b-sqmkqlqns9] {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 180px;
    overflow: hidden;
    padding: 24px 28px;
    background: #eef8ff;
    border: 1px solid #e2effb;
    border-radius: 15px;
}

.dg-welcome-content[b-sqmkqlqns9] {
    position: relative;
    z-index: 2;
    width: 48%;
}

.dg-eyebrow[b-sqmkqlqns9] {
    display: block;
    margin-bottom: 12px;
    color: #4282c4;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.dg-greeting[b-sqmkqlqns9] {
    margin: 0 0 2px;
    font-size: 13px;
    font-weight: 700;
}

.dg-welcome h1[b-sqmkqlqns9] {
    margin: 0;
    font-size: clamp(25px, 3vw, 34px);
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.2;
}

.dg-wave[b-sqmkqlqns9] {
    display: inline-block;
    font-size: 0.85em;
    animation: dg-wave-b-sqmkqlqns9 2s ease-in-out infinite;
    transform-origin: 70% 70%;
}

@keyframes dg-wave-b-sqmkqlqns9 {
    0%, 60%, 100% { transform: rotate(0); }
    10%, 30% { transform: rotate(14deg); }
    20%, 40% { transform: rotate(-7deg); }
}

.dg-class-name[b-sqmkqlqns9] {
    margin: 7px 0 0;
    color: #607895;
    font-size: 12px;
}

/* Actual uploaded classroom image */

.dg-welcome-art[b-sqmkqlqns9] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 57%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 12%, #000 34%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 12%, #000 34%);
}

.dg-welcome-image[b-sqmkqlqns9] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 48%;
}

/* Statistic cards */

.dg-stat-grid[b-sqmkqlqns9] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.dg-stat-card[b-sqmkqlqns9] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 88px;
    padding: 15px;
    border: 1px solid transparent;
    border-radius: 13px;
}

.dg-stat-blue[b-sqmkqlqns9] { color: #087cf0; background: #eaf5ff; border-color: #e3f0ff; }
.dg-stat-green[b-sqmkqlqns9] { color: #07965b; background: #eaf9f0; border-color: #e0f5e8; }
.dg-stat-orange[b-sqmkqlqns9] { color: #eb8300; background: #fff6e6; border-color: #fff0d5; }
.dg-stat-purple[b-sqmkqlqns9] { color: #6545dc; background: #f2edff; border-color: #ece5ff; }

.dg-stat-icon[b-sqmkqlqns9] {
    display: flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, .85);
    border-radius: 50%;
}

.dg-stat-icon svg[b-sqmkqlqns9] {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dg-stat-info[b-sqmkqlqns9] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.dg-stat-info strong[b-sqmkqlqns9] {
    font-size: clamp(21px, 2.2vw, 28px);
    font-weight: 800;
    line-height: 1;
}

.dg-stat-info span[b-sqmkqlqns9] {
    color: var(--dg-text);
    font-size: 10px;
    font-weight: 700;
}

.dg-stat-info small[b-sqmkqlqns9] {
    color: #71839c;
    font-size: 9px;
}

/* Report heading and toolbar */

.dg-report-section[b-sqmkqlqns9] { margin-top: 23px; }

.dg-section-heading[b-sqmkqlqns9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 15px;
}

.dg-section-heading h2[b-sqmkqlqns9] {
    margin: 0;
    color: var(--dg-text);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.35px;
}

.dg-section-heading p[b-sqmkqlqns9] {
    margin: 4px 0 0;
    color: var(--dg-muted);
    font-size: 11px;
}

.dg-primary-button[b-sqmkqlqns9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 39px;
    padding: 0 15px;
    color: #fff;
    background: linear-gradient(135deg, #1689ff, #0870e6);
    border: 0;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(8,124,240,.15);
    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}

.dg-primary-button:hover[b-sqmkqlqns9] {
    box-shadow: 0 6px 16px rgba(8,124,240,.23);
    transform: translateY(-1px);
}

.dg-plus[b-sqmkqlqns9] { font-size: 19px; font-weight: 400; line-height: 1; }

.dg-toolbar[b-sqmkqlqns9] {
    display: grid;
    grid-template-columns: minmax(180px, 1.5fr) minmax(120px, .7fr) minmax(115px, .65fr);
    gap: 10px;
    margin-bottom: 12px;
}

.dg-search[b-sqmkqlqns9],
.dg-filter[b-sqmkqlqns9] {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 39px;
    color: #405673;
    background: #fff;
    border: 1px solid #e0e8f2;
    border-radius: 9px;
}

.dg-search[b-sqmkqlqns9] { gap: 9px; padding: 0 11px; }

.dg-search svg[b-sqmkqlqns9] {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #607895;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.dg-search input[b-sqmkqlqns9] {
    width: 100%;
    min-width: 0;
    padding: 9px 0;
    color: var(--dg-text);
    background: transparent;
    border: 0;
    outline: 0;
    font-family: inherit;
    font-size: 11px;
}

.dg-search input[b-sqmkqlqns9]::placeholder { color: #95a4b8; }

.dg-search:focus-within[b-sqmkqlqns9],
.dg-filter:focus[b-sqmkqlqns9] {
    border-color: #8bc4ff;
    outline: 3px solid rgba(8,124,240,.08);
}

.dg-filter[b-sqmkqlqns9] {
    padding: 0 10px;
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
}

.dg-sort[b-sqmkqlqns9] { max-width: 160px; }

/* Table */

.dg-table-card[b-sqmkqlqns9] {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--dg-border);
    border-radius: 11px;
}

.dg-table-scroll[b-sqmkqlqns9] { width: 100%; overflow-x: auto; }

.dg-table[b-sqmkqlqns9] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 11px;
}

.dg-table th[b-sqmkqlqns9] {
    height: 42px;
    padding: 11px 10px;
    color: #314762;
    background: #f5f8fc;
    border-bottom: 1px solid #e6edf5;
    font-size: 10px;
    font-weight: 800;
    text-align: left;
    white-space: nowrap;
}

.dg-table td[b-sqmkqlqns9] {
    height: 46px;
    padding: 9px 10px;
    color: #314762;
    border-bottom: 1px solid #edf1f6;
    vertical-align: middle;
}

.dg-table tbody tr:last-child td[b-sqmkqlqns9] { border-bottom: 0; }
.dg-table tbody tr:hover[b-sqmkqlqns9] { background: #fbfdff; }
.dg-col-no[b-sqmkqlqns9] { width: 48px; text-align: center !important; }
.dg-col-action[b-sqmkqlqns9] { width: 125px; text-align: center !important; }

.dg-empty-state[b-sqmkqlqns9] {
    display: flex;
    min-height: 190px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 16px;
    text-align: center;
}

.dg-empty-icon[b-sqmkqlqns9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    margin-bottom: 3px;
    color: #4e9df0;
    background: #eef7ff;
    border-radius: 14px;
}

.dg-empty-icon svg[b-sqmkqlqns9] {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dg-empty-state strong[b-sqmkqlqns9] { color: #314762; font-size: 12px; }

.dg-empty-state span[b-sqmkqlqns9] {
    max-width: 300px;
    color: #8191a7;
    font-size: 11px;
    line-height: 1.6;
}

.dg-table-note[b-sqmkqlqns9] {
    margin: 10px 0 0;
    color: #8b9bb0;
    font-size: 10px;
    line-height: 1.6;
}

/* Responsive */

@media (min-width: 1400px) {
    .dg-welcome[b-sqmkqlqns9] { min-height: 190px; }
    .dg-stat-card[b-sqmkqlqns9] { min-height: 94px; padding: 17px; }
    .dg-table th[b-sqmkqlqns9] { height: 45px; }
    .dg-table td[b-sqmkqlqns9] { height: 49px; }
}

@media (max-width: 1050px) {
    .dg-stat-grid[b-sqmkqlqns9] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dg-welcome-art[b-sqmkqlqns9] { width: 48%; }
    .dg-table[b-sqmkqlqns9] { min-width: 690px; }
}

@media (max-width: 700px) {
    .dg-welcome[b-sqmkqlqns9] { min-height: 155px; padding: 18px; }
    .dg-welcome-content[b-sqmkqlqns9] { width: 65%; }
    .dg-eyebrow[b-sqmkqlqns9] { font-size: 8px; }
    .dg-greeting[b-sqmkqlqns9] { font-size: 12px; }
    .dg-welcome h1[b-sqmkqlqns9] { font-size: 25px; }
    .dg-class-name[b-sqmkqlqns9] { font-size: 11px; }
    .dg-welcome-art[b-sqmkqlqns9] { right: -12px; width: 58%; opacity: .75; }
    .dg-welcome-image[b-sqmkqlqns9] { object-position: 58% center; }

    .dg-stat-grid[b-sqmkqlqns9] { gap: 9px; }
    .dg-stat-card[b-sqmkqlqns9] { gap: 9px; min-height: 78px; padding: 11px; }
    .dg-stat-icon[b-sqmkqlqns9] { flex-basis: 32px; width: 32px; height: 32px; }
    .dg-stat-icon svg[b-sqmkqlqns9] { width: 18px; height: 18px; }
    .dg-stat-info strong[b-sqmkqlqns9] { font-size: 22px; }
    .dg-stat-info span[b-sqmkqlqns9] { font-size: 9px; }

    .dg-section-heading[b-sqmkqlqns9] { align-items: flex-start; flex-direction: column; gap: 10px; }
    .dg-section-heading h2[b-sqmkqlqns9] { font-size: 17px; }
    .dg-primary-button[b-sqmkqlqns9] { width: 100%; min-height: 41px; }
    .dg-toolbar[b-sqmkqlqns9] { grid-template-columns: 1fr 1fr; }
    .dg-search[b-sqmkqlqns9] { grid-column: 1 / -1; }
    .dg-filter[b-sqmkqlqns9], .dg-search[b-sqmkqlqns9] { min-height: 40px; }
    .dg-sort[b-sqmkqlqns9] { max-width: none; }
    .dg-table[b-sqmkqlqns9] { min-width: 690px; }
    .dg-empty-state[b-sqmkqlqns9] { min-height: 170px; }
}

@media (max-width: 380px) {
    .dg-welcome[b-sqmkqlqns9] { padding: 16px; }
    .dg-welcome-content[b-sqmkqlqns9] { width: 72%; }
    .dg-welcome h1[b-sqmkqlqns9] { font-size: 22px; }
    .dg-welcome-art[b-sqmkqlqns9] { right: -28px; opacity: .6; }
    .dg-stat-card[b-sqmkqlqns9] { gap: 7px; padding: 9px; }
    .dg-stat-icon[b-sqmkqlqns9] { flex-basis: 28px; width: 28px; height: 28px; }
    .dg-stat-info strong[b-sqmkqlqns9] { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .dg-wave[b-sqmkqlqns9], .dg-spinner[b-sqmkqlqns9] { animation: none; }
    .dg-primary-button[b-sqmkqlqns9] { transition: none; }
}


/* =========================================
   DASHBOARD GURU - FILTER & GRID ACTION FIX
   ========================================= */

/* Toolbar: tampilkan 5 filter dalam satu baris
   selama lebar layar masih mencukupi */
.dg-toolbar[b-sqmkqlqns9] {
    grid-template-columns: minmax(150px, 1.15fr) minmax(145px, .85fr) minmax(190px, 1.2fr) minmax(145px, .9fr) minmax(125px, .75fr);
    align-items: stretch;
    gap: 10px;
}

    .dg-toolbar > *[b-sqmkqlqns9] {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        height: 42px;
    }

/* Dropdown dan tanggal memiliki tinggi yang sama */
.dg-filter[b-sqmkqlqns9] {
    display: block;
    width: 100%;
    min-width: 0;
    height: 42px;
    margin: 0;
    padding: 0 12px;
    color: #314762;
    background-color: #fff;
    border: 1px solid #dce6f2;
    border-radius: 10px;
    font-family: inherit;
    font-size: 12px;
    line-height: normal;
    box-sizing: border-box;
    transition: border-color .18s ease, box-shadow .18s ease;
}

    .dg-filter:hover[b-sqmkqlqns9] {
        border-color: #b8cde5;
    }

    .dg-filter:focus[b-sqmkqlqns9] {
        border-color: #80baff;
        outline: none;
        box-shadow: 0 0 0 3px rgba(8, 124, 240, .09);
    }

/* Input tanggal: rapikan tampilan native browser */
.dg-toolbar input[type="date"].dg-filter[b-sqmkqlqns9] {
    display: block;
    appearance: auto;
    -webkit-appearance: auto;
    padding: 0 10px;
    color-scheme: light;
    cursor: pointer;
}

    .dg-toolbar input[type="date"].dg-filter[b-sqmkqlqns9]::-webkit-calendar-picker-indicator {
        cursor: pointer;
        opacity: .75;
    }

    .dg-toolbar input[type="date"].dg-filter[b-sqmkqlqns9]::-webkit-datetime-edit {
        padding: 0;
    }

/* Search mengikuti ukuran kontrol lainnya */
.dg-toolbar .dg-search[b-sqmkqlqns9] {
    display: flex;
    width: 100%;
    height: 42px;
    min-height: 42px;
    min-width: 0;
    box-sizing: border-box;
    border-radius: 10px;
}

    .dg-toolbar .dg-search input[b-sqmkqlqns9] {
        min-width: 0;
        height: 100%;
        font-size: 12px;
    }

.dg-toolbar .dg-sort[b-sqmkqlqns9] {
    max-width: none;
}

/* Tombol aksi dalam grid */
.dg-table .dg-action-button[b-sqmkqlqns9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 112px;
    min-height: 34px;
    padding: 7px 12px;
    color: #0874e8;
    background: #eef6ff;
    border: 1px solid #cfe4ff;
    border-radius: 8px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

    .dg-table .dg-action-button:hover[b-sqmkqlqns9] {
        color: #fff;
        background: #087cf0;
        border-color: #087cf0;
        box-shadow: 0 3px 8px rgba(8, 124, 240, .16);
    }

    .dg-table .dg-action-button:focus-visible[b-sqmkqlqns9] {
        outline: 3px solid rgba(8, 124, 240, .2);
        outline-offset: 2px;
    }

/* Badge status laporan */
.dg-status-final[b-sqmkqlqns9],
.dg-status-draft[b-sqmkqlqns9],
.dg-status-pending[b-sqmkqlqns9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    padding: 5px 10px;
    border: 1px solid transparent;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.dg-status-final[b-sqmkqlqns9] {
    color: #087b4b;
    background: #e8f8ef;
    border-color: #d0f0de;
}

.dg-status-draft[b-sqmkqlqns9] {
    color: #a76500;
    background: #fff5df;
    border-color: #f8e6b9;
}

.dg-status-pending[b-sqmkqlqns9] {
    color: #65758b;
    background: #f0f3f7;
    border-color: #e0e6ee;
}

/* Informasi siswa dalam sel tabel */
.dg-table .dg-student-name[b-sqmkqlqns9],
.dg-table td > div[b-sqmkqlqns9] {
    min-width: 0;
}

    .dg-table .dg-student-name strong[b-sqmkqlqns9],
    .dg-table td > div > strong[b-sqmkqlqns9] {
        display: block;
        color: #263f5d;
        font-size: 11px;
        font-weight: 700;
    }

    .dg-table .dg-student-name small[b-sqmkqlqns9],
    .dg-table td > div > small[b-sqmkqlqns9] {
        display: block;
        margin-top: 3px;
        color: #7b8da5;
        font-size: 10px;
        line-height: 1.4;
    }

/* Responsive toolbar */
@media (max-width: 1250px) {
    .dg-toolbar[b-sqmkqlqns9] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

        .dg-toolbar .dg-search[b-sqmkqlqns9] {
            grid-column: auto;
        }
}

@media (max-width: 700px) {
    .dg-toolbar[b-sqmkqlqns9] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

        .dg-toolbar .dg-search[b-sqmkqlqns9] {
            grid-column: 1 / -1;
        }

        .dg-toolbar > *[b-sqmkqlqns9],
        .dg-filter[b-sqmkqlqns9],
        .dg-toolbar .dg-search[b-sqmkqlqns9] {
            height: 42px;
            min-height: 42px;
        }

    .dg-table .dg-action-button[b-sqmkqlqns9] {
        min-width: 105px;
        min-height: 33px;
        padding: 7px 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dg-filter[b-sqmkqlqns9],
    .dg-table .dg-action-button[b-sqmkqlqns9] {
        transition: none;
    }
}
/* _content/DailyReport.Web/Components/Pages/Guru.razor.rz.scp.css */

.guru-page[b-c3r3ekhgvv] {
    min-height: 100%;
    padding: 28px clamp(16px, 3.6vw, 40px);
    color: #172b4d;
}

.guru-header[b-c3r3ekhgvv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
}

.guru-breadcrumb[b-c3r3ekhgvv] {
    margin-bottom: 8px;
    color: #8291a9;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}

.guru-header h3[b-c3r3ekhgvv] {
    margin: 0 0 6px;
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 750;
    letter-spacing: -.5px;
}

.guru-header p[b-c3r3ekhgvv],
.guru-list-header p[b-c3r3ekhgvv] {
    margin: 0;
    color: #77869e;
    font-size: 14px;
}

.guru-btn[b-c3r3ekhgvv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 9px;
    font: inherit;
    font-size: 14px;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

    .guru-btn:disabled[b-c3r3ekhgvv] {
        cursor: not-allowed;
        opacity: .6;
    }

.guru-btn-primary[b-c3r3ekhgvv] {
    background: #2864ed;
    color: #fff;
    box-shadow: 0 3px 8px rgb(40 100 237 / 12%);
}

    .guru-btn-primary:hover:not(:disabled)[b-c3r3ekhgvv] {
        background: #1e54d5;
        transform: translateY(-1px);
    }

.guru-btn-secondary[b-c3r3ekhgvv] {
    border-color: #dce4ef;
    background: #fff;
    color: #43536c;
}

    .guru-btn-secondary:hover:not(:disabled)[b-c3r3ekhgvv] {
        border-color: #b8c8df;
        background: #f8faff;
    }

.guru-stat-grid[b-c3r3ekhgvv] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 26px;
}

.guru-stat-card[b-c3r3ekhgvv] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    padding: 22px;
    border: 1px solid #e6ebf3;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 16px rgb(35 57 91 / 3%);
}

.guru-stat-icon[b-c3r3ekhgvv] {
    display: flex;
    flex: 0 0 50px;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 13px;
    font-size: 23px;
}

.guru-icon-blue[b-c3r3ekhgvv] {
    background: #e8f0ff;
    color: #2864ed;
}

.guru-icon-green[b-c3r3ekhgvv] {
    background: #e4f9ed;
    color: #159957;
}

.guru-icon-orange[b-c3r3ekhgvv] {
    background: #fff3df;
    color: #d88717;
}

.guru-stat-content[b-c3r3ekhgvv] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

    .guru-stat-content > span[b-c3r3ekhgvv] {
        color: #75849b;
        font-size: 13px;
    }

    .guru-stat-content > strong[b-c3r3ekhgvv] {
        color: #172b4d;
        font-size: 28px;
        font-weight: 750;
        line-height: 1.2;
    }

    .guru-stat-content > small[b-c3r3ekhgvv] {
        color: #98a3b5;
        font-size: 11px;
    }

.guru-list-card[b-c3r3ekhgvv] {
    overflow: hidden;
    border: 1px solid #e4eaf2;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 18px rgb(35 57 91 / 3%);
}

.guru-list-header[b-c3r3ekhgvv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 18px;
}

    .guru-list-header h4[b-c3r3ekhgvv] {
        margin: 0 0 5px;
        color: #172b4d;
        font-size: 17px;
        font-weight: 750;
    }

.guru-total-badge[b-c3r3ekhgvv] {
    padding: 6px 11px;
    border: 1px solid #e1e9f8;
    border-radius: 8px;
    background: #f2f6ff;
    color: #315db4;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.guru-toolbar[b-c3r3ekhgvv] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 24px 20px;
}

.guru-search-box[b-c3r3ekhgvv] {
    display: flex;
    flex: 1 1 300px;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 43px;
    padding: 0 13px;
    border: 1px solid #dfe6f0;
    border-radius: 9px;
    background: #fff;
    color: #8a99af;
    transition: border-color .18s ease, box-shadow .18s ease;
}

    .guru-search-box:focus-within[b-c3r3ekhgvv] {
        border-color: #80a7ff;
        box-shadow: 0 0 0 3px rgb(40 100 237 / 8%);
    }

    .guru-search-box > i[b-c3r3ekhgvv] {
        flex-shrink: 0;
        font-size: 15px;
    }

    .guru-search-box input[b-c3r3ekhgvv] {
        width: 100%;
        min-width: 0;
        padding: 10px 0;
        border: 0;
        outline: 0;
        background: transparent;
        color: #172b4d;
        font: inherit;
        font-size: 13px;
    }

        .guru-search-box input[b-c3r3ekhgvv]::placeholder {
            color: #9aa7ba;
        }

    .guru-search-box > button[b-c3r3ekhgvv] {
        border: 0;
        background: transparent;
        color: #8291a9;
        font-size: 22px;
        cursor: pointer;
    }

.guru-filter[b-c3r3ekhgvv] {
    min-width: 155px;
    min-height: 43px;
    padding: 0 12px;
    border: 1px solid #dfe6f0;
    border-radius: 9px;
    outline: 0;
    background: #fff;
    color: #43536c;
    font: inherit;
    font-size: 13px;
}

    .guru-filter:focus[b-c3r3ekhgvv] {
        border-color: #80a7ff;
    }

.guru-toolbar .guru-btn[b-c3r3ekhgvv] {
    min-height: 43px;
    font-size: 13px;
}

.guru-table-wrapper[b-c3r3ekhgvv] {
    width: 100%;
    overflow-x: auto;
}

.guru-table[b-c3r3ekhgvv] {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

    .guru-table thead[b-c3r3ekhgvv] {
        background: #f7f9fc;
    }

    .guru-table th[b-c3r3ekhgvv] {
        padding: 15px 18px;
        border-top: 1px solid #edf0f5;
        border-bottom: 1px solid #e7ecf3;
        color: #52627b;
        font-size: 12px;
        font-weight: 750;
        white-space: nowrap;
    }

    .guru-table td[b-c3r3ekhgvv] {
        padding: 16px 18px;
        border-bottom: 1px solid #edf0f5;
        color: #364760;
        font-size: 13px;
        vertical-align: middle;
    }

    .guru-table tbody tr:last-child td[b-c3r3ekhgvv] {
        border-bottom: 0;
    }

    .guru-table tbody tr[b-c3r3ekhgvv] {
        transition: background .15s ease;
    }

        .guru-table tbody tr:hover[b-c3r3ekhgvv] {
            background: #f8faff;
        }

.guru-no-column[b-c3r3ekhgvv] {
    width: 65px;
}

.guru-action-column[b-c3r3ekhgvv] {
    width: 110px;
}

.guru-person[b-c3r3ekhgvv] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 170px;
}

.guru-avatar[b-c3r3ekhgvv] {
    display: flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid #d8e6ff;
    border-radius: 11px;
    background: #eaf1ff;
    color: #2864ed;
    font-size: 12px;
    font-weight: 750;
}

.guru-person-name[b-c3r3ekhgvv] {
    color: #243651;
    font-weight: 650;
}

.guru-nip[b-c3r3ekhgvv] {
    color: #61718a;
    font-variant-numeric: tabular-nums;
}

.guru-date[b-c3r3ekhgvv] {
    color: #74839a;
    white-space: nowrap;
}

.guru-status[b-c3r3ekhgvv] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
}

.guru-status-dot[b-c3r3ekhgvv] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.guru-status.is-active[b-c3r3ekhgvv] {
    background: #e3f8eb;
    color: #16834c;
}

.guru-status.is-inactive[b-c3r3ekhgvv] {
    background: #f0f2f5;
    color: #6b7280;
}

.guru-btn-edit[b-c3r3ekhgvv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid #cfe0ff;
    border-radius: 8px;
    background: #f2f6ff;
    color: #285bc5;
    font: inherit;
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
}

    .guru-btn-edit:hover[b-c3r3ekhgvv] {
        border-color: #9ebdff;
        background: #e6eeff;
    }

.guru-empty[b-c3r3ekhgvv] {
    display: flex;
    min-height: 180px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 28px;
    color: #8a99af;
    text-align: center;
}

    .guru-empty > i[b-c3r3ekhgvv] {
        font-size: 30px;
    }

    .guru-empty strong[b-c3r3ekhgvv] {
        color: #43536c;
        font-size: 14px;
    }

    .guru-empty p[b-c3r3ekhgvv] {
        margin: 0;
        font-size: 12px;
    }

.guru-spinner[b-c3r3ekhgvv] {
    display: inline-block;
    width: 17px;
    height: 17px;
    border: 2px solid #d6e1f5;
    border-top-color: #2864ed;
    border-radius: 50%;
    animation: guru-spin-b-c3r3ekhgvv .7s linear infinite;
}

.guru-spinner-white[b-c3r3ekhgvv] {
    border-color: rgb(255 255 255 / 35%);
    border-top-color: #fff;
}

@keyframes guru-spin-b-c3r3ekhgvv {
    to {
        transform: rotate(360deg);
    }
}

.guru-alert[b-c3r3ekhgvv] {
    margin-bottom: 18px;
    padding: 12px 15px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.guru-alert-error[b-c3r3ekhgvv] {
    border-color: #fecaca;
    background: #fff1f1;
    color: #a52828;
}

.guru-alert-success[b-c3r3ekhgvv] {
    border-color: #bcebd0;
    background: #effbf4;
    color: #187744;
}

/* Modal */

.guru-modal-backdrop[b-c3r3ekhgvv] {
    position: fixed;
    z-index: 1050;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    background: rgb(16 31 56 / 48%);
    backdrop-filter: blur(3px);
}

.guru-modal[b-c3r3ekhgvv] {
    width: 100%;
    max-width: 510px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    border: 1px solid rgb(255 255 255 / 70%);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 70px rgb(20 39 70 / 22%);
    animation: guru-modal-in-b-c3r3ekhgvv .18s ease-out;
}

@keyframes guru-modal-in-b-c3r3ekhgvv {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.99);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.guru-modal-header[b-c3r3ekhgvv] {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 23px 24px;
    border-bottom: 1px solid #edf0f5;
}

.guru-modal-heading-icon[b-c3r3ekhgvv] {
    display: flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #eaf1ff;
    color: #2864ed;
    font-size: 21px;
}

.guru-modal-heading[b-c3r3ekhgvv] {
    flex: 1;
    min-width: 0;
}

    .guru-modal-heading h4[b-c3r3ekhgvv] {
        margin: 0 0 5px;
        color: #172b4d;
        font-size: 18px;
        font-weight: 750;
    }

    .guru-modal-heading p[b-c3r3ekhgvv] {
        margin: 0;
        color: #8290a5;
        font-size: 12px;
    }

.guru-modal-close[b-c3r3ekhgvv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #8290a5;
    font-size: 25px;
    cursor: pointer;
}

    .guru-modal-close:hover[b-c3r3ekhgvv] {
        background: #f1f4f9;
        color: #34445d;
    }

.guru-modal-body[b-c3r3ekhgvv] {
    display: grid;
    gap: 21px;
    padding: 24px;
}

.guru-form-group[b-c3r3ekhgvv] {
    display: grid;
    gap: 8px;
}

    .guru-form-group > label[b-c3r3ekhgvv] {
        color: #35455e;
        font-size: 13px;
        font-weight: 700;
    }

.guru-required[b-c3r3ekhgvv] {
    color: #e5484d;
}

.guru-form-control[b-c3r3ekhgvv] {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 11px 13px;
    border: 1px solid #dce4ef;
    border-radius: 9px;
    outline: 0;
    background: #fff;
    color: #243651;
    font: inherit;
    font-size: 13px;
    transition: border-color .18s ease, box-shadow .18s ease;
}

    .guru-form-control:focus[b-c3r3ekhgvv] {
        border-color: #80a7ff;
        box-shadow: 0 0 0 3px rgb(40 100 237 / 9%);
    }

    .guru-form-control[b-c3r3ekhgvv]::placeholder {
        color: #a1adbd;
    }

.guru-form-group small[b-c3r3ekhgvv] {
    color: #8a99af;
    font-size: 11px;
}

.guru-form-group[b-c3r3ekhgvv]  .validation-message {
    color: #dc2626;
    font-size: 12px;
}

/* Switch status aktif/nonaktif */

.guru-active-panel[b-c3r3ekhgvv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border: 1px solid #e4eaf3;
    border-radius: 11px;
    background: #f8faff;
}

.guru-active-info[b-c3r3ekhgvv] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .guru-active-info strong[b-c3r3ekhgvv] {
        color: #35455e;
        font-size: 13px;
        font-weight: 700;
    }

    .guru-active-info span[b-c3r3ekhgvv] {
        color: #8492a7;
        font-size: 11px;
        line-height: 1.5;
    }

.guru-switch[b-c3r3ekhgvv] {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    width: 48px;
    height: 27px;
    cursor: pointer;
}

.guru-switch-input[b-c3r3ekhgvv] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.guru-switch-track[b-c3r3ekhgvv] {
    position: absolute;
    inset: 0;
    border: 1px solid #d1d9e5;
    border-radius: 999px;
    background: #dce2eb;
    transition: background .2s ease, border-color .2s ease;
}

    .guru-switch-track[b-c3r3ekhgvv]::before {
        position: absolute;
        top: 3px;
        left: 3px;
        width: 19px;
        height: 19px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 3px rgb(15 23 42 / 20%);
        content: "";
        transition: transform .2s ease;
    }

.guru-switch-input:checked + .guru-switch-track[b-c3r3ekhgvv] {
    border-color: #2864ed;
    background: #2864ed;
}

    .guru-switch-input:checked + .guru-switch-track[b-c3r3ekhgvv]::before {
        transform: translateX(21px);
    }

.guru-switch-input:focus-visible + .guru-switch-track[b-c3r3ekhgvv] {
    outline: 3px solid rgb(40 100 237 / 20%);
    outline-offset: 3px;
}

.guru-switch-input:disabled + .guru-switch-track[b-c3r3ekhgvv] {
    cursor: not-allowed;
    opacity: .6;
}

.guru-modal-footer[b-c3r3ekhgvv] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 17px 24px;
    border-top: 1px solid #edf0f5;
    background: #fbfcfe;
}

@media (max-width: 900px) {
    .guru-stat-grid[b-c3r3ekhgvv] {
        gap: 12px;
    }

    .guru-stat-card[b-c3r3ekhgvv] {
        gap: 12px;
        padding: 17px;
    }

    .guru-stat-icon[b-c3r3ekhgvv] {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        font-size: 20px;
    }

    .guru-toolbar[b-c3r3ekhgvv] {
        flex-wrap: wrap;
    }

    .guru-search-box[b-c3r3ekhgvv] {
        flex-basis: 100%;
    }
}

@media (max-width: 640px) {
    .guru-page[b-c3r3ekhgvv] {
        padding: 20px 14px;
    }

    .guru-header[b-c3r3ekhgvv] {
        align-items: flex-start;
        gap: 12px;
    }

        .guru-header h3[b-c3r3ekhgvv] {
            font-size: 22px;
        }

        .guru-header p[b-c3r3ekhgvv] {
            max-width: 230px;
            line-height: 1.6;
        }

        .guru-header > .guru-btn[b-c3r3ekhgvv] {
            padding: 9px 11px;
            font-size: 12px;
        }

    .guru-stat-grid[b-c3r3ekhgvv] {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 20px;
    }

    .guru-stat-card[b-c3r3ekhgvv] {
        padding: 15px;
    }

    .guru-stat-content > strong[b-c3r3ekhgvv] {
        font-size: 23px;
    }

    .guru-list-header[b-c3r3ekhgvv] {
        padding: 18px 16px;
    }

    .guru-toolbar[b-c3r3ekhgvv] {
        align-items: stretch;
        padding: 0 16px 18px;
    }

        .guru-search-box[b-c3r3ekhgvv],
        .guru-filter[b-c3r3ekhgvv],
        .guru-toolbar .guru-btn[b-c3r3ekhgvv] {
            width: 100%;
            box-sizing: border-box;
        }

    .guru-table[b-c3r3ekhgvv] {
        min-width: 700px;
    }

        .guru-table th[b-c3r3ekhgvv],
        .guru-table td[b-c3r3ekhgvv] {
            padding: 13px 14px;
        }

    .guru-modal-backdrop[b-c3r3ekhgvv] {
        align-items: flex-start;
        padding: 12px;
    }

    .guru-modal[b-c3r3ekhgvv] {
        max-height: calc(100vh - 24px);
        border-radius: 13px;
    }

    .guru-modal-header[b-c3r3ekhgvv] {
        padding: 18px;
    }

    .guru-modal-body[b-c3r3ekhgvv] {
        padding: 20px 18px;
    }

    .guru-modal-footer[b-c3r3ekhgvv] {
        padding: 15px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .guru-page *[b-c3r3ekhgvv],
    .guru-page *[b-c3r3ekhgvv]::before,
    .guru-page *[b-c3r3ekhgvv]::after,
    .guru-modal[b-c3r3ekhgvv],
    .guru-spinner[b-c3r3ekhgvv] {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}
/* _content/DailyReport.Web/Components/Pages/GuruKelas.razor.rz.scp.css */

.gk-page[b-3cca8i4nrd] {
    min-height: 100%;
    padding: 28px clamp(16px, 3.6vw, 40px);
    color: #172b4d;
}

.gk-header[b-3cca8i4nrd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
}

.gk-breadcrumb[b-3cca8i4nrd] {
    margin-bottom: 8px;
    color: #8291a9;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}

.gk-header h3[b-3cca8i4nrd] {
    margin: 0 0 6px;
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 750;
    letter-spacing: -.5px;
}

.gk-header p[b-3cca8i4nrd],
.gk-list-header p[b-3cca8i4nrd] {
    margin: 0;
    color: #77869e;
    font-size: 14px;
}

.gk-btn[b-3cca8i4nrd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 9px;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
}

    .gk-btn:disabled[b-3cca8i4nrd] {
        cursor: not-allowed;
        opacity: .6;
    }

.gk-btn-primary[b-3cca8i4nrd] {
    background: #2864ed;
    color: #fff;
    box-shadow: 0 3px 8px rgb(40 100 237 / 12%);
}

    .gk-btn-primary:hover:not(:disabled)[b-3cca8i4nrd] {
        background: #1e54d5;
    }

.gk-btn-secondary[b-3cca8i4nrd] {
    border-color: #dce4ef;
    background: #fff;
    color: #43536c;
}

    .gk-btn-secondary:hover:not(:disabled)[b-3cca8i4nrd] {
        background: #f8faff;
    }

.gk-stat-grid[b-3cca8i4nrd] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 26px;
}

.gk-stat-card[b-3cca8i4nrd] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    padding: 22px;
    border: 1px solid #e6ebf3;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 16px rgb(35 57 91 / 3%);
}

.gk-stat-icon[b-3cca8i4nrd] {
    display: flex;
    flex: 0 0 50px;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 13px;
    font-size: 23px;
}

.gk-icon-blue[b-3cca8i4nrd] {
    background: #e8f0ff;
    color: #2864ed;
}

.gk-icon-green[b-3cca8i4nrd] {
    background: #e4f9ed;
    color: #159957;
}

.gk-icon-orange[b-3cca8i4nrd] {
    background: #fff3df;
    color: #d88717;
}

.gk-stat-content[b-3cca8i4nrd] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

    .gk-stat-content > span[b-3cca8i4nrd] {
        color: #75849b;
        font-size: 13px;
    }

    .gk-stat-content > strong[b-3cca8i4nrd] {
        color: #172b4d;
        font-size: 28px;
        font-weight: 750;
        line-height: 1.2;
    }

    .gk-stat-content > small[b-3cca8i4nrd] {
        color: #98a3b5;
        font-size: 11px;
    }

.gk-list-card[b-3cca8i4nrd] {
    overflow: hidden;
    border: 1px solid #e4eaf2;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 18px rgb(35 57 91 / 3%);
}

.gk-list-header[b-3cca8i4nrd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 18px;
}

    .gk-list-header h4[b-3cca8i4nrd] {
        margin: 0 0 5px;
        color: #172b4d;
        font-size: 17px;
        font-weight: 750;
    }

.gk-total-badge[b-3cca8i4nrd] {
    padding: 6px 11px;
    border: 1px solid #e1e9f8;
    border-radius: 8px;
    background: #f2f6ff;
    color: #315db4;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.gk-toolbar[b-3cca8i4nrd] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 24px 20px;
}

.gk-search-box[b-3cca8i4nrd] {
    display: flex;
    flex: 1 1 300px;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 43px;
    padding: 0 13px;
    border: 1px solid #dfe6f0;
    border-radius: 9px;
    background: #fff;
    color: #8a99af;
}

    .gk-search-box:focus-within[b-3cca8i4nrd] {
        border-color: #80a7ff;
        box-shadow: 0 0 0 3px rgb(40 100 237 / 8%);
    }

    .gk-search-box > i[b-3cca8i4nrd] {
        flex-shrink: 0;
        font-size: 15px;
    }

    .gk-search-box input[b-3cca8i4nrd] {
        width: 100%;
        min-width: 0;
        padding: 10px 0;
        border: 0;
        outline: 0;
        background: transparent;
        color: #172b4d;
        font: inherit;
        font-size: 13px;
    }

        .gk-search-box input[b-3cca8i4nrd]::placeholder {
            color: #9aa7ba;
        }

    .gk-search-box > button[b-3cca8i4nrd] {
        border: 0;
        background: transparent;
        color: #8291a9;
        font-size: 22px;
        cursor: pointer;
    }

.gk-filter[b-3cca8i4nrd] {
    min-width: 150px;
    min-height: 43px;
    padding: 0 12px;
    border: 1px solid #dfe6f0;
    border-radius: 9px;
    outline: 0;
    background: #fff;
    color: #43536c;
    font: inherit;
    font-size: 13px;
}

.gk-toolbar .gk-btn[b-3cca8i4nrd] {
    min-height: 43px;
}

.gk-table-wrapper[b-3cca8i4nrd] {
    width: 100%;
    overflow-x: auto;
}

.gk-table[b-3cca8i4nrd] {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

    .gk-table thead[b-3cca8i4nrd] {
        background: #f7f9fc;
    }

    .gk-table th[b-3cca8i4nrd] {
        padding: 15px 18px;
        border-top: 1px solid #edf0f5;
        border-bottom: 1px solid #e7ecf3;
        color: #52627b;
        font-size: 12px;
        font-weight: 750;
        white-space: nowrap;
    }

    .gk-table td[b-3cca8i4nrd] {
        padding: 16px 18px;
        border-bottom: 1px solid #edf0f5;
        color: #364760;
        font-size: 13px;
        vertical-align: middle;
    }

    .gk-table tbody tr:last-child td[b-3cca8i4nrd] {
        border-bottom: 0;
    }

    .gk-table tbody tr:hover[b-3cca8i4nrd] {
        background: #f8faff;
    }

.gk-person[b-3cca8i4nrd] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 170px;
}

.gk-avatar[b-3cca8i4nrd] {
    display: flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid #d8e6ff;
    border-radius: 11px;
    background: #eaf1ff;
    color: #2864ed;
    font-size: 12px;
    font-weight: 750;
}

.gk-person-info[b-3cca8i4nrd],
.gk-class-info[b-3cca8i4nrd] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .gk-person-info strong[b-3cca8i4nrd],
    .gk-class-info strong[b-3cca8i4nrd] {
        color: #243651;
        font-weight: 650;
    }

    .gk-person-info small[b-3cca8i4nrd],
    .gk-class-info small[b-3cca8i4nrd] {
        color: #8a99af;
        font-size: 11px;
    }

.gk-status[b-3cca8i4nrd] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
}

.gk-status-dot[b-3cca8i4nrd] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.gk-status.is-active[b-3cca8i4nrd] {
    background: #e3f8eb;
    color: #16834c;
}

.gk-status.is-inactive[b-3cca8i4nrd] {
    background: #f0f2f5;
    color: #6b7280;
}

.gk-btn-edit[b-3cca8i4nrd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid #dce4ef;
    border-radius: 8px;
    background: #fff;
    color: #52627b;
    font: inherit;
    font-size: 11px;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
}

    .gk-btn-edit:hover:not(:disabled)[b-3cca8i4nrd] {
        border-color: #b7caff;
        background: #f2f6ff;
        color: #285bc5;
    }

    .gk-btn-edit:disabled[b-3cca8i4nrd] {
        cursor: wait;
        opacity: .6;
    }

.gk-empty[b-3cca8i4nrd] {
    display: flex;
    min-height: 180px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 28px;
    color: #8a99af;
    text-align: center;
}

    .gk-empty > i[b-3cca8i4nrd] {
        font-size: 30px;
    }

    .gk-empty strong[b-3cca8i4nrd] {
        color: #43536c;
        font-size: 14px;
    }

    .gk-empty p[b-3cca8i4nrd] {
        margin: 0;
        font-size: 12px;
    }

.gk-spinner[b-3cca8i4nrd] {
    display: inline-block;
    width: 17px;
    height: 17px;
    border: 2px solid #d6e1f5;
    border-top-color: #2864ed;
    border-radius: 50%;
    animation: gk-spin-b-3cca8i4nrd .7s linear infinite;
}

.gk-spinner-white[b-3cca8i4nrd] {
    border-color: rgb(255 255 255 / 35%);
    border-top-color: #fff;
}

@keyframes gk-spin-b-3cca8i4nrd {
    to {
        transform: rotate(360deg);
    }
}

.gk-alert[b-3cca8i4nrd] {
    margin-bottom: 18px;
    padding: 12px 15px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.gk-alert-error[b-3cca8i4nrd] {
    border-color: #fecaca;
    background: #fff1f1;
    color: #a52828;
}

.gk-alert-success[b-3cca8i4nrd] {
    border-color: #bcebd0;
    background: #effbf4;
    color: #187744;
}

/* Modal */

.gk-modal-backdrop[b-3cca8i4nrd] {
    position: fixed;
    z-index: 1050;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    background: rgb(16 31 56 / 48%);
    backdrop-filter: blur(3px);
}

.gk-modal[b-3cca8i4nrd] {
    width: 100%;
    max-width: 510px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 70px rgb(20 39 70 / 22%);
}

.gk-modal-header[b-3cca8i4nrd] {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 23px 24px;
    border-bottom: 1px solid #edf0f5;
}

.gk-modal-heading-icon[b-3cca8i4nrd] {
    display: flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #eaf1ff;
    color: #2864ed;
    font-size: 21px;
}

.gk-modal-heading[b-3cca8i4nrd] {
    flex: 1;
    min-width: 0;
}

    .gk-modal-heading h4[b-3cca8i4nrd] {
        margin: 0 0 5px;
        color: #172b4d;
        font-size: 18px;
        font-weight: 750;
    }

    .gk-modal-heading p[b-3cca8i4nrd] {
        margin: 0;
        color: #8290a5;
        font-size: 12px;
    }

.gk-modal-close[b-3cca8i4nrd] {
    width: 33px;
    height: 33px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #8290a5;
    font-size: 25px;
    cursor: pointer;
}

    .gk-modal-close:hover[b-3cca8i4nrd] {
        background: #f1f4f9;
    }

.gk-modal-body[b-3cca8i4nrd] {
    display: grid;
    gap: 21px;
    padding: 24px;
}

.gk-form-group[b-3cca8i4nrd] {
    display: grid;
    gap: 8px;
}

    .gk-form-group > label[b-3cca8i4nrd] {
        color: #35455e;
        font-size: 13px;
        font-weight: 700;
    }

        .gk-form-group > label span[b-3cca8i4nrd] {
            color: #e5484d;
        }

.gk-form-control[b-3cca8i4nrd] {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 11px 13px;
    border: 1px solid #dce4ef;
    border-radius: 9px;
    outline: 0;
    background: #fff;
    color: #243651;
    font: inherit;
    font-size: 13px;
}

    .gk-form-control:focus[b-3cca8i4nrd] {
        border-color: #80a7ff;
        box-shadow: 0 0 0 3px rgb(40 100 237 / 9%);
    }

.gk-form-group[b-3cca8i4nrd]  .validation-message {
    color: #dc2626;
    font-size: 12px;
}

.gk-info-note[b-3cca8i4nrd] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px;
    border: 1px solid #dce8ff;
    border-radius: 9px;
    background: #f3f7ff;
    color: #4a6697;
    font-size: 12px;
    line-height: 1.6;
}

    .gk-info-note > i[b-3cca8i4nrd] {
        flex-shrink: 0;
        color: #2864ed;
        font-size: 16px;
    }

.gk-modal-footer[b-3cca8i4nrd] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 17px 24px;
    border-top: 1px solid #edf0f5;
    background: #fbfcfe;
}

@media (max-width: 900px) {
    .gk-stat-grid[b-3cca8i4nrd] {
        gap: 12px;
    }

    .gk-stat-card[b-3cca8i4nrd] {
        gap: 12px;
        padding: 17px;
    }

    .gk-stat-icon[b-3cca8i4nrd] {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        font-size: 20px;
    }

    .gk-toolbar[b-3cca8i4nrd] {
        flex-wrap: wrap;
    }

    .gk-search-box[b-3cca8i4nrd] {
        flex-basis: 100%;
    }
}

@media (max-width: 640px) {
    .gk-page[b-3cca8i4nrd] {
        padding: 20px 14px;
    }

    .gk-header[b-3cca8i4nrd] {
        align-items: flex-start;
        gap: 12px;
    }

        .gk-header h3[b-3cca8i4nrd] {
            font-size: 22px;
        }

        .gk-header > .gk-btn[b-3cca8i4nrd] {
            padding: 9px 11px;
            font-size: 12px;
        }

    .gk-stat-grid[b-3cca8i4nrd] {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 20px;
    }

    .gk-stat-card[b-3cca8i4nrd] {
        padding: 15px;
    }

    .gk-stat-content > strong[b-3cca8i4nrd] {
        font-size: 23px;
    }

    .gk-list-header[b-3cca8i4nrd] {
        padding: 18px 16px;
    }

    .gk-toolbar[b-3cca8i4nrd] {
        align-items: stretch;
        padding: 0 16px 18px;
    }

        .gk-search-box[b-3cca8i4nrd],
        .gk-filter[b-3cca8i4nrd],
        .gk-toolbar .gk-btn[b-3cca8i4nrd] {
            box-sizing: border-box;
            width: 100%;
        }

    .gk-table[b-3cca8i4nrd] {
        min-width: 760px;
    }

        .gk-table th[b-3cca8i4nrd],
        .gk-table td[b-3cca8i4nrd] {
            padding: 13px 14px;
        }

    .gk-modal-backdrop[b-3cca8i4nrd] {
        align-items: flex-start;
        padding: 12px;
    }

    .gk-modal[b-3cca8i4nrd] {
        max-height: calc(100vh - 24px);
        border-radius: 13px;
    }

    .gk-modal-header[b-3cca8i4nrd] {
        padding: 18px;
    }

    .gk-modal-body[b-3cca8i4nrd] {
        padding: 20px 18px;
    }

    .gk-modal-footer[b-3cca8i4nrd] {
        padding: 15px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gk-spinner[b-3cca8i4nrd] {
        animation-duration: .01ms !important;
    }
}


/* =========================================
   GURU KELAS - ROLE & ACTIONS
   ========================================= */

.gk-action-group[b-3cca8i4nrd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.gk-status.is-wali[b-3cca8i4nrd] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 20px;
    background: #fff4d6;
    color: #946200;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.gk-status.is-pengajar[b-3cca8i4nrd] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 20px;
    background: #eef2f7;
    color: #526174;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.gk-wali-option[b-3cca8i4nrd] {
    padding: 14px;
    border: 1px solid #dce5f0;
    border-radius: 10px;
    background: #f8fafc;
}

.gk-checkbox-label[b-3cca8i4nrd] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    cursor: pointer;
}

    .gk-checkbox-label input[b-3cca8i4nrd] {
        width: 17px;
        height: 17px;
        margin-top: 3px;
        flex-shrink: 0;
        accent-color: #2563eb;
    }

    .gk-checkbox-label span[b-3cca8i4nrd] {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .gk-checkbox-label strong[b-3cca8i4nrd] {
        color: #1e293b;
        font-size: 14px;
    }

    .gk-checkbox-label small[b-3cca8i4nrd] {
        color: #64748b;
        font-size: 12px;
        line-height: 1.5;
    }

.gk-modal-body .validation-summary-valid[b-3cca8i4nrd] {
    display: none;
}

.gk-modal-body .validation-summary-errors[b-3cca8i4nrd] {
    margin-bottom: 14px;
    padding: 10px 14px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 13px;
}

.gk-modal-body .validation-message[b-3cca8i4nrd] {
    display: block;
    margin-top: 5px;
    color: #dc2626;
    font-size: 12px;
}

@media (max-width: 768px) {
    .gk-action-group[b-3cca8i4nrd] {
        min-width: 140px;
        flex-direction: column;
        align-items: stretch;
    }

        .gk-action-group .gk-btn-edit[b-3cca8i4nrd] {
            justify-content: center;
            white-space: nowrap;
        }

    .gk-status.is-wali[b-3cca8i4nrd],
    .gk-status.is-pengajar[b-3cca8i4nrd] {
        white-space: nowrap;
    }
}
/* _content/DailyReport.Web/Components/Pages/Kelas.razor.rz.scp.css */

/* =========================================
   DAILY REPORT - MASTER KELAS
   Kiddy Place Fitrah Hanniah
   ========================================= */

.kelas-page[b-zbmisgmjyy] {
    --kelas-primary: #087cf0;
    --kelas-primary-dark: #0668cf;
    --kelas-text: #172f52;
    --kelas-muted: #7889a1;
    --kelas-border: #e5edf6;
    --kelas-background: #f4f8fd;
    --kelas-white: #fff;
    width: 100%;
    min-width: 0;
    color: var(--kelas-text);
    font-family: "Segoe UI", Arial, sans-serif;
}

/* Heading */

.kelas-heading[b-zbmisgmjyy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 23px;
}

.kelas-heading-copy[b-zbmisgmjyy] {
    min-width: 0;
}

.kelas-eyebrow[b-zbmisgmjyy] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    color: #8395ad;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.kelas-eyebrow-dot[b-zbmisgmjyy] {
    width: 7px;
    height: 7px;
    background: #6bc994;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #e8f8ee;
}

.kelas-heading h1[b-zbmisgmjyy] {
    margin: 0;
    color: var(--kelas-text);
    font-size: clamp(24px, 2.2vw, 31px);
    font-weight: 800;
    letter-spacing: -0.9px;
    line-height: 1.25;
}

.kelas-title-emoji[b-zbmisgmjyy] {
    display: inline-block;
    margin-left: 4px;
    font-size: 24px;
    vertical-align: 2px;
}

.kelas-heading-copy > p[b-zbmisgmjyy] {
    margin: 8px 0 0;
    color: var(--kelas-muted);
    font-size: 12px;
    line-height: 1.6;
}

/* Buttons */

.kelas-btn[b-zbmisgmjyy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 11px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}

    .kelas-btn:disabled[b-zbmisgmjyy] {
        opacity: .6;
        cursor: not-allowed;
        transform: none;
    }

.kelas-btn-primary[b-zbmisgmjyy] {
    color: #fff;
    background: linear-gradient(135deg, #1688fa, #0870e4);
    box-shadow: 0 5px 13px rgba(8, 124, 240, .17);
}

    .kelas-btn-primary:hover:not(:disabled)[b-zbmisgmjyy] {
        background: linear-gradient(135deg, #087cf0, #075fbd);
        box-shadow: 0 8px 18px rgba(8, 124, 240, .23);
        transform: translateY(-1px);
    }

.kelas-btn-icon[b-zbmisgmjyy] {
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
}

.kelas-btn-light[b-zbmisgmjyy] {
    color: #506681;
    background: #fff;
    border-color: var(--kelas-border);
}

    .kelas-btn-light:hover:not(:disabled)[b-zbmisgmjyy] {
        color: var(--kelas-primary-dark);
        background: #f4f9ff;
        border-color: #cfe3ff;
    }

.kelas-btn-search[b-zbmisgmjyy] {
    min-width: 100px;
    color: #fff;
    background: #197ff0;
}

    .kelas-btn-search:hover:not(:disabled)[b-zbmisgmjyy] {
        background: #0769d0;
    }

.kelas-refresh-icon[b-zbmisgmjyy] {
    font-size: 18px;
    line-height: 1;
}

/* Alerts */

.kelas-alert[b-zbmisgmjyy] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 17px;
    padding: 12px 14px;
    border: 1px solid;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.6;
}

.kelas-alert-icon[b-zbmisgmjyy] {
    display: flex;
    flex: 0 0 21px;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
}

.kelas-alert-success[b-zbmisgmjyy] {
    color: #187747;
    background: #effbf4;
    border-color: #d3f2df;
}

    .kelas-alert-success .kelas-alert-icon[b-zbmisgmjyy] {
        color: #fff;
        background: #2bb875;
    }

.kelas-alert-error[b-zbmisgmjyy] {
    color: #ad3445;
    background: #fff3f4;
    border-color: #ffd9df;
}

    .kelas-alert-error .kelas-alert-icon[b-zbmisgmjyy] {
        color: #fff;
        background: #ef6878;
    }

.kelas-alert-close[b-zbmisgmjyy] {
    margin-left: auto;
    padding: 0 3px;
    color: inherit;
    background: transparent;
    border: 0;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

/* Summary cards */

.kelas-summary[b-zbmisgmjyy] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 22px;
}

.kelas-summary-card[b-zbmisgmjyy] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    min-height: 105px;
    padding: 17px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 16px;
    transition: transform .2s ease, box-shadow .2s ease;
}

    .kelas-summary-card[b-zbmisgmjyy]::after {
        position: absolute;
        right: -20px;
        bottom: -32px;
        width: 100px;
        height: 100px;
        border: 16px solid rgba(255, 255, 255, .3);
        border-radius: 50%;
        content: "";
        pointer-events: none;
    }

    .kelas-summary-card:hover[b-zbmisgmjyy] {
        box-shadow: 0 8px 22px rgba(41, 74, 117, .07);
        transform: translateY(-2px);
    }

.summary-blue[b-zbmisgmjyy] {
    background: linear-gradient(120deg, #eaf5ff, #f1f8ff);
    border-color: #e1efff;
}

.summary-green[b-zbmisgmjyy] {
    background: linear-gradient(120deg, #eaf9f0, #f2fbf5);
    border-color: #e0f3e7;
}

.summary-orange[b-zbmisgmjyy] {
    background: linear-gradient(120deg, #fff6e8, #fffbf2);
    border-color: #f8edda;
}

.kelas-summary-icon[b-zbmisgmjyy] {
    display: flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: #087cf0;
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 14px;
    box-shadow: 0 3px 10px rgba(31, 78, 121, .045);
    font-size: 21px;
    font-weight: 800;
}

.summary-green .kelas-summary-icon[b-zbmisgmjyy] {
    color: #1ca568;
}

.summary-orange .kelas-summary-icon[b-zbmisgmjyy] {
    color: #e99416;
}

.kelas-summary-copy[b-zbmisgmjyy] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

    .kelas-summary-copy > span[b-zbmisgmjyy] {
        color: #667b95;
        font-size: 11px;
        font-weight: 650;
    }

    .kelas-summary-copy strong[b-zbmisgmjyy] {
        color: #0872dd;
        font-size: 28px;
        font-weight: 850;
        line-height: 1.1;
    }

.summary-green .kelas-summary-copy strong[b-zbmisgmjyy] {
    color: #15975c;
}

.summary-orange .kelas-summary-copy strong[b-zbmisgmjyy] {
    color: #e58312;
}

.kelas-summary-copy small[b-zbmisgmjyy] {
    color: #8190a5;
    font-size: 10px;
}

/* Main panel */

.kelas-panel[b-zbmisgmjyy] {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--kelas-border);
    border-radius: 17px;
    box-shadow: 0 5px 20px rgba(39, 76, 120, .035);
}

.kelas-panel-heading[b-zbmisgmjyy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 21px 22px 18px;
}

    .kelas-panel-heading h2[b-zbmisgmjyy] {
        margin: 0;
        color: var(--kelas-text);
        font-size: 17px;
        font-weight: 800;
        letter-spacing: -.3px;
    }

    .kelas-panel-heading p[b-zbmisgmjyy] {
        margin: 5px 0 0;
        color: var(--kelas-muted);
        font-size: 11px;
    }

/* Search and filters */

.kelas-toolbar[b-zbmisgmjyy] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 22px 18px;
}

.kelas-search[b-zbmisgmjyy] {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 9px;
    min-width: 150px;
    min-height: 41px;
    padding: 0 12px;
    background: #fbfdff;
    border: 1px solid #e2eaf4;
    border-radius: 10px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

    .kelas-search:focus-within[b-zbmisgmjyy] {
        background: #fff;
        border-color: #9acbff;
        box-shadow: 0 0 0 3px rgba(8, 124, 240, .07);
    }

.kelas-search-icon[b-zbmisgmjyy] {
    color: #6e85a3;
    font-size: 23px;
    line-height: 1;
    transform: rotate(-20deg);
}

.kelas-search input[b-zbmisgmjyy] {
    flex: 1;
    width: 100%;
    min-width: 0;
    padding: 10px 0;
    color: var(--kelas-text);
    background: transparent;
    border: 0;
    outline: none;
    font-family: inherit;
    font-size: 11px;
}

    .kelas-search input[b-zbmisgmjyy]::placeholder {
        color: #9aa9bc;
    }

.kelas-search > button[b-zbmisgmjyy] {
    padding: 0 2px;
    color: #8293a8;
    background: transparent;
    border: 0;
    font-size: 20px;
    cursor: pointer;
}

.kelas-filter[b-zbmisgmjyy] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 41px;
    padding: 0 10px;
    background: #fff;
    border: 1px solid #e2eaf4;
    border-radius: 10px;
}

    .kelas-filter label[b-zbmisgmjyy] {
        color: #7b8ba1;
        font-size: 10px;
        font-weight: 650;
    }

    .kelas-filter select[b-zbmisgmjyy] {
        max-width: 125px;
        padding: 9px 3px;
        color: #405873;
        background: transparent;
        border: 0;
        outline: none;
        font-family: inherit;
        font-size: 11px;
        cursor: pointer;
    }

/* Table */

.kelas-table-wrap[b-zbmisgmjyy] {
    width: 100%;
    overflow-x: auto;
    border-top: 1px solid #edf1f7;
}

.kelas-table[b-zbmisgmjyy] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;
    white-space: nowrap;
}

    .kelas-table thead th[b-zbmisgmjyy] {
        padding: 14px 15px;
        color: #5c708b;
        background: #f7faff;
        border-bottom: 1px solid #e7edf5;
        font-size: 10px;
        font-weight: 800;
    }

    .kelas-table tbody td[b-zbmisgmjyy] {
        padding: 13px 15px;
        color: #536983;
        border-bottom: 1px solid #edf1f6;
        font-size: 11px;
        vertical-align: middle;
    }

    .kelas-table tbody tr[b-zbmisgmjyy] {
        transition: background .15s ease;
    }

        .kelas-table tbody tr:hover[b-zbmisgmjyy] {
            background: #f8fbff;
        }

        .kelas-table tbody tr:last-child td[b-zbmisgmjyy] {
            border-bottom: 0;
        }

.kelas-col-number[b-zbmisgmjyy] {
    width: 52px;
    text-align: center;
}

.kelas-number[b-zbmisgmjyy] {
    color: #94a2b5 !important;
    text-align: center;
}

.kelas-code[b-zbmisgmjyy] {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 0 10px;
    color: #176cc4;
    background: #edf6ff;
    border: 1px solid #dcecff;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 800;
}

.kelas-name-cell[b-zbmisgmjyy] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.kelas-row-icon[b-zbmisgmjyy] {
    display: flex;
    flex: 0 0 29px;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    background: #f2f8ff;
    border: 1px solid #e6effb;
    border-radius: 9px;
    font-size: 14px;
}

.kelas-name-cell strong[b-zbmisgmjyy] {
    color: #263e5c;
    font-size: 11px;
    font-weight: 750;
}

.kelas-year[b-zbmisgmjyy] {
    color: #5e7088;
    font-weight: 600;
}

.kelas-status[b-zbmisgmjyy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 25px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 750;
}

    .kelas-status > span[b-zbmisgmjyy] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
    }

.status-active[b-zbmisgmjyy] {
    color: #168550;
    background: #eaf9f0;
    border-color: #d8f2e2;
}

    .status-active > span[b-zbmisgmjyy] {
        background: #28b775;
    }

.status-inactive[b-zbmisgmjyy] {
    color: #a96a1b;
    background: #fff6e8;
    border-color: #f7e7ca;
}

    .status-inactive > span[b-zbmisgmjyy] {
        background: #e9a13e;
    }

.kelas-date[b-zbmisgmjyy] {
    color: #8392a6 !important;
    font-size: 10px !important;
}

.kelas-col-action[b-zbmisgmjyy] {
    text-align: center;
}

.kelas-action-button[b-zbmisgmjyy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 31px;
    padding: 0 11px;
    color: #176ecb;
    background: #fff;
    border: 1px solid #dce8f6;
    border-radius: 8px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 750;
    cursor: pointer;
    transition: .2s ease;
}

    .kelas-action-button svg[b-zbmisgmjyy] {
        width: 13px;
        height: 13px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .kelas-action-button:hover[b-zbmisgmjyy] {
        color: #fff;
        background: #087cf0;
        border-color: #087cf0;
        box-shadow: 0 3px 8px rgba(8, 124, 240, .15);
    }

.kelas-table-footer[b-zbmisgmjyy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 20px;
    color: #8998ab;
    background: #fcfdff;
    border-top: 1px solid #edf1f7;
    font-size: 10px;
}

    .kelas-table-footer strong[b-zbmisgmjyy] {
        color: #526985;
    }

/* Empty and loading states */

.kelas-loading[b-zbmisgmjyy],
.kelas-empty[b-zbmisgmjyy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 235px;
    padding: 30px;
    color: #7d8da3;
    text-align: center;
}

.kelas-loading[b-zbmisgmjyy] {
    flex-direction: row;
    min-height: 180px;
    font-size: 12px;
}

.kelas-spinner[b-zbmisgmjyy] {
    width: 23px;
    height: 23px;
    border: 3px solid #dcecff;
    border-top-color: #1688fa;
    border-radius: 50%;
    animation: kelas-spin-b-zbmisgmjyy .7s linear infinite;
}

@keyframes kelas-spin-b-zbmisgmjyy {
    to {
        transform: rotate(360deg);
    }
}

.kelas-empty-icon[b-zbmisgmjyy] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 53px;
    height: 53px;
    color: #3884dc;
    background: #edf6ff;
    border-radius: 17px;
    font-size: 24px;
}

.kelas-empty h3[b-zbmisgmjyy] {
    margin: 2px 0 0;
    color: #294260;
    font-size: 15px;
    font-weight: 800;
}

.kelas-empty p[b-zbmisgmjyy] {
    max-width: 380px;
    margin: 0 0 5px;
    color: #8292a7;
    font-size: 11px;
    line-height: 1.7;
}

/* Informational note */

.kelas-page-note[b-zbmisgmjyy] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 17px;
    padding: 13px 15px;
    background: linear-gradient(110deg, #f0f8ff, #f5fbf7);
    border: 1px solid #e4eef5;
    border-radius: 12px;
}

.kelas-note-icon[b-zbmisgmjyy] {
    font-size: 17px;
}

.kelas-page-note p[b-zbmisgmjyy] {
    margin: 1px 0 0;
    color: #6e829b;
    font-size: 10px;
    line-height: 1.7;
}

/* Modal */

.kelas-modal-backdrop[b-zbmisgmjyy] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    background: rgba(24, 42, 68, .38);
    backdrop-filter: blur(5px);
    animation: kelas-fade-in-b-zbmisgmjyy .16s ease-out;
}

.kelas-modal[b-zbmisgmjyy] {
    width: 100%;
    max-width: 490px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 20px;
    box-shadow: 0 22px 75px rgba(22, 44, 75, .2);
    animation: kelas-modal-in-b-zbmisgmjyy .2s ease-out;
}

@keyframes kelas-fade-in-b-zbmisgmjyy {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes kelas-modal-in-b-zbmisgmjyy {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.kelas-modal-header[b-zbmisgmjyy] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding: 22px 23px;
    background: linear-gradient(115deg, #f1f8ff, #f6fbff 65%, #f0fbf4);
    border-bottom: 1px solid #e8f0f8;
}

.kelas-modal-heading[b-zbmisgmjyy] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.kelas-modal-icon[b-zbmisgmjyy] {
    display: flex;
    flex: 0 0 43px;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    color: #087cf0;
    background: #fff;
    border: 1px solid #e2efff;
    border-radius: 14px;
    font-size: 23px;
}

.kelas-modal-heading h2[b-zbmisgmjyy] {
    margin: 0;
    color: #203958;
    font-size: 17px;
    font-weight: 800;
}

.kelas-modal-heading p[b-zbmisgmjyy] {
    margin: 5px 0 0;
    color: #8292a7;
    font-size: 11px;
}

.kelas-modal-close[b-zbmisgmjyy] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    color: #6d819a;
    background: rgba(255, 255, 255, .85);
    border: 1px solid #e4edf6;
    border-radius: 10px;
    font-size: 21px;
    cursor: pointer;
}

    .kelas-modal-close:hover[b-zbmisgmjyy] {
        color: #d9485f;
        background: #fff1f3;
    }

.kelas-modal-body[b-zbmisgmjyy] {
    padding: 23px;
}

.kelas-form-group[b-zbmisgmjyy] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 18px;
}

    .kelas-form-group > label:not(.kelas-switch-row)[b-zbmisgmjyy] {
        color: #435a76;
        font-size: 11px;
        font-weight: 750;
    }

    .kelas-form-group > label > span[b-zbmisgmjyy] {
        color: #ed6878;
    }

.kelas-form-control[b-zbmisgmjyy] {
    width: 100%;
    min-height: 43px;
    padding: 10px 12px;
    color: #263e5c;
    background: #fbfdff;
    border: 1px solid #dfe8f3;
    border-radius: 10px;
    outline: none;
    font-family: inherit;
    font-size: 12px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

    .kelas-form-control:focus[b-zbmisgmjyy] {
        background: #fff;
        border-color: #8fc3ff;
        box-shadow: 0 0 0 3px rgba(8, 124, 240, .08);
    }

    .kelas-form-control[b-zbmisgmjyy]::placeholder {
        color: #a1afc0;
    }

.kelas-form-group > .validation-message[b-zbmisgmjyy] {
    color: #d9485f;
    font-size: 10px;
}

.kelas-form-group small[b-zbmisgmjyy] {
    color: #8797aa;
    font-size: 10px;
    line-height: 1.5;
}

.kelas-switch-row[b-zbmisgmjyy] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.kelas-switch[b-zbmisgmjyy] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.kelas-switch-track[b-zbmisgmjyy] {
    position: relative;
    display: block;
    flex: 0 0 38px;
    width: 38px;
    height: 22px;
    background: #d5dfeb;
    border-radius: 20px;
    transition: background .2s ease;
}

    .kelas-switch-track[b-zbmisgmjyy]::after {
        position: absolute;
        top: 3px;
        left: 3px;
        width: 16px;
        height: 16px;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
        content: "";
        transition: transform .2s ease;
    }

.kelas-switch:checked + .kelas-switch-track[b-zbmisgmjyy] {
    background: #2fbd7b;
}

    .kelas-switch:checked + .kelas-switch-track[b-zbmisgmjyy]::after {
        transform: translateX(16px);
    }

.kelas-switch:focus-visible + .kelas-switch-track[b-zbmisgmjyy] {
    outline: 3px solid rgba(8, 124, 240, .2);
    outline-offset: 2px;
}

.kelas-switch-label[b-zbmisgmjyy] {
    color: #405873;
    font-size: 11px;
    font-weight: 750;
}

.kelas-form-hint[b-zbmisgmjyy] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 2px 0 20px;
    padding: 11px 12px;
    color: #63816f;
    background: #f1faf4;
    border: 1px solid #e1f3e6;
    border-radius: 10px;
    font-size: 10px;
}

.kelas-modal-footer[b-zbmisgmjyy] {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding-top: 17px;
    border-top: 1px solid #edf1f6;
}

    .kelas-modal-footer .kelas-btn[b-zbmisgmjyy] {
        min-height: 39px;
        font-size: 11px;
    }

/* Responsive */

@media (max-width: 900px) {
    .kelas-summary[b-zbmisgmjyy] {
        gap: 10px;
    }

    .kelas-summary-card[b-zbmisgmjyy] {
        gap: 10px;
        padding: 14px;
    }

    .kelas-summary-icon[b-zbmisgmjyy] {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
    }

    .kelas-toolbar[b-zbmisgmjyy] {
        flex-wrap: wrap;
    }

    .kelas-search[b-zbmisgmjyy] {
        flex-basis: 100%;
    }

    .kelas-filter[b-zbmisgmjyy] {
        flex: 1;
    }
}

@media (max-width: 600px) {
    .kelas-heading[b-zbmisgmjyy] {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
        margin-bottom: 18px;
    }

        .kelas-heading .kelas-btn[b-zbmisgmjyy] {
            width: 100%;
        }

    .kelas-summary[b-zbmisgmjyy] {
        grid-template-columns: 1fr;
        gap: 9px;
        margin-bottom: 16px;
    }

    .kelas-summary-card[b-zbmisgmjyy] {
        min-height: 80px;
        padding: 13px 15px;
    }

    .kelas-summary-copy strong[b-zbmisgmjyy] {
        font-size: 24px;
    }

    .kelas-panel[b-zbmisgmjyy] {
        border-radius: 14px;
    }

    .kelas-panel-heading[b-zbmisgmjyy] {
        align-items: flex-start;
        padding: 17px 15px;
    }

        .kelas-panel-heading h2[b-zbmisgmjyy] {
            font-size: 15px;
        }

        .kelas-panel-heading p[b-zbmisgmjyy] {
            max-width: 190px;
            line-height: 1.6;
        }

        .kelas-panel-heading .kelas-btn[b-zbmisgmjyy] {
            min-height: 35px;
            padding: 0 10px;
            font-size: 10px;
        }

    .kelas-toolbar[b-zbmisgmjyy] {
        gap: 8px;
        padding: 0 15px 15px;
    }

    .kelas-search[b-zbmisgmjyy] {
        flex-basis: 100%;
    }

    .kelas-filter[b-zbmisgmjyy] {
        min-width: 0;
    }

        .kelas-filter select[b-zbmisgmjyy] {
            max-width: 105px;
        }

    .kelas-btn-search[b-zbmisgmjyy] {
        min-width: 85px;
        padding: 0 11px;
    }

    .kelas-table[b-zbmisgmjyy] {
        min-width: 790px;
    }

        .kelas-table thead th[b-zbmisgmjyy],
        .kelas-table tbody td[b-zbmisgmjyy] {
            padding: 12px;
        }

    .kelas-table-footer[b-zbmisgmjyy] {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
        padding: 12px 15px;
    }

    .kelas-page-note[b-zbmisgmjyy] {
        padding: 12px;
    }

    .kelas-modal-backdrop[b-zbmisgmjyy] {
        align-items: flex-end;
        padding: 10px;
    }

    .kelas-modal[b-zbmisgmjyy] {
        max-height: calc(100dvh - 20px);
        border-radius: 19px 19px 14px 14px;
    }

    .kelas-modal-header[b-zbmisgmjyy] {
        padding: 18px;
    }

    .kelas-modal-body[b-zbmisgmjyy] {
        padding: 18px;
    }

    .kelas-modal-footer[b-zbmisgmjyy] {
        position: sticky;
        bottom: 0;
        background: #fff;
    }

        .kelas-modal-footer .kelas-btn[b-zbmisgmjyy] {
            flex: 1;
            padding: 0 10px;
        }
}

@media (prefers-reduced-motion: reduce) {
    .kelas-page *[b-zbmisgmjyy],
    .kelas-page *[b-zbmisgmjyy]::before,
    .kelas-page *[b-zbmisgmjyy]::after,
    .kelas-modal[b-zbmisgmjyy],
    .kelas-modal-backdrop[b-zbmisgmjyy] {
        animation: none !important;
        transition: none !important;
    }
}


/* =========================================
   KELAS FORM - SOFT MODERN INPUT
   ========================================= */

.kelas-page input:not([type="checkbox"])[b-zbmisgmjyy],
.kelas-page select[b-zbmisgmjyy],
.kelas-page textarea[b-zbmisgmjyy],
.kelas-modal input:not([type="checkbox"])[b-zbmisgmjyy],
.kelas-modal select[b-zbmisgmjyy],
.kelas-modal textarea[b-zbmisgmjyy] {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid #dce5f0;
    border-radius: 11px;
    background: #f9fbfe;
    color: #263b57;
    font-family: inherit;
    font-size: 14px;
    outline: none;
    box-shadow: 0 1px 2px rgb(30 55 90 / 3%);
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

    .kelas-page input:not([type="checkbox"]):hover[b-zbmisgmjyy],
    .kelas-page select:hover[b-zbmisgmjyy],
    .kelas-page textarea:hover[b-zbmisgmjyy],
    .kelas-modal input:not([type="checkbox"]):hover[b-zbmisgmjyy],
    .kelas-modal select:hover[b-zbmisgmjyy],
    .kelas-modal textarea:hover[b-zbmisgmjyy] {
        border-color: #c3d5eb;
        background: #fff;
    }

    .kelas-page input:not([type="checkbox"]):focus[b-zbmisgmjyy],
    .kelas-page select:focus[b-zbmisgmjyy],
    .kelas-page textarea:focus[b-zbmisgmjyy],
    .kelas-modal input:not([type="checkbox"]):focus[b-zbmisgmjyy],
    .kelas-modal select:focus[b-zbmisgmjyy],
    .kelas-modal textarea:focus[b-zbmisgmjyy] {
        border-color: #6ca8f8;
        background: #fff;
        box-shadow: 0 0 0 4px rgb(59 130 246 / 10%);
    }

    .kelas-page input[b-zbmisgmjyy]::placeholder,
    .kelas-modal input[b-zbmisgmjyy]::placeholder,
    .kelas-page textarea[b-zbmisgmjyy]::placeholder,
    .kelas-modal textarea[b-zbmisgmjyy]::placeholder {
        color: #a0aec0;
        opacity: 1;
    }

.kelas-page label[b-zbmisgmjyy],
.kelas-modal label[b-zbmisgmjyy] {
    display: block;
    margin-bottom: 7px;
    color: #425875;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1px;
}

.kelas-page .form-group[b-zbmisgmjyy],
.kelas-page .mb-3[b-zbmisgmjyy],
.kelas-modal .form-group[b-zbmisgmjyy],
.kelas-modal .mb-3[b-zbmisgmjyy] {
    margin-bottom: 20px;
}

.kelas-modal .modal-footer[b-zbmisgmjyy],
.kelas-modal .form-actions[b-zbmisgmjyy] {
    border-top: 1px solid #edf1f7;
    padding-top: 20px;
    margin-top: 24px;
}

.kelas-modal button[b-zbmisgmjyy] {
    border-radius: 12px;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

    .kelas-modal button:hover[b-zbmisgmjyy] {
        transform: translateY(-1px);
    }
/* _content/DailyReport.Web/Components/Pages/Login.razor.rz.scp.css */

/* =========================================
   KIDDY PLACE - LOGIN PAGE
   File: Login.razor.css
   ========================================= */

.login-page[b-o7kpbqsbj9] {
    --login-blue: #2878c8;
    --login-blue-dark: #1f5fa8;
    --login-ink: #203453;
    --login-muted: #7b8aa3;
    --login-border: #e4eaf2;
    min-height: 100vh;
    padding: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
    color: var(--login-ink);
    font-family: "Segoe UI", Arial, sans-serif;
    background: radial-gradient(ellipse at 5% 8%, rgba(208, 232, 255, .75), transparent 32%), radial-gradient(ellipse at 94% 92%, rgba(255, 225, 190, .65), transparent 34%), #f9fafc;
}

    .login-page *[b-o7kpbqsbj9],
    .login-page *[b-o7kpbqsbj9]::before,
    .login-page *[b-o7kpbqsbj9]::after {
        box-sizing: border-box;
    }

.login-shell[b-o7kpbqsbj9] {
    width: 100%;
    max-width: 1320px;
    min-height: 690px;
    display: grid;
    grid-template-columns: minmax(0, 1.03fr) minmax(390px, .97fr);
    overflow: hidden;
    background: rgba(255, 255, 255, .76);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 30px;
    box-shadow: 0 28px 90px rgba(45, 67, 100, .09);
}

/* LEFT SHOWCASE */

.login-showcase[b-o7kpbqsbj9] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 38px 42px 30px;
    overflow: hidden;
    background: radial-gradient(ellipse at 5% 5%, rgba(208, 232, 255, .9), transparent 42%), radial-gradient(ellipse at 80% 88%, rgba(255, 224, 175, .75), transparent 42%), linear-gradient(145deg, #f2f8ff, #fffaf3);
}

    .login-showcase[b-o7kpbqsbj9]::before,
    .login-showcase[b-o7kpbqsbj9]::after {
        position: absolute;
        content: "";
        pointer-events: none;
        border-radius: 50%;
    }

    .login-showcase[b-o7kpbqsbj9]::before {
        width: 360px;
        height: 360px;
        top: 170px;
        right: -170px;
        background: rgba(255, 255, 255, .38);
    }

    .login-showcase[b-o7kpbqsbj9]::after {
        width: 220px;
        height: 220px;
        bottom: -120px;
        left: -90px;
        background: rgba(255, 255, 255, .36);
    }

.showcase-brand[b-o7kpbqsbj9] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 15px;
}

.showcase-logo[b-o7kpbqsbj9],
.login-logo[b-o7kpbqsbj9] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--login-blue);
    background: linear-gradient(145deg, #e3f1ff, #f0f7ff);
    font-weight: 850;
    letter-spacing: -1px;
}

.showcase-logo[b-o7kpbqsbj9] {
    width: 58px;
    height: 58px;
    border-radius: 19px;
    font-size: 23px;
    box-shadow: 0 8px 20px rgba(40, 120, 200, .08);
}

.showcase-brand-name[b-o7kpbqsbj9] {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.7px;
    color: var(--login-blue);
}

    .showcase-brand-name span[b-o7kpbqsbj9] {
        color: #ed9d8d;
    }

.showcase-brand-caption[b-o7kpbqsbj9] {
    margin-top: 2px;
    color: #7b8aa3;
    font-size: 13px;
    letter-spacing: .3px;
}

.showcase-content[b-o7kpbqsbj9] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-top: 60px;
}

.showcase-eyebrow[b-o7kpbqsbj9] {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #6d83a2;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.eyebrow-dot[b-o7kpbqsbj9] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f3a18d;
    box-shadow: 0 0 0 4px rgba(243, 161, 141, .16);
}

.showcase-content h1[b-o7kpbqsbj9] {
    margin: 23px 0 17px;
    color: #1f3454;
    font-size: clamp(38px, 3.4vw, 56px);
    line-height: 1.12;
    letter-spacing: -2.4px;
    font-weight: 850;
}

    .showcase-content h1 span[b-o7kpbqsbj9] {
        position: relative;
        display: inline-block;
        color: var(--login-blue);
    }

        .showcase-content h1 span[b-o7kpbqsbj9]::after {
            position: absolute;
            right: 0;
            bottom: -5px;
            left: 0;
            height: 5px;
            content: "";
            border-radius: 99px;
            background: #f4b49a;
            transform: rotate(-1.5deg);
        }

.showcase-description[b-o7kpbqsbj9] {
    max-width: 440px;
    margin: 0;
    color: #75849b;
    font-size: 15px;
    line-height: 1.9;
}

.showcase-illustration[b-o7kpbqsbj9] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 230px;
    margin: 10px -28px 0;
}

    .showcase-illustration svg[b-o7kpbqsbj9] {
        position: relative;
        z-index: 1;
        display: block;
        width: 100%;
        max-width: 490px;
        max-height: 365px;
        overflow: visible;
    }

.illustration-glow[b-o7kpbqsbj9] {
    position: absolute;
    width: 65%;
    height: 65%;
    border-radius: 50%;
    background: rgba(255, 255, 255, .46);
    filter: blur(28px);
}

.showcase-bottom[b-o7kpbqsbj9] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 14px;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 17px;
    background: rgba(255, 255, 255, .48);
    backdrop-filter: blur(8px);
}

.showcase-bottom-icon[b-o7kpbqsbj9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 39px;
    height: 39px;
    flex-shrink: 0;
    border-radius: 13px;
    background: #fff0e8;
    color: #ed9d8d;
    font-size: 19px;
}

.showcase-bottom strong[b-o7kpbqsbj9],
.showcase-bottom span[b-o7kpbqsbj9] {
    display: block;
}

.showcase-bottom strong[b-o7kpbqsbj9] {
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 750;
}

.showcase-bottom span[b-o7kpbqsbj9] {
    color: #7b8aa3;
    font-size: 11px;
    line-height: 1.5;
}

/* RIGHT LOGIN PANEL */

.login-panel[b-o7kpbqsbj9] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 45px clamp(28px, 4vw, 66px);
    background: rgba(255, 255, 255, .76);
}

.login-card[b-o7kpbqsbj9] {
    width: 100%;
    max-width: 410px;
    margin: auto;
}

.login-heading[b-o7kpbqsbj9] {
    margin-bottom: 34px;
    text-align: center;
}

.login-logo[b-o7kpbqsbj9] {
    width: 58px;
    height: 58px;
    margin: 0 auto 21px;
    border-radius: 19px;
    font-size: 22px;
}

.login-heading h2[b-o7kpbqsbj9] {
    margin: 0;
    color: #203453;
    font-size: clamp(23px, 2vw, 29px);
    line-height: 1.35;
    letter-spacing: -.8px;
    font-weight: 800;
}

.login-heading p[b-o7kpbqsbj9] {
    margin: 9px 0 0;
    color: #8a97aa;
    font-size: 13px;
    line-height: 1.7;
}

.login-mobile-brand[b-o7kpbqsbj9] {
    display: none;
}

.form-group[b-o7kpbqsbj9] {
    margin-bottom: 22px;
}

    .form-group label[b-o7kpbqsbj9] {
        display: block;
        margin-bottom: 9px;
        color: #30415c;
        font-size: 12px;
        font-weight: 750;
    }

.input-wrapper[b-o7kpbqsbj9] {
    position: relative;
}

.input-icon[b-o7kpbqsbj9] {
    position: absolute;
    top: 50%;
    left: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: #8494ad;
    transform: translateY(-50%);
    pointer-events: none;
}

    .input-icon svg[b-o7kpbqsbj9],
    .register-icon svg[b-o7kpbqsbj9] {
        width: 100%;
        height: 100%;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.input-wrapper input[b-o7kpbqsbj9] {
    width: 100%;
    height: 54px;
    padding: 0 15px 0 49px;
    border: 1px solid #dfe6f0;
    border-radius: 13px;
    outline: none;
    background: #fbfcfe;
    color: #253753;
    font-family: inherit;
    font-size: 13px;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

    .input-wrapper input[b-o7kpbqsbj9]::placeholder {
        color: #9aa6b8;
    }

    .input-wrapper input:hover[b-o7kpbqsbj9] {
        border-color: #c6d6e9;
    }

    .input-wrapper input:focus[b-o7kpbqsbj9] {
        border-color: #68a4e5;
        background: #fff;
        box-shadow: 0 0 0 4px rgba(40, 120, 200, .10);
    }

.login-submit[b-o7kpbqsbj9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 54px;
    margin-top: 7px;
    padding: 13px 20px;
    border: 0;
    border-radius: 13px;
    background: linear-gradient(110deg, #2878c8, #4096e5);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 750;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(40, 120, 200, .15);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

    .login-submit svg[b-o7kpbqsbj9] {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform .2s ease;
    }

    .login-submit:hover[b-o7kpbqsbj9] {
        filter: saturate(1.08);
        box-shadow: 0 11px 24px rgba(40, 120, 200, .24);
        transform: translateY(-1px);
    }

        .login-submit:hover svg[b-o7kpbqsbj9] {
            transform: translateX(3px);
        }

    .login-submit:active[b-o7kpbqsbj9] {
        transform: translateY(0);
    }

    .login-submit:focus-visible[b-o7kpbqsbj9],
    .register-link:focus-visible[b-o7kpbqsbj9] {
        outline: 3px solid rgba(40, 120, 200, .3);
        outline-offset: 4px;
    }

.login-divider[b-o7kpbqsbj9] {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 27px 0 22px;
}

    .login-divider span[b-o7kpbqsbj9] {
        flex: 1;
        height: 1px;
        background: #e6ebf2;
    }

    .login-divider small[b-o7kpbqsbj9] {
        color: #a0aabc;
        font-size: 10px;
        font-weight: 750;
        letter-spacing: 1.5px;
    }

.register-link[b-o7kpbqsbj9] {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 17px;
    border: 1px solid #e6effa;
    border-radius: 15px;
    background: linear-gradient(120deg, #f1f7ff, #f8fbff);
    color: inherit;
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

    .register-link:hover[b-o7kpbqsbj9] {
        border-color: #c8def6;
        background: #edf5ff;
        transform: translateY(-1px);
    }

.register-icon[b-o7kpbqsbj9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    flex-shrink: 0;
    padding: 11px;
    border-radius: 13px;
    background: #e0edff;
    color: var(--login-blue);
}

.register-copy[b-o7kpbqsbj9] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

    .register-copy > span[b-o7kpbqsbj9] {
        color: #687a94;
        font-size: 11px;
        line-height: 1.5;
    }

    .register-copy strong[b-o7kpbqsbj9] {
        color: var(--login-blue);
        font-size: 12px;
        line-height: 1.5;
        font-weight: 750;
    }

        .register-copy strong span[b-o7kpbqsbj9] {
            display: inline-block;
            margin-left: 3px;
            transition: transform .2s ease;
        }

.register-link:hover .register-copy strong span[b-o7kpbqsbj9] {
    transform: translateX(3px);
}

.login-footer[b-o7kpbqsbj9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 31px;
    color: #98a4b6;
    font-size: 11px;
}

.footer-heart[b-o7kpbqsbj9] {
    color: #edaa9c;
    font-size: 12px;
}

.footer-separator[b-o7kpbqsbj9] {
    color: #c3ccd8;
}

.login-error[b-o7kpbqsbj9] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: -12px 0 23px;
    padding: 12px 14px;
    border: 1px solid #f6d0ce;
    border-radius: 12px;
    background: #fff5f4;
    color: #b42318;
    font-size: 12px;
    line-height: 1.65;
}

.login-error-icon[b-o7kpbqsbj9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #fde1df;
    font-size: 12px;
    font-weight: 800;
}

/* RESPONSIVE */

@media (min-width: 1500px) {
    .login-shell[b-o7kpbqsbj9] {
        max-width: 1400px;
        min-height: 760px;
    }

    .login-showcase[b-o7kpbqsbj9] {
        padding: 48px 52px 36px;
    }

    .showcase-content[b-o7kpbqsbj9] {
        padding-top: 72px;
    }

    .showcase-illustration svg[b-o7kpbqsbj9] {
        max-height: 410px;
    }
}

@media (max-width: 1000px) {
    .login-page[b-o7kpbqsbj9] {
        padding: 20px;
    }

    .login-shell[b-o7kpbqsbj9] {
        grid-template-columns: minmax(0, .9fr) minmax(350px, 1.1fr);
        min-height: 650px;
    }

    .login-showcase[b-o7kpbqsbj9] {
        padding: 30px 25px 24px;
    }

    .showcase-content[b-o7kpbqsbj9] {
        padding-top: 52px;
    }

        .showcase-content h1[b-o7kpbqsbj9] {
            font-size: clamp(34px, 4.2vw, 45px);
            letter-spacing: -1.8px;
        }

    .showcase-description[b-o7kpbqsbj9] {
        font-size: 13px;
    }

    .showcase-illustration[b-o7kpbqsbj9] {
        margin-right: -18px;
        margin-left: -18px;
    }

    .login-panel[b-o7kpbqsbj9] {
        padding: 34px 28px;
    }
}

@media (max-width: 760px) {
    .login-page[b-o7kpbqsbj9] {
        min-height: 100vh;
        padding: 20px 16px;
        overflow: auto;
        background: radial-gradient(ellipse at 0 0, #e8f3ff, transparent 45%), #f8fafc;
    }

    .login-shell[b-o7kpbqsbj9] {
        display: block;
        width: 100%;
        max-width: 470px;
        min-height: auto;
        overflow: visible;
        border-radius: 24px;
        background: #fff;
        box-shadow: 0 20px 60px rgba(45, 67, 100, .10);
    }

    .login-showcase[b-o7kpbqsbj9] {
        display: none;
    }

    .login-panel[b-o7kpbqsbj9] {
        display: block;
        padding: 30px 25px 25px;
        border-radius: 24px;
        background: #fff;
    }

    .login-card[b-o7kpbqsbj9] {
        max-width: none;
    }

    .login-mobile-brand[b-o7kpbqsbj9] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 11px;
        margin-bottom: 29px;
        color: #2878c8;
        font-size: 19px;
        font-weight: 800;
    }

        .login-mobile-brand .login-logo[b-o7kpbqsbj9] {
            width: 43px;
            height: 43px;
            margin: 0;
            border-radius: 14px;
            font-size: 17px;
        }

        .login-mobile-brand strong[b-o7kpbqsbj9] {
            color: #ed9d8d;
        }

    .login-desktop-logo[b-o7kpbqsbj9] {
        width: 51px;
        height: 51px;
        margin-bottom: 17px;
        border-radius: 16px;
        font-size: 19px;
    }

    .login-heading[b-o7kpbqsbj9] {
        margin-bottom: 27px;
    }

        .login-heading h2[b-o7kpbqsbj9] {
            font-size: 24px;
        }

        .login-heading p[b-o7kpbqsbj9] {
            font-size: 12px;
        }

    .form-group[b-o7kpbqsbj9] {
        margin-bottom: 19px;
    }

    .input-wrapper input[b-o7kpbqsbj9] {
        height: 51px;
    }

    .login-submit[b-o7kpbqsbj9] {
        min-height: 52px;
    }

    .login-footer[b-o7kpbqsbj9] {
        margin-top: 27px;
    }
}

@media (max-width: 380px) {
    .login-page[b-o7kpbqsbj9] {
        padding: 12px;
    }

    .login-panel[b-o7kpbqsbj9] {
        padding: 25px 18px 21px;
    }

    .login-heading h2[b-o7kpbqsbj9] {
        font-size: 21px;
    }

    .register-link[b-o7kpbqsbj9] {
        gap: 10px;
        padding: 13px 11px;
    }

    .register-icon[b-o7kpbqsbj9] {
        width: 38px;
        height: 38px;
    }

    .register-copy strong[b-o7kpbqsbj9] {
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-page *[b-o7kpbqsbj9],
    .login-page *[b-o7kpbqsbj9]::before,
    .login-page *[b-o7kpbqsbj9]::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}


/* =========================================
   LOGIN <-> PARENT REGISTRATION FLIP
   ========================================= */

.login-panel[b-o7kpbqsbj9] {
    min-width: 0;
}

.auth-flip-scene[b-o7kpbqsbj9] {
    width: 100%;
    max-width: 470px;
    margin: 0 auto;
    perspective: 1600px;
}

.auth-flip-card[b-o7kpbqsbj9] {
    display: grid;
    width: 100%;
    transform-style: preserve-3d;
    transition: transform 800ms cubic-bezier(.2, .72, .25, 1);
}

    .auth-flip-card.is-flipped[b-o7kpbqsbj9] {
        transform: rotateY(180deg);
    }

.auth-flip-face[b-o7kpbqsbj9] {
    grid-area: 1 / 1;
    width: 100%;
    min-width: 0;
    padding: 32px;
    border: 1px solid rgba(232, 237, 245, .95);
    border-radius: 25px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 22px 65px rgba(40, 65, 100, .12);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.auth-flip-front[b-o7kpbqsbj9] {
    transform: rotateY(0deg);
}

.auth-flip-back[b-o7kpbqsbj9] {
    transform: rotateY(180deg);
}

.auth-flip-face .login-card[b-o7kpbqsbj9] {
    width: 100%;
    max-width: none;
    margin: 0;
}

.auth-flip-face .login-heading[b-o7kpbqsbj9] {
    margin-bottom: 27px;
}

    .auth-flip-face .login-heading h2[b-o7kpbqsbj9] {
        font-size: clamp(22px, 2vw, 27px);
    }

.auth-flip-face .form-group[b-o7kpbqsbj9] {
    margin-bottom: 17px;
}

    .auth-flip-face .form-group > input[b-o7kpbqsbj9],
    .auth-flip-face .form-group > select[b-o7kpbqsbj9] {
        width: 100%;
        min-height: 47px;
        padding: 12px 13px;
        border: 1px solid #dfe6f0;
        border-radius: 11px;
        outline: none;
        background: #fbfcfe;
        color: #253753;
        font: inherit;
        font-size: 13px;
    }

        .auth-flip-face .form-group > input:focus[b-o7kpbqsbj9],
        .auth-flip-face .form-group > select:focus[b-o7kpbqsbj9] {
            border-color: #68a4e5;
            background: #fff;
            box-shadow: 0 0 0 4px rgba(40, 120, 200, .10);
        }

.auth-flip-face .register-link[b-o7kpbqsbj9] {
    width: 100%;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
}

.auth-flip-face .register-icon[b-o7kpbqsbj9] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.auth-flip-face .register-copy[b-o7kpbqsbj9] {
    text-align: left;
}

.back-to-login[b-o7kpbqsbj9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 23px;
    padding: 7px 0;
    border: 0;
    background: transparent;
    color: #2878c8;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

    .back-to-login:hover[b-o7kpbqsbj9] {
        color: #1f5fa8;
    }

    .back-to-login span[b-o7kpbqsbj9] {
        font-size: 18px;
    }

.registration-heading .login-logo[b-o7kpbqsbj9] {
    margin-bottom: 15px;
}

.registration-note[b-o7kpbqsbj9] {
    margin: 17px 0 0;
    color: #8794a8;
    font-size: 11px;
    line-height: 1.7;
    text-align: center;
}

.registration-message[b-o7kpbqsbj9] {
    margin-bottom: 17px;
    padding: 11px 13px;
    border: 1px solid #dbeafe;
    border-radius: 10px;
    background: #eff6ff;
    color: #245b98;
    font-size: 12px;
    line-height: 1.6;
}

.field-validation[b-o7kpbqsbj9] {
    display: block;
    margin-top: 6px;
    color: #b42318;
    font-size: 11px;
    line-height: 1.5;
}

.registration-submit[b-o7kpbqsbj9] {
    margin-top: 8px;
}

@media (max-width: 760px) {
    .auth-flip-scene[b-o7kpbqsbj9] {
        max-width: 470px;
    }

    .auth-flip-face[b-o7kpbqsbj9] {
        padding: 25px 21px;
        border-radius: 22px;
    }
}

@media (max-width: 380px) {
    .auth-flip-face[b-o7kpbqsbj9] {
        padding: 22px 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-flip-card[b-o7kpbqsbj9] {
        transition-duration: .01ms;
    }
}

.registration-submit:disabled[b-o7kpbqsbj9] {
    opacity: .65;
    cursor: wait;
    transform: none;
}
/* _content/DailyReport.Web/Components/Pages/Parent/Dashboard.razor.rz.scp.css */

/* =========================================================
   PARENT DASHBOARD
   Kiddy Place - DailyReport
   ========================================================= */

.parent-dashboard[b-wqmtzxtaxt] {
    --parent-text: #173253;
    --parent-muted: #74869d;
    --parent-border: #e4edf7;
    --parent-blue: #087cf0;
    --parent-green: #07965b;
    box-sizing: border-box;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    color: var(--parent-text);
    font-family: "Segoe UI", Arial, sans-serif;
}

    .parent-dashboard *[b-wqmtzxtaxt],
    .parent-dashboard *[b-wqmtzxtaxt]::before,
    .parent-dashboard *[b-wqmtzxtaxt]::after {
        box-sizing: border-box;
    }

/* =========================================================
   WELCOME BANNER
   ========================================================= */

.parent-welcome[b-wqmtzxtaxt] {
    display: grid;
    grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.7fr);
    align-items: stretch;
    min-width: 0;
    overflow: hidden;
    background: linear-gradient(120deg, #edf6ff, #f6f1ff);
    border: 1px solid #e2edfa;
    border-radius: 18px;
}

.parent-welcome-content[b-wqmtzxtaxt] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    padding: 30px;
}

.parent-eyebrow[b-wqmtzxtaxt] {
    display: block;
    margin-bottom: 13px;
    color: #347cc3;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.parent-welcome h1[b-wqmtzxtaxt] {
    margin: 0;
    color: #173253;
    font-size: clamp(27px, 2.5vw, 38px);
    font-weight: 850;
    line-height: 1.16;
    letter-spacing: -0.9px;
}

    .parent-welcome h1 span[b-wqmtzxtaxt] {
        display: block;
    }

.parent-welcome-content > p[b-wqmtzxtaxt] {
    max-width: 350px;
    margin: 13px 0 0;
    color: var(--parent-muted);
    font-size: 13px;
    line-height: 1.7;
}

.parent-welcome-badge[b-wqmtzxtaxt] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    margin-top: 20px;
    padding: 9px 13px;
    color: #536d8a;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 30px;
    font-size: 10px;
    font-weight: 650;
    line-height: 1.5;
}

    .parent-welcome-badge span[b-wqmtzxtaxt] {
        flex: 0 0 auto;
        color: #e8799c;
        font-size: 14px;
    }

/* Gambar mempertahankan rasio asli, bukan dipaksa memenuhi tinggi banner */

.parent-welcome-image[b-wqmtzxtaxt] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
    background: #fbe9d8;
}

    .parent-welcome-image img[b-wqmtzxtaxt] {
        display: block;
        width: 100%;
        height: auto;
        max-width: 100%;
        object-fit: contain;
        object-position: center;
    }

.parent-welcome-heart[b-wqmtzxtaxt] {
    position: absolute;
    z-index: 2;
    top: 18px;
    right: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: #7164df;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    font-size: 24px;
    box-shadow: 0 5px 20px rgba(44, 65, 100, 0.08);
}

/* =========================================================
   LOADING
   ========================================================= */

.parent-loading[b-wqmtzxtaxt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 180px;
    color: var(--parent-muted);
    font-size: 13px;
}

.parent-loading-spinner[b-wqmtzxtaxt] {
    width: 30px;
    height: 30px;
    border: 3px solid #dceafa;
    border-top-color: var(--parent-blue);
    border-radius: 50%;
    animation: parent-spin-b-wqmtzxtaxt 0.8s linear infinite;
}

@keyframes parent-spin-b-wqmtzxtaxt {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   ERROR
   ========================================================= */

.parent-error[b-wqmtzxtaxt] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 18px;
    padding: 20px;
    background: #fff6f5;
    border: 1px solid #f5d8d4;
    border-radius: 13px;
}

.parent-error-icon[b-wqmtzxtaxt] {
    display: flex;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: #c83c35;
    background: #ffe5e1;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 800;
}

.parent-error-content[b-wqmtzxtaxt] {
    min-width: 0;
}

    .parent-error-content > strong[b-wqmtzxtaxt] {
        color: #92352e;
        font-size: 13px;
    }

    .parent-error-content > p[b-wqmtzxtaxt] {
        margin: 6px 0 12px;
        color: #936a66;
        font-size: 12px;
        line-height: 1.6;
    }

.parent-retry-button[b-wqmtzxtaxt] {
    padding: 8px 13px;
    color: #fff;
    background: #c83c35;
    border: 0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

/* =========================================================
   STATISTICS
   ========================================================= */

.parent-stats[b-wqmtzxtaxt] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    margin-top: 18px;
}

.parent-stat-card[b-wqmtzxtaxt] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    padding: 22px;
    border: 1px solid transparent;
    border-radius: 15px;
}

.parent-stat-blue[b-wqmtzxtaxt] {
    background: #edf6ff;
    border-color: #deecff;
}

.parent-stat-green[b-wqmtzxtaxt] {
    background: #eaf9f0;
    border-color: #ddf3e5;
}

.parent-stat-icon[b-wqmtzxtaxt] {
    display: flex;
    flex: 0 0 56px;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.88);
    border-radius: 17px;
}

    .parent-stat-icon svg[b-wqmtzxtaxt] {
        display: block;
        width: 27px;
        height: 27px;
    }

.parent-stat-blue .parent-stat-icon[b-wqmtzxtaxt] {
    color: var(--parent-blue);
}

.parent-stat-green .parent-stat-icon[b-wqmtzxtaxt] {
    color: var(--parent-green);
}

.parent-stat-body[b-wqmtzxtaxt] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    min-width: 0;
}

.parent-stat-label[b-wqmtzxtaxt] {
    color: #46617f;
    font-size: 12px;
    font-weight: 750;
}

.parent-stat-body > strong[b-wqmtzxtaxt] {
    color: var(--parent-blue);
    font-size: 30px;
    font-weight: 850;
    line-height: 1.15;
}

.parent-stat-green .parent-stat-body > strong[b-wqmtzxtaxt] {
    color: var(--parent-green);
}

.parent-stat-caption[b-wqmtzxtaxt] {
    color: var(--parent-muted);
    font-size: 11px;
    line-height: 1.5;
}

/* =========================================================
   SECTION HEADINGS
   ========================================================= */

.parent-section[b-wqmtzxtaxt] {
    margin-top: 29px;
}

.parent-section-heading[b-wqmtzxtaxt] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 15px;
}

.parent-section-eyebrow[b-wqmtzxtaxt] {
    display: block;
    margin-bottom: 5px;
    color: #8b9bb0;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.parent-section-heading h2[b-wqmtzxtaxt] {
    margin: 0;
    color: var(--parent-text);
    font-size: 20px;
    font-weight: 850;
    letter-spacing: -0.35px;
}

.parent-section-heading p[b-wqmtzxtaxt] {
    margin: 6px 0 0;
    color: var(--parent-muted);
    font-size: 12px;
    line-height: 1.6;
}

.parent-section-count[b-wqmtzxtaxt] {
    flex: 0 0 auto;
    padding: 7px 11px;
    color: #3878b8;
    background: #edf6ff;
    border: 1px solid #deecff;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 750;
}

/* =========================================================
   CHILD CARDS
   ========================================================= */

.parent-child-grid[b-wqmtzxtaxt] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.parent-child-card[b-wqmtzxtaxt] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 19px;
    background: #fff;
    border: 1px solid var(--parent-border);
    border-radius: 14px;
    box-shadow: 0 3px 12px rgba(27, 57, 91, 0.025);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

    .parent-child-card:hover[b-wqmtzxtaxt] {
        border-color: #cfe2f8;
        box-shadow: 0 5px 16px rgba(27, 57, 91, 0.05);
    }

.parent-child-avatar[b-wqmtzxtaxt] {
    display: flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: #0874e8;
    background: #eaf4ff;
    border: 1px solid #dfedff;
    border-radius: 15px;
    font-size: 14px;
    font-weight: 850;
}

.parent-child-info[b-wqmtzxtaxt] {
    flex: 1;
    min-width: 0;
}

    .parent-child-info h3[b-wqmtzxtaxt] {
        margin: 0;
        color: var(--parent-text);
        font-size: 14px;
        font-weight: 800;
        overflow-wrap: anywhere;
    }

    .parent-child-info p[b-wqmtzxtaxt] {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin: 7px 0 0;
        color: var(--parent-muted);
        font-size: 11px;
        line-height: 1.5;
    }

        .parent-child-info p span[b-wqmtzxtaxt] {
            color: #8b9bb0;
        }

.parent-child-report[b-wqmtzxtaxt] {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    max-width: 135px;
    text-align: right;
}

    .parent-child-report > strong[b-wqmtzxtaxt] {
        color: var(--parent-blue);
        font-size: 23px;
        font-weight: 850;
        line-height: 1.2;
    }

    .parent-child-report > span[b-wqmtzxtaxt] {
        color: var(--parent-muted);
        font-size: 10px;
    }

    .parent-child-report > small[b-wqmtzxtaxt] {
        display: flex;
        flex-direction: column;
        gap: 3px;
        color: #8b9bb0;
        font-size: 10px;
        line-height: 1.5;
    }

/* =========================================================
   LATEST REPORTS
   ========================================================= */

.parent-report-list[b-wqmtzxtaxt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.parent-report-card[b-wqmtzxtaxt] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
    padding: 19px;
    background: #fff;
    border: 1px solid var(--parent-border);
    border-radius: 14px;
    box-shadow: 0 3px 12px rgba(27, 57, 91, 0.02);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

    .parent-report-card:hover[b-wqmtzxtaxt] {
        border-color: #cfe2f8;
        box-shadow: 0 5px 16px rgba(27, 57, 91, 0.05);
    }

.parent-report-date[b-wqmtzxtaxt] {
    display: flex;
    flex: 0 0 58px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 68px;
    padding: 8px 5px;
    color: #0874e8;
    background: #eef6ff;
    border: 1px solid #e2efff;
    border-radius: 12px;
}

    .parent-report-date > strong[b-wqmtzxtaxt] {
        font-size: 25px;
        font-weight: 850;
        line-height: 1.15;
    }

    .parent-report-date > span[b-wqmtzxtaxt] {
        margin-top: 5px;
        font-size: 10px;
        font-weight: 750;
        text-align: center;
    }

.parent-report-content[b-wqmtzxtaxt] {
    flex: 1;
    min-width: 0;
}

.parent-report-title-row[b-wqmtzxtaxt] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.parent-report-content h3[b-wqmtzxtaxt] {
    margin: 0;
    color: var(--parent-text);
    font-size: 14px;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.parent-report-class[b-wqmtzxtaxt] {
    margin: 5px 0 0;
    color: var(--parent-muted);
    font-size: 11px;
}

.parent-final-badge[b-wqmtzxtaxt] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    color: #16845a;
    background: #eaf9f0;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 750;
}

    .parent-final-badge > span[b-wqmtzxtaxt] {
        width: 6px;
        height: 6px;
        background: #16a66a;
        border-radius: 50%;
    }

.parent-report-description[b-wqmtzxtaxt] {
    margin: 10px 0 0;
    color: #526982;
    font-size: 12px;
    line-height: 1.7;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

    .parent-report-description strong[b-wqmtzxtaxt] {
        color: #344d68;
        font-weight: 750;
    }

.parent-report-teacher[b-wqmtzxtaxt] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 13px;
    color: #8192a7;
    font-size: 10px;
}

    .parent-report-teacher strong[b-wqmtzxtaxt] {
        color: #526982;
        font-weight: 750;
    }

.parent-teacher-avatar[b-wqmtzxtaxt] {
    display: flex;
    flex: 0 0 26px;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: #6f63d9;
    background: #f0efff;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 800;
}

.parent-report-button[b-wqmtzxtaxt] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 37px;
    padding: 0 13px;
    color: #0874e8;
    background: #eef6ff;
    border: 1px solid #d4e7ff;
    border-radius: 9px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

    .parent-report-button svg[b-wqmtzxtaxt] {
        display: block;
        flex: 0 0 17px;
        width: 17px;
        height: 17px;
    }

    .parent-report-button:hover[b-wqmtzxtaxt] {
        color: #fff;
        background: #087cf0;
        border-color: #087cf0;
    }

    .parent-report-button:focus-visible[b-wqmtzxtaxt],
    .parent-retry-button:focus-visible[b-wqmtzxtaxt] {
        outline: 3px solid rgba(8, 124, 240, 0.3);
        outline-offset: 3px;
    }

/* =========================================================
   EMPTY STATE
   ========================================================= */

.parent-empty[b-wqmtzxtaxt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 35px 20px;
    text-align: center;
    background: #fff;
    border: 1px dashed #dce6f2;
    border-radius: 14px;
}

.parent-empty-icon[b-wqmtzxtaxt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 13px;
    color: #7c78dc;
    background: #f1f0ff;
    border-radius: 15px;
    font-size: 25px;
}

.parent-empty > strong[b-wqmtzxtaxt] {
    color: var(--parent-text);
    font-size: 13px;
    font-weight: 800;
}

.parent-empty > p[b-wqmtzxtaxt] {
    max-width: 420px;
    margin: 8px 0 0;
    color: var(--parent-muted);
    font-size: 12px;
    line-height: 1.7;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {
    .parent-welcome[b-wqmtzxtaxt] {
        grid-template-columns: minmax(250px, 0.85fr) minmax(0, 1.4fr);
    }

    .parent-welcome-content[b-wqmtzxtaxt] {
        padding: 24px;
    }

    .parent-welcome h1[b-wqmtzxtaxt] {
        font-size: clamp(25px, 3vw, 32px);
    }

    .parent-child-grid[b-wqmtzxtaxt] {
        grid-template-columns: 1fr;
    }

    .parent-child-card[b-wqmtzxtaxt] {
        padding: 17px;
    }
}

/* =========================================================
   TABLET PORTRAIT AND MOBILE
   ========================================================= */

@media (max-width: 850px) {
    .parent-welcome[b-wqmtzxtaxt] {
        grid-template-columns: minmax(0, 1fr);
    }

    .parent-welcome-content[b-wqmtzxtaxt] {
        padding: 25px 24px 22px;
    }

    .parent-welcome h1[b-wqmtzxtaxt] {
        font-size: clamp(27px, 5vw, 34px);
    }

    .parent-welcome-image[b-wqmtzxtaxt] {
        display: block;
        width: 100%;
        height: auto;
        min-height: 0;
    }

        .parent-welcome-image img[b-wqmtzxtaxt] {
            display: block;
            width: 100%;
            height: auto;
            min-height: 0;
            object-fit: contain;
        }

    .parent-welcome-heart[b-wqmtzxtaxt] {
        top: 12px;
        right: 12px;
        width: 42px;
        height: 42px;
        border-radius: 13px;
        font-size: 21px;
    }

    .parent-stats[b-wqmtzxtaxt] {
        gap: 12px;
    }

    .parent-stat-card[b-wqmtzxtaxt] {
        padding: 18px;
    }

    .parent-stat-icon[b-wqmtzxtaxt] {
        flex-basis: 48px;
        width: 48px;
        height: 48px;
    }

        .parent-stat-icon svg[b-wqmtzxtaxt] {
            width: 24px;
            height: 24px;
        }

    .parent-report-card[b-wqmtzxtaxt] {
        gap: 13px;
    }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {
    .parent-welcome[b-wqmtzxtaxt] {
        border-radius: 14px;
    }

    .parent-welcome-content[b-wqmtzxtaxt] {
        padding: 22px 18px 19px;
    }

    .parent-eyebrow[b-wqmtzxtaxt] {
        margin-bottom: 10px;
        font-size: 10px;
    }

    .parent-welcome h1[b-wqmtzxtaxt] {
        font-size: 27px;
        letter-spacing: -0.5px;
    }

    .parent-welcome-content > p[b-wqmtzxtaxt] {
        margin-top: 10px;
        font-size: 12px;
    }

    .parent-welcome-badge[b-wqmtzxtaxt] {
        margin-top: 15px;
        padding: 8px 11px;
        font-size: 10px;
    }

    .parent-welcome-heart[b-wqmtzxtaxt] {
        width: 38px;
        height: 38px;
        font-size: 19px;
    }

    .parent-stats[b-wqmtzxtaxt] {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        margin-top: 13px;
    }

    .parent-stat-card[b-wqmtzxtaxt] {
        gap: 13px;
        padding: 15px;
        border-radius: 12px;
    }

    .parent-stat-icon[b-wqmtzxtaxt] {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
        border-radius: 13px;
    }

        .parent-stat-icon svg[b-wqmtzxtaxt] {
            width: 22px;
            height: 22px;
        }

    .parent-stat-body > strong[b-wqmtzxtaxt] {
        font-size: 26px;
    }

    .parent-stat-label[b-wqmtzxtaxt] {
        font-size: 11px;
    }

    .parent-stat-caption[b-wqmtzxtaxt] {
        font-size: 10px;
    }

    .parent-section[b-wqmtzxtaxt] {
        margin-top: 24px;
    }

    .parent-section-heading[b-wqmtzxtaxt] {
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 12px;
    }

        .parent-section-heading h2[b-wqmtzxtaxt] {
            font-size: 18px;
        }

        .parent-section-heading p[b-wqmtzxtaxt] {
            font-size: 11px;
        }

    .parent-section-count[b-wqmtzxtaxt] {
        padding: 6px 9px;
        font-size: 9px;
    }

    .parent-child-grid[b-wqmtzxtaxt] {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .parent-child-card[b-wqmtzxtaxt] {
        flex-wrap: wrap;
        gap: 12px;
        padding: 14px;
        border-radius: 12px;
    }

    .parent-child-avatar[b-wqmtzxtaxt] {
        flex-basis: 43px;
        width: 43px;
        height: 43px;
        border-radius: 13px;
    }

    .parent-child-info h3[b-wqmtzxtaxt] {
        font-size: 13px;
    }

    .parent-child-info p[b-wqmtzxtaxt] {
        margin-top: 5px;
        font-size: 10px;
    }

    .parent-child-report[b-wqmtzxtaxt] {
        flex-basis: 100%;
        align-items: flex-start;
        gap: 4px;
        max-width: none;
        padding-left: 55px;
        text-align: left;
    }

        .parent-child-report > strong[b-wqmtzxtaxt] {
            font-size: 21px;
        }

        .parent-child-report > small[b-wqmtzxtaxt] {
            flex-direction: row;
            flex-wrap: wrap;
            gap: 4px;
        }

    .parent-report-list[b-wqmtzxtaxt] {
        gap: 10px;
    }

    .parent-report-card[b-wqmtzxtaxt] {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 12px;
        padding: 13px;
        border-radius: 12px;
    }

    .parent-report-date[b-wqmtzxtaxt] {
        grid-column: 1;
        grid-row: 1;
        width: 48px;
        min-height: 58px;
        padding: 6px 3px;
        border-radius: 10px;
    }

        .parent-report-date > strong[b-wqmtzxtaxt] {
            font-size: 21px;
        }

        .parent-report-date > span[b-wqmtzxtaxt] {
            margin-top: 4px;
            font-size: 9px;
        }

    .parent-report-content[b-wqmtzxtaxt] {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }

    .parent-report-title-row[b-wqmtzxtaxt] {
        flex-wrap: wrap;
        gap: 7px;
    }

    .parent-report-content h3[b-wqmtzxtaxt] {
        font-size: 13px;
    }

    .parent-report-class[b-wqmtzxtaxt] {
        font-size: 10px;
    }

    .parent-final-badge[b-wqmtzxtaxt] {
        padding: 4px 7px;
        font-size: 9px;
    }

    .parent-report-description[b-wqmtzxtaxt] {
        margin-top: 8px;
        font-size: 11px;
    }

    .parent-report-teacher[b-wqmtzxtaxt] {
        margin-top: 10px;
        font-size: 10px;
    }

    .parent-report-button[b-wqmtzxtaxt] {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        min-height: 39px;
        font-size: 11px;
    }

    .parent-empty[b-wqmtzxtaxt] {
        padding: 27px 15px;
    }

    .parent-error[b-wqmtzxtaxt] {
        padding: 15px;
    }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {
    .parent-welcome-content[b-wqmtzxtaxt] {
        padding: 19px 15px;
    }

    .parent-welcome h1[b-wqmtzxtaxt] {
        font-size: 24px;
    }

    .parent-welcome-badge[b-wqmtzxtaxt] {
        align-items: flex-start;
        font-size: 9px;
    }

    .parent-section-heading[b-wqmtzxtaxt] {
        flex-direction: column;
        align-items: flex-start;
    }

    .parent-report-card[b-wqmtzxtaxt] {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 9px;
        padding: 10px;
    }

    .parent-report-date[b-wqmtzxtaxt] {
        width: 42px;
    }

    .parent-report-title-row[b-wqmtzxtaxt] {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .parent-loading-spinner[b-wqmtzxtaxt] {
        animation: none;
    }

    .parent-child-card[b-wqmtzxtaxt],
    .parent-report-card[b-wqmtzxtaxt],
    .parent-report-button[b-wqmtzxtaxt] {
        transition: none;
    }
}
/* _content/DailyReport.Web/Components/Pages/Parent/LaporanDetail.razor.rz.scp.css */

/* =========================================================
   PARENT REPORT DETAIL
   Kiddy Place - DailyReport
   ========================================================= */

.parent-detail-page[b-ydt0dm7kui] {
    --detail-text: #173253;
    --detail-muted: #74869d;
    --detail-border: #e4edf7;
    --detail-blue: #087cf0;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 4px 0 30px;
    color: var(--detail-text);
    font-family: "Segoe UI", Arial, sans-serif;
}

    .parent-detail-page *[b-ydt0dm7kui],
    .parent-detail-page *[b-ydt0dm7kui]::before,
    .parent-detail-page *[b-ydt0dm7kui]::after {
        box-sizing: border-box;
    }

/* =========================================================
   TOOLBAR
   ========================================================= */

.parent-detail-toolbar[b-ydt0dm7kui] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.parent-detail-back[b-ydt0dm7kui] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 15px;
    color: #41617f;
    background: #fff;
    border: 1px solid var(--detail-border);
    border-radius: 10px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
}

    .parent-detail-back:hover[b-ydt0dm7kui] {
        background: #edf6ff;
        border-color: #cfe2f8;
    }

    .parent-detail-back span[b-ydt0dm7kui] {
        font-size: 18px;
    }

/* =========================================================
   REPORT HEADER
   ========================================================= */

.parent-detail-header[b-ydt0dm7kui] {
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    padding: 28px;
    background: linear-gradient(120deg, #edf7ff, #f5f2ff);
    border: 1px solid #e2edfa;
    border-radius: 17px;
}

.parent-detail-eyebrow[b-ydt0dm7kui] {
    display: block;
    margin-bottom: 10px;
    color: #347cc3;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.parent-detail-header h1[b-ydt0dm7kui] {
    margin: 0;
    color: var(--detail-text);
    font-size: clamp(25px, 3vw, 34px);
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: -.7px;
}

.parent-detail-header > p[b-ydt0dm7kui] {
    margin: 9px 0 0;
    color: var(--detail-muted);
    font-size: 13px;
    line-height: 1.7;
}

.parent-detail-meta[b-ydt0dm7kui] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 23px;
}

    .parent-detail-meta > div[b-ydt0dm7kui] {
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 0;
        padding: 14px;
        background: rgba(255, 255, 255, .78);
        border: 1px solid rgba(255, 255, 255, .9);
        border-radius: 11px;
    }

    .parent-detail-meta span[b-ydt0dm7kui] {
        color: var(--detail-muted);
        font-size: 10px;
        font-weight: 650;
    }

    .parent-detail-meta strong[b-ydt0dm7kui] {
        color: var(--detail-text);
        font-size: 12px;
        font-weight: 800;
        overflow-wrap: anywhere;
    }

/* =========================================================
   STUDENT CARD
   ========================================================= */

.parent-detail-card[b-ydt0dm7kui] {
    margin-bottom: 17px;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--detail-border);
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(27, 57, 91, .035);
}

.parent-detail-student[b-ydt0dm7kui] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 21px;
    border-bottom: 1px solid #edf1f7;
}

.parent-detail-avatar[b-ydt0dm7kui] {
    display: flex;
    flex: 0 0 52px;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    color: #0874e8;
    background: #eaf4ff;
    border: 1px solid #dfedff;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 850;
}

.parent-detail-student h2[b-ydt0dm7kui] {
    margin: 0;
    color: var(--detail-text);
    font-size: 20px;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.parent-detail-student p[b-ydt0dm7kui] {
    margin: 5px 0 0;
    color: var(--detail-muted);
    font-size: 11px;
}

/* =========================================================
   REPORT SECTIONS
   ========================================================= */

.parent-detail-section[b-ydt0dm7kui] {
    margin-top: 23px;
}

    .parent-detail-section h3[b-ydt0dm7kui] {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 0 15px;
        color: var(--detail-text);
        font-size: 15px;
        font-weight: 850;
    }

        .parent-detail-section h3[b-ydt0dm7kui]::before {
            display: block;
            flex: 0 0 4px;
            width: 4px;
            height: 21px;
            background: #6b8ff0;
            border-radius: 4px;
            content: "";
        }

.parent-detail-fields[b-ydt0dm7kui] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

    .parent-detail-fields > div[b-ydt0dm7kui] {
        display: flex;
        flex-direction: column;
        gap: 7px;
        min-width: 0;
        padding: 14px 15px;
        background: #f8faff;
        border: 1px solid #edf1f8;
        border-radius: 10px;
    }

        .parent-detail-fields > div > span[b-ydt0dm7kui] {
            color: var(--detail-muted);
            font-size: 11px;
            font-weight: 600;
            line-height: 1.5;
        }

        .parent-detail-fields > div > strong[b-ydt0dm7kui],
        .parent-detail-fields > div > p[b-ydt0dm7kui] {
            margin: 0;
            color: #304b69;
            font-size: 12px;
            font-weight: 700;
            line-height: 1.7;
            overflow-wrap: anywhere;
            white-space: pre-line;
        }

    .parent-detail-fields > .parent-detail-field-full[b-ydt0dm7kui] {
        grid-column: 1 / -1;
    }

/* =========================================================
   PHOTO SECTION
   ========================================================= */

.parent-detail-photo-note[b-ydt0dm7kui] {
    margin: -5px 0 13px;
    color: var(--detail-muted);
    font-size: 11px;
    line-height: 1.7;
}

.parent-detail-photos[b-ydt0dm7kui] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.parent-detail-photo[b-ydt0dm7kui] {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 75px;
    padding: 13px;
    background: #f8faff;
    border: 1px solid var(--detail-border);
    border-radius: 10px;
}

    .parent-detail-photo span[b-ydt0dm7kui] {
        color: #526982;
        font-size: 11px;
        overflow-wrap: anywhere;
    }

/* =========================================================
   FOOTER / STATUS
   ========================================================= */

.parent-detail-footer[b-ydt0dm7kui] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
    padding: 17px 21px;
    background: #eaf9f0;
    border: 1px solid #ddf3e5;
    border-radius: 12px;
}

    .parent-detail-footer > span[b-ydt0dm7kui] {
        color: #527a67;
        font-size: 12px;
        font-weight: 650;
    }

    .parent-detail-footer > strong[b-ydt0dm7kui] {
        padding: 6px 12px;
        color: #16845a;
        background: #fff;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 800;
    }

/* =========================================================
   LOADING / ERROR STATES
   ========================================================= */

.parent-detail-state[b-ydt0dm7kui] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    color: var(--detail-muted);
    background: #fff;
    border: 1px solid var(--detail-border);
    border-radius: 14px;
    font-size: 13px;
}

.parent-detail-error[b-ydt0dm7kui] {
    padding: 25px;
    background: #fff6f5;
    border: 1px solid #f5d8d4;
    border-radius: 14px;
}

    .parent-detail-error h2[b-ydt0dm7kui] {
        margin: 0;
        color: #92352e;
        font-size: 18px;
    }

    .parent-detail-error p[b-ydt0dm7kui] {
        margin: 9px 0 17px;
        color: #936a66;
        font-size: 12px;
        line-height: 1.7;
    }

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 850px) {
    .parent-detail-header[b-ydt0dm7kui] {
        padding: 23px;
    }

    .parent-detail-card[b-ydt0dm7kui] {
        padding: 20px;
    }

    .parent-detail-meta[b-ydt0dm7kui] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .parent-detail-photos[b-ydt0dm7kui] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {
    .parent-detail-page[b-ydt0dm7kui] {
        padding-bottom: 20px;
    }

    .parent-detail-toolbar[b-ydt0dm7kui] {
        margin-bottom: 13px;
    }

    .parent-detail-back[b-ydt0dm7kui] {
        min-height: 38px;
        padding: 0 12px;
        font-size: 11px;
    }

    .parent-detail-header[b-ydt0dm7kui] {
        padding: 20px 17px;
        border-radius: 13px;
    }

        .parent-detail-header h1[b-ydt0dm7kui] {
            font-size: 25px;
        }

        .parent-detail-header > p[b-ydt0dm7kui] {
            font-size: 12px;
        }

    .parent-detail-meta[b-ydt0dm7kui] {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        margin-top: 18px;
    }

        .parent-detail-meta > div[b-ydt0dm7kui] {
            padding: 12px;
        }

    .parent-detail-card[b-ydt0dm7kui] {
        padding: 16px;
        border-radius: 13px;
    }

    .parent-detail-student[b-ydt0dm7kui] {
        gap: 11px;
        padding-bottom: 17px;
    }

    .parent-detail-avatar[b-ydt0dm7kui] {
        flex-basis: 45px;
        width: 45px;
        height: 45px;
        border-radius: 13px;
    }

    .parent-detail-student h2[b-ydt0dm7kui] {
        font-size: 17px;
    }

    .parent-detail-section[b-ydt0dm7kui] {
        margin-top: 21px;
    }

        .parent-detail-section h3[b-ydt0dm7kui] {
            font-size: 14px;
        }

    .parent-detail-fields[b-ydt0dm7kui] {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

        .parent-detail-fields > div[b-ydt0dm7kui] {
            padding: 12px;
        }

        .parent-detail-fields > .parent-detail-field-full[b-ydt0dm7kui] {
            grid-column: auto;
        }

    .parent-detail-photos[b-ydt0dm7kui] {
        grid-template-columns: minmax(0, 1fr);
    }

    .parent-detail-footer[b-ydt0dm7kui] {
        padding: 14px;
    }
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .parent-detail-back[b-ydt0dm7kui] {
        transition: none;
    }
}


.parent-detail-photos[b-ydt0dm7kui] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.parent-detail-photo[b-ydt0dm7kui] {
    min-width: 0;
    overflow: hidden;
    background: #f8faff;
    border: 1px solid var(--detail-border);
    border-radius: 12px;
}

    .parent-detail-photo a[b-ydt0dm7kui] {
        display: block;
        width: 100%;
    }

    .parent-detail-photo img[b-ydt0dm7kui] {
        display: block;
        width: 100%;
        height: 220px;
        object-fit: cover;
        object-position: center;
        transition: transform .2s ease;
    }

    .parent-detail-photo a:hover img[b-ydt0dm7kui] {
        transform: scale(1.03);
    }

.parent-detail-photo-error[b-ydt0dm7kui] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    min-height: 120px;
    padding: 15px;
    color: #74869d;
    font-size: 11px;
    overflow-wrap: anywhere;
}

    .parent-detail-photo-error small[b-ydt0dm7kui] {
        color: #9aa8b8;
    }

@media (max-width: 850px) {
    .parent-detail-photos[b-ydt0dm7kui] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .parent-detail-photos[b-ydt0dm7kui] {
        grid-template-columns: minmax(0, 1fr);
    }

    .parent-detail-photo img[b-ydt0dm7kui] {
        height: 230px;
    }
}


/* =========================================================
   CLICKABLE PHOTO GALLERY
   ========================================================= */

.parent-detail-photo[b-ydt0dm7kui] {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background: #f1f5fb;
    border: 1px solid var(--detail-border);
    border-radius: 12px;
    cursor: zoom-in;
    text-align: left;
}

    .parent-detail-photo img[b-ydt0dm7kui] {
        display: block;
        width: 100%;
        height: 220px;
        object-fit: cover;
        transition: transform .2s ease;
    }

    .parent-detail-photo:hover img[b-ydt0dm7kui] {
        transform: scale(1.035);
    }

.parent-detail-photo-overlay[b-ydt0dm7kui] {
    position: absolute;
    inset: auto 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px;
    color: #fff;
    background: linear-gradient( transparent, rgba(12, 29, 52, .8));
    font-size: 11px;
    font-weight: 750;
    opacity: 0;
    transition: opacity .18s ease;
}

.parent-detail-photo:hover .parent-detail-photo-overlay[b-ydt0dm7kui],
.parent-detail-photo:focus-visible .parent-detail-photo-overlay[b-ydt0dm7kui] {
    opacity: 1;
}

.parent-detail-photo-overlay > span[b-ydt0dm7kui] {
    font-size: 22px;
}

/* =========================================================
   PHOTO MODAL
   ========================================================= */

.parent-photo-modal[b-ydt0dm7kui] {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 65px 70px 35px;
    background: rgba(9, 18, 33, .91);
    backdrop-filter: blur(5px);
    outline: none;
}

.parent-photo-modal-content[b-ydt0dm7kui] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

    .parent-photo-modal-content > img[b-ydt0dm7kui] {
        display: block;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: calc(100% - 55px);
        object-fit: contain;
        border-radius: 7px;
        box-shadow: 0 12px 45px rgba(0, 0, 0, .3);
    }

.parent-photo-modal-caption[b-ydt0dm7kui] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    width: min(100%, 1000px);
    margin-top: 15px;
    color: #fff;
    font-size: 12px;
}

    .parent-photo-modal-caption > span[b-ydt0dm7kui] {
        overflow-wrap: anywhere;
    }

    .parent-photo-modal-caption > small[b-ydt0dm7kui] {
        flex: 0 0 auto;
        color: #c4d0e0;
        font-size: 11px;
    }

.parent-photo-modal-close[b-ydt0dm7kui] {
    position: absolute;
    top: 18px;
    right: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    font-size: 29px;
    line-height: 1;
    cursor: pointer;
    transition: background .18s ease;
}

    .parent-photo-modal-close:hover[b-ydt0dm7kui] {
        background: rgba(255, 255, 255, .24);
    }

.parent-photo-modal-nav[b-ydt0dm7kui] {
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    font-size: 31px;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background .18s ease;
}

    .parent-photo-modal-nav:hover:not(:disabled)[b-ydt0dm7kui] {
        background: rgba(255, 255, 255, .25);
    }

    .parent-photo-modal-nav:disabled[b-ydt0dm7kui] {
        opacity: .3;
        cursor: not-allowed;
    }

.parent-photo-modal-prev[b-ydt0dm7kui] {
    left: 18px;
}

.parent-photo-modal-next[b-ydt0dm7kui] {
    right: 18px;
}

@media (max-width: 600px) {
    .parent-photo-modal[b-ydt0dm7kui] {
        gap: 8px;
        padding: 65px 12px 24px;
    }

    .parent-photo-modal-content > img[b-ydt0dm7kui] {
        max-width: 100%;
        max-height: calc(100% - 65px);
    }

    .parent-photo-modal-nav[b-ydt0dm7kui] {
        position: fixed;
        top: auto;
        bottom: 15px;
        width: 40px;
        height: 40px;
        transform: none;
    }

    .parent-photo-modal-prev[b-ydt0dm7kui] {
        left: 20px;
    }

    .parent-photo-modal-next[b-ydt0dm7kui] {
        right: 20px;
    }

    .parent-photo-modal-caption[b-ydt0dm7kui] {
        flex-direction: column;
        gap: 5px;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .parent-detail-photo img[b-ydt0dm7kui],
    .parent-detail-photo-overlay[b-ydt0dm7kui],
    .parent-photo-modal-close[b-ydt0dm7kui],
    .parent-photo-modal-nav[b-ydt0dm7kui] {
        transition: none;
    }
}
/* =========================================================
   DOWNLOAD PDF
   ========================================================= */

.parent-detail-student[b-ydt0dm7kui] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.parent-detail-student-info[b-ydt0dm7kui] {
    flex: 1;
    min-width: 150px;
}

.parent-detail-download[b-ydt0dm7kui] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 10px 16px;
    border: 1px solid #2468a8;
    border-radius: 10px;
    background: #2468a8;
    color: #fff;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

    .parent-detail-download:hover:not(:disabled)[b-ydt0dm7kui] {
        background: #1b548b;
        border-color: #1b548b;
    }

    .parent-detail-download:focus-visible[b-ydt0dm7kui] {
        outline: 3px solid rgba(36, 104, 168, 0.3);
        outline-offset: 3px;
    }

    .parent-detail-download:disabled[b-ydt0dm7kui] {
        opacity: 0.65;
        cursor: wait;
    }

.parent-detail-download-error[b-ydt0dm7kui] {
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid #f1c5c5;
    border-radius: 10px;
    background: #fff4f4;
    color: #a4262c;
    font-size: 0.875rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

@media (max-width: 576px) {
    .parent-detail-download[b-ydt0dm7kui] {
        width: 100%;
    }

    .parent-detail-student-info[b-ydt0dm7kui] {
        flex-basis: calc(100% - 70px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .parent-detail-download[b-ydt0dm7kui] {
        transition: none;
    }
}
/* _content/DailyReport.Web/Components/Pages/Parent/ParentPortal.razor.rz.scp.css */
.account-page[b-uz9c837iv7]{max-width:1280px;margin:0 auto;padding:24px;color:#172033}.account-head[b-uz9c837iv7]{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:24px}.account-eyebrow[b-uz9c837iv7]{font-size:.72rem;letter-spacing:.14em;font-weight:800;color:#64748b}.account-head h1[b-uz9c837iv7],.register-card h1[b-uz9c837iv7]{margin:7px 0;font-size:clamp(1.6rem,3vw,2.15rem);font-weight:800;letter-spacing:-.035em}.account-head p[b-uz9c837iv7],.register-card>p[b-uz9c837iv7]{color:#64748b;margin:0}.account-btn[b-uz9c837iv7]{border:0;border-radius:10px;padding:11px 16px;background:#3159d9;color:white;font-weight:700;cursor:pointer;box-shadow:0 4px 10px #3159d922}.account-btn:hover[b-uz9c837iv7]{filter:brightness(.96)}.account-btn:disabled[b-uz9c837iv7]{opacity:.55;cursor:wait}.account-btn.secondary[b-uz9c837iv7]{background:#eef2ff;color:#334155;box-shadow:none}.account-btn.small[b-uz9c837iv7]{padding:7px 10px;font-size:.8rem}.account-btn.danger[b-uz9c837iv7]{background:#fff0f0;color:#b42318;box-shadow:none}.account-card[b-uz9c837iv7]{background:white;border:1px solid #e6eaf1;border-radius:16px;padding:22px;margin:0 0 18px;box-shadow:0 6px 22px #17203308}.account-card h2[b-uz9c837iv7]{font-size:1.05rem;font-weight:800;margin:0 0 18px}.account-card-head[b-uz9c837iv7]{display:flex;align-items:center;justify-content:space-between;gap:12px}.account-grid[b-uz9c837iv7]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.account-grid label[b-uz9c837iv7],.register-fields label[b-uz9c837iv7],.portal-select[b-uz9c837iv7]{display:flex;flex-direction:column;gap:7px;font-weight:700;font-size:.86rem;color:#334155}.account-grid input[b-uz9c837iv7],.account-grid select[b-uz9c837iv7],.register-fields input[b-uz9c837iv7],.register-fields select[b-uz9c837iv7],.portal-select select[b-uz9c837iv7]{width:100%;border:1px solid #d9e0ea;border-radius:9px;padding:11px 12px;background:#fff;color:#172033;outline:none}.account-grid input:focus[b-uz9c837iv7],.account-grid select:focus[b-uz9c837iv7],.register-fields input:focus[b-uz9c837iv7],.register-fields select:focus[b-uz9c837iv7],.portal-select select:focus[b-uz9c837iv7]{border-color:#647ce7;box-shadow:0 0 0 3px #647ce71c}.account-actions[b-uz9c837iv7]{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.account-table-wrap[b-uz9c837iv7]{width:100%;overflow-x:auto}.account-table[b-uz9c837iv7]{border-collapse:collapse;width:100%;min-width:650px}.account-table th[b-uz9c837iv7]{text-align:left;background:#f7f8fc;color:#64748b;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em}.account-table th[b-uz9c837iv7],.account-table td[b-uz9c837iv7]{padding:13px 14px;border-bottom:1px solid #edf0f5;vertical-align:middle}.account-table td[b-uz9c837iv7]{font-size:.9rem}.account-table td small[b-uz9c837iv7]{display:block;color:#64748b;margin-top:4px}.account-status[b-uz9c837iv7]{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:.75rem;font-weight:800;white-space:nowrap}.account-status.active[b-uz9c837iv7]{background:#e8f8ef;color:#137447}.account-status.inactive[b-uz9c837iv7]{background:#fff0f0;color:#b42318}.account-status.pending[b-uz9c837iv7]{background:#fff5df;color:#8b5a00}.account-alert[b-uz9c837iv7]{border-radius:10px;padding:12px 14px;margin-bottom:16px;font-size:.9rem}.account-alert.success[b-uz9c837iv7]{background:#eaf9f0;color:#12683e}.account-alert.error[b-uz9c837iv7]{background:#fff0f0;color:#a51d26}.register-shell[b-uz9c837iv7]{min-height:calc(100vh - 100px);display:grid;place-items:center;padding:28px 16px;background:linear-gradient(135deg,#f2f6ff,#fbfcff)}.register-card[b-uz9c837iv7]{width:min(100%,560px);background:white;border:1px solid #e5eaf3;border-radius:20px;padding:clamp(22px,5vw,38px);box-shadow:0 20px 60px #1c2d5012}.register-fields[b-uz9c837iv7]{display:grid;gap:14px;margin:24px 0}.account-btn.full[b-uz9c837iv7]{width:100%;padding:13px}.portal-report-list[b-uz9c837iv7]{display:grid;gap:10px;margin-top:20px}.portal-report[b-uz9c837iv7]{display:flex;justify-content:space-between;align-items:center;gap:15px;border:1px solid #e8edf4;border-radius:12px;padding:16px}.portal-report div[b-uz9c837iv7]{display:grid;gap:5px}.portal-report span[b-uz9c837iv7],.portal-report small[b-uz9c837iv7]{color:#64748b;font-size:.84rem}.portal-select[b-uz9c837iv7]{max-width:480px}@media(max-width:760px){.account-page[b-uz9c837iv7]{padding:16px}.account-head[b-uz9c837iv7]{align-items:flex-start;flex-direction:column}.account-grid[b-uz9c837iv7]{grid-template-columns:1fr}.account-card[b-uz9c837iv7]{padding:16px}.account-actions[b-uz9c837iv7]{flex-direction:column-reverse}.account-actions .account-btn[b-uz9c837iv7]{width:100%}.portal-report[b-uz9c837iv7]{align-items:flex-start}}
/* _content/DailyReport.Web/Components/Pages/Parent/Register.razor.rz.scp.css */
.account-page[b-i24jx6j4ix]{max-width:1280px;margin:0 auto;padding:24px;color:#172033}.account-head[b-i24jx6j4ix]{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:24px}.account-eyebrow[b-i24jx6j4ix]{font-size:.72rem;letter-spacing:.14em;font-weight:800;color:#64748b}.account-head h1[b-i24jx6j4ix],.register-card h1[b-i24jx6j4ix]{margin:7px 0;font-size:clamp(1.6rem,3vw,2.15rem);font-weight:800;letter-spacing:-.035em}.account-head p[b-i24jx6j4ix],.register-card>p[b-i24jx6j4ix]{color:#64748b;margin:0}.account-btn[b-i24jx6j4ix]{border:0;border-radius:10px;padding:11px 16px;background:#3159d9;color:white;font-weight:700;cursor:pointer;box-shadow:0 4px 10px #3159d922}.account-btn:hover[b-i24jx6j4ix]{filter:brightness(.96)}.account-btn:disabled[b-i24jx6j4ix]{opacity:.55;cursor:wait}.account-btn.secondary[b-i24jx6j4ix]{background:#eef2ff;color:#334155;box-shadow:none}.account-btn.small[b-i24jx6j4ix]{padding:7px 10px;font-size:.8rem}.account-btn.danger[b-i24jx6j4ix]{background:#fff0f0;color:#b42318;box-shadow:none}.account-card[b-i24jx6j4ix]{background:white;border:1px solid #e6eaf1;border-radius:16px;padding:22px;margin:0 0 18px;box-shadow:0 6px 22px #17203308}.account-card h2[b-i24jx6j4ix]{font-size:1.05rem;font-weight:800;margin:0 0 18px}.account-card-head[b-i24jx6j4ix]{display:flex;align-items:center;justify-content:space-between;gap:12px}.account-grid[b-i24jx6j4ix]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.account-grid label[b-i24jx6j4ix],.register-fields label[b-i24jx6j4ix],.portal-select[b-i24jx6j4ix]{display:flex;flex-direction:column;gap:7px;font-weight:700;font-size:.86rem;color:#334155}.account-grid input[b-i24jx6j4ix],.account-grid select[b-i24jx6j4ix],.register-fields input[b-i24jx6j4ix],.register-fields select[b-i24jx6j4ix],.portal-select select[b-i24jx6j4ix]{width:100%;border:1px solid #d9e0ea;border-radius:9px;padding:11px 12px;background:#fff;color:#172033;outline:none}.account-grid input:focus[b-i24jx6j4ix],.account-grid select:focus[b-i24jx6j4ix],.register-fields input:focus[b-i24jx6j4ix],.register-fields select:focus[b-i24jx6j4ix],.portal-select select:focus[b-i24jx6j4ix]{border-color:#647ce7;box-shadow:0 0 0 3px #647ce71c}.account-actions[b-i24jx6j4ix]{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.account-table-wrap[b-i24jx6j4ix]{width:100%;overflow-x:auto}.account-table[b-i24jx6j4ix]{border-collapse:collapse;width:100%;min-width:650px}.account-table th[b-i24jx6j4ix]{text-align:left;background:#f7f8fc;color:#64748b;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em}.account-table th[b-i24jx6j4ix],.account-table td[b-i24jx6j4ix]{padding:13px 14px;border-bottom:1px solid #edf0f5;vertical-align:middle}.account-table td[b-i24jx6j4ix]{font-size:.9rem}.account-table td small[b-i24jx6j4ix]{display:block;color:#64748b;margin-top:4px}.account-status[b-i24jx6j4ix]{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:.75rem;font-weight:800;white-space:nowrap}.account-status.active[b-i24jx6j4ix]{background:#e8f8ef;color:#137447}.account-status.inactive[b-i24jx6j4ix]{background:#fff0f0;color:#b42318}.account-status.pending[b-i24jx6j4ix]{background:#fff5df;color:#8b5a00}.account-alert[b-i24jx6j4ix]{border-radius:10px;padding:12px 14px;margin-bottom:16px;font-size:.9rem}.account-alert.success[b-i24jx6j4ix]{background:#eaf9f0;color:#12683e}.account-alert.error[b-i24jx6j4ix]{background:#fff0f0;color:#a51d26}.register-shell[b-i24jx6j4ix]{min-height:calc(100vh - 100px);display:grid;place-items:center;padding:28px 16px;background:linear-gradient(135deg,#f2f6ff,#fbfcff)}.register-card[b-i24jx6j4ix]{width:min(100%,560px);background:white;border:1px solid #e5eaf3;border-radius:20px;padding:clamp(22px,5vw,38px);box-shadow:0 20px 60px #1c2d5012}.register-fields[b-i24jx6j4ix]{display:grid;gap:14px;margin:24px 0}.account-btn.full[b-i24jx6j4ix]{width:100%;padding:13px}.portal-report-list[b-i24jx6j4ix]{display:grid;gap:10px;margin-top:20px}.portal-report[b-i24jx6j4ix]{display:flex;justify-content:space-between;align-items:center;gap:15px;border:1px solid #e8edf4;border-radius:12px;padding:16px}.portal-report div[b-i24jx6j4ix]{display:grid;gap:5px}.portal-report span[b-i24jx6j4ix],.portal-report small[b-i24jx6j4ix]{color:#64748b;font-size:.84rem}.portal-select[b-i24jx6j4ix]{max-width:480px}@media(max-width:760px){.account-page[b-i24jx6j4ix]{padding:16px}.account-head[b-i24jx6j4ix]{align-items:flex-start;flex-direction:column}.account-grid[b-i24jx6j4ix]{grid-template-columns:1fr}.account-card[b-i24jx6j4ix]{padding:16px}.account-actions[b-i24jx6j4ix]{flex-direction:column-reverse}.account-actions .account-btn[b-i24jx6j4ix]{width:100%}.portal-report[b-i24jx6j4ix]{align-items:flex-start}}
/* _content/DailyReport.Web/Components/Pages/Parent/RiwayatLaporan.razor.rz.scp.css */
/* Riwayat laporan orang tua — CSS terisolasi untuk RiwayatLaporan.razor */
.parent-history-page[b-x2w6l7zjs2] {
    --history-ink: #243047;
    --history-muted: #758198;
    --history-line: #e5eaf2;
    --history-blue: #3276bd;
    --history-blue-dark: #245d99;
    --history-pink: #fff0f2;
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px;
    color: var(--history-ink);
}

.parent-history-header[b-x2w6l7zjs2] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.parent-history-eyebrow[b-x2w6l7zjs2] {
    color: var(--history-blue);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .11em;
}

.parent-history-header h1[b-x2w6l7zjs2] {
    margin: 7px 0 6px;
    font-size: clamp(1.55rem, 2.6vw, 2.1rem);
    line-height: 1.2;
    font-weight: 800;
}

.parent-history-header p[b-x2w6l7zjs2] {
    margin: 0;
    color: var(--history-muted);
    font-size: .94rem;
}

.parent-history-count[b-x2w6l7zjs2] {
    min-width: 110px;
    padding: 12px 18px;
    border: 1px solid var(--history-line);
    border-radius: 14px;
    background: #fff;
    text-align: center;
}

.parent-history-count span[b-x2w6l7zjs2],
.parent-history-count strong[b-x2w6l7zjs2] {
    display: block;
}

.parent-history-count span[b-x2w6l7zjs2] {
    color: var(--history-muted);
    font-size: .75rem;
}

.parent-history-count strong[b-x2w6l7zjs2] {
    margin-top: 2px;
    font-size: 1.5rem;
}

.parent-history-filters[b-x2w6l7zjs2] {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) minmax(150px, 1fr) minmax(145px, 1fr) minmax(145px, 1fr) auto;
    align-items: end;
    gap: 12px;
    margin-bottom: 20px;
    padding: 18px;
    border: 1px solid var(--history-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 18px rgb(31 50 82 / 4%);
}

.history-field[b-x2w6l7zjs2] {
    min-width: 0;
}

.history-field label[b-x2w6l7zjs2] {
    display: block;
    margin-bottom: 7px;
    color: #526078;
    font-size: .78rem;
    font-weight: 700;
}

.history-field input[b-x2w6l7zjs2],
.history-field select[b-x2w6l7zjs2] {
    box-sizing: border-box;
    width: 100%;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid #dce3ed;
    border-radius: 9px;
    outline: none;
    background: #fff;
    color: var(--history-ink);
    font: inherit;
    font-size: .86rem;
}

.history-field input:focus[b-x2w6l7zjs2],
.history-field select:focus[b-x2w6l7zjs2] {
    border-color: var(--history-blue);
    box-shadow: 0 0 0 3px rgb(50 118 189 / 12%);
}

.history-filter-actions[b-x2w6l7zjs2] {
    display: flex;
    gap: 7px;
}

.history-button[b-x2w6l7zjs2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 39px;
    padding: 9px 13px;
    border: 1px solid transparent;
    border-radius: 9px;
    font: inherit;
    font-size: .82rem;
    font-weight: 750;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
    white-space: nowrap;
}

.history-button:hover[b-x2w6l7zjs2] {
    transform: translateY(-1px);
}

.history-button-primary[b-x2w6l7zjs2] {
    color: #fff;
    background: var(--history-blue);
}

.history-button-primary:hover[b-x2w6l7zjs2] {
    background: var(--history-blue-dark);
}

.history-button-light[b-x2w6l7zjs2] {
    color: #4d5c72;
    border-color: var(--history-line);
    background: #fff;
}

.parent-history-results[b-x2w6l7zjs2] {
    display: grid;
    gap: 12px;
}

.parent-history-card[b-x2w6l7zjs2] {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 17px;
    padding: 17px;
    border: 1px solid var(--history-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 14px rgb(31 50 82 / 3%);
}

.history-card-date[b-x2w6l7zjs2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: start;
    min-height: 82px;
    border-radius: 12px;
    background: var(--history-pink);
    color: #b65367;
}

.history-card-date span[b-x2w6l7zjs2] {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.history-card-date strong[b-x2w6l7zjs2] {
    font-size: 1.8rem;
    line-height: 1.12;
}

.history-card-date small[b-x2w6l7zjs2] {
    font-size: .72rem;
}

.history-card-content[b-x2w6l7zjs2] {
    min-width: 0;
}

.history-card-title-row[b-x2w6l7zjs2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.history-card-title-row h2[b-x2w6l7zjs2] {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 800;
}

.history-status[b-x2w6l7zjs2] {
    padding: 4px 9px;
    border-radius: 999px;
    color: #25754b;
    background: #e9f7ef;
    font-size: .7rem;
    font-weight: 800;
}

.history-card-meta[b-x2w6l7zjs2] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 20px;
    margin-top: 8px;
    color: var(--history-muted);
    font-size: .82rem;
}

.history-card-meta b[b-x2w6l7zjs2],
.history-card-summary b[b-x2w6l7zjs2] {
    margin-right: 4px;
    color: #4b5870;
}

.history-card-summary[b-x2w6l7zjs2] {
    margin: 9px 0 0;
    color: #59677d;
    font-size: .86rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.history-card-actions[b-x2w6l7zjs2] {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.parent-history-state[b-x2w6l7zjs2],
.parent-history-empty[b-x2w6l7zjs2],
.parent-history-alert[b-x2w6l7zjs2] {
    padding: 38px 22px;
    border: 1px solid var(--history-line);
    border-radius: 16px;
    background: #fff;
    text-align: center;
}

.parent-history-state[b-x2w6l7zjs2] {
    color: var(--history-muted);
}

.parent-history-spinner[b-x2w6l7zjs2] {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border: 2px solid #dbe5f2;
    border-top-color: var(--history-blue);
    border-radius: 50%;
    animation: history-spin-b-x2w6l7zjs2 .8s linear infinite;
    vertical-align: -3px;
}

@keyframes history-spin-b-x2w6l7zjs2 {
    to { transform: rotate(360deg); }
}

.history-empty-icon[b-x2w6l7zjs2] {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    border-radius: 16px;
    color: var(--history-blue);
    background: #edf5ff;
    font-size: 1.8rem;
}

.parent-history-empty h2[b-x2w6l7zjs2],
.parent-history-alert h2[b-x2w6l7zjs2] {
    margin: 0 0 7px;
    font-size: 1.05rem;
}

.parent-history-empty p[b-x2w6l7zjs2],
.parent-history-alert p[b-x2w6l7zjs2] {
    margin: 0 0 16px;
    color: var(--history-muted);
    font-size: .88rem;
}

.parent-history-alert[b-x2w6l7zjs2] {
    color: #7b2934;
    border-color: #f3cbd0;
    background: #fff8f8;
}

@media (max-width: 1050px) {
    .parent-history-filters[b-x2w6l7zjs2] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .history-search-field[b-x2w6l7zjs2] {
        grid-column: 1 / -1;
    }

    .history-filter-actions[b-x2w6l7zjs2] {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

@media (max-width: 640px) {
    .parent-history-page[b-x2w6l7zjs2] {
        padding: 15px;
    }

    .parent-history-header[b-x2w6l7zjs2] {
        align-items: flex-start;
        flex-direction: column;
    }

    .parent-history-count[b-x2w6l7zjs2] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        box-sizing: border-box;
        text-align: left;
    }

    .parent-history-count span[b-x2w6l7zjs2],
    .parent-history-count strong[b-x2w6l7zjs2] {
        display: inline;
    }

    .parent-history-filters[b-x2w6l7zjs2] {
        grid-template-columns: minmax(0, 1fr);
        padding: 13px;
    }

    .history-search-field[b-x2w6l7zjs2],
    .history-filter-actions[b-x2w6l7zjs2] {
        grid-column: auto;
    }

    .parent-history-card[b-x2w6l7zjs2] {
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 11px;
        padding: 12px;
    }

    .history-card-date[b-x2w6l7zjs2] {
        min-height: 72px;
    }

    .history-card-date strong[b-x2w6l7zjs2] {
        font-size: 1.45rem;
    }

    .history-card-title-row[b-x2w6l7zjs2] {
        align-items: flex-start;
    }

    .history-card-title-row h2[b-x2w6l7zjs2] {
        font-size: .98rem;
    }

    .history-card-meta[b-x2w6l7zjs2] {
        flex-direction: column;
        gap: 5px;
    }

    .history-card-actions .history-button[b-x2w6l7zjs2] {
        width: 100%;
    }
}
/* _content/DailyReport.Web/Components/Pages/PenempatanSiswa.razor.rz.scp.css */
.placement-page[b-sm2puq2v11] {
    padding: 24px;
    color: #172033;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    min-width: 0;
}

.placement-header[b-sm2puq2v11] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}

.placement-eyebrow[b-sm2puq2v11] {
    display: block;
    color: #64748b;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .13em;
    margin-bottom: 6px;
}

.placement-header h1[b-sm2puq2v11] {
    margin: 0;
    font-size: clamp(1.45rem, 2vw, 2rem);
    font-weight: 750;
    letter-spacing: -.035em;
}

.placement-header p[b-sm2puq2v11] {
    margin: 8px 0 0;
    color: #64748b;
    font-size: .92rem;
}

.btn-placement-primary[b-sm2puq2v11],
.btn-placement-outline[b-sm2puq2v11] {
    min-height: 42px;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: .86rem;
    font-weight: 700;
    transition: .18s ease;
    cursor: pointer;
}

.btn-placement-primary[b-sm2puq2v11] {
    color: #fff;
    background: #3659d9;
    border: 1px solid #3659d9;
    box-shadow: 0 5px 12px rgb(54 89 217 / 15%);
}

.btn-placement-primary:hover[b-sm2puq2v11] {
    background: #2948bd;
    border-color: #2948bd;
}

.btn-placement-primary:disabled[b-sm2puq2v11],
.btn-placement-outline:disabled[b-sm2puq2v11] {
    opacity: .6;
    cursor: not-allowed;
}

.btn-placement-primary span[b-sm2puq2v11] {
    margin-right: 5px;
    font-size: 1.1rem;
}

.btn-placement-outline[b-sm2puq2v11] {
    color: #344054;
    background: #fff;
    border: 1px solid #d8deea;
}

.btn-placement-outline:hover[b-sm2puq2v11] {
    background: #f8fafc;
    border-color: #aebbd0;
}

.placement-filter[b-sm2puq2v11] {
    display: grid;
    grid-template-columns: minmax(240px, 1.6fr) minmax(160px, .8fr) minmax(190px, .9fr) auto;
    gap: 14px;
    align-items: end;
    padding: 18px;
    margin-bottom: 18px;
    border: 1px solid #e7ebf2;
    border-radius: 14px;
    background: #fff;
}

.placement-filter label[b-sm2puq2v11],
.placement-modal-body > label[b-sm2puq2v11],
.placement-confirm label[b-sm2puq2v11] {
    display: block;
    margin-bottom: 7px;
    color: #475467;
    font-size: .78rem;
    font-weight: 700;
}

.placement-filter .form-control[b-sm2puq2v11],
.placement-filter .form-select[b-sm2puq2v11],
.placement-modal .form-control[b-sm2puq2v11],
.placement-modal .form-select[b-sm2puq2v11],
.placement-confirm .form-control[b-sm2puq2v11] {
    min-height: 42px;
    border-color: #dce2ec;
    border-radius: 9px;
    font-size: .86rem;
    box-shadow: none;
}

.placement-filter .form-control:focus[b-sm2puq2v11],
.placement-filter .form-select:focus[b-sm2puq2v11],
.placement-modal .form-control:focus[b-sm2puq2v11],
.placement-modal .form-select:focus[b-sm2puq2v11],
.placement-confirm .form-control:focus[b-sm2puq2v11] {
    border-color: #8098f9;
    box-shadow: 0 0 0 3px rgb(54 89 217 / 10%);
}

.placement-summary[b-sm2puq2v11] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    margin-bottom: 18px;
    border: 1px solid #e7ebf2;
    border-radius: 14px;
    background: #fff;
}

.placement-summary-icon[b-sm2puq2v11] {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: #3659d9;
    background: #eef2ff;
    border-radius: 12px;
    font-size: 1.4rem;
}

.placement-summary strong[b-sm2puq2v11],
.placement-summary span[b-sm2puq2v11] {
    display: block;
}

.placement-summary strong[b-sm2puq2v11] {
    font-size: 1.2rem;
    line-height: 1.4;
}

.placement-summary span[b-sm2puq2v11] {
    color: #667085;
    font-size: .78rem;
}

.placement-summary-divider[b-sm2puq2v11] {
    width: 1px;
    height: 34px;
    margin: 0 10px;
    background: #e7ebf2;
}

.placement-table-card[b-sm2puq2v11] {
    overflow: hidden;
    border: 1px solid #e7ebf2;
    border-radius: 14px;
    background: #fff;
}

.placement-table-heading[b-sm2puq2v11] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 19px 20px;
    border-bottom: 1px solid #edf0f5;
}

.placement-table-heading h2[b-sm2puq2v11] {
    margin: 0;
    font-size: 1rem;
    font-weight: 750;
}

.placement-table-heading > span[b-sm2puq2v11] {
    color: #667085;
    font-size: .78rem;
}

.placement-table[b-sm2puq2v11] {
    margin: 0;
    white-space: nowrap;
}

.placement-table thead th[b-sm2puq2v11] {
    padding: 13px 18px;
    color: #667085;
    background: #f8fafc;
    border-bottom: 1px solid #e8edf4;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .045em;
}

.placement-table tbody td[b-sm2puq2v11] {
    padding: 15px 18px;
    border-color: #edf0f5;
    color: #344054;
    font-size: .82rem;
}

.placement-student-name[b-sm2puq2v11],
.placement-class-name[b-sm2puq2v11] {
    color: #1d2939;
    font-weight: 750;
}

.placement-student-nis[b-sm2puq2v11] {
    margin-top: 4px;
    color: #8490a3;
    font-size: .75rem;
}

.placement-status[b-sm2puq2v11] {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: .72rem;
    font-weight: 750;
}

.placement-status.active[b-sm2puq2v11] {
    color: #087443;
    background: #e7f8ef;
}

.placement-status.inactive[b-sm2puq2v11] {
    color: #667085;
    background: #eef0f4;
}

.btn-row-action[b-sm2puq2v11] {
    padding: 5px 8px;
    color: #3659d9;
    background: transparent;
    border: 0;
    border-radius: 6px;
    font-size: .78rem;
    font-weight: 750;
}

.btn-row-action:hover[b-sm2puq2v11] {
    background: #eef2ff;
}

.btn-row-action.danger[b-sm2puq2v11] {
    color: #b42318;
}

.btn-row-action.danger:hover[b-sm2puq2v11] {
    background: #fff0ee;
}

.placement-empty[b-sm2puq2v11] {
    display: flex;
    min-height: 180px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 24px;
    color: #667085;
    text-align: center;
    font-size: .84rem;
}

.placement-empty strong[b-sm2puq2v11] {
    color: #344054;
    font-size: .94rem;
}

.placement-empty-icon[b-sm2puq2v11] {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 4px;
    border-radius: 50%;
    color: #64748b;
    background: #f1f5f9;
    font-size: 1.6rem;
}

.placement-alert[b-sm2puq2v11] {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    padding: 12px 15px;
    margin-bottom: 16px;
    border: 1px solid;
    border-radius: 10px;
    font-size: .85rem;
}

.placement-alert button[b-sm2puq2v11] {
    border: 0;
    background: transparent;
    font-size: 1.2rem;
}

.placement-alert.is-error[b-sm2puq2v11] {
    color: #b42318;
    background: #fff5f4;
    border-color: #fecdca;
}

.placement-alert.is-success[b-sm2puq2v11] {
    color: #067647;
    background: #ecfdf3;
    border-color: #abefc6;
}

.placement-modal-backdrop[b-sm2puq2v11] {
    position: fixed;
    z-index: 1060;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 22px;
    background: rgb(16 24 40 / 54%);
    backdrop-filter: blur(3px);
}

.placement-modal[b-sm2puq2v11],
.placement-confirm[b-sm2puq2v11] {
    width: min(100%, 540px);
    max-height: calc(100vh - 44px);
    overflow-y: auto;
    border: 1px solid rgb(255 255 255 / 60%);
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 24px 70px rgb(16 24 40 / 25%);
}

.placement-modal-header[b-sm2puq2v11] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 18px;
    border-bottom: 1px solid #edf0f5;
}

.placement-modal-header h2[b-sm2puq2v11],
.placement-confirm h2[b-sm2puq2v11] {
    margin: 0;
    color: #172033;
    font-size: 1.25rem;
    font-weight: 800;
}

.placement-modal-close[b-sm2puq2v11] {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 9px;
    color: #667085;
    background: #f2f4f7;
    font-size: 1.4rem;
    line-height: 1;
}

.placement-modal-body[b-sm2puq2v11] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 24px;
}

.placement-modal-body label:not(:first-child)[b-sm2puq2v11] {
    margin-top: 10px;
}

.placement-modal-body label span[b-sm2puq2v11] {
    color: #d92d20;
}

.placement-modal-body .validation-message[b-sm2puq2v11] {
    color: #b42318;
    font-size: .78rem;
}

.placement-modal-body .validation-summary-errors[b-sm2puq2v11] {
    padding: 10px 12px;
    border-radius: 8px;
    color: #b42318;
    background: #fff5f4;
    font-size: .82rem;
}

.placement-selected-student[b-sm2puq2v11] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    margin-bottom: 10px;
    border: 1px solid #e1e7f0;
    border-radius: 10px;
    background: #f8fafc;
}

.placement-selected-student span[b-sm2puq2v11] {
    color: #667085;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.placement-selected-student strong[b-sm2puq2v11] {
    color: #1d2939;
    font-size: .9rem;
}

.placement-selected-student small[b-sm2puq2v11] {
    color: #667085;
}

.placement-info[b-sm2puq2v11] {
    padding: 11px 13px;
    margin-top: 8px;
    border: 1px solid #dbeafe;
    border-radius: 9px;
    color: #1d4ed8;
    background: #eff6ff;
    font-size: .79rem;
    line-height: 1.55;
}

.placement-modal-footer[b-sm2puq2v11] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px 22px;
    border-top: 1px solid #edf0f5;
}

.placement-confirm[b-sm2puq2v11] {
    padding: 26px;
}

.placement-confirm-icon[b-sm2puq2v11] {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 16px;
    border-radius: 12px;
    color: #b54708;
    background: #fffaeb;
    font-size: 1.35rem;
    font-weight: 800;
}

.placement-confirm p[b-sm2puq2v11] {
    margin: 12px 0 20px;
    color: #667085;
    font-size: .88rem;
    line-height: 1.6;
}

.placement-confirm .placement-modal-footer[b-sm2puq2v11] {
    padding: 20px 0 0;
    margin-top: 20px;
}

@media (max-width: 1000px) {
    .placement-filter[b-sm2puq2v11] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .placement-filter > button[b-sm2puq2v11] {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .placement-page[b-sm2puq2v11] {
        padding: 16px 12px 24px;
    }

    .placement-header[b-sm2puq2v11] {
        align-items: flex-start;
        flex-direction: column;
    }

    .placement-header .btn-placement-primary[b-sm2puq2v11] {
        width: 100%;
    }

    .placement-filter[b-sm2puq2v11] {
        grid-template-columns: 1fr;
        padding: 14px;
    }

    .placement-summary[b-sm2puq2v11] {
        padding: 14px;
        gap: 10px;
    }

    .placement-summary-divider[b-sm2puq2v11] {
        margin: 0 2px;
    }

    .placement-table-heading[b-sm2puq2v11] {
        padding: 16px;
    }

    .placement-modal-backdrop[b-sm2puq2v11] {
        align-items: flex-start;
        padding: 12px;
    }

    .placement-modal[b-sm2puq2v11],
    .placement-confirm[b-sm2puq2v11] {
        margin: auto 0;
        max-height: calc(100vh - 24px);
    }

    .placement-modal-header[b-sm2puq2v11],
    .placement-modal-body[b-sm2puq2v11] {
        padding-left: 18px;
        padding-right: 18px;
    }

    .placement-modal-footer[b-sm2puq2v11] {
        padding: 14px 18px 18px;
    }

    .placement-confirm[b-sm2puq2v11] {
        padding: 20px;
    }
}
/* _content/DailyReport.Web/Components/Pages/Siswa.razor.rz.scp.css */
/* =========================================
   MASTER SISWA - MODULAR CSS
   ========================================= */

.siswa-page[b-w6qqibdzev] {
    min-height: 100%;
    padding: 22px 24px 30px;
    color: #172033;
    background: #f4f7fb;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

.siswa-page *[b-w6qqibdzev] { box-sizing: border-box; }

.siswa-header[b-w6qqibdzev], .siswa-card-header[b-w6qqibdzev] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.siswa-breadcrumb[b-w6qqibdzev] {
    margin-bottom: 8px;
    color: #6b7b93;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
}

.siswa-header h3[b-w6qqibdzev] { margin: 0; color: #172b4d; font-size: 25px; font-weight: 750; }
.siswa-header p[b-w6qqibdzev], .siswa-card-header p[b-w6qqibdzev] { margin: 7px 0 0; color: #71819a; font-size: 13px; }

.siswa-btn[b-w6qqibdzev] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    transition: .15s ease;
}

.siswa-btn:disabled[b-w6qqibdzev], .siswa-action-btn:disabled[b-w6qqibdzev] { cursor: not-allowed; opacity: .6; }
.siswa-btn-primary[b-w6qqibdzev] { color: #fff; background: #2864ed; box-shadow: 0 4px 10px #2864ed24; }
.siswa-btn-primary:hover:not(:disabled)[b-w6qqibdzev] { background: #1e50c7; }
.siswa-btn-secondary[b-w6qqibdzev] { color: #43536d; background: #fff; border-color: #d9e2ef; }
.siswa-btn-secondary:hover:not(:disabled)[b-w6qqibdzev] { background: #f7f9fc; }

.siswa-stats[b-w6qqibdzev] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    margin: 22px 0;
}

.siswa-stat-card[b-w6qqibdzev] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 19px 20px;
    border: 1px solid #e5ebf4;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 3px 12px #23395b06;
}

.siswa-stat-card span[b-w6qqibdzev] { color: #71819a; font-size: 12px; font-weight: 600; }
.siswa-stat-card strong[b-w6qqibdzev] { color: #172b4d; font-size: 26px; line-height: 1.1; }

.siswa-card[b-w6qqibdzev] {
    overflow: hidden;
    border: 1px solid #e2e9f3;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 4px 18px #23395b08;
}

.siswa-card-header[b-w6qqibdzev] { padding: 21px 22px; border-bottom: 1px solid #edf1f7; }
.siswa-card-header h4[b-w6qqibdzev] { margin: 0; color: #1c3154; font-size: 16px; font-weight: 750; }
.siswa-count[b-w6qqibdzev] { padding: 6px 10px; border-radius: 20px; background: #eef4ff; color: #2864d9; font-size: 12px; font-weight: 700; white-space: nowrap; }

.siswa-toolbar[b-w6qqibdzev] { display: flex; align-items: center; gap: 11px; padding: 16px 22px; border-bottom: 1px solid #edf1f7; }
.siswa-search[b-w6qqibdzev] { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 180px; padding: 0 12px; border: 1px solid #dce4ef; border-radius: 9px; background: #fff; }
.siswa-search > i[b-w6qqibdzev] { color: #8a99af; }
.siswa-search input[b-w6qqibdzev] { width: 100%; min-width: 0; height: 41px; border: 0; outline: 0; color: #253858; background: transparent; font-size: 13px; }
.siswa-search button[b-w6qqibdzev] { border: 0; background: transparent; color: #71819a; font-size: 21px; cursor: pointer; }
.siswa-filter[b-w6qqibdzev] { min-width: 145px; height: 43px; padding: 0 12px; border: 1px solid #dce4ef; border-radius: 9px; color: #43536d; background: #fff; font-size: 13px; }

.siswa-table-wrap[b-w6qqibdzev] { width: 100%; overflow-x: auto; }
.siswa-table[b-w6qqibdzev] { width: 100%; border-collapse: collapse; white-space: nowrap; }
.siswa-table thead[b-w6qqibdzev] { background: #f7f9fc; }
.siswa-table th[b-w6qqibdzev] { padding: 14px 18px; border-bottom: 1px solid #e8edf5; color: #596b87; text-align: left; font-size: 12px; font-weight: 750; }
.siswa-table td[b-w6qqibdzev] { padding: 15px 18px; border-bottom: 1px solid #edf1f7; color: #344563; font-size: 13px; }
.siswa-table tbody tr:last-child td[b-w6qqibdzev] { border-bottom: 0; }
.siswa-table tbody tr:hover[b-w6qqibdzev] { background: #fbfcff; }
.siswa-nis[b-w6qqibdzev] { color: #315fbe; font-weight: 700; }

.siswa-person[b-w6qqibdzev] { display: flex; align-items: center; gap: 11px; }
.siswa-person strong[b-w6qqibdzev] { color: #243858; font-weight: 700; }
.siswa-avatar[b-w6qqibdzev] { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 38px; border: 1px solid #d8e5ff; border-radius: 11px; color: #2864ed; background: #edf3ff; font-size: 12px; font-weight: 800; }

.siswa-status[b-w6qqibdzev] { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.siswa-status > span[b-w6qqibdzev] { width: 7px; height: 7px; border-radius: 50%; }
.siswa-status.is-active[b-w6qqibdzev] { color: #087d4b; background: #e3f8ed; }
.siswa-status.is-active > span[b-w6qqibdzev] { background: #0f9f62; }
.siswa-status.is-inactive[b-w6qqibdzev] { color: #69778b; background: #edf0f4; }
.siswa-status.is-inactive > span[b-w6qqibdzev] { background: #8793a5; }

.siswa-actions[b-w6qqibdzev] { display: flex; align-items: center; gap: 7px; }
.siswa-action-btn[b-w6qqibdzev] { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid #dce4ef; border-radius: 8px; color: #425674; background: #fff; font-size: 12px; font-weight: 650; cursor: pointer; }
.siswa-action-btn:hover:not(:disabled)[b-w6qqibdzev] { background: #f5f8fd; }
.siswa-action-btn.is-danger[b-w6qqibdzev] { color: #b42332; border-color: #f0d6d9; }
.siswa-action-btn.is-danger:hover:not(:disabled)[b-w6qqibdzev] { background: #fff5f5; }

.siswa-alert[b-w6qqibdzev] { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 16px; padding: 12px 15px; border: 1px solid; border-radius: 10px; font-size: 13px; line-height: 1.5; }
.siswa-alert-error[b-w6qqibdzev] { color: #a52834; border-color: #f4cdd1; background: #fff5f5; }
.siswa-alert-success[b-w6qqibdzev] { color: #087647; border-color: #c7eed9; background: #f0fff6; }

.siswa-empty[b-w6qqibdzev] { display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 9px; min-height: 220px; padding: 30px; color: #7a8aa2; text-align: center; }
.siswa-empty > i[b-w6qqibdzev] { font-size: 30px; color: #a4b3c8; }
.siswa-empty strong[b-w6qqibdzev] { color: #40516d; font-size: 14px; }
.siswa-empty p[b-w6qqibdzev] { margin: 0; font-size: 12px; }

.siswa-modal-backdrop[b-w6qqibdzev] { position: fixed; z-index: 1050; inset: 0; display: flex; align-items: center; justify-content: center; overflow-y: auto; padding: 22px; background: #14233b80; backdrop-filter: blur(3px); }
.siswa-modal[b-w6qqibdzev] { width: min(100%, 620px); max-height: calc(100vh - 44px); overflow-y: auto; border: 1px solid #e6ebf3; border-radius: 17px; background: #fff; box-shadow: 0 24px 70px #10213b30; }
.siswa-modal-header[b-w6qqibdzev] { display: flex; align-items: center; gap: 14px; padding: 22px 25px; border-bottom: 1px solid #edf1f7; }
.siswa-modal-icon[b-w6qqibdzev] { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex: 0 0 48px; border-radius: 14px; color: #2864ed; background: #edf3ff; font-size: 21px; }
.siswa-modal-title[b-w6qqibdzev] { flex: 1; }
.siswa-modal-title h4[b-w6qqibdzev] { margin: 0; color: #1d3153; font-size: 19px; font-weight: 800; }
.siswa-modal-title p[b-w6qqibdzev] { margin: 5px 0 0; color: #7788a1; font-size: 13px; }
.siswa-close[b-w6qqibdzev] { border: 0; color: #7d8ca3; background: transparent; font-size: 27px; cursor: pointer; }
.siswa-modal-body[b-w6qqibdzev] { display: grid; gap: 17px; padding: 23px 25px; }
.siswa-form-group[b-w6qqibdzev] { display: flex; flex-direction: column; gap: 7px; }
.siswa-form-group > label[b-w6qqibdzev] { color: #344563; font-size: 13px; font-weight: 700; }
.siswa-form-group > label span[b-w6qqibdzev] { color: #e23b48; }
.siswa-form-group .form-control[b-w6qqibdzev] { min-height: 43px; border-color: #d7e0ec; border-radius: 8px; font-size: 14px; }
.siswa-form-group .form-control:focus[b-w6qqibdzev] { border-color: #7aa3ff; box-shadow: 0 0 0 3px #2864ed16; }
.siswa-form-group .validation-message[b-w6qqibdzev] { color: #c02c3b; font-size: 12px; }
.siswa-modal-body .validation-summary-valid[b-w6qqibdzev] { display: none; }
.siswa-modal-body .validation-summary-errors[b-w6qqibdzev] { margin: 0; padding: 10px 13px; border: 1px solid #f4cdd1; border-radius: 8px; color: #a52834; background: #fff5f5; font-size: 12px; }
.siswa-active-toggle[b-w6qqibdzev] { padding: 12px; border: 1px solid #e0e8f3; border-radius: 9px; background: #f8faff; }
.siswa-check-label[b-w6qqibdzev] { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.siswa-check-label input[b-w6qqibdzev] { width: 16px; height: 16px; accent-color: #2864ed; }
.siswa-note[b-w6qqibdzev] { display: flex; align-items: flex-start; gap: 9px; padding: 12px 13px; border: 1px solid #dce7ff; border-radius: 9px; color: #526d9f; background: #f4f7ff; font-size: 12px; line-height: 1.6; }
.siswa-modal-footer[b-w6qqibdzev] { display: flex; justify-content: flex-end; gap: 10px; padding: 17px 25px 22px; border-top: 1px solid #edf1f7; background: #fbfcfe; }

.siswa-spinner[b-w6qqibdzev] { display: inline-block; width: 17px; height: 17px; border: 2px solid #d9e2f0; border-top-color: #2864ed; border-radius: 50%; animation: siswa-spin-b-w6qqibdzev .7s linear infinite; }
.siswa-spinner-white[b-w6qqibdzev] { border-color: #ffffff60; border-top-color: #fff; }
@keyframes siswa-spin-b-w6qqibdzev { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
    .siswa-page[b-w6qqibdzev] { padding: 18px; }
    .siswa-toolbar[b-w6qqibdzev] { flex-wrap: wrap; }
    .siswa-search[b-w6qqibdzev] { flex-basis: 100%; }
}

@media (max-width: 600px) {
    .siswa-page[b-w6qqibdzev] { padding: 14px; }
    .siswa-header[b-w6qqibdzev] { align-items: flex-start; flex-direction: column; }
    .siswa-header .siswa-btn[b-w6qqibdzev] { width: 100%; }
    .siswa-stats[b-w6qqibdzev] { grid-template-columns: 1fr; gap: 10px; }
    .siswa-stat-card[b-w6qqibdzev] { padding: 15px; }
    .siswa-card-header[b-w6qqibdzev] { align-items: flex-start; padding: 17px; }
    .siswa-toolbar[b-w6qqibdzev] { align-items: stretch; padding: 14px 17px; }
    .siswa-filter[b-w6qqibdzev], .siswa-toolbar > .siswa-btn[b-w6qqibdzev] { width: 100%; }
    .siswa-table th[b-w6qqibdzev], .siswa-table td[b-w6qqibdzev] { padding: 12px 14px; }
    .siswa-modal-backdrop[b-w6qqibdzev] { align-items: flex-start; padding: 12px; }
    .siswa-modal[b-w6qqibdzev] { max-height: calc(100vh - 24px); border-radius: 13px; }
    .siswa-modal-header[b-w6qqibdzev], .siswa-modal-body[b-w6qqibdzev] { padding: 18px; }
    .siswa-modal-footer[b-w6qqibdzev] { padding: 15px 18px 18px; }
    .siswa-modal-footer .siswa-btn[b-w6qqibdzev] { flex: 1; }
}
/* _content/DailyReport.Web/Components/Pages/TahunAjaran.razor.rz.scp.css */

.ta-page[b-tjtxristo5] {
    min-height: 100%;
    padding: 24px;
    background: #f5f7fb;
    color: #1e293b;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

    .ta-page *[b-tjtxristo5],
    .ta-modal-backdrop *[b-tjtxristo5] {
        box-sizing: border-box;
    }

.ta-header[b-tjtxristo5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

    .ta-header h1[b-tjtxristo5] {
        margin: 0;
        font-size: 26px;
        font-weight: 750;
        letter-spacing: -.6px;
    }

    .ta-header p[b-tjtxristo5],
    .ta-toolbar p[b-tjtxristo5] {
        margin: 7px 0 0;
        color: #64748b;
        font-size: 13px;
    }

.ta-btn[b-tjtxristo5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 9px 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

    .ta-btn:disabled[b-tjtxristo5] {
        cursor: not-allowed;
        opacity: .6;
    }

.ta-btn-primary[b-tjtxristo5] {
    background: #2563eb;
    color: #fff;
}

    .ta-btn-primary:hover:not(:disabled)[b-tjtxristo5] {
        background: #1d4ed8;
    }

.ta-btn-outline[b-tjtxristo5] {
    border-color: #dbe2ea;
    background: #fff;
    color: #334155;
}

    .ta-btn-outline:hover:not(:disabled)[b-tjtxristo5] {
        background: #f8fafc;
        border-color: #94a3b8;
    }

.ta-btn-activate[b-tjtxristo5] {
    background: #ecfdf5;
    border-color: #bbf7d0;
    color: #047857;
}

    .ta-btn-activate:hover:not(:disabled)[b-tjtxristo5] {
        background: #d1fae5;
    }

.ta-alert[b-tjtxristo5] {
    padding: 12px 14px;
    margin-bottom: 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.ta-alert-error[b-tjtxristo5] {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

.ta-alert-success[b-tjtxristo5] {
    color: #047857;
    background: #ecfdf5;
    border-color: #a7f3d0;
}

.ta-stats[b-tjtxristo5] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.ta-stat-card[b-tjtxristo5] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 128px;
    padding: 20px;
    border: 1px solid #e7ebf2;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 12px rgb(15 23 42 / 3%);
}

.ta-stat-label[b-tjtxristo5] {
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
}

.ta-stat-card strong[b-tjtxristo5] {
    margin: 13px 0 6px;
    color: #172554;
    font-size: 25px;
    font-weight: 750;
}

.ta-stat-note[b-tjtxristo5] {
    color: #94a3b8;
    font-size: 11px;
}

.ta-panel[b-tjtxristo5] {
    overflow: hidden;
    border: 1px solid #e7ebf2;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 12px rgb(15 23 42 / 3%);
}

.ta-toolbar[b-tjtxristo5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px;
    border-bottom: 1px solid #edf0f5;
}

    .ta-toolbar h2[b-tjtxristo5] {
        margin: 0;
        font-size: 16px;
        font-weight: 750;
    }

.ta-search[b-tjtxristo5] {
    width: min(300px, 100%);
    min-height: 40px;
    padding: 9px 12px;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    outline: none;
    font: inherit;
    font-size: 12px;
}

    .ta-search:focus[b-tjtxristo5],
    .ta-input:focus[b-tjtxristo5] {
        border-color: #60a5fa;
        box-shadow: 0 0 0 3px rgb(59 130 246 / 10%);
    }

.ta-table-wrap[b-tjtxristo5] {
    width: 100%;
    overflow-x: auto;
}

.ta-table[b-tjtxristo5] {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
}

    .ta-table th[b-tjtxristo5] {
        padding: 13px 20px;
        background: #f8fafc;
        color: #64748b;
        text-align: left;
        font-size: 10px;
        font-weight: 750;
        letter-spacing: .65px;
        text-transform: uppercase;
    }

    .ta-table td[b-tjtxristo5] {
        padding: 16px 20px;
        border-top: 1px solid #edf0f5;
        font-size: 12px;
    }

    .ta-table tbody tr:hover[b-tjtxristo5] {
        background: #fbfdff;
    }

.ta-year-name[b-tjtxristo5] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ta-calendar-icon[b-tjtxristo5] {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 19px;
}

.ta-year-name strong[b-tjtxristo5] {
    display: block;
    color: #1e293b;
    font-size: 13px;
}

.ta-year-name small[b-tjtxristo5] {
    display: block;
    margin-top: 4px;
    color: #94a3b8;
    font-size: 10px;
}

.ta-period[b-tjtxristo5] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #475569;
}

.ta-period-separator[b-tjtxristo5] {
    color: #94a3b8;
}

.ta-status[b-tjtxristo5] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
}

    .ta-status > span[b-tjtxristo5] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
    }

.ta-status-active[b-tjtxristo5] {
    background: #ecfdf5;
    color: #047857;
}

.ta-status-inactive[b-tjtxristo5] {
    background: #f1f5f9;
    color: #64748b;
}

.ta-actions-heading[b-tjtxristo5] {
    text-align: right !important;
}

.ta-row-actions[b-tjtxristo5] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

    .ta-row-actions .ta-btn[b-tjtxristo5] {
        min-height: 32px;
        padding: 7px 11px;
        font-size: 11px;
    }

.ta-current-label[b-tjtxristo5] {
    color: #047857;
    font-size: 11px;
    font-weight: 650;
}

.ta-loading[b-tjtxristo5],
.ta-empty[b-tjtxristo5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 210px;
    padding: 24px;
    color: #64748b;
    font-size: 12px;
}

.ta-spinner[b-tjtxristo5] {
    width: 24px;
    height: 24px;
    border: 3px solid #dbeafe;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: ta-spin-b-tjtxristo5 .7s linear infinite;
}

@keyframes ta-spin-b-tjtxristo5 {
    to {
        transform: rotate(360deg);
    }
}

.ta-empty-icon[b-tjtxristo5] {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 24px;
}

.ta-empty strong[b-tjtxristo5] {
    color: #334155;
    font-size: 14px;
}

.ta-modal-backdrop[b-tjtxristo5] {
    position: fixed;
    z-index: 1200;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 20px;
    background: rgb(15 23 42 / 55%);
    backdrop-filter: blur(3px);
}

.ta-modal[b-tjtxristo5],
.ta-confirm-modal[b-tjtxristo5] {
    width: min(100%, 570px);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    border: 1px solid rgb(255 255 255 / 60%);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 24px 70px rgb(15 23 42 / 25%);
}

.ta-modal-header[b-tjtxristo5] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding: 24px;
    border-bottom: 1px solid #edf0f5;
}

.ta-modal-eyebrow[b-tjtxristo5] {
    color: #2563eb;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.ta-modal-header h2[b-tjtxristo5],
.ta-confirm-modal h2[b-tjtxristo5] {
    margin: 8px 0;
    color: #172033;
    font-size: 20px;
    font-weight: 750;
}

.ta-modal-header p[b-tjtxristo5] {
    margin: 0;
    color: #64748b;
    font-size: 12px;
}

.ta-modal-close[b-tjtxristo5] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: 0;
    border-radius: 8px;
    background: #f1f5f9;
    color: #475569;
    font-size: 22px;
    cursor: pointer;
}

.ta-modal-body[b-tjtxristo5] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px;
}

.ta-field[b-tjtxristo5] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

    .ta-field label[b-tjtxristo5] {
        color: #334155;
        font-size: 12px;
        font-weight: 700;
    }

.ta-input[b-tjtxristo5] {
    display: block;
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    background: #fff;
    color: #1e293b;
    outline: none;
    font: inherit;
    font-size: 12px;
}

.ta-field .validation-message[b-tjtxristo5] {
    color: #dc2626;
    font-size: 11px;
}

.ta-form-grid[b-tjtxristo5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.ta-field-error[b-tjtxristo5] {
    padding: 10px 12px;
    border-radius: 7px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 12px;
}

.ta-info[b-tjtxristo5],
.ta-confirm-note[b-tjtxristo5] {
    padding: 12px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    line-height: 1.6;
}

.ta-modal-footer[b-tjtxristo5] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    padding: 16px 24px;
    border-top: 1px solid #edf0f5;
    background: #fbfcfe;
}

.ta-confirm-modal[b-tjtxristo5] {
    width: min(100%, 440px);
    padding-top: 28px;
}

    .ta-confirm-modal > h2[b-tjtxristo5],
    .ta-confirm-modal > p[b-tjtxristo5],
    .ta-confirm-modal > .ta-confirm-icon[b-tjtxristo5],
    .ta-confirm-modal > .ta-alert[b-tjtxristo5] {
        margin-right: 24px;
        margin-left: 24px;
    }

.ta-confirm-icon[b-tjtxristo5] {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: #fff7ed;
    color: #c2410c;
    font-size: 24px;
    font-weight: 800;
}

.ta-confirm-modal > p[b-tjtxristo5] {
    color: #64748b;
    font-size: 12px;
    line-height: 1.7;
}

.ta-confirm-modal .ta-confirm-note[b-tjtxristo5] {
    color: #1d4ed8;
}

@media (max-width: 900px) {
    .ta-stats[b-tjtxristo5] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ta-header[b-tjtxristo5] {
        align-items: flex-start;
    }
}

@media (max-width: 600px) {
    .ta-page[b-tjtxristo5] {
        padding: 15px;
    }

    .ta-header[b-tjtxristo5] {
        flex-direction: column;
    }

        .ta-header .ta-btn[b-tjtxristo5] {
            width: 100%;
        }

    .ta-stats[b-tjtxristo5] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .ta-stat-card[b-tjtxristo5] {
        min-height: 105px;
    }

    .ta-toolbar[b-tjtxristo5] {
        align-items: stretch;
        flex-direction: column;
        padding: 16px;
    }

    .ta-search[b-tjtxristo5] {
        width: 100%;
    }

    .ta-table th[b-tjtxristo5],
    .ta-table td[b-tjtxristo5] {
        padding: 12px;
    }

    .ta-form-grid[b-tjtxristo5] {
        grid-template-columns: 1fr;
    }

    .ta-modal-header[b-tjtxristo5],
    .ta-modal-body[b-tjtxristo5] {
        padding: 18px;
    }

    .ta-modal-footer[b-tjtxristo5] {
        padding: 14px 18px;
    }

    .ta-modal-backdrop[b-tjtxristo5] {
        align-items: flex-start;
        padding: 12px;
    }
}