/*
 * IDEABOX standalone theme bridge.
 *
 * IBOX is rendered both as full pages and as iframe embeds, which means those
 * views bypass the main MarketPawns shell where theme tokens are normally
 * initialized. This stylesheet reuses the shared site tokens from
 * `/public/css/style.css`, maps IBOX legacy aliases to those tokens, and then
 * applies a consistent dark presentation for the standalone experience.
 */

:root {
  /* Legacy IBOX aliases used by older inline styles. */
  --neutral: var(--neutral-primary);
  --light: var(--neutral-light);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --border: var(--border-light);
  --brand: var(--brand-primary);
  --gold: var(--interactive-bg);
  --s2: var(--space-2);
  --s3: var(--space-3);
  --s4: var(--space-4);
}

/*
 * Chart embeds are rendered through shortcode-generated iframe wrappers.
 * Keep them block-level and full-width so the post layout cannot collapse the
 * chart width before the iframe finishes its own canvas initialization.
 */
.ibox-chart-embed {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 16px 0;
}

.ibox-chart-embed-frame {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  border: 0;
}

html[data-theme="dark"] {
  --ibox-warning-bg: rgba(255, 182, 72, 0.14);
  --ibox-warning-border: rgba(255, 182, 72, 0.28);
  --ibox-warning-text: #ffd48d;
  --ibox-danger-bg: rgba(255, 107, 107, 0.14);
  --ibox-danger-border: rgba(255, 107, 107, 0.24);
  --ibox-danger-text: #ffb0b0;
  --ibox-success-bg: rgba(52, 199, 89, 0.14);
  --ibox-success-border: rgba(52, 199, 89, 0.24);
  --ibox-success-text: #8fe2a7;
  --ibox-info-bg: rgba(53, 194, 224, 0.12);
  --ibox-info-border: rgba(53, 194, 224, 0.24);
  --ibox-info-text: #9ee8f5;
}

html[data-theme="dark"] body {
  background: var(--neutral-primary) !important;
  color: var(--text-primary) !important;
  min-height: 100vh;
}

html[data-theme="dark"] a {
  color: var(--brand-primary);
}

html[data-theme="dark"] a:hover {
  color: var(--accent-primary);
}

html[data-theme="dark"] .global-header,
html[data-theme="dark"] header,
html[data-theme="dark"] header.page,
html[data-theme="dark"] .box,
html[data-theme="dark"] .container > .box,
html[data-theme="dark"] .post-card,
html[data-theme="dark"] .post,
html[data-theme="dark"] .card,
html[data-theme="dark"] .page-content .container {
  background: var(--mp-card-bg) !important;
  border-color: var(--border-medium) !important;
  box-shadow: var(--mp-card-shadow) !important;
}

html[data-theme="dark"] .global-header {
  background: var(--neutral-light) !important;
  border-bottom-color: var(--border-light) !important;
}

html[data-theme="dark"] .global-header-content,
html[data-theme="dark"] .actions,
html[data-theme="dark"] .header {
  color: var(--text-primary);
}

html[data-theme="dark"] .post-card:hover,
html[data-theme="dark"] .post:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--mp-card-bg) 92%, var(--surface-tint)) !important;
  box-shadow: var(--shadow-md) !important;
}

html[data-theme="dark"] .section-title,
html[data-theme="dark"] .meta,
html[data-theme="dark"] .excerpt,
html[data-theme="dark"] .small,
html[data-theme="dark"] .note,
html[data-theme="dark"] .no-posts-message,
html[data-theme="dark"] .signin a,
html[data-theme="dark"] #chart-info,
html[data-theme="dark"] summary,
html[data-theme="dark"] .container a[id^="openSignIn"] {
  color: var(--text-secondary) !important;
}

html[data-theme="dark"] .post-card a,
html[data-theme="dark"] .open-post__link,
html[data-theme="dark"] .back-to-main,
html[data-theme="dark"] .msg a,
html[data-theme="dark"] .meta a,
html[data-theme="dark"] .page-content .container > div a,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] header h1,
html[data-theme="dark"] header.page h1 {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .btn,
html[data-theme="dark"] .preset,
html[data-theme="dark"] .icon-link,
html[data-theme="dark"] .header .btn,
html[data-theme="dark"] .nav .btn {
  background: rgba(255, 255, 255, 0.02) !important;
  border-color: rgba(214, 181, 108, 0.28) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .btn:hover,
html[data-theme="dark"] .btn.active,
html[data-theme="dark"] .preset:hover,
html[data-theme="dark"] .preset.active,
html[data-theme="dark"] .layout-switcher .layout-btn.active,
html[data-theme="dark"] .filter .btn.active,
html[data-theme="dark"] .header .btn:hover,
html[data-theme="dark"] .nav .btn:hover {
  background: linear-gradient(135deg, var(--brand-primary-dark), var(--brand-primary)) !important;
  border-color: rgba(140, 144, 232, 0.45) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .tag {
  background: rgba(214, 181, 108, 0.18) !important;
  color: var(--interactive-bg) !important;
  border: 1px solid rgba(214, 181, 108, 0.2) !important;
}

html[data-theme="dark"] .tag:hover {
  background: rgba(140, 144, 232, 0.18) !important;
  color: var(--brand-primary-light) !important;
  border-color: rgba(140, 144, 232, 0.24) !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] input[type="date"] {
  background: var(--surface-sunken) !important;
  border-color: var(--border-medium) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--text-muted) !important;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
  border-color: var(--brand-primary) !important;
  box-shadow: var(--focus-ring-brand) !important;
  outline: none !important;
}

html[data-theme="dark"] .hint,
html[data-theme="dark"] .msg,
html[data-theme="dark"] .signin,
html[data-theme="dark"] details,
html[data-theme="dark"] details form,
html[data-theme="dark"] #edit_preview_card,
html[data-theme="dark"] #charts-status,
html[data-theme="dark"] [id^="chart-status-"] {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .hint {
  background: var(--ibox-warning-bg) !important;
  border-color: var(--ibox-warning-border) !important;
  color: var(--ibox-warning-text) !important;
}

html[data-theme="dark"] .msg,
html[data-theme="dark"] .err {
  background: var(--ibox-danger-bg) !important;
  border-color: var(--ibox-danger-border) !important;
  color: var(--ibox-danger-text) !important;
}

html[data-theme="dark"] .ok {
  color: var(--ibox-success-text) !important;
}

html[data-theme="dark"] #charts-status {
  background: var(--ibox-info-bg) !important;
  border: 1px solid var(--ibox-info-border) !important;
  color: var(--ibox-info-text) !important;
}

html[data-theme="dark"] [id^="chart-status-"] {
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--text-secondary) !important;
}

html[data-theme="dark"] code,
html[data-theme="dark"] pre,
html[data-theme="dark"] details > div,
html[data-theme="dark"] details pre {
  background: var(--surface-sunken) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-medium) !important;
}

html[data-theme="dark"] summary.btn,
html[data-theme="dark"] details summary {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .content {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .chart,
html[data-theme="dark"] .chart_area,
html[data-theme="dark"] .mp-chart {
  background: var(--mp-chart-bg) !important;
  border-color: var(--mp-chart-frame) !important;
}

html[data-theme="dark"] .model-id-header-ibox {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: var(--border-medium) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .model-id-header-ibox .model-id-label,
html[data-theme="dark"] .model-id-header-ibox .copy-model-id-btn {
  color: var(--text-secondary) !important;
}

html[data-theme="dark"] .model-id-header-ibox .model-id-value {
  background: var(--surface-sunken) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-medium) !important;
}

html[data-theme="dark"] .chart-toolbar .btn-ctl,
html[data-theme="dark"] .auto-y-fit-label {
  background: rgba(34, 37, 47, 0.92) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-medium) !important;
}

html[data-theme="dark"] .chart-toolbar .btn-ctl:hover,
html[data-theme="dark"] .auto-y-fit-label:hover {
  background: rgba(45, 49, 63, 0.96) !important;
}

.open-post__link,
.logo-link,
.container a,
.header .btn,
.actions .btn {
  color: var(--brand-primary);
}

.open-post__link:hover,
.logo-link:hover,
.container a:hover,
.header .btn:hover,
.actions .btn:hover {
  color: var(--brand-primary-dark);
}

.icon-link,
.embed-post-open-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--interactive-bg);
  border-radius: 999px;
  text-decoration: none;
  color: var(--brand-primary);
  background: color-mix(in srgb, var(--surface-raised, #ffffff) 92%, transparent);
  transition: var(--transition-fast);
}

.icon-link:hover,
.embed-post-open-link:hover {
  color: var(--neutral-light);
  background: linear-gradient(135deg, var(--brand-primary-dark), var(--brand-primary));
  border-color: var(--brand-primary);
}

html[data-theme="dark"] .icon-link,
html[data-theme="dark"] .embed-post-open-link {
  color: var(--interactive-bg) !important;
  border-color: rgba(214, 181, 108, 0.45) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

html[data-theme="dark"] .icon-link:hover,
html[data-theme="dark"] .embed-post-open-link:hover {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--brand-primary-dark), var(--brand-primary)) !important;
  border-color: rgba(140, 144, 232, 0.45) !important;
}