/* Copyright © 2026 JoinIn AI, Inc. All rights reserved.
 *
 * Phase 6 overrides — targeted fixes for visual regressions observed
 * after the React → Reagent CSS port. Each rule should:
 *   1. Have a comment naming the regression
 *   2. Be as specific as possible (don't blanket-override whole elements)
 *   3. Name the observer + date for provenance (these can be pruned
 *      once the underlying modules.css is patched at source)
 *
 * Loads AFTER modules.css so these win on specificity ties.
 */

/* ─────────────────────────────────────────────────────────────────
 * Workspace Settings modal tabs — persistent scrollbar (Ted, 2026-04-21)
 * Both the module (.m-WorkspaceSettingsModal__tabs) and the hand
 * (.settings-modal-tabs) rules use overflow-x: auto, which Chrome
 * renders as a always-visible scrollbar under the tab row. Hide the
 * bar visually; horizontal scroll on narrow viewports still works.
 * ───────────────────────────────────────────────────────────────── */

.settings-modal-tabs,
.m-WorkspaceSettingsModal__tabs {
  scrollbar-width: none;         /* Firefox */
  -ms-overflow-style: none;      /* old IE/Edge */
}
.settings-modal-tabs::-webkit-scrollbar,
.m-WorkspaceSettingsModal__tabs::-webkit-scrollbar {
  display: none;                 /* Chrome / Safari / new Edge */
}

/* ─────────────────────────────────────────────────────────────────
 * Admin view orphans — CLJS uses .admin-error, .admin-tab,
 * .admin-tab-body but admin.css only styles the tab buttons.
 * These are top-level container/content wrappers that were
 * rendering unstyled.
 * ───────────────────────────────────────────────────────────────── */

.admin-error {
  padding: 0.75rem 1rem;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 6px;
  color: #FCA5A5;
  font-size: 0.85rem;
  margin: 0.75rem 0;
}

.admin-tab {
  /* Individual tab content sections (Meetings / Events / etc.) —
     minimal wrapper, no layout beyond block flow. */
  display: block;
}

.admin-tab-body {
  /* Holds the active tab's rendered content. Paired with
     .admin-tabs above it; provides top spacing. */
  padding-top: 1rem;
}

/* ─────────────────────────────────────────────────────────────────
 * Settings wizard summary wrapper — .wizard-summary-row / -label /
 * -value are styled in components.css, but the outer .wizard-summary
 * container has no rule. Provides padding + stacking spacing.
 * ───────────────────────────────────────────────────────────────── */

.wizard-summary {
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ─────────────────────────────────────────────────────────────────
 * Generic form input — .form-input appears in the inline
 * "create-meeting" and welcome-email forms. components.css has
 * .input but no .form-input. Mirror the .input base rule so text
 * inputs don't fall back to browser defaults.
 * ───────────────────────────────────────────────────────────────── */

.form-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--pulse-border-subtle, rgba(255, 255, 255, 0.12));
  border-radius: 6px;
  color: var(--pulse-text-main, rgba(255, 255, 255, 0.92));
  font-size: 0.9rem;
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.form-input:focus {
  outline: none;
  border-color: var(--pulse-accent, #60A5FA);
  background: rgba(255, 255, 255, 0.06);
}

html[data-theme="light"] .form-input {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.92);
}

html[data-theme="light"] .form-input:focus {
  background: rgba(0, 0, 0, 0.04);
}