/* ============================================================
   PG-CMS — komponen tambahan untuk modul Landing Page di admin
   Melengkapi pg-crud-shared.css, mengikuti token tema & dark mode.
   ============================================================ */

/* Sub-judul di header halaman */
.cms-subtitle {
    margin-top: 8px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .78);
    max-width: 620px;
}

/* Thumbnail gambar di datatable */
.cms-thumb {
    width: 78px;
    height: 52px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border, #e6e8ee);
    background: var(--bg-inset, #f4f5f8);
}

.cms-dash { color: var(--text-muted, #b6bac4); }

/* Badge status di datatable */
.cms-badge {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
}
.cms-badge-ok   { background: rgba(22, 163, 74, .12);  color: #16a34a; }
.cms-badge-off  { background: rgba(107, 114, 128, .14); color: #6b7280; }
.cms-badge-new  { background: rgba(209, 53, 57, .12);  color: #d13539; }
.cms-badge-read { background: rgba(37, 99, 235, .12);  color: #2563eb; }

/* Pratinjau ikon Font Awesome pada modul Layanan */
.cms-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(209, 53, 57, .1);
    color: #d13539;
    font-size: 15px;
}

/* Bintang rating pada modul Testimoni */
.cms-star { color: #f59e0b; letter-spacing: 1px; font-size: 12px; }

/* Teks bantuan di bawah field form */
.cms-hint {
    display: block;
    margin-top: 6px;
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--text-muted, #8a9099);
}
.cms-hint code {
    background: var(--bg-inset, #f1f2f6);
    padding: 1px 6px;
    border-radius: 5px;
    font-size: 11px;
    color: #d13539;
}

/* ── Halaman Pengaturan Landing ───────────────────────────── */
.cms-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}
.cms-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 100px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #e6e8ee);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-mid, #5b616e);
    transition: all .2s ease;
    cursor: pointer;
}
.cms-tab:hover,
.cms-tab.active {
    border-color: #d13539;
    color: #d13539;
    background: rgba(209, 53, 57, .07);
    text-decoration: none;
}

.cms-group { margin-bottom: 22px; scroll-margin-top: 90px; }

.cms-field-toggle .pg-select-field { font-weight: 700; }

.cms-sticky-save {
    position: sticky;
    bottom: 14px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding: 14px 20px;
    border-radius: 14px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #e6e8ee);
    box-shadow: 0 10px 30px rgba(20, 19, 23, .12);
    font-size: 12.5px;
    color: var(--text-mid, #5b616e);
}
.cms-sticky-save i { color: #d13539; margin-right: 4px; }

/* ── Detail pesan masuk ───────────────────────────────────── */
.cms-detail-grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 20px;
    align-items: start;
}

.cms-pesan-body {
    font-size: 14.5px;
    line-height: 1.8;
    color: var(--text, #2f3238);
    background: var(--bg-inset, #f7f8fa);
    border-radius: 12px;
    padding: 20px 22px;
    border-left: 3px solid #d13539;
}

.cms-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--border, #e6e8ee);
    font-size: 13.5px;
}
.cms-info-row:last-of-type { border-bottom: none; }
.cms-info-label { color: var(--text-muted, #8a9099); font-weight: 600; }
.cms-info-label i { width: 16px; margin-right: 6px; color: #d13539; }
.cms-info-val { font-weight: 700; color: var(--text, #2f3238); text-align: right; word-break: break-word; }

.cms-prop-ref {
    margin-top: 20px;
    padding: 18px 20px;
    border-radius: 12px;
    border: 1px dashed var(--border, #e6e8ee);
    background: var(--bg-inset, #f7f8fa);
}
.cms-prop-ref-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted, #8a9099);
    margin-bottom: 8px;
}
.cms-prop-ref-label i { color: #d13539; }
.cms-prop-ref-name { font-weight: 800; font-size: 15px; color: var(--text, #2f3238); }
.cms-prop-ref-meta { font-size: 12.5px; color: var(--text-mid, #5b616e); margin-top: 3px; }
.cms-prop-ref-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    font-size: 12.5px;
    font-weight: 700;
    color: #d13539;
}

.cms-status-actions { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border, #e6e8ee); }
.cms-status-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted, #8a9099);
    margin-bottom: 10px;
}
.cms-status-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.cms-sbtn {
    padding: 8px 16px;
    border-radius: 100px;
    border: 1px solid var(--border, #e6e8ee);
    background: var(--bg-card, #fff);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-mid, #5b616e);
    transition: all .2s ease;
}
.cms-sbtn:hover { border-color: #d13539; color: #d13539; text-decoration: none; }
.cms-sbtn-ok:hover { border-color: #16a34a; color: #16a34a; }

/* ── Dark mode ────────────────────────────────────────────── */
[data-theme="dark"] .cms-thumb { border-color: #2a2f3c; }
[data-theme="dark"] .cms-tab { background: #171a24; border-color: #262b38; color: #9097b4; }
[data-theme="dark"] .cms-tab:hover,
[data-theme="dark"] .cms-tab.active { background: rgba(209, 53, 57, .14); color: #ff6b76; border-color: #ff6b76; }
[data-theme="dark"] .cms-sticky-save { background: #171a24; border-color: #262b38; color: #9097b4; }
[data-theme="dark"] .cms-pesan-body { background: #1b1f2a; color: #d7dae3; }
[data-theme="dark"] .cms-info-row { border-color: #262b38; }
[data-theme="dark"] .cms-info-val { color: #e6e8ef; }
[data-theme="dark"] .cms-prop-ref { background: #1b1f2a; border-color: #2a2f3c; }
[data-theme="dark"] .cms-prop-ref-name { color: #e6e8ef; }
[data-theme="dark"] .cms-sbtn { background: #171a24; border-color: #262b38; color: #9097b4; }
[data-theme="dark"] .cms-hint code { background: #1b1f2a; }

/* ── Responsif ────────────────────────────────────────────── */
@media (max-width: 992px) {
    .cms-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 576px) {
    .cms-sticky-save { flex-direction: column; align-items: stretch; text-align: center; }
    .cms-thumb { width: 56px; height: 40px; }
}

/* ============================================================
   MIGRASI DATABASE
   ============================================================ */

.mig-panel {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 20px 22px;
    border-radius: 14px;
    margin-bottom: 18px;
    border: 1px solid var(--border, #e6e8ee);
    background: var(--bg-card, #fff);
}
.mig-panel-warn { border-color: rgba(245, 158, 11, .4); background: rgba(245, 158, 11, .07); }
.mig-panel-ok   { border-color: rgba(22, 163, 74, .35); background: rgba(22, 163, 74, .06); }
.mig-panel-icon {
    width: 46px; height: 46px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.mig-panel-warn .mig-panel-icon { background: rgba(245, 158, 11, .16); color: #d97706; }
.mig-panel-ok   .mig-panel-icon { background: rgba(22, 163, 74, .16);  color: #16a34a; }
.mig-panel h5 { margin: 0 0 3px; font-size: 15px; font-weight: 800; color: var(--text, #2f3238); }
.mig-panel p  { margin: 0; font-size: 12.5px; color: var(--text-mid, #5b616e); line-height: 1.6; max-width: 620px; }

.btn-mig-run {
    display: inline-flex; align-items: center; gap: 9px;
    background: #d13539; color: #fff; border: none;
    border-radius: 100px; padding: 12px 26px;
    font-size: 13.5px; font-weight: 800; cursor: pointer;
    box-shadow: 0 8px 22px rgba(209, 53, 57, .3); transition: all .2s;
}
.btn-mig-run:hover { background: #b02b2f; transform: translateY(-1px); }
.btn-mig-run:disabled { opacity: .6; cursor: default; transform: none; }
.mig-nope { font-size: 12.5px; font-weight: 700; color: var(--text-muted, #8a9099); }

.mig-item {
    display: flex; align-items: flex-start; gap: 16px;
    padding: 16px 0; border-bottom: 1px solid var(--border, #e6e8ee);
}
.mig-item:last-child { border-bottom: none; }
.mig-item-pending { background: rgba(209, 53, 57, .03); }
.mig-versi {
    display: inline-block; min-width: 44px; text-align: center;
    padding: 6px 10px; border-radius: 9px;
    background: rgba(209, 53, 57, .1); color: #d13539;
    font-size: 12px; font-weight: 800; letter-spacing: .04em;
}
.mig-item-judul { font-size: 14.5px; font-weight: 800; color: var(--text, #2f3238); }
.mig-item-ket   { font-size: 12.5px; color: var(--text-mid, #5b616e); margin-top: 3px; line-height: 1.6; }
.mig-item-meta  { font-size: 11.5px; color: var(--text-muted, #8a9099); margin-top: 6px; }
.mig-item-status { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex-shrink: 0; }
.mig-lihat {
    background: none; border: none; padding: 0; cursor: pointer;
    font-size: 11.5px; font-weight: 700; color: #d13539; text-decoration: underline;
}

.mig-laporan, .mig-hasil {
    background: var(--bg-inset, #f7f8fa);
    border-radius: 10px; padding: 12px 14px; margin: 0 0 12px;
}
.mig-hasil-kepala {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 10px; font-size: 13.5px; color: var(--text, #2f3238);
}
.mig-langkah {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 5px 0; font-size: 12.5px; color: var(--text-mid, #5b616e);
}
.mig-tag {
    flex-shrink: 0; min-width: 44px; text-align: center;
    padding: 2px 8px; border-radius: 6px;
    font-size: 10px; font-weight: 800; letter-spacing: .04em;
}
.mig-tag-add  { background: rgba(22, 163, 74, .14);  color: #16a34a; }
.mig-tag-skip { background: rgba(107, 114, 128, .14); color: #6b7280; }
.mig-galat {
    font-size: 12.5px; color: #d13539; font-weight: 600;
    background: rgba(209, 53, 57, .08); border-radius: 8px;
    padding: 9px 12px; margin-bottom: 10px;
}

.mig-tabel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.mig-tabel {
    display: flex; align-items: center; gap: 9px;
    padding: 10px 13px; border-radius: 10px;
    background: var(--bg-inset, #f7f8fa); border: 1px solid var(--border, #e6e8ee);
    font-size: 12.5px;
}
.mig-tabel i { color: #d13539; font-size: 12px; }
.mig-tabel-nama  { flex: 1; font-weight: 700; color: var(--text, #2f3238); }
.mig-tabel-baris { font-size: 11px; color: var(--text-muted, #8a9099); }

.mig-catatan {
    margin-top: 18px; font-size: 12px; line-height: 1.7;
    color: var(--text-muted, #8a9099); text-align: center;
}
.mig-catatan i { color: #d13539; }
.mig-catatan code {
    background: var(--bg-inset, #f1f2f6); padding: 2px 7px;
    border-radius: 5px; font-size: 11.5px; color: #d13539;
}

[data-theme="dark"] .mig-panel      { background: #171a24; border-color: #262b38; }
[data-theme="dark"] .mig-panel-warn { background: rgba(245, 158, 11, .1); }
[data-theme="dark"] .mig-panel-ok   { background: rgba(22, 163, 74, .1); }
[data-theme="dark"] .mig-panel h5   { color: #e6e8ef; }
[data-theme="dark"] .mig-item       { border-color: #262b38; }
[data-theme="dark"] .mig-item-judul { color: #e6e8ef; }
[data-theme="dark"] .mig-laporan,
[data-theme="dark"] .mig-hasil,
[data-theme="dark"] .mig-tabel      { background: #1b1f2a; border-color: #2a2f3c; }
[data-theme="dark"] .mig-tabel-nama { color: #d7dae3; }

.mig-panel-info { border-color: rgba(37, 99, 235, .35); background: rgba(37, 99, 235, .06); }
.mig-panel-info .mig-panel-icon { background: rgba(37, 99, 235, .16); color: #2563eb; }
.btn-mig-demo {
    display: inline-flex; align-items: center; gap: 9px;
    background: #16a34a; color: #fff; border: none;
    border-radius: 100px; padding: 12px 26px;
    font-size: 13.5px; font-weight: 800; cursor: pointer;
    box-shadow: 0 8px 22px rgba(22, 163, 74, .28); transition: all .2s;
}
.btn-mig-demo:hover { background: #12813b; transform: translateY(-1px); }
.btn-mig-demo:disabled { opacity: .6; cursor: default; transform: none; }
[data-theme="dark"] .mig-panel-info { background: rgba(37, 99, 235, .1); }