/* DSU RISE - Dynamic Template Styles */
/* These styles use CSS variables set by the template engine */

:root {
  /* Default colors (will be overridden by template engine) */
  --color-primary: #3B82F6;
  --color-secondary: #F3F4F6;
  --color-accent: #10B981;
  --color-background: #FFFFFF;
  --color-text: #1F2937;
  --header-bg: #1F2937;
  --card-bg: #FFFFFF;
  --border-color: #E5E7EB;
  
  /* Layout variables */
  --grid-columns: 3;
  --grid-gap: 1.5rem;
  --border-radius: 1rem;
  
  /* Template active flag */
  --template-active: 0;
}

/* Only apply template styles when a template is active */
body[data-template]:not([data-template="default-original"]) {
  --template-active: 1;
}

/* Body background - only when template is active */
body[data-template]:not([data-template="default-original"]) {
  background: var(--color-background);
  color: var(--color-text);
}

/* Header styling - only when template is active */
body[data-template]:not([data-template="default-original"]) header,
body[data-template]:not([data-template="default-original"]) nav,
body[data-template]:not([data-template="default-original"]) .header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--border-color);
}

/* Primary buttons - only when template is active */
body[data-template]:not([data-template="default-original"]) .primary-button,
body[data-template]:not([data-template="default-original"]) button.bg-blue-600,
body[data-template]:not([data-template="default-original"]) a.bg-blue-600,
body[data-template]:not([data-template="default-original"]) button.bg-green-600,
body[data-template]:not([data-template="default-original"]) a.bg-green-600,
body[data-template]:not([data-template="default-original"]) button.bg-purple-600,
body[data-template]:not([data-template="default-original"]) a.bg-purple-600 {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

body[data-template]:not([data-template="default-original"]) .primary-button:hover,
body[data-template]:not([data-template="default-original"]) button.bg-blue-600:hover,
body[data-template]:not([data-template="default-original"]) a.bg-blue-600:hover,
body[data-template]:not([data-template="default-original"]) button.bg-green-600:hover,
body[data-template]:not([data-template="default-original"]) a.bg-green-600:hover,
body[data-template]:not([data-template="default-original"]) button.bg-purple-600:hover,
body[data-template]:not([data-template="default-original"]) a.bg-purple-600:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

/* Cards - only when template is active */
body[data-template]:not([data-template="default-original"]) .card,
body[data-template]:not([data-template="default-original"]) .menu-item {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
}

/* Grid layout - only when template is active */
body[data-template]:not([data-template="default-original"]) .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-3 {
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  gap: var(--grid-gap);
}

/* Responsive grid override */
@media (max-width: 768px) {
  body[data-template]:not([data-template="default-original"]) .grid[class*="grid-cols"] {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  body[data-template]:not([data-template="default-original"]) .grid[class*="grid-cols"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Links - only when template is active */
body[data-template]:not([data-template="default-original"]) a:not(.admin a):not([class*="admin"]) {
  color: var(--color-primary);
}

body[data-template]:not([data-template="default-original"]) a:not(.admin a):not([class*="admin"]):hover {
  color: var(--color-accent);
}

/* Form elements - only when template is active */
body[data-template]:not([data-template="default-original"]) input:not(.admin input),
body[data-template]:not([data-template="default-original"]) textarea:not(.admin textarea),
body[data-template]:not([data-template="default-original"]) select:not(.admin select) {
  border-color: var(--border-color);
  background: var(--card-bg);
  color: var(--color-text);
}

body[data-template]:not([data-template="default-original"]) input:focus:not(.admin input),
body[data-template]:not([data-template="default-original"]) textarea:focus:not(.admin textarea),
body[data-template]:not([data-template="default-original"]) select:focus:not(.admin select) {
  border-color: var(--color-primary);
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Border radius - only when template is active */
body[data-template]:not([data-template="default-original"]) .rounded-2xl,
body[data-template]:not([data-template="default-original"]) .rounded-xl,
body[data-template]:not([data-template="default-original"]) .rounded-lg {
  border-radius: var(--border-radius);
}

/* Admin pages - always exclude from template styling */
.admin,
[class*="admin-"],
#admin,
[id*="admin-"] {
  background: initial;
  color: initial;
}

.admin *,
[class*="admin-"] *,
#admin *,
[id*="admin-"] * {
  background: initial;
  color: initial;
}

/* Hover effects enhancement - only when template is active */
body[data-template]:not([data-template="default-original"]) .card-hover {
  transition: all 0.3s ease;
}

body[data-template]:not([data-template="default-original"]) .card-hover:hover {
  transform: translateY(-4px);
}

/* Highlight card - only when template is active */
body[data-template]:not([data-template="default-original"]) .highlight-card {
  border: 2px solid var(--color-accent);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}