/* admin-mobile.css — cleaned & consolidated (A/B/C mobile + minimal PC for C) */

/* ================= MOBILE ≤640 ================= */
@media (max-width: 640px){

  /* ===== A: midDraft ===== */
  #midDraft .vx-table{
    display:block; width:100%;
    border-radius:10px; padding:12px;
    border-collapse:separate; border-spacing:0;
  }
  #midDraft .vx-table thead{
    position:absolute; width:1px; height:1px;
    margin:-1px; padding:0; overflow:hidden;
    clip:rect(0 0 0 0); border:0;
  }
  #midDraft .vx-table tbody{display:block}
  #midDraft .vx-table tr{display:contents}
  #midDraft .vx-table td{
    display:block; padding:0; margin:0 0 10px 0;
    border:0; background:transparent;
  }
  #midDraft .vx-table td:last-child{ margin-bottom:0 }
  #midDraft .vx-table td .vx-cell,
  #midDraft .vx-table td .row,
  #midDraft .vx-table td .col,
  #midDraft .vx-table td .pair{ display:contents }

  /* ===== B: gpSection ===== */
  #gpSection .vx-table{
    display:flex; flex-direction:column;
    gap:10px; width:100%; box-sizing:border-box;
    border-radius:10px; padding:12px;
    border-collapse:separate; border-spacing:0;
  }
  #gpSection .vx-table thead{
    position:absolute; width:1px; height:1px!;
    margin:-1px; padding:0; overflow:hidden;
    clip:rect(0 0 0 0); border:0;
  }
  #gpSection .vx-table tbody{display:contents}
  #gpSection .vx-table tr{display:contents}
  #gpSection .vx-table td{
    display:block; padding:0; margin:0 0 10px 0;
    border:0; background:transparent; box-sizing:border-box;
  }
  #gpSection .vx-table td:last-child{ margin-bottom:0 }
  #gpSection .vx-table td>.vx-cell,
  #gpSection .vx-table td .row,
  #gpSection .vx-table td .col,
  #gpSection .vx-table td .pair{ display:contents }

  /* Порядок карточек B: B1,B4,B2,B5,B3,B6 */
  #gpSection .vx-table td:nth-of-type(1){order:1}
  #gpSection .vx-table td:nth-of-type(4){order:2}
  #gpSection .vx-table td:nth-of-type(2){order:3}
  #gpSection .vx-table td:nth-of-type(5){order:4}
  #gpSection .vx-table td:nth-of-type(3){order:5}
  #gpSection .vx-table td:nth-of-type(6){order:6}

  /* ===== C: tpSection ===== */
  #tpSection .vx-table{
    display:flex; flex-direction:column;
    gap:8px; row-gap:8px;
    padding:0; border:0; border-radius:0;
    width:100%; box-sizing:border-box;
  }
  #tpSection .vx-table thead{
    position:absolute; width:1px; height:1px;
    margin:-1px; padding:0; overflow:hidden;
    clip:rect(0 0 0 0); border:0!;
  }
  #tpSection .vx-table tbody{display:contents}
  #tpSection .vx-table tr{display:contents}
  #tpSection .vx-table td{
    display:block; margin:0; box-sizing:border-box;
    padding:12px; border-radius:10px;
    background:var(--surface); border:1px solid var(--border);
  }
  #tpSection .vx-table td>.vx-cell,
  #tpSection .vx-table td .row,
  #tpSection .vx-table td .col,
  #tpSection .vx-table td .pair{ display:contents }

  /* Порядок C (новая структура с объединениями):
     1) [C2+C1], 2) [C4+C5], 3) [C7+C8], 4) [C3+C6+C9] */
  #tpSection .vx-table > tbody > tr:nth-of-type(1) > td.pair-td{ order:1; }
  #tpSection .vx-table > tbody > tr:nth-of-type(2) > td.pair-td{ order:2; }
  #tpSection .vx-table > tbody > tr:nth-of-type(3) > td.pair-td{ order:3; }
  #tpSection .vx-table > tbody > tr:nth-of-type(1) > td.tariff-td{ order:4; }

  /* Внутри объединённых карточек на мобиле — простая колонка */
  #tpSection .pair-col{ display:block; margin:0 0 8px 0; }
  #tpSection .pair-col:last-child{ margin-bottom:0; }
  #tpSection .tariff-td .tcol{ display:block; }
  #tpSection .tariff-td .tsection{ margin:0 0 10px 0; }
  #tpSection .tariff-td .tsection:last-child{ margin-bottom:0; }

  /* Цвета (от темы) */
  html[data-theme="white"] #midDraft .vx-table,
  html[data-theme="black"] #midDraft .vx-table{ background:var(--surface); border:1px solid var(--border); }
  html[data-theme="white"] #gpSection .vx-table,
  html[data-theme="black"] #gpSection .vx-table{ background:var(--surface); border:1px solid var(--border); }
  html[data-theme="white"] #tpSection .vx-table td,
  html[data-theme="black"] #tpSection .vx-table td{ background:var(--surface); border:1px solid var(--border); }
  html[data-theme="white"] #midDraft .vx-cell label,
  html[data-theme="black"] #midDraft .vx-cell label,
  html[data-theme="white"] #gpSection .vx-cell label,
  html[data-theme="black"] #gpSection .vx-cell label,
  html[data-theme="white"] #tpSection .vx-cell label,
  html[data-theme="black"] #tpSection .vx-cell label{ color:var(--muted); }
}

/* ================= PC ≥641 ================= */
@media (min-width: 641px){
  /* Горизонтальные пары в объединённых ячейках */
  #tpSection td.pair-td .pair{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    align-items:end;
  }
  #tpSection td.pair-td .pair-col > label{ display:block; }

  /* Правая карточка (Тариф+Silver+Gold) — одна карта с тремя секциями */
  #tpSection td.tariff-td .tcol{
    display:grid;
    grid-template-rows:auto auto auto;
    gap:12px;
  }
  #tpSection td.tariff-td .tsection > label{ display:block; }
}

====

/* Мобилка ≤640px: белая тема — выбранная строка без заливки, только контур */
@media (max-width: 640px){
  html[data-theme="white"] #tpSection .vx-table tbody tr.is-selected td,
  html[data-theme="white"] #tpSection .vx-table tbody tr[aria-selected="true"] td{
    background: transparent;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
    border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
    border-radius: 10px;
  }

  /* опционально: подсветка активной «внутренней» ячейки по фокусу */
  html[data-theme="white"] #tpSection .vx-table td:focus-within{
    background: transparent;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
    border-radius: 10px;
  }
}