/* รอบ 28: ปรับหน้าแบบหน้าเดียว (fit-forms) — ตั้งค่าร้าน / บัญชีของฉัน / ไม่มีสิทธิ์ */

/* =====================================================================
   ตั้งค่าร้าน (Settings.razor)
   จอคอม: เมนูหมวดซ้าย + การ์ดเรียงแบบก่ออิฐ (CSS columns) เลื่อนในกรอบ ปุ่มบันทึกบนหัว
   แท็บเล็ต/มือถือ: ชิปหมวดติดบน + แถบบันทึกติดล่าง
   ===================================================================== */
@media screen {
  .fitf-settings .settings.fitf-form { display: block; }
  .fitf-head-tools { flex-wrap: nowrap; }
  .fitf-save-head { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
  .fitf-save-head svg { flex: none; }

  .fitf-dirty {
    display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 12px; border-radius: 999px;
    background: var(--warn-soft); color: var(--ink); font-size: .82rem; font-weight: 600; white-space: nowrap;
  }
  .fitf-dirty-dot { width: 8px; height: 8px; border-radius: 50%; background: #E8A33D; box-shadow: 0 0 0 3px rgba(232,163,61,.25); }

  /* การ์ด */
  .fitf-cols { columns: 3 340px; column-gap: 16px; }
  .fitf-cols > .fitf-card {
    break-inside: avoid; display: block; width: 100%; max-width: none; margin: 0 0 16px;
    scroll-margin-top: 6px;
  }
  .fitf-card > h2 { font-size: 1.05rem; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
  .fitf-card > h2::before { content: ""; width: 4px; height: 1.05em; border-radius: 4px; background: var(--brand); flex: none; }
  .fitf-card .form-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .fitf-card .loy-rule input { max-width: none; }
  .fitf-card .stack > p, .fitf-card .loy-fields > p { margin: -2px 0 0; }
  .fitf-card .stack > .check + .check { margin-top: -2px; }
  .fitf-card .check { align-items: flex-start; }
  .fitf-card .check input { flex: none; margin-top: 3px; }
  .fitf-link { overflow-wrap: anywhere; padding: 8px 12px; border-radius: 12px; background: var(--brand-tint); }
  .fitf-card .brand-preview { max-width: 420px; }

  @keyframes fitf-hit {
    0%, 30% { box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .55), var(--shadow); }
    100% { box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0), var(--shadow); }
  }
  .fitf-card.fitf-hit { animation: fitf-hit 1.8s ease-out; }

  /* เมนูหมวด (จอคอม) */
  .fitf-nav { margin: 0; padding: 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .fitf-nav-title { margin: 4px 10px 8px; color: var(--muted); font-size: .76rem; font-weight: 700; letter-spacing: .02em; }
  .fitf-nav-item {
    display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 12px;
    color: var(--ink); text-decoration: none; min-width: 0;
  }
  .fitf-nav-item:hover { background: var(--chip); }
  .fitf-nav-item.on { background: var(--brand-tint); }
  .fitf-nav-item.on strong { color: var(--brand-text, var(--brand)); }
  .fitf-nav-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-text, var(--brand)); }
  .fitf-nav-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .fitf-nav-text strong { font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fitf-nav-text small { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--muted); font-size: .77rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fitf-nav-text small.is-on { color: var(--ok); font-weight: 600; }
  .fitf-nav-text small.is-on::before, .fitf-nav-text small.is-off::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
  .fitf-nav-text small.is-off::before { background: var(--line); }
  .fitf-color-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line); }

  /* ชิปหมวด + แถบบันทึก: ซ่อนบนจอคอม */
  .fitf-chips, .fitf-savebar { display: none; }
}

@media screen and (min-width: 1025px) {
  .fitf-body .fitf-layout { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: stretch; }
  .fitf-nav { align-self: start; max-height: 100%; overflow: auto; }
  .fitf-settings .fitf-form { min-height: 0; overflow: auto; overscroll-behavior: contain; margin: 0 -8px; padding: 0 8px 4px; }
}
@media screen and (min-width: 1500px) {
  .fitf-body .fitf-layout { grid-template-columns: 280px minmax(0, 1fr); }
}

/* แท็บเล็ต + มือถือ */
@media screen and (max-width: 1024px) {
  .fitf-nav, .fitf-head-tools { display: none; }
  .fitf-chips {
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
    position: sticky; top: 0; z-index: 9; margin: 0 -16px; padding: 8px 16px; background: var(--bg);
  }
  .fitf-chips::-webkit-scrollbar { display: none; }
  .fitf-chip {
    flex: none; display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 999px;
    background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink);
    font-size: .88rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  }
  .fitf-chip.on { background: var(--brand); box-shadow: none; color: var(--brand-ink, #fff); }
  .fitf-cols { columns: 2 300px; }
  .fitf-cols > .fitf-card { scroll-margin-top: 64px; }

  .fitf-savebar {
    display: flex; align-items: center; gap: 12px; position: sticky; bottom: 12px; z-index: 9;
    padding: 8px 8px 8px 16px; border-radius: 18px; background: var(--surface);
    box-shadow: var(--shadow-lg, 0 6px 24px rgba(0,0,0,.15));
  }
  .fitf-savebar-state { flex: 1 1 auto; min-width: 0; color: var(--muted); font-size: .84rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .fitf-savebar-state.is-dirty { color: var(--ink); }
  .fitf-savebar-state.is-dirty::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #E8A33D; vertical-align: 1px; }
  .fitf-savebar-state.is-ok { color: var(--ok); }
  .fitf-savebar-state.is-error { color: var(--danger); }
  .fitf-savebar .btn { flex: none; min-height: 46px; padding: 0 20px; }
}

@media screen and (max-width: 760px) {
  .fitf-chips { top: calc(52px + env(safe-area-inset-top)); }
  .fitf-cols { columns: 1; }
  .fitf-cols > .fitf-card { margin-bottom: 12px; padding: 16px; scroll-margin-top: 116px; }
  .fitf-savebar { bottom: calc(76px + env(safe-area-inset-bottom)); margin: 0 -4px; }
  .fitf-card .form-grid { grid-template-columns: 1fr; }
}

/* รอบ 104: /settings?tab=online = แท็บ "ตั้งค่าร้านออนไลน์" (เมนู ร้านออนไลน์และเว็บไซต์) — การ์ดเดียว ไม่มีเมนูหมวด */
@media screen {
  .fitf-only-online .fitf-cols { columns: auto; max-width: 720px; margin-left: auto; margin-right: auto; }
  /* รอบ 133: หัว (ปุ่มบันทึก) กว้างเท่าการ์ดและอยู่กลางเหมือนกัน */
  .fitf-only-online .fit-head { width: 100%; max-width: 720px; margin-left: auto; margin-right: auto; }
  .fitf-only-online .fitf-cols > .fitf-card:not(#fitf-sec-online) { display: none; }
}
@media screen and (min-width: 1025px) {
  .fitf-only-online.fitf-settings .fitf-body .fitf-layout { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   บัญชีของฉัน (Account.razor): การ์ดคู่กลางจอ
   ===================================================================== */
@media screen {
  .fitf-account {
    display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 580px); gap: 18px;
    justify-content: center; align-items: start; width: 100%; padding-top: 8px;
  }
  .fitf-account > .panel { margin: 0; min-width: 0; }
  /* รอบ 133: คอลัมน์ขวา = รหัสผ่าน + PIN เข้าระบบ + PIN อนุมัติ ซ้อนกัน */
  .fitf-account-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
  .fitf-account-main > .panel { margin: 0; min-width: 0; }
  .fitf-account-page .fit-head { width: 100%; max-width: 938px; margin-left: auto; margin-right: auto; }

  .fitf-profile { position: relative; overflow: hidden; padding: 0 0 18px; display: flex; flex-direction: column; align-items: center; text-align: center; }
  .fitf-profile-band { align-self: stretch; height: 84px; background: linear-gradient(135deg, var(--brand), var(--brand-strong, var(--brand))); }
  .fitf-avatar {
    display: grid; place-items: center; width: 84px; height: 84px; margin-top: -42px; border-radius: 50%;
    background: var(--surface); color: var(--brand-text, var(--brand)); font-size: 2.1rem; font-weight: 800;
    box-shadow: 0 0 0 4px var(--surface), 0 0 0 5px var(--line);
  }
  .fitf-profile-id { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 12px 18px 0; }
  .fitf-profile-name { margin: 0; font-size: 1.2rem; overflow-wrap: anywhere; }
  .fitf-role { font-size: .8rem; }
  .fitf-profile-rows { align-self: stretch; margin: 18px 18px 0; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; text-align: left; }
  .fitf-profile-rows > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .fitf-profile-rows dt { color: var(--muted); font-size: .88rem; }
  .fitf-profile-rows dd { margin: 0; }

  .fitf-pw { padding: 22px 24px; }
  .fitf-pw-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
  .fitf-pw-head h2 { margin: 0 0 2px; font-size: 1.1rem; }
  .fitf-pw-head p { margin: 0; }
  .fitf-pw-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-text, var(--brand)); }
  .fitf-pw-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: start; }
  .fitf-forgot { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
}

@media screen and (max-width: 860px) {
  .fitf-account { grid-template-columns: minmax(0, 1fr); padding-top: 0; gap: 12px; }
  .fitf-account-main { gap: 12px; }
  .fitf-profile { flex-direction: row; flex-wrap: wrap; align-items: center; text-align: left; padding: 16px; gap: 4px 14px; }
  .fitf-profile-band { display: none; }
  .fitf-avatar { width: 56px; height: 56px; margin: 0; font-size: 1.5rem; box-shadow: none; background: var(--brand-soft); }
  .fitf-profile-id { flex: 1 1 0; align-items: flex-start; gap: 4px; padding: 0; }
  .fitf-profile-rows { flex: 1 1 100%; margin: 10px 0 0; padding-top: 12px; }
  .fitf-pw { padding: 16px; }
  .fitf-pw-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   ไม่มีสิทธิ์ (AccessDenied.razor): การ์ดกลางจอ
   ===================================================================== */
@media screen {
  .fitf-denied { display: grid; place-items: center; min-height: min(70vh, 640px); padding: 16px 0; }
  .fitf-denied-card.empty { max-width: 480px; width: 100%; margin: 0; padding: 36px 28px; border: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .fitf-denied-card h1 { font-size: 1.35rem; margin: 10px 0 4px; }
  .fitf-denied-card p { margin: 0 0 18px; }
  .fitf-denied-ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--brand-soft); color: var(--brand-text, var(--brand)); }
}