/* Nuusletta editor - Responsive & Override Styles */

/* PicoCSS Overrides */
:root {
  --pico-primary-500: var(--hsbc-red) !important;
  --pico-primary-600: var(--hsbc-red-dark) !important;
  --pico-primary-700: var(--hsbc-red-dark) !important;
  --pico-background-color: var(--gray-50) !important;
  --pico-card-background-color: var(--white) !important;
  --pico-card-border-color: var(--gray-200) !important;
  --pico-color: var(--gray-900) !important;
  --pico-muted-color: var(--gray-500) !important;
  --pico-border-color: var(--gray-300) !important;
  --pico-border-radius: var(--radius) !important;
  --pico-spacing: var(--space-4) !important;
  --pico-font-family: var(--font-sans) !important;
}

/* Complete element override */
*, *::before, *::after {
  box-sizing: border-box !important;
}

body {
  background: var(--gray-50) !important;
  font-family: var(--font-sans) !important;
  line-height: 1.6 !important;
  color: var(--gray-900) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Override PicoCSS form elements */
input, select, textarea, fieldset, button {
  font-family: var(--font-sans) !important;
  border-radius: var(--radius) !important;
}

/* Override PicoCSS card styles */
[role="group"], .card, article {
  background: var(--white) !important;
  border: 1px solid var(--gray-200) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Override PicoCSS button styles */
button, [type="button"], [type="submit"], [type="reset"], [role="button"], 
input[type="file"]::-webkit-file-upload-button,
input[type="file"]::file-selector-button {
  background-color: var(--hsbc-red) !important;
  border-color: var(--hsbc-red) !important;
  color: white !important;
  font-family: var(--font-sans) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  padding: var(--space-3) var(--space-4) !important;
  border-radius: var(--radius) !important;
  cursor: pointer !important;
}

button:hover, [type="button"]:hover, [type="submit"]:hover, [type="reset"]:hover, [role="button"]:hover,
input[type="file"]::-webkit-file-upload-button:hover,
input[type="file"]::file-selector-button:hover {
  background-color: var(--hsbc-red-dark) !important;
  border-color: var(--hsbc-red-dark) !important;
  transform: translateY(-1px) !important;
}

/* Override PicoCSS link styles */
a {
  color: var(--hsbc-red) !important;
  text-decoration: none !important;
}

a:hover {
  color: var(--hsbc-red-dark) !important;
  text-decoration: underline !important;
}

/* Override PicoCSS focus styles */
input:focus, select:focus, textarea:focus, button:focus, [role="button"]:focus {
  outline: none !important;
  border-color: var(--hsbc-red) !important;
  box-shadow: 0 0 0 3px rgba(219, 0, 17, 0.1) !important;
}

/* Form input overrides moved to components.css for smart expansion */

/* Uniform labels */
label {
  display: block;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: var(--space-2);
  font-size: 0.9rem;
}

/* Custom button classes */
.btn, .btn-primary, button.btn, button.btn-primary,
button[data-action], input[type="submit"], input[type="button"] {
  background-color: var(--hsbc-red) !important;
  border: 1px solid var(--hsbc-red) !important;
  color: white !important;
  padding: var(--space-3) var(--space-4) !important;
  border-radius: var(--radius) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  text-decoration: none !important;
  font-family: var(--font-sans) !important;
  min-width: 120px !important;
  justify-content: center !important;
}

.btn:hover, .btn-primary:hover, button.btn:hover, button.btn-primary:hover,
button[data-action]:hover, input[type="submit"]:hover, input[type="button"]:hover {
  background-color: var(--hsbc-red-dark) !important;
  border-color: var(--hsbc-red-dark) !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}

/* Secondary buttons */
.btn-secondary, button.btn-secondary {
  background-color: var(--white) !important;
  color: var(--hsbc-red) !important;
  border-color: var(--hsbc-red) !important;
  min-width: 120px !important;
  justify-content: center !important;
}

.btn-secondary:hover, button.btn-secondary:hover {
  background-color: var(--hsbc-red-bg) !important;
  color: var(--hsbc-red-dark) !important;
  text-decoration: none !important;
}

/* Ghost buttons */
.btn-ghost, button.btn-ghost {
  background-color: transparent !important;
  color: var(--gray-600) !important;
  border-color: var(--gray-300) !important;
  min-width: 120px !important;
  justify-content: center !important;
}

.btn-ghost:hover, button.btn-ghost:hover {
  background-color: var(--gray-100) !important;
  color: var(--gray-800) !important;
  border-color: var(--gray-400) !important;
  text-decoration: none !important;
}

/* Delete buttons */
.btn-ghost[data-action="remove"], 
.btn-ghost[data-action="removeItem"],
button.btn-ghost[data-action="remove"],
button.btn-ghost[data-action="removeItem"] {
  background-color: transparent !important;
  color: var(--hsbc-red) !important;
  border-color: var(--hsbc-red) !important;
  min-width: 120px !important;
  justify-content: center !important;
}

.btn-ghost[data-action="remove"]:hover,
.btn-ghost[data-action="removeItem"]:hover,
button.btn-ghost[data-action="remove"]:hover,
button.btn-ghost[data-action="removeItem"]:hover {
  background-color: var(--hsbc-red) !important;
  color: white !important;
  border-color: var(--hsbc-red) !important;
  text-decoration: none !important;
}

/* Add buttons */
.btn-secondary[data-action="addItem"],
button.btn-secondary[data-action="addItem"],
.btn[data-action="addItem"],
button[data-action="addItem"] {
  background-color: var(--gray-800) !important;
  color: white !important;
  border-color: var(--gray-800) !important;
  min-width: 120px !important;
  justify-content: center !important;
}

.btn-secondary[data-action="addItem"]:hover,
button.btn-secondary[data-action="addItem"]:hover,
.btn[data-action="addItem"]:hover,
button[data-action="addItem"]:hover {
  background-color: var(--gray-900) !important;
  color: white !important;
  border-color: var(--gray-900) !important;
  text-decoration: none !important;
}

/* Full-Width Buttons */
.btn-full, button.btn-full,
.btn.btn-full, button.btn.btn-full,
.feature-list-container .btn-full {
  width: 100% !important;
  min-width: auto !important;
  justify-content: center !important;
}

/* Special action buttons */
#exportHtml {
  background-color: var(--hsbc-red) !important;
  color: white !important;
  border-color: var(--hsbc-red) !important;
  min-width: 120px !important;
  justify-content: center !important;
}

#exportHtml:hover {
  background-color: var(--hsbc-red-dark) !important;
  border-color: var(--hsbc-red-dark) !important;
}

#resetDemo {
  background-color: var(--primary) !important;
  color: white !important;
  border-color: var(--primary) !important;
  min-width: 120px !important;
  justify-content: center !important;
}

#resetDemo:hover {
  background-color: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
}

#addModule {
  background-color: var(--gray-800) !important;
  color: white !important;
  border-color: var(--gray-800) !important;
  min-width: 120px !important;
  justify-content: center !important;
}

#addModule:hover {
  background-color: var(--gray-900) !important;
  border-color: var(--gray-900) !important;
}

/* Feature List Styles */
.feature-list-container {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: var(--space-4);
}

.feature-list-container .form-group {
  margin-bottom: var(--space-3);
}

.feature-list-container .btn {
  padding: var(--space-3) var(--space-3);
  font-size: 0.8rem;
  text-align: center;
}

.feature-list-container .btn-full {
  width: 100%;
  padding: var(--space-4) var(--space-3);
  font-size: 0.85rem;
}

/* File upload section */
.file-upload-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.upload-options {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  margin-top: 0 !important;
  padding: 0 !important;
}

.upload-options .form-group:first-child {
  display: none !important;
}

.upload-options .help-text {
  display: none !important;
}

/* File input styling */
.file-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  font-family: var(--font-sans) !important;
}

.file-input::-webkit-file-upload-button,
.file-input::file-selector-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--space-2) !important;
  padding: var(--space-3) var(--space-5) !important;
  margin: 0 !important;
  border: 1px solid var(--hsbc-red) !important;
  border-radius: var(--radius) !important;
  background-color: var(--hsbc-red) !important;
  color: var(--white) !important;
  font-family: var(--font-sans) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
  box-shadow: 0 4px 20px rgba(219, 0, 17, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  min-height: 44px !important;
  min-width: 140px !important;
  width: 100% !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  text-transform: uppercase !important;
  letter-spacing: 0.025em !important;
}

.file-input::-webkit-file-upload-button:hover,
.file-input::file-selector-button:hover {
  background-color: var(--hsbc-red-dark) !important;
  border-color: var(--hsbc-red-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 25px rgba(219, 0, 17, 0.4), 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.file-input::-webkit-file-upload-button:focus,
.file-input::file-selector-button:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(219, 0, 17, 0.1) !important;
}

.file-upload-section .btn {
  width: 100% !important;
  min-width: auto !important;
  justify-content: center !important;
  white-space: nowrap;
  margin-top: var(--space-2) !important;
  padding: var(--space-3) var(--space-5) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
}

.feature-list-separator {
  border-top: 1px solid var(--gray-200);
  margin: var(--space-3) 0;
  padding-top: var(--space-3);
}

/* Enhanced Card Header for Fixed Modules */
.card-fixed .card-header {
  background: linear-gradient(135deg, var(--white) 0%, var(--gray-50) 100%);
  border-bottom: 1px solid var(--gray-200);
  border-radius: var(--radius) var(--radius) 0 0;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--space-3) !important;
}

/* Hide the separate header-top/bottom structure for fixed cards */
.card-fixed .card-header-top {
  flex: 1;
  justify-content: flex-start !important;
}

.card-fixed .card-header-bottom {
  display: none !important;
}

/* Card-Header Layout for Modules - moved to components.css */

/* Drag handle alignment moved to components.css */

/* Responsive Design */
@media (max-width: 1200px) {
  .main-grid {
    grid-template-columns: 360px 1fr;
    gap: var(--space-5);
  }
  
  .app-logo {
    width: 360px; /* Match sidebar width at this breakpoint */
  }
}

@media (max-width: 1024px) {
  .main-grid {
    grid-template-columns: 320px 1fr;
    gap: var(--space-4);
  }
  
  .app-logo {
    width: 320px; /* Match sidebar width at this breakpoint */
  }
  
  .card-body {
    padding: var(--space-4);
  }
  
  .grid-2 {
    gap: var(--space-2);
  }
}

@media (max-width: 768px) {
  .main-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  
  .app-logo {
    width: 100%; /* Full width on mobile */
    max-width: 300px; /* But not larger than 300px */
  }
  
  aside {
    order: 2;
  }
  
  .preview-container {
    order: 1;
    position: static;
    margin-bottom: var(--space-6);
  }
  
  body {
    padding: var(--space-3);
  }
  
  .card-body {
    padding: var(--space-3);
  }
  
  .grid-2 {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  
  .btn-full {
    width: 100%;
    justify-content: center;
  }
  
  .feature-list-container {
    padding: var(--space-3);
  }
  
  /* iOS Zoom-Fix */
  .form-input, .form-select, .form-textarea {
    font-size: 16px;
  }
  
  .app-container {
    padding: var(--space-5) var(--space-3) 0 var(--space-3);
  }
}

@media (max-width: 640px) {
  .btn-stack {
    gap: var(--space-2);
  }
  
  .notification {
    top: var(--space-3);
    right: var(--space-3);
    left: var(--space-3);
    max-width: none;
    padding: var(--space-3);
    border-radius: var(--radius);
  }
  
  .notification-text strong {
    font-size: 0.8rem;
  }
  
  .notification-text small {
    font-size: 0.65rem;
  }
  
  .notification-icon {
    font-size: 0.9rem;
  }
  
  .card-header {
    padding: var(--space-3) var(--space-4);
  }
  
  .card-body {
    padding: var(--space-4);
  }
  
  .btn {
    font-size: 0.85rem;
    padding: var(--space-2) var(--space-3);
  }
}

/* Hide scroll hint only on desktop */
@media (min-width: 769px) {
  .preview-container::after {
    display: none;
  }
}

@media (max-width: 480px) {
  .app-container {
    padding: var(--space-3);
  }
  
  body {
    padding: 0;
  }
  
  .card {
    margin-bottom: var(--space-3);
    border-radius: var(--radius-sm);
  }
  
  .card-header {
    padding: var(--space-3) var(--space-4);
  }
  
  .card-body {
    padding: var(--space-3) var(--space-4);
  }
  
  .form-group {
    margin-bottom: var(--space-3);
  }
  
  .btn {
    padding: var(--space-2) var(--space-3);
    font-size: 0.8rem;
  }
  
  .preview-header {
    padding: var(--space-3) var(--space-4);
    font-size: 0.8rem;
  }
  
  /* Drag handle mobile styles moved to components.css */
  
  .material-symbols-outlined {
    font-size: 18px;
  }
  
  .material-symbols-outlined.size-16 {
    font-size: 14px;
  }
  
  /* Touch-optimized buttons */
  .btn-ghost {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Feature list mobile optimization */
  .feature-list-container .grid-2 {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  
  .feature-list-container .btn {
    width: 100%;
    margin-top: var(--space-2);
    min-width: auto;
  }
  
  /* Card header mobile adaptation */
  .card-header .btn-ghost,
  .card-header .btn {
    min-width: 100px;
  }
  
  /* File upload mobile optimization */
  .file-upload-section {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding: var(--space-3);
  }
  
  .file-upload-section .btn {
    width: 100%;
    justify-content: center;
  }
  
  /* Help text mobile optimization */
  .help-text {
    font-size: 0.8rem;
    padding: var(--space-3);
  }
  
  details summary {
    font-size: 0.8rem;
    padding: var(--space-3);
  }
  
  /* Mobile scroll improvements */
  .preview-container {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    overflow-y: auto;
    background: var(--gray-100);
    padding: var(--space-3);
    border: none;
    border-radius: 0;
    box-shadow: none;
    position: static;
    margin: 0;
  }
  
  /* Newsletter preview mobile adaptation */
  #canvas {
    min-width: 600px;
    width: 100%;
    border: none;
    background: white;
    border-radius: 0;
    box-shadow: none;
  }
  
  /* Scroll hint for mobile */
  .preview-container::after {
    content: "⟷ Horizontal scrollbar for complete newsletter view";
    display: block;
    text-align: center;
    font-size: 0.7rem;
    color: var(--gray-500);
    padding: var(--space-2);
    background: var(--gray-100);
    border-top: 1px solid var(--gray-300);
    font-style: italic;
    margin: 0;
    margin-top: var(--space-3);
  }
  
  /* Touch feedback for drag handles moved to components.css */
  
  /* Improved tap targets */
  .card-header .btn {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Mobile-specific sortable styles */
  .sortable-chosen {
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    z-index: 1000;
  }
}

/* Frontend Footer alignment for all devices */
.app-container footer,
footer {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 2rem 0 0 0 !important;
  padding: 0.75rem 0 !important;
  color: #64748B !important;
  font-size: 0.8rem !important;
  border-top: 1px solid #E2E8F0 !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* Footer NuusLetta branding colors */
.footer-nuu {
  color: var(--primary) !important;
  font-weight: 600 !important;
}

.footer-sletta {
  color: var(--primary) !important;
  font-weight: 600 !important;
}

/* Mobile footer adjustments */
@media (max-width: 768px) and (min-width: 481px) {
  .app-container footer,
  footer {
    padding: 0.75rem 0 !important;
    margin-left: calc(-1 * var(--space-3)) !important;
    padding-left: var(--space-3) !important;
    font-size: 0.75rem !important;
    line-height: 1.5 !important;
    text-align: left !important;
    margin-top: 1.5rem !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 480px) {
  .app-container footer,
  footer {
    padding: 0.75rem 0 !important;
    font-size: 0.7rem !important;
    line-height: 1.4 !important;
    text-align: left !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
    margin: 1rem 0 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}