:root{
  --form-accent:#6d28d9;
  --form-accent-dark:#5420ad;
  --form-accent-soft:#f3edff;
  --form-gold:#f5b82e;
  --form-text:#172b4d;
  --form-muted:#66758b;
  --form-border:#d6deea;
  --form-surface:#f7f9fc;
  --form-error:#dc2626;
  --form-success:#15803d;
  --form-radius:12px;
  --form-shadow:0 12px 32px rgba(39,25,71,.07);
}

/* Sistem form global PBUHub */
.page-wrap form{color:var(--form-text)}
.page-wrap form label:not(.form-check),
.page-wrap form .form-label{
  color:var(--form-text);
  font-size:.75rem;
  font-weight:750;
  line-height:1.35;
  letter-spacing:-.005em;
}
.page-wrap form label>small,
.page-wrap form .form-text{
  display:block;
  margin-top:7px;
  color:var(--form-muted);
  font-size:.64rem;
  font-weight:500;
  line-height:1.5;
}
.page-wrap .form-control,
.page-wrap .form-select{
  min-height:48px;
  border:1px solid var(--form-border);
  border-radius:var(--form-radius);
  background-color:var(--form-surface);
  color:var(--form-text);
  padding:.72rem .9rem;
  font-size:.78rem;
  line-height:1.4;
  box-shadow:inset 0 1px 2px rgba(15,35,71,.025);
  transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease,transform .18s ease;
}
.page-wrap .form-select{padding-right:2.5rem;background-color:#fff}
.page-wrap textarea.form-control{min-height:104px;line-height:1.65;resize:vertical}
.page-wrap input[type=file].form-control{padding:.62rem .72rem;background:#fff}
.page-wrap .form-control::placeholder{color:#95a1b2;opacity:1}
.page-wrap .form-control:hover:not(:disabled):not([readonly]),
.page-wrap .form-select:hover:not(:disabled){border-color:#b7a5da;background-color:#fff}
.page-wrap .form-control:focus,
.page-wrap .form-select:focus{
  border-color:var(--form-accent);
  background-color:#fff;
  color:var(--form-text);
  outline:0;
  box-shadow:0 0 0 4px rgba(109,40,217,.11),0 7px 18px rgba(71,35,128,.06);
}
.page-wrap .form-control:disabled,
.page-wrap .form-select:disabled,
.page-wrap .form-control[readonly]{background:#eef2f7;color:#66758b;border-color:#dce3ec;opacity:1;cursor:not-allowed}
.page-wrap .form-control.is-invalid,
.page-wrap .form-select.is-invalid,
.page-wrap .was-validated .form-control:invalid,
.page-wrap .was-validated .form-select:invalid{border-color:var(--form-error);background-color:#fffafa;box-shadow:none}
.page-wrap .form-control.is-valid,
.page-wrap .form-select.is-valid,
.page-wrap .was-validated .form-control:valid,
.page-wrap .was-validated .form-select:valid{border-color:var(--form-success);background-color:#fafffb;box-shadow:none}
.page-wrap .invalid-feedback,.page-wrap .valid-feedback{margin-top:6px;font-size:.64rem;font-weight:650}

.page-wrap .form-check{display:flex;align-items:center;gap:9px;min-height:28px;color:var(--form-text);font-size:.73rem;font-weight:650}
.page-wrap .form-check-input{width:19px;height:19px;margin:0;border:1.5px solid #b9c4d3;box-shadow:none;cursor:pointer}
.page-wrap .form-check-input:checked{border-color:var(--form-accent);background-color:var(--form-accent)}
.page-wrap .form-check-input:focus{border-color:var(--form-accent);box-shadow:0 0 0 4px rgba(109,40,217,.11)}
.page-wrap .input-group>.form-control,
.page-wrap .input-group>.form-select,
.page-wrap .input-group>.input-group-text{min-height:48px}
.page-wrap .input-group-text{border-color:var(--form-border);background:var(--form-accent-soft);color:var(--form-accent);font-size:.75rem;font-weight:750}

/* Struktur dan ruang borang */
.page-wrap fieldset{min-width:0;margin:0 0 20px;padding:20px;border:1px solid #e1e6ef;border-radius:15px;background:#fff}
.page-wrap legend{float:none;width:auto;margin:0 0 15px;padding:0;color:#281243;font-size:.82rem;font-weight:850}
.page-wrap .row.g-3{--bs-gutter-x:1rem;--bs-gutter-y:1rem}
.page-wrap .app-card>form:not(.estaf-directory-filter):not(.task-cycle-filter),
.page-wrap .panel>form:not(.estaf-directory-filter):not(.task-cycle-filter){position:relative}
.page-wrap .app-card-header{padding-bottom:13px;border-bottom:1px solid #edf0f5}
.page-wrap .app-card-header h3{color:#14213d;letter-spacing:-.015em}
.page-wrap .app-card-header small{display:block;margin-top:4px;color:var(--form-muted);font-size:.65rem;line-height:1.45}
.page-wrap .estaf-new-record-card,
.page-wrap .professional-editor-add,
.page-wrap .management-add,
.page-wrap .consultancy-add,
.page-wrap .experience-add{
  border:1px solid #ded4ed;
  border-left:4px solid var(--form-accent);
  border-radius:15px;
  background:linear-gradient(135deg,#fff 62%,#faf6ff);
  box-shadow:var(--form-shadow);
}
.page-wrap form h3,.page-wrap form h4,.page-wrap form h5,.page-wrap form h6{color:#1e1233;font-weight:820;letter-spacing:-.015em}

/* Butang tindakan form */
.page-wrap form .btn-pbu,
.page-wrap form button[type=submit]:not([class]),
.page-wrap form input[type=submit]{
  min-height:44px;
  border:1px solid var(--form-accent-dark);
  border-radius:11px;
  background:linear-gradient(135deg,var(--form-accent),var(--form-accent-dark));
  color:#fff;
  padding:.68rem 1.15rem;
  font-size:.72rem;
  font-weight:800;
  box-shadow:0 8px 18px rgba(109,40,217,.18);
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
.page-wrap form .btn-pbu:hover,
.page-wrap form button[type=submit]:not([class]):hover,
.page-wrap form input[type=submit]:hover{color:#fff;filter:brightness(1.04);transform:translateY(-1px);box-shadow:0 11px 24px rgba(109,40,217,.23)}
.page-wrap form .btn-pbu:focus-visible,
.page-wrap form button[type=submit]:not([class]):focus-visible{outline:3px solid rgba(109,40,217,.22);outline-offset:3px}
.page-wrap form .btn-outline-secondary,.page-wrap form .btn-light-border{min-height:44px;border-color:#ccd5e1;border-radius:11px;background:#fff;color:#536278;font-size:.72rem;font-weight:750}
.page-wrap form .professional-delete,.page-wrap form .btn-record-delete{border-radius:10px;font-size:.68rem;font-weight:750}

/* Filter kekal padat walaupun menggunakan sistem form global */
.page-wrap form[class*="filter"] .form-control,
.page-wrap form[class*="filter"] .form-select,
.page-wrap .directory-position-search .form-control,
.page-wrap .directory-position-search .form-select{min-height:44px;padding-top:.58rem;padding-bottom:.58rem;background-color:#fff}
.page-wrap .form-control-sm,.page-wrap .form-select-sm{min-height:36px;border-radius:9px;padding:.4rem .65rem;font-size:.69rem}

@media(max-width:700px){
  .page-wrap .form-control,.page-wrap .form-select{min-height:46px;font-size:.76rem}
  .page-wrap textarea.form-control{min-height:96px}
  .page-wrap fieldset{padding:15px}
  .page-wrap form .btn-pbu,.page-wrap form button[type=submit]:not([class]){width:100%;justify-content:center}
}