/* PBUHub responsive infrastructure. Bootstrap 5 breakpoints: md 768px, lg 992px. */
:root {
    --app-font-size: 1rem;
    --app-page-padding: clamp(14px, 4vw, 16px);
    --app-card-padding: clamp(16px, 4.5vw, 20px);
    --app-radius: 18px;
    --app-gap: clamp(12px, 3vw, 16px);
    --app-header-height: 68px;
    --app-mobile-nav-height: 68px;
    --pbu-page-gutter: clamp(16px, 2.2vw, 30px);
    --pbu-card-padding: clamp(16px, 1.7vw, 22px);
    --pbu-touch-target: 44px;
    --pbu-mobile-nav-height: 68px;
}

html { overflow-x: hidden; }
body { min-width: 320px; overflow-wrap: anywhere; }
img, svg, video, canvas { max-width: 100%; }
.app-shell { max-width: 100vw; overflow-x: clip; }
.main-area, .topbar, .topbar-left, .topbar-actions, .page-wrap, .app-card, .panel, .tab-content { min-width: 0; }
.page-wrap { width: 100%; padding-inline: var(--pbu-page-gutter); }
.app-card, .panel { padding: var(--pbu-card-padding); }
.table-responsive, .access-matrix-wrap { overscroll-behavior-inline: contain; scrollbar-width: thin; }
.app-card:has(> table), .panel:has(> table) { max-width: 100%; overflow-x: auto; }
.breadcrumb, .nav-tabs, .user-detail-tabs, .access-tabset, .estaf-internal-tabs { scrollbar-width: none; }
.breadcrumb::-webkit-scrollbar, .nav-tabs::-webkit-scrollbar, .user-detail-tabs::-webkit-scrollbar,
.access-tabset::-webkit-scrollbar, .estaf-internal-tabs::-webkit-scrollbar { display: none; }
.empty-state, .notification-empty, .management-empty, .standard-table-empty { padding: clamp(24px, 6vw, 48px) 16px; text-align: center; }
.stat-label, .stat-value, .stat-sub { display: block; }
.access-matrix .module-name small { display: block; margin-top: 3px; color: var(--pbu-muted); font-weight: 500; }

/* Shared responsive primitives for existing and new pages. */
.app-page { width: 100%; min-width: 0; }
.espak-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    min-height: 44px;
    margin-bottom: 12px;
    padding: 9px 13px;
    border: 1px solid #d8e3ef;
    border-radius: 11px;
    background: #fff;
    color: var(--pbu-blue);
    font-size: .875rem;
    font-weight: 750;
    line-height: 1.2;
    box-shadow: 0 3px 10px rgba(15, 35, 71, .05);
}
.espak-back-link:hover { border-color: var(--pbu-blue); background: #f4f8ff; color: var(--pbu-blue); }
.mobile-context-back { display: none; min-width: 0; }
.app-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--app-gap); margin-bottom: var(--app-gap); }
.app-page-title { margin: 0; color: var(--pbu-text); font-size: clamp(1.65rem, 6vw, 2.25rem); font-weight: 800; line-height: 1.2; text-wrap: balance; }
.app-page-subtitle { max-width: 70ch; margin: .45rem 0 0; color: var(--pbu-muted); line-height: 1.55; }
.app-section { display: grid; gap: var(--app-gap); margin-block: var(--app-gap); }
.app-form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--app-gap); }
.app-actions { display: flex; align-items: center; gap: .75rem; }
.app-responsive-table { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
.app-mobile-stack { display: flex; flex-direction: column; gap: var(--app-gap); }
.app-tabs { display: flex; max-width: 100%; overflow-x: auto; gap: .5rem; scrollbar-width: none; }
.app-tabs::-webkit-scrollbar { display: none; }
.app-tabs > a, .app-tabs > button { min-height: var(--pbu-touch-target); flex: 0 0 auto; }
.report-period-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 8px; border: 1px solid #dce5f0; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(16, 37, 75, .06); }
.report-period-tab { --period-color:#1764e8; --period-deep:#155eef; --period-soft:#edf4ff; display: flex; min-width: 0; min-height: 64px; padding: 11px 14px; align-items: center; gap: 11px; border: 1px solid color-mix(in srgb,var(--period-color) 18%,transparent); border-radius: 11px; color: #52647d; background:linear-gradient(135deg,#fff,var(--period-soft)); text-decoration: none; transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; }
.report-period-tab:nth-child(1) { --period-color:#1764e8; --period-deep:#155eef; --period-soft:#edf4ff; }
.report-period-tab:nth-child(2) { --period-color:#7c3aed; --period-deep:#5b21b6; --period-soft:#f5f0ff; }
.report-period-tab:nth-child(3) { --period-color:#0f8f89; --period-deep:#08746f; --period-soft:#eafaf7; }
.report-period-tab > i { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: 10px; background: color-mix(in srgb,var(--period-color) 12%,#fff); color: var(--period-color); font-size: 1rem; }
.report-period-tab span, .report-period-tab strong, .report-period-tab small { display: block; min-width: 0; }
.report-period-tab strong { color: #10254b; font-size: .84rem; line-height: 1.25; }
.report-period-tab small { margin-top: 3px; color: #718198; font-size: .68rem; line-height: 1.25; }
.report-period-tab:hover { transform:translateY(-2px); border-color:var(--period-color); color:var(--period-color); box-shadow:0 8px 18px color-mix(in srgb,var(--period-color) 15%,transparent); }
.report-period-tab.is-active { border-color:var(--period-color); background:linear-gradient(135deg,var(--period-color),var(--period-deep)); color:#fff; box-shadow:0 9px 22px color-mix(in srgb,var(--period-color) 30%,transparent); }
.report-period-tab.is-active > i { background: rgba(255,255,255,.16); color: #fff; }
.report-period-tab.is-active strong, .report-period-tab.is-active small { color: #fff; }
.report-period-tabs + .app-card { position:relative; overflow:hidden; border-color:#d7e5ed; background:linear-gradient(115deg,#eef8ff 0%,#f4f1ff 48%,#eafbf6 100%); box-shadow:0 10px 28px rgba(28,70,105,.08); }
.report-period-tabs + .app-card::after { content:""; position:absolute; width:210px; height:210px; right:-85px; top:-115px; border-radius:50%; background:linear-gradient(135deg,rgba(23,100,232,.14),rgba(15,143,137,.12)); }
.report-period-tabs + .app-card .row { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0; }
.report-period-tabs + .app-card .col-md-4 { width:auto; position:relative; padding:16px 18px; border-radius:13px; background:rgba(255,255,255,.67); border:1px solid rgba(255,255,255,.82); box-shadow:0 5px 14px rgba(23,50,83,.045); }
.report-period-tabs + .app-card .col-md-4:nth-child(1) { border-left:4px solid #1764e8; }
.report-period-tabs + .app-card .col-md-4:nth-child(2) { border-left:4px solid #7c3aed; }
.report-period-tabs + .app-card .col-md-4:nth-child(3) { border-left:4px solid #0f8f89; }
.report-period-tabs + .app-card small { color:#587086; font-weight:750; letter-spacing:.045em; }
.report-period-tabs + .app-card strong { margin-top:5px; color:#10254b; font-size:.9rem; }
@media (max-width: 767.98px) { .report-period-tabs { grid-template-columns: 1fr; } .report-period-tab { min-height: 58px; } .report-period-tabs + .app-card .row { grid-template-columns:1fr; } }
.app-status { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: .4rem .65rem; font-weight: 700; }
.app-bottom-safe-area { padding-bottom: calc(var(--app-mobile-nav-height) + env(safe-area-inset-bottom) + 18px); }
.app-loading { display: grid; min-height: 140px; place-items: center; padding: 24px; color: var(--pbu-muted); text-align: center; }
.app-loading[aria-busy="true"]::before { content: ""; width: 32px; height: 32px; border: 3px solid #dbe4ef; border-top-color: var(--pbu-blue); border-radius: 50%; animation: app-spin .8s linear infinite; }
@keyframes app-spin { to { transform: rotate(360deg); } }
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid color-mix(in srgb, var(--pbu-blue) 32%, transparent); outline-offset: 2px; }

/* Tablet and smaller: Bootstrap lg boundary is the existing PBUHub navigation boundary. */
@media (max-width: 991.98px) {
    body { padding-bottom: 0; }
    .topbar { height: 68px; padding-inline: var(--pbu-page-gutter); }
    .page-wrap { padding-top: 20px; padding-bottom: 32px; }
    .page-title-row, .module-page-heading, .app-card-header, .card-heading {
        flex-wrap: wrap;
    }
    .page-title-row > div:first-child, .module-page-heading > div:nth-child(2), .app-card-header > div:first-child {
        min-width: 0;
    }
    .page-title-row h1, .page-title-row h2, .module-page-heading h1, .page-heading h2 {
        max-width: 100%; line-height: 1.2; text-wrap: balance;
    }
    .page-title-row p, .module-page-heading p, .page-heading p { max-width: 70ch; line-height: 1.55; }
    .dashboard-bottom, .management-grid { grid-template-columns: minmax(0, 1fr); }
    .dashboard-bottom > .app-card:last-child { grid-column: auto; }
    .table-toolbar, .superadmin-toolbar { align-items: stretch; flex-wrap: wrap; }
    .table-search { width: min(100%, 360px); min-height: var(--pbu-touch-target); }
    .nav-tabs, .user-detail-tabs, .access-tabset, .estaf-internal-tabs {
        max-width: 100%; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; -webkit-overflow-scrolling: touch;
    }
    .nav-tabs .nav-link, .user-detail-tabs a, .access-tab, .estaf-internal-tabs a,
    .estaf-internal-tabs button { min-height: var(--pbu-touch-target); white-space: nowrap; }
    .modal-dialog { margin: 16px auto; max-width: calc(100% - 32px); }
    .sticky-top, .emind-activity-tabs { scroll-margin-top: 76px; }
}

/* Mobile: content becomes touch-first rather than a compressed desktop layout. */
@media (max-width: 767.98px) {
    html { scroll-padding-bottom: calc(var(--app-mobile-nav-height) + env(safe-area-inset-bottom) + 24px); }
    html, body { max-width: 100%; overflow-x: clip; }
    body { font-size: var(--app-font-size); line-height: 1.5; }
    .main-area, .page-wrap, .app-card, .panel, .app-card-header, .card-heading,
    .emind-tab-panel, .table-responsive { min-width: 0; max-width: 100%; }
    .page-wrap { padding: 16px 14px 30px; }
    .topbar { padding-inline: 12px; }
    .topbar-actions { gap: 4px; }
    .page-title-row { gap: 12px; margin-bottom: 16px; }
    .page-title-row h1, .page-title-row h2, .module-page-heading h1, .page-heading h2 {
        font-size: clamp(1.35rem, 6vw, 1.65rem); letter-spacing: -.025em;
    }
    .page-title-row p, .module-page-heading p, .page-heading p { margin-top: 7px; font-size: .88rem; }
    .page-date { width: 100%; margin-top: 0; white-space: normal; }
    .app-card, .panel { width: 100%; border-radius: var(--app-radius); padding: var(--app-card-padding); }
    .app-card-header, .card-heading { align-items: flex-start; flex-wrap: wrap; gap: 10px; }
    .app-card-header > div, .card-heading > div { min-width: 0; }
    .app-card-header h3, .app-card-header h4, .app-card-header h5,
    .card-heading h2 { overflow-wrap: anywhere; }
    .app-card-header > a, .app-card-header > button, .card-heading > a, .card-heading > button,
    .page-title-row > a.btn, .page-title-row > button.btn { min-height: var(--pbu-touch-target); }
    .stat-card { min-height: 112px; padding: 16px; }
    .stat-label, .stat-sub, .quick-card strong, .table-modern { font-size: .875rem; line-height: 1.45; }
    .quick-grid, .stat-grid { grid-template-columns: minmax(0, 1fr); }
    .quick-card { min-height: 112px; padding: 14px 12px; }
    .module-grid { grid-template-columns: minmax(0, 1fr); }
    .module-card h2 { font-size: 1.2rem; }
    .module-card p { font-size: .875rem; line-height: 1.55; }
    .app-card-header h3, .app-card-header h4, .app-card-header h5, .card-heading h2,
    .student-section-form h3, .mind-note-card h3 { font-size: clamp(1.0625rem, 5vw, 1.1875rem); line-height: 1.35; }
    label, .form-label, .form-card label, .espak-form-grid label, .employment-form label { font-size: .9375rem; line-height: 1.4; }
    small, .small, .form-text, .text-secondary.small { font-size: .875rem; line-height: 1.45; }
    .form-control, .form-select, textarea.form-control {
        min-height: var(--pbu-touch-target); border-radius: 10px; font-size: 16px;
    }
    textarea.form-control { min-height: 120px; line-height: 1.5; }
    .btn, .btn-pbu, .btn-light-border { min-height: 48px; font-size: 1rem; line-height: 1.25; white-space: normal; }
    .btn-sm { min-height: 40px; }
    .form-actions, .student-form-actions, .mind-form-actions, .output-actions, .conference-actions,
    .consultancy-actions, .experience-actions, .management-form-actions {
        align-items: stretch; flex-direction: column; width: 100%;
    }
    .form-actions > *, .student-form-actions > *, .mind-form-actions > *, .output-actions > *,
    .conference-actions > *, .consultancy-actions > *, .experience-actions > *, .management-form-actions > * {
        width: 100%; justify-content: center;
    }
    .table-responsive, .access-matrix-wrap, .app-card:has(> table), .panel:has(> table) {
        margin-inline: -16px; padding-inline: 16px; -webkit-overflow-scrolling: touch;
        max-width: calc(100% + 32px); overflow-x: auto; overscroll-behavior-inline: contain;
    }
    .table { min-width: 680px; font-size: .8rem; }
    .table > :not(caption) > * > * { padding: .8rem .7rem; }
    .table .badge, .status-pill, .status-badge { font-size: .7rem; }
    .access-tabs { align-items: stretch; flex-direction: column; gap: 10px; }
    .access-tabset { display: flex; width: 100%; }
    .access-tab { flex: 1 0 auto; font-size: .78rem; }
    .pagination { max-width: 100%; overflow-x: auto; padding-bottom: 3px; }
    .pagination .page-link { min-width: 40px; height: 40px; font-size: .78rem; }
    .app-alert { align-items: flex-start; font-size: .85rem; line-height: 1.45; }
    .mobile-bottom-nav { height: calc(var(--pbu-mobile-nav-height) + env(safe-area-inset-bottom)); }
    .mobile-bottom-nav a, .mobile-bottom-nav button { min-height: 48px; }
    .mobile-bottom-nav span { font-size: .65rem; }
    .mobile-nav-panel { max-height: min(68vh, 520px); overflow-y: auto; }
    .notification-dropdown { bottom: calc(var(--pbu-mobile-nav-height) + 8px); max-height: calc(100dvh - 150px); }
    .notification-dropdown-body { max-height: calc(100dvh - 230px); }
    .emind-activity-tabs { top: 76px; width: 100%; min-width: 0; gap: 5px; padding: 5px; }
    .emind-activity-tabs button { min-width: 0; min-height: 48px; padding: 10px 8px; }
    .emind-activity-tabs button span { font-size: .75rem; line-height: 1.3; }
    .mind-note-hero { padding: 20px; }
    .mind-note-hero h2 { font-size: clamp(1.45rem, 7vw, 2rem); }
    .mind-note-card p, .mind-note-card li, .mind-exercise-head p,
    .mind-lock-notice span, .mind-question small { font-size: .875rem; line-height: 1.55; }
    .mind-question > span strong { font-size: 1rem; line-height: 1.4; }
    .mind-question textarea { min-height: 120px; font-size: 16px; line-height: 1.5; }
    .mind-question { margin-bottom: 18px; padding-bottom: 18px; }
    .dashboard-middle, .dashboard-bottom, .management-grid, .profile-view-grid, .employment-page-grid,
    .employment-admin-grid, .emind-analysis-grid, .emind-history-grid, .mind-note-grid,
    .espak-student-home, .espak-form-grid, .professional-editor-form, .membership-editor-form,
    .management-role-view, .management-role-form { grid-template-columns: minmax(0, 1fr); }
    .app-page-header, .app-actions { align-items: stretch; flex-direction: column; }
    .app-actions > * { width: 100%; justify-content: center; }
    .settings-inline-form { align-items: stretch; flex-direction: column; }
    .settings-inline-form > * { width: 100%; }
    /* Must follow the mobile .page-wrap shorthand so fixed navigation never covers final content/actions. */
    .page-wrap.app-bottom-safe-area {
        padding-bottom: calc(var(--app-mobile-nav-height) + env(safe-area-inset-bottom) + 40px);
    }
    .responsive-card-table { margin-inline: 0; padding: 0; overflow: visible; background: transparent; border: 0; box-shadow: none; }
    .responsive-card-table .table { display: block; min-width: 0; margin: 0; }
    .responsive-card-table thead { display: none; }
    .responsive-card-table tbody { display: grid; gap: 12px; }
    .responsive-card-table tr { display: grid; gap: 9px; width: 100%; padding: 18px; border: 1px solid var(--pbu-border); border-radius: var(--app-radius); background: #fff; box-shadow: var(--shadow-sm); }
    .responsive-card-table td { display: grid; grid-template-columns: minmax(92px, .75fr) minmax(0, 1.25fr); gap: 12px; align-items: start; padding: 0 !important; border: 0; font-size: .875rem; overflow-wrap: anywhere; }
    .responsive-card-table td::before { content: attr(data-label); color: var(--pbu-muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .035em; }
    .responsive-card-table td:first-child { display: block; padding-bottom: 10px !important; border-bottom: 1px solid var(--pbu-border); }
    .responsive-card-table td:first-child::before { display: none; }
    .responsive-card-table .mobile-row-action { display: flex; width: 100%; margin-top: 10px; justify-content: center; }
    .ips-result-card { padding: 16px; overflow: hidden; }
    .ips-result-card .app-card-header > i { flex: 0 0 auto; }
    .ips-result-table { max-width: 100%; margin-inline: 0; padding-inline: 0; }
    .ips-result-table tr { padding: 15px; }
    .ips-result-table td:first-child {
        display: grid; grid-template-columns: minmax(92px, .75fr) minmax(0, 1.25fr);
    }
    .ips-result-table td:first-child::before { display: block; }
    .ips-result-table .status-pill { width: fit-content; max-width: 100%; white-space: normal; }
    .ips-result-card .alert { margin-top: 16px; overflow-wrap: anywhere; }
}

@media (min-width: 768px) {
    :root { --app-page-padding: 24px; --app-card-padding: 20px; --app-gap: 16px; }
    .app-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .app-mobile-stack { flex-direction: row; }
    body { padding-bottom: 0; }
    .app-bottom-safe-area { padding-bottom: 32px; }
    .mobile-bottom-nav, .mobile-nav-panels { display: none !important; }
    .mobile-row-action { display: none !important; }
}

@media (max-width: 767.98px) {
    .mobile-bottom-nav { display: flex; grid-template-columns: none; }
    .mobile-bottom-nav > a, .mobile-bottom-nav > button { flex: 1 1 0; }
    .topbar-left { flex: 1 1 auto; min-width: 0; }
    .mobile-context-back { display: block; min-width: 0; max-width: min(46vw, 190px); }
    .mobile-context-back:empty { display: none; }
    .mobile-context-back .mobile-context-back-link {
        display: flex;
        align-items: center;
        gap: 7px;
        min-width: 0;
        min-height: 44px;
        padding: 8px 10px;
        border-radius: 10px;
        color: #155eef;
        font-size: .78rem;
        font-weight: 800;
        line-height: 1.15;
    }
    .mobile-context-back .mobile-context-back-link:hover { background: #eef5ff; }
    .mobile-context-back .mobile-context-back-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mobile-context-back .mobile-context-back-link i { flex: 0 0 auto; font-size: 1rem; }
    .espak-back-link.has-mobile-copy { display: none; }
    .topbar-actions { flex: 0 0 auto; }
}

/* Tablet keeps the full content canvas and opens the existing navigation as a drawer. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .mobile-menu { display: grid; }
    .sidebar, .sidebar.is-open {
        display: flex !important;
        inset: auto 12px 12px;
        width: calc(100% - 24px);
        max-height: min(82dvh, 720px);
        animation: none;
    }
    .sidebar {
        transform: translateY(calc(100% + 40px));
    }
    .sidebar.is-open {
        transform: translateY(0);
    }
    .sidebar-backdrop { inset: 0; }
    .sidebar-backdrop.is-open { display: block !important; }
}

@media (min-width: 992px) {
    :root { --app-page-padding: clamp(24px, 2vw, 32px); --app-header-height: 78px; }
    .app-page-title { font-size: clamp(1.7rem, 2.5vw, 2.35rem); }
    .app-bottom-safe-area { padding-bottom: 0; }
}

/* Reusable content typography primitives. Component rules below map legacy e-SPAk/e-MInD markup to these tokens. */
.app-section-title { color: var(--pbu-text); font-weight: 700; line-height: 1.25; }
.app-card-title { color: var(--pbu-text); font-weight: 700; line-height: 1.3; }
.app-body-text, .app-card-description { color: #526176; font-weight: 400; line-height: 1.6; }
.app-instruction { color: #46566d; font-weight: 400; line-height: 1.6; }
.app-meta-text { color: #6b7a90; font-weight: 500; line-height: 1.45; }
.profile-required-note{margin:0 0 14px;color:#607086;font-size:.875rem}.profile-required-note span{color:#c62828;font-weight:800}.profile-validation-summary ul{padding-left:1.25rem}.profile-validation-summary li+li{margin-top:4px}.student-section-form label>small{display:block;margin-top:6px;color:#6b7a90}
.mind-question.has-answer-error{border-color:#dc3545;background:#fff7f7}.mind-answer-error{display:block;margin-top:10px;color:#b42318;font-size:.92rem;font-style:normal;font-weight:600}

/* Desktop reading scale for e-SPAk/e-MInD. Sidebar and compact navigation chrome are intentionally excluded. */
@media (min-width: 1024px) {
    :root {
        --espak-page-title: clamp(1.875rem, 1.45vw + 1rem, 2.125rem);
        --espak-section-title: clamp(1.375rem, .45vw + 1.1rem, 1.5rem);
        --espak-card-title: clamp(1.25rem, .3vw + 1.05rem, 1.375rem);
        --espak-body-text: clamp(1.03125rem, .12vw + 1rem, 1.0625rem);
        --espak-list-text: clamp(1rem, .15vw + .97rem, 1.0625rem);
        --espak-control-text: clamp(1rem, .12vw + .98rem, 1.0625rem);
        --espak-meta-text: clamp(.875rem, .12vw + .84rem, .9375rem);
        --espak-reading-width: 88ch;
        --pbu-card-padding: clamp(24px, 1.45vw, 28px);
    }

    .module-sidebar--generic ~ .main-area .page-title-row h1,
    .module-sidebar--generic ~ .main-area .page-title-row h2,
    .module-sidebar--generic ~ .main-area .app-page-title,
    .module-sidebar--generic ~ .main-area .module-page-heading h1 {
        font-size: var(--espak-page-title);
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: -.025em;
    }
    .module-sidebar--generic ~ .main-area .page-title-row p,
    .module-sidebar--generic ~ .main-area .app-page-subtitle,
    .module-sidebar--generic ~ .main-area .module-page-heading p {
        max-width: 80ch;
        font-size: var(--espak-body-text);
        font-weight: 400;
        line-height: 1.6;
    }
    .module-sidebar--generic ~ .main-area .app-card,
    .module-sidebar--generic ~ .main-area .panel {
        padding: var(--pbu-card-padding);
    }
    .module-sidebar--generic ~ .main-area :where(.app-section-title, .card-heading h2, .page-heading h2) {
        font-size: var(--espak-section-title);
    }
    .module-sidebar--generic ~ .main-area :where(.app-card-header h3, .app-card-header h4, .app-card-header h5, .app-card-title, .mind-note-card h3, .mind-exercise-head h2, .student-section-form h3, .modal-title) {
        font-size: var(--espak-card-title);
        font-weight: 700;
        line-height: 1.3;
    }
    .module-sidebar--generic ~ .main-area :where(.app-body-text, .app-card-description, .app-card > p, .app-card-header p, .mind-note-hero p, .mind-note-card p, .mind-exercise-head p, .mind-lock-notice span, .domain-introduction-content > p, .domain-introduction-content > div p, .alert p, .weekly-activity-card p) {
        max-width: var(--espak-reading-width);
        color: #4f5f75;
        font-size: var(--espak-body-text);
        font-weight: 400;
        line-height: 1.6;
    }
    .module-sidebar--generic ~ .main-area :where(.app-instruction, .mind-instruction-card p, .mind-instruction-card li, .mind-note-card li, .domain-introduction-content li, .mind-question > span strong) {
        color: #46566d;
        font-size: var(--espak-list-text);
        font-weight: 400;
        line-height: 1.6;
    }
    .module-sidebar--generic ~ .main-area :where(.mind-instruction-card ol, .mind-note-card ol, .mind-note-card ul) {
        max-width: var(--espak-reading-width);
        margin-top: 14px;
        margin-bottom: 14px;
        padding-left: 1.35rem;
    }
    .module-sidebar--generic ~ .main-area :where(.mind-instruction-card li, .mind-note-card li) + li { margin-top: 7px; }
    .module-sidebar--generic ~ .main-area :where(.app-meta-text, .mind-instruction-card small, .mind-exercise-head small, .estaf-section-label, .domain-introduction-heading > span, .emind-semester-summary small, .emind-semester-summary span, .app-card small:not(.form-text)) {
        font-size: var(--espak-meta-text);
        line-height: 1.45;
    }
    .module-sidebar--generic ~ .main-area :where(.btn, .btn-pbu, .btn-light-border, .emind-activity-tabs button, .report-period-tab strong, .nav-tabs .nav-link, .estaf-internal-tabs a) {
        font-size: var(--espak-control-text);
        line-height: 1.35;
    }
    .module-sidebar--generic ~ .main-area :where(label, .form-label, .form-card label, .espak-form-grid label) {
        font-size: var(--espak-body-text);
        line-height: 1.45;
    }
    .module-sidebar--generic ~ .main-area :where(.form-control, .form-select, textarea, input, select) {
        font-size: 1rem;
        line-height: 1.45;
    }
    .module-sidebar--generic ~ .main-area :where(.table, .table-modern) { font-size: .96875rem; line-height: 1.5; }
    .module-sidebar--generic ~ .main-area :where(.table th, .table-modern th) { font-size: .9375rem; font-weight: 700; }
    .module-sidebar--generic ~ .main-area .mind-note-hero { padding: 28px; }
    .module-sidebar--generic ~ .main-area .mind-note-hero h2 { font-size: clamp(1.75rem, 1vw + 1.25rem, 2.125rem); }
    .module-sidebar--generic ~ .main-area .mind-note-card,
    .module-sidebar--generic ~ .main-area .mind-exercise-form { padding: clamp(24px, 1.45vw, 28px); }
    .module-sidebar--generic ~ .main-area .mind-guidance-stack { gap: 16px; }
    .module-sidebar--generic ~ .main-area .mind-guidance-stack h3 { margin-bottom: 10px; }
    .module-sidebar--generic ~ .main-area .mind-question { margin-bottom: 20px; padding-bottom: 20px; }
    .module-sidebar--generic ~ .main-area .mind-question textarea { font-size: 1rem; line-height: 1.6; }
    .module-sidebar--generic ~ .main-area .emind-activity-tabs button { min-height: 52px; }
    .module-sidebar--generic ~ .main-area .emind-week-card h3 { font-size: 1.25rem; }
    .module-sidebar--generic ~ .main-area .emind-week-card p { font-size: 1rem; line-height: 1.55; }
    .module-sidebar--generic ~ .main-area .emind-week-card footer { font-size: .9375rem; }
    .module-sidebar--generic ~ .main-area .report-period-tab strong { font-weight: 700; }
    .module-sidebar--generic ~ .main-area .report-period-tab small { font-size: var(--espak-meta-text); }
    .module-sidebar--generic ~ .main-area .modal-body { font-size: var(--espak-body-text); line-height: 1.6; }
    .module-sidebar--generic ~ .main-area .ips-assessment-modal .modal-header p,
    .module-sidebar--generic ~ .main-area .ips-question-page strong { font-size: var(--espak-body-text); line-height: 1.55; }
    .module-sidebar--generic ~ .main-area .ips-options span { font-size: var(--espak-control-text); }
    .module-sidebar--generic ~ .main-area .ips-result-table .table { min-width: 1080px; table-layout: fixed; }
    .module-sidebar--generic ~ .main-area .ips-result-table :is(th, td):nth-child(1) { width: 6%; }
    .module-sidebar--generic ~ .main-area .ips-result-table :is(th, td):nth-child(2) { width: 18%; }
    .module-sidebar--generic ~ .main-area .ips-result-table :is(th, td):nth-child(3) { width: 17%; }
    .module-sidebar--generic ~ .main-area .ips-result-table :is(th, td):nth-child(4) { width: 15%; min-width: 140px; }
    .module-sidebar--generic ~ .main-area .ips-result-table :is(th, td):nth-child(5) { width: 44%; }
    .module-sidebar--generic ~ .main-area .ips-result-table td:nth-child(4) .status-pill {
        padding: .45rem .7rem;
        font-size: .96875rem;
        font-weight: 700;
        line-height: 1.35;
        white-space: nowrap;
    }
}

/* Tablet receives a modest intermediate scale; phone typography remains governed by the existing mobile block. */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .module-sidebar--generic ~ .main-area .page-title-row h1 { font-size: 1.75rem; }
    .module-sidebar--generic ~ .main-area :where(.mind-note-card p, .mind-note-card li, .mind-instruction-card p, .mind-instruction-card li, .mind-note-hero p) {
        font-size: 1rem;
        line-height: 1.58;
    }
    .module-sidebar--generic ~ .main-area :where(.mind-note-card h3, .mind-exercise-head h2, .app-card-header h3) { font-size: 1.2rem; }
}

/* The 1024px desktop boundary has a narrow content canvas beside the sidebar. */
@media (min-width: 992px) and (max-width: 1099.98px) {
    .topbar { padding-inline: 18px; }
    .global-search { width: min(300px, 38vw); }
    .profile-chip span, .profile-chip > i { display: none; }
    .profile-chip { padding-inline: 4px; }
}

.espak-monitoring-chart { position: relative; min-height: 360px; }
.domain-badge { display:inline-flex; width:fit-content; margin-bottom:7px; padding:5px 9px; border-radius:999px; font-size:.58rem; font-weight:850; line-height:1.2; }
.domain-badge-1 { background:#fde7f5; color:#a8197b; }
.domain-badge-2 { background:#ffe7ed; color:#b9174b; }
.domain-badge-3 { background:#fff0d9; color:#bd6500; }
.domain-badge-4 { background:#f5e8fa; color:#92278f; }
.domain-badge-5 { background:#ffe7f0; color:#d62f73; }
.emind-week-card.domain-card-1 { --week:#b52694; --week-soft:#fff1ce; }
.emind-week-card.domain-card-2 { --week:#bd1e50; --week-soft:#fff0f4; }
.emind-week-card.domain-card-3 { --week:#f59e0b; --week-soft:#fff7e6; }
.emind-week-card.domain-card-4 { --week:#a12691; --week-soft:#faf0fb; }
.emind-week-card.domain-card-5 { --week:#e64d89; --week-soft:#fff0f5; }
.emind-tab-panel.domain-theme-1 { --domain:#b52694; --domain-deep:#8f176f; --domain-bg:#f7c900; --domain-soft:#fff5bd; }
.emind-tab-panel.domain-theme-2 { --domain:#bd1e50; --domain-deep:#92143c; --domain-bg:#fff0f4; --domain-soft:#ffe2eb; }
.emind-tab-panel.domain-theme-3 { --domain:#f59e0b; --domain-deep:#c86d00; --domain-bg:#fff2d7; --domain-soft:#ffe5b3; }
.emind-tab-panel.domain-theme-4 { --domain:#a12691; --domain-deep:#78176d; --domain-bg:#f8edfa; --domain-soft:#eed9f2; }
.emind-tab-panel.domain-theme-5 { --domain:#e64d89; --domain-deep:#bd285f; --domain-bg:#fff0f5; --domain-soft:#ffdbe9; }
.emind-tab-panel[class*="domain-theme-"] .mind-note-hero { background:linear-gradient(125deg,var(--domain-bg),var(--domain-soft)); }
.emind-tab-panel[class*="domain-theme-"] .mind-note-hero span { background:var(--domain); }
.emind-tab-panel[class*="domain-theme-"] .mind-note-hero::before { background:var(--domain); }
.emind-tab-panel[class*="domain-theme-"] .mind-note-hero>i { color:var(--domain); }
.emind-tab-panel[class*="domain-theme-"] .mind-note-card { border-top-color:var(--domain); }
.emind-domain-introduction{--intro:#b52694;--intro-bg:#f7c900;display:grid;grid-template-columns:minmax(210px,.34fr) 1fr;padding:0;overflow:hidden;border:0;background:linear-gradient(135deg,var(--intro-bg),color-mix(in srgb,var(--intro-bg) 60%,#fff));color:#252d3a}.domain-introduction-heading{display:flex;flex-direction:column;justify-content:center;padding:34px;background:rgba(255,255,255,.2)}.domain-introduction-heading>span{font-size:.65rem;font-weight:900;letter-spacing:.12em}.domain-introduction-heading>strong{width:fit-content;margin:12px 0;padding:8px 15px;border-radius:10px;background:#fff;font-size:1.7rem}.domain-introduction-heading h2{margin:0;font-size:1.65rem}.domain-introduction-content{padding:32px}.domain-introduction-content>p{font-size:.88rem;line-height:1.75}.domain-introduction-content h3{font-size:.92rem}.domain-introduction-content ul{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0;padding:0;list-style:none}.domain-introduction-content li{display:flex;gap:8px;align-items:flex-start;padding:11px;border-radius:12px;background:rgba(255,255,255,.62);font-size:.75rem;line-height:1.45}.domain-introduction-content li i{color:var(--intro);font-size:1rem}.domain-introduction-content>div{display:flex;gap:12px;align-items:center;margin-top:18px;padding:14px 16px;border-left:4px solid var(--intro);border-radius:12px;background:#fff}.domain-introduction-content>div>i{color:var(--intro);font-size:1.5rem}.domain-introduction-content>div p{margin:0;font-size:.75rem}.domain-introduction-content>div strong{display:block;margin-bottom:3px}.domain-introduction-2{--intro:#bd1e50;--intro-bg:#ffe2eb}.domain-introduction-3{--intro:#c86d00;--intro-bg:#ffd79a}.domain-introduction-4{--intro:#92278f;--intro-bg:#eed9f2}.domain-introduction-5{--intro:#d62f73;--intro-bg:#ffdbe9}
.ips-assessment-modal .modal-dialog{height:calc(100dvh - 32px);margin-top:16px;margin-bottom:16px}.ips-assessment-modal .modal-content{height:100%;max-height:100%;border:0;border-radius:22px;overflow:hidden}.ips-assessment-modal .mind-exercise-form{display:flex;flex-direction:column;min-height:0;height:100%;margin:0;padding:0}.ips-assessment-modal .modal-header{flex:none;padding:22px 26px;background:linear-gradient(135deg,#fff3a4,#fff);border-bottom:3px solid #b52694}.ips-assessment-modal .modal-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:24px 26px}.ips-assessment-modal .modal-footer{flex:none;z-index:2;padding:14px 24px;background:#fff;box-shadow:0 -8px 20px rgba(16,37,75,.08)}.ips-progress{position:sticky;top:-24px;z-index:2;display:grid;gap:8px;margin:0 -4px 20px;padding:10px 4px;background:#fff;font-weight:800}.ips-progress .progress{height:8px}.ips-progress .progress-bar{background:#b52694}.ips-question-page{padding:18px;border:1px solid #e3e9f2;border-radius:16px;margin-bottom:14px;background:#fff}.ips-options{display:flex;gap:12px;margin-top:14px}.ips-options label{flex:1;cursor:pointer}.ips-options input{position:absolute;opacity:0}.ips-options span{display:flex;align-items:center;justify-content:center;min-height:48px;border:1px solid #b8c6da;border-radius:12px;font-weight:800}.ips-options input:checked+span{background:#b52694;color:#fff;border-color:#b52694}.ips-modal-navigation{flex-wrap:wrap}.ips-modal-navigation [data-ips-submit]:disabled{display:inline-flex!important;opacity:.48}.ips-result-card{border-top:5px solid #b52694}.ips-result-card>.app-card-header>i{font-size:1.5rem;color:#b52694}.mind-instruction-card{display:flex;align-items:center;justify-content:space-between;gap:22px}.mind-instruction-card>div{min-width:0}.mind-instruction-card ol{margin:10px 0 14px;padding-left:20px;color:#57667b;font-size:.75rem;line-height:1.65}.mind-instruction-link{display:flex;flex:none;align-items:center;gap:8px;min-height:48px;white-space:nowrap}

/* e-Staf organisation list filters */
.estaf-org-list-heading{margin-bottom:14px}.estaf-org-list-heading p{font-size:.88rem}.estaf-org-filter{display:grid;grid-template-columns:minmax(240px,1.5fr) minmax(150px,.7fr) minmax(240px,1.35fr) minmax(150px,.7fr) auto;gap:12px;align-items:end;margin-bottom:20px;padding:16px;border:1px solid #e7e0f5;border-radius:14px;background:#fbfaff}.estaf-org-filter label{display:grid;gap:7px;min-width:0;color:#382064;font-size:.78rem;font-weight:800}.estaf-org-filter .form-control,.estaf-org-filter .form-select{width:100%;min-width:0;height:46px}.estaf-org-filter-actions{display:flex;gap:8px;align-items:center}.estaf-org-filter-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:90px;height:46px;white-space:nowrap}
@media(max-width:1199.98px){.estaf-org-filter{grid-template-columns:repeat(2,minmax(0,1fr))}.estaf-org-filter-actions{grid-column:1/-1;justify-content:flex-end}}
@media(max-width:767.98px){.estaf-org-filter{grid-template-columns:minmax(0,1fr);padding:14px}.estaf-org-filter-actions{grid-column:auto}.estaf-org-filter-actions .btn{flex:1}}
.mind-guidance-stack{display:grid;gap:16px;margin-top:16px}.mind-guidance-stack .mind-note-card{display:grid;grid-template-columns:52px minmax(0,1fr);gap:18px;align-items:start;margin:0}.mind-guidance-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:linear-gradient(135deg,#f2e8ff,#fff3c4);color:#7c2bd1;font-size:1.35rem}.mind-guidance-stack h3{margin:2px 0 8px}.mind-guidance-stack p{margin-bottom:0}.mind-primary-action{display:flex;width:min(100%,420px);min-height:58px;margin:4px auto 0;align-items:center;justify-content:center;gap:10px;border:0;background:linear-gradient(135deg,#6d28d9 0%,#b52694 100%);box-shadow:0 12px 28px rgba(139,40,173,.3);font-size:.9rem;font-weight:850}.mind-primary-action:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(139,40,173,.38)}.mind-activity-complete{display:flex;width:min(100%,420px);min-height:56px;margin:4px auto 0;align-items:center;justify-content:center;gap:9px;border:1px solid #b9ead0;border-radius:13px;background:#eaf9f1;color:#17724a;font-weight:800}
.ips-pa-analysis table{min-width:900px}.ips-pa-analysis th:last-child{width:52%}.ips-pa-analysis td:last-child{color:#526176;line-height:1.5;white-space:normal}
.career-holland-code{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:18px 0;padding:18px 22px;border-radius:15px;background:linear-gradient(135deg,#5b21b6,#b52694);color:#fff}.career-holland-code span{font-weight:700}.career-holland-code strong{font-size:2rem;letter-spacing:.18em}.career-result-table table{min-width:980px}.career-result-table th:nth-child(1){width:10%}.career-result-table th:nth-child(3){width:8%}.career-result-table th:nth-child(4){width:17%}.career-result-table td:last-child{line-height:1.55}
@media (max-width: 767.98px) { .espak-monitoring-chart { min-height: 420px; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.weekly-experience-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--app-gap,20px)}.weekly-activity-card{display:flex;flex-direction:column;gap:16px;min-width:0}.weekly-activity-card>div{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}.weekly-card-icon{font-size:2rem;color:#1764e8}.weekly-activity-card .btn-pbu{min-height:48px;margin-top:auto;align-self:flex-start}.weekly-status-card{margin-top:20px}.weekly-status-card>div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid #e5eaf1}.weekly-empty{justify-content:center;align-items:center;text-align:center;color:#64748b}
@media(max-width:767.98px){.weekly-experience-grid{grid-template-columns:minmax(0,1fr)}.weekly-activity-card{padding:18px}.weekly-activity-card .btn-pbu{width:100%;justify-content:center;min-height:48px}.mind-exercise-form input,.mind-exercise-form textarea,.mind-exercise-form select{font-size:16px}.mind-question{width:100%;overflow-wrap:anywhere}}
@media(max-width:767.98px){.ips-assessment-modal .modal-dialog{height:100dvh;margin:0}.ips-assessment-modal .modal-content{border-radius:0}.ips-assessment-modal .modal-header,.ips-assessment-modal .modal-body{padding-left:16px;padding-right:16px}.ips-assessment-modal .modal-footer{display:grid;grid-template-columns:1fr 1fr;padding:10px 12px calc(10px + env(safe-area-inset-bottom))}.ips-modal-navigation .btn,.ips-modal-navigation .btn-pbu{width:100%;min-height:48px;justify-content:center}.ips-options{gap:8px}.mind-instruction-card{align-items:stretch;flex-direction:column}.mind-instruction-link{width:100%;justify-content:space-between}}
@media(max-width:767.98px){.mind-guidance-stack .mind-note-card{grid-template-columns:42px minmax(0,1fr);gap:12px;padding:18px}.mind-guidance-icon{width:42px;height:42px;border-radius:12px;font-size:1.1rem}.mind-guidance-stack .mind-instruction-card ol{padding-left:18px;font-size:.875rem;line-height:1.55}.mind-primary-action,.mind-activity-complete{width:100%;min-height:56px}}
@media(max-width:767.98px){.career-holland-code{align-items:flex-start;flex-direction:column;padding:16px}.career-holland-code strong{font-size:1.65rem}.career-result-table table{min-width:0}}
@media(max-width:767.98px){.emind-domain-introduction{grid-template-columns:1fr}.domain-introduction-heading,.domain-introduction-content{padding:22px}.domain-introduction-heading>strong{font-size:1.35rem}.domain-introduction-heading h2{font-size:1.3rem}.domain-introduction-content ul{grid-template-columns:1fr}.self-concept-map{grid-template-columns:1fr}.self-concept-map b{order:-1}}
.espak-current-context{display:grid;gap:2px;margin-top:10px;padding:10px 12px;border:1px solid rgba(255,255,255,.14);border-radius:11px;background:rgba(255,255,255,.07)}.espak-current-context small{color:#bfcce2;font-size:.58rem;font-weight:800;letter-spacing:.08em}.espak-current-context strong{color:#fff;font-size:.78rem}.espak-current-context span,.espak-current-context em{color:#f8c84e;font-size:.68rem;font-style:normal}.espak-current-context em{overflow:hidden;color:#d8e2f1;text-overflow:ellipsis;white-space:nowrap}.espak-context-switcher{position:relative;margin-top:8px}.espak-context-switcher>summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:8px 11px;border-radius:9px;color:#fff;background:rgba(255,255,255,.08);cursor:pointer;font-size:.72rem;font-weight:700;list-style:none}.espak-context-switcher>summary::-webkit-details-marker{display:none}.espak-context-switcher>div{display:grid;gap:4px;padding-top:6px}.espak-context-switcher form{margin:0}.espak-context-switcher button{display:flex;align-items:center;gap:9px;width:100%;min-height:44px;padding:8px 10px;border:0;border-radius:9px;background:rgba(255,255,255,.06);color:#fff;text-align:left}.espak-context-switcher button:disabled{opacity:1;background:rgba(248,184,20,.14);color:#ffd45e}.espak-context-switcher button span,.espak-context-switcher button strong,.espak-context-switcher button small{display:block}.espak-context-switcher button small{margin-top:2px;color:#ccd8e9;font-size:.62rem}.espak-context-nav .sidebar-group-toggle{font-weight:700}.espak-context-nav .sidebar-group-toggle.is-active{background:rgba(255,255,255,.09);box-shadow:none;color:#fff}.espak-context-nav .sidebar-submenu a.is-active{border-left:3px solid #f8b814;background:rgba(248,184,20,.1);color:#ffd45e}.espak-action-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.espak-action-grid a{display:flex;min-height:92px;padding:15px;border:1px solid #e2e8f0;border-radius:12px;flex-direction:column;justify-content:space-between;color:#10254b;background:#f8fbff}.espak-action-grid span{color:#155eef;font-size:.75rem;font-weight:750}@media(max-width:767.98px){.espak-action-grid{grid-template-columns:1fr}.espak-current-context{padding:12px}.espak-context-switcher>summary,.espak-context-switcher button{min-height:48px}}
.module-sidebar--generic~.main-area .emind-semester-summary{position:relative;border-color:rgba(18,59,102,.4);background:linear-gradient(105deg,#123b66 0%,#176b78 58%,#0f4658 100%);box-shadow:0 14px 32px rgba(15,70,88,.18);color:#fff}.module-sidebar--generic~.main-area .emind-semester-summary:after{content:"";position:absolute;right:-50px;bottom:-90px;width:210px;height:210px;border:1px solid rgba(255,255,255,.08);border-radius:50%;box-shadow:0 0 0 35px rgba(255,255,255,.025);pointer-events:none}.module-sidebar--generic~.main-area .emind-semester-summary>div{position:relative;z-index:1;border-right-color:rgba(255,255,255,.18)}.module-sidebar--generic~.main-area .emind-semester-summary small{color:#9ef1e5}.module-sidebar--generic~.main-area .emind-semester-summary strong{color:#fff}.module-sidebar--generic~.main-area .emind-semester-summary span{color:#d8edf0}@media(max-width:900px){.module-sidebar--generic~.main-area .emind-semester-summary>div{border-bottom-color:rgba(255,255,255,.18)}}@media(max-width:550px){.module-sidebar--generic~.main-area .emind-semester-summary>div{border-right:0}}
.estaf-org-tree{display:grid;gap:12px}.org-tree-node{overflow:hidden}.org-tree-node>summary{cursor:pointer;list-style:none}.org-tree-node>summary::-webkit-details-marker{display:none}.org-tree-node>summary small{margin-left:8px;color:#64748b;font-weight:500}@media(max-width:767.98px){.org-tree-node{padding:14px!important}.org-tree-node .ms-md-4{margin-left:10px!important}.org-tree-node>summary{display:grid;gap:3px}.org-tree-node>summary small{margin-left:0}}

/* Dynamic e-Staf organisation chart */
.estaf-org-chart-title{align-items:flex-end}.estaf-org-chart-title .btn-pbu{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}.estaf-org-chart-shell{--org-line:#8497b5;--org-accent:#7748de;position:relative;width:100%;max-width:1580px;margin:0 auto 26px;padding:0 20px 28px;border:1px solid #dce5ef;border-radius:22px;background:linear-gradient(180deg,#f8fbf2 0,#eaf8fa 17%,#f5f7fc 45%,#fff9e5 100%);box-shadow:0 16px 40px rgba(35,52,83,.09);overflow:hidden}.estaf-org-chart-banner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;margin:0 -20px 26px;padding:22px 26px;border-bottom:1px solid rgba(64,93,131,.14);background:rgba(255,255,255,.72);backdrop-filter:blur(8px)}.estaf-org-chart-mark{display:grid;width:54px;height:54px;place-items:center;border-radius:15px;background:linear-gradient(145deg,#7140d5,#9362ef);box-shadow:0 9px 20px rgba(113,64,213,.22);color:#fff;font-size:1.45rem}.estaf-org-chart-banner span{color:#e93442;font-size:.65rem;font-weight:900;letter-spacing:.16em}.estaf-org-chart-banner h2{margin:2px 0 4px;color:#3c67b0;font-size:1.65rem;text-transform:uppercase}.estaf-org-chart-banner p{margin:0;color:#64748b;font-size:.72rem}.estaf-org-chart-legend{display:flex;flex-direction:column;gap:7px;padding:10px 12px;border:1px solid #dde6ef;border-radius:11px;background:#fff}.estaf-org-chart-legend span{display:flex;align-items:center;gap:7px;color:#526178;font-size:.61rem;letter-spacing:0}.estaf-org-chart-legend i{width:9px;height:9px;border-radius:50%}.estaf-org-chart-legend .waran{background:#ea3e55}.estaf-org-chart-legend .dalaman{background:#2a86c8}.estaf-org-card{--card-accent:#347fc4;position:relative;display:grid;grid-template-columns:66px minmax(0,1fr);min-width:0;min-height:118px;border:1px solid #d9e2ed;border-radius:15px;background:rgba(255,255,255,.96);box-shadow:0 8px 22px rgba(38,57,88,.08);overflow:hidden}.estaf-org-card-accent{position:absolute;inset:0 auto 0 0;width:4px;background:var(--card-accent)}.estaf-org-card>img{width:66px;height:100%;min-height:118px;object-fit:cover;background:#eaf0f8}.estaf-org-card-copy{display:flex;min-width:0;padding:11px 12px 10px;flex-direction:column}.estaf-org-card-meta{display:flex;align-items:center;justify-content:space-between;gap:7px}.estaf-org-card-meta span{color:var(--card-accent);font-size:.54rem;font-weight:900;letter-spacing:.07em}.estaf-org-card-meta em{padding:3px 6px;border-radius:999px;background:#eef5fc;color:#58708d;font-size:.47rem;font-style:normal;font-weight:800;white-space:nowrap}.estaf-org-card h3{margin:8px 0 6px;color:#263750;font-size:.68rem;line-height:1.35}.estaf-org-card strong{color:#102a50;font-size:.7rem;line-height:1.35;text-transform:uppercase}.estaf-org-card small{margin-top:4px;color:#738196;font-size:.55rem}.estaf-org-card.is-director{--card-accent:#e93442;width:min(390px,100%);grid-template-columns:94px 1fr;min-height:145px;border-width:2px;box-shadow:0 13px 30px rgba(233,52,66,.13)}.estaf-org-card.is-director>img{width:94px;min-height:145px}.estaf-org-card.is-director h3{font-size:.83rem}.estaf-org-card.is-director strong{font-size:.83rem}.estaf-org-card.is-executive{--card-accent:#d59a22}.estaf-org-card.is-deputy{--card-accent:#7449cf;width:min(390px,100%);min-height:130px;grid-template-columns:80px 1fr;border-width:2px}.estaf-org-card.is-deputy>img{width:80px;min-height:130px}.estaf-org-card.is-vacant{filter:saturate(.65)}.estaf-org-card.is-vacant strong{color:#a16207;font-style:italic}.estaf-org-root-stage{position:relative;display:flex;justify-content:center;padding-bottom:44px}.estaf-org-root-stage:after{content:"";position:absolute;left:50%;bottom:0;width:2px;height:44px;background:var(--org-line)}.estaf-org-executive-stage{position:relative;display:grid;grid-template-columns:repeat(3,minmax(190px,1fr));gap:14px;max-width:980px;margin:0 auto 42px;padding-top:23px}.estaf-org-executive-stage:before{content:"";position:absolute;left:16.66%;right:16.66%;top:0;height:2px;background:var(--org-line)}.estaf-org-executive-stage>.estaf-org-card:before{content:"";position:absolute;left:50%;top:-24px;width:2px;height:24px;background:var(--org-line);z-index:-1}.estaf-org-branches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start}.estaf-org-branch{--branch:#327fc1;position:relative;min-width:0;padding:0 14px 18px;border:1px solid color-mix(in srgb,var(--branch) 20%,#dce5ee);border-radius:19px;background:rgba(255,255,255,.58)}.estaf-org-branch.is-support{--branch:#df5360}.estaf-org-branch-head{position:relative;display:flex;justify-content:center;margin:-20px auto 16px}.estaf-org-branch-head:after{content:"";position:absolute;left:50%;bottom:-17px;width:2px;height:17px;background:var(--branch)}.estaf-org-branch-label{display:flex;align-items:center;gap:8px;margin:0 -14px 15px;padding:11px 15px;background:color-mix(in srgb,var(--branch) 10%,#fff);color:#273c58}.estaf-org-branch-label>i{color:var(--branch)}.estaf-org-branch-label span{font-size:.7rem;font-weight:850}.estaf-org-branch-label small{margin-left:auto;color:#6d7c90;font-size:.57rem}.estaf-org-children{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.estaf-org-children:before{content:"";position:absolute;left:8px;right:8px;top:-8px;height:2px;background:color-mix(in srgb,var(--branch) 65%,transparent)}.estaf-org-children>.estaf-org-card{--card-accent:var(--branch)}
@media(max-width:1280px){.estaf-org-card{grid-template-columns:58px 1fr}.estaf-org-card>img{width:58px}.estaf-org-card-meta em{display:none}.estaf-org-branches{gap:15px}.estaf-org-branch{padding-right:10px;padding-left:10px}.estaf-org-branch-label{margin-right:-10px;margin-left:-10px}}
@media(max-width:1050px){.estaf-org-branches{grid-template-columns:1fr;gap:45px}.estaf-org-children{grid-template-columns:repeat(3,minmax(0,1fr))}.estaf-org-executive-stage{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:780px){.estaf-org-chart-shell{padding-right:14px;padding-left:14px}.estaf-org-chart-banner{grid-template-columns:auto 1fr;margin-right:-14px;margin-left:-14px;padding:18px}.estaf-org-chart-legend{display:none}.estaf-org-chart-banner h2{font-size:1.25rem}.estaf-org-executive-stage{grid-template-columns:1fr;max-width:430px;padding-top:0}.estaf-org-executive-stage:before,.estaf-org-executive-stage>.estaf-org-card:before{display:none}.estaf-org-children{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.estaf-org-chart-title{align-items:flex-start}.estaf-org-chart-title .btn-pbu{width:100%;justify-content:center}.estaf-org-chart-banner{grid-template-columns:1fr;text-align:center}.estaf-org-chart-mark{margin:auto}.estaf-org-chart-banner h2{font-size:1.05rem}.estaf-org-children{grid-template-columns:1fr}.estaf-org-card{grid-template-columns:62px 1fr}.estaf-org-card>img{width:62px}.estaf-org-card-meta em{display:inline-flex}.estaf-org-card.is-director,.estaf-org-card.is-deputy{grid-template-columns:76px 1fr}.estaf-org-card.is-director>img,.estaf-org-card.is-deputy>img{width:76px}.estaf-org-branch{padding-bottom:12px}}

@media(min-width:1051px){.estaf-org-branches{position:relative;padding-top:30px}.estaf-org-branches:before{content:"";position:absolute;left:25%;right:25%;top:0;height:2px;background:var(--org-line)}.estaf-org-branch:before{content:"";position:absolute;left:50%;top:-31px;width:2px;height:31px;background:var(--org-line)}}

/* Carta organisasi: tonjolkan Pengarah dan kekalkan Timbalan Pengarah sebagai aras kedua. */
.estaf-org-card.is-director{--card-accent:#6554db;border-color:#cbc9f4;background:linear-gradient(135deg,rgba(235,246,255,.98) 0%,rgba(243,240,255,.98) 52%,rgba(252,244,255,.98) 100%);box-shadow:0 14px 34px rgba(79,70,190,.18)}
.estaf-org-card.is-director .estaf-org-card-accent{background:linear-gradient(180deg,#278ce8 0%,#6f52df 56%,#a552d2 100%)}
.estaf-org-card.is-director>img{background:linear-gradient(145deg,#e2efff,#eee8ff)}
.estaf-org-card.is-director h3{color:#44399d}
@media(min-width:1051px){
 .estaf-org-leadership-stage{position:relative;min-height:244px}
 .estaf-org-root-stage{height:100%;padding-bottom:99px}
 .estaf-org-root-stage:after{height:99px}
 .estaf-org-executive-stage{position:absolute;inset:0;display:block;max-width:none;margin:0;padding:0;pointer-events:none}
 .estaf-org-executive-stage:before{display:none}
 .estaf-org-executive-stage>.estaf-org-card{position:absolute;width:min(310px,22vw);min-height:104px;pointer-events:auto}
 .estaf-org-executive-stage>.estaf-org-card>img{min-height:104px}
 .estaf-org-executive-stage>.estaf-org-card:nth-child(1){left:1.5%;top:17px}
 .estaf-org-executive-stage>.estaf-org-card:nth-child(2){right:1.5%;top:0}
 .estaf-org-executive-stage>.estaf-org-card:nth-child(3){right:1.5%;top:120px}
 .estaf-org-executive-stage>.estaf-org-card:before{content:"";position:absolute;top:50%;height:2px;width:clamp(18px,4vw,62px);background:var(--org-line);z-index:-1}
 .estaf-org-executive-stage>.estaf-org-card:nth-child(1):before{left:100%}
 .estaf-org-executive-stage>.estaf-org-card:nth-child(n+2):before{right:100%;left:auto}
}

/* Pengarah berada lebih tinggi; anak panah menunjukkan jawatan sisi sebagai cabang. */
@media(min-width:1051px){
 .estaf-org-card.is-director{top:-22px}
 .estaf-org-executive-stage>.estaf-org-card:nth-child(1){top:36px}
 .estaf-org-executive-stage>.estaf-org-card:nth-child(2){top:24px}
 .estaf-org-executive-stage>.estaf-org-card:nth-child(3){top:144px}
 .estaf-org-executive-stage>.estaf-org-card:after{content:"";position:absolute;top:calc(50% - 6px);width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;z-index:2}
 .estaf-org-executive-stage>.estaf-org-card:nth-child(1):after{right:-1px;border-right:9px solid var(--org-line)}
 .estaf-org-executive-stage>.estaf-org-card:nth-child(n+2):after{left:-1px;border-left:9px solid var(--org-line)}
}

/* Jarak akhir carta: semua connector kelihatan dan bertemu tanpa jurang. */
@media(min-width:1051px){
 .estaf-org-leadership-stage{min-height:310px}
 .estaf-org-root-stage{padding-bottom:155px}
 .estaf-org-root-stage:after{height:155px}
 .estaf-org-card.is-director{top:-44px}
 .estaf-org-executive-stage>.estaf-org-card{overflow:visible}
 .estaf-org-executive-stage>.estaf-org-card>img{border-radius:14px 0 0 14px}
 .estaf-org-executive-stage>.estaf-org-card .estaf-org-card-accent{border-radius:14px 0 0 14px}
 .estaf-org-executive-stage>.estaf-org-card:nth-child(1){top:48px}
 .estaf-org-executive-stage>.estaf-org-card:nth-child(2){top:32px}
 .estaf-org-executive-stage>.estaf-org-card:nth-child(3){top:158px}
 .estaf-org-executive-stage>.estaf-org-card:before{width:clamp(72px,7vw,116px)}
 .estaf-org-executive-stage>.estaf-org-card:nth-child(1):after{right:-9px}
 .estaf-org-executive-stage>.estaf-org-card:nth-child(n+2):after{left:-9px}
}

/* Current-role cards: label stays white; role name follows each sidebar accent. */
.espak-current-context{gap:4px}
.espak-current-context small{color:#fff}
.espak-current-context strong{color:#ffd65a}
.module-sidebar--generic .espak-current-context strong,.module-sidebar--project .espak-current-context strong,.ecemerlang-theme .espak-current-context strong{color:#ffd65a}

/* Compact e-Staf active-role switcher */
.estaf-role-context-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-items:stretch;margin-top:10px}.estaf-role-context-row.has-role-switcher{grid-template-columns:minmax(0,1fr) 44px}.estaf-role-context-row>.espak-current-context{min-width:0;margin-top:0}.estaf-role-switcher{--role-menu-bg:#32196a;position:relative;z-index:20}.module-role-switcher--espak,.module-role-switcher--project{--role-menu-bg:#123f78}.module-role-switcher--ecemerlang{--role-menu-bg:#123a73}.estaf-role-switcher>summary{display:grid;width:44px;height:100%;min-height:70px;place-items:center;border:1px solid rgba(255,255,255,.15);border-radius:11px;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;list-style:none;transition:background .18s ease,transform .18s ease}.estaf-role-switcher>summary::-webkit-details-marker{display:none}.estaf-role-switcher>summary:hover,.estaf-role-switcher[open]>summary{background:rgba(255,214,90,.18);color:#ffd65a}.estaf-role-switcher>summary:active{transform:scale(.97)}.estaf-role-switcher>summary i{font-size:1.05rem}.estaf-role-switcher-menu{position:absolute;right:0;top:calc(100% + 8px);width:245px;padding:8px;border:1px solid rgba(255,255,255,.15);border-radius:13px;background:var(--role-menu-bg);box-shadow:0 18px 38px rgba(20,9,48,.34)}.estaf-role-switcher-menu:before{content:"";position:absolute;right:13px;top:-6px;width:12px;height:12px;border-top:1px solid rgba(255,255,255,.15);border-left:1px solid rgba(255,255,255,.15);background:var(--role-menu-bg);transform:rotate(45deg)}.estaf-role-switcher-menu header{display:grid;gap:2px;padding:7px 9px 9px;border-bottom:1px solid rgba(255,255,255,.12)}.estaf-role-switcher-menu header strong{color:#fff;font-size:.72rem}.estaf-role-switcher-menu header small{color:#cbbde5;font-size:.6rem}.estaf-role-switcher-menu form{margin:4px 0 0}.estaf-role-switcher-menu button{display:grid;grid-template-columns:20px 1fr;align-items:center;gap:8px;width:100%;padding:9px;border:0;border-radius:9px;background:transparent;color:#fff;text-align:left}.estaf-role-switcher-menu button:hover{background:rgba(255,255,255,.09)}.estaf-role-switcher-menu button:disabled{opacity:1;background:rgba(255,214,90,.14);color:#ffd65a}.estaf-role-switcher-menu button>i{font-size:.85rem}.estaf-role-switcher-menu button span,.estaf-role-switcher-menu button strong,.estaf-role-switcher-menu button small{display:block}.estaf-role-switcher-menu button strong{font-size:.7rem}.estaf-role-switcher-menu button small{margin-top:2px;color:#cbbde5;font-size:.6rem}

/* Keep the current-role controls short and close to the module identity. */
.estaf-role-context-row{gap:6px;margin-top:7px}
.estaf-role-context-row.has-role-switcher{grid-template-columns:minmax(0,1fr) 42px}
.estaf-role-context-row>.espak-current-context{min-height:56px;padding:7px 11px;align-content:center}
.estaf-role-switcher>summary{width:42px;min-height:56px;border-radius:10px}

/* e-COT follows the compact e-Staf sidebar pattern with turquoise contrast. */
.module-sidebar--ecot .espak-current-context{border-color:rgba(96,224,217,.34);background:linear-gradient(135deg,rgba(32,178,170,.2),rgba(255,255,255,.07))}
.module-sidebar--ecot .espak-current-context small{color:#bff7f4}
.module-sidebar--ecot .espak-current-context strong,.module-sidebar--ecot .espak-current-context span{color:#65ddd7}
.module-sidebar--ecot .ecot-role-switcher{--role-menu-bg:#29134f}
.module-sidebar--ecot .ecot-role-switcher>summary{border-color:rgba(96,224,217,.3);background:rgba(32,178,170,.12)}
.module-sidebar--ecot .ecot-role-switcher>summary:hover,.module-sidebar--ecot .ecot-role-switcher[open]>summary{background:rgba(32,178,170,.28);color:#75e5df}
.module-sidebar--ecot .ecot-role-switcher .estaf-role-switcher-menu{border-color:rgba(96,224,217,.3)}
.module-sidebar--ecot .ecot-role-switcher .estaf-role-switcher-menu:before{border-color:rgba(96,224,217,.3)}
.module-sidebar--ecot .ecot-role-switcher .estaf-role-switcher-menu header small,.module-sidebar--ecot .ecot-role-switcher .estaf-role-switcher-menu button small{color:#bde9e6}
.module-sidebar--ecot .ecot-role-switcher .estaf-role-switcher-menu button:hover{background:rgba(32,178,170,.15)}
.module-sidebar--ecot .ecot-role-switcher .estaf-role-switcher-menu button:disabled{background:rgba(32,178,170,.22);color:#72e2dc}

/* Shared header utilities remain available after removing sidebar duplicates. */
#appShell .topbar .topbar-actions .topbar-help{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.notification-list-link{display:block;padding:12px 16px;border-top:1px solid #e8edf4;color:#4c3290;font-size:.8rem;font-weight:600;text-align:center;text-decoration:none}
.notification-list-link:hover{background:#f5f2fb}
#sidebar .sidebar-nav::after{content:"";display:block;height:var(--sidebar-focus-space,0px);pointer-events:none}