:root{--bg:#f5f7fb;--paper:#fff;--ink:#162033;--muted:#667085;--line:#e5e9f0;--accent:#3157d5;--danger:#b42318;--success:#087443;--warning:#a15c00}*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink);font-size:14px}.topbar{min-height:68px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:28px;padding:0 28px;position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;min-width:220px}.brand-mark{width:38px;height:38px;border-radius:11px;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:800}.brand small{display:block;color:var(--muted);font-size:11px;margin-top:1px}.topbar nav{display:flex;gap:18px;flex:1}.topbar nav a{color:#344054;text-decoration:none;font-weight:600}.user-menu{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}.container{max-width:1280px;margin:28px auto;padding:0 24px;min-height:calc(100vh - 145px)}.footer{text-align:center;color:#98a2b3;padding:18px}.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:20px}.page-head h1{margin:0 0 5px;font-size:26px}.page-head p{margin:0;color:var(--muted)}.grid{display:grid;gap:16px}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:0 1px 2px rgba(16,24,40,.03)}.stat .num{font-size:28px;font-weight:800;margin-top:8px}.muted{color:var(--muted)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid transparent;border-radius:9px;padding:9px 13px;text-decoration:none;font-weight:700;cursor:pointer;font:inherit;background:var(--accent);color:#fff}.btn-sm{padding:6px 9px;font-size:12px}.btn-secondary{background:#fff;color:#344054;border-color:#d0d5dd}.btn-danger{background:#fff;color:var(--danger);border-color:#f4c7c3}.btn-success{background:var(--success)}.btn-ghost{background:#fff;color:#344054;border-color:#e4e7ec}.table-wrap{overflow:auto;background:#fff;border:1px solid var(--line);border-radius:14px}table{width:100%;border-collapse:collapse}th,td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}th{background:#f9fafb;font-size:12px;color:#475467}tr:last-child td{border-bottom:0}.badge{display:inline-block;border-radius:999px;padding:4px 8px;font-size:11px;font-weight:700;background:#eef2ff;color:#3538cd}.badge.draft{background:#f2f4f7;color:#475467}.badge.submitted{background:#fff6ed;color:#b54708}.badge.approved{background:#ecfdf3;color:#027a48}.badge.issued{background:#eff8ff;color:#175cd3}.badge.archived{background:#f4f3ff;color:#5925dc}.badge.cancelled{background:#fef3f2;color:#b42318}.form-card{max-width:1000px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.field label{display:block;font-weight:700;margin-bottom:6px}.field input,.field select,.field textarea{width:100%;border:1px solid #d0d5dd;border-radius:9px;padding:10px 11px;background:#fff;color:#101828;font:inherit}.field textarea{min-height:110px;resize:vertical}.field.full{grid-column:1/-1}.help{font-size:12px;color:var(--muted);margin-top:5px}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.alert{border-radius:10px;padding:11px 13px;margin-bottom:16px;background:#eff8ff;color:#175cd3}.alert.success{background:#ecfdf3;color:#027a48}.alert.error{background:#fef3f2;color:#b42318}.alert.warning{background:#fff6ed;color:#b54708}.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.filters input,.filters select{border:1px solid #d0d5dd;border-radius:9px;padding:9px}.empty{text-align:center;padding:35px;color:var(--muted)}.letter-preview{background:#fff;width:210mm;min-height:297mm;margin:0 auto;padding:20mm 22mm;box-shadow:0 4px 24px rgba(0,0,0,.08);color:#111;font-family:Arial,sans-serif;font-size:11pt;line-height:1.5}.letterhead{text-align:center;border-bottom:3px double #111;padding-bottom:8px;margin-bottom:18px}.letterhead h1{font-size:16pt;margin:0}.letter-meta{width:100%;margin-bottom:18px}.letter-meta td{border:0;padding:1px 0}.letter-body{text-align:justify}.signature{margin-left:auto;width:280px;margin-top:28px}.signature-space{height:70px}.searchbar{min-width:260px}.login-shell{min-height:calc(100vh - 120px);display:grid;place-items:center}.login-card{width:min(430px,100%)}code{background:#f2f4f7;padding:2px 5px;border-radius:5px}@media screen and (max-width:900px){.topbar{flex-wrap:wrap;padding:12px 16px}.topbar nav{order:3;width:100%;overflow:auto}.user-menu{margin-left:auto}.grid-4,.grid-2,.form-grid{grid-template-columns:1fr}.container{padding:0 14px}.letter-preview{width:100%;min-height:auto;padding:25px}.page-head{flex-direction:column}}@media print{body{background:#fff}.topbar,.footer,.no-print{display:none!important}.container{max-width:none;margin:0;padding:0}.letter-preview{box-shadow:none;width:210mm;min-height:297mm;margin:0;padding:18mm 20mm}@page{size:A4;margin:0}}

/* =========================================================
   CARAKA SURAT v1.1 - CORPORATE IDENTITY & OFFICIAL LETTER
   ========================================================= */
.company-logo-preview{display:flex;align-items:center;justify-content:center;min-height:120px;padding:16px;margin-bottom:10px;border:1px dashed #d0d5dd;border-radius:12px;background:#fbfcfe}.company-logo-preview img{display:block;max-width:420px;max-height:130px;width:auto;height:auto}.check-row{display:flex!important;align-items:center;gap:8px;margin:8px 0 10px;font-weight:500!important;color:var(--muted)}.check-row input{width:auto!important;margin:0}.print-toolbar{padding:12px;text-align:center}.letter-preview-official{position:relative;padding:17mm 20mm 18mm;font-family:"Times New Roman",Times,serif;font-size:11.5pt;line-height:1.5}.letterhead-official{border:0;text-align:left;margin:0 0 16px;padding:0}.letterhead-layout{display:grid;grid-template-columns:58mm 1fr;gap:8mm;align-items:center;min-height:30mm}.letterhead-logo-wrap{display:flex;align-items:center;justify-content:flex-start}.letterhead-logo{display:block;max-width:58mm;max-height:28mm;width:auto;height:auto;object-fit:contain}.letterhead-logo-fallback{width:24mm;height:24mm;border-radius:5mm;background:#162033;color:#fff;display:grid;place-items:center;font:700 18pt Arial,sans-serif}.letterhead-company-block{text-align:right;font-family:Arial,sans-serif;color:#222}.letterhead-company-name{font-size:15pt;font-weight:800;letter-spacing:.15px;margin-bottom:3px}.letterhead-address{font-size:8.7pt;line-height:1.35}.letterhead-contact{font-size:8.5pt;line-height:1.35;margin-top:3px;color:#364152}.letterhead-rule{height:4px;border-top:2px solid #0876bd;border-bottom:1px solid #67c7cf;margin-top:8px}.letterhead-rule span{display:block;width:28%;height:100%;background:#67c7cf}.letter-meta-official{font-size:11.2pt;margin:0 0 20px}.letter-meta-official td{border:0;padding:1px 0;vertical-align:top}.letter-meta-official .meta-label{width:22mm}.letter-meta-official .meta-colon{width:5mm}.letter-meta-official .letter-date{text-align:right;white-space:nowrap;padding-left:12mm}.letter-recipient{margin:0 0 14px}.letter-body-official{text-align:justify}.letter-body-official p{margin:0 0 10px}.letter-body-official ul,.letter-body-official ol{margin-top:5px;margin-bottom:10px}.signature-official{width:68mm;margin:30px 0 0 auto;line-height:1.45}.signature-company{font-weight:700}.signature-official .signature-space{height:24mm}.signature-name{font-weight:700;text-decoration:underline;text-underline-offset:3px}.letter-cc{margin-top:30px;font-size:10pt}.letter-document-footer{position:absolute;left:20mm;right:20mm;bottom:9mm;display:flex;justify-content:space-between;gap:12px;padding-top:4px;border-top:1px solid #d7dce2;color:#7b8492;font:7.5pt Arial,sans-serif;letter-spacing:.1px}
@media screen and (max-width:900px){.letterhead-layout{grid-template-columns:1fr;gap:12px}.letterhead-company-block{text-align:left}.letterhead-logo{max-width:230px;max-height:100px}.letter-meta-official .letter-date{white-space:normal}}
@media print{.letter-preview-official{padding:15mm 18mm 16mm}.letter-document-footer{left:18mm;right:18mm;bottom:7mm}}


/* =========================================================
   CARAKA SURAT v1.2 - PARAGRAPH & PRINT LAYOUT REFINEMENT
   ========================================================= */
.letterhead-layout{display:flex;align-items:center;gap:8mm;min-height:25mm}
.letterhead-logo-wrap{flex:0 0 50mm;display:flex;align-items:center;justify-content:flex-start}
.letterhead-logo{display:block;max-width:50mm;max-height:24mm;width:auto;height:auto;object-fit:contain}
.letterhead-company-block{flex:1;min-width:0;text-align:right;font-family:Arial,sans-serif;color:#222}
.letterhead-company-name{font-size:14pt;line-height:1.15}
.letterhead-address{font-size:8.5pt;line-height:1.32}
.letterhead-contact{font-size:8.3pt;line-height:1.3}
.letter-body-official>p{margin:0 0 10pt;text-indent:0}
.letter-body-official>p:last-child{margin-bottom:0}
.letter-body-official br{line-height:1.5}
.letter-draft-watermark{position:absolute;z-index:0;left:50%;top:52%;transform:translate(-50%,-50%) rotate(-32deg);font:700 70pt Arial,sans-serif;letter-spacing:8px;color:rgba(120,128,140,.10);pointer-events:none;user-select:none;white-space:nowrap}
.letter-preview-official>header,.letter-preview-official>.letter-meta,.letter-preview-official>.letter-recipient,.letter-preview-official>.letter-body,.letter-preview-official>.signature,.letter-preview-official>.letter-cc,.letter-preview-official>.letter-document-footer{position:relative;z-index:1}
@media screen and (max-width:900px){.letterhead-layout{display:flex;flex-direction:column;align-items:flex-start;gap:10px}.letterhead-logo-wrap{flex-basis:auto}.letterhead-company-block{text-align:left}.letterhead-logo{max-width:230px;max-height:90px}}
@media print{.letter-draft-watermark{color:rgba(120,128,140,.09)}}


/* =========================================================
   CARAKA SURAT v1.3 - PRINT MEDIA & CACHE REFINEMENT
   ========================================================= */
@media print{
  .letter-preview-official{position:relative;overflow:hidden}
  .letterhead-layout{display:flex!important;flex-direction:row!important;align-items:center!important;gap:8mm!important;min-height:25mm!important}
  .letterhead-logo-wrap{flex:0 0 50mm!important;display:flex!important;align-items:center!important;justify-content:flex-start!important}
  .letterhead-logo{max-width:50mm!important;max-height:24mm!important;width:auto!important;height:auto!important;object-fit:contain!important}
  .letterhead-company-block{flex:1!important;min-width:0!important;text-align:right!important}
  .letter-draft-watermark{position:absolute!important;left:50%!important;top:52%!important;transform:translate(-50%,-50%) rotate(-32deg)!important;font:700 70pt Arial,sans-serif!important;letter-spacing:8px!important;color:rgba(120,128,140,.09)!important;white-space:nowrap!important;z-index:0!important}
}


/* =========================================================
   CARAKA SURAT v1.4 - FINAL PRINT POLISH
   - wider company identity block
   - cleaner two-line address fit
   - remove decorative footer collision
   ========================================================= */
.letterhead-layout{gap:5mm;min-height:24mm}
.letterhead-logo-wrap{flex:0 0 45mm}
.letterhead-logo{max-width:45mm;max-height:23mm}
.letterhead-company-name{font-size:14pt;line-height:1.12;margin-bottom:2px}
.letterhead-address{font-size:8.2pt;line-height:1.28}
.letterhead-contact{font-size:8.1pt;line-height:1.25;margin-top:2px}
.letter-cc{margin-top:24px;margin-bottom:0}
.letter-document-footer{display:none!important}
.letter-body-official{text-align:justify;text-justify:inter-word;word-spacing:normal;letter-spacing:0}
@media print{
  .letterhead-layout{gap:5mm!important;min-height:24mm!important}
  .letterhead-logo-wrap{flex-basis:45mm!important}
  .letterhead-logo{max-width:45mm!important;max-height:23mm!important}
  .letterhead-address{font-size:8.2pt!important;line-height:1.28!important}
  .letterhead-contact{font-size:8.1pt!important;line-height:1.25!important}
  .letter-document-footer{display:none!important}
}

/* CARAKA VERIFY ONLY START */
.letter-verification-official{position:absolute;left:20mm;right:20mm;bottom:17mm;display:flex;align-items:center;gap:8px;padding-top:4px;border-top:1px solid #d7dce2;color:#667085;font:7.5pt Arial,sans-serif}
.letter-verification-official img{width:16mm;height:16mm}
.letter-verification-official div{display:flex;flex-direction:column;gap:1px}
.verify-public-body{background:#f3f6fb;margin:0}
.verify-public{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.verify-card{max-width:760px;width:100%}
.verify-card h1{font-size:42px;margin:8px 0}
.verify-valid{color:#15803d;font-weight:700}
.verify-invalid{color:#b91c1c;font-weight:700}
/* CARAKA VERIFY ONLY END */

.verification-qr-preview{
    width:140px;
    height:140px;
    padding:8px;
    background:#fff;
    border:1px solid #d7dce2;
    border-radius:8px;
}

.letter-paper{position:relative}
.print-verification-qr{
    position:static;
    width:76mm;
    margin:8mm 0 0 0;
    display:flex;
    align-items:center;
    gap:6px;
    padding-top:3px;
    border-top:1px solid #d7dce2;
    color:#667085;
    font:7.5pt Arial,sans-serif;
}
.print-verification-qr img{
    width:15mm;
    height:15mm;
    flex:0 0 auto;
}
.print-verification-qr div{
    display:flex;
    flex-direction:column;
    gap:1px;
}

/* FORCE PRINT QR INSIDE LETTER PAPER */
.print-verification-qr{
    position:static !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    width:76mm !important;
    margin:8mm 0 0 0 !important;
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    padding-top:3px !important;
    border-top:1px solid #d7dce2 !important;
    color:#667085 !important;
    font:7.5pt Arial,sans-serif !important;
    page-break-inside:avoid !important;
}
.print-verification-qr img{
    width:15mm !important;
    height:15mm !important;
    flex:0 0 auto !important;
}
.print-verification-qr div{
    display:flex !important;
    flex-direction:column !important;
    gap:1px !important;
}

/* FINAL PRINT QR POSITION */
.letter-preview .print-verification-qr{
    position:static !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    width:78mm !important;
    margin:7mm 0 0 0 !important;
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    padding-top:3px !important;
    border-top:1px solid #d7dce2 !important;
    color:#667085 !important;
    font:7.5pt Arial,sans-serif !important;
    page-break-inside:avoid !important;
}
.letter-preview .print-verification-qr img{
    width:15mm !important;
    height:15mm !important;
    flex:0 0 auto !important;
}
.letter-preview .print-verification-qr div{
    display:flex !important;
    flex-direction:column !important;
    gap:1px !important;
}

/* QR ONLY ON PRINTED LETTER */
.letter-preview .print-verification-qr{
    position:static !important;
    width:18mm !important;
    margin:6mm 0 0 0 !important;
    padding:0 !important;
    border:0 !important;
    display:block !important;
    line-height:0 !important;
    page-break-inside:avoid !important;
}
.letter-preview .print-verification-qr img{
    width:17mm !important;
    height:17mm !important;
    display:block !important;
}
.letter-preview .print-verification-qr div,
.letter-preview .print-verification-qr strong,
.letter-preview .print-verification-qr span{
    display:none !important;
}