/* ====================================================================
   LUX 管理ポータル V2 ダークテーマ (2026-07-04 UI改修)
   方針:
   - 背景ダークネイビー / 文字は白ベース(グレー文字は使用禁止)
   - 行間はExcel寄りの高密度(ただし窮屈になりすぎない下限を維持)
   - 信号色: 赤・青・緑・オレンジ(+シアン/イエロー)を太字と組み合わせ
   - 受注一覧は楽々方式のステータス行背景色(.lux-row-* を<tr>に付与)
   ==================================================================== */

:root {
    /* ベース */
    --bg:        #0d1424;   /* ページ背景 */
    --bg-card:   #16213a;   /* カード背景 */
    --bg-head:   #101a30;   /* ヘッダー/表ヘッダ背景 */
    --bg-hover:  #1e2c4d;   /* 行ホバー */
    --bg-input:  #0f1930;   /* 入力欄 */
    --border:    #2c3e63;   /* 罫線 */
    --input-border: #5d82d6; /* 入力枠の色線 */
    --text:      #f2f6ff;   /* 基本文字(白) */
    --text-sub:  #c9d6ef;   /* 補助文字(明るい青白・グレー禁止のため) */
    /* ブランド */
    --brand1:    #667eea;
    --brand2:    #764ba2;
    /* 信号色 */
    --red:       #ff5f5f;
    --blue:      #4da3ff;
    --green:     #3ddc97;
    --orange:    #ffa940;
    --cyan:      #35d0e0;
    --yellow:    #ffd54a;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 13px;
    line-height: 1.45;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

.lux-container { max-width: 1280px; margin: 0 auto; padding: 0 16px; }

/* ---------- ナビ (★2026-07-16: 旧 .lux-header を統合。1行=51px を回収) ----------
   旧ヘッダのグラデーションをこの帯へ移してブランド感を保持する。
   .lux-header / .lux-header h1 は廃止(_header.php から削除済み)。          */
.lux-nav {
    background: linear-gradient(135deg, #1b2a52 0%, #2d1b52 100%);
    border-bottom: 1px solid var(--border);
}
.lux-nav .lux-container { display: flex; align-items: stretch; gap: 2px; flex-wrap: wrap; }
.lux-nav a {
    display: inline-block; padding: 10px 14px; color: var(--text);
    border-bottom: 3px solid transparent; font-weight: 600; font-size: 13px;
}
.lux-nav a:hover { text-decoration: none; color: var(--blue); }
.lux-nav a.active { color: var(--blue); border-bottom-color: var(--blue); }
/* ブランド(左端) */
.lux-nav .lux-brand {
    display: flex; align-items: center; gap: 5px;
    padding-right: 12px; margin-right: 6px;
    border-right: 1px solid rgba(255,255,255,.18);
    font-size: 14px; font-weight: 800; letter-spacing: .02em;
    color: #fff; white-space: nowrap;
}
/* ユーザー/ログアウト(右端へ押し出す) */
.lux-nav .lux-user {
    display: flex; align-items: center; gap: 10px;
    margin-left: auto; padding-left: 12px;
    font-size: 12px; color: var(--text); white-space: nowrap;
}
.lux-btn-logout {
    color: #fff; border: 1px solid rgba(255,255,255,.5);
    padding: 3px 11px; border-radius: 6px; font-size: 12px;
}
.lux-btn-logout:hover { background: rgba(255,255,255,.12); text-decoration: none; }

/* ---------- メイン ---------- */
.lux-main { padding: 18px 0 48px; }

.lux-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,.35);
    margin-bottom: 16px; overflow: hidden;
}
.lux-card-header {
    padding: 10px 16px; border-bottom: 1px solid var(--border);
    background: var(--bg-head);
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
}
.lux-card-header h2 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.lux-card-body { padding: 14px 16px; }

/* ---------- アラート(帯色は控えめに・色枠+左帯で主張) ---------- */
.lux-alert {
    padding: 9px 14px; border-radius: 6px; margin-bottom: 12px; font-weight: 700;
    background: rgba(255,255,255,.03);
    border: 1px solid; border-left-width: 4px;
}
.lux-alert-success { color: var(--green);  border-color: var(--green); }
.lux-alert-error   { color: var(--red);    border-color: var(--red); }
.lux-alert-warning { color: var(--orange); border-color: var(--orange); }
.lux-alert a { font-weight: 700; }

/* ---------- テーブル(高密度) ---------- */
.lux-table { width: 100%; border-collapse: collapse; }
.lux-table th, .lux-table td {
    padding: 5px 10px;                       /* Excel寄りの詰め。上下5pxが下限 */
    border-bottom: 1px solid var(--border);
    text-align: left; vertical-align: middle;
    color: var(--text); font-size: 13px;
}
.lux-table th {
    background: var(--bg-head); font-size: 12px; font-weight: 700;
    color: var(--text); white-space: nowrap;
    border-bottom: 2px solid var(--border);
}
.lux-table > tbody:not(.lux-rec) tr:nth-child(even) td { background: rgba(255,255,255,.035); } /* 奇数偶数の縞 */
.lux-table tr:hover td { background: var(--bg-hover); }
.lux-td-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- 受注ステータス行背景(楽々方式) ----------
   orders.php の <tr> に class="lux-row-<?= h($o['order_status']) ?>" を付与して使用。
   行の左端3pxの色帯+薄い背景色。ホバー時も色味を維持。 */
.lux-table tr[class*="lux-row-"] td:first-child { border-left: 3px solid transparent; }

.lux-row-payment_error    td { background: rgba(255,95,95,.14); }
.lux-row-payment_error    td:first-child { border-left-color: var(--red); }
.lux-row-new              td { background: rgba(77,163,255,.13); }
.lux-row-new              td:first-child { border-left-color: var(--blue); }
.lux-row-awaiting_shipping td { background: rgba(255,169,64,.13); }
.lux-row-awaiting_shipping td:first-child { border-left-color: var(--orange); }
.lux-row-awaiting_tracking td { background: rgba(53,208,224,.12); }
.lux-row-awaiting_tracking td:first-child { border-left-color: var(--cyan); }
.lux-row-shipped          td { background: rgba(61,220,151,.11); }
.lux-row-shipped          td:first-child { border-left-color: var(--green); }
.lux-row-on_hold          td { background: rgba(255,213,74,.12); }
.lux-row-on_hold          td:first-child { border-left-color: var(--yellow); }
.lux-row-cancelled        td { background: rgba(255,255,255,.04); text-decoration: line-through; text-decoration-color: rgba(255,95,95,.6); }
.lux-row-cancelled        td:first-child { border-left-color: var(--red); }

.lux-row-payment_error:hover td     { background: rgba(255,95,95,.22); }
.lux-row-new:hover td               { background: rgba(77,163,255,.21); }
.lux-row-awaiting_shipping:hover td { background: rgba(255,169,64,.21); }
.lux-row-awaiting_tracking:hover td { background: rgba(53,208,224,.20); }
.lux-row-shipped:hover td           { background: rgba(61,220,151,.19); }
.lux-row-on_hold:hover td           { background: rgba(255,213,74,.20); }

/* ---------- ステータスバッジ(太字+色) ---------- */
.lux-badge {
    display: inline-block; padding: 2px 9px; border-radius: 20px;
    font-size: 12px; font-weight: 700; white-space: nowrap; border: 1px solid;
}
.lux-badge-active, .lux-badge-completed { background: rgba(61,220,151,.15); color: var(--green); border-color: var(--green); }
.lux-badge-pending   { background: rgba(255,169,64,.15); color: var(--orange); border-color: var(--orange); }
.lux-badge-cancelled, .lux-badge-failed { background: rgba(255,95,95,.15); color: var(--red); border-color: var(--red); }
.lux-badge-default   { background: rgba(77,163,255,.15); color: var(--blue); border-color: var(--blue); }

/* ステータス別バッジ(受注7値。必要に応じてstatus.phpのラベルclassに対応) */
.lux-badge-payment_error     { background: rgba(255,95,95,.15);  color: var(--red);    border-color: var(--red); }
.lux-badge-new               { background: rgba(77,163,255,.15); color: var(--blue);   border-color: var(--blue); }
.lux-badge-awaiting_shipping { background: rgba(255,169,64,.15); color: var(--orange); border-color: var(--orange); }
.lux-badge-awaiting_tracking { background: rgba(53,208,224,.15); color: var(--cyan);   border-color: var(--cyan); }
.lux-badge-shipped           { background: rgba(61,220,151,.15); color: var(--green);  border-color: var(--green); }
.lux-badge-on_hold           { background: rgba(255,213,74,.15); color: var(--yellow); border-color: var(--yellow); }

/* ---------- フォーム ---------- */
.lux-form-section { margin-bottom: 22px; }
.lux-section-title {
    font-size: 14px; font-weight: 700; margin: 0 0 12px; padding-bottom: 6px;
    border-bottom: 2px solid var(--brand1); color: var(--text);
}
.lux-form-row { display: flex; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.lux-form-group { flex: 1; min-width: 220px; }
.lux-form-group.full-width { flex-basis: 100%; }
.lux-form-group label { display: block; margin-bottom: 4px; font-weight: 700; font-size: 12px; color: var(--text); }
.lux-required { color: var(--red); font-weight: 700; }
.lux-input, .lux-select, .lux-textarea {
    width: 100%; padding: 6px 10px;
    border: 1px solid var(--input-border);          /* 色線フレームで視認性UP */
    box-shadow: inset 0 0 0 1px rgba(93,130,214,.18);
    border-radius: 6px; font-size: 13px;
    background: var(--bg-input); color: var(--text);
}
.lux-input:hover, .lux-select:hover, .lux-textarea:hover { border-color: var(--blue); }
.lux-input::placeholder, .lux-textarea::placeholder { color: var(--text-sub); opacity: .8; }
.lux-select option { background: var(--bg-input); color: var(--text); }
.lux-input:focus, .lux-select:focus, .lux-textarea:focus {
    outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(77,163,255,.22);
}

/* ★2026-07-16: 日付入力のカレンダーアイコン。
   color-scheme:dark でグリフは明色になったが、Chromeネイティブは小さく低コントラストで
   「押せる物」に見えなかった → 右端に枠付きの□として常時表示する。
   ※フィールド全体で showPicker() を開く案は不採用(年/月/日の手打ちを潰すため)。
   ※background は shorthand で書かないこと(UAが背景画像でグリフを描いているため消える)。 */
.lux-input[type="date"] { color-scheme: dark; }
.lux-input[type="date"]::-webkit-calendar-picker-indicator {
    width: 15px; height: 15px; padding: 2px; margin-left: 6px;
    border: 1px solid var(--input-border);
    border-radius: 4px;
    background-color: rgba(93,130,214,.25);
    opacity: 1; cursor: pointer;
}
.lux-input[type="date"]::-webkit-calendar-picker-indicator:hover {
    background-color: rgba(77,163,255,.5);
    border-color: var(--blue);
}

/* ---------- チップ(一覧の小バッジ) ★2026-07-16 追加 ----------
   一覧で「生成済み・未出荷」を 11px の小文字で出していたら、現場が見落として
   「まだ受注が作られていない」と誤判断する恐れがあった(ユーザー指摘)。
   定期マスターのKPIバッジ(.k-badge)と色・語彙を揃える。 */
.lux-chip {
    display: inline-block; padding: 1px 8px; border-radius: 10px;
    font-size: 11px; font-weight: 800; line-height: 1.6;
    white-space: nowrap; border: 1px solid;
}
.lux-chip.inflight { border-color: var(--orange); background: rgba(255,169,64,.16); color: var(--orange); }
.lux-chip.ok       { border-color: var(--green);  background: rgba(61,220,151,.14);  color: var(--green); }

/* ---------- ボタン ---------- */
.lux-btn {
    display: inline-block; padding: 7px 16px; border-radius: 6px;
    font-size: 13px; font-weight: 700; cursor: pointer; border: none;
    transition: opacity .15s; white-space: nowrap; /* ★2026-07-19: ラベルの文字割れ(CJKが字単位改行)防止 */
}
.lux-btn:hover { opacity: .85; text-decoration: none; }
.lux-btn-primary {
    background: linear-gradient(135deg, var(--brand1) 0%, var(--brand2) 100%); color: #fff;
}
.lux-btn-secondary { background: #2c3e63; color: var(--text); border: 1px solid var(--border); }
.lux-btn-danger { background: var(--red); color: #17070a; }
.lux-btn-sm { padding: 3px 10px; font-size: 12px; }
.lux-btn-accent {
    background: linear-gradient(135deg, #f6853b 0%, #ef5a2c 100%); color: #fff;
}

/* ---------- 検索バー ----------
   ★2026-07-16: ラベルを縦積み(block+margin=21px/行)から inline へ。行あたり −21px。
     .lux-filter を使う5画面(受注管理/出荷管理/決済管理/定期購入管理/トークン発行)に一斉に効く。
   ★旧 `min-width:170px` は意図的に削除した。
     明示 min-width は flex の「automatic minimum size(=min-content)」を無効化するため、
     各画面に散っている inline の `style="flex:0"`(= flex-basis:0%) と組み合わさると
     中身が箱から溢れて隣のボタンに重なる(shipping.php で実害が出た)。
     min-width を書かなければ min-width:auto → min-content で下げ止まるので、
     inline の flex:0 を1つずつ直さなくても安全になる。                              */
.lux-filter { display: flex; gap: 8px 14px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.lux-filter .lux-form-group { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: auto; } /* ★2026-07-19: 基底の min-width:220px 漏れを是正。auto=min-content で下げ止まる(0だとボタン枠まで潰れCJKが字割れ) */
.lux-filter .lux-form-group > label { margin: 0; flex: 0 0 auto; white-space: nowrap; }
.lux-filter .lux-form-group > .lux-input,
.lux-filter .lux-form-group > .lux-select { width: auto; }
.lux-filter .lux-form-group > .lux-select { min-width: 116px; }
/* テキスト検索だけは伸ばす(.lux-wide を付けた group) */
.lux-filter .lux-form-group.lux-wide { flex: 1 1 300px; }
.lux-filter .lux-form-group.lux-wide > .lux-input { flex: 1 1 auto; width: auto; min-width: 0; }

/* ---------- ダッシュボード ---------- */
.lux-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.lux-stat {
    flex: 1; min-width: 190px; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 8px; padding: 14px 18px; box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.lux-stat .lux-stat-label { font-size: 12px; color: var(--text-sub); font-weight: 600; }
.lux-stat .lux-stat-value { font-size: 26px; font-weight: 700; color: var(--text); }
.lux-stat .lux-stat-value small { font-size: 13px; color: var(--text-sub); font-weight: 600; }

/* ---------- ログイン ---------- */
.lux-login-wrap {
    min-height: 100vh; display: flex; justify-content: center; align-items: center;
    background: linear-gradient(135deg, #1b2a52 0%, #2d1b52 100%);
}
.lux-login-box {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 36px;
    width: 100%; max-width: 380px; box-shadow: 0 10px 40px rgba(0,0,0,.5);
    color: var(--text);
}
.lux-login-box h1 { margin: 0 0 22px; font-size: 19px; text-align: center; color: var(--text); }

/* ---------- ローディング ---------- */
#lux-loading {
    position: fixed; inset: 0; background: rgba(0,0,0,.65);
    display: none; justify-content: center; align-items: center; z-index: 9999;
}
#lux-loading .box { background: var(--bg-card); border: 1px solid var(--border); color: var(--text); padding: 32px 44px; border-radius: 10px; text-align: center; }
#lux-loading .spinner {
    border: 4px solid #2c3e63; border-top-color: var(--blue); border-radius: 50%;
    width: 46px; height: 46px; margin: 0 auto 16px;
    animation: luxspin 1s linear infinite;
}
@keyframes luxspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    #lux-loading .spinner { animation-duration: 2.5s; }
}

@media (max-width: 640px) {
    .lux-card-body { padding: 12px; }
    .lux-table { display: block; overflow-x: auto; white-space: nowrap; }
}