/* 
 * Theme editor and preview styles
 */

/* 
 * Theme Editor Global Overrides Stylesheet
 * This section contains CSS to override hardcoded color values with CSS variables
 */

/* Replace hardcoded #88fcab everywhere with --color-primary */
.bg-\[\#88fcab\],
button.bg-\[\#88fcab\],
.border-\[\#88fcab\],
th.bg-\[\#88fcab\],
.focus-within\:border-\[\#88fcab\] 
{
  border-color: var(--color-primary) !important;
}

/* Replace hardcoded #78f993 hover states with --color-primary-hover */
.hover\:bg-\[\#78f993\]:hover,
button.hover\:bg-\[\#78f993\]:hover,
a.hover\:bg-\[\#78f993\]:hover,
.hover\:border-\[\#78f993\]:hover,
.hover\:text-\[\#78f993\]:hover {
  background-color: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
  color: var(--color-primary-hover) !important;
}

/* Fix for active menu items */
body.dashboard li.dashboard-nav a,
body.dashboard-admin li.dashboard-admin-nav a,
body.my-profile li.profile-nav a,
body.payments li.payments-nav a,
body.dashboard #darkorlight.dark li.dashboard-nav a,
body.websites li.websites-nav a,
body.websites #darkorlight.dark li.websites-nav a,
body.af-reports li.af-reports-nav a,
body.af-reports #darkorlight.dark li.af-reports-nav a,
body.users li.users-nav a,
body.users #darkorlight.dark li.users-nav a,
body.orders li.orders-nav a,
body.orders #darkorlight.dark li.orders-nav a,
body.settings button.settings-nav,
body.settings #darkorlight.dark button.settings-nav {
  background-color: var(--color-primary) !important;
  color: black !important;
}

/* Specific overrides for table headers */
th.bg-\[\#88fcab\],
th[style*="background-color: #88fcab"] {
  background-color: var(--color-primary) !important;
}

/* Fix for submit buttons */
.submitbutton,
button[type="submit"].bg-\[\#88fcab\]
{
  background-color: var(--color-primary) !important;
}

.submitbutton:hover,
button[type="submit"].hover\:bg-\[\#78f993\]:hover,
input[type="submit"].hover\:bg-\[\#78f993\]:hover {
  background-color: var(--color-primary-hover) !important;
}

/* Fix for focused inputs */
.focus-within\:border-\[\#88fcab\]:focus-within,
.focus\:border-\[\#88fcab\]:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-primary) !important;
  outline-color: var(--color-primary) !important;
}

/* Theme editor UI styles */

.color-picker-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.color-picker-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.color-picker-label {
  width: 150px;
  font-weight: 500;
}

.color-picker-input {
  height: 40px;
  width: 80px;
  padding: 0;
  border: none;
  cursor: pointer;
}

.color-picker-hex {
  font-family: monospace;
  width: 80px;
  margin-left: 0.5rem;
}

.theme-preview-container {
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  background-color: white;
}

.preview-section {
  margin-bottom: 1.5rem;
}

.preview-title {
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.preview-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.preview-alerts {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.preview-text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.theme-selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

.theme-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.download-theme, .import-theme {
  margin-top: 1rem;
}

#importThemeInput {
  display: none;
}

#newThemeName {
  margin-top: 1rem;
}