/* ===== PPHIMM Design Tokens — Batch 3 ===== */
:root {
    --pphimm-teal: #0d7377;
    --pphimm-teal-dark: #0a5c5e;
    --pphimm-green: #27ae60;
    --pphimm-green-light: #2ecc71;
    --pphimm-gradient-brand: linear-gradient(135deg, #0d7377 0%, #1a8f8b 50%, #27ae60 100%);
    --pphimm-gradient-brand-short: linear-gradient(135deg, #0d7377, #27ae60);
    --pphimm-gradient-overlay: linear-gradient(transparent, rgba(0, 0, 0, .7));
    --pphimm-radius-card: 1rem;
    --pphimm-radius-pill: 50rem;
    --pphimm-shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .075);
    --pphimm-shadow-card: 0 4px 24px rgba(0, 0, 0, .08);
    --pphimm-card-img-h: 200px;
}

/* Kartu unifikasi */
.pphimm-card {
    border-radius: var(--pphimm-radius-card);
}
.pphimm-card .pphimm-card-img {
    height: var(--pphimm-card-img-h);
    object-fit: cover;
}
.pphimm-card .pphimm-card-fallback {
    height: var(--pphimm-card-img-h);
}
.pphimm-card-overlay {
    background: var(--pphimm-gradient-overlay);
}
.pphimm-card-clickable {
    transition: transform .15s ease, box-shadow .15s ease;
}
.pphimm-card-clickable:hover {
    transform: translateY(-2px);
}
.pphimm-card-clickable:focus-visible {
    outline: 3px solid var(--pphimm-teal);
    outline-offset: 2px;
}

/* Hero gradient tunggal */
.pphimm-gradient-hero {
    background: var(--pphimm-gradient-brand);
}
.pphimm-gradient-brand-short {
    background: var(--pphimm-gradient-brand-short);
}

/* Unifikasi stat counters frontend ke token brand */
.stat-green,
.about-icon-box {
    background: var(--pphimm-gradient-brand-short);
}

/* Ikon stat dashboard backend — gantikan inline style per-view */
.dash-stat-icon.is-people {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}
.dash-stat-icon.is-cart {
    background: linear-gradient(135deg, #10b981, #059669);
}
.dash-stat-icon.is-news {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}
.dash-stat-icon.is-mail {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

/* Ikon auth (login) ke token brand */
.auth-icon {
    background: var(--pphimm-gradient-brand-short);
}

/* ===== C1: panel, header icon, buttons, hero spacing, type scale ===== */
:root {
    --pphimm-topbar-h: 26px;
    --pphimm-header-h: 76px;
    --pphimm-fs-badge: .65rem;
    --pphimm-radius-pagination: 10px;
}

/* Top bar statis + navbar sticky (anti-overlap, tanpa body padding) */
.top-date-bar {
    min-height: var(--pphimm-topbar-h);
    line-height: var(--pphimm-topbar-h);
    background: var(--pphimm-gradient-brand-short);
}
.pphimm-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* Brand logo proporsional (anti-gepeng) */
.pphimm-navbar .navbar-brand {
    margin-right: .25rem;
    padding: 0;
}
.pphimm-brand-logo {
    height: 38px;
    width: auto;
    max-width: 110px;
    object-fit: contain;
}
.pphimm-brand-logo.is-left {
    max-width: 40px;
}

/* Menu + aksi anti-crop */
.pphimm-navbar .navbar-nav .nav-link {
    white-space: nowrap;
}
.pphimm-header-actions {
    min-width: 0;
}
.pphimm-user-name {
    display: inline-block;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
@media (max-width: 1199.98px) {
    .pphimm-navbar .navbar-collapse {
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }
    .pphimm-navbar .navbar-nav {
        width: 100%;
    }
}

/* Tower Game gradient text (ganti inline style di _header) */
.pphimm-tower-link {
    background: linear-gradient(135deg, #e67e22, #e74c3c);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}

/* Focus-visible global untuk keyboard (nav, link, button, toggler) */
:where(a, button, .btn, .nav-link, .dropdown-item, .page-link):focus-visible {
    outline: 3px solid var(--pphimm-teal);
    outline-offset: 2px;
    border-radius: .375rem;
}

/* Responsif ringan: target sentuh & kartu soal di HP */
.qty-minus,
.qty-plus {
    min-width: 44px;
    min-height: 44px;
}
@media (max-width: 360px) {
    .question-card .card-body {
        padding: 1rem;
    }
}

/* Panel putih baku (ganti ~30x bg-white rounded-4 shadow-sm p-4 p-lg-5 mb-4) */
.pphimm-panel {
    background: #fff;
    border-radius: var(--pphimm-radius-card);
    box-shadow: var(--pphimm-shadow-card);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
@media (min-width: 992px) {
    .pphimm-panel {
        padding: 3rem;
    }
}

/* Ikon header list raksasa — ganti font-size:12rem inline */
.pphimm-header-icon {
    font-size: clamp(4rem, 12vw, 12rem);
    line-height: 1;
}

/* Tombol baku */
.pphimm-btn-back {
    border-radius: var(--pphimm-radius-pill);
    padding: .5rem 3rem;
}
.pphimm-btn-cta {
    border-radius: var(--pphimm-radius-pill);
    padding: .5rem 1.5rem;
    box-shadow: var(--pphimm-shadow-sm);
}

/* Hero halaman: padding-token gantikan margin negatif overlap */
.pphimm-page-hero {
    padding-top: 3rem;
    padding-bottom: 5rem;
}
.pphimm-page-body {
    margin-top: -3rem;
    position: relative;
    z-index: 2;
}

/* Badge kecil (ganti font-size:10px inline) */
.pphimm-badge-count {
    font-size: var(--pphimm-fs-badge);
}

/* ===== D1: util netral untuk member & tes ===== */
/* Avatar (foto profil / fallback) — ganti inline rgba putih berulang */
.pphimm-avatar {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border: 4px solid rgba(255, 255, 255, .4);
}
.pphimm-avatar-sm {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, .4);
}
.pphimm-avatar-fallback {
    background: rgba(255, 255, 255, .15);
}
/* Tile ikon netral/aksen — ganti inline rgba tint + color hex */
.pphimm-icon-tile {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background: rgba(13, 115, 119, .08);
    color: var(--pphimm-teal);
}

/* ===== D2: Design system (warna, tombol, spacing, tipografi) =====
 * Konvensi yang dibakukan untuk halaman frontend:
 * - Aksi utama per konteks: .btn-primary (teal brand) — maksimal satu.
 * - .btn-success = selesai/lulus/benar; .btn-warning = lanjutkan;
 *   .btn-danger = hapus/bahaya; .btn-outline-secondary = aksi sekunder.
 * - Warna angka semantik: text-success (lulus/benar), text-danger (gagal/salah);
 *   selain itu netral (text-body-secondary).
 * - Spacing: grid daftar g-4, kartu p-4 (form p-4 p-lg-5), antar-seksi mb-4,
 *   dalam-kartu mb-3.
 * - Tipografi: .pphimm-page-title / .pphimm-section-title / .pphimm-card-title / .pphimm-meta.
 */
:root {
    --pphimm-accent: #0d7377;
    --pphimm-accent-strong: #0a5c5e;
    /* Remap Bootstrap primary ke brand teal agar tombol konsisten */
    --bs-primary: #0d7377;
    --bs-primary-rgb: 13, 115, 119;
}

/* Tombol primary & turunannya → teal brand */
.btn-primary {
    --bs-btn-bg: var(--pphimm-accent);
    --bs-btn-border-color: var(--pphimm-accent);
    --bs-btn-hover-bg: var(--pphimm-accent-strong);
    --bs-btn-hover-border-color: var(--pphimm-accent-strong);
    --bs-btn-active-bg: var(--pphimm-accent-strong);
    --bs-btn-active-border-color: var(--pphimm-accent-strong);
    --bs-btn-disabled-bg: var(--pphimm-accent);
    --bs-btn-disabled-border-color: var(--pphimm-accent);
}
.btn-outline-primary {
    --bs-btn-color: var(--pphimm-accent);
    --bs-btn-border-color: var(--pphimm-accent);
    --bs-btn-hover-bg: var(--pphimm-accent);
    --bs-btn-hover-border-color: var(--pphimm-accent);
    --bs-btn-active-bg: var(--pphimm-accent);
    --bs-btn-active-border-color: var(--pphimm-accent);
}
.text-primary {
    color: var(--pphimm-accent) !important;
}
.pphimm-pagination .page-item.active .page-link,
.page-item.active .page-link {
    background-color: var(--pphimm-accent);
    border-color: var(--pphimm-accent);
}

/* Skala tipografi halaman (satu sumber hierarki) — ukuran ringkas */
.pphimm-page-title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}
.pphimm-section-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}
.pphimm-card-title {
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.4;
}
.pphimm-meta {
    font-size: .8125rem;
    color: var(--bs-secondary-color);
}