/* Players pages (ky-thu)
   extracted from views/pages/players/*.php
*/

/* players/index */
.pl-list{display:flex;flex-direction:column;gap:8px;}
    .pl-row{display:flex;align-items:center;gap:10px;border:1px solid #d0d0d0;border-radius:6px;padding:10px 12px;background:#fff;}
    .pl-rank{width:36px;flex:0 0 36px;color:#333;}
    .pl-name{flex:1;min-width:220px;}
    .pl-name a{text-decoration:none;color:var(--xq-link);}
    .pl-name a:hover{text-decoration:underline;}
    .pl-nick{font-weight:700;}
    .pl-real{font-weight:400;color:#222;}
    .pl-stats{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end;color:#333;font-size:13px;white-space:nowrap;}
    .pl-stats span{color:#333;}
    @media (max-width: 720px){
      .pl-row{flex-wrap:wrap;}
      .pl-stats{justify-content:flex-start;}
    }

/* players/show (bio) */
/* Collapsible player bio */
  .player-bio{position:relative;margin-top:6px;}
  .player-bio__content{
    white-space:pre-wrap;
    line-height:1.5;
    /* Nội dung giới thiệu kỳ thủ màu xám nhẹ (#666) giống trang bài viết (xq-article)
       nhưng KHÔNG ảnh hưởng màu tiêu đề (xq-box-title). */
    color:#666;
    max-height:140px;
    overflow:hidden;
    transition:max-height .2s ease;
  }
  .player-bio.is-expanded .player-bio__content{
    /* Giới hạn chiều cao khi mở rộng và dùng thanh kéo (scroll) */
    max-height:320px;
    overflow-y:auto;
    overflow-x:hidden;
    padding-right:6px; /* tránh chữ dính sát scrollbar */
  }
  .player-bio__fade{
    content:"";
    position:absolute;
    left:0;right:0;
    bottom:34px;
    height:50px;
    pointer-events:none;
    background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    display:none;
  }
  .player-bio.is-collapsible:not(.is-expanded) .player-bio__fade{display:block;}
  .player-bio__toggle{
    margin-top:8px;
    border:1px solid #c9c9c9;
    background:#f7f7f7;
    padding:6px 10px;
    border-radius:8px;
    cursor:pointer;
    font-size:13px;
  }

/* Search bar */
.pl-search{margin:10px 0;display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.pl-search input[name="q"]{padding:6px;width:260px;max-width:100%;}
.pl-search button{padding:6px 10px;}

/* Player show */
.player-head{
  display:flex;
  gap:14px;
  align-items:flex-start;
  flex-wrap:wrap;
}

.player-avatar-wrap{
  width:160px;
  flex:0 0 160px;
}

.player-avatar{
  width:160px;
  height:160px;
  border-radius:12px;
  object-fit:cover;
  display:block;
}

.player-avatar--placeholder{
  width:160px;
  height:160px;
  border-radius:12px;
  background:#eee;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#888;
}

.player-info{
  flex:1;
  min-width:240px;
}

.player-name{
  margin:0 0 6px;
}

.player-country{
  color:#666;
  margin-bottom:8px;
}

.player-games-title{
  margin:0 0 10px;
}

.player-empty{
  color:#666;
}

/* players/show (games list v2)
   - STT thay cho Vòng
   - Bỏ dòng tiêu đề và cột "Xem"
   - Bấm vào Hòa/Thắng/Bại để xem ván
   - Tên giải nằm ở dòng 2 (wrap tốt cho tên dài)
*/
.player-games-list{
  width:100%;
  border:1px solid #ddd;
  border-radius:6px;
  background:#fff;
  overflow:hidden;
}

.player-game-item{
  display:grid;
  grid-template-columns:40px 1fr;
  column-gap:10px;
  padding:8px 10px;
  border-bottom:1px solid #eee;
}

.player-game-item:last-child{border-bottom:none;}

.player-game-idx{
  color:#333;
  font-size:14px;
  padding-top:2px;
}

.player-game-line1{
  display:grid;
  /* Thu gọn hơn vì tên kỳ thủ thường không quá dài (3-5 chữ) */
  grid-template-columns:160px 60px 160px;
  column-gap:4px;
  align-items:center;
  font-size:14px;
  /* Dùng UI font cho dễ nhìn trên Windows */
  font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
}

/* Tên kỳ thủ: dùng <b> mặc định (dễ nhìn, không ép font-weight) */

/* Giữ 3 cột Tiên - KQ - Hậu thẳng hàng, tên dài không làm lệch cột */
.player-game-player{ min-width:0; }

.player-game-player a{
  text-decoration:none;
  color:var(--xq-link);
}

.player-game-player a:hover{ text-decoration:underline; }

.player-game-player a,
.player-game-player b{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.player-game-result{
  color:var(--xq-link);
  font-weight:400;
  text-decoration:underline;
  /* Demo để kết quả canh trái trong cột, nhìn sát hơn với tên Tiên */
  justify-self:start;
  white-space:nowrap;
}

.player-game-line2{
  margin-top:3px;
  font-size:13px;
  color:#555;
  line-height:1.4;
  word-break:break-word;
}

.player-game-tournament{
  color:inherit;
  text-decoration:none;
}

.player-game-tournament:hover{ text-decoration:underline; }

.player-games-table{
  width:100%;
  border-collapse:collapse;
}

.player-games-table th,
.player-games-table td{
  border:1px solid #ddd;
  padding:8px;
}

.player-games-table th.col-round{width:70px;}
.player-games-table th.col-result{width:80px;}
.player-games-table th.col-view{width:90px;}

/* Players index filters */
.pl-filter{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:end;
  margin:0 0 14px;
}

.pl-filter-label{
  font-size:12px;
  color:#666;
  margin-bottom:4px;
}

.pl-filter-input{
  padding:8px 10px;
  min-width:240px;
}

.pl-filter-select{
  padding:8px 10px;
  min-width:180px;
}

.pl-filter-btn{
  padding:8px 14px;
  cursor:pointer;
}

.pl-filter-reset{
  margin-left:8px;
  color:#666;
  text-decoration:none;
}

.pl-filter-reset:hover{
  text-decoration:underline;
}

.pl-empty{color:#666;}

@media (max-width: 640px){
  .player-game-item{ grid-template-columns:34px 1fr; }

  .player-game-line1{
    grid-template-columns: 1fr 52px 1fr;
    column-gap:4px;
    row-gap:4px;
  }
}