/*
 * Quiz Test Builder 共通ベースCSS（Advance Content Builder 準拠）
 * - AAM (.aam-card / .aam-wrap / .aam-toolbar / .aam-breadcrumb) を利用
 * - ASB(.asb-*) のレイアウトを qtb-* にコピー（サンプル同様）
 */

/* AAMカードの形を利用（サンプル同様） */
@import url("../../advance-app-manager/assets/admin.css");
@import url("../../advance-app-manager/assets/my-page.css");

/* ===========================
   ラッパー
   =========================== */
.aam-wrap.qtb-wrap {
  max-width: 1100px;
  margin: 20px auto;
  padding: 0 12px 32px;
  box-sizing: border-box;
}

/* パンくず（小さめ） */
.aam-breadcrumb.qtb-breadcrumb {
  margin-top: 6px;
  margin-bottom: 8px;
  color: #666;
  font-size: 12px;
}

/* カード内タイトル */
.aam-card .qtb-sec-title {
  font-weight: 600;
  margin-bottom: 10px;
  font-size: 15px;
}

/* ===========================
   エディターヘッダ（戻る＋タブ）※旧互換（残してOK）
   =========================== */
.qtb-editor-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}
.qtb-editor-header-left { justify-self: start; display: flex; align-items: center; gap: 10px; }
.qtb-editor-header-right { justify-self: end; display: inline-flex; gap: 8px; }
.qtb-editor-header-center { justify-self: center; display: inline-flex; align-items: center; }

@media (max-width: 980px) {
  .qtb-editor-header {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .qtb-editor-header-left,
  .qtb-editor-header-center,
  .qtb-editor-header-right {
    justify-self: start;
  }
}

/* ===========================
   タブ（旧互換）
   =========================== */
.qtb-tabs { display: flex; }
.qtb-tab-headers { display: flex; gap: 6px; }
.qtb-tab-btn {
  appearance: none;
  border: 1px solid #ddd;
  border-radius: 999px;
  padding: 8px 12px;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
}
.qtb-tab-btn.is-active {
  background: #111;
  color: #fff;
  border-color: #111;
}

/* ===========================
   ボタン
   =========================== */
.qtb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 12px;
  border: 1px solid #ddd;
  background: #fff;
  color: #111;
  text-decoration: none;
  cursor: pointer;
  line-height: 1;
  font-size: 13px;
  box-sizing: border-box;
  white-space: nowrap;
}
.qtb-btn.-primary {
  background: #111;
  color: #fff;
  border-color: #111;
}
.qtb-btn.-danger {
  background: #ffe6e6;
  border-color: #ffbdbd;
  color: #a20000;
}

/* JSが qtb-primary / qtb-secondary / qtb-danger を使ってる互換（保険） */
.qtb-btn.qtb-primary { background:#111; color:#fff; border-color:#111; }
.qtb-btn.qtb-secondary { background:#fff; }
.qtb-btn.qtb-danger { background:#ffe6e6; border-color:#ffbdbd; color:#a20000; }

/* ===========================
   入力
   =========================== */
.qtb-input {
  width: 100%;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  font-size: 14px;
}
.qtb-input--sm {
  width: auto;
  padding: 7px 8px;
  font-size: 12px;
}

/* ===========================
   新規作成テーブル
   =========================== */
.qtb-create-table {
  width: 100%;
  border-collapse: collapse;
}
.qtb-create-table td {
  padding: 6px 0;
  vertical-align: middle;
}
.qtb-create-table .td-input { width: 100%; padding-right: 10px; }
.qtb-create-table .td-actions { width: 1%; white-space: nowrap; }

/* tdボーダー完全除去 */
.qtb-create-table,
.qtb-create-table tr,
.qtb-create-table td {
  border: none !important;
}
.qtb-create-table td {
  box-shadow: none !important;
  background: transparent !important;
}

/* ===========================
   一覧テーブル
   =========================== */
.qtb-table {
  width: 100%;
  border-collapse: collapse;
}
.qtb-table th,
.qtb-table td {
  border-top: 1px solid #eee;
  padding: 10px 8px;
  font-size: 13px;
}
.qtb-table thead th {
  border-top: none;
  background: #fafafa;
  font-weight: 600;
}

/* td背景を白に固定 */
.qtb-table tbody td { background: #fff !important; }
.qtb-table tbody tr:hover td { background: #fff !important; }

.qtb-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

/* 操作ボタンを中央寄せ */
.qtb-table td:last-child {
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}
.qtb-table td:last-child .qtb-btn { margin: 0 4px; }

/* ===========================
   2カラム（編集：左ビルダー／右スマホ）
   =========================== */
.qtb-editor-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 12px;
  align-items: start;
}
@media (max-width: 980px) {
  .qtb-editor-layout { grid-template-columns: 1fr; }
}

/* 右側スマホ */
.qtb-phone-side { position: sticky; top: 12px; }
.qtb-phone-wrap { display: flex; justify-content: center; }
.qtb-phone {
  width: 340px;
  height: 700px;
  background: #000;
  border-radius: 56px;
  padding: 12px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}
.qtb-phone-screen {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 40px;
  overflow: hidden;
  position: relative;
}

/* ===========================
   崩れ防止（カード内限定）
   =========================== */
.aam-card p,
.aam-card ul,
.aam-card ol {
  margin-top: 0 !important;
  margin-bottom: 0.6em !important;
}
.aam-card p:last-child { margin-bottom: 0 !important; }

.aam-card input,
.aam-card textarea,
.aam-card select,
.aam-card button {
  margin: 0 !important;
}

.qtb-create-table input,
.qtb-create-table textarea,
.qtb-create-table select,
.qtb-table input,
.qtb-table textarea,
.qtb-table select {
  margin-bottom: 0 !important;
}

.qtb-create-table td,
.qtb-table td,
.qtb-table th {
  line-height: 1.3;
}

.qtb-table,
.qtb-create-table {
  background: transparent !important;
  box-shadow: none !important;
}
.qtb-table th,
.qtb-table td {
  background: transparent !important;
}

.aam-card hr,
.aam-card .qtb-hr {
  border: none !important;
  border-top: 1px solid #eee !important;
  margin: 14px 0 !important;
}

.qtb-btn,
.qtb-btn:visited { text-decoration: none !important; }
.qtb-btn:focus { outline: none !important; box-shadow: none !important; }
.qtb-btn:hover { filter: brightness(0.98); }

.qtb-input,
.qtb-input:focus,
.qtb-table input,
.qtb-table textarea,
.qtb-table select,
.qtb-create-table input {
  box-shadow: none !important;
}

/* ユーティリティ */
.qtb-noborder {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* ラッパー内box-sizing保険 */
.aam-wrap.qtb-wrap * { box-sizing: border-box; }

/* ===========================
   上部ボタン：中央寄せ & タブ風統一（最終）
   =========================== */
.qtb-editor-topbar{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:10px 0 12px;
}

.qtb-toolbar-tabs{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:6px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#fff;
  flex-wrap:wrap;
}

.qtb-toolbar-tabbar{
  display:flex;
  gap:6px;
  align-items:center;
  justify-content:center;
  padding:0 6px;
}

/* 戻る/タブ/保存 共通 */
.qtb-tab-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:none;
  background:transparent;
  padding:8px 14px;
  border-radius:999px;
  font-weight:900;
  font-size:13px;
  cursor:pointer;
  color:#111;
  line-height:1;
  text-decoration:none;
  user-select:none;
}
.qtb-tab-btn:hover{ background:rgba(0,0,0,0.06); }
.qtb-tab-btn.is-active{ background:#111; color:#fff; }
.qtb-tab-btn.is-active:hover{ background:#111; color:#fff; }

/* ===========================
   フルスクリーン（旧方式）※重複整理して1回だけ
   - まだ body.qtb-fullscreen-on を使っている場合のため残す
   =========================== */
.qtb-fullscreen-btn {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 999999;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 900;
}

.qtb-fullscreen-overlay {
  position: fixed;
  inset: 0;
  z-index: 999998;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(3px);
  display: none;
}

/* エディタ本体を全画面にする（旧方式） */
body.qtb-fullscreen-on #qtb-editor-root {
  position: fixed !important;
  inset: 10px !important;
  z-index: 999999 !important;
  margin: 0 !important;
  max-width: none !important;
  width: auto !important;
  height: auto !important;
  overflow: auto !important;
}
body.qtb-fullscreen-on { overflow: hidden !important; }
body.qtb-fullscreen-on .qtb-breadcrumb { display: none !important; }

/* 旧方式のカード幅（最終：1000px） */
body.qtb-fullscreen-on #qtb-editor-root .qtb-editor-card {
  max-width: 1000px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ===========================
   スマホプレビュー：縦に収まるよう自動縮小
   =========================== */
.qtb-phone-side{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.qtb-phone-scale-area{
  flex: 1;
  min-height: 300px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding: 8px 0;
}

.qtb-phone-scale{
  transform-origin: top center;
  will-change: transform;
}

.qtb-phone-scale-hint{
  font-size: 11px;
  color:#6b7280;
  text-align:center;
}

/* ===========================
   #qtb-stage（新方式：背景DIVで全画面）
   - いま実際に効いている “最後の状態” を1つに統合
   =========================== */
#qtb-stage{
  position: fixed;
  inset: 0;
  z-index: 999999;

  /* 背景：黒 0.8 */
  background: rgba(0,0,0,0.8);

  display: flex;
  flex-direction: column;

  /* 最終：外側余白あり（必要なら調整） */
  padding: 12px 12px 12px;

  box-sizing: border-box;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* root はステージ内で縦積み。要素間余白は gap で確保（最終） */
#qtb-stage #qtb-editor-root{
  height: 100%;
  min-height: 0;

  display: flex;
  flex-direction: column;

  gap: 10px;
}

/* パンくず/トップバー：gapに任せるためmarginは0 */
#qtb-stage .qtb-breadcrumb,
#qtb-stage .qtb-editor-topbar{
  margin: 0;
}

/* あなたの言う「カード」＝角丸（aam-card / qtb-editor-card）
   最終：幅1000 / 中央 / 余白はgapで / 伸びる */
#qtb-stage .aam-card.qtb-editor-card,
#qtb-stage .qtb-editor-card,
#qtb-stage .aam-card{

  flex: 3 0 0;
  min-height: 0;
  overflow: hidden;

  /* ★ここが重要 */
  align-self: center !important;                 /* ← これが効くと幅が反映される */
  width: min(1000px, 100%) !important;           /* ← max-widthより確実 */
  max-width: 1000px !important;

  margin-left: auto;
  margin-right: auto;

  margin-top: 0;
  margin-bottom: 0;
}

/* カード内レイアウトは高さ100% */
#qtb-stage .qtb-editor-layout{
  height: 100%;
  min-height: 0;

}

/* 左：作業エリアはスクロール */
#qtb-stage #qtb-editor-app{
  height: 100%;
  min-height: 0;
  overflow: auto;
}

/* 右：スマホ側もはみ出さない */
#qtb-stage .qtb-phone-side,
#qtb-stage .qtb-phone-scale-area{
  background: #444;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

/* 外側はゼロ、内側にだけ余白 */
#qtb-stage #qtb-editor-root{
  padding: 2px !important;
  box-sizing: border-box !important;
}

/* #qtb-stage内では外枠(1100px制限)を無効化して、カード1000pxを効かせる */
#qtb-stage .aam-wrap.qtb-wrap{
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
}

/* 念のため root も横幅制限を解除 */
#qtb-stage #qtb-editor-root{
  max-width: none !important;
  width: 100% !important;
}

/* カードを確実に 1000px 上限にする（見た目も分かりやすい） */
#qtb-stage .aam-card.qtb-editor-card{
  width: min(1000px, 100%) !important;
  max-width: 1000px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ===========================
   プレビューが切れる対策（CSSのみ）
   - 固定700pxをやめて可変に
   - stickyをやめてカード内に収める
   =========================== */

/* 右カラムの sticky はカード内スクロールと相性悪いので無効 */
#qtb-stage .qtb-phone-side{
  position: relative !important;
  top: auto !important;
}

/* スマホ枠：固定高さをやめて、縦横比で可変にする */
#qtb-stage .qtb-phone{
  width: min(340px, 100%) !important;
  height: auto !important;                 /* ← 700px固定を殺す */
  aspect-ratio: 340 / 700 !important;      /* 見た目（比率）は維持 */
  box-sizing: border-box !important;
}

/* 画面部分は枠いっぱい */
#qtb-stage .qtb-phone-screen{
  height: 100% !important;
}

/* 右側の表示領域：上に寄せて、見切れを防ぐ */
#qtb-stage .qtb-phone-scale-area{
  align-items: flex-start !important;      /* 中央寄せで上が切れるのを防ぐ */
  justify-content: center !important;
  overflow: auto !important;              /* 最悪でもスクロールで見える */
}