/* Student Tracker Responsive v5 */
.tracker-container { max-width: 1000px; margin: 20px auto; padding: 10px; }
.tracker-card { background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); padding: 20px; }
.legend { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.legend span { position: relative; padding-left: 20px; }
.legend span.green::before { content: ''; position: absolute; left: 0; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: #2ecc71; }
.legend span.yellow::before { content: ''; position: absolute; left: 0; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: #f1c40f; }
.legend span.red::before { content: ''; position: absolute; left: 0; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: #e74c3c; }
.legend button { margin-left: auto; padding: 8px 14px; background: #3498db; color: #fff; border: none; border-radius: 4px; cursor: pointer; }
.tracker-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tracker-table thead th { background: #1f2a57; color: #fff; padding: 12px; }
.tracker-table th, .tracker-table td { border: 1px solid #ddd; padding: 8px; text-align: center; }
.tracker-table th:nth-child(1) { width: 10%; }
.tracker-table th:nth-child(n+2):nth-child(-n+11) { width: 6%; }
.tracker-table th:nth-child(12), .tracker-table th:nth-child(13) { width: 15%; }
.percent { display: inline-block; }
.analysis { display: none; background: #eef; text-align: left; padding: 10px; }
.analysis ol { margin: 10px 0; padding-left: 20px; }

/* --- 2025-04-25 UI tweaks --- */
.tracker-table thead th,
.tracker-admin th{
    font-size: 14px;
}
.legend span,
.tracker-table td,
.analysis {
    color: #000;
}

/* ---------- Responsive mobile layout ---------- */
@media (max-width: 768px){
  .tracker-card{ padding:15px;}
  .legend{ flex-wrap:wrap; gap:8px;}
  .legend button{ width:100%; }

  .tracker-table thead{ display:none; }
  .tracker-table, .tracker-table tbody, .tracker-table tr, .tracker-table td{
      display:block;
      width:100%;
  }
  .tracker-table tr{
      margin-bottom:12px;
      border-bottom:2px solid #eee;
  }
  .tracker-table td{
      text-align:left;
      padding:8px 8px 8px 48%;
      position:relative;
  }
  .tracker-table td::before{
      position:absolute;
      left:10px;
      width:40%;
      white-space:nowrap;
      font-weight:600;
  }
  .tracker-table td:nth-child(1)::before{ content:'Місяць';}
  .tracker-table td:nth-child(2)::before{ content:'ДЗ №1';}
  .tracker-table td:nth-child(3)::before{ content:'ДЗ №2';}
  .tracker-table td:nth-child(4)::before{ content:'ДЗ №3';}
  .tracker-table td:nth-child(5)::before{ content:'ДЗ №4';}
  .tracker-table td:nth-child(6)::before{ content:'ДЗ №5';}
  .tracker-table td:nth-child(7)::before{ content:'ДЗ №6';}
  .tracker-table td:nth-child(8)::before{ content:'ДЗ №7';}
  .tracker-table td:nth-child(9)::before{ content:'ДЗ №8';}
  .tracker-table td:nth-child(10)::before{ content:'ДЗ №9';}
  .tracker-table td:nth-child(11)::before{ content:'ДЗ №10';}
  .tracker-table td:nth-child(12)::before{ content:'Слова (%)';}
  .tracker-table td:nth-child(13)::before{ content:'Граматика (%)';}

  
  /* show label for month */
  .tracker-table td:nth-child(1)::before{ content:'Місяць';}

  /* place analysis toggle button first on mobile */
  .legend button{ order:-1; margin-bottom:8px; }

  /* analysis rows */
  tr.analysis td{
      padding-left:8px;
  }
}


/* --------- Mobile layout overhaul v6 --------- */
@media (max-width: 768px){
  .tracker-table thead{ display:none !important;}

  /* each cell becomes two‑column flex row: label + value */
  .tracker-table td{
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:6px 10px;
      border:none;
      border-bottom:1px solid #eee;
      width:100%;
  }

  .tracker-table tr{
      border:1px solid #ddd;
      border-radius:6px;
      margin-bottom:14px;
      overflow:hidden;
  }

  /* labels (generated content) on the left, bold */
  .tracker-table td::before{
      font-weight:600;
      flex:0 0 48%;
  }

  /* month label */
  .tracker-table td:nth-child(1)::before{ content:'Місяць';}

  /* homework labels */
  .tracker-table td:nth-child(2)::before{ content:'ДЗ №1';}
  .tracker-table td:nth-child(3)::before{ content:'ДЗ №2';}
  .tracker-table td:nth-child(4)::before{ content:'ДЗ №3';}
  .tracker-table td:nth-child(5)::before{ content:'ДЗ №4';}
  .tracker-table td:nth-child(6)::before{ content:'ДЗ №5';}
  .tracker-table td:nth-child(7)::before{ content:'ДЗ №6';}
  .tracker-table td:nth-child(8)::before{ content:'ДЗ №7';}
  .tracker-table td:nth-child(9)::before{ content:'ДЗ №8';}
  .tracker-table td:nth-child(10)::before{ content:'ДЗ №9';}
  .tracker-table td:nth-child(11)::before{ content:'ДЗ №10';}
  .tracker-table td:nth-child(12)::before{ content:'Слова (%)';}
  .tracker-table td:nth-child(13)::before{ content:'Граматика (%)';}

  /* analysis rows styling */
  tr.analysis td{
      background:#fafafa;
      border:none;
      border-top:1px dashed #ccc;
      font-size:14px;
  }
}

/* --------- Hotfix v7: prevent text overlap on mobile --------- */
@media (max-width: 768px){
  /* stack label above value */
  .tracker-table td{
      display:block;
      padding:6px 10px;
      border:none;
      border-bottom:1px solid #eee;
  }
  .tracker-table td::before{
      display:block;
      margin-bottom:2px;
      font-weight:600;
  }
  /* make month value bold for clarity */
  .tracker-table td:nth-child(1) span{ font-weight:600; }

  /* improve spacing of analysis block */
  tr.analysis td{ padding:10px; }
}

/* --------- Fix v8: reset legacy absolute layout --------- */
@media (max-width: 768px){
  .tracker-table td{
      position:static !important;
      padding:8px 12px !important;
      display:block !important;
      font-size:16px;
      line-height:1.3;
  }
  .tracker-table td::before{
      position:static !important;
      left:auto !important;
      width:auto !important;
      display:block !important;
      margin-bottom:2px;
  }
  .tracker-table td span, .tracker-table td strong{
      display:inline;
      white-space:normal;
  }
  /* remove extra left offset from older rule */
}

/* --------- Mobile layout v9: label left, value right --------- */
@media (max-width: 768px){
  /* apply only to main data rows, не analysis */
  .tracker-table tr:not(.analysis) td{
      display:flex !important;
      justify-content:space-between;
      align-items:center;
      gap:8px;
      white-space:normal;
  }
  .tracker-table tr:not(.analysis) td::before{
      flex:0 0 auto;
      margin-bottom:0;
  }
  .tracker-table tr:not(.analysis) td span{
      flex:1 1 auto;
      text-align:right;
  }
}