/* =============================================================
   見積書ページ スタイルシート
   ファイル: public/css/quote.css
   説明: 見積書（quote.html）固有のスタイル定義
   ============================================================= */

/* -------------------------------------------------------------
   見積書セクション全体
   ------------------------------------------------------------- */

/* 見積書番号フィールド行 */
.quote__no-row {
    display: flex;
    align-items: center;
    gap: var(--gap-form);
    margin-bottom: var(--gap-form);
}

/* 見積書番号ラベル */
.quote__label {
    font-size: var(--font-size-small);
    color: var(--color-text-label);
    white-space: nowrap;
    min-width: 90px;
    flex-shrink: 0;
}

/* 件名行（件名テキスト＋ボタン横並び） */
.quote__subject-row {
    display: flex;
    align-items: center;
    gap: var(--gap-inline);
    margin-bottom: var(--gap-form);
}

/* 件名入力欄（ボタン分を除いた幅で伸縮） */
.quote__subject-input {
    flex: 1;
}

/* -------------------------------------------------------------
   詳細セクション（15セット）
   ------------------------------------------------------------- */

/* 詳細ヘッダー行（列ラベル） */
.quote__detail-header {
    display: grid;
    grid-template-columns: 1fr 60px 60px 80px;
    gap: var(--gap-form);
    margin-bottom: 4px;
    padding: 0 2px;
}

/* 詳細ヘッダーの各ラベル */
.quote__detail-header-label {
    font-size: var(--font-size-small);
    color: var(--color-text-label);
    text-align: center;
    font-weight: bold;
}

/* 詳細行1セット（内容・数量・単位・単価） */
.quote__detail-row {
    display: grid;
    grid-template-columns: 1fr 60px 60px 80px;
    gap: var(--gap-form);
    margin-bottom: 4px;
    align-items: center;
}

/* 詳細行の連番ラベル（非表示・スペーサー用） */
.quote__detail-index {
    font-size: var(--font-size-small);
    color: var(--color-text-label);
    text-align: right;
    width: 18px;
    flex-shrink: 0;
    user-select: none;
}

/* 数量・単価の入力欄（右寄せ） */
.quote__input--num {
    text-align: right;
}

/* 単位セレクト（中央寄せ） */
.quote__select--unit {
    text-align: center;
}

/* 詳細セクション内の区切り線（5行ごとの視覚的区切り） */
.quote__detail-divider {
    border: none;
    border-top: 1px dashed var(--color-border-light);
    margin: 6px 0;
}

/* -------------------------------------------------------------
   備考セクション
   ------------------------------------------------------------- */

/* 備考ラベル */
.quote__note-label {
    font-size: var(--font-size-small);
    color: var(--color-text-label);
    margin-bottom: 4px;
    display: block;
}

/* -------------------------------------------------------------
   フォーム下部ボタン行
   ------------------------------------------------------------- */

/* 左カラム下部のボタン配置 */
.quote__btn-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border-light);
}

/* -------------------------------------------------------------
   右カラム（データ管理）
   ------------------------------------------------------------- */

/* 引用区分トグルグループ */
.quote__ref-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

/* 見積先・過去データ セレクトのラベル */
.quote__select-label {
    font-size: var(--font-size-small);
    color: var(--color-text-label);
    margin-bottom: 2px;
    display: block;
}

/* 見積先・過去データ セレクト */
.quote__listbox {
    width: 100%;
    margin-bottom: 8px;
}

/* 右カラムのボタン行 */
.quote__action-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

/* 右カラムの横並びボタン（2つ並べる場合） */
.quote__action-row-inline {
    display: flex;
    gap: 6px;
}

/* 右カラムのボタンを横幅いっぱいに */
.quote__action-row .btn {
    width: 100%;
}

.quote__action-row-inline .btn {
    flex: 1;
}

/* -------------------------------------------------------------
   試験モーダル
   ------------------------------------------------------------- */

/* 試験モーダル本体（幅を広めに） */
.quote__modal--shiken {
    min-width: 360px;
}

/* 保護継電器行（チェック＋要素テキスト横並び） */
.quote__shiken-relay-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

/* 保護継電器の要素テキスト入力 */
.quote__shiken-relay-input {
    flex: 1;
    height: 28px;
    padding: 2px 6px;
    font-size: var(--font-size-base);
    font-family: inherit;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background-color: var(--color-bg-white);
    color: var(--color-text);
}

.quote__shiken-relay-input:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 2px rgba(46, 134, 193, 0.2);
}