/* فانوس — تم پذیرش۲۴ (هم‌راستا با گنجینه/IR) */
:root {
  --page-subheader-scroll-margin: 0.75rem;
  --color-page: #f9fafb;
  --color-surface: #ffffff;
  --color-primary: #3f4191;
  --color-primary-dark: #373a8a;
  --color-primary-soft: #eef0ff;
  --color-ink: #1f2937;
  --color-muted: #6b7280;
  --color-muted-light: #9ca3af;
  --color-border: #e5e7eb;
  --color-border-soft: #f3f4f6;
  --color-surface-muted: #f4f6f8;
  --color-row-alt: #f9fafb;
  --color-hover-subtle: #f9fafb;
  --color-emerald: #10b981;
  --color-emerald-soft: #ecfdf5;
  --color-amber: #f59e0b;
  --color-red: #ef4444;

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
  --shadow-soft: 0 10px 40px -10px rgba(0, 0, 0, 0.06);
  --shadow-nav: 0 4px 20px -6px rgba(0, 0, 0, 0.04);

  --font-family: IRANSansX, IRANSans, Tahoma, sans-serif;
  --text-base: 0.9375rem;
  --text-sm: 0.8125rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --leading: 1.75;
}

/* Roadmap task collaboration */
.roadmap-collaboration {
  display: grid;
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid var(--color-border-soft, #e5e7eb);
  border-radius: var(--radius-md, 0.75rem);
  background: color-mix(in srgb, var(--color-primary, #0891b2) 3%, #fff);
}

.roadmap-add__collaboration {
  margin-top: 0.25rem;
}

.roadmap-collaboration__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.roadmap-collaboration__label {
  min-width: 7.5rem;
  color: var(--color-text-muted, #64748b);
  font-size: 0.75rem;
  font-weight: 700;
}

.roadmap-collaboration__items {
  display: flex;
  align-items: center;
  flex: 1;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.roadmap-collaboration__product,
.roadmap-collaboration__person {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--color-border-soft, #e5e7eb);
  border-radius: 999px;
  background: #fff;
  font-size: 0.75rem;
}

.roadmap-collaboration__product.is-primary {
  border-color: color-mix(in srgb, var(--color-primary, #0891b2) 30%, #e5e7eb);
  color: var(--color-primary, #087f9c);
}

.roadmap-collaboration__product small {
  padding-inline-start: 0.3rem;
  border-inline-start: 1px solid currentColor;
  opacity: 0.7;
  font-size: 0.625rem;
}

.roadmap-collaboration__avatar,
.roadmap-collaboration-choice__avatar {
  display: inline-grid;
  width: 1.5rem;
  height: 1.5rem;
  overflow: hidden;
  place-items: center;
  border-radius: 50%;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 0.6875rem;
  font-weight: 800;
}

.roadmap-collaboration__avatar img,
.roadmap-collaboration-choice__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.roadmap-collaboration__empty {
  color: var(--color-text-muted, #64748b);
  font-size: 0.75rem;
}

.roadmap-collaboration__revoke {
  display: inline-grid;
  width: 1.15rem;
  height: 1.15rem;
  margin-inline-start: 0.1rem;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, #ef4444 12%, #fff);
  color: #b91c1c;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}

.roadmap-collaboration__revoke:hover {
  background: color-mix(in srgb, #ef4444 22%, #fff);
}

.roadmap-collaboration__person.is-self {
  border-color: color-mix(in srgb, var(--color-primary, #0891b2) 35%, #e5e7eb);
}

.roadmap-collaboration__leave {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid color-mix(in srgb, #ef4444 35%, #e5e7eb);
  border-radius: 0.55rem;
  background: #fff;
  color: #b91c1c;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.roadmap-collaboration__leave:hover {
  background: color-mix(in srgb, #ef4444 8%, #fff);
}

.roadmap-collaboration__handoff {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid color-mix(in srgb, #10b981 40%, #e5e7eb);
  border-radius: 0.55rem;
  background: color-mix(in srgb, #10b981 8%, #fff);
  color: #047857;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.roadmap-collaboration__handoff:hover {
  background: color-mix(in srgb, #10b981 16%, #fff);
}

.roadmap-collaboration__manage {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2rem;
  padding: 0.35rem 0.7rem;
  border: 0;
  border-radius: 0.55rem;
  background: var(--color-primary, #0891b2);
  color: #fff;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
}

.roadmap-collaboration__manage svg {
  width: 1rem;
  height: 1rem;
}

.roadmap-collaboration-modal {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
}

.roadmap-collaboration-modal__backdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: rgb(15 23 42 / 55%);
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}

.roadmap-collaboration-modal__panel {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(42rem, calc(100% - 2rem));
  max-height: min(80dvh, 46rem);
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-md, 0.75rem);
  background: #fff;
  box-shadow: 0 24px 60px rgb(15 23 42 / 25%);
}

.roadmap-collaboration-modal__body {
  flex: 1;
  min-height: 0;
  padding: 1rem;
  overflow-y: auto;
}

.roadmap-collaboration-modal__hint {
  margin: 0 0 0.85rem;
  color: var(--color-text-muted, #64748b);
  font-size: 0.8rem;
  line-height: 1.7;
}

.roadmap-collaboration-modal__search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-border-soft, #dbe2ea);
  border-radius: 0.6rem;
}

.roadmap-collaboration-modal__search svg {
  width: 1rem;
  color: var(--color-text-muted, #64748b);
}

.roadmap-collaboration-modal__search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
}

.roadmap-collaboration-modal__section + .roadmap-collaboration-modal__section {
  margin-top: 1rem;
}

.roadmap-collaboration-modal__section h3 {
  margin: 0 0 0.55rem;
  font-size: 0.85rem;
}

.roadmap-collaboration-modal__choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.roadmap-collaboration-choice {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.55rem;
  border: 1px solid var(--color-border-soft, #e5e7eb);
  border-radius: 0.6rem;
  cursor: pointer;
}

.roadmap-collaboration-choice:has(input:checked) {
  border-color: color-mix(in srgb, var(--color-primary, #0891b2) 45%, #e5e7eb);
  background: color-mix(in srgb, var(--color-primary, #0891b2) 7%, #fff);
}

.roadmap-collaboration-choice__text {
  display: grid;
  min-width: 0;
}

.roadmap-collaboration-choice__text strong,
.roadmap-collaboration-choice__text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roadmap-collaboration-choice__text strong {
  font-size: 0.78rem;
}

.roadmap-collaboration-choice__text small {
  color: var(--color-text-muted, #64748b);
  font-size: 0.65rem;
}

.roadmap-collaboration-modal__footer {
  display: flex;
  flex-shrink: 0;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0 1rem 0.85rem;
  border-bottom: 1px solid var(--color-border-soft, #e5e7eb);
}

.roadmap-collaboration-modal__footer[hidden] {
  display: none;
}

.roadmap-collaboration-modal__cancel,
.roadmap-collaboration-modal__save {
  min-height: 2.35rem;
  padding: 0.45rem 0.9rem;
  border-radius: 0.55rem;
  cursor: pointer;
  font-weight: 700;
}

.roadmap-collaboration-modal__cancel {
  border: 1px solid var(--color-border-soft, #dbe2ea);
  background: #fff;
}

.roadmap-collaboration-modal__save {
  border: 0;
  background: var(--color-primary, #0891b2);
  color: #fff;
}

@media (max-width: 767px) {
  .roadmap-collaboration-modal {
    align-items: end;
  }

  .roadmap-collaboration-modal__panel {
    width: 100%;
    max-height: 80dvh;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }

  .roadmap-collaboration-modal__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }

  .roadmap-collaboration-modal__choices {
    grid-template-columns: 1fr;
  }

  .roadmap-collaboration-modal__footer {
    padding: 0 1rem 0.75rem;
  }

  .roadmap-collaboration__label {
    width: 100%;
  }

  .roadmap-collaboration__manage {
    width: 100%;
    justify-content: center;
  }
}

@font-face {
  font-family: IRANSansX;
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/IRANSansXFaNum-Regular.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: IRANSansX;
  font-style: normal;
  font-weight: 500;
  src: url("./fonts/IRANSansXFaNum-Medium.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: IRANSansX;
  font-style: normal;
  font-weight: 700;
  src: url("./fonts/IRANSansXFaNum-Bold.woff2") format("woff2");
  font-display: swap;
}

html {
  scroll-behavior: smooth;
}

html[dir="rtl"] {
  direction: rtl;
}

body {
  font-family: var(--font-family);
  font-size: var(--text-base);
  line-height: var(--leading);
  background: var(--color-page);
  color: var(--color-ink);
  text-align: right;
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  height: 100dvh;
  overflow: hidden;
}

body.sidebar-scroll-lock {
  overflow: hidden;
}

/* --- Layout: موبایل اول، دسکتاپ push --- */
.app-shell {
  position: relative;
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

.main-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

.site-header {
  position: relative;
  z-index: 40;
  flex-shrink: 0;
}

.site-footer {
  flex-shrink: 0;
  background: var(--color-page);
  border-top: 1px solid var(--color-border);
  color: var(--color-muted-light);
  text-align: center;
  padding: 0.4rem 1rem;
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
}

.site-footer__text {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.page-main {
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  min-width: 0;
  min-height: 0;
  padding: 1rem 0.875rem 1.5rem;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

@media (min-width: 640px) {
  .page-main {
    padding: 1.25rem 1rem 1.75rem;
  }
}

@media (min-width: 768px) {
  .page-main {
    padding: 1.5rem 1.5rem 2rem;
  }
}

@media (min-width: 1024px) {
  .page-main {
    padding: 2rem;
  }
}

/* سایدبار: موبایل = کشو از راست (right فیزیکی، نه inline-end که در RTL = چپ است) */
.sidebar-shell {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: auto;
  /* Above task/CRM drawers (110) so nav stays clickable while a detail panel is open */
  z-index: 120;
  width: min(288px, 86vw);
  max-width: 288px;
  height: 100vh;
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
  direction: rtl;
  transform: translate3d(100%, 0, 0);
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 0.28s ease,
    visibility 0.28s ease;
}

.sidebar-shell:not(.is-closed) {
  transform: translate3d(0, 0, 0);
  visibility: visible;
  pointer-events: auto;
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 115;
  background: rgba(31, 41, 55, 0.5);
}

.sidebar-overlay.is-visible {
  display: block;
}

@media (min-width: 1024px) {
  .app-shell {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
  }

  .sidebar-shell {
    position: relative;
    right: auto;
    left: auto;
    flex: 0 0 288px;
    width: 288px;
    min-width: 288px;
    max-width: 288px;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    transform: none !important;
    visibility: visible !important;
    box-shadow: var(--shadow-soft);
    border-left: 1px solid var(--color-border);
    transition:
      width 0.3s ease,
      min-width 0.3s ease,
      max-width 0.3s ease,
      flex-basis 0.3s ease,
      opacity 0.25s ease;
  }

  .sidebar-shell.is-closed {
    flex: 0 0 0;
    width: 0;
    min-width: 0;
    max-width: 0;
    opacity: 0;
    border-left-width: 0;
    pointer-events: none;
    overflow: hidden;
  }

  .sidebar-overlay {
    display: none !important;
  }

  .main-shell {
    flex: 1 1 0;
    min-width: 0;
    height: 100dvh;
    max-height: 100dvh;
  }
}

/* متن محتوا همیشه راست‌چین */
#app-content,
.page-content,
.page-content p,
.page-content li,
.card,
.card p,
.card h3,
.card h4,
.issue-card summary,
.heading-section,
.heading-card {
  text-align: right;
}

.vision-card {
  text-align: right;
}

@media (min-width: 768px) {
  .vision-card {
    text-align: center;
  }
}

/* --- Layout utilities (Tailwind CDN fallback) --- */
.bg-page { background-color: var(--color-page); }
.text-ink { color: var(--color-ink); }
.text-muted { color: var(--color-muted); }
.text-brand { color: var(--color-primary); }
.text-brand-accent { color: var(--color-primary); }
.bg-brand { background-color: var(--color-primary); }
.bg-brand-dark { background-color: var(--color-primary-dark); }
.bg-brand-accent { background-color: var(--color-primary); }
.text-success { color: var(--color-emerald); }
.text-danger { color: var(--color-red); }
.shadow-card { box-shadow: var(--shadow-card); }
.shadow-soft { box-shadow: var(--shadow-soft); }

.num-ltr {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* --- Cards --- */
.card {
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}

.card--flat {
  box-shadow: none;
}

.fanos-load-error {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 1.5rem;
}

.fanos-load-error__detail {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.875rem;
}

.vision-card {
  border-radius: var(--radius-lg);
  background: linear-gradient(270deg, var(--color-primary-soft) 0%, var(--color-surface) 55%);
  border: 1px solid var(--color-border-soft);
}

.problem-card {
  border-right: 4px solid var(--color-red);
}

.solution-card {
  border-right: 4px solid var(--color-emerald);
}

/* --- Typography --- */
.heading-page {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -0.02em;
  display: inline-block;
  vertical-align: middle;
}

.heading-section {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-primary);
}

.heading-card {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-ink);
}

.stat-value {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.3;
}

.stat-label {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-top: 0.25rem;
}

.meta-value {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-primary);
}

/* --- Badges --- */
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.badge-success {
  background: var(--color-emerald-soft);
  color: #047857;
}

.badge-warning {
  background: #fffbeb;
  color: #b45309;
}

.badge-danger {
  background: #fef2f2;
  color: #b91c1c;
}

/* --- Tabs (pill nav like IR) --- */
.tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.5rem 1.125rem;
  background: transparent;
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.tab-btn:hover {
  background: var(--color-border-soft);
  color: var(--color-primary);
}

.tab-btn-active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.5rem 1.125rem;
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  box-shadow: var(--shadow-nav);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

/* --- Sidebar --- */
.sidebar-item {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: flex-start;
  text-align: right;
  gap: 0.625rem;
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.85rem;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-ink);
  overflow: hidden;
  transition: background 0.2s, color 0.2s;
}

.sidebar-item:hover {
  background: var(--color-border-soft);
}

.sidebar-item-active {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: flex-start;
  text-align: right;
  gap: 0.625rem;
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.85rem;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  overflow: hidden;
}

.sidebar-item__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  color: var(--color-muted-light);
  transition: color 0.2s;
}

.sidebar-item__icon svg {
  width: 100%;
  height: 100%;
}

.sidebar-item:hover .sidebar-item__icon,
.sidebar-item-active .sidebar-item__icon {
  color: var(--color-primary);
}

.menu-tab-empty {
  display: inline-flex;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--color-muted-light);
  padding: 0.35rem 0.25rem;
  white-space: nowrap;
}

.sidebar-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.sidebar-nav {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.sidebar-footer {
  flex-shrink: 0;
  padding: 0.65rem 0.75rem 0.85rem;
  border-top: 1px solid var(--color-border-soft);
  background: var(--color-surface);
}

.sidebar-mode-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-primary);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.sidebar-mode-toggle:hover {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
}

.sidebar-mode-toggle__icon {
  font-size: 1rem;
  line-height: 1;
}

.sidebar-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-muted-light);
  text-transform: uppercase;
}

.sidebar-item__label {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  text-align: right;
  overflow: hidden;
}

.sidebar-item__marker {
  flex-shrink: 0;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--color-muted-light);
  transition: background 0.2s, transform 0.2s;
}

.sidebar-item:hover .sidebar-item__marker {
  background: var(--color-primary);
}

.sidebar-item-active .sidebar-item__marker {
  background: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-soft);
}

.sidebar-item__name {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-badge-ownerless {
  flex: 0 0 auto;
  display: inline-block;
  padding: 0.05rem 0.28rem;
  border-radius: 3px;
  border: 1px solid #b91c1c;
  background: #dc2626;
  color: #fff;
  font-size: 0.5rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.sidebar-menu {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-group {
  list-style: none;
}

.sidebar-group__toggle {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-ink);
  text-align: right;
  overflow: hidden;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.sidebar-group__toggle:hover {
  background: var(--color-border-soft);
  color: var(--color-primary);
}

.sidebar-group__title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-group__chevron {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: var(--color-muted);
  transition: transform 0.25s ease;
}

.sidebar-group.is-open .sidebar-group__chevron {
  transform: rotate(180deg);
}

.sidebar-group__list {
  list-style: none;
  margin: 0;
  padding: 0.15rem 0 0.35rem;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.3s ease,
    opacity 0.2s ease;
}

.sidebar-group.is-open .sidebar-group__list {
  max-height: 480px;
  opacity: 1;
}

.sidebar-group__list .sidebar-item,
.sidebar-group__list .sidebar-item-active {
  margin-inline: 0.35rem 0.5rem;
  width: calc(100% - 0.85rem);
}

.sidebar-group__empty {
  padding: 0.35rem 1rem 0.5rem;
  font-size: 0.75rem;
  color: var(--color-muted-light);
  text-align: right;
}

.brand-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.35;
}

.brand-logo {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  object-fit: contain;
}

/* Dark mode: the navy lantern is too dark on a dark surface — lift its
   luminance while keeping the blue hue so it stays readable. */
[data-theme="dark"] .brand-logo {
  filter: invert(1) hue-rotate(180deg) brightness(1.15);
}

#app-brand .brand-title {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

#app-brand .brand-tagline {
  display: block;
  margin-top: 0.125rem;
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-muted);
}

.brand-home {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  text-align: right;
  cursor: pointer;
  transition: opacity 0.2s;
}

.brand-home:hover {
  opacity: 0.88;
}

.brand-home--active .brand-title {
  color: var(--color-primary-dark);
}

.brand-tagline {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.site-header__tabs.is-hidden,
.site-header__tabs[hidden],
.site-header--fanos #tab-nav,
.site-header--radar #tab-nav.tab-nav-scroll,
.site-header--product #fanos-tab-nav {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
}

.site-header__tabs:not(:has(.tab-btn:not([hidden]))) {
  display: none !important;
}

.site-header--product #radar-tab-nav,
.site-header--product #radar-tab-nav.tab-nav-scroll {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* قاب مانیتورینگ */
.monitoring-panel {
  width: 100%;
  min-width: 0;
}

.page-main:has(.monitoring-panel) {
  display: flex;
  flex-direction: column;
  padding-bottom: 0.75rem;
}

.monitoring-panel.page-content--fill .monitoring-frame-wrap {
  flex: 1 1 auto;
  min-height: 0;
}

.monitoring-frame-wrap {
  position: relative;
  width: 100%;
  min-height: min(72vh, 720px);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.monitoring-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-page);
}

.monitoring-loading--hidden {
  display: none;
}

.monitoring-loading__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  padding: 1.5rem;
}

.monitoring-loading__spinner {
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: monitoring-spin 0.75s linear infinite;
}

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

.monitoring-loading__text {
  margin: 0;
  font-size: var(--text-base);
  color: var(--color-muted);
}

.monitoring-frame {
  display: block;
  width: 100%;
  height: min(72vh, 720px);
  min-height: 420px;
  border: none;
  background: #fff;
  opacity: 1;
  transition: opacity 0.35s ease;
}

.monitoring-frame--loading {
  opacity: 0;
  pointer-events: none;
}

.monitoring-panel.page-content--fill .monitoring-frame {
  height: 100%;
  min-height: 420px;
}

/* --- Stats strip (horizontal bar like IR hero stats) --- */
.stats-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.stats-strip__item {
  flex: 1 1 140px;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1.25rem 1.5rem;
  border-inline-start: 1px solid var(--color-border);
}

.stats-strip__item:first-child {
  border-inline-start: none;
}

@media (max-width: 640px) {
  .stats-strip__item {
    border-inline-start: none;
    border-bottom: 1px solid var(--color-border);
  }
  .stats-strip__item:last-child {
    border-bottom: none;
  }
}

.stat-icon {
  display: flex;
  height: 2.75rem;
  width: 2.75rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: #fff;
}

.stat-icon--brand { background: var(--color-primary); }
.stat-icon--emerald { background: var(--color-emerald); }
.stat-icon--violet { background: #7c3aed; }
.stat-icon--teal { background: #0d9488; }
.stat-icon--indigo { background: #4f46e5; }

/* Map legacy Tailwind bg classes from data.js */
.bg-brand,
.bg-indigo-900 { background-color: var(--color-primary) !important; }
.bg-teal-500,
.bg-emerald-500 { background-color: var(--color-emerald) !important; }
.bg-violet-500 { background-color: #7c3aed !important; }
.bg-emerald-500 { background-color: var(--color-emerald) !important; }

/* --- Tables --- */
.table-card thead th {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-muted);
  padding-bottom: 0.75rem;
}

.table-card tbody td {
  font-size: var(--text-base);
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--color-border-soft);
}

.table-card tbody tr:last-child td {
  border-bottom: none;
}

/* --- Buttons --- */
.btn-icon-round {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-nav);
  transition: background 0.2s;
}

.btn-icon-round:hover {
  background: var(--color-primary-dark);
}

/* --- Loading --- */
.fanos-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  text-align: center;
}

.fanos-loading--page {
  min-height: 12rem;
  padding: 2rem 1rem;
}

.fanos-loading--inline {
  padding: 1.25rem 0.75rem;
  gap: 0.65rem;
}

.fanos-loading__spinner {
  width: 2.25rem;
  height: 2.25rem;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: fanos-spin 0.7s linear infinite;
  flex-shrink: 0;
}

.fanos-loading--inline .fanos-loading__spinner {
  width: 1.75rem;
  height: 1.75rem;
  border-width: 2.5px;
}

.fanos-loading__text {
  margin: 0;
  font-size: var(--text-base);
  color: var(--color-muted);
}

.fanos-loading--inline .fanos-loading__text {
  font-size: var(--text-sm);
}

.loading-state {
  color: var(--color-muted-light);
  font-size: var(--text-base);
}

.is-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.85;
}

.is-loading > * {
  visibility: hidden;
}

.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: fanos-spin 0.65s linear infinite;
}

.admin-btn--ghost.is-loading::after,
.admin-btn--secondary.is-loading::after,
.roadmap-comment__edit-cancel.is-loading::after {
  border-color: var(--color-border);
  border-top-color: var(--color-primary);
}

/* --- Page layouts (responsive, works in dynamic HTML) --- */
.page-content {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.page-content--stacked {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}

.page-content--fill {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.page-subheader {
  position: sticky;
  top: 0;
  z-index: 12;
  flex-shrink: 0;
  background: var(--color-page);
  padding-top: 0.25rem;
  padding-bottom: 0.75rem;
  margin-bottom: 0;
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 6px 16px -12px rgba(0, 0, 0, 0.18);
}

.page-body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
  padding-top: 1rem;
}

@media (min-width: 768px) {
  .page-body {
    gap: 1.5rem;
    padding-top: 1.25rem;
  }
}

.page-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .page-stack {
    gap: 1.5rem;
  }
}

/* --- صفحه درباره محصول (طراحی جدید) --- */
.about-page {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.about-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.about-section__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-ink);
}

.about-section__link {
  flex-shrink: 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-primary);
  cursor: default;
}

.about-in-progress__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.about-in-progress__empty {
  margin: 0;
  padding: 1rem 0;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.about-identity__head {
  margin-bottom: 1rem;
}

.about-identity__layout {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .about-identity__layout {
    flex-direction: row;
    align-items: flex-start;
    gap: 1.5rem;
  }
}

.about-identity__primary {
  flex: 1 1 auto;
  min-width: 0;
  order: 1;
}

.about-identity__hero {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 0.75rem;
}

.about-product-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.about-product-icon svg {
  width: 1.85rem;
  height: 1.85rem;
}

.about-identity__name {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-ink);
}

.about-identity__desc {
  margin: 0 0 1.125rem;
  font-size: var(--text-base);
  line-height: 1.85;
  color: var(--color-muted);
}

.about-owner {
  flex: 0 0 auto;
  width: 100%;
  padding: 1rem 1.125rem;
  border-radius: var(--radius-md);
  background: var(--color-page);
  border: 1px solid var(--color-border-soft);
  text-align: center;
}

@media (min-width: 768px) {
  .about-owner {
    order: 2;
    width: min(17.5rem, 34%);
    margin-top: 0.25rem;
  }
}

.about-owner__label {
  margin: 0 0 0.875rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-muted);
}

.about-owner__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
}

.about-owner__avatar {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-border-soft);
  background: var(--color-surface-muted, #f4f6f8);
}

.about-owner__firstname {
  margin: 0.35rem 0 0;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-ink);
}

.about-owner__lastname {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-muted);
}

.about-owner__empty {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-muted);
}

.about-identity__primary .about-meta-grid {
  display: grid;
  gap: 0.875rem 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: 0.25rem;
}

@media (min-width: 640px) {
  .about-identity__primary .about-meta-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem 1.25rem;
  }
}

.about-meta-item__label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  color: var(--color-muted-light);
}

.about-meta-item__value {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
}

.about-status-badge {
  display: inline-flex;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--color-emerald-soft);
  color: #047857;
}

.about-duo-row {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  align-items: stretch;
}

@media (min-width: 900px) {
  .about-duo-row {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  }
}

.about-duo-row__item {
  margin: 0;
  height: 100%;
}

.about-duo-row__item .about-section__head {
  margin-bottom: 1rem;
}

.about-health {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2rem;
}

.about-health--compact {
  gap: 1rem 1.25rem;
}

@media (min-width: 900px) {
  .about-duo-row .about-health--compact {
    flex-wrap: nowrap;
    align-items: center;
  }
}

.about-gauge {
  position: relative;
  width: 9.5rem;
  height: 9.5rem;
  flex-shrink: 0;
}

.about-duo-row .about-gauge {
  width: 6.5rem;
  height: 6.5rem;
}

.about-duo-row .about-gauge__score {
  font-size: 1.5rem;
}

.about-duo-row .about-gauge__track,
.about-duo-row .about-gauge__fill {
  stroke-width: 8;
}

.about-duo-row .about-health__trend {
  margin-top: 0.75rem;
}

.about-duo-row .about-health-pill {
  padding: 0.25rem 0.75rem;
  font-size: 0.8125rem;
}

.about-gauge__svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.about-gauge__track {
  fill: none;
  stroke: var(--color-border-soft);
  stroke-width: 10;
}

.about-gauge__fill {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dasharray 0.4s ease;
}

.about-gauge__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.about-gauge__score {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-ink);
}

.about-gauge__max {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--color-muted);
}

.about-health__label {
  margin: 0 0 0.5rem;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.about-health-pill {
  display: inline-flex;
  padding: 0.35rem 1rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 700;
}

.about-health-pill--good {
  background: var(--color-emerald-soft);
  color: #047857;
}

.about-health-pill--needs_attention {
  background: #fffbeb;
  color: #b45309;
}

.about-health-pill--critical {
  background: #fef2f2;
  color: #b91c1c;
}

.about-health__trend {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}

.about-health__trend-label {
  width: 100%;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.about-health__trend-value {
  font-size: var(--text-lg);
  font-weight: 800;
}

.about-health__trend-value--up {
  color: var(--color-emerald);
}

.about-health__trend-value--down {
  color: var(--color-red);
}

.about-health__trend-hint {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.about-indicators-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .about-indicators-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .about-indicators-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.about-indicator-card {
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.about-indicator-card__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
}

.about-indicator-card__icon {
  display: flex;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-primary);
}

.about-indicator-card__icon svg {
  width: 100%;
  height: 100%;
}

.about-indicator-card__title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-ink);
}

.about-indicator-card__metrics {
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-indicator-metric {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  font-size: 0.8125rem;
}

.about-indicator-metric__label {
  flex: 1;
  color: var(--color-muted);
}

.about-indicator-metric__score {
  font-weight: 700;
  color: var(--color-ink);
}

.about-metric-dot {
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}

.about-metric-dot--good {
  background: var(--color-emerald);
}

.about-metric-dot--warning {
  background: var(--color-amber);
}

.about-metric-dot--danger {
  background: var(--color-red);
}

.about-indicator-card__mean {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border-soft);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.about-indicator-card__mean strong {
  font-size: var(--text-lg);
  color: var(--color-ink);
}

.about-goals__main {
  margin: 0 0 1rem;
  padding: 0.875rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-primary-dark);
  line-height: 1.7;
}

.about-goals__kr-title {
  margin: 0 0 0.75rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-muted);
}

.about-kr-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-kr {
  padding: 0.65rem 0;
}

.about-kr + .about-kr {
  border-top: 1px solid var(--color-border-soft);
}

.about-kr__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.4rem;
  font-size: var(--text-sm);
  color: var(--color-ink);
}

.about-kr__pct {
  font-weight: 700;
  color: var(--color-primary);
}

.about-progress {
  height: 0.4rem;
  border-radius: var(--radius-pill);
  background: var(--color-border-soft);
  overflow: hidden;
}

.about-progress__fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(270deg, var(--color-primary) 0%, #6d70b8 100%);
}

.about-risk-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-risk-list--compact .about-risk {
  padding: 0.5rem 0;
}

.about-risk-list--compact .about-risk__text {
  font-size: 0.8125rem;
  line-height: 1.55;
}

.about-risk {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0;
}

.about-risk + .about-risk {
  border-top: 1px solid var(--color-border-soft);
}

.about-risk-priority {
  flex-shrink: 0;
  min-width: 3.5rem;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-align: center;
}

.about-risk-priority--high {
  background: #fef2f2;
  color: #b91c1c;
}

.about-risk-priority--medium {
  background: #fffbeb;
  color: #b45309;
}

.about-risk-priority--low {
  background: var(--color-border-soft);
  color: var(--color-muted);
}

.about-risk__text {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-ink);
}

.about-actions-table-wrap {
  overflow-x: auto;
}

.about-actions-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  text-align: right;
}

.about-actions-table th {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
  color: var(--color-muted);
  white-space: nowrap;
}

.about-actions-table td {
  padding: 0.85rem 0.75rem;
  border-bottom: 1px solid var(--color-border-soft);
  color: var(--color-ink);
  vertical-align: middle;
}

.about-action-progress {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 8rem;
}

.about-action-progress span {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-primary);
}


/* --- رودمپ محصول --- */
.roadmap-topbar {
  position: relative;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  width: 100%;
  min-width: 0;
}

.roadmap-topbar > .roadmap-add.card {
  display: contents;
}

.roadmap-topbar > .roadmap-add .roadmap-add__toggle {
  flex-shrink: 0;
  align-self: center;
  margin-inline-start: auto;
}

.roadmap-topbar > .roadmap-add .roadmap-add__body {
  flex: 0 0 100%;
  width: 100%;
}

.page-main:has(.roadmap-page) {
  padding-top: 0.5rem;
}

.roadmap-page .page-body {
  padding-top: 0;
  gap: 1rem;
}

@media (min-width: 640px) {
  .page-main:has(.roadmap-page) {
    padding-top: 0.65rem;
  }
}

@media (min-width: 768px) {
  .page-main:has(.roadmap-page) {
    padding-top: 0.75rem;
  }

  .roadmap-page .page-body {
    gap: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .page-main:has(.roadmap-page) {
    padding-top: 0.875rem;
  }
}

.roadmap-page .roadmap-sections {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.roadmap-add.card {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  overflow: visible;
}

.roadmap-add__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: auto;
  max-width: 100%;
  padding: 0.4rem 0.8rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  font-family: var(--font-family);
  font-size: 0.8125rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s;
}

.roadmap-add__toggle:hover {
  background: var(--color-primary-dark);
}

.roadmap-add__toggle-text {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.roadmap-add__head {
  margin-bottom: 1rem;
}

.roadmap-add__title {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  line-height: 1.3;
}

.roadmap-add__toggle-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  background: transparent;
  color: inherit;
}

.roadmap-add__toggle-icon svg {
  width: 0.875rem;
  height: 0.875rem;
}

.roadmap-add__toggle:hover .roadmap-add__toggle-icon {
  background: transparent;
}

.roadmap-add__chevron {
  display: inline-flex;
  transition: transform 0.2s;
}

.roadmap-add.is-open .roadmap-add__chevron {
  transform: rotate(180deg);
}

.roadmap-add__body {
  width: 100%;
  padding: 0.875rem 1.125rem 1.125rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.roadmap-add__form.roadmap-task-edit__form {
  gap: 0.75rem;
}

.roadmap-add__hint {
  margin: 0 0 0.15rem;
  font-size: 0.6875rem;
  line-height: 1.55;
  color: var(--color-muted-light);
}

.roadmap-add__body[hidden] {
  display: none;
}

.roadmap-add__form {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.roadmap-add__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: end;
}

.roadmap-add__row--duo {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.roadmap-add__row .fanos-dropdown {
  min-width: 0;
  width: 100%;
}

.roadmap-add__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.roadmap-add__hint {
  margin: 0;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.roadmap-add__label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-muted-light);
}

.roadmap-add__input,
.roadmap-add__textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-family: var(--font-family);
  font-size: var(--text-sm);
  color: var(--color-ink);
}

.roadmap-add__textarea {
  min-height: 5rem;
  line-height: 1.7;
  resize: vertical;
}

.roadmap-add__input:focus,
.roadmap-add__textarea:focus {
  outline: 2px solid var(--color-primary-soft);
  border-color: var(--color-primary);
}

.roadmap-add__upload {
  margin-top: 0.35rem;
}

.roadmap-add__actions {
  display: flex;
  justify-content: flex-end;
}

.roadmap-add__submit {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 1.1rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
}

.roadmap-add__submit svg {
  width: 1rem;
  height: 1rem;
}

.roadmap-add__submit:hover {
  background: var(--color-primary-dark);
}

@media (max-width: 767px) {
  .roadmap-add__row {
    grid-template-columns: 1fr;
  }
}

.roadmap-topbar__filters {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.roadmap-topbar__filters .fanos-dropdown {
  flex: 0 1 auto;
  min-width: 6.25rem;
  max-width: 9.5rem;
  gap: 0.15rem;
}

.roadmap-topbar__filters .fanos-dropdown[data-dropdown="roadmap-product"],
.roadmap-topbar__filters .fanos-dropdown[data-dropdown="roadmap-add-product"],
.roadmap-topbar__filters .fanos-dropdown[data-dropdown="roadmap-owners"] {
  max-width: 10.5rem;
}

.roadmap-topbar__filters .fanos-dropdown__label {
  font-size: 0.625rem;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-inline: 0.1rem;
}

.roadmap-topbar__filters .fanos-dropdown__trigger {
  min-height: 1.9rem;
  padding: 0.22rem 0.5rem;
  gap: 0.35rem;
  font-size: 0.72rem;
  border-radius: var(--radius-md);
}

.roadmap-topbar__filters .fanos-dropdown__icon {
  display: none;
}

.roadmap-topbar__filters .fanos-dropdown__trigger-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.72rem;
  font-weight: 600;
}

.roadmap-topbar__filters .fanos-dropdown__chevron {
  width: 0.8rem;
  height: 0.8rem;
  flex-shrink: 0;
  margin-inline-start: 0;
}

.roadmap-topbar__icon-filters {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}

.roadmap-bookmark-filter {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.roadmap-bookmark-filter svg {
  width: 1.125rem;
  height: 1.125rem;
}

.roadmap-bookmark-filter:hover {
  color: var(--color-primary);
  border-color: #a5b4fc;
  background: var(--color-primary-soft);
}

.roadmap-bookmark-filter.is-active {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  box-shadow: 0 0 0 3px rgba(63, 65, 145, 0.12);
}

.roadmap-unread-filter {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.roadmap-unread-filter svg {
  width: 1.125rem;
  height: 1.125rem;
}

.roadmap-unread-filter:hover {
  color: var(--color-primary);
  border-color: #a5b4fc;
  background: var(--color-primary-soft);
}

.roadmap-unread-filter.is-active {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  box-shadow: 0 0 0 3px rgba(63, 65, 145, 0.12);
}

.roadmap-task__read {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem;
  border-radius: var(--radius-pill);
  line-height: 1;
}

.roadmap-task__read svg {
  width: 0.875rem;
  height: 0.875rem;
  display: block;
}

.roadmap-task__read--unread {
  color: #1d4ed8;
  background: #eff6ff;
}

.roadmap-task__read--read {
  color: var(--color-muted);
  background: #f3f4f6;
}

.roadmap-task--unread .roadmap-task__title {
  font-weight: 800;
}

.roadmap-sections {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* --- فیلتر سفارشی (dropdown) --- */
.fanos-dropdown {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 9.5rem;
}

.fanos-dropdown__label {
  font-size: 0.75rem;
  color: var(--color-muted-light);
}

.fanos-dropdown__trigger {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-family: var(--font-family);
  font-size: var(--text-sm);
  color: var(--color-ink);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fanos-dropdown__trigger:hover {
  border-color: #a5b4fc;
}

.fanos-dropdown.is-open .fanos-dropdown__trigger {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.fanos-dropdown__trigger-text {
  flex: 1;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fanos-dropdown__chevron {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin-inline-start: auto;
  color: var(--color-muted);
  transition: transform 0.2s ease, color 0.2s ease;
}

.fanos-dropdown.is-open .fanos-dropdown__chevron {
  transform: rotate(180deg);
  color: var(--color-primary);
}

.fanos-dropdown__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
}

.fanos-dropdown__icon svg {
  width: 1.125rem;
  height: 1.125rem;
}

.fanos-dropdown__icon--blue {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.fanos-dropdown__icon--grey {
  background: #f3f4f6;
  color: var(--color-muted);
}

.fanos-dropdown__icon--green {
  background: var(--color-emerald-soft);
  color: var(--color-emerald);
}

.fanos-dropdown__icon--red {
  background: #fef2f2;
  color: var(--color-red);
}

.fanos-dropdown__icon--amber {
  background: #fffbeb;
  color: var(--color-amber);
}

.fanos-dropdown__icon--purple {
  background: #f5f3ff;
  color: #7c3aed;
}

.fanos-dropdown__icon--pink {
  background: #fdf2f8;
  color: #ec4899;
}

.fanos-dropdown__menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  left: auto;
  z-index: 40;
  box-sizing: border-box;
  width: max-content;
  min-width: 100%;
  max-width: min(15.5rem, calc(100vw - 1rem));
  padding: 0.2rem 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.1), 0 2px 8px -2px rgba(0, 0, 0, 0.05);
  overflow-x: hidden;
}

.fanos-dropdown__menu[hidden],
.admin-ms__menu[hidden] {
  display: none !important;
}

.fanos-dropdown--up .fanos-dropdown__menu {
  top: auto;
  bottom: calc(100% + 0.35rem);
}

.fanos-dropdown--up .fanos-dropdown__caret {
  top: auto;
  bottom: -0.4rem;
  border-top: 0;
  border-right: 0;
  border-bottom: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
  transform: translateX(-50%) rotate(-45deg);
}

.fanos-dropdown__menu--searchable,
.fanos-dropdown--wide-menu .fanos-dropdown__menu {
  max-width: min(17rem, calc(100vw - 1rem));
}

.fanos-dropdown--wide-menu .fanos-dropdown__menu {
  max-width: min(18rem, calc(100vw - 1rem));
}

.fanos-dropdown--portaled .fanos-dropdown__menu {
  right: auto;
  z-index: 300;
}

.fanos-dropdown__menu--body-portal {
  position: fixed;
  top: auto;
  bottom: auto;
  right: auto;
  left: auto;
  z-index: 300;
  width: auto;
  min-width: 0;
  max-width: min(15.5rem, calc(100vw - 1rem));
}

.fanos-dropdown__menu--body-portal.fanos-dropdown__menu--searchable {
  max-width: min(17rem, calc(100vw - 1rem));
}

.fanos-dropdown--portaled .fanos-dropdown__caret {
  display: none;
}

.fanos-dropdown__menu--scroll {
  max-height: min(16rem, 60dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.fanos-dropdown__menu--searchable {
  display: flex;
  flex-direction: column;
  max-height: min(16rem, 60dvh);
  padding: 0;
  overflow: hidden;
}

.fanos-dropdown__search-wrap {
  flex-shrink: 0;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--color-border-soft);
  background: var(--color-surface);
}

.fanos-dropdown__search {
  width: 100%;
  min-height: 1.85rem;
  padding: 0.28rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-size: 0.8125rem;
  color: var(--color-ink);
  background: var(--color-surface-muted);
}

.fanos-dropdown__search:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.fanos-dropdown__menu--searchable .fanos-dropdown__options {
  flex: 1;
  min-height: 0;
  max-height: none;
  padding: 0.2rem 0;
}

.fanos-dropdown__no-results {
  margin: 0;
  padding: 0.45rem 0.65rem;
  font-size: 0.8125rem;
  color: var(--color-muted);
  text-align: center;
}

.fanos-dropdown__caret {
  position: absolute;
  top: -0.4rem;
  left: 50%;
  width: 0.75rem;
  height: 0.75rem;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  transform: translateX(-50%) rotate(-45deg);
}

.fanos-dropdown__option {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  min-height: 2rem;
  padding: 0.4rem 0.65rem;
  border: 0;
  background: transparent;
  font-family: var(--font-family);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-ink);
  text-align: right;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.fanos-dropdown__option[hidden] {
  display: none !important;
}

.fanos-dropdown__option .fanos-dropdown__icon {
  width: 1.5rem;
  height: 1.5rem;
}

.fanos-dropdown__option .fanos-dropdown__icon svg {
  width: 0.875rem;
  height: 0.875rem;
}

.fanos-dropdown__option + .fanos-dropdown__option {
  border-top: 1px solid var(--color-border-soft);
}

.fanos-dropdown__option:hover {
  background: var(--color-hover-subtle);
}

.fanos-dropdown__option--selected {
  background: var(--color-primary);
  color: #fff;
}

.fanos-dropdown__option--selected:hover {
  background: var(--color-primary-dark);
  color: #fff;
}

.fanos-dropdown__option--selected .fanos-dropdown__check-icon {
  color: #fff;
}

.fanos-dropdown__option-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fanos-dropdown__option--rich {
  align-items: flex-start;
  gap: 0.45rem;
  padding: 0.42rem 0.6rem;
  min-height: 2.5rem;
}

.fanos-dropdown__option--rich .fanos-dropdown__icon {
  margin-top: 0.1rem;
}

.fanos-dropdown__option--rich .fanos-dropdown__check {
  margin-top: 0.15rem;
}

.fanos-dropdown__option-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  flex: 1;
  min-width: 0;
  text-align: start;
}

.fanos-dropdown__option--rich .fanos-dropdown__option-text {
  width: 100%;
  font-weight: 600;
  line-height: 1.25;
  font-size: 0.8125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fanos-dropdown__option-sub {
  width: 100%;
  font-size: 0.625rem;
  line-height: 1.3;
  color: var(--color-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
  text-align: left;
}

.fanos-dropdown__option--rich .fanos-dropdown__option-sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
}

.fanos-dropdown__option--selected .fanos-dropdown__option-sub {
  color: rgba(255, 255, 255, 0.88);
}

.fanos-dropdown__check {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
}

.fanos-dropdown__check--empty {
  visibility: hidden;
}

.fanos-dropdown__check-icon {
  width: 1rem;
  height: 1rem;
  color: var(--color-primary);
}

.roadmap-section {
  padding: 0.65rem 0.85rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  scroll-margin-top: var(--page-subheader-scroll-margin);
}

.roadmap-section__head {
  margin-bottom: 0.55rem;
}

.roadmap-section__title {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
}

.roadmap-section__title--backlog {
  color: #e11d48;
}

.roadmap-section__title--progress {
  color: #d97706;
}

.roadmap-section__title--review {
  color: #2563eb;
}

.roadmap-section__title--done {
  color: #059669;
}

.roadmap-section__title--cancelled {
  color: #dc2626;
}

.roadmap-section__count-inline {
  font-weight: 800;
}

.roadmap-section__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.roadmap-section__badge svg {
  width: 1rem;
  height: 1rem;
}

.roadmap-section__badge--backlog {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-sm);
  background: #ffe4e6;
  color: #e11d48;
}

.roadmap-section__badge--progress {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-sm);
  background: #fef3c7;
  color: #d97706;
}

.roadmap-section__badge--review {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-sm);
  background: #dbeafe;
  color: #2563eb;
}

.roadmap-section__badge--done {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #d1fae5;
  color: #059669;
}

.roadmap-section__badge--cancelled {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #fecaca;
  color: #dc2626;
}

.roadmap-section__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.roadmap-section__empty {
  margin: 0;
  padding: 0.75rem 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
  text-align: center;
}

.roadmap-task {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.5rem 0.65rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-soft);
  background: var(--color-surface);
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.04);
}

.roadmap-task__hit {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  cursor: pointer;
}

.roadmap-task--backlog {
  background: #fffafb;
  border-color: #ffe4e6;
}

.roadmap-task--progress {
  background: #fffef7;
  border-color: #fef3c7;
}

.roadmap-task--review {
  background: #f8fbff;
  border-color: #bfdbfe;
}

.roadmap-task--done {
  background: #f8fffb;
  border-color: #d1fae5;
}

.roadmap-task--cancelled {
  background: #fff8f8;
  border-color: #fecdd3;
}

.roadmap-task__panel {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  pointer-events: none;
}

.roadmap-task__panel * {
  pointer-events: auto;
}

.roadmap-task__head {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
}

.roadmap-task__headline {
  flex: 1 1 auto;
  min-width: 0;
}

.roadmap-task__actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  direction: ltr;
  justify-content: flex-start;
}

.roadmap-task__actions .roadmap-task__read {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--color-border-soft);
}

.roadmap-task__share,
.roadmap-task__bookmark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.roadmap-task__share svg,
.roadmap-task__bookmark svg {
  width: 0.95rem;
  height: 0.95rem;
}

.roadmap-task__share:hover,
.roadmap-task__bookmark:hover {
  color: var(--color-primary);
  border-color: var(--color-primary-soft);
  background: var(--color-primary-soft);
}

.roadmap-task__bookmark.is-active {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.roadmap-task__delete {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.roadmap-task__delete svg {
  width: 0.95rem;
  height: 0.95rem;
}

.roadmap-task__delete:hover {
  color: #dc2626;
  border-color: #fecaca;
  background: #fef2f2;
}

.roadmap-task-detail__delete {
  flex-shrink: 0;
}

.roadmap-task__main {
  flex: 1 1 auto;
  min-width: 0;
}

.roadmap-task__main:empty {
  display: none;
}

.roadmap-task__title {
  margin: 0 0 0.25rem;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-ink);
}

.roadmap-task__product {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 0.625rem;
  font-weight: 700;
  white-space: nowrap;
}

.roadmap-task--has-subtasks {
  align-items: flex-start;
}

.roadmap-task--has-subtasks .roadmap-task__aside {
  padding-top: 0.2rem;
}

.roadmap-task__subtasks {
  margin-top: 0.35rem;
  padding: 0.3rem 0.45rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-soft);
  background: rgba(255, 255, 255, 0.65);
}

.roadmap-task__subtasks-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.2rem;
}

.roadmap-task__subtasks-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--color-muted);
}

.roadmap-task__subtasks-progress {
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--color-muted);
}

.roadmap-task__subtasks-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.roadmap-task__subtasks-list--scroll {
  max-height: 3.5rem;
  overflow-y: auto;
  padding-inline-end: 0.15rem;
}

.roadmap-task__subtask {
  display: flex;
  align-items: flex-start;
  gap: 0.3rem;
  min-width: 0;
  font-size: 0.68rem;
  line-height: 1.3;
  color: var(--color-ink);
}

.roadmap-task__subtask-check {
  flex-shrink: 0;
  width: 0.9rem;
  height: 0.9rem;
  margin-top: 0.1rem;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.roadmap-task__subtask-check--readonly {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  line-height: 1;
  color: var(--color-muted);
}

.roadmap-task__subtask-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roadmap-task__subtask.is-done .roadmap-task__subtask-title {
  color: var(--color-muted);
  text-decoration: line-through;
}

.roadmap-task__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.45rem;
}

.roadmap-task__date {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: var(--color-muted-light);
}

.roadmap-task__date svg {
  width: 0.9rem;
  height: 0.9rem;
  flex-shrink: 0;
}

.roadmap-task__reminder {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.68rem;
  color: #7c3aed;
}

.roadmap-task__reminder svg {
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
}

.roadmap-task__reminder--due {
  color: #dc2626;
  font-weight: 600;
}

.roadmap-task-detail__reminder {
  margin: 0.1rem 0 0;
  font-size: 0.75rem;
}

.roadmap-reminder-field__hint {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  color: var(--color-muted-light);
}

.fanos-jalali-date {
  position: relative;
  max-width: 16rem;
}

.fanos-jalali-date__control {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
}

.fanos-jalali-date__display {
  flex: 1;
  cursor: pointer;
}

.fanos-jalali-date__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  flex-shrink: 0;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 0.5rem;
  background: #fff;
  color: var(--color-muted-light);
  cursor: pointer;
}

.fanos-jalali-date__toggle svg {
  width: 1.1rem;
  height: 1.1rem;
}

.fanos-jalali-date__toggle:hover {
  border-color: #c4b5fd;
  background: #f5f3ff;
  color: #7c3aed;
}

.fanos-jalali-date__panel {
  position: absolute;
  z-index: 60;
  top: calc(100% + 0.35rem);
  right: 0;
  width: min(18rem, 92vw);
  padding: 0.65rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}

.fanos-jalali-date__panel--fixed {
  position: fixed;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.fanos-jalali-date__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.fanos-jalali-date__title {
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  flex: 1;
}

.fanos-jalali-date__nav {
  width: 2rem;
  height: 2rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: #f8fafc;
  color: var(--color-text, #111827);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fanos-jalali-date__nav:hover {
  border-color: #c4b5fd;
  background: #f3f4f6;
  color: #7c3aed;
}

.fanos-jalali-date__weekdays,
.fanos-jalali-date__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.15rem;
}

.fanos-jalali-date__weekday {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-muted-light);
  padding: 0.2rem 0;
}

.fanos-jalali-date__day {
  aspect-ratio: 1;
  border: none;
  border-radius: 0.45rem;
  background: transparent;
  font-size: 0.8rem;
  cursor: pointer;
}

.fanos-jalali-date__day:hover {
  background: #f3f4f6;
}

.fanos-jalali-date__day.is-muted {
  color: #9ca3af;
}

.fanos-jalali-date__day.is-today {
  box-shadow: inset 0 0 0 1px #a78bfa;
}

.fanos-jalali-date__day.is-selected {
  background: #7c3aed;
  color: #fff;
  font-weight: 700;
}

.fanos-jalali-date__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--color-border, #e5e7eb);
}

.fanos-jalali-date__footer-btn {
  border: none;
  background: transparent;
  color: #7c3aed;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.2rem 0.35rem;
}

.fanos-jalali-date__footer-btn--primary {
  color: #2563eb;
}

.workbench-side-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.workbench-side-panels > .workbench-reminders,
.workbench-side-panels > .workbench-fav-tags {
  margin-bottom: 0;
  height: 100%;
}

.workbench-side-panels:has(> .workbench-reminders:only-child),
.workbench-side-panels:has(> .workbench-fav-tags:only-child) {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 860px) {
  .workbench-side-panels {
    grid-template-columns: minmax(0, 1fr);
  }
}

.workbench-reminders {
  margin-bottom: 0.75rem;
}

.workbench-fav-tags {
  position: relative;
  margin-bottom: 0.75rem;
  padding: 0.55rem 0.75rem 0.75rem;
}

.workbench-fav-tags__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.workbench-fav-tags__title {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
}

.workbench-fav-tags__title svg {
  width: 0.95rem;
  height: 0.95rem;
  color: #7c3aed;
}

.workbench-fav-tags__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.workbench-fav-tags__empty {
  margin: 0;
  font-size: 0.78rem;
  color: var(--color-muted-light, #94a3b8);
  line-height: 1.7;
}

.workbench-fav-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  border-radius: var(--radius-pill, 999px);
  background: #eef2ff;
  color: #4338ca;
  overflow: hidden;
}

.workbench-fav-tag__open {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 14rem;
  padding: 0.25rem 0.2rem 0.25rem 0.6rem;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.workbench-fav-tag__open:hover {
  text-decoration: underline;
}

.workbench-fav-tag__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 0.8rem;
  height: 0.8rem;
  opacity: 0.85;
}

.workbench-fav-tag__icon svg {
  width: 100%;
  height: 100%;
}

.workbench-fav-tag__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workbench-fav-tag__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  line-height: 1;
  font-size: 1rem;
  opacity: 0.7;
}

.workbench-fav-tag__remove:hover {
  opacity: 1;
  background: rgba(67, 56, 202, 0.12);
}

.workbench-fav-tags__field {
  position: relative;
  max-width: 22rem;
}

.workbench-side-panels .workbench-fav-tags__field {
  max-width: none;
}

.workbench-side-panels .workbench-reminders__list {
  max-height: 13.5rem;
  overflow-y: auto;
}

.workbench-fav-tags__input-wrap {
  min-height: 2.25rem;
}

.workbench-reminders__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.workbench-reminders__title {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
}

.workbench-reminders__title svg {
  width: 0.95rem;
  height: 0.95rem;
  color: #7c3aed;
}

.workbench-reminders__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: #ede9fe;
  color: #6d28d9;
  font-size: 0.68rem;
  font-weight: 700;
}

.workbench-reminders__list {
  display: flex;
  flex-direction: column;
}

.workbench-reminders__item {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  border-top: 1px solid var(--color-border, #e5e7eb);
}

.workbench-reminders__main {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  flex: 1 1 auto;
}

.workbench-reminders__item:first-child {
  border-top: none;
}

.workbench-reminders__task-title {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: inherit;
  color: inherit;
  cursor: pointer;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.workbench-reminders__task-title:hover,
.workbench-reminders__task-title:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
}

.workbench-reminders__task-title:focus-visible {
  outline: 2px solid var(--color-primary-soft);
  outline-offset: 2px;
  border-radius: 2px;
}

.workbench-reminders__meta {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.35rem;
}

.workbench-reminders__product {
  font-size: 0.68rem;
  color: var(--color-muted-light);
  white-space: nowrap;
}

.workbench-reminders__date {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.68rem;
  color: #dc2626;
  font-weight: 600;
  white-space: nowrap;
}

.workbench-reminders__date svg {
  width: 0.75rem;
  height: 0.75rem;
}

.workbench-reminders__actions {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.35rem;
}

.workbench-reminders__snooze-group {
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 0.35rem;
}

.workbench-reminders__snooze {
  border: none;
  border-inline-start: 1px solid var(--color-border, #e5e7eb);
  background: #fff;
  color: var(--color-text, #111827);
  border-radius: 0;
  padding: 0.18rem 0.4rem;
  font-size: 0.68rem;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}

.workbench-reminders__snooze:first-child {
  border-inline-start: none;
}

.workbench-reminders__snooze:hover {
  border-color: #c4b5fd;
  background: #f5f3ff;
}

.workbench-reminders__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 1px solid var(--color-border, #e5e7eb);
  background: #fff;
  color: #dc2626;
  border-radius: 0.35rem;
  cursor: pointer;
}

.workbench-reminders__clear svg {
  width: 0.8rem;
  height: 0.8rem;
}

.workbench-reminders__clear:hover {
  border-color: #fecaca;
  background: #fef2f2;
}

.workbench-reminders__empty {
  margin: 0;
  padding: 0.65rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--color-muted-light);
}

@media (max-width: 767px) {
  .workbench-reminders__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title title"
      "meta actions";
    gap: 0.25rem 0.45rem;
    align-items: center;
    padding: 0.45rem 0.65rem;
  }

  .workbench-reminders__main {
    display: contents;
  }

  .workbench-reminders__task-title {
    grid-area: title;
    width: 100%;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: unset;
    line-height: 1.35;
  }

  .workbench-reminders__meta {
    grid-area: meta;
    min-width: 0;
    flex-wrap: wrap;
    gap: 0.25rem 0.4rem;
  }

  .workbench-reminders__product {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 6rem;
  }

  .workbench-reminders__actions {
    grid-area: actions;
    justify-self: end;
    flex-shrink: 0;
  }

  .workbench-reminders__snooze {
    padding-inline: 0.3rem;
  }
}

.roadmap-task__progress-col {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 7.5rem;
}

.roadmap-task__progress-pct {
  font-size: 0.75rem;
  font-weight: 700;
  color: #d97706;
  white-space: nowrap;
}

.roadmap-task__progress-col--card {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-width: 3.25rem;
  padding: 0.15rem 0.35rem;
}

.roadmap-task__progress-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-pill);
  background: #fef3c7;
  color: #d97706;
  font-size: 0.625rem;
  font-weight: 800;
  white-space: nowrap;
}

.roadmap-task__progress-label {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-muted-light);
  white-space: nowrap;
}

.roadmap-progress {
  flex: 1;
  height: 0.4rem;
  min-width: 4.5rem;
  border-radius: var(--radius-pill);
  background: #fde68a;
  overflow: hidden;
}

.roadmap-progress__fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
}

.roadmap-priority {
  display: inline-flex;
  padding: 0.12rem 0.45rem;
  border-radius: var(--radius-pill);
  font-size: 0.625rem;
  font-weight: 700;
}

.roadmap-priority--urgent {
  background: #fecaca;
  color: #dc2626;
}

.roadmap-priority--high {
  background: #fef3c7;
  color: #d97706;
}

.roadmap-priority--medium {
  background: #dbeafe;
  color: #2563eb;
}

.roadmap-priority--low {
  background: #f3f4f6;
  color: #6b7280;
}

.roadmap-cat {
  display: inline-flex;
  padding: 0.12rem 0.45rem;
  border-radius: var(--radius-pill);
  font-size: 0.625rem;
  font-weight: 700;
}

.roadmap-cat--support {
  background: #fce7f3;
  color: #db2777;
}

.roadmap-cat--security {
  background: #ede9fe;
  color: #7c3aed;
}

.roadmap-cat--infrastructure {
  background: #e0e7ff;
  color: #4f46e5;
}

.roadmap-cat--development {
  background: #f3e8ff;
  color: #9333ea;
}

.roadmap-cat--userSuggestion {
  background: #fce7f3;
  color: #be185d;
}

.roadmap-task__title--editable {
  display: block;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  cursor: text;
  outline: none;
  border-radius: var(--radius-sm);
  padding: 0.1rem 0.2rem;
  margin-inline: -0.2rem;
}

.roadmap-task__title--editable:hover,
.roadmap-task__title--editable:focus {
  background: var(--color-primary-soft);
  box-shadow: 0 0 0 1px var(--color-border);
}

.roadmap-task__inline-chip {
  border: 0;
  cursor: pointer;
  font-family: inherit;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.roadmap-task__inline-chip:hover,
.roadmap-task__inline-chip:focus-visible {
  box-shadow: 0 0 0 2px var(--color-primary-soft);
  outline: none;
}

.roadmap-task-tags--editable {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.25rem;
  margin: -0.1rem -0.25rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}

.roadmap-task-tags--editable:hover,
.roadmap-task-tags--editable:focus-visible {
  background: var(--color-primary-soft);
  outline: none;
}

.roadmap-task-tags__empty {
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--color-muted);
}

.roadmap-task-tag--chip {
  pointer-events: none;
}

.roadmap-task-inline-menu {
  position: fixed;
  z-index: 130;
  min-width: 10rem;
  max-width: min(16rem, 92vw);
  max-height: min(16rem, 60dvh);
  overflow-y: auto;
  padding: 0.35rem 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}

.roadmap-task-inline-menu__item {
  display: block;
  width: 100%;
  padding: 0.55rem 0.85rem;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
  text-align: right;
  cursor: pointer;
}

.roadmap-task-inline-menu__item:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.roadmap-task-inline-popover {
  position: fixed;
  z-index: 130;
  width: min(18rem, 92vw);
  padding: 0;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
}

.roadmap-task-inline-popover__head {
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--color-border-soft);
  font-size: var(--text-sm);
  font-weight: 800;
}

.roadmap-task-inline-popover__body {
  padding: 0.75rem 0.85rem;
}

.roadmap-task-inline-popover__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  border-top: 1px solid var(--color-border-soft);
}

.roadmap-tags-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.roadmap-tags-suggestions {
  position: absolute;
  z-index: 40;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.25rem;
  max-height: 14rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.16);
}

.roadmap-tags-suggestions[hidden] {
  display: none;
}

.roadmap-tags-suggestions__item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: none;
  border-radius: var(--radius-sm, 0.4rem);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 0.8125rem;
  text-align: right;
  cursor: pointer;
}

.roadmap-tags-suggestions__item:hover,
.roadmap-tags-suggestions__item.is-active {
  background: var(--color-primary-soft, #eef2ff);
  color: var(--color-primary, #4338ca);
}

.roadmap-tags-suggestions__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 0.85rem;
  height: 0.85rem;
  opacity: 0.7;
}

.roadmap-tags-suggestions__icon svg {
  width: 100%;
  height: 100%;
}

.roadmap-tags-suggestions__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* داخل popover کوچک ویرایش تگ، لیست پیشنهاد به‌صورت درون‌جریان نمایش داده می‌شود
   تا روی دکمه‌های ذخیره/انصراف نیفتد و کلیک ذخیره همیشه کار کند. */
.roadmap-task-inline-popover .roadmap-tags-suggestions {
  position: static;
  margin-top: 0.4rem;
  max-height: 9rem;
  box-shadow: none;
}

.roadmap-tags-field__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
}

.roadmap-tags-field__hint {
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-muted-light);
}

.roadmap-tags-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: 0.35rem;
  min-height: 2.5rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.roadmap-tags-input:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-soft);
}

.roadmap-tags-input__text {
  flex: 1 1 5rem;
  min-width: 5rem;
  max-width: 100%;
  border: none;
  background: transparent;
  padding: 0.2rem 0.35rem;
  font: inherit;
  color: var(--color-text);
  outline: none;
}

.roadmap-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  max-width: 100%;
  padding: 0.15rem 0.35rem 0.15rem 0.45rem;
  border-radius: var(--radius-pill);
  background: #eef2ff;
  color: #4338ca;
  font-size: 0.75rem;
  font-weight: 600;
}

.roadmap-tag-chip__icon,
.roadmap-task-tag__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 0.75rem;
  height: 0.75rem;
  opacity: 0.85;
}

.roadmap-tag-chip__icon svg,
.roadmap-task-tag__icon svg {
  width: 100%;
  height: 100%;
}

.roadmap-tag-chip__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roadmap-tag-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  line-height: 1;
  opacity: 0.75;
}

.roadmap-tag-chip__remove:hover {
  opacity: 1;
  background: rgba(67, 56, 202, 0.12);
}

.roadmap-task-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.roadmap-task-tags--meta {
  justify-content: flex-start;
}

.roadmap-task-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.1rem 0.4rem 0.1rem 0.35rem;
  border: none;
  border-radius: var(--radius-pill);
  background: #eef2ff;
  color: #4338ca;
  font-family: inherit;
  font-size: 0.625rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.roadmap-task-tag:hover {
  background: #e0e7ff;
  color: #3730a3;
  box-shadow: 0 0 0 1px rgba(67, 56, 202, 0.18);
}

.roadmap-task-tag__text {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 10rem;
}

.roadmap-task-detail__chips .roadmap-task-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.roadmap-tag-modal .admin-modal__panel {
  width: min(28rem, calc(100vw - 2rem));
}

.roadmap-tag-modal__empty {
  margin: 0;
  padding: 0.75rem 0.25rem;
  font-size: var(--text-sm);
  color: var(--color-muted);
  text-align: center;
}

.roadmap-tag-modal .fanos-loading--inline {
  padding: 0.75rem 0.25rem;
}

.roadmap-tag-modal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: min(24rem, 60vh);
  overflow-y: auto;
}

.roadmap-tag-modal__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: var(--color-page);
  font-family: inherit;
  text-align: right;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.roadmap-tag-modal__item:hover {
  border-color: var(--color-primary-soft);
  background: var(--color-primary-soft);
}

.roadmap-tag-modal__item-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.45;
}

.roadmap-tag-modal__item-meta {
  font-size: 0.75rem;
  color: var(--color-muted-light);
}

.roadmap-entities-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.roadmap-entities-field__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
}

.roadmap-entities-field__hint {
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-muted-light);
}

.roadmap-entities-input {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.35rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: var(--color-page);
}

.roadmap-entities-input__text {
  flex: 1 1 8rem;
  min-width: 6rem;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--color-ink);
  outline: none;
}

.roadmap-entities-input__results[hidden] {
  display: none !important;
}

.roadmap-entities-input__results:not([hidden]) {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 0.25rem);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  max-height: min(16rem, 40vh);
  overflow-y: auto;
  padding: 0.35rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.roadmap-entities-input__results--portal {
  position: fixed;
  inset-inline: auto;
  top: auto;
  max-width: min(24rem, calc(100vw - 1rem));
}

.roadmap-entities-result__item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.45rem 0.55rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: inherit;
  text-align: right;
  cursor: pointer;
}

.roadmap-entities-result__item:hover {
  background: var(--color-primary-soft);
}

.roadmap-entities-result__avatar,
.roadmap-entity-chip__avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.roadmap-entities-result__avatar--placeholder,
.roadmap-entity-chip__avatar--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 700;
}

.roadmap-entities-result__text,
.roadmap-entity-chip__text {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

.roadmap-entities-result__title,
.roadmap-entity-chip__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
}

.roadmap-entities-result__subtitle,
.roadmap-entity-chip__subtitle,
.roadmap-task-entity__subtitle {
  font-size: 0.72rem;
  color: var(--color-muted-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.roadmap-entities-result__type {
  font-size: 0.68rem;
  color: var(--color-muted);
}

.roadmap-entities-result__status {
  margin: 0;
  padding: 0.45rem 0.35rem;
  font-size: var(--text-sm);
  color: var(--color-muted);
  text-align: center;
}

.roadmap-entities-result__status--error {
  color: var(--color-danger);
}

.roadmap-entities-result__p24-badge {
  color: var(--color-primary);
  font-size: 0.7rem;
  font-weight: 700;
}

.roadmap-crm-links-row {
  display: flex;
  align-items: stretch;
  gap: 0.45rem;
}

.roadmap-crm-links-row__input {
  flex: 1 1 auto;
  min-width: 0;
}

.roadmap-crm-links-quick {
  display: flex;
  flex-shrink: 0;
  align-items: stretch;
  gap: 0.35rem;
}

.roadmap-crm-links-quick__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.65rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-primary);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.roadmap-crm-links-quick__btn:hover {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
}

.roadmap-crm-links-quick__btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

.roadmap-task-edit__compact-block .roadmap-crm-links-quick__btn {
  padding-inline: 0.5rem;
  font-size: 0.6875rem;
}

@media (max-width: 767px) {
  .roadmap-crm-links-row--with-quick {
    flex-wrap: wrap;
  }

  .roadmap-crm-links-quick {
    width: 100%;
  }

  .roadmap-crm-links-quick__btn {
    flex: 1 1 0;
  }
}

.roadmap-entity-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  padding: 0.2rem 0.35rem 0.2rem 0.2rem;
  border: 1px solid var(--color-border-soft);
  border-radius: 999px;
  background: var(--color-surface);
}

.roadmap-entity-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
}

.roadmap-entity-chip__remove:hover {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.roadmap-task-entities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.roadmap-task-detail__entities {
  margin-top: 0.65rem;
}

.roadmap-task-entity {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  padding: 0.25rem 0.55rem 0.25rem 0.35rem;
  border: 1px solid var(--color-border-soft);
  border-radius: 999px;
  background: var(--color-surface);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.roadmap-task-entity:hover {
  border-color: var(--color-primary-soft);
  background: var(--color-primary-soft);
}

.roadmap-task-entity__avatar {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.roadmap-task-entity__text {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
  text-align: right;
}

.roadmap-task-entity__title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.roadmap-entity-modal .admin-modal__panel {
  width: min(28rem, calc(100vw - 2rem));
}

.roadmap-entity-modal__empty {
  margin: 0;
  padding: 0.75rem 0.25rem;
  font-size: var(--text-sm);
  color: var(--color-muted);
  text-align: center;
}

.roadmap-entity-modal .fanos-loading--inline {
  padding: 0.75rem 0.25rem;
}

.roadmap-entity-modal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: min(24rem, 60vh);
  overflow-y: auto;
}

.roadmap-entity-modal__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: var(--color-page);
  font-family: inherit;
  text-align: right;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.roadmap-entity-modal__item:hover {
  border-color: var(--color-primary-soft);
  background: var(--color-primary-soft);
}

.roadmap-entity-modal__item-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.45;
}

.roadmap-entity-modal__item-meta {
  font-size: 0.75rem;
  color: var(--color-muted-light);
}

.roadmap-task-edit__compact-block .roadmap-entities-field--compact,
.roadmap-task-edit__compact-block .roadmap-tags-field--compact {
  gap: 0.25rem;
}

.roadmap-task-edit__compact-block .roadmap-entities-field__label,
.roadmap-task-edit__compact-block .roadmap-tags-field__label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-muted-light);
}

.roadmap-task-edit__compact-block .roadmap-entities-input,
.roadmap-task-edit__compact-block .roadmap-tags-input {
  min-height: 2.125rem;
  padding: 0.2rem 0.45rem;
  background: var(--color-surface);
  border-color: var(--color-border);
}

.roadmap-task-edit__compact-block .roadmap-entities-input__text,
.roadmap-task-edit__compact-block .roadmap-tags-input__text {
  font-size: 0.8125rem;
}

.roadmap-avatar-stack {
  display: flex;
  align-items: center;
}

.roadmap-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-inline-start: -0.4rem;
  border: 2px solid var(--color-surface);
  border-radius: 50%;
  background: var(--avatar-bg, var(--color-primary));
  font-size: 0.55rem;
  font-weight: 700;
  color: #fff;
}

.roadmap-avatar-stack .roadmap-avatar:first-child {
  margin-inline-start: 0;
}

.roadmap-avatar--img {
  object-fit: cover;
  padding: 0;
  background: var(--color-surface);
}

.roadmap-avatar-more {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-muted);
}

.roadmap-task__aside {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  gap: 0.35rem;
  padding: 0.2rem 0.35rem 0.2rem 0.45rem;
  border-inline-start: 1px solid var(--color-border);
  box-sizing: border-box;
  pointer-events: none;
}

.roadmap-task__aside * {
  pointer-events: auto;
}

.roadmap-task__avatars {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0;
}

.roadmap-task__avatars .roadmap-avatar-stack {
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.roadmap-task__avatars .roadmap-avatar {
  margin-inline-start: 0;
  position: relative;
}

.roadmap-task__avatars .roadmap-avatar-stack .roadmap-avatar:not(:first-child) {
  margin-top: -0.42rem;
}

.roadmap-task__avatars .roadmap-avatar-stack .roadmap-avatar:nth-child(1) {
  z-index: 1;
}

.roadmap-task__avatars .roadmap-avatar-stack .roadmap-avatar:nth-child(2) {
  z-index: 2;
}

.roadmap-task__avatars .roadmap-avatar-stack .roadmap-avatar:nth-child(3) {
  z-index: 3;
}

.roadmap-task__avatars .roadmap-avatar-more {
  margin-top: 0.15rem;
  font-size: 0.625rem;
  line-height: 1;
}

.roadmap-vote {
  flex-shrink: 0;
  display: grid;
  grid-template-rows: 1.1rem minmax(0.9rem, auto) 1.1rem;
  justify-items: center;
  align-content: center;
  gap: 0;
  width: 2.35rem;
  min-width: 2.35rem;
  padding: 0;
  box-sizing: border-box;
}

.roadmap-task-detail__vote.roadmap-vote {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: auto;
  gap: 0.1rem;
  width: 3.5rem;
  min-width: 3.5rem;
  padding: 0.35rem 0.25rem;
  border-inline-start: 0;
}

.roadmap-vote__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 1.35rem;
  height: 1.1rem;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: color 0.15s, transform 0.15s;
}

.roadmap-vote__btn svg {
  width: 0.75rem;
  height: 0.75rem;
}

.roadmap-vote__up {
  color: #10b981;
}

.roadmap-vote__down {
  color: #ef4444;
}

.roadmap-vote__btn:hover {
  transform: scale(1.1);
}

.roadmap-vote__btn.is-active {
  transform: scale(1.08);
}

.roadmap-vote__up.is-active {
  color: #059669;
  background: rgba(16, 185, 129, 0.14);
  border-radius: var(--radius-sm);
}

.roadmap-vote__down.is-active {
  color: #dc2626;
  background: rgba(239, 68, 68, 0.12);
  border-radius: var(--radius-sm);
}

.roadmap-vote__score {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0.9rem;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.roadmap-vote__score.num-ltr {
  display: flex;
  direction: ltr;
  unicode-bidi: isolate;
}

.roadmap-vote--backlog .roadmap-vote__score {
  color: #1f2937;
}

.roadmap-vote--progress .roadmap-vote__score {
  color: #1f2937;
}

.roadmap-vote--done .roadmap-vote__score {
  color: #1f2937;
}

.roadmap-vote--cancelled .roadmap-vote__score {
  color: #1f2937;
}

.roadmap-section__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.65rem;
}

.roadmap-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.7rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.roadmap-toggle-btn--backlog {
  color: #e11d48;
  border-color: #fecdd3;
}

.roadmap-toggle-btn--progress {
  color: #d97706;
  border-color: #fde68a;
}

.roadmap-toggle-btn--review {
  color: #2563eb;
  border-color: #bfdbfe;
}

.roadmap-toggle-btn--done {
  color: #059669;
  border-color: #a7f3d0;
}

.roadmap-toggle-btn--cancelled {
  color: #dc2626;
  border-color: #fecaca;
}

.roadmap-toggle-btn--backlog:hover {
  background: #fff1f2;
}

.roadmap-toggle-btn--progress:hover {
  background: #fffbeb;
}

.roadmap-toggle-btn--review:hover {
  background: #eff6ff;
}

.roadmap-toggle-btn--done:hover {
  background: #ecfdf5;
}

.roadmap-toggle-btn--cancelled:hover {
  background: #fff1f2;
}

.roadmap-toggle-btn--less {
  width: auto;
  padding: 0.35rem 0.75rem;
  border: none;
  background: transparent;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-muted);
}

.roadmap-toggle-btn--less:hover {
  color: var(--color-primary);
  background: transparent;
}

.roadmap-toggle-btn__chevron {
  width: 1rem;
  height: 1rem;
}

@media (max-width: 767px) {
  .roadmap-topbar {
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.4rem;
  }

  .roadmap-topbar__filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    width: 100%;
    align-items: stretch;
    overflow-x: visible;
  }

  .roadmap-topbar__filters .fanos-dropdown {
    flex: unset;
    min-width: 0;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
  }

  .roadmap-topbar__filters .fanos-dropdown[data-dropdown="roadmap-product"],
  .roadmap-topbar__filters .fanos-dropdown[data-dropdown="roadmap-add-product"],
  .roadmap-topbar__filters .fanos-dropdown[data-dropdown="roadmap-owners"] {
    max-width: none;
  }

  .roadmap-topbar__filters .fanos-dropdown__option--rich {
    padding: 0.42rem 0.55rem;
    min-height: 2.35rem;
  }

  .roadmap-topbar__icon-filters {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    justify-content: flex-start;
  }

  .roadmap-bookmark-filter,
  .roadmap-unread-filter {
    width: 2rem;
    height: 2rem;
  }

  .roadmap-bookmark-filter svg,
  .roadmap-unread-filter svg {
    width: 0.85rem;
    height: 0.85rem;
  }

  .roadmap-topbar__filters .fanos-dropdown__label {
    font-size: 0.6rem;
  }

  .roadmap-topbar__filters .fanos-dropdown__trigger {
    width: 100%;
    box-sizing: border-box;
    min-height: 1.85rem;
    padding: 0.18rem 0.42rem;
    font-size: 0.68rem;
  }

  .roadmap-topbar__filters .fanos-dropdown__trigger-text {
    font-size: 0.68rem;
  }

  .roadmap-topbar__filters .fanos-dropdown__chevron {
    width: 0.75rem;
    height: 0.75rem;
  }

  .roadmap-task {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .roadmap-task__panel {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }

  .roadmap-task__head {
    flex-wrap: wrap;
  }

  .roadmap-task__actions {
    direction: ltr;
    justify-content: flex-start;
  }

  .roadmap-task__main {
    width: 100%;
    min-width: 0;
  }

  .roadmap-task-detail__title-row {
    flex-wrap: wrap;
  }

  .roadmap-task-detail__actions {
    direction: ltr;
    justify-content: flex-start;
  }

  .roadmap-task__progress-col {
    order: 5;
    width: 100%;
    min-width: 0;
  }

  .roadmap-task__aside {
    order: 5;
    width: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.65rem;
    margin-top: 0.35rem;
    padding: 0.5rem 0.35rem 0.2rem;
    border-top: 1px solid var(--color-border-soft);
    border-inline-start: 0;
  }

  .roadmap-task__avatars {
    order: unset;
    flex-direction: column;
    padding: 0;
  }

  .roadmap-vote {
    order: unset;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: auto;
    min-width: 0;
    padding: 0 0.65rem;
    border-inline-start: 1px solid var(--color-border);
    border-top: 0;
    justify-content: center;
    gap: 0.75rem;
  }
}

/* --- جزئیات آیتم رودمپ --- */
.roadmap-task--interactive {
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.roadmap-task--interactive .roadmap-task__title,
.roadmap-task--interactive .roadmap-task__meta,
.roadmap-task--interactive .roadmap-task__headline,
.roadmap-task--interactive .roadmap-task__subtasks,
.roadmap-task--interactive .roadmap-vote__score,
.roadmap-task--interactive .roadmap-cat,
.roadmap-task--interactive .roadmap-task__product,
.roadmap-task--interactive .roadmap-task__date,
.roadmap-task--interactive .roadmap-task__reminder,
.roadmap-task--interactive .roadmap-task__progress-badge,
.roadmap-task--interactive .roadmap-task__subtask-title,
.roadmap-task--interactive .roadmap-task__subtasks-label,
.roadmap-task--interactive .roadmap-task__subtasks-progress,
.roadmap-task--interactive .roadmap-task-tag:not([data-roadmap-tag]),
.roadmap-task--interactive .roadmap-task__inline-chip,
.roadmap-task--interactive .roadmap-task-tags--editable {
  cursor: pointer;
}

.roadmap-task--interactive:hover {
  box-shadow: 0 3px 12px -4px rgba(0, 0, 0, 0.08);
}

.roadmap-task--interactive:focus-visible {
  outline: 2px solid var(--color-primary-soft);
  outline-offset: 2px;
}

.roadmap-task-detail {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  max-width: 100%;
}

.roadmap-task-page .page-body {
  padding-top: 0;
  gap: 0.5rem;
}

.page-main:has(.roadmap-task-page) {
  padding-top: 0.5rem;
}

@media (min-width: 640px) {
  .page-main:has(.roadmap-task-page) {
    padding-top: 0.65rem;
  }
}

@media (min-width: 768px) {
  .page-main:has(.roadmap-task-page) {
    padding-top: 0.75rem;
  }
}

@media (min-width: 1024px) {
  .page-main:has(.roadmap-task-page) {
    padding-top: 0.875rem;
  }
}

.roadmap-task-detail__top {
  display: flex;
  align-items: center;
  min-height: 0;
}

.roadmap-task-detail__back {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-family: var(--font-family);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.roadmap-task-detail__back svg {
  width: 0.875rem;
  height: 0.875rem;
}

.roadmap-task-detail__back:hover {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-soft);
}

.roadmap-task-detail__header-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.roadmap-task-detail__hero {
  display: flex;
  align-items: stretch;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.roadmap-task-detail__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.roadmap-task-detail__title-block {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.roadmap-task-detail__content {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.roadmap-task-detail__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
}

.roadmap-task-detail__actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 100%;
  width: 100%;
  order: -1;
  direction: ltr;
  justify-content: flex-start;
}

.roadmap-task-detail__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.4rem;
  min-width: 0;
}

/* Editable detail: status chips on top, then each meta on its own divided row. */
.roadmap-task-detail__chips--editable {
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}
.roadmap-task-detail__chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.4rem;
}
.roadmap-task-detail__meta-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.25rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 0.7rem;
  padding: 0.25rem 0.85rem;
  background: transparent;
}
@media (max-width: 640px) {
  .roadmap-task-detail__meta-list {
    grid-template-columns: 1fr;
    gap: 0;
  }
}
.roadmap-task-detail__meta-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* چیدمان عمودی تمام‌عرض: ابتدا تگ‌ها، سپس مرتبط با — هر کدام در یک سطر کامل
   تا تگ‌ها/آیتم‌ها به‌صورت سطری کنار هم بیایند و در انتهای کادر به خط بعد بروند. */
.roadmap-task-detail__meta-list--stacked {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  gap: 0;
}
.roadmap-task-detail__meta-list--stacked .roadmap-task-detail__meta-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  width: 100%;
  min-width: 0;
  grid-template-columns: none;
}
.roadmap-task-detail__meta-list--stacked .roadmap-task-detail__meta-control {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}
.roadmap-task-detail__meta-list--stacked .roadmap-task__meta-inline {
  flex: 1 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
/* آیتم‌های «مرتبط با» نیز سطری و فشرده — عرض هر باکس محدود تا بیشترین تعداد در هر ردیف جا شود */
.roadmap-task-detail__meta-list--stacked .roadmap-task__entity-box {
  flex: 0 1 auto;
  max-width: 100%;
}
.roadmap-task-detail__meta-list--stacked .roadmap-task__entity-box-text {
  max-width: 12rem;
}
.roadmap-task-detail__meta-list--stacked
  .roadmap-task-detail__meta-row
  + .roadmap-task-detail__meta-row {
  border-top: 1px solid var(--color-border-soft, #eef0f4);
}
.roadmap-task-detail__meta-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  min-height: 2.5rem;
  padding: 0.5rem 0;
}
.roadmap-task-detail__meta-row + .roadmap-task-detail__meta-row {
  border-top: 1px solid var(--color-border-soft, #eef0f4);
}
.roadmap-task-detail__meta-label {
  flex: 0 0 4.5rem;
  padding-top: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--color-muted, #64748b);
}
.roadmap-task-detail__meta-control {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}

/* Mobile: stack chips + meta label/control vertically to avoid squeeze/overlap */
@media (max-width: 767px) {
  .roadmap-task-detail__chip-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }

  .roadmap-task-detail__chip-row > * {
    max-width: 100%;
  }

  .roadmap-task-detail__meta-list--stacked .roadmap-task-detail__meta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
  }

  .roadmap-task-detail__meta-list--stacked .roadmap-task-detail__meta-label {
    flex: none;
    width: auto;
    padding-top: 0;
  }

  .roadmap-task-detail__attach-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }
}

.roadmap-task-detail__side {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 3.75rem;
  padding-inline-start: 0.65rem;
  border-inline-start: 1px solid var(--color-border-soft);
}

.roadmap-task-detail__side-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  width: 100%;
}

.roadmap-task-detail__side-stat--readonly {
  padding: 0.35rem 0.25rem;
}

.roadmap-task-detail__side-stat--progress .roadmap-task__progress-pct {
  font-size: 0.85rem;
}

.roadmap-task-detail__side-label {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-muted-light);
  white-space: nowrap;
}

.roadmap-task-detail__vote {
  flex-shrink: 0;
  width: 3.5rem;
  padding: 0.35rem 0.25rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: var(--color-page);
}

.roadmap-task-detail__vote .roadmap-vote__score {
  font-size: 0.95rem;
}

.roadmap-task-detail__vote .roadmap-vote__label {
  font-size: 0.625rem;
  color: var(--color-muted-light);
}

.roadmap-task-detail__date {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-muted-light);
}

.roadmap-task-detail__date svg {
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
}

.roadmap-task-detail__attachments {
  margin-top: 0.15rem;
}

.roadmap-task-detail__attachments .roadmap-attachments {
  margin: 0;
}

.roadmap-task-detail__headline {
  flex: 1 1 auto;
  min-width: 0;
}

.roadmap-task-detail__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--color-ink);
  min-width: 0;
  max-width: 100%;
  width: 100%;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-overflow: unset;
  -webkit-line-clamp: unset;
  display: block;
}

.roadmap-task-detail__title--editable {
  display: block;
  width: 100%;
  max-width: 100%;
  white-space: pre-wrap;
  overflow: visible;
  overflow-wrap: anywhere;
  word-break: break-word;
  cursor: text;
  outline: none;
  border-radius: var(--radius-sm);
  padding: 0.15rem 0.25rem;
  margin-inline: -0.25rem;
}

.roadmap-task-detail__title--editable:hover,
.roadmap-task-detail__title--editable:focus {
  background: var(--color-primary-soft);
  box-shadow: 0 0 0 1px var(--color-border);
}

.roadmap-task-detail__desc--editable {
  cursor: text;
  outline: none;
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.45rem;
  margin-inline: -0.45rem;
  min-height: 2.5rem;
}

.roadmap-task-detail__desc--editable:hover,
.roadmap-task-detail__desc--editable:focus {
  background: var(--color-primary-soft);
  box-shadow: 0 0 0 1px var(--color-border);
  color: var(--color-ink);
}

.roadmap-task-detail__desc-editor {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.25rem 0 0.35rem;
}

.roadmap-task-detail__desc-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: flex-start;
}

.roadmap-task-detail__desc-quill.fanos-editor {
  width: 100%;
}

.roadmap-task-detail__desc-placeholder {
  color: var(--color-muted-light);
  font-style: italic;
}

.roadmap-task-detail__chips .roadmap-task__inline-chip,
.roadmap-task-detail__chips .roadmap-task-tags--editable {
  font-size: 0.72rem;
}

.roadmap-task-detail__bookmark {
  flex-shrink: 0;
}

.roadmap-task-detail__edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.roadmap-task-detail__edit svg {
  width: 0.95rem;
  height: 0.95rem;
}

.roadmap-task-detail__edit:hover {
  color: var(--color-primary);
  border-color: var(--color-primary-soft);
  background: var(--color-primary-soft);
}

.roadmap-task-edit {
  padding: 0;
  overflow: visible;
}

.roadmap-task-edit__head {
  padding: 0.875rem 1.125rem 0.5rem;
  border-bottom: 1px solid var(--color-border-soft);
}

.roadmap-task-edit__title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--color-ink);
}

.roadmap-task-edit__body {
  padding: 0.875rem 1.125rem 1.125rem;
}

.roadmap-task-edit__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.roadmap-task-edit__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.roadmap-task-edit__compact-block {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: var(--color-page);
}

.roadmap-task-edit__compact-fields {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.roadmap-task-edit__label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-muted-light);
}

.roadmap-task-edit__input,
.roadmap-task-edit__textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-family: var(--font-family);
  font-size: var(--text-sm);
  color: var(--color-ink);
}

.roadmap-task-edit__textarea {
  min-height: 5rem;
  line-height: 1.65;
  resize: vertical;
}

.roadmap-task-edit__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 0.55rem 0.65rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--color-border-soft);
}

@media (min-width: 640px) {
  .roadmap-task-edit__meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .roadmap-task-edit__meta {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.roadmap-task-edit__meta > * {
  min-width: 0;
  width: 100%;
}

.roadmap-task-edit__meta .fanos-dropdown {
  min-width: 0;
  width: 100%;
  gap: 0.2rem;
}

.roadmap-task-edit__meta .fanos-dropdown__label {
  font-size: 0.6875rem;
  font-weight: 700;
}

.roadmap-task-edit__meta .fanos-dropdown__trigger {
  min-height: 2.125rem;
  padding: 0.25rem 0.55rem;
  border-radius: var(--radius-md);
  gap: 0.4rem;
}

.roadmap-task-edit__meta .fanos-dropdown__icon {
  width: 1.45rem;
  height: 1.45rem;
}

.roadmap-task-edit__meta .fanos-dropdown__icon svg {
  width: 0.875rem;
  height: 0.875rem;
}

.roadmap-task-edit__meta .fanos-dropdown__trigger-text {
  font-size: 0.8125rem;
}

.roadmap-task-edit__meta-progress {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  max-width: 8.5rem;
}

.roadmap-task-edit__meta-reminder {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  /* The Jalali date needs room for the full date (۱۴۰۵/۰۳/۱۱) + toggle. */
  grid-column: span 2;
}

.roadmap-task-edit__meta-reminder .fanos-jalali-date {
  max-width: none;
}

.roadmap-task-edit__meta-reminder .fanos-jalali-date__control {
  min-height: 2.125rem;
}

.roadmap-task-edit__meta-reminder .fanos-jalali-date__display {
  min-height: 2.125rem;
  min-width: 7.5rem;
  padding: 0.25rem 0.55rem;
  font-size: 0.8125rem;
  text-align: center;
  border-radius: var(--radius-md);
}

.roadmap-task-edit__meta-reminder .fanos-jalali-date__toggle {
  width: 2.125rem;
  min-height: 2.125rem;
  border-radius: var(--radius-md);
}

.roadmap-task-edit__meta-reminder .fanos-jalali-date__panel {
  right: auto;
  left: 0;
}

/* In slide-in drawers the reminder field sits close to the drawer edge.
   Open the calendar toward the inside of the drawer so it is not clipped. */
.roadmap-add__body .roadmap-task-edit__meta-reminder .fanos-jalali-date__panel,
.fanos-drawer .roadmap-task-edit__meta-reminder .fanos-jalali-date__panel {
  right: 0;
  left: auto;
  z-index: 160;
}

.roadmap-task-edit__meta-attach {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  grid-column: 1 / -1;
}

.roadmap-task-edit__meta .roadmap-task-edit__attach-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.125rem;
  min-width: 0;
}

.roadmap-task-edit__meta .roadmap-task-edit__files {
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  overflow: hidden;
}

.roadmap-task-edit__meta .roadmap-task-edit__files .roadmap-compose-file {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  min-height: 2.125rem;
  padding: 0.2rem 0.45rem;
}

.roadmap-task-edit__meta .roadmap-task-edit__files .roadmap-compose-file__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.roadmap-task-edit__meta .roadmap-task-edit__upload {
  flex-shrink: 0;
  min-height: 2.125rem;
  padding: 0.25rem 0.55rem;
  white-space: nowrap;
}

.roadmap-task-edit__progress-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 2.125rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}

.roadmap-task-edit__progress-input {
  width: 100%;
  min-width: 0;
  padding: 0.35rem 0.45rem;
  text-align: center;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.roadmap-task-edit__progress-input:focus {
  outline: none;
}

.roadmap-task-edit__progress-row:focus-within {
  outline: 2px solid var(--color-primary-soft);
  border-color: var(--color-primary);
}

.roadmap-task-edit__progress-suffix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 1.75rem;
  padding: 0 0.35rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-muted);
  background: var(--color-border-soft);
  border-inline-start: 1px solid var(--color-border);
}

.roadmap-task-edit__progress-hint {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  color: var(--color-muted);
}

.roadmap-task-edit__meta-progress--auto .roadmap-task-edit__progress-input:disabled {
  opacity: 0.85;
  cursor: default;
}

.roadmap-task__meta-chip--auto {
  cursor: default;
  pointer-events: none;
}

.roadmap-task-edit__field-error {
  margin: 0;
  font-size: 0.6875rem;
  color: var(--color-danger, #c62828);
  line-height: 1.3;
}

.roadmap-task-edit__progress-input.is-invalid {
  border-color: var(--color-danger, #c62828);
}

.roadmap-task-edit__input:focus,
.roadmap-task-edit__textarea:focus {
  outline: 2px solid var(--color-primary-soft);
  border-color: var(--color-primary);
}

.roadmap-task-edit__attach {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.roadmap-task-edit__attach-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.roadmap-task-edit__files {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  flex: 1 1 auto;
  min-width: 0;
}

.roadmap-task-edit__files.is-empty {
  display: none;
}

.roadmap-task-edit__files .roadmap-compose-file {
  margin: 0;
  min-height: 2rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
}

.roadmap-task-edit__files .roadmap-compose-file__size {
  margin-inline-start: auto;
  flex-shrink: 0;
}

.roadmap-task-edit__files .roadmap-compose-file__remove {
  margin-inline-start: 0.35rem;
}

.roadmap-task-edit__upload {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  flex-shrink: 0;
  min-height: 2rem;
  padding: 0.3rem 0.75rem;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-family: var(--font-family);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-muted);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.roadmap-task-edit__upload svg {
  width: 0.9rem;
  height: 0.9rem;
  color: var(--color-primary);
}

.roadmap-task-edit__upload:hover {
  border-color: var(--color-primary-soft);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.roadmap-task-edit__file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.roadmap-task-edit__actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  padding-top: 0.1rem;
}

.roadmap-task-edit__submit {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.25rem;
  padding: 0 1rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
}

.roadmap-task-edit__submit svg {
  width: 1rem;
  height: 1rem;
}

.roadmap-task-edit__submit:hover {
  background: var(--color-primary-dark);
}

.roadmap-task-edit__cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-muted);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.roadmap-task-edit__cancel:hover {
  background: var(--color-page);
  border-color: var(--color-border-soft);
}

@media (max-width: 1100px) {
  .roadmap-task-edit__meta > * {
    min-width: 6.5rem;
  }
}

@media (max-width: 640px) {
  .roadmap-task-edit__head,
  .roadmap-task-edit__body {
    padding-inline: 1rem;
  }

  .roadmap-task-edit__meta .roadmap-task-edit__attach-row {
    flex-wrap: wrap;
  }

  .roadmap-task-edit__attach-row {
    flex-direction: column;
    align-items: stretch;
  }

  .roadmap-task-edit__upload {
    width: 100%;
  }

  .roadmap-task-edit__actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .roadmap-task-edit__submit,
  .roadmap-task-edit__cancel {
    width: 100%;
    justify-content: center;
  }
}

.roadmap-task-detail__desc-block {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 0.1rem;
}

.roadmap-task-detail__desc-label {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--color-ink);
}

.roadmap-task-detail__desc {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--color-muted);
}

.roadmap-task-meta-card--progress .roadmap-task-meta-card__value {
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  min-height: auto;
}

.roadmap-task-meta-card__progress-wrap {
  width: 100%;
}

.roadmap-task-meta-card__progress-wrap .roadmap-task__progress-col {
  flex-direction: column;
  align-items: stretch;
  gap: 0.3rem;
  min-width: 0;
  width: 100%;
}

.roadmap-task-meta-card__progress-wrap .roadmap-task__progress-pct {
  font-size: 0.75rem;
}

.roadmap-task-meta-card__progress-wrap .roadmap-progress {
  min-width: 0;
  width: 100%;
}

.roadmap-task-detail__meta-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.625rem;
}

.roadmap-task-detail__meta-row--progress {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.roadmap-task-detail__meta-row--product {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.roadmap-task-detail__meta-row--product.roadmap-task-detail__meta-row--progress {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.roadmap-task-meta-card__vote {
  flex-direction: row;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  border-inline-start: 0;
  gap: 0.35rem;
  justify-content: center;
}

.roadmap-task-meta-card__vote .roadmap-vote__score {
  font-size: 0.8125rem;
}

.roadmap-task-meta-card__vote .roadmap-vote__label {
  font-size: 0.5625rem;
}

.roadmap-task-meta-card__vote .roadmap-vote__btn {
  width: 1.125rem;
  height: 0.95rem;
}

.roadmap-task-meta-card__vote .roadmap-vote__btn svg {
  width: 0.7rem;
  height: 0.7rem;
}

.roadmap-task-meta-card--votes .roadmap-task-meta-card__value {
  display: flex;
  align-items: center;
}

.roadmap-task-meta-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-self: stretch;
  min-width: 0;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.roadmap-task-meta-card__label {
  font-size: 0.625rem;
  color: var(--color-muted-light);
  line-height: 1.2;
}

.roadmap-task-meta-card__value {
  display: flex;
  align-items: center;
  min-height: 1.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-ink);
}

.roadmap-task-meta-card__date {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.625rem;
  font-weight: 600;
}

.roadmap-task-meta-card__date svg {
  width: 0.7rem;
  height: 0.7rem;
  color: var(--color-muted);
}

.roadmap-task-meta-card .roadmap-cat {
  padding: 0.1rem 0.35rem;
  font-size: 0.5625rem;
  line-height: 1.3;
}

.roadmap-task-meta-card .roadmap-task-status-pill {
  padding: 0.1rem 0.35rem;
  font-size: 0.5625rem;
  line-height: 1.3;
}

.roadmap-task-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
}

.roadmap-task-status-pill--backlog {
  background: #ffe4e6;
  color: #e11d48;
}

.roadmap-task-status-pill--progress {
  background: #fef3c7;
  color: #d97706;
}

.roadmap-task-status-pill--review {
  background: #dbeafe;
  color: #2563eb;
}

.roadmap-task-status-pill--done {
  background: #d1fae5;
  color: #059669;
}

.roadmap-task-status-pill--cancelled {
  background: #fecaca;
  color: #dc2626;
}

.roadmap-task-detail__panels {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
}

.roadmap-task-detail__panel {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}

.roadmap-task-detail__panel--task {
  order: 1;
}

.roadmap-task-detail__panel--subtasks {
  order: 2;
}

.roadmap-task-detail__panel--task .roadmap-task-detail__hero,
.roadmap-task-detail__panel--task .roadmap-task-edit {
  flex: 1 1 auto;
  width: 100%;
}

@media (min-width: 768px) {
  .roadmap-task-detail__panels {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
    direction: rtl;
  }

  .roadmap-task-detail__panel--task {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
  }

  .roadmap-task-detail__panel--subtasks {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
  }

  .roadmap-task-detail__panel--task .roadmap-task-detail__side {
    justify-content: space-between;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
  }
}

.roadmap-task-detail__comments {
  padding: 0.65rem 0.85rem;
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}

.roadmap-task-detail__subtasks {
  padding: 0.65rem 0.85rem;
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}

.roadmap-task-detail__panel-title {
  margin: 0 0 0.5rem;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--color-ink);
}

.roadmap-task-detail__panel-text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--color-muted);
}

.roadmap-task-detail__comments-head {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-bottom: 0.45rem;
}

.roadmap-task-detail__comments-head .roadmap-task-detail__panel-title {
  margin: 0;
}

.roadmap-task-detail__comments-count {
  font-size: 0.78rem;
  color: var(--color-muted);
}

.roadmap-task-detail__subtasks-head {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-bottom: 0.45rem;
}

.roadmap-task-detail__subtasks-head .roadmap-task-detail__panel-title {
  margin: 0;
}

.roadmap-task-detail__subtasks-count {
  font-size: 0.78rem;
  color: var(--color-muted);
}

.roadmap-subtasks__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.roadmap-subtasks__empty {
  margin: 0 0 0.65rem;
}

.roadmap-subtask {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--color-border-soft);
  transition: box-shadow 0.15s ease, opacity 0.15s ease, background 0.15s ease;
}

.roadmap-subtask__assignment-wrap {
  flex: 1 1 100%;
  margin-inline-start: 1.7rem;
  min-width: 0;
}

.roadmap-subtask__assignment {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: var(--color-muted);
  min-width: 0;
}

.roadmap-subtask__owner-select,
.roadmap-subtask__due-input {
  font-size: 0.75rem;
  padding: 0.15rem 0.35rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: inherit;
}

.roadmap-subtask__owner-select {
  flex: 1 1 auto;
  min-width: 3.5rem;
  max-width: 10rem;
}

.roadmap-subtask__due-field {
  flex: 0 0 auto;
  width: 6.5rem;
}

.roadmap-subtask__due-field .fanos-jalali-date {
  max-width: none;
}

.roadmap-subtask__due-field .fanos-jalali-date__display {
  font-size: 0.75rem;
  padding: 0.15rem 0.4rem;
  min-height: 0;
  height: 1.65rem;
  border-radius: var(--radius-sm);
}

.roadmap-subtask__due-field .fanos-jalali-date__toggle {
  width: 1.65rem;
  height: 1.65rem;
  border-radius: var(--radius-sm);
}

.roadmap-subtask__due-field .fanos-jalali-date__toggle svg {
  width: 0.85rem;
  height: 0.85rem;
}

.roadmap-subtask__owner-readonly,
.roadmap-subtask__due-readonly {
  font-size: 0.75rem;
  color: var(--color-muted);
}

.roadmap-subtask__history-toggle {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  padding: 0;
}

.roadmap-subtask__history-toggle svg {
  width: 0.9rem;
  height: 0.9rem;
}

.roadmap-subtask__history-toggle:hover {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.roadmap-subtask__history {
  flex: 1 1 100%;
}

.roadmap-subtask__history-list {
  margin: 0.3rem 0 0;
  padding-inline-start: 1.1rem;
  font-size: 0.75rem;
  color: var(--color-muted);
}

.roadmap-subtask:first-child {
  padding-top: 0;
}

.roadmap-subtask:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.roadmap-subtask.is-dragging {
  opacity: 0.75;
  background: var(--color-primary-soft, rgba(99, 102, 241, 0.08));
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
  z-index: 2;
  border-radius: var(--radius-sm);
}

.roadmap-subtask__drag {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-muted);
  cursor: grab;
  touch-action: none;
  opacity: 0.85;
}

.roadmap-subtask__drag svg {
  width: 0.9rem;
  height: 0.9rem;
  pointer-events: none;
}

.roadmap-subtask:hover .roadmap-subtask__drag,
.roadmap-subtask__drag:hover,
.roadmap-subtask__drag:focus-visible {
  opacity: 1;
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.roadmap-subtask__drag:active,
.roadmap-subtask.is-dragging .roadmap-subtask__drag {
  cursor: grabbing;
}

.roadmap-subtasks__error {
  margin: 0 0 0.65rem;
  font-size: var(--text-sm);
}

.roadmap-subtask__label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1 1 auto;
  min-width: 0;
  cursor: default;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.roadmap-subtask__actions {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
}

.roadmap-subtask__edit {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
}

.roadmap-subtask__edit svg {
  width: 0.85rem;
  height: 0.85rem;
}

.roadmap-subtask__edit:hover {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.roadmap-subtask__edit-form {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.roadmap-subtask__edit-input {
  flex: 1 1 10rem;
  min-width: 0;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-family);
  font-size: var(--text-sm);
}

.roadmap-subtask__edit-input:focus {
  outline: 2px solid var(--color-primary-soft);
  border-color: var(--color-primary);
}

.roadmap-subtask__edit-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.roadmap-subtask__edit-save,
.roadmap-subtask__edit-cancel {
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-family);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.roadmap-subtask__edit-save {
  border: 0;
  background: var(--color-primary);
  color: #fff;
}

.roadmap-subtask__edit-save:hover {
  background: var(--color-primary-dark);
}

.roadmap-subtask__edit-cancel {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-muted);
}

.roadmap-subtask__edit-cancel:hover {
  border-color: var(--color-border);
  background: var(--color-page);
}

.roadmap-subtask--editing {
  align-items: center;
}

.roadmap-subtask__check {
  flex-shrink: 0;
  width: 0.9rem;
  height: 0.9rem;
  margin-top: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.roadmap-subtask__check--readonly {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  line-height: 1;
  color: var(--color-muted);
}

.roadmap-subtask__title {
  flex: 1 1 auto;
  min-width: 0;
}

.roadmap-subtask--done .roadmap-subtask__title {
  text-decoration: line-through;
  color: var(--color-muted);
}

.roadmap-subtask__remove {
  flex-shrink: 0;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-muted);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
}

.roadmap-subtask__remove:hover {
  color: var(--color-red);
  background: rgba(220, 38, 38, 0.08);
}

.roadmap-subtask-add {
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--color-border-soft);
}

.roadmap-subtask-add__field {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  transition: border-color 0.15s, outline 0.15s;
}

.roadmap-subtask-add__field:focus-within {
  outline: 2px solid var(--color-primary-soft);
  border-color: var(--color-primary);
}

.roadmap-subtask-add__input {
  width: 100%;
  min-width: 0;
  padding: 0.4rem 0.55rem;
  padding-inline-end: 4.5rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: var(--font-family);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.roadmap-subtask-add__input:focus {
  outline: none;
}

.roadmap-subtask-add__submit {
  position: absolute;
  inset-inline-end: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.22rem 0.55rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-family);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

.roadmap-subtask-add__submit:hover {
  background: var(--color-primary-dark);
}

.roadmap-add-subtasks__list {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.roadmap-add-subtasks__empty {
  margin: 0 0 0.5rem;
}

.roadmap-add-subtask {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  background: var(--color-page);
}

.roadmap-add-subtask__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
}

.roadmap-add-subtask__remove {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-muted);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
}

.roadmap-add-subtask__remove:hover {
  color: var(--color-red);
  background: rgba(220, 38, 38, 0.08);
}

.roadmap-add-subtasks__add {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.roadmap-task-comments__list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;
  max-width: 100%;
}

.roadmap-comment {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--color-border-soft);
  min-width: 0;
  max-width: 100%;
}

.roadmap-comment:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.roadmap-comment__avatar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  background: var(--avatar-bg, var(--color-primary));
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
}
.roadmap-comment__avatar--img {
  background: transparent;
  overflow: hidden;
}
.roadmap-comment__avatar--img img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.roadmap-comment__body {
  flex: 1 1 auto;
  min-width: 0;
}

.roadmap-comment__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 0.5rem;
  margin-bottom: 0.2rem;
}

.roadmap-comment__meta-end {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.roadmap-comment__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.roadmap-comment__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.roadmap-comment__action svg {
  width: 0.8rem;
  height: 0.8rem;
}

.roadmap-comment__action:hover {
  color: var(--color-primary);
  border-color: var(--color-primary-soft);
  background: var(--color-primary-soft);
}

.roadmap-comment__action--danger:hover {
  color: #dc2626;
  border-color: #fecaca;
  background: #fef2f2;
}

.roadmap-comment__who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.roadmap-comment__name {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-ink);
}

.roadmap-comment__role {
  display: inline-flex;
  padding: 0.12rem 0.45rem;
  border-radius: var(--radius-pill);
  font-size: 0.625rem;
  font-weight: 700;
}

.roadmap-comment__role--pm {
  background: #dbeafe;
  color: #1d4ed8;
}

.roadmap-comment__role--ux {
  background: #ffedd5;
  color: #c2410c;
}

.roadmap-comment__role--dev {
  background: #d1fae5;
  color: #047857;
}

.roadmap-comment__role--user {
  background: #ede9fe;
  color: #6d28d9;
}

.roadmap-comment__time {
  font-size: 0.6875rem;
  color: var(--color-muted-light);
}

.roadmap-comment__text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--color-muted);
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
}

.roadmap-comment__text.fanos-rich-text {
  white-space: normal;
}

.roadmap-comment__text--deleted {
  color: var(--color-muted-light);
  font-style: italic;
}

.roadmap-comment--deleted {
  opacity: 0.82;
}

.roadmap-comment--deleted .roadmap-comment__avatar {
  filter: grayscale(0.35);
}

.roadmap-comment__edited {
  margin: 0.35rem 0 0;
  font-size: 0.6875rem;
  color: var(--color-muted-light);
}

.roadmap-comment__edit-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.roadmap-comment__edit-input {
  margin: 0;
}

.roadmap-comment__edit-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
}

.roadmap-comment__edit-save,
.roadmap-comment__edit-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0 0.85rem;
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

.roadmap-comment__edit-save {
  border: 0;
  background: var(--color-primary);
  color: #fff;
}

.roadmap-comment__edit-save:hover {
  background: var(--color-primary-dark);
}

.roadmap-comment__edit-cancel {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-muted);
}

.roadmap-comment__edit-cancel:hover {
  background: var(--color-page);
}

.roadmap-comment__replies {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding-inline-start: 1rem;
  border-inline-start: 2px solid var(--color-border-soft);
}

.roadmap-comment--reply {
  padding-top: 0.25rem;
}

.roadmap-comment-reply-compose {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.roadmap-comment-reply-compose__hint {
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-muted);
}

.roadmap-comment-reply-compose__actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.roadmap-comment-reply-compose__cancel {
  padding: 0.28rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-muted);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}

.roadmap-comment-reply-compose__cancel:hover {
  background: var(--color-page);
}

.roadmap-task-comments__actions {
  margin-top: 1rem;
}

.roadmap-task-comments__more {
  width: 100%;
  color: var(--color-primary);
  border-color: var(--color-border);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.roadmap-attachments {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.875rem;
}

.roadmap-attachment {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  background: var(--color-page);
}

.roadmap-attachment__icon {
  flex-shrink: 0;
  display: flex;
  color: var(--color-primary);
}

.roadmap-attachment__icon svg {
  width: 1rem;
  height: 1rem;
}

.roadmap-attachment__info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}

.roadmap-attachment__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
}

.roadmap-attachment__size {
  font-size: 0.6875rem;
  color: var(--color-muted-light);
}

.roadmap-attachment__actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.35rem;
}

.roadmap-attachment__action {
  padding: 0.25rem 0.55rem;
  border-radius: var(--radius-pill);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  background: var(--color-primary-soft);
  transition: background 0.15s;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  line-height: inherit;
}

.roadmap-attachment__action:hover {
  background: #dfe3ff;
}

.roadmap-attachment__action--danger {
  color: #b91c1c;
  background: rgba(220, 38, 38, 0.08);
}

.roadmap-attachment__action--danger:hover {
  background: rgba(220, 38, 38, 0.14);
  color: #991b1b;
}

.roadmap-comment-compose {
  margin-bottom: 0.55rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--color-border-soft);
}

.roadmap-comment-compose-wrap {
  margin-bottom: 0.55rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--color-border-soft);
}

.roadmap-comment-compose-wrap .roadmap-comment-compose {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.roadmap-comment-compose__actor {
  margin: 0 0 0.45rem;
  font-size: 0.75rem;
  color: var(--color-muted);
}

.roadmap-comment-compose__actor strong {
  color: var(--color-ink);
  font-weight: 700;
}

.roadmap-comment-compose--public .roadmap-comment-compose__guest {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.45rem;
}

.roadmap-comment-compose__guest-label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-muted-light);
}

.roadmap-comment-compose__guest-input {
  width: 100%;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-family: var(--font-family);
  font-size: var(--text-sm);
  color: var(--color-ink);
}

.roadmap-comment-compose__box {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}

.roadmap-comment-compose__editor.fanos-editor {
  min-width: 0;
}

.roadmap-comment-compose__editor .ql-toolbar.ql-snow {
  padding: 0.12rem 0.3rem;
  border: 0;
  border-bottom: 1px solid var(--color-border-soft);
  background: var(--color-page);
}

.roadmap-comment-compose__editor .ql-container.ql-snow {
  border: 0;
  font-size: 0.78rem;
}

.roadmap-comment-compose__editor .ql-editor {
  padding: 0.35rem 0.5rem;
  line-height: 1.45;
  min-height: 2rem;
}

.roadmap-comment-compose__editor .ql-editor.ql-blank::before {
  right: 0.5rem;
  font-size: 0.78rem;
}

.roadmap-comment-compose__editor .ql-toolbar.ql-snow .ql-formats {
  margin-inline-end: 0.15rem;
}

.roadmap-comment-compose__editor .ql-snow.ql-toolbar button,
.roadmap-comment-compose__editor .ql-snow .ql-toolbar button {
  width: 1.35rem;
  height: 1.35rem;
  padding: 0.1rem;
}

.roadmap-comment-compose__editor .ql-snow.ql-toolbar button svg,
.roadmap-comment-compose__editor .ql-snow .ql-toolbar button svg {
  width: 0.85rem;
  height: 0.85rem;
}

.roadmap-comment-compose__input {
  width: 100%;
  min-height: 5.5rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-family: var(--font-family);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-ink);
  resize: vertical;
}

.roadmap-comment-compose__input:focus {
  outline: 2px solid var(--color-primary-soft);
  border-color: var(--color-primary);
}

.roadmap-comment-compose__previews {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0 0.45rem;
}

.roadmap-comment-compose__previews:not(.is-empty) {
  padding-top: 0.35rem;
}

.roadmap-comment-compose__previews.is-empty {
  display: none;
}

.roadmap-comment-compose .roadmap-compose-file {
  padding: 0.3rem 0.45rem;
  gap: 0.35rem;
}

.roadmap-comment-compose .roadmap-compose-file__name {
  font-size: 0.75rem;
}

.roadmap-compose-file {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.65rem;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-page);
}

.roadmap-compose-file__icon svg {
  width: 0.9rem;
  height: 0.9rem;
  color: var(--color-primary);
}

.roadmap-compose-file__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roadmap-compose-file__size {
  font-size: 0.6875rem;
  color: var(--color-muted-light);
  flex-shrink: 0;
}

.roadmap-compose-file__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.roadmap-compose-file__action {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
}

.roadmap-compose-file__action:hover {
  text-decoration: underline;
}

.roadmap-compose-file__remove {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--color-muted);
  cursor: pointer;
}

.roadmap-compose-file__remove:hover {
  color: var(--color-red);
  background: #fef2f2;
}

.roadmap-comment-compose__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
  padding: 0.25rem 0.4rem;
  border-top: 1px solid var(--color-border-soft);
  background: var(--color-page);
}

.roadmap-comment-compose__upload {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.28rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.roadmap-comment-compose__upload svg {
  width: 0.85rem;
  height: 0.85rem;
}

.roadmap-comment-compose__upload:hover {
  color: var(--color-primary);
  border-color: var(--color-primary-soft);
  background: var(--color-primary-soft);
}

.roadmap-comment-compose__file-input {
  position: absolute;
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  z-index: -1;
}

.roadmap-comment-compose__submit {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.28rem 0.65rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  font-family: var(--font-family);
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}

.roadmap-comment-compose__submit svg {
  width: 0.85rem;
  height: 0.85rem;
}

.roadmap-comment-compose__submit:hover {
  background: var(--color-primary-dark);
}

@media (max-width: 767px) {
  .roadmap-task-detail__hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3.75rem;
    grid-template-areas:
      "head head"
      "content sidebar";
    gap: 0.5rem 0.65rem;
    align-items: start;
    direction: rtl;
  }

  .roadmap-task-detail__body {
    display: contents;
  }

  .roadmap-task-detail__title-row {
    grid-area: head;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title";
    gap: 0.35rem 0.5rem;
    align-items: start;
    min-width: 0;
    width: 100%;
  }

  .roadmap-task-detail__title,
  .roadmap-task-detail__title--editable {
    grid-area: title;
    font-size: 0.95rem;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .roadmap-task-detail__content {
    grid-area: content;
    gap: 0.3rem;
    min-width: 0;
  }

  .roadmap-task-detail__chips {
    gap: 0.22rem 0.35rem;
  }

  .roadmap-task-detail__entities {
    margin-top: 0.15rem;
  }

  .roadmap-task-detail__desc-block {
    margin-top: 0.05rem;
  }

  .roadmap-task-detail__reminder {
    margin-top: 0.15rem;
  }

  .roadmap-task-detail__side {
    grid-area: sidebar;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 0.35rem;
    width: 3.75rem;
    min-width: 3.75rem;
    padding: 0;
    border-inline-start: 0;
    border-top: 0;
    align-self: start;
  }

  .roadmap-task-detail__side-stat {
    width: 100%;
  }

  .roadmap-task-detail__vote {
    width: 100%;
    min-width: 0;
  }
}

/* Tables: cards on mobile, table on desktop */
.table-desktop {
  display: none;
}

.table-mobile {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .table-desktop {
    display: block;
  }

  .table-mobile {
    display: none;
  }
}

.table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  width: 100%;
  min-width: 560px;
  text-align: right;
  border-collapse: collapse;
}

.issue-card summary {
  cursor: pointer;
  list-style: none;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.5;
}

.issue-card summary::-webkit-details-marker {
  display: none;
}

.issue-card__meta {
  margin-top: 0.75rem;
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: 1.6;
}

/* --- هدر: موبایل دو ردیف، دسکتاپ یک ردیف --- */
.site-header__inner {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding: 0.75rem 0.875rem;
  min-width: 0;
}

.site-header__primary {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  width: 100%;
}

.site-header__toggle {
  flex: 0 0 auto;
}

.site-header__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
  text-align: right;
}

.site-header__tabs:not(.is-hidden) {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: flex-start;
  gap: 0.375rem;
  width: 100%;
  min-width: 0;
  direction: rtl;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding: 0.125rem 0;
  margin: 0;
  border: none;
  visibility: visible;
  height: auto;
  pointer-events: auto;
}

.site-header__tabs .tab-btn,
.site-header__tabs .tab-btn-active,
.tab-nav-scroll .tab-btn,
.tab-nav-scroll .tab-btn-active {
  display: inline-flex !important;
  flex: 0 0 auto;
  white-space: nowrap !important;
  height: 2.125rem;
  align-items: center;
}

.site-header__tabs .tab-btn[hidden],
.site-header__tabs .tab-btn-active[hidden],
.tab-nav-scroll .tab-btn[hidden],
.tab-nav-scroll .tab-btn-active[hidden] {
  display: none !important;
}

@media (max-width: 767px) {
  .site-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 0.5rem;
    align-items: center;
  }

  .site-header__inner:not(:has(.site-header__user:not([hidden]))) .site-header__primary {
    grid-column: 1 / -1;
  }

  .site-header__primary {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  .site-header__user:not([hidden]) {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    margin: 0;
    padding: 0;
    z-index: 2;
  }

  .site-header__tabs:not(.is-hidden) {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .user-bar__chip.user-menu__trigger {
    max-width: 11.5rem;
    min-height: 2.25rem;
    padding-inline: 0.3rem 0.6rem;
  }

  .user-bar__name {
    font-size: 0.8125rem;
  }

  .user-bar__avatar {
    width: 1.75rem;
    height: 1.75rem;
  }

  .user-menu__dropdown {
    inset-inline-start: 0;
    inset-inline-end: auto;
  }
}

@media (min-width: 768px) {
  .site-header__inner {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
  }

  .site-header__primary {
    flex: 0 1 auto;
    width: auto;
    max-width: 42%;
  }

  .site-header__title {
    max-width: 14rem;
  }

  .site-header__tabs {
    flex: 1 1 0;
    width: auto;
    justify-content: flex-start;
  }
}

@media (min-width: 1024px) {
  .site-header__inner {
    padding: 1rem 2rem;
  }
}

/* --- تنظیمات موبایل و تبلت --- */
@media (max-width: 1023px) {
  .heading-page {
    font-size: 1.125rem;
    line-height: 1.35;
  }

  .heading-section {
    font-size: 1rem;
  }

  .card {
    padding: 1rem 1.125rem;
  }

  #app-brand {
    padding: 1rem 1.125rem;
  }

  #app-brand .brand-title {
    font-size: var(--text-xl);
  }

  #app-brand .brand-tagline {
    font-size: var(--text-sm);
  }

  .tab-btn,
  .tab-btn-active {
    padding: 0.4rem 0.75rem;
    font-size: 0.8125rem;
  }

  .meta-value {
    font-size: 1.25rem;
  }

  .vision-card p {
    font-size: 0.9375rem !important;
    line-height: 1.7 !important;
  }
}

@media (max-width: 380px) {
  .site-header__inner {
    padding: 0.625rem 0.75rem;
  }

  .heading-page {
    font-size: 1rem;
  }

  .tab-btn,
  .tab-btn-active {
    padding: 0.35rem 0.6rem;
    font-size: 0.75rem;
    height: 2rem;
  }

  .btn-icon-round {
    height: 2.25rem;
    width: 2.25rem;
  }
}

.boot-error__title {
  margin: 0 0 0.5rem;
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--color-red);
}

.boot-error__text {
  margin: 0 0 0.75rem;
  color: var(--color-ink);
}

.boot-error__hint {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.boot-error code {
  direction: ltr;
  unicode-bidi: isolate;
  font-size: 0.8125rem;
  background: var(--color-border-soft);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}

/* --- Login --- */
.app-shell--login .sidebar-shell,
.app-shell--login .sidebar-overlay,
#sidebar[hidden] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.app-shell--login .site-header__toggle,
#sidebar-toggle[hidden] {
  display: none !important;
}

.app-shell--login .site-header__tabs {
  display: none !important;
}

.app-shell--login .main-shell {
  width: 100%;
  max-width: none;
}

.app-shell--login .page-main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.app-shell--login .login-page {
  flex: 1 1 auto;
  min-height: 0;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
}

.header-brand[hidden],
.site-header__title[hidden],
.site-header__user[hidden] {
  display: none !important;
}

.header-brand__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.header-brand .brand-title {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  line-height: 1.35;
}

.header-brand .brand-tagline {
  display: block;
  margin-top: 0.125rem;
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.site-header--login .site-header__primary {
  align-items: center;
}

.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 2rem 1rem;
}

.login-card {
  width: 100%;
  max-width: 24rem;
  padding: 1.75rem;
}

.login-card__title {
  margin: 0 0 0.35rem;
  font-size: var(--text-xl);
  font-weight: 800;
}

.login-card__desc {
  margin: 0 0 1.25rem;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.login-card__error {
  margin: 0 0 1rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  background: #fef2f2;
  color: var(--color-red);
  font-size: var(--text-sm);
}

.login-card__success {
  margin: 0 0 1rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  background: #ecfdf5;
  color: var(--color-emerald);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.login-switch {
  margin: 1rem 0 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
  text-align: center;
}

.login-switch__link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-primary);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: var(--text-sm);
  font-weight: 600;
}

.login-input {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-family);
}

.login-submit {
  margin-top: 0.25rem;
  padding: 0.65rem 1rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

/* --- ورود یکپارچه: حساب سازمانی و حساب پذیرش۲۴ --- */
.login-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0 0.75rem;
  color: var(--color-muted-light);
  font-size: 0.75rem;
}

/* display:flex پایین‌تر از UA است و [hidden] را خنثی می‌کند — صریح لازم است. */
.login-divider[hidden] {
  display: none;
}

.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.login-sso {
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 0.65rem 1rem;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-primary);
  font-family: var(--font-family);
  font-weight: 700;
  cursor: pointer;
}

.login-sso:hover {
  background: var(--color-primary);
  color: #fff;
}

.login-sso[hidden] {
  display: none;
}

.login-hint {
  margin: 1rem 0 0;
  font-size: 0.75rem;
  color: var(--color-muted-light);
  text-align: center;
}

/* --- Session expired overlay --- */
.app-shell--session-expired {
  filter: blur(5px);
  pointer-events: none;
  user-select: none;
}

body.session-expired-lock {
  overflow: hidden;
}

.session-expired-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(31, 41, 55, 0.4);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.session-expired-card {
  width: min(100%, 26rem);
  padding: 1.75rem;
  text-align: center;
  box-shadow: var(--shadow-soft);
}

.session-expired-card__title {
  margin: 0 0 0.75rem;
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-primary);
}

.session-expired-card__text {
  margin: 0 0 1.25rem;
  font-size: var(--text-sm);
  line-height: 1.75;
  color: var(--color-ink);
}

.session-expired-card__btn {
  width: 100%;
}

/* --- User bar --- */
.site-header__user {
  display: flex;
  align-items: center;
  margin-inline-start: auto;
  padding-inline: 0.25rem;
  flex-shrink: 0;
}

.user-menu {
  position: relative;
}

.user-bar__chip.user-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 14rem;
  min-height: 2.5rem;
  padding-block: 0.25rem;
  padding-inline: 0.35rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: var(--shadow-nav);
  font-family: var(--font-family);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.user-bar__chip.user-menu__trigger:hover,
.user-bar__chip.user-menu__trigger[aria-expanded="true"] {
  background: var(--color-primary-soft);
  border-color: rgba(63, 65, 145, 0.15);
  color: var(--color-primary-dark);
}

.user-bar__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.user-bar__avatar-icon {
  width: 1.125rem;
  height: 1.125rem;
}

.user-bar__avatar:has(.user-bar__avatar-img) {
  padding: 0;
  overflow: hidden;
  background: transparent;
}

.user-bar__avatar-img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-pill);
  object-fit: cover;
  display: block;
}

.user-bar__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: inherit;
  letter-spacing: -0.01em;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

.user-menu__dropdown {
  position: absolute;
  top: calc(100% + 0.4rem);
  inset-inline-end: 0;
  z-index: 70;
  min-width: 11rem;
  padding: 0.35rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}

.user-menu__dropdown[hidden] {
  display: none !important;
}

.user-menu__item {
  display: block;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: right;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.user-menu__item + .user-menu__item {
  margin-top: 0.15rem;
  border-top: 1px solid var(--color-border-soft);
  padding-top: calc(0.6rem + 0.15rem);
}

.user-menu__item:hover {
  background: var(--color-border-soft);
  color: var(--color-primary);
}

.user-menu__item--danger {
  color: var(--color-red);
}

.user-menu__item--danger:hover {
  background: #fef2f2;
  color: #b91c1c;
}

/* --- Admin panel --- */
.admin-page__head {
  margin-bottom: 1.25rem;
}

.admin-page__title {
  margin: 0 0 0.35rem;
  font-size: var(--text-xl);
  font-weight: 800;
}

.admin-page__desc {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.admin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 1rem;
}

.admin-section__title {
  margin: 0 0 0.75rem;
  font-size: var(--text-base);
  font-weight: 800;
}

.admin-section--wide {
  grid-column: 1 / -1;
}

.admin-user-list,
.admin-role-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: var(--text-sm);
}

.admin-form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.admin-select {
  display: block;
  width: 100%;
  min-width: 0;
  margin-top: 0;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-family);
  font-size: var(--text-sm);
  background: var(--color-surface);
}

.admin-select--compact {
  width: auto;
  min-width: 4rem;
  padding: 0.35rem 0.5rem;
}

.admin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-family);
  font-size: var(--text-sm);
  transition: background 0.15s, border-color 0.15s;
}

.admin-btn svg {
  width: 1rem;
  height: 1rem;
}

.admin-btn--primary {
  background: var(--color-primary);
  color: #fff;
}

.admin-btn--secondary,
.admin-btn--ghost {
  background: var(--color-surface);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
}

.admin-btn--ghost:hover {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-soft);
}

.admin-btn--primary:hover {
  background: var(--color-primary-dark);
}

.admin-perm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.35rem 0.75rem;
}

.admin-perm-check {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.admin-perm-check--locked {
  opacity: 0.72;
}

.admin-perm-hint {
  color: var(--color-muted);
  font-size: 0.75rem;
}

.admin-hint {
  margin-top: 0.75rem;
  font-size: var(--text-sm);
}

.admin-hint--ok {
  color: var(--color-emerald);
}

.admin-hint--err {
  color: var(--color-red);
}

.admin-badge {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 0.6875rem;
}

.admin-badge--ok {
  background: var(--color-emerald-soft);
  color: var(--color-emerald);
}

.admin-badge--off {
  background: #fef2f2;
  color: var(--color-red);
}

/* --- Admin panel --- */
.app-shell--admin .page-main {
  padding: 1.25rem 1.5rem 1.5rem;
}

.admin-page {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
}

.admin-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.admin-page-header__title-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.admin-page-header__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #fff;
  flex-shrink: 0;
}

.admin-page-header__icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

.admin-page-header__title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-ink);
}

.admin-topbar {
  width: 100%;
}

.admin-topbar__row {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  width: 100%;
}

.admin-topbar__form {
  flex: 1 1 auto;
  min-width: 0;
}

.admin-topbar__filters {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 0.75rem;
  width: 100%;
  overflow: visible;
}

.admin-topbar__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  flex-shrink: 0;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s;
}

.admin-topbar__add svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.admin-topbar__add:hover {
  background: #e3e6ff;
}

.admin-filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 9.5rem;
  flex-shrink: 0;
}

.admin-filter-field__label,
.admin-topbar .fanos-dropdown__label {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-muted-light);
}

.admin-filter-field .admin-input {
  min-height: 2.75rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--text-sm);
  color: var(--color-ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-filter-field .admin-input:hover {
  border-color: #a5b4fc;
}

.admin-filter-field .admin-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.admin-filter-field--dropdown {
  gap: 0;
  min-width: 11.5rem;
}

.admin-filter-field--wide {
  flex: 1 1 16rem;
  min-width: 16rem;
  max-width: 24rem;
}

.admin-filter-field--dropdown .fanos-dropdown {
  width: 100%;
  min-width: 0;
}

.admin-filter-field--dropdown .fanos-dropdown__label:empty {
  display: none;
}

.admin-filter-field--compact {
  min-width: 0;
  font-weight: 400;
}

.admin-filter-field--compact .fanos-dropdown {
  min-width: 6.5rem;
}

.admin-topbar .fanos-dropdown.is-open,
.admin-topbar .admin-ms.is-open {
  position: relative;
  z-index: 50;
}

.admin-topbar,
.admin-topbar__form,
.admin-page {
  overflow: visible;
}

.admin-ms {
  position: relative;
  width: 100%;
  min-width: 0;
}

.admin-ms--wide {
  width: 100%;
}

.admin-ms__empty {
  margin: 0;
  padding: 0.45rem 0.65rem;
  font-size: 0.8125rem;
  color: var(--color-muted);
  text-align: center;
}

.fanos-dropdown__option--multi {
  cursor: pointer;
}

.fanos-dropdown__multi-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.fanos-dropdown--compact .fanos-dropdown__trigger {
  min-height: 2.25rem;
  padding: 0.35rem 0.65rem;
}

.fanos-dropdown--compact .fanos-dropdown__icon {
  width: 1.65rem;
  height: 1.65rem;
}

.fanos-dropdown--compact .fanos-dropdown__icon svg {
  width: 0.95rem;
  height: 0.95rem;
}

.fanos-dropdown--compact .fanos-dropdown__trigger-text {
  font-size: 0.8125rem;
}

.admin-table-footer__size .admin-filter-field--dropdown {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  min-width: 0;
}

.admin-table-footer__size .fanos-dropdown {
  min-width: 5.5rem;
}

.admin-table-card {
  overflow: visible;
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-card);
}

.admin-table-card .admin-table-wrap {
  padding: 0.25rem 0.5rem;
}

.admin-table-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--color-border-soft);
  background: var(--color-surface);
  overflow: visible;
  position: relative;
  z-index: 1;
}

.admin-table-footer .fanos-dropdown.is-open {
  z-index: 50;
}

.admin-table-footer__size {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.admin-table-footer__pager {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.admin-table-footer__info {
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.admin-table-footer__nav {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.admin-pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.45rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-muted);
  cursor: pointer;
}

.admin-pager-btn svg {
  width: 0.95rem;
  height: 0.95rem;
}

.admin-pager-btn--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.admin-pager-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.admin-pill {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 600;
}

.admin-status--yes {
  color: var(--color-emerald);
  font-weight: 700;
}

.admin-status--no {
  color: var(--color-red);
  font-weight: 700;
}

.admin-status--pending {
  color: #d97706;
  font-weight: 700;
}

.admin-cell-icon,
.admin-cell-name {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.admin-icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-muted);
}

.admin-icon-box svg {
  width: 1rem;
  height: 1rem;
}

.admin-icon-box--sm {
  width: 1.65rem;
  height: 1.65rem;
}

.admin-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-pill);
  background: var(--color-border-soft);
  font-size: 0.8125rem;
  font-weight: 700;
}

.admin-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 0;
  background: transparent;
  color: var(--color-primary);
  font-family: var(--font-family);
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.15rem 0.35rem;
}

.admin-action-btn svg {
  width: 0.95rem;
  height: 0.95rem;
}

.admin-action-btn--danger {
  color: var(--color-red);
}

.admin-action-btn--muted {
  color: var(--color-muted);
}

.admin-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.admin-modal[hidden] {
  display: none !important;
}

.admin-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(31, 41, 55, 0.45);
}

.admin-modal__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 34rem);
  max-height: min(90dvh, 720px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-soft);
}

.admin-modal__panel:has(.admin-modal-form--wide) {
  width: min(100%, 48rem);
}

.admin-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--color-border-soft);
}

.admin-modal__title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 800;
}

.admin-modal__close {
  border: 0;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-muted);
  cursor: pointer;
}

.admin-modal__body {
  flex: 1;
  min-height: 0;
  padding: 1rem 1.1rem 1.1rem;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.admin-modal-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: visible;
}

.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1rem;
  overflow: visible;
}

.admin-form-grid .admin-field--dropdown {
  grid-column: 1 / -1;
}

.admin-field--dropdown {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.admin-field--dropdown .fanos-dropdown {
  width: 100%;
  min-width: 0;
  gap: 0.35rem;
}

.admin-field--dropdown .fanos-dropdown__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
}

.admin-modal .fanos-dropdown.is-open,
.admin-modal .admin-ms.is-open {
  position: relative;
  z-index: 40;
}

.admin-modal .fanos-dropdown__menu,
.admin-modal .admin-ms__menu {
  z-index: 150;
}

.admin-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: var(--text-sm);
  font-weight: 600;
}

.admin-field--wide {
  grid-column: 1 / -1;
}

.admin-field--check {
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  padding-top: 1.5rem;
}

.admin-modal-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding-top: 0.25rem;
}

.admin-user-avatar-field > span {
  font-size: var(--text-sm);
  font-weight: 600;
}

.admin-user-avatar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.admin-user-avatar__preview {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 999px;
  border: 1px solid var(--color-border-soft);
  background: var(--color-surface-muted, #f4f6f8);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.admin-user-avatar__preview:has(.admin-user-avatar__img:not([hidden])) {
  background: transparent;
}

.admin-user-avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.admin-user-avatar__placeholder {
  color: var(--color-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-user-avatar__placeholder svg {
  width: 2rem;
  height: 2rem;
}

.admin-user-avatar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.admin-user-avatar__upload {
  cursor: pointer;
  margin: 0;
}

.admin-user-avatar__hint {
  flex: 1 1 100%;
  margin: 0;
}

.admin-user-table-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--color-border-soft);
  background: var(--color-surface-muted, #f4f6f8);
  display: block;
}

.admin-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.admin-subsection-card {
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-card);
}

.admin-subsection-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--color-border-soft);
}

.admin-subsection-card__head h3 {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 800;
}

.admin-subsection-card .admin-role-checks,
.admin-subsection-card .admin-perm-tree {
  padding: 1rem;
}

.admin-form-row--compact {
  margin: 0;
}

.admin-panel-section {
  margin-bottom: 1.25rem;
}

.admin-panel-section__head h3 {
  margin: 0 0 0.75rem;
  font-size: var(--text-base);
  font-weight: 800;
}

.admin-inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 1rem;
}

.admin-stack-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.admin-inline-form label,
.admin-stack-form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: var(--text-sm);
  font-weight: 600;
}

.admin-input {
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-family);
  font-size: var(--text-sm);
  min-width: 0;
  width: 100%;
  background: var(--color-surface);
}

.admin-check-inline {
  flex-direction: row !important;
  align-items: center;
  gap: 0.4rem !important;
}

.admin-table-wrap {
  overflow: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.admin-table thead th {
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid var(--color-border);
  text-align: right;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-muted);
  background: var(--color-surface);
}

.admin-table tbody td {
  padding: 0.85rem;
  border-bottom: 1px solid var(--color-border-soft);
  text-align: right;
  vertical-align: middle;
}

.admin-table tbody tr:nth-child(even) {
  background: var(--color-row-alt);
}

.admin-table tbody tr:hover {
  background: var(--color-primary-soft);
}

.admin-table__empty td {
  text-align: center;
  color: var(--color-muted);
  padding: 2rem 1rem;
}

.admin-table__actions {
  white-space: nowrap;
}

.admin-link-btn {
  border: 0;
  background: none;
  color: var(--color-primary);
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  padding: 0 0.25rem;
}

.admin-link-btn--danger {
  color: var(--color-red);
}

.admin-subsection {
  margin: 1rem 0;
}

.admin-subsection__title {
  margin: 0 0 0.65rem;
  font-size: var(--text-sm);
  font-weight: 800;
}

.admin-role-checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.75rem;
}

.admin-role-checks--form {
  margin-bottom: 0;
}

.admin-load-error {
  margin-bottom: 1rem;
}

.admin-load-error .admin-hint {
  margin-top: 0.5rem;
}

.admin-perm-tree {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 28rem;
  overflow-y: auto;
}

.admin-perm-group {
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.75rem;
  margin: 0;
  background: var(--color-surface);
}

.admin-perm-group legend {
  padding: 0 0.35rem;
  font-size: var(--text-sm);
  font-weight: 800;
}

.fanos-dropdown.is-disabled .fanos-dropdown__trigger {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

@media (max-width: 767px) {
  .admin-topbar__row {
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.75rem;
  }

  .admin-topbar__add {
    order: -1;
    align-self: flex-end;
    min-height: 2.25rem;
    padding: 0.35rem 0.85rem;
    font-size: 0.6875rem;
  }

  .admin-topbar__form {
    flex: 1 1 100%;
    width: 100%;
  }

  .admin-topbar__filters {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    width: 100%;
    align-items: end;
    overflow-x: visible;
  }

  .admin-topbar__filters .admin-filter-field--wide {
    max-width: none;
  }

  .admin-topbar__filters .admin-filter-field,
  .admin-topbar__filters .admin-filter-field--dropdown {
    min-width: 0;
    width: 100%;
  }

  .admin-topbar__filters .fanos-dropdown {
    min-width: 0;
    width: 100%;
  }

  .admin-topbar__filters .fanos-dropdown.is-open,
  .admin-topbar__filters .admin-ms.is-open {
    z-index: 50;
  }

  .admin-topbar__filters .fanos-dropdown__label {
    font-size: 0.625rem;
    white-space: nowrap;
  }

  .admin-topbar__filters .fanos-dropdown__trigger {
    min-height: 2.25rem;
    padding: 0.35rem 0.55rem;
    gap: 0.25rem;
    font-size: 0.6875rem;
  }

  .admin-topbar__filters .fanos-dropdown__icon {
    display: none;
  }

  .admin-topbar__filters .fanos-dropdown__trigger-text {
    font-size: 0.6875rem;
  }

  .admin-topbar__filters .fanos-dropdown__chevron {
    width: 0.85rem;
    height: 0.85rem;
  }

  .admin-topbar__filters .admin-input {
    min-height: 2.25rem;
    padding: 0.35rem 0.55rem;
    font-size: 0.6875rem;
  }

  .admin-form-grid {
    grid-template-columns: 1fr;
  }

  .admin-table-footer {
    flex-direction: column;
    align-items: stretch;
  }

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

/* --- file:// warning --- */
.file-protocol-banner {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 9999;
  padding: 0.75rem 1rem;
  background: #fef3c7;
  color: #92400e;
  border-bottom: 1px solid #fcd34d;
  font-size: var(--text-sm);
  line-height: 1.6;
  text-align: center;
}

.file-protocol-banner code {
  direction: ltr;
  unicode-bidi: isolate;
  font-size: 0.8125rem;
}

body.has-file-protocol-banner {
  padding-top: 3.25rem;
}

/* --- صفحه درباره فانوس --- */
.fanos-about-page {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .fanos-about-page {
    gap: 2rem;
  }
}

.fanos-about-hero {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.fanos-about-hero__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: center;
}

@media (min-width: 900px) {
  .fanos-about-hero__row {
    grid-template-columns: minmax(0, 1.05fr) minmax(260px, 0.9fr);
    gap: 2rem;
  }
}

.fanos-about-hero__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  padding: 0.5rem;
}

.fanos-about-hero__img-wrap {
  position: relative;
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
  line-height: 0;
  -webkit-mask-image: radial-gradient(ellipse 96% 92% at 50% 48%, #000 36%, transparent 74%);
  mask-image: radial-gradient(ellipse 96% 92% at 50% 48%, #000 36%, transparent 74%);
}

.fanos-about-hero__img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 98% 94% at 50% 50%, transparent 42%, var(--color-page) 100%);
}

.fanos-about-hero__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.fanos-about-hero__content {
  text-align: right;
}

.fanos-about-hero__title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.5rem, 2.5vw, var(--text-3xl));
  font-weight: 800;
  line-height: 1.35;
  color: var(--color-primary-dark);
}

.fanos-about-hero__lead {
  margin: 0 0 0.85rem;
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.7;
  color: var(--color-ink);
}

.fanos-about-hero__brand {
  color: var(--color-primary);
  font-weight: 700;
}

.fanos-about-hero__text {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading);
  color: var(--color-muted);
}

.fanos-about-mission {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: linear-gradient(270deg, var(--color-primary-soft) 0%, var(--color-surface) 55%);
  box-shadow: var(--shadow-card);
}

.fanos-about-mission__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-primary);
  border: 1px solid var(--color-border-soft);
}

.fanos-about-mission__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.fanos-about-mission__text {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.75;
  color: var(--color-ink);
}

.fanos-about-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px) {
  .fanos-about-section {
    gap: 1.25rem;
  }
}

.fanos-about-section__head {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.fanos-about-section__line {
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-border);
}

.fanos-about-section__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
}

.fanos-about-section__title--solo {
  text-align: center;
}

.fanos-about-section__intro {
  margin: 0;
  text-align: center;
  font-size: var(--text-base);
  line-height: var(--leading);
  color: var(--color-muted);
  max-width: 42rem;
  margin-inline: auto;
}

.fanos-about-priorities {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: stretch;
}

@media (min-width: 768px) {
  .fanos-about-priorities {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

.fanos-about-priority {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
  min-height: 15rem;
  padding: 2.5rem 1.25rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.fanos-about-priority__num {
  position: absolute;
  top: 0.875rem;
  inset-inline-end: 0.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.fanos-about-priority__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  margin-bottom: 0.875rem;
  border-radius: var(--radius-pill);
}

.fanos-about-priority__icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

.fanos-about-priority__title {
  margin: 0 0 0.5rem;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.5;
}

.fanos-about-priority__text {
  margin: 0;
  flex: 1;
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--color-muted);
}

.fanos-about-priority--growth .fanos-about-priority__icon {
  background: var(--color-emerald-soft);
  color: var(--color-emerald);
}

.fanos-about-priority--growth .fanos-about-priority__num {
  background: var(--color-emerald);
}

.fanos-about-priority--innovation .fanos-about-priority__icon {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.fanos-about-priority--innovation .fanos-about-priority__num {
  background: var(--color-primary);
}

.fanos-about-priority--regional .fanos-about-priority__icon {
  background: #ede9fe;
  color: #6d28d9;
}

.fanos-about-priority--regional .fanos-about-priority__num {
  background: #7c3aed;
}

.fanos-about-section--beliefs {
  padding-top: 0.25rem;
}

.fanos-about-beliefs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.875rem;
  align-items: stretch;
}

@media (min-width: 480px) {
  .fanos-about-beliefs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .fanos-about-beliefs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
}

@media (min-width: 900px) {
  .fanos-about-beliefs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.fanos-about-belief {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.65rem;
  height: 100%;
  min-height: 9.5rem;
  padding: 1.125rem 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.fanos-about-belief__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-sm);
}

.fanos-about-belief__icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

.fanos-about-belief__title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.45;
}

.fanos-about-belief__text {
  margin: 0;
  flex: 1;
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-muted);
}

.fanos-about-belief--growth .fanos-about-belief__icon {
  background: var(--color-emerald-soft);
  color: var(--color-emerald);
}

.fanos-about-belief--clarity .fanos-about-belief__icon {
  background: #ede9fe;
  color: #6d28d9;
}

.fanos-about-belief--team .fanos-about-belief__icon {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.fanos-about-belief--result .fanos-about-belief__icon {
  background: var(--color-emerald-soft);
  color: #0d9488;
}

.fanos-about-belief--trust .fanos-about-belief__icon {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}

/* Fanos rich text editor (Quill) */
.fanos-editor {
  direction: rtl;
  text-align: right;
}

.fanos-editor .ql-toolbar.ql-snow {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--color-page);
  font-family: var(--font-family);
}

.fanos-editor .ql-container.ql-snow {
  border: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--color-surface);
  font-family: var(--font-family);
  font-size: var(--text-sm);
}

.fanos-editor .ql-editor {
  min-height: inherit;
  line-height: 1.55;
  color: var(--color-ink);
  text-align: right;
  direction: rtl;
}

/* Quill snow.css uses LTR list padding; keep RTL lists readable */
.fanos-editor .ql-editor ol,
.fanos-editor .ql-editor ul {
  padding-left: 0;
  padding-right: 0;
}

.fanos-editor .ql-editor li::before {
  direction: ltr;
  unicode-bidi: isolate;
}

.fanos-editor .ql-editor.ql-blank::before {
  right: 15px;
  left: auto;
  text-align: right;
  font-style: normal;
  color: var(--color-muted-light);
}

.fanos-editor .ql-snow .ql-picker-label,
.fanos-editor .ql-snow .ql-picker-options {
  direction: rtl;
  text-align: right;
}

.fanos-rich-text {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.fanos-rich-text p {
  margin: 0 0 0.25rem;
}

.fanos-rich-text p:last-child {
  margin-bottom: 0;
}

/* Tailwind Preflight sets list-style:none — restore markers after submit */
.fanos-rich-text ul,
.fanos-rich-text ol {
  margin: 0.25rem 0 0.5rem;
  padding-inline-start: 1.25rem;
  padding-inline-end: 0;
  list-style-position: outside;
}

.fanos-rich-text ul {
  list-style-type: disc;
}

.fanos-rich-text ol {
  list-style-type: decimal;
}

.fanos-rich-text li {
  display: list-item;
}

.fanos-rich-text a {
  color: var(--color-primary);
  text-decoration: underline;
}

.fanos-rich-text strong,
.fanos-rich-text b {
  font-weight: 700;
}

.fanos-rich-text h1,
.fanos-rich-text h2,
.fanos-rich-text h3,
.fanos-rich-text h4,
.fanos-rich-text h5,
.fanos-rich-text h6,
.fanos-editor .ql-editor h1,
.fanos-editor .ql-editor h2,
.fanos-editor .ql-editor h3,
.fanos-editor .ql-editor h4,
.fanos-editor .ql-editor h5,
.fanos-editor .ql-editor h6 {
  margin: 0.5rem 0 0.35rem;
  font-weight: 800;
  line-height: 1.4;
  color: var(--color-ink);
}

.fanos-rich-text h1,
.fanos-editor .ql-editor h1 { font-size: 1.25rem; }
.fanos-rich-text h2,
.fanos-editor .ql-editor h2 { font-size: 1.125rem; }
.fanos-rich-text h3,
.fanos-editor .ql-editor h3 { font-size: 1rem; }
.fanos-rich-text h4,
.fanos-rich-text h5,
.fanos-rich-text h6,
.fanos-editor .ql-editor h4,
.fanos-editor .ql-editor h5,
.fanos-editor .ql-editor h6 { font-size: 0.9375rem; }

.fanos-rich-text blockquote,
.fanos-editor .ql-editor blockquote {
  margin: 0.35rem 0 0.5rem;
  padding: 0.35rem 0.75rem;
  border-right: 3px solid var(--color-primary-soft);
  background: var(--color-page);
  color: var(--color-muted);
}

.fanos-rich-text code,
.fanos-editor .ql-editor code {
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: var(--color-surface-muted, var(--color-page));
  border: 1px solid var(--color-border-soft, var(--color-border));
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.85em;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
}

.fanos-rich-text pre,
.fanos-editor .ql-editor pre,
.fanos-editor .ql-editor pre.ql-syntax {
  margin: 0.35rem 0 0.5rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted, var(--color-page));
  border: 1px solid var(--color-border-soft, var(--color-border));
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  direction: ltr;
  text-align: left;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-ink);
}

.fanos-rich-text pre code,
.fanos-editor .ql-editor pre code {
  padding: 0;
  background: transparent;
  border: 0;
  font-size: inherit;
}

.fanos-rich-text hr,
.fanos-editor .ql-editor hr {
  margin: 0.5rem 0;
  border: 0;
  border-top: 1px solid var(--color-border-soft);
}

/* --- Night mode (data-theme on <html>) --- */
[data-theme="dark"] {
  --color-page: #0f1419;
  --color-surface: #1a2332;
  --color-surface-muted: #232d3f;
  --color-primary: #9b9ee8;
  --color-primary-dark: #b4b7f0;
  --color-primary-soft: #2a3350;
  --color-ink: #e8eaed;
  --color-muted: #9aa0a6;
  --color-muted-light: #6b7280;
  --color-border: #2d3748;
  --color-border-soft: #243044;
  --color-row-alt: #1e2836;
  --color-hover-subtle: #243044;
  --color-emerald-soft: #0d2818;
  --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.38);
  --shadow-soft: 0 10px 40px -10px rgba(0, 0, 0, 0.48);
  --shadow-nav: 0 4px 20px -6px rgba(0, 0, 0, 0.32);
  color-scheme: dark;
}

[data-theme="dark"] body {
  background: var(--color-page);
  color: var(--color-ink);
}

[data-theme="dark"] .bg-page {
  background-color: var(--color-page) !important;
}

[data-theme="dark"] .bg-white {
  background-color: var(--color-surface) !important;
}

[data-theme="dark"] .text-ink {
  color: var(--color-ink) !important;
}

[data-theme="dark"] .border-gray-100,
[data-theme="dark"] .border-gray-200 {
  border-color: var(--color-border) !important;
}

[data-theme="dark"] .card,
[data-theme="dark"] .tab-btn,
[data-theme="dark"] .tab-btn-active,
[data-theme="dark"] .sidebar-item,
[data-theme="dark"] .sidebar-item-active {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-ink);
}

[data-theme="dark"] .tab-btn:hover,
[data-theme="dark"] .sidebar-item:hover,
[data-theme="dark"] .sidebar-item-active:hover {
  background-color: var(--color-surface-muted);
}

[data-theme="dark"] .tab-btn-active,
[data-theme="dark"] .sidebar-item-active {
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
}

[data-theme="dark"] .sidebar-mode-toggle {
  background: var(--color-surface);
  border-color: var(--color-border);
}

[data-theme="dark"] .login-input,
[data-theme="dark"] .admin-input,
[data-theme="dark"] select.admin-input {
  background: var(--color-surface-muted);
  color: var(--color-ink);
  border-color: var(--color-border);
}

[data-theme="dark"] .login-card__error {
  background: #3b1f1f;
}

[data-theme="dark"] .login-card__success {
  background: #0d2818;
}

[data-theme="dark"] .admin-modal__backdrop {
  background: rgba(0, 0, 0, 0.62);
}

[data-theme="dark"] .user-menu__dropdown {
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: var(--shadow-soft);
}

[data-theme="dark"] .user-menu__item:hover {
  background: var(--color-surface-muted);
}

[data-theme="dark"] .fanos-dropdown__icon--grey {
  background: var(--color-surface-muted);
}

[data-theme="dark"] .fanos-dropdown__icon--red {
  background: #3b1f1f;
}

[data-theme="dark"] .fanos-dropdown__icon--amber {
  background: #3b2f0f;
}

[data-theme="dark"] .fanos-dropdown__icon--purple {
  background: #2a1f42;
  color: #c4b5fd;
}

[data-theme="dark"] .fanos-dropdown__icon--pink {
  background: #3b1a2e;
  color: #f9a8d4;
}

[data-theme="dark"] .roadmap-task--backlog {
  background: #2a1f22;
  border-color: #4a3038;
}

[data-theme="dark"] .roadmap-task--progress {
  background: #2a2618;
  border-color: #4a3f20;
}

[data-theme="dark"] .roadmap-task--done {
  background: #152820;
  border-color: #1f4032;
}

[data-theme="dark"] .roadmap-task--cancelled {
  background: #2a1818;
  border-color: #4a2828;
}

[data-theme="dark"] .ql-snow .ql-stroke {
  stroke: #c8ccd0;
}

[data-theme="dark"] .ql-snow .ql-fill {
  fill: #c8ccd0;
}

[data-theme="dark"] .ql-snow .ql-picker,
[data-theme="dark"] .ql-snow .ql-picker-label,
[data-theme="dark"] .ql-snow .ql-picker-options {
  color: var(--color-ink);
}

[data-theme="dark"] .ql-snow .ql-picker-options {
  background: var(--color-surface);
  border-color: var(--color-border);
}

[data-theme="dark"] .ql-toolbar.ql-snow,
[data-theme="dark"] .ql-container.ql-snow {
  border-color: var(--color-border);
}

[data-theme="dark"] .ql-toolbar.ql-snow {
  background: var(--color-surface-muted);
}

[data-theme="dark"] .ql-container.ql-snow {
  background: var(--color-surface);
}

[data-theme="dark"] .ql-editor.ql-blank::before {
  color: var(--color-muted-light);
}

[data-theme="dark"] .fanos-rich-text code,
[data-theme="dark"] .fanos-editor .ql-editor code,
[data-theme="dark"] .fanos-rich-text pre,
[data-theme="dark"] .fanos-editor .ql-editor pre,
[data-theme="dark"] .fanos-editor .ql-editor pre.ql-syntax {
  background: var(--color-surface-muted);
  border-color: var(--color-border);
}

[data-theme="dark"] .fanos-dropdown__search,
[data-theme="dark"] .fanos-jalali-date__toggle,
[data-theme="dark"] .fanos-jalali-date__panel,
[data-theme="dark"] .workbench-reminders__snooze,
[data-theme="dark"] .workbench-reminders__clear {
  background: var(--color-surface);
  color: var(--color-ink);
  border-color: var(--color-border);
}

[data-theme="dark"] .fanos-jalali-date__toggle:hover,
[data-theme="dark"] .workbench-reminders__snooze:hover,
[data-theme="dark"] .workbench-reminders__clear:hover {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

[data-theme="dark"] .monitoring-frame {
  background: var(--color-surface);
}

/* --- Admin panel (night mode) --- */
[data-theme="dark"] .admin-table thead th {
  background: var(--color-surface-muted);
  color: var(--color-muted);
  border-bottom-color: var(--color-border);
}

[data-theme="dark"] .admin-table tbody td {
  color: var(--color-ink);
  border-bottom-color: var(--color-border-soft);
}

[data-theme="dark"] .admin-table tbody tr:nth-child(even) {
  background: var(--color-row-alt);
}

[data-theme="dark"] .admin-table tbody tr:hover {
  background: var(--color-primary-soft);
}

[data-theme="dark"] .admin-table-card,
[data-theme="dark"] .admin-subsection-card,
[data-theme="dark"] .admin-perm-group {
  background: var(--color-surface);
  border-color: var(--color-border);
}

[data-theme="dark"] .admin-table-footer {
  background: var(--color-surface-muted);
  border-top-color: var(--color-border);
}

[data-theme="dark"] .admin-topbar__add:hover {
  background: var(--color-primary-soft);
}

[data-theme="dark"] .admin-filter-field .admin-input:hover {
  border-color: var(--color-primary);
}

[data-theme="dark"] .admin-badge--off {
  background: #3b1f1f;
  color: #fca5a5;
}

[data-theme="dark"] .admin-action-btn--muted {
  color: var(--color-muted);
}

[data-theme="dark"] .admin-action-btn--muted:hover {
  color: var(--color-ink);
}

[data-theme="dark"] .admin-status--pending {
  color: #fbbf24;
}

[data-theme="dark"] .admin-count-badge {
  background: var(--color-surface-muted);
  color: var(--color-ink);
}

[data-theme="dark"] .admin-icon-box {
  background: var(--color-surface-muted);
  border-color: var(--color-border);
}

[data-theme="dark"] .admin-pager-btn {
  background: var(--color-surface-muted);
  border-color: var(--color-border);
  color: var(--color-ink);
}

[data-theme="dark"] .admin-pager-btn--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

[data-theme="dark"] .admin-btn--secondary,
[data-theme="dark"] .admin-btn--ghost {
  background: var(--color-surface-muted);
  border-color: var(--color-border);
  color: var(--color-primary);
}

[data-theme="dark"] .admin-modal__panel {
  background: var(--color-surface);
}

[data-theme="dark"] .admin-modal__head {
  border-bottom-color: var(--color-border);
}

[data-theme="dark"] .fanos-drawer--with-head .fanos-drawer__head {
  border-bottom-color: var(--color-border);
}

[data-theme="dark"] .admin-user-avatar__preview {
  background: var(--color-surface-muted);
  border-color: var(--color-border);
}

[data-theme="dark"] .fanos-dropdown__trigger {
  background: var(--color-surface-muted);
  border-color: var(--color-border);
  color: var(--color-ink);
}

[data-theme="dark"] .fanos-dropdown__menu,
[data-theme="dark"] .fanos-dropdown__search-wrap {
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: var(--shadow-soft);
}

[data-theme="dark"] .fanos-dropdown__option--selected {
  background: var(--color-primary);
  color: #fff;
}

[data-theme="dark"] .fanos-dropdown__option--selected:hover {
  background: var(--color-primary-dark);
}

/* =====================================================================
   FANOS — DESIGN THEME
   Dense, neutral, Linear/Notion-inspired.
   Goal order: speed > simplicity > beauty > modern.
   ===================================================================== */

html {
  --m-bg: var(--color-page);
  --m-surface: var(--color-surface);
  --m-surface-muted: var(--color-surface-muted);
  --m-border: var(--color-border);
  --m-border-soft: var(--color-border-soft);
  --m-text: var(--color-ink);
  --m-text-soft: var(--color-muted);
  --m-text-faint: var(--color-muted-light);
  --m-hover: rgba(63, 65, 145, 0.05);
  --m-accent: var(--color-primary);
  --m-accent-soft: var(--color-primary-soft);
  --m-radius: 10px;
  --m-radius-sm: 8px;
  --m-row-min: 42px;
  --m-focus: 0 0 0 2px var(--color-surface), 0 0 0 4px rgba(63, 65, 145, 0.45);
  --m-shadow-pop: 0 12px 32px -8px rgba(15, 23, 42, 0.22);
  --m-chip-bg: var(--color-surface-muted);
  --m-chip-text: var(--color-muted);
}

[data-theme="dark"] {
  --m-hover: rgba(155, 158, 232, 0.1);
}

/* ---- Layout: give max horizontal room to the list ---- */
.page-main {
  padding: 1rem 1.25rem 1.5rem;
}
@media (min-width: 1024px) {
.page-main {
    padding: 1.25rem 1.75rem 1.75rem;
  }
}
.page-content--stacked {
  gap: 0.75rem;
}
.workbench-page .page-body,
.roadmap-page .page-body {
  max-width: 1180px;
  margin-inline: auto;
  width: 100%;
}

.workbench-request-action {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 0.15rem;
}

.workbench-request-action__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--color-primary-soft);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-primary);
  font: inherit;
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.workbench-request-action__btn:hover {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  transform: translateY(-1px);
}

.workbench-request-action__btn svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.workbench-request-form-host {
  position: fixed;
  inset: 0;
  z-index: 140;
  pointer-events: none;
}

.workbench-request-form-host:not([hidden]) {
  pointer-events: auto;
}

.workbench-request-form-host .roadmap-add {
  position: static;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.workbench-request-form-host .roadmap-add__drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: -0.2rem 0 0.9rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--m-border);
}

.workbench-request-form-host .roadmap-add__body {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  inset-inline-start: auto !important;
  inset-inline-end: auto !important;
  left: 0 !important;
  right: auto !important;
  z-index: 141;
  width: min(560px, 94vw);
  max-height: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 1.1rem 1.25rem 1.6rem;
  background: var(--m-surface);
  border: 0;
  border-right: 1px solid var(--m-border);
  border-radius: 0;
  box-shadow: var(--shadow-soft);
  transform: translateX(-100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.28s ease;
  display: block;
}

.workbench-request-form-host .roadmap-add__body[hidden] {
  display: block;
}

.workbench-request-form-host .roadmap-add.is-open .roadmap-add__body {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

.workbench-request-form-host .roadmap-add__form {
  flex: 1 1 auto;
  min-height: 0;
}

/* ---- Header: slimmer, calmer ---- */
.site-header__inner {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}
.heading-page {
  font-size: var(--text-xl);
  color: var(--m-text);
}
.tab-btn-active {
  background: var(--m-accent-soft);
  box-shadow: none;
}

/* ---- Topbar / filter bar ---- */
.roadmap-topbar {
  gap: 0.5rem;
  align-items: center;
  overflow: visible;
}
.roadmap-filterbar {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.roadmap-filterbar__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 2.1rem;
  padding: 0 0.8rem;
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius-sm);
  background: var(--m-surface);
  color: var(--m-text);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.roadmap-filterbar__trigger:hover {
  background: var(--m-hover);
  border-color: var(--m-accent);
}
.roadmap-filterbar__trigger svg {
  width: 1rem;
  height: 1rem;
}
.roadmap-filterbar.is-open .roadmap-filterbar__trigger {
  border-color: var(--m-accent);
  background: var(--m-accent-soft);
  color: var(--m-accent);
}
.roadmap-filterbar__count {
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--m-accent);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
}
.roadmap-filterbar__popover {
  position: absolute;
  top: calc(100% + 0.4rem);
  inset-inline-start: 0;
  z-index: 60;
  width: min(20rem, calc(100vw - 2rem));
  padding: 1rem;
  background: var(--m-surface);
  border: 1px solid var(--m-border);
  border-radius: var(--radius-md);
  box-shadow: var(--m-shadow-pop);
}
.roadmap-filterbar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.roadmap-filterbar__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--m-text);
}
.roadmap-filterbar__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 0;
  border-radius: var(--m-radius-sm);
  background: transparent;
  color: var(--m-text-soft);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.roadmap-filterbar__close:hover {
  background: var(--m-hover);
  color: var(--m-text);
}
.roadmap-filterbar__close svg {
  width: 1.05rem;
  height: 1.05rem;
}
.roadmap-filterbar__toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.85rem;
}
.roadmap-filterbar__clear {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.4rem;
  border: 0;
  background: transparent;
  color: var(--m-text-soft);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--m-radius-sm);
  transition: color 0.12s ease, background 0.12s ease;
}
.roadmap-filterbar__clear:hover {
  color: var(--m-accent);
  background: var(--m-accent-soft);
}
.roadmap-filterbar__clear svg {
  width: 0.95rem;
  height: 0.95rem;
}
.roadmap-filterbar__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}
.roadmap-filterbar__grid .fanos-dropdown {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.roadmap-filterbar__grid .fanos-dropdown__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--m-text-soft);
  padding-inline: 0.1rem;
}
.roadmap-filterbar__grid .fanos-dropdown__trigger {
  width: 100%;
  justify-content: space-between;
  min-height: 2.5rem;
  padding: 0.4rem 0.75rem;
  border-radius: var(--m-radius-sm);
}
/* hide the colored square icons inside dropdowns (cleaner look) */
.roadmap-filterbar__grid .fanos-dropdown__icon {
  display: none;
}
.roadmap-filterbar__apply {
  display: block;
  width: 100%;
  margin-top: 1rem;
  padding: 0.7rem 1rem;
  border: 0;
  border-radius: var(--m-radius-sm);
  background: var(--m-accent);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.12s ease;
}
.roadmap-filterbar__apply:hover {
  filter: brightness(0.95);
}
.roadmap-topbar__icon-filters {
  gap: 0.25rem;
}

/* ---- Admin: roadmap-style collapsible filter bar ---- */
.admin-topbar__row--filterbar {
  align-items: center;
  justify-content: space-between;
}
.admin-filterbar .roadmap-filterbar__grid .admin-filter-field,
.admin-filterbar .roadmap-filterbar__grid .admin-filter-field--dropdown {
  min-width: 0;
  width: 100%;
  gap: 0.3rem;
}
.admin-filterbar .roadmap-filterbar__grid .admin-filter-field .admin-input {
  width: 100%;
  min-height: 2.5rem;
}
.admin-filterbar .roadmap-filterbar__grid .admin-filter-field__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--m-text-soft);
  padding-inline: 0.1rem;
}
.admin-filterbar .roadmap-filterbar__grid .admin-ms,
.admin-filterbar .roadmap-filterbar__grid .fanos-dropdown {
  width: 100%;
  min-width: 0;
}

/* ---- Sections: list-like, low chrome ---- */
.roadmap-sections {
  gap: 0.75rem;
}
.roadmap-section {
  padding: 0.35rem 0.5rem 0.4rem;
  border: 1px solid var(--m-border);
  border-radius: var(--radius-md);
  background: var(--m-surface);
  box-shadow: none;
}
.roadmap-section__head {
  padding: 0.35rem 0.4rem;
}
.roadmap-section__title {
  font-size: 0.8125rem;
}
.roadmap-section__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ---- Task row: dense, neutral, single line ---- */
.roadmap-task {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--m-row-min);
  padding: 0.3rem 0.5rem;
  border: 0;
  border-radius: var(--m-radius-sm);
  background: transparent;
  box-shadow: none;
}
.roadmap-task + .roadmap-task {
  border-top: 1px solid var(--m-border-soft);
}
.roadmap-task:hover {
  background: var(--m-hover);
}
.roadmap-task.is-open {
  background: var(--m-accent-soft);
  box-shadow: inset 2px 0 0 var(--m-accent);
}
.roadmap-task.is-selected {
  background: var(--m-accent-soft);
}
/* neutralize status-based card colors */
.roadmap-task--backlog,
.roadmap-task--progress,
.roadmap-task--done,
.roadmap-task--cancelled {
  background: transparent;
  border-color: transparent;
}
.roadmap-task__panel,
.roadmap-task__head {
  display: contents;
}
.roadmap-task__headline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1 1 auto;
  order: 0;
}
.roadmap-task__aside {
  order: 1;
}
.roadmap-task__actions--modern {
  order: 2;
}
.roadmap-task__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--m-text);
  line-height: 1.4;
  margin: 0;
  flex: 0 1 auto;
  min-width: 4rem;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.roadmap-task--unread .roadmap-task__title {
  font-weight: 700;
}
.roadmap-task__meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  margin: 0;
}

/* Hide visual noise in the dense list; keep status + priority + due + assignee */
.roadmap-task .roadmap-cat,
.roadmap-task .roadmap-task-tags,
.roadmap-task .roadmap-task__progress-badge,
.roadmap-task .roadmap-task__entities,
.roadmap-task .roadmap-task__main,
.roadmap-task .roadmap-vote {
  display: none !important;
}

/* Product becomes a neutral, quiet label */
.roadmap-task__product {
  background: transparent;
  color: var(--m-text-faint);
  font-weight: 500;
  font-size: 0.6875rem;
  padding: 0;
  border: 0;
  max-width: 8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Editable product chip in the detail hero top row (styled like other chips) */
.roadmap-task-detail__chip-row .roadmap-task__product--editable {
  display: inline-flex;
  align-items: center;
  max-width: 12rem;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill, 999px);
  background: var(--m-surface-muted, rgba(100, 116, 139, 0.12));
  color: var(--m-text-soft, #475569);
  border: 1px solid transparent;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.roadmap-task-detail__chip-row .roadmap-task__product--editable:hover {
  background: var(--m-surface-hover, rgba(100, 116, 139, 0.2));
  border-color: var(--m-border, rgba(100, 116, 139, 0.3));
}
/* Reminder pill in the detail hero top chip row */
.roadmap-task-detail__reminder-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill, 999px);
  background: var(--m-accent-soft, rgba(124, 92, 246, 0.12));
  color: var(--m-accent-strong, #6d4ce0);
  border: 1px solid transparent;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.roadmap-task-detail__reminder-chip:hover {
  border-color: var(--m-accent-border, rgba(124, 92, 246, 0.45));
}
.roadmap-task-detail__reminder-chip.is-empty {
  background: var(--m-surface-muted, rgba(100, 116, 139, 0.12));
  color: var(--m-text-faint, #94a3b8);
  font-weight: 500;
}
.roadmap-task-detail__reminder-chip-label {
  font-weight: 600;
}
/* Attachment row sits outside the meta box */
.roadmap-task-detail__attach-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  margin-top: 0.1rem;
}
.roadmap-task-detail__attach-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-muted, #64748b);
}
/* Clickable progress stat on the side rail */
.roadmap-task-detail__side-stat--editable {
  cursor: pointer;
  border: 0;
  background: transparent;
  font: inherit;
  transition: opacity 0.15s ease;
}
.roadmap-task-detail__side-stat--editable:hover {
  opacity: 0.75;
}
.roadmap-task-detail__side-stat--editable.is-empty .roadmap-task__progress-pct {
  color: var(--m-text-faint, #94a3b8);
  font-weight: 500;
  font-size: 0.8rem;
}
/* Action icons (bookmark / share / delete) stacked vertically in the side rail */
.roadmap-task-detail__side .roadmap-task-detail__actions {
  flex: 0 0 auto;
  width: auto;
  order: 0;
  direction: rtl;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  grid-area: unset;
  align-self: center;
}
/* Single-column meta list: each row (related-items / tags) gets full width */
html[data-design="modern"] .roadmap-task-detail__meta-list {
  grid-template-columns: 1fr;
  gap: 0;
}
html[data-design="modern"] .roadmap-task-detail__meta-col + .roadmap-task-detail__meta-col .roadmap-task-detail__meta-row {
  border-top: 1px solid var(--color-border-soft, #eef0f4);
}
/* Reminder / due date: neutral unless actually due */
.roadmap-task__reminder {
  color: var(--m-text-soft);
  background: transparent;
  border: 0;
  font-size: 0.6875rem;
}

/* Status + priority keep their color but compact */
.roadmap-task .roadmap-priority,
.roadmap-task .roadmap-task-status-pill {
  font-size: 0.6875rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
}

/* Assignee avatars: inline, compact, at the trailing edge */
.roadmap-task__aside {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
  padding: 0;
  border: 0;
  background: transparent;
}
.roadmap-task__avatars {
  margin: 0;
}

/* ---- Card actions: checkbox + 3-dot menu only ---- */
.roadmap-task__actions--modern {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  flex: 0 0 auto;
}
.roadmap-task__select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.roadmap-task__select input {
  width: 0.95rem;
  height: 0.95rem;
  cursor: pointer;
  accent-color: var(--m-accent);
}
.roadmap-task:hover .roadmap-task__select,
.roadmap-task__select:focus-within,
.roadmap-task.is-selected .roadmap-task__select {
  opacity: 1;
}
.roadmap-task__menu {
  position: relative;
}
.roadmap-task__menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 0;
  border-radius: var(--m-radius-sm);
  background: transparent;
  color: var(--m-text-soft);
  cursor: pointer;
  opacity: 0.55;
  transition: background 0.12s ease, opacity 0.12s ease;
}
.roadmap-task__menu-toggle svg {
  width: 1.05rem;
  height: 1.05rem;
}
.roadmap-task:hover .roadmap-task__menu-toggle,
.roadmap-task__menu.is-open .roadmap-task__menu-toggle {
  opacity: 1;
  background: var(--m-hover);
}
.roadmap-task__menu-pop {
  position: absolute;
  top: calc(100% + 0.25rem);
  inset-inline-end: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.25rem;
  background: var(--m-surface);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius-sm);
  box-shadow: var(--m-shadow-pop);
}
.roadmap-task__menu-pop--body-portal {
  position: fixed;
  top: auto;
  bottom: auto;
  inset-inline-end: auto;
  z-index: 300;
}
.roadmap-task__menu-pop[hidden] {
  display: none;
}
.roadmap-task__menu-pop > button {
  position: static;
  opacity: 1;
}

/* ---- Modern: icon-only 3-dot menu (table rows) ---- */
.roadmap-task__menu-pop--icons {
  flex-direction: row;
  align-items: center;
  gap: 0.15rem;
  padding: 0.25rem;
  background: var(--m-surface);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius-sm);
  box-shadow: var(--m-shadow-pop);
}
.roadmap-task__menu-pop--icons .roadmap-task__menu-item {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--m-radius-sm);
  background: transparent;
  color: var(--m-text-soft);
  cursor: pointer;
  opacity: 1;
}
.roadmap-task__menu-pop--icons .roadmap-task__menu-item svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
}
.roadmap-task__menu-pop--icons .roadmap-task__menu-item:hover {
  background: var(--m-hover);
  color: var(--m-text);
}
.roadmap-task__menu-pop--icons .roadmap-task__menu-item--danger:hover {
  color: #dc2626;
}
/* Keep the open row (and its menu popover) above sibling rows */
.roadmap-table__row:has(.roadmap-task__menu.is-open) {
  z-index: 5;
}

/* ---- Modern toolbar: add-item + filters + search + count ---- */
.roadmap-topbar--modern {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "actions search count";
  align-items: center;
  column-gap: 0.6rem;
  row-gap: 0;
  width: 100%;
  min-width: 0;
  overflow: visible;
}
/* When the add panel is open, drop the toolbar's stacking context so the
   fixed panel (z-index 140) escapes above the backdrop, while the search bar
   stays in normal flow BELOW the dimmed layer. */
.roadmap-topbar--modern:has(.roadmap-add.is-open) {
  z-index: auto;
}
/* RTL grid: actions = right, count = left */
.roadmap-toolbar__actions {
  grid-area: actions;
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.45rem;
  min-width: 0;
  flex-shrink: 0;
}
.roadmap-toolbar__actions .roadmap-add.card {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  gap: 0;
}
.roadmap-toolbar__actions .roadmap-add__toggle {
  margin-inline-start: 0;
  flex-shrink: 0;
}
.roadmap-toolbar__actions .roadmap-topbar__icon-filters {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}
.roadmap-toolbar__actions .roadmap-filterbar {
  flex-shrink: 0;
}
.roadmap-topbar--modern .roadmap-search {
  grid-area: search;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  width: 100%;
  max-width: none;
  height: 2.1rem;
  padding: 0 0.75rem;
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius-sm);
  background: var(--m-surface);
}
.roadmap-search:focus-within {
  border-color: var(--m-accent);
}
.roadmap-search__icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--m-text-soft);
}
.roadmap-search__icon svg {
  width: 1rem;
  height: 1rem;
}
.roadmap-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--m-text);
}
.roadmap-topbar--modern .roadmap-count {
  grid-area: count;
  justify-self: end;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--m-text-soft);
  white-space: nowrap;
}

@media (max-width: 720px) {
.roadmap-topbar--modern {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "actions count"
      "search search";
    row-gap: 0.5rem;
  }
}

/* Add-item: primary button in the toolbar */
.roadmap-toolbar__actions .roadmap-add {
  position: static;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.roadmap-toolbar__actions .roadmap-add__toggle {
  height: 2.1rem;
  padding: 0 0.9rem;
  gap: 0.35rem;
  margin-inline-start: 0;
  border: 0;
  border-radius: var(--m-radius-sm);
  background: var(--m-accent);
}
.roadmap-topbar--modern .roadmap-add__toggle:hover {
  filter: brightness(0.95);
}
.roadmap-topbar--modern .roadmap-add__title,
.roadmap-topbar--modern .roadmap-add__toggle-icon,
.roadmap-topbar--modern .roadmap-add__toggle-icon svg {
  color: #fff;
}
.roadmap-topbar--modern .roadmap-add__title {
  font-size: 0.8125rem;
  font-weight: 600;
}
/* Add-item form opens as a right-side drawer above the dimmed page. */
.roadmap-topbar--modern .roadmap-add__body {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  inset-inline-start: auto !important;
  inset-inline-end: auto !important;
  left: 0 !important;
  right: auto !important;
  z-index: 140;
  width: min(560px, 94vw);
  max-height: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 1.1rem 1.25rem 1.6rem;
  background: var(--m-surface);
  border: 0;
  border-right: 1px solid var(--m-border);
  border-radius: 0;
  box-shadow: var(--shadow-soft);
  transform: translateX(-100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.28s ease;
}
/* keep it in the DOM (off-canvas) even when hidden, so the slide animates */
.roadmap-topbar--modern .roadmap-add__body[hidden] {
  display: block;
}
.roadmap-topbar--modern .roadmap-add.is-open .roadmap-add__body {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}
.roadmap-add__body:has(.fanos-jalali-date.is-open),
.fanos-drawer__scroll:has(.fanos-jalali-date.is-open) {
  overflow: visible;
}
/* Drawer header (title + close) — only visible when the add form is an off-canvas drawer */
.roadmap-add__drawer-head {
  display: none;
}
.roadmap-topbar--modern .roadmap-add__drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: -0.2rem 0 0.9rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--m-border);
}
.roadmap-add__drawer-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--m-text);
}
.roadmap-add__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius-sm);
  background: var(--m-surface);
  color: var(--m-text-soft);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.roadmap-add__close:hover {
  background: var(--m-surface-soft, rgba(15, 23, 42, 0.06));
  color: var(--m-text);
}
.roadmap-add__close svg {
  width: 1.05rem;
  height: 1.05rem;
}
.roadmap-add__drawer-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.roadmap-add__bookmark {
  flex-shrink: 0;
}
.roadmap-add__ai {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-family: var(--font-family);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.roadmap-add__ai:hover {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-nav);
}
.roadmap-add__ai svg {
  width: 1rem;
  height: 1rem;
}

/* AI assistant modal */
.roadmap-ai-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.roadmap-ai-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
}
.roadmap-ai-modal__panel {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.45);
  overflow: hidden;
}
.roadmap-ai-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--color-border-soft, var(--color-border));
}
.roadmap-ai-modal__title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-ink);
}
.roadmap-ai-modal__title svg {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--color-primary);
}
.roadmap-ai-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.roadmap-ai-modal__close:hover {
  background: var(--color-page);
  color: var(--color-ink);
}
.roadmap-ai-modal__close svg {
  width: 1rem;
  height: 1rem;
}
.roadmap-ai-modal__body {
  padding: 1rem 1.1rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.roadmap-ai-modal__hint {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--color-muted);
}
.roadmap-ai-modal__text {
  width: 100%;
  min-height: 8rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-family: var(--font-family);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-ink);
  resize: vertical;
}
.roadmap-ai-modal__text:focus {
  outline: 2px solid var(--color-primary-soft);
  border-color: var(--color-primary);
}
.roadmap-ai-modal__images {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.roadmap-ai-thumb {
  position: relative;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.roadmap-ai-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.roadmap-ai-thumb__remove {
  position: absolute;
  top: 2px;
  inset-inline-end: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.65);
  color: #fff;
  cursor: pointer;
}
.roadmap-ai-thumb__remove svg {
  width: 0.7rem;
  height: 0.7rem;
}
.roadmap-ai-modal__upload {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  padding: 0.45rem 0.8rem;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.roadmap-ai-modal__upload:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.roadmap-ai-modal__upload svg {
  width: 1rem;
  height: 1rem;
}
.roadmap-ai-modal__error {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-danger, #dc2626);
}
.roadmap-ai-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 0.85rem 1.1rem;
  border-top: 1px solid var(--color-border-soft, var(--color-border));
}
.roadmap-ai-modal__cancel {
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.roadmap-ai-modal__cancel:hover {
  background: var(--color-page);
  color: var(--color-ink);
}
.roadmap-ai-modal__confirm {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.1rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
}
.roadmap-ai-modal__confirm:hover {
  background: var(--color-primary-dark, var(--color-primary));
}
.roadmap-ai-modal__confirm svg {
  width: 1rem;
  height: 1rem;
}
.roadmap-ai-modal.is-loading .roadmap-ai-modal__panel {
  pointer-events: none;
}
.roadmap-ai-modal.is-loading .roadmap-ai-modal__body,
.roadmap-ai-modal.is-loading .roadmap-ai-modal__upload {
  opacity: 0.6;
}
/* Backdrop behind the add-item drawer */
.fanos-add-backdrop {
  position: fixed;
  inset: 0;
  z-index: 115;
  background: rgba(15, 23, 42, 0.42);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.fanos-add-backdrop.is-open {
  opacity: 1;
}

/* ---- Modern: single-card task table ---- */
.roadmap-table {
  /* title | product | status | priority | date | votes | progress | actions */
  --rt-cols: minmax(14rem, 3.6fr) minmax(5.5rem, 0.9fr) 6.25rem 5rem 5.5rem 3.5rem 4.5rem 2.5rem;
  border: 1px solid var(--m-border);
  border-radius: var(--radius-md);
  background: var(--m-surface);
  overflow: visible;
}
.roadmap-table--reorderable {
  --rt-cols: 1.35rem minmax(14rem, 3.6fr) minmax(5.5rem, 0.9fr) 6.25rem 5rem 5.5rem 3.5rem 4.5rem 2.5rem;
}
.roadmap-table--empty {
  padding: 1.5rem;
}
.roadmap-table--grouped .roadmap-table__head {
  position: sticky;
  top: 0;
  z-index: 2;
}
.roadmap-focus-groups {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem;
}
.roadmap-focus-group {
  border: 1px solid var(--m-border);
  border-radius: var(--radius-md);
  background: var(--m-surface);
  overflow: hidden;
}
.roadmap-focus-group__toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 0;
  background: transparent;
  text-align: right;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}
.roadmap-focus-group__toggle:hover {
  background: var(--m-hover);
}
.roadmap-focus-group__emoji {
  flex-shrink: 0;
  font-size: 1.15rem;
  line-height: 1.4;
}
.roadmap-focus-group__meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1;
}
.roadmap-focus-group__title {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--m-text);
}
.roadmap-focus-group__sep {
  font-weight: 500;
  color: var(--m-text-soft);
}
.roadmap-focus-group__count {
  font-weight: 800;
}
.roadmap-focus-group__desc {
  font-size: 0.75rem;
  color: var(--m-text-soft);
  line-height: 1.4;
}
.roadmap-focus-group__chevron {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
  color: var(--m-text-soft);
  transition: transform 0.15s ease;
}
.roadmap-focus-group__chevron svg {
  width: 1rem;
  height: 1rem;
}
.roadmap-focus-group.is-expanded .roadmap-focus-group__chevron {
  transform: rotate(180deg);
}
.roadmap-focus-group__body {
  border-top: 1px solid var(--m-border-soft);
}
.roadmap-focus-group.is-drop-target {
  border-color: var(--m-primary, #2563eb);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--m-primary, #2563eb) 28%, transparent);
}
.roadmap-focus-group__body .roadmap-table__body--group:empty {
  min-height: 2.5rem;
}
.roadmap-focus-group__body .roadmap-table__body--group .roadmap-table__row:first-child {
  border-top: 0;
}
.roadmap-task-status-pill__emoji {
  margin-inline-end: 0.25rem;
}
.roadmap-table__empty {
  margin: 0;
  text-align: center;
  color: var(--m-text-soft);
  font-size: 0.875rem;
}
.roadmap-table__head {
  display: grid;
  grid-template-columns: var(--rt-cols);
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.5rem;
  border-bottom: 1px solid var(--m-border);
  background: var(--m-surface-muted);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
/* Product page "in progress" list reuses the modern table without filters */
.about-in-progress__list--modern {
  display: block;
}
.about-in-progress__list--modern .roadmap-table {
  width: 100%;
}
.roadmap-table__hcell {
  padding: 0.6rem 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--m-text-soft);
}
.roadmap-table__sort {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--m-text-soft);
  cursor: pointer;
  border-radius: var(--m-radius-sm);
  transition: color 0.12s ease, background 0.12s ease;
}
.roadmap-table__sort:hover {
  color: var(--m-text);
  background: var(--m-hover);
}
.roadmap-table__sort.is-sorted {
  color: var(--m-accent);
}
.roadmap-table__sort-arrow {
  width: 0.85rem;
  height: 0.85rem;
  flex: 0 0 auto;
}
/* keep header alignment consistent with body cells */
.roadmap-table__head .roadmap-table__cell--status,
.roadmap-table__head .roadmap-table__cell--priority,
.roadmap-table__head .roadmap-table__cell--date,
.roadmap-table__head .roadmap-table__cell--votes,
.roadmap-table__head .roadmap-table__cell--progress {
  justify-content: center;
}
.roadmap-table__head .roadmap-table__cell--title,
.roadmap-table__head .roadmap-table__cell--product {
  justify-content: flex-start;
}
.roadmap-table__body {
  display: flex;
  flex-direction: column;
}
.roadmap-table__row {
  position: relative;
  display: grid;
  grid-template-columns: var(--rt-cols);
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 0.5rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.roadmap-table__row[hidden] {
  display: none !important;
}
.roadmap-table__row + .roadmap-table__row {
  border-top: 1px solid var(--m-border-soft);
}
.roadmap-table__row:hover {
  background: var(--m-hover);
}
.roadmap-table__row.is-dragging {
  opacity: 0.72;
  background: var(--m-accent-soft);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
  z-index: 2;
}
.roadmap-table__cell--drag {
  justify-content: center;
  padding-inline: 0;
}
.roadmap-table__drag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--m-radius-sm, 4px);
  background: transparent;
  color: var(--m-text-soft);
  cursor: grab;
  touch-action: none;
}
.roadmap-table__drag:hover,
.roadmap-table__drag:focus-visible {
  color: var(--m-text);
  background: var(--m-hover);
}
.roadmap-table__drag:active,
.roadmap-table__row.is-dragging .roadmap-table__drag {
  cursor: grabbing;
}
.roadmap-table__drag-icon {
  width: 0.95rem;
  height: 0.95rem;
}
.roadmap-table__row.is-open {
  background: var(--m-accent-soft);
  box-shadow: inset 2px 0 0 var(--m-accent);
}
.roadmap-table__cell {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0.5rem 0.4rem;
  font-size: 0.8125rem;
  color: var(--m-text-soft);
}
.roadmap-table__cell--title {
  justify-content: flex-start;
  color: var(--m-text);
  font-weight: 600;
  gap: 0.35rem;
}
.roadmap-table__title-text {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.roadmap-table__title-flags {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
}
.roadmap-table__title-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  flex-shrink: 0;
}
.roadmap-table__title-flag svg {
  width: 0.72rem;
  height: 0.72rem;
}
.roadmap-table__title-flag--comment {
  color: var(--m-accent);
  background: var(--m-accent-soft);
}
.roadmap-table__title-flag--share {
  color: #0f766e;
  background: rgba(15, 118, 110, 0.12);
}
[data-theme="dark"] .roadmap-table__title-flag--share {
  color: #5eead4;
  background: rgba(45, 212, 191, 0.16);
}
.roadmap-table__row.roadmap-task--unread .roadmap-table__title-text {
  font-weight: 700;
}
.roadmap-table__row.roadmap-task--activity .roadmap-table__title-text {
  font-weight: 700;
}
.roadmap-table__cell--status,
.roadmap-table__cell--priority,
.roadmap-table__cell--date,
.roadmap-table__cell--votes,
.roadmap-table__cell--progress {
  justify-content: center;
  text-align: center;
}
.roadmap-table__cell--product {
  justify-content: flex-start;
  text-align: start;
}
/* Inline-editable chips inside the modern table cells */
.roadmap-table__cell .roadmap-task__inline-chip {
  cursor: pointer;
  max-width: 100%;
}
.roadmap-table__cell .roadmap-task__meta-chip {
  padding: 0.12rem 0.5rem;
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius-sm);
  background: transparent;
  color: var(--m-text);
  font: inherit;
  font-size: 0.78rem;
  line-height: 1.5;
}
.roadmap-table__cell .roadmap-task__meta-chip--empty {
  border-style: dashed;
  color: var(--m-text-soft);
}
.roadmap-table__cell--product .roadmap-task__product--editable {
  display: inline-block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  padding: 0.14rem 0.45rem;
  border: 1px solid transparent;
  border-radius: var(--m-radius-sm);
  background: transparent;
  color: var(--m-text);
  font: inherit;
  text-align: start;
}
.roadmap-table__cell--product .roadmap-task__product--editable:hover {
  border-color: var(--m-border);
}
.roadmap-table__cell .roadmap-task__inline-chip:hover,
.roadmap-table__cell .roadmap-task__inline-chip:focus-visible {
  box-shadow: 0 0 0 2px var(--color-primary-soft);
  outline: none;
}
.roadmap-table__product {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--m-text);
}
.roadmap-table__cell--actions {
  justify-content: center;
}
.roadmap-table .roadmap-priority,
.roadmap-table .roadmap-task-status-pill {
  font-size: 0.6875rem;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}
.roadmap-table .roadmap-task__menu-toggle {
  opacity: 0.55;
}
.roadmap-table__row:hover .roadmap-task__menu-toggle,
.roadmap-table__row .roadmap-task__menu.is-open .roadmap-task__menu-toggle {
  opacity: 1;
}

@media (max-width: 720px) {
  /* Card layout for the modern roadmap table on mobile (no horizontal scroll) */
  .roadmap-table {
    border: 0;
    background: transparent;
    overflow: visible;
  }
  .roadmap-table__head {
    display: none;
  }
  .roadmap-table__body {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
  }
  .roadmap-table__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.7rem;
    min-height: 0;
    padding: 0.85rem 0.95rem;
    padding-inline-start: 2.35rem;
    border: 1px solid var(--m-border);
    border-radius: var(--radius-md);
    background: var(--m-surface);
    box-shadow: var(--m-shadow-xs, 0 1px 2px rgba(15, 23, 42, 0.04));
  }
  .roadmap-table__cell--drag {
    order: -2;
    position: absolute;
    top: 0.55rem;
    inset-inline-start: 0.55rem;
    padding: 0;
  }
  .roadmap-table__row + .roadmap-table__row {
    border-top: 1px solid var(--m-border);
  }
  .roadmap-table__row.is-open {
    box-shadow: inset 2px 0 0 var(--m-accent);
  }
  .roadmap-table__cell {
    padding: 0;
    justify-content: flex-start;
    text-align: start;
    font-size: 0.8125rem;
  }
  /* Title: full-width heading, leaving room for the actions menu */
  .roadmap-table__cell--title {
    order: 1;
    flex: 1 1 100%;
    padding-inline-end: 2rem;
    font-size: 0.95rem;
  }
  .roadmap-table__title-text {
    white-space: normal;
  }
  /* Status + priority pills share one line */
  .roadmap-table__cell--status {
    order: 2;
    flex: 0 0 auto;
  }
  .roadmap-table__cell--priority {
    order: 3;
    flex: 0 0 auto;
  }
  /* Meta rows: one per line with their label */
  .roadmap-table__cell--product {
    order: 4;
    flex: 1 1 100%;
  }
  .roadmap-table__cell--date {
    order: 5;
    flex: 1 1 100%;
  }
  .roadmap-table__cell--progress {
    order: 6;
    flex: 1 1 100%;
  }
  .roadmap-table__cell--votes {
    order: 7;
    flex: 1 1 100%;
  }
  .roadmap-table__cell[data-label]::before {
    content: attr(data-label) ": ";
    flex: 0 0 auto;
    margin-inline-end: 0.35rem;
    color: var(--m-text-soft);
    font-size: 0.7rem;
    font-weight: 700;
  }
  /* status & priority pills don't need a textual label */
  .roadmap-table__cell--status[data-label]::before,
  .roadmap-table__cell--priority[data-label]::before {
    content: none;
  }
  .roadmap-table__product {
    white-space: normal;
  }
  /* Actions menu pinned to the card's top-end corner (opposite the title start) */
  .roadmap-table__cell--actions {
    order: 0;
    position: absolute;
    top: 0.55rem;
    inset-inline-end: 0.55rem;
    padding: 0;
  }
  .roadmap-table .roadmap-task__menu-toggle {
    opacity: 1;
  }
}

/* ---- Task detail drawer ---- */

/* ===== Fanos mobile sheet (≤767px) — unified bottom panel for internal windows ===== */
.fanos-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 130;
  background: rgba(15, 23, 42, 0.42);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.fanos-sheet-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
.fanos-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-shrink: 0;
}
.fanos-sheet__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--m-text, var(--color-ink));
}
.fanos-sheet__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--m-radius-sm, var(--radius-sm));
  background: transparent;
  color: var(--m-text-soft, var(--color-muted));
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.fanos-sheet__close:hover {
  background: var(--m-hover, rgba(15, 23, 42, 0.06));
  color: var(--m-text, var(--color-ink));
}
.fanos-sheet__close svg {
  width: 1.05rem;
  height: 1.05rem;
}

@media (max-width: 767px) {
  body.fanos-sheet-open {
    overflow: hidden;
  }

  /* --- Filters (roadmap-filterbar) --- */
  .roadmap-filterbar.is-open .roadmap-filterbar__popover:not([hidden]) {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    inset-inline: 0;
    z-index: 140;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    max-height: 80dvh;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    box-shadow: 0 -10px 40px -12px rgba(15, 23, 42, 0.2);
    overflow: hidden;
    box-sizing: border-box;
  }
  .roadmap-filterbar.is-open .roadmap-filterbar__head {
    flex-shrink: 0;
    padding: 1rem 1rem 0.35rem;
    margin-bottom: 0;
  }
  .roadmap-filterbar.is-open .roadmap-filterbar__toolbar {
    flex-shrink: 0;
    justify-content: flex-start;
    padding: 0 1rem;
    margin-bottom: 0.5rem;
  }
  .roadmap-filterbar.is-open .roadmap-filterbar__grid {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0 1rem;
  }
  .roadmap-filterbar.is-open .roadmap-filterbar__apply {
    flex-shrink: 0;
    margin: 0.75rem 1rem max(1rem, env(safe-area-inset-bottom));
    width: calc(100% - 2rem);
  }

  /* --- Admin / profile / entity / tag modals --- */
  .admin-modal:not([hidden]) {
    align-items: flex-end;
    justify-content: center;
    padding: 0;
  }
  .admin-modal__panel {
    width: 100%;
    max-width: 100%;
    max-height: 80dvh;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    border-bottom: 0;
  }
  .admin-modal__head {
    flex-shrink: 0;
  }
  .admin-modal__body {
    flex: 1 1 auto;
    min-height: 0;
  }
  .admin-modal-form__actions {
    flex-shrink: 0;
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
  }

  /* --- AI assistant modal --- */
  .roadmap-ai-modal {
    align-items: flex-end;
    justify-content: center;
    padding: 0;
  }
  .roadmap-ai-modal__panel {
    width: 100%;
    max-width: 100%;
    max-height: 80dvh;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }
  .roadmap-ai-modal__head {
    flex-shrink: 0;
  }
  .roadmap-ai-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .roadmap-ai-modal__actions {
    flex-shrink: 0;
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
  }

  /* --- Add new item --- */
  .roadmap-topbar--modern .roadmap-add__body {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 80dvh !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    box-shadow: 0 -10px 40px -12px rgba(15, 23, 42, 0.2);
    transform: translateY(100%);
  }
  .roadmap-topbar--modern .roadmap-add.is-open .roadmap-add__body {
    transform: translateY(0);
  }
  .roadmap-topbar--modern .roadmap-add__drawer-head {
    flex-shrink: 0;
    padding: 1rem 1rem 0.75rem;
    margin: 0;
  }
  .roadmap-topbar--modern .roadmap-add__form {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0 1rem max(1rem, env(safe-area-inset-bottom));
  }

  .workbench-request-form-host .roadmap-add__body {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 80dvh !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    box-shadow: 0 -10px 40px -12px rgba(15, 23, 42, 0.2);
    transform: translateY(100%);
  }

  .workbench-request-form-host .roadmap-add.is-open .roadmap-add__body {
    transform: translateY(0);
  }

  .workbench-request-form-host .roadmap-add__drawer-head {
    flex-shrink: 0;
    padding: 1rem 1rem 0.75rem;
    margin: 0;
  }

  .workbench-request-form-host .roadmap-add__form {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0 1rem max(1rem, env(safe-area-inset-bottom));
  }

  /* --- Inline edit popovers (progress, reminder, tags, …) --- */
  .roadmap-task-inline-popover {
    position: fixed;
    top: auto !important;
    bottom: 0;
    left: 0 !important;
    right: 0 !important;
    inset-inline: 0 !important;
    z-index: 150;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 80dvh;
    display: flex;
    flex-direction: column;
    margin: 0;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    overflow: hidden;
    box-shadow: 0 -10px 40px -12px rgba(15, 23, 42, 0.2);
  }
  .roadmap-task-inline-popover__head {
    flex-shrink: 0;
    padding: 1rem 1rem 0.5rem;
    font-size: 1rem;
    font-weight: 700;
  }
  .roadmap-task-inline-popover__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 1rem;
  }
  .roadmap-task-inline-popover__actions {
    flex-shrink: 0;
    padding: 0.75rem 1rem max(1rem, env(safe-area-inset-bottom));
  }
}

.fanos-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: block;
}
.fanos-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.fanos-drawer-overlay.is-open .fanos-drawer-backdrop {
  opacity: 1;
}
.fanos-drawer {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: auto;
  inset-inline-end: auto;
  left: 0;
  right: auto;
  width: min(620px, 94vw);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  outline: none;
}
.fanos-drawer-overlay.is-open .fanos-drawer {
  transform: translateX(0);
}
.fanos-drawer__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0;
}
.fanos-drawer__head {
  display: none;
}
.fanos-drawer--with-head .fanos-drawer__head {
  display: flex;
  flex-shrink: 0;
  padding: 1rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--m-border, var(--color-border));
}
.fanos-drawer__body {
  padding: 1.1rem 1.25rem 1.5rem;
}
.fanos-drawer--with-head .fanos-drawer__body .crm-form__actions,
.fanos-drawer--with-head .fanos-drawer__body .admin-modal-form__actions {
  position: sticky;
  bottom: 0;
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  padding-bottom: max(0.25rem, env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--color-surface) 72%, transparent);
}
.fanos-drawer__body .admin-modal-form {
  gap: 0;
}
.fanos-drawer__body .admin-form-grid {
  gap: 0.85rem 1rem;
}
.fanos-drawer__body .admin-field--dropdown .fanos-dropdown {
  width: 100%;
  min-width: 0;
}
.fanos-drawer__body .admin-input.crm-textarea {
  min-height: 5rem;
  line-height: 1.65;
  resize: vertical;
}
.fanos-drawer__body .admin-input:focus,
.fanos-drawer__body .admin-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}
/* Detail inside drawer: it already ships .page-content padding; tune it */
.fanos-drawer .roadmap-task-page {
  padding: 1.1rem 1.25rem 1.5rem;
}
.fanos-drawer .roadmap-task-detail__back {
  position: sticky;
  top: 0;
}

/* Task detail drawer — mobile bottom sheet (must come AFTER base .fanos-drawer rules) */
@media (max-width: 767px) {
  body.fanos-drawer-open {
    overflow: hidden;
  }

  .fanos-drawer-overlay {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  .fanos-drawer {
    position: relative;
    top: auto !important;
    bottom: 0;
    left: 0 !important;
    right: 0 !important;
    inset-inline: 0;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 80dvh;
    height: auto;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    box-shadow: 0 -10px 40px -12px rgba(15, 23, 42, 0.2);
    transform: translateY(100%);
    overflow: hidden;
  }

  .fanos-drawer-overlay.is-open .fanos-drawer {
    transform: translateY(0) !important;
  }

  .fanos-drawer__head {
    display: flex;
    flex-shrink: 0;
    padding: 1rem 1rem 0.75rem;
    border-bottom: 1px solid var(--m-border, var(--color-border));
  }

  .fanos-drawer__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
  }

  .fanos-drawer .roadmap-task-detail__top {
    display: none;
  }

  .fanos-drawer .roadmap-task-page {
    padding: 0.75rem 1rem 1rem;
    min-height: 0;
  }

  .fanos-drawer .page-content,
  .fanos-drawer .page-body,
  .fanos-drawer .roadmap-task-detail {
    min-height: 0;
  }

  /* Undo mobile grid sidebar — stack body then full-width vote/actions/progress row */
  .fanos-drawer .roadmap-task-detail__hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.75rem 0.85rem;
    direction: rtl;
  }

  .fanos-drawer .roadmap-task-detail__body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    width: 100%;
  }

  .fanos-drawer .roadmap-task-detail__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
    grid-area: unset;
    grid-template-columns: unset;
    grid-template-areas: unset;
  }

  .fanos-drawer .roadmap-task-detail__title,
  .fanos-drawer .roadmap-task-detail__title--editable {
    grid-area: unset;
  }

  .fanos-drawer .roadmap-task-detail__content {
    grid-area: unset;
    min-width: 0;
    width: 100%;
  }

  .fanos-drawer .roadmap-task-detail__chip-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }

  .fanos-drawer .roadmap-task-detail__meta-list--stacked .roadmap-task-detail__meta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
  }

  .fanos-drawer .roadmap-task-detail__meta-list--stacked .roadmap-task-detail__meta-label {
    flex: none;
    width: auto;
    padding-top: 0;
  }

  .fanos-drawer .roadmap-task-detail__attach-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }

  .fanos-drawer .roadmap-task-detail__side {
    grid-area: unset;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 0.65rem;
    width: 100%;
    min-width: 0;
    margin-top: 0.65rem;
    padding: 0.65rem 0 0;
    border-inline-start: 0;
    border-top: 1px solid var(--color-border-soft);
    align-self: stretch;
  }

  .fanos-drawer .roadmap-task-detail__side-stat {
    flex-direction: row;
    align-items: center;
    width: auto;
    gap: 0.35rem;
  }

  .fanos-drawer .roadmap-task-detail__vote {
    display: flex;
    flex-direction: row;
    width: auto;
    min-width: 0;
    padding: 0.25rem 0.5rem;
    gap: 0.35rem;
  }

  .fanos-drawer .roadmap-task-detail__side .roadmap-task-detail__actions {
    order: unset;
    flex: 0 0 auto;
    width: auto;
    flex-direction: row;
    direction: ltr;
    justify-content: center;
    gap: 0.35rem;
  }

  .fanos-drawer .roadmap-task-detail__comments {
    margin-bottom: 0.25rem;
  }
}

/* Compact, click-to-edit meta chips on the task detail page (progress,
   reminder, related items, attachments) — same lightweight feel as the
   inline editable title, instead of bulky form fields. */
.roadmap-task__meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 100%;
}
.roadmap-task__meta-chip.roadmap-task__meta-chip--empty {
  color: var(--color-muted, #64748b);
  border-style: dashed;
}
.roadmap-task__meta-chip-icon {
  display: inline-flex;
  align-items: center;
}
.roadmap-task__meta-chip-icon svg {
  width: 0.85em;
  height: 0.85em;
}
.roadmap-task__meta-chip--entities {
  flex-wrap: wrap;
  gap: 0.35rem;
  width: 100%;
  max-width: 100%;
  justify-content: flex-start;
  align-items: flex-start;
}
.roadmap-task__entity-box {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 1 auto;
  gap: 0.4rem;
  max-width: 100%;
  padding: 0.28rem 0.6rem;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--m-accent-border, rgba(124, 92, 246, 0.35));
  background: var(--m-accent-soft, rgba(124, 92, 246, 0.1));
  color: var(--m-accent-strong, #6d4ce0);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
}
.roadmap-task__entity-box--has-img {
  padding-inline-start: 0.28rem;
}
.roadmap-task__entity-box-text {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.roadmap-task__entity-box--crm {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  padding-block: 0.35rem;
}
.roadmap-task__entity-box-sub {
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--m-text-faint, #94a3b8);
  line-height: 1.2;
}
.roadmap-task__entity-box-img {
  flex-shrink: 0;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}
.roadmap-task__entity-box--add {
  border-style: dashed;
  color: var(--m-text-faint, #94a3b8);
  font-weight: 500;
}
.roadmap-task__entity-box--link {
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.roadmap-task__entity-box--link:hover,
.roadmap-task__entity-box--link:focus-visible {
  background: var(--m-accent-soft, rgba(124, 92, 246, 0.12));
  color: var(--m-accent-strong, #6d4ce0);
  outline: none;
}
/* Inline container for related-items / tags with a separate add button */
.roadmap-task__meta-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
}
.roadmap-task__meta-add {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.25rem 0.55rem;
  border: 1px dashed var(--m-border, rgba(100, 116, 139, 0.4));
  border-radius: var(--radius-pill, 999px);
  background: transparent;
  color: var(--m-text-faint, #94a3b8);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.roadmap-task__meta-add:hover,
.roadmap-task__meta-add:focus-visible {
  background: var(--m-surface-muted, rgba(100, 116, 139, 0.12));
  border-color: var(--m-accent-border, rgba(124, 92, 246, 0.45));
  color: var(--m-accent-strong, #6d4ce0);
  outline: none;
}
.roadmap-task__meta-add-plus {
  font-size: 0.9rem;
  line-height: 1;
}
.roadmap-task__meta-chip-tag {
  display: inline-flex;
  align-items: center;
  padding: 0 0.35rem;
  border-radius: 0.4rem;
  background: var(--color-surface-muted, rgba(100, 116, 139, 0.12));
  font-size: 0.72rem;
  line-height: 1.6;
}

/* Popover used by the click-to-edit meta chips */
.roadmap-task-inline-popover--reminder .roadmap-task-inline-popover__body,
.roadmap-task-inline-popover--wide .roadmap-task-inline-popover__body {
  min-width: 240px;
}
.roadmap-task-inline-popover--wide {
  width: min(360px, 92vw);
}
.roadmap-task-inline-popover .roadmap-task-edit__progress-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* ---- Jalali datepicker: mobile-friendly centered panel ---- */
@media (max-width: 767px) {
  body.fanos-jalali-open {
    overflow: hidden;
  }

  body.fanos-jalali-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 199;
    background: rgba(15, 23, 42, 0.45);
    pointer-events: auto;
  }

  .fanos-jalali-date__panel--fixed {
    z-index: 200;
  }

  .fanos-jalali-date__panel--mobile-center {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .fanos-jalali-date__day {
    font-size: 0.95rem;
  }

  .fanos-jalali-date__nav {
    width: 2.4rem;
    height: 2.4rem;
  }
}

/* --- Reports panel --- */
.app-shell--reports .page-main {
  padding: 1.25rem 1.5rem 1.5rem;
}

.reports-page {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
}

.reports-topbar {
  margin-bottom: 0.25rem;
}

.reports-page .roadmap-filterbar__popover {
  width: min(22rem, calc(100vw - 2rem));
}

.reports-filter-grid-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.reports-filter-grid-field .fanos-jalali-date__control,
.reports-filter-grid-field .roadmap-task-edit__input {
  width: 100%;
}

.reports-filter-grid-field .fanos-jalali-date__display {
  min-height: 2.5rem;
}

.reports-summary {
  font-size: 0.9375rem;
  color: var(--color-ink, #111827);
}

.reports-summary__count {
  font-weight: 700;
}

.reports-summary__range {
  color: var(--color-muted, #6b7280);
  margin-inline-start: 0.35rem;
}

.reports-products {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.reports-product__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin-bottom: 0;
  padding-bottom: 0;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.reports-product__head::-webkit-details-marker,
.reports-product__head::marker {
  display: none;
  content: "";
}

.reports-product[open] .reports-product__head {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.reports-product__chevron {
  align-self: center;
  width: 0.5rem;
  height: 0.5rem;
  border-inline-end: 2px solid var(--color-muted, #6b7280);
  border-bottom: 2px solid var(--color-muted, #6b7280);
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
  flex: 0 0 auto;
}

.reports-product[open] .reports-product__chevron {
  transform: rotate(45deg);
}

.reports-product__title {
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 0;
}

.reports-product__owner {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-muted, #6b7280);
}

.reports-product__owner-label {
  font-weight: 600;
}

.reports-product__count {
  margin-inline-start: auto;
  font-size: 0.8125rem;
  color: var(--color-muted, #6b7280);
  background: var(--color-page, #f9fafb);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}

.reports-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.reports-event {
  display: grid;
  grid-template-columns: 1rem 1fr;
  gap: 0 1rem;
  position: relative;
  padding-bottom: 1rem;
}

.reports-event:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 1.1rem;
  bottom: 0;
  inset-inline-start: 0.45rem;
  width: 2px;
  background: var(--color-border, #e5e7eb);
}

.reports-event__marker {
  width: 0.75rem;
  height: 0.75rem;
  margin-top: 0.35rem;
  border-radius: 50%;
  background: var(--color-primary, #2563eb);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--color-border, #e5e7eb);
  z-index: 1;
}

.reports-event--backlog .reports-event__marker {
  background: #ec4899;
}

.reports-event--progress .reports-event__marker {
  background: #f59e0b;
}

.reports-event--done .reports-event__marker {
  background: #22c55e;
}

.reports-event--cancelled .reports-event__marker {
  background: #ef4444;
}

.reports-event--comment .reports-event__marker {
  background: #6366f1;
}

.reports-event__body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.reports-event__date {
  font-size: 0.8125rem;
  color: var(--color-muted, #6b7280);
}

.reports-event__time {
  display: inline-block;
  margin-inline-start: 0.3rem;
  padding: 0.02rem 0.32rem;
  border-radius: var(--m-radius-sm, 6px);
  background: var(--m-surface-soft, rgba(148, 163, 184, 0.14));
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--m-text, #374151);
}

.reports-event__type {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-primary, #2563eb);
}

.reports-event__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.reports-subtasks {
  margin-top: 0.35rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--m-border, #e5e7eb);
  border-radius: var(--m-radius-sm, 8px);
  background: var(--m-surface-soft, rgba(148, 163, 184, 0.08));
}

.reports-subtasks__head {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-muted, #6b7280);
  margin-bottom: 0.3rem;
}

.reports-subtasks__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.reports-subtask {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--m-text, #111827);
}

.reports-subtask__mark {
  flex: none;
  font-size: 0.8rem;
  color: var(--color-muted, #9ca3af);
}

.reports-subtask--done .reports-subtask__mark {
  color: var(--color-success, #16a34a);
}

.reports-subtask--done .reports-subtask__title {
  text-decoration: line-through;
  color: var(--color-muted, #9ca3af);
}

.reports-empty {
  text-align: center;
  padding: 2rem 1.5rem;
}

/* ===== کارهای ویژه (آیتم‌های نشانه‌گذاری‌شده) ===== */
.special-tasks-page {
  max-width: 96rem;
}

.special-tasks-domains {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.special-tasks-domain__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.6rem;
  margin-bottom: 0.55rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.special-tasks-domain__title {
  font-size: 0.9375rem;
  font-weight: 800;
  margin: 0;
}

.special-tasks-domain__title::before {
  content: "حوزهٔ ";
  font-weight: 600;
  color: var(--color-muted, #6b7280);
}

.special-tasks-domain__count {
  font-size: 0.75rem;
  color: var(--color-muted, #6b7280);
}

.special-tasks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
  gap: 0.6rem;
  align-items: start;
  min-width: 0;
}

.special-tasks-product {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.7rem 0.8rem;
  border-radius: var(--m-radius-sm, 8px);
}

.special-tasks-product--empty {
  opacity: 0.82;
}

.special-tasks-list__empty {
  margin: 0;
  padding: 0.35rem 0.15rem;
  font-size: 0.75rem;
  color: var(--color-muted, #9ca3af);
  list-style: none;
  text-align: center;
}

.special-tasks-product__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.special-tasks-product__title {
  font-size: 0.875rem;
  font-weight: 700;
  margin: 0;
}

.special-tasks-product__owner {
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--color-muted, #6b7280);
}

.special-tasks-product__count {
  flex: none;
  font-size: 0.7rem;
  color: var(--color-muted, #6b7280);
  background: var(--color-page, #f9fafb);
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
}

.special-tasks-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.special-tasks-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.45rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--m-radius-sm, 7px);
  background: var(--m-surface-soft, rgba(148, 163, 184, 0.06));
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.special-tasks-item:hover,
.special-tasks-item:focus-visible {
  background: var(--color-primary-soft, #eef0ff);
  border-color: var(--color-primary, #3f4191);
  outline: none;
}

.special-tasks-item__marker {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-primary, #2563eb);
}

.special-tasks-item__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.special-tasks-item__row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.special-tasks-item__progress {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  width: 4.6rem;
}

.special-tasks-item__progress-track {
  flex: 1 1 auto;
  height: 0.3rem;
  border-radius: 999px;
  background: var(--color-border, #e5e7eb);
  overflow: hidden;
}

.special-tasks-item__progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--color-primary, #3f4191);
}

.special-tasks-item__progress-pct {
  flex: none;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--color-muted, #6b7280);
  min-width: 1.9rem;
  text-align: end;
}

.special-tasks-item--progress .special-tasks-item__progress-fill {
  background: #f59e0b;
}

.special-tasks-item--done .special-tasks-item__progress-fill {
  background: #22c55e;
}

.special-tasks-item--cancelled .special-tasks-item__progress-fill {
  background: #ef4444;
}

.special-tasks-item--backlog .special-tasks-item__progress-fill {
  background: #ec4899;
}

.special-tasks-item--backlog .special-tasks-item__marker {
  background: #ec4899;
}

.special-tasks-item--progress .special-tasks-item__marker {
  background: #f59e0b;
}

.special-tasks-item--done .special-tasks-item__marker {
  background: #22c55e;
}

.special-tasks-item--cancelled .special-tasks-item__marker {
  background: #ef4444;
}

.special-tasks-item__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.special-tasks-item__status {
  flex: none;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.08rem 0.4rem;
  border-radius: 999px;
  white-space: nowrap;
}

.special-tasks-item__status--backlog {
  color: #be185d;
  background: rgba(236, 72, 153, 0.12);
}

.special-tasks-item__status--progress {
  color: #b45309;
  background: rgba(245, 158, 11, 0.14);
}

.special-tasks-item__status--done {
  color: #15803d;
  background: rgba(34, 197, 94, 0.14);
}

.special-tasks-item__status--cancelled {
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.12);
}

.special-tasks-item__priority {
  flex: none;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.08rem 0.4rem;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
}

.special-tasks-item__priority--urgent {
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.35);
}

.special-tasks-item__priority--high {
  color: #b45309;
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
}

.special-tasks-item__priority--medium {
  color: #1d4ed8;
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
}

.special-tasks-item__priority--low {
  color: #6b7280;
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.35);
}

@media (max-width: 767px) {
  .reports-product__count {
    margin-inline-start: 0;
  }

  .reports-page.special-tasks-page {
    min-width: 0;
    overflow-x: clip;
  }

  .special-tasks-domains,
  .special-tasks-domain,
  .special-tasks-grid {
    min-width: 0;
  }

  .special-tasks-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }

  .special-tasks-product.card {
    padding: 0.85rem 0.9rem;
    min-width: 0;
  }

  .special-tasks-product__head {
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
  }

  .special-tasks-product__title {
    flex: 1 1 100%;
    min-width: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .special-tasks-product__count {
    margin-inline-start: auto;
  }

  .special-tasks-domain__head {
    gap: 0.25rem 0.5rem;
  }

  .special-tasks-domain__count {
    flex: 1 1 100%;
  }

  .special-tasks-item {
    align-items: flex-start;
    padding: 0.45rem 0.5rem;
  }

  .special-tasks-item__main {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
  }

  .special-tasks-item__row {
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 0.25rem;
    overflow: visible;
  }

  .special-tasks-item__title {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    overflow-wrap: anywhere;
    word-break: break-word;
    flex: 1 1 100%;
    line-height: 1.4;
  }

  .special-tasks-item__progress {
    width: 100%;
    max-width: none;
  }

  .special-tasks-item__status,
  .special-tasks-item__priority {
    font-size: 0.62rem;
  }

  .special-tasks-page .roadmap-topbar--modern {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "actions count"
      "search search";
    row-gap: 0.45rem;
  }

  .special-tasks-page .roadmap-toolbar__actions {
    flex-wrap: wrap;
    min-width: 0;
    gap: 0.35rem;
  }
}

/* ===== AI summary button + modal (reports) ===== */
.reports-ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.65rem;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary, #3f4191);
  background: var(--color-primary-soft, #eef0ff);
  border: 1px solid transparent;
  border-radius: var(--radius-pill, 9999px);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.reports-ai-btn:hover {
  background: var(--color-primary, #3f4191);
  color: #fff;
  box-shadow: 0 4px 14px -6px rgba(63, 65, 145, 0.7);
}

.reports-ai-btn:active {
  transform: translateY(1px);
}

.reports-ai-btn:focus-visible {
  outline: 2px solid var(--color-primary, #3f4191);
  outline-offset: 2px;
}

.reports-ai-btn__icon {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
}

.reports-ai-btn__icon svg {
  width: 100%;
  height: 100%;
}

.reports-ai-btn.is-loading {
  opacity: 0.7;
  pointer-events: none;
}

.reports-ai-btn.is-loading .reports-ai-btn__icon {
  animation: reports-ai-spin 0.9s linear infinite;
}

.reports-ai-modal__subtitle {
  margin: 0 0 0.85rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-muted, #6b7280);
}

.reports-ai-modal__content {
  min-height: 4rem;
}

.reports-ai-modal__loading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-muted, #6b7280);
  font-size: 0.9rem;
  padding: 1rem 0;
}

.reports-ai-spinner {
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid var(--color-primary-soft, #eef0ff);
  border-top-color: var(--color-primary, #3f4191);
  border-radius: 50%;
  animation: reports-ai-spin 0.8s linear infinite;
  flex: 0 0 auto;
}

@keyframes reports-ai-spin {
  to {
    transform: rotate(360deg);
  }
}

.reports-ai-modal__error {
  margin: 0;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-sm, 12px);
  background: #fef2f2;
  color: #b91c1c;
  font-size: 0.875rem;
  font-weight: 600;
}

.reports-ai-markdown {
  font-size: 0.92rem;
  line-height: 1.85;
  color: var(--color-ink, #1f2937);
  word-break: break-word;
}

.reports-ai-markdown > :first-child {
  margin-top: 0;
}

.reports-ai-markdown > :last-child {
  margin-bottom: 0;
}

.reports-ai-markdown h1,
.reports-ai-markdown h2,
.reports-ai-markdown h3,
.reports-ai-markdown h4 {
  margin: 1.1rem 0 0.5rem;
  font-weight: 800;
  line-height: 1.4;
}

.reports-ai-markdown h1 { font-size: 1.15rem; }
.reports-ai-markdown h2 { font-size: 1.05rem; }
.reports-ai-markdown h3 { font-size: 0.98rem; }

.reports-ai-markdown p {
  margin: 0.5rem 0;
}

.reports-ai-markdown ul,
.reports-ai-markdown ol {
  margin: 0.5rem 0;
  padding-inline-start: 1.4rem;
  list-style-position: outside;
}

.reports-ai-markdown ul {
  list-style-type: disc;
}

.reports-ai-markdown ol {
  list-style-type: decimal;
}

.reports-ai-markdown li {
  display: list-item;
  margin: 0.25rem 0;
}

.reports-ai-markdown strong {
  font-weight: 800;
  color: var(--color-primary-dark, #373a8a);
}

.reports-ai-markdown code {
  background: var(--color-surface-muted, #f4f6f8);
  padding: 0.1rem 0.35rem;
  border-radius: 6px;
  font-size: 0.85em;
}

.reports-ai-markdown blockquote {
  margin: 0.6rem 0;
  padding: 0.25rem 0.9rem;
  border-inline-start: 3px solid var(--color-primary-soft, #eef0ff);
  color: var(--color-muted, #6b7280);
}

[data-theme="dark"] .reports-ai-btn {
  color: #c7c9ff;
  background: rgba(63, 65, 145, 0.28);
}

[data-theme="dark"] .reports-ai-btn:hover {
  color: #fff;
  background: var(--color-primary, #3f4191);
}

[data-theme="dark"] .reports-ai-modal__error {
  background: rgba(185, 28, 28, 0.18);
  color: #fca5a5;
}

@media (max-width: 768px) {
  .reports-ai-btn__label {
    display: none;
  }

  .reports-ai-btn {
    padding: 0.32rem;
  }
}

/* ——— CRM (Accounts & Contacts) ——— */
.app-shell--crm .page-main {
  padding: 1rem 1.25rem 1.25rem;
}

.crm-page {
  gap: 1rem;
}

.crm-topbar__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.crm-topbar__actions .admin-btn svg {
  width: 1rem;
  height: 1rem;
}

.crm-form-card {
  padding: 1rem 1.15rem;
}

.crm-form-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--color-border-soft);
}

.crm-form-card__title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--color-ink);
}

.crm-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.crm-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.crm-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.25rem;
}

.crm-form--compact {
  padding: 0.85rem;
  margin-bottom: 0.75rem;
}

.crm-btn-danger {
  color: var(--color-red) !important;
}

.crm-btn-danger:hover {
  background: rgba(239, 68, 68, 0.08) !important;
}

.crm-detail__head {
  margin-bottom: 0;
}

.crm-detail__back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.crm-detail__back svg {
  width: 1rem;
  height: 1rem;
}

.crm-detail__title-wrap {
  flex-wrap: wrap;
}

.crm-detail__avatar {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  object-fit: cover;
  border: 1px solid var(--color-border-soft);
}

.crm-detail__subtitle {
  margin: 0.2rem 0 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.crm-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.crm-detail__grid {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.crm-detail__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  align-items: stretch;
}

.crm-detail__row--wide {
  grid-template-columns: minmax(0, 1fr);
}

.crm-detail.admin-page {
  gap: 0.75rem;
}

.crm-detail .crm-detail__section.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 0.75rem 0.875rem;
  box-shadow: none;
}

.crm-detail .admin-page-header__title {
  font-size: 1.125rem;
}

.crm-detail__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 1.75rem;
  margin-bottom: 0.5rem;
  flex-shrink: 0;
}

.crm-detail__section-head .crm-detail__section-title {
  margin: 0;
}

.crm-detail__section-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.crm-detail__section-actions .admin-btn {
  padding: 0.35rem 0.65rem;
  font-size: 0.8125rem;
  white-space: nowrap;
}

.crm-detail__section-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.crm-detail__section-body--stack .crm-entity-attach {
  margin-top: auto;
  padding-top: 0.5rem;
}

.crm-detail__section-title {
  margin: 0 0 0.45rem;
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--color-ink);
}

.crm-detail__section--wide {
  grid-column: 1 / -1;
}

.crm-dl {
  display: grid;
  gap: 0.4rem;
  margin: 0;
}

.crm-dl div {
  display: grid;
  grid-template-columns: 5.25rem 1fr;
  gap: 0.35rem;
  align-items: baseline;
}

.crm-dl dt {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-muted-light);
}

.crm-dl dd {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-ink);
  line-height: 1.45;
}

.crm-dl a {
  color: var(--color-primary);
  text-decoration: none;
}

.crm-dl a:hover {
  text-decoration: underline;
}

.crm-detail__notes {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border-soft);
}

.crm-detail__notes-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-muted-light);
  margin-bottom: 0.15rem;
}

.crm-detail__notes p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-ink);
  white-space: pre-wrap;
}

.crm-empty {
  color: var(--color-muted);
  font-size: 0.8125rem;
  padding: 0.15rem 0;
  margin: 0;
}

.crm-link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.crm-link-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  background: var(--color-page);
  color: var(--color-ink);
  font: inherit;
  font-size: 0.8125rem;
  text-align: right;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

a.crm-link-list__item {
  text-decoration: none;
}

.crm-link-list__item:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.crm-link-list__meta {
  font-size: 0.75rem;
  color: var(--color-muted);
  flex-shrink: 0;
}

.crm-notes {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-ink);
  white-space: pre-wrap;
}

.crm-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.crm-timeline__item {
  display: flex;
  gap: 0.75rem;
  padding-bottom: 1rem;
  position: relative;
}

.crm-timeline__item:not(:last-child)::before {
  content: "";
  position: absolute;
  right: 5px;
  top: 14px;
  bottom: 0;
  width: 2px;
  background: var(--color-border, #e5e7eb);
}

.crm-timeline__marker {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-primary, #3f4191);
  flex-shrink: 0;
  margin-top: 4px;
  position: relative;
  z-index: 1;
}

.crm-timeline__item--call .crm-timeline__marker { background: #059669; }
.crm-timeline__item--meeting .crm-timeline__marker { background: #2563eb; }
.crm-timeline__item--email .crm-timeline__marker { background: #7c3aed; }
.crm-timeline__item--message .crm-timeline__marker { background: #d97706; }
.crm-timeline__item--note .crm-timeline__marker { background: #6b7280; }

.crm-timeline__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.crm-timeline__type {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-primary);
}

.crm-timeline__date {
  font-size: 0.75rem;
  color: var(--color-muted, #6b7280);
}

.crm-timeline__title {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
}

.crm-timeline__desc {
  font-size: 0.875rem;
  margin: 0 0 0.25rem;
  color: var(--color-ink, #111827);
}

.crm-timeline__by {
  font-size: 0.75rem;
  color: var(--color-muted, #6b7280);
  margin: 0;
}

.crm-activity-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.crm-activity {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.crm-activity--reply {
  margin-right: calc(var(--reply-depth, 1) * 1.25rem);
}

.crm-activity__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  background: var(--avatar-bg, var(--color-primary, #3f4191));
}

.crm-activity__avatar--img {
  overflow: hidden;
  background: var(--color-border, #e5e7eb);
}

.crm-activity__avatar--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.crm-activity__body {
  flex: 1;
  min-width: 0;
}

.crm-activity__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.35rem;
}

.crm-activity__who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}

.crm-activity__name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-ink, #111827);
}

.crm-activity__type {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-primary-soft, rgba(63, 65, 145, 0.08));
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
}

.crm-activity__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}

.crm-activity__time {
  font-size: 0.75rem;
  color: var(--color-muted, #6b7280);
}

.crm-activity__edited {
  font-size: 0.6875rem;
  color: var(--color-muted, #6b7280);
}

.crm-activity__title {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
}

.crm-activity__desc {
  font-size: 0.875rem;
  margin: 0;
  color: var(--color-ink, #111827);
  white-space: pre-wrap;
}

.crm-activity__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}

.crm-activity__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm, 8px);
  background: transparent;
  color: var(--color-muted, #6b7280);
  cursor: pointer;
}

.crm-activity__action svg {
  width: 16px;
  height: 16px;
}

.crm-activity__action:hover {
  background: var(--color-surface-muted, #f3f4f6);
  color: var(--color-ink, #111827);
}

.crm-activity__action--danger:hover {
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
}

.crm-activity__replies {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.crm-activity__reply-form,
.crm-activity__edit-form {
  margin-top: 0.5rem;
  padding: 0.85rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted, #f9fafb);
}

.crm-activity__reply-form.admin-modal-form,
.crm-activity__edit-form.admin-modal-form {
  gap: 0.75rem;
}

.crm-activity__reply-form .admin-form-grid,
.crm-activity__edit-form .admin-form-grid {
  gap: 0.75rem;
}

.crm-activity__reply-form .admin-input.crm-textarea,
.crm-activity__edit-form .admin-input.crm-textarea,
.crm-page .admin-input.crm-textarea {
  min-height: 4.5rem;
  line-height: 1.65;
  resize: vertical;
}

.crm-page .admin-topbar__filters .admin-filter-field--dropdown .fanos-dropdown {
  min-width: 10rem;
}

.crm-activity__edit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-start;
  padding-top: 0;
}

.crm-activity__reply-hint {
  font-size: 0.8125rem;
  color: var(--color-muted, #6b7280);
  margin: 0 0 0.5rem;
}

.crm-activity--call .crm-activity__type { color: #059669; background: rgba(5, 150, 105, 0.1); }
.crm-activity--meeting .crm-activity__type { color: #2563eb; background: rgba(37, 99, 235, 0.1); }
.crm-activity--email .crm-activity__type { color: #7c3aed; background: rgba(124, 58, 237, 0.1); }
.crm-activity--message .crm-activity__type { color: #d97706; background: rgba(217, 119, 6, 0.1); }
.crm-activity--note .crm-activity__type { color: #6b7280; background: rgba(107, 114, 128, 0.12); }

.crm-attach-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.crm-attach-field .roadmap-comment-compose__upload {
  padding: 0.35rem 0.55rem;
  font-size: 0.8125rem;
}

.crm-entity-attach {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border-soft);
}

.crm-entity-attach__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.45rem;
}

.crm-entity-attach__row .crm-attach-field {
  flex: 1 1 10rem;
  min-width: 0;
}

.crm-entity-attach__actions {
  margin-top: 0;
  flex-shrink: 0;
}

.crm-entity-attach__actions .admin-btn {
  padding: 0.4rem 0.75rem;
  font-size: 0.8125rem;
  white-space: nowrap;
}

.crm-detail .roadmap-attachments,
.crm-detail .crm-attachments {
  margin-top: 0;
  gap: 0.3rem;
}

.crm-detail .roadmap-attachment {
  padding: 0.35rem 0.55rem;
  gap: 0.45rem;
}

.crm-detail .roadmap-attachment__name {
  font-size: 0.8125rem;
}

.crm-detail .roadmap-attachment__action {
  padding: 0.15rem 0.45rem;
  font-size: 0.625rem;
}

.crm-attachment-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.crm-attachment-row .roadmap-attachment {
  flex: 1;
  min-width: 0;
}

.crm-attachment__delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm, 8px);
  background: transparent;
  color: var(--color-muted, #6b7280);
  cursor: pointer;
  flex-shrink: 0;
}

.crm-attachment__delete svg {
  width: 16px;
  height: 16px;
}

.crm-attachment__delete:hover {
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
}

.crm-activity__existing-attachments {
  margin-top: 0.5rem;
}

.crm-detail .crm-activity__avatar {
  width: 32px;
  height: 32px;
  font-size: 0.8125rem;
}

.crm-detail .crm-activity {
  gap: 0.55rem;
}

.crm-import__results {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.5rem;
  max-height: 240px;
  overflow-y: auto;
}

.crm-import__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  width: 100%;
  text-align: right;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-sm, 8px);
  background: var(--color-surface, #fff);
  cursor: pointer;
  font: inherit;
}

.crm-import__item:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.crm-import__item strong {
  font-size: var(--text-sm);
  color: var(--color-ink);
}

.crm-import__item span {
  font-size: 0.8125rem;
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .app-shell--crm .page-main {
    padding: 1rem;
  }

  .crm-form__row,
  .crm-detail__row {
    grid-template-columns: 1fr;
  }

  .crm-dl div {
    grid-template-columns: 1fr;
  }

  .crm-page .crm-topbar__actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
  }

  .crm-page .crm-topbar__actions .admin-btn,
  .crm-page .crm-topbar__actions .admin-topbar__add {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: 0;
    justify-content: center;
  }

  .crm-page .admin-table-card {
    padding: 0.65rem;
  }

  .crm-page .admin-table-wrap {
    overflow: visible;
  }

  .crm-page .crm-list-table {
    border-collapse: separate;
    border-spacing: 0;
  }

  .crm-page .crm-list-table thead {
    display: none;
  }

  .crm-page .crm-list-table tbody {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
  }

  .crm-page .crm-list-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.65rem;
    padding: 0.75rem 0.85rem;
    padding-inline-end: 3rem;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    position: relative;
  }

  .crm-page .crm-list-table tbody tr:nth-child(even),
  .crm-page .crm-list-table tbody tr:hover {
    background: var(--color-surface);
  }

  .crm-page .crm-list-table tbody td {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 0.35rem;
    padding: 0;
    border: 0;
    text-align: right;
    font-size: 0.8125rem;
    min-width: 0;
  }

  .crm-page .crm-list-table tbody td[data-label]:not([data-label=""])::before {
    content: attr(data-label) ":";
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--color-muted-light);
    flex-shrink: 0;
  }

  .crm-page .crm-list-table tbody td:first-child {
    flex: 1 1 100%;
    font-size: 0.9375rem;
    font-weight: 600;
    padding-inline-end: 0;
  }

  .crm-page .crm-list-table tbody td:first-child .admin-link-btn {
    font-size: inherit;
    font-weight: inherit;
    text-align: right;
    white-space: normal;
    word-break: break-word;
  }

  .crm-page .crm-list-table .admin-table__actions {
    position: absolute;
    top: 0.55rem;
    inset-inline-end: 0.55rem;
    padding: 0;
    margin: 0;
  }

  .crm-page .crm-list-table .admin-table__actions .admin-action-btn span {
    display: none;
  }

  .crm-page .crm-list-table .admin-table__empty {
    display: block;
    padding: 0;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
  }

  .crm-page .crm-list-table .admin-table__empty td {
    display: block;
    width: 100%;
    padding: 1rem;
    text-align: center;
    color: var(--color-muted);
  }

  .crm-page .crm-list-table .admin-table__empty td::before {
    content: none;
  }
}

/* ─── گزارش مدیریتی محصولات ─────────────────────────────────── */

.product-mgmt-page {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pmgmt-page-head {
  margin-bottom: 0.25rem;
}

.pmgmt-page-head__sub {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
}

.product-mgmt-page .roadmap-topbar {
  margin-bottom: 0.25rem;
}

.pmgmt-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  width: 100%;
}

.pmgmt-summary__card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  margin: 0;
  border-radius: var(--radius-md, 0.75rem);
  border: 1px solid var(--color-border, #e5e7eb);
  background: var(--color-surface, #fff);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.04));
  cursor: pointer;
  text-align: right;
  font: inherit;
  color: inherit;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.pmgmt-summary__card:hover {
  border-color: var(--color-primary, #3f4191);
  background: var(--color-primary-soft, #eef0ff);
}

.pmgmt-summary__card--active {
  border-color: var(--color-primary, #3f4191);
  background: var(--color-primary-soft, #eef0ff);
  box-shadow: 0 0 0 2px rgba(63, 65, 145, 0.15);
}

.pmgmt-summary__card:focus-visible {
  outline: 2px solid var(--color-primary, #3f4191);
  outline-offset: 2px;
}

.pmgmt-summary__icon {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 0.65rem;
  font-size: 1rem;
  font-weight: 800;
  background: var(--color-primary-soft, #eef0ff);
  color: var(--color-primary, #3f4191);
}

.pmgmt-summary__card--critical .pmgmt-summary__icon {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}

.pmgmt-summary__card--today .pmgmt-summary__icon {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}

.pmgmt-summary__card--overdue .pmgmt-summary__icon {
  background: rgba(244, 63, 94, 0.12);
  color: #e11d48;
}

.pmgmt-summary__body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.pmgmt-summary__value {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-ink, #111827);
}

.pmgmt-summary__label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-ink, #111827);
}

.pmgmt-summary__sub {
  font-size: 0.72rem;
  color: var(--color-muted, #6b7280);
}

.pmgmt-table-card {
  margin: 0;
}

.pmgmt-table-wrap {
  max-height: none;
  overflow: visible;
}

.pmgmt-table {
  min-width: 0;
}

.pmgmt-table thead th {
  white-space: nowrap;
  padding: 0;
}

.pmgmt-table__sort {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
  margin: 0;
  padding: 0.65rem 0.75rem;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
  border-radius: var(--radius-sm, 0.5rem);
}

.pmgmt-table__sort:hover {
  background: var(--color-surface-muted, #f9fafb);
}

.pmgmt-table__sort.is-sorted {
  color: var(--color-primary, #3f4191);
}

.pmgmt-table__sort-arrow {
  width: 0.85rem;
  height: 0.85rem;
  flex: 0 0 auto;
  opacity: 0.9;
}

.pmgmt-table__group {
  text-align: center !important;
  border-bottom: 1px solid var(--color-border-soft, #f3f4f6);
}

.pmgmt-table__subhead th {
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center !important;
  padding-top: 0.35rem;
  padding-bottom: 0.55rem;
}

.pmgmt-table__icon-col {
  width: 2.5rem;
  text-align: center !important;
}

.pmgmt-row--overdue {
  background: rgba(254, 226, 226, 0.55) !important;
}

.pmgmt-row--overdue:hover {
  background: rgba(254, 202, 202, 0.65) !important;
}

.pmgmt-row--today {
  background: rgba(254, 243, 199, 0.55) !important;
}

.pmgmt-row--today:hover {
  background: rgba(253, 230, 138, 0.55) !important;
}

.pmgmt-cell--num {
  text-align: center !important;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--color-ink, #111827);
}

.pmgmt-product {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 9rem;
}

.pmgmt-product-icon {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border-radius: 0.45rem;
  background: var(--color-primary-soft, #eef0ff);
  color: var(--color-primary, #3f4191);
}

.pmgmt-product-icon svg {
  width: 1rem;
  height: 1rem;
}

.pmgmt-product__name {
  font-weight: 700;
  font-size: 0.8125rem;
  line-height: 1.35;
}

.pmgmt-owner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 7rem;
}

.pmgmt-owner-avatar {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.68rem;
  font-weight: 800;
  background: var(--color-primary-soft, #eef0ff);
  color: var(--color-primary, #3f4191);
}

.pmgmt-owner__name {
  font-size: 0.8125rem;
  line-height: 1.3;
}

.pmgmt-progress {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 6.5rem;
}

.pmgmt-progress__track {
  flex: 1;
  height: 0.42rem;
  border-radius: 999px;
  background: var(--color-border, #e5e7eb);
  overflow: hidden;
}

.pmgmt-progress__fill {
  height: 100%;
  border-radius: inherit;
  background: var(--color-primary, #3f4191);
}

.pmgmt-progress--good .pmgmt-progress__fill {
  background: #16a34a;
}

.pmgmt-progress--mid .pmgmt-progress__fill {
  background: #d97706;
}

.pmgmt-progress--low .pmgmt-progress__fill {
  background: #dc2626;
}

.pmgmt-progress__pct {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-muted, #6b7280);
  min-width: 2.1rem;
}

.pmgmt-overdue {
  display: inline-block;
  min-width: 1.5rem;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pmgmt-overdue--ok {
  color: #16a34a;
}

.pmgmt-overdue--warn {
  color: #d97706;
}

.pmgmt-overdue--bad {
  color: #dc2626;
}

.pmgmt-activity__rel {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-ink, #111827);
}

.pmgmt-activity__date {
  display: block;
  font-size: 0.7rem;
  color: var(--color-muted, #6b7280);
  margin-top: 0.1rem;
}

.pmgmt-attention {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
}

.pmgmt-attention--ok {
  background: rgba(34, 197, 94, 0.14);
  color: #15803d;
}

.pmgmt-attention--urgent {
  background: rgba(239, 68, 68, 0.14);
  color: #b91c1c;
}

.pmgmt-health-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
}

.pmgmt-health-badge--sm {
  font-size: 0.64rem;
  padding: 0.12rem 0.4rem;
}

.pmgmt-health-badge__rank {
  display: inline-grid;
  place-items: center;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.2rem;
  border-radius: 999px;
  font-size: 0.62rem;
  background: rgba(255, 255, 255, 0.55);
}

.pmgmt-health-badge--good {
  color: #15803d;
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.35);
}

.pmgmt-health-badge--attention {
  color: #b45309;
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
}

.pmgmt-health-badge--continuous {
  color: #1d4ed8;
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
}

.pmgmt-health-badge--critical {
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.35);
}

.pmgmt-note-input {
  width: 100%;
  min-width: 8.5rem;
  min-height: 2.35rem;
  max-width: 14rem;
  resize: vertical;
  font: inherit;
  font-size: 0.75rem;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-sm, 0.5rem);
  background: var(--color-surface, #fff);
}

.pmgmt-note-read {
  display: block;
  max-width: 14rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--color-muted, #6b7280);
}

.pmgmt-followup-edit,
.pmgmt-followup-read {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  min-width: 9.5rem;
}

.pmgmt-followup-edit__field {
  width: 100%;
  margin: 0;
}

.pmgmt-followup-edit__field .roadmap-task-edit__label {
  font-size: 0.72rem;
  margin-bottom: 0.25rem;
}

.pmgmt-followup-edit .fanos-jalali-date {
  max-width: 11.5rem;
}

.pmgmt-health-edit {
  min-width: 8.5rem;
}

.pmgmt-health-edit .fanos-dropdown {
  width: 100%;
}

.pmgmt-health-edit .fanos-dropdown__trigger-prefix {
  display: none;
}

.pmgmt-health-edit .fanos-dropdown__trigger {
  width: 100%;
  min-height: 2rem;
  padding: 0.3rem 0.55rem;
  font-size: 0.75rem;
}

.pmgmt-health-select {
  width: 100%;
  min-width: 8.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-sm, 0.5rem);
  border: 1px solid var(--color-border, #e5e7eb);
  background: var(--color-surface, #fff);
  font: inherit;
  font-size: 0.75rem;
}

.pmgmt-followup-read .roadmap-task__reminder {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.pmgmt-chip {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
}

.pmgmt-chip--today {
  color: #92400e;
  background: rgba(245, 158, 11, 0.2);
}

.pmgmt-chip--overdue {
  color: #991b1b;
  background: rgba(239, 68, 68, 0.16);
}

.pmgmt-save-btn {
  align-self: stretch;
}

.pmgmt-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--color-border, #e5e7eb);
  background: var(--color-surface, #fff);
}

.pmgmt-footer__info {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-muted, #6b7280);
}

.pmgmt-footer__pager {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pmgmt-footer__page {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-ink, #111827);
}

.pmgmt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  margin-inline-start: auto;
}

.pmgmt-empty {
  padding: 2rem 1rem;
  text-align: center;
}

@media (max-width: 767px) {
  .app-shell--reports .page-main {
    padding: 0.75rem 0.65rem 1.25rem;
  }

  .reports-page.product-mgmt-page {
    min-width: 0;
    overflow-x: clip;
    gap: 0.75rem;
  }

  .product-mgmt-page .roadmap-topbar--modern {
    width: 100%;
    min-width: 0;
  }

  .product-mgmt-page .roadmap-toolbar__actions {
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
  }

  .product-mgmt-page .roadmap-count {
    white-space: normal;
    text-align: end;
  }

  .pmgmt-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    overflow: visible;
  }

  .pmgmt-summary__card {
    padding: 0.65rem 0.75rem;
    gap: 0.5rem;
    min-width: 0;
  }

  .pmgmt-summary__icon {
    width: 1.85rem;
    height: 1.85rem;
    font-size: 0.85rem;
  }

  .pmgmt-summary__body {
    min-width: 0;
  }

  .pmgmt-summary__value {
    font-size: 1.1rem;
  }

  .pmgmt-summary__label {
    font-size: 0.72rem;
    line-height: 1.3;
  }

  .pmgmt-summary__sub {
    font-size: 0.65rem;
    line-height: 1.25;
  }

  .product-mgmt-page .pmgmt-table-card {
    padding: 0.5rem;
    min-width: 0;
    max-width: 100%;
  }

  .product-mgmt-page .pmgmt-table-wrap {
    overflow: visible;
    max-height: none;
    max-width: 100%;
  }

  .product-mgmt-page .pmgmt-table thead {
    display: none;
  }

  .product-mgmt-page .pmgmt-table tbody {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
  }

  .product-mgmt-page .pmgmt-table tbody tr {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.85rem;
    border: 1px solid var(--color-border-soft, #f3f4f6);
    border-radius: var(--radius-md, 0.75rem);
    background: var(--color-surface, #fff);
  }

  .product-mgmt-page .pmgmt-table tbody tr:nth-child(even),
  .product-mgmt-page .pmgmt-table tbody tr:hover {
    background: var(--color-surface, #fff);
  }

  .product-mgmt-page .pmgmt-row--overdue {
    border-color: rgba(254, 202, 202, 0.9);
  }

  .product-mgmt-page .pmgmt-row--today {
    border-color: rgba(253, 230, 138, 0.95);
  }

  .product-mgmt-page .pmgmt-table tbody td {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    padding: 0;
    border: 0;
    min-width: 0;
    text-align: right;
  }

  .product-mgmt-page .pmgmt-cell--product {
    flex: none;
    font-weight: 600;
    padding-bottom: 0.5rem;
    margin-bottom: 0.15rem;
    border-bottom: 1px solid var(--color-border-soft, #f3f4f6);
  }

  .product-mgmt-page .pmgmt-cell--owner,
  .product-mgmt-page .pmgmt-cell--health,
  .product-mgmt-page .pmgmt-cell--followup {
    flex: none;
    padding-top: 0.55rem;
    border-top: 1px solid var(--color-border-soft, #f3f4f6);
  }

  .product-mgmt-page .pmgmt-table tbody td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--color-muted, #6b7280);
    width: 100%;
    line-height: 1.3;
  }

  .product-mgmt-page .pmgmt-product {
    min-width: 0;
    width: 100%;
  }

  .product-mgmt-page .pmgmt-product__name {
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: 0.9rem;
  }

  .product-mgmt-page .pmgmt-owner {
    min-width: 0;
    width: 100%;
  }

  .product-mgmt-page .pmgmt-followup-edit,
  .product-mgmt-page .pmgmt-followup-read {
    min-width: 0;
    width: 100%;
  }

  .product-mgmt-page .pmgmt-followup-edit__field,
  .product-mgmt-page .pmgmt-followup-edit .fanos-jalali-date,
  .product-mgmt-page .pmgmt-followup-edit .fanos-jalali-date__control {
    width: 100%;
    max-width: 100%;
  }

  .product-mgmt-page .pmgmt-health-edit {
    min-width: 0;
    width: 100%;
  }

  .product-mgmt-page .pmgmt-health-edit .fanos-dropdown__trigger {
    width: 100%;
    box-sizing: border-box;
  }

  .pmgmt-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .pmgmt-legend {
    margin-inline-start: 0;
  }
}

[data-theme="dark"] .pmgmt-summary__card,
[data-theme="dark"] .pmgmt-footer {
  background: var(--color-surface);
  border-color: var(--color-border);
}

[data-theme="dark"] .pmgmt-row--overdue {
  background: rgba(127, 29, 29, 0.35) !important;
}

[data-theme="dark"] .pmgmt-row--today {
  background: rgba(120, 53, 15, 0.35) !important;
}

.pmgmt-row--clickable {
  cursor: pointer;
}

.pmgmt-row--clickable:focus-visible {
  outline: 2px solid var(--color-primary, #3f4191);
  outline-offset: -2px;
}

.pmgmt-row--open {
  box-shadow: inset 3px 0 0 var(--color-primary, #3f4191);
}

.pmgmt-detail-drawer.fanos-drawer {
  width: min(28rem, 94vw);
  max-width: 100%;
}

.pmgmt-detail-drawer .fanos-drawer__scroll {
  padding: 0.75rem 1rem 1rem;
  box-sizing: border-box;
}

.pmgmt-detail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.pmgmt-detail__summary {
  padding: 0.85rem 1rem;
  margin: 0;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--color-border-soft, #f3f4f6);
  border-radius: var(--radius-md, 0.75rem);
  background: var(--color-surface, #fff);
}

.pmgmt-detail-drawer .fanos-sheet__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pmgmt-detail__dl {
  display: grid;
  gap: 0.55rem;
  margin: 0;
}

.pmgmt-detail__dl div {
  display: grid;
  grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr);
  gap: 0.5rem;
  align-items: start;
}

.pmgmt-detail__dl dt {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-muted, #6b7280);
}

.pmgmt-detail__dl dd {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  min-width: 0;
  overflow-wrap: anywhere;
}

.pmgmt-detail__form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0;
  min-width: 0;
}

.pmgmt-detail__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.pmgmt-detail__label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-muted, #6b7280);
}

.pmgmt-detail__select,
.pmgmt-detail__textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.pmgmt-detail__textarea {
  min-height: 5.5rem;
  resize: vertical;
}

.pmgmt-detail__submit {
  align-self: stretch;
  width: 100%;
  justify-content: center;
}

.pmgmt-detail__history {
  min-width: 0;
}

.pmgmt-detail__history-title {
  margin: 0 0 0.65rem;
  font-size: 0.875rem;
  font-weight: 700;
}

.pmgmt-detail__timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.pmgmt-activity {
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--color-border-soft, #f3f4f6);
  border-radius: var(--radius-md, 0.75rem);
  background: var(--color-surface, #fff);
  min-width: 0;
  box-sizing: border-box;
}

.pmgmt-activity__head {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.5rem;
  margin-bottom: 0.4rem;
}

.pmgmt-activity__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
}

.pmgmt-activity__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm, 8px);
  background: transparent;
  color: var(--color-muted, #6b7280);
  cursor: pointer;
}

.pmgmt-activity__action svg {
  width: 16px;
  height: 16px;
}

.pmgmt-activity__action:hover {
  background: var(--color-surface-muted, #f3f4f6);
  color: var(--color-ink, #111827);
}

.pmgmt-activity__action--danger:hover {
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
}

.pmgmt-activity__edit-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pmgmt-activity__edit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.pmgmt-activity__edit-actions .admin-btn {
  min-height: 1.75rem;
  padding: 0.2rem 0.65rem;
  font-size: 0.75rem;
}

.pmgmt-activity--editing {
  border-color: color-mix(in srgb, var(--color-primary, #3f4191) 25%, var(--color-border-soft, #f3f4f6));
}

.pmgmt-activity__type {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-primary, #3f4191);
}

.pmgmt-activity__meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  font-size: 0.6875rem;
}

.pmgmt-activity__dot {
  opacity: 0.6;
}

.pmgmt-activity__body {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.pmgmt-detail__empty,
.pmgmt-detail__loading {
  margin: 0;
  font-size: 0.8125rem;
}

@media (max-width: 767px) {
  .pmgmt-detail-drawer.fanos-drawer {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    inset-inline: 0 !important;
    margin: 0;
    transform: translate3d(0, 100%, 0) !important;
  }

  .fanos-drawer-overlay.is-open .pmgmt-detail-drawer.fanos-drawer {
    transform: translate3d(0, 0, 0) !important;
  }

  .pmgmt-detail-drawer .fanos-drawer__head {
    padding: 1rem 1rem 0.75rem;
  }

  .pmgmt-detail-drawer .fanos-drawer__scroll {
    padding: 0.75rem 1rem max(1rem, env(safe-area-inset-bottom));
    overflow-x: hidden;
  }

  .pmgmt-detail__dl div {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .pmgmt-detail__summary {
    padding: 0.75rem 0.85rem;
  }
}

/* --- Fanos toast (Persian, themed) --- */
.fanos-toast-host {
  position: fixed;
  inset-inline: 0;
  top: max(0.85rem, env(safe-area-inset-top));
  z-index: 10050;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding-inline: 0.85rem;
  pointer-events: none;
}

.fanos-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  width: min(100%, 22.5rem);
  padding: 0.75rem 0.8rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-soft);
  font-family: var(--font-family);
  font-size: var(--text-sm);
  line-height: 1.6;
  direction: rtl;
  text-align: right;
  opacity: 0;
  transform: translateY(-0.55rem) scale(0.98);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}

.fanos-toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.fanos-toast.is-leaving {
  opacity: 0;
  transform: translateY(-0.4rem) scale(0.98);
}

.fanos-toast__icon {
  flex: 0 0 auto;
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
  color: var(--color-primary);
}

.fanos-toast__icon svg {
  width: 100%;
  height: 100%;
}

.fanos-toast__body {
  flex: 1 1 auto;
  min-width: 0;
}

.fanos-toast__title {
  margin: 0 0 0.15rem;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-ink);
}

.fanos-toast__message {
  margin: 0;
  color: var(--color-ink);
}

.fanos-toast__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: -0.15rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-muted);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.fanos-toast__close:hover {
  background: var(--color-hover-subtle);
  color: var(--color-ink);
}

.fanos-toast--info {
  border-right: 3px solid var(--color-primary);
}

.fanos-toast--success {
  border-right: 3px solid var(--color-emerald);
  background: color-mix(in srgb, var(--color-emerald-soft) 55%, var(--color-surface));
}

.fanos-toast--success .fanos-toast__icon {
  color: var(--color-emerald);
}

.fanos-toast--warning {
  border-right: 3px solid var(--color-amber);
  background: color-mix(in srgb, var(--color-amber) 8%, var(--color-surface));
}

.fanos-toast--warning .fanos-toast__icon {
  color: var(--color-amber);
}

.fanos-toast--error {
  border-right: 3px solid var(--color-red);
  background: color-mix(in srgb, var(--color-red) 7%, var(--color-surface));
}

.fanos-toast--error .fanos-toast__icon {
  color: var(--color-red);
}

[data-theme="dark"] .fanos-toast {
  background: var(--color-surface);
  border-color: var(--color-border);
}

[data-theme="dark"] .fanos-toast--success {
  background: color-mix(in srgb, var(--color-emerald) 12%, var(--color-surface));
}

[data-theme="dark"] .fanos-toast--warning {
  background: color-mix(in srgb, var(--color-amber) 12%, var(--color-surface));
}

[data-theme="dark"] .fanos-toast--error {
  background: color-mix(in srgb, var(--color-red) 12%, var(--color-surface));
}


/* —— Important links (لینک‌های مهم) —— */
.links-page {
  min-height: 0;
}

.links-page__body {
  padding-bottom: 1.5rem;
}

.links-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .links-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .links-grid {
    grid-template-columns: 1fr 1.2fr 1fr;
    grid-auto-rows: minmax(12rem, auto);
    gap: 0.875rem;
  }

  .links-grid > .links-card:nth-child(5n + 1) {
    grid-column: 1;
  }

  .links-grid > .links-card:nth-child(5n + 2) {
    grid-column: 1;
  }

  .links-grid > .links-card:nth-child(5n + 3) {
    grid-column: 2;
    grid-row: span 2;
    min-height: 24rem;
  }

  .links-grid > .links-card:nth-child(5n + 4),
  .links-grid > .links-card:nth-child(5n + 5) {
    grid-column: 3;
  }
}

.links-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 11.5rem;
  padding: 0;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 1rem;
  overflow: hidden;
  cursor: pointer;
  text-align: right;
  color: var(--color-ink, #1f2937);
  background-color: var(--color-primary-soft, #eef0ff);
  background-image: var(--links-card-image);
  background-size: cover;
  background-position: center;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--color-primary, #3f4191) 8%, transparent);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.links-card:hover,
.links-card:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--color-primary, #3f4191) 35%, var(--color-border, #e5e7eb));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--color-primary, #3f4191) 16%, transparent);
  outline: none;
}

.links-card__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Soft Fanos lavender / indigo washes — no dark charcoal overlays */
.links-card--tone-0 .links-card__overlay {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--color-primary, #3f4191) 18%, transparent) 0%,
    color-mix(in srgb, var(--color-primary-soft, #eef0ff) 78%, #fff) 48%,
    var(--color-surface, #fff) 100%
  );
}

.links-card--tone-1 .links-card__overlay {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, #5b5fc7 16%, transparent) 0%,
    color-mix(in srgb, #eef0ff 82%, #fff) 50%,
    var(--color-surface, #fff) 100%
  );
}

.links-card--tone-2 .links-card__overlay {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--color-primary-dark, #373a8a) 14%, transparent) 0%,
    color-mix(in srgb, #f4f5ff 85%, #fff) 52%,
    var(--color-surface, #fff) 100%
  );
}

.links-card--tone-3 .links-card__overlay {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, #6d72c7 14%, transparent) 0%,
    color-mix(in srgb, var(--color-primary-soft, #eef0ff) 80%, #fff) 50%,
    var(--color-surface, #fff) 100%
  );
}

.links-card--tone-4 .links-card__overlay {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, #4a4eab 16%, transparent) 0%,
    color-mix(in srgb, #f0f1ff 84%, #fff) 50%,
    var(--color-surface, #fff) 100%
  );
}

.links-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  padding: 1rem 1.1rem 1.15rem;
}

.links-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-primary, #3f4191);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.links-card__desc {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--color-muted, #6b7280);
  opacity: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

[data-theme="dark"] .links-card {
  border-color: color-mix(in srgb, var(--color-primary, #3f4191) 28%, transparent);
  background-color: color-mix(in srgb, var(--color-primary, #3f4191) 18%, #1a1b2e);
  color: #e5e7eb;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .links-card--tone-0 .links-card__overlay,
[data-theme="dark"] .links-card--tone-1 .links-card__overlay,
[data-theme="dark"] .links-card--tone-2 .links-card__overlay,
[data-theme="dark"] .links-card--tone-3 .links-card__overlay,
[data-theme="dark"] .links-card--tone-4 .links-card__overlay {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--color-primary, #3f4191) 35%, transparent) 0%,
    color-mix(in srgb, #1a1b2e 88%, var(--color-primary, #3f4191)) 100%
  );
}

[data-theme="dark"] .links-card__title {
  color: #c7cbff;
}

[data-theme="dark"] .links-card__desc {
  color: #9ca3af;
}

.links-embed__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  background: var(--surface, #fff);
  flex-shrink: 0;
}

.links-embed__title {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.links-embed.page-content--fill {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.links-embed .monitoring-frame-wrap {
  flex: 1 1 auto;
  min-height: 0;
}

/* —— Admin important-link image upload —— */
.admin-link-image-field > span {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
  font-size: 0.875rem;
}

.admin-link-image {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.admin-link-image__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 22rem;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md, 0.75rem);
  border: 1px dashed var(--border-color, #d1d5db);
  background: var(--surface-muted, #f8fafc);
  overflow: hidden;
}

.admin-link-image__preview:has(.admin-link-image__img:not([hidden])) {
  border-style: solid;
}

.admin-link-image__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-link-image__placeholder {
  color: var(--text-muted, #6b7280);
  font-size: 0.85rem;
}

.admin-link-image__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.admin-link-image__upload {
  cursor: pointer;
}

.admin-link-image__hint {
  margin: 0;
}

[data-theme="dark"] .admin-link-image__preview {
  background: rgba(255, 255, 255, 0.04);
}

/* --- دفتر سهام --- */
.captable-page {
  max-width: 68rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

.captable-page__header {
  margin-bottom: 1.25rem;
}

.captable-page__title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-ink);
}

.captable-page__subtitle {
  margin-top: 0.25rem;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.captable-section-title {
  margin: 1.75rem 0 0.75rem;
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-ink);
}

/* کارت بالای «سهام من» — مهم‌ترین عدد صفحه، پس بزرگ و تنها */
.captable-hero {
  padding: 1.5rem;
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-card);
}

.captable-hero__label {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.captable-hero__value {
  margin-top: 0.35rem;
  font-size: 2.25rem;
  line-height: 1.2;
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -0.01em;
}

.captable-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.captable-hero__percent {
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 700;
}

/* پیام‌های بالای دفتر */
.captable-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border-soft);
  border-inline-start: 3px solid var(--color-border);
  font-size: var(--text-sm);
}

.captable-notice__lead {
  font-weight: 700;
  color: var(--color-ink);
}

.captable-notice__body {
  color: var(--color-muted);
}

.captable-notice--good {
  border-inline-start-color: var(--color-emerald);
}

.captable-notice--good .captable-notice__lead {
  color: var(--color-emerald);
}

.captable-notice--warn {
  border-inline-start-color: var(--color-amber);
}

.captable-notice--warn .captable-notice__lead {
  color: var(--color-amber);
}

.captable-notice--bad {
  border-inline-start-color: var(--color-red);
}

.captable-notice--bad .captable-notice__lead {
  color: var(--color-red);
}

/* جدول */
.captable-table-card {
  margin-top: 0.25rem;
}

.captable-table {
  table-layout: auto;
}

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

/* این دو باید بتوانند بشکنند، وگرنه نام بلند جدول را پهن می‌کند.
   با نام کلاس جدول نوشته شده تا از قانون nowrap بالاتر بنشیند. */
.captable-table .captable-cell-name {
  white-space: normal;
  min-width: 11rem;
}

.captable-table .captable-cell-note {
  white-space: normal;
  min-width: 12rem;
  color: var(--color-muted);
}

/* عدد و درصد راست‌چین‌اند تا ارقام زیر هم بنشینند و مقایسه‌شان آسان باشد */
.captable-table .captable-cell-num,
.captable-table .captable-cell-pct {
  text-align: left;
  font-variant-numeric: tabular-nums;
  padding-inline-start: 1.5rem;
}

.captable-cell-pct {
  color: var(--color-muted);
}

.captable-cell-date {
  color: var(--color-muted);
}

.captable-num--out {
  color: var(--color-red);
}

.captable-account {
  font-size: 0.75rem;
  color: var(--color-muted);
}

.captable-muted {
  color: var(--color-muted-light);
}

.captable-chip {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-muted);
  color: var(--color-muted);
  font-size: 0.75rem;
  white-space: nowrap;
}

.captable-chip--warn {
  background: rgba(245, 158, 11, 0.12);
  color: var(--color-amber);
}

.captable-table tfoot th {
  padding: 0.85rem;
  border-top: 1px solid var(--color-border);
  font-weight: 700;
  color: var(--color-ink);
  background: var(--color-surface-muted);
  text-align: right;
}

.captable-table tfoot .captable-cell-num,
.captable-table tfoot .captable-cell-pct {
  text-align: left;
}

@media (max-width: 640px) {
  .captable-page {
    padding: 1rem 0.75rem 2.5rem;
  }

  .captable-hero__value {
    font-size: 1.875rem;
  }

  .captable-account {
    font-size: 0.7rem;
  }
}

[data-theme="dark"] .captable-chip--warn {
  background: rgba(245, 158, 11, 0.18);
}

/* --- فرم سفارش و نمودار --- */
.captable-form {
  padding: 1.25rem;
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-card);
}

.captable-form__row {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .captable-form__row {
    grid-template-columns: repeat(3, 1fr);
  }
}

.captable-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.captable-form__label {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.captable-form__input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: inherit;
  font-size: var(--text-base);
}

.captable-form__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.captable-form__hint {
  margin-top: 0.85rem;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* سابقه‌ی ارزش‌گذاری: یک روند در چهار خط، نه یک نمودار. عدد بزرگ‌ترین چیز
   در هر ردیف است چون همان چیزی است که خوانده می‌شود. */
.val-journey {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0 0;
  display: grid;
  gap: 0.6rem;
}

.val-journey__row {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  grid-template-areas: "when bar value" "note note note";
  align-items: center;
  gap: 0.2rem 0.7rem;
}

.val-journey__when {
  grid-area: when;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.val-journey__bar {
  grid-area: bar;
  height: 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-ink) 8%, transparent);
  overflow: hidden;
}

.val-journey__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--color-primary);
}

.val-journey__value {
  grid-area: value;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-ink);
}

.val-journey__note {
  grid-area: note;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.val-journey__row.is-now .val-journey__fill {
  background: var(--color-emerald);
}

.val-journey__row.is-now .val-journey__when {
  font-weight: 700;
  color: var(--color-ink);
}

/* قیمتی که از مرجع دور است: پرسیدن، نه رد کردن. پس زرد، نه سرخ — و با
   همان رنگی که بقیه‌ی هشدارهای فانوس دارند. */
.captable-form__hint--warn {
  margin-top: 0.5rem;
  padding: 0.55rem 0.7rem;
  border-right: 3px solid var(--color-amber);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--color-amber) 8%, var(--color-surface));
  color: var(--color-ink);
}

[data-theme="dark"] .captable-form__hint--warn {
  background: color-mix(in srgb, var(--color-amber) 14%, var(--color-surface));
}

.captable-form__total {
  margin-top: 0.5rem;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-ink);
}

.captable-form__error {
  margin-top: 0.5rem;
  font-size: var(--text-sm);
  color: var(--color-red);
}

.captable-form__actions {
  margin-top: 1rem;
}

.captable-form__actions .admin-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.captable-chart {
  padding: 1rem;
  color: var(--color-primary);
  border: 1px solid var(--color-border-soft);
}

.captable-chart__range {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.captable-search {
  width: 100%;
  max-width: 22rem;
  margin-bottom: 0.85rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: inherit;
}

.captable-stat-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 1rem;
}

@media (min-width: 900px) {
  .captable-stat-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.captable-stat {
  padding: 0.9rem 1rem;
  border: 1px solid var(--color-border-soft);
}

.captable-stat__label {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.captable-stat__value {
  margin-top: 0.25rem;
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-ink);
}

.captable-row-link {
  cursor: pointer;
}

.captable-row-link:hover {
  background: var(--color-primary-soft);
}

.captable-back {
  margin-bottom: 0.85rem;
  background: none;
  border: none;
  padding: 0;
  color: var(--color-primary);
  font-family: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}

.captable-chip--go {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border: none;
  font-family: inherit;
  cursor: pointer;
}

.captable-chip--go:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.captable-empty {
  padding: 1.5rem;
  border: 1px solid var(--color-border-soft);
}

.captable-empty__hint {
  margin-top: 0.5rem;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

/* ستون‌هایی که فقط قلاب چیدمان‌اند و استایل خاصی لازم ندارند */
.captable-table .captable-cell-kind,
.captable-table .captable-cell-account {
  white-space: nowrap;
}

/* گروه «سهام» در سطح اول منو می‌نشیند، کنار آیتم‌های آیکون‌دار. پس باید
   هم‌اندازه و هم‌تراز آنها باشد، نه مثل دسته‌های محصول که تودرتوترند. */
.sidebar-group__toggle--icon {
  gap: 0.625rem;
  padding: 0.65rem 0.85rem;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-ink);
}

.sidebar-group__toggle--icon .sidebar-group__title {
  font-weight: 500;
  /* همان line-height آیتم‌های دیگر، وگرنه این ردیف شش پیکسل بلندتر می‌شود */
  line-height: 1.35;
}

.sidebar-group__toggle--icon:hover .sidebar-item__icon,
.sidebar-group.is-open > .sidebar-group__toggle--icon .sidebar-item__icon {
  color: var(--color-primary);
}

/* --- ویرایش در جای خودِ ردیف --- */
.captable-table tr.captable-row-editing > td {
  background: var(--color-primary-soft);
  vertical-align: middle;
}

/* ورودی‌ها باید در همان عرض ستون جا شوند، وگرنه جدول پهن می‌شود و
   صفحه اسکرول افقی می‌خورد. */
.captable-table tr.captable-row-editing .captable-form__input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.35rem 0.5rem;
  font-size: var(--text-sm);
}

.captable-table tr.captable-row-editing .captable-cell-note,
.captable-table tr.captable-row-editing .captable-cell-date {
  min-width: 0;
}

.captable-row-editing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  white-space: normal;
}

.admin-btn--sm {
  padding: 0.3rem 0.6rem;
  font-size: 0.75rem;
}

.captable-row-editing--reason > td {
  padding-top: 0;
}

.captable-inline-reason {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.captable-inline-reason .captable-form__input {
  flex: 1;
  min-width: 0;
}

/* تقویم هم باید در عرض ستون تاریخ بماند */
.captable-table tr.captable-row-editing .fanos-jalali-date {
  width: 100%;
  min-width: 0;
}

/* جدول رویدادها ستون بیشتری دارد؛ ستون‌های متنی‌اش باید باریک‌تر باشند تا
   وقتی ردیف به حالت ویرایش می‌رود، جدول از صفحه بیرون نزند. */
.captable-events .captable-table .captable-cell-note {
  min-width: 8rem;
}

.captable-events .captable-table .captable-cell-name {
  min-width: 8rem;
}

.captable-events .captable-table .captable-cell-date {
  min-width: 0;
}

/* ───────────────────────────────────────────────────────────────
   «سهام من» — طرح تازه
   کارت‌ها روی هر عرضی می‌نشینند: کنار هم روی دسکتاپ، زیر هم روی موبایل.
   ─────────────────────────────────────────────────────────────── */

.mine-card {
  padding: 1.1rem 1.15rem;
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-card);
}

.mine-card + .mine-card,
.mine-columns + .mine-card,
.mine-card + .mine-columns {
  margin-top: 0.9rem;
}

.mine-icon {
  width: 0.95rem;
  height: 0.95rem;
}

/* ── کارت بالا ─────────────────────────────────────────────── */

.mine-headline__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap-reverse;
}

.mine-headline__figure {
  flex: 1 1 16rem;
  min-width: 0;
}

.mine-headline__label {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.mine-headline__value {
  margin-top: 0.25rem;
  font-size: clamp(1.6rem, 4.5vw, 2.4rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.mine-headline__meta {
  margin-top: 0.5rem;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* حلقه‌ی درصد */
.mine-donut {
  position: relative;
  flex: 0 0 auto;
  width: 8.5rem;
  height: 8.5rem;
  max-width: 45vw;
  max-height: 45vw;
}

.mine-donut svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.mine-donut__track,
.mine-donut__value {
  fill: none;
  stroke-width: 11;
}

.mine-donut__track {
  stroke: var(--color-border);
}

.mine-donut__value {
  stroke: var(--color-primary);
  stroke-linecap: round;
}

.mine-donut__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  text-align: center;
}

.mine-donut__percent {
  font-size: clamp(0.95rem, 3vw, 1.2rem);
  font-weight: 800;
  color: var(--color-ink);
}

.mine-donut__caption {
  font-size: 0.75rem;
  color: var(--color-muted);
}

/* چهار کاشی خلاصه */
.mine-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 0.6rem;
  margin-top: 1.1rem;
}

.mine-tile {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 0.8rem;
  border-radius: var(--radius-sm);
  background: var(--color-page);
}

.mine-tile__icon,
.mine-card__icon,
.mine-stat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 10px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.mine-tile__body {
  min-width: 0;
}

.mine-tile__label {
  font-size: 0.72rem;
  color: var(--color-muted);
}

.mine-tile__value {
  margin-top: 0.1rem;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.mine-tile__hint {
  margin-top: 0.1rem;
  font-size: 0.68rem;
  color: var(--color-muted-light);
}

/* نوار توضیح آبی زیر کاشی‌ها. عمداً نامش از ستون «توضیحات» جدول جداست:
   وقتی هر دو mine-note بودند، سلول‌های جدول هم پس‌زمینه‌ی آبی می‌گرفتند. */
.mine-callout {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 0.78rem;
}

/* ── سرصفحه‌ی کارت‌ها ──────────────────────────────────────── */

.mine-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}

.mine-card__heading {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.mine-card__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-ink);
}

.mine-card__subtitle {
  margin-top: 0.1rem;
  font-size: 0.75rem;
  color: var(--color-muted);
}

.mine-link {
  border: 0;
  background: none;
  padding: 0.2rem 0.1rem;
  font: inherit;
  font-size: 0.8rem;
  color: var(--color-primary);
  cursor: pointer;
}

.mine-link:hover {
  text-decoration: underline;
}

/* ── وضعیت سهام ───────────────────────────────────────────── */

.mine-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.85rem;
}

.mine-stat {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 0.9rem;
  border-radius: var(--radius-md);
}

.mine-stat__label {
  font-size: 0.72rem;
  color: var(--color-muted);
}

.mine-stat__value {
  margin-top: 0.1rem;
  font-size: clamp(1.05rem, 3vw, 1.3rem);
  font-weight: 800;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.mine-stat__hint {
  margin-top: 0.1rem;
  font-size: 0.68rem;
  color: var(--color-muted);
}

.mine-stat--free {
  background: var(--color-primary-soft);
}

.mine-stat--held {
  background: #ecfdf5;
}

.mine-stat--held .mine-stat__icon {
  background: #d1fae5;
  color: #047857;
}

/* ── دو جدول پایین ────────────────────────────────────────── */

/* دقیقاً دو ستون، نه بیشتر — دو کارت داریم و نباید ستون خالی بماند. */
.mine-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin-top: 0.9rem;
  align-items: start;
}

@media (min-width: 60rem) {
  .mine-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.mine-columns > .mine-card {
  margin-top: 0;
}

.mine-table-wrap {
  overflow-x: auto;
}

.mine-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.mine-table thead th {
  padding: 0 0.5rem 0.45rem;
  text-align: right;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-border-soft);
  white-space: nowrap;
}

.mine-table tbody td {
  padding: 0.5rem;
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-border-soft);
}

.mine-table tbody tr:last-child td {
  border-bottom: 0;
}

.mine-table .mine-num {
  text-align: left;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mine-table .mine-note {
  color: var(--color-muted);
}

.mine-num--out {
  color: var(--color-red);
}

.mine-chip {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
}

.mine-chip--buy {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.mine-chip--sell {
  background: #fee2e2;
  color: #b91c1c;
}

.mine-state {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--color-border-soft);
  color: var(--color-muted);
  font-size: 0.75rem;
  white-space: nowrap;
}

.mine-state--open,
.mine-state--partially_filled {
  background: #ecfdf5;
  color: #047857;
}

.mine-state--filled {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.mine-more,
.mine-empty {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  color: var(--color-muted);
}

/* ── موبایل ───────────────────────────────────────────────── */

@media (max-width: 40rem) {
  .mine-card {
    padding: 1.15rem;
  }

  .mine-headline__top {
    gap: 1rem;
  }

  /* جدول باریک نمی‌شود؛ هر ردیف کارت خودش می‌شود تا چیزی بیرون نزند. */
  .mine-table,
  .mine-table tbody,
  .mine-table tr,
  .mine-table td {
    display: block;
    width: 100%;
  }

  .mine-table thead {
    display: none;
  }

  .mine-table tbody tr {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--color-border-soft);
  }

  .mine-table tbody tr:last-child {
    border-bottom: 0;
  }

  .mine-table tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.2rem 0;
    border: 0;
    text-align: right;
  }

  .mine-table tbody td::before {
    content: attr(data-label);
    font-size: 0.75rem;
    color: var(--color-muted);
  }

  .mine-table .mine-num {
    text-align: right;
  }
}

/* ───────────────────────────────────────────────────────────────
   «بازار» و «معاملات من»
   همان زبان بصری «سهام من» (کلاس‌های mine-*) با چند تکه‌ی مخصوص بازار.
   ─────────────────────────────────────────────────────────────── */

.fx-tiles {
  margin-top: 0;
  margin-bottom: 0.9rem;
}

.fx-tile {
  border: 1px solid var(--color-border-soft);
  background: var(--color-card, #fff);
  box-shadow: var(--shadow-card);
}

.fx-change {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.3rem;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 600;
}

.fx-change--up {
  background: #ecfdf5;
  color: #047857;
}

.fx-change--down {
  background: #fee2e2;
  color: #b91c1c;
}

/* دو ستونِ هم‌ارتفاع؛ روی موبایل زیر هم */
.fx-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin-bottom: 0.9rem;
  align-items: start;
}

@media (min-width: 60rem) {
  .fx-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* نمودار پهن‌تر از دفتر سفارش است */
  .fx-row--chart {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  }
}

.fx-row > .mine-card {
  margin-top: 0;
  height: 100%;
}

/* ── دفتر سفارش ───────────────────────────────────────────── */

.fx-book {
  padding: 0;
  overflow: hidden;
}

.fx-book__grid {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 30rem) {
  .fx-book__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.fx-depth {
  padding: 0.9rem 1rem;
}

.fx-depth + .fx-depth {
  border-top: 1px solid var(--color-border-soft);
}

@media (min-width: 30rem) {
  .fx-depth + .fx-depth {
    border-top: 0;
    border-inline-end: 1px solid var(--color-border-soft);
  }
}

.fx-depth__title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
}

.fx-depth--buy .fx-depth__title {
  color: #047857;
}

.fx-depth--sell .fx-depth__title {
  color: #b91c1c;
}

.fx-depth__arrow {
  font-size: 0.7rem;
}

.fx-depth--buy .fx-depth__price {
  color: #047857;
  font-weight: 700;
}

.fx-depth--sell .fx-depth__price {
  color: #b91c1c;
  font-weight: 700;
}

.fx-depth__table tbody tr:nth-child(odd) td {
  background: var(--color-page);
}

/* ── نمودار ───────────────────────────────────────────────── */

.fx-range {
  display: flex;
  gap: 0.25rem;
  padding: 0.2rem;
  border-radius: var(--radius-pill);
  background: var(--color-page);
}

.fx-range__btn {
  border: 0;
  background: none;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: 0.75rem;
  color: var(--color-muted);
  cursor: pointer;
}

.fx-range__btn.is-active {
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
}

.captable-chart--bare {
  color: var(--color-primary);
}

.captable-chart--bare svg {
  display: block;
  width: 100%;
}

/* ── ساعت زیر تاریخ ───────────────────────────────────────── */

.fx-day {
  display: block;
  font-size: 0.72rem;
  color: var(--color-muted);
}

/* ── آمار بازار ───────────────────────────────────────────── */

.fx-stats {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fx-stats__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  font-size: 0.78rem;
  border-bottom: 1px solid var(--color-border-soft);
}

.fx-stats__row:last-child {
  border-bottom: 0;
}

.fx-stats__row > span:first-child {
  color: var(--color-muted);
}

.fx-stats__row > span:last-child {
  font-weight: 700;
  color: var(--color-ink);
}

/* ── فرم سفارش ────────────────────────────────────────────── */

.fx-side__value {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.fx-side {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: var(--radius-md);
  background: var(--color-page);
}

.fx-side--single {
  grid-template-columns: 1fr;
}

.fx-side__btn {
  border: 0;
  background: none;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 600;
  color: var(--color-muted);
  cursor: pointer;
}

.fx-side__btn.is-active {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.fx-order--sell .fx-side__btn.is-active {
  background: #fee2e2;
  color: #b91c1c;
}

.fx-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.fx-field__label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.8rem;
  color: var(--color-muted);
}

.fx-field__box {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-card, #fff);
}

.fx-field__box:focus-within {
  border-color: var(--color-primary);
}

.fx-field__input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 0.55rem 0.7rem;
  font: inherit;
  background: none;
  color: var(--color-ink);
}

.fx-field__input:focus {
  outline: none;
}

.fx-field__unit {
  display: flex;
  align-items: center;
  padding: 0 0.8rem;
  background: var(--color-page);
  border-inline-start: 1px solid var(--color-border);
  font-size: 0.8rem;
  color: var(--color-muted);
  white-space: nowrap;
}

.fx-total {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.7rem;
  padding: 0.65rem 0.8rem;
  border-radius: var(--radius-md);
  background: var(--color-page);
}

.fx-total__label {
  font-size: 0.8rem;
  color: var(--color-muted);
}

.fx-total__value {
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.fx-total__unit {
  font-size: 0.75rem;
  color: var(--color-muted);
}

.fx-submit {
  display: block;
  width: 100%;
  margin-top: 0.8rem;
  padding: 0.65rem 1rem;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.fx-submit:hover:not(:disabled) {
  background: var(--color-primary-dark);
}

.fx-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.fx-order--sell .fx-submit {
  background: #b91c1c;
}

.fx-hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.8rem;
  font-size: 0.78rem;
  color: var(--color-muted);
}

.fx-cancel {
  border: 0;
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.75rem;
  background: #fee2e2;
  color: #b91c1c;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.fx-cancel:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ───────────────────────────────────────────────────────────────
   «دفتر سهام»
   ─────────────────────────────────────────────────────────────── */

.bk-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
  padding: 0.55rem 0.8rem;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
}

.bk-note__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 700;
}

.bk-note--good {
  background: #ecfdf5;
  color: #047857;
}

.bk-note--good .bk-note__dot {
  background: #d1fae5;
}

.bk-note--bad {
  background: #fee2e2;
  color: #b91c1c;
}

.bk-note--bad .bk-note__dot {
  background: #fecaca;
}

.bk-note--info {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.bk-note--info .bk-note__dot {
  background: #fff;
}

.bk-search {
  width: 100%;
  max-width: 18rem;
  box-sizing: border-box;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: 0.78rem;
  background: var(--color-page);
  color: var(--color-ink);
}

.bk-search:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-card, #fff);
}

.bk-table .bk-index {
  width: 3rem;
  color: var(--color-muted);
}

.bk-table .bk-name {
  font-weight: 600;
  color: var(--color-ink);
  white-space: normal;
}

.bk-table tfoot td {
  padding: 0.55rem 0.5rem;
  font-weight: 700;
  color: var(--color-ink);
  border-top: 1px solid var(--color-border);
}

.captable-row-link {
  cursor: pointer;
}

.captable-row-link:hover td {
  background: var(--color-primary-soft);
}

/* ── صفحه‌بندی ────────────────────────────────────────────── */

.bk-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.bk-pager__info {
  font-size: 0.72rem;
  color: var(--color-muted);
}

.bk-pager__pages {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.bk-pager__btn {
  min-width: 1.7rem;
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-card, #fff);
  font: inherit;
  font-size: 0.8rem;
  color: var(--color-ink);
  cursor: pointer;
}

.bk-pager__btn:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.bk-pager__btn.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 700;
}

.bk-pager__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.bk-pager__gap {
  padding: 0 0.2rem;
  color: var(--color-muted-light);
}

@media (max-width: 40rem) {
  /* در حالت کارتی، عرض ثابتِ ستون ردیف فقط سرریز می‌سازد */
  .bk-table .bk-index {
    width: auto;
  }

  /* جمع کل در حالت کارتی معنا ندارد؛ زیر جدول یک خط می‌شود */
  .bk-table tfoot,
  .bk-table tfoot tr,
  .bk-table tfoot td {
    display: block;
    width: 100%;
  }

  .bk-table tfoot td:empty {
    display: none;
  }

  .bk-table tfoot td {
    display: flex;
    justify-content: space-between;
    padding: 0.2rem 0;
    border: 0;
  }

  .bk-table tfoot td[data-label]::before {
    content: attr(data-label);
    font-weight: 400;
    color: var(--color-muted);
  }

  .bk-pager {
    justify-content: center;
  }
}

/* توضیح پایین کارت رویدادها، آرام‌تر از نوارهای بالای صفحه */
.captable-events__hint {
  margin: 0.8rem 0 0;
}

/* جدول رویدادها داخل همان کارت است، پس کارت و سایه‌ی خودش را ندارد */
.captable-events .mine-table-wrap {
  overflow-x: auto;
}

.captable-events .captable-table {
  background: none;
}

/* ── دو کار مدیریتی، پشت دو دکمه و یک کشوی کناری ─────────── */

.bk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}

.bk-action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-card, #fff);
  font: inherit;
  font-size: 0.78rem;
  color: var(--color-ink);
  cursor: pointer;
}

.bk-action:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.bk-action.is-open {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.bk-action__badge {
  min-width: 1.15rem;
  padding: 0 0.3rem;
  border-radius: var(--radius-pill);
  background: #fee2e2;
  color: #b91c1c;
  font-size: 0.68rem;
  font-weight: 700;
  text-align: center;
}

.bk-action.is-open .bk-action__badge {
  background: #fff;
  color: var(--color-primary);
}

.bk-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
}

.bk-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.35);
}

/* صفحه راست‌به‌چپ است و کشو از سمت چپ می‌آید */
.bk-drawer__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(30rem, 100%);
  display: flex;
  flex-direction: column;
  background: var(--color-card, #fff);
  box-shadow: 0 0 40px rgba(17, 24, 39, 0.18);
  animation: bk-drawer-in 0.18s ease-out;
}

@keyframes bk-drawer-in {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .bk-drawer__panel { animation: none; }
}

.bk-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--color-border-soft);
}

.bk-drawer__close {
  border: 0;
  background: none;
  padding: 0 0.3rem;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--color-muted);
  cursor: pointer;
}

.bk-drawer__close:hover {
  color: var(--color-ink);
}

.bk-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 1.15rem;
}

/* داخل کشو، کارت و عنوان تکراری لازم نیست */
.bk-drawer__body .card,
.bk-drawer__body .mine-card,
.bk-drawer__body .captable-table-card {
  margin: 0 0 0.9rem;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: none;
}

.bk-drawer__body .captable-section-title {
  margin-top: 0;
  font-size: var(--text-base);
}

.bk-drawer__body .captable-form__row {
  grid-template-columns: 1fr;
}

/* دو دکمه‌ی تسویه، کنار هم */
.captable-settle-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  white-space: nowrap;
}

/* ردیف دفتر سفارش، قابل انتخاب برای مشارکت */
.fx-book__hint {
  margin: 0 0 0.6rem;
  padding: 0 1rem;
  font-size: 0.72rem;
  color: var(--color-muted);
}

.fx-depth__row:hover td {
  background: var(--color-primary-soft);
}

.fx-depth__act {
  width: 1%;
  text-align: left;
  white-space: nowrap;
}

/* دکمه، نامِ کاری را دارد که با زدنش انجام می‌شود: روی سفارش فروش «خرید»
   و روی سفارش خرید «فروش». رنگ هم از همان کار می‌آید، نه از ردیف. */
.fx-take {
  border: 0;
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.85rem;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.fx-take--buy {
  background: #ecfdf5;
  color: #047857;
}

.fx-take--buy:hover {
  background: #d1fae5;
}

.fx-take--sell {
  background: #fee2e2;
  color: #b91c1c;
}

.fx-take--sell:hover {
  background: #fecaca;
}

.fx-take:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

@media (max-width: 40rem) {
  /* در حالت کارتی، خانه‌ی دکمه برچسب نمی‌خواهد */
  .mine-table tbody td.fx-depth__act::before {
    content: "";
  }

  .fx-depth__act {
    width: auto;
  }
}


/* ── تبدیل حقوق به سهام ───────────────────────────────────── */

/* کاشی سوم «وضعیت سهام»: سهامی که هست ولی هنوز فروختنی نیست. */
.mine-stat--locked {
  background: #fff7ed;
}

.mine-stat--locked .mine-stat__icon {
  background: #ffedd5;
  color: #c2410c;
}

[data-theme="dark"] .mine-stat--locked {
  background: rgba(194, 65, 12, 0.14);
}

[data-theme="dark"] .mine-stat--locked .mine-stat__icon {
  background: rgba(194, 65, 12, 0.22);
  color: #fdba74;
}

/* نشان قفل و آزاد، هم در «سهام من» و هم در جدول تبدیل‌ها. */
.mine-badge {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

.mine-badge--locked {
  background: #fff7ed;
  color: #c2410c;
}

.mine-badge--free {
  background: #ecfdf5;
  color: #047857;
}

[data-theme="dark"] .mine-badge--locked {
  background: rgba(194, 65, 12, 0.2);
  color: #fdba74;
}

[data-theme="dark"] .mine-badge--free {
  background: rgba(4, 120, 87, 0.2);
  color: #6ee7b7;
}

/* ── حالت خالی ────────────────────────────────────────────── */

/*
 * جای خالی هم یک حالت است. تصویر می‌گوید چیزی خراب نشده، و خط دوم می‌گوید
 * کِی پر می‌شود. بدون این، یک جمله‌ی تنها وسط کارت می‌ماند.
 */
.sal-empty {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-top: 0.8rem;
  padding: 1.3rem 1.2rem;
  border-radius: var(--radius-md);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-primary) 5%, transparent),
    transparent
  );
}

.sal-empty__art {
  flex: 0 0 auto;
  display: inline-flex;
  width: 4.4rem;
  height: 4.4rem;
}

.sal-art {
  width: 100%;
  height: 100%;
}

.sal-art__body {
  fill: color-mix(in srgb, var(--color-primary) 12%, transparent);
  stroke: color-mix(in srgb, var(--color-primary) 45%, transparent);
  stroke-width: 2.5;
}

.sal-art__line {
  stroke: color-mix(in srgb, var(--color-primary) 40%, transparent);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.sal-art__dot {
  fill: color-mix(in srgb, var(--color-primary) 22%, transparent);
}

.sal-art__badge {
  fill: var(--color-primary);
  opacity: 0.9;
}

.sal-art__mark {
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.sal-empty__title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-ink);
}

.sal-empty__hint {
  margin-top: 0.2rem;
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--color-muted);
}

/* ── دکمه‌ها ──────────────────────────────────────────────── */

/* دکمه‌ی اصلی کارت «برنامه‌ها». نشان + جلوتر از متن می‌نشیند. */
.sal-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem 0.35rem 0.4rem;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}

.sal-pill:hover {
  background: color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.sal-pill__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.8rem;
  line-height: 1;
}

/* دکمه‌ی «ثبت تبدیل‌های این دوره» — پررنگ، چون کار اصلی صفحه است. */
.sal-run {
  padding: 0.45rem 0.9rem;
  border: 0;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.sal-run:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ── فرم و جدول ───────────────────────────────────────────── */

.sal-form {
  margin-top: 0.9rem;
}

/* دلیل توقف، یک یادداشت آرام است نه یک وضعیت. */
.sal-note {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  background: var(--color-surface-muted, rgba(148, 163, 184, 0.16));
  color: var(--color-muted);
  font-size: 0.68rem;
}

.sal-reason {
  white-space: nowrap;
}

@media (max-width: 40rem) {
  .sal-empty {
    flex-direction: column;
    text-align: center;
  }

  .sal-reason {
    white-space: normal;
  }
}

/* خط محاسبه‌ی زنده زیر فرم: تا وقتی عددی نیست، خاموش می‌ماند. */
.sal-calc {
  margin-top: 0.7rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted, rgba(148, 163, 184, 0.12));
  font-size: 0.76rem;
  line-height: 1.8;
  color: var(--color-muted);
}

.sal-calc--ready {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-ink);
  font-weight: 600;
}

/* «هنوز نرسیده» کنار تاریخ شروع. */
.sal-note--soon {
  margin-inline-start: 0.35rem;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
}

/* حذف، کار برگشت‌ناپذیری است — رنگش هم همین را بگوید. */
.sal-remove {
  margin-inline-start: 0.5rem;
  color: #be123c;
}

[data-theme="dark"] .sal-remove {
  color: #fda4af;
}

/* ── برنامه‌ی تبدیل حقوق، در «سهام من» ───────────────────── */

.mine-plan {
  margin-top: 0.8rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.mine-plan__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.mine-plan__range {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-ink);
}

.mine-plan__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.8rem;
}

.mine-plan__value {
  margin-top: 0.15rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.mine-plan__note {
  margin-top: 0.7rem;
  font-size: 0.72rem;
  color: var(--color-muted);
}

/* ── نوار مسیر تبدیل حقوق ────────────────────────────────── */

/*
 * یک خط، سه بخش. رنگ تنها کافی نیست — زیر هر رنگ، عدد سهم و مبلغ تومان
 * هم می‌آید، چون کسی که این را می‌خواند با حقوقش فکر می‌کند نه با «سهم».
 */
.mine-journey {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-border);
}

.mine-journey__track {
  display: flex;
  height: 0.7rem;
  border-radius: 999px;
  overflow: hidden;
  background: var(--color-surface-muted, rgba(148, 163, 184, 0.22));
}

.mine-journey__seg {
  display: block;
  height: 100%;
  transition: width 0.3s ease;
}

.mine-journey__seg--released {
  background: #059669;
}

.mine-journey__seg--locked {
  background: #f59e0b;
}

.mine-journey__seg--ahead {
  background: var(--color-primary);
  opacity: 0.35;
}

[data-theme="dark"] .mine-journey__seg--released {
  background: #34d399;
}

[data-theme="dark"] .mine-journey__seg--locked {
  background: #fbbf24;
}

.mine-journey__legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.8rem;
  margin-top: 0.85rem;
}

.mine-journey__item {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
}

.mine-journey__dot {
  flex: 0 0 auto;
  width: 0.65rem;
  height: 0.65rem;
  margin-top: 0.25rem;
  border-radius: 999px;
}

.mine-journey__dot--released {
  background: #059669;
}

.mine-journey__dot--locked {
  background: #f59e0b;
}

.mine-journey__dot--ahead {
  background: var(--color-primary);
  opacity: 0.45;
}

[data-theme="dark"] .mine-journey__dot--released {
  background: #34d399;
}

[data-theme="dark"] .mine-journey__dot--locked {
  background: #fbbf24;
}

.mine-journey__label {
  font-size: 0.72rem;
  color: var(--color-muted);
}

.mine-journey__shares {
  margin-top: 0.1rem;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--color-ink);
}

.mine-journey__amount {
  margin-top: 0.05rem;
  font-size: 0.72rem;
  color: var(--color-muted);
}

.mine-plan__progress {
  margin-top: 0.3rem;
  font-size: 0.75rem;
  color: var(--color-muted);
}

/* ─── ماه و سال، یک فیلد واحد ───────────────────────────────
   دو کشو پشت سر هم، وگرنه هرکدام یک خط کامل می‌گیرند و فرم
   به‌هم‌ریخته به نظر می‌رسد. */
.sal-month {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 0.4rem;
  min-width: 0;
}

.sal-month > select {
  width: 100%;
  min-width: 0;
}

/* متن کنار تصویرِ «چیزی نیست» */
.sal-empty__text {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

/* تصمیم‌های قبلی، زیر کارت درخواست */
.mine-req__history {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.8rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--color-border-soft);
}

.mine-req__past {
  font-size: 0.76rem;
  line-height: 1.9;
  color: var(--color-muted);
}

/* نوار سفرِ خالی، باید جای خودش را بگیرد */
.mine-journey__track--empty {
  opacity: 0.55;
}

/* ─── ابراز علاقه‌ها ─────────────────────────────────────── */
.bk-interest {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.6rem;
}

.bk-interest__item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: var(--color-surface, transparent);
}

.bk-interest__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.bk-interest__name {
  font-weight: 700;
  color: var(--color-ink);
}

.bk-interest__meta,
.bk-interest__when {
  font-size: 0.74rem;
  color: var(--color-muted);
}

.bk-interest__amount {
  font-size: var(--text-sm);
  color: var(--color-ink);
}

.bk-interest__note {
  font-size: 0.78rem;
  line-height: 1.9;
  color: var(--color-muted);
}

.bk-interest__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.2rem;
}

/* میان‌برهای بالای میز کار — همان دو صفحه‌ی منو، جلوی چشم. */
.workbench-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.workbench-shortcut {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--color-primary-soft);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-primary);
  font: inherit;
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.workbench-shortcut:hover {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  transform: translateY(-1px);
}

.workbench-shortcut__icon {
  display: inline-flex;
}

.workbench-shortcut__icon svg {
  width: 1.05rem;
  height: 1.05rem;
}

@media (max-width: 640px) {
  .workbench-shortcut {
    flex: 1 1 0;
    justify-content: center;
  }
}

/* دکمه‌ی منو در موبایل: آیکون سه‌خط به‌تنهایی دیده نمی‌شد و کاربر نمی‌فهمید
   بقیه‌ی صفحه‌ها آنجاست. کلمه‌ی «منو» کنارش می‌آید. در دسکتاپ که منو همیشه
   باز است، همان آیکون تنها کافی است. */
.site-header__toggle-label {
  display: none;
}

@media (max-width: 1023px) {
  .site-header__toggle {
    width: auto;
    gap: 0.35rem;
    padding-inline: 0.7rem;
    border-radius: var(--radius-pill);
  }

  .site-header__toggle-label {
    display: inline;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1;
  }
}

/* جمله‌ی زیر نوار تعهد — عدد تنها معنی ندارد، باید بگوید یعنی چه. */
.mine-journey__note {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  line-height: 1.9;
  color: var(--color-muted);
}

/* فرم ثبت پرداخت تعهد — سه چیز کنار هم، نه سه خط. */
.bk-pay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.bk-pay .captable-form__input {
  width: auto;
  min-width: 7rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.78rem;
}

/* ─── حلقه‌ی سهم، با راهنمای آزاد و قفل ─────────────────────── */
.mine-donut-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
}

/* کمانِ قفل زیر کمانِ آزاد کشیده می‌شود: اولی کلِ سهم را می‌گیرد و دومی
   روی آن می‌نشیند، پس آنچه باقی می‌ماند دقیقاً همان قفل است. */
.mine-donut__value--locked {
  stroke: var(--color-amber);
}

.mine-donut__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 0.8rem;
  font-size: 0.72rem;
  color: var(--color-muted);
}

.mine-donut__key {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* نقطه‌های راهنما باید دقیقاً همان رنگ کمان‌ها باشند. رنگِ نزدیک هم کافی
   نیست: راهنمایی که با شکل نمی‌خواند، بدتر از نبودنش است. */
.mine-donut__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  display: inline-block;
}

.mine-donut__dot--free {
  background: var(--color-primary);
}

.mine-donut__dot--locked {
  background: var(--color-amber);
}

/* ترجمه‌ی دفتر سفارش به ارزش شرکت — یک خط، بالای دو ستون. */
.fx-book__scale {
  margin: 0 0 0.6rem;
  font-size: 0.76rem;
  line-height: 1.9;
  color: var(--color-muted);
}