@import "tailwindcss";

/* Keddly Design System - SPP.co Inspired */

@layer base {
  :root {
  /* Sidebar colors - dark navy */
  --color-sidebar: #1e2433;
  --color-sidebar-hover: #2a3142;
  --color-sidebar-active: #343d52;
  --color-sidebar-border: #2d3648;

  /* Text colors */
  --color-text-primary: #111827;
  --color-text-secondary: #6b7280;
  --color-text-muted: #9ca3af;

  /* Accent colors */
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;

  /* Status colors */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --color-info: #6366f1;
}

html {
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: #f9fafb;
  color: #111827;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }
}

@layer components {
  /* SIDEBAR STYLES */
  .sidebar {
  background-color: var(--color-sidebar);
  width: 220px;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  z-index: 40;
  overflow: hidden;
}

.sidebar-logo {
  padding: 1.25rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-section {
  padding: 1rem 0.75rem;
}

.sidebar-section-title {
  font-size: 10px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 0.75rem;
  margin-bottom: 0.5rem;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 13px;
  color: #9ca3af;
  transition: all 0.15s ease;
  cursor: pointer;
  text-decoration: none;
}

.sidebar-item:hover {
  color: white;
  background-color: rgba(255, 255, 255, 0.05);
}

.sidebar-item.active {
  color: white;
  background-color: rgba(255, 255, 255, 0.1);
}

.sidebar-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.sidebar-footer {
  margin-top: auto;
  padding: 0.75rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 11px;
  color: #6b7280;
}

/* Sidebar scrollbar */
.sidebar-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--color-sidebar-active) var(--color-sidebar);
}

.sidebar-scroll::-webkit-scrollbar {
  width: 4px;
}

.sidebar-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
  background-color: var(--color-sidebar-active);
  border-radius: 2px;
}

/* =====================
   TOPBAR STYLES
   ===================== */
.topbar {
  height: 56px;
  background-color: white;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.topbar-icon-btn {
  padding: 0.5rem;
  color: #6b7280;
  border-radius: 0.5rem;
  transition: all 0.15s ease;
  cursor: pointer;
  background: none;
  border: none;
}

.topbar-icon-btn:hover {
  color: #374151;
  background-color: #f3f4f6;
}

.topbar-icon-btn svg {
  width: 20px;
  height: 20px;
}

/* =====================
   PAGE STYLES
   ===================== */
.page-container {
  margin-left: 220px;
  min-height: 100vh;
  overflow-x: hidden;
}

.page-content {
  padding: 1.5rem;
}

.page-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #111827;
}

.page-subtitle {
  font-size: 13px;
  color: #6b7280;
  margin-top: 0.25rem;
}

/* =====================
   CARD STYLES
   ===================== */
.card {
  background-color: white;
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;
}

.card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-title {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.card-body {
  padding: 1.25rem;
}

/* =====================
   TABLE STYLES - SPP Style
   ===================== */
.spp-table {
  width: 100%;
}

.spp-table thead {
  border-bottom: 1px solid #e5e7eb;
}

.spp-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 11px;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.spp-table tbody tr {
  border-bottom: 1px solid #f3f4f6;
  transition: background-color 0.15s ease;
}

.spp-table tbody tr:last-child {
  border-bottom: none;
}

.spp-table tbody tr:hover {
  background-color: rgba(249, 250, 251, 0.5);
}

.spp-table td {
  padding: 0.875rem 1rem;
  font-size: 13px;
  color: #111827;
}

/* =====================
   STATUS BADGES - SPP Style (with left border)
   ===================== */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  font-size: 11px;
  font-weight: 500;
  border-radius: 0.25rem;
  border-left: 2px solid;
}

.status-badge-new {
  background-color: #eff6ff;
  color: #1d4ed8;
  border-left-color: #3b82f6;
}

.status-badge-contacted {
  background-color: #fffbeb;
  color: #b45309;
  border-left-color: #f59e0b;
}

.status-badge-qualified {
  background-color: #f5f3ff;
  color: #6d28d9;
  border-left-color: #8b5cf6;
}

.status-badge-converted {
  background-color: #ecfdf5;
  color: #047857;
  border-left-color: #10b981;
}

.status-badge-unqualified {
  background-color: #f3f4f6;
  color: #4b5563;
  border-left-color: #9ca3af;
}

.status-badge-lost {
  background-color: #fef2f2;
  color: #dc2626;
  border-left-color: #ef4444;
}

.status-badge-pending {
  background-color: #fffbeb;
  color: #b45309;
  border-left-color: #f59e0b;
}

.status-badge-complete {
  background-color: #ecfdf5;
  color: #047857;
  border-left-color: #10b981;
}

.status-badge-draft {
  background-color: #f3f4f6;
  color: #4b5563;
  border-left-color: #9ca3af;
}

.status-badge-published {
  background-color: #ecfdf5;
  color: #047857;
  border-left-color: #10b981;
}

.status-badge-archived {
  background-color: #f3f4f6;
  color: #6b7280;
  border-left-color: #6b7280;
}

.status-badge-active {
  background-color: #ecfdf5;
  color: #047857;
  border-left-color: #10b981;
}

.status-badge-paused {
  background-color: #fffbeb;
  color: #b45309;
  border-left-color: #f59e0b;
}

.status-badge-sending {
  background-color: #eff6ff;
  color: #1d4ed8;
  border-left-color: #3b82f6;
}

.status-badge-sent {
  background-color: #ecfdf5;
  color: #047857;
  border-left-color: #10b981;
}

.status-badge-scheduled {
  background-color: #f5f3ff;
  color: #6d28d9;
  border-left-color: #8b5cf6;
}

/* =====================
   AVATAR STYLES
   ===================== */
.avatar {
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  flex-shrink: 0;
}

.avatar-xs {
  width: 24px;
  height: 24px;
  font-size: 10px;
}

.avatar-sm {
  width: 32px;
  height: 32px;
  font-size: 12px;
}

.avatar-md {
  width: 40px;
  height: 40px;
  font-size: 14px;
}

.avatar-lg {
  width: 48px;
  height: 48px;
  font-size: 16px;
}

.avatar-blue { background-color: #3b82f6; color: white; }
.avatar-green { background-color: #10b981; color: white; }
.avatar-amber { background-color: #f59e0b; color: white; }
.avatar-red { background-color: #ef4444; color: white; }
.avatar-purple { background-color: #8b5cf6; color: white; }
.avatar-pink { background-color: #ec4899; color: white; }
.avatar-indigo { background-color: #6366f1; color: white; }
.avatar-gray { background-color: #9ca3af; color: white; }

/* =====================
   BUTTON STYLES
   ===================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  font-size: 13px;
  font-weight: 500;
  border-radius: 0.375rem;
  transition: all 0.15s ease;
  cursor: pointer;
  border: none;
}

.btn-sm {
  padding: 0.375rem 0.625rem;
  font-size: 12px;
}

.btn-lg {
  padding: 0.625rem 1.25rem;
  font-size: 14px;
}

.btn-primary {
  background-color: #3b82f6;
  color: white;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-primary:hover {
  background-color: #2563eb;
}

.btn-secondary {
  background-color: white;
  color: #374151;
  border: 1px solid #d1d5db;
}

.btn-secondary:hover {
  background-color: #f9fafb;
}

.btn-danger {
  background-color: #ef4444;
  color: white;
}

.btn-danger:hover {
  background-color: #dc2626;
}

.btn-ghost {
  background: none;
  color: #4b5563;
}

.btn-ghost:hover {
  color: #111827;
  background-color: #f3f4f6;
}

/* =====================
   FORM STYLES
   ===================== */
.form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.375rem;
}

.form-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 13px;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  background-color: white;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px #3b82f6;
}

.form-input::placeholder {
  color: #9ca3af;
}

.form-checkbox {
  width: 16px;
  height: 16px;
  border-radius: 0.25rem;
  border: 1px solid #d1d5db;
  cursor: pointer;
}

.form-checkbox:checked {
  background-color: #3b82f6;
  border-color: #3b82f6;
}

/* Toggle switch */
.form-toggle {
  appearance: none;
  width: 36px;
  height: 20px;
  background-color: #d1d5db;
  border-radius: 9999px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.form-toggle::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  background-color: white;
  top: 2px;
  left: 2px;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.form-toggle:checked {
  background-color: #3b82f6;
}

.form-toggle:checked::before {
  transform: translateX(16px);
}

.form-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

/* Select elements */
.form-select,
select.form-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.25em 1.25em;
  padding-right: 2.25rem;
  cursor: pointer;
}

.form-select:focus,
select.form-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px #3b82f6;
}

/* =====================
   TABS STYLES
   ===================== */
.tab-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  font-size: 12px;
  font-weight: 500;
  color: #4b5563;
  background-color: #f3f4f6;
  border-radius: 9999px;
  transition: all 0.15s ease;
  text-decoration: none;
}

.tab-pill:hover {
  background-color: #e5e7eb;
}

.tab-pill.active {
  background-color: #dbeafe;
  color: #1d4ed8;
}

.tab-underline {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  border-bottom: 2px solid transparent;
  transition: all 0.15s ease;
  text-decoration: none;
  margin-bottom: -1px;
}

.tab-underline:hover {
  color: #374151;
}

.tab-underline.active {
  color: #2563eb;
  border-bottom-color: #2563eb;
}

/* =====================
   DROPDOWN STYLES
   ===================== */
.dropdown-menu {
  position: absolute;
  z-index: 50;
  background-color: white;
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  padding: 0.25rem 0;
  min-width: 180px;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  font-size: 13px;
  color: #374151;
  cursor: pointer;
  transition: background-color 0.15s ease;
  text-decoration: none;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.dropdown-item:hover {
  background-color: #f9fafb;
}

.dropdown-divider {
  margin: 0.25rem 0;
  border-top: 1px solid #f3f4f6;
}

/* =====================
   MODAL STYLES
   ===================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 40;
}

.modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  border-radius: 0.75rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  z-index: 50;
  width: 100%;
  max-width: 32rem;
}

.modal-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

.modal-body {
  padding: 1.25rem;
  max-height: 70vh;
  overflow-y: auto;
}

.modal-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* =====================
   ANIMATIONS
   ===================== */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fade-in 0.2s ease-out;
}

.animate-slide-up {
  animation: slide-up 0.2s ease-out;
}

/* Task completion animations */
@keyframes task-complete-check {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes task-fade-out {
  0% { opacity: 1; transform: translateX(0); height: auto; }
  70% { opacity: 0; transform: translateX(20px); }
  100% { opacity: 0; height: 0; padding: 0; margin: 0; overflow: hidden; }
}

@keyframes task-slide-in {
  0% { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Turbo removes elements - add exit animation via [data-turbo-remove] */
turbo-frame[data-turbo-remove] {
  animation: task-fade-out 0.3s ease-out forwards;
}

/* New tasks sliding in */
turbo-frame:not(.task-completed):first-child {
  animation: task-slide-in 0.25s ease-out;
}

/* Completed task row styling */
.task-completed {
  transition: opacity 0.2s ease;
}

/* =====================
   UTILITIES
   ===================== */
.text-muted {
  color: #6b7280;
}

/* Hide scrollbar but keep functionality */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* =====================
   KANBAN DRAG & DROP
   ===================== */

/* Card being dragged - subtle lift effect */
.kanban-drag {
  transform: scale(1.02);
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  z-index: 9999;
  opacity: 0.95;
}

/* Ghost placeholder - minimal style */
.kanban-ghost {
  opacity: 0;
  height: 4px !important;
  padding: 0 !important;
  margin: 0.5rem 0 !important;
  background: #3b82f6;
  border-radius: 2px;
  border: none !important;
  box-shadow: none !important;
}

.kanban-ghost * {
  display: none !important;
}

/* Card when selected/chosen */
.kanban-chosen {
  cursor: grabbing;
}

/* Dark overlay when dragging - with fade-in animation */
.is-dragging::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 40;
  pointer-events: none;
  animation: overlay-fade-in 0.2s ease-out forwards;
}

@keyframes overlay-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Keep columns visible above overlay */
.is-dragging .flex-shrink-0.w-80 {
  position: relative;
  z-index: 50;
}

/* Column content area */
[data-deals-kanban-target="column"] {
  position: relative;
  transition: all 0.15s ease;
  border-radius: 0 0 0.75rem 0.75rem;
}

/* Highlight column that contains the ghost (drop target) */
.is-dragging [data-deals-kanban-target="column"]:has(.kanban-ghost) {
  background-color: #eff6ff !important;
}

/* Drop zone hint - appears when dragging */
.kanban-drop-hint {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  margin-top: 0.5rem;
  border: 1px dashed #d1d5db;
  border-radius: 0.5rem;
  color: #9ca3af;
  font-size: 0.75rem;
  font-weight: 500;
  background: #f9fafb;
  transition: all 0.15s ease;
}

.is-dragging .kanban-drop-hint {
  display: flex;
}

/* Highlight drop hint in active column */
.is-dragging [data-deals-kanban-target="column"]:has(.kanban-ghost) .kanban-drop-hint {
  border-color: #3b82f6;
  color: #3b82f6;
  background: #dbeafe;
}

/* =====================
   FILE DROPZONE
   ===================== */

/* Dark overlay when dragging files */
.file-dropzone-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 40;
  pointer-events: none;
  transition: background 0.2s ease;
}

.file-dropzone-overlay.active {
  background: rgba(0, 0, 0, 0.4);
}

/* Keep dropzone elevated above overlay */
.file-dropzone-elevated {
  position: relative;
  z-index: 50;
  transform: scale(1.02);
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

/* Dropzone state classes - single source of truth */
.dropzone-default {
  border-color: #e5e7eb;
  background-color: #f9fafb;
}

.dropzone-default .dropzone-icon { color: #9ca3af; }
.dropzone-default .dropzone-text { color: #6b7280; }
.dropzone-default .dropzone-hint { color: #6b7280; }

.dropzone-dragging {
  border-color: #60a5fa;
  background-color: #eff6ff;
}

.dropzone-dragging .dropzone-icon { color: #3b82f6; }
.dropzone-dragging .dropzone-text { color: #1d4ed8; }
.dropzone-dragging .dropzone-hint { color: #3b82f6; }

.dropzone-success {
  border-color: #4ade80;
  background-color: #f0fdf4;
}

.dropzone-success .dropzone-icon { color: #22c55e; }
.dropzone-success .dropzone-text { color: #15803d; font-weight: 600; }
.dropzone-success .dropzone-hint { color: #16a34a; }

.dropzone-error {
  border-color: #f87171;
  background-color: #fef2f2;
}

.dropzone-error .dropzone-icon { color: #ef4444; }
.dropzone-error .dropzone-text { color: #b91c1c; font-weight: 600; }
.dropzone-error .dropzone-hint { color: #dc2626; }

/* Note Icon Selector */
.note-icon-btn {
  opacity: 0.5;
}

.note-icon-btn:hover {
  opacity: 0.8;
}

.note-icon-btn.note-icon-selected {
  opacity: 1;
  background-color: #f3f4f6;
  border-color: #d1d5db;
}

/* =====================
   PAGINATION (Pagy)
   ===================== */
.pagy {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.pagy a,
.pagy span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  border-radius: 0.375rem;
  transition: all 0.15s ease;
}

.pagy a:hover {
  color: #111827;
  background-color: #f3f4f6;
}

.pagy a.current,
.pagy span.current {
  color: white;
  background-color: #3b82f6;
}

.pagy span.gap {
  color: #9ca3af;
}

/* =====================
   TEMPLATE CARD SELECTOR
   ===================== */
.template-selector {
  cursor: pointer;
}

.template-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;
  background-color: white;
  padding: 1rem;
  transition: all 0.15s ease;
}

.template-selector:hover .template-card {
  border-color: #d1d5db;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.template-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 10px;
  font-weight: 500;
}

.template-check {
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  border: 2px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  opacity: 0;
}

.template-check svg {
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* Show check circle only on hover or when selected */
.template-selector:hover .template-check {
  opacity: 1;
}

.template-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.375rem;
  background-color: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  transition: all 0.15s ease;
}

.template-selector:hover .template-icon {
  background-color: #e5e7eb;
}

/* Selected state using :has() - for blue theme (VLS, Classic) */
.template-selector:has(input:checked) .template-check {
  opacity: 1;
  border-color: #3b82f6;
  background-color: #3b82f6;
}

.template-selector:has(input:checked) .template-check svg {
  opacity: 1;
}

.template-selector:has(input:checked) .template-icon {
  background-color: #dbeafe;
}

.template-selector:has(input:checked) .template-icon svg {
  color: #2563eb;
}

/* Lead Magnet specific - emerald theme */
.template-selector:has(input[value="lead_magnet"]:checked) .template-check {
  opacity: 1;
  border-color: #10b981;
  background-color: #10b981;
}

.template-selector:has(input[value="lead_magnet"]:checked) .template-icon {
  background-color: #d1fae5;
}

.template-selector:has(input[value="lead_magnet"]:checked) .template-icon svg {
  color: #059669;
}

/* =====================
   RESPONSIVE - Hide sidebar on mobile
   ===================== */
@media (max-width: 1023px) {
  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .page-container {
    margin-left: 0;
  }
}

/* =====================
   INLINE LANDING PAGE EDITOR
   ===================== */

/* Editor container */
.inline-editor {
  position: relative;
}

/* Editable fields - subtle hover effect */
.editable-field {
  outline: none;
  transition: box-shadow 0.15s ease, background-color 0.15s ease;
  border-radius: 4px;
  cursor: text;
}

.editable-field:hover {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.editable-field:focus,
.editable-field.editing {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
  background-color: rgba(255, 255, 255, 0.9);
}

/* Editable images */
.editable-image {
  cursor: pointer;
  transition: filter 0.15s ease;
  position: relative;
}

.editable-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.15s ease;
  pointer-events: none;
}

.editable-image:hover::after {
  background: rgba(0, 0, 0, 0.1);
}

.editable-image:hover {
  outline: 2px dashed rgba(59, 130, 246, 0.5);
  outline-offset: 2px;
}

/* Editable video placeholder */
.editable-video {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.editable-video:hover {
  transform: scale(1.01);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

/* Block wrapper */
.editor-block {
  position: relative;
}

/* Block controls - appear on hover */
.block-controls {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  gap: 0.5rem;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 20;
}

.editor-block:hover .block-controls {
  opacity: 1;
}

.block-control-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: white;
  border: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  color: #6b7280;
}

.block-control-btn:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  color: #374151;
}

/* Visibility toggle states */
.visibility-toggle .eye-off-icon { display: none; }
.visibility-toggle.is-hidden .eye-icon { display: none; }
.visibility-toggle.is-hidden .eye-off-icon { display: block; }
.visibility-toggle.is-hidden {
  color: #ef4444;
  border-color: #fecaca;
  background: #fef2f2;
}

/* Hidden block overlay */
.block-hidden {
  position: relative;
}

.block-hidden::before {
  content: 'Sección oculta';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0.95) 10px,
    rgba(239, 68, 68, 0.05) 10px,
    rgba(239, 68, 68, 0.05) 20px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  z-index: 10;
  pointer-events: none;
}

/* Save indicator */
.save-indicator {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: 12px;
  font-weight: 500;
  border-radius: 9999px;
  transition: all 0.2s ease;
}

.save-indicator-hidden {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}

.save-indicator-saving {
  background: #eff6ff;
  color: #2563eb;
}

.save-indicator-saved {
  background: #ecfdf5;
  color: #059669;
}

.save-indicator-error {
  background: #fef2f2;
  color: #dc2626;
}

/* Image modal */
.image-modal-overlay,
.video-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: fade-in 0.2s ease;
}

.image-modal,
.video-modal {
  background: white;
  border-radius: 12px;
  width: 100%;
  max-width: 480px;
  margin: 1rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  animation: slide-up 0.2s ease;
}

.image-modal-header,
.video-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #f3f4f6;
}

.image-modal-header h3,
.video-modal-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
}

.image-modal-close,
.video-modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  font-size: 24px;
  color: #9ca3af;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.image-modal-close:hover,
.video-modal-close:hover {
  color: #374151;
  background: #f3f4f6;
}

.image-modal-body,
.video-modal-body {
  padding: 1.25rem;
}

.image-preview {
  background: #f3f4f6;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1rem;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.image-input-group,
.video-input-group {
  margin-bottom: 0.75rem;
}

.image-input-group label,
.video-input-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.375rem;
}

.image-url-input,
.video-url-input {
  width: 100%;
  padding: 0.625rem 0.75rem;
  font-size: 13px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.image-url-input:focus,
.video-url-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px #3b82f6;
}

.image-tip {
  font-size: 12px;
  color: #9ca3af;
}

.video-providers {
  display: flex;
  gap: 1rem;
  margin-top: 0.75rem;
}

.video-provider {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 12px;
  color: #6b7280;
}

.image-modal-footer,
.video-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid #f3f4f6;
  background: #f9fafb;
  border-radius: 0 0 12px 12px;
}

/* Settings panel slide-in */
.settings-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 360px;
  max-width: 100%;
  background: white;
  box-shadow: -4px 0 15px rgba(0, 0, 0, 0.1);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 50;
  overflow-y: auto;
}

.settings-panel-open {
  transform: translateX(0);
}

.settings-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}

.settings-panel-body {
  padding: 1.25rem;
}

/* Editor top bar */
.editor-topbar {
  position: sticky;
  top: 0;
  background: white;
  border-bottom: 1px solid #e5e7eb;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 30;
}

.editor-topbar-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.editor-topbar-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Landing page preview styling */
.landing-preview {
  font-family: 'DM Sans', system-ui, sans-serif;
  background: white;
}

.landing-preview-serif {
  font-family: 'DM Serif Display', Georgia, serif;
}

/* =====================
   ELEMENT VISIBILITY TOGGLE SYSTEM
   Simple, reliable visibility controls for editable elements
   ===================== */

/*
 * Architecture:
 * - .editable-element / .editable-element-inline: wrapper with position:relative
 * - .visibility-toggle: absolute positioned button (created by JS or pre-rendered)
 * - .is-hidden-element: state class when element content is hidden
 *
 * The JavaScript controller (inline_editor_controller.js) handles:
 * - Creating toggle buttons dynamically if not pre-rendered
 * - Toggle click events and server sync
 * - Optimistic UI updates with animations
 */

/* =====================
   EDITABLE ELEMENT WRAPPERS
   ===================== */

.editable-element {
  position: relative;
  border-radius: 4px;
  transition: outline 0.15s ease;
}

.editable-element:hover {
  outline: 2px solid rgba(59, 130, 246, 0.2);
  outline-offset: 4px;
}

.editable-element-inline {
  position: relative;
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  padding: 2px 4px;
  margin: -2px -4px;
  transition: background 0.15s ease;
}

.editable-element-inline:hover {
  background: rgba(59, 130, 246, 0.08);
}

/* =====================
   HIDDEN STATE (EDITOR MODE)
   Ghost appearance - element stays in layout
   ===================== */

.editable-element.is-hidden-element,
.editable-element-inline.is-hidden-element {
  opacity: 0.4;
  outline: 2px dashed rgba(239, 68, 68, 0.5);
  outline-offset: 4px;
}

.editable-element.is-hidden-element:hover,
.editable-element-inline.is-hidden-element:hover {
  opacity: 0.5;
  outline-color: rgba(239, 68, 68, 0.7);
}

/* Inline elements keep their display type */
.editable-element-inline.is-hidden-element {
  display: inline-flex !important;
}

/* =====================
   VISIBILITY TOGGLE BUTTON
   ===================== */

.visibility-toggle {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 50;
  width: 24px;
  height: 24px;
  padding: 0;
  background: white;
  border: 2px solid #3b82f6;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;

  /* Hidden by default, shown on parent hover */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Show toggle on element hover */
.editable-element:hover > .visibility-toggle,
.editable-element-inline:hover > .visibility-toggle {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Always show when element is hidden */
.editable-element.is-hidden-element > .visibility-toggle,
.editable-element-inline.is-hidden-element > .visibility-toggle {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.visibility-toggle:hover {
  transform: scale(1.1);
  background: #f8fafc;
}

.visibility-toggle:active {
  transform: scale(0.95);
}

/* Icon styling */
.visibility-toggle svg {
  width: 14px;
  height: 14px;
  color: #64748b;
}

.visibility-toggle:hover svg {
  color: #334155;
}

/* Icon states - show/hide based on toggle state */
.visibility-toggle .icon-visible { display: block; }
.visibility-toggle .icon-hidden { display: none; }

.visibility-toggle.is-hidden .icon-visible { display: none; }
.visibility-toggle.is-hidden .icon-hidden { display: block; }

/* Hidden state styling for toggle button */
.visibility-toggle.is-hidden {
  background: #fef2f2;
  border-color: #f87171;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.2);
}

.visibility-toggle.is-hidden svg {
  color: #dc2626;
}

.visibility-toggle.is-hidden:hover {
  background: #fee2e2;
  border-color: #ef4444;
}

/* Inline elements - smaller toggle */
.editable-element-inline > .visibility-toggle {
  width: 18px;
  height: 18px;
  top: -10px;
  right: -10px;
}

.editable-element-inline > .visibility-toggle svg {
  width: 11px;
  height: 11px;
}

/* =====================
   PREVIEW/PUBLIC MODE
   Hidden elements completely removed
   ===================== */

.preview-mode .editable-element.is-hidden-element,
.public-view .editable-element.is-hidden-element,
.landing-preview:not(.editor-active) .editable-element.is-hidden-element,
.preview-mode .editable-element-inline.is-hidden-element,
.public-view .editable-element-inline.is-hidden-element,
.landing-preview:not(.editor-active) .editable-element-inline.is-hidden-element {
  display: none !important;
}

/* Hide all toggles in preview/public */
.preview-mode .visibility-toggle,
.public-view .visibility-toggle,
.landing-preview:not(.editor-active) .visibility-toggle {
  display: none !important;
}

/* =====================
   HIDEABLE GROUPS
   For badge rows, etc.
   ===================== */

.hideable-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.hideable-group .group-separator {
  transition: opacity 0.15s ease;
}

/* Hide separators next to hidden elements in preview */
.preview-mode .hideable-group > .is-hidden-element + .group-separator,
.landing-preview:not(.editor-active) .hideable-group > .is-hidden-element + .group-separator {
  display: none;
}

/* =====================
   ANIMATIONS
   ===================== */

@keyframes element-fade-out {
  from { opacity: 1; }
  to { opacity: 0.4; }
}

@keyframes element-fade-in {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

.editable-element.animating-hide,
.editable-element-inline.animating-hide {
  animation: element-fade-out 0.2s ease-out forwards;
}

.editable-element.animating-show,
.editable-element-inline.animating-show {
  animation: element-fade-in 0.2s ease-out forwards;
}

.visibility-toggle.just-toggled {
  animation: pulse 0.3s ease-out;
}

@keyframes pulse {
  50% { transform: scale(1.15); }
}

/* =====================
   ACCESSIBILITY
   ===================== */

.visibility-toggle:focus-visible {
  outline: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  box-shadow: 0 0 0 2px white, 0 0 0 4px #3b82f6;
}

.visibility-toggle .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =====================
   RESPONSIVE
   ===================== */

@media (max-width: 768px) {
  /* Always show toggles on mobile (no hover) */
  .editable-element > .visibility-toggle,
  .editable-element-inline > .visibility-toggle {
    opacity: 0.7;
    visibility: visible;
    pointer-events: auto;
  }

  .editable-element-inline > .visibility-toggle {
    width: 20px;
    height: 20px;
  }
}
}