/* ADMIC 管理コンソール — Tabler ベースの軽微な調整のみ。
   基調は Tabler 既定の「白ベース + ブルー(#066fd1) アクセント」。 */

:root {
  --admic-thumb-h: 150px;
}

/* サイト一覧カードのサムネイル(プレビューiframe) */
.site-thumb {
  position: relative;
  height: var(--admic-thumb-h);
  overflow: hidden;
  background: var(--tblr-bg-surface-secondary, #f4f6fa);
  border-bottom: 1px solid var(--tblr-border-color, #e6e7e9);
}
.site-thumb iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1280px;
  height: 800px;
  border: 0;
  /* 1280x800 のプレビューをカード幅に縮小表示 */
  transform: scale(0.28);
  transform-origin: top left;
  pointer-events: none;
}
.site-thumb .site-thumb-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tblr-secondary, #667382);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: .04em;
}
/* サムネの上に置く透明クリック層(カード全体をリンクに) */
.site-thumb .site-thumb-hit {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* 詳細ページのプレビュー枠 */
.preview-frame {
  width: 100%;
  height: 70vh;
  min-height: 420px;
  border: 1px solid var(--tblr-border-color, #e6e7e9);
  border-radius: var(--tblr-border-radius, 6px);
  background: #fff;
}

/* ステータスの読み込み中プレースホルダ */
.status-loading {
  opacity: .55;
}

/* 空状態のアイコン */
.empty-icon-lg { font-size: 2.5rem; }

/* 長い会社名の省略 */
.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* サイトを開く画面(site.html): 細いツールバー + iframe全面 */
.site-view { display: flex; flex-direction: column; height: 100vh; }
.site-toolbar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .75rem;
  border-bottom: 1px solid var(--tblr-border-color, #e6e7e9);
  background: #fff;
  flex: 0 0 auto;
}
.site-toolbar-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 30vw;
}
.site-frame { flex: 1 1 auto; width: 100%; border: 0; background: #fff; }
.status-panel { width: 360px; max-height: 72vh; overflow: auto; }

/* カードのホバーで軽く持ち上げ */
.card-link-pop { transition: box-shadow .15s ease, transform .15s ease; }
.card-link-pop:hover { box-shadow: 0 .5rem 1rem rgba(24,36,51,.12); transform: translateY(-2px); }

/* ロゴ透過プレビュー(Before/After) */
.logo-preview {
  height: 96px;
  border: 1px solid var(--tblr-border-color, #e6e7e9);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff;
}
.logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* 透過を可視化する市松模様 */
.logo-preview.checker {
  background-image:
    linear-gradient(45deg, #e9ecef 25%, transparent 25%),
    linear-gradient(-45deg, #e9ecef 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e9ecef 75%),
    linear-gradient(-45deg, transparent 75%, #e9ecef 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-color: #fff;
}
.file-chip { font-size: .8125rem; }

/* ===== 会社管理ページ(site.html) ===== */
/* 上部バー(← 一覧へ / 会社名 / ステータス) */
.company-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .9rem;
  background: #fff;
  border-bottom: 1px solid var(--tblr-border-color, #e6e7e9);
}
.company-topbar .company-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46vw;
}

/* 左カラムの縮小プレビュー枠(iframeを縮小表示、クリックで拡大) */
.company-preview {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--tblr-bg-surface-secondary, #f4f6fa);
  cursor: zoom-in;
}
.company-preview iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1280px;
  height: 800px;
  border: 0;
  transform-origin: top left;
  pointer-events: none; /* クリックは拡大に使う */
}
.company-preview .zoom-hint {
  position: absolute;
  right: .5rem;
  bottom: .5rem;
  z-index: 2;
  background: rgba(24, 36, 51, .72);
  color: #fff;
  font-size: .75rem;
  padding: .15rem .55rem;
  border-radius: 999px;
  pointer-events: none;
}

/* 全画面オーバーレイ(拡大 / 編集): 既存 .site-toolbar / .site-frame を再利用 */
.site-fs {
  position: fixed;
  inset: 0;
  z-index: 1080;
  background: #fff;
  display: none;
  flex-direction: column;
}
.site-fs.open { display: flex; }

/* 情報パネルの定義リスト */
.info-dl { margin: 0; }
.info-dl > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .35rem 0;
  border-bottom: 1px solid var(--tblr-border-color, #f0f1f3);
}
.info-dl > div:last-child { border-bottom: 0; }
.info-dl dt { color: var(--tblr-secondary, #667382); font-weight: 400; white-space: nowrap; }
.info-dl dd { margin: 0; text-align: right; word-break: break-all; }

/* サイト応答ヘルスの丸ドット */
.health-dot {
  display: inline-block;
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  margin-right: .35rem;
  vertical-align: middle;
}
.health-ok { background: var(--tblr-green, #2fb344); }
.health-down { background: var(--tblr-red, #d63939); }
.health-none { background: var(--tblr-secondary, #98a2b3); }

/* 型判定 / AIメトリクス */
.type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}
.type-pill {
  min-width: 0;
  border: 1px solid var(--tblr-border-color, #e6e7e9);
  border-radius: 6px;
  padding: .5rem .6rem;
  background: var(--tblr-bg-surface-secondary, #f7f9fc);
}
.type-pill b {
  display: block;
  color: var(--tblr-secondary, #667382);
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.2;
}
.type-pill span {
  display: block;
  margin-top: .2rem;
  color: var(--tblr-body-color, #1f2937);
  font-size: .82rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
@media (max-width: 560px) {
  .type-grid { grid-template-columns: 1fr; }
}