/* ========================================================
   FlaStudio 制作管理システム - Stylesheet (Material Design 3)
   Font: Zen Maru Gothic
   ======================================================== */

:root {
  /* Google Material Design 3 色定義 */
  --md-sys-color-primary: #3b5ba9;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #dbe1ff;
  --md-sys-color-on-primary-container: #00174b;

  --md-sys-color-secondary: #585e71;
  --md-sys-color-secondary-container: #dce2f9;
  --md-sys-color-on-secondary-container: #151b2c;

  --md-sys-color-tertiary: #715573;
  --md-sys-color-tertiary-container: #fbd7fc;
  --md-sys-color-on-tertiary-container: #29132d;

  --md-sys-color-surface: #fbf8fd;
  --md-sys-color-surface-container: #f0edf2;
  --md-sys-color-surface-container-high: #eae7ec;
  --md-sys-color-on-surface: #1a1b1f;
  --md-sys-color-on-surface-variant: #45464f;
  --md-sys-color-outline: #757680;
  --md-sys-color-outline-variant: #c5c6d0;

  /* 納期ハイライト色 */
  --color-due-highlight: #e11d48;
  --color-due-bg: #ffe4e6;

  /* MTG日ハイライト色 */
  --color-mtg-highlight: #0284c7;
  --color-mtg-bg: #e0f2fe;

  --m3-shape-corner-small: 8px;
  --m3-shape-corner-medium: 12px;
  --m3-shape-corner-large: 16px;
  --m3-shape-corner-full: 9999px;
  --timeline-day-width: 44px;

  --font-family: 'Zen Maru Gothic', sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  line-height: 1.5;
  height: 100vh;
  overflow: hidden;
  user-select: none;
}

/* ========================================================
   共通 M3 コンポーネントスタイル
   ======================================================== */

.m3-button {
  font-family: var(--font-family);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--m3-shape-corner-full);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
  white-space: nowrap;
}

.m3-button.filled {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.m3-button.filled:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  filter: brightness(1.05);
}

.m3-button.tonal {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.m3-button.tonal:hover {
  filter: brightness(0.96);
}

.m3-button.outlined {
  background-color: transparent;
  border: 1px solid var(--md-sys-color-outline);
  color: var(--md-sys-color-primary);
}
.m3-button.outlined:hover {
  background-color: rgba(59, 91, 169, 0.08);
}

.m3-button.text {
  background-color: transparent;
  color: var(--md-sys-color-primary);
}
.m3-button.text:hover {
  background-color: rgba(59, 91, 169, 0.08);
}

.m3-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--m3-shape-corner-full);
  background: transparent;
  border: none;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  transition: background-color 0.2s;
}
.m3-icon-button:hover {
  background-color: rgba(0, 0, 0, 0.06);
}

.m3-card {
  background-color: #ffffff;
  border-radius: var(--m3-shape-corner-large);
  border: 1px solid var(--md-sys-color-outline-variant);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* フォーム要素 */
.m3-textfield, .m3-selectfield {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.m3-textfield label, .m3-selectfield label, .field-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant);
}

.m3-textfield input, .m3-selectfield select, .m3-textfield textarea {
  font-family: var(--font-family);
  padding: 10px 14px;
  border-radius: var(--m3-shape-corner-small);
  border: 1px solid var(--md-sys-color-outline-variant);
  background-color: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s, background-color 0.2s;
}

.m3-textfield input:focus, .m3-selectfield select:focus, .m3-textfield textarea:focus {
  border-color: var(--md-sys-color-primary);
  background-color: #ffffff;
}

.input-wrapper {
  display: flex;
  align-items: center;
  background-color: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--m3-shape-corner-small);
  padding: 0 12px;
}
.input-wrapper .material-symbols-outlined {
  color: var(--md-sys-color-outline);
  margin-right: 8px;
}
.input-wrapper input {
  border: none;
  background: transparent;
  width: 100%;
  padding: 10px 0;
}

.form-row {
  display: flex;
  gap: 16px;
}
.form-row > * {
  flex: 1;
}

.checkbox-row {
  margin-bottom: 16px;
  padding: 8px 12px;
  background-color: var(--md-sys-color-surface-container);
  border-radius: var(--m3-shape-corner-small);
}
.m3-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}
.m3-checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--md-sys-color-primary);
}

/* ========================================================
   認証モーダル
   ======================================================== */
.auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
}
.auth-overlay.active {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}
.auth-card {
  width: 100%;
  max-width: 440px;
  padding: 36px 32px;
  background: #ffffff;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
.auth-header {
  text-align: center;
  margin-bottom: 24px;
}
.auth-logo-img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  margin-bottom: 8px;
  border-radius: var(--m3-shape-corner-medium);
}
.auth-title {
  font-size: 26px;
  font-weight: 700;
}
.auth-subtitle {
  font-size: 14px;
  color: var(--md-sys-color-on-surface-variant);
  margin-top: 4px;
}
.auth-actions {
  margin-top: 16px;
}
.auth-actions button {
  width: 100%;
  height: 42px;
  font-size: 14px;
}
.discord-login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.discord-login-btn {
  width: 100%;
  height: 48px;
  background-color: #5865F2;
  color: #ffffff !important;
  border-radius: 24px;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 16px rgba(88, 101, 242, 0.3);
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
  border: none;
  cursor: pointer;
  letter-spacing: 0.3px;
}
.discord-login-btn:hover {
  background-color: #4752C4;
  box-shadow: 0 6px 20px rgba(88, 101, 242, 0.45);
  transform: translateY(-1px);
}
.discord-login-btn:active {
  background-color: #3c45a5;
  transform: translateY(0);
}
.discord-logo-svg {
  flex-shrink: 0;
}
.auth-notice {
  font-size: 11px;
  color: var(--md-sys-color-outline);
  text-align: center;
  margin-top: 14px;
  line-height: 1.5;
}
.login-member-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px 2px;
}
.login-member-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background-color: var(--md-sys-color-surface-container-low, #f7f9fe);
  border: 1px solid var(--md-sys-color-outline-variant, #e0e3ea);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
  width: 100%;
  box-sizing: border-box;
}
.login-member-card:hover {
  background-color: var(--md-sys-color-surface-container-highest, #edf0f8);
  border-color: var(--md-sys-color-primary, #3b5ba9);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 91, 169, 0.12);
}
.login-member-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.login-member-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--md-sys-color-on-surface);
  display: flex;
  align-items: center;
  gap: 6px;
}
.login-member-sub {
  font-size: 11px;
  color: var(--md-sys-color-on-surface-variant);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.auth-divider-text {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--md-sys-color-outline);
  font-size: 11px;
  font-weight: 700;
  margin: 16px 0 12px;
}
.auth-divider-text::before,
.auth-divider-text::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.auth-divider-text:not(:empty)::before {
  margin-right: 12px;
}
.auth-divider-text:not(:empty)::after {
  margin-left: 12px;
}

/* ========================================================
   レイアウト & ナビゲーション
   ======================================================== */
.app-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.m3-top-app-bar {
  height: 64px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  z-index: 10;
}

.bar-left, .bar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand-logo-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: var(--m3-shape-corner-small);
}
.brand-text {
  font-size: 17px;
  font-weight: 700;
  margin-right: 4px;
}

.main-nav-tabs {
  display: flex;
  gap: 4px;
  background-color: var(--md-sys-color-surface-container);
  padding: 4px;
  border-radius: var(--m3-shape-corner-full);
}
.nav-tab-btn {
  font-family: var(--font-family);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant);
  border-radius: var(--m3-shape-corner-full);
  cursor: pointer;
  transition: all 0.2s;
}
.nav-tab-btn .material-symbols-outlined {
  font-size: 18px;
}
.nav-tab-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
.nav-tab-btn.active {
  background-color: #ffffff;
  color: var(--md-sys-color-primary);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.nav-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--md-sys-color-surface-container);
  padding: 4px 10px;
  border-radius: var(--m3-shape-corner-medium);
}
.breadcrumb-btn {
  font-family: var(--font-family);
  background: none;
  border: none;
  font-size: 12px;
  font-weight: 500;
  color: var(--md-sys-color-primary);
  cursor: pointer;
}
.breadcrumb-btn:hover {
  text-decoration: underline;
}
.breadcrumb-sep {
  color: var(--md-sys-color-outline);
  font-size: 11px;
}
.breadcrumb-current {
  font-size: 12px;
  font-weight: 700;
  color: var(--md-sys-color-on-surface);
}

.filter-toggle-btn.active {
  background-color: var(--md-sys-color-tertiary-container);
  border-color: var(--md-sys-color-tertiary);
  color: var(--md-sys-color-on-tertiary-container);
  font-weight: 700;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--m3-shape-corner-full);
  font-size: 13.5px;
  font-weight: 700;
  transition: background-color 0.15s, box-shadow 0.15s, border-color 0.15s;
  border: 1px solid transparent;
}
.user-chip:hover {
  background-color: var(--md-sys-color-surface-container-high);
  border-color: var(--md-sys-color-outline-variant);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.main-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 24px;
  overflow: hidden;
  gap: 14px;
}

.page-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 16px;
  overflow-y: auto;
}

.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.view-title {
  font-size: 18px;
  font-weight: 700;
}
.view-subtitle {
  font-size: 12px;
  color: var(--md-sys-color-on-surface-variant);
}
.section-title {
  font-size: 16px;
  font-weight: 700;
}

/* ========================================================
   全プロジェクト横断マイスケジュール (Home上部)
   ======================================================== */
.my-schedule-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.schedule-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.schedule-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
.schedule-icon {
  font-size: 28px;
  color: var(--color-due-highlight);
}
.schedule-summary-badge {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  padding: 4px 12px;
  border-radius: var(--m3-shape-corner-full);
  font-size: 12px;
  font-weight: 700;
}

.my-schedule-card {
  max-height: 480px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 8px;
}

.schedule-task-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: var(--m3-shape-corner-medium);
  border-bottom: 1px solid #f0edf2;
  transition: background-color 0.15s;
}
.schedule-task-row:last-child {
  border-bottom: none;
}
.schedule-task-row:hover {
  background-color: var(--md-sys-color-surface-container);
}
.schedule-task-row.is-completed {
  opacity: 0.6;
}

.schedule-row-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.schedule-project-badge {
  font-size: 11px;
  font-weight: 700;
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}
.schedule-task-title {
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.schedule-task-title:hover {
  color: var(--md-sys-color-primary);
}

/* 予定区分バッジ (MTG / 担当 / 確認) */
.schedule-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--m3-shape-corner-full, 12px);
  font-weight: 700;
  flex-shrink: 0;
  white-space: nowrap;
}
.schedule-type-badge .material-symbols-outlined {
  font-size: 13px;
}
.schedule-type-badge.mtg {
  background: #e0f2fe;
  color: #0284c7;
  border: 1px solid #bae6fd;
}
.schedule-type-badge.assignee {
  background: #e8edff;
  color: var(--md-sys-color-primary, #3b5ba9);
  border: 1px solid #c7d8ff;
}
.schedule-type-badge.checker {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}

.schedule-subtask-tag {
  font-size: 10px;
  background: #e0f2fe;
  color: #0369a1;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
  flex-shrink: 0;
}
.schedule-mtg-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  background: #e0f2fe;
  color: var(--color-mtg-highlight);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
  flex-shrink: 0;
}
.schedule-mtg-tag .material-symbols-outlined {
  font-size: 12px;
}

.schedule-row-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.schedule-due-tag {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #334155;
  white-space: nowrap;
}
.schedule-due-tag.due {
  background: #ffe4e6;
  color: #e11d48;
}
.schedule-due-tag.mtg {
  background: #e0f2fe;
  color: #0284c7;
}
.schedule-due-tag.checker {
  background: #fef3c7;
  color: #b45309;
}

/* ========================================================
   管理者 ユーザープレビュー中バナー
   ======================================================== */
.preview-mode-banner {
  background-color: #fef3c7;
  border-bottom: 1px solid #fde68a;
  color: #92400e;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  position: sticky;
  top: 54px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.preview-mode-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.preview-exit-btn {
  background-color: #d97706 !important;
  color: #ffffff !important;
  height: 28px !important;
  padding: 0 12px !important;
  font-size: 11px !important;
}

/* ========================================================
   ホーム画面 (覚書)
   ======================================================== */
.home-notes-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  align-content: start;
  padding-bottom: 20px;
}
.note-card {
  background: #ffffff;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--m3-shape-corner-medium);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: transform 0.15s, box-shadow 0.15s;
  position: relative;
  user-select: none;
}
.note-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.note-card.is-dragging {
  opacity: 0.45;
  border: 2px dashed var(--md-sys-color-primary);
}
.note-card.drag-over {
  border: 2px solid var(--md-sys-color-primary);
  background-color: var(--md-sys-color-surface-variant);
}
.note-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.note-header-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}
.note-drag-handle {
  cursor: grab;
  color: var(--md-sys-color-outline);
  display: inline-flex;
  align-items: center;
  user-select: none;
  font-size: 18px;
}
.note-drag-handle:active {
  cursor: grabbing;
}
.note-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--md-sys-color-on-surface);
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.note-lock-badge {
  font-size: 12px;
  color: #b45309;
  background: #fef3c7;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: 700;
  flex-shrink: 0;
}
.note-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.note-action-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  color: var(--md-sys-color-outline);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background-color 0.15s, color 0.15s;
}
.note-action-btn:hover {
  background-color: rgba(0, 0, 0, 0.06);
  color: var(--md-sys-color-on-surface);
}
.note-action-btn.delete:hover {
  color: #ba1a1a;
  background-color: #ffdad6;
}
.note-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: -2px;
}
.note-tag-chip {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 12px;
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  font-weight: 600;
  display: inline-block;
}
.note-content-markdown {
  font-size: 13px;
  color: var(--md-sys-color-on-surface-variant);
  line-height: 1.6;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-height: 240px;
  overflow-y: auto;
  user-select: text;
}
.note-content-markdown p {
  margin: 0 0 6px 0;
}
.note-content-markdown p:last-child {
  margin-bottom: 0;
}
.note-content-markdown h1, .note-content-markdown h2, .note-content-markdown h3, .note-content-markdown h4 {
  margin: 8px 0 4px 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--md-sys-color-on-surface);
}
.note-content-markdown ul, .note-content-markdown ol {
  margin: 4px 0 6px 18px;
  padding: 0;
}
.note-content-markdown li {
  margin-bottom: 2px;
}
.note-content-markdown code {
  background-color: var(--md-sys-color-surface-variant);
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 12px;
}
.note-content-markdown pre {
  background-color: var(--md-sys-color-surface-variant);
  padding: 8px;
  border-radius: 6px;
  overflow-x: auto;
  margin: 6px 0;
}
.note-content-markdown pre code {
  background: none;
  padding: 0;
}
.note-content-markdown blockquote {
  margin: 4px 0;
  padding-left: 10px;
  border-left: 3px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-outline);
}
.note-footer {
  font-size: 11px;
  color: var(--md-sys-color-outline);
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  border-top: 1px dashed var(--md-sys-color-outline-variant);
  padding-top: 6px;
}

/* ========================================================
   左下固定 フローティング表示モード切替
   ======================================================== */
.project-floating-mode-switch {
  position: fixed;
  left: 28px;
  bottom: 28px;
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background-color: var(--md-sys-color-surface, #ffffff);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--m3-shape-corner-full, 28px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  user-select: none;
}

.floating-mode-btn {
  font-family: var(--font-family);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  border: none;
  border-radius: var(--m3-shape-corner-full, 20px);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.floating-mode-btn .material-symbols-outlined {
  font-size: 18px;
}

.floating-mode-btn:hover {
  background-color: var(--md-sys-color-surface-container-highest, rgba(0, 0, 0, 0.04));
  color: var(--md-sys-color-on-surface);
}

.floating-mode-btn.active {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary, #ffffff);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.mobile-only-mode-btn {
  display: none;
}

/* ========================================================
   タイムライン表示期間セレクター (1, 2, 3, 6, 12ヶ月対応)
   ======================================================== */
.timeline-range-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background-color: var(--md-sys-color-surface-container-high);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--m3-shape-corner-medium);
  padding: 6px 12px;
  margin-bottom: 12px;
  width: 100%;
  flex-shrink: 0;
  box-sizing: border-box;
}
.timeline-range-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.timeline-range-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.timeline-nav-arrow {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--md-sys-color-outline-variant);
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}
.timeline-nav-arrow:hover {
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border-color: var(--md-sys-color-primary);
}
.timeline-nav-arrow:active {
  transform: scale(0.92);
}
.timeline-range-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--md-sys-color-on-surface-variant);
  display: flex;
  align-items: center;
  gap: 4px;
}
.timeline-select {
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--m3-shape-corner-small);
  border: 1px solid var(--md-sys-color-outline-variant);
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}
.timeline-select:focus {
  border-color: var(--md-sys-color-primary);
}
.timeline-segmented-group {
  display: inline-flex;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--m3-shape-corner-full);
  overflow: hidden;
  background-color: var(--md-sys-color-surface);
}
.timeline-seg-btn {
  font-family: var(--font-family);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  border: none;
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.timeline-seg-btn:not(:last-child) {
  border-right: 1px solid var(--md-sys-color-outline-variant);
}
.timeline-seg-btn:hover {
  background-color: var(--md-sys-color-surface-container-high);
}
.timeline-seg-btn.active {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  font-weight: 700;
}
.timeline-quick-chips {
  display: flex;
  align-items: center;
  gap: 6px;
}
.timeline-chip-btn {
  font-family: var(--font-family);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: var(--m3-shape-corner-full);
  border: 1px solid var(--md-sys-color-outline);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  transition: all 0.15s;
}
.timeline-chip-btn:hover {
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border-color: var(--md-sys-color-primary);
}
.timeline-range-info {
  font-size: 11px;
  color: var(--md-sys-color-outline);
  white-space: nowrap;
}

/* ========================================================
   ガントチャート & 納期・MTG日色付けハイライト
   ======================================================== */
.control-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.left-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.back-btn {
  height: 36px;
  font-size: 12px;
}
.add-track-btn {
  height: 32px;
  font-size: 12px;
}

.category-filters {
  display: flex;
  align-items: center;
  gap: 6px;
}
.filter-chip {
  font-family: var(--font-family);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--m3-shape-corner-small);
  border: 1px solid var(--md-sys-color-outline-variant);
  background-color: #ffffff;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.filter-chip .material-symbols-outlined {
  font-size: 16px;
}
.filter-chip:hover {
  background-color: var(--md-sys-color-surface-container);
}
.filter-chip.active {
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border-color: var(--md-sys-color-primary);
  font-weight: 700;
}

.gantt-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}
.gantt-card, .portfolio-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.gantt-header-row {
  display: flex;
  height: 48px;
  background-color: var(--md-sys-color-surface-container-high);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  font-size: 13px;
  font-weight: 700;
  position: relative;
  width: 100%;
}

.gantt-sidebar-header {
  width: 380px;
  min-width: 380px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  border-right: 1px solid var(--md-sys-color-outline-variant);
  background-color: var(--md-sys-color-surface-container-high);
  position: sticky;
  left: 0;
  z-index: 20;
}

.gantt-timeline-header {
  flex: 1;
  min-width: 0;
  display: flex;
  overflow-x: hidden;
  scrollbar-width: none;
}
.gantt-timeline-header::-webkit-scrollbar {
  display: none;
}

/* タイムライン日付セル */
.timeline-day-cell {
  flex-shrink: 0;
  box-sizing: border-box;
  min-width: var(--timeline-day-width, 44px);
  width: var(--timeline-day-width, 44px);
  max-width: var(--timeline-day-width, 44px);
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--md-sys-color-outline-variant);
  font-size: 11px;
  color: var(--md-sys-color-on-surface-variant);
  position: relative;
  cursor: pointer;
  background-color: var(--md-sys-color-surface-container-high);
  transition: background-color 0.15s;
  flex-shrink: 0;
}
.timeline-day-cell.month-start-cell {
  box-shadow: inset 2px 0 0 var(--md-sys-color-primary);
}
.timeline-day-cell.today {
  background-color: var(--md-sys-color-primary-container) !important;
  color: var(--md-sys-color-on-primary-container);
  font-weight: 700;
}

/* 納期当日のみのハイライト */
.timeline-day-cell.is-due-date {
  background-color: var(--color-due-bg) !important;
  color: var(--color-due-highlight) !important;
  font-weight: 700;
  border-bottom: 3px solid var(--color-due-highlight);
}
.timeline-day-cell.is-due-date::before {
  position: absolute;
  top: 1px;
  right: 2px;
  font-size: 8px;
}

/* MTG日当日のみのハイライト (カレンダーアイコン 📅) */
.timeline-day-cell.is-mtg-date {
  background-color: var(--color-mtg-bg) !important;
  color: var(--color-mtg-highlight) !important;
  font-weight: 700;
  border-bottom: 3px solid var(--color-mtg-highlight);
}
.timeline-day-cell.is-mtg-date::after {
  position: absolute;
  top: 1px;
  left: 2px;
  font-size: 8px;
}

/* 納期とMTG日が両方ある場合 */
.timeline-day-cell.is-due-date.is-mtg-date {
  background: linear-gradient(135deg, var(--color-due-bg) 50%, var(--color-mtg-bg) 50%) !important;
  border-bottom: 3px solid var(--color-due-highlight);
}

.gantt-body, .portfolio-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
  position: relative;
}

/* カテゴリグループ & 上下ドラッグドロップ */
.gantt-track-group {
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  transition: background-color 0.2s, border-color 0.2s;
  width: max-content;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
}
.gantt-track-group.drag-over {
  background-color: rgba(59, 91, 169, 0.08);
  outline: 2px dashed var(--md-sys-color-primary);
  outline-offset: -2px;
}

/* カテゴリヘッダー（左側固定セル + 右側タイムライン背景） */
.gantt-track-header {
  display: flex;
  background-color: var(--md-sys-color-surface-container);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  width: max-content;
  min-width: 100%;
}
.gantt-track-header-cell {
  width: 380px;
  min-width: 380px;
  padding: 8px 16px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--md-sys-color-surface-container);
  border-right: 1px solid var(--md-sys-color-outline-variant);
  position: sticky;
  left: 0;
  z-index: 15;
}
.gantt-track-header-timeline {
  background-color: var(--md-sys-color-surface-container);
  height: 100%;
  flex-shrink: 0;
}

/* 空白ドロップエリア（ミニタスクドラッグ中のみ表示） */
.category-empty-drop-zone {
  display: none;
  height: 48px;
  border-bottom: 1px dashed var(--md-sys-color-outline-variant);
  transition: all 0.2s;
  width: max-content;
  min-width: 100%;
}
body.is-subtask-dragging .category-empty-drop-zone {
  display: flex;
  animation: dropZoneFadeIn 0.2s ease forwards;
}
@keyframes dropZoneFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.drop-zone-info-cell {
  width: 380px;
  min-width: 380px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-right: 1px solid var(--md-sys-color-outline-variant);
  background-color: #faf9fd;
  color: var(--md-sys-color-primary);
  font-size: 12px;
  font-weight: 700;
  position: sticky;
  left: 0;
  z-index: 12;
}
.drop-zone-track {
  display: flex;
  align-items: center;
  padding-left: 20px;
  color: var(--md-sys-color-outline);
  font-size: 12px;
  background-color: #faf9fd;
  flex-shrink: 0;
}
.category-empty-drop-zone.subtask-drag-over {
  background-color: #ecfdf5;
  outline: 2px dashed #10b981;
  outline-offset: -2px;
}
.category-empty-drop-zone.subtask-drag-over .drop-zone-info-cell,
.category-empty-drop-zone.subtask-drag-over .drop-zone-track {
  background-color: #ecfdf5;
  color: #047857;
  font-weight: 700;
}

/* 大タスク行（ミニタスク複数段・重なり対応） */
.gantt-row {
  display: flex;
  min-height: 64px;
  border-bottom: 1px solid #f0edf2;
  transition: background-color 0.15s, opacity 0.2s;
  position: relative;
  width: max-content;
  min-width: 100%;
  background-color: #ffffff;
}
.gantt-row:hover {
  background-color: #faf9fd;
}
.gantt-row:hover .task-info-cell {
  background-color: #faf9fd;
}
.gantt-row:hover .task-timeline-track {
  background-color: #faf9fd;
}
.gantt-row.is-dragging {
  opacity: 0.35;
  background-color: #e2e8f0;
}

/* ミニタスクのドロップ受け入れハイライト */
.gantt-row.subtask-drag-over {
  background-color: #eff6ff !important;
  outline: 2px dashed #3b82f6;
  outline-offset: -2px;
}

/* ミニタスクゼロの大タスク用プレースホルダーバー */
.gantt-empty-task-bar {
  position: absolute;
  top: 18px;
  height: 28px;
  border-radius: var(--m3-shape-corner-small);
  border: 2px dashed rgba(59, 91, 169, 0.35);
  background: rgba(59, 91, 169, 0.04);
  color: var(--md-sys-color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 0 10px;
  box-sizing: border-box;
  transition: all 0.2s;
  user-select: none;
  z-index: 1;
}
.gantt-empty-task-bar:hover {
  background: rgba(59, 91, 169, 0.1);
  border-color: var(--md-sys-color-primary);
}
.empty-task-bar-label {
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-info-cell {
  width: 380px;
  min-width: 380px;
  align-self: stretch;
  padding: 14px 12px 10px 12px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border-right: 1px solid var(--md-sys-color-outline-variant);
  background-color: #ffffff;
  position: sticky;
  left: 0;
  z-index: 10;
  transition: background-color 0.15s;
  box-sizing: border-box;
}

.drag-grip-icon {
  color: var(--md-sys-color-outline);
  cursor: grab;
  font-size: 20px;
  user-select: none;
}
.drag-grip-icon:active {
  cursor: grabbing;
}

.task-checkbox {
  cursor: pointer;
  accent-color: var(--md-sys-color-primary);
}

.task-title-group {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.task-name-text {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
}
.task-name-text.completed {
  text-decoration: line-through;
  color: var(--md-sys-color-outline);
}
.task-dates-text {
  font-size: 11px;
  color: var(--md-sys-color-outline);
  display: flex;
  align-items: center;
  gap: 6px;
}

.assignees-stack {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: nowrap;
  overflow: visible;
  padding: 2px 4px;
}
.task-assignee-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border-radius: var(--m3-shape-corner-full);
  font-size: 10px;
  font-weight: 500;
  background-color: var(--md-sys-color-surface-container);
  white-space: nowrap;
}
.guest-tag {
  font-size: 8px;
  background-color: #ffd8a8;
  color: #d9480f;
  padding: 0 3px;
  border-radius: 3px;
  font-weight: 700;
}

.task-timeline-track {
  flex: 1;
  position: relative;
  display: block;
  height: 100%;
}

.timeline-grid-line {
  position: absolute;
  top: 0;
  bottom: 0;
  box-sizing: border-box;
  width: var(--timeline-day-width, 44px);
  border-right: 1px dashed rgba(0, 0, 0, 0.06);
  pointer-events: none;
}

/* 同一行内に複数並ぶミニタスクバー (DnD対応) */
.gantt-subtask-bar {
  position: absolute;
  height: 28px;
  border-radius: var(--m3-shape-corner-small);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  cursor: grab;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  transition: box-shadow 0.15s, opacity 0.2s;
  overflow: visible;
  white-space: nowrap;
  user-select: none;
  z-index: 2;
}
.gantt-subtask-bar:active {
  cursor: grabbing;
}
.gantt-subtask-bar:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.25);
  filter: brightness(1.08);
}
.gantt-subtask-bar.is-completed {
  opacity: 0.65;
  background: #78909c !important;
  text-decoration: line-through;
}
.gantt-subtask-bar.is-subtask-dragging {
  opacity: 0.35;
}

.subtask-bar-title {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.gantt-bar-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  cursor: ew-resize;
  background: rgba(255, 255, 255, 0.4);
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 5;
  touch-action: none;
}
.gantt-subtask-bar:hover .gantt-bar-handle {
  opacity: 1;
}
.gantt-bar-handle.left {
  left: 0;
  border-top-left-radius: var(--m3-shape-corner-small);
  border-bottom-left-radius: var(--m3-shape-corner-small);
}
.gantt-bar-handle.right {
  right: 0;
  border-top-right-radius: var(--m3-shape-corner-small);
  border-bottom-right-radius: var(--m3-shape-corner-small);
}

.timeline-marker {
  position: absolute;
  top: 6px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: transform 0.15s;
}
.timeline-marker:hover {
  transform: scale(1.2);
}
.timeline-marker.due {
  background: var(--color-due-bg);
  border: 1.5px solid var(--color-due-highlight);
}
.timeline-marker.mtg {
  background: var(--color-mtg-bg);
  border: 1.5px solid var(--color-mtg-highlight);
  color: var(--color-mtg-highlight);
}
.timeline-marker.mtg .material-symbols-outlined {
  font-size: 13px;
}

/* ホバー詳細カード */
.m3-hover-card {
  position: fixed;
  width: 310px;
  background: #ffffff;
  border-radius: var(--m3-shape-corner-medium);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  border: 1px solid var(--md-sys-color-outline-variant);
  padding: 14px 16px;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.m3-hover-card.active {
  opacity: 1;
  transform: translateY(0);
}
/* 日付ホバー時はカード内のリンクを操作可能にする */
.m3-hover-card.is-interactive.active {
  pointer-events: auto;
}
.m3-hover-card.is-interactive .hover-card-desc {
  max-height: 240px;
}
.hover-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.hover-card-header h4 {
  font-size: 14px;
  font-weight: 700;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hover-card-header .badge {
  font-size: 10px;
  background: #e8f5e9;
  color: #2e7d32;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
}
.hover-card-meta {
  font-size: 11px;
  color: var(--md-sys-color-on-surface-variant);
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 8px;
}
.hover-card-desc {
  font-size: 12px;
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container);
  padding: 8px 10px;
  border-radius: var(--m3-shape-corner-small);
  margin-bottom: 8px;
  max-height: 80px;
  overflow-y: auto;
}
.hover-card-subtasks {
  font-size: 11px;
}
.hover-subtask-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 2px;
}

/* リスト表示エリア */
.list-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.list-section .list-toolbar-bar {
  flex-shrink: 0;
}
.list-card {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}
.list-track-group {
  margin-bottom: 24px;
}
.list-track-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--md-sys-color-surface-container);
}

.list-task-item {
  background-color: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--m3-shape-corner-medium);
  padding: 14px 18px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.15s;
}
.list-task-item:hover {
  background-color: #ffffff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.list-task-item.is-completed {
  opacity: 0.65;
  background-color: #f7f7f9;
}

.list-task-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.list-task-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.list-task-name {
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list-task-name:hover {
  color: var(--md-sys-color-primary);
}
.list-task-name.completed {
  text-decoration: line-through;
  color: var(--md-sys-color-outline);
}

.list-task-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.list-task-desc {
  font-size: 13px;
  color: var(--md-sys-color-on-surface-variant);
  background: var(--md-sys-color-surface-container);
  padding: 8px 12px;
  border-radius: var(--m3-shape-corner-small);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.list-subtasks-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 12px;
}
.subtask-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}

/* 複数担当者選択 & ミニタスク担当者 */
.m3-multiselect-field {
  margin-bottom: 14px;
}
.assignee-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 6px;
  background: var(--md-sys-color-surface-container);
  padding: 10px;
  border-radius: var(--m3-shape-corner-small);
  max-height: 140px;
  overflow-y: auto;
}
.assignee-check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  cursor: pointer;
}
.assignee-check-label input {
  accent-color: var(--md-sys-color-primary);
}

.add-subtask-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--md-sys-color-surface-container);
  padding: 10px;
  border-radius: var(--m3-shape-corner-small);
}
.add-subtask-box input {
  font-family: var(--font-family);
  height: 36px;
  padding: 0 10px;
  border-radius: var(--m3-shape-corner-small);
  border: 1px solid var(--md-sys-color-outline-variant);
  background: #ffffff;
  outline: none;
}
.subtask-assignees-select-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.picker-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.picker-chip {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--m3-shape-corner-full);
  border: 1px solid var(--md-sys-color-outline-variant);
  background: #ffffff;
  cursor: pointer;
  transition: all 0.15s;
}
.picker-chip.selected {
  background: var(--md-sys-color-primary-container);
  border-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary-container);
  font-weight: 700;
}

.subtasks-management {
  margin-bottom: 16px;
}
.subtasks-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 6px;
  display: block;
}
.modal-subtask-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.modal-subtask-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--md-sys-color-surface-container);
  padding: 6px 12px;
  border-radius: var(--m3-shape-corner-small);
  font-size: 13px;
  gap: 8px;
}
.modal-subtask-item label {
  min-width: 0;
  flex: 1;
}
.modal-subtask-item label span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.subtask-text-label {
  transition: color 0.15s;
}
.subtask-text-label:hover {
  color: var(--md-sys-color-primary);
  text-decoration: underline;
}
.modal-subtask-edit-box {
  background: var(--md-sys-color-surface-container-high);
  border: 1.5px solid var(--md-sys-color-primary);
  padding: 8px 10px;
  border-radius: var(--m3-shape-corner-small);
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.subtask-edit-input {
  height: 32px;
  padding: 0 8px;
  font-family: var(--font-family);
  font-size: 12.5px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--m3-shape-corner-small);
  background: #ffffff;
  color: var(--md-sys-color-on-surface);
  outline: none;
  box-sizing: border-box;
}
.subtask-edit-input:focus {
  border-color: var(--md-sys-color-primary);
}

/* ポートフォリオ行 */
.portfolio-row {
  display: flex;
  height: 64px;
  border-bottom: 1px solid #f0edf2;
  transition: background-color 0.15s;
  cursor: pointer;
  width: max-content;
  min-width: 100%;
}
.portfolio-row:hover {
  background-color: #f7f5fa;
}
.portfolio-row:hover .portfolio-info-cell {
  background-color: #f7f5fa;
}
.portfolio-info-cell {
  width: 380px;
  min-width: 380px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-right: 1px solid var(--md-sys-color-outline-variant);
  position: sticky;
  left: 0;
  z-index: 10;
}
.project-title-group {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.project-name-text {
  font-size: 14px;
  font-weight: 700;
  color: var(--md-sys-color-on-surface);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  cursor: pointer;
  border-radius: 4px;
  padding: 1px 4px;
  margin-left: -4px;
  transition: background-color 0.2s;
}
.project-name-text:hover {
  background-color: rgba(0, 0, 0, 0.06);
}
.project-meta-text {
  font-size: 11px;
  color: var(--md-sys-color-outline);
}
.members-avatar-stack {
  display: flex;
  align-items: center;
}
.member-avatar-chip {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  border: 2px solid #fff;
  margin-left: -6px;
}
.member-avatar-chip:first-child {
  margin-left: 0;
}

.portfolio-bar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 36px;
  border-radius: var(--m3-shape-corner-medium);
  background: linear-gradient(135deg, #3b5ba9, #536dfe);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  cursor: grab;
  user-select: none;
  min-width: 28px;
  overflow: hidden;
  gap: 8px;
}
.portfolio-bar span:first-child {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.portfolio-bar span:last-child {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 11px;
}
.portfolio-bar:active {
  cursor: grabbing;
}

/* 完了済みプロジェクトのグレーアウト */
.portfolio-row.is-completed-project {
  opacity: 0.65 !important;
  background-color: #f9fafb !important;
}
.portfolio-row.is-completed-project .portfolio-info-cell {
  background-color: #f9fafb !important;
}
.portfolio-row.is-completed-project .portfolio-bar {
  background: #9ca3af !important;
  box-shadow: none !important;
}

/* 変更履歴 ドロワー & オーバーレイ */
.history-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s cubic-bezier(0.2, 0, 0, 1), visibility 0.25s;
}
.history-drawer-overlay.active {
  opacity: 1;
  visibility: visible;
}

.history-drawer {
  position: fixed;
  top: 64px;
  right: 0;
  width: 400px;
  max-width: 100%;
  bottom: 0;
  background-color: #ffffff;
  box-shadow: -4px 0 16px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1), visibility 0.3s;
  z-index: 999;
}
.history-drawer.open {
  transform: translateX(0);
  visibility: visible;
}
.drawer-header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.title-with-icon {
  display: flex;
  align-items: center;
  gap: 8px;
}
.title-with-icon .material-symbols-outlined {
  color: var(--md-sys-color-primary);
}
.drawer-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}
.history-desc {
  font-size: 12px;
  color: var(--md-sys-color-outline);
  margin-bottom: 16px;
}
.git-timeline {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}
.git-timeline::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background-color: var(--md-sys-color-outline-variant);
}
.commit-card {
  display: flex;
  gap: 12px;
  position: relative;
}
.commit-node {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.commit-node .material-symbols-outlined {
  font-size: 16px;
}
.commit-details {
  flex: 1;
  background-color: var(--md-sys-color-surface-container);
  padding: 12px 14px;
  border-radius: var(--m3-shape-corner-medium);
  font-size: 12px;
}
.commit-message {
  font-weight: 700;
  font-size: 13px;
  color: var(--md-sys-color-on-surface);
  margin-bottom: 4px;
}
.commit-meta {
  color: var(--md-sys-color-outline);
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}
.commit-diff {
  font-family: monospace;
  background: rgba(0,0,0,0.04);
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 11px;
  color: var(--md-sys-color-primary);
}

.integration-box {
  background-color: var(--md-sys-color-surface-container);
  padding: 14px;
  border-radius: var(--m3-shape-corner-medium);
  margin-bottom: 16px;
}
.integration-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 8px;
}
.integration-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.integration-actions button {
  height: 36px;
  font-size: 12px;
}

.m3-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.m3-modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.m3-modal-card {
  width: 100%;
  max-width: 580px;
  background: #ffffff;
  border-radius: var(--m3-shape-corner-large);
  padding: 15px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
  max-height: 90vh;
  overflow-y: auto;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.modal-header h2 {
  font-size: 20px;
  font-weight: 700;
}
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}

/* ========================================================
   ヘッダー: 納期・MTGボタン ＆ 設定ドロップダウン
   ======================================================== */
.header-events-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  background-color: var(--md-sys-color-surface-container-high, #ece6f0);
  color: var(--md-sys-color-on-surface);
  font-weight: 700;
  border-radius: var(--m3-shape-corner-full);
  border: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
  padding: 0 12px 0 10px;
  height: 36px;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.header-events-btn:hover {
  background-color: var(--md-sys-color-surface-container-highest, #e6e0e9);
  border-color: var(--color-due-highlight);
}
.header-events-btn .header-events-icon {
  color: var(--color-due-highlight);
  font-size: 20px;
}
.header-badge {
  background-color: var(--md-sys-color-primary-container, #dbe4f9);
  color: var(--md-sys-color-on-primary-container, #13274f);
  border: 1px solid rgba(59, 91, 169, 0.2);
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: var(--m3-shape-corner-full);
  min-width: 18px;
  text-align: center;
  margin-left: 2px;
}

.settings-dropdown-wrapper {
  position: relative;
}
.m3-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: #ffffff;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--m3-shape-corner-medium);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 8px 0;
  z-index: 150;
  display: none;
  animation: dropdownFade 0.15s ease forwards;
}
.m3-dropdown-menu.active {
  display: block;
}
@keyframes dropdownFade {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
  cursor: pointer;
  transition: background-color 0.15s;
}
.dropdown-item:hover {
  background-color: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-primary);
}
.dropdown-item .material-symbols-outlined {
  font-size: 20px;
  color: var(--md-sys-color-outline);
}
.dropdown-item:hover .material-symbols-outlined {
  color: var(--md-sys-color-primary);
}

/* ========================================================
   右下固定 フローティングアクションボタン (FAB)
   ======================================================== */
.m3-fab-extended {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 20px;
  border-radius: 16px;
  background-color: #ffffff;
  color: var(--md-sys-color-on-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.m3-fab-extended:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  background-color: #f8fafc;
}
.m3-fab-extended:active {
  transform: translateY(0);
}
.m3-fab-extended.is-active {
  background-color: var(--md-sys-color-primary);
  color: #ffffff;
  border-color: var(--md-sys-color-primary);
  box-shadow: 0 6px 18px rgba(59, 91, 169, 0.35);
}
.m3-fab-extended.is-active .fab-icon {
  color: #ffffff;
}

/* ========================================================
   Discordアイコン ＆ アバター画像スタイル
   ======================================================== */
.member-avatar-img {
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: none;
}
.header-avatar-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}
.header-avatar-slot .member-avatar-img {
  width: 36px !important;
  height: 36px !important;
}
.header-avatar-slot .avatar-fallback {
  width: 36px !important;
  height: 36px !important;
  font-size: 18px !important;
}

#drawer-user-avatar.header-avatar-slot {
  width: 48px;
  height: 48px;
}
#drawer-user-avatar.header-avatar-slot .member-avatar-img {
  width: 48px !important;
  height: 48px !important;
}
#drawer-user-avatar.header-avatar-slot .avatar-fallback {
  width: 48px !important;
  height: 48px !important;
  font-size: 24px !important;
}

.avatar-preview-box {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--m3-shape-corner-medium);
  margin-bottom: 16px;
}
.avatar-large-preview {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--md-sys-color-outline-variant);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.avatar-large-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.task-assignee-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border-radius: var(--m3-shape-corner-full);
  font-size: 11px;
  font-weight: 500;
  background-color: var(--md-sys-color-surface-container);
  white-space: nowrap;
}

/* ========================================================
/* ========================================================
   プロジェクト詳細: 集約ヘッダー ＆ 広域ガントチャートモード
   ======================================================== */
.project-header-card {
  background-color: #ffffff;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--m3-shape-corner-medium);
  padding: 8px 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

/* 1行目: プロジェクト主情報バー */
.project-primary-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.project-primary-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.project-primary-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* 広域表示（折りたたみ）トグルボタン */
.collapse-top-btn {
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: var(--m3-shape-corner-full);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
  border: 1px solid var(--md-sys-color-outline-variant);
  cursor: pointer;
  transition: all 0.2s ease;
}
.collapse-top-btn:hover {
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border-color: var(--md-sys-color-primary);
}
.is-top-collapsed .collapse-top-btn {
  background-color: var(--md-sys-color-primary);
  color: #ffffff;
  border-color: var(--md-sys-color-primary);
}
.is-top-collapsed .collapse-top-btn:hover {
  background-color: var(--md-sys-color-primary);
  opacity: 0.9;
}

/* 2行目: コントロール＆期間バー (折りたたみ対象) */
.project-collapsible-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: max-height 0.25s ease, opacity 0.2s ease;
}
.is-top-collapsed .project-collapsible-controls {
  display: none !important;
}

.project-secondary-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 6px;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}
.project-secondary-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
}
.project-secondary-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* タイムライン期間設定トグルボタン */
.timeline-range-toggle-btn {
  height: 30px;
  padding: 0 10px;
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--m3-shape-corner-small);
  border: 1px solid var(--md-sys-color-outline-variant);
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  cursor: pointer;
  transition: all 0.15s;
}
.timeline-range-toggle-btn:hover {
  background-color: var(--md-sys-color-surface-container);
  border-color: var(--md-sys-color-primary);
}
.timeline-range-toggle-btn.active {
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border-color: var(--md-sys-color-primary);
}

/* タイムライン詳細期間セレクターバー (折りたたみ展開エリア) */
.timeline-range-bar-collapsible {
  margin-top: 2px;
  transition: all 0.2s ease;
}
.timeline-range-bar-collapsible .timeline-range-bar {
  padding: 4px 10px;
  gap: 8px;
  background-color: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--m3-shape-corner-small);
}

/* ========================================================
   2カラムレイアウト (左: ガント/リスト, 右: 資料/メモ)
   ======================================================== */
.project-detail-layout {
  display: flex;
  gap: 0;
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow: hidden;
}

.project-main-column {
  flex: 1;
  min-width: 280px;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* 左右カラムサイズ調整リサイザーハンドル */
.project-layout-resizer {
  width: 12px;
  margin: 0 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: col-resize;
  user-select: none;
  position: relative;
  z-index: 10;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

.project-layout-resizer:hover,
.project-layout-resizer.active {
  background-color: rgba(59, 91, 169, 0.1);
}

.resizer-handle-grip {
  width: 4px;
  height: 32px;
  border-radius: 4px;
  background-color: var(--md-sys-color-outline-variant);
  transition: all 0.2s ease;
}

.project-layout-resizer:hover .resizer-handle-grip,
.project-layout-resizer.active .resizer-handle-grip {
  background-color: var(--md-sys-color-primary);
  height: 48px;
  width: 5px;
}

body.is-resizing-layout {
  cursor: col-resize !important;
  user-select: none !important;
}

body.is-resizing-layout iframe {
  pointer-events: none !important; /* ドラッグ中にiframeに吸い取られるのを防止 */
}

.project-sidebar-column {
  width: 380px;
  min-width: 260px;
  max-width: calc(100% - 300px);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  min-height: 0;
  transition: width 0.05s ease;
}

body.is-resizing-layout .project-sidebar-column {
  transition: none !important;
}

.project-detail-layout.is-sidebar-collapsed .project-sidebar-column,
.project-detail-layout.is-sidebar-collapsed .project-layout-resizer {
  display: none !important;
}

.project-sidebar-card {
  background: #ffffff;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--m3-shape-corner-medium);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.project-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background-color: var(--md-sys-color-surface-container-high);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.sidebar-title-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sidebar-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--md-sys-color-on-surface);
}

.project-sidebar-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sidebar-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sidebar-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--md-sys-color-on-surface-variant);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* プロジェクトメモ */
.project-memo-section {
  flex: 1 0 280px;
  display: flex;
  flex-direction: column;
  min-height: 280px;
}
.project-memo-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 240px;
}
.project-memo-textarea {
  width: 100%;
  flex: 1;
  min-height: 240px;
  box-sizing: border-box;
  font-family: var(--font-family);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--md-sys-color-on-surface);
  background-color: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--m3-shape-corner-small);
  padding: 8px 10px;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s, background-color 0.15s;
}
.project-memo-textarea:focus {
  border-color: var(--md-sys-color-primary);
  background-color: #ffffff;
}

.memo-save-status {
  font-size: 11px;
  color: var(--md-sys-color-outline);
  transition: opacity 0.2s;
}
.memo-save-status.saving {
  color: var(--md-sys-color-primary);
  font-weight: 700;
}

/* サイドバー開閉ボタン */
.project-sidebar-toggle-btn {
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: var(--m3-shape-corner-full);
}
.project-sidebar-toggle-btn.active {
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border-color: var(--md-sys-color-primary);
}

/* サイドバー内の埋め込みグリッドは1列配置 */
.project-sidebar-column .project-embeds-grid {
  grid-template-columns: 1fr;
  gap: 8px;
}
.project-sidebar-column .project-embed-card-title .title-text {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ガントチャートセクションのフィット */
#page-project-detail {
  gap: 8px;
}
#page-project-detail .gantt-section {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#page-project-detail .gantt-card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.project-info-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  background: #ffffff;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  flex-wrap: wrap;
}
.project-info-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.project-detail-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--md-sys-color-on-surface);
  margin: 0;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  transition: background-color 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}
.project-detail-title:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
.inline-project-name-input {
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  color: var(--md-sys-color-on-surface);
  background-color: var(--md-sys-color-surface-container-highest, #edf0f8);
  border: 2px solid var(--md-sys-color-primary, #3b5ba9);
  border-radius: 6px;
  padding: 2px 8px;
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 91, 169, 0.15);
  box-sizing: border-box;
}
.project-tags-list {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.project-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px 2px 10px;
  border-radius: var(--m3-shape-corner-full);
  background-color: #f1f5f9;
  color: #475569;
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: all 0.15s;
}
.project-tag-chip.clickable:hover {
  background-color: #e2e8f0;
  cursor: pointer;
}
.project-tag-chip.active {
  background-color: var(--md-sys-color-primary);
  color: #ffffff;
  border-color: var(--md-sys-color-primary);
}
.project-tag-chip .remove-tag-btn {
  cursor: pointer;
  font-size: 14px;
  margin-left: 2px;
  color: inherit;
  opacity: 0.5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: opacity 0.15s, background-color 0.15s;
}
.project-tag-chip .remove-tag-btn:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.1);
}
.add-tag-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--m3-shape-corner-full);
  background-color: transparent;
  color: var(--md-sys-color-primary);
  border: 1px dashed var(--md-sys-color-primary);
  cursor: pointer;
  transition: all 0.15s;
  height: 24px;
  font-family: inherit;
}
.add-tag-chip-btn:hover {
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border-style: solid;
}
.add-tag-inline-input {
  height: 24px;
  padding: 0 10px;
  font-size: 11px;
  font-family: inherit;
  font-weight: 700;
  border-radius: var(--m3-shape-corner-full);
  border: 1.5px solid var(--md-sys-color-primary);
  outline: none;
  background: #ffffff;
  color: var(--md-sys-color-on-surface);
  box-shadow: 0 0 0 3px rgba(59, 91, 169, 0.15);
  width: 90px;
  box-sizing: border-box;
}

.project-period-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--md-sys-color-outline);
  background-color: var(--md-sys-color-surface-container);
  padding: 4px 12px;
  border-radius: var(--m3-shape-corner-full);
}

.project-portfolio-tags-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.modal-tags-chips-container {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 36px;
  padding: 8px 12px;
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--m3-shape-corner-small);
}

.add-tag-inline-form {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ========================================================
   プロジェクト資料・埋め込み (YouTube / Google Docs)
   ======================================================== */
.project-embeds-section {
  margin: 10px 16px 0;
  border-radius: var(--m3-shape-corner-medium);
  overflow: hidden;
  border: 1px solid var(--md-sys-color-outline-variant);
  background: #ffffff;
}
.project-embeds-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #ffffff;
}
.project-embeds-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.project-embeds-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--md-sys-color-on-surface);
}
.project-embeds-body {
  padding: 12px 16px;
  background: var(--md-sys-color-surface-container-low, #f7f9fe);
  border-top: 1px solid var(--md-sys-color-outline-variant);
}
.project-embeds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
}
.project-embed-card {
  background: #ffffff;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
}
.project-embed-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #ffffff;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  gap: 8px;
}
.project-embed-card-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--md-sys-color-on-surface);
  min-width: 0;
  flex: 1;
}
.project-embed-card-title span.title-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.project-embed-card-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.project-embed-frame-wrapper {
  position: relative;
  width: 100%;
  background: #000000;
  aspect-ratio: 16 / 9;
}
.project-embed-frame-wrapper.is-doc {
  aspect-ratio: 4 / 3;
  max-height: 280px;
  background: #ffffff;
}
.project-embed-frame-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.project-embeds-empty {
  font-size: 12px;
  color: var(--md-sys-color-outline);
  text-align: center;
  padding: 16px;
  grid-column: 1 / -1;
}

/* ========================================================
   「あなたの納期・MTG一覧」モーダル内部リスト
   ======================================================== */
.my-events-list-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 480px;
  overflow-y: auto;
  padding: 4px 2px;
}
.my-event-card {
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
  margin-bottom: 6px;
  background: #ffffff;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-left: 4px solid var(--md-sys-color-primary);
  border-radius: var(--m3-shape-corner-small);
  gap: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: transform 0.12s, box-shadow 0.12s;
}
.my-event-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
/* MTG (紫) */
.my-event-card.is-mtg {
  border-left-color: #8b5cf6;
  background: linear-gradient(to right, rgba(139, 92, 246, 0.04), #ffffff);
}
/* 担当 (オレンジ / プライマリ系) */
.my-event-card.is-assignee {
  border-left-color: #ea580c;
  background: linear-gradient(to right, rgba(234, 88, 12, 0.04), #ffffff);
}
/* 確認 (青 / ターコイズ系) */
.my-event-card.is-checker {
  border-left-color: #0284c7;
  background: linear-gradient(to right, rgba(2, 132, 199, 0.04), #ffffff);
}
/* その他・全体納期 */
.my-event-card.is-due {
  border-left-color: #eab308;
  background: linear-gradient(to right, rgba(234, 179, 8, 0.04), #ffffff);
}

.event-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.3;
}
.event-badge.badge-mtg {
  background: #ede9fe;
  color: #6d28d9;
}
.event-badge.badge-assignee {
  background: #ffedd5;
  color: #c2410c;
}
.event-badge.badge-checker {
  background: #e0f2fe;
  color: #0369a1;
}
.event-badge.badge-due {
  background: #fef9c3;
  color: #854d0e;
}
.project-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface-variant);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}
.m3-btn-subtle {
  background: var(--md-sys-color-surface-variant);
  border: none;
  border-radius: 6px;
  color: var(--md-sys-color-primary);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.m3-btn-subtle:hover {
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

/* Markdownプレビュー表示用スタイル */
.markdown-body {
  font-size: 13px;
  color: var(--md-sys-color-on-surface);
  line-height: 1.6;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.markdown-body p {
  margin: 0 0 8px 0;
}
.markdown-body p:last-child {
  margin-bottom: 0;
}
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 {
  margin: 10px 0 4px 0;
  font-weight: 700;
  color: var(--md-sys-color-on-surface);
}
.markdown-body h1 { font-size: 16px; }
.markdown-body h2 { font-size: 15px; }
.markdown-body h3 { font-size: 14px; }
.markdown-body h4 { font-size: 13px; }
.markdown-body ul, .markdown-body ol {
  margin: 4px 0 8px 20px;
  padding: 0;
}
.markdown-body li {
  margin-bottom: 2px;
}
.markdown-body code {
  background-color: var(--md-sys-color-surface-variant);
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 12px;
}
.markdown-body pre {
  background-color: var(--md-sys-color-surface-variant);
  padding: 8px 12px;
  border-radius: 6px;
  overflow-x: auto;
  margin: 6px 0;
}
.markdown-body pre code {
  background: none;
  padding: 0;
}
.markdown-body blockquote {
  margin: 6px 0;
  padding-left: 10px;
  border-left: 3px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-outline);
}

/* ========================================================
   モバイル・タブレット レスポンシブ対応 (Media Queries)
   768px以下 (タブレット・スマホ) / 480px以下 (小型スマホ)
   ======================================================== */

@media (max-width: 768px) {
  body {
    user-select: auto; /* モバイルでのテキスト選択性を向上 */
  }

  /* 1. トップアプリバーのモバイル最適化 */
  .m3-top-app-bar {
    height: 54px;
    padding: 0 8px;
    gap: 6px;
  }

  .bar-left {
    gap: 6px;
    min-width: 0;
    flex: 1;
    overflow: hidden;
  }

  .brand-text {
    font-size: 14px;
    white-space: nowrap;
  }

  /* モバイルではハンバーガーメニューに集約するためトップバーのタブを非表示に */
  .main-nav-tabs {
    display: none !important;
  }

  /* パンくずの短縮表示 */
  .nav-breadcrumbs {
    padding: 2px 4px;
    font-size: 11px;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .breadcrumb-current {
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
  }

  .bar-right {
    gap: 4px;
    flex-shrink: 0;
  }

  /* ヘッダー納期・MTGボタンの文字をアイコン+バッジにスリム化 */
  .header-events-btn {
    height: 32px;
    padding: 0 6px;
    gap: 3px;
  }
  .header-events-btn .header-events-text {
    display: none; /* 「納期・MTG」の文字を隠してアイコンとバッジのみ表示 */
  }

  /* ユーザーチップは名前を非表示にしアバターのみ */
  .user-chip {
    padding: 1px;
    background: transparent;
  }
  #current-user-name {
    display: none;
  }
  .header-avatar-slot {
    width: 34px;
    height: 34px;
  }

  /* 2. メインコンテンツとページのパディング */
  .main-body {
    padding: 8px 10px;
    gap: 8px;
  }

  .page-container {
    gap: 10px;
  }

  /* 3. プロジェクト情報バナー & タグ */
  .project-info-banner {
    padding: 8px 10px;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .project-info-title-group {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    gap: 6px;
  }

  .project-info-title-group .m3-button span:not(.material-symbols-outlined) {
    display: none;
  }

  .project-detail-title {
    font-size: 15px;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .project-period-badge {
    align-self: flex-start;
    font-size: 11px;
    padding: 3px 8px;
  }

  /* 4. コントロールパネルの省スペース化 (テキスト非表示・アイコン化) */
  .control-panel {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  .left-controls {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
  }

  .control-panel .m3-button {
    padding: 0 8px;
  }
  .control-panel .m3-button span:not(.material-symbols-outlined) {
    display: none;
  }
  .control-panel .m3-button::after {
    display: none;
  }

  /* モバイル時の左下固定モード切替 (リスト/資料メモ の2ボタン。ガントは非表示) */
  .project-floating-mode-switch {
    left: 12px;
    bottom: 12px;
    padding: 3px;
    gap: 2px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);
  }

  .floating-mode-btn {
    height: 38px;
    padding: 0 12px;
    font-size: 12px;
    gap: 4px;
  }

  /* モバイルではガントチャート切替ボタンとガントチャート描画セクションを完全非表示 */
  #btn-mode-gantt,
  #subview-gantt,
  .gantt-section {
    display: none !important;
  }

  /* モバイルでの詳細画面はリスト表示を常時適用 */
  #subview-list {
    display: flex !important;
  }

  /* プロジェクト一覧(Portfolio)でのガントタイムライン非表示・リスト化 */
  .timeline-range-bar,
  #portfolio-timeline-header,
  .portfolio-bar-area {
    display: none !important;
  }
  .portfolio-card .gantt-header-row {
    display: block;
  }
  .portfolio-card .gantt-sidebar-header,
  .portfolio-card .portfolio-info-cell {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    border-right: none !important;
  }

  .mobile-only-mode-btn {
    display: inline-flex;
  }

  /* スマホでのサイドバー開閉トグルボタン・スプリッター非表示 */
  #project-sidebar-toggle-btn,
  .project-layout-resizer {
    display: none !important;
  }

  .project-sidebar-column {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* カテゴリフィルターバーの省スペース化 */
  .category-filters {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    flex: 1;
    order: 3; /* Move to the next row if wrapped */
  }

  .control-panel .m3-button.filled {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
  }

  /* 5. タイムライン表示期間セレクター (モバイル省スペース化) */
  .timeline-range-bar {
    padding: 6px 8px;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin-bottom: 8px;
  }
  .timeline-range-left {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 100%;
    overflow-x: auto;
  }
  .timeline-range-group {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    flex-shrink: 0;
  }
  .timeline-range-label {
    display: none; /* 省略してアイコンのみに */
  }
  .timeline-range-group:has(.timeline-segmented-group) {
    flex-direction: row;
    align-items: center;
    gap: 4px;
  }
  .timeline-select {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    padding: 4px 6px;
  }
  .timeline-segmented-group {
    width: 100%;
    display: flex;
  }
  .timeline-seg-btn {
    flex: 1;
    padding: 6px 2px;
    font-size: 11px;
    text-align: center;
    white-space: nowrap;
  }
  .timeline-quick-chips {
    display: none; /* モバイルではクイック選択チップを非表示にしスペースを確保 */
  }
  .timeline-chip-btn {
    font-size: 10px;
    padding: 3px 8px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .timeline-range-info {
    width: 100%;
    text-align: right;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 6. ガントチャート & ポートフォリオのサイドバー幅縮小 */
  .gantt-sidebar-header,
  .task-info-cell,
  .portfolio-info-cell {
    width: 160px !important;
    min-width: 160px !important;
    padding: 0 6px;
  }

  .gantt-sidebar-header {
    font-size: 11px;
  }

  .task-name-text,
  .project-name-text {
    font-size: 12px;
    min-width: 0;
    flex: 1;
    max-width: 95px;
  }

  .drag-grip-icon {
    font-size: 16px;
  }

  .task-assignee-chip {
    font-size: 10px;
  }

  .timeline-day-cell {
    font-size: 10px;
  }

  /* 7. リスト表示の最適化 (1タスク1行維持) */
  .list-task-item {
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
  }

  .list-task-main {
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: nowrap;
  }

  .list-task-right {
    flex-shrink: 0;
    flex-wrap: nowrap;
    gap: 6px;
  }

  /* 8. ホーム画面（マイスケジュール & 覚書） */
  .schedule-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .schedule-summary-badge {
    align-self: flex-start;
  }

  /* マイスケジュール行のモバイル最適化 (縦積みではみ出し防止) */
  .schedule-task-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px;
  }
  .schedule-row-left {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .schedule-project-badge {
    max-width: 100px;
    font-size: 10px;
    padding: 2px 6px;
  }
  .schedule-task-title {
    font-size: 13px;
    min-width: 0;
    flex: 1;
  }
  .schedule-row-right {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px dashed rgba(0, 0, 0, 0.08);
    padding-top: 6px;
    margin-top: 2px;
  }

  .notes-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* 9. 右下固定FABのモバイル調整 (左下モード切替と重ならないよう上部にオフセット) */
  .m3-fab-extended {
    bottom: 64px;
    right: 16px;
    padding: 0 16px;
    height: 44px;
    font-size: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  }

  /* 10. モーダル全般のモバイル幅 & 下部シート・スクロール対応 */
  .m3-modal-overlay,
  .modal-overlay {
    padding: 0;
    align-items: flex-end; /* 下部シート風 */
  }

  .m3-modal-card,
  .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    border-radius: 20px 20px 0 0 !important;
    margin: 0 !important;
    padding: 16px 14px 24px !important;
    display: flex;
    flex-direction: column;
  }

  .modal-header {
    flex-shrink: 0;
  }

  .modal-body,
  .my-events-modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-height: 0;
    padding: 10px 4px !important;
  }

  .modal-footer {
    flex-shrink: 0;
    padding-top: 10px;
  }

  .form-row {
    flex-direction: column;
    gap: 8px;
  }

  /* テーブルのモバイル横スクロール */
  .admin-users-table-wrapper,
  .modal-body > div:has(table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  /* 納期・MTG一覧カードのモバイル対応 */
  .my-event-card {
    padding: 10px 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* 11. Git履歴ドロワーのモバイル全画面化 */
  .history-drawer {
    top: 0;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 12. 設定ドロップダウンメニュー */
  .m3-dropdown-menu {
    right: 4px;
    width: 250px;
  }
}

@media (max-width: 480px) {
  .brand-text {
    display: none; /* 超小型画面ではロゴテキストを省略してアイコンのみに */
  }

  .nav-breadcrumbs {
    max-width: 70px;
  }
  .breadcrumb-current {
    max-width: 40px;
  }

  .gantt-sidebar-header,
  .task-info-cell,
  .portfolio-info-cell {
    width: 130px !important;
    min-width: 130px !important;
    padding: 0 4px;
  }

  .task-name-text,
  .project-name-text {
    max-width: 75px;
    font-size: 11px;
  }

  .timeline-day-cell {
    font-size: 9px;
  }

  .m3-fab-extended {
    padding: 0 12px;
    height: 44px;
    font-size: 12px;
  }
  #fab-filter-text {
    font-size: 11px;
  }
}

/* ユーザー権限・バッジスタイル */
.admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 9999px;
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.user-badge-general {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 9999px;
  background-color: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
}

/* ========================================================
   ナビゲーションドロワー (ハンバーガーメニュー)
   ======================================================== */
.hamburger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s cubic-bezier(0.2, 0, 0, 1), visibility 0.25s;
}
.nav-drawer-overlay.active {
  opacity: 1;
  visibility: visible;
}

.nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 290px;
  max-width: 85vw;
  bottom: 0;
  background-color: var(--md-sys-color-surface);
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  z-index: 1001;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), visibility 0.25s;
  box-sizing: border-box;
}
.nav-drawer.active {
  transform: translateX(0);
  visibility: visible;
}

.nav-drawer-header {
  height: 60px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  flex-shrink: 0;
}

.nav-drawer-body {
  padding: 12px 10px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-drawer-user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--md-sys-color-surface-container);
  border-radius: var(--m3-shape-corner-medium);
  margin-bottom: 8px;
  cursor: pointer;
  transition: background-color 0.15s;
}
.nav-drawer-user-card:hover {
  background: var(--md-sys-color-surface-container-high);
}
.nav-drawer-user-details {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.nav-drawer-user-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--md-sys-color-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-drawer-user-sub {
  font-size: 11px;
  color: var(--md-sys-color-outline);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-drawer-divider {
  height: 1px;
  background-color: var(--md-sys-color-outline-variant);
  margin: 6px 4px;
}

.nav-drawer-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--md-sys-color-outline);
  padding: 8px 12px 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.nav-drawer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-radius: var(--m3-shape-corner-full);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
  text-align: left;
}
.nav-drawer-item:hover {
  background-color: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
}
.nav-drawer-item.active {
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  font-weight: 700;
}
.nav-drawer-item .material-symbols-outlined {
  font-size: 20px;
  flex-shrink: 0;
}

.nav-drawer-logout {
  color: #b3261e !important;
  margin-top: 4px;
}
.nav-drawer-logout:hover {
  background-color: #ffebee !important;
}

/* ユーザー一括登録 (横一列行スタイル) */
.batch-user-wrapper {
  overflow-x: auto;
  margin-bottom: 8px;
}
.batch-user-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--md-sys-color-on-surface-variant);
  min-width: 620px;
}
.batch-user-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background-color: #ffffff;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--m3-shape-corner-small);
  margin-bottom: 6px;
  min-width: 620px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.batch-user-row:focus-within {
  border-color: var(--md-sys-color-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.batch-user-col-name {
  flex: 1.2;
  min-width: 130px;
}
.batch-user-col-username {
  flex: 1.2;
  min-width: 130px;
}
.batch-user-col-discord {
  flex: 1.6;
  min-width: 180px;
}
.batch-user-col-admin {
  width: 54px;
  flex-shrink: 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.batch-user-col-actions {
  width: 36px;
  flex-shrink: 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.batch-user-input {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  font-family: var(--font-family);
  font-size: 13px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--m3-shape-corner-small);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.batch-user-input:focus {
  border-color: var(--md-sys-color-primary);
  background: #ffffff;
}
.batch-user-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--md-sys-color-primary);
  cursor: pointer;
  margin: 0;
}
.batch-user-del-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--md-sys-color-outline);
  cursor: pointer;
  transition: all 0.15s;
}
.batch-user-del-btn:hover {
  background: rgba(186, 26, 26, 0.1);
  color: #ba1a1a;
}

/* プロジェクトメモ全画面モーダル */
.memo-fullscreen-overlay {
  z-index: 2500;
  padding: 16px;
  box-sizing: border-box;
}

.memo-fullscreen-card {
  width: 100%;
  max-width: 1200px;
  height: 94vh;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  background-color: var(--md-sys-color-surface);
  border-radius: var(--m3-shape-corner-large);
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

.memo-fullscreen-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background-color: var(--md-sys-color-surface-container);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  flex-shrink: 0;
}

.memo-fullscreen-title-area {
  display: flex;
  align-items: center;
  gap: 10px;
}

.memo-fullscreen-title-area h2 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: var(--md-sys-color-on-surface);
}

.memo-fullscreen-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.memo-char-count {
  font-size: 12px;
  color: var(--md-sys-color-outline);
}

.memo-fullscreen-body {
  flex: 1;
  display: flex;
  padding: 16px 20px;
  box-sizing: border-box;
  background-color: var(--md-sys-color-surface);
  overflow: hidden;
}

.memo-fullscreen-textarea {
  width: 100%;
  height: 100%;
  font-family: var(--font-family);
  font-size: 15px;
  line-height: 1.8;
  color: var(--md-sys-color-on-surface);
  background-color: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--m3-shape-corner-medium);
  padding: 16px 20px;
  box-sizing: border-box;
  resize: none;
  outline: none;
  transition: border-color 0.15s, background-color 0.15s;
}

.memo-fullscreen-textarea:focus {
  border-color: var(--md-sys-color-primary);
  background-color: #ffffff;
}

/* カテゴリ管理モーダル */
.category-manager-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 4px;
}

.category-manager-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--m3-shape-corner-small);
  transition: background-color 0.15s, border-color 0.15s;
}

.category-manager-item:hover {
  background: var(--md-sys-color-surface-container-low);
  border-color: var(--md-sys-color-outline);
}

.category-manager-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.cat-reorder-btn-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cat-reorder-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px;
  color: var(--md-sys-color-outline);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cat-reorder-btn:hover:not(:disabled) {
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-primary);
}

.cat-reorder-btn:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

.cat-badge-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: #ffffff;
  flex-shrink: 0;
}

.cat-info-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--md-sys-color-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cat-task-count-badge {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 10px;
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-outline);
  margin-left: 6px;
  white-space: nowrap;
}

.category-manager-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.cat-action-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  color: var(--md-sys-color-outline);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.cat-action-btn:hover {
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
}

.cat-action-btn.delete-btn:hover {
  background: rgba(186, 26, 26, 0.1);
  color: #ba1a1a;
}

/* タスク並び替え用のドラッグ＆ドロップスタイル */
.gantt-row.drag-insert-before {
  position: relative;
}
.gantt-row.drag-insert-before::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--md-sys-color-primary);
  z-index: 100;
  box-shadow: 0 0 6px rgba(59, 91, 169, 0.6);
}

.gantt-row.drag-insert-after {
  position: relative;
}
.gantt-row.drag-insert-after::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--md-sys-color-primary);
  z-index: 100;
  box-shadow: 0 0 6px rgba(59, 91, 169, 0.6);
}

.list-task-item.drag-insert-before {
  position: relative;
}
.list-task-item.drag-insert-before::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--md-sys-color-primary);
  z-index: 100;
  box-shadow: 0 0 6px rgba(59, 91, 169, 0.6);
}

.list-task-item.drag-insert-after {
  position: relative;
}
.list-task-item.drag-insert-after::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--md-sys-color-primary);
  z-index: 100;
  box-shadow: 0 0 6px rgba(59, 91, 169, 0.6);
}

.list-task-item.is-dragging {
  opacity: 0.4;
  background: var(--md-sys-color-surface-container-high);
}

.list-task-drag-grip {
  cursor: grab;
  color: var(--md-sys-color-outline);
  user-select: none;
  padding: 2px;
  border-radius: 4px;
}
.list-task-drag-grip:hover {
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container);
}

/* モダンな担当者選択UI (Chips + Plus Popup) */
.modern-assignee-selector-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 6px 10px;
  background-color: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--m3-shape-corner-medium);
  position: relative;
  justify-content: space-between;
}

.selected-assignees-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.selected-assignee-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 4px;
  background-color: var(--md-sys-color-surface-container-high);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--m3-shape-corner-full);
  font-size: 12px;
  color: var(--md-sys-color-on-surface);
  user-select: none;
  transition: background-color 0.15s, border-color 0.15s;
}

.selected-assignee-chip:hover {
  background-color: var(--md-sys-color-surface-container-highest);
}

.chip-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--md-sys-color-outline);
  cursor: pointer;
  padding: 0;
  margin-left: 2px;
  transition: color 0.15s, background-color 0.15s;
}

.chip-remove-btn:hover {
  color: #ba1a1a;
  background-color: rgba(186, 26, 26, 0.12);
}

.add-assignee-popup-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  border: 1px dashed var(--md-sys-color-outline);
  border-radius: var(--m3-shape-corner-full);
  background: transparent;
  color: var(--md-sys-color-primary);
  font-family: var(--font-family);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.add-assignee-popup-trigger-btn:hover {
  background-color: var(--md-sys-color-primary-container);
  border-color: var(--md-sys-color-primary);
}

.assignee-picker-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 1200;
  width: 280px;
  max-width: 90vw;
  background-color: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--m3-shape-corner-medium);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  animation: m3FadeIn 0.15s ease-out;
}

.assignee-picker-dropdown-header {
  padding: 8px 12px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--md-sys-color-outline);
  background-color: var(--md-sys-color-surface-container);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.assignee-picker-list {
  max-height: 220px;
  overflow-y: auto;
  padding: 4px;
}

.assignee-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--m3-shape-corner-small);
  cursor: pointer;
  transition: background-color 0.12s;
  user-select: none;
}

.assignee-picker-item:hover {
  background-color: var(--md-sys-color-surface-container-high);
}

.assignee-picker-item.is-selected {
  background-color: var(--md-sys-color-primary-container);
}

.assignee-picker-name {
  flex: 1;
  font-size: 12.5px;
  color: var(--md-sys-color-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.assignee-picker-check {
  font-size: 18px;
  color: var(--md-sys-color-primary);
  opacity: 0;
  transition: opacity 0.15s;
}

.assignee-picker-item.is-selected .assignee-picker-check {
  opacity: 1;
}

/* プロジェクトメンバーアバターの拡大 */
.members-avatar-stack {
  display: flex;
  align-items: center;
  padding-left: 10px;
}

.portfolio-row .members-avatar-stack .member-avatar-img,
.portfolio-row .members-avatar-stack .avatar-fallback {
  width: 34px !important;
  height: 34px !important;
  border: 2px solid var(--md-sys-color-surface) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.15s ease, z-index 0.15s;
}

.portfolio-row .members-avatar-stack > div {
  margin-left: -8px !important;
  transition: transform 0.15s ease;
}

.portfolio-row .members-avatar-stack > div:hover {
  transform: translateY(-2px) scale(1.15);
  z-index: 10;
}

/* プロジェクト詳細ヘッダーのメンバーバッジ */
.project-detail-members-stack {
  display: flex;
  align-items: center;
  margin-left: 6px;
}

.project-detail-members-stack > div {
  margin-left: -8px;
  border-radius: 50%;
  border: 2px solid var(--md-sys-color-surface);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.15s ease;
}

.project-detail-members-stack > div:hover {
  transform: translateY(-2px) scale(1.15);
  z-index: 10;
}

/* タグ提案（サジェスト）ポップアップ */
.tag-input-container {
  position: relative;
  display: inline-flex;
}

.tag-suggestions-popup {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 1100;
  min-width: 200px;
  max-width: 320px;
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--m3-shape-corner-medium);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  padding: 8px;
}

.tag-suggestions-header {
  font-size: 11px;
  font-weight: 700;
  color: var(--md-sys-color-outline);
  margin-bottom: 6px;
  padding: 0 4px;
}

.tag-suggestions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 160px;
  overflow-y: auto;
}

.tag-suggestion-chip {
  padding: 3px 8px;
  background-color: var(--md-sys-color-surface-container-high);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--m3-shape-corner-small);
  font-size: 11.5px;
  color: var(--md-sys-color-on-surface);
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s;
}

.tag-suggestion-chip:hover {
  background-color: var(--md-sys-color-primary-container);
  border-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary-container);
}

/* MTG専用デザイン: ドット表示 */
.gantt-mtg-dot {
  position: absolute;
  height: 22px;
  min-width: 22px;
  max-width: 180px;
  border-radius: var(--m3-shape-corner-full);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px 0 4px;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  border: 1.5px solid #ffffff;
  box-shadow: 0 2px 5px rgba(2, 132, 199, 0.35);
  cursor: grab;
  user-select: none;
  z-index: 3;
  transition: transform 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.gantt-mtg-dot:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 10px rgba(2, 132, 199, 0.45);
  z-index: 5;
}
.gantt-mtg-dot:active {
  cursor: grabbing;
}
.gantt-mtg-dot.is-completed {
  opacity: 0.65;
  background: #78909c !important;
  border-color: #cfd8dc !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.gantt-mtg-dot.is-tentative {
  border: 1.5px dashed #0284c7 !important;
  background: #e0f2fe !important;
  color: #0284c7 !important;
  box-shadow: 0 1px 4px rgba(2, 132, 199, 0.2);
}
.gantt-mtg-dot.is-tentative .gantt-mtg-dot-icon {
  color: #0284c7;
}
.gantt-mtg-dot-icon {
  font-size: 14px;
  line-height: 1;
}
.gantt-mtg-dot-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gantt-mtg-bar {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  border: 1px solid #bae6fd !important;
  border-radius: var(--m3-shape-corner-small) !important;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3) !important;
}

.mtg-track-add-btn {
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
  color: #0284c7;
  border-radius: var(--m3-shape-corner-full);
}

.list-mtg-card {
  background: linear-gradient(90deg, rgba(2, 132, 199, 0.04) 0%, transparent 100%);
}

.mtg-time-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #0284c7;
  background: rgba(2, 132, 199, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
}

.mtg-agenda-box {
  background: var(--md-sys-color-surface-container-low);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--md-sys-color-on-surface);
  white-space: pre-wrap;
}

/* MTG・タスク・ガントチャート＆リストでのアバターバッジ拡大 */
.task-assignee-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px;
  background-color: var(--md-sys-color-surface-container-high);
  border-radius: var(--m3-shape-corner-full);
  font-size: 12px;
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  white-space: nowrap;
}

.task-assignee-chip .member-avatar-img,
.task-assignee-chip .avatar-fallback,
.task-assignee-chip > span[style*="border-radius:50%"] {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  font-size: 13px !important;
  border: none !important;
}

/* 確認・対応者用チップ */
.task-checker-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px;
  background-color: #fff3e0;
  border-radius: var(--m3-shape-corner-full);
  font-size: 12px;
  font-weight: 500;
  color: #bf360c;
  box-shadow: 0 1px 3px rgba(230, 81, 0, 0.12);
  white-space: nowrap;
}

.task-checker-chip .member-avatar-img,
.task-checker-chip .avatar-fallback,
.task-checker-chip > span[style*="border-radius:50%"] {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  font-size: 13px !important;
  border: none !important;
}

/* カテゴリ追加ボックスUIの整理 */
.category-add-box {
  margin-top: 16px;
  padding: 14px;
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--m3-shape-corner-medium);
  border: 1px dashed var(--md-sys-color-outline-variant);
  box-sizing: border-box;
}

.category-add-box .form-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.category-add-box .m3-textfield,
.category-add-box .m3-selectfield {
  box-sizing: border-box;
}

/* 参加メンバー選択ドロップダウンUIの整理 */
.assignee-picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--m3-shape-corner-small);
  cursor: pointer;
  transition: background-color 0.15s ease;
  user-select: none;
}

.assignee-picker-item:hover {
  background-color: var(--md-sys-color-surface-container-high);
}

.assignee-picker-item.selected,
.assignee-picker-item.is-selected {
  background-color: var(--md-sys-color-primary-container) !important;
}

.assignee-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.assignee-item-left .member-avatar-img,
.assignee-item-left .avatar-fallback,
.assignee-item-left > span[style*="border-radius:50%"] {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  font-size: 14px !important;
}

.assignee-item-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.assignee-item-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.assignee-item-meta {
  font-size: 11px;
  color: var(--md-sys-color-outline);
}

.assignee-item-check {
  font-size: 20px;
  color: var(--md-sys-color-primary);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.assignee-picker-item.selected .assignee-item-check,
.assignee-picker-item.is-selected .assignee-item-check {
  opacity: 1;
}

/* ホバーカード内イベントリンクとハイライト効果 */
.hover-event-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  margin-top: 4px;
  background-color: var(--md-sys-color-surface-container-low);
  border-radius: var(--m3-shape-corner-small);
  border: 1px solid var(--md-sys-color-outline-variant);
  cursor: pointer;
  text-decoration: none;
  color: var(--md-sys-color-on-surface);
  font-size: 12px;
  transition: background-color 0.15s, border-color 0.15s, transform 0.1s;
}

.hover-event-link:hover {
  background-color: var(--md-sys-color-primary-container);
  border-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary-container);
  transform: translateX(2px);
}

.hover-event-link .event-title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.highlight-target {
  animation: targetHighlight 2.5s ease-out forwards;
}

@keyframes targetHighlight {
  0% {
    box-shadow: 0 0 0 4px #ffc107, 0 0 12px rgba(255, 193, 7, 0.8);
    outline: 2px solid #ffc107;
  }
  50% {
    box-shadow: 0 0 0 3px #ffb300, 0 0 8px rgba(255, 179, 0, 0.6);
    outline: 2px solid #ffb300;
  }
  100% {
    box-shadow: none;
    outline: none;
  }
}

/* ガントチャート行のユーザーアイコン（重なり表示 & ホバーツールチップ） */
.gantt-assignees-stack {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding: 4px 8px;
  overflow: visible;
}

.gantt-avatar-wrapper {
  position: relative;
  display: inline-flex;
  margin-left: -6px;
  border-radius: 50%;
  border: none;
  box-shadow: none;
  cursor: pointer;
  margin-top: -3px;
  vertical-align: middle;
  transition: transform 0.15s ease, z-index 0.15s ease;
  overflow: visible;
}

.gantt-avatar-wrapper:first-child {
  margin-left: 0;
}

.gantt-avatar-wrapper:hover {
  transform: translateY(-2px) scale(1.15);
  z-index: 20 !important;
}

.gantt-avatar-wrapper.is-checker {
  border: none;
  box-shadow: none;
}

.gantt-avatar-wrapper .checker-badge-mini {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background-color: #e65100;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fff;
}

/* ユーザーバッジ（シンプル版: アイコン＋名前＋アイコン色背景） */
.user-badge-simple {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px 2px 4px;
  border-radius: var(--m3-shape-corner-full);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--md-sys-color-on-surface);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* プロジェクト作成プリセットカード */
.preset-template-card {
  padding: 10px 12px;
  background: var(--md-sys-color-surface-container-low);
  border: 1.5px solid var(--md-sys-color-outline-variant);
  border-radius: var(--m3-shape-corner-medium);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.preset-template-card:hover {
  background: var(--md-sys-color-surface-container);
  border-color: var(--md-sys-color-primary);
}

.preset-template-card.active {
  background: var(--md-sys-color-primary-container);
  border-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary-container);
}

.preset-template-card .preset-title {
  font-weight: 700;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.preset-template-card .preset-desc {
  font-size: 10.5px;
  opacity: 0.8;
  line-height: 1.35;
}

/* プロジェクトメモ マークダウン表示領域 */
.project-memo-preview-box {
  min-height: 120px;
  padding: 10px 12px;
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--m3-shape-corner-small);
  font-size: 13px;
  line-height: 1.6;
  color: var(--md-sys-color-on-surface);
  overflow-y: auto;
}

.project-memo-preview-box.fullscreen-preview {
  flex: 1;
  min-height: 400px;
  padding: 16px 20px;
  border: none;
}

.project-memo-preview-box h1,
.project-memo-preview-box h2,
.project-memo-preview-box h3 {
  margin-top: 12px;
  margin-bottom: 6px;
  font-weight: 700;
  color: var(--md-sys-color-primary);
}

.project-memo-preview-box p {
  margin: 4px 0 8px 0;
}

.project-memo-preview-box ul,
.project-memo-preview-box ol {
  margin: 4px 0 8px 18px;
  padding: 0;
}

.project-memo-preview-box li {
  margin-bottom: 2px;
}

.project-memo-preview-box code {
  background: var(--md-sys-color-surface-container);
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 12px;
}

.project-memo-preview-box a {
  color: var(--md-sys-color-primary);
  text-decoration: underline;
}

.memo-tab-btn.active {
  background: var(--md-sys-color-surface) !important;
  color: var(--md-sys-color-primary) !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* プロジェクト一覧: 年切り替えバー */
.portfolio-year-switcher-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 8px;
}
.portfolio-year-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.portfolio-year-display {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 96px;
  justify-content: center;
  white-space: nowrap;
}

/* プロジェクト一覧: 月セル */
.timeline-month-cell {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--md-sys-color-on-surface-variant);
  border-right: 1px solid var(--md-sys-color-outline-variant);
  box-sizing: border-box;
  flex-shrink: 0;
}
.timeline-month-cell.today {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-primary);
}

/* プロジェクト一覧: 情報セル整理 (横幅を420pxに広げてカツカツ感を解消、ヘッダーと厳密に一致) */
.portfolio-card .gantt-sidebar-header,
.portfolio-info-cell {
  width: 420px !important;
  min-width: 420px !important;
  max-width: 420px !important;
  gap: 10px;
  overflow: hidden;
  box-sizing: border-box;
}

.portfolio-card .gantt-header-row,
.portfolio-row {
  width: 100% !important;
  min-width: 100% !important;
}

#portfolio-timeline-header {
  flex: 1 !important;
  display: flex !important;
  min-width: 0 !important;
  width: auto !important;
}

#portfolio-timeline-header .timeline-month-cell {
  flex: 1 !important;
  min-width: 0 !important;
  width: auto !important;
  text-align: center;
}

.portfolio-timeline-track {
  flex: 1 !important;
  min-width: 0 !important;
  width: auto !important;
  position: relative !important;
}

.pf-meta-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  overflow: hidden;
  margin-top: 3px;
  white-space: nowrap;
}
.pf-meta-row > span {
  flex-shrink: 0;
  font-size: 10.5px;
  line-height: 18px;
  padding: 0 6px;
  border-radius: 9px;
}
.pf-progress {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-primary);
  font-weight: 700;
}
.pf-period {
  color: var(--md-sys-color-outline);
  padding: 0 2px !important;
}
.pf-nearest {
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
  font-weight: 700;
}
.pf-nearest.is-soon { background: #fff3e0; color: #e65100; }
.pf-nearest.is-over { background: #ffdad6; color: #ba1a1a; }
.pf-meta-row > .pf-tag {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--md-sys-color-outline);
  border: 1px solid var(--md-sys-color-outline-variant);
}
.pf-right {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.pf-right .members-avatar-stack {
  max-width: 96px;
  overflow: hidden;
}
.pf-edit-btn {
  width: 28px;
  height: 28px;
}

/* 参加メンバー: 選択済みチップ・ピッカー項目 */
.assignee-selected-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 2px 2px;
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--m3-shape-corner-full);
  font-size: 12px;
}
.assignee-selected-chip .chip-name {
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.remove-chip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--md-sys-color-outline);
  cursor: pointer;
}
.remove-chip-btn:hover {
  background: rgba(186, 26, 26, 0.12);
  color: #ba1a1a;
}
.assignee-picker-item {
  justify-content: space-between;
}
.assignee-picker-item.selected {
  background-color: var(--md-sys-color-primary-container);
}
.assignee-item-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.assignee-item-info {
  min-width: 0;
}
.assignee-item-name {
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.assignee-item-meta {
  font-size: 10.5px;
  color: var(--md-sys-color-outline);
}
.assignee-item-check .check-icon {
  font-size: 20px;
  color: var(--md-sys-color-primary);
}
.picker-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 3px;
  user-select: none;
}
.picker-chip:hover {
  background: var(--md-sys-color-surface-container);
}

/* ユーザーメニューは右寄せ */
#user-dropdown-menu {
  right: 0;
  left: auto;
  min-width: 200px;
}

/* ヘッダーの折り返し防止 */
.m3-top-app-bar,
.m3-top-app-bar * {
  white-space: nowrap;
}
.m3-top-app-bar {
  flex-wrap: nowrap;
  overflow: visible;
}
.bar-left {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.bar-right {
  flex-shrink: 0;
}
.nav-tab-btn,
#current-user-name {
  overflow: hidden;
  text-overflow: ellipsis;
}
#current-user-name {
  max-width: 120px;
}

@media (max-width: 1024px) {
  #current-user-name,
  .header-events-btn span:nth-child(2) {
    display: none;
  }
}

@media (max-width: 768px) {
  /* スマホではプロジェクト一覧のガントチャートを省略しカード形式で表示 */
  #page-projects .gantt-header-row,
  #page-projects .gantt-timeline-header,
  #page-projects .portfolio-row .task-timeline-track,
  #page-projects .portfolio-year-switcher-bar {
    display: none !important;
  }
  #page-projects .gantt-sidebar-header,
  #page-projects .portfolio-info-cell {
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px 12px;
  }
  #page-projects .portfolio-row {
    width: 100%;
    margin-bottom: 8px;
    border-radius: var(--m3-shape-corner-medium);
    border: 1px solid var(--md-sys-color-outline-variant);
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  }
  #page-projects .portfolio-body {
    padding: 8px;
  }
  #page-projects .project-name-text {
    max-width: none;
    font-size: 14px;
  }

  /* モバイルではテキストを省略しアイコン中心に */
  .view-subtitle,
  .pf-period,
  .add-assignee-popup-trigger-btn span:not(.material-symbols-outlined),
  .project-primary-right .m3-button span:not(.material-symbols-outlined):not(.header-badge),
  .add-track-btn span:not(.material-symbols-outlined),
  .view-header .m3-button.filled {
    font-size: 0;
  }
  .m3-button.tonal {
    gap: 0px;
  }
  .view-subtitle,
  .pf-period {
    display: none;
  }
  .view-header .m3-button.filled .material-symbols-outlined {
    font-size: 22px;
  }
  .view-title {
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* プロジェクト完了ステータス トグル (詳細画面用) */
.project-status-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--m3-shape-corner-full);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--md-sys-color-outline-variant);
  background-color: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-primary);
  transition: all 0.15s ease;
  user-select: none;
}
.project-status-toggle-btn:hover {
  background-color: var(--md-sys-color-surface-container-high);
}
.project-status-toggle-btn.is-completed {
  background-color: #e6f4ea;
  border-color: #a8dab5;
  color: #137333;
}
.project-status-toggle-btn.is-completed:hover {
  background-color: #ceead6;
}

/* プロジェクト一覧: 完了ステータストグル (行内) */
.pf-completed-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--md-sys-color-outline-variant);
  background: transparent;
  color: transparent;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
  padding: 0;
  margin-right: 6px;
}
.pf-completed-toggle-btn:hover {
  border-color: var(--md-sys-color-primary);
  background-color: rgba(59, 91, 169, 0.08);
}
.pf-completed-toggle-btn.is-completed {
  background-color: #137333;
  border-color: #137333;
  color: #ffffff;
}

/* プロジェクト一覧: ステータスフィルターチップ群 */
.pf-status-filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  overflow-x: auto;
  white-space: nowrap;
}
.pf-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: var(--m3-shape-corner-full);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--md-sys-color-outline-variant);
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface-variant);
  transition: all 0.15s ease;
  user-select: none;
}
.pf-status-chip:hover {
  background-color: var(--md-sys-color-surface-container-high);
}
.pf-status-chip.active {
  background-color: var(--md-sys-color-primary-container);
  border-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary-container);
}

/* ========================================================
   モバイル・レスポンシブ時の表示モード (ガント/リスト/資料メモ)
   ======================================================== */
@media (max-width: 768px) {
  /* 資料メモモード選択時: メインカラムを隠しサイドバーを全幅表示 */
  .project-detail-layout[data-display-mode="memo"] .project-main-column {
    display: none !important;
  }
  .project-detail-layout[data-display-mode="memo"] .project-sidebar-column {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }
  /* ガントまたはリスト選択時: サイドバーを隠しメインカラムを全幅表示 */
  .project-detail-layout:not([data-display-mode="memo"]) .project-sidebar-column {
    display: none !important;
  }
  .project-detail-layout:not([data-display-mode="memo"]) .project-main-column {
    display: flex !important;
    width: 100% !important;
  }
}

/* ========================================================
   リスト表示の1タスク1行収容設定
   ======================================================== */
.list-task-main {
  flex-wrap: nowrap;
  align-items: center;
}
.list-task-left {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}
.list-task-right {
  flex-shrink: 0;
  margin-left: auto;
  flex-wrap: nowrap;
}

/* 狭い幅でのラベルテキスト省略・アイコン最大化 */
@media (max-width: 640px) {
  .task-category-chip .cat-chip-label {
    display: none;
  }
  .task-assignee-chip .chip-name,
  .task-checker-chip .chip-name {
    display: none;
  }
  .list-toolbar-bar {
    gap: 8px;
  }
  .list-toolbar-bar button span:not(.material-symbols-outlined) {
    display: none;
  }
}

/* ========================================================
   アイコンボタン等の枠線削除＆アイコン最大化
   ======================================================== */
.m3-icon-button {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.m3-icon-button .material-symbols-outlined {
  font-size: 22px !important;
  line-height: 1;
}
.small-icon-btn .material-symbols-outlined {
  font-size: 18px !important;
}

/* ========================================================
   仮指定 (この付近で行う予定) スタイル
   ======================================================== */
/* ガントチャートの仮指定サブタスクバー */
.gantt-subtask-bar.is-tentative {
  border: 1.5px dashed #d97706 !important;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 6px,
    rgba(217, 119, 6, 0.18) 6px,
    rgba(217, 119, 6, 0.18) 12px
  ) !important;
  box-shadow: 0 1px 3px rgba(217, 119, 6, 0.15) !important;
}

/* ガントチャートの仮指定MTGバー */
.gantt-mtg-bar.is-tentative,
.timeline-marker.mtg.is-tentative {
  border: 1.5px dashed #0284c7 !important;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 6px,
    rgba(2, 132, 199, 0.22) 6px,
    rgba(2, 132, 199, 0.22) 12px
  ) !important;
}

/* 仮指定バッジ (リスト・スケジュール共通) */
.tentative-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--m3-shape-corner-full);
  background-color: #fef3c7;
  color: #b45309;
  border: 1px dashed #f59e0b;
  white-space: nowrap;
}

/* スケジュール絞り込みチップ */
.schedule-filter-chip {
  height: 26px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 13px;
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  transition: all 0.15s;
}
.schedule-filter-chip:hover {
  background: var(--md-sys-color-surface-container);
}
.schedule-filter-chip.active {
  background: var(--md-sys-color-primary);
  color: #ffffff;
  border-color: var(--md-sys-color-primary);
}

/* 参加・担当プロジェクトとその他の視覚的区別 */
.portfolio-row.is-my-project {
  border-left: 3.5px solid var(--md-sys-color-primary) !important;
  background-color: #ffffff;
}
.portfolio-row.is-other-project {
  border-left: 3.5px solid var(--md-sys-color-outline-variant) !important;
  background-color: #fafafc;
  opacity: 0.9;
}
.portfolio-row.is-other-project:hover {
  opacity: 1;
  background-color: #ffffff;
}