/* Dashboard UI mother stylesheet. Keep the product restrained: black, white and UEES wine. */
:root {
  --brand: #821436 !important;
  --black: #111111 !important;
  --white: #ffffff !important;
  --bg: #ffffff !important;
  --surface: #ffffff !important;
  --surface-soft: #f7f7f7 !important;
  --border: #e5e5e5 !important;
  --text: #111111 !important;
  --muted: #666666 !important;
  --danger: #dc2626 !important;
  --success: #047857 !important;
  --radius: 8px !important;
  --shadow: none !important;
  --accent: #821436 !important;
  --accent2: #5f0f29 !important;
  --accent-light: rgba(130, 20, 54, 0.08) !important;
}

html,
body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

a { color: var(--brand); }

.dashboard-root,
.ub-stitch-shell,
.cb-stitch-shell {
  min-height: 100vh;
  background: var(--bg) !important;
  color: var(--text) !important;
}

.header,
.ub-stitch-topbar,
.cb-stitch-topbar {
  height: 64px !important;
  min-height: 64px !important;
}

.header-brand,
.ub-stitch-brand,
.cb-stitch-brand {
  color: var(--white) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

.header-brand svg { color: var(--white) !important; }

.header-nav,
.ub-stitch-nav,
.cb-stitch-nav {
  gap: 6px !important;
}

.header-nav a,
.ub-stitch-nav a,
.cb-stitch-nav a {
  color: rgba(255, 255, 255, 0.72) !important;
  border-radius: 6px !important;
  padding: 7px 10px !important;
  font-size: 13px !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
}

.header-nav a:hover,
.ub-stitch-nav a:hover,
.cb-stitch-nav a:hover,
.header-nav a.active,
.ub-stitch-nav a.active,
.cb-stitch-nav a.active {
  background: var(--brand) !important;
  color: var(--white) !important;
}

.header-user,
.ub-stitch-user,
.cb-stitch-user {
  color: rgba(255, 255, 255, 0.72) !important;
}

.header-user span,
.ub-stitch-user span,
.cb-stitch-user span {
  color: rgba(255, 255, 255, 0.72) !important;
}

.header .custom-btn,
.ub-stitch-user a,
.cb-stitch-user a {
  background: transparent !important;
  color: var(--white) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: var(--radius) !important;
}

.main-content,
.main,
.ub-canvas,
.cb-canvas {
  background: var(--bg) !important;
}

.ub-stitch-subbar,
.cb-stitch-subbar {
  top: 64px !important;
}

.ub-stitch-main,
.cb-stitch-main {
  padding-top: 112px !important;
}

.ub-stitch-sidebar,
.ub-template-panel,
.cb-stitch-sidebar,
.cb-template-panel {
  background: var(--surface-soft) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

.ub-side-head,
.ub-template-head,
.cb-side-head,
.cb-template-head {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

.filter-bar,
.panel,
.accordion-panel,
.metric-card,
.stat-card,
.table-wrap,
.ub-section,
.ub-preset-bar,
.ub-template-item,
.ub-result-section,
.cb-section,
.cb-preset-bar,
.cb-result-section {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}

.ub-section-header,
.cb-section-header {
  background: var(--surface-soft) !important;
  border-color: var(--border) !important;
}

.metric-card strong,
.stat-card .stat-value,
.ub-side-head h2,
.ub-icon,
.ub-preset-name,
.cb-side-head h2,
.cb-icon,
.cb-preset-name {
  color: var(--brand) !important;
}

.custom-btn,
.ub-footer-btn,
.ub-preset-btn,
.ub-sub-action,
.ub-template-mini-btn,
.ub-console-btn,
.ub-btn-opt,
.cb-footer-btn,
.cb-preset-btn,
.cb-sub-action,
.cb-template-mini-btn,
.cb-console-btn,
.cb-btn-opt {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

.custom-btn:hover,
.ub-footer-btn:hover,
.ub-preset-btn:hover,
.ub-console-btn:hover,
.ub-btn-opt:hover,
.cb-footer-btn:hover,
.cb-preset-btn:hover,
.cb-console-btn:hover,
.cb-btn-opt:hover {
  background: var(--surface-soft) !important;
  border-color: var(--brand) !important;
  color: var(--brand) !important;
}

.custom-btn--primary,
.ub-generate-btn,
.ub-new-tpl-btn,
.ub-preset-icon,
.cb-generate-btn,
.cb-new-tpl-btn,
.cb-preset-icon {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: var(--white) !important;
}

.custom-btn--primary:hover,
.ub-generate-btn:hover,
.ub-new-tpl-btn:hover,
.cb-generate-btn:hover,
.cb-new-tpl-btn:hover {
  background: var(--black) !important;
  border-color: var(--black) !important;
  color: var(--white) !important;
}

.custom-btn--ghost,
.ub-footer-btn--ghost,
.ub-console-btn--ghost,
.cb-footer-btn--ghost,
.cb-console-btn--ghost {
  background: var(--white) !important;
  color: var(--text) !important;
}

.custom-btn--danger,
.ub-console-btn--danger,
.cb-console-btn--danger {
  background: var(--white) !important;
  border-color: var(--danger) !important;
  color: var(--danger) !important;
}

input,
select,
textarea,
.date-input,
.dropdown-trigger,
.ub-input,
.ub-select,
.ub-url-input,
.ub-result-textarea,
.cb-input,
.cb-select,
.cb-result-textarea {
  background: var(--white) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus,
.date-input:focus,
.dropdown-trigger:focus-visible,
.ub-input:focus,
.ub-select:focus,
.ub-url-input:focus,
.cb-input:focus,
.cb-select:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(130, 20, 54, 0.12) !important;
  outline: none !important;
}

thead,
th {
  background: var(--black) !important;
  color: rgba(255, 255, 255, 0.82) !important;
}

td {
  background: var(--white) !important;
}

tbody tr:hover td,
.dropdown-option:hover,
.dropdown-option.is-selected {
  background: rgba(130, 20, 54, 0.08) !important;
  color: var(--text) !important;
}

.ub-step--active,
.ub-template-item.is-active,
.cb-step--active,
.cb-template-item.is-active {
  background: rgba(130, 20, 54, 0.08) !important;
  border-color: var(--brand) !important;
  color: var(--brand) !important;
}

.ub-template-code-box,
.ub-template-empty,
.ub-empty-state,
.cb-template-code-box,
.cb-template-empty {
  background: var(--white) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
}

.ub-utm-code-input,
.ub-result-textarea,
.cb-nom-code-input,
.cb-result-textarea {
  color: var(--brand) !important;
}

.ub-footer,
.cb-footer {
  background: var(--white) !important;
  border-top: 1px solid var(--border) !important;
}

@media (max-width: 900px) {
  .header,
  .ub-stitch-topbar,
  .cb-stitch-topbar,
  .header-nav,
  .ub-stitch-nav,
  .cb-stitch-nav {
    display: none !important;
  }
}