/* ============================================================================
   File   : /poc/assets/css/poc.css
   Project: far POC
   Fungsi : Style dasar dashboard far POC
   Catatan:
   - Desain dibuat minimal dulu
   - Nanti bisa dikembangkan menjadi UI lengkap
   ============================================================================ */


/* ============================================================================
   BLOK 1: RESET DASAR
   Fungsi:
   - Menyamakan box model
   - Mengurangi perbedaan tampilan antar browser
   ============================================================================ */
* {
    box-sizing: border-box;
}


/* ============================================================================
   BLOK 2: BODY
   Fungsi:
   - Mengatur font, background, dan warna teks utama
   ============================================================================ */
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #f4f7fb;
    color: #1f2937;
}


/* ============================================================================
   BLOK 3: LAYOUT UTAMA
   Fungsi:
   - Mengatur lebar konten dashboard
   - Memberi jarak agar tampilan tidak menempel ke tepi layar
   ============================================================================ */
.poc-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px;
}


/* ============================================================================
   BLOK 4: HEADER
   Fungsi:
   - Menampilkan identitas aplikasi far POC
   ============================================================================ */
.poc-header {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 22px 24px;
    margin-bottom: 20px;
}

.poc-header h1 {
    margin: 0 0 8px 0;
    font-size: 26px;
    color: #005698;
}

.poc-header p {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
}


/* ============================================================================
   BLOK 5: GRID STATISTIK
   Fungsi:
   - Menampilkan kartu angka ringkas di dashboard
   ============================================================================ */
.poc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.poc-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 18px;
}

.poc-card-title {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 10px;
}

.poc-card-number {
    font-size: 28px;
    font-weight: 700;
    color: #111827;
}


/* ============================================================================
   BLOK 6: PANEL
   Fungsi:
   - Kotak konten umum untuk tabel, log, atau informasi lanjutan
   ============================================================================ */
.poc-panel {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
}

.poc-panel h2 {
    margin: 0 0 14px 0;
    font-size: 18px;
    color: #005698;
}


/* ============================================================================
   BLOK 7: BADGE
   Fungsi:
   - Label kecil untuk status
   ============================================================================ */
.poc-badge {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.poc-badge-green {
    background: #dcfce7;
    color: #166534;
}

.poc-badge-yellow {
    background: #fef9c3;
    color: #854d0e;
}

.poc-badge-gray {
    background: #f3f4f6;
    color: #374151;
}


/* ============================================================================
   BLOK 8: TABLE
   Fungsi:
   - Tampilan tabel sederhana untuk data project/log
   ============================================================================ */
.poc-table {
    width: 100%;
    border-collapse: collapse;
}

.poc-table th,
.poc-table td {
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    padding: 10px 8px;
    font-size: 14px;
}

.poc-table th {
    color: #374151;
    background: #f9fafb;
}

.poc-table td {
    color: #4b5563;
}


/* ============================================================================
   BLOK 9: RESPONSIVE
   Fungsi:
   - Agar dashboard tetap nyaman di tablet dan mobile
   ============================================================================ */
@media (max-width: 900px) {
    .poc-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .poc-container {
        padding: 14px;
    }

    .poc-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   BLOK 10: NAVIGASI SEDERHANA
   Fungsi:
   - Link antar halaman awal far POC
   - Dipakai di dashboard dan modul X Listening
   ============================================================================ */
.poc-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.poc-nav a {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 999px;
    background: #eef7fb;
    color: #005698;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid #d7eef7;
}

.poc-nav a:hover {
    background: #dff3fb;
}


/* ============================================================================
   BLOK 11: ALERT
   Fungsi:
   - Menampilkan pesan sukses atau error setelah proses form
   ============================================================================ */
.poc-alert {
    padding: 12px 14px;
    border-radius: 12px;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 600;
}

.poc-alert-success {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.poc-alert-error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}


/* ============================================================================
   BLOK 12: FORM
   Fungsi:
   - Style dasar form input far POC
   ============================================================================ */
.poc-form {
    display: block;
}

.poc-form-group {
    margin-bottom: 16px;
}

.poc-form-group label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
}

.poc-form-group input,
.poc-form-group textarea,
.poc-form-group select {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    padding: 11px 12px;
    font-size: 14px;
    color: #111827;
    background: #ffffff;
}

.poc-form-group input:focus,
.poc-form-group textarea:focus,
.poc-form-group select:focus {
    outline: none;
    border-color: #0dc0e6;
    box-shadow: 0 0 0 3px rgba(13, 192, 230, 0.15);
}


/* ============================================================================
   BLOK 13: BUTTON
   Fungsi:
   - Tombol utama untuk aksi simpan dan proses
   ============================================================================ */
.poc-button {
    display: inline-block;
    border: none;
    border-radius: 999px;
    padding: 11px 18px;
    background: #005698;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.poc-button:hover {
    background: #004577;
}

/* ============================================================================
   BLOK 14: CHECKBOX
   Fungsi:
   - Merapikan tampilan checkbox pada form far POC
   ============================================================================ */
.poc-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.poc-checkbox input {
    width: auto;
}


/* ============================================================================
   BLOK 15: LABEL TIPE KEYWORD
   Fungsi:
   - Memberi warna visual berbeda untuk keyword OR / AND / NOT
   ============================================================================ */
.poc-keyword-type {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.poc-keyword-or {
    background: #e0f2fe;
    color: #075985;
}

.poc-keyword-and {
    background: #dcfce7;
    color: #166534;
}

.poc-keyword-not {
    background: #fee2e2;
    color: #991b1b;
}

/* ============================================================================
   BLOK 16: LINK AKSI KECIL
   Fungsi:
   - Dipakai untuk aksi kecil di tabel seperti Kelola Keyword
   ============================================================================ */
.poc-small-link {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eef7fb;
    color: #005698;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid #d7eef7;
}

.poc-small-link:hover {
    background: #dff3fb;
}

/* ============================================================================
   BLOK 17: QUERY PREVIEW BOX
   Fungsi:
   - Menampilkan hasil query final dalam kotak khusus
   - Memudahkan copy dan pengecekan manual
   ============================================================================ */
.poc-query-box {
    width: 100%;
    padding: 16px;
    border-radius: 14px;
    background: #0f172a;
    color: #e5e7eb;
    font-family: Consolas, Monaco, monospace;
    font-size: 15px;
    line-height: 1.6;
    overflow-x: auto;
    border: 1px solid #1e293b;
}


/* ============================================================================
   BLOK 18: ACTION ROW
   Fungsi:
   - Mengatur jarak tombol aksi setelah preview query
   ============================================================================ */
.poc-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}


/* ============================================================================
   BLOK 19: BUTTON LINK
   Fungsi:
   - Link yang tampil seperti tombol
   - Dipakai untuk buka search manual di X
   ============================================================================ */
.poc-button-link {
    display: inline-block;
    border-radius: 999px;
    padding: 11px 18px;
    background: #005698;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.poc-button-link:hover {
    background: #004577;
}


/* ============================================================================
   BLOK 20: EMPTY NOTE
   Fungsi:
   - Pesan kosong ketika belum ada data aktif
   ============================================================================ */
.poc-empty-note {
    padding: 14px;
    border-radius: 12px;
    background: #f9fafb;
    color: #6b7280;
    border: 1px dashed #d1d5db;
    font-size: 14px;
}


/* ============================================================================
   BLOK 21: THREE COLUMN PANEL
   Fungsi:
   - Menampilkan daftar OR / AND / NOT dalam 3 kolom
   ============================================================================ */
.poc-three-column {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.poc-mini-panel {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 14px;
    background: #f9fafb;
}

.poc-mini-panel h3 {
    margin: 0 0 10px 0;
    color: #005698;
    font-size: 15px;
}

.poc-mini-panel ul {
    margin: 0;
    padding-left: 18px;
}

.poc-mini-panel li {
    margin-bottom: 6px;
    font-size: 14px;
    color: #374151;
}

.poc-mini-panel p {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
}


/* ============================================================================
   BLOK 22: RESPONSIVE THREE COLUMN
   Fungsi:
   - Mengubah 3 kolom menjadi 1 kolom di layar kecil
   ============================================================================ */
@media (max-width: 760px) {
    .poc-three-column {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   BLOK 23: SPACING LINK AKSI DI TABEL
   Fungsi:
   - Memberi jarak antar tombol kecil dalam kolom aksi tabel
   ============================================================================ */
.poc-table .poc-small-link {
    margin-right: 6px;
    margin-bottom: 4px;
}

/* ============================================================================
   BLOK 24: FORM GRID
   Fungsi:
   - Membuat input metrik engagement tersusun sejajar
   - Dipakai pada manual import X
   ============================================================================ */
.poc-form-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}


/* ============================================================================
   BLOK 25: RESPONSIVE FORM GRID
   Fungsi:
   - Mengubah form grid menjadi 2 kolom atau 1 kolom pada layar kecil
   ============================================================================ */
@media (max-width: 900px) {
    .poc-form-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .poc-form-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   BLOK 26: DETAILS LOG
   Fungsi:
   - Menampilkan context log dalam mode buka/tutup
   - Membantu debug tanpa membuat tabel terlalu penuh
   ============================================================================ */
.poc-details summary {
    cursor: pointer;
    color: #005698;
    font-weight: 700;
    font-size: 13px;
}

.poc-details pre {
    max-width: 520px;
    max-height: 220px;
    overflow: auto;
    padding: 12px;
    border-radius: 12px;
    background: #0f172a;
    color: #e5e7eb;
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* ============================================================================
   BLOK 27: CONCLUSION BOX
   Fungsi:
   - Menampilkan kesimpulan sementara hasil uji fetch
   - Dipakai pada halaman fetch_logs.php
   ============================================================================ */
.poc-conclusion-box {
    padding: 16px;
    border-radius: 14px;
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid #fed7aa;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 600;
}


/* ============================================================================
   BLOK 28: STATUS PILL
   Fungsi:
   - Label status akses fetch X
   - Membantu membedakan status OK, warning, danger, dan muted
   ============================================================================ */
.poc-status-pill {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.poc-status-ok {
    background: #dcfce7;
    color: #166534;
}

.poc-status-warning {
    background: #fef9c3;
    color: #854d0e;
}

.poc-status-danger {
    background: #fee2e2;
    color: #991b1b;
}

.poc-status-muted {
    background: #f3f4f6;
    color: #374151;
}