/* ==========================================================================
   MODPLUS Design System — Executive Practical RTL Architecture v7.0
   Focus: High Precision, Explicit Form Components, Responsive Tables & Executive Aesthetics.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* Canvas & Surfaces */
    --mp-bg: #f4f6f8;
    --mp-surface: #ffffff;
    --mp-surface-muted: #f8fafc;

    /* Borders */
    --mp-border: #e2e8f0;
    --mp-border-strong: #cbd5e1;

    /* Typography Colors */
    --mp-text: #0f172a;
    --mp-text-muted: #475569;
    --mp-text-subtle: #64748b;

    /* Executive Colors */
    --mp-primary: #1e4d6b;
    --mp-primary-hover: #163a52;
    --mp-primary-light: #e0f2fe;

    --mp-accent: #059669;
    --mp-accent-light: #dcfce7;

    --mp-warning: #b45309;
    --mp-warning-light: #fef3c7;

    --mp-danger: #b91c1c;
    --mp-danger-light: #fee2e2;

    /* Sidebar */
    --mp-sidebar-bg: #0f172a;
    --mp-sidebar-width: 260px;
    --mp-sidebar-text: #f1f5f9;
    --mp-sidebar-text-muted: #94a3b8;

    /* Metrics & Radii */
    --mp-font: 'Readex Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --mp-radius: 10px;
    --mp-radius-sm: 6px;

    /* Shadows & Focus */
    --mp-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
    --mp-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
    --mp-focus-ring: 0 0 0 3px rgba(30, 77, 107, 0.2);
    --mp-transition: all 0.15s ease-in-out;
}

/* --------------------------------------------------------------------------
   2. BASE & RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    direction: rtl;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--mp-font);
    background: var(--mp-bg);
    color: var(--mp-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--mp-primary);
    text-decoration: none;
    transition: var(--mp-transition);
}

a:hover {
    color: var(--mp-primary-hover);
    text-decoration: none;
}

:focus-visible {
    outline: none;
    box-shadow: var(--mp-focus-ring);
}

/* --------------------------------------------------------------------------
   3. APP SHELL & LAYOUT
   -------------------------------------------------------------------------- */
.mp-app {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.mp-sidebar {
    width: var(--mp-rail-collapsed, 80px);
    background: var(--mp-sidebar-bg);
    color: var(--mp-sidebar-text);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    transition: width var(--mp-transition-fast, 140ms ease);
}

html[data-rail-expanded="true"] .mp-sidebar {
    width: var(--mp-rail-expanded, 240px);
}

.mp-brand {
    padding: 1.5rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mp-brand h1 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.mp-brand p {
    margin: 0.25rem 0 0;
    font-size: 0.8rem;
    color: var(--mp-sidebar-text-muted);
}

.mp-nav {
    padding: 1rem 0.75rem;
    flex: 1;
}

.mp-nav a {
    display: block;
    padding: 0.65rem 1rem;
    color: #cbd5e1;
    border-radius: var(--mp-radius-sm);
    margin-bottom: 0.15rem;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: var(--mp-transition);
}

.mp-nav a:hover,
.mp-nav a.active {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    text-decoration: none;
}

.mp-nav a.active {
    background: var(--mp-primary);
    font-weight: 600;
}

.mp-nav a.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.mp-sidebar-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.8rem;
    color: var(--mp-sidebar-text-muted);
}

/* Main Content Area */
.mp-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mp-topbar {
    background: var(--mp-surface);
    border-bottom: 1px solid var(--mp-border);
    padding: 0.85rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.mp-topbar-school {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--mp-text-muted);
}

.mp-topbar-user {
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.mp-content {
    padding: 1.75rem 2rem 3rem;
    flex: 1;
}

/* Page Header & Breadcrumbs — Soft Elevated Surface */
.mp-page-header,
.cv-studio-hero,
.staff-hero,
.v2-identity,
.v2-workbench-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding: 1.4rem 1.65rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.04), 0 1px 2px 0 rgba(15, 23, 42, 0.02);
    position: relative;
    overflow: hidden;
    transition: var(--mp-transition, all 0.2s ease-in-out);
}

.mp-page-header::after,
.cv-studio-hero::after,
.staff-hero::after,
.v2-identity::after,
.v2-workbench-head::after {
    display: none !important;
}

.mp-page-header > div:first-child,
.cv-studio-hero > div:first-child,
.staff-hero > div:first-child,
.staff-hero-copy,
.v2-identity > div:first-child {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

/* Soft Eyebrow Badge */
.v2-report-eyebrow,
.staff-hero-eyebrow,
.mp-eyebrow,
p.v2-report-eyebrow,
.staff-hero-copy .staff-hero-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0.25rem 0.75rem !important;
    background: #e0f2fe !important;
    color: #0369a1 !important;
    border: 1px solid #bae6fd !important;
    border-radius: 6px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 0 0 0.45rem 0 !important;
    box-shadow: none !important;
}

.v2-report-eyebrow::before,
.staff-hero-eyebrow::before,
.mp-eyebrow::before,
p.v2-report-eyebrow::before {
    display: none !important;
}

/* Soft Title Typography */
.mp-page-header h1,
.mp-page-header h2,
.cv-studio-hero h1,
.staff-hero h1,
.v2-identity h1 {
    margin: 0 0 0.35rem 0 !important;
    font-size: clamp(1.45rem, 2.1vw, 1.75rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.3 !important;
    color: #0f172a !important;
}

.mp-page-header p,
.cv-studio-hero p,
.v2-identity p {
    margin: 0 !important;
    color: #475569 !important;
    font-size: 0.9rem !important;
    line-height: 1.65 !important;
    max-width: 780px !important;
}

.cv-studio-hero p:last-child {
    margin-top: 0.2rem !important;
}

/* Soft Metadata Chips */
.staff-hero-meta {
    margin: 0.5rem 0 0 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.4rem 0.6rem !important;
    align-items: center !important;
    color: #475569 !important;
    font-size: 0.85rem !important;
}

.staff-hero-meta span,
.staff-hero-meta li,
.staff-hero-meta em {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.2rem 0.6rem !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02) !important;
    font-style: normal !important;
}

/* Soft Action Buttons */
.staff-hero-actions,
.cv-studio-hero .v2-actions,
.mp-page-header .mp-actions,
.cv-new-form {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    flex-wrap: wrap !important;
    position: relative;
    z-index: 2;
}

.mp-btn-primary,
summary.mp-btn-primary,
.staff-hero-actions .mp-btn-primary {
    background: #1e4d6b !important;
    color: #ffffff !important;
    border: 1px solid #163a52 !important;
    border-radius: 8px !important;
    padding: 0.55rem 1.25rem !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    box-shadow: 0 1px 3px rgba(30, 77, 107, 0.18) !important;
    transition: var(--mp-transition, all 0.15s ease) !important;
}

.mp-btn-primary:hover,
summary.mp-btn-primary:hover,
.staff-hero-actions .mp-btn-primary:hover {
    background: #163a52 !important;
    border-color: #163a52 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(30, 77, 107, 0.25) !important;
}

.staff-hero-actions .mp-btn:not(.mp-btn-primary),
.mp-page-header .mp-btn-secondary,
.mp-btn-secondary,
.mp-btn-outline {
    background: #ffffff !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 0.55rem 1.15rem !important;
    font-weight: 500 !important;
    font-size: 0.88rem !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    transition: var(--mp-transition, all 0.15s ease) !important;
}

.staff-hero-actions .mp-btn:not(.mp-btn-primary):hover,
.mp-page-header .mp-btn-secondary:hover,
.mp-btn-secondary:hover,
.mp-btn-outline:hover {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

/* Soft Governance Note Bar (Zero Radius) */
.cv-governance-note {
    display: flex !important;
    gap: 0.75rem !important;
    align-items: center !important;
    margin: 1.1rem 0 !important;
    padding: 0.8rem 1.15rem !important;
    border-radius: 0 !important;
    border: 1px solid rgba(22, 108, 92, 0.2) !important;
    border-inline-start: 4px solid var(--cv-teal, #166c5c) !important;
    background: #f4fbf7 !important;
    color: #132f3d !important;
    box-shadow: 0 1px 3px rgba(22, 108, 92, 0.04) !important;
}

.cv-governance-note strong {
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    color: #166c5c !important;
    white-space: nowrap !important;
}

.cv-governance-note span {
    color: #475569 !important;
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
}

/* Soft Dropdown & Surface Cards (Zero Radius) */
.cv-new-form[open] > form {
    border-radius: 0 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.1) !important;
    background: #ffffff !important;
    padding: 1.1rem !important;
}

.cv-page .v2-surface-header,
.cv-page .mp-card-header {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
    padding: 0.9rem 1.15rem !important;
}

.cv-page .v2-surface-header h2,
.cv-page .v2-surface-header h3,
.cv-page .mp-card-header h3 {
    color: #0f172a !important;
    font-size: 1.02rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
}

.mp-breadcrumb {
    font-size: 0.85rem;
    color: var(--mp-text-muted);
    margin-bottom: 0.75rem;
}

.mp-breadcrumb a {
    color: var(--mp-text-muted);
}

.mp-breadcrumb a:hover {
    color: var(--mp-primary);
}

/* Grid Layouts */
.mp-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.mp-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

/* --------------------------------------------------------------------------
   4. COMPONENTS
   -------------------------------------------------------------------------- */

/* Cards (No clipping, clean headers) */
.mp-card {
    background: var(--mp-surface);
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius);
    box-shadow: var(--mp-shadow);
    margin-bottom: 1.25rem;
}

.mp-card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--mp-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--mp-surface);
    border-radius: var(--mp-radius) var(--mp-radius) 0 0;
}

.mp-card-header h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--mp-text);
}

/* Card body with auto overflow for wide tables */
.mp-card-body {
    padding: 1.25rem;
    overflow-x: auto;
}

/* Buttons */
.mp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1.15rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--mp-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    line-height: 1.4;
    transition: var(--mp-transition);
    user-select: none;
    white-space: nowrap;
}

.mp-btn:hover {
    text-decoration: none;
}

.mp-btn-primary {
    background: var(--mp-primary);
    color: #ffffff;
    border-color: var(--mp-primary);
}

.mp-btn-primary:hover {
    background: var(--mp-primary-hover);
    border-color: var(--mp-primary-hover);
    color: #ffffff;
}

.mp-btn-secondary {
    background: var(--mp-surface);
    color: var(--mp-text);
    border-color: var(--mp-border);
}

.mp-btn-secondary:hover {
    background: var(--mp-surface-muted);
    border-color: var(--mp-border-strong);
    color: var(--mp-text);
}

.mp-btn-sm {
    padding: 0.35rem 0.75rem;
    font-size: 0.82rem;
    border-radius: var(--mp-radius-sm);
}

/* Forms & Explicit Form Groups */
.mp-form-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem 1.5rem !important;
    align-items: start !important;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .mp-form-grid {
        grid-template-columns: 1fr !important;
    }
}

.mp-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0;
    box-sizing: border-box;
}

.mp-label {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--mp-text);
    margin-bottom: 0.2rem;
}

.mp-required {
    color: var(--mp-danger);
    margin-right: 0.2rem;
}

.mp-full-width {
    grid-column: 1 / -1 !important;
}

.mp-form-grid > label.mp-full-width,
.mp-form-grid > label[style*="grid-column"],
.mp-form-grid > .mp-form-actions,
.mp-form-grid > div:has(.mp-btn-primary) {
    grid-column: 1 / -1 !important;
}

.mp-input,
.mp-select,
.mp-textarea,
.mp-form-grid input,
.mp-form-grid select,
.mp-form-grid textarea,
.mp-form-group input,
.mp-form-group select,
.mp-form-group textarea {
    width: 100% !important;
    display: block !important;
    padding: 0.65rem 0.85rem;
    font-size: 0.95rem;
    color: var(--mp-text);
    border: 1.5px solid var(--mp-border-strong);
    border-radius: var(--mp-radius-sm);
    font-family: inherit;
    background-color: #ffffff;
    transition: var(--mp-transition);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    box-sizing: border-box;
}

.mp-select,
.mp-form-grid select,
.mp-form-group select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23475569'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 0.75rem center;
    background-size: 1rem;
    padding-left: 2.25rem;
}

.mp-input:focus,
.mp-select:focus,
.mp-textarea:focus,
.mp-form-grid input:focus,
.mp-form-grid select:focus,
.mp-form-grid textarea:focus,
.mp-form-group input:focus,
.mp-form-group select:focus,
.mp-form-group textarea:focus {
    outline: none;
    border-color: var(--mp-primary);
    box-shadow: var(--mp-focus-ring);
    background-color: #ffffff;
}

.mp-textarea,
.mp-form-grid textarea,
.mp-form-group textarea {
    min-height: 90px;
    resize: vertical;
}

.mp-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.mp-inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-end;
}

.mp-inline-form .mp-form-group {
    margin-bottom: 0;
    flex: 1;
    min-width: 120px;
}

.mp-form-actions {
    grid-column: 1 / -1 !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--mp-border);
}

/* Practical Responsive Tables (Zero Clipping) */
.mp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.mp-table th,
.mp-table td {
    padding: 0.85rem 1rem;
    text-align: right;
    border-bottom: 1px solid var(--mp-border);
    vertical-align: middle;
}

.mp-table th {
    font-weight: 600;
    color: var(--mp-text-muted);
    font-size: 0.84rem;
    background: var(--mp-surface-muted);
    white-space: nowrap;
    border-bottom: 2px solid var(--mp-border);
}

.mp-table tbody tr {
    transition: var(--mp-transition);
}

.mp-table tbody tr:hover {
    background: rgba(248, 250, 252, 0.8);
}

.mp-table tr:last-child td {
    border-bottom: none;
}

/* Action column formatting in tables */
.mp-table td:last-child {
    white-space: nowrap;
}

/* Status Badges (Strict No Text-Wrapping) */
.mp-status {
    display: inline-block;
    white-space: nowrap;
    padding: 0.3rem 0.75rem;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}

.status-not-started { background: #f1f5f9; color: var(--mp-text-muted); border: 1px solid #cbd5e1; }
.status-in-progress { background: var(--mp-primary-light); color: var(--mp-primary); border: 1px solid #bae6fd; }
.status-delayed { background: var(--mp-warning-light); color: var(--mp-warning); border: 1px solid #fde047; }
.status-blocked { background: var(--mp-danger-light); color: var(--mp-danger); border: 1px solid #fca5a5; }
.status-completed { background: var(--mp-accent-light); color: var(--mp-accent); border: 1px solid #86efac; }

/* Progress Indicators */
.mp-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 130px;
}

.mp-progress-bar {
    flex: 1;
    height: 7px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}

.mp-progress-bar span {
    display: block;
    height: 100%;
    background: var(--mp-accent);
    border-radius: 999px;
}

.mp-progress-value {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--mp-text-muted);
    min-width: 2.75rem;
    text-align: left;
}

/* Alerts */
.mp-alert {
    padding: 0.85rem 1rem;
    border-radius: var(--mp-radius-sm);
    margin-bottom: 1rem;
    font-size: 0.92rem;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mp-alert-success {
    background: var(--mp-accent-light);
    color: #166534;
    border: 1px solid #86efac;
}

.mp-alert-error {
    background: var(--mp-danger-light);
    color: #991b1b;
    border: 1px solid #fca5a5;
}

/* Lists & Stats */
.mp-meta-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mp-meta-list li {
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--mp-border);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.92rem;
}

.mp-meta-list li:last-child { border-bottom: none; }
.mp-meta-label { color: var(--mp-text-muted); }

.mp-stat-strip {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.mp-stat {
    background: var(--mp-surface);
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius);
    padding: 1rem 1.25rem;
    min-width: 140px;
    flex: 1;
    box-shadow: var(--mp-shadow);
}

.mp-stat-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--mp-text-muted);
    margin-bottom: 0.25rem;
}

.mp-stat-value {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--mp-text);
    letter-spacing: -0.02em;
}

.mp-list-item {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--mp-border);
}

.mp-list-item:last-child { border-bottom: none; }

.mp-list-item h4 {
    margin: 0 0 0.25rem;
    font-size: 0.98rem;
    font-weight: 600;
}

.mp-list-item p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--mp-text-muted);
}

/* Environment Badge */
.mp-env-badge {
    display: inline-block;
    background: var(--mp-warning-light);
    color: var(--mp-warning);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: var(--mp-radius-sm);
    margin-top: 0.5rem;
    border: 1px solid rgba(180, 83, 9, 0.2);
}

.mp-noor-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: var(--mp-radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(16, 185, 129, 0.05);
}

.mp-noor-badge .mp-noor-icon {
    width: 14px;
    height: 14px;
    color: #10b981;
    stroke-width: 2.2;
    flex-shrink: 0;
}

.mp-noor-badge .mp-noor-label {
    color: #047857;
    font-weight: 800;
    font-size: 0.7rem;
}

.mp-noor-badge .mp-noor-name {
    color: #064e3b;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   5. MODULE SPECIFIC STYLES
   -------------------------------------------------------------------------- */

/* Authentication */
.mp-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #0f172a 0%, #1e4d6b 100%);
    padding: 2rem;
}

.mp-login-card {
    background: var(--mp-surface);
    border-radius: 12px;
    padding: 2.5rem;
    width: 100%;
    max-width: 420px;
    box-shadow: var(--mp-shadow-md);
}

.mp-login-card h1 {
    margin: 0 0 0.25rem;
    font-size: 1.75rem;
    font-weight: 700;
}

.mp-login-card .subtitle {
    color: var(--mp-text-muted);
    margin-bottom: 2rem;
    font-size: 0.95rem;
}

.mp-quick-login {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--mp-border);
}

.mp-quick-login-title {
    margin: 0 0 0.75rem;
    font-size: 0.82rem;
    color: var(--mp-text-muted);
    text-align: center;
}

.mp-quick-login-school {
    margin: 0.9rem 0 0.5rem;
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--mp-text-muted);
    text-align: center;
    letter-spacing: .01em;
}

.mp-quick-login-school:first-of-type { margin-top: 0; }

.mp-quick-login-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.mp-quick-login-buttons form { margin: 0; }

.mp-quick-login-btn {
    width: 100%;
    font-size: 0.82rem;
}

/* Performance & Leadership Attention Panel */
.mp-perf-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.mp-perf-period {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.mp-perf-period select,
.mp-perf-period input[type="date"] {
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius-sm);
    font-family: inherit;
    background: var(--mp-surface);
}

.mp-attention-panel {
    background: linear-gradient(135deg, #0f172a 0%, #1e4d6b 100%);
    color: #f1f5f9;
    border-radius: var(--mp-radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--mp-shadow);
}

.mp-attention-panel h3 {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
    color: #ffffff;
    font-weight: 700;
}

.mp-attention-item {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.92rem;
}

.mp-attention-item:last-child { border-bottom: none; }

.mp-attention-item a {
    color: #38bdf8;
    font-weight: 600;
}

.mp-attention-reason {
    color: #fbbf24;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}

.mp-perf-section-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
    color: var(--mp-primary);
}

.mp-perf-narrative {
    background: var(--mp-surface-muted);
    border-radius: var(--mp-radius-sm);
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.92rem;
    border-right: 3px solid var(--mp-primary);
}

.mp-print-report {
    max-width: 900px;
    margin: 0 auto;
}

/* My Work Workspace */
.mp-work-section {
    margin-bottom: 1.75rem;
}

.mp-work-section-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
    color: var(--mp-text);
}

.mp-work-section-urgent { color: #ea580c; }

.mp-work-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem 1rem;
    padding: 1rem 1.1rem;
    background: var(--mp-surface);
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius);
    margin-bottom: 0.65rem;
    box-shadow: var(--mp-shadow);
}

.mp-work-item-main {
    flex: 1;
    min-width: 220px;
}

.mp-work-priority {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    margin-bottom: 0.35rem;
}

.mp-work-priority-urgent { background: #ffedd5; color: #c2410c; }
.mp-work-priority-important { background: #fef3c7; color: #b45309; }
.mp-work-priority-normal { background: var(--mp-surface-muted); color: var(--mp-text-muted); }

.mp-work-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
    line-height: 1.45;
}

.mp-work-meta {
    font-size: 0.82rem;
    color: var(--mp-text-muted);
    margin: 0;
}

.mp-work-item-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.mp-work-quick-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.mp-work-quick-select {
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius-sm);
    font-size: 0.82rem;
    font-family: inherit;
    background: var(--mp-surface);
}

.mp-work-empty {
    background: var(--mp-surface-muted);
    border-radius: var(--mp-radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}

.mp-work-empty p {
    margin: 0;
    color: var(--mp-text-muted);
}

.mp-work-hint {
    font-size: 0.88rem;
    color: var(--mp-text-muted);
    margin-top: 0.5rem;
}

/* Principal command center (my-work phase 1) */
.mp-work-command-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem 1.5rem;
    margin-bottom: 1.25rem;
}

.mp-work-command-eyebrow {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mp-text-muted);
    letter-spacing: 0.02em;
    margin-bottom: 0.25rem;
}

.mp-work-command-title {
    font-size: 1.65rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
    color: var(--mp-text);
}

.mp-work-command-desc {
    margin: 0;
    font-size: 0.92rem;
    color: var(--mp-text-muted);
}

.mp-work-command-date {
    font-size: 0.88rem;
    color: var(--mp-text-muted);
    padding: 0.45rem 0.85rem;
    background: var(--mp-surface-muted);
    border-radius: 999px;
    border: 1px solid var(--mp-border);
}

.mp-work-pulse {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem 1.5rem;
    padding: 1.1rem 1.25rem;
    border-radius: var(--mp-radius);
    border: 1px solid var(--mp-border);
    margin-bottom: 1rem;
    background: var(--mp-surface);
    box-shadow: var(--mp-shadow);
}

.mp-work-pulse-clear { border-right: 4px solid #16a34a; }
.mp-work-pulse-warn { border-right: 4px solid #d97706; background: #fffbeb; }
.mp-work-pulse-risk { border-right: 4px solid #dc2626; background: #fef2f2; }

.mp-work-pulse-main {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex: 1;
    min-width: 240px;
}

.mp-work-pulse-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 0.35rem;
    flex-shrink: 0;
}

.mp-work-pulse-clear .mp-work-pulse-dot { background: #16a34a; }
.mp-work-pulse-warn .mp-work-pulse-dot { background: #d97706; }
.mp-work-pulse-risk .mp-work-pulse-dot { background: #dc2626; }

.mp-work-pulse-label {
    display: block;
    font-size: 1rem;
    margin-bottom: 0.2rem;
}

.mp-work-pulse-story {
    margin: 0;
    font-size: 0.88rem;
    color: var(--mp-text-muted);
    line-height: 1.5;
}

.mp-work-pulse-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
    font-size: 0.82rem;
    color: var(--mp-text-muted);
}

.mp-work-pulse-stats strong {
    color: var(--mp-text);
}

.mp-work-pulse-stat-warn strong { color: #b45309; }
.mp-work-pulse-stat-risk strong { color: #dc2626; }

.mp-work-badge-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    background: var(--mp-surface-muted);
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius);
}

.mp-work-badge-strip-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--mp-text-muted);
    white-space: nowrap;
}

.mp-work-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.mp-work-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.mp-work-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.mp-work-badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}

.mp-work-badge-risk {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}
.mp-work-badge-risk .mp-work-badge-count { background: #dc2626; color: #fff; }

.mp-work-badge-warn {
    background: #fffbeb;
    color: #b45309;
    border-color: #fde68a;
}
.mp-work-badge-warn .mp-work-badge-count { background: #d97706; color: #fff; }

.mp-work-badge-info {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}
.mp-work-badge-info .mp-work-badge-count { background: #2563eb; color: #fff; }

.mp-work-badge-good {
    background: #f0fdf4;
    color: #15803d;
    border-color: #bbf7d0;
}
.mp-work-badge-good .mp-work-badge-count { background: #16a34a; color: #fff; }

.mp-work-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}

.mp-work-kpi {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1rem 1.05rem;
    background: var(--mp-surface);
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius);
    text-decoration: none;
    box-shadow: var(--mp-shadow);
    transition: transform 0.12s ease, border-color 0.12s ease;
}

.mp-work-kpi:hover {
    transform: translateY(-2px);
    border-color: #94a3b8;
}

.mp-work-kpi-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mp-text-muted);
}

.mp-work-kpi-value {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--mp-text);
}

.mp-work-kpi-hint {
    font-size: 0.74rem;
    color: var(--mp-text-muted);
    line-height: 1.35;
}

.mp-work-kpi-good .mp-work-kpi-value { color: #15803d; }
.mp-work-kpi-warn .mp-work-kpi-value { color: #b45309; }
.mp-work-kpi-risk .mp-work-kpi-value { color: #dc2626; }
.mp-work-kpi-info .mp-work-kpi-value { color: #1d4ed8; }

@media (max-width: 1100px) {
    .mp-work-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .mp-work-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mp-work-pulse {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Charts (my-work phase 2) */
.mp-work-charts {
    margin-bottom: 1.75rem;
}

.mp-work-charts-header {
    margin-bottom: 0.85rem;
}

.mp-work-charts-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 0.2rem;
}

.mp-work-charts-desc {
    margin: 0;
    font-size: 0.85rem;
    color: var(--mp-text-muted);
}

.mp-work-chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.mp-work-chart-card {
    background: var(--mp-surface);
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius);
    box-shadow: var(--mp-shadow);
    padding: 1rem 1.05rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mp-work-chart-card-wide {
    grid-column: span 2;
}

.mp-work-chart-card-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.mp-work-chart-card-header h4 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
}

.mp-work-chart-card-header a {
    font-size: 0.78rem;
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
}

.mp-work-chart-card-header a:hover {
    text-decoration: none;
}

.mp-work-chart-canvas-wrap {
    position: relative;
    height: 220px;
}

.mp-work-chart-canvas-square {
    height: 240px;
    max-width: 280px;
    margin: 0 auto;
    width: 100%;
}

.mp-work-chart-legend-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.75rem;
    color: var(--mp-text-muted);
}

.mp-work-legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 0.25rem;
}

.mp-work-legend-dot.is-good { background: #16a34a; }
.mp-work-legend-dot.is-warn { background: #d97706; }

.mp-work-risk-matrix {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.mp-work-risk-matrix-row {
    display: grid;
    grid-template-columns: 5.5rem repeat(4, 1fr);
    gap: 0.35rem;
    align-items: stretch;
}

.mp-work-risk-matrix-head {
    margin-bottom: 0.15rem;
}

.mp-work-risk-matrix-corner {
    display: block;
}

.mp-work-risk-matrix-colhead,
.mp-work-risk-matrix-rowhead {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mp-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.3;
}

.mp-work-risk-matrix-rowhead {
    justify-content: flex-start;
}

.mp-work-risk-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    border-radius: 8px;
    text-decoration: none;
    border: 1px solid var(--mp-border);
    background: var(--mp-surface-muted);
    transition: transform 0.1s ease;
}

.mp-work-risk-cell:hover {
    transform: scale(1.04);
}

.mp-work-risk-cell-count {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--mp-text-muted);
}

.mp-work-risk-cell.has-value .mp-work-risk-cell-count {
    color: var(--mp-text);
}

.mp-work-risk-cell-low.has-value { background: #f0fdf4; border-color: #bbf7d0; }
.mp-work-risk-cell-medium.has-value { background: #eff6ff; border-color: #bfdbfe; }
.mp-work-risk-cell-high.has-value { background: #fffbeb; border-color: #fde68a; }
.mp-work-risk-cell-critical.has-value { background: #fef2f2; border-color: #fecaca; }
.mp-work-risk-cell-critical.has-value .mp-work-risk-cell-count { color: #dc2626; }

@media (max-width: 900px) {
    .mp-work-chart-grid {
        grid-template-columns: 1fr;
    }

    .mp-work-chart-card-wide {
        grid-column: span 1;
    }
}

/* Alerts & inbox (my-work phase 3) */
.mp-work-alerts {
    margin-bottom: 1.5rem;
}

.mp-work-alerts-header {
    margin-bottom: 0.75rem;
}

.mp-work-alerts-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 0.2rem;
}

.mp-work-alerts-desc {
    margin: 0;
    font-size: 0.85rem;
    color: var(--mp-text-muted);
}

.mp-work-alert-group {
    margin-bottom: 0.75rem;
}

.mp-work-alert-group-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 0.45rem;
    color: var(--mp-text-muted);
    cursor: default;
}

.mp-work-alert-group-good summary {
    cursor: pointer;
    list-style: none;
}

.mp-work-alert-group-good summary::-webkit-details-marker {
    display: none;
}

.mp-work-alert-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mp-work-alert-card {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 0.85rem 1rem;
    border-radius: var(--mp-radius);
    border: 1px solid var(--mp-border);
    background: var(--mp-surface);
}

.mp-work-alert-risk {
    border-right: 3px solid #dc2626;
    background: #fef2f2;
}

.mp-work-alert-warn {
    border-right: 3px solid #d97706;
    background: #fffbeb;
}

.mp-work-alert-info {
    border-right: 3px solid #2563eb;
    background: #eff6ff;
}

.mp-work-alert-good {
    border-right: 3px solid #16a34a;
    background: #f0fdf4;
}

.mp-work-alert-body strong {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 0.15rem;
}

.mp-work-alert-body p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--mp-text-muted);
    line-height: 1.45;
}

.mp-work-alert-link {
    font-size: 0.78rem;
    font-weight: 600;
    color: #15803d;
    text-decoration: none;
}

.mp-work-inbox {
    margin-top: 0.5rem;
}

.mp-work-inbox-header {
    margin-bottom: 0.85rem;
}

.mp-work-inbox-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 0.2rem;
}

.mp-work-inbox-desc {
    margin: 0;
    font-size: 0.85rem;
    color: var(--mp-text-muted);
}

.mp-work-inbox-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.mp-work-inbox-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--mp-border);
    background: var(--mp-surface);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mp-text-muted);
    cursor: pointer;
}

.mp-work-inbox-tab.is-active {
    background: #1e293b;
    border-color: #1e293b;
    color: #fff;
}

.mp-work-inbox-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    font-size: 0.68rem;
    background: rgba(255, 255, 255, 0.2);
}

.mp-work-inbox-tab:not(.is-active) .mp-work-inbox-tab-count {
    background: var(--mp-surface-muted);
    color: var(--mp-text);
}

.mp-work-inbox-domains {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.85rem;
}

.mp-work-domain-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    border: 1px dashed var(--mp-border);
    background: transparent;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mp-text-muted);
    cursor: pointer;
}

.mp-work-domain-chip.is-active {
    border-style: solid;
    border-color: #2563eb;
    color: #1d4ed8;
    background: #eff6ff;
}

.mp-work-inbox-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mp-work-item-rich {
    border-right-width: 3px;
}

.mp-work-item-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.4rem;
}

.mp-work-domain {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.12rem 0.45rem;
    border-radius: 4px;
}

.mp-work-domain-plan { background: #eff6ff; color: #1d4ed8; }
.mp-work-domain-committees { background: #f5f3ff; color: #6d28d9; }
.mp-work-domain-risks { background: #fef2f2; color: #b91c1c; }
.mp-work-domain-improvement { background: #ecfdf5; color: #047857; }
.mp-work-domain-meetings { background: #fff7ed; color: #c2410c; }
.mp-work-domain-other { background: var(--mp-surface-muted); color: var(--mp-text-muted); }

.mp-work-overdue {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.12rem 0.45rem;
    border-radius: 4px;
    background: #fef2f2;
    color: #dc2626;
}

.mp-work-date-overdue {
    color: #dc2626;
    font-weight: 600;
}

.mp-work-meta-sep {
    margin: 0 0.25rem;
}
    font-size: 0.88rem;
    color: var(--mp-text-muted);
    margin-top: -0.5rem;
}

/* Sub-Navigations (Clean Tab Controls) */
.mp-people-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--mp-border);
}

.mp-people-nav a {
    padding: 0.45rem 0.85rem;
    border-radius: var(--mp-radius-sm);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--mp-text-muted);
    background: var(--mp-surface-muted);
    transition: var(--mp-transition);
}

.mp-people-nav a.active,
.mp-people-nav a:hover {
    background: var(--mp-primary);
    color: #ffffff;
}

.mp-students-nav { flex-wrap: wrap; }
.mp-students-nav a { font-size: 0.85rem; }

/* Calendar & Operations */
.mp-school-cal-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.mp-school-cal-views { display: flex; gap: 0.35rem; }
.mp-school-cal-range { font-size: 0.9rem; color: var(--mp-text-muted); }

.mp-school-cal-day {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--mp-border);
}

.mp-school-cal-day h4 {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    color: var(--mp-primary);
    font-weight: 700;
}

.mp-school-cal-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.65rem;
    padding: 0.35rem 0;
    font-size: 0.9rem;
}

.mp-school-cal-date,
.mp-school-cal-time {
    font-size: 0.82rem;
    color: var(--mp-text-muted);
}

.mp-school-cal-type {
    font-size: 0.78rem;
    background: var(--mp-surface-muted);
    padding: 0.15rem 0.5rem;
    border-radius: var(--mp-radius-sm);
    color: var(--mp-text-muted);
    font-weight: 600;
}

.mp-school-cal-context {
    font-size: 0.82rem;
    color: var(--mp-text-muted);
}

.mp-school-resp-list {
    margin: 0;
    padding: 0 0 0 1.1rem;
    font-size: 0.9rem;
}

.mp-school-resp-list li { margin: 0.25rem 0; }

.mp-school-term-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.mp-school-term-row input[type="date"] {
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius-sm);
    font-family: inherit;
    background: var(--mp-surface);
}

.mp-people-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.mp-people-filters input[type="search"],
.mp-people-filters select {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius-sm);
    font-family: inherit;
    min-width: 140px;
    background: var(--mp-surface);
}

/* --------------------------------------------------------------------------
   6. RESPONSIVE BREAKPOINTS & PRINT
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
    .mp-grid-2, .mp-grid-3 {
        grid-template-columns: 1fr;
    }

    .mp-sidebar {
        width: 220px;
    }

    .mp-content {
        padding: 1.25rem 1rem;
    }

    .mp-topbar {
        padding: 0.75rem 1rem;
    }
}

@media print {
    .mp-sidebar,
    .mp-topbar,
    .mp-perf-no-print,
    .mp-btn {
        display: none !important;
    }

    .mp-main { margin: 0; }
    .mp-content { padding: 0; }
    .mp-app { display: block; }
    body { background: #ffffff; }

    .mp-card {
        box-shadow: none;
        border: 1px solid #cbd5e1;
        break-inside: avoid;
    }
}

/* ==========================================================================
   STAFF OPERATIONS CONSOLE
   Namespaced operational surfaces for staff, timetable, and IRWATS.
   ========================================================================== */
.mp-staff-page {
    --mp-ops-line: #d9e1e8;
    --mp-ops-navy: #12364d;
    --mp-ops-soft: #f6f8fa;
    --mp-ops-green: #047857;
    --mp-ops-amber: #a16207;
    min-width: 0;
}

.mp-staff-page *,
.mp-staff-page *::before,
.mp-staff-page *::after { box-sizing: border-box; }

.mp-staff-local-nav {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 0 0 14px;
    overflow-x: auto;
    border: 1px solid var(--mp-ops-line);
    background: #fff;
    scrollbar-width: thin;
}

.mp-staff-local-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 17px;
    border-left: 1px solid var(--mp-ops-line);
    color: var(--mp-text-muted);
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
}

.mp-staff-local-nav a:last-child { border-left: 0; }
.mp-staff-local-nav a:hover,
.mp-staff-local-nav a.is-active {
    color: var(--mp-primary);
    background: #f2f7fa;
    box-shadow: 0 -2px 0 var(--mp-primary) inset;
    text-decoration: none;
}

.mp-staff-kpis,
.mp-timetable-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 14px;
    border: 1px solid var(--mp-ops-line);
    background: #fff;
}

.mp-staff-kpis > div,
.mp-timetable-summary > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px 15px;
    border-left: 1px solid var(--mp-ops-line);
    box-shadow: 0 3px 0 #cbd5e1 inset;
}

.mp-staff-kpis > div:last-child,
.mp-timetable-summary > div:last-child { border-left: 0; }
.mp-staff-kpis > div.is-attention { box-shadow: 0 3px 0 #d97706 inset; }
.mp-staff-kpis > div.is-healthy { box-shadow: 0 3px 0 #059669 inset; }
.mp-staff-kpis span,
.mp-timetable-summary span { color: var(--mp-text-muted); font-size: .72rem; font-weight: 600; }
.mp-staff-kpis strong,
.mp-timetable-summary strong { color: var(--mp-ops-navy); font-size: 1.25rem; font-variant-numeric: tabular-nums; }

.mp-staff-directory-list { overflow-y: auto; }
.mp-staff-directory-item {
    position: relative;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    min-height: 86px;
    padding: 11px 13px;
    border-bottom: 1px solid var(--mp-ops-line);
    color: var(--mp-text);
    text-decoration: none;
}
.mp-staff-directory-item:hover { background: #fff; color: var(--mp-text); text-decoration: none; box-shadow: 3px 0 0 var(--mp-primary) inset; }
.mp-staff-avatar {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid #b9cad5;
    background: #e9f1f5;
    color: var(--mp-primary);
    font-size: .9rem;
    font-weight: 700;
}
.mp-staff-avatar.is-large { width: 52px; height: 52px; font-size: 1.2rem; }
.mp-staff-row-arrow { width: 17px; height: 17px; fill: none; stroke: #94a3b8; stroke-width: 1.8; }
.mp-staff-row-signals { display: flex; gap: 5px; margin-top: 5px; }
.mp-staff-row-signals i { padding: 1px 5px; border: 1px solid var(--mp-ops-line); color: var(--mp-text-subtle); font-size: .61rem; font-style: normal; line-height: 1.5; }
.mp-staff-row-signals i.is-ready { border-color: #a7d9c6; background: #ecfdf5; color: var(--mp-ops-green); }
.mp-staff-row-signals i.is-missing { border-color: #f1d398; background: #fffbeb; color: var(--mp-ops-amber); }

.mp-staff-command { min-height: 100%; padding: 22px; background: #fff; }
.mp-staff-command-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--mp-ops-line); }
.mp-staff-command-head h3,
.mp-timetable-heading h3,
.mp-channel-status h3 { margin: 0; color: var(--mp-ops-navy); font-size: 1.18rem; }
.mp-staff-command-head p,
.mp-channel-status p { max-width: 660px; margin: 4px 0 0; color: var(--mp-text-muted); font-size: .78rem; }
.mp-staff-readiness-score { flex: 0 0 120px; padding: 10px 12px; border-right: 3px solid #d97706; background: #fffbeb; }
.mp-staff-readiness-score.is-healthy { border-color: #059669; background: #ecfdf5; }
.mp-staff-readiness-score strong { display: block; color: var(--mp-ops-navy); font-size: 1.35rem; }
.mp-staff-readiness-score span { color: var(--mp-text-muted); font-size: .66rem; }

.mp-operational-load {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 18px 0;
    border: 1px solid var(--mp-ops-line);
}
.mp-operational-load > div { position: relative; min-width: 0; padding: 13px 14px 14px; border-left: 1px solid var(--mp-ops-line); background: var(--mp-ops-soft); }
.mp-operational-load > div:last-child { border-left: 0; }
.mp-operational-load > div::after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: #94a3b8; }
.mp-operational-load > div.is-complete::after { background: #059669; }
.mp-operational-load > div.is-attention::after { background: #d97706; }
.mp-operational-load span { display: block; color: var(--mp-text-subtle); font: 700 .62rem/1.4 var(--mp-font); }
.mp-operational-load strong { display: block; margin-top: 5px; color: var(--mp-text); font-size: .79rem; }
.mp-operational-load small { display: block; margin-top: 2px; color: var(--mp-text-muted); font-size: .66rem; }

.mp-staff-command-grid,
.mp-staff-detail-grid,
.mp-leadership-sections,
.mp-timetable-setup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mp-staff-command-grid > section,
.mp-staff-surface,
.mp-setup-panel,
.mp-communication-panel,
.mp-test-composer { min-width: 0; padding: 16px; border: 1px solid var(--mp-ops-line); background: #fff; }
.mp-staff-surface.is-muted,
.mp-setup-panel { background: var(--mp-ops-soft); }
.mp-staff-action-list,
.mp-staff-next-steps,
.mp-period-list { margin: 0; padding: 0; list-style: none; }
.mp-staff-action-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 7px 0; border-bottom: 1px solid var(--mp-ops-line); font-size: .76rem; }
.mp-staff-action-list li:last-child { border-bottom: 0; }
.mp-staff-action-list li strong { color: var(--mp-ops-green); }
.mp-staff-action-list li.is-attention strong { color: var(--mp-ops-amber); }
.mp-staff-next-steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 9px; padding: 6px 0; }
.mp-staff-next-steps > li > span { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #b7c9d4; color: var(--mp-primary); font-size: .65rem; font-weight: 700; }
.mp-staff-next-steps p { margin: 0; }
.mp-staff-next-steps strong,
.mp-staff-next-steps small { display: block; }
.mp-staff-next-steps strong { font-size: .75rem; }
.mp-staff-next-steps small { color: var(--mp-text-muted); font-size: .67rem; }

.mp-staff-create { margin-bottom: 14px; }
.mp-inline-editor { padding: 0; border: 1px solid var(--mp-ops-line); background: #fff; }
.mp-inline-editor > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 50px; padding: 10px 15px; cursor: pointer; list-style: none; }
.mp-inline-editor > summary::-webkit-details-marker { display: none; }
.mp-inline-editor > summary > span:first-child strong,
.mp-inline-editor > summary > span:first-child small { display: block; }
.mp-inline-editor > summary small { color: var(--mp-text-muted); font-size: .68rem; font-weight: 400; }
.mp-inline-editor-toggle { color: var(--mp-primary); font-size: .7rem; font-weight: 700; }
.mp-inline-editor[open] > summary { border-bottom: 1px solid var(--mp-ops-line); background: var(--mp-ops-soft); }
.mp-inline-editor > .mp-ops-form { padding: 16px; }

.mp-staff-profile-workspace { border: 1px solid var(--mp-ops-line); background: #fff; }
.mp-staff-identity-header { padding: 20px; border-bottom: 1px solid var(--mp-ops-line); }
.mp-staff-identity-main { display: flex; align-items: center; gap: 13px; }
.mp-staff-identity-main h2 { margin: 0; color: var(--mp-ops-navy); font-size: 1.4rem; }
.mp-staff-identity-main p { margin: 3px 0 0; color: var(--mp-text-muted); font-size: .78rem; }
.mp-staff-identity-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 16px 0 0; border-top: 1px solid var(--mp-ops-line); border-bottom: 1px solid var(--mp-ops-line); }
.mp-staff-identity-facts > div { padding: 9px 12px; border-left: 1px solid var(--mp-ops-line); }
.mp-staff-identity-facts > div:last-child { border-left: 0; }
.mp-staff-identity-facts dt { color: var(--mp-text-subtle); font-size: .64rem; }
.mp-staff-identity-facts dd { margin: 2px 0 0; color: var(--mp-text); font-size: .78rem; font-weight: 700; }
.mp-staff-identity-facts .is-healthy dd { color: var(--mp-ops-green); }
.mp-staff-identity-facts .is-attention dd { color: var(--mp-ops-amber); }

.mp-ops-form { min-width: 0; }
.mp-ops-fields { display: grid; gap: 12px; }
.mp-ops-fields.is-two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mp-ops-fields.is-three-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mp-ops-fields.is-four-columns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mp-ops-fields.is-assignment-grid { grid-template-columns: repeat(5, minmax(120px, 1fr)); }
.mp-ops-fields.is-slot-grid { grid-template-columns: 2fr 1fr 1.2fr 1fr; }
.mp-ops-fields.is-channel-grid { grid-template-columns: 1.1fr 1.5fr .8fr; }
.mp-ops-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; color: var(--mp-text-muted); font-size: .7rem; font-weight: 600; }
.mp-ops-field.is-wide { grid-column: span 1; }
.mp-ops-field input,
.mp-ops-field select,
.mp-ops-field textarea {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 7px 9px;
    border: 1px solid #bdcad4;
    border-radius: 3px;
    background: #fff;
    color: var(--mp-text);
    font: 500 .78rem var(--mp-font);
}
.mp-ops-field textarea { line-height: 1.65; resize: vertical; }
.mp-ops-field input:focus,
.mp-ops-field select:focus,
.mp-ops-field textarea:focus { border-color: var(--mp-primary); outline: 0; box-shadow: var(--mp-focus-ring); }
.mp-ops-field input[readonly] { border-style: dashed; background: #f4f7f9; color: var(--mp-text-muted); }
.mp-ops-field small { color: var(--mp-text-subtle); font-size: .62rem; font-weight: 400; }
.mp-ops-check,
.mp-policy-option { display: flex; align-items: flex-start; gap: 9px; color: var(--mp-text); cursor: pointer; }
.mp-ops-check { margin-top: 12px; padding: 10px; border: 1px solid var(--mp-ops-line); }
.mp-ops-check input,
.mp-policy-option input { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; accent-color: var(--mp-primary); }
.mp-ops-check span,
.mp-policy-option span,
.mp-ops-check strong,
.mp-ops-check small,
.mp-policy-option strong,
.mp-policy-option small { display: block; }
.mp-ops-check strong,
.mp-policy-option strong { font-size: .74rem; }
.mp-ops-check small,
.mp-policy-option small { margin-top: 2px; color: var(--mp-text-muted); font-size: .65rem; }
.mp-ops-check.is-safe { border-color: #a7d9c6; background: #f0fdf4; }
.mp-ops-check.is-confirmation { border-color: #edcd8d; background: #fffbeb; }
.mp-form-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--mp-ops-line); }
.mp-form-actions > span { color: var(--mp-text-muted); font-size: .66rem; }
.mp-ops-disclosure { margin-top: 12px; border: 1px solid var(--mp-ops-line); }
.mp-ops-disclosure summary { min-height: 40px; padding: 9px 11px; color: var(--mp-primary); font-size: .7rem; font-weight: 700; cursor: pointer; }
.mp-ops-disclosure[open] summary { border-bottom: 1px solid var(--mp-ops-line); }
.mp-ops-disclosure .mp-ops-fields { padding: 11px; }

.mp-staff-readonly-list { margin: 0; }
.mp-staff-readonly-list > div { display: grid; grid-template-columns: 150px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--mp-ops-line); }
.mp-staff-readonly-list dt { color: var(--mp-text-muted); font-size: .68rem; }
.mp-staff-readonly-list dd { margin: 0; font-size: .75rem; font-weight: 700; }
.mp-staff-compact-record,
.mp-linked-record { display: block; padding: 9px 0; border-bottom: 1px solid var(--mp-ops-line); }
.mp-staff-compact-record strong,
.mp-staff-compact-record span,
.mp-linked-record strong,
.mp-linked-record span { display: block; }
.mp-staff-compact-record strong,
.mp-linked-record strong { color: var(--mp-text); font-size: .76rem; }
.mp-staff-compact-record span,
.mp-linked-record span { color: var(--mp-text-muted); font-size: .66rem; }
.mp-linked-record:hover strong { color: var(--mp-primary); }
.mp-linked-record.is-attention { box-shadow: 3px 0 0 #d97706 inset; padding-right: 9px; }
.mp-muted-copy { margin: 8px 0; color: var(--mp-text-muted); font-size: .74rem; }

.mp-assignment-list { border-top: 1px solid var(--mp-ops-line); }
.mp-assignment-row { display: grid; grid-template-columns: minmax(180px, 1.4fr) minmax(180px, 1fr) auto auto; align-items: center; gap: 14px; min-height: 67px; padding: 10px 12px; border-bottom: 1px solid var(--mp-ops-line); box-shadow: 3px 0 0 #059669 inset; }
.mp-assignment-row.is-underloaded { box-shadow-color: #d97706; }
.mp-assignment-copy strong,
.mp-assignment-copy span { display: block; }
.mp-assignment-copy strong { font-size: .78rem; }
.mp-assignment-copy span { color: var(--mp-text-muted); font-size: .66rem; }
.mp-load-meter > div { height: 5px; overflow: hidden; background: #e2e8f0; }
.mp-load-meter i { display: block; height: 100%; background: #059669; }
.mp-assignment-row.is-underloaded .mp-load-meter i { background: #d97706; }
.mp-load-meter > span { display: block; margin-top: 4px; color: var(--mp-text-muted); font-size: .64rem; }
.mp-icon-action { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--mp-ops-line); background: #fff; color: var(--mp-text-muted); cursor: pointer; }
.mp-icon-action .mp-icon { width: 16px; height: 16px; }
.mp-icon-action.is-danger:hover { border-color: #efb0b0; background: #fef2f2; color: var(--mp-danger); }
.mp-development-form { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--mp-ops-line); }
.mp-leadership-sections { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mp-leadership-sections > section { padding: 14px; border: 1px solid var(--mp-ops-line); background: var(--mp-ops-soft); }
.mp-leadership-sections h5 { margin: 0 0 7px; color: var(--mp-ops-navy); font-size: .8rem; }

.mp-ops-empty-state { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 24px; border: 1px solid var(--mp-ops-line); border-right: 4px solid var(--mp-primary); background: #fff; }
.mp-ops-empty-state.is-attention { border-right-color: #d97706; }
.mp-ops-empty-code { color: #9fb3c0; font-size: 2rem; font-weight: 700; }
.mp-ops-empty-state h3 { margin: 0; color: var(--mp-ops-navy); font-size: 1rem; }
.mp-ops-empty-state p { margin: 3px 0 0; color: var(--mp-text-muted); font-size: .76rem; }
.mp-timetable-summary > div { display: block; }
.mp-timetable-summary span,
.mp-timetable-summary strong { display: block; }
.mp-timetable-summary strong { margin-top: 3px; font-size: .95rem; }
.mp-timetable-setup-grid { margin-bottom: 14px; }
.mp-setup-panel.is-primary { background: #fff; border-top: 3px solid var(--mp-primary); }
.mp-period-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.mp-period-list li { display: flex; align-items: center; gap: 7px; min-width: 130px; padding: 6px 8px; border: 1px solid var(--mp-ops-line); background: #fff; }
.mp-period-list li > b { display: grid; place-items: center; width: 22px; height: 22px; background: #e8f0f4; color: var(--mp-primary); font-size: .65rem; }
.mp-period-list li span,
.mp-period-list li strong,
.mp-period-list li small { display: block; }
.mp-period-list li strong { font-size: .67rem; }
.mp-period-list li small { color: var(--mp-text-muted); font-size: .6rem; }
.mp-period-list li.is-break { background: #fff8e6; border-color: #f0d78c; }
.mp-period-list li.is-break > b { background: #fde68a; color: #92400e; }
.mp-week-grid-row.is-break-row .mp-period-cell { background: #fffbeb; }
.mp-timetable-cell.is-break-cell { background: #fffbeb; display: grid; place-items: center; }
.mp-compact-period-form { display: grid; grid-template-columns: 70px minmax(120px, 1fr) 100px 100px auto; align-items: end; gap: 7px; padding-top: 11px; border-top: 1px solid var(--mp-ops-line); }
.mp-inline-notice { margin: 8px 0 0; padding: 8px 10px; border-right: 3px solid var(--mp-primary); background: #eef6fa; color: var(--mp-text-muted); font-size: .7rem; }
.mp-inline-notice.is-attention { border-color: #d97706; background: #fffbeb; color: #854d0e; }
.mp-timetable-workspace { border: 1px solid var(--mp-ops-line); background: #fff; }
.mp-timetable-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--mp-ops-line); }
.mp-timetable-heading p { margin: 0; color: var(--mp-text-muted); font-size: .66rem; }
.mp-timetable-heading p i { display: inline-block; width: 8px; height: 8px; margin-left: 4px; background: #059669; }
.mp-week-grid { width: 100%; min-width: 0; }
.mp-week-grid-row { display: grid; grid-template-columns: 115px repeat(5, minmax(0, 1fr)); }
.mp-week-grid-row > div { min-width: 0; border-left: 1px solid var(--mp-ops-line); border-bottom: 1px solid var(--mp-ops-line); }
.mp-week-grid-row > div:last-child { border-left: 0; }
.mp-week-grid-row.is-head > div { padding: 9px 8px; background: var(--mp-ops-navy); color: #fff; font-size: .68rem; font-weight: 700; text-align: center; }
.mp-period-cell { padding: 9px; background: var(--mp-ops-soft); }
.mp-period-cell strong,
.mp-period-cell span { display: block; }
.mp-period-cell strong { font-size: .68rem; }
.mp-period-cell span { margin-top: 3px; color: var(--mp-text-muted); font-size: .58rem; font-variant-numeric: tabular-nums; }
.mp-timetable-cell { min-height: 82px; padding: 5px; background: #fff; }
.mp-timetable-cell.is-empty { display: grid; place-items: center; background: #fbfcfd; }
.mp-empty-slot { color: #cbd5e1; }
.mp-slot-record { position: relative; min-width: 0; padding: 7px 7px 6px; border-right: 3px solid var(--mp-primary); background: #eef5f8; }
.mp-slot-record + .mp-slot-record { margin-top: 5px; }
.mp-slot-record strong,
.mp-slot-record span,
.mp-slot-record small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-slot-record strong { padding-left: 18px; color: var(--mp-ops-navy); font-size: .65rem; }
.mp-slot-record span { color: var(--mp-text); font-size: .62rem; }
.mp-slot-record small { margin-top: 3px; color: var(--mp-text-muted); font-size: .58rem; }
.mp-slot-delete { position: absolute; top: 3px; left: 3px; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; background: transparent; color: #64748b; cursor: pointer; }
.mp-slot-delete:hover { background: #fee2e2; color: var(--mp-danger); }
.mp-week-stack { display: none; }

.mp-channel-status { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-bottom: 14px; padding: 15px 17px; border: 1px solid var(--mp-ops-line); border-right: 4px solid #d97706; background: #fff; }
.mp-channel-status.is-healthy { border-right-color: #059669; }
.mp-channel-status.is-ready { border-right-color: var(--mp-primary); }
.mp-channel-status-mark { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #d8b875; background: #fffbeb; }
.mp-channel-status-mark i { width: 10px; height: 10px; background: #d97706; }
.mp-channel-status.is-healthy .mp-channel-status-mark { border-color: #9bcdbb; background: #ecfdf5; }
.mp-channel-status.is-healthy .mp-channel-status-mark i { background: #059669; }
.mp-channel-status dl { display: flex; gap: 0; margin: 0; border: 1px solid var(--mp-ops-line); }
.mp-channel-status dl > div { min-width: 110px; padding: 7px 9px; border-left: 1px solid var(--mp-ops-line); }
.mp-channel-status dl > div:last-child { border-left: 0; }
.mp-channel-status dt { color: var(--mp-text-subtle); font-size: .6rem; }
.mp-channel-status dd { margin: 1px 0 0; color: var(--mp-text); font-size: .68rem; font-weight: 700; }
.mp-channel-last-error { margin: 8px 0 0; padding: 8px 10px; border: 1px solid #efb0b0; background: #fef2f2; color: #b91c1c; font-size: .74rem; line-height: 1.5; }
.mp-channel-last-error code { margin-inline-start: .35rem; padding: 1px 5px; border: 1px solid #f3c4c4; background: #fff; font-size: .62rem; }
.mp-delivery-detail { max-width: 220px; color: var(--mp-text-muted); font-size: .68rem; line-height: 1.45; }
.mp-delivery-detail code { margin-inline-start: .25rem; font-size: .6rem; }
.mp-communication-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, 360px); gap: 14px; align-items: start; }
.mp-communication-layout > main { display: grid; gap: 14px; min-width: 0; }
.mp-communication-layout > aside { position: sticky; top: calc(var(--mp-context-height, 58px) + 14px); min-width: 0; }
.mp-channel-config-label,
.mp-delivery-status { display: inline-flex; align-items: center; min-height: 25px; padding: 2px 7px; border: 1px solid #edcd8d; background: #fffbeb; color: #92400e; font-size: .65rem; font-weight: 700; }
.mp-channel-config-label.is-configured,
.mp-delivery-status.is-success { border-color: #a7d9c6; background: #ecfdf5; color: #047857; }
.mp-delivery-status.is-failed { border-color: #efb0b0; background: #fef2f2; color: #b91c1c; }
.mp-delivery-status.is-simulated { border-color: #b9cad5; background: #eef5f8; color: var(--mp-primary); }
.mp-security-note { display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 9px; margin-bottom: 14px; padding: 11px; border-right: 3px solid var(--mp-primary); background: #eef5f8; }
.mp-security-note .mp-icon { width: 21px; height: 21px; color: var(--mp-primary); }
.mp-security-note p { margin: 0; }
.mp-security-note strong,
.mp-security-note span { display: block; }
.mp-security-note strong { color: var(--mp-ops-navy); font-size: .72rem; }
.mp-security-note span { margin-top: 2px; color: var(--mp-text-muted); font-size: .65rem; }
.mp-channel-switches,
.mp-notification-policy { min-width: 0; margin: 14px 0 0; padding: 12px; border: 1px solid var(--mp-ops-line); }
.mp-channel-switches legend,
.mp-notification-policy legend { padding: 0 6px; color: var(--mp-ops-navy); font-size: .76rem; font-weight: 700; }
.mp-channel-switches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.mp-channel-switches .mp-ops-check { margin: 0; }
.mp-notification-policy > p { margin: 0 0 9px; color: var(--mp-text-muted); font-size: .68rem; }
    .mp-notification-policy > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

/* Communication event policy map */
.mp-event-policy { padding: 14px !important; }
.mp-event-policy-lead { margin: 0 0 12px; font-size: .78rem; color: var(--mp-text-muted); line-height: 1.55; }
.mp-event-policy-lead a { color: var(--mp-ops-navy); font-weight: 650; }
.mp-event-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.mp-event-stat { border: 1px solid var(--mp-ops-line); border-radius: 8px; padding: 8px 10px; text-align: center; background: #fafbfc; }
.mp-event-stat strong { display: block; font-size: 1.1rem; color: var(--mp-ops-navy); }
.mp-event-stat span { font-size: .68rem; color: var(--mp-text-muted); }
.mp-event-toolbar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.mp-event-bulk { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-event-search input { min-height: 36px; border: 1px solid var(--mp-ops-line); border-radius: 8px; padding: 0 10px; min-width: 200px; font-size: .8rem; }
.mp-event-tier { margin-bottom: 14px; border: 1px solid var(--mp-ops-line); border-radius: 10px; overflow: hidden; }
.mp-event-tier-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: #f4f6f8; border-bottom: 1px solid var(--mp-ops-line); }
.mp-event-tier-head h5 { margin: 0; font-size: .78rem; font-weight: 700; color: var(--mp-ops-navy); }
.mp-event-tier-head span { font-size: .68rem; color: var(--mp-text-muted); }
.mp-event-tier-critical .mp-event-tier-head { background: #fef2f2; border-color: #fecaca; }
.mp-event-tier-high .mp-event-tier-head { background: #fff7ed; border-color: #fed7aa; }
.mp-event-tier-low .mp-event-tier-head { background: #f8fafc; }
.mp-event-groups { display: grid; gap: 8px; padding: 8px; }
.mp-event-group { border: 1px solid var(--mp-ops-line); border-radius: 8px; background: #fff; overflow: hidden; }
.mp-event-group.is-hidden { display: none; }
.mp-event-group-toggle { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 12px; cursor: pointer; margin: 0; }
.mp-event-group-toggle input { margin-top: 4px; }
.mp-event-group-main strong { display: block; font-size: .82rem; color: var(--mp-ops-navy); }
.mp-event-group-main small { display: block; margin-top: 3px; font-size: .68rem; color: var(--mp-text-muted); line-height: 1.45; }
.mp-event-audience { font-size: .64rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: #eef2ff; color: #3730a3; white-space: nowrap; }
.mp-event-items { margin: 0; padding: 0 12px 10px 34px; list-style: none; display: grid; gap: 5px; }
.mp-event-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 6px; align-items: center; font-size: .72rem; padding: 5px 0; border-top: 1px dashed #e8edf2; }
.mp-event-item-label { color: var(--mp-text); font-weight: 600; }
.mp-event-key { font-size: .62rem; padding: 1px 5px; border-radius: 4px; background: #f1f5f9; color: #475569; }
.mp-event-status { font-size: .62rem; color: var(--mp-text-muted); }
.mp-event-template-ok { font-size: .62rem; color: #166534; font-weight: 700; }
.mp-event-template-miss { font-size: .62rem; color: #9a3412; font-weight: 700; }
.mp-event-footnote { margin: 10px 0 0; font-size: .68rem; color: var(--mp-text-muted); line-height: 1.5; }
.mp-event-footnote a { color: var(--mp-ops-navy); font-weight: 650; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.mp-policy-option { padding: 10px; border: 1px solid var(--mp-ops-line); background: var(--mp-ops-soft); }
.mp-composer-intro { margin: -3px 0 13px; color: var(--mp-text-muted); font-size: .68rem; }
.mp-message-preview { margin-top: 12px; padding: 10px; border-right: 3px solid var(--mp-primary); background: #eef5f8; }
.mp-message-preview span,
.mp-message-preview strong,
.mp-message-preview small { display: block; }
.mp-message-preview span { color: var(--mp-text-subtle); font-size: .6rem; }
.mp-message-preview strong { color: var(--mp-ops-navy); font-size: .75rem; }
.mp-message-preview small { color: var(--mp-text-muted); font-size: .65rem; }
.mp-btn-block { width: 100%; }
.mp-log-recipient-type { display: block; color: var(--mp-text-subtle); font-size: .6rem; }
.mp-event-key { color: var(--mp-text-muted); font-size: .62rem; }

@media (max-width: 1100px) {
    .mp-ops-fields.is-four-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mp-ops-fields.is-assignment-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mp-communication-layout { grid-template-columns: minmax(0, 1fr) 310px; }
    .mp-channel-status { grid-template-columns: 44px minmax(0, 1fr); }
    .mp-channel-status dl { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    .mp-staff-kpis,
    .mp-timetable-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mp-staff-kpis > div:nth-child(2),
    .mp-timetable-summary > div:nth-child(2) { border-left: 0; }
    .mp-staff-kpis > div:nth-child(-n+2),
    .mp-timetable-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--mp-ops-line); }
    .mp-staff-command-grid,
    .mp-staff-detail-grid,
    .mp-timetable-setup-grid { grid-template-columns: 1fr; }
    .mp-leadership-sections { grid-template-columns: 1fr; }
    .mp-operational-load { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mp-operational-load > div:nth-child(2) { border-left: 0; }
    .mp-operational-load > div:nth-child(-n+2) { border-bottom: 1px solid var(--mp-ops-line); }
    .mp-assignment-row { grid-template-columns: minmax(160px, 1fr) minmax(150px, 1fr) auto; }
    .mp-assignment-row > form { grid-column: 3; }
    .mp-ops-fields.is-slot-grid,
    .mp-ops-fields.is-channel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mp-communication-layout { grid-template-columns: 1fr; }
    .mp-communication-layout > aside { position: static; }
    .mp-week-grid { display: none; }
    .mp-week-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px; }
    .mp-day-stack { min-width: 0; border: 1px solid var(--mp-ops-line); }
    .mp-day-stack h4 { margin: 0; padding: 9px 11px; background: var(--mp-ops-navy); color: #fff; font-size: .74rem; }
    .mp-day-period { display: grid; grid-template-columns: 82px minmax(0, 1fr); min-height: 68px; border-bottom: 1px solid var(--mp-ops-line); }
    .mp-day-period:last-child { border-bottom: 0; }
    .mp-day-period-time { padding: 8px; border-left: 1px solid var(--mp-ops-line); background: var(--mp-ops-soft); }
    .mp-day-period-time strong,
    .mp-day-period-time span { display: block; }
    .mp-day-period-time strong { font-size: .63rem; }
    .mp-day-period-time span { color: var(--mp-text-muted); font-size: .58rem; }
    .mp-day-period-content { min-width: 0; padding: 5px; }
    .mp-empty-day-period { color: var(--mp-text-subtle); font-size: .62rem; }
}

@media (max-width: 960px) {
    /* True overlay shell: the navigation never participates in mobile flex width. */
    .mp-app { display: block !important; width: 100%; min-width: 0; }
    .mp-main { display: flex; width: 100% !important; min-width: 0; margin: 0 !important; }
    .mp-sidebar,
    html[data-rail-expanded="true"] .mp-sidebar {
        position: fixed !important;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        z-index: 1000;
        display: flex;
        width: min(240px, calc(100vw - 44px)) !important;
        height: 100dvh;
        margin: 0;
        visibility: hidden;
        transform: translate3d(105%, 0, 0);
        transition: transform 140ms ease, visibility 140ms ease;
    }
    .mp-drawer-open .mp-sidebar,
    html[data-rail-expanded="true"] .mp-drawer-open .mp-sidebar { visibility: visible; transform: translate3d(0, 0, 0); }
    .mp-drawer-backdrop {
        position: fixed !important;
        inset: 0;
        z-index: 900;
        display: block !important;
        width: 100vw !important;
        height: 100dvh !important;
        margin: 0 !important;
        padding: 0;
        border: 0;
        background: rgba(15, 23, 42, .58);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    .mp-drawer-open .mp-drawer-backdrop { opacity: 1; visibility: visible; pointer-events: auto; }
    .mp-drawer-close { position: absolute; top: 13px; left: 10px; display: grid !important; place-items: center; width: 44px !important; height: 44px !important; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.07); color: #fff; }
    .mp-menu-toggle { display: inline-flex !important; }
    .mp-rail-toggle { display: none !important; }
}

@media (max-width: 760px) {
    html,
    body { max-width: 100%; overflow-x: hidden; }
    .mp-content { width: 100%; min-width: 0; padding: 12px !important; }
    .mp-page-toolbar { width: auto; margin: -12px -12px 12px; }
    .mp-page-toolbar-actions { width: 100%; flex-wrap: wrap; overflow: visible; }
    .mp-page-toolbar-actions > * { flex: 1 1 auto; }
    .mp-staff-local-nav { margin-right: -12px; margin-left: -12px; border-right: 0; border-left: 0; }
    .mp-staff-local-nav a,
    .mp-staff-page a.mp-btn,
    .mp-staff-page button,
    .mp-staff-page input,
    .mp-staff-page select { min-height: 44px !important; }
    .mp-staff-page textarea { min-height: 96px !important; }
    .mp-slot-delete,
    .mp-icon-action { min-width: 44px !important; min-height: 44px !important; }
    .mp-staff-kpis,
    .mp-timetable-summary { grid-template-columns: 1fr; }
    .mp-staff-kpis > div,
    .mp-timetable-summary > div { border-left: 0; border-bottom: 1px solid var(--mp-ops-line); }
    .mp-staff-kpis > div:last-child,
    .mp-timetable-summary > div:last-child { border-bottom: 0; }
    .mp-staff-command { padding: 14px 12px; }
    .mp-staff-command-head { display: grid; gap: 12px; }
    .mp-staff-readiness-score { width: 100%; }
    .mp-operational-load { grid-template-columns: 1fr; }
    .mp-operational-load > div { border-left: 0; border-bottom: 1px solid var(--mp-ops-line); }
    .mp-operational-load > div:last-child { border-bottom: 0; }
    .mp-staff-identity-header { padding: 14px 12px; }
    .mp-staff-identity-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mp-staff-identity-facts > div:nth-child(2n) { border-left: 0; }
    .mp-staff-identity-facts > div:nth-child(-n+2) { border-bottom: 1px solid var(--mp-ops-line); }
    .mp-ops-fields.is-two-columns,
    .mp-ops-fields.is-three-columns,
    .mp-ops-fields.is-four-columns,
    .mp-ops-fields.is-assignment-grid,
    .mp-ops-fields.is-slot-grid,
    .mp-ops-fields.is-channel-grid { grid-template-columns: 1fr; }
    .mp-form-actions { align-items: stretch; flex-direction: column; }
    .mp-form-actions .mp-btn { width: 100%; }
    .mp-assignment-row { grid-template-columns: minmax(0, 1fr) auto; gap: 9px; }
    .mp-assignment-row .mp-load-meter { grid-column: 1 / -1; grid-row: 2; }
    .mp-assignment-row > .mp-status { grid-column: 1; grid-row: 3; justify-self: start; }
    .mp-assignment-row > form { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
    .mp-compact-period-form { grid-template-columns: 1fr 1fr; }
    .mp-compact-period-form .mp-ops-field:nth-child(2),
    .mp-compact-period-form .mp-btn { grid-column: 1 / -1; }
    .mp-week-stack { grid-template-columns: 1fr; padding: 7px; }
    .mp-timetable-heading { align-items: flex-start; flex-direction: column; }
    .mp-ops-empty-state { grid-template-columns: 1fr; padding: 18px; }
    .mp-ops-empty-code { font-size: 1.35rem; }
    .mp-channel-status { grid-template-columns: 36px minmax(0, 1fr); padding: 12px; }
    .mp-channel-status dl { display: grid; grid-template-columns: 1fr; }
    .mp-channel-status dl > div { min-width: 0; border-left: 0; border-bottom: 1px solid var(--mp-ops-line); }
    .mp-channel-status dl > div:last-child { border-bottom: 0; }
    .mp-communication-panel,
    .mp-test-composer,
    .mp-setup-panel,
    .mp-staff-surface { padding: 12px; }
    .mp-channel-switches,
    .mp-notification-policy > div { grid-template-columns: 1fr; }
    .mp-event-stats { grid-template-columns: 1fr; }
    .mp-event-item { grid-template-columns: 1fr; }
    .mp-communication-page .mp-data-table { min-width: 560px; }
    .mp-inline-editor > summary { min-height: 58px; }
    .mp-inline-editor-toggle { display: none; }
}

@media (max-width: 960px) {
    .mp-app { display: block !important; width: 100%; min-width: 0; }
    .mp-main { width: 100% !important; min-width: 0; }
    .mp-staff-page,
    .mp-communication-page,
    .mp-staff-page > *,
    .mp-communication-page > * { min-width: 0; max-width: 100%; }
    .mp-staff-page button,
    .mp-staff-page .mp-btn,
    .mp-staff-page input,
    .mp-staff-page select,
    .mp-communication-page button,
    .mp-communication-page .mp-btn,
    .mp-communication-page input,
    .mp-communication-page select { min-height: 44px; }
}

/* ==========================================================================
   ACADEMIC STRUCTURE MODULE — EXECUTIVE ARCHITECTURAL ZERO-RADIUS DESIGN
   ========================================================================== */

.academic-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.academic-kpi-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-top: 3px solid #1e4d6b;
    border-radius: 0 !important;
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.04);
}

.academic-kpi-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
}

.academic-kpi-number {
    font-size: 1.8rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

.academic-kpi-meta {
    font-size: 0.78rem;
    color: #475569;
}

/* Stage Card Layout */
.academic-stage-card {
    border-radius: 0 !important;
    border: 1px solid #e2e8f0 !important;
    margin-bottom: 1.5rem !important;
    background: #ffffff;
    box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.04) !important;
}

.academic-stage-header {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 1rem 1.35rem !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.academic-stage-subtitle {
    display: block;
    font-size: 0.82rem;
    color: #64748b;
    margin-top: 0.2rem;
    font-weight: 500;
}

.academic-badge-pill {
    padding: 0.25rem 0.75rem;
    background: #f1f5f9;
    color: #1e4d6b;
    border: 1px solid #e2e8f0;
    border-radius: 0 !important;
    font-size: 0.78rem;
    font-weight: 600;
}

/* Grades Grid inside Stage */
.academic-grades-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.1rem;
    padding: 0.25rem 0;
}

.academic-grade-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0 !important;
    padding: 1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.academic-grade-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0.5rem;
}

.academic-grade-head strong {
    font-size: 0.98rem;
    font-weight: 700;
    color: #0f172a;
}

.academic-grade-head small {
    font-size: 0.78rem;
    color: #1e4d6b;
    font-weight: 600;
    background: rgba(30, 77, 107, 0.08);
    padding: 0.15rem 0.5rem;
    border-radius: 0 !important;
}

.academic-classrooms-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.academic-classroom-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.35rem 0.7rem;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 0 !important;
    font-size: 0.82rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.academic-classroom-name {
    font-weight: 700;
    color: #0f172a;
}

.academic-classroom-count {
    font-size: 0.75rem;
    color: #64748b;
    background: #f1f5f9;
    padding: 0.1rem 0.4rem;
    border-radius: 0 !important;
}

.academic-empty-tag {
    font-size: 0.8rem;
    color: #94a3b8;
    font-style: italic;
}

/* Subjects Directory */
.academic-subjects-card {
    border-radius: 0 !important;
    border: 1px solid #e2e8f0 !important;
    margin-bottom: 1.5rem !important;
}

.academic-subjects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
}

.academic-subject-chip {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.9rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-inline-start: 3px solid #1e4d6b;
    border-radius: 0 !important;
    transition: var(--mp-transition, all 0.15s ease);
}

.academic-subject-chip:hover {
    background: #ffffff;
    border-color: #cbd5e1;
    border-inline-start-color: #163a52;
}

.academic-subject-icon {
    font-size: 0.95rem;
}

.academic-subject-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: #0f172a;
}

/* Form Section Styling */
.academic-manage-section {
    margin-top: 2rem;
}

.academic-section-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.academic-section-title::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 18px;
    background: #1e4d6b;
}

.academic-manage-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.academic-form-card {
    border-radius: 0 !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

.academic-form-card .mp-card-header {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 0.85rem 1.15rem !important;
}

.academic-form-card .mp-card-header h3 {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

.academic-form-body {
    padding: 1.15rem !important;
}

.academic-field-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.9rem;
}

.academic-field-group label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #334155;
}

.academic-field-group input[type="text"],
.academic-field-group select {
    width: 100%;
    padding: 0.55rem 0.8rem;
    font-size: 0.88rem;
    font-family: inherit;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 0 !important;
    transition: var(--mp-transition, all 0.15s ease);
}

.academic-field-group input[type="text"]:focus,
.academic-field-group select:focus {
    border-color: #1e4d6b;
    outline: none;
    box-shadow: 0 0 0 2px rgba(30, 77, 107, 0.15);
}

@media (max-width: 900px) {
    .academic-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .academic-manage-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 550px) {
    .academic-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   OPERATIONAL DELEGATIONS MODULE — ZERO RADIUS EXECUTIVE STYLING
   ========================================================================== */

.delegations-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.delegations-kpi-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-top: 3px solid #1e4d6b;
    border-radius: 0 !important;
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.04);
}

.delegations-kpi-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
}

.delegations-kpi-number {
    font-size: 1.75rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

.delegations-kpi-meta {
    font-size: 0.78rem;
    color: #475569;
}

/* Delegations Form Card */
.delegations-form-card {
    border-radius: 0 !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    margin-bottom: 1.5rem !important;
}

.delegations-form-header {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 1rem 1.35rem !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.delegations-form-body {
    padding: 1.35rem !important;
}

.delegations-form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem 1.25rem;
}

.delegations-field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.delegations-field.is-full {
    grid-column: 1 / -1;
}

.delegations-field label {
    font-size: 0.83rem;
    font-weight: 700;
    color: #334155;
}

.delegations-field input[type="text"],
.delegations-field input[type="date"],
.delegations-field select,
.delegations-field textarea {
    width: 100%;
    padding: 0.6rem 0.85rem;
    font-size: 0.88rem;
    font-family: inherit;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 0 !important;
    transition: all 0.15s ease;
}

.delegations-field input[type="text"]:focus,
.delegations-field input[type="date"]:focus,
.delegations-field select:focus,
.delegations-field textarea:focus {
    border-color: #1e4d6b;
    outline: none;
    box-shadow: 0 0 0 2px rgba(30, 77, 107, 0.15);
}

.delegations-form-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

/* Delegations Table Styling */
.delegations-table-card {
    border-radius: 0 !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    overflow: hidden;
}

.delegations-table {
    width: 100%;
    border-collapse: collapse;
}

.delegations-table th {
    background: #f8fafc;
    color: #475569;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: right;
    padding: 0.85rem 1.15rem;
    border-bottom: 1px solid #e2e8f0;
}

.delegations-table td {
    padding: 1rem 1.15rem;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.88rem;
    color: #1e293b;
    vertical-align: middle;
}

.delegations-table tr:last-child td {
    border-bottom: none;
}

.delegations-table tr:hover td {
    background: #f8fafc;
}

.delegation-user-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    color: #0f172a;
}

.delegation-user-avatar {
    width: 32px;
    height: 32px;
    background: #1e4d6b;
    color: #ffffff;
    display: grid;
    place-items: center;
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: 0 !important;
}

.delegation-cap-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.3rem 0.65rem;
    background: #f0f9ff;
    color: #0369a1;
    border: 1px solid #bae6fd;
    border-radius: 0 !important;
    font-size: 0.8rem;
    font-weight: 600;
}

.delegation-scope-tag {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #cbd5e1;
    border-radius: 0 !important;
    font-size: 0.8rem;
}

.delegation-date-chip {
    font-size: 0.82rem;
    color: #475569;
    font-family: monospace, inherit;
}

.delegation-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.25rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 0 !important;
}

.delegation-status-pill.is-active {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.delegation-status-pill.is-expired {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

@media (max-width: 900px) {
    .delegations-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .delegations-form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 550px) {
    .delegations-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   GLOBAL EXECUTIVE ZERO-RADIUS NAVIGATION & INTEGRATED SUB-NAV SYSTEM
/* Modern Staff Navigation base defaults are maintained in public/css/staff.css */


/* ==========================================================================
   OFFICIAL PREMIUM REPORT TEMPLATE & CLICHE LETTERHEAD SYSTEM
   ========================================================================== */

.mp-official-cliche {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 3px double #1e4d6b;
    margin-bottom: 16px;
    position: relative;
    background: #ffffff;
}

.mp-cliche-right {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mp-cliche-right strong {
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
}

.mp-cliche-right span {
    font-size: 0.8rem;
    color: #475569;
    font-weight: 600;
}

.mp-cliche-center {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.mp-emblem-icon {
    width: 52px;
    height: 52px;
    border: 2px solid #1e4d6b;
    color: #1e4d6b;
    display: grid;
    place-items: center;
    font-size: 1.45rem;
    font-weight: 800;
    background: #f8fafc;
    border-radius: 0 !important;
}

.mp-emblem-badge {
    font-size: 0.68rem;
    font-weight: 800;
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fde68a;
    padding: 1px 8px;
    border-radius: 0 !important;
}

.mp-cliche-left {
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

.mp-cliche-meta-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 0 !important;
}

.mp-premium-banner {
    background: #1e4d6b;
    color: #ffffff;
    padding: 1rem 1.4rem;
    margin-bottom: 1.25rem;
    border-inline-start: 5px solid #5eead4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    border-radius: 0 !important;
}

.mp-premium-banner h1 {
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
}

.mp-premium-banner p {
    font-size: 0.82rem;
    color: #cbd5e1;
    margin-top: 4px;
}

.mp-premium-banner-tag {
    padding: 0.3rem 0.8rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 0 !important;
}

/* System-wide: no underline on hover for links and text actions */
a:hover,
button:hover,
[role="button"]:hover,
[role="link"]:hover {
    text-decoration: none;
}