:root { --ok:#1f9d55; --warn:#c28b00; --bad:#cc2b2b; --muted:#6b7280; }

/*
  Mobile fix:
  If ANY element becomes wider than the viewport, iOS Safari creates horizontal scrolling
  and the whole page looks "pushed" to the right.
  This global box-sizing + overflow-x guard prevents that.
*/
*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; overflow-x: hidden; }

body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin:0; background:#f7f7f8; color:#111827; }
a { color: #2563eb; text-decoration:none; }
a:hover { text-decoration:underline; }
.container { max-width: 980px; margin: 0 auto; padding: 18px; width: 100%; }
.card { background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:16px; box-shadow: 0 6px 18px rgba(0,0,0,0.05); }
.grid { display:grid; gap:14px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 760px){ .grid-2{ grid-template-columns:1fr; } }
label { display:block; font-size: 13px; color:#374151; margin: 10px 0 6px; }
input, select { width:100%; max-width:100%; padding:10px 12px; border:1px solid #d1d5db; border-radius:10px; font-size:14px; }
input, select { background:#fff; color:#111827; }
button { background:#111827; color:#fff; border:none; padding:10px 14px; border-radius:10px; cursor:pointer; font-size:14px; max-width:100%;}
button[disabled]{ opacity:0.6; cursor:not-allowed; }
.badge { display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600; }
.badge.ok{ background: rgba(31,157,85,0.12); color: var(--ok); }
.badge.warn{ background: rgba(194,139,0,0.12); color: var(--warn); }
.badge.bad{ background: rgba(204,43,43,0.12); color: var(--bad); }
.table { width:100%; border-collapse: collapse; }
.table th, .table td { padding:10px 8px; border-bottom:1px solid #e5e7eb; text-align:left; font-size:14px; }

/* Forms inside tables: keep compact and readable */
.table input, .table select { padding:8px 10px; border-radius:10px; }
.table td { vertical-align: middle; }

/* =============================
   Admin layout: allow wide tables on desktop
   ============================= */

/* The default container is intentionally narrow (good for mobile),
   but in admin we need to see many columns without horizontal scroll. */
.admin .container { max-width: 1400px; }

/* Some admin pages may wrap tables in .table-wrap to allow mobile scrolling.
   On desktop we prefer full visibility. */
.admin .table-wrap { overflow-x: visible !important; }
.admin .table-wrap .table { width: 100% !important; }

@media (max-width: 980px) {
  .admin .table-wrap { overflow-x: auto !important; }
}

/* If a table is wrapped in a scroll container, disable scroll on desktop
   so the full table is visible when there's enough space. */
.table-wrap { width: 100%; max-width: 100%; }
@media (min-width: 1100px) {
  .table-wrap { overflow-x: visible !important; }
}
@media (max-width: 1099px) {
  .table-wrap { overflow-x: auto !important; }
}

/* Booking date/time widget grid */
.booking-datetime-grid { display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-top:10px; }
@media (max-width: 760px){ .booking-datetime-grid{ grid-template-columns:1fr; } }

/* Admin fees: clearer status toggle */
.fee-status { display:flex; align-items:center; gap:10px; }
.fee-status input[type="checkbox"]{ width:18px; height:18px; }
.fee-status span{ font-weight:700; }

/* Fees table usability */
.table select, .table input { padding:8px 10px; }
.table th { white-space: nowrap; }
.table td:first-child { max-width: none; width: auto }

/* Archived (soft-deleted) children in admin fees */
tr.is-archived { opacity: 0.65; }

/* Booking: calendar + times responsive */
.booking-datetime-grid { display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-top:10px; }
@media (max-width: 760px){ .booking-datetime-grid{ grid-template-columns:1fr; } }

/* Admin: compact toggle */
.toggle { display:flex; align-items:center; gap:10px; }
.toggle input[type="checkbox"]{ width:18px; height:18px; }
.nav { display:flex; gap:12px; padding:12px 18px; background:#9CD23A; color:#2B2B2B; align-items:center; flex-wrap:wrap; }
.nav > * { white-space: nowrap; }
@media (max-width: 760px){
  .nav{ gap:10px; padding:10px 14px; }
  .nav a, .nav summary{ font-size:16px; }
}
.nav a{ color:#2B2B2B; opacity:0.9; }
.nav a:hover{ opacity:1; }
.small { font-size: 12px; color: var(--muted); }

/* Tournament score pills (used in matrix + order of play) */
.score-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:#111827;
  color:#fff;
  border:0;
  cursor:pointer;
  font-weight:800;
}
.score-pill.win{ background:#16a34a !important; }
.score-pill.lose{ background:#dc2626 !important; }

/* Dropdown via <details> (works on mobile/touch) */
.nav-dd{ position:relative; }
.nav-dd > summary{
  list-style:none;
  cursor:pointer;
  color:#2B2B2B;
  opacity:0.9;
  user-select:none;
}
.nav-dd > summary::-webkit-details-marker{ display:none; }
.nav-dd[open] > summary{ opacity:1; }
.nav-dd-menu{
  position:absolute;
  top: calc(100% + 8px);
  left:0;
  min-width: 190px;
  background:#111827;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:12px;
  padding:8px;
  z-index:100;
  box-shadow:0 12px 26px rgba(0,0,0,0.18);
}
.nav-dd-menu a{
  display:block;
  padding:8px 10px;
  border-radius:10px;
  color:#fff;
  opacity:0.92;
}
.nav-dd-menu a:hover{ background: rgba(255,255,255,0.08); opacity:1; }
@media (max-width: 760px){
  .nav-dd-menu{
    position:fixed;
    left:14px;
    right:14px;
    top:64px;
    min-width:auto;
  }
}
.dropdown-empty { display:block; padding: 8px 10px; opacity:0.7; font-size:12px; }

/* Admin fees: mobile cards */
.btn-full{ width:auto; }
@media (max-width: 760px){
  .table thead{ display:none; }
  .table, .table tbody, .table tr, .table td{ display:block; width:100%; }
  .table tr{
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:12px;
    margin:0 0 12px;
    background:#fff;
  }
  .table td{
    border:none;
    padding:8px 0;
  }
  .table td[data-label]:before{
    content: attr(data-label);
    display:block;
    font-size:12px;
    color: var(--muted);
    margin-bottom:6px;
    font-weight:600;
  }
  .table td:last-child{ padding-top:12px; }
  .btn-full{ width:100%; }

  /* Fees UX on mobile: when unpaid, hide the extra fields to keep cards compact */
  .table tr.is-unpaid td[data-label="Сума"],
  .table tr.is-unpaid td[data-label="Метод"],
  .table tr.is-unpaid td[data-label="Дата"],
  .table tr.is-unpaid td:last-child{
    display:none;
  }
}

/* =====================================================
   BOOKING (calendar) – iOS/mobile overflow FIX
   Targets booking page by IDs used only there.
   ===================================================== */
#cal_grid{
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  width: 100% !important;
  max-width: 100% !important;
}
#cal_grid > *{
  min-width: 0 !important;
}
#cal_grid button{
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* weekday header row (inline grid before #cal_grid) */
#cal_grid_prev_header,
#cal_grid_weekdays{
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}

/* When weekdays row has no ID (inline style), ensure any 7-col grid inside booking form shrinks */
#booking_form div[style*="grid-template-columns:repeat(7,1fr)"]{
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}

/* Prevent any accidental horizontal scroll on booking page */
#booking_form, #booking_form *{
  max-width: 100%;
}

/* =============================
   Booking layout fixes (laptop)
   ============================= */

/* Make the booking form wider than the payment column on desktop/laptop.
   This prevents the calendar cells from becoming too narrow and overlapping. */
.booking-layout.grid-2 { 
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

/* Stack columns earlier (laptops/tablets), not only on very small screens */
@media (max-width: 980px){
  .booking-layout.grid-2 { grid-template-columns: 1fr; }
}

/* Stack calendar + times earlier too (the form column can become narrow) */
@media (max-width: 900px){
  .booking-datetime-grid { grid-template-columns: 1fr; }
}

/* Calendar day buttons: remove global button padding that causes overlap */
#cal_grid > button {
  padding: 0 !important;
  width: 100%;
}

/* --- Attendance (Admin) --- */
.att-scroll{ overflow-x:auto; }
.att-table{ width:100%; border-collapse:separate; border-spacing:0; }
.att-table th, .att-table td{ border-bottom:1px solid #e5e7eb; padding:0; text-align:center; }
.att-table thead th{ position:sticky; top:0; background:#fff; z-index:2; font-size:12px; color:#374151; }
.att-day-head{ min-width:36px; padding:8px 6px; }
.att-day-head.is-weekend{ background:#fafafa; }
.att-sticky-col{ position:sticky; left:0; background:#fff; z-index:3; border-right:1px solid #e5e7eb; }
.att-name{ text-align:left; padding:10px 12px; min-width:220px; max-width:280px; }
.att-cell{ width:100%; min-width:36px; height:34px; border:0; background:transparent; cursor:pointer; font-weight:800; }
.att-cell.att-absent{ color:#9ca3af; }
.att-cell.att-present{ background:#ecfdf5; color:#065f46; }
.att-cell:focus{ outline:2px solid #111827; outline-offset:-2px; }
.att-totals-row td{ background:#f9fafb; font-weight:800; font-size:12px; color:#111827; }
.att-total-label{ text-align:left; padding:10px 12px; }
.att-total{ padding:8px 6px; }

@media (max-width: 640px){
  .att-name, .att-total-label{ min-width:180px; }
}
/* --- Responsive nav: desktop default --- */
.nav { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.nav a, .nav summary { text-decoration:none; }

/* Hamburger button hidden on desktop */
.nav-toggle { display:none; background:transparent; border:0; font-size:18px; padding:10px 12px; cursor:pointer; }

/* Mobile dropdown panel */
.nav-mobile { display:none; }

/* --- Mobile breakpoint --- */
@media (max-width: 820px) {
  /* Hide desktop links */
  .nav a, .nav details { display:none; }

  /* Keep brand visible */
 .nav .brand {
  font-weight: 700;
  margin-right: auto; /* ⬅️ това бута менюто вдясно */
}

  /* Show hamburger */
  .nav-toggle { display:inline-flex; align-items:center; gap:10px; color:#111827;}

  /* Show mobile panel when open */
  .nav[data-open="1"] + .nav-mobile { display:block; }

  /* Mobile panel styling */
  .nav-mobile {
    padding: 10px 12px;
  }
  .nav-mobile a {
    display:block;
    padding: 10px 6px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
  }
  .nav-mobile .dd-title {
    font-weight:700;
    padding:10px 6px 6px;
  }
}
/* Mobile: black text in header + mobile menu */
@media (max-width: 820px){
  .nav,
  .nav a,
  .nav summary,
  .nav-toggle,
  .nav-toggle span,
  .nav-mobile,
  .nav-mobile a,
  .nav-mobile .dd-title {
    color: #000 !important;
  }
}


/* махаме синьото от линковете */
.nav a,
.nav-mobile a {
  text-decoration: none;
}

/* hamburger иконата */
.nav-toggle {
  color: #000 !important;
}

/* === Toast message (admin save feedback) === */
.toast{
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #111827;
  color: #fff;
  box-shadow: 0 12px 26px rgba(0,0,0,0.22);
  font-weight: 700;
  z-index: 9999;
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.toast[data-show="1"]{
  opacity: 1;
  transform: translateY(0);
}
@media(min-width: 820px){
  .toast{ left:auto; right:18px; max-width: 420px; }
}
html, body{
  max-width: 100%;
  overflow-x: hidden;
}
.table-wrap{
  width:100%;
  overflow-x:auto;
}

.table{
  width:max-content;
  min-width:100%;
}/* --- TOURNAMENT TABLE FIX --- */

.card .table-wrap{
    width:100% !important;
    overflow-x:auto !important;
}

.card .table{
    width:max-content !important;
    min-width:100% !important;
}

.card{
    max-width:100% !important;
}
.mobile-standings{ display:none; }

@media (max-width: 768px){
  .matrix-wrap{ display:none !important; }
  .mobile-standings{ display:block; }

  .stand-card{
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:12px;
    margin:0 0 10px;
    background:#fff;
  }

  .stand-name{
    font-weight:900;
    font-size:16px;
    line-height:1.2;
    margin:0 0 10px;
  }

  .stand-metrics{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
  }

  .stand-metrics span{
    display:block;
    font-size:12px;
    color:var(--muted);
    margin-bottom:2px;
  }

  .stand-metrics b{
    font-size:14px;
    font-weight:900;
  }
}
.score-pill{
  background:#111827;
  color:#fff;
  font-weight:700;
}

/* победител */
.score-pill.win{
  background:#16a34a;
}

/* загубил */
.score-pill.lose{
  background:#dc2626;
}

/* hover */
.score-pill:hover{
  transform:scale(1.05);
}