/* =============================================================================
 * Theme Overrides - Elevated Surface Design
 *
 * CUSTOMIZE THIS FILE FOR EACH CLIENT
 *
 * This file loads LAST in the cascade and applies the "modern elevated" design
 * language: layered shadows, subtle gradients, and clear visual hierarchy.
 *
 * IMPORTANT: Do NOT override Rosie identity styles (pink colors, heartbeat
 * glow) here. Those are defined in rosie/rosie-identity.css and must remain
 * consistent across all client sites.
 *
 * See BRANDING.md for the complete theming guide.
 * ============================================================================= */

/* ==========================================================================
 * Navbar - Elevated with subtle border separation
 * ========================================================================== */

.navbar {
  background-color: var(--theme-bg-nav);
  border-bottom: 1px solid var(--theme-border-color);
  box-shadow: var(--theme-shadow-sm);
}

[data-bs-theme="dark"] .navbar {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
 * Navbar Brand - Rosie hover effect on site name (optional via hoverEffect)
 * ========================================================================== */

.rosie-text-hover .site-name {
  transition: color 0.18s ease;
}

.rosie-text-hover:hover .site-name {
  color: var(--color-rosie-pink);
}

[data-bs-theme="dark"] .rosie-text-hover:hover .site-name {
  color: var(--color-rosie-pink-hover, #ff6390);
}

/* ==========================================================================
 * Cards - Layered elevation with refined borders
 * ========================================================================== */

.card {
  box-shadow: var(--theme-shadow-sm);
  border-color: var(--theme-border-color);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

[data-bs-theme="dark"] .card {
  border-color: rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
 * Chat Panel - Subtle inset feel for the conversation area
 * ========================================================================== */

#chat-column .card {
  box-shadow: var(--theme-shadow-md);
}

/* Chat messages - Better visual hierarchy between user and assistant */
.chat-message.user {
  background-color: var(--theme-primary-light);
  box-shadow: var(--theme-shadow-xs);
}

.chat-message.assistant {
  background-color: var(--theme-bg-card);
  box-shadow: var(--theme-shadow-xs);
}

[data-bs-theme="dark"] .chat-message.assistant {
  background-color: var(--theme-bg-surface);
  border-color: rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
 * Chat Input Bar - Elevated toolbar at the bottom
 * ========================================================================== */

.chat-input-container,
#chat-input-row,
.input-group:has(#user-input) {
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}

[data-bs-theme="dark"] .chat-input-container,
[data-bs-theme="dark"] #chat-input-row,
[data-bs-theme="dark"] .input-group:has(#user-input) {
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
 * Buttons - Subtle depth on primary actions
 * ========================================================================== */

.btn-primary {
  box-shadow: var(--theme-shadow-xs);
  transition: box-shadow 0.15s ease, transform 0.1s ease,
              background-color 0.15s ease, border-color 0.15s ease;
}

.btn-primary:hover {
  box-shadow: var(--theme-shadow-sm);
  transform: translateY(-1px);
}

.btn-primary:active {
  box-shadow: none;
  transform: translateY(0);
}

/* Outline buttons - subtle lift on hover */
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
  box-shadow: var(--theme-shadow-xs);
}

/* Outline-primary active/checked state - use primary color consistently.
   Bootstrap dark mode computes --bs-btn-active-bg from a lightened variant,
   producing an aqua instead of the actual --theme-primary. */
[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-active-bg: var(--theme-primary);
  --bs-btn-active-border-color: var(--theme-primary);
  --bs-btn-active-color: #fff;
}

/* ==========================================================================
 * Role Toggle & Session Key - Rosie pink hover accents
 * Subtle pink border on hover ties these utility controls to Rosie's identity
 * without competing with the primary Send button.
 * ========================================================================== */

/* Role toggle (bi-person / bi-robot) - Rosie pink hover border only.
   Bootstrap's .btn-check + .btn:hover forces resting-state colors, ignoring
   --bs-btn-hover-* variables entirely. Override that specific selector. */
.btn-check[name="roleRadio"] + .btn-outline-secondary:hover {
  border-color: var(--color-rosie-pink);
  transition: border-color 0.15s ease;
}

/* Session key input - Rosie pink focus/hover border */
#session-key:hover {
  border-color: var(--color-rosie-pink);
}

#session-key:focus {
  border-color: var(--color-rosie-pink);
  box-shadow: var(--theme-shadow-xs), 0 0 0 3px color-mix(in srgb, var(--color-rosie-pink) 20%, transparent);
}

/* ==========================================================================
 * Guest Info Cards - More pronounced elevation on hover
 * ========================================================================== */

.card.guest-info-card {
  box-shadow: var(--theme-shadow-sm);
}

.card.guest-info-card:hover {
  box-shadow: var(--theme-shadow-hover);
}

/* ==========================================================================
 * Form Inputs - Refined focus states
 * ========================================================================== */

.form-control,
.form-select {
  box-shadow: var(--theme-shadow-xs);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus,
.form-select:focus {
  box-shadow: var(--theme-shadow-xs), 0 0 0 3px color-mix(in srgb, var(--theme-primary) 20%, transparent);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: var(--theme-bg-surface);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  box-shadow: var(--theme-shadow-xs), 0 0 0 3px color-mix(in srgb, var(--theme-primary) 25%, transparent);
}

/* ==========================================================================
 * Footer - Subtle top border with elevation
 * ========================================================================== */

.footer {
  border-top: 1px solid var(--theme-border-color);
}

[data-bs-theme="dark"] .footer {
  border-top-color: rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
 * Dashboard Tabs - Refined active state
 * ========================================================================== */

#dashboard-column .nav-tabs {
  border-bottom-color: var(--theme-border-color);
}

#dashboard-column .nav-tabs .nav-link.active {
  color: var(--bs-link-color);
  border-color: var(--bs-link-color) var(--bs-link-color) transparent;
}

[data-bs-theme="dark"] #dashboard-column .nav-tabs {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
 * Sidebar Navigation - Improved link hover with surface tint
 * ========================================================================== */

[data-bs-theme="dark"] .sidebar .nav-link:hover,
[data-bs-theme="dark"] .sidebar .nav-link.active {
  background-color: var(--theme-bg-surface);
}

/* ==========================================================================
 * Dropdown Menus - Elevated with shadow
 * ========================================================================== */

.dropdown-menu {
  box-shadow: var(--theme-shadow-lg);
  border-color: var(--theme-border-color);
}

[data-bs-theme="dark"] .dropdown-menu {
  background-color: var(--theme-bg-surface);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
 * Modals & Toasts - Pronounced elevation
 * ========================================================================== */

.modal-content {
  box-shadow: var(--theme-shadow-lg);
}

.toast {
  box-shadow: var(--theme-shadow-md);
}

[data-bs-theme="dark"] .modal-content {
  background-color: var(--theme-bg-card);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
 * Scroll-to-top Button - Floating action with shadow
 * ========================================================================== */

#scrollToTopBtn {
  box-shadow: var(--theme-shadow-md);
}

#scrollToTopBtn:hover {
  box-shadow: var(--theme-shadow-lg);
}

/* ==========================================================================
 * Dark Mode Specific - Subtle surface ring on interactive elements
 * ========================================================================== */

[data-bs-theme="dark"] .badge {
  border: 1px solid rgba(255, 255, 255, 0.08);
}