/* ==========================================================================
   Student & Teacher Dashboard — Professional Theme
   Palette: Blue (primary), Purple (secondary/accent), Green (success/brand)
   ========================================================================== */

:root {
    --stdb-blue:        #2563eb;
    --stdb-blue-dark:    #1d4ed8;
    --stdb-blue-light:   #eff6ff;
    --stdb-purple:       #7c3aed;
    --stdb-purple-dark:  #6d28d9;
    --stdb-purple-light: #f5f3ff;
    --stdb-green:        #059669;
    --stdb-green-dark:   #047857;
    --stdb-green-light:  #ecfdf5;
    --stdb-red:          #dc2626;
    --stdb-red-light:    #fef2f2;
    --stdb-amber:        #d97706;
    --stdb-amber-light:  #fffbeb;

    --stdb-gradient-primary: linear-gradient(135deg, var(--stdb-blue) 0%, var(--stdb-purple) 100%);
    --stdb-gradient-sidebar: linear-gradient(180deg, #0f172a 0%, #1e1b4b 55%, #312e81 100%);
    --stdb-gradient-hero:    linear-gradient(135deg, var(--stdb-blue) 0%, var(--stdb-purple) 55%, var(--stdb-green) 100%);

    --stdb-ink:      #0f172a;
    --stdb-ink-soft: #475569;
    --stdb-muted:    #64748b;
    --stdb-border:   #e2e8f0;
    --stdb-surface:  #ffffff;
    --stdb-bg:       #f5f6fb;

    --stdb-radius-sm: 8px;
    --stdb-radius:    12px;
    --stdb-radius-lg: 18px;

    --stdb-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --stdb-shadow:    0 4px 14px rgba(15, 23, 42, .07);
    --stdb-shadow-lg: 0 16px 40px rgba(15, 23, 42, .12);
}

* { box-sizing: border-box; }

.stdb-shell,
.stdb-auth-shell {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--stdb-ink);
}

.stdb-shell { background: var(--stdb-bg); }

/* --------------------------------------------------------------------
   TOP HEADER
   -------------------------------------------------------------------- */
.stdb-topbar {
    background: var(--stdb-surface);
    border-bottom: 1px solid var(--stdb-border);
    position: sticky;
    top: 0;
    z-index: 40;
    box-shadow: var(--stdb-shadow-sm);
}
.stdb-topbar-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.stdb-topbar-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.stdb-topbar-logo { height: 40px; max-width: 160px; width: auto; object-fit: contain; }
.stdb-topbar-logo-fallback {
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--stdb-gradient-primary);
    display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0;
}
.stdb-topbar-logo-fallback .dashicons { font-size: 20px; width: 20px; height: 20px; }
.stdb-topbar-brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.stdb-topbar-brand-name { font-weight: 800; font-size: 16px; color: var(--stdb-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stdb-topbar-brand-tag { font-size: 11px; color: var(--stdb-muted); text-transform: uppercase; letter-spacing: .04em; }

/* Hamburger — mobile-only button that opens the sidebar nav as a left drawer */
.stdb-topbar-menu-toggle {
    display: none; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    background: var(--stdb-blue-light); color: var(--stdb-blue);
    border: none; cursor: pointer; padding: 0;
}
.stdb-topbar-menu-toggle .dashicons { font-size: 20px; width: 20px; height: 20px; }

.stdb-topbar-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.stdb-topbar-user { display: flex; align-items: center; gap: 10px; }
.stdb-topbar-profile-link {
    text-decoration: none; color: inherit; cursor: pointer;
    padding: 4px 10px 4px 4px; margin: -4px -10px -4px -4px;
    border-radius: 30px; transition: background .15s ease;
}
.stdb-topbar-profile-link:hover { background: var(--stdb-blue-light); }
.stdb-topbar-profile-link.stdb-no-profile-tab { cursor: default; }
.stdb-topbar-profile-link.stdb-no-profile-tab:hover { background: none; }
.stdb-topbar-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid var(--stdb-border); }
.stdb-topbar-user-text { display: flex; flex-direction: column; line-height: 1.25; }
.stdb-topbar-user-name { font-weight: 600; font-size: 13px; color: var(--stdb-ink); }
.stdb-topbar-user-role { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.stdb-topbar-user-role.stdb-role-student { color: var(--stdb-blue); }
.stdb-topbar-user-role.stdb-role-teacher { color: var(--stdb-purple); }
.stdb-topbar-user-role.stdb-role-parent  { color: var(--stdb-green); }

.stdb-topbar-logout {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px;
    background: var(--stdb-red-light); color: var(--stdb-red);
    text-decoration: none; transition: all .15s ease;
}
.stdb-topbar-logout:hover { background: var(--stdb-red); color: #fff; }
.stdb-topbar-logout .dashicons { font-size: 18px; width: 18px; height: 18px; }

/* --------------------------------------------------------------------
   NOTIFICATION CENTER
   -------------------------------------------------------------------- */
.stdb-content-header {
    display:flex;
    align-items:center;
    gap:14px;
    position:relative;
}
.stdb-content-header > div:nth-child(2) { min-width:0; flex:1; }

.stdb-notification-center { position:relative; margin-left:auto; flex-shrink:0; }
.stdb-notification-bell {
    position:relative; width:44px; height:44px; border:1px solid var(--stdb-border);
    border-radius:12px; background:var(--stdb-surface); color:var(--stdb-ink-soft);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    box-shadow:var(--stdb-shadow-sm); transition:all .18s ease;
}
.stdb-notification-bell:hover,
.stdb-notification-bell[aria-expanded="true"] {
    color:var(--stdb-blue); border-color:#bfdbfe; background:var(--stdb-blue-light);
}
.stdb-notification-bell .dashicons { font-size:21px; width:21px; height:21px; }
.stdb-notification-badge {
    position:absolute; top:-5px; right:-5px; min-width:20px; height:20px;
    padding:0 5px; border-radius:999px; background:var(--stdb-red); color:#fff;
    border:2px solid var(--stdb-surface); font-size:10px; font-weight:800;
    line-height:16px; text-align:center;
}
.stdb-notification-dropdown {
    position:absolute; right:0; top:52px; width:min(390px, calc(100vw - 32px));
    background:#fff; border:1px solid var(--stdb-border); border-radius:16px;
    box-shadow:var(--stdb-shadow-lg); z-index:80; overflow:hidden;
}
.stdb-notification-dropdown[hidden] { display:none; }
.stdb-notification-head {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:14px 16px; border-bottom:1px solid var(--stdb-border);
}
.stdb-notification-head strong { font-size:14px; }
.stdb-notification-actions { display:flex; align-items:center; gap:8px; }
.stdb-enable-browser-notifications { border:0; background:transparent; color:var(--stdb-blue); font-size:11px; font-weight:700; cursor:pointer; padding:4px 0; }
.stdb-enable-browser-notifications:hover { text-decoration:underline; }
.stdb-notification-mark-all {
    border:0; background:none; color:var(--stdb-blue); font-size:11px;
    font-weight:700; cursor:pointer; padding:4px;
}
.stdb-notification-list { max-height:430px; overflow:auto; }
.stdb-notification-empty { padding:28px 18px; text-align:center; color:var(--stdb-muted); font-size:13px; }
.stdb-notification-item {
    display:flex; gap:11px; padding:13px 15px; text-decoration:none; color:inherit;
    border-bottom:1px solid #f1f5f9; cursor:pointer; transition:background .15s ease;
}
.stdb-notification-item:hover { background:var(--stdb-blue-light); }
.stdb-notification-item.unread { background:#f8fbff; }
.stdb-notification-item.unread .stdb-notification-item-title { font-weight:800; }
.stdb-notification-item-icon {
    width:34px; height:34px; border-radius:10px; background:var(--stdb-purple-light);
    color:var(--stdb-purple); display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
}
.stdb-notification-item[data-type="result"] .stdb-notification-item-icon { background:var(--stdb-green-light); color:var(--stdb-green); }
.stdb-notification-item[data-type="test"] .stdb-notification-item-icon { background:var(--stdb-blue-light); color:var(--stdb-blue); }
.stdb-notification-item[data-type="class"] .stdb-notification-item-icon { background:var(--stdb-amber-light); color:var(--stdb-amber); }
.stdb-notification-item[data-type="message"] .stdb-notification-item-icon { background:var(--stdb-purple-light); color:var(--stdb-purple); }
.stdb-notification-item-body { min-width:0; flex:1; }
.stdb-notification-item-title { font-size:12.5px; color:var(--stdb-ink); margin-bottom:3px; }
.stdb-notification-item-message { font-size:11.5px; color:var(--stdb-ink-soft); line-height:1.45; }
.stdb-notification-item-time { display:block; margin-top:5px; font-size:10px; color:var(--stdb-muted); }

/* --------------------------------------------------------------------
   PAGE LAYOUT
   -------------------------------------------------------------------- */
.stdb-wrap {
    display: flex;
    gap: 24px;
    max-width: 1280px;
    margin: 24px auto;
    padding: 0 24px;
    align-items: flex-start;
}

/* Sidebar */
.stdb-sidebar {
    width: 268px;
    flex-shrink: 0;
    background: var(--stdb-gradient-sidebar);
    border-radius: var(--stdb-radius-lg);
    padding: 20px 0 16px;
    color: #fff;
    height: fit-content;
    max-height: calc(100vh - 48px);
    position: sticky;
    top: 24px;
    box-shadow: var(--stdb-shadow-lg);
    border: 1px solid rgba(255,255,255,.06);
    overflow-y: auto;
}
.stdb-sidebar::-webkit-scrollbar { width: 6px; }
.stdb-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 10px; }
.stdb-sidebar::-webkit-scrollbar-track { background: transparent; }

.stdb-user-card { text-align: center; padding: 0 20px 18px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 14px; }
.stdb-user-card img { border-radius: 50%; }
.stdb-sidebar-avatar {
    width: 60px; height: 60px; object-fit: cover; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.2);
    box-shadow: 0 0 0 4px rgba(255,255,255,.05);
}
.stdb-user-name {
    font-weight: 700; margin-top: 12px; font-size: 14.5px; letter-spacing: -.01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stdb-user-role {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: #c7d2fe;
    background: rgba(255,255,255,.09); padding: 4px 11px; border-radius: 20px;
}
.stdb-user-role::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: #34d399;
    box-shadow: 0 0 0 2px rgba(52, 211, 153, .25);
}
.stdb-sidebar-close { display: none; }
.stdb-sidebar-rail-toggle { display: none; }

/* Menu / navigation ---------------------------------------------------- */
.stdb-nav { display: flex; flex-direction: column; padding: 4px 12px; gap: 3px; }
.stdb-nav-link {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; color: #b6c0d9; text-decoration: none; font-size: 13.5px; font-weight: 500;
    letter-spacing: .01em;
    border-radius: 9px; transition: background .15s ease, color .15s ease, transform .1s ease;
    border-left: 2px solid transparent;
    position: relative;
}
.stdb-nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.stdb-nav-link:active { transform: scale(.99); }
.stdb-nav-link.active {
    background: rgba(255,255,255,.1);
    color: #fff;
    font-weight: 600;
    border-left-color: var(--stdb-blue);
}
.stdb-nav-link .dashicons {
    font-size: 16px; width: 28px; height: 28px; line-height: 28px; text-align: center;
    flex-shrink: 0; border-radius: 8px; background: rgba(255,255,255,.05);
    color: #9aa7c7; transition: background .15s ease, color .15s ease;
}
.stdb-nav-link:hover .dashicons { color: #e2e8f0; }
.stdb-nav-link.active .dashicons {
    background: var(--stdb-gradient-primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(37, 99, 235, .45);
}

/* Content --------------------------------------------------------------- */
.stdb-content { flex: 1; min-width: 0; }

/* Uniform page header shown above every tab's content, kept in sync with
   the active sidebar item (icon + label) via JS. Gives every tab the
   same professional, "app-like" heading instead of each partial styling
   its own <h2> differently. */
.stdb-content-header {
    display: flex; align-items: center; gap: 14px;
    background: var(--stdb-surface);
    border: 1px solid var(--stdb-border);
    border-radius: var(--stdb-radius);
    padding: 16px 20px;
    margin-bottom: 20px;
    box-shadow: var(--stdb-shadow-sm);
}
.stdb-content-header-icon {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 42px; height: 42px; border-radius: 11px;
    background: var(--stdb-gradient-primary); color: #fff;
}
.stdb-content-header-icon .dashicons { font-size: 20px; width: 20px; height: 20px; }
.stdb-content-title { margin: 0; font-size: 18px; font-weight: 800; color: var(--stdb-ink); line-height: 1.3; }
.stdb-content-breadcrumb {
    margin: 1px 0 0; font-size: 12px; color: var(--stdb-muted);
    display: flex; align-items: center; gap: 5px;
}
.stdb-content-breadcrumb .dashicons { font-size: 13px; width: 13px; height: 13px; opacity: .6; }
.stdb-tab-panel { display: none; animation: stdbFadeIn .2s ease; }
.stdb-tab-panel.active { display: block; }
@keyframes stdbFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.stdb-content h2 { margin-top: 0; font-size: 22px; font-weight: 800; color: var(--stdb-ink); }
.stdb-content h3 { font-weight: 700; color: var(--stdb-ink); }
.stdb-panel {
    background: var(--stdb-surface);
    border: 1px solid var(--stdb-border);
    border-radius: var(--stdb-radius);
    padding: 22px;
    margin-bottom: 20px;
    box-shadow: var(--stdb-shadow-sm);
}
.stdb-hint { color: var(--stdb-muted); font-size: 13px; }

/* Cards grid (overview) */
.stdb-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-bottom: 20px; }
.stdb-card {
    background: var(--stdb-surface);
    border: 1px solid var(--stdb-border);
    border-radius: var(--stdb-radius);
    padding: 20px 18px;
    text-align: center;
    box-shadow: var(--stdb-shadow-sm);
    transition: transform .15s ease, box-shadow .15s ease;
    position: relative;
    overflow: hidden;
}
.stdb-card::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--stdb-gradient-primary);
}
.stdb-card:hover { transform: translateY(-3px); box-shadow: var(--stdb-shadow); }
.stdb-card .dashicons {
    font-size: 22px; width: 44px; height: 44px; line-height: 44px;
    color: #fff; background: var(--stdb-gradient-primary); border-radius: 12px;
}
.stdb-card-value { font-size: 26px; font-weight: 800; margin-top: 10px; color: var(--stdb-ink); }
.stdb-card-label { font-size: 12px; color: var(--stdb-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }

/* Tables */
.stdb-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.stdb-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--stdb-radius-sm); }
.stdb-table th, .stdb-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--stdb-border); }
.stdb-table th { color: var(--stdb-muted); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; background: #f8fafc; }
.stdb-table tr:hover td { background: #fafbff; }

.stdb-badge { padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; display: inline-block; }
.stdb-badge-present { background: var(--stdb-green-light); color: var(--stdb-green-dark); }
.stdb-badge-absent { background: var(--stdb-red-light); color: var(--stdb-red); }
.stdb-badge-paid { background: var(--stdb-green-light); color: var(--stdb-green-dark); }
.stdb-badge-partial { background: var(--stdb-amber-light); color: var(--stdb-amber); }
.stdb-badge-unpaid { background: var(--stdb-red-light); color: var(--stdb-red); }

.stdb-child-switcher { padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 6px; color: #cbd5e1; font-size: 13px; }
.stdb-child-switcher select { width: 100%; margin-top: 6px; padding: 8px; border-radius: 8px; border: none; }
.stdb-header-child-switcher { display: none; } /* shown only on the bottom-nav-bar phone breakpoint, see above */

/* Forms */
.stdb-form-row { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.stdb-form-row-inline { flex-direction: row; align-items: center; gap: 10px; }
.stdb-form-row label { font-size: 13px; font-weight: 600; color: var(--stdb-ink-soft); }
.stdb-form-row input, .stdb-form-row select, .stdb-form-row textarea {
    padding: 10px 14px; border: 1px solid var(--stdb-border); border-radius: var(--stdb-radius-sm);
    font-size: 14px; font-family: inherit; transition: border-color .15s ease, box-shadow .15s ease;
    background: var(--stdb-surface);
}
.stdb-form-row input:focus, .stdb-form-row select:focus, .stdb-form-row textarea:focus {
    outline: none; border-color: var(--stdb-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.stdb-form-row textarea { min-height: 80px; resize: vertical; }
.stdb-mcq-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.stdb-mcq-fields input, .stdb-mcq-fields select {
    padding: 10px 14px; border: 1px solid var(--stdb-border); border-radius: var(--stdb-radius-sm); font-size: 14px;
}

/* Multi-course checkbox picker (Create Test / Notice / Reminder) */
.stdb-multicheck {
    display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 12px 14px;
    border: 1px solid var(--stdb-border); border-radius: var(--stdb-radius-sm);
    background: var(--stdb-surface); max-height: 160px; overflow-y: auto;
}
.stdb-multicheck-item {
    display: flex !important; flex-direction: row !important; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 500 !important; color: var(--stdb-ink-soft); cursor: pointer; margin-bottom: 0 !important;
}
.stdb-multicheck-item input[type="checkbox"] { width: auto; margin: 0; accent-color: var(--stdb-blue); cursor: pointer; }
/* Course-based narrowing (Batches / Subjects on Create Test, Meet forms) hides
   items via this class rather than jQuery's inline display:none - the plain
   "display: flex !important" above would otherwise win over an inline style
   and the item would stay visible even after being "hidden". Two classes on
   the same element beats one, so this rule always takes priority. */
.stdb-multicheck-item.stdb-hidden-by-course { display: none !important; }

/* Subject filter tick-boxes reused inside a "Filter list" row (Notes,
   Question Bank, Checking, Create Test) - same look as the course
   checkboxes above, just sized to sit inline with the other filters. */
.stdb-subject-filter-checks { max-height: 90px; min-width: 180px; padding: 8px 12px; gap: 4px 12px; }
.stdb-subject-filter-checks .stdb-multicheck-item { font-size: 12.5px; }
.stdb-filter-inline-label { font-size: 13px; font-weight: 600; color: var(--stdb-ink-soft); margin-left: 4px; }
.stdb-filter-row input[type="date"], .stdb-filter-row input[type="time"] {
    padding: 8px 10px; border: 1px solid var(--stdb-border); border-radius: var(--stdb-radius-sm); font-size: 13px;
}

.stdb-btn {
    display: inline-block; background: var(--stdb-gradient-primary); color: #fff; border: none; padding: 11px 22px;
    border-radius: var(--stdb-radius-sm); font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none;
    box-shadow: 0 4px 12px rgba(37, 99, 235, .25); transition: transform .1s ease, box-shadow .15s ease, opacity .15s ease;
}
.stdb-btn:hover { color: #fff; opacity: .92; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(37, 99, 235, .32); }
.stdb-btn-secondary { background: #eef1f6; color: var(--stdb-ink-soft); box-shadow: none; }
.stdb-btn-secondary:hover { background: #e2e6ee; color: var(--stdb-ink-soft); }
.stdb-btn-danger { background: var(--stdb-red); box-shadow: 0 4px 12px rgba(220, 38, 38, .25); }
.stdb-btn-danger:hover { background: #b91c1c; }
.stdb-btn-sm { padding: 7px 14px; font-size: 12px; }

.stdb-form-msg { margin-left: 12px; font-size: 13px; font-weight: 600; }
.stdb-form-msg.success { color: var(--stdb-green-dark); }
.stdb-form-msg.error { color: var(--stdb-red); }

/* Video / recordings */
.stdb-video-wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: var(--stdb-radius-sm); }
.stdb-video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: var(--stdb-radius-sm); }
.stdb-live-dot { display: inline-block; width: 10px; height: 10px; background: var(--stdb-red); border-radius: 50%; animation: stdbPulse 1.2s infinite; margin-right: 6px; }
@keyframes stdbPulse { 0% { opacity: 1; } 50% { opacity: .3; } 100% { opacity: 1; } }

.stdb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.stdb-rec-card { background: var(--stdb-surface); border: 1px solid var(--stdb-border); border-radius: var(--stdb-radius); overflow: hidden; padding: 12px; box-shadow: var(--stdb-shadow-sm); }
.stdb-rec-title { font-weight: 700; margin-top: 10px; }
.stdb-rec-meta { font-size: 12px; color: var(--stdb-muted); }

/* Progress bar */
.stdb-progress { background: #eef1f6; border-radius: 20px; overflow: hidden; height: 12px; margin: 10px 0; }
.stdb-progress-bar { background: var(--stdb-gradient-primary); height: 100%; }

/* Question bank / notices / reminders */
.stdb-qb-item, .stdb-notice-item, .stdb-reminder-item { padding: 14px 0; border-bottom: 1px solid var(--stdb-border); }
.stdb-qb-item:last-child, .stdb-notice-item:last-child, .stdb-reminder-item:last-child { border-bottom: none; }
.stdb-qb-subject { font-size: 12px; color: var(--stdb-purple); font-weight: 700; text-transform: uppercase; }
.stdb-qb-question { margin-top: 4px; font-weight: 500; }
.stdb-notice-title, .stdb-reminder-title { font-weight: 700; }
.stdb-notice-date, .stdb-reminder-date { font-size: 12px; color: #9ca3af; margin-top: 4px; }
.stdb-reminder-item.unread { border-left: 3px solid var(--stdb-blue); padding-left: 12px; }

/* Test runner */
/* Test countdown: pinned to the top-right of the screen for the whole test (v1.27.0).
   JS moves the element to <body>, so it stays put while the student scrolls the questions. */
.stdb-timer {
    position: fixed; top: 14px; right: 14px; z-index: 100001;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px 10px 12px;
    background: #fff; color: var(--stdb-ink);
    border: 1px solid var(--stdb-border); border-left: 5px solid var(--stdb-blue);
    border-radius: var(--stdb-radius); box-shadow: var(--stdb-shadow-lg);
    font-variant-numeric: tabular-nums; line-height: 1.1;
}
.stdb-timer:empty { display: none; }
.stdb-timer > .dashicons { font-size: 24px; width: 24px; height: 24px; color: var(--stdb-blue); }
.stdb-timer-text { display: flex; flex-direction: column; }
.stdb-timer-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--stdb-muted); }
.stdb-timer-digits { font-size: 24px; font-weight: 800; letter-spacing: .02em; }
.stdb-timer.stdb-timer-warn { border-left-color: var(--stdb-amber); background: var(--stdb-amber-light); }
.stdb-timer.stdb-timer-warn > .dashicons, .stdb-timer.stdb-timer-warn .stdb-timer-digits { color: var(--stdb-amber); }
.stdb-timer.stdb-timer-critical { border-left-color: var(--stdb-red); background: var(--stdb-red-light); animation: stdbTimerPulse 1s ease-in-out infinite; }
.stdb-timer.stdb-timer-critical > .dashicons, .stdb-timer.stdb-timer-critical .stdb-timer-digits { color: var(--stdb-red); }
@keyframes stdbTimerPulse { 0%, 100% { box-shadow: var(--stdb-shadow-lg); } 50% { box-shadow: 0 0 0 4px rgba(220, 38, 38, .25), var(--stdb-shadow-lg); } }
@media (max-width: 782px) {
    .stdb-timer { top: 8px; right: 8px; padding: 7px 12px 7px 9px; gap: 8px; }
    .stdb-timer > .dashicons { font-size: 20px; width: 20px; height: 20px; }
    .stdb-timer-digits { font-size: 19px; }
}
.stdb-question-row { border: 1px solid var(--stdb-border); border-radius: var(--stdb-radius-sm); padding: 14px; margin-bottom: 14px; background: #fafbff; }
.stdb-runner-question { border-bottom: 1px solid var(--stdb-border); padding-bottom: 16px; margin-bottom: 16px; }
.stdb-runner-options label { display: block; padding: 6px 0; cursor: pointer; }

/* Profile */
.stdb-profile { display: flex; gap: 24px; }
.stdb-profile-avatar img { border-radius: 50%; }

/* Modal */
.stdb-modal { position: fixed; inset: 0; background: rgba(15, 23, 42, .55); display: flex; align-items: center; justify-content: center; z-index: 9999; backdrop-filter: blur(2px); }
.stdb-modal-inner { background: var(--stdb-surface); border-radius: var(--stdb-radius); padding: 26px; width: 90%; max-width: 500px; max-height: 80vh; overflow-y: auto; box-shadow: var(--stdb-shadow-lg); }

/* Marksheet */
.stdb-modal-inner.stdb-marksheet-inner { max-width: 640px; }
.stdb-marksheet-header p { margin: 4px 0; }
.stdb-marksheet-q { border-bottom: 1px solid var(--stdb-border); padding-bottom: 14px; margin-bottom: 14px; }
.stdb-marksheet-option { padding: 6px 10px; border-radius: var(--stdb-radius-sm); margin: 4px 0; background: #f9fafb; font-size: 14px; }
.stdb-ans-correct { background: var(--stdb-green-light); font-weight: 600; color: var(--stdb-green-dark); }

/* Online QR (UPI) Payment */
.stdb-qr-pay-box { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.stdb-qr-pay-image { width: 220px; height: 220px; max-width: 100%; object-fit: contain; border: 1px solid var(--stdb-border); border-radius: var(--stdb-radius-sm); background: #fff; padding: 8px; }
.stdb-qr-pay-upi { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.stdb-qr-pay-instructions { max-width: 420px; }
.stdb-ans-wrong { background: var(--stdb-red-light); font-weight: 600; color: var(--stdb-red); }
.stdb-marksheet-marks { font-weight: 700; margin-top: 8px; }

/* --------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------- */
.stdb-footer { margin-top: 12px; padding: 24px; }
.stdb-footer-inner {
    max-width: 1280px; margin: 0 auto; padding-top: 18px;
    border-top: 1px solid var(--stdb-border);
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between;
    font-size: 13px; color: var(--stdb-muted);
}
.stdb-footer-powered strong { color: var(--stdb-ink-soft); }

/* Social media links */
.stdb-social-links { display: flex; align-items: center; gap: 10px; }
.stdb-social-link {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: #eef1f6; color: var(--stdb-ink-soft);
    text-decoration: none; transition: all .15s ease;
    border: none; font: inherit; padding: 0;
}
.stdb-social-link .dashicons { font-size: 16px; width: 16px; height: 16px; }
.stdb-social-link:hover { transform: translateY(-2px); color: #fff; }
.stdb-social-link.stdb-social-facebook:hover  { background: #1877f2; }
.stdb-social-link.stdb-social-instagram:hover { background: linear-gradient(45deg,#f58529,#dd2a7b,#8134af,#515bd4); }
.stdb-social-link.stdb-social-twitter:hover   { background: #0f1419; }
.stdb-social-link.stdb-social-youtube:hover   { background: #ff0000; }
.stdb-social-link.stdb-social-linkedin:hover  { background: #0a66c2; }
.stdb-social-link.stdb-social-whatsapp:hover  { background: #25d366; }

.stdb-social-links-auth { margin-top: 22px; justify-content: center; }
.stdb-social-links-auth .stdb-social-link { background: rgba(255,255,255,.18); color: #fff; backdrop-filter: blur(4px); }
.stdb-social-links-auth .stdb-social-link:hover { background: #fff; color: var(--stdb-ink); }

/* Share Report (Report Summary tab) */
.stdb-share-report { background: linear-gradient(135deg, var(--stdb-blue-light) 0%, var(--stdb-purple-light) 100%); border: 1px solid var(--stdb-border); }
.stdb-share-report-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.stdb-share-icons { flex-wrap: wrap; }
.stdb-share-icons .stdb-social-link { background: var(--stdb-surface); box-shadow: var(--stdb-shadow-sm); border: none; cursor: pointer; }
.stdb-social-link.stdb-social-email:hover { background: var(--stdb-ink-soft); }
.stdb-share-toast { margin: 10px 0 0; font-weight: 600; color: var(--stdb-green-dark); }

/* --------------------------------------------------------------------
   AUTH / LOGIN PAGE
   -------------------------------------------------------------------- */
.stdb-auth-shell {
    background: var(--stdb-gradient-hero);
    background-size: 200% 200%;
    padding: 56px 20px;
    border-radius: var(--stdb-radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 560px;
    margin: 40px auto;
    box-sizing: border-box;
}
.stdb-auth-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 26px; }
.stdb-auth-logo { height: 56px; max-width: 220px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.15)); }
.stdb-auth-logo-fallback {
    width: 60px; height: 60px; border-radius: 16px; background: rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center; color: #fff; backdrop-filter: blur(4px);
}
.stdb-auth-logo-fallback .dashicons { font-size: 30px; width: 30px; height: 30px; }
.stdb-auth-brand-name { color: #fff; font-weight: 800; font-size: 20px; text-shadow: 0 2px 8px rgba(0,0,0,.15); text-align: center; }

.stdb-login-box {
    max-width: 420px; width: 100%; margin: 0 auto; padding: 34px 32px;
    border: 1px solid rgba(255,255,255,.5); border-radius: var(--stdb-radius-lg);
    background: var(--stdb-surface); box-shadow: var(--stdb-shadow-lg);
    box-sizing: border-box;
}
.stdb-login-box h2 { margin-top: 0; font-size: 24px; font-weight: 800; color: var(--stdb-ink); }
.stdb-login-box .stdb-btn { width: 100%; text-align: center; padding: 12px 20px; font-size: 15px; box-sizing: border-box; }
.stdb-login-box a { color: var(--stdb-blue); font-weight: 600; text-decoration: none; }
.stdb-login-box a:hover { text-decoration: underline; }
.stdb-login-msg { padding: 11px 16px; border-radius: var(--stdb-radius-sm); font-size: 14px; margin-bottom: 16px; font-weight: 500; }
.stdb-login-msg-success { background: var(--stdb-green-light); color: var(--stdb-green-dark); }
.stdb-login-msg-error { background: var(--stdb-red-light); color: var(--stdb-red); }
.stdb-error { color: var(--stdb-red); font-weight: 600; }
/* "You are already logged in" screen - two full-width buttons, stacked with breathing room */
.stdb-auth-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }

@media (max-width: 600px) {
    .stdb-auth-shell { margin: 0 auto; padding: 40px 16px; }
}

/* ==========================================================================
   PROFESSIONAL UPGRADE — 3D depth, motion, charts, chat
   ========================================================================== */

/* ---- entrance & scroll animation helpers -------------------------------- */
@keyframes stdbRise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes stdbPopIn {
    from { opacity: 0; transform: scale(.94) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes stdbGradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes stdbFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}
@keyframes stdbShimmer {
    0%   { background-position: -300px 0; }
    100% { background-position: 300px 0; }
}

/* 'backwards' (not 'both'): once the entrance animation ends no transform is left behind, so
   position:fixed children (modals, the test timer) stay pinned to the screen, not to this box. */
.stdb-shell { animation: stdbRise .35s ease backwards; }
.stdb-panel { animation: stdbRise .4s ease both; }
.stdb-cards .stdb-card { animation: stdbPopIn .45s cubic-bezier(.2,.9,.3,1.3) both; }
.stdb-cards .stdb-card:nth-child(1) { animation-delay: .02s; }
.stdb-cards .stdb-card:nth-child(2) { animation-delay: .08s; }
.stdb-cards .stdb-card:nth-child(3) { animation-delay: .14s; }
.stdb-cards .stdb-card:nth-child(4) { animation-delay: .2s; }
.stdb-cards .stdb-card:nth-child(5) { animation-delay: .26s; }
.stdb-table tbody tr { animation: stdbRise .3s ease both; }

/* ---- topbar / sidebar : subtle gradient depth ---------------------------
   (kept restrained on purpose - the menu is used all day, so it stays
   calm/static rather than constantly animating like the marketing bits) */
.stdb-topbar-logo-fallback,
.stdb-auth-logo-fallback,
.stdb-btn,
.stdb-progress-bar,
.stdb-card .dashicons {
    background-size: 220% 220%;
    animation: stdbGradientShift 6s ease infinite;
}
.stdb-sidebar { perspective: 1000px; }

/* ---- 3D tilt cards (JS adds --rx/--ry custom props on mousemove) -------- */
.stdb-cards { perspective: 1200px; }
.stdb-card {
    transform-style: preserve-3d;
    transform: perspective(800px) rotateX(var(--stdb-rx, 0deg)) rotateY(var(--stdb-ry, 0deg)) translateZ(0);
    transition: transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s ease;
    will-change: transform;
}
.stdb-card:hover {
    box-shadow: 0 18px 38px rgba(37, 99, 235, .18);
    z-index: 2;
}
.stdb-card .dashicons { transition: transform .3s ease; }
.stdb-card:hover .dashicons { transform: translateZ(20px) scale(1.08) rotate(-4deg); }
.stdb-card-value { transition: transform .3s ease; }
.stdb-card:hover .stdb-card-value { transform: translateZ(14px); }

/* Panels get a subtle lift + border glow, table rows a soft highlight sweep */
.stdb-panel { transition: box-shadow .25s ease, transform .25s ease; }
.stdb-panel:hover { box-shadow: var(--stdb-shadow-lg); }
.stdb-rec-card { transition: transform .25s ease, box-shadow .25s ease; transform-style: preserve-3d; }
.stdb-rec-card:hover { transform: perspective(700px) rotateX(4deg) translateY(-4px); box-shadow: var(--stdb-shadow-lg); }

.stdb-btn { position: relative; overflow: hidden; }
.stdb-btn::before {
    content: "";
    position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent);
    transform: skewX(-20deg);
    transition: left .5s ease;
}
.stdb-btn:hover::before { left: 130%; }

/* ---- tab transition polish ---------------------------------------------- */
.stdb-tab-panel { animation: none; }
.stdb-tab-panel.active { animation: stdbRise .3s cubic-bezier(.2,.7,.3,1) backwards; }

/* ==========================================================================
   CHARTS
   ========================================================================== */
.stdb-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}
.stdb-chart-card { position: relative; }
.stdb-chart-card h3 { margin-top: 0; margin-bottom: 14px; }
.stdb-chart-wrap { position: relative; height: 240px; }
.stdb-chart-wrap-donut { height: 200px; max-width: 220px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.stdb-chart-card-donut { display: flex; flex-direction: column; align-items: center; text-align: center; }
.stdb-donut-center {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 22px; font-weight: 800; color: var(--stdb-ink);
}

/* ==========================================================================
   CHAT (Class Chat tab + live-class chat box)
   ========================================================================== */
.stdb-live-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
    gap: 20px;
    align-items: stretch;
}
.stdb-live-video-panel { margin-bottom: 0; }

.stdb-chat-panel {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    background: var(--stdb-surface);
}
.stdb-chat-head {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 18px;
    font-weight: 700; font-size: 14px;
    background: var(--stdb-gradient-primary);
    background-size: 200% 200%;
    animation: stdbGradientShift 8s ease infinite;
    color: #fff;
}
.stdb-chat-room-tag {
    margin-left: auto; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; background: rgba(255,255,255,.2); padding: 3px 10px; border-radius: 20px;
}
.stdb-chat-messages {
    flex: 1;
    min-height: 260px;
    max-height: 420px;
    overflow-y: auto;
    padding: 16px 18px;
    display: flex; flex-direction: column; gap: 12px;
    background:
        radial-gradient(circle at 10% 10%, rgba(37,99,235,.04), transparent 40%),
        radial-gradient(circle at 90% 90%, rgba(124,58,237,.04), transparent 40%),
        var(--stdb-bg);
}
.stdb-live-chat-panel .stdb-chat-messages { min-height: 320px; }
.stdb-chat-empty { color: var(--stdb-muted); font-size: 13px; text-align: center; margin: auto; }

.stdb-chat-msg { display: flex; gap: 10px; align-items: flex-start; animation: stdbPopIn .25s ease both; max-width: 85%; }
.stdb-chat-msg img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: var(--stdb-shadow-sm); }
.stdb-chat-bubble { background: var(--stdb-surface); border: 1px solid var(--stdb-border); border-radius: 14px 14px 14px 4px; padding: 8px 12px; box-shadow: var(--stdb-shadow-sm); }
.stdb-chat-name { font-size: 11px; font-weight: 700; color: var(--stdb-purple); margin-bottom: 2px; }
.stdb-chat-text { font-size: 13.5px; color: var(--stdb-ink); word-wrap: break-word; white-space: pre-wrap; }
.stdb-chat-time { font-size: 10px; color: var(--stdb-muted); margin-top: 3px; text-align: right; }

.stdb-chat-msg.stdb-chat-mine { align-self: flex-end; flex-direction: row-reverse; }
.stdb-chat-msg.stdb-chat-mine .stdb-chat-bubble { background: var(--stdb-gradient-primary); border-color: transparent; border-radius: 14px 14px 4px 14px; }
.stdb-chat-msg.stdb-chat-mine .stdb-chat-text,
.stdb-chat-msg.stdb-chat-mine .stdb-chat-name { color: #fff; }
.stdb-chat-msg.stdb-chat-mine .stdb-chat-time { color: rgba(255,255,255,.75); }

/* Read receipts (✓ sent / ✓✓ read) on my own DM bubbles */
.stdb-chat-time { display: flex; align-items: center; justify-content: flex-end; gap: 3px; }
.stdb-chat-receipt { font-size: 11px; line-height: 1; letter-spacing: -1px; }
.stdb-chat-msg.stdb-chat-mine .stdb-receipt-sent { color: rgba(255,255,255,.75); }
.stdb-chat-msg.stdb-chat-mine .stdb-receipt-read { color: #6fe3ff; }

.stdb-chat-form { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--stdb-border); background: var(--stdb-surface); }
.stdb-chat-form input { flex: 1; padding: 10px 14px; border: 1px solid var(--stdb-border); border-radius: 20px; font-size: 13.5px; font-family: inherit; transition: border-color .15s ease, box-shadow .15s ease; }
.stdb-chat-form input:focus { outline: none; border-color: var(--stdb-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.stdb-chat-send { border-radius: 50%; width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stdb-chat-send .dashicons { font-size: 18px; }

@media (max-width: 900px) {
    .stdb-live-layout { grid-template-columns: 1fr; }
}

/* ---- Class Chat: sub-tabs (Class Room / Direct Messages) --------------- */
.stdb-chat-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.stdb-chat-tab-btn {
    background: var(--stdb-surface); border: 1px solid var(--stdb-border); color: var(--stdb-ink-soft);
    padding: 9px 18px; border-radius: 20px; font-size: 13px; font-weight: 700; cursor: pointer;
    transition: all .18s ease;
}
.stdb-chat-tab-btn:hover { border-color: var(--stdb-blue); color: var(--stdb-blue); }
.stdb-chat-tab-btn.active { background: var(--stdb-gradient-primary); border-color: transparent; color: #fff; box-shadow: var(--stdb-shadow-sm); }
.stdb-chat-view { display: none; }
.stdb-chat-view.active { display: block; animation: stdbRise .3s ease both; }

/* ---- Direct Messages layout --------------------------------------------- */
.stdb-dm-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
}
.stdb-dm-contacts {
    background: var(--stdb-surface); border: 1px solid var(--stdb-border); border-radius: var(--stdb-radius);
    box-shadow: var(--stdb-shadow-sm); max-height: 480px; overflow-y: auto; padding: 8px;
}
.stdb-dm-contact {
    display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--stdb-radius-sm);
    cursor: pointer; transition: background .15s ease; animation: stdbRise .25s ease both;
    position: relative;
}
.stdb-dm-contact:hover { background: var(--stdb-blue-light); }
.stdb-dm-contact.active { background: var(--stdb-gradient-primary); }
.stdb-dm-contact.active .stdb-dm-contact-name,
.stdb-dm-contact.active .stdb-dm-contact-role { color: #fff; }
.stdb-dm-contact img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.stdb-dm-contact-meta { min-width: 0; flex: 1; }
.stdb-dm-contact-name-row { display: flex; align-items: center; gap: 6px; }
.stdb-dm-contact-name { font-size: 13.5px; font-weight: 700; color: var(--stdb-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stdb-dm-contact-role { font-size: 11px; color: var(--stdb-muted); text-transform: uppercase; letter-spacing: .03em; }
.stdb-dm-contact.active .stdb-dm-contact-role { color: rgba(255,255,255,.85); }
.stdb-dm-unread-dot {
    flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%;
    background: var(--stdb-blue); box-shadow: 0 0 0 2px var(--stdb-surface);
}
.stdb-dm-contact.active .stdb-dm-unread-dot { background: #fff; box-shadow: 0 0 0 2px transparent; }

/* Per-contact "delete chat" button - tucked away until you hover/focus the row */
.stdb-dm-contact-delete {
    flex-shrink: 0; width: 26px; height: 26px; border: none; border-radius: 50%;
    background: transparent; color: var(--stdb-muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.stdb-dm-contact-delete .dashicons { font-size: 15px; width: 15px; height: 15px; }
.stdb-dm-contact:hover .stdb-dm-contact-delete,
.stdb-dm-contact:focus-within .stdb-dm-contact-delete { opacity: 1; }
.stdb-dm-contact-delete:hover { background: rgba(220,38,38,.12); color: #dc2626; }
.stdb-dm-contact.active .stdb-dm-contact-delete { color: rgba(255,255,255,.8); }
.stdb-dm-contact.active .stdb-dm-contact-delete:hover { background: rgba(255,255,255,.2); color: #fff; }
/* Always visible on touch screens - there's no hover to reveal it there */
@media (hover: none) {
    .stdb-dm-contact-delete { opacity: .55; }
}

.stdb-dm-panel { min-height: 480px; }
.stdb-dm-head-avatar img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.5); }
.stdb-dm-delete-btn {
    margin-left: auto; flex-shrink: 0; width: 30px; height: 30px; border: none; border-radius: 50%;
    background: rgba(255,255,255,.16); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: background .15s ease;
}
.stdb-dm-delete-btn .dashicons { font-size: 16px; width: 16px; height: 16px; }
.stdb-dm-delete-btn:hover { background: rgba(220,38,38,.55); }

@media (max-width: 782px) {
    .stdb-dm-layout { grid-template-columns: 1fr; }
    .stdb-dm-contacts { max-height: 220px; }
}

@media (max-width: 782px) {
    .stdb-wrap { flex-direction: column; align-items: stretch; padding: 0 12px; gap: 14px; margin: 14px auto; max-width: 100%; }
    .stdb-content { max-width: 100%; }

    /* Sidebar nav becomes a slim always-visible icon rail pinned to the left
       edge on phones — tapping the hamburger expands it in place into the
       full vertical menu with labels; it never goes fully off-screen the
       way a classic hidden drawer does. */
    .stdb-topbar-menu-toggle { display: flex; }
    /* Reserve room for the always-visible 58px icon rail so it never sits
       on top of (and hides) the topbar / hamburger button. */
    .stdb-shell { padding-left: 58px; }
    .stdb-sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 120;
        width: 58px; height: 100vh;
        border-radius: 0; padding: 18px 0 22px;
        overflow-x: hidden; overflow-y: auto; max-height: none;
        transition: width .25s ease;
        box-shadow: var(--stdb-shadow-lg);
    }
    .stdb-sidebar.stdb-sidebar-open {
        width: 250px; max-width: 82vw;
    }
    .stdb-sidebar-backdrop {
        display: none; position: fixed; inset: 0; z-index: 110;
        background: rgba(15, 23, 42, .5);
    }
    .stdb-sidebar-backdrop.active { display: block; }
    .stdb-sidebar-close {
        display: none; align-items: center; justify-content: center;
        width: 30px; height: 30px; margin: 0 14px 4px auto; border-radius: 8px;
        background: rgba(255,255,255,.08); color: #fff; border: none; cursor: pointer;
    }
    .stdb-sidebar-open .stdb-sidebar-close { display: flex; }
    .stdb-sidebar-close .dashicons { font-size: 18px; width: 18px; height: 18px; }
    /* Rail hamburger — sits at the top of the always-visible icon rail so
       it can be tapped to expand the rail into the full labeled sidebar
       (the X above takes over once it's expanded). */
    .stdb-sidebar-rail-toggle {
        display: flex; align-items: center; justify-content: center;
        width: 30px; height: 30px; margin: 0 auto 14px; border-radius: 8px;
        background: rgba(255,255,255,.08); color: #fff; border: none; cursor: pointer;
    }
    .stdb-sidebar-rail-toggle .dashicons { font-size: 18px; width: 18px; height: 18px; }
    .stdb-sidebar-open .stdb-sidebar-rail-toggle { display: none; }
    .stdb-user-card { display: none; } /* only room for it once the rail expands */
    .stdb-sidebar-open .stdb-user-card { display: block; }
    .stdb-child-switcher { display: none; } /* Parent dashboard only: same reasoning as the user card above */
    .stdb-sidebar-open .stdb-child-switcher { display: block; }
    .stdb-nav {
        flex-direction: column; padding: 6px 10px; gap: 2px;
    }
    .stdb-nav-link {
        flex-direction: row; justify-content: center; gap: 12px;
        padding: 12px 10px; font-size: 14px; text-align: left; min-width: 0;
    }
    .stdb-sidebar-open .stdb-nav-link { justify-content: flex-start; padding: 12px 14px; }
    .stdb-nav-link .dashicons { font-size: 20px; width: 20px; height: 20px; flex-shrink: 0; }
    .stdb-nav-link.active { transform: none; }
    /* the label span (2nd child) is collapsed to nothing on the icon rail
       and fades/expands in once the drawer is open */
    .stdb-nav-link span:last-child {
        opacity: 0; width: 0; overflow: hidden; white-space: nowrap;
        transition: opacity .2s ease .05s;
    }
    .stdb-sidebar-open .stdb-nav-link span:last-child { opacity: 1; width: auto; }

    .stdb-topbar-inner { padding: 8px 12px; }
    .stdb-topbar-brand-tag { display: none; }
    .stdb-topbar-user-text { display: none; }
    .stdb-topbar-brand-name { font-size: 14px; }
    .stdb-topbar-logo, .stdb-topbar-logo-fallback { width: 32px; height: 32px; }

    .stdb-content h2 { font-size: 18px; margin-bottom: 12px; }
    .stdb-content h3 { font-size: 15px; }
    .stdb-panel { padding: 16px; border-radius: var(--stdb-radius-sm); }
    .stdb-content-header { padding: 13px 14px; gap: 11px; margin-bottom: 14px; }
    .stdb-content-header-icon { width: 36px; height: 36px; border-radius: 9px; }
    .stdb-content-header-icon .dashicons { font-size: 17px; width: 17px; height: 17px; }
    .stdb-content-title { font-size: 15.5px; }
    .stdb-content-breadcrumb { font-size: 11px; }

    /* Stat cards: comfortable 2-up grid instead of squeezed auto-fit */
    .stdb-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; perspective: none; }
    .stdb-card { padding: 14px; transform: none !important; }
    .stdb-card:hover .dashicons, .stdb-card:hover .stdb-card-value { transform: none; }
    .stdb-card .dashicons { font-size: 22px; }
    .stdb-card-value { font-size: 20px; }
    .stdb-card-label { font-size: 11px; }

    /* Tables: horizontal-scroll on a phone rather than squashing columns */
    .stdb-table { font-size: 12.5px; min-width: 560px; }
    .stdb-table th, .stdb-table td { padding: 9px 10px; white-space: nowrap; }

    /* Forms & buttons: full-width, thumb-sized tap targets */
    .stdb-form-row-inline { flex-direction: column; align-items: stretch; gap: 8px; }
    .stdb-form-row-inline label { margin-bottom: 2px; }
    .stdb-form-row input, .stdb-form-row select, .stdb-form-row textarea,
    .stdb-filter-row select { width: 100%; font-size: 15px; padding: 11px 12px; min-height: 44px; }
    .stdb-filter-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .stdb-filter-row label { grid-column: 1 / -1; }
    .stdb-filter-row .stdb-subject-filter-checks { grid-column: 1 / -1; max-height: 130px; }
    .stdb-btn { width: 100%; justify-content: center; padding: 13px 18px; font-size: 14.5px; min-height: 46px; }
    .stdb-btn-sm { width: auto; min-height: 38px; padding: 8px 14px; }

    .stdb-mcq-fields { grid-template-columns: 1fr; }
    .stdb-profile { flex-direction: column; align-items: center; text-align: center; }

    .stdb-modal { align-items: flex-end; }
    .stdb-modal-inner { width: 100%; max-width: 100%; max-height: 88vh; border-radius: var(--stdb-radius-lg) var(--stdb-radius-lg) 0 0; padding: 20px 18px; animation: stdbRise .25s ease both; }

    .stdb-footer { padding: 16px 14px; }
    .stdb-footer-inner { justify-content: center; text-align: center; }
    .stdb-auth-shell { padding: 30px 14px; border-radius: 0; }
    .stdb-login-box { padding: 24px 20px; }

    .stdb-charts-grid { grid-template-columns: 1fr; gap: 14px; }
    .stdb-chart-wrap { height: 200px; }
    .stdb-chat-messages { max-height: 300px; }
    .stdb-chat-msg { max-width: 92%; }
    .stdb-chat-form input { font-size: 15px; padding: 11px 14px; }
    .stdb-chat-tabs { gap: 6px; }
    .stdb-chat-tab-btn { flex: 1; padding: 10px 8px; font-size: 12px; }
    /* The generic ".stdb-btn { width:100% }" rule above also matches the
       chat send button (it carries both "stdb-btn" and "stdb-chat-send"),
       which was stretching it full-width and squashing the textarea next
       to it. Restore its fixed round 40x40 size on mobile. */
    .stdb-chat-send.stdb-btn { width: 40px; min-height: 40px; padding: 0; }
}

@media (max-width: 420px) {
    .stdb-cards { grid-template-columns: 1fr 1fr; }
    .stdb-card { padding: 12px; }
    .stdb-card .dashicons { font-size: 20px; }
    .stdb-card-value { font-size: 18px; }
    .stdb-filter-row { grid-template-columns: 1fr; }
}

/* ========================================================================
   v1.18.0 — MODERN EDTECH PRODUCT UI LAYER
   Visual-only refresh. No markup, AJAX, data, permissions or workflows changed.
   Direction: calm density, restrained indigo accent, semantic status colours,
   lighter chrome, stronger typography and accessible focus states.
   ======================================================================== */
:root {
    --stdb-blue: #4f46e5;
    --stdb-blue-dark: #4338ca;
    --stdb-blue-light: #eef2ff;
    --stdb-purple: #6366f1;
    --stdb-purple-dark: #4f46e5;
    --stdb-purple-light: #eef2ff;
    --stdb-green: #0f9f6e;
    --stdb-green-dark: #087f5b;
    --stdb-green-light: #ecfdf5;
    --stdb-red: #dc2626;
    --stdb-red-light: #fef2f2;
    --stdb-amber: #b7791f;
    --stdb-amber-light: #fffbeb;
    --stdb-gradient-primary: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    --stdb-gradient-sidebar: linear-gradient(180deg, #111827 0%, #172033 100%);
    --stdb-gradient-hero: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    --stdb-ink: #111827;
    --stdb-ink-soft: #374151;
    --stdb-muted: #6b7280;
    --stdb-border: #e5e7eb;
    --stdb-surface: #ffffff;
    --stdb-bg: #f7f8fc;
    --stdb-radius-sm: 10px;
    --stdb-radius: 14px;
    --stdb-radius-lg: 18px;
    --stdb-shadow-sm: 0 1px 2px rgba(17,24,39,.04);
    --stdb-shadow: 0 6px 18px rgba(17,24,39,.06);
    --stdb-shadow-lg: 0 18px 45px rgba(17,24,39,.12);
}

.stdb-shell, .stdb-auth-shell { letter-spacing: -.005em; }
.stdb-shell { background: #f7f8fc; }
.stdb-topbar { background: rgba(255,255,255,.96); border-bottom-color: #e8eaf0; box-shadow: 0 1px 0 rgba(17,24,39,.03); backdrop-filter: blur(12px); }
.stdb-topbar-inner { padding-top: 11px; padding-bottom: 11px; }
.stdb-topbar-logo-fallback { background: var(--stdb-gradient-primary); box-shadow: 0 5px 14px rgba(79,70,229,.22); }
.stdb-topbar-brand-name { font-size: 15px; letter-spacing: -.02em; }
.stdb-topbar-brand-tag { color: #8b93a5; font-size: 10px; letter-spacing: .07em; }
.stdb-topbar-user-name { font-size: 13px; }
.stdb-topbar-avatar { border-color: #e6e8ef; }
.stdb-topbar-logout { background: #fff1f2; color: #be123c; }
.stdb-topbar-logout:hover { background: #be123c; color: #fff; }

.stdb-wrap { gap: 20px; margin-top: 20px; margin-bottom: 28px; }
.stdb-sidebar { width: 252px; padding-top: 18px; border: 1px solid rgba(255,255,255,.07); box-shadow: 0 14px 36px rgba(17,24,39,.14); }
.stdb-user-card { padding-bottom: 16px; margin-bottom: 12px; }
.stdb-sidebar-avatar { width: 56px; height: 56px; border-color: rgba(255,255,255,.18); }
.stdb-user-name { margin-top: 10px; font-size: 14px; }
.stdb-user-role { margin-top: 6px; background: rgba(255,255,255,.07); color: #c7d2fe; }
.stdb-nav { padding-left: 10px; padding-right: 10px; gap: 2px; }
.stdb-nav-link { min-height: 42px; padding: 8px 10px; color: #aeb8cb; border-left: 0; border-radius: 10px; }
.stdb-nav-link:hover { background: rgba(255,255,255,.065); color: #fff; }
.stdb-nav-link.active { background: rgba(99,102,241,.18); color: #fff; border-left-color: transparent; box-shadow: inset 3px 0 0 #818cf8; }
.stdb-nav-link .dashicons { width: 30px; height: 30px; line-height: 30px; background: transparent; color: #8995ad; }
.stdb-nav-link.active .dashicons { background: rgba(99,102,241,.92); color: #fff; box-shadow: 0 4px 10px rgba(79,70,229,.28); }

.stdb-content-header { border-color: #e8eaf0; border-radius: 14px; padding: 15px 18px; margin-bottom: 16px; box-shadow: var(--stdb-shadow-sm); }
.stdb-content-header-icon { width: 40px; height: 40px; border-radius: 11px; background: #eef2ff; color: #4f46e5; }
.stdb-content-header-icon .dashicons { font-size: 18px; width: 18px; height: 18px; }
.stdb-content-title { font-size: 17px; letter-spacing: -.02em; }
.stdb-content-breadcrumb { color: #8a92a3; font-size: 11px; }
.stdb-content h2 { font-size: 21px; letter-spacing: -.025em; }
.stdb-content h3 { font-size: 16px; letter-spacing: -.015em; }

.stdb-panel, .stdb-rec-card, .stdb-dm-contacts { border-color: #e6e8ee; border-radius: 14px; box-shadow: var(--stdb-shadow-sm); }
.stdb-panel { padding: 20px; margin-bottom: 16px; }
.stdb-panel:hover { border-color: #dde1ea; }
.stdb-hint { color: #7a8292; }

.stdb-cards { gap: 12px; margin-bottom: 16px; }
.stdb-card { padding: 16px; border-color: #e6e8ee; border-radius: 14px; box-shadow: var(--stdb-shadow-sm); text-align: left; }
.stdb-card::before { height: 2px; background: #6366f1; }
.stdb-card:hover { transform: translateY(-2px); box-shadow: 0 9px 22px rgba(17,24,39,.07); }
.stdb-card .dashicons { width: 38px; height: 38px; line-height: 38px; font-size: 18px; border-radius: 10px; background: #eef2ff; color: #4f46e5; }
.stdb-card-value { margin-top: 12px; font-size: 25px; letter-spacing: -.035em; }
.stdb-card-label { color: #7a8292; font-size: 10px; font-weight: 700; }

.stdb-table-scroll { border: 1px solid #e6e8ee; background: #fff; }
.stdb-table { font-size: 13px; }
.stdb-table th, .stdb-table td { padding: 11px 13px; border-bottom-color: #edf0f4; }
.stdb-table th { background: #fafbfc; color: #7b8495; font-size: 10px; letter-spacing: .065em; }
.stdb-table tr:hover td { background: #fafbff; }
.stdb-table tbody tr:last-child td { border-bottom: 0; }
.stdb-badge { padding: 4px 9px; border-radius: 7px; font-size: 11px; }

.stdb-form-row { gap: 5px; margin-bottom: 13px; }
.stdb-form-row label { color: #4b5563; font-size: 12px; font-weight: 650; }
.stdb-form-row input, .stdb-form-row select, .stdb-form-row textarea,
.stdb-mcq-fields input, .stdb-mcq-fields select { border-color: #dfe3ea; border-radius: 9px; background: #fff; color: #111827; }
.stdb-form-row input:hover, .stdb-form-row select:hover, .stdb-form-row textarea:hover { border-color: #c8ced9; }
.stdb-form-row input:focus, .stdb-form-row select:focus, .stdb-form-row textarea:focus,
.stdb-mcq-fields input:focus, .stdb-mcq-fields select:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.11); }
.stdb-btn { padding: 10px 17px; border-radius: 9px; background: #4f46e5; box-shadow: 0 4px 10px rgba(79,70,229,.18); font-size: 13px; }
.stdb-btn:hover { background: #4338ca; box-shadow: 0 6px 14px rgba(79,70,229,.22); }
.stdb-btn-secondary { background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; }
.stdb-btn-secondary:hover { background: #e9ebef; color: #111827; }
.stdb-btn-danger { background: #dc2626; box-shadow: 0 4px 10px rgba(220,38,38,.15); }
.stdb-btn-sm { padding: 6px 11px; border-radius: 8px; font-size: 11px; }
.stdb-form-msg { font-size: 12px; }

.stdb-grid { gap: 14px; }
.stdb-rec-card { padding: 10px; }
.stdb-rec-title { font-size: 14px; letter-spacing: -.01em; }
.stdb-rec-meta { color: #7a8292; }
.stdb-progress { background: #edf0f5; height: 9px; }
.stdb-progress-bar { background: #4f46e5; }
.stdb-qb-item, .stdb-notice-item, .stdb-reminder-item { padding: 13px 0; border-bottom-color: #edf0f4; }
.stdb-qb-subject { color: #4f46e5; font-size: 10px; letter-spacing: .06em; }
.stdb-notice-date, .stdb-reminder-date { color: #8a92a3; }
.stdb-reminder-item.unread { border-left-color: #6366f1; }

.stdb-question-row { background: #fafbfc; border-color: #e6e8ee; border-radius: 10px; }
.stdb-modal { background: rgba(15,23,42,.62); backdrop-filter: blur(5px); }
.stdb-modal-inner { border: 1px solid #e5e7eb; border-radius: 16px; padding: 22px; box-shadow: 0 24px 70px rgba(15,23,42,.22); }
.stdb-marksheet-option { background: #f8fafc; }

/* Offline test/result surfaces: stronger hierarchy without changing any controls. */
.stdb-offline-test-form, .stdb-offline-result-form { background: #fff; }
.stdb-offline-result-heading { color: #111827; letter-spacing: -.02em; }
.stdb-offline-tests-table .stdb-btn, .stdb-offline-result-form .stdb-btn { white-space: nowrap; }
.stdb-offline-tests-table tr td:first-child { font-weight: 650; color: #1f2937; }

.stdb-live-layout { gap: 14px; }
.stdb-chat-panel { border: 1px solid #e6e8ee; border-radius: 14px; box-shadow: var(--stdb-shadow-sm); }
.stdb-chat-head { background: #111827; animation: none; }
.stdb-chat-messages { background: #f8f9fc; }
.stdb-chat-bubble { border-color: #e6e8ee; box-shadow: 0 1px 2px rgba(17,24,39,.04); }
.stdb-chat-name { color: #4f46e5; }
.stdb-chat-msg.stdb-chat-mine .stdb-chat-bubble { background: #4f46e5; }
.stdb-chat-tabs { gap: 6px; }
.stdb-chat-tab-btn { border-radius: 9px; padding: 8px 13px; font-size: 12px; }
.stdb-chat-tab-btn.active { background: #4f46e5; box-shadow: none; }

.stdb-social-links a, .stdb-share-icons a { transition: transform .15s ease, opacity .15s ease; }
.stdb-social-links a:hover, .stdb-share-icons a:hover { transform: translateY(-1px); }

.stdb-content a:focus-visible, .stdb-content button:focus-visible, .stdb-content input:focus-visible,
.stdb-content select:focus-visible, .stdb-content textarea:focus-visible, .stdb-nav-link:focus-visible {
    outline: 3px solid rgba(99,102,241,.25);
    outline-offset: 2px;
}

@media (max-width: 782px) {
    .stdb-shell { padding-left: 56px; }
    .stdb-sidebar { width: 56px; }
    .stdb-sidebar-open { width: 250px; }
    .stdb-wrap { padding: 0 10px; gap: 12px; margin-top: 12px; }
    .stdb-content-header { padding: 13px 14px; margin-bottom: 13px; }
    .stdb-content-header-icon { width: 36px; height: 36px; }
    .stdb-content-title { font-size: 16px; }
    .stdb-panel { padding: 16px; border-radius: 12px; }
    .stdb-cards { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
    .stdb-card { padding: 13px; }
    .stdb-card-value { font-size: 21px; }
    .stdb-card-label { font-size: 9px; }
    .stdb-table { min-width: 620px; }
}

@media (prefers-reduced-motion: reduce) {
    .stdb-tab-panel, .stdb-card, .stdb-btn, .stdb-nav-link, .stdb-chat-msg { animation: none !important; transition: none !important; }
}

/* ========================================================================
   v1.19.0 — MOBILE APP SHELL
   Mobile-only visual/navigation refinement. Existing tab links, content,
   AJAX handlers and workflows remain unchanged.
   ======================================================================== */
@media (max-width: 782px) {
    html { -webkit-text-size-adjust: 100%; }

    body { background: #f5f7fb; }

    /* Full-width app canvas: no permanent left rail on phones. */
    .stdb-shell {
        padding-left: 0 !important;
        padding-bottom: calc(82px + env(safe-area-inset-bottom));
        min-height: 100dvh;
        /* Keep the mobile navigation fixed to the actual viewport. */
        animation: none !important;
        transform: none !important;
    }

    .stdb-wrap {
        display: block;
        padding: 0 12px 14px !important;
        margin: 0 auto !important;
        width: 100%;
    }

    .stdb-content {
        width: 100%;
        max-width: none;
    }

    /* Bottom navigation = native-app style navigation dock. */
    .stdb-sidebar {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100% !important;
        height: calc(72px + env(safe-area-inset-bottom)) !important;
        max-width: none !important;
        max-height: none !important;
        padding: 5px 6px max(5px, env(safe-area-inset-bottom)) !important;
        border: 0 !important;
        border-top: 1px solid rgba(148,163,184,.24) !important;
        border-radius: 0 !important;
        background: rgba(255,255,255,.97) !important;
        box-shadow: 0 -8px 28px rgba(15,23,42,.10) !important;
        backdrop-filter: blur(18px) saturate(150%);
        -webkit-backdrop-filter: blur(18px) saturate(150%);
        overflow: hidden !important;
        z-index: 1000;
        transform: none !important;
        transition: none !important;
    }

    .stdb-sidebar-backdrop { display: none !important; }
    .stdb-sidebar-close,
    .stdb-sidebar-rail-toggle { display: none !important; }
    .stdb-user-card { display: none !important; }
    .stdb-child-switcher { display: none !important; } /* Parent dashboard: no room in the bottom bar - see .stdb-header-child-switcher */

    .stdb-nav {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        gap: 4px !important;
        width: 100%;
        height: 100%;
        padding: 0 !important;
        margin: 0 !important;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .stdb-nav::-webkit-scrollbar { display: none; }

    .stdb-nav-link,
    .stdb-sidebar-open .stdb-nav-link {
        flex: 0 0 76px !important;
        width: 76px !important;
        min-width: 76px !important;
        height: 56px !important;
        margin: auto 0 !important;
        padding: 6px 5px !important;
        border-radius: 15px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        color: #64748b !important;
        background: transparent !important;
        text-decoration: none !important;
        transform: none !important;
        box-shadow: none !important;
        transition: background .18s ease, color .18s ease, transform .18s ease !important;
    }

    .stdb-nav-link .dashicons {
        width: 22px !important;
        height: 22px !important;
        font-size: 21px !important;
        line-height: 22px !important;
    }

    .stdb-nav-link span:last-child,
    .stdb-sidebar-open .stdb-nav-link span:last-child {
        opacity: 1 !important;
        width: auto !important;
        max-width: 70px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 9.5px !important;
        line-height: 12px !important;
        font-weight: 700 !important;
        letter-spacing: -.01em;
    }

    .stdb-nav-link.active {
        color: var(--stdb-blue, #4f46e5) !important;
        background: #eef2ff !important;
    }
    .stdb-nav-link.active .dashicons { transform: translateY(-1px); }

    .stdb-header-child-switcher { display: block !important; margin: 10px 16px 0; }
    .stdb-header-child-switcher select {
        width: 100%; padding: 10px 12px; border-radius: 10px;
        border: 1px solid rgba(148,163,184,.4); background: #fff; font-size: 14px;
    }

    /* App-like page header: compact, sticky, and separated from content. */
    .stdb-content-header {
        position: sticky;
        top: 0;
        z-index: 40;
        margin: 0 -12px 14px !important;
        padding: 11px 14px !important;
        min-height: 58px;
        border: 0 !important;
        border-bottom: 1px solid #e8edf3 !important;
        border-radius: 0 0 16px 16px !important;
        background: rgba(255,255,255,.94) !important;
        box-shadow: 0 5px 18px rgba(15,23,42,.05) !important;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .stdb-content-header-icon {
        width: 34px !important;
        height: 34px !important;
        border-radius: 10px !important;
    }

    .stdb-content-title {
        font-size: 15px !important;
        line-height: 20px !important;
        font-weight: 800 !important;
    }

    .stdb-content-breadcrumb { font-size: 10px !important; }

    /* Comfortable app spacing for panels/cards. */
    .stdb-tab-panel { min-width: 0; }
    .stdb-panel {
        border-radius: 16px !important;
        padding: 15px !important;
        margin-bottom: 12px !important;
        box-shadow: 0 4px 16px rgba(15,23,42,.045) !important;
    }

    .stdb-cards { gap: 9px !important; }
    .stdb-card {
        min-width: 0;
        border-radius: 15px !important;
        padding: 13px !important;
    }

    /* Make horizontally wide data usable with a clear scroll affordance. */
    .stdb-table-wrap,
    .stdb-table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 12px;
    }

    /* Touch targets remain comfortable without making the UI bulky. */
    .stdb-btn,
    button,
    input[type="submit"],
    input[type="button"] { min-height: 44px; }

    /* Prevent iOS/Android browsers from zooming focused form fields. */
    .stdb-form-row input,
    .stdb-form-row select,
    .stdb-form-row textarea,
    .stdb-filter-row select,
    .stdb-chat-form input { font-size: 16px !important; }

    /* Safe-area spacing for devices with gesture bars. */
    @supports (padding: max(0px)) {
        .stdb-sidebar { padding-bottom: max(5px, env(safe-area-inset-bottom)) !important; }
    }
}

@media (max-width: 380px) {
    .stdb-sidebar { left: 0 !important; right: 0 !important; border-radius: 0 !important; }
    .stdb-nav-link,
    .stdb-sidebar-open .stdb-nav-link { flex-basis: 70px !important; min-width: 70px !important; width: 70px !important; }
    .stdb-nav-link span:last-child,
    .stdb-sidebar-open .stdb-nav-link span:last-child { font-size: 9px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .stdb-nav-link { transition: none !important; }
}

/* --------------------------------------------------------------------
   STUDENT PROFILE — premium app-style UI
   -------------------------------------------------------------------- */
.stdb-profile-page { max-width: 1100px; margin: 0 auto; }
.stdb-profile-hero {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 28px; margin-bottom: 26px; border: 1px solid var(--stdb-border);
    border-radius: 20px; background: linear-gradient(135deg, #ffffff 0%, #f7f9ff 100%);
    box-shadow: var(--stdb-shadow); overflow: hidden; position: relative;
}
.stdb-profile-hero::after { content:""; position:absolute; width:180px; height:180px; right:-80px; top:-90px; border-radius:50%; background:rgba(37,99,235,.07); pointer-events:none; }
.stdb-profile-hero-main { display:flex; align-items:center; gap:18px; min-width:0; position:relative; z-index:1; }
.stdb-profile-avatar-lg { width:92px; height:92px; flex:0 0 92px; padding:3px; border-radius:50%; background:linear-gradient(135deg,var(--stdb-blue),var(--stdb-purple)); box-shadow:0 8px 24px rgba(37,99,235,.18); }
.stdb-profile-avatar-lg img { display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; border:3px solid #fff; }
.stdb-profile-eyebrow,.stdb-profile-section-kicker { display:block; color:var(--stdb-blue); font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.stdb-profile-hero-copy h2 { margin:3px 0 5px; font-size:25px; line-height:1.2; letter-spacing:-.02em; }
.stdb-profile-hero-copy p { margin:0; color:var(--stdb-muted); font-size:14px; }
.stdb-profile-badges { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.stdb-profile-badge { display:inline-flex; align-items:center; gap:5px; padding:6px 9px; border-radius:999px; background:#eef4ff; color:#315aa9; font-size:11px; font-weight:700; }
.stdb-profile-badge .dashicons { font-size:14px; width:14px; height:14px; }
.stdb-profile-badge-success { background:var(--stdb-green-light); color:var(--stdb-green-dark); }
.stdb-profile-hero-side { min-width:145px; padding-left:22px; border-left:1px solid var(--stdb-border); position:relative; z-index:1; }
.stdb-profile-mini-label { font-size:11px; color:var(--stdb-muted); text-transform:uppercase; letter-spacing:.07em; font-weight:700; }
.stdb-profile-hero-side strong { display:block; margin:4px 0 2px; font-size:15px; }
.stdb-profile-hero-side span { color:var(--stdb-muted); font-size:11px; }
.stdb-profile-section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 13px; }
.stdb-profile-section-heading h3 { margin:3px 0 0; font-size:18px; letter-spacing:-.01em; }
.stdb-profile-readonly { display:inline-flex; align-items:center; gap:5px; color:var(--stdb-muted); font-size:11px; font-weight:700; background:#f8fafc; border:1px solid var(--stdb-border); padding:6px 9px; border-radius:999px; }
.stdb-profile-readonly .dashicons { font-size:13px; width:13px; height:13px; }
.stdb-profile-details-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.stdb-profile-detail-card { min-width:0; display:flex; align-items:center; gap:12px; padding:15px; background:var(--stdb-surface); border:1px solid var(--stdb-border); border-radius:14px; box-shadow:var(--stdb-shadow-sm); }
.stdb-profile-detail-icon { width:38px; height:38px; flex:0 0 38px; display:flex; align-items:center; justify-content:center; border-radius:11px; background:#f0f5ff; color:var(--stdb-blue); }
.stdb-profile-detail-icon .dashicons { font-size:18px; width:18px; height:18px; }
.stdb-profile-detail-label { display:block; color:var(--stdb-muted); font-size:11px; font-weight:700; margin-bottom:3px; }
.stdb-profile-detail-card strong { display:block; font-size:13.5px; line-height:1.35; overflow-wrap:anywhere; }
.stdb-profile-note { display:flex; gap:11px; align-items:flex-start; margin:4px 0 25px; padding:13px 15px; border:1px solid #dbe7ff; background:#f7faff; border-radius:13px; color:var(--stdb-ink-soft); }
.stdb-profile-note > .dashicons { color:var(--stdb-blue); margin-top:2px; flex:0 0 18px; }
.stdb-profile-note strong { display:block; font-size:12.5px; margin-bottom:2px; }
.stdb-profile-note p { margin:0; font-size:11.5px; line-height:1.55; }
.stdb-profile-edit-heading { margin-top:4px; }
.stdb-profile-edit-card { padding:20px; }
.stdb-profile-edit-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.stdb-profile-edit-actions { display:flex; align-items:center; gap:12px; margin-top:4px; }
.stdb-profile-edit-actions .stdb-btn { display:inline-flex; align-items:center; gap:7px; }
.stdb-profile-edit-actions .stdb-btn .dashicons { font-size:16px; width:16px; height:16px; }

@media (max-width: 640px) {
    .stdb-profile-page { width:100%; }
    .stdb-profile-hero { display:block; padding:20px 17px; border-radius:17px; margin-bottom:20px; }
    .stdb-profile-hero-main { align-items:flex-start; gap:13px; }
    .stdb-profile-avatar-lg { width:68px; height:68px; flex-basis:68px; }
    .stdb-profile-hero-copy h2 { font-size:19px; }
    .stdb-profile-hero-copy p { font-size:12px; line-height:1.45; }
    .stdb-profile-badges { margin-top:8px; gap:5px; }
    .stdb-profile-badge { font-size:10px; padding:5px 7px; }
    .stdb-profile-hero-side { margin-top:17px; padding:12px 0 0; border-left:0; border-top:1px solid var(--stdb-border); }
    .stdb-profile-section-heading { align-items:flex-start; }
    .stdb-profile-section-heading h3 { font-size:16px; }
    .stdb-profile-readonly { font-size:10px; }
    .stdb-profile-details-grid { grid-template-columns:1fr; gap:9px; }
    .stdb-profile-detail-card { padding:12px; border-radius:12px; }
    .stdb-profile-detail-icon { width:35px; height:35px; flex-basis:35px; }
    .stdb-profile-detail-card strong { font-size:13px; }
    .stdb-profile-edit-grid { grid-template-columns:1fr; gap:10px; }
    .stdb-profile-edit-card { padding:15px; }
    .stdb-profile-edit-actions { flex-direction:column; align-items:stretch; }
    .stdb-profile-edit-actions .stdb-btn { width:100%; }
    .stdb-profile-note { margin-bottom:20px; }
}

@media (max-width: 640px) {
    .stdb-content-header { align-items:flex-start; }
    .stdb-notification-bell { width:40px; height:40px; }
    .stdb-notification-dropdown { position:fixed; top:68px; right:16px; width:calc(100vw - 32px); }
}


/* ========================================================================
   v1.24.0 — MOBILE TABLE → CARD LAYOUT
   Phones / small tablets (≤ 782px, same breakpoint as the mobile app shell):
   every .stdb-table is drawn as a stack of professional cards instead of a
   sideways-scrolling table. Laptop & desktop keep the normal table layout.
   Each cell carries a data-label="Column name" attribute (printed by the
   PHP templates, with a JS safety net) which becomes the row label.
   ======================================================================== */
@media (max-width: 782px) {

    /* Wrapper: no scroll box, cards float directly on the panel */
    .stdb-table-scroll {
        overflow: visible;
        border: 0;
        background: transparent;
        border-radius: 0;
    }

    table.stdb-table,
    table.stdb-table tbody {
        display: block;
        width: 100%;
        min-width: 0;
        border: 0;
        background: transparent;
    }

    /* Column headings are now printed inside each card; keep them for screen readers only */
    table.stdb-table thead {
        position: absolute;
        width: 1px; height: 1px;
        margin: -1px; padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        border: 0;
        white-space: nowrap;
    }

    /* One row = one card */
    table.stdb-table tbody tr {
        display: block;
        margin: 0 0 12px;
        background: #fff;
        border: 1px solid #e3e8f0;
        border-radius: 14px;
        box-shadow: 0 2px 10px rgba(15, 23, 42, .05);
        overflow: hidden;
    }
    table.stdb-table tbody tr:last-child { margin-bottom: 0; }

    /* Desktop row-hover tint would "stick" after a tap on phones */
    table.stdb-table tbody tr:hover td { background: transparent; }

    /* Body rows: "LABEL ........ value" */
    table.stdb-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        min-width: 0;
        margin: 0;
        padding: 10px 14px;
        border: 0;
        font-size: 13.5px;
        line-height: 1.45;
        color: var(--stdb-ink);
        text-align: right;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    table.stdb-table td + td { border-top: 1px solid #f0f2f7; }

    table.stdb-table td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        max-width: 46%;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--stdb-muted);
        text-align: left;
        overflow-wrap: normal;
    }

    /* First cell = card title (its label is redundant, so it is hidden) */
    table.stdb-table td[data-label]:first-child {
        display: block;
        padding: 13px 14px 12px;
        background: linear-gradient(180deg, #f8faff 0%, #f1f5fd 100%);
        font-size: 14.5px;
        font-weight: 700;
        color: var(--stdb-ink);
        text-align: left;
    }
    table.stdb-table td[data-label]:first-child::before { display: none; }
    table.stdb-table td .stdb-hint {
        margin-top: 3px;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.4;
    }

    /* Action buttons: footer strip, thumb-sized, share the width equally */
    table.stdb-table td.stdb-td-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: stretch;
        gap: 8px;
        padding: 11px 14px 13px;
        background: #f9fafd;
        text-align: center;
    }
    table.stdb-table td.stdb-td-actions > .stdb-btn,
    table.stdb-table td.stdb-td-actions > button,
    table.stdb-table td.stdb-td-actions > a {
        flex: 1 1 0;
        min-width: 92px;
        margin: 0;
        text-align: center;
    }
    /* <a class="stdb-btn"> is inline-block: centre its label like a <button> does */
    table.stdb-table td .stdb-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* "No records yet" rows */
    table.stdb-table td[colspan] {
        display: block;
        padding: 22px 16px;
        background: transparent;
        font-weight: 500;
        color: var(--stdb-muted);
        text-align: center;
    }

    /* Inputs inside a card (teacher attendance time picker etc.) */
    table.stdb-table td input[type="time"],
    table.stdb-table td input[type="text"],
    table.stdb-table td input[type="number"] {
        max-width: 150px;
        min-height: 38px;
        padding: 6px 10px;
        font-size: 16px;               /* stops iOS zoom-on-focus */
        border: 1px solid var(--stdb-border);
        border-radius: var(--stdb-radius-sm);
        background: #fff;
    }
    table.stdb-table td input[type="radio"] {
        width: 20px; height: 20px;
        margin: 0;
        flex: 0 0 auto;
    }

    /* Teacher → Attendance: Present / Absent sit side-by-side as two tap targets */
    #stdb-attendance-table tbody tr { display: grid; grid-template-columns: 1fr 1fr; }
    #stdb-attendance-table tbody tr > td { grid-column: 1 / -1; }
    #stdb-attendance-table tbody tr > td[data-label="Present"],
    #stdb-attendance-table tbody tr > td[data-label="Absent"] {
        grid-column: auto;
        justify-content: flex-start;
        gap: 10px;
        padding: 13px 14px;
        cursor: pointer;
    }
    #stdb-attendance-table tbody tr > td[data-label="Present"]::before,
    #stdb-attendance-table tbody tr > td[data-label="Absent"]::before {
        order: 2;                       /* radio first, label after it */
        max-width: none;
        font-size: 12px;
        color: var(--stdb-ink-soft);
    }
    #stdb-attendance-table tbody tr > td[data-label="Absent"] { border-left: 1px solid #f0f2f7; }
    #stdb-attendance-table td[data-label="Present"] input { accent-color: var(--stdb-green); }
    #stdb-attendance-table td[data-label="Absent"]  input { accent-color: var(--stdb-red); }
}


/* ==========================================================================
   Built-in push notifications (v1.26.0): enable banner + toasts
   ========================================================================== */
.stdb-enable-browser-notifications[data-state="on"] { color:var(--stdb-green); cursor:default; text-decoration:none; }
.stdb-enable-browser-notifications[data-state="denied"],
.stdb-enable-browser-notifications[data-state="unsupported"] { color:var(--stdb-muted); }

.stdb-push-banner {
    display:flex; align-items:center; gap:12px;
    margin:0 0 18px; padding:12px 14px;
    background:var(--stdb-blue-light); border:1px solid #bfdbfe; border-radius:var(--stdb-radius);
    color:var(--stdb-ink); font-size:13px; line-height:1.45;
}
.stdb-push-banner > .dashicons { color:var(--stdb-blue); font-size:22px; width:22px; height:22px; flex-shrink:0; }
.stdb-push-banner-text { flex:1; min-width:0; }
.stdb-push-banner-enable {
    flex-shrink:0; border:0; border-radius:8px; padding:8px 16px;
    background:var(--stdb-blue); color:#fff; font-weight:700; font-size:12.5px; cursor:pointer;
}
.stdb-push-banner-enable:hover { background:var(--stdb-blue-dark); }
.stdb-push-banner-close {
    flex-shrink:0; border:0; background:transparent; color:var(--stdb-muted);
    font-size:22px; line-height:1; cursor:pointer; padding:0 4px;
}
.stdb-push-banner-close:hover { color:var(--stdb-ink); }

.stdb-toast-stack {
    position:fixed; right:18px; bottom:18px; z-index:100000;
    display:flex; flex-direction:column; gap:10px; width:min(360px, calc(100vw - 36px));
    pointer-events:none;
}
.stdb-toast {
    pointer-events:auto; display:flex; align-items:flex-start; gap:12px;
    padding:13px 14px; background:#fff; border:1px solid var(--stdb-border);
    border-left:4px solid var(--stdb-blue); border-radius:var(--stdb-radius);
    box-shadow:var(--stdb-shadow-lg); cursor:default;
    opacity:0; transform:translateY(12px); transition:opacity .25s ease, transform .25s ease;
}
.stdb-toast.in { opacity:1; transform:translateY(0); }
.stdb-toast-link { cursor:pointer; }
.stdb-toast > .dashicons { color:var(--stdb-blue); font-size:20px; width:20px; height:20px; margin-top:1px; flex-shrink:0; }
.stdb-toast-body { min-width:0; display:flex; flex-direction:column; gap:2px; }
.stdb-toast-body strong { font-size:13px; color:var(--stdb-ink); }
.stdb-toast-body span { font-size:12px; color:var(--stdb-ink-soft); line-height:1.45; }

@media (max-width: 782px) {
    .stdb-push-banner { flex-wrap:wrap; }
    .stdb-push-banner-text { flex-basis:calc(100% - 80px); }
    .stdb-toast-stack { left:14px; right:14px; bottom:14px; width:auto; }
}


/* ==========================================================================
   Scheduling (v1.28.0)
   ========================================================================== */
.stdb-badge-scheduled { background: var(--stdb-amber-light); color: var(--stdb-amber); margin-left: 6px; }
.stdb-notice-date .stdb-badge-scheduled, .stdb-qb-item > .stdb-badge-scheduled { margin: 4px 0 6px; }
.stdb-edit-current-file { margin: 6px 0 0; word-break: break-all; }
.stdb-edit-remove-pdf { display: block; margin-top: 6px; font-size: 13px; }
.stdb-qb-item .stdb-edit-qbank { margin-top: 8px; }
.stdb-form input[type="datetime-local"] { max-width: 100%; }


/* Subject chips on the Create Test form (v1.29.0) */
.stdb-subject-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.stdb-subject-chip {
    border: 1px solid var(--stdb-border); background: #fff; color: var(--stdb-ink-soft);
    border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.stdb-subject-chip:hover { border-color: var(--stdb-blue); color: var(--stdb-blue); }
.stdb-subject-chip.active { background: var(--stdb-blue); border-color: var(--stdb-blue); color: #fff; }

/* Subject-wise collection tabs - student Notes / Question Bank (v1.38.0) */
.stdb-collection-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.stdb-collection-tab {
    border: 1px solid var(--stdb-border); background: #fff; color: var(--stdb-ink-soft);
    border-radius: 999px; padding: 6px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.stdb-collection-tab:hover { border-color: var(--stdb-blue); color: var(--stdb-blue); }
.stdb-collection-tab.active { background: var(--stdb-blue); border-color: var(--stdb-blue); color: #fff; }

/* ---------------------------------------------------------------
   EXAM MODE (v1.30.0) - only the questions, timer and Submit are visible
   while a student is taking a test.
   ------------------------------------------------------------- */
body.stdb-exam-mode { overflow: hidden !important; }
body.stdb-exam-mode > *:not(#stdb-test-runner):not(#stdb-test-timer):not(#stdb-violation-overlay):not(script):not(style):not(link) {
    display: none !important;
}
body.stdb-exam-mode #stdb-test-runner {
    position: fixed; inset: 0; z-index: 100000; margin: 0; border-radius: 0; border: 0;
    overflow-y: auto; background: #fff; box-shadow: none; animation: none;
    padding: 72px max(20px, calc((100vw - 900px) / 2)) 48px;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
body.stdb-exam-mode #stdb-test-runner textarea { -webkit-user-select: text; user-select: text; }
#stdb-violation-overlay {
    position: fixed; inset: 0; z-index: 100002; display: none;
    align-items: center; justify-content: center; padding: 20px;
    background: rgba(15, 23, 42, .92);
}
#stdb-violation-overlay[style*="display: block"] { display: flex !important; }
.stdb-violation-box {
    max-width: 460px; width: 100%; text-align: center; background: #fff; color: var(--stdb-ink);
    border-radius: var(--stdb-radius); padding: 28px 24px; box-shadow: var(--stdb-shadow-lg);
    border-top: 6px solid var(--stdb-red);
}
.stdb-violation-box .dashicons { font-size: 40px; width: 40px; height: 40px; color: var(--stdb-red); }
.stdb-violation-box h3 { margin: 8px 0; }
.stdb-violation-box p { margin: 0 0 12px; line-height: 1.5; }

/* Online Class (Google Meet) - v1.31.0 */
.stdb-meet-live { border-left: 6px solid var(--stdb-red); }
.stdb-meet-ok { border-left: 6px solid #16a34a; }
.stdb-meet-bad { border-left: 6px solid var(--stdb-red); }
.stdb-meet-big, .stdb-meet-join { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 22px; font-size: 1.05rem; margin: 4px 8px 4px 0; text-decoration: none; }
@media (max-width: 600px) { .stdb-meet-big, .stdb-meet-join { width: 100%; margin-right: 0; } }

/* Bulk add MCQs - v1.35.0 */
.stdb-bulk-box { margin: 14px 0; padding: 16px; border: 1px dashed var(--stdb-blue); border-radius: var(--stdb-radius); background: #f8fafc; }
.stdb-bulk-box textarea { width: 100%; box-sizing: border-box; font-family: inherit; margin: 8px 0; }
.stdb-bulk-sample { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 12px; font-size: .85rem; line-height: 1.5; white-space: pre-wrap; max-height: 190px; overflow: auto; }

/* Fees v1.36.0 */
.stdb-fee-plan-panel h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stdb-fee-type-complete { background: #e0e7ff; color: #3730a3; }
.stdb-fee-type-installment { background: #fef3c7; color: #92400e; }
.stdb-fee-type-monthly { background: #dcfce7; color: #166534; }
.stdb-fee-overdue-tag { color: #dc2626; font-weight: 700; font-size: 11px; }

/* ---- License lock screen (STDB_License) ---- */
.stdb-license-lock {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}
.stdb-license-lock-box {
    max-width: 460px;
    text-align: center;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 40px 30px;
    box-shadow: 0 8px 30px rgba(0,0,0,.06);
}
.stdb-license-lock-box .dashicons {
    font-size: 40px;
    width: 40px;
    height: 40px;
    color: #b32d2e;
    margin-bottom: 12px;
}
.stdb-license-lock-box h2 {
    margin: 0 0 10px;
    font-size: 19px;
}
.stdb-license-lock-box p {
    color: #555;
    line-height: 1.6;
}

/* ---- Class Schedule (combined Live + Online classes) ---- */
.stdb-schedule-day {
    margin: 18px 0 6px;
    font-size: 14px;
    font-weight: 700;
    color: #4338ca;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 6px;
}
.stdb-schedule-day:first-of-type { margin-top: 4px; }
.stdb-schedule-today {
    color: #166534;
    border-bottom-color: #166534;
}