/* ==========================================================
   STT Post Production - Quality Layout V36
   ========================================================== */

:root {
  --stt-v36-font: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body.stt-v36-quality-page {
  --stt-v36-text: 13px;
}

/* ----------------------------------------------------------
   Heading / filter area
   ---------------------------------------------------------- */
body.stt-v36-quality-page .stt-v29-quality-exact-heading,
body.stt-v36-quality-page .stt-v36-quality-heading {
  font-family: var(--stt-v36-font) !important;
  font-size: 21px !important;
  line-height: 1.2 !important;
  font-weight: 770 !important;
  letter-spacing: -0.018em !important;
  font-style: normal !important;
}

body.stt-v36-quality-page .stt-v29-quality-eyebrow,
body.stt-v36-quality-page .stt-v36-eyebrow {
  font-family: var(--stt-v36-font) !important;
  font-size: 11.5px !important;
  line-height: 1.2 !important;
  font-weight: 780 !important;
  letter-spacing: .055em !important;
}

body.stt-v36-quality-page .stt-v29-quality-tabs,
body.stt-v36-quality-page .stt-v29-quality-tabs *,
body.stt-v36-quality-page .stt-v36-tabs,
body.stt-v36-quality-page .stt-v36-tabs * {
  font-family: var(--stt-v36-font) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

/* ----------------------------------------------------------
   QC cards
   ---------------------------------------------------------- */
body.stt-v36-quality-page .stt-v29-quality-card,
body.stt-v36-quality-page .stt-v36-card {
  box-sizing: border-box !important;
  overflow: visible !important;
}

/*
 * ROOT FIX:
 * V29 pushed the whole row to the right and forced min-width 720px.
 * V36 consumes the available card width and distributes it.
 */
body.stt-v36-quality-page .stt-v29-quality-meta-row,
body.stt-v36-quality-page .stt-v36-row {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns:
    minmax(270px, 1.65fr)
    minmax(92px, .55fr)
    minmax(190px, 1.05fr)
    minmax(115px, .67fr)
    minmax(115px, .67fr)
    minmax(120px, .70fr)
    26px !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow: visible !important;
}

/*
 * Every direct grid child is allowed to use its column.
 * This also neutralizes V29 fixed flex-basis.
 */
body.stt-v36-quality-page .stt-v29-quality-meta-row > *,
body.stt-v36-quality-page .stt-v36-row > * {
  box-sizing: border-box !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  overflow: visible !important;
}

/* Explicitly neutralize all V29 unit widths. */
body.stt-v36-quality-page .stt-v29-quality-type-unit,
body.stt-v36-quality-page .stt-v29-quality-assignee-unit,
body.stt-v36-quality-page .stt-v29-quality-deadline-unit,
body.stt-v36-quality-page .stt-v29-quality-delivery-unit,
body.stt-v36-quality-page .stt-v29-quality-status-unit,
body.stt-v36-quality-page .stt-v29-quality-tail-unit {
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
  flex: none !important;
}

/* ----------------------------------------------------------
   Customer/project first column
   ---------------------------------------------------------- */
body.stt-v36-quality-page .stt-v36-project-unit,
body.stt-v36-quality-page .stt-v36-project-unit * {
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: none !important;
}

body.stt-v36-quality-page .stt-v36-project-name,
body.stt-v36-quality-page .stt-v29-quality-project-name {
  display: inline !important;
  width: auto !important;
  max-width: none !important;
  font-family: var(--stt-v36-font) !important;
  font-size: 14.5px !important;
  line-height: 1.28 !important;
  font-weight: 780 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
}

body.stt-v36-quality-page .stt-v36-project-sub,
body.stt-v36-quality-page .stt-v29-quality-project-sub {
  font-family: var(--stt-v36-font) !important;
  font-size: 12.5px !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

body.stt-v36-quality-page .stt-v36-priority {
  display: inline-flex !important;
  align-items: center !important;
  margin-left: 7px !important;
  font-family: var(--stt-v36-font) !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
  font-weight: 780 !important;
  color: #d05f43 !important;
  white-space: nowrap !important;
}

/* ----------------------------------------------------------
   Meta columns
   ---------------------------------------------------------- */
body.stt-v36-quality-page .stt-v29-quality-meta-label,
body.stt-v36-quality-page .stt-v36-meta-label {
  display: block !important;
  margin: 0 0 4px !important;
  font-family: var(--stt-v36-font) !important;
  font-size: 11.5px !important;
  line-height: 1.2 !important;
  font-weight: 740 !important;
  letter-spacing: .02em !important;
  white-space: nowrap !important;
}

body.stt-v36-quality-page .stt-v29-quality-meta-value,
body.stt-v36-quality-page .stt-v36-meta-value {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  font-family: var(--stt-v36-font) !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

body.stt-v36-quality-page .stt-v29-quality-assignee-value,
body.stt-v36-quality-page .stt-v36-assignee {
  width: auto !important;
  max-width: none !important;
  font-size: 13px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
}

/* Deadline state: "Trễ 1 ngày", "Còn 7 ngày", etc. */
body.stt-v36-quality-page .stt-v36-time-state {
  display: block !important;
  margin-top: 3px !important;
  font-family: var(--stt-v36-font) !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 720 !important;
  white-space: nowrap !important;
}

body.stt-v36-quality-page .stt-v36-overdue {
  color: #d04d35 !important;
  font-weight: 790 !important;
}

/* ----------------------------------------------------------
   Type / status pills / buttons
   ---------------------------------------------------------- */
body.stt-v36-quality-page .stt-v36-type,
body.stt-v36-quality-page .stt-v36-status {
  font-family: var(--stt-v36-font) !important;
  font-size: 11.5px !important;
  line-height: 1.15 !important;
  font-weight: 670 !important;
  white-space: nowrap !important;
}

body.stt-v36-quality-page .stt-v29-quality-card button,
body.stt-v36-quality-page .stt-v29-quality-card [role="button"],
body.stt-v36-quality-page .stt-v36-card button,
body.stt-v36-quality-page .stt-v36-card [role="button"] {
  font-family: var(--stt-v36-font) !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
}

/* ----------------------------------------------------------
   Bottom card notes
   ---------------------------------------------------------- */
body.stt-v36-quality-page .stt-v29-quality-note,
body.stt-v36-quality-page .stt-v36-note {
  font-family: var(--stt-v36-font) !important;
  font-size: 12.5px !important;
  line-height: 1.4 !important;
}

/* Final floor for tiny leaf text INSIDE QC cards only. */
body.stt-v36-quality-page .stt-v36-readable {
  font-family: var(--stt-v36-font) !important;
  font-size: 12.5px !important;
  line-height: 1.35 !important;
}

/* ----------------------------------------------------------
   Medium desktop: reduce gaps/columns, never truncate customer.
   ---------------------------------------------------------- */
@media (max-width: 1350px) and (min-width: 901px) {
  body.stt-v36-quality-page .stt-v29-quality-meta-row,
  body.stt-v36-quality-page .stt-v36-row {
    grid-template-columns:
      minmax(230px, 1.5fr)
      90px
      minmax(170px, 1fr)
      108px
      108px
      112px
      24px !important;
    gap: 12px !important;
  }
}

/* ----------------------------------------------------------
   Tablet/mobile: wrap into readable blocks.
   ---------------------------------------------------------- */
@media (max-width: 900px) {
  body.stt-v36-quality-page .stt-v29-quality-meta-row,
  body.stt-v36-quality-page .stt-v36-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 12px 16px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.stt-v36-quality-page .stt-v36-project-unit {
    grid-column: 1 / -1 !important;
  }

  body.stt-v36-quality-page .stt-v36-tail {
    display: none !important;
  }

  body.stt-v36-quality-page .stt-v36-project-name,
  body.stt-v36-quality-page .stt-v29-quality-project-name {
    font-size: 14px !important;
  }

  body.stt-v36-quality-page .stt-v29-quality-meta-label,
  body.stt-v36-quality-page .stt-v36-meta-label {
    font-size: 11px !important;
  }

  body.stt-v36-quality-page .stt-v29-quality-meta-value,
  body.stt-v36-quality-page .stt-v36-meta-value {
    font-size: 12.5px !important;
  }
}