/* ==========================================================================
       CSS セクション：全体設定・カラーパレット
       ========================================================================== */
    :root {
      /* やわらかく清潔感のあるカラーパレット */
      --color-primary: #8d6e63; /* ブラウン */
      --color-secondary: #e5989b; /* くすみピンク（少し上品に調整） */
      --color-accent: #f8edeb; /* 薄いピンク・ベージュ系 */
      --color-bg: #faf9f8; /* 白に近い微ベージュ */
      --color-surface: #ffffff; /* カード背景 */
      --color-text: #4a3f35; /* 濃いブラウン（テキスト） */
      --color-text-light: #8e8071; /* 薄い文字色 */
      --color-border: #e6dfd9; /* 境界線 */
      --color-success: #81c784;
      --color-error: #d87b7b; /* 強すぎない赤 */
      --color-warning: #f4a261;
      
      --border-radius-sm: 8px;
      --border-radius-md: 12px;
      --border-radius-lg: 20px;
      --shadow-sm: 0 2px 8px rgba(141, 110, 99, 0.05);
      --shadow-md: 0 4px 16px rgba(141, 110, 99, 0.12);
      --transition: all 0.25s ease;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
      background-color: var(--color-bg);
      color: var(--color-text);
      line-height: 1.6;
      padding-bottom: 60px;
    }

    /* --- ユーティリティ --- */
    .container { max-width: 1400px; margin: 0 auto; padding: 0 15px; }
    .flex { display: flex; }
    .items-center { align-items: center; }
    .justify-between { justify-content: space-between; }
    .gap-10 { gap: 10px; }
    .gap-15 { gap: 15px; }
    .hidden { display: none !important; }
    .text-center { text-align: center; }

    h1, h2, h3 { color: var(--color-primary); font-weight: 600; }
    h1 { font-size: 1.3rem; }
    h2 { font-size: 1.1rem; margin-bottom: 12px; border-bottom: 2px solid var(--color-accent); padding-bottom: 4px; display: inline-block; }
    h3 { font-size: 1rem; margin-bottom: 8px; }

    /* ==========================================================================
       CSS セクション：ヘッダー・ダッシュボード
       ========================================================================== */
    header {
      background-color: var(--color-surface);
      padding: 10px 0;
      box-shadow: var(--shadow-sm);
      position: sticky;
      top: 0;
      z-index: 100;
    }
    .header-inner { display: flex; justify-content: space-between; align-items: center; }
    .header-actions { display: flex; align-items: center; gap: 8px; }

    /* バッジ共通 */
    .badge {
      font-size: 0.7rem; padding: 2px 8px; border-radius: var(--border-radius-lg);
      font-weight: bold; white-space: nowrap; display: inline-block;
    }
    .api-status-badge { font-size: 0.7rem; padding: 3px 10px; border-radius: var(--border-radius-lg); font-weight: bold; }
    .status-ok { background-color: #e8f5e9; color: #2e7d32; }
    .status-none { background-color: #ffebee; color: #c62828; }
    .badge-first { background-color: #fff3e0; color: #e65100; border: 1px solid #ffe0b2; }
    .badge-status-reserved { background-color: #e3f2fd; color: #1565c0; }
    .badge-status-visited { background-color: #e8f5e9; color: #2e7d32; }
    .badge-status-canceled { background-color: #ffebee; color: #c62828; }

    /* ダッシュボード（コンパクト化） */
    .dashboard-container {
      background-color: var(--color-surface);
      border-radius: var(--border-radius-md);
      padding: 12px 15px;
      margin-top: 15px;
      box-shadow: var(--shadow-sm);
    }
    .dashboard-grid {
      display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
    }
    
    .stat-card {
      background-color: var(--color-accent); padding: 8px 12px; border-radius: var(--border-radius-sm);
      flex: 1; min-width: 110px; text-align: center;
      cursor: pointer;
      transition: var(--transition);
    }
    .stat-card:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow-sm);
    }
    .stat-card.filter-active {
      outline: 2px solid var(--color-secondary);
      background-color: #fff0f3;
    }
    .stat-card.disabled-filter {
      cursor: default;
      opacity: 0.65;
    }
    
    .stat-title { font-size: 0.75rem; color: var(--color-text-light); }
    .stat-value { font-size: 1.25rem; font-weight: bold; color: var(--color-primary); line-height: 1.2; }

    .filter-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background-color: var(--color-accent);
      color: var(--color-primary);
      border-radius: var(--border-radius-lg);
      padding: 4px 10px;
      font-size: 0.75rem;
      font-weight: bold;
      margin-bottom: 8px;
    }

    .filter-label button {
      padding: 2px 8px;
      font-size: 0.7rem;
      background-color: transparent;
      border: 1px solid var(--color-border);
      color: var(--color-primary);
    }

    /* ==========================================================================
       CSS セクション：メインレイアウト
       ========================================================================== */
    .main-layout {
      display: flex; flex-direction: column; gap: 15px; margin-top: 15px;
    }

    @media (min-width: 1024px) {
      body {
        overflow: hidden;
        padding-bottom: 0;
      }

      .container {
        max-width: 1440px;
      }

      .main-layout {
        display: grid;
        grid-template-columns: 330px minmax(0, 1fr) 310px;
        gap: 12px;
        align-items: stretch;
        height: calc(100vh - 155px);
        margin-top: 12px;
      }

      .form-area,
      .list-area,
      .calendar-area {
        display: flex;
        min-height: 0;
      }

      .form-area section,
      .list-area section,
      .calendar-area section {
        width: 100%;
        height: 100%;
        min-height: 0;
        padding: 12px 14px;
        overflow: hidden;
      }

      .calendar-area {
        position: static;
      }
    }

    section { background-color: var(--color-surface); border-radius: var(--border-radius-md); padding: 15px; box-shadow: var(--shadow-sm); }

    /* ==========================================================================
       CSS セクション：フォーム要素（コンパクト化）
       ========================================================================== */
    .form-area section h2,
    .list-area section h2,
    .calendar-area section h2 {
      margin-bottom: 8px;
      font-size: 1rem;
    }

    .form-section-title {
      font-size: 0.78rem;
      font-weight: bold; color: var(--color-primary);
      margin: 7px 0 5px; border-left: 3px solid var(--color-secondary); padding-left: 6px;
    }
    
    .form-row {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
    }
    @media (min-width: 1024px) {
      .form-row {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }
    }

    .form-group { margin-bottom: 6px; }
    
    label { display: block; font-weight: 600; margin-bottom: 2px; font-size: 0.73rem; color: var(--color-text-light); }
    
    input[type="text"],
    input[type="tel"],
    input[type="date"],
    input[type="datetime-local"],
    select,
    textarea {
      width: 100%; padding: 5px 8px; border: 1px solid var(--color-border); border-radius: 6px;
      font-family: inherit; font-size: 0.82rem; color: var(--color-text); transition: var(--transition);
      background-color: var(--color-bg);
    }
    
    input:focus, select:focus, textarea:focus {
      outline: none; border-color: var(--color-secondary); box-shadow: 0 0 0 2px rgba(229, 152, 155, 0.2); background-color: #fff;
    }
    
    textarea { resize: vertical; min-height: 34px; height: 36px; max-height: 42px; }
    
    .checkbox-label { display: flex; align-items: center; gap: 6px; font-weight: normal; cursor: pointer; font-size: 0.78rem;}
    .checkbox-label input { width: 14px; height: 14px; accent-color: var(--color-secondary); }
    
    .update-notice {
      background-color: #fce4ec; color: #ad1457; padding: 8px 10px; border-radius: 6px;
      font-size: 0.8rem; margin-bottom: 12px; font-weight: bold; border-left: 4px solid #d81b60;
    }

    .form-note {
      font-size: 0.63rem;
      color: var(--color-text-light);
      line-height: 1.25;
      margin: -3px 0 5px;
    }

    /* ==========================================================================
       CSS セクション：ボタン
       ========================================================================== */
    button {
      padding: 5px 12px; border: none; border-radius: var(--border-radius-lg); font-size: 0.85rem; font-weight: bold;
      cursor: pointer; transition: var(--transition); display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    }
    button:disabled { opacity: 0.6; cursor: not-allowed; }
    
    #reservation-form button[type="submit"] {
      height: 34px;
      margin-top: 6px !important;
    }

    /* 主操作ボタン */
    .btn-primary { background-color: var(--color-primary); color: white; }
    .btn-primary:hover:not(:disabled) { background-color: #72584e; }
    
    .btn-secondary { background-color: var(--color-secondary); color: white; }
    .btn-secondary:hover:not(:disabled) { background-color: #d18285; }

    /* 補助操作ボタン */
    .btn-outline { background-color: transparent; border: 1px solid var(--color-border); color: var(--color-text-light); }
    .btn-outline:hover:not(:disabled) { background-color: var(--color-bg); color: var(--color-primary); border-color: var(--color-primary); }
    
    /* 削除・キャンセル用（強すぎない赤） */
    .btn-danger-outline { background-color: transparent; border: 1px solid var(--color-error); color: var(--color-error); }
    .btn-danger-outline:hover:not(:disabled) { background-color: #fdf3f3; }

    /* サイズ調整 */
    .btn-small { padding: 4px 10px; font-size: 0.75rem; border-radius: 12px; }

    /* ==========================================================================
       CSS セクション：予約一覧・カード（強弱をつける）
       ========================================================================== */
    .search-bar { display: flex; gap: 8px; margin-bottom: 12px; }
    .search-bar input { flex-grow: 1; padding: 8px 12px; }
    
    .empty-state { text-align: center; padding: 30px 15px; color: var(--color-text-light); background-color: var(--color-bg); border-radius: var(--border-radius-md); border: 1px dashed var(--color-border);}
    .empty-icon { font-size: 2.5rem; margin-bottom: 8px; opacity: 0.6; }

    .list-panel {
      display: flex;
      flex-direction: column;
      min-height: 0;
      padding-right: 10px;
    }

    .list-panel h2,
    .list-panel .search-bar,
    .list-panel #selected-date-label {
      flex-shrink: 0;
    }

    .reservation-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
      flex: 1;
      min-height: 0;
      max-height: none;
      overflow-y: auto;
      padding-right: 5px;
    }

    /* スクロールバー装飾 */
    .reservation-list::-webkit-scrollbar { width: 6px; }
    .reservation-list::-webkit-scrollbar-thumb { background-color: var(--color-border); border-radius: 10px; }

    .reservation-card {
      background-color: var(--color-surface); border: 1px solid var(--color-border);
      border-radius: var(--border-radius-md); padding: 12px 15px; transition: var(--transition);
      box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    }
    .reservation-card:hover { box-shadow: var(--shadow-sm); border-color: #d2c6c0; transform: translateY(-1px);}
    
    .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
    .customer-name { font-size: 1.05rem; font-weight: bold; color: var(--color-primary); display: flex; align-items: center; gap: 6px;}
    
    /* 情報の強弱 */
    .main-info { background-color: var(--color-bg); padding: 8px 10px; border-radius: var(--border-radius-sm); margin-bottom: 8px; border-left: 3px solid var(--color-secondary);}
    .main-info p { margin-bottom: 2px; font-size: 0.95rem; color: var(--color-text); }
    .info-label { font-size: 0.75rem; color: var(--color-text-light); margin-right: 4px; }
    
    .sub-info { font-size: 0.8rem; color: var(--color-text-light); display: grid; gap: 3px; padding: 0 4px;}
    .sub-info-row { display: flex; align-items: flex-start; }
    .sub-info-label { width: 65px; flex-shrink: 0; }
    
    .ai-comment-box { background-color: #fdf9fa; padding: 8px 12px; border-radius: var(--border-radius-sm); margin-top: 8px; font-size: 0.8rem; border: 1px solid #f6e1e5; color: #8e5a6b;}

    /* カード内ボタン整理 */
    .card-actions { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--color-border); display: flex; flex-direction: column; gap: 6px; }
    .card-actions-row { display: flex; flex-wrap: wrap; gap: 6px; }
    .card-actions-sub { justify-content: flex-start; }
    .card-actions-main { justify-content: flex-end; } /* 主操作は右寄せ */

    /* ==========================================================================
       CSS セクション：カレンダー
       ========================================================================== */
    .calendar-wrapper { margin-bottom: 15px; }
    .cal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
    .cal-month-title { font-weight: bold; font-size: 1rem; color: var(--color-primary); }
    .cal-nav { background: none; border: none; font-size: 1rem; cursor: pointer; color: var(--color-text-light); padding: 0 8px; }
    .cal-nav:hover { color: var(--color-secondary); }
    
    .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
    .cal-day-header { font-size: 0.7rem; font-weight: bold; color: var(--color-text-light); padding-bottom: 4px; }
    .cal-cell {
      aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
      font-size: 0.85rem; border-radius: 6px; cursor: pointer; transition: background-color 0.2s; position: relative;
    }
    .cal-cell:hover:not(.cal-empty) { background-color: var(--color-accent); }
    .cal-empty { cursor: default; }
    .cal-today { background-color: #fff0f5; font-weight: bold; color: var(--color-secondary); border: 1px solid var(--color-secondary); }
    .cal-selected { background-color: var(--color-primary) !important; color: white !important; }
    
    .cal-count { font-size: 0.6rem; color: #fff; background-color: var(--color-secondary); border-radius: 10px; padding: 1px 4px; margin-top: 1px; line-height: 1;}
    .cal-selected .cal-count { background-color: #fff; color: var(--color-primary); }

    /* 選択日の予約ミニリスト */
    .selected-res-list { margin-top: 10px; border-top: 1px solid var(--color-border); padding-top: 10px; }
    .mini-res-item { font-size: 0.8rem; padding: 6px; border-bottom: 1px dashed var(--color-border); display: flex; justify-content: space-between; align-items: center;}
    .mini-res-item:last-child { border-bottom: none; }
    .mini-time { font-weight: bold; color: var(--color-primary); margin-right: 4px; }
    
    .add-reservation-btn { width: 100%; margin-top: 10px; font-size: 0.8rem; }

    /* ==========================================================================
       CSS セクション：モーダル・その他
       ========================================================================== */
    .modal-overlay {
      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      background-color: rgba(74, 63, 53, 0.6); display: flex; justify-content: center; align-items: center;
      z-index: 1000; opacity: 0; visibility: hidden; transition: var(--transition); backdrop-filter: blur(2px);
    }
    .modal-overlay.active { opacity: 1; visibility: visible; }
    .modal-content {
      background-color: var(--color-surface); border-radius: var(--border-radius-md);
      width: 90%; max-width: 550px; max-height: 85vh; overflow-y: auto; padding: 20px;
      box-shadow: var(--shadow-md); transform: translateY(-15px); transition: var(--transition);
    }
    .modal-overlay.active .modal-content { transform: translateY(0); }
    .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
    .close-btn { background: none; border: none; font-size: 1.5rem; color: var(--color-text-light); cursor: pointer; padding: 0; line-height: 1;}

    /* 顧客一覧用 */
    .customer-list-container { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
    .customer-list-card { border: 1px solid var(--color-border); border-radius: var(--border-radius-sm); padding: 10px; font-size: 0.85rem; background-color: var(--color-bg);}
    .customer-list-card .flex-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }

    /* トースト */
    #toast-container { position: fixed; top: 20px; right: 20px; z-index: 1100; display: flex; flex-direction: column; gap: 10px; }
    .toast { padding: 10px 16px; border-radius: var(--border-radius-sm); color: white; font-weight: bold; font-size: 0.85rem; box-shadow: var(--shadow-md); opacity: 0; transform: translateY(-20px); animation: slideIn 0.3s forwards; }
    .toast.success { background-color: var(--color-success); }
    .toast.error { background-color: var(--color-error); }
    .toast.warning { background-color: var(--color-warning); color: #fff; }
    @keyframes slideIn { to { opacity: 1; transform: translateY(0); } }
    @keyframes fadeOut { to { opacity: 0; } }

    /* ==========================================================================
       印刷用 CSS (@media print)
       ========================================================================== */
    @media print {
      body * { visibility: hidden; }
      #print-area { display: block !important; visibility: visible; position: absolute; left: 0; top: 0; width: 100%; padding: 20mm; background-color: white; color: black; font-family: serif;}
      #print-area * { visibility: visible; }
      .print-title { font-size: 22px; text-align: center; margin-bottom: 20px; border-bottom: 1px solid #000; padding-bottom: 10px; }
      .print-section { margin-bottom: 20px; }
      .print-section-title { font-size: 14px; font-weight: bold; margin-bottom: 8px; background-color: #f0f0f0; padding: 4px; }
      .print-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
      .print-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
      .print-check-item { display: flex; align-items: center; gap: 5px; font-size: 12px; }
      .print-box { width: 12px; height: 12px; border: 1px solid #000; display: inline-block; }
      .print-line { border-bottom: 1px solid #000; width: 100%; display: inline-block; min-height: 16px; }
      .print-info-row { display: flex; margin-bottom: 8px; font-size: 13px; }
      .print-info-label { width: 100px; }
    }