/* CLINICOS-MEDICAL-RECEIPT-UI-POLISH-011
 *
 * 系統設定 › 診所資料的內容區樣式。
 *
 * 只作用在這個面板：不改 Settings Shell、Header、Sidebar、Breadcrumb，也不影響其它設定分頁。
 * 一律沿用既有 --cos-* token 與 .cos-field / .cos-card 元件，不引入第二套 CSS framework。
 *
 * 原本是一張大卡把所有欄位直向堆疊，input 會拉到整個 1200px 寬。這裡做三件事：
 *   1. 內容限寬，讓輸入框維持可讀的行長
 *   2. 拆成「基本資料」「機構與收據資料」兩個區塊，各有標題
 *   3. Desktop 兩欄、窄螢幕自然單欄
 */

.clinic-profile-card-v1 {
  max-width: 880px;
}

.clinic-profile-body-v1 {
  display: flex;
  flex-direction: column;
  gap: var(--cos-space-xl);
}

/* ---------- 區塊 ---------- */
.clinic-profile-section-title-v1 {
  margin: 0 0 var(--cos-space-xs);
  font-size: var(--cos-fs-section-title);
  font-weight: var(--cos-fw-section-title);
  line-height: var(--cos-lh-section-title);
  color: var(--cos-text);
}

/* 輕量說明，不是警告框 —— 刻意不加底色與邊框。 */
.clinic-profile-section-note-v1 {
  margin: 0 0 var(--cos-space-md);
  font-size: var(--cos-fs-small);
  line-height: var(--cos-lh-small);
  color: var(--cos-text-muted);
}

.clinic-profile-section-title-v1 + .clinic-profile-grid-v1 {
  margin-top: var(--cos-space-md);
}

/* ---------- 兩欄式表單 ---------- */
.clinic-profile-grid-v1 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cos-space-md) var(--cos-space-lg);
  align-items: start;
}

/* 地址與 Logo 跨兩欄。 */
.clinic-profile-span-v1 {
  grid-column: 1 / -1;
}

.clinic-profile-grid-v1 .cos-field {
  margin: 0;
  min-width: 0;
}

.clinic-profile-grid-v1 .cos-field__control {
  width: 100%;
}

.clinic-profile-grid-v1 .cos-field__hint {
  display: block;
  margin-top: var(--cos-space-xs);
  font-size: var(--cos-fs-small);
  color: var(--cos-text-subtle);
}

.clinic-profile-logo-v1 {
  display: block;
  margin-top: var(--cos-space-sm);
  max-width: 160px;
  max-height: 160px;
}

.clinic-profile-logo-v1.hidden {
  display: none;
}

/* ---------- Action area ---------- */
.clinic-profile-actions-v1 {
  display: flex;
  justify-content: flex-end;
  gap: var(--cos-space-sm);
}

/* ---------- 窄螢幕自然單欄 ---------- */
@media (max-width: 900px) {
  .clinic-profile-grid-v1 {
    grid-template-columns: minmax(0, 1fr);
  }

  .clinic-profile-actions-v1 {
    justify-content: stretch;
  }

  .clinic-profile-actions-v1 .cos-btn {
    width: 100%;
  }
}