:root {
  --kkpg-radius-sm: 12px;
  --kkpg-radius-md: 16px;
  --kkpg-radius-lg: 20px;
  --kkpg-shadow-soft: 0 12px 30px rgba(15, 23, 42, 0.08);
  --kkpg-font-sans: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --kkpg-btn-primary: linear-gradient(135deg, #0ea5a0 0%, #22c55e 100%);
  --kkpg-btn-primary-solid: #0f9b77;
  --kkpg-btn-success: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
  --kkpg-btn-warning: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
  --kkpg-btn-danger: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  --kkpg-btn-neutral: #f8fafc;
  --kkpg-btn-neutral-border: #dbe7e3;
  --kkpg-btn-neutral-text: #0f172a;
  --kkpg-table-head-bg: #edf9f4;
  --kkpg-table-head-text: #0f172a;
  --kkpg-table-border: #dbe7e3;
  --kkpg-badge-info-bg: #ecfeff;
  --kkpg-badge-info-text: #0f766e;
  --kkpg-badge-primary-bg: #eff6ff;
  --kkpg-badge-primary-text: #1d4ed8;
  --kkpg-badge-success-bg: #dcfce7;
  --kkpg-badge-success-text: #166534;
  --kkpg-badge-danger-bg: #fee2e2;
  --kkpg-badge-danger-text: #991b1b;
  --kkpg-badge-warning-bg: #fef3c7;
  --kkpg-badge-warning-text: #92400e;
}

html, body, button, input, select, textarea, .btn, .navbar, .sidebar, .content, .box, .panel, .table {
  font-family: var(--kkpg-font-sans);
}

body.skin-blue,
body.member-theme-dark,
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.content-header > h1,
.panel-title,
.box-title,
.sidebar-menu > li > a,
.sidebar-menu .treeview-menu > li > a {
  letter-spacing: 0.01em;
}

.box,
.panel,
.table-responsive,
.finance-breadcrumb,
.member-panel,
.auth-card,
.easyui-dialog,
.modal-content,
.nav-tabs-custom,
.small-box,
.info-box {
  border-radius: var(--kkpg-radius-md) !important;
  overflow: hidden;
}

.btn,
.form-control,
.input-group-addon,
select,
textarea,
button,
.easyui-linkbutton,
.pagination > li > a,
.pagination > li > span,
.label,
.badge {
  border-radius: var(--kkpg-radius-sm) !important;
}

.btn,
.easyui-linkbutton,
button {
  transition: all .18s ease;
  font-weight: 700;
  box-shadow: none;
}

.btn:hover,
.easyui-linkbutton:hover,
button:hover {
  transform: translateY(-1px);
}

.btn,
.easyui-linkbutton,
.l-btn,
.l-btn-text {
  font-family: var(--kkpg-font-sans) !important;
}

.btn-primary,
.btn.btn-primary,
.easyui-linkbutton.btn-primary,
.l-btn-primary {
  background: var(--kkpg-btn-primary) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn.btn-primary:hover,
.btn.btn-primary:focus {
  background: var(--kkpg-btn-primary) !important;
  color: #fff !important;
  opacity: .96;
}

.btn-success,
.btn.btn-success {
  background: var(--kkpg-btn-success) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.btn-warning,
.btn.btn-warning {
  background: var(--kkpg-btn-warning) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.btn-danger,
.btn.btn-danger {
  background: var(--kkpg-btn-danger) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.btn-default,
.btn.btn-default,
.easyui-linkbutton,
.l-btn {
  background: var(--kkpg-btn-neutral) !important;
  border: 1px solid var(--kkpg-btn-neutral-border) !important;
  color: var(--kkpg-btn-neutral-text) !important;
}

.btn-default:hover,
.btn-default:focus,
.btn.btn-default:hover,
.btn.btn-default:focus,
.easyui-linkbutton:hover,
.easyui-linkbutton:focus,
.l-btn:hover,
.l-btn:focus {
  background: #eef6f3 !important;
  color: #0f172a !important;
}

.easyui-linkbutton .l-btn-text,
.l-btn .l-btn-text {
  color: inherit !important;
  font-weight: 700;
}

.toolbar-modern .easyui-linkbutton[iconcls*="icon-add"],
.toolbar-modern .easyui-linkbutton[iconcls*="icon-edit"],
.toolbar-modern .easyui-linkbutton[iconcls*="icon-search"],
.toolbar-modern .easyui-linkbutton[iconcls*="icon-print"],
.toolbar-modern .easyui-linkbutton[iconcls*="icon-excel"] {
  background: #ffffff !important;
  border-color: var(--kkpg-btn-neutral-border) !important;
}

.toolbar-modern .easyui-linkbutton[iconcls*="icon-cancel"],
.toolbar-modern .easyui-linkbutton[iconcls*="icon-clear"] {
  background: #fff7f7 !important;
  border-color: #f2cccc !important;
  color: #b42318 !important;
}

.table > thead > tr > th,
.datagrid-header-row td {
  font-weight: 800 !important;
  background: var(--kkpg-table-head-bg) !important;
  color: var(--kkpg-table-head-text) !important;
  border-color: var(--kkpg-table-border) !important;
}

.table > thead > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  vertical-align: middle !important;
  border-color: var(--kkpg-table-border) !important;
}

.datagrid-header,
.datagrid-td-rownumber,
.datagrid-header-row td,
.fixed-table-container thead th,
.bootstrap-table .fixed-table-header table thead th {
  background: var(--kkpg-table-head-bg) !important;
  color: var(--kkpg-table-head-text) !important;
  border-color: var(--kkpg-table-border) !important;
}

.datagrid-body td,
.fixed-table-container tbody td,
.bootstrap-table .fixed-table-body table tbody td {
  border-color: var(--kkpg-table-border) !important;
}

.box-header,
.box.box-primary > .box-header,
.box.box-solid.box-primary > .box-header,
.panel-heading {
  border-bottom: 1px solid var(--kkpg-table-border) !important;
}

.modal-footer,
#dialog-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 16px !important;
  border-top: 1px solid var(--kkpg-table-border) !important;
  background: #f8fcfa;
}

.modal-footer .btn,
#dialog-buttons .easyui-linkbutton,
#dialog-buttons .btn {
  min-width: 104px;
}

.badge,
.label,
.status-pill,
.finance-badge-soft,
.finance-badge,
.entity-badge,
.grp-badge,
.shu-badge,
.wo-badge,
.ak-badge,
.ar-badge,
.doc-badge,
.doc-count,
.rule-badge,
.badge-info-status {
  font-weight: 700 !important;
  letter-spacing: .02em;
  border-radius: 999px !important;
}

.badge,
.label,
.finance-badge-soft,
.entity-badge,
.shu-badge,
.wo-badge,
.finance-badge,
.rule-badge {
  background: var(--kkpg-badge-primary-bg) !important;
  color: var(--kkpg-badge-primary-text) !important;
}

.grp-badge,
.ak-badge,
.ar-badge,
.doc-badge,
.doc-count {
  background: var(--kkpg-badge-info-bg) !important;
  color: var(--kkpg-badge-info-text) !important;
}

.finance-badge.ok,
.status-ok,
.status-run,
.badge-info-status.st-lancar {
  background: var(--kkpg-badge-success-bg) !important;
  color: var(--kkpg-badge-success-text) !important;
}

.finance-badge.off,
.status-bad,
.rule-badge.bad,
.badge-info-status.st-macet {
  background: var(--kkpg-badge-danger-bg) !important;
  color: var(--kkpg-badge-danger-text) !important;
}

.status-pending,
.status-cancel,
.badge-info-status.st-jatuh-tempo {
  background: var(--kkpg-badge-warning-bg) !important;
  color: var(--kkpg-badge-warning-text) !important;
}

.sidebar-menu > li > a,
.sidebar-menu .treeview-menu > li > a {
  border-radius: 12px;
  margin: 2px 10px;
}

.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > .glyphicon,
.sidebar-menu .treeview-menu > li > a > .fa,
.sidebar-menu .treeview-menu > li > a > .glyphicon {
  width: 18px;
  text-align: center;
}

@media (max-width: 768px) {
  .content-header > h1 {
    font-size: 22px;
  }

  .box,
  .panel,
  .table-responsive,
  .member-panel,
  .auth-card,
  .easyui-dialog,
  .modal-content {
    border-radius: 14px !important;
  }

  .btn,
  .form-control,
  .input-group-addon,
  select,
  textarea,
  button,
  .easyui-linkbutton {
    min-height: 38px;
  }
}