/* リセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 全体 */
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: #f8f9fa;
  padding: 24px;
  max-width: 960px;
  font-size: 0.9rem;
  margin: auto;
  color: #212529;
}

/* フォーム */
form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

form input[type="text"],
form input[type="number"],
form select,
form button,
.action-buttons button {
  padding: 3px 8px;  /* 上下のパディングを小さく */
  font-size: 0.85rem;
  border: 1px solid #ced4da;
  border-radius: 4px;
  background-color: #fff;
  margin-right: 6px;
  transition: border-color 0.2s, box-shadow 0.2s;
  height: 30px; /* 高さを統一 */
}

form input[type="text"],
form input[type="number"],
form select {
  flex: 1 0 150px;
}

/* ボタン */
form button {
  background-color: #0d6efd;
  color: white;
  border: none;
}

form button:hover,
.action-buttons button:hover {
  background-color: #0b5ed7;
}

.action-buttons button {
  background-color: #6c757d;
  color: white;
  border: none;
}

.action-buttons button:hover {
  background-color: #5a6268;
}

/* テーブル */
table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 8px;
  overflow: hidden;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

th, td {
  border: 1px solid #dee2e6;
  padding: 4px 8px;  /* 上下のパディングを小さく */
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.2;
  vertical-align: middle; /* セル内の内容を中央寄せ */
  height: 30px; /* 行の高さを統一 */
}

th {
  background-color: #f1f3f5;
  color: #343a40;
  font-weight: 600;
}

td input[type="number"] {
  width: 100%;
  height: 30px; /* 入力フィールドの高さを統一 */
  font-size: 0.88rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  padding: 4px 8px; /* 入力フィールドのパディングを調整 */
}

#asset-table th:nth-child(1) { width: 20%; }
#asset-table th:nth-child(2) { width: 15%; }
#asset-table th:nth-child(3) { width: 10%; }
#asset-table th:nth-child(4) { width: 20%; }
#asset-table th:nth-child(5) { width: 20%; }
#asset-table th:nth-child(6) { width: 15%; }

#asset-table td:nth-child(5) {
  text-align: right;
}




@media (max-width: 600px) {
  body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: hidden;
    font-size: calc(0.85rem * 1.5);
  }

  .container-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .container {
    width: max-content;
    min-width: 800px; /* グラフ・テーブル共通の基準幅 */
    box-sizing: border-box;
  }

  form {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    width: max-content;
    margin-bottom: 14px;
  }

  form input[type="text"] {
    flex: 0 0 160px; 
    height: 30px;
    font-size: calc(0.85rem * 1.3);
    padding: 4px 6px;
    box-sizing: border-box;
  }

  form input[type="number"],
  form select,
  form button {
    height: 30px;
    font-size: calc(0.85rem * 1.3);
    padding: 4px 6px;
    flex: 0 0 auto;
    box-sizing: border-box;
  }

  .action-buttons button {
    height: 30px;
    font-size: calc(0.85rem * 1.3);
    padding: 4px 6px;
    flex: 0 0 auto;
    box-sizing: border-box;
  }

  table {
    border-collapse: collapse;
    width: 800px; /* グラフと同じ横幅に合わせる */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
  }

  th,
  td {
    padding: 6px 8px;
    font-size: calc(0.85rem * 1.5);
    text-align: center;
    white-space: nowrap;
  }

  td input[type="number"] {
    width: 100%;
    font-size: calc(0.85rem * 1.5);
    padding: 4px 6px;
    height: 28px;
    box-sizing: border-box;
  }

  /* グラフ部分 */
  .chart-wrapper {
    width: 100%;
    overflow-x: auto;
    /* transform-origin を左上に設定して縮小の基準を左上に */
    transform-origin: top left;
  }

  .chart-wrapper canvas {
    width: 800px !important;  /* 表と同じ横幅に固定 */
    height: auto !important;
    display: block;

    transform: scale(0.95);
  }
}