/* =============================================================
   scaffold‑calculator.css (updated 2025‑08‑07)
   – 3‑column / independent scroll (≥768px)
   – Sheet‑style summary on portrait mobile (<768px)
   – Consolidated settings and summary panels
   – Unified button styles across the app
============================================================= */

/* 0. 固定バー（DL・計算など）共通設定 */

/*
 * Futuristic gradient background
 *
 * Apply a soft yet modern gradient to the page background.  The radial
 * gradient blends deep blues and purples reminiscent of a futuristic
 * interface.  We anchor the gradient at the centre so the edges of
 * the viewport transition smoothly into darker tones.  This
 * background sits behind the white card-like panels and footer, which
 * retain their own solid backgrounds and shadows for readability.
 */
body {
  /* Fallback solid colour for browsers that do not support gradients.  Use
     a very light azure so that the default still appears bright and
     unobtrusive. */
  background-color: #eaf8fd;
  /* Radial gradient anchored in the centre.  To ensure text remains
     legible even at the centre of the screen, choose very pale
     colours that fade to white at the edges.  Compared to prior
     versions, the gradient now begins with an almost white azure and
     transitions to pure white towards the perimeter. */
  background-image: radial-gradient(circle at center,
                                     #eaf8fd 0%,    /* nearly white azure at the core */
                                     #f3faff 50%,   /* very pale sky blue mid‑tone */
                                     #ffffff 100%   /* white towards the edges */);
  background-attachment: fixed;
  background-size: cover;
}

:root {
  --footer-h: 64px;
}

@media (max-width: 480px) {
  :root {
    --footer-h: 56px;
  }
}
.fixed-buttons,
.fixed-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 12px;
  display: flex;
  justify-content: center;
  gap: 12px;
  z-index: 1100;
}

/* 1. ３カラムレイアウト ── PC / 横タブ */
@media (min-width: 768px) {
  :root {
    --top-gap: 0px; /* 必要ならヘッダー分を調整 */
  }

  .app-grid {
    display: flex; /* ← grid → flex */
    gap: 24px;
    height: calc(100vh - var(--top-gap)); /* 画面いっぱい */
    padding-top: var(--top-gap);
  }

  .app-grid > * {
    flex: 1 1 0;
    overflow-y: auto; /* 列ごとにスクロール */
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
    padding: 24px;
    transition: box-shadow .25s;
  }

  .app-grid > *:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
  }
}

/* 2. モバイル縦型 (<768px) */
@media (max-width: 767px) and (orientation: portrait) {
  .app-grid {
    display: block; /* 1カラム縦フロー */
  }

  .job-info {
    flex-direction: column;
    gap: 8px; /* gapのサイズを縮小 */
  }

  .job-info-wrapper {
    padding: 8px 0; /* 上下余白を縮小 */
  }
}

/* 3. 共通ボタンスタイル */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  padding: 10px 24px;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .03em;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
  transition: background .25s, box-shadow .25s;
}

.btn:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

/* 色別ボタン */
.btn-primary {
  /* Blue gradient: lighter in the centre, darker at the edges */
  background-image: radial-gradient(circle, #64b5f6 0%, #1976d2 100%);
  color: #fff;
}

.btn-success {
  /* Green gradient: lighter centre, darker edges */
  background-image: radial-gradient(circle, #66bb6a 0%, #2e7d32 100%);
  color: #fff;
}

.btn-warning {
  /* Orange gradient: lighter centre, darker edges */
  background-image: radial-gradient(circle, #ffb74d 0%, #e65100 100%);
  color: #fff;
}

.btn-neutral {
  background: #546e7a;
  color: #fff;
}

/* Dedicated colour for the estimate download button.  Use a
   blue-grey tone that stands out against the page background. */
.btn-estimate {
  /* Light grey gradient for the estimate download button.  The
     centre is very pale and the edges slightly darker to create
     a subtle spotlight effect.  The text colour is dark for
     readability against the pale background. */
  background-image: radial-gradient(circle, #f0f0f0 0%, #bdbdbd 100%);
  color: #333;
}

/* 4. ボタンのフォーカスリング */
.btn:focus-visible {
  outline: 3px solid #90caf9;
  outline-offset: 2px;
}

/* 5. 固定バー内のボタン並び
   The footer now contains two rows (.top-row and .bottom-row) for small screens (<768px) and collapses into a single row on larger screens (>=768px).  The rows contain button elements styled with the .btn class. */
/* Base footer styling */
.fixed-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 12px;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 12px;
}

.button-row {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.button-row.top-row button,
.button-row.bottom-row button {
  flex: 1 1 0;
}

/* Ensure the summary button is always visible */
#toggleSummaryBtn {
  display: inline-flex !important;
}

/* Remove unwanted vertical gaps between the job info section and the main grid.  The
   paragraph following .job-info-wrapper (which displays the notice about
   material weights) may introduce a default top margin that results in a
   conspicuous blank area above the calculation columns.  Override the top
   margin on this paragraph to eliminate the extra space. */
.job-info-wrapper + p {
  margin-top: 0;
}

/* Responsive adjustments for medium and small screens */
@media (max-width: 767px) {
  /* Reduce margins and padding on narrow screens */
  .fixed-footer {
    padding: 0 8px;
  }
  .button-row {
    gap: 6px;
  }
  .btn {
    padding: 8px 12px;
    font-size: 0.9rem;
    min-width: 0;
  }
}

@media (max-width: 600px) {
  .fixed-footer {
    padding: 0 6px;
  }
  .button-row {
    gap: 4px;
  }
  .btn {
    padding: 6px 10px;
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .btn {
    padding: 4px 8px;
    font-size: 0.8rem;
  }
}

/* Larger screens: collapse rows into a single row */
@media (min-width: 768px) {
  .fixed-footer {
    flex-direction: row;
    justify-content: center;
    gap: 12px;
  }
  .button-row.top-row,
  .button-row.bottom-row {
    display: contents;
  }
}

/* 7. サマリー／設定パネルのスライド表示 */
#summaryBackdrop,
#settingsBackdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: none;
  z-index: 1000;
}

#summaryBackdrop.active,
#settingsBackdrop.active {
  display: block;
}

/*
 * Off‑canvas panels for calculation summary and settings.
 *
 * By default the panels are positioned off‑screen using the full
 * viewport width (100vw).  This ensures that even if the main
 * content column does not fill the entire screen, the panel will
 * still slide completely out of view.  When the `.open` class is
 * applied, the panels translate back to `0` and become visible.
 */
#settingsSummaryContainer,
#estimateSettingsContainer {
  position: fixed;
  top: 0;
  /* Avoid overlapping with the fixed footer by reserving its height */
  bottom: var(--footer-h);
  width: 360px;
  background: #fff;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.2);
  overflow-y: auto;
  /* Hide the panel completely by moving it one full viewport width off
     the screen.  Using 100vw rather than 100% ensures the element
     moves relative to the viewport, not just its own width. */
  transform: translateX(-100vw);
  transition: transform 0.3s ease;
  z-index: 1001;
  left: 0;
}

/* Ensure whichever panel is marked as front overlays the other.  By
   default both panels share z-index 1001; adding the .front class
   raises the z-index to 1002 so the panel appears above its
   sibling when both are open. */
#settingsSummaryContainer.front,
#estimateSettingsContainer.front {
  z-index: 1002;
}

/* Settings panel lives on the right.  Push it off the right edge by
   one viewport width when closed. */
#estimateSettingsContainer {
  left: auto;
  right: 0;
  transform: translateX(100vw);
}

/* When open, reset the transform so the panel is visible */
#settingsSummaryContainer.open {
  transform: translateX(0);
}

#estimateSettingsContainer.open {
  transform: translateX(0);
}

/* パネル内のタイトル行と閉じるボタン */
#settingsSummaryContainer h2,
#estimateSettingsContainer h2 {
  margin: 0;
  padding: 16px;
  font-size: 1.2rem;
  font-weight: 700;
  background: #f5f5f5;
  border-bottom: 1px solid #ddd;
  position: relative;
}

#closeSummaryBtn,
#closeSettingsBtn {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
}

/*
 * サマリー・設定パネル内の本文部分。スクロール末尾が
 * フッターに隠れないよう、フッター高さ分の余白を追加します。
 * フッターは2段構成になることもあるため、余白にはフッター高さ×2を加算しておきます。
 */
.panel-body {
  padding-bottom: calc(var(--footer-h) * 2 + 16px);
}

/* サマリーのテーブルスタイル */
#settingsSummaryTable {
  width: 100%;
  border-collapse: collapse;
}

#settingsSummaryTable th,
#settingsSummaryTable td {
  padding: 8px 12px;
  border-bottom: 1px solid #ddd;
}

#settingsSummaryTable th {
  text-align: left;
  background: #f5f5f5;
  font-weight: 600;
}

/* コスト結果テーブルのスタイル */
#costResultsTable {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
}

/*
 * Unused empty column on larger screens.  In some legacy layouts, a leftmost
 * column may remain empty after removing the summary panel from the grid.
 * Hide any element given the class `.empty-col` to prevent an unnecessary
 * blank column and ensure a consistent 3‑column layout.
 */
.empty-col {
  display: none;
}

#costResultsTable th,
#costResultsTable td {
  padding: 8px 12px;
  border: 1px solid #ccc;
  text-align: right;
}

#costResultsTable th {
  background: #f5f5f5;
  text-align: left;
  font-weight: 600;
}

#costResultsTable td:first-child,
#costResultsTable th:first-child {
  text-align: left;
}

#costResultsTable tfoot td {
  font-weight: 700;
}

/* 設定セクションのアクションボタン配置 */
.settings-actions {
  margin-top: 12px;
  display: flex;
  gap: 12px;
}

/* 顧客保存ボタンとリスト */
#saveClientBtn {
  margin-right: 12px;
}

/* プレースホルダーの色を薄く */
input::placeholder,
textarea::placeholder {
  color: #999;
}

/* その他ヘッダーやリンクのデフォルト色調整 */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #333;
}

/* 設定パネルのラベルと入力配置調整 */
aside#estimateSettingsContainer fieldset {
  border: none;
  margin: 0 0 24px;
}

aside#estimateSettingsContainer fieldset legend {
  font-weight: 700;
  margin-bottom: 8px;
}

aside#estimateSettingsContainer label {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
  font-size: 0.9rem;
}

aside#estimateSettingsContainer label span {
  margin-bottom: 4px;
  font-weight: 600;
}

aside#estimateSettingsContainer input,
aside#estimateSettingsContainer select {
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.9rem;
}

aside#estimateSettingsContainer .note {
  font-size: 0.8rem;
  color: #666;
  margin-bottom: 8px;
}

/* Estimate number controls in company settings */
aside#estimateSettingsContainer .estimate-number-setting {
  display: flex;
  align-items: center;
  margin: 8px 0;
  font-size: 0.9rem;
}
aside#estimateSettingsContainer .estimate-number-setting span {
  margin-left: 6px;
  font-weight: 600;
}
aside#estimateSettingsContainer .estimate-number-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 0.9rem;
}
aside#estimateSettingsContainer #estimateNumberDisplay {
  font-weight: 600;
}

/* Styles for estimate option toggles under the company info section */
aside#estimateSettingsContainer .estimate-options {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
aside#estimateSettingsContainer .estimate-options .toggle-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
}
aside#estimateSettingsContainer .estimate-options input[type="checkbox"],
aside#estimateSettingsContainer .estimate-options input[type="radio"] {
  margin: 0;
}

/* デモ用の隠し要素を非表示 */
.hidden {
  display: none;
}

/* ------------------------------------------------------------------
 * Settings panel alignment tweaks
 *
 * The settings panel originally stacked every label’s text and input
 * vertically, which caused mis‑alignment when long text or multiple
 * toggle rows were present.  To create a clean, left‑aligned form
 * layout we override the base styles defined above and use a
 * horizontal flex row.  Each label’s text (the span inside the
 * label) receives a fixed minimum width so that all inputs align
 * neatly to the left edge.  Inputs are allowed to grow to fill the
 * remaining space.  The toggle rows also adopt the same alignment
 * rules.
 *
 * These rules are appended near the end of the stylesheet to ensure
 * they override earlier definitions.
 */

/* Lay out the label as a horizontal row rather than stacked columns.
   Add !important to override any conflicting styles from other stylesheets
   (e.g. Bootstrap) that might enforce vertical layouts. */
aside#estimateSettingsContainer label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.5em !important;
  margin-bottom: 8px;
}

/* Provide a minimum width to label text so that inputs line up.  Use
   !important so that the width takes precedence.  The margin-bottom
   is reset to zero so that text does not create vertical gaps when
   labels are rendered in a row. */
aside#estimateSettingsContainer label span {
  min-width: 8em !important;
  margin-bottom: 0 !important;
  font-weight: 600;
}

/* Allow inputs and selects to expand and fill the remaining horizontal space */
aside#estimateSettingsContainer label input,
aside#estimateSettingsContainer label select,
aside#estimateSettingsContainer label textarea,
aside#estimateSettingsContainer label div {
  flex: 1 1 auto !important;
}

/* Special handling for the invoice number input.  The invoice number field
   consists of a prefix “T-” and an input.  To ensure it aligns with
   other form controls and does not overflow the card, we style the
   wrapping div (invoice-number-field) as a horizontal flex container
   and reset the flex properties for the prefix and input. */
aside#estimateSettingsContainer .invoice-number-field {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: 100% !important;
}
aside#estimateSettingsContainer .invoice-number-field .invoice-prefix {
  flex: 0 0 auto !important;
  min-width: auto !important;
  font-weight: normal !important;
}
aside#estimateSettingsContainer .invoice-number-field input#companyInvoiceNumber {
  flex: 1 1 auto !important;
  min-width: 13ch !important;
  width: 100% !important;
}

/* Ensure toggle rows adopt the same left‑aligned flex layout */
aside#estimateSettingsContainer .toggle-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.5em !important;
}

/* Indent the materials mode radio buttons relative to the parent option */
#materialsModeWrapper {
  margin-left: 1.5em;
}

/* On wider screens, ensure each column fills the available height so
   the cards match the viewport height. */
@media (min-width: 768px) {
  .app-grid > * {
    height: 100%;
  }
}

/* Align the estimate and invoice number toggles horizontally and ensure
   that the accompanying text stays on one line.  Add !important to
   enforce flex layout across multiple style sources. */
aside#estimateSettingsContainer .estimate-number-setting,
aside#estimateSettingsContainer .invoice-number-setting {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.5em !important;
  font-size: 0.9rem;
}

aside#estimateSettingsContainer .estimate-number-setting span,
aside#estimateSettingsContainer .invoice-number-setting span,
aside#estimateSettingsContainer .estimate-options .toggle-row span {
  white-space: nowrap !important;
}

/* Provide horizontal padding inside the settings panel body so that
   forms and labels do not run flush against the right edge.  This also
   creates a small left margin, improving readability on mobile. */
aside#estimateSettingsContainer .panel-body {
  /* Add extra horizontal padding so the settings content does not
     run flush against the right edge.  A slightly larger right
     padding creates breathing room on the far side of the card. */
  padding-left: 16px !important;
  /* Slightly increase the right padding to create breathing room on the far
     side of the card.  This avoids text or controls from touching the
     container boundary on large screens. */
  padding-right: 28px !important;
}

/* On desktop, leave a bit of space between the settings panel and the edge
   of the page.  Without this margin, the rightmost card in the three‑column
   layout can feel cramped against the viewport. */
@media (min-width: 768px) {
  aside#estimateSettingsContainer {
    margin-right: 16px;
  }
}

/* Ensure toggle rows use normal font weight.  The default span style
   inside labels applies a bold weight (font-weight: 600), which makes
   the text for checkboxes appear heavier than desired.  Override it
   here so that all toggle labels (e.g. transport in welfare, export
   sheet options) use a regular weight and align flush with their
   associated checkboxes. */
aside#estimateSettingsContainer .toggle-row span {
  font-weight: 400 !important;
}

/* Invoice number input: ensure the field is wide enough to display
   13 digits comfortably (including some margin).  Use ch units to
   match character width.  The !important flag ensures this rule
   overrides any inline flex sizing applied in the HTML. */
#companyInvoiceNumber {
  min-width: 13ch !important;
}
    /* 新しい材料費単価セクションのレイアウト */
    .rate-group {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-bottom: 12px;
    }
    .rate-group .material-name {
      font-weight: 600;
      margin-bottom: 4px;
    }
    /* 材料費単価セクションの単価行は2列レイアウト */
    .rate-group .price-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      align-items: flex-start;
    }
    .rate-group .price-row .price-pair {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .rate-group .price-row .price-pair input {
      width: 90px;
    }

    /* ラベルの改行を防ぐ */
    .rate-label {
      white-space: nowrap;
    }

    /* 各設定カード内にスクロールバーを設けるためのクラス。
       長いリストが含まれるカードでも指定した高さ内でスクロールできるようにします。 */
    .scrollable-card {
      max-height: 280px;
      overflow-y: auto;
      padding-right: 4px;
      margin-bottom: 8px;
    }