/* ==================== レガシーテーブル（device_status_table等） ==================== */

/* 汎用テーブルスタイル（.store-table / .store-table-matrix 以外に適用） */
table:not(.store-table):not(.store-table-matrix) {
  background-color: var(--color-white, #ffffff);
  color: var(--color-text-dark, #3e3e3e);
  border-radius: var(--border-radius-md, 8px);
  box-shadow: var(--shadow-sm);
  margin: 30px auto;
  width: 98%;
  border: 1px solid var(--color-gray-500, #666);
  border-collapse: collapse;
  font-family: 'Noto Sans JP', sans-serif;
  table-layout: fixed;
}

table:not(.store-table):not(.store-table-matrix) thead th {
  background-color: var(--color-gray-100, #e8e8e8);
  color: var(--color-text-dark, #3e3e3e);
  font-weight: var(--font-weight-semibold, 600);
  text-align: center;
  padding: 12px;
  border-bottom: 1px solid var(--color-gray-500, #666);
}

table:not(.store-table):not(.store-table-matrix) tbody td {
  padding: 12px;
  text-align: center;
  border-bottom: 1px solid var(--color-gray-100, #eee);
}

table:not(.store-table):not(.store-table-matrix) th,
table:not(.store-table):not(.store-table-matrix) td {
  border: 1px solid var(--color-gray-500, #666);
}

/* テーブル列幅設定 */
table:not(.store-table):not(.store-table-matrix) th:nth-child(5),
table:not(.store-table):not(.store-table-matrix) td:nth-child(5) {
  width: 200px;
  white-space: nowrap;
  text-align: center;
  padding: 4px;
}

/* エラー行の背景色 */
.device-row.error {
  background-color: #f8d7da;
}

/* テーブル行の背景色（古いタイムスタンプ） */
tr.old-timestamp {
  border-left: 5px solid #ffb3ba;
  background-color: #ffe4e9;
}

/* 稼働率テキストの色分け */
.rate-high {
  color: var(--color-primary, #03172c);
  font-weight: var(--font-weight-bold, bold);
}

.rate-medium {
  color: var(--color-secondary, #c7661a);
  font-weight: var(--font-weight-bold, bold);
}

.rate-low {
  color: var(--color-error, #da615d);
  font-weight: var(--font-weight-bold, bold);
}

/* テーブルソート機能（レガシーテーブル用） */
table:not(.store-table):not(.store-table-matrix) th.sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 25px;
}

table:not(.store-table):not(.store-table-matrix) .sort-indicator {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--color-gray-400, #999);
}

table:not(.store-table):not(.store-table-matrix) th.sortable.asc .sort-indicator::after {
  content: '\25B2';
  color: var(--color-secondary, #c7661a);
}

table:not(.store-table):not(.store-table-matrix) th.sortable.desc .sort-indicator::after {
  content: '\25BC';
  color: var(--color-secondary, #c7661a);
}

table:not(.store-table):not(.store-table-matrix) th.sortable:not(.asc):not(.desc) .sort-indicator::after {
  content: '\21C5';
}

/* バッテリー量の視覚化 */
.device-row td:nth-child(5) {
  font-weight: var(--font-weight-semibold, 600);
  position: relative;
}

.device-row td:nth-child(5)::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  width: calc(100% - 20px);
  height: calc(100% - 8px);
  background: linear-gradient(to right,
      #d4edda 0%,
      #d4edda var(--battery-level, 0%),
      #f5f5f5 var(--battery-level, 0%),
      #f5f5f5 100%);
  border: 1px solid #ddd;
  border-radius: var(--border-radius-md, 8px);
  z-index: -1;
  opacity: 0.6;
}

/* バッテリー残量ホバー時の色分け */
.device-row td:nth-child(5):hover::before,
.device-row:hover td:nth-child(5)::before {
  opacity: 1;
  transition: opacity 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.device-row.battery-high td:nth-child(5):hover::before,
.device-row.battery-high:hover td:nth-child(5)::before {
  background: linear-gradient(to right,
      #a5b8a4 0%, #a5b8a4 var(--battery-level, 0%),
      #f5f5f5 var(--battery-level, 0%), #f5f5f5 100%);
  border-color: #8a9d89;
}

.device-row.battery-medium td:nth-child(5):hover::before,
.device-row.battery-medium:hover td:nth-child(5)::before {
  background: linear-gradient(to right,
      #b5a485 0%, #b5a485 var(--battery-level, 0%),
      #f5f5f5 var(--battery-level, 0%), #f5f5f5 100%);
  border-color: #a39475;
}

.device-row.battery-low td:nth-child(5):hover::before,
.device-row.battery-low:hover td:nth-child(5)::before {
  background: linear-gradient(to right,
      #a89393 0%, #a89393 var(--battery-level, 0%),
      #f5f5f5 var(--battery-level, 0%), #f5f5f5 100%);
  border-color: #9b8888;
}

/* ==================== レスポンシブ ==================== */

@media (max-width: 1024px) {
  table:not(.store-table):not(.store-table-matrix) {
    width: 100%;
    font-size: 14px;
    max-width: none;
  }

  table:not(.store-table):not(.store-table-matrix) thead th,
  table:not(.store-table):not(.store-table-matrix) tbody td {
    padding: 8px 4px;
  }
}

@media (max-width: 768px) {
  table:not(.store-table):not(.store-table-matrix) {
    width: 100%;
    min-width: 600px;
    font-size: 12px;
    margin: 0 auto;
    max-width: none;
  }

  table:not(.store-table):not(.store-table-matrix) thead th,
  table:not(.store-table):not(.store-table-matrix) tbody td {
    padding: 6px 3px;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  table:not(.store-table):not(.store-table-matrix) {
    min-width: 500px;
    font-size: 10px;
  }
}