body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    margin: 20px;
    background: #f5f7fa;
}

h1 {
    font-size: 20px;
    margin-bottom: 16px;
}

h2 {
    font-size: 16px;
    margin-top: 24px;
    margin-bottom: 8px;
}

.table-wrapper {
    background: #ffffff;
    padding: 12px 16px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    margin-bottom: 16px;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

th, td {
    border: 1px solid #ddd;
    padding: 6px 8px;
}

th {
    background: #fafafa;
    text-align: left;
}

a {
    color: #1976d2;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.page {
    max-width: 1100px;
    margin: 0 auto;
}

.nav {
    margin-bottom: 16px;
    font-size: 13px;

    background: #ffffff;
    padding: 8px 0;
    border-bottom: 1px solid #ddd;
}

.nav a {
    margin-right: 12px;
    font-weight: 500;
}

.card {
    background: #fff;
    border-radius: 8px;
    padding: 16px 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    margin-bottom: 24px;
}

.detail-box {
    padding: 16px 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    margin-bottom: 24px;
}

.detail-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    font-size: 14px;
}

.detail-item label {
    width: 120px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-right: 16px;
}

.detail-item .value {
    flex: 1;
    color: #111;
    border-bottom: 1px solid #e0e0e0;
    padding: 4px 0 6px;
    min-height: 1.4em;
}

.detail-item label.nowrap-label {
    white-space: nowrap;
}

.link-button {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    margin: 0 0 0 0.7em;
    color: #0066cc;
    text-decoration: none;
    cursor: pointer;
    font: inherit;
}

.link-button:hover {
    text-decoration: underline;
}

.form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
}

.primary-action {
    font-weight: bold;
}

/* === デバイス状態カード（共通） ============================= */

.device-status-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;   /* デフォルトは中央寄せ */
}

/* カード自体（共通の外観） */
.device-status-card,
.latest-snapshot-section {
    border: 1px solid #e0e4ea;
    border-radius: 10px;
    padding: 16px 18px;
    background-color: #fff;
}

/* 左カードは固定幅（一覧やホームと同じカード感） */
.device-status-card {
    width: 280px;
}

/* デバイス詳細だけ：幅を広げる */
.portal-device .device-status-card{
  width: 90%;
}

/* 上段：稼働状況 ＋ センサー名 ＋ ID */
.device-status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.device-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

/* 稼働状態ボッチ（共通） */
.status-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    box-shadow:
        0 0 0 1px #ffffff,
        0 0 4px rgba(0, 0, 0, 0.35);
    background-color: #cccccc;
}

/* 稼働中：黄緑 */
.status-dot-active {
    background-color: #8bc34a;
}

/* 停止中：赤 */
.status-dot-inactive {
    background-color: #e53935;
}

.device-name-text {
    font-size: 1rem;
}

.device-id {
    font-size: 0.8rem;
    color: #888;
}

/* 中段以降：センサーの状況・コメント・最終日時 */
.device-status-body {
    margin-top: 8px;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.device-status-section-title {
    font-size: 0.8rem;
    color: #777;
}

.status-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
}

.status-label {
    font-size: 0.85rem;
    color: #555;
}

/* コメントエリア（横スクロール／marquee風） */
.status-comment {
    margin-top: 4px;
}

/* 外枠：1行だけ見せる・はみ出し隠す */
.marquee-wrapper {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    padding: 4px 0;      /* 上下にゆとり */
    line-height: 1.6;    /* 念のため */
}

/* 中身：左方向にずっと流す */
.marquee-text {
    display: inline-block;
    padding-left: 100%;
    margin: 0;
    line-height: inherit;
    font-size: 15px;
    color: #555;
    animation: scrollComment 20s linear infinite;
}

/* span の中身を折り返さないようにする */
.marquee-text span {
    white-space: nowrap;
}

/* コメントのmarqueeアニメーション */
@keyframes scrollComment {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* 最終イベント日時（フッター） */
.device-status-footer {
    margin-top: 6px;
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #777;
}

/* イベントバッジ（アニメーション付き） */
.event-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* わな発動 */
.event-trap {
    background-color: #fde0dc;
    color: #b00020;
    animation: pulseTrap 1.8s ease-in-out infinite;
}

/* 監視中 */
.event-patrol {
    background-color: #e3f2fd;
    color: #0d47a1;
    animation: pulsePatrol 2.0s ease-in-out infinite;
}

/* 電池残量低下 */
.event-battery {
    background-color: #fff8e1;
    color: #f57f17;
    animation: pulseBattery 2.2s ease-in-out infinite;
}

/* ぼんやり光るアニメーション（タイプ別） */
@keyframes pulseTrap {
    0% {
        box-shadow: 0 0 0 0 rgba(176, 0, 32, 0.6);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(176, 0, 32, 0);
        transform: scale(1.03);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(176, 0, 32, 0);
        transform: scale(1);
    }
}

@keyframes pulsePatrol {
    0% {
        box-shadow: 0 0 0 0 rgba(13, 71, 161, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(13, 71, 161, 0);
        transform: scale(1.02);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(13, 71, 161, 0);
        transform: scale(1);
    }
}

@keyframes pulseBattery {
    0% {
        box-shadow: 0 0 0 0 rgba(245, 127, 23, 0.5);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(245, 127, 23, 0);
        transform: scale(1.02);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(245, 127, 23, 0);
        transform: scale(1);
    }
}

/* ========= ポータルホーム向けの装飾 ================== */

.portal-home .card {
    background: transparent;
    box-shadow: none;
    border: none;
}

/* ポータル・詳細共通：デバイスカードの見た目（浮かせる＋押した感） */
.portal-home .device-status-card,
.portal-device .device-status-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
    display: flex;
    flex-direction: column;
}

.portal-device .device-main-layout .device-status-card .device-card-actions{
  margin-top: auto;
  padding-bottom: 12px;
}

.portal-device .device-status-card .device-status-body{
  flex: 1;
  width: 100%;
}

/* 左カード：設置場所／イベント発生日時 を下寄せ（memo/編集の直前に寄せる） */
.portal-device .device-status-card .device-status-footer{
  margin-top: auto;
  padding-bottom: 12px; /* memo/編集との間の余白は後で調整 */
}

/* 左カード：Marqueeを少し下げて、文字を少し大きく */
.portal-device .device-status-card .status-comment{
  margin-top: 20px;      /* 下げ幅：8〜16で調整 */
}

.portal-device .device-status-card .marquee-text{
  font-size: 25px;       /* 現状より少し大きく（例） */
}


/* ホームだけクリック可能にする */
.portal-home .device-status-card {
    cursor: pointer;
}

.portal-home .device-status-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
}

.portal-home .device-status-card:active {
    transform: translateY(1px) scale(0.99);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.22);
}

.muted {
    color: #6c757d;
    font-size: 0.9rem;
}

/* センサーの状況 と コメントの間 */
.portal-home .device-status-body .status-line,
.portal-device .device-status-body .status-line {
    margin-bottom: 8px;
}

/* コメント と フッターの間 */
.portal-home .device-status-body .status-comment,
.portal-device .device-status-body .status-comment {
    margin-bottom: 10px;
}

/* フッター全体の上マージン（保険） */
.portal-home .device-status-footer,
.portal-device .device-status-footer {
    display: block;
    margin-top: 6px;
    font-size: 0.85rem;
}

.portal-home .device-status-footer > div,
.portal-device .device-status-footer > div {
    margin-top: 2px;
}

/* カード全体をクリック可能に（ホームのみ） */
.portal-home .device-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.portal-home .device-card-link:active {
    opacity: 0.7;
}

.portal-home .device-card-link:hover .device-status-card {
    transform: translateY(-2px);
    transition: transform 0.15s;
}

/* 左からのスライドイン（標準速度） */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-60px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 右からのスライドイン（写真カード用） */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(60px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 最新の罠発動写真カードを右からスライドイン */
.portal-device .latest-snapshot-section {
    animation: slideInRight 0.45s ease-out;
    animation-delay: 0.05s; /* ほんの少しだけ後から出てくる感じ */
}

/* ========= ポータル「デバイス詳細」向け ================= */

/* タイトル＋戻るリンク（左右配置・幅860pxに統一） */
.portal-device .device-detail-header {
    max-width: 860px;
    margin: 0 auto 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* h1 / 戻るリンクは左寄せ */
.portal-device h1,
.portal-device .back-link {
    text-align: left;
}

/* 上段：カード＋最新写真（横並び・幅860px） */
.portal-device .device-main-layout {
    max-width: 860px;
    margin: 0 auto 24px;
    display: flex;
    gap: 12px;                 /* 2カード間の余白 */
    align-items: flex-start;   /* 上端ツライチ */
    justify-content: flex-start;
}

/* 詳細ページ：左（デバイスカード）は左寄せ & 伸びない */
.portal-device .device-status-grid {
    justify-content: flex-start;
    flex: 1 1 0;
    min-width: 0;
    flex-wrap: nowrap;
}

/* 右（最新写真）は残り幅を使う：地図カードと右端が揃う */
.portal-device .latest-snapshot-section {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;               /* ← 共通の width 固定を打ち消す */
}

.portal-device .latest-snapshot-section h2{
    margin-top: 0;
}

/* 下段「設置場所と地図」も同じ幅860pxでツライチ */
.device-detail-sections {
    max-width: 860px;
    margin: 24px auto 0;
}

.device-detail-sections .detail-section {
    background: #ffffff;
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    margin-bottom: 20px;
}

.device-detail-sections .detail-section h2 {
    font-size: 16px;
    margin: 0 0 8px;
    margin-top: 0;
}

.detail-section-body {
    font-size: 14px;
}

/* 写真プレースホルダ（共通） */
.photo-placeholder {
    height: 220px;
    border-radius: 8px;
    background: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-size: 13px;
}

/* ▼ デバイス詳細セクションのフェードイン＋下スライド */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.portal-device .device-detail-sections .detail-section {
    animation: fadeInDown 0.6s ease-out;
}

.portal-device .device-detail-sections .detail-section:nth-child(2) {
    animation-delay: 0.08s;
}

/* ===== 写真表示：位置ズレを起こさない版（重要） =====
   - height:100% 前提を捨てる（親の高さが未定でも崩れない）
   - wrapperをflex中央寄せ
   - imgは max-* で枠内に収める
*/

.portal-device .latest-snapshot-section .photo-wrapper,
.portal-device #latest-photo-wrapper.photo-wrapper {
    width: 100%;
    max-height: 320px;     /* 必要なら調整 */
    border-radius: 8px;
    background: #000;
    overflow: hidden;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.portal-device .latest-snapshot-section .snapshot-image,
.portal-device #latest-snapshot-img.snapshot-image {
    display: block;
    max-width: 100%;
    max-height: 320px;     /* wrapperと合わせる */
    width: auto;
    height: auto;
    object-fit: contain;
    background: #000;
}

.snapshot-meta {
    margin-top: 8px;
}

/* ===== portal-device も portal-home と同じ余白を適用 ===== */

/* コメントとフッターの間 */
.portal-device .device-status-body .status-comment {
    margin-bottom: 10px;
}

/* フッター全体の上マージン（home と揃える） */
.portal-device .device-status-footer {
    display: block;
    margin-top: 6px;
    font-size: 0.85rem;
}

/* フッターの2行間の余白 */
.portal-device .device-status-footer > div {
    margin-top: 2px;
}

/* デバイス一覧：列幅チューニング */
.admin-devices-table th:last-child,
.admin-devices-table td:last-child {
    white-space: nowrap;  /* 改行させない */
    width: 1%;            /* 最小幅に寄せる（余白を他列へ） */
}

/* 設置場所・最終イベントを少し広げる */
.admin-devices-table th:nth-last-child(3),
.admin-devices-table td:nth-last-child(3) {
    width: 140px;         /* 設置場所 */
}

.admin-devices-table th:nth-last-child(2),
.admin-devices-table td:nth-last-child(2) {
    width: 120px;         /* 最終イベント */
}

/* ===============================
   portal device-detail: auto reload時の初期演出だけ停止
   - GoogleMapは壊さない（transformは触らない）
   - バッジの光(pulse)は止めない
   =============================== */

/* 1) 初期表示のスライドイン（左カード）を止める */
html[data-auto="1"] .portal-device .slide-in-left {
  animation: none !important;
}

/* 2) 初期表示のスライドイン（最新写真）を止める */
html[data-auto="1"] .portal-device .latest-snapshot-section {
  animation: none !important;
}

/* 3) 下段セクションのフェード（fadeInDown）を止める */
html[data-auto="1"] .portal-device .device-detail-sections .detail-section {
  animation: none !important;
}

/* 4) バッジは生かす（念のため明示） */
html[data-auto="1"] .portal-device .event-badge {
  animation: inherit !important;
}

.memo-tooltip {
  position: relative;
  display: inline-block;
}

.memo-tooltip-text {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  left: 0;
  bottom: 125%;
  min-width: 220px;
  max-width: 360px;
  background: #333;
  color: #fff;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
  white-space: normal;
  z-index: 1000;
  transition: opacity 0.15s ease;
}

/* 吹き出しの三角 */
.memo-tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 16px;
  border-width: 6px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

/* hover + keyboard focus 両対応 */
.memo-tooltip:hover .memo-tooltip-text,
.memo-tooltip:focus-within .memo-tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* 待機中は写真エリアを消す（既存仕様を維持） */
.latest-snapshot-section.is-waiting .photo-wrapper {
  visibility: hidden;
}






/* ===== 写真カード：縦横比を維持したまま、デバイスカードに近づける ===== */

/* 写真枠のサイズ上限を指定（←ここが調整ポイント） */
.portal-device #latest-photo-wrapper.photo-wrapper{
  max-width: 300px !important;   /* 横を少し絞る */
  max-height: 210px !important;  /* 縦をデバイスカード寄りに */
  width: 100% !important;
  height: auto !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: #000 !important;
  border-radius: 8px !important;
}


/* 撮影日時の余白を詰める（白い板の縦を縮める主因） */
.portal-device .snapshot-meta{
  margin-top: 4px !important;      /* 8px→4px */
  font-size: 12px !important;      /* 少し小さく */
}



w
/* 画像は縦横比維持（切り抜き無し） */
#latest-photo-wrapper img{
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* portal device-detail 上段：写真カードの右余白を消す（上段だけ限定） */
.portal-device .device-main-layout > #latest-snapshot-section.latest-snapshot-section{
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  
}

/* portal device-detail 上段：左右カードの縦幅を揃える */
.portal-device .device-main-layout{
  align-items: stretch;   /* 子要素を同じ高さに伸ばす */
}

/* portal device-detail 上段：写真だけ少し大きく（比率維持） */
.portal-device .device-main-layout #latest-photo-wrapper{
  width: 400px !important;
  height: 301px !important; /* 318:239 と同じ比率 */
}

.portal-device #latest-photo-wrapper { width: 100%; }
.portal-device #latest-snapshot-img { width: 100%; height: auto; display: block; }

/* 写真セクションだけ中央寄せ（他の地図・メール等には影響しない） */
.portal-device #latest-snapshot-section .detail-section-body{
  display: block;            /* 念のため：ここは弄らない */
}

.portal-device #latest-snapshot-present{
  display: flex;
  flex-direction: column;
  align-items: center;       /* ←写真と撮影日時を中央に */
}

.portal-device #latest-photo-wrapper{
  margin: 0 auto;            /* ← wrapper自体を中央 */
}

/* portal-device: 初期表示スライドイン（左カード） */
.portal-device .slide-in-left{
  animation: slideInLeft 0.45s ease-out;
}
@keyframes slideInLeft{
  0%   { opacity: 0; transform: translateX(-60px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* 写真カード：共通カードと同じ影にする（変な内側枠を出さない） */
.portal-device #latest-snapshot-section.latest-snapshot-section{
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
  border: 1px solid rgba(15, 23, 42, 0.08); /* 任意：薄い縁 */
}

/* 中身の枠線/影が出てたら殺す（ここが原因になりやすい） */
.portal-device #latest-snapshot-section .detail-section-body,
.portal-device #latest-snapshot-section #latest-photo-wrapper{
  box-shadow: none !important;
  border: 0 !important;
}

.page.portal-home > h1{
  margin-left: 0;
  padding-left: 0;
  text-align: center;
}

/* portal/device-edit：カードとh1を同じ幅で中央寄せ */
.page.portal-device > h1,
.page.portal-device .portal-device-edit-card{
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* カードhover時のちらつき対策（合成を安定させる） */
.device-status-card{
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

/* 発報履歴テーブル内のバッジちらつき対策 */
.event-badge{
  display: inline-block;          /* レイアウト安定 */
  transform: translateZ(0);       /* GPU合成 */
  backface-visibility: hidden;
  will-change: transform;
}