/* ============================================================
   インプラント管理システム 猫まわりの見た目（ねこ日和）

   ■ このファイルの立場
   style.css は3アプリ共通の部品を書く場所。ここは
   「インプラント管理システムだけの猫の演出」を足す場所で、
   style.css の後に読み込む。共通部品の定義は書かない。

   ■ 守っていること
   ・情報より飾りが先に目に入らないようにする。猫は「余白」に置き、
     文字やチップの上に重ねない。
   ・状態は今までどおり色＋文字＋アイコンで伝える。猫の表情は
     それに添えるだけで、猫がないと分からない情報を作らない。
   ・画像はすべて装飾。読み上げには出さない（alt="" / aria-hidden）。
   ============================================================ */

/* ---------- 同梱フォント ---------- */

@font-face {
  font-family: "Zen Maru Gothic";
  src: url("/fonts/zen-maru-gothic-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Zen Maru Gothic";
  src: url("/fonts/zen-maru-gothic-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Zen Maru Gothic";
  src: url("/fonts/zen-maru-gothic-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* 丸ゴシックは同じ太さでも細く見える。見出しだけ一段上げて力を戻す。 */
.page-head__title,
.section__title,
.dashboard__total-value,
.stat__value,
.task__patient {
  font-weight: 900;
}

/* ---------- ヘッダーの猫ロゴ ---------- */

.app-header {
  /* 生成りの地に対して白いヘッダーが浮くので、下線を茶側へ寄せる */
  border-bottom-color: var(--color-border-strong);
}

.app-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-inline: var(--layout-gutter);
  flex: none;
}

.app-brand__mark {
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
}

.app-brand__name {
  font-size: var(--fs-label);
  font-weight: 900;
  color: var(--color-ink-strong);
  white-space: nowrap;
}

/* ロゴを置いた分、ナビは中央寄せをやめて左詰めにする
   （中央寄せのままだとロゴとナビの間に意図しない空きができる） */
.app-header .app-nav {
  margin-inline: 0;
}

/* 画面が広くないときはアプリ名を畳み、ロゴだけ残す。
   名前を出したままだとタブの幅が足りず、「今日やること」が2行に折り返す
   （iPad mini 1133px で実測）。タブの読みやすさを優先する。 */
@media (max-width: 78rem) {
  .app-brand__name {
    display: none;
  }
  .app-brand {
    padding-inline: var(--space-3);
  }
}

/* ---------- ヒーロー帯（今日やること） ----------
   画面上部で猫が主役になる場所。猫の絵と吹き出しだけを置き、
   件数の内訳（タイル）はこの下にそのまま残す。 */

.cat-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--cat-hero-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

/* 吹き出しと区分タイルを縦に積む。猫の右を空けたままにしない。 */
.cat-hero__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

/* 帯の中では、タイルは白のカードではなく帯の一部として見せる */
.cat-hero .stat {
  background: var(--color-surface);
}

.cat-hero__cat {
  height: var(--cat-hero-h);
  width: auto;
  flex: none;
  /* 生成りの地から浮かせるための、ごく薄い落ち影 */
  filter: drop-shadow(0 3px 6px rgba(74, 47, 34, 0.14));
}

/* 吹き出し。左向きのしっぽを枠線ごと作るため、三角を2枚重ねる。 */
.cat-bubble {
  position: relative;
  align-self: flex-start;
  max-width: 100%;
  padding: var(--space-3) var(--space-5);
  background: var(--cat-bubble-bg);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-xl);
}

.cat-bubble::before,
.cat-bubble::after {
  content: "";
  position: absolute;
  top: 1.75rem;
  width: 0;
  height: 0;
  border-top: 0.5rem solid transparent;
  border-bottom: 0.5rem solid transparent;
}
.cat-bubble::before {
  left: -0.875rem;
  border-right: 0.875rem solid var(--color-border-strong);
}
.cat-bubble::after {
  left: -0.625rem;
  border-right: 0.875rem solid var(--cat-bubble-bg);
}

.cat-bubble__lead {
  font-size: var(--fs-label);
  color: var(--color-ink-muted);
}

.cat-bubble__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}

.cat-bubble__value {
  font-size: var(--fs-stat);
  font-weight: 900;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-tight);
}

.cat-bubble__text {
  font-size: var(--fs-body-lg);
  font-weight: 700;
  color: var(--color-ink-strong);
}

/* 画面が狭いときは猫を小さくし、吹き出しの幅を優先する */
@media (max-width: 48rem) {
  .cat-hero {
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
  }
  .cat-hero__cat {
    height: 6rem;
  }
}

/* ---------- 症例カードの表情バッジ ----------
   期限超過＝困り顔、待ち＝眠り顔、完了＝嬉しい顔。
   表情だけで状態を伝えないよう、状態バッジは今までどおり出す。

   今日やること（.task）と全案件（.order）はカードの組み立てが同じなので、
   同じ形で猫を1列目に足す（松田歯科OS P7：同じ意味の要素は同じ見た目）。 */

.task,
.order {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

/* 読み込み中の骨組みは .order の形を借りているが猫を持たない。
   1列目が空いたままにならないよう、2列に戻す。 */
.order.skeleton-card {
  grid-template-columns: minmax(0, 1fr) auto;
}

.cat-face {
  width: var(--cat-face-size);
  height: var(--cat-face-size);
  flex: none;
  align-self: start;
  margin-top: var(--space-1);
  padding: var(--space-1);
  /* 丸く切り抜くと耳と前足が欠け、困り顔か眠り顔か見分けられなくなる。
     角丸の四角にして絵を全部見せる。 */
  border-radius: var(--radius-lg);
  object-fit: contain;
  background: var(--cat-hero-bg);
  border: 2px solid var(--color-border);
}

/* 要対応のカードだけ、バッジの縁も要確認色にそろえる */
.task.is-problem .cat-face,
.order.is-problem .cat-face {
  background: var(--state-alert-bg);
  border-color: var(--state-alert-border);
}

/* iPadでは操作を下段へ回す（style.css の同じ切り替え幅に合わせる）。
   猫バッジは左に残し、本文だけが2列目に入る。 */
/* style.css の .order と同じ幅で切り替える（iPad第9世代 1080px を含む） */
@media (max-width: 72rem) {
  .task,
  .order {
    grid-template-columns: auto minmax(0, 1fr);
  }
  /* 工程チップへ横幅を渡すため、猫は一回り小さくする */
  .cat-face {
    width: 4rem;
    height: 4rem;
  }
  .order.skeleton-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .task__actions,
  .order__action {
    grid-column: 1 / -1;
  }
}

/* ---------- 0件のとき ----------
   もともとイラスト用に空けてあった枠（.today-empty__art）へ嬉しい顔を入れる。 */

.today-empty {
  background: var(--cat-hero-bg);
  border-color: var(--color-border-strong);
}

/* 今日やること（.today-empty__art）と全案件（.empty__cat）で
   0件のときの猫を同じ大きさ・同じ枠にそろえる。 */
.today-empty__art,
.empty__cat {
  display: flex;
  width: 11rem;
  height: 11rem;
  padding: var(--space-2);
  background: var(--cat-bubble-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xl);
}

.today-empty__art .cat-face,
.empty__cat .cat-face {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}

/* ---------- 全体の当たりを柔らかくする ---------- */

/* 絞り込みチップ。押している状態はテラコッタで塗る（共通の考え方のまま）。 */
.filter-chip {
  border-width: 2px;
}

/* 工程チップ・状態バッジは意味の色を持つので、形だけ丸める。 */
.status {
  font-weight: 700;
}

/* ---------- 「青＝完了・予定」を青のまま保つ ----------
   共通CSSは、完了や手術予定を --color-primary-soft（＝共通では青）で塗り、
   枠線だけ --state-waiting-border（青）を使っている箇所がある。
   このアプリは主要操作色をテラコッタへ変えたため、そのままだと
   「完了」がピンクに塗られ、要確認の赤と見分けにくくなる。
   意味が青である場所だけ、状態色から直接取り直す。 */

.step--done,
.calendar__case,
.surgery-case__date {
  background: var(--state-waiting-bg);
}

button.step:hover,
.calendar__case:hover {
  background: var(--color-surface-sunken);
}

/* ---------- うまくいったときに猫が出る ----------
   症例登録の完了表示（大きく）と、保存・記録の知らせ（小さく）。
   失敗のときは出さない。機嫌のよい猫が出ると、失敗に見えなくなるため。 */

/* 症例登録の完了表示。丸い緑のチェックの代わりに猫を置く。 */
.success-overlay__mark--cat {
  width: 8rem;
  height: 8rem;
  padding: var(--space-2);
  background: var(--cat-hero-bg);
  border: 2px solid var(--state-done-border);
  border-radius: var(--radius-xl);
}

.success-overlay__mark--cat .cat-face {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}

/* 保存・記録の知らせ。文字が主だが、小さすぎると猫と分からず
   ただの染みに見えるため、顔が読み取れる大きさまでは確保する。 */
.cat-face--mini {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}

/* ---------- 通信できないとき ----------
   もともとイラスト用に空けてあった枠（.offline-page__art）へ困り顔を入れる。
   このページはJSを読み込まないため、CSSの背景画像で置く。 */

.offline-page__art {
  width: 11rem;
  height: 11rem;
  background: var(--state-alert-bg) center / 84% no-repeat url("/images/cat/face-worried.webp");
  border-radius: var(--radius-xl);
}