/* Page headers */
.page-header {
  padding: 2.5rem 0 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.page-title {
  font-size: 1.6rem;
  font-weight: 600;
}

.page-subtitle {
  color: var(--text-gray);
  font-weight: 400;
  /* Standardized to 400 */
  font-size: 1rem;
}

.page-title-area {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.breadcrumb-area {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.breadcrumb-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* Octon-dashboard_AI standard: tighter crumb spacing. */
  row-gap: 0;
  column-gap: 0.28rem;
  font-size: 0.8rem;
  color: var(--text-gray);
  font-weight: 400;
}

.breadcrumb-nav a {
  color: var(--text-gray);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

.breadcrumb-nav a:hover {
  opacity: 0.72;
}

.breadcrumb-separator {
  color: var(--text-gray);
  font-size: 0.65rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.breadcrumb-nav > span:last-child,
.breadcrumb-nav > span:not(.breadcrumb-separator) {
  white-space: nowrap;
}

.page-header-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  max-width: 100%;
}

.page-header-title-row h1 {
  margin-bottom: 0;
}

.page-header-more-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: white;
  color: var(--text-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  cursor: pointer;
  box-shadow: none;
  transition: all 0.2s;
  transform: translateY(-1px);
}

.page-header-more-btn:hover {
  border-color: var(--vivid-sky);
  color: var(--vivid-sky);
  background: #F8FAFC;
}

.page-header-more-btn i {
  font-size: 0.95rem;
  line-height: 1;
}

.page-header-simple {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  position: relative;
  padding: 0;
  overflow: visible;
}

/* Project hero header */
.project-hero-header {
  color: white;
  margin-bottom: 1rem;
}

.project-hero-breadcrumb {
  width: 100%;
  padding: 0.4rem 0.4rem;
  border-radius: 20px;
  background: var(--accent-blue);
  margin-bottom: 0;
}

.project-hero-main {
  margin-top: 0.4rem;
  /* Octon-dashboard_AI standard (case-hero-main): 0.6rem vertical padding. */
  padding: 0.6rem 1rem;
  border-radius: 20px;
  background: var(--vivid-sky);
}

.header-project-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 1);
  flex-shrink: 0;
  margin-right: 0.55rem;
  vertical-align: middle;
}

.project-hero-folder-icon {
  margin-right: 0.55rem;
  color: #FFFFFF;
  font-size: calc(1em - 4px);
  vertical-align: -0.02em;
  flex-shrink: 0;
}

.project-hero-copy {
  min-width: 0;
}

.project-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0;
  font-weight: 700;
  width: fit-content;
  padding: 0.2rem 0.6rem 0.2rem 0.4rem;
  border-radius: 999px;
  position: relative;
  isolation: isolate;
}

.project-hero-kicker::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--vivid-sky-dark);
  opacity: 0.5;
  z-index: -1;
}

.project-hero-kicker-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(255, 255, 255, 1);
  flex-shrink: 0;
}

.project-hero-title-row {
  gap: 0.5rem;
}

.project-hero-header .header-left h1 {
  /* Octon-dashboard_AI standard (case-hero-header h1): 1.4rem / 0.3rem margins / lh 1.2. */
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0.3rem 0;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  line-height: 1.2;
}

.project-hero-header .page-header-subtitle {
  color: #FFFFFF;
}

.project-hero-header .breadcrumb-nav,
.project-hero-header .breadcrumb-nav a,
.project-hero-header .breadcrumb-separator {
  color: #FFFFFF;
}

.project-hero-header .btn-back-circle {
  width: 20px;
  height: 20px;
  font-size: 0.6rem;
  background: white;
  border-color: var(--border-color);
  color: var(--text-dark);
}

.project-hero-header .btn-back-circle:hover {
  background: #F8FAFC;
  border-color: var(--vivid-sky);
  color: var(--vivid-sky);
}

.project-hero-main .page-header-more-btn {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.28);
  color: #FFFFFF;
}

.project-hero-main .page-header-more-btn:hover {
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.38);
  color: #FFFFFF;
}

/* Alerts */
.alert-banner {
  background: white;
  padding: 1.25rem 2rem;
  border-radius: var(--border-radius-md);
  margin-bottom: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 2px solid var(--vivid-sky-soft);
}

.alert-content {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.alert-text {
  font-size: 1rem;
  font-weight: 600;
}

.alert-text b {
  color: var(--accent-red);
  font-size: 1.15rem;
}

/* Buttons */
.btn-dark {
  background: var(--deep-navy);
  color: white;
  padding: 0.8rem 2rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  line-height: 1;
}

.btn-dark:hover {
  transform: scale(1.03);
  filter: brightness(1.2);
}

.btn-dark:active {
  transform: scale(0.98);
}

.btn-new-project {
  background: var(--vivid-sky);
  color: white;
  padding: 0.7rem 1.5rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
}

.btn-new-project:hover {
  background: var(--vivid-sky-dark);
}

.btn-back-circle {
  width: 34px;
  height: 34px;
  background: white;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dark);
  text-decoration: none;
  font-size: 0.85rem;
  transition: all 0.2s;
  line-height: 1;
}

.btn-back-circle:hover {
  border-color: var(--vivid-sky);
  color: var(--vivid-sky);
  background: #F8FAFC;
}

.btn-outline-danger {
  background: white;
  border: 1px solid var(--accent-red);
  color: var(--accent-red);
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s;
  line-height: 1;
}

.btn-outline-danger:hover {
  background: var(--accent-red-light);
}

/* Mascot Guide */
.page-mascot-guide {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 0;
  position: relative;
  z-index: 1;
}

.mascot-img-wrap {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mascot-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mascot-bubble {
  background: var(--white);
  border: 3px solid var(--border-color);
  color: var(--text-dark);
  font-family: "M PLUS 1p", "Noto Sans JP", sans-serif;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.4;
  position: relative;
}

.mascot-bubble::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  border-right: 14px solid var(--border-color);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

.mascot-bubble::after {
  content: '';
  position: absolute;
  top: 50%;
  right: calc(100% - 1px);
  transform: translateY(-50%);
  border-right: 8px solid var(--white);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

/* Badges */
.badge,
.badge-status,
.status-pill-gray,
.status-pill-on {
  padding: var(--badge-pill-padding);
  border-radius: var(--badge-pill-radius);
  font-size: var(--badge-pill-font-size);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: var(--badge-pill-line-height);
  white-space: nowrap;
  min-width: var(--badge-pill-min-width);
  text-align: center;
}

.status-pill-gray {
  background: var(--surface-soft);
  color: var(--text-gray);
  border: 1px solid var(--border-color);
}

/* Active twin of .status-pill-gray: same shape, green so an enabled state
   (reminder ON) reads at a glance instead of blending into the muted pills.
   Green matches the ON badge of the legacy step tables. */
.status-pill-on {
  background: #EAFDF0;
  color: #0EB254;
  border: 1px solid rgba(14, 178, 84, 0.32);
}

.step-chip {
  display: inline-block;
  min-width: 0;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: var(--vivid-sky-soft);
  color: var(--vivid-sky-dark);
  border: 1px solid rgba(0, 161, 233, 0.22);
}

.badge-warning {
  background-color: var(--accent-red-light);
  color: var(--accent-red);
  border: 1px solid #F8C7C7;
}

.badge-caution {
  background-color: #FFF7ED;
  color: #F59E0B;
  border: 1px solid #F4C57E;
}

.badge-danger {
  background-color: var(--accent-red);
  color: white;
  font-weight: 600;
}

.badge-pulse-alert {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  overflow: visible;
  isolation: isolate;
  animation: badgePulseGlow 1.8s ease-out infinite;
}

.badge-pulse-alert::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 2px solid rgba(221, 81, 76, 0.55);
  background: rgba(221, 81, 76, 0.12);
  animation: badgePulseAlert 1.8s ease-out infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes badgePulseAlert {
  0% {
    transform: scale(1);
    opacity: 0.75;
  }

  70%,
  100% {
    transform: scale(1.85);
    opacity: 0;
  }
}

@keyframes badgePulseGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(221, 81, 76, 0.3);
  }

  70%,
  100% {
    box-shadow: 0 0 0 12px rgba(221, 81, 76, 0);
  }
}

.badge-submitted {
  background: #EAF6FF;
  color: #1697E6;
  border: 1px solid rgba(22, 151, 230, 0.34);
}

.badge-complete {
  background: #F0FFF6;
  color: #1F9D55;
  border: 1px solid rgba(31, 157, 85, 0.32);
}

.badge-unsubmitted {
  background: #FFF5F5;
  color: var(--accent-red);
  border: 1px solid #FFDADA;
}

/* Progress cards */
.progress-card {
  background: white;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  min-height: 180px;
  /* Increased slightly for 2-line titles */
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.progress-card:hover {
  background: #F7FAFC;
  /* Light gray background */
}

.progress-card:hover .p-card-arrow {
  background: var(--vivid-sky) !important;
}

.progress-card:hover .p-card-arrow i {
  color: white !important;
}

.progress-card.active {
  border: 1.5px solid var(--vivid-sky);
}

.p-card-header {
  display: flex;
  align-items: stretch;
  /* Grow bar to match text height */
  gap: 12px;
  margin-bottom: 1rem;
}

.p-card-accent {
  width: 6px;
  height: 24px;
  border-radius: 10px;
  flex-shrink: 0;
}

.p-accent-blue {
  background: var(--vivid-sky);
}

.p-accent-green {
  background: var(--success-green);
}

.p-accent-orange {
  background: #FFA726;
}

.p-card-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-dark);
  line-height: 1.2;
}

.p-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.p-card-stats {
  display: flex;
  flex-direction: column;
}

.p-card-label {
  font-size: 0.75rem;
  color: var(--gray-200);
  font-weight: 600;
  margin-bottom: 4px;
}

.p-card-value {
  font-size: 2rem;
  font-weight: 600;
  /* Standardized to 700 from 800 */
  color: #2D3748;
  line-height: 1;
}

.p-card-value span {
  font-size: 14px;
  font-weight: 600;
  margin-left: 4px;
}

.p-card-arrow {
  width: 36px;
  height: 36px;
  background: #F7FAFC;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vivid-sky);
  transition: all 0.2s;
}

.progress-card:hover .p-card-arrow {
  background: var(--vivid-sky-light);
}

/* Tooltips */
.tooltip-right::before {
  border-width: 10px 15px 10px 0;
  border-color: transparent white transparent transparent;
  left: -15px;
  top: 30px;
}

.tooltip-left::before {
  border-width: 10px 0 10px 15px;
  border-color: transparent transparent transparent white;
  right: -15px;
  top: 30px;
}

.tooltip-top::before {
  border-width: 15px 10px 0 10px;
  border-color: white transparent transparent transparent;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
}

.tooltip-bottom::before {
  border-width: 0 10px 15px 10px;
  border-color: transparent transparent white transparent;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
}

/* Generic Hover Tooltips */
[data-tooltip] {
  position: relative;
  z-index: 0;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% - 8px);
  /* Overlap icon */
  left: 50%;
  transform: translateX(-50%);
  background: #1A202C;
  color: white;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12px;
  /* 12px as requested */
  font-weight: 400;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: none;
  z-index: 1000;
}

[data-tooltip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% - 14px);
  /* Triangle below tooltip */
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #1A202C transparent transparent transparent;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: none;
  z-index: 1000;
}

[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
  opacity: 1;
  visibility: visible;
}

[data-tooltip]:hover {
  z-index: 30;
}

[data-tooltip]:hover::after {
  bottom: calc(100% - 4px);
  /* Slightly move up on hover but still low */
}

[data-tooltip]:hover::before {
  bottom: calc(100% - 10px);
}

.tooltip-top[data-tooltip]::after {
  bottom: calc(100% + 2px);
}

.tooltip-top[data-tooltip]::before {
  display: none;
}

.tooltip-top[data-tooltip]:hover::after {
  bottom: calc(100% + 4px);
}

/* Reminder and Toggle Components */
.reminder-cell {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--text-gray);
  font-size: 14px;
  white-space: nowrap;
}

.reminder-on {
  height: 24px;
  min-width: 40px;
  padding: 0 0.75rem;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  background: var(--success-green-soft);
  color: var(--success-green-dark);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}

.reminder-on i {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.reminder-on.is-off {
  background: #EDF2F7;
  color: var(--text-gray);
}

.toggle-switch {
  /* Never let a long helper text in .settings-toggle-box squeeze the switch:
     it is a flex item next to the (shrinkable) label column, so without this
     it collapses to a sliver whenever the description overflows one line. */
  flex: none;
  width: 36px;
  height: 24px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  padding: 3px;
  background: #E2E8F0;
  border: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background-color 0.2s, box-shadow 0.2s;
}

.toggle-switch::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.toggle-switch.is-on {
  justify-content: flex-end;
  background: var(--vivid-sky);
}

.toggle-switch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 161, 233, 0.16);
}

/* Common Tabs */
.app-tabs {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
  background: transparent;
}

.app-tab {
  min-height: 48px;
  padding: 0 1.15rem;
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  background: var(--tab-bg);
  color: #7A8598;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.app-tab i {
  font-size: 0.95rem;
}

.app-tab:hover {
  background: var(--tab-bg-hover);
  color: var(--text-dark);
}

.app-tab.active,
.app-tab[aria-selected="true"] {
  background: white;
  color: var(--vivid-sky);
  position: relative;
}

.app-tab.active::after,
.app-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: white;
}

.app-tab--pill {
  min-height: 38px;
  padding: 0 0.95rem;
  border-radius: 999px;
  background: #F8FAFC;
  border: 1px solid var(--border-color);
  color: #526071;
  font-size: 0.85rem;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.app-tab--pill:hover {
  background: #EFF6FF;
  border-color: #BFDBFE;
  color: var(--text-dark);
}

.app-tab--pill.active,
.app-tab--pill.is-active,
.app-tab--pill[aria-selected="true"] {
  background: var(--vivid-sky-soft);
  border-color: var(--vivid-sky);
  color: var(--vivid-sky-dark);
}

.app-tab--pill.active::after,
.app-tab--pill.is-active::after,
.app-tab--pill[aria-selected="true"]::after {
  display: none;
}

/* Common Settings Components */
.settings-toggle-box,
.step-form-toggle-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  background: #F8FAFC;
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.settings-toggle-box.is-active,
.step-form-toggle-box.is-active {
  background: #EEF8FF;
  border-color: #BFE3FB;
  box-shadow: inset 0 0 0 1px rgba(0, 161, 233, 0.06);
}

.settings-toggle-content,
.step-form-toggle-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.settings-helper,
.step-form-helper {
  margin-top: 0;
  color: var(--text-gray);
  font-size: 0.92rem;
  line-height: 1.6;
}

.settings-section,
.step-config-section {
  background: white;
  border: 3px solid var(--border-color);
  border-radius: 16px;
  padding: 1rem;
  margin-bottom: 1.4rem;
}

.settings-soft-block,
.step-soft-block {
  background: var(--workspace-bg);
  border-radius: 14px;
  padding: 1.15rem 1.2rem;
}

.settings-soft-block + .settings-soft-block,
.step-soft-block + .step-soft-block {
  margin-top: 1.2rem;
}

.settings-block-title,
.step-block-title {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 1rem;
}

.settings-subpanel,
.step-config-subpanel {
  background: #FFFFFF;
  border-radius: 14px;
  padding: 1rem;
}

.settings-subpanel.is-disabled,
.step-config-subpanel.is-disabled {
  opacity: 0.42;
}

.tag-panel,
.step-tag-panel {
  background: #F3FBF6;
  border: 1px solid #D6EEDC;
  border-radius: 14px;
  padding: 1rem;
  align-self: start;
}

.tag-panel-bottom,
.step-tag-panel-bottom {
  margin-top: 1.25rem;
}

.tag-panel.compact,
.step-tag-panel.compact {
  min-width: 0;
}

.tag-panel.muted,
.step-tag-panel.muted {
  opacity: 0.5;
}

.tag-panel-head,
.step-tag-panel-head {
  margin-bottom: 0.85rem;
}

.tag-panel-head h2,
.step-tag-panel-head h2 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 0.25rem;
}

.tag-panel-head p,
.step-tag-panel-head p {
  color: #6D8A74;
  font-size: 0.82rem;
  line-height: 1.6;
}

.tag-chip-list,
.step-tag-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag-chip,
.step-tag-chip {
  min-height: 30px;
  padding: 0 0.4rem;
  border-radius: 8px;
  background: #E4F3E8;
  color: var(--text-dark);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Sheet-column group + modifier composer inside the tag panel (2026-09-22). */
.step-tag-group {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px dashed #C9E3D0;
}

.step-tag-group-head {
  margin-bottom: 0.6rem;
}

.step-tag-group-head h3 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 0.2rem;
}

.step-tag-group-head p {
  color: #6D8A74;
  font-size: 0.78rem;
  line-height: 1.5;
}

.step-tag-group-help {
  margin: 0.6rem 0 0;
  color: #6D8A74;
  font-size: 0.75rem;
  line-height: 1.6;
}

.tag-panel-note,
.step-tag-panel-note {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  background: #FFF9DB;
}

.tag-panel-note h3,
.step-tag-panel-note h3 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.tag-panel-note h3 i,
.step-tag-panel-note h3 i {
  color: #EAB308;
}

.tag-panel-note p,
.step-tag-panel-note p {
  color: #7C6A2D;
  font-size: 0.84rem;
  line-height: 1.7;
}

@media (max-width: 960px) {
  .settings-toggle-box,
  .step-form-toggle-box {
    padding: 0.9rem 1rem;
  }
}

/* Form Choice Components */
.project-form-choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  padding: 0.1rem 0;
}

.project-form-option {
  position: relative;
  min-height: 44px;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: #F8FAFC;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.project-form-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.project-form-control {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.project-form-control.radio {
  border: 2px solid #718096;
  border-radius: 50%;
  background: white;
}

.project-form-control.radio::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  transition: background-color 0.2s, transform 0.2s;
}

.project-form-control.checkbox {
  border: 2px solid #718096;
  border-radius: 5px;
  background: white;
  color: transparent;
}

.project-form-control.checkbox::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.78rem;
  line-height: 1;
}

.project-form-option:hover {
  border-color: #BFD8F3;
  background: white;
}

.project-form-option input:checked ~ .project-form-control.radio {
  border-color: var(--vivid-sky);
  box-shadow: 0 0 0 3px rgba(0, 161, 233, 0.14);
}

.project-form-option input:checked ~ .project-form-control.radio::after {
  background: var(--vivid-sky);
}

.project-form-option input:checked ~ .project-form-control.checkbox {
  border-color: var(--vivid-sky);
  background: var(--vivid-sky);
  color: white;
}

.project-form-option input:checked ~ span:last-child {
  color: var(--text-dark);
}

/* AI Chat Components */
.ai-assistant-panel {
  background: white;
  border-radius: 20px;
  padding: 0.8rem 1rem;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ai-panel-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 -1rem;
  padding: 0 1rem 0.8rem;
  border-bottom: 1px solid var(--border-color);
  position: relative;
}

.ai-avatar {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.ai-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ai-panel-header h2 {
  font-size: 1.2rem;
  line-height: 1;
  margin-top: 0.3rem;
}

.ai-panel-header p {
  color: var(--text-gray);
  font-size: 0.78rem;
  margin-top: 0.35rem;
}

.ai-panel-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--bg-light);
  color: var(--text-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin-left: auto;
  flex-shrink: 0;
  transition: background-color 0.2s, color 0.2s, transform 0.2s;
}

.ai-panel-close:hover {
  background: #E2E8F0;
  color: var(--deep-navy);
  transform: scale(1.04);
}

.ai-panel-close:active {
  transform: scale(0.96);
}

.ai-chat-thread {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
  overflow-y: auto;
  padding-right: 0.25rem;
  padding-bottom: 2rem;
}

.ai-message {
  max-width: 70%;
  padding: 0.5rem 0.8rem;
  border-radius: 16px;
  font-size: 1rem;
  line-height: 1.5;
}

.ai-message p + ol,
.ai-message p + ul {
  margin-top: 0.5rem;
}

.ai-message ol,
.ai-message ul {
  padding-left: 1.25rem;
}

.ai-message li + li {
  margin-top: 0.2rem;
}

.ai-message-bot {
  width: 100%;
  max-width: 100%;
  padding-right: 0;
  padding-left: 0;
  color: var(--text-dark);
  align-self: flex-start;
}

.ai-message-user {
  background: #F0F4F8;
  color: var(--text-dark);
  align-self: flex-end;
  border-radius: 16px;
}

.ai-message-user.is-single-line {
  border-radius: 999px;
}

.onboarding-message-attachments {
  margin-top: 0.7rem;
  justify-content: flex-end;
  align-self: flex-end;
  max-width: min(100%, 320px);
}

.onboarding-message-attachments .ai-attachment-chip.image {
  width: min(100%, 320px);
  height: auto;
  flex: 0 0 min(100%, 320px);
  border-radius: 16px;
}

.onboarding-message-attachments .ai-attachment-chip.image .ai-attachment-chip-image {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.onboarding-message-attachments .ai-attachment-chip.file {
  width: min(100%, 200px);
}

.ai-prompt-menu {
  position: relative;
}

.ai-prompt-menu summary {
  list-style: none;
  cursor: pointer;
}

.ai-prompt-menu summary::-webkit-details-marker {
  display: none;
}

.ai-prompt-popover {
  position: absolute;
  bottom: calc(100% + 0.75rem);
  left: 0;
  z-index: 20;
  display: none;
  flex-direction: column;
  gap: 0.4rem;
  width: max-content;
  max-width: 280px;
  padding: 0.65rem;
  background: white;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: var(--shadow-md, 0 12px 28px rgba(15, 23, 42, 0.18));
}

.ai-prompt-menu[open] .ai-prompt-popover {
  display: flex;
}

.ai-prompt-popover::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 20px;
  width: 10px;
  height: 10px;
  background: white;
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  transform: rotate(45deg);
}

.ai-prompt-popover button {
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: 50px;
  padding: 0.55rem 0.8rem;
  color: var(--text-dark);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-align: left;
}

.ai-prompt-popover button:hover {
  border-color: var(--vivid-sky);
  color: var(--vivid-sky);
  background: white;
}

.ai-chat-form {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 -1.25rem;
  padding: 1rem 1.1rem 0;
  border-top: 1px solid var(--border-color);
}

.ai-composer {
  border: 3px solid var(--border-color);
  border-radius: 18px;
  padding: 0.75rem;
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ai-composer:focus-within {
  border-color: var(--vivid-sky);
}

.ai-attachment-input {
  display: none;
}

.ai-attachment-preview-list {
  display: none;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.ai-attachment-preview-list.has-items {
  display: flex;
}

.ai-attachment-chip {
  position: relative;
  border: 1px solid var(--border-color);
  background: var(--white);
  box-shadow: 0 6px 18px rgba(148, 163, 184, 0.12);
  overflow: hidden;
}

.ai-attachment-chip.image {
  width: 88px;
  height: 88px;
  border-radius: 18px;
  flex: 0 0 88px;
}

.ai-attachment-chip.file {
  min-width: 0;
  width: min(100%, 236px);
  border-radius: 14px;
  padding: 0.4rem 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.ai-attachment-chip-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ai-attachment-file-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #FF4B47;
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}

.ai-attachment-file-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0rem;
}

.ai-attachment-file-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.3;
  word-break: break-word;
}

.ai-attachment-file-meta {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-gray);
  text-transform: uppercase;
}

.ai-attachment-remove {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.9);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
}

.ai-attachment-chip.file .ai-attachment-remove {
  top: 0.45rem;
  right: 0.45rem;
  width: 26px;
  height: 26px;
}

.ai-attachment-chip.file .ai-attachment-file-copy {
  padding-right: 1.65rem;
}

.ai-attachment-remove:hover {
  background: var(--text-dark);
}

.ai-chat-form textarea {
  width: 100%;
  min-height: 32px;
  max-height: 160px;
  resize: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-dark);
  background: transparent;
  overflow-y: hidden;
}

.ai-chat-form textarea:focus {
  outline: none;
}

.ai-chat-form textarea::placeholder {
  color: #B8C2CF;
}

.ai-chat-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
}

.ai-attach-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ai-tool-btn,
.ai-send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.ai-tool-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--white);
  color: var(--text-gray);
  border: 1px solid var(--border-color);
  position: relative;
  font-size: 1rem;
}

.ai-tool-btn:hover {
  color: var(--vivid-sky);
  border-color: var(--vivid-sky);
  background: white;
}

.ai-send-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--text-dark);
  color: white;
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s, filter 0.2s;
}

.ai-send-btn i,
.ai-send-btn span {
  display: none;
}

.ai-send-btn::before {
  content: "\f062";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.95rem;
  line-height: 1;
}

.ai-send-btn:hover {
  background: var(--deep-navy);
  transform: scale(1.03);
  filter: brightness(1.1);
}

.ai-send-btn:active {
  transform: scale(0.98);
}

.ai-choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-self: flex-end;
  max-width: 100%;
}

.ai-choice-btn {
  min-height: 42px;
  padding: 0 1rem;
  border-radius: 999px;
  background: var(--text-dark);
  color: white;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s, filter 0.2s;
}

.ai-choice-btn:hover {
  background: #2D3748;
  transform: scale(1.03);
  filter: brightness(1.08);
}

.ai-choice-btn:active {
  transform: scale(0.98);
}

.ai-choice-btn.secondary {
  background: #F0F4F8;
  color: var(--text-dark);
}

.ai-choice-btn.secondary:hover {
  background: #E2E8F0;
}

.template-ai-panel {
  height: 100%;
}

.template-ai-panel .ai-chat-thread {
  padding-top: 0.75rem;
}

.template-ai-panel .ai-chat-form {
  margin: 0 -1rem;
  padding: 0.85rem 1rem 0;
}

.template-ai-panel .ai-message {
  font-size: 1rem;
  line-height: 1.8;
}

/* ==========================================================================
   Modal chrome MOVED OUT of this file.

   `.app-modal*`, `.btn-primary-pill`, `.btn-secondary-pill` and the preview
   modal variants now live in public/css/app-modal-chrome.css, which every
   layout loads — including layouts/main.blade.php, which cannot take this file
   because it ships with common.css and its global resets. Edit the chrome
   there, not here; this file is octon-v2 only.

   app-modal-chrome.css is linked BEFORE the octon-v2 bundle, so the page-scoped
   overrides further down (and in user-management.css, message-compose.css,
   field-editor-modal-v2.css, …) still win.
   ========================================================================== */

/* ==========================================================================
   SweetAlert2 v2 theme — align every Swal dialog with the .app-modal look.
   Companion JS: the global Swal.mixin at the top of js/app.js
   (buttonsStyling:false + pill customClass + red→danger mapping).
   The stock sweetalert2 CSS (head link + runtime-injected by the all-in-one
   bundle) uses zero-specificity `div:where(...)` selectors, so plain class
   selectors below win regardless of load order; compound selectors are used
   where stock rules carry real specificity (icon marks, toast).
   ========================================================================== */

/* Layer above an open .app-modal (2000) and the app loading overlay (2100). */
.swal2-container {
  z-index: 2200;
}

/* Backdrop — matches .app-modal-backdrop. Toasts never get
   .swal2-backdrop-show, so they stay transparent. */
.swal2-container.swal2-backdrop-show {
  background: rgba(15, 23, 42, 0.24);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* Popup — matches .app-modal-dialog. */
.swal2-popup {
  width: min(92vw, 440px);
  border-radius: 20px;
  padding: 1.5rem 1.5rem 1.25rem;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.16);
  color: var(--text-dark);
}

.swal2-title {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--gray-900);
  padding: 0.4em 0 0;
}

.swal2-html-container {
  font-size: 0.95rem;
  color: var(--text-gray);
  line-height: 1.7;
  padding: 0.6em 0.4em 0;
  margin: 0;
}

/* Icons are sized in em internally, so font-size scales the whole drawing
   (5em × 0.8rem ≈ 64px instead of the stock 80px) without breaking marks. */
.swal2-icon {
  font-size: 0.8rem;
  margin: 0.8em auto 0.5em;
}

.swal2-icon.swal2-success {
  border-color: var(--success-green);
  color: var(--success-green);
}

.swal2-icon.swal2-success .swal2-success-ring {
  border-color: rgba(0, 200, 83, 0.3);
}

.swal2-icon.swal2-success [class^="swal2-success-line"] {
  background-color: var(--success-green);
}

.swal2-icon.swal2-error {
  border-color: var(--accent-red);
  color: var(--accent-red);
}

.swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
  background-color: var(--accent-red);
}

.swal2-icon.swal2-warning {
  border-color: rgba(249, 115, 22, 0.35);
  color: var(--accent-orange);
}

.swal2-icon.swal2-info {
  border-color: rgba(0, 161, 233, 0.35);
  color: var(--vivid-sky);
}

.swal2-icon.swal2-question {
  border-color: rgba(0, 161, 233, 0.35);
  color: var(--vivid-sky);
}

/* Actions — the buttons themselves are .btn-primary-pill /
   .btn-secondary-pill via the app.js mixin customClass. */
.swal2-actions {
  gap: 0.75rem;
  margin: 1.4rem auto 0;
}

.swal2-actions .btn-primary-pill,
.swal2-actions .btn-secondary-pill {
  margin: 0;
  min-width: 8rem;
}

.swal2-actions button:focus-visible {
  outline: 2px solid var(--vivid-sky);
  outline-offset: 2px;
}

/* Destructive confirm (mapped from red confirmButtonColor values by app.js).
   Compound selector: .btn-primary-pill lives in project-management.css which
   loads after this file. */
.swal2-actions .octon-swal-danger {
  background: var(--accent-red);
}

.swal2-actions .octon-swal-danger:hover {
  background: #C23A35;
  filter: none;
}

/* Loading spinner (Swal.showLoading) + timer progress bar. */
.swal2-loader {
  border-color: var(--vivid-sky) transparent var(--vivid-sky) transparent;
}

.swal2-timer-progress-bar {
  background: var(--vivid-sky);
  height: 4px;
}

.swal2-footer {
  border-top: 1px solid var(--border-color);
  color: var(--text-gray);
  font-size: 0.85rem;
}

.swal2-footer a {
  color: var(--vivid-sky);
}

.swal2-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.6em;
  color: var(--text-gray);
}

.swal2-close:hover {
  color: var(--text-dark);
  background: var(--gray-surface);
  transform: none;
}

/* Prompt inputs (unused today, themed for completeness) — .case-form-field look. */
.swal2-input,
.swal2-textarea,
.swal2-select {
  border: 2px solid var(--border-color);
  border-radius: 12px;
  background: var(--white);
  color: var(--text-dark);
  font-size: 0.95rem;
  box-shadow: none;
}

.swal2-input {
  height: 44px;
}

.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
  border: 2px solid var(--vivid-sky);
  box-shadow: 0 0 0 3px rgba(0, 161, 233, 0.12);
}

.swal2-radio,
.swal2-checkbox {
  accent-color: var(--vivid-sky);
}

.swal2-validation-message {
  background: var(--accent-red-light);
  color: var(--accent-red);
  border-radius: 10px;
  font-size: 0.85rem;
  margin: 1em 0 0;
}

.swal2-validation-message::before {
  background-color: var(--accent-red);
}

/* Toast mode — keep the stock compact layout, just soften the shell. */
.swal2-popup.swal2-toast {
  width: auto;
  max-width: 100%;
  border-radius: 14px;
  padding: 1em;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14);
}

.swal2-popup.swal2-toast .swal2-title {
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0;
}

.swal2-popup.swal2-toast .swal2-icon {
  font-size: 1rem;
  margin: 0 0.5em 0 0;
}

.swal2-popup.swal2-toast .swal2-actions .btn-primary-pill,
.swal2-popup.swal2-toast .swal2-actions .btn-secondary-pill {
  height: 32px;
  min-width: 0;
  padding: 0 0.9rem;
  font-size: 0.8rem;
}

body.loading-open {
  overflow: hidden;
}

.app-loading-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 2100;
}

.app-loading-overlay.is-open {
  display: flex;
}

.app-loading-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.app-loading-dialog {
  position: relative;
  z-index: 1;
  width: min(320px, calc(100vw - 3rem));
  min-height: 240px;
  border-radius: 22px;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18);
  animation: appLoadingDialogIn 0.24s cubic-bezier(0.175, 0.885, 0.32, 1.08);
}

.app-loading-illustration {
  width: 120px;
  height: auto;
  /* animation: octonFloating 2.8s ease-in-out infinite; */
}

.app-loading-dialog p {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text-dark);
  letter-spacing: 0.02em;
}

@keyframes appLoadingDialogIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.cases-master-sort {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 145px;
  min-height: 36px;
  box-sizing: border-box;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--text-dark);
  overflow: hidden;
}

.cases-master-sort:focus-within {
  border-color: var(--vivid-sky);
}

.cases-master-sort-icon {
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--vivid-sky);
  font-size: 0.88rem;
  flex: 0 0 auto;
  pointer-events: none;
}

.cases-master-sort::after {
  content: "\f078";
  position: absolute;
  right: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.72rem;
  color: #7D8795;
  pointer-events: none;
}

.cases-master-sort-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  color: var(--text-dark);
  font-size: 0.82rem;
  font-weight: 400;
  padding: 0 2.2rem 0 2rem;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

/* Shared action menu (details/summary popover) — ported from the live template.
   Used by the sidebar user menu (.sidebar-user-menu). */
.app-action-menu {
  position: relative;
  flex-shrink: 0;
}

.app-action-menu summary {
  list-style: none;
  cursor: pointer;
}

.app-action-menu summary::-webkit-details-marker {
  display: none;
}

.app-action-menu-popover {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  z-index: 50;
  min-width: 120px;
  padding: 0.35rem;
  display: none;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 14px;
}

.app-action-menu[open] .app-action-menu-popover {
  display: block;
}

.app-action-menu.is-dropup .app-action-menu-popover {
  top: auto;
  bottom: calc(100% + 0.55rem);
}

/* Floating menus. The table wrappers (.cases-master-table-shell / -axis-x /
   -scroll) and the project-detail sidebar pane clip with overflow, so an
   absolutely positioned menu is cut off on short tables. app.js re-anchors the
   menu to the viewport on open (position: fixed escapes ancestor clipping).
   Compound selectors (0-2-0) so this wins over the base rules — including the
   inline <style> in pages/projects/show-v2.blade.php — without !important:
   the inline top/right that app.js writes must still take precedence. */
.app-action-menu-popover.is-floating-menu,
.project-hero-more-menu.is-floating-menu {
  position: fixed;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  /* Above the sticky thead (2) and the sticky filter panel (12); below the
     app-modal (2000), the loading overlay (2100) and SweetAlert2 (2200). */
  z-index: 1200;
}

.app-action-menu-list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.app-action-menu-item {
  width: 100%;
  min-height: 34px;
  padding: 0.55rem 0.7rem;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: left;
  /* Long labels (e.g. パスワードリセット) must not wrap; the popover is
     shrink-to-fit inside a narrow table cell and grows leftward instead. */
  white-space: nowrap;
}

.app-action-menu-item i {
  width: 14px;
  flex-shrink: 0;
  color: #7C90A8;
  text-align: center;
}

.app-action-menu-item:hover,
.app-action-menu-item.is-active {
  background: var(--gray-surface, #F1F5F9);
}

.app-action-menu-item.is-danger {
  color: var(--accent-red);
}

.app-action-menu-item.is-danger i {
  color: var(--accent-red);
}

.app-action-menu-item.is-danger:hover {
  background: var(--accent-red-light);
}

.app-action-menu-item:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.app-action-menu-item:disabled:hover {
  background: transparent;
}

.app-action-menu-divider {
  height: 1px;
  margin: 0.18rem 0;
  background: #EDF2F7;
}

/* --- Case hero header (定型文作成/編集 form page) ---------------------------
   Ported from html/html-20260710/定型文作成 _ Octon_files/component.css. */
.case-hero-header {
  color: white;
  margin-bottom: 1rem;
}

.case-hero-breadcrumb {
  width: 100%;
  padding: 0.4rem 0.4rem;
  border-radius: 20px;
  background: var(--accent-blue);
  margin-bottom: 0;
}

.case-hero-main {
  margin-top: 0.4rem;
  padding: 0.6rem 1rem;
  border-radius: 20px;
  background: var(--vivid-sky);
}

.case-hero-folder-icon {
  margin-right: 0.55rem;
  color: #FFFFFF;
  font-size: calc(1em - 4px);
  vertical-align: -0.02em;
  flex-shrink: 0;
}

.case-hero-copy {
  min-width: 0;
}

.case-hero-title-row {
  gap: 0.5rem;
}

.case-hero-header .header-left h1 {
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0.3rem 0;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  line-height: 1.2;
}

.case-hero-header .page-header-subtitle {
  color: #FFFFFF;
}

.case-hero-header .breadcrumb-nav,
.case-hero-header .breadcrumb-nav a,
.case-hero-header .breadcrumb-separator {
  color: #FFFFFF;
}

.case-hero-header .btn-back-circle {
  width: 20px;
  height: 20px;
  font-size: 0.6rem;
  background: white;
  border-color: var(--border-color);
  color: var(--text-dark);
}

.case-hero-header .btn-back-circle:hover {
  background: var(--gray-surface);
  border-color: var(--vivid-sky);
  color: var(--vivid-sky);
}

/* --- Small round icon button (AI composer attach etc.) --- */
.t-icon-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  position: relative;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--border-color);
  color: var(--text-gray);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 0.9rem;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.t-icon-btn:hover {
  color: #6B7280;
  border-color: #C5CED8;
  background: #F8FAFC;
}

.t-icon-btn:active {
  transform: translateY(1px);
}

/* --- Shared row action column (tables): inline circular icon buttons.
       Reference implementation is the タグ管理 list; 回収ステップの設定 and
       ユーザー管理 reuse it so every list screen exposes the same アクション
       column. Pair with `.t-icon-btn` on the button itself. --- */
.app-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* Table rows are short, so pull the tooltip closer than the global default. */
.app-row-actions .tooltip-top[data-tooltip]::after {
  bottom: calc(100% - 8px);
}

.app-row-actions .tooltip-top[data-tooltip]:hover::after {
  bottom: calc(100% - 4px);
}

.app-row-action-btn.is-view {
  color: #1F4E79;
}

.app-row-action-btn.is-view:hover {
  color: var(--vivid-sky);
}

.app-row-action-btn.is-edit {
  color: var(--vivid-sky);
}

.app-row-action-btn.is-edit:hover {
  color: var(--vivid-sky-dark);
}

.app-row-action-btn.is-neutral {
  color: var(--text-gray);
}

.app-row-action-btn.is-neutral:hover {
  color: var(--deep-navy);
}

.app-row-action-btn.is-delete {
  color: var(--accent-red);
}

.app-row-action-btn.is-delete:hover {
  color: #B63E39;
}

/* An action that is already applied (e.g. the row that IS the default form)
   keeps its slot so the column shape never shifts between rows, but reads as
   inert. Colour still comes from the is-* modifier above. */
.app-row-action-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

/* Hover stays inert, but is NOT pointer-events:none — the tooltip still has to
   be readable so the user learns why the action is unavailable. */
.app-row-action-btn:disabled:hover {
  background: var(--white);
  border-color: var(--border-color);
}

.app-row-action-btn:disabled:active {
  transform: none;
}

/* --- app-preview aliases (preview modal card) --- */
.message-preview-card h3,
.app-preview-card h3,
.app-preview-card-title {
  margin-bottom: 0.8rem;
  font: inherit;
  font-weight: 600;
}

.app-preview-copy {
  line-height: 1.8;
}

.app-tag-panel .help-tooltip {
  left: 50%;
  transform: translateX(-50%);
}

.app-tag-panel .help-tooltip::before {
  left: 50%;
  transform: translateX(-50%);
}