/* prod_ready/webapp/static/style.css */

/* Updated Bootstrap import to match the multiangle style version */
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css");

/* Example custom overrides */
body {
    background-color: #f9f9f9;
}

h1,
h2,
h3 {
    color: #2c3e50;
}

.navbar {
    margin-bottom: 20px;
}

/* Table row highlight on selection (similar to multiangle) */
.table .selected-row {
    background-color: #cfe2ff !important;
    outline: 2px solid #72c272;
}

/* ────────────────────────────────────────────────
   Baggage 一覧テーブル: 文字を縦方向中央に揃える
   ────────────────────────────────────────────────*/
#baggageTable th,
#baggageTable td {
    vertical-align: middle;
    /* Bootstrap の align-middle 相当 */
}

/* ---------- Sorting Area: sortable header ---------- */
th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
th.sortable .indicator {
    margin-left: .25rem;
    font-size: .8em;
    opacity: .7;
}

/* =========================================================
   Sorting Area board (A/B/C/D) – responsive & non-overlapping
   ========================================================= */
:root {
    --sa-tile: clamp(44px, 5.2vw, 64px);
    --sa-gap:  clamp(6px, 0.9vw, 12px);
}
.layout-board {
    background-color: #0f0f10;
    color: #e9ecef;
    border-radius: 16px;
    padding: 24px;
    position: relative;
    margin-bottom: 2rem;       /* 下のテーブルと重ならないよう余白 */
    overflow: visible;
}
.layout-ring {
    position: relative;
    width: min(100%, 980px);
    margin: 0 auto;
    padding: clamp(56px, 6vw, 88px) clamp(48px, 5vw, 96px);
    border: 2px solid #555;
    border-radius: 18px;
    /* 高さを明示確保（絶対配置要素がはみ出しても親が高さを持つ） */
    aspect-ratio: 16 / 7;
    min-height: 360px;
    overflow: visible;
}
.center-belt {
    position: absolute; top: 50%; left: 50%;
    width: 62%; height: 40%; transform: translate(-50%, -50%);
    border: 2px solid #777; border-radius: 14px;
    z-index: 1; pointer-events: none;   /* タイル操作を邪魔しない */
}
.pos-row {
    position: absolute;
    display: flex; gap: var(--sa-gap);
    justify-content: center; margin: 0;
    z-index: 2;
}
.pos-col {
    position: absolute; top: 50%; transform: translateY(-50%);
    display: flex; gap: var(--sa-gap); flex-direction: column;
    z-index: 2;
}
.pos-col.left  { left: calc(var(--sa-gap) + 12px); }
.pos-col.right { right: calc(var(--sa-gap) + 12px); }
.pos-tile {
    width: var(--sa-tile); height: var(--sa-tile);
    border-radius: 8px;
    border: 1px solid #666;
    background: #2e3238; color: #e9ecef;
    font-weight: 700; font-size: clamp(12px, 1.05vw, 16px);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; position: relative; z-index: 3;
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.pos-tile.occupied { background: var(--bs-primary); color: #fff; border-color: var(--bs-primary); }
.pos-tile:hover  { filter: brightness(1.08); }
.pos-tile:focus  { outline: none; box-shadow: 0 0 0 .2rem rgba(13,110,253,.35); }
@media (max-width: 576px) {
  :root {
    --sa-tile: clamp(36px, 9vw, 56px);
    --sa-gap:  clamp(4px, 1.6vw, 10px);
  }
  .layout-ring {
    min-height: 280px;
    aspect-ratio: 16 / 12;
    padding: clamp(40px, 5vw, 64px) clamp(20px, 4vw, 48px);
  }
}