/* =========================================
   1. VARIABLES & RESET
   ========================================= */
:root {
  /* Brand Colors */
  --accent: var(--club-primary);

  /* Darker Purple for hover */
  --pitch-dark: #2e7d32;
  --pitch-light: #388e3c;

  /* UI Colors */
  --dark-bg: #181818;
  --light-bg: #000000;
  --text-dark: #212529;
  --text-muted: #6c757d;

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* Global Font Reset */
html,
body {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  background-color: #f4f6f9;
  color: var(--text-dark);
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar,
.table th {
  font-weight: 700;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--accent);
  text-decoration: none;
}

/* =========================================
   2. GLOBAL BUTTONS & FORMS
   ========================================= */

.btn {
  border-radius: 0.5rem;
  font-weight: 600;
  transition: all 0.2s ease-in-out;
}

/* Botão Principal do Sistema */
.btn-primary {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: white !important;
}

.btn-primary:hover {
  filter: brightness(0.85);
}

.btn:focus,
.form-control:focus,
.form-select:focus {
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--accent) 25%, transparent) !important;
  border-color: var(--accent) !important;
}

/* Botão Escuro (Secundário) */
.btn-dark {
  background-color: var(--dark-bg);
  border-color: var(--dark-bg);
  color: #fff;
}

.btn-dark:hover {
  filter: brightness(0.85);
}

/* =========================================
   3. SEARCH BAR (Navbar)
   ========================================= */
.search-bar-custom {
  width: 280px;
  border: 1px solid #e0e0e0;
  border-radius: 50px;
  background-color: #fff;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

.search-bar-custom:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  border-color: #d0d0d0;
}

.search-bar-custom:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}

.search-bar-custom .input-group-text {
  background: transparent;
  border: none;
  color: #aaa;
  padding-left: 15px;
  padding-right: 0;
}

.search-bar-custom .form-control {
  border: none;
  background: transparent;
  padding-left: 10px;
  color: #333;
  font-size: 0.9rem;
}

.search-bar-custom .form-control:focus {
  box-shadow: none;
}

/* ===================================================================
   APP-WIDE INPUT / SELECT / SUGGESTION POLISH
   --------------------------------------------------------------------
   Goal: every native <select>, <input>, and rich-item suggestion
   panel reads as part of the same design language. Specifically:
     • <select> → no native browser arrow (varies wildly by OS), our
        own SVG chevron, consistent rounded box, focus ring matching
        `--accent`, hover lift.
     • <input type="text/search/email/number/tel/password/url/date">
        → same rounded box, same focus state, same height as selects
        so they line up in toolbars.
     • `.app-suggest-panel` → shared class for the rich-item dropdown
        the comparison-player search uses. Rebrandable for any other
        custom dropdown that wants the same look.
   Bootstrap's `.form-control` / `.form-select` are not bypassed —
   they get the same look on top, so existing markup picks up the
   polish for free without per-page changes.
   =================================================================== */

select,
.form-select,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="password"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
.form-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #ffffff;
  border: 1px solid #e3e7ee;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 0.85rem;
  color: #1a1a2e;
  line-height: 1.4;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
select:hover,
.form-select:hover,
input[type="text"]:hover,
input[type="search"]:hover,
input[type="email"]:hover,
input[type="number"]:hover,
input[type="tel"]:hover,
input[type="password"]:hover,
input[type="url"]:hover,
input[type="date"]:hover,
input[type="datetime-local"]:hover,
.form-control:hover {
  border-color: #cfd6e0;
}
select:focus,
.form-select:focus,
input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
.form-control:focus {
  outline: none;
  border-color: var(--accent, #5232A3);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #5232A3) 18%, transparent);
}
select::placeholder,
input::placeholder,
textarea::placeholder {
  color: #98a2b3;
}

/* Custom chevron for selects — replaces the native browser arrow.
   The chevron colour adapts to the box's text colour by encoding
   the SVG inline. Padding-right ensures the option labels don't
   smear into the chevron. */
select,
.form-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%231a1a2e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
  padding-right: 32px;
  cursor: pointer;
}
/* Hide the IE/Edge legacy native arrow */
select::-ms-expand,
.form-select::-ms-expand { display: none; }

/* Native search field's "X" clear button — keep it but match our look. */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  height: 14px; width: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'><path d='M3 3l8 8M11 3l-8 8' stroke='%23667085' stroke-width='1.6' stroke-linecap='round'/></svg>");
  cursor: pointer;
  opacity: 0.6;
}
input[type="search"]::-webkit-search-cancel-button:hover { opacity: 1; }

/* Compact size variant — Bootstrap's `form-control-sm` / `form-select-sm`
   land on toolbars where vertical space is tight. Tighten padding while
   keeping the same visual language. */
.form-control-sm,
.form-select-sm,
select.form-control-sm,
input.form-control-sm,
select.form-select-sm {
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 0.78rem;
  border-radius: 6px;
}
.form-select-sm,
select.form-select-sm {
  padding-right: 28px;
  background-position: right 9px center;
}

/* ── Rich-item suggestion panel ──
   Drop-in class for any custom dropdown that wants the same look as
   the comparison-player search. Anchor to a positioned parent
   (the input wrapper); the panel itself uses position:absolute so
   it floats above the next layout element. */
.app-suggest-panel {
  position: absolute;
  z-index: 60;
  background: #fff;
  border: 1px solid #e3e7ee;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12),
              0 1px 3px rgba(15, 23, 42, 0.06);
  min-width: 100%;
  max-width: 420px;
  max-height: 320px;
  overflow-y: auto;
  margin-top: 4px;
}
.app-suggest-panel .item {
  padding: 9px 12px;
  font-size: 0.82rem;
  cursor: pointer;
  border-bottom: 1px solid #f1f4f9;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #1a1a2e;
  transition: background 0.12s ease;
}
.app-suggest-panel .item:last-child { border-bottom: none; }
.app-suggest-panel .item:hover,
.app-suggest-panel .item.is-active {
  background: #f6f8fb;
}
.app-suggest-panel .item .name { font-weight: 700; }
.app-suggest-panel .item .meta {
  font-size: 0.68rem;
  color: #6c757d;
  font-weight: 500;
}
.app-suggest-panel .empty,
.app-suggest-panel .loading {
  padding: 14px;
  text-align: center;
  font-size: 0.78rem;
  color: #6c757d;
}
.app-suggest-panel .loading i { margin-right: 4px; opacity: 0.7; }

/* ===================================================================
   SELECT2 — match the native-select / app-suggest-panel look
   --------------------------------------------------------------------
   The Radar comparator and any other page using `select2` widgets
   render their own DOM (a `<span class="select2-selection">` plus
   a separate `<span class="select2-dropdown">` portal at body root).
   Our native `<select>` styles can't reach them — we have to opt
   into Select2's class hooks. These rules push the Select2 closed
   pill, dropdown panel, search input, and option items onto the
   same border / radius / shadow / focus language as the rest of
   the app.
   Scoped to `.select2-container--bootstrap-5` (the theme bundled
   in base.html) so we don't fight any other Select2 themes.
   =================================================================== */

/* Closed selector — the pill the user sees before opening the dropdown. */
.select2-container--bootstrap-5 .select2-selection,
.select2-container--default .select2-selection {
  background-color: #ffffff !important;
  border: 1px solid #e3e7ee !important;
  border-radius: 8px !important;
  min-height: 36px !important;
  padding: 4px 30px 4px 10px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  font-size: 0.85rem !important;
  color: #1a1a2e !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.select2-container--bootstrap-5 .select2-selection:hover,
.select2-container--default .select2-selection:hover {
  border-color: #cfd6e0 !important;
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection,
.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open .select2-selection {
  border-color: var(--accent, #5232A3) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #5232A3) 18%, transparent) !important;
  outline: none !important;
}

/* Single-value selection: vertical centring + colour. */
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #1a1a2e !important;
  line-height: 26px !important;
  padding-left: 0 !important;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder,
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #98a2b3 !important;
}

/* Custom chevron — same SVG the native <select> uses. Hide Select2's
   default arrow caret. */
.select2-container--bootstrap-5 .select2-selection__arrow,
.select2-container--default .select2-selection__arrow {
  height: 100% !important;
  top: 0 !important;
  right: 0 !important;
  width: 32px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%231a1a2e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 12px 8px !important;
}
.select2-container--bootstrap-5 .select2-selection__arrow b,
.select2-container--default .select2-selection__arrow b {
  display: none !important;
}

/* Multi-select: tag chips inside the closed selector. */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice,
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: color-mix(in srgb, var(--accent, #5232A3) 12%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--accent, #5232A3) 40%, transparent) !important;
  border-radius: 999px !important;
  color: var(--accent, #5232A3) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  margin: 2px 4px 2px 0 !important;
  padding: 2px 8px 2px 8px !important;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--accent, #5232A3) !important;
  border: none !important;
  margin-right: 4px !important;
  font-weight: 900 !important;
}

/* Dropdown panel — the floating list that opens below. Mirrors
   `.app-suggest-panel`. Select2 renders this at <body> root, so
   we don't anchor it; we just style the box. */
.select2-container--bootstrap-5 .select2-dropdown,
.select2-container--default .select2-dropdown {
  border: 1px solid #e3e7ee !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12),
              0 1px 3px rgba(15, 23, 42, 0.06) !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

/* Search input inside the dropdown. */
.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field,
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid #e3e7ee !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  font-size: 0.82rem !important;
  outline: none !important;
}
.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field:focus,
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--accent, #5232A3) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #5232A3) 18%, transparent) !important;
}

/* Dropdown options. */
.select2-container--bootstrap-5 .select2-results__option,
.select2-container--default .select2-results__option {
  padding: 9px 12px !important;
  font-size: 0.82rem !important;
  color: #1a1a2e !important;
  border-bottom: 1px solid #f1f4f9 !important;
  transition: background 0.12s ease;
}
.select2-container--bootstrap-5 .select2-results__option:last-child,
.select2-container--default .select2-results__option:last-child {
  border-bottom: none !important;
}
.select2-container--bootstrap-5 .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted,
.select2-container--bootstrap-5 .select2-results__option:hover,
.select2-container--default .select2-results__option:hover {
  background: #f6f8fb !important;
  color: #1a1a2e !important;
}
.select2-container--bootstrap-5 .select2-results__option--selected,
.select2-container--default .select2-results__option--selected,
.select2-container--bootstrap-5 .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[aria-selected="true"] {
  background: color-mix(in srgb, var(--accent, #5232A3) 12%, transparent) !important;
  color: var(--accent, #5232A3) !important;
  font-weight: 700 !important;
}
.select2-container--bootstrap-5 .select2-results__option--disabled,
.select2-container--default .select2-results__option--disabled {
  color: #98a2b3 !important;
  background: transparent !important;
}

/* =========================================
   4. NAVBAR CUSTOMIZATION
   ========================================= */
.navbar-custom {
  background-color: var(--dark-bg);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar-custom .navbar-brand,
.navbar-custom .nav-link {
  color: #fff;
  font-weight: 600;
  font-size: 0.8rem;
  padding-left: 0.6rem;
  padding-right: 0.6rem;
  white-space: nowrap;
}

.navbar-custom .nav-link:hover {
  color: #e0e0e0;
}

.navbar-custom .dropdown-menu {
  font-size: 0.82rem;
}

/* Mobile hamburger — Bootstrap's default `.navbar-toggler-icon` is a
   black SVG that disappears against our dark navbar background, so
   users on phones couldn't see where to tap to open the menu.
   Override to a white-stroke SVG (Bootstrap's exact path, recoloured)
   and give the toggler a visible border + lighter focus ring so it
   reads as a tappable target on the dark surface. */
.navbar-custom .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.4);
  padding: 0.3rem 0.55rem;
}
.navbar-custom .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-custom .navbar-toggler:focus,
.navbar-custom .navbar-toggler:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
  outline: none;
}

/* Outline button styled with the active club's primary colour.
   `--club-primary` is set on `:root` in base.html from the club_config
   `primary_color` value. Bootstrap's `.btn-outline-primary` ignores
   that variable — every tenant gets the Bootstrap blue — so we expose
   a parallel class that tracks the club. Used by the home-page
   Coaching/Scouting toggles and anywhere else a per-tenant outline
   button is needed.

   Hover/focus/active swap to a filled state (white text on the club
   colour) without needing a second class. */
.btn-club-outline {
  color: var(--club-primary);
  border-color: var(--club-primary);
  background-color: transparent;
}
.btn-club-outline:hover,
.btn-club-outline:focus,
.btn-club-outline:active,
.btn-club-outline.active {
  color: #fff;
  background-color: var(--club-primary);
  border-color: var(--club-primary);
}
.btn-club-outline:focus,
.btn-club-outline:focus-visible {
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--club-primary) 30%, transparent);
  outline: none;
}

.navbar-logo img {
  height: 36px;
  max-width: 100px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* User avatar circle in navbar */
.navbar-right .bg-opacity-10 {
  background-color: rgba(255, 255, 255, 0.12) !important;
}

/* =========================================
   5. CARDS & UTILITIES
   ========================================= */
.card {
  border: none;
  border-radius: 0.75rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s;
}

.cursor-pointer {
  cursor: pointer;
}

.scrollable-menu::-webkit-scrollbar,
.scrollable-modal-body::-webkit-scrollbar {
  width: 6px;
}

.scrollable-menu::-webkit-scrollbar-track,
.scrollable-modal-body::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.scrollable-menu::-webkit-scrollbar-thumb,
.scrollable-modal-body::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

.scrollable-menu::-webkit-scrollbar-thumb:hover,
.scrollable-modal-body::-webkit-scrollbar-thumb:hover {
  background: #999;
}

/* Range Inputs */
.range-container {
  background-color: #fff;
  padding: 2px 4px;
  border-radius: 2px;
  border: 1px solid #dee2e6;
}

.range-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #6c757d;
  letter-spacing: 0.5px;
  padding-left: 4px;
}

.range-input {
  max-width: 55px !important;
  text-align: center;
  border: none !important;
  background-color: transparent !important;
  padding: 0.25rem 0.1rem !important;
  font-weight: 600;
  color: #212529;
}

.range-input:focus {
  box-shadow: none !important;
  background-color: #f8f9fa !important;
}

.range-input::-webkit-outer-spin-button,
.range-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* =========================================
   6. ANALYTICS TABLE & DATATABLES
   ========================================= */

.page-item.active .page-link {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: white !important;
}

.page-link {
  color: var(--accent) !important;
}

.page-link:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

/* Select2 Dropdowns */
.select2-container--default .select2-selection--multiple {
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  padding: 1px 5px;
  display: flex;
  align-items: center;
  min-height: 38px;
}

.select2-selection__choice {
  background-color: var(--accent) !important;
  color: white !important;
  border: none !important;
  font-size: 0.75rem !important;
  font-weight: 500;
}

.select2-results__option--highlighted[aria-selected] {
  background-color: var(--accent) !important;
  color: white !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 0;
  padding-bottom: 0;
}

.select2-container .select2-search--inline .select2-search__field {
  margin-top: 0 !important;
  line-height: normal !important;
  vertical-align: middle !important;
}

/* Botões da Tabela */
.btn-ver-custom {
  background-color: var(--accent) !important;
  color: white !important;
  border: none !important;
  font-weight: bold;
  transition: filter 0.2s;
}

.btn-ver-custom:hover {
  filter: brightness(0.85);
  color: white !important;
}

.btn-criar-custom {
  background-color: white !important;
  color: #181818 !important;
  border: 1px solid #181818 !important;
  font-weight: bold;
  transition: all 0.2s;
}

.btn-criar-custom:hover {
  background-color: #181818 !important;
  color: #ffffff !important;
}

.btn-xs {
  padding: 2px 12px;
  font-size: 0.7rem;
  border-radius: 4px;
  text-transform: uppercase;
}

.dataTables_processing {
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--accent) !important;
  border: 2px solid var(--accent) !important;
  border-radius: 8px;
  font-weight: bold;
}

/* =========================================
   7. PLAYER PROFILE STYLES
   ========================================= */

.player-photo-container {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #fff;
  background-color: #f8f9fa;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.player-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.metric-card {
  background-color: #f8f9fc;
  border: 1px solid #edf2f9;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05);
  border-color: var(--accent);
}

.metric-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--accent) !important;
  background-color: color-mix(in srgb, var(--accent) 15%, transparent) !important;
  flex-shrink: 0;
}

.metric-card .label {
  font-size: 0.65rem;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
  display: block;
}

/* CORES DINÂMICAS DOS KPIs (Percentil) */
.kpi-mini-card {
  transition: transform 0.2s ease, border-color 0.2s ease;
  border-left: 4px solid #dee2e6 !important;
}

.kpi-mini-card:hover {
  transform: translateY(-2px);
}

/* Elite Card (>90): Fundo com Alfa + Borda Sólida do Clube */
.kpi-elite {
  background-color: color-mix(in srgb, var(--accent) 10%, transparent) !important;
  border-left-color: var(--accent) !important;
}

.kpi-great {
  background-color: rgba(25, 135, 84, 0.08) !important;
  border-left-color: #198754 !important;
}

.kpi-good {
  background-color: rgba(255, 193, 7, 0.15) !important;
  border-left-color: #ffc107 !important;
}

.kpi-average {
  background-color: rgba(253, 126, 20, 0.08) !important;
  border-left-color: #fd7e14 !important;
}

.kpi-poor {
  background-color: rgba(220, 53, 69, 0.08) !important;
  border-left-color: #dc3545 !important;
}

/* =========================================
   8. PITCH VISUALIZATION
   ========================================= */
.pitch {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 2 / 3;
  background-color: var(--pitch-dark);
  border: 2px solid #fff;
  position: relative;
  border-radius: 4px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.pitch-lines {
  position: absolute;
  top: 4%;
  bottom: 4%;
  left: 4%;
  right: 4%;
  border: 2px solid rgba(255, 255, 255, 0.7);
}

.half-way-line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.7);
}

.center-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.center-spot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.penalty-box {
  position: absolute;
  width: 50%;
  height: 16%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  left: 25%;
}

.penalty-box.top {
  top: 0;
  border-top: none;
}

.penalty-box.bottom {
  bottom: 0;
  border-bottom: none;
}

.six-yard-box {
  position: absolute;
  width: 40%;
  height: 35%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  left: 30%;
}

.penalty-box.top .six-yard-box {
  top: 0;
  border-top: none;
}

.penalty-box.bottom .six-yard-box {
  bottom: 0;
  border-bottom: none;
}

/* PONTO DO JOGADOR */
.player-dot {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}

/* Posição Ativa do Jogador */
.active-dot {
  width: 18px;
  height: 18px;
  background-color: var(--accent);
  border: 2px solid #fff;
  z-index: 20;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* Animação do Radar com Color-Mix para Opacidade Perfeita */
.pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 35px;
  height: 35px;
  background-color: color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 50%;
  animation: pulse 2s infinite ease-out;
  pointer-events: none;
}

.inactive-dot {
  width: 10px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.4);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  z-index: 10;
  cursor: help;
}

.inactive-dot:hover {
  background-color: rgba(255, 255, 255, 0.9);
  transform: translate(-50%, -50%) scale(1.3);
}

@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

/* =========================================
   9. SHADOW TEAM (redesigned 2026 v2)
   ========================================= */
.position-slot {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 168px;
  z-index: 10;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.18));
}

.position-slot:hover { z-index: 2000; }

/* Pill above each position — click opens the full roster drawer */
.position-pill {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(10, 30, 50, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  cursor: pointer;
  margin-bottom: 6px;
  transition: background .12s ease, transform .12s ease;
  white-space: nowrap;
}
.position-pill:hover {
  background: var(--accent, #006638);
  transform: translateY(-1px);
}
.position-pill-count {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-weight: 800;
  font-size: 0.58rem;
  padding: 0 6px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
  line-height: 1.6;
}

.player-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  width: 100%;
}

/* Compact chip — Auto-Shadow style (face + crest + flag), fits 5 per slot.
   Category colour still fills the background (see .card-* rules below). */
.player-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 30px;
  padding: 3px 8px 3px 4px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-left: 3px solid #cbd5e0;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  overflow: hidden;
}
.player-chip:hover {
  transform: translateX(2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
  border-color: var(--accent, #006638);
  z-index: 2000;
}

.player-chip-rank {
  flex: 0 0 14px;
  font-size: 0.52rem;
  font-weight: 800;
  color: #fff;
  text-align: center;
  background: rgba(10, 30, 50, 0.55);
  border-radius: 3px;
  padding: 1px 0;
  line-height: 1.4;
}

/* Face circle with club-crest + country-flag overlays (mirrors .ast-mini) */
.player-chip-face { position: relative; flex: 0 0 24px; width: 24px; height: 24px; }
.player-chip-photo, .player-chip-initials {
  width: 24px; height: 24px; border-radius: 50%; object-fit: cover;
  background: #2a3b4d; border: 1.5px solid #fff; display: block;
}
.player-chip-initials {
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 10px;
}
.player-chip-club {
  position: absolute; bottom: -3px; right: -4px;
  width: 13px; height: 13px; border-radius: 50%;
  background: #fff; object-fit: contain; box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}
.player-chip-flag {
  position: absolute; top: -3px; left: -4px;
  width: 12px; height: 9px; border-radius: 1px;
  object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}

.player-chip-body {
  min-width: 0; flex: 1 1 auto;
  display: flex; flex-direction: column; justify-content: center;
  gap: 1px; overflow: hidden;
}
.player-chip-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.1;
}
.player-chip-sub {
  font-size: 0.56rem;
  color: #5a6672;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.1;
}
.player-chip-meta {
  font-size: 0.58rem;
  color: #555;
  display: flex;
  gap: 4px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.player-chip-meta .player-chip-value { font-weight: 700; color: #1a1a1a; }

.player-chip-tags {
  display: flex;
  flex-direction: row;
  gap: 2px;
  flex: 0 0 auto;
}

/* Latest-report scout grade — prominent right-side badge */
.player-chip-grade {
  flex: 0 0 auto;
  font-size: 0.6rem;
  font-weight: 800;
  color: #1a1a1a;
  background: #ffc107;
  border-radius: 6px;
  padding: 1px 6px;
  line-height: 1.3;
}
.player-chip-tag {
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 1px 4px;
  border-radius: 3px;
  line-height: 1.2;
  background: #f0f0f0;
  color: #444;
}
.player-chip-tag.tag-loan      { background: #f9a825; color: #fff; }
.player-chip-tag.tag-loan-buy  { background: #1565c0; color: #fff; }
.player-chip-tag.tag-grade     { background: #ffc107; color: #1a1a1a; }

/* Category colour fills the WHOLE chip background (tinted/transparent),
   with a stronger left edge of the same colour for definition. */
.player-chip.card-expensive {
  background: color-mix(in srgb, #d32f2f 16%, #fff);
  border-left: 4px solid #d32f2f;
}
.player-chip.card-expensive-u22 {
  background: color-mix(in srgb, #7b1fa2 16%, #fff);
  border-left: 4px solid #7b1fa2;
}
.player-chip.card-low-cost {
  background: color-mix(in srgb, #15803d 16%, #fff);
  border-left: 4px solid #15803d;
}
.player-chip.card-loan {
  background: color-mix(in srgb, #f9a825 18%, #fff);
  border-left: 4px solid #f9a825;
}
.player-chip.card-loan-buy {
  background: color-mix(in srgb, #1565c0 16%, #fff);
  border-left: 4px solid #1565c0;
}

/* MLS roster-designation colours (value × U22) — shared by shadow + master. */
.player-chip.card-red    { background: color-mix(in srgb, #d32f2f 16%, #fff); border-left: 4px solid #d32f2f; }
.player-chip.card-purple { background: color-mix(in srgb, #7b1fa2 16%, #fff); border-left: 4px solid #7b1fa2; }
.player-chip.card-yellow { background: color-mix(in srgb, #e0a800 22%, #fff); border-left: 4px solid #e0a800; }
.player-chip.card-green  { background: color-mix(in srgb, #15803d 16%, #fff); border-left: 4px solid #15803d; }
.player-chip.card-white  { background: #ffffff; border-left: 4px solid #cbd5e1; }

/* "Carência do plantel" (Ceará): the row takes the club primary colour
   as a transparent fill; the category colour stays as the left-edge
   detail (expensive / U22 / low-cost / loan …). Declared AFTER the
   card-* rules so it wins the background while keeping their border. */
.player-chip.pc-carencia {
  background: color-mix(in srgb, var(--club-primary, #0a2240) 22%, #fff);
  border-left-width: 4px;
}
.player-chip-tag.tag-carencia { background: var(--club-primary, #0a2240); color: #fff; }

/* Player has moved clubs (transfer tracker) — gray/black "he's gone" card.
   Overrides any value-based background so the transfer read is unmistakable. */
.player-chip.pc-transferred {
  background: #3f3f46 !important;      /* zinc gray/black */
  border-color: rgba(0, 0, 0, 0.35);
  border-left: 4px solid #18181b;
}
.player-chip.pc-transferred:hover { border-color: #71717a; }
.player-chip.pc-transferred .player-chip-name { color: #fafafa; }
.player-chip.pc-transferred .player-chip-sub  { color: #d4d4d8; }
.player-chip.pc-transferred .player-chip-rank { color: #e4e4e7; }
.player-chip.pc-transferred .player-chip-face { filter: grayscale(1); opacity: .85; }

/* Backwards compat — old code paths still address these classes. */
.card-expensive,.card-expensive-u22,.card-low-cost,.card-loan,.card-loan-buy {}

/* "+N more" link — shown when picks > _max_visible */
.player-more {
  font-size: 0.58rem;
  font-weight: 700;
  color: #fff;
  background: rgba(10, 30, 50, 0.55);
  border: 1px dashed rgba(255, 255, 255, 0.45);
  border-radius: 6px;
  padding: 3px 6px;
  text-align: center;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
  letter-spacing: .03em;
}
.player-more:hover { background: var(--accent, #006638); border-color: #fff; }

/* In-slot player pager (3 per page) — keeps tall slots inside the pitch. */
.stack-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 1px;
}
.stack-pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background: rgba(10, 30, 50, 0.62);
  color: #fff;
  font-size: 0.62rem;
  cursor: pointer;
  padding: 0;
  transition: background .12s ease, opacity .12s ease;
}
.stack-pager-btn:hover:not(:disabled) { background: var(--accent, #006638); }
.stack-pager-btn:disabled { opacity: 0.3; cursor: default; }
.stack-pager-label {
  font-size: 0.6rem;
  font-weight: 800;
  color: #fff;
  background: rgba(10, 30, 50, 0.62);
  border-radius: 999px;
  padding: 1px 8px;
  letter-spacing: .02em;
  min-width: 34px;
  text-align: center;
}

/* "+ add" inline button */
.add-chip-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  border: 1px dashed rgba(255, 255, 255, 0.55);
  border-radius: 6px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
  font-size: 0.85rem;
}
.add-chip-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: #fff;
}

/* ── Position roster drawer (slide-in side panel) ─────────────── */
.position-drawer {
  position: fixed; inset: 0; z-index: 4000;
  pointer-events: none;
}
.position-drawer[aria-hidden="false"] { pointer-events: auto; }
.position-drawer-overlay {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity .18s ease;
}
.position-drawer[aria-hidden="false"] .position-drawer-overlay { opacity: 1; }

.position-drawer-panel {
  position: absolute; top: 0; bottom: 0; right: 0;
  width: min(420px, 92vw);
  background: #ffffff;
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.18);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .22s cubic-bezier(.4,.0,.2,1);
}
.position-drawer[aria-hidden="false"] .position-drawer-panel { transform: translateX(0); }

.position-drawer-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 18px 22px 14px; border-bottom: 1px solid #ececec;
}
.position-drawer-eyebrow {
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: #888; font-weight: 700;
}
.position-drawer-title {
  margin: 4px 0 2px; font-size: 18px; font-weight: 800; letter-spacing: -.2px;
}
.position-drawer-subtitle { font-size: 12px; color: #666; }
.position-drawer-close {
  border: none; background: transparent; font-size: 18px; color: #555;
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
}
.position-drawer-close:hover { background: #f0f0f0; }

.position-drawer-body {
  flex: 1 1 auto; overflow-y: auto;
  padding: 14px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.position-drawer-footer {
  padding: 14px 18px; border-top: 1px solid #ececec;
}

/* Drawer card — bigger version of the chip, full info visible */
.drawer-card {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.drawer-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.10);
  border-color: var(--accent, #006638);
}
.drawer-card-rank {
  font-size: 11px; font-weight: 800; color: #888; text-align: center;
  background: #f5f5f5; border-radius: 6px; padding: 6px 0;
}
.drawer-card-body { min-width: 0; }
.drawer-card-name {
  font-size: 14px; font-weight: 700; color: #1a1a1a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.drawer-card-meta {
  margin-top: 2px; font-size: 12px; color: #666;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.drawer-card-meta strong { color: #1a1a1a; font-weight: 700; }
.drawer-card-tags { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.drawer-card-tag {
  font-size: 9px; font-weight: 800; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 4px; background: #f0f0f0; color: #444;
}
.drawer-card-tag.tag-loan      { background: #f9a825; color: #fff; }
.drawer-card-tag.tag-loan-buy  { background: #1565c0; color: #fff; }
.drawer-card-tag.tag-grade     { background: #ffc107; color: #1a1a1a; }

.drawer-card.card-expensive    { border-left: 4px solid #d32f2f; background: color-mix(in srgb, #d32f2f 14%, #fff); }
.drawer-card.card-expensive-u22{ border-left: 4px solid #7b1fa2; background: color-mix(in srgb, #7b1fa2 14%, #fff); }
.drawer-card.card-low-cost     { border-left: 4px solid #15803d; background: color-mix(in srgb, #15803d 14%, #fff); }
.drawer-card.card-loan         { border-left: 4px solid #f9a825; background: color-mix(in srgb, #f9a825 16%, #fff); }
.drawer-card.card-loan-buy     { border-left: 4px solid #1565c0; background: color-mix(in srgb, #1565c0 14%, #fff); }
.drawer-card.card-red          { border-left: 4px solid #d32f2f; background: color-mix(in srgb, #d32f2f 14%, #fff); }
.drawer-card.card-purple       { border-left: 4px solid #7b1fa2; background: color-mix(in srgb, #7b1fa2 14%, #fff); }
.drawer-card.card-yellow       { border-left: 4px solid #e0a800; background: color-mix(in srgb, #e0a800 20%, #fff); }
.drawer-card.card-green        { border-left: 4px solid #15803d; background: color-mix(in srgb, #15803d 14%, #fff); }
.drawer-card.card-white        { border-left: 4px solid #cbd5e1; background: #ffffff; }
.drawer-card.pc-carencia       { background: color-mix(in srgb, var(--club-primary, #0a2240) 20%, #fff); }

/* Backwards compat — old name still used by drag/drop and a handful
   of templates (PDF, master view).  Mirrors the chip styling. */
.player-card { cursor: pointer; }
.player-card-name { font-weight: 700; color: #222; font-size: 11px; }
.player-card-details,
.player-card-club { font-size: 10px; color: #555; }


.pitch-container {
    position: relative;
    width: 100%;
    max-width: 1280px;
    aspect-ratio: 1.35 / 1;     /* taller than 105:68 — gives room for 5 chips per slot */
    margin: 0 auto;
    border-radius: 14px;
    user-select: none;
    overflow: visible;
    /* Layered grass: 8 alternating subtle stripes + radial highlight + soft outer shadow */
    background:
      radial-gradient(ellipse at 50% 35%, rgba(255,255,255,0.08), rgba(0,0,0,0) 55%),
      repeating-linear-gradient(to right,
        rgba(255,255,255,0.04) 0 12.5%,
        rgba(0,0,0,0.05)        12.5% 25%),
      linear-gradient(135deg, #1f6e30 0%, #246a2c 50%, #1d5e27 100%);
    box-shadow:
      inset 0 0 0 4px rgba(255, 255, 255, 0.92),
      0 24px 48px rgba(0, 0, 0, 0.18),
      0 4px 12px rgba(0, 0, 0, 0.10);
}
.pitch-container::before {
    /* Subtle vignette for depth */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.18) 100%);
}

.pitch-center-circle,
.pitch-center-spot,
.pitch-halfway-line,
.pitch-box,
.pitch-small-box,
.pitch-penalty-spot,
.pitch-goal,
.pitch-corner {
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0.78);
}

.pitch-center-circle {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    height: 30%; aspect-ratio: 1/1;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
}

.pitch-center-spot {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 6px; height: 6px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
}

.pitch-halfway-line {
    position: absolute; left: 50%; top: 0;
    width: 2px; height: 100%;
    background: rgba(255, 255, 255, 0.7);
}

.pitch-box {
    position: absolute; top: 50%; transform: translateY(-50%);
    border: 2px solid rgba(255, 255, 255, 0.7);
    height: 60%; width: 14%;
}
.pitch-box.top { left: -2px; border-left: none; }
.pitch-box.bottom { right: -2px; border-right: none; }

.pitch-small-box {
    position: absolute; top: 50%; transform: translateY(-50%);
    border: 2px solid rgba(255, 255, 255, 0.7);
    height: 34%; width: 5%;
}
.pitch-small-box.top { left: -2px; border-left: none; }
.pitch-small-box.bottom { right: -2px; border-right: none; }

.pitch-penalty-spot {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 4px; height: 4px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
}
.pitch-penalty-spot.top { left: 11%; }
.pitch-penalty-spot.bottom { right: 11%; }

.pitch-goal {
    position: absolute; top: 50%; transform: translateY(-50%);
    height: 22%; width: 15px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    background: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255, 255, 255, 0.2) 2px, rgba(255, 255, 255, 0.2) 4px);
    z-index: 1;
}
.pitch-goal.top { left: 0; border-left: none; }
.pitch-goal.bottom { right: 0; border-right: none; }

.pitch-corner {
    position: absolute; width: 20px; height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.7); border-radius: 50%;
}
.pitch-corner.tl { top: -10px; left: -10px; }
.pitch-corner.tr { top: -10px; right: -10px; }
.pitch-corner.bl { bottom: -10px; left: -10px; }
.pitch-corner.br { bottom: -10px; right: -10px; }

/* =========================================
   10. PLUGINS & NOTIFICATIONS
   ========================================= */

/* Fix: Move SweetAlert Notifications down to avoid covering Navbar */
div.swal2-container.swal2-top-end {
  top: 80px !important;
}

/* Notifications Bell */
.notification-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.notification-icon:hover {
  color: #fff;
  opacity: 0.8;
}

.bell-pulse {
  animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15);
  }

  100% {
    transform: scale(1);
  }
}

/* Select2 Tweaks */
.select2-container .select2-selection--single {
  height: 38px !important;
  padding-top: 5px;
}

/* =========================================
   11. RESPONSIVE / MOBILE FOUNDATION  (added 2026-07)
   -----------------------------------------
   styles.css had NO @media queries — the shared shell (nav, chat,
   dropdowns, tables, containers) was desktop-only, so every page
   forced horizontal scrolling and oversized chrome on a phone.
   These global rules make the shell + common patterns usable on
   small screens WITHOUT editing each template. Page-specific grid
   collapses live in their own templates.
   Breakpoints mirror Bootstrap: lg=991.98, md=767.98, sm=575.98.
   ========================================= */

/* An image should never be the thing that forces the page wider than
   the screen. Caps to container width; explicitly-sized avatars/flags
   that already fit are untouched (they're smaller than their box). */
img { max-width: 100%; }

@media (max-width: 991.98px) {
  /* Kill accidental horizontal scroll from any wide child — the single
     biggest thing that makes a desktop layout feel broken on a phone.
     Wide content (tables, pitches) gets its own scroll container below. */
  body { overflow-x: hidden; }

  /* Collapsed-nav search box was a fixed 280px; let it fill the menu. */
  .search-bar-custom { width: 100%; }

  /* Navbar dropdowns (notifications 340px, user menu) must stay on-screen. */
  .navbar-custom .dropdown-menu { max-width: 92vw; }
}

@media (max-width: 767.98px) {
  /* Reclaim the generous desktop gutters/margins for the narrow viewport. */
  main.container { padding-left: 12px; padding-right: 12px; }
  main.container.my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; }

  /* Desktop cards use roomy p-4/p-5 padding; tighten on phones. */
  .card-body { padding: 1rem; }

  /* Big display headings shrink so they stop wrapping awkwardly. */
  h1, .h1 { font-size: 1.6rem; }
  h2, .h2 { font-size: 1.35rem; }
  h3, .h3 { font-size: 1.2rem; }
  .display-1, .display-2, .display-3,
  .display-4, .display-5, .display-6 { font-size: 1.8rem; }

  /* Universal responsive-table net: any wide .table becomes its own
     horizontal-scroll container instead of blowing out the page width.
     `display:block` makes the <table> a scroll box; the rows keep their
     table layout via an anonymous table box, so columns stay aligned and
     text still wraps — the table only pans sideways when it truly can't
     fit. Harmless for tables already inside a .table-responsive wrapper. */
  .table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 575.98px) {
  /* Any dropdown menu (not just nav) constrained to the viewport.
     The max-width alone was not enough: Bootstrap sets `white-space: nowrap`
     on .dropdown-item, and the user menu also carries an inline
     `min-width:200px`. So the box was capped at 96vw while its CONTENT stayed
     one long unbreakable line — a long email or "Atividade dos Utilizadores"
     ran straight off the edge, which is why the menu opened "too wide" and its
     items could not be read or tapped. Let the content wrap instead, drop the
     min-width floor, and cap the height so a long menu scrolls rather than
     running off the bottom of the screen. */
  .dropdown-menu {
    /* Width needs a FLOOR and a CEILING, not just a ceiling.
       Ceiling alone: Bootstrap's `white-space: nowrap` on .dropdown-item kept
       each row one unbreakable line, so a long email ran off the screen.
       Removing the floor instead (min-width: 0) was worse — an absolutely
       positioned box with wrapping enabled shrinks to its widest WORD, which
       measured 83px wide and 633px tall, every label broken across lines.
       So: wrap the text, and pin the width to something readable that still
       fits a 375px screen. */
    min-width: min(280px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px);
    max-height: 78vh;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .dropdown-menu .dropdown-item,
  .dropdown-menu .dropdown-header {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  /* The user + notification menus live in `.navbar-right`, whose right edge
     sits at ~224px on a 375px screen (the burger row leaves ~150px of dead
     space beside it). `dropdown-menu-end` aligns to that CONTAINER, so a
     280px menu opened there runs from -56px to 224px — half of it off the
     left edge of the phone, which is what made it unreadable.
     Anchor these two to the VIEWPORT instead. Scoped to `.navbar-right` on
     purpose: the nav section menus live inside the collapsed `#navbarNav`
     stack, where they must stay in normal flow. */
  .navbar-right .dropdown-menu {
    position: fixed !important;
    top: 52px !important;              /* navbar measures 47px at this width */
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    max-height: calc(100vh - 66px);
  }

  /* AI assistant panel: fixed 370px + 30px right gutter overflows a 375px
     phone. Turn it into a near-full-width bottom sheet. */
  #aiChatWindow {
    width: auto !important;
    left: 12px !important;
    right: 12px !important;
    height: 72vh !important;
    bottom: 88px !important;
  }
  #aiChatBtn {
    bottom: 18px !important;
    right: 18px !important;
    width: 56px !important;
    height: 56px !important;
  }
}

/* Shadow-team pitch (shared by shadow_view + shadow_master, styled in §9):
   .position-slot children are position:absolute, 168px wide, placed by inline
   left/top %. On a ~340px-wide pitch they overlap heavily and the wide roles
   (wingers/full-backs near the touchline) spill off-screen and get clipped.
   On phones, collapse the pitch into a clean stacked vertical list — each
   position keeps its pill + player chips and is read by scrolling down. */
@media (max-width: 575.98px) {
  .pitch-container {
    aspect-ratio: auto !important;
    height: auto !important;
    padding: 12px !important;
    display: flex !important;
    flex-direction: column;
    gap: 14px;
    background: #14532d !important;
  }
  .pitch-container::before,
  .pitch-container::after { display: none !important; }
  /* Hide the drawn pitch markings (lines, boxes, circle, spots, goals, corners). */
  .pitch-center-circle, .pitch-center-spot, .pitch-halfway-line,
  .pitch-box, .pitch-small-box, .pitch-penalty-spot,
  .pitch-goal, .pitch-corner { display: none !important; }
  .position-slot {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    filter: none !important;
  }
}