/* ==================================================================
   在庫管理システム スタイル
   対応ブラウザ: Chrome（社内利用前提）
   ================================================================== */

:root {
    --bg: #f4f6f9;
    --surface: #ffffff;
    --border: #dfe4ec;
    --border-strong: #c6cedb;
    --text: #1f2733;
    --text-muted: #667085;
    --primary: #1f5eff;
    --primary-dark: #1747c4;
    --danger: #d92d20;
    --warn-bg: #fff4e5;
    --warn-text: #a45b00;
    --radius: 8px;
    --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .06);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    /* Windowsの游ゴシックは線が細く文字が薄く見えるため、メイリオを優先する */
    font-family: "Hiragino Kaku Gothic ProN", Meiryo, "Yu Gothic", system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

[hidden] {
    display: none !important;
}

/* ----------------------------- 共通パーツ ----------------------------- */
.button {
    appearance: none;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
}

.button:hover:not(:disabled) {
    background: #f0f3f8;
}

.button:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.button.primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.button.primary:hover:not(:disabled) {
    background: var(--primary-dark);
}

.button.ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text-muted);
}

.button.ghost:hover:not(:disabled) {
    background: rgba(16, 24, 40, .06);
}

.button.danger {
    border-color: #f0c2be;
    color: var(--danger);
}

.button.danger:hover:not(:disabled) {
    background: #fdf2f1;
}

.button.link {
    border: none;
    background: none;
    color: var(--primary);
    padding: 2px 4px;
    font-size: 12px;
}

.button.block {
    width: 100%;
    padding: 10px;
    font-size: 14px;
}

.field {
    display: block;
    margin-bottom: 14px;
    border: 0;
    padding: 0;
}

.field-label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.required {
    margin-left: 6px;
    padding: 1px 5px;
    border-radius: 3px;
    background: #fdecea;
    color: var(--danger);
    font-size: 10px;
    font-weight: 600;
}

.field-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: #fff;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
}

.field-input:focus {
    outline: 2px solid rgba(31, 94, 255, .25);
    border-color: var(--primary);
}

.field-note {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-muted);
}

.form-error {
    margin: 0 0 12px;
    padding: 8px 10px;
    border-radius: 6px;
    background: #fdecea;
    color: var(--danger);
    font-size: 12px;
    white-space: pre-line;
}

.hint {
    margin: 10px 2px 0;
    font-size: 11px;
    color: var(--text-muted);
}

.empty-state {
    margin: 0;
    padding: 40px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

/* ----------------------------- ログイン ----------------------------- */
.login-view {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}

.login-card {
    width: 100%;
    max-width: 360px;
    padding: 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.login-title {
    margin: 0 0 6px;
    font-size: 18px;
}

.login-lead {
    margin: 0 0 20px;
    font-size: 12px;
    color: var(--text-muted);
}

/* ------------------------------ ヘッダー ------------------------------ */
.app-header {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 20px;
    height: 56px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
}

.brand {
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
}

.tabs {
    display: flex;
    gap: 4px;
    /* 余った幅を受け持って利用者の表示を右端へ寄せる。タブ自体は縮めない */
    flex: 1 0 auto;
}

.tab {
    appearance: none;
    white-space: nowrap;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 13px;
    color: var(--text-muted);
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
}

.tab:hover {
    background: rgba(16, 24, 40, .05);
}

.tab.is-active {
    background: #eaf0ff;
    color: var(--primary);
    font-weight: 600;
}

.user-box {
    display: flex;
    align-items: center;
    /* 幅が足りないときは、タブではなくこちらを縮めて氏名を省略表示する */
    flex: 0 1 auto;
    min-width: 0;
}

/* アイコンと部署名・氏名をひとまとまりにする（アイコンは左、文字は左揃え） */
.user-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.user-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    line-height: 1.35;
}

.user-dept {
    max-width: 16em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    color: var(--text-muted);
}

.user-name {
    max-width: 16em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
}

/* 幅が足りない画面では部署名・氏名を隠し、アイコンだけにする */
@media (max-width: 640px) {
    .user-meta {
        display: none;
    }
}

/*
   利用者の表示と操作（ログアウト）を区切る。
   文字までの見た目の間隔を、区切り線の左右とも 16px に揃える
   （右側はボタン内側の余白 10px を含めて 6px + 10px = 16px）。
*/
.user-divider {
    flex-shrink: 0;
    width: 1px;
    height: 24px;
    margin: 0 6px 0 16px;
    background: var(--border);
}

/*
   ボタン内側の余白の分だけ右へ寄せ、「ログアウト」の文字の右端を
   左端のロゴと同じく画面端から 20px の位置に揃える。押せる範囲は狭めない。
*/
.logout-button {
    flex-shrink: 0;
    padding: 6px 10px;
    margin-right: -10px;
}

.avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}

/* ------------------------------ 本体 ------------------------------ */
.app-main {
    padding: 20px;
}

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow);
}

.panel-title {
    margin: 0;
    font-size: 15px;
}

.toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.search-box {
    flex: 1;
    min-width: 240px;
}

.toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.count {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.sync-info {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* --------------------------- 列の表示切替 --------------------------- */
.column-picker {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 0 12px;
    border-top: 1px dashed var(--border);
}

.column-picker-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}

.chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.chip {
    appearance: none;
    font-family: inherit;
    border: 1px solid var(--border-strong);
    background: #fff;
    color: var(--text-muted);
    border-radius: 999px;
    padding: 3px 11px;
    font-size: 12px;
    cursor: pointer;
}

.chip.is-on {
    background: #eaf0ff;
    border-color: #b9cbff;
    color: var(--primary);
    font-weight: 600;
}

/* ------------------------------ テーブル ------------------------------ */
.table-wrap {
    /* 行数が多くてもヘッダー・検索欄が画面に残るよう、テーブル内でスクロールさせる。
       表示範囲の行だけを描画する（仮想スクロール）ため、高さが確定している必要がある。
       実際の高さは app.js の fitTableHeight() が画面の残りに合わせて設定する。
       ここの値はそれまでの仮の高さ。 */
    overflow: auto;
    max-height: calc(100vh - 290px);
    min-height: 220px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* 仮想スクロールで表示範囲外の高さを確保するための行 */
.row-spacer td {
    padding: 0;
    border: none;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    white-space: nowrap;
}

.data-table th {
    position: sticky;
    top: 0;
    /* スクロールした行の内容が見出しの上に描き込まれるため、重ね順を明示する。
       ページ上部のヘッダー（z-index:10）より手前に来ないよう小さい値にする。 */
    z-index: 2;
    background: #f7f9fc;
    border-bottom: 1px solid var(--border);
    padding: 9px 12px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    cursor: grab;
    user-select: none;
}

/* 金額の見出しは右に寄せ、値の桁と重ならないよう1文字分あける */
.data-table th.is-price {
    text-align: right;
    padding-right: calc(12px + 1em);
}

.data-table th.is-center,
.data-table td.is-center {
    text-align: center;
}

.data-table th.col-action {
    cursor: default;
}

/* セルをflexにすると表レイアウトから外れて罫線が崩れるため、隣接ボタンに余白を付ける */
.data-table td.col-action .button + .button {
    margin-left: 6px;
}

.data-table th.is-dragging {
    opacity: .4;
}

.data-table th.is-drop-target {
    box-shadow: inset 2px 0 0 var(--primary);
}

.data-table td {
    padding: 9px 12px;
    color: #111;
    border-bottom: 1px solid #eef1f6;
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.cell-number {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* 売価は見落とさないよう赤字にする */
.data-table td.cell-sell-price {
    color: var(--danger);
    font-weight: 700;
}

.stock-low {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 4px;
    background: var(--warn-bg);
    color: var(--warn-text);
    font-weight: 700;
}

/* ---------------------------- 出品状況バッジ ---------------------------- */
.badges {
    display: flex;
    gap: 4px;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 30px;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: #f2f4f7;
    color: #a6adba;
    font-size: 11px;
    font-weight: 700;
}

/* マークを主役にしたいので、媒体名は一段弱める */
.badge-label {
    opacity: .75;
}

.badge-mark {
    font-size: 12px;
    line-height: 1;
}

.badge.is-on {
    border-color: #a9dbc0;
    background: #e7f7ee;
    color: #0f7a45;
}

/* △：一部・準備中 */
.badge.is-partial {
    border-color: #e8d09a;
    background: #fdf5e3;
    color: #96690d;
}

/* ー：対象外（未出品よりさらに薄く見せる） */
.badge.is-na {
    border-style: dashed;
    color: #c2c7d0;
}

.rank-badge {
    display: inline-block;
    min-width: 22px;
    margin-right: 4px;
    padding: 1px 6px;
    border-radius: 4px;
    background: #eaf0ff;
    border: 1px solid #b9cbff;
    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

/* P は管理者を兼ねるため、他のランクと見分けが付くようにする */
.rank-badge.rank-p {
    background: #fff1e6;
    border-color: #f7c99a;
    color: #b45309;
}

/* ------------------------------ モーダル ------------------------------ */
.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 24, 40, .45);
}

.modal-panel {
    position: relative;
    width: 100%;
    max-width: 620px;
    max-height: 86vh;
    overflow-y: auto;
    background: var(--surface);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .2);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--surface);
}

.modal-heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.modal-title {
    margin: 0;
    font-size: 15px;
}

/* 商品詳細は見出しをつかんで動かせる（app.js の makeModalDraggable） */
#product-modal .modal-header {
    cursor: move;
    /* スマホで見出しをなぞったときに画面のスクロールではなく移動にする */
    touch-action: none;
}

body.is-modal-dragging {
    user-select: none;
}

/* どの商品を開いているかが分かるよう、品番とメーカーを見出しに添える */
.modal-subtitle {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
    word-break: break-word;
}

.modal-close {
    appearance: none;
    border: none;
    background: none;
    font-size: 22px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 4px;
}

.modal-body {
    padding: 18px 20px 22px;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.detail-image {
    margin-bottom: 16px;
    text-align: center;
}

.detail-image img {
    max-width: 100%;
    max-height: 260px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.detail-list {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 0;
    margin: 0;
}

.detail-list dt {
    padding: 8px 10px;
    border-bottom: 1px solid #eef1f6;
    background: #f9fafc;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.detail-list dd {
    margin: 0;
    padding: 8px 10px;
    border-bottom: 1px solid #eef1f6;
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-word;
}

/*
   適合コメント・備考・出荷時コメントは複数行になるため、
   狭い値側の列に押し込めず、見出しの下に幅いっぱいで表示する。
*/
.detail-list dt.is-block {
    grid-column: 1 / -1;
    padding-bottom: 4px;
    border-bottom: 0;
    background: transparent;
}

.detail-list dd.is-block {
    grid-column: 1 / -1;
    padding: 0 10px 12px;
    border-bottom: 1px solid #eef1f6;
    line-height: 1.75;
}

.rank-options {
    display: flex;
    gap: 14px;
}

.rank-option {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    cursor: pointer;
}

/* ランク記号のあとに正式名称を添えて、P/S/G の意味が分かるようにする */
.rank-option small {
    margin-left: 4px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 400;
}

/* ------------------------------- トースト ------------------------------- */
.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    padding: 10px 18px;
    border-radius: 999px;
    background: #1f2733;
    color: #fff;
    font-size: 13px;
    box-shadow: var(--shadow);
}

.toast.is-error {
    background: var(--danger);
}