/* ORICO Vanilla 共享响应式规则 */

/* 表格横向滚动 */
.table-wrap,
.score-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -4px;
  padding: 0 4px;
}

.table-wrap table,
.score-table-wrap table,
.score-table {
  min-width: 640px;
}

@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }

  .container {
    padding: 12px;
  }

  /* dashboard 手机：摘要优先，核心指标提前 */
  [data-page="dashboard"] .container {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  [data-page="dashboard"] .alert-banner { order: 1; }
  [data-page="dashboard"] .target-card { order: 2; padding: var(--space-4); }
  [data-page="dashboard"] .metrics { order: 3; margin-bottom: var(--space-4); }
  [data-page="dashboard"] .header { order: 4; padding: var(--space-4); margin-bottom: var(--space-3); }
  [data-page="dashboard"] .filter-bar { order: 5; margin-bottom: var(--space-4); }
  [data-page="dashboard"] .charts { order: 6; }
  [data-page="dashboard"] .tables-row { order: 7; }

  [data-page="dashboard"] .alert-banner:not(.expanded) .alert-body {
    display: none;
  }

  [data-page="dashboard"] .alert-header {
    margin-bottom: 0;
  }

  [data-page="dashboard"] .alert-action {
    width: 100%;
    margin-left: 0;
    text-align: center;
    padding-top: var(--space-2);
  }

  [data-page="dashboard"] .target-numbers .current {
    font-size: 1.5rem;
  }

  [data-page="dashboard"] .target-breakdown .chip {
    flex: 1 1 100%;
  }

  [data-page="dashboard"] .header h1 {
    font-size: 1rem;
    width: 100%;
    margin-bottom: var(--space-2);
  }

  [data-page="dashboard"] .controls {
    width: 100%;
    gap: var(--space-2);
  }

  [data-page="dashboard"] .controls .btn {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    padding: 10px 8px;
    font-size: 13px;
  }

  [data-page="dashboard"] .controls .btn-success {
    flex: 1 1 100%;
  }

  [data-page="dashboard"] .refresh-status {
    flex: 1 1 100%;
    justify-content: center;
    font-size: 12px;
  }

  [data-page="dashboard"] .metric {
    padding: var(--space-4);
  }

  [data-page="dashboard"] .metric-value {
    font-size: 1.5rem;
  }

  [data-page="dashboard"] .chart {
    padding: var(--space-4);
  }

  [data-page="dashboard"] .chart-header {
    margin-bottom: var(--space-3);
  }

  .form-row {
    grid-template-columns: 1fr !important;
  }

  .modal {
    padding: 20px 16px;
    width: 94%;
  }

  .btn,
  .nav-tab,
  .tab-btn {
    min-height: 40px;
  }

  /* dashboard 系列 */
  .metrics {
    grid-template-columns: 1fr !important;
  }

  .filter-select {
    min-width: 0;
    flex: 1 1 140px;
  }

  .target-breakdown .chip {
    min-width: 0;
    flex: 1 1 100%;
  }

  .time-filter {
    overflow-x: auto;
    flex-wrap: nowrap;
    max-width: 100%;
  }

  .bar-chart-viewport {
    min-height: 200px;
    padding-top: 18px;
  }

  .bar-chart {
    justify-content: flex-start;
    min-height: 160px;
  }

  .bar-item {
    height: 160px;
  }

  .bar-item {
    flex: 0 0 36px !important;
    min-width: 36px !important;
    min-height: 176px;
  }

  .bar-chart .bar {
    width: 28px !important;
    min-width: 28px !important;
  }

  .chart-container {
    overflow: visible;
    min-height: 200px;
  }

  .chart {
    overflow: visible;
  }

  /* admin */
  .header {
    flex-wrap: wrap;
    gap: 12px;
  }

  .header-toolbar {
    width: 100%;
  }

  .app-subnav {
    padding: var(--space-2) var(--space-3);
  }

  .nav-tabs,
  .tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .search-box input {
    width: 100%;
    min-width: 0;
    height: 40px;
  }

  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .search-box .btn {
    width: 100%;
  }

  .target-summary .right {
    min-width: 0;
  }

  /* kpi */
  #modalContent.modal-wide {
    width: 100% !important;
    max-width: 94vw;
  }

  .kpi-page .form-row,
  .detail-grid,
  .score-detail-inner {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 12px 10px;
  }

  .header h1,
  .app-title {
    font-size: 20px;
  }

  .bar-chart .bar {
    width: 24px !important;
    min-width: 24px !important;
  }

  .bar-item {
    flex: 0 0 32px !important;
    min-width: 32px !important;
  }

  .auth-page {
    padding: 12px;
    align-items: stretch;
  }

  .auth-shell {
    max-width: none;
    width: 100%;
  }

  .auth-card {
    padding: 20px 16px;
    border-radius: var(--radius-lg, 8px);
  }

  .auth-card h1 {
    font-size: 1.25rem;
  }

  .auth-card .tips {
    font-size: 11px;
    word-break: break-word;
  }

  .util-page .btn {
    display: block;
    width: 100%;
    margin: 0 0 8px;
  }

  .util-page {
    padding: 12px;
  }
}