/* 電気代計算（スコープは #app-denki） */

#app-denki .dk-wrap { max-width: 52rem; margin: 0 auto; }

#app-denki .dk-panel { background: var(--bs-tertiary-bg); border-top: 3px solid var(--bs-primary); }
#app-denki .dk-panel-head { font-weight: 700; padding: .75rem 1rem .25rem; display: flex; align-items: center; }
#app-denki .dk-panel-body { padding: .75rem 1rem 1rem; }

#app-denki .dk-price-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
#app-denki .dk-price-input { width: 11rem; }
#app-denki .dk-note { display: flex; align-items: flex-start; font-size: .88rem; color: var(--bs-secondary-color); line-height: 1.7; }
#app-denki .dk-msg,
#app-denki .dk-row-msg { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); padding: .4rem .75rem; font-size: .88rem; }

/* 家電の行（402px ではカード。名前が1行、入力は3列） */
/* 行の区切りは面の色だけで示す（左の太い線はやめた 2026-10-16） */
#app-denki .dk-row { background: var(--bs-tertiary-bg); padding: .75rem 1rem 1rem; }

/* 見本の文字は入力した値と見分けがつくよう薄くする（本文の色の 30%） */
#app-denki .form-control::placeholder { color: color-mix(in srgb, var(--bs-body-color) 30%, transparent); opacity: 1; }
#app-denki .dk-row-top { display: flex; gap: .5rem; }
#app-denki .dk-row-top .dk-kind { min-width: 0; }

/* その他を選んだときだけ名前の欄を出す。「型番から探す」は対応する種類だけ */
#app-denki .dk-row .dk-name { display: none; }
#app-denki .dk-row.is-other .dk-name { display: block; }
#app-denki .dk-preset { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin-top: .4rem; font-size: .8rem; color: var(--bs-secondary-color); line-height: 1.5; min-height: 1.75rem; }
#app-denki .dk-preset-text { flex: 1 1 14rem; min-width: 0; }
#app-denki .dk-find { display: none; white-space: nowrap; }
#app-denki .dk-row.has-models .dk-find { display: inline-flex; align-items: center; }

/* 型番の候補（モーダルは #app-denki の外に置く） */
#dk-model-modal .dk-m-item { display: flex; align-items: center; gap: .75rem; }
#dk-model-modal .dk-m-main { display: grid; flex: 1 1 auto; min-width: 0; }
#dk-model-modal .dk-m-main strong { overflow-wrap: anywhere; }
#dk-model-modal .dk-m-main small { color: var(--bs-secondary-color); }
#dk-model-modal .dk-m-kwh { white-space: nowrap; font-variant-numeric: tabular-nums; }
#dk-model-modal .dk-m-arrow { color: var(--bs-secondary-color); font-size: 1.25rem; line-height: 1; }
#app-denki .dk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
#app-denki .dk-grid > label { font-size: .8rem; font-weight: 600; color: var(--bs-secondary-color); display: grid; gap: .15rem; white-space: nowrap; }
#app-denki .dk-grid .input-group-text { padding-inline: .4rem; }
#app-denki .dk-annual-fields { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
#app-denki .dk-standby-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }

#app-denki .dk-annual-fields,
#app-denki .dk-standby-fields { display: none; }
#app-denki .dk-row.is-annual .dk-watt-fields,
#app-denki .dk-row.is-annual .dk-days-wrap,
#app-denki .dk-row.is-annual .dk-standby-wrap { display: none; }
#app-denki .dk-row.is-annual .dk-annual-fields { display: grid; }
#app-denki .dk-row.is-standby .dk-standby-fields { display: grid; }

#app-denki .dk-row-msg { margin-top: .5rem; }
#app-denki .dk-result {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .25rem;
    margin-top: .75rem;
    background: var(--bs-body-bg);
    padding: .5rem;
}
#app-denki .dk-result > div { display: grid; text-align: center; min-width: 0; }
#app-denki .dk-result span { font-size: .75rem; color: var(--bs-secondary-color); }
#app-denki .dk-result strong { font-size: .95rem; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* 合計 */
#app-denki .dk-sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-bottom: .75rem; }
#app-denki .dk-sum > div { background: var(--bs-body-bg); padding: .5rem .75rem; display: grid; }
#app-denki .dk-sum-label { font-size: .8rem; color: var(--bs-secondary-color); }
#app-denki .dk-sum-val { font-size: 1.5rem; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }

#app-denki .dk-bars { display: grid; gap: .35rem; }
#app-denki .dk-bar { display: grid; grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) 3rem; gap: .5rem; align-items: center; font-size: .85rem; }
#app-denki .dk-bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#app-denki .dk-bar-track { height: .9rem; background: var(--bs-secondary-bg); }
#app-denki .dk-bar-fill { display: block; height: 100%; background: var(--bs-primary); }
#app-denki .dk-bar-val { text-align: right; font-variant-numeric: tabular-nums; }

@media (min-width: 768px) {
    #app-denki .dk-grid { grid-template-columns: repeat(3, minmax(0, 12rem)); }
}