/* =============================================================
   GameVault — theme-light.css
   Warm sand / parchment palette — overrides app.css dark theme
============================================================= */

:root {
  --bg:           #fdf6e3;
  --bg-2:         #faf0d0;
  --bg-3:         #f5e6b8;
  --bg-4:         #eddfa0;
  --border:       #e0d0a0;
  --border-2:     #c8b870;

  --accent:       #b36a00;
  --accent-hover: #d47f00;
  --accent-dim:   rgba(179,106,0,0.12);
  --accent-glow:  rgba(179,106,0,0.25);

  --text-1:  #2c2008;
  --text-2:  #6b5320;
  --text-3:  #9e8040;

  --playing:    #7c3aed;
  --installed:  #b36a00;
  --finished:   #0d7a4e;
  --owned:      #78716c;

  --verified:    #0d7a4e;
  --playable:    #b45309;
  --unsupported: #b91c1c;
  --unknown:     #78716c;

  --gold:   #b36a00;
  --danger: #b91c1c;

  --shadow:    0 2px 12px rgba(120,80,0,0.12);
  --shadow-lg: 0 6px 32px rgba(120,80,0,0.18);
}

/* Body */
body {
  background-color: var(--bg);
  color: var(--text-1);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

/* Scrollbar */
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--border-2); }

/* Navbar */
.navbar {
  background: rgba(253,246,227,0.92);
  border-bottom-color: var(--border);
}
.logo {
  background: linear-gradient(135deg, #2c2008 0%, #b36a00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.navbar-center { background: var(--bg-2); border-color: var(--border); }
.nav-tab { color: var(--text-2); }
.nav-tab:hover { color: var(--text-1); }
.nav-tab.active { background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
.btn-add { background: var(--accent); }
.btn-add:hover { background: var(--accent-hover); box-shadow: 0 0 12px var(--accent-glow); }

/* Filter bar */
.filter-bar { background: var(--bg-2); border-bottom-color: var(--border); }
.filter-input,
.filter-select { background: var(--bg); border-color: var(--border); color: var(--text-1); }
.filter-select--deck { border-color: var(--accent); color: var(--accent); }
.filter-checkbox { color: var(--text-2); }

/* Status tabs */
.status-tabs { border-bottom-color: var(--border); }
.status-tab { border-color: var(--border); color: var(--text-2); }
.status-tab:hover { color: var(--text-1); border-color: var(--border-2); }

/* Game cards */
.game-card { background: var(--bg-2); border-color: var(--border); box-shadow: var(--shadow); }
.game-card:hover { border-color: var(--border-2); box-shadow: 0 6px 20px rgba(120,80,0,0.15); }
.card-cover { background: var(--bg-3); }
.card-store { background: var(--bg-3); border-color: var(--border); color: var(--text-2); }
.card-rating { color: var(--accent); }
.card-myrating span { color: var(--accent); }

/* Detail panel */
.panel-scrim { background: rgba(180,140,60,0.25); }
.detail-panel { background: var(--bg-2); border-left-color: var(--border); box-shadow: -4px 0 24px rgba(120,80,0,0.15); }
.panel-cover { background: var(--bg-3); }
.panel-cover::after { background: linear-gradient(to top, var(--bg-2), transparent); }
.panel-close { background: rgba(180,140,60,0.3); color: var(--text-1); }
.panel-close:hover { background: rgba(180,140,60,0.5); }
.panel-meta { border-color: var(--border); }
.meta-row { border-bottom-color: var(--border); }
.meta-label { color: var(--text-3); }
.meta-val--rating { color: var(--accent); }
.meta-row--deck { background: rgba(179,106,0,0.06); }
.deck-label { color: var(--accent); }
.field-select, .field-input { background: var(--bg); border-color: var(--border); color: var(--text-1); }
.field-group--deck .field-select { border-color: var(--accent); }
.rating-slider { background: var(--bg-4); }
.rating-slider::-webkit-slider-thumb { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.rating-display { color: var(--accent); }
.rating-ticks { color: var(--text-3); }
.panel-actions { border-top-color: var(--border); }
.btn-save { background: var(--accent); }
.btn-save:hover { background: var(--accent-hover); }
.btn-delete { color: var(--danger); border-color: rgba(185,28,28,0.3); }
.btn-delete:hover { background: rgba(185,28,28,0.08); }

/* Modal */
.modal-overlay { background: rgba(180,140,60,0.3); }
.modal { background: var(--bg-2); border-color: var(--border); box-shadow: var(--shadow-lg); }
.modal-header { border-bottom-color: var(--border); }
.modal-close { background: var(--bg-3); color: var(--text-2); }
.modal-close:hover { background: var(--bg-4); color: var(--text-1); }
.modal-search-input { background: var(--bg); border-color: var(--border); color: var(--text-1); }
.btn-search { background: var(--accent); }
.btn-search:hover { background: var(--accent-hover); }
.result-row { background: var(--bg-3); border-color: var(--border); }
.result-row:hover { background: var(--bg-4); border-color: var(--border-2); }
.result-row.selected { border-color: var(--accent); background: var(--accent-dim); }
.result-name { color: var(--text-1); }
.result-row.selected .result-name { color: var(--accent); }
.result-sub { color: var(--text-3); }
.result-score-val { color: var(--accent); }
.modal-game-confirm { background: var(--bg-3); border-color: var(--border); }
.confirm-val--hu { color: var(--verified); }
.field-group--deck { background: rgba(179,106,0,0.07); border-color: var(--border-2); }
.field-label--deck { color: var(--accent); }
.modal-footer { border-top-color: var(--border); }
.btn-cancel { border-color: var(--border); color: var(--text-2); }
.btn-cancel:hover { border-color: var(--border-2); color: var(--text-1); }
.btn-add-confirm { background: var(--accent); }
.btn-add-confirm:hover { background: var(--accent-hover); }

/* Stats */
.summary-card { background: var(--bg-2); border-color: var(--border); }
.chart-card   { background: var(--bg-2); border-color: var(--border); }
.bar-track    { background: var(--bg-4); }
.hist-bar     { background: var(--accent); }

/* Badges */
.deck-badge--verified    { background: rgba(13,122,78,0.12);  color: var(--verified); }
.deck-badge--playable    { background: rgba(180,83,9,0.12);   color: var(--playable); }
.deck-badge--unsupported { background: rgba(185,28,28,0.12);  color: var(--unsupported); }
.deck-badge--unknown     { background: var(--bg-4);           color: var(--text-3); }
.hu-badge--yes { background: rgba(13,122,78,0.12); color: var(--verified); }
.hu-badge--no  { background: var(--bg-4);          color: var(--text-3); }

/* Toast */
.toast { background: var(--bg-2); border-color: var(--border-2); color: var(--text-1); }
.toast--success { background: rgba(13,122,78,0.1);  border-color: rgba(13,122,78,0.3);  color: var(--verified); }
.toast--error   { background: rgba(185,28,28,0.1);  border-color: rgba(185,28,28,0.3);  color: var(--danger); }

/* Empty state */
.empty-title { color: var(--text-2); }
.empty-sub   { color: var(--text-3); }

/* Spinner */
.spinner { border-color: var(--border-2); border-top-color: var(--accent); }

/* Login screen */
.login-overlay { background: var(--bg); }
.login-box { background: var(--bg-2); border-color: var(--border); box-shadow: var(--shadow-lg); }
.login-input { background: var(--bg); border-color: var(--border); color: var(--text-1); }
.login-input:focus { border-color: var(--accent); }
.login-btn { background: var(--accent); }
.login-btn:hover { background: var(--accent-hover); }
.login-error { color: var(--danger); }

/* Logout button */
.btn-logout { border-color: var(--border); color: var(--text-3); }
.btn-logout:hover { border-color: var(--danger); color: var(--danger); }