body {
    background: var(--ocp-bg);
    color: var(--ocp-text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.navbar {
    backdrop-filter: blur(16px);
}

.navbar-brand {
    letter-spacing: -0.03em;
}

.nav-link {
    color: var(--ocp-muted);
    font-weight: 650;
}

.nav-link:hover,
.nav-link:focus {
    color: var(--ocp-primary);
}

.btn-primary {
    background: var(--ocp-primary);
    border-color: var(--ocp-primary);
}

.eyebrow {
    display: inline-flex;
    color: var(--ocp-primary);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-bottom: 12px;
}

.home-hero {
    padding: 92px 0 64px;
    background:
        radial-gradient(circle at 90% 20%, rgba(37, 99, 235, 0.13), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,0));
}

.home-hero h1,
.page-hero h1,
.section-heading h2,
.admin-panel h1 {
    font-weight: 850;
    letter-spacing: -0.045em;
}

.home-hero h1 {
    font-size: clamp(2.6rem, 5vw, 4.8rem);
    line-height: 1.02;
}

.home-hero p,
.page-hero .lead,
.section-heading p {
    color: var(--ocp-muted);
    font-size: 1.12rem;
    max-width: 720px;
}

.page-hero {
    padding: 70px 0 36px;
}

.network-card,
.content-card,
.feature-card,
.admin-panel,
.admin-sidebar,
.auth-card {
    background: var(--ocp-surface);
    border: 1px solid var(--ocp-border);
    border-radius: 22px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.07);
}

.network-card {
    padding: 28px;
}

.network-card-top {
    width: 120px;
    height: 12px;
    background: var(--ocp-primary);
    border-radius: 999px;
    margin-bottom: 24px;
}

.status-row {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 0;
    border-top: 1px solid var(--ocp-border);
    color: var(--ocp-muted);
}

.status-row strong {
    color: var(--ocp-primary);
}

.section-heading {
    max-width: 780px;
    margin-bottom: 28px;
}

.content-card,
.auth-card {
    padding: 30px;
}

.feature-card {
    padding: 24px;
    height: 100%;
}

.feature-card h5,
.rich-content h2,
.rich-content h3 {
    font-weight: 800;
    letter-spacing: -0.025em;
}

.feature-card p,
.rich-content p,
.rich-content li {
    color: var(--ocp-muted);
}

.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.grid-cards > div,
.callout-box {
    border: 1px solid var(--ocp-border);
    border-radius: 18px;
    padding: 20px;
    background: rgba(248, 250, 252, .72);
}

.callout-box {
    margin-top: 18px;
}

.auth-card {
    max-width: 460px;
    margin: 60px auto;
}

.admin-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
    padding: 40px 0;
}

.admin-sidebar {
    padding: 18px;
    height: fit-content;
    position: sticky;
    top: 88px;
}

.admin-sidebar a {
    display: block;
    color: var(--ocp-muted);
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 12px;
    font-weight: 700;
}

.admin-sidebar a:hover,
.admin-sidebar a.active {
    background: rgba(37, 99, 235, .08);
    color: var(--ocp-primary);
}

.admin-panel {
    padding: 28px;
}

.admin-heading {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 22px;
}

.admin-heading p {
    color: var(--ocp-muted);
    margin-bottom: 0;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    border: 1px solid var(--ocp-border);
    border-radius: 18px;
    padding: 18px;
    background: rgba(248, 250, 252, .75);
}

.stat-card span {
    color: var(--ocp-muted);
    font-size: .9rem;
    font-weight: 700;
}

.stat-card strong {
    display: block;
    font-size: 2rem;
    letter-spacing: -.05em;
}

.theme-editor {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
}

.theme-control {
    border: 1px solid var(--ocp-border);
    border-radius: 16px;
    padding: 16px;
    background: rgba(248, 250, 252, .7);
}

.theme-control code {
    display: block;
    margin-top: 8px;
    color: var(--ocp-muted);
}

.form-label {
    font-weight: 750;
}

.site-footer {
    margin-top: 60px;
    padding: 28px 0;
    border-top: 1px solid var(--ocp-border);
    background: var(--ocp-surface);
    color: var(--ocp-muted);
}

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

    .admin-sidebar {
        position: static;
    }
}


.news-card,
.dept-card,
.staff-card {
    background: var(--ocp-surface);
    border: 1px solid var(--ocp-border);
    border-radius: 22px;
    padding: 24px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.timeline-list {
    display: grid;
    gap: 18px;
}

.news-card h3,
.dept-card h3,
.staff-card h3 {
    font-weight: 850;
    letter-spacing: -.035em;
    margin: 12px 0 8px;
}

.pill {
    display: inline-flex;
    border-radius: 999px;
    padding: 6px 10px;
    background: rgba(37, 99, 235, .09);
    color: var(--ocp-primary);
    font-weight: 800;
    font-size: .78rem;
    margin-right: 10px;
}

.date-text,
.dept-card small,
.staff-card span {
    color: var(--ocp-muted);
    font-weight: 650;
}

.staff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

.avatar-dot {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: rgba(37, 99, 235, .1);
    color: var(--ocp-primary);
    font-weight: 900;
    font-size: 1.3rem;
    margin-bottom: 16px;
}

.admin-list {
    display: grid;
    gap: 10px;
}

.admin-list > div {
    border: 1px solid var(--ocp-border);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    background: rgba(248, 250, 252, .72);
}

.admin-list span {
    color: var(--ocp-muted);
}

.dept-card-link,
.gov-card {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.dept-card-link {
    border-top: 5px solid var(--dept-accent, var(--ocp-primary));
}

.dept-card-link:hover,
.gov-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 50px rgba(15, 23, 42, .10);
    border-color: rgba(37, 99, 235, .28);
}

.dept-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dept-code {
    font-weight: 950;
    color: var(--dept-accent, var(--ocp-primary));
    letter-spacing: .08em;
}

.mini-command {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--ocp-border);
    display: grid;
    gap: 6px;
}

.mini-command strong {
    font-size: .85rem;
    color: var(--ocp-text);
}

.mini-command span {
    color: var(--ocp-muted);
    font-weight: 650;
    font-size: .92rem;
}

.gov-card {
    background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,250,252,.88));
    border: 1px solid var(--ocp-border);
    border-radius: 22px;
    padding: 26px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .06);
}

.gov-card h3 {
    font-weight: 900;
    letter-spacing: -.035em;
    margin: 12px 0 10px;
}

.text-link {
    display: inline-block;
    margin-top: 8px;
    font-weight: 850;
    color: var(--ocp-primary);
}

.department-hero {
    padding: 70px 0;
    background:
        linear-gradient(135deg, rgba(15,23,42,.88), rgba(15,23,42,.72)),
        radial-gradient(circle at top right, var(--dept-accent, var(--ocp-primary)), transparent 36%);
    color: white;
}

.department-hero .lead,
.department-hero .eyebrow,
.department-hero .back-link {
    color: rgba(255,255,255,.82);
}

.department-hero h1 {
    font-size: clamp(2.4rem, 5vw, 4.8rem);
    font-weight: 950;
    letter-spacing: -.065em;
}

.department-hero-grid,
.detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 28px;
    align-items: start;
}

.department-id-card,
.command-card {
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 24px;
    padding: 24px;
    background: rgba(255,255,255,.10);
    backdrop-filter: blur(12px);
}

.department-id-card span,
.department-id-card small {
    display: block;
    color: rgba(255,255,255,.78);
    font-weight: 750;
}

.department-id-card strong {
    display: block;
    font-size: 3rem;
    line-height: 1;
    margin: 12px 0;
}

.back-link {
    display: inline-block;
    margin-bottom: 20px;
    font-weight: 800;
    text-decoration: none;
}

.command-card {
    background: var(--ocp-surface);
    border-color: var(--ocp-border);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .06);
}

.command-card h2 {
    font-weight: 900;
    letter-spacing: -.04em;
    margin-bottom: 18px;
}

.command-row {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 14px 0;
    border-top: 1px solid var(--ocp-border);
}

.command-row strong,
.command-row span {
    display: block;
}

.command-row span {
    color: var(--ocp-muted);
    font-weight: 700;
}

.clean-list {
    display: grid;
    gap: 10px;
    padding-left: 20px;
}

.grid-cards.compact {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.official-hero {
    background:
        radial-gradient(circle at top right, rgba(37,99,235,.16), transparent 32%),
        linear-gradient(180deg, #ffffff, #f8fafc);
}

.official-document {
    position: relative;
}

.doc-label {
    display: inline-flex;
    margin-bottom: 18px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(37,99,235,.09);
    color: var(--ocp-primary);
    font-weight: 900;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

@media (max-width: 950px) {
    .department-hero-grid,
    .detail-grid {
        grid-template-columns: 1fr;
    }
}

.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.brand-lockup img {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    object-fit: cover;
}

.card-link {
    color: inherit;
    text-decoration: none;
}

.card-link:hover {
    color: inherit;
}

.news-thumb {
    width: 100%;
    height: 180px;
    border-radius: 16px;
    object-fit: cover;
    background: rgba(15,23,42,.06);
    margin-bottom: 16px;
}

.article-hero {
    padding: 70px 0;
    background:
        linear-gradient(135deg, rgba(15,23,42,.90), rgba(15,23,42,.70)),
        radial-gradient(circle at top right, var(--article-accent, var(--ocp-primary)), transparent 38%);
    color: #fff;
}

.article-hero .eyebrow,
.article-hero .lead,
.article-hero .back-link,
.staff-profile-hero .eyebrow,
.staff-profile-hero .lead,
.staff-profile-hero .back-link {
    color: rgba(255,255,255,.82);
}

.article-hero h1,
.staff-profile-hero h1 {
    font-size: clamp(2.3rem, 5vw, 4.6rem);
    font-weight: 950;
    letter-spacing: -.065em;
}

.article-hero-grid,
.staff-profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 28px;
    align-items: center;
}

.article-image {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.10);
}

.article-body {
    max-width: 920px;
    margin: 0 auto;
}

.staff-icon-wrap {
    position: relative;
    width: fit-content;
    margin-bottom: 16px;
}

.staff-avatar-img,
.profile-avatar {
    width: 68px;
    height: 68px;
    border-radius: 22px;
    object-fit: cover;
    background: rgba(37,99,235,.1);
}

.staff-mini-logo {
    position: absolute;
    right: -8px;
    bottom: -8px;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    border: 3px solid #fff;
    object-fit: cover;
    box-shadow: 0 8px 18px rgba(15,23,42,.16);
}

.staff-card .text-link {
    margin-top: 12px;
}

.staff-profile-hero {
    padding: 70px 0;
    background:
        linear-gradient(135deg, rgba(15,23,42,.92), rgba(30,41,59,.78)),
        radial-gradient(circle at top right, rgba(37,99,235,.65), transparent 38%);
    color: white;
}

.staff-profile-main {
    display: flex;
    align-items: center;
    gap: 22px;
}

.profile-avatar {
    width: 108px;
    height: 108px;
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: 0 18px 40px rgba(0,0,0,.18);
}

.profile-avatar.fallback {
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 2rem;
    font-weight: 950;
}

.profile-badge-card {
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 24px;
    padding: 24px;
    background: rgba(255,255,255,.10);
    backdrop-filter: blur(12px);
}

.profile-badge-card img,
.dept-hero-logo {
    width: 74px;
    height: 74px;
    border-radius: 22px;
    object-fit: cover;
    margin-bottom: 14px;
}

.profile-badge-card span,
.profile-badge-card strong {
    display: block;
}

.profile-badge-card span {
    color: rgba(255,255,255,.75);
    font-weight: 750;
}

.profile-badge-card strong {
    font-size: 1.6rem;
    letter-spacing: -.04em;
}

.department-hero {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--dept-accent, var(--ocp-primary)) 88%, #000 12%), color-mix(in srgb, var(--dept-accent, var(--ocp-primary)) 58%, #0f172a 42%)),
        radial-gradient(circle at top right, rgba(255,255,255,.22), transparent 38%);
}

.dept-hero-logo {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
}

.upload-panel {
    border: 1px solid var(--ocp-border);
    background: rgba(248,250,252,.8);
    border-radius: 18px;
    padding: 18px;
}

.upload-panel small {
    display: block;
    margin-top: 8px;
    color: var(--ocp-muted);
    word-break: break-all;
}

@media (max-width: 950px) {
    .article-hero-grid,
    .staff-profile-grid {
        grid-template-columns: 1fr;
    }

    .staff-profile-main {
        align-items: flex-start;
        flex-direction: column;
    }
}

.nav-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    object-fit: cover;
    display: inline-grid;
    place-items: center;
    margin-right: 8px;
    border: 1px solid var(--ocp-border);
    background: #fff;
    font-size: .75rem;
    font-weight: 800;
}

.user-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.user-dropdown {
    min-width: 260px;
    border-radius: 18px;
    border: 1px solid var(--ocp-border);
    padding: 10px;
}

.auth-page {
    min-height: 72vh;
    display: grid;
    place-items: center;
    padding: 48px 16px;
}

.auth-card {
    width: min(460px, 100%);
    background: var(--ocp-surface);
    border: 1px solid var(--ocp-border);
    border-radius: 26px;
    padding: 32px;
    box-shadow: 0 24px 60px rgba(15,23,42,.08);
}

.account-hero {
    display: flex;
    gap: 24px;
    align-items: center;
    background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(15,23,42,.04));
    border: 1px solid var(--ocp-border);
    border-radius: 30px;
    padding: 30px;
}

.account-avatar {
    width: 92px;
    height: 92px;
    border-radius: 26px;
    object-fit: cover;
    border: 1px solid var(--ocp-border);
    background: #fff;
}

.role-chip-row,
.permission-grid,
.role-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.role-chip,
.permission-grid span {
    border: 1px solid var(--ocp-border);
    background: #fff;
    color: var(--ocp-text);
    border-radius: 999px;
    padding: 7px 10px;
    font-size: .82rem;
    font-weight: 750;
}

.user-role-list {
    gap: 16px;
}

.user-role-card {
    border: 1px solid var(--ocp-border);
    border-radius: 22px;
    padding: 18px;
    background: #fff;
}

.user-role-head {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}

.user-role-head span {
    display: block;
    color: var(--ocp-muted);
}

.role-checkboxes label {
    border: 1px solid var(--ocp-border);
    border-radius: 999px;
    padding: 7px 10px;
    background: #f8fafc;
    font-weight: 650;
    font-size: .88rem;
}

.role-admin-grid {
    display: grid;
    gap: 18px;
}

.staff-group-block + .staff-group-block {
    margin-top: 44px;
}

.section-heading.compact {
    margin-bottom: 16px;
}


/* Usability expansion: compact account dropdown + easier role assignment */
.compact-user-toggle .user-menu-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 800;
}

.user-dropdown {
    min-width: 220px;
    max-width: 240px;
    border-radius: 18px;
    padding: 8px;
}

.user-dropdown-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 6px;
}

.user-dropdown-profile strong,
.user-dropdown-profile small {
    display: block;
    line-height: 1.2;
}

.user-dropdown-profile small {
    color: var(--ocp-muted);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown-avatar {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    object-fit: cover;
    display: inline-grid;
    place-items: center;
    background: var(--ocp-primary);
    color: #fff;
    font-weight: 900;
}

.toolbar-card {
    border: 1px solid var(--ocp-border);
    background: linear-gradient(135deg, rgba(37,99,235,.06), rgba(15,23,42,.02));
    border-radius: 22px;
    padding: 18px;
}

.enhanced-user-card {
    display: grid;
    grid-template-columns: minmax(210px, 1fr) minmax(280px, 1.4fr);
    gap: 16px;
    align-items: start;
}

.enhanced-user-head {
    margin-bottom: 10px;
}

.role-assignment-box {
    grid-row: span 3;
}

.role-multi-select {
    min-height: 168px;
    border-radius: 16px;
    font-weight: 650;
}

.role-multi-select option {
    padding: 6px 8px;
}

.media-details {
    grid-column: 1 / -1;
    border: 1px dashed var(--ocp-border);
    border-radius: 16px;
    padding: 10px 12px;
    background: #f8fafc;
}

.media-details summary {
    cursor: pointer;
    font-weight: 800;
}

.permission-builder {
    border: 1px solid var(--ocp-border);
    border-radius: 22px;
    padding: 18px;
    background: #f8fafc;
}

.permission-group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.permission-group-box {
    border: 1px solid var(--ocp-border);
    border-radius: 18px;
    background: #fff;
    padding: 14px;
}

.permission-group-box strong {
    display: block;
    margin-bottom: 10px;
}

.permission-group-box label {
    display: block;
    padding: 8px 0;
    font-weight: 700;
    border-top: 1px solid rgba(226,232,240,.8);
}

.permission-group-box label:first-of-type {
    border-top: 0;
}

.permission-group-box small {
    display: block;
    color: var(--ocp-muted);
    font-weight: 600;
    margin-left: 22px;
}

.role-toggle-row {
    border: 1px solid var(--ocp-border);
    border-radius: 16px;
    padding: 12px 14px;
    background: #f8fafc;
    display: flex;
    gap: 10px;
    align-items: center;
}

.advanced-permissions summary {
    cursor: pointer;
    font-weight: 800;
    color: var(--ocp-primary);
}

.account-hero-modern {
    position: relative;
}

.account-hero-action {
    margin-left: auto;
}

.quick-link-list {
    display: grid;
    gap: 10px;
}

.quick-link-list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: var(--ocp-text);
    border: 1px solid var(--ocp-border);
    border-radius: 14px;
    padding: 12px 14px;
    font-weight: 800;
    background: #fff;
}

.quick-link-list a::after {
    content: '›';
    color: var(--ocp-muted);
}

.permission-grid-compact span {
    font-size: .78rem;
    padding: 6px 9px;
}

@media (max-width: 900px) {
    .enhanced-user-card {
        grid-template-columns: 1fr;
    }
    .account-hero-modern {
        align-items: flex-start;
        flex-direction: column;
    }
    .account-hero-action {
        margin-left: 0;
    }
}


/* Public page expansion + direct permission assignment */
.upgraded-home-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--ocp-border);
}

.hero-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

.hero-trust-row span {
    border: 1px solid var(--ocp-border);
    background: rgba(255,255,255,.78);
    border-radius: 999px;
    padding: 8px 12px;
    color: var(--ocp-muted);
    font-size: .86rem;
    font-weight: 800;
}

.live-panel {
    border-top: 5px solid var(--ocp-primary);
}

.quick-access-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
}

.quick-access-grid a,
.mini-news-list a,
.expectation-grid div,
.department-info-strip div {
    color: inherit;
    text-decoration: none;
    border: 1px solid var(--ocp-border);
    background: var(--ocp-surface);
    border-radius: 20px;
    padding: 18px;
    box-shadow: 0 14px 32px rgba(15,23,42,.045);
}

.quick-access-grid a strong,
.quick-access-grid a span,
.mini-news-list a strong,
.mini-news-list a span,
.mini-news-list a p,
.expectation-grid div strong,
.expectation-grid div span,
.department-info-strip div strong,
.department-info-strip div span {
    display: block;
}

.quick-access-grid a strong,
.mini-news-list a strong,
.expectation-grid div strong,
.department-info-strip div strong {
    font-weight: 900;
    letter-spacing: -.02em;
}

.quick-access-grid a span,
.mini-news-list a span,
.mini-news-list a p,
.expectation-grid div span,
.department-info-strip div span {
    color: var(--ocp-muted);
    font-weight: 650;
}

.home-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

.mini-news-list {
    display: grid;
    gap: 12px;
}

.home-about-card {
    position: sticky;
    top: 90px;
}

.dept-showcase-card {
    position: relative;
    overflow: hidden;
}

.dept-showcase-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 76px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--dept-accent) 28%, transparent), transparent);
    pointer-events: none;
}

.dept-showcase-logo {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    object-fit: cover;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

.department-info-strip,
.expectation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin-top: 28px;
}

.department-info-strip div {
    border-top: 4px solid var(--dept-accent, var(--ocp-primary));
}

.user-permission-card {
    border: 1px solid var(--ocp-border);
    border-radius: 24px;
    padding: 18px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15,23,42,.045);
}

.user-permission-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.permission-two-column {
    display: grid;
    grid-template-columns: minmax(280px, 1.1fr) minmax(240px, .9fr);
    gap: 16px;
}

.permission-multi-select {
    min-height: 250px;
    border-radius: 16px;
    font-weight: 650;
}

.permission-multi-select option {
    padding: 6px 8px;
}

.permission-preview-box {
    min-height: 250px;
    border: 1px solid var(--ocp-border);
    background: #f8fafc;
    border-radius: 16px;
    padding: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
}

.permission-preview-box span,
.permission-preview-box em {
    border: 1px solid var(--ocp-border);
    background: #fff;
    color: var(--ocp-text);
    border-radius: 999px;
    padding: 6px 9px;
    font-size: .78rem;
    font-weight: 750;
    font-style: normal;
}

@media (max-width: 950px) {
    .home-split,
    .permission-two-column {
        grid-template-columns: 1fr;
    }
    .home-about-card {
        position: static;
    }
}


/* CRUD/Admin modernisation expansion */
.admin-heading.with-actions,
.admin-table-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 18px;
}
.admin-table-card {
    background: var(--ocp-surface);
    border: 1px solid var(--ocp-border);
    border-radius: 22px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
    padding: 18px;
}
.admin-table-head h2 { font-size: 1.25rem; font-weight: 850; margin: 0; letter-spacing: -.025em; }
.admin-table-head p { color: var(--ocp-muted); margin: 4px 0 0; }
.admin-summary {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    list-style: none;
}
.admin-summary::-webkit-details-marker { display: none; }
.admin-summary strong { font-size: 1.05rem; }
.admin-summary span { color: var(--ocp-muted); font-size: .92rem; }
.admin-accordion .accordion-item {
    border: 1px solid var(--ocp-border);
    border-radius: 16px !important;
    overflow: hidden;
    margin-bottom: 10px;
    background: #fff;
}
.admin-accordion .accordion-button {
    background: #fff;
    box-shadow: none;
    gap: 12px;
}
.admin-accordion .accordion-button:not(.collapsed) {
    color: var(--ocp-text);
    background: rgba(248, 250, 252, .92);
}
.admin-row-title {
    display: grid;
    gap: 2px;
    font-weight: 850;
}
.admin-row-title small {
    color: var(--ocp-muted);
    font-weight: 600;
}
.code-textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .9rem;
}
.dept-swatch {
    width: 34px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, .08);
}
.btn-outline-danger {
    border-color: rgba(220, 38, 38, .35);
    color: #dc2626;
}
.btn-outline-danger:hover {
    background: #dc2626;
    color: #fff;
}
@media (max-width: 768px) {
    .admin-heading.with-actions,
    .admin-table-head,
    .admin-summary { flex-direction: column; align-items: flex-start; }
}

/* Modal CRUD upgrade */
.admin-table { margin: 0; }
.admin-table th {
    color: var(--ocp-muted);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    border-bottom: 1px solid var(--ocp-border);
    white-space: nowrap;
}
.admin-table td {
    padding: 1rem .75rem;
    border-color: rgba(226, 232, 240, .8);
    vertical-align: middle;
}
.admin-table td strong { display: block; font-weight: 850; }
.admin-table td small { display: block; color: var(--ocp-muted); font-weight: 600; margin-top: 2px; }
.soft-pill,
.status-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: .28rem .62rem;
    font-size: .78rem;
    font-weight: 800;
    border: 1px solid var(--ocp-border);
    background: #f8fafc;
    color: var(--ocp-muted);
    white-space: nowrap;
}
.status-pill.success { background: rgba(22, 163, 74, .10); color: #15803d; border-color: rgba(22, 163, 74, .18); }
.status-pill.muted { background: rgba(100, 116, 139, .10); color: #64748b; }
.admin-person { display: flex; align-items: center; gap: .75rem; }
.admin-avatar-sm {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--ocp-primary), #0f172a);
    color: #fff;
    font-weight: 900;
    background-size: cover;
    background-position: center;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .14);
    flex: 0 0 auto;
}
.modal-content {
    border: 1px solid rgba(226, 232, 240, .95);
    border-radius: 24px;
    box-shadow: 0 28px 90px rgba(15, 23, 42, .24);
    overflow: hidden;
}
.modal-header,
.modal-footer { border-color: rgba(226, 232, 240, .9); }
.modal-header { background: linear-gradient(180deg, #ffffff, #f8fafc); }
.modal-title { font-weight: 900; letter-spacing: -.025em; }
.btn-danger { background: #dc2626; border-color: #dc2626; }
.form-label { font-weight: 800; color: var(--ocp-text); }
.form-control,
.form-select {
    border-radius: 12px;
    border-color: rgba(203, 213, 225, .9);
}
.form-control:focus,
.form-select:focus {
    border-color: rgba(37, 99, 235, .45);
    box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .12);
}
.permission-multi-select,
.role-multi-select { min-height: 230px; }
@media (max-width: 768px) {
    .admin-table td,
    .admin-table th { white-space: nowrap; }
}


/* UX/theme studio upgrade */
.navbar { background: var(--ocp-nav-bg) !important; }
.network-card,
.content-card,
.feature-card,
.admin-panel,
.admin-sidebar,
.auth-card,
.admin-table-card,
.theme-preview-card,
.theme-preset-card,
.theme-editor-section {
    border-radius: var(--ocp-radius);
    box-shadow: var(--ocp-shadow);
}
.grid-cards > div,
.callout-box,
.stat-card,
.theme-control,
.permission-group-box {
    background: var(--ocp-surface-alt);
}
.site-footer { background: var(--ocp-footer-bg); }
.btn-outline-primary { color: var(--ocp-primary); border-color: color-mix(in srgb, var(--ocp-primary), transparent 55%); }
.btn-outline-primary:hover { background: var(--ocp-primary); border-color: var(--ocp-primary); color: #fff; }

.admin-modal .modal-dialog {
    max-height: calc(100vh - 2rem);
}
.admin-modal .modal-content,
.modal-content {
    border: 1px solid color-mix(in srgb, var(--ocp-border), #fff 30%);
    border-radius: calc(var(--ocp-radius) + 4px);
    box-shadow: 0 30px 90px rgba(15, 23, 42, .24);
}
.modal-dialog-scrollable .modal-content { max-height: calc(100vh - 2rem); }
.modal-dialog-scrollable .modal-body {
    overflow-y: auto;
    padding: 1.35rem;
    scrollbar-width: thin;
}
.modal-dialog-scrollable .modal-body::-webkit-scrollbar { width: 10px; }
.modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ocp-muted), transparent 65%); border-radius: 999px; }
.modal-header {
    background:
        radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--ocp-primary), transparent 88%), transparent 35%),
        linear-gradient(180deg, #fff, var(--ocp-surface-alt));
    padding: 1.15rem 1.35rem;
}
.modal-footer-sticky,
.modal-footer {
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(12px);
    padding: 1rem 1.35rem;
}
.modal-title { display:flex; align-items:center; gap:.65rem; }
.modal-title::before {
    content:"";
    width: 10px;
    height: 26px;
    display:inline-block;
    border-radius:999px;
    background: var(--ocp-primary);
}

.theme-preview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
    gap: 18px;
}
.theme-preview-card,
.theme-preset-card,
.theme-editor-section {
    background: var(--ocp-surface);
    border: 1px solid var(--ocp-border);
    padding: 22px;
}
.theme-preview-nav {
    display: flex;
    gap: 8px;
    margin-bottom: 28px;
}
.theme-preview-nav span {
    height: 10px;
    width: 64px;
    border-radius: 999px;
    background: var(--ocp-surface-alt);
    border: 1px solid var(--ocp-border);
}
.theme-preview-nav span:first-child { background: var(--ocp-primary); border-color: var(--ocp-primary); }
.theme-preview-hero h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 900;
    letter-spacing: -.055em;
}
.theme-preview-hero p { color: var(--ocp-muted); max-width: 620px; }
.theme-preview-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 28px;
}
.theme-preview-mini-grid div,
.theme-side-preview {
    border: 1px solid var(--ocp-border);
    background: var(--ocp-surface-alt);
    border-radius: 16px;
    padding: 16px;
}
.theme-preview-mini-grid strong,
.theme-side-preview strong { display:block; }
.theme-preview-mini-grid small,
.theme-side-preview p { color: var(--ocp-muted); margin: 0; }
.theme-token-list { display: grid; gap: 10px; }
.theme-token-list div {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 14px;
    background: var(--ocp-surface-alt);
    border: 1px solid var(--ocp-border);
}
.theme-token-list span {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, .10);
}
.theme-token-list strong { text-transform: capitalize; }
.theme-token-list code { color: var(--ocp-muted); }
.theme-preset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
}
.theme-preset-card {
    text-align: left;
}
.theme-preset-card strong { display:block; font-weight: 900; }
.theme-preset-card small { color: var(--ocp-muted); }
.preset-swatches {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: 38px;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid var(--ocp-border);
    margin-bottom: 14px;
}
.theme-editor.enhanced { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.theme-editor-section h4 {
    font-size: 1rem;
    font-weight: 900;
    margin-bottom: 16px;
}
.theme-color-row {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 10px;
    align-items: center;
}
.theme-color-row .form-control-color {
    width: 54px;
    height: 42px;
    border-radius: 14px;
    padding: 4px;
}
.sticky-preview { position: sticky; top: 96px; }
@media (max-width: 992px) {
    .theme-preview-grid { grid-template-columns: 1fr; }
    .sticky-preview { position: static; }
}
@media (max-width: 640px) {
    .theme-preview-mini-grid { grid-template-columns: 1fr; }
    .modal-dialog { margin: .5rem; }
    .modal-dialog-scrollable .modal-content { max-height: calc(100vh - 1rem); }
}

/* Modal scroll hard-fix: keeps the modal inside the viewport and makes the body scrollable. */
.admin-modal {
    --ocp-modal-gap: 1rem;
}
.admin-modal .modal-dialog {
    width: min(1140px, calc(100vw - 2rem));
    max-width: min(1140px, calc(100vw - 2rem));
    height: calc(100dvh - (var(--ocp-modal-gap) * 2));
    max-height: calc(100dvh - (var(--ocp-modal-gap) * 2));
    margin: var(--ocp-modal-gap) auto;
    display: flex;
    align-items: stretch;
}
.admin-modal .modal-dialog.modal-dialog-centered {
    min-height: 0;
}
.admin-modal .modal-content {
    width: 100%;
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.admin-modal .modal-header,
.admin-modal .modal-footer {
    flex: 0 0 auto;
}
.admin-modal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.admin-modal .modal-body::after {
    content: "";
    display: block;
    height: .35rem;
}
.admin-modal .permission-builder {
    max-height: none;
}
.admin-modal .permission-group-grid {
    align-items: stretch;
}
.admin-modal .permission-group-box {
    max-height: none;
}
@media (max-width: 768px) {
    .admin-modal { --ocp-modal-gap: .5rem; }
    .admin-modal .modal-dialog {
        width: calc(100vw - 1rem);
        max-width: calc(100vw - 1rem);
    }
    .admin-modal .modal-header,
    .admin-modal .modal-body,
    .admin-modal .modal-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Account dropdown visual fix: keep it crisp above hero/background effects */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1200;
}

.site-header .navbar {
    position: relative;
    z-index: 1201;
    background: var(--ocp-nav-bg, #ffffff) !important;
}

.site-header .dropdown-menu,
.site-header .user-dropdown {
    z-index: 1300;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: var(--ocp-text, #0f172a);
    opacity: 1 !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 22px 55px rgba(15, 23, 42, .18), 0 2px 10px rgba(15, 23, 42, .08);
}

.user-dropdown {
    width: 252px;
    max-width: calc(100vw - 24px);
    padding: 10px;
    margin-top: 10px !important;
    border-radius: 18px;
}

.user-dropdown::before {
    content: "";
    position: absolute;
    top: -7px;
    right: 22px;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-left: 1px solid var(--ocp-border, #e2e8f0);
    border-top: 1px solid var(--ocp-border, #e2e8f0);
    transform: rotate(45deg);
}

.user-dropdown-profile {
    padding: 10px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid rgba(226, 232, 240, .9);
}

.user-dropdown-profile strong {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-dropdown-profile small {
    max-width: 160px;
    color: var(--ocp-muted, #64748b);
}

.user-dropdown .dropdown-item {
    border-radius: 12px;
    padding: 9px 10px;
    font-weight: 700;
}

.user-dropdown .dropdown-item:hover,
.user-dropdown .dropdown-item:focus {
    background: rgba(37, 99, 235, .08);
    color: var(--ocp-primary, #2563eb);
}

.user-dropdown .dropdown-divider {
    margin: 8px 0;
}

.compact-user-toggle {
    border-radius: 999px;
    padding: 5px 10px 5px 6px !important;
}

.compact-user-toggle:hover,
.compact-user-toggle:focus,
.compact-user-toggle.show {
    background: rgba(37, 99, 235, .08);
}

@media (max-width: 991px) {
    .site-header {
        position: relative;
    }

    .user-dropdown {
        width: 100%;
        max-width: 100%;
        margin-top: 8px !important;
    }

    .user-dropdown::before {
        display: none;
    }
}

/* =========================================================
   FULL MODAL SCROLL FIX - forms inside Bootstrap modals
   ========================================================= */
html.modal-open,
body.modal-open {
    overflow: hidden !important;
}

.admin-modal.modal,
.modal.admin-modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    z-index: 2200 !important;
}

.admin-modal .modal-dialog,
.admin-modal .modal-dialog.modal-dialog-centered,
.admin-modal .modal-dialog.modal-dialog-scrollable {
    width: min(1180px, calc(100vw - 32px)) !important;
    max-width: min(1180px, calc(100vw - 32px)) !important;
    height: calc(100vh - 48px) !important;
    max-height: calc(100vh - 48px) !important;
    min-height: 0 !important;
    margin: 24px auto !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
}

.admin-modal .modal-content {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Critical: most admin modals have a <form> wrapping header/body/footer. */
.admin-modal .modal-content > form {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.admin-modal .modal-header,
.admin-modal .modal-footer,
.admin-modal .modal-content > form > .modal-header,
.admin-modal .modal-content > form > .modal-footer {
    flex: 0 0 auto !important;
}

.admin-modal .modal-body,
.admin-modal .modal-content > form > .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding-bottom: 96px !important;
}

.admin-modal .permission-builder,
.admin-modal .permission-group-grid,
.admin-modal .permission-group-box {
    min-height: 0 !important;
    max-height: none !important;
}

.admin-modal .permission-group-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

@media (max-width: 768px) {
    .admin-modal .modal-dialog,
    .admin-modal .modal-dialog.modal-dialog-centered,
    .admin-modal .modal-dialog.modal-dialog-scrollable {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        height: calc(100vh - 16px) !important;
        max-height: calc(100vh - 16px) !important;
        margin: 8px auto !important;
    }
}


/* =========================================================
   MODAL ABOVE HEADER FIX
   Keeps admin create/edit/delete modals above the sticky public header.
   ========================================================= */
.modal-backdrop {
    z-index: 2190 !important;
}

.admin-modal.modal,
.modal.admin-modal {
    z-index: 2200 !important;
}

.admin-modal .modal-dialog {
    position: relative;
    z-index: 2201 !important;
}

body.modal-open .site-header {
    z-index: 1000 !important;
}


/* =========================================================
   CMS FRONT PAGE UPGRADE
   Config-driven homepage sections and cleaner CMS look.
   ========================================================= */
.cms-home-hero {
    position: relative;
    overflow: hidden;
    padding: 86px 0 72px;
    border-bottom: 1px solid var(--ocp-border);
    background:
        radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--ocp-primary), transparent 78%), transparent 34%),
        radial-gradient(circle at 8% 88%, color-mix(in srgb, var(--ocp-accent, var(--ocp-primary)), transparent 86%), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, var(--ocp-background, #f8fafc) 100%);
}
.cms-home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(180deg, #000, transparent 70%);
    pointer-events: none;
}
.cms-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
    gap: 48px;
    align-items: center;
}
.cms-hero-copy h1 {
    font-size: clamp(2.8rem, 5.8vw, 5.7rem);
    line-height: .97;
    font-weight: 950;
    letter-spacing: -.075em;
    max-width: 830px;
}
.cms-hero-copy p {
    color: var(--ocp-muted);
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    line-height: 1.7;
    max-width: 720px;
    margin: 22px 0 30px;
}
.cms-status-board {
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(226,232,240,.95);
    border-radius: calc(var(--ocp-radius) + 10px);
    padding: 28px;
    box-shadow: 0 30px 80px rgba(15,23,42,.12);
    backdrop-filter: blur(14px);
}
.status-board-top {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 22px;
}
.status-board-top span {
    width: 120px;
    height: 12px;
    border-radius: 999px;
    background: var(--ocp-primary);
}
.status-board-top strong {
    border-radius: 999px;
    padding: 7px 10px;
    color: #15803d;
    background: rgba(22,163,74,.10);
    font-size: .78rem;
}
.cms-status-board h2,
.cms-section-head h2,
.cms-feature-strip h3 {
    font-weight: 950;
    letter-spacing: -.045em;
}
.cms-status-board p { color: var(--ocp-muted); line-height: 1.65; }
.status-board-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 22px 0;
}
.status-board-grid div,
.status-board-list div {
    border: 1px solid var(--ocp-border);
    background: var(--ocp-surface-alt);
    border-radius: 16px;
    padding: 13px;
}
.status-board-grid span,
.status-board-grid strong,
.status-board-list span,
.status-board-list strong { display:block; }
.status-board-grid span,
.status-board-list span { color: var(--ocp-muted); font-size:.78rem; font-weight:800; }
.status-board-grid strong { font-size:1.45rem; letter-spacing:-.04em; }
.status-board-list { display: grid; gap: 10px; }
.status-board-list div { display: flex; justify-content: space-between; align-items:center; }
.status-board-list strong { color: var(--ocp-primary); }
.cms-section-head {
    max-width: 820px;
    margin-bottom: 24px;
}
.cms-section-head.with-action {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: end;
    max-width: none;
}
.cms-section-head p { color: var(--ocp-muted); font-size: 1.05rem; }
.cms-quick-grid,
.cms-feature-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}
.cms-quick-grid a,
.cms-feature-strip article {
    position: relative;
    color: inherit;
    text-decoration: none;
    border: 1px solid var(--ocp-border);
    background: var(--ocp-surface);
    border-radius: var(--ocp-radius);
    padding: 22px;
    box-shadow: 0 16px 40px rgba(15,23,42,.055);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cms-quick-grid a:hover,
.cms-feature-strip article:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--ocp-primary), transparent 60%);
    box-shadow: 0 26px 58px rgba(15,23,42,.10);
}
.cms-quick-grid strong,
.cms-quick-grid span { display:block; }
.cms-quick-grid strong { font-size: 1.05rem; font-weight: 950; }
.cms-quick-grid span,
.cms-feature-strip p { color: var(--ocp-muted); }
.cms-feature-strip article > span {
    display: block;
    width: 42px;
    height: 8px;
    border-radius: 999px;
    background: var(--ocp-primary);
    margin-bottom: 18px;
}
.cms-home-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, .8fr);
    gap: 24px;
    align-items: start;
}
.cms-builder-form .admin-table-card h2 {
    font-size: 1.2rem;
    font-weight: 950;
    letter-spacing: -.035em;
}
.cms-mini-editor {
    border: 1px solid var(--ocp-border);
    border-radius: 18px;
    background: var(--ocp-surface-alt);
    padding: 14px;
    height: 100%;
}
.sticky-save-bar {
    position: sticky;
    bottom: 14px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 14px;
    border: 1px solid var(--ocp-border);
    border-radius: 20px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 50px rgba(15,23,42,.14);
    z-index: 20;
}
@media (max-width: 992px) {
    .cms-hero-grid,
    .cms-home-columns { grid-template-columns: 1fr; }
    .cms-section-head.with-action { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 680px) {
    .cms-home-hero { padding: 56px 0; }
    .status-board-grid { grid-template-columns: 1fr; }
}


/* Invision-style community front page upgrade */
.community-frontpage {
    background:
        linear-gradient(180deg, rgba(37, 99, 235, .07), rgba(248, 250, 252, 0) 360px),
        var(--ocp-bg);
}
.ic-hero {
    padding: 42px 0 24px;
    border-bottom: 1px solid var(--ocp-border);
    background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(239,246,255,.9));
}
.ic-hero-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 22px;
    align-items: stretch;
}
.ic-hero-main,
.welcome-panel,
.front-block,
.sidebar-widget {
    background: rgba(255,255,255,.92);
    border: 1px solid var(--ocp-border);
    border-radius: 24px;
    box-shadow: 0 18px 42px rgba(15,23,42,.07);
}
.ic-hero-main {
    padding: 34px;
}
.ic-hero-main h1 {
    max-width: 860px;
    font-size: clamp(2.25rem, 4vw, 4.1rem);
    line-height: 1.04;
    font-weight: 900;
    letter-spacing: -.055em;
    margin-bottom: 14px;
}
.ic-hero-main p {
    max-width: 760px;
    color: var(--ocp-muted);
    font-size: 1.12rem;
}
.ic-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}
.welcome-panel {
    padding: 24px;
}
.welcome-panel-head {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
}
.welcome-panel-head strong,
.welcome-panel-head span {
    display: block;
}
.welcome-panel-head span,
.welcome-panel p,
.quick-nav-row span,
.sidebar-note p,
.forum-info p,
.ic-dept-row p,
.ic-news-item p {
    color: var(--ocp-muted);
}
.welcome-panel-links {
    margin-top: 20px;
    border-top: 1px solid var(--ocp-border);
}
.welcome-panel-links div,
.community-stats div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ocp-border);
}
.welcome-panel-links span,
.community-stats span {
    color: var(--ocp-muted);
}
.frontpage-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 22px;
    align-items: start;
}
.frontpage-main-col {
    display: grid;
    gap: 22px;
}
.frontpage-sidebar {
    display: grid;
    gap: 18px;
    position: sticky;
    top: 92px;
}
.front-block,
.sidebar-widget {
    padding: 22px;
}
.front-block-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 18px;
}
.front-block-head h2,
.sidebar-widget h3 {
    margin: 0;
    font-weight: 850;
    letter-spacing: -.035em;
}
.ic-news-feed,
.forum-board-list,
.ic-department-list {
    display: grid;
    gap: 12px;
}
.ic-news-item,
.forum-row,
.ic-dept-row,
.quick-nav-row {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--ocp-border);
    border-radius: 18px;
    background: rgba(248,250,252,.72);
    color: inherit;
    text-decoration: none;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.ic-news-item:hover,
.forum-row:hover,
.ic-dept-row:hover,
.quick-nav-row:hover {
    transform: translateY(-1px);
    border-color: rgba(37,99,235,.35);
    background: #fff;
}
.ic-news-item.featured {
    align-items: stretch;
    background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(255,255,255,.95));
}
.ic-news-item img {
    width: 120px;
    min-height: 92px;
    object-fit: cover;
    border-radius: 14px;
    background: var(--ocp-border);
}
.ic-news-item strong,
.forum-info strong,
.ic-dept-row strong,
.quick-nav-row strong {
    display: block;
    font-weight: 850;
    color: var(--ocp-text);
}
.ic-news-item span,
.forum-info small {
    display: block;
    color: var(--ocp-muted);
    font-size: .86rem;
    font-weight: 700;
    margin-bottom: 3px;
}
.forum-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 76px 76px;
}
.forum-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(37,99,235,.1);
    color: var(--ocp-primary);
    font-weight: 900;
}
.forum-count {
    text-align: center;
    border-left: 1px solid var(--ocp-border);
}
.forum-count strong,
.forum-count span {
    display: block;
}
.forum-count span {
    color: var(--ocp-muted);
    font-size: .8rem;
}
.ic-dept-row {
    border-left: 5px solid var(--dept-accent, var(--ocp-primary));
}
.ic-dept-row img {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--ocp-border);
    padding: 6px;
}
.ic-dept-row > span {
    margin-left: auto;
    font-weight: 800;
    color: var(--dept-accent, var(--ocp-primary));
}
.sidebar-widget h3 {
    font-size: 1.12rem;
    margin-bottom: 14px;
}
.quick-nav-row {
    display: block;
    margin-bottom: 10px;
}
.quick-nav-row span {
    display: block;
    font-size: .92rem;
}
.sidebar-note {
    padding: 12px 0;
    border-top: 1px solid var(--ocp-border);
}
.sidebar-note p {
    margin-bottom: 0;
    font-size: .93rem;
}
.hero-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}
.hero-trust-row span {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.78);
    border: 1px solid var(--ocp-border);
    color: var(--ocp-muted);
    font-weight: 800;
    font-size: .88rem;
}
@media (max-width: 1050px) {
    .ic-hero-shell,
    .frontpage-grid { grid-template-columns: 1fr; }
    .frontpage-sidebar { position: static; }
}
@media (max-width: 700px) {
    .ic-hero-main { padding: 24px; }
    .front-block-head { display: block; }
    .forum-row { grid-template-columns: 42px minmax(0, 1fr); }
    .forum-count { display: none; }
    .ic-news-item, .ic-news-item.featured { display: block; }
    .ic-news-item img { width: 100%; margin-bottom: 12px; }
}


/* Forums / Topics */
.forums-hero {
    padding: 58px 0 34px;
    background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(255,255,255,.86)), radial-gradient(circle at 90% 10%, rgba(37,99,235,.16), transparent 34%);
    border-bottom: 1px solid var(--ocp-border);
}
.forums-hero-shell {
    display: grid;
    grid-template-columns: minmax(0,1fr) 360px;
    gap: 22px;
    align-items: end;
}
.forums-hero h1,
.topic-detail-heading h1 {
    font-size: clamp(2.4rem, 5vw, 4.4rem);
    font-weight: 900;
    letter-spacing: -.055em;
    margin-bottom: 12px;
}
.forums-hero p { color: var(--ocp-muted); font-size: 1.08rem; max-width: 760px; }
.forum-search-card,
.topic-thread-card {
    background: var(--ocp-surface);
    border: 1px solid var(--ocp-border);
    border-radius: 22px;
    box-shadow: 0 18px 40px rgba(15,23,42,.07);
    padding: 20px;
}
.forum-search-card p { font-size: .92rem; margin: 6px 0 14px; }
.forums-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; align-items: start; padding-top: 28px; }
.rich-forum-row { border-left: 5px solid var(--forum-accent, var(--ocp-primary)); }
.forum-icon { background: color-mix(in srgb, var(--forum-accent, var(--ocp-primary)) 14%, white); color: var(--forum-accent, var(--ocp-primary)); }
.forum-icon.large { width: 64px; height: 64px; font-size: 1.55rem; border-radius: 20px; }
.forum-detail-heading { display: flex; align-items: center; gap: 18px; margin-top: 18px; }
.compact-forum-hero { background: linear-gradient(135deg, color-mix(in srgb, var(--forum-accent, var(--ocp-primary)) 16%, white), #fff); }
.topic-list { display: grid; gap: 10px; }
.topic-row {
    display: grid;
    grid-template-columns: 62px minmax(0,1fr) 130px;
    gap: 14px;
    align-items: center;
    padding: 15px;
    border: 1px solid var(--ocp-border);
    border-left: 5px solid var(--forum-accent, var(--ocp-primary));
    border-radius: 18px;
    background: rgba(248,250,252,.78);
    color: inherit;
    text-decoration: none;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.topic-row:hover { transform: translateY(-1px); background: #fff; border-color: color-mix(in srgb, var(--forum-accent, var(--ocp-primary)) 40%, var(--ocp-border)); }
.topic-status { display: inline-grid; place-items: center; min-width: 46px; min-height: 32px; border-radius: 12px; background: color-mix(in srgb, var(--forum-accent, var(--ocp-primary)) 14%, white); color: var(--forum-accent, var(--ocp-primary)); font-size: .75rem; font-weight: 900; }
.topic-status.large { display: inline-flex; padding: 8px 12px; margin-bottom: 10px; }
.topic-info strong { display:block; font-weight: 850; color: var(--ocp-text); }
.topic-info p { color: var(--ocp-muted); margin: 3px 0; }
.topic-info small, .topic-meta span { color: var(--ocp-muted); font-size: .86rem; font-weight: 700; }
.topic-meta { display: grid; gap: 4px; text-align: right; }
.topic-post { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 22px; }
.topic-author { border-right: 1px solid var(--ocp-border); padding-right: 20px; }
.topic-author strong, .topic-author span { display: block; }
.topic-author span, .topic-post-meta { color: var(--ocp-muted); font-size: .92rem; }
.topic-post-body { min-width: 0; }
.topic-reply-placeholder { margin-top: 22px; padding: 18px; border-radius: 18px; background: rgba(248,250,252,.9); border: 1px dashed var(--ocp-border); color: var(--ocp-muted); }
.topic-reply-placeholder strong { color: var(--ocp-text); }
@media (max-width: 1050px) { .forums-hero-shell, .forums-layout { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .topic-row { grid-template-columns: 1fr; } .topic-meta { text-align: left; } .topic-post { grid-template-columns: 1fr; } .topic-author { border-right: 0; border-bottom: 1px solid var(--ocp-border); padding: 0 0 16px; } }


/* Department microsite upgrade */
.dept-page {
    background: linear-gradient(180deg, color-mix(in srgb, var(--dept-accent) 7%, #f8fafc), #f8fafc 340px);
}
.dept-site-hero {
    padding: 34px 0 42px;
    background-color: #0b1120;
    background-size: cover;
    background-position: center;
    color: #fff;
    border-bottom: 5px solid var(--dept-accent);
}
.back-link.light { color: rgba(255,255,255,.82); }
.dept-site-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px;
    align-items: stretch;
}
.dept-title-block {
    min-height: 280px;
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 30px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 26px;
    background: rgba(0,0,0,.24);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.dept-seal {
    width: 118px;
    height: 118px;
    object-fit: contain;
    border-radius: 28px;
    background: rgba(255,255,255,.08);
    padding: 12px;
    flex: 0 0 auto;
}
.dept-kicker {
    color: color-mix(in srgb, var(--dept-accent) 70%, white);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .78rem;
    font-weight: 900;
}
.dept-title-block h1 {
    font-size: clamp(2.4rem, 5vw, 5.2rem);
    line-height: .98;
    letter-spacing: -.06em;
    font-weight: 950;
    margin: 8px 0 12px;
}
.dept-title-block p { max-width: 760px; color: rgba(255,255,255,.82); font-size: 1.12rem; }
.dept-apply-card,
.dept-side-card,
.dept-main-panel,
.dept-content-section,
.dept-related-section {
    border-radius: 24px;
    border: 1px solid var(--ocp-border);
    background: rgba(255,255,255,.94);
    box-shadow: 0 18px 44px rgba(15,23,42,.08);
}
.dept-apply-card {
    padding: 24px;
    text-align: center;
    border-top: 5px solid var(--dept-accent);
}
.dept-apply-card img { width: 88px; height: 88px; object-fit: contain; margin-bottom: 14px; }
.dept-apply-card h3 { font-weight: 900; font-size: 1.2rem; color: var(--dept-accent); }
.recruit-row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--ocp-border); font-weight: 750; }
.recruit-row strong.open { color: #16a34a; }
.recruit-row strong.closed { color: #dc2626; }
.btn-dept { background: var(--dept-accent); border-color: var(--dept-accent); color: white; font-weight: 850; }
.btn-dept:hover { color: white; filter: brightness(.94); }
.dept-body-wrap { margin-top: 28px; }
.dept-content-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.dept-main-panel { padding: 0; background: transparent; border: 0; box-shadow: none; display: grid; gap: 18px; }
.dept-content-section { padding: 32px; }
.dept-content-section h2,
.dept-side-card h2,
.dept-related-section h2 { color: var(--dept-accent); font-size: clamp(1.7rem, 3vw, 2.7rem); font-weight: 950; letter-spacing: -.045em; }
.dept-lead-copy { color: var(--ocp-text); font-size: 1.08rem; line-height: 1.75; max-width: 900px; margin: 0 auto; }
.dept-expectation-list { display: grid; gap: 12px; }
.dept-expectation-list div { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--ocp-border); border-radius: 16px; background: #fff; }
.dept-expectation-list span { color: var(--dept-accent); font-weight: 950; }
.dept-expectation-list p { margin: 0; color: var(--ocp-muted); font-weight: 650; }
.dept-section-intro { color: var(--ocp-muted); font-weight: 650; }
.dept-subdivision-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.dept-subdivision-card { position: relative; overflow: hidden; padding: 22px; border-radius: 20px; border: 1px solid var(--ocp-border); background: linear-gradient(180deg,#fff,#f8fafc); }
.subdivision-ribbon { position: absolute; inset: 0 0 auto 0; height: 7px; background: var(--dept-accent); }
.dept-subdivision-card h3 { margin-top: 8px; font-weight: 900; color: var(--ocp-text); }
.dept-subdivision-card p { color: var(--ocp-muted); margin-bottom: 0; }
.dept-sidebar-stack { display: grid; gap: 16px; position: sticky; top: 96px; }
.dept-side-card { padding: 20px; }
.dept-side-card h2 { font-size: 1.55rem; margin-bottom: 14px; }
.side-command-row { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid var(--ocp-border); }
.rank-star { color: var(--dept-accent); }
.side-command-row strong, .side-command-row span { display:block; }
.side-command-row strong { font-weight: 850; }
.side-command-row span { color: var(--ocp-muted); font-weight: 650; }
.dept-mini-row { display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-top:1px solid var(--ocp-border); }
.dept-mini-row span { color: var(--ocp-muted); font-weight:750; }
.dept-mini-row strong { color: var(--dept-accent); }
.section-split-title { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:18px; }
.dept-muted-link { color: var(--ocp-muted); font-weight: 800; text-decoration:none; }
.dept-gallery-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap:16px; }
.dept-gallery-item { display:block; overflow:hidden; border-radius:20px; border:1px solid var(--ocp-border); background:#fff; color:inherit; text-decoration:none; }
.dept-gallery-item img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; background:#e2e8f0; }
.dept-gallery-item div { padding:14px; }
.dept-gallery-item strong, .dept-gallery-item span { display:block; }
.dept-gallery-item strong { font-weight:900; }
.dept-gallery-item span { color:var(--ocp-muted); font-weight:650; font-size:.9rem; }
.side-gallery-mini { display:block; color:inherit; text-decoration:none; border-top:1px solid var(--ocp-border); padding:12px 0; }
.side-gallery-mini img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:14px; margin-bottom:8px; }
.side-gallery-mini strong { font-size:.95rem; }
.dept-related-section { margin-top: 22px; padding: 28px; }
@media (max-width: 980px) {
    .dept-site-hero-inner,
    .dept-content-layout { grid-template-columns: 1fr; }
    .dept-sidebar-stack { position: static; }
    .dept-title-block { flex-direction: column; align-items: flex-start; min-height: 0; }
}

/* User requested polish: Invision-style news placement, forums and department media */
.front-news-bottom {
    margin-top: 0;
}
.news-column-feed,
.news-column-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
.news-column-feed .ic-news-item,
.news-column-feed .ic-news-item.featured,
.news-column-list .news-card {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: stretch;
}
.news-column-feed .ic-news-item img {
    width: 220px;
    min-height: 150px;
    height: 100%;
}
.news-column-list .news-card {
    gap: 18px;
    overflow: hidden;
}
.news-column-list .news-thumb {
    width: 220px;
    height: 100%;
    min-height: 160px;
    margin: 0;
}
.news-index-page .page-hero {
    border-bottom: 1px solid var(--ocp-border);
    background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(255,255,255,.88));
}

.upgraded-topic-heading {
    align-items: flex-start;
}
.topic-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}
.topic-hero-meta a,
.topic-hero-meta span {
    display: inline-flex;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    border: 1px solid var(--ocp-border);
    color: var(--ocp-muted);
    text-decoration: none;
    font-weight: 800;
    font-size: .86rem;
}
.topic-hero-meta a:hover {
    color: var(--forum-accent, var(--ocp-primary));
    border-color: color-mix(in srgb, var(--forum-accent, var(--ocp-primary)) 38%, var(--ocp-border));
}
.invision-topic-card {
    padding: 0;
    overflow: hidden;
}
.upgraded-topic-post {
    gap: 0;
}
.upgraded-topic-post .topic-author {
    padding: 24px;
    background: linear-gradient(180deg, rgba(248,250,252,.95), rgba(255,255,255,.95));
}
.topic-author-card {
    display: block;
    color: inherit;
    text-decoration: none;
}
.topic-author-card .avatar-dot {
    margin-bottom: 14px;
}
.topic-author-card em {
    display: block;
    margin-top: 12px;
    color: var(--forum-accent, var(--ocp-primary));
    font-style: normal;
    font-weight: 850;
    font-size: .9rem;
}
.topic-post-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ocp-border);
    margin-bottom: 18px;
}
.topic-post-number {
    color: var(--ocp-muted);
    font-weight: 900;
}
.topic-rich-content {
    font-size: 1.03rem;
    line-height: 1.75;
}
.topic-author-inline {
    color: var(--forum-accent, var(--ocp-primary));
    font-weight: 850;
}

.dept-subdivision-link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.dept-subdivision-link .text-link {
    display: inline-flex;
    margin-top: 12px;
    font-weight: 850;
}
.dept-subdivision-link:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--dept-accent) 45%, var(--ocp-border));
    box-shadow: 0 18px 36px rgba(15,23,42,.08);
}
.gallery-modal-trigger {
    text-align: left;
    width: 100%;
    padding: 0;
    cursor: pointer;
}
.gallery-modal-trigger:hover img {
    transform: scale(1.025);
}
.dept-gallery-item img {
    transition: transform .22s ease;
}
.gallery-lightbox {
    z-index: 20000;
}
.gallery-lightbox .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 24px;
    background: #020617;
    color: #fff;
    box-shadow: 0 30px 90px rgba(0,0,0,.45);
}
.gallery-lightbox img {
    width: 100%;
    max-height: 76vh;
    object-fit: contain;
    background: #020617;
}
.gallery-caption {
    padding: 18px 22px;
    background: rgba(2,6,23,.96);
}
.gallery-caption strong,
.gallery-caption span {
    display: block;
}
.gallery-caption span {
    color: rgba(255,255,255,.72);
}
.gallery-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 4;
    background-color: rgba(255,255,255,.92);
    border-radius: 999px;
    padding: 10px;
}
.subdivision-page .dept-content-section h2 {
    color: var(--dept-accent);
}

@media (max-width: 760px) {
    .news-column-feed .ic-news-item,
    .news-column-feed .ic-news-item.featured,
    .news-column-list .news-card {
        grid-template-columns: 1fr;
    }
    .news-column-feed .ic-news-item img,
    .news-column-list .news-thumb {
        width: 100%;
        height: auto;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }
}

/* =========================================================
   2026-05 polish: fixed gallery/admin modals, readable department panels,
   BBC-style newsroom, and improved topic/article reading pages.
   ========================================================= */
.dept-apply-card,
.dept-side-card {
    color: var(--ocp-text) !important;
}
.dept-apply-card .recruit-row span,
.dept-side-card .dept-mini-row span,
.dept-side-card .side-command-row span {
    color: var(--ocp-muted) !important;
}
.dept-apply-card .recruit-row strong:not(.open):not(.closed),
.dept-side-card .dept-mini-row strong,
.dept-side-card .side-command-row strong {
    color: var(--ocp-text) !important;
}
.subdivision-page .dept-apply-card h3,
.dept-apply-card h3 {
    color: var(--dept-accent) !important;
}

/* Make all modals sit above sticky headers and keep controls visible. */
.modal-backdrop { z-index: 30000 !important; }
.modal { z-index: 30010 !important; }
.modal-dialog { z-index: 30020 !important; }
.gallery-lightbox { z-index: 30050 !important; }
.gallery-lightbox .modal-dialog {
    max-width: min(1120px, calc(100vw - 32px));
    margin: 1rem auto;
}
.gallery-lightbox .modal-content {
    max-height: calc(100dvh - 2rem);
    display: flex;
    flex-direction: column;
}
.gallery-lightbox img {
    flex: 1 1 auto;
    min-height: 0;
    max-height: calc(100dvh - 8rem);
}
.gallery-lightbox .gallery-close {
    top: 18px;
    right: 18px;
    opacity: 1;
    box-shadow: 0 10px 30px rgba(0,0,0,.28);
}

/* Real-news style index page */
.newsroom-page {
    background: #f8fafc;
}
.newsroom-masthead {
    padding: 62px 0 34px;
    border-bottom: 1px solid var(--ocp-border);
    background: linear-gradient(180deg, #fff, #f8fafc);
}
.newsroom-masthead h1 {
    font-size: clamp(2.3rem, 4vw, 4.2rem);
    font-weight: 950;
    letter-spacing: -.055em;
    margin: 0;
}
.newsroom-wrap { padding-top: 34px; }
.newsroom-top-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
    gap: 24px;
    align-items: stretch;
}
.newsroom-lead-story,
.newsroom-small-story,
.newsroom-tile {
    display: block;
    color: inherit;
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--ocp-border);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .06);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.newsroom-lead-story:hover,
.newsroom-small-story:hover,
.newsroom-tile:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--ocp-primary) 38%, var(--ocp-border));
    box-shadow: 0 22px 54px rgba(15, 23, 42, .09);
}
.newsroom-lead-story {
    border-radius: 24px;
    overflow: hidden;
}
.newsroom-lead-story img {
    width: 100%;
    aspect-ratio: 16 / 7.5;
    object-fit: cover;
    background: #dbeafe;
    display: block;
}
.newsroom-card-body { padding: 22px; }
.newsroom-card-body h2 {
    font-size: clamp(1.7rem, 3vw, 3rem);
    line-height: 1.02;
    font-weight: 950;
    letter-spacing: -.045em;
    margin: 8px 0 10px;
}
.newsroom-card-body p,
.newsroom-tile p { color: var(--ocp-muted); margin: 0; }
.newsroom-meta {
    display: inline-flex;
    color: var(--ocp-primary);
    font-size: .82rem;
    font-weight: 900;
    letter-spacing: .02em;
}
.newsroom-side-stack {
    display: grid;
    gap: 16px;
}
.newsroom-small-story {
    display: grid;
    grid-template-columns: 128px 1fr;
    gap: 14px;
    padding: 12px;
    border-radius: 18px;
    min-height: 124px;
}
.newsroom-small-story img {
    width: 128px;
    height: 100%;
    min-height: 96px;
    object-fit: cover;
    border-radius: 12px;
    background: #dbeafe;
}
.newsroom-small-story strong {
    display: block;
    font-size: 1.05rem;
    line-height: 1.18;
    font-weight: 900;
    margin: 5px 0;
}
.newsroom-small-story small { color: var(--ocp-muted); font-weight: 700; }
.newsroom-section-title {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: end;
    margin: 36px 0 18px;
    padding-top: 22px;
    border-top: 3px solid var(--ocp-text);
}
.newsroom-section-title h2 {
    margin: 0;
    font-weight: 950;
    letter-spacing: -.04em;
}
.newsroom-section-title span { color: var(--ocp-muted); font-weight: 750; }
.newsroom-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}
.newsroom-tile {
    border-radius: 18px;
    overflow: hidden;
}
.newsroom-tile img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
    background: #dbeafe;
}
.newsroom-tile > div { padding: 16px; }
.newsroom-tile h3 {
    font-size: 1.18rem;
    line-height: 1.16;
    font-weight: 950;
    margin: 8px 0;
}

/* News article page */
.news-article-hero {
    padding: 54px 0 40px;
    background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(255,255,255,.95) 54%, #fff);
    border-bottom: 1px solid var(--ocp-border);
}
.news-article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 32px;
    align-items: center;
    margin-top: 18px;
}
.news-article-main-head h1 {
    font-size: clamp(2.5rem, 5vw, 5.2rem);
    line-height: .98;
    letter-spacing: -.065em;
    font-weight: 950;
    margin: 10px 0 16px;
}
.news-article-main-head p {
    color: var(--ocp-muted);
    font-size: 1.18rem;
    max-width: 760px;
}
.news-article-image-wrap {
    margin: 0;
    border-radius: 24px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--ocp-border);
    box-shadow: 0 22px 52px rgba(15,23,42,.1);
}
.news-article-image-wrap img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}
.news-article-image-wrap figcaption {
    padding: 10px 14px;
    color: var(--ocp-muted);
    font-weight: 700;
    font-size: .9rem;
}
.news-article-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
}
.news-article-card {
    padding: clamp(24px, 4vw, 46px);
    font-size: 1.06rem;
    line-height: 1.85;
}
.article-byline-row {
    display: flex;
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid var(--ocp-border);
    padding-bottom: 18px;
    margin-bottom: 24px;
}
.article-byline-row span {
    display: block;
    color: var(--ocp-muted);
    font-weight: 700;
}
.news-article-sidebar { position: sticky; top: 92px; display: grid; gap: 18px; }

/* Topic reading page polish */
.topic-masthead {
    padding: 44px 0 34px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--forum-accent) 13%, #fff), #fff 65%);
    border-bottom: 1px solid var(--ocp-border);
}
.topic-masthead-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: start;
    margin-top: 18px;
}
.topic-masthead-copy h1 {
    font-size: clamp(2.2rem, 4.8vw, 4.8rem);
    line-height: .98;
    letter-spacing: -.06em;
    font-weight: 950;
    margin: 10px 0 12px;
}
.topic-masthead-copy p { color: var(--ocp-muted); font-size: 1.12rem; max-width: 860px; }
.topic-status-line { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; color: var(--ocp-muted); font-weight: 850; }
.topic-layout { padding-top: 26px; }
.topic-action-bar {
    display: flex;
    gap: 10px;
    padding: 18px 22px;
    border-top: 1px solid var(--ocp-border);
    background: #fff;
}
.topic-post-toolbar > div span {
    display: inline;
    color: var(--ocp-muted);
    font-weight: 700;
}

@media (max-width: 1000px) {
    .newsroom-top-grid,
    .news-article-layout,
    .news-article-shell { grid-template-columns: 1fr; }
    .news-article-sidebar { position: static; }
    .newsroom-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
    .newsroom-small-story { grid-template-columns: 1fr; }
    .newsroom-small-story img { width: 100%; aspect-ratio: 16 / 9; height: auto; }
    .newsroom-card-grid { grid-template-columns: 1fr; }
    .topic-masthead-card { grid-template-columns: 1fr; }
}

/* =========================================================
   Invision-inspired forum board/topic redesign
   Keeps the current OCP colours but uses a proper forum layout.
   ========================================================= */
.forum-board-page,
.forum-reading-page {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--forum-accent, var(--ocp-primary)) 9%, transparent), transparent 34%),
        #f8fafc;
    min-height: 100vh;
    padding: 34px 0 70px;
}
.forum-topic-shell,
.forum-board-shell {
    max-width: 1320px;
}
.forum-breadcrumb {
    display: inline-flex;
    margin-bottom: 14px;
    color: var(--forum-accent, var(--ocp-primary));
    font-weight: 850;
    text-decoration: none;
}
.forum-breadcrumb:hover { text-decoration: underline; }
.forum-topic-title-card,
.forum-board-header-card,
.forum-topic-meta-strip,
.forum-post-card,
.forum-reply-box,
.forum-info-box,
.forum-topic-list-card {
    background: var(--ocp-surface);
    border: 1px solid var(--ocp-border);
    box-shadow: 0 18px 44px rgba(15,23,42,.07);
}
.forum-topic-title-card,
.forum-board-header-card {
    border-radius: 18px 18px 0 0;
    padding: 26px 28px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
}
.forum-board-header-card { border-radius: 18px; margin-bottom: 18px; }
.forum-topic-title-card h1,
.forum-board-header-card h1 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1;
    letter-spacing: -.055em;
    font-weight: 950;
    color: var(--ocp-text);
}
.forum-board-header-card p {
    margin: 10px 0 0;
    color: var(--ocp-muted);
    font-size: 1.05rem;
}
.forum-topic-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.forum-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 6px 10px;
    background: color-mix(in srgb, var(--forum-accent, var(--ocp-primary)) 14%, #fff);
    color: var(--forum-accent, var(--ocp-primary));
    font-size: .78rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.forum-pill.muted {
    background: #f1f5f9;
    color: var(--ocp-muted);
}
.forum-topic-header-actions,
.forum-above-thread-actions,
.forum-board-actions,
.forum-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.forum-topic-header-actions { white-space: nowrap; }
.forum-action-btn,
.forum-link-btn,
.forum-list-toolbar button,
.forum-post-footer-actions button {
    border: 0;
    background: #f1f5f9;
    color: var(--ocp-text);
    border-radius: 10px;
    padding: 10px 13px;
    font-weight: 850;
    text-decoration: none;
}
.forum-action-btn:hover,
.forum-link-btn:hover,
.forum-list-toolbar button:hover,
.forum-post-footer-actions button:hover {
    background: color-mix(in srgb, var(--forum-accent, var(--ocp-primary)) 12%, #f1f5f9);
    color: var(--forum-accent, var(--ocp-primary));
}
.forum-topic-meta-strip {
    border-top: 0;
    border-radius: 0 0 12px 12px;
    padding: 14px 28px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--ocp-muted);
    font-weight: 700;
}
.forum-topic-meta-strip a { color: var(--forum-accent, var(--ocp-primary)); text-decoration: none; }
.mini-author,
.forum-board-topic-sub a,
.forum-board-latest strong { color: var(--ocp-text); text-decoration: none; }
.mini-avatar {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    background: color-mix(in srgb, var(--forum-accent, var(--ocp-primary)) 18%, #fff);
    color: var(--forum-accent, var(--ocp-primary));
    font-weight: 950;
    text-decoration: none;
}
.mini-author { display: inline-flex; align-items: center; gap: 9px; }
.forum-above-thread-actions {
    margin: 22px 0;
}
.forum-post-card {
    border-radius: 18px;
    display: grid;
    grid-template-columns: 230px minmax(0,1fr);
    overflow: hidden;
}
.forum-post-author-panel {
    background: linear-gradient(180deg, #f8fafc, #fff);
    border-right: 1px solid var(--ocp-border);
    padding: 26px 22px;
    text-align: center;
}
.forum-big-avatar {
    width: 96px;
    height: 96px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: color-mix(in srgb, var(--forum-accent, var(--ocp-primary)) 72%, #fff);
    color: #fff;
    font-size: 2.9rem;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 16px 32px color-mix(in srgb, var(--forum-accent, var(--ocp-primary)) 22%, transparent);
}
.forum-author-name {
    display: block;
    color: var(--ocp-text);
    font-weight: 950;
    text-decoration: none;
    margin-top: 14px;
}
.forum-author-role {
    display: block;
    color: var(--ocp-muted);
    font-size: .92rem;
    margin-top: 6px;
}
.forum-author-stats {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 24px;
    color: var(--ocp-muted);
    font-weight: 800;
}
.forum-post-content-panel {
    min-width: 0;
    padding: 24px 26px 20px;
}
.forum-post-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--ocp-muted);
    font-weight: 750;
    margin-bottom: 22px;
}
.forum-post-topline strong { color: var(--ocp-muted); }
.forum-post-body-text {
    font-size: 1.03rem;
    line-height: 1.82;
    color: var(--ocp-text);
    min-height: 160px;
}
.forum-post-footer-actions {
    display: flex;
    gap: 12px;
    margin-top: 34px;
}
.forum-reply-box {
    margin-top: 18px;
    border-radius: 18px;
    padding: 16px 18px;
    display: flex;
    gap: 14px;
    align-items: center;
}
.forum-reply-box button {
    border: 1px solid var(--ocp-border);
    background: #fff;
    color: var(--ocp-muted);
    border-radius: 12px;
    padding: 13px 16px;
    width: 100%;
    text-align: left;
    font-weight: 750;
}
.forum-topic-bottom-grid {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 320px minmax(0,1fr);
    gap: 18px;
    align-items: start;
}
.forum-info-box {
    border-radius: 18px;
    padding: 18px;
}
.forum-info-box h3 {
    font-size: 1.05rem;
    font-weight: 950;
    margin: 0 0 12px;
}
.forum-info-box > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--ocp-border);
}
.forum-info-box span { color: var(--ocp-muted); font-weight: 700; }
.forum-related-box a {
    display: block;
    padding: 11px 0;
    border-top: 1px solid var(--ocp-border);
    color: inherit;
    text-decoration: none;
}
.forum-related-box a strong { display: block; }
.forum-related-box a:hover strong { color: var(--forum-accent, var(--ocp-primary)); }

.forum-board-actions { margin: 18px 0 18px; }
.forum-topic-list-card {
    border-radius: 18px;
    overflow: hidden;
}
.forum-list-toolbar {
    padding: 14px 18px;
    background: #f8fafc;
    border-bottom: 1px solid var(--ocp-border);
}
.forum-list-toolbar button {
    color: var(--ocp-muted);
    font-size: .84rem;
    text-transform: uppercase;
    letter-spacing: .035em;
    background: transparent;
}
.forum-topic-list { display: grid; }
.forum-board-topic-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 130px;
    gap: 16px;
    padding: 20px 18px;
    border-bottom: 1px solid var(--ocp-border);
    align-items: start;
}
.forum-board-topic-row:last-child { border-bottom: 0; }
.forum-board-topic-row:hover { background: color-mix(in srgb, var(--forum-accent, var(--ocp-primary)) 5%, #fff); }
.forum-board-topic-title {
    display: inline-block;
    color: var(--ocp-text);
    font-weight: 950;
    text-decoration: none;
    margin-bottom: 4px;
}
.forum-board-topic-title:hover { color: var(--forum-accent, var(--ocp-primary)); }
.forum-board-topic-sub,
.forum-board-topic-main p,
.forum-board-latest,
.forum-board-topic-stats {
    color: var(--ocp-muted);
    font-weight: 700;
}
.forum-board-topic-main p {
    margin: 12px 0;
    line-height: 1.55;
}
.forum-board-latest {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: .92rem;
}
.forum-board-topic-stats {
    display: grid;
    grid-template-columns: auto auto;
    gap: 3px 8px;
    justify-content: end;
    text-align: right;
    font-size: .9rem;
}
.forum-board-topic-stats strong { color: var(--ocp-text); }
.forum-board-footer-links {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin-top: 26px;
}
.forum-board-footer-links a {
    color: var(--ocp-text);
    text-decoration: none;
    font-weight: 850;
}
.forum-board-footer-links a:hover { color: var(--forum-accent, var(--ocp-primary)); }

@media (max-width: 850px) {
    .forum-topic-title-card,
    .forum-board-header-card,
    .forum-topic-meta-strip { flex-direction: column; align-items: flex-start; }
    .forum-post-card { grid-template-columns: 1fr; }
    .forum-post-author-panel { border-right: 0; border-bottom: 1px solid var(--ocp-border); }
    .forum-topic-bottom-grid { grid-template-columns: 1fr; }
    .forum-board-topic-row { grid-template-columns: 34px minmax(0,1fr); }
    .forum-board-topic-stats { grid-column: 2; justify-content: start; text-align: left; grid-template-columns: repeat(4, auto); }
}
@media (max-width: 560px) {
    .forum-board-page,
    .forum-reading-page { padding-top: 18px; }
    .forum-topic-title-card,
    .forum-board-header-card,
    .forum-post-content-panel { padding: 20px; }
    .forum-above-thread-actions { justify-content: flex-start; }
    .forum-above-thread-actions .btn { width: 100%; }
}

/* Forum permission/reply upgrade */
.admin-subpanel {
    border: 1px solid var(--ocp-border);
    background: color-mix(in srgb, var(--ocp-primary) 4%, #fff);
    border-radius: 18px;
    padding: 18px;
    margin-top: 8px;
}
.admin-subpanel h3 {
    font-size: 1.05rem;
    font-weight: 950;
    margin: 0 0 4px;
}
.forum-public-modal { z-index: 3000; }
.forum-reply-compose {
    align-items: flex-start;
}
.forum-reply-compose form {
    flex: 1;
}
.forum-reply-compose textarea {
    border-radius: 14px;
    border-color: var(--ocp-border);
    resize: vertical;
}
.forum-post-footer-actions a,
.forum-post-footer-actions button {
    border: 0;
    background: transparent;
    color: var(--forum-accent, var(--ocp-primary));
    font-weight: 900;
    text-decoration: none;
}
.forum-reply-card {
    margin-top: 18px;
}
.forum-topic-header-actions .dropdown-menu,
.forum-above-thread-actions .dropdown-menu {
    border-radius: 14px;
    border-color: var(--ocp-border);
    box-shadow: 0 22px 60px rgba(15,23,42,.12);
}
.forum-topic-header-actions form,
.forum-above-thread-actions form {
    margin: 0;
}


/* Invision-style composer + quote upgrade */
.forum-create-page { padding: 54px 0 80px; background: linear-gradient(180deg, color-mix(in srgb, var(--forum-accent, var(--ocp-primary)) 10%, #fff), var(--ocp-bg) 280px); }
.forum-create-shell { max-width: 1180px; }
.forum-create-topbar { margin-bottom: 22px; }
.forum-create-topbar h1 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 950; margin: 14px 0 6px; color: var(--ocp-text); }
.forum-create-topbar p { color: var(--ocp-muted); margin: 0; }
.forum-create-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.forum-create-main-card, .forum-create-side-card, .forum-composer-card, .forum-login-reply-card, .forum-related-strip { background: var(--ocp-surface); border: 1px solid var(--ocp-border); border-radius: 18px; box-shadow: 0 18px 55px rgba(15,23,42,.07); overflow: hidden; }
.forum-create-tabs { display:flex; background: color-mix(in srgb, var(--forum-accent, var(--ocp-primary)) 16%, var(--ocp-surface)); border-bottom: 1px solid var(--ocp-border); }
.forum-create-tabs span { padding: 14px 20px; font-weight: 900; color: var(--ocp-muted); }
.forum-create-tabs span.active { background: var(--ocp-surface); color: var(--ocp-text); border-top: 4px solid var(--forum-accent, var(--ocp-primary)); }
.forum-create-fields { padding: 22px; }
.forum-create-fields label { display: block; font-weight: 900; color: var(--ocp-text); margin: 18px 0 8px; }
.forum-create-fields label strong { color: #dc2626; font-size: .7rem; text-transform: uppercase; margin-left: 6px; }
.forum-title-input { min-height: 48px; border-radius: 12px; }
.forum-rich-textarea { border-radius: 0 0 14px 14px; min-height: 280px; resize: vertical; }
.forum-editor-toolbar { display:flex; flex-wrap: wrap; gap: 6px; background: color-mix(in srgb, var(--forum-accent, var(--ocp-primary)) 5%, #fff); border: 1px solid var(--ocp-border); border-bottom: 0; border-radius: 14px 14px 0 0; padding: 9px; }
.forum-editor-toolbar button { border: 0; background: transparent; color: var(--ocp-text); font-weight: 900; padding: 7px 10px; border-radius: 9px; }
.forum-editor-toolbar button:hover { background: color-mix(in srgb, var(--forum-accent, var(--ocp-primary)) 12%, #fff); color: var(--forum-accent, var(--ocp-primary)); }
.forum-attachment-strip { margin-top: 10px; border: 1px dashed var(--ocp-border); border-radius: 14px; padding: 14px; display:flex; justify-content:space-between; gap:12px; color: var(--ocp-muted); }
.forum-switch-line { display:flex !important; gap:8px; align-items:center; font-weight:700 !important; }
.forum-create-side-card { padding: 20px; position: sticky; top: 98px; }
.forum-create-side-card h3 { font-size: 1.1rem; font-weight: 950; margin: 0 0 6px; }
.forum-create-side-card p, .forum-muted-note { color: var(--ocp-muted); font-size: .9rem; }
.forum-create-side-card label { display:flex; gap:8px; align-items:center; padding: 10px 0; border-top: 1px solid var(--ocp-border); font-weight: 750; }
.forum-create-submit { display:flex; gap:10px; justify-content:flex-end; margin-top: 18px; }
.forum-composer-card { margin-top: 22px; padding: 18px; display:grid; grid-template-columns: 220px minmax(0,1fr); gap: 20px; }
.forum-composer-author { display:flex; gap:12px; align-items:center; align-self:start; }
.forum-composer-author small { display:block; color: var(--ocp-muted); }
.forum-composer-form textarea { border-radius: 0 0 14px 14px; resize: vertical; }
.forum-composer-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:12px; color: var(--ocp-muted); }
.forum-login-reply-card { margin-top:22px; padding:20px; display:flex; justify-content:space-between; align-items:center; gap:14px; }
.forum-quote-block { border-left: 4px solid var(--forum-accent, var(--ocp-primary)); background: color-mix(in srgb, var(--forum-accent, var(--ocp-primary)) 6%, #fff); padding: 12px 14px; border-radius: 12px; margin: 0 0 16px; color: var(--ocp-muted); }
.forum-quote-block p { margin: 0 0 6px; }
.forum-quote-block p:last-child { margin-bottom: 0; }
.forum-related-strip { margin-top:24px; padding:20px; }
.forum-related-strip h3 { font-size:1.2rem; font-weight:950; margin-bottom:12px; }
.forum-related-strip > div { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:12px; }
.forum-related-strip a { display:block; padding:14px; border:1px solid var(--ocp-border); border-radius:14px; text-decoration:none; color:var(--ocp-text); }
.forum-related-strip a span { display:block; color:var(--ocp-muted); font-size:.9rem; margin-top:4px; }
.forum-post-footer-actions button { cursor:pointer; }
@media (max-width: 950px) { .forum-create-layout, .forum-composer-card { grid-template-columns: 1fr; } .forum-create-side-card { position: static; } }

/* Self-hosted editor */
.ocp-editor { border: 1px solid var(--ocp-border); border-radius: 16px; overflow: hidden; background: var(--ocp-surface); }
.ocp-editor-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px; border-bottom: 1px solid var(--ocp-border); background: rgba(248,250,252,.86); }
.ocp-editor-btn { border: 0; background: transparent; color: var(--ocp-text); font-weight: 800; padding: 7px 10px; border-radius: 10px; }
.ocp-editor-btn:hover { background: rgba(37,99,235,.1); color: var(--ocp-primary); }
.ocp-editor-area { min-height: 230px; padding: 16px; outline: none; line-height: 1.65; color: var(--ocp-text); }
.ocp-editor-area:focus { box-shadow: inset 0 0 0 2px rgba(37,99,235,.2); }
.ocp-editor-area blockquote, .forum-quote-block, .rich-content blockquote { border-left: 4px solid var(--forum-accent, var(--ocp-primary)); background: rgba(37,99,235,.07); padding: 12px 16px; border-radius: 12px; margin: 12px 0; }
.forum-create-layout .ocp-editor-area { min-height: 360px; }
.admin-modal .ocp-editor-area { min-height: 260px; max-height: 42vh; overflow: auto; }
.selection-quote-bubble { position: absolute; z-index: 99999; border: 0; border-radius: 999px; background: var(--ocp-primary); color: #fff; font-weight: 800; padding: 8px 12px; box-shadow: 0 14px 30px rgba(15,23,42,.22); }
.forum-mod-actions { display: flex; gap: 10px; align-items: center; }
.forum-mod-actions form { display: inline; }
.forum-mod-actions button { border: 0; background: transparent; color: var(--ocp-muted); font-weight: 800; padding: 0; }
.forum-mod-actions button:hover { color: var(--ocp-primary); }

/* stronger modal stacking/scroll repair */
.modal-backdrop { z-index: 20000 !important; }
.modal { z-index: 20010 !important; }
.admin-modal .modal-dialog { max-height: calc(100vh - 48px) !important; margin-top: 24px !important; margin-bottom: 24px !important; }
.admin-modal .modal-content { max-height: calc(100vh - 48px) !important; overflow: hidden; }
.admin-modal .modal-body { overflow-y: auto !important; }


/* Real self-hosted TinyMCE integration */
.tox.tox-tinymce { border-radius: 16px !important; border-color: var(--ocp-border) !important; overflow: hidden; }
.tox .tox-toolbar__primary, .tox .tox-toolbar-overlord { background: #f8fafc !important; }
.tox .tox-edit-area::before { border-color: var(--ocp-primary) !important; }
.tox-tinymce-aux, .tox .tox-dialog-wrap { z-index: 20000 !important; }
.admin-modal .tox.tox-tinymce { min-height: 260px; }
.forum-create-fields .tox.tox-tinymce { min-height: 390px; }
.forum-composer-card .tox.tox-tinymce { min-height: 300px; }
.modal.show { z-index: 12000 !important; }
.modal-backdrop.show { z-index: 11990 !important; }
.admin-modal .modal-dialog { max-height: calc(100vh - 36px); margin-top: 18px; margin-bottom: 18px; }
.admin-modal .modal-content { max-height: calc(100vh - 36px); overflow: hidden; }
.admin-modal .modal-body { overflow-y: auto; }


/* Admin forum topic modal polish */
.admin-toggle-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    background: rgba(37, 99, 235, 0.06);
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: 16px;
}
.admin-toggle-strip .form-check {
    margin: 0;
    padding: 8px 12px 8px 34px;
    background: #fff;
    border: 1px solid var(--cp-border, #dbe3ef);
    border-radius: 999px;
    font-weight: 700;
}
.tox.ocp-editor-invalid,
.tox-tinymce.ocp-editor-invalid {
    outline: 2px solid #dc2626;
    outline-offset: 2px;
}


/* =========================================================
   Permissions modal polish + group select-all buttons
   ========================================================= */
.admin-modal .modal-content,
.admin-modal .modal-content > form {
    justify-content: flex-start !important;
}
.admin-modal .modal-header {
    margin-top: 0 !important;
}
.admin-modal .permission-builder {
    border: 1px solid var(--ocp-border);
    border-radius: 20px;
    background: color-mix(in srgb, var(--ocp-surface-alt), #fff 38%);
    padding: 18px;
}
.admin-modal .permission-builder-head {
    margin-bottom: 16px;
}
.admin-modal .permission-group-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)) !important;
    gap: 14px !important;
}
.permission-group-box {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--ocp-border);
    border-radius: 18px;
    padding: 14px;
    background: var(--ocp-surface);
}
.permission-group-box-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ocp-border);
}
.permission-group-box-head strong {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}
.permission-select-all {
    border: 1px solid color-mix(in srgb, var(--ocp-primary), transparent 68%);
    background: color-mix(in srgb, var(--ocp-primary), transparent 92%);
    color: var(--ocp-primary);
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 850;
    padding: 6px 10px;
    white-space: nowrap;
}
.permission-select-all:hover {
    background: var(--ocp-primary);
    color: #fff;
}
.permission-group-box label {
    border-radius: 12px;
    padding: 8px 8px;
    margin: 0 !important;
}
.permission-group-box label:hover {
    background: color-mix(in srgb, var(--ocp-primary), transparent 94%);
}
.permission-group-box label input {
    margin-right: 7px;
}

/* Stronger hidden/deleted forum states so moderation status is obvious */
.forum-post-card.is-hidden,
.forum-board-topic-row.is-hidden,
.forum-topic-title-card.is-hidden {
    opacity: .72 !important;
    filter: grayscale(.35) saturate(.75) !important;
    background:
        repeating-linear-gradient(135deg, rgba(100,116,139,.11), rgba(100,116,139,.11) 8px, rgba(255,255,255,.56) 8px, rgba(255,255,255,.56) 16px),
        color-mix(in srgb, var(--ocp-surface), #94a3b8 12%) !important;
    border-color: rgba(100,116,139,.42) !important;
}
.forum-post-card.is-deleted,
.forum-board-topic-row.is-deleted,
.forum-topic-title-card.is-deleted {
    opacity: .58 !important;
    filter: grayscale(.75) saturate(.55) !important;
    background:
        repeating-linear-gradient(135deg, rgba(15,23,42,.12), rgba(15,23,42,.12) 8px, rgba(239,68,68,.12) 8px, rgba(239,68,68,.12) 16px),
        color-mix(in srgb, var(--ocp-surface), #64748b 18%) !important;
    border-color: rgba(239,68,68,.52) !important;
}
.forum-post-card.is-hidden::before,
.forum-post-card.is-deleted::before {
    content: attr(data-moderation-state);
    display: block;
    grid-column: 1 / -1;
    padding: 8px 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .74rem;
    color: var(--ocp-muted);
    border-bottom: 1px solid rgba(100,116,139,.22);
}
.forum-post-card.is-deleted::before { color: #991b1b; }


/* =========================================================
   2026-05 OG + ADMIN MODAL HARD FIX
   Stops long admin modals opening halfway down / hidden behind header.
   ========================================================= */
.admin-modal.modal,
.modal.admin-modal {
    padding: 0 !important;
    overflow: hidden !important;
}
.admin-modal .modal-dialog,
.admin-modal .modal-dialog.modal-dialog-centered,
.admin-modal .modal-dialog.modal-dialog-scrollable {
    margin-top: 18px !important;
    margin-bottom: 18px !important;
    height: calc(100dvh - 36px) !important;
    max-height: calc(100dvh - 36px) !important;
    align-items: stretch !important;
    transform: none !important;
}
.admin-modal .modal-content,
.admin-modal .modal-content > form {
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}
.admin-modal .modal-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 4 !important;
    background: linear-gradient(90deg, rgba(37,99,235,.11), #fff 58%) !important;
}
.admin-modal .modal-footer {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 4 !important;
    background: rgba(255,255,255,.96) !important;
    backdrop-filter: blur(10px);
}
.admin-modal .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding-top: 18px !important;
}
.admin-modal .modal-body, 
.admin-modal .modal-content,
.admin-modal .modal-content > form {
    scroll-behavior: auto !important;
}


/* =========================================================
   FINAL ADMIN MODAL + THREAD EVENT + CONTENT POLISH
   ========================================================= */
.admin-modal.modal.show {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 14px 0 !important;
    overflow: hidden !important;
}
.admin-modal .modal-dialog,
.admin-modal .modal-dialog.modal-dialog-centered,
.admin-modal .modal-dialog.modal-dialog-scrollable {
    margin: 0 auto !important;
    top: 0 !important;
    transform: none !important;
    height: calc(100dvh - 28px) !important;
    max-height: calc(100dvh - 28px) !important;
    align-self: flex-start !important;
}
.admin-modal .modal-dialog::before,
.admin-modal .modal-dialog::after,
.admin-modal .modal-content::before,
.admin-modal .modal-content::after,
.admin-modal .modal-content > form::before,
.admin-modal .modal-content > form::after { display: none !important; content: none !important; }
.admin-modal .modal-content,
.admin-modal .modal-content > form {
    justify-content: flex-start !important;
    align-items: stretch !important;
}
.admin-modal .modal-header {
    flex-shrink: 0 !important;
    margin: 0 !important;
    top: 0 !important;
}
.admin-modal .modal-body {
    scroll-padding-top: 0 !important;
}

.forum-timeline-event-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    max-width: min(760px, 100%);
    margin: 16px auto;
    padding: 10px 14px;
    border: 1px solid color-mix(in srgb, var(--forum-accent, var(--ocp-primary)), transparent 72%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--forum-accent, var(--ocp-primary)), white 92%);
    box-shadow: 0 10px 24px rgba(15,23,42,.06);
    color: var(--ocp-text);
}
.forum-timeline-event-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--forum-accent, var(--ocp-primary));
    color: #fff;
    font-size: .84rem;
    font-weight: 900;
    line-height: 1;
}
.forum-timeline-event-body {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}
.forum-timeline-event-body strong {
    font-weight: 900;
    letter-spacing: -.015em;
}
.forum-timeline-event-body time {
    color: var(--ocp-muted);
    font-size: .88rem;
    font-weight: 750;
    white-space: nowrap;
}

.forum-row.rich-forum-row,
.forum-row {
    align-items: center !important;
}
.forum-row .forum-icon {
    align-self: center !important;
    flex: 0 0 auto;
}
.forum-row .forum-info {
    min-width: 0;
}
.forum-row .forum-info p {
    margin: 3px 0 5px;
    line-height: 1.45;
}
.forum-board-topic-row .forum-icon {
    align-self: start;
    margin-top: 2px;
}
.forum-board-topic-sub,
.forum-board-latest {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.official-document-expanded .government-body {
    color: var(--ocp-muted);
    line-height: 1.75;
    font-size: 1.03rem;
    max-width: 980px;
}
.government-section-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    margin: 26px 0 12px;
}
.government-info-card {
    border: 1px solid var(--ocp-border);
    border-radius: 20px;
    padding: 20px;
    background: linear-gradient(180deg, #fff, var(--ocp-surface-alt));
}
.government-info-card h2 {
    font-size: 1.25rem;
    margin-bottom: 12px;
}
.government-info-card li {
    margin: 8px 0;
}
.rules-layout {
    display: grid;
    gap: 22px;
}
.rules-layout section {
    border: 1px solid var(--ocp-border);
    border-radius: 20px;
    background: var(--ocp-surface-alt);
    padding: 22px;
}
.rules-layout h2 { margin-bottom: 12px; }


/* 2026-05 SEO/modal polish: admin modals must open at the top with no blank offset. */
.modal.admin-modal {
    padding: 0 !important;
    overflow: hidden !important;
}
.modal.admin-modal .modal-dialog,
.modal.admin-modal .modal-dialog.modal-dialog-centered {
    transform: none !important;
    align-items: stretch !important;
    margin-top: 12px !important;
    margin-bottom: 12px !important;
    height: calc(100dvh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
}
.modal.admin-modal .modal-content,
.modal.admin-modal .modal-content > form {
    height: 100% !important;
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
.modal.admin-modal .modal-header,
.modal.admin-modal .modal-footer {
    flex: 0 0 auto !important;
}
.modal.admin-modal .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    scroll-behavior: auto !important;
}


/* =========================================================
   FINAL 2026-05 ADMIN MODAL RESET + FORUM ACL UI
   Fixes long modals opening halfway down by disabling centering,
   autofocus scrolling, and any inherited transform/offset behavior.
   ========================================================= */
html.modal-open, body.modal-open { overflow: hidden !important; }
.modal.admin-modal, .admin-modal.modal {
    position: fixed !important;
    inset: 0 !important;
    padding: 12px 0 !important;
    overflow: hidden !important;
    display: none;
    align-items: flex-start !important;
    justify-content: center !important;
    z-index: 30010 !important;
}
.modal.admin-modal.show, .admin-modal.modal.show { display: flex !important; }
.modal.admin-modal .modal-dialog,
.modal.admin-modal .modal-dialog.modal-dialog-centered,
.modal.admin-modal .modal-dialog.modal-dialog-scrollable,
.admin-modal.modal .modal-dialog,
.admin-modal.modal .modal-dialog.modal-dialog-centered,
.admin-modal.modal .modal-dialog.modal-dialog-scrollable {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    translate: none !important;
    margin: 0 auto !important;
    width: min(1180px, calc(100vw - 32px)) !important;
    max-width: min(1180px, calc(100vw - 32px)) !important;
    height: calc(100dvh - 24px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 24px) !important;
    display: flex !important;
    align-items: stretch !important;
}
.modal.admin-modal .modal-content,
.admin-modal.modal .modal-content {
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}
.modal.admin-modal .modal-content > form,
.admin-modal.modal .modal-content > form {
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
}
.modal.admin-modal .modal-header,
.modal.admin-modal .modal-footer,
.modal.admin-modal .modal-content > form > .modal-header,
.modal.admin-modal .modal-content > form > .modal-footer,
.admin-modal.modal .modal-header,
.admin-modal.modal .modal-footer,
.admin-modal.modal .modal-content > form > .modal-header,
.admin-modal.modal .modal-content > form > .modal-footer {
    flex: 0 0 auto !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    z-index: 5 !important;
}
.modal.admin-modal .modal-body,
.modal.admin-modal .modal-content > form > .modal-body,
.admin-modal.modal .modal-body,
.admin-modal.modal .modal-content > form > .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scroll-behavior: auto !important;
    overscroll-behavior: contain !important;
    padding-bottom: 110px !important;
}
.modal-backdrop { z-index: 30000 !important; }
body.modal-open .site-header { z-index: 1000 !important; }

.forum-acl-builder {
    border: 1px solid var(--ocp-border);
    background: color-mix(in srgb, var(--ocp-surface-alt), #fff 42%);
    border-radius: 20px;
    padding: 18px;
}
.forum-acl-builder-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 14px;
}
.forum-acl-row {
    display: grid;
    grid-template-columns: minmax(190px, 260px) 1fr auto;
    gap: 14px;
    align-items: start;
    padding: 14px;
    border: 1px solid var(--ocp-border);
    border-radius: 16px;
    background: var(--ocp-surface);
    margin-bottom: 12px;
}
.forum-acl-perms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}
.forum-acl-check {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--ocp-border), transparent 18%);
    border-radius: 12px;
    background: color-mix(in srgb, var(--ocp-surface-alt), #fff 55%);
    font-weight: 800;
    font-size: .88rem;
}
.forum-acl-check input { margin: 0; }
@media (max-width: 900px) {
    .forum-acl-row { grid-template-columns: 1fr; }
}

/* =========================================================
   FINAL ADMIN MODAL START POSITION FIX
   Keep every ACP modal pinned to the top with the header visible.
   ========================================================= */
.modal.admin-modal.show,
.admin-modal.modal.show {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 12px 0 !important;
    overflow: hidden !important;
}
.modal.admin-modal .modal-dialog,
.admin-modal.modal .modal-dialog,
.modal.admin-modal .modal-dialog.modal-dialog-scrollable,
.admin-modal.modal .modal-dialog.modal-dialog-scrollable,
.modal.admin-modal .modal-dialog.modal-dialog-centered,
.admin-modal.modal .modal-dialog.modal-dialog-centered {
    margin: 0 auto !important;
    transform: none !important;
    top: 0 !important;
    align-self: flex-start !important;
    height: calc(100dvh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
}
.modal.admin-modal .modal-content,
.admin-modal.modal .modal-content,
.modal.admin-modal .modal-content > form,
.admin-modal.modal .modal-content > form {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    overflow: hidden !important;
}
.modal.admin-modal .modal-header,
.admin-modal.modal .modal-header {
    order: 0 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}
.modal.admin-modal .modal-body,
.admin-modal.modal .modal-body {
    order: 1 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding-bottom: 110px !important;
}
.modal.admin-modal .modal-footer,
.admin-modal.modal .modal-footer {
    order: 2 !important;
    flex: 0 0 auto !important;
}


/* Pending approval + multi-role forum author polish */
.forum-author-role-stack {
    display: grid;
    gap: 5px;
    margin-top: 8px;
}
.forum-author-role-stack .forum-author-role {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(37, 99, 235, .08);
    color: var(--ocp-muted);
    font-size: .82rem;
    font-weight: 800;
    line-height: 1.2;
}
.forum-post-card.is-pending {
    opacity: 1 !important;
    filter: none !important;
    background:
        linear-gradient(135deg, rgba(245, 158, 11, .13), rgba(255,255,255,.96)) !important;
    border-color: rgba(245, 158, 11, .55) !important;
    box-shadow: inset 6px 0 0 #f59e0b, 0 18px 44px rgba(245,158,11,.12) !important;
}
.forum-post-card.is-pending::before {
    content: none !important;
}
.forum-post-topline-right {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}
.forum-approval-corner {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 5px 9px;
    background: rgba(245, 158, 11, .16);
    color: #92400e;
    border: 1px solid rgba(245, 158, 11, .38);
    font-size: .74rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.forum-pending-message {
    background: rgba(245,158,11,.16) !important;
    color: #92400e !important;
    border: 1px solid rgba(245,158,11,.35) !important;
}

/* =========================================================
   2026-05 FINAL ACP MODAL + ACCESS EDITOR FIX
   Removes blank top gaps on large ACP modals and replaces ugly permission dropdowns.
   ========================================================= */
html.modal-open,
body.modal-open { overflow: hidden !important; }
.modal.admin-modal,
.admin-modal.modal {
    position: fixed !important;
    inset: 0 !important;
    display: none !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 14px !important;
    overflow: hidden !important;
    z-index: 30010 !important;
}
.modal.admin-modal.show,
.admin-modal.modal.show { display: flex !important; }
.modal.admin-modal .modal-dialog,
.admin-modal.modal .modal-dialog,
.modal.admin-modal .modal-dialog.modal-dialog-centered,
.admin-modal.modal .modal-dialog.modal-dialog-centered,
.modal.admin-modal .modal-dialog.modal-dialog-scrollable,
.admin-modal.modal .modal-dialog.modal-dialog-scrollable {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    translate: none !important;
    align-self: flex-start !important;
    margin: 0 auto !important;
    width: min(1220px, calc(100vw - 28px)) !important;
    max-width: min(1220px, calc(100vw - 28px)) !important;
    height: calc(100dvh - 28px) !important;
    max-height: calc(100dvh - 28px) !important;
    min-height: 0 !important;
    display: flex !important;
}
.modal.admin-modal .modal-content,
.admin-modal.modal .modal-content {
    position: relative !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}
.modal.admin-modal .modal-content > form,
.admin-modal.modal .modal-content > form {
    position: relative !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}
.modal.admin-modal .modal-header,
.admin-modal.modal .modal-header,
.modal.admin-modal .modal-content > form > .modal-header,
.admin-modal.modal .modal-content > form > .modal-header {
    grid-row: 1 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    order: 0 !important;
    position: relative !important;
    top: 0 !important;
    z-index: 10 !important;
}
.modal.admin-modal .modal-body,
.admin-modal.modal .modal-body,
.modal.admin-modal .modal-content > form > .modal-body,
.admin-modal.modal .modal-content > form > .modal-body {
    grid-row: 2 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding-bottom: 120px !important;
    scroll-behavior: auto !important;
}
.modal.admin-modal .modal-footer,
.admin-modal.modal .modal-footer,
.modal.admin-modal .modal-content > form > .modal-footer,
.admin-modal.modal .modal-content > form > .modal-footer {
    grid-row: 3 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    order: 2 !important;
    position: relative !important;
    bottom: 0 !important;
    z-index: 10 !important;
}
.modal-backdrop { z-index: 30000 !important; }
.access-editor-grid { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 18px; align-items: start; }
.access-editor-card { border: 1px solid var(--ocp-border); border-radius: 20px; background: var(--ocp-surface); padding: 16px; }
.access-editor-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.access-editor-head h6 { margin: 0 0 4px; font-weight: 900; }
.access-editor-head p { margin: 0; color: var(--ocp-muted); font-size: .92rem; }
.role-check-grid, .permission-picker-grid.compact { display: grid; gap: 12px; }
.permission-picker-grid.compact { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.role-check-group { border: 1px solid color-mix(in srgb, var(--ocp-border), transparent 12%); background: color-mix(in srgb, var(--ocp-surface-alt), #fff 45%); border-radius: 16px; padding: 12px; }
.role-check-group > strong { display: block; margin-bottom: 8px; font-weight: 900; }
.permission-check-row { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; border-top: 1px solid color-mix(in srgb, var(--ocp-border), transparent 35%); cursor: pointer; }
.permission-check-row:first-of-type { border-top: 0; }
.permission-check-row input { margin-top: 3px; }
.permission-check-row span { font-weight: 800; }
.permission-check-row small { display: block; color: var(--ocp-muted); font-weight: 700; }
.permission-preview-box { display: flex; flex-wrap: wrap; gap: 8px; }
.permission-preview-box span, .permission-preview-box em { display: inline-flex; align-items: center; padding: 7px 10px; border-radius: 999px; border: 1px solid var(--ocp-border); background: var(--ocp-surface-alt); font-weight: 800; font-size: .86rem; color: var(--ocp-text); }
.forum-role-select { display: none !important; }
@media (max-width: 1000px) { .access-editor-grid { grid-template-columns: 1fr; } }


/* Profile/nav polish update */
.user-nav-cluster { gap: 6px; }
.nav-profile-avatar-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.nav-profile-avatar-link .nav-avatar,
.nav-profile-avatar-link .nav-avatar-fallback { transition: transform .16s ease, box-shadow .16s ease; }
.nav-profile-avatar-link:hover .nav-avatar,
.nav-profile-avatar-link:hover .nav-avatar-fallback { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(37,99,235,.22); }
.user-nav-cluster .dropdown-toggle::after { margin-left: .35rem; }

.profile-container { max-width: 1180px; }
.profile-page-shell { background: linear-gradient(180deg, rgba(37,99,235,.08), transparent 360px), var(--ocp-bg); min-height: 70vh; }
.profile-hero-wrap { padding: 44px 0 0; }
.profile-cover-card-v2 { min-height: 255px; border-radius: 28px; overflow: hidden; border: 1px solid rgba(255,255,255,.4); box-shadow: 0 28px 70px rgba(15,23,42,.14); }
.profile-cover-card-v2::before { content:""; position:absolute; inset:0; background: linear-gradient(135deg, rgba(15,23,42,.18), rgba(37,99,235,.20)), var(--profile-cover), linear-gradient(135deg,#dbeafe,#f8fafc); background-size: cover; background-position: center; }
.profile-cover-card-v2::after { background: linear-gradient(180deg, rgba(15,23,42,0) 25%, rgba(15,23,42,.74)); }
.profile-identity-row-v2 { bottom: 26px; gap: 20px; align-items: center; }
.profile-identity-main h1 { text-shadow: 0 2px 18px rgba(15,23,42,.3); }
.profile-statbar-v2 { position: relative; z-index: 5; display: grid; grid-template-columns: repeat(4, 1fr); max-width: calc(100% - 48px); margin: -22px auto 0; background: var(--ocp-surface); border: 1px solid var(--ocp-border); border-radius: 22px; box-shadow: 0 22px 50px rgba(15,23,42,.10); overflow: hidden; }
.profile-statbar-v2 div { padding: 18px 22px; border-right: 1px solid var(--ocp-border); }
.profile-statbar-v2 div:last-child { border-right: 0; }
.profile-statbar-v2 strong, .profile-statbar-v2 span { display: block; }
.profile-statbar-v2 strong { font-weight: 950; color: var(--ocp-text); }
.profile-statbar-v2 span { color: var(--ocp-muted); font-size: .88rem; margin-top: 3px; }
.profile-layout-v2 { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; padding-top: 34px; padding-bottom: 70px; }
.profile-left-col, .profile-main-col { min-width: 0; }
.profile-left-col { display: grid; gap: 16px; align-content: start; }
.profile-about-card p { line-height: 1.7; }
.profile-position-row { padding: 12px 0; border-bottom: 1px solid var(--ocp-border); }
.profile-position-row:last-child { border-bottom: 0; }
.profile-position-row strong, .profile-position-row span { display:block; }
.profile-position-row span { color: var(--ocp-muted); font-size: .9rem; margin-top: 3px; }
.profile-tabs-v2 { margin-bottom: 14px; border-radius: 18px; }
.profile-feed-card-v2 { padding: 0; overflow: hidden; }
.profile-feed-heading { display:flex; justify-content:space-between; gap:12px; padding: 22px 24px; border-bottom: 1px solid var(--ocp-border); background: linear-gradient(180deg, rgba(37,99,235,.04), transparent); }
.profile-feed-heading h2 { margin: 0 0 4px; }
.profile-feed-heading p { margin: 0; color: var(--ocp-muted); }
.profile-activity-item-v2 { padding: 20px 24px; border-top: 0; border-bottom: 1px solid var(--ocp-border); }
.profile-activity-item-v2:last-child { border-bottom: 0; }
.empty-state-mini { margin: 22px 24px; padding: 18px; border: 1px dashed var(--ocp-border); border-radius: 16px; color: var(--ocp-muted); background: rgba(15,23,42,.02); }
@media (max-width: 900px) {
  .profile-layout-v2 { grid-template-columns: 1fr; }
  .profile-statbar-v2 { grid-template-columns: repeat(2, 1fr); max-width: 100%; }
  .profile-statbar-v2 div:nth-child(2) { border-right: 0; }
  .profile-identity-row-v2 { align-items: flex-start; }
}

/* HARD FIX: public profile page layout */
.profile-page-shell {
    background: linear-gradient(180deg, rgba(37,99,235,.08) 0, rgba(37,99,235,.03) 260px, var(--ocp-bg) 520px) !important;
    min-height: 70vh !important;
    padding: 0 0 70px !important;
}
.profile-container {
    width: min(1120px, calc(100% - 32px)) !important;
    max-width: 1120px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.profile-hero-wrap {
    padding: 46px 0 0 !important;
    min-height: 0 !important;
}
.profile-cover-card,
.profile-cover-card-v2 {
    position: relative !important;
    min-height: 250px !important;
    height: 250px !important;
    width: 100% !important;
    border-radius: 26px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.55) !important;
    box-shadow: 0 28px 70px rgba(15,23,42,.16) !important;
    background: linear-gradient(135deg,#dbeafe,#eff6ff) !important;
}
.profile-cover-card::before,
.profile-cover-card-v2::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    background: linear-gradient(135deg, rgba(15,23,42,.18), rgba(37,99,235,.25)), var(--profile-cover), linear-gradient(135deg,#dbeafe,#eff6ff) !important;
    background-size: cover !important;
    background-position: center !important;
}
.profile-cover-card::after,
.profile-cover-card-v2::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background: linear-gradient(180deg, rgba(15,23,42,0) 35%, rgba(15,23,42,.72) 100%) !important;
    pointer-events: none !important;
}
.profile-cover-actions {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    z-index: 5 !important;
    display: flex !important;
    gap: 8px !important;
}
.profile-identity-row,
.profile-identity-row-v2 {
    position: absolute !important;
    left: 24px !important;
    right: 24px !important;
    bottom: 24px !important;
    z-index: 4 !important;
    display: flex !important;
    align-items: flex-end !important;
    gap: 18px !important;
}
.profile-page-avatar {
    width: 104px !important;
    height: 104px !important;
    flex: 0 0 104px !important;
    border-radius: 24px !important;
    border: 5px solid rgba(255,255,255,.9) !important;
    object-fit: cover !important;
    box-shadow: 0 18px 36px rgba(15,23,42,.22) !important;
    background: var(--ocp-primary) !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 2rem !important;
    font-weight: 950 !important;
    line-height: 1 !important;
}
.profile-identity-main {
    min-width: 0 !important;
    color: #fff !important;
    padding-bottom: 7px !important;
}
.profile-identity-main h1 {
    margin: 0 0 10px !important;
    color: #fff !important;
    font-size: clamp(2rem, 5vw, 3.35rem) !important;
    line-height: .95 !important;
    font-weight: 950 !important;
    letter-spacing: -.04em !important;
    text-shadow: 0 3px 24px rgba(15,23,42,.38) !important;
}
.profile-role-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
}
.profile-role-pills span {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.20) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    backdrop-filter: blur(8px) !important;
    font-weight: 850 !important;
    font-size: .83rem !important;
}
.profile-role-pills.stacked {
    display: grid !important;
    justify-items: start !important;
}
.profile-role-pills.stacked span {
    background: color-mix(in srgb, var(--ocp-primary), #fff 88%) !important;
    color: color-mix(in srgb, var(--ocp-primary), #0f172a 40%) !important;
    border: 1px solid color-mix(in srgb, var(--ocp-primary), transparent 78%) !important;
}
.profile-statbar-v2 {
    position: relative !important;
    z-index: 6 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    max-width: calc(100% - 56px) !important;
    margin: -22px auto 0 !important;
    background: var(--ocp-surface) !important;
    border: 1px solid var(--ocp-border) !important;
    border-radius: 20px !important;
    box-shadow: 0 22px 55px rgba(15,23,42,.12) !important;
    overflow: hidden !important;
}
.profile-statbar-v2 div { padding: 17px 22px !important; border-right: 1px solid var(--ocp-border) !important; }
.profile-statbar-v2 div:last-child { border-right: 0 !important; }
.profile-statbar-v2 strong { display: block !important; color: var(--ocp-text) !important; font-weight: 950 !important; font-size: 1rem !important; }
.profile-statbar-v2 span { display: block !important; color: var(--ocp-muted) !important; font-size: .86rem !important; margin-top: 3px !important; }
.profile-layout-v2 {
    display: grid !important;
    grid-template-columns: 300px minmax(0, 1fr) !important;
    gap: 24px !important;
    padding-top: 34px !important;
    padding-bottom: 74px !important;
}
.profile-left-col, .profile-main-col { min-width: 0 !important; }
.profile-left-col { display: grid !important; gap: 16px !important; align-content: start !important; }
.profile-side-card, .profile-feed-card-v2, .profile-tabs-v2 {
    background: var(--ocp-surface) !important;
    border: 1px solid var(--ocp-border) !important;
    border-radius: 20px !important;
    box-shadow: 0 18px 46px rgba(15,23,42,.06) !important;
}
.profile-side-card { padding: 20px !important; }
.profile-side-card h3 { margin: 0 0 12px !important; font-size: 1rem !important; font-weight: 950 !important; color: var(--ocp-text) !important; }
.profile-side-card p { margin: 0 !important; color: var(--ocp-muted) !important; line-height: 1.7 !important; }
.profile-info-row { display: flex !important; justify-content: space-between !important; gap: 12px !important; padding: 10px 0 !important; border-top: 1px solid var(--ocp-border) !important; }
.profile-info-row:first-of-type { border-top: 0 !important; }
.profile-info-row span { color: var(--ocp-muted) !important; }
.profile-info-row strong { color: var(--ocp-text) !important; text-align: right !important; }
.profile-position-row { padding: 12px 0 !important; border-bottom: 1px solid var(--ocp-border) !important; }
.profile-position-row:last-child { border-bottom: 0 !important; }
.profile-position-row strong { display:block !important; color: var(--ocp-text) !important; font-weight: 900 !important; }
.profile-position-row span { display:block !important; color: var(--ocp-muted) !important; margin-top: 3px !important; font-size: .9rem !important; }
.profile-tabs-v2 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    padding: 4px !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
}
.profile-tabs-v2 a {
    text-align: center !important;
    padding: 12px 14px !important;
    border-radius: 15px !important;
    text-decoration: none !important;
    color: var(--ocp-muted) !important;
    font-weight: 950 !important;
}
.profile-tabs-v2 a.active { background: var(--ocp-primary) !important; color: #fff !important; }
.profile-feed-card-v2 { padding: 0 !important; overflow: hidden !important; }
.profile-feed-heading { display:flex !important; justify-content:space-between !important; gap:12px !important; padding: 22px 24px !important; border-bottom: 1px solid var(--ocp-border) !important; background: linear-gradient(180deg, rgba(37,99,235,.05), transparent) !important; }
.profile-feed-heading h2 { margin: 0 0 4px !important; font-size: 1.15rem !important; font-weight: 950 !important; }
.profile-feed-heading p { margin: 0 !important; color: var(--ocp-muted) !important; }
.profile-activity-item, .profile-activity-item-v2 {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 20px 24px !important;
    border-bottom: 1px solid var(--ocp-border) !important;
    text-decoration: none !important;
    color: var(--ocp-text) !important;
}
.profile-activity-item:last-child, .profile-activity-item-v2:last-child { border-bottom: 0 !important; }
.profile-activity-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 14px !important;
    background: color-mix(in srgb, var(--ocp-primary), #fff 87%) !important;
    color: var(--ocp-primary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 950 !important;
}
.profile-activity-item strong { display:block !important; margin-bottom: 5px !important; color: var(--ocp-text) !important; font-weight: 950 !important; }
.profile-activity-item p { margin: 0 0 8px !important; color: var(--ocp-text) !important; line-height: 1.55 !important; }
.profile-activity-item span { color: var(--ocp-muted) !important; font-size: .9rem !important; }
.empty-state-mini { margin: 22px 24px !important; padding: 18px !important; border: 1px dashed var(--ocp-border) !important; border-radius: 16px !important; color: var(--ocp-muted) !important; background: rgba(15,23,42,.02) !important; }
@media (max-width: 900px) {
  .profile-cover-card, .profile-cover-card-v2 { height: auto !important; min-height: 310px !important; }
  .profile-identity-row, .profile-identity-row-v2 { align-items: flex-start !important; flex-direction: column !important; }
  .profile-statbar-v2 { grid-template-columns: repeat(2, 1fr) !important; max-width: 100% !important; }
  .profile-statbar-v2 div:nth-child(2) { border-right: 0 !important; }
  .profile-layout-v2 { grid-template-columns: 1fr !important; }
}


/* Profile photo / cover controls + refined profile layout */
.profile-cover-card-v2 {
    overflow: visible !important;
}
.profile-cover-card-v2::before,
.profile-cover-card-v2::after {
    border-radius: 26px !important;
    overflow: hidden !important;
}
.invision-cover-actions {
    align-items: stretch !important;
    top: 16px !important;
    right: 16px !important;
}
.profile-cover-action {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 36px !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    background: rgba(15,23,42,.56) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    text-decoration: none !important;
    font-size: .85rem !important;
    font-weight: 850 !important;
    backdrop-filter: blur(10px) !important;
    cursor: pointer !important;
}
.profile-cover-action:hover {
    background: rgba(15,23,42,.72) !important;
    color: #fff !important;
}
.profile-cover-menu {
    position: relative !important;
}
.profile-cover-menu summary {
    list-style: none !important;
}
.profile-cover-menu summary::-webkit-details-marker { display: none !important; }
.profile-cover-menu-panel {
    position: absolute !important;
    right: 0 !important;
    top: calc(100% + 10px) !important;
    min-width: 190px !important;
    z-index: 20 !important;
    border-radius: 10px !important;
    background: #111827 !important;
    box-shadow: 0 20px 46px rgba(0,0,0,.28) !important;
    padding: 8px !important;
}
.profile-cover-menu-panel::before {
    content: "" !important;
    position: absolute !important;
    right: 28px !important;
    top: -7px !important;
    border-left: 7px solid transparent !important;
    border-right: 7px solid transparent !important;
    border-bottom: 7px solid #111827 !important;
}
.profile-upload-choice {
    display: block !important;
    padding: 12px 14px !important;
    color: #fff !important;
    font-weight: 850 !important;
    cursor: pointer !important;
    border-radius: 8px !important;
}
.profile-upload-choice:hover { background: rgba(255,255,255,.08) !important; }
.profile-upload-choice input { display: none !important; }
.profile-avatar-wrap {
    position: relative !important;
    flex: 0 0 auto !important;
}
.profile-avatar-upload {
    position: absolute !important;
    left: -10px !important;
    bottom: -6px !important;
    z-index: 12 !important;
    margin: 0 !important;
}
.profile-avatar-upload label {
    width: 34px !important;
    height: 34px !important;
    border-radius: 999px !important;
    background: #111827 !important;
    color: #fff !important;
    border: 2px solid rgba(255,255,255,.85) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 10px 26px rgba(15,23,42,.28) !important;
    font-size: .9rem !important;
    position: relative !important;
}
.profile-avatar-upload input { display: none !important; }
.profile-avatar-upload span {
    position: absolute !important;
    left: 0 !important;
    bottom: calc(100% + 10px) !important;
    white-space: nowrap !important;
    background: #111827 !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 7px 10px !important;
    font-size: .78rem !important;
    font-weight: 850 !important;
    opacity: 0 !important;
    transform: translateY(4px) !important;
    pointer-events: none !important;
    transition: .16s ease !important;
}
.profile-avatar-upload label:hover span {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
.profile-primary-role-only span {
    font-size: .88rem !important;
    padding: 7px 12px !important;
}
.profile-layout-v2 .profile-left-col .profile-side-card:nth-child(2) {
    /* positions now follows about, keep it visually connected */
}
.profile-statbar-v2 {
    margin-top: -18px !important;
}
.profile-identity-row-v2 {
    bottom: 20px !important;
}
.profile-page-avatar {
    width: 112px !important;
    height: 112px !important;
    flex-basis: 112px !important;
}
.profile-role-pills.stacked span {
    margin-bottom: 4px !important;
}
@media (max-width: 760px) {
    .profile-cover-actions { left: 14px !important; right: 14px !important; justify-content: flex-end !important; flex-wrap: wrap !important; }
    .profile-identity-row-v2 { left: 18px !important; right: 18px !important; bottom: 18px !important; align-items: flex-end !important; }
    .profile-page-avatar { width: 88px !important; height: 88px !important; flex-basis: 88px !important; border-radius: 20px !important; }
    .profile-identity-main h1 { font-size: 2rem !important; }
    .profile-statbar-v2 { max-width: calc(100% - 20px) !important; }
}

/* Improved departments index */
.departments-index-page {
    overflow: hidden;
}

.departments-hero {
    position: relative;
    padding: 82px 0 54px;
    background:
        radial-gradient(circle at 85% 15%, rgba(37, 99, 235, .20), transparent 32%),
        linear-gradient(135deg, rgba(248, 250, 252, .98), rgba(239, 246, 255, .92));
    border-bottom: 1px solid var(--ocp-border);
}

.departments-hero::after {
    content: "";
    position: absolute;
    inset: auto -10% -90px auto;
    width: 520px;
    height: 260px;
    background: repeating-linear-gradient(135deg, rgba(37, 99, 235, .12) 0 1px, transparent 1px 18px);
    transform: rotate(-8deg);
    pointer-events: none;
}

.departments-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 42px;
    align-items: center;
}

.departments-hero-copy h1 {
    max-width: 780px;
    font-size: clamp(2.7rem, 6vw, 5.8rem);
    line-height: .94;
    font-weight: 950;
    letter-spacing: -.07em;
    margin: 12px 0 18px;
}

.departments-hero-copy p {
    max-width: 700px;
    font-size: 1.15rem;
    color: var(--ocp-muted);
    line-height: 1.75;
}

.departments-hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.departments-command-panel {
    background: var(--ocp-surface);
    border: 1px solid rgba(37, 99, 235, .14);
    border-radius: 28px;
    padding: 28px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .10);
}

.command-panel-topline {
    width: 140px;
    height: 12px;
    border-radius: 999px;
    background: var(--ocp-primary);
    margin-bottom: 22px;
}

.departments-command-panel h2,
.departments-toolbar h2,
.departments-recruitment-band h2 {
    font-weight: 900;
    letter-spacing: -.04em;
}

.departments-command-panel p,
.departments-toolbar p,
.departments-recruitment-band p {
    color: var(--ocp-muted);
}

.dept-stat-grid {
    display: grid;
    gap: 10px;
    margin-top: 20px;
}

.dept-stat-grid div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--ocp-border);
    padding-top: 12px;
}

.dept-stat-grid strong {
    color: var(--ocp-primary);
    font-size: 1.45rem;
    font-weight: 950;
}

.dept-stat-grid span {
    color: var(--ocp-muted);
    font-weight: 750;
}

.departments-featured-wrap {
    margin-top: -28px;
    position: relative;
    z-index: 2;
}

.department-featured-card {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center;
    padding: 26px;
    background: var(--ocp-surface);
    border: 1px solid var(--ocp-border);
    border-top: 6px solid var(--dept-accent, var(--ocp-primary));
    border-radius: 28px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .11);
}

.department-featured-card:hover {
    color: inherit;
    transform: translateY(-2px);
    box-shadow: 0 30px 80px rgba(15, 23, 42, .14);
}

.department-featured-media {
    min-height: 142px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 70% 20%, rgba(255,255,255,.24), transparent 30%),
        linear-gradient(135deg, color-mix(in srgb, var(--dept-accent, #2563eb) 88%, #000), var(--dept-accent, #2563eb));
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
}

.department-featured-media img {
    width: 86px;
    height: 86px;
    object-fit: contain;
    filter: drop-shadow(0 12px 18px rgba(0,0,0,.18));
}

.department-featured-media span {
    position: absolute;
    right: 16px;
    bottom: 12px;
    color: rgba(255,255,255,.9);
    font-size: 2.4rem;
    font-weight: 950;
    letter-spacing: -.06em;
}

.department-featured-copy h2 {
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    font-weight: 950;
    letter-spacing: -.06em;
    margin: 12px 0 8px;
}

.department-featured-copy p {
    color: var(--ocp-muted);
    max-width: 760px;
    line-height: 1.65;
}

.featured-meta-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.featured-meta-row span {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid var(--ocp-border);
    border-radius: 999px;
    background: rgba(248, 250, 252, .85);
    color: var(--ocp-muted);
    font-weight: 750;
}

.featured-meta-row strong {
    color: var(--ocp-text);
}

.department-featured-cta {
    align-self: stretch;
    display: grid;
    place-items: center;
    padding: 0 22px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--dept-accent, #2563eb) 10%, #fff);
    color: var(--dept-accent, var(--ocp-primary));
    font-weight: 900;
}

.departments-section {
    padding: 58px 0 48px;
}

.departments-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 24px;
}

.dept-filter-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.dept-filter-buttons button {
    border: 1px solid var(--ocp-border);
    border-radius: 999px;
    background: var(--ocp-surface);
    padding: 9px 14px;
    color: var(--ocp-muted);
    font-weight: 850;
}

.dept-filter-buttons button.active,
.dept-filter-buttons button:hover {
    border-color: rgba(37, 99, 235, .32);
    background: rgba(37, 99, 235, .09);
    color: var(--ocp-primary);
}

.departments-directory-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.department-directory-card {
    display: flex;
    flex-direction: column;
    background: var(--ocp-surface);
    border: 1px solid var(--ocp-border);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .07);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.department-directory-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--dept-accent, #2563eb) 32%, var(--ocp-border));
    box-shadow: 0 28px 70px rgba(15, 23, 42, .12);
}

.department-card-main {
    color: inherit;
    text-decoration: none;
}

.department-card-banner {
    min-height: 118px;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    background:
        radial-gradient(circle at 90% 0%, rgba(255,255,255,.28), transparent 28%),
        linear-gradient(135deg, color-mix(in srgb, var(--dept-accent, #2563eb) 92%, #000), var(--dept-accent, #2563eb));
}

.department-card-logo {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .92);
    display: grid;
    place-items: center;
    box-shadow: 0 14px 28px rgba(0,0,0,.14);
}

.department-card-logo img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.department-card-logo span {
    font-weight: 950;
    color: var(--dept-accent, var(--ocp-primary));
}

.department-card-code {
    color: rgba(255,255,255,.92);
    font-size: 2.4rem;
    font-weight: 950;
    letter-spacing: -.06em;
}

.department-card-content {
    padding: 22px;
}

.department-card-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    color: var(--ocp-muted);
    font-weight: 750;
    font-size: .92rem;
}

.department-directory-card .status-pill {
    background: color-mix(in srgb, var(--dept-accent, #2563eb) 11%, #fff);
    color: var(--dept-accent, var(--ocp-primary));
}

.department-card-content h3 {
    font-size: 1.75rem;
    font-weight: 950;
    letter-spacing: -.055em;
    margin: 14px 0 8px;
}

.department-card-content p {
    color: var(--ocp-muted);
    line-height: 1.65;
    min-height: 52px;
}

.department-info-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--ocp-border);
    border-radius: 16px;
    margin-top: 18px;
    background: var(--ocp-border);
}

.department-info-strip div {
    background: rgba(248,250,252,.78);
    padding: 12px;
}

.department-info-strip span,
.department-info-strip strong {
    display: block;
}

.department-info-strip span {
    color: var(--ocp-muted);
    font-size: .82rem;
    font-weight: 750;
}

.department-info-strip strong {
    color: var(--ocp-text);
    font-weight: 900;
    margin-top: 2px;
}

.department-card-lower {
    padding: 0 22px 22px;
    flex: 1;
}

.department-command-preview {
    display: grid;
    gap: 6px;
    padding-top: 16px;
    border-top: 1px solid var(--ocp-border);
}

.department-command-preview strong {
    font-weight: 900;
    font-size: .94rem;
}

.department-command-preview span {
    color: var(--ocp-muted);
    font-weight: 750;
}

.department-division-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.department-division-pills a {
    text-decoration: none;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .04);
    color: var(--ocp-muted);
    font-size: .82rem;
    font-weight: 800;
}

.department-division-pills a:hover {
    background: color-mix(in srgb, var(--dept-accent, #2563eb) 10%, #fff);
    color: var(--dept-accent, var(--ocp-primary));
}

.department-card-button {
    margin: auto 22px 22px;
    display: flex;
    justify-content: center;
    text-decoration: none;
    border-radius: 16px;
    padding: 12px 14px;
    background: var(--dept-accent, var(--ocp-primary));
    color: #fff;
    font-weight: 900;
}

.department-card-button:hover {
    color: #fff;
    filter: brightness(.96);
}

.departments-recruitment-band {
    margin-bottom: 70px;
    padding: 30px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, .18), transparent 30%),
        var(--ocp-surface);
    border: 1px solid var(--ocp-border);
    box-shadow: 0 20px 50px rgba(15, 23, 42, .08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 22px;
}

@media (max-width: 1050px) {
    .departments-hero-grid,
    .department-featured-card {
        grid-template-columns: 1fr;
    }

    .department-featured-cta {
        padding: 14px;
    }
}

@media (max-width: 850px) {
    .departments-directory-grid {
        grid-template-columns: 1fr;
    }

    .departments-toolbar,
    .departments-recruitment-band {
        align-items: stretch;
        flex-direction: column;
    }

    .dept-filter-buttons {
        justify-content: flex-start;
    }
}


/* Department directory clean redesign - replaces the oversized experimental layout */
.departments-index-clean .department-clean-hero {
    padding: 76px 0 42px;
    background: radial-gradient(circle at top right, rgba(37,99,235,.11), transparent 30%), var(--ocp-bg);
}
.department-clean-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 34px;
    align-items: end;
}
.department-clean-hero h1 {
    max-width: 720px;
    font-size: clamp(2.4rem, 5vw, 4.4rem);
}
.department-clean-summary {
    display: grid;
    gap: 1px;
    border: 1px solid var(--ocp-border);
    border-radius: 24px;
    overflow: hidden;
    background: var(--ocp-border);
    box-shadow: 0 18px 45px rgba(15,23,42,.08);
}
.department-clean-summary div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    background: var(--ocp-surface);
}
.department-clean-summary strong { color: var(--ocp-primary); font-size: 1.25rem; }
.department-clean-summary span { color: var(--ocp-muted); font-weight: 800; }
.clean-directory { padding-top: 34px; }
.clean-toolbar { margin-bottom: 22px; }
.departments-clean-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}
.department-clean-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 20px;
    border: 1px solid var(--ocp-border);
    border-radius: 24px;
    background: var(--ocp-surface);
    color: inherit;
    text-decoration: none;
    box-shadow: 0 14px 34px rgba(15,23,42,.07);
    overflow: hidden;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.department-clean-card:hover {
    color: inherit;
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--dept-accent, #2563eb) 35%, var(--ocp-border));
    box-shadow: 0 22px 54px rgba(15,23,42,.11);
}
.department-clean-accent {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: var(--dept-accent, var(--ocp-primary));
}
.department-clean-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 18px;
}
.department-clean-logo {
    width: 62px; height: 62px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--dept-accent, #2563eb) 12%, #fff);
}
.department-clean-logo img { width: 42px; height: 42px; object-fit: contain; }
.department-clean-logo span { font-weight: 950; color: var(--dept-accent, var(--ocp-primary)); }
.department-code-pill,
.department-status-mini {
    display: block;
    text-align: right;
    font-weight: 950;
}
.department-code-pill { color: var(--dept-accent, var(--ocp-primary)); letter-spacing: .04em; }
.department-status-mini { color: var(--ocp-muted); font-size: .78rem; margin-top: 2px; }
.department-clean-card h3 {
    font-size: 1.35rem;
    font-weight: 950;
    letter-spacing: -.045em;
    margin-bottom: 8px;
}
.department-clean-card p { color: var(--ocp-muted); line-height: 1.55; }
.department-clean-meta {
    display: grid;
    gap: 8px;
    margin: 14px 0;
}
.department-clean-meta span {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--ocp-muted);
    font-weight: 750;
}
.department-clean-meta strong { color: var(--ocp-text); }
.department-clean-command {
    display: grid;
    gap: 5px;
    padding-top: 14px;
    margin-top: auto;
    border-top: 1px solid var(--ocp-border);
    font-size: .9rem;
}
.department-clean-command strong { color: var(--ocp-text); }
.department-clean-command span { color: var(--ocp-muted); }
.department-clean-link {
    display: inline-flex;
    margin-top: 16px;
    font-weight: 900;
    color: var(--dept-accent, var(--ocp-primary));
}
.compact-band { margin-top: 20px; }
.staff-card.position-card {
    border-style: dashed;
    background: linear-gradient(180deg, rgba(37,99,235,.045), #fff);
}
.staff-card.position-card .avatar-dot {
    background: rgba(37,99,235,.12);
    color: var(--ocp-primary);
}
.position-detail-list {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 10px 18px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--ocp-border);
}
.position-detail-list span { color: var(--ocp-muted); font-weight: 800; }
.position-detail-list strong { color: var(--ocp-text); }
@media (max-width: 1150px) {
    .departments-clean-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 850px) {
    .department-clean-hero-grid { grid-template-columns: 1fr; }
    .departments-clean-grid { grid-template-columns: 1fr; }
}


/* =========================================================
   2026-05 HARD FIX: Admin modals + Staff role assignment
   - Stops modals opening halfway down/blank at top
   - Keeps header/footer fixed and body scrollable
   - Makes staff role assignment checkboxes obvious
   ========================================================= */
body.modal-open { overflow: hidden !important; padding-right: 0 !important; }
.modal.admin-modal,
.admin-modal.modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 50000 !important;
    padding: 16px !important;
    overflow: hidden !important;
    align-items: flex-start !important;
    justify-content: center !important;
}
.modal.admin-modal.show,
.admin-modal.modal.show { display: flex !important; }
.modal-backdrop { z-index: 49990 !important; }
.modal.admin-modal .modal-dialog,
.admin-modal.modal .modal-dialog,
.modal.admin-modal .modal-dialog.modal-xl,
.admin-modal.modal .modal-dialog.modal-xl,
.modal.admin-modal .modal-dialog.modal-dialog-scrollable,
.admin-modal.modal .modal-dialog.modal-dialog-scrollable {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    translate: none !important;
    margin: 0 auto !important;
    width: min(1180px, calc(100vw - 32px)) !important;
    max-width: min(1180px, calc(100vw - 32px)) !important;
    height: calc(100dvh - 32px) !important;
    max-height: calc(100dvh - 32px) !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: stretch !important;
}
.modal.admin-modal .modal-content,
.admin-modal.modal .modal-content {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
}
.modal.admin-modal .modal-content > form,
.admin-modal.modal .modal-content > form {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    align-content: start !important;
}
.modal.admin-modal .modal-header,
.admin-modal.modal .modal-header,
.modal.admin-modal .modal-content > form > .modal-header,
.admin-modal.modal .modal-content > form > .modal-header {
    grid-row: 1 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}
.modal.admin-modal .modal-body,
.admin-modal.modal .modal-body,
.modal.admin-modal .modal-content > form > .modal-body,
.admin-modal.modal .modal-content > form > .modal-body {
    grid-row: 2 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding-bottom: 36px !important;
    scroll-behavior: auto !important;
    overscroll-behavior: contain !important;
}
.modal.admin-modal .modal-footer,
.admin-modal.modal .modal-footer,
.modal.admin-modal .modal-content > form > .modal-footer,
.admin-modal.modal .modal-content > form > .modal-footer {
    grid-row: 3 !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 20 !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}
.admin-modal *::before,
.admin-modal *::after { max-height: none; }
.role-picker-box {
    border: 1px solid var(--ocp-border);
    border-radius: 18px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--ocp-surface-alt), #fff 45%), #fff);
    padding: 16px;
    margin: 8px 0;
}
.role-picker-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}
.role-picker-head strong { display:block; font-weight: 950; }
.role-picker-head small { display:block; color: var(--ocp-muted); margin-top: 2px; }
.role-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
}
.role-check-card {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    border: 1px solid var(--ocp-border);
    border-radius: 14px;
    background: var(--ocp-surface);
    padding: 11px 12px;
    min-height: 58px;
    transition: .16s ease;
}
.role-check-card:hover { border-color: color-mix(in srgb, var(--ocp-primary), #fff 35%); box-shadow: 0 8px 18px rgba(37,99,235,.08); }
.role-check-card input { width: 18px; height: 18px; flex: 0 0 auto; }
.role-check-card span { display: grid; line-height: 1.25; }
.role-check-card strong { font-weight: 900; }
.role-check-card small { color: var(--ocp-muted); }
.role-check-card:has(input:checked) {
    border-color: color-mix(in srgb, var(--ocp-primary), #fff 25%);
    background: color-mix(in srgb, var(--ocp-primary), #fff 92%);
}
.admin-role-chip-row { display:flex; flex-wrap:wrap; gap:4px; margin-top: 5px; }
.soft-pill.mini { font-size: .72rem; padding: 3px 7px; }
@media (max-width: 800px) {
    .modal.admin-modal, .admin-modal.modal { padding: 8px !important; }
    .modal.admin-modal .modal-dialog, .admin-modal.modal .modal-dialog { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; height: calc(100dvh - 16px) !important; }
    .role-picker-grid { grid-template-columns: 1fr; }
}


/* =========================================================
   FINAL FIX: Admin modals must not open halfway down.
   Use a normal modal shell: header top, scroll only the body.
   ========================================================= */
body.modal-open { overflow: hidden !important; }
.modal.admin-modal.show,
.admin-modal.modal.show {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 18px 12px !important;
    overflow: hidden !important;
    z-index: 30050 !important;
}
.modal.admin-modal .modal-dialog,
.admin-modal.modal .modal-dialog,
.modal.admin-modal .modal-dialog.modal-dialog-scrollable,
.admin-modal.modal .modal-dialog.modal-dialog-scrollable {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    translate: none !important;
    margin: 0 auto !important;
    width: min(1180px, calc(100vw - 24px)) !important;
    max-width: min(1180px, calc(100vw - 24px)) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 36px) !important;
    display: block !important;
}
.modal.admin-modal .modal-content,
.admin-modal.modal .modal-content {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 36px) !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 24px !important;
}
.modal.admin-modal .modal-content > form,
.admin-modal.modal .modal-content > form {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 36px) !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}
.modal.admin-modal .modal-header,
.admin-modal.modal .modal-header,
.modal.admin-modal .modal-content > form > .modal-header,
.admin-modal.modal .modal-content > form > .modal-header {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 18px 24px !important;
    background: linear-gradient(90deg, rgba(37,99,235,.12), #fff 60%) !important;
    border-bottom: 1px solid var(--ocp-border) !important;
}
.modal.admin-modal .modal-footer,
.admin-modal.modal .modal-footer,
.modal.admin-modal .modal-content > form > .modal-footer,
.admin-modal.modal .modal-content > form > .modal-footer {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 16px 24px !important;
    background: rgba(255,255,255,.98) !important;
    border-top: 1px solid var(--ocp-border) !important;
}
.modal.admin-modal .modal-body,
.admin-modal.modal .modal-body,
.modal.admin-modal .modal-content > form > .modal-body,
.admin-modal.modal .modal-content > form > .modal-body {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: calc(100dvh - 178px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 22px 24px 28px !important;
    scroll-behavior: auto !important;
    overscroll-behavior: contain !important;
}
.admin-role-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}
.soft-pill.mini {
    font-size: .72rem;
    padding: 4px 8px;
    line-height: 1;
}
.role-picker-box {
    margin-top: 10px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(37,99,235,.04), rgba(248,250,252,.82));
}
.role-picker-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.role-picker-head small { display: block; color: var(--ocp-muted); margin-top: 3px; }
.role-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
}
.role-check-card {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--ocp-border);
    border-radius: 14px;
    padding: 12px;
    background: #fff;
    cursor: pointer;
}
.role-check-card input { width: 18px; height: 18px; }
.role-check-card small { display: block; color: var(--ocp-muted); font-size: .78rem; margin-top: 2px; }
.role-check-card:has(input:checked) {
    border-color: color-mix(in srgb, var(--ocp-primary), #fff 20%);
    background: color-mix(in srgb, var(--ocp-primary), #fff 92%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ocp-primary), transparent 86%);
}


/* =========================================================
   FINAL STAFF/POSITION + MODAL NORMALISER
   Department + Rank model, no role assignment picker.
   ========================================================= */
.modal.admin-modal.show,
.admin-modal.modal.show {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 18px 0 !important;
}
.modal.admin-modal .modal-dialog,
.admin-modal.modal .modal-dialog,
.modal.admin-modal .modal-dialog.modal-xl,
.admin-modal.modal .modal-dialog.modal-xl,
.modal.admin-modal .modal-dialog.modal-dialog-scrollable,
.admin-modal.modal .modal-dialog.modal-dialog-scrollable {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    transform: none !important;
    translate: none !important;
    margin: 0 auto !important;
    width: min(1120px, calc(100vw - 32px)) !important;
    max-width: min(1120px, calc(100vw - 32px)) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 36px) !important;
    display: block !important;
}
.modal.admin-modal .modal-content,
.admin-modal.modal .modal-content,
.modal.admin-modal .modal-content > form,
.admin-modal.modal .modal-content > form {
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 36px) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
}
.modal.admin-modal .modal-header,
.admin-modal.modal .modal-header,
.modal.admin-modal .modal-content > form > .modal-header,
.admin-modal.modal .modal-content > form > .modal-header {
    position: relative !important;
    top: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 18px 22px !important;
}
.modal.admin-modal .modal-body,
.admin-modal.modal .modal-body,
.modal.admin-modal .modal-content > form > .modal-body,
.admin-modal.modal .modal-content > form > .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 180px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 18px 22px !important;
}
.modal.admin-modal .modal-footer,
.admin-modal.modal .modal-footer,
.modal.admin-modal .modal-content > form > .modal-footer,
.admin-modal.modal .modal-content > form > .modal-footer {
    position: relative !important;
    bottom: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 14px 22px !important;
}
.modal.admin-modal .modal-dialog::before,
.modal.admin-modal .modal-dialog::after,
.modal.admin-modal .modal-content::before,
.modal.admin-modal .modal-content::after,
.modal.admin-modal .modal-content > form::before,
.modal.admin-modal .modal-content > form::after,
.admin-modal.modal .modal-dialog::before,
.admin-modal.modal .modal-dialog::after,
.admin-modal.modal .modal-content::before,
.admin-modal.modal .modal-content::after,
.admin-modal.modal .modal-content > form::before,
.admin-modal.modal .modal-content > form::after {
    display: none !important;
    content: none !important;
}
.profile-position-row strong { display:block; }
.profile-position-row span { display:block; color: var(--ocp-muted); margin-top: 3px; }
@media (max-width: 800px) {
    .modal.admin-modal.show,
    .admin-modal.modal.show { padding: 8px !important; }
    .modal.admin-modal .modal-dialog,
    .admin-modal.modal .modal-dialog { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; }
}


/* =========================================================
   Final staff/position merge + hard modal reset
   ========================================================= */
.staff-merged-table td { vertical-align: top; }
.staff-person-main .admin-avatar-sm { width: 42px; height: 42px; }
.staff-position-stack { display: flex; flex-direction: column; gap: 10px; }
.staff-position-chipline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--ocp-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--ocp-surface), var(--ocp-primary) 3%);
}
.staff-position-chipline strong { margin-right: auto; }
.btn-xs { --bs-btn-padding-y: .18rem; --bs-btn-padding-x: .45rem; --bs-btn-font-size: .78rem; border-radius: 8px; }

.modal.admin-modal,
.admin-modal.modal {
    position: fixed !important;
    inset: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    z-index: 30000 !important;
}
.modal.admin-modal .modal-dialog,
.admin-modal.modal .modal-dialog,
.modal.admin-modal .modal-dialog.modal-dialog-scrollable,
.admin-modal.modal .modal-dialog.modal-dialog-scrollable,
.modal.admin-modal .modal-dialog.modal-dialog-centered,
.admin-modal.modal .modal-dialog.modal-dialog-centered {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: min(1180px, calc(100vw - 32px)) !important;
    max-width: min(1180px, calc(100vw - 32px)) !important;
    height: calc(100dvh - 32px) !important;
    max-height: calc(100dvh - 32px) !important;
    margin: 16px auto !important;
    display: flex !important;
    align-items: stretch !important;
}
.modal.admin-modal .modal-content,
.admin-modal.modal .modal-content {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 24px !important;
}
.modal.admin-modal .modal-content > form,
.admin-modal.modal .modal-content > form {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
}
.modal.admin-modal .modal-header,
.admin-modal.modal .modal-header,
.modal.admin-modal .modal-content > form > .modal-header,
.admin-modal.modal .modal-content > form > .modal-header {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 18px 22px !important;
}
.modal.admin-modal .modal-body,
.admin-modal.modal .modal-body,
.modal.admin-modal .modal-content > form > .modal-body,
.admin-modal.modal .modal-content > form > .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 18px 22px 96px !important;
    margin: 0 !important;
}
.modal.admin-modal .modal-footer,
.admin-modal.modal .modal-footer,
.modal.admin-modal .modal-content > form > .modal-footer,
.admin-modal.modal .modal-content > form > .modal-footer {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 14px 22px !important;
    background: rgba(255,255,255,.96) !important;
}

/* =========================================================
   Staff holder modal + merged department/rank editor
   ========================================================= */
.staff-person-modal .modal-dialog {
    height: calc(100dvh - 28px) !important;
    max-height: calc(100dvh - 28px) !important;
    margin: 14px auto !important;
}
.staff-person-modal .modal-content,
.staff-person-modal .modal-content > form {
    height: 100% !important;
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
}
.staff-person-modal .modal-header,
.staff-person-modal .modal-footer {
    flex: 0 0 auto !important;
}
.staff-person-modal .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding-bottom: 120px !important;
}
.staff-editor-section {
    border: 1px solid var(--ocp-border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--ocp-surface), var(--ocp-primary) 3%);
    padding: 16px;
}
.staff-editor-section h6 {
    font-weight: 900;
    margin-bottom: 12px;
}
.staff-position-editor-list {
    display: grid;
    gap: 12px;
}
.staff-position-editor-row {
    border: 1px solid color-mix(in srgb, var(--ocp-border), var(--ocp-primary) 18%);
    border-radius: 16px;
    background: #fff;
    padding: 14px;
}
.staff-position-summary-list {
    display: grid;
    gap: 8px;
}
.staff-position-summary-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--ocp-primary), white 92%);
    border: 1px solid color-mix(in srgb, var(--ocp-primary), white 78%);
}
.staff-position-summary-line strong {
    font-weight: 900;
}
.staff-merged-table td {
    vertical-align: top;
}

/* =========================================================
   FINAL ADMIN MODAL FIX - removes blank top space for all ACP modals
   ========================================================= */
body.modal-open {
    overflow: hidden !important;
}
.modal.admin-modal,
.admin-modal.modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 50000 !important;
    overflow: hidden !important;
    padding: 16px !important;
}
.modal.admin-modal.show,
.admin-modal.modal.show {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
}
.modal.admin-modal .modal-dialog,
.admin-modal.modal .modal-dialog,
.modal.admin-modal .modal-dialog.modal-dialog-scrollable,
.admin-modal.modal .modal-dialog.modal-dialog-scrollable,
.modal.admin-modal .modal-dialog.modal-dialog-centered,
.admin-modal.modal .modal-dialog.modal-dialog-centered,
.staff-person-modal .modal-dialog {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 auto !important;
    width: min(1180px, calc(100vw - 32px)) !important;
    max-width: min(1180px, calc(100vw - 32px)) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 32px) !important;
    display: block !important;
}
.modal.admin-modal .modal-content,
.admin-modal.modal .modal-content,
.staff-person-modal .modal-content {
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 32px) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 24px !important;
}
.modal.admin-modal .modal-content > form,
.admin-modal.modal .modal-content > form,
.staff-person-modal .modal-content > form,
.staff-person-modal .staff-person-form {
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 32px) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
}
.modal.admin-modal .modal-header,
.admin-modal.modal .modal-header,
.modal.admin-modal .modal-content > form > .modal-header,
.admin-modal.modal .modal-content > form > .modal-header,
.staff-person-modal .modal-header {
    position: relative !important;
    top: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 18px 22px !important;
    background: linear-gradient(90deg, rgba(37,99,235,.10), rgba(255,255,255,.96)) !important;
    border-bottom: 1px solid var(--ocp-border) !important;
}
.modal.admin-modal .modal-body,
.admin-modal.modal .modal-body,
.modal.admin-modal .modal-content > form > .modal-body,
.admin-modal.modal .modal-content > form > .modal-body,
.staff-person-modal .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 150px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 18px 22px 96px !important;
    margin: 0 !important;
}
.modal.admin-modal .modal-footer,
.admin-modal.modal .modal-footer,
.modal.admin-modal .modal-content > form > .modal-footer,
.admin-modal.modal .modal-content > form > .modal-footer,
.staff-person-modal .modal-footer {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 14px 22px !important;
    background: rgba(255,255,255,.98) !important;
    border-top: 1px solid var(--ocp-border) !important;
}
.modal.admin-modal .modal-dialog::before,
.modal.admin-modal .modal-dialog::after,
.modal.admin-modal .modal-content::before,
.modal.admin-modal .modal-content::after,
.modal.admin-modal .modal-content > form::before,
.modal.admin-modal .modal-content > form::after,
.admin-modal.modal .modal-dialog::before,
.admin-modal.modal .modal-dialog::after,
.admin-modal.modal .modal-content::before,
.admin-modal.modal .modal-content::after,
.admin-modal.modal .modal-content > form::before,
.admin-modal.modal .modal-content > form::after {
    display: none !important;
    content: none !important;
    height: 0 !important;
}
@media (max-width: 700px) {
    .modal.admin-modal,
    .admin-modal.modal { padding: 8px !important; }
    .modal.admin-modal .modal-dialog,
    .admin-modal.modal .modal-dialog { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; }
    .modal.admin-modal .modal-body,
    .admin-modal.modal .modal-body { max-height: calc(100dvh - 132px) !important; }
}

/* Primary staff placement rebuild */
.staff-primary-check-wrap { display: flex; align-items: center; justify-content: center; min-height: 38px; }
.staff-position-summary-line.primary,
.staff-position-summary-line.is-primary { border-color: rgba(37,99,235,.28); background: rgba(37,99,235,.08); }
.staff-position-summary-line em { font-size: .72rem; font-style: normal; font-weight: 800; color: var(--primary, #2563eb); margin-left: auto; text-transform: uppercase; letter-spacing: .04em; }
.staff-holder-modal .modal-dialog { margin-top: 1rem !important; margin-bottom: 1rem !important; max-height: calc(100vh - 2rem) !important; }
.staff-holder-modal .modal-content { max-height: calc(100vh - 2rem) !important; overflow: hidden; }
.staff-holder-modal .modal-body { overflow-y: auto !important; max-height: calc(100vh - 13rem) !important; }

/* =========================================================
   2026-05 AUDIT PATCH: stable admin modals + staff tables
   ========================================================= */
body.modal-open { overflow: hidden !important; padding-right: 0 !important; }
.modal-backdrop { z-index: 50000 !important; }
.admin-modal.modal { z-index: 50010 !important; overflow: hidden !important; padding: 0 !important; }
.admin-modal .modal-dialog,
.admin-modal .modal-dialog.modal-xl,
.admin-modal .modal-dialog-scrollable {
    width: min(1180px, calc(100vw - 48px)) !important;
    max-width: min(1180px, calc(100vw - 48px)) !important;
    height: calc(100dvh - 48px) !important;
    max-height: calc(100dvh - 48px) !important;
    margin: 24px auto !important;
    transform: none !important;
    display: flex !important;
    align-items: stretch !important;
}
.admin-modal .modal-content {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 24px !important;
}
.admin-modal .modal-content > form {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    margin: 0 !important;
}
.admin-modal .modal-header,
.admin-modal .modal-content > form > .modal-header {
    flex: 0 0 auto !important;
    padding: 22px 28px !important;
    margin: 0 !important;
    background: linear-gradient(90deg, rgba(37,99,235,.11), #fff 70%) !important;
    border-bottom: 1px solid var(--ocp-border) !important;
}
.admin-modal .modal-body,
.admin-modal .modal-content > form > .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 20px 28px 110px !important;
    margin: 0 !important;
}
.admin-modal .modal-footer,
.admin-modal .modal-content > form > .modal-footer {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 14px 28px !important;
    background: rgba(255,255,255,.96) !important;
    border-top: 1px solid var(--ocp-border) !important;
}
.admin-modal .modal-dialog-centered { min-height: 0 !important; align-items: stretch !important; }
.staff-position-summary-list { display: grid; gap: .55rem; }
.staff-position-summary-line { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.staff-position-summary-line strong { line-height: 1.2; }
.staff-position-summary-line em { font-style: normal; font-size: .72rem; font-weight: 800; color: var(--ocp-primary); }
@media (max-width: 768px) {
    .admin-modal .modal-dialog,
    .admin-modal .modal-dialog.modal-xl,
    .admin-modal .modal-dialog-scrollable {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        height: calc(100dvh - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
        margin: 8px auto !important;
    }
    .admin-modal .modal-header,
    .admin-modal .modal-content > form > .modal-header,
    .admin-modal .modal-body,
    .admin-modal .modal-content > form > .modal-body,
    .admin-modal .modal-footer,
    .admin-modal .modal-content > form > .modal-footer { padding-left: 16px !important; padding-right: 16px !important; }
}