/* 訪問カード・基準ゴースト・未割当トレイ内カードのスタイル。
   情報順は 保険区分バッジ→利用者名→訪問時刻→所要時間→訪問地域 で固定する。
   色だけで意味を伝えず、必ず文字ラベルを併用する（正本 §6-2）。 */

:root {
  /* カードの立体感。面の上端に光、下端に影を置き、下方向へ影を重ねる。
     色は付けず、濃さだけで奥行きを出すので保険区分の地色を邪魔しない。 */
  --card-3d:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -1px 0 rgba(15, 23, 42, 0.07),
    0 1px 1px rgba(15, 23, 42, 0.07),
    0 2px 3px rgba(15, 23, 42, 0.10),
    0 5px 9px rgba(15, 23, 42, 0.09);
  --card-3d-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 2px 3px rgba(15, 23, 42, 0.10),
    0 7px 14px rgba(15, 23, 42, 0.17);
  /* 押している間は浮きを消して、沈んだように見せる。 */
  --card-3d-flat:
    inset 0 1px 0 rgba(255, 255, 255, 0.70),
    0 1px 1px rgba(15, 23, 42, 0.12);
  /* 掴んで動かしている間のカード。持ち上げているのが分かるよう影を強くする。 */
  --card-3d-lift:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 3px 6px rgba(15, 23, 42, 0.18),
    0 12px 22px rgba(15, 23, 42, 0.28);
  --card-sheen: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.86) 0%,
    rgba(255, 255, 255, 0.10) 46%,
    rgba(15, 23, 42, 0.06) 100%);
}

/* 行の高さ100pxに対し上下4pxずつ空ける。中身（バッジ＋4行）が92pxに収まるよう
   行間と行の間隔を詰めてあるので、文字が途中で切れない。 */
.visit-card {
  position: absolute; top: 4px; bottom: 4px; z-index: 3;
  border: 1px solid #c2c8d2; border-radius: 7px; padding: 4px 7px;
  font-size: 11px; line-height: 1.3; color: var(--ink-2);
  overflow: hidden; cursor: grab;
  /* 指でカードをなぞったときに、画面のスクロールではなくカードの移動として扱う。
     この指定が無いと、スマートフォンではドラッグではなくスクロールになってしまう。 */
  touch-action: none;
  background-color: var(--surface); background-image: var(--card-sheen);
  box-shadow: var(--card-3d);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.visit-card:hover {
  transform: translateY(-1px); box-shadow: var(--card-3d-hover);
  border-color: #8b96a5; z-index: 4;
}
.visit-card:active { transform: translateY(1px); box-shadow: var(--card-3d-flat); }
.visit-card:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
/* 保険区分の地色（正本 §6-2）。立体感の陰影を消さないよう background-color だけ変える。 */
.ins-medical { background-color: #eaf2fd; border-color: #a9c6ea; }
.ins-care { background-color: #fdf5e0; border-color: #e0c483; }
.ins-special { background-color: #fdeef5; border-color: #eeaecb; }
.card-name {
  font-weight: 700; font-size: 13px; color: var(--ink); letter-spacing: 0.02em;
  margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-time, .card-meta, .card-duration, .card-town {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 10px; color: var(--ink-2);
}
.card-time {
  font-variant-numeric: tabular-nums; font-weight: 600; font-size: 11px;
  color: var(--ink-2); margin-top: 1px;
}
.card-duration { color: var(--ink-3); }
.card-town { color: var(--ink-3); margin-top: 1px; }
.card-baseline {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 10px; color: #5b21b6; margin-top: 1px;
}
.card-badges { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; overflow: hidden; }
.badge {
  display: inline-block; font-size: 10px; line-height: 15px; padding: 0 6px;
  border-radius: 999px; white-space: nowrap; letter-spacing: 0.03em;
  overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.badge-change {
  background: #f1ecfe; color: #5b21b6; border: 1px solid #c4b5fd; font-weight: 700;
}
.badge-warn {
  background: var(--danger); color: #fff; font-weight: 700; border: 1px solid #b91c1c;
}
.badge-unassigned { background: #374151; color: #fff; font-weight: 700; }
/* 訪問の日時をまだ利用者・ご家族へお知らせしていない予定。
   赤太枠は「注意（重複・勤務時間外）」専用なので、連絡は別の色で示す。 */
.badge-notice {
  background: #ea580c; color: #fff; border: 1px solid #c2410c; font-weight: 700;
}
/* 狭いカードではバッジが端で切れて読めなくなるため、左端の太い線でも示す。
   線は幅に関係なく必ず見えるので、これが未連絡の主な目印になる。 */
.visit-card.is-unnotified {
  border-left: 5px solid #ea580c;
}
.baseline-card .badge-notice { display: none; }
/* 保険区分バッジ。区分ごとに色を変え、文字ラベルと必ず併用する。 */
.badge-ins {
  border: 1px solid #98a2b1; color: var(--ink); font-weight: 700;
  background: rgba(255, 255, 255, 0.86); font-size: 10px; padding: 0 7px;
}
.ins-medical .badge-ins { border-color: #7ea6dd; color: #1d4ed8; }
.ins-care .badge-ins { border-color: #cfa53f; color: #92400e; }
.ins-special .badge-ins { border-color: #dd8fb6; color: #9d174d; }
.visit-card.is-changed { box-shadow: var(--card-3d), inset 3px 0 0 var(--change); }
.visit-card.has-warning {
  border: 2px solid var(--danger); padding: 3px 6px;
  box-shadow: var(--card-3d), 0 0 0 2px rgba(220, 38, 38, 0.14);
}
.visit-card.is-selected {
  outline: 2px solid var(--accent); outline-offset: 1px;
  box-shadow: var(--card-3d-hover); border-color: #7f94b5;
}
/* 掴んだあとの「もとの場所」。消さずに残して、どこから動かしたか分かるようにする。 */
.visit-card.is-dragging { opacity: 0.5; transform: none; box-shadow: var(--card-3d-flat); }
/* 狭いカードは字を1段落として、氏名・時刻・所要時間が最低限読めるようにする。
   幅の段階は cards.js が実際のカード幅(px)から決めるので、画面を狭めても文字は溢れない。 */
.tier-small .card-name { font-size: 11px; }
.tier-tiny .card-name { font-size: 10.5px; }
.tier-tiny .card-time, .tier-small .card-time { font-size: 10px; letter-spacing: -0.02em; }
.tier-tiny .card-duration { font-size: 9.5px; }
.tier-tiny .badge, .tier-small .badge { padding: 0 3px; letter-spacing: 0; }
/* 狭いカードは左右の余白を詰めて、氏名・時刻・町名が省略されにくいようにする。 */
.tier-tiny, .tier-small { padding-left: 2px; padding-right: 2px; }
.tier-tiny.has-warning, .tier-small.has-warning { padding-left: 1px; padding-right: 1px; }

/* カード右端の「つまみ」。ここを左右へ引くと訪問の所要時間を変えられる。
   所要時間は5分刻みで自由に変えず、許可された候補値へ吸着する（正本 §8 / HYP-06）。
   時間軸の上にあるカードだけに付ける（未割当トレイのカードには付けない）。
   幅は drag.js の GRIP_PX と同じ8pxにする。 */
.staff-track .visit-card::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 8px;
  cursor: ew-resize; border-right: 3px solid rgba(15, 23, 42, 0.30);
  background: linear-gradient(90deg, rgba(15, 23, 42, 0), rgba(15, 23, 42, 0.10));
}
.staff-track .visit-card:hover::after { border-right-color: var(--accent); }
/* 伸縮している間のカード。位置は動かさず、幅だけが変わることを見せる。 */
.visit-card.is-resizing {
  z-index: 4; cursor: ew-resize; transform: none;
  border-color: var(--accent); box-shadow: var(--card-3d-hover);
}
.visit-card.is-resizing::after { border-right-color: var(--accent); }

/* 動かせないカード（閲覧のみの日）は、指でなぞったらスクロールできるままにする。 */
.readonly-day .visit-card { touch-action: auto; }

/* 指で操作するとき（pointer: coarse）のつまみ。8pxでは押せないので広げる。
   幅は drag.js の GRIP_TOUCH_PX と同じ20pxにする。 */
@media (pointer: coarse) {
  .staff-track .visit-card::after { width: 20px; }
}

/* 定期訪問予定のゴーストカード。実際の当日予定より弱く見せる。
   立体感は付けず平らなままにして、今日の予定と一目で区別できるようにする。 */
.baseline-card {
  position: absolute; top: 7px; bottom: 7px; z-index: 2;
  border: 1px dashed #94a3b8; border-radius: var(--radius); padding: 2px 5px;
  background: repeating-linear-gradient(
    135deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.86) 4px,
    rgba(148, 163, 184, 0.24) 4px, rgba(148, 163, 184, 0.24) 8px);
  font-size: 10px; line-height: 1.2; color: #4b5563;
  overflow: hidden; cursor: pointer; box-shadow: none;
}
.baseline-card .card-name, .baseline-card .card-time { font-weight: normal; color: #6b7280; }
.baseline-card .card-name { font-size: 12px; }
.baseline-card .card-duration, .baseline-card .card-town { color: #6b7280; }
/* バッジも実予定より弱く見せる。文字は同じで、色の濃さだけ落とす。 */
.baseline-card .badge-ins { border-style: dashed; border-color: #9ca3af; color: #4b5563; opacity: 0.8; }
.baseline-card:focus { outline: 2px solid #6b7280; outline-offset: 1px; }
.baseline-card.is-selected { outline: 2px solid #6b7280; outline-offset: 1px; }
.legend-ghost {
  background: repeating-linear-gradient(
    135deg, #fff, #fff 3px, rgba(148, 163, 184, 0.35) 3px, rgba(148, 163, 184, 0.35) 6px);
  border: 1px dashed #6b7280;
}

/* 未割当トレイ内のカード。「定期訪問予定」1行が増えるぶん高さを確保する。 */
.tray-card {
  position: relative; top: auto; bottom: auto;
  flex: 0 0 168px; width: 168px; min-height: 108px;
  border-width: 2px; border-style: solid; box-shadow: var(--card-3d);
}
.tray-card:hover { box-shadow: var(--card-3d-hover); }

/* ドラッグ中にマウスについて動くカード（掴んだカードの複製）。
   スタッフ名の列（z-index 5）や時間の目盛り行（6）より前面へ出し、
   動かしている途中で下へ隠れて見失わないようにする。
   .visit-card / .tray-card の位置指定に打ち消されないよう、
   このファイルの最後に、より強い指定で置く。 */
.visit-card.drag-ghost {
  position: fixed; z-index: 1200; pointer-events: none;
  top: 0; left: 0; bottom: auto; height: 92px; min-height: 0;
  opacity: 1; transform: none; cursor: grabbing;
  box-shadow: var(--card-3d-lift);
}