/* ============================================================
   drills-list.css
   Single CSS file for the Drills List page.
   Inherits CSS variables from base variables.css
   ============================================================ */

/* ---- Page wrapper ---- */
.drills-page {
  padding: var(--space-xl) 0 var(--space-4xl);
}

.page-scope-drills-list .drills-inner{
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

/* ---- Page Header ---- */
.page-scope-drills-list .page-header{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
  flex-wrap: wrap;
}

.page-scope-drills-list .page-header-left h1{
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 0.3rem;
  line-height: 1.15;
}

.page-scope-drills-list .page-header-left h1 i{
  color: var(--primary-blue);
  margin-right: 0.4rem;
}

.page-scope-drills-list .page-header-left p{
  color: var(--text-soft);
  margin: 0;
  font-size: 0.95rem;
}

.page-scope-drills-list .page-header-actions{
  display: flex;
  gap: var(--space-sm);
  flex-shrink: 0;
}

/* ---- Shared Buttons ---- */
.page-scope-drills-list .btn{
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  border: none;
  transition: all var(--transition-fast);
  font-family: inherit;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}

.page-scope-drills-list .btn-primary {
  background: var(--primary-blue);
  color: #fff;
  box-shadow: 0 2px 10px rgba(42, 104, 255, 0.28);
}
.page-scope-drills-list .btn-primary:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(42, 104, 255, 0.38);
}

.page-scope-drills-list .btn-outline {
  background: transparent;
  color: var(--text-dark);
  border: 1.5px solid var(--border);
}
.page-scope-drills-list .btn-outline:hover {
  border-color: var(--primary-blue);
  color: var(--primary-blue);
  background: var(--primary-blue-light);
}

.page-scope-drills-list .btn-ghost {
  background: var(--surface);
  color: var(--text-soft);
  border: 1.5px solid var(--border);
}
.page-scope-drills-list .btn-ghost:hover {
  color: var(--primary-blue);
  border-color: var(--primary-blue);
  background: var(--primary-blue-light);
}

/* ---- Stats Bar ---- */
.page-scope-drills-list .stats-bar{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.page-scope-drills-list .stat-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.page-scope-drills-list .stat-card:hover{
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px var(--primary-blue-light);
}

.page-scope-drills-list .stat-icon{
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.page-scope-drills-list .stat-icon-blue{ background: var(--primary-blue-light);         color: var(--primary-blue); }
.page-scope-drills-list .stat-icon-orange{ background: rgba(255, 201, 71, 0.15);           color: var(--warning); }
.page-scope-drills-list .stat-icon-green{ background: rgba(43, 203, 119, 0.15);           color: var(--success); }
.page-scope-drills-list .stat-icon-purple{ background: rgba(124, 97, 255, 0.15);           color: var(--accent-purple); }

.page-scope-drills-list .stat-value{
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1;
  margin-bottom: 0.2rem;
}

.page-scope-drills-list .stat-label{
  font-size: 0.75rem;
  color: var(--text-soft);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---- Filters Row ---- */
.page-scope-drills-list .filters-row{
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}

.page-scope-drills-list .search-wrapper{
  flex: 1;
  min-width: 200px;
  position: relative;
}

.page-scope-drills-list .search-wrapper i{
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft);
  font-size: 0.82rem;
  pointer-events: none;
}

.page-scope-drills-list .search-input{
  width: 100%;
  padding: 0.65rem 1rem 0.65rem 2.4rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-dark);
  font-size: 0.9rem;
  font-family: inherit;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}

.page-scope-drills-list .search-input:focus{
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px var(--primary-blue-light);
}

.page-scope-drills-list .search-input::placeholder{ color: var(--text-soft); }

.page-scope-drills-list .sort-select{
  padding: 0.65rem 2.2rem 0.65rem 0.9rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-dark);
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%234A5568' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  transition: border-color var(--transition-fast);
}

.page-scope-drills-list .sort-select:focus{ border-color: var(--primary-blue); }

[data-theme="dark"] .page-scope-drills-list .sort-select{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23AAB0BD' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
}

/* ---- Filter Chips ---- */
.page-scope-drills-list .filter-chips{
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}

.page-scope-drills-list .chip{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  border-radius: 2rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-soft);
  transition: all var(--transition-fast);
  font-family: inherit;
  white-space: nowrap;
}

.page-scope-drills-list .chip:hover{
  border-color: var(--primary-blue);
  color: var(--primary-blue);
  background: var(--primary-blue-light);
}

.page-scope-drills-list .chip.active{
  border-color: var(--primary-blue);
  background: var(--primary-blue);
  color: #fff;
}

.page-scope-drills-list .live-dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--error);
  animation: pulse-dot 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

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

/* ---- Drills Grid ---- */
.page-scope-drills-list .drills-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: var(--space-lg);
  min-height: 220px;
}

/* ---- Drill Card ---- */
.page-scope-drills-list .drill-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform var(--transition-fast),
              box-shadow var(--transition-fast),
              border-color var(--transition-fast);
}

.page-scope-drills-list .drill-card:hover{
  transform: translateY(-3px);
  border-color: var(--primary-blue);
  box-shadow: 0 8px 32px rgba(42, 104, 255, 0.12);
}

/* Card image / placeholder */
.page-scope-drills-list .card-visual{
  height: 138px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.page-scope-drills-list .card-visual img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.page-scope-drills-list .card-visual-gradient{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-scope-drills-list .card-visual-gradient .lang-watermark{
  font-size: 4rem;
  opacity: 0.18;
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  user-select: none;
}

.page-scope-drills-list .card-visual-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 35%, rgba(0,0,0,0.58) 100%);
}

/* Badges on the card visual */
.page-scope-drills-list .card-badge-row{
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  right: var(--space-sm);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-xs);
}

.page-scope-drills-list .badge-status{
  padding: 0.27rem 0.7rem;
  border-radius: 2rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid transparent;
}

.page-scope-drills-list .status-upcoming{ background: rgba(43,203,119,0.18); color: #2BCB77; border-color: rgba(43,203,119,0.4); }
.page-scope-drills-list .status-ongoing{ background: rgba(255,90,95,0.18);  color: #FF5A5F; border-color: rgba(255,90,95,0.4);  }
.page-scope-drills-list .status-completed{ background: rgba(74,85,104,0.3);   color: #cdd2da; border-color: rgba(255,255,255,0.1); }

.page-scope-drills-list .badge-prize{
  padding: 0.27rem 0.65rem;
  border-radius: 2rem;
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(255,201,71,0.2);
  color: var(--warning);
  border: 1px solid rgba(255,201,71,0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Card body */
.page-scope-drills-list .card-body{
  padding: var(--space-md) var(--space-lg);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.page-scope-drills-list .card-top-row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
}

.page-scope-drills-list .card-title{
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
  margin: 0;
}

.page-scope-drills-list .card-difficulty{
  padding: 0.22rem 0.6rem;
  border-radius: 2rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.page-scope-drills-list .diff-beginner{ background: rgba(43,203,119,0.14); color: var(--success); }
.page-scope-drills-list .diff-intermediate{ background: rgba(255,201,71,0.14); color: var(--warning); }
.page-scope-drills-list .diff-advanced{ background: rgba(255,90,95,0.14);  color: var(--error); }
.page-scope-drills-list .diff-expert{ background: rgba(124,97,255,0.14); color: var(--accent-purple); }
.page-scope-drills-list .diff-mixed{ background: var(--primary-blue-light); color: var(--primary-blue); }

.page-scope-drills-list .roles-row{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.page-scope-drills-list .badge-role{
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: 2rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.page-scope-drills-list .badge-hosted{
  background: rgba(255, 201, 71, 0.15);
  color: var(--warning);
  border: 1px solid rgba(255, 201, 71, 0.4);
}

.page-scope-drills-list .badge-joined{
  background: rgba(43, 203, 119, 0.15);
  color: var(--success);
  border: 1px solid rgba(43, 203, 119, 0.4);
}

.page-scope-drills-list .badge-co-owner{
  background: rgba(124, 97, 255, 0.15);
  color: var(--accent-purple);
  border: 1px solid rgba(124, 97, 255, 0.4);
}

.page-scope-drills-list .card-desc{
  font-size: 0.81rem;
  color: var(--text-soft);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

.page-scope-drills-list .card-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.3rem;
}

.page-scope-drills-list .meta-tag{
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.73rem;
  color: var(--text-soft);
  background: var(--background);
  border: 1px solid var(--border);
  padding: 0.18rem 0.6rem;
  border-radius: 2rem;
}

.page-scope-drills-list .meta-tag i{ font-size: 0.62rem; }

/* Card footer */
.page-scope-drills-list .card-footer{
  padding: var(--space-sm) var(--space-lg) var(--space-md);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.page-scope-drills-list .card-host{
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: var(--text-soft);
  min-width: 0;
  overflow: hidden;
}

.page-scope-drills-list .host-avatar{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-blue), var(--accent-purple));
  color: #fff;
  font-size: 0.64rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.page-scope-drills-list .card-host span{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-scope-drills-list .card-action-group{
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

.page-scope-drills-list .btn-sm{
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.38rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: all var(--transition-fast);
  text-decoration: none;
  line-height: 1;
}

.page-scope-drills-list .btn-sm-primary{
  background: var(--primary-blue);
  color: #fff;
}
.page-scope-drills-list .btn-sm-primary:hover{ background: var(--primary-hover); }

.page-scope-drills-list .btn-sm-danger{
  background: transparent;
  color: var(--error);
  border: 1px solid var(--border);
}
.page-scope-drills-list .btn-sm-danger:hover{
  background: rgba(255,90,95,0.1);
  border-color: var(--error);
}

/* ---- Loading / Empty / Error States ---- */
.page-scope-drills-list .loading-state,
.page-scope-drills-list .empty-state,
.page-scope-drills-list .error-state{
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-3xl) var(--space-md);
  color: var(--text-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-scope-drills-list .spinner{
  width: 38px;
  height: 38px;
  border: 3px solid var(--border);
  border-top-color: var(--primary-blue);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  margin: 0 auto var(--space-md);
}

@keyframes spin { to { transform: rotate(360deg); } }

.page-scope-drills-list .empty-state i,
.page-scope-drills-list .error-state i{
  font-size: 2.5rem;
  display: block;
  margin-bottom: var(--space-md);
  opacity: 0.35;
}

.page-scope-drills-list .empty-state h3,
.page-scope-drills-list .error-state h3{
  font-size: 1.05rem;
  color: var(--text-dark);
  margin-bottom: var(--space-xs);
}

.page-scope-drills-list .empty-state p,
.page-scope-drills-list .error-state p{
  margin-bottom: var(--space-lg);
  font-size: 0.9rem;
}

/* ---- Pagination ---- */
.page-scope-drills-list .pagination-row{
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: var(--space-xl);
  flex-wrap: wrap;
}

.page-scope-drills-list .page-btn{
  min-width: 38px;
  height: 38px;
  padding: 0 0.7rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-soft);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transition-fast);
}

.page-scope-drills-list .page-btn:hover:not(:disabled){
  border-color: var(--primary-blue);
  color: var(--primary-blue);
  background: var(--primary-blue-light);
}

.page-scope-drills-list .page-btn.active{
  background: var(--primary-blue);
  border-color: var(--primary-blue);
  color: #fff;
}

.page-scope-drills-list .page-btn:disabled{
  opacity: 0.35;
  cursor: not-allowed;
}

/* ---- Modal ---- */
.page-scope-drills-list .modal-backdrop{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.page-scope-drills-list .modal-backdrop.open{ display: flex; }

.page-scope-drills-list .modal-box{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  width: 100%;
  max-width: 460px;
  box-shadow: var(--shadow-lg);
}

.page-scope-drills-list .modal-box-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
}

.page-scope-drills-list .modal-box-header h3{
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.page-scope-drills-list .modal-box-header h3 i{ color: var(--primary-blue); }

.page-scope-drills-list .modal-close{
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.3rem;
  color: var(--text-soft);
  line-height: 1;
  padding: 0.2rem;
  transition: color var(--transition-fast);
}
.page-scope-drills-list .modal-close:hover{ color: var(--text-dark); }

.page-scope-drills-list .filter-group{
  margin-bottom: var(--space-md);
}

.page-scope-drills-list .filter-group label{
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.4rem;
}

.page-scope-drills-list .filter-group select{
  width: 100%;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  background: var(--background);
  color: var(--text-dark);
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition-fast);
}
.page-scope-drills-list .filter-group select:focus{ border-color: var(--primary-blue); }

.page-scope-drills-list .modal-footer{
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
}

/* ---- Toast ---- */
.page-scope-drills-list .toast-container{
  position: fixed;
  bottom: var(--space-xl);
  right: var(--space-xl);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  pointer-events: none;
}

.page-scope-drills-list .toast{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.15rem;
  border-radius: var(--radius-md);
  font-size: 0.87rem;
  font-weight: 600;
  color: #fff;
  box-shadow: var(--shadow-lg);
  animation: toastIn 0.28s ease;
}

.page-scope-drills-list .toast-success{ background: var(--success); }
.page-scope-drills-list .toast-error{ background: var(--error); }
.page-scope-drills-list .toast-info{ background: var(--primary-blue); }

@keyframes toastIn {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .page-scope-drills-list .stats-bar{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .page-scope-drills-list .drills-inner{ padding: 0 var(--space-md); }
  .page-scope-drills-list .drills-grid{ grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
}

@media (max-width: 640px) {
  .page-scope-drills-list .drills-inner{ padding: 0 var(--space-sm); }
  .page-scope-drills-list .page-header{ flex-direction: column; align-items: flex-start; }
  .page-scope-drills-list .page-header-actions{ width: 100%; }
  .page-scope-drills-list .page-header-actions .btn{ flex: 1; justify-content: center; }
  .page-scope-drills-list .stats-bar{ grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }
  .page-scope-drills-list .stat-card{ padding: var(--space-sm) var(--space-md); }
  .page-scope-drills-list .stat-value{ font-size: 1.3rem; }
  .page-scope-drills-list .filters-row{ flex-direction: column; align-items: stretch; }
  .page-scope-drills-list .sort-select{ width: 100%; }
  .page-scope-drills-list .drills-grid{ grid-template-columns: 1fr; }
  .page-scope-drills-list .toast-container{ bottom: var(--space-md); right: var(--space-md); left: var(--space-md); }
  .page-scope-drills-list .toast{ width: 100%; }
}