/* ========================================
   FFC納品書システム スタイルシート
   ======================================== */

/* リセット & 基本設定 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Arial, "Meiryo", sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    color: #333;
    line-height: 1.6;
}

/* コンテナ */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* ヘッダー */
/* ヘッダー（2026-07-28 平屋化・つねさんFB「上が場所を取りすぎ」）
   旧: タイトル2.5rem＋リンク行＋ユーザーバーの中央寄せ3段（実測 約260px）
   新: タイトル左・ユーザー情報右の flex 1行（約60px）。狭い画面は flex-wrap で自然に2段。
   ページ内リンク行（.company-info）はナビと重複する10ページで削除済み。残っているのは
   index.php の会社名と、ナビの無い5ページ（review/confirm/generate_pdf/
   user_management/password_change）の「戻る」リンクだけ＝サブタイトルとして横に並ぶ。 */
.header {
    background: white;
    padding: 12px 22px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 18px;
    text-align: left;
    margin-bottom: 14px;
}

.header h1 {
    font-size: 1.35rem;
    color: #5a67d8; /* #667eea は縮小後の文字サイズだと AA 未達のため濃色（7/27 是正と同系） */
    margin-bottom: 0;
}

.company-info {
    font-size: 0.85rem;
    color: #475569;
    margin: 0;
}

/* 🏠ホーム: ヘッダー左端のパンくず（2026-07-28 つねさんFB「ナビ内レールはダサい」で移設。
   auth.php render_user_bar() が出力・DOM は h1 の後だが order:-1 で見た目はタイトルの左） */
.header-home {
    order: -1;
    font-size: 0.85rem;
    color: #5a67d8;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 6px;
    background: #eef1fb;
    white-space: nowrap;
}
.header-home:hover {
    background: #dfe4f7;
}

/* ユーザーバー（ヘッダー右端に横並び・margin-left:auto で右寄せ） */
.user-bar {
    margin-left: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 0.85rem;
    color: #475569;
    text-align: right;
}

.user-bar-name {
    font-weight: 600;
    margin-bottom: 0;
}

.user-bar-actions {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
}

.user-bar a {
    color: #5a67d8;
    text-decoration: none;
}

.user-bar a:hover {
    text-decoration: underline;
}

/* メインコンテンツ */
.main-content {
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    margin-bottom: 30px;
}

/* ウェルカムセクション */
.welcome-section {
    text-align: center;
    margin-bottom: 40px;
}

.welcome-section h2 {
    font-size: 2rem;
    color: #333;
    margin-bottom: 10px;
}

.subtitle {
    font-size: 1.1rem;
    color: #475569;
}

/* アクションボタン */
.action-buttons {
    display: flex;
    justify-content: center;
    margin-bottom: 50px;
}

/* ボタン共通
   ⚠️ サイズを決めるのは .btn / .btn-large / .btn-small の3つだけ。
      色クラス（.btn-primary/.btn-danger/.btn-delete/.btn-token 等）に padding を持たせないこと。
      持たせると定義順の後勝ちで「.btn-small と書いたのにサイズが違う」事故になる
      （実際 .btn-delete が .btn-small を奪っていた・2026-07-27 UI/UXレビューで是正）。 */
/* サイズは L(.btn-large) / M(.btn) / S(.btn-small) の3段階＝約54px / 42px / 25px。
   以前は 69 / 52 / 25 で上2段が飛び抜けており、一覧のバッジ（25px）と並ぶと浮いていた
   （つねさんFB 2026-07-27「上の3つのボタンもでかい」）。
   ⚠️ この CSS は admin/ の18画面だけが読む（order/ の顧客向け画面は別系統なので影響しない）。 */
.btn {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-family: inherit; /* button 要素だけ Arial 系にフォールバックして日本語の書体が変わるのを防ぐ */
    line-height: 1.4;     /* <a class="btn"> と <button class="btn"> の高さ差（約6px）を解消 */
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

.btn-primary {
    /* 白文字とのコントラスト: 左端 #667eea は 3.66:1 で WCAG AA 未達 → #5a67d8 で 4.81:1 */
    background: linear-gradient(135deg, #5a67d8 0%, #764ba2 100%);
    color: white;
}

.btn-secondary {
    background: #6c757d;
    color: white;
}

.btn-success {
    background: #1e7e34; /* #28a745 は白文字 3.13:1 で未達 → 5.14:1 */
    color: white;
}

.btn-danger {
    background: #dc3545;
    color: white;
}

/* 画面の主役（納品書フローの決定ボタン・データ全削除）。.btn を縮めた分だけ相対的に浮くので合わせて下げる */
.btn-large {
    font-size: 1.15rem;
    padding: 14px 32px;
}

/* 一覧の操作列。8px 16px / 0.9rem では行を押し広げて「ボタンだけ大きい」表になっていた。
   同じ行に並ぶバッジ（.line-badge-* / .rate-badge = padding 3px 8px / 12px ＝約25px）に高さを揃える。
   ＝ 表の中で浮かず、行の情報とボタンが同じリズムで並ぶ（つねさんFB 2026-07-27）。
   ※ 12px でも WCAG 2.5.8 のターゲット最小 24×24px は満たす（高さ 24.8px）。
      利用者（門田さん）は視力に問題がないため文字サイズより一覧の見通しを優先する判断。 */
.btn-small {
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 5px;
}

/* 一覧の中で56行×3個が一斉に浮き沈みすると表がざわつくので、小ボタンは浮かせない */
.btn-small:hover {
    transform: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

/* 最近のバッチセクション */
.recent-section {
    margin-bottom: 40px;
}

/* 2026-07-28 縮小: 1.5rem＋太下線が縮小後のカード群に対して重く、
   上マージンも無くカードに密着して見えた（つねさんFB） */
.recent-section h3 {
    font-size: 1.05rem;
    color: #334155;
    margin: 30px 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid #667eea;
}

.batch-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.batch-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.batch-item:hover {
    background: #e9ecef;
    transform: translateX(5px);
}

.batch-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.batch-date {
    font-weight: bold;
    font-size: 1.1rem;
    color: #5a67d8;
}

.batch-details {
    color: #475569;
    font-size: 0.95rem;
}

.batch-time {
    color: #6b7280;
    font-size: 0.85rem;
}

/* 商品管理: 締切済み・過去分の区切り（2026-07-28 過去分の原則非表示とセット） */
.past-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #6b7280;
    font-size: 12px;
    font-weight: 600;
    margin: 20px 0 10px;
}
.past-divider::before,
.past-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid #cbd5e1;
}
.past-divider a {
    color: #5a67d8;
    font-weight: normal;
    text-decoration: none;
}
.past-divider a:hover {
    text-decoration: underline;
}

/* フッター */
.footer {
    text-align: center;
    color: white;
    padding: 20px;
    font-size: 0.9rem;
}

/* ドラッグ&ドロップエリア */
.drop-zone {
    border: 3px dashed #667eea;
    border-radius: 15px;
    padding: 60px 20px;
    text-align: center;
    background: #f8f9fa;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 30px;
}

.drop-zone:hover,
.drop-zone.dragover {
    background: #e7f3ff;
    border-color: #764ba2;
    transform: scale(1.02);
}

.drop-zone p {
    font-size: 1.2rem;
    color: #5a67d8;
    margin-bottom: 10px;
}

.drop-zone small {
    color: #6b7280;
    display: block;
}

/* ファイルリスト */
.file-list {
    margin-top: 20px;
}

.file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 10px;
}

.file-name {
    font-weight: bold;
    color: #333;
}

.file-size {
    color: #6b7280;
    font-size: 0.9rem;
    margin-left: 10px;
}

.remove-file {
    background: #dc3545;
    color: white;
    border: none;
    padding: 5px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9rem;
}

.remove-file:hover {
    background: #c82333;
}

/* テーブル */
.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.data-table th {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 15px;
    text-align: left;
    font-weight: bold;
}

.data-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #e9ecef;
}

.data-table tr:hover {
    background: #f8f9fa;
}

.data-table input[type="number"] {
    width: 100px;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

/* フィルターエリア */
.filter-area {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    flex-direction: column;
}

.filter-group label {
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
}

.filter-group select {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    min-width: 200px;
}

/* アラート */
.alert {
    padding: 15px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.alert-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.alert-info {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    /* 1.8rem は旧2.5rem時代のモバイル縮小値。平屋化（デスクトップ1.35rem）後に
       残すと「モバイルの方が大きい」逆転になるため、一段だけ下げる */
    .header h1 {
        font-size: 1.2rem;
    }
    .header {
        padding: 10px 14px;
    }
    
    .main-content {
        padding: 20px;
    }
    
    .btn-large {
        font-size: 1.1rem;
        padding: 15px 30px;
    }
}

/* ===== 管理画面 共通ナビ ===== */
/* 2段構成（2026-07-28 つねさんFB）: 1段目=納品書＋共通／2段目=注文サイト。
   ホームはナビでなくヘッダー左端の .header-home（パンくず型）に置く。 */
.admin-nav {
    background: white;
    padding: 4px 14px;
    border-radius: 8px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.admin-nav-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    padding: 5px 0;
}
.admin-nav-row + .admin-nav-row {
    border-top: 1px solid #eef0f4;
}
/* 段頭ラベル（納品書／注文サイト）の頭を左端に揃え、幅も揃えて
   後続リンクの開始位置まで上下で一致させる（56px=「注文サイト」5文字ぶん） */
.admin-nav-row > .admin-nav-group:first-child {
    margin-left: 0;
    min-width: 56px;
}
.admin-nav-group {
    font-size: 11px;
    color: #6b7280;
    font-weight: 600;
    margin-left: 8px;
    margin-right: 2px;
}
.admin-nav-link {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 6px;
    text-decoration: none;
    color: #5a67d8;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s;
}
.admin-nav-link:hover { background: #f0f1fe; }
/* F25: 現在地は色 + 下部ボーダーで判別（色だけに頼らない・タブUI慣例・要件書 §3.2 F25） */
.admin-nav-link-active {
    background: #5a67d8;
    color: white;
    border-bottom: 3px solid #764ba2;
    box-sizing: border-box;
}
.admin-nav-home { font-weight: 600; }
.admin-nav-danger { color: #dc3545; }
.admin-nav-danger:hover { background: #fde8ea; }
.admin-nav-danger.admin-nav-link-active { background: #dc3545; color: white; border-bottom-color: #991b1b; }
/* F25: 600px 以下は水平スクロール（Q19 推奨・ハンバーガーは admin の画面数に対して過剰） */
@media (max-width: 600px) {
    .admin-nav {
        padding: 4px 10px;
    }
    /* 2段それぞれが独立に横スクロール（段は保つ＝スマホでも「どっちの仕事の行か」が見える） */
    .admin-nav-row {
        gap: 4px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .admin-nav-link { padding: 5px 9px; font-size: 12px; flex-shrink: 0; white-space: nowrap; }
    .admin-nav-group { width: auto; margin: 0 4px; flex-shrink: 0; white-space: nowrap; }
}

/* =====================================================================
   F23 共通クラス（要件書 §3.2 F23・§3.3 小粒(5) 削除色統一）
   inline style を集約するための意味ベースのユーティリティ。
   ===================================================================== */

/* 削除系ボタン（.btn-danger のエイリアス相当・#d32f2f/#dc3545 混在を #dc3545 に統一）
   ⚠️ padding は持たせない。ここは .btn-small より後ろの定義なので、padding を書くと
      `class="btn btn-small btn-delete"` の指定を後勝ちで奪い、同じ行の他ボタンより
      12px 低い「削除だけ小さい」状態になる（2026-07-27 UI/UXレビューで除去）。
      サイズは併記する .btn / .btn-small が決める。 */
.btn-delete {
    background: #dc3545;
    color: white;
    border: none;
    font-weight: bold;
}
.btn-delete:hover { background: #c82333; }

/* URL発行ボタン（customers.php の一覧・この画面でしか使わない）。
   daika 系のブランド色 #1565C0 の濃い版＝ネイビー寄り（白文字 8.66:1・AA 余裕）。
   操作列は「青（URL発行）→ グレー（編集）→ 黒（取引終了）→ 赤（削除）」で右下ほど強い操作。
   色の履歴: #0d9488（白文字 3.74:1・AA 未達）→ #0f766e（5.47:1・ティール）
            → 2026-08-01 #0d47a1（つねさんFB「茶色はいや・URLはネイビーかブルー系で」） */
.btn-token { background: #0d47a1; color: #fff; }
.btn-token:hover { background: #0a3880; }

/* 市場名バッジ（admin_products のバッチ市場列） */
.badge-market {
    display: inline-block;
    padding: 1px 8px;
    background: #e3f2fd;
    color: #1565c0;
    border-radius: 10px;
    font-weight: bold;
    font-size: 12px;
}
.badge-unset {
    display: inline-block;
    padding: 1px 8px;
    background: #f1f5f9;
    color: #475569; /* #64748b は 4.34:1 で僅かに未達 → 6.92:1 */
    border-radius: 10px;
    font-size: 12px;
    font-style: italic;
}
/* 販売終了バッジ（admin_products の商品行・012 sale_ended_at）
   「売り切れて0口」と「門田さんが販売終了を押して0口」は画面上どちらも "0口" で見分けられないため、
   後者だけにこのバッジを出す。#b91c1c on #fee2e2 = 5.30:1（AA・12px bold）。 */
.badge-ended {
    display: inline-block;
    padding: 1px 8px;
    background: #fee2e2;
    color: #b91c1c;
    border-radius: 10px;
    font-weight: bold;
    font-size: 12px;
}

/* 注文ステータス色（admin_orders・status-badge と組み合わせ）
   白文字 11px との AA を満たす値に是正（2026-07-27・#f57c00=2.70:1 / #999=2.85:1 が未達だった） */
.status-new         { background: #1565C0; }
.status-notified    { background: #c2410c; } /* 5.18:1・オレンジ系のまま */
.status-transferred { background: #7b1fa2; }
.status-done        { background: #2e7d32; }
.status-canceled    { background: #6b7280; } /* 4.83:1 */
.status-notify-failed { background: #dc3545; }

/* インラインフォーム（style="display:inline" の量産形） */
.form-inline { display: inline; }
.form-inline-flex { display: inline-flex; align-items: center; gap: 4px; }

/* テキスト整形 */
.text-right   { text-align: right; }
.text-center  { text-align: center; }
.text-muted   { color: #475569; }
.link-plain { color: #5a67d8; text-decoration: none; }

/* スクロール可能テーブルラッパ */
.table-scroll { overflow-x: auto; }

/* 余白ユーティリティ */
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mt-40 { margin-top: 40px; }
.mb-10 { margin-bottom: 10px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }

/* form-grid の全幅セル（customers.php・顧客追加/編集モーダル） */
.form-group-full { grid-column: 1 / -1; }