:root{
    --green-deep:#173D2E;
    --green:#1F5A40;
    --gold:#B8912B;
    --paper:#FBFAF5;
    --paper-alt:#F1EEE2;
    --ink:#20261F;
    --ink-soft:#565C51;
    --line:#D8D2BD;
    --danger:#A83232;
    --radius:6px;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    font-family:'Segoe UI',Arial,sans-serif;
    background:var(--paper-alt);
    color:var(--ink);
  }
  
  
  
  /*header.app-head{*/
  /*  background:linear-gradient(135deg,var(--green-deep),var(--green));*/
  /*  color:var(--paper);*/
  /*  padding:22px 28px;*/
  /*  display:flex;*/
  /*  align-items:center;*/
  /*  justify-content:space-between;*/
  /*  flex-wrap:wrap;*/
  /*  gap:12px;*/
  /*  border-bottom:4px solid var(--gold);*/
  /*}*/
  /*header.app-head .brand{*/
  /*  font-family:Georgia,'Times New Roman',serif;*/
  /*  font-size:1.35rem;*/
  /*  letter-spacing:.3px;*/
  /*}*/
  /*header.app-head .brand small{*/
  /*  display:block;*/
  /*  font-family:'Segoe UI',Arial,sans-serif;*/
  /*  font-size:.72rem;*/
  /*  opacity:.85;*/
  /*  font-weight:400;*/
  /*  letter-spacing:.6px;*/
  /*  text-transform:uppercase;*/
  /*  margin-top:2px;*/
  /*}*/
  
  header.app-head{
  background:linear-gradient(135deg,var(--green-deep),var(--green));
  color:var(--paper);
  padding:16px 28px 0;
  border-bottom:4px solid var(--gold);
}
.app-head-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  padding-bottom:16px;
}
.brand-group{
  display:flex;
  align-items:center;
  gap:14px;
}

/*.app-logo{*/
/*  height:44px;*/
/*  width:auto;*/
/*  object-fit:contain;*/
/*  background:#fff;*/
/*  border-radius:4px;*/
/*  padding:3px;*/
/*  flex-shrink:0;*/
/*}*/

.app-logo{
  height:48px;
  width:48px;
  min-width:48px;
  object-fit:contain;      /* logo tidak gepeng, proporsi asli terjaga */
  background:#fff;
  border-radius:6px;
  padding:4px;
  flex-shrink:0;
  box-shadow:0 1px 4px rgba(0,0,0,.15);
}

/* Header menyusut rapi di layar HP */
@media (max-width:640px){
  .app-logo{
    height:36px;
    width:36px;
    min-width:36px;
    padding:3px;
  }
  header.app-head .brand{
    font-size:1.05rem;
  }
  .brand-group{
    gap:10px;
  }
}

header.app-head .brand{
  font-family:Georgia,'Times New Roman',serif;
  font-size:1.35rem;
  letter-spacing:.3px;
}
header.app-head .brand small{
  display:block;
  font-family:'Segoe UI',Arial,sans-serif;
  font-size:.72rem;
  opacity:.85;
  font-weight:400;
  letter-spacing:.6px;
  text-transform:uppercase;
  margin-top:2px;
}
.app-credit{
  text-align:center;
  font-size:.68rem;
  letter-spacing:.3px;
  color:rgba(255,255,255,.75);
  border-top:1px solid rgba(255,255,255,.15);
  padding:5px 10px;
  margin:0 -28px;
}
  
  .mode-switch{
    display:flex;
    background:rgba(255,255,255,.12);
    border-radius:999px;
    padding:4px;
  }
  .mode-switch button{
    border:none;
    background:transparent;
    color:var(--paper);
    padding:8px 18px;
    border-radius:999px;
    font-size:.85rem;
    font-weight:600;
    cursor:pointer;
    letter-spacing:.3px;
  }
  .mode-switch button.active{
    background:var(--gold);
    color:var(--green-deep);
  }
  main{
    max-width:1180px;
    margin:24px auto 80px;
    padding:0 20px;
    display:flex;
    flex-direction:column;
    gap:20px;
  }
  .card{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:20px 22px;
  }
  .card h2{
    margin:0 0 14px;
    font-size:1rem;
    text-transform:uppercase;
    letter-spacing:.6px;
    color:var(--green-deep);
    border-bottom:2px solid var(--gold);
    padding-bottom:8px;
  }
  .grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:14px;
  }
  label{
    display:block;
    font-size:.78rem;
    font-weight:600;
    color:var(--ink-soft);
    margin-bottom:4px;
  }
  input[type=text],input[type=number],input[type=date],select,textarea{
    width:100%;
    padding:8px 10px;
    border:1px solid var(--line);
    border-radius:4px;
    font-size:.88rem;
    background:#fff;
    color:var(--ink);
  }
  input:focus,select:focus,textarea:focus{
    outline:2px solid var(--gold);
    outline-offset:1px;
  }
  .profile-row{
    display:flex;
    gap:10px;
    align-items:flex-end;
    flex-wrap:wrap;
    margin-top:12px;
  }
  .profile-row select{flex:1;min-width:180px;}
  button.btn{
    border:none;
    padding:9px 16px;
    border-radius:4px;
    font-size:.83rem;
    font-weight:600;
    cursor:pointer;
    white-space:nowrap;
  }
  .btn-primary{background:var(--green);color:#fff;}
  .btn-primary:hover{background:var(--green-deep);}
  .btn-gold{background:var(--gold);color:var(--green-deep);}
  .btn-outline{background:transparent;color:var(--green-deep);border:1px solid var(--green);}
  .btn-outline:hover{background:var(--paper-alt);}
  .btn-danger{background:transparent;color:var(--danger);border:1px solid var(--danger);}
  .btn-danger:hover{background:#fbeaea;}
  .btn-sm{padding:5px 10px;font-size:.75rem;}

  table.lkh-table{
    width:100%;
    border-collapse:collapse;
    font-size:.82rem;
  }
  table.lkh-table th{
    background:var(--green-deep);
    color:var(--paper);
    text-align:left;
    padding:8px 6px;
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:.4px;
  }
  table.lkh-table td{
    border:1px solid var(--line);
    padding:5px 6px;
    vertical-align:top;
  }
  table.lkh-table td.no-col{text-align:center;width:34px;color:var(--ink-soft);font-weight:600;}
  table.lkh-table td.aksi-col{width:60px;text-align:center;}
  table.lkh-table input,table.lkh-table select{
    font-size:.8rem;
    padding:5px 6px;
  }
  .table-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
    flex-wrap:wrap;
    gap:8px;
  }
  .table-scroll{overflow-x:auto;}
  .actions-bar{
    position:sticky;
    bottom:0;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:14px 20px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
    box-shadow:0 -4px 14px rgba(0,0,0,.06);
  }
  .actions-bar .spacer{flex:1;}
  .hint{
    font-size:.74rem;
    color:var(--ink-soft);
    margin-top:6px;
  }
  input[type=file]{display:none;}
  .file-label{
    display:inline-block;
  }
  .ttd-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:20px;
  }
  .ttd-block label{margin-bottom:8px;}
  .ttd-thumb{
    position:relative;
    width:100%;
    max-width:320px;
    height:110px;
    border:1.5px dashed var(--line);
    border-radius:6px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }
  .ttd-thumb-empty{
    font-size:.78rem;
    color:var(--ink-soft);
    text-align:center;
    padding:8px;
  }
  .ttd-thumb-img{
    max-width:90%;
    max-height:90%;
    object-fit:contain;
  }
  .preview-note{
    max-width:820px;
    margin:0 auto 10px;
    font-size:.8rem;
    color:var(--ink-soft);
    background:#fff;
    border:1px solid var(--line);
    border-radius:6px;
    padding:8px 14px;
  }
  .ttd-stage{
    position:relative;
    width:100%;
    max-width:320px;
    height:130px;
    border:1.5px dashed var(--line);
    border-radius:6px;
    background:
      linear-gradient(45deg,#efece0 25%,transparent 25%),
      linear-gradient(-45deg,#efece0 25%,transparent 25%),
      linear-gradient(45deg,transparent 75%,#efece0 75%),
      linear-gradient(-45deg,transparent 75%,#efece0 75%);
    background-size:16px 16px;
    background-position:0 0,0 8px,8px -8px,-8px 0;
    background-color:#fff;
    touch-action:none;
    user-select:none;
  }
  .ttd-empty{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-size:.76rem;
    line-height:1.4;
    color:var(--ink-soft);
    padding:10px;
    pointer-events:none;
  }
  .ttd-drag-img{
    position:absolute;
    cursor:move;
    -webkit-user-drag:none;
    touch-action:none;
    outline:1.5px dashed var(--gold);
    outline-offset:2px;
  }
  .ttd-handle{
    position:absolute;
    width:14px;
    height:14px;
    background:var(--gold);
    border:2px solid var(--green-deep);
    border-radius:3px;
    display:none;
    z-index:5;
    touch-action:none;
  }
  .ttd-stage.has-image .ttd-handle{display:block;}
  .ttd-handle-tl,.ttd-handle-br{cursor:nwse-resize;}
  .ttd-handle-tr,.ttd-handle-bl{cursor:nesw-resize;}
  .ttd-thumb{
    position:relative;
    width:100%;
    max-width:320px;
    height:100px;
    border:1.5px dashed var(--line);
    border-radius:6px;
    background:
      linear-gradient(45deg,#efece0 25%,transparent 25%),
      linear-gradient(-45deg,#efece0 25%,transparent 25%),
      linear-gradient(45deg,transparent 75%,#efece0 75%),
      linear-gradient(-45deg,transparent 75%,#efece0 75%);
    background-size:16px 16px;
    background-position:0 0,0 8px,8px -8px,-8px 0;
    background-color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }
  .ttd-thumb-empty{
    font-size:.76rem;
    color:var(--ink-soft);
    text-align:center;
    padding:8px;
  }
  .ttd-thumb-img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
  }
  .preview-note{
    max-width:820px;
    margin:0 auto 10px;
    font-size:.82rem;
    color:var(--ink-soft);
    background:#fff;
    border:1px solid var(--line);
    border-radius:6px;
    padding:8px 14px;
  }
  .ttd-actions{
    display:flex;
    gap:8px;
    margin-top:8px;
  }
  #toast{
    position:fixed;
    bottom:24px;
    right:24px;
    background:var(--green-deep);
    color:#fff;
    padding:12px 18px;
    border-radius:6px;
    font-size:.85rem;
    box-shadow:0 6px 18px rgba(0,0,0,.25);
    opacity:0;
    transform:translateY(10px);
    transition:.25s;
    pointer-events:none;
    z-index:999;
    max-width:320px;
  }
  #toast.show{opacity:1;transform:translateY(0);}

  /* Preview modal */
  #previewOverlay{
    position:fixed;inset:0;background:rgba(20,25,20,.55);
    display:none;align-items:flex-start;justify-content:center;
    padding:30px 16px;overflow-y:auto;z-index:1000;
  }
  #previewOverlay.show{display:flex;}
  .preview-content-wrap{ margin:0 auto; }
  #previewSheet{
    background:#fff;
    width:100%;max-width:820px;
    padding:40px 46px;
    font-family:'Times New Roman',Times,serif;
    color:#111;
    box-shadow:0 10px 40px rgba(0,0,0,.3);
    border-radius:2px;
  }
  #previewSheet h1{font-size:1.05rem;text-align:center;margin:0 0 2px;line-height:1.4;text-transform:uppercase;}
  #previewSheet .doc-info{margin:18px 0 14px;font-size:.92rem;}
  #previewSheet .doc-info div{display:flex;margin-bottom:2px;}
  #previewSheet .doc-info span.lbl{width:110px;flex-shrink:0;}
  #previewSheet table{width:100%;border-collapse:collapse;font-size:.82rem;margin-top:10px;}
  #previewSheet th,#previewSheet td{border:1px solid #333;padding:5px 6px;}
  #previewSheet th{background:#eee;text-align:center;}
  #previewSheet .sign-block{display:flex;justify-content:space-between;margin-top:40px;font-size:.9rem;}
  #previewSheet .sign-block .col{width:46%;}
  #previewSheet .sign-right-date{text-align:left;margin-bottom:6px;}
  #previewSheet .sign-space{height:60px;}
  #previewSheet .ttd-img{max-width:170px;max-height:65px;display:block;margin:2px 0;}
  .preview-close-bar{
    position:sticky;top:0;display:flex;justify-content:flex-end;gap:8px;
    max-width:820px;width:100%;margin:0 auto 10px;
  }
  @media print{
    @page{ margin:10mm; }
    header, .actions-bar, main, .preview-close-bar, .preview-note, #toast{display:none !important;}
    body{margin:0;}
    #previewOverlay{position:static;background:none;padding:0;display:block !important;}
    .preview-content-wrap{margin:0 auto;}
    #previewSheet{box-shadow:none;padding:0;}
    .ttd-handle{display:none !important;}
    .ttd-drag-img{outline:none !important;}
    .ttd-stage{background:none !important;border:none !important;}
  }