/* ============================================================
   CV Match — Responsive
   Breakpoint kiểm thử bắt buộc: 1440, 1280, 768, 390
   ============================================================ */

/* ---------- <= 1280px: giữ hành động chính, không tràn bảng ---------- */
@media (max-width: 1280px) {
  :root {
    --rail-w: 232px;
  }
  .content {
    padding: var(--s-6) var(--s-5) var(--s-9);
  }
  .grid--main-side {
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  }
  .grid--side-main {
    grid-template-columns: minmax(280px, 1fr) minmax(0, 1.6fr);
  }
  .metric__value {
    font-size: 25px;
  }
}

/* ---------- <= 1024px: gập panel đôi ---------- */
@media (max-width: 1024px) {
  .grid--main-side,
  .grid--side-main,
  .grid--split,
  .grid--3 {
    grid-template-columns: minmax(0, 1fr);
  }
  .grid--side-main > *:first-child {
    order: 2;
  }
  .grid--side-main > *:last-child {
    order: 1;
  }
  /* Trang liên hệ cần chọn người nhận trước khi soạn và xem trước thư. */
  .contactlayout > *:first-child {
    order: 1;
  }
  .contactlayout > *:last-child {
    order: 2;
  }
  .candhero__score {
    width: 88px;
    height: 88px;
  }
  .candhero__score svg {
    width: 88px;
    height: 88px;
  }
  .candhero__num {
    font-size: 25px;
  }
}

/* ---------- <= 900px: rail thành drawer ---------- */
@media (max-width: 900px) {
  .app,
  .app[data-rail="collapsed"] {
    grid-template-columns: minmax(0, 1fr);
  }
  .app > .rail {
    display: none;
  }
  .topbar .topbar__drawer-btn {
    display: inline-grid;
  }
  .topbar__context {
    display: none;
  }
  .topbar {
    padding-inline: var(--s-4);
    gap: var(--s-2);
  }
  .searchbox {
    flex: 1 1 auto;
    margin-left: var(--s-2);
    min-width: 0;
  }
  .searchbox__kbd {
    display: none;
  }
  .grid--2 {
    grid-template-columns: minmax(0, 1fr);
  }
  .authshell {
    grid-template-columns: minmax(0, 1fr);
  }
  .authshell__aside {
    display: none;
  }
  .authshell__main {
    padding: var(--s-7) var(--s-4);
  }
  .toaster {
    right: var(--s-3);
    left: var(--s-3);
    bottom: var(--s-3);
    width: auto;
  }
}

/* ---------- <= 768px: một cột, table density thấp ---------- */
@media (max-width: 768px) {
  .content {
    padding: var(--s-5) var(--s-4) var(--s-9);
  }
  h1 {
    font-size: 21px;
  }
  .grid {
    gap: var(--s-4);
  }
  .grid--kpi {
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  }
  .metric {
    padding: var(--s-4);
  }
  .metric__value {
    font-size: 23px;
  }
  .card__head,
  .card__body,
  .card__foot,
  .filterbar {
    padding-inline: var(--s-4);
  }
  .summarystrip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .summarystrip__cell:nth-child(2n) {
    border-right: 0;
  }
  .summarystrip__cell {
    border-bottom: 1px solid var(--c-border-subtle);
  }
  .filterrow {
    grid-template-columns: minmax(0, 1fr);
  }
  .jobhero {
    padding: var(--s-5) var(--s-4);
  }
  .jobhero__pct {
    font-size: 36px;
  }
  .modal__foot {
    flex-direction: column-reverse;
  }
  .modal__foot .btn {
    width: 100%;
  }
}

/* ---------- <= 480px: mobile, touch target >= 44px, không cuộn ngang ---------- */
@media (max-width: 480px) {
  :root {
    --topbar-h: 56px;
  }
  body {
    overflow-x: hidden;
  }
  .content {
    padding: var(--s-4) var(--s-3) var(--s-10);
  }
  .sysbanner {
    gap: var(--s-2);
    padding: 7px var(--s-3);
    font-size: 11px;
    line-height: 1.4;
  }
  .pagehead {
    margin-bottom: var(--s-5);
  }
  .state {
    padding: var(--s-7) var(--s-4);
  }
  .searchbox {
    margin-left: 0;
  }
  .searchbox input {
    padding-right: 34px;
  }
  .quicknav__panel {
    position: fixed;
    top: calc(var(--topbar-h) + 8px);
    right: var(--s-3);
    left: var(--s-3);
  }
  .grid--kpi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .metric__value {
    font-size: 21px;
  }
  .metric__top {
    margin-bottom: var(--s-2);
  }

  /* Touch target tối thiểu 44px */
  .btn,
  .iconbtn,
  .chip,
  .tab,
  .navitem,
  .menu__item {
    min-height: 44px;
  }
  .iconbtn {
    width: 44px;
    height: 44px;
  }
  .btn--sm {
    min-height: 40px;
  }

  .pagehead__actions {
    width: 100%;
  }
  .pagehead__actions .btn {
    flex: 1 1 auto;
  }

  .stepper {
    gap: var(--s-1);
  }
  .stepper__sep {
    display: none;
  }
  .stepper__item {
    padding: 6px var(--s-2);
    font-size: 11px;
  }

  .card__head,
  .card__body,
  .card__foot,
  .filterbar {
    padding-inline: var(--s-3);
  }
  .filterbar .input,
  .filterbar .select {
    width: 100%;
    min-width: 0;
  }

  .summarystrip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .summarystrip__cell:nth-child(2n) {
    border-right: 0;
  }
  .summarystrip__cell:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .summarystrip__cell:last-child,
  .summarystrip__cell:nth-last-child(2):nth-child(odd) {
    border-bottom: 0;
  }

  .candhero {
    padding: var(--s-4);
    gap: var(--s-4);
  }
  .criteriarow__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: var(--s-2) var(--s-3);
    align-items: center;
  }
  .criteriarow__name {
    grid-column: 1 / -1;
  }
  .criteriarow__score {
    min-width: 48px !important;
  }
  .authshell__main {
    padding: var(--s-5) var(--s-3);
  }
  .authcard .card {
    padding: var(--s-4);
  }

  .dropzone {
    padding: var(--s-6) var(--s-4);
  }
  .dropzone__sources {
    flex-direction: column;
    width: 100%;
  }
  .dropzone__sources .btn {
    width: 100%;
  }

  .weightrow__top {
    flex-wrap: wrap;
  }
  .weightrow__num {
    width: 100%;
  }
  .weightrow__num .input {
    text-align: left;
  }

  .kv {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px var(--s-2);
  }
  .kv dt {
    font: var(--t-micro);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    margin-top: var(--s-2);
  }

  .state {
    padding: var(--s-7) var(--s-3);
  }
  .state__actions {
    flex-direction: column;
    width: 100%;
  }
  .state__actions .btn {
    width: 100%;
  }
}

/* Candidate tables become recruiter cards on narrow screens. The table markup is
   retained so desktop sorting and screen-reader relationships remain intact. */
@media (max-width: 768px) {
  .tablewrap--candidates .table {
    min-width: 0;
    table-layout: fixed;
  }
  .tablewrap--candidates .table th:nth-child(4),
  .tablewrap--candidates .table td:nth-child(4) {
    display: none;
  }
  .tablewrap--candidates .table th,
  .tablewrap--candidates .table td {
    padding: 10px 8px;
  }
  .tablewrap--candidates .table th:nth-child(1) {
    width: 34%;
  }
  .tablewrap--candidates .table th:nth-child(2) {
    width: 46%;
  }
  .tablewrap--candidates .table th:nth-child(3) {
    width: 20%;
  }
  .tablewrap--candidates .verdictcell {
    min-width: 0;
    gap: 7px;
  }
  .tablewrap--candidates .verdictcell__body {
    min-width: 0;
  }
  .tablewrap--candidates .verdictcell__name,
  .tablewrap--candidates .verdictcell__sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .results-table {
    display: block;
    min-width: 0;
  }
  .results-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .results-table tbody {
    display: grid;
    gap: var(--s-3);
    padding: var(--s-3);
  }
  .results-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-2) var(--s-3);
    padding: var(--s-4);
    border: 1px solid var(--c-border-subtle);
    border-radius: var(--r-surface);
    box-shadow: var(--shadow-xs);
  }
  .results-table td {
    padding: 0;
    border: 0;
  }
  .results-table .resultcell--candidate {
    grid-column: 1;
    grid-row: 1;
  }
  .results-table .resultcell--score {
    grid-column: 2;
    grid-row: 1;
  }
  .results-table .resultcell--verdict {
    grid-column: 1;
    grid-row: 2;
  }
  .results-table .resultcell--warning {
    grid-column: 2;
    grid-row: 2;
  }
  .results-table .resultcell--evidence {
    grid-column: 1 / -1;
    grid-row: 3;
    padding-top: var(--s-2);
    border-top: 1px solid var(--c-border-subtle);
  }
  .results-table .resultcell--actions {
    grid-column: 1 / -1;
    grid-row: 4;
  }
  .results-table .resultcell--actions .btn {
    width: 100%;
  }
  .results-table .scorebar {
    min-width: 96px;
  }
}

/* ---------- Print ---------- */
@media print {
  .rail,
  .topbar,
  .toaster,
  .route-progress,
  .pagehead__actions,
  .filterbar {
    display: none !important;
  }
  .app {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .content {
    padding: 0;
  }
  .card {
    box-shadow: none;
    break-inside: avoid;
  }
}