/* cisother.html page override */
@layer pages {
  /* =========================================
     Container Layout
     ========================================= */
  .search-form-container {
    display: flex;
    width: 100%;
    justify-content: flex-start;
  }

  .search-form-container .form-section {
    margin-bottom: var(--space-6);
  }
  
  .search-form-container .form-section:last-child {
    margin-bottom: 0;
  }

  .search-form-container .search-form {
    width: 100%;
    max-width: none;
  }

  /* =========================================
     Section Spacing & Structure
     ========================================= */
  /* Wrapper for each form section to handle spacing */
  .search-form-container .form-section {
    width: 100%;
  }

  .search-form-container .form-section:last-child {
    margin-bottom: 0;
  }

  /* =========================================
     Heading Styles (H2)
     ========================================= */
  .cisother-sub-section-title {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-yellow-900);
    padding-left: var(--space-3);
    border-left: 4px solid #f5d54a;
    width: 80%;
    margin-inline: auto;
    margin-top: var(--space-10); /* Add spacing above H2 */
    margin-bottom: var(--space-3); /* Add spacing below H2 */
  }
  
  /* Remove top margin for the first section title */
  .search-form-container .form-section:first-child .cisother-sub-section-title {
    margin-top: 0;
  }

  /* =========================================
     Form Grid Layout (Default: 2 Columns)
     ========================================= */
  /* The div immediately following the title contains the form items */
  .search-form-container .search-form .cisother-sub-section-title + div {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-8);
    row-gap: var(--space-6);
    align-items: start;
    width: 80%; /* Default width for form fields area */
  }

  /* Reset margin for form items inside grid */
  .search-form-container .search-form .cisother-sub-section-title + div .form-item {
    margin-bottom: 0;
  }

  /* Full width items in 2-column layout */
  .search-form-container .search-form .cisother-sub-section-title + div .form-item[data-label="不具合状況詳細"],
  .search-form-container .search-form .cisother-sub-section-title + div .form-item:has(button[data-type="file"]),
  .search-form-container .search-form .cisother-sub-section-title + div .form-item[data-type="radio"] {
    grid-column: 1 / -1;
  }

  /* =========================================
     Specific Section Overrides
     ========================================= */
  /* Defective Content Section (自動車不具合内容): Single Column */
  .search-form-container .search-form .defective-content-section .cisother-sub-section-title + div {
    grid-template-columns: 1fr;
    width: 80%;
  }

  /* =========================================
     File Select Button Styles
     ========================================= */
  .btn-file-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid #d1a34d;
    background-color: #fff;
    color: #d1a34d;
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-sm);
    cursor: pointer;
    width: auto;
    transition: background-color 0.2s, color 0.2s;
  }

  .btn-file-select:hover {
    background-color: #fdf8ed;
  }

  /* Force rounded corners for file select buttons */
  .search-form-container button[data-type="file"].btn-file-select {
    border-radius: 10px !important;
    -webkit-appearance: none;
    appearance: none;
    overflow: hidden;
  }

  /* =========================================
     Confirmation Page Styles
     ========================================= */
  .search-form-container > div:not(.search-form) {
    width: 100%;
  }

  .search-form-container .form-fields {
    width: 80%;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-8);
    row-gap: var(--space-6);
    align-items: start;
  }

  /* Finish Page Layout */
  .search-form-finish-inner {
    width: 75%;
    margin-inline: auto;
  }

  .search-form-container .commonLayout {
    width: 100%;
    margin-top: var(--space-4);
  }

  /* Align finish page content with the heading */
  .search-form-container .commonLayout .section {
    width: 80%;
    margin-inline: auto;
  }

  #search-form-finish-container .search-form-finish-inner .cisother-sub-section-title {
    width: 100%;
    margin-inline: 0;
  }

  #search-form-finish-container .search-form-finish-inner .search-form-container .commonLayout .section {
    width: 100%;
    margin-inline: 0;
  }

  /* Defective Content Section in Confirmation: Two Columns */
  #search-form-confirm-container .search-form-container .defective-content-section .form-fields {
    width: 80%;
    margin-inline: auto;
    grid-template-columns: repeat(2, 1fr);
  }

  /* Keep long content/file rows full width in confirmation */
  #search-form-confirm-container .search-form-container .defective-content-section .form-fields .confirm-item:nth-last-child(-n + 2) {
    grid-column: 1 / -1;
  }

  /* Confirmation Actions */
  .followup-note {
    width: 80%;
    margin-inline: auto;
  }

  .confirm-actions,
  .btnContainer {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
  }

  /* =========================================
     Input with Unit (e.g. KM)
     ========================================= */
  .input-with-unit {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .input-with-unit .form-control {
    flex: 1;
  }

  .input-with-unit .unit-text {
    font-weight: var(--font-weight-bold);
    color: var(--color-black);
  }

  /* =========================================
     Responsive Styles
     ========================================= */
  @media (max-width: 768px) {
    .cisother-sub-section-title {
      font-size: var(--text-xl);
      width: 100%;
      margin-inline: 0;
    }

    /* Stack grid on mobile */
    .search-form-container .search-form .cisother-sub-section-title + div,
    .search-form-container .form-fields {
      grid-template-columns: 1fr;
      width: 100%;
    }

    .followup-note {
      width: 100%;
      margin-inline: 0;
    }

    .search-form-container .commonLayout .section {
      width: 100%;
      margin-inline: 0;
    }

    .search-form-finish-inner {
      width: 100%;
      margin-inline: 0;
    }
    
    /* Reset width override for mobile */
    .search-form-container .search-form .defective-content-section .cisother-sub-section-title + div,
    .search-form-container .defective-content-section .form-fields {
      width: 100%;
    }
  }

  @media (max-width: 576px) {
    .cisother-sub-section-title {
      font-size: var(--text-lg);
    }
  }

}