/* === Lindy Hop Game – Global Styles === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:         #0d0d1a;
  --surface:    #16162a;
  --surface2:   #1e1e38;
  --border:     #2e2e52;
  --accent:     #c9a227;
  --accent2:    #e8c84a;
  --text:       #e0d8cc;
  --text2:      #9e9580;
  --red-bg:     #6b1717;
  --red-bd:     #c0392b;
  --blue-bg:    #14305a;
  --blue-bd:    #2471a3;
  --green-bg:   #14492a;
  --green-bd:   #219150;
  --danger:     #c0392b;
  --success:    #27ae60;
}

body { font-family: system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--text); min-height:100vh; font-size:15px; line-height:1.5; }
a { color:var(--accent); text-decoration:none; }
a:hover { color:var(--accent2); }
h1 { font-size:1.8rem; color:var(--accent); margin-bottom:.5rem; }
h2 { font-size:1.3rem; color:var(--accent); margin-bottom:.75rem; }
h3 { font-size:1rem; color:var(--text); margin-bottom:.5rem; }

/* Layout */
.container { max-width:980px; margin:0 auto; padding:24px 16px; }

.topbar { background:var(--surface); border-bottom:1px solid var(--border); padding:12px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.topbar-title { font-size:1rem; color:var(--accent); font-weight:600; }
.topbar-nav { display:flex; gap:16px; align-items:center; }
.topbar-nav a { color:var(--text2); font-size:.9rem; }
.topbar-nav a:hover { color:var(--text); }

/* Landing */
.landing { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; padding:24px; text-align:center; }
.landing h1 { font-size:2.4rem; margin-bottom:8px; }
.landing > p { color:var(--text2); margin-bottom:48px; }
.landing-cards { display:flex; gap:24px; flex-wrap:wrap; justify-content:center; }
.landing-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:40px 48px; width:220px; display:block; color:var(--text); transition:border-color .2s, transform .2s; }
.landing-card:hover { border-color:var(--accent); transform:translateY(-3px); color:var(--text); }
.landing-card .icon { font-size:2.4rem; margin-bottom:16px; }
.landing-card h2 { font-size:1.1rem; color:var(--text); margin-bottom:8px; }
.landing-card p { font-size:.85rem; color:var(--text2); margin:0; }

/* Forms */
.form-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:28px; }
.form-group { margin-bottom:18px; }
.form-group label { display:block; text-align:center; color:var(--text2); font-size:.9rem; font-weight:500; }
.form-group input,
.form-group select,
.form-group textarea { width:100%; background:var(--surface2); border:1px solid var(--border); border-radius:6px; padding:10px 12px; color:var(--text); font-size:.95rem; font-family:inherit; transition:border-color .2s; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline:none; border-color:var(--accent); }
.form-group textarea { min-height:80px; resize:vertical; }

.checkbox-group { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.checkbox-item { display:flex; align-items:center; gap:6px; background:var(--surface2); border:1px solid var(--border); border-radius:6px; padding:6px 12px; cursor:pointer; font-size:.88rem; transition:border-color .2s; }
.checkbox-item:has(input:checked) { border-color:var(--accent); background:rgba(201,162,39,.1); }
.checkbox-item input { cursor:pointer; }
/*label.checkbox-item { margin-bottom: 0; }*/

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border-radius:6px; border:1px solid transparent; cursor:pointer; font-size:.9rem; font-family:inherit; font-weight:500; transition:all .15s; text-decoration:none; }
.btn-primary { background:var(--accent); color:#0d0d1a; border-color:var(--accent); }
.btn-primary:hover { background:var(--accent2); color:#0d0d1a; }
.btn-secondary { background:var(--surface2); color:var(--text); border-color:var(--border); }
.btn-secondary:hover { border-color:var(--text2); color:var(--text); }
.btn-danger { background:transparent; color:var(--danger); border-color:var(--danger); }
.btn-danger:hover { background:var(--danger); color:#fff; }
.btn-sm { padding:5px 10px; font-size:.82rem; }
.btn-row { display:flex; gap:10px; align-items:center; margin-top:20px; flex-wrap:wrap; }

/* Tables */
.admin-table { width:100%; border-collapse:collapse; font-size:.9rem; }
.admin-table th { background:var(--surface2); color:var(--text2); font-weight:600; padding:10px 14px; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap; }
.admin-table td { padding:10px 14px; border-bottom:1px solid rgba(46,46,82,.5); vertical-align:middle; }
.admin-table tr:hover td { background:rgba(255,255,255,.02); }

/* Badges */
.badge { display:inline-block; padding:2px 8px; border-radius:4px; font-size:.78rem; font-weight:600; }
.badge-yes { background:rgba(39,174,96,.2); color:#27ae60; border:1px solid rgba(39,174,96,.3); }
.badge-no  { background:rgba(127,140,141,.15); color:#7f8c8d; border:1px solid rgba(127,140,141,.2); }
.badge-cat { background:rgba(201,162,39,.15); color:var(--accent); border:1px solid rgba(201,162,39,.2); }

/* Beat Selector */
.beat-section { margin:24px 0; }
.beat-section > h3 { color:var(--text2); font-size:.82rem; text-transform:uppercase; letter-spacing:1px; margin-bottom:12px; }
.beat-grid { display:grid; grid-template-columns:repeat(8,1fr); gap:8px; }

.beat-card { background:var(--surface2); border:2px solid var(--border); border-radius:8px; padding:12px 6px 10px; text-align:center; cursor:pointer; transition:transform .1s, border-color .15s, background .15s; user-select:none; }
.beat-card:active { transform:scale(.93); }
.beat-card.red   { background:var(--red-bg);   border-color:var(--red-bd); }
.beat-card.blue  { background:var(--blue-bg);  border-color:var(--blue-bd); }
.beat-card.green { background:var(--green-bg); border-color:var(--green-bd); }

.beat-num  { font-size:10px; color:rgba(255,255,255,.4); margin-bottom:8px; font-weight:700; letter-spacing:.5px; }
.beat-step { font-size:12px; color:rgba(255,255,255,.85); min-height:32px; display:flex; align-items:center; justify-content:center; margin-bottom:10px; line-height:1.2; }
.beat-dot  { width:26px; height:26px; border-radius:50%; border:2px solid rgba(255,255,255,.15); background:rgba(255,255,255,.07); margin:0 auto; transition:background .15s, border-color .15s; }
.beat-card.red   .beat-dot { background:rgba(192,57,43,.6); border-color:var(--red-bd); }
.beat-card.blue  .beat-dot { background:rgba(36,113,163,.6); border-color:var(--blue-bd); }
.beat-card.green .beat-dot { background:rgba(33,145,80,.6); border-color:var(--green-bd); }

.beat-legend { display:flex; gap:18px; margin-top:14px; font-size:.82rem; color:var(--text2); flex-wrap:wrap; }
.beat-legend-item { display:flex; align-items:center; gap:6px; }
.legend-dot { width:12px; height:12px; border-radius:50%; }
.legend-dot.red   { background:var(--red-bd); }
.legend-dot.blue  { background:var(--blue-bd); }
.legend-dot.green { background:var(--green-bd); }

/* Role/Level radio cards */
.role-level-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:24px; }
.option-group label { display:block; margin-bottom:6px; color:var(--text2); font-size:.88rem; font-weight:500; }
.radio-cards { display:flex; gap:8px; }
.radio-card { flex:1; background:var(--surface2); border:2px solid var(--border); border-radius:8px; padding:10px 8px; text-align:center; cursor:pointer; font-size:.88rem; transition:border-color .2s, background .2s; }
.radio-card:has(input:checked) { border-color:var(--accent); background:rgba(201,162,39,.1); color:var(--accent); }
.radio-card input { display:none; }

/* Pohyb info */
.pohyb-info { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:20px; margin-bottom:24px; }
.pohyb-info h2 { font-size:1.4rem; margin-bottom:4px; }
.pohyb-meta { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.meta-pill { background:var(--surface2); border:1px solid var(--border); border-radius:20px; padding:4px 12px; font-size:.82rem; color:var(--text2); }

/* Kostra grid */
.kostra-grid { display:grid; grid-template-columns:70px repeat(8,1fr); gap:6px; margin:16px 0; font-size:.85rem; }
.kostra-header { background:var(--surface2); border-radius:6px; padding:8px 4px; text-align:center; color:var(--text2); font-weight:600; font-size:.82rem; }
.kostra-label  { display:flex; align-items:center; justify-content:center; color:var(--text2); font-size:.82rem; font-weight:600; }
.kostra-cell select { width:100%; background:var(--surface2); border:1px solid var(--border); border-radius:6px; padding:7px 4px; color:var(--text); font-size:.8rem; font-family:inherit; }
.kostra-cell select:focus { outline:none; border-color:var(--accent); }

/* Analysis */
.color-badge { display:inline-block; padding:2px 8px; border-radius:4px; font-size:.8rem; font-weight:600; }
.color-badge.red   { background:rgba(192,57,43,.25); color:#e74c3c; border:1px solid rgba(192,57,43,.4); }
.color-badge.blue  { background:rgba(36,113,163,.25); color:#3498db; border:1px solid rgba(36,113,163,.4); }
.color-badge.green { background:rgba(39,174,96,.25); color:#27ae60; border:1px solid rgba(39,174,96,.4); }
.analyza-table { width:100%; border-collapse:collapse; font-size:.88rem; }
.analyza-table th, .analyza-table td { padding:8px 12px; border-bottom:1px solid var(--border); text-align:center; }
.analyza-table th { background:var(--surface2); color:var(--text2); font-weight:600; }
.analyza-table td:first-child { text-align:left; font-weight:500; }

/* Flash messages */
.flash { padding:12px 16px; border-radius:8px; margin-bottom:16px; font-size:.9rem; }
.flash-success { background:rgba(39,174,96,.15); border:1px solid rgba(39,174,96,.3); color:#2ecc71; }
.flash-error   { background:rgba(192,57,43,.15); border:1px solid rgba(192,57,43,.3); color:#e74c3c; }

/* Misc */
.section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.empty-state  { text-align:center; padding:48px 24px; color:var(--text2); }
.empty-state .icon { font-size:3rem; }
.empty-state p { margin-top:12px; font-size:.9rem; }
hr.divider { border:none; border-top:1px solid var(--border); margin:28px 0; }

@media (max-width:620px) {
  .beat-grid { grid-template-columns:repeat(4,1fr); }
  .role-level-grid { grid-template-columns:1fr; }
  .landing-cards { flex-direction:column; align-items:center; }
  .kostra-grid { grid-template-columns:60px repeat(4,1fr); }
}