/* Curatora.ai - Common Styles */
/* This file contains common CSS used across all pages: variables, fonts, colors, buttons, form inputs */

/* ============================================
   CSS Variables
   ============================================ */
:root {
  --primary: #0E76A8;
  --secondary: #10B981;
  --accent: #8B5CF6;
  --warning: #F59E0B;
  --danger: #EF4444;
  --success: #10B981;
  --info: #0E76A8;
  --text: #1f2937;
  --light: #b8a34f;
  --disabled: #c2c2cc;
  --navbar-height: 80px;

  /* Shared gradient blob positions */
  --x1: 42.890625%;
  --y1: 20.9765625%;
  --x2: 77.8515625%;
  --y2: 82.34375%;
  
  /* Admin-specific blob positions for independent animation */
  --admin-x1: 42.890625%;
  --admin-y1: 20.9765625%;
  --admin-x2: 77.8515625%;
  --admin-y2: 82.34375%;
}

/* Allow the radial positions to animate smoothly */
@property --x1 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 42.890625%;
}
@property --y1 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 20.9765625%;
}
@property --x2 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 77.8515625%;
}
@property --y2 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 82.34375%;
}

/* ============================================
   Typography & Fonts
   ============================================ */
/* Set text color for body and all text elements */
body {
  color: var(--text);
  font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

body p,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body li,
body td,
body th {
  color: var(--text);
}

/* ============================================
   Button Styles
   ============================================ */
.btn {
  color: white;
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.3s ease;
  border: none;
  cursor: pointer;
}

.btn:hover:not(:disabled):not([disabled]) {
  transform: translateY(-1px);
  box-shadow: none;
}

/* btn-curatora: gradient background (formerly btn-primary) */
.btn-curatora {
  background:
    radial-gradient(100% 100% at var(--x1) var(--y1), var(--secondary) 0%, transparent),
    radial-gradient(100% 100% at var(--x2) var(--y2), var(--accent) 0%, transparent),
    var(--primary);
}

.btn-curatora:hover:not(:disabled):not([disabled]) {
  animation: gradient-blob 15s ease-in-out infinite;
  box-shadow: none;
}

/* btn-primary: solid primary background (formerly btn-secondary) */
.btn-primary {
  background-color: var(--primary);
}

.btn-primary:hover:not(:disabled):not([disabled]) {
  background-color: #0d6a95;
  box-shadow: none;
}

/* btn-secondary: solid secondary background */
.btn-secondary {
  background-color: var(--secondary);
}

.btn-secondary:hover:not(:disabled):not([disabled]) {
  background-color: #0ea572;
  box-shadow: none;
}

/* btn-accent: solid accent background */
.btn-accent {
  background-color: var(--accent);
}

.btn-accent:hover:not(:disabled):not([disabled]) {
  background-color: #7c3aed;
  box-shadow: none;
}

/* btn-warning: solid warning background */
.btn-warning {
  background-color: var(--warning);
}

.btn-warning:hover:not(:disabled):not([disabled]) {
  background-color: #d97706;
  box-shadow: none;
}

/* btn-danger: solid danger background */
.btn-danger {
  background-color: var(--danger);
}

.btn-danger:hover:not(:disabled):not([disabled]) {
  box-shadow: none;
  background-color: #c93f39;
}

/* btn-success: solid success background */
.btn-success {
  background-color: var(--success);
}

.btn-success:hover:not(:disabled):not([disabled]) {
  background-color: #0ea572;
  box-shadow: none;
}

/* Disabled button styles */
.btn:disabled,
button:disabled,
.btn[disabled],
button[disabled],
.btn-curatora:disabled,
.btn-curatora[disabled],
.btn-primary:disabled,
.btn-primary[disabled],
.btn-secondary:disabled,
.btn-secondary[disabled],
.btn-accent:disabled,
.btn-accent[disabled],
.btn-warning:disabled,
.btn-warning[disabled],
.btn-danger:disabled,
.btn-danger[disabled],
.btn-success:disabled,
.btn-success[disabled] {
  background-color: var(--disabled) !important;
  color: white !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

/* Disabled buttons should not have hover effects */
.btn:disabled:hover,
button:disabled:hover,
.btn[disabled]:hover,
button[disabled]:hover {
  transform: none !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1) !important;
  background-color: var(--disabled) !important;
  animation: none !important;
}

.btn-curatora:disabled,
.btn-curatora[disabled] {
  background: var(--disabled) !important;
}

.btn-curatora:disabled:hover,
.btn-curatora[disabled]:hover {
  background: var(--disabled) !important;
  animation: none !important;
  transform: none !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1) !important;
}

.btn-primary:disabled:hover,
.btn-primary[disabled]:hover,
.btn-secondary:disabled:hover,
.btn-secondary[disabled]:hover,
.btn-accent:disabled:hover,
.btn-accent[disabled]:hover,
.btn-warning:disabled:hover,
.btn-warning[disabled]:hover,
.btn-danger:disabled:hover,
.btn-danger[disabled]:hover,
.btn-success:disabled:hover,
.btn-success[disabled]:hover {
  transform: none !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1) !important;
  background-color: var(--disabled) !important;
  animation: none !important;
}

.btn-cancel {
  color: var(--text);
  background-color: transparent;
  border: none;
}

.btn-small {
  padding: 0.2rem 1rem;
}

/* ============================================
   Form Input Styles
   ============================================ */
.form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid #d1d5db;
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(14, 118, 168, 0.1);
}

/* Ensure all textareas have consistent rounded corners */
textarea {
  border-radius: 0.75rem !important;
  resize: vertical;
}

/* Ensure all selects have consistent height and rounded corners */
select {
  border-radius: 0.75rem !important;
}

/* Override any rounded-md or rounded-lg on form inputs to ensure consistency */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  border-radius: 0.75rem !important;
}

/* ============================================
   Animation Keyframes
   ============================================ */
@keyframes gradient-blob {
  25% {
    --x1: 85%;
    --y1: 80%;
  }
  50% {
    --x1: 15%;
    --y1: 85%;
    --x2: 20%;
    --y2: 20%;
  }
  100% {
    --x1: 42.890625%;
    --y1: 20.9765625%;
    --x2: 77.8515625%;
    --y2: 82.34375%;
  }
}

/* ============================================
   Card Badge Styles
   ============================================ */
.curatora-badge-on-card {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  opacity: 1;
  z-index: 10;
}