/* touch_friendly.css — EARS look, authored at 1280x800 */

window {
    background-image: url("back.png");
    background-size: cover;
    background-position: center;
}

notebook, notebook > stack, notebook header,
grid, box, viewport, scrolledwindow, frame {
    background-color: transparent;
    background-image: none;
}
scrolledwindow, #SoundScroller { border: none; box-shadow: none; }

/* NOTE: scoped to standalone labels only — a bare `label {}` rule would
   repaint every button's text and override the button colors below. */
#StatusLabel, #ComPortLabel, #LogLabel, #LanguageLabel,
checkbutton, radiobutton, combobox {
    font-family: 'Noto Sans JP', 'IPAPGothic', 'Noto Sans', sans-serif;
    color: #1e1e1e;
    font-size: 14px;
}

/* ---------- shared button look ---------- */
button, button label {
    font-family: 'Noto Sans JP', 'IPAPGothic', 'Noto Sans', sans-serif;
    font-weight: 700;
    color: #ffffff;
}
button {
    border-radius: 0;
    border: 2px solid rgba(0,0,0,0.45);
    background-image: none;
    box-shadow: none;
    text-shadow: none;
    padding: 0;
    min-height: 0;
    min-width: 0;
}

/* ---------- navy title banner ---------- */
#ConditionNameLabel {
    font-family: 'Noto Sans JP', 'IPAPGothic', sans-serif;
    font-size: 46px;
    font-weight: 700;
    color: #ffffff;
    background-color: #0B3B6B;
    padding: 10px 26px;
    margin: 14px 40px 24px 40px;
}

/* ---------- splash / main menu ---------- */
#Option1Button, #Option2Button, #Option3Button {
    min-height: 95px;
    background-color: #6A991A;
}
#Option1Button label, #Option2Button label, #Option3Button label { font-size: 50px; }
#Option1Button:hover, #Option2Button:hover, #Option3Button:hover  { background-color: #7BAE22; }
#Option1Button:active, #Option2Button:active, #Option3Button:active { background-color: #5A8315; }

#SettingButton        { min-height: 95px;min-width: 200px; background-color: #F97F00; }
#SettingButton label  { font-size: 34px; }
#SettingButton:hover  { background-color: #FF9020; }
#SettingButton:active { background-color: #D96C00; }

#CloseButton          { min-height: 95px;min-width: 200px; background-color: #808080; }
#CloseButton label    { font-size: 34px; color: #ffffff; }
#CloseButton:hover    { background-color: #909090; }
#CloseButton:active   { background-color: #6E6E6E; }

#LanguageToggle          { min-height: 46px; min-width: 80px; background-color: #ffffff; }
#LanguageToggle label    { font-size: 20px; color: #1e1e1e; }
#LanguageToggle:checked  { background-color: #0B3B6B; }
#LanguageToggle:checked label { color: #ffffff; }

/* ---------- back buttons ---------- */
/* MapBackButton is deliberately NOT here — the map page pairs it with
   MapExplainButton via .nav-button so both render at the same size. */
#SoundBackButton, #SettingBackButton {
    min-width: 100px;
    min-height: 58px;
    background-color: #F0F0F0;
    border: 2px solid #B5B5B5;
}
#SoundBackButton label, #SettingBackButton label {
    font-size: 20px;
    color: #111111;
}
#SoundBackButton:hover, #SettingBackButton:hover {
    background-color: #E2E2E2;
}

/* ---------- dynamic sound-list buttons ---------- */
.sound-clip              { min-height: 74px; background-color: #3592C8; }
.sound-clip label        { font-size: 20px; color: #ffffff; }
.sound-clip.heart        { background-color: #CE3733; }
.sound-clip.lung         { background-color: #3592C8; }

.sound-clip.compact       { min-height: 52px; }
.sound-clip.compact label { font-size: 19px; }

.sound-clip.top           { min-height: 112px; }
.sound-clip.top label     { font-size: 34px; }

/* ---------- settings page ---------- */
#ConnectButton, #AutoConnectButton, #RefreshButton {
    min-height: 46px; min-width: 150px; background-color: #0B3B6B;
}
#ConnectButton label, #AutoConnectButton label, #RefreshButton label { font-size: 19px; }
#ComPortComboBox { min-height: 40px; font-size: 17px; }
#StatusLabel.status-on  { color: #2e7d32; font-weight: bold; font-size: 17px; }
#StatusLabel.status-off { color: #c62828; font-weight: bold; font-size: 17px; }

/* ══════════════════════════════════════════════════════════════════
   MAP PAGE
   Two selector styles are in play here, and the difference matters:

     #Id     — works only for widgets MapWindow passes to SetName() in
               its constructor. GTK3's Builder does not copy a glade id
               into the CSS name, so an id alone matches nothing.
     .class  — applied via AddClass() in the same constructor. Used for
               the header/title/button widgets because this build's
               Builder rejects <style><class/></style> in the glade.

   Sizes target the `label` node directly because _scaleCssProvider
   emits a plain `label {}` rule that beats any inherited value.
   ══════════════════════════════════════════════════════════════════ */

/* ── 視点 radios ──
   GtkRadioButton with draw-indicator=False renders as a button node that
   is a CHILD of the widget carrying the id, so `#Id button` is needed. */
#ViewFrontRadio, #ViewBackRadio, #ViewRightRadio, #ViewLeftRadio,
#ViewFrontRadio button, #ViewBackRadio button,
#ViewRightRadio button, #ViewLeftRadio button {
    color: #111111;
    background-color: #F0F0F0;
    background-image: none;
    border: 2px solid #B5B5B5;
    border-radius: 0;
    min-height: 46px;
}
#ViewFrontRadio label, #ViewBackRadio label,
#ViewRightRadio label, #ViewLeftRadio label {
    color: #111111;
    font-size: 22px;
    font-weight: 700;
}
#ViewFrontRadio:checked, #ViewBackRadio:checked,
#ViewRightRadio:checked, #ViewLeftRadio:checked,
#ViewFrontRadio button:checked, #ViewBackRadio button:checked,
#ViewRightRadio button:checked, #ViewLeftRadio button:checked {
    background-color: #2e7d32;
    border-color: #1f5c23;
}
#ViewFrontRadio:checked label, #ViewBackRadio:checked label,
#ViewRightRadio:checked label, #ViewLeftRadio:checked label {
    color: #ffffff;
}

/* ── left control column ── */
#BodySkeletonRadio label, #BodyJacketRadio label,
#HideCircleCheck label, #BlackAudioCheck label, #HideMapCheck label,
#JacketSizeLabel {
    font-size: 19px;
    color: #1e1e1e;
}
#BodyFrame > label, #ViewFrame > label {
    font-size: 19px;
    font-weight: 700;
    color: #1e1e1e;
}

/* 再生テスト — accent fill, white text is correct here */
#SoundTestButton {
    background-color: #0B3B6B;
    background-image: none;
    border: 2px solid #072a4d;
    border-radius: 0;
    min-height: 58px;
}
#SoundTestButton label { color: #ffffff; font-size: 24px; font-weight: 700; }
#SoundTestButton:hover { background-color: #14538F; }

/* サイズ combo — the visible box is a button node inside the combobox */
#JacketSizeCombo,
#JacketSizeCombo button {
    color: #111111;
    background-color: #ffffff;
    background-image: none;
    border: 1px solid #B5B5B5;
    border-radius: 0;
    min-height: 36px;
    min-width: 90px;
}
#JacketSizeCombo label,
#JacketSizeCombo button label,
#JacketSizeCombo cellview {
    color: #111111;
    font-size: 19px;
    font-weight: 400;
}
#JacketSizeCombo arrow { color: #111111; min-width: 16px; min-height: 16px; }

/* the popup list is a separate toplevel — style it too or it inherits white */
#JacketSizeCombo window.popup,
#JacketSizeCombo window.popup list,
#JacketSizeCombo window.popup row label {
    color: #111111;
    background-color: #ffffff;
    font-size: 19px;
}
window.popup list row label { color: #111111; }

/* ── map page: class-based widgets (see header note) ── */
label.map-title {
    font-family: 'Noto Sans JP', 'IPAPGothic', sans-serif;
    font-size: 40px;
    font-weight: 700;
    color: #1e1e1e;
    background-color: rgba(255,255,255,0.55);
    padding: 6px 40px;
}
label.panel-header {
    font-family: 'Noto Sans JP', 'IPAPGothic', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #111111;
    background-color: #F0F0F0;
    padding: 6px 0;
}
label.contact-chip {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    background-color: #C62828;
    padding: 6px 18px;
}
label.contact-chip.contact-ok { background-color: #2e7d32; }

button.nav-button {
    min-height: 62px;
    background-color: #F0F0F0;
    border: 2px solid #B5B5B5;
}
button.nav-button label {
    font-size: 24px;
    color: #111111;
}
button.nav-button:hover { background-color: #E2E2E2; }

/* ---------- disabled states ---------- */
/* splash: modes unavailable until the device connects */
#Option1Button:disabled, #Option2Button:disabled, #Option3Button:disabled {
    background-color: #A8AFA0;
    border-color: rgba(0,0,0,0.25);
}
#Option1Button:disabled label,
#Option2Button:disabled label,
#Option3Button:disabled label { color: #EFEFEF; }

#ConnectionAlertLabel {
    font-family: 'Noto Sans JP', 'IPAPGothic', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    background-color: #C62828;
    padding: 10px 24px;
    margin: 8px 40px;
}
/* #BatteryLabel            { margin-left: 4px; } */
#BatteryLabel.battery-low { color: #c62828; font-weight: bold; }

/* ---------- power-off confirmation ---------- */
/* Own toplevel, so the generic `window` and `button` rules at the top of
   this file apply to it. Undo both, then restyle from scratch. */
#PowerOffDialog {
    background-image: none;
    background-color: #FFFFFF;
    border: 4px solid #0B3B6B;
}
#PowerOffDialog box,
#PowerOffDialog .dialog-vbox,
#PowerOffDialog .dialog-action-area {
    background-color: transparent;
    background-image: none;
}

#PowerOffMessage {
    font-family: 'Noto Sans JP', 'IPAPGothic', 'Noto Sans', sans-serif;
    font-size: 40px;
    font-weight: 700;
    color: #1e1e1e;
    margin: 36px 40px 24px 40px;
}

#PowerOffDialog button {
    min-height: 90px;
    min-width: 280px;
    margin: 0 20px 30px 20px;
    border: 2px solid rgba(0,0,0,0.45);
    border-radius: 0;
}
#PowerOffDialog button label { font-size: 34px; color: #ffffff; }

#PowerOffCancel        { background-color: #808080; }
#PowerOffCancel:hover  { background-color: #909090; }
#PowerOffCancel:active { background-color: #6E6E6E; }

#PowerOffConfirm        { background-color: #C62828; }
#PowerOffConfirm:hover  { background-color: #D33A3A; }
#PowerOffConfirm:active { background-color: #A61F1F; }