/*
 * 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.
 */

/* Spelling Bee grid */
.letter-grid { display: flex; gap: 8px; margin: 12px 0; }
.letter { width: 40px; height: 40px; border: 1px solid #ccc; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:18px; cursor:text; }
.letter.center { outline: 3px solid #4caf50; }
.letter.duplicate { background: #ffe6e6; }
.word-row.pangram td { font-weight: 700; color: #b36b00; }

/* Mobile-first modern styles */
:root { --bg: #f8fafc; --card: #ffffff; --muted: #6b7280; --primary: #2563eb; --danger: #ef4444; }
body { background: var(--bg); font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; color: #0f172a; margin:0; padding:0; }
.container { max-width: 760px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.4rem; margin: 0 0 8px 0; }
.controls { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.btn { background:#fff; border:1px solid #e6eef9; padding:8px 10px; border-radius:10px; font-weight:600; font-size:14px; cursor:pointer; }
.btn-primary { background: var(--primary); color: white; border: none; }
.btn-neutral { background: white; color: #0f172a; }
.btn-danger { background: var(--danger); color: white; border: none; }
.status { font-size:0.9rem; padding:6px 8px; border-radius:6px; background:transparent; align-self:center; }

/* larger, rounded letters for mobile */
.letter-grid { gap:8px; justify-content:space-between; }
.letter { width:48px; height:48px; border-radius:8px; font-size:20px; }
.center-input { width:100%; padding:8px 10px; margin-top:8px; border-radius:10px; border:1px solid #e5e7eb; font-size:16px; }

/* word list cards for mobile */
.word-list { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.word-card { display:flex; justify-content:space-between; padding:12px; border-radius:12px; background:var(--card); border:1px solid #e6eef9; box-shadow: 0 1px 2px rgba(2,6,23,0.04); }
.word-text { font-weight:700; }
.word-source { font-size:0.85rem; color:var(--muted); }

/* desktop: show table instead */
@media (min-width: 700px) {
  .word-list { display:none; }
  table { width:100%; border-collapse:collapse; margin-top:8px; background:var(--card); border-radius:8px; overflow:hidden; }
  th, td { padding:12px 16px; border-bottom:1px solid #eef2f7; text-align:left; }
  thead th { background:#f1f5f9; font-weight:700; }
}

.found-count { font-weight:700; color:var(--primary); }
.pangram { color:#b36b00; font-weight:800; }

/* Animations */
.word-card { transition: transform 160ms ease, box-shadow 160ms ease, opacity 200ms ease; }
.word-card:hover { transform: translateY(-4px); box-shadow: 0 6px 18px rgba(2,6,23,0.12); }
.word-card.fade-in { opacity: 0; transform: translateY(6px); animation: fadeIn 220ms ease forwards; }
@keyframes fadeIn { to { opacity: 1; transform: translateY(0); } }

.btn { transition: transform 120ms ease, box-shadow 120ms ease; }
.btn:active { transform: translateY(1px) scale(0.997); }

/* compact word box */
.word-box { width: 100%; min-height: 220px; padding: 10px; border-radius: 10px; border: 1px solid #e6eef9; background: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', monospace; font-size: 13px; line-height: 1.35; white-space: pre; overflow: auto; }
.pangram-highlight { color: #2563eb; font-weight: 800; }

/* recent import highlight */
.recent-import { background: #fff9c4; color: #0f172a; padding: 0 2px; border-radius: 3px; }

/* group header */
.group-header { font-weight:800; padding: 6px 0; color: #111827; }

@media (max-width: 420px) {
  .word-box { min-height: 180px; font-size: 12px; }
}

/* tabs & panes */
.tabs { display:flex; gap:8px; }
.tabs .btn.active { background: var(--primary); color: white; border: none; }
.pane.hidden { display:none; }
.regex-row .center-input { flex:1; }

/* header logo */
/* header (logo + title) */
.header { display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:12px; text-align:center; }

/* larger, centered app logo */
.app-logo { width:256px; height:256px; object-fit:contain; border-radius:12px; box-shadow: 0 6px 20px rgba(2,6,23,0.08); }
@media (max-width: 420px) {
  .app-logo { width:96px; height:96px; }
}

/* when showing the full word list, allow the container to expand to the full viewport width for easier parsing */
.container.full-width { max-width: 100%; padding-left: 20px; padding-right: 20px; }

/* slightly denser multi-column display for the full list */
.container.full-width .word-box { font-size: 13px; line-height: 1.2; }