/* public/css/responsive.css */

/* 基本設定 */
:root{
    --accent: #2563eb;   /* ボタン/チェックの基調色 */
    --muted:  #64748b;   /* 補助テキスト */
    --gap:    12px;
  }
  *{ box-sizing: border-box; }
  html, body{ max-width:100%; overflow-x:hidden; }
  img, svg{ max-width:100%; height:auto; display:block; }

  /* テキスト・ボタンのちょい調整 */
  .btn{ line-height:1.1; }
  .pill{ white-space:nowrap; }

  /* ツールバー/フィルターバー：折り返し対応 */
  .toolbar,
  .filterbar{
    display:flex;
    flex-wrap:wrap;
    gap: var(--gap);
    align-items: flex-end;
  }

  /* フォームフィールドの並びと最小幅 */
  .field{
    min-width:220px;
    flex: 1 1 260px;
  }

  /* アイコン付きインプット（既存の .input-icon を活かす） */
  .input-icon{ position:relative; }
  .input-icon .icon{
    position:absolute; left:10px; top:50%; transform:translateY(-50%);
    width:18px; height:18px; pointer-events:none; opacity:.55;
  }
  .input-icon input, .input-icon select{
    padding-left:34px;
  }

  /* 横並びエリア .row はスマホで縦積み */
  .row{
    display:flex;
    gap: 24px;
    flex-wrap: wrap;
  }

  /* テーブルはスマホで“横スクロール” */
  .table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table{
    width:100%;
    border-collapse:collapse;
    min-width: 760px; /* 狭い画面ではスクロールに逃がす */
  }
  th, td{ padding:8px 10px; white-space:nowrap; }

  /* チェックボックスを見やすく（既存inputを置換不要） */
  input[type="checkbox"],
  input[type="radio"]{
    width: 20px; height: 20px;
    accent-color: var(--accent);
  }

  /* スマホ最適化 */
  @media (max-width: 1024px){
    .field{ flex:1 1 300px; }
  }

  @media (max-width: 768px){
    /* フィールドは全幅に */
    .field{ flex: 1 1 100%; min-width:0; }

    /* アクションボタンを横並び→折り返し */
    .actions{ display:flex; gap:8px; flex-wrap:wrap; width:100%; }

    /* ボタン少し大きめに */
    .btn{ padding:10px 14px; }

    /* 余白調整 */
    .toolbar, .filterbar{ gap:10px; }

    /* テーブル最小幅を少し下げる */
    table{ min-width: 640px; }

    /* チェックボックス押しやすく */
    input[type="checkbox"], input[type="radio"]{ width:22px; height:22px; }
  }

  /* 便利：フィルター部の“年月のボタンを下/上”の順序入替
     （必要に応じて有効化。既存の order 指定を上書きしたい場合） */
  /*
  .field .actions{ order: 2; }
  .field .input-icon{ order: 1; width:100%; }
  */