/* ════════════════════════════════════════════════════════════
   CosmoKundli — runtime additions.

   Everything here is a NEW class in the `ckx-` namespace. Nothing in this
   file selects, overrides, or reorders an existing rule in styles.css, so
   the delivered design is unaffected whether or not this file loads.
   Values are taken from the design tokens already defined in :root.
   ════════════════════════════════════════════════════════════ */

/* ── inline status messages ── */
.ckx-notice {
  margin: 10px 0 0;
  padding: 9px 13px;
  border-radius: 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  border: 1px solid transparent;
}
.ckx-notice[data-tone='error'] {
  color: #FFD9D6;
  background: rgba(239, 68, 68, 0.13);
  border-color: rgba(239, 68, 68, 0.38);
}
.ckx-notice[data-tone='success'] {
  color: #CFFBEA;
  background: rgba(16, 185, 129, 0.13);
  border-color: rgba(16, 185, 129, 0.38);
}

/* ── birth-place autocomplete ── */
.ckx-suggest {
  /* Fixed and body-mounted so it escapes the filtered containers it sits
     between; ck-pages.js positions it against the input on every open. */
  position: fixed;
  z-index: 9000;
  max-height: 264px;
  overflow-y: auto;
  padding: 5px;
  border-radius: 12px;
  background: #14131C;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.55);
}
.ckx-suggest-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
}
.ckx-suggest-item:hover,
.ckx-suggest-item:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  outline: none;
}
.ckx-suggest-name {
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
}
.ckx-suggest-meta {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}
.ckx-suggest-empty {
  padding: 11px;
  color: rgba(255, 255, 255, 0.5);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
}

/* ── empty / error state inside the client table ── */
.ckx-empty {
  padding: 26px 18px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
}

/* On mobile the client table becomes a card stack; keep the empty row full width. */
@media (max-width: 991.98px) {
  .ckx-empty { display: block; width: 100%; }
}