/* Portal Theme Protocol v1 — Nexus-embedded chrome overlay for Penguin Support.
 *
 * Loaded unconditionally. ALL rules are scoped to
 * [data-theme^="nexus-embedded"] so direct visitors keep the original
 * Penguin orange/dark look; only Nexus-iframe sessions get this skin.
 *
 * Tokens (--nexus-*) are written to :root by static/js/nexus-embed.js
 * when a nexus.theme.push message arrives from the Nexus parent. The
 * loading state ([data-theme="nexus-embedded-loading"]) is the synchronous
 * first-paint approximation while we wait for tokens.
 *
 * Spec: docs/portal-theme-protocol.md in guinco-nexus-fastapi.
 */

/* ── Loading state (no tokens yet, neutral dark) ──────────────────────── */

[data-theme="nexus-embedded-loading"],
[data-theme="nexus-embedded-loading"] body {
  background-color: #191919 !important;
  color: #d4d4d4 !important;
}

/* ── Page surface ─────────────────────────────────────────────────────── */

[data-theme^="nexus-embedded"] body {
  background-color: var(--nexus-bg, #191919) !important;
  color: var(--nexus-text, #d4d4d4) !important;
}

[data-theme^="nexus-embedded"] main {
  background-color: var(--nexus-bg, #191919) !important;
}

/* ── Header / top navigation ──────────────────────────────────────────── */

[data-theme^="nexus-embedded"] .site-header {
  background-color: var(--nexus-bg-secondary, #2f2f2f) !important;
  border-bottom: 1px solid var(--nexus-border, rgba(255, 255, 255, 0.09)) !important;
  color: var(--nexus-text, #d4d4d4) !important;
  box-shadow: none !important;
}

[data-theme^="nexus-embedded"] .site-logo,
[data-theme^="nexus-embedded"] .site-logo a {
  color: var(--nexus-text-strong, #ffffff) !important;
}

[data-theme^="nexus-embedded"] .main-nav a,
[data-theme^="nexus-embedded"] .nav-menu a,
[data-theme^="nexus-embedded"] .mobile-nav a {
  color: var(--nexus-text-secondary, #9b9b9b) !important;
  background-color: transparent !important;
}

[data-theme^="nexus-embedded"] .main-nav a:hover,
[data-theme^="nexus-embedded"] .nav-menu a:hover,
[data-theme^="nexus-embedded"] .mobile-nav a:hover,
[data-theme^="nexus-embedded"] .main-nav a.active,
[data-theme^="nexus-embedded"] .nav-menu a.active {
  color: var(--nexus-text-strong, #ffffff) !important;
  background-color: var(--nexus-bg-tertiary, #373737) !important;
}

[data-theme^="nexus-embedded"] .header-search input {
  background-color: var(--nexus-input-bg, #2f2f2f) !important;
  border-color: var(--nexus-border, rgba(255, 255, 255, 0.09)) !important;
  color: var(--nexus-text, #d4d4d4) !important;
}

/* ── Mobile menu overlay ──────────────────────────────────────────────── */

[data-theme^="nexus-embedded"] .mobile-menu {
  background-color: var(--nexus-bg-secondary, #2f2f2f) !important;
  color: var(--nexus-text, #d4d4d4) !important;
}

[data-theme^="nexus-embedded"] .mobile-menu-overlay {
  background-color: rgba(0, 0, 0, 0.6) !important;
}

[data-theme^="nexus-embedded"] .mobile-menu-header {
  border-bottom: 1px solid var(--nexus-separator, rgba(255, 255, 255, 0.09)) !important;
}

/* ── Dropdowns (user menu + notification bell) ────────────────────────── */

[data-theme^="nexus-embedded"] .user-dropdown,
[data-theme^="nexus-embedded"] .bell-dropdown,
[data-theme^="nexus-embedded"] .more-menu-list,
[data-theme^="nexus-embedded"] .action-drawer {
  background-color: var(--nexus-card-bg, #2f2f2f) !important;
  border: 1px solid var(--nexus-card-border, rgba(255, 255, 255, 0.06)) !important;
  color: var(--nexus-text, #d4d4d4) !important;
  box-shadow: var(--nexus-shadow-elevated, 0 8px 32px rgba(0, 0, 0, 0.3)) !important;
}

[data-theme^="nexus-embedded"] .user-dropdown__name {
  color: var(--nexus-text-strong, #ffffff) !important;
}

[data-theme^="nexus-embedded"] .user-dropdown__meta,
[data-theme^="nexus-embedded"] .user-dropdown__role {
  color: var(--nexus-text-secondary, #9b9b9b) !important;
}

[data-theme^="nexus-embedded"] .user-dropdown a,
[data-theme^="nexus-embedded"] .bell-dropdown a,
[data-theme^="nexus-embedded"] .more-menu-list a,
[data-theme^="nexus-embedded"] .action-drawer-item {
  color: var(--nexus-text, #d4d4d4) !important;
}

[data-theme^="nexus-embedded"] .user-dropdown a:hover,
[data-theme^="nexus-embedded"] .bell-dropdown a:hover,
[data-theme^="nexus-embedded"] .more-menu-list a:hover,
[data-theme^="nexus-embedded"] .action-drawer-item:hover {
  background-color: var(--nexus-bg-tertiary, #373737) !important;
}

[data-theme^="nexus-embedded"] .notif-header,
[data-theme^="nexus-embedded"] .notif-footer {
  border-color: var(--nexus-separator, rgba(255, 255, 255, 0.09)) !important;
  color: var(--nexus-text-secondary, #9b9b9b) !important;
}

/* ── Cards (hub, category, blog, search-result, etc.) ─────────────────── */

[data-theme^="nexus-embedded"] .hub-cta-card,
[data-theme^="nexus-embedded"] .hub-cat-card,
[data-theme^="nexus-embedded"] .hub-action-card,
[data-theme^="nexus-embedded"] .hub-fav-item,
[data-theme^="nexus-embedded"] .hub-ticket-item,
[data-theme^="nexus-embedded"] .hub-article-item,
[data-theme^="nexus-embedded"] .category-card,
[data-theme^="nexus-embedded"] .blog-card,
[data-theme^="nexus-embedded"] .search-result-item,
[data-theme^="nexus-embedded"] .sidebar-widget,
[data-theme^="nexus-embedded"] .card,
[data-theme^="nexus-embedded"] .panel {
  background-color: var(--nexus-card-bg, #2f2f2f) !important;
  border: 1px solid var(--nexus-card-border, rgba(255, 255, 255, 0.06)) !important;
  color: var(--nexus-text, #d4d4d4) !important;
  box-shadow: none !important;
}

[data-theme^="nexus-embedded"] .hub-cta-card:hover,
[data-theme^="nexus-embedded"] .hub-cat-card:hover,
[data-theme^="nexus-embedded"] .hub-action-card:hover,
[data-theme^="nexus-embedded"] .category-card:hover,
[data-theme^="nexus-embedded"] .blog-card:hover {
  border-color: var(--nexus-primary, #529cca) !important;
  box-shadow: 0 0 0 1px var(--nexus-primary, #529cca), 0 4px 16px rgba(0, 0, 0, 0.3) !important;
  transform: translateY(-1px);
}

[data-theme^="nexus-embedded"] .category-icon,
[data-theme^="nexus-embedded"] .hub-section-header {
  color: var(--nexus-text-strong, #ffffff) !important;
}

/* ── Hero / page intros ───────────────────────────────────────────────── */

[data-theme^="nexus-embedded"] .hub-hero,
[data-theme^="nexus-embedded"] .hero-content {
  background:
    linear-gradient(135deg, var(--nexus-bg-secondary, #2f2f2f), var(--nexus-bg-tertiary, #373737)) !important;
  color: var(--nexus-text-strong, #ffffff) !important;
  border: 1px solid var(--nexus-card-border, rgba(255, 255, 255, 0.06)) !important;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

[data-theme^="nexus-embedded"] .btn {
  border: 1px solid var(--nexus-border, rgba(255, 255, 255, 0.09)) !important;
  background-color: var(--nexus-bg-tertiary, #373737) !important;
  color: var(--nexus-text, #d4d4d4) !important;
  transition: all 150ms ease;
}

[data-theme^="nexus-embedded"] .btn:hover {
  background-color: var(--nexus-bg-secondary, #2f2f2f) !important;
  border-color: var(--nexus-primary, #529cca) !important;
  color: var(--nexus-text-strong, #ffffff) !important;
}

[data-theme^="nexus-embedded"] .btn-primary,
[data-theme^="nexus-embedded"] .btn.primary {
  background-color: var(--nexus-primary, #529cca) !important;
  border-color: var(--nexus-primary, #529cca) !important;
  color: #ffffff !important;
}

[data-theme^="nexus-embedded"] .btn-primary:hover,
[data-theme^="nexus-embedded"] .btn.primary:hover {
  filter: brightness(1.15);
  box-shadow: 0 0 16px rgba(82, 156, 202, 0.3);
}

[data-theme^="nexus-embedded"] .btn-danger {
  background-color: var(--nexus-danger, #ff7369) !important;
  border-color: var(--nexus-danger, #ff7369) !important;
  color: #ffffff !important;
}

[data-theme^="nexus-embedded"] .btn-success {
  background-color: var(--nexus-success, #4dab9a) !important;
  border-color: var(--nexus-success, #4dab9a) !important;
  color: #ffffff !important;
}

/* ── Forms ────────────────────────────────────────────────────────────── */

[data-theme^="nexus-embedded"] .form-group label,
[data-theme^="nexus-embedded"] form label {
  color: var(--nexus-text, #d4d4d4) !important;
}

[data-theme^="nexus-embedded"] input[type="text"],
[data-theme^="nexus-embedded"] input[type="email"],
[data-theme^="nexus-embedded"] input[type="password"],
[data-theme^="nexus-embedded"] input[type="number"],
[data-theme^="nexus-embedded"] input[type="search"],
[data-theme^="nexus-embedded"] input[type="tel"],
[data-theme^="nexus-embedded"] input[type="url"],
[data-theme^="nexus-embedded"] input[type="date"],
[data-theme^="nexus-embedded"] textarea,
[data-theme^="nexus-embedded"] select {
  background-color: var(--nexus-input-bg, #2f2f2f) !important;
  border: 1px solid var(--nexus-border, rgba(255, 255, 255, 0.09)) !important;
  color: var(--nexus-text, #d4d4d4) !important;
}

[data-theme^="nexus-embedded"] input:focus,
[data-theme^="nexus-embedded"] textarea:focus,
[data-theme^="nexus-embedded"] select:focus {
  border-color: var(--nexus-primary, #529cca) !important;
  box-shadow: 0 0 0 3px rgba(82, 156, 202, 0.15) !important;
  outline: none !important;
}

[data-theme^="nexus-embedded"] .file-upload {
  background-color: var(--nexus-bg-tertiary, #373737) !important;
  border: 2px dashed var(--nexus-border, rgba(255, 255, 255, 0.09)) !important;
  color: var(--nexus-text-secondary, #9b9b9b) !important;
}

/* ── Page header band + ticket form panel ─────────────────────────────────
   [FIXED 2026-06-10] The form rules above push labels/inputs to the dark
   token colors, but .support-form-container (white) and .page-header
   (#f5f5f5) kept their light backgrounds — light-on-light text inside the
   Nexus dark theme. Pull both surfaces onto the dark card tokens so the
   IT Support Request form reads correctly. */

[data-theme^="nexus-embedded"] .page-header {
  background-color: var(--nexus-bg-secondary, #2f2f2f) !important;
  border-bottom: 1px solid var(--nexus-separator, rgba(255, 255, 255, 0.09)) !important;
}

[data-theme^="nexus-embedded"] .page-header h1 {
  color: var(--nexus-text-strong, #ffffff) !important;
}

[data-theme^="nexus-embedded"] .support-form-container {
  background-color: var(--nexus-card-bg, #2f2f2f) !important;
  border: 1px solid var(--nexus-card-border, rgba(255, 255, 255, 0.06)) !important;
  border-radius: 8px;
  color: var(--nexus-text, #d4d4d4) !important;
}

/* Inline-styled helper text (color:#666 in the template) needs !important
   to win over the style attribute; #666 is unreadable on the dark card. */
[data-theme^="nexus-embedded"] .form-group label small,
[data-theme^="nexus-embedded"] .form-group small {
  color: var(--nexus-text-secondary, #9b9b9b) !important;
}

[data-theme^="nexus-embedded"] .support-form-container h2,
[data-theme^="nexus-embedded"] .support-form-container h3,
[data-theme^="nexus-embedded"] .support-form-container legend {
  color: var(--nexus-text-strong, #ffffff) !important;
}

/* ── Flash messages ───────────────────────────────────────────────────── */

[data-theme^="nexus-embedded"] .flash-message {
  border: 1px solid var(--nexus-card-border, rgba(255, 255, 255, 0.06)) !important;
  background-color: var(--nexus-card-bg, #2f2f2f) !important;
  color: var(--nexus-text, #d4d4d4) !important;
}

[data-theme^="nexus-embedded"] .flash-success {
  background-color: rgba(77, 171, 154, 0.15) !important;
  border-color: var(--nexus-success, #4dab9a) !important;
  color: var(--nexus-success, #4dab9a) !important;
}

[data-theme^="nexus-embedded"] .flash-error,
[data-theme^="nexus-embedded"] .flash-danger {
  background-color: rgba(255, 115, 105, 0.15) !important;
  border-color: var(--nexus-danger, #ff7369) !important;
  color: var(--nexus-danger, #ff7369) !important;
}

[data-theme^="nexus-embedded"] .flash-warning {
  background-color: rgba(255, 163, 68, 0.15) !important;
  border-color: var(--nexus-warning, #ffa344) !important;
  color: var(--nexus-warning, #ffa344) !important;
}

[data-theme^="nexus-embedded"] .flash-info {
  background-color: rgba(82, 156, 202, 0.15) !important;
  border-color: var(--nexus-info, #529cca) !important;
  color: var(--nexus-info, #529cca) !important;
}

/* ── Tables ───────────────────────────────────────────────────────────── */

[data-theme^="nexus-embedded"] table {
  background-color: var(--nexus-card-bg, #2f2f2f) !important;
  color: var(--nexus-text, #d4d4d4) !important;
  border-color: var(--nexus-border, rgba(255, 255, 255, 0.09)) !important;
}

[data-theme^="nexus-embedded"] th {
  background-color: var(--nexus-bg-tertiary, #373737) !important;
  color: var(--nexus-text-strong, #ffffff) !important;
  border-color: var(--nexus-border, rgba(255, 255, 255, 0.09)) !important;
}

[data-theme^="nexus-embedded"] td {
  border-color: var(--nexus-separator, rgba(255, 255, 255, 0.09)) !important;
}

[data-theme^="nexus-embedded"] tr:nth-child(even) td {
  background-color: var(--nexus-bg-secondary, #2f2f2f) !important;
}

/* ── Links + breadcrumbs ──────────────────────────────────────────────── */

[data-theme^="nexus-embedded"] a {
  color: var(--nexus-primary, #529cca);
}

[data-theme^="nexus-embedded"] a:hover {
  color: var(--nexus-text-strong, #ffffff);
}

[data-theme^="nexus-embedded"] .breadcrumbs,
[data-theme^="nexus-embedded"] .breadcrumbs a {
  color: var(--nexus-text-secondary, #9b9b9b) !important;
}

[data-theme^="nexus-embedded"] .breadcrumbs a:hover {
  color: var(--nexus-text-strong, #ffffff) !important;
}

/* ── Footer ───────────────────────────────────────────────────────────── */

[data-theme^="nexus-embedded"] .site-footer {
  background-color: var(--nexus-bg-secondary, #2f2f2f) !important;
  border-top: 1px solid var(--nexus-separator, rgba(255, 255, 255, 0.09)) !important;
  color: var(--nexus-text-secondary, #9b9b9b) !important;
}

[data-theme^="nexus-embedded"] .site-footer a {
  color: var(--nexus-text-secondary, #9b9b9b) !important;
}

[data-theme^="nexus-embedded"] .site-footer a:hover {
  color: var(--nexus-text-strong, #ffffff) !important;
}

/* ── Mobile bottom-tab bar ────────────────────────────────────────────── */

[data-theme^="nexus-embedded"] .bottom-tab-bar {
  background-color: var(--nexus-bg-secondary, #2f2f2f) !important;
  border-top: 1px solid var(--nexus-separator, rgba(255, 255, 255, 0.09)) !important;
}

[data-theme^="nexus-embedded"] .tab-item {
  color: var(--nexus-text-secondary, #9b9b9b) !important;
}

[data-theme^="nexus-embedded"] .tab-item.active {
  color: var(--nexus-primary, #529cca) !important;
}

/* ── Scrollbar styling for embedded chrome ────────────────────────────── */

[data-theme^="nexus-embedded"] ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

[data-theme^="nexus-embedded"] ::-webkit-scrollbar-track {
  background: var(--nexus-bg, #191919);
}

[data-theme^="nexus-embedded"] ::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.2);
  border-radius: 5px;
}

[data-theme^="nexus-embedded"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.35);
}