/* ==========================================================================
   BUG TRACKER TEMPLATE STYLES
   Extends css/style.css. `.issue-row` is one repeatable unit — meant to
   become a PHP loop over issues once this is wired to a database.
   ========================================================================== */

/* ---------- TRACKER HERO ---------- */
.tracker-hero{
  max-width:1200px; margin:0 auto; padding:170px 5% 60px;
  display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap;
}
.tracker-hero h1{
  font-family:var(--font-display); font-size:clamp(2.2rem,5.5vw,4rem);
  text-transform:uppercase; letter-spacing:2px; font-weight:800; line-height:1;
  color:var(--text);
}
.tracker-hero h1 span{
  background:linear-gradient(135deg, var(--frost-glow), var(--frost));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tracker-hero p{color:var(--text-dim); margin-top:18px; max-width:520px; line-height:1.75;}
.tracker-hero-left{flex:1 1 420px;}
.tracker-report-btn{white-space:nowrap;}

/* ---------- FILTER BAR ---------- */
.tracker-filters{
  max-width:1200px; margin:0 auto; padding:0 5% 30px;
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  border-bottom:1px solid var(--border);
}
.filter-tabs{display:flex; gap:8px; flex-wrap:wrap;}
.filter-tab{
  display:flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:6px; border:1px solid transparent;
  background:transparent; color:var(--text-dim);
  font-family:var(--font-body); font-size:0.82rem; letter-spacing:0.5px; text-transform:uppercase;
  cursor:pointer; transition:all .2s ease;
}
.filter-tab span{
  font-size:0.72rem; padding:1px 7px; border-radius:20px; background:rgba(142,162,179,0.15); color:var(--text-dim);
}
.filter-tab:hover{color:var(--text);}
.filter-tab.active{
  background:rgba(111,216,255,0.08); border-color:var(--frost-dim); color:var(--frost-glow);
}
.filter-tab.active span{background:rgba(111,216,255,0.18); color:var(--frost-glow);}

.filter-tools{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.search-box{position:relative;}
.search-box input{
  width:240px; padding:10px 14px 10px 36px; border-radius:6px; border:1px solid var(--border);
  background:var(--panel); color:var(--text); font-family:var(--font-body); font-size:0.85rem;
}
.search-box input::placeholder{color:var(--text-dim);}
.search-box input:focus{outline:none; border-color:var(--frost-dim);}
.search-box::before{
  content:"⚲"; position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:var(--text-dim); font-size:0.85rem;
}
.sort-select{
  padding:10px 14px; border-radius:6px; border:1px solid var(--border);
  background:var(--panel); color:var(--text); font-family:var(--font-body); font-size:0.85rem;
  cursor:pointer;
}
.sort-select:focus{outline:none; border-color:var(--frost-dim);}

/* ---------- ISSUE TABLE ---------- */
.issue-table{max-width:1200px; margin:0 auto; padding:30px 5% 150px;}
.issue-table-head{
  display:grid; grid-template-columns:70px 1fr 130px 120px 140px; gap:16px;
  padding:0 20px 14px;
  font-size:0.7rem; letter-spacing:2px; text-transform:uppercase; color:var(--text-dim);
}
.issue-row{
  display:grid; grid-template-columns:70px 1fr 130px 120px 140px; gap:16px; align-items:center;
  padding:20px; margin-bottom:14px;
  border:1px solid var(--border); border-radius:10px;
  background:linear-gradient(160deg, var(--panel), var(--bg-alt));
  transition:border-color .25s ease, transform .25s ease;
}
.issue-row:hover{border-color:var(--frost-dim); transform:translateY(-2px);}

.issue-votes{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:10px 6px; border:1px solid var(--border); border-radius:8px;
  background:var(--bg-alt);
}
.issue-votes button{
  background:none; border:none; color:var(--text-dim); font-size:0.9rem; cursor:pointer; line-height:1;
  transition:color .2s;
}
.issue-votes button:hover{color:var(--frost-glow);}
.issue-votes .vote-count{font-family:var(--font-display); font-size:1rem; font-weight:700; color:var(--frost-glow);}

.issue-meta{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  font-size:0.76rem; color:var(--text-dim); margin-bottom:6px;
}
.issue-meta .issue-id{color:var(--frost-glow); font-weight:600;}
.issue-title{color:var(--text); font-size:0.95rem; line-height:1.5;}

.tag-cat{
  display:inline-block; padding:5px 12px; border-radius:20px;
  border:1px solid var(--border); color:var(--text-dim);
  font-size:0.72rem; letter-spacing:0.5px;
}

.tag-priority{
  display:inline-block; padding:5px 12px; border-radius:5px;
  font-size:0.72rem; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  border:1px solid;
}
.tag-priority.critical{color:#ff8a8a; border-color:rgba(255,110,110,0.5); background:rgba(255,110,110,0.08);}
.tag-priority.high{color:#ffb98f; border-color:rgba(255,140,90,0.45); background:rgba(255,140,90,0.08);}
.tag-priority.medium{color:var(--text-dim); border-color:var(--border); background:rgba(142,162,179,0.06);}

.status-badge{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 14px; border-radius:20px; border:1px solid;
  font-size:0.72rem; font-weight:700; letter-spacing:1px; text-transform:uppercase;
}
.status-badge::before{content:"●"; font-size:0.55rem;}
.status-badge.open{color:var(--frost-glow); border-color:var(--frost-dim); background:rgba(111,216,255,0.08);}
.status-badge.resolved{color:#8fe0a8; border-color:rgba(143,224,168,0.4); background:rgba(143,224,168,0.08);}
.status-badge.closed{color:var(--text-dim); border-color:var(--border); background:rgba(142,162,179,0.06);}
.status-badge.progress{color:#ffd98f; border-color:rgba(255,217,143,0.4); background:rgba(255,217,143,0.08);}

@media(max-width:900px){
  .issue-table-head{display:none;}
  .issue-row{grid-template-columns:56px 1fr; grid-template-areas:"votes main" "votes tags";}
  .issue-votes{grid-area:votes;}
  .issue-main{grid-area:main;}
  .issue-category, .issue-priority, .issue-status{grid-area:tags; display:inline-flex; margin-right:8px;}
}