/* assets/style.css */

.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;   /* 横中央揃え */
}

.graph-and-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 1200px;  /* 中央寄せされる幅上限 */
}

.graph-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* 施工中ステータスの稼働アニメーション（●明滅＋ドット増加） */
.piling-active-indicator {
    display: inline-block;
    margin-right: 8px;
    animation: piling-pulse 1.6s ease-in-out infinite;
}

@keyframes piling-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.25; transform: scale(0.85); }
}

.piling-dots span {
    opacity: 0;
}

.piling-dots span:nth-child(1) { animation: piling-dot-1 1.6s infinite; }
.piling-dots span:nth-child(2) { animation: piling-dot-2 1.6s infinite; }
.piling-dots span:nth-child(3) { animation: piling-dot-3 1.6s infinite; }

@keyframes piling-dot-1 {
    0%, 24% { opacity: 0; }
    25%, 100% { opacity: 1; }
}

@keyframes piling-dot-2 {
    0%, 49% { opacity: 0; }
    50%, 100% { opacity: 1; }
}

@keyframes piling-dot-3 {
    0%, 74% { opacity: 0; }
    75%, 100% { opacity: 1; }
}

@media screen and (min-width: 768px) {
    .graph-and-info {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        box-sizing: border-box;
    }
    .graph-and-info > div {
        flex: 1;
        min-width: 0;
    }
    .graph-panel {
        flex: 1 1 auto;
    }
    .info-panel {
        flex: 0 0 400px;
        max-width: 400px;
        padding-left: 10px;
    }
}

/* 縦長画面（スマホ想定）：グラフを低くし、施工状況/本日の実績を
   「杭情報を表示」ボタンの下に移動する。graph-panel/info-panelの
   箱をdisplay:contentsで消して中身をgraph-and-infoのflex列に
   昇格させ、orderだけで並び替える（DOM構造・callback対象idは
   変更しない）。 */
@media screen and (max-width: 767.98px) {
    .live-scatter-container {
        height: 300px;
    }
    .live-scatter-graph {
        height: 100%;
    }
    .graph-panel,
    .info-panel {
        display: contents;
    }
    #piling-status,
    #today-achievement-button,
    #today-achievement-detail {
        order: 1;
    }
    #qr-result,
    #mobile-order-divider,
    #data-mode-container,
    #threshold-dropdown,
    #display-toggles-container,
    #nav-buttons-row,
    #gnss-info {
        order: 2;
    }
}