body {
    font-family: "Segoe UI",Arial,sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}
html, body{
    height: 100%;
}
/* ================================================================
   SAFE AREA
   ================================================================
   Once the site is added to the home screen the window covers the whole
   panel, so content runs under the Android status bar at the top and the
   gesture or button bar at the bottom. PageComponent now asks for
   viewport-fit=cover, which is what makes env(safe-area-inset-*) report
   those insets at all; inside an ordinary browser tab they are 0 and every
   value below collapses to nothing.

   box-sizing is border-box across the app, so this padding is carved out of
   the shell's 100vh rather than added to it. A page stays exactly one screen
   tall and its footer lands above the navigation bar instead of under it. */
html, body{
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}
body.vh-100, body.be-admin{
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* The portal shell pinned its height to 100vh, which made body a box exactly
   one screen tall. A sticky bar can only travel inside its parent's box, so it
   let go again after the first scroll. min-height lets the page grow when the
   content is taller while still filling the screen when it is not. */
body.vh-100{
    height: auto !important;
    min-height: 100vh;
}
/* A sticky bar must park below the status bar rather than on top of it. The
   portal topbars are sticky, so they only need the offset added; the offsets
   for the teacher and admin bars live beside their own definitions further
   down this file and in admin.css, which load later and would win here. */
.navbar-custom{
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 1030;
}
.tax-background{
    background-image: url('/res/images/tax_background.png');
    background-size: cover;
}
.translucent-bg{
    background-color: rgba(10, 10, 10, 0.7);
}
.round-1{
    border-radius: 0.5rem;
}
.round-2{
    border-radius: 1rem;
}
.round-3{
    border-radius: 2rem;
}
.round-4{
    border-radius: 3rem;
}
.navbar-custom {
    background-color: #230766;
}
.be-notif__btn--white{
    background: transparent;
    border: 1px solid rgba(255,255,255,.4);
    color: #fff;
}
.be-notif__btn--white:hover{
    color: #fff;
    border-color: #fff;
}
/* The notification dropdown must never widen the page on a phone. The width is
   declared here rather than inline so it can shrink with the viewport; a fixed
   360px pushed the whole page sideways below roughly 414px. */
.be-notif__menu{
    width: min(360px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
}
@media (max-width: 575.98px){
    .be-notif__menu{ right: -6px; }
}
.nav-link {
    color: white !important;
}
.nav-link.active {
    background-color: #004D40 !important;
}
body.tc-layout{
    min-height: 100vh;
    font-family: "Segoe UI", Arial, sans-serif;
}
.tc-topbar{
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 14px;
    height: 60px;
    padding: 0 20px;
    background: rgba(255,255,255,.95);
    border-bottom: 1px solid #e4e8ef;
    box-shadow: 0 1px 3px rgba(20,24,40,.06);
    min-width: 0;
}
.tc-topbar__toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border: 1px solid #e4e8ef;
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    color: #2b3244;
    font-size: .9rem;
}
.tc-topbar__title{
    font-size: .98rem;
    font-weight: 600;
    margin: 0;
    color: #2b3244;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tc-topbar__right{ margin-left: auto; display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.tc-topbar__logout{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1px solid #e4e8ef;
    border-radius: 8px;
    background: #fff;
    color: #6b7280;
    font-size: .8rem;
    font-weight: 500;
    text-decoration: none;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.tc-topbar__logout:hover{ color: #d64545; border-color: #d64545; background: #fff7f7; }

.tc-sidebar{
    position: fixed;
    inset: 0 auto 0 0;
    width: 260px;
    z-index: 1045;
    background: #1f2433;
    color: #fff;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform .2s ease;
    /* A fixed sidebar ignores the padding on the shell, so it is inset here to
       keep its header and footer clear of the status and navigation bars. */
    top: env(safe-area-inset-top, 0px);
    bottom: env(safe-area-inset-bottom, 0px);
    height: auto;
}
.tc-sidebar.open{ transform: translateX(0); }
.tc-sidebar__brand{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.tc-sidebar__brand img{ height: 36px; }
.tc-sidebar__brand-text{ min-width: 0; }
.tc-sidebar__brand-text b{ display: block; font-size: .92rem; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-sidebar__brand-text span{ font-size: .7rem; color: #7d8498; }
.tc-sidebar__nav{ flex: 1; overflow-y: auto; padding: 12px; }
.tc-nav__group{
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #7d8498;
    padding: 14px 12px 6px;
}
.tc-nav__item{
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    margin-bottom: 2px;
    border-radius: 8px;
    color: #b7bdce;
    text-decoration: none;
    font-size: .84rem;
    font-weight: 500;
    transition: background .15s ease, color .15s ease;
}
.tc-nav__item i{ width: 16px; text-align: center; font-size: .85rem; color: #7d8498; transition: color .15s ease; }
.tc-nav__item:hover{ background: rgba(255,255,255,.06); color: #fff; }
.tc-nav__item:hover i{ color: #fff; }
.tc-nav__item.active{ background: rgba(112,22,126,.32); color: #fff; box-shadow: inset 3px 0 0 #70167e; }
.tc-nav__item.active i{ color: #fff; }
/* Menu entries shown while the teacher still has to upload a photograph. They
   are rendered as a span, not a link, so there is nothing to click. */
.tc-nav__item--locked{
    color: #6c7386;
    cursor: not-allowed;
    user-select: none;
}
.tc-nav__item--locked i{ color: #5c6274; }
.tc-nav__item--locked:hover{ background: transparent; color: #6c7386; }
.tc-nav__lock{ width: auto !important; margin-left: auto; font-size: .68rem !important; opacity: .75; }
.tc-nav__locknote{
    display: flex; align-items: flex-start; gap: 8px;
    margin: 0 0 10px; padding: 10px 12px;
    background: rgba(209,129,9,.14);
    border: 1px solid rgba(209,129,9,.4);
    border-radius: 8px;
    color: #e9c98a; font-size: .74rem; line-height: 1.45;
}
.tc-nav__locknote i{ margin-top: 2px; }
.tc-sidebar__footer{
    padding: 14px 16px;
    border-top: 1px solid rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    gap: 10px;
}
.tc-sidebar__avatar{
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: .74rem; color: #fff;
    flex-shrink: 0;
}
.tc-sidebar__who{ flex: 1; min-width: 0; }
.tc-sidebar__who b{ display: block; font-size: .8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-sidebar__who span{ font-size: .68rem; color: #7d8498; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.tc-sidebar__logout{
    width: 32px; height: 32px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: #b7bdce;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
    flex-shrink: 0;
}
.tc-sidebar__logout:hover{ background: rgba(255,255,255,.1); color: #fff; }
.tc-overlay{ display: none; position: fixed; inset: 0; background: rgba(18,20,30,.5); z-index: 1040; }
.tc-overlay.show{ display: block; }

@media (min-width: 992px){
    .tc-sidebar{ transform: none; }
    body.tc-layout{ padding-left: 260px; }
    .tc-topbar__toggle{ display: none; }
}
.footer {
    background-color: #230766;
    color: white;
    padding: 20px 0;
}
.footer a {
    color: #ffd700;
}
.footer a:hover {
    color: #ffeb3b;
}
.s-dash-stat{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 16px;
    text-align: center;
    background: #fff;
    border: 1px solid rgba(74,37,89,.1);
    border-radius: 12px;
    box-shadow: 0 8px 24px -18px rgba(20,24,40,.35);
    transition: transform .15s ease, box-shadow .15s ease;
    height: 100%;
    min-height: 132px;
}
.s-dash-stat:hover{ transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(20,24,40,.45); }
.s-dash-stat__icon{
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.s-dash-stat__icon i{ font-size: 1.15rem; }
.s-dash-stat__value{ font-size: 1.4rem; font-weight: 700; line-height: 1.1; color: #1a1a2e; }
.s-dash-stat__label{ font-size: .72rem; color: #6d6d6d; text-transform: uppercase; letter-spacing: .05em; }

/* ================================================================
   Mobile / small-screen adjustments (dashboards, portals)
   ================================================================ */
@media (max-width: 767.98px){
    .s-dash-stat{ min-height: 112px; padding: 14px 10px; }
    .s-dash-stat__icon{ width: 42px; height: 42px; }
    .s-dash-stat__value{ font-size: 1.15rem; }
}
@media (max-width: 575.98px){
    /* Stat rows using Bootstrap "col" wrap better as a 2-column grid.
       Only rows that actually contain .s-dash-stat are affected. */
    .row > .col > .s-dash-stat{ min-height: 100px; }
    .row > .col:has(> .s-dash-stat){ flex: 0 0 50%; max-width: 50%; }
    /* Portal topbars: collapse the calendar label and logout text so the
       header never forces the page wider than the device. */
    .tc-topbar .be-cal-badge{ padding: 7px 10px; }
    .tc-topbar .be-cal-label{ display: none; }
    .tc-topbar__logout span{ display: none; }
    .tc-topbar__logout{ padding: 7px 10px; }
    .tc-topbar__right{ gap: 8px; }
    .tc-topbar{ padding: 0 14px; gap: 10px; }
}
.s-feed-item{
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid rgba(20,24,40,.05);
}
.s-feed-item:last-child{ border-bottom: none; }
.s-feed-item__dot{
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
    background: #d18109;
}
/* The action on the right of a feed row keeps its own width. A flex item is
   allowed to shrink below its content, which on a phone squeezed the label
   until the control was a few pixels wide and looked broken. */
.s-feed-item > .btn,
.s-feed-item > .badge{
    flex: 0 0 auto;
    white-space: nowrap;
}
@media (max-width: 575.98px){
    /* Enough height for a fingertip, which the default button padding on a
       phone does not give. */
    .s-feed-item > .btn{ min-height: 40px; display: inline-flex; align-items: center; }
}

/* ---------------- Parent activity dashboard ---------------- */
.pa-body{
    background: #F4F1F8;
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.pa-container{ max-width: 1280px; margin: 0 auto; }

.pa-profile{
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(120deg, #8b1a1a 0%, #c0392b 100%);
    color: #fff;
    border-radius: 14px;
    padding: 18px 22px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(20,24,40,.07), 0 12px 28px -18px rgba(139,26,26,.4);
}
.pa-profile__photo{
    width: 66px; height: 66px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(255,255,255,.35);
    background: rgba(255,255,255,.15);
    flex-shrink: 0;
}
.pa-profile__photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.pa-profile__info{ min-width: 0; }
.pa-profile__name{ font-size: 1.25rem; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-profile__sub{ font-size: .8rem; color: rgba(255,255,255,.75); }
.pa-profile__meta{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pa-chip{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    color: #fff;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 500;
}
.pa-chip i{ font-size: .72rem; }

.pa-card{
    background: #fff;
    border: 1px solid #e6e1ef;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(20,24,40,.07), 0 12px 28px -18px rgba(74,37,89,.28);
    margin-bottom: 20px;
}
.pa-card__head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 20px;
    border-bottom: 1px solid #e6e1ef;
}
.pa-card__title{ font-size: 1rem; margin: 0; display: flex; align-items: center; gap: 8px; }
.pa-card__title i{ color: #70167e; }
.pa-card__body{ padding: 16px 20px; }
.pa-card__empty{
    text-align: center;
    padding: 28px 16px;
    color: #6b7280;
}
.pa-card__empty i{ font-size: 2rem; color: #d9d4e6; display: block; margin-bottom: 8px; }

.pa-stat{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: #fff;
    border: 1px solid #e6e1ef;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(20,24,40,.07), 0 12px 28px -18px rgba(74,37,89,.28);
    height: 100%;
}
.pa-stat__icon{
    width: 46px; height: 46px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.pa-stat__icon i{ font-size: 1.1rem; }
.pa-stat__value{ font-size: 1.15rem; font-weight: 700; line-height: 1.15; color: #2b3244; }
.pa-stat__label{ font-size: .7rem; color: #6b7280; text-transform: uppercase; letter-spacing: .05em; }

.pa-tabs{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.pa-tab{
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #e6e1ef;
    border-radius: 12px;
    padding: 10px 14px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(20,24,40,.05);
    transition: all .15s ease;
    min-width: 220px;
    flex: 1;
}
.pa-tab:hover{ border-color: #c0392b; }
.pa-tab.active{ background: #c0392b; border-color: #c0392b; color: #fff; }
.pa-tab__photo{
    width: 40px; height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(0,0,0,.08);
    background: #f0eef5;
    flex-shrink: 0;
}
.pa-tab.active .pa-tab__photo{ border-color: rgba(255,255,255,.4); }
.pa-tab__photo img{ width: 100%; height: 100%; object-fit: cover; }
.pa-tab__name{ font-weight: 700; font-size: .88rem; line-height: 1.15; }
.pa-tab__cls{ font-size: .72rem; color: #6b7280; }
.pa-tab.active .pa-tab__cls{ color: rgba(255,255,255,.8); }
.pa-pane{ display: none; }
.pa-pane.active{ display: block; }

.pa-table{ width: 100%; border-collapse: collapse; font-size: .87rem; }
.pa-table thead th{
    background: #faf9fd;
    color: #6b7280;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid #e6e1ef;
    white-space: nowrap;
}
.pa-table tbody td{
    padding: 11px 14px;
    border-bottom: 1px solid #e6e1ef;
    vertical-align: middle;
}
.pa-table tbody tr:last-child td{ border-bottom: none; }
.pa-table tbody tr:hover{ background: #faf9fd; }
.pa-grade{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 10px;
    font-weight: 700;
    font-size: .9rem;
}
.pa-grade--good{ background: #e4f4e8; color: #1a7a37; }
.pa-grade--mid{ background: #fdf1dd; color: #b06a00; }
.pa-grade--poor{ background: #fdeceb; color: #b03a2e; }
.pa-score{ font-weight: 700; }
.pa-score--fail{ color: #c0392b; }

.pa-tt th{
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6b7280;
    background: #faf9fd;
    text-align: center;
    white-space: nowrap;
}
.pa-tt td{
    font-size: .8rem;
    vertical-align: middle;
    min-width: 130px;
}
.pa-tt .pa-tt-subj{ font-weight: 600; color: #2b3244; }
.pa-tt .pa-tt-meta{ font-size: .72rem; color: #6b7280; }
.pa-tt .pa-tt-empty{ color: #d9d4e6; text-align: center; }

.pa-timeline{ position: relative; padding-left: 34px; }
.pa-timeline::before{
    content: "";
    position: absolute;
    left: 11px; top: 8px; bottom: 8px;
    width: 2px;
    background: #e6e1ef;
}
.pa-tl-day{ position: relative; margin-bottom: 22px; }
.pa-tl-day:last-child{ margin-bottom: 0; }
.pa-tl-day__dot{
    position: absolute;
    left: -34px; top: 3px;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: #70167e;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
}
.pa-tl-day__head{
    font-weight: 700;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6b7280;
    margin-bottom: 10px;
}
.pa-tl-item{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid #eee9f5;
    border-radius: 12px;
    background: #fff;
    margin-bottom: 8px;
    transition: border-color .15s ease;
}
.pa-tl-item:hover{ border-color: #c0392b; }
.pa-tl-item__icon{
    width: 34px; height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    color: #fff;
    flex-shrink: 0;
}
.pa-tl-item__title{ font-weight: 600; font-size: .87rem; color: #2b3244; }
.pa-tl-item__meta{ font-size: .76rem; color: #6b7280; margin-top: 2px; }
.pa-tl-badge{
    display: inline-block;
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 2px 8px;
    border-radius: 20px;
    margin-left: 8px;
    vertical-align: 2px;
}
.pa-tl-badge--activity{ background: #f0ecfa; color: #70167e; }
.pa-tl-badge--attendance{ background: #e4f4e8; color: #1a7a37; }
.pa-tl-badge--result{ background: #e8f0fd; color: #1d4ed8; }
.pa-tl-badge--score{ background: #fff4d6; color: #8a5a00; }