/* ============================================================
   AI Data Layer — Admin UI
   Brand system v1.0
   ============================================================ */

/* Font import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Custom properties ──────────────────────────────────── */
#semantic-admin-root {
  --navy:       #0D1F3C;
  --green:      #1ECBA4;
  --frost:      #E8F9F5;
  --off-white:  #F8F7F5;
  --slate:      #5A6A7A;
  --white:      #ffffff;
  --red:        #ef4444;
  --amber:      #f59e0b;
  --border:     rgba(13, 31, 60, 0.10);
  --border-mid: rgba(13, 31, 60, 0.18);
  --shadow-sm:  0 1px 3px rgba(13, 31, 60, 0.08);
  --shadow-md:  0 4px 12px rgba(13, 31, 60, 0.10);
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;

  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--navy);
  background: var(--off-white);
  margin: -10px -20px 0;
  -webkit-font-smoothing: antialiased;
}

#semantic-admin-root * {
  box-sizing: border-box;
}

/* ── Typography helpers ─────────────────────────────────── */
#semantic-admin-root .eyebrow {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--slate);
}

#semantic-admin-root h2 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--navy);
  margin: 0 0 16px;
}

#semantic-admin-root h3 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--navy);
  margin: 0 0 12px;
}

/* ── Links ──────────────────────────────────────────────── */
#semantic-admin-root a {
  color: var(--navy);
  text-decoration: none;
}

#semantic-admin-root a:hover {
  color: var(--green);
}

/* ── Inputs ─────────────────────────────────────────────── */
#semantic-admin-root input,
#semantic-admin-root textarea,
#semantic-admin-root select {
  font-family: inherit;
  font-size: 13px;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}

#semantic-admin-root input:focus,
#semantic-admin-root textarea:focus,
#semantic-admin-root select:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(30, 203, 164, 0.15);
}

#semantic-admin-root input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: searchfield-cancel-button;
}

#semantic-admin-root input[type="color"] {
  padding: 2px;
  cursor: pointer;
}


/* Native checkboxes replaced by custom SToggle React component */

/* ── Tables ─────────────────────────────────────────────── */
#semantic-admin-root table th,
#semantic-admin-root table td {
  vertical-align: middle;
}

/* ── Spinner ────────────────────────────────────────────── */
@keyframes semantic-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.semantic-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: semantic-spin 0.65s linear infinite;
  margin-right: 5px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ── Pencil edit button ─────────────────────────────────── */
.semantic-edit-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 5px;
  color: var(--border-mid);
  font-size: 12px;
  line-height: 1;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
}

.semantic-edit-btn:hover {
  color: var(--green);
  background: var(--frost);
}

/* ── Inline edit form ───────────────────────────────────── */
.semantic-edit-form {
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--frost);
  border: 1px solid rgba(30, 203, 164, 0.25);
  border-radius: var(--radius-md);
}

.semantic-edit-form label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--slate);
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.semantic-edit-form input,
.semantic-edit-form textarea,
.semantic-edit-form select {
  width: 100%;
  margin-bottom: 10px;
}

.semantic-edit-form textarea {
  resize: vertical;
  min-height: 64px;
}

/* ── Rationale quote ────────────────────────────────────── */
.semantic-rationale {
  margin-top: 8px;
  padding: 6px 12px;
  border-left: 3px solid var(--green);
  color: var(--slate);
  font-size: 12px;
  font-style: italic;
  line-height: 1.5;
  background: var(--frost);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.semantic-rationale-label {
  font-style: normal;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green);
  display: block;
  margin-bottom: 2px;
}

/* ── Settings field helpers ─────────────────────────────── */
.semantic-settings-hint {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--slate);
  line-height: 1.5;
}

/* ── Frontend FAQ section (on posts) ────────────────────── */
.semantic-faq-section {
  font-family: 'Inter', system-ui, sans-serif;
}

/* ── Scrollbar (subtle) ─────────────────────────────────── */
#semantic-admin-root ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

#semantic-admin-root ::-webkit-scrollbar-track {
  background: transparent;
}

#semantic-admin-root ::-webkit-scrollbar-thumb {
  background: var(--border-mid);
  border-radius: 3px;
}

/* ── Fade-in for cards ──────────────────────────────────── */
@keyframes semantic-fadein {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

#semantic-admin-root .semantic-card {
  animation: semantic-fadein 0.18s ease;
}

/* ── Tooltip (for disabled Apply button) ───────────────── */
#semantic-admin-root [title] {
  position: relative;
}

/* ── Entity Profile: strength indicator blink ───────────── */
@keyframes semantic-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.semantic-blink {
  animation: semantic-blink 2.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .semantic-blink { animation: none; }
}