/* ==========================================================================
   Panel pratinjau backend — Halaman SEO, Bidang Pelatihan, Kategori
   --------------------------------------------------------------------------
   Kolom kanan pada form yang menunjukkan hasil dari apa yang sedang diketik.
   Semuanya digambar mandiri: public/css/style.css milik situs sengaja TIDAK
   dimuat di panel karena akan bertabrakan dengan gaya Filament. Tujuannya
   bukan kemiripan piksel dengan situs, melainkan supaya staff bisa menilai
   susunan dan panjang tulisannya sebelum menyimpan.

   Didaftarkan lewat FilamentAsset di AppServiceProvider (tanpa npm).
   ========================================================================== */

/* Panel ikut turun saat form digulir, supaya pratinjau selalu terlihat. */
.ge-sticky {
    position: sticky;
    top: 5rem;
}

/* Di layar sempit kolomnya sudah menumpuk, sticky justru menutupi isian. */
@media (max-width: 1024px) {
    .ge-sticky {
        position: static;
    }
}

.pv-card {
    border: 1px solid rgb(229 231 235);
    border-radius: 0.65rem;
    overflow: hidden;
    background: rgb(255 255 255);
    margin-bottom: 0.85rem;
}

.dark .pv-card {
    border-color: rgb(55 65 81);
    background: rgb(24 30 42);
}

.pv-head {
    padding: 0.45rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgb(107 114 128);
    background: rgb(249 250 251);
    border-bottom: 1px solid rgb(229 231 235);
}

.dark .pv-head {
    background: rgb(17 24 39);
    color: rgb(156 163 175);
    border-color: rgb(55 65 81);
}

.pv-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.pv-tools {
    display: inline-flex;
    gap: 0.25rem;
}

.pv-btn {
    padding: 0.1rem 0.45rem;
    border-radius: 0.3rem;
    border: 1px solid rgb(209 213 219);
    background: rgb(255 255 255);
    font-size: 0.6875rem;
    font-weight: 600;
    color: rgb(75 85 99);
    text-decoration: none;
    cursor: pointer;
    line-height: 1.5;
}

.pv-btn:hover {
    background: rgb(243 244 246);
}

.pv-btn.is-on {
    background: rgb(13 148 136);
    border-color: rgb(13 148 136);
    color: #fff;
}

.dark .pv-btn {
    background: rgb(17 24 39);
    border-color: rgb(75 85 99);
    color: rgb(209 213 219);
}

/* --- Kartu hasil pencarian Google ---------------------------------------- */

.pv-serp {
    padding: 0.8rem 0.85rem;
}

.pv-serp-url {
    font-size: 0.75rem;
    line-height: 1.4;
}

.pv-serp-site {
    color: rgb(32 33 36);
    font-weight: 500;
}

.dark .pv-serp-site {
    color: rgb(229 231 235);
}

.pv-serp-path {
    color: rgb(95 99 104);
}

.dark .pv-serp-path {
    color: rgb(156 163 175);
}

/* Warna & font meniru SERP Google supaya penilaian panjangnya realistis. */
.pv-serp-title {
    margin-top: 0.15rem;
    font-size: 1.05rem;
    line-height: 1.35;
    color: #1a0dab;
    font-family: Arial, Helvetica, sans-serif;
}

.dark .pv-serp-title {
    color: #8ab4f8;
}

.pv-serp-desc {
    margin-top: 0.2rem;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: rgb(77 81 86);
    font-family: Arial, Helvetica, sans-serif;
}

.dark .pv-serp-desc {
    color: rgb(189 193 198);
}

/* --- Penghitung karakter -------------------------------------------------- */

.pv-meter {
    border-top: 1px solid rgb(229 231 235);
}

.dark .pv-meter {
    border-color: rgb(55 65 81);
}

.pv-meter-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    color: rgb(107 114 128);
}

.pv-meter-row + .pv-meter-row {
    border-top: 1px dashed rgb(229 231 235);
}

.dark .pv-meter-row + .pv-meter-row {
    border-color: rgb(55 65 81);
}

.pv-count {
    font-weight: 700;
    padding: 0.05rem 0.4rem;
    border-radius: 0.25rem;
}

.pv-kosong {
    background: rgb(243 244 246);
    color: rgb(107 114 128);
}

.pv-pendek {
    background: rgb(254 249 195);
    color: rgb(133 77 14);
}

.pv-pas {
    background: rgb(209 250 229);
    color: rgb(6 95 70);
}

.pv-lebih {
    background: rgb(254 226 226);
    color: rgb(153 27 27);
}

.pv-note {
    margin: 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    line-height: 1.55;
    color: rgb(107 114 128);
    border-top: 1px solid rgb(229 231 235);
}

.dark .pv-note {
    color: rgb(156 163 175);
    border-color: rgb(55 65 81);
}

.pv-note-warn {
    color: rgb(153 27 27);
}

.dark .pv-note-warn {
    color: rgb(252 165 165);
}

/* --- Kartu berbagi (WhatsApp / Facebook) ---------------------------------- */

.pv-social {
    padding: 0.75rem;
}

.pv-social-img {
    display: block;
    width: 100%;
    max-height: 150px;
    object-fit: cover;
    border-radius: 0.4rem 0.4rem 0 0;
    border: 1px solid rgb(229 231 235);
    border-bottom: 0;
}

.pv-social-kosong {
    padding: 1.1rem 0.75rem;
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.5;
    color: rgb(107 114 128);
    background: rgb(249 250 251);
    border: 1px dashed rgb(209 213 219);
    border-bottom: 0;
    border-radius: 0.4rem 0.4rem 0 0;
}

.pv-social-kosong span {
    font-size: 0.6875rem;
    opacity: 0.8;
}

.dark .pv-social-kosong {
    background: rgb(17 24 39);
    border-color: rgb(75 85 99);
}

.pv-social-body {
    padding: 0.5rem 0.65rem;
    border: 1px solid rgb(229 231 235);
    border-radius: 0 0 0.4rem 0.4rem;
    background: rgb(249 250 251);
}

.dark .pv-social-body {
    background: rgb(17 24 39);
    border-color: rgb(55 65 81);
}

.pv-social-host {
    font-size: 0.625rem;
    color: rgb(107 114 128);
    letter-spacing: 0.03em;
}

.pv-social-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: rgb(17 24 39);
    line-height: 1.35;
}

.dark .pv-social-title {
    color: rgb(229 231 235);
}

.pv-social-desc {
    font-size: 0.75rem;
    color: rgb(107 114 128);
    line-height: 1.45;
}

/* --- Iframe halaman asli --------------------------------------------------- */

.pv-stage {
    display: flex;
    justify-content: center;
    padding: 0.6rem;
    background: rgb(243 244 246);
    overflow: auto;
}

.dark .pv-stage {
    background: rgb(12 17 26);
}

.pv-stage iframe {
    height: 420px;
    border: 0;
    border-radius: 0.4rem;
    background: #fff;
    box-shadow: 0 4px 16px rgb(0 0 0 / 0.12);
    transition: width 0.2s ease;
}

/* --- Kartu Bidang Pelatihan ------------------------------------------------ */

.pv-tcard {
    position: relative;
    margin: 0.75rem;
    padding: 1rem 0.9rem;
    border: 1px solid rgb(229 231 235);
    border-radius: 0.75rem;
    background: linear-gradient(180deg, rgb(255 255 255), rgb(248 250 252));
}

.dark .pv-tcard {
    border-color: rgb(55 65 81);
    background: linear-gradient(180deg, rgb(30 41 59), rgb(17 24 39));
}

.pv-tcard.is-highlight {
    border-color: rgb(13 148 136);
    box-shadow: 0 0 0 1px rgb(13 148 136 / 0.35);
}

.pv-tcard.is-cta {
    border-style: dashed;
    text-align: center;
}

.pv-badge {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    padding: 0.1rem 0.45rem;
    border-radius: 0.25rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.pv-badge-bnsp {
    background: rgb(209 250 229);
    color: rgb(6 95 70);
}

.pv-badge-kemnaker {
    background: rgb(254 249 195);
    color: rgb(133 77 14);
}

.pv-tcard-icon {
    width: 2.4rem;
    height: 2.4rem;
    color: rgb(13 148 136);
    margin-bottom: 0.6rem;
}

/* Gambar kartu: penuh sampai tepi kartu, rasio 3:2 seperti di situs. */
.pv-tcard-gambar {
    margin: -1rem -0.9rem 0.75rem;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 0.75rem 0.75rem 0 0;
    background: rgb(226 232 240);
}

.pv-tcard-gambar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pv-badge {
    z-index: 1;
}

.pv-tcard.is-cta .pv-tcard-icon {
    margin: 0 auto 0.6rem;
}

.pv-tcard-icon svg {
    width: 100%;
    height: 100%;
}

.pv-tcard-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: rgb(15 23 42);
    line-height: 1.35;
}

.dark .pv-tcard-title {
    color: rgb(241 245 249);
}

.pv-tcard-en {
    font-size: 0.75rem;
    color: rgb(107 114 128);
    font-style: italic;
    margin-top: 0.1rem;
}

.pv-tcard-list {
    margin: 0.6rem 0 0;
    padding: 0;
    list-style: none;
}

.pv-tcard-list li {
    position: relative;
    padding-left: 1rem;
    margin-bottom: 0.3rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgb(55 65 81);
}

.dark .pv-tcard-list li {
    color: rgb(203 213 225);
}

.pv-tcard-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: rgb(13 148 136);
    font-weight: 700;
}

.pv-tcard-cta {
    margin: 0.5rem 0 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: rgb(55 65 81);
}

.dark .pv-tcard-cta {
    color: rgb(203 213 225);
}

.pv-tcard-btn {
    padding: 0.4rem 0.75rem;
    border-radius: 0.4rem;
    background: rgb(13 148 136);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
}

.pv-tcard-link {
    margin-top: 0.65rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: rgb(13 148 136);
}

/* --- Tombol filter kategori ------------------------------------------------ */

.pv-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.75rem;
}

.pv-chip {
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    border: 1px solid rgb(209 213 219);
    background: rgb(255 255 255);
    font-size: 0.75rem;
    font-weight: 600;
    color: rgb(75 85 99);
}

.dark .pv-chip {
    background: rgb(17 24 39);
    border-color: rgb(75 85 99);
    color: rgb(203 213 225);
}

/* Kategori yang sedang disunting, supaya posisinya di deretan itu jelas. */
.pv-chip.is-now {
    background: rgb(13 148 136);
    border-color: rgb(13 148 136);
    color: #fff;
}

/* ==========================================================================
   Papan kartu — Logo Klien & Galeri Kegiatan
   --------------------------------------------------------------------------
   contentGrid Filament sudah menyamakan TINGGI kartu (tiap .fi-ta-record
   membawa h-full). Yang tidak rapi adalah isinya: nama perusahaan panjang
   melipat tiga baris sehingga tombol aksi berhenti di ketinggian berbeda-beda,
   logo dengan rasio bermacam-macam membuat garis judul tidak sejajar, dan URL
   penuh meluber keluar kartu.

   Selector di bawah mengikuti struktur nyata yang dirender Filament 3.3:

     .ge-kartu                                  <- ->recordClasses()
       └ div.flex.items-center                  <- baris checkbox + isi
           ├ label                              <- checkbox
           └ div.flex.flex-col                  <- kolom isi
               ├ div.flex-1 > … > Stack
               │   ├ .fi-ta-image.ge-kartu-bingkai > div > div > img.ge-kartu-gambar
               │   ├ .fi-ta-text.ge-kartu-judul
               │   └ .fi-ta-text.ge-kartu-meta
               └ .fi-ta-actions

   Dipasang lewat ->recordClasses() dan ->extraAttributes() di ClientResource
   dan GalleryResource.
   ========================================================================== */

.ge-kartu {
    transition: box-shadow 0.15s ease;
}

.ge-kartu:hover {
    box-shadow: 0 2px 12px rgb(0 0 0 / 0.08);
}

/*
 * Baris checkbox+isi diregangkan setinggi kartu, lalu kolom isinya ikut
 * meregang. Tanpa dua baris ini, kolom isi hanya setinggi isinya sendiri dan
 * `margin-top: auto` pada deretan aksi tidak punya ruang untuk mendorong.
 * `items-center` bawaan ditimpa supaya checkbox tetap di atas, bukan melayang
 * di tengah kartu yang tinggi.
 */
.ge-kartu > div {
    flex: 1 1 auto;
    align-items: stretch;
    min-width: 0;
}

.ge-kartu > div > div:last-child {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/*
 * Deretan aksi selalu menempel di dasar kartu, sejajar antar-kartu.
 *
 * flex-wrap dipaksa karena Filament memakai `flex-wrap sm:flex-nowrap`: di layar
 * lebar tombolnya berhenti melipat dan yang terakhir terpotong di tepi kartu.
 * Di papan kartu, melipat jauh lebih baik daripada terpotong.
 */
.ge-kartu .fi-ta-actions {
    margin-top: auto;
    flex-wrap: wrap;
    row-gap: 0.4rem;
    min-width: 0;
}

/* --- Kotak gambar ------------------------------------------------------- */

/*
 * Tinggi kotak dikunci supaya judul semua kartu mulai di garis yang sama,
 * berapa pun rasio berkas aslinya. Rantai div perantara ikut diregangkan
 * karena Filament membungkus <img> dua lapis di dalam pembungkus flex-nya.
 */
.ge-kartu-bingkai,
.ge-kartu-bingkai > div,
.ge-kartu-bingkai > div > div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
}

.ge-kartu-bingkai {
    overflow: hidden;
    border-radius: 0.5rem;
    background: rgb(249 250 251);
}

.dark .ge-kartu-bingkai {
    background: rgb(17 24 39);
}

/*
 * !important dipakai dengan sadar: Filament menempelkan `height` sebagai gaya
 * inline (dari ->height()) dan `object-cover max-w-none` sebagai utility
 * Tailwind. Keduanya menang atas kelas biasa, dan keduanya justru yang membuat
 * logo terpotong.
 */
.ge-kartu-gambar {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    display: block;
}

/* Logo: utuh di dalam kotak putih. Memotongnya membuat merek sulit dikenali. */
.ge-kartu-logo .ge-kartu-bingkai {
    height: 86px;
    background: #ffffff;
    border: 1px solid rgb(243 244 246);
    padding: 0.5rem;
}

.dark .ge-kartu-logo .ge-kartu-bingkai {
    border-color: rgb(55 65 81);
}

.ge-kartu-logo .ge-kartu-gambar {
    object-fit: contain !important;
}

/* Foto kegiatan: memenuhi kotak, karena yang dinilai komposisinya. */
.ge-kartu-foto .ge-kartu-bingkai {
    height: 168px;
}

.ge-kartu-foto .ge-kartu-gambar {
    object-fit: cover !important;
}

/* --- Teks kartu --------------------------------------------------------- */

/*
 * Judul dibatasi dua baris dengan tinggi tetap. "PT Enviromate Technology
 * International" memakai tiga baris bila dibiarkan, dan barisnya jadi
 * bergerigi. Tinggi tetap membuat baris keterangan di bawahnya sejajar
 * meski namanya hanya satu baris.
 */
.ge-kartu-judul .fi-ta-text-item-label {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
    word-break: break-word;
}

.ge-kartu-judul {
    min-height: 2.7em;
}

/* Baris keterangan selalu satu baris; sisanya dipotong dengan elipsis. */
.ge-kartu-meta,
.ge-kartu-meta .fi-ta-text-item,
.ge-kartu-meta .fi-ta-text-item-label {
    min-width: 0;
    max-width: 100%;
}

.ge-kartu-meta .fi-ta-text-item-label {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
 * Pembungkus `max-w-max` bawaan Filament membuat teks memakai lebar naturalnya
 * — yaitu melebar sejauh apa pun isinya, yang justru melahirkan bilah gulir
 * mendatar di papan kartu.
 */
.ge-kartu-meta .max-w-max,
.ge-kartu-judul .max-w-max {
    max-width: 100%;
    min-width: 0;
}

/*
 * Papan kartu tidak boleh menggulir mendatar. Wadah tabel Filament membawa
 * overflow-x untuk mode baris; dalam mode kartu itu hanya memunculkan bilah
 * gulir palsu di bawah papan.
 */
.fi-ta-content:has(.fi-ta-content-grid) {
    overflow-x: hidden;
}