/* ESMS - Shared Stylesheet */
/* Theme: Industrial / Utility — dark navy + white + electric blue */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Share+Tech+Mono&display=swap');

:root {
  --navy:      #0d1b2a;
  --navy-mid:  #1b2d42;
  --navy-lite: #243b55;
  --accent:    #1e9bff;
  --accent2:   #00d4aa;
  --warn:      #ff6b35;
  --white:     #f0f4f8;
  --gray1:     #dce4ed;
  --gray2:     #a8b8cc;
  --gray3:     #6a7d95;
  --text:      #1a2840;
  --text-lite: #4a607a;
  --border:    #c8d8e8;
  --toggle-on: #1e9bff;
  --toggle-off:#a8b8cc;
  --radius:    4px;
  --shadow:    0 1px 4px rgba(13,27,42,.12);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 14px; }

body {
  font-family: 'Noto Sans JP', sans-serif;
  background: #eaf0f8;
  color: var(--text);
  min-height: 100vh;
}

/* ── Header ─────────────────────────────────── */
header {
  background: var(--navy);
  color: #fff;
  padding: 0 20px;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 2px solid var(--accent);
}
header .logo {
  font-family: 'Share Tech Mono', monospace;
  font-size: 1.15rem;
  letter-spacing: .12em;
  color: var(--accent);
  white-space: nowrap;
}
header .breadcrumb {
  font-size: .8rem;
  color: var(--gray2);
}
header a.back-btn {
  margin-left: auto;
  color: var(--gray2);
  text-decoration: none;
  font-size: .8rem;
  border: 1px solid var(--navy-lite);
  padding: 4px 10px;
  border-radius: var(--radius);
  transition: all .15s;
}
header a.back-btn:hover { color: #fff; border-color: var(--accent); }

/* ── Page wrapper ────────────────────────────── */
.page { padding: 16px 20px 40px; }

/* ── Section card ────────────────────────────── */
.section-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow);
  margin-bottom: 12px;
}
.section-card .section-hd {
  background: var(--navy-mid);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 6px 14px;
  border-radius: 6px 6px 0 0;
  border-left: 3px solid var(--accent);
}
.section-card .section-hd.sub {
  background: var(--navy-lite);
  font-size: .75rem;
  border-left-color: var(--accent2);
  border-radius: 0;
}
.section-body { padding: 12px 14px; }

/* ── Form rows ───────────────────────────────── */
.form-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.form-row label {
  font-size: .78rem;
  color: var(--text-lite);
  white-space: nowrap;
  min-width: 90px;
}
.form-row label.w-auto { min-width: auto; }

/* ── Inputs ──────────────────────────────────── */
input[type="text"], select {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 5px 8px;
  font-size: .82rem;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  height: 30px;
}
input[type="text"]:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(30,155,255,.18);
}
input[type="text"].w-20  { width: 20%; }
input[type="text"].w-15  { width: 15%; }
input[type="text"].w-10  { width: 10%; }
input[type="text"].w-30  { width: 30%; }
input[type="text"].w-full { width: 100%; }
select.w-15 { width: 15%; }
select.w-20 { width: 20%; }

/* ── Buttons ─────────────────────────────────── */
button {
  cursor: pointer;
  border: none;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: .82rem;
  font-weight: 500;
  padding: 6px 14px;
  height: 30px;
  transition: all .15s;
  white-space: nowrap;
}
.btn-primary   { background: var(--accent);  color: #fff; }
.btn-primary:hover   { background: #0e85e8; }
.btn-danger    { background: var(--warn);    color: #fff; }
.btn-danger:hover    { background: #e0552a; }
.btn-secondary { background: var(--gray1);   color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--border); }
.btn-addr      { background: var(--accent2); color: var(--navy); font-size: .75rem; padding: 4px 10px; height: 28px; }
.btn-addr:hover { background: #00bb96; }
button:disabled { opacity: .4; cursor: not-allowed; }

/* Main menu buttons */
.menu-btn {
  display: block;
  width: 100%;
  padding: 18px;
  font-size: 1.05rem;
  background: var(--navy-mid);
  color: #fff;
  border: 2px solid var(--navy-lite);
  border-radius: 8px;
  margin-bottom: 10px;
  text-align: left;
  transition: all .18s;
  letter-spacing: .05em;
}
.menu-btn:hover {
  background: var(--navy-lite);
  border-color: var(--accent);
  padding-left: 26px;
  color: var(--accent);
}

/* ── Toggle ──────────────────────────────────── */
.toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.toggle-wrap span {
  font-size: .76rem;
  color: var(--text-lite);
  white-space: nowrap;
}
.toggle-btn {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 20px;
  cursor: pointer;
  flex-shrink: 0;
}
.toggle-btn input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0;
  background: var(--toggle-off);
  border-radius: 20px;
  transition: background .2s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  left: 2px; top: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
}
.toggle-btn input:checked + .toggle-slider { background: var(--toggle-on); }
.toggle-btn input:checked + .toggle-slider::before { transform: translateX(18px); }

/* Radio-toggle group (pay_months) */
.radio-toggle-group { display: flex; flex-wrap: wrap; gap: 6px; }
.radio-toggle-group .rtg-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--gray1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3px 8px;
  cursor: pointer;
  font-size: .78rem;
  user-select: none;
  transition: all .15s;
}
.radio-toggle-group .rtg-item.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Month-toggle group */
.month-toggle-group { display: flex; flex-wrap: wrap; gap: 4px; }
.month-toggle-group .mtg-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 28px;
  background: var(--gray1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: .76rem;
  user-select: none;
  transition: all .15s;
}
.month-toggle-group .mtg-item.active {
  background: var(--accent2);
  color: var(--navy);
  border-color: var(--accent2);
  font-weight: 700;
}

/* ── 2-column layout ─────────────────────────── */
.two-col { display: flex; gap: 14px; align-items: flex-start; }
.col-left  { flex: 65; min-width: 0; }
.col-right { flex: 35; min-width: 0; }

/* ── Customer list (select) ──────────────────── */
.customer-list {
  width: 100%;
  height: calc(100vh - 140px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .82rem;
  font-family: inherit;
  background: #fff;
  color: var(--text);
  padding: 4px 0;
}
.customer-list option { padding: 6px 10px; }
.customer-list option:checked { background: var(--accent); color: #fff; }

/* ── Action bar ──────────────────────────────── */
.action-bar {
  display: flex;
  gap: 8px;
  padding: 10px 0 4px;
  border-top: 1px dashed var(--border);
  margin-top: 4px;
}

/* ── Inline group label ──────────────────────── */
.inline-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.group-label {
  font-size: .78rem;
  color: var(--text-lite);
  white-space: nowrap;
  min-width: 90px;
}

/* ── Transformer grid ────────────────────────── */
.trans-grid { display: flex; flex-direction: column; gap: 6px; }
.trans-row  { display: flex; align-items: center; gap: 6px; }
.trans-row .row-num {
  font-size: .72rem;
  color: var(--gray3);
  font-family: 'Share Tech Mono', monospace;
  min-width: 16px;
  text-align: right;
}

/* ── HV toggle grid ──────────────────────────── */
.hv-grid { display: flex; flex-wrap: wrap; gap: 10px 20px; }

/* ── Status bar ──────────────────────────────── */
#status-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 28px;
  background: var(--navy);
  color: var(--gray2);
  font-size: .74rem;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  z-index: 200;
  font-family: 'Share Tech Mono', monospace;
}
#status-bar .status-msg { color: var(--accent2); }
#status-bar .status-err { color: var(--warn); }