/* =====================================================
       期間選択バー
       店舗選択後に統計期間を指定するコントロールエリア
       クイックボタン（近7日/近30日/週/月）と
       カスタム日付入力（YYYYMMDD形式）を提供する
       ===================================================== */
    .period-bar {
      display: flex; align-items: center; gap: 12px;
      padding: 10px 24px; background: var(--card);
      border-bottom: 2px solid var(--border);
      flex-wrap: wrap;
    }
    .period-bar .hidden { display: none; }

    .period-lbl { font-size: 11px; font-weight: 700; color: var(--t3); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
    .period-quick { display: flex; gap: 4px; align-items: center; }
    .period-btn {
      padding: 5px 14px; border: 1px solid var(--border); border-radius: 7px;
      font-size: 12px; font-weight: 500; color: var(--t2); background: var(--card);
      cursor: pointer; font-family: inherit; transition: all 0.15s; white-space: nowrap;
    }
    .period-btn:hover { border-color: var(--accent); color: var(--accent); }
    .period-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
    .period-sep  { width: 1px; height: 18px; background: var(--border); flex-shrink: 0; }

    /* カスタム日付入力エリア */
    .period-custom {
      display: flex; align-items: center; gap: 6px;
      padding: 5px 12px; background: var(--muted);
      border: 1px solid var(--border); border-radius: 8px;
    }
    .period-custom.visible { display: flex; }
    .period-custom.hidden  { display: none; }
    .date-input {
      padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px;
      font-size: 12px; color: var(--t1); background: var(--card);
      font-family: inherit; width: 128px;
    }
    .date-input:focus { outline: none; border-color: var(--accent); }
    .date-range-sep { font-size: 12px; color: var(--t3); padding: 0 2px; }

    /* 現在の期間表示ラベル（右端） */
    .period-current-label {
      margin-left: auto; font-size: 11px; color: var(--t2); font-weight: 500;
      padding: 4px 12px; background: var(--accent-bg);
      border: 1px solid #c7d2fe; border-radius: 6px; white-space: nowrap;
    }
    .period-current-label .period-range { color: var(--t3); font-weight: 400; margin-left: 4px; }

    .period-apply {
        padding: 5px 10px;
        font-size: 11px;
        border-radius: 6px;
    }
    .period-apply {
        background: var(--accent);
        color: #fff;
        box-shadow: 0 1px 4px rgba(91, 106, 240, 0.25);
    }
    .period-apply {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 7px 14px;
        border-radius: 8px;
        cursor: pointer;
        font-size: 12px;
        font-weight: 600;
        border: none;
        font-family: inherit;
        transition: all 0.15s;
        white-space: nowrap;
        flex-shrink: 0;
    }