*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#0b1220;color:#e5e7eb}
.container{max-width:1100px;margin:0 auto;padding:16px}
.topbar{background:#111827;border-bottom:1px solid #1f2937}
.flex{display:flex;align-items:center}.space-between{justify-content:space-between}
.brand{font-weight:700;color:#60a5fa}
.nav{display:flex;align-items:center;gap:8px}
.nav form{margin:0}
.nav .btn, .btn{background:#1f2937;color:#e5e7eb;border:1px solid #374151;border-radius:6px;padding:8px 12px;text-decoration:none;cursor:pointer}
.btn.primary{background:#2563eb;border-color:#1d4ed8}
.grid{display:grid;grid-template-columns:260px 1fr;gap:16px;margin-top:16px}
.sidebar{background:#0f172a;border:1px solid #1e293b;border-radius:8px;padding:12px}
.menu{list-style:none;padding:0;margin:0}
.menu li{margin:6px 0}
.menu a{display:block;padding:8px;border-radius:6px;color:#e5e7eb;text-decoration:none;border:1px solid #1f2937;background:#111827}
.menu a.active,.menu a:hover{background:#1f2937}
.card{background:#0f172a;border:1px solid #1e293b;border-radius:8px;padding:12px;margin:12px 0}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:12px 0}
.stat .label{color:#9ca3af;font-size:12px}
.stat .value{font-size:24px;font-weight:700}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.table{width:100%;border-collapse:collapse;table-layout:fixed}
.table th,.table td{border-bottom:1px solid #1e293b;padding:8px;text-align:left}
.auth-wrapper{max-width:360px;margin:40px auto}
/* Settings page should not be constrained like auth forms */
#settings-page{max-width:100%; margin:16px auto}
/* Global link styling for dark theme */
a, a:visited{color: var(--ring); text-decoration: underline}
a:hover{color:#60a5fa}
a:active{color:#93c5fd}
/* Make links in auth pages readable on dark backgrounds */
.auth-wrapper a, .auth-wrapper a:visited{color: var(--text); text-decoration: underline}
label{display:block;margin-top:8px;margin-bottom:4px}
input[type=text],input[type=password],input[type=email],input[type=datetime-local]{width:100%;padding:10px;border-radius:6px;border:1px solid #374151;background:#111827;color:#e5e7eb;color-scheme: dark}
/* Tweak datetime-local controls for dark theme */
input[type=datetime-local]::-webkit-calendar-picker-indicator{filter: invert(.9); opacity:.85}
input[type=datetime-local]::-webkit-datetime-edit-fields-wrapper{background: transparent}
.alert{padding:10px;border-radius:6px;margin-bottom:12px}
.alert-error{background:#7f1d1d;color:#fee2e2}
.footer{opacity:.6;margin-top:40px}

/* --- Modern UI overrides --- */
:root{
  --bg: #0b1220;
  --panel: #0f172a;
  --panel-2: #111827;
  --panel-3: #1f2937;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --primary: #2563eb;
  --primary-600:#1d4ed8;
  --ring: #3b82f6;
  --danger: #ef4444;
  --success: #10b981;
  --shadow: 0 10px 25px rgba(0,0,0,.35);
}

body{
  background: radial-gradient(1200px 800px at 10% -10%, rgba(59,130,246,.08), transparent),
              radial-gradient(1000px 700px at 90% -20%, rgba(16,185,129,.06), transparent),
              var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Reduce likelihood of double-tap zoom on mobile */
html, body, a, button, .btn { touch-action: manipulation; }

.topbar{
  position: sticky; top:0; z-index: 10000;
  background: rgba(17,24,39,.7);
  border-bottom: 1px solid #1f2937;
  backdrop-filter: saturate(180%) blur(8px);
}
.brand{font-weight:800; letter-spacing:.2px}
.nav .user{color:var(--muted); margin-right:8px}

.container{max-width:1200px; padding:20px}

.grid{gap:20px}
.grid-2{gap:20px}

.sidebar{background:var(--panel); border:1px solid #1e293b; border-radius:12px; padding:14px; box-shadow: var(--shadow)}
.card{background:var(--panel); border:1px solid #1e293b; border-radius:12px; padding:16px; margin:16px 0; box-shadow: var(--shadow)}

.btn, .nav .btn{
  background: var(--panel-3);
  color: var(--text);
  border: 1px solid #374151;
  border-radius: 10px;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: all .15s ease-in-out;
}
.btn:link, .btn:visited, .btn:hover, .btn:focus, .btn:active,
.nav .btn:link, .nav .btn:visited, .nav .btn:hover, .nav .btn:focus, .nav .btn:active{
  color: var(--text);
  text-decoration: none;
}
.btn:hover{border-color: #4b5563; transform: translateY(-1px)}
.btn:active{transform: translateY(0)}
.btn.primary{background: var(--primary); border-color: var(--primary-600)}
.btn.primary:hover{filter: brightness(.98)}

label{font-weight:600; color: var(--muted)}
input[type=text],input[type=password],input[type=email],input[type=number],input[type=datetime-local], select{
  width:100%; padding:12px 12px; border-radius:10px; border:1px solid #2b3646; background: var(--panel-2);
  color: var(--text); outline: none; transition: border-color .15s, box-shadow .15s;
}
select{appearance:none}
input:focus, select:focus{border-color: var(--ring); box-shadow: 0 0 0 3px rgba(59,130,246,.2)}

.stats{gap:16px}
.stat{background: linear-gradient(180deg, rgba(37,99,235,.08), rgba(37,99,235,0)); border-radius:12px; border:1px solid #1e293b; padding:14px}
.stat .label{color:var(--muted); font-size:12px}
.stat .value{font-size:26px; font-weight:800}

.table{width:100%; border-collapse:collapse; border-radius:12px; overflow:hidden; table-layout:auto}
.table thead th{background: #0f172a; position: sticky; top:0; z-index:1}
.table th, .table td{border-bottom:1px solid #1e293b; padding:12px 10px; text-align:left}
.table th:first-child, .table td:first-child{white-space:nowrap; padding-right:18px; width: 120px}
.table th + th, .table td + td{padding-left:18px}
.table tbody tr:hover{background: rgba(255,255,255,.02)}

.alert{padding:12px 14px; border-radius:10px}
.alert-success{background: rgba(16,185,129,.18); color:#d1fae5; border:1px solid rgba(16,185,129,.35)}
.alert-error{background: rgba(239,68,68,.18); color:#fee2e2; border:1px solid rgba(239,68,68,.35)}

/* Modal (native <dialog> with class="modal") */
dialog.modal{
  background: var(--panel);
  color: var(--text);
  border: 1px solid #1e293b;
  border-radius: 12px;
  padding: 16px;
  max-width: min(92vw, 520px);
  box-shadow: var(--shadow);
}
dialog.modal::backdrop{
  background: rgba(0,0,0,.45);
}

/* Shared modal actions row */
.modal-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  margin-top:12px;
}

.scrollbox{scrollbar-gutter: stable;}
.card > .scrollbox{width:100%}
.scrollbox::-webkit-scrollbar{height:10px;width:10px}
.scrollbox::-webkit-scrollbar-thumb{background:#334155;border-radius:8px}
.scrollbox::-webkit-scrollbar-track{background:#0b1220}
.table-responsive{width:100%; overflow-x:auto; -webkit-overflow-scrolling: touch}
.table-responsive > .table{min-width: 960px}
/* Settings page tables have few columns; allow a narrower min-width */
#settings-page .table-responsive > .table{min-width: 520px}
/* Prefer reasonable column widths on settings tables */
#settings-page table.table th:nth-child(1),
#settings-page table.table td:nth-child(1){width:40%}
#settings-page table.table th:nth-child(2),
#settings-page table.table td:nth-child(2){width:25%}
#settings-page table.table th:nth-child(3),
#settings-page table.table td:nth-child(3){width:35%}
/* Align action buttons to the right by default */
#settings-page table.table td:last-child{display:flex; gap:8px; justify-content:flex-end}

/* Dashboard actions dropdown menu */
.dash-menu .menu-item{
  display:block;
  padding:8px 10px;
  margin:4px 0;
  border:1px solid #1f2937;
  border-radius:10px;
  text-decoration:none;
  color: var(--text);
  background: var(--panel-3);
}
.dash-menu .menu-item:hover{background:#1f2937}

/* Dashboard header layout helpers */
#dashHeader{gap:8px; overflow: visible}
#dashTitleBox{flex:1; min-width:0}
#dashActions{flex-shrink:0; position: relative; z-index: 10}
#dashTitleBox h1{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
/* JS-driven collapse */
.dash-actions.collapsed #dashBtns{display:none !important}
.dash-actions.collapsed #dashMenuBtn{display:inline-flex !important}
/* Ensure dropdown overlays tables (sticky thead has z-index:1) */
.dash-menu{z-index: 4500}
.dash-actions.open .dash-menu{position: fixed !important; z-index: 99999}
.dash-actions.open #dashBtns{display:none !important}
/* Enforce single-line title on small screens */
@media (max-width: 1200px){
  #dashTitleBox h1{white-space:nowrap !important}
  /* Stack sidebar above content when space is tight */
  .grid{grid-template-columns: 1fr}
}

/* Bowling settings: responsive category editor */
.bowl-cat .cat-controls{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.bowl-cat .cat-fields{display:grid; grid-template-columns: minmax(220px, 2fr) minmax(120px,1fr) minmax(120px,1fr) auto; gap:8px; align-items:center}
.bowl-cat .cat-others{display:grid; grid-template-columns: auto minmax(160px,1fr) minmax(120px,1fr) minmax(120px,1fr); gap:8px; align-items:center}
.bowl-cat input[name="name"]{font-size:16px}

/* Inline suffix for inputs (e.g., Elo, €) inside the field (right aligned) */
.input-suffix{position: relative; display:block; width: 100%}
.input-suffix input{width:100%; padding-right: 60px}
.input-suffix .suffix{position:absolute; right:12px; top:50%; transform: translateY(-50%); color: var(--muted); font-weight:600; pointer-events:none; white-space: nowrap}

@media (max-width: 900px){
  .bowl-cat .cat-fields{grid-template-columns: minmax(200px, 2fr) minmax(100px,1fr) minmax(100px,1fr) auto}
  .bowl-cat .cat-others{grid-template-columns: auto minmax(140px,1fr) minmax(100px,1fr) minmax(100px,1fr)}
}

@media (max-width: 640px){
  .bowl-cat .cat-fields{grid-template-columns: 1fr;}
  .bowl-cat .cat-others{grid-template-columns: 1fr}
  .bowl-cat .cat-controls{justify-content:flex-start}
  .bowl-cat .add-cat .cat-fields{grid-template-columns: 1fr}
  .bowl-cat .add-cat .btn{width:100%}
}

@media (max-width: 980px){
  .grid{grid-template-columns: 1fr}
  .grid-2{grid-template-columns: 1fr}
  .stats{grid-template-columns: 1fr}
  .container{padding-left:0; padding-right:0}
  .card{width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); border-radius:0}
  /* On stacked layout, force tables to fill the card width */
  .table{display:table; width:100%; overflow-x:visible}
  /* Keep a minimum width so horizontal scroll appears when needed */
  .table-responsive > .table{min-width: 760px}
  /* Settings-page tables can be even narrower */
  #settings-page .table-responsive > .table{min-width: 520px}
}

@media (max-width: 640px){
  .table th, .table td{padding:10px 8px}
  .table th:first-child, .table td:first-child{padding-right:14px; white-space:nowrap; width: 100px}
  .table th + th, .table td + td{padding-left:14px}
  .table-responsive > .table{min-width: 760px}
  /* Mobile: tighten settings-page table and wrap action buttons */
  #settings-page .table-responsive > .table{min-width: 480px}
  #settings-page table.table td:last-child{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-start}
  #settings-page table.table td:last-child .btn{flex: 1 1 auto}
  #leagues-section .btn, #users-section .btn{padding:12px 14px}
  #leagues-section input, #users-section input, #leagues-section select, #users-section select{font-size:16px}
  /* Darts tournaments: make Ergebnis visible with minimal scroll */
  #currentMatchesCard.is-dart .table-responsive > .table{min-width: 460px}
  #currentMatchesCard.is-dart .table th.col-actions,
  #currentMatchesCard.is-dart .table td.col-actions{width:1%; white-space:nowrap}
  #currentMatchesCard.is-dart .col-actions .btn{font-size:0; padding:6px 8px; width:28px; justify-content:center}
  #currentMatchesCard.is-dart .col-actions .btn::after{content:'\25B6'; font-size:14px; line-height:1}
  #currentMatchesCard.is-dart .table th.col-score,
  #currentMatchesCard.is-dart .table td.col-score{min-width: 140px; width:auto}
  #currentMatchesCard.is-dart .score-pair{gap:6px}
  #currentMatchesCard.is-dart .score-pair input[type=number]{width:42px; min-width:36px}
  #currentMatchesCard.is-dart .col-score .btn{padding:6px 8px; font-size:0; width:28px; justify-content:center}
  #currentMatchesCard.is-dart .col-score .btn::after{content:'\2713'; font-size:14px; line-height:1}
  /* Allow Home/Away to shrink with ellipsis */
  #currentMatchesCard.is-dart .table th:nth-child(3),
  #currentMatchesCard.is-dart .table td:nth-child(3),
  #currentMatchesCard.is-dart .table th:nth-child(4),
  #currentMatchesCard.is-dart .table td:nth-child(4){
    max-width: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* hide non-essential meta inside Ergebnis on very small screens */
  #currentMatchesCard.is-dart .col-score .badge{display:none}
  #currentMatchesCard.is-dart .col-score span[style*='color:#aaa']{display:none}
}

#settings-page table.table td:last-child{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-start}
#settings-page table.table td:last-child .btn{flex: 1 1 auto}
#leagues-section .btn, #users-section .btn{padding:12px 14px}
#leagues-section input, #users-section input, #leagues-section select, #users-section select{font-size:16px}

#currentMatchesCard .table th.col-score,
#currentMatchesCard .table td.col-score{
  width: auto;
  min-width: 260px;
}
#currentMatchesCard.is-dart .table th.col-score,
#currentMatchesCard.is-dart .table td.col-score{
  width: 1%;
  min-width: 200px;
}
/* Darts: make the actions column very compact */
#currentMatchesCard.is-dart .table th.col-actions,
#currentMatchesCard.is-dart .table td.col-actions{
  width: 1%;
  white-space: nowrap;
}
#currentMatchesCard.is-dart .col-actions .btn{
  font-size: 12px;
  padding: 6px 8px;
}
#currentMatchesCard .table{
  table-layout: auto;
}
#currentMatchesCard.is-dart .table-responsive > .table{
  min-width: 600px;
}
#currentMatchesCard form[data-mid]{
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
}
#currentMatchesCard .col-score > div,
#currentMatchesCard .col-score form{
  max-width: 100%;
}
#currentMatchesCard .table-responsive > .table{
  min-width: 720px;
}
#currentMatchesCard .score-pair{
  display: inline-flex;
  gap: 8px;
}
#currentMatchesCard .score-pair input[type=number]{
  width: 64px;
  min-width: 56px;
}

#doneMatchesCard .table th.col-score,
#doneMatchesCard .table td.col-score{
  width: 240px;
}
#doneMatchesCard .table-responsive > .table{
  min-width: 640px;
}

@media (max-width: 1600px){
  /* Hide 'Runde' column when space is tight */
  #currentMatchesCard .table th.col-round,
  #currentMatchesCard .table td.col-round,
  #currentMatchesCard .table thead th:first-child,
  #currentMatchesCard .table tbody td:first-child{
    display: none;
  }
  /* Give more room to the Ergebnis column (responsive) */
  #currentMatchesCard .table th.col-score,
  #currentMatchesCard .table td.col-score{
    width: auto;
    min-width: 240px;
  }
  /* Darts: make Ergebnis column even tighter */
  #currentMatchesCard.is-dart .table th.col-score,
  #currentMatchesCard.is-dart .table td.col-score{
    min-width: 200px;
  }
  #currentMatchesCard .score-pair input[type=number]{
    width: 54px;
    min-width: 46px;
  }
  #currentMatchesCard form[data-mid]{
    gap: 6px;
  }

  #doneMatchesCard .table th.col-round,
  #doneMatchesCard .table td.col-round,
  #doneMatchesCard .table thead th:first-child,
  #doneMatchesCard .table tbody td:first-child{
    display: none;
  }
  #doneMatchesCard .table th.col-score,
  #doneMatchesCard .table td.col-score{
    width: auto;
    min-width: 220px;
  }
}