/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.side-info-panel {
    position: fixed;
    left: 0;
    top: 9.25rem;
    z-index: 45;
    display: flex;
    align-items: flex-start;
    pointer-events: none;
}

.side-info-toggle {
    width: 2.4rem;
    min-height: 6.25rem;
    border: 1px solid #dbe3ef;
    border-left: 0;
    border-radius: 0 0.85rem 0.85rem 0;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
    color: #1e3a8a;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    cursor: pointer;
    pointer-events: auto;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.side-info-toggle:hover {
    background: #eff6ff;
    color: #182f6a;
}

.side-info-toggle span {
    font-size: 1.15rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.side-info-toggle strong {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 0.72rem;
    letter-spacing: 0;
}

.side-info-panel.is-open .side-info-toggle span {
    transform: rotate(180deg);
}

.side-info-content {
    width: min(20rem, calc(100vw - 4.25rem));
    max-height: calc(100vh - 10.5rem);
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid #dbe3ef;
    border-left: 0;
    border-radius: 0 1rem 1rem 0;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
    padding: 1rem;
    transform: translateX(-105%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.24s ease, opacity 0.18s ease;
}

.side-info-panel.is-open .side-info-content {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.side-info-close {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.side-info-close:hover {
    background: #eef2ff;
    color: #1e3a8a;
}

.creator-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: #1e3a8a;
    text-decoration: none;
}

.creator-link:hover {
    color: #2b579a;
}

.creator-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    object-fit: cover;
    object-position: center 18%;
    border: 1px solid #dbeafe;
    background: #eff6ff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
    flex-shrink: 0;
}

.creator-name,
.creator-tagline {
    display: block;
}

.creator-name {
    font-weight: 800;
    line-height: 1.15;
}

.creator-tagline {
    margin-top: 0.12rem;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.2;
}

.paragraph-block-editor {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.paragraph-count-badge {
    display: inline-flex;
    align-items: center;
    height: 1.45rem;
    padding: 0 0.5rem;
    border-radius: 0.4rem;
    border: 1px solid #dbeafe;
    background: #eff6ff;
    color: #1e3a8a;
    font-size: 0.65rem;
    font-weight: 700;
    white-space: nowrap;
}

.paragraph-editor-textarea {
    min-height: 5.5rem;
    padding: 0.85rem 0.95rem;
    line-height: 1.85;
    resize: vertical;
    background-color: #ffffff;
    tab-size: 4;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    overflow-x: hidden;
}

.paragraph-editor-textarea:focus {
    border-color: #2b579a;
    box-shadow: 0 0 0 3px rgba(43, 87, 154, 0.12);
}

.paragraph-editor-hint {
    color: #64748b;
    font-size: 0.65rem;
    line-height: 1.2;
}

.auto-number-list {
    margin-bottom: 0.5rem;
}

.auto-number-item {
    display: flex;
    align-items: flex-start;
    line-height: 1.5;
}

.auto-number-marker {
    flex: 0 0 1.25cm;
    text-align: right;
    padding-right: 0.25cm;
}

.auto-number-text {
    flex: 1;
}

.auto-list-decimal {
    counter-reset: auto-decimal;
}

.auto-list-decimal .auto-number-item {
    counter-increment: auto-decimal;
}

.auto-list-decimal .auto-number-marker::after {
    content: counter(auto-decimal) ".";
}

.auto-list-lower-letter {
    counter-reset: auto-letter;
}

.auto-list-lower-letter .auto-number-item {
    counter-increment: auto-letter;
}

.auto-list-lower-letter .auto-number-marker::after {
    content: counter(auto-letter, lower-alpha) ".";
}

.auto-list-upper-letter {
    counter-reset: auto-upper-letter;
}

.auto-list-upper-letter .auto-number-item {
    counter-increment: auto-upper-letter;
}

.auto-list-upper-letter .auto-number-marker::after {
    content: counter(auto-upper-letter, upper-alpha) ".";
}

/* A4 Paper Simulation Ratio and Box Shadows */
.a4-page {
    width: 100%;
    max-width: 210mm;
    height: 297mm;
    max-height: 297mm;
    background: white;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
    position: relative;
    box-sizing: border-box;
    background-clip: padding-box;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    font-family: 'Times New Roman', Times, serif;
    font-size: 12pt;
    line-height: 1.5;
    color: #111827;
    letter-spacing: normal;
}


/* Cover: blok sekolah/instansi dikunci di bawah area halaman.
   Jangan gunakan margin:auto pada elemen cover ini karena beberapa auto-margin
   akan membagi ruang kosong dan membuat posisi berubah-ubah. */
#page-cover #pv-cover-institution {
    position: absolute;
    left: 4cm;
    right: 3cm;
    bottom: 3cm;
    margin: 0 !important;
    padding-top: 0.5rem;
    border-top: 1px solid #f1f5f9;
    text-align: center;
    box-sizing: border-box;
}

#page-cover #pv-cover-institution {
    white-space: pre-line;
    font-size: 14pt;
    font-weight: 700;
}

/* Academic report margins: 4cm left, 3cm top/right/bottom. */
.a4-margin-standard {
    padding-top: 3cm;
    padding-bottom: 3cm;
    padding-left: 4cm;
    padding-right: 3cm;
}

.a4-page p,
.a4-page td,
.a4-page th,
.a4-page li {
    font-size: 12pt;
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-break: anywhere;
}

.a4-page h2,
.a4-page h3,
.a4-page h4 {
    font-family: 'Times New Roman', Times, serif;
    letter-spacing: 0;
    color: #111827;
}

.a4-page h1,
#pv-cover-title {
    font-family: 'Times New Roman', Times, serif;
    font-size: 14pt;
    line-height: 1.3;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0;
}

.a4-page h2 {
    font-size: 12pt;
    line-height: 1.5;
    margin-top: 0;
}

.a4-page h3 {
    font-size: 14pt;
    line-height: 1.5;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.a4-page h4 {
    font-size: 12pt;
    line-height: 1.5;
    font-weight: bold;
    text-align: left;
}

.a4-page .text-\[10px\] {
    font-size: 10pt;
}

.document-toc {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
}

/* =========================================================
   INDEX BODY
   Dipakai oleh:
   - Daftar Isi
   - Daftar Gambar
   - Daftar Tabel
   ========================================================= */

.document-index-body {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.document-index-body .document-toc {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
}

.document-toc .toc-leader-row {
    height: 1.55rem;
}

/* =========================================================
   KOLOM JUDUL
   ========================================================= */

.document-toc .toc-title-cell {
    width: 52%;
    max-width: none;

    padding-top: 0.18rem;
    padding-bottom: 0.18rem;
    padding-right: 0.35rem;

    text-align: left;
    vertical-align: bottom;

    /*
     * Jangan wrap untuk BAB / judul utama
     */
    white-space: nowrap;

    line-height: 1.35;
}


/* =========================================================
   KOLOM TITIK LEADER
   ========================================================= */

.document-toc .toc-leader-cell {
    width: auto;

    padding-top: 0.18rem;
    padding-bottom: 0.28rem;
    padding-left: 0.15rem;
    padding-right: 0.15rem;

    vertical-align: bottom;
}


/* =========================================================
   DOT LEADER
   ========================================================= */

.document-toc .toc-dot-leader {
    display: block;

    width: 100%;

    border-bottom: 1.5pt dotted #111827;

    line-height: 0;
}


/* =========================================================
   NOMOR HALAMAN
   ========================================================= */

.document-toc .toc-page-cell {
    width: 30pt;
    min-width: 30pt;
    max-width: 30pt;

    padding-top: 0.18rem;
    padding-bottom: 0.18rem;
    padding-left: 0.15rem;

    text-align: right;

    white-space: nowrap;

    vertical-align: bottom;
}


/* =========================================================
   SUBBAB
   ========================================================= */

.document-toc .pl-4 {
    padding-left: 1.25rem;
}


/* =========================================================
   SEMUA CELL
   ========================================================= */

.document-toc td {
    border: none;

    vertical-align: bottom;
}

.document-caption {
    display: block;
    margin-top: 0.25rem;
    margin-bottom: 0.75rem;
    text-align: center;
    font-size: 10pt !important;
    line-height: 1.35 !important;
    color: #374151;
}

.document-body {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-break: anywhere;
}

.document-body>p {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: 0;
    margin-bottom: 0.5rem;
    text-justify: inter-word;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-break: anywhere;
}

.document-figure {
    width: 100%;
    margin: 0.75rem 0;
    text-align: center;
    break-inside: avoid;
}

.document-figure img {
    display: block;
    max-width: 100%;
    max-height: 12cm;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
}

.document-figure figcaption,
.document-table-caption {
    margin: 0.25rem 0 0.5rem;
    text-align: center;
    font-size: 10pt;
    line-height: 1.35;
    color: #111827;
}

.document-image-placeholder {
    width: 70%;
    min-height: 4cm;
    margin: 0 auto;
    border: 1px dashed #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 10pt;
    background: #f8fafc;
}

.document-table-wrap {
    width: 100%;
    margin: 0.75rem 0;
    break-inside: avoid;
}

.document-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 12pt;
}

.document-table td {
    border: 1px solid #111827;
    padding: 0.18cm 0.22cm;
    vertical-align: top;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Keep browser preview wrapping compatible with Microsoft Word.
   Never force normal words to break at arbitrary character positions. */
.a4-page p,
.a4-page td,
.a4-page th,
.a4-page li,
.a4-page .document-body {
    word-break: normal;
    overflow-wrap: break-word;
    line-break: auto;
    hyphens: none;
}

/* Screen-only document zoom. Export and print keep the real A4 dimensions. */
#preview-viewport {
    --preview-scale: 0.78;
}

#preview-viewport .a4-page {
    zoom: var(--preview-scale);
    margin-bottom: 1.25rem;
}

/* Footer page number positioned inside the 3cm bottom margin zone. */
.a4-footer-num {
    position: absolute;
    bottom: 1.25cm;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10pt;
    color: #374151;
    font-family: Arial, Helvetica, sans-serif;
}

/* =========================================================
   PREVIEW PAGE NAVIGATOR — COMPACT VERSION
   ---------------------------------------------------------
   Tujuan:
   - Menghemat tinggi panel preview
   - Tetap mudah digunakan
   - Tidak mengubah pagination A4
   - Tidak mengubah JavaScript
   ========================================================= */

.preview-page-navigator {
    padding: 6px 10px 7px;
    background: #1e293b;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* Label "Lompat ke halaman" */
.preview-nav-label {
    display: flex;
    align-items: center;
    gap: 5px;

    margin: 0 0 4px;

    color: #cbd5e1;
    font-size: 10px;
    line-height: 14px;
    font-weight: 700;
}

.preview-nav-label i {
    color: #60a5fa;
    font-size: 10px;
}

/* =========================================================
   BARIS KONTROL UTAMA
   ========================================================= */

.preview-nav-controls {
    display: flex;
    align-items: center;
    gap: 6px;

    width: 100%;
}

/* =========================================================
   SELECT BAB / SUBBAB
   ========================================================= */

.preview-nav-select-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.preview-nav-select {
    display: block;

    width: 100%;
    height: 32px;

    padding: 0 30px 0 9px;

    border: 1px solid #475569;
    border-radius: 7px;

    background-color: #0f172a;
    color: #f8fafc;

    font-size: 10px;
    line-height: 30px;
    font-weight: 600;

    outline: none;
    cursor: pointer;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.preview-nav-select:hover {
    border-color: #64748b;
}

.preview-nav-select:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.15);
}

.preview-nav-select option {
    background: #ffffff;
    color: #0f172a;
}

/* =========================================================
   INPUT NOMOR HALAMAN
   ========================================================= */

.preview-nav-page-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;

    flex: 0 0 auto;

    height: 32px;
    min-width: 78px;

    padding: 0 7px;

    border: 1px solid #475569;
    border-radius: 7px;

    background: #0f172a;
}

.preview-nav-page-input {
    width: 32px;
    height: 27px;

    padding: 0;

    border: 0;
    outline: none;

    background: transparent;
    color: #ffffff;

    text-align: center;

    font-size: 11px;
    line-height: 27px;
    font-weight: 700;
}

/* Hilangkan spinner */
.preview-nav-page-input::-webkit-inner-spin-button,
.preview-nav-page-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.preview-nav-page-input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.preview-nav-page-total {
    color: #94a3b8;

    font-size: 10px;
    line-height: 27px;
    font-weight: 600;

    white-space: nowrap;
}

/* =========================================================
   TOMBOL PERGI
   ========================================================= */

.preview-nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    flex: 0 0 auto;

    height: 32px;

    padding: 0 10px;

    border: 0;
    border-radius: 7px;

    background: #2563eb;
    color: #ffffff;

    font-size: 10px;
    line-height: 32px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background-color 0.15s ease,
        transform 0.1s ease;
}

.preview-nav-button:hover {
    background: #1d4ed8;
}

.preview-nav-button:active {
    transform: translateY(1px);
}

.preview-nav-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* =========================================================
   MESSAGE
   ---------------------------------------------------------
   Tetap punya tinggi kecil agar layout tidak meloncat.
   ========================================================= */

.preview-nav-message {
    min-height: 0;

    margin: 0;
    padding: 0;

    color: #fbbf24;

    font-size: 9px;
    line-height: 12px;
    font-weight: 600;
}

.preview-nav-message:empty {
    display: none;
}

/* =========================================================
   TABLE BLOCK — UI/UX CONSISTENCY
   Samakan visual dengan Paragraph & Image Content Block
   ========================================================= */

.table-block-editor {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.625rem;
    box-sizing: border-box;
}

/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

.table-editor-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.table-editor-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.table-editor-icon {
    width: 1.875rem;
    height: 1.875rem;
    min-width: 1.875rem;
    border-radius: 0.5rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #eef2ff;
    color: #4338ca;
}

.table-editor-heading {
    font-size: 0.625rem;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    color: #3730a3;
}

.table-editor-subheading {
    margin-top: 0.25rem;
    font-size: 0.625rem;
    line-height: 1;
    color: #94a3b8;
}

/* ---------------------------------------------------------
   CAPTION / JUDUL TABEL
   --------------------------------------------------------- */

.table-editor-caption-wrap {
    margin-bottom: 0.5rem;
}

.table-editor-label {
    display: block;
    margin-bottom: 0.25rem;

    font-size: 0.625rem;
    line-height: 1.2;
    font-weight: 600;
    color: #475569;
}

.table-editor-caption {
    width: 100%;
    min-height: 2.125rem;

    padding: 0.375rem 0.5rem;

    box-sizing: border-box;

    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;

    background: #ffffff;
    color: #1e293b;

    font-size: 0.75rem;
    line-height: 1.4;

    outline: none;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.table-editor-caption:focus {
    border-color: #2b579a;
    box-shadow: 0 0 0 3px rgba(43, 87, 154, 0.12);
}

/* ---------------------------------------------------------
   TOOLBAR
   --------------------------------------------------------- */

.table-editor-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 0.5rem;
    flex-wrap: wrap;

    margin-bottom: 0.5rem;
}

.table-editor-actions {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.table-action-btn {
    min-height: 2rem;

    padding: 0.375rem 0.625rem;

    border-radius: 0.5rem;

    font-size: 0.6875rem;
    line-height: 1;
    font-weight: 700;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;

    cursor: pointer;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        transform 0.1s ease;
}

.table-action-btn:active {
    transform: translateY(1px);
}

/* Tombol utama mengikuti gaya tombol aplikasi */

.table-action-primary {
    background: #2563eb;
    color: #ffffff;
    border: 1px solid #2563eb;
}

.table-action-primary:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

/* Tombol hapus mengikuti style danger lama */

.table-action-danger {
    background: #fff1f2;
    color: #dc2626;
    border: 1px solid #fecdd3;
}

.table-action-danger:hover {
    background: #ffe4e6;
    border-color: #fda4af;
}

.table-selection-info {
    font-size: 0.625rem;
    color: #64748b;
    white-space: nowrap;
}

/* ---------------------------------------------------------
   GRID TABLE
   --------------------------------------------------------- */

.table-editor-wrapper {
    width: 100%;

    overflow-x: auto;

    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;

    background: #ffffff;

    -webkit-overflow-scrolling: touch;
}

/* Header kolom */

.table-editor-column-header {
    display: flex;

    min-width: max-content;

    background: #eff6ff;
    border-bottom: 1px solid #cbd5e1;
}

.table-editor-corner {
    width: 3rem;
    min-width: 3rem;

    background: #e2e8f0;

    border-right: 1px solid #cbd5e1;
}

.table-editor-column-label {
    width: 9rem;
    min-width: 9rem;

    padding: 0.375rem 0.5rem;

    box-sizing: border-box;

    text-align: center;

    font-size: 0.625rem;
    line-height: 1;
    font-weight: 700;

    color: #475569;

    border-right: 1px solid #cbd5e1;
}

/* Body */

.table-editor-body {
    min-width: max-content;
    background: #ffffff;
}

.table-editor-row {
    display: flex;

    min-width: max-content;

    border-bottom: 1px solid #e2e8f0;
}

.table-editor-row:last-child {
    border-bottom: 0;
}

/* Nomor baris */

.table-editor-row-number {
    width: 3rem;
    min-width: 3rem;

    padding: 0;

    border: 0;
    border-right: 1px solid #cbd5e1;

    background: #f8fafc;
    color: #94a3b8;

    font-size: 0.625rem;
    font-weight: 700;

    cursor: pointer;

    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

.table-editor-row-number:hover {
    background: #f1f5f9;
    color: #64748b;
}

/* Cells */

.table-editor-row-cells {
    display: flex;
    min-width: max-content;
}

.table-editor-cell {
    width: 9rem;
    min-width: 9rem;

    height: 2.25rem;

    box-sizing: border-box;

    padding: 0.5rem 0.625rem;

    border: 0;
    border-right: 1px solid #e2e8f0;

    outline: none;

    background: #ffffff;
    color: #334155;

    font-family: inherit;
    font-size: 0.6875rem;
    line-height: 1.4;

    transition:
        background-color 0.15s ease,
        box-shadow 0.15s ease;
}

.table-editor-cell:last-child {
    border-right: 0;
}

.table-editor-cell:hover {
    background: #f8fafc;
}

.table-editor-cell:focus {
    position: relative;
    z-index: 2;

    background: #ffffff;

    box-shadow:
        inset 0 0 0 2px #2b579a;
}

/* Baris pertama tetap sedikit lebih tegas */

.table-editor-header-cell {
    font-weight: 700;
    background: #f8fafc;
    color: #1e293b;
}

/* Cell aktif */

.table-cell-selected {
    background: #eff6ff !important;
    box-shadow:
        inset 0 0 0 1px #60a5fa;
}

/* ---------------------------------------------------------
   FOOTER / HINT
   --------------------------------------------------------- */

.table-editor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 0.5rem;
    flex-wrap: wrap;

    margin-top: 0.5rem;
    padding: 0.5rem 0.625rem;

    border-radius: 0.5rem;

    background: #eff6ff;
    border: 1px solid #dbeafe;
}

.table-editor-hint {
    display: flex;
    align-items: flex-start;

    gap: 0.375rem;

    color: #64748b;

    font-size: 0.625rem;
    line-height: 1.5;
}

.table-editor-hint i {
    color: #2563eb;
    margin-top: 0.125rem;
}

.table-editor-shortcuts {
    display: flex;
    align-items: center;

    gap: 0.5rem;
    flex-wrap: wrap;

    color: #64748b;

    font-size: 0.5625rem;
}

.table-editor-shortcuts span {
    display: inline-flex;
    align-items: center;
    gap: 0.1875rem;
}

.table-editor-shortcuts kbd {
    padding: 0.125rem 0.3125rem;

    border: 1px solid #cbd5e1;
    border-bottom-width: 2px;

    border-radius: 0.25rem;

    background: #ffffff;
    color: #475569;

    font-family: inherit;
    font-size: 0.5625rem;
    font-weight: 700;
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 640px) {

    .table-editor-topbar {
        align-items: flex-start;
    }

    .table-editor-toolbar {
        align-items: flex-start;
    }

    .table-editor-actions {
        width: 100%;
    }

    .table-selection-info {
        width: 100%;
    }

    .table-editor-footer {
        align-items: flex-start;
    }

    .table-editor-shortcuts {
        width: 100%;
    }
}

/* =========================================================
   RESPONSIVE MOBILE
   ========================================================= */

@media (max-width: 640px) {

    .preview-page-navigator {
        padding: 6px 8px 7px;
    }

    .preview-nav-controls {
        gap: 5px;
    }

    .preview-nav-select {
        height: 31px;
        font-size: 9px;
    }

    .preview-nav-page-wrap {
        min-width: 70px;
        height: 31px;
        padding: 0 5px;
    }

    .preview-nav-page-input {
        width: 28px;
    }

    .preview-nav-button {
        height: 31px;
        padding: 0 9px;
        font-size: 9px;
    }

    .preview-nav-button span {
        display: none;
    }

    .preview-nav-button i {
        margin: 0;
    }
}

@media (max-width: 640px) {
    .side-info-panel {
        top: 8.75rem;
    }

    .side-info-toggle {
        width: 2.15rem;
        min-height: 5.5rem;
    }

    #preview-viewport {
        --preview-scale: 0.58;
    }

    .a4-footer-num {
        bottom: 1.25cm;
    }
}

/* First line indent 1.25cm for formal Indonesian report paragraph standard */
.indent-formal {
    text-indent: 1.25cm;
}

.font-tnr {
    font-family: 'Times New Roman', Times, serif;
}

.font-arial {
    font-family: Arial, Helvetica, sans-serif;
}

.font-calibri {
    font-family: 'Calibri', 'Segoe UI', sans-serif;
}

.font-georgia {
    font-family: Georgia, serif;
}

/* Print media query styling */
@page {
    size: A4 portrait;
    margin: 3cm 3cm 3cm 4cm;
}

@media print {
    body {
        background: white;
    }

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

    .a4-page {
        box-shadow: none;
        margin: 0;
        width: 100%;
        page-break-after: always;
    }

    .document-body>p,
    .document-body>h4,
    .document-body>div {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .continuation-header {
        break-before: page;
        page-break-before: always;
    }
}