/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ─── Design System ──────────────────────────────────────────────────────────
 * Âncora: #fbf7bb (amarelo creme — temática IELB 2026)
 * Escala derivada da mesma família de cor (amarelo quente → dourado → terra).
 *
 * REGRA: nunca use valores hardcoded fora deste bloco :root.
 * Mobile-first: base para ~390px, breakpoint desktop em min-width: 600px.
 * ─────────────────────────────────────────────────────────────────────────── */
:root {
  /* Cores — tons nude: quente, desaturado, elegante */
  --color-bg:         #fdf6f0;  /* nude clarissimo — fundo */
  --color-surface:    #ffffff;  /* branco puro — cards, inputs */
  --color-primary:    #2c1f1a;  /* marrom escuro quente — texto, btn add */
  --color-primary-fg: #ffffff;
  --color-brand:      #b07d6e;  /* rosa nude — botão criar slides, foco */
  --color-brand-fg:   #ffffff;
  --color-accent:     #e8d5c4;  /* nude pálido — badges */
  --color-accent-fg:  #2c1f1a;
  --color-muted:      #9a8578;  /* cinza quente — textos secundários */
  --color-border:     #e2d5c8;  /* borda sutil */

  /* Espaçamento */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  48px;

  /* Tipografia */
  --font-ui:   'Montserrat', sans-serif;
  --font-body: Georgia, serif;
  --text-sm:   13px;
  --text-base: 15px;
  --text-lg:   18px;

  /* Forma */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-pill: 999px;

  /* Sombra */
  --shadow-sm: 0 1px 3px rgba(28, 26, 8, 0.08);
}

/* ─── Base ───────────────────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-primary);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  -webkit-font-smoothing: antialiased;
}

/* ─── Layout ─────────────────────────────────────────────────────────────── */

.songs-page {
  max-width: 100%;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
}

@media (min-width: 600px) {
  .songs-page {
    max-width: 560px;
    padding: var(--space-xl) var(--space-md);
  }
}

/* ─── Header ─────────────────────────────────────────────────────────────── */

.site-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.site-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.site-title {
  font-family: var(--font-ui);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-brand);
  margin: 0;
  letter-spacing: 0.04em;
}

/* ─── Onboarding ─────────────────────────────────────────────────────────── */

.onboarding {
  margin-top: var(--space-xl);
  text-align: center;
  color: var(--color-muted);
}

.onboarding-hint {
  font-size: var(--text-lg);
  font-weight: 700;
  margin: 0 0 var(--space-sm);
  color: var(--color-primary);
}

.onboarding-example,
.onboarding-instruction {
  font-size: var(--text-sm);
  margin: 0 0 var(--space-xs);
}

/* ─── Busca ───────────────────────────────────────────────────────────────── */

.search-form {
  display: flex;
}

.search-input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-ui);
  font-size: var(--text-lg);
  background-color: var(--color-surface);
  color: var(--color-primary);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  outline: none;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s;
}

.search-input:focus {
  border-color: var(--color-brand);
}

.search-input::placeholder {
  color: var(--color-muted);
}

/* ─── Sugestões ──────────────────────────────────────────────────────────── */

.suggestion-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.suggestion-text {
  flex: 1;
  font-size: var(--text-base);
  color: var(--color-primary);
}

/* ─── Fila ────────────────────────────────────────────────────────────────── */

.queue {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  min-width: 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md);
  background-color: var(--color-accent);
  color: var(--color-accent-fg);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  max-width: 100%;
  min-width: 0;
}

.badge-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.btn-remove-item {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  background-color: var(--color-brand);
  color: var(--color-brand-fg);
  border: none;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  transition: opacity 0.15s, transform 0.1s;
}

.btn-remove-item:hover  { opacity: 0.8; }
.btn-remove-item:active { opacity: 1; transform: scale(0.88); }

/* ─── Botões ─────────────────────────────────────────────────────────────── */

.btn-add {
  flex-shrink: 0;
  background: var(--color-brand);
  color: var(--color-brand-fg);
  border: none;
  border-radius: var(--radius-pill);
  width: 44px;
  height: 44px;
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s, transform 0.1s;
  box-shadow: var(--shadow-sm);
}

.btn-add:hover  { opacity: 0.85; }
.btn-add:active { opacity: 1; transform: scale(0.92); }

.btn-clear-queue {
  background: none;
  border: none;
  color: var(--color-muted);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  cursor: pointer;
  padding: 0;
  margin-top: var(--space-md);
  text-decoration: underline;
  transition: color 0.15s;
}

.btn-clear-queue:hover {
  color: var(--color-primary);
}

.create-slides-wrapper {
  display: flex;
  justify-content: stretch;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
}

.btn-create-slides {
  width: 100%;
  padding: var(--space-md) var(--space-xl);
  font-family: var(--font-ui);
  font-size: var(--text-lg);
  font-weight: 700;
  background-color: var(--color-brand);
  color: var(--color-brand-fg);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  min-height: 44px;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-sm);
  transition: opacity 0.15s;
}

.btn-create-slides:hover {
  opacity: 0.88;
}

.btn-copy-queue {
  flex-shrink: 0;
  background-color: var(--color-brand);
  color: var(--color-brand-fg);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-md);
  min-height: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: opacity 0.15s, background-color 0.3s;
}

.btn-copy-queue:hover {
  opacity: 0.85;
}

.btn-copy-queue.copied {
  opacity: 0.7;
}

@media (min-width: 600px) {
  .create-slides-wrapper {
    justify-content: center;
  }

  .btn-create-slides {
    width: auto;
  }
}

/* ─── Sugestões (form) ───────────────────────────────────────────────────── */

.suggestion-section {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.suggestion-label {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin: 0 0 var(--space-sm);
}

.suggestion-textarea {
  width: 100%;
  min-height: 80px;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  background-color: var(--color-surface);
  color: var(--color-primary);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  outline: none;
  resize: vertical;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s;
}

.suggestion-textarea:focus {
  border-color: var(--color-brand);
}

.btn-suggestion-submit {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  background-color: var(--color-accent);
  color: var(--color-accent-fg);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  min-height: 44px;
  transition: opacity 0.15s;
}

.btn-suggestion-submit:hover { opacity: 0.8; }