/* ============================================================
   EDUSHIELD — FROSTED SLATE DESIGN SYSTEM
   Concept 7
   ============================================================ */


/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {
    --edu-slate-950: #0b1220;
    --edu-slate-900: #111a2b;
    --edu-slate-850: #172033;
    --edu-slate-800: #1e293b;
    --edu-slate-700: #334155;
    --edu-slate-600: #475569;
    --edu-slate-500: #64748b;
    --edu-slate-400: #94a3b8;
    --edu-slate-300: #cbd5e1;
    --edu-slate-200: #dbe3ec;
    --edu-slate-100: #e8edf3;
    --edu-slate-75: #eef2f6;
    --edu-slate-50: #f7f9fc;
    --edu-white: #ffffff;

    --edu-primary: #1687a7;
    --edu-primary-dark: #0f6f8b;
    --edu-primary-soft: #dff4f8;
    --edu-primary-muted: #bfe5ed;

    --edu-blue: #2563eb;
    --edu-blue-soft: #e8f0ff;

    --edu-success: #17845c;
    --edu-success-soft: #e5f7ef;

    --edu-warning: #c47a12;
    --edu-warning-soft: #fff3da;

    --edu-danger: #c2414b;
    --edu-danger-soft: #fdebed;

    --edu-info: #2563eb;
    --edu-info-soft: #e8f0ff;

    --edu-page-background: #eef2f6;
    --edu-surface: rgba(255, 255, 255, 0.92);
    --edu-surface-solid: #ffffff;
    --edu-surface-muted: #f7f9fc;

    --edu-border: #dbe3ec;
    --edu-border-strong: #cbd5e1;

    --edu-text: #172033;
    --edu-text-soft: #475569;
    --edu-text-muted: #64748b;

    --edu-sidebar-width: 16.666667%;
    --edu-topbar-height: 68px;

    --edu-radius-xs: 7px;
    --edu-radius-sm: 10px;
    --edu-radius-md: 14px;
    --edu-radius-lg: 18px;
    --edu-radius-xl: 24px;

    --edu-shadow-xs:
        0 1px 2px rgba(15, 23, 42, 0.04);

    --edu-shadow-sm:
        0 5px 18px rgba(15, 23, 42, 0.055);

    --edu-shadow-md:
        0 14px 35px rgba(15, 23, 42, 0.08);

    --edu-shadow-lg:
        0 24px 60px rgba(15, 23, 42, 0.13);

    --edu-transition:
        180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}


/* ============================================================
   GLOBAL RESET
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
    background: var(--edu-page-background);
}

body {
    min-height: 100%;
    margin: 0;
    overflow-x: hidden;

    background:
        radial-gradient(
            circle at 86% 4%,
            rgba(22, 135, 167, 0.07),
            transparent 25rem
        ),
        linear-gradient(
            180deg,
            #edf2f6 0%,
            #f7f9fc 100%
        );

    color: var(--edu-text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size: 1rem;
    line-height: 1.55;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.edushield-menu-open {
    overflow: hidden;
}

a {
    color: var(--edu-primary-dark);
    text-decoration: none;
}

a:hover {
    color: var(--edu-primary);
}

img,
svg {
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
}

::selection {
    background: var(--edu-primary-muted);
    color: var(--edu-slate-950);
}

:focus-visible {
    outline: 3px solid rgba(22, 135, 167, 0.24);
    outline-offset: 2px;
}


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

.edushield-skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 10000;

    padding: 0.7rem 1rem;

    border-radius: var(--edu-radius-sm);

    background: var(--edu-slate-950);
    color: var(--edu-white);

    font-size: 0.8rem;
    font-weight: 750;

    transform: translateY(-150%);
    transition: transform var(--edu-transition);
}

.edushield-skip-link:focus {
    color: var(--edu-white);
    transform: translateY(0);
}


/* ============================================================
   APPLICATION SHELL
   ============================================================ */

.edushield-app-shell {
    min-height: calc(100vh - var(--edu-topbar-height));
    align-items: stretch;
}

.edushield-main-content {
    position: relative;

    min-width: 0;
    min-height: calc(100vh - var(--edu-topbar-height));

    padding: 0;

    background: transparent;
}

.edushield-content-container {
    width: 100%;
    max-width: 1800px;

    margin: 0 auto;
    padding: 1.55rem 1.65rem 2.5rem;
}

.edushield-app-shell > .col-md-2 {
    align-self: stretch;
    min-height: calc(100vh - var(--edu-topbar-height));
}


/* ============================================================
   TOPBAR
   ============================================================ */

.edushield-topbar {
    position: sticky;
    top: 0;
    z-index: 1040;

    min-height: var(--edu-topbar-height);

    padding: 0;

    background:
        rgba(255, 255, 255, 0.88);

    border-bottom:
        1px solid rgba(203, 213, 225, 0.85);

    box-shadow:
        0 4px 24px rgba(15, 23, 42, 0.055);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.edushield-navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.68rem;

    margin: 0;
    padding: 0;

    color: var(--edu-slate-900) !important;
    text-decoration: none;
}

.navbar-brand-mark {
    display: grid;
    width: 39px;
    height: 39px;

    flex-shrink: 0;
    place-items: center;

    border:
        1px solid rgba(22, 135, 167, 0.2);

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            #effbfc 0%,
            #dff4f8 100%
        );

    color: var(--edu-primary-dark);
    font-size: 1rem;

    box-shadow:
        0 8px 22px rgba(22, 135, 167, 0.12);
}

.navbar-brand-text {
    color: var(--edu-slate-900);

    font-size: 1.03rem;
    font-weight: 800;

    letter-spacing: -0.035em;
}

.edushield-navbar-user {
    display: flex;
    align-items: center;
    gap: 0.6rem;

    margin-right: 0.15rem;
    padding-right: 0.85rem;

    border-right: 1px solid var(--edu-border);
}

.edushield-navbar-user-icon {
    display: grid;
    width: 34px;
    height: 34px;

    flex-shrink: 0;
    place-items: center;

    border: 1px solid var(--edu-border);
    border-radius: 10px;

    background: var(--edu-slate-50);
    color: var(--edu-slate-600);

    font-size: 0.8rem;
}

.edushield-navbar-user-info {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.12rem;
}

.edushield-navbar-user-name {
    max-width: 170px;

    overflow: hidden;

    color: var(--edu-slate-800);

    font-size: 0.72rem;
    font-weight: 750;
    line-height: 1.1;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.edushield-navbar-user-role {
    color: var(--edu-text-muted);

    font-size: 0.59rem;
    font-weight: 600;
    line-height: 1.1;

    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.edushield-navbar-dashboard,
.edushield-navbar-logout,
.edushield-navbar-menu {
    display: inline-flex;
    min-height: 38px;

    align-items: center;
    justify-content: center;
    gap: 0.42rem;

    padding: 0.5rem 0.78rem;

    border: 1px solid var(--edu-border);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.78);
    color: var(--edu-slate-600);

    font-size: 0.7rem;
    font-weight: 700;
    text-decoration: none;

    transition:
        color var(--edu-transition),
        background-color var(--edu-transition),
        border-color var(--edu-transition),
        box-shadow var(--edu-transition),
        transform var(--edu-transition);
}

.edushield-navbar-dashboard:hover,
.edushield-navbar-menu:hover {
    border-color: var(--edu-primary-muted);

    background: var(--edu-primary-soft);
    color: var(--edu-primary-dark);

    box-shadow: var(--edu-shadow-xs);
    transform: translateY(-1px);
}

.edushield-navbar-logout:hover {
    border-color: #f3c7cc;

    background: var(--edu-danger-soft);
    color: var(--edu-danger);

    transform: translateY(-1px);
}

.edushield-navbar-menu {
    display: none;
    padding-inline: 0.7rem;
}


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

.edushield-sidebar {
    position: sticky;
    top: var(--edu-topbar-height);

    display: flex;
    height: calc(100vh - var(--edu-topbar-height));
    min-height: calc(100vh - var(--edu-topbar-height));

    flex-direction: column;

    padding: 1rem 0.75rem;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 12% 5%,
            rgba(22, 135, 167, 0.18),
            transparent 14rem
        ),
        linear-gradient(
            180deg,
            #1b2738 0%,
            #111a2b 48%,
            #0b1220 100%
        );

    border-right:
        1px solid rgba(255, 255, 255, 0.06);

    color: var(--edu-white);

    box-shadow:
        12px 0 35px rgba(15, 23, 42, 0.08);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.72rem;

    margin: 0 0 0.8rem;
    padding: 0.25rem 0.35rem 1rem;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.075);
}

.brand-mark {
    display: grid;
    width: 38px;
    height: 38px;

    flex-shrink: 0;
    place-items: center;

    border:
        1px solid rgba(191, 229, 237, 0.16);

    border-radius: 12px;

    background:
        rgba(22, 135, 167, 0.15);

    color: #bfe5ed;
    font-size: 1rem;

    box-shadow:
        0 12px 26px rgba(2, 6, 23, 0.18);
}

.brand-content {
    min-width: 0;
}

.brand-name {
    color: #f8fafc;

    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.1;

    letter-spacing: -0.025em;
}

.brand-subtitle {
    margin-top: 0.25rem;

    color: #7791a6;

    font-size: 0.56rem;
    font-weight: 700;

    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.sidebar-navigation {
    flex: 1;

    padding: 0.15rem 0.12rem 0.8rem;

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color:
        rgba(255, 255, 255, 0.12)
        transparent;
}

.sidebar-navigation::-webkit-scrollbar {
    width: 4px;
}

.sidebar-navigation::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-navigation::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
}

.sidebar-section-label {
    padding: 0.68rem 0.72rem 0.48rem;

    color: #60758b;

    font-size: 0.56rem;
    font-weight: 800;

    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.sidebar-link {
    position: relative;

    display: flex;
    width: 100%;
    min-width: 0;

    align-items: center;
    gap: 0.68rem;

    margin-bottom: 0.2rem;
    padding: 0.58rem 0.66rem;

    border:
        1px solid transparent;

    border-radius: 11px;

    color: #9aabbd !important;
    text-decoration: none;

    transition:
        color var(--edu-transition),
        background-color var(--edu-transition),
        border-color var(--edu-transition),
        transform var(--edu-transition);
}

.sidebar-link:hover {
    border-color:
        rgba(255, 255, 255, 0.055);

    background:
        rgba(255, 255, 255, 0.055);

    color: #f8fafc !important;

    transform: translateX(2px);
}

.sidebar-link-active {
    border-color:
        rgba(191, 229, 237, 0.12);

    background:
        linear-gradient(
            90deg,
            rgba(22, 135, 167, 0.24),
            rgba(22, 135, 167, 0.09)
        );

    color: #ffffff !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(255, 255, 255, 0.02);
}

.sidebar-link-active::before {
    content: "";

    position: absolute;
    top: 50%;
    left: -0.67rem;

    width: 3px;
    height: 22px;

    border-radius:
        0 999px 999px 0;

    background: #63c7d9;

    box-shadow:
        0 0 14px rgba(99, 199, 217, 0.42);

    transform: translateY(-50%);
}

.sidebar-link-icon {
    display: grid;
    width: 30px;
    height: 30px;

    flex-shrink: 0;
    place-items: center;

    border:
        1px solid rgba(255, 255, 255, 0.025);

    border-radius: 9px;

    background:
        rgba(255, 255, 255, 0.025);

    color: #71869b;

    font-size: 0.86rem;

    transition:
        color var(--edu-transition),
        background-color var(--edu-transition),
        border-color var(--edu-transition);
}

.sidebar-link:hover .sidebar-link-icon,
.sidebar-link-active .sidebar-link-icon {
    border-color:
        rgba(191, 229, 237, 0.1);

    background:
        rgba(22, 135, 167, 0.13);

    color: #bfe5ed;
}

.sidebar-link-content {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
}

.sidebar-link-text {
    overflow: hidden;

    font-size: 0.71rem;
    font-weight: 680;
    line-height: 1.2;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-link-description {
    margin-top: 0.17rem;

    overflow: hidden;

    color: #5f7388;

    font-size: 0.68rem;
    font-weight: 500;
    line-height: 1.3;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-link:hover .sidebar-link-description,
.sidebar-link-active .sidebar-link-description {
    color: #7893a9;
}

.sidebar-info-card {
    margin: 0.55rem 0.1rem;
    padding: 0.72rem;

    border:
        1px solid rgba(255, 255, 255, 0.055);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.03);
}

.sidebar-footer {
    margin-top: 0.75rem;
    padding: 0.85rem 0.45rem 0.1rem;

    border-top:
        1px solid rgba(255, 255, 255, 0.07);
}

.sidebar-status {
    display: flex;
    align-items: center;
    gap: 0.45rem;

    margin-bottom: 0.72rem;

    color: #8296aa;

    font-size: 0.6rem;
    font-weight: 650;
}

.status-dot {
    width: 6px;
    height: 6px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #4fc2a0;

    box-shadow:
        0 0 0 4px rgba(79, 194, 160, 0.09);
}

.sidebar-user {
    display: flex;
    min-width: 0;

    align-items: center;
    gap: 0.62rem;

    padding: 0.62rem;

    border:
        1px solid rgba(255, 255, 255, 0.055);

    border-radius: 11px;

    background:
        rgba(255, 255, 255, 0.035);
}

.sidebar-user-avatar {
    display: grid;
    width: 31px;
    height: 31px;

    flex-shrink: 0;
    place-items: center;

    border-radius: 9px;

    background:
        rgba(22, 135, 167, 0.13);

    color: #bfe5ed;

    font-size: 0.75rem;
}

.sidebar-user-info {
    min-width: 0;
}

.sidebar-user-name {
    max-width: 135px;

    overflow: hidden;

    color: #d8e1ea;

    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.2;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-user-role {
    margin-top: 0.16rem;

    color: #667b90;

    font-size: 0.54rem;
    font-weight: 600;
}

.sidebar-version {
    margin-top: 0.48rem;
    padding-left: 0.16rem;

    color: #43556a;

    font-size: 0.52rem;
    line-height: 1.3;
}


/* ============================================================
   MOBILE SIDEBAR OVERLAY
   ============================================================ */

.edushield-sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 1045;

    display: none;

    width: 100%;
    height: 100%;

    padding: 0;

    border: 0;

    background: rgba(6, 12, 22, 0.58);

    opacity: 0;

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

    transition: opacity var(--edu-transition);
}


/* ============================================================
   MESSAGES
   ============================================================ */

.edushield-message-stack {
    position: fixed;
    top: calc(var(--edu-topbar-height) + 14px);
    right: 18px;
    z-index: 2000;

    display: grid;
    width: min(430px, calc(100vw - 30px));
    gap: 10px;

    pointer-events: none;
}

.edushield-toast-message {
    position: relative;

    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: flex-start;
    gap: 12px;

    margin: 0;
    padding: 14px 42px 14px 14px;

    border: 1px solid;
    border-radius: var(--edu-radius-md);

    box-shadow: var(--edu-shadow-md);

    pointer-events: auto;
}

.edushield-toast-icon {
    display: grid;
    width: 34px;
    height: 34px;

    place-items: center;

    border-radius: 10px;

    background: rgba(255, 255, 255, 0.66);
    font-size: 0.95rem;
}

.edushield-toast-content {
    min-width: 0;
}

.edushield-toast-content strong {
    display: block;

    margin-bottom: 0.15rem;

    color: inherit;

    font-size: 0.72rem;
    font-weight: 800;
}

.edushield-toast-content p {
    margin: 0;

    color: inherit;

    font-size: 0.69rem;
    line-height: 1.45;

    opacity: 0.9;
    overflow-wrap: anywhere;
}

.edushield-toast-close {
    position: absolute;
    top: 13px;
    right: 12px;

    padding: 7px;

    font-size: 0.6rem;
}


/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--edu-text);
    font-weight: 780;
    letter-spacing: -0.025em;
}

h1 {
    font-size: clamp(1.55rem, 2.2vw, 2.2rem);
}

h2 {
    font-size: clamp(1.3rem, 1.7vw, 1.75rem);
}

h3 {
    font-size: clamp(1.05rem, 1.3vw, 1.3rem);
}

.text-muted {
    color: var(--edu-text-muted) !important;
}


/* ============================================================
   CARDS AND SURFACES
   ============================================================ */

.card {
    border: 1px solid rgba(203, 213, 225, 0.78);
    border-radius: var(--edu-radius-md);

    background: var(--edu-surface);

    box-shadow: var(--edu-shadow-sm);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    transition:
        border-color var(--edu-transition),
        box-shadow var(--edu-transition),
        transform var(--edu-transition);
}

.card:hover {
    border-color: rgba(148, 163, 184, 0.75);
    box-shadow: var(--edu-shadow-md);
}

.card-header {
    padding: 1rem 1.1rem;

    border-bottom: 1px solid var(--edu-border);

    background: rgba(247, 249, 252, 0.76);
    color: var(--edu-text);

    font-weight: 750;
}

.card-body {
    padding: 1.1rem;
}

.card-footer {
    padding: 0.9rem 1.1rem;

    border-top: 1px solid var(--edu-border);

    background: rgba(247, 249, 252, 0.68);
}

.security-panel,
.dashboard-panel,
.content-panel {
    border: 1px solid var(--edu-border);
    border-radius: var(--edu-radius-md);

    background: var(--edu-surface-solid);

    box-shadow: var(--edu-shadow-sm);
}


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

.btn {
    min-height: 38px;

    border-radius: 10px;

    font-size: 0.76rem;
    font-weight: 700;

    transition:
        color var(--edu-transition),
        background-color var(--edu-transition),
        border-color var(--edu-transition),
        box-shadow var(--edu-transition),
        transform var(--edu-transition);
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    border-color: var(--edu-primary);
    background: var(--edu-primary);
    color: var(--edu-white);

    box-shadow:
        0 7px 18px rgba(22, 135, 167, 0.18);
}

.btn-primary:hover,
.btn-primary:focus {
    border-color: var(--edu-primary-dark);
    background: var(--edu-primary-dark);
    color: var(--edu-white);
}

.btn-secondary {
    border-color: var(--edu-slate-700);
    background: var(--edu-slate-700);
    color: var(--edu-white);
}

.btn-outline-primary {
    border-color: var(--edu-primary-muted);
    color: var(--edu-primary-dark);
}

.btn-outline-primary:hover {
    border-color: var(--edu-primary);
    background: var(--edu-primary);
    color: var(--edu-white);
}

.btn-light {
    border-color: var(--edu-border);
    background: var(--edu-white);
    color: var(--edu-slate-600);
}

.btn-danger {
    border-color: var(--edu-danger);
    background: var(--edu-danger);
}

.action-btn {
    display: inline-flex;
    min-height: 38px;

    align-items: center;
    justify-content: center;
    gap: 0.4rem;

    padding: 0.55rem 0.85rem;

    border: 1px solid var(--edu-slate-800);
    border-radius: 10px;

    background: var(--edu-slate-800);
    color: var(--edu-white);

    font-size: 0.75rem;
    font-weight: 700;

    cursor: pointer;

    transition:
        background-color var(--edu-transition),
        transform var(--edu-transition);
}

.action-btn:hover {
    background: var(--edu-slate-700);
    color: var(--edu-white);
    transform: translateY(-1px);
}


/* ============================================================
   FORMS
   ============================================================ */

.form-label {
    margin-bottom: 0.42rem;

    color: var(--edu-slate-700);

    font-size: 0.72rem;
    font-weight: 750;
}

.form-control,
.form-select {
    min-height: 42px;

    border: 1px solid var(--edu-border-strong);
    border-radius: 10px;

    background-color: rgba(255, 255, 255, 0.94);
    color: var(--edu-text);

    font-size: 0.8rem;

    box-shadow: var(--edu-shadow-xs);

    transition:
        border-color var(--edu-transition),
        box-shadow var(--edu-transition),
        background-color var(--edu-transition);
}

textarea.form-control {
    min-height: 110px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--edu-primary);

    background-color: var(--edu-white);

    box-shadow:
        0 0 0 0.22rem
        rgba(22, 135, 167, 0.13);
}

.form-control::placeholder {
    color: var(--edu-slate-400);
}

.form-text {
    color: var(--edu-text-muted);
    font-size: 0.66rem;
}

.form-check-input:checked {
    border-color: var(--edu-primary);
    background-color: var(--edu-primary);
}

.input-group-text {
    border-color: var(--edu-border-strong);
    background: var(--edu-slate-50);
    color: var(--edu-slate-500);
}

.search-box {
    width: min(100%, 320px);
    min-height: 42px;

    margin: 1rem 0;
    padding: 0.65rem 0.8rem;

    border: 1px solid var(--edu-border-strong);
    border-radius: 10px;

    background: var(--edu-white);
    color: var(--edu-text);

    font-size: 0.8rem;
}

.search-box:focus {
    border-color: var(--edu-primary);
    outline: none;

    box-shadow:
        0 0 0 0.22rem
        rgba(22, 135, 167, 0.13);
}


/* ============================================================
   TABLES
   ============================================================ */

.table-responsive {
    border: 1px solid var(--edu-border);
    border-radius: var(--edu-radius-md);

    background: var(--edu-white);

    box-shadow: var(--edu-shadow-sm);
}

.table {
    margin-bottom: 0;

    color: var(--edu-text);

    font-size: 0.76rem;
    vertical-align: middle;
}

.table > :not(caption) > * > * {
    padding: 0.82rem 0.9rem;

    border-bottom-color: var(--edu-slate-100);
}

.table thead th {
    border-bottom-width: 1px;

    background: var(--edu-slate-50);
    color: var(--edu-slate-600);

    font-size: 0.63rem;
    font-weight: 800;

    letter-spacing: 0.055em;
    text-transform: uppercase;
    white-space: nowrap;
}

.table tbody tr {
    transition: background-color var(--edu-transition);
}

.table tbody tr:hover {
    background: #f8fbfc;
}

.user-table {
    width: 100%;

    border-collapse: separate;
    border-spacing: 0;

    overflow: hidden;

    border: 1px solid var(--edu-border);
    border-radius: var(--edu-radius-md);

    background: var(--edu-white);

    box-shadow: var(--edu-shadow-sm);
}

.user-table th,
.user-table td {
    padding: 0.82rem 0.9rem;

    border-bottom: 1px solid var(--edu-slate-100);

    font-size: 0.76rem;
}

.user-table th {
    background: var(--edu-slate-50);
    color: var(--edu-slate-600);

    font-size: 0.63rem;
    font-weight: 800;

    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.user-table tr:hover td {
    background: #f8fbfc;
}


/* ============================================================
   BADGES AND ALERTS
   ============================================================ */

.badge {
    padding: 0.42rem 0.58rem;

    border-radius: 999px;

    font-size: 0.6rem;
    font-weight: 750;
}

.alert {
    border-radius: var(--edu-radius-md);

    font-size: 0.76rem;
}

.alert-success {
    border-color: #bee9d6;
    background: var(--edu-success-soft);
    color: #116a4a;
}

.alert-danger {
    border-color: #f3c7cc;
    background: var(--edu-danger-soft);
    color: #a8313b;
}

.alert-warning {
    border-color: #f4d99b;
    background: var(--edu-warning-soft);
    color: #8e590d;
}

.alert-info {
    border-color: #c9d9ff;
    background: var(--edu-info-soft);
    color: #1d4ed8;
}


/* ============================================================
   MODALS AND DROPDOWNS
   ============================================================ */

.modal-content {
    border: 1px solid var(--edu-border);
    border-radius: var(--edu-radius-lg);

    background: var(--edu-white);

    box-shadow: var(--edu-shadow-lg);
}

.modal-header,
.modal-footer {
    border-color: var(--edu-border);
}

.dropdown-menu {
    padding: 0.45rem;

    border: 1px solid var(--edu-border);
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.97);

    box-shadow: var(--edu-shadow-md);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.dropdown-item {
    padding: 0.58rem 0.68rem;

    border-radius: 8px;

    color: var(--edu-slate-700);

    font-size: 0.72rem;
    font-weight: 650;
}

.dropdown-item:hover {
    background: var(--edu-primary-soft);
    color: var(--edu-primary-dark);
}


/* ============================================================
   PAGINATION
   ============================================================ */

.pagination {
    gap: 0.25rem;
}

.page-link {
    min-width: 36px;

    border: 1px solid var(--edu-border);
    border-radius: 9px !important;

    color: var(--edu-slate-600);

    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
}

.page-link:hover {
    border-color: var(--edu-primary-muted);
    background: var(--edu-primary-soft);
    color: var(--edu-primary-dark);
}

.active > .page-link,
.page-link.active {
    border-color: var(--edu-primary);
    background: var(--edu-primary);
}


/* ============================================================
   LEGACY PAGE COMPATIBILITY
   ============================================================ */

.sidebar {
    min-height: 100vh;
}

.main-content,
.dashboard-content {
    min-width: 0;
    flex: 1;
}

.dashboard-layout {
    min-height: 80vh;
}

.dashboard {
    padding: 0;
}

.cards {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px, 1fr)
        );

    gap: 1rem;

    margin-top: 1.25rem;
}

.topbar {
    border-bottom: 1px solid var(--edu-border);
    background: var(--edu-white);

    box-shadow: var(--edu-shadow-xs);
}

footer {
    margin-top: auto;
}


/* ============================================================
   RESPONSIVE — TABLET AND MOBILE
   ============================================================ */

@media (max-width: 991.98px) {

    .edushield-content-container {
        padding:
            1.3rem
            1.15rem
            2rem;
    }

    .edushield-navbar-dashboard span {
        display: none;
    }

}


@media (max-width: 767.98px) {

    :root {
        --edu-topbar-height: 62px;
    }

    .edushield-app-shell {
        display: block;
        min-height: calc(100vh - var(--edu-topbar-height));
    }

    .edushield-app-shell > .col-md-2 {
        min-height: 0;
    }

    .edushield-main-content {
        width: 100%;
        min-height: calc(100vh - var(--edu-topbar-height));
        margin-left: 0 !important;
    }

    .edushield-content-container {
        padding:
            1.15rem
            0.9rem
            1.8rem;
    }

    .edushield-navbar-menu {
        display: inline-flex;
    }

    .edushield-sidebar {
        position: fixed;
        top: var(--edu-topbar-height);
        bottom: 0;
        left: 0;
        z-index: 1050;

        width: min(300px, 86vw);
        height: calc(100vh - var(--edu-topbar-height));
        min-height: 0;

        padding: 0.9rem 0.7rem;

        visibility: hidden;

        box-shadow:
            24px 0 60px rgba(2, 6, 23, 0.28);

        transform: translateX(-105%);

        transition:
            transform var(--edu-transition),
            visibility var(--edu-transition);
    }

    .edushield-sidebar.is-mobile-open {
        visibility: visible;
        transform: translateX(0);
    }

    .edushield-sidebar-overlay {
        display: block;
        visibility: hidden;
    }

    body.edushield-menu-open
    .edushield-sidebar-overlay {
        visibility: visible;
        opacity: 1;
    }

    .sidebar-navigation {
        max-height: none;
    }

    .sidebar-footer {
        margin-top: 0.7rem;
    }

    .table {
        min-width: 720px;
    }

    .search-box {
        width: 100%;
    }

}


@media (max-width: 575.98px) {

    :root {
        --edu-topbar-height: 58px;
    }

    body {
        font-size: 0.875rem;
    }

    .edushield-content-container {
        padding:
            1rem
            0.72rem
            1.5rem;
    }

    .edushield-topbar {
        min-height: var(--edu-topbar-height);
    }

    .navbar-brand-mark {
        width: 33px;
        height: 33px;

        border-radius: 10px;
    }

    .navbar-brand-text {
        font-size: 0.9rem;
    }

    .edushield-navbar-dashboard {
        display: none;
    }

    .edushield-navbar-logout {
        width: 36px;
        min-height: 36px;
        padding: 0;
    }

    .edushield-message-stack {
        top: calc(var(--edu-topbar-height) + 10px);
        right: 10px;
        left: 10px;

        width: auto;
    }

    .edushield-toast-message {
        padding:
            12px
            38px
            12px
            12px;
    }

    .card-body {
        padding: 0.95rem;
    }

    .btn {
        min-height: 40px;
    }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

}


/* ============================================================
   GLOBAL LIGHT PREMIUM HEADER
   Applies to every authenticated page using the shared base.
   ============================================================ */

.edushield-topbar {
    position: sticky;
    z-index: 1040;
    top: 0;
    min-height: var(--edu-topbar-height);
    border-bottom: 1px solid rgba(191, 219, 254, .82);
    background:
        radial-gradient(circle at 12% 0%, rgba(14, 165, 233, .09), transparent 25rem),
        linear-gradient(110deg, rgba(255,255,255,.98), rgba(248,251,255,.97) 58%, rgba(240,253,250,.95));
    box-shadow: 0 10px 32px rgba(30, 64, 175, .075);
    backdrop-filter: blur(24px) saturate(155%);
    -webkit-backdrop-filter: blur(24px) saturate(155%);
}

.edushield-topbar::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    content: "";
    pointer-events: none;
    background: linear-gradient(90deg, rgba(37,99,235,.8), rgba(13,148,136,.62), rgba(34,197,94,.42));
}

.edushield-navbar-brand,
.edushield-navbar-brand:hover {
    color: #0f172a;
}

.navbar-brand-mark {
    border-color: #bfdbfe;
    background: linear-gradient(145deg, #ffffff, #eff6ff);
    color: #1d4ed8;
    box-shadow: 0 9px 22px rgba(37,99,235,.12);
}

.navbar-brand-text {
    color: #0f172a;
    font-weight: 900;
}

.navbar-brand-subtitle {
    color: #64748b;
    font-size: .68rem;
}

.edushield-navbar-dashboard,
.edushield-navbar-profile,
.edushield-navbar-menu {
    border-color: #dbeafe;
    background: rgba(255,255,255,.88);
    color: #334155;
    box-shadow: 0 6px 18px rgba(30,64,175,.055);
}

.edushield-navbar-dashboard:hover,
.edushield-navbar-profile:hover,
.edushield-navbar-profile[aria-expanded="true"],
.edushield-navbar-menu:hover {
    border-color: #93c5fd;
    background: #ffffff;
    color: #1d4ed8;
    box-shadow: 0 10px 25px rgba(37,99,235,.10);
}

.edushield-navbar-profile .edushield-navbar-user-name {
    color: #0f172a;
    font-size: .82rem;
}

.edushield-navbar-profile .edushield-navbar-user-role {
    color: #64748b;
    font-size: .68rem;
}

.edushield-profile-dropdown {
    border-color: #dbeafe;
    background: rgba(255,255,255,.985);
    box-shadow: 0 24px 60px rgba(30,64,175,.14);
}

@media (max-width: 767.98px) {
    .edushield-content-container {
        width: 100%;
        max-width: 100%;
        padding: 1.15rem 1rem 2rem;
        overflow-x: hidden;
    }

    .edushield-navbar-brand {
        min-width: 0;
    }

    .navbar-brand-copy {
        min-width: 0;
    }

    .navbar-brand-text,
    .navbar-brand-subtitle {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .edushield-navbar-profile {
        min-height: 42px;
    }

    .table-responsive {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 575.98px) {
    .edushield-topbar {
        min-height: var(--edu-topbar-height);
    }

    .navbar-brand-mark {
        width: 39px;
        height: 39px;
        flex: 0 0 39px;
    }

    .navbar-brand-text {
        max-width: 132px;
        font-size: .94rem;
    }

    .navbar-brand-subtitle {
        display: none;
    }

    .edushield-navbar-profile .edushield-navbar-user-info,
    .edushield-navbar-profile-arrow {
        display: none;
    }
}


/* ============================================================
   PRINT
   ============================================================ */

@media print {

    body {
        background: #ffffff !important;
    }

    .edushield-topbar,
    .edushield-sidebar,
    .edushield-sidebar-overlay,
    .edushield-message-stack,
    .edushield-page-loader {
        display: none !important;
    }

    .edushield-main-content {
        width: 100% !important;
        margin: 0 !important;
    }

    .edushield-content-container {
        max-width: none;
        padding: 0;
    }

    .card,
    .table-responsive {
        box-shadow: none !important;
    }

}


/* ============================================================
   EDUSHIELD PREMIUM REFINEMENT
   FROSTED SLATE — EXECUTIVE PASS
   ============================================================ */

:root {
    --edu-sidebar-width: 272px;
    --edu-topbar-height: 74px;
}


/* ============================================================
   PREMIUM PAGE CANVAS
   ============================================================ */

body {
    font-size: 1rem;

    background:
        radial-gradient(
            circle at 82% 2%,
            rgba(25, 145, 177, 0.12),
            transparent 27rem
        ),
        radial-gradient(
            circle at 37% 100%,
            rgba(37, 99, 235, 0.055),
            transparent 30rem
        ),
        linear-gradient(
            145deg,
            #e8eef4 0%,
            #f5f8fb 48%,
            #eaf1f5 100%
        );
}

.edushield-app-shell {
    display: flex;
    flex-wrap: nowrap;
}

.edushield-app-shell > .col-md-2 {
    width: var(--edu-sidebar-width);
    min-width: var(--edu-sidebar-width);
    flex: 0 0 var(--edu-sidebar-width);
}

.edushield-main-content {
    width: calc(100% - var(--edu-sidebar-width));
    flex: 1 1 auto;
}

.edushield-content-container {
    max-width: 1680px;
    padding: 2rem 2.15rem 3rem;
}


/* ============================================================
   PREMIUM TOPBAR
   ============================================================ */

.edushield-topbar {
    min-height: var(--edu-topbar-height);

    background:
        linear-gradient(
            110deg,
            rgba(250, 252, 254, 0.94),
            rgba(237, 244, 248, 0.91)
        );

    border-bottom:
        1px solid rgba(148, 163, 184, 0.28);

    box-shadow:
        0 10px 35px rgba(15, 23, 42, 0.075);

    backdrop-filter: blur(24px) saturate(145%);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
}

.edushield-navbar-brand {
    gap: 0.78rem;
}

.navbar-brand-mark {
    width: 43px;
    height: 43px;

    border-color: rgba(22, 135, 167, 0.24);
    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.98),
            rgba(211, 239, 245, 0.96)
        );

    color: #0f7896;

    box-shadow:
        0 12px 28px rgba(15, 111, 139, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.navbar-brand-copy {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
}

.navbar-brand-text {
    font-size: 1.08rem;
    font-weight: 850;
}

.navbar-brand-subtitle {
    color: #728196;

    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.025em;
}

.edushield-system-status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;

    padding: 0.45rem 0.7rem;

    border: 1px solid rgba(23, 132, 92, 0.13);
    border-radius: 999px;

    background: rgba(229, 247, 239, 0.72);
    color: #326d59;

    font-size: 0.72rem;
    font-weight: 700;
}

.edushield-system-status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #22a676;

    box-shadow:
        0 0 0 4px rgba(34, 166, 118, 0.11);
}

.edushield-navbar-dashboard {
    min-height: 42px;
    padding: 0.58rem 0.9rem;

    border-color: rgba(148, 163, 184, 0.3);
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.76);

    font-size: 0.78rem;

    box-shadow:
        0 5px 16px rgba(15, 23, 42, 0.045);
}


/* ============================================================
   NAVBAR PROFILE
   ============================================================ */

.edushield-navbar-profile {
    display: flex;
    min-height: 48px;

    align-items: center;
    gap: 0.62rem;

    padding: 0.4rem 0.62rem;

    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.76);
    color: #334155;

    box-shadow:
        0 6px 18px rgba(15, 23, 42, 0.055);

    cursor: pointer;

    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.edushield-navbar-profile:hover,
.edushield-navbar-profile[aria-expanded="true"] {
    border-color: rgba(22, 135, 167, 0.35);

    box-shadow:
        0 10px 24px rgba(15, 23, 42, 0.085);

    transform: translateY(-1px);
}

.edushield-navbar-profile .edushield-navbar-user-icon {
    width: 37px;
    height: 37px;

    border-color: rgba(22, 135, 167, 0.17);
    border-radius: 11px;

    background:
        linear-gradient(
            145deg,
            #effbfc,
            #dff4f8
        );

    color: #0f6f8b;
}

.edushield-navbar-profile .edushield-navbar-user-name {
    font-size: 0.78rem;
}

.edushield-navbar-profile .edushield-navbar-user-role {
    font-size: 0.62rem;
}

.edushield-navbar-profile-arrow {
    color: #8290a2;

    font-size: 0.65rem;

    transition: transform 180ms ease;
}

.edushield-navbar-profile[aria-expanded="true"]
.edushield-navbar-profile-arrow {
    transform: rotate(180deg);
}

.edushield-profile-dropdown {
    min-width: 245px;

    margin-top: 0.65rem !important;
    padding: 0.55rem;

    border: 1px solid rgba(203, 213, 225, 0.9);
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.97);

    box-shadow:
        0 24px 55px rgba(15, 23, 42, 0.16);

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.edushield-profile-dropdown-header {
    display: flex;
    flex-direction: column;

    padding: 0.6rem 0.7rem;
}

.edushield-profile-dropdown-name {
    color: #172033;

    font-size: 0.84rem;
    font-weight: 800;
}

.edushield-profile-dropdown-role {
    margin-top: 0.14rem;

    color: #64748b;

    font-size: 0.7rem;
}

.edushield-profile-scope {
    display: inline-flex;
    width: fit-content;

    align-items: center;
    gap: 0.35rem;

    margin-top: 0.55rem;
    padding: 0.3rem 0.55rem;

    border-radius: 999px;

    background: #dff4f8;
    color: #0f6f8b;

    font-size: 0.65rem;
    font-weight: 700;
}

.edushield-profile-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;

    padding: 0.68rem 0.72rem;

    border-radius: 10px;

    color: #475569;

    font-size: 0.76rem;
    font-weight: 650;
}

.edushield-profile-dropdown .dropdown-item:hover {
    background: #eef6f8;
    color: #0f6f8b;
}

.edushield-dropdown-logout {
    color: #b33c47 !important;
}

.edushield-dropdown-logout:hover {
    background: #fdebed !important;
    color: #a7323d !important;
}


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

.edushield-sidebar {
    padding: 1.15rem 0.9rem;

    background:
        radial-gradient(
            circle at 18% 2%,
            rgba(40, 175, 202, 0.24),
            transparent 17rem
        ),
        radial-gradient(
            circle at 120% 68%,
            rgba(37, 99, 235, 0.11),
            transparent 20rem
        ),
        linear-gradient(
            180deg,
            #18283a 0%,
            #101c2d 48%,
            #091321 100%
        );

    box-shadow:
        16px 0 45px rgba(7, 15, 26, 0.15);
}

.sidebar-brand {
    padding: 0.3rem 0.45rem 1.05rem;
}

.brand-name {
    font-size: 1.02rem;
}

.brand-subtitle {
    color: #8ba1b6;
    font-size: 0.61rem;
}

.sidebar-mobile-close {
    display: none;
    width: 36px;
    height: 36px;
    margin-left: auto;

    place-items: center;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.06);
    color: #dbe5ee;
}

.sidebar-role-card {
    display: flex;
    align-items: center;
    gap: 0.72rem;

    margin: 0 0.15rem 0.8rem;
    padding: 0.78rem;

    border: 1px solid rgba(191, 229, 237, 0.1);
    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.025)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.sidebar-role-icon {
    display: grid;
    width: 37px;
    height: 37px;

    flex-shrink: 0;
    place-items: center;

    border: 1px solid rgba(99, 199, 217, 0.16);
    border-radius: 11px;

    background: rgba(22, 135, 167, 0.15);
    color: #a9dfE8;
}

.sidebar-role-label {
    color: #6f859a;

    font-size: 0.59rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.sidebar-role-name {
    margin-top: 0.1rem;

    color: #f2f7fa;

    font-size: 0.78rem;
    font-weight: 750;
}

.sidebar-role-scope {
    margin-top: 0.18rem;

    color: #8da4b8;

    font-size: 0.62rem;
}

.sidebar-section-label {
    padding: 0.82rem 0.72rem 0.5rem;

    color: #71899f;

    font-size: 0.62rem;
}

.sidebar-link {
    gap: 0.76rem;

    margin-bottom: 0.28rem;
    padding: 0.7rem 0.72rem;

    border-radius: 13px;

    color: #aebdca !important;
}

.sidebar-link-text {
    font-size: 0.8rem;
    font-weight: 700;
}

.sidebar-link-description {
    margin-top: 0.2rem;

    color: #71869a;

    font-size: 0.64rem;
}

.sidebar-link:hover .sidebar-link-description,
.sidebar-link-active .sidebar-link-description {
    color: #93aabd;
}

.sidebar-link-icon {
    width: 34px;
    height: 34px;

    border-radius: 10px;

    font-size: 0.9rem;
}

.sidebar-link-active {
    border-color: rgba(99, 199, 217, 0.17);

    background:
        linear-gradient(
            100deg,
            rgba(22, 135, 167, 0.3),
            rgba(22, 135, 167, 0.1)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 10px 24px rgba(3, 10, 19, 0.15);
}

.sidebar-user {
    padding: 0.7rem;
    border-radius: 13px;
}

.sidebar-user-name {
    max-width: 150px;
    font-size: 0.72rem;
}

.sidebar-user-role {
    font-size: 0.6rem;
}

.sidebar-version {
    font-size: 0.57rem;
}


/* ============================================================
   PREMIUM TEACHER DASHBOARD
   ============================================================ */

.teacher-premium-dashboard {
    padding: 0 !important;
}

.teacher-premium-dashboard > .d-flex:first-child {
    position: relative;
    overflow: hidden;

    margin-bottom: 1.4rem !important;
    padding: 1.6rem 1.7rem;

    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 22px;

    background:
        radial-gradient(
            circle at 88% 12%,
            rgba(22, 135, 167, 0.18),
            transparent 19rem
        ),
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.93),
            rgba(236, 244, 248, 0.84)
        );

    box-shadow:
        0 22px 52px rgba(15, 23, 42, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.teacher-premium-dashboard > .d-flex:first-child::after {
    content: "";

    position: absolute;
    right: -75px;
    bottom: -115px;

    width: 260px;
    height: 260px;

    border: 1px solid rgba(22, 135, 167, 0.13);
    border-radius: 50%;

    pointer-events: none;
}

.teacher-premium-dashboard > .d-flex:first-child h2 {
    color: #142033;

    font-size: clamp(1.65rem, 2.3vw, 2.25rem);
    font-weight: 850 !important;
    letter-spacing: -0.045em;
}

.teacher-premium-dashboard > .d-flex:first-child p {
    font-size: 0.9rem;
}

.teacher-premium-dashboard .card {
    border: 1px solid rgba(203, 213, 225, 0.72) !important;
    border-radius: 19px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.94),
            rgba(249, 251, 253, 0.86)
        ) !important;

    box-shadow:
        0 14px 34px rgba(15, 23, 42, 0.075),
        inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.teacher-premium-dashboard .card:hover {
    border-color: rgba(22, 135, 167, 0.2) !important;

    box-shadow:
        0 20px 44px rgba(15, 23, 42, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;

    transform: translateY(-2px);
}

.teacher-premium-dashboard .card-body {
    padding: 1.35rem;
}

.teacher-premium-dashboard h2 {
    color: #172033;
    letter-spacing: -0.035em;
}

.teacher-premium-dashboard h5,
.teacher-premium-dashboard h6 {
    color: #253247;
}

.teacher-premium-dashboard .text-muted {
    color: #64748b !important;
}

.teacher-premium-dashboard .badge.bg-primary-subtle {
    border: 1px solid rgba(22, 135, 167, 0.14);

    background: rgba(223, 244, 248, 0.92) !important;
    color: #0f6f8b !important;

    font-size: 0.73rem;
    font-weight: 750;
}

.teacher-premium-dashboard .btn-primary {
    border-color: #0f7896;

    background:
        linear-gradient(
            135deg,
            #1898b8,
            #0f708d
        );

    box-shadow:
        0 10px 24px rgba(15, 112, 141, 0.2);
}

.teacher-premium-dashboard .btn-primary:hover {
    border-color: #0d617a;

    background:
        linear-gradient(
            135deg,
            #1386a5,
            #0c6079
        );

    box-shadow:
        0 14px 30px rgba(15, 112, 141, 0.27);

    transform: translateY(-1px);
}

.teacher-premium-dashboard .btn-light {
    background: rgba(248, 251, 253, 0.88);
    color: #334155;
}

.teacher-premium-dashboard .btn-light:hover {
    border-color: rgba(22, 135, 167, 0.22) !important;

    background: #eef8fa;
    color: #0f6f8b;

    transform: translateY(-1px);
}

.teacher-premium-dashboard .table {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: rgba(22, 135, 167, 0.045);

    margin-bottom: 0;
}

.teacher-premium-dashboard .table thead th {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;

    background: rgba(238, 242, 246, 0.78);
    color: #64748b;

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.teacher-premium-dashboard .table tbody td {
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;

    color: #475569;

    font-size: 0.82rem;
}


/* ============================================================
   PREMIUM RESPONSIVE BEHAVIOUR
   ============================================================ */

@media (max-width: 1199.98px) {

    :root {
        --edu-sidebar-width: 250px;
    }

    .edushield-content-container {
        padding:
            1.65rem
            1.45rem
            2.5rem;
    }

}


@media (max-width: 767.98px) {

    :root {
        --edu-topbar-height: 64px;
    }

    .edushield-app-shell {
        display: block;
    }

    .edushield-app-shell > .col-md-2 {
        width: 0;
        min-width: 0;
        flex-basis: 0;
    }

    .edushield-main-content {
        width: 100%;
    }

    .edushield-sidebar {
        width: min(310px, 88vw);
    }

    .sidebar-mobile-close {
        display: grid;
    }

    .edushield-content-container {
        padding:
            1.15rem
            0.9rem
            2rem;
    }

    .teacher-premium-dashboard > .d-flex:first-child {
        padding: 1.25rem;
        border-radius: 18px;
    }

}


@media (max-width: 575.98px) {

    .edushield-system-status {
        display: none !important;
    }

    .edushield-navbar-profile {
        min-height: 41px;
        padding: 0.25rem 0.35rem;
    }

    .edushield-navbar-profile-arrow {
        display: none;
    }

    .teacher-premium-dashboard .card-body {
        padding: 1.05rem;
    }

}


/* ============================================================
   EDUSHIELD — MY CLASSROOMS PREMIUM PAGE
   Append this complete module to the end of the Frosted Slate CSS.
   ============================================================ */

.teacher-classrooms-page {
    --classroom-teal: #1687a7;
    --classroom-teal-dark: #0f6f8b;
    --classroom-ink: #172033;
    --classroom-copy: #475569;
    --classroom-muted: #64748b;
    position: relative;
}

.teacher-classrooms-page .teacher-classrooms-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    overflow: hidden;
    min-height: 220px;
    margin-bottom: 1.25rem;
    padding: 2rem 2.1rem;
    border: 1px solid rgba(255, 255, 255, 0.86);
    border-radius: 24px;
    background:
        radial-gradient(circle at 84% 10%, rgba(22, 135, 167, 0.19), transparent 19rem),
        radial-gradient(circle at 8% 110%, rgba(37, 99, 235, 0.08), transparent 18rem),
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(235, 244, 248, 0.88));
    box-shadow: 0 24px 58px rgba(15, 23, 42, 0.1), inset 0 1px 0 #fff;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.teacher-classrooms-hero__content,
.teacher-classrooms-hero__actions {
    position: relative;
    z-index: 2;
}

.teacher-classrooms-hero__content {
    max-width: 690px;
}

.teacher-classrooms-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1rem;
    color: var(--classroom-teal-dark);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.065em;
    text-transform: uppercase;
}

.teacher-classrooms-kicker__icon {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid rgba(22, 135, 167, 0.14);
    border-radius: 10px;
    background: rgba(223, 244, 248, 0.9);
}

.teacher-classrooms-kicker__divider {
    width: 1px;
    height: 17px;
    background: rgba(100, 116, 139, 0.28);
}

.teacher-classrooms-kicker__teacher {
    color: var(--classroom-muted);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.teacher-classrooms-page .teacher-classrooms-hero h2 {
    margin: 0 0 0.65rem;
    color: #132034;
    font-size: clamp(2rem, 3.2vw, 3rem);
    font-weight: 880 !important;
    letter-spacing: -0.055em;
    line-height: 1.05;
}

.teacher-classrooms-page .teacher-classrooms-hero p {
    max-width: 620px;
    margin: 0;
    color: var(--classroom-muted);
    font-size: 0.94rem;
    line-height: 1.7;
}

.teacher-classrooms-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.7rem;
}

.teacher-classrooms-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 44px;
    padding: 0.72rem 1rem;
    border-radius: 13px;
    font-size: 0.78rem;
    font-weight: 780;
    transition: transform var(--edu-transition), box-shadow var(--edu-transition), background var(--edu-transition);
}

.teacher-classrooms-btn--ghost {
    border: 1px solid rgba(203, 213, 225, 0.9);
    background: rgba(255, 255, 255, 0.72);
    color: #334155;
}

.teacher-classrooms-btn--ghost:hover {
    border-color: rgba(22, 135, 167, 0.25);
    background: #fff;
    color: var(--classroom-teal-dark);
    transform: translateY(-2px);
}

.teacher-classrooms-btn--alert {
    border: 1px solid rgba(194, 65, 75, 0.18);
    background: rgba(253, 235, 237, 0.86);
    color: #ad3641;
}

.teacher-classrooms-btn--alert:hover {
    border-color: rgba(194, 65, 75, 0.28);
    background: #fbdfe2;
    color: #992f39;
    transform: translateY(-2px);
}

.teacher-classrooms-hero__orb {
    position: absolute;
    border: 1px solid rgba(22, 135, 167, 0.13);
    border-radius: 50%;
    pointer-events: none;
}

.teacher-classrooms-hero__orb--one {
    right: -70px;
    bottom: -135px;
    width: 300px;
    height: 300px;
}

.teacher-classrooms-hero__orb--two {
    right: 85px;
    bottom: -170px;
    width: 250px;
    height: 250px;
}

.teacher-classrooms-overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.7rem;
    padding: 1.25rem 1.35rem;
    border: 1px solid rgba(203, 213, 225, 0.72);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(248, 251, 253, 0.86));
    box-shadow: 0 13px 32px rgba(15, 23, 42, 0.065), inset 0 1px 0 #fff;
}

.teacher-classrooms-overview__intro {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.teacher-classrooms-overview__icon {
    display: grid;
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    place-items: center;
    border: 1px solid rgba(22, 135, 167, 0.14);
    border-radius: 16px;
    background: linear-gradient(145deg, #e7f7fa, #d9f0f5);
    color: var(--classroom-teal-dark);
    font-size: 1.25rem;
    box-shadow: 0 10px 22px rgba(22, 135, 167, 0.09);
}

.teacher-classrooms-eyebrow {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--classroom-teal-dark);
    font-size: 0.67rem;
    font-weight: 820;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.teacher-classrooms-overview h3,
.teacher-classrooms-section-heading h3,
.teacher-classrooms-empty h3 {
    margin: 0;
    color: var(--classroom-ink);
    font-size: 1.06rem;
    font-weight: 820;
    letter-spacing: -0.025em;
}

.teacher-classrooms-overview p {
    margin: 0.25rem 0 0;
    color: var(--classroom-muted);
    font-size: 0.78rem;
}

.teacher-classrooms-overview__metric {
    display: grid;
    min-width: 185px;
    padding-left: 1.35rem;
    border-left: 1px solid rgba(203, 213, 225, 0.75);
}

.teacher-classrooms-overview__metric-label {
    color: var(--classroom-muted);
    font-size: 0.68rem;
    font-weight: 700;
}

.teacher-classrooms-overview__metric strong {
    color: var(--classroom-ink);
    font-size: 1.8rem;
    font-weight: 880;
    line-height: 1.2;
}

.teacher-classrooms-overview__metric-note {
    color: var(--edu-success);
    font-size: 0.67rem;
    font-weight: 750;
}

.teacher-classrooms-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 0.9rem;
    padding: 0 0.2rem;
}

.teacher-classrooms-section-heading__count {
    padding: 0.42rem 0.68rem;
    border: 1px solid rgba(203, 213, 225, 0.75);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.68);
    color: var(--classroom-muted);
    font-size: 0.67rem;
    font-weight: 750;
}

.teacher-classroom-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(203, 213, 225, 0.76);
    border-radius: 22px;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.97), rgba(247, 250, 252, 0.91));
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.075), inset 0 1px 0 #fff;
    transition: transform var(--edu-transition), border-color var(--edu-transition), box-shadow var(--edu-transition);
}

.teacher-classroom-card:hover {
    border-color: rgba(22, 135, 167, 0.28);
    box-shadow: 0 23px 52px rgba(15, 23, 42, 0.115), inset 0 1px 0 #fff;
    transform: translateY(-4px);
}

.teacher-classroom-card__topline {
    height: 4px;
    background: linear-gradient(90deg, #1687a7, #59bdd1 54%, rgba(89, 189, 209, 0.08));
}

.teacher-classroom-card__body {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    padding: 1.35rem;
}

.teacher-classroom-card__header,
.teacher-classroom-card__capacity-copy,
.teacher-classroom-attendance__summary,
.teacher-classroom-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.teacher-classroom-card__header {
    align-items: flex-start;
    margin-bottom: 1.15rem;
}

.teacher-classroom-card__identity {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 0.85rem;
}

.teacher-classroom-card__mark {
    display: grid;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid rgba(22, 135, 167, 0.13);
    border-radius: 14px;
    background: linear-gradient(145deg, #e8f8fb, #dff1f5);
    color: var(--classroom-teal-dark);
    font-size: 1.05rem;
}

.teacher-classroom-card__year {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.3rem;
    color: var(--classroom-muted);
    font-size: 0.65rem;
    font-weight: 720;
}

.teacher-classroom-card h4 {
    overflow: hidden;
    margin: 0 0 0.2rem;
    color: var(--classroom-ink);
    font-size: 1.3rem;
    font-weight: 860;
    letter-spacing: -0.035em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teacher-classroom-card__identity p {
    margin: 0;
    color: var(--classroom-muted);
    font-size: 0.72rem;
}

.teacher-classroom-card__status {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.4rem;
    padding: 0.38rem 0.6rem;
    border: 1px solid rgba(23, 132, 92, 0.13);
    border-radius: 999px;
    background: var(--edu-success-soft);
    color: var(--edu-success);
    font-size: 0.62rem;
    font-weight: 800;
}

.teacher-classroom-card__status span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 4px rgba(23, 132, 92, 0.1);
}

.teacher-classroom-card__capacity {
    margin-bottom: 0.95rem;
    padding: 0.9rem;
    border: 1px solid rgba(219, 227, 236, 0.9);
    border-radius: 15px;
    background: rgba(247, 249, 252, 0.82);
}

.teacher-classroom-card__capacity-copy > span {
    color: var(--classroom-muted);
    font-size: 0.68rem;
    font-weight: 720;
}

.teacher-classroom-card__capacity-copy strong {
    color: var(--classroom-ink);
    font-size: 0.9rem;
    font-weight: 850;
}

.teacher-classroom-card__capacity-copy small {
    color: var(--classroom-muted);
    font-size: 0.68rem;
    font-weight: 650;
}

.teacher-classroom-progress {
    position: relative;
    overflow: hidden;
    height: 7px;
    margin: 0.65rem 0 0.45rem;
    border-radius: 999px;
    background: #e4ebf1;
}

.teacher-classroom-progress > span {
    position: absolute;
    inset: 0 auto 0 0;
    max-width: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1687a7, #58bed2);
    box-shadow: 0 0 12px rgba(22, 135, 167, 0.24);
}

.teacher-classroom-card__capacity-foot {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--classroom-muted);
    font-size: 0.59rem;
    font-weight: 650;
}

.teacher-classroom-attendance {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid rgba(22, 135, 167, 0.11);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(238, 248, 250, 0.84), rgba(248, 251, 253, 0.92));
}

.teacher-classroom-attendance__label {
    color: var(--classroom-muted);
    font-size: 0.66rem;
    font-weight: 750;
}

.teacher-classroom-attendance__rate {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
}

.teacher-classroom-attendance__rate strong {
    color: var(--classroom-ink);
    font-size: 1.55rem;
    font-weight: 880;
    letter-spacing: -0.04em;
}

.teacher-classroom-attendance__rate span {
    color: var(--classroom-muted);
    font-size: 0.61rem;
    font-weight: 650;
}

.teacher-classroom-health {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.58rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 800;
}

.teacher-classroom-health--strong {
    border-color: rgba(23, 132, 92, 0.13);
    background: var(--edu-success-soft);
    color: var(--edu-success);
}

.teacher-classroom-health--monitor {
    border-color: rgba(196, 122, 18, 0.13);
    background: var(--edu-warning-soft);
    color: var(--edu-warning);
}

.teacher-classroom-health--attention {
    border-color: rgba(194, 65, 75, 0.13);
    background: var(--edu-danger-soft);
    color: var(--edu-danger);
}

.teacher-classroom-health--empty {
    border-color: rgba(100, 116, 139, 0.14);
    background: #edf1f5;
    color: var(--classroom-muted);
}

.teacher-classroom-progress--attendance {
    margin-bottom: 0.8rem;
}

.teacher-classroom-breakdown {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}

.teacher-classroom-stat {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem;
    border: 1px solid rgba(203, 213, 225, 0.55);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.76);
}

.teacher-classroom-stat__icon {
    display: grid;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 9px;
    font-size: 0.72rem;
}

.teacher-classroom-stat div {
    display: grid;
    min-width: 0;
}

.teacher-classroom-stat strong {
    color: var(--classroom-ink);
    font-size: 0.9rem;
    font-weight: 850;
    line-height: 1.1;
}

.teacher-classroom-stat div span {
    color: var(--classroom-muted);
    font-size: 0.55rem;
    font-weight: 680;
}

.teacher-classroom-stat--present .teacher-classroom-stat__icon {
    background: var(--edu-success-soft);
    color: var(--edu-success);
}

.teacher-classroom-stat--absent .teacher-classroom-stat__icon {
    background: var(--edu-danger-soft);
    color: var(--edu-danger);
}

.teacher-classroom-stat--late .teacher-classroom-stat__icon {
    background: var(--edu-warning-soft);
    color: var(--edu-warning);
}

.teacher-classroom-card__description {
    margin-bottom: 1rem;
    padding: 0 0.15rem;
}

.teacher-classroom-card__description > span {
    color: var(--classroom-muted);
    font-size: 0.63rem;
    font-weight: 780;
}

.teacher-classroom-card__description p {
    margin: 0.3rem 0 0;
    color: var(--classroom-copy);
    font-size: 0.68rem;
    line-height: 1.55;
}

.teacher-classroom-card__footer {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(219, 227, 236, 0.9);
}

.teacher-classroom-card__footer-note {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--classroom-muted);
    font-size: 0.56rem;
    line-height: 1.35;
}

.teacher-classroom-card__footer-note > span:last-child {
    display: grid;
}

.teacher-classroom-card__footer-note strong {
    color: var(--classroom-copy);
    font-size: 0.63rem;
}

.teacher-classroom-card__footer-icon {
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    border-radius: 9px;
    background: var(--edu-primary-soft);
    color: var(--classroom-teal-dark);
    font-size: 0.7rem;
}

.teacher-classroom-card__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 42px;
    padding: 0.66rem 0.85rem;
    border: 1px solid #0f7896;
    border-radius: 12px;
    background: linear-gradient(135deg, #1898b8, #0f708d);
    color: #fff;
    box-shadow: 0 10px 22px rgba(15, 112, 141, 0.18);
    font-size: 0.7rem;
    font-weight: 800;
}

.teacher-classroom-card__action:hover {
    border-color: #0d617a;
    background: linear-gradient(135deg, #1386a5, #0c6079);
    color: #fff;
    box-shadow: 0 14px 28px rgba(15, 112, 141, 0.26);
    transform: translateY(-2px);
}

.teacher-classrooms-empty {
    display: grid;
    min-height: 390px;
    place-items: center;
    align-content: center;
    padding: 2.5rem 1.5rem;
    border: 1px solid rgba(203, 213, 225, 0.72);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(245, 250, 252, 0.88));
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.075);
    text-align: center;
}

.teacher-classrooms-empty__visual {
    position: relative;
    display: grid;
    width: 94px;
    height: 94px;
    margin-bottom: 1.2rem;
    place-items: center;
}

.teacher-classrooms-empty__ring {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(22, 135, 167, 0.18);
    border-radius: 50%;
    background: rgba(223, 244, 248, 0.45);
}

.teacher-classrooms-empty__icon {
    display: grid;
    width: 62px;
    height: 62px;
    place-items: center;
    border-radius: 19px;
    background: var(--edu-primary-soft);
    color: var(--classroom-teal-dark);
    font-size: 1.55rem;
}

.teacher-classrooms-empty p {
    max-width: 570px;
    margin: 0.6rem auto 1.25rem;
    color: var(--classroom-muted);
    font-size: 0.8rem;
    line-height: 1.65;
}

@media (max-width: 1199.98px) {
    .teacher-classrooms-page .teacher-classrooms-hero {
        align-items: flex-start;
        flex-direction: column;
        min-height: auto;
    }

    .teacher-classrooms-hero__actions {
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    .teacher-classrooms-page .teacher-classrooms-hero {
        gap: 1.35rem;
        padding: 1.35rem;
        border-radius: 20px;
    }

    .teacher-classrooms-overview {
        grid-template-columns: 1fr;
        padding: 1.1rem;
    }

    .teacher-classrooms-overview__metric {
        grid-template-columns: 1fr auto;
        align-items: center;
        padding: 0.9rem 0 0;
        border-top: 1px solid rgba(203, 213, 225, 0.75);
        border-left: 0;
    }

    .teacher-classrooms-overview__metric-note {
        grid-column: 1 / -1;
    }

    .teacher-classroom-card__footer {
        align-items: stretch;
        flex-direction: column;
    }

    .teacher-classroom-card__action {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .teacher-classrooms-kicker__divider,
    .teacher-classrooms-kicker__teacher {
        display: none;
    }

    .teacher-classrooms-hero__actions,
    .teacher-classrooms-btn {
        width: 100%;
    }

    .teacher-classrooms-overview__intro {
        align-items: flex-start;
    }

    .teacher-classrooms-overview__icon {
        flex-basis: 46px;
        width: 46px;
        height: 46px;
    }

    .teacher-classrooms-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .teacher-classroom-card__body {
        padding: 1.05rem;
    }

    .teacher-classroom-card__header {
        gap: 0.65rem;
    }

    .teacher-classroom-card__status {
        padding-inline: 0.48rem;
    }

    .teacher-classroom-breakdown {
        grid-template-columns: 1fr;
    }

    .teacher-classroom-stat {
        justify-content: flex-start;
    }

    .teacher-classroom-card__capacity-foot {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.15rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .teacher-classroom-card,
    .teacher-classroom-card__action,
    .teacher-classrooms-btn {
        transition: none;
    }
}


/* ============================================================
   EDUSHIELD — PREMIUM CLASSROOM DETAIL PAGE
   Append this complete module to the end of the Frosted Slate CSS.
   ============================================================ */

.teacher-classroom-detail-page {
    --detail-teal: #1687a7;
    --detail-teal-dark: #0f6f8b;
    --detail-ink: #172033;
    --detail-copy: #475569;
    --detail-muted: #64748b;
}

/* Hero */

.teacher-classroom-detail-page > .classroom-detail-hero {
    position: relative;
    overflow: hidden;
    min-height: 205px;
    padding: 2rem 2.1rem;
    border: 1px solid rgba(255, 255, 255, 0.86);
    border-radius: 24px;
    background:
        radial-gradient(circle at 85% 8%, rgba(22, 135, 167, 0.2), transparent 19rem),
        radial-gradient(circle at 3% 115%, rgba(37, 99, 235, 0.07), transparent 17rem),
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(235, 244, 248, 0.88));
    box-shadow: 0 24px 58px rgba(15, 23, 42, 0.1), inset 0 1px 0 #fff;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.teacher-classroom-detail-page > .classroom-detail-hero::before,
.teacher-classroom-detail-page > .classroom-detail-hero::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(22, 135, 167, 0.13);
    border-radius: 50%;
    pointer-events: none;
}

.teacher-classroom-detail-page > .classroom-detail-hero::before {
    right: -70px;
    bottom: -145px;
    width: 310px;
    height: 310px;
}

.teacher-classroom-detail-page > .classroom-detail-hero::after {
    right: 105px;
    bottom: -175px;
    width: 255px;
    height: 255px;
}

.classroom-detail-hero > div {
    position: relative;
    z-index: 2;
}

.teacher-classroom-detail-page .classroom-detail-hero h2 {
    margin-bottom: 0.35rem !important;
    color: #132034;
    font-size: clamp(2rem, 3.2vw, 3rem);
    font-weight: 880 !important;
    letter-spacing: -0.055em;
    line-height: 1.06;
}

.classroom-detail-hero > div:first-child > p {
    color: var(--detail-muted) !important;
    font-size: 0.9rem;
    font-weight: 650;
}

.classroom-detail-hero .badge {
    border: 1px solid rgba(22, 135, 167, 0.14);
    background: rgba(223, 244, 248, 0.92) !important;
    color: var(--detail-teal-dark) !important;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.classroom-detail-hero .btn {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 13px !important;
    font-size: 0.75rem;
    font-weight: 780;
}

.classroom-detail-hero .btn-success,
.classroom-detail-actions .btn-success,
.classroom-detail-intelligence .btn-success {
    border-color: #137654;
    background: linear-gradient(135deg, #1c966c, #147451);
    box-shadow: 0 10px 24px rgba(20, 116, 81, 0.2);
}

.classroom-detail-hero .btn-success:hover,
.classroom-detail-actions .btn-success:hover,
.classroom-detail-intelligence .btn-success:hover {
    border-color: #105f43;
    background: linear-gradient(135deg, #18845f, #105f43);
    transform: translateY(-2px);
}

/* KPI cards */

.classroom-detail-metrics .card {
    position: relative;
    overflow: hidden;
    min-height: 158px;
}

.classroom-detail-metrics .card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--detail-teal), #63c4d6, transparent);
}

.classroom-detail-metrics > div:nth-child(2) .card::before {
    background: linear-gradient(90deg, var(--edu-success), #63c49e, transparent);
}

.classroom-detail-metrics > div:nth-child(3) .card::before {
    background: linear-gradient(90deg, var(--edu-danger), #e58a92, transparent);
}

.classroom-detail-metrics > div:nth-child(4) .card::before {
    background: linear-gradient(90deg, var(--edu-blue), #79a5f5, transparent);
}

.classroom-detail-metrics .card-body {
    padding: 1.35rem !important;
}

.classroom-detail-metrics p {
    margin-bottom: 0.55rem !important;
    color: var(--detail-muted) !important;
    font-size: 0.65rem !important;
    font-weight: 820 !important;
    letter-spacing: 0.07em;
}

.classroom-detail-metrics h2 {
    margin-bottom: 0.35rem !important;
    font-size: 2rem;
    font-weight: 880 !important;
    letter-spacing: -0.04em;
}

.classroom-detail-metrics .card-body > .d-flex > div:first-child > span {
    display: block;
    max-width: 150px;
    color: var(--detail-muted) !important;
    font-size: 0.65rem !important;
    line-height: 1.45;
}

.classroom-detail-metrics .card-body > .d-flex > div:last-child {
    display: grid;
    width: 48px;
    height: 48px;
    padding: 0 !important;
    place-items: center;
    border: 1px solid rgba(22, 135, 167, 0.12);
    border-radius: 14px !important;
}

/* Action centre */

.classroom-detail-actions {
    overflow: hidden;
    border-color: rgba(22, 135, 167, 0.18) !important;
    background:
        radial-gradient(circle at 92% 0, rgba(22, 135, 167, 0.1), transparent 18rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(244, 249, 251, 0.9)) !important;
}

.classroom-detail-actions .card-body {
    padding: 1.3rem 1.4rem !important;
}

.classroom-detail-actions h5 {
    font-size: 1rem;
    font-weight: 830 !important;
}

.classroom-detail-actions p {
    font-size: 0.72rem;
}

.classroom-detail-actions .btn,
.classroom-detail-intelligence .btn {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 12px !important;
    font-size: 0.7rem;
    font-weight: 780;
}

/* Shared operational panels */

.classroom-detail-students,
.classroom-detail-recent {
    overflow: hidden;
}

.classroom-detail-students .card-header,
.classroom-detail-recent .card-header {
    padding: 1.3rem 1.4rem 1.05rem !important;
    border-bottom: 1px solid rgba(219, 227, 236, 0.85) !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(246, 250, 252, 0.91)) !important;
}

.classroom-detail-students .card-header h5,
.classroom-detail-recent .card-header h5 {
    color: var(--detail-ink);
    font-size: 1rem;
    font-weight: 830 !important;
}

.classroom-detail-students .card-header p,
.classroom-detail-recent .card-header p {
    font-size: 0.68rem;
}

.classroom-detail-students > .card-body,
.classroom-detail-recent > .card-body {
    padding: 0 !important;
}

.classroom-detail-students .table,
.classroom-detail-recent .table {
    min-width: 900px;
}

.classroom-detail-recent .table {
    min-width: 680px;
}

.classroom-detail-students .table thead th,
.classroom-detail-recent .table thead th {
    padding: 0.9rem 1rem !important;
    border-bottom: 1px solid rgba(203, 213, 225, 0.9);
    background: rgba(238, 242, 246, 0.82) !important;
    color: var(--detail-muted);
    font-size: 0.62rem;
    font-weight: 820;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    white-space: nowrap;
}

.classroom-detail-students .table tbody td,
.classroom-detail-recent .table tbody td {
    padding: 0.9rem 1rem !important;
    border-color: rgba(219, 227, 236, 0.68);
    color: var(--detail-copy);
    font-size: 0.72rem;
}

.classroom-detail-students .table tbody tr,
.classroom-detail-recent .table tbody tr {
    transition: background var(--edu-transition);
}

.classroom-detail-students .table tbody tr:hover,
.classroom-detail-recent .table tbody tr:hover {
    background: rgba(22, 135, 167, 0.035);
}

.classroom-detail-students .table tbody td:first-child .rounded-circle {
    border: 1px solid rgba(22, 135, 167, 0.14);
    background: linear-gradient(145deg, #e6f7fa, #dff1f5) !important;
    color: var(--detail-teal-dark) !important;
    box-shadow: 0 7px 16px rgba(22, 135, 167, 0.08);
}

.classroom-detail-students .table tbody td:first-child a,
.classroom-detail-recent .table tbody td:first-child a {
    color: var(--detail-ink) !important;
    font-weight: 780 !important;
}

.classroom-detail-students .progress {
    overflow: hidden;
    border-radius: 999px;
    background: #e4ebf1;
}

.classroom-detail-students .progress-bar {
    border-radius: inherit;
    background: linear-gradient(90deg, var(--detail-teal), #5bc0d3);
}

.classroom-detail-students .badge,
.classroom-detail-recent .badge {
    border: 1px solid rgba(203, 213, 225, 0.55);
    font-size: 0.6rem;
    font-weight: 760;
}

.classroom-detail-students .btn-sm {
    min-height: 32px;
    padding: 0.38rem 0.6rem;
    border-radius: 10px !important;
    font-size: 0.62rem;
    font-weight: 760;
}

.classroom-detail-students .table-responsive,
.classroom-detail-recent .table-responsive {
    scrollbar-color: rgba(100, 116, 139, 0.42) transparent;
    scrollbar-width: thin;
}

/* Intelligence and workflow */

.classroom-detail-intelligence .card {
    overflow: hidden;
}

.classroom-detail-intelligence .card-body {
    padding: 1.35rem !important;
}

.classroom-detail-intelligence .card-body > .d-flex:first-child > div:first-child {
    display: grid;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    padding: 0 !important;
    place-items: center;
    border: 1px solid rgba(22, 135, 167, 0.13);
    border-radius: 14px !important;
}

.classroom-detail-intelligence h5,
.classroom-detail-workflow h5 {
    font-size: 1rem;
    font-weight: 830 !important;
}

.classroom-detail-intelligence p,
.classroom-detail-workflow p {
    font-size: 0.68rem;
    line-height: 1.55;
}

.classroom-detail-intelligence .alert {
    border-color: rgba(22, 135, 167, 0.13) !important;
    background: linear-gradient(145deg, rgba(238, 248, 250, 0.82), rgba(248, 251, 253, 0.92));
    color: var(--detail-copy);
}

.classroom-detail-workflow {
    overflow: hidden;
    border-color: rgba(22, 135, 167, 0.16) !important;
    background:
        radial-gradient(circle at 96% 25%, rgba(22, 135, 167, 0.09), transparent 18rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 252, 0.9)) !important;
}

.classroom-detail-workflow .card-body {
    padding: 1.35rem !important;
}

.classroom-detail-workflow .card-body > .d-flex > div:first-child {
    display: grid;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    padding: 0 !important;
    place-items: center;
    border: 1px solid rgba(22, 135, 167, 0.12);
    border-radius: 14px !important;
    background: var(--edu-primary-soft) !important;
}

.classroom-detail-workflow .badge {
    border-color: rgba(203, 213, 225, 0.78) !important;
    background: rgba(255, 255, 255, 0.78) !important;
    color: var(--detail-copy) !important;
    font-size: 0.63rem;
    font-weight: 760;
}

/* Responsive */

@media (max-width: 1199.98px) {
    .teacher-classroom-detail-page > .classroom-detail-hero {
        min-height: auto;
    }
}

@media (max-width: 767.98px) {
    .teacher-classroom-detail-page > .classroom-detail-hero {
        padding: 1.35rem;
        border-radius: 20px;
    }

    .classroom-detail-hero > div:last-child,
    .classroom-detail-hero > div:last-child .btn {
        width: 100%;
    }

    .classroom-detail-actions .card-body,
    .classroom-detail-students .card-header,
    .classroom-detail-recent .card-header,
    .classroom-detail-intelligence .card-body,
    .classroom-detail-workflow .card-body {
        padding: 1.1rem !important;
    }

    .classroom-detail-actions .card-body > .d-flex > div:last-child,
    .classroom-detail-actions .card-body > .d-flex > div:last-child .btn {
        width: 100%;
    }

    .classroom-detail-workflow .card-body > .d-flex {
        align-items: flex-start !important;
    }
}

@media (max-width: 575.98px) {
    .classroom-detail-hero .badge + .text-muted {
        width: 100%;
    }

    .classroom-detail-metrics .card {
        min-height: 140px;
    }

    .classroom-detail-intelligence .d-flex.flex-wrap,
    .classroom-detail-intelligence .d-flex.flex-wrap .btn {
        width: 100%;
    }

    .classroom-detail-workflow .card-body > .d-flex {
        flex-direction: column;
    }

    .classroom-detail-workflow .bi-arrow-right {
        transform: rotate(90deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .teacher-classroom-detail-page .card,
    .teacher-classroom-detail-page .btn,
    .teacher-classroom-detail-page .table tbody tr {
        transition: none;
    }
}

/* Final cascade lock: shared light header across all base templates. */
.edushield-topbar {
    border-bottom-color: rgba(191, 219, 254, .86);
    background:
        radial-gradient(circle at 12% 0%, rgba(14,165,233,.09), transparent 25rem),
        linear-gradient(110deg, rgba(255,255,255,.99), rgba(248,251,255,.98) 58%, rgba(240,253,250,.96));
    box-shadow: 0 10px 32px rgba(30,64,175,.075);
}

.navbar-brand-mark {
    border-color: #bfdbfe;
    background: linear-gradient(145deg, #ffffff, #eff6ff);
    color: #1d4ed8;
}

.navbar-brand-text,
.edushield-navbar-profile .edushield-navbar-user-name {
    color: #0f172a;
}

.edushield-navbar-dashboard,
.edushield-navbar-profile,
.edushield-navbar-menu {
    border-color: #dbeafe;
    background: rgba(255,255,255,.9);
    color: #334155;
}

.edushield-navbar-dashboard:hover,
.edushield-navbar-profile:hover,
.edushield-navbar-profile[aria-expanded="true"],
.edushield-navbar-menu:hover {
    border-color: #93c5fd;
    background: #ffffff;
    color: #1d4ed8;
}

/* ============================================================
   MANAGEMENT HEADERS + TABLET RESPONSIVENESS
   Confirmed through the live Admin audit.
   ============================================================ */

.section-form-header,
.section-list-header,
.staff-hero,
.staff-account-hero {
    color: #0f172a !important;
    border: 1px solid #bfdbfe !important;
    background:
        radial-gradient(circle at 90% 0%, rgba(14,165,233,.14), transparent 30rem),
        linear-gradient(135deg, #ffffff 0%, #eff6ff 58%, #f0fdfa 100%) !important;
    box-shadow: 0 16px 42px rgba(30,64,175,.09) !important;
}

.section-form-header::after,
.section-list-header::after,
.staff-hero::after,
.staff-account-hero::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 4px;
    content: "";
    background: linear-gradient(90deg, #2563eb, #0d9488, #22c55e);
}

.section-form-header h1,
.section-list-header h1,
.staff-hero h1,
.staff-account-hero h1 {
    color: #0f172a !important;
    text-shadow: none !important;
}

.section-form-header p,
.section-list-header p,
.staff-hero p,
.staff-account-hero p {
    color: #475569 !important;
}

.section-form-header [class*="kicker"],
.section-list-header [class*="kicker"],
.staff-hero [class*="eyebrow"],
.staff-account-kicker {
    color: #1d4ed8 !important;
}

.section-form-header a,
.section-list-header a,
.staff-hero a,
.staff-account-hero a {
    border-color: #bfdbfe !important;
    background: rgba(255,255,255,.9) !important;
    color: #1d4ed8 !important;
    box-shadow: 0 8px 22px rgba(37,99,235,.08);
}

.staff-side-card-dark {
    border-color: #bfdbfe !important;
    background: linear-gradient(145deg, #eff6ff, #f0fdfa) !important;
    color: #334155 !important;
}

.staff-side-card-dark h2,
.staff-side-card-dark h3,
.staff-side-card-dark strong {
    color: #0f172a !important;
}

.staff-side-card-dark p,
.staff-side-card-dark span {
    color: #475569 !important;
}

@media (max-width: 991.98px) {
    :root {
        --edu-topbar-height: 64px;
    }

    .edushield-app-shell {
        display: block;
    }

    .edushield-app-shell > .col-md-2 {
        width: 0;
        min-width: 0;
        flex-basis: 0;
    }

    .edushield-main-content {
        width: 100%;
        max-width: 100%;
    }

    .edushield-sidebar {
        width: min(310px, 88vw);
    }

    .edushield-navbar-menu,
    .sidebar-mobile-close {
        display: grid;
    }

    .edushield-content-container {
        width: 100%;
        max-width: 100%;
        padding: 1.2rem 1rem 2rem;
        overflow-x: hidden;
    }

    .section-form-layout,
    .staff-account-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .section-form-header,
    .section-list-header,
    .staff-hero,
    .staff-account-hero {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .section-fields,
    .staff-account-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .section-form-card,
    .staff-account-card,
    .section-form-actions,
    .staff-account-actions {
        width: 100%;
        min-width: 0;
    }

    .staff-account-sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .staff-table-wrap,
    .staff-table-container,
    .table-responsive {
        max-width: 100%;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .staff-table {
        min-width: 980px;
    }
}

@media (max-width: 575.98px) {
    .section-form-header,
    .section-list-header,
    .staff-hero,
    .staff-account-hero {
        padding: 1.2rem !important;
        border-radius: 18px !important;
    }

    .section-form-header h1,
    .section-list-header h1,
    .staff-hero h1,
    .staff-account-hero h1 {
        font-size: clamp(1.55rem, 8vw, 1.9rem) !important;
        line-height: 1.16;
    }

    .section-fields,
    .staff-account-fields,
    .staff-account-sidebar {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .section-form-actions,
    .staff-account-actions {
        align-items: stretch !important;
        flex-direction: column-reverse !important;
    }

    .section-form-actions a,
    .section-form-actions button,
    .staff-account-actions a,
    .staff-account-actions button {
        width: 100%;
        min-height: 44px;
    }
}
.sidebar-logout-form {
    margin: 0;
}

.sidebar-logout-form .sidebar-link {
    width: 100%;
    border: 0;
    text-align: left;
}

/* Audit contrast guard: keep premium dark hero panels readable even when
   Bootstrap or page-level utility classes introduce a competing text color. */
.add-parent-hero,
.student-form-hero,
.students-hero,
.mark-attendance-header,
.attendance-header,
.attendance-records-header,
.attendance-dashboard-header,
.security-logs-hero,
.fee-detail-header,
.bulk-fee-header,
.monitor-hero,
.detail-hero,
.intelligence-hero,
.s360-hero,
.responsibility-hero,
.child-attendance-hero,
.staff-monitor-hero {
    color: #ffffff !important;
}

.add-parent-hero h1,
.student-form-hero h1,
.students-hero h1,
.students-hero h2,
.mark-attendance-header h1,
.attendance-header h1,
.attendance-records-header h1,
.attendance-dashboard-header h1,
.security-logs-hero h1,
.fee-detail-header h1,
.bulk-fee-header h1,
.monitor-hero h1,
.detail-hero h1,
.intelligence-hero h1,
.s360-hero h1,
.responsibility-hero h1,
.child-attendance-hero h1,
.staff-monitor-hero h1 {
    color: #ffffff !important;
}

.add-parent-hero p,
.student-form-hero p,
.students-hero p,
.mark-attendance-header p,
.attendance-header p,
.attendance-records-header p,
.attendance-dashboard-header p,
.security-logs-hero p,
.fee-detail-header p,
.bulk-fee-header p,
.monitor-hero p,
.detail-hero p,
.intelligence-hero p,
.s360-hero p,
.responsibility-hero p,
.child-attendance-hero p,
.staff-monitor-hero p {
    color: #dbe7f4 !important;
}

/* Light management heroes deliberately use dark copy. Keep this block after
   the dark-hero guard so future additions cannot silently reverse contrast. */
.section-form-header,
.section-list-header,
.staff-hero,
.staff-account-hero {
    color: #0f172a !important;
}

.section-form-header h1,
.section-list-header h1,
.staff-hero h1,
.staff-account-hero h1 {
    color: #0f172a !important;
}

.section-form-header p,
.section-list-header p,
.staff-hero p,
.staff-account-hero p {
    color: #475569 !important;
}