:root {
    --permata-blue: #155da8;
    --permata-blue-dark: #0c3970;
    --permata-blue-soft: #e8f3ff;
    --pinang: #f5bc2f;
    --pinang-soft: #fff3c4;
    --paper: #ffffff;
    --ink: #172033;
    --muted: #64748b;
}

body {
    color: var(--ink);
}

.admin-theme {
    background:
        linear-gradient(180deg, rgba(232,243,255,.72), rgba(255,255,255,.98)),
        #f6f9fd;
}

.navbar-admin {
    background: linear-gradient(90deg, var(--permata-blue-dark), var(--permata-blue));
}

.sidebar-permata {
    background:
        linear-gradient(180deg, var(--permata-blue-dark), #104f94 72%, #0c3970);
}

.sidebar-permata .sidebar-brand {
    border-bottom: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.08);
}

.sidebar-permata .brand-link,
.sidebar-permata .nav-link,
.sidebar-permata .nav-header {
    color: #fff;
}

.sidebar-permata .nav-header {
    color: var(--pinang);
    font-weight: 700;
    letter-spacing: .04em;
}

.sidebar-permata .nav-link {
    border-radius: 7px;
    margin: 2px 8px;
}

.sidebar-permata .nav-link:hover,
.sidebar-permata .nav-link.active {
    background: var(--pinang);
    color: var(--permata-blue-dark);
}

.sidebar-permata .nav-link {
    align-items: center;
}

.sidebar-permata .nav-link p {
    display: flex;
    align-items: center;
    width: 100%;
}

.sidebar-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    border-radius: 10px;
    margin-right: 10px;
    color: var(--pinang);
    background: linear-gradient(135deg, var(--permata-blue-dark), var(--permata-blue));
    border: 1px solid #ffd966;
    font-size: 18px;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 6px 14px rgba(12,57,112,.16);
}

.sidebar-icon .bi {
    display: none;
}

.sidebar-icon-child {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    border-radius: 9px;
    margin-right: 9px;
    font-size: 14px;
    background: linear-gradient(135deg, #104f94, #155da8);
}

.sidebar-permata .nav-link:hover .sidebar-icon,
.sidebar-permata .nav-link.active .sidebar-icon {
    border-color: rgba(12,57,112,.24);
    background: linear-gradient(135deg, #fff4cc, #ffd966);
    color: var(--permata-blue-dark);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 18px rgba(12,57,112,.24);
}

.sidebar-permata .nav-link:hover .sidebar-icon .bi,
.sidebar-permata .nav-link.active .sidebar-icon .bi {
    color: var(--permata-blue-dark) !important;
}

.bi-speedometer2::before { content: "◴"; }
.bi-database-fill-gear::before,
.bi-database-fill-down::before { content: "▣"; }
.bi-file-earmark-text::before,
.bi-file-earmark-ruled-fill::before,
.bi-file-earmark-spreadsheet-fill::before { content: "▤"; }
.bi-mortarboard-fill::before,
.bi-mortarboard::before { content: "△"; }
.bi-book-half::before,
.bi-book-fill::before,
.bi-book::before,
.bi-journal-richtext::before,
.bi-journal-check::before,
.bi-journal-bookmark-fill::before,
.bi-journal-text::before { content: "▥"; }
.bi-clipboard-check::before,
.bi-ui-checks-grid::before,
.bi-check2-square::before,
.bi-check2-circle::before { content: "✓"; }
.bi-people-fill::before,
.bi-people::before,
.bi-person-hearts::before,
.bi-person-workspace::before,
.bi-person-video3::before,
.bi-person-lines-fill::before,
.bi-person-plus-fill::before,
.bi-person-badge-fill::before,
.bi-person-check-fill::before,
.bi-person-gear::before,
.bi-person-lock::before { content: "◉"; }
.bi-card-checklist::before,
.bi-table::before { content: "▦"; }
.bi-cash-coin::before,
.bi-cash-stack::before,
.bi-wallet2::before,
.bi-receipt-cutoff::before,
.bi-tags-fill::before { content: "$"; }
.bi-building-gear::before,
.bi-building::before,
.bi-building-check::before,
.bi-bank2::before,
.bi-hospital-fill::before { content: "▨"; }
.bi-patch-check-fill::before,
.bi-award-fill::before,
.bi-shield-check::before { content: "◇"; }
.bi-tools::before,
.bi-gear-fill::before,
.bi-sliders::before { content: "⚙"; }
.bi-headset::before { content: "☎"; }
.bi-graph-up-arrow::before,
.bi-bar-chart-fill::before { content: "↗"; }
.bi-diagram-3-fill::before,
.bi-diagram-3::before,
.bi-diagram-2-fill::before { content: "⌘"; }
.bi-door-open-fill::before,
.bi-door-open::before { content: "▯"; }
.bi-collection-fill::before,
.bi-folder-fill::before,
.bi-folder2-open::before { content: "▱"; }
.bi-calendar2-week-fill::before,
.bi-calendar-event-fill::before,
.bi-calendar3::before,
.bi-calendar-heart::before,
.bi-calendar-check-fill::before,
.bi-calendar-minus-fill::before,
.bi-calendar-plus-fill::before,
.bi-calendar-range-fill::before { content: "□"; }
.bi-question-square-fill::before { content: "?"; }
.bi-stars::before { content: "✦"; }
.bi-pc-display-horizontal::before { content: "▭"; }
.bi-pencil-square::before { content: "✎"; }
.bi-newspaper::before { content: "▧"; }
.bi-megaphone-fill::before { content: "▷"; }
.bi-bell-fill::before { content: "◌"; }
.bi-chat-dots-fill::before,
.bi-chat-square-heart-fill::before { content: "…"; }
.bi-images::before { content: "▩"; }
.bi-link-45deg::before,
.bi-arrow-left-right::before,
.bi-arrow-repeat::before,
.bi-box-arrow-up-right::before { content: "↔"; }
.bi-hourglass-split::before { content: "⌛"; }
.bi-list-ol::before { content: "≡"; }
.bi-heart-pulse-fill::before { content: "♡"; }
.bi-trophy-fill::before { content: "♕"; }
.bi-envelope-paper-fill::before { content: "✉"; }
.bi-box-seam-fill::before { content: "◫"; }
.bi-kanban-fill::before { content: "▥"; }
.bi-key-fill::before { content: "⚿"; }
.bi-clock-history::before { content: "◷"; }
.bi-cloud-arrow-up-fill::before,
.bi-cloud-arrow-down-fill::before { content: "↕"; }
.bi-circle-fill::before { content: "●"; }

.sidebar-permata .nav-treeview {
    padding-bottom: .25rem;
}

.sidebar-permata .nav-treeview .nav-link {
    margin-left: 16px;
    padding-top: .42rem;
    padding-bottom: .42rem;
}

.sidebar-permata .nav-arrow {
    margin-left: auto;
    font-style: normal;
    transition: transform .18s ease;
}

.sidebar-permata .nav-arrow::before {
    content: ">";
    font-weight: 900;
}

.sidebar-permata .menu-open > .nav-link .nav-arrow {
    transform: rotate(90deg);
}

.app-content .card {
    border: 0;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(21,93,168,.08);
}

.app-content .card-header {
    background: #fff;
    border-bottom: 1px solid #e5edf7;
}

.frontend-theme {
    background:
        radial-gradient(circle at 12% 8%, rgba(245,188,47,.26), transparent 24rem),
        radial-gradient(circle at 88% 14%, rgba(21,93,168,.18), transparent 22rem),
        linear-gradient(180deg, #f8fbff, #fff);
}

.frontend-topbar {
    background: var(--permata-blue-dark);
    color: rgba(255,255,255,.86);
    font-size: .86rem;
    padding: .45rem 0;
}

.frontend-nav {
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid rgba(21,93,168,.12);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 1035;
}

.frontend-nav .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}

.frontend-nav .navbar-brand {
    color: var(--permata-blue);
}

.brand-mark {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--permata-blue), var(--permata-blue-dark));
    color: #fff;
    box-shadow: 0 8px 18px rgba(21,93,168,.24);
    font-size: .82rem;
}

.frontend-nav .nav-link {
    color: var(--ink);
    font-weight: 600;
}

.frontend-nav .nav-link:hover {
    color: var(--permata-blue);
}

.frontend-nav .dropdown-menu {
    border: 1px solid rgba(21,93,168,.12);
    border-radius: 8px;
    box-shadow: 0 16px 34px rgba(21,93,168,.14);
}

.frontend-nav .dropdown-item {
    font-weight: 650;
}

.btn-pinang {
    --bs-btn-bg: var(--pinang);
    --bs-btn-border-color: var(--pinang);
    --bs-btn-color: var(--permata-blue-dark);
    --bs-btn-hover-bg: #e9aa18;
    --bs-btn-hover-border-color: #e9aa18;
    --bs-btn-hover-color: var(--permata-blue-dark);
    font-weight: 700;
}

.home-carousel-wrap {
    background: #fff;
}

.school-carousel {
    overflow: hidden;
    background: var(--permata-blue-dark);
}

.school-carousel .carousel-item {
    min-height: clamp(360px, 54vw, 620px);
}

.school-carousel .carousel-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(12,57,112,.88), rgba(21,93,168,.38), rgba(0,0,0,.06)),
        linear-gradient(0deg, rgba(12,57,112,.42), transparent 46%);
}

.school-carousel img {
    height: clamp(360px, 54vw, 620px);
    object-fit: cover;
}

.school-carousel .carousel-caption {
    left: max(1rem, calc((100vw - 1140px) / 2));
    right: auto;
    bottom: 13%;
    z-index: 2;
    max-width: min(620px, calc(100% - 2rem));
    text-align: left;
}

.school-carousel .carousel-caption span {
    display: inline-block;
    margin-bottom: .55rem;
    color: var(--pinang);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.school-carousel .carousel-caption h2 {
    font-size: clamp(2rem, 5vw, 4.2rem);
    line-height: 1.04;
    font-weight: 900;
    letter-spacing: 0;
}

.school-carousel .carousel-caption p {
    max-width: 560px;
    color: rgba(255,255,255,.9);
    font-size: clamp(.96rem, 2vw, 1.15rem);
    line-height: 1.65;
}

.school-carousel .carousel-control-prev,
.school-carousel .carousel-control-next {
    width: 8%;
}

.hero-school {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(21,93,168,.98), rgba(13,66,130,.88)),
        url("../../../adminlte/assets/img/photo2.png") center/cover;
    border-bottom: 1px solid rgba(21,93,168,.12);
    color: #fff;
}

.hero-school::after {
    content: "";
    position: absolute;
    right: -90px;
    bottom: -130px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: rgba(245,188,47,.34);
    pointer-events: none;
}

.min-vh-hero {
    min-height: min(680px, calc(100vh - 98px));
    padding: 3.4rem 0 4.2rem;
}

.hero-school .container {
    position: relative;
    z-index: 1;
}

.hero-title {
    font-size: clamp(2.35rem, 7vw, 4.8rem);
    line-height: 1.02;
    font-weight: 900;
    letter-spacing: 0;
    margin-bottom: 1rem;
}

.hero-copy {
    font-size: clamp(1rem, 2vw, 1.22rem);
    line-height: 1.7;
    color: rgba(255,255,255,.88);
    max-width: 680px;
}

.school-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    background: var(--pinang-soft);
    color: var(--permata-blue-dark);
    padding: .42rem .78rem;
    font-size: .84rem;
    font-weight: 800;
    text-transform: uppercase;
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin-top: 1.5rem;
    max-width: 560px;
}

.hero-stats div {
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 8px;
    background: rgba(255,255,255,.11);
    padding: .82rem;
}

.hero-stats strong {
    display: block;
    color: var(--pinang);
    font-size: 1.35rem;
    line-height: 1;
}

.hero-stats span {
    display: block;
    color: rgba(255,255,255,.82);
    font-size: .82rem;
    margin-top: .35rem;
}

.hero-visual {
    position: relative;
    isolation: isolate;
}

.hero-visual img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 8px 8px 8px 64px;
    box-shadow: 0 26px 58px rgba(0,0,0,.28);
}

.hero-floating-card {
    position: absolute;
    left: -1rem;
    bottom: 1rem;
    max-width: 310px;
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    padding: 1rem;
    box-shadow: 0 16px 36px rgba(0,0,0,.18);
}

.hero-floating-card strong,
.hero-floating-card span {
    display: block;
}

.hero-floating-card span {
    color: var(--muted);
    font-size: .9rem;
    margin-top: .25rem;
}

.quick-links {
    margin-top: -2.2rem;
    position: relative;
    z-index: 3;
}

.quick-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .85rem;
}

.quick-card {
    display: block;
    min-height: 128px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid rgba(21,93,168,.10);
    box-shadow: 0 16px 34px rgba(21,93,168,.12);
    padding: 1rem;
    color: var(--ink);
    text-decoration: none;
}

.quick-card:hover {
    color: var(--permata-blue-dark);
    transform: translateY(-2px);
}

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

.quick-card strong {
    color: var(--permata-blue);
    font-size: 1.08rem;
}

.quick-card span {
    color: var(--muted);
    margin-top: .45rem;
    line-height: 1.55;
}

.section-pad {
    padding: 4.5rem 0;
}

.section-heading {
    max-width: 760px;
    margin: 0 auto 2rem;
    text-align: center;
}

.section-heading span,
.section-kicker {
    display: inline-block;
    color: var(--pinang);
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .78rem;
    margin-bottom: .55rem;
}

.section-heading h2,
.section-title {
    color: var(--permata-blue-dark);
    font-weight: 900;
    letter-spacing: 0;
}

.section-heading h2 {
    font-size: clamp(1.75rem, 4vw, 2.6rem);
}

.section-heading p {
    color: var(--muted);
    font-size: 1.02rem;
}

.program-card {
    height: 100%;
    border-radius: 8px;
    padding: 1.35rem;
    background: #fff;
    border: 1px solid rgba(21,93,168,.10);
    box-shadow: 0 12px 28px rgba(21,93,168,.08);
}

.program-dot {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background:
        linear-gradient(135deg, var(--pinang), #ffd86c);
    margin-bottom: 1rem;
}

.program-card h3 {
    color: var(--permata-blue-dark);
    font-weight: 850;
    font-size: 1.18rem;
}

.program-card p {
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: 0;
}

.split-section {
    background: linear-gradient(90deg, var(--permata-blue-soft), #fff);
    padding: 4.5rem 0;
}

.rounded-school-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 8px 56px 8px 8px;
    box-shadow: 0 18px 44px rgba(21,93,168,.14);
}

.values-list {
    display: grid;
    gap: .7rem;
    margin-top: 1.25rem;
}

.values-list div {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: .75rem;
    align-items: start;
    padding: .8rem;
    border-radius: 8px;
    background: #fff;
}

.values-list strong {
    color: var(--permata-blue);
}

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

.news-band {
    background: #fff;
}

.school-news-card {
    height: 100%;
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
    border: 1px solid rgba(21,93,168,.10);
    box-shadow: 0 12px 26px rgba(21,93,168,.08);
}

.news-thumb {
    height: 150px;
    background:
        linear-gradient(135deg, rgba(21,93,168,.85), rgba(245,188,47,.78)),
        url("../../../adminlte/assets/img/photo3.jpg") center/cover;
}

.school-news-card h3 {
    color: var(--permata-blue-dark);
    font-size: 1.08rem;
    font-weight: 850;
    line-height: 1.35;
}

.school-news-card p {
    color: var(--muted);
    line-height: 1.65;
}

.agenda-panel {
    height: 100%;
    border-radius: 8px;
    padding: 1.35rem;
    background: var(--permata-blue-dark);
    color: #fff;
    box-shadow: 0 16px 36px rgba(21,93,168,.16);
}

.agenda-panel .section-title {
    color: #fff;
}

.agenda-list {
    display: grid;
    gap: .85rem;
    margin-top: 1rem;
}

.agenda-item {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: .8rem;
    align-items: center;
    border-radius: 8px;
    background: rgba(255,255,255,.10);
    padding: .75rem;
}

.agenda-date {
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--pinang);
    color: var(--permata-blue-dark);
    font-weight: 900;
    line-height: 1;
    min-height: 58px;
}

.agenda-date span {
    display: block;
    font-size: .68rem;
    text-transform: uppercase;
}

.agenda-item p {
    margin: .2rem 0 0;
    color: rgba(255,255,255,.72);
    font-size: .9rem;
}

.portal-panel-large {
    height: 100%;
}

.cta-school {
    padding: 1rem 0 4.5rem;
}

.cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    border-radius: 8px;
    background:
        linear-gradient(135deg, var(--permata-blue), var(--permata-blue-dark));
    color: #fff;
    padding: 2rem;
    box-shadow: 0 18px 46px rgba(21,93,168,.18);
}

.cta-inner span {
    color: var(--pinang);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .78rem;
}

.cta-inner h2 {
    font-weight: 900;
    margin: .3rem 0 0;
}

.portal-panel {
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(21,93,168,.16);
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 14px 34px rgba(21,93,168,.14);
}

.feature-chip {
    border: 1px solid rgba(21,93,168,.18);
    border-radius: 8px;
    padding: .75rem;
    background: linear-gradient(180deg, #fff, var(--permata-blue-soft));
    color: var(--permata-blue-dark);
    font-weight: 700;
    min-height: 52px;
}

.news-card,
.frontend-theme .card {
    border: 1px solid rgba(21,93,168,.10);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(21,93,168,.08);
}

.badge-pinang {
    background: var(--pinang);
    color: var(--permata-blue-dark);
}

.frontend-copy {
    color: var(--muted);
    font-size: 1.04rem;
    line-height: 1.85;
}

.profile-content-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 8px 42px 8px 8px;
    box-shadow: 0 18px 44px rgba(21,93,168,.14);
}

.frontend-footer {
    background: var(--permata-blue-dark);
    color: #fff;
}

.frontend-footer .text-muted {
    color: rgba(255,255,255,.72) !important;
}

.frontend-nav .navbar-toggler:focus {
    box-shadow: none;
}

.footer-heading {
    margin-bottom: .8rem;
    color: var(--pinang);
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.footer-partners {
    display: grid;
    gap: .55rem;
}

.footer-partners a {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: rgba(255,255,255,.88);
    text-decoration: none;
}

.footer-partners a:hover {
    color: var(--pinang);
}

.footer-partners img {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #fff;
    object-fit: contain;
    padding: .15rem;
}

.footer-map {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 8px;
    background: rgba(255,255,255,.08);
}

.footer-map iframe {
    display: block;
    width: 100%;
    height: 220px;
    border: 0;
}

.frontend-footer .row {
    row-gap: 1.5rem;
}

.login-box {
    width: min(420px, calc(100% - 2rem));
}

.timeline-icon {
    display: none;
}

.table th {
    white-space: nowrap;
}

.master-photo {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border: 1px solid #d5e1ef;
    border-radius: 8px;
    background: #f8fafc;
}

.master-photo-lg {
    width: 160px;
    max-width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border: 1px solid #d5e1ef;
    border-radius: 8px;
    background: #f8fafc;
}

.teacher-profile {
    max-width: 1120px;
    margin: 0 auto;
}

.teacher-hero-card {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(12,57,112,.97), rgba(21,93,168,.9)),
        url("../../../adminlte/assets/img/photo2.png") center/cover;
    color: #fff;
    box-shadow: 0 18px 42px rgba(21,93,168,.18);
}

.teacher-hero-card::after {
    content: "";
    position: absolute;
    right: -72px;
    bottom: -96px;
    width: 240px;
    height: 240px;
    border-radius: 999px;
    background: rgba(245,188,47,.34);
}

.teacher-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1.3rem;
    min-height: 240px;
    padding: 2rem;
}

.teacher-back {
    position: absolute;
    z-index: 2;
    top: 1rem;
    right: 1rem;
    color: var(--permata-blue-dark);
    font-weight: 800;
}

.teacher-avatar {
    width: 148px;
    height: 148px;
    flex: 0 0 148px;
    border: 5px solid rgba(255,255,255,.86);
    border-radius: 8px 34px 8px 8px;
    background: #fff;
    object-fit: cover;
    box-shadow: 0 18px 34px rgba(0,0,0,.22);
}

.teacher-label {
    display: inline-block;
    margin-bottom: .5rem;
    color: var(--pinang);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.teacher-hero-card h1 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 900;
    letter-spacing: 0;
}

.teacher-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: .9rem;
}

.teacher-meta span {
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    padding: .38rem .72rem;
    color: rgba(255,255,255,.9);
    font-weight: 700;
    font-size: .9rem;
}

.teacher-meta .status-pill {
    background: var(--pinang);
    border-color: var(--pinang);
    color: var(--permata-blue-dark);
}

.teacher-info-card {
    height: auto;
    border: 1px solid rgba(21,93,168,.10);
    border-radius: 8px;
    background: #fff;
    padding: 1.25rem;
    box-shadow: 0 12px 28px rgba(21,93,168,.08);
}

.teacher-info-card h2 {
    color: var(--permata-blue-dark);
    font-size: 1.08rem;
    font-weight: 900;
    margin-bottom: 1rem;
}

.teacher-info-list {
    display: grid;
    gap: .75rem;
}

.teacher-info-list div {
    border-bottom: 1px solid #e5edf7;
    padding-bottom: .75rem;
}

.teacher-info-list div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.teacher-info-list span,
.teacher-subject-card small {
    display: block;
    color: var(--muted);
    font-size: .82rem;
}

.teacher-info-list strong {
    display: block;
    margin-top: .12rem;
    color: var(--ink);
}

.teacher-address {
    margin-bottom: 0;
    color: var(--muted);
    line-height: 1.75;
}

.teacher-subject-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin-top: 1rem;
}

.teacher-subject-card {
    border: 1px solid rgba(21,93,168,.12);
    border-radius: 8px;
    background: linear-gradient(180deg, #fff, var(--permata-blue-soft));
    padding: .9rem;
}

.teacher-subject-card strong,
.teacher-subject-card span {
    display: block;
}

.teacher-subject-card strong {
    color: var(--permata-blue-dark);
}

.teacher-subject-card span {
    color: var(--ink);
    margin-top: .18rem;
}

.teacher-empty {
    border-radius: 8px;
    background: #f8fafc;
    color: var(--muted);
    margin-top: 1rem;
    padding: 1rem;
}

.btn-group form {
    display: inline-flex;
}

.datatable-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    padding: 1rem;
    border-bottom: 1px solid #e5edf7;
    background: #fbfdff;
}

.datatable-toolbar label {
    color: var(--muted);
    font-size: .9rem;
}

.datatable-toolbar input,
.datatable-toolbar select {
    border: 1px solid #d5e1ef;
    border-radius: 6px;
    padding: .42rem .62rem;
}

.datatable-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    padding: 1rem;
    border-top: 1px solid #e5edf7;
}

.datatable-pagination {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
}

.datatable-pagination button {
    border: 1px solid #d5e1ef;
    background: #fff;
    border-radius: 6px;
    padding: .36rem .65rem;
    color: var(--permata-blue);
}

.datatable-pagination button.active {
    background: var(--permata-blue);
    border-color: var(--permata-blue);
    color: #fff;
}

.datatable-pagination button:disabled {
    color: #94a3b8;
    background: #f8fafc;
}

.datatable-sort {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 800;
    padding: 0;
    text-align: left;
}

.datatable-sort-icons {
    display: inline-grid;
    gap: 0;
    color: #94a3b8;
    font-size: .58rem;
    line-height: .75;
}

.datatable-sort.sort-asc .sort-up,
.datatable-sort.sort-desc .sort-down {
    color: var(--permata-blue);
}

@media (max-width: 767.98px) {
    .frontend-theme {
        overflow-x: hidden;
    }

    .frontend-topbar {
        text-align: center;
        font-size: .78rem;
        padding-top: .38rem;
        padding-bottom: .38rem;
    }

    .frontend-topbar .container {
        gap: .25rem;
    }

    .hero-school {
        text-align: left;
    }

    .frontend-nav {
        padding-top: .35rem;
        padding-bottom: .35rem;
    }

    .frontend-nav .container {
        align-items: center;
        flex-wrap: wrap;
        position: static;
    }

    .frontend-nav .navbar-brand {
        flex: 1 1 calc(100% - 58px);
        min-width: 0;
        max-width: calc(100% - 58px);
        white-space: normal;
        line-height: 1.15;
        font-size: 1.08rem;
    }

    .frontend-nav .brand-mark {
        flex: 0 0 38px;
    }

    .frontend-nav .navbar-toggler {
        width: 48px;
        height: 44px;
        margin-left: auto;
        padding: .35rem;
    }

    .frontend-nav .navbar-collapse {
        flex-basis: 100%;
        max-height: calc(100vh - 110px);
        overflow-y: auto;
        border: 1px solid rgba(21,93,168,.12);
        border-top: 0;
        background: #fff;
        border-radius: 0 0 10px 10px;
        margin-top: .5rem;
        padding: .45rem;
        box-shadow: 0 16px 38px rgba(10, 36, 87, .18);
    }

    .frontend-nav .navbar-nav {
        width: 100%;
        padding-bottom: .4rem;
    }

    .frontend-nav .nav-item {
        width: 100%;
    }

    .frontend-nav .nav-link {
        width: 100%;
        border-radius: 8px;
        padding: .58rem .75rem;
    }

    .frontend-nav .dropdown-menu {
        border: 1px solid rgba(21,93,168,.10);
        position: static;
        float: none;
        width: 100%;
        margin-top: .4rem;
        margin-bottom: .2rem;
        box-shadow: none;
    }

    .frontend-nav .dropdown-item {
        padding: .55rem .85rem;
    }

    .frontend-nav .btn-pinang {
        display: block;
        text-align: left;
        width: 100%;
        margin: .25rem 0 0;
    }

    .school-carousel .carousel-caption {
        left: 1rem;
        right: 1rem;
        max-width: calc(100% - 2rem);
    }

    .school-carousel .carousel-item,
    .school-carousel img {
        height: 430px;
        min-height: 430px;
    }

    .school-carousel .carousel-caption {
        bottom: 3rem;
    }

    .school-carousel .carousel-caption h2 {
        font-size: 2.2rem;
    }

    .school-carousel .carousel-caption p {
        font-size: .95rem;
    }

    .school-carousel .carousel-control-prev,
    .school-carousel .carousel-control-next {
        width: 12%;
    }

    .min-vh-hero {
        min-height: auto;
        padding: 2.4rem 0 4rem;
    }

    .hero-title {
        font-size: 2.55rem;
    }

    .hero-school .d-flex {
        justify-content: flex-start;
    }

    .hero-stats,
    .quick-grid {
        grid-template-columns: 1fr 1fr;
    }

    .hero-visual img {
        border-radius: 8px 8px 8px 36px;
    }

    .hero-floating-card {
        position: static;
        margin-top: .75rem;
        max-width: none;
    }

    .quick-links {
        margin-top: -1.3rem;
    }

    .quick-card {
        min-height: 122px;
    }

    .quick-card strong {
        font-size: 1rem;
    }

    .quick-card span {
        line-height: 1.45;
        font-size: .92rem;
    }

    .portal-panel {
        margin-top: .5rem;
    }

    .section-pad,
    .split-section {
        padding: 3rem 0;
    }

    .section-heading {
        text-align: left;
    }

    .values-list div {
        grid-template-columns: 1fr;
        gap: .25rem;
    }

    .cta-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.4rem;
    }

    .frontend-nav .navbar-nav {
        padding-top: .75rem;
    }

    .datatable-toolbar,
    .datatable-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .datatable-toolbar input,
    .datatable-toolbar select {
        width: 100%;
    }

    .teacher-hero-inner {
        flex-direction: column;
        align-items: flex-start;
        min-height: auto;
        padding: 4rem 1.25rem 1.5rem;
    }

    .teacher-avatar {
        width: 126px;
        height: 126px;
        flex-basis: 126px;
    }

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

    .footer-map iframe {
        height: 180px;
    }

    .frontend-footer {
        font-size: .95rem;
    }
}

@media (max-width: 575.98px) {
    .section-pad,
    .split-section {
        padding: 2.4rem 0;
    }

    .section-heading {
        margin-bottom: 1.25rem;
    }

    .section-heading h2 {
        font-size: 1.65rem;
    }

    .hero-title {
        font-size: 1.95rem;
    }

    .hero-copy {
        font-size: 1rem;
        line-height: 1.65;
    }

    .school-carousel .carousel-caption h2 {
        font-size: 1.72rem;
        line-height: 1.15;
    }

    .school-carousel .carousel-caption p {
        margin-bottom: .45rem;
        font-size: .9rem;
        line-height: 1.45;
    }

    .hero-stats,
    .quick-grid {
        grid-template-columns: 1fr;
    }

    .cta-inner,
    .agenda-panel,
    .portal-panel {
        margin-top: 0;
    }

    .cta-inner {
        padding: 1.2rem;
        gap: 1rem;
    }

    .cta-inner h2 {
        margin-bottom: 0;
        font-size: 1.35rem;
    }

    .values-list div {
        padding: .72rem;
    }

    .feature-chip {
        min-height: 46px;
        padding: .65rem;
        font-size: .92rem;
    }

    .school-news-card h3,
    .program-card h3 {
        font-size: 1rem;
    }

    .agenda-item {
        grid-template-columns: 48px 1fr;
    }

    .agenda-date {
        min-height: 48px;
        padding: .25rem;
        font-size: .9rem;
    }
}