/* lab.css — доповнення для лабораторії "Таблиці та діаграми"
   (task.css + algo.css лишаються як в еталоні) */

/* Table wrapper: горизонтальний скрол на вузьких екранах */
.lab-table-wrap{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 18px;
  border: 1px solid rgba(227,230,239,.9);
  background: rgba(255,255,255,.72);
}
.lab-table{
  width: 100%;
  min-width: 520px;           /* щоб таблиця не ламалась */
  border-collapse: separate;
  border-spacing: 0;
  font-weight: 600;
}
.lab-table th, .lab-table td{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(227,230,239,.85);
}
.lab-table th{
  text-align: left;
  font-weight: 900;
  color: rgba(15,23,42,.82);
  background: rgba(99,102,241,.08);
}
.lab-table tr:last-child td{ border-bottom: 0; }
.lab-table th:first-child{ border-top-left-radius: 18px; }
.lab-table th:last-child{ border-top-right-radius: 18px; }

/* Inputs in table */
.lab-input{
  width: 100%;
  max-width: 180px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(227,230,239,.95);
  background: #fff;
  font: inherit;
  font-weight: 700;
  outline: none;
}
.lab-input:focus{
  border-color: rgba(29,25,180,.35);
  box-shadow: 0 10px 24px rgba(29,25,180,.06);
}

/* QA area */
.lab-qa{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(227,230,239,.9);
  background: rgba(15,23,42,.02);
}
.lab-qa .lab-qa__prompt{
  font-weight: 800;
  margin-bottom: 10px;
}

/* Select */
.lab-select{
  width: min(360px,100%);
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(227,230,239,.95);
  background: #fff;
  font: inherit;
  font-weight: 700;
}

/* Order buttons */
.order-wrap{ display:flex; flex-wrap:wrap; gap:10px; }
.order-chip{
  border:1px solid rgba(227,230,239,.95);
  background:#fff;
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 800;
  cursor: pointer;
  user-select:none;
  transition: transform .06s, border-color .15s, box-shadow .15s;
}
.order-chip:hover{
  transform: translateY(-1px);
  border-color: rgba(29,25,180,.35);
  box-shadow: 0 10px 24px rgba(29,25,180,.06);
}
.order-chip.selected{
  background: rgba(29,25,180,.08);
  border-color: rgba(29,25,180,.25);
}

/* Chart */
.lab-chart{
  border-radius: 18px;
  border: 1px solid rgba(227,230,239,.9);
  background: rgba(255,255,255,.72);
  padding: 10px;
}
.lab-chart canvas{
  width: 100% !important;
  height: 320px !important;
}
@media (max-width: 900px){
  .lab-table{ min-width: 460px; }
  .lab-chart canvas{ height: 280px !important; }
}
@media (max-width: 560px){
  .lab-table{ min-width: 420px; }
  .lab-chart canvas{ height: 240px !important; }
}

/* Make table readable when it scrolls */
.lab-table-wrap::-webkit-scrollbar{ height: 10px; }
.lab-table-wrap::-webkit-scrollbar-thumb{
  background: rgba(29,25,180,.18);
  border-radius: 999px;
}