*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f5f7fb;color:#1f2937}.top{background:#0f172a;color:#fff;padding:12px 18px;display:flex;align-items:center;justify-content:space-between}.brand{color:#fff;text-decoration:none;font-weight:bold}.top nav{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.top a{color:#e5e7eb;text-decoration:none}.container{max-width:1180px;margin:24px auto;padding:0 16px}.card{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:18px;margin-bottom:16px;box-shadow:0 1px 2px rgba(0,0,0,.04)}.narrow{max-width:430px;margin:50px auto}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}.row{display:flex;align-items:center;justify-content:space-between;gap:12px}.form label{display:block;margin:10px 0}input,select,textarea{width:100%;padding:9px;border:1px solid #cbd5e1;border-radius:6px}textarea{min-height:90px}button,.btn{border:1px solid #cbd5e1;background:#fff;padding:8px 12px;border-radius:6px;text-decoration:none;color:#111827;cursor:pointer}.primary{background:#2563eb;color:#fff;border-color:#2563eb}.alert{padding:12px;border-radius:8px;margin:12px 0}.success{background:#dcfce7;color:#14532d}.error{background:#fee2e2;color:#7f1d1d}table{width:100%;border-collapse:collapse;background:#fff}th,td{padding:9px;border:1px solid #e5e7eb;text-align:left;vertical-align:top}th{background:#f8fafc}.badge{background:#eef2ff;color:#3730a3;padding:3px 7px;border-radius:999px;font-size:12px}.inline{display:inline}.inline button{padding:5px 8px}.muted{color:#64748b;font-size:13px}.foot{text-align:center;color:#64748b;padding:30px}code{display:inline-block;background:#0f172a;color:#e5e7eb;padding:8px;border-radius:6px;word-break:break-all}

/* Swimlane flowchart */
.swimlane-wrap{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:14px;margin:14px 0 22px;overflow-x:auto}.swimlane-title{font-weight:700;margin-bottom:10px}.swimlane-grid{display:grid;gap:0;min-width:760px;border:1px solid #cbd5e1;border-radius:8px;overflow:hidden}.swimlane-head{background:#eef2ff;color:#1e1b4b;font-weight:700;text-align:center;border-right:1px solid #cbd5e1;border-bottom:1px solid #cbd5e1;padding:10px}.swimlane-cell{min-height:105px;border-right:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;padding:10px;background:#fff}.flow-node-card{border:1px solid #2563eb;border-radius:10px;padding:10px;background:#eff6ff;box-shadow:0 1px 2px rgba(0,0,0,.05)}.flow-step-no{font-size:12px;color:#475569;font-weight:700}.flow-step-activity{font-weight:700;margin:5px 0;color:#111827}.flow-step-duration{display:inline-block;background:#dbeafe;border:1px solid #93c5fd;color:#1e3a8a;border-radius:999px;padding:3px 8px;font-size:12px;margin:4px 0}.flow-step-meta{font-size:12px;color:#475569;margin-top:3px}.flow-empty{min-height:40px}.flow-row-arrow{text-align:center;font-size:22px;line-height:24px;padding:4px;background:#f8fafc;color:#2563eb;border-bottom:1px solid #e5e7eb;font-weight:bold}@media print{.top,.foot,.btn,button{display:none!important}.swimlane-wrap{overflow:visible;border:0}.swimlane-grid{min-width:0}.flow-node-card{page-break-inside:avoid}}

/* PBO template output, adapted to the uploaded UNSULBAR PBO sample */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pbo-document{max-width:840px;margin:0 auto;background:#eee;padding:10px}.pbo-page{width:210mm;min-height:297mm;margin:0 auto 18px;background:#fff;padding:18mm 17mm;box-sizing:border-box;color:#111;font-family:"Times New Roman",serif;font-size:12pt}.pbo-doc-box{border:1.5px solid #333}.pbo-cover-header{display:grid;grid-template-columns:1.1fr 1fr;background:#8f3b3b;color:white}.pbo-head-left{text-align:center;padding:12px 8px}.pbo-logo{max-height:70px;display:block;margin:0 auto 8px}.pbo-org-name{font-size:18px;font-weight:bold;letter-spacing:.5px}.pbo-org-address{font-size:10px;line-height:1.25}.pbo-head-right{border-left:1.5px solid #333}.pbo-meta-table{width:100%;border-collapse:collapse;color:white;background:transparent!important}.pbo-meta-table th,.pbo-meta-table td{border:1px solid rgba(255,255,255,0.3)!important;padding:5px;text-align:left;vertical-align:top;background:transparent!important;color:white!important}.pbo-meta-table th{width:38%}.pbo-cover-body{border-top:0;min-height:190mm;padding:28px 42px;text-align:center}.pbo-cover-body h1{font-size:18px;line-height:1.35;margin:0 0 36px}.pbo-approval-table{width:100%;border-collapse:collapse;text-align:left}.pbo-approval-table td{border:0;padding:18px 5px;vertical-align:top}.pbo-approval-label{width:34%;font-weight:bold}.pbo-colon{width:5%;text-align:center}.pbo-validation{margin-top:22px;text-align:center;font-weight:bold}.pbo-body-content{min-height:220mm;padding:26px 36px}.pbo-section{margin:0 0 22px;line-height:1.35}.pbo-section b{display:block;margin-bottom:4px}.pbo-list{margin:4px 0 0 22px;padding:0}.pbo-flow-layout{width:100%;border-collapse:collapse}.pbo-flow-layout th,.pbo-flow-layout td{border:1.5px solid #333;padding:7px;vertical-align:top}.pbo-flow-layout th{text-align:center;font-size:15px}.pbo-flow-layout td:first-child{width:70%}
/* ── New two-column flowchart layout ── */
.pbo-vflow-wrap{display:table;width:100%;border-collapse:collapse}
.pbo-vf-row{display:table-row}
.pbo-vf-main{display:table-cell;text-align:center;vertical-align:middle;padding:0}
.pbo-vf-side{display:table-cell;width:44px;vertical-align:middle;padding:0;position:relative}
/* vertical "Tidak" line running down the right column */
.pbo-vf-side-line{border-right:2px solid #222}
/* The decision row: right column shows the loop-back elbow */
.pbo-vf-loop-right{border-right:2px solid #222;position:relative}
/* Top horizontal cap: connects right column to the step box right edge */
.pbo-vf-loop-right::before{content:"";position:absolute;top:50%;right:0;width:44px;border-top:2px solid #222;transform:translateY(-50%)}
/* Arrowhead pointing left into step box */
.pbo-vf-loop-right::after{content:"";position:absolute;top:50%;right:44px;transform:translateY(-50%);border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:8px solid #222}
/* "Tidak" label on the loop */
.pbo-loop-text{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:9px;font-family:Arial,sans-serif;background:#fff;padding:0 2px;font-weight:bold;white-space:nowrap}
/* Nodes */
.pbo-vnode{display:inline-block;border:2px solid #222;padding:8px 12px;width:200px;background:#fff;font-size:11px;line-height:1.3;word-wrap:break-word;overflow-wrap:break-word;word-break:break-word;text-align:center;vertical-align:middle}
.pbo-terminal{border-radius:18px;width:120px}
.pbo-varrow{font-size:20px;line-height:22px;text-align:center;display:block}
/* Decision diamond */
.pbo-decision-wrap{display:inline-block;margin:0 auto;padding:14px 0}
.pbo-decision{transform:rotate(45deg);width:130px;height:130px;display:inline-flex;align-items:center;justify-content:center;border:2px solid #222;background:#fff}
.pbo-decision span{transform:rotate(-45deg);display:inline-block;max-width:85px;font-size:10px;line-height:1.2;text-align:center;word-wrap:break-word;overflow-wrap:break-word;word-break:break-word}
.pbo-vf-arrow-row .pbo-vf-main{line-height:1}
/* Arrow rows in side line regions */
.pbo-vf-decision-row .pbo-vf-side{border-right:2px solid #222}
@media print{.topbar,.sidebar,.btn,.card>h3:first-child{display:none!important}.pbo-document{background:white;padding:0;width:auto!important;max-width:100%!important;margin:0!important}.pbo-page{width:auto!important;max-width:100%!important;margin:0!important;padding:10mm 10mm!important;box-shadow:none;page-break-after:always;height:auto;min-height:100%;page-break-inside:auto;box-sizing:border-box}.pbo-cover{min-height:100%;page-break-inside:avoid!important}.pbo-cover-body{min-height:140mm!important;padding:15px 25px!important}.pbo-body-content{min-height:160mm!important;padding:15px 25px!important}.pbo-approval-table td{padding:4px 5px!important;line-height:1.15!important}h1,h2,b,.pbo-section b,.pbo-approval-table,.pbo-validation{page-break-inside:avoid}}
/* Unit-based PBO template enhancements */
.pbo-org-unit{font-size:12px;font-weight:bold;margin-top:2px}.sig-small{font-size:10px;font-weight:normal}.pbo-cover-header{background:#8f3b3b}.pbo-decision span{display:inline-block;transform:rotate(-45deg);max-width:90px;font-size:10px;line-height:1.2;text-align:center;word-wrap:break-word;overflow-wrap:break-word;word-break:break-word;font-weight:normal}.signature-status{display:inline-block;padding:2px 8px;border:1px solid #999;border-radius:999px;font-size:12px}.signature-status.signed{background:#e8f5e9}.signature-status.pending{background:#fff8e1}

/* External signing */
.external-body { background:#f4f6f8; }
.external-container { max-width: 1180px; margin: 24px auto; }
.external-sign-header h1 { margin-bottom: 10px; }
.external-sign-form { border: 2px solid #d6b05d; }
.checkline { display:block; padding:12px; border:1px solid #ddd; background:#fffdf2; border-radius:8px; margin-bottom:14px; }
.checkline input { width:auto; margin-right:8px; }
.success-box { border-left: 6px solid #2f855a; }
.warning-box { border-left: 6px solid #d69e2e; background:#fffaf0; }
.copy-input { width: 100%; min-width: 260px; font-size: 12px; }
.inline-form { display:inline-block; margin:2px; }
.alert.error { background:#fed7d7; color:#742a2a; border:1px solid #fc8181; }
.sig-small { font-size: 11px; font-weight: normal; }
.page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.btn.small{padding:5px 8px;font-size:12px}.check{display:block;margin:8px 0}.check input{width:auto;margin-right:8px}fieldset{border:1px solid #e5e7eb;border-radius:8px;margin:12px 0;padding:12px}legend{font-weight:bold;padding:0 6px}
.wysiwyg-wrap{border:1px solid #d1d5db;border-radius:8px;background:#fff;margin-top:4px}.wysiwyg-toolbar{border-bottom:1px solid #e5e7eb;padding:6px;background:#f9fafb}.wysiwyg-toolbar button{margin-right:4px;padding:4px 8px}.wysiwyg-editor{min-height:110px;padding:10px;line-height:1.5;outline:none}.wysiwyg-editor:focus{box-shadow:0 0 0 2px #93c5fd inset}.remove-row{background:#f3f4f6;color:#111;border:1px solid #d1d5db}.warning-box{border-left:4px solid #f59e0b}.copy-input{min-width:240px}

/* Force print background colors for header and tables */
@media print {
    .pbo-cover-header {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    .pbo-meta-table, .pbo-meta-table th, .pbo-meta-table td {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color: white !important;
    }
    .badge {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    .flow-node-card {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    .flow-step-duration {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}
.pbo-body-content, .pbo-section div, .pbo-section ol, .pbo-section li, .pbo-cover-body p {
    text-align: justify !important;
    text-justify: inter-word;
}

/* Print configurations */
@page {
    margin: 10mm 15mm;
}
@page landscape-page {
    size: landscape;
    margin: 10mm 15mm;
}
.pbo-landscape {
    page: landscape-page;
    width: 297mm !important;
    min-height: 210mm !important;
    height: auto !important;
    margin: 0 auto 18px;
    background: #fff;
    padding: 15mm 15mm !important;
    box-sizing: border-box;
    color: #111;
}
@media print {
    .pbo-landscape {
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 100% !important;
        page-break-inside: avoid !important;
        page-break-after: always !important;
        padding: 10mm 10mm !important;
        box-sizing: border-box;
    }
}

/* WYSIWYG standard list styling inside documents and editor */
.pbo-section ul, .wysiwyg-editor ul {
    list-style-type: disc !important;
    margin: 4px 0 8px 20px !important;
    padding: 0 !important;
}
.pbo-section ol, .wysiwyg-editor ol {
    list-style-type: decimal !important;
    margin: 4px 0 8px 20px !important;
    padding: 0 !important;
}
.pbo-section li, .wysiwyg-editor li {
    margin-bottom: 4px !important;
    display: list-item !important;
}
.pbo-section p, .wysiwyg-editor p {
    margin: 0 0 8px 0 !important;
}