/* むすぼなプラザ（M-84）の画面だけの飾り。共通の部品は musubona-ui.css */

/* hidden を付けた箱は必ず隠す */
[hidden] { display: none !important; }

.env-bar {
  background: var(--ms-warn-bg);
  border-bottom: 1px solid var(--ms-warn);
  color: var(--ms-text);
  font-size: 13px;
  padding: 6px 16px;
}
.head-btn { color: #fff; margin-left: 8px; }
.login-card { max-width: 420px; margin: 32px auto; display: flex; flex-direction: column; gap: 12px; }
.login-title { font-size: var(--ms-size-lg); margin: 0; }
.pz-status { margin-bottom: var(--ms-sp-4); }

/* 絵と名前の格子。広い画面は1行に8個。せまくなるほど数を減らし、スマホでも指で押しやすくする */
.pz-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--ms-sp-4) var(--ms-sp-2);
}
@media (max-width: 960px) { .pz-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 680px) { .pz-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 480px) { .pz-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.pz-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
  min-height: var(--ms-tap);
  padding: var(--ms-sp-2) var(--ms-sp-1);
  border-radius: var(--ms-radius);
  color: var(--ms-text);
  text-decoration: none;
  text-align: center;
}
.pz-tile:hover { background: var(--ms-green-soft); }
.pz-tile:focus-visible { outline: 3px solid var(--ms-green); outline-offset: 1px; }

.pz-icon {
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.1;
  background: var(--pz-color, #008350);
}
.pz-icon img { width: 100%; height: 100%; display: block; }

/* 文字の絵の色。台帳の icon_color（lambda/m84-plaza/catalog.js の ICON_COLORS）と同じ名前。白い文字が読める濃さにする */
.pz-c-green  { --pz-color: #008350; }
.pz-c-blue   { --pz-color: #1B5E8C; }
.pz-c-teal   { --pz-color: #0F766E; }
.pz-c-orange { --pz-color: #B45309; }
.pz-c-red    { --pz-color: #B3261E; }
.pz-c-purple { --pz-color: #6D3FA0; }
.pz-c-brown  { --pz-color: #7A4E2D; }
.pz-c-gray   { --pz-color: #52625B; }

.pz-name {
  font-size: var(--ms-size-sm);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.pz-out { display: block; font-size: 12px; color: var(--ms-text-sub); }

/* スマホの帯：名前とログアウトを折り返さない。メールは隠して幅を空ける */
.ms-header__title, .head-btn { white-space: nowrap; }
.ms-header__sub { overflow-wrap: anywhere; }
@media (max-width: 680px) {
  #whoami { display: none; }
}

/* ---- マスター画面（設定）。一覧の格子は上のまま ---- */
.pz-tabs { display: flex; flex-wrap: wrap; gap: var(--ms-sp-2); margin-bottom: var(--ms-sp-4); }
.pz-view { display: block; }
.pz-sub { font-size: var(--ms-size-lg); margin: var(--ms-sp-4) 0 var(--ms-sp-1); }
.pz-list { list-style: none; margin: var(--ms-sp-3) 0; padding: 0; display: flex; flex-direction: column; gap: var(--ms-sp-3); }
.pz-item { border: 1px solid var(--ms-line, #D4DCD8); border-radius: var(--ms-radius); padding: var(--ms-sp-3); display: flex; flex-direction: column; gap: var(--ms-sp-2); }
.pz-item--off { opacity: .7; }
.pz-item__head { display: flex; align-items: center; gap: var(--ms-sp-3); }
.pz-item__name { min-width: 0; overflow-wrap: anywhere; }
.pz-url { overflow-wrap: anywhere; }
.pz-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ms-sp-2); margin: var(--ms-sp-2) 0; }
.pz-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 220px; min-width: 0; margin-bottom: var(--ms-sp-2); }
.pz-edit { border-top: 1px dashed var(--ms-line, #D4DCD8); padding-top: var(--ms-sp-2); display: flex; flex-direction: column; gap: var(--ms-sp-2); }
.pz-edit > .pz-field { flex: 0 0 auto; }
.pz-edit > .ms-btn { align-self: flex-start; }
.pz-csv { min-height: 120px; }
.pz-checks { display: flex; flex-wrap: wrap; gap: var(--ms-sp-2) var(--ms-sp-4); }
.pz-check { display: inline-flex; align-items: center; gap: 6px; min-height: var(--ms-tap); }
.pz-order { display: flex; align-items: center; gap: var(--ms-sp-2); }
.pz-order .pz-icon { width: 44px; height: 44px; font-size: 14px; border-radius: 10px; }
.pz-order__name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.pz-move { min-width: var(--ms-tap); min-height: var(--ms-tap); padding: 0; }
.pz-people { list-style: none; margin: var(--ms-sp-2) 0; padding: 0; }
.pz-person { text-align: left; white-space: normal; min-height: var(--ms-tap); }
.pz-scroll { overflow-x: auto; }
.pz-detail { min-width: 160px; overflow-wrap: anywhere; }

/* ---- 切り欠き・下端をよける。ふつうのパソコンでは env() が 0 なので、見た目は変わらない ---- */
.env-bar {
  padding: calc(6px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 6px max(16px, env(safe-area-inset-left, 0px));
}
.ms-header {
  padding: calc(var(--ms-sp-4) + env(safe-area-inset-top, 0px)) max(var(--ms-sp-4), env(safe-area-inset-right, 0px)) var(--ms-sp-4) max(var(--ms-sp-4), env(safe-area-inset-left, 0px));
}
.env-bar:not([hidden]) + .ms-header { padding-top: var(--ms-sp-4); }
.ms-main {
  padding-left: max(var(--ms-sp-4), env(safe-area-inset-left, 0px));
  padding-right: max(var(--ms-sp-4), env(safe-area-inset-right, 0px));
  padding-bottom: calc(var(--ms-sp-5) + env(safe-area-inset-bottom, 0px));
}

/* ---- 押したときの反応。指の画面では hover の色が残らないようにする ---- */
.pz-tile, .ms-btn, .pz-check { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pz-tile:active { background: var(--ms-green-soft); }
@media (hover: none) {
  .pz-tile:hover, .ms-btn--sub:hover, .ms-btn--text:hover { background: transparent; }
  .pz-tile:active { background: var(--ms-green-soft); transform: scale(.97); }
  .ms-btn:not(:disabled):active { filter: brightness(.88); }
  .ms-btn--sub:active, .ms-btn--text:active { background: var(--ms-green-soft); }
  .head-btn:active { background: rgba(255, 255, 255, .22); }
}

/* ---- スマホ ここから ----
   むすぼなドアの中（WebView）と、スマホのブラウザ。介護の現場で、移動中に片手で使う。
   ここの中の文字は 16px 以上にする（test/static.test.js が見張る）。パソコンの見た目に影響する書き方をしない */
@media (max-width: 680px), (pointer: coarse) and (max-height: 500px) {
  :root { --ms-size-sm: 16px; color-scheme: light dark; }
  .ms-app { min-height: 100dvh; }

  /* 上の帯は小さく。名前は1行ずつ、長い法人名は … で止める。設定とログアウトは文字だけ */
  .ms-header {
    flex-wrap: wrap;
    gap: 0 var(--ms-sp-1);
    padding: calc(2px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 2px max(12px, env(safe-area-inset-left, 0px));
  }
  .env-bar:not([hidden]) + .ms-header { padding-top: 2px; }
  .ms-header .ms-spacer, #whoami { display: none; }
  .pz-head-names { flex: 1 1 110px; min-width: 0; line-height: 1.3; }
  .ms-header__title { font-size: 16px; }
  #tenant-name { font-size: 16px; opacity: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .head-btn { margin-left: 0; padding: 0 var(--ms-sp-2); min-height: 44px; font-size: 16px; font-weight: 400; }
  .env-bar { font-size: 16px; line-height: 1.4; }

  /* 絵の格子を最初に見せる。指1本で押せる大きさ */
  .ms-main {
    padding-top: var(--ms-sp-3);
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    padding-bottom: calc(var(--ms-sp-4) + env(safe-area-inset-bottom, 0px));
  }
  .pz-status:empty { display: none; }
  .pz-grid { margin: 0 -4px; gap: var(--ms-sp-2) var(--ms-sp-1); }
  .pz-tile {
    gap: var(--ms-sp-1);
    padding: var(--ms-sp-2) 1px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
  .pz-tile .pz-icon { width: min(76px, 100%); height: auto; aspect-ratio: 1 / 1; border-radius: 18px; font-size: 24px; }
  .pz-name { width: 100%; font-size: 16px; line-height: 1.35; }
  .pz-label { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; max-height: 4.05em; overflow: hidden; }
  .pz-keep { display: inline-block; }
  .pz-out { font-size: 16px; line-height: 1.3; }

  /* ログインの画面（入口が使えないとき） */
  #login {
    padding: calc(12px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  }
  .login-card { margin: var(--ms-sp-3) auto; }
  [data-ms-eye] + button { font-size: 16px !important; }

  /* ---- マスター画面（設定）：横にはみ出さない。ボタンは指で押せる大きさのまま、文字が折り返せる ---- */
  .pz-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pz-tabs .ms-btn, .pz-row .ms-btn { padding: var(--ms-sp-1) var(--ms-sp-2); font-size: 16px; line-height: 1.35; text-align: center; }
  .pz-row { align-items: stretch; }
  .pz-row .ms-btn { flex: 1 1 130px; }
  .pz-item { border: 1px solid var(--ms-border); background: var(--ms-surface); }
  .pz-edit { border-top: 1px dashed var(--ms-border); }
  .pz-item__head .pz-icon { width: 52px; height: 52px; border-radius: 12px; font-size: 16px; }
  .pz-order .pz-icon { font-size: 16px; }
  .pz-field { flex-basis: 100%; }
  .pz-check { min-width: 0; }
  .pz-check input { width: 24px; height: 24px; flex: none; accent-color: var(--ms-green); }
  input[type="date"] { display: block; min-width: 0; -webkit-appearance: none; appearance: none; }
  input[type="file"] { overflow: hidden; }
  .pz-person { width: 100%; justify-content: flex-start; padding: var(--ms-sp-1) var(--ms-sp-2); line-height: 1.4; }

  /* 変更の記録：表をカードに変える。項目の名前は data-label（settings.js）。文字は CSS が出すだけで HTML にしない */
  .pz-scroll { overflow-x: visible; }
  .pz-scroll .ms-table, .pz-scroll tbody { display: block; width: 100%; }
  .pz-scroll thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .pz-scroll .ms-table tbody tr, .pz-scroll .ms-table tbody tr:hover {
    display: block;
    margin-bottom: var(--ms-sp-3);
    padding: var(--ms-sp-2) var(--ms-sp-3);
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-radius);
    background: var(--ms-surface);
  }
  .pz-scroll .ms-table td {
    display: grid;
    grid-template-columns: 6.5em minmax(0, 1fr);
    gap: var(--ms-sp-2);
    min-width: 0;
    padding: var(--ms-sp-1) 0;
    border: 0;
    font-size: 16px;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .pz-scroll .ms-table td:empty { display: none; }
  .pz-scroll .ms-table td::before { content: attr(data-label); font-weight: 700; color: var(--ms-text-sub); }
}

/* 濃い色の画面：キットの緑（明るい緑）の上の白い文字は読みにくいので、スマホでは帯を濃い緑に、緑のボタンの文字を濃い色にする */
@media (prefers-color-scheme: dark) and (max-width: 680px), (prefers-color-scheme: dark) and (pointer: coarse) and (max-height: 500px) {
  :root:not([data-theme="light"]) .ms-header { background: #00693F; }
  :root:not([data-theme="light"]) .ms-btn:not(.ms-btn--sub):not(.ms-btn--text):not(:disabled) { color: var(--ms-bg); }
}
/* ---- スマホ ここまで ---- */