/* Pengaturan rebuild — Bisnis › Umum and Koneksi (settings.js). Page styles on top of pg.css / pg-app.css; this team owns this file. */

/* ---------- Shared by both pages ---------- */
/* A row an action changed washes once (settings.js markFreshRow → freshClass), as the old .st-fresh did. */
.pg-row.pg-biz-fresh, .st-row.pg-biz-fresh, .pg-biz-roas.pg-biz-fresh { animation: pg-biz-fresh 1.2s ease-out both; }
.pg-biz-roas.pg-biz-fresh { animation-name: koneksi-fresh; }
@keyframes pg-biz-fresh { 0%, 35% { background-color: #fff5d6; } 100% { background-color: transparent; } }
/* A row focused by the page after an action (Muat lebih banyak, a role that reads only) shows where focus is. */
.pg-row[tabindex="-1"]:focus { outline: none; }
.pg-row[tabindex="-1"]:focus-visible { outline: 2px solid var(--pg-blue); outline-offset: -2px; }
/* A link-button inside a fact or a row's line reads at the line's size. */
.pg-fact .pg-btn.pg-link { min-height: 0; font-size: inherit; vertical-align: baseline; }

/* ---------- Umum ---------- */
/* The tile in the Ikon row and in Teks singkat: the tile's own tint over the mark's grey square. */
.pg-row-mark.pg-tile { font-size: 11px; }
#business-tile .pg-icon { width: 14px; height: 14px; margin-left: -2px; }
/* Teks singkat: the tile as it will look, beside the field. */
.pg-biz-tile-field { display: flex; align-items: flex-start; gap: 14px; }
.pg-biz-tile-preview { display: block; flex: none; padding-top: 25px; }
.pg-biz-tile-field .pg-field { flex: 1 1 auto; min-width: 0; }
.pg-biz-tile-field .pg-input { max-width: 120px; }
/* The original Target ROAS card; only this page restores the round account markers and unset thumb. */
.pg-biz-roas .lk-marker { width: 14px; height: 14px; border: 2.5px solid #fff; border-radius: 50%; box-shadow: 0 1px 3px rgb(23 32 51 / .3); }
.pg-biz-roas .lk-scale.is-unset .lk-range::-webkit-slider-thumb { opacity: 0; }
.pg-biz-roas .lk-scale.is-unset .lk-range::-moz-range-thumb { opacity: 0; }
.pg-biz-roas .lk-scale.is-unset .lk-range:focus-visible::-webkit-slider-thumb { opacity: 1; }
.pg-biz-roas .lk-scale.is-unset .lk-range:focus-visible::-moz-range-thumb { opacity: 1; }

/* ---------- Koneksi ---------- */
.pg-legacy[data-settings-page="koneksi"] .st-koneksi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.pg-legacy[data-settings-page="koneksi"] .st-koneksi > .st-section { min-width: 0; margin-top: 0; }
.st-koneksi .st-row-mark .pg-brand { width: 20px; height: 20px; }
.st-koneksi .st-row[tabindex="-1"]:focus { outline: none; }
.st-koneksi .st-row[tabindex="-1"]:focus-visible { outline: 2px solid var(--pg-blue); outline-offset: -2px; }
.st-koneksi .st-row-control { flex-wrap: wrap; }
/* Keep the bands' existing heights after their add controls move to the list ends. */
.st-koneksi .st-section.has-inbox-add > .st-section-head { min-height: 57px; }
.st-koneksi .st-card-head.has-add-row { min-height: 62px; }
.st-koneksi .pg-biz-card.has-slot-add > .pg-card-sub { min-height: 47px; }
/* The old add-row styling supplies the round plus, dashed rule and full-width hover. */
.st-koneksi .lk-add[aria-disabled="true"]:not([aria-busy="true"]) { opacity: .5; cursor: default; background: #fff; }
.st-koneksi .lk-add[aria-disabled="true"] .lk-add-plus { background: #edf3fb; color: #2f62a4; transform: none; }
/* A card's band (Meta Ads, Google Ads) draws its top rule against the rows above it (pg.css .pg-row + .pg-card-sub). */
.pg-biz-card .pg-card-sub { position: relative; }
.pg-biz-card .pg-card-sub-copy { min-width: 0; }
.pg-biz-card .pg-meter { flex-wrap: wrap; row-gap: 4px; min-width: 0; }
.pg-biz-card .pg-meter i { flex: 0 1 auto; max-width: min(127px, 100%); }
.pg-biz-slot-action { display: flex; flex: none; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
/* The connection rows: the state chip, then the row's own actions. */
.pg-row.pg-biz-conn .pg-row-side { flex-wrap: wrap; justify-content: flex-end; }
.pg-chip.pg-biz-wait { gap: 6px; }
.pg-chip.pg-biz-wait .pg-icon { width: 13px; height: 13px; }
.pg-chip.pg-biz-wait:focus { outline: none; }
.pg-chip.pg-biz-wait:focus-visible { outline: 2px solid var(--pg-blue); outline-offset: 2px; }
/* A sync older than the spend refresh interval reads faint. */
.pg-row.pg-biz-stale .pg-row-text { color: var(--pg-faint); }
/* The refusal a window met with every slot used, above its channel's rows. */
.pg-biz-refusal { padding: 12px 20px 2px; }
.pg-biz-refusal:focus { outline: none; }
/* Muat lebih banyak under a long list. */
.pg-row.pg-biz-more { justify-content: center; min-height: 0; padding: 8px 20px; }
/* The banners, a title and Hubungkan lagi: WhatsApp red (pg.css .pg-banner), an ad platform amber; their button keeps its own look. */
.pg-banner .pg-btn span { display: inline; margin: 0; color: inherit; font-size: inherit; }
.pg-banner .pg-btn { flex: none; }
.pg-banner.pg-biz-warn { border-color: #f0dcb4; border-left-color: #c98a16; background: #fff8ec; color: #7c4a0b; }
.pg-banner + .pg-banner { margin-top: -8px; }
/* The dialogs' options and callouts. */
.pg-biz-options .pg-option .pg-row-mark { width: 32px; height: 32px; }
.pg-biz-options .pg-option .pg-row-copy { display: grid; gap: 1px; }
.pg-biz-callout { margin-top: 14px; }
.pg-dlg-foot .pg-role-note { max-width: 34ch; }

/* ---------- The connect flow under Koneksi (WhatsApp's notice, Google's account choice) ---------- */
.pg-biz-flow.lite-setup { display: block; min-height: 0; padding: 0; background: transparent; }
.pg-biz-flow .lacak-connect-whatsapp { width: auto; max-width: 640px; margin: 0; padding: 0; }
.pg-biz-flow .wa-setup-card { margin-top: 0; }
.pg-biz-flow .onboarding-shell { width: 100%; margin: 0; padding: 0; }

@media (max-width: 1180px) {
  .pg-legacy[data-settings-page="koneksi"] .st-koneksi { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .pg-biz-roas { padding: 18px 16px; }
  .pg-biz-refusal { padding: 12px 16px 2px; }
  .pg-row.pg-biz-more { padding: 8px 16px; }
  /* The boxes and count wrap inside their band. */
  .pg-biz-card .pg-meter { flex-wrap: wrap; }
  .pg-biz-card .pg-meter > span { min-width: 0; }
  .pg-dlg-foot .pg-role-note { max-width: none; }
  .pg-row.pg-biz-conn .pg-row-side { flex: 1 1 100%; padding-left: 48px; }
}