/* ============================================================
   TATA LETAK PRESISI KARTU UJIAN & CSS PRINT A4
   Sesuai Spesifikasi Mutlak:
   - 62% Kiri (Data Siswa & TTD) & 38% Kanan (Tabel Pelajaran)
   - CSS Grid 140px 15px 1fr (Titik Dua Sejajar Sempurna)
   - @page A4 Portrait, page-break-inside: avoid, 3 kartu/lembar
   ============================================================ */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #f1f5f9;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: #000000;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

/* Floating Screen Toolbar for Print View */
.print-toolbar {
    position: sticky;
    top: 0;
    background: #0f172a;
    color: #ffffff;
    padding: 0.85rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.print-toolbar-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.print-toolbar-info h2 {
    font-size: 1.05rem;
    font-weight: 700;
}

.print-toolbar-info span {
    font-size: 0.85rem;
    color: #94a3b8;
}

.print-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    border: none;
}

.toolbar-btn-print {
    background: #16a34a;
    color: #fff;
}
.toolbar-btn-print:hover { background: #15803d; }

.toolbar-btn-back {
    background: #334155;
    color: #fff;
}
.toolbar-btn-back:hover { background: #475569; }

/* Wrapper Pratinjau di Layar */
.print-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
}

/* ============================================================
   1. WADAH KARTU UTAMA (200mm x 92mm) - PRESISI 50:50 GRID
   ============================================================ */
.card-container,
.exam-card {
    width: 200mm;
    height: 92mm;
    max-height: 92mm;
    background: #ffffff;
    display: grid;
    grid-template-columns: 1fr 1fr; /* Membagi dua kolom sama besar rata tengah */
    border: 2px solid #000000;   /* Border hitam tebal di sekeliling kartu */
    box-sizing: border-box;
    margin-bottom: 3.5mm;
    page-break-inside: avoid;
    break-inside: avoid;
    overflow: hidden;
    position: relative;
    color: #000000;
}

@media screen {
    .card-container,
    .exam-card {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
}

/* ============================================================
   PEMBAGIAN KARTU: 50:50 PRESISI (KIRI 50% & KANAN 50%)
   ============================================================ */

/* Kolom Kiri: padding 15px, border-right 2px solid #000 */
.card-left {
    padding: 15px;
    border-right: 2px solid #000000;  /* Garis pemisah tegas kiri-kanan */
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

/* Kolom Kanan: padding 0, display flex */
.card-right,
.right-column {
    padding: 0;                       /* Padding 0 agar tabel menempel pas */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
}

/* ------------------------------------------------------------
   KOP SURAT (KIRI ATAS)
   ------------------------------------------------------------ */
.card-kop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #000000;
    padding-bottom: 5px;
    margin-bottom: 5px;
    position: relative;
}

.card-kop::after {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 0;
    height: 0.6px;
    background: #000000;
}

.kop-logo-left, .kop-logo-right {
    width: 55px;
    max-width: 58px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kop-logo-left img, .kop-logo-right img,
.kop-img-logo {
    width: 55px;
    max-width: 58px;
    height: 44px;
    object-fit: contain;
    display: block;
}

.kop-logo-left svg, .kop-logo-right svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.kop-text {
    flex: 1;
    flex-grow: 1;
    text-align: center;
    padding: 0 4px;
    line-height: 1.15;
    overflow: hidden;
}

.kop-text .line-1 {
    font-size: 8.5px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1px;
}

.kop-text .line-2 {
    font-size: 8px;
    font-weight: bold;
    text-transform: uppercase;
}

.kop-text .line-school {
    font-size: 11.5px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin: 1px 0;
}

.kop-text .line-address {
    font-size: 6.8px;
    color: #111;
    line-height: 1.12;
}

/* Judul Kartu */
.card-title-box {
    text-align: center;
    margin: 3px 0 5px;
    line-height: 1.15;
}

.card-title-box .title-main {
    font-size: 11.5px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: underline;
}

.card-title-box .title-sub {
    font-size: 9.5px;
    font-weight: bold;
    text-transform: uppercase;
}

/* ============================================================
   2. DATA SISWA (CSS GRID DENGAN TITIK DUA SEJAJAR)
   grid-template-columns: 140px 15px 1fr
   ============================================================ */
.student-data-container {
    margin-top: 2px;
    margin-bottom: auto;
}

.student-grid-row {
    display: grid;
    grid-template-columns: 140px 15px 1fr;
    align-items: flex-start;
    margin-bottom: 4px;
    font-size: 11px;
    line-height: 1.25;
}

.student-grid-label {
    font-weight: 500;
    color: #000000;
    white-space: nowrap;
    font-size: 11px;
}

.student-grid-colon {
    font-weight: bold;
    text-align: center;
    color: #000000;
    font-size: 11px;
}

.student-grid-value {
    font-weight: bold;                 /* Teks tebal pada nilai */
    color: #000000;
    text-transform: uppercase;
    font-size: 11px;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* ============================================================
   4. AREA PENGESAHAN / TANDA TANGAN (KIRI BAWAH)
   ============================================================ */
.card-sign-section {
    margin-left: auto;                  /* Rata kanan di Kolom Kiri */
    width: 220px;                       /* Lebar proporsional kolom 50% */
    max-width: 100%;
    text-align: center;
    font-size: 9.5px;
    line-height: 1.2;
    position: relative;
    margin-top: 3px;
}

.sign-date {
    text-align: center;
    margin-bottom: 1px;
}

.sign-role {
    text-align: center;
    font-weight: normal;
    margin-bottom: 1px;
}

.sign-interactive-area {
    position: relative;
    height: 38px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Stempel Transparan di Area TTD */
.stamp-container {
    position: absolute;
    left: 18px;
    top: -8px;
    width: 54px;
    height: 54px;
    z-index: 1;
    opacity: 0.88;
    pointer-events: none;
    transform: rotate(-10deg);
    mix-blend-mode: multiply;
}

/* Gambar Stempel & Tanda Tangan Terunggah */
.stempel-img {
    position: absolute;
    left: 15px;
    top: -10px;
    width: 180px;
    height: 52px;
    object-fit: contain;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 2;
}

/* Tanda Tangan Realistis */
.signature-container {
    position: absolute;
    left: 55px;
    top: 1px;
    width: 96px;
    height: 38px;
    z-index: 2;
    pointer-events: none;
}

.sign-name {
    font-weight: bold;
    text-decoration: underline;
    font-size: 10.5px;
    text-transform: none;               /* Tidak dipaksa huruf kapital semua */
    text-align: center;
    position: relative;
    z-index: 3;
}

.sign-nip {
    font-size: 9px;
    color: #111;
    text-align: center;
    position: relative;
    z-index: 3;
}

/* ============================================================
   3. TABEL KANAN (MENGISI PENUH & TANPA BORDER GANDA)
   ============================================================ */
.schedule-table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    font-size: 10px;
    table-layout: fixed;
    box-sizing: border-box;
    border: none;
}

.schedule-table th, 
.schedule-table td {
    border: 1px solid #000000;
    padding: 2px 4px;
    line-height: 1.2;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Hilangkan border luar ganda yang menempel pada batas kartu */
.schedule-table thead tr th {
    border-top: none;
}

.schedule-table tbody tr:last-child td {
    border-bottom: none;
}

.schedule-table th:first-child,
.schedule-table td:first-child {
    border-left: none;
}

.schedule-table th:last-child,
.schedule-table td:last-child {
    border-right: none;
}

/* Lebar kolom proporsional 50:50 (45% Guru, 40% Mapel, 15% TTD) */
.schedule-table th.col-teacher,
.schedule-table td.col-teacher {
    width: 45%;
}

.schedule-table th.col-subject,
.schedule-table td.col-subject {
    width: 40%;
}

.schedule-table th.col-sign,
.schedule-table td.col-sign {
    width: 15%;
    text-align: center;
}

.schedule-table th {
    background-color: #a8d08d !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    font-weight: bold;
    text-align: center;
    font-size: 10px;
    height: 22px;
}

/* ============================================================
   5. MEDIA QUERY CETAK (@media print)
   ============================================================ */
@page {
    size: A4 portrait;
    margin: 0.5cm;
}

@media print {
    body {
        background: #ffffff !important;
        color: #000000 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .no-print,
    .print-toolbar {
        display: none !important;
    }

    .print-stage {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .card-container,
    .exam-card {
        margin-bottom: 3.5mm !important;
        box-shadow: none !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Tepat 3 kartu per lembar A4 */
    .card-container:nth-child(3n),
    .exam-card:nth-child(3n) {
        page-break-after: always !important;
        break-after: page !important;
        margin-bottom: 0 !important;
    }

    .card-container:last-child,
    .exam-card:last-child {
        page-break-after: auto !important;
        break-after: auto !important;
    }

    .schedule-table th {
        background-color: #a8d08d !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .stempel-img {
        mix-blend-mode: multiply !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}