/* ═══ KlinikTech Button System v3 — tonal pill (Terhubung model) ═══ */

:root {
  --color-success: #4CCB8A;
  --color-primary: #5BA8FF;
  --color-info: #56C5E8;
  --color-danger: #FF6B6B;
  --color-warning: #FFD166;
  --color-warning-text: #FFD166;
  --color-neutral: var(--text2, #8fa3c8);

  --btn-success-bg: rgba(76, 203, 138, 0.11);
  --btn-success-border: rgba(76, 203, 138, 0.34);
  --btn-primary-bg: rgba(91, 168, 255, 0.11);
  --btn-primary-border: rgba(91, 168, 255, 0.34);
  --btn-info-bg: rgba(86, 197, 232, 0.11);
  --btn-info-border: rgba(86, 197, 232, 0.34);
  --btn-danger-bg: rgba(255, 107, 107, 0.11);
  --btn-danger-border: rgba(255, 107, 107, 0.34);
  --btn-warning-bg: rgba(255, 209, 102, 0.12);
  --btn-warning-border: rgba(255, 209, 102, 0.38);
  --btn-neutral-bg: rgba(143, 163, 200, 0.08);
  --btn-neutral-border: var(--border2, rgba(255, 255, 255, 0.15));

  --btn-radius: 9999px;
  --btn-py: var(--control-py, 4px);
  --btn-px: var(--control-px, 10px);
  --btn-py-lg: var(--control-py-lg, 5px);
  --btn-px-lg: var(--control-px-lg, 12px);
  --btn-h: var(--control-h, 26px);
  --btn-h-lg: var(--control-h-lg, 30px);
  --btn-gap: var(--control-gap, 5px);
  --btn-fs: var(--control-fs, 11px);
  --btn-fs-lg: var(--control-fs-md, 12px);
  --btn-fw: 500;
  --btn-icon: var(--control-icon, 12px);
  --btn-shadow: none;
  --btn-active-filter: brightness(0.92);

  --color-outline-border: var(--border2, rgba(255, 255, 255, 0.15));
  --toolbar-gap: var(--control-gap, 5px);
  --toolbar-gap-mobile: var(--control-gap, 5px);
}

[data-theme="light"] {
  --color-success: #15803d;
  --color-primary: #1d4ed8;
  --color-info: #0e7490;
  --color-danger: #b91c1c;
  --color-warning: #b45309;
  --color-warning-text: #92400e;
  --color-neutral: var(--text2, #334155);
  --btn-success-bg: rgba(22, 163, 74, 0.12);
  --btn-success-border: rgba(22, 163, 74, 0.34);
  --btn-primary-bg: rgba(37, 99, 235, 0.12);
  --btn-primary-border: rgba(37, 99, 235, 0.34);
  --btn-info-bg: rgba(14, 116, 144, 0.1);
  --btn-info-border: rgba(14, 116, 144, 0.32);
  --btn-danger-bg: rgba(185, 28, 28, 0.1);
  --btn-danger-border: rgba(185, 28, 28, 0.32);
  --btn-warning-bg: rgba(180, 83, 9, 0.12);
  --btn-warning-border: rgba(180, 83, 9, 0.34);
  --btn-neutral-bg: rgba(15, 23, 42, 0.04);
  --btn-neutral-border: var(--border2);
}

/* ── Toolbars ── */
.btn-tabs,
.app-toolbar,
.ph-actions,
.app-btn-group,
.row-acts,
.plat-row-acts,
.cust-row-acts,
.inv-row-acts,
.gconfirm-footer,
#m-foot,
.cust-detail-footer,
.cust-danger-group,
.onu-act-wrap,
.inv-bill-row,
.skr-actions,
.tkt-actions,
.onu-actions,
.tech-card .acts,
.map-actions,
.tkt-toolbar,
.alm-toolbar,
.solt-actions,
.fg-actions,
.mt-setup-actions,
.nw-nas-form .fg-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--toolbar-gap);
}

.btn-tabs { margin-bottom: 14px; }

.app-toolbar--compact,
.row-acts,
.plat-row-acts,
.btn-tabs--compact { gap: var(--toolbar-gap); }

.app-toolbar > .app-btn,
.app-toolbar > .btn,
.app-btn-group > .app-btn,
.app-btn-group > .btn,
.ph-actions > .app-btn,
.ph-actions > .btn,
.row-acts > .app-btn,
.row-acts > .btn,
.btn-tabs > .app-btn,
.btn-tabs > .btn,
#m-foot > .app-btn,
#m-foot > .btn,
.gconfirm-footer > .app-btn,
.gconfirm-footer > .btn,
.onu-act-wrap > .app-btn,
.onu-act-wrap > .btn,
.card .ch > .app-btn,
.card .ch > .btn {
  margin: 0 !important;
}

.app-toolbar select,
.app-toolbar input[type="text"],
.app-toolbar input[type="search"],
.app-toolbar input:not([type]),
.ph-actions select,
.ph-actions input[type="text"],
.ph-actions input[type="search"] {
  min-height: var(--btn-h);
  height: var(--btn-h);
  padding: var(--btn-py) var(--btn-px);
  font-size: var(--btn-fs);
  border-radius: var(--r-sm, 8px);
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text);
  box-sizing: border-box;
  line-height: 1.2;
}

@media (max-width: 720px) {
  .app-toolbar,
  .ph-actions,
  .app-btn-group,
  .btn-tabs { gap: var(--toolbar-gap-mobile); }
}

/* ── Base pill button ── */
.app-btn,
button.app-btn,
a.app-btn,
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  min-height: var(--btn-h);
  height: auto;
  padding: var(--btn-py) var(--btn-px);
  border-radius: var(--btn-radius);
  border: 1px solid var(--btn-neutral-border);
  font-family: var(--font);
  font-size: var(--btn-fs);
  font-weight: var(--btn-fw);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  background: var(--btn-neutral-bg);
  color: var(--text2);
  box-shadow: none;
  transition: none;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  box-sizing: border-box;
  margin: 0;
}

.app-btn i,
.app-btn .ti,
.btn i,
.btn .ti {
  font-size: var(--btn-icon);
  line-height: 1;
  flex-shrink: 0;
  pointer-events: none;
  color: currentColor;
}

/* Dot icon — same as status-pill */
.app-btn i.ti-circle-filled,
.app-btn .bdot,
.btn i.ti-circle-filled,
.btn .bdot,
.app-btn .status-dot,
.btn .status-dot {
  width: 6px;
  height: 6px;
  min-width: 6px;
  font-size: 0;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}

.app-btn:focus { outline: none; }

.app-btn:focus-visible,
.btn:focus-visible {
  outline: 2px solid rgba(91, 168, 255, 0.4);
  outline-offset: 2px;
}

.app-btn:hover,
.btn:hover {
  filter: none;
  transform: none;
  box-shadow: none;
}

.app-btn:active:not(:disabled):not(.is-disabled):not(.is-loading),
.btn:active:not(:disabled) {
  filter: var(--btn-active-filter);
}

.app-btn:disabled,
.app-btn.is-disabled,
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.app-btn.is-loading { pointer-events: none; }

.app-btn.is-loading .app-btn__label,
.app-btn.is-loading > i:not(.app-btn__spinner i) { opacity: 0; }

.app-btn__spinner {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: var(--btn-icon);
  animation: app-btn-spin 0.75s linear infinite;
}

.app-btn.is-loading .app-btn__spinner { display: inline-flex; }

@keyframes app-btn-spin {
  to { transform: rotate(360deg); }
}

/* ── Sizes (status-pill scale) ── */
.app-btn--lg,
.btn.blg {
  min-height: var(--btn-h-lg);
  padding: var(--btn-py-lg) var(--btn-px-lg);
  font-size: var(--btn-fs-lg);
}

.app-btn--lg i,
.app-btn--lg .ti { font-size: calc(var(--btn-icon) + 1px); }

.app-btn--icon-only,
.btn.bic {
  min-width: var(--btn-h);
  width: var(--btn-h);
  height: var(--btn-h);
  min-height: var(--btn-h);
  padding: 0;
}

.app-btn--icon-only.app-btn--lg,
.btn.bic.blg {
  min-width: var(--btn-h-lg);
  width: var(--btn-h-lg);
  height: var(--btn-h-lg);
  min-height: var(--btn-h-lg);
}

/* Modal footer — keep text buttons pill-shaped (not icon-only circle) */
#m-foot .app-btn,
#m-foot .btn {
  min-width: auto;
  width: auto;
  min-height: var(--btn-h);
  padding: var(--btn-py) var(--btn-px);
}

#m-foot .app-btn--icon-only {
  min-width: auto;
  width: auto;
  padding: var(--btn-py) var(--btn-px);
}

.app-btn--block { width: 100%; }

/* ── Tonal variants (Terhubung model) ── */
.app-btn--filled.app-btn--success,
.app-btn--success:not(.app-btn--ghost),
.app-btn--outline.app-btn--success,
.bts {
  background: var(--btn-success-bg);
  border-color: var(--btn-success-border);
  color: var(--color-success);
  box-shadow: none;
}

.app-btn--filled.app-btn--primary,
.app-btn--primary:not(.app-btn--ghost):not(.app-btn--success):not(.app-btn--info):not(.app-btn--danger):not(.app-btn--warning):not(.app-btn--neutral),
.app-btn--outline.app-btn--primary,
.btp, .bb, .bp {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-border);
  color: var(--color-primary);
  box-shadow: none;
}

.app-btn--filled.app-btn--info,
.app-btn--info:not(.app-btn--ghost),
.app-btn--outline.app-btn--info {
  background: var(--btn-info-bg);
  border-color: var(--btn-info-border);
  color: var(--color-info);
  box-shadow: none;
}

.app-btn--filled.app-btn--danger,
.app-btn--danger:not(.app-btn--ghost),
.app-btn--outline.app-btn--danger,
.btd, .btr {
  background: var(--btn-danger-bg);
  border-color: var(--btn-danger-border);
  color: var(--color-danger);
  box-shadow: none;
}

.app-btn--filled.app-btn--warning,
.app-btn--warning:not(.app-btn--ghost),
.app-btn--outline.app-btn--warning,
.bti {
  background: var(--btn-warning-bg);
  border-color: var(--btn-warning-border);
  color: var(--color-warning);
  box-shadow: none;
}

.app-btn--filled.app-btn--neutral,
.app-btn--outline,
.app-btn--secondary,
.app-btn--ghost.app-btn--neutral,
.btg, .btp2, .bto {
  background: var(--btn-neutral-bg);
  border-color: var(--btn-neutral-border);
  color: var(--text2);
  box-shadow: none;
}

/* Ghost — minimal tonal */
.app-btn--ghost:not(.app-btn--icon-only) {
  background: transparent;
  border-color: transparent;
  color: var(--text2);
  box-shadow: none;
}

.app-btn--ghost.app-btn--icon-only {
  background: var(--btn-neutral-bg);
  border-color: var(--btn-neutral-border);
  color: var(--text2);
  box-shadow: none;
}

/* Tab active */
.app-btn.active,
.btn-tabs .app-btn.active,
.btn-tabs .btn.active {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-border);
  color: var(--color-primary);
  box-shadow: none;
}

/* Legacy soft aliases → tonal */
.btn-soft-sky {
  background: var(--btn-primary-bg) !important;
  border-color: var(--btn-primary-border) !important;
  color: var(--color-primary) !important;
  box-shadow: none !important;
}

.btn-soft-teal {
  background: var(--btn-info-bg) !important;
  border-color: var(--btn-info-border) !important;
  color: var(--color-info) !important;
  box-shadow: none !important;
}

.btn-soft-mint {
  background: var(--btn-success-bg) !important;
  border-color: var(--btn-success-border) !important;
  color: var(--color-success) !important;
  box-shadow: none !important;
}

.btn-soft-slate {
  background: var(--btn-neutral-bg) !important;
  border-color: var(--btn-neutral-border) !important;
  color: var(--text2) !important;
  box-shadow: none !important;
}

.btn-soft-rose {
  background: var(--btn-danger-bg) !important;
  border-color: var(--btn-danger-border) !important;
  color: var(--color-danger) !important;
  box-shadow: none !important;
}

.btn-act { border-radius: var(--btn-radius); gap: var(--btn-gap); box-shadow: none !important; }

/* SOLT action buttons */
.solt-act-reboot,
.solt-act-resync {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-border);
  color: var(--color-primary);
}

.solt-act-enable {
  background: var(--btn-success-bg);
  border-color: var(--btn-success-border);
  color: var(--color-success);
}

.solt-act-disable {
  background: var(--btn-danger-bg);
  border-color: var(--btn-danger-border);
  color: var(--color-danger);
}

/* Topbar icon */
#topbar .tbb.app-btn,
#topbar .app-btn--ghost.app-btn--icon-only,
#topbar .tbb {
  min-width: var(--btn-h);
  width: var(--btn-h);
  height: var(--btn-h);
  background: var(--btn-neutral-bg);
  border-color: var(--btn-neutral-border);
  border-radius: var(--btn-radius);
  color: var(--text2);
  box-shadow: none;
}

.onu-act-wrap {
  flex-wrap: nowrap !important;
  justify-content: flex-start;
  align-items: center;
}

.onu-tbl .onu-col-act .onu-act-wrap .app-btn,
.onu-tbl .onu-col-act .onu-act-wrap .btn {
  flex-shrink: 0;
}

.onu-tbl .onu-col-act {
  white-space: nowrap;
}

/* Table cells */
td.td-acts,
td.cust-row-acts,
td.inv-row-acts { vertical-align: middle; }

td.td-acts > .btn,
td[style*="white-space:nowrap"] > .btn { margin: 0; }

td[style*="white-space:nowrap"]:not(:has(.app-toolbar)) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--toolbar-gap);
  align-items: center;
}

.inv-bill-row {
  align-items: center;
  padding: 8px;
  background: var(--surface);
  border-radius: var(--r-sm);
  margin-bottom: 6px;
  font-size: var(--btn-fs);
}

.inv-bill-row__main { flex: 1; min-width: 120px; }

.gconfirm-footer { margin-top: 16px; justify-content: flex-end; }
#m-foot { margin-top: 16px; justify-content: flex-end; }

.cust-detail-footer {
  padding: 10px 20px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface2);
  flex-shrink: 0;
}

.cust-detail-footer .btn-spacer { flex: 1; min-width: 8px; }

.solt-actions {
  padding: 20px 24px;
  border-top: 1px solid var(--border);
  justify-content: center;
  background: var(--surface2);
}

.solt-actions .app-btn,
.solt-actions .btn { min-width: 110px; }

td.td-acts .app-toolbar,
td.td-acts .row-acts,
td[style*="display:flex"] { gap: var(--toolbar-gap) !important; }