/* =========================================================
   1. Base & Layout (基本設定)
   ========================================================= */

/* Static start screen */
.app-start-screen {
  position: fixed;
  inset: 0;
  z-index: 110000;
  display: grid;
  align-items: start;
  justify-items: center;
  min-height: 100dvh;
  padding: 24px;
  overflow-y: auto;
  background:
    radial-gradient(circle at 18% 12%, rgba(77, 124, 254, 0.16), transparent 36%),
    linear-gradient(145deg, #f7f9ff 0%, #eef3fb 52%, #ffffff 100%);
}

.app-start-screen[hidden] {
  display: none !important;
}

.auth-check-screen {
  position: fixed;
  inset: 0;
  z-index: 109000;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 24px;
  background:
    radial-gradient(circle at 18% 12%, rgba(77, 124, 254, 0.12), transparent 36%),
    linear-gradient(145deg, #f7f9ff 0%, #eef3fb 52%, #ffffff 100%);
}

.auth-check-screen[hidden] {
  display: none !important;
}

.auth-check-card {
  width: min(420px, 100%);
  padding: 40px 28px;
  border: 1px solid rgba(28, 58, 108, 0.12);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 20px 60px rgba(30, 54, 92, 0.14);
  color: #526176;
  text-align: center;
}

.auth-check-logo {
  display: block;
  width: min(280px, 82%);
  height: auto;
  margin: 0 auto 28px;
}

.auth-check-spinner {
  width: 34px;
  height: 34px;
  margin: 0 auto 18px;
  border: 4px solid #dce5f7;
  border-top-color: #315fd8;
  border-radius: 50%;
  animation: auth-check-spin 800ms linear infinite;
}

.auth-check-card p {
  margin: 0;
  font-weight: 700;
}

@keyframes auth-check-spin {
  to {
    transform: rotate(360deg);
  }
}

.app-start-card {
  width: min(1080px, 100%);
  margin: 16px 0;
  padding: clamp(28px, 5vw, 64px);
  border: 1px solid rgba(28, 58, 108, 0.12);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 24px 70px rgba(30, 54, 92, 0.16);
  text-align: center;
}

.app-start-logo {
  display: block;
  width: min(330px, 82%);
  max-height: 150px;
  margin: 0 auto 22px;
  object-fit: contain;
}

.app-start-card h1 {
  margin: 0;
  color: #17233a;
  font-size: clamp(1.85rem, 4.5vw, 3.25rem);
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.app-start-description {
  max-width: 760px;
  margin: 22px auto 24px;
  color: #526176;
  font-size: clamp(0.96rem, 2.2vw, 1.08rem);
  line-height: 1.9;
  text-align: center;
}

.app-start-mobile-note {
  width: fit-content;
  margin: 18px auto 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: #edf8f3;
  color: #285f4c;
  font-size: 0.86rem;
  font-weight: 700;
}

.app-start-button {
  min-width: 210px;
  padding: 15px 32px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #315fd8, #2145a8);
  box-shadow: 0 12px 26px rgba(49, 95, 216, 0.28);
  color: #ffffff;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.app-start-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(49, 95, 216, 0.34);
  filter: brightness(1.05);
}

.app-start-button:focus-visible {
  outline: 3px solid rgba(49, 95, 216, 0.32);
  outline-offset: 4px;
}

.start-hero {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}

.start-eyebrow,
.start-section-label {
  margin: 0 0 10px;
  color: #315fd8;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.start-benefit-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 26px;
}

.start-benefit-chips span {
  padding: 7px 13px;
  border: 1px solid #dbe4f6;
  border-radius: 999px;
  background: #f6f8fd;
  color: #344765;
  font-size: 0.84rem;
  font-weight: 700;
}

.start-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.start-secondary-button {
  display: inline-flex;
  min-width: 210px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 14px 28px;
  border: 1px solid #b9c8e5;
  border-radius: 999px;
  background: #ffffff;
  color: #244f9e;
  font-weight: 700;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.start-secondary-button:hover {
  border-color: #315fd8;
  background: #f5f8ff;
  transform: translateY(-2px);
}

.start-section {
  padding: clamp(40px, 6vw, 72px) 0;
  border-top: 1px solid #e5eaf3;
  text-align: left;
}

.start-hero + .start-section {
  margin-top: clamp(42px, 7vw, 78px);
}

.start-section h2 {
  margin: 0 0 28px;
  color: #17233a;
  font-size: clamp(1.45rem, 3vw, 2.15rem);
  line-height: 1.35;
  text-align: center;
}

.start-section > .start-section-label {
  text-align: center;
}

.start-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.start-feature-grid article {
  padding: 24px 20px;
  border: 1px solid #dde5f1;
  border-radius: 18px;
  background: #f9fbff;
}

.start-feature-icon {
  display: inline-grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 13px;
  background: #eaf0ff;
  font-size: 1.35rem;
}

.start-feature-grid h3 {
  margin: 16px 0 9px;
  color: #22314d;
  font-size: 1.02rem;
}

.start-feature-grid p,
.start-flow p,
.start-pricing-summary > p,
.start-faq p {
  margin: 0;
  color: #5a687c;
  font-size: 0.91rem;
  line-height: 1.75;
}

.start-demo-lead {
  margin: -6px auto 22px;
  max-width: 720px;
  color: #5e6b7d;
  text-align: center;
}

.start-video-frame {
  max-width: 860px;
  margin: 0 auto 18px;
  overflow: hidden;
  border: 1px solid #d9e1ea;
  border-radius: 18px;
  background: #101820;
  box-shadow: 0 18px 44px rgba(24, 43, 68, 0.14);
}

.start-video-frame video {
  display: block;
  width: 100%;
  max-height: 68vh;
  background: #101820;
}

.start-output-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
  gap: 20px;
}

.start-output-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 22px;
  border: 1px solid #dce3ec;
  border-radius: 16px;
  background: #fff;
}

.start-output-card h3 {
  margin: 0 0 6px;
  color: #203a5e;
}

.start-output-card > p {
  margin: 0 0 16px;
  color: #5e6b7d;
}

.start-media-box {
  display: grid;
  min-height: 250px;
  flex: 1;
  place-items: center;
  overflow: hidden;
  border: 1px solid #e3e8ef;
  border-radius: 12px;
  background: #f5f7fa;
}

.start-media-box img {
  display: block;
  max-width: 100%;
  max-height: 520px;
  object-fit: contain;
}

.start-media-box-wide {
  min-height: 180px;
  padding: 18px;
}

.start-media-box-wide img { width: 100%; }
.start-certificate-preview { padding: 14px; }

.start-output-card > a,
.start-output-links a {
  margin-top: 14px;
  color: #1769aa;
  font-weight: 800;
  text-decoration: none;
}

.start-output-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.start-sample-note {
  margin: 12px 0 0;
  color: #758195;
  font-size: 0.82rem;
  text-align: right;
}

.start-flow ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.start-flow li {
  display: flex;
  gap: 14px;
  padding: 22px;
  border-radius: 18px;
  background: #f3f6fc;
}

.start-flow li > span {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: #315fd8;
  color: #ffffff;
  font-weight: 800;
}

.start-flow strong {
  display: block;
  margin: 4px 0 8px;
  color: #22314d;
}

.start-text-link {
  display: block;
  width: fit-content;
  margin: 24px auto 0;
  color: #315fd8;
  font-weight: 700;
  text-decoration: none;
}

.start-use-cases ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 760px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.start-use-cases li {
  position: relative;
  padding: 16px 18px 16px 46px;
  border: 1px solid #dfe6f1;
  border-radius: 14px;
  color: #34445f;
  font-weight: 650;
}

.start-use-cases li::before {
  position: absolute;
  top: 15px;
  left: 18px;
  color: #2c9b68;
  content: "✓";
  font-weight: 900;
}

.start-pricing-summary {
  margin: 0;
  padding-right: clamp(20px, 5vw, 56px);
  padding-left: clamp(20px, 5vw, 56px);
  border: 0;
  border-radius: 22px;
  background: linear-gradient(135deg, #eff4ff, #f7f9ff);
  text-align: center;
}

.start-pricing-summary > p {
  margin: -10px auto 24px;
  font-size: 1rem;
}

.start-faq {
  max-width: 820px;
  margin: 0 auto;
}

.start-faq details {
  padding: 18px 20px;
  border-bottom: 1px solid #dfe5ef;
}

.start-faq summary {
  color: #263752;
  font-weight: 750;
  cursor: pointer;
}

.start-faq details p {
  padding-top: 12px;
}

.start-legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  margin-top: 28px;
  font-size: 0.8rem;
}

.start-legal-links a {
  color: #526176;
}

.app-legal-footer {
  position: fixed;
  right: 12px;
  bottom: 8px;
  left: 12px;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px 14px;
  pointer-events: none;
  font-size: 0.72rem;
}

.app-legal-footer[hidden] {
  display: none;
}

.app-legal-footer a {
  color: #617086;
  pointer-events: auto;
}

@media (max-width: 600px) {
  .app-start-screen {
    padding: 16px;
  }

  .app-start-card {
    margin: 0;
    padding: 28px 18px;
    border-radius: 22px;
  }

  .app-start-logo {
    width: min(300px, 88%);
    margin-bottom: 24px;
  }

  .app-start-description {
    margin: 20px auto 28px;
    line-height: 1.75;
    text-align: left;
  }

  .app-start-button,
  .start-secondary-button {
    width: 100%;
  }

  .start-actions {
    width: 100%;
  }

  .start-feature-grid,
  .start-flow ol,
  .start-use-cases ul {
    grid-template-columns: 1fr;
  }

  .start-section {
    padding: 40px 0;
  }

  .start-pricing-summary {
    padding: 34px 18px;
  }

  .start-output-grid {
    grid-template-columns: 1fr;
  }

  .start-video-frame {
    border-radius: 12px;
  }

  .start-output-card {
    padding: 16px;
  }

  .start-media-box-wide {
    min-height: 100px;
    padding: 8px;
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  .start-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .start-flow ol {
    grid-template-columns: 1fr;
  }
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* アプリ化のためスクロール禁止 */
  font-family: "Helvetica Neue", Arial, sans-serif;
  color: #333;
  background-color: #f9f9f9;
}

/* メインコンテナ */
.container {
  height: 100vh; /* スマホ用はメディアクエリで 100dvh に上書き */
  width: 100vw;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 10px 15px 0 15px !important;
  box-sizing: border-box;
  background: #fff;
  display: flex;
  flex-direction: column;
}

/* 画面切り替えセクション */
.view-section {
  display: none;
  flex: 1;
  min-height: 0;
  flex-direction: column;
}

#dashboard-screen { overflow: hidden; }

/* タイトル・テキスト */
h2, h3 { color: #2c3e50; margin: 0; }
h2 { font-size: 1.2rem; margin-bottom: 10px; display: none; }
#dashboard-screen h3 { font-size: 1.1rem; }
small { font-size: 0.8rem; }

/* フォーム要素 */
input, select {
  padding: 10px;
  font-size: 16px;
  width: 100%;
  margin-bottom: 15px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}


/* =========================================================
   2. Components (ボタン・バッジ・アイコン)
   ========================================================= */

/* ボタン基本 */
button {
  padding: 10px 20px;
  font-size: 14px;
  margin: 5px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  background-color: #007bff;
  color: white;
  transition: background 0.3s;
}
button:hover { background-color: #0056b3; }

/* ボタンバリエーション */
button.secondary { background-color: #6c757d; }
button.secondary:hover { background-color: #545b62; }
button.reject-btn { background-color: #dc3545; }
button.reject-btn:hover { background-color: #a71d2a; }

#to-add-log-btn { padding: 4px 12px; font-size: 13px; margin: 0; white-space: nowrap; }

/* Login form */
.invitation-entry #app-start-screen {
  display: none !important;
}

.invitation-expired-screen {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  min-height: 100dvh;
  padding: 24px;
  background: #f4f6f9;
}

.invitation-expired-screen[hidden] {
  display: none;
}

.invitation-expired-card {
  width: min(100%, 560px);
  box-sizing: border-box;
  padding: 44px 36px;
  border: 1px solid #e1e6ed;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.12);
  text-align: center;
}

.invitation-expired-logo {
  display: block;
  width: min(280px, 80%);
  height: auto;
  max-height: none;
  margin: 0 auto 30px;
}

.invitation-expired-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: #fff1f0;
  color: #d92d20;
  font-size: 2rem;
  font-weight: 800;
}

.invitation-expired-card h1 {
  margin: 0 0 16px;
  color: #1f2937;
  font-size: clamp(1.35rem, 4vw, 1.85rem);
}

.invitation-expired-card p {
  margin: 0;
  color: #4b5563;
  font-size: 1rem;
  line-height: 1.8;
}

.login-screen-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  padding: 20px;
}

.auth-card {
  width: 100%;
  max-width: 400px;
  padding: 30px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.auth-card-alt {
  display: none;
  padding: 40px 30px;
  text-align: center;
}

.invitation-fixed-info {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  background: #f7f9fc;
  text-align: left;
}

.invitation-fixed-info[hidden] {
  display: none;
}

.invitation-fixed-row + .invitation-fixed-row {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e3e9f0;
}

.invitation-fixed-label {
  display: block;
  margin-bottom: 4px;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 700;
}

.invitation-fixed-value {
  display: block;
  color: #1f2937;
  font-size: 0.95rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.auth-input {
  width: 100%;
  padding: 12px;
  margin-bottom: 10px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.auth-btn {
  width: 100%;
  border: none;
  padding: 12px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  font-size: 1em;
  margin: 0 0 10px;
}

.auth-btn-primary { background: #007bff; color: #fff; }
.auth-btn-success { background: #28a745; color: #fff; }
.auth-btn-warning { background: #e67e22; color: #fff; }
.is-hidden { display: none; }

/* アイコンボタン (テーブル内操作) */
.action-btn {
  width: 36px; height: 36px;
  padding: 0; border: none; background: #fff;
  border-radius: 10%;
  font-size: 1.1em;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  display: inline-flex; justify-content: center; align-items: center;
  transition: transform 0.1s;
}
.action-btn:hover { transform: translateY(-2px); }
.btn-cert { color: #17a2b8; }
.btn-edit { color: #555; }
.btn-delete { color: #dc3545; }

/* ヘッダー用・正円絵文字ボタン */
.header-circle-btn {
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #dadce0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  font-size: 1.3rem;
  text-decoration: none;
  cursor: pointer;
  margin-left: 8px; padding: 0;
  position: relative;
  transition: all 0.2s ease;
  color: inherit;
  line-height: 1;
}
.header-circle-btn:hover {
  background-color: #f1f3f4;
  transform: translateY(-2px);
  box-shadow: 0 3px 5px rgba(0,0,0,0.2);
}

/* 一括操作等のコントロールボタン共通 */
.btn-control {
  height: 38px !important;
  line-height: 1 !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  margin: 0 !important;
  border-radius: 4px;
  cursor: pointer;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
}
/* 一括操作ボタンのアクティブ状態 */
#toggle-bulk-mode-btn.active-mode {
  background-color: #fff !important;
  color: #6c757d !important;
  border: 2px solid #6c757d !important;
  font-weight: bold;
}

/* ステータスバッジ */
.badge { padding: 4px 8px; border-radius: 4px; font-size: 0.75em; color: white; margin-left: 5px; font-weight: normal; }
.badge-admin { background-color: #28a745; }
.badge-member { background-color: #17a2b8; }
.badge-active { background-color: #6c757d; }
.badge-suspended { background-color: #dc3545; }

/* 通知バッジ (共通) */
.notification-badge {
  position: absolute; top: -2px; right: -2px;
  width: 10px; height: 10px;
  background-color: #dc3545;
  border-radius: 50%; border: 2px solid white;
  display: none;
}
.notification-badge.show { display: block; }

.tab-badge {
  display: inline-block; width: 8px; height: 8px;
  background-color: #dc3545; border-radius: 50%;
  margin-left: 3px; vertical-align: top;
  opacity: 0; transition: opacity 0.3s;
}
.tab-badge.show { opacity: 1; }


/* =========================================================
   3. Header (ヘッダー)
   ========================================================= */
.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 15px;
  margin-bottom: 10px;
  border-bottom: 1px solid #eee; 
  flex-shrink: 0;
}

.dashboard-header::before {
  content: "";
  display: inline-block;
  width: 160px; height: 50px;
  background-image: url("images/DESTRUCTIONCERT_LOGO_Y.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 10px;    
  flex-shrink: 0;
}

.app-title { 
  margin: 0; margin-right: auto !important;
  flex-grow: 0; width: auto;
  font-size: 1.3rem; font-weight: bold; color: #2c3e50; 
  display: block; 
}

.header-plan-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 18px;
  padding: 0 8px;
  box-sizing: border-box;
  border: 1px solid #cad5e4;
  border-radius: 4px;
  background: #f3f6fa;
  color: #40536d;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.header-plan-badge.paid {
  border-color: #d7b85a;
  background: linear-gradient(135deg, #fff8d8, #ffe7a0);
  color: #71510a;
  box-shadow: 0 2px 7px rgba(113, 81, 10, 0.12);
}
.header-plan-badge.canceling {
  border-color: #e1a39a;
  background: #fff1ef;
  color: #9b3528;
}

.header-right { display: flex; align-items: center; gap: 5px; }

.user-info-line {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-right: 10px;
  font-size: 0.9rem;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}
.u-line-1 { white-space: nowrap; }
.user-affiliation { color: #666; font-size: 0.85em; white-space: nowrap; }
.u-line-2 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.user-contract-role-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  width: 104px;
  gap: 3px;
}
.user-contract-role-stack .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 18px;
  margin-left: 0;
  padding: 0 8px;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 0.72rem;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.icon-btn {
  background: transparent; border: none; font-size: 1.6rem;
  padding: 5px; margin: 0; line-height: 1; color: #555;
  border-radius: 4px; position: relative; cursor: pointer;
}
.icon-btn:hover { background-color: #f0f8ff; color: #007bff; }


/* =========================================================
   4. Admin Panel & Tabs (管理者パネル・タブ)
   ========================================================= */
.layer {
  position: fixed;
  top: 50px; right: 10px;
  width: 90%; max-width: 400px;
  background: #fff;
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
  border-radius: 8px;
  padding: 20px 15px 15px 15px;
  z-index: 9998;
  max-height: 80vh;
  overflow-y: auto;
}
#admin-panel { 
  display: none; 
  container-type: inline-size;
  container-name: adminPanel;
}

.close-modal-btn {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px;
  border: none; background-color: #f1f1f1;
  border-radius: 5px; color: #555; font-size: 1.2em;
  display: flex; justify-content: center; align-items: center;
  cursor: pointer; z-index: 10;
}
.close-modal-btn:hover { background-color: #ddd; color: #000; }

/* ▼▼▼ タブスタイルの再定義 (均等配置・折り返し禁止) ▼▼▼ */
/* ▼▼▼ タブスタイルの再定義 (アイコン対応・レスポンシブ・はみ出し防止版) ▼▼▼ */
.admin-tab-header {
  display: flex;
  flex-wrap: nowrap; /* 強制的に1行にする */
  width: 100%;       /* 親要素いっぱいに広げる */
  overflow: hidden;  /* スクロールさせず、幅に合わせる */
  border-bottom: 1px solid #ddd;
  margin-bottom: 15px;
  background: #f9f9f9;
  gap: 2px;          /* ボタン間の隙間を最小限に */
}

.admin-tab-btn {
  flex: 1 1 0px;     /* 均等に幅を割り振り、必要なら縮小する */
  min-width: 0;      /* 最小幅制限をなくして、はみ出しを防ぐ */
  
  display: flex;
  flex-direction: column; /* アイコンを上、文字を下にする */
  align-items: center;
  justify-content: center;
  
  padding: 8px 0;    /* 左右のパディングを0にしてスペースを節約 */
  box-sizing: border-box;
  
  border: none;
  background: transparent;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  color: #555;
  border-radius: 0;
  position: relative;
}

.admin-tab-btn:hover { background-color: #e2e6ea; }

.admin-tab-btn.active {
  color: #007bff;
  border-bottom: 3px solid #007bff;
  background: #fff;
}

/* アイコンのスタイル */
.tab-icon {
  font-size: 1.2rem;
  line-height: 1;
  margin-bottom: 2px; /* アイコンと文字の間隔 */
  flex-shrink: 0;     /* アイコンは潰れないようにする */
}

/* タイトルのスタイル */
.tab-label {
  font-size: 0.65rem; /* 少し小さくして収まりやすくする */
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 幅が足りないときは...表示 */
  width: 100%;
  text-align: center;
}

/* 通知バッジ */
.tab-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 6px; height: 6px;
  background-color: #dc3545; border-radius: 50%;
  opacity: 0; transition: opacity 0.3s;
  pointer-events: none;
}
.tab-badge.show { opacity: 1; }

.contract-summary-card {
  overflow: hidden;
  border: 1px solid #dbe3ec;
  border-radius: 10px;
  background: #fff;
}
.contract-plan-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px;
  background: #f4f7fb;
  color: #203a5e;
  font-size: 1.05rem;
  font-weight: 800;
}
.contract-status-badge {
  padding: 4px 8px;
  border-radius: 999px;
  background: #e7edf5;
  color: #4b5f78;
  font-size: 0.72rem;
  white-space: nowrap;
}
.contract-status-badge.active { background: #e3f5e9; color: #1f7138; }
.contract-status-badge.warning { background: #fff0dd; color: #99520c; }
.contract-status-badge.canceling { background: #fde9e6; color: #a33b2d; }
.contract-detail-list { margin: 0; }
.contract-detail-list > div {
  display: grid;
  grid-template-columns: 42% 58%;
  padding: 11px 14px;
  border-top: 1px solid #edf1f5;
}
.contract-detail-list dt { color: #64748b; font-size: 0.82rem; }
.contract-detail-list dd { margin: 0; color: #24364d; font-size: 0.88rem; font-weight: 700; text-align: right; }
.contract-help-text { margin: 14px 2px; color: #64748b; font-size: 0.82rem; line-height: 1.6; }
.contract-manage-btn {
  width: 100%;
  padding: 11px;
  border: 0;
  border-radius: 7px;
  background: #315fd8;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.contract-manage-btn:hover { background: #254db6; }

/* ▼▼▼ 追加: 月選択エリアのレスポンシブ制御 ▼▼▼ */

/* 1. ベースのコンテナ (通常は横並び) */
.admin-month-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

/* 2. 日付選択部分の白枠 */
.month-picker-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 3px;
}

/* 3. 表示ボタン */
.show-btn {
  padding: 6px 12px;
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  font-size: 0.9em;
}

/* 4. コンテナクエリ: パネル幅が狭いとき (3行表示に変更) */
@container adminPanel (max-width: 450px) {
  .admin-month-selector {
    flex-direction: column; /* 縦並び */
    align-items: stretch;   /* 横幅いっぱいに */
    gap: 8px;
    text-align: center;
  }
  
  .admin-month-selector label {
    width: 100%;
    margin-bottom: 2px;
  }
  
  .month-picker-wrapper {
    width: 100%;       /* 枠を幅いっぱいに */
    box-sizing: border-box;
  }
  
  .show-btn {
    width: 100%;       /* ボタンも幅いっぱいに */
    padding: 8px;      /* タップしやすいよう少し広く */
  }
}





/* --- レスポンシブ制御 (パネル幅が狭いときはアイコンのみ) --- */
/* パネル幅が 450px 以下になったらタイトルを隠す */
@container adminPanel (max-width: 450px) {
  .tab-label {
    display: none;
  }
  
  .tab-icon {
    font-size: 1.3rem;
    margin-bottom: 0; /* 文字が消えるので下マージン不要 */
  }
  
  .admin-tab-btn {
    padding: 10px 0; /* 文字がない分、上下のバランス調整 */
  }
}

.admin-tab-content { display: none; padding: 5px; }
.admin-tab-content.active { display: block; animation: fadeIn 0.3s; }
.admin-only-tab { display: none; } /* JSで表示制御されるまで隠す */

/* リスト・フォーム共通 */
.admin-list { list-style: none; padding: 0 !important; margin: 0; }
.list-item {
  background: white; border: 1px solid #dee2e6;
  padding: 15px; margin-bottom: 10px; border-radius: 4px;
  display: flex; flex-direction: column; gap: 10px;
}
.form-section { display: none; }
.form-section.active { display: block; animation: fadeIn 0.5s; }

/* メンバー管理ボタンエリア */
.member-action-buttons { display: flex; gap: 5px; margin-top: 10px; flex-wrap: wrap; }
.member-action-buttons button {
  flex: 1; min-width: 80px; padding: 8px 2px;
  font-size: 0.75rem; white-space: normal; line-height: 1.3;
  display: flex; justify-content: center; align-items: center; text-align: center;
  height: auto; min-height: 44px; margin: 0 !important;
}


/* =========================================================
   5. Log Table & Controls (ログ一覧・操作バー)
   ========================================================= */
#log-section { flex: 1; display: flex; flex-direction: column; min-height: 0; margin-top: 5px !important; padding: 0 !important; }
#log-list-container { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* PC用コントロールバー (Gridレイアウト) */
#log-list-control {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* 左・中・右 */
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 10px;
}

#log-list-control #log-search-input {
  grid-column: 1; justify-self: start;
  width: 100%; max-width: 300px; height: 38px;
  margin: 0; padding: 8px;
  border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;
}

#log-list-control #reload-log-btn {
  grid-column: 2; justify-self: center; margin: 0;
}

#log-list-control .right-control-group {
  grid-column: 3; justify-self: end;
  display: flex; gap: 10px; align-items: center;
}

/* テーブルスタイル */
.table-responsive {
  flex: 1; height: 100%; min-height: 0;
  overflow: auto; border: 1px solid #ccc; background-color: #fff;
  -webkit-overflow-scrolling: touch;
}

.log-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.log-table th, .log-table td { 
  border: 1px solid #ddd; 
  padding: 8px; text-align: left; 
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 200px; height: 45px; box-sizing: border-box;
}

/* 固定ヘッダー */
.log-table th {
  position: sticky; top: 0; z-index: 20;
  background-color: #f2f2f2; font-weight: bold; cursor: pointer;
  box-shadow: 0 2px 2px -1px rgba(0,0,0,0.1); padding-right: 20px;
  user-select: none; -webkit-user-select: none;
  transition: border 0.1s, background-color 0.1s;
}
.log-table th:hover { background-color: #e2e6ea; }
.log-table th::after { content: '↕'; position: absolute; right: 5px; opacity: 0.3; font-size: 0.8em; }
.log-table th.asc::after { content: '▲'; opacity: 1; }
.log-table th.desc::after { content: '▼'; opacity: 1; }
.log-table tr:nth-child(even) { background-color: #f9f9f9; }

@media (max-width: 600px) {
  .log-table tr.log-row,
  .log-table tr.log-row td,
  .log-table tr.log-row td * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
}

/* 固定操作列 */
.log-table th:last-child, .log-table td:last-child {
  position: sticky; right: 0; z-index: 10;
  background-color: transparent !important; border-left: none;
}
.log-table th:last-child { background-color: #f2f2f2 !important; z-index: 30; }
.log-table td:last-child { background-color: #fff !important; }

/* ドラッグ＆ドロップ */
.log-table th[draggable="true"] { cursor: grab; user-select: none; }
.log-table th[draggable="true"]:active { cursor: grabbing; }
.log-table th.drag-over {
  border-left: 3px solid #007bff !important;
  background-color: #e8f0fe !important;
  opacity: 1 !important;
}

/* ページネーション */
.pagination-container {
  flex-shrink: 0; margin-top: 5px; background: #fff; padding: 5px 0;
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px;
}
.pagination-info { font-size: 0.9em; color: #777; }
.pagination-btn { padding: 6px 12px; border: 1px solid #ccc; background-color: #f8f9fa; border-radius: 4px; }
.pagination-btn:disabled { background-color: #e9ecef; color: #aaa; }

/* 一括操作モード */
.check-col { display: none; width: 40px; text-align: center; }
.bulk-action-buttons { display: none; }
body.is-bulk-mode .stats-content { display: none !important; }
body.is-bulk-mode .bulk-action-buttons { display: flex !important; gap: 10px; align-items: center; width: 100%; }
body.is-bulk-mode .check-col { display: table-cell !important; }
body.is-bulk-mode .action-col { display: none !important; }
body.is-bulk-mode #monthly-stats-area {
  background-color: #fdecef !important;
  border-color: #f5c2cb !important;
  color: #842029 !important;
  cursor: pointer;
}

.mobile-instruction { display: none; }


/* =========================================================
   6. Swiper & Entry Screen (登録画面)
   ========================================================= */
#log-entry-screen {
  position: fixed !important;
  top: 0; left: 0; width: 100vw !important; height: 100vh !important; height: 100dvh !important;
  background: #fff; z-index: 9999 !important; display: none; margin: 0 !important; padding: 0 !important;
}
.swiper, .swiper-wrapper { width: 100%; height: 100% !important; }
.swiper-slide { 
  background: #fff; display: flex; flex-direction: column; 
  height: 100% !important; padding: 0; box-sizing: border-box;
  padding-bottom: 80px !important; overflow-y: auto;
}
.step-title { flex-shrink: 0; padding: 15px 20px; background: #f8f9fa; border-bottom: 1px solid #ddd; font-weight: bold; }
.step-content { flex: 1; overflow-y: auto; padding: 20px; width: 100%; box-sizing: border-box; }
.step-content #preview-before,
.step-content #preview-after {
  width: auto;
  height: auto;
  max-width: 100% !important;
  max-height: min(48dvh, 520px) !important;
  object-fit: contain;
}
.swiper-nav-btns { 
  flex-shrink: 0; 
  padding: 15px 20px; padding-bottom: calc(15px + env(safe-area-inset-bottom)); 
  background: #fff; border-top: 1px solid #ddd; 
  display: flex; justify-content: space-between; gap: 10px; 
}
.btn-next, .btn-prev { padding: 12px 0; border: none; border-radius: 50px; font-size: 16px; width: 48%; }
.btn-next { background: #007bff; color: white; }
.btn-prev { background: #e9ecef; color: #333; }


/* =========================================================
   7. Camera & Image Preview (カメラ・画像)
   ========================================================= */
.camera-overlay-container { 
  position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
  background: #000; z-index: 11000; display: flex; flex-direction: column; 
}
.camera-video-wrapper { flex: 1; position: relative; overflow: hidden; display: flex; align-items: center; background: #000; }
.camera-video-wrapper video { width: 100%; height: 100%; object-fit: cover; }
.camera-guide-frame {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: auto; height: 70%; aspect-ratio: 3/4;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.6); border: 2px solid rgba(255,255,255,0.8); border-radius: 4px; pointer-events: none;
}
#reader video { object-fit: cover; max-height: 35vh !important; }

.camera-controls-area { height: 80px; background: #111; display: flex; justify-content: space-around; align-items: center; }
.shutter-btn { width: 60px; height: 60px; border-radius: 50%; background: white; border: 3px solid #ccc; }
.shutter-btn:active { background: #ddd; }

.image-adjust-open-btn {
  display: block;
  width: min(320px, 100%);
  margin: 12px auto 0;
  padding: 11px 18px;
  border: 1px solid #315fd8;
  border-radius: 8px;
  background: #f5f8ff;
  color: #244fae;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.image-adjust-open-btn[hidden],
.image-adjuster[hidden] {
  display: none !important;
}

.image-adjuster {
  position: fixed;
  inset: 0;
  z-index: 21000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(10, 18, 32, 0.78);
  box-sizing: border-box;
}

.image-adjuster-panel {
  display: flex;
  flex-direction: column;
  width: min(1120px, 100%);
  height: min(820px, calc(100dvh - 40px));
  overflow: hidden;
  border-radius: 18px;
  background: #f7f9fc;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
}

.image-adjuster-header {
  display: flex;
  flex-shrink: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid #dce3ee;
  background: #fff;
}

.image-adjuster-header h2 {
  margin: 0 0 3px;
  color: #17233a;
  font-size: 1.2rem;
}

.image-adjuster-header p {
  margin: 0;
  color: #68758a;
  font-size: 0.84rem;
}

.image-adjuster-close {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #eef2f7;
  color: #344056;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.image-adjuster-body {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.75fr);
  flex: 1;
  min-height: 0;
}

.image-adjuster-preview {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 20px;
  overflow: hidden;
  background:
    linear-gradient(45deg, #252c38 25%, transparent 25%),
    linear-gradient(-45deg, #252c38 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #252c38 75%),
    linear-gradient(-45deg, transparent 75%, #252c38 75%),
    #202631;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  background-size: 20px 20px;
}

#image-adjuster-canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: 4px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

#image-adjuster-loading {
  position: absolute;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #354157;
  font-weight: 700;
}

.image-adjuster-controls {
  overflow-y: auto;
  padding: 16px 18px 28px;
  border-left: 1px solid #dce3ee;
  background: #fff;
}

.image-adjust-group {
  margin: 0 0 20px;
  padding: 0 0 16px;
  border-bottom: 1px solid #edf0f5;
}

.image-adjust-group h3 {
  margin: 0 0 12px;
  color: #26334a;
  font-size: 0.95rem;
}

.image-adjust-control {
  margin-bottom: 13px;
}

.image-adjust-control:last-child {
  margin-bottom: 0;
}

.image-adjust-control-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 5px;
  color: #4a566b;
  font-size: 0.82rem;
}

.image-adjust-value {
  min-width: 34px;
  color: #315fd8;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
}

.image-adjust-control input[type="range"] {
  width: 100%;
  margin: 0;
  accent-color: #315fd8;
}

.image-adjuster-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid #dce3ee;
  background: #fff;
}

.image-adjuster-action-main {
  display: flex;
  gap: 10px;
}

.image-adjuster-actions button {
  min-height: 42px;
  padding: 10px 18px;
  border-radius: 8px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.image-adjust-reset,
.image-adjust-cancel {
  border: 1px solid #cbd3df;
  background: #fff;
  color: #465268;
}

.image-adjust-apply {
  border: 1px solid #315fd8;
  background: #315fd8;
  color: #fff;
}

.image-adjust-apply:disabled {
  cursor: wait;
  opacity: 0.65;
}

@media (max-width: 720px) {
  .image-adjuster {
    padding: 0;
  }

  .image-adjuster-panel {
    width: 100%;
    height: 100dvh;
    border-radius: 0;
  }

  .image-adjuster-header {
    padding: 12px 14px;
  }

  .image-adjuster-body {
    display: flex;
    flex-direction: column;
  }

  .image-adjuster-preview {
    flex: 0 0 min(39dvh, 360px);
    padding: 10px;
  }

  .image-adjuster-controls {
    flex: 1;
    padding: 14px 16px 24px;
    border-top: 1px solid #dce3ee;
    border-left: 0;
  }

  .image-adjuster-actions {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }

  .image-adjuster-actions button {
    min-height: 40px;
    padding: 8px 12px;
    font-size: 0.84rem;
  }
}

#image-modal { 
  position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
  background: rgba(0,0,0,0.9); z-index: 12000; 
  display: none; justify-content: center; align-items: center; flex-direction: column; 
}
#image-modal img { max-width: 95%; max-height: 85%; border: 2px solid #fff; border-radius: 4px; }
#image-modal .close-text { color: #fff; margin-top: 15px; text-decoration: underline; cursor: pointer; }


/* =========================================================
   9. Other Utilities
   ========================================================= */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* SweetAlert2の前面表示 */
.swal2-container { z-index: 20000 !important; }







/* =========================================================
   10. Responsive (Mobile) - HTML制限解除・全画面完全修正版
   ========================================================= */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {

  /* --- 基本設定 --- */
  .container { 
    height: 100dvh !important; 
    padding: 10px 15px 0 15px !important;
    max-width: 100% !important; width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* --- 既存パーツ調整 --- */
  .app-title { font-size: 1.1rem; white-space: nowrap; margin-right: 5px; }
  .header-right { flex: 1; max-width: none; flex-wrap: nowrap; justify-content: flex-end; gap: 2px; }
  .header-right button, .header-right a { flex-shrink: 0 !important; font-size: 1.4rem; padding: 2px; }
  .dashboard-header { padding-left: 2px !important; padding-right: 2px !important; }
  .dashboard-header h1 { font-size: 12px; }
  .header-plan-badge {
    max-width: none;
    padding: 0 8px;
    overflow: hidden;
    font-size: 0.68rem;
    text-overflow: ellipsis;
  }
  .user-info-line { display: none; }
  
  /* --- コントロールバー --- */
  #log-list-control {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 6px !important;
    align-items: center;
    width: 100%;
  }
  #log-list-control #log-search-input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    height: 38px !important;
    font-size: 14px;
  }
  #log-list-control #reload-log-btn {
    flex: 0 0 auto;
    height: 38px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    margin: 0 !important;
  }
  #log-list-control .right-control-group {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
  }
  #log-list-control .right-control-group .btn-control {
    flex: 0 0 auto;
    height: 38px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    margin: 0 !important;
  }
  #to-add-log-btn {
    display: inline-flex !important;
  }
  .pc-only { display: none; }

  /* 検索フォーカス時: 検索欄を優先し、右側3ボタンは同幅アイコンサイズで固定 */
  #log-list-control.is-search-focused {
    --focus-btn-size: 36px;
    --focus-group-gap: 4px;
  }
  #log-list-control.is-search-focused #log-search-input {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }
  #log-list-control.is-search-focused #reload-log-btn {
    flex: 0 0 var(--focus-btn-size);
    width: var(--focus-btn-size);
    max-width: var(--focus-btn-size);
    min-width: var(--focus-btn-size);
    padding: 0 !important;
  }
  #log-list-control.is-search-focused .right-control-group {
    flex: 0 0 calc(var(--focus-btn-size) * 2 + var(--focus-group-gap));
    width: calc(var(--focus-btn-size) * 2 + var(--focus-group-gap));
    max-width: calc(var(--focus-btn-size) * 2 + var(--focus-group-gap));
    gap: var(--focus-group-gap);
    min-width: 0;
  }
  #log-list-control.is-search-focused #toggle-bulk-mode-btn,
  #log-list-control.is-search-focused #to-add-log-btn {
    flex: 0 0 var(--focus-btn-size);
    width: var(--focus-btn-size);
    max-width: var(--focus-btn-size);
    min-width: var(--focus-btn-size);
    padding: 0 !important;
  }

  /* フォーカス時はアイコン表示に切替 */
  #log-list-control.is-search-focused #reload-log-btn,
  #log-list-control.is-search-focused #toggle-bulk-mode-btn,
  #log-list-control.is-search-focused #to-add-log-btn {
    font-size: 0 !important;
  }
  #log-list-control.is-search-focused #reload-log-btn::before {
    content: "\21BB";
    font-size: 16px;
    line-height: 1;
  }
  #log-list-control.is-search-focused #toggle-bulk-mode-btn::before {
    content: "\2611";
    font-size: 16px;
    line-height: 1;
  }
  #log-list-control.is-search-focused #to-add-log-btn::before {
    content: "\002B";
    font-size: 18px;
    line-height: 1;
    font-weight: bold;
  }

  /* --- テーブル表示 --- */
  .log-table th.action-col, .log-table td.action-col { display: none !important; }
  .mobile-instruction { display: block !important; background: #f0f4f8; padding: 8px; margin-bottom: 10px; }
  #monthly-stats-area { display: none !important; }
  body.is-bulk-mode #monthly-stats-area { display: flex !important; }


  /* =========================================================
     ★設定メニュー (#admin-panel) の強力補正
     ========================================================= */
  #admin-panel {
    /* HTMLのinline style (top:50px, height:80vh等) を全て打ち消す */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    
    background: #fff !important;
    z-index: 2147483647 !important; /* 最前面 */
    
    /* フレックスボックス化して中身を縦に並べる */
    /* displayプロパティは JS制御に従うが、表示時は flex にする */
  }

  /* 表示中 (非表示でない) なら Flexレイアウト強制 */
  #admin-panel:not([style*="display:none"]):not([style*="display: none"]) {
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* JSが display: none にしている時は隠す */
  #admin-panel[style*="display:none"],
  #admin-panel[style*="display: none"] {
    display: none !important;
  }

  /* --- ヘッダーエリア (.admin-header-wrapper) --- */
  #admin-panel .admin-header-wrapper {
    flex: 0 0 auto !important; /* 高さを中身に合わせる（縮めない・伸ばさない） */
    width: 100% !important;
    background: #fff !important;
    border-bottom: 1px solid #eee;
    padding: 10px 10px 5px 10px !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 10 !important;
  }

  /* 閉じるボタン */
  #admin-panel .close-modal-btn {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 24px !important;
    background: #f0f0f0 !important;
    border-radius: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 20 !important;
    cursor: pointer !important;
  }

  /* タブボタンの列 */
  #admin-panel .admin-tab-header {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: hidden !important; /* 横スクロール禁止 */
    gap: 2px !important;
    padding-bottom: 0 !important;
    margin-top: 10px !important;
  }
  
  #admin-panel .admin-tab-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    padding: 6px 0 !important;
    font-size: 11px !important;
  }

  /* スマホではアイコン優先で全タブを1画面内に収める */
  #admin-panel .admin-tab-btn .tab-icon {
    font-size: 0.9rem !important;
    margin-bottom: 0 !important;
  }

  #admin-panel .admin-tab-btn .tab-label {
    display: none !important;
  }

  /* --- コンテンツエリア (.admin-content-wrapper) --- */
  #admin-panel .admin-content-wrapper {
    /* 残りの高さを全部使う (これが真っ白解消のカギ) */
    flex: 1 1 auto !important;
    
    width: 100% !important;
    height: auto !important; /* flexで伸びるのでauto */
    
    overflow-y: auto !important; /* 縦スクロール */
    -webkit-overflow-scrolling: touch;
    
    padding: 15px !important;
    box-sizing: border-box !important;
    background: #fff !important;
  }


  /* =========================================================
     ★活動記録グラフ (#graph-screen)
     ========================================================= */
  #graph-screen {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    max-width: none !important; max-height: none !important;
    margin: 0 !important; padding: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    z-index: 2147483647 !important;
  }

  #graph-screen:not([style*="none"]) {
    display: flex !important;
    flex-direction: column !important;
  }

  #graph-screen[style*="none"] {
    display: none !important;
  }

  /* ヘッダー */
  #graph-screen .dashboard-header {
    flex: 0 0 50px !important;
    background: #fff !important;
    border-bottom: 1px solid #eee;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
  }

  /* 閉じるボタン */
  #graph-screen .close-modal-btn {
    position: absolute !important;
    top: 5px !important; right: 5px !important;
    width: 40px !important; height: 40px !important;
    font-size: 24px !important;
    z-index: 20 !important;
  }

  /* 中身 */
  #graph-screen .graph-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding: 10px !important;
    width: 100% !important;
  }
  
  #graph-screen .graph-body > div[style*="height:300px"],
  #graph-screen .graph-body > div[style*="height: 300px"] {
    height: auto !important;
    min-height: 300px !important;
    width: 100% !important;
  }

  /* SweetAlert2のポップアップを最前面に表示する */
  .swal2-container {
    z-index: 2147483647 !important;
  }
}








/* --- 横向き警告 (スマホで横向きになった場合) --- */
/* 修正ポイント:
   1. max-width を 900px -> 1280px に拡大 (高解像度スマホ対策)
   2. max-height: 600px を追加 (横向きスマホは縦幅が狭いため、これを条件にするとPCを除外しやすい)
*/
@media screen and (orientation: landscape) and (max-width: 1280px) and (max-height: 600px) {
  /* 本文を隠す、または操作不能にする */
  body::after {
    content: "スマートフォンは縦向きでご利用ください 📱🔄";
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(50, 50, 50, 0.95);
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999; /* 最前面 */
    text-align: center;
    white-space: pre;
    pointer-events: auto; /* クリックやタッチを確実にブロック */
  }
  
  /* 背面のスクロールも禁止したい場合 */
  body {
    overflow: hidden !important;
  }
}