/* RayGrow Bridge — small additions on top of bridge.css */
.rg-nav .nav-link.active { color: #1d4ed8; }
.rg-avatar { width: 26px; height: 26px; border-radius: 50%; background: #e0eaff; color: #1d4ed8;
  display: inline-grid; place-items: center; font-weight: 700; font-size: 13px; }
.rg-feedback-panel { min-width: 280px; max-width: 360px; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%); z-index: 1040; }
.rg-card { background: #fff; border: 1px solid #e3e8f0; border-radius: 12px; box-shadow: 0 4px 14px rgba(36, 50, 74, .05); }
.rg-empty { text-align: center; color: #6b7280; padding: 28px 12px; }
.rg-empty i { font-size: 32px; display: block; margin-bottom: 6px; color: #94a3b8; }
.rg-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px;
  background: #eef3ff; color: #1e3a8a; font-size: 12px; font-weight: 600; }
.rg-chip.green { background: #eaf6e4; color: #2f6b1f; }
.rg-chip.orange { background: #fdf0e1; color: #8a4b0f; }
.rg-chip.gray { background: #eef0f3; color: #475569; }
.rg-link-box { display: flex; gap: 6px; }
.rg-link-box input { font-size: 13px; }
@media (max-width: 991px) { .rg-feedback-panel { left: 0; transform: none; } }
.min-w-0 { min-width: 0; }
/* bridge.css pads every .container for the Services page; keep the top bar compact. */
.rg-nav > .container { padding-bottom: 0; margin-top: 0; margin-bottom: 0; }
footer.container { padding-bottom: 24px; }

/* Environment + version badge */
.rg-env { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 999px; margin-right: 12px; white-space: nowrap; }
.rg-env-ver { font-weight: 500; letter-spacing: 0; }
.rg-env-prod { background: #e7f6ec; color: #17663a; border: 1px solid #bfe5cc; }
.rg-env-dev { background: #fff1e0; color: #a14b00; border: 1px solid #ffd2a1; }
.rg-dev-stripe { height: 4px; background: repeating-linear-gradient(45deg, #f59e0b 0 12px, #fbbf24 12px 24px); }
.rg-env-corner { position: fixed; right: 12px; bottom: 12px; z-index: 1050; opacity: .9; }
.rg-env-corner .rg-env { margin: 0; }

/* Install-app banner (PWA) */
.rg-install-banner {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: min(460px, calc(100% - 32px));
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 14px;
  background: #fff;
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  z-index: 1080;
}
.rg-install-banner.d-none { display: none !important; }
.rg-install-banner img { border-radius: 10px; flex: none; }

/* Installed app: respect phone notches / home indicator */
@media (display-mode: standalone) {
  body { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .rg-nav { padding-top: env(safe-area-inset-top, 0px); }
}

/* Notification bell (RgBridge) */
.rg-bell-count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: #dc2626; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.rg-bell-menu { width: min(380px, 92vw); border-radius: 14px; overflow: hidden; box-shadow: 0 16px 40px rgba(15, 23, 42, .16); }
.rg-bell-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid #eef1f6; }
.rg-bell-list { max-height: 420px; overflow-y: auto; }
.rg-bell-item { display: flex; gap: 10px; padding: 10px 14px; text-decoration: none; color: inherit; border-bottom: 1px solid #f3f5f9; }
.rg-bell-item:hover { background: #f5f7fb; color: inherit; }
.rg-bell-item.is-new { background: #f5f8ff; }
.rg-bell-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; background: #f1f4f9; color: #4b5563; }
.rg-bell-ic.tone-info { background: #e8f0fe; color: #1d4ed8; } .rg-bell-ic.tone-ok { background: #e7f6ec; color: #17803d; }
.rg-bell-ic.tone-warn { background: #fff4e0; color: #9a5b00; } .rg-bell-ic.tone-bad { background: #fde8e8; color: #b42318; }
.rg-bell-title { font-weight: 600; font-size: 13.5px; display: block; }
.rg-bell-text { font-size: 12.5px; color: #4b5563; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 290px; }
.rg-bell-time { font-size: 11.5px; color: #9ca3af; }
.rg-bell-empty { padding: 26px 14px; text-align: center; color: #6b7280; font-size: 14px; }
.rg-bell-foot { display: block; text-align: center; padding: 9px; font-size: 13px; font-weight: 600; text-decoration: none; border-top: 1px solid #eef1f6; }

/* bridge.css (from the old app) styles every .row as a centred flex line with equal children,
   which breaks Bootstrap's grid. Restore Bootstrap behaviour wherever a Bootstrap row is used. */
.row[class*="g-"], .row.justify-content-center { gap: 0; align-items: normal; }
.row[class*="g-"] > *, .row.justify-content-center > * { flex: 0 0 auto; }

.rg-bell-row { display: flex; align-items: center; border-bottom: 1px solid #f3f5f9; }
.rg-bell-row .rg-bell-item { flex: 1; min-width: 0; border-bottom: 0; }
.rg-bell-read { border: 0; background: transparent; width: 32px; height: 32px; margin-right: 8px; border-radius: 8px; color: #6b7280; flex: none; }
.rg-bell-read:hover { background: #e7f6ec; color: #17803d; }

/* Legacy bridge.css paints every .btn white, which hid Bootstrap's coloured buttons (btn-primary, btn-success…).
   :where() keeps specificity at .btn so page-specific buttons (e.g. .btn-wa) still win. */
.btn:where([class*="btn-"]) { background: var(--bs-btn-bg); color: var(--bs-btn-color); border-color: var(--bs-btn-border-color); }
.btn:where([class*="btn-"]):hover { background: var(--bs-btn-hover-bg); color: var(--bs-btn-hover-color); border-color: var(--bs-btn-hover-border-color); }
.btn:where([class*="btn-"]):active { background: var(--bs-btn-active-bg); color: var(--bs-btn-active-color); border-color: var(--bs-btn-active-border-color); }
.btn:where([class*="btn-"]):disabled { background: var(--bs-btn-disabled-bg); color: var(--bs-btn-disabled-color); border-color: var(--bs-btn-disabled-border-color); }

/* Legacy bridge.css .modal (old custom dialogs) breaks Bootstrap modals; reset it for Bootstrap's ".modal.fade". */
.modal.fade { width: 100%; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow-x: hidden; overflow-y: auto; }