/* Kanal AI Theme Redesign */
:root {
  --primary: #B91C1C;
  --primary-hover: #FF6B00;
  --bg-accent: #FFF5F5;
  --dark-base: #7F1D1D;
  --text-dark: #0f172a;

  --font-family: 'Inter', 'Poppins', sans-serif;

  --border-radius-button: 12px;
  --border-radius-card: 16px;
  --border-radius-input: 10px;

  --shadow-soft: 0 4px 12px rgba(185, 28, 28, 0.08);
  --shadow-hover: 0 8px 24px rgba(185, 28, 28, 0.18);

  --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Global Overrides */
body {
  font-family: var(--font-family) !important;
  background: var(--bg-accent) !important;
  color: var(--text-dark) !important;
}

/* Background Gradients to Solid */
section.features,
section.pricing,
.left-panel,
.right-panel,
.auth-container,
.main-container {
  background: transparent !important;
}

.left-panel::before,
.left-panel::after,
body::before,
body::after {
  display: none !important;
}

/* Typography Overrides */
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
li,
a {
  font-family: var(--font-family) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--dark-base);
  /* Removed !important to allow gradients/custom classes */
}

p {
  color: #334155;
}

/* Navbar */
nav,
header,
.nav-bar,
.top-nav {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(185, 28, 28, 0.15) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important;
}

nav a,
header a,
.user-name {
  color: #555555 !important;
  font-weight: 500;
}

.logo,
.brand,
.brand span {
  color: #111827 !important;
}

.logo:hover,
.logo:active,
.logo:focus,
.logo:visited {
  color: #111827 !important;
  text-decoration: none !important;
}

/* Primary Buttons */
button,
.btn-primary,
.btn-action,
.btn-submit,
.btn-start,
.btn-signin,
.export-btn,
.btn-save,
.btn-generate-flowchart,
.btn-generate-pie,
.btn-generate,
.btn-plan {
  background: var(--primary) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--border-radius-button) !important;
  transition: var(--transition-smooth) !important;
  padding: 10px 20px !important;
  box-shadow: 0 4px 12px rgba(185, 28, 28, 0.25) !important;
  text-decoration: none !important;
  align-items: center !important;
  justify-content: center !important;
}

button:hover,
.btn-primary:hover,
.btn-action:hover,
.btn-submit:hover,
.btn-start:hover,
.btn-signin:hover,
.export-btn:hover,
.btn-save:hover,
.btn-plan:hover {
  background: var(--primary-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(255, 107, 0, 0.35) !important;
}

/* Secondary Buttons */
.btn-secondary,
.btn-outline,
.btn-cancel,
.btn-other,
.back-btn,
.btn-signout {
  background: transparent !important;
  color: var(--primary) !important;
  border: 1px solid var(--primary) !important;
  border-radius: var(--border-radius-button) !important;
  transition: var(--transition-smooth) !important;
  box-shadow: none !important;
}

.theme-toggle-btn {
  background: #ffffff !important;
  color: var(--primary) !important;
  border: 2px solid var(--primary) !important;
  border-radius: var(--border-radius-button) !important;
  box-shadow: none !important;
}

.btn-secondary:hover,
.btn-outline:hover,
.btn-cancel:hover,
.btn-other:hover,
.back-btn:hover,
.btn-signout:hover,
.theme-toggle-btn:hover {
  background: #FFF2F2 !important;
  transform: translateY(-2px) !important;
}

/* Cards & Panels */
.card,
.pricing-card,
.auth-card,
.glass-panel,
.chart-wrapper,
.history-panel,
.profile-card {
  background: #ffffff !important;
  border-radius: var(--border-radius-card) !important;
  box-shadow: var(--shadow-soft) !important;
  border: 1px solid rgba(185, 28, 28, 0.1) !important;
}

.card:hover,
.pricing-card:hover {
  box-shadow: var(--shadow-hover) !important;
  border-color: var(--primary) !important;
  transform: translateY(-4px) !important;
}

/* Inputs & Textareas */
input,
select,
textarea,
.prompt-textarea,
.form-control {
  background: #ffffff !important;
  color: var(--text-dark) !important;
  border: 1px solid rgba(185, 28, 28, 0.2) !important;
  border-radius: var(--border-radius-input) !important;
  padding: 12px 16px !important;
  transition: var(--transition-smooth) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

input:focus,
select:focus,
textarea:focus,
.prompt-textarea:focus,
.form-control:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.15) !important;
  outline: none !important;
}

/* AI Workspace Overrides */
.prompt-container,
.input-area {
  background: #ffffff !important;
  border-radius: var(--border-radius-card) !important;
  box-shadow: var(--shadow-soft) !important;
  border: 1px solid rgba(185, 28, 28, 0.15) !important;
}

.workspace,
.canvas-container {
  background-color: #FFF5F5 !important;
  background-image: linear-gradient(rgba(185, 28, 28, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(185, 28, 28, 0.05) 1px, transparent 1px) !important;
  background-size: 20px 20px !important;
}

.badge,
body.dark-mode .badge {
  background: #FFF3CD !important;
  color: var(--dark-base) !important;
  border: 1px solid var(--primary-hover) !important;
}

.badge span,
body.dark-mode .badge span {
  color: var(--dark-base) !important;
}

.icon,
svg {
  stroke: currentColor;
}

/* SVG Chart Overrides (where possible) */
.node rect {
  fill: var(--bg-accent) !important;
  stroke: var(--primary) !important;
}

.edgePath path {
  stroke: var(--primary) !important;
}

/* Dark Mode Overrides */
body.dark-mode {
  background: #0f172a !important;
  color: #f8fafc !important;
  --nav-btn-color: #e2e8f0;
  --nav-btn-bg: rgba(255, 255, 255, 0.08);
  --nav-btn-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --nav-btn-bg-hover: rgba(255, 255, 255, 0.15);
  --nav-btn-color-hover: #fff;
  --nav-btn-shadow-hover: 0 6px 8px -1px rgba(0, 0, 0, 0.4), 0 3px 6px -1px rgba(0, 0, 0, 0.3);
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode p,
body.dark-mode span,
body.dark-mode li {
  color: #f8fafc !important;
}

body.dark-mode .card,
body.dark-mode .pricing-card,
body.dark-mode .auth-card,
body.dark-mode .glass-panel,
body.dark-mode .chart-wrapper,
body.dark-mode .history-panel,
body.dark-mode .profile-card,
body.dark-mode .prompt-container,
body.dark-mode .input-area {
  background: #1e293b !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #f8fafc !important;
}

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea,
body.dark-mode .prompt-textarea,
body.dark-mode .form-control {
  background: #0f172a !important;
  color: #f8fafc !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .workspace,
body.dark-mode .canvas-container {
  background-color: #0f172a !important;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) !important;
}

body.dark-mode nav,
body.dark-mode header,
body.dark-mode .nav-bar,
body.dark-mode .top-nav {
  background: #1e293b !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode .logo {
  color: #f1f5f9 !important;
}

body.dark-mode .logo:hover,
body.dark-mode .logo:active,
body.dark-mode .logo:focus,
body.dark-mode .logo:visited {
  color: #f1f5f9 !important;
}

/* Custom Overrides for Upload Zone and Empty State */
.upload-zone {
  border: 2px dashed var(--primary) !important;
  background: rgba(185, 28, 28, 0.02) !important;
}

.upload-zone:hover,
.upload-zone.drag-over {
  background: rgba(185, 28, 28, 0.06) !important;
  border-color: var(--primary-hover) !important;
  box-shadow: 0 0 18px rgba(185, 28, 28, 0.15) !important;
}

.upload-zone-label {
  color: var(--text-dark) !important;
}

.upload-zone-sub {
  color: #64748b !important;
}

.upload-zone-icon {
  color: var(--primary) !important;
}

.empty-state {
  background: #ffffff !important;
  border: 1px solid rgba(185, 28, 28, 0.15) !important;
  box-shadow: 0 10px 30px rgba(185, 28, 28, 0.06) !important;
  border-radius: var(--border-radius-card) !important;
}

.empty-icon {
  background: #FFF5F5 !important;
  border: 1.5px solid var(--primary-hover) !important;
  color: var(--primary) !important;
}

.empty-title {
  color: var(--text-dark) !important;
  text-shadow: none !important;
}

.empty-desc {
  color: #64748b !important;
}

/* Dark Mode Overrides for Upload Zone and Empty State */
body.dark-mode .upload-zone {
  background: rgba(185, 28, 28, 0.05) !important;
}

body.dark-mode .upload-zone-label {
  color: #ffffff !important;
}

body.dark-mode .upload-zone-sub {
  color: #94a3b8 !important;
}

body.dark-mode .empty-state {
  background: #1e293b !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .empty-icon {
  background: #0f172a !important;
  border-color: var(--primary) !important;
}

body.dark-mode .empty-title {
  color: #ffffff !important;
}

body.dark-mode .empty-desc {
  color: #94a3b8 !important;
}

/* Fix password toggle */
.toggle-password {
  position: absolute !important;
  right: 14px !important;
  z-index: 10 !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  color: #9ca3af !important;
  font-size: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  transform: none !important;
  transition: color 0.2s !important;
}

.toggle-password:hover {
  color: var(--primary) !important;
  background: none !important;
  transform: none !important;
  box-shadow: none !important;
}

.toggle-password svg {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  pointer-events: none !important;
}