/* 手机端网页适配 - 天禄 CVE 数据库 */

@media (max-width: 768px) {
  #main {
    padding-left: 8px;
    padding-right: 8px;
  }

  /* Bootstrap 栅格在手机上堆叠为整行（覆盖所有 col-md-*） */
  [class*="col-md-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  .cve_no_pad {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* 竖排标签容器在手机上横排显示 */
  .HeaderParent {
    width: 100% !important;
    display: block;
    text-align: left;
  }
  .HeaderParent .cve_row_header {
    display: inline-block;
    padding: 4px 10px;
    font-size: 0.85rem;
  }
  .HeaderParent .DivHelper {
    display: none !important;
  }

  /* 表格保持原生表格布局，整体缩小，可横向滚动而非单格占满屏 */
  .table-responsive,
  .dataTables_wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table {
    font-size: 0.7rem;
    width: auto !important;
    max-width: 100%;
    table-layout: auto;
  }
  .table th,
  .table td {
    padding: 3px 5px !important;
    white-space: nowrap;
    word-break: normal;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* 长文本列（摘要/内容）允许换行但限制宽度 */
  .cve_row_content,
  td:contains("summary") {
    white-space: normal !important;
    word-break: break-word;
    max-width: 200px;
  }

  /* CVE 详情页竖排标签在手机上改为横排小标题 */
  .HeaderParent {
    display: block;
    width: 100% !important;
  }
  .cve_row_header {
    display: inline-block;
    padding: 4px 8px;
  }
  .DivHelper {
    display: none;
  }
  .cve_row_content {
    padding: 8px 4px;
  }

  /* 导航栏搜索框占满一行 */
  .navbar .form-inline {
    width: 100%;
    margin: 0.5rem 0 0 0;
  }
  .navbar .form-inline #search {
    flex: 1 1 auto;
    width: 100%;
  }
  .navbar .form-inline .btn {
    white-space: nowrap;
  }

  .navbar-brand {
    font-size: 1rem;
  }
  .navbar-brand img {
    max-width: 140px !important;
  }

  .breadcrumb {
    font-size: 0.75rem;
    flex-wrap: wrap;
  }

  .back-to-top {
    bottom: 15px;
    right: 15px;
  }

  .cve_table.table-sm {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .navbar-brand img {
    max-width: 110px !important;
  }
  .table {
    font-size: 0.72rem;
  }
  h1, h2, h3 {
    font-size: 1.2rem;
  }
}