/* =====================================================================
 * SISFODUKKES - Gaya Khusus Aplikasi
 * ---------------------------------------------------------------------
 * Melengkapi AdminLTE. Semua penyesuaian tampilan aplikasi
 * (form MCU, odontogram, cetak A4, responsif) berada di sini.
 * ===================================================================== */

:root {
    --sf-primary : #0d6efd;
    --sf-border  : #dee2e6;
    --sf-muted   : #6c757d;
}

body { font-size: .9rem; }

/* --------------------------------------------------------------------
 * Warna tambahan (OBGYN memakai warna pink)
 * ----------------------------------------------------------------- */
.bg-pink, .badge-pink { background-color: #e83e8c !important; color: #fff !important; }
.text-pink { color: #e83e8c !important; }
.card-pink:not(.card-outline) > .card-header { background-color: #e83e8c; color: #fff; }

/* --------------------------------------------------------------------
 * Kartu & tabel
 * ----------------------------------------------------------------- */
.card { box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2); }
.card-title { font-size: 1rem; font-weight: 600; }

table.dataTable thead th {
    background: #f4f6f9;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .3px;
    vertical-align: middle !important;
    white-space: nowrap;
}
table.dataTable tbody td { vertical-align: middle; font-size: .86rem; }
table.dataTable tbody tr:hover { background: #f8f9fc; }

.dt-buttons .btn { margin-right: 3px; }

/* --------------------------------------------------------------------
 * Form pemeriksaan MCU
 * ----------------------------------------------------------------- */
.grup-parameter {
    border: 1px solid var(--sf-border);
    border-radius: .35rem;
    margin-bottom: 1rem;
    background: #fff;
}
.grup-parameter > .grup-judul {
    background: #f4f6f9;
    padding: .5rem .9rem;
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #495057;
    border-bottom: 1px solid var(--sf-border);
    border-radius: .35rem .35rem 0 0;
}
.grup-parameter > .grup-isi { padding: .9rem; }

.form-group label { font-weight: 600; font-size: .84rem; margin-bottom: .25rem; }
.form-group label .wajib { color: #dc3545; }
.satuan-input { background: #f4f6f9; font-size: .82rem; }

/* Kartu identitas peserta pada form pemeriksaan */
.identitas-peserta {
    background: linear-gradient(135deg, #f8f9fc 0%, #eef2f7 100%);
    border-left: 4px solid var(--sf-primary);
    border-radius: .35rem;
    padding: .9rem 1.1rem;
    margin-bottom: 1rem;
}
.identitas-peserta dt { font-size: .75rem; color: var(--sf-muted); text-transform: uppercase; font-weight: 600; }
.identitas-peserta dd { font-size: .95rem; font-weight: 600; margin-bottom: .5rem; }

/* --------------------------------------------------------------------
 * Odontogram interaktif
 * ----------------------------------------------------------------- */
.odontogram-wrap {
    border: 1px solid var(--sf-border);
    border-radius: .35rem;
    padding: 1rem;
    background: #fff;
    overflow-x: auto;
}
.odontogram-baris {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: .35rem;
    min-width: 640px;
}
.odontogram-baris.pemisah { border-bottom: 2px dashed #adb5bd; padding-bottom: .6rem; margin-bottom: .6rem; }

.gigi {
    width: 36px;
    text-align: center;
    cursor: pointer;
    user-select: none;
}
.gigi .gigi-kotak {
    width: 36px; height: 40px;
    border: 2px solid #adb5bd;
    border-radius: 4px;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1rem; line-height: 1;
    transition: all .15s ease;
    color: #212529;
}
.gigi:hover .gigi-kotak { border-color: var(--sf-primary); box-shadow: 0 0 0 2px rgba(13,110,253,.2); }
.gigi.terisi .gigi-kotak { background: #fff3cd; border-color: #ffc107; }
.gigi.hilang .gigi-kotak { background: #f8d7da; border-color: #dc3545; color: #dc3545; }
.gigi .gigi-nomor { font-size: .68rem; color: var(--sf-muted); margin-top: 2px; }
.gigi.kuadran-kanan { margin-right: 0; }

.odontogram-legenda {
    font-size: .78rem;
    background: #f8f9fa;
    border-radius: .25rem;
    padding: .6rem .8rem;
    margin-top: .8rem;
}
.odontogram-legenda .kode {
    display: inline-block;
    min-width: 28px;
    font-weight: 700;
    color: #212529;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 3px;
    text-align: center;
    margin-right: 4px;
}

/* --------------------------------------------------------------------
 * Progress MCU
 * ----------------------------------------------------------------- */
.progress-poli { height: 20px; font-size: .72rem; font-weight: 600; }
.badge-poli { font-size: .72rem; padding: .3rem .5rem; margin: 1px; display: inline-block; min-width: 74px; }
.ceklis-poli { font-size: 1.05rem; }
.ceklis-poli .fa-check-circle  { color: #28a745; }
.ceklis-poli .fa-times-circle  { color: #dc3545; }
.ceklis-poli .fa-minus-circle  { color: #adb5bd; }

.kartu-progress { border-left: 4px solid #adb5bd; }
.kartu-progress.hijau  { border-left-color: #28a745; }
.kartu-progress.kuning { border-left-color: #ffc107; }
.kartu-progress.merah  { border-left-color: #dc3545; }

/* --------------------------------------------------------------------
 * Resume MCU
 * ----------------------------------------------------------------- */
.resume-poli {
    border: 1px solid var(--sf-border);
    border-radius: .35rem;
    margin-bottom: .9rem;
}
.resume-poli .resume-head {
    padding: .5rem .9rem;
    background: #f4f6f9;
    border-bottom: 1px solid var(--sf-border);
    font-weight: 600;
    display: flex; justify-content: space-between; align-items: center;
}
.resume-poli .resume-body { padding: .8rem .9rem; }
.resume-poli dl { margin-bottom: 0; }
.resume-poli dt { font-weight: 600; font-size: .8rem; color: var(--sf-muted); }
.resume-poli dd { font-size: .88rem; margin-bottom: .45rem; white-space: pre-line; }

/* --------------------------------------------------------------------
 * Halaman login
 * ----------------------------------------------------------------- */
.login-page-mcu {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 55%, #1e3c72 100%);
    min-height: 100vh;
}
.login-card {
    border: none;
    border-radius: .6rem;
    box-shadow: 0 10px 40px rgba(0,0,0,.3);
    overflow: hidden;
}
.login-card .card-header {
    background: #fff;
    border-bottom: 3px solid var(--sf-primary);
    text-align: center;
    padding: 1.6rem 1rem 1.1rem;
}
.login-card .logo-lingkaran {
    width: 66px; height: 66px; line-height: 66px;
    border-radius: 50%;
    background: var(--sf-primary);
    color: #fff; font-size: 1.8rem;
    margin: 0 auto .7rem;
}

/* --------------------------------------------------------------------
 * Pilih jenis seleksi
 * ----------------------------------------------------------------- */
.kartu-seleksi {
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
    border: 2px solid transparent;
}
.kartu-seleksi:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,.15);
    border-color: var(--sf-primary);
}
.kartu-seleksi.terpilih { border-color: #28a745; background: #f0fff4; }

/* --------------------------------------------------------------------
 * Pratinjau import Excel
 * ----------------------------------------------------------------- */
.tabel-preview { font-size: .8rem; }
.tabel-preview thead th { position: sticky; top: 0; z-index: 2; }
.tabel-preview tr.baris-baru     { background: #eafaf1 !important; }
.tabel-preview tr.baris-update   { background: #fff9e6 !important; }
.tabel-preview tr.baris-gagal    { background: #fdecea !important; }
.wrap-preview { max-height: 460px; overflow: auto; border: 1px solid var(--sf-border); border-radius: .25rem; }

/* --------------------------------------------------------------------
 * Pratinjau berkas upload
 * ----------------------------------------------------------------- */
.kartu-berkas { border: 1px solid var(--sf-border); border-radius: .35rem; overflow: hidden; }
.kartu-berkas .berkas-thumb {
    height: 140px; background: #f4f6f9;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.kartu-berkas .berkas-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.kartu-berkas .berkas-thumb i { font-size: 2.8rem; color: var(--sf-muted); }
.kartu-berkas .berkas-info { padding: .5rem .6rem; font-size: .78rem; border-top: 1px solid var(--sf-border); }

/* =====================================================================
 * CETAK - A4 PORTRAIT
 * Dipakai oleh views/cetak/*.php
 * ================================================================== */
.lembar-a4 {
    width: 210mm;
    min-height: 297mm;
    padding: 15mm 18mm;
    margin: 12px auto;
    background: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,.15);
    font-family: "Times New Roman", Times, serif;
    font-size: 12pt;
    line-height: 1.45;
    color: #000;
    box-sizing: border-box;
    position: relative;
}
/* Kop instansi rata kiri, baris kedua menjorok - sama dengan lembar rekap
   dan export Excel supaya seluruh laporan tampil seragam. */
.lembar-a4 .kop { text-align: left; line-height: 1.25; }
.lembar-a4 .kop .baris1 { font-size: 12pt; }
.lembar-a4 .kop .baris2 { font-size: 12pt; font-weight: bold; padding-left: 20px; }
.lembar-a4 .rahasia { text-align: right; font-weight: bold; font-size: 11pt; margin-top: -18px; }
.lembar-a4 .judul-blanko { text-align: center; font-weight: bold; margin: 14px 0 4px; text-decoration: underline; }
.lembar-a4 .sub-judul { text-align: center; margin-bottom: 14px; }
.lembar-a4 .identitas { margin-bottom: 14px; font-size: 11.5pt; }
.lembar-a4 .identitas td { padding: 1px 0; vertical-align: top; }
.lembar-a4 .nama-sektor { font-weight: bold; margin: 10px 0 8px; }
.lembar-a4 .isi td { padding: 3px 0; vertical-align: top; }
.lembar-a4 .isi .label { width: 45%; }
.lembar-a4 .isi .titik { width: 3%; }
.lembar-a4 .kesimpulan-box { margin-top: 12px; }
.lembar-a4 .blok-ttd { margin-top: 26px; float: right; text-align: center; width: 62mm; }
.lembar-a4 .blok-ttd .ruang-ttd { height: 22mm; }
.lembar-a4 .blok-ttd .nama-ttd { border-bottom: 1px solid #000; padding-bottom: 2px; font-weight: bold; }
.lembar-a4 .nomor-halaman {
    position: absolute; bottom: 8mm; left: 0; right: 0;
    text-align: center; font-size: 9pt; color: #333;
}
.lembar-a4 .footer-cetak {
    position: absolute; bottom: 8mm; left: 18mm;
    font-size: 8pt; color: #666;
}
.lembar-a4 table.tabel-garis { width: 100%; border-collapse: collapse; }
.lembar-a4 table.tabel-garis th,
.lembar-a4 table.tabel-garis td { border: 1px solid #000; padding: 3px 5px; font-size: 10pt; }
.lembar-a4 table.tabel-garis th { background: #eee; text-align: center; font-weight: bold; }

.bar-cetak {
    position: sticky; top: 0; z-index: 100;
    background: #343a40; padding: 10px 16px; text-align: center;
}

@media print {
    @page { size: A4 portrait; margin: 0; }
    html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
    .bar-cetak, .no-print, .main-header, .main-sidebar, .main-footer, .content-header { display: none !important; }
    .content-wrapper { margin: 0 !important; padding: 0 !important; background: #fff !important; }
    .lembar-a4 {
        width: auto; min-height: auto;
        margin: 0; padding: 12mm 15mm;
        box-shadow: none;
        page-break-after: always;
    }
    .lembar-a4:last-child { page-break-after: auto; }
}

/* =====================================================================
 * RESPONSIF - Tablet & Mobile
 * ================================================================== */
@media (max-width: 991.98px) {
    .lembar-a4 { width: 100%; padding: 10mm; }
    .identitas-peserta dd { font-size: .88rem; }
}

@media (max-width: 767.98px) {
    body { font-size: .86rem; }
    .content-header h1 { font-size: 1.05rem; }
    .card-title { font-size: .92rem; }
    .dt-buttons { margin-bottom: .5rem; }
    .dt-buttons .btn { font-size: .74rem; padding: .2rem .45rem; }
    .small-box .inner h3 { font-size: 1.6rem; }
    .odontogram-baris { min-width: 560px; }
    .gigi, .gigi .gigi-kotak { width: 30px; }
    .gigi .gigi-kotak { height: 34px; font-size: .85rem; }
    .table-responsive { -webkit-overflow-scrolling: touch; }
    .btn-group-sm-block .btn { margin-bottom: 3px; }
}

@media (max-width: 575.98px) {
    .navbar-nav .nav-link { padding: .5rem .4rem; }
    .badge { font-size: .68rem; }
    .identitas-peserta { padding: .7rem .8rem; }
}

/* Cetak elemen tersembunyi tetap tersembunyi */
@media screen { .hanya-cetak { display: none !important; } }

/* =====================================================================
 * REKAP LAPORAN HASIL MCU
 * Tabel lebar dengan banyak kolom sempit — dibuat padat agar terbaca.
 * ================================================================== */
.tabel-rekap { font-size: .72rem; }
.tabel-rekap thead th {
    background: #eef1f5;
    font-size: .66rem;
    font-weight: 700;
    text-align: center;
    vertical-align: middle !important;
    padding: 3px 2px;
    position: sticky;
    top: 0;
    z-index: 3;
    border: 1px solid #adb5bd !important;
    white-space: nowrap;
}
.tabel-rekap thead tr:nth-child(2) th { top: 28px; }
/* Baris nomor kolom ikut menggulung ke balik dua baris header yang menempel,
   supaya tidak menumpuk saat tabel digulir. */
.tabel-rekap thead tr.baris-nomor-kolom th {
    position: static;
    font-weight: 400;
}
.tabel-rekap tbody td {
    padding: 3px 4px;
    vertical-align: middle;
    border: 1px solid #ced4da !important;
    line-height: 1.25;
}
.tabel-rekap tbody tr.baris-tms { background: #fdecea; }
.tabel-rekap tbody tr.baris-th  { background: #f1f3f5; }
.tabel-rekap tbody tr:hover     { background: #e7f1ff; }

/* Lembar rekap saat dicetak: landscape dan sangat padat */
.lembar-rekap {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 7pt;
}
.lembar-rekap table { width: 100%; border-collapse: collapse; }
.lembar-rekap th,
.lembar-rekap td {
    border: .5pt solid #000;
    padding: 2px 3px;
    vertical-align: middle;
}
.lembar-rekap thead th {
    background: #fff;
    text-align: center;
    font-weight: bold;
    font-size: 6pt;
}
/* Tabel utama: lebar kolom dikunci lewat <colgroup> agar kolom sempit
   (kode kualifikasi) tidak melebar mengikuti isi kolom keterangan. */
.lembar-rekap .tabel-cetak-rekap { table-layout: fixed; }
.lembar-rekap .tabel-cetak-rekap th,
.lembar-rekap .tabel-cetak-rekap td { padding: 1px 2px; }
.lembar-rekap .tabel-cetak-rekap th,
.lembar-rekap .tabel-cetak-rekap td {
    text-align: center;
    line-height: 1.15;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
/* Isi sel boleh dipenggal di tengah kata (temuan bisa sangat panjang),
   label header tidak — supaya "BEDAH" tidak terbaca "BEDA H". */
.lembar-rekap .tabel-cetak-rekap td { word-break: break-word; }
.lembar-rekap .tabel-cetak-rekap th { word-break: normal; hyphens: none; }
/* Kolom yang ditandai 'rata' => 'kiri' pada peta kolom (mis. NAMA) */
.lembar-rekap .tabel-cetak-rekap td.sel-kiri { text-align: left; }
.lembar-rekap .kop-rekap { text-align: left; margin-bottom: 6px; }
.lembar-rekap .judul-rekap { text-align: center; font-weight: bold; font-size: 10pt; margin: 8px 0 2px; }

@media print {
    @page { size: A4 landscape; margin: 8mm; }
    .lembar-rekap { font-size: 6pt; }
    .lembar-rekap thead th { font-size: 5.5pt; }
    .lembar-rekap thead { display: table-header-group; }
    .lembar-rekap tr { page-break-inside: avoid; }
}

/* =====================================================================
 * SISFOKB - Tabel Rekapitulasi
 * ---------------------------------------------------------------------
 * Gaya dibuat menyerupai lembar rekap pada berkas Excel: header berlatar
 * rose, garis tegas, angka rata tengah, dan baris TOTAL berlatar sama
 * dengan header.
 * ===================================================================== */
.tabel-rekap {
    border-collapse: collapse;
}
.tabel-rekap th,
.tabel-rekap td {
    border: 1px solid #8f8f8f !important;
    vertical-align: middle !important;
    padding: 4px 6px !important;
}
.tabel-rekap thead th {
    background-color: #e6b8b7 !important;   /* rose, mengikuti berkas asli */
    color: #1f1f1f;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}
.tabel-rekap tbody td {
    background-color: #fff;
}
/* Kolom label baris (nama tindakan / kelompok) rata kiri & tebal */
.tabel-rekap tbody td:nth-child(2) {
    text-align: left;
    font-weight: 600;
    color: #1f3864;
}
/* Baris TOTAL: berlatar sama dengan header */
.tabel-rekap tbody tr.baris-total td {
    background-color: #e6b8b7 !important;
    font-weight: 700;
}
/* Baris induk (nama tindakan pada laporan Usia) */
.tabel-rekap tbody tr.baris-induk td {
    background-color: #f2dcdb !important;
    color: #1f3864;
}
/* Sel kosong tidak perlu diredupkan bila memang ditulis kosong */
.tabel-rekap tbody td.text-muted:empty {
    color: inherit;
}

/* Kartu diagram di samping tabel rekap */
.kotak-grafik-rekap {
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    padding: 14px 10px;
    background: #fff;
    height: 100%;
    /* Judul di atas, diagram mengisi sisa ruang dan tetap di tengah */
    display: flex;
    flex-direction: column;
}
.kotak-grafik-rekap .judul-grafik {
    text-align: center;
    color: #7f7f7f;
    font-size: 1rem;
    letter-spacing: .5px;
    margin-bottom: 6px;
    flex: 0 0 auto;
}
/* Wadah kanvas: tinggi TETAP dan position:relative.
   Chart.js memakai ukuran wadah ini sebagai acuan, sehingga diagram
   tidak lagi memanjang mengikuti tinggi kartu (dan sebaliknya). */
.kotak-grafik-rekap .area-grafik {
    position: relative;
    height: 320px;
    /* Tidak ikut memanjang: tingginya selalu tetap, lalu ditengahkan
       pada sisa ruang kartu lewat margin otomatis. */
    flex: 0 0 auto;
    margin: auto 0;
}
.kotak-grafik-rekap .area-grafik canvas {
    display: block;
}

/* =====================================================================
 * SISFOKB - Tabel Rekap Akseptor KB Tahunan
 * ---------------------------------------------------------------------
 * Header berlatar hijau mengikuti lembar aslinya, kolom bulan sempit
 * dan rata tengah, kolom persen dibedakan warnanya agar mudah dibaca.
 * ===================================================================== */
.tabel-tahunan {
    border-collapse: collapse;
    font-size: .78rem;
    /* Lebar kolom ditetapkan dari baris header pertama. Tanpa ini,
       sisa ruang tabel seluruhnya jatuh ke kolom TINDAKAN sehingga
       kolom bulan menjadi sempit dan tidak seimbang. */
    table-layout: fixed;
    width: 100%;
    min-width: 1180px;
}
.tabel-tahunan thead tr:first-child th:nth-child(1) { width: 42px; }
.tabel-tahunan thead tr:first-child th:nth-child(2) { width: 200px; }
.tabel-tahunan thead tr:first-child th.sel-total  { width: 60px; }
.tabel-tahunan th,
.tabel-tahunan td {
    border: 1px solid #8f8f8f !important;
    vertical-align: middle !important;
    padding: 3px 5px !important;
    white-space: nowrap;
}
.tabel-tahunan thead th {
    background-color: #c6e0b4 !important;   /* hijau, mengikuti berkas asli */
    color: #1f1f1f;
    font-weight: 700;
    text-align: center;
}
.tabel-tahunan thead th.sel-angka {
    font-size: .7rem;
    font-weight: 600;
    width: 42px;
}
.tabel-tahunan tbody td {
    background-color: #fff;
}
.tabel-tahunan tbody td.sel-tindakan {
    text-align: left;
    font-weight: 600;
    color: #1f3864;
}
.tabel-tahunan tbody td.sel-persen {
    color: #c00000;
}
.tabel-tahunan tbody tr.baris-jumlah td {
    background-color: #c6e0b4 !important;
    font-weight: 700;
}
.tabel-tahunan tbody tr.baris-jumlah td.sel-persen {
    color: #1f1f1f;
}