/* 全店の販売状況（公開・サイネージ兼用）
   目的は「いま、どこで何が買えるか」。買える店を先に、完売の店は下にまとめて薄く出す。
   色は店舗画面（shop/css/shop.css）とそろえる。CSS は `&` の入れ子で書く（ルート CLAUDE.md の規約） */

:root {
    --line: #d8d8d8;
    --ink: #222;
    --muted: #6b6b6b;
    --bg: #f6f6f7;
    --accent: #0e438b;
    --danger: #b3261e;
    --warn: #b06a00;
    --ok: #2e7d32;
}

/* 続けてタップしたときのダブルタップ拡大を止める（→ shop.css と同じ） */
html {
    touch-action: manipulation;
}

* {
    box-sizing: border-box;
    font-family: system-ui, -apple-system, 'Segoe UI', 'Hiragino Sans', sans-serif;
}

body {
    background-color: var(--bg);
    color: var(--ink);
    line-height: 1.5;
    margin: 0;
}

.hidden {
    display: none !important;
}

/* ---- 見出し ---- */

/* 見出しと検索欄をひとまとめにして上に固定（スクロールしても検索できる） */
.dash-top {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--bg);
    padding-bottom: .75rem;
    box-shadow: 0 2px 6px rgb(0 0 0 / .08);
}

.dash-header {
    background-color: #fff;
    border-bottom: 1px solid var(--line);
    padding: .9rem 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.5rem;

    & h1 {
        margin: 0;
        font-size: 1.3rem;
    }

    & .dash-back {
        color: var(--accent);
        font-size: .9rem;
        font-weight: bold;
        text-decoration: none;
        white-space: nowrap;
        padding: .3em .8em;
        border: 1px solid var(--accent);
        border-radius: 1em;
    }

    & .dash-updated {
        margin: 0;
        color: var(--muted);
        font-size: .85rem;
        font-variant-numeric: tabular-nums;
    }

    & .dash-offline {
        color: var(--warn);
    }

    & .dash-totals {
        display: flex;
        gap: 1.25rem;
        margin: 0 0 0 auto;

        & div {
            display: flex;
            align-items: baseline;
            gap: .3rem;
        }

        & dt {
            color: var(--muted);
            font-size: .8rem;
        }

        & dd {
            margin: 0;
            font-size: 1.3rem;
            font-weight: bold;
            font-variant-numeric: tabular-nums;
        }

        & .unit {
            font-size: .8rem;
            color: var(--muted);
        }
    }
}

.dash-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    padding: .9rem 1.25rem 0;
    max-width: 1400px;
    margin: 0 auto;

    & input[type="search"] {
        flex: 1 1 16rem;
        max-width: 26rem;
        font-size: 1rem;
        padding: .5em .75em;
        border: 1px solid var(--line);
        border-radius: .4rem;
        background-color: #fff;
    }

    & .dash-legend {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        margin: 0;
        font-size: .8rem;
    }
}

.dash-message {
    text-align: center;
    color: var(--muted);
    padding: 3rem 1rem;
}

.dash-section {
    max-width: 1400px;
    margin: 1.25rem auto 0;
    padding: 0 1.25rem;
    font-size: 1rem;
    color: var(--ok);

    &.closed {
        color: var(--muted);
        margin-top: 2rem;
    }
}

/* ---- 店ごとのカード ---- */

/* ★ カードは JS が列（.dash-col）に分けて詰める（→ dashboard.js pack）。
   表（grid）だと同じ段の一番高いカードに行の高さがそろい、短いカードの下が大きく空いたため。
   列の最小幅と間隔は JS も読むので変数にする（サイネージは下で大きくする） */
.dash-shops {
    --col-min: 19rem;
    --gap: 1rem;
    display: flex;
    align-items: flex-start;
    gap: var(--gap);
    padding: .75rem 1.25rem 1rem;
    max-width: 1400px;
    margin: 0 auto;

    & .dash-col {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: var(--gap);
    }

    /* 完売の店は薄く（下にまとめている） */
    &.closed .shop {
        opacity: .6;
    }
}

.shop {
    background-color: #fff;
    border: 1px solid var(--line);
    border-radius: .6rem;
    overflow: hidden;

    /* 状態を左端の色で見分ける */
    border-left: 6px solid var(--ok);

    &.is-few {
        border-left-color: var(--warn);
    }

    &.is-soldout {
        border-left-color: var(--line);
    }

    /* 開催日の前（準備中） */
    &.is-preparing {
        border-left-color: #9fb3c8;
    }

    & .shop-head {
        padding: .7rem 1rem .5rem;
        border-bottom: 1px solid var(--line);
    }

    & .shop-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
    }

    & .shop-name {
        margin: 0;
        font-size: 1.1rem;
        line-height: 1.3;
    }

    & .shop-sub {
        margin: .15rem 0 0;
        color: var(--muted);
        font-size: .8rem;
    }

    & .shop-note {
        margin: 0;
        padding: .8rem 1rem;
        color: var(--muted);
    }

    & .items {
        list-style: none;
        margin: 0;
        padding: 0;
    }
}

.item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: .75rem;
    padding: .5rem 1rem;
    border-bottom: 1px solid #eee;

    &:last-child {
        border-bottom: none;
    }

    & .item-name {
        font-weight: bold;
        overflow-wrap: anywhere;
    }

    & .item-price {
        color: var(--muted);
        font-variant-numeric: tabular-nums;
    }

    &.is-soldout {
        & .item-name,
        & .item-price {
            color: #aaa;
            text-decoration: line-through;
        }
    }
}

.badge {
    display: inline-block;
    padding: .05em .7em;
    border-radius: 1em;
    font-size: .78rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;

    &.open {
        background-color: #e8f3e9;
        color: var(--ok);
        border: 1px solid #bcdcbf;
    }

    &.few {
        background-color: #fff3dc;
        color: var(--warn);
        border: 1px solid #ecd3a0;
        font-weight: bold;
    }

    &.soldout {
        background-color: #eee;
        color: var(--muted);
        border: 1px solid var(--line);
    }

    &.preparing {
        background-color: #eef3f8;
        color: #4a6076;
        border: 1px solid #c9d6e3;
    }
}

/* ---- サイネージ（?signage=1）：離れて見るので大きく。検索は出さない ---- */

body.signage {
    & .dash-tools input[type="search"] {
        display: none;
    }

    & .dash-header {
        padding: 1.2rem 2rem;

        & h1 {
            font-size: 2.2rem;
        }

        & .dash-updated {
            font-size: 1.1rem;
        }

        & .dash-totals {
            & dd {
                font-size: 2rem;
            }

            & dt,
            & .unit {
                font-size: 1rem;
            }
        }
    }

    & .dash-tools {
        padding: 1rem 2rem 0;
        max-width: none;

        & .dash-legend {
            font-size: 1rem;
        }
    }

    & .dash-section {
        max-width: none;
        padding: 0 2rem;
        font-size: 1.5rem;
    }

    & .dash-shops {
        --col-min: 26rem;
        --gap: 1.25rem;
        padding: 1rem 2rem 1.5rem;
        max-width: none;
    }

    & .shop-name {
        font-size: 1.6rem;
    }

    & .shop-sub,
    & .shop-note {
        font-size: 1.1rem;
    }

    & .item {
        padding: .7rem 1.2rem;
        font-size: 1.35rem;
    }

    & .badge {
        font-size: 1rem;
    }
}

/* ---- 公開を止めたとき（全体設定 dashboard_enabled。→ dashboard.js showClosed） ---- */

body.dash-closed {
    & .dash-tools,
    & .dash-updated {
        display: none;
    }
}

/* ---- 開催日の前の案内（全店「準備中」。→ api/dashboard.php の preparing） ---- */

.dash-prep {
    max-width: 1400px;
    margin: 1rem auto 0;
    padding: .8rem 1.25rem;
    box-sizing: border-box;
    background-color: #eef3f8;
    border: 1px solid #c9d6e3;
    border-radius: .5rem;
    color: #34495e;
    font-size: .95rem;
    line-height: 1.7;
}