/* INF-064-MOBILE-EXTENDED-UFR/1.7.0 - frontend only; mobile <=768px */
.inf064-mobile-card { display: none; }

@media (max-width: 768px) {
  .inf064-extended-section,
  .inf064-general-section {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .inf064-extended-section *,
  .inf064-general-section * {
    box-sizing: border-box;
    min-width: 0;
  }

  .inf064-extended-section [class*="overflow-x-auto"],
  .inf064-general-section [class*="overflow-x-auto"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .inf064-extended-table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .inf064-extended-table > thead { display: none !important; }

  .inf064-extended-table > tbody {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .inf064-extended-table tr.inf064-extended-row {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 0.65rem 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(100, 116, 139, 0.40) !important;
    border-radius: 0.9rem !important;
    overflow: hidden !important;
    background: rgba(255, 255, 255, 0.76) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  }

  html.dark .inf064-extended-table tr.inf064-extended-row {
    border-color: rgba(100, 116, 139, 0.48) !important;
    background: rgba(15, 23, 42, 0.72) !important;
    box-shadow: none !important;
  }

  /* INF-060 already has its own mobile card. Suppress that visual layer completely
     but keep the original TR/TD nodes so INF-063 row gesture handlers still bubble. */
  .inf064-extended-table tr.inf064-extended-row::before,
  .inf064-extended-table tr.inf064-extended-row::after,
  .inf064-extended-table tr.inf064-extended-row > td::before,
  .inf064-extended-table tr.inf064-extended-row > td::after {
    content: none !important;
    display: none !important;
  }

  .inf064-extended-table tr.inf064-extended-row > td.inf064-original-cell {
    display: none !important;
  }

  .inf064-extended-table tr.inf064-extended-row > td.inf064-card-host {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    white-space: normal !important;
    overflow: visible !important;
    font-size: 0 !important;
  }

  .inf064-extended-table tr.inf064-extended-row > td.inf064-card-host > *:not(.inf064-mobile-card) {
    display: none !important;
  }

  .inf064-extended-table tr.inf064-extended-row > td.inf064-card-host > .inf064-mobile-card {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0.82rem 0.9rem 0.88rem !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    font-size: 1rem !important;
  }

  .inf064-mobile-name {
    margin: 0;
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 700;
    color: rgb(15, 23, 42);
    overflow-wrap: anywhere;
  }
  html.dark .inf064-mobile-name { color: rgb(248, 250, 252); }

  .inf064-mobile-identity {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.25rem 0.9rem;
    margin-top: 0.68rem;
    padding-top: 0.62rem;
    border-top: 1px solid rgba(100, 116, 139, 0.30);
    font-size: 0.88rem;
    line-height: 1.35;
    color: rgb(71, 85, 105);
  }
  html.dark .inf064-mobile-identity {
    border-top-color: rgba(100, 116, 139, 0.40);
    color: rgb(148, 163, 184);
  }

  .inf064-mobile-key { font-weight: 600; }
  .inf064-mobile-value { font-weight: 700; color: rgb(30, 41, 59); }
  html.dark .inf064-mobile-value { color: rgb(226, 232, 240); }

  .inf064-mobile-registry-date {
    width: 100%;
    margin-top: 0.62rem;
    padding: 0.60rem 0.68rem;
    border: 1px solid rgba(5, 150, 105, 0.34);
    border-radius: 0.65rem;
    background: rgba(16, 185, 129, 0.10);
    color: rgb(6, 95, 70);
    font-size: 0.88rem;
    line-height: 1.35;
  }
  html.dark .inf064-mobile-registry-date {
    border-color: rgba(52, 211, 153, 0.28);
    background: rgba(6, 78, 59, 0.52);
    color: rgb(167, 243, 208);
  }

  /* General Information width adaptation: retained from the visually confirmed v1.5 half. */
  .inf064-general-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }

  .inf064-general-table th,
  .inf064-general-table td {
    min-width: 0 !important;
    white-space: normal !important;
    padding-left: 0.4rem !important;
    padding-right: 0.4rem !important;
  }

  .inf064-general-table .inf064-general-type {
    width: auto !important;
    max-width: none !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    hyphens: auto;
  }

  .inf064-general-table thead .inf064-general-count[colspan] {
    width: 13.7rem !important;
    max-width: 13.7rem !important;
  }

  .inf064-general-table .inf064-general-count {
    width: 4.9rem !important;
    max-width: 4.9rem !important;
    text-align: right !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    font-variant-numeric: tabular-nums;
  }

  .inf064-general-table .inf064-general-other {
    width: 4.4rem !important;
    max-width: 4.4rem !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
    font-variant-numeric: tabular-nums;
  }
}

@media (max-width: 360px) {
  .inf064-extended-table tr.inf064-extended-row > td.inf064-card-host > .inf064-mobile-card {
    padding: 0.75rem 0.72rem 0.8rem !important;
  }
  .inf064-mobile-name { font-size: 0.94rem; }
  .inf064-mobile-identity,
  .inf064-mobile-registry-date { font-size: 0.82rem; }
  .inf064-general-table th,
  .inf064-general-table td {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
  }
  .inf064-general-table .inf064-general-count {
    width: 4.35rem !important;
    max-width: 4.35rem !important;
  }
  .inf064-general-table thead .inf064-general-count[colspan] {
    width: 11.95rem !important;
    max-width: 11.95rem !important;
  }
  .inf064-general-table .inf064-general-other {
    width: 3.8rem !important;
    max-width: 3.8rem !important;
  }
}

@media (max-width: 320px) {
  .inf064-general-table th,
  .inf064-general-table td {
    padding-left: 0.18rem !important;
    padding-right: 0.18rem !important;
    font-size: 0.69rem !important;
  }
  .inf064-general-table .inf064-general-count {
    width: 4rem !important;
    max-width: 4rem !important;
  }
  .inf064-general-table thead .inf064-general-count[colspan] {
    width: 10.9rem !important;
    max-width: 10.9rem !important;
  }
  .inf064-general-table .inf064-general-other {
    width: 3.45rem !important;
    max-width: 3.45rem !important;
  }
}