/* AIS ERP — tema prototipe di atas Tabler 1.4 (Bootstrap 5) */
:root {
  --tblr-primary: #0b6bf5;
  --tblr-primary-rgb: 11, 107, 245;
  --tblr-primary-fg: #fff;
  --tblr-primary-darken: #0957c9;
  --tblr-font-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tblr-body-bg: #eef0f3;
  --tblr-border-radius: 10px;
  --ais-shell-bg: #f8f9fb;
  --ais-surface: #ffffff;
  --ais-line: #e7eaef;
  --ais-muted: #6b7280;
  --ais-head-bg: #edf4fe;
  --ais-hover: #f5f8fd;
}

body { background: var(--tblr-body-bg); font-feature-settings: "cv11", "tnum"; }

/* ---------- shell ---------- */
.ais-shell {
  margin: 24px; background: var(--ais-shell-bg);
  border-radius: 18px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); min-height: calc(100vh - 48px);
}
@media (max-width: 991.98px) { .ais-shell { margin: 0; border-radius: 0; min-height: 100vh; } }

.ais-topbar { display: flex; align-items: center; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--ais-line); }
.ais-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.35rem; color: #111827; text-decoration: none; white-space: nowrap; }
.ais-brand i { color: var(--tblr-primary); font-size: 1.9rem; }
.ais-brand small { font-weight: 500; font-size: .75rem; color: var(--ais-muted); margin-left: 2px; }

.ais-modules { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.ais-modules::-webkit-scrollbar { display: none; }
.ais-pill {
  border: 1px solid var(--ais-line); background: var(--ais-surface); color: #374151; border-radius: 10px;
  padding: 7px 11px; font-size: .84rem; white-space: nowrap; text-decoration: none; transition: .15s;
}
@media (min-width: 2200px) { .ais-modules { gap: 8px; } .ais-pill { padding: 7px 14px; font-size: .875rem; } }
.ais-pill:hover { border-color: #c9d6ea; color: #111827; }
.ais-pill.active { background: var(--tblr-primary); border-color: var(--tblr-primary); color: #fff; }

.ais-search {
  display: flex; align-items: center; gap: 8px; min-width: 150px; padding: 8px 10px 8px 12px; border: 1px solid var(--ais-line);
  background: var(--ais-surface); border-radius: 12px; color: var(--ais-muted); cursor: pointer; font-size: .875rem;
}
.ais-search kbd { margin-left: auto; background: #f3f4f6; color: #374151; border: 1px solid var(--ais-line); box-shadow: none; font-size: .7rem; }
.ais-iconbtn {
  width: 40px; height: 40px; display: inline-grid; place-items: center; border: 1px solid var(--ais-line); background: var(--ais-surface);
  border-radius: 12px; color: #374151; position: relative;
}
.ais-iconbtn:hover { background: var(--ais-hover); color: #111827; }
.ais-iconbtn .badge-dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; border: 2px solid #fff; }
.ais-avatar-btn { border: 0; background: none; padding: 0; }
.ais-wide { display: none; }
@media (min-width: 1920px) { .ais-wide { display: inline; } .ais-search { min-width: 240px; } }
.form-check-input[type="checkbox"] { border-radius: 5px; }
.ais-avatar-btn .avatar { width: 40px; height: 40px; border-radius: 50%; }

/* ---------- sub-navigation ---------- */
.ais-subnav { display: flex; align-items: center; gap: 8px; padding: 14px 24px 0; flex-wrap: wrap; }
.ais-subnav .btn-sub {
  border: 1px solid var(--ais-line); background: var(--ais-surface); border-radius: 10px; color: #374151;
  padding: 6px 12px; font-size: .85rem; display: inline-flex; align-items: center; gap: 6px;
}
.ais-subnav .btn-sub:hover, .ais-subnav .btn-sub.show { background: var(--ais-hover); }
.ais-subnav .btn-sub.current { border-color: #b9d2fb; background: var(--ais-head-bg); color: var(--tblr-primary); }
.ais-breadcrumb { padding: 14px 24px 0; font-size: .8rem; color: var(--ais-muted); }
.ais-breadcrumb a { color: var(--ais-muted); text-decoration: none; }
.ais-breadcrumb a:hover { color: var(--tblr-primary); }

.ais-main { padding: 16px 24px 32px; }

/* ---------- page header & toolbars ---------- */
.ais-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.ais-pagehead h1 { font-size: 1.35rem; font-weight: 700; margin: 0; color: #111827; }
.ais-pagehead p { margin: 4px 0 0; color: var(--ais-muted); font-size: .875rem; }

.ais-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.btn-soft { border: 1px solid var(--ais-line); background: var(--ais-surface); color: #374151; }
.btn-soft:hover { background: var(--ais-hover); color: #111827; border-color: #d5dce8; }
.btn-group > .btn-check:checked + .btn-soft, .btn-group > .btn-check:checked + .btn-soft:hover { background: var(--tblr-primary); border-color: var(--tblr-primary); color: var(--tblr-primary-fg); font-weight: 600; }

.ais-viewswitch { display: inline-flex; gap: 6px; }
.ais-viewswitch button {
  border: 1px solid var(--ais-line); background: var(--ais-surface); color: #4b5563; border-radius: 10px; padding: 6px 12px;
  font-size: .85rem; display: inline-flex; align-items: center; gap: 6px;
}
.ais-viewswitch button.active { background: var(--ais-head-bg); border-color: #b9d2fb; color: var(--tblr-primary); }

.ais-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--ais-line); margin-bottom: 16px; }
.ais-tabs a { padding: 10px 2px; color: var(--ais-muted); text-decoration: none; font-size: .875rem; display: inline-flex; gap: 6px; align-items: center; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ais-tabs a.active { color: var(--tblr-primary); border-color: var(--tblr-primary); font-weight: 500; }
.ais-tabs a .badge { font-weight: 600; }

/* ---------- card & table ---------- */
.ais-card { background: var(--ais-surface); border: 1px solid var(--ais-line); border-radius: 14px; }
.ais-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 20px 20px 16px; flex-wrap: wrap; }
.ais-card-head h2 { font-size: 1.1rem; font-weight: 700; margin: 0; }
.ais-card-head p { margin: 4px 0 0; color: var(--ais-muted); font-size: .85rem; }

.ais-table { width: 100%; margin: 0; font-size: .875rem; }
.ais-table thead th {
  background: var(--ais-head-bg); color: #111827; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: .85rem;
  padding: 12px 16px; border-bottom: 1px solid #dbe6f7; white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
.ais-table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--ais-line); vertical-align: middle; }
.ais-table tbody tr:hover { background: var(--ais-hover); }
.ais-table tbody tr.selected { background: #f2f7ff; }
.ais-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ais-table .strong { color: #111827; font-weight: 500; }
.ais-table .muted { color: var(--ais-muted); }
.th-sort { cursor: pointer; user-select: none; }
.th-sort .ti { font-size: .9rem; color: #9ca3af; margin-left: 4px; vertical-align: -1px; }
.th-sort.asc .ti, .th-sort.desc .ti { color: var(--tblr-primary); }
.ais-table-wrap { overflow: auto; max-height: 620px; }

.ais-person { display: flex; align-items: center; gap: 10px; }
.ais-person .avatar { width: 34px; height: 34px; border-radius: 50%; font-size: .75rem; font-weight: 600; }
.ais-person .name { font-weight: 500; color: #111827; line-height: 1.2; }
.ais-person .sub { font-size: .75rem; color: var(--ais-muted); }

.ais-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; flex-wrap: wrap; font-size: .85rem; color: var(--ais-muted); }

.ais-bulkbar {
  display: none; align-items: center; gap: 10px; padding: 10px 16px; background: #0f172a; color: #fff; border-radius: 12px;
  position: sticky; bottom: 16px; margin-top: 12px; box-shadow: 0 8px 24px rgba(15, 23, 42, .2);
}
.ais-bulkbar.show { display: flex; }
.ais-bulkbar .btn { --tblr-btn-padding-y: .3rem; }

.ais-filters { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 20px 16px; }
.ais-filters .form-select, .ais-filters .form-control { width: auto; min-width: 150px; font-size: .85rem; border-radius: 10px; }
.ais-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px 4px 10px; background: var(--ais-head-bg); color: var(--tblr-primary); border-radius: 999px; font-size: .78rem; }
.ais-chip button { border: 0; background: none; color: inherit; padding: 0; line-height: 1; }

/* status badges (soft) */
.st { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 500; white-space: nowrap; }
.st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-gray { background: #f3f4f6; color: #4b5563; }
.st-blue { background: #e8f1ff; color: #0b5bd3; }
.st-amber { background: #fff4e0; color: #b45309; }
.st-green { background: #e7f7ee; color: #15803d; }
.st-red { background: #fdecec; color: #c62828; }
.st-violet { background: #f1ecff; color: #6d28d9; }

/* grid (card) view */
.ais-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; padding: 16px; }
.ais-tile { border: 1px solid var(--ais-line); border-radius: 12px; padding: 14px; background: var(--ais-surface); }
.ais-tile:hover { border-color: #c9d6ea; box-shadow: 0 2px 8px rgba(16, 24, 40, .06); }
.ais-tile dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 12px 0 0; font-size: .8rem; }
.ais-tile dt { color: var(--ais-muted); font-weight: 400; }
.ais-tile dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- document form ---------- */
.ais-steps { display: flex; gap: 0; padding: 0; margin: 0; list-style: none; flex-wrap: wrap; }
.ais-steps li { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--ais-muted); padding-right: 14px; }
.ais-steps li + li::before { content: ""; width: 24px; height: 1px; background: #d1d5db; margin-right: 6px; }
.ais-steps .dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1px solid #d1d5db; font-size: .7rem; background: #fff; }
.ais-steps li.done { color: #15803d; } .ais-steps li.done .dot { background: #15803d; border-color: #15803d; color: #fff; }
.ais-steps li.now { color: var(--tblr-primary); font-weight: 600; } .ais-steps li.now .dot { border-color: var(--tblr-primary); color: var(--tblr-primary); box-shadow: 0 0 0 3px #dbe8fd; }

.ais-section { padding: 20px; border-top: 1px solid var(--ais-line); }
.ais-section:first-child { border-top: 0; }
.ais-section-title { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ais-muted); margin-bottom: 12px; }
.form-label { font-size: .8rem; font-weight: 500; color: #374151; }
.form-control, .form-select { border-radius: 10px; }
.form-control[readonly] { background: #f9fafb; }

.ais-lines td { padding: 8px 10px !important; }
.ais-lines .form-control, .ais-lines .form-select { font-size: .85rem; padding: .35rem .55rem; }
.ais-lines .form-control.num { text-align: right; }
.ais-lines .rowno { width: 36px; color: var(--ais-muted); text-align: center; }

.ais-totals { display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; font-size: .9rem; }
.ais-totals dt { color: var(--ais-muted); font-weight: 400; }
.ais-totals dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.ais-totals .grand { font-size: 1.15rem; font-weight: 700; color: #111827; padding-top: 8px; border-top: 1px dashed var(--ais-line); }

.ais-actionbar {
  position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 20px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(6px); border-top: 1px solid var(--ais-line);
  border-radius: 0 0 14px 14px;
}

.ais-timeline { list-style: none; margin: 0; padding: 0; }
.ais-timeline li { position: relative; padding: 0 0 16px 22px; font-size: .82rem; }
.ais-timeline li::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: -6px; width: 1px; background: var(--ais-line); }
.ais-timeline li:last-child::before { display: none; }
.ais-timeline li::after { content: ""; position: absolute; left: 0; top: 4px; width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 2px solid var(--tblr-primary); }
.ais-timeline .when { color: var(--ais-muted); font-size: .75rem; }

/* ---------- approval center ---------- */
.ais-split { display: grid; grid-template-columns: 250px 1fr; gap: 16px; }
@media (max-width: 991.98px) { .ais-split { grid-template-columns: 1fr; } }
.ais-typelist { list-style: none; margin: 0; padding: 8px; }
.ais-typelist a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: #374151; text-decoration: none; font-size: .875rem; }
.ais-typelist a:hover { background: var(--ais-hover); }
.ais-typelist a.active { background: var(--ais-head-bg); color: var(--tblr-primary); font-weight: 500; }
.ais-typelist a .ti { font-size: 1.1rem; }
.ais-typelist a .count { margin-left: auto; font-size: .75rem; background: #f3f4f6; color: #374151; border-radius: 999px; padding: 1px 8px; }
.ais-typelist a.active .count { background: var(--tblr-primary); color: #fff; }

.ais-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
@media (max-width: 767.98px) { .ais-kpis { grid-template-columns: repeat(2, 1fr); } }
.ais-kpi { background: var(--ais-surface); border: 1px solid var(--ais-line); border-radius: 14px; padding: 14px 16px; }
.ais-kpi .lbl { font-size: .78rem; color: var(--ais-muted); display: flex; align-items: center; gap: 6px; }
.ais-kpi .val { font-size: 1.5rem; font-weight: 700; color: #111827; margin-top: 4px; font-variant-numeric: tabular-nums; }
.ais-kpi .hint { font-size: .75rem; color: var(--ais-muted); }

.ais-age-late { color: #c62828; font-weight: 500; }
.offcanvas.ais-drawer { width: 520px; max-width: 100%; }
.ais-kv { display: grid; grid-template-columns: 140px 1fr; gap: 8px 12px; font-size: .85rem; }
.ais-kv dt { color: var(--ais-muted); font-weight: 400; }
.ais-kv dd { margin: 0; color: #111827; }

/* ---------- command palette ---------- */
#cmdk .modal-content { border-radius: 16px; overflow: hidden; }
#cmdk .cmdk-input { border: 0; border-bottom: 1px solid var(--ais-line); border-radius: 0; padding: 16px 18px; font-size: 1rem; box-shadow: none; }
#cmdk .cmdk-list { max-height: 420px; overflow: auto; padding: 8px; }
#cmdk .cmdk-group { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ais-muted); padding: 10px 10px 4px; }
#cmdk .cmdk-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: #111827; text-decoration: none; font-size: .9rem; }
#cmdk .cmdk-item .path { margin-left: auto; font-size: .75rem; color: var(--ais-muted); }
#cmdk .cmdk-item.active, #cmdk .cmdk-item:hover { background: var(--ais-head-bg); color: var(--tblr-primary); }

/* ---------- layar kecil ---------- */
.ais-tabs { overflow-x: auto; scrollbar-width: none; }
.ais-tabs::-webkit-scrollbar { display: none; }
.ais-tabs a { white-space: nowrap; flex-shrink: 0; }
.ais-table td.muted, .ais-age-late { white-space: nowrap; }
.ais-shell, .ais-main, .ais-card { min-width: 0; }
@media (max-width: 767.98px) {
  .ais-topbar { padding: 12px 16px; gap: 10px; }
  .ais-subnav { padding: 12px 16px 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ais-breadcrumb { padding: 10px 16px 0; }
  .ais-main { padding: 12px 16px 24px; }
  .ais-pagehead { align-items: flex-start; }
  .ais-toolbar { width: 100%; }
  .ais-filters { padding: 0 16px 16px; }
  .ais-filters .input-icon, .ais-filters .form-select { min-width: 0 !important; flex: 1 1 140px; }
  .ais-card-head { padding: 16px 16px 12px; }
}
@media (max-width: 575.98px) { .ais-modules { display: none; } }
@media (max-width: 991.98px) {
  .ais-split > aside .ais-section-title { display: none; }
  .ais-typelist { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .ais-typelist a { white-space: nowrap; border: 1px solid var(--ais-line); }
}

.ais-proto-note { font-size: .75rem; color: var(--ais-muted); text-align: center; padding: 0 0 24px; }

/* ---------- top bar biru ---------- */
.ais-topbar {
  background: linear-gradient(135deg, #0b6bf5 0%, #0a58d0 100%);
  border-bottom: 0; border-radius: 18px 18px 0 0; color: #fff;
}
@media (max-width: 991.98px) { .ais-topbar { border-radius: 0; } }
.ais-topbar .ais-brand, .ais-topbar .ais-brand i { color: #fff; }
.ais-topbar .ais-brand small { color: rgba(255, 255, 255, .75); }
.ais-topbar .ais-pill { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .22); color: #fff; }
.ais-topbar .ais-pill:hover { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .35); color: #fff; }
.ais-topbar .ais-pill.active { background: #fff; border-color: #fff; color: var(--tblr-primary); font-weight: 600; }
.ais-topbar .ais-search { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .85); }
.ais-topbar .ais-search:hover { background: rgba(255, 255, 255, .22); }
.ais-topbar .ais-search kbd { background: rgba(255, 255, 255, .2); border-color: transparent; color: #fff; }
.ais-topbar .ais-iconbtn, .ais-topbar .btn-soft {
  background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .25); color: #fff;
}
.ais-topbar .ais-iconbtn:hover, .ais-topbar .btn-soft:hover, .ais-topbar .btn-soft.show { background: rgba(255, 255, 255, .26); color: #fff; }
.ais-topbar .btn-soft:disabled { opacity: 1; color: #fff; }
.ais-topbar .ais-iconbtn .badge-dot { border-color: #0a58d0; background: #ffb020; }
.ais-topbar .ais-avatar-btn .avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); }
.ais-subnav { padding-top: 16px; }

/* ---------- header berwarna ---------- */
/* Tab: yang aktif diberi latar */
.ais-tabs { gap: 6px; }
.ais-tabs a { padding: 9px 14px; border-radius: 10px 10px 0 0; }
.ais-tabs a:hover { background: #f1f5fc; color: #111827; }
.ais-tabs a.active { background: #e3eefe; color: var(--tblr-primary); border-color: var(--tblr-primary); font-weight: 600; }
.ais-tabs a.active .badge { background: var(--tblr-primary) !important; color: #fff !important; }

/* Header kartu */
.ais-card-head { background: linear-gradient(180deg, #f3f7fe 0%, #eef4fd 100%); border-bottom: 1px solid #dbe6f7; border-radius: 14px 14px 0 0; }
.ais-card-head + .ais-filters { padding-top: 16px; }

/* Judul bagian form = pita berwarna selebar kartu */
.ais-section > .ais-section-title { margin: -20px -20px 16px; padding: 10px 20px; background: #f3f7fe; border-bottom: 1px solid #e3ebf8; color: #0957c9; }
.ais-section:first-child > .ais-section-title { border-radius: 14px 14px 0 0; }
.ais-card.p-3 > .ais-section-title, .offcanvas-body .ais-section-title {
  margin: -1rem -1rem 12px; padding: 8px 1rem; background: #f3f7fe; border-bottom: 1px solid #e3ebf8; color: #0957c9;
}
.ais-card.p-3 > .ais-section-title { border-radius: 14px 14px 0 0; }
.offcanvas-body .ais-section-title { margin: 0 -1rem 12px; }

/* Header drawer & modal: biru */
.ais-drawer .offcanvas-header, .modal-header, #cmdk .cmdk-input {
  background: linear-gradient(135deg, #0b6bf5 0%, #0a58d0 100%); color: #fff; border-bottom: 0;
}
.ais-drawer .offcanvas-header .name, .ais-drawer .offcanvas-header .fw-bold, .modal-header .modal-title { color: #fff; }
.ais-drawer .offcanvas-header .sub, .ais-drawer .offcanvas-header .small, .ais-drawer .offcanvas-header .text-secondary { color: rgba(255,255,255,.8) !important; }
.ais-drawer .offcanvas-header .avatar { box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
.ais-drawer .offcanvas-header .btn-close, .modal-header .btn-close { filter: invert(1) grayscale(1) brightness(2); opacity: .9; }
#cmdk .cmdk-input::placeholder { color: rgba(255,255,255,.75); }
#cmdk .cmdk-input:focus { color: #fff; }

/* Tab Bootstrap (mis. matriks role) */
.nav-tabs .nav-link.active { background: #e3eefe; color: var(--tblr-primary); font-weight: 600; }
.ais-kpi { background: linear-gradient(180deg, #fff 0%, #f7faff 100%); }

/* penyesuaian: pita judul drawer selebar panel, avatar di latar biru jadi putih */
.offcanvas-body .ais-section-title { margin: 0 calc(-1 * var(--tblr-offcanvas-padding-x, 1.5rem)) 12px; padding: 8px var(--tblr-offcanvas-padding-x, 1.5rem); }
.ais-topbar .avatar, .ais-drawer .offcanvas-header .avatar { background: #fff !important; color: var(--tblr-primary) !important; font-weight: 700; }

/* ---------- top bar selebar layar (di luar .ais-shell) ---------- */
.ais-topbar { border-radius: 0; position: sticky; top: 0; z-index: 1030; padding: 14px 24px; box-shadow: 0 2px 10px rgba(10, 88, 208, .25); }
.ais-shell { margin-top: 20px; }
@media (max-width: 991.98px) { .ais-shell { margin-top: 0; } }

html, body { margin: 0; padding: 0; }
.ais-topbar { width: 100%; margin: 0; }

/* Tabler: @media (min-width:992px) { :root { margin-left: calc(100vw - 100%) } } menggeser seluruh
   halaman selebar scrollbar (±15px) ke kanan bila scrollbar klasik tampil. Header AIS harus mepet kiri. */
:root { margin-left: 0; margin-right: 0; }



/* ---------- tab modul di header: gaya tab (tanpa kotak) ---------- */
.ais-topbar { padding-bottom: 0; align-items: flex-end; }
.ais-topbar > .ais-brand, .ais-topbar > .ms-auto { align-self: center; padding-bottom: 14px; }
.ais-topbar .ais-modules { align-self: flex-end; gap: 4px; }
.ais-topbar .ais-pill, .ais-topbar .ais-pill:hover {
  background: transparent; border: 0; border-bottom: 3px solid transparent; border-radius: 10px 10px 0 0;
  color: rgba(255, 255, 255, .88); font-weight: 500; padding: 10px 14px 12px; box-shadow: none;
}
.ais-topbar .ais-pill:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.ais-topbar .ais-pill.active, .ais-topbar .ais-pill.active:hover {
  background: #e3eefe; color: var(--tblr-primary); font-weight: 600; border-bottom-color: #fff; box-shadow: none;
}


/* ikon di menu modul header */
.ais-topbar .ais-pill { display: inline-flex; align-items: center; gap: 6px; }
.ais-topbar .ais-pill .ti { font-size: 1.05rem; opacity: .9; }
.ais-topbar .ais-pill.active .ti { opacity: 1; }

.ais-topbar .ais-pill, .ais-topbar .ais-pill:hover { padding: 10px 10px 12px; gap: 5px; font-size: .84rem; }
.ais-topbar .ais-modules { gap: 2px; }
@media (min-width: 2200px) { .ais-topbar .ais-pill, .ais-topbar .ais-pill:hover { padding: 10px 14px 12px; font-size: .875rem; } .ais-topbar .ais-modules { gap: 4px; } }

@media (max-width: 1919.98px) { .ais-topbar .ais-search { min-width: 0; } .ais-topbar .ais-search > span { display: none; } }


/* =====================================================================
   Tampilan v2 (hero halaman, filter berikon, kartu statistik, tabel)
   Berlaku global; elemen ikon/ilustrasi ditambahkan app.js (enhance).
   ===================================================================== */
.ais-breadcrumb { padding-top: 18px; font-size: .85rem; }
.ais-breadcrumb .ti-home { font-size: 1rem; vertical-align: -2px; }

/* hero judul halaman */
.ais-pagehead {
  position: relative; align-items: center; min-height: 112px; padding: 20px 24px; margin-bottom: 18px; overflow: hidden;
  border-radius: 18px; border: 1px solid #e1ebfb; background: linear-gradient(100deg, #f7faff 0%, #eef5ff 60%, #e5efff 100%);
}
.ais-pagehead-main { display: flex; align-items: center; gap: 18px; position: relative; z-index: 1; min-width: 0; }
.ais-pagehead-icon {
  flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 1.9rem; color: var(--tblr-primary);
  background: radial-gradient(circle at 30% 25%, #ffffff 0%, #dce9fd 70%); box-shadow: 0 6px 18px rgba(11, 107, 245, .16);
}
.ais-pagehead h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -.01em; }
.ais-pagehead p { font-size: .925rem; }
.ais-pagehead-art { position: absolute; right: 190px; bottom: -6px; height: 128px; pointer-events: none; z-index: 0; }
.ais-pagehead > .ais-toolbar { position: relative; z-index: 1; margin-left: auto; }
.ais-pagehead > .ais-toolbar .btn { height: 44px; border-radius: 12px; padding: 0 18px; font-weight: 600; box-shadow: 0 4px 14px rgba(16, 24, 40, .06); }
.ais-pagehead > .ais-toolbar .btn-soft { background: #fff; color: #0b5bd3; border-color: #fff; }
@media (max-width: 1199.98px) { .ais-pagehead-art { right: 150px; opacity: .55; } }
@media (max-width: 767.98px) { .ais-pagehead-art { display: none; } .ais-pagehead-icon { width: 48px; height: 48px; font-size: 1.4rem; } .ais-pagehead h1 { font-size: 1.35rem; } }

/* kartu & kepala kartu */
.ais-card { border-radius: 16px; border-color: #e6ecf5; box-shadow: 0 2px 10px rgba(16, 24, 40, .04); }
.ais-card + .ais-card, .ais-card + .ais-stats, .ais-stats + .ais-card { margin-top: 18px; }
.ais-card-head { background: #fff; border-bottom: 0; align-items: center; padding: 18px 20px 14px; }
.ais-card-head > div:first-child { display: flex; align-items: center; gap: 14px; }
.ais-head-icon { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.35rem; color: var(--tblr-primary); background: #e8f1ff; }
.ais-card-head h2 { font-size: 1.15rem; }

/* form filter berikon */
.ais-filter .form-label { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; color: #1f2937; margin-bottom: 8px; }
.ais-filter .form-label > .ti { font-size: 1.2rem; color: #374151; }
.ais-filter .form-control, .ais-filter .form-select { min-height: 46px; border-radius: 12px; border-color: #dfe5ee; font-size: .925rem; }
.ais-filter .input-icon .form-control, .ais-filter .input-icon .form-select { padding-left: 2.6rem; }
.ais-filter .input-icon-addon { width: 2.6rem; color: #4b5563; font-size: 1.15rem; }
.ais-filter .btn-primary { min-height: 46px; border-radius: 12px; padding: 0 26px; font-weight: 600; box-shadow: 0 6px 16px rgba(11, 107, 245, .25); }
.ais-filter .ais-checks { display: flex; flex-wrap: wrap; gap: 6px; }
.ais-filter .ais-checks label { margin: 0; padding: 0 12px; height: 46px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #dfe5ee; border-radius: 12px; cursor: pointer; font-size: .875rem; }
.ais-filter .ais-checks label:has(input:checked) { border-color: #9cc0fb; background: #eef5ff; color: #0b5bd3; }

/* kartu statistik */
.ais-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1199.98px) { .ais-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .ais-stats { grid-template-columns: 1fr; } }
.ais-stat {
  --tone: #0b6bf5; --tone-bg: #e3eefe; position: relative; display: flex; align-items: center; gap: 18px; padding: 22px 22px; border-radius: 16px;
  background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--tone-bg) 35%, #fff) 100%); border: 1px solid #e6ecf5; box-shadow: 0 2px 10px rgba(16, 24, 40, .04);
}
.ais-stat .ic { flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 1.8rem; color: var(--tone); background: var(--tone-bg); }
.ais-stat .lbl { font-weight: 600; color: #1f2937; font-size: .925rem; }
.ais-stat .val { font-size: 1.75rem; font-weight: 700; color: #111827; line-height: 1.25; font-variant-numeric: tabular-nums; }
.ais-stat .sub { font-size: .8rem; color: var(--ais-muted); }
.ais-stat .trend { position: absolute; top: 16px; right: 16px; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--tone); background: color-mix(in srgb, var(--tone-bg) 60%, #fff); font-size: 1rem; }
.ais-stat.green { --tone: #12a150; --tone-bg: #dcf5e7; }
.ais-stat.red { --tone: #e5484d; --tone-bg: #fde4e5; }
.ais-stat.violet { --tone: #7c3aed; --tone-bg: #ece4ff; }
.ais-stat.amber { --tone: #d97706; --tone-bg: #fdefd6; }

/* tabel */
.ais-table thead th { font-weight: 600; color: #1f2937; padding: 14px 16px; }
.ais-table tbody td { padding: 14px 16px; }
.ais-no { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 999px; background: #e8f1ff; color: #0b5bd3; font-weight: 600; font-size: .8rem; }
.ais-tag { display: inline-block; padding: 3px 10px; border-radius: 8px; font-size: .72rem; font-weight: 600; line-height: 1.25; background: #e8f1ff; color: #0b5bd3; text-align: center; }
.ais-tag.green { background: #e1f6ea; color: #12803f; } .ais-tag.red { background: #fde8e8; color: #c62828; }
.ais-tag.amber { background: #fdf0d9; color: #b45309; } .ais-tag.violet { background: #efe8ff; color: #6d28d9; } .ais-tag.gray { background: #f1f3f6; color: #4b5563; }
.ais-kebab { width: 34px; height: 34px; display: inline-grid; place-items: center; border: 1px solid #e6ecf5; border-radius: 10px; background: #fff; color: #374151; }
.ais-kebab:hover { background: var(--ais-hover); }
.ais-table tfoot th { background: #f7faff; padding: 14px 16px; font-weight: 700; border-top: 1px solid #dbe6f7; position: sticky; bottom: 0; }

/* kaki tabel & paging */
.ais-foot { padding: 14px 16px; }
.ais-foot .form-select-sm { min-height: 36px; border-radius: 10px; }
.ais-foot .pagination { gap: 6px; }
.ais-foot .page-link { min-width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px !important; border: 1px solid #e6ecf5; color: #374151; padding: 0 8px; }
.ais-foot .page-item.active .page-link { background: var(--tblr-primary); border-color: var(--tblr-primary); color: #fff; box-shadow: 0 4px 10px rgba(11, 107, 245, .3); }
.ais-foot .page-item.disabled .page-link { border-color: transparent; background: transparent; }
.ais-table .ais-wide-col { min-width: 240px; }
.ais-pagehead-art { height: 112px; bottom: 0; }

/* form entri: input lebih lega (baris item tetap ringkas) */
.ais-card .ais-section .form-control, .ais-card .ais-section .form-select { min-height: 42px; border-radius: 12px; border-color: #dfe5ee; }
.ais-card .ais-section textarea.form-control { min-height: 0; }
.ais-lines .form-control, .ais-lines .form-select, .ais-card .ais-lines .form-control, .ais-card .ais-lines .form-select { min-height: 0; border-radius: 8px; }
.ais-card .ais-section .form-label { font-weight: 600; color: #1f2937; }
.ais-filter .btn { min-height: 46px; border-radius: 12px; font-weight: 600; }
.input-icon:has(.is-invalid) ~ .invalid-feedback { display: block; }

/* ---------- baris sub menu + breadcrumb (satu baris) ---------- */
.ais-navrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 24px; border-bottom: 1px solid #e8ecf1; background: #fff; border-radius: 18px 18px 0 0; }
.ais-navrow .ais-subnav { display: flex; align-items: stretch; gap: 4px; padding: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.ais-navrow .ais-subnav::-webkit-scrollbar { display: none; }
.ais-navrow .ais-subnav .btn-sub {
  position: relative; border: 0; background: none; border-radius: 0; color: #64748b; font-size: .95rem; font-weight: 500;
  padding: 18px 18px 16px; white-space: nowrap; display: inline-flex; align-items: center;
}
.ais-navrow .ais-subnav .btn-sub:hover, .ais-navrow .ais-subnav .btn-sub.show { color: #1f2937; background: none; }
.ais-navrow .ais-subnav .btn-sub::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: transparent; transition: background .15s; }
.ais-navrow .ais-subnav .btn-sub:hover::after { background: #d6e4dc; }
.ais-navrow .ais-subnav .btn-sub.current { color: #111827; font-weight: 600; background: none; border: 0; }
.ais-navrow .ais-subnav .btn-sub.current::after { background: #2f9b6b; }
.ais-navrow .ais-breadcrumb { padding: 0; display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: .9rem; color: #94a3b8; flex-shrink: 0; }
.ais-navrow .ais-breadcrumb .ti { font-size: .85rem; }
.ais-navrow .ais-breadcrumb a { color: #94a3b8; }
.ais-navrow .ais-breadcrumb .current { color: #1f2937; font-weight: 500; }
.ais-navrow + .ais-main { padding-top: 22px; }
@media (max-width: 991.98px) {
  .ais-navrow { flex-direction: column; align-items: stretch; gap: 0; padding: 0 16px; border-radius: 0; }
  .ais-navrow .ais-breadcrumb { padding: 0 0 10px; overflow-x: auto; scrollbar-width: none; }
  .ais-navrow .ais-subnav .btn-sub { padding: 14px 12px 12px; }
}

/* baris sub menu: latar gradasi lembut biru -> hijau mint (selaras topbar biru & garis aktif hijau) */
.ais-navrow {
  background: linear-gradient(90deg, #e9f2ff 0%, #eef6ff 45%, #e8f7f0 100%);
  border-bottom: 1px solid #d9e6f5; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
.ais-navrow .ais-subnav .btn-sub { color: #475569; }
.ais-navrow .ais-subnav .btn-sub:hover, .ais-navrow .ais-subnav .btn-sub.show { color: #0b5bd3; background: rgba(255, 255, 255, .55); }
.ais-navrow .ais-subnav .btn-sub.current { color: #0f172a; background: rgba(255, 255, 255, .85); box-shadow: 0 -1px 0 #fff inset; }
.ais-navrow .ais-subnav .btn-sub:hover::after { background: #b7d3c5; }
.ais-navrow .ais-breadcrumb, .ais-navrow .ais-breadcrumb a { color: #64748b; }
.ais-navrow .ais-breadcrumb a:hover { color: #0b5bd3; }
.ais-navrow .ais-breadcrumb .current { color: #0f172a; font-weight: 600; }

/* revisi: gradasi sub menu lebih tegas, font lebih kecil */
.ais-navrow { background: linear-gradient(90deg, #cfe2ff 0%, #dcebff 45%, #ccefdd 100%); border-bottom-color: #bcd3f0; }
.ais-navrow .ais-subnav .btn-sub { font-size: .84rem; padding: 12px 14px 10px; color: #334155; }
.ais-navrow .ais-subnav .btn-sub::after { left: 10px; right: 10px; }
.ais-navrow .ais-subnav .btn-sub.current { background: #fff; color: #0f172a; }
.ais-navrow .ais-subnav .btn-sub:hover, .ais-navrow .ais-subnav .btn-sub.show { background: rgba(255, 255, 255, .6); }
.ais-navrow .ais-breadcrumb { font-size: .8rem; }
.ais-navrow .ais-breadcrumb, .ais-navrow .ais-breadcrumb a { color: #475569; }
.ais-navrow + .ais-main { padding-top: 16px; }

/* revisi: hero judul halaman lebih ringkas */
.ais-pagehead { min-height: 0; padding: 12px 20px; margin-bottom: 14px; border-radius: 14px; }
.ais-pagehead-main { gap: 14px; }
.ais-pagehead-icon { width: 44px; height: 44px; font-size: 1.35rem; box-shadow: 0 4px 12px rgba(11, 107, 245, .14); }
.ais-pagehead h1 { font-size: 1.3rem; }
.ais-pagehead p { font-size: .84rem; margin-top: 2px; }
.ais-pagehead-art { height: 72px; right: 170px; bottom: 0; }
.ais-pagehead > .ais-toolbar .btn { height: 38px; border-radius: 10px; padding: 0 14px; }
@media (max-width: 767.98px) { .ais-pagehead-icon { width: 40px; height: 40px; font-size: 1.2rem; } .ais-pagehead h1 { font-size: 1.15rem; } }

/* tab dalam halaman (.ais-tabs): latar tab aktif gradasi lebih tegas */
.ais-tabs a.active { background: linear-gradient(180deg, #d6e6ff 0%, #b9d4ff 100%); color: #0a4fb8; border-color: #0b5bd3; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); }
.ais-tabs a.active .badge { background: #0b5bd3 !important; }
.ais-tabs a:not(.active):hover { background: #e6effd; }

/* =====================================================================
   Form ringkas (.ais-compact) — field & tombol kecil, jarak rapat.
   Dipakai bersama Tom Select (dropdown cari) & Tabulator (tabel item).
   ===================================================================== */
.ais-compact .ais-section { padding: 14px 16px; }
.ais-compact .row { --tblr-gutter-y: .6rem; --tblr-gutter-x: .9rem; }
.ais-compact .form-label { font-size: .74rem; font-weight: 500; color: #64748b; margin-bottom: 3px; text-transform: none; }
.ais-compact .form-label.required::after { color: #e5484d; }
.ais-compact .form-control, .ais-compact .form-select, .ais-card .ais-compact .form-control, .ais-card .ais-compact .form-select {
  min-height: 0; height: 32px; padding: 4px 10px; font-size: .84rem; border-radius: 7px; border-color: #d9dfe8;
}
.ais-compact .form-select { padding-right: 28px; background-position: right 8px center; }
.ais-compact .form-control[readonly] { background: #f6f8fb; color: #475569; }
.ais-compact .form-control:focus, .ais-compact .form-select:focus { border-color: #7aa7f5; box-shadow: 0 0 0 3px rgba(11, 107, 245, .12); }
.ais-compact .invalid-feedback { font-size: .72rem; margin-top: 2px; }
.ais-compact .btn { height: 32px; padding: 0 12px; font-size: .82rem; font-weight: 500; border-radius: 7px; min-height: 0; box-shadow: none; }
.ais-compact .ais-card-head { padding: 12px 16px 8px; }
.ais-compact .ais-card-head h2 { font-size: .95rem; }
.ais-compact .ais-card-head p { font-size: .76rem; margin-top: 1px; }
.ais-compact .ais-head-icon { width: 32px; height: 32px; border-radius: 8px; font-size: 1.05rem; }
.ais-compact .ais-actionbar { padding: 8px 16px; }
.ais-compact .ais-actionbar .small { font-size: .74rem; }
.ais-compact .ais-card + .ais-card { margin-top: 12px; }
.ais-compact .ais-addbar { display: flex; gap: 8px; align-items: center; padding: 0 16px 10px; flex-wrap: wrap; }
.ais-compact .ais-addbar .ts-wrapper { flex: 1 1 360px; min-width: 240px; }
.ais-compact .ais-addbar .form-control { width: 90px; }
.ais-compact .ais-sum { display: grid; grid-template-columns: auto auto; gap: 2px 18px; justify-content: end; font-size: .82rem; padding: 8px 16px 10px; }
.ais-compact .ais-sum dt { color: #64748b; font-weight: 500; text-align: right; }
.ais-compact .ais-sum dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; min-width: 120px; }
.ais-compact .ais-sum .grand { font-weight: 700; color: #0b5bd3; font-size: .95rem; }

/* Tom Select (tema bootstrap5) disesuaikan */
.ais-compact .ts-wrapper.form-select, .ais-compact .ts-wrapper.form-control { height: auto; padding: 0; border: 0; background: none; }
.ais-compact .ts-wrapper .ts-control { min-height: 32px; padding: 4px 10px; font-size: .84rem; border-radius: 7px; border-color: #d9dfe8; box-shadow: none; }
.ais-compact .ts-wrapper.focus .ts-control { border-color: #7aa7f5; box-shadow: 0 0 0 3px rgba(11, 107, 245, .12); }
.ais-compact .ts-wrapper.disabled .ts-control { background: #f6f8fb; opacity: 1; }
.ts-dropdown { font-size: .84rem; border-radius: 8px; border-color: #d9dfe8; box-shadow: 0 8px 24px rgba(16, 24, 40, .12); z-index: 1060; }
.ts-dropdown .option { padding: 6px 10px; }
.ts-dropdown .active { background: #eaf2ff; color: #0b3f8f; }
.ts-dropdown .ts-sub { color: #64748b; font-size: .76rem; }

/* Tabulator (tema bootstrap5) disesuaikan */
.ais-compact .tabulator { border: 0; border-top: 1px solid #e6ecf5; font-size: .82rem; background: #fff; margin: 0; }
.ais-compact .tabulator .tabulator-header { background: #f3f7fe; border-bottom: 1px solid #dbe6f7; color: #334155; font-weight: 600; }
.ais-compact .tabulator .tabulator-header .tabulator-col { background: #f3f7fe; border-right: 0; }
.ais-compact .tabulator .tabulator-header .tabulator-col .tabulator-col-content { padding: 6px 8px; }
.ais-compact .tabulator .tabulator-row { min-height: 0; border-bottom: 1px solid #eef2f7; }
.ais-compact .tabulator .tabulator-row .tabulator-cell { padding: 6px 8px; border-right: 0; }
.ais-compact .tabulator .tabulator-row.tabulator-row-even { background: #fbfcfe; }
.ais-compact .tabulator .tabulator-row:hover { background: #f5f8fd; }
.ais-compact .tabulator .tabulator-cell.tabulator-editable { background: #fffdf3; cursor: text; }
.ais-compact .tabulator .tabulator-cell.tabulator-editing { border: 1px solid #7aa7f5; padding: 0; }
.ais-compact .tabulator .tabulator-cell.tabulator-editing input { padding: 5px 7px; font-size: .82rem; }
.ais-compact .tabulator .tabulator-footer { background: #f8fafc; border-top: 1px solid #e6ecf5; }
.ais-compact .tabulator .tabulator-calcs-bottom .tabulator-cell { font-weight: 700; background: #f3f7fe; }
.ais-compact .tabulator .tabulator-placeholder span { color: #94a3b8; font-weight: 400; font-size: .84rem; }
.ais-compact .tab-del { border: 0; background: none; color: #ef4444; padding: 0 4px; line-height: 1; }
.ais-compact .tab-del:hover { color: #b91c1c; }
.ais-compact .ais-section .form-control, .ais-compact .ais-section .form-select { min-height: 0; height: 32px; border-radius: 7px; }
.ais-compact .ais-section .form-label { font-weight: 500; color: #64748b; }
.ais-compact fieldset.ais-section { margin: 0; min-width: 0; }
/* revisi Tom Select & Tabulator */
.ais-compact .ts-wrapper .ts-control { border: 1px solid #d9dfe8; background: #fff; display: flex; align-items: center; }
.ais-compact .ts-wrapper.single .ts-control::after { border-color: #64748b transparent transparent; }
.ts-wrapper .ts-control .item .ts-sub { margin-left: 6px; }
.ts-dropdown, .ts-dropdown .ts-dropdown-content { background: #fff; }
.ts-dropdown .option .ts-sub { margin-top: 1px; }
.ais-compact .tabulator .tabulator-header .tabulator-col .tabulator-col-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .78rem; }
.ais-compact .tabulator .tabulator-header .tabulator-col.tabulator-col-sorter-element:hover { background: #e8f0fd; }

/* ringkas: kartu statistik, cari, kebab, paging Tabulator */
.ais-compact .ais-stats { gap: 12px; margin-top: 12px; }
.ais-compact .ais-stats + .ais-card { margin-top: 12px; }
.ais-compact .ais-stat { padding: 12px 14px; gap: 12px; border-radius: 12px; }
.ais-compact .ais-stat .ic { width: 40px; height: 40px; font-size: 1.2rem; }
.ais-compact .ais-stat .lbl { font-size: .76rem; font-weight: 500; color: #64748b; }
.ais-compact .ais-stat .val { font-size: 1.2rem; line-height: 1.3; }
.ais-compact .ais-stat .sub { font-size: .7rem; }
.ais-compact .ais-card-head .input-icon .form-control { height: 32px; font-size: .84rem; border-radius: 7px; padding-left: 2.1rem; }
.ais-compact .ais-card-head .input-icon .input-icon-addon { width: 2.1rem; font-size: .95rem; }
.ais-compact .ais-kebab-sm, .ais-compact .ais-kebab { width: 28px; height: 28px; border-radius: 7px; }
.ais-compact .tabulator .tabulator-cell .dropdown { line-height: 1; }
.ais-compact .tabulator .tabulator-footer { padding: 6px 10px; font-size: .78rem; color: #64748b; }
.ais-compact .tabulator .tabulator-footer .tabulator-page { border-radius: 6px; border: 1px solid #e2e8f0; padding: 2px 9px; margin: 0 2px; background: #fff; color: #334155; }
.ais-compact .tabulator .tabulator-footer .tabulator-page.active { background: var(--tblr-primary); border-color: var(--tblr-primary); color: #fff; }
.ais-compact .tabulator .tabulator-footer .tabulator-page-size { border-radius: 6px; border: 1px solid #e2e8f0; padding: 2px 6px; font-size: .78rem; }
.ais-compact .tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-content { padding-right: 22px; }

/* =====================================================================
   Ringkas global (main.ais-compact) — semua halaman lama ikut ringkas.
   ===================================================================== */
/* tabel lama */
.ais-compact .ais-table { font-size: .82rem; }
.ais-compact .ais-table thead th { padding: 7px 10px; font-size: .78rem; font-weight: 600; color: #334155; background: #f3f7fe; }
.ais-compact .ais-table tbody td { padding: 7px 10px; }
.ais-compact .ais-table tfoot th { padding: 7px 10px; }
.ais-compact .ais-table tbody tr:nth-child(even) { background: #fbfcfe; }
.ais-compact .ais-table tbody tr:hover { background: #f5f8fd; }
.ais-compact .ais-table .form-control, .ais-compact .ais-table .form-select { height: 28px; padding: 2px 7px; font-size: .8rem; }
.ais-compact .ais-no { min-width: 22px; height: 22px; font-size: .72rem; padding: 0 5px; }
.ais-compact .ais-tag { padding: 2px 8px; font-size: .7rem; border-radius: 6px; }
.ais-compact .st { padding: 2px 8px; font-size: .7rem; }
.ais-compact .ais-table-wrap { max-height: 640px; }
/* kepala kartu, cari, paging */
.ais-compact .ais-card-head .form-control, .ais-compact .ais-card-head .form-select { height: 32px; min-height: 0; font-size: .84rem; border-radius: 7px; }
.ais-compact .ais-card-head .input-icon .form-control { padding-left: 2.1rem; }
.ais-compact .ais-card-head .input-icon .input-icon-addon { width: 2.1rem; font-size: .95rem; }
.ais-compact .ais-card-head .btn, .ais-compact .ais-viewswitch button { height: 32px; padding: 0 10px; font-size: .8rem; }
.ais-compact .ais-foot { padding: 7px 12px; font-size: .78rem; }
.ais-compact .ais-foot .form-select-sm { height: 28px; min-height: 0; font-size: .78rem; padding: 2px 24px 2px 8px; }
.ais-compact .ais-foot .pagination { gap: 3px; }
.ais-compact .ais-foot .page-link { min-width: 28px; height: 28px; border-radius: 6px !important; font-size: .78rem; padding: 0 6px; }
/* tab dalam halaman */
.ais-compact .ais-tabs { margin-bottom: 12px; }
.ais-compact .ais-tabs a { padding: 7px 12px; font-size: .82rem; }
/* filter berikon (laporan) jadi ringkas */
.ais-compact .ais-filter .form-label { font-size: .74rem; font-weight: 500; color: #64748b; gap: 5px; margin-bottom: 3px; }
.ais-compact .ais-filter .form-label > .ti { font-size: .9rem; color: #94a3b8; }
.ais-compact .ais-filter .input-icon .form-control, .ais-compact .ais-filter .input-icon .form-select { padding-left: 2rem; }
.ais-compact .ais-filter .input-icon-addon { width: 2rem; font-size: .9rem; }
.ais-compact .ais-filter .btn, .ais-compact .ais-filter .btn-primary { height: 32px; min-height: 0; padding: 0 14px; border-radius: 7px; box-shadow: none; font-size: .82rem; }
.ais-compact .ais-filter .ais-checks label { height: 32px; padding: 0 9px; border-radius: 7px; font-size: .8rem; }
.ais-compact .ais-stat .trend { display: none; }
/* form entri lama: section title, actionbar, item baris */
.ais-compact .ais-section > .ais-section-title { margin: -14px -16px 12px; padding: 7px 16px; font-size: .72rem; }
.ais-compact .ais-actionbar .btn { height: 32px; }
.ais-compact .ais-lines td { padding: 5px 8px !important; }
.ais-compact .ais-lines .form-control, .ais-compact .ais-lines .form-select { height: 28px; font-size: .8rem; }
.ais-compact textarea.form-control, .ais-compact .ais-section textarea.form-control { height: auto; min-height: 56px; }
.ais-compact .input-group .btn { height: 32px; }
.ais-compact .form-check-input { width: 15px; height: 15px; margin-top: .2em; }
/* modal */
.ais-compact .modal-header { padding: 10px 16px; }
.ais-compact .modal-title { font-size: .95rem; }
.ais-compact .modal-body { padding: 14px 16px; font-size: .84rem; }
.ais-compact .modal-footer { padding: 8px 16px; }
.ais-compact .modal-body.p-0 { padding: 0; }
/* dropdown aksi & lookup */
.ais-compact .dropdown-menu { font-size: .82rem; }
.ais-compact .dropdown-item { padding: 6px 12px; }
.ais-compact .alert { padding: 8px 12px; font-size: .84rem; }
.ais-compact .ais-table .btn, .ais-compact .ais-table .btn-sm { height: 26px; padding: 0 8px; font-size: .74rem; border-radius: 6px; }
.ais-compact .ais-table .avatar { width: 28px; height: 28px; font-size: .68rem; }

/* header 10 modul (+ Sales & Marketing): ukuran penuh mulai 1920px; di bawahnya rapat agar Konfigurasi tetap terlihat */
@media (max-width: 1599.98px) { .ais-topbar .ais-pill, .ais-topbar .ais-pill:hover { padding: 10px 7px 12px; gap: 4px; font-size: .8rem; } .ais-topbar .ais-pill .ti { font-size: .95rem; } }
@media (max-width: 1399.98px) { .ais-topbar .ais-pill, .ais-topbar .ais-pill:hover { padding: 10px 5px 12px; gap: 3px; font-size: .78rem; } .ais-topbar .ais-pill .ti { font-size: .9rem; } .ais-topbar .ais-search kbd { display: none; } }

/* font menu header sedikit lebih besar (permintaan user) */
.ais-topbar .ais-pill, .ais-topbar .ais-pill:hover { font-size: .9rem; }
.ais-topbar .ais-pill .ti { font-size: 1.1rem; }
@media (max-width: 1599.98px) { .ais-topbar .ais-pill, .ais-topbar .ais-pill:hover { font-size: .86rem; } .ais-topbar .ais-pill .ti { font-size: 1rem; } }
@media (max-width: 1399.98px) { .ais-topbar .ais-pill, .ais-topbar .ais-pill:hover { font-size: .82rem; } .ais-topbar .ais-pill .ti { font-size: .95rem; } }
@media (min-width: 2200px) { .ais-topbar .ais-pill, .ais-topbar .ais-pill:hover { font-size: .95rem; } }

/* ---------- kolom aksi (⋮) selalu tampil di kanan (freeze) ----------
   Tabulator: kolom dari AIS.actCol() (frozen + class ais-act-col). Tabel HTML .ais-table di dalam .ais-table-wrap: sel terakhir berisi .ais-kebab. */
.tabulator .tabulator-col.ais-act-col,
.tabulator .tabulator-row .tabulator-cell.ais-act-col { border-left: 1px solid #e6ecf5 !important; box-shadow: -8px 0 10px -8px rgba(15, 23, 42, .22); }
.tabulator .tabulator-row .tabulator-cell.ais-act-col { background: inherit; }
.tabulator .tabulator-row .tabulator-cell.ais-act-col:has(.dropdown-menu.show) { z-index: 1000; }
.tabulator .tabulator-row { background: #fff; }
.ais-table-wrap .ais-table tbody td:last-child:has(.ais-kebab),
.ais-table-wrap .ais-table:has(tbody td:last-child .ais-kebab) thead th:last-child {
  position: sticky; right: 0; z-index: 2; background: #fff; border-left: 1px solid #e6ecf5; box-shadow: -8px 0 10px -8px rgba(15, 23, 42, .22);
}
.ais-table-wrap .ais-table:has(tbody td:last-child .ais-kebab) thead th:last-child { z-index: 3; background: inherit; }
.ais-table-wrap .ais-table tbody tr:hover td:last-child:has(.ais-kebab) { background: var(--ais-hover); }

/* ---------- bilah geser tabel selalu terlihat (macOS menyembunyikan scrollbar overlay) ---------- */
.tabulator .tabulator-tableholder::-webkit-scrollbar, .ais-table-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
.tabulator .tabulator-tableholder::-webkit-scrollbar-track, .ais-table-wrap::-webkit-scrollbar-track { background: #f1f5f9; }
.tabulator .tabulator-tableholder::-webkit-scrollbar-thumb, .ais-table-wrap::-webkit-scrollbar-thumb { background: #c3cfdf; border-radius: 6px; border: 2px solid #f1f5f9; }
.tabulator .tabulator-tableholder::-webkit-scrollbar-thumb:hover, .ais-table-wrap::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ---------- kartu statistik non-dashboard: gradasi pastel lembut + gelombang + ikon besar (AIS: decorateStats). Dashboard Finance memakai komponen sendiri (.fd-k) ---------- */
.ais-stat { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30C60 8 110 44 180 26S280 6 320 24V60H0Z' fill='%232f6fe4' fill-opacity='.09'/%3E%3Cpath d='M0 44C70 26 130 58 200 40S290 28 320 40V60H0Z' fill='%232f6fe4' fill-opacity='.13'/%3E%3C/svg%3E") left bottom / 100% 42px no-repeat, linear-gradient(135deg, #e8f0ff, #f6faff); }
.ais-stat.violet { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 60' preserveAspectRatio='none'%3E%3Cpath d='M0 18C50 40 110 4 170 24S270 44 320 14V60H0Z' fill='%236f4bd8' fill-opacity='.09'/%3E%3Cpath d='M0 40C60 52 120 26 190 42S280 50 320 34V60H0Z' fill='%236f4bd8' fill-opacity='.13'/%3E%3C/svg%3E") left bottom / 100% 42px no-repeat, linear-gradient(135deg, #efeafe, #f9f7ff); }
.ais-stat.green { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 60' preserveAspectRatio='none'%3E%3Cpath d='M0 40C60 36 110 30 160 22S270 18 320 4V60H0Z' fill='%232e9e6b' fill-opacity='.09'/%3E%3Cpath d='M0 50C70 48 120 44 180 38S280 32 320 22V60H0Z' fill='%232e9e6b' fill-opacity='.13'/%3E%3C/svg%3E") left bottom / 100% 42px no-repeat, linear-gradient(135deg, #e6f6ee, #f5fcf8); }
.ais-stat.amber { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 60' preserveAspectRatio='none'%3E%3Cpath d='M0 34C70 44 100 8 170 16S280 40 320 12V60H0Z' fill='%23ef9234' fill-opacity='.09'/%3E%3Cpath d='M0 48C80 52 110 30 180 36S280 52 320 32V60H0Z' fill='%23ef9234' fill-opacity='.13'/%3E%3C/svg%3E") left bottom / 100% 42px no-repeat, linear-gradient(135deg, #fff0e1, #fffaf3); }
.ais-stat.red { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 60' preserveAspectRatio='none'%3E%3Cpath d='M0 26C40 6 90 6 140 28S260 48 320 20V60H0Z' fill='%23e5484d' fill-opacity='.09'/%3E%3Cpath d='M0 46C50 30 110 34 170 46S270 54 320 38V60H0Z' fill='%23e5484d' fill-opacity='.13'/%3E%3C/svg%3E") left bottom / 100% 42px no-repeat, linear-gradient(135deg, #feeceb, #fff7f6); }
.ais-stat { overflow: hidden; border-color: #e8edf5; }
.ais-stat > :not(.ais-stat-big) { position: relative; z-index: 1; }
.ais-stat > .trend { position: absolute; }
.ais-stat .ic { background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .08); }
.ais-stat .sub { color: #475569; }
.ais-stat-big { position: absolute; right: 14px; top: 10px; font-size: 58px; line-height: 1; color: var(--tone); opacity: .12; transform: rotate(-10deg); pointer-events: none; }