/* ====== Fantabuzzer main.css (checkbox ruoli più grandi; resizer più scuro e basso; no handle admin) ====== */
:root{
  --fbz-bg:#1e2023;
  --fbz-panel:#424a5b50;
  --fbz-panel-solid:#424a5b;
  --fbz-border:#262a33;
  --fbz-text:#e6e8ee;
  --fbz-toggle:#9fb0ff;
  --fbz-icon:url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="%23353c4c"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M21 15L15 21M21 8L8 21" stroke="%23353c4c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>');
}

:root[data-bs-theme="light"]{
  --fbz-bg:#999999;
  --fbz-panel:#eaeaea80;
  --fbz-panel-solid:#d1d1d1;
  --fbz-border:#dee2e6;
  --fbz-text:#333333;
  --fbz-toggle:#333333;
  --fbz-icon:url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="%23555"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M21 15L15 21M21 8L8 21" stroke="%23555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>');
}

/* testo scuro dentro i pannelli in light mode */
:root[data-bs-theme="light"] .panel,
:root[data-bs-theme="light"] .panel .list-group-item,
:root[data-bs-theme="light"] .panel .text-secondary{
  color:#212529 !important;
}

:root[data-bs-theme="light"] #btnManualAssignOpen{
  color:#222 !important;
  border-color: #222 !important;
}
:root[data-bs-theme="light"] #freePanel button{
  color: #222 !important;
  border-color: #fff !important;
  background-color: #ffffff50 !important;
}

html,body{ height:100%; }
body{
  background-color:var(--fbz-bg);
  color:var(--fbz-text);
  font-family:"Saira Semi Condensed",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight: 600;
  background-image: url("/assets/images/bg-pattern.png");
  background-repeat: repeat;
  background-position: top left;
  background-size: auto;
}

/* Header / Brand */
header .brand img{ height:50px; }

/* Pannelli */
.panel{
  background:var(--fbz-panel);
  border:1px solid var(--fbz-border);
  border-radius:12px;
  position:relative;
}
.panel h6{ font-weight:600; margin:0; }
.sidebar{ overflow:auto; min-height:96px; }
.sidebar#myRoster{ min-height: 0; max-height: 220px; }
.sidebar#onlineList{ min-height: 0; max-height: 240px; }
.sidebar#favoritesList{ min-height: 0; max-height: 240px; }
.panel-toggle{ border:none; background:transparent; color: var(--fbz-toggle); }

/* Maniglia angolare (più scura e più in basso) */
.resizer-corner{
  position:absolute;
  right:6px; bottom:3px;     /* <- bottom a 3px */
  width:18px; height:18px;
  cursor:nwse-resize;
  opacity:.9;
}
.resizer-corner::before{
  content:"";
  display:block; width:100%; height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-image: var(--fbz-icon);
}
.resizer-corner:hover{ opacity:1; }

/* NASCONDI la maniglia nel pannello admin a destra */
#adminPanel .resizer-corner{ display:none; }

/* Free agents header & rows (grid) */
#freeAgents{ padding:0; margin:0; list-style:none; }
#freeAgents .free-agents-header,
#freeAgents .free-agent-row{
  display:grid; align-items:center;
  grid-template-columns: 85px 1fr 70px 50px;
  gap:8px;
}
#freeAgents .free-agents-header{
  padding:8px 12px;
  border-bottom:1px solid var(--fbz-border);
  font-weight:600; color:#bfc5d1;
  background:var(--fbz-panel-solid);
  top:0; z-index:2;
}
:root[data-bs-theme="light"] #freeAgents .free-agents-header{ color:#4d4d4d; }

#freeAgents .free-agent-row{
  font-size:14px;padding:8px 12px; border-bottom:1px dashed var(--fbz-border);background-color: var(--fbz-panel);
}
.team-logo{ width:22px; height:22px; object-fit:contain; }

/* Ruoli: barra compatta a badge togglabili */
.roles-bar{ 
  /* Desktop: griglia 2x6, elementi a larghezza uniforme */
  display:grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap:8px; overflow:visible; scrollbar-width: thin; 
  padding-bottom: 4px; max-width:100%;
}
.roles-bar .role-badge-toggle{
  display:inline-block; user-select:none; cursor:pointer;
  padding:.25rem .55rem; border-radius:999px; font-weight:600; font-size:.95rem;
  border:1px solid #6c757d; background:transparent; color:var(--fbz-text);
  white-space:nowrap; text-align:center; width:100%; box-sizing:border-box;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.roles-bar .role-badge-toggle:hover{ background:rgba(255,255,255,.06); }
.roles-bar .role-badge-toggle.active{ background:#ffc10633; border-color:#ffc106; color:#ffd24d; transform: scale(1.03); box-shadow: 0 0 0 2px rgba(255,255,255,.08); }
.roles-bar .role-badge-toggle:active{ transform: scale(0.98); }

@media (max-width: 991.98px){
  /* Mobile: barra orizzontale scrollabile */
  .roles-bar{ display:flex; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .roles-bar .role-badge-toggle{ width:auto; min-width:72px; }
}

/* Colori attivi per ruolo (coerenti con badge ruoli nella lista) */
.roles-bar .role-badge-toggle.active.role-Por,
.roles-bar .role-badge-toggle.active.role-P { background:#ff8c00; border-color:#ff8c00; color:#fff; }

.roles-bar .role-badge-toggle.active.role-Dd,
.roles-bar .role-badge-toggle.active.role-Dc,
.roles-bar .role-badge-toggle.active.role-Ds,
.roles-bar .role-badge-toggle.active.role-B { background:#198754; border-color:#198754; color:#fff; }

.roles-bar .role-badge-toggle.active.role-E,
.roles-bar .role-badge-toggle.active.role-M,
.roles-bar .role-badge-toggle.active.role-C { background:#0d6efd; border-color:#0d6efd; color:#fff; }

.roles-bar .role-badge-toggle.active.role-T,
.roles-bar .role-badge-toggle.active.role-W { background:#6f42c1; border-color:#6f42c1; color:#fff; }

.roles-bar .role-badge-toggle.active.role-A,
.roles-bar .role-badge-toggle.active.role-Pc { background:#dc3545; border-color:#dc3545; color:#fff; }

/* Modalità light: mantieni stessi colori e contrasto leggibile */
:root[data-bs-theme="light"] .roles-bar .role-badge-toggle.active.role-Por,
:root[data-bs-theme="light"] .roles-bar .role-badge-toggle.active.role-P { background:#ff8c00; border-color:#ff8c00; color:#212529; }

:root[data-bs-theme="light"] .roles-bar .role-badge-toggle.active.role-Dd,
:root[data-bs-theme="light"] .roles-bar .role-badge-toggle.active.role-Dc,
:root[data-bs-theme="light"] .roles-bar .role-badge-toggle.active.role-Ds,
:root[data-bs-theme="light"] .roles-bar .role-badge-toggle.active.role-B { background:#198754; border-color:#198754; color:#fff; }

:root[data-bs-theme="light"] .roles-bar .role-badge-toggle.active.role-E,
:root[data-bs-theme="light"] .roles-bar .role-badge-toggle.active.role-M,
:root[data-bs-theme="light"] .roles-bar .role-badge-toggle.active.role-C { background:#0d6efd; border-color:#0d6efd; color:#fff; }

:root[data-bs-theme="light"] .roles-bar .role-badge-toggle.active.role-T,
:root[data-bs-theme="light"] .roles-bar .role-badge-toggle.active.role-W { background:#6f42c1; border-color:#6f42c1; color:#fff; }

:root[data-bs-theme="light"] .roles-bar .role-badge-toggle.active.role-A,
:root[data-bs-theme="light"] .roles-bar .role-badge-toggle.active.role-Pc { background:#dc3545; border-color:#dc3545; color:#fff; }

/* Micro-transizione visiva anche in light mode */
:root[data-bs-theme="light"] .roles-bar .role-badge-toggle.active{ box-shadow: 0 0 0 2px rgba(0,0,0,.06); }

/* Checkbox ruoli più grandi nel pannello Svincolati */
.roles-line .form-check-input{
  width:1.15rem; height:1.15rem;     /* più grandi */
  margin-top: .15rem;
}
.roles-line .form-check-label{ font-size: .95rem; }

/* Ruoli: badge */
.badge-role{
  margin-right:2px;
  padding: .15rem .28rem;
  font-size: .82rem;
  border-radius: .4rem;
}
.badge-role.Por, .badge-role.P { background:#ff8c00; }
.badge-role.Dd, .badge-role.Dc, .badge-role.Ds, .badge-role.B { background:#198754; }
.badge-role.E, .badge-role.M, .badge-role.C { background:#0d6efd; }
.badge-role.T, .badge-role.W { background:#6f42c1; }
.badge-role.A, .badge-role.Pc { background:#dc3545; }

/* Admin controls */
.admin-controls{ display:flex; flex-wrap:wrap; gap:.5rem; }
.admin-controls .btn{ min-width:44px; padding:.55rem .65rem; border-radius:10px; }
.admin-btn.btn-fbz-start{ background:#198754; border-color:#198754; color:#fff; flex-grow: 2; }
.admin-btn.btn-fbz-pause{ background:#FFC106; border-color:#FFC106; color:#000; }
.admin-btn.btn-fbz-stop{ background:#DC3445; border-color:#DC3445; color:#fff; }
.admin-btn.btn-fbz-close{ background:#6F42C1; border-color:#6F42C1; color:#fff; flex-grow: 2; }
#audio-countdown-card select{
  display: inline-block;
  width: 50%;
  margin-left: 20px;
}

/* Bid area */
#btnBid{ font-size:1.25rem; padding:1rem 1.25rem; }
#leaderWrap{ display:none; }

/* Budget badge green */
#myBudget{ background:#198754; }

/* Online list */
#onlineList .user-link{
  color:var(--fbz-text);
  display:block;
  padding:.375rem .5rem;
  border:0;
}
#onlineList .user-link:hover{ background:rgba(255,255,255,.06); text-decoration:none; }

/* Tips */
.tip{ background:rgba(255,255,255,.04); border:1px dashed var(--fbz-border); border-radius:10px; }

/* Pannello centrale: badge ruoli leggermente più grandi */
.auction-hero .auction-hero-name .badge-role{
  padding: .28rem .44rem;
  font-size: 1rem;
  border-radius: .5rem;
  line-height: 1;
}
.auction-hero .auction-hero-name{ align-items:center; justify-content:center; }

.form-check-input:focus{
  border-color:#95fc85;
  box-shadow: 0 0 0 .25rem rgba(70,165,51,.25);

}
.form-check-input:checked{
  background-color:#10d60c;
  border-color:#10d60c;
}
.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url('data:image/svg+xml,<svg viewBox="-2.4 -2.4 20.80 20.80" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><circle cx="8" cy="8" r="8" fill="%23adfc9f"></circle></g></svg>');
}

/* Responsive */
@media (max-width: 991.98px){
  #freeAgents .free-agents-header,
  #freeAgents .free-agent-row{
    grid-template-columns: 75px 1fr 60px 50px;
  }
}
/* --- FBZ: Animazione chiusura pannelli (self call) --- */
#selfCallPanel.fade-out {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease;
}

/* Countdown bubble styling */
#countdown.countdown-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
  color: #fff;
  position: relative;
  z-index: 1; /* sopra al frame icona */
  margin-top: 8px;
}
.countdown-wrap { position: relative; display: inline-block; line-height: 1; }
.countdown-frame { 
  position: absolute; 
  left: 50%; top: 50%; transform: translate(-50%,-50%);
  font-size: 91px; /* leggermente più grande del cerchio */
  color: rgba(255,255,255);
  pointer-events: none;
  z-index: 0;
}
.countdown-ok { background-color: #198754; }     /* Bootstrap success */
.countdown-warn { background-color: #d88b04; color:#212529; } /* warning */
.countdown-danger { background-color: #dc3545; } /* danger */
/* Idle/nessun valore: mantieni il cerchio ma scuro */
.countdown-idle { background-color: #2b2f36; color:#eaeaea; }

/* Effetto zoom-in tipo AOS per gli ultimi secondi */
@keyframes fbz-zoom-in {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.10); }
  100% { transform: scale(1); }
}
.countdown-pulse {
  animation: fbz-zoom-in 220ms ease-out;
}

/* Larger countdown circle on >= lg screens */
@media (min-width: 992px) {
  #countdown.countdown-circle {
    width: 96px;
    height: 96px;
    font-size: 3rem;
    margin-top: 0px !important;
  }
  .countdown-frame { 
    font-size: 120px;
    padding-bottom: 10px;
    color: #e4e4e4; }
}