:root {
  --bg: #f3f5f8;
  --surface: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --muted-2: #9ca3af;
  --line-soft: #eceff3;
  --shadow: 0 10px 30px rgba(16, 24, 40, 0.08);
  --shadow-soft: 0 4px 20px rgba(16, 24, 40, 0.06);
  --radius-lg: 20px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --danger: #b42318;
  --warning: #b54708;
  --ok: #047857;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
  background: var(--bg);
  color: var(--text);
}

.app-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 260px 1fr;
}

.app-layout.auth-mode {
  grid-template-columns: 1fr;
}

.app-layout.auth-mode .sidebar {
  display: none;
}

.app-layout.sidebar-collapsed {
  grid-template-columns: 72px minmax(0, 1fr);
}

.sidebar-toolbar {
  flex-shrink: 0;
}

/* ナビ下・ユーザー名の上にまとめたフッタ（開閉ボタンはここに固定） */
.sidebar-foot {
  flex-shrink: 0;
  margin-top: auto;
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.brand-title-mini {
  display: none;
}

.sidebar-collapse-toggle {
  width: 100%;
  height: 32px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.sidebar-collapse-toggle:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.22);
}

.sidebar-collapse-toggle:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

.sidebar-collapse-icon::before {
  content: "\00AB";
  font-size: 18px;
  line-height: 1;
  opacity: 0.95;
}

.app-layout.sidebar-collapsed .sidebar-collapse-icon::before {
  content: "\00BB";
}

.app-layout.sidebar-collapsed .sidebar {
  padding: 16px 6px 12px;
  align-items: center;
}

.app-layout.sidebar-collapsed .sidebar-foot {
  align-items: center;
  padding-top: 10px;
}

.app-layout.sidebar-collapsed .sidebar-collapse-toggle {
  max-width: 44px;
}

.app-layout.sidebar-collapsed .brand {
  align-items: center;
  text-align: center;
  width: 100%;
}

.app-layout.sidebar-collapsed .brand h1 {
  font-size: 14px;
  line-height: 1.15;
}

.app-layout.sidebar-collapsed .brand-title-full {
  display: none;
}

.app-layout.sidebar-collapsed .brand-title-mini {
  display: inline;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.app-layout.sidebar-collapsed .ai-mode-badge__text {
  display: none;
}

.app-layout.sidebar-collapsed .ai-mode-badge {
  margin-top: 4px;
}

.app-layout.sidebar-collapsed .nav-link {
  justify-content: center;
  padding: 8px 6px;
  box-shadow: none;
  position: relative;
}

.app-layout.sidebar-collapsed .nav-link.active {
  background: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 0 2px rgba(56, 189, 248, 0.55);
}

.app-layout.sidebar-collapsed .nav-link-sub {
  padding: 8px 6px;
}

.app-layout.sidebar-collapsed .nav-link-icon {
  width: 22px;
  height: 22px;
}

.app-layout.sidebar-collapsed .nav-link-icon svg {
  width: 19px;
  height: 19px;
}

.app-layout.sidebar-collapsed .nav-link-label {
  display: none;
}

.app-layout.sidebar-collapsed .nav-link-main {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 2px 2px 0 0;
  pointer-events: none;
}

.app-layout.sidebar-collapsed .nav-badge {
  min-width: 15px;
  height: 15px;
  font-size: 9px;
  font-weight: 800;
  padding: 0 4px;
}

.app-layout.sidebar-collapsed .nav-section-toggle-label {
  display: none;
}

.app-layout.sidebar-collapsed .nav-section-toggle {
  justify-content: center;
  padding: 6px 4px;
  border: none;
  background: transparent;
  margin-top: 6px;
}

.app-layout.sidebar-collapsed .sidebar-user-trigger {
  justify-content: center;
  gap: 0;
  padding: 10px 4px;
}

.app-layout.sidebar-collapsed .sidebar-user-name,
.app-layout.sidebar-collapsed .sidebar-user-more {
  display: none;
}

.auth-shell {
  min-height: calc(100vh - 28px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.auth-brand {
  text-align: center;
}

.auth-brand h1 {
  margin: 0;
  color: #111827;
  font-size: 28px;
  font-family: "Arial", "Helvetica Neue", "Segoe UI", sans-serif;
  letter-spacing: 0.015em;
  font-weight: 700;
  line-height: 1.2;
}

.auth-brand p {
  margin: 6px 0 0;
  color: #2563eb;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.auth-brand .ai-mode-badge {
  margin: 10px auto 0;
  transform: scale(0.95);
  transform-origin: center;
}

.auth-card {
  width: min(92vw, 420px);
  background: #eef2f8;
  border: 1px solid #d7e0ec;
  border-radius: 16px;
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-card h2 {
  margin: 0;
  text-align: center;
  font-size: 18px;
  color: #0f172a;
  font-weight: 700;
}

.auth-card p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}

.auth-icon {
  text-align: center;
  font-size: 26px;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auth-field span {
  color: #334155;
  font-size: 13px;
  font-weight: 600;
}

.auth-field input {
  border: 1px solid #d5dce7;
  border-radius: 12px;
  height: 44px;
  padding: 0 12px;
  font-size: 14px;
  color: #334155;
  background: #fff;
}

.auth-submit {
  border: 0;
  border-radius: 12px;
  height: 44px;
  background: #111827;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.auth-submit:hover {
  background: #1f2937;
}

.auth-link {
  border: 0;
  background: transparent;
  color: #2563eb;
  font-size: 13px;
  cursor: pointer;
  text-align: center;
}

.auth-link.muted {
  color: #64748b;
}

.auth-hint {
  margin-top: 2px;
  color: #64748b;
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 0;
  background: #0b0b0c;
  border-right: none;
  padding: 28px 14px 18px;
  display: flex;
  flex-direction: column;
  box-shadow: none;
}

.brand {
  margin-bottom: 26px;
  padding: 0 8px;
}

.brand-caption {
  margin: 0 0 8px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.46);
  letter-spacing: 0.1em;
}

.brand h1 {
  margin: 0;
  font-size: 23px;
  color: #f8fafc;
  letter-spacing: -0.02em;
}

/* ＋AI mode バッジ（サイドバー FlowPilot 直下） */
.ai-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 8px;
  border-radius: 999px;
  border: 1px solid #c4b5fd;
  background: transparent;
  margin-top: 6px;
  width: fit-content;
}

.ai-mode-badge__icon {
  font-size: 12px;
  color: rgb(167, 139, 250);
  line-height: 1;
  display: inline-block;
  transform-origin: center center;
  animation: ai-mode-icon-rotate 6s ease-in-out infinite;
}

.ai-mode-badge__text {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.07em;
  line-height: 1;
  background: linear-gradient(
    90deg,
    rgb(167, 139, 250) 0%,
    rgb(96, 165, 250) 40%,
    rgb(167, 139, 250) 80%,
    rgb(96, 165, 250) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: ai-mode-shimmer 5s linear infinite;
}

@keyframes ai-mode-shimmer {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

@keyframes ai-mode-icon-rotate {
  0% {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
  25% {
    transform: rotate(90deg) scale(1.2);
    opacity: 0.8;
  }
  50% {
    transform: rotate(180deg) scale(1);
    opacity: 1;
  }
  75% {
    transform: rotate(270deg) scale(1.2);
    opacity: 0.8;
  }
  100% {
    transform: rotate(360deg) scale(1);
    opacity: 1;
  }
}

.brand-sub {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.62);
}

.nav-group {
  display: grid;
  gap: 3px;
  padding-bottom: 6px;
}

.sidebar-nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
  padding-right: 2px;
  margin-right: -2px;
}

.sidebar-nav::-webkit-scrollbar {
  width: 6px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.22);
}

.nav-divider {
  height: 1px;
  margin: 8px 10px;
  background: rgba(255, 255, 255, 0.07);
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.93);
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 580;
  line-height: 1.28;
  letter-spacing: 0.01em;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.nav-link-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.nav-link-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-badge {
  flex-shrink: 0;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  line-height: 1;
  letter-spacing: 0.02em;
  /* ダッシュボード .db-badge.info と同一トーン */
  color: #1a5fa8;
  background: #e0ecff;
  box-shadow: 0 0 0 1px rgba(26, 95, 168, 0.22);
}

.nav-link.active .nav-badge {
  background: #cfe8ff;
  color: #154a8c;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.45);
}

.nav-link-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.68);
  flex-shrink: 0;
}

.nav-link-icon svg {
  width: 16px;
  height: 16px;
}

.nav-link.active .nav-link-icon {
  color: rgba(255, 255, 255, 0.9);
}

.nav-sub .nav-link {
  color: rgba(255, 255, 255, 0.82);
  font-weight: 540;
}

.nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.nav-link:hover .nav-link-icon {
  color: rgba(255, 255, 255, 0.82);
}

.nav-link.active {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  box-shadow: inset 3px 0 0 #38bdf8;
}

.nav-label {
  color: rgba(255, 255, 255, 0.46);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0 12px;
}

.sidebar-user {
  margin-top: 0;
  border-top: none;
  padding: 0 8px 0;
  position: relative;
}

.sidebar-user-trigger {
  width: 100%;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  cursor: pointer;
}

.sidebar-user-trigger:hover {
  background: rgba(255, 255, 255, 0.08);
}

.sidebar-user-avatar {
  width: 18px;
  text-align: center;
  font-size: 14px;
  line-height: 1;
}

.sidebar-user-avatar-img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.sidebar-user-name {
  flex: 1;
  color: #f8fafc;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}

.sidebar-user-more {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
}

.sidebar-user-menu {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 52px;
  background: #151517;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 6px;
  display: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}

.sidebar-user.open .sidebar-user-menu {
  display: grid;
  gap: 4px;
}

.sidebar-user-actions {
  display: grid;
  gap: 6px;
}

.sidebar-user-btn {
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 580;
  text-decoration: none;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.sidebar-user-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}

.sidebar-user-btn-icon {
  width: 16px;
  text-align: center;
}

.my-account-avatar-block {
  display: flex;
  align-items: center;
  gap: 14px;
}

.my-account-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 1px solid var(--line-soft);
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.my-account-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.my-account-avatar-fallback {
  font-size: 40px;
}

.my-account-name-field input[disabled] {
  background: #e5e7eb;
  color: #6b7280;
  cursor: not-allowed;
}

.my-account-name-note {
  display: flex;
  align-items: end;
  padding-bottom: 10px;
  color: #6b7280;
  font-size: 12px;
  white-space: nowrap;
}

.my-account-field-hint {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: #6b7280;
}

.my-account-form .my-account-row + .my-account-row {
  margin-top: 16px;
}

.my-account-gap-row {
  height: 14px;
}

.my-account-profile-row {
  margin-top: 0 !important;
}

.my-account-image-btn {
  border: 1px solid #2b6ea3;
  background: #2f6fa5;
  color: #ffffff !important;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.my-account-image-btn span {
  color: #ffffff !important;
}

.my-account-image-btn:hover {
  background: #255c88;
}


.main-shell {
  padding: 14px;
  /* grid 1fr 列が子要素の min-content で押し広がり、ウィンドウ横スクロールになるのを防ぐ */
  min-width: 0;
}

.main-surface {
  min-height: calc(100vh - 28px);
  background: var(--surface);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(16, 24, 40, 0.08);
  padding: 38px 42px 44px;
}

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 22px;
}

.page-head h2 {
  margin: 0;
  font-size: 30px;
  letter-spacing: -0.02em;
}

.page-head p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.detail-page-h2-with-edit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  min-width: 0;
}

.detail-page-h2-with-edit .detail-head-title-edit-row {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.detail-head-title-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.detail-head-title-edit-row {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}

.detail-head-title-edit-row .detail-head-title-edit-wrap {
  flex: 1 1 auto;
  min-width: 0;
  max-width: min(100%, 112rem);
}

.detail-head-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(100%, 52vw);
}

.detail-head-title-edit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  background: #f8fafc;
  color: #475467;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.detail-head-title-edit:hover {
  background: #eef2f6;
  color: #1a5fa8;
}

.detail-head-title-edit-wrap {
  display: inline-flex;
  min-width: 0;
  flex: 1 1 52rem;
  max-width: 100%;
}

.detail-head-title-input {
  box-sizing: border-box;
  width: 100%;
  min-width: min(100%, 44em);
  max-width: min(100%, 112rem);
  font: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
}

.detail-head-title-btn {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border, #e5e7eb);
  background: #fff;
  color: #334155;
}

.detail-head-title-btn--save {
  background: var(--accent, #1a5fa8);
  border-color: var(--accent, #1a5fa8);
  color: #fff;
}

.detail-head-title-btn--cancel {
  background: #f8fafc;
}

.head-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chip,
.chip-btn {
  border: 0;
  background: #f5f7fb;
  color: #334155;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 560;
}

.chip-btn {
  cursor: pointer;
}

.chip-btn:hover {
  background: #edf2f8;
}

.chip-btn.active {
  background: #111827;
  color: #ffffff;
}

.section {
  margin-top: 30px;
}

.section-title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 640;
}

.card-grid {
  display: grid;
  gap: 14px;
}

.card-grid.cols-4 {
  grid-template-columns: repeat(4, minmax(140px, 1fr));
}

.card-grid.cols-3 {
  grid-template-columns: repeat(3, minmax(180px, 1fr));
}

.card-grid.cols-5 {
  grid-template-columns: repeat(5, minmax(120px, 1fr));
}

/* ダッシュボード: クイックアクション（5枚時と同じくセクション全幅）。3枚時はアイコンを大きくしてバランス調整 */
.card-grid.db-quick-actions .shortcut-card {
  gap: 14px;
  padding: 28px 18px 32px;
}

.card-grid.db-quick-actions .shortcut-icon {
  width: 72px;
  height: 72px;
  border-radius: 20px;
}

.card-grid.db-quick-actions .shortcut-icon svg {
  width: 34px;
  height: 34px;
}

.card-grid.db-quick-actions .shortcut-label {
  font-size: 16px;
}

.card-grid.db-quick-actions .shortcut-sub {
  font-size: 13px;
  max-width: 220px;
}

@media (max-width: 640px) {
  .card-grid.db-quick-actions {
    grid-template-columns: 1fr;
  }
}

.action-card,
.summary-card,
.soft-card {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.action-card {
  text-decoration: none;
  color: inherit;
  padding: 16px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.action-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.kicker {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 8px;
}

.headline {
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin-bottom: 8px;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 12px;
  color: var(--muted);
}

.summary-card {
  padding: 14px 16px;
}

.summary-action {
  border: 0;
  text-align: left;
  cursor: pointer;
}

.summary-card .label {
  color: var(--muted);
  font-size: 12px;
}

.summary-card .value {
  margin-top: 6px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.value.warning {
  color: var(--warning);
}

.value.danger {
  color: var(--danger);
}

.list-card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 6px;
}

.row-item {
  border-radius: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px 14px;
  padding: 14px 12px;
  transition: background-color 0.15s ease, transform 0.15s ease;
  cursor: pointer;
}

.row-item:hover {
  background: #f7f9fc;
  transform: translateY(-1px);
}

.row-item + .row-item {
  margin-top: 4px;
}

.row-main {
  cursor: default;
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  max-width: none;
  cursor: default;
}

.inline-btn {
  border: 0;
  background: #111827;
  color: #ffffff;
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 580;
  cursor: pointer;
  width: auto;
  min-width: 110px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row-edit-link {
  margin-top: 6px;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.inline-btn.ghost {
  background: #eef2f7;
  color: #334155;
}

.row-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.title {
  font-weight: 640;
  font-size: 14px;
}

.status-badge {
  border-radius: 999px;
  background: #f3f5f8;
  color: #475467;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 11px;
}

.status-badge.attention {
  background: #fff4ed;
  color: #c4320a;
}

.status-badge.safe {
  background: #ecfdf3;
  color: var(--ok);
}

.row-action {
  margin-top: 5px;
  font-size: 15px;
  font-weight: 600;
  color: #667085;
  letter-spacing: -0.01em;
}

.row-flow-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.flow-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #f4f6fa;
  color: #475467;
  font-size: 11px;
  font-weight: 640;
  padding: 4px 9px;
}

.flow-badge.safe {
  background: #ecfdf3;
  color: #047857;
}

.flow-badge.attention {
  background: #fff4ed;
  color: #c4320a;
}

.row-end {
  color: #4f46e5;
  font-size: 12px;
  font-weight: 620;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.search {
  border: 0;
  background: #f5f7fb;
  border-radius: 11px;
  height: 38px;
  min-width: 240px;
  padding: 0 12px;
  color: #111827;
}

.select {
  border: 0;
  background: #f5f7fb;
  color: #334155;
  border-radius: 11px;
  height: 38px;
  padding: 0 10px;
}

.project-filter-bar {
  align-items: center;
  gap: 10px;
}

.project-search-input {
  flex: 1.5;
  min-width: 360px;
  padding-left: 36px;
  background-image: url("./icons/search.svg");
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 16px;
}

.project-filter-select {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 500;
  color: #94a3b8;
  min-width: 120px;
}

.result-count {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 6px;
}

.stale-priority-mode .status-badge.attention {
  font-weight: 700;
  border: 1px solid #fca5a5;
}

.split-layout {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 14px;
}

.detail-steps {
  display: grid;
  grid-template-columns: repeat(7, minmax(70px, 1fr));
  gap: 8px;
}

.step {
  border-radius: 10px;
  padding: 9px 8px;
  text-align: center;
  font-size: 12px;
  color: #6b7280;
  background: #f5f7fb;
}

.step.done {
  background: #ecfdf3;
  color: #047857;
}

.step.current {
  background: #ede9fe;
  color: #5b21b6;
  font-weight: 700;
}

.hero {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 20px;
  margin-top: 14px;
}

.hero h3 {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.hero p {
  margin: 9px 0 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.hero button {
  margin-top: 12px;
  border: 0;
  background: #111827;
  color: #fff;
  border-radius: 11px;
  padding: 9px 14px;
  font-size: 13px;
  cursor: pointer;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.hero-actions .subtle {
  background: #eef2f7;
  color: #334155;
}

.mini-title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 640;
}

.mini-title .acct-list-count {
  margin-left: 6px;
  font-size: 0.92em;
  font-weight: 500;
  color: #64748b;
}

.acct-list-head-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  min-width: 0;
}

.acct-list-head-main .mini-title {
  margin: 0;
}

.acct-list-exclude-retired {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: #475467;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.acct-list-exclude-retired input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  margin: 0;
  accent-color: #1a1a2e;
  cursor: pointer;
  flex-shrink: 0;
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 2px;
  border-bottom: 1px solid var(--line-soft);
  color: #475467;
  font-size: 13px;
}

.panel-pad {
  padding: 16px;
}

.task-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--line-soft);
  padding: 11px 0;
  font-size: 13px;
  color: #4b5563;
}

.task-row div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.task-status {
  font-size: 11px;
  color: var(--muted-2);
  margin-left: 4px;
  font-weight: 400;
}

/* ────────────────────────────────────────
   今日やること: アクションカード 追加スタイル
   ──────────────────────────────────────── */

/* kicker とアクションタイプバッジを横並びにする行 */
.action-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

/* action-card-top 内の kicker はデフォルトのmargin-bottomを無効化 */
.action-card-top .kicker {
  margin-bottom: 0;
}

/* アクションタイプバッジ: "1クリックで完了" / "書類作成" */
.action-type-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
}

.action-type-quick {
  background: #ecfdf5;
  color: #047857;
}

.action-type-compose {
  background: #eff6ff;
  color: #1d4ed8;
}

/* ステージ名と現在ステータスをまとめて表示する行 */
.action-card-context {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
  margin-bottom: 2px;
}

.mini-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

/* 今日やること: 件数バッジ */
.section-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: #111827;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
  margin-left: 8px;
  vertical-align: middle;
  letter-spacing: 0;
}

/* 今日やること: スクロールラッパー
   カード3列×1行が収まる高さを基準にし、
   それを超えたら縦スクロールで全件見られる */
.today-scroll-wrap {
  max-height: 260px;
  overflow-y: auto;
  padding-right: 4px;
  /* スクロールバーを細く・控えめに */
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
}
.today-scroll-wrap::-webkit-scrollbar {
  width: 5px;
}
.today-scroll-wrap::-webkit-scrollbar-track {
  background: transparent;
}
.today-scroll-wrap::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}
.today-scroll-wrap::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* 今日やること: 完了メッセージ */
.today-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  text-align: center;
}

.today-done-icon {
  width: 48px;
  height: 48px;
  background: #ecfdf5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ok);
  margin-bottom: 14px;
  flex-shrink: 0;
}

.today-done-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px;
  line-height: 1.4;
}

.today-done-sub {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

.composer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11, 16, 25, 0.45);
  z-index: 20;
}

.composer-panel {
  position: fixed;
  right: 12px;
  top: 12px;
  bottom: 12px;
  width: min(760px, calc(100vw - 24px));
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(2, 6, 23, 0.26);
  z-index: 21;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.composer-head {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.composer-head h3 {
  margin: 0;
  font-size: 18px;
}

.composer-head p {
  margin: 5px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.composer-body {
  overflow: auto;
  padding: 16px 20px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 10px;
}

.form-grid label:not(.cl-inline-check),
.composer-body label:not(.cl-inline-check) {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: #475467;
}

input,
textarea {
  border: 0;
  background: #f4f7fb;
  border-radius: 10px;
  min-height: 38px;
  padding: 8px 10px;
  font: inherit;
  color: #111827;
}

select {
  border: 0;
  background: #f4f7fb;
  border-radius: 10px;
  min-height: 38px;
  padding: 8px 10px;
  font: inherit;
  color: #111827;
}

textarea {
  min-height: 84px;
  resize: vertical;
}

.doc-meta {
  margin: 14px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: #667085;
  font-size: 12px;
}

.line-item {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 2fr 80px 130px 130px auto;
  gap: 8px;
  align-items: center;
}

.line-total {
  font-size: 12px;
  color: #111827;
  font-weight: 620;
  text-align: right;
  padding-right: 6px;
}

.totals {
  margin-top: 12px;
  margin-left: auto;
  width: min(320px, 100%);
  display: grid;
  gap: 8px;
}

.totals div {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #475467;
}

.totals strong {
  color: #111827;
}

.composer-foot {
  border-top: 1px solid var(--line-soft);
  padding: 14px 20px;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.client-create-foot-actions {
  justify-content: flex-end;
  gap: 10px;
}

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 5000;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: min(440px, calc(100vw - 48px));
  background: #111827;
  color: #fff;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.45;
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.22);
}

.toast--info {
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.toast--error {
  background: #450a0a;
  color: #fef2f2;
  border: 1px solid rgba(248, 113, 113, 0.45);
  box-shadow: 0 12px 28px rgba(69, 10, 10, 0.35);
}

.toast-body {
  flex: 1;
  min-width: 0;
  max-height: min(42vh, 320px);
  overflow-y: auto;
  white-space: normal;
  word-break: break-word;
}

.toast-dismiss {
  flex-shrink: 0;
  margin: -4px -4px 0 0;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toast-dismiss:hover {
  background: rgba(255, 255, 255, 0.22);
}

.toast--error .toast-dismiss {
  background: rgba(254, 242, 242, 0.15);
}

.toast--error .toast-dismiss:hover {
  background: rgba(254, 242, 242, 0.28);
}

.empty-note {
  padding: 16px 12px;
  color: var(--muted);
  font-size: 13px;
}

.project-create-panel {
  width: min(680px, calc(100vw - 24px));
}

/* 新規案件: 最上位の中央モーダル（他オーバーレイ・ドロワー・契約モーダルより上に描画） */
.composer-backdrop.project-create-backdrop {
  z-index: 2000;
}

.composer-panel.project-create-modal {
  right: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  bottom: auto;
  width: min(800px, calc(100vw - 32px));
  max-height: min(90vh, 900px);
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  z-index: 2001;
}

.composer-panel.project-create-modal .composer-body {
  min-height: 0;
}

/* 案件作成から「新しいクライアントを登録」: 右パネルではなく中央（案件モーダルより手前） */
.composer-backdrop.client-create-backdrop {
  z-index: 2010;
}

.composer-panel.client-create-modal {
  right: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  bottom: auto;
  width: min(820px, calc(100vw - 32px));
  max-height: min(90vh, 900px);
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  z-index: 2011;
}

/* 案件作成の契約未締結警告: 常に最前面 */
.composer-backdrop.project-create-warning-backdrop {
  z-index: 2020;
}

.composer-panel.project-create-warning-modal {
  z-index: 2021;
}

.composer-panel.client-create-modal .composer-body {
  min-height: 0;
}

.project-create-step h3 {
  margin: 0;
  font-size: 18px;
}

.project-create-step p {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.project-create-step1-lead {
  margin: 8px 0 0;
  line-height: 1.5;
}

.project-create-lane {
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  padding: 12px 14px;
  margin-top: 12px;
  background: #fafbfc;
}

.project-create-lane--search {
  border-color: #c7d2fe;
  background: linear-gradient(180deg, #f8faff 0%, #f1f4fd 100%);
  box-shadow: 0 1px 0 rgba(79, 70, 229, 0.06);
}

.project-create-lane--new {
  border-color: #a7f3d0;
  background: linear-gradient(180deg, #f6fff9 0%, #ecfcf4 100%);
  box-shadow: 0 1px 0 rgba(4, 120, 87, 0.08);
}

.project-create-lane-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.project-create-lane-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: #4f46e5;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}

.project-create-lane-eyebrow--new {
  background: #059669;
}

.project-create-lane-eyebrow--teal {
  background: #0e7490;
}

/* 原価登録ウィザード: プラットフォーム（CSV）レーン */
.project-create-lane--cost-meta {
  border-color: rgba(14, 116, 144, 0.32);
  background: linear-gradient(180deg, #f8fdff 0%, #f0f9fc 100%);
  box-shadow: 0 1px 0 rgba(14, 116, 144, 0.07);
}

.project-create-lane-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

.project-create-lane-desc {
  margin: 2px 0 0;
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
}

.project-create-search-wrap {
  margin-top: 0;
}

.project-create-search-input {
  width: 100%;
}

.project-create-candidate-list {
  max-height: 200px;
  overflow-y: auto;
  margin-top: 0;
  padding-top: 8px;
  border-top: 1px dashed #c7d2fe;
}

.project-create-candidate-hint {
  margin: 0;
  padding: 10px 4px 4px;
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
}

.project-create-new-client-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  border: 1px dashed #059669;
  border-radius: 10px;
  padding: 12px 14px;
  background: #fff;
  cursor: pointer;
  color: #064e3b;
  font: inherit;
  transition: background 0.15s, box-shadow 0.15s;
}

.project-create-new-client-btn:hover {
  background: #f0fdf4;
  box-shadow: 0 0 0 1px #34d399;
}

.project-create-new-client-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #d1fae5;
  font-size: 20px;
  font-weight: 800;
  color: #047857;
  flex-shrink: 0;
}

.project-create-new-client-btn-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
}

.project-create-new-client-btn-sub {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: #64748b;
  font-weight: 400;
}

.project-create-selected {
  margin-top: 12px;
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 10px;
  padding: 10px 12px;
}

.project-create-selected-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin-bottom: 4px;
}

.project-create-selected-name {
  font-weight: 700;
  font-size: 15px;
  color: #0f172a;
  margin-bottom: 6px;
}

.project-create-step2-sub {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.project-create-step2-block {
  margin-top: 12px;
}

.project-create-step2 .client-form-section:first-of-type,
.project-create-step2-block:first-of-type {
  margin-top: 0;
}

.project-create-form-block-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
}

.section-card {
  margin-bottom: 12px;
}

.section-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.template-list {
  display: grid;
  gap: 10px;
}

.template-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  background: #f7f9fc;
  border-radius: 12px;
  padding: 12px;
}

.template-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.template-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.create-mode-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.client-picker {
  grid-column: 1 / -1;
  margin-top: 4px;
}

.client-picker-list {
  margin-top: 8px;
  display: grid;
  gap: 6px;
}

.picker-option {
  border: 0;
  text-align: left;
  background: #f4f7fb;
  border-radius: 10px;
  padding: 9px 10px;
  cursor: pointer;
  display: grid;
  gap: 3px;
  color: #1f2937;
  font-size: 13px;
}

.picker-option small {
  color: #6b7280;
  font-size: 11px;
}

.picker-option.active,
.picker-option.focus {
  box-shadow: inset 0 0 0 1px #4f46e5;
  background: #eef2ff;
}

.picker-option.add {
  color: #374151;
  font-weight: 600;
}

.mode-card {
  border: 0;
  text-align: left;
  background: #f4f7fb;
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  display: grid;
  gap: 6px;
}

.mode-card strong {
  font-size: 14px;
  color: #111827;
}

.mode-card span {
  font-size: 12px;
  color: #667085;
}

.mode-card.active {
  background: #e9efff;
  box-shadow: inset 0 0 0 1px #bfccff;
}

@media (max-width: 1200px) {
  .card-grid.cols-4 {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }
  .card-grid.cols-5 {
    grid-template-columns: repeat(3, minmax(140px, 1fr));
  }
}

@media (max-width: 920px) {
  .app-layout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    height: auto;
    position: static;
  }

  .main-shell {
    padding: 10px;
  }

  .main-surface {
    border-radius: 18px;
    padding: 24px;
  }

  .split-layout {
    grid-template-columns: 1fr;
  }

  .db-rankings-grid {
    grid-template-columns: 1fr;
  }

  .detail-steps {
    grid-template-columns: repeat(4, minmax(70px, 1fr));
  }

  .row-item {
    grid-template-columns: 1fr;
  }

  .row-actions {
    max-width: none;
    justify-content: flex-start;
  }

  .line-item {
    grid-template-columns: 1fr 80px 1fr;
  }

  .line-item .line-total {
    text-align: left;
    padding-right: 0;
  }
}

/* ─── 原価管理セクション ─────────────────────────────── */
.cost-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.cost-section-header .section-title {
  margin-bottom: 0;
}

/* KPIカードグリッド */
.cost-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.cost-kpi-card {
  background: #fff;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-top: 3px solid transparent;
}

.cost-kpi-card.kpi-safe  { border-top-color: var(--ok); }
.cost-kpi-card.kpi-warn  { border-top-color: var(--warning); }
.cost-kpi-card.kpi-danger { border-top-color: var(--danger); }

.cost-kpi-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}

.cost-kpi-value {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.cost-kpi-card.kpi-safe  .cost-kpi-value { color: var(--ok); }
.cost-kpi-card.kpi-warn  .cost-kpi-value { color: var(--warning); }
.cost-kpi-card.kpi-danger .cost-kpi-value { color: var(--danger); }

.cost-kpi-sub {
  font-size: 11px;
  color: var(--muted-2);
}

/* アラートバナー */
.cost-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 12px;
}

.cost-alert-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: #f59e0b;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  border-radius: 50%;
  flex-shrink: 0;
}

.cost-alert .inline-btn {
  margin-left: auto;
  flex-shrink: 0;
}

/* フィルタータブ */
.cost-filter-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.cost-filter-tab {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}

.cost-filter-tab:hover {
  background: #f9fafb;
  color: var(--text);
}

.cost-filter-tab.active {
  background: var(--text);
  color: #fff;
  border-color: var(--text);
}

/* 原価テーブル（プロジェクト一覧の pj-table と同系のヘッダー・罫線・ホバー） */
.cost-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: #fff;
}

.cost-table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #f3f5f8;
  font-size: 11px;
  font-weight: 600;
  text-align: left;
  color: #6b7280;
  padding: 6px 7px;
  border-right: 1px solid #e1e5eb;
  border-bottom: 1px solid #d8dee8;
  letter-spacing: normal;
  text-transform: none;
  vertical-align: middle;
  white-space: nowrap;
}

.cost-table td {
  padding: 0 7px;
  border-bottom: 1px solid #e8ebf0;
  border-right: 1px solid #edf1f5;
  font-size: 12px;
  color: #1f2937;
  vertical-align: middle;
  line-height: 26px;
}

.cost-table tbody tr:hover {
  background: #f4f4f6;
}

/* 対応必要な行（pj のホバー色よりわずかに暖色で区別） */
.cost-table tbody tr.cost-row-action {
  background: #fffbf0;
}

.cost-table tbody tr.cost-row-action:hover {
  background: #fff3e0;
}

.cost-empty {
  text-align: center;
  color: var(--muted-2);
  padding: 24px 14px !important;
  font-size: 13px;
}

.cost-amount {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.cost-vendor {
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cost-actions {
  text-align: right;
  white-space: nowrap;
}

.cost-alloc-req-cell {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
}

.cost-alloc-req-btn {
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  max-width: 7.5rem;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
}

.cost-due {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.cost-due.cost-due-warn {
  color: var(--danger);
  font-weight: 600;
}

/* 種別バッジ */
.cost-category-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  background: #eff6ff;
  color: #1d4ed8;
  white-space: nowrap;
}

/* 支払ステータスバッジ（6段階） */
.cost-pay-status {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.cs-unregistered { background: #f3f4f6; color: #6b7280; }   /* 未登録 */
.cs-unordered    { background: #fef2f2; color: #b91c1c; }   /* 未発注 ← 要対応 */
.cs-ordered      { background: #eff6ff; color: #1d4ed8; }   /* 発注済み */
.cs-invoice-wait { background: #fff7ed; color: #c2410c; }   /* 請求書待ち */
.cs-pay-wait     { background: #fff7ed; color: #b54708; }   /* 支払待ち ← 要対応 */
.cs-paid         { background: #ecfdf5; color: #047857; }   /* 支払済み */

/* フォーム内ヒントテキスト */
.cost-form-hint {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.5;
}

textarea.cost-form-note {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  line-height: 1.45;
  box-sizing: border-box;
}

.form-grid label.cost-form-note-label {
  grid-column: 1 / -1;
}

/* 原価追加・編集: 2列グリッドの行揃え（ヒントなしで左右バランス） */
.project-create-panel .cost-form-grid {
  align-items: start;
}

.project-create-panel .cost-form-grid > label {
  align-self: start;
}

.project-create-panel .cost-form-grid label:has([data-cost-field="dueDate"]) {
  max-width: calc(50% - 5px);
}

.cost-form-source-pdf {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 12px 0 4px;
  margin-top: 6px;
  border-top: 1px dashed #e2e8f0;
}

.cost-form-source-pdf-label {
  font-size: 12px;
  font-weight: 600;
  color: #475467;
}

.cost-form-source-pdf .cost-form-source-pdf-hint {
  margin-top: 0;
  flex: 1 1 220px;
}

/* 原価インポート: 手法選択／プレビュー */
.cost-import-panel .cost-import-lead {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}

.cost-import-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 原価登録ウィザード（案件作成モーダルに準拠したレイアウト） */
.cost-reg-block-after-lane {
  margin-top: 18px;
}

.cost-import-icon-grid {
  margin-top: 4px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.cost-import-icon-btn {
  border: 1px solid #dbe2ea;
  background: #fff;
  border-radius: 12px;
  min-height: 86px;
  padding: 10px 10px 8px;
  cursor: pointer;
  font: inherit;
  color: #0f172a;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.cost-import-icon-btn:hover {
  border-color: #94a3b8;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.cost-import-icon-btn.active {
  border-color: #0e7490;
  background: #f0fbff;
  box-shadow: 0 0 0 1px rgba(14, 116, 144, 0.18) inset;
}

.cost-import-icon-btn-mark {
  min-width: 34px;
  height: 28px;
  padding: 0 8px;
  border-radius: 9px;
  background: #e2e8f0;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.cost-import-icon-btn-title {
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  line-height: 1.35;
}

.cost-import-icon-btn-sub {
  font-size: 11px;
  color: #0e7490;
  font-weight: 700;
}

/* その他データCSV: 少し柔らかい琥珀系 */
.cost-import-icon-btn--misc-csv {
  border-color: #f4d9a5;
  background: linear-gradient(180deg, #fffaf0 0%, #fff4df 100%);
}

.cost-import-icon-btn--misc-csv .cost-import-icon-btn-mark {
  background: #fde7bf;
  color: #8a4b08;
}

.cost-import-icon-btn--misc-csv .cost-import-icon-btn-sub {
  color: #a16207;
}

/* PDF: 青紫系で他ボタンと区別 */
.cost-import-icon-btn--misc-pdf {
  border-color: #d7d6fe;
  background: linear-gradient(180deg, #f8f8ff 0%, #f1f0ff 100%);
}

.cost-import-icon-btn--misc-pdf .cost-import-icon-btn-mark {
  background: #e4e2ff;
  color: #4338ca;
}

.cost-import-icon-btn--misc-pdf .cost-import-icon-btn-sub {
  color: #4f46e5;
}

.cost-wizard-month-title {
  cursor: pointer;
}

.cost-reg-wizard-modal .mode-card-cost-pick {
  margin: 0;
  min-height: 76px;
}

.cost-reg-wizard-modal .mode-card-cost-pick-full {
  width: 100%;
  box-sizing: border-box;
  margin-top: 12px;
}

/* Step1/Step2: モーダル外寸を固定し、スクロールは composer-body のみ */
.cost-reg-wizard-modal.project-create-modal {
  height: min(90vh, 900px);
  max-height: min(90vh, 900px);
}

.cost-reg-preview-table-wrap {
  margin-top: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  max-height: min(620px, 62vh);
  overflow-y: auto;
  background: #fff;
}

.cost-reg-wizard-modal .cost-reg-preview-table-wrap {
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
}

/* Step2 取込プレビュー: ドロップダウンがラップの overflow で切れないように */
.cost-reg-wizard-modal.cost-import-review .cost-reg-preview-table-wrap {
  overflow-x: auto;
  overflow-y: visible;
}

.cost-reg-preview-table-wrap .cost-import-preview-table {
  border-radius: 0;
}

.cost-import-option {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.cost-import-option:hover {
  border-color: #94a3b8;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.cost-import-option-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

.cost-import-option-desc {
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
}

.cost-import-option--sm {
  padding: 10px 12px;
}

.cost-import-option--sm .cost-import-option-desc {
  font-size: 11px;
}

.cost-import-csv-head {
  font-size: 12px;
  font-weight: 700;
  color: #475467;
  margin-top: 4px;
}

.cost-import-option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 8px;
}

.cost-import-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.cost-reg-wizard-modal.cost-import-review .cost-import-preview-table {
  table-layout: fixed;
}

.cost-reg-wizard-modal.cost-import-review .cost-import-preview-table col.cost-import-col-summary {
  width: 28%;
}

.cost-reg-wizard-modal.cost-import-review .cost-import-preview-table col.cost-import-col-amt {
  width: 7.25rem;
}

.cost-reg-wizard-modal.cost-import-review .cost-import-preview-table col.cost-import-col-proj {
  width: 20%;
}

.cost-reg-wizard-modal.cost-import-review .cost-import-preview-table col.cost-import-col-note {
  width: auto;
}

.cost-import-preview-table th,
.cost-import-preview-table td {
  border: 1px solid #e5e7eb;
  padding: 8px 10px;
  vertical-align: top;
}

.cost-reg-wizard-modal.cost-import-review .cost-import-preview-table th,
.cost-reg-wizard-modal.cost-import-review .cost-import-preview-table td {
  vertical-align: middle;
}

.cost-import-preview-table th {
  background: #f8fafc;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}

.cost-reg-wizard-modal.cost-import-review .cost-import-preview-table th:nth-child(3),
.cost-reg-wizard-modal.cost-import-review .cost-import-preview-table td:nth-child(3) {
  white-space: normal;
  min-width: 0;
  overflow: visible;
  max-width: 100%;
}

/* 検索付き案件プルダウンのパネルがセルでクリップされないよう重ね順を確保 */
.cost-reg-wizard-modal.cost-import-review .cost-import-proj-td .sd-select {
  z-index: 1;
}

.cost-reg-wizard-modal.cost-import-review .cost-import-proj-td .sd-select.sd-open {
  z-index: 120;
}

.cost-reg-wizard-modal.cost-import-review .cost-import-preview-table .cost-import-proj-select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.cost-import-preview-table th .cost-import-th-sub {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 500;
  color: #64748b;
}

.cost-import-row-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background: #fff;
  color: #64748b;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.cost-import-row-remove:hover {
  color: #b91c1c;
  border-color: #fecaca;
  background: #fef2f2;
}

.cost-import-note-actions {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.cost-reg-wizard-modal.cost-import-review .cost-import-note-actions {
  align-items: center;
}

.cost-reg-wizard-modal.cost-import-review .cost-import-note-actions .cost-import-review-note {
  flex: 1 1 auto;
  min-width: 0;
}

.cost-reg-wizard-modal.cost-import-review .cost-import-note-actions .cost-import-row-remove {
  flex: 0 0 auto;
  width: auto;
  min-width: 1.35rem;
  height: auto;
  padding: 2px 4px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #dc2626;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
}

.cost-reg-wizard-modal.cost-import-review .cost-import-note-actions .cost-import-row-remove:hover {
  color: #991b1b;
  background: rgba(254, 226, 226, 0.55);
  border: none;
}

.cost-import-summary-main {
  margin-bottom: 2px;
}

.cost-import-note-td {
  min-width: 140px;
  max-width: 240px;
  vertical-align: top;
}

.cost-reg-wizard-modal.cost-import-review .cost-import-note-td {
  min-width: 180px;
  max-width: none;
  width: auto;
}

.cost-import-note-td .cost-import-review-note {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

textarea.cost-import-review-note.pj-input {
  width: 100%;
  max-width: 100%;
  min-height: 52px;
  resize: vertical;
  font-size: 12px;
  line-height: 1.45;
}

.cost-reg-wizard-modal.cost-import-review textarea.cost-import-review-note.pj-input,
.cost-reg-wizard-modal.cost-import-review textarea.cost-import-manual-summary-input.pj-input {
  min-height: 38px;
  max-width: 100%;
  resize: vertical;
  font-size: 12px;
  line-height: 1.35;
  padding: 8px 10px;
  box-sizing: border-box;
}

.cost-reg-wizard-modal.cost-import-review .cost-import-preview-table select.pj-input.cost-import-proj-select,
.cost-reg-wizard-modal.cost-import-review .cost-import-preview-table .cost-import-amt-input.pj-input {
  min-height: 38px;
  height: 38px;
  padding: 6px 10px;
  box-sizing: border-box;
}

.cost-reg-wizard-modal.cost-import-review .cost-import-proj-select {
  min-height: 38px;
}

.cost-import-amt {
  white-space: nowrap;
  font-weight: 700;
}

.cost-import-amt:has(.cost-import-amt-edit) {
  white-space: normal;
  vertical-align: middle;
}

.cost-import-amt-edit .cost-import-amt-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px 10px;
  white-space: normal;
}

.cost-import-amt-field--single {
  display: block;
  margin: 0;
  min-width: 0;
}

.cost-import-amt-field--single .cost-import-amt-input.pj-input {
  width: 100%;
  max-width: 10rem;
}

.cost-import-amt-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cost-import-amt-label {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.02em;
}

.cost-import-amt-input.pj-input {
  width: 5.75rem;
  min-width: 4.5rem;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 8px;
}

.cost-import-hint {
  word-break: break-word;
  min-width: 120px;
  max-width: 220px;
}

.cost-import-hint-main {
  font-weight: 600;
  color: #0f172a;
  line-height: 1.35;
}

.cost-import-hint-note {
  margin-top: 6px;
  font-size: 11px;
  color: #64748b;
  line-height: 1.35;
}

.cost-import-partner-cell {
  word-break: break-word;
  min-width: 100px;
  max-width: 200px;
  font-size: 12px;
  color: #334155;
}

.cost-import-project-cell {
  word-break: break-word;
  min-width: 180px;
  max-width: 280px;
  font-size: 12px;
}

.cost-import-suggested-block,
.cost-import-selected-block {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  line-height: 1.35;
}

.cost-import-selected-block {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #e2e8f0;
}

.cost-import-suggested-k {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.04em;
}

.cost-import-suggested-v {
  flex: 1;
  min-width: 0;
  color: #1e293b;
}

.cost-import-suggested-v--strong {
  font-weight: 700;
  color: #0f172a;
}

.cost-import-suggested-sub {
  margin-top: 6px;
  font-size: 10px;
  color: #94a3b8;
  line-height: 1.4;
}

.cost-import-proj-select {
  width: 100%;
  min-height: 32px;
  font-size: 12px;
}

.cost-import-hint-msg {
  margin: 10px 0 0;
  font-size: 11px;
  color: #b45309;
  line-height: 1.4;
}

.cost-pick-project-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}

.cost-pick-project-label .pj-input {
  width: 100%;
  margin-top: 6px;
}

.cost-table--global .cost-table-project {
  max-width: 220px;
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 原価管理一覧: 行高・複数行セル（税内訳・備考）は pj と両立 */
.cost-table.cost-table--global th,
.cost-table.cost-table--global td {
  padding: 4px 7px;
  font-size: 12px;
  line-height: 1.3;
  vertical-align: middle;
}

.cost-table.cost-table--global td {
  height: auto;
  min-height: 26px;
}

.cost-table.cost-table--global thead th {
  padding: 6px 7px;
  line-height: 1.2;
}

.cost-kpi-grid--global {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.cost-table--global th.cost-table-col-check,
.cost-table--global td.cost-table-col-check {
  width: 34px;
  text-align: center;
  vertical-align: middle;
}

.cost-table--global th.cost-table-col-actions,
.cost-table--global td.cost-actions {
  white-space: nowrap;
  vertical-align: middle;
  min-width: 10.75rem;
  width: 1%;
}

.cost-table--global td.cost-actions {
  display: table-cell;
  text-align: right;
}

.cost-table--global td.cost-actions .inline-btn {
  min-width: 0;
  width: max-content;
  padding: 5px 9px;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
}

.cost-table--global td.cost-actions .inline-btn:first-child {
  margin-left: 0;
}

/* 原価管理・原価割当（一覧）: 支払先を折り返し、列をやや広く */
.cost-table--global thead th.cost-table-col-vendor,
.cost-table--global tbody td.cost-vendor {
  max-width: 16rem;
  min-width: 13rem;
  width: 18%;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  line-height: 1.35;
  vertical-align: top;
  overflow: visible;
  text-overflow: clip;
}

.cost-table--global thead th.cost-table-col-vendor {
  white-space: nowrap;
  vertical-align: middle;
}

/* 原価管理のみ: 操作列左の罫線を消し、編集・削除が並ぶ幅に収める */
.cost-table--global.cost-table--mgmt th.cost-table-col-actions,
.cost-table--global.cost-table--mgmt td.cost-actions {
  min-width: 0;
  width: 1%;
  max-width: max-content;
  border-left: none;
  padding-left: 10px;
  padding-right: 6px;
}

.cost-table--global.cost-table--mgmt td.cost-actions .inline-btn {
  margin-left: 5px;
}

.cost-table--global.cost-table--mgmt td.cost-actions .inline-btn:first-child {
  margin-left: 0;
}

.cost-table--global .cost-table-note-cell {
  max-width: 14rem;
  font-size: 11px;
  color: #475467;
  line-height: 1.3;
  word-break: break-word;
}

.cost-table--global .cost-table-note {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 原価管理一覧: 摘要・備考は省略せず折り返し表示 */
.cost-table--global.cost-table--mgmt .cost-table-note-cell {
  max-width: min(28rem, 32vw);
  min-width: 10rem;
  vertical-align: top;
}

.cost-table--global.cost-table--mgmt .cost-table-note {
  display: block;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  overflow: visible;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  -webkit-box-orient: unset;
}

.cost-table--global .cost-amount--tax-view {
  text-align: right;
  max-width: 9.5rem;
  white-space: normal;
}

.cost-table--global .cost-amount--tax-view .cost-amt-total {
  display: block;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.2;
}

.cost-table--global .cost-amount--tax-view .cost-tax-sub {
  display: block;
  margin-left: 0;
  margin-top: 2px;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.25;
  white-space: normal;
}

@media (max-width: 1200px) {
  .cost-table--global .cost-amount--tax-view {
    max-width: 7.25rem;
  }
}

.cost-table--global tr.cost-row-unassigned {
  background: #fffbeb;
}

.cost-table--global tr.cost-row-unassigned:hover {
  background: #fff3cd;
}

/* 案件詳細「原価」タブ等: 備考列＋金額右端 */
.cost-table.cost-table--project-readonly td {
  height: auto;
  min-height: 26px;
  line-height: 1.35;
}

.cost-table.cost-table--project-readonly .cost-detail-note-cell {
  max-width: 16rem;
  font-size: 12px;
  color: #475467;
  line-height: 1.35;
  word-break: break-word;
  vertical-align: middle;
}

.cost-table.cost-table--project-readonly .cost-table-note {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cost-table.cost-table--project-readonly .cost-amount {
  text-align: right;
  white-space: nowrap;
}

.cost-table.cost-table--project-readonly .cost-amount .cost-tax-sub {
  font-size: 10px;
  font-weight: 500;
  color: #64748b;
}

.text-safe    { color: var(--ok); }
.text-warning { color: var(--warning); }
.text-danger  { color: var(--danger); }

/* ═══════════════════════════════════════════════════════════════
   案件詳細 v2: サマリーKPIバー
   ═══════════════════════════════════════════════════════════════ */
.det-kpi-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.det-kpi {
  background: #fff;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 3px solid #e5e7eb;
}

.det-kpi.kpi-safe   { border-top-color: var(--ok); }
.det-kpi.kpi-warn   { border-top-color: var(--warning); }
.det-kpi.kpi-danger { border-top-color: var(--danger); }

.det-kpi-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}

.det-kpi-value {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
}

.det-kpi.kpi-safe   .det-kpi-value { color: var(--ok); }
.det-kpi.kpi-warn   .det-kpi-value { color: var(--warning); }
.det-kpi.kpi-danger .det-kpi-value { color: var(--danger); }

.det-kpi-sub {
  font-size: 11px;
  color: var(--muted-2);
}

/* ═══════════════════════════════════════════════════════════════
   案件詳細 v2: 要対応タスクリスト
   ═══════════════════════════════════════════════════════════════ */
.det-task-list {
  display: grid;
  gap: 8px;
}

.det-task-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: var(--shadow-soft);
  border-left: 4px solid transparent;
}

.det-task-item.ti-urgent  { border-left-color: var(--danger);  background: #fff8f8; }
.det-task-item.ti-caution { border-left-color: var(--warning); background: #fffbf0; }
.det-task-item.ti-info    { border-left-color: #94a3b8;        background: #fafbfc; }

.det-task-emoji {
  font-size: 18px;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
  line-height: 1;
}

.det-task-body {
  flex: 1;
  min-width: 0;
}

.det-task-label {
  font-size: 14px;
  font-weight: 640;
  color: var(--text);
  line-height: 1.4;
}

.det-task-detail {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.4;
}

.det-task-acts {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   案件詳細 v2: 折りたたみセクション
   ═══════════════════════════════════════════════════════════════ */
.collapse-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 2px;
}

.collapse-header .section-title {
  margin-bottom: 0;
}

.collapse-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: #f5f7fb;
  color: #475467;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}

.collapse-trigger:hover {
  background: #edf2f8;
}

.collapse-arrow {
  font-size: 11px;
  display: inline-block;
  transition: transform 0.2s;
}

.collapse-arrow.open {
  transform: rotate(180deg);
}

/* ─── レスポンシブ ──────────────────────────────── */
@media (max-width: 1200px) {
  .det-kpi-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 720px) {
  .det-kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .det-task-item {
    flex-wrap: wrap;
  }

  .det-task-acts {
    width: 100%;
    flex-wrap: wrap;
  }
}

/* ═══════════════════════════════════════════════════════════════
   サイドバー: 経営グループラベル
   ═══════════════════════════════════════════════════════════════ */
.nav-label {
  padding: 4px 12px 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.36);
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════
   経営ダッシュボード: 月選択タブ
   ═══════════════════════════════════════════════════════════════ */
.mgmt-month-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

/* ═══════════════════════════════════════════════════════════════
   経営ダッシュボード: KPI カード行
   ═══════════════════════════════════════════════════════════════ */
.mgmt-kpi-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.mgmt-kpi {
  background: #fff;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 3px solid #e5e7eb;
}

.mgmt-kpi.kpi-safe   { border-top-color: var(--ok); }
.mgmt-kpi.kpi-warn   { border-top-color: var(--warning); }
.mgmt-kpi.kpi-danger { border-top-color: var(--danger); }

.mgmt-kpi-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}

.mgmt-kpi-value {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
}

.mgmt-kpi.kpi-safe   .mgmt-kpi-value { color: var(--ok); }
.mgmt-kpi.kpi-warn   .mgmt-kpi-value { color: var(--warning); }
.mgmt-kpi.kpi-danger .mgmt-kpi-value { color: var(--danger); }

.mgmt-kpi-sub {
  font-size: 11px;
  color: var(--muted-2);
}

/* ═══════════════════════════════════════════════════════════════
   経営ダッシュボード: 営業別集計テーブル
   ═══════════════════════════════════════════════════════════════ */
.mgmt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.mgmt-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}

.mgmt-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}

.mgmt-table tbody tr:last-child td { border-bottom: none; }
.mgmt-table tbody tr:hover td { background: #f9fafb; }

.mgmt-td-name   { font-weight: 600; color: var(--text); }
.mgmt-td-num    { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mgmt-td-center { text-align: center; color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════
   月次推移: バーチャート
   ═══════════════════════════════════════════════════════════════ */
.trend-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}

.trend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 4px;
}

.trend-dot.trend-rev { background: #3b82f6; }
.trend-dot.trend-gp  { background: #10b981; }
.trend-dot.trend-oi  { background: #8b5cf6; }

.trend-chart {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 160px;
}

.trend-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
}

.trend-bar-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  justify-content: center;
}

.trend-bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
  min-height: 2px;
  transition: height 0.3s ease;
}

.trend-bar.trend-rev { background: #3b82f6; }
.trend-bar.trend-gp  { background: #10b981; }
.trend-bar.trend-oi  { background: #8b5cf6; }
.trend-bar.trend-oi-neg { background: #ef4444; border-radius: 0 0 3px 3px; }

.trend-label {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   月次 P/L: PLサマリーカード
   ═══════════════════════════════════════════════════════════════ */
.pl-summary-card {
  padding: 20px 24px;
  display: grid;
  gap: 2px;
}

.pl-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}

.pl-row:last-child { border-bottom: none; }

.pl-row.pl-subtotal,
.pl-row.pl-total {
  border-top: 2px solid var(--line-soft);
  margin-top: 4px;
  padding-top: 14px;
}

.pl-label {
  font-size: 14px;
  color: var(--text);
}

.pl-row.pl-revenue .pl-label  { font-weight: 700; }
.pl-row.pl-subtotal .pl-label { font-weight: 700; }
.pl-row.pl-total .pl-label    { font-weight: 700; font-size: 16px; }
.pl-row.pl-deduct .pl-label   { color: var(--muted); font-size: 13px; padding-left: 16px; }
.pl-row.pl-deduct .pl-label::before { content: "－ "; }

.pl-value {
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  text-align: right;
  white-space: nowrap;
}

.pl-row.pl-deduct .pl-value { font-size: 16px; font-weight: 500; color: var(--muted); }
.pl-row.pl-total  .pl-value { font-size: 24px; }

.pl-sub  { font-size: 12px; color: var(--muted); margin-left: 8px; }
.pl-rate { font-size: 13px; font-weight: 500; margin-left: 8px; }

/* ═══════════════════════════════════════════════════════════════
   月次 P/L: 明細リスト（売上・原価・経費）
   ═══════════════════════════════════════════════════════════════ */
.pl-detail-list {
  padding: 6px;
}

.pl-detail-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
}

.pl-detail-row:hover { background: #f7f9fc; }

.pl-detail-name   { font-weight: 580; color: var(--text); }
.pl-detail-sub    { color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pl-detail-amount { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; white-space: nowrap; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }

/* 経費カテゴリ別小計 */
.exp-cat-summary {
  padding: 12px 16px;
  display: grid;
  gap: 4px;
}

.exp-cat-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--muted);
  padding: 4px 0;
  border-bottom: 1px solid var(--line-soft);
}

.exp-cat-row:last-child { border-bottom: none; }

/* ─── レスポンシブ ──────────────────────────────── */
@media (max-width: 1200px) {
  .mgmt-kpi-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .mgmt-kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .trend-chart {
    height: 120px;
  }
}

@media (max-width: 700px) {
  .pl-detail-row {
    grid-template-columns: 1fr;
  }
}

.readonly-note {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 12px;
  font-weight: 600;
}

.inline-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}


.detail-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.detail-owner-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 4px;
}

.detail-owner-card {
  background: #f8fafc;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 14px 16px;
}

.detail-owner-card.emphasis {
  background: #eef4ff;
  border-color: #c7d7fe;
}

.detail-owner-label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

.detail-owner-value {
  display: block;
  font-size: 16px;
  line-height: 1.4;
  color: var(--text);
}

@media (max-width: 860px) {
  .detail-owner-strip {
    grid-template-columns: 1fr;
  }
}

/* ── 担当者ブロック（詳細ページ最上部） ── */
.assignee-block {
  display: flex;
  gap: 10px;
  padding: 4px 0 8px;
  margin-bottom: 0;
}

.assignee-card {
  background: #f1f5f9;
  border: 1.5px solid transparent;
  border-radius: 10px;
  padding: 8px 12px;
  width: 200px;
  max-width: 220px;
  min-width: 120px;
  overflow: hidden;
}

.assignee-card.current-sales {
  background: #eff6ff;
  border-color: #93c5fd;
}

.assignee-card.current-accounting {
  background: #faf5ff;
  border-color: #c4b5fd;
}

.assignee-card-label {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.assignee-card.current-sales .assignee-card-label,
.assignee-card.current-accounting .assignee-card-label {
  font-weight: 600;
}

.assignee-card-value {
  display: block;
  font-size: 13px;
  font-weight: 640;
  color: var(--text);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.assignee-card-role {
  display: inline-block;
  font-size: 10px;
  background: #e2e8f0;
  color: var(--muted);
  border-radius: 4px;
  padding: 1px 5px;
  margin-top: 3px;
  white-space: nowrap;
}

.assignee-card.current-sales .assignee-card-role {
  background: #dbeafe;
  color: #1d4ed8;
}

.assignee-card.current-accounting .assignee-card-role {
  background: #ede9fe;
  color: #6d28d9;
}

/* ── 一覧カードの担当バッジ（アクティブロール） ── */
.flow-badge.flow-badge-sales-active {
  background: #dbeafe;
  color: #1e40af;
  font-weight: 600;
}

.flow-badge.flow-badge-acct-active {
  background: #ede9fe;
  color: #5b21b6;
  font-weight: 600;
}

/* ══ 予算進捗（経営メニュー・budget_progress 相当） ══ */
.budget-progress {
  --bp-accent: #111827;
  --bp-muted: var(--muted);
  --bp-border: #e5e7eb;
  --bp-surface: var(--surface);
  --bp-group-bg: #f1f5f9;
  --bp-person-bg: #f8fafc;
  --bp-total-bg: #e8ecf4;
  --bp-sticky-shadow: 4px 0 8px rgba(16, 24, 40, 0.06);
  --bp-col-dept: 90px;
  /* 担当は従来より約2/3幅。長い氏名は列内で折り返し（td で white-space 上書き） */
  --bp-col-person: clamp(100px, 12ch, 187px);
  --bp-col-metric: 76px;
  --bp-col-month: 108px;
  --bp-col-half: 100px;
  --bp-col-year: 110px;
  --bp-col-avg: 88px;
  font-size: 13px;
  color: var(--text);
}

.budget-progress .bp-empty-detail {
  margin: 0;
  padding: 16px 20px;
  color: var(--bp-muted);
  font-size: 13px;
  line-height: 1.55;
}

.bp-head-tools {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.bp-page-head {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 16px 24px;
}

.bp-page-head .head-tools {
  justify-content: flex-start;
}

.bp-view-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}

.bp-legend {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 11px;
  color: var(--muted);
  flex-wrap: wrap;
}

.bp-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.bp-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

.bp-period-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bp-period-field-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}

.bp-period-select {
  min-width: 120px;
  font-weight: 600;
  color: var(--text);
}

.budget-progress.bp-collapse-h1 .bp-h1-col,
.budget-progress.bp-collapse-h2 .bp-h2-col {
  display: none;
}

.budget-progress.bp-collapse-h1 .bp-detail-h1 .pd-month-rows,
.budget-progress.bp-collapse-h2 .bp-detail-h2 .pd-month-rows {
  display: none;
}

.budget-progress .tabs-row {
  display: flex;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--bp-border);
}

.budget-progress .tab-btn {
  padding: 8px 22px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.budget-progress .tab-btn:hover {
  color: var(--bp-accent);
}

.budget-progress .tab-btn.active {
  color: var(--bp-accent);
  border-bottom-color: var(--bp-accent);
}

.bp-hidden {
  display: none !important;
}

.budget-progress .table-outer {
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.budget-progress .table-scroll {
  overflow-x: auto;
  overflow-y: visible;
  position: relative;
}

.budget-progress table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  white-space: nowrap;
  background: var(--bp-surface);
}

.budget-progress thead tr.row-period th {
  background: #111827;
  color: #fff;
  padding: 6px 10px;
  font-weight: 700;
  font-size: 11px;
  text-align: center;
  letter-spacing: 0.04em;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.budget-progress thead tr.row-month th {
  background: #1e293b;
  color: #fff;
  padding: 8px 10px;
  font-weight: 600;
  font-size: 11px;
  text-align: center;
  letter-spacing: 0.03em;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.budget-progress thead tr.row-month th.col-half-total {
  background: #334155;
}

.budget-progress thead tr.row-month th.col-year-total,
.budget-progress thead tr.row-month th.col-avg {
  background: #1e293b;
}

.budget-progress thead tr.row-period th.col-half-total {
  background: #334155;
}

.budget-progress thead tr.row-period th.col-year-total {
  background: #0f172a;
}

.budget-progress th.sticky,
.budget-progress td.sticky {
  position: sticky;
  background: inherit;
  z-index: 2;
}

.budget-progress th.sticky {
  z-index: 3;
  background: #1e293b;
}

.budget-progress th.sticky-dept {
  left: 0;
  min-width: var(--bp-col-dept);
  max-width: var(--bp-col-dept);
  text-align: left;
  padding-left: 14px;
}

.budget-progress th.sticky-person {
  left: var(--bp-col-dept);
  min-width: var(--bp-col-person);
  max-width: var(--bp-col-person);
}

.budget-progress th.sticky-metric {
  left: calc(var(--bp-col-dept) + var(--bp-col-person));
  min-width: var(--bp-col-metric);
  max-width: var(--bp-col-metric);
}

.budget-progress th.sticky-metric.shadow {
  box-shadow: var(--bp-sticky-shadow);
}

.budget-progress td.sticky-dept {
  left: 0;
  min-width: var(--bp-col-dept);
  max-width: var(--bp-col-dept);
}

.budget-progress td.sticky-person {
  left: var(--bp-col-dept);
  min-width: var(--bp-col-person);
  max-width: var(--bp-col-person);
}

.budget-progress td.sticky-metric {
  left: calc(var(--bp-col-dept) + var(--bp-col-person));
  min-width: var(--bp-col-metric);
  max-width: var(--bp-col-metric);
}

.budget-progress td.sticky-metric.shadow {
  box-shadow: var(--bp-sticky-shadow);
}

.budget-progress tbody tr td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--bp-border);
  border-right: 1px solid var(--bp-border);
  vertical-align: middle;
}

.budget-progress tbody tr:last-child td {
  border-bottom: none;
}

.budget-progress tbody tr:hover td {
  background: #f8fafc;
}

.budget-progress tbody tr:hover td.sticky {
  background: #f8fafc;
}

.budget-progress td.sticky-dept {
  font-weight: 700;
  font-size: 13px;
  color: var(--bp-accent);
  background: var(--bp-group-bg);
  padding-left: 14px;
  /* 表全体の nowrap を上書きし、列幅内で長い部門名を折り返す */
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.35;
}

.budget-progress td.sticky-person {
  font-weight: 600;
  color: var(--bp-accent);
  text-align: center;
  background: var(--bp-person-bg);
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.35;
}

.budget-progress td.sticky-metric {
  color: #475569;
  font-size: 11px;
  font-weight: 500;
  padding-left: 14px;
  background: var(--bp-surface);
}

.budget-progress tr.row-dept-start td {
  border-top: 2px solid var(--bp-accent) !important;
}

.budget-progress tr.row-total td {
  background: var(--bp-total-bg) !important;
  font-weight: 700;
  font-size: 12px;
  border-top: none !important;
  border-bottom: none !important;
}

.budget-progress tr.row-total td.sticky {
  background: var(--bp-total-bg) !important;
}

.budget-progress tr.row-total td.sticky-dept {
  background: #dce3f0 !important;
  color: var(--bp-accent);
}

.budget-progress tr.row-total td.sticky-person {
  background: #dce3f0 !important;
}

.budget-progress tr.row-total td.sticky-metric {
  padding-left: 12px;
  font-weight: 700;
  color: var(--bp-accent);
  background: #dce3f0 !important;
}

.budget-progress .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: var(--bp-col-month);
}

.budget-progress .num-budget {
  color: #111827;
  font-weight: 600;
}

.budget-progress .num-sales {
  color: #1e40af;
  font-weight: 500;
}

.budget-progress .num-profit {
  color: #047857;
  font-weight: 600;
}

.budget-progress .num-zero {
  color: #cbd5e1;
}

.budget-progress .rate-cell {
  text-align: center;
  min-width: var(--bp-col-month);
}

.budget-progress .col-half {
  background: #f1f5f9 !important;
  font-weight: 700;
  min-width: var(--bp-col-half);
  border-left: 1px solid #e2e8f0 !important;
}

.budget-progress .col-year {
  background: #e2e8f0 !important;
  font-weight: 700;
  min-width: var(--bp-col-year);
  border-left: 1px solid #cbd5e1 !important;
  color: #111827;
}

.budget-progress .col-avg {
  background: #e2e8f0 !important;
  color: #64748b;
  font-weight: 500;
  min-width: var(--bp-col-avg);
}

.budget-progress .pct-cell {
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  min-width: var(--bp-col-month);
}

.budget-progress .bp-badge {
  display: inline-flex;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.budget-progress .bp-badge-ok {
  background: #d1fae5;
  color: #047857;
}

.budget-progress .bp-badge-info {
  background: #dbeafe;
  color: #1d4ed8;
}

.budget-progress .bp-badge-over {
  background: #fee2e2;
  color: #b91c1c;
}

.budget-progress .person-layout {
  display: flex;
  gap: 0;
  min-height: 560px;
  max-height: min(680px, calc(100vh - 280px));
  background: var(--bp-surface);
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.budget-progress .person-sidebar {
  width: 180px;
  flex-shrink: 0;
  background: #f8fafc;
  border-right: 1px solid var(--bp-border);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.budget-progress .person-sidebar-head {
  padding: 12px 14px;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--bp-border);
  background: #f1f5f9;
  flex-shrink: 0;
}

.budget-progress .person-sidebar-dept {
  padding: 8px 14px 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--bp-accent);
  letter-spacing: 0.06em;
  background: #e2e8f0;
  border-bottom: 1px solid var(--bp-border);
  border-top: 1px solid var(--bp-border);
  flex-shrink: 0;
}

.budget-progress .person-sidebar-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--bp-border);
  transition: background 0.12s;
  gap: 6px;
  flex-shrink: 0;
  width: 100%;
  border-left: none;
  border-right: none;
  border-top: none;
  background: transparent;
  font: inherit;
  text-align: left;
  color: inherit;
}

.budget-progress .person-sidebar-item:hover {
  background: #eef2ff;
}

.budget-progress .person-sidebar-item.active {
  background: var(--bp-accent);
  color: #fff;
}

.budget-progress .psi-name {
  font-size: 13px;
  font-weight: 600;
}

.budget-progress .psi-pct {
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.budget-progress .person-sidebar-item.active .psi-pct {
  color: #fff;
}

.budget-progress .person-detail {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.budget-progress .pd-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--bp-border);
}

.budget-progress .pd-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--bp-accent);
}

.budget-progress .pd-dept {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.budget-progress .pd-pct-badge {
  font-size: 32px;
  font-weight: 700;
  text-align: right;
}

.budget-progress .pd-pct-label {
  font-size: 10px;
  color: var(--muted);
  text-align: right;
  margin-top: 2px;
}

.budget-progress .pd-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

@media (max-width: 900px) {
  .budget-progress .pd-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
}

.budget-progress .pd-kpi {
  background: #f8fafc;
  border-radius: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
}

.budget-progress .pd-kpi-label {
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 5px;
}

.budget-progress .pd-kpi-val {
  font-size: 16px;
  font-weight: 700;
  color: var(--bp-accent);
}

.budget-progress .pd-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--bp-accent);
  letter-spacing: 0.06em;
  padding-bottom: 8px;
  border-bottom: 1.5px solid var(--bp-border);
}

.budget-progress .pd-month-rows {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 10px;
}

.budget-progress .pd-month-row {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 12px;
}

.budget-progress .pd-month-label {
  width: 76px;
  color: #334155;
  font-weight: 500;
  flex-shrink: 0;
  padding-right: 10px;
}

.budget-progress .pd-bar-wrap {
  width: 50%;
  flex-shrink: 0;
  padding-right: 12px;
}

.budget-progress .pd-bar-bg {
  width: 100%;
  height: 8px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
}

.budget-progress .pd-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.budget-progress .pd-nums {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}

.budget-progress .pd-pct-num {
  width: 44px;
  text-align: right;
  font-weight: 700;
  flex-shrink: 0;
}

.budget-progress .pd-sales-num {
  width: 90px;
  text-align: right;
  color: #1e40af;
  font-weight: 600;
  flex-shrink: 0;
}

.budget-progress .pd-budget-num {
  width: 80px;
  text-align: left;
  color: var(--muted);
  font-size: 11px;
  flex-shrink: 0;
  padding-left: 6px;
}

/* account_settings.html 取り込み（アカウント設定） */
.account-tab-bar {
  display: flex;
  gap: 4px;
  border-bottom: 1.5px solid var(--line-soft);
}

.account-tab-bar .tab-btn {
  padding: 7px 18px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1.5px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.account-tab-bar .tab-btn:hover {
  color: #111827;
}

.account-tab-bar .tab-btn.active {
  color: #111827;
  border-bottom-color: #111827;
}

.acct-table,
.dept-table,
.budget-table {
  width: 100%;
  border-collapse: collapse;
}

.acct-table th,
.dept-table th,
.budget-table th {
  padding: 9px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-align: left;
  border-bottom: 1.5px solid var(--line-soft);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.acct-table td,
.dept-table td,
.budget-table td {
  padding: 12px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
  font-size: 12px;
}

.acct-table tr:last-child td,
.dept-table tr:last-child td,
.budget-table tr:last-child td {
  border-bottom: none;
}

.acct-table tr:hover td,
.dept-table tr:hover td,
.budget-table tr:hover td {
  background: #f8fafc;
}

/* 会計期チップ: 外側1枚のpill。内側 .chip-btn は透明（.chip/.chip-btn 共通のpillを上書き） */
.budget-period-add-form .budget-period-num-input {
  font-variant-numeric: tabular-nums;
}

.budget-period-chip {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0 4px 0 0;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #f5f7fb;
  color: #334155;
  overflow: hidden;
}

.budget-period-chip.active {
  background: #111827;
  color: #ffffff;
  border-color: #111827;
  box-shadow: none;
}

.budget-period-chip .budget-period-chip__label,
.budget-period-chip .chip-btn.budget-period-chip__label {
  border: 0;
  background: transparent;
  color: inherit;
  border-radius: 0;
  box-shadow: none;
  padding: 8px 12px 8px 14px;
  font-size: 12px;
  font-weight: 560;
  cursor: pointer;
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.budget-period-chip .budget-period-chip__label:hover,
.budget-period-chip .chip-btn.budget-period-chip__label:hover {
  background: rgba(0, 0, 0, 0.05);
}

.budget-period-chip.active .budget-period-chip__label:hover,
.budget-period-chip.active .chip-btn.budget-period-chip__label:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* グローバル .chip-btn.active との二重化を防ぐ: 中身は常にラベル専用 */
.budget-period-chip .chip-btn.active,
.budget-period-chip .chip-btn.budget-period-chip__label.active {
  background: transparent;
  color: inherit;
}

.budget-period-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin: 0 2px 0 0;
  border: none;
  border-radius: 50%;
  background: #e2e8f0;
  color: #64748b;
  font-size: 14px;
  line-height: 0;
  cursor: pointer;
  padding: 0;
  transition: background 0.12s, color 0.12s;
}

.budget-period-delete-btn:hover {
  background: #cbd5e1;
  color: #334155;
}

.budget-period-chip.active .budget-period-delete-btn {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.92);
}

.budget-period-chip.active .budget-period-delete-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.budget-master-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  max-height: 62vh;
  overflow-x: auto;
  overflow-y: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
}

.budget-master-table.budget-table {
  width: max-content;
  min-width: 1450px;
  max-width: none;
}

.budget-master-table th,
.budget-master-table td {
  white-space: nowrap;
}

.budget-dept-input {
  width: 8.5rem;
  min-width: 120px;
}

.budget-month-input {
  width: 72px;
  min-width: 72px;
  text-align: right;
}

.budget-dept-select,
.budget-member-select {
  width: 66%;
  min-width: 132px;
}

.acct-name,
.dept-name {
  font-weight: 600;
  color: #111827;
  font-size: 13px;
}

.acct-email {
  color: var(--muted);
}

.acct-perms {
  color: var(--muted);
  font-size: 11px;
  max-width: 220px;
}

.acct-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.role-badge {
  display: inline-flex;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.role-dept {
  background: #d1fae5;
  color: #047857;
}

.role-view {
  background: #f1f5f9;
  color: #64748b;
}

.acct-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.dept-member-editor {
  margin-top: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  overflow: visible;
}

.dept-member-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  background: #f8fafc;
}

.dept-member-editor-head h4 {
  margin: 0;
  font-size: 14px;
  color: #111827;
}

.dept-member-editor-head p {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
}

.dept-member-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

.dept-member-col {
  padding: 12px;
}

/* メンバー編集: 「その他」プールをスクロールに追従（ドラッグ元に届きやすく） */
.dept-member-col--pool {
  position: sticky;
  top: 10px;
  align-self: start;
  max-height: calc(100dvh - 200px);
  display: flex;
  flex-direction: column;
}

.dept-member-col--pool .dept-member-dropzone {
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(100dvh - 280px);
  overflow-y: auto;
}

.dept-member-col + .dept-member-col {
  border-left: 1px solid var(--line-soft);
}

.dept-member-col-title {
  margin-bottom: 10px;
  font-size: 12px;
  color: #334155;
  font-weight: 600;
}

.dept-member-dropzone {
  min-height: 126px;
  border: 1px dashed #d5dbe5;
  border-radius: 10px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.dept-member-dropzone.is-drop-target {
  border-color: #1a1a2e;
  background: #f7f8ff;
}

.dept-member-card {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 7px 9px;
  background: #fff;
  cursor: grab;
}

.dept-member-card.is-leader {
  border-color: #3b82f6;
  background: linear-gradient(160deg, #eff6ff 0%, #dbeafe 55%, #bfdbfe 100%);
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.12), 0 1px 3px rgba(37, 99, 235, 0.12);
}

.dept-member-card.is-dragging {
  opacity: 0.6;
}

.dept-member-avatar {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef2ff;
  color: #1e293b;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.dept-member-main {
  min-width: 0;
  flex: 1;
}

.dept-member-name {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dept-leader-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: #dbeafe;
  color: #1d4ed8;
}

.dept-member-meta {
  margin-top: 2px;
  font-size: 11px;
  color: #64748b;
}

.dept-member-handle {
  color: #cbd5e1;
  font-size: 12px;
  line-height: 1;
  user-select: none;
}

.dept-empty-note {
  padding: 16px 6px;
  font-size: 12px;
  color: #94a3b8;
  text-align: center;
}

.approval-setting-grid {
  display: grid;
  gap: 12px;
}

.approval-flow-bind-table .approval-flow-bind-select {
  min-width: 260px;
  max-width: 100%;
}

.approval-setting-row {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 10px;
  align-items: center;
}

.approval-setting-label {
  font-size: 13px;
  color: #475569;
  font-weight: 600;
}

.approval-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.approval-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e0f2fe;
  color: #0c4a6e;
  font-size: 12px;
  font-weight: 600;
}

.approval-chip.muted {
  background: #f1f5f9;
  color: #64748b;
}

.approval-stage-list {
  display: grid;
  gap: 10px;
}

.approval-stage-item {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px;
  background: #fff;
}

.approval-stage-head {
  margin-bottom: 8px;
  font-size: 13px;
  color: #334155;
}

/* 承認フロー設定: 部署別カードを横に 3〜4 件程度 */
.approval-dept-lead {
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted, #64748b);
}

.approval-dept-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

@media (max-width: 1280px) {
  .approval-dept-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .approval-dept-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .approval-dept-grid {
    grid-template-columns: 1fr;
  }
}

.approval-dept-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fafbfc;
  padding: 12px 12px 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.approval-dept-card-head {
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e8ecf0;
}

.approval-dept-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
  word-break: break-word;
}

.approval-dept-stages {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.approval-dept-stage {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
}

.approval-dept-stage-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}

.approval-dept-foot {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #e2e8f0;
}

.approval-dept-foot .chip-btn {
  width: 100%;
  justify-content: center;
}

.approval-dept-actions {
  margin-top: 18px;
  padding-top: 4px;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.approval-dept-grid-empty {
  padding: 20px 12px;
  text-align: center;
  font-size: 13px;
}

.approval-flow-grid {
  display: grid;
  grid-template-columns: 7fr 3fr;
  gap: 14px;
  align-items: stretch;
}

.approval-flow-grid .dept-member-col + .dept-member-col {
  border-left: none;
}

.approval-flow-col {
  min-height: 100%;
  min-width: 0;
}

.approval-flow-col--dept {
  grid-column: 1;
}

.approval-flow-col--other {
  grid-column: 2;
}

.approval-flow-dropzone {
  min-height: 380px;
}

.approval-other-flows-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.approval-flow-name-input {
  width: 100%;
  border: 1px solid #dbe2ea;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  background: #fff;
  font-family: inherit;
}

.approval-dept-grid--compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1280px) {
  .approval-dept-grid--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .approval-flow-grid {
    grid-template-columns: 1fr;
  }
  .approval-flow-col--dept,
  .approval-flow-col--other {
    grid-column: auto;
  }
  .approval-dept-grid--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .approval-dept-grid--compact {
    grid-template-columns: 1fr;
  }
}

/* 承認者: アバター＋×、空欄でピッカー */
.approval-approver-slot {
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.approval-approver-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  padding: 4px 0;
  text-align: left;
  border: none;
  background: transparent;
}

.approval-av {
  display: inline-flex;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 999px;
  background: #e0e7ff;
  color: #1e1b4b;
  font-weight: 800;
  font-size: 14px;
  align-items: center;
  justify-content: center;
  border: 1px solid #c7d2fe;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
}

.approval-av-char {
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.approval-approver-pill-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.approval-approver-pill-name-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.approval-approver-pill-name {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.25;
  word-break: break-word;
}

.approval-name-clear {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  font-size: 12px;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}

.approval-name-clear:hover {
  color: #b91c1c;
  border-color: #fecdd3;
  background: #fff1f2;
}

.approval-approver-pill-sub {
  font-size: 10px;
  font-weight: 700;
  color: #2563eb;
  letter-spacing: 0.02em;
}

.approval-approver-hint {
  margin: 0 0 2px;
  font-size: 11px;
  line-height: 1.4;
  color: #b45309;
}

.approval-approver-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  width: 100%;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 10px;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}

.approval-approver-empty:hover {
  border-color: #94a3b8;
  color: #334155;
  background: #f1f5f9;
}

.approval-approver-empty-ico {
  display: flex;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: #e2e8f0;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  color: #475569;
  font-weight: 700;
}

.approval-approver-inherit {
  align-self: flex-start;
  border: none;
  background: none;
  color: #2563eb;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0;
}

.approval-approver-inherit:hover {
  color: #1d4ed8;
}

/* 承認者ピッカー */
.approval-picker-root {
  position: fixed;
  inset: 0;
  z-index: 10050;
}

.approval-picker-dlg {
  position: fixed;
  inset: 0;
  display: block;
}

.approval-picker-scrim {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  cursor: pointer;
}

.approval-picker-card {
  position: relative;
  z-index: 1;
  width: min(100% - 32px, 420px);
  max-height: min(80vh, 600px);
  margin: 8vh auto 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
  border: 1px solid #e5e7eb;
  overflow: hidden;
}

.approval-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px 0;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 12px;
  margin: 0 0 0;
}

.approval-picker-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}

.approval-picker-x {
  border: none;
  background: #f1f5f9;
  color: #64748b;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.approval-picker-hint {
  margin: 0;
  padding: 10px 16px 8px;
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
}

.approval-picker-list {
  list-style: none;
  margin: 0;
  padding: 0 8px 8px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.approval-picker-list li {
  margin: 0 0 4px;
}

.approval-picker-row {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 10px 10px 12px;
  border: 1px solid #edf0f3;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}

.approval-picker-row:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.approval-picker-name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}

.approval-picker-mail {
  display: block;
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
  word-break: break-all;
}

.approval-picker-foot {
  padding: 0 12px 12px;
  display: flex;
  justify-content: flex-end;
}

/* Contract list page (design-system aligned) */
.cl-page-wrap {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: calc(100vh - 120px);
}

/* 契約管理: プロジェクト一覧のカードと同系のトーン */
.cl-page-wrap.cl-page-wrap--alike-pj {
  background: #f9fafc;
  border: 1px solid #dfe5ee;
  box-shadow: inset 0 0 0 1px #eef2f7;
}

.cl-title-area { padding: 18px 24px; }
.cl-title-area h2 { margin: 0; font-size: 22px; font-weight: 700; color: #1a1a2e; }
.cl-title-area-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cl-contract-head-tools { display: inline-flex; align-items: center; gap: 8px; }
/* 一覧タイトル枠の高さを統一（clientだけ低く見える差をなくす） */
.cl-title-area-row,
.pj-head {
  min-height: 56px;
}

.cl-filter-area { border-top: 1px solid #e1e5eb; border-bottom: 1px solid #e1e5eb; padding: 12px 20px 18px; background: #f9fafb; }
.cl-filter-row { display: flex; gap: 12px; align-items: end; }
.cl-filter-bottom { justify-content: space-between; margin-top: 10px; }
.cl-filter-group { display: flex; flex-direction: column; gap: 3px; }
.cl-grow-2 { flex: 2; }
.cl-grow-1 { flex: 1; min-width: 120px; }

.cl-filter-group span,
.cl-inline-group span { font-size: 10px; color: #6b7280; font-weight: 600; }

.cl-filter-input {
  box-sizing: border-box;
  min-height: 30px;
  border: 1px solid #d5dbe5;
  border-radius: 5px;
  padding: 5px 8px;
  font-size: 12px;
  color: #111827;
  background: #fff;
  font-family: "Noto Sans JP", sans-serif;
}

.cl-filter-input:focus { outline: none; border-color: #1a1a2e; box-shadow: 0 0 0 2px rgba(26, 26, 46, 0.08); }

select.cl-filter-input,
.cl-per-page {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 24px;
}

.cl-inline-filters { display: flex; gap: 16px; align-items: center; }
.cl-inline-group { display: flex; align-items: center; gap: 6px; }
.cl-filter-actions { display: flex; gap: 8px; }
.cl-filter-bottom .cl-filter-actions {
  margin-left: auto;
  flex-shrink: 0;
  align-items: flex-end;
}
.cl-client-filter-row-single {
  align-items: end;
  flex-wrap: wrap;
}

.cl-client-filter-row-single > .cl-filter-group {
  min-width: 0;
}

.cl-client-keyword-group { flex: 1.1; min-width: 170px; }
/* カテゴリは幅を抑えて承認状態・社内担当者の余白を確保（検索付きセレクトの min-width と競合しないよう子で上書き） */
.cl-client-category-group {
  flex: 0 0 auto;
  width: 118px;
  max-width: 118px;
  min-width: 0;
}

.cl-client-approval-group {
  flex: 0 0 auto;
  width: 108px;
  min-width: 0;
  max-width: 120px;
}

.cl-client-contract-owner-group {
  flex: 1 1 160px;
  min-width: 120px;
  max-width: 220px;
}
.cl-client-filter-reset-inline { flex-shrink: 0; margin-left: 2px; }

/* 検索ドロップダウン化した select: 共通の140px下限で列からはみ出すのを防ぎ、高さは .cl-filter-input に合わせる */
.cl-filter-group .sd-select {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.cl-filter-group .sd-trigger {
  box-sizing: border-box;
  min-height: 30px;
  border: 1px solid #d5dbe5;
  border-radius: 5px;
  padding: 5px 28px 5px 8px;
  font-size: 12px;
  line-height: 1.25;
  font-family: "Noto Sans JP", sans-serif;
  color: #111827;
  background-color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cl-filter-group .sd-trigger:focus {
  outline: none;
  border-color: #1a1a2e;
  box-shadow: 0 0 0 2px rgba(26, 26, 46, 0.08);
}

.cl-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 16px; font-size: 12px; font-weight: 600; border-radius: 6px; border: none; cursor: pointer; }
.cl-btn-primary { background: #1a1a2e; color: #fff; }
.cl-btn-primary:hover { background: #2a2a4e; }
.cl-btn-outline { background: transparent; border: 1px solid #e6e6e6; color: #1a1a2e; }
.cl-btn-outline:hover { background: #f8f8f8; }

.cl-content { flex: 1; overflow: auto; }
.cl-table { width: 100%; border-collapse: collapse; font-size: 12px; background: #fff; }
.cl-table thead { position: sticky; top: 0; z-index: 10; }

.cl-table th {
  background: #f3f5f8;
  font-size: 11px;
  color: #6b7280;
  font-weight: 600;
  padding: 6px 7px;
  border-right: 1px solid #e1e5eb;
  border-bottom: 1px solid #d8dee8;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.cl-table th:hover { color: #1a1a2e; background: #fafafa; }
.cl-table th .sort-icon { margin-left: 3px; opacity: 0.5; font-size: 10px; }

.cl-table td {
  padding: 5px 7px;
  border-bottom: 1px solid #e8ebf0;
  border-right: 1px solid #edf1f5;
  vertical-align: middle;
  white-space: nowrap;
  color: #1f2937;
}

.cl-client-table .cl-client-tags-col {
  width: 220px;
  max-width: 220px;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.cl-table tr:hover td { background: #f4f4f6; }
.cl-table th.th-check, .cl-table td.td-check { width: 34px; text-align: center; padding: 4px 5px; }

/* 一覧テーブル: 行選択チェック（契約管理の cl-table と同色 #1a1a2e・16px に統一） */
.cl-table input[type="checkbox"],
.pj-table input[type="checkbox"][data-project-select],
.pj-table input[type="checkbox"][data-project-select-all],
.cost-table--global .cost-mgmt-row-check,
.sa-table input[type="checkbox"][data-staff-assign-select],
.sa-table input[type="checkbox"][data-staff-assign-select-all],
.app-mgmt-seal-table th.app-mgmt-seal-th-check input[type="checkbox"],
.app-mgmt-seal-table td.app-mgmt-seal-td-check input[type="checkbox"] {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  accent-color: #1a1a2e;
  cursor: pointer;
  vertical-align: middle;
  margin: 0;
}

.cl-link-btn { border: none; background: transparent; color: #1a1a2e; font-weight: 600; text-decoration: underline; cursor: pointer; padding: 0; line-height: 1.2; }
.cl-contract-company-cell { display: inline-flex; align-items: center; gap: 8px; }
.cl-approval-toggle { border: none; cursor: pointer; font-family: inherit; }
.cl-sub { margin-top: 1px; font-size: 10px; line-height: 1.2; color: #888; }
.cl-muted-cell { color: #666; }

.cl-badge { display: inline-flex; padding: 1px 7px; border-radius: 10px; font-size: 10px; font-weight: 700; line-height: 1.2; }
.cl-badge.good { background: #d8f3dc; color: #1d6840; }
.cl-badge.warn { background: #fde8d3; color: #a04010; }
.cl-badge.neutral { background: #f0f0f0; color: #666; }
.cl-badge.danger { background: #fce4e4; color: #922b21; }

.cl-empty { text-align: center; color: #888; padding: 36px 0; }

/* クライアント一覧 — カード行（他ページ同様 cl-page-wrap 内） */
.cl-client-list-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

label.cl-client-list-csv-label {
  cursor: pointer;
  margin: 0;
}

.cl-client-list-cards {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
}

.cl-client-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid #e8e6de;
  border-radius: 12px;
  background: #fff;
}

.cl-client-card:last-child {
  border-bottom: 1px solid #e8e6de;
}

.cl-client-card:hover {
  border-color: #ccc;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.cl-client-card-main {
  min-width: 0;
  flex: 1;
}

.cl-client-card-line {
  margin: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.cl-client-approval-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.cl-client-approval-pill--ok {
  background: #eaf3de;
  color: #3b6d11;
}

.cl-client-approval-pill--warn {
  background: #fcebeb;
  color: #a32d2d;
}

.cl-client-approval-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cl-client-approval-dot--ok {
  background: #639922;
}

.cl-client-approval-dot--warn {
  background: #e24b4a;
}

.cl-client-card-name {
  display: block;
  max-width: 560px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  text-align: left;
  cursor: pointer;
  line-height: 1.25;
  font-family: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
}

.cl-client-card-name:hover {
  color: #1a1a2e;
}

.cl-client-meta-item {
  font-size: 12px;
  color: #999;
  white-space: nowrap;
}

.cl-client-meta {
  margin-left: auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

.cl-client-meta-divider {
  width: 1px;
  height: 16px;
  background: #e0ded6;
  flex-shrink: 0;
}

.cl-client-contracts {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

.cl-client-contract-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid;
  white-space: nowrap;
}

.cl-client-contract-badge--ok {
  background: #e6f1fb;
  color: #185fa5;
  border-color: #b5d4f4;
}

.cl-client-contract-badge--ng {
  background: #f4f3ef;
  color: #888780;
  border-color: #d8d6ce;
}

.cl-client-contract-mark {
  font-size: 10px;
  line-height: 1;
}

.cl-client-card-meta {
  margin: 8px 0 12px;
  font-size: 13px;
  color: #94a3b8;
}

.cl-client-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.cl-client-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.cl-client-chip--warn {
  background: #fff1f2;
  color: #9f1239;
  border: 1px solid #fecdd3;
}

.cl-client-chip--ok {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.cl-client-card-sub {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: #9ca3af;
  word-break: break-word;
}

.cl-client-card-actions {
  flex-shrink: 0;
  padding-top: 0;
}

.cl-client-card-edit {
  border: 1px solid #d8d6ce;
  border-radius: 7px;
  background: transparent;
  color: #555;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 14px;
  cursor: pointer;
  font-family: inherit;
}

.cl-client-card-edit:hover {
  background: #f0efea;
  border-color: #bbb;
}

.cl-board-empty {
  text-align: center;
  color: #94a3b8;
  padding: 48px 20px;
  font-size: 14px;
}

.cl-pagination { border-top: 1px solid #e6e6e6; display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; font-size: 12px; color: #888; background: #fff; }
.cl-page-controls { display: flex; align-items: center; gap: 8px; }
.cl-per-page { border: 1px solid #e6e6e6; border-radius: 5px; padding: 3px 24px 3px 8px; font-size: 12px; }
.cl-page-btns { display: flex; gap: 3px; align-items: center; }

.cl-page-btn { min-width: 30px; height: 30px; border: 1px solid #e6e6e6; border-radius: 5px; background: #fff; color: #111; cursor: pointer; }
.cl-page-btn.active { background: #1a1a2e; color: #fff; border-color: #1a1a2e; }
.cl-page-btn:disabled { color: #ccc; cursor: default; }
.cl-page-ellipsis { color: #888; padding: 0 4px; }

.cl-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.26); z-index: 1000; align-items: stretch; justify-content: flex-end; }
.cl-modal-overlay.open { display: flex; }

.cl-modal {
  background: #f7f8fb;
  border-radius: 12px 0 0 12px;
  width: min(760px, 96vw);
  height: 100vh;
  overflow-y: auto;
  box-shadow: -8px 0 30px rgba(15, 23, 42, 0.2);
  animation: clDrawerIn 0.2s ease;
}

@keyframes clDrawerIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }

.cl-modal-head { position: sticky; top: 0; padding: 16px 22px; border-bottom: 1px solid #e1e5eb; background: #fff; display: flex; justify-content: space-between; align-items: center; z-index: 2; }
.cl-modal-title { margin: 0; font-size: 15px; font-weight: 700; color: #1a1a2e; }
.cl-modal-head-right { display: flex; align-items: center; gap: 8px; }
.cl-url-input { width: 190px; min-height: 30px; font-size: 12px; }
.cl-modal-close { border: none; background: transparent; color: #888; font-size: 18px; cursor: pointer; }
.cl-modal-body { padding: 18px 22px; display: flex; flex-direction: column; gap: 10px; }
.cl-modal-foot { position: sticky; bottom: 0; border-top: 1px solid #e1e5eb; background: #fff; padding: 12px 22px; display: flex; justify-content: flex-end; gap: 8px; z-index: 2; }
.cl-modal-foot-left,
.cl-modal-foot-right { display: flex; gap: 8px; align-items: center; }
.cl-modal-foot-left { margin-right: auto; }

.cl-form-section {
  width: 100%;
  border: 1px solid #39445e;
  border-radius: 7px;
  background: #2f3a52;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.07em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.cl-form-section:hover {
  background: #3a4661;
}

.cl-sec-arrow { font-size: 10px; color: #dbe4f0; transition: transform 0.2s; }
.cl-form-section.open .cl-sec-arrow { transform: rotate(180deg); }
.cl-sec-body { display: none; padding: 10px 4px 2px; flex-direction: column; gap: 10px; }
.cl-sec-body.open { display: flex; }

.cl-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cl-form-group { display: flex; flex-direction: column; gap: 4px; }
.cl-form-group-zip { max-width: 180px; }
.cl-form-label { font-size: 11px; font-weight: 600; color: #1a1a2e; }
.cl-form-required { color: #dc2626; }

.cl-form-input {
  border: 1px solid #d5dbe5;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  background: #fff;
  color: #111827;
  font-family: "Noto Sans JP", sans-serif;
}

.cl-form-input:focus { outline: none; border-color: #1a1a2e; box-shadow: 0 0 0 2px rgba(26, 26, 46, 0.08); }

.cl-history-link-row {
  margin-bottom: 2px;
}

.cl-history-link {
  font-size: 12px;
  font-weight: 600;
  color: #1a1a2e;
  text-decoration: underline;
}

.cl-history-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  gap: 8px;
}

.cl-history-note {
  font-size: 11px;
  color: #6b7280;
}

.cl-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
}

.cl-history-table th,
.cl-history-table td {
  border: 1px solid #e5e7eb;
  padding: 1px 6px;
  text-align: left;
  vertical-align: middle;
  line-height: 1.2;
}

.cl-history-table th {
  background: #f3f5f8;
  color: #6b7280;
  font-size: 11px;
}

.cl-history-content {
  white-space: normal;
}

.cl-history-content-row {
  display: flex;
  align-items: center;
  min-height: 24px;
}

.cl-history-content-main {
  flex: 1;
  padding: 0 6px 0 0;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.cl-history-content-action {
  width: 72px;
  flex: 0 0 72px;
  border-left: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 0 6px;
}

.cl-history-table th:nth-child(1),
.cl-history-table td:nth-child(1) { width: 150px; }

.cl-history-table th:nth-child(2),
.cl-history-table td:nth-child(2) { width: 90px; }

.cl-history-table th:nth-child(3),
.cl-history-table td:nth-child(3) { width: auto; }

.cl-datetime-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cl-history-readonly {
  font-size: 11px;
  color: #9ca3af;
}

.cl-btn-sm {
  padding: 1px 8px;
  font-size: 11px;
  min-height: 22px;
}

.cl-mini-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.2);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1200;
}

.cl-mini-modal-overlay.open {
  display: flex;
}

.cl-mini-modal {
  width: min(560px, 92vw);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.2);
  overflow: hidden;
}

.cl-mini-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid #e5e7eb;
}

.cl-mini-modal-head h4 {
  margin: 0;
  color: #1a1a2e;
  font-size: 15px;
}

.cl-mini-modal-body {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cl-mini-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid #e5e7eb;
}

.nav-section-toggle {
  width: 100%;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 8px 12px 4px;
  margin-top: 6px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  text-align: left;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.nav-group > .nav-section-toggle:first-child {
  margin-top: 0;
  padding-top: 2px;
}

.nav-section-toggle:hover {
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
}

.nav-section-toggle-label {
  color: inherit;
}

.nav-section-caret {
  font-size: 8px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.42);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.nav-section-toggle.open .nav-section-caret {
  transform: rotate(180deg);
}

.nav-link-sub {
  font-size: 13px;
  padding: 6px 10px 6px 16px;
  color: rgba(255, 255, 255, 0.86);
}

.nav-link:focus-visible {
  outline: 2px solid rgba(56, 189, 248, 0.75);
  outline-offset: 2px;
}

.nav-section-toggle:focus-visible {
  outline: 2px solid rgba(56, 189, 248, 0.75);
  outline-offset: 2px;
}

.nav-link.hidden {
  display: none;
}

.title-link {
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

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

.pd-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 200;
}

.pd-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.pd-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(760px, 96vw);
  max-width: 96vw;
  height: 100vh;
  background: #f7f8fb;
  border-radius: 12px 0 0 12px;
  overflow: hidden;
  box-shadow: -8px 0 30px rgba(15, 23, 42, 0.2);
  transform: translateX(100%);
  transition: transform 0.2s ease, opacity 0.2s ease;
  z-index: 201;
  display: flex;
  flex-direction: column;
}

.pd-drawer.open {
  transform: translateX(0);
}

.pd-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 22px;
  background: #fff;
  border-bottom: 1px solid #e1e5eb;
  z-index: 2;
}

.pd-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #1a1a2e;
}

.pd-close {
  border: none;
  background: transparent;
  color: #888;
  font-size: 18px;
  cursor: pointer;
}

.pd-tabs {
  display: flex;
  padding: 0 22px;
  border-bottom: 1px solid #e1e5eb;
  background: #fff;
}

.pd-tab {
  border: none;
  background: transparent;
  padding: 11px 14px 9px;
  font-size: 12px;
  color: var(--muted, #6b7280);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.pd-tab.active {
  color: #1a1a2e;
  border-bottom-color: #1a1a2e;
  font-weight: 700;
}

/* 案件詳細: 概要 / 実績・その他 */
.detail-main-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 4px;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 0;
}

.detail-main-tab {
  border: none;
  background: transparent;
  padding: 10px 16px 8px;
  font-size: 13px;
  color: #6b7280;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: 8px 8px 0 0;
}

.detail-main-tab:hover {
  color: #374151;
  background: #f9fafb;
}

.detail-main-tab.active {
  color: #111827;
  border-bottom-color: #2563eb;
  font-weight: 700;
}

.pd-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
}

.pd-foot {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 22px;
  border-top: 1px solid #e1e5eb;
  background: #fff;
  z-index: 2;
}

.pd-btn-doc {
  background: #1a5fa8;
  color: #fff;
}

.pd-btn-doc:hover {
  background: #1f6ebb;
}

.dform-section {
  margin: 12px 0 8px;
  padding-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent, #1a5fa8);
  border-bottom: 1.5px solid var(--border, #e5e7eb);
}

/* プロジェクト詳細・概要：識別＋営業・受注（同一 soft-card） */
.pd-overview-meta-card .pd-overview-identity-row {
  display: grid;
  /* クライアント列は従来の fr 比（1.2）の約半分（0.55）に抑える */
  grid-template-columns: minmax(88px, 110px) minmax(100px, 0.55fr) minmax(0, 1fr) minmax(140px, 1fr);
  gap: 12px 16px;
  align-items: start;
}

@media (max-width: 720px) {
  .pd-overview-meta-card .pd-overview-identity-row {
    grid-template-columns: 1fr;
  }
}

.pd-overview-identity-cell {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pd-overview-identity-label-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  line-height: 1.35;
  min-height: 1.35em;
}

.pd-overview-identity-label-row--name {
  align-items: baseline;
}

.pd-overview-meta-card .pd-overview-identity-label-main {
  font-size: 12px;
  font-weight: 600;
  color: #475467;
}

.pd-overview-identity-hint-inline {
  font-size: 10px;
  font-weight: 400;
  color: var(--muted, #6b7280);
  flex: 1 1 12rem;
  min-width: 0;
}

.pd-overview-identity-cell--no .dform-input {
  width: 100%;
  max-width: 100%;
}

.pd-overview-identity-cell--branch .dform-input,
.pd-overview-identity-cell--person .dform-input {
  width: 100%;
  max-width: none;
}

.pd-overview-client-name {
  min-height: 32px;
  display: flex;
  align-items: center;
  min-width: 0;
}

.pd-overview-client-link {
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #2563eb;
  text-decoration: underline;
  text-align: left;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pd-overview-client-link:hover {
  color: #1d4ed8;
}

.pd-overview-meta-divider {
  margin: 14px 0 12px;
  border-top: 1px solid #f0f0f0;
}

.pd-overview-meta-secondary {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 12px;
}

.pd-overview-sales-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  color: #888;
}

.pd-overview-sales-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  cursor: default;
}

/* 概要の営業プルダウン: 支払条件などと同系の dform-select（一覧行内では横幅を抑える） */
.pd-overview-sales-label .pd-overview-sales-select.dform-select {
  width: auto;
  min-width: 200px;
  max-width: min(100%, 280px);
}

.pd-overview-status-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.pd-overview-status-stack .pd-overview-progress-row {
  padding-left: 0;
}

.pd-overview-order-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  color: #555;
}

.pd-overview-order-heading {
  font-weight: 600;
  color: #333;
  line-height: 1.35;
  flex-shrink: 0;
}

.pd-overview-order-check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  cursor: pointer;
  line-height: 1.35;
}

.pd-overview-order-check input[type="checkbox"] {
  margin: 0;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  accent-color: #1a1a2e;
  align-self: center;
}

.dform-row {
  display: flex;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.dform-row.dform-row--grid {
  display: grid;
  /* 請求タイミング＋必須・請求(予定)日＋必須が1行に収まる幅 */
  grid-template-columns: minmax(12.5rem, 14rem) minmax(0, 1fr);
  align-items: start;
  column-gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.dform-row.dform-row--grid .dform-label {
  width: auto;
  max-width: none;
  padding-top: 8px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px 6px;
}

.dform-row.dform-row--grid .dform-val {
  flex: none;
  min-width: 0;
}

.dform-req-cell {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding-top: 8px;
}

.dform-row.dform-row--grid.dform-row--valign-center {
  align-items: center;
}

.dform-row.dform-row--grid.dform-row--valign-center .dform-label {
  padding-top: 0;
}

.dform-row--tags-block .dform-tags-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 10px;
  min-height: 28px;
}

.dform-tag-empty {
  font-size: 12px;
  color: #94a3b8;
}

.dform-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px 4px 4px 10px;
  background: #f1f5f9;
  border-radius: 999px;
  font-size: 12px;
  color: #334155;
}

.dform-tag-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #64748b;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.dform-tag-chip-remove:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.dform-tags-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.dform-tags-main-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.dform-tags-select-label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  flex-shrink: 0;
}

.dform-tags-toolbar .dform-tag-preset {
  flex: 1 1 180px;
  min-width: 140px;
  max-width: min(280px, 100%);
}

.dform-tag-plus {
  flex-shrink: 0;
}

.dform-row--valign-center {
  align-items: center;
}

.dform-row--valign-center .dform-label {
  padding-top: 0;
}

.dform-tax-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  color: #1f2937;
  cursor: pointer;
}

.dform-tax-inline input[type="checkbox"] {
  margin: 0;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  accent-color: #1a1a2e;
}

.dform-tax-inline span {
  font-size: 12px;
  line-height: 1.2;
}

.dform-label {
  width: 110px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--muted, #6b7280);
  text-align: right;
  padding-right: 16px;
  padding-top: 7px;
}

.dform-val {
  flex: 1;
  min-width: 0;
}

.dform-input,
.dform-select {
  width: 100%;
  min-height: 32px;
  border: 1px solid var(--border, #cbd5e1);
  border-radius: 5px;
  background: #fff;
  color: #0f172a;
  padding: 6px 10px;
  font-size: 13px;
}

.dform-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b7280' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

.dform-input:disabled {
  color: #6b7280;
  background: #eef1f7;
}

.dform-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 6px;
  font-size: 12px;
  accent-color: var(--accent, #1a5fa8);
}

.dform-radio-group label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #1f2937;
}

.dform-hint {
  margin-top: 4px;
  font-size: 10px;
  color: var(--muted, #6b7280);
}

.dform-req {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 9px;
  color: #fff;
  background: #1a5fa8;
  border: 1px solid #1a5fa8;
}

.dform-row.dform-row--grid .dform-label .dform-req {
  margin-left: 0;
}

.dform-date-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.dform-date-row .dform-input[type="date"] {
  width: 180px;
}

/* プロジェクト詳細（概要）: 支払条件は日付入力と同程度の幅に揃える */
.dform-val .dform-select[data-pd-field="paymentTerm"] {
  width: 180px;
  max-width: 100%;
}

.dform-date-btn {
  border: 1px solid var(--border, #cbd5e1);
  background: #fff;
  color: #334155;
  border-radius: 4px;
  font-size: 11px;
  padding: 4px 10px;
  cursor: pointer;
}

.dform-date-btn:hover {
  background: #eaf0ff;
}

.pj-page-wrap {
  background: #f9fafc;
  border: 1px solid #dfe5ee;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: calc(100vh - 120px);
  box-shadow: inset 0 0 0 1px #eef2f7;
}

.pj-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
}

.pj-head h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #1a1a2e;
}

.pj-head-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.pj-page-lede {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #64748b;
  font-weight: 400;
  max-width: 52rem;
}

.pj-page-subheading {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #1a1a2e;
}

/* 一覧ページ共通：pj-page-wrap 内の注意バナー */
.pj-page-inline-banner {
  padding: 0 20px 12px;
  flex-shrink: 0;
}

.pj-page-inline-banner .cost-alert {
  margin-bottom: 0;
}

/* プロジェクト一覧系ラップと同調：一覧検索行（カード無し） */
.cost-mgmt-search-bar.pj-cost-mgmt-filter-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.cost-mgmt-search-row--top {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: flex-end;
  width: 100%;
}

.cost-mgmt-search-row--tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  width: 100%;
}

.cost-mgmt-search-row--tabs .cost-mgmt-filter-tabs.cost-filter-bar {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
  align-self: center;
}

.cost-mgmt-filter-clear-all {
  margin-left: auto;
  flex-shrink: 0;
  min-width: auto;
}

/* 原価管理: 一括選択バーは PROJECT / 申請承認と同じ pj-bulk-bar（下余白・角丸のみ上書き） */
.pj-bulk-bar.cost-mgmt-bulk-bar {
  border-radius: 8px;
  margin-bottom: 10px;
}

.cost-mgmt-bulk-modal-lede {
  margin: 0;
  font-size: 13px;
  color: #475569;
  line-height: 1.55;
}

.cost-mgmt-bulk-modal-field .pj-input,
.cost-mgmt-bulk-modal-field select {
  width: 100%;
  max-width: 100%;
}

.cost-mgmt-bulk-modal-foot--split {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

.cost-mgmt-bulk-modal-foot--split .cost-mgmt-bulk-modal-foot-spacer {
  flex: 1;
  min-width: 4px;
}

.cost-mgmt-bulk-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  color: #475569;
}

.cost-mgmt-bulk-label .pj-input,
.cost-mgmt-bulk-label select {
  min-width: 140px;
}

.cost-mgmt-bulk-label-txt {
  flex-shrink: 0;
}

.cost-mgmt-bulk-label--delegate .pj-input,
.cost-mgmt-bulk-label--delegate select {
  min-width: 180px;
}

.cost-table--global .cost-mgmt-delegate-cell,
.cost-table--global .cost-mgmt-case-no-cell {
  font-size: 12px;
  color: #475467;
  white-space: nowrap;
  max-width: 7rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cost-table--global.cost-table--mgmt .cost-mgmt-case-no-cell {
  font-weight: 600;
  color: #344054;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.cost-allocation-toolbar {
  margin-bottom: 0;
}

.cost-allocation-toolbar-row {
  align-items: center;
  width: 100%;
}

.cost-allocation-toolbar-summary {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  line-height: 1.55;
}

.cost-allocation-toolbar-hint {
  font-weight: 400;
  color: #64748b;
  margin-left: 0.35em;
}

.cost-table--allocation-queue {
  margin-top: 0;
}

.cost-alloc-bulk-bar.cost-mgmt-bulk-bar {
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}

.cost-alloc-bulk-project-label {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
}

.cost-alloc-bulk-project-label .pj-input {
  min-width: min(320px, 100%);
  max-width: 420px;
}

.cost-alloc-bulk-project-label-text {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
}

/* 操作列の左の縦罫線（摘要列の border-right）をなくす */
.cost-table--global thead th:nth-last-child(2),
.cost-table--global tbody td:nth-last-child(2) {
  border-right: none;
}

.pj-filter-area > .cost-filter-bar {
  margin-bottom: 0;
}

/* 原価割当ほか短文ページ */
.pj-simple-body {
  padding: 20px 24px 28px;
  flex: 1;
}

/* 申請承認バーをプロジェクト一覧と同様にフラッシュ表示 */
.pj-page-wrap > .app-mgmt-seal-bulk {
  margin-bottom: 0;
  border-radius: 0;
}

/* 予算設定ブロック見出し */
.budget-pj-block-head {
  grid-column: 1 / -1;
}

.budget-pj-block-title {
  margin: 0 0 4px;
}

.budget-pj-block-lede {
  margin: 0;
  font-size: 12px;
  color: var(--muted, #64748b);
  line-height: 1.45;
}

.budget-admin-master-block {
  display: flex;
  flex-direction: column;
}

.budget-pj-master-head-inner {
  flex-shrink: 0;
  padding: 14px 20px 10px;
  border-bottom: 1px solid #e8ebf0;
  background: #fff;
}

/* 一覧ヘッダの CSV：共通 min-width を外してラベル幅を文言に合わせる */
.pj-head-master-csv .inline-btn {
  min-width: 0;
  width: fit-content;
}

.pj-head-master-csv label.inline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pj-head-master-csv .pj-master-project-delete-btn {
  border-color: #b42318;
  color: #b42318;
}

.pj-head-master-csv .pj-master-project-delete-btn:hover {
  background: rgba(180, 35, 24, 0.08);
  border-color: #991b1b;
  color: #991b1b;
}

.pj-filter-area {
  border-top: 1px solid #e1e5eb;
  border-bottom: 1px solid #e1e5eb;
  padding: 12px 20px 18px;
  background: #f9fafb;
  display: grid;
  gap: 10px;
}

.pj-filter-row {
  display: flex;
  gap: 12px;
  align-items: end;
}

.pj-filter-row--main {
  flex-wrap: wrap;
  align-items: center;
}

.pj-filter-order-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  flex: 1 1 260px;
  min-width: 0;
  padding: 4px 0;
}

.pj-filter-order-label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
}

.pj-filter-order-opt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-size: 12px;
  color: #475467;
  cursor: pointer;
  user-select: none;
}

.pj-filter-order-opt input {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  margin: 0;
  accent-color: #1a1a2e;
}

.pj-filter-actions-btn {
  flex: 0 0 auto;
  min-width: auto;
}

/* プロジェクト一覧: 検索結果CSV（ツールチップは title で表示） */
.pj-filter-csv-dl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
}
.pj-filter-csv-dl-btn .pj-filter-csv-dl-icon {
  display: block;
  vertical-align: middle;
}

.pj-filter-row-billing {
  align-items: center;
  flex-wrap: wrap;
}

/* パートナー一覧: クライアント一覧と同トンマナの検索行 */
.cl-partner-filter-row-single {
  align-items: end;
  flex-wrap: wrap;
}

.cl-partner-filter-row-single > .cl-filter-group {
  min-width: 0;
}

.cl-partner-keyword-group { flex: 1.1; min-width: 170px; }
.cl-partner-payment-group { flex: 0 0 140px; max-width: 140px; min-width: 0; }
.cl-partner-approval-group { flex: 0 0 98px; max-width: 98px; min-width: 0; }
.cl-partner-nda-group { flex: 0 0 88px; max-width: 88px; min-width: 0; }
.cl-partner-contract-group { flex: 0 0 88px; max-width: 88px; min-width: 0; }
.cl-partner-tag-group { flex: 0 1 140px; min-width: 72px; max-width: 180px; }
.cl-partner-filter-reset-inline { flex-shrink: 0; margin-left: 2px; }

/* パートナー一覧: ラベル付き検索を1行に収め、支払／NDA／業務委託はネイティブselectのまま */
.pj-partner-filter-row {
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 10px;
  min-width: 0;
}

.pj-partner-filter-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  margin: 0;
}

.pj-partner-filter-group > span {
  font-size: 10px;
  color: #6b7280;
  font-weight: 600;
}

.pj-partner-filter-group .pj-input {
  width: 100%;
  min-width: 0;
}

.pj-partner-filter-group--keyword {
  flex: 1 1 200px;
}

.pj-partner-filter-group--pay {
  flex: 0 0 140px;
  max-width: 140px;
}

.pj-partner-filter-group--approval {
  flex: 0 0 98px;
  max-width: 98px;
}

.pj-partner-filter-group--nda {
  flex: 0 0 88px;
  max-width: 88px;
}

.pj-partner-filter-group--contract {
  flex: 0 0 88px;
  max-width: 88px;
}

.pj-partner-filter-group--tag {
  flex: 0 1 140px;
  min-width: 72px;
  max-width: 180px;
}

.pj-partner-filter-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  flex-shrink: 0;
}

@media (max-width: 1180px) {
  .pj-partner-filter-row {
    flex-wrap: wrap;
  }
}

/* プロジェクト一覧・タグ複数選択（details プルダウン） */
.pj-tag-filter-details {
  position: relative;
  flex: 0 0 auto;
  align-self: center;
}

.pj-tag-filter-details > summary {
  list-style: none;
}

.pj-tag-filter-details > summary::-webkit-details-marker {
  display: none;
}

.pj-tag-filter-trigger {
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #111827;
  background: #fff;
  border: 1px solid #d5dbe5;
  border-radius: 5px;
  font-family: "Noto Sans JP", sans-serif;
  box-sizing: border-box;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.pj-tag-filter-trigger:hover {
  border-color: #94a3b8;
}

.pj-tag-filter-trigger:focus-visible {
  outline: 2px solid var(--accent, #1a5fa8);
  outline-offset: 2px;
}

.pj-tag-filter-trigger-label {
  white-space: nowrap;
}

.pj-tag-filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  background: var(--accent, #1a5fa8);
  color: #fff;
  border-radius: 9px;
}

.pj-tag-filter-badge:empty {
  display: none;
}

.pj-tag-filter-caret {
  font-size: 9px;
  color: #64748b;
  transition: transform 0.15s ease;
  margin-left: 1px;
}

.pj-tag-filter-details[open] .pj-tag-filter-caret {
  transform: rotate(-180deg);
}

.pj-tag-filter-panel {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  z-index: 40;
  min-width: 220px;
  max-width: min(360px, 92vw);
  max-height: 280px;
  overflow-y: auto;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.pj-tag-filter-opt {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 5px 4px;
  font-size: 12px;
  color: #334155;
  cursor: pointer;
  line-height: 1.35;
  border-radius: 4px;
}

.pj-tag-filter-opt:hover {
  background: #f8fafc;
}

/* グローバル input { min-height:38px; padding:… } から切り離し、チェックとラベルを必ず横並びにする */
.pj-tag-filter-opt__check {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  line-height: 0;
}

.pj-tag-filter-opt__check input[type="checkbox"] {
  display: block;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  accent-color: #1a1a2e;
}

.pj-tag-filter-opt__text {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}

.pj-tag-filter-empty {
  font-size: 12px;
  color: #64748b;
  padding: 10px 6px;
  text-align: center;
  line-height: 1.4;
}

.pj-filter-billing-label {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  white-space: nowrap;
}

.pj-filter-billing-sep {
  font-size: 13px;
  color: #64748b;
  padding: 0 2px;
}

.pj-input-month {
  flex: 0 0 auto;
  width: 148px;
  max-width: 46vw;
}

.pj-input {
  min-height: 30px;
  border: 1px solid #d5dbe5;
  border-radius: 5px;
  padding: 5px 8px;
  font-size: 12px;
  background: #fff;
  color: #111827;
  font-family: "Noto Sans JP", sans-serif;
}

.pj-input:focus {
  outline: none;
  border-color: #1a1a2e;
  box-shadow: 0 0 0 2px rgba(26, 26, 46, 0.08);
}

select.pj-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 24px;
}

.pj-bulk-bar {
  display: none;
  align-items: center;
  gap: 10px;
  background: #f0f0f8;
  border-bottom: 1px solid #d0d0e8;
  padding: 8px 20px;
  font-size: 12px;
}

.pj-bulk-bar.show {
  display: flex;
}

.pj-bulk-bar .sep {
  color: #94a3b8;
}

.pj-bulk-bar-end {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* 一覧の横長ツールバー内ではフル幅ボタン固定を解く（PROJECT と同じ密度） */
.pj-bulk-bar .inline-btn,
.pj-bulk-bar .inline-btn.ghost {
  min-width: auto;
}

/* プロジェクト一覧・一括捺印申請（summary で開閉 → 請求書／領収書） */
.pj-seal-bulk-details {
  position: relative;
  align-self: center;
}

.pj-seal-bulk-details > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #475569;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  letter-spacing: 0.02em;
  border-radius: 6px;
  border: 1px solid #334155;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.pj-seal-bulk-details > summary::-webkit-details-marker {
  display: none;
}

.pj-seal-bulk-trigger-caret {
  font-size: 9px;
  opacity: 0.9;
  transition: transform 0.15s ease;
}

.pj-seal-bulk-details[open] > summary .pj-seal-bulk-trigger-caret {
  transform: rotate(-180deg);
}

.pj-seal-bulk-details > summary:hover {
  background: #334155;
}

.pj-seal-bulk-details > summary:focus-visible {
  outline: 2px solid var(--accent, #1a5fa8);
  outline-offset: 2px;
}

.pj-seal-bulk-panel {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  z-index: 50;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
}

.pj-seal-bulk-item {
  margin: 0;
  padding: 8px 12px;
  border: 0;
  border-top: 1px solid #e2e8f0;
  background: #fff;
  font-size: 12px;
  color: #1e293b;
  text-align: left;
  cursor: pointer;
  line-height: 1.35;
}

.pj-seal-bulk-item:first-of-type {
  border-top: 0;
}

.pj-seal-bulk-item:hover {
  background: #f8fafc;
}

.pj-seal-bulk-item:focus-visible {
  outline: 2px solid var(--accent, #1a5fa8);
  outline-offset: -2px;
}

.pj-pagination.cl-pagination .cl-page-btns {
  gap: 8px;
}

.pj-table-area {
  flex: 1;
  overflow: auto;
}

.pj-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: #fff;
}

.pj-table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #f3f5f8;
  font-size: 11px;
  font-weight: 600;
  text-align: left;
  color: #6b7280;
  padding: 6px 7px;
  border-right: 1px solid #e1e5eb;
  border-bottom: 1px solid #d8dee8;
  white-space: nowrap;
}

.pj-table thead th[data-project-sort] {
  cursor: pointer;
}

.pj-table thead th[data-project-sort]:hover {
  color: #1a1a2e;
  background: #fafafa;
}

.pj-table thead th.active {
  color: #1a1a2e;
}

.pj-table tbody td {
  padding: 0 7px;
  border-bottom: 1px solid #e8ebf0;
  border-right: 1px solid #edf1f5;
  font-size: 12px;
  vertical-align: middle;
  white-space: nowrap;
  color: #1f2937;
  height: 26px;
  line-height: 26px;
}

.pj-table thead th.pj-th-check,
.pj-table tbody td.pj-td-check {
  width: 34px;
  max-width: 34px;
  text-align: center;
  padding: 4px 5px;
  vertical-align: middle;
  box-sizing: border-box;
}

.pj-table tbody tr:hover {
  background: #f4f4f6;
}

.pj-no,
.pj-date,
.pj-muted {
  color: var(--muted);
  font-size: 11px;
}

.pj-link {
  border: none;
  background: transparent;
  color: #1a1a2e;
  text-decoration: underline;
  font-weight: 600;
  max-width: 300px;
  text-align: left;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

/* 顧客名：案件名と同様に max-width で複数行へ（auto テーブルだけでは幅が伸びて1行のままになりがち） */
.pj-table tbody td.pj-td-client {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.35;
  vertical-align: middle;
  min-width: 0;
  height: auto;
  min-height: 26px;
  max-width: min(22rem, 42vw);
  padding-top: 4px;
  padding-bottom: 4px;
}

/* 案件名：横幅を抑え長文は複数行（テーブル auto レイアウトでは幅が広がり続けるため max-width が必要） */
.pj-table tbody td.pj-td-name {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.35;
  vertical-align: middle;
  min-width: 0;
  height: auto;
  min-height: 26px;
  max-width: min(22rem, 42vw);
  padding-top: 4px;
  padding-bottom: 4px;
}

.pj-table tbody td.pj-td-name .pj-link {
  display: block;
  box-sizing: border-box;
  max-width: 100%;
  width: 100%;
  white-space: normal;
  line-height: 1.35;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.pj-right {
  text-align: right;
}

.pj-margin.safe { color: #0f9d58; }
.pj-margin.info { color: #1a5fa8; }
.pj-margin.danger { color: #dc2626; }

.pj-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

.pj-badge.safe { background: #d8f3dc; color: #1d6840; }
.pj-badge.muted { background: #f0f0f0; color: #666; }
.pj-badge.info { background: #e3f2fd; color: #1565c0; }
.pj-badge.danger { background: #fce4e4; color: #922b21; }

/* プロジェクト一覧「タグ」列 */
.pj-table tbody td.pj-td-tags {
  white-space: normal;
  max-width: 240px;
  line-height: 1.35;
  padding-top: 4px;
  padding-bottom: 4px;
  vertical-align: middle;
}
.pj-tags-cell-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}
.pj-list-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.35;
  background: #eef2ff;
  color: #4338ca;
  border: 1px solid #c7d2fe;
}

/* プロジェクト一覧「捺印」列：請求書・領収書の状態を横並び */
.pj-seal-cell {
  vertical-align: middle;
}
.pj-seal-cell-inner {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  max-width: 220px;
}
.pj-seal-pair {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pj-seal-pair-lbl {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  white-space: nowrap;
}

/* 申請管理テーブル：チェック・承認ボタンを中央揃え */
.app-mgmt-seal-th-check,
.app-mgmt-seal-td-check {
  width: 34px;
  text-align: center;
  vertical-align: middle;
  box-sizing: border-box;
}
.app-mgmt-seal-table thead th.app-mgmt-seal-th-check {
  text-align: center;
}
.app-mgmt-seal-th-op {
  width: 1%;
  min-width: 0;
  max-width: max-content;
  white-space: nowrap;
  text-align: right;
  box-sizing: border-box;
}
.app-mgmt-seal-op {
  text-align: center;
  vertical-align: middle;
}
.app-mgmt-op-cell {
  width: 1%;
  min-width: 0;
  max-width: max-content;
  white-space: nowrap;
  text-align: right;
  vertical-align: middle;
  box-sizing: border-box;
}
.app-mgmt-op-cell .pj-actions-inner {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
.app-mgmt-op-cell .pj-actions-inner .chip-btn {
  flex-shrink: 0;
}

.app-mgmt-seal-td-appr {
  min-width: 200px;
  max-width: 520px;
  font-size: 12px;
  line-height: 1.35;
  vertical-align: middle;
  white-space: normal;
}

.app-mgmt-seal-appr-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 4px;
  row-gap: 4px;
}

.app-mgmt-seal-appr {
  display: inline-block;
  font-weight: 600;
  white-space: nowrap;
}

.app-mgmt-seal-appr--done {
  color: #166534;
}

.app-mgmt-seal-appr--current {
  color: #1d4ed8;
}

.app-mgmt-seal-appr--later {
  color: #64748b;
}

.app-mgmt-seal-appr-arrow {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
  padding: 0 2px;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* 申請承認テーブル: 承認者列の折返しのため行高は内容に任せる（単行時は契約管理 .cl-table と同程度の余白に揃える） */
.app-mgmt-seal-table tbody td {
  height: auto;
  line-height: 1.35;
  white-space: normal;
}

.app-mgmt-seal-table tbody td.app-mgmt-seal-td-check,
.app-mgmt-seal-table tbody td.app-mgmt-seal-op {
  white-space: nowrap;
  vertical-align: middle;
}

.app-mgmt-approve-processing {
  margin: 0;
  font-size: 13px;
  color: #475467;
  line-height: 1.6;
}

.pj-page-wrap--app-mgmt .pj-bulk-bar.app-mgmt-seal-bulk .inline-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* 申請管理・一括承認バー（pj-bulk-bar と同系統） */
.app-mgmt-seal-bulk {
  border-radius: 8px;
  margin-bottom: 10px;
}

/* 申請承認ページ：見出し〜タブ〜本文〜表の余白 */
.pj-page-wrap--app-mgmt {
  padding-bottom: 28px;
}
.pj-page-wrap--app-mgmt > .pj-head {
  padding: 22px 28px 24px;
}
.pj-page-wrap--app-mgmt .pj-head-stack {
  gap: 12px;
}
.pj-page-wrap--app-mgmt .pj-page-lede {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.65;
  max-width: 54rem;
}
.pj-page-wrap--app-mgmt > .app-mgmt-tab-row {
  margin-top: 10px;
}
.app-mgmt-tab-panel {
  padding: 8px 28px 12px;
}
.app-mgmt-tab-panel__lede {
  margin: 0 0 22px;
  font-size: 13px;
  line-height: 1.65;
  color: #64748b;
}
.pj-page-wrap--app-mgmt .app-mgmt-seal-bulk {
  margin-bottom: 16px;
}
.pj-page-wrap--app-mgmt .pj-table-area {
  margin-top: 4px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: auto;
}
.pj-page-wrap--app-mgmt .app-mgmt-seal-table {
  table-layout: fixed;
  width: 100%;
}
/* データ行・ヘッダの余白を契約管理 .cl-table に合わせる（多行・ボタン折返し時は行が高くなるのは許容） */
.pj-page-wrap--app-mgmt .app-mgmt-seal-table thead th {
  padding: 6px 7px;
  font-size: 11px;
}
.pj-page-wrap--app-mgmt .app-mgmt-seal-table thead th.app-mgmt-seal-th-check {
  padding: 4px 5px;
}
.pj-page-wrap--app-mgmt .app-mgmt-seal-table tbody td {
  padding: 5px 7px;
}
.pj-page-wrap--app-mgmt .app-mgmt-seal-table tbody td.app-mgmt-seal-td-check {
  padding: 4px 5px;
}

/* 申請内容モーダル: 承認フロー縦表示（名前の間に ↓） */
.app-mgmt-approval-flow-v {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  max-width: 100%;
}
.app-mgmt-approval-flow-v-step {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}
.app-mgmt-approval-flow-v-step--done {
  border-color: #86efac;
  background: #f0fdf4;
}
.app-mgmt-approval-flow-v-step--current {
  border-color: #93c5fd;
  background: #eff6ff;
}
.app-mgmt-approval-flow-v-step--later {
  border-color: #e2e8f0;
  background: #f8fafc;
}
.app-mgmt-approval-flow-v-name {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
}
.app-mgmt-approval-flow-v-status {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.app-mgmt-approval-flow-v-step--done .app-mgmt-approval-flow-v-status {
  color: #166534;
}
.app-mgmt-approval-flow-v-step--current .app-mgmt-approval-flow-v-status {
  color: #1d4ed8;
}
.app-mgmt-approval-flow-v-step--later .app-mgmt-approval-flow-v-status {
  color: #64748b;
}
.app-mgmt-approval-flow-v-arrow {
  text-align: center;
  color: #94a3b8;
  font-size: 15px;
  font-weight: 800;
  padding: 4px 0 6px;
  line-height: 1;
  user-select: none;
}

/* 申請承認：タブ・確認メモ列 */
.app-mgmt-tab-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 4px 28px 16px;
  border-bottom: 1px solid #e2e8f0;
}
.app-mgmt-tab {
  border: 1px solid transparent;
  background: transparent;
  color: #64748b;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 14px 10px;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  line-height: 1.3;
}
.app-mgmt-tab:hover {
  color: #334155;
  background: #f8fafc;
}
.app-mgmt-tab--active {
  color: #1d4ed8;
  border-color: #e2e8f0;
  border-bottom-color: #fff;
  margin-bottom: -1px;
  background: #fff;
}
.app-mgmt-tab-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #b45309;
  background: #ffedd5;
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 4px;
  vertical-align: middle;
}
.app-mgmt-tab--active .app-mgmt-tab-badge {
  color: #1e40af;
  background: #dbeafe;
}
.app-mgmt-memo-cell {
  min-width: 7rem;
  max-width: none;
  width: 19%;
  vertical-align: middle;
  line-height: 1.35;
  word-break: break-word;
}
.app-mgmt-memo-cell--readonly {
  font-size: 12px;
  color: #475569;
}
.app-mgmt-memo-cell--readonly .app-mgmt-memo-preview {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
}
.app-mgmt-memo-cell .app-mgmt-memo-ta {
  width: 100%;
  min-height: 2.5rem;
  font-size: 12px;
  box-sizing: border-box;
}
.app-mgmt-link-cell {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 6rem;
}
.app-mgmt-th-memo {
  min-width: 7rem;
  max-width: none;
  width: 19%;
}

/* 申請承認：名称・区分を抑え、確認メモに幅を回す */
.app-mgmt-th-name,
.app-mgmt-td-name {
  width: 7%;
  max-width: 7.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  box-sizing: border-box;
}
.app-mgmt-td-name {
  white-space: nowrap;
}
.app-mgmt-td-name .pj-link {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.app-mgmt-th-class,
.app-mgmt-td-class {
  width: 4.25rem;
  max-width: 5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  box-sizing: border-box;
}

/* 申請承認・契約関係キュー: 操作は3ボタン幅のみ、余白は名称・確認メモへ */
.pj-page-wrap--app-mgmt .app-mgmt-tab-panel {
  min-width: 0;
}
.pj-page-wrap--app-mgmt .app-mgmt-contract-queue-table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
}
.pj-page-wrap--app-mgmt .app-mgmt-contract-queue-table col.app-mgmt-cq-col-check {
  width: 2.25rem;
}
.pj-page-wrap--app-mgmt .app-mgmt-contract-queue-table col.app-mgmt-cq-col-status {
  width: 5.25rem;
}
.pj-page-wrap--app-mgmt .app-mgmt-contract-queue-table col.app-mgmt-cq-col-class {
  width: 7rem;
}
/* 名称:確認メモ ≒ 43:35（確認メモは従来幅の約2/3）。操作列は内容幅まで */
.pj-page-wrap--app-mgmt .app-mgmt-contract-queue-table col.app-mgmt-cq-col-name {
  width: 43%;
}
.pj-page-wrap--app-mgmt .app-mgmt-contract-queue-table col.app-mgmt-cq-col-memo {
  width: 35%;
}
.pj-page-wrap--app-mgmt .app-mgmt-contract-queue-table col.app-mgmt-cq-col-op {
  width: 1%;
  min-width: 0;
}
.pj-page-wrap--app-mgmt .app-mgmt-contract-queue-table .app-mgmt-th-status,
.pj-page-wrap--app-mgmt .app-mgmt-contract-queue-table .app-mgmt-td-status {
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  box-sizing: border-box;
}
.pj-page-wrap--app-mgmt .app-mgmt-contract-queue-table .app-mgmt-th-class,
.pj-page-wrap--app-mgmt .app-mgmt-contract-queue-table .app-mgmt-td-class {
  width: 7rem;
  max-width: none;
  white-space: nowrap;
}
.pj-page-wrap--app-mgmt .app-mgmt-contract-queue-table .app-mgmt-th-name,
.pj-page-wrap--app-mgmt .app-mgmt-contract-queue-table .app-mgmt-td-name {
  width: 43%;
  max-width: none;
  min-width: 0;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.35;
  vertical-align: middle;
}
.pj-page-wrap--app-mgmt .app-mgmt-contract-queue-table .app-mgmt-td-name .pj-link {
  display: inline;
  max-width: none;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.4;
}
.pj-page-wrap--app-mgmt .app-mgmt-contract-queue-table .app-mgmt-th-memo,
.pj-page-wrap--app-mgmt .app-mgmt-contract-queue-table .app-mgmt-memo-cell {
  width: 35%;
  min-width: 0;
  max-width: none;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.35;
  vertical-align: middle;
}
.pj-page-wrap--app-mgmt .app-mgmt-contract-queue-table .app-mgmt-seal-th-op,
.pj-page-wrap--app-mgmt .app-mgmt-contract-queue-table .app-mgmt-op-cell {
  width: 1%;
  min-width: 0;
  max-width: max-content;
  white-space: nowrap;
  text-align: right;
  box-sizing: border-box;
  vertical-align: middle;
}
.pj-page-wrap--app-mgmt .app-mgmt-contract-queue-table .app-mgmt-op-cell .pj-actions-inner {
  display: inline-flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 4px;
}
.pj-page-wrap--app-mgmt .app-mgmt-contract-queue-table .app-mgmt-op-cell .chip-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* 案件詳細「請求項目」横のヘルプ（? を円で囲む。説明は title のネイティブツールチップ） */
.pj-inline-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;
  border: 1px solid #9ca3af;
  border-radius: 50%;
  background: #fff;
  color: #4b5563;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  cursor: help;
  flex-shrink: 0;
}
.pj-inline-help:hover {
  border-color: #4b5563;
  color: #111827;
  background: #f9fafb;
}

/* 担当者割当（請求明細行） */
.sa-filter-bar {
  margin-bottom: 0;
}
.sa-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
}
.sa-filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.sa-filter-label {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
}
.sa-filter-sep {
  align-self: center;
  padding-bottom: 6px;
  color: #9ca3af;
  font-size: 13px;
}
.sa-filter-hint {
  margin: 12px 0 0;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.5;
}
.sa-staff-unassigned-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 13px;
  color: #374151;
  cursor: pointer;
  user-select: none;
}
.sa-staff-unassigned-filter input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  accent-color: #1a1a2e;
  vertical-align: middle;
}
.sa-th-status,
.sa-td-status {
  text-align: center;
  vertical-align: middle;
}
.sa-th-name {
  white-space: normal;
  line-height: 1.3;
  min-width: 6rem;
}
.sa-table-wrap {
  border-radius: 12px;
}
.sa-bulk-bar.pj-bulk-bar {
  margin-top: 12px;
  border-radius: 12px;
  border: 1px solid #d0d0e8;
}
.sa-table.pj-table thead th.sa-th-check,
.sa-table.pj-table tbody td.sa-td-check {
  width: 34px;
  text-align: center;
  vertical-align: middle;
  padding: 4px 5px;
  box-sizing: border-box;
}
.sa-table th,
.sa-table td {
  font-size: 12px;
  vertical-align: middle;
}
.sa-td-no {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sa-td-name {
  max-width: min(22rem, 42vw);
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}
/* pj-table の tbody td は white-space: nowrap のため、案件名だけ折り返し可にする */
.sa-table.pj-table tbody td.sa-td-name {
  white-space: normal;
  line-height: 1.35;
  vertical-align: middle;
  height: auto;
  min-height: 26px;
  padding-top: 4px;
  padding-bottom: 4px;
}
.sa-td-client {
  color: #6b7280;
}
/* pj-table の tbody td は nowrap のため、顧客列は明示的に折り返し */
.sa-table.pj-table thead th.sa-th-client {
  white-space: normal;
  line-height: 1.25;
  min-width: 5rem;
  max-width: min(18rem, 34vw);
  vertical-align: middle;
}
.sa-table.pj-table tbody td.sa-td-client {
  white-space: normal;
  line-height: 1.35;
  vertical-align: middle;
  height: auto;
  min-height: 26px;
  min-width: 0;
  max-width: min(18rem, 34vw);
  padding-top: 4px;
  padding-bottom: 4px;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.sa-td-date {
  white-space: nowrap;
}
.sa-line-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
}
.sa-line-status--ok {
  background: #e8f5e9;
  color: #1b5e20;
}
.sa-line-status--na {
  background: #fff3e0;
  color: #e65100;
}
.sa-line-user-select {
  min-width: 160px;
  max-width: 220px;
}

.sa-bulk-bar-users .sa-bulk-assign-dropdown-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 14px;
  flex: 1;
  min-width: 0;
  /* 「適用」～「選択解除」ブロック手前まで幅を広げる（一覧チップは横スクロール） */
  max-width: none;
}
.sa-bulk-bar-users.sa-bulk-bar .pj-bulk-bar-end.sa-bulk-bar-actions {
  flex-shrink: 0;
}
.sa-bulk-bar-users .sa-bulk-assign-label {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  align-self: center;
}
.sa-bulk-assign-combo {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 100%;
}
.sa-bulk-assign-chips-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 4px 6px 4px 8px;
}
.sa-bulk-assign-chips-scroll {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
}
.sa-bulk-assign-placeholder {
  flex-shrink: 0;
  font-size: 12px;
  color: #6b7280;
  cursor: pointer;
}
.sa-bulk-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  max-width: min(240px, 70vw);
  padding: 2px 2px 2px 8px;
  background: #1f2937;
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.35;
}
.sa-bulk-chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sa-bulk-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.sa-bulk-chip-remove:hover {
  background: rgba(255, 255, 255, 0.15);
}
.sa-bulk-assign-clear-all {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #6b7280;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.sa-bulk-assign-clear-all:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.06);
  color: #111827;
}
.sa-bulk-assign-clear-all:disabled {
  opacity: 0.35;
  cursor: default;
}
.sa-bulk-assign-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #374151;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.sa-bulk-assign-toggle:hover {
  background: rgba(0, 0, 0, 0.06);
}
.sa-bulk-assign-combo.is-open .sa-bulk-assign-toggle {
  color: #111827;
}
.sa-bulk-assign-panel {
  display: none;
  position: absolute;
  z-index: 50;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  max-height: 260px;
  overflow-y: auto;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #cfd5de;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
.sa-bulk-assign-combo.is-open .sa-bulk-assign-panel {
  display: block;
}
.sa-bulk-assign-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
  cursor: pointer;
}
.sa-bulk-assign-option input[type="checkbox"] {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: #1a1a2e;
  vertical-align: middle;
}
.sa-bulk-assign-panel-sub {
  margin: 8px 0 4px;
  padding-top: 8px;
  border-top: 1px solid #e5e7eb;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
}
.sa-bulk-assign-option--dept {
  color: #1e40af;
}
.sa-line-assign-dept {
  font-weight: 600;
  color: #1d4ed8;
}
.sa-td-assignee {
  max-width: 220px;
  word-break: break-word;
  font-size: 12px;
}
.sa-line-assign-empty,
.sa-line-assign-unknown {
  color: #6b7280;
}
.sa-line-assign-name {
  color: #111827;
  font-weight: 500;
}
.sa-line-assign-multi {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
}

.pj-actions {
  border-right: none;
  text-align: left;
}

/* プロジェクト一覧：操作列はボタンぶんに収まる幅（右端・無駄な左余白を出さない） */
.pj-table thead th.pj-th-actions,
.pj-table tbody td.pj-actions {
  width: 1%;
  white-space: nowrap;
}

.pj-table tbody td.pj-actions {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 6px;
  padding-right: 8px;
  vertical-align: middle;
}

.pj-table tbody td.pj-actions .pj-actions-inner {
  justify-content: flex-start;
}

.pj-pagination {
  border-top: 1px solid #e6e6e6;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #888;
  background: #fff;
}

.pj-page-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.pj-profit-summary {
  color: #334155;
  font-weight: 600;
}

.pj-page-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pj-page-right .chip-btn {
  min-width: 30px;
  height: 30px;
  border-radius: 5px;
  border: 1px solid #e6e6e6;
  background: #fff;
  color: #111;
  padding: 0 8px;
}

.pj-page-right .chip-btn.active {
  background: #1a1a2e;
  color: #fff;
  border-color: #1a1a2e;
}

.pj-page-right .chip-btn:disabled {
  color: #ccc;
  cursor: default;
}

.pj-actions-inner {
  min-height: 26px;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
}

.pj-actions-inner .chip-btn {
  height: 24px;
  min-width: auto;
  border-radius: 5px;
  padding: 0 8px;
  font-size: 11px;
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  margin: 0;
}

.db-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.db-top-section {
  margin-top: 0;
}

.db-head h2 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  color: var(--accent, #1a5fa8);
}

.db-head p {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.db-banners {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.db-banner {
  background: #fff5f5;
  border: 1px solid #ffcccc;
  border-radius: 8px;
  padding: 10px 16px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
}

.db-banner-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #c0392b;
  font-size: 12px;
}

.db-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #1a1a2e;
  color: #fff;
  font-size: 11px;
  margin-left: 8px;
}

.db-todo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

@media (max-width: 1100px) {
  .db-todo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .db-todo-grid {
    grid-template-columns: 1fr;
  }
}

.db-todo-card {
  min-width: 0;
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  padding: 14px 12px;
}

.db-todo-card .db-big {
  font-size: 22px;
}

.db-todo-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.db-todo-head h4 {
  margin: 0;
  font-size: 14px;
}

.db-badge {
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
}

.db-badge.warn { background: #ffedd5; color: #c2410c; }
.db-badge.info { background: #e0ecff; color: #1a5fa8; }
.db-badge.muted { background: #eef2f7; color: #6b7280; }

.db-kpi-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 8px;
}

.db-big {
  font-size: 28px;
  font-weight: 700;
}

.db-total {
  text-align: right;
}

.db-total span {
  display: block;
  font-size: 10px;
  color: var(--muted);
}

.db-total strong {
  font-size: 16px;
  color: #c0392b;
}

.db-list-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.db-list-row strong {
  color: var(--accent, #1a5fa8);
  font-size: 12px;
}

.db-list-row p {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.db-list-right {
  text-align: right;
}

.db-list-right p.danger {
  color: var(--danger, #b42318);
}

.db-more {
  width: 100%;
  margin-top: 10px;
}

.db-sales-card {
  background: #fff;
  padding: 20px 24px;
  border-radius: 10px;
  border: 1px solid var(--border, #e5e7eb);
}

.db-rankings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.db-ranking-col {
  min-width: 0;
}

.db-ranking-col .section-title {
  margin-top: 0;
}

.db-ranking-col .ranking-name {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.db-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.db-kpi {
  background: var(--bg);
  border-radius: 8px;
  padding: 14px 16px;
}

.db-kpi span {
  display: block;
  font-size: 11px;
  color: var(--muted);
}

.db-kpi strong {
  display: block;
  margin-top: 6px;
  font-size: 19px;
}

.db-kpi strong.accent { color: var(--accent, #1a5fa8); }
.db-kpi strong.ok { color: #1d6840; }

.db-kpi em {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: #1d6840;
  margin-top: 2px;
}

.db-bars {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
  align-items: end;
}

.db-bar-col {
  text-align: center;
}

.db-bar-rate {
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.db-bar-bg {
  margin: 0 auto;
  width: 16px;
  border-radius: 4px;
  background: #e5e7eb;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.db-bar-fill {
  width: 100%;
}

.db-rate--none { color: #94a3b8; }
.db-rate--low { color: #dc2626; }
.db-rate--mid { color: #d97706; }
.db-rate--high { color: #059669; }
.db-rate--over { color: #2563eb; }

.sd-select {
  position: relative;
  min-width: 140px;
}

.sd-trigger {
  width: 100%;
  text-align: left;
  position: relative;
  padding-right: 28px;
  background-image: linear-gradient(45deg, transparent 50%, #64748b 50%), linear-gradient(135deg, #64748b 50%, transparent 50%);
  background-position: calc(100% - 16px) calc(50% - 2px), calc(100% - 11px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.sd-trigger:focus,
.sd-trigger:focus-visible {
  outline: none;
  border-color: #cbd5e1;
  box-shadow: none;
}

.sd-panel {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 80;
  background: #fff;
  border: 1px solid #d0d7e2;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.14);
  display: none;
  overflow: hidden;
}

.sd-select.sd-open .sd-panel {
  display: block;
}

.sd-search-row {
  padding: 6px 8px;
  border-bottom: 1px solid #e5e7eb;
  background: #f8fafc;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sd-search-icon {
  color: #64748b;
  font-size: 12px;
  line-height: 1;
}

.sd-search {
  flex: 1 1 auto;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
}

.sd-search:focus,
.sd-search:focus-visible {
  outline: none;
  border-color: #cbd5e1;
  box-shadow: none;
}

.sd-options {
  max-height: 240px;
  overflow: auto;
}

.sd-option {
  width: 100%;
  border: 0;
  background: #fff;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 12px;
  cursor: pointer;
}

.sd-option-check {
  width: 14px;
  color: transparent;
  flex: 0 0 14px;
}

.sd-option-label {
  flex: 1 1 auto;
}

.sd-option:hover {
  background: #f1f5f9;
}

.sd-option.is-selected {
  background: #e8eefc;
  color: #1e40af;
  font-weight: 700;
}

.sd-option.is-selected .sd-option-check {
  color: #1e40af;
}

.sd-option-empty {
  padding: 10px;
  color: #94a3b8;
  font-size: 12px;
}

.sd-native {
  display: none !important;
}

.db-bar-col span {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  color: var(--muted);
}

.db-sales-foot {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--muted);
}

.db-link-btn {
  border: 0;
  background: transparent;
  color: #2563eb;
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.cm-page {
  padding: 28px 32px;
}

.cm-page-head h2 {
  margin: 0;
  font-size: 24px;
  color: var(--accent);
}

.cm-page-head p {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.cm-page-wrap {
  margin-top: 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.cm-tab-bar {
  display: flex;
  border-bottom: 1px solid var(--line-soft);
  padding: 0 8px;
}

.cm-tab-btn {
  border: none;
  background: transparent;
  padding: 12px 24px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.cm-tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.cm-tab-btn:not(.active):hover {
  color: var(--accent);
  background: #fafafa;
}

.cm-tab-pane {
  display: none;
  padding: 16px 20px 20px;
}

.cm-tab-pane.active {
  display: block;
}

.cm-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cm-chip {
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 11px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
}

.cm-chip:hover,
.cm-chip.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.cm-member-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
}

.cm-member-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.cm-avatar {
  width: 88px;
  height: 88px;
  border-radius: 999px;
  background: #eceff3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cm-avatar svg {
  width: 44px;
  height: 44px;
}

.cm-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cm-member-dept {
  border-radius: 12px;
  background: #f0f0f0;
  color: #666;
  font-size: 10px;
  padding: 2px 10px;
}

.cm-member-card h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
}

.cm-member-comment {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
}

.cm-member-phone {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
}

.cm-outline-btn {
  width: 100%;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: #fff;
  height: 30px;
  font-size: 12px;
  cursor: pointer;
}

.cm-article-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.cm-primary-btn {
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  height: 32px;
  padding: 0 14px;
  cursor: pointer;
}

.cm-article-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.cm-article-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.cm-article-thumb {
  height: 130px;
  background: #f0f0f0;
}

.cm-article-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cm-article-body {
  padding: 14px;
}

.cm-tag {
  display: inline-flex;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
}

.cm-tag.notice { background: #fde8d3; color: #a04010; }
.cm-tag.knowhow { background: #dbeafe; color: #1e40af; }
.cm-tag.chat { background: #d8f3dc; color: #1d6840; }
.cm-tag.event { background: #f3d8f3; color: #7a1d7a; }
.cm-tag.default { background: #eef2f7; color: #475569; }

.cm-article-body h4 {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

.cm-article-meta {
  margin-top: 8px;
  font-size: 10px;
  color: var(--muted);
}

.cm-empty {
  margin-top: 14px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 20px;
  font-size: 12px;
  color: var(--muted);
  background: #fafafa;
}

.doc-tabs-wrap {
  background: #fff;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0;
  overflow: visible;
}

.doc-page-wrap {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  overflow: hidden;
}

.doc-page-head {
  padding: 18px 24px;
  border-bottom: 1px solid #e1e5eb;
  background: #fff;
}

.doc-page-head h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #1a1a2e;
}

.doc-gap-3lines {
  height: 54px;
}

.doc-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  box-sizing: border-box;
}

.doc-tab {
  border: none;
  border-radius: 4px;
  background: #f5f5f5;
  color: #333;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  padding: 6px 16px;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

.doc-tab:hover:not(.active) {
  background: #ececec;
}

.doc-tab:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.doc-tab.active {
  background: #757575;
  color: #fff;
  font-weight: 600;
}

.doc-sheet {
  background: #fff;
  border: 1px solid #ddd;
  padding: 24px 28px 28px;
  color: #475569;
  max-width: 860px;
  margin: 0 auto;
}

.doc-title {
  text-align: center;
  margin: 0 0 20px;
  font-size: 42px;
  letter-spacing: 0.18em;
  font-weight: 400;
  color: #475569;
}

.doc-head-grid {
  display: grid;
  grid-template-columns: 1fr 230px;
  gap: 22px;
}

.doc-to { font-size: 36px; margin: 4px 0 14px; color: #475569; }
.doc-person { font-size: 22px; line-height: 1.35; margin: 10px 0 0; }
.doc-addr { font-size: 22px; line-height: 1.5; margin: 0; }
.doc-right { justify-self: end; width: 100%; }

.doc-meta {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
}

.doc-meta th,
.doc-meta td {
  border: 1px solid #9aa0a6;
  padding: 5px 8px;
  font-size: 16px;
}

.doc-meta th {
  width: 90px;
  background: #8d9298;
  color: #fff;
  text-align: left;
}

.doc-brand { font-size: 58px; margin: 8px 0 4px; color: #475569; line-height: 1; }
.doc-brand { font-size: 30px; margin: 8px 0 4px; color: #475569; line-height: 1; }
.doc-brand-logo {
  display: block;
  width: 136px;
  height: auto;
}
.doc-company { margin: 2px 0 8px; font-size: 24px; }
.doc-note { margin: 20px 0 10px; font-size: 18px; }

.doc-summary {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 12px;
}

.doc-summary th,
.doc-summary td {
  border: 1px solid #9aa0a6;
  padding: 7px 9px;
  font-size: 17px;
}

.doc-summary th {
  width: 120px;
  background: #8d9298;
  color: #fff;
  text-align: left;
}

.doc-total {
  display: flex;
  align-items: center;
  border: 1px solid #d1d5db;
  margin-bottom: 12px;
}

.doc-total span {
  background: #8d9298;
  color: #fff;
  padding: 9px 12px;
  font-size: 30px;
}

.doc-total strong {
  padding: 0 16px;
  font-size: 36px;
  color: #475569;
}

.doc-lines {
  width: 100%;
  border-collapse: collapse;
}

.doc-lines th,
.doc-lines td {
  border: 1px solid #d5dae0;
  padding: 7px 9px;
  font-size: 16px;
}

.doc-lines th {
  background: #8d9298;
  color: #fff;
  text-align: center;
  font-size: 15px;
}

.doc-lines td:nth-child(n + 2) { text-align: right; }
.doc-lines th:nth-child(1),
.doc-lines td:nth-child(1) { width: 54%; }
.doc-lines th:nth-child(2),
.doc-lines td:nth-child(2) { width: 12%; }
.doc-lines th:nth-child(3),
.doc-lines td:nth-child(3) { width: 10%; }
.doc-lines th:nth-child(4),
.doc-lines td:nth-child(4) { width: 12%; }
.doc-lines th:nth-child(5),
.doc-lines td:nth-child(5) { width: 12%; }

.doc-line-input {
  width: 100%;
  border: 1px solid #cfd5de;
  border-radius: 3px;
  background: #fff;
  font-size: 12px;
  color: #334155;
  padding: 4px 6px;
}

.doc-line-actions {
  text-align: center !important;
  white-space: nowrap;
}

.doc-line-btn {
  width: 18px;
  height: 18px;
  border: 1px solid #cbd5e1;
  border-radius: 3px;
  background: #fff;
  color: #475569;
  font-size: 12px;
  line-height: 1;
  padding: 0;
  margin: 0 1px;
}

.doc-line-action-btns {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  vertical-align: middle;
}

.doc-line-actions--detail {
  vertical-align: middle;
}

.doc-line-btn-move:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* 案件詳細・請求項目: ドラッグハンドル（三本線）とドロップ行の強調 */
.doc-line-drag-handle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 4px 5px;
  margin-right: 2px;
  border-radius: 4px;
  cursor: grab;
  vertical-align: middle;
  user-select: none;
  -webkit-user-select: none;
}

.doc-line-drag-handle:hover {
  background: #f1f5f9;
}

.doc-line-drag-handle.is-dragging {
  cursor: grabbing;
  opacity: 0.85;
}

.doc-line-drag-line {
  display: block;
  width: 12px;
  height: 2px;
  background: #64748b;
  border-radius: 1px;
}

.doc-detail-line-row.is-detail-drop-target {
  outline: 2px solid #3b82f6;
  outline-offset: -2px;
  background: #eff6ff;
}

.doc-tax {
  width: 260px;
  margin-left: auto;
  border-collapse: collapse;
}

.doc-tax th,
.doc-tax td {
  border: 1px solid #d5dae0;
  padding: 7px 9px;
  font-size: 16px;
}

.doc-tax th {
  background: #8d9298;
  color: #fff;
  width: 140px;
}

.doc-tax td { text-align: right; }

.doc-remark {
  margin-top: 14px;
  border: 1px solid #d5dae0;
}

.doc-remark-head {
  text-align: center;
  background: #e5e7eb;
  padding: 7px;
  font-size: 14px;
}

.doc-remark-body {
  height: 160px;
}

/* ── 書類プレビュー共通（doc-sheet--formal）・捺印バナー ── */
.doc-formal-wrap {
  width: 210mm;
  margin: 0 auto 24px;
  border: 1px solid #d0d0d0;
  background: #fff;
  overflow: hidden;
}

.doc-formal-wrap .doc-sheet--formal {
  margin: 0;
  border: none;
  max-width: none;
}

.doc-seal-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  padding: 0 16px;
  font-family: "Yu Gothic UI", YuGothic, "Hiragino Sans", Meiryo, sans-serif;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.doc-seal-banner--static {
  padding: 8px 16px;
}

.doc-seal-banner--static .doc-seal-banner-label {
  flex: 1;
}

.doc-seal-banner-label {
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.02em;
}

.doc-seal-banner--draft {
  background: #aaa;
}

.doc-seal-banner--pending {
  background: #c4a24a;
}

.doc-seal-banner--approved {
  background: #8eb372;
}

.doc-seal-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.doc-seal-banner-vsep {
  display: inline-block;
  width: 1px;
  align-self: stretch;
  margin: 8px 6px;
  background: rgba(255, 255, 255, 0.7);
}

.doc-seal-btn {
  cursor: pointer;
  border: none;
  border-radius: 2px;
  font-size: 11px;
  font-weight: 600;
  padding: 7px 14px;
  font-family: inherit;
  white-space: nowrap;
}

.doc-seal-btn--apply {
  background: #428bca;
  color: #fff;
}

.doc-seal-btn--approve {
  background: #357ebd;
  color: #fff;
}

.doc-seal-btn--outline {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.75);
  font-weight: 500;
}

.doc-seal-btn--history {
  background: #ededed;
  color: #333;
  font-weight: 600;
}

.doc-inv-brand-logo-img {
  display: block;
  max-height: 36px;
  width: auto;
  margin-bottom: 4px;
}

.doc-inv-brand-inkan {
  margin: 8px 0 0;
  text-align: right;
  font-size: 13px;
  color: #333;
}

.doc-sheet-formal-cover {
  padding-top: 8px;
}

.doc-formal-cover-our {
  text-align: right;
  font-size: 12px;
  line-height: 1.65;
  color: #555;
}

.doc-formal-cover-hr {
  margin: 14px 0;
  border: none;
  border-top: 1px solid #ddd;
}

.doc-formal-cover-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  color: #333;
}

.doc-formal-cover-title {
  margin-top: 24px !important;
  letter-spacing: normal !important;
}

.doc-formal-cover-intro-field {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 12px 0 18px;
  padding: 10px 12px;
  font: inherit;
  font-size: 12px;
  line-height: 1.65;
  color: #333;
  border: 1px solid #cfd5de;
  border-radius: 4px;
  resize: vertical;
  box-sizing: border-box;
}

.doc-formal-cover-p {
  font-size: 12px;
  margin: 18px 0;
  color: #333;
}

.doc-formal-cover-ki {
  text-align: center;
  font-size: 13px;
  margin: 22px 0;
  color: #333;
}

.doc-formal-cover-remark {
  margin-top: 40px;
}

.doc-sheet--formal,
.doc-sheet--invoice {
  max-width: none;
  margin: 0 auto;
  padding: 36px;
  box-sizing: border-box;
  font-family: "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "MS Mincho", serif;
  font-size: 12px;
  line-height: 1.5;
  color: #333;
  background: #fff;
}

.doc-sheet--formal *,
.doc-sheet--invoice * {
  box-sizing: border-box;
}

.doc-inv-page-title {
  margin: 0 0 24px;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.5em;
  text-align: center;
  color: #333;
}

.doc-inv-head {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 16px;
}

.doc-inv-head-left {
  flex: 1;
  padding-right: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 132px;
}

.doc-inv-customer {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 400;
  color: #333;
}

.doc-inv-addr-sub {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #555;
}

.doc-inv-lead {
  margin: 0;
  padding-bottom: 6px;
  font-size: 12px;
  color: #333;
}

.doc-inv-head-right {
  flex: 0 0 auto;
  text-align: left;
}

.doc-inv-no-date-table {
  width: auto;
  border-collapse: collapse;
  margin-bottom: 12px;
  /* 縮約時に 1 行目のセル側で top が消えるのを避け、表の上端を必ず閉じる */
  border-top: 0.5px solid #ccc;
}

.doc-inv-no-date-table th,
.doc-inv-no-date-table td {
  border: 0.5px solid #ccc;
  padding: 3px 12px;
  font-size: 11px;
}

.doc-inv-no-date-table th {
  background: #555;
  color: #fff;
  font-weight: 400;
}

.doc-inv-no-date-table tbody tr + tr th {
  border-top: 1px solid #fff;
}

.doc-inv-no-date-table tbody tr + tr td {
  border-top: 1px solid #ccc;
}

.doc-inv-no-date-table td {
  padding: 3px 16px;
}

.doc-inv-brand-block {
  margin-top: 4px;
}

.doc-inv-brand-line {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 3px;
  font-family: "Yu Gothic UI", YuGothic, "Hiragino Sans", Meiryo, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #111;
}

.doc-inv-brand-txt {
  line-height: 1;
}

.doc-inv-brand-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 2px;
  border-radius: 50%;
  background: #e0507a;
  flex-shrink: 0;
}

.doc-inv-brand-dot-in {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

.doc-inv-brand-company {
  margin: 0 0 3px;
  font-size: 13px;
  font-weight: 400;
  color: #333;
}

.doc-inv-brand-staff {
  margin: 6px 0 4px;
  font-size: 11px;
  line-height: 1.45;
  color: #333;
}

.doc-inv-brand-regline {
  margin-top: 2px;
}

.doc-inv-brand-info {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: #555;
}

.doc-inv-meta-total-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
}

.doc-inv-meta-total-table .doc-inv-meta-th,
.doc-inv-meta-total-table .doc-inv-meta-td {
  vertical-align: middle;
}

.doc-inv-meta-th {
  width: 110px;
  white-space: nowrap;
  background: #c8c8c8;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 400;
  color: #333;
  text-align: left;
  border-bottom: 1px solid #fff;
}

.doc-inv-meta-td {
  padding: 5px 12px;
  font-size: 12px;
  color: #333;
}

.doc-inv-meta-input,
.doc-inv-meta-td input[type="date"].doc-line-input {
  max-width: 100%;
  min-height: 30px;
  padding: 5px 10px;
  line-height: 1.35;
  box-sizing: border-box;
  vertical-align: middle;
}

/* 件名〜納期などの日付入力（フル幅に伸びないように board 級の入力幅を上限に） */
.doc-inv-meta-total-table .doc-inv-meta-td input[type="date"].doc-inv-meta-date-input {
  display: inline-block;
  width: auto;
  max-width: 148px;
  min-width: 0;
  vertical-align: middle;
}

.doc-inv-meta-gap td {
  height: 0;
  padding: 0 !important;
  border: none !important;
  line-height: 0;
  font-size: 0;
}

.doc-inv-total-money-row th,
.doc-inv-total-money-row td {
  border-bottom: none;
}

.doc-inv-total-money-row td {
  border-top: 5px solid #fff !important;
  padding-left: 12px !important;
}

.doc-inv-total-money-row th.doc-inv-total-lbl {
  border-top: 5px solid #fff;
  padding: 7px 10px;
  font-size: 14px;
  font-weight: 500;
  background: #c8c8c8;
}

.doc-inv-total-val {
  padding: 7px 12px;
  font-size: 22px;
  font-weight: 700;
  color: #333;
}

.doc-inv-lines-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
}

.doc-inv-lines-table thead th {
  background: #888;
  color: #fff;
  font-size: 11px;
  font-weight: 400;
  padding: 6px;
  text-align: center;
}

.doc-inv-lines-table thead th + th {
  border-left: 1px solid #aaa;
}

.doc-inv-col-sum { width: 44%; min-width: 0; }

.doc-inv-col-qty,
.doc-inv-col-unit { width: 9%; }

.doc-inv-col-price,
.doc-inv-col-amt { width: 19%; }

.doc-inv-lines-table tbody td {
  border: 1px solid #e0e0e0;
  padding: 6px;
  font-size: 12px;
  color: #333;
}

.doc-inv-lines-table tbody tr.doc-inv-line-blank-pad .doc-inv-line-blank-pad-cell {
  border: 1px solid #e0e0e0;
  padding: 6px;
  box-sizing: border-box;
}

.doc-inv-lines-table tbody tr.doc-inv-line-blank-pad {
  page-break-inside: auto;
}

.doc-inv-lines-table tbody .doc-inv-td-sum {
  padding: 6px 12px;
}

.doc-inv-td-sum {
  text-align: left;
}

.doc-inv-lines-table tbody .doc-inv-td-amt,
.doc-inv-lines-table tbody .doc-inv-foot-amt {
  padding: 5px 12px;
}

.doc-inv-td-qty,
.doc-inv-td-unit {
  text-align: center;
}

.doc-inv-td-unitprice,
.doc-inv-td-amt,
.doc-inv-foot-amt {
  text-align: right;
}

.doc-inv-line-empty {
  padding: 16px !important;
  text-align: center !important;
  color: #999 !important;
}

.doc-inv-line-heading {
  padding: 6px 12px !important;
  font-weight: 600;
  background: #fafafa;
}

.doc-inv-line-subrow {
  text-align: center;
  padding: 6px !important;
  font-weight: 600;
}

.doc-inv-foot-blank {
  border: none !important;
  padding: 0 !important;
}

.doc-inv-foot-label {
  background: #aaa;
  color: #fff;
  text-align: center;
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
  border: none !important;
  border-bottom: 1px solid #fff !important;
  vertical-align: middle;
}

.doc-inv-foot-row:last-child .doc-inv-foot-label {
  border-bottom-color: transparent !important;
}

.doc-inv-foot-amt-strong {
  font-weight: 700;
}

.doc-inv-foot-amt {
  border: 1px solid #e0e0e0 !important;
}

.doc-inv-foot-row:last-child .doc-inv-foot-amt {
  font-weight: 700;
}

.doc-inv-remark-box {
  border: 0.5px solid #ddd;
}

.doc-inv-remark-cap {
  background: #e8e8e8;
  padding: 5px 12px;
  font-size: 11px;
  text-align: center;
  color: #333;
}

.doc-inv-remark-text {
  min-height: 90px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.55;
  color: #333;
  white-space: pre-wrap;
}

.doc-inv-remark-field {
  display: block;
  width: 100%;
  min-height: 90px;
  margin: 0;
  padding: 10px 12px;
  border: none;
  font: inherit;
  font-size: 12px;
  line-height: 1.55;
  color: #333;
  resize: vertical;
  box-sizing: border-box;
  background: #fff;
}

/* 画面上の書類プレビュー: A4 幅を維持（flex で縮まない）、狭いときは横スクロールで閲覧 */
.doc-page-wrap .doc-create-preview-slot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  max-height: min(94vh, 1200px);
  padding: 16px 12px 24px;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  background: #e8e8e8;
}

.doc-create-preview-slot__sheet {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-shrink: 0;
}

.doc-page-wrap .doc-create-preview-slot__sheet > .doc-formal-wrap {
  flex-shrink: 0;
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.12);
}

/* 書類プレビュー直下フッター（ロック・送付状/社印・PDF・メール） */
.doc-preview-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin-top: 0;
  padding: 12px 18px;
  background: #f4f5f7;
  border-top: 1px solid #e1e5eb;
  border-bottom: 1px solid #e1e5eb;
  box-sizing: border-box;
  font-size: 13px;
  color: #334155;
}

.doc-preview-footer__lock {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding-right: 14px;
}

.doc-preview-footer__lock-icon {
  flex-shrink: 0;
}

.doc-preview-footer__lock--locked .doc-preview-footer__lock-icon {
  color: #ea580c;
}

.doc-preview-footer__lock--ok .doc-preview-footer__lock-icon {
  color: #64748b;
}

.doc-preview-footer__lock-text {
  line-height: 1.45;
}

.doc-preview-footer__vsep {
  width: 1px;
  align-self: stretch;
  min-height: 28px;
  background: #d1d5db;
  margin: 0 14px;
  flex-shrink: 0;
}

.doc-preview-footer__checks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding-right: 8px;
}

.doc-preview-footer__check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  color: #334155;
}

.doc-preview-footer__check--disabled {
  cursor: not-allowed;
  color: #94a3b8;
}

.doc-preview-footer__chk {
  width: 16px;
  height: 16px;
  accent-color: #1a1a2e;
  cursor: inherit;
}

.doc-preview-footer__check--disabled .doc-preview-footer__chk {
  cursor: not-allowed;
}

.doc-preview-footer__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}

.doc-preview-footer__btn-vsep {
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.35);
  margin: 0 2px 0 8px;
}

.doc-preview-footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: none;
  border-radius: 6px;
  background: #2563eb;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.3;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25);
}

.doc-preview-footer-btn:hover {
  background: #1d4ed8;
}

.doc-preview-footer-btn:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.doc-preview-footer-btn svg {
  flex-shrink: 0;
}

/* ── ショートカットカード ── */
.shortcut-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  border: 0;
  font: inherit;
}

.shortcut-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.shortcut-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.shortcut-sub {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

/* ── ロールバッジ・メニュー権限チェック ── */
.role-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  background: #eff6ff;
  color: #1d4ed8;
  white-space: nowrap;
  margin: 1px 2px;
}

.nav-perm-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.nav-perm-check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #475467;
  cursor: pointer;
  white-space: nowrap;
}

.nav-perm-check input[type="checkbox"] {
  margin: 0;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  accent-color: #1a1a2e;
  cursor: pointer;
}

/* ── クライアント登録フォーム ── */
.client-form-section {
  display: grid;
  gap: 14px;
}

.client-form-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #475467;
}

.client-required {
  color: #c4320a;
  font-size: 11px;
  font-weight: 700;
  margin-left: 4px;
}

.client-form-row input:not([type="checkbox"]):not([type="radio"]),
.client-form-row select,
.client-form-row textarea {
  width: 100%;
}

/* クライアント行内のチェック／ラジオは幅100%を当てない（送付方法などサイズ崩れ防止） */
.client-form-row input[type="checkbox"],
.client-form-row input[type="radio"] {
  width: auto;
  max-width: none;
  margin: 0;
  flex-shrink: 0;
  vertical-align: middle;
}

.client-date-time-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 8px;
}

.client-form-row input.client-readonly-field {
  background: #f8fafc;
  color: #64748b;
  cursor: default;
}

.client-scrape-status {
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  margin-top: 6px;
}

.scrape-loading {
  background: #eff6ff;
  color: #1d4ed8;
}

.scrape-error {
  background: #fef2f2;
  color: #b91c1c;
}

.client-corp-local .corp-local-help {
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted, #64748b);
  margin: -6px 0 0;
}

.corp-local-status {
  font-size: 12px;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
}

.corp-local-status--muted {
  color: var(--muted, #64748b);
  background: #f8fafc;
}

.corp-local-status--err {
  color: #b91c1c;
  background: #fef2f2;
}

.corp-local-results {
  margin-top: 8px;
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--line-soft, #e2e8f0);
  border-radius: 8px;
  background: #fff;
}

.corp-local-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  text-align: left;
  font: inherit;
  border: none;
  border-bottom: 1px solid var(--line-soft, #e8ebf0);
  background: #fff;
  cursor: pointer;
}

.corp-local-pick:last-child {
  border-bottom: none;
}

.corp-local-pick:hover {
  background: #f8fafc;
}

.corp-local-pick-name {
  flex: 1 1 200px;
  font-weight: 600;
  color: #0f172a;
  font-size: 14px;
}

.corp-local-pick-sub {
  flex: 2 1 240px;
  font-size: 12px;
  color: var(--muted, #64748b);
}

.corp-local-pick-num {
  flex: 0 0 auto;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: #94a3b8;
}

.client-form-divider {
  height: 1px;
  background: var(--line-soft);
  margin: 18px 0;
}

/* 契約／クライアント共通：書類送付方法の複数チェック（同一サイズ・折返し時も上揃え） */
.cl-delivery-method-group {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px 18px;
  line-height: 1.4;
}

.cl-delivery-method-hint {
  color: var(--muted);
  font-size: 12px;
  align-self: center;
  white-space: nowrap;
}

.cl-inline-check {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin: 0;
  cursor: pointer;
  font-size: 13px;
  color: #475467;
}

.cl-inline-check span {
  min-width: 0;
}

.cl-delivery-method-checkbox {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  max-width: 16px;
  max-height: 16px;
  flex-shrink: 0;
  margin: 0;
  margin-top: 2px;
  box-sizing: border-box;
  accent-color: #1a1a2e;
}

.radio-group {
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 13px;
}

.radio-group label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.radio-group input[type="radio"] {
  margin: 0;
  min-height: auto;
  width: 14px;
  height: 14px;
}

/* クライアント編集: composer-body の label{ display:grid } を上書きし、ラジオ＋文言を横並びに */
.composer-body .radio-group.client-form-radio-group label {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  color: #475467;
  white-space: nowrap;
}

.composer-body .radio-group.client-form-radio-group label span {
  line-height: 1.3;
}

/* NDA／基本契約が未のとき、書面DLボタンを目立たせる */
.inline-btn.ghost.client-export-doc-pending {
  background: #fff7ed;
  border: 1px solid #fdba74;
  color: #9a3412;
  font-weight: 600;
}

.inline-btn.ghost.client-export-doc-pending:hover {
  background: #ffedd5;
  border-color: #fb923c;
  color: #7c2d12;
}

/* ── クライアント一覧: 契約バッジ ── */
.client-contract-badges {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.contract-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  white-space: nowrap;
}

.contract-done {
  background: #ecfdf5;
  color: #047857;
}

.contract-not {
  background: #fef2f2;
  color: #b91c1c;
}

.client-contract-details {
  margin-top: 6px;
  display: grid;
  gap: 3px;
}

.contract-detail {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.contract-detail-label {
  font-weight: 600;
  color: #475467;
}

/* ── 部署カンバン ── */
.kanban-board {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, 1fr);
  align-items: start;
  gap: 14px;
  padding: 8px 0 12px;
}

.kanban-left-area {
  order: 1;
  min-width: 0;
  background: #f8fafc;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  padding: 10px;
}

.kanban-left-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.kanban-left-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.kanban-left-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  overflow: visible;
}

.kanban-left-grid .kanban-col {
  min-width: 0;
}

.kanban-col {
  flex: 0 0 220px;
  min-width: 200px;
  background: #f8fafc;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
}

.kanban-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 8px;
}

.kanban-col-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.kanban-col-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: #e5e7eb;
  color: #475467;
  font-size: 11px;
  font-weight: 700;
  border-radius: 11px;
}

.kanban-dropzone {
  flex: 1;
  min-height: 80px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px 10px 10px;
  display: grid;
  gap: 6px;
  align-content: start;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  transition: background 0.15s;
}

.kanban-dropzone.is-drop-target {
  background: #dbeafe;
  border: 2px dashed #3b82f6;
  border-radius: 10px;
}

.kanban-col-foot {
  display: flex;
  gap: 6px;
  padding: 8px 10px 10px;
  justify-content: center;
}

.kanban-col-unassigned {
  order: 2;
  background: #fef9ee;
  border-color: #fde68a;
  width: 100%;
  position: sticky;
  top: 10px;
  z-index: 4;
  max-height: calc(100dvh - 96px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
}

.kanban-col-unassigned .kanban-dropzone {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.kanban-col-add {
  background: transparent;
  border: 2px dashed #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
}

.kanban-add-btn {
  border: 0;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 20px;
}

.kanban-add-btn:hover {
  color: var(--text);
}

.kanban-add-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

/* カンバン レスポンシブ */
@media (max-width: 1199px) and (min-width: 768px) {
  .kanban-board {
    grid-template-columns: 1fr;
  }
  .kanban-left-area {
    order: 2;
  }
  .kanban-col-unassigned {
    order: 1;
    max-width: none;
    max-height: min(42dvh, 360px);
    top: 8px;
  }
  .kanban-col-unassigned .kanban-dropzone {
    max-height: min(32dvh, 280px);
  }
  .kanban-left-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kanban-left-grid .kanban-col {
    min-width: 0;
  }
}

@media (max-width: 767px) {
  .kanban-board {
    grid-template-columns: 1fr;
  }
  .kanban-left-area {
    order: 2;
  }
  .kanban-col-unassigned {
    order: 1;
    max-height: min(46dvh, 380px);
    top: 6px;
  }
  .kanban-col-unassigned .kanban-dropzone {
    grid-template-columns: 1fr;
    max-height: min(36dvh, 300px);
  }
  .kanban-left-grid {
    grid-template-columns: 1fr;
  }
  .kanban-left-grid .kanban-col {
    min-width: 0;
  }
}

/* ログイン画面 → login.css */

/* ── ランキング ── */
.ranking-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}

.ranking-row:last-child {
  border-bottom: none;
}

.ranking-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f3f4f6;
  color: #475467;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ranking-row:nth-child(1) .ranking-num { background: #fbbf24; color: #fff; }
.ranking-row:nth-child(2) .ranking-num { background: #9ca3af; color: #fff; }
.ranking-row:nth-child(3) .ranking-num { background: #d97706; color: #fff; }

.ranking-name {
  flex: 1;
  font-weight: 600;
  color: var(--text);
}

.ranking-value {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

/* ── プロジェクト作成ステップ ── */
.step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 24px;
}

.step-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #9ca3af;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}

.step-dot.active {
  background: #111827;
  color: #fff;
}

.step-line {
  width: 60px;
  height: 3px;
  background: #e5e7eb;
  transition: background 0.2s;
}

.step-line.active {
  background: #111827;
}

.selected-client-card {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}

.picker-option strong {
  display: block;
  font-size: 13px;
}

/* ── PDF / 印刷プレビュー（A4）ポップアップ用 body.doc-print-root ── */
body.doc-print-root {
  margin: 0;
  padding: 20px 12px 40px;
  background: #e0e0e0;
  box-sizing: border-box;
}

body.doc-print-root.doc-print-root--formal {
  padding: 24px 12px 40px;
}

body.doc-print-root .doc-formal-wrap {
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 0 !important;
  max-width: 210mm;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.12);
}

body.doc-print-root .page {
  max-width: 210mm;
  margin: 0 auto;
  box-sizing: border-box;
}

@media screen and (max-width: 860px) {
  body.doc-print-root .doc-formal-wrap {
    max-width: 100%;
  }
}

@media print {
  @page {
    size: A4 portrait;
    margin: 10mm 10mm;
  }

  html,
  body {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body.doc-print-root {
    padding: 0 !important;
    background: #fff !important;
  }

  body.doc-print-root .doc-formal-wrap {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    page-break-after: avoid;
  }

  .doc-sheet--formal,
  .doc-sheet--invoice {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
  }

  body.doc-print-root .doc-seal-banner {
    page-break-after: avoid;
    page-break-inside: avoid;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .doc-inv-lines-table thead {
    display: table-header-group;
  }

  .doc-inv-lines-table tbody tr {
    page-break-inside: avoid;
  }

  .doc-inv-lines-table tbody tr.doc-inv-line-blank-pad {
    page-break-inside: auto !important;
  }

  body.doc-print-root .page {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  .inv-no-print,
  .no-print {
    display: none !important;
  }
}

/* 原価管理: 一覧検索・取込プレビュー */
.cost-mgmt-search-bar .cost-mgmt-search-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted, #64748b);
  min-width: 140px;
  flex: 1 1 160px;
}
.cost-mgmt-search-bar .cost-mgmt-search-label {
  font-weight: 600;
  color: #334155;
}
.cost-mgmt-search-field--period {
  flex: 1 1 300px;
  min-width: min(100%, 260px);
}
.cost-mgmt-period-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.cost-mgmt-period-row .pj-input-month {
  flex: 1 1 128px;
  min-width: 7.5rem;
  max-width: 11rem;
}
.cost-mgmt-period-sep {
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  user-select: none;
  flex: 0 0 auto;
}
.cost-import-preview-meta {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}
.cost-import-preview-meta-line {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.5;
  word-break: break-word;
}
.cost-import-preview-meta-line + .cost-import-preview-meta-line {
  margin-top: 8px;
}
.cost-import-preview-payee-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.cost-import-preview-payee-heading {
  font-weight: 600;
  color: #0f172a;
  flex: 0 0 auto;
}
.cost-import-payee-field {
  display: inline-flex;
  align-items: stretch;
  flex: 1 1 min(280px, 100%);
  min-width: min(100%, 200px);
}
.cost-import-payee-select {
  width: 100%;
  max-width: 100%;
}
.cost-import-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.cost-import-preview-meta-line .cost-import-payee-warn {
  margin-top: 0;
}
.cost-import-payee-dash {
  color: #64748b;
  font-weight: 600;
}
.cost-import-payee-inline-warn {
  font-weight: 600;
  white-space: normal;
}
.cost-import-category-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 12px;
  max-width: 100%;
}

.cost-reg-wizard-modal .cost-import-category-bar {
  max-width: 100%;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fafbfc;
  box-sizing: border-box;
}
.cost-import-category-bar-label {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  flex: 0 0 auto;
}

.cost-import-category-bar .cost-import-category-select {
  flex: 1 1 200px;
  min-width: min(100%, 200px);
  max-width: 420px;
}
.cost-import-payee-cell {
  font-size: 12px;
  vertical-align: top;
}
.cost-import-payee-unmatched {
  font-weight: 600;
  color: #b45309;
}
.cost-import-payee-warn {
  font-size: 11px;
  color: #b91c1c;
  margin-top: 4px;
  line-height: 1.35;
}
.cost-import-tax-sub {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}

.cost-import-doc-payee {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}
.cost-import-doc-payee-row {
  display: grid;
  grid-template-columns: minmax(0, 200px) 1fr;
  gap: 8px 12px;
  align-items: start;
  font-size: 12px;
  line-height: 1.4;
}
.cost-import-doc-payee-row + .cost-import-doc-payee-row {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #cbd5e1;
}
.cost-import-doc-payee-row--sub .cost-import-doc-payee-k {
  font-weight: 600;
  color: #64748b;
}
.cost-import-doc-payee-k {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  letter-spacing: 0.02em;
}
.cost-import-doc-payee-v {
  color: #0f172a;
  font-weight: 600;
  word-break: break-word;
}
.cost-import-doc-payee-empty {
  font-weight: 500;
  color: #94a3b8;
}
.cost-import-col-name {
  max-width: 280px;
}
.cost-import-cap-cell {
  min-width: 104px;
  max-width: 200px;
  font-size: 12px;
  vertical-align: top;
}
.cost-import-cap-cell.cost-import-summary-merged {
  max-width: min(520px, 56vw);
  min-width: min(100%, 200px);
}

.cost-reg-wizard-modal.cost-import-review .cost-import-cap-cell.cost-import-summary-merged {
  vertical-align: middle;
  max-width: none;
}
.cost-import-cap-pill {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.cost-import-cap-pill--tax {
  background: #ede9fe;
  color: #5b21b6;
}
.cost-import-cap-pill--bd {
  background: #e0f2fe;
  color: #075985;
}
.cost-import-cap-pill--meta {
  background: #ecfdf5;
  color: #166534;
}
.cost-import-cap-read {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 500;
  color: #334155;
  line-height: 1.4;
  word-break: break-word;
}
.cost-import-cap-hint {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 500;
  color: #64748b;
  line-height: 1.35;
}
.cost-import-cap-dash {
  color: #cbd5e1;
  font-weight: 600;
}
.cost-import-proj-td {
  min-width: 200px;
  max-width: 320px;
}

.cost-reg-wizard-modal.cost-import-review .cost-import-proj-td {
  min-width: 0;
  max-width: none;
}

.cost-import-proj-td .sd-select {
  width: 100%;
  max-width: 100%;
}
.cost-import-proj-td--na {
  color: #94a3b8;
  font-size: 13px;
  text-align: center;
  vertical-align: middle;
}
.cost-import-proj-placeholder {
  display: inline-block;
  padding: 8px 0;
  font-weight: 600;
}
.cost-import-row-payee-warn {
  margin-top: 6px;
}
.cost-import-payee-warn--inline {
  display: inline;
  margin-top: 0;
  margin-left: 4px;
}
button.inline-btn.cost-import-force-btn {
  border-color: #f87171;
  color: #b91c1c;
  background: #fff1f2;
}

button.inline-btn.cost-import-manual-reg-btn {
  border: 1px solid #d1d5db;
  color: #111827;
  background: #fff;
  font-weight: 600;
}

button.inline-btn.cost-import-manual-reg-btn:hover {
  border-color: #9ca3af;
  background: #f9fafb;
}
.cost-tax-sub {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
}

/* ToDo管理（テーマ一覧 → 課題ボード → やり取り） */
.pm-page .pm-readonly-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  vertical-align: middle;
}
.pj-page-lede.pm-backlog-lede {
  max-width: 56rem;
}
.pm-panel-sub {
  margin: 0;
  padding: 6px 12px 0;
  font-size: 12px;
  color: #64748b;
  line-height: 1.45;
}
.pm-epic-row .pm-ch-item-main {
  gap: 6px;
}
.pm-epic-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}
.pm-epic-meta {
  margin-top: 2px;
  font-size: 11px;
  color: #64748b;
}
.pm-epic-count {
  font-weight: 700;
  color: #334155;
}
.pm-epic-open {
  color: #0284c7;
}
.pm-epic-meta--empty {
  opacity: 0.9;
}
.pm-todo-row-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}
.pm-todo-pill {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}
.pm-todo-pill--open {
  border: 1px solid #e2e8f0;
  background: #f1f5f9;
  color: #475569;
}
.pm-todo-pill--doing {
  border: 1px solid #93c5fd;
  background: #dbeafe;
  color: #1d4ed8;
}
.pm-todo-pill--done {
  border: 1px solid #86efac;
  background: #dcfce7;
  color: #166534;
}
.pm-todo-pill--hold {
  border: 1px solid #fcd34d;
  background: #fef3c7;
  color: #92400e;
}
.pm-todo-pill--na {
  border: 1px solid #cbd5e1;
  background: #f1f5f9;
  color: #475569;
}
.pm-todo-snippet {
  margin-top: 2px;
  width: 100%;
  font-size: 12px;
  color: #64748b;
  text-align: left;
}
.pm-new-todo-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #475569;
}
.pm-new-todo-status-select {
  flex: 1 1 160px;
  max-width: 220px;
}
.pm-detail-head {
  flex: 0 0 auto;
  padding: 12px;
  border-bottom: 1px solid #e2e8f0;
}
.pm-detail-head--empty {
  border-bottom: none;
}
.pm-detail-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  justify-content: space-between;
}
.pm-detail-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  word-break: break-word;
}
.pm-detail-status {
  flex: 0 0 auto;
  min-width: 120px;
  font-size: 13px;
}
.pm-detail-desc {
  margin-top: 12px;
  font-size: 13px;
}
.pm-detail-desc-label {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
}
.pm-detail-desc-body {
  color: #334155;
  line-height: 1.55;
}
.pm-detail-thread {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  border-top: 1px solid #eef2f7;
}
.pm-thread-heading {
  margin: 0;
  padding: 10px 12px 0;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
}
.pm-grid {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) minmax(260px, 1.4fr);
  gap: 14px;
  align-items: stretch;
}
@media (max-width: 1024px) {
  .pm-grid {
    grid-template-columns: 1fr 1fr;
  }
  .pm-panel--detail {
    grid-column: 1 / -1;
  }
}
@media (max-width: 640px) {
  .pm-grid {
    grid-template-columns: 1fr;
  }
  .pm-panel--detail {
    grid-column: auto;
  }
}
.pm-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.pm-panel-title {
  margin: 0;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 12px 12px 0 0;
}
.pm-panel-body {
  flex: 1 1 auto;
  min-height: 120px;
  max-height: min(52vh, 520px);
  overflow-y: auto;
  padding: 6px 0;
}
.pm-panel--detail .pm-panel-body {
  max-height: min(60vh, 640px);
  display: flex;
  flex-direction: column;
}
.pm-ch-item,
.pm-ag-item {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-bottom: 1px solid #f1f5f9;
}
.pm-ch-item:last-child,
.pm-ag-item:last-child {
  border-bottom: none;
}
.pm-ch-item--active,
.pm-ag-item--active {
  background: #eff6ff;
}
.pm-ch-item-main,
.pm-ag-item-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  margin: 0;
  border: none;
  background: transparent;
  text-align: left;
  font: inherit;
  color: #0f172a;
  cursor: pointer;
  min-width: 0;
}
.pm-ch-item-main:hover,
.pm-ag-item-main:hover {
  background: rgba(59, 130, 246, 0.06);
}
.pm-ch-title,
.pm-ag-title {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.35;
  word-break: break-word;
}
.pm-ch-snippet {
  font-size: 12px;
  color: #64748b;
  line-height: 1.35;
  word-break: break-word;
}
.pm-icon-btn {
  flex: 0 0 36px;
  width: 36px;
  align-self: stretch;
  border: none;
  border-left: 1px solid #f1f5f9;
  background: #fff;
  color: #94a3b8;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.pm-icon-btn:hover {
  color: #b91c1c;
  background: #fef2f2;
}
.pm-empty {
  margin: 0;
  padding: 16px 12px;
  font-size: 13px;
  color: #64748b;
  text-align: center;
}
.pm-add-box {
  padding: 12px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fafbfc;
  border-radius: 0 0 12px 12px;
}
.pm-add-title {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
}
.pm-input,
.pm-textarea {
  width: 100%;
  box-sizing: border-box;
}
.pm-thread-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}
.pm-thread {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pm-msg {
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
}
.pm-msg-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 6px;
  font-size: 12px;
}
.pm-msg-head-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.pm-msg-head-aside {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
}
.pm-msg-author {
  font-weight: 700;
  color: #0f172a;
}
.pm-msg-time {
  color: #94a3b8;
  margin-right: 0;
  white-space: nowrap;
}
.pm-msg-del {
  margin-left: 0;
  font-size: 12px;
  min-width: 0;
  width: auto;
  padding: 1px 6px;
  border-radius: 6px;
  font-weight: 600;
}
.pm-msg-edit {
  margin-left: 0;
  font-size: 12px;
  min-width: 0;
  width: auto;
  padding: 1px 6px;
  border-radius: 6px;
  font-weight: 600;
}
.pm-msg-body--editing {
  margin-top: 4px;
}
.pm-msg-edit-textarea {
  width: 100%;
  box-sizing: border-box;
  margin-top: 2px;
  resize: vertical;
  min-height: 5rem;
}
.pm-msg-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}
.pm-assignee-avatar--msg {
  width: 28px;
  height: 28px;
}
.pm-assignee-avatar--msg.pm-assignee-avatar--fallback {
  font-size: 12px;
}
.pm-msg-body {
  font-size: 13px;
  line-height: 1.5;
  color: #334155;
  word-break: break-word;
}
.pm-compose {
  flex: 0 0 auto;
  padding: 10px 12px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #f8fafc;
  border-radius: 0 0 12px 12px;
}
.pm-compose-input {
  resize: vertical;
  min-height: 4.5rem;
}

/* ToDo: @メンション補完ポップオーバー */
.pm-mention-popover {
  position: fixed;
  z-index: 12000;
  box-sizing: border-box;
  max-height: min(280px, calc(100vh - 16px));
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  font-size: 13px;
}
.pm-mention-popover-head {
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.pm-mention-popover-list {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(240px, calc(100vh - 120px));
  padding: 4px 0;
}
.pm-mention-empty {
  padding: 12px 14px;
  color: #94a3b8;
  font-size: 12px;
}
button.pm-mention-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 12px;
  border: none;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: #1e293b;
}
button.pm-mention-item:hover,
button.pm-mention-item.is-active {
  background: #f1f5f9;
}
button.pm-mention-item.is-active {
  outline: none;
}
.pm-mention-item-name {
  font-weight: 500;
}

/* ToDo管理: 白枠（pj-page-wrap）をメインエリアの横幅いっぱいに */
.pm-page {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.pm-page .pj-page-wrap {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* ToDo管理: テーマ一覧テーブル */
.pm-page--proj-list .pm-proj-toolbar {
  padding: 0 24px;
}
.pm-page--proj-list .pm-proj-table-wrap.list-card {
  margin: 0 24px 24px;
}
.pm-proj-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.pm-proj-keyword {
  flex: 1 1 220px;
  max-width: 420px;
}
.pm-proj-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
button.pm-proj-action-btn {
  font-family: inherit;
}
.pm-proj-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.3;
}
.pm-proj-action-btn:hover {
  background: #e2e8f0;
  border-color: #cbd5e1;
}
.pm-proj-action-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.45);
}
.pm-proj-new.pm-add-box:not(.pm-proj-new--open) {
  display: none !important;
}
.pm-proj-table-wrap {
  border-radius: 12px;
  overflow: hidden;
}
.pm-proj-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.pm-proj-table th,
.pm-proj-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: top;
}
.pm-proj-table th {
  text-align: left;
  background: #f8fafc;
  font-weight: 700;
  color: #334155;
  border-bottom: 1px solid #e2e8f0;
}
.pm-proj-td-snip {
  color: #64748b;
  font-size: 12px;
  max-width: 360px;
}
.pm-proj-td-num {
  text-align: right;
  white-space: nowrap;
  width: 72px;
  color: #334155;
}
.pm-proj-td-date {
  white-space: nowrap;
  width: 100px;
  font-size: 12px;
  color: #64748b;
}
.pm-proj-td-actions {
  text-align: right;
  white-space: nowrap;
  width: auto;
  min-width: 9.5rem;
}
.pm-proj-title-link {
  font-weight: 600;
  color: #1d4ed8;
  text-decoration: none;
}
.pm-proj-title-link:hover {
  text-decoration: underline;
}
.pm-proj-empty-cell {
  padding: 28px 16px;
  text-align: center;
}

/* 課題ボード（詳細は別画面 ?issue=） */
.pm-page--issue-board .pj-page-wrap > .pm-board-head,
.pm-page--issue-board .pj-page-wrap > .pm-kanban-outer {
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}
.pm-page--issue-board .pj-page-wrap > .pm-board-head {
  padding-top: 18px;
}
.pm-page--issue-board .pj-page-wrap > .pm-kanban-outer {
  padding-bottom: 24px;
}
.pm-board-head {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pm-board-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.pm-board-head-row > .inline-btn[data-pm-toggle-issue-form] {
  flex-shrink: 0;
}
.pm-back-proj {
  align-self: flex-start;
}
.pm-board-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
}
.pm-board-desc {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: #475569;
}
.pm-board-hint {
  margin: 0;
  font-size: 12px;
  color: #64748b;
}
.pm-issue-add-form:not(.pm-issue-add-form--open) {
  display: none !important;
}
.pm-issue-add-form.pm-issue-add-form--open {
  margin-top: 4px;
}
.pm-kanban-outer--solo {
  width: 100%;
}
.pm-kanban-outer {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* 課題ボード: pm-panel の枠線・影・背景を付けず、見出し下の罫線も出さない */
.pm-kanban-outer.pm-panel {
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.pm-kanban-outer .pm-panel-title.pm-kanban-title {
  padding: 0 0 10px;
  border-bottom: none;
  background: transparent;
  border-radius: 0;
}
.pm-kanban-title {
  flex: 0 0 auto;
}
.pm-kanban-scroll {
  flex: 1 1 auto;
  overflow-x: auto;
  overflow-y: hidden;
  min-height: 220px;
  max-height: min(52vh, 560px);
}
.pm-kanban {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 0 10px 10px;
  min-width: min-content;
}
/* 単独の課題ボード: ステータス列を親幅いっぱいに均等拡張（max-width による右余白を解消） */
.pm-kanban-outer--solo .pm-kanban {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0 0 10px;
}
.pm-kanban-outer--solo .pm-kan-col {
  flex: initial;
  min-width: 0;
  max-width: none;
  width: auto;
}
.pm-kan-col {
  flex: 1 1 200px;
  min-width: 200px;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}
.pm-kan-col-head {
  margin: 0;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: #fff;
  border-radius: 10px 10px 0 0;
  color: #0f172a;
}
.pm-kan-col-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.pm-kan-col-head--open .pm-kan-col-dot {
  background: #64748b;
}
.pm-kan-col-head--doing .pm-kan-col-dot {
  background: #2563eb;
}
.pm-kan-col-head--done .pm-kan-col-dot {
  background: #16a34a;
}
.pm-kan-col-head--hold .pm-kan-col-dot {
  background: #d97706;
}
.pm-kan-col-head--na .pm-kan-col-dot {
  background: #94a3b8;
}
.pm-kan-count {
  margin-left: auto;
  font-weight: 600;
  color: #64748b;
}
.pm-kan-col-body {
  flex: 1 1 auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  max-height: min(44vh, 480px);
}
.pm-kan-card {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #fff;
}
.pm-kan-card.pm-kan-card--backlog {
  flex-direction: column;
  align-items: stretch;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.pm-kan-card-bl-inner {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}
.pm-kan-card-bl-open {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 36px 10px 12px;
  margin: 0;
  border: none;
  background: transparent;
  text-align: left;
  font: inherit;
  cursor: pointer;
  border-radius: 9px;
  min-width: 0;
}
.pm-kan-card-bl-open:hover {
  background: rgba(59, 130, 246, 0.05);
}
.pm-kan-card-bl-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: nowrap;
  min-height: 22px;
  padding-right: 2px;
}
.pm-kan-card-bl-top .pm-kan-card-cat {
  flex-shrink: 0;
  margin-top: 1px;
}
.pm-kan-card-cat {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
}
.pm-kan-card-cat--mid {
  background: #0d9488;
}
.pm-kan-card-cat--high {
  background: #ea580c;
}
.pm-kan-card-cat--urgent {
  background: #dc2626;
}
.pm-kan-card-cat--low {
  background: #94a3b8;
}
.pm-kan-card-key {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.02em;
}
.pm-kan-card-bl-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.45;
  word-break: break-word;
}
.pm-kan-card-bl-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  min-width: 0;
}
.pm-kan-card-bl-assignee {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
.pm-kan-card-bl-date {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
}
.pm-kan-card-bl-date-empty {
  color: #94a3b8;
}
.pm-kan-card-dd {
  position: absolute;
  top: 4px;
  right: 2px;
  z-index: 2;
}
.pm-kan-card-dd-sum {
  list-style: none;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  color: #64748b;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pm-kan-card-dd-sum::-webkit-details-marker {
  display: none;
}
.pm-kan-card-dd-sum:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.pm-kan-card-dd-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 112px;
  padding: 4px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
}
.pm-kan-card-dd-del {
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  color: #b91c1c;
}
.pm-kan-card-dd-del:hover {
  background: #fef2f2;
}
.pm-kan-card-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 8px 10px;
  margin: 0;
  border: none;
  background: transparent;
  text-align: left;
  font: inherit;
  cursor: pointer;
  min-width: 0;
}
.pm-kan-card-main:hover {
  background: rgba(59, 130, 246, 0.06);
}
.pm-kan-card-title {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  word-break: break-word;
}
.pm-kan-card-sn {
  font-size: 11px;
  color: #64748b;
  line-height: 1.35;
}
.pm-kan-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #f1f5f9;
}
.pm-kan-card-meta-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}
.pm-kan-card-asg {
  font-size: 11px;
  font-weight: 600;
  color: #334155;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pm-kan-card-asg-empty,
.pm-kan-card-due-empty {
  color: #94a3b8;
  font-weight: 500;
}
.pm-kan-card-due {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
}
.pm-assignee-avatar {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e2e8f0;
  border: 1px solid #cbd5e1;
}
.pm-assignee-avatar--kanban {
  width: 24px;
  height: 24px;
}
.pm-assignee-avatar--hero {
  width: 36px;
  height: 36px;
}
.pm-assignee-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pm-assignee-avatar--fallback {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  background: #e2e8f0;
  border: none;
}
.pm-assignee-avatar--hero.pm-assignee-avatar--fallback {
  font-size: 14px;
}
.pm-kan-card--dragging {
  opacity: 0.55;
}
.pm-kan-col-body--drag-over {
  outline: 2px dashed #93c5fd;
  outline-offset: -2px;
  border-radius: 8px;
  background: rgba(59, 130, 246, 0.04);
}
.pm-agenda-create-modal .composer-body {
  max-height: min(70vh, 560px);
  overflow-y: auto;
}
.pm-agenda-modal-hint {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: #64748b;
}
.pm-kan-card-del {
  flex: 0 0 32px;
  width: 32px;
  border-left: 1px solid #f1f5f9;
}
.pm-empty--tight {
  padding: 8px;
  margin: 0;
  font-size: 12px;
}
.pm-add-agenda-bar {
  border-top: 1px solid #e2e8f0;
  border-radius: 0 0 12px 12px;
}

/* 共通ローディング（cat_01 + CSS keyframes）→ loading-cat.css */

.section--fp-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 44vh;
  padding: 24px 16px;
  background: #fff;
}
.section-card--fp-loading {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 280px;
  border-radius: 16px;
  border: none !important;
  box-shadow: none !important;
  background: #fff !important;
}

.pm-page--loading .pj-page-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42vh;
  padding: 32px 24px;
}
.pm-loading-card {
  text-align: center;
  padding: 28px 36px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  max-width: 380px;
}
.pm-loading-card--fp-cat {
  padding: 40px 32px 44px;
  max-width: min(100%, 28rem);
  border: none;
  box-shadow: none;
  background: #fff;
}
.pm-proj-empty-cell--loading {
  padding: 20px 12px 24px;
  vertical-align: middle;
}

/* GET /api/projects 等の heavy 取得中（一覧・ダッシュボード） */
.pj-td-heavy-loading {
  text-align: center;
  vertical-align: middle;
  padding: 28px 16px;
}
.cl-board-empty--heavy-load {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 220px;
  padding: 24px 16px;
  box-sizing: border-box;
}
.cost-empty--heavy-load {
  text-align: center;
  vertical-align: middle;
  padding: 28px 16px;
}
.fp-heavy-load-section {
  margin: 0 0 16px;
}
.fp-heavy-load-section--rankings {
  padding: 32px 16px 40px;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fp-heavy-load-section .fp-lc {
  margin: 0 auto;
  max-width: 28rem;
}
.app-mgmt-heavy-load-only {
  padding: 32px 28px 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 240px;
  box-sizing: border-box;
}

.pm-thread-load-msg--cat {
  margin: 0;
  padding: 12px 10px 16px;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px dashed #cbd5e1;
}
.pm-issue-attach-loading-cat {
  padding: 8px 0 4px;
}
.pm-thread-load-msg {
  margin: 0;
  padding: 24px 16px;
  text-align: center;
  font-size: 14px;
  color: #64748b;
  font-weight: 600;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px dashed #cbd5e1;
}
.pm-compose--pending {
  padding: 16px 14px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
}
.pm-compose-pending-note {
  margin: 0;
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
}

/* 課題詳細（やり取り）単独ページ — 内側余白 */
.pm-page--issue-detail .pj-page-wrap {
  padding: 18px 24px 24px;
}
.pm-issue-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 28px;
  margin: 0 0 18px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
@media (max-width: 720px) {
  .pm-issue-summary {
    grid-template-columns: 1fr;
  }
}
.pm-issue-sum-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pm-issue-sum-row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 8px 14px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid #eef2f7;
  font-size: 13px;
}
.pm-issue-sum-col .pm-issue-sum-row:last-child {
  border-bottom: none;
}
.pm-issue-sum-label {
  color: #64748b;
  font-weight: 600;
  font-size: 12px;
}
.pm-issue-sum-val {
  color: #0f172a;
  font-weight: 600;
  word-break: break-word;
}
.pm-issue-sum-val--muted {
  color: #94a3b8;
  font-weight: 500;
}
.pm-issue-sum-key {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.pm-issue-sum-pri {
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.pm-issue-sum-pri-box {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid transparent;
}
.pm-issue-sum-pri-box--mid {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}
.pm-issue-sum-pri-box--high {
  background: #fff7ed;
  color: #c2410c;
  border-color: #fed7aa;
}
.pm-issue-sum-pri-box--urgent {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}
.pm-issue-sum-pri-box--low {
  background: #f8fafc;
  color: #64748b;
  border-color: #e2e8f0;
}
.pm-issue-detail-body {
  padding: 0 !important;
}
.pm-issue-split {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
}
@media (min-width: 901px) {
  .pm-issue-split {
    min-height: min(58vh, 620px);
  }
}
@media (max-width: 900px) {
  .pm-issue-split {
    grid-template-columns: 1fr;
    min-height: 0;
  }
}
.pm-issue-col-left {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  padding: 14px 16px 16px;
  box-sizing: border-box;
  background: #fafbfc;
  border-right: 1px solid #e2e8f0;
  overflow-y: auto;
}
@media (min-width: 901px) {
  .pm-issue-col-left .pm-issue-summary {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 12px;
  }
}
.pm-issue-side-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: calc(9rem + 5.5rem);
  justify-content: flex-start;
}
@media (max-width: 900px) {
  .pm-issue-col-left {
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
  }
}
.pm-thread--issue-detail {
  flex: 1 1 auto;
  min-height: 200px;
  max-height: none;
  overflow-y: auto;
  padding: 12px 14px 12px;
}
.pm-issue-col-right {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  min-height: 0;
  padding: 0;
  background: #fff;
}
.pm-issue-subpanel-h {
  margin: 0;
  padding: 12px 16px 8px;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  flex-shrink: 0;
}
.pm-issue-subpanel-h--thread {
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
}
.pm-issue-attr-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
}
.pm-issue-thread-stack {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.pm-issue-attach-card {
  margin: 2px 0 0;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-sizing: border-box;
}
.pm-issue-attach-card-title {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
}
.pm-issue-attach-hint {
  margin: 0 0 10px;
  font-size: 11px;
  line-height: 1.45;
  color: #64748b;
}
.pm-issue-attach-empty {
  margin: 0 0 10px;
  font-size: 12px;
  color: #94a3b8;
}
.pm-attach-uploading {
  margin: 0 0 8px;
  font-size: 12px;
  color: #0d9488;
  font-weight: 600;
}
.pm-attach-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.pm-attach-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px 12px;
  padding: 5px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  min-width: 0;
}
.pm-attach-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: #1d4ed8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pm-attach-date {
  flex: 0 0 auto;
  font-size: 12px;
  color: #64748b;
  white-space: nowrap;
}
.pm-attach-btn {
  flex-shrink: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
  cursor: pointer;
  font-family: inherit;
}
.pm-attach-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}
.pm-attach-btn--dl {
  min-width: 2.25rem;
  padding-left: 6px;
  padding-right: 6px;
  color: #1d4ed8;
  border-color: #bfdbfe;
  background: #eff6ff;
}
.pm-attach-btn--dl:hover {
  background: #dbeafe;
  border-color: #93c5fd;
}
.pm-attach-btn--del {
  color: #b45309;
  border-color: #fed7aa;
  background: #fffbeb;
}
.pm-attach-btn--del:hover {
  background: #ffedd5;
  border-color: #fdba74;
}
.pm-attach-upload {
  margin-top: 4px;
}
.pm-attach-file-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.pm-attach-file-input {
  position: absolute;
  width: 0.01px;
  height: 0.01px;
  opacity: 0;
  overflow: hidden;
  z-index: -1;
}
.pm-file-drop-target.pm-file-drop-hover {
  outline: 2px dashed #0d9488;
  outline-offset: 2px;
  background: #f0fdfa;
}
.pm-compose-attach-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.pm-compose-attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 999px;
  font-size: 12px;
  color: #065f46;
  max-width: 100%;
}
.pm-compose-attach-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 14rem;
}
.pm-compose-attach-chip-x {
  border: none;
  background: transparent;
  padding: 0 2px;
  cursor: pointer;
  color: #047857;
  font-size: 14px;
  line-height: 1;
}
.pm-msg-files {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #eef2f7;
}
.pm-msg-files--readonly {
  border-top-color: #e2e8f0;
}
.pm-attach-list--msg {
  margin-bottom: 6px;
}
.pm-msg-attach-actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
/* label と input を分離（.inline-btn の overflow:hidden 内に file input を置かない） */
.pm-msg-attach-actions > input[type="file"].pm-attach-file-input--msg-bind {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
  opacity: 0;
  z-index: 0;
}
.pm-msg-attach-add {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  min-width: 0;
  overflow: visible;
}
.pm-msg-attach-add.inline-btn {
  overflow: visible;
}
.pm-issue-side-hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #64748b;
}
.pm-issue-fields--stack {
  margin: 0;
  flex: 0 0 auto;
  min-height: 9rem;
}
.pm-issue-col-left .pm-issue-field-row {
  grid-template-columns: 5.75rem minmax(0, 1fr);
  gap: 10px 12px;
}
.pm-detail-desc--issue-side {
  margin: 0;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #e8ebf0;
  border-radius: 10px;
  font-size: 13px;
}
.pm-compose--backlog {
  flex-shrink: 0;
  padding: 12px 14px 14px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 0;
}
.pm-compose--backlog .pm-compose-input {
  min-height: 9rem;
  font-size: 14px;
  line-height: 1.5;
}
.pm-compose-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}
.pm-compose-submit {
  background: #0d9488 !important;
  border-color: #0f766e !important;
  color: #fff !important;
}
.pm-compose-submit:hover {
  filter: brightness(1.06);
}
.pm-issue-detail-head {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.pm-back-board {
  align-self: flex-start;
}
.pm-issue-breadcrumb {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}
.pm-issue-detail-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  word-break: break-word;
}
.pm-issue-hero-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  max-width: 100%;
  box-sizing: border-box;
}
.pm-issue-hero-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pm-issue-hero-due {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
}
.pm-issue-hero-due-empty {
  color: #94a3b8;
  font-weight: 500;
}
.pm-issue-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 10px 0 0;
  padding: 0;
}
.pm-issue-meta-item {
  font-size: 11px;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 4px 10px;
}
.pm-issue-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
.pm-issue-field-row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  align-items: center;
  gap: 10px 12px;
}
.pm-issue-field-label {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  margin: 0;
}
.pm-issue-field-control .dform-select,
.pm-issue-field-control .pj-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.pm-issue-completed-note {
  margin: 4px 0 0;
  font-size: 11px;
  color: #64748b;
}
.pm-msg--system {
  background: #f8fafc;
  border-radius: 8px;
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
}
.pm-msg--system .pm-msg-body {
  color: #334155;
  font-size: 13px;
}
.pm-msg-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 6px;
  vertical-align: middle;
}
.pm-msg-tag--system {
  background: #e2e8f0;
  color: #475569;
}
.pm-panel--issue-full .pm-panel-body {
  max-height: min(90vh, 960px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pm-issue-detail-body.pm-thread-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.pm-detail-head-row--issue {
  justify-content: flex-end;
}
.pm-detail-head-row--issue .pm-detail-status {
  min-width: 140px;
}