/*
 * components.css … ボタンなど、複数画面で使い回す部品のスタイル。
 */
.btn {
    display: inline-block;
    min-width: 110px;
    padding: 12px 20px;
    background: var(--color-primary);
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: box-shadow 0.1s ease, transform 0.1s ease;
}

.btn:hover {
    filter: brightness(0.92);
}

.btn:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transform: translateY(1px);
}

/*
 * 役割ごとのボタン色分け（サイト全体共通のルール）。
 * 保守系画面（一覧＋登録・編集フォーム）を新規に作る際は、同じ役割には必ず同じクラスを使うこと。
 *   新規登録 = .btn--new（teal） / 編集 = .btn--edit（lemonchiffon）
 *   保存     = .btn--save（dodgerblue） / 戻る = .btn--back（darkgray）
 *   無効化   = .btn--disable（crimson） / 有効化 = .btn--restore（limegreen）
 */
.btn--new {
    background: teal;
}

.btn--edit {
    background: lemonchiffon;
    color: var(--color-text);
}

.btn--save {
    background: dodgerblue;
}

.btn--back {
    background: darkgray;
}

.btn--disable {
    background: crimson;
}

.btn--restore {
    background: limegreen;
}

/*
 * 携帯端末向け画面（バーコード読取系）の主要ボタン。
 * 幅いっぱい・同一サイズに統一する（色クラスと併用する。例: .btn .btn--save .btn--block）。
 */
.btn--block {
    display: block;
    width: 100%;
    padding: 12px 0;
    font-size: 1.1rem;
}

/*
 * データ一覧テーブル（サイト全体共通のルール）。
 * 保守系画面の一覧表示は、必ずこのクラスを使うこと。
 */
.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 8px;
    text-align: left;
    border: 1px solid #cccccc;
}

.data-table th {
    background-color: steelblue;
    color: #ffffff;
}

.data-table td.nowrap {
    white-space: nowrap;
}

.data-table td.num {
    text-align: right;
}

/*
 * スピンボタン（増減矢印）を表示しない数値入力欄。
 * 買参人番号・登録番号など、増減操作が不要な数値入力で使う。
 */
.no-spin::-webkit-inner-spin-button,
.no-spin::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.no-spin {
    -moz-appearance: textfield;
}