@import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css');

:root {
  --bg: #e8e8e8;
  --card: #ffffff;
  --muted: #f4f4f5;
  --border: #d4d4d8;
  --app-sidebar-width: 251px;
  --app-sidebar-width-collapsed: 76px;
  --app-header-height: 84px;
  --ws-rail-width: clamp(240px, 22vw, 300px);

  --primary: #ef4444;
  --primary-hover: #dc2626;

  --status-green-rgb: 34, 197, 94;
  --status-green: rgb(var(--status-green-rgb));
  --status-green-text: #16a34a;
  --status-green-solid: #16a34a;
  --status-green-solid-hover: #15803d;
  --status-green-bg: rgba(var(--status-green-rgb), 0.12);
  --status-green-bg-hover: rgba(var(--status-green-rgb), 0.18);
  --status-green-border: rgba(var(--status-green-rgb), 0.4);

  /* ارزیابی — پالت معنایی هم‌راستا با پروتوتایپ (جدا از قرمز برند) */
  --eval-ontime-rgb: 47, 158, 104;
  --eval-ontime: #2f9e68;
  --eval-ontime-text: #247a50;
  --eval-ontime-bg: #e6f4ec;
  --eval-ontime-border: rgba(47, 158, 104, 0.28);
  --eval-late-rgb: 197, 58, 58;
  --eval-late: #c53a3a;
  --eval-late-text: #a12e2e;
  --eval-late-bg: #fbeaea;
  --eval-late-border: rgba(197, 58, 58, 0.28);
  --eval-soon-rgb: 217, 131, 36;
  --eval-soon: #d98324;
  --eval-soon-text: #b56b1c;
  --eval-soon-bg: #fef3e6;
  --eval-soon-border: rgba(217, 131, 36, 0.3);
  --eval-open-rgb: 91, 127, 166;
  --eval-open: #5b7fa6;
  --eval-open-text: #486588;
  --eval-open-bg: #eef3f8;
  --eval-open-border: rgba(91, 127, 166, 0.3);
  --eval-neutral: #8d97a3;
  --eval-delta-good: var(--eval-ontime);
  --eval-delta-bad: var(--eval-late);
  --eval-space: 14px;
  --eval-seg-active: #2c3440;
  --eval-seg-active-text: #ffffff;
  --eval-radius: 10px;

  --status-red-rgb: 239, 68, 68;
  --status-red: rgb(var(--status-red-rgb));
  --status-red-text: #fca5a5;
  --status-red-bg: rgba(var(--status-red-rgb), 0.1);
  --status-red-bg-subtle: rgba(var(--status-red-rgb), 0.08);
  --status-red-bg-medium: rgba(var(--status-red-rgb), 0.15);
  --status-red-bg-strong: rgba(var(--status-red-rgb), 0.28);
  --status-red-border: rgba(var(--status-red-rgb), 0.35);
  --status-red-delete-bg: rgba(248, 113, 113, 0.15);

  --text-strong: #18181b;
  --text: #3f3f46;
  --text-muted: #71717a;
  --text-placeholder: #a1a1aa;

  --shadow-card: 0 15px 35px rgba(0, 0, 0, 0.1);
  --shadow-panel: 0 14px 28px rgba(0, 0, 0, 0.12);
  --overlay: rgba(0, 0, 0, 0.35);
  --footer-bg: rgba(255, 255, 255, 0.96);
  --surface-btn: #f4f4f5;
  --panel-search-bg: var(--muted);
  --field-bg: #f4f4f5;
  --field-bg-inset: var(--card);
  --field-input-bg: var(--card);
  --field-border-idle: transparent;
  --field-border-active: var(--border);
  --login-bg-top: #ed1c24;
  --login-bg-bottom: #e8e8e8;
  --login-card-bg: #f0f0f1;
  --login-card-shadow: 0 10px 36px rgba(0, 0, 0, 0.1);
  --row-hover: rgba(0, 0, 0, 0.04);
  --primary-soft: var(--status-red-bg);
  --primary-soft-hover: var(--status-red-bg-subtle);
  --attendance-absent-bg: #e4e4e7;
  --attendance-absent-bg-hover: #d4d4d8;
  --btn-on-primary: #ffffff;

  --scrollbar-track: #dedede;
  --scrollbar-thumb: #b8b8c2;
  --scrollbar-thumb-hover: #9ca3af;
  --checkbox-accent: #9ca3af;
  --email-row-success-bg: var(--status-green-bg);
  --email-row-success-bg-hover: var(--status-green-bg-hover);
  --email-row-failed-bg: var(--status-red-bg);
  --email-row-failed-bg-hover: var(--status-red-bg-medium);
  --email-send-btn-bg: var(--status-green-bg);
  --email-send-btn-bg-hover: var(--status-green-bg-hover);
  --email-send-btn-border: var(--status-green-border);
  --email-send-btn-text: var(--status-green-text);

  --proc-status-pending-rgb: 234, 179, 8;
  --proc-status-in-progress-rgb: 59, 130, 246;
  --proc-status-pending: rgb(var(--proc-status-pending-rgb));
  --proc-status-in-progress: rgb(var(--proc-status-in-progress-rgb));
  --proc-status-pending-bg: rgba(var(--proc-status-pending-rgb), 0.14);
  --proc-status-in-progress-bg: rgba(var(--proc-status-in-progress-rgb), 0.14);
  --proc-status-pending-border: rgba(var(--proc-status-pending-rgb), 0.45);
  --proc-status-in-progress-border: rgba(var(--proc-status-in-progress-rgb), 0.45);
}

[data-theme="dark"] {
  --bg: #242425;
  --card: #1f1f1f;
  --muted: #1f1f1f;
  --border: #3a4048;

  --primary: #dc5050;
  --primary-hover: #c64444;

  --status-green-rgb: 72, 196, 122;
  --status-green-text: #7ee4b0;
  --status-green-solid: #34d399;
  --status-green-solid-hover: #22c55e;
  --status-green-bg: rgba(var(--status-green-rgb), 0.14);
  --status-green-bg-hover: rgba(var(--status-green-rgb), 0.22);
  --status-green-border: rgba(var(--status-green-rgb), 0.42);

  --eval-ontime-rgb: 74, 200, 130;
  --eval-ontime: #3dba78;
  --eval-ontime-text: #86efac;
  --eval-ontime-bg: rgba(74, 200, 130, 0.14);
  --eval-ontime-border: rgba(74, 200, 130, 0.32);
  --eval-late-rgb: 220, 90, 90;
  --eval-late: #d85a5a;
  --eval-late-text: #fca5a5;
  --eval-late-bg: rgba(220, 90, 90, 0.14);
  --eval-late-border: rgba(220, 90, 90, 0.35);
  --eval-soon-rgb: 230, 150, 60;
  --eval-soon: #e0963c;
  --eval-soon-text: #f0c080;
  --eval-soon-bg: rgba(230, 150, 60, 0.14);
  --eval-soon-border: rgba(230, 150, 60, 0.35);
  --eval-open-rgb: 110, 150, 190;
  --eval-open: #6e96be;
  --eval-open-text: #a8c4de;
  --eval-open-bg: rgba(110, 150, 190, 0.14);
  --eval-open-border: rgba(110, 150, 190, 0.35);
  --eval-neutral: var(--text-muted);
  --eval-delta-good: var(--eval-ontime-text);
  --eval-delta-bad: var(--eval-late-text);
  --eval-space: 14px;
  --eval-seg-active: #e8ebf0;
  --eval-seg-active-text: #18181b;
  --eval-radius: 10px;

  --status-red-rgb: 244, 92, 92;
  --status-red-text: #f8bcbc;
  --status-red-bg: rgba(var(--status-red-rgb), 0.14);
  --status-red-bg-subtle: rgba(var(--status-red-rgb), 0.10);
  --status-red-bg-medium: rgba(var(--status-red-rgb), 0.20);
  --status-red-bg-strong: rgba(var(--status-red-rgb), 0.32);
  --status-red-border: rgba(var(--status-red-rgb), 0.48);
  --status-red-delete-bg: rgba(var(--status-red-rgb), 0.18);

  --text-strong: #e8ebf0;
  --text: #c2c9d4;
  --text-muted: #9aa3b0;
  --text-placeholder: #6b7380;

  --shadow-card: 0 15px 35px rgba(0, 0, 0, 0.3);
  --shadow-panel: 0 14px 28px rgba(0, 0, 0, 0.35);
  --overlay: rgba(0, 0, 0, 0.55);
  --footer-bg: rgba(24, 24, 27, 0.96);
  --surface-btn: #27272a;
  --panel-search-bg: #27272a;
  --field-bg: #2c2e33;
  --field-bg-inset: var(--card);
  --field-input-bg: var(--card);
  --field-border-idle: transparent;
  --field-border-active: var(--border);
  --login-bg-top: #ed1c24;
  --login-bg-bottom: #242425;
  --login-card-bg: #1f1f1f;
  --login-card-shadow: 0 16px 48px rgba(0, 0, 0, 0.42);
  --row-hover: rgba(255, 255, 255, 0.04);
  --primary-soft: var(--status-red-bg);
  --primary-soft-hover: var(--status-red-bg-subtle);
  --attendance-absent-bg: #141414;
  --attendance-absent-bg-hover: #1a1a1a;
  --btn-on-primary: #f3f4f6;

  --scrollbar-track: #3d4249;
  --scrollbar-thumb: #565c66;
  --scrollbar-thumb-hover: #6b7280;
  --checkbox-accent: #6b7280;
  --email-row-success-bg: var(--status-green-bg);
  --email-row-success-bg-hover: var(--status-green-bg-hover);
  --email-row-failed-bg: var(--status-red-bg);
  --email-row-failed-bg-hover: var(--status-red-bg-medium);
  --email-send-btn-bg: var(--status-green-bg);
  --email-send-btn-bg-hover: var(--status-green-bg-hover);
  --email-send-btn-border: var(--status-green-border);
  --email-send-btn-text: var(--status-green-text);
}

/* نوار اسکرول اصلی صفحه (هماهنگ با تم) */
html,
body {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid var(--scrollbar-track);
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

* {
  font-family: Vazirmatn, sans-serif;
  direction: rtl;
}


* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Vazirmatn, sans-serif;
  background: var(--bg);
  color: var(--text);

  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.card {
  background: var(--card);
  padding: 35px;
  border-radius: 18px;
  width: min(360px, 100%);
  max-width: 100%;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;

  box-shadow: var(--shadow-card);
  color: var(--text);
}

/* تیتر */
.card h2 {
  margin-bottom: 20px;
  color: var(--text-strong);
}

.card--result .section-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  margin: 28px 0 12px;
  padding: 0;
  font-weight: 700;
  color: var(--text-strong);
  text-align: right;
  line-height: 1.35;
}

.card--result .section-title__leading {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.card--result .section-title__text {
  white-space: nowrap;
}

.card--result .section-title__rule {
  flex: 1 1 auto;
  height: 1px;
  min-width: 24px;
  background: currentColor;
  border: 0;
}

.card--result .result-page-title {
  display: block;
  width: 100%;
  margin: 0 0 8px;
  padding: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-strong);
  text-align: center;
  line-height: 1.35;
}

.card--result .status-box {
  text-align: start;
}

.card--result .section-title--main {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 1.25rem;
}

.card--result h3.section-title {
  font-size: 1rem;
}

.card--result .section-title--after-status {
  margin-top: 24px;
  margin-bottom: 12px;
}

.card--result .section-title__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: inherit;
}

.card--result .section-title--main .section-title__icon {
  width: 22px;
  height: 22px;
}

.card--result .section-title__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.login-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* ---------- صفحه ورود ---------- */



body.page-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;

  background-color: var(--login-bg-bottom); /* طوسی */
  
  
  background-image:
    linear-gradient(
      to bottom,
      var(--login-bg-top) 50%,
      transparent 50%,
      transparent 100%
    ),
    url('/assets/chimi.svg');

  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, 1000px 1000px;
}

.login-page {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card {
  width: min(100%, 380px);
  padding: 36px 32px 32px;
  border-radius: 16px;
  background: var(--login-card-bg);
  box-shadow: var(--login-card-shadow);
  color: var(--text);
  text-align: center;
}

.login-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
}

.login-card__logo img {
  width: min(168px, 62vw);
  height: auto;
  object-fit: contain;
}

body.page-login .login-form {
  text-align: right;
}

body.page-login .login-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}

body.page-login .login-field__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}

body.page-login .login-field input {
  width: 100%;
  margin: 0;
  padding: 10px 0;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-strong);
  font-size: 15px;
  transition: border-color 0.2s ease;
}

body.page-login .login-field input:focus {
  outline: none;
  border-bottom-color: var(--primary);
}

body.page-login .login-field input:-webkit-autofill,
body.page-login .login-field input:-webkit-autofill:hover,
body.page-login .login-field input:-webkit-autofill:focus,
body.page-login .login-field input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--text-strong);
  caret-color: var(--text-strong);
  border-bottom-color: var(--border);
  transition: background-color 99999s ease-out, color 99999s ease-out;
  box-shadow: 0 0 0 1000px var(--login-card-bg) inset;
}

body.page-login .login-field input:-webkit-autofill:focus {
  border-bottom-color: var(--primary);
}

body.page-login .login-form button {
  width: 88%;
  margin: 10px auto 0;
  padding: 14px 20px;
  border: none;
  border-radius: 999px;
  background: var(--primary);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

body.page-login .login-form button:hover:not(:disabled) {
  background: var(--primary-hover);
  transform: translateY(-1px);
}

body.page-login .login-form button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

@media (max-width: 480px) {
  .login-card {
    padding: 28px 22px 26px;
    border-radius: 14px;
  }

  .login-card__logo {
    margin-bottom: 26px;
  }

  body.page-login .login-form button {
    width: 100%;
  }
}

/* input ها */
input {
  width: 100%;
  padding: 14px;
  margin-bottom: 12px;

  border: 1px solid var(--field-border-idle);
  border-radius: 10px;

  background: var(--field-input-bg);
  color: var(--text);

  font-size: 14px;
  transition: border-color 0.15s ease;
}

textarea {
  width: 100%;
  padding: 14px;
  margin-bottom: 12px;
  border: 1px solid var(--field-border-idle);
  border-radius: 10px;
  background: var(--field-input-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}

input[type="checkbox"],
input[type="radio"] {
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  margin: 0;
  margin-bottom: 0;
  padding: 0;
  font-size: inherit;
  line-height: normal;
  background: transparent;
  border: none;
  border-radius: 0;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-placeholder);
  opacity: 1;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]):hover,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]):focus,
textarea:hover,
textarea:focus,
select:hover,
select:focus,
.input:hover,
.input:focus,
.textarea:hover,
.textarea:focus,
.custom-select__trigger.input:hover,
.custom-select__trigger.input:focus-visible,
.custom-select.is-open .custom-select__trigger.input,
.contact-picker__search:hover,
.contact-picker__search:focus,
.card--result textarea:hover,
.card--result textarea:focus,
.bot-modal .card--bot textarea:hover,
.bot-modal .card--bot textarea:focus,
.time-range .input--time-part:hover,
.time-range .input--time-part:focus,
.procurement-panel__input:hover,
.procurement-panel__input:focus,
.procurement-panel__select:hover,
.procurement-panel__select:focus,
.procurement-modal__input:hover,
.procurement-modal__input:focus,
.procurement-modal__select:hover,
.procurement-modal__select:focus,
.procurement-modal__textarea:hover,
.procurement-modal__textarea:focus,
.procurement-panel__search:hover,
.procurement-panel__search:focus-within,
.procurement-panel__filter-control--search:hover,
.procurement-panel__filter-control--search:focus-within,
.procurement-panel__date-field:hover,
.procurement-panel__date-field:focus-within,
.procurement-modal__date-field:hover,
.procurement-modal__date-field:focus-within {
  border-color: var(--field-border-active);
}

/* دکمه */
button {
  width: 100%;
  padding: 14px;

  margin-top: 5px;

  background: var(--primary);
  border: none;
  border-radius: 12px;

  color: var(--btn-on-primary);
  font-size: 15px;
  font-weight: bold;

  cursor: pointer;
  transition: 0.2s;
}

button:hover {
  background: var(--primary-hover);
  /* transform: translateY(-1px); */
}


/* عنوان بالای صفحه */
.title {
  position: absolute;
  top: 40px;
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 1px;
  color: var(--primary-hover);
}

/* container دکمه‌ها */
.menu {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
}

/* دکمه‌های بات */
.bot-btn {
  width: 100%;
  padding: 14px;

  background: var(--muted);
  border: 1px solid var(--border);

  border-radius: 12px;
  color: var(--text);

  font-size: 15px;
  cursor: pointer;
  transition: 0.2s;
}

.bot-btn:hover {
  background: var(--status-red-bg-medium);
  border-color: var(--primary);
}

a.bot-btn--link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}

/* Drop area */
.drop-area {
  width: 100%;
  border: 2px dashed var(--border);
  border-radius: 14px;
  padding: 25px;
  text-align: center;
  margin-top: 15px;

  transition: 0.2s;
  color: var(--text-muted);
}

.drop-area.dragover {
  background: var(--status-red-bg-subtle);
  border-color: var(--primary);
}

.drop-area.drop-area--error {
  border-color: var(--status-red);
  background: var(--status-red-bg-subtle);
  color: var(--status-red);
}

/* صفحه بات — آپلود + یادداشت تکمیلی */
body.has-app-topbar {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  min-height: 100vh;
  height: auto;
  padding: 8px 16px 48px;
}

body.page-home.has-app-topbar {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr;
  justify-content: stretch;
  align-items: stretch;
  padding: 8px 16px 24px;
  box-sizing: border-box;
}

body.page-home.has-app-topbar .app-topbar {
  width: 100%;
  grid-row: 1;
  margin-bottom: 0;
}

body.page-home.has-app-topbar > .card {
  grid-row: 2;
  align-self: center;
  justify-self: center;
  margin: 0;
}

body.page-bot {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  min-height: 100vh;
  height: auto;
  padding: 8px 16px 48px;
}

body.page-bot.has-app-topbar {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr;
  justify-content: stretch;
  align-items: stretch;
  padding: 8px 16px 24px;
  box-sizing: border-box;
}

body.page-bot.has-app-topbar .app-topbar {
  width: 100%;
  grid-row: 1;
  margin-bottom: 0;
}

body.page-bot.has-app-topbar > .card--bot-hub {
  grid-row: 2;
  align-self: center;
  justify-self: center;
  margin: 0;
}

body.page-bot .card--bot-hub,
body.page-bot .card--bot {
  align-items: stretch;
}

.bot-hub-menu {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.bot-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--overlay);
  overflow-y: auto;
}

.bot-modal-overlay[hidden] {
  display: none !important;
}

.bot-modal {
  position: relative;
  width: calc(360px * 1.5);
  max-width: 100%;
  max-height: min(92vh, 900px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.bot-modal__close {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text-muted);
  cursor: pointer;
}

.bot-modal__close:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}

.bot-modal__close svg {
  width: 18px;
  height: 18px;
  display: block;
}

.bot-modal .card--bot {
  width: 100%;
  margin: 0;
  padding-top: 44px;
}

.bot-manual-meeting-wrap {
  width: 100%;
  margin: 18px 0 0;
}

.bot-btn--manual {
  background: var(--surface);
  border-style: dashed;
  color: var(--text-muted);
  font-size: 14px;
}

.bot-btn--manual:hover:not(:disabled) {
  color: var(--text);
  background: var(--status-red-bg-medium);
}

body.bot-modal-open {
  overflow: hidden;
}

/* ---------- پاپ‌آپ تأیید (حذف و ...) ---------- */

.confirm-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 14000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--overlay);
}

.confirm-dialog-overlay[hidden] {
  display: none !important;
}

.confirm-dialog {
  width: min(460px, 100%);
  direction: rtl;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px 20px 18px;
  box-shadow: var(--shadow-card);
  color: var(--text);
}

.confirm-dialog__title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: var(--text-strong);
}

.confirm-dialog__message {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
  color: var(--text-muted);
  white-space: pre-line;
}

.confirm-dialog__actions {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.confirm-dialog__btn {
  width: auto;
  min-width: 96px;
  margin: 0;
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
}

.confirm-dialog__btn--cancel {
  background: var(--surface-btn);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.confirm-dialog__btn--cancel:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
  transform: none;
}

.confirm-dialog__btn--confirm {
  background: var(--surface-btn);
  border: 1px solid var(--border);
  color: var(--text);
}

.confirm-dialog__btn--confirm:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
  transform: none;
}

.confirm-dialog__btn--confirm.confirm-dialog__btn--danger {
  background: var(--status-red-bg-medium);
  border-color: var(--primary);
  color: var(--text);
}

.confirm-dialog__btn--confirm.confirm-dialog__btn--danger:hover {
  background: var(--status-red-bg-strong);
}

body.confirm-dialog-open {
  overflow: hidden;
}

/* ---------- نوتیف (Toast) ---------- */

.app-toast {
  position: fixed;
  inset-inline-end: 20px;
  bottom: 20px;
  z-index: 15000;
  display: flex;
  align-items: stretch;
  direction: rtl;
  width: min(252px, calc((100vw - 32px) * 0.7));
  min-height: 84px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.28s ease, transform 0.28s ease;
  overflow: hidden;
}

.app-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.app-toast__accent {
  flex: 0 0 5px;
  width: 5px;
  margin: 18px 0 18px 14px;
  border-radius: 999px;
  background: var(--toast-accent, var(--text-muted));
}

.app-toast__body {
  flex: 1;
  min-width: 0;
  padding: 16px 16px 16px 12px;
}

.app-toast__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.app-toast__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--toast-accent, var(--text-strong));
}

.app-toast__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.app-toast__close:hover {
  color: var(--text-strong);
  background: var(--field-bg);
}

.app-toast__message {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  text-align: right;
  word-break: break-word;
}

.app-toast--success {
  --toast-accent: var(--status-green-solid);
}

.app-toast--error {
  --toast-accent: var(--primary-hover);
}

.app-toast--warning {
  --toast-accent: #d97706;
}

.app-toast--info {
  --toast-accent: #2563eb;
}

@media (max-width: 640px) {
  .app-toast {
    inset-inline-end: 12px;
    bottom: 12px;
    width: calc((100vw - 24px) * 0.7);
  }
}

.bot-card__title {
  margin: 0 0 10px;
  text-align: center;
  color: var(--text-strong);
}

.bot-card__lead {
  margin: 0 0 20px;
  text-align: center;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
}

.bot-section {
  width: 100%;
  margin-bottom: 18px;
}

.bot-section__title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.card--bot .bot-section__title.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 6px;
}

.card--bot .section-title__leading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.card--bot .section-title__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--text-strong);
}

.card--bot .section-title__icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.card--bot .section-title__text {
  color: var(--text);
}

.card--bot .section-title__rule {
  display: none;
}

.bot-section__hint {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

.bot-modal .drop-area {
  margin-top: 0;
}

.bot-file-upload-error {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--status-red-border);
  background: var(--status-red-bg-subtle);
  color: var(--status-red);
  font-size: 13px;
  line-height: 1.5;
}

.bot-file-upload-error[hidden] {
  display: none !important;
}

.bot-modal .card--bot textarea {
  border: 1px solid var(--field-border-idle);
  border-radius: 10px;
  background: var(--field-input-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  box-sizing: border-box;
}

.bot-modal .card--bot .textarea--autosize {
  display: block;
  width: 100%;
  min-height: 48px;
  max-height: min(60vh, 480px);
  margin: 0;
  padding: 10px 14px;
  overflow-y: hidden;
  resize: none;
  line-height: 1.6;
  field-sizing: fixed;
}

.bot-modal .card--bot .textarea--autosize.textarea--single-line {
  padding: 0 14px;
  line-height: 48px;
  overflow: hidden;
}

.bot-modal .card--bot .textarea--autosize::placeholder {
  color: var(--text-placeholder);
}

.bot-file-chip-box {
  width: 100%;
  margin-top: 4px;
  margin-bottom: 18px;
}

.bot-file-actions-wrap {
  width: 100%;
  margin-top: 4px;
}

.bot-file-chip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 36px;
  gap: 10px;
  align-items: center;
  margin-bottom: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--field-bg);
}

.bot-file-chip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-strong);
}

.bot-file-chip__name {
  margin: 0;
  text-align: right;
  word-break: break-word;
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

.bot-file-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
}

.bot-file-chip__remove:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--status-red-bg);
}

.bot-file-chip__remove:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.bot-file-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

.bot-file-actions-wrap .retry-btn {
  margin-top: 10px;
}

.bot-progress {
  width: 100%;
  margin-top: 16px;
}

.bot-progress__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.bot-progress__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
  text-align: right;
}

.bot-progress__percent {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-strong);
  text-align: left;
  direction: ltr;
  unicode-bidi: plaintext;
}

.bot-modal .bot-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Progress */
.bot-progress .progress-bg {
  position: relative;
  width: 100%;
  height: 18px;
  direction: rtl;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-btn);
  overflow: hidden;
  isolation: isolate;
}

.bot-progress .progress-bar {
  position: absolute;
  right: 0;
  left: auto;
  top: 0;
  height: 100%;
  width: 0%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background-color: var(--primary);
  transition: width 0.15s ease;
  overflow: hidden;
}

.bot-progress .progress-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--primary);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 5px,
    rgba(0, 0, 0, 0.14) 5px,
    rgba(0, 0, 0, 0.14) 10px
  );
  background-size: 14px 14px;
  pointer-events: none;
}

.bot-progress .progress-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  pointer-events: none;
}

.bot-progress.is-processing .progress-bar::before {
  animation: bot-progress-stripes 0.65s linear infinite;
}

@keyframes bot-progress-stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 14px 0;
  }
}

/* cancel button (legacy — not used on bot page) */
.cancel-btn {
  margin-top: 10px;
  background: #dc2626;
}

.cancel-btn:hover {
  background: #b91c1c;
}

/* retry button */
.retry-btn {
  margin-top: 10px;
  background: #f59e0b;
}

.retry-btn:hover {
  background: #d97706;
}

.logo {
  margin-bottom: 20px;
}

.logo img {
  width: 200px;
  height: auto;
  object-fit: contain;
  border-radius: 0px;
}

/* .logo1 {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}

.logo1 img {
  width: 150px;
} */

.app-topbar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  margin: 0 0 8px;
  background: var(--bg);
  pointer-events: none;
}

.app-topbar > * {
  pointer-events: auto;
}

.logo1 {
  position: static;
  transform: none;
  flex-shrink: 0;
}

/* لوگوی HTML تا قبل از انتقال به سایدبار فلش نزند */
body.page-home > .logo1,
body.page-dashboard > .logo1,
body.page-procurement > .logo1,
body.page-actions > .logo1,
body.page-notifications > .logo1,
body.page-mail > .logo1,
body.page-result > .logo1,
.app-main > .logo1 {
  display: none;
}

.logo1 img {
  width: min(150px, 36vw);
  max-width: 150px;
  height: auto;
  display: block;
}

.logo1__img--compact {
  display: none;
}

.app-topbar__actions {
  display: flex;
  flex-direction: row;
  direction: ltr;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.app-topbar__user {
  max-width: min(240px, 40vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-btn);
}

.theme-toggle {
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-weight: inherit;
  flex: 0 0 auto;
  cursor: pointer;
  transition: none;
}

.theme-toggle:hover {
  background: transparent;
  transform: none;
}

.theme-toggle:focus-visible {
  outline: none;
}

.theme-toggle:focus-visible .theme-toggle__track {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.theme-toggle__track {
  position: relative;
  display: block;
  width: 52px;
  height: 28px;
  border-radius: 999px;
  background: #e4e4e7;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

[data-theme="dark"] .theme-toggle__track {
  background: #1a1a1a;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
}

.theme-toggle__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #1a1a1a;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
  transform: translateX(24px);
  transition: transform 0.25s ease, background 0.25s ease;
  pointer-events: none;
}

[data-theme="dark"] .theme-toggle__knob {
  transform: translateX(0);
  background: #ffffff;
}

.theme-toggle__icon {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  opacity: 0.85;
  pointer-events: none;
}

.theme-toggle__icon svg {
  display: block;
  width: 14px;
  height: 14px;
}

.theme-toggle__icon--sun {
  left: 8px;
  color: #1a1a1a;
  opacity: 1;
}

.theme-toggle__icon--moon {
  right: 8px;
  color: #71717a;
  opacity: 0.4;
}

[data-theme="dark"] .theme-toggle__icon--sun {
  color: var(--text-muted);
  opacity: 0.35;
}

[data-theme="dark"] .theme-toggle__icon--moon {
  color: var(--text-muted);
  opacity: 1;
}

.app-topbar__logout {
  width: 28px;
  height: 28px;
  min-width: 28px;
  max-width: 28px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-btn);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  font-weight: inherit;
  line-height: 0;
  flex: 0 0 28px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.app-topbar__logout svg {
  display: block;
  width: 14px;
  height: 14px;
}

.app-topbar__logout:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
  transform: none;
}

.app-topbar__logout:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ---------- سایدبار منو (سمت راست) ---------- */

/* سایدبار فیزیکی سمت راست است — همیشه padding-right (نه padding-inline-end که در RTL سمت چپ است) */
/* padding اولیه قبل از init — جلوگیری از جابجایی محتوا (مثلاً کارت میز کار) */
html[data-app-sidebar="collapsed"] body.page-home,
html[data-app-sidebar="collapsed"] body.page-dashboard,
html[data-app-sidebar="collapsed"] body.page-procurement,
html[data-app-sidebar="collapsed"] body.page-actions,
html[data-app-sidebar="collapsed"] body.page-notifications,
html[data-app-sidebar="collapsed"] body.page-mail,
html[data-app-sidebar="collapsed"] body.page-team,
html[data-app-sidebar="collapsed"] body.page-result,
html[data-app-sidebar="collapsed"] body.page-admin,
html[data-app-sidebar="collapsed"] body.page-org-chart,
html[data-app-sidebar="collapsed"] body.page-admin-users,
html[data-app-sidebar="collapsed"] body.page-admin-audit {
  padding-right: var(--app-sidebar-width-collapsed);
  padding-left: 0;
  box-sizing: border-box;
}

html[data-app-sidebar="open"] body.page-home,
html[data-app-sidebar="open"] body.page-dashboard,
html[data-app-sidebar="open"] body.page-procurement,
html[data-app-sidebar="open"] body.page-actions,
html[data-app-sidebar="open"] body.page-notifications,
html[data-app-sidebar="open"] body.page-mail,
html[data-app-sidebar="open"] body.page-team,
html[data-app-sidebar="open"] body.page-result,
html[data-app-sidebar="open"] body.page-admin,
html[data-app-sidebar="open"] body.page-org-chart,
html[data-app-sidebar="open"] body.page-admin-users,
html[data-app-sidebar="open"] body.page-admin-audit {
  padding-right: var(--app-sidebar-width);
  padding-left: 0;
  box-sizing: border-box;
}

html[data-app-sidebar="collapsed"] .app-sidebar {
  width: var(--app-sidebar-width-collapsed);
}

html[data-app-sidebar="open"] .app-sidebar {
  width: var(--app-sidebar-width);
}

html:not([data-app-sidebar-ready="1"]) body.has-app-sidebar.app-sidebar-drawer,
html:not([data-app-sidebar-ready="1"]) body.has-app-sidebar.app-sidebar-drawer .app-sidebar,
html:not([data-app-sidebar-ready="1"]) body.has-app-sidebar.app-sidebar-drawer .app-header,
html:not([data-app-sidebar-ready="1"]) body.has-app-sidebar.app-sidebar-drawer .page-loader,
html:not([data-app-sidebar-ready="1"]) body.has-app-sidebar.app-sidebar-drawer .result-footer {
  transition: none !important;
}

body.has-app-sidebar {
  display: block;
  min-height: 100vh;
  height: auto;
  padding: 0;
  padding-right: var(--app-sidebar-width-collapsed);
  padding-left: 0;
  box-sizing: border-box;
}

body.has-app-sidebar::before {
  content: "";
  position: fixed;
  top: var(--app-header-height);
  left: 0;
  right: 0;
  height: 0;
  border-bottom: 1px solid var(--border);
  z-index: 201;
  pointer-events: none;
}

.app-main {
  min-height: 100vh;
  box-sizing: border-box;
  padding: 16px 24px 48px;
}

body.has-app-page-header .app-main {
  padding-top: calc(var(--app-header-height) + 16px);
}

body.page-home.has-app-sidebar .app-main {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 100vh;
  padding: 0;
}

body.page-dashboard.has-app-sidebar .app-main,
body.page-procurement.has-app-sidebar .app-main,
body.page-actions.has-app-sidebar .app-main,
body.page-notifications.has-app-sidebar .app-main,
body.page-mail.has-app-sidebar .app-main,
body.page-result.has-app-sidebar .app-main {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: none;
}

body.page-dashboard.has-app-sidebar .app-main,
body.page-procurement.has-app-sidebar .app-main,
body.page-actions.has-app-sidebar .app-main,
body.page-notifications.has-app-sidebar .app-main,
body.page-mail.has-app-sidebar .app-main {
  padding-inline: 0;
}

body.page-dashboard.has-app-page-header .app-main,
body.page-procurement.has-app-page-header .app-main,
body.page-actions.has-app-page-header .app-main,
body.page-notifications.has-app-page-header .app-main,
body.page-home.has-app-page-header .app-main {
  padding-top: var(--app-header-height);
}

body.page-mail.has-app-page-header .app-main,
body.mail-page.has-app-page-header .app-main {
  padding-top: var(--app-header-height);
  padding-bottom: 0;
}

body.page-result.has-app-sidebar .app-main {
  padding: 16px 17px calc(96px + env(safe-area-inset-bottom, 0));
}

body.page-result.has-app-page-header .app-main {
  padding-top: calc(var(--app-header-height) + 16px);
}

.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: var(--app-sidebar-width);
  z-index: 210;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: var(--app-header-height);
  padding: 0 24px;
  box-sizing: border-box;
  background: var(--card);
}

.app-header.is-visible {
  display: flex;
}

.app-header__main {
  min-width: 0;
  flex: 1;
}

.app-header__title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-strong);
}

.app-header__meta {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}

.app-header__meta .procurement-panel__legend {
  margin-top: 2px;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.app-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

.app-header__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  margin: 0;
  width: auto;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.app-header__btn svg {
  flex-shrink: 0;
  display: block;
}

.app-header__btn--primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--btn-on-primary);
}

.app-header__btn--primary:hover:not(:disabled) {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.app-header__btn--danger {
  background: var(--status-red-delete-bg);
  border-color: var(--status-red-border);
  color: var(--status-red-text);
}

.app-header__btn--danger:hover:not(:disabled) {
  background: var(--status-red-bg-medium);
}

.app-header__btn:disabled,
.app-header__btn[hidden] {
  display: none;
}

.app-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 200;
  width: var(--app-sidebar-width-collapsed);
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: var(--card);
  border-left: 1px solid var(--border);
  box-shadow: none;
  overflow: hidden;
}

.app-sidebar__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--app-header-height);
  min-height: var(--app-header-height);
  padding: 0 16px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.app-sidebar__brand .logo1 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
}

.app-sidebar__brand .logo1__img--full {
  width: min(132px, 100%);
  max-width: 132px;
  height: auto;
  max-height: calc(var(--app-header-height) - 24px);
  display: block;
  object-fit: contain;
}

.app-sidebar__brand .logo1__img--compact {
  display: none;
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

.app-sidebar__nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app-sidebar__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 0;
  border: 0;
  border-block: 0;
  border-inline-end: 0;
  border-inline-start: 3px solid transparent;
  background: transparent;
  text-decoration: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  width: 100%;
  box-sizing: border-box;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.app-sidebar__link:hover {
  background: var(--status-red-bg-subtle);
  color: var(--text-strong);
}

.app-sidebar__link.is-active {
  background: var(--status-red-bg-medium);
  border-inline-start-color: var(--primary);
  color: var(--primary);
  font-weight: 700;
}

.app-sidebar__icon {
  flex-shrink: 0;
  display: block;
}

.app-sidebar__link-label {
  min-width: 0;
}

.app-sidebar__link-hint {
  margin-inline-start: 4px;
  font-size: 10.5px;
  font-weight: 400;
  color: var(--text-3);
  line-height: 1;
}

.app-sidebar__link-badge {
  margin-inline-start: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  flex-shrink: 0;
}

.app-sidebar__link-badge[hidden] {
  display: none !important;
}

.app-sidebar__separator {
  height: 1px;
  margin: 8px 16px;
  background: var(--border);
  flex-shrink: 0;
}

.app-sidebar__footer {
  flex-shrink: 0;
  box-sizing: border-box;
  height: 59px;
  padding: 0 12px;
  border-top: 1px solid var(--border);
  background: var(--card);
  display: flex;
  align-items: center;
}

.app-sidebar__toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  direction: ltr;
  width: 100%;
  min-height: 34px;
}

.app-sidebar__footer .theme-toggle {
  width: auto;
  margin-top: 0;
  padding: 0;
}

.app-sidebar__footer .app-sidebar__logout {
  width: 34px;
  min-width: 34px;
  max-width: 34px;
  height: 34px;
  min-height: 34px;
  max-height: 34px;
  flex: 0 0 34px;
  margin-top: 0;
  padding: 0;
  box-sizing: border-box;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
}

.app-sidebar__footer .theme-toggle:hover {
  transform: none;
}

.app-sidebar .theme-toggle__track {
  width: 46px;
  height: 24px;
}

.app-sidebar .theme-toggle__knob {
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  transform: translateX(22px);
}

[data-theme="dark"] .app-sidebar .theme-toggle__knob {
  transform: translateX(0);
}

.app-sidebar .theme-toggle__icon {
  width: 12px;
  height: 12px;
}

.app-sidebar .theme-toggle__icon svg {
  width: 12px;
  height: 12px;
}

.app-sidebar .theme-toggle__icon--sun {
  left: 7px;
}

.app-sidebar .theme-toggle__icon--moon {
  right: 7px;
}

.app-sidebar__user {
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #71717a);
  padding: 7px 12px;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.has-admin-shell .app-sidebar__user,
body.has-app-sidebar .app-sidebar__user {
  color: var(--text-muted, #71717a);
  font-weight: 600;
}

.app-sidebar__logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  margin-inline-start: auto;
  transform: none;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.app-sidebar__logout svg {
  width: 16px;
  height: 16px;
  display: block;
}

.app-sidebar__profile-trigger {
  overflow: hidden;
  padding: 0;
}

.app-sidebar__profile-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-btn);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

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

.app-sidebar__profile-avatar-initials {
  display: block;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.app-sidebar__logout:hover {
  transform: none;
  background: var(--status-red-bg-medium);
  border-color: var(--status-red-border);
  color: var(--status-red-text);
}

.app-sidebar__logout:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.user-profile-card {
  position: fixed;
  z-index: 1200;
  width: min(300px, calc(100vw - 16px));
  padding: 14px 12px 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow-panel);
  direction: rtl;
  text-align: right;
}

.user-profile-card[hidden] {
  display: none !important;
}

.user-profile-card__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

.user-profile-card__avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-btn);
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
}

.user-profile-card__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.user-profile-card__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-strong);
}

.user-profile-card__meta {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.user-profile-card__meta[hidden] {
  display: none !important;
}

.user-profile-card__actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-profile-card__item {
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  padding: 9px 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-align: right;
}

.user-profile-card__item:hover {
  background: var(--surface-btn);
}

.user-profile-card__item:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.user-profile-card__item-icon {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  flex: 0 0 16px;
}

.user-profile-card__item-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.user-profile-card__item-text {
  flex: 1 1 auto;
}

.user-profile-card__item--danger {
  color: var(--primary);
  font-weight: 600;
}

.user-profile-card__item--danger .user-profile-card__item-icon {
  color: var(--primary);
}

.user-profile-card__item--danger:hover {
  background: var(--status-red-delete-bg);
  color: var(--primary-hover);
}

.user-profile-card__item--danger:hover .user-profile-card__item-icon {
  color: var(--primary-hover);
}

body.has-app-sidebar.page-dashboard,
body.has-app-sidebar.page-procurement,
body.has-app-sidebar.page-actions,
body.has-app-sidebar.page-notifications,
body.has-app-sidebar.page-mail,
body.has-app-sidebar.page-result,
body.has-app-sidebar.page-home {
  padding-left: 0;
}

body.has-app-sidebar.page-dashboard:not(.app-sidebar-drawer),
body.has-app-sidebar.page-procurement:not(.app-sidebar-drawer),
body.has-app-sidebar.page-actions:not(.app-sidebar-drawer),
body.has-app-sidebar.page-notifications:not(.app-sidebar-drawer),
body.has-app-sidebar.page-mail:not(.app-sidebar-drawer),
body.has-app-sidebar.page-result:not(.app-sidebar-drawer),
body.has-app-sidebar.page-home:not(.app-sidebar-drawer) {
  padding: 0;
  padding-right: var(--app-sidebar-width);
  padding-left: 0;
}

.procurement-panel.history-panel,
.procurement-panel:not(.history-card) {
  width: 100%;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.logo1--home-link {
  cursor: pointer;
}

.logo1--home-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
  border-radius: 8px;
}

/* داشبورد */
body.page-dashboard:not(.has-app-sidebar) {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: auto;
  min-height: 100vh;
  padding: 8px 16px 48px;
}

body.page-dashboard.has-app-sidebar {
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  height: auto;
  min-height: 100vh;
}

body.page-dashboard.has-app-sidebar:not(.app-sidebar-drawer) {
  padding: 0;
  padding-right: var(--app-sidebar-width);
  padding-left: 0;
}

/* سایدبار جمع‌شونده (تمام صفحات) */
.app-sidebar__toggle {
  position: absolute;
  left: 0;
  top: auto;
  bottom: calc(68px + env(safe-area-inset-bottom, 0));
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-btn);
  color: var(--text-muted);
  box-shadow: none;
  cursor: pointer;
  transform: translateX(-50%);
  transition: border-color 0.2s, background 0.2s, color 0.2s, opacity 0.2s;
}

.app-sidebar__toggle:hover {
  transform: translateX(-50%);
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 16%, var(--surface-btn));
  color: var(--text);
}

.app-sidebar__toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.app-sidebar__toggle-icon {
  display: block;
  flex-shrink: 0;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-sidebar__toggle[aria-expanded="true"] .app-sidebar__toggle-icon {
  transform: rotate(180deg);
}

body.has-app-sidebar.app-sidebar-drawer {
  padding-right: var(--app-sidebar-width-collapsed);
  transition: padding-right 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

body.has-app-sidebar.app-sidebar-drawer.app-sidebar-open {
  padding-right: var(--app-sidebar-width);
}

body.has-app-sidebar.app-sidebar-drawer .app-sidebar {
  width: var(--app-sidebar-width-collapsed);
  overflow: visible;
  transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

body.has-app-sidebar.app-sidebar-drawer.app-sidebar-open .app-sidebar {
  width: var(--app-sidebar-width);
}

body.has-app-sidebar.app-sidebar-drawer:not(.app-sidebar-open) .app-sidebar__brand .logo1__img--full {
  display: none;
}

body.has-app-sidebar.app-sidebar-drawer:not(.app-sidebar-open) .app-sidebar__brand .logo1__img--compact {
  display: block;
  width: 48px;
  max-width: 48px;
  max-height: calc(var(--app-header-height) - 24px);
}

body.has-app-sidebar.app-sidebar-drawer:not(.app-sidebar-open) .app-sidebar__nav {
  padding: 10px 0;
}

body.has-app-sidebar.app-sidebar-drawer:not(.app-sidebar-open) .app-sidebar__link {
  position: relative;
  justify-content: center;
  padding: 12px 8px;
}

body.has-app-sidebar.app-sidebar-drawer:not(.app-sidebar-open) .app-sidebar__link-label,
body.has-app-sidebar.app-sidebar-drawer:not(.app-sidebar-open) .app-sidebar__user,
body.has-app-sidebar.app-sidebar-drawer:not(.app-sidebar-open) .theme-toggle {
  display: none;
}

body.has-app-sidebar.app-sidebar-drawer:not(.app-sidebar-open) .app-sidebar__link-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  margin: 0;
}

body.has-app-sidebar.app-sidebar-drawer:not(.app-sidebar-open) .app-sidebar__footer {
  height: auto;
  min-height: 59px;
  padding: 10px 6px calc(10px + env(safe-area-inset-bottom, 0));
}

body.has-app-sidebar.app-sidebar-drawer:not(.app-sidebar-open) .app-sidebar__toolbar {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

body.has-app-sidebar.app-sidebar-drawer:not(.app-sidebar-open) .app-sidebar__logout {
  margin-inline-start: 0;
}

body.has-app-sidebar.app-sidebar-drawer .app-header {
  right: var(--app-sidebar-width-collapsed);
  transition: right 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

body.has-app-sidebar.app-sidebar-drawer.app-sidebar-open .app-header {
  right: var(--app-sidebar-width);
}

body.has-app-sidebar.app-sidebar-drawer .page-loader {
  right: var(--app-sidebar-width-collapsed);
  transition: right 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

body.has-app-sidebar.app-sidebar-drawer.app-sidebar-open .page-loader {
  right: var(--app-sidebar-width);
}

body.has-app-sidebar.app-sidebar-drawer .result-footer {
  right: var(--app-sidebar-width-collapsed);
  transition: right 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

body.has-app-sidebar.app-sidebar-drawer.app-sidebar-open .result-footer {
  right: var(--app-sidebar-width);
}

body.has-app-sidebar.app-sidebar-drawer .admin-header {
  right: var(--app-sidebar-width-collapsed);
  transition: right 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

body.has-app-sidebar.app-sidebar-drawer.app-sidebar-open .admin-header {
  right: var(--app-sidebar-width);
}

@media (max-width: 768px) {
  body.has-app-sidebar.app-sidebar-drawer.app-sidebar-open {
    padding-right: var(--app-sidebar-width);
  }

  body.has-app-sidebar.app-sidebar-drawer.app-sidebar-open .app-sidebar {
    width: var(--app-sidebar-width);
  }

  body.has-app-sidebar.app-sidebar-drawer.app-sidebar-open .app-header {
    right: var(--app-sidebar-width);
  }

  body.has-app-sidebar.app-sidebar-drawer.app-sidebar-open .admin-header {
    right: var(--app-sidebar-width);
  }

  body.has-app-sidebar.app-sidebar-drawer.app-sidebar-open .page-loader {
    right: var(--app-sidebar-width);
  }

  body.has-app-sidebar.app-sidebar-drawer.app-sidebar-open .result-footer {
    right: var(--app-sidebar-width);
  }
}

.nav-back {
  position: absolute;
  top: 96px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  opacity: 0.9;
}

.nav-back:hover {
  color: var(--primary);
  text-decoration: underline;
}

.jobs-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
  max-width: 960px;
  margin: 72px auto 0;
  justify-content: center;
}

.jobs-empty {
  width: 100%;
  text-align: center;
  color: var(--text-muted);
  margin-top: 24px;
}

.job-card {
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 22px;
  width: 280px;
  max-width: 100%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.job-card h3 {
  margin: 0 0 10px;
  font-size: 15px;
  word-break: break-all;
  color: var(--text);
}

.job-card__status {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--text-muted);
}

.job-card__btn {
  margin-top: 0;
}

.card--wide {
  width: min(1200px, 92vw);
  max-width: 92vw;
  align-items: stretch;
}

.result-text {
  white-space: pre-line;
  margin-top: 20px;
  width: 100%;
  text-align: right;
  line-height: 1.7;
  color: var(--text-muted);
}

.toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.textarea {
  width: 100%;
  min-height: 80px;
  margin-bottom: 15px;
}

.card--result textarea {
  border: 1px solid var(--field-border-idle);
  border-radius: 10px;
  background: var(--field-input-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  box-sizing: border-box;
}

/* هم‌راستا با ستون شماره اعضا / وظایف (۴۸px + ۸px فاصله) */
.card--result {
  --result-list-content-inset: 56px;
}

.card--result #summary,
.card--result #additionalNotes,
.card--result .result-row--next-meeting,
.card--result .result-row--next-meeting-topics {
  margin-inline-start: var(--result-list-content-inset);
  width: calc(100% - var(--result-list-content-inset));
  max-width: calc(100% - var(--result-list-content-inset));
  box-sizing: border-box;
}

.result-meeting-info {
  display: grid;
  grid-template-columns: 48px auto minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: repeat(6, auto);
  column-gap: 10px;
  row-gap: 6px;
  align-items: center;
  width: 100%;
  margin-bottom: 14px;
  box-sizing: border-box;
}

.result-meeting-info__gutter {
  grid-column: 1;
  grid-row: 1 / span 6;
  width: 48px;
  min-width: 48px;
  max-width: 48px;
}

.result-meeting-field {
  display: contents;
}

.result-meeting-field__label {
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  line-height: 1.3;
  text-align: right;
  justify-self: stretch;
  align-self: center;
}

.result-meeting-field__control {
  min-width: 0;
  align-self: center;
}

.result-meeting-field--title .result-meeting-field__label {
  grid-column: 2;
  grid-row: 1;
}

.result-meeting-field--title .result-meeting-field__control {
  grid-column: 3 / 6;
  grid-row: 1;
}

.result-meeting-field--meeting-number .result-meeting-field__label {
  grid-column: 2;
  grid-row: 2;
}

.result-meeting-field--meeting-number .result-meeting-field__control {
  grid-column: 3;
  grid-row: 2;
}

.result-meeting-field--meeting-type .result-meeting-field__label {
  grid-column: 4;
  grid-row: 2;
}

.result-meeting-field--meeting-type .result-meeting-field__control {
  grid-column: 5;
  grid-row: 2;
}

.result-meeting-field--date .result-meeting-field__label {
  grid-column: 2;
  grid-row: 3;
}

.result-meeting-field--date .result-meeting-field__control {
  grid-column: 3;
  grid-row: 3;
}

.result-meeting-field--meeting-level .result-meeting-field__label {
  grid-column: 4;
  grid-row: 3;
}

.result-meeting-field--meeting-level .result-meeting-field__control {
  grid-column: 5;
  grid-row: 3;
}

.result-meeting-field.result-field--time-start .result-meeting-field__label {
  grid-column: 2;
  grid-row: 4;
}

.result-meeting-field.result-field--time-start .result-meeting-field__control {
  grid-column: 3;
  grid-row: 4;
}

.result-meeting-field--organizer .result-meeting-field__label {
  grid-column: 4;
  grid-row: 4;
}

.result-meeting-field--organizer .result-meeting-field__control {
  grid-column: 5;
  grid-row: 4;
}

.result-meeting-field.result-field--time-end .result-meeting-field__label {
  grid-column: 2;
  grid-row: 5;
}

.result-meeting-field.result-field--time-end .result-meeting-field__control {
  grid-column: 3;
  grid-row: 5;
}

.result-meeting-field--chairman .result-meeting-field__label {
  grid-column: 4;
  grid-row: 5;
}

.result-meeting-field--chairman .result-meeting-field__control {
  grid-column: 5;
  grid-row: 5;
}

.result-meeting-field--location .result-meeting-field__label {
  grid-column: 2;
  grid-row: 6;
}

.result-meeting-field--location .result-meeting-field__control {
  grid-column: 3;
  grid-row: 6;
}

.result-meeting-field--secretary .result-meeting-field__label {
  grid-column: 4;
  grid-row: 6;
}

.result-meeting-field--secretary .result-meeting-field__control {
  grid-column: 5;
  grid-row: 6;
}

.result-meeting-field__control .custom-select {
  width: 100%;
  min-width: 0;
}

.result-meeting-field__control .date-field,
.result-meeting-field__control .result-person-field,
.result-meeting-field__control .result-location-field {
  width: 100%;
  min-width: 0;
}

.result-meeting-info .input.input--status,
.result-meeting-info .input.input--date,
.result-meeting-info .custom-select__trigger.input.input--status {
  width: 100%;
  margin-bottom: 0;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.4;
  min-height: 42px;
  box-sizing: border-box;
  background: var(--field-input-bg);
}

.result-meeting-info .time-range {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  min-height: 42px;
  box-sizing: border-box;
  direction: ltr;
  unicode-bidi: isolate;
}

.result-meeting-info .time-range .input--time-part {
  flex: 0 0 52px;
  width: 52px;
  min-width: 48px;
  max-width: 56px;
  margin-bottom: 0;
  min-height: 42px;
  height: 42px;
  box-sizing: border-box;
  background: var(--field-input-bg);
}

.result-meeting-info .custom-select__trigger.input.input--status:hover,
.result-meeting-info .custom-select.is-open .custom-select__trigger.input.input--status {
  background: var(--field-input-bg);
  border-color: var(--field-border-active);
  transform: none;
}

.result-field--time-invalid .result-meeting-field__label {
  color: var(--primary);
}

.card--result .textarea--autosize {
  display: block;
  min-height: 48px;
  max-height: min(60vh, 480px);
  margin-bottom: 15px;
  padding: 10px 14px;
  overflow-y: auto;
  resize: none;
  line-height: 1.6;
  field-sizing: content;
}

.card--result #summary.textarea--autosize {
  field-sizing: fixed;
}

.card--result #summary.textarea--autosize.textarea--single-line {
  padding: 0 14px;
  line-height: 48px;
  overflow: hidden;
}

.input {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
}

.actions-box {
  width: 100%;
  margin-bottom: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.result-row--next-meeting {
  grid-template-columns: minmax(0, 1fr);
}

.result-row--next-meeting-topics {
  margin-bottom: 8px;
}

.result-field--next-meeting-date,
.result-field--next-meeting-topics {
  width: 100%;
  margin-bottom: 0;
}

.result-field--next-meeting-date {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
  direction: rtl;
  width: 100%;
}

.result-field--next-meeting-date .field-label {
  grid-column: 1;
  grid-row: 1;
  display: block;
  width: auto;
  margin: 0;
  white-space: nowrap;
  text-align: right;
  line-height: 1.3;
  justify-self: stretch;
  align-self: center;
}

.result-field--next-meeting-date .next-meeting-date-field {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  width: auto;
  max-width: 136px;
}

.result-field--next-meeting-topics .field-label {
  margin-bottom: 8px;
}

.result-field--next-meeting-topics .textarea--autosize {
  margin-bottom: 0;
}

.next-meeting-date-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 136px;
}

.next-meeting-date-field .input--next-meeting-date {
  flex: 0 0 100px;
  width: 100px;
  min-width: 100px;
  max-width: 100px;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  margin: 0;
  padding: 8px 10px;
  line-height: 1.4;
  box-sizing: border-box;
}

.action-row {
  display: grid;
  grid-template-columns:
    48px
    minmax(0, 1fr)
    28px
    180px
    92px
    32px
    28px
    180px
    32px;
  gap: 8px;
  align-items: center;
  direction: rtl;
  margin-bottom: 0;
  padding-bottom: 0;
  min-width: 0;
}

.action-row > .result-row__order {
  grid-column: 1;
  grid-row: 1;
}

.action-row > .action-input--task {
  grid-column: 2;
  grid-row: 1;
}

.action-row > .action-input--owner {
  grid-column: 4;
  grid-row: 1;
}

.action-row > .action-input--deadline {
  grid-column: 5;
  grid-row: 1;
}

.action-row > .action-deadline-picker {
  grid-column: 6;
  grid-row: 1;
}

.action-row > .action-input--follow-up {
  grid-column: 8;
  grid-row: 1;
}

.action-row > .action-row-remove {
  grid-column: 9;
  grid-row: 1;
}

.action-row > .action-row__owner-avatar {
  grid-column: 3;
  grid-row: 1;
}

.action-row > .action-row__follow-up-avatar {
  grid-column: 7;
  grid-row: 1;
}

.action-row .input,
.action-row .textarea--autosize {
  margin: 0;
  margin-bottom: 0;
  padding: 8px 10px;
  line-height: 1.4;
  box-sizing: border-box;
}

.action-row .input:not(.textarea--autosize) {
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  padding: 0 10px;
  line-height: 42px;
}

.card--result .action-row .textarea--autosize {
  min-height: 42px;
  max-height: min(40vh, 320px);
  resize: none;
  field-sizing: fixed;
}

.card--result .decision-row .textarea--autosize.textarea--single-line,
.card--result .action-row .textarea--autosize.textarea--single-line,
.card--result .agenda-row .textarea--autosize.textarea--single-line {
  padding: 0 10px;
  line-height: 42px;
  overflow: hidden;
}

.action-row .action-input--owner,
.action-row .action-input--follow-up,
.action-row .action-input--deadline {
  width: 100%;
  min-width: 0;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  margin: 0;
  padding: 0 10px;
  line-height: 42px;
  box-sizing: border-box;
}

.action-row .action-input--deadline {
  width: 100%;
  min-width: 0;
  max-width: none;
}

.card--result .action-row .action-input--task {
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
}

.action-deadline-picker {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.action-row-remove {
  flex-shrink: 0;
  align-self: center;
}

.decisions-box {
  width: 100%;
  margin-bottom: 8px;
}

.agenda-box {
  width: 100%;
  margin-bottom: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.agenda-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 36px;
  gap: 8px;
  align-items: center;
  direction: rtl;
  margin-bottom: 0;
  padding-bottom: 0;
  min-width: 0;
}

.agenda-row > .result-row__order {
  grid-column: 1;
  grid-row: 1;
}

.agenda-row > .agenda-input--text {
  grid-column: 2;
  grid-row: 1;
}

.agenda-row > .agenda-row-remove {
  grid-column: 3;
  grid-row: 1;
}

.agenda-row .input,
.agenda-row .textarea--autosize {
  margin: 0;
  margin-bottom: 0;
  padding: 8px 10px;
  width: 100%;
  min-width: 0;
  line-height: 1.4;
  box-sizing: border-box;
}

.card--result .agenda-row .textarea--autosize {
  min-height: 42px;
  max-height: min(40vh, 320px);
  resize: none;
  field-sizing: fixed;
}

.agenda-row-remove {
  flex-shrink: 0;
  align-self: center;
}

.decision-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 36px;
  gap: 8px;
  align-items: center;
  direction: rtl;
  margin-bottom: 0;
  padding-bottom: 0;
  min-width: 0;
}

.decision-row > .result-row__order {
  grid-column: 1;
  grid-row: 1;
}

.decision-row > .decision-input--text {
  grid-column: 2;
  grid-row: 1;
}

.decision-row > .decision-row-remove {
  grid-column: 3;
  grid-row: 1;
}

.decision-row .input,
.decision-row .textarea--autosize {
  margin: 0;
  margin-bottom: 0;
  padding: 8px 10px;
  width: 100%;
  min-width: 0;
  line-height: 1.4;
  box-sizing: border-box;
}

.decision-row .input:not(.textarea--autosize) {
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  padding: 0 10px;
  line-height: 42px;
}

.card--result .decision-row .textarea--autosize {
  min-height: 42px;
  max-height: min(40vh, 320px);
  resize: none;
  field-sizing: fixed;
}

.decision-row-remove {
  flex-shrink: 0;
  align-self: center;
}

.result-row__rule {
  grid-column: 2 / -1;
  grid-row: 1;
  align-self: end;
  height: 1px;
  background: var(--border);
  pointer-events: none;
}

.attendees-box,
.cc-recipients-box {
  width: 100%;
  margin-bottom: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.attendee-row {
  display: grid;
  grid-template-columns: 48px 28px 1fr 1fr 1.2fr 36px 36px;
  gap: 8px;
  align-items: center;
  direction: rtl;
  margin-bottom: 0;
  padding-bottom: 0;
}

.attendee-row > .result-row__order {
  grid-column: 1;
  grid-row: 1;
}

.attendee-row > .attendee-input--name {
  grid-column: 3;
  grid-row: 1;
}

.attendee-row > .attendee-input--role {
  grid-column: 4;
  grid-row: 1;
}

.attendee-row > .attendee-email-field {
  grid-column: 5;
  grid-row: 1;
  min-width: 0;
}

.attendee-row > .attendance-toggle {
  grid-column: 6;
  grid-row: 1;
}

.attendee-row > .attendee-row-remove {
  grid-column: 7;
  grid-row: 1;
}

.attendee-row > .attendee-row__avatar {
  grid-column: 2;
  grid-row: 1;
}

/* ---------- رونوشت (صفحه نتیجه — هم‌ظاهر با اعضای جلسه) ---------- */

.cc-recipient-row {
  display: grid;
  grid-template-columns: 48px 28px 1fr 1fr 1.2fr 36px 36px;
  gap: 8px;
  align-items: center;
  direction: rtl;
  margin-bottom: 0;
  padding-bottom: 0;
}

.cc-recipient-row > .result-row__order {
  grid-column: 1;
  grid-row: 1;
}

.cc-recipient-row > .attendee-input--name {
  grid-column: 3;
  grid-row: 1;
}

.cc-recipient-row > .attendee-input--role {
  grid-column: 4;
  grid-row: 1;
}

.cc-recipient-row > .attendee-email-field {
  grid-column: 5;
  grid-row: 1;
  min-width: 0;
}

.cc-recipient-row > .cc-recipient-row__attendance-spacer {
  grid-column: 6;
  grid-row: 1;
  visibility: hidden;
  pointer-events: none;
  border: none;
  background: transparent;
}

.cc-recipient-row > .cc-recipient-row-remove {
  grid-column: 7;
  grid-row: 1;
}

.cc-recipient-row > .cc-recipient-row__avatar {
  grid-column: 2;
  grid-row: 1;
}

.cc-recipient-row::after {
  content: "";
  grid-column: 2 / -1;
  grid-row: 1;
  align-self: end;
  height: 1px;
  background: var(--border);
  pointer-events: none;
}

.cc-recipient-row .input,
.cc-recipient-row .attendee-input--name,
.cc-recipient-row .attendee-input--role,
.cc-recipient-row .attendee-email-field .attendee-input--email {
  width: 100%;
  min-width: 0;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  margin: 0;
  padding: 8px 10px;
  line-height: 1.4;
  box-sizing: border-box;
}

.result-row__order {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  height: 42px;
}

.result-row__index {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--row-hover);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  box-sizing: border-box;
}

.result-row__reorder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  opacity: 0;
  transform: translateX(2px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.attendee-row:hover .result-row__reorder,
.attendee-row:focus-within .result-row__reorder,
.cc-recipient-row:hover .result-row__reorder,
.cc-recipient-row:focus-within .result-row__reorder,
.agenda-row:hover .result-row__reorder,
.agenda-row:focus-within .result-row__reorder,
.decision-row:hover .result-row__reorder,
.decision-row:focus-within .result-row__reorder,
.action-row:hover .result-row__reorder,
.action-row:focus-within .result-row__reorder {
  opacity: 1;
  transform: translateX(0);
}

.result-row-reorder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 14px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.result-row-reorder:hover:not(:disabled) {
  color: var(--text-strong);
  background: var(--row-hover);
}

.result-row-reorder:disabled {
  opacity: 0.25;
  cursor: default;
}

body.page-result .result-row-reorder:hover:not(:disabled) {
  transform: none;
}

@media (hover: none) {
  .result-row__reorder {
    opacity: 0.55;
    transform: none;
  }
}

.attendee-row .input,
.attendee-row .attendee-input--name,
.attendee-row .attendee-input--role,
.cc-recipient-row .input,
.cc-recipient-row .attendee-input--name,
.cc-recipient-row .attendee-input--role,
.attendee-email-field .attendee-input--email {
  width: 100%;
  min-width: 0;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  margin: 0;
  padding: 8px 10px;
  line-height: 1.4;
  box-sizing: border-box;
}

.attendee-email-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.attendee-email-field .attendee-input--email {
  flex: 1;
  min-width: 0;
}

.attendee-email-field--invalid .attendee-input--email {
  border-color: var(--primary);
}

.attendee-email-field .attendee-input--email:valid,
.attendee-email-field .attendee-input--email[data-email-mx="valid"] {
  background: var(--field-input-bg);
  box-shadow: none;
}

.attendee-email-field .attendee-input--email:-webkit-autofill,
.attendee-email-field .attendee-input--email:-webkit-autofill:valid {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  transition: background-color 99999s ease-out;
  box-shadow: 0 0 0 1000px var(--field-input-bg) inset;
}

.attendee-contact-picker {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-width: 36px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--field-bg);
  color: var(--text-muted);
  cursor: pointer;
}

.attendee-contact-picker:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--status-red-bg);
}

body.page-result .attendee-contact-picker {
  width: 36px;
  min-width: 36px;
  height: 42px;
  min-height: 42px;
  margin-top: 0;
  padding: 0;
  font-weight: normal;
}

body.page-result .attendee-contact-picker:hover {
  transform: none;
}

.attendance-toggle.is-present {
  background: var(--status-green-solid);
  border-color: var(--status-green-text);
  color: var(--btn-on-primary);
}

.attendance-toggle.is-present:hover {
  background: var(--status-green-solid-hover);
  border-color: var(--status-green-solid);
  color: var(--btn-on-primary);
}

html[data-theme="dark"] body.page-result .attendance-toggle.is-present {
  background: transparent;
  border-color: var(--status-green);
  color: var(--status-green);
}

html[data-theme="dark"] body.page-result .attendance-toggle.is-present:hover {
  background: var(--status-green-bg);
  border-color: var(--status-green-border);
  color: var(--status-green-text);
}

.attendance-toggle.is-absent {
  background: var(--attendance-absent-bg);
  border-color: var(--border);
  color: var(--text-muted);
}

.attendance-toggle.is-absent:hover {
  background: var(--attendance-absent-bg-hover);
  border-color: var(--border);
  color: var(--text-muted);
}

body.page-result .attendance-toggle.is-present:hover,
body.page-result .attendance-toggle.is-absent:hover {
  transform: none;
}

body.page-result .attendee-row .attendee-contact-picker,
body.page-result .decision-row .attendee-contact-picker,
body.page-result .agenda-row .attendee-contact-picker,
body.page-result .cc-recipient-row .attendee-contact-picker,
body.page-result .action-row .attendee-contact-picker,
body.page-result .action-row .action-deadline-picker,
body.page-result .next-meeting-date-field .action-deadline-picker {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  margin-top: 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-weight: normal;
  transition: background-color 0.15s ease, color 0.15s ease;
}

body.page-result .attendee-row .attendee-contact-picker:hover,
body.page-result .decision-row .attendee-contact-picker:hover,
body.page-result .agenda-row .attendee-contact-picker:hover,
body.page-result .cc-recipient-row .attendee-contact-picker:hover,
body.page-result .action-row .attendee-contact-picker:hover,
body.page-result .action-row .action-deadline-picker:hover,
body.page-result .next-meeting-date-field .action-deadline-picker:hover {
  transform: none;
  border: none;
  background: var(--row-hover);
  color: var(--text-strong);
}

body.page-result .attendee-row .attendee-row-remove:hover,
body.page-result .decision-row .decision-row-remove:hover,
body.page-result .agenda-row .agenda-row-remove:hover,
body.page-result .cc-recipient-row .cc-recipient-row-remove:hover,
body.page-result .action-row .action-row-remove:hover {
  color: var(--primary);
  background: var(--row-hover);
  border: none;
}

body.page-result .attendee-row .attendee-contact-picker svg,
body.page-result .decision-row .attendee-contact-picker svg,
body.page-result .agenda-row .attendee-contact-picker svg,
body.page-result .cc-recipient-row .attendee-contact-picker svg,
body.page-result .action-row .attendee-contact-picker svg,
body.page-result .action-row .action-deadline-picker svg,
body.page-result .next-meeting-date-field .action-deadline-picker svg {
  display: block;
  flex-shrink: 0;
}

body.page-result .attendee-row .attendance-toggle.is-present {
  color: var(--status-green-solid);
  background: transparent;
  border: none;
}

body.page-result .attendee-row .attendance-toggle.is-present:hover {
  color: var(--status-green-solid-hover);
  background: var(--row-hover);
  border: none;
}

html[data-theme="dark"] body.page-result .attendee-row .attendance-toggle.is-present {
  color: var(--status-green-solid);
  background: transparent;
  border: none;
}

html[data-theme="dark"] body.page-result .attendee-row .attendance-toggle.is-present:hover {
  color: var(--status-green-text);
  background: var(--row-hover);
  border: none;
}

body.page-result .attendee-row .attendance-toggle.is-absent {
  color: var(--text-muted);
  background: transparent;
  border: none;
}

body.page-result .attendee-row .attendance-toggle.is-absent:hover {
  color: var(--text-muted);
  background: var(--row-hover);
  border: none;
}

.attendee-row-remove,
.decision-row-remove,
.agenda-row-remove,
.cc-recipient-row-remove,
.action-row-remove {
  flex-shrink: 0;
}

.btn-secondary {
  padding: 8px 12px;
  background: #eee;
  text-decoration: none;
  border-radius: 6px;
}

/* ---------- صفحه نتیجه جلسه ---------- */

body.page-result {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  min-height: 100vh;
  height: auto;
  padding: 8px 16px 96px;
}

.card--result {
  align-items: stretch;
}

.status-box {
  width: 100%;
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.result-field {
  width: 100%;
  margin-bottom: 0;
  min-width: 0;
}

.result-row {
  display: grid;
  gap: 10px;
  width: 100%;
  margin-bottom: 14px;
  align-items: end;
}

.result-field--date .date-field {
  width: 100%;
}

.result-field--grow-30 {
  min-width: 0;
}

.result-field .date-field {
  width: 100%;
}

.result-person-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  min-width: 0;
  width: 100%;
}

.result-person-field .input {
  flex: 1;
  min-width: 0;
}

.result-person-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--muted);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}

.result-person-avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.result-person-avatar__initials {
  line-height: 1;
}

.result-field--time-invalid .time-range .input--time-part {
  border-color: var(--primary);
}

.contact-picker__group {
  padding: 8px 10px 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-strong);
  text-align: right;
}

.contact-picker__group:first-child {
  padding-top: 2px;
}

.location-picker .contact-picker__item {
  flex-direction: row;
  justify-content: flex-start;
}

.location-picker .contact-picker__item-name {
  flex: 1;
  text-align: right;
}

.time-range {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  width: fit-content;
  min-width: 0;
  direction: ltr;
  unicode-bidi: isolate;
}

.time-range .input--time-hour {
  order: 1;
}

.time-range__sep {
  order: 2;
}

.time-range .input--time-minute {
  order: 3;
}

.time-range__sep {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  user-select: none;
}

.input--time-part {
  width: 52px;
  min-width: 52px;
  max-width: 52px;
  text-align: center;
  padding-left: 6px;
  padding-right: 6px;
}

body.page-result .time-range .input--time-part {
  cursor: pointer;
}

/* ---------- پاپ‌آپ ساعت ---------- */

.time-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  background: transparent;
}

.time-picker-overlay--anchored {
  display: block;
  pointer-events: auto;
}

.time-picker {
  width: min(256px, calc(100vw - 16px));
  direction: rtl;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 13px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.07);
  color: var(--text);
}

.time-picker--anchored {
  position: fixed;
  z-index: 20001;
  margin: 0;
  pointer-events: auto;
}

.time-picker__head {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: var(--text-strong);
}

.time-picker__preview {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--field-bg);
  border: 1px solid var(--border);
  font-size: 18px;
  font-weight: 700;
  direction: ltr;
  unicode-bidi: isolate;
  letter-spacing: 0.04em;
  color: var(--text-strong);
}

.time-picker__preview-sep {
  color: var(--text-muted);
  font-weight: 600;
  user-select: none;
}

.time-picker__columns {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 8px;
  margin-bottom: 10px;
  align-items: stretch;
}

.time-picker__col--hours {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.time-picker__col--minutes {
  display: flex;
  flex-direction: column;
  /* ارتفاع ردیف را از ستون ساعت بگیر؛ محتوا اندازهٔ ردیف را بزرگ نکند */
  height: 0;
  min-height: 100%;
  min-width: 0;
  overflow: hidden;
}

.time-picker__hours-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  flex: 1 1 auto;
  padding: 3px;
  border-radius: 10px;
  background: var(--field-bg);
  border: 1px solid var(--border);
  direction: ltr;
}

.time-picker__hour-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.time-picker__col-label {
  flex: 0 0 auto;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
}

.time-picker__list {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 3px;
  min-height: 0;
  height: 100%;
  padding: 3px;
  border-radius: 10px;
  background: var(--field-bg);
  border: 1px solid var(--border);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.time-picker__list::-webkit-scrollbar {
  width: 4px;
}

.time-picker__list::-webkit-scrollbar-track {
  background: transparent;
}

.time-picker__list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--border);
}

.time-picker__list::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

.time-picker__option {
  width: 100%;
  min-width: 0;
  flex: 0 0 auto;
  margin: 0;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.time-picker__option:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--text);
  transform: none;
}

.time-picker__option.is-selected {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--text);
  font-weight: 700;
}

.time-picker__foot {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.time-picker__btn {
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 6px 11px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.time-picker__btn--ghost {
  background: var(--field-bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.time-picker__btn--ghost:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
  transform: none;
}

.time-picker__btn--primary {
  background: var(--status-red-bg-medium);
  border: 1px solid var(--primary);
  color: var(--text);
}

.time-picker__btn--primary:hover {
  background: var(--status-red-bg-strong);
  transform: none;
}

/* ---------- منوی سفارشی (صفحه نتیجه) ---------- */

.custom-select {
  position: relative;
  width: 100%;
}

.custom-select__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.custom-select__trigger {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: right;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.custom-select__trigger:hover,
.custom-select.is-open .custom-select__trigger {
  border-color: var(--primary);
  background: var(--field-input-bg);
}

.custom-select__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-select__panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: visible;
  padding: 5px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-panel);
}

.custom-select__panel[hidden] {
  display: none;
}

.custom-select__panel--portaled {
  position: fixed;
  right: auto;
  left: auto;
  z-index: 20001;
}

.custom-select__panel .custom-select__option {
  width: 100%;
  margin-top: 0;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}

.custom-select__option.is-selected {
  border-color: var(--primary);
  background: var(--status-red-bg-medium);
}

.custom-select__option:hover,
.custom-select__option:focus-visible {
  border-color: var(--primary);
  background: var(--status-red-bg);
  outline: none;
}

body.page-result .custom-select__trigger.input.input--status,
body.page-procurement .custom-select__trigger.input.input--status,
body.page-dashboard .custom-select__trigger.input.input--status,
body.page-admin-users .custom-select__trigger.input.input--status,
body.page-actions .custom-select__trigger.input.input--status,
body.page-notifications .custom-select__trigger.input.input--status {
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.4;
  background: var(--field-input-bg);
  border: 1px solid var(--field-border-idle);
  border-radius: 10px;
  color: var(--text);
}

body.page-result .custom-select__trigger.input.input--status:hover,
body.page-result .custom-select.is-open .custom-select__trigger.input.input--status,
body.page-procurement .custom-select__trigger.input.input--status:hover,
body.page-procurement .custom-select.is-open .custom-select__trigger.input.input--status,
body.page-dashboard .custom-select__trigger.input.input--status:hover,
body.page-dashboard .custom-select.is-open .custom-select__trigger.input.input--status,
body.page-admin-users .custom-select__trigger.input.input--status:hover,
body.page-admin-users .custom-select.is-open .custom-select__trigger.input.input--status,
body.page-actions .custom-select__trigger.input.input--status:hover,
body.page-actions .custom-select.is-open .custom-select__trigger.input.input--status,
body.page-notifications .custom-select__trigger.input.input--status:hover,
body.page-notifications .custom-select.is-open .custom-select__trigger.input.input--status {
  transform: none;
  background: var(--field-input-bg);
  border-color: var(--field-border-active);
}

body.page-result .custom-select__option,
body.page-procurement .custom-select__option,
body.page-dashboard .custom-select__option,
body.page-admin-users .custom-select__option,
body.page-actions .custom-select__option,
body.page-notifications .custom-select__option {
  margin-top: 0;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 500;
}

body.page-result .custom-select__option:hover,
body.page-procurement .custom-select__option:hover,
body.page-dashboard .custom-select__option:hover,
body.page-admin-users .custom-select__option:hover {
  transform: none;
}

@media (max-width: 900px) {
  .result-meeting-info {
    grid-template-columns: 48px auto minmax(0, 1fr);
    grid-template-rows: none;
    column-gap: 8px;
  }

  .result-meeting-info__gutter {
    grid-row: 1 / span 11;
  }

  .result-meeting-field--title .result-meeting-field__control,
  .result-meeting-field--meeting-number .result-meeting-field__control,
  .result-meeting-field--meeting-type .result-meeting-field__control,
  .result-meeting-field--date .result-meeting-field__control,
  .result-meeting-field--meeting-level .result-meeting-field__control,
  .result-meeting-field.result-field--time-start .result-meeting-field__control,
  .result-meeting-field--organizer .result-meeting-field__control,
  .result-meeting-field.result-field--time-end .result-meeting-field__control,
  .result-meeting-field--chairman .result-meeting-field__control,
  .result-meeting-field--location .result-meeting-field__control,
  .result-meeting-field--secretary .result-meeting-field__control {
    grid-column: 3;
    grid-row: auto;
  }

  .result-meeting-field--title .result-meeting-field__label,
  .result-meeting-field--meeting-number .result-meeting-field__label,
  .result-meeting-field--meeting-type .result-meeting-field__label,
  .result-meeting-field--date .result-meeting-field__label,
  .result-meeting-field--meeting-level .result-meeting-field__label,
  .result-meeting-field.result-field--time-start .result-meeting-field__label,
  .result-meeting-field--organizer .result-meeting-field__label,
  .result-meeting-field.result-field--time-end .result-meeting-field__label,
  .result-meeting-field--chairman .result-meeting-field__label,
  .result-meeting-field--location .result-meeting-field__label,
  .result-meeting-field--secretary .result-meeting-field__label {
    grid-column: 2;
    grid-row: auto;
  }
}

.field-label {
  display: block;
  width: 100%;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 8px;
}

.card--result .input.input--status:not(.input--time-part):not(.input--date) {
  margin-bottom: 0;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.4;
}

.field-hint {
  width: 100%;
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 10px;
}

.input--date {
  cursor: pointer;
  background: var(--field-input-bg);
}

.btn-add-email {
  display: inline-flex;
  align-items: center;
  width: auto;
  align-self: flex-start;
  margin-top: 0;
  margin-bottom: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--field-input-bg);
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.card--result .btn-add-email {
  margin-inline-start: var(--result-list-content-inset);
}

.btn-add-email:hover {
  border-color: var(--field-border-active);
  background: var(--field-input-bg);
  color: var(--text-muted);
}

.result-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--footer-bg);
  border-top: 1px solid var(--border);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0));
  backdrop-filter: blur(10px);
}

body.has-app-sidebar .result-footer {
  right: var(--app-sidebar-width);
}

.result-page-wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 0 24px;
  box-sizing: border-box;
}

body.page-result.has-app-sidebar .card--wide,
body.page-result.has-app-sidebar .card--result {
  width: 100%;
  max-width: none;
  margin: 0;
  align-items: stretch;
  box-sizing: border-box;
  padding: 24px 22px 28px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  box-shadow: none;
}

body.page-result.has-app-sidebar .result-footer__inner {
  max-width: none;
  margin: 0 auto;
  justify-content: center;
}

.result-footer__inner {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  max-width: min(1200px, 92vw);
  margin: 0 auto;
  align-items: center;
  justify-content: center;
}

body.page-result .result-footer__btn {
  width: auto;
  flex: 0 0 auto;
  min-width: 0;
  margin-top: 0;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 9px;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--surface-btn);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s, opacity 0.2s;
}

body.page-result .result-footer__btn:hover:not(:disabled) {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--text);
  transform: none;
}

body.page-result .result-footer__btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
  transform: none;
}

body.page-result .result-footer__btn--save:not(:disabled) {
  border-color: var(--primary);
  background: var(--status-red-bg-medium);
  color: var(--text-strong);
}

.result-footer__btn-icon {
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
}

.download-format-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  font-family: ui-sans-serif, "Segoe UI", system-ui, sans-serif;
  line-height: 1;
  letter-spacing: -0.02em;
  color: currentColor;
}

.download-format-icon--word {
  width: 16px;
  height: 16px;
}

.result-footer__btn-label {
  line-height: 1.2;
}

@media (max-width: 560px) {
  body.page-result .result-footer__btn {
    font-size: 12px;
    padding: 8px 10px;
    gap: 5px;
  }

  .result-footer__btn-label {
    display: none;
  }

  body.page-result .result-footer__btn {
    padding: 8px;
    min-width: 36px;
  }
}

/* ---------- تقویم شمسی ---------- */

.jalali-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  background: transparent;
}

.jalali-picker-overlay--anchored {
  display: block;
  pointer-events: auto;
  background: transparent;
}

.jalali-picker {
  width: min(246px, calc(100vw - 16px));
  overflow: hidden;
  direction: rtl;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 11px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.07);
  color: var(--text);
}

.jalali-picker--anchored {
  position: fixed;
  z-index: 20001;
  margin: 0;
  pointer-events: auto;
}

.jalali-picker__nav,
.jalali-picker__today {
  width: auto;
}

.jalali-picker__grid button.jalali-picker__cell {
  width: 100%;
}

.jalali-picker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  margin-bottom: 8px;
}

.jalali-picker__title {
  font-weight: 700;
  font-size: 12px;
}

.jalali-picker__title-wrap {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.jalali-picker__title-btn {
  margin: 0;
  padding: 3px 7px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.3;
  cursor: pointer;
}

.jalali-picker__title-btn:hover,
.jalali-picker__title-btn:focus-visible {
  border-color: var(--primary);
  background: var(--status-red-bg);
  outline: none;
}

.jalali-picker__title-btn--single {
  font-size: 12px;
}

.jalali-picker__subtitle {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.jalali-picker__months,
.jalali-picker__years {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 3px;
}

.jalali-picker__month,
.jalali-picker__year {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  margin: 0;
  padding: 7px 4px;
  background: var(--field-bg);
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text);
  font-size: 10px;
  line-height: 1.3;
  cursor: pointer;
}

.jalali-picker__month:hover,
.jalali-picker__year:hover,
.jalali-picker__month:focus-visible,
.jalali-picker__year:focus-visible {
  border-color: var(--primary);
  outline: none;
}

.jalali-picker__month.is-selected,
.jalali-picker__year.is-selected,
.jalali-picker__cell.is-selected {
  border-color: var(--primary);
  background: var(--status-red-bg-medium);
  font-weight: 700;
}

.jalali-picker__month.is-today,
.jalali-picker__year.is-today,
.jalali-picker__cell.is-today {
  box-shadow: inset 0 0 0 1px var(--primary);
}

.jalali-picker__nav {
  width: 31px;
  min-width: 31px;
  margin-top: 0;
  padding: 7px;
  background: var(--field-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  line-height: 1;
}

.jalali-picker__nav:hover {
  border-color: var(--primary);
}

.jalali-picker__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin-bottom: 4px;
  text-align: center;
  font-size: 9px;
  color: var(--text-muted);
}

.jalali-picker__wd {
  padding: 3px 0;
}

.jalali-picker__wd.is-friday {
  color: var(--primary);
}

.jalali-picker__cell.is-friday {
  color: var(--primary);
}

.jalali-picker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.jalali-picker__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  margin-top: 0;
  padding: 0;
  font-size: 11px;
  background: var(--field-bg);
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text);
}

.jalali-picker__cell.is-empty {
  visibility: hidden;
  pointer-events: none;
  background: transparent;
  border: none;
}

.jalali-picker__cell:hover:not(:disabled) {
  background: var(--row-hover);
  border-color: transparent;
}

.jalali-picker__cell.is-disabled,
.jalali-picker__cell:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.jalali-picker__foot {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
}

.jalali-picker__back,
.jalali-picker__today {
  width: auto;
  margin-top: 0;
  padding: 7px 15px;
  border-radius: 8px;
  color: var(--text);
  font-size: 11px;
}

.jalali-picker__back {
  background: var(--field-bg);
  border: 1px solid var(--border);
}

.jalali-picker__back:hover {
  border-color: var(--primary);
}

.jalali-picker__today {
  background: var(--status-red-bg-medium);
  border: 1px solid var(--primary);
}

.jalali-picker__today:hover {
  background: var(--status-red-bg-strong);
}

/* ---------- مخاطب‌پیکر ---------- */

.contact-picker {
  width: min(630px, 100%);
  max-height: min(80vh, 520px);
  display: flex;
  flex-direction: column;
  direction: rtl;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  color: var(--text);
}

.contact-picker__head {
  margin-bottom: 10px;
}

.contact-picker__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.contact-picker__search-wrap {
  margin-bottom: 15px;
}

.contact-picker__search {
  width: 100%;
  margin-bottom: 0;
}

.contact-picker__status:not([hidden]) {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  padding: 12px 8px;
  margin-bottom: 12px;
}

.contact-picker__list {
  flex: 1;
  min-height: 120px;
  max-height: min(52vh, 360px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 10px 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: thin;
  scrollbar-color: #3f3f46 var(--muted);
}

.contact-picker__list::-webkit-scrollbar {
  width: 8px;
}

.contact-picker__list::-webkit-scrollbar-track {
  background: var(--field-bg);
  border-radius: 8px;
}

.contact-picker__list::-webkit-scrollbar-thumb {
  background: #3f3f46;
  border-radius: 8px;
  border: 2px solid var(--muted);
}

.contact-picker__list::-webkit-scrollbar-thumb:hover {
  background: #52525b;
}

.contact-picker__item {
  width: 100%;
  margin-top: 0;
  padding: 10px 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  text-align: right;
  background: var(--field-bg);
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.contact-picker__item:hover {
  border-color: var(--primary);
  background: var(--status-red-bg);
}

.contact-picker__item-avatar,
.contact-autocomplete__item-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--muted);
  color: var(--text-muted);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
}

.contact-picker__item-avatar-img,
.contact-autocomplete__item-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.contact-picker__item-text,
.contact-autocomplete__item-text {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.contact-picker__item-name {
  width: 100%;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.contact-picker__item-meta {
  flex-shrink: 0;
  max-width: 48%;
  font-size: 12px;
  color: var(--text-muted);
  text-align: left;
  line-height: 1.35;
}

.contact-picker-overlay .contact-picker__item,
.contact-picker-overlay .contact-picker__search {
  width: 100%;
}

/* ---------- تکمیل خودکار کارکنان ---------- */

.contact-autocomplete {
  position: fixed;
  z-index: 20001;
  display: flex;
  flex-direction: column;
  direction: rtl;
  max-height: min(192px, 32vh);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  color: var(--text);
}

.contact-autocomplete[hidden] {
  display: none !important;
}

.contact-autocomplete__status:not([hidden]) {
  padding: 8px 10px;
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
}

.contact-autocomplete__list {
  overflow-y: auto;
  max-height: min(192px, 32vh);
  padding: 2px;
}

.contact-autocomplete__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: right;
  cursor: pointer;
  box-sizing: border-box;
}

.contact-autocomplete__item:hover,
.contact-autocomplete__item.is-active {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.contact-autocomplete__item-name {
  width: 100%;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}

.contact-autocomplete__item-meta {
  width: 100%;
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.3;
}

/* ---------- تاریخچه (لیست در کارت) ---------- */

.history-page-wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 0 40px;
  box-sizing: border-box;
}

.history-card {
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.history-card__title {
  margin: 0 0 16px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-strong);
}

.history-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.history-table__head,
.history-row {
  display: grid;
  grid-template-columns:
    40px
    100px
    minmax(120px, 1.6fr)
    88px
    minmax(88px, 1fr)
    34px
    34px
    34px
    34px;
  gap: 8px 10px;
  align-items: center;
  min-width: 674px;
}

.history-table__head {
  padding: 0 8px 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.history-table__head-actions {
  min-height: 1px;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  margin: 0;
  max-width: none;
  padding: 0;
}

.history-list .jobs-empty {
  min-width: 0;
  margin: 16px 0 8px;
  padding: 0 8px;
}

.history-list .jobs-empty--loading {
  margin-top: 32px;
  font-size: 14px;
}

.history-row {
  padding: 10px 8px;
  border-radius: 10px;
  transition: background 0.15s;
}

.history-row:hover {
  background: var(--row-hover);
}

.history-cell {
  font-size: 13px;
  color: var(--text);
  min-width: 0;
}

.history-cell--num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--surface-btn);
  font-size: 13px;
  font-weight: 700;
}

.history-cell--date {
  color: var(--text-muted);
  white-space: nowrap;
}

.history-cell--title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-cell--type {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.history-cell--id {
  font-size: 12px;
  color: var(--text-muted);
  font-family: ui-monospace, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
  text-align: right;
}

.history-icon-btn {
  width: 34px;
  min-width: 34px;
  height: 34px;
  margin-top: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-btn);
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.history-icon-btn:hover {
  border-color: var(--primary);
  background: var(--status-red-bg);
  color: var(--text);
}

.history-icon-btn--delete:hover {
  border-color: var(--status-red);
  background: var(--status-red-delete-bg);
  color: var(--status-red-text);
}

.history-icon-svg {
  display: block;
  flex-shrink: 0;
}

body.page-dashboard .history-icon-btn {
  width: 24px;
  min-width: 24px;
  height: 24px;
  margin-top: 0;
  padding: 0;
  font-weight: normal;
  font-size: inherit;
  border: none;
  border-radius: 50%;
  background: transparent;
}

body.page-dashboard .history-icon-btn:hover {
  transform: none;
  border: none;
  border-radius: 50%;
  background: var(--row-hover);
}

body.page-dashboard .history-icon-btn--delete:hover {
  border: none;
  background: var(--status-red-delete-bg);
  color: var(--status-red-text);
}

@media (max-width: 768px) {
  :root {
    --app-header-height: 72px;
  }

  .app-header {
    padding: 0 16px;
    gap: 12px;
  }

  .app-header__title {
    font-size: 18px;
  }

  .app-header__meta {
    font-size: 12px;
  }

  .app-header__btn {
    min-width: 42px;
    padding: 0 12px;
  }

  body.page-procurement.has-app-page-header .app-header__btn--primary[data-app-header-action="create"] {
    width: 42px;
    min-width: 42px;
    max-width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    gap: 0;
    flex-shrink: 0;
  }

  body.page-procurement.has-app-page-header .app-header__btn--primary[data-app-header-action="create"] span {
    display: none;
  }
}

@media (max-width: 640px) {
  .app-topbar {
    padding: 10px 12px;
    gap: 8px;
    margin-bottom: 6px;
  }

  .logo1 img {
    width: min(96px, 30vw);
  }

  body.page-dashboard.has-app-sidebar .app-main,
  body.page-procurement.has-app-sidebar .app-main,
  body.page-actions.has-app-sidebar .app-main,
  body.page-home.has-app-sidebar .app-main {
    padding-inline: 12px;
  }

  body.page-dashboard.has-app-sidebar .app-main,
  body.page-procurement.has-app-sidebar .app-main,
  body.page-actions.has-app-sidebar .app-main {
    padding-inline: 0;
  }

  body.page-dashboard.has-app-sidebar .procurement-panel__filters,
  body.page-procurement.has-app-sidebar .procurement-panel__filters,
  body.page-actions.has-app-sidebar .procurement-panel__filters,
  body.page-admin-users.has-app-sidebar .procurement-panel__filters {
    padding-inline: 16px;
  }

  body.page-dashboard.has-app-sidebar .procurement-panel__table-wrap,
  body.page-dashboard.has-app-sidebar .procurement-panel__pagination,
  body.page-procurement.has-app-sidebar .procurement-panel__table-wrap,
  body.page-procurement.has-app-sidebar .procurement-panel__pagination,
  body.page-actions.has-app-sidebar .actions-panel__table-wrap,
  body.page-actions.has-app-sidebar .actions-panel__kanban,
  body.page-notifications.has-app-sidebar .actions-panel__table-wrap {
    margin-inline: 16px;
  }

  body.has-app-page-header .app-main {
    padding-top: calc(var(--app-header-height) + 12px);
  }

  body.mail-page.has-app-page-header .app-main,
  body.page-mail.has-app-page-header .app-main {
    padding-top: var(--app-header-height);
    padding-bottom: 0;
  }

  body.has-app-topbar {
    padding-inline: 12px;
  }

  .history-page-wrap {
    max-width: 100%;
  }
}

/* ---------- پنل ارسال ایمیل (صورتجلسه) ---------- */

.email-panel-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--overlay);
  overflow-y: auto;
}

.email-panel-overlay[hidden] {
  display: none !important;
}

.email-panel {
  position: relative;
  width: min(1120px, 100%);
  max-height: min(92vh, 920px);
  display: flex;
  flex-direction: column;
  direction: rtl;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-panel);
  color: var(--text);
  overflow: hidden;
  transition: opacity 0.2s ease;
}

.email-panel.is-sending {
  opacity: 0.92;
}

.email-panel__loading {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.45);
  color: var(--text-strong);
  font-size: 14px;
  font-weight: 600;
}

.email-panel__loading[hidden] {
  display: none !important;
}

.email-panel__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: email-panel-spin 0.7s linear infinite;
}

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

.email-panel__header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  flex-shrink: 0;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--border);
}

.email-panel__header-text {
  min-width: 0;
  text-align: right;
}

.email-panel__title {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-strong);
}

.email-panel__subtitle {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.email-panel__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-btn);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.email-panel__close:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}

.email-panel__shell {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.85fr);
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.email-panel__content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-inline-end: 1px solid var(--border);
}

.email-panel__stats-block {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 10px;
  row-gap: 8px;
  padding: 12px 20px 12px;
}

.email-panel__stats {
  display: contents;
}

.email-stat-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--field-bg);
  border: 1px solid var(--border);
  transition: border-color 0.2s, background 0.2s;
}

.email-stat-card__label {
  font-size: 11px;
  color: var(--text-muted);
}

.email-stat-card__value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-strong);
}

.email-stat-card--success {
  border-color: var(--status-green-border);
  background: var(--status-green-bg);
}

.email-stat-card--success .email-stat-card__value {
  color: var(--status-green-text);
}

.email-stat-card--failed {
  border-color: var(--status-red-border);
  background: var(--primary-soft);
}

.email-stat-card--failed .email-stat-card__value {
  color: var(--status-red);
}

.email-stat-card--pending .email-stat-card__value {
  color: var(--text-muted);
}

.email-panel__stat-action {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  border-radius: 8px;
  white-space: nowrap;
  text-align: center;
}

.email-panel__stat-action--retry {
  grid-column: 3;
  grid-row: 2;
}

.email-panel__stat-action--send {
  grid-column: 4;
  grid-row: 2;
}

.email-panel__btn {
  margin: 0;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.15s;
}

.email-panel__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.email-panel__btn--primary {
  background: var(--email-send-btn-bg);
  border: 1px solid var(--email-send-btn-border);
  color: var(--email-send-btn-text);
}

.email-panel__btn--primary:hover:not(:disabled) {
  background: var(--email-send-btn-bg-hover);
  border-color: var(--status-green-text);
  color: var(--status-green-text);
  transform: none;
}

.email-panel__btn--secondary {
  background: var(--surface-btn);
  border: 1px solid var(--border);
  color: var(--text);
}

.email-panel__btn--secondary:hover:not(:disabled) {
  border-color: var(--primary);
  background: var(--primary-soft);
  transform: none;
}

.email-panel__btn--retry {
  background: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
}

.email-panel__btn--retry:hover:not(:disabled) {
  background: var(--primary-soft);
  transform: none;
}

.email-panel__table-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 12px 16px 16px;
  direction: ltr;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

.email-panel__table-wrap::-webkit-scrollbar {
  width: 5px;
}

.email-panel__table-wrap::-webkit-scrollbar-track {
  background: transparent;
}

.email-panel__table-wrap::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
}

.email-panel__table-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

.email-panel__table {
  width: 100%;
  direction: rtl;
  border-collapse: collapse;
  font-size: 13px;
}

.email-panel__table th,
.email-panel__table td {
  padding: 10px 8px;
  text-align: right;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.email-panel__table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--card);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.email-panel__table th.email-panel__th--check,
.email-panel__table td.email-panel__cell--check {
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  padding: 0;
  text-align: center;
  vertical-align: middle;
}

.email-panel__table thead th.email-panel__th--check > .email-panel__cell-inner,
.email-panel__table tbody td.email-panel__cell--check.email-panel__cell--vcenter > .email-panel__cell-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100%;
  height: 100%;
  padding: 10px 8px;
  box-sizing: border-box;
}

.email-panel__table tbody tr {
  height: 1px;
}

.email-panel__table tbody td.email-panel__cell--vcenter {
  padding: 0;
  vertical-align: middle;
  height: 100%;
}

.email-panel__table tbody td.email-panel__cell--vcenter > .email-panel__cell-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 100%;
  height: 100%;
  padding: 10px 8px;
  box-sizing: border-box;
}

.email-panel__cell--actions.email-panel__cell--vcenter > .email-panel__cell-inner {
  justify-content: center;
}

.email-panel__cell--person {
  min-width: 160px;
}

.email-panel__person-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
  line-height: 1.45;
}

.email-panel__person-email {
  margin-top: 3px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.4;
  word-break: break-all;
}

.email-panel__cell--status {
  min-width: 108px;
}

.email-panel__cell--meta {
  min-width: 120px;
  font-size: 11px;
  color: var(--text-muted);
}

.email-panel__meta-line {
  line-height: 1.6;
}

.email-panel__meta-line span {
  color: var(--text-muted);
}

.email-panel__cell--actions {
  width: 48px;
  text-align: center;
}

.email-panel__meta-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.email-panel__empty {
  text-align: center;
  color: var(--text-muted);
  padding: 28px 12px !important;
}

.email-panel__table tbody tr.email-panel__row:hover {
  background: var(--row-hover);
}

.email-panel__table tbody tr.email-panel__row--success {
  background: var(--email-row-success-bg);
}

.email-panel__table tbody tr.email-panel__row--success:hover {
  background: var(--email-row-success-bg-hover);
}

.email-panel__table tbody tr.email-panel__row--failed {
  background: var(--email-row-failed-bg);
}

.email-panel__table tbody tr.email-panel__row--failed:hover {
  background: var(--email-row-failed-bg-hover);
}

.email-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.email-badge--attendance-present {
  background: var(--status-green-bg);
  color: var(--status-green-text);
  border: 1px solid var(--status-green-border);
}

.email-badge--attendance-absent {
  background: var(--attendance-absent-bg);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.email-badge--status-success {
  background: var(--status-green-bg);
  color: var(--status-green-text);
  border: 1px solid var(--status-green-border);
}

.email-badge--status-failed {
  background: var(--primary-soft);
  color: var(--status-red-text);
  border: 1px solid var(--status-red-border);
}

.email-badge--status-pending {
  background: var(--field-bg);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.email-badge--cc {
  background: var(--field-bg);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.email-panel__group-row td {
  padding: 12px 8px 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-strong);
  background: var(--field-bg);
  border-bottom: 1px solid var(--border);
}

.email-panel__group-row:first-child td {
  padding-top: 6px;
}

.email-panel__row--invalid-email {
  opacity: 0.72;
}

.email-panel__row--invalid-email .email-panel__person-email {
  color: var(--status-red);
}

.email-panel__error-label {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--status-red);
}

.email-panel__retry-btn {
  width: 30px;
  min-width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--surface-btn);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.email-panel__retry-btn:hover:not(:disabled) {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
  transform: none;
}

.email-panel__sent-btn {
  width: 30px;
  min-width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 9px;
  border: 1px solid var(--status-green-border);
  background: var(--status-green-bg);
  color: var(--status-green-text);
  cursor: default;
  pointer-events: none;
  user-select: none;
}

.email-panel__retry-icon,
.email-panel__sent-icon {
  display: block;
  flex-shrink: 0;
  pointer-events: none;
}

.email-panel__retry-placeholder {
  color: var(--text-muted);
  font-size: 12px;
}

.email-panel__preview {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  background: var(--field-bg);
  padding: 18px 16px 18px;
  overflow: hidden;
}

.email-panel__preview-title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-strong);
}

.email-panel__preview-label {
  display: block;
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.email-panel__preview-subject {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
  line-height: 1.5;
}

.email-panel__preview-body {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 12px;
  overflow: auto;
  direction: ltr;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #ffffff;
  font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.75;
  color: #18181b;
  -webkit-overflow-scrolling: touch;
}

.email-panel__preview-body > * {
  direction: rtl;
}

.email-panel__preview-body::-webkit-scrollbar {
  width: 5px;
}

.email-panel__preview-body::-webkit-scrollbar-track {
  background: transparent;
}

.email-panel__preview-body::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
}

.email-panel__preview-body::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

[data-theme="dark"] .email-panel__preview-body {
  background: var(--card);
  color: var(--text);
}

body.email-panel-open {
  overflow: hidden;
}

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

  .email-panel__stat-action--retry {
    grid-column: 1;
    grid-row: 3;
  }

  .email-panel__stat-action--send {
    grid-column: 2;
    grid-row: 3;
  }

  .email-panel__shell {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .email-panel__content {
    border-inline-end: none;
    border-bottom: 1px solid var(--border);
  }

  .email-panel__preview {
    min-height: 36vh;
    max-height: none;
  }

  .email-panel__table-wrap {
    max-height: min(40vh, 360px);
    flex: none;
  }
}

@media (max-width: 560px) {
  .email-panel__stats-block {
    padding-inline: 14px;
  }
}

/* ---------- پنل مدیریت درخواست‌های خرید (ProcurementPanel) ---------- */

body.page-procurement:not(.has-app-sidebar),
body.page-actions:not(.has-app-sidebar) {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: auto;
  min-height: 100vh;
  padding: 8px 16px 48px;
}

body.page-procurement.has-app-sidebar,
body.page-actions.has-app-sidebar {
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  height: auto;
  min-height: 100vh;
}

body.page-procurement.has-app-sidebar:not(.app-sidebar-drawer),
body.page-actions.has-app-sidebar:not(.app-sidebar-drawer),
body.page-admin-users.has-app-sidebar:not(.app-sidebar-drawer),
body.page-admin.has-app-sidebar:not(.app-sidebar-drawer),
body.page-admin-audit.has-app-sidebar:not(.app-sidebar-drawer),
body.page-org-chart.has-app-sidebar:not(.app-sidebar-drawer) {
  padding: 0;
  padding-right: var(--app-sidebar-width);
  padding-left: 0;
}

html[data-app-sidebar="collapsed"] body.page-admin-users.has-app-sidebar:not(.app-sidebar-drawer),
html[data-app-sidebar="collapsed"] body.page-admin.has-app-sidebar:not(.app-sidebar-drawer),
html[data-app-sidebar="collapsed"] body.page-admin-audit.has-app-sidebar:not(.app-sidebar-drawer),
html[data-app-sidebar="collapsed"] body.page-org-chart.has-app-sidebar:not(.app-sidebar-drawer) {
  padding-right: var(--app-sidebar-width-collapsed);
}

/* padding سایدبار جمع‌شونده — بعد از قوانین صفحه تا shorthand آن‌ها override نشود */
body.has-app-sidebar.app-sidebar-drawer.page-dashboard,
body.has-app-sidebar.app-sidebar-drawer.page-procurement,
body.has-app-sidebar.app-sidebar-drawer.page-actions,
body.has-app-sidebar.app-sidebar-drawer.page-result,
body.has-app-sidebar.app-sidebar-drawer.page-home,
body.has-app-sidebar.app-sidebar-drawer.page-admin,
body.has-app-sidebar.app-sidebar-drawer.page-admin-users,
body.has-app-sidebar.app-sidebar-drawer.page-admin-audit,
body.has-app-sidebar.app-sidebar-drawer.page-org-chart {
  padding-right: var(--app-sidebar-width-collapsed);
  transition: padding-right 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

body.has-app-sidebar.app-sidebar-drawer.app-sidebar-open.page-dashboard,
body.has-app-sidebar.app-sidebar-drawer.app-sidebar-open.page-procurement,
body.has-app-sidebar.app-sidebar-drawer.app-sidebar-open.page-actions,
body.has-app-sidebar.app-sidebar-drawer.app-sidebar-open.page-result,
body.has-app-sidebar.app-sidebar-drawer.app-sidebar-open.page-home,
body.has-app-sidebar.app-sidebar-drawer.app-sidebar-open.page-admin,
body.has-app-sidebar.app-sidebar-drawer.app-sidebar-open.page-admin-users,
body.has-app-sidebar.app-sidebar-drawer.app-sidebar-open.page-admin-audit,
body.has-app-sidebar.app-sidebar-drawer.app-sidebar-open.page-org-chart {
  padding-right: var(--app-sidebar-width);
}

.procurement-panel {
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.procurement-panel__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.procurement-panel__header-main {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.procurement-panel__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-strong);
}

.procurement-panel__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.procurement-panel__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

.procurement-panel__legend-count {
  font-weight: 700;
  color: var(--text-strong);
}

.procurement-panel__legend-item::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.procurement-panel__legend-item--pending::before {
  background: var(--proc-status-pending);
}

.procurement-panel__legend-item--in-progress::before {
  background: var(--proc-status-in-progress);
}

.procurement-panel__legend-item--done::before {
  background: var(--status-green);
}

.procurement-panel__legend-item--rejected::before {
  background: var(--status-red);
}

.procurement-panel__header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.procurement-panel__header-btns {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.procurement-panel__header-btns .procurement-panel__btn {
  flex: 0 0 auto;
  min-width: 148px;
}

.procurement-panel__header-btns .procurement-panel__btn[data-action="create"] {
  width: 148px;
  max-width: 148px;
  padding-left: 12px;
  padding-right: 12px;
}

.procurement-panel__header-btns .procurement-panel__btn[data-action="bulk-delete"] {
  min-width: 0;
  width: auto;
  max-width: none;
}

.procurement-panel__search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: min(240px, 100%);
  padding: 0 12px;
  height: 40px;
  border: 1px solid var(--field-border-idle);
  border-radius: 12px;
  background: var(--field-input-bg);
  color: var(--text-muted);
  transition: border-color 0.2s;
}

.procurement-panel__search:focus-within {
  border-color: var(--field-border-active);
}

.procurement-panel__search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text-strong);
  font: inherit;
  font-size: 13px;
  outline: none;
}

.procurement-panel__search-input::placeholder {
  color: var(--text-placeholder);
}

.procurement-panel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s, opacity 0.2s;
  white-space: nowrap;
}

.procurement-panel__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.procurement-panel__btn[hidden] {
  display: none !important;
}

.procurement-panel__btn,
.procurement-panel__page-btn,
.procurement-panel__action-btn,
.procurement-modal__close {
  width: auto;
  margin-top: 0;
}

.procurement-panel__btn:hover:not(:disabled),
.procurement-panel__page-btn:hover:not(:disabled) {
  transform: none;
}

body.page-procurement .history-page-wrap,
body.page-actions .history-page-wrap,
body.page-notifications .history-page-wrap,
body.page-mail .history-page-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body.page-team .history-page-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body.page-team.has-app-sidebar {
  overflow-x: clip;
}

body.page-team.has-app-sidebar .app-main {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

/* =========================
   Team View (page-team)
   ========================= */

.team-view {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.team-view--state .procurement-panel__empty {
  margin-top: 24px;
}

.team-view__layer {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--eval-radius, 10px);
  overflow: hidden;
  box-shadow: none;
}

.team-view__layer-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  flex-wrap: wrap;
}

.team-view__layer-head h3 {
  margin: 0;
  margin-inline-end: auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-strong);
}

.team-view__layer-hint {
  font-size: 11px;
  color: var(--text-muted);
}

.team-view__layer-body {
  padding: 14px 15px;
}

.team-view__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.team-view__layer--warning .team-view__stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.team-view__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: auto;
  margin: 0;
  padding: 11px 13px;
  border-radius: 8px;
  border: 1px solid var(--border);
  border-top: 3px solid var(--eval-neutral);
  background: var(--card);
  color: var(--text-strong);
  cursor: pointer;
  text-align: start;
  transition: border-color 0.15s ease;
}

.team-view__stat:hover:not(:disabled) {
  background: var(--card);
  color: var(--text-strong);
  border-color: color-mix(in srgb, var(--text-muted) 35%, var(--border));
}

.team-view__stat:disabled:hover,
.team-view__stat.is-zero:hover {
  background: var(--card);
  color: var(--text-strong);
  border-color: var(--border);
  box-shadow: none;
  transform: none;
}

.team-view__stat:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--eval-seg-active) 35%, var(--border));
  outline-offset: 1px;
}

.team-view__stat:disabled,
.team-view__stat.is-zero {
  opacity: 0.45;
  cursor: default;
  border-top-color: var(--border);
}

.team-view__stat--late { border-top-color: var(--eval-late); }
.team-view__stat--soon { border-top-color: var(--eval-soon); }
.team-view__stat--open { border-top-color: var(--eval-open); }
.team-view__stat--neutral { border-top-color: var(--eval-neutral); }

.team-view__layer--warning .team-view__stat {
  border-top-color: var(--proc-status-pending, var(--eval-soon));
}

.team-view__stat-label {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.4;
}

.team-view__stat-value {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

.team-view__stat-sub {
  font-size: 10.5px;
  color: var(--text-muted);
  line-height: 1.4;
}

.team-view__calm {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px dashed var(--border);
  background: var(--muted);
  color: var(--text-muted);
  font-weight: 600;
  line-height: 1.7;
}

.team-view__legend {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text);
}

.team-view__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.team-view__legend-swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex: 0 0 auto;
}

.team-view__legend-swatch--late { background: var(--eval-late); }
.team-view__legend-swatch--soon { background: var(--eval-soon); }
.team-view__legend-swatch--open { background: var(--eval-open); }

.team-view__filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}

.team-view__filter input {
  width: auto;
  margin: 0;
  accent-color: var(--eval-seg-active);
}

.team-view__loads {
  display: flex;
  flex-direction: column;
}

.team-view__load {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: start;
  width: 100%;
  margin: 0;
}

.team-view__load:last-child {
  border-bottom: 0;
}

.team-view__load:hover {
  background: color-mix(in srgb, var(--row-hover) 80%, transparent);
}

.team-view__load:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--eval-seg-active) 35%, var(--border));
  outline-offset: -2px;
}

.team-view__load-who {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 170px;
  flex: 0 0 auto;
  min-width: 0;
}

.team-view__load-who .team-view__avatar,
.team-view__load-who .avatar,
.team-view__load-who img,
.team-view__load-who .actions-panel__person-avatar {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  border-radius: 50%;
  flex: 0 0 auto;
  font-size: 10px;
}

.team-view__load-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-view__load-bar {
  flex: 1 1 auto;
  min-width: 0;
  height: 9px;
  border-radius: 5px;
  background: var(--muted, var(--row-hover));
  overflow: hidden;
  display: flex;
  flex-direction: row;
}

.team-view__load-seg {
  display: block;
  height: 100%;
  flex: 0 0 auto;
  min-width: 0;
}

.team-view__load-seg--late { background: var(--eval-late); }
.team-view__load-seg--soon { background: var(--eval-soon); }
.team-view__load-seg--open { background: var(--eval-open); }

.team-view__load-meta {
  width: 112px;
  flex: 0 0 auto;
  text-align: start;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
}

.team-view__load-meta strong {
  color: var(--text-strong);
  font-weight: 600;
}

.team-view__load-tag {
  display: inline-block;
  margin-inline-start: 5px;
  padding: 1px 6px;
  border-radius: 20px;
  font-size: 10px;
  background: var(--eval-late-bg);
  color: var(--eval-late);
}

.team-view__foot {
  padding: 9px 15px;
  font-size: 11px;
  color: var(--text-muted);
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  line-height: 1.6;
}

.team-view__foot-link {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--eval-seg-active);
  font: inherit;
  font-size: inherit;
  cursor: pointer;
  text-decoration: underline;
  width: auto;
}

.team-view__foot-link:hover {
  background: transparent;
  color: var(--text-strong);
}

.team-view__drilldown {
  /* legacy inline panel — replaced by modal; keep for safety */
  display: none;
}

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

.team-view__drilldown-head h3 {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--text-strong);
}

.team-view__drilldown-close {
  flex-shrink: 0;
}

.team-view__table-wrap {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--card);
}

.team-view__table-wrap .procurement-panel__table-head-wrap {
  border-bottom: 1px solid var(--border);
  margin-top: 0;
}

body.page-team .team-view__drilldown-grid,
body.page-team .team-view__drilldown-row {
  display: grid;
  grid-template-columns:
    minmax(0, 2.2fr)
    minmax(96px, 1fr)
    minmax(72px, 0.7fr)
    minmax(110px, 1fr)
    minmax(110px, 1fr)
    minmax(100px, 0.9fr);
  gap: 8px 10px;
  align-items: center;
  min-width: 840px;
  box-sizing: border-box;
}

body.page-team .team-view__drilldown-grid {
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  padding: 0 10px;
  margin: 0;
  border: none;
  border-radius: 0;
}

body.page-team .team-view__drilldown-grid .procurement-panel__th,
body.page-team .team-view__drilldown-grid .procurement-panel__th--status {
  cursor: default;
  pointer-events: none;
  transform: none;
}

body.page-team .team-view__drilldown-grid .procurement-panel__th--status {
  display: flex;
  width: auto;
  justify-content: flex-start;
  text-align: right;
}

body.page-team .team-view__drilldown-grid .procurement-panel__th--status:hover,
body.page-team .team-view__drilldown-grid .procurement-panel__th--status:focus,
body.page-team .team-view__drilldown-grid .procurement-panel__th--status:focus-visible,
body.page-team .team-view__drilldown-grid .procurement-panel__th--status:active {
  color: var(--text-muted);
  background: none;
  transform: none;
}

body.page-team .team-view__drilldown-row {
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  padding: 0 10px;
  cursor: pointer;
  border-inline-start: none;
}

body.page-team .team-view__drilldown-row .procurement-panel__cell {
  font-size: 12px;
}

body.page-team .team-view__drilldown-row .actions-panel__cell--status {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  transform: none;
  overflow: visible;
  white-space: normal;
}

body.page-team .team-view__drilldown-row .actions-panel__cell--assignee,
body.page-team .team-view__drilldown-row .actions-panel__cell--creator {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}

body.page-team .team-view__th--priority,
body.page-team .team-view__drilldown-row .actions-panel__cell--priority {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}

body.page-team .team-view__drilldown-row .actions-panel__overdue-badge {
  margin-inline-start: 5px;
}

body.page-team .team-view__drilldown-row:hover {
  background: var(--row-hover);
}

body.page-team .team-view__drilldown-row:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--eval-seg-active) 35%, var(--border));
  outline-offset: -2px;
}

body.page-team .team-view__table-wrap .procurement-panel__table-body {
  display: flex;
  flex-direction: column;
}

@media (max-width: 980px) {
  .team-view__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .team-view__load {
    height: auto;
    min-height: 36px;
    flex-wrap: wrap;
    padding: 8px 0;
  }

  .team-view__load-who {
    width: 130px;
  }

  .team-view__load-meta {
    width: 96px;
  }

  .team-view__load-bar {
    flex: 1 1 100%;
    order: 3;
  }
}

/* Team tabs — نوار pill جمع‌وجور */
.team-view__tabs {
  display: inline-flex;
  align-items: stretch;
  gap: 2px;
  padding: 3px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--muted, var(--row-hover)) 80%, var(--border));
  flex-wrap: nowrap;
  width: fit-content;
  max-width: 100%;
}

.team-view__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 6px 18px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.team-view__tab:hover:not(.team-view__tab--active) {
  color: var(--text-strong);
}

.team-view__tab--active {
  background: var(--card);
  color: var(--text-strong);
  font-weight: 600;
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}

.team-view__subtask-badge {
  display: inline-flex;
  align-items: center;
  margin-inline-start: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--muted, var(--row-hover));
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  vertical-align: middle;
}

.team-view__drilldown-row--late {
  background: color-mix(in srgb, var(--eval-late-bg) 55%, transparent);
}

/* Evaluation dashboards */
.team-eval,
.org-eval,
.eval-dash {
  width: 100%;
  min-width: 0;
}

.team-eval,
.org-eval {
  display: flex;
  flex-direction: column;
  gap: var(--eval-space, 16px);
}

.org-eval {
  max-width: 1180px;
  margin-inline: auto;
}

.org-eval__intro,
.team-eval__intro {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.7;
}

.eval-dash {
  display: flex;
  flex-direction: column;
  gap: var(--eval-space, 16px);
}

.eval-dash__toolbar,
.team-eval__toolbar,
.org-eval__toolbar {
  position: sticky;
  top: var(--app-header-height, 0px);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--page-bg, var(--card)) 92%, transparent);
  backdrop-filter: blur(10px);
}

.org-eval__toolbar [data-role="eval-period"],
.team-eval__period-slot,
.eval-dash__toolbar [data-role="eval-period"] {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

/* نوار بازه — کارت چسبان مثل پروتوتایپ سازمان */
.org-eval__toolbar,
.team-eval__toolbar {
  flex-wrap: wrap;
  margin-bottom: 0;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: var(--eval-radius, 10px);
  background: var(--card);
  box-shadow: none;
  backdrop-filter: none;
}

.eval-dash__toolbar-meta,
.org-eval__period-meta,
.team-eval__period-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  flex: 0 0 auto;
}

.eval-dash__period-title,
.org-eval__period-meta strong,
.team-eval__period-meta strong {
  color: var(--text-strong);
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}

.eval-dash__period-count,
.org-eval__period-meta span,
.team-eval__period-meta span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
}

.org-eval__period-title {
  color: var(--text-strong);
  font-size: 16px;
  font-weight: 700;
}

.eval-period {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

.eval-period--pending {
  opacity: 0.72;
}

.eval-period--pending .eval-period__select,
.eval-period--pending .eval-period__date,
.eval-period--pending .eval-period__mode,
.eval-period--pending .eval-period__shift-btn {
  cursor: wait;
}

.eval-period__start {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.eval-period__end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
  margin-inline-start: auto;
}

/* هم‌راستا با actions-panel__scope-checks */
.eval-period__modes {
  display: inline-flex;
  align-items: stretch;
  flex-wrap: nowrap;
  height: 38px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--field-input-bg);
  overflow: hidden;
}

.eval-period__mode {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  height: 100%;
  margin: 0;
  padding: 0 14px;
  border: 0;
  border-inline-start: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.eval-period__mode:first-child {
  border-inline-start: none;
}

.eval-period__mode:hover:not(.eval-period__mode--active) {
  background: var(--row-hover);
  color: var(--text-strong);
}

.eval-period__mode--active {
  background: var(--card);
  color: var(--text-strong);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}

/* هم‌راستا با actions-panel__view-toggle */
.eval-period__shift {
  display: inline-flex;
  align-items: stretch;
  flex-wrap: nowrap;
  height: 38px;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--field-input-bg);
}

.eval-period__shift-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-inline-start: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.eval-period__shift-btn:first-child {
  border-inline-start: none;
}

.eval-period__shift-btn:hover:not(:disabled) {
  background: var(--row-hover);
  color: var(--text-strong);
}

.eval-period__shift-btn:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.4;
}

.eval-period__controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.eval-period__controls--custom {
  padding-inline-start: 0;
}

.eval-period__field,
.eval-period__field--inline {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.eval-period__field-label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.eval-period__select,
.eval-period__date {
  width: auto;
  min-width: 108px;
  height: 38px;
  min-height: 38px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background-color: var(--field-input-bg);
  color: var(--text-strong);
  font: inherit;
  font-size: 13px;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}

.eval-period__select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 12px;
  padding-inline-start: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238d97a3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 10px 10px;
  background-position: left 13px center;
}

.eval-period__date {
  min-width: 128px;
  cursor: pointer;
}

.eval-dash__kpis,
.team-eval__summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

.eval-kpi,
.team-eval__summary-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: var(--eval-radius, 10px);
  background: var(--card);
  box-shadow: none;
  color: var(--text-strong);
  font: inherit;
  text-align: start;
  border-top: 3px solid var(--eval-neutral);
}

button.eval-kpi,
button.team-eval__summary-card {
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

button.eval-kpi:hover,
button.team-eval__summary-card:hover {
  background: var(--card);
  color: var(--text-strong);
  border-color: color-mix(in srgb, var(--text-muted) 40%, var(--border));
  box-shadow: 0 2px 8px color-mix(in srgb, var(--text-strong) 6%, transparent);
  transform: none;
}

.team-eval__summary-card--static,
.team-eval__summary-card--static:hover {
  cursor: default;
  transform: none;
}

.eval-kpi--closed { border-top-color: var(--eval-neutral); }
.eval-kpi--on_time,
.eval-kpi--ontime { border-top-color: var(--eval-ontime); }
.eval-kpi--late { border-top-color: var(--eval-late); }
.eval-kpi--extension { border-top-color: var(--eval-neutral); }

.eval-kpi__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.eval-kpi__label,
.team-eval__summary-label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.eval-kpi__icon {
  width: 24px;
  height: 24px;
  padding: 4px;
  border-radius: 6px;
  background: var(--muted, var(--row-hover));
  color: var(--eval-neutral);
  box-sizing: border-box;
  flex: 0 0 auto;
}

.eval-kpi--on_time .eval-kpi__icon,
.eval-kpi--ontime .eval-kpi__icon { color: var(--eval-ontime); }
.eval-kpi--closed .eval-kpi__icon,
.eval-kpi--extension .eval-kpi__icon { color: var(--eval-neutral); }
.eval-kpi--late .eval-kpi__icon { color: var(--eval-late-text, var(--eval-late)); }

.eval-kpi__value,
.team-eval__summary-value {
  display: block;
  margin-top: 2px;
  color: var(--text-strong);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.eval-kpi__hint,
.team-eval__summary-hint {
  min-height: 18px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.5;
}

.eval-kpi__delta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 19px;
  margin-top: 5px;
  color: var(--eval-neutral);
  font-size: 11px;
  font-weight: 600;
}

.eval-kpi__delta--empty { display: none; }
.eval-kpi__delta--up .eval-kpi__delta-arrow,
.eval-kpi__delta--down .eval-kpi__delta-arrow { font-size: 9px; }
.eval-kpi__delta--good { color: var(--eval-delta-good); }
.eval-kpi__delta--bad { color: var(--eval-delta-bad); }
.eval-kpi__delta--neutral,
.eval-kpi__delta--flat { color: var(--eval-neutral); }
.eval-kpi__delta-arrow { display: inline-block; }

.eval-kpi__current-note {
  margin-inline-start: 0;
  color: var(--text-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
}

.eval-dash__split {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
  gap: 12px;
  align-items: stretch;
}

.eval-dash__split--solo {
  grid-template-columns: minmax(0, 1fr);
}

.eval-dash__period-title,
.org-eval__period-meta strong,
.team-eval__period-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-strong);
  line-height: 1.3;
}

.eval-dash__period-count {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}

.eval-dash__card,
.team-eval__causes {
  min-width: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--eval-radius, 10px);
  background: var(--card);
  box-shadow: none;
  overflow: hidden;
}

.eval-dash__card-head,
.team-eval__causes-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
  padding: 11px 15px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.eval-dash__card-head h3,
.team-eval__causes-head h3 {
  margin: 0;
  margin-inline-end: auto;
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 700;
}

.org-eval__trend-body,
.org-eval__causes-body {
  padding: 14px 15px;
}

.org-eval__trend-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  aspect-ratio: 700 / 280;
}

.eval-dash__split--solo .org-eval__trend-svg {
  aspect-ratio: 1040 / 280;
}

.org-eval__trend {
  min-width: 0;
}

.org-eval__trend-grid {
  stroke: color-mix(in srgb, var(--border) 85%, transparent);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.org-eval__trend-grid--zero {
  stroke: color-mix(in srgb, var(--text-muted) 55%, var(--border));
  stroke-dasharray: none;
}

.org-eval__trend-axis,
.org-eval__trend-label,
.org-eval__trend-value,
.org-eval__trend-sublabel {
  fill: var(--text-muted);
  font-family: inherit;
  font-size: 10.5px;
  text-anchor: middle;
}

.org-eval__trend-axis { text-anchor: end; font-size: 10px; }
.org-eval__trend-value { fill: var(--text-muted); font-weight: 500; font-size: 10px; }
.org-eval__trend-value--rate {
  fill: var(--eval-seg-active, #2c3440);
  font-weight: 600;
  font-size: 9.5px;
}
.org-eval__trend-sublabel { fill: var(--eval-neutral); font-size: 9px; }
.org-eval__trend-bar--ontime { fill: var(--eval-ontime); }
.org-eval__trend-bar--late { fill: var(--eval-late); }
.org-eval__trend-group--current { opacity: .62; }
.org-eval__trend-zero-tick {
  stroke: color-mix(in srgb, var(--text-muted) 70%, transparent);
  stroke-width: 3;
  stroke-linecap: round;
}
.org-eval__trend-rate-line {
  fill: none;
  stroke: var(--eval-seg-active, #2c3440);
  stroke-width: 1.6;
  stroke-dasharray: 5 4;
  opacity: .8;
}
.org-eval__trend-rate-dot {
  fill: var(--eval-seg-active, #2c3440);
}

.org-eval__trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  color: var(--text-muted);
  font-size: 11px;
}

.org-eval__legend-item::before {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-inline-start: 0;
  margin-inline-end: 7px;
  border-radius: 2px;
  background: var(--eval-neutral);
  content: "";
  vertical-align: -1px;
}

.org-eval__legend-item--ontime::before { background: var(--eval-ontime); }
.org-eval__legend-item--late::before { background: var(--eval-late); }
.org-eval__legend-item--rate::before {
  background: var(--eval-seg-active, #2c3440);
  border-radius: 50%;
}

.org-eval__chart-empty,
.eval-dash__empty,
.team-eval__empty {
  margin: 0;
  padding: 28px 18px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
}

.eval-dash__empty strong,
.team-eval__empty strong {
  display: block;
  margin-bottom: 7px;
  color: var(--text-strong);
  font-size: 15px;
}

.eval-dash__empty p,
.team-eval__empty p {
  margin: 0;
}

.org-eval__causes {
  display: flex;
  flex-direction: column;
}

.org-eval__cause {
  margin-bottom: 11px;
}

.org-eval__cause:last-of-type { margin-bottom: 0; }

.org-eval__cause-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
  font-size: 11.5px;
  color: var(--text-muted);
}

.org-eval__cause-row b {
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.org-eval__cause-track {
  overflow: hidden;
  height: 7px;
  border-radius: 4px;
  background: var(--muted, var(--row-hover));
}

.org-eval__cause-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--eval-late);
  opacity: .75;
}

.org-eval__causes-note {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  color: var(--text-muted);
  font-size: 10.5px;
  line-height: 1.6;
}

.team-eval__causes .team-eval__bars,
.team-eval__causes-body {
  padding: 14px 15px;
}

.team-eval__bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.team-eval__bar-row {
  display: grid;
  grid-template-columns: minmax(100px, .9fr) minmax(80px, 1.6fr) 32px;
  gap: 8px;
  align-items: center;
}

.team-eval__bar-label {
  overflow: hidden;
  color: var(--text-strong);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-eval__bar-track {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted) 22%, var(--muted, var(--row-hover)));
}

.team-eval__bar-fill,
.eval-rate__fill {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: var(--eval-ontime);
}

.team-eval__bar-fill--late { background: var(--eval-late); }

.team-eval__bar-count {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: end;
}

/* میلهٔ نرخ افقی در جدول — هم‌راستا با پروتوتایپ */
.eval-rate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.eval-rate__track {
  display: block;
  overflow: hidden;
  flex: 0 0 auto;
  width: 56px;
  height: 6px;
  border-radius: 3px;
  background: var(--muted, var(--row-hover));
}

.eval-rate__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--eval-ontime);
}

.eval-rate--late .eval-rate__fill { background: var(--eval-late); }
.eval-rate--ontime .eval-rate__fill { background: var(--eval-ontime); }

.eval-rate__text {
  min-width: 42px;
  color: var(--text-strong);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: start;
}

.eval-rate__text small {
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 400;
}

.org-eval__departments { padding: 0; }
.org-eval__departments .eval-dash__card-head {
  padding: 11px 15px;
  margin: 0;
}

.org-eval__csv {
  flex: 0 0 auto;
  width: auto;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--card);
  color: var(--text-strong);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.org-eval__csv:hover { background: var(--row-hover); }

.org-eval__table-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}

.org-eval__filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}

.org-eval__filter input {
  margin: 0;
  accent-color: var(--eval-seg-active, #3f3f46);
}

.org-eval__zero { color: var(--text-muted); }

.org-eval__eligibility {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 6px;
  border-radius: 20px;
  border: 0;
  background: var(--muted, var(--row-hover));
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 500;
}

.org-eval__totals {
  background: color-mix(in srgb, var(--text-muted) 10%, var(--muted, var(--row-hover)));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.org-eval__totals th,
.org-eval__totals td {
  border-top: 2px solid var(--border);
  border-bottom: 0;
  font-weight: 700;
}

.org-eval__numeric {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.org-eval__filter-note {
  margin: 0;
  padding: 9px 15px;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.6;
}

.org-eval__filter-note button {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--eval-seg-active, var(--text-strong));
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  width: auto;
}

.org-eval__filter-note button:hover {
  background: transparent;
  color: var(--text-strong);
}

.org-eval__table-scroll,
.team-eval__table-wrap {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--eval-radius, 10px);
  background: var(--card);
  box-shadow: none;
}

.org-eval__departments .org-eval__table-scroll {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.org-eval__table,
.team-eval__table {
  width: 100%;
  min-width: 840px;
  border-collapse: collapse;
  border-spacing: 0;
}

.team-eval__table { min-width: 920px; }

.org-eval__table th,
.org-eval__table td,
.team-eval__table th,
.team-eval__table td {
  padding: 9px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  color: var(--text-strong);
  font-size: 12px;
  text-align: start;
  vertical-align: middle;
}

.org-eval__table th.org-eval__numeric,
.org-eval__table td.org-eval__numeric {
  text-align: center;
}

.org-eval__table th.org-eval__numeric .org-eval__sort {
  display: inline-flex;
  justify-content: center;
  width: 100%;
}

.org-eval__table td.org-eval__numeric .eval-rate {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 8px;
}

.org-eval__table td.org-eval__numeric .eval-rate__text {
  min-width: 0;
  text-align: center;
}

.org-eval__table thead th,
.team-eval__table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: color-mix(in srgb, var(--muted, var(--row-hover)) 55%, var(--card));
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.org-eval__sort,
.team-eval__th-btn {
  display: inline-flex;
  align-items: center;
  width: auto;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}

.team-eval__table th.team-eval__th--num,
.team-eval__table td.team-eval__cell--num {
  text-align: center;
}

.team-eval__table th.team-eval__th--num .team-eval__th-btn {
  display: inline-flex;
  justify-content: center;
  width: 100%;
}

.team-eval__table td.team-eval__cell--num .eval-rate {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 8px;
}

.org-eval__sort:hover,
.org-eval__sort:focus,
.org-eval__sort:focus-visible,
.org-eval__sort:active,
.org-eval__sort.is-active,
.team-eval__th-btn:hover,
.team-eval__th-btn:focus,
.team-eval__th-btn:focus-visible,
.team-eval__th-btn:active,
.team-eval__th-btn.is-active {
  color: var(--text-muted);
  background: transparent;
  border: 0;
  outline: none;
  box-shadow: none;
  transform: none;
}

.org-eval__table tbody tr:hover,
.team-eval__table tbody tr:hover { background: color-mix(in srgb, var(--row-hover) 80%, transparent); }

.org-eval__table tbody tr:last-child td,
.team-eval__table tbody tr:last-child td { border-bottom: 0; }

.org-eval__table tfoot th,
.org-eval__table tfoot td {
  border-bottom: 0;
  background: color-mix(in srgb, var(--text-muted) 10%, var(--muted, var(--row-hover)));
  font-weight: 700;
}

.org-eval__numeric,
.team-eval__num-btn,
.team-eval__cell--split,
.eval-rate__text {
  font-variant-numeric: tabular-nums;
}

.org-eval__row--ineligible {
  background: color-mix(in srgb, var(--muted, var(--row-hover)) 72%, transparent);
  opacity: .68;
}

.org-eval__department { min-width: 190px; }
.org-eval__dept-main,
.team-eval__person {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.org-eval__expand {
  display: inline-grid;
  width: 28px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
}

.org-eval__expand:hover { background: transparent; color: var(--text-strong); }
.org-eval__expand:disabled {
  opacity: .2;
  cursor: default;
}

.org-eval__expand-col {
  width: 28px;
  padding-inline: 4px;
  text-align: center;
}

.org-eval__dept-name {
  overflow: hidden;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-strong);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-eval__dept-name:hover,
.org-eval__dept-name:focus,
.org-eval__dept-name:active {
  background: transparent;
  color: var(--text-strong);
  transform: none;
}
.org-eval__manager {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 400;
}

.org-eval__totals { font-variant-numeric: tabular-nums; }

.org-eval__causes-row td {
  padding: 10px 26px;
  background: color-mix(in srgb, var(--muted, var(--row-hover)) 40%, var(--card));
}

.org-eval__cause-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.org-eval__cause-mini div {
  color: var(--text-muted);
  font-size: 11px;
}

.org-eval__cause-mini b {
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

.org-eval__cause-empty {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
}

.org-eval__footnotes,
.team-eval__footnote {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.7;
}

.org-eval__footnotes { padding: 0; }
.org-eval__footnotes p,
.team-eval__footnote { margin: 0; }
.org-eval__footnotes p {
  padding: 9px 15px;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.org-eval__footnotes p + p,
.team-eval__footnote + .team-eval__footnote { margin-top: 0; }

.team-eval__person-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.team-eval__person-name { color: var(--text-strong); font-size: 13px; font-weight: 700; }
.team-eval__person-dept,
.team-eval__subhint { color: var(--text-muted); font-size: 10px; }

.team-eval__num-btn {
  display: inline-flex;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-strong);
  font: inherit;
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
  cursor: pointer;
}

.team-eval__num-btn:hover:not(:disabled) {
  background: transparent;
  color: var(--eval-seg-active);
  transform: none;
}

.team-eval__num-btn:disabled {
  cursor: default;
  opacity: .45;
  background: transparent;
}

.team-eval__num-btn--stack {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  justify-content: center;
  text-align: center;
}

.team-eval__cell--split {
  white-space: nowrap;
}

.team-eval__cell--split .team-eval__num-btn {
  display: inline;
  width: auto;
}

.team-eval__split-sep {
  display: inline;
  margin-inline: 4px;
  color: var(--text-muted);
  font-weight: 600;
}

.team-eval__subhint { margin-top: 3px; }

.org-eval__drill-body .team-eval--embedded {
  min-width: 0;
}

.team-eval__note-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 28px;
  height: 28px;
  margin: 0;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.team-eval__note-btn:hover {
  color: var(--eval-seg-active);
  border-color: transparent;
  background: transparent;
}

.team-eval__note-btn--filled {
  border-color: transparent;
  background: transparent;
  color: var(--eval-seg-active);
  font-weight: 700;
}

.team-eval__row--sum td {
  background: color-mix(in srgb, var(--muted, var(--row-hover)) 72%, var(--card));
  font-weight: 700;
  border-top: 2px solid var(--border);
  border-bottom: 0;
}

.team-eval__self-body .team-eval__self-row > td,
.team-eval__self-body .team-eval__self-hint-row > td {
  background: color-mix(in srgb, var(--eval-seg-active, #5b6b7c) 11%, var(--muted, var(--row-hover)));
  border-top: 1px solid color-mix(in srgb, var(--eval-seg-active, var(--border)) 35%, var(--border));
  border-bottom: 1px solid color-mix(in srgb, var(--eval-seg-active, var(--border)) 35%, var(--border));
}

.team-eval__self-body .team-eval__self-row > td {
  border-bottom-color: transparent;
}

.team-eval__self-body .team-eval__self-hint-row > td {
  border-top-color: transparent;
}

.team-eval__self-body .team-eval__self-row:not(.team-eval__self-row--idle) > td,
.team-eval__self-body .team-eval__self-row--idle + .team-eval__self-hint-row > td {
  border-bottom: 2px solid color-mix(in srgb, var(--eval-seg-active, var(--border)) 40%, var(--border));
}

.team-eval__self-body .team-eval__self-row > td:first-child,
.team-eval__self-body .team-eval__self-hint-row > td:first-child {
  border-inline-start: 4px solid var(--eval-seg-active, #5b6b7c);
}

.team-eval__self-body .team-eval__self-row > td:last-child,
.team-eval__self-body .team-eval__self-hint-row > td:last-child {
  border-inline-end: 1px solid color-mix(in srgb, var(--eval-seg-active, var(--border)) 30%, var(--border));
}

.team-eval__self-body + tbody tr:first-child td {
  border-top: 0;
}

.team-eval__self-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  margin: 0;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--eval-seg-active, var(--text-muted)) 18%, var(--card));
  color: var(--eval-seg-active, var(--text-strong));
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.team-eval__person-text--self {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.team-eval__person-text--self .team-eval__person-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-eval__self-hint {
  padding-top: 0;
  padding-bottom: 8px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
}

.team-eval__table tbody.team-eval__self-body tr:hover {
  background: transparent;
}

.team-eval__self-body .team-eval__self-row:hover > td,
.team-eval__self-body .team-eval__self-hint-row:hover > td {
  background: color-mix(in srgb, var(--eval-seg-active, #5b6b7c) 15%, var(--muted, var(--row-hover)));
}

/* Note modal */
.team-view__drill-overlay,
.team-eval__note-overlay,
.org-eval__drill-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: color-mix(in srgb, var(--text-strong) 35%, transparent);
}

.team-view__drill-modal,
.team-eval__note-modal,
.org-eval__drill-modal {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow-card);
}

.team-eval__note-modal { width: min(440px, 100%); }
.team-view__drill-modal,
.org-eval__drill-modal {
  display: flex;
  flex-direction: column;
  width: min(960px, 100%);
  max-height: min(90vh, 900px);
}

.team-view__drill-head,
.team-eval__note-head,
.team-eval__note-foot,
.org-eval__drill-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}

.team-eval__note-foot { justify-content: flex-start; border-top: 1px solid var(--border); border-bottom: 0; }
.team-view__drill-head h3,
.team-eval__note-head h3,
.org-eval__drill-head h3 {
  margin: 0;
  color: var(--text-strong);
  font-size: 14px;
  font-weight: 800;
}

.team-view__drill-body,
.team-eval__note-body,
.org-eval__drill-body {
  padding: 14px;
  overflow: auto;
  min-height: 0;
  flex: 1 1 auto;
}

.org-eval__drill-overlay--nested {
  z-index: 12010;
}

.org-eval__drill-modal--tasks {
  width: min(720px, 100%);
}

.org-eval__task-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.org-eval__task-head,
.org-eval__task-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(110px, 1fr) minmax(100px, 0.9fr);
  gap: 10px;
  align-items: center;
  padding: 8px 4px;
}

.org-eval__task-head {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.org-eval__task-row {
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  font-size: 12px;
  color: var(--text-strong);
}

.org-eval__task-row:last-child {
  border-bottom: 0;
}

.org-eval__task-row--late {
  background: color-mix(in srgb, var(--eval-late-bg) 55%, transparent);
}

.org-eval__task-title {
  min-width: 0;
}

.org-eval__task-due--warn {
  color: var(--eval-late);
}
.team-eval__note-privacy { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; background: var(--muted, var(--row-hover)); color: var(--text-strong); font-size: 12px; font-weight: 600; line-height: 1.5; }
.team-eval__note-count { margin-top: 6px; color: var(--text-muted); font-size: 11px; text-align: end; font-variant-numeric: tabular-nums; }

/* My evaluation home card */
.ws-card--eval-me {
  display: flex;
  flex-direction: column;
}

.ws-card--eval-me .ws-card__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
}

.ws-card--eval-me .ws-card__body--skeleton {
  padding: 14px;
}

.ws-card--eval-me .ws-card--eval-skeleton {
  min-height: 140px;
  padding: 0;
  border: 0;
  box-shadow: none;
}

.ws-card__head-meta {
  margin-inline-start: auto;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.ws-eval-me__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ws-eval-me__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--muted, var(--row-hover));
}

.ws-eval-me__stat--late {
  border-color: color-mix(in srgb, var(--eval-late) 45%, var(--border));
  background: color-mix(in srgb, var(--eval-late) 10%, var(--card));
}

.ws-eval-me__stat-label,
.ws-eval-me__stat-sub {
  color: var(--text-muted);
  font-size: 11px;
}

.ws-eval-me__stat-value {
  color: var(--text-strong);
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.ws-eval-me__chart {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-height: 72px;
  align-items: end;
  gap: 8px;
  flex: 1;
}

.ws-eval-me__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 0;
  height: 100%;
  justify-content: flex-end;
}

.ws-eval-me__bar {
  width: 16px;
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  background: var(--eval-ontime);
}

.ws-eval-me__col-label {
  color: var(--text-muted);
  font-size: 10px;
  text-align: center;
}

@media (max-width: 900px) {
  .eval-dash__split { grid-template-columns: 1fr; }
  .eval-dash__toolbar,
  .team-eval__toolbar,
  .org-eval__toolbar { align-items: flex-start; flex-direction: column; }
  .eval-period { justify-content: flex-start; }
}

@media (max-width: 760px) {
  .eval-dash__kpis,
  .team-eval__summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eval-kpi,
  .team-eval__summary-card { padding: 13px; }
  .eval-period { gap: 6px; }
  .eval-period__controls--custom { width: 100%; padding-inline-start: 0; }
}

@media (max-width: 480px) {
  .eval-dash__kpis,
  .team-eval__summary,
  .ws-eval-me__stats { grid-template-columns: 1fr; }
  .eval-period__modes { width: 100%; }
  .eval-period__mode { flex: 1 1 0; }
  .eval-period__field,
  .eval-period__field--inline { flex: 1 1 100%; justify-content: space-between; }
  .eval-period__select,
  .eval-period__date { flex: 1; }
  .team-eval__bar-row { grid-template-columns: minmax(86px, 1fr) minmax(70px, 1.2fr) 28px; }
  .org-eval__trend-legend { gap: 7px; }
}


body.page-procurement.has-app-sidebar .app-main,
body.page-dashboard.has-app-sidebar .app-main,
body.page-actions.has-app-sidebar .app-main,
body.page-mail.has-app-sidebar .app-main {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

body.page-procurement.has-app-sidebar .procurement-panel,
body.page-procurement.has-app-sidebar .procurement-panel__filters,
body.page-dashboard.has-app-sidebar .procurement-panel,
body.page-dashboard.has-app-sidebar .procurement-panel__filters,
body.page-dashboard.has-app-sidebar .history-page-wrap,
body.page-admin-users.has-app-sidebar .history-page-wrap,
body.page-admin-users.has-app-sidebar .procurement-panel,
body.page-admin-users.has-app-sidebar .procurement-panel__filters,
body.page-actions.has-app-sidebar .actions-panel,
body.page-actions.has-app-sidebar .actions-panel .procurement-panel__filters,
body.page-notifications.has-app-sidebar .actions-panel,
body.page-notifications.has-app-sidebar .actions-panel .procurement-panel__filters {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.procurement-panel__btn--primary {
  background: var(--primary);
  color: var(--btn-on-primary);
  border-color: var(--primary);
}

.procurement-panel__btn--primary:hover:not(:disabled) {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.procurement-panel__btn--secondary {
  background: var(--surface-btn);
  color: var(--text);
  border-color: var(--border);
}

.procurement-panel__btn--secondary:hover:not(:disabled) {
  background: var(--row-hover);
}

.procurement-panel__btn--danger {
  background: var(--status-red-delete-bg);
  color: var(--status-red-text);
  border-color: var(--status-red-border);
}

.procurement-panel__btn--danger:hover:not(:disabled) {
  background: var(--status-red-bg-medium);
}

.procurement-panel__filters {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 24px 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: var(--panel-search-bg);
}

body.page-dashboard.has-app-page-header .procurement-panel__filters,
body.page-procurement.has-app-page-header .procurement-panel__filters,
body.page-actions.has-app-page-header .procurement-panel__filters,
body.page-admin-users.has-app-page-header .procurement-panel__filters {
  position: sticky;
  top: var(--app-header-height);
  z-index: 120;
}

body.page-dashboard.has-app-sidebar .procurement-panel__filters,
body.page-procurement.has-app-sidebar .procurement-panel__filters,
body.page-actions.has-app-sidebar .procurement-panel__filters,
body.page-admin-users.has-app-sidebar .procurement-panel__filters {
  padding-inline: 16px;
}

body.page-dashboard.has-app-sidebar .procurement-panel__table-wrap,
body.page-dashboard.has-app-sidebar .procurement-panel__pagination,
body.page-procurement.has-app-sidebar .procurement-panel__table-wrap,
body.page-procurement.has-app-sidebar .procurement-panel__pagination,
body.page-admin-users.has-app-sidebar .procurement-panel__table-wrap,
body.page-actions.has-app-sidebar .actions-panel__table-wrap,
body.page-actions.has-app-sidebar .actions-panel__kanban,
body.page-notifications.has-app-sidebar .actions-panel__table-wrap {
  margin-inline: 16px;
  max-width: calc(100% - 32px);
  box-sizing: border-box;
}

.procurement-panel__filters-top,
.procurement-panel__filters-bottom {
  display: grid;
  gap: 12px;
}

.procurement-panel__filters-top {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
}

.procurement-panel__filter-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.procurement-panel__filter-label--field {
  display: none;
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.procurement-panel__filter-field--search {
  flex: 1 1 0;
  min-width: 0;
}

.procurement-panel__filter-field--date-from,
.procurement-panel__filter-field--date-to {
  flex: 0 1 132px;
  min-width: 0;
  max-width: 132px;
}

.procurement-panel__filter-field--page-size {
  flex: 0 0 auto;
  margin-inline-start: auto;
}

.procurement-panel__filters-top-head {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.procurement-panel__filters-top-head__search,
.procurement-panel__filters-top-head__date-from,
.procurement-panel__filters-top-head__date-to,
.procurement-panel__filters-top-head__page-size {
  box-sizing: border-box;
  text-align: right;
  line-height: 1.2;
}

.procurement-panel__filters-top-head__search {
  flex: 1 1 0;
  min-width: 0;
}

.procurement-panel__filters-top-head__date-from,
.procurement-panel__filters-top-head__date-to {
  flex: 0 0 132px;
  width: 132px;
  min-width: 0;
  max-width: 132px;
}

.procurement-panel__filters-top-head__page-size {
  flex: 0 0 auto;
  width: max-content;
  max-width: none;
  margin-inline-start: auto;
  white-space: nowrap;
}

.procurement-panel__filters-top-head__sep {
  flex: 0 0 28px;
  width: 28px;
  min-width: 28px;
}

.procurement-panel__filters-top-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
}

.procurement-panel__filters-top-row > .procurement-panel__filter-field--search {
  flex: 1 1 0;
  min-width: 0;
}

.procurement-panel__filters-top-row > .procurement-panel__filter-field--date-from,
.procurement-panel__filters-top-row > .procurement-panel__filter-field--date-to {
  flex: 0 1 132px;
  min-width: 0;
  max-width: 132px;
}

.procurement-panel__filters-top-row > .procurement-panel__filter-field--page-size {
  flex: 0 0 auto;
  margin-inline-start: auto;
  align-self: flex-end;
}

.procurement-panel__filters-top-row > .procurement-panel__filter-field--page-size .procurement-panel__filter--page-size {
  display: grid;
  grid-template-columns: max-content;
  width: max-content;
  min-width: 0;
  max-width: none;
  height: 38px;
  min-height: 38px;
  max-height: 38px;
  margin: 0;
}

.procurement-panel__filters-top-row > .procurement-panel__filter-field--search .procurement-panel__filter-control--search,
.procurement-panel__filters-top-row > .procurement-panel__filter-field--date-from .procurement-panel__date-field,
.procurement-panel__filters-top-row > .procurement-panel__filter-field--date-to .procurement-panel__date-field {
  height: 38px;
  min-height: 38px;
  max-height: 38px;
  margin: 0;
  box-sizing: border-box;
}

.procurement-panel__filters-top-row > .procurement-panel__filter-field {
  align-self: flex-end;
}

.procurement-panel__filters-top-row .procurement-panel__filter--page-size .procurement-panel__filter-label {
  grid-row: 1;
  grid-column: 1;
  visibility: hidden;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
}

.procurement-panel__filters-top-row .procurement-panel__filter--page-size .custom-select,
.procurement-panel__filters-top-row .procurement-panel__filter--page-size .input--select {
  grid-row: 1;
  grid-column: 1;
  width: 100%;
  min-width: 0;
}

.procurement-panel__filters-top-row .procurement-panel__date-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  width: 28px;
  height: 38px;
  line-height: 1;
  margin: 0;
  align-self: center;
}

.procurement-panel__filter-control {
  height: 38px;
  min-height: 38px;
  max-height: 38px;
  box-sizing: border-box;
}

.procurement-panel__filter-control--search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--field-border-idle);
  border-radius: 10px;
  background: var(--field-input-bg);
  color: var(--text-muted);
  transition: border-color 0.2s;
}

.procurement-panel__filter-control--search svg {
  display: block;
  flex-shrink: 0;
}

.procurement-panel__filter-control--search:focus-within {
  border-color: var(--field-border-active);
}

.procurement-panel__filter-control--search .procurement-panel__search-input {
  flex: 1;
  min-width: 0;
  height: 38px;
  min-height: 38px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: var(--text-strong);
  font: inherit;
  font-size: 13px;
  line-height: 38px;
  caret-color: var(--text-strong);
  outline: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
}

.procurement-panel__filter-control--search .procurement-panel__search-input::-webkit-search-decoration,
.procurement-panel__filter-control--search .procurement-panel__search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.procurement-panel__filter-control--search .procurement-panel__search-input::placeholder {
  color: var(--text-placeholder);
  line-height: 38px;
  opacity: 1;
}

.procurement-panel__filter-control--search .procurement-panel__search-input:focus {
  outline: none;
  box-shadow: none;
}

.procurement-panel__filter-control--search .procurement-panel__date-clear {
  flex-shrink: 0;
  margin: 0;
  margin-inline-start: -4px;
}

.procurement-panel__filters-bottom {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.procurement-panel__filter--page-size {
  width: max-content;
  max-width: 100%;
  justify-self: start;
}

.procurement-panel__filter--page-size .procurement-panel__filter-label {
  white-space: nowrap;
}

.procurement-panel__filter--page-size .custom-select {
  width: 100%;
}

body.page-procurement .procurement-panel__filter--page-size .custom-select__trigger.input.input--status {
  height: 38px;
  min-height: 38px;
  padding: 0 14px;
  font-size: 13px;
  background: var(--field-input-bg);
}

body.page-dashboard .procurement-panel__filter--page-size .custom-select__trigger.input.input--status {
  height: 38px;
  min-height: 38px;
  padding: 0 14px;
  font-size: 13px;
  background: var(--field-input-bg);
}

body.page-notifications .procurement-panel__filter--page-size .custom-select__trigger.input.input--status {
  width: 100%;
  height: 38px;
  min-height: 38px;
  max-height: 38px;
  margin: 0;
  padding: 0 14px;
  font-size: 13px;
  font-weight: normal;
  line-height: 1.2;
  color: var(--text);
  background: var(--field-input-bg);
  border: 1px solid var(--field-border-idle);
  border-radius: 10px;
  box-sizing: border-box;
}

body.page-notifications .procurement-panel__filters-top-row > .notif-panel__module-field {
  flex: 0 0 auto;
  align-self: center;
  width: max-content;
  min-width: 168px;
  margin: 0;
  gap: 0;
}

body.page-notifications .notif-panel__module-filter {
  display: flex;
  align-items: center;
  width: max-content;
  min-width: 168px;
  height: 38px;
  min-height: 38px;
  max-height: 38px;
  margin: 0;
  gap: 0;
}

body.page-notifications .notif-panel__module-filter .custom-select,
body.page-notifications .notif-panel__module-filter .input--select {
  width: 100%;
  min-width: 168px;
  height: 38px;
}

body.page-notifications .notif-panel__module-filter .custom-select__trigger.input.input--status {
  width: 100%;
  height: 38px;
  min-height: 38px;
  max-height: 38px;
  margin: 0;
  padding: 0 14px;
  font-size: 13px;
  font-weight: normal;
  line-height: 1.2;
  color: var(--text);
  background: var(--field-input-bg);
  border: 1px solid var(--field-border-idle);
  border-radius: 10px;
  box-sizing: border-box;
}

/* ---------- پنل تاریخچه (هم‌سبک درخواست خرید) ---------- */

.history-panel__subtitle {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.history-panel .procurement-panel__table-head,
.history-panel .procurement-panel__row {
  direction: ltr;
  width: 100%;
  box-sizing: border-box;
}

.history-panel .procurement-panel__table-head .procurement-panel__th,
.history-panel .procurement-panel__table-head .procurement-panel__th--sortable,
.history-panel .procurement-panel__cell {
  direction: rtl;
}

.history-panel__actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
}

.history-panel__row {
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.history-panel__row[data-job-id] {
  cursor: pointer;
}

.history-panel__row--removing {
  opacity: 0;
  transform: translateX(12px);
  pointer-events: none;
}

.history-panel__row--processing {
  border-inline-start: 3px solid var(--proc-status-in-progress);
  background: var(--row-hover);
}

.history-panel__processing-title {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
  overflow: visible;
  white-space: normal;
}

.history-panel__processing-name {
  font-weight: 600;
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-panel__job-progress {
  width: 100%;
  margin: 0;
}

.history-panel__job-progress .bot-progress__header {
  margin-bottom: 6px;
}

.history-panel__job-progress .bot-progress__label {
  font-size: 12px;
}

.history-panel__job-progress .bot-progress__percent {
  font-size: 12px;
}

.history-panel__job-progress .progress-bg {
  height: 12px;
}

.history-panel .procurement-panel__cell--id,
.history-panel__cell--id {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 11px;
  direction: ltr;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-panel__cell--type {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-panel__cell--title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-panel__cell--date,
.history-panel__cell--num {
  text-align: center;
}

.history-panel .procurement-panel__th--actions {
  text-align: center;
}

.history-panel .procurement-panel__th--sortable[data-sort="jobId"],
.history-panel .procurement-panel__th--sortable[data-sort="date"] {
  justify-content: center;
  width: 100%;
}

.history-panel .procurement-panel__th--sortable[data-sort="title"] {
  justify-content: flex-start;
  width: 100%;
}

.history-panel .procurement-panel__table-head .procurement-panel__th,
.history-panel .procurement-panel__table-head .procurement-panel__th--sortable {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.history-panel .procurement-panel__table-head .procurement-panel__th:nth-child(3),
.history-panel .procurement-panel__table-head .procurement-panel__th:nth-child(6) {
  text-align: center;
}

body.page-dashboard .history-panel .history-icon-btn,
body.page-procurement .procurement-panel .history-icon-btn,
body.page-notifications .notif-panel .history-icon-btn {
  width: 24px;
  min-width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
}

body.page-dashboard .history-panel .history-icon-btn:hover,
body.page-procurement .procurement-panel .history-icon-btn:hover,
body.page-notifications .notif-panel .history-icon-btn:hover {
  border: none;
  border-radius: 50%;
  background: var(--row-hover);
  color: var(--text-strong);
}

body.page-dashboard .history-panel .history-icon-btn--delete:hover,
body.page-procurement .procurement-panel .history-icon-btn--delete:hover,
body.page-notifications .notif-panel .history-icon-btn--delete:hover {
  border: none;
  background: var(--status-red-delete-bg);
  color: var(--status-red-text);
}

/* داشبورد — صفحه‌بندی در نوار فیلتر */
.history-panel__toolbar-end {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  margin-inline-start: auto;
}

.history-panel__toolbar-end > .procurement-panel__filter-field--page-size {
  margin-inline-start: 0;
}

body.page-dashboard .history-panel .procurement-panel__filters-top-row > .procurement-panel__filter-field--search,
body.page-procurement .procurement-panel__filters-top-row > .procurement-panel__filter-field--search,
body.page-admin-users .procurement-panel.admin-users-panel .procurement-panel__filters-top-row > .procurement-panel__filter-field--search {
  flex: 0 1 30%;
  width: 30%;
  max-width: 30%;
  min-width: 132px;
}

body.page-dashboard .history-panel__page-nav,
body.page-procurement .history-panel__page-nav,
body.page-admin-users .history-panel__page-nav,
body.page-notifications .history-panel__page-nav {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  gap: 10px;
  flex: 0 0 auto;
  min-height: 38px;
  white-space: nowrap;
}

body.page-dashboard .history-panel__page-range,
body.page-procurement .history-panel__page-range,
body.page-admin-users .history-panel__page-range,
body.page-notifications .history-panel__page-range {
  font-size: 12px;
  line-height: 1;
  color: var(--text-muted);
}

body.page-dashboard .history-panel__page-arrows,
body.page-procurement .history-panel__page-arrows,
body.page-admin-users .history-panel__page-arrows,
body.page-notifications .history-panel__page-arrows {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  direction: ltr;
}

body.page-dashboard .history-panel__page-arrow,
body.page-procurement .history-panel__page-arrow,
body.page-admin-users .history-panel__page-arrow,
body.page-notifications .history-panel__page-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

body.page-dashboard .history-panel__page-arrow:hover:not(:disabled),
body.page-procurement .history-panel__page-arrow:hover:not(:disabled),
body.page-admin-users .history-panel__page-arrow:hover:not(:disabled),
body.page-notifications .history-panel__page-arrow:hover:not(:disabled) {
  background: var(--row-hover);
  color: var(--text-strong);
}

body.page-dashboard .history-panel__page-arrow:disabled,
body.page-procurement .history-panel__page-arrow:disabled,
body.page-admin-users .history-panel__page-arrow:disabled,
body.page-notifications .history-panel__page-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

body.page-dashboard .history-panel__page-arrow svg,
body.page-procurement .history-panel__page-arrow svg,
body.page-notifications .history-panel__page-arrow svg {
  display: block;
  flex-shrink: 0;
}

body.page-dashboard .history-panel .procurement-panel__pagination,
body.page-procurement .procurement-panel__pagination {
  display: none;
}

body.page-procurement .procurement-panel__table-head:not(.actions-panel__table-head) {
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  padding: 0 10px;
  box-sizing: border-box;
  align-items: center;
}

body.page-procurement .procurement-panel__table-head .procurement-panel__th--sortable:hover,
body.page-procurement .procurement-panel__table-head .procurement-panel__th--sortable:focus,
body.page-procurement .procurement-panel__table-head .procurement-panel__th--sortable:focus-visible,
body.page-procurement .procurement-panel__table-head .procurement-panel__th--sortable:active {
  transform: none;
}

body.page-procurement .procurement-panel__row {
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  padding: 0 10px;
  box-sizing: border-box;
  align-items: center;
}

body.page-procurement .procurement-panel__row .procurement-panel__cell {
  font-size: 12px;
}

body.page-dashboard .history-panel .procurement-panel__table-head {
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  padding: 0 10px;
  box-sizing: border-box;
  align-items: center;
}

body.page-dashboard .history-panel .procurement-panel__table-head .procurement-panel__th--sortable:hover,
body.page-dashboard .history-panel .procurement-panel__table-head .procurement-panel__th--sortable:focus,
body.page-dashboard .history-panel .procurement-panel__table-head .procurement-panel__th--sortable:focus-visible,
body.page-dashboard .history-panel .procurement-panel__table-head .procurement-panel__th--sortable:active {
  transform: none;
}

body.page-dashboard .history-panel .procurement-panel__row:not(.history-panel__row--processing) {
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  padding: 0 10px;
  box-sizing: border-box;
  align-items: center;
}

body.page-dashboard .history-panel .procurement-panel__row--processing {
  height: auto;
  min-height: 40px;
  max-height: none;
  padding: 8px 10px;
  box-sizing: border-box;
  align-items: center;
  overflow: visible;
}

body.page-dashboard .history-panel .procurement-panel__cell {
  font-size: 12px;
}

body.page-dashboard .history-panel__cell--type {
  font-size: 11px;
}

body.page-dashboard .history-panel .procurement-panel__cell--id,
body.page-dashboard .history-panel__cell--id {
  font-size: 10px;
}

body.page-dashboard .history-panel__actions,
body.page-procurement .history-panel__actions,
body.page-notifications .history-panel__actions {
  gap: 4px;
}

body.page-dashboard .history-panel__processing-title {
  gap: 6px;
}

body.page-dashboard .history-panel__job-progress .bot-progress__header {
  margin-bottom: 4px;
}

body.page-dashboard .history-panel__job-progress .bot-progress__label,
body.page-dashboard .history-panel__job-progress .bot-progress__percent {
  font-size: 11px;
}

body.page-dashboard .history-panel__job-progress .progress-bg {
  height: 8px;
}

body.page-dashboard .history-panel .procurement-panel__sk {
  height: 10px;
}

body.page-dashboard .history-panel .procurement-panel__sk--badge {
  height: 16px;
}

body.page-dashboard .history-panel .procurement-panel__table-head,
body.page-dashboard .history-panel .procurement-panel__row {
  gap: 6px 7px;
}

body.page-dashboard .history-icon-svg,
body.page-procurement .history-icon-svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 900px) {
  .history-panel .procurement-panel__filters .procurement-panel__table-head,
  .history-panel .procurement-panel__table-head,
  .history-panel .procurement-panel__row {
    min-width: 760px;
  }
}

body.page-procurement .procurement-modal__field .custom-select__trigger.input.input--status {
  min-height: 38px;
  padding: 10px 12px;
  font-size: 13px;
}

.procurement-panel__filter {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.procurement-panel__filter-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.procurement-panel__select,
.procurement-panel__input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--field-border-idle);
  border-radius: 10px;
  background: var(--field-input-bg);
  color: var(--text-strong);
  font: inherit;
  font-size: 13px;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.procurement-panel__select:focus,
.procurement-panel__input:focus {
  outline: none;
}

.procurement-panel__date-range {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
}

.procurement-panel__date-sep {
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.procurement-panel__date-field,
.procurement-modal__date-field {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 38px;
  border: 1px solid var(--field-border-idle);
  border-radius: 10px;
  background: var(--field-input-bg);
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.procurement-panel__date-field:focus-within,
.procurement-modal__date-field:focus-within {
  border-color: var(--field-border-active);
}

.procurement-modal__date-field {
  background: var(--field-input-bg);
}

.procurement-panel__date-field .procurement-panel__input--date,
.procurement-modal__date-field .procurement-modal__input--jalali-date {
  flex: 1;
  min-width: 0;
  width: auto;
  height: 100%;
  margin: 0;
  padding: 0 8px 0 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.procurement-panel__date-field .procurement-panel__input--date:focus,
.procurement-modal__date-field .procurement-modal__input--jalali-date:focus {
  outline: none;
  border-color: transparent;
  box-shadow: none;
}

.procurement-panel__date-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  margin: 0 4px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.procurement-panel__date-clear:hover {
  color: var(--primary);
  background: var(--status-red-bg);
}

.procurement-panel__date-clear[hidden] {
  display: none !important;
}

.procurement-panel__input--date {
  flex: 1;
  min-width: 0;
  padding: 0 8px;
  line-height: 1;
  vertical-align: middle;
}

.procurement-panel__input--jalali,
.procurement-modal__input--jalali-date {
  cursor: pointer;
  text-align: right;
  direction: rtl;
}

.procurement-panel__filter-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding-top: 2px;
}

.procurement-panel__filter-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}

.procurement-panel__filter-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.procurement-panel__filter-check-box {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  background: var(--card);
  transition: background 0.15s, border-color 0.15s;
  position: relative;
  flex-shrink: 0;
}

.procurement-panel__filter-checkbox:checked + .procurement-panel__filter-check-box {
  background: var(--primary);
  border-color: var(--primary);
}

.procurement-panel__filter-checkbox:checked + .procurement-panel__filter-check-box::after {
  content: "";
  position: absolute;
  inset: 2px 4px 3px 3px;
  border: solid var(--btn-on-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.procurement-panel__filter-check:hover .procurement-panel__filter-check-box {
  border-color: var(--primary);
}

.procurement-panel__table-head-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-top: 2px;
}

.procurement-panel__table-head-wrap::-webkit-scrollbar {
  display: none;
}

.procurement-panel__filters .procurement-panel__table-head:not(.actions-panel__table-head) {
  margin: 0;
  min-width: 980px;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
}

.procurement-panel__table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 14px 14px;
  background: var(--card);
}

.procurement-panel__table-wrap:has(.custom-select.is-open) {
  position: relative;
  z-index: 130;
  overflow: visible;
}

.procurement-panel__table {
  min-width: 980px;
}

.procurement-panel__table-head:not(.actions-panel__table-head),
.procurement-panel__row {
  display: grid;
  grid-template-columns:
    36px
    minmax(100px, 0.9fr)
    88px
    minmax(110px, 1.1fr)
    minmax(100px, 1fr)
    minmax(120px, 1.2fr)
    108px
    72px
    108px;
  gap: 8px 10px;
  align-items: center;
}

/* history-panel: ۶ ستون — باید بعد از گرید عمومی procurement بیاید */
.history-panel .procurement-panel__table-head:not(.actions-panel__table-head),
.history-panel .procurement-panel__row {
  grid-template-columns:
    180px
    84px
    72px
    minmax(180px, 2.5fr)
    96px
    44px;
}

.history-panel .procurement-panel__filters .procurement-panel__table-head:not(.actions-panel__table-head),
.history-panel .procurement-panel__table {
  min-width: 792px;
}

.procurement-panel__table-head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-search-bg);
}

body.page-procurement .procurement-panel__table-head {
  padding-inline-start: calc(14px + 3px);
}

.procurement-panel__th {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-muted);
  text-align: right;
}

.procurement-panel__th--sortable {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-muted);
  text-align: right;
  cursor: pointer;
}

.procurement-panel__th--sortable:hover,
.procurement-panel__th--sortable:focus,
.procurement-panel__th--sortable:focus-visible,
.procurement-panel__th--sortable:active {
  color: var(--text-muted);
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
  transform: translateY(-1px);
}

.procurement-panel__sort-icon {
  display: inline-flex;
  color: var(--text-muted);
  opacity: 0.45;
}

.procurement-panel__sort-icon.is-active {
  opacity: 0.85;
  color: var(--text-muted);
}

.procurement-panel__sort-icon.is-asc {
  transform: rotate(180deg);
}

.procurement-panel__th--actions {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-muted);
  text-align: center;
}

.procurement-panel__table-body {
  display: flex;
  flex-direction: column;
}

.procurement-panel__row {
  position: relative;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  border-inline-start: 3px solid transparent;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.procurement-panel__row:last-child {
  border-bottom: none;
}

.procurement-panel__row:hover {
  background: var(--row-hover);
}

.procurement-panel__row:has(.procurement-panel__cell--status .custom-select.is-open) {
  position: relative;
  z-index: 50;
  overflow: visible;
}

.procurement-panel__row--pending {
  border-inline-start-color: var(--proc-status-pending);
}

.procurement-panel__row--in-progress {
  border-inline-start-color: var(--proc-status-in-progress);
}

.procurement-panel__row--done {
  border-inline-start-color: var(--status-green);
}

.procurement-panel__row--rejected {
  border-inline-start-color: var(--status-red);
}

.procurement-panel__cell {
  font-size: 13px;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* history-panel: ردیف آپلود/پردازش — پراگرس داخل ستون عنوان */
.history-panel .procurement-panel__row--processing {
  height: auto;
  min-height: 40px;
  max-height: none;
  overflow: visible;
}

.history-panel .procurement-panel__cell.history-panel__processing-title {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}

.history-panel .history-panel__job-progress.bot-progress {
  width: 100%;
  min-width: 0;
  margin: 0;
  flex-shrink: 0;
}

.history-panel .history-panel__job-progress .bot-progress__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
  min-width: 0;
}

.history-panel .history-panel__job-progress .bot-progress__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  text-align: right;
}

.history-panel .history-panel__job-progress .bot-progress__percent {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
}

.history-panel .history-panel__job-progress .progress-bg {
  position: relative;
  width: 100%;
  height: 8px;
  overflow: hidden;
}

.procurement-panel__cell--num {
  font-weight: 600;
  color: var(--text-strong);
}

.procurement-panel__cell--title,
.procurement-panel__cell--subject {
  font-weight: 500;
}

.procurement-panel__cell--actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.procurement-panel__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: default;
}

.procurement-panel__th--status {
  width: 100%;
  justify-content: center;
  text-align: center;
  transform: translateX(30px);
}

.procurement-panel__th--status:hover,
.procurement-panel__th--status:focus,
.procurement-panel__th--status:focus-visible,
.procurement-panel__th--status:active {
  transform: translateX(30px) translateY(-1px);
}

.procurement-panel__cell--status {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: visible;
  white-space: normal;
  transform: translateX(30px);
}

.procurement-panel__row--skeleton > :nth-child(7) {
  transform: translateX(30px);
}

.procurement-panel__cell--status:has(.custom-select.is-open) {
  position: relative;
  z-index: 51;
  overflow: visible;
}

.procurement-panel__cell--status .custom-select.is-open {
  position: relative;
  z-index: 52;
}

.procurement-panel__cell--status .custom-select {
  width: 100px;
  max-width: 100%;
  min-width: 100px;
  margin-inline: auto;
  flex-shrink: 0;
}

.procurement-panel__cell--status .custom-select__trigger {
  position: relative;
  width: 100px;
  max-width: 100px;
  min-width: 100px;
  box-sizing: border-box;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 2px 10px 2px 22px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  justify-content: center;
  text-align: center;
  box-shadow: none;
  transition: filter 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

body.page-procurement .procurement-panel__cell--status .custom-select__trigger.input.input--status,
body.page-dashboard .procurement-panel__cell--status .custom-select__trigger.input.input--status,
body.page-procurement .procurement-panel__cell--status .custom-select__trigger.input.input--status:hover,
body.page-procurement .procurement-panel__cell--status .custom-select.is-open .custom-select__trigger.input.input--status,
body.page-dashboard .procurement-panel__cell--status .custom-select__trigger.input.input--status:hover,
body.page-dashboard .procurement-panel__cell--status .custom-select.is-open .custom-select__trigger.input.input--status {
  width: 100px;
  min-width: 100px;
  max-width: 100px;
  box-sizing: border-box;
  padding: 2px 10px 2px 22px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  border-radius: 999px;
  justify-content: center;
  text-align: center;
}

.procurement-panel__cell--status .custom-select__trigger::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 9px;
  height: 9px;
  transform: translateY(-50%);
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  opacity: 0.9;
  pointer-events: none;
}

.procurement-panel__cell--status .custom-select__value {
  flex: 0 1 auto;
  text-align: center;
}

body.page-procurement .procurement-panel__cell--status .custom-select__trigger.procurement-panel__status-select--pending,
body.page-procurement .procurement-panel__cell--status .custom-select__trigger.procurement-panel__status-select--pending:hover,
body.page-procurement .procurement-panel__cell--status .custom-select.is-open .custom-select__trigger.procurement-panel__status-select--pending,
body.page-dashboard .procurement-panel__cell--status .custom-select__trigger.procurement-panel__status-select--pending,
body.page-dashboard .procurement-panel__cell--status .custom-select__trigger.procurement-panel__status-select--pending:hover,
body.page-dashboard .procurement-panel__cell--status .custom-select.is-open .custom-select__trigger.procurement-panel__status-select--pending {
  background: var(--proc-status-pending-bg);
  color: var(--proc-status-pending);
  border-color: var(--proc-status-pending-border);
}

body.page-procurement .procurement-panel__cell--status .custom-select__trigger.procurement-panel__status-select--in-progress,
body.page-procurement .procurement-panel__cell--status .custom-select__trigger.procurement-panel__status-select--in-progress:hover,
body.page-procurement .procurement-panel__cell--status .custom-select.is-open .custom-select__trigger.procurement-panel__status-select--in-progress,
body.page-dashboard .procurement-panel__cell--status .custom-select__trigger.procurement-panel__status-select--in-progress,
body.page-dashboard .procurement-panel__cell--status .custom-select__trigger.procurement-panel__status-select--in-progress:hover,
body.page-dashboard .procurement-panel__cell--status .custom-select.is-open .custom-select__trigger.procurement-panel__status-select--in-progress {
  background: var(--proc-status-in-progress-bg);
  color: var(--proc-status-in-progress);
  border-color: var(--proc-status-in-progress-border);
}

body.page-procurement .procurement-panel__cell--status .custom-select__trigger.procurement-panel__status-select--done,
body.page-procurement .procurement-panel__cell--status .custom-select__trigger.procurement-panel__status-select--done:hover,
body.page-procurement .procurement-panel__cell--status .custom-select.is-open .custom-select__trigger.procurement-panel__status-select--done,
body.page-dashboard .procurement-panel__cell--status .custom-select__trigger.procurement-panel__status-select--done,
body.page-dashboard .procurement-panel__cell--status .custom-select__trigger.procurement-panel__status-select--done:hover,
body.page-dashboard .procurement-panel__cell--status .custom-select.is-open .custom-select__trigger.procurement-panel__status-select--done {
  background: var(--status-green-bg);
  color: var(--status-green-text);
  border-color: var(--status-green-border);
}

body.page-procurement .procurement-panel__cell--status .custom-select__trigger.procurement-panel__status-select--rejected,
body.page-procurement .procurement-panel__cell--status .custom-select__trigger.procurement-panel__status-select--rejected:hover,
body.page-procurement .procurement-panel__cell--status .custom-select.is-open .custom-select__trigger.procurement-panel__status-select--rejected,
body.page-dashboard .procurement-panel__cell--status .custom-select__trigger.procurement-panel__status-select--rejected,
body.page-dashboard .procurement-panel__cell--status .custom-select__trigger.procurement-panel__status-select--rejected:hover,
body.page-dashboard .procurement-panel__cell--status .custom-select.is-open .custom-select__trigger.procurement-panel__status-select--rejected {
  background: var(--status-red-bg);
  color: var(--status-red-text);
  border-color: var(--status-red-border);
}

.procurement-panel__cell--status .custom-select__panel {
  left: 50%;
  right: auto;
  min-width: max(100%, 118px);
  transform: translateX(-50%);
  z-index: 200;
}

body.page-procurement .procurement-panel__cell--status .custom-select__panel,
body.page-dashboard .procurement-panel__cell--status .custom-select__panel {
  top: auto;
  bottom: calc(100% + 4px);
}

.procurement-panel__cell--status .custom-select__option {
  text-align: center;
  border-radius: 999px;
}

.procurement-panel__cell--status .custom-select__option.procurement-panel__status-option {
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
}

.procurement-panel__cell--status .procurement-panel__status-option--pending {
  background: var(--proc-status-pending-bg);
  color: var(--proc-status-pending);
  border-color: var(--proc-status-pending-border);
}

.procurement-panel__cell--status .procurement-panel__status-option--in-progress {
  background: var(--proc-status-in-progress-bg);
  color: var(--proc-status-in-progress);
  border-color: var(--proc-status-in-progress-border);
}

.procurement-panel__cell--status .procurement-panel__status-option--done {
  background: var(--status-green-bg);
  color: var(--status-green-text);
  border-color: var(--status-green-border);
}

.procurement-panel__cell--status .procurement-panel__status-option--rejected {
  background: var(--status-red-bg);
  color: var(--status-red-text);
  border-color: var(--status-red-border);
}

.procurement-panel__cell--status .procurement-panel__status-option--pending:hover,
.procurement-panel__cell--status .procurement-panel__status-option--pending:focus-visible,
.procurement-panel__cell--status .procurement-panel__status-option--pending.is-selected {
  background: var(--proc-status-pending-bg);
  color: var(--proc-status-pending);
  border-color: var(--proc-status-pending);
  filter: brightness(1.12);
}

.procurement-panel__cell--status .procurement-panel__status-option--in-progress:hover,
.procurement-panel__cell--status .procurement-panel__status-option--in-progress:focus-visible,
.procurement-panel__cell--status .procurement-panel__status-option--in-progress.is-selected {
  background: var(--proc-status-in-progress-bg);
  color: var(--proc-status-in-progress);
  border-color: var(--proc-status-in-progress);
  filter: brightness(1.12);
}

.procurement-panel__cell--status .procurement-panel__status-option--done:hover,
.procurement-panel__cell--status .procurement-panel__status-option--done:focus-visible,
.procurement-panel__cell--status .procurement-panel__status-option--done.is-selected {
  background: var(--status-green-bg);
  color: var(--status-green-text);
  border-color: var(--status-green-solid);
  filter: brightness(1.12);
}

.procurement-panel__cell--status .procurement-panel__status-option--rejected:hover,
.procurement-panel__cell--status .procurement-panel__status-option--rejected:focus-visible,
.procurement-panel__cell--status .procurement-panel__status-option--rejected.is-selected {
  background: var(--status-red-bg);
  color: var(--status-red-text);
  border-color: var(--status-red);
  filter: brightness(1.12);
}

body.page-procurement .procurement-panel__cell--status .custom-select__option.procurement-panel__status-option:hover,
body.page-dashboard .procurement-panel__cell--status .custom-select__option.procurement-panel__status-option:hover {
  transform: none;
}

.procurement-panel__badge--pending {
  background: var(--proc-status-pending-bg);
  color: var(--proc-status-pending);
  border-color: var(--proc-status-pending-border);
}

.procurement-panel__badge--in-progress {
  background: var(--proc-status-in-progress-bg);
  color: var(--proc-status-in-progress);
  border-color: var(--proc-status-in-progress-border);
}

.procurement-panel__badge--done {
  background: var(--status-green-bg);
  color: var(--status-green-text);
  border-color: var(--status-green-border);
}

.procurement-panel__badge--rejected {
  background: var(--status-red-bg);
  color: var(--status-red-text);
  border-color: var(--status-red-border);
}

.procurement-panel__priority {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.procurement-panel__priority--high {
  font-weight: 700;
  color: var(--primary);
}

.procurement-panel__priority--medium {
  color: var(--text);
}

.procurement-panel__priority--low {
  color: var(--text-muted);
  opacity: 0.75;
}

.procurement-panel__priority-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
}

.procurement-panel__action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-btn);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s;
}

.procurement-panel__action-btn:hover {
  background: var(--row-hover);
  color: var(--text-strong);
  transform: none;
}

.procurement-panel__action-btn--delete:hover {
  background: var(--status-red-delete-bg);
  color: var(--status-red-text);
  border-color: var(--status-red-border);
}

.procurement-panel__checkbox-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.procurement-panel__checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.procurement-panel__checkbox-box {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  background: var(--card);
  transition: background 0.15s, border-color 0.15s;
  position: relative;
}

.procurement-panel__checkbox:checked + .procurement-panel__checkbox-box {
  background: var(--primary);
  border-color: var(--primary);
}

.procurement-panel__checkbox:checked + .procurement-panel__checkbox-box::after {
  content: "";
  position: absolute;
  inset: 3px 5px 4px 4px;
  border: solid var(--btn-on-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.procurement-panel__checkbox:indeterminate + .procurement-panel__checkbox-box {
  background: var(--card);
  border-color: var(--primary);
}

.procurement-panel__checkbox:indeterminate + .procurement-panel__checkbox-box::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: var(--primary);
  border: none;
  transform: none;
}

.procurement-panel__empty {
  padding: 48px 20px;
  text-align: center;
}

.procurement-panel__empty p {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
}

.procurement-panel__row--skeleton {
  pointer-events: none;
}

.procurement-panel__sk {
  display: block;
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    var(--muted) 0%,
    var(--row-hover) 50%,
    var(--muted) 100%
  );
  background-size: 200% 100%;
  animation: procurementShimmer 1.4s ease infinite;
}

.procurement-panel__sk--check {
  width: 18px;
  height: 18px;
}

.procurement-panel__sk--sm {
  width: 60%;
}

.procurement-panel__sk--md {
  width: 75%;
}

.procurement-panel__sk--lg {
  width: 90%;
}

.procurement-panel__sk--badge {
  width: 72px;
  height: 22px;
  border-radius: 999px;
}

.procurement-panel__sk--actions {
  width: 96px;
  margin-inline: auto;
}

@keyframes procurementShimmer {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

.procurement-panel__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
  padding-top: 4px;
}

.procurement-panel__page-btn {
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-btn);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.procurement-panel__page-btn:hover:not(:disabled) {
  background: var(--row-hover);
  border-color: var(--primary);
}

.procurement-panel__page-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.procurement-panel__page-info {
  font-size: 13px;
  color: var(--text-muted);
}

/* Modal */

.procurement-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--overlay);
  animation: procurementFadeIn 0.2s ease;
}

/* مودال ساخت/افزودن زیراقدام باید روی مودال جزئیات تسک بیاید */
body.task-modal-open .procurement-modal-overlay[data-role="create-modal"] {
  z-index: 13000;
}

.procurement-modal-overlay[hidden] {
  display: none !important;
}

@keyframes procurementFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.procurement-modal {
  width: min(640px, 100%);
  max-height: min(90vh, 720px);
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-panel);
  animation: procurementModalIn 0.25s ease;
}

@keyframes procurementModalIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }

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

.procurement-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}

.procurement-modal__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-strong);
}

.procurement-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-btn);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.procurement-modal__close:hover {
  background: var(--row-hover);
  color: var(--text-strong);
}

.procurement-modal__form {
  padding: 20px;
}

.procurement-modal__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

.procurement-modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.procurement-modal__field--full {
  grid-column: 1 / -1;
}

.procurement-modal__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.procurement-modal__input,
.procurement-modal__select,
.procurement-modal__textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--field-border-idle);
  border-radius: 10px;
  background: var(--field-input-bg);
  color: var(--text-strong);
  font: inherit;
  font-size: 13px;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.procurement-modal__textarea {
  resize: vertical;
  min-height: 88px;
}

.procurement-modal__input:focus,
.procurement-modal__select:focus,
.procurement-modal__textarea:focus {
  outline: none;
}

.procurement-modal__input:disabled,
.procurement-modal__select:disabled,
.procurement-modal__textarea:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.procurement-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

body.procurement-modal-open {
  overflow: hidden;
}

@media (max-width: 960px) {
  .procurement-panel__filters-top-head {
    display: none;
  }

  .procurement-panel__filter-label--field {
    display: block;
  }

  .procurement-panel__filters-top-row {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    gap: 12px;
  }

  .procurement-panel__filters-top-row > .procurement-panel__filter-field,
  .procurement-panel__filters-top-row > .procurement-panel__filter-field--search,
  .procurement-panel__filters-top-row > .procurement-panel__filter-field--date-from,
  .procurement-panel__filters-top-row > .procurement-panel__filter-field--date-to,
  .procurement-panel__filters-top-row > .procurement-panel__filter-field--page-size {
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
    margin-inline-start: 0;
    align-self: stretch;
  }

  .procurement-panel__filters-top-row .procurement-panel__date-sep {
    display: none;
  }

  .procurement-panel__filters-top-row > .procurement-panel__filter-field--search .procurement-panel__filter-control--search,
  .procurement-panel__filters-top-row > .procurement-panel__filter-field--date-from .procurement-panel__date-field,
  .procurement-panel__filters-top-row > .procurement-panel__filter-field--date-to .procurement-panel__date-field {
    width: 100%;
    max-width: none;
    height: 38px;
    min-height: 38px;
    max-height: 38px;
  }

  .procurement-panel__filters-top-row > .procurement-panel__filter-field--page-size .procurement-panel__filter--page-size {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    max-height: none;
    margin-inline-start: 0;
  }

  .procurement-panel__filters-top-row .procurement-panel__filter--page-size .procurement-panel__filter-label {
    display: none;
  }

  .procurement-panel__filters-bottom {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  body.page-procurement.has-app-page-header .app-header,
  body.page-dashboard.has-app-page-header .app-header {
    flex-wrap: nowrap;
    align-items: center;
    height: var(--app-header-height);
    min-height: var(--app-header-height);
    padding: 0 12px 0 16px;
    gap: 10px;
  }

  body.page-procurement.has-app-page-header .app-header__actions,
  body.page-dashboard.has-app-page-header .app-header__actions {
    width: auto;
    flex-shrink: 0;
    padding-top: 0;
  }

  body.page-procurement.has-app-page-header .app-header__main,
  body.page-dashboard.has-app-page-header .app-header__main {
    flex: 1;
    min-width: 0;
  }

  body.page-procurement.has-app-page-header .procurement-panel__filters,
  body.page-dashboard.has-app-page-header .procurement-panel__filters,
  body.page-actions.has-app-page-header .procurement-panel__filters,
  body.page-admin-users.has-app-page-header .procurement-panel__filters,
  body.page-actions.has-app-page-header .actions-panel__filters {
    position: static;
  }

  .app-header__meta .procurement-panel__legend {
    gap: 4px 8px;
  }

  .app-header__meta .procurement-panel__legend-item {
    font-size: 10px;
  }

  .procurement-panel__pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 12px;
    margin-bottom: 8px;
  }

  .procurement-panel__page-info {
    flex: 1 1 100%;
    text-align: center;
  }

  .procurement-panel__table-wrap {
    border-radius: 0 0 12px 12px;
  }

  .procurement-panel__filters .procurement-panel__table-head {
    border-radius: 12px 12px 0 0;
  }

  .actions-panel__filters .procurement-panel__table-head.actions-panel__table-head {
    border-radius: 12px 12px 0 0;
  }
}

@media (max-width: 640px) {
  body.page-procurement.has-app-sidebar:not(.app-sidebar-drawer),
  body.page-dashboard.has-app-sidebar:not(.app-sidebar-drawer),
  body.page-actions.has-app-sidebar:not(.app-sidebar-drawer) {
    padding-right: var(--app-sidebar-width);
    padding-left: 0;
  }

  body.page-procurement.has-app-sidebar .procurement-panel,
  body.page-dashboard.has-app-sidebar .history-panel,
  body.page-admin-users.has-app-sidebar .procurement-panel.admin-users-panel,
  body.page-actions.has-app-sidebar .actions-panel {
    padding: 0;
  }

  body.page-dashboard.has-app-sidebar .procurement-panel__filters,
  body.page-procurement.has-app-sidebar .procurement-panel__filters,
  body.page-actions.has-app-sidebar .procurement-panel__filters,
  body.page-admin-users.has-app-sidebar .procurement-panel__filters {
    padding-top: 12px;
    padding-inline: 12px;
  }

  .procurement-panel__filter-checks {
    gap: 8px 12px;
  }

  .procurement-panel__date-sep {
    text-align: right;
    padding-inline: 2px;
  }

  .procurement-modal__grid {
    grid-template-columns: 1fr;
  }

  .procurement-modal__footer {
    flex-direction: column-reverse;
  }

  .procurement-modal__footer .procurement-panel__btn {
    width: 100%;
  }
}

/* ---------- موبایل و عرض کم (تکمیل) ---------- */

body.page-home {
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
}

body.page-home.has-app-sidebar .app-main .card {
  width: min(360px, 100%);
  max-width: 100%;
  margin-inline: auto;
}

@media (max-width: 768px) {
  body.page-dashboard.has-app-sidebar:not(.app-sidebar-drawer),
  body.page-procurement.has-app-sidebar:not(.app-sidebar-drawer) {
    padding: 0;
    padding-right: var(--app-sidebar-width);
    padding-left: 0;
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0));
  }

  body.page-result.has-app-sidebar:not(.app-sidebar-drawer) {
    padding: 0;
    padding-right: var(--app-sidebar-width);
    padding-left: 0;
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0));
  }

  body.page-dashboard.has-app-sidebar.app-sidebar-drawer,
  body.page-procurement.has-app-sidebar.app-sidebar-drawer {
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0));
  }

  body.page-result.has-app-sidebar.app-sidebar-drawer {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0));
  }

  body.page-result.has-app-sidebar .app-main {
    padding: 16px 17px calc(88px + env(safe-area-inset-bottom, 0));
  }

  body.page-result.has-app-sidebar .card--wide,
  body.page-result.has-app-sidebar .card--result {
    padding: 18px 14px 22px;
    border-radius: 12px;
  }

  body.page-home.has-app-sidebar .app-main {
    padding: 16px 12px;
    justify-content: center;
    min-height: 100dvh;
    box-sizing: border-box;
  }

  body.page-home.has-app-sidebar .app-main .card {
    padding: 28px 20px;
  }

  body.page-home.has-app-sidebar .app-main .card h2 {
    font-size: 17px;
    text-align: center;
    line-height: 1.5;
  }

  .card--wide {
    width: 100%;
    max-width: 100%;
  }

  .app-header__main {
    min-width: 0;
    overflow: hidden;
  }

  .app-header__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-header__actions {
    flex-shrink: 0;
  }

  .bot-modal {
    width: 100%;
    max-height: min(96dvh, 100%);
  }

  .bot-modal .card--bot {
    padding: 44px 16px 20px;
  }

  .bot-modal-overlay {
    padding: 10px;
    align-items: flex-start;
  }

  .drop-area {
    padding: 18px 14px;
  }

  .bot-file-actions {
    flex-direction: column;
  }

  .bot-file-actions .bot-btn {
    width: 100%;
  }

  .attendees-box,
  .cc-recipients-box,
  .actions-box,
  .decisions-box,
  .agenda-box {
    overflow-x: visible;
  }

  .attendee-row,
  .cc-recipient-row {
    grid-template-columns: 36px 28px 1fr auto;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--field-bg);
    margin-bottom: 0;
  }

  .cc-recipient-row .result-row__order {
    grid-row: 1 / span 3;
  }

  .attendee-row__rule,
  .result-row__rule {
    display: none;
  }

  .result-row__order {
    grid-column: 1;
    grid-row: 1 / span 4;
    align-self: start;
    flex-direction: row;
    height: auto;
    gap: 6px;
    padding-top: 2px;
  }

  .result-row__reorder {
    opacity: 0.55;
    transform: none;
  }

  .attendee-input--name,
  .cc-recipient-row .attendee-input--name {
    grid-column: 3 / 5;
    grid-row: 1;
  }

  .attendee-input--role,
  .cc-recipient-row .attendee-input--role {
    grid-column: 2 / 5;
    grid-row: 2;
  }

  .attendee-email-field,
  .cc-recipient-row .attendee-email-field {
    grid-column: 2 / 5;
    grid-row: 3;
    min-width: 0;
  }

  .attendee-row > .attendee-row__avatar,
  .cc-recipient-row > .cc-recipient-row__avatar {
    grid-column: 2;
    grid-row: 1;
  }

  .attendee-row > .attendance-toggle {
    grid-column: 3;
    grid-row: 4;
    justify-self: start;
  }

  .cc-recipient-row > .cc-recipient-row__attendance-spacer {
    display: none;
  }

  .attendee-row > .attendee-row-remove,
  .cc-recipient-row > .cc-recipient-row-remove {
    grid-column: 4;
    justify-self: end;
  }

  .attendee-row > .attendee-row-remove {
    grid-row: 4;
  }

  .cc-recipient-row > .cc-recipient-row-remove {
    grid-row: 3;
  }

  .cc-recipient-row::after {
    display: none;
  }

  .action-row {
    grid-template-columns: 36px 28px 1fr auto;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--field-bg);
    margin-bottom: 0;
  }

  .action-row .result-row__order {
    grid-column: 1;
    grid-row: 1 / 6;
    align-self: start;
    flex-direction: row;
    height: auto;
    gap: 6px;
    padding-top: 2px;
  }

  .action-row-remove {
    grid-column: 4;
    grid-row: 1;
    align-self: start;
  }

  .card--result .action-row .action-input--task {
    grid-column: 2 / 5;
    grid-row: 2;
    width: 100% !important;
    max-width: none !important;
  }

  .action-row__owner-avatar {
    grid-column: 2;
    grid-row: 3;
  }

  .action-input--owner {
    grid-column: 3 / 5;
    grid-row: 3;
  }

  .action-input--deadline {
    grid-column: 3;
    grid-row: 4;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .action-deadline-picker {
    grid-column: 4;
    grid-row: 4;
  }

  .action-row__follow-up-avatar {
    grid-column: 2;
    grid-row: 5;
  }

  .action-input--follow-up {
    grid-column: 3 / 5;
    grid-row: 5;
  }

  .decision-row {
    grid-template-columns: 36px 1fr auto;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--field-bg);
  }

  .agenda-row {
    grid-template-columns: 36px 1fr auto;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--field-bg);
  }

  .agenda-row .result-row__order,
  .decision-row .result-row__order {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    flex-direction: row;
    height: auto;
    gap: 6px;
    padding-top: 2px;
  }

  .btn-add-email {
    width: 100%;
    margin-inline-start: 0;
    justify-content: center;
    text-align: center;
  }

  .card--result h3,
  .card--result .section-title--after-status {
    font-size: 15px;
  }

  .next-meeting-date-field {
    max-width: none;
  }

  .next-meeting-date-field .input--next-meeting-date {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  body.page-dashboard.has-app-sidebar .procurement-panel__filters,
  body.page-procurement.has-app-sidebar .procurement-panel__filters,
  body.page-actions.has-app-sidebar .procurement-panel__filters,
  body.page-admin-users.has-app-sidebar .procurement-panel__filters {
    padding-inline: 12px;
  }

  body.page-dashboard.has-app-sidebar .procurement-panel__table-wrap,
  body.page-dashboard.has-app-sidebar .procurement-panel__pagination,
  body.page-procurement.has-app-sidebar .procurement-panel__table-wrap,
  body.page-procurement.has-app-sidebar .procurement-panel__pagination,
  body.page-admin-users.has-app-sidebar .procurement-panel__table-wrap,
  body.page-actions.has-app-sidebar .actions-panel__table-wrap,
  body.page-actions.has-app-sidebar .actions-panel__kanban {
    margin-inline: 12px;
    max-width: calc(100% - 24px);
  }

  body.page-procurement.has-app-sidebar .procurement-panel__filters,
  body.page-actions.has-app-sidebar .procurement-panel__filters {
    padding-inline: 12px;
  }

  .procurement-panel__header-actions {
    flex-wrap: wrap;
  }

  .procurement-panel__search {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 480px) {
  body.page-home.has-app-sidebar .app-main .card {
    padding: 24px 16px;
  }

  .confirm-dialog__actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .confirm-dialog__btn {
    width: 100%;
    min-width: 0;
  }

  .app-header {
    padding-inline: 12px;
    gap: 8px;
  }

  .app-header__title {
    font-size: 16px;
  }

  .app-header__btn {
    min-width: 40px;
    padding: 0 10px;
  }

  .procurement-modal-overlay {
    padding: 10px;
    align-items: flex-start;
  }

  .procurement-modal {
    width: 100%;
    max-height: min(94dvh, 100%);
  }

  .procurement-modal__form {
    padding: 16px 14px;
  }

  .procurement-modal__header {
    padding: 14px;
  }

  .email-panel-overlay,
  .bot-modal-overlay,
  .confirm-dialog-overlay {
    padding: 8px;
  }
}

/* =========================
   Page loader (post-login)
   ========================= */

.app-main.page-loader-active {
  position: relative;
}

.app-main.page-loader-active > :not(.page-loader),
.admin-main.page-loader-active > :not(.page-loader) {
  visibility: hidden;
}

.page-loader {
  position: fixed;
  top: 0;
  left: 0;
  right: var(--app-sidebar-width, 0);
  bottom: 0;
  z-index: 160;
  display: flex;
  align-items: center;
  justify-content: center;
}

body:not(.has-app-sidebar) .page-loader {
  right: 0;
}

.page-loader__backdrop {
  position: absolute;
  inset: 0;
  background: var(--bg);
}

.page-loader__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.page-loader__lottie {
  width: min(280px, 72vw);
  height: min(280px, 72vw);
}

.page-loader--hiding {
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
}

/* =========================
   Actions Module — سامانه اقدامات
   ========================= */

.app-header__btn--secondary {
  background: var(--surface-btn);
  border-color: var(--border);
  color: var(--text);
}

.app-header__btn--secondary:hover:not(:disabled) {
  background: var(--row-hover);
}

.app-header__btn--with-badge {
  position: relative;
}

.app-header__btn-badge {
  position: absolute;
  top: -6px;
  left: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  background: var(--status-red);
  color: var(--btn-on-primary);
  border: 2px solid var(--card);
}

.actions-panel {
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  /* نسبت ثابت — با resize صفحه یا باز/بسته شدن سایدبار همه ستون‌ها به‌هم‌نسبت scale می‌شوند */
  --actions-grid-columns:
    minmax(0, 18fr)
    minmax(0, 8fr)
    minmax(0, 8fr)
    minmax(0, 6fr)
    minmax(0, 9fr)
    minmax(0, 7fr)
    minmax(0, 11fr)
    minmax(0, 2.5fr);
}

.actions-panel__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.actions-panel__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

.actions-panel__legend-count {
  font-weight: 700;
  color: var(--text-strong);
}

.actions-panel__legend-item::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.actions-panel__legend-item--mine::before {
  background: var(--proc-status-in-progress);
}

.actions-panel__legend-item--delegated::before {
  background: var(--primary);
}

.actions-panel__legend-item--overdue::before {
  background: var(--status-red);
}

.actions-panel__legend-item--pending-approval::before {
  background: var(--proc-status-pending);
}

.app-header__meta .actions-panel__legend {
  margin-top: 2px;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.actions-panel__filters,
.actions-panel .procurement-panel__filters.actions-panel__filters {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 14px 24px 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: var(--panel-search-bg);
}

body.page-actions.has-app-page-header .actions-panel__filters,
body.page-actions.has-app-page-header .actions-panel .procurement-panel__filters.actions-panel__filters,
body.page-notifications.has-app-page-header .actions-panel__filters,
body.page-notifications.has-app-page-header .actions-panel .procurement-panel__filters.actions-panel__filters {
  position: sticky;
  top: var(--app-header-height);
  z-index: 120;
}

body.page-actions.has-app-sidebar .actions-panel__filters,
body.page-actions.has-app-sidebar .actions-panel .procurement-panel__filters.actions-panel__filters,
body.page-notifications.has-app-sidebar .actions-panel__filters,
body.page-notifications.has-app-sidebar .actions-panel .procurement-panel__filters.actions-panel__filters {
  padding-inline: 16px;
}

.actions-panel__filters--kanban [data-role="list-table-head"] {
  display: none !important;
}

.actions-panel__table-head,
.actions-panel__list-row {
  display: grid;
  grid-template-columns: var(--actions-grid-columns);
  gap: 8px 10px;
  align-items: center;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 12px;
  height: 40px;
}

.actions-panel__table-head {
  background: var(--panel-search-bg);
  border-bottom: 1px solid var(--border);
}

body.page-actions .actions-panel__table-head {
  padding-inline-start: 12px;
}

.actions-panel__filters .procurement-panel__table-head.actions-panel__table-head {
  margin: 0;
  width: 100%;
  min-width: 900px;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
}

body.page-actions .procurement-panel__table-head.actions-panel__table-head {
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  padding: 0 10px;
  box-sizing: border-box;
  align-items: center;
}

body.page-actions .actions-panel__table-head .procurement-panel__th--sortable:hover,
body.page-actions .actions-panel__table-head .procurement-panel__th--sortable:focus,
body.page-actions .actions-panel__table-head .procurement-panel__th--sortable:focus-visible,
body.page-actions .actions-panel__table-head .procurement-panel__th--sortable:active,
body.page-actions .actions-panel__table-head .procurement-panel__th--status:hover,
body.page-actions .actions-panel__table-head .procurement-panel__th--status:focus,
body.page-actions .actions-panel__table-head .procurement-panel__th--status:focus-visible,
body.page-actions .actions-panel__table-head .procurement-panel__th--status:active {
  color: var(--text-muted);
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
  transform: none;
}

body.page-actions .actions-panel__table-head .procurement-panel__th--status {
  transform: none;
  justify-content: flex-start;
  text-align: right;
}

body.page-actions .actions-panel__list-row .actions-panel__cell--status {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.actions-panel__filters--phase1 .procurement-panel__table-head-wrap {
  margin-top: 12px;
}

.actions-panel__table-head .procurement-panel__th,
.actions-panel__table-head .procurement-panel__th--sortable {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-muted);
}

.actions-panel__th--priority,
.actions-panel__table-head .actions-panel__th--priority {
  text-align: center;
  justify-content: center;
}

.actions-panel__list-body {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.actions-panel__list-row {
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  transition: background 0.15s ease;
}

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

.actions-panel__list-row:hover {
  background: var(--row-hover);
}

.actions-panel__list-row .actions-panel__cell {
  min-width: 0;
  overflow: hidden;
}

.actions-panel__table-wrap--list {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 14px 14px;
  background: var(--card);
}

.actions-panel__table-wrap--list::-webkit-scrollbar {
  display: none;
}

.actions-panel__filters .actions-panel__table-head-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.actions-panel__filters-top-head__scope {
  flex: 0 0 auto;
  white-space: nowrap;
}

.actions-panel__filters-top-head__view {
  flex: 0 0 auto;
  width: max-content;
  max-width: none;
  margin-inline-start: auto;
  white-space: nowrap;
}

.actions-panel__filter-field--scope {
  flex: 0 0 auto;
}

.actions-panel__filter-field--view {
  flex: 0 0 auto;
  margin-inline-start: auto;
  align-items: center;
}

.actions-panel__filters-top .procurement-panel__filter-field {
  gap: 0;
}

.actions-panel__filters-bottom {
  grid-template-columns: 1fr;
}

.actions-panel__filter--status .procurement-panel__filter-checks {
  gap: 8px 12px;
}

.actions-panel__scope-checks {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: stretch;
  height: 38px;
  border: 1px solid var(--field-border-idle);
  border-radius: 10px;
  background: var(--field-input-bg);
  overflow: hidden;
}

.actions-panel__scope-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1 1 0;
  min-width: 112px;
  height: 100%;
  margin: 0;
  width: auto;
  padding: 0 12px;
  border: none;
  border-inline-start: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.actions-panel__scope-tab:first-child {
  border-inline-start: none;
}

.actions-panel__scope-tab:hover {
  background: var(--row-hover);
}

.actions-panel__scope-tab--active {
  background: var(--primary-soft);
  color: var(--text-strong);
  font-weight: 600;
}

.actions-panel__scope-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--muted);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
}

.actions-panel__scope-tab--active .actions-panel__scope-count {
  background: var(--card);
  color: var(--text-strong);
}

.actions-panel__view-toggle {
  display: inline-flex;
  align-items: stretch;
  flex-wrap: nowrap;
  height: 38px;
  border: 1px solid var(--field-border-idle);
  border-radius: 10px;
  background: var(--field-input-bg);
  overflow: hidden;
}

.actions-panel__view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-inline-start: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.actions-panel__view-btn:first-child {
  border-inline-start: none;
}

.actions-panel__view-btn:hover {
  background: var(--row-hover);
}

.actions-panel__view-btn--active {
  background: var(--primary-soft);
  color: var(--text-strong);
}

.actions-panel__view {
  min-width: 0;
  padding-bottom: 24px;
  box-sizing: border-box;
}

.actions-panel__table-wrap {
  overflow: auto;
  border: 1px solid var(--border);
  background: var(--card);
}

.actions-panel__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.actions-panel__table th,
.actions-panel__table td {
  padding: 12px 14px;
  text-align: right;
  border-bottom: 1px solid var(--border);
}

.actions-panel__table th {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--muted);
}

.actions-panel__row {
  cursor: pointer;
  transition: background 0.15s;
}

.actions-panel__row:hover {
  background: var(--row-hover);
}

.actions-panel__row--accent-overdue {
  box-shadow: inset -3px 0 0 0 var(--status-red);
}

.actions-panel__row--accent-approval {
  box-shadow: inset -3px 0 0 0 var(--proc-status-pending);
}

.actions-panel__row--accent-progress {
  box-shadow: inset -3px 0 0 0 var(--proc-status-in-progress);
}

.actions-panel__list-row.actions-panel__row--accent-overdue,
.actions-panel__list-row.actions-panel__row--accent-approval,
.actions-panel__list-row.actions-panel__row--accent-progress,
.actions-panel__list-row.actions-panel__row--accent-waiting-chain {
  box-shadow: none;
  border-inline-start: 3px solid transparent;
}

.actions-panel__list-row.actions-panel__row--accent-overdue {
  border-inline-start-color: var(--status-red);
}

.actions-panel__list-row.actions-panel__row--accent-approval {
  border-inline-start-color: var(--proc-status-pending);
}

.actions-panel__list-row.actions-panel__row--accent-progress {
  border-inline-start-color: var(--proc-status-in-progress);
}

.actions-panel__list-row.actions-panel__row--accent-waiting-chain {
  border-inline-start-color: var(--proc-status-pending);
}

.actions-panel__cell--title {
  min-width: 0;
  vertical-align: middle;
}

.actions-panel__task-id {
  font-size: 11px;
  color: var(--text-muted);
}

.actions-panel__task-title {
  font-weight: 600;
  color: var(--text-strong);
}

.actions-panel__task-title-line {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  min-width: 0;
  direction: rtl;
}

.actions-panel__task-title-line .actions-panel__task-title {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.actions-panel__task-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.actions-panel__title-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.actions-panel__title-meta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.actions-panel__title-meta-icon svg {
  width: 14px;
  height: 14px;
}

.actions-panel__title-meta-count {
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.actions-panel__cell--overdue {
  color: var(--status-red);
  font-weight: 700;
}

.actions-panel__badge,
.actions-panel__priority {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.actions-panel__badge--pending {
  background: var(--proc-status-pending-bg);
  color: var(--text-strong);
}

.actions-panel__badge--in-progress {
  background: var(--proc-status-in-progress-bg);
  color: var(--text-strong);
}

.actions-panel__badge--pending-approval {
  background: var(--proc-status-pending-bg);
  color: var(--text-strong);
}

.actions-panel__badge--done {
  background: var(--status-green-bg);
  color: var(--status-green-text);
}

.actions-panel__badge--cancelled {
  background: var(--status-red-bg);
  color: var(--status-red-text);
}

.actions-panel__priority--low {
  background: var(--muted);
  color: var(--text-muted);
}

.actions-panel__priority--normal {
  background: var(--proc-status-in-progress-bg);
  color: var(--text);
}

.actions-panel__priority--high,
.actions-panel__priority--urgent {
  background: var(--status-red-bg);
  color: var(--status-red-text);
}

.actions-panel__role-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  background: var(--muted);
  color: var(--text-muted);
}

.actions-panel__role-badge--owner {
  background: var(--proc-status-pending-bg);
}

.actions-panel__role-badge--assignee {
  background: var(--proc-status-in-progress-bg);
}

.actions-panel__role-badge--both {
  background: var(--status-green-bg);
}

.actions-panel__kanban {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.actions-panel__kanban-col {
  display: flex;
  flex-direction: column;
  min-height: 320px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--muted);
}

.actions-panel__kanban-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-strong);
}

.actions-panel__kanban-col-head--pending {
  border-top: 3px solid var(--proc-status-pending);
}

.actions-panel__kanban-col-head--in-progress {
  border-top: 3px solid var(--proc-status-in-progress);
}

.actions-panel__kanban-col-head--pending-approval {
  border-top: 3px solid var(--proc-status-pending);
}

.actions-panel__kanban-col-head--done {
  border-top: 3px solid var(--status-green);
}

.actions-panel__kanban-col-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  flex: 1;
}

.actions-panel__kanban-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow 0.15s;
}

.actions-panel__kanban-card:hover {
  box-shadow: var(--shadow-card);
}

.actions-panel__kanban-card--overdue {
  border-color: var(--status-red-border);
}

.actions-panel__kanban-card-priority {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 4px;
}

.actions-panel__kanban-card--priority-low .actions-panel__kanban-card-priority {
  background: var(--border);
}

.actions-panel__kanban-card--priority-normal .actions-panel__kanban-card-priority {
  background: var(--proc-status-in-progress);
}

.actions-panel__kanban-card--priority-high .actions-panel__kanban-card-priority,
.actions-panel__kanban-card--priority-urgent .actions-panel__kanban-card-priority {
  background: var(--status-red);
}

.actions-panel__kanban-card-body {
  padding: 10px 12px 10px 16px;
}

.actions-panel__kanban-card-id {
  font-size: 10px;
  color: var(--text-muted);
}

.actions-panel__kanban-card-title {
  margin: 4px 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
}

.actions-panel__kanban-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.actions-panel__kanban-avatars {
  display: inline-flex;
  align-items: center;
}

.actions-panel__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--proc-status-pending-bg);
  border: 2px solid var(--card);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-strong);
  margin-right: -6px;
}

.actions-panel__avatar--assignee {
  background: var(--proc-status-in-progress-bg);
}

.actions-panel__kanban-due {
  font-size: 11px;
  color: var(--text-muted);
}

.actions-panel__kanban-due--overdue {
  color: var(--status-red);
  font-weight: 700;
}

.actions-panel__kanban-empty,
.actions-panel__empty {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.actions-panel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, opacity 0.2s;
  white-space: nowrap;
}

.actions-panel__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.actions-panel__btn--primary {
  background: var(--primary);
  color: var(--btn-on-primary);
  border-color: var(--primary);
}

.actions-panel__btn--primary:hover:not(:disabled) {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.actions-panel__btn--secondary {
  background: var(--surface-btn);
  color: var(--text);
  border-color: var(--border);
}

.actions-panel__btn--secondary:hover:not(:disabled) {
  background: var(--row-hover);
}

.actions-panel__btn--danger {
  background: var(--status-red-delete-bg);
  color: var(--status-red-text);
  border-color: var(--status-red-border);
}

.actions-panel__btn--danger:hover:not(:disabled) {
  background: var(--status-red-bg-medium);
}

.actions-panel__btn--success {
  background: var(--status-green-bg);
  color: var(--status-green-text);
  border-color: var(--status-green-border);
}

.actions-panel__btn--success:hover:not(:disabled) {
  background: var(--status-green-bg-hover);
}

/* Task Modal */

.task-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--overlay);
  overflow: auto;
}

.task-modal-overlay[hidden] {
  display: none !important;
}

.task-modal {
  width: min(1080px, 100%);
  max-height: min(92vh, 820px);
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}

.task-modal__header:not(.task-modal__header--v2) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.task-modal__header-id {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
}

.task-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-btn);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.task-modal__close:hover {
  background: var(--row-hover);
}

.task-modal__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.task-modal__main {
  padding: 18px 20px;
  overflow: auto;
  border-left: 1px solid var(--border);
}

.task-modal__title-input {
  width: 100%;
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid var(--field-border-idle);
  border-radius: 12px;
  background: var(--field-input-bg);
  color: var(--text-strong);
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  outline: none;
}

.task-modal__title-input:focus {
  border-color: var(--field-border-active);
}

.task-modal__status-widget {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.task-modal__status-select-wrap {
  flex: 1;
  min-width: 160px;
}

.task-modal__status-select {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--field-input-bg);
  color: var(--text-strong);
  font: inherit;
  font-size: 13px;
}

.task-modal__status-advance {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-btn);
  color: var(--text-strong);
  font-size: 14px;
  cursor: pointer;
}

.task-modal__status-advance--disabled,
.task-modal__status-advance:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.task-modal__status-hint {
  width: 100%;
  font-size: 11px;
  color: var(--proc-status-pending);
}

.task-modal__status-label {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
}

.task-modal__status-label--pending {
  background: var(--proc-status-pending-bg);
}

.task-modal__status-label--in-progress {
  background: var(--proc-status-in-progress-bg);
}

.task-modal__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.task-modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.task-modal__label {
  font-size: 12px;
  color: var(--text-muted);
}

.task-modal__input,
.task-modal__select,
.task-modal__textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--field-border-idle);
  border-radius: 12px;
  background: var(--field-input-bg);
  color: var(--text-strong);
  font: inherit;
  font-size: 13px;
  outline: none;
}

.task-modal__input:focus,
.task-modal__select:focus,
.task-modal__textarea:focus {
  border-color: var(--field-border-active);
}

.task-modal__tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.task-modal__tab {
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-btn);
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.task-modal__tab--active {
  background: var(--primary-soft);
  color: var(--text-strong);
  border-color: var(--primary);
}

.task-modal__attachments-placeholder {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 16px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--text-muted);
  font-size: 13px;
}

.task-modal__sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--muted);
}

.task-modal__activity-title {
  padding: 14px 16px 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-strong);
}

.task-modal__activity-feed {
  flex: 1;
  overflow: auto;
  padding: 0 16px 12px;
}

.task-modal__activity-empty {
  padding: 16px 0;
  font-size: 12px;
  color: var(--text-muted);
}

.task-modal__log {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 8px;
  align-items: start;
  margin-bottom: 10px;
  font-size: 11px;
  color: var(--text-muted);
}

.task-modal__log-time {
  white-space: nowrap;
}

.task-modal__comment {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

.task-modal__comment-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--proc-status-in-progress-bg);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-strong);
  flex-shrink: 0;
}

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

.task-modal__comment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.task-modal__comment-author {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-strong);
}

.task-modal__comment-time {
  font-size: 10px;
  color: var(--text-muted);
}

.task-modal__comment-bubble {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
}

.task-modal__comment-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.task-modal__comment-action {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 11px;
  cursor: not-allowed;
}

.task-modal__comment-composer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--border);
}

.task-modal__comment-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--field-border-idle);
  border-radius: 12px;
  background: var(--field-input-bg);
  color: var(--text-strong);
  font: inherit;
  font-size: 13px;
  resize: vertical;
  outline: none;
}

.task-modal__comment-submit {
  align-self: flex-end;
}

.task-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: var(--footer-bg);
}

.task-modal__footer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

body.task-modal-open {
  overflow: hidden;
}

@media (max-width: 900px) {
  .actions-panel__kanban {
    grid-template-columns: repeat(4, minmax(260px, 1fr));
  }

  .task-modal__body {
    grid-template-columns: 1fr;
  }

  .task-modal__main {
    border-left: none;
    border-bottom: 1px solid var(--border);
  }

  .task-modal__fields {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body.page-actions.has-app-page-header .actions-panel__filters,
  body.page-actions.has-app-sidebar .actions-panel__filters,
  body.page-notifications.has-app-page-header .actions-panel__filters,
  body.page-notifications.has-app-sidebar .actions-panel__filters {
    padding-top: 12px;
    padding-inline: 12px;
  }

  .actions-panel__filters-top-row {
    flex-wrap: wrap;
  }

  .actions-panel__filter-field--scope {
    order: 3;
    width: 100%;
  }

  .actions-panel__scope-checks {
    width: 100%;
  }

  .actions-panel__scope-tab {
    min-width: 0;
    flex: 1 1 0;
  }

  .actions-panel__filter-field--view {
    margin-inline-start: 0;
  }

  .actions-panel__filters-top-head__view {
    margin-inline-start: auto;
  }
}

/* Actions — فاز ۲-الف: زنجیره و وابستگی */

.actions-panel__badge--waiting-chain,
.actions-panel__status-chip--waiting-chain {
  background: var(--proc-status-pending-bg);
}

.actions-panel__row--accent-waiting-chain {
  box-shadow: inset -3px 0 0 0 var(--proc-status-pending);
}

.actions-panel__task-indicators,
.actions-panel__kanban-card-indicators {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.actions-panel__chain-badge,
.actions-panel__chain-progress,
.actions-panel__chain-waiting-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
}

.actions-panel__chain-badge {
  background: var(--proc-status-in-progress-bg);
  color: var(--text);
}

.actions-panel__chain-progress {
  background: var(--muted);
  color: var(--text-muted);
}

.actions-panel__chain-waiting-badge {
  background: var(--proc-status-pending-bg);
  color: var(--text-strong);
}

.actions-panel__blocked-icon {
  font-size: 12px;
}

.actions-panel__kanban-col-head--waiting-chain {
  border-top: 3px solid var(--proc-status-pending);
}

.task-modal__status-widget--locked .task-modal__status-select {
  opacity: 0.65;
}

.task-modal__status-widget--waiting-chain {
  flex-wrap: wrap;
}

.task-modal__status-label--waiting-chain {
  background: var(--proc-status-pending-bg);
  color: var(--text-strong);
}

.task-modal__lock-badge {
  display: inline-flex;
  align-items: center;
  width: 100%;
  margin-bottom: 6px;
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--status-red-bg);
  border: 1px solid var(--status-red-border);
  color: var(--status-red-text);
  font-size: 11px;
  font-weight: 700;
}

.task-modal__lock-box {
  margin-bottom: 16px;
  padding: 14px;
  border-radius: 12px;
  background: var(--status-red-bg-subtle);
  border: 1px solid var(--status-red-border);
}

.task-modal__lock-box-title {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--status-red-text);
}

.task-modal__lock-section-title {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-strong);
}

.task-modal__lock-list {
  margin: 0;
  padding: 0 18px 0 0;
  font-size: 12px;
  color: var(--text);
}

.task-modal__lock-list li {
  margin-bottom: 6px;
}

.task-modal__lock-link {
  border: none;
  background: transparent;
  padding: 0;
  color: var(--text-strong);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

.task-modal__lock-divider {
  margin: 12px 0;
  border: none;
  border-top: 1px solid var(--status-red-border);
}

.task-modal__chain-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.task-modal__chain-tree-wrap {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: var(--muted);
}

.task-modal__chain-tree-title {
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}

.task-modal__chain-tree {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.task-modal__chain-node {
  position: relative;
}

.task-modal__chain-thread {
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  width: 2px;
  background: var(--border);
}

.task-modal__chain-children {
  margin-right: 20px;
  padding-right: 12px;
  border-right: 2px solid var(--border);
}

.task-modal__chain-node-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
}

.task-modal__chain-node-card--current {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary-soft);
}

.task-modal__chain-node-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-align: right;
}

.task-modal__chain-node-id {
  font-size: 10px;
  color: var(--text-muted);
}

.task-modal__chain-node-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
}

.task-modal__chain-node-meta {
  font-size: 11px;
  color: var(--text-muted);
}

.task-modal__chain-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.task-modal__chain-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--card);
}

.task-modal__chain-form-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-strong);
}

.task-modal__chain-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.task-modal__chain-loading {
  padding: 16px;
  font-size: 13px;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .actions-panel__kanban {
    grid-template-columns: repeat(5, minmax(240px, 1fr));
  }
}

/* =========================================================
   Phase 2-B — Redesign: compact list rows, modal & buttons
   ========================================================= */

/* ---- Compact list rows (40px) ---- */

.actions-panel__list-row {
  height: 40px;
  max-height: 40px;
}

.actions-panel__cell--title {
  min-width: 0;
  vertical-align: middle;
}

.actions-panel__cell--badge {
  text-align: right;
  white-space: nowrap;
  vertical-align: middle;
}

.actions-panel__cell--priority {
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
}

.actions-panel__cell--meta {
  white-space: nowrap;
  font-size: 11px;
  color: var(--text-muted);
}

.actions-panel__cell--due {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  direction: rtl;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
}

.actions-panel__cell--due.actions-panel__cell--overdue {
  color: var(--status-red);
  font-weight: 700;
}

.actions-panel__row-line1 {
  display: flex;
  flex-direction: row;
  direction: rtl;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  flex-wrap: nowrap;
  min-width: 0;
  max-width: 100%;
}

.actions-panel__row-line1 .actions-panel__task-title {
  flex: 0 1 auto;
}

.actions-panel__row-line1 .actions-panel__row-indicators {
  flex: 0 0 auto;
}

.actions-panel__row-line2 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  flex-wrap: wrap;
}

.actions-panel__task-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}

/* Priority flag icon */
.actions-panel__flag {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.actions-panel__flag--low   { color: var(--text-muted); }
.actions-panel__flag--normal { color: #3b82f6; }
.actions-panel__flag--high   { color: #f59e0b; }
.actions-panel__flag--urgent { color: #ef4444; }

/* Lock / chain / blocked inline icons */
.actions-panel__row-indicators {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.actions-panel__row-lock {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  opacity: 0.7;
  flex-shrink: 0;
  cursor: help;
}

.actions-panel__row-chain-icon {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  opacity: 0.75;
  flex-shrink: 0;
  cursor: help;
}

.actions-panel__row-chain {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: var(--text-muted);
}

.actions-panel__row-chain-count {
  font-size: 10px;
}

.actions-panel__row-blocked {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: var(--status-red-text);
}

/* Mini chain progress bar */
.actions-panel__cell--chain-progress {
  white-space: nowrap;
  vertical-align: middle;
  min-width: 0;
}

.actions-panel__chain-progress-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

.actions-panel__chain-bar {
  display: inline-flex;
  position: relative;
  flex: 1 1 auto;
  min-width: 28px;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}

.actions-panel__chain-bar-fill {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  background: var(--primary);
  border-radius: 2px;
  transition: width 0.3s;
}

.actions-panel__chain-bar-label {
  flex: 0 0 auto;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Compact status dot-badge */
.actions-panel__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.actions-panel__badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Owner / assignee / dept column widths */
.actions-panel__cell--dept {
  white-space: nowrap;
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.actions-panel__cell--person {
  white-space: nowrap;
  vertical-align: middle;
  min-width: 0;
  overflow: hidden;
}

.actions-panel__cell--owner,
.actions-panel__cell--assignee {
  min-width: 0;
}

.actions-panel__list-row .actions-panel__cell:has(.actions-panel__person-cell),
.actions-panel__list-row .actions-panel__cell--assignee,
.actions-panel__list-row .actions-panel__cell--creator {
  display: flex;
  align-items: center;
  min-height: 0;
}

.actions-panel__person-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

.actions-panel__person-cell .actions-panel__person-name {
  min-width: 0;
}

.actions-panel__person-cell--multi {
  gap: 4px;
}

.actions-panel__person-name {
  font-size: 11px;
  line-height: 1;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  min-width: 0;
}

.actions-panel__person-empty {
  font-size: 11px;
  color: var(--text-muted);
  

}

.actions-panel__person-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--proc-status-in-progress-bg);
  border: 1.5px solid var(--card);
  font-size: 9px;
  font-weight: 700;
  color: var(--text-strong);
  flex-shrink: 0;
}

.actions-panel__person-avatar--owner {
  background: var(--proc-status-pending-bg);
}

.actions-panel__person-avatar--assignee {
  background: var(--status-green-bg);
}

.actions-panel__person-cell--multi .actions-panel__person-avatar + .actions-panel__person-avatar {
  margin-right: -5px;
}

/* Avatar stack overlap (multi-assignee) */
.actions-panel__avatar-stack {
  display: inline-flex;
  align-items: center;
  flex-direction: row-reverse;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.actions-panel__avatar-stack .actions-panel__person-avatar {
  margin-left: -6px;
  border: 2px solid var(--card);
}

.actions-panel__avatar-stack .actions-panel__person-avatar:last-child {
  margin-left: 0;
}

.actions-panel__avatar-extra {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  min-width: 22px;
  padding: 0 4px;
  border-radius: 11px;
  background: var(--border);
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 700;
  border: 2px solid var(--card);
  margin-left: -6px;
  flex-shrink: 0;
}

/* Owner avatar group in list (legacy kanban) */
.actions-panel__owners {
  display: inline-flex;
  align-items: center;
  gap: -4px;
}

.actions-panel__owner-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--proc-status-in-progress-bg);
  border: 1.5px solid var(--card);
  font-size: 9px;
  font-weight: 700;
  color: var(--text-strong);
  flex-shrink: 0;
}

.actions-panel__owner-avatar--assignee {
  background: var(--status-green-bg);
  margin-right: -6px;
}

/* Kanban card compact */
.actions-panel__kcard-top {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 4px;
}

.actions-panel__kcard-id {
  font-size: 10px;
  color: var(--text-muted);
  flex: 1;
}

.actions-panel__kcard-lock {
  color: var(--text-muted);
  opacity: 0.65;
}

.actions-panel__kcard-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-strong);
  line-height: 1.4;
  margin-bottom: 4px;
}

.actions-panel__kcard-progress {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 4px;
}

.actions-panel__kcard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}

/* ---- Compact status badges ---- */

.actions-panel__badge--waiting-chain {
  background: var(--proc-status-pending-bg);
  color: var(--text-strong);
}

/* ---- Redesigned Buttons (tm-btn) ---- */

.tm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}

.tm-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.tm-btn--primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.tm-btn--primary:hover:not(:disabled) {
  opacity: 0.88;
}

.tm-btn--secondary {
  background: var(--surface-btn);
  color: var(--text);
  border-color: var(--border);
}

.tm-btn--secondary:hover:not(:disabled) {
  background: var(--row-hover);
}

.tm-btn--ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: transparent;
  padding: 0 8px;
}

.tm-btn--ghost:hover:not(:disabled) {
  background: var(--row-hover);
  color: var(--text);
}

.tm-btn--dashed {
  background: transparent;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: 8px;
  font-size: 11px;
  height: 28px;
  padding: 0 10px;
}

.tm-btn--dashed:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
}

.tm-btn--success {
  background: var(--status-green);
  color: #fff;
  border-color: var(--status-green);
}

.tm-btn--danger {
  background: var(--status-red);
  color: #fff;
  border-color: var(--status-red);
}

/* ---- Task Modal — redesigned ---- */

.task-modal__header:not(.task-modal__header--v2) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  min-height: 44px;
}

.task-modal__header-id {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.task-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-btn);
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.task-modal__close:hover {
  background: var(--row-hover);
  color: var(--text-strong);
}

.task-modal__title-input {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  padding: 8px 0;
  border: none;
  border-bottom: 1px solid var(--field-border-idle);
  border-radius: 0;
  background: transparent;
  color: var(--text-strong);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  outline: none;
}

.task-modal__title-input:focus {
  border-bottom-color: var(--primary);
}

/* Status row */
.task-modal__status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.task-modal__status-widget {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.task-modal__status-label {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
}

.task-modal__status-label--pending        { background: var(--proc-status-pending-bg); color: var(--text-strong); }
.task-modal__status-label--in-progress    { background: var(--proc-status-in-progress-bg); color: var(--text-strong); }
.task-modal__status-label--pending-approval { background: var(--proc-status-pending-bg); color: var(--text-strong); }
.task-modal__status-label--done           { background: var(--status-green-bg); color: var(--status-green-text); }
.task-modal__status-label--cancelled      { background: var(--status-red-bg); color: var(--status-red-text); }
.task-modal__status-label--waiting-chain  { background: var(--proc-status-pending-bg); color: var(--text-strong); }

.task-modal__status-advance {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-btn);
  color: var(--text-strong);
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
}

.task-modal__status-advance--disabled,
.task-modal__status-advance:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.task-modal__status-lock-inline {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--status-red-bg);
  color: var(--status-red-text);
}

.task-modal__status-hint {
  font-size: 10px;
  color: var(--proc-status-pending);
}

/* Field meta-grid — 2×2 then full-width row */
.task-modal__meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-bottom: 12px;
  border-top: 1px solid var(--border);
}

.task-modal__meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  min-height: 36px;
}

.task-modal__meta-row--full {
  grid-column: 1 / -1;
  flex-wrap: wrap;
}

.task-modal__meta-label {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 44px;
  flex-shrink: 0;
}

.task-modal__meta-select,
.task-modal__meta-input {
  flex: 1;
  margin-bottom: 0px;
  min-width: 0;
  height: 26px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-strong);
  font: inherit;
  font-size: 12px;
  outline: none;
  cursor: pointer;
}

.task-modal__meta-select:hover,
.task-modal__meta-input:hover {
  background: var(--row-hover);
  border-color: var(--border);
}

.task-modal__meta-select:focus,
.task-modal__meta-input:focus {
  background: var(--field-input-bg);
  border-color: var(--primary);
}

/* Assignee delegation */
.task-modal__meta-assignee-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}

.task-modal__delegate-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-btn);
  color: var(--text-muted);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.task-modal__delegate-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Assignee chips */
.task-modal__assignee-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 26px;
  align-items: center;
}

.task-modal__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px 2px 3px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--muted);
  font-size: 11.5px;
  color: var(--text);
  white-space: nowrap;
}

.task-modal__chip-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  flex-shrink: 0;
}

.task-modal__chip-name {
  font-size: 11.5px;
  color: var(--text);
}

.task-modal__chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  margin-top: 0px;
  margin-right: 0px;
  flex-shrink: 0;
}

.task-modal__chip-remove:hover {
  background: var(--border);
  color: var(--danger, #e53e3e);
}

.task-modal__assignee-empty {
  color: var(--text-muted);
  font-size: 12px;
}

/* Delegate picker — multi-select */
.task-modal__delegate-picker {
  width: 100%;
  margin-top: 6px;
  padding: 10px 10px 8px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--muted);
}

.task-modal__delegate-picker[hidden] {
  display: none;
}

.task-modal__delegate-picker-title {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
}

.task-modal__delegate-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 160px;
  overflow-y: auto;
  margin-bottom: 8px;
}

.task-modal__delegate-option {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 6px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text);
  transition: background 0.12s;
}

.task-modal__delegate-option:hover {
  background: var(--surface-btn);
}

.task-modal__delegate-checkbox {
  width: 14px;
  height: 14px;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: var(--primary);
}

.task-modal__delegate-name {
  flex: 1;
}

.task-modal__delegate-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 4px 6px;
}

.task-modal__delegate-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-start;
}

/* Underline tabs */
.task-modal__tabs {
  display: flex;
  gap: 0;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.task-modal__tab {
  height: 34px;
  padding: 0 14px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}

.task-modal__tab:hover {
  color: var(--text-strong);
}

.task-modal__tab--active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  background: transparent;
}

/* Footer bar inside main (no separate bottom footer) */
.task-modal__footer-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 12px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
}

.task-modal__footer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Hide old footer completely */
.task-modal__footer {
  display: none !important;
}

/* Activity sidebar */
.task-modal__sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--muted);
}

.task-modal__activity-title {
  padding: 10px 14px 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.task-modal__comment-composer {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--border);
}

.task-modal__comment-input {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid var(--field-border-idle);
  border-radius: 10px;
  background: var(--field-input-bg);
  color: var(--text-strong);
  font: inherit;
  font-size: 12px;
  resize: none;
  outline: none;
  line-height: 1.4;
}

.task-modal__comment-input:focus {
  border-color: var(--primary);
}

/* Icon-only send button */
.task-modal__send-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 9px;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s;
}

.task-modal__send-btn:hover {
  opacity: 0.85;
}

/* Log items — no avatar, muted */
.task-modal__log {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin-bottom: 8px;
  font-size: 11px;
  color: var(--text-muted);
}

.task-modal__log-time {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Comment items */
.task-modal__comment {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.task-modal__comment-bubble {
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text);
  line-height: 1.5;
}

/* ---- Minimal chain tab (tm-chain-*) ---- */

.task-modal__chain-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tm-chain-warn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 7px;
  background: var(--status-red-bg);
  color: var(--status-red-text);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--status-red-border, var(--status-red));
  line-height: 1.3;
}

.tm-chain-tree {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tm-chain-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: default;
  transition: background 0.1s;
}

.tm-chain-row:hover {
  background: var(--row-hover);
}

.tm-chain-row--current {
  background: var(--primary-soft, var(--proc-status-in-progress-bg));
}

.tm-chain-group {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tm-chain-children {
  margin-right: 14px;
  padding-right: 8px;
  border-right: 1.5px solid var(--border);
}

.tm-chain-indent-icon {
  display: inline-flex;
  align-items: center;
  color: var(--border);
  flex-shrink: 0;
}

/* Status icon variants */
.tm-status-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.tm-status-icon--done    { color: var(--status-green); }
.tm-status-icon--progress { color: var(--primary); }
.tm-status-icon--pending  { color: var(--text-muted); }

.tm-chain-btn {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: var(--text-strong);
  cursor: pointer;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tm-chain-row--current .tm-chain-btn {
  font-weight: 700;
}

.tm-chain-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.tm-chain-badge--pending          { background: var(--proc-status-pending-bg); }
.tm-chain-badge--in-progress      { background: var(--proc-status-in-progress-bg); }
.tm-chain-badge--pending-approval { background: var(--proc-status-pending-bg); }
.tm-chain-badge--done             { background: var(--status-green-bg); color: var(--status-green-text); }
.tm-chain-badge--cancelled        { background: var(--status-red-bg); color: var(--status-red-text); }
.tm-chain-badge--waiting-chain    { background: var(--proc-status-pending-bg); }

.tm-chain-dept {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.tm-chain-add-btns {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.tm-chain-loading,
.tm-chain-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px 2px;
}

/* Inline forms for chain tab */
.tm-inline-form {
  border: 1px dashed var(--border);
  border-radius: 9px;
  padding: 10px 12px;
  background: var(--muted);
}

.tm-inline-form__title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 7px;
}

.tm-inline-form__row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.tm-inline-form__input,
.tm-inline-form__select {
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--field-border-idle);
  border-radius: 7px;
  background: var(--field-input-bg);
  color: var(--text-strong);
  font: inherit;
  font-size: 12px;
  outline: none;
  min-width: 80px;
}

.tm-inline-form__input:focus,
.tm-inline-form__select:focus {
  border-color: var(--primary);
}

.tm-inline-form__input--wide { min-width: 140px; flex: 1; }
.tm-inline-form__select--wide { min-width: 160px; flex: 1; }

/* Main body uses existing grid — override sidebar width */
.task-modal__body {
  grid-template-columns: minmax(0, 1fr) 220px;
}

@media (max-width: 900px) {
  .task-modal__body { grid-template-columns: 1fr; }
  .task-modal__meta-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .task-modal__meta-row--full { grid-column: 1; }
}

/* ========================= */
/* ADMIN PANEL               */
/* ========================= */

/* Layout from first paint — before async shell init */
body.page-admin,
body.page-org-chart,
body.page-admin-users,
body.page-admin-audit {
  display: block;
  justify-content: flex-start;
  align-items: stretch;
  height: auto;
  min-height: 100vh;
  width: 100%;
  padding: 0;
  padding-left: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

body.page-org-chart {
  overflow: hidden;
}

body.page-admin .admin-page-content,
body.page-org-chart .admin-page-content,
body.page-admin-users .admin-page-content,
body.page-admin-audit .admin-page-content {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

body.page-admin-users.has-app-sidebar .admin-page-content {
  padding: 0;
}

body.page-admin-users.has-app-sidebar.has-app-page-header .admin-main {
  padding-top: var(--app-header-height);
  padding-inline: 0;
}

body.page-admin-users.has-app-sidebar .history-page-wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 0 40px;
  box-sizing: border-box;
}

body.page-org-chart .org-toolbar__title {
  display: none;
}

body.has-admin-shell {
  display: block;
  margin: 0;
  min-height: 100vh;
  height: auto;
  background: var(--bg);
  color: var(--text);
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  box-sizing: border-box;
}

body.has-admin-shell.has-app-sidebar:not(.app-sidebar-drawer) {
  padding-left: 0;
}

html:not([data-app-sidebar-ready="1"]) body.has-admin-shell,
html:not([data-app-sidebar-ready="1"]) body.has-admin-shell .app-sidebar,
html:not([data-app-sidebar-ready="1"]) body.has-admin-shell .admin-header,
html:not([data-app-sidebar-ready="1"]) body.has-admin-shell .page-loader {
  transition: none !important;
}

.admin-main {
  width: 100%;
  min-height: 100vh;
  position: relative;
  box-sizing: border-box;
}

body.has-admin-shell.has-app-page-header .admin-main {
  padding-top: var(--app-header-height);
}

.admin-page-content {
  padding: 20px 24px 32px;
}

.admin-page-content--flush {
  padding: 0;
  height: calc(100vh - var(--app-header-height));
  overflow: hidden;
}

body.has-admin-shell:not(.has-app-page-header) .admin-page-content--flush {
  height: 100vh;
}

.admin-header {
  position: fixed;
  top: 0;
  left: 0;
  right: var(--app-sidebar-width);
  z-index: 210;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: var(--app-header-height);
  padding: 0 24px;
  box-sizing: border-box;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  transition: right 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-header.is-visible {
  display: flex;
}

.admin-header__main {
  min-width: 0;
  flex: 1;
}

.admin-header__title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-strong);
}

.admin-header__meta {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}

.admin-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.admin-dashboard {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.admin-kpi__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}

.admin-kpi {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 108px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow-card);
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-kpi--alert {
  border-color: var(--status-red-border);
  background: var(--status-red-bg-subtle);
}

.admin-kpi--alert:hover {
  transform: translateY(-2px);
  border-color: var(--status-red-text);
  box-shadow: var(--shadow-panel);
}

.admin-kpi__value {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-strong);
}

.admin-kpi--alert .admin-kpi__value {
  color: var(--status-red-text);
}

.admin-kpi__label {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-muted);
}

.admin-kpi__hint {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--status-red-text);
}

.admin-kpi--skeleton {
  pointer-events: none;
}

.admin-kpi__skeleton-bar {
  display: block;
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    var(--muted) 0%,
    var(--row-hover) 50%,
    var(--muted) 100%
  );
  background-size: 200% 100%;
  animation: adminKpiShimmer 1.2s ease-in-out infinite;
}

.admin-kpi__skeleton-bar--value {
  width: 56%;
  height: 32px;
}

.admin-kpi__skeleton-bar--label {
  width: 72%;
  height: 14px;
}

@keyframes adminKpiShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.admin-dashboard__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.admin-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 160px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow-card);
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-card:hover:not(.admin-card--disabled) {
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: var(--shadow-panel);
}

.admin-card--disabled {
  opacity: 0.72;
  cursor: not-allowed;
}

.admin-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--muted);
  color: var(--primary);
}

.admin-card__title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-strong);
}

.admin-card__desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}

.admin-card__badge {
  align-self: flex-start;
  margin-top: auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--muted);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.admin-users-panel {
  width: 100%;
}

body.page-admin-users .admin-users-panel .procurement-panel__filters .procurement-panel__table-head-wrap {
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  background: var(--panel-search-bg);
}

body.page-admin-users .admin-users-panel .procurement-panel__filters .procurement-panel__table-head-wrap .users-table--head,
body.page-admin-users .admin-users-panel .procurement-panel__table-wrap .users-table--body {
  width: 100%;
  min-width: 1080px;
  table-layout: fixed;
  border-collapse: collapse;
}

body.page-admin-users .admin-users-panel .procurement-panel__filters .procurement-panel__table-head-wrap .users-table--head {
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

body.page-admin-users .admin-users-panel .users-table--head th {
  height: 40px;
  max-height: 40px;
  padding: 0 10px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: var(--panel-search-bg);
  vertical-align: middle;
  text-align: right;
}

body.page-admin-users .admin-users-panel .users-table--head .procurement-panel__th,
body.page-admin-users .admin-users-panel .users-table--head .procurement-panel__th--sortable {
  width: 100%;
  min-height: 0;
  justify-content: flex-start;
}

body.page-admin-users .admin-users-panel .users-table--head .procurement-panel__th--sortable:hover,
body.page-admin-users .admin-users-panel .users-table--head .procurement-panel__th--sortable:focus,
body.page-admin-users .admin-users-panel .users-table--head .procurement-panel__th--sortable:focus-visible,
body.page-admin-users .admin-users-panel .users-table--head .procurement-panel__th--sortable:active {
  transform: none;
}

body.page-admin-users .users-table__col--name {
  width: 14%;
}

body.page-admin-users .users-table__col--email {
  width: 16%;
}

body.page-admin-users .users-table__col--department {
  width: 12%;
}

body.page-admin-users .users-table__col--org-level {
  width: 10%;
}

body.page-admin-users .users-table__col--role {
  width: 11%;
}

body.page-admin-users .users-table__col--status {
  width: 10%;
}

body.page-admin-users .users-table__col--account {
  width: 11%;
}

body.page-admin-users .users-table__col--actions {
  width: 96px;
}

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

.users-table thead tr,
.users-table tbody tr:not(.users-table__empty-row) {
  height: 40px;
  max-height: 40px;
}

.users-table th,
.users-table td {
  height: 40px;
  max-height: 40px;
  padding: 0 10px;
  border-bottom: 1px solid var(--border);
  text-align: right;
  vertical-align: middle;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.users-table th {
  background: var(--panel-search-bg);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
}

body.page-admin-users .users-table th.users-table__th--actions,
body.page-admin-users .users-table td.users-table__cell--actions {
  width: 96px;
  min-width: 96px;
  max-width: 96px;
  padding-inline: 8px;
  text-align: center;
  vertical-align: middle;
}

body.page-admin-users .users-table--head th.users-table__th--actions .procurement-panel__th--actions {
  display: block;
  width: 100%;
  text-align: center;
}

body.page-admin-users .users-table--body td {
  padding: 0 10px;
}

.users-table tbody tr:hover {
  background: var(--row-hover);
}

.users-table__actions {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  white-space: nowrap;
}

.users-table__action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  min-width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.users-table__action-btn:hover {
  background: var(--row-hover);
  color: var(--text-strong);
  transform: none;
}

.users-table__action-btn--danger:hover,
.users-table__action-btn.history-icon-btn--delete:hover {
  background: var(--status-red-delete-bg);
  color: var(--status-red-text);
}

.users-table__action-btn--success:hover {
  background: var(--status-green-bg);
  color: var(--status-green-text);
}

.users-table__action-btn--unlock:hover {
  background: var(--proc-status-pending-bg);
  color: var(--proc-status-pending);
}

.users-table__status-group {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
}

.users-table__status {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.users-table__status--active {
  background: var(--status-green-bg);
  color: var(--status-green-text);
}

.users-table__status--inactive {
  background: var(--status-red-bg);
  color: var(--status-red-text);
}

.users-table__status--locked {
  background: var(--proc-status-pending-bg);
  color: var(--proc-status-pending);
  border: 1px solid var(--proc-status-pending-border);
}

.users-table__status--telegram {
  background: var(--status-green-bg);
  color: var(--status-green-text);
}

.users-table__status--telegram-off {
  background: var(--muted, var(--row-hover));
  color: var(--text-muted);
}

.users-table__no-account {
  color: var(--text-muted);
  font-style: italic;
}

.users-table__role-select {
  width: auto;
  min-width: 110px;
  max-width: 140px;
  height: 28px;
  min-height: 28px;
  margin: 0;
  padding: 0 8px;
  font-size: 11px;
  line-height: 1.2;
}

body.page-admin-users .users-table__role-cell {
  overflow: visible;
}

body.page-admin-users .users-table__role-cell .custom-select {
  width: 110px;
  min-width: 110px;
  max-width: 140px;
}

body.page-admin-users .users-table__role-cell .custom-select__trigger.input.input--status {
  width: 100%;
  height: 28px;
  min-height: 28px;
  padding: 0 22px 0 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 8px;
  justify-content: flex-start;
  text-align: right;
  position: relative;
}

body.page-admin-users .users-table__role-cell .custom-select__trigger::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 9px;
  height: 9px;
  transform: translateY(-50%);
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  opacity: 0.9;
  pointer-events: none;
}

body.page-admin-users .users-table__role-cell .custom-select__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.page-admin-users .users-table__role-cell .custom-select__panel {
  z-index: 200;
  min-width: max(100%, 110px);
}

body.page-admin-users .users-table__role-cell .custom-select__option {
  padding: 6px 10px;
  font-size: 11px;
}

body.page-admin-users .users-table tbody tr:has(.custom-select.is-open) {
  position: relative;
  z-index: 20;
}

.users-table__empty-row td {
  height: auto;
  max-height: none;
}

.users-table__empty {
  text-align: center;
  color: var(--text-muted);
  padding: 28px 16px;
}

.admin-users-panel__state {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: 14px;
  background: var(--card);
}

.admin-users-panel__state--error {
  color: var(--status-red-text);
}

.admin-users-panel__retry {
  margin-top: 12px;
}

body.page-admin-users {
  --org-surface: var(--card);
  --org-border: var(--border);
  --org-btn-hover: var(--row-hover);
  --unit-header: var(--primary);
  --radius: 12px;
}

body.page-admin-users .org-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
}

body.page-admin-users .org-modal-backdrop[hidden] {
  display: none !important;
}

body.page-admin-users .org-modal.org-modal--create-account {
  width: min(440px, 92vw);
  background: var(--org-surface);
  border: 1px solid var(--org-border);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow, var(--shadow-panel));
  overflow: hidden;
  color: var(--text);
}

body.page-admin-users .org-modal--create-account .org-modal__header {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

body.page-admin-users .org-modal--create-account .org-modal__footer {
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

body.page-admin-users .org-modal__header {
  padding: 16px 20px;
  font-size: 15px;
  font-weight: 700;
  border-bottom: 1px solid var(--org-border);
  background: var(--org-surface);
  color: var(--text-strong);
}

body.page-admin-users .org-modal__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

body.page-admin-users .org-modal__field label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

body.page-admin-users .org-modal__field input {
  width: 100%;
  height: 38px;
  margin: 0;
  padding: 0 10px;
  box-sizing: border-box;
  border: 1px solid var(--org-border, var(--field-border-idle));
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-strong, var(--text));
  background: var(--field-input-bg, var(--org-surface));
  transition: border-color 0.2s, box-shadow 0.2s;
}

body.page-admin-users .org-modal__field input[readonly] {
  opacity: 0.85;
  cursor: default;
  background: var(--muted);
}

body.page-admin-users .org-modal__field input:hover,
body.page-admin-users .org-modal__field input:focus {
  border-color: var(--field-border-active, var(--org-border));
  outline: none;
}

body.page-admin-users .org-modal__field input:focus {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent);
}

body.page-admin-users .org-modal__input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

body.page-admin-users .org-modal__input-row input {
  flex: 1;
  min-width: 0;
}

body.page-admin-users .org-modal__btn,
body.page-admin-users .org-modal__btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  width: auto;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  border-radius: 9px;
  white-space: nowrap;
  border: 1px solid var(--border);
  background: var(--surface-btn);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s, opacity 0.2s;
}

body.page-admin-users .org-modal__btn:hover:not(:disabled),
body.page-admin-users .org-modal__btn-icon:hover {
  border-color: var(--primary);
  background: var(--primary-soft, rgba(99, 153, 34, 0.12));
  color: var(--text-strong);
  transform: none;
}

body.page-admin-users .org-modal__btn-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 8px;
  background: var(--org-surface);
  border-color: var(--org-border);
  color: var(--unit-header);
}

body.page-admin-users .org-modal__btn-icon svg {
  width: 18px;
  height: 18px;
}

body.page-admin-users .org-modal__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  border-top: 1px solid var(--org-border);
  background: var(--org-surface);
  direction: ltr;
}

body.page-admin-users .org-modal__footer .org-modal__btn {
  direction: rtl;
}

body.admin-users-modal-open {
  overflow: hidden;
}

.admin-audit-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.admin-audit-panel__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: flex-end;
}

.admin-audit-panel__filter {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-audit-panel__filter-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}

.admin-audit-panel__search-input {
  min-width: min(280px, 100%);
}

.admin-audit-panel__table-wrap {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
}

.audit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.audit-table th,
.audit-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  text-align: right;
  vertical-align: top;
}

.audit-table th {
  background: var(--muted);
  color: var(--text-strong);
  font-weight: 700;
  white-space: nowrap;
}

.audit-table tbody tr:hover {
  background: var(--row-hover);
}

.audit-table__details-cell {
  min-width: 220px;
  max-width: 360px;
}

.audit-table__details {
  margin: 0;
}

.audit-table__summary {
  cursor: pointer;
  color: var(--text);
  line-height: 1.6;
  list-style: none;
}

.audit-table__summary::-webkit-details-marker {
  display: none;
}

.audit-table__summary--plain {
  cursor: default;
}

.audit-table__diff-panel {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}

.audit-table__diff-list {
  margin: 0;
  display: grid;
  gap: 6px;
}

.audit-table__diff-list dt {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

.audit-table__diff-list dd {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--text);
  word-break: break-word;
}

.audit-table__diff-pre {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.audit-table__empty {
  text-align: center;
  color: var(--text-muted);
  padding: 28px 16px;
}

.admin-audit-panel__state {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: 14px;
  background: var(--card);
}

.admin-audit-panel__state--error {
  color: var(--status-red-text);
}

.admin-audit-panel__retry,
.admin-audit-panel__load-more {
  margin-top: 12px;
}

.admin-audit-panel__more {
  display: flex;
  justify-content: center;
}

/* ========================= */
/* ORG CHART — theme tokens  */
/* ========================= */

body.page-org-chart {
  --canvas-bg: var(--bg);
  --org-canvas-dot-color: rgba(24, 24, 27, 0.14);
  --org-canvas-dot-gap: 16px;
  --org-canvas-dot-size: 0.75px;
  --board-header: #639922;
  --board-body: #eaf3de;
  --board-circle: #c0dd97;
  --unit-header: #639922;
  --unit-body: #eaf3de;
  --unit-border: #639922;
  --manager-pill: #3d5c14;
  --supervisor-circle: #639922;
  --staff-circle-bg: #eaf3de;
  --staff-circle-border: #97c459;
  --edge-green: #639922;
  --edge-gray: var(--border);
  --card-shadow: var(--shadow-card);
  --toolbar-h: 56px;
  --sidebar-w: 320px;
  --radius: 12px;
  --font: "Vazirmatn", Tahoma, sans-serif;
  --org-surface: var(--card);
  --org-surface-muted: var(--muted);
  --org-border: var(--border);
  --org-btn-hover: var(--row-hover);
}

[data-theme="dark"] body.page-org-chart {
  --board-body: rgba(99, 153, 34, 0.18);
  --unit-body: rgba(99, 153, 34, 0.16);
  --staff-circle-bg: rgba(99, 153, 34, 0.12);
  --staff-circle-border: rgba(99, 153, 34, 0.35);
  --org-canvas-dot-color: rgba(226, 232, 240, 0.14);
}

body.page-org-chart .org-toolbar {
  background: var(--org-surface);
  border-bottom-color: var(--org-border);
}

body.page-org-chart .org-toolbar__btn {
  border-color: var(--org-border);
  background: var(--org-surface);
  color: var(--text-strong);
}

body.page-org-chart .org-toolbar__btn:hover {
  background: var(--org-btn-hover);
}

body.page-org-chart .org-toolbar__search .procurement-panel__filter-control--search {
  border-color: var(--org-border);
  background: var(--org-surface);
}

body.page-org-chart .org-toolbar__search .procurement-panel__search-input {
  height: 38px;
  min-height: 38px;
  line-height: 38px;
  caret-color: var(--text-strong);
}

body.page-org-chart .org-toolbar__search .procurement-panel__date-clear[hidden] {
  display: flex !important;
  visibility: hidden;
  pointer-events: none;
}

body.page-org-chart.has-admin-shell {
  height: 100vh;
  overflow: hidden;
}

body.page-org-chart.has-admin-shell .admin-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100vh;
}

body.page-org-chart.has-admin-shell.has-app-page-header .admin-main {
  height: 100vh;
  padding-top: var(--app-header-height);
}

body.page-org-chart.has-admin-shell .org-app {
  flex: 1;
  min-height: 0;
  width: 100%;
  height: auto;
}

body.page-org-chart.has-admin-shell .admin-page-content--flush {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  height: auto;
  overflow: hidden;
}

body.page-org-chart .custom-select {
  width: 100%;
}

body.page-org-chart .custom-select.is-open {
  position: relative;
  z-index: 8;
}

body.page-org-chart .custom-select__trigger.input.input--status {
  width: 100%;
  margin: 0;
  height: 38px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  background: var(--field-input-bg);
  border: 1px solid var(--org-border, var(--field-border-idle));
  border-radius: 9px;
  color: var(--text-strong, var(--text));
  justify-content: flex-start;
  text-align: right;
}

body.page-org-chart .custom-select__trigger.input.input--status:hover,
body.page-org-chart .custom-select.is-open .custom-select__trigger.input.input--status {
  transform: none;
  background: var(--field-input-bg);
  border-color: var(--field-border-active, var(--org-border));
}

body.page-org-chart .custom-select__panel {
  z-index: 40;
  max-height: min(280px, 42vh);
  overflow-y: auto;
  border-radius: 10px;
  box-shadow: var(--shadow-panel);
}

body.page-org-chart .custom-select__option {
  margin-top: 0;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
}

body.page-org-chart .custom-select__option:hover,
body.page-org-chart .custom-select__option:focus-visible {
  transform: none;
}

body.page-org-chart .org-unassigned__row .custom-select.is-open {
  position: relative;
  z-index: 30;
}

body.page-org-chart .org-unassigned__actions .custom-select {
  min-width: 192px;
  max-width: 192px;
  width: 192px;
  flex-shrink: 0;
}

body.page-org-chart .org-unassigned__actions .custom-select__panel {
  z-index: 50;
  min-width: 192px;
}

body.page-org-chart .org-unassigned__actions .custom-select__trigger.input.input--status {
  height: 34px;
  min-height: 34px;
  font-size: 12px;
  padding: 0 10px;
}

body.page-org-chart .org-unassigned__actions .org-modal__btn {
  height: 34px;
  min-height: 34px;
  padding: 0 10px;
  box-sizing: border-box;
}

/* Actions — فاز ۱: لیست + ساخت تسک */

.actions-panel--phase1 {
  --actions-grid-columns:
    minmax(0, 20fr)
    minmax(0, 10fr)
    minmax(0, 6fr)
    minmax(0, 12fr)
    minmax(0, 11fr)
    minmax(0, 8fr)
    minmax(0, 14fr)
    minmax(0, 5fr);
}

.actions-panel--phase1 .actions-panel__list-row {
  min-width: 900px;
}

.actions-panel__table-head--phase1 {
  margin-top: 0;
}

.actions-panel__filters--phase1 .actions-panel__scope-checks {
  margin-top: 12px;
  width: 100%;
  flex-wrap: wrap;
  height: auto;
  min-height: 38px;
}

.actions-panel__filters--phase1 .actions-panel__scope-tab {
  min-width: 96px;
  height: 38px;
  gap: 6px;
}

.actions-panel__filters--phase1 .actions-panel__scope-tab-label {
  min-width: 0;
}

.actions-panel__filters--phase1 .actions-panel__scope-count {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-muted);
  flex-shrink: 0;
}

.actions-panel__filters--phase1 .actions-panel__scope-tab--active .actions-panel__scope-count {
  background: color-mix(in srgb, var(--primary) 14%, var(--card));
  color: var(--text-strong);
}

.actions-panel__filters--phase1 .actions-panel__scope-tab--closed {
  opacity: 0.82;
}

.actions-panel__table-head .procurement-panel__th,
.actions-panel__table-head .procurement-panel__th--sortable {
  white-space: nowrap;
  min-width: 0;
}

.actions-panel__state {
  padding: 32px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.actions-panel__state--error p {
  margin: 0 0 12px;
  color: var(--status-red-text);
}

.actions-panel__state--loading p {
  margin: 0;
}

.actions-panel__cell--due {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  min-width: 0;
  white-space: nowrap;
}

.actions-panel__cell--creator {
  min-width: 0;
}

.actions-panel__cell--created {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: rtl;
  text-align: right;
  color: var(--text-muted);
  min-width: 0;
}

.actions-panel__overdue-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: var(--status-red-bg);
  color: var(--status-red-text);
}

.actions-panel__role-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

.actions-panel__role-badge--follower {
  background: rgba(124, 58, 237, 0.12);
  color: #7c3aed;
  border: 1px solid rgba(124, 58, 237, 0.28);
}

.actions-panel__role-badge--pool {
  background: var(--status-green-bg);
  color: var(--status-green-text);
  border: 1px solid color-mix(in srgb, var(--status-green-text) 28%, var(--border));
}

[data-theme="dark"] .actions-panel__role-badge--follower {
  background: rgba(167, 139, 250, 0.16);
  color: #c4b5fd;
  border-color: rgba(167, 139, 250, 0.35);
}

[data-theme="dark"] .actions-panel__role-badge--pool {
  background: var(--status-green-bg);
  color: var(--status-green-text);
  border-color: color-mix(in srgb, var(--status-green-text) 35%, var(--border));
}

.actions-panel__cell--actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
}

.actions-panel__cell--actions .actions-panel__btn--compact {
  height: 28px;
  margin: 0;
  padding: 0 8px;
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
  box-sizing: border-box;
  /* border پایین ردیف فضای بصری را نامتقارن می‌کند */
  transform: translateY(-1px);
}

.actions-panel__btn--compact {
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
}

.actions-panel__required {
  color: var(--status-red-text);
}

.actions-panel__radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
}

.actions-panel__radio,
.actions-panel__checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

.actions-panel__radio input,
.actions-panel__checkbox input {
  margin: 0;
}

body.page-actions .actions-panel__create-modal .actions-panel__checkbox input[type="checkbox"] {
  accent-color: var(--primary);
}

.actions-panel__approver-field {
  margin-top: 10px;
}

.actions-panel__badge--returned,
.actions-panel__badge--extension {
  background: var(--proc-status-pending-bg);
  color: var(--text-strong);
}

.actions-panel__list-row--accent-overdue {
  border-inline-start-color: var(--status-red);
}

.actions-panel__create-modal {
  --actions-create-gap: 12px;
  width: min(640px, 100%);
  max-height: min(92vh, 860px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.actions-panel__create-modal-header {
  padding: 14px 18px;
  flex-shrink: 0;
}

body.page-actions .actions-panel__create-modal-header .task-modal__close {
  font-size: 20px;
  flex-shrink: 0;
}

body.page-actions .actions-panel__create-modal .actions-panel__create-title-input {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  min-height: 42px;
  height: 42px;
  padding-block: 8px;
  color: var(--text-strong);
  background: var(--field-bg);
}

body.page-actions .actions-panel__create-modal .actions-panel__create-title-input::placeholder {
  font-weight: 500;
  color: var(--text-placeholder);
}

.actions-panel__create-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  padding: 0;
}

.actions-panel__create-grid {
  gap: var(--actions-create-gap);
}

.actions-panel__create-brief {
  min-height: 4.8em;
  height: auto;
  max-height: 12em;
  resize: vertical;
  line-height: 1.5;
  background: var(--field-bg);
}

body.page-actions .actions-panel__create-modal .procurement-modal__input,
body.page-actions .actions-panel__create-modal .procurement-modal__select,
body.page-actions .actions-panel__create-modal .procurement-modal__textarea {
  background: var(--field-bg);
  border-color: var(--field-border-idle);
}

body.page-actions .actions-panel__create-modal .procurement-modal__input:focus,
body.page-actions .actions-panel__create-modal .procurement-modal__select:focus,
body.page-actions .actions-panel__create-modal .procurement-modal__textarea:focus {
  border-color: var(--field-border-active);
  background: var(--field-input-bg);
}

.actions-panel__create-footer {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--border);
  background: var(--card);
}

.actions-panel__segment-group {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--field-input-bg);
  overflow: hidden;
}

.actions-panel__create-assign-type .actions-panel__segment-group {
  width: 100%;
}

.actions-panel__create-meta-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--actions-create-gap);
  min-width: 0;
}

.actions-panel__create-due-slot {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.actions-panel__create-due-slot > .procurement-modal__field {
  flex: 1 1 auto;
}

.actions-panel__assign-target .actions-panel__assign-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.actions-panel__assignee-multi {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.actions-panel__assignee-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 120px;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 0;
}

.actions-panel__assignee-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
  max-width: min(100%, 11.5rem);
  padding: 3px 6px 3px 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted, var(--row-hover)) 70%, var(--card));
  color: var(--text-strong);
  font-size: 12px;
  line-height: 1.3;
  width: auto;
}

.actions-panel__assignee-chip--more {
  max-width: none;
  padding: 3px 10px;
  border-style: dashed;
  background: transparent;
  color: var(--text-muted);
  font-weight: 600;
  cursor: pointer;
}

.actions-panel__assignee-chip--more:hover {
  background: color-mix(in srgb, var(--muted, var(--row-hover)) 55%, var(--card));
  color: var(--text-strong);
}

.actions-panel__assignee-count {
  color: var(--text-muted);
  font-weight: 600;
}

.actions-panel__assignee-self-hint {
  margin: 0;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
}

.actions-panel__assignee-chip-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text-muted) 22%, var(--card));
  color: var(--text-strong);
  font-size: 9px;
  font-weight: 700;
  overflow: hidden;
}

.actions-panel__assignee-chip-avatar--img {
  width: 22px;
  height: 22px;
  object-fit: cover;
}

.actions-panel__assignee-chip-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.actions-panel__assignee-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  width: auto;
}

.actions-panel__assignee-chip-remove:hover {
  background: color-mix(in srgb, var(--text-muted) 16%, transparent);
  color: var(--text-strong);
}

.actions-panel__assignee-search-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
  position: relative;
}

.actions-panel__assignee-search {
  flex: 1 1 auto;
  min-width: 0;
}

.actions-panel__unit-assignees-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text-muted);
  cursor: pointer;
}

.actions-panel__unit-assignees-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--muted, var(--row-hover)) 55%, var(--card));
  color: var(--text-strong);
}

.actions-panel__unit-assignees-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.actions-panel__unit-assignees-btn svg {
  display: block;
  width: 16px;
  height: 16px;
}

.actions-panel__unit-assignees-menu {
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  top: calc(100% + 4px);
  z-index: 5;
  max-height: 220px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--text-strong) 12%, transparent);
}

.actions-panel__unit-assignees-menu--portaled {
  inset: auto;
  z-index: 20001;
  overflow: auto;
}

.actions-panel__unit-assignees-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-strong);
  font-size: 12px;
  text-align: start;
  cursor: pointer;
}

.actions-panel__unit-assignees-item:hover {
  background: color-mix(in srgb, var(--muted, var(--row-hover)) 70%, var(--card));
  color: var(--text-strong);
}

.actions-panel__unit-assignees-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.actions-panel__unit-assignees-count {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 11px;
}

.actions-panel__unit-assignees-empty {
  margin: 0;
  padding: 10px;
  color: var(--text-muted);
  font-size: 12px;
}

.actions-panel__assignee-batch-hint {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

.actions-panel__segment-tab {
  position: relative;
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 12px;
  min-height: 36px;
  border: none;
  border-inline-start: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.actions-panel__segment-tab:first-child {
  border-inline-start: none;
}

.actions-panel__segment-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.actions-panel__segment-tab--active {
  background: var(--primary-soft);
  color: var(--text-strong);
}

.actions-panel__segment-tab:hover:not(.actions-panel__segment-tab--active) {
  background: var(--row-hover);
  color: var(--text);
}

.actions-panel__assign-target .actions-panel__assign-field[hidden] {
  display: none !important;
}

body.page-actions .actions-panel__create-modal .result-person-field {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}

body.page-actions .actions-panel__create-modal .result-person-field .result-person-avatar {
  position: absolute;
  inset-inline-start: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: 24px;
  height: 24px;
  pointer-events: none;
}

body.page-actions .actions-panel__create-modal .result-person-field .result-person-avatar[hidden] {
  display: none !important;
}

body.page-actions .actions-panel__create-modal .result-person-field .input.input--status,
body.page-actions .actions-panel__create-modal .custom-select__trigger,
body.page-actions .actions-panel__create-modal .custom-select__trigger.input.input--status,
body.page-actions .actions-panel__create-modal .actions-panel__assign-field--department .procurement-modal__select {
  width: 100%;
  margin: 0;
  min-height: 38px;
  height: 38px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: normal;
  line-height: 1.4;
  box-sizing: border-box;
  background: var(--field-input-bg);
  border: 1px solid var(--field-border-idle);
  border-radius: 10px;
  color: var(--text-strong);
}

body.page-actions .actions-panel__create-modal [data-field="due-offset"] .actions-panel__recurrence-n-input {
  width: 72px;
  max-width: 30vw;
  min-height: 38px;
  height: 38px;
  margin: 0;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: normal;
  line-height: 1.4;
  box-sizing: border-box;
  text-align: center;
  background: var(--field-input-bg);
  border: 1px solid var(--field-border-idle);
  border-radius: 10px;
  color: var(--text-strong);
}

body.page-actions .actions-panel__create-modal [data-field="due-offset"] .actions-panel__recurrence-n-input:focus {
  outline: none;
  border-color: var(--field-border-active);
  background: var(--field-input-bg);
}

body.page-actions .actions-panel__create-modal .procurement-modal__date-field {
  width: 100%;
  min-height: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: var(--field-input-bg);
  border: 1px solid var(--field-border-idle);
  border-radius: 10px;
}

body.page-actions .actions-panel__create-modal .procurement-modal__date-field .procurement-modal__input,
body.page-actions .actions-panel__create-modal .procurement-modal__date-field .procurement-modal__input--jalali-date {
  width: 100%;
  min-height: 38px;
  height: 38px;
  margin: 0;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: normal;
  line-height: 1.4;
  box-sizing: border-box;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--text-strong);
  box-shadow: none;
}

body.page-actions .actions-panel__create-modal .procurement-modal__date-field:focus-within {
  border-color: var(--field-border-active);
}

body.page-actions .actions-panel__create-modal .procurement-modal__date-field .procurement-modal__input:focus,
body.page-actions .actions-panel__create-modal .procurement-modal__date-field .procurement-modal__input--jalali-date:focus {
  outline: none;
  border: none;
  background: transparent;
  box-shadow: none;
}

body.page-actions .actions-panel__create-modal .result-person-field .input.input--status::placeholder {
  color: var(--text-placeholder);
}

body.page-actions .actions-panel__create-modal .custom-select:has(.custom-select__native option[value=""]:checked) .custom-select__value {
  color: var(--text-placeholder);
}

body.page-actions .actions-panel__create-modal .result-person-field .input.input--status:focus,
body.page-actions .actions-panel__create-modal .actions-panel__assign-field--department .procurement-modal__select:focus {
  outline: none;
  border-color: var(--field-border-active);
}

body.page-actions .actions-panel__create-modal .result-person-field .input.input--status:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

body.page-actions .actions-panel__create-modal .custom-select {
  width: 100%;
  min-width: 0;
}

body.page-actions .actions-panel__create-modal .custom-select__trigger.input.input--status:hover,
body.page-actions .actions-panel__create-modal .custom-select.is-open .custom-select__trigger.input.input--status {
  border-color: var(--field-border-active);
}

body.page-actions .actions-panel__create-modal .result-person-field.result-person-field--has-avatar .input.input--status {
  padding-inline-start: 40px;
}

body.page-actions .actions-panel__create-modal .custom-select__option {
  font-size: 13px;
}

.actions-panel__create-parent-note {
  margin: 0;
  padding: 14px 18px 8px;
  font-size: 12px;
  color: var(--text-muted);
}

/* Actions — اقدام‌های دوره‌ای */
.actions-panel__create-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 18px 8px;
  min-height: 0;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

.actions-panel__create-scroll::-webkit-scrollbar,
.actions-panel__assignee-chips::-webkit-scrollbar,
.actions-panel__unit-assignees-menu::-webkit-scrollbar,
.actions-panel__create-modal .custom-select__panel::-webkit-scrollbar,
.custom-select__panel--portaled::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.actions-panel__create-scroll::-webkit-scrollbar-track,
.actions-panel__assignee-chips::-webkit-scrollbar-track,
.actions-panel__unit-assignees-menu::-webkit-scrollbar-track,
.actions-panel__create-modal .custom-select__panel::-webkit-scrollbar-track,
.custom-select__panel--portaled::-webkit-scrollbar-track {
  background: transparent;
}

.actions-panel__create-scroll::-webkit-scrollbar-thumb,
.actions-panel__assignee-chips::-webkit-scrollbar-thumb,
.actions-panel__unit-assignees-menu::-webkit-scrollbar-thumb,
.actions-panel__create-modal .custom-select__panel::-webkit-scrollbar-thumb,
.custom-select__panel--portaled::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--scrollbar-thumb);
}

.actions-panel__create-scroll::-webkit-scrollbar-thumb:hover,
.actions-panel__assignee-chips::-webkit-scrollbar-thumb:hover,
.actions-panel__unit-assignees-menu::-webkit-scrollbar-thumb:hover,
.actions-panel__create-modal .custom-select__panel::-webkit-scrollbar-thumb:hover,
.custom-select__panel--portaled::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

.actions-panel__assignee-chips,
.actions-panel__unit-assignees-menu,
.actions-panel__create-modal .custom-select__panel,
.custom-select__panel--portaled {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

.actions-panel__create-section-head {
  display: flex;
  align-items: center;
  margin-bottom: 2px;
}

.actions-panel__create-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}

.actions-panel__create-more {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 12px;
}

.actions-panel__create-more-ticks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.actions-panel__create-more-ticks .actions-panel__checkbox {
  min-height: 44px;
  padding: 6px 0;
}

.actions-panel__create-more-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: flex-start;
}

.actions-panel__follower-field,
.actions-panel__approver-field {
  margin-top: 0;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.actions-panel__follower-field[hidden],
.actions-panel__approver-field[hidden] {
  display: none !important;
}

.actions-panel__field-hint {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-muted);
}

.actions-panel__recurrence-section {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 10px;
}

.actions-panel__recurrence-block {
  padding: 0;
  border: none;
  background: transparent;
  display: grid;
  gap: var(--actions-create-gap);
}

.actions-panel__recurrence-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
}

.actions-panel__recurrence-n-input {
  width: 72px;
  max-width: 30vw;
  text-align: center;
}

.actions-panel__recurrence-end-field {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.actions-panel__recurrence-preview {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  font-size: 12px;
  line-height: 1.7;
  color: var(--text);
  display: grid;
  gap: 6px;
  min-height: 44px;
  align-content: center;
}

.actions-panel__recurrence-preview-label {
  font-weight: 700;
  color: var(--text-muted);
}

.actions-panel__recurrence-preview-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.actions-panel__recurrence-preview-date {
  display: inline-flex;
}

.actions-panel__recurrence-preview--error {
  color: var(--status-red);
  border-color: var(--status-red-border);
  background: var(--status-red-bg-subtle);
  display: block;
}

.actions-panel__recurrence-preview--hint {
  color: var(--text-muted);
  border-style: dashed;
  display: block;
}

.actions-panel__recurrence-instance-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
}

.actions-panel__create-modal [data-field] {
  overflow: hidden;
  transition: opacity 0.18s ease, max-height 0.18s ease;
}

.actions-panel__create-modal [data-field][hidden] {
  display: none !important;
}

.actions-panel__segment-tab:has(.actions-panel__segment-input:disabled) {
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .actions-panel__create-modal [data-field],
  .actions-panel__segment-tab {
    transition: none;
  }
}

.actions-panel__create-more-ticks .actions-panel__segment-group,
.actions-panel__recurrence-block .actions-panel__segment-group {
  width: 100%;
}

.actions-panel__recurrence-block .actions-panel__segment-tab {
  flex: 1;
  min-height: 44px;
  justify-content: center;
}

.actions-recurrence-modal {
  width: calc(100vw - 32px);
  max-width: 640px;
  max-height: 85vh;
  height: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.actions-recurrence-modal .actions-recurrence__header-body {
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}

.actions-recurrence-modal .task-modal__header-row--title {
  align-items: center;
  padding-top: 12px;
  padding-bottom: 12px;
}

.actions-recurrence-modal .task-modal__header-row--title .task-modal__close {
  align-self: center;
}

.actions-recurrence-modal .actions-recurrence__header-body .task-modal__back {
  margin-bottom: 0;
  flex-shrink: 0;
}

.actions-recurrence-modal .actions-recurrence__header-body .task-modal__title-line {
  flex: 1;
  min-width: 0;
  align-items: center;
}

.actions-recurrence-modal .actions-recurrence__header-body .task-modal__title {
  font-size: 16px;
  line-height: 1.35;
  margin: 0;
}

.actions-recurrence__body {
  padding: 14px 18px 16px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  flex: 1 1 auto;
}

.actions-recurrence__body--list {
  gap: 12px;
  overflow: hidden;
}

.actions-recurrence__list-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-shrink: 0;
  width: 100%;
}

.actions-recurrence__filter-segments {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
}

.actions-recurrence__filter-segments .actions-panel__segment-tab {
  white-space: nowrap;
}

.actions-recurrence__search {
  position: relative;
  flex: 0 0 auto;
  width: 240px;
  max-width: 240px;
  height: 38px;
  min-height: 38px;
  box-sizing: border-box;
  border: 1px solid var(--border);
}

.actions-recurrence__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
}

.actions-recurrence__list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  height: 40px;
  max-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  text-align: right;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: background 0.15s ease;
  box-sizing: border-box;
  overflow: hidden;
}

.actions-recurrence__list-row:hover {
  background: var(--row-hover);
}

.actions-recurrence__list-row--inactive {
  opacity: 0.7;
  color: var(--text-muted);
}

.actions-recurrence__list-row-main {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.actions-recurrence__list-icon {
  display: inline-flex;
  color: var(--text-muted);
  flex-shrink: 0;
}

.actions-recurrence__list-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
  max-width: 160px;
}

.actions-recurrence__list-row--inactive .actions-recurrence__list-title {
  color: var(--text-muted);
}

.actions-recurrence__list-meta,
.actions-recurrence__list-next {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
  white-space: nowrap;
  flex-shrink: 0;
}

.actions-recurrence__list-next {
  margin-inline-start: auto;
}

.actions-recurrence__list-health {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  flex-shrink: 0;
}

.actions-recurrence__list-health-item {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.actions-recurrence__list-health-item--ontime {
  color: var(--status-green-text);
}

.actions-recurrence__list-health-item--late {
  color: var(--text-strong);
}

.actions-recurrence__list-health-item--overdue {
  color: var(--status-red);
}

.actions-recurrence__list-health-empty,
.actions-recurrence__stats-empty {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.actions-recurrence__list-chevron {
  color: var(--text-muted);
  display: inline-flex;
  flex-shrink: 0;
}

.actions-recurrence__list-row .actions-recurrence__badge {
  flex-shrink: 0;
}

.actions-recurrence__empty {
  display: grid;
  gap: 12px;
  justify-items: center;
  padding: 32px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.actions-recurrence__empty-icon {
  display: inline-flex;
  color: var(--text-muted);
  opacity: 0.8;
}

.actions-recurrence__empty-icon svg {
  width: 28px;
  height: 28px;
}

.actions-recurrence__empty p {
  margin: 0;
}

.actions-recurrence__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.actions-recurrence__stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--muted);
  font-size: 12px;
}

.actions-recurrence__stat-label {
  color: var(--text-muted);
}

.actions-recurrence__stat-value {
  font-weight: 700;
  color: var(--text-strong);
}

.actions-recurrence__stat--ontime {
  background: var(--status-green-bg);
  border-color: var(--status-green-border);
}

.actions-recurrence__stat--ontime .actions-recurrence__stat-value {
  color: var(--status-green-text);
}

.actions-recurrence__stat--late {
  background: var(--proc-status-pending-bg);
  border-color: var(--proc-status-pending-border);
}

.actions-recurrence__stat--overdue {
  background: var(--status-red-bg);
  border-color: var(--status-red-border);
}

.actions-recurrence__stat--overdue .actions-recurrence__stat-value {
  color: var(--status-red);
}

.actions-recurrence__banner {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.7;
}

.actions-recurrence__banner--warning {
  background: var(--proc-status-pending-bg);
  border: 1px solid var(--proc-status-pending-border);
  color: var(--text-strong);
}

.actions-recurrence__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
}

.actions-recurrence__meta-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 10px;
  align-items: baseline;
  font-size: 13px;
  min-width: 0;
}

.actions-recurrence__meta-label {
  color: var(--text-muted);
  white-space: nowrap;
}

.actions-recurrence__meta-value {
  color: var(--text-strong);
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.actions-recurrence__footer {
  flex-shrink: 0;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--border);
  background: var(--card);
}

.actions-recurrence__footer--list {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.actions-recurrence__footer--list .actions-panel__btn {
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0 14px;
  height: 36px;
}

.actions-recurrence__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.actions-recurrence__actions .actions-panel__btn {
  width: auto;
  min-width: 0;
  margin: 0;
}

.actions-recurrence-modal .actions-panel__btn--danger {
  color: var(--status-red);
  border-color: var(--status-red-border);
  background: var(--status-red-bg);
}

.actions-recurrence-modal .actions-panel__btn--danger:hover:not(:disabled) {
  background: var(--status-red-bg-medium);
  border-color: var(--status-red-border);
  color: var(--status-red);
}

.actions-recurrence__section-title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
}

.actions-recurrence__instances-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.actions-recurrence__instance {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 40px;
  max-height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--border);
  background: var(--card);
  text-align: right;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: background 0.15s ease;
  box-sizing: border-box;
  overflow: hidden;
}

.actions-recurrence__instance:hover {
  background: var(--row-hover);
}

.actions-recurrence__instance-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 40%;
}

.actions-recurrence__instance-status,
.actions-recurrence__instance-due {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.actions-recurrence__instance-due {
  margin-inline-start: auto;
  color: var(--text-muted);
}

.actions-recurrence__list-chevron {
  display: none;
}

.actions-recurrence__instance--ontime {
  border-inline-start-color: var(--status-green);
  background: var(--card);
}

.actions-recurrence__instance--ontime .actions-recurrence__instance-status {
  color: var(--status-green-text);
}

.actions-recurrence__instance--late {
  border-inline-start-color: var(--proc-status-pending);
  background: var(--card);
}

.actions-recurrence__instance--overdue {
  border-inline-start-color: var(--status-red);
  background: var(--card);
}

.actions-recurrence__instance--overdue .actions-recurrence__instance-status {
  color: var(--status-red);
}

.actions-recurrence__instance--neutral {
  border-inline-start-color: var(--border);
}

.actions-recurrence__instances-empty,
.actions-recurrence__state {
  padding: 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.actions-recurrence__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

.actions-recurrence__badge--active {
  background: var(--status-green-bg);
  color: var(--status-green-text);
  border: 1px solid var(--status-green-border);
}

.actions-recurrence__badge--paused {
  background: var(--surface-btn);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.actions-recurrence__badge--warning {
  background: var(--proc-status-pending-bg);
  color: var(--text-strong);
  border: 1px solid var(--proc-status-pending-border);
}

.actions-recurrence__badge--danger {
  background: var(--status-red-bg);
  color: var(--status-red);
  border: 1px solid var(--status-red-border);
}

@media (max-width: 640px) {
  .actions-panel__create-modal {
    width: 100%;
    max-width: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
    overflow-x: hidden;
  }

  .actions-panel__create-scroll {
    padding: 12px 14px 8px;
    overflow-x: hidden;
  }

  .actions-panel__create-grid {
    grid-template-columns: 1fr;
  }

  .actions-panel__create-meta-row {
    grid-template-columns: 1fr;
  }

  .actions-panel__create-more-ticks {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .actions-panel__create-more-fields {
    flex-direction: column;
  }

  .actions-panel__create-footer {
    position: sticky;
    bottom: 0;
    z-index: 1;
  }

  .actions-panel__recurrence-block {
    grid-template-columns: 1fr;
    padding: 10px;
    min-width: 0;
  }

  .actions-panel__recurrence-preview-dates {
    flex-direction: column;
  }

  .actions-panel__segment-group {
    width: 100%;
  }

  .actions-panel__segment-tab {
    flex: 1;
    min-height: 44px;
    justify-content: center;
  }

  .actions-recurrence-modal {
    width: calc(100vw - 16px);
    max-width: 100%;
    max-height: 90vh;
    max-height: 90dvh;
    margin: 0 8px;
    border-radius: 12px;
  }

  .actions-recurrence__list-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .actions-recurrence__filter-segments {
    width: 100%;
  }

  .actions-recurrence__filter-segments .actions-panel__segment-tab {
    flex: 1;
    min-height: 44px;
    justify-content: center;
  }

  .actions-recurrence__search {
    width: 100%;
    max-width: none;
  }

  .actions-recurrence__meta {
    grid-template-columns: 1fr;
  }

  .actions-recurrence__meta-row {
    grid-template-columns: auto 1fr;
    gap: 6px 10px;
  }

  .actions-recurrence__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .actions-recurrence__actions .actions-panel__btn {
    width: 100%;
    min-height: 44px;
  }

  .actions-recurrence__footer {
    padding: 12px 14px 14px;
  }
}

@media (max-width: 900px) {
  .actions-panel--phase1 {
    --actions-grid-columns:
      minmax(180px, 1.6fr)
      minmax(110px, 1fr)
      minmax(72px, 0.7fr)
      minmax(120px, 1fr)
      minmax(110px, 0.9fr)
      minmax(100px, 0.75fr)
      minmax(150px, 1.25fr)
      minmax(72px, 0.55fr);
  }

  .actions-panel__filters--phase1 .procurement-panel__filters-top-row {
    flex-wrap: wrap;
  }
}

/* Actions — فاز ۲: مودال جزئیات و چرخهٔ حیات */

.actions-panel__list-row[data-task-id] {
  cursor: pointer;
}

.task-modal__header-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.task-modal__header--v2 .task-modal__header-main {
  gap: 6px;
}

.task-modal__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-strong);
  line-height: 1.4;
}

.task-modal__header-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.task-modal__lifecycle-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--muted);
}

.task-modal--v2 .task-modal__lifecycle-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  overflow: hidden;
  box-sizing: border-box;
}

.task-modal__lifecycle-btn {
  height: 34px;
  padding: 0 12px;
  font-size: 12px;
}

.task-modal--v2 .task-modal__lifecycle-btn {
  display: inline-flex;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  max-width: none;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s, opacity 0.12s;
}

.task-modal--v2 .task-modal__lifecycle-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.task-modal--v2 .task-modal__lifecycle-btn--primary {
  background: var(--primary);
  color: var(--btn-on-primary);
  border-color: var(--primary);
}

.task-modal--v2 .task-modal__lifecycle-btn--primary:hover:not(:disabled) {
  filter: brightness(1.05);
}

.task-modal--v2 .task-modal__lifecycle-btn--success {
  background: var(--status-green);
  color: var(--btn-on-primary);
  border-color: var(--status-green);
}

.task-modal--v2 .task-modal__lifecycle-btn--success:hover:not(:disabled) {
  filter: brightness(1.05);
}

.task-modal--v2 .task-modal__lifecycle-btn--danger {
  background: var(--card);
  color: var(--status-red-text);
  border-color: color-mix(in srgb, var(--status-red) 35%, var(--border));
}

.task-modal--v2 .task-modal__lifecycle-btn--danger:hover:not(:disabled) {
  background: var(--status-red-bg);
}

.task-modal--v2 .task-modal__lifecycle-btn--secondary {
  background: var(--muted);
  color: var(--text);
  border-color: var(--border);
}

.task-modal--v2 .task-modal__lifecycle-btn--secondary:hover:not(:disabled) {
  background: var(--surface-btn);
  color: var(--text-strong);
}

.task-modal--v2 .task-modal__lifecycle-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.task-modal--v2 .task-modal__lifecycle-btn-icon svg {
  width: 13px;
  height: 13px;
}

.task-modal--v2 .task-modal__lifecycle-btn-label {
  line-height: 1.2;
}

.task-modal__tab-panel {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 18px 20px 24px;
}

.task-modal {
  display: flex;
  flex-direction: column;
  max-height: min(92vh, 820px);
}

.task-modal__banner {
  padding: 10px 14px;
  margin-bottom: 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
}

.task-modal__banner--waiting-chain {
  background: var(--proc-status-pending-bg);
  color: var(--text-strong);
  border: 1px solid var(--border);
}

.task-modal__detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
}

.task-modal__detail-field--full {
  grid-column: 1 / -1;
}

.task-modal__detail-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.task-modal__detail-value {
  font-size: 13px;
  color: var(--text-strong);
  line-height: 1.6;
}

.task-modal__multiline {
  white-space: pre-wrap;
}

.task-modal__extended-badge,
.task-modal__pool-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  margin-inline-start: 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: var(--proc-status-in-progress-bg);
  color: var(--text);
}

.task-modal__tab-state {
  padding: 24px 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.task-modal__tab-state--error p {
  color: var(--status-red-text);
}

.task-modal__loading-wrap {
  padding: 40px 20px;
}

.task-modal__chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 280px;
}

.task-modal__chat-list {
  flex: 1;
  min-height: 200px;
  max-height: 420px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.task-modal__comment-type,
.task-modal__role-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  flex-shrink: 0;
}

.task-modal__comment-type {
  background: var(--proc-status-pending-bg);
  color: var(--text-strong);
}

.task-modal__role-badge--assignee {
  background: var(--status-green-bg);
  color: var(--status-green-text);
  border: 1px solid var(--status-green-border);
}

.task-modal__role-badge--follower {
  background: rgba(124, 58, 237, 0.12);
  color: #7c3aed;
  border: 1px solid rgba(124, 58, 237, 0.28);
}

.task-modal__role-badge--creator {
  background: color-mix(in srgb, var(--text-muted) 14%, transparent);
  color: var(--text-muted);
  border: 1px solid color-mix(in srgb, var(--text-muted) 28%, transparent);
}

.task-modal__role-badge--approver {
  background: var(--proc-status-pending-bg);
  color: var(--text-strong);
  border: 1px solid var(--proc-status-pending-border);
}

[data-theme="dark"] .task-modal__role-badge--follower {
  background: rgba(167, 139, 250, 0.16);
  color: #c4b5fd;
  border-color: rgba(167, 139, 250, 0.35);
}

[data-theme="dark"] .task-modal__role-badge--assignee {
  color: var(--status-green-text);
}

.task-modal__comment-avatar-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.task-modal__followup-toggle {
  margin-bottom: 8px;
}

.task-modal__comment-compose-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.task-modal__timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-inline-start: 4px;
}

.task-modal__timeline-item {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 12px;
  padding-bottom: 16px;
  position: relative;
}

.task-modal__timeline-item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 0;
  inset-inline-start: 6px;
  width: 2px;
  background: var(--border);
}

.task-modal__timeline-dot {
  width: 12px;
  height: 12px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid var(--card);
  box-shadow: 0 0 0 1px var(--border);
}

.task-modal__timeline-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
}

.task-modal__timeline-actor {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-strong);
}

.task-modal__timeline-badge {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  background: var(--muted);
  color: var(--text-muted);
}

.task-modal__timeline-time {
  font-size: 11px;
  color: var(--text-muted);
}

.task-modal__deps {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.task-modal__dep-section h3 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-strong);
}

.task-modal__dep-item {
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
}

.task-modal__dep-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: 6px;
}

.task-modal__dep-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted);
}

.task-modal__dep-type {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--muted);
}

.task-modal__dep-empty {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.task-modal__subdialog-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--overlay);
}

.task-modal {
  position: relative;
}

.task-modal__subdialog {
  width: min(480px, 100%);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}

.task-modal__subdialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.task-modal__subdialog-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.task-modal__subdialog-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.task-modal__subdialog .task-modal__person-field {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}

.task-modal__subdialog .task-modal__person-field .result-person-avatar {
  position: absolute;
  inset-inline-start: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: 24px;
  height: 24px;
  pointer-events: none;
}

.task-modal__subdialog .task-modal__person-field .result-person-avatar[hidden] {
  display: none !important;
}

.task-modal__subdialog .task-modal__person-field .input.input--status {
  width: 100%;
  margin: 0;
  min-height: 38px;
  height: 38px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: normal;
  line-height: 1.4;
  box-sizing: border-box;
  background: var(--field-input-bg);
  border: 1px solid var(--field-border-idle);
  border-radius: 10px;
  color: var(--text-strong);
}

.task-modal__subdialog .task-modal__person-field .input.input--status:focus {
  border-color: var(--field-border-active);
  outline: none;
}

.task-modal__subdialog .task-modal__person-field.result-person-field--has-avatar .input.input--status {
  padding-inline-start: 40px;
}

.task-modal__subdialog-footer {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.task-modal__subdialog-footer .actions-panel__btn {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  width: auto;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 720px) {
  .task-modal__detail-grid {
    grid-template-columns: 1fr;
  }
}

/* Actions — فاز ۳: پیوست‌ها و افزودن وابستگی */

.task-modal__attachments {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.task-modal__collapsible--plain .task-modal__attachments {
  gap: 12px;
}

.task-modal__att-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 16px;
  border: 2px dashed var(--border);
  border-radius: 12px;
  background: var(--muted);
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}

.task-modal__att-upload--dragover {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.task-modal__att-upload--busy {
  opacity: 0.85;
  pointer-events: none;
}

.task-modal__att-upload-text {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
}

.task-modal__att-upload-hint {
  margin: 0;
  font-size: 11px;
  color: var(--text-muted);
}

.task-modal__att-progress {
  width: 100%;
  max-width: 240px;
  height: 4px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
  position: relative;
}

.task-modal__att-progress::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  background: var(--primary);
  animation: task-modal-att-progress 1s ease-in-out infinite;
}

@keyframes task-modal-att-progress {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

.task-modal__att-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.task-modal__att-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
}

.task-modal__att-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--muted);
  position: relative;
}

.task-modal__att-icon--pdf::after {
  content: "PDF";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  color: var(--status-red-text);
}

.task-modal__att-icon--word::after {
  content: "W";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: var(--primary);
}

.task-modal__att-icon--excel::after {
  content: "X";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: var(--status-green-text);
}

.task-modal__att-icon--image::after {
  content: "▣";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--text-muted);
}

.task-modal__att-main {
  flex: 1;
  min-width: 0;
}

.task-modal__att-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-modal__att-meta {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-muted);
}

.task-modal__att-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text-strong);
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.task-modal__att-download:hover {
  background: var(--surface-btn);
  border-color: var(--primary);
  color: var(--primary);
}

.task-modal__att-empty {
  padding: 20px 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.task-modal__dep-toolbar {
  margin-bottom: 14px;
}

.task-modal__dep-search-state {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

.task-modal__dep-search-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow: auto;
  margin: 8px 0 12px;
}

.task-modal__dep-search-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  text-align: right;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.task-modal__dep-search-item:hover {
  background: var(--row-hover);
}

.task-modal__dep-search-item--selected {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.task-modal__dep-search-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-modal__dep-search-status {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.task-modal__dep-warning {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-strong);
  background: var(--proc-status-pending-bg);
  border: 1px solid var(--border);
}

/* Actions — مودال جزئیات v2 (دوستونی RTL) */

.task-modal--v2 {
  width: min(1300px, calc(100vw - 40px));
  height: min(800px, calc(100vh - 40px));
  min-width: 0;
  min-height: 0;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.task-modal--v2 > .task-modal__header--v2 {
  flex: 0 0 auto;
  width: 100%;
  border-bottom: 1px solid var(--border);
}

.task-modal--v2 > .task-modal__columns {
  flex: 1 1 auto;
  min-height: 0;
}

.task-modal__header--v2 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  flex-shrink: 0;
  background: var(--card);
  overflow: hidden;
}

.task-modal__header-row {
  display: flex;
  flex-direction: row;
  direction: rtl;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 12px 16px;
}

.task-modal__header-row--title {
  padding-bottom: 12px;
  align-items: flex-start;
}

.task-modal__header-row--title .task-modal__close {
  flex-shrink: 0;
  align-self: flex-start;
  margin-inline-start: auto;
}

.task-modal__header-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.task-modal__header-body .task-modal__back {
  margin-bottom: 2px;
}

.task-modal__main-toolbar {
  margin: 16px 20px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  direction: rtl;
}

.task-modal__main-toolbar .task-modal__lifecycle-bar {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.task-modal__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.task-modal__icon-btn:hover {
  background: var(--muted);
  color: var(--text-strong);
  border-color: var(--border);
}

.task-modal__header--v2 .task-modal__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-strong);
  line-height: 1.35;
}

.task-modal__title-line {
  display: flex;
  flex-direction: row;
  direction: rtl;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  width: 100%;
  min-width: 0;
}

.task-modal__parent-prefix {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.35;
  flex-shrink: 1;
  min-width: 0;
}

.task-modal__parent-prefix .task-modal__breadcrumb-link,
.task-modal__parent-prefix .task-modal__breadcrumb-text {
  font-size: inherit;
  font-weight: 400;
  color: var(--text-muted);
  line-height: inherit;
}

.task-modal__parent-prefix .task-modal__breadcrumb-link:hover {
  color: var(--text-muted);
  text-decoration: underline;
}

.task-modal__header-body--with-back {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.task-modal__header-body--with-back .task-modal__back {
  margin-bottom: 0;
  flex-shrink: 0;
  order: 0;
}

.task-modal__header-body--with-back .task-modal__title-line {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  align-items: center;
  order: 1;
}

.task-modal__header-body--with-back .task-modal__header-badges {
  flex: 1 0 100%;
  width: 100%;
  order: 2;
}

.task-modal__header--v2 .task-modal__header-badges {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.task-modal__header-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.task-modal__header-meta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  color: var(--text-muted);
}

.task-modal__header-meta-icon svg {
  width: 14px;
  height: 14px;
}

.task-modal__header-meta-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1;
}

.task-modal__header--v2 .task-modal__close {
  font-size: 20px;
}

.task-modal__header--v2 .task-modal__back {
  font-size: inherit;
}

.task-modal__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.task-modal--v2 .task-modal__lifecycle-overflow {
  position: relative;
  flex: 0 0 auto;
}

.task-modal--v2 .task-modal__lifecycle-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.task-modal--v2 .task-modal__lifecycle-more:hover {
  background: var(--surface-btn);
  color: var(--text-strong);
}

.task-modal__lifecycle-menu {
  position: absolute;
  top: calc(100% + 4px);
  inset-inline-start: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 180px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  box-shadow: var(--shadow-panel);
}

.task-modal__lifecycle-menu--hidden {
  display: none;
}

.task-modal__breadcrumb {
  padding: 8px 20px 0;
  font-size: 12px;
}

.task-modal__breadcrumb-link {
  border: none;
  background: none;
  padding: 0;
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.task-modal__breadcrumb-link:hover {
  text-decoration: underline;
}

.task-modal__breadcrumb-text {
  color: var(--text-muted);
  font-size: 12px;
}

.task-modal__banner--readonly {
  margin: 8px 20px 0;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  background: var(--muted);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.task-modal__banner--subtasks-lock {
  margin: 8px 20px 0;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  background: var(--proc-status-pending-bg);
  color: var(--text-strong);
  border: 1px solid var(--border);
}

.task-modal__banner--reject-reason {
  margin: 8px 20px 0;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  background: var(--status-red-bg-subtle);
  color: var(--text-strong);
  border: 1px solid var(--border);
  line-height: 1.6;
}

.task-modal__banner--reject-reason .task-modal__banner-label {
  color: var(--text-muted);
  font-weight: 700;
}

.task-modal__subdialog-context {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--muted);
  border: 1px solid var(--border);
}

.task-modal__subdialog-context-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.task-modal__subdialog-context-row--block {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

.task-modal__subdialog-context-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
}

.task-modal__subdialog-context-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
  text-align: start;
}

.task-modal__reason-category-chip {
  display: inline-flex;
  align-items: center;
  margin-inline-end: 8px;
  margin-bottom: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--muted, var(--row-hover));
  color: var(--text-strong);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  vertical-align: middle;
}

.task-modal__columns {
  display: flex;
  flex-direction: row;
  direction: rtl;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  align-items: stretch;
}

.task-modal__col--main {
  flex: 0 0 64%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.task-modal__col--main-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-bottom: 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

.task-modal--v2 .task-modal__col--main-scroll::-webkit-scrollbar,
.task-modal--v2 .task-modal__activity-feed::-webkit-scrollbar,
.task-modal--v2 .task-modal__subdialog-body::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.task-modal--v2 .task-modal__col--main-scroll::-webkit-scrollbar-track,
.task-modal--v2 .task-modal__activity-feed::-webkit-scrollbar-track,
.task-modal--v2 .task-modal__subdialog-body::-webkit-scrollbar-track {
  background: transparent;
}

.task-modal--v2 .task-modal__col--main-scroll::-webkit-scrollbar-thumb,
.task-modal--v2 .task-modal__activity-feed::-webkit-scrollbar-thumb,
.task-modal--v2 .task-modal__subdialog-body::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 1px solid transparent;
  background-clip: padding-box;
}

.task-modal--v2 .task-modal__col--main-scroll::-webkit-scrollbar-thumb:hover,
.task-modal--v2 .task-modal__activity-feed::-webkit-scrollbar-thumb:hover,
.task-modal--v2 .task-modal__subdialog-body::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: padding-box;
}

.task-modal__col--main-scroll > .task-modal__content-block,
.task-modal__col--main-scroll > .task-modal__field-chips,
.task-modal__col--main-scroll > .task-modal__collapsible,
.task-modal__col--main-scroll > .task-modal__section-state {
  margin-inline: 20px;
}

.task-modal__col--main-scroll > .task-modal__main-body {
  margin-top: 40px;
  margin-inline: 20px;
}

.task-modal__col--main-scroll > .task-modal__field-chips {
  margin-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.task-modal__col--activity {
  flex: 0 0 36%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  align-self: stretch;
  background: var(--muted);
  border-inline-start: 1px solid var(--border);
}

.task-modal__activity-head {
  padding: 14px 14px 8px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-strong);
  flex-shrink: 0;
}

.task-modal__field-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 0;
}

.task-modal__field-chip {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--muted);
  min-width: 0;
}

.task-modal__field-chip-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
}

.task-modal__field-chip-value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.task-modal__field-chip-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-modal__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
}

.task-modal__avatar--img {
  object-fit: cover;
}

.task-modal__avatar--initials {
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.task-modal__avatar--chip {
  width: 22px;
  height: 22px;
}

.task-modal__avatar--chip.task-modal__avatar--initials {
  font-size: 9px;
}

.task-modal__avatar--comment {
  width: 36px;
  height: 36px;
}

.task-modal__avatar--comment.task-modal__avatar--initials {
  font-size: 12px;
}

.task-modal__avatar--subtask {
  width: 20px;
  height: 20px;
}

.task-modal__avatar--subtask.task-modal__avatar--initials {
  font-size: 8px;
}

.task-modal__content-block {
  margin-bottom: 16px;
}

.task-modal__content-heading {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}

.task-modal__collapsible {
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--card);
}

.task-modal__collapsible--plain {
  margin-bottom: 10px;
  border: none;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}

.task-modal__collapsible-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: var(--muted);
  border-bottom: 1px solid var(--border);
}

.task-modal__collapsible--plain .task-modal__collapsible-head {
  padding: 6px 0;
  background: transparent;
  border-bottom: none;
}

.task-modal__collapsible-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: none;
  padding: 4px 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-strong);
  cursor: pointer;
}

.task-modal__collapsible--plain .task-modal__collapsible-toggle {
  width: 100%;
  justify-content: flex-start;
  padding: 4px 0;
  font-size: 14px;
  font-weight: 600;
  gap: 8px;
}

.task-modal__collapsible-title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.task-modal__collapsible-label {
  min-width: 0;
}

.task-modal__collapsible-count {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}

.task-modal__collapsible-chevron {
  display: inline-block;
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-inline-end: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s;
}

.task-modal__collapsible--plain .task-modal__collapsible-chevron {
  width: 8px;
  height: 8px;
}

.task-modal__collapsible--collapsed .task-modal__collapsible-chevron {
  transform: rotate(45deg);
}

.task-modal__collapsible--collapsed .task-modal__collapsible-body {
  display: none;
}

.task-modal__collapsible-body {
  padding: 12px;
}

.task-modal__collapsible--plain .task-modal__collapsible-body {
  padding: 6px 0 0;
}

.task-modal__subtask-footer {
  margin-top: 10px;
}

.task-modal__section-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--muted);
  color: var(--text-strong);
  cursor: pointer;
}

.task-modal__section-add--below {
  width: auto;
  height: auto;
  gap: 6px;
  padding: 4px 0;
  border: none;
  border-radius: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.task-modal__section-add--below svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.task-modal__collapsible--plain .task-modal__collapsible-toggle:hover,
.task-modal__collapsible--plain .task-modal__collapsible-toggle:focus-visible {
  background: transparent;
  color: var(--text-strong);
}

.task-modal__collapsible--plain .task-modal__section-add--below:hover {
  color: var(--text-muted);
  background: transparent;
}

.task-modal__collapsible--plain .task-modal__tree-expander:hover,
.task-modal__collapsible--plain .task-modal__tree-item:hover,
.task-modal__subtask-tree .task-modal__tree-expander:hover,
.task-modal__subtask-tree .task-modal__tree-item:hover {
  background: transparent;
  transform: none;
}

.task-modal__collapsible--plain .task-modal__att-download:hover {
  background: var(--card);
  border-color: var(--border);
  color: var(--text-strong);
}

.task-modal__collapsible--plain .task-modal__att-delete:hover {
  background: var(--card);
  border-color: var(--border);
  color: var(--text-muted);
}

.task-modal__section-state {
  padding: 16px 8px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
}

.task-modal__section-state--error p {
  color: var(--status-red-text);
}

.task-modal__subtask-tree {
  display: flex;
  flex-direction: column;
  gap: 2px;
  direction: rtl;
  text-align: right;
  --tree-meta-avatar-col: 22px;
  --tree-meta-due-col: 84px;
  --tree-meta-gap: 10px;
}

.task-modal__tree-node {
  display: flex;
  flex-direction: column;
  direction: rtl;
}

.task-modal__tree-row {
  display: flex;
  flex-direction: row;
  direction: rtl;
  align-items: center;
  gap: 4px;
  min-height: 34px;
  padding-inline-start: calc(var(--depth, 0) * 18px);
  border-radius: 6px;
  transition: background-color 0.15s ease;
}

.task-modal__subtask-tree .task-modal__tree-row:hover,
.task-modal__subtask-tree
  .task-modal__tree-row:has(.task-modal__tree-item:focus-visible),
.task-modal__subtask-tree
  .task-modal__tree-row:has(.task-modal__tree-expander:focus-visible) {
  background: color-mix(in srgb, var(--text-muted) 8%, transparent);
}

.task-modal__subtask-tree
  .task-modal__tree-row:has(.task-modal__tree-item--current) {
  background: color-mix(in srgb, var(--primary) 7%, transparent);
}

.task-modal__subtask-tree
  .task-modal__tree-row:has(.task-modal__tree-item--current):hover {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.task-modal__subtask-tree
  .task-modal__tree-row:hover
  .task-modal__tree-expander:not(.task-modal__tree-expander--leaf) {
  color: var(--text-strong);
}

.task-modal__tree-expander {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-weight: inherit;
  cursor: pointer;
  transition: none;
}

.task-modal__tree-expander--leaf {
  cursor: default;
  position: relative;
}

.task-modal__tree-expander--leaf::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border);
}

.task-modal__tree-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.28s ease;
}

.task-modal__tree-chevron.is-expanded {
  transform: rotate(-90deg);
}

.task-modal__tree-chevron-svg {
  display: block;
}

.task-modal__tree-item {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 4px 2px;
  border: none;
  border-radius: 0;
  background: transparent;
  text-align: right;
  direction: rtl;
  cursor: pointer;
  font: inherit;
  font-weight: inherit;
  color: inherit;
  transition: none;
}

.task-modal__tree-item--locked {
  cursor: default;
  opacity: 0.72;
  pointer-events: none;
}

.task-modal__tree-item--locked .task-modal__tree-title {
  color: var(--text-muted);
  font-weight: 500;
}

.task-modal__tree-lock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-muted);
  opacity: 0.9;
}

.task-modal__tree-lock svg {
  display: block;
}

.task-modal__tree-item-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.task-modal__tree-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-modal__tree-status-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  max-width: 110px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--muted);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-modal__tree-status-badge--pending,
.task-modal__tree-status-badge--pending-approval {
  background: var(--proc-status-pending-bg);
  border-color: var(--proc-status-pending-border);
  color: var(--text-strong);
}

.task-modal__tree-status-badge--in-progress {
  background: var(--proc-status-in-progress-bg);
  border-color: var(--proc-status-in-progress-border);
  color: var(--text-strong);
}

.task-modal__tree-status-badge--done {
  background: var(--status-green-bg);
  border-color: var(--status-green-border);
  color: var(--status-green-text);
}

.task-modal__tree-status-badge--cancelled,
.task-modal__tree-status-badge--returned {
  background: var(--status-red-bg);
  border-color: var(--status-red-border);
  color: var(--status-red);
}

.task-modal__tree-status-badge--extension {
  background: var(--proc-status-pending-bg);
  border-color: var(--proc-status-pending-border);
  color: var(--text-strong);
}

.task-modal__tree-status-badge--cancelled {
  background: var(--status-red-bg);
  border-color: var(--status-red-border);
  color: var(--status-red);
}

.task-modal__tree-branch-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--muted);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  flex-shrink: 0;
}

.task-modal__tree-item-meta {
  display: grid;
  grid-template-columns: var(--tree-meta-avatar-col) var(--tree-meta-due-col);
  column-gap: var(--tree-meta-gap);
  align-items: center;
  flex-shrink: 0;
  width: calc(
    var(--tree-meta-avatar-col) + var(--tree-meta-due-col) + var(--tree-meta-gap)
  );
  direction: rtl;
}

.task-modal__tree-assignee {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tree-meta-avatar-col);
  flex-shrink: 0;
}

.task-modal__tree-due {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  width: var(--tree-meta-due-col);
  min-width: var(--tree-meta-due-col);
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-muted);
  direction: rtl;
}

.task-modal__tree-due > span {
  flex: 1 1 auto;
  min-width: 0;
  text-align: start;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.task-modal__tree-due svg {
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  opacity: 0.7;
}

.task-modal__tree-row--root {
  padding-inline-start: 0;
}

.task-modal__tree-item--root:not(.task-modal__tree-item--current) {
  cursor: pointer;
}

.task-modal__tree-item--root .task-modal__tree-title,
.task-modal__tree-item--current .task-modal__tree-title {
  font-weight: 700;
}

.task-modal__tree-group--from-root {
  margin-top: 2px;
}

.task-modal__tree-drawer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}

.task-modal__tree-drawer--expanded {
  grid-template-rows: 1fr;
}

.task-modal__tree-drawer-inner {
  overflow: hidden;
  min-height: 0;
}

@media (prefers-reduced-motion: reduce) {
  .task-modal__tree-drawer,
  .task-modal__tree-chevron,
  .task-modal__tree-row {
    transition: none;
  }
}

.task-modal__tree-group {
  position: relative;
  margin-inline-start: 11px;
  padding-inline-start: 14px;
  border-inline-start: 1px solid var(--border);
  direction: rtl;
}

.task-modal__tree-group .task-modal__section-state,
.task-modal__tree-drawer .task-modal__section-state {
  padding: 8px 0;
}

.task-modal__activity-feed {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

.task-modal__feed-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.task-modal__feed-item--event {
  padding-inline-start: 4px;
}

.task-modal__feed-event-dot {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}

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

.task-modal__feed-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.task-modal__feed-author {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-strong);
}

.task-modal__feed-time {
  font-size: 11px;
  color: var(--text-muted);
}

.task-modal__feed-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
}

.task-modal__feed-event-text {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.task-modal__feed-event-line--detail {
  padding-inline-start: 12px;
}

.task-modal__feed-attachment-label {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  background: var(--proc-status-in-progress-bg);
  color: var(--text-muted);
}

.task-modal__feed-file-wrap {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 4px;
}

.task-modal__feed-file-card {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  text-align: right;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.task-modal__feed-file-card:hover {
  background: var(--surface-btn);
  border-color: var(--primary);
}

.task-modal__feed-file-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
}

.task-modal__feed-file-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.task-modal__feed-file-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-modal__feed-ctx {
  position: fixed;
  z-index: 12001;
  min-width: 140px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.12));
  direction: rtl;
}

.task-modal__feed-ctx[hidden] {
  display: none !important;
}

.task-modal__feed-ctx-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-strong);
  font: inherit;
  font-size: 13px;
  text-align: right;
  cursor: pointer;
}

.task-modal__feed-ctx-item[hidden] {
  display: none !important;
}

.task-modal__feed-ctx-item:hover {
  background: var(--surface-btn);
}

.task-modal__feed-ctx-item--danger {
  color: var(--status-red-text);
}

.task-modal__feed-ctx-item--danger:hover {
  background: var(--status-red-bg);
}

.task-modal__composer-attach-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.task-modal__composer-attach {
  position: relative;
}

.task-modal__composer {
  flex-shrink: 0;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--border);
  background: transparent;
}

.task-modal__composer-box {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  overflow: hidden;
}

.task-modal__composer-input {
  width: 100%;
  min-height: 44px;
  max-height: 120px;
  padding: 12px 14px 8px;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  resize: none;
}

.task-modal__composer-input:focus {
  outline: none;
}

.task-modal__composer-input::placeholder {
  color: var(--text-muted);
}

.task-modal__composer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px 8px;
}

.task-modal__composer-tools {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.task-modal__composer-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
}

.task-modal__composer-tool:hover {
  background: var(--surface-btn);
  color: var(--text);
}

.task-modal__composer-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  font: inherit;
}

.task-modal__composer-send svg,
.task-modal__composer-send-icon {
  display: block;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.task-modal__composer-send:hover {
  filter: brightness(1.05);
}

.task-modal__composer-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.task-modal__att-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text-muted);
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.task-modal__att-delete:hover {
  background: var(--status-red-bg);
  border-color: color-mix(in srgb, var(--status-red) 35%, var(--border));
  color: var(--status-red-text);
}

.actions-panel__person-avatar--img {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.actions-panel__create-parent-note {
  margin: 0;
  padding: 14px 20px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

@media (max-width: 1100px) {
  .task-modal--v2 {
    width: min(1000px, calc(100vw - 32px));
    height: min(780px, calc(100vh - 32px));
  }

  .task-modal__col--main {
    flex: 0 0 58%;
  }

  .task-modal__col--activity {
    flex: 0 0 42%;
  }
}

@media (max-width: 900px) {
  .task-modal-overlay {
    padding: 12px;
    align-items: stretch;
  }

  .task-modal--v2 {
    width: 100%;
    height: calc(100vh - 24px);
    max-width: 100%;
    max-height: calc(100vh - 24px);
    border-radius: 14px;
  }

  .task-modal__columns {
    flex-direction: column;
    overflow: auto;
  }

  .task-modal__col--main {
    flex: 0 0 auto;
    order: 1;
    max-height: none;
    border-inline-start: none;
    border-bottom: 1px solid var(--border);
    overflow: visible;
  }

  .task-modal__col--main-scroll {
    overflow: visible;
    max-height: none;
    padding-bottom: 16px;
  }

  .task-modal__col--activity {
    flex: 0 0 auto;
    order: 2;
    min-height: 0;
    overflow: visible;
    border-inline-start: none;
  }

  .task-modal__activity-feed {
    flex: none;
    overflow: visible;
    max-height: none;
    min-height: 0;
  }

  .task-modal__composer {
    position: sticky;
    bottom: 0;
    background: var(--muted);
    border-top: 1px solid var(--border);
    z-index: 1;
  }

  .task-modal__main-toolbar {
    margin: 12px 16px 0;
    padding-bottom: 10px;
  }

  .task-modal--v2 .task-modal__lifecycle-bar {
    flex-wrap: wrap;
    overflow: visible;
  }

  .task-modal__col--main-scroll > .task-modal__content-block,
  .task-modal__col--main-scroll > .task-modal__field-chips,
  .task-modal__col--main-scroll > .task-modal__collapsible,
  .task-modal__col--main-scroll > .task-modal__section-state,
  .task-modal__col--main-scroll > .task-modal__main-body {
    margin-inline: 16px;
  }

  .task-modal__col--main-scroll > .task-modal__main-body {
    margin-top: 24px;
  }

  .task-modal__banner--readonly,
  .task-modal__banner--subtasks-lock,
  .task-modal__banner--reject-reason {
    margin-inline: 16px;
  }

  .task-modal__header-row {
    padding: 10px 14px;
  }

  .task-modal__tree-row {
    gap: 4px;
    padding-inline-start: calc(var(--depth, 0) * 14px);
  }

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

  .task-modal__tree-item-meta {
    width: 100%;
    justify-content: flex-end;
  }

  .task-modal--v2 .task-modal__lifecycle-btn {
    flex: 1 1 auto;
  }

  .task-modal__subdialog {
    width: min(480px, 100%);
  }

  .task-modal__subdialog-overlay {
    padding: 12px;
    align-items: flex-end;
  }
}

@media (max-width: 640px) {
  .task-modal-overlay {
    padding: 0;
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    align-items: stretch;
  }

  .task-modal--v2,
  .task-modal {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    border-inline: none;
    border-block: none;
  }

  .task-modal__field-chip-text {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
  }

  .task-modal__header--v2 .task-modal__title {
    font-size: 16px;
  }

  .task-modal__header-row--title {
    padding: 10px 12px;
  }

  .task-modal__header-badges {
    flex-wrap: wrap;
    gap: 6px;
  }

  .task-modal__main-toolbar {
    margin: 10px 12px 0;
  }

  .task-modal__col--main-scroll > .task-modal__content-block,
  .task-modal__col--main-scroll > .task-modal__field-chips,
  .task-modal__col--main-scroll > .task-modal__collapsible,
  .task-modal__col--main-scroll > .task-modal__section-state,
  .task-modal__col--main-scroll > .task-modal__main-body {
    margin-inline: 12px;
  }

  .task-modal__col--main-scroll > .task-modal__main-body {
    margin-top: 20px;
  }

  .task-modal__banner--readonly,
  .task-modal__banner--subtasks-lock,
  .task-modal__banner--reject-reason {
    margin-inline: 12px;
    padding: 8px 12px;
    font-size: 12px;
  }

  .task-modal__field-chip {
    flex: 1 1 calc(50% - 8px);
    max-width: 100%;
  }

  .task-modal__activity-head {
    padding: 12px 12px 8px;
  }

  .task-modal__activity-feed {
    padding: 10px 12px;
  }

  .task-modal__composer {
    padding: 8px 12px 12px;
  }

  .task-modal--v2 .task-modal__lifecycle-btn {
    flex: 1 1 calc(50% - 6px);
    justify-content: center;
  }

  .task-modal__subdialog-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .task-modal__subdialog {
    width: 100%;
    max-height: min(92vh, 100%);
    border-radius: 16px 16px 0 0;
  }

  .task-modal__att-item {
    flex-wrap: wrap;
    gap: 8px;
  }

  .task-modal__feed-item-head {
    gap: 6px;
  }
}


/* =========================
   Notif bell + shared notif items
   ========================= */

.app-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-header__notif-slot {
  position: relative;
  flex-shrink: 0;
}

.app-header__page-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.notif-bell {
  position: relative;
}

.notif-bell__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  color: var(--text-strong);
  cursor: pointer;
}

.notif-bell__btn:hover {
  background: var(--muted);
}

.notif-bell__btn--pulse {
  animation: notif-bell-pulse 0.35s ease;
}

@keyframes notif-bell-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.notif-bell__badge {
  position: absolute;
  top: -4px;
  left: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.notif-bell__badge--action {
  background: var(--status-red);
}

.notif-bell__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 1200;
  width: min(400px, calc(100vw - 24px));
  max-height: min(78vh, 560px);
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}

.notif-bell__panel[hidden],
.notif-bell__badge[hidden],
.notif-bell__mark-all[hidden],
.notif-bell__empty[hidden] {
  display: none !important;
}

.notif-bell__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 12px;
}

.notif-bell__intro {
  min-width: 0;
}

.notif-bell__title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--text-strong);
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.notif-bell__subtitle {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.45;
}

.notif-bell__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: -4px 0 0;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.notif-bell__close:hover {
  background: var(--muted);
  color: var(--text-strong);
}

.notif-bell__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 18px;
  border-bottom: 1px solid var(--border);
}

.notif-bell__tabs {
  display: flex;
  align-items: stretch;
  gap: 18px;
  min-width: 0;
}

.notif-bell__tab {
  position: relative;
  margin: 0;
  padding: 10px 0 12px;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.notif-bell__tab.is-active {
  color: var(--text-strong);
  font-weight: 700;
}

.notif-bell__tab.is-active::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--primary);
}

.notif-bell__mark-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  width: auto;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--primary);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.notif-bell__mark-all:hover {
  background: none;
  opacity: 0.85;
}

.notif-bell__mark-all-icon {
  flex-shrink: 0;
}

.ws-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.ws-card__head-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--text-strong);
}

.ws-card__head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-strong);
}

.ws-card__text-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  margin-inline-start: auto;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--primary);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  width: auto;
}

.ws-card__text-btn[hidden] {
  display: none !important;
}

.ws-card__text-btn:hover {
  background: none;
  opacity: 0.85;
}

.ws-card__text-btn-icon,
.ws-card__text-btn svg {
  flex-shrink: 0;
  display: block;
}

.notif-bell__list,
.ws-notif-list,
.ws-card--tasks .ws-task-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 4px 10px 10px;
}

.notif-bell__list .notif-group,
.ws-notif-list .notif-group {
  padding: 0;
}

.notif-bell__list .notif-group__label,
.ws-notif-list .notif-group__label {
  display: none;
}

.notif-bell__list .notif-item,
.ws-notif-list .notif-item,
.ws-card--tasks .ws-task-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 40px;
  max-height: 40px;
  min-height: 40px;
  margin: 0;
  gap: 8px;
  padding: 0 8px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: right;
  cursor: pointer;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
}

.notif-bell__list .notif-item:hover,
.ws-notif-list .notif-item:hover,
.ws-card--tasks .ws-task-row:hover {
  background: var(--muted);
}

.notif-bell__list .notif-item__media,
.ws-notif-list .notif-item__media {
  width: 28px;
  height: 28px;
  border-radius: 999px;
}

.notif-bell__list .notif-item__avatar-initials,
.ws-notif-list .notif-item__avatar-initials {
  font-size: 11px;
}

.notif-bell__list .notif-item__body,
.ws-notif-list .notif-item__body {
  display: flex;
  align-items: center;
  min-width: 0;
}

.notif-bell__list .notif-item__title,
.ws-notif-list .notif-item__title {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

.notif-bell__list .notif-item__stamp,
.ws-notif-list .notif-item__stamp {
  display: none;
}

.notif-bell__list .notif-item__stamp--trail,
.ws-notif-list .notif-item__stamp--trail {
  display: block;
  margin: 0;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-muted);
  white-space: nowrap;
}

.notif-bell__list .notif-item__trail,
.ws-notif-list .notif-item__trail {
  gap: 4px;
  min-width: 0;
}

.notif-bell__list .notif-item__unread-dot,
.ws-notif-list .notif-item__unread-dot {
  display: none;
}

.notif-bell__list .notif-item__more,
.ws-notif-list .notif-item__more {
  font-size: 14px;
  line-height: 1;
}

.notif-bell__list .notif-item--read,
.ws-notif-list .notif-item--read {
  opacity: 0.72;
}

.notif-bell__list .notif-item--read:hover,
.ws-notif-list .notif-item--read:hover {
  opacity: 1;
}

.ws-card--notifs,
.ws-card--tasks,
.ws-card--eval-me {
  padding: 0;
  overflow: hidden;
  min-height: 280px;
}

.ws-card--notifs .ws-notif-list,
.ws-card--tasks .ws-task-list {
  flex: 1;
  min-height: 0;
}

.ws-card--notifs .ws-notif-list[hidden] {
  display: none !important;
  flex: 0;
}

.ws-card--notifs .ws-card__empty,
.ws-card--tasks .ws-card__empty,
.ws-card--eval-me .ws-card__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 0;
  margin: 0;
  padding: 20px 16px;
  text-align: center;
}

.ws-card--notifs .ws-card__empty[hidden] {
  display: none !important;
}

.ws-card--notifs .ws-card__empty-icon,
.ws-card--tasks .ws-card__empty-icon,
.ws-card--eval-me .ws-card__empty-icon {
  display: block;
  width: min(180px, 55%);
  height: auto;
  object-fit: contain;
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}

.ws-card--notifs .ws-card__empty-icon {
  aspect-ratio: 820 / 580;
}

.ws-card--tasks .ws-card__empty-icon,
.ws-card--eval-me .ws-card__empty-icon {
  aspect-ratio: 850 / 640;
}

.ws-card--notifs .ws-card__empty-text,
.ws-card--tasks .ws-card__empty-text,
.ws-card--eval-me .ws-card__empty-text {
  color: var(--text-muted);
  font-size: 13px;
}

.ws-card--tasks .ws-task-counts {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  margin-inline-start: auto;
  padding: 0;
}

.ws-card--tasks .ws-task-count {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
}

.ws-card--tasks .ws-task-count:hover {
  background: var(--muted);
  color: var(--text-strong);
}

.ws-card--tasks .ws-task-count strong {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-strong);
  line-height: 1;
}

.ws-card--tasks .ws-task-count span {
  font-size: 11px;
  font-weight: 600;
  color: inherit;
  line-height: 1;
}

.ws-card--tasks .ws-task-count--overdue,
.ws-card--tasks .ws-task-count--overdue strong {
  color: var(--status-red);
}

.ws-card--tasks .ws-task-count--overdue:hover {
  background: var(--status-red-bg);
}

.ws-card--tasks .ws-task-row__title {
  flex: 1;
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-strong);
}

.ws-card--tasks .ws-task-row .actions-panel__badge {
  flex-shrink: 0;
  gap: 4px;
  max-width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-card--tasks .ws-task-row__due {
  flex-shrink: 0;
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-muted);
  white-space: nowrap;
}

.ws-card--tasks .ws-task-row__due--overdue {
  color: var(--status-red);
  font-weight: 700;
}

.notif-bell__empty,
.ws-card__empty {
  margin: 0;
  padding: 28px 18px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.notif-bell__footer {
  padding: 10px 18px 14px;
  border-top: 1px solid var(--border);
}

.notif-bell__footer-link {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.notif-bell__footer-link:hover {
  color: var(--primary);
}

.ws-card--notifs .ws-card__footer,
.ws-card--tasks .ws-card__footer,
.ws-card--eval-me .ws-card__footer {
  padding: 10px 14px 12px;
  border-top: 1px solid var(--border);
}

.ws-card--notifs .ws-card__footer-link,
.ws-card--tasks .ws-card__footer-link,
.ws-card--eval-me .ws-card__footer-link {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.ws-card--notifs .ws-card__footer-link:hover,
.ws-card--tasks .ws-card__footer-link:hover,
.ws-card--eval-me .ws-card__footer-link:hover {
  color: var(--primary);
}

.notif-group {
  padding: 4px 0 2px;
}

.notif-group__label {
  margin: 0;
  padding: 12px 8px 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.3;
}

.notif-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 12px 8px;
  border: none;
  border-radius: 12px;
  background: transparent;
  text-align: right;
  cursor: pointer;
  font: inherit;
  color: inherit;
  box-sizing: border-box;
}

.notif-item:hover {
  background: var(--muted);
}

.notif-item--unread {
  background: transparent;
}

.notif-item--action .notif-item__title {
  color: var(--text-strong);
}

.notif-item__media {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--muted);
  color: var(--text-strong);
}

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

.notif-item__avatar-initials {
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.notif-item__body {
  flex: 1;
  min-width: 0;
}

.notif-item__title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-item__stamp {
  margin: 4px 0 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-item__trail {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 22px;
  align-self: stretch;
}

.notif-item__unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--primary);
}

.notif-item__unread-dot--empty {
  background: transparent;
}

.notif-item__menu {
  position: relative;
  opacity: 0.55;
}

.notif-item:hover .notif-item__menu,
.notif-item:focus-within .notif-item__menu {
  opacity: 1;
}

.notif-item__more {
  width: auto;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 0 2px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
}

.notif-item__more:hover {
  background: transparent;
  color: var(--text-strong);
}

.notif-item__menu-panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
  min-width: 160px;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-panel);
}

.notif-item__menu-btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-strong);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  text-align: right;
  cursor: pointer;
}

.notif-item__menu-btn:hover {
  background: var(--muted);
}

.notif-item--compact {
  padding-top: 10px;
  padding-bottom: 10px;
}

.notif-item--compact .notif-item__media {
  width: 38px;
  height: 38px;
  border-radius: 10px;
}

.notif-bell__list .notif-item--compact .notif-item__media,
.ws-notif-list .notif-item--compact .notif-item__media {
  width: 28px;
  height: 28px;
  border-radius: 999px;
}

.notif-item--read {
  opacity: 0.72;
}

.notif-item--read:hover {
  opacity: 1;
}

.notif-item__check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  cursor: pointer;
}

.notif-item__check input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

.notif-group--sticky .notif-group__label {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--card);
}

/* =========================
   Notifications page
   ========================= */

body.page-notifications .history-page-wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.notif-panel .actions-panel__filters--phase1 {
  padding-bottom: 0;
}

.notif-panel .actions-panel__filters--phase1 .notif-panel__table-head-wrap {
  margin-top: 12px;
}

.notif-panel .actions-panel__filters .notif-table__head {
  margin: 0;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  background: var(--muted);
}

.notif-panel__list-body {
  padding: 0;
  display: block;
}

.notif-table {
  width: 100%;
  min-width: 0;
}

.notif-table__head,
.notif-table__row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 168px 76px;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  box-sizing: border-box;
}

.notif-table__head {
  height: 40px;
  border-bottom: 1px solid var(--border);
  background: var(--muted);
}

.notif-table__th {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.3;
}

.notif-table__th--stamp {
  white-space: nowrap;
}

.notif-table__th--actions {
  text-align: center;
}

.notif-table__row {
  height: 40px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  cursor: pointer;
  transition: background 0.15s ease;
}

.notif-table__row:hover {
  background: var(--row-hover);
}

.notif-table__row--read {
  opacity: 0.72;
}

.notif-table__row--read:hover {
  opacity: 1;
}

.notif-table__row--unread .notif-table__title {
  font-weight: 700;
  color: var(--text-strong);
}

.notif-table__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  cursor: pointer;
}

.notif-table__check input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

.notif-table__check--empty {
  visibility: hidden;
}

.notif-table__cell {
  min-width: 0;
  overflow: hidden;
}

.notif-table__cell--title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.notif-table__avatar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--muted);
  color: var(--text-strong);
}

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

.notif-table__avatar-initials {
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.notif-table__unread-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--primary);
}

.notif-table__unread-dot--empty {
  background: transparent;
}

.notif-table__title {
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-table__cell--stamp {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-table__cell--actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.notif-group--table {
  padding: 0;
}

.notif-group--table .notif-group__label {
  margin: 0;
  padding: 10px 14px 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--card);
  border-bottom: none;
}

.notif-group--table.notif-group--sticky .notif-group__label {
  position: sticky;
  top: 0;
  z-index: 2;
}

.notif-panel__skeleton {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.notif-panel__skeleton-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 168px 76px;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
  box-sizing: border-box;
}

.notif-panel__skeleton-block {
  display: block;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    var(--muted) 0%,
    var(--border) 50%,
    var(--muted) 100%
  );
  background-size: 200% 100%;
  animation: notif-skel 1.2s ease-in-out infinite;
}

.notif-panel__skeleton-block--check {
  width: 15px;
  height: 15px;
  border-radius: 4px;
}

.notif-panel__skeleton-block--title {
  height: 12px;
  width: 70%;
}

.notif-panel__skeleton-block--stamp {
  height: 11px;
  width: 80%;
}

.notif-panel__skeleton-block--actions {
  height: 28px;
  width: 60px;
  margin-inline: auto;
}

@keyframes notif-skel {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@media (max-width: 720px) {
  .notif-table__head,
  .notif-table__row,
  .notif-panel__skeleton-row {
    grid-template-columns: 24px minmax(0, 1fr) 64px;
  }

  .notif-table__th--stamp,
  .notif-table__cell--stamp,
  .notif-panel__skeleton-block--stamp {
    display: none;
  }
}

/* =========================
   Workspace (میز کار)
   ========================= */

body.page-home.has-app-sidebar .history-page-wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 17px 17px 32px;
  padding-left: calc(var(--ws-rail-width, 300px) + 16px);
  box-sizing: border-box;
}

body.page-home.has-app-sidebar > .card,
body.page-home.has-app-topbar > .card {
  display: none;
}

.ws-root {
  width: 100%;
}

.ws-layout {
  display: block;
  width: 100%;
}

/* ثابت روی لبهٔ چپِ ویوپورت — بدون اسکرول داخلی */
.ws-sidebar {
  --ws-rail-pad: clamp(6px, 1.2vh, 12px);
  --ws-rail-gap: clamp(4px, 1vh, 12px);
  --ws-rail-clock: clamp(26px, 4.6vh, 44px);
  --ws-rail-date: clamp(30px, 5.5vh, 52px);
  --ws-rail-temp: clamp(18px, 2.8vh, 28px);
  --ws-rail-cell: clamp(22px, 3.2vh, 34px);

  position: fixed;
  top: var(--app-header-height);
  left: 0;
  bottom: 0;
  z-index: 140;
  width: var(--ws-rail-width, 300px);
  height: calc(100dvh - var(--app-header-height));
  max-height: calc(100dvh - var(--app-header-height));
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  overflow: hidden;
  padding: var(--ws-rail-pad);
  background: var(--card);
  border: none;
  border-right: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  box-sizing: border-box;
}

.ws-sidebar .ws-card {
  flex: 0 1 auto;
  min-height: 0;
  box-shadow: none;
  border: none;
  border-radius: 0;
  padding: var(--ws-rail-pad);
  background: transparent;
  overflow: hidden;
}

.ws-sidebar .ws-card + .ws-card {
  border-top: 1px solid var(--border);
  margin-top: 0;
  padding-top: var(--ws-rail-gap);
}

.ws-sidebar .ws-card--clock {
  flex: 0 1 auto;
}

.ws-sidebar .ws-card--date {
  flex: 0 1 auto;
  align-items: center;
  text-align: center;
}

.ws-sidebar .ws-card--calendar {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ws-sidebar .ws-card__eyebrow {
  margin: 0 0 clamp(2px, 0.6vh, 8px);
  font-size: clamp(10px, 1.3vh, 12px);
}

.ws-sidebar .ws-clock {
  margin-bottom: clamp(6px, 1.2vh, 14px);
  padding-bottom: clamp(6px, 1.2vh, 14px);
  gap: 4px;
  border-bottom: 1px solid var(--border);
  justify-content: center;
  width: 100%;
}

.ws-sidebar .ws-clock__hm {
  font-size: var(--ws-rail-clock);
  line-height: 1;
}

.ws-sidebar .ws-weather {
  margin-top: clamp(6px, 1.2vh, 14px);
}

.ws-sidebar .ws-weather__now {
  margin-bottom: clamp(8px, 1.4vh, 16px);
  gap: clamp(6px, 1vh, 12px);
}

.ws-sidebar .ws-weather__icon--hero {
  width: clamp(48px, 7.5vh, 68px);
}

.ws-sidebar .ws-weather__temp {
  font-size: clamp(24px, 3.8vh, 34px);
}

.ws-sidebar .ws-weather__label {
  font-size: clamp(12px, 1.7vh, 15px);
}

.ws-sidebar .ws-weather__place {
  font-size: clamp(10px, 1.3vh, 12px);
}

.ws-sidebar .ws-weather__daily {
  gap: 0;
}

.ws-sidebar .ws-weather__day {
  gap: clamp(3px, 0.6vh, 8px);
}

.ws-sidebar .ws-weather__wd,
.ws-sidebar .ws-weather__max,
.ws-sidebar .ws-weather__min {
  font-size: clamp(9px, 1.25vh, 11px);
}

.ws-sidebar .ws-weather__icon--day {
  width: clamp(28px, 4vh, 36px);
}

.ws-sidebar .ws-date__day {
  font-size: var(--ws-rail-date);
}

.ws-sidebar .ws-date__weekday {
  margin-top: clamp(2px, 0.5vh, 6px);
  font-size: clamp(13px, 1.9vh, 17px);
}

.ws-sidebar .ws-date__month {
  font-size: clamp(11px, 1.5vh, 14px);
}

.ws-sidebar .ws-date__sub {
  margin: clamp(6px, 1.2vh, 12px) 0 0;
  font-size: clamp(10px, 1.3vh, 12px);
}

.ws-sidebar .ws-cal__head {
  flex-shrink: 0;
}

.ws-sidebar .ws-cal__title {
  font-size: clamp(12px, 1.7vh, 15px);
  text-align: center;
  width: 100%;
}

.ws-sidebar .ws-cal__nav {
  width: 28px;
  height: 28px;
  font-size: 16px;
}

.ws-sidebar .ws-cal__weekdays {
  flex-shrink: 0;
  margin: clamp(8px, 1.6vh, 20px) 0 clamp(2px, 0.4vh, 6px);
  gap: 2px;
}

.ws-sidebar .ws-cal__wd {
  font-size: clamp(9px, 1.2vh, 11px);
}

.ws-sidebar .ws-cal__grid {
  flex: 1 1 0;
  min-height: 0;
  gap: 2px;
  grid-auto-rows: minmax(0, 1fr);
  align-content: stretch;
}

.ws-sidebar .ws-cal__cell,
.ws-sidebar .ws-cal__cell--muted {
  min-height: 0;
  height: 100%;
  padding: 0;
  border-radius: 8px;
}

.ws-sidebar .ws-cal__num {
  font-size: clamp(10px, 1.35vh, 12px);
  line-height: 1;
}

.ws-sidebar .ws-cal__dot {
  bottom: 2px;
  width: 4px;
  height: 4px;
}

/* ارتفاع‌های کوتاه: پیش‌بینی هوا جمع می‌شود تا اسکرول نیاید */
@media (max-height: 780px) {
  .ws-sidebar .ws-weather__now-meta {
    max-width: 42%;
  }
}

@media (max-height: 700px) {
  .ws-sidebar .ws-card__eyebrow {
    display: none;
  }

  .ws-sidebar .ws-weather__daily {
    display: none;
  }
}

@media (max-height: 560px) {
  .ws-sidebar .ws-weather {
    display: none;
  }

  .ws-sidebar .ws-date__sub {
    display: none;
  }
}

.ws-main {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
  min-width: 0;
  width: 100%;
  max-width: none;
}

.ws-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  box-sizing: border-box;
}

.ws-card--skeleton {
 min-height: 180px;
 background: linear-gradient(90deg, var(--muted), var(--card), var(--muted));
 background-size: 200% 100%;
 animation: ws-skel 1.2s ease infinite;
}

@keyframes ws-skel {
 0% { background-position: 100% 0; }
 100% { background-position: -100% 0; }
}

.ws-card__eyebrow {
 margin: 0 0 8px;
 font-size: 12px;
 font-weight: 600;
 color: var(--text-muted);
}

.ws-card__error,
.ws-error {
 color: var(--status-red-text);
 font-size: 13px;
}

.ws-card__count {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 22px;
 height: 22px;
 padding: 0 6px;
 border-radius: 999px;
 background: var(--primary);
 color: #fff;
 font-size: 11px;
 font-weight: 700;
}

.ws-card__count[hidden] {
  display: none !important;
}

.ws-date__day {
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 800;
  line-height: 1;
  color: var(--text-strong);
  text-align: center;
  margin-top: 6px;
}

.ws-date__weekday {
  margin-top: 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-strong);
  text-align: center;
}

.ws-card--date.ws-date--friday .ws-date__day,
.ws-card--date.ws-date--friday .ws-date__weekday {
  color: var(--status-red);
}

.ws-date__month {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
}

.ws-date__sub {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

.ws-clock {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.ws-clock__hm {
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 800;
  color: var(--text-strong);
  letter-spacing: 0.02em;
}

.ws-weather {
  margin-top: 10px;
  color: var(--text-strong);
}

.ws-weather__now {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  direction: ltr;
}

.ws-weather__now-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

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

.weather-icon {
  width: 100%;
  height: auto;
  aspect-ratio: 56 / 48;
  object-fit: contain;
  object-position: center;
  display: block;
}

.ws-weather__icon--hero {
  width: clamp(56px, 9vh, 72px);
  transform: translateY(5px);
}

.ws-weather__temp {
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

.ws-weather__now-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  text-align: right;
  min-width: 0;
}

.ws-weather__label {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-strong);
  direction: rtl;
}

.ws-weather__place {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-muted);
  direction: rtl;
}

.ws-weather__daily {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
}

.ws-weather__day {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  color: var(--text-muted);
}

.ws-weather__wd {
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  color: var(--text-muted);
  white-space: nowrap;
}

.ws-weather__icon--day {
  width: 36px;
}

.ws-weather__temps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1;
}

.ws-weather__max {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-strong);
  white-space: nowrap;
}

.ws-weather__min {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

.ws-cal__head {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 4px;
  direction: ltr;
  text-align: center;
}

.ws-cal__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.ws-cal__nav:hover {
  background: var(--muted);
  color: var(--text-strong);
}

.ws-cal__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-strong);
  text-align: center;
  direction: rtl;
}

.ws-cal__weekdays,
.ws-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.ws-cal__weekdays {
  margin: 24px 0 6px;
}

.ws-cal__wd {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

.ws-cal__wd--friday {
  color: var(--primary);
}

.ws-cal__cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 34px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-strong);
  font: inherit;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.15s ease;
}

.ws-cal__cell:hover {
  background: var(--muted);
}

.ws-cal__cell--friday,
.ws-cal__cell--friday .ws-cal__num {
  color: var(--primary);
}

.ws-cal__cell--muted {
  color: var(--text-muted);
  cursor: default;
  pointer-events: none;
}

.ws-cal__cell--muted:hover {
  background: transparent;
}

.ws-cal__cell--muted .ws-cal__num {
  color: var(--text-muted);
  font-weight: 500;
  opacity: 0.42;
}

.ws-cal__cell--muted.ws-cal__cell--friday,
.ws-cal__cell--muted.ws-cal__cell--friday .ws-cal__num {
  color: var(--primary);
  opacity: 0.35;
}

.ws-cal__cell--today {
  box-shadow: inset 0 0 0 1px var(--primary);
}

.ws-cal__num {
  display: block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

.ws-cal__dot {
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
  transform: translateX(-50%);
  pointer-events: none;
}

.ws-cal__dot--overdue { background: var(--status-red); }
.ws-cal__dot--urgent { background: #f59e0b; }
.ws-cal__dot--normal { background: var(--primary); }

.ws-task-counts {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 8px;
 margin-bottom: 12px;
}

.ws-task-count {
 display: flex;
 flex-direction: column;
 gap: 2px;
 padding: 10px;
 border: 1px solid var(--border);
 border-radius: 12px;
 background: var(--muted);
 color: inherit;
 font: inherit;
 text-align: right;
 cursor: pointer;
}

.ws-task-count strong {
 font-size: 18px;
 color: var(--text-strong);
}

.ws-task-count span {
 font-size: 11px;
 color: var(--text-muted);
}

.ws-task-list,
.ws-notif-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.ws-task-row {
 display: flex;
 flex-direction: column;
 gap: 4px;
 width: 100%;
 padding: 10px 12px;
 border: 1px solid var(--border);
 border-radius: 12px;
 background: var(--card);
 color: inherit;
 font: inherit;
 text-align: right;
 cursor: pointer;
}

.ws-task-row:hover {
 background: var(--muted);
}

.ws-task-row__title {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 font-size: 13px;
 font-weight: 700;
 color: var(--text-strong);
}

.ws-task-row__overdue-dot {
 width: 7px;
 height: 7px;
 border-radius: 50%;
 background: var(--status-red);
}

.ws-task-row__meta {
 display: flex;
 justify-content: space-between;
 gap: 8px;
 font-size: 11px;
 color: var(--text-muted);
}

@media (max-width: 1024px) {
  body.page-home.has-app-sidebar .history-page-wrap {
    padding-left: 16px;
  }

  .ws-sidebar {
    position: static;
    width: auto;
    height: auto;
    max-height: none;
    bottom: auto;
    z-index: auto;
    margin-bottom: 16px;
    overflow: visible;
    border-right: none;
    border: 1px solid var(--border);
    border-radius: 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding: 12px;
  }

  .ws-sidebar .ws-card {
    padding: 12px;
    overflow: visible;
  }

  .ws-sidebar .ws-card--clock {
    grid-column: 1;
    flex: none;
  }

  .ws-sidebar .ws-card--date {
    grid-column: 2;
    flex: none;
    border-top: none;
    margin-top: 0;
    padding-top: 12px;
    border-right: 1px solid var(--border);
    margin-right: 0;
    padding-right: 16px;
  }

  .ws-sidebar .ws-card--calendar {
    grid-column: 1 / -1;
    flex: none;
    display: flex;
  }

  .ws-sidebar .ws-cal__grid {
    flex: none;
    grid-auto-rows: auto;
  }

  .ws-sidebar .ws-cal__cell,
  .ws-sidebar .ws-cal__cell--muted {
    min-height: 34px;
    height: auto;
  }

  .ws-sidebar .ws-card__eyebrow,
  .ws-sidebar .ws-weather,
  .ws-sidebar .ws-weather__daily,
  .ws-sidebar .ws-date__sub {
    display: revert;
  }

  .ws-sidebar .ws-weather__daily {
    display: flex;
  }

  .ws-main {
    grid-template-columns: 1fr;
    max-width: none;
  }
}

@media (max-width: 640px) {
  .ws-sidebar {
    display: flex;
    flex-direction: column;
  }

  .ws-sidebar .ws-card--date {
    border-right: none;
    padding-right: 12px;
    border-top: 1px solid var(--border);
    margin-top: 4px;
    padding-top: 16px;
  }

  .ws-sidebar .ws-card--calendar {
    grid-column: auto;
  }

  .notif-bell__panel {
    position: fixed;
    top: calc(var(--app-header-height) + 8px);
    left: 12px;
    right: 12px;
    width: auto;
  }
}