/**
 * Glowing Input Styles - Tome of Tales
 * 
 * Visual design: "Quill touching parchment" effect
 * Reference: TOME_OF_TALES_DESIGN_PHILOSOPHY.md - Animation Language
 * 
 * Features:
 * - Subtle idle glow (5px blur, gold)
 * - Medium focus glow (20px blur peak, 2.5s pulse)
 * - Important inputs use dice color (ember)
 * - Smooth transitions and accessibility support
 */

/* ===================================================================
   BASE INPUT STYLES
   =================================================================== */

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
  padding: 0.75rem 1rem;
  background: var(--glass-bg, rgba(255, 255, 255, 0.05));
  border: 2px solid var(--glass-border, rgba(255, 255, 255, 0.1));
  border-radius: 8px;
  color: var(--text-color, #fdf6e3);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color 0.2s ease, background-color 0.2s ease,
    box-shadow 0.2s ease, color 0.2s ease;
  width: 100%;
}

/* Placeholder text */
input::placeholder,
textarea::placeholder {
  color: var(--text-secondary, #c8b8a0);
  opacity: 0.6;
}

/* ===================================================================
   IDLE GLOW (SUBTLE)
   =================================================================== */

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
  box-shadow: 0 0 5px rgba(255, 165, 0, 0.1);
}

/* ===================================================================
   FOCUS GLOW (QUILL TOUCH EFFECT)
   =================================================================== */

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--gold, #ffa500);
  background: rgba(255, 165, 0, 0.05);
  animation: glow-pulse-medium 2.5s ease-in-out infinite;
  box-shadow: 0 0 20px rgba(255, 165, 0, 0.4);
}

/* Important inputs (character name, ability scores, critical fields) */
input.important:focus,
textarea.important:focus,
select.important:focus {
  border-color: var(--dice, #ff6b35);
  background: rgba(255, 107, 53, 0.05);
  box-shadow: 0 0 20px rgba(255, 107, 53, 0.4);
}

/* ===================================================================
   INPUT STATES
   =================================================================== */

/* Hover (not focused) */
input:hover:not(:focus):not([disabled]),
textarea:hover:not(:focus):not([disabled]),
select:hover:not(:focus):not([disabled]) {
  border-color: rgba(255, 165, 0, 0.3);
  background-color: var(--glass-hover, rgba(255, 255, 255, 0.08));
}

/* Disabled */
input[disabled],
textarea[disabled],
select[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  background: rgba(0, 0, 0, 0.2);
  box-shadow: none;
}

/* Read-only */
input[readonly],
textarea[readonly] {
  background: rgba(0, 0, 0, 0.1);
  border-color: rgba(255, 255, 255, 0.05);
  cursor: default;
}

/* Invalid/Error state */
input:invalid:not(:focus),
textarea:invalid:not(:focus),
input.error,
textarea.error {
  border-color: var(--error, #f87171);
  box-shadow: 0 0 10px rgba(248, 113, 113, 0.3);
}

/* Valid/Success state */
input:valid:not(:placeholder-shown):not(:focus),
textarea:valid:not(:placeholder-shown):not(:focus),
input.success,
textarea.success {
  border-color: var(--success, #4ade80);
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.2);
}

/* ===================================================================
   TEXTAREA SPECIFIC
   =================================================================== */

textarea {
  min-height: 100px;
  resize: vertical;
  font-family: inherit;
}

/* ===================================================================
   SELECT SPECIFIC
   =================================================================== */

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23FDF6E3' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  padding-right: 3rem;
  cursor: pointer;
}

select:hover:not(:focus):not([disabled]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23FDF6E3' d='M6 3L1 8h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
}

select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23FDF6E3' d='M6 3L1 8h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
}

select::-ms-expand {
  display: none; /* Remove default IE arrow */
}

/* ===================================================================
   NUMBER INPUT SPECIFIC
   =================================================================== */

/* Hide spinner buttons (cleaner D&D aesthetic) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield; /* Firefox */
  appearance: textfield;
}

/* ===================================================================
  SEARCH INPUT SPECIFIC
  =================================================================== */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  cursor: pointer;
  height: 16px;
  width: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23FDF6E3' d='M8 7l4-4 1 1-4 4 4 4-1 1-4-4-4 4-1-1 4-4-4-4 1-1z'/%3E%3C/svg%3E");
}

/* ===================================================================
   INPUT GROUPS
   =================================================================== */

.input-group {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.input-group label {
  flex-shrink: 0;
  min-width: 120px;
  color: var(--text-color, #fdf6e3);
  font-weight: 500;
}

.input-group input,
.input-group textarea,
.input-group select {
  flex: 1;
}

/* Vertical input groups (stacked) */
.input-group.vertical {
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}

.input-group.vertical label {
  min-width: auto;
}

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

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  input,
  textarea,
  select {
    transition: none;
    animation: none !important;
  }

  input:focus,
  textarea:focus,
  select:focus {
    animation: none !important;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  input,
  textarea,
  select {
    border-width: 3px;
  }

  input:focus,
  textarea:focus,
  select:focus {
    border-width: 4px;
  }
}

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

/* Tablets (768px and below) */
@media (max-width: 768px) {
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  textarea,
  select {
    font-size: 0.95rem;
    padding: 0.65rem 0.85rem;
  }

  .input-group {
    flex-direction: column;
    align-items: stretch;
  }

  .input-group label {
    min-width: auto;
  }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px; /* Prevents iOS zoom on focus */
    padding: 0.75rem 1rem;
  }
}

/* ===================================================================
   SPECIAL INPUT TYPES
   =================================================================== */

/* Ability score inputs (small, centered) */
input.ability-score {
  width: 60px;
  text-align: center;
  font-size: 1.25rem;
  font-weight: bold;
  padding: 0.5rem;
}

/* Dice roll inputs (inline with d20, d6, etc.) */
input.dice-value {
  width: 50px;
  text-align: center;
  font-size: 1rem;
  padding: 0.25rem 0.5rem;
  display: inline-block;
  vertical-align: middle;
}

/* Character name input (prominent, always important) */
input.character-name {
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  padding: 1rem;
  border-width: 3px;
}

input.character-name:focus {
  border-color: var(--dice, #ff6b35);
  background: rgba(255, 107, 53, 0.05);
  box-shadow: 0 0 30px rgba(255, 107, 53, 0.5);
}

/* Search inputs (with icon) */
input.search {
  padding-left: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23C8B8A0' d='M8 14A6 6 0 108 2a6 6 0 000 12zm6.32-1.094l3.58 3.58a1 1 0 11-1.415 1.415l-3.58-3.58a8 8 0 111.415-1.415z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 0.75rem center;
}

/* ===================================================================
   INTEGRATION WITH ANIMATION LIBRARY
   =================================================================== */

/* JavaScript can add these classes for enhanced animations */
/* ===================================================================
   THEME SUPPORT
   =================================================================== */

/* Themes can override these variables:
   --glass-bg
   --glass-border
   --glass-hover
   --gold
   --dice
   --text-color
   --text-secondary
   --error
   --success
*/