/* /css/style.css */

/*
  ========== CSS INDEX ==========
  - BASE LAYOUT + GLOBAL RESET
  - GLOBAL PAGE LAYOUT
  - HEADER + NAV
  - FORM ELEMENTS
  - DEFAULT BUTTON STYLE (Neutralized)
  - BUTTON STYLES (Unified Compact Buttons)
  - TABLE STYLING
  - FOOTER
  - MATCH BOX (legacy non-bracket use)
  - BRACKET CONTAINER AND LAYOUT
  - BRACKET WRAPPER
  - BRACKET LINE ALIGNMENT (PLUGIN-COMPATIBLE)
  - BRACKET LINE ALIGNMENT FIXES
  - DASHBOARD TABLE: COMPACT OVERRIDES
  - DASHBOARD TABLE: ROUNDED CORNERS
  - ACCOUNT FORM: TOGGLE-EDIT BUTTON
  - TAG HIDE
  - ADD PLAYER PAGE — QUEUE & SEARCH
  - HEADER ROLE UI (compact)
  - TOGGLE SWITCH — SMALL
  - FORM FIELDSET + LEGEND SPACING OVERRIDE
  - FIELDSET / LEGEND — FINAL OVERRIDE (keep at end)
  - TOGGLE SWITCH (default size)
  - SELECT2 — DARK THEME FINAL OVERRIDES (keep at very end)
  - MODAL (success/error) used after create
  - FORMS COMPACT TUNE-UPS (optional)
  - EDIT WRAPPER CHROME KILL (add to /css/style.css)
  =================================
*/

/* ==== BLOCK: BASE LAYOUT + GLOBAL RESET ==== */
body {
  font-family: "Segoe UI", Tahoma, sans-serif;
  background-color: #0B1D33;
  color: white;
  margin: 0;
  padding: 0;
}
/* ==== END BLOCK: BASE LAYOUT + GLOBAL RESET ==== */

/* ==== BLOCK: GLOBAL PAGE LAYOUT ==== */
.container {
  width: 85%;
  max-width: 1200px;
  margin: 0 auto; /* This centers the container */
  padding: 20px;
  background: #14243F;
  min-height: auto;           /* was 100vh — stops unnecessary scrollbars */
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  overflow-x: auto;
}
/* ==== END BLOCK: GLOBAL PAGE LAYOUT ==== */

/* ==== BLOCK: HEADER + NAV ==== */
header h1 {
  margin-top: 0;
}

nav a {
  margin-right: 10px;
  text-decoration: none;
  color: #10B981;
  font-weight: bold;
}

nav a:hover {
  text-decoration: underline;
}
/* ==== END BLOCK: HEADER + NAV ==== */

/* ==== BLOCK: FORM ELEMENTS ==== */
form {
  margin-top: 2px;
}

input,
select,
textarea,
button {
  width: 100%;
  padding: 4px;
  margin-top: 2px;
  margin-bottom: 4px;
  border: 1px solid #334155;
  border-radius: 6px;
  font-size: 1rem;
  box-sizing: border-box;
  background-color: #1e293b;
  color: white;
}

input::placeholder {
  color: #cbd5e1;
}
/* ==== END BLOCK: FORM ELEMENTS ==== */

/* ==== BLOCK: DEFAULT BUTTON STYLE (Neutralized) ==== */
button {
  background-color: #334155;
  color: white;
  font-weight: bold;
  border: 1px solid #475569;
  border-radius: 6px;
  cursor: pointer;
  padding: 10px 16px;
}

button:hover {
  background-color: #475569;
}
/* ==== END BLOCK: DEFAULT BUTTON STYLE (Neutralized) ==== */

/* ==== BLOCK: BUTTON STYLES (Unified Compact Buttons) ==== */
.btn-purple {
  background-color: #3c1361;
  border: 1px solid #5e2a84;
  color: #ffffff;
}

.btn-green {
  background-color: #10B981;
  border: 1px solid #0d9467;
  color: #ffffff;
  font-weight: 600;
}

.btn-yellow {
  background-color: #fbbf24;
  border: 1px solid #a07800;
  color: #000000;
}

.btn-red {
  background-color: #ef4444;
  border: 1px solid #b91c1c;
  color: #ffffff;
}

.btn-blue {
  background-color: #2563eb;
  border: 1px solid #1e40af;
  color: #ffffff;
}

.btn-gray {
  background-color: #475569;
  border: 1px solid #334155;
  color: #ffffff;
}

/* Shared compact sizing + alignment */
.btn-purple,
.btn-green,
.btn-yellow,
.btn-red,
.btn-blue,
.btn-gray {
  font-size: 0.85rem;
  padding: 2px 6px;       /* compact vertical size */
  line-height: 1.2;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  min-height: 0;           /* kill default min-heights */
}

/* Hover states (all buttons) */
.btn-purple:hover { background-color: #5e2a84; border-color: #7c3aed; }
.btn-green:hover  { background-color: #059669; border-color: #047857; }
.btn-yellow:hover { background-color: #facc15; border-color: #ca8a04; }
.btn-red:hover    { background-color: #dc2626; border-color: #991b1b; }
.btn-blue:hover   { background-color: #1d4ed8; border-color: #1e3a8a; }
.btn-gray:hover   { background-color: #64748b; border-color: #475569; }
/* ==== END BLOCK: BUTTON STYLES (Unified Compact Buttons) ==== */

/* ==== BLOCK: TABLE STYLING ==== */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  background-color: #1f2a38;
}

.dashboard-table td,
.dashboard-table th {
  padding-top: 1px;
  padding-bottom: 1px;
  line-height: 1.1;
}
.dashboard-table tbody tr {
  height: auto;
}
.dashboard-table button {
  padding: 4px 6px;
  line-height: 1.1;
  font-size: 0.85rem;
}
.dashboard-table button {
  padding: 4px 10px;
  font-size: 0.85rem;
  line-height: 1.1;
  height: auto;
  min-height: 0;
}

table, th, td {
  border: 1px solid #475569;
}

td.location-cell {
  word-wrap: break-word;
  white-space: normal;
  max-width: 250px;
}
th, td {
  padding: 10px;
  text-align: left;
  color: white;
}
/* ==== END BLOCK: TABLE STYLING ==== */

/* ==== BLOCK: FOOTER ==== */
footer {
  font-size: 0.9rem;
  color: #94a3b8;
}
/* ==== END BLOCK: FOOTER ==== */

/* ==== BLOCK: MATCH BOX (legacy non-bracket use) ==== */
.match-box {
  background: #1e293b;
  border: 1px solid #475569;
  padding: 10px;
  margin-bottom: 16px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.match-box.completed {
  background: #083f30;
  border-color: #4caf50;
}
/* ==== END BLOCK: MATCH BOX (legacy non-bracket use) ==== */

/* ==== BLOCK: BRACKET CONTAINER AND LAYOUT ==== */
#bracket {
  overflow-x: auto !important;
  max-width: 100% !important;
  padding-bottom: 20px;
  background: #0b1d33;
  border-radius: 8px;
  border: 1px solid #21476a;
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-start;
}
/* ==== END BLOCK: BRACKET CONTAINER AND LAYOUT ==== */

/* ==== BLOCK: BRACKET WRAPPER ==== */
#bracket .bracket {
  display: flex;
  align-items: flex-start;
  padding: 20px;
  position: relative;
  min-height: auto;   /* let height grow */
  height: auto;
  overflow-y: visible !important;  /* kill vertical scroll inside */
  overflow-x: auto;                /* allow horizontal scroll */
}


#bracket .bracket .round .match .team {
  margin: 0 !important;
  text-align: left;
  align-self: flex-start !important;
  padding: 2px 4px;
  font-size: 0.54rem;
  line-height: 1.1;
  white-space: normal !important;
  word-break: break-word !important;
  background-color: transparent !important;
  color: black !important;
}

#bracket .bracket .round .match.next {
  background-color: #d6f5d6 !important;
  color: #1a3c1a !important;
  border-color: #8bd58b !important;
  font-weight: bold;
}

#bracket .bracket .round .match.active {
  background-color: #a9d0f5 !important;
  color: #0b2f66 !important;
  border-color: #3f7ecb !important;
  font-weight: bold;
}

#bracket .bracket .round .match.complete,
#bracket .bracket .round .match.upcoming {
  background-color: #4a4a4a !important;
  color: #c8c8c8 !important;
  border-color: #666666 !important;
  font-weight: normal;
}
/* ==== END BLOCK: BRACKET WRAPPER ==== */

/* ==== BLOCK: BRACKET LINE ALIGNMENT (PLUGIN-COMPATIBLE) ==== */
#bracket .bracket .round .match {
  min-height: 48px !important;         /* Plugin expects this */
  min-width: 120px !important;
  margin: 6px 0 !important;
  padding: 0 !important;
  font-size: 0.75rem !important;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #1e2a38;
  border-radius: 8px;
  border: 1px solid #2a3c58;
  color: white;
  gap: 2px !important;
}

#bracket .bracket .round {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  align-items: flex-start;
}
/* ==== END BLOCK: BRACKET LINE ALIGNMENT (PLUGIN-COMPATIBLE) ==== */

/* ==== BLOCK: BRACKET LINE ALIGNMENT FIXES ==== */
.bracket .match {
  box-sizing: border-box !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  height: auto !important;
}

.bracket .team {
  margin: 2px 0 !important;
  height: 1.2em !important; /* match vertical rhythm */
}
/* ==== END BLOCK: BRACKET LINE ALIGNMENT FIXES ==== */

/* ==== BLOCK: DASHBOARD TABLE: COMPACT OVERRIDES ==== */
#tournaments-table th,
#tournaments-table td {
  padding: 4px 8px !important;   /* beat the global 10px */
  line-height: 1.2;
  border: 1px solid #475569;     /* keep cell grid lines */
}

#tournaments-table thead th {
  height: 32px;
}

/* keep Start + Location on one line, ellipsize */
#tournaments-table .start-cell,
#tournaments-table .location-cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* tighten Actions cell + buttons */
#tournaments-table td.actions {
  padding: 4px 8px !important;
}
#tournaments-table td.actions .btn-row {
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
#tournaments-table td.actions form {
  margin: 0 !important; /* kill any form margin */
}
#tournaments-table td.actions button {
  padding: 4px 8px !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
  min-height: 0 !important;
  margin: 0 !important; /* override global button margins */
}
/* ==== END BLOCK: DASHBOARD TABLE: COMPACT OVERRIDES ==== */

/* ==== BLOCK: DASHBOARD TABLE: ROUNDED CORNERS ==== */
.table-shell {
  border: 1px solid #475569;
  border-radius: 8px;
  overflow: hidden;       /* clip corners */
  background: #1f2a38;    /* matches table bg */
  margin: 0;
  padding: 0;
}

#tournaments-table {
  border-collapse: collapse; /* remove spacing between cells */
  border: none;              /* outer border handled by .table-shell */
  margin: 0;
}
/* ==== END BLOCK: DASHBOARD TABLE: ROUNDED CORNERS ==== */

/* ==== BLOCK: ACCOUNT FORM: TOGGLE-EDIT BUTTON ==== */
/* button on the account form for edit*/
.toggle-edit {
  background: #2563eb; /* blue */
  border: none;
  color: #fff;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  flex: 0 0 auto;       /* ✅ don't stretch */
  width: auto;          /* ✅ only as wide as needed */
}
/* ==== END BLOCK: ACCOUNT FORM: TOGGLE-EDIT BUTTON ==== */

/* ==== BLOCK: TAG HIDE ==== */
/* remove the pill look */
.tag { display:none; }
/* ==== END BLOCK: TAG HIDE ==== */

/* ==== BLOCK: ADD PLAYER PAGE — QUEUE & SEARCH ==== */
/* new, simple queue row */ /* Queue list */
#queueTags .queue-item{display:flex;align-items:center;gap:10px;margin:8px 0;}
#queueTags .queue-remove{background:#ef4444!important;color:#fff!important;border:0;padding:6px 10px;border-radius:6px;cursor:pointer;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center}
#queueTags .queue-name{flex:1 1 auto;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* --- Add Player page: search results --- */
#searchResults{overflow-y:auto;overflow-x:hidden}
#searchResults li{display:flex;align-items:center;gap:10px}
#searchResults .sr-left{
  flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;
}
#searchResults .add-btn{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  padding:6px 12px;font-size:13px;width:auto !important;min-width:unset;background:#0ea5e9;
}

/* --- Add Player page: queue row --- */
#queueTags .queue-item{display:flex;align-items:center;gap:10px;margin:8px 0}
#queueTags .queue-remove{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  padding:6px 10px;border-radius:6px;border:0;background:#ef4444;color:#fff;
  width:auto !important;min-width:unset;
}
#queueTags .queue-name{
  flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;
}
/* ==== END BLOCK: ADD PLAYER PAGE — QUEUE & SEARCH ==== */

/* ==== BLOCK: HEADER ROLE UI (compact) ==== */
.header-role { display:flex; align-items:center; gap:8px; }
.role-chip {
  font-size: 12px; line-height: 1;
  padding: 2px 6px; border-radius: 9999px;
  border: 1px solid #475569; background:#0f172a; color:#cbd5e1;
}
.role-link { font-size: 12px; color:#10B981; font-weight:600; text-decoration:none; }
.role-link:hover { text-decoration:underline; }
/* ==== END BLOCK: HEADER ROLE UI (compact) ==== */

/* ==== BLOCK: TOGGLE SWITCH — SMALL ==== */
/* smaller toggle */
.switch.switch-sm { width:38px; height:18px; }
.switch.switch-sm .slider:before { height:14px; width:14px; left:2px; bottom:2px; }
.switch.switch-sm input:checked + .slider:before { transform: translateX(20px); }
/* ==== END BLOCK: TOGGLE SWITCH — SMALL ==== */

/* ==== BLOCK: FORM FIELDSET + LEGEND SPACING OVERRIDE ==== */
fieldset {
  margin-bottom: 10px;   /* reduce space below each fieldset */
  padding: 10px 12px;    /* tighten inner padding */
}

legend {
  margin-bottom: 6px;    /* reduce gap below legend text */
  padding: 0 4px;        /* small horizontal padding */
  font-size: 1rem;       /* keep it readable */
}
/* ==== END BLOCK: FORM FIELDSET + LEGEND SPACING OVERRIDE ==== */

/* ==== BLOCK: FIELDSET / LEGEND — FINAL OVERRIDE (keep at end) ==== */
fieldset{
  border: 1px solid #3b82f6 !important;   /* thin blue */
  border-radius: 8px !important;           /* rounded corners */
  background: transparent;
  padding: 16px;                            /* inner spacing */
  margin-bottom: 18px;                      /* section spacing */
  border-style: solid !important;           /* stomp browser groove */
}

legend{
  color: #3b82f6 !important;
  font-weight: 700;
  padding: 0 10px;
  margin-bottom: 6px;
  font-size: 1rem;
}
/* ==== END BLOCK: FIELDSET / LEGEND — FINAL OVERRIDE (keep at end) ==== */

/* ==== BLOCK: TOGGLE SWITCH (default size) ==== */
/* =========================================================
   TOGGLE SWITCH (default size)   (.switch, .slider)
   Note: you already have .switch.switch-sm overrides.
   These are the base styles used across the Create pages.
   ========================================================= */
.switch { position: relative; display: inline-block; width: 50px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }

.slider {
  position: absolute; cursor: pointer;
  inset: 0;
  background-color: #334155;       /* slate */
  transition: .2s;
  border-radius: 34px;
  border: 1px solid #475569;
}
.slider:before {
  position: absolute; content: "";
  height: 18px; width: 18px; left: 3px; bottom: 3px;
  background-color: #ffffff; border-radius: 50%;
  transition: .2s;
}
.switch input:checked + .slider { background-color: #10B981; } /* green */
.switch input:checked + .slider:before { transform: translateX(26px); }

/* help text */
.help { color:#9aa6b2; font-size:12px; }
/* ==== END BLOCK: TOGGLE SWITCH (default size) ==== */

/* ==== BLOCK: SELECT2 — DARK THEME FINAL OVERRIDES (keep at very end) ==== */
.select2-container { 
  width: 100% !important; 
  display: block; 
  margin-top: 0px;          /* was 8px */
  margin-bottom: 0px;       /* was 16px */
}

.select2-container .select2-selection--single {
  height: 40px !important;
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  border-radius: 6px !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 40px !important;
  color: #ffffff !important;
  padding: 0 8px !important;
}

.select2-container .select2-selection--single .select2-selection__placeholder {
  color: #cbd5e1 !important;
}

.select2-container .select2-selection--single .select2-selection__arrow {
  height: 40px !important;
  right: 6px !important;
}

/* dropdown */
.select2-dropdown {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
}

.select2-results__option { 
  color: #ffffff !important; 
}

.select2-results__option--highlighted {
  background: #0f172a !important; 
  color: #ffffff !important;
}

.select2-search--dropdown .select2-search__field {
  background: #1e293b !important; 
  color: #ffffff !important; 
  border: 1px solid #334155 !important; 
  border-radius: 6px !important;
}
/* ==== END BLOCK: SELECT2 — DARK THEME FINAL OVERRIDES (keep at very end) ==== */

/* ==== BLOCK: MODAL (success/error) used after create ==== */
/* =========================================================
   MODAL (success/error) used after create
   ========================================================= */
#modalBackdrop {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:1000;
}
#modalContainer {
  display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%);
  z-index:1001;
}
#tournamentOutcomeModal {
  background:#102841; color:white; border:2px solid #00bfff;
  padding:20px; border-radius:8px; max-width:420px;
}
/* ==== END BLOCK: MODAL (success/error) used after create ==== */

/* ==== BLOCK: FORMS COMPACT TUNE-UPS (optional) ==== */
/* =========================================================
   (Optional) compact spacing tune-ups used on forms
   ========================================================= */
/* Make big multi-column areas feel tighter while keeping readability */
fieldset .select2-container,
fieldset input,
fieldset select,
fieldset textarea {
  margin-bottom: 0px;       /* was 12px */
}

/* Tighten section chrome globally for all forms using fieldsets */
fieldset{
  padding: 8px !important;       /* was 16px */
  margin-bottom: 4px !important; /* was 18px */
}

legend{
  margin-bottom: 0px !important;  /* was 6px */
}

/* Mildly tighten help text spacing */
.help { 
  margin-top: 2px !important; 
  margin-bottom: 6px !important; 
}
/* ==== END BLOCK: FORMS COMPACT TUNE-UPS (optional) ==== */

/* ==== BLOCK: EDIT WRAPPER CHROME KILL (add to /css/style.css) ==== */
.no-chrome { border:0 !important; padding:0 !important; margin:0 !important; }
.no-chrome > legend { display:none !important; }
/* ==== END BLOCK: EDIT WRAPPER CHROME KILL (add to /css/style.css) ==== */

/* ==== BLOCK: TABLE DOT (global) ==== */
/* Tiny blue dot that shows the assigned table; reveals label on hover */
.table-dot{
  position:absolute;
  top:6px;
  left:6px;
  width:10px;
  height:10px;
  border-radius:999px;
  background:#3b82f6;           /* blue-500 */
  border:1px solid #1e40af;     /* blue-800 */
  box-shadow:0 0 0 2px rgba(30,64,175,.25);
  z-index:2;                    /* ensure above .match content */
}
.table-dot::after{
  content: attr(data-table);
  position:absolute;
  top:-4px;
  left:14px;
  font-size:11px;
  padding:2px 6px;
  border-radius:6px;
  background:#0f1e35;
  border:1px solid #1b3a57;
  color:#e6f0ff;
  opacity:0;
  pointer-events:none;
  transform: translateY(-2px);
  transition: opacity .12s ease, transform .12s ease;
  white-space:nowrap;
}
.table-dot:hover::after{ opacity:1; transform: translateY(0); }
/* ==== END BLOCK: TABLE DOT (global) ==== */

/* ==== BLOCK: INTERACTION SAFETY (Z-INDEX & POINTER-EVENTS) ==== */
.round { z-index: 1; }
.match-wrapper { pointer-events: none; }   /* wrapper never steals clicks */
.match { pointer-events: auto; z-index: 5; } /* boxes always clickable when allowed */
/* ==== END BLOCK: INTERACTION SAFETY (Z-INDEX & POINTER-EVENTS) ==== */

/* ==== BLOCK: DEBUG MATCH STATE STYLES (TEMP) ==== */
.match.debug-open       { border-color:#22c55e !important; box-shadow:0 0 0 1px rgba(34,197,94,.35) inset; }
.match.debug-winner     { border-color:#60a5fa !important; box-shadow:0 0 0 1px rgba(96,165,250,.35) inset; }
.match.debug-completed  { border-color:#f59e0b !important; box-shadow:0 0 0 1px rgba(245,158,11,.35) inset; }
.state-badge {
  position:absolute; top:4px; right:4px; font-size:10px; line-height:1;
  padding:2px 6px; border-radius:999px; border:1px solid rgba(255,255,255,.2); background:#0b1d33; opacity:.9;
}
/* ==== END BLOCK: DEBUG MATCH STATE STYLES (TEMP) ==== */

/* Header Save should look like the Edit button (no full-width) */
#editToggle { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  width: auto; 
  margin-left: auto;        /* stay at right end */
}

/* Some global styles force submit buttons to 100% width—override here */
#editToggle[type="submit"] {
  display: inline-flex !important;
  width: auto !important;
}