/* ============================================================
   CALENDAR — DRAG AND DROP (Task 7)
   Визуальная обратная связь при перетаскивании карточек задач.
   ============================================================ */

.erpds-calendar-draggable {
  cursor: grab;
}

.erpds-calendar-dragging {
  opacity: .5;
  cursor: grabbing;
}

.erpds-dnd-over {
  outline: 2px solid var(--erpds-primary, #1976d2);
  background: color-mix(in srgb, var(--erpds-primary, #1976d2) 10%, transparent) !important;
}

.erpds-dnd-deny {
  outline: 2px solid var(--erpds-danger, #d32f2f);
  background: color-mix(in srgb, var(--erpds-danger, #d32f2f) 10%, transparent) !important;
}

/* ============================================================
   TOP BAR — REDESIGN (desktop + mobile)
   Источник: erp_desine/project/primitives.jsx — Header.
   Только аддитивные визуальные override'ы; разметка/JS не трогаем.
   Фон/брендинг сохранены — освежаем только input, кнопки, типографику.
   ============================================================ */

/* --- Контейнер --- */
#top_topline_all {
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06), 0 4px 16px -12px rgba(15, 23, 42, 0.20);
}
#top_userbar_all {
  font-family: var(--erpds-sans);
  letter-spacing: -0.005em;
}

/* --- Поиск: pill + чище состояние focus --- */
@media (min-width: 901px) {
  #top_search {
    height: 32px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.10);
    /* overflow: visible — не клипаем попап #top_find_result, дочерние элементы (input+button) сами round'ятся */
    overflow: visible;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    width: 280px;
  }
  #top_search:hover {
    background: rgba(255, 255, 255, 0.20);
  }
  #top_search:focus-within {
    background: var(--erpds-surface);
    border-color: var(--erpds-accent);
    box-shadow: 0 0 0 3px rgba(59, 91, 219, 0.18);
  }
  #top_search #top_field {
    height: 30px;
    line-height: 30px;
    width: calc(100% - 36px);
    background: transparent;
    color: var(--erpds-text);
    font-size: 12.5px;
    padding: 0 10px 0 14px;
    top: 0;
    border-radius: 999px;
  }
  #top_search:not(:focus-within) #top_field {
    color: rgba(255, 255, 255, 0.95);
  }
  #top_search:not(:focus-within) #top_field::placeholder {
    color: rgba(255, 255, 255, 0.70);
  }
  #top_search #top_button {
    width: 40px;
    height: 40px;
    top: 0;
    background-color: transparent !important;
  }
}

/* --- Top links: чистый radius, hover ровный --- */
#top_links li a {
  border-radius: 8px;
  transition: background-color 0.12s ease;
}
#top_links li a:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* --- Кнопки-чипы (контекстные переключатели) --- */
#top_links li a.top-link-chip {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff !important;
  font-weight: 500;
  font-size: 12px;
  height: 32px;
  box-sizing: border-box;
  margin-right: 4px;
}

#top_links li a.top-link-chip:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.20);
}

#top_links li a.top-link-chip .us-icon {
  line-height: 1;
  transition: opacity 0.15s ease;
}

#top_links li a.top-link-chip:hover .us-icon {
  opacity: 1 !important;
}

/* --- Селектор региона / «Все доступные объекты» (#top_region) --- */
#top_topline_current #top_links > li:has(#top_region),
#top_topline_plan    #top_links > li:has(#top_region),
#top_topline_all     #top_links > li:has(#top_region) {
  position: relative;
  border-left: none !important;
  text-align: left !important;
}

#top_topline_current #top_links > li:has(#top_region) > div:first-child,
#top_topline_plan    #top_links > li:has(#top_region) > div:first-child,
#top_topline_all     #top_links > li:has(#top_region) > div:first-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  max-width: min(240px, 42vw);
  padding: 0 10px 0 8px;
  border-radius: 8px;
  border: 1px solid var(--erpds-border, #e5e7eb);
  background: var(--erpds-surface-2, #f8fafc);
  box-sizing: border-box;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

#top_topline_current #top_links > li:has(#top_region):hover > div:first-child,
#top_topline_plan    #top_links > li:has(#top_region):hover > div:first-child,
#top_topline_all     #top_links > li:has(#top_region):hover > div:first-child,
#top_topline_current #top_links > li:has(#top_region) > div:first-child:has(#top_region:hover),
#top_topline_plan    #top_links > li:has(#top_region) > div:first-child:has(#top_region:hover),
#top_topline_all     #top_links > li:has(#top_region) > div:first-child:has(#top_region:hover) {
  background: var(--erpds-surface, #ffffff);
  border-color: var(--erpds-border-strong, #cbd5e1);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

#top_topline_current #top_links > li:has(#top_region) .fa-map-marker,
#top_topline_plan    #top_links > li:has(#top_region) .fa-map-marker,
#top_topline_all     #top_links > li:has(#top_region) .fa-map-marker {
  color: var(--erpds-text-muted, #64748b) !important;
  font-size: 14px !important;
  line-height: 1;
  flex-shrink: 0;
  margin: 0 !important;
  text-shadow: none !important;
}

#top_topline_current #top_links > li:has(#top_region):hover .fa-map-marker,
#top_topline_plan    #top_links > li:has(#top_region):hover .fa-map-marker,
#top_topline_all     #top_links > li:has(#top_region):hover .fa-map-marker {
  color: var(--erpds-text, #0f172a) !important;
}

#top_topline_current #top_region,
#top_topline_plan    #top_region,
#top_topline_all     #top_region {
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
  min-width: 0;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--erpds-text, #334155) !important;
  font: 500 13px/1.2 var(--erpds-sans, ui-sans-serif, system-ui, sans-serif) !important;
  text-decoration: none !important;
  cursor: pointer;
}

#top_topline_current #top_region #top_region_text,
#top_topline_plan    #top_region #top_region_text,
#top_topline_all     #top_region #top_region_text {
  max-width: 168px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#top_topline_current #top_region::after,
#top_topline_plan    #top_region::after,
#top_topline_all     #top_region::after {
  color: var(--erpds-text-muted, #64748b) !important;
  flex-shrink: 0;
}

#top_topline_current #top_region:focus-visible,
#top_topline_plan    #top_region:focus-visible,
#top_topline_all     #top_region:focus-visible {
  outline: 2px solid var(--erpds-focus, #1871a5);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--erpds-focus, #1871a5) 16%, transparent);
  border-radius: 6px;
}

#top_topline_current #region_select_id,
#top_topline_plan    #region_select_id,
#top_topline_all     #region_select_id {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  left: auto !important;
  padding-left: 0 !important;
  margin: 0 !important;
  /* Перекрываем style.css min-width:280px — ширина по самому длинному пункту */
  min-width: 100% !important;
  width: max-content !important;
  max-width: min(420px, calc(100vw - 32px)) !important;
  text-align: left !important;
}

/* Выпадающий список: сброс legacy #top_links li { text-align:center; color:#fff } */
#top_topline_current #region_select,
#top_topline_plan    #region_select,
#top_topline_all     #region_select {
  text-align: left !important;
  width: max-content !important;
  min-width: 100% !important;
  max-width: inherit;
  box-sizing: border-box;
}

#top_topline_current #region_select ul,
#top_topline_plan    #region_select ul,
#top_topline_all     #region_select ul {
  display: block !important;
  width: max-content;
  min-width: 100%;
}

/* legacy #top_links li { display:inline-block } цепляет ВСЕ li внутри #top_links */
#top_topline_current #region_select li,
#top_topline_plan    #region_select li,
#top_topline_all     #region_select li {
  display: block !important;
  width: auto;
}

#top_topline_current #region_select li a,
#top_topline_plan    #region_select li a,
#top_topline_all     #region_select li a,
#top_topline_current #region_select li a:link,
#top_topline_plan    #region_select li a:link,
#top_topline_all     #region_select li a:link,
#top_topline_current #region_select li a:visited,
#top_topline_plan    #region_select li a:visited,
#top_topline_all     #region_select li a:visited {
  text-align: left !important;
  color: var(--erpds-text, #0f172a) !important;
  white-space: nowrap;
}

#top_topline_current #region_select li a:hover,
#top_topline_plan    #region_select li a:hover,
#top_topline_all     #region_select li a:hover,
#top_topline_current #region_select li a:focus-visible,
#top_topline_plan    #region_select li a:focus-visible,
#top_topline_all     #region_select li a:focus-visible {
  color: var(--erpds-accent-text, #2d4ac7) !important;
}

/* «Отмена» — отдельная строка внизу, без пунктира */
#top_topline_current #region_select li:last-child a.link_dashed,
#top_topline_plan    #region_select li:last-child a.link_dashed,
#top_topline_all     #region_select li:last-child a.link_dashed {
  margin-top: 4px;
  padding-top: 10px !important;
  border-top: 1px solid var(--erpds-border, #e5e7eb);
  color: var(--erpds-text-muted, #64748b) !important;
  font-size: 12px;
  font-weight: 500;
}

#top_topline_current #region_select li:last-child a.link_dashed > span,
#top_topline_plan    #region_select li:last-child a.link_dashed > span,
#top_topline_all     #region_select li:last-child a.link_dashed > span {
  border-bottom: none !important;
  text-decoration: none !important;
}

#top_topline_current #region_select::after,
#top_topline_plan    #region_select::after,
#top_topline_all     #region_select::after {
  content: "↑↓ · Enter · Esc";
  text-align: center;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* --- Мобильный top bar: уже фиксирован в style.css; только тонкости --- */
@media (max-width: 900px) {
  #top_topline_all {
    background: linear-gradient(180deg, var(--main-color), var(--erpds-accent-hover, #2D4AC7)) !important;
  }
  #top_search {
    height: 36px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.12);
  }
  #top_search:focus-within {
    background: var(--erpds-surface);
    border-color: var(--erpds-accent);
  }
  #top_search #top_field {
    background: transparent;
    color: rgba(255, 255, 255, 0.95);
    font-size: 14px;
  }
  #top_search:focus-within #top_field {
    color: var(--erpds-text);
  }
  #top_search #top_field::placeholder {
    color: rgba(255, 255, 255, 0.75);
  }
  #top_search:focus-within #top_field::placeholder {
    color: var(--erpds-text-faint);
  }
  /* Скрыть: Биллинг, Регион, help, Выход — остаётся луна + аватар */
  /* #top_links li (0,1,0,1) + !important бьёт #linkWikiHelpId (0,1,0,0) + !important → нужна специфичность (0,2,0,1) */
  #top_links li:has(> #linkCustomPage40Id),
  #top_links li:has(#top_region),
  #top_links li#linkWikiHelpId,
  #top_links li:has(> #linkLogoutMenuId) {
    display: none !important;
  }

  /* Контраст: иконки на тёмном градиенте хедера должны быть белыми.
     Базовые правила отдают им slate-цвет (~1.4:1 на бирюзе #1871A5) → WCAG fail.
     Форсим белый для ☰ ← ↺ и луны/солнца. */
  #top_topline_all #mobile_menu_open_btn,
  #top_topline_all #mobile_back_btn,
  #top_topline_all #mobile_refresh_btn,
  #top_topline_all #mobile_menu_open_btn > span,
  #top_topline_all #mobile_back_btn > span,
  #top_topline_all #mobile_refresh_btn > span,
  #top_topline_all #top_links .fa-moon-o,
  #top_topline_all #top_links .fa-sun-o {
    color: var(--erpds-on-accent, #fff) !important;
  }
}

/* Keyboard a11y: видимый focus-ring для topbar-кнопок */
#mobile_menu_open_btn:focus-visible,
#mobile_back_btn:focus-visible,
#mobile_refresh_btn:focus-visible,
#top_search #top_button:focus-visible,
#top_links li a:focus-visible {
  outline: 2px solid var(--erpds-on-accent, #fff);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Mobile: avatar + луна/солнце — 48×48 round кнопка как ☰ ← ↺ */
@media (max-width: 900px) {
  /* <li> базово flex:0 0 40px → режет круг в эллипс + overflow клипает.
     Расширяем li аватара/луны до 48px, чтобы круг не зажимался */
  /* #top_links computed 36px+overflow:hidden → клипает 48px-кружок сверху.
     Убираем clip, даём <li> высоту равную <a> */
  #top_topline_all #top_links {
    overflow: visible !important;
  }
  #top_topline_all #top_links li:has(#linkEmployeePersonalId),
  #top_topline_all #top_links li:has(.fa-moon-o),
  #top_topline_all #top_links li:has(.fa-sun-o) {
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
  }

  /* Avatar — round hit-area (3 ID для перебивания #top_links li a radius:8px) */
  #top_topline_all #top_links #linkEmployeePersonalId {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    gap: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.18s ease !important;
  }
  #top_topline_all #top_links #linkEmployeePersonalId:hover  { background: rgba(255,255,255,0.15) !important; }
  #top_topline_all #top_links #linkEmployeePersonalId:active { background: rgba(255,255,255,0.28) !important; }

  /* Avatar icon — белый 20px (= nav buttons) */
  #top_topline_all #top_links #linkEmployeePersonalId .us-icon.fa-user {
    font-size: 20px !important;
    color: var(--erpds-on-accent, #fff) !important;
  }
  /* Скрыть текст имени рядом с аватаром */
  #top_topline_all #top_user_text { display: none !important; }

  /* Луна/солнце — иконка 20px (= nav buttons) */
  #top_topline_all #top_links .fa-moon-o,
  #top_topline_all #top_links .fa-sun-o {
    font-size: 20px !important;
  }
  /* Луна/солнце — round hit-area hover */
  #top_topline_all #top_links li:has(.fa-moon-o) a,
  #top_topline_all #top_links li:has(.fa-sun-o) a {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.18s ease !important;
  }
  #top_topline_all #top_links li:has(.fa-moon-o) a:hover,
  #top_topline_all #top_links li:has(.fa-sun-o) a:hover  { background: rgba(255,255,255,0.15) !important; }
  #top_topline_all #top_links li:has(.fa-moon-o) a:active,
  #top_topline_all #top_links li:has(.fa-sun-o) a:active { background: rgba(255,255,255,0.28) !important; }

  /* На страницах с кнопкой «Назад» в 384px не помещаются back, refresh,
     brand, search, theme, profile и bell. Оставляем bell видимым, а
     secondary links доступны через нижнее «Меню». */
  #top_topline_current:not(.mobile-nav-no-back) #top_links,
  #top_topline_plan:not(.mobile-nav-no-back) #top_links,
  #top_topline_all:not(.mobile-nav-no-back) #top_links {
    display: none !important;
  }

  #top_topline_current:not(.mobile-nav-no-back) #notifyFeedBell,
  #top_topline_plan:not(.mobile-nav-no-back) #notifyFeedBell,
  #top_topline_all:not(.mobile-nav-no-back) #notifyFeedBell {
    flex: 0 0 40px !important;
    margin-left: 6px !important;
    margin-right: 0 !important;
  }
}

/* === V-015: Touch hit-area 44px на pointer:coarse для topbar === */
@media (pointer: coarse) {
  #top_search,
  #top_search #top_field {
    height: 44px !important;
  }
  #top_search #top_field {
    line-height: 44px !important;
  }
  #mobile_menu_open_btn,
  #mobile_back_btn,
  #mobile_refresh_btn,
  #top_search #top_button {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ============================================================
   Header polish — final visual layer over legacy + style.css.
   Цель: единая рабочая панель без конкурирующих высот/цветов.
   ============================================================ */
:root {
  --erpds-motion-fast: 140ms;
  --erpds-motion-medium: 420ms;
  --erpds-motion-ease: cubic-bezier(0.2, 0, 0, 1);
}

#top_topline_current,
#top_topline_plan,
#top_topline_all {
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom-color: rgba(203, 213, 225, 0.78) !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 10px 26px -24px rgba(15, 23, 42, 0.35) !important;
  padding-inline: clamp(10px, 1.4vw, 18px) !important;
}

#top_topline_current #top_userbar_current,
#top_topline_plan    #top_userbar_plan,
#top_topline_all     #top_userbar_all {
  gap: 10px !important;
  position: relative;
  overflow: visible;
}

#top_topline_current #top_brand,
#top_topline_plan    #top_brand,
#top_topline_all     #top_brand {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  width: 238px;
  min-width: 190px;
  max-width: 24vw;
  height: 44px;
  padding: 4px 10px 4px 6px;
  border-radius: 12px;
  color: var(--erpds-text, #0f172a) !important;
  text-decoration: none !important;
  border: 1px solid transparent;
  transition:
    background var(--erpds-motion-fast) ease,
    border-color var(--erpds-motion-fast) ease,
    box-shadow var(--erpds-motion-fast) ease;
}

#top_topline_current #top_brand:hover,
#top_topline_plan    #top_brand:hover,
#top_topline_all     #top_brand:hover {
  background: #f8fafc;
  border-color: rgba(226, 232, 240, 0.9);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#top_topline_current #top_brand_logo,
#top_topline_plan    #top_brand_logo,
#top_topline_all     #top_brand_logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--erpds-accent, #1871a5) 12%, transparent),
    color-mix(in srgb, var(--erpds-info, #2563B8) 10%, transparent)
  );
  border: 1px solid color-mix(in srgb, var(--erpds-accent, #1871a5) 18%, transparent);
  position: relative;
  overflow: visible;
  transform: translateZ(0);
  transition:
    transform var(--erpds-motion-fast) var(--erpds-motion-ease),
    background var(--erpds-motion-fast) ease,
    border-color var(--erpds-motion-fast) ease,
    box-shadow var(--erpds-motion-fast) ease;
}

#top_topline_current #top_brand_logo::after,
#top_topline_plan    #top_brand_logo::after,
#top_topline_all     #top_brand_logo::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 16px;
  border: 2px solid color-mix(in srgb, var(--erpds-accent, #1871a5) 42%, transparent);
  opacity: 0;
  transform: scale(0.82);
  pointer-events: none;
}

#top_topline_current #top_brand:hover #top_brand_logo,
#top_topline_plan    #top_brand:hover #top_brand_logo,
#top_topline_all     #top_brand:hover #top_brand_logo,
#top_topline_current #top_brand:focus-visible #top_brand_logo,
#top_topline_plan    #top_brand:focus-visible #top_brand_logo,
#top_topline_all     #top_brand:focus-visible #top_brand_logo {
  transform: scale(1.1);
  border-color: color-mix(in srgb, var(--erpds-accent, #1871a5) 34%, transparent);
  box-shadow: 0 8px 22px -12px color-mix(in srgb, var(--erpds-accent, #1871a5) 80%, transparent);
}

.top-brand--pulse #top_brand_logo::after,
#top_brand.top-brand--pulse #top_brand_logo::after {
  animation: topBrandPulse 1.05s var(--erpds-motion-ease) 1;
}

.top-brand--pulse-notify #top_brand_logo::after {
  border-color: color-mix(in srgb, var(--erpds-info, #2563B8) 58%, transparent);
}

.top-brand--pulse-reconnect #top_brand_logo::after {
  border-color: color-mix(in srgb, var(--erpds-ok, #2E8540) 58%, transparent);
}

.top-brand--pulse-network #top_brand_logo::after {
  border-color: color-mix(in srgb, var(--erpds-accent, #1871a5) 62%, transparent);
}

body.top-brand-reveal #top_brand_logo {
  animation: topBrandReveal var(--erpds-motion-medium) var(--erpds-motion-ease) both;
}

body.top-brand-reveal #top_brand_image {
  animation: topBrandMarkReveal var(--erpds-motion-medium) var(--erpds-motion-ease) both;
}

#top_topline_current #top_brand_image,
#top_topline_plan    #top_brand_image,
#top_topline_all     #top_brand_image {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
  transform-origin: 50% 50%;
  transition: transform var(--erpds-motion-fast) var(--erpds-motion-ease);
}

#top_topline_current #top_brand:hover #top_brand_image,
#top_topline_plan    #top_brand:hover #top_brand_image,
#top_topline_all     #top_brand:hover #top_brand_image,
#top_topline_current #top_brand:focus-visible #top_brand_image,
#top_topline_plan    #top_brand:focus-visible #top_brand_image,
#top_topline_all     #top_brand:focus-visible #top_brand_image {
  transform: scale(1.035);
}

@keyframes topBrandPulse {
  0% {
    opacity: 0.62;
    transform: scale(0.84);
  }
  55% {
    opacity: 0.2;
    transform: scale(1.28);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

@keyframes topBrandReveal {
  0% {
    opacity: 0.55;
    transform: scale(0.78);
  }
  58% {
    opacity: 1;
    transform: scale(1.14);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes topBrandMarkReveal {
  0% {
    transform: scale(0.74);
  }
  58% {
    transform: scale(1.16);
  }
  100% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  #top_topline_current #top_brand,
  #top_topline_plan    #top_brand,
  #top_topline_all     #top_brand,
  #top_topline_current #top_brand_logo,
  #top_topline_plan    #top_brand_logo,
  #top_topline_all     #top_brand_logo,
  #top_topline_current #top_brand_image,
  #top_topline_plan    #top_brand_image,
  #top_topline_all     #top_brand_image {
    animation: none !important;
    transition: none !important;
  }

  #top_topline_current #top_brand_logo::after,
  #top_topline_plan    #top_brand_logo::after,
  #top_topline_all     #top_brand_logo::after {
    animation: none !important;
    opacity: 0 !important;
  }
}

#top_topline_current #top_brand_text,
#top_topline_plan    #top_brand_text,
#top_topline_all     #top_brand_text {
  display: grid;
  grid-template-columns: minmax(0, auto) auto;
  align-items: baseline;
  column-gap: 7px;
  row-gap: 1px;
  min-width: 0;
}

#top_topline_current #top_brand_name,
#top_topline_plan    #top_brand_name,
#top_topline_all     #top_brand_name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 800 15px/1.1 var(--erpds-sans, ui-sans-serif, system-ui, sans-serif);
  letter-spacing: .04em;
  color: #0f172a;
}

#top_topline_current #top_brand_meta,
#top_topline_plan    #top_brand_meta,
#top_topline_all     #top_brand_meta {
  white-space: nowrap;
  font: 600 11px/1.1 var(--erpds-sans, ui-sans-serif, system-ui, sans-serif);
  color: #64748b;
}

#top_topline_current #top_brand_mode,
#top_topline_plan    #top_brand_mode,
#top_topline_all     #top_brand_mode {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 1px 6px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font: 700 10px/1.3 var(--erpds-sans, ui-sans-serif, system-ui, sans-serif);
}

#top_topline_current #top_page_context,
#top_topline_plan    #top_page_context,
#top_topline_all     #top_page_context {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(360px, 26vw);
  height: 38px;
  padding: 0 12px;
  border-left: 1px solid rgba(226, 232, 240, 0.9);
  color: #64748b;
  font: 600 12.5px/1.2 var(--erpds-sans, ui-sans-serif, system-ui, sans-serif);
}

#top_topline_current #top_page_context_main,
#top_topline_plan    #top_page_context_main,
#top_topline_all     #top_page_context_main {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#top_topline_current #top_page_context_sep,
#top_topline_plan    #top_page_context_sep,
#top_topline_all     #top_page_context_sep {
  flex: 0 0 auto;
  color: #cbd5e1;
}

#top_topline_current #top_page_context_second,
#top_topline_plan    #top_page_context_second,
#top_topline_all     #top_page_context_second {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #0f172a;
  font-weight: 700;
}

#top_topline_current #top_search,
#top_topline_plan    #top_search,
#top_topline_all     #top_search {
  width: clamp(260px, 31vw, 420px) !important;
  max-width: 44vw !important;
  height: 38px !important;
  border-radius: 10px !important;
  border-color: rgba(203, 213, 225, 0.92) !important;
  background: #f8fafc !important;
}

#top_topline_current #top_search:hover,
#top_topline_plan    #top_search:hover,
#top_topline_all     #top_search:hover {
  background: #ffffff !important;
  border-color: #b6c2d1 !important;
}

#top_topline_current #top_search:focus-within,
#top_topline_plan    #top_search:focus-within,
#top_topline_all     #top_search:focus-within {
  border-color: var(--erpds-accent, #2563b8) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--erpds-focus, #1871a5) 14%, transparent), 0 1px 2px rgba(15, 23, 42, 0.06) !important;
}

#top_topline_current #top_search::after,
#top_topline_plan    #top_search::after,
#top_topline_all     #top_search::after {
  display: none !important;
}

#top_topline_current #top_search #top_field,
#top_topline_plan    #top_search #top_field,
#top_topline_all     #top_search #top_field {
  height: 36px !important;
  padding-right: 30px !important;
  font-size: 13.5px !important;
}

#top_topline_current #top_search #top_search_clear,
#top_topline_plan    #top_search #top_search_clear,
#top_topline_all     #top_search #top_search_clear {
  position: absolute;
  right: 7px;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: background .15s ease, color .15s ease, opacity .15s ease;
}

#top_topline_current #top_search.has-value #top_search_clear,
#top_topline_plan    #top_search.has-value #top_search_clear,
#top_topline_all     #top_search.has-value #top_search_clear,
#top_topline_current #top_search.has-results #top_search_clear,
#top_topline_plan    #top_search.has-results #top_search_clear,
#top_topline_all     #top_search.has-results #top_search_clear {
  opacity: 1;
  pointer-events: auto;
}

#top_topline_current #top_search #top_search_clear:hover,
#top_topline_plan    #top_search #top_search_clear:hover,
#top_topline_all     #top_search #top_search_clear:hover {
  background: #e2e8f0;
  color: #334155;
}

#top_topline_current #top_search #top_search_clear:focus-visible,
#top_topline_plan    #top_search #top_search_clear:focus-visible,
#top_topline_all     #top_search #top_search_clear:focus-visible {
  outline: 2px solid var(--erpds-focus, #1871a5);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--erpds-focus, #1871a5) 14%, transparent);
}

#top_topline_current #top_search.is-loading::before,
#top_topline_plan    #top_search.is-loading::before,
#top_topline_all     #top_search.is-loading::before {
  animation: erpds-spin 800ms linear infinite;
}

#top_topline_current #top_find_result2,
#top_topline_plan    #top_find_result2,
#top_topline_all     #top_find_result2 {
  position: absolute !important;
  top: calc(100% + 7px) !important;
  left: 0 !important;
  right: auto !important;
  z-index: 2147483646 !important;
  width: clamp(320px, 42vw, 560px);
  max-width: calc(100vw - 32px);
}

#top_topline_current #top_find_result,
#top_topline_plan    #top_find_result,
#top_topline_all     #top_find_result {
  position: static !important;
  width: 100%;
  min-width: 0 !important;
  max-width: none !important;
  padding: 8px 0;
  border-radius: 12px;
  box-shadow: 0 18px 48px -24px rgba(15, 23, 42, 0.42), 0 10px 24px -18px rgba(15, 23, 42, 0.24);
}

#top_topline_current #top_find_result a,
#top_topline_plan    #top_find_result a,
#top_topline_all     #top_find_result a {
  max-width: calc(100% - 110px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#top_topline_current #top_find_result > span,
#top_topline_plan    #top_find_result > span,
#top_topline_all     #top_find_result > span {
  min-width: 82px;
  max-width: 112px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#top_topline_current #top_links,
#top_topline_plan    #top_links,
#top_topline_all     #top_links {
  height: 40px !important;
  gap: 3px !important;
  padding: 2px !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-radius: 10px !important;
  background: rgba(248, 250, 252, 0.82) !important;
}

#top_topline_current #top_links > li,
#top_topline_plan    #top_links > li,
#top_topline_all     #top_links > li {
  height: 34px !important;
}

#top_topline_current #top_links > li > a,
#top_topline_plan    #top_links > li > a,
#top_topline_all     #top_links > li > a {
  min-width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  color: #475569 !important;
}

#top_topline_current #top_links > li > a:hover,
#top_topline_plan    #top_links > li > a:hover,
#top_topline_all     #top_links > li > a:hover {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

#top_topline_current #top_links > li:has(#top_region) > div:first-child,
#top_topline_plan    #top_links > li:has(#top_region) > div:first-child,
#top_topline_all     #top_links > li:has(#top_region) > div:first-child {
  height: 34px !important;
  max-width: min(260px, 34vw) !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  padding-inline: 8px 10px !important;
}

#top_topline_current #top_links > li:has(#top_region):hover > div:first-child,
#top_topline_plan    #top_links > li:has(#top_region):hover > div:first-child,
#top_topline_all     #top_links > li:has(#top_region):hover > div:first-child {
  background: #ffffff !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}

#top_topline_current #top_region #top_region_text,
#top_topline_plan    #top_region #top_region_text,
#top_topline_all     #top_region #top_region_text {
  max-width: 190px !important;
}

#top_topline_current #linkEmployeePersonalId,
#top_topline_plan    #linkEmployeePersonalId,
#top_topline_all     #linkEmployeePersonalId {
  max-width: 220px;
}

#top_topline_current #top_user_text,
#top_topline_plan    #top_user_text,
#top_topline_all     #top_user_text {
  max-width: 154px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#top_topline_current .notify-feed__bell,
#top_topline_plan    .notify-feed__bell,
#top_topline_all     .notify-feed__bell {
  flex: 0 0 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  width: 40px !important;
  height: 40px !important;
  margin-left: 10px !important;
  margin-right: 0 !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  background: rgba(248, 250, 252, 0.82) !important;
  color: #475569 !important;
  border-radius: 10px !important;
}

#top_topline_current .notify-feed__bell:hover,
#top_topline_plan    .notify-feed__bell:hover,
#top_topline_all     .notify-feed__bell:hover {
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

#top_topline_current .notify-feed__badge,
#top_topline_plan    .notify-feed__badge,
#top_topline_all     .notify-feed__badge {
  top: -4px;
  right: -4px;
  border: 2px solid #ffffff;
}

@media (min-width: 901px) {
  #top_topline_current #top_userbar_current,
  #top_topline_plan    #top_userbar_plan,
  #top_topline_all     #top_userbar_all {
    flex-wrap: nowrap !important;
    align-items: center !important;
    min-width: 0 !important;
  }

  #top_topline_current #top_search,
  #top_topline_plan    #top_search,
  #top_topline_all     #top_search {
    flex: 1 1 260px !important;
    min-width: 160px !important;
  }

  #top_topline_current #top_links,
  #top_topline_plan    #top_links,
  #top_topline_all     #top_links {
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }

  #top_topline_current .notify-feed__bell,
  #top_topline_plan    .notify-feed__bell,
  #top_topline_all     .notify-feed__bell {
    margin-left: 12px !important;
  }
}

@media (max-width: 1180px) {
  #top_topline_current #top_brand,
  #top_topline_plan    #top_brand,
  #top_topline_all     #top_brand {
    width: 188px;
    min-width: 150px;
  }

  #top_topline_current #top_brand_meta,
  #top_topline_plan    #top_brand_meta,
  #top_topline_all     #top_brand_meta {
    display: none;
  }

  #top_topline_current #top_page_context,
  #top_topline_plan    #top_page_context,
  #top_topline_all     #top_page_context {
    display: none;
  }

  #top_topline_current #top_search,
  #top_topline_plan    #top_search,
  #top_topline_all     #top_search {
    width: clamp(220px, 28vw, 320px) !important;
  }

  #top_topline_current #top_find_result2,
  #top_topline_plan    #top_find_result2,
  #top_topline_all     #top_find_result2 {
    width: min(420px, calc(100vw - 24px));
  }

  #top_topline_current #top_region #top_region_text,
  #top_topline_plan    #top_region #top_region_text,
  #top_topline_all     #top_region #top_region_text {
    max-width: 128px !important;
  }
}

@media (max-width: 900px) {
  #top_topline_current,
  #top_topline_plan,
  #top_topline_all {
    background: linear-gradient(180deg, var(--main-color), var(--erpds-accent-hover, #2D4AC7)) !important;
    box-shadow: 0 8px 24px -18px rgba(15, 23, 42, 0.5) !important;
    padding-inline: 8px !important;
  }

  #top_topline_current #top_brand,
  #top_topline_plan    #top_brand,
  #top_topline_all     #top_brand {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    color: var(--erpds-on-accent, #fff) !important;
  }

  #top_topline_current #top_brand:hover,
  #top_topline_plan    #top_brand:hover,
  #top_topline_all     #top_brand:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: transparent;
    box-shadow: none;
  }

  #top_topline_current #top_brand_logo,
  #top_topline_plan    #top_brand_logo,
  #top_topline_all     #top_brand_logo {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    border: 0;
    background: transparent;
  }

  #top_topline_current #top_brand_image,
  #top_topline_plan    #top_brand_image,
  #top_topline_all     #top_brand_image {
    width: 30px;
    height: 30px;
    filter: brightness(0) invert(1);
  }

  #top_topline_current #top_brand_text,
  #top_topline_plan    #top_brand_text,
  #top_topline_all     #top_brand_text {
    display: none;
  }

  #top_topline_current #top_page_context,
  #top_topline_plan    #top_page_context,
  #top_topline_all     #top_page_context {
    display: none;
  }

  #top_topline_current #top_links,
  #top_topline_plan    #top_links,
  #top_topline_all     #top_links {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
  }

  #top_topline_current #top_find_result2,
  #top_topline_plan    #top_find_result2,
  #top_topline_all     #top_find_result2 {
    position: fixed !important;
    top: var(--wn-topbar-h, 56px) !important;
    left: 8px !important;
    right: 8px !important;
    width: auto;
    max-width: none;
  }

  #top_topline_current .notify-feed__bell,
  #top_topline_plan    .notify-feed__bell,
  #top_topline_all     .notify-feed__bell {
    border: 0 !important;
    background: transparent !important;
    color: var(--erpds-on-accent, #fff) !important;
  }

  #top_topline_current .notify-feed__bell .us-icon,
  #top_topline_plan    .notify-feed__bell .us-icon,
  #top_topline_all     .notify-feed__bell .us-icon {
    color: inherit !important;
    margin-right: 0 !important;
  }
}

/* ============================================================
   Header actions polish — context chip + utility actions.
   ============================================================ */
#top_topline_current #top_links,
#top_topline_plan    #top_links,
#top_topline_all     #top_links {
  gap: 6px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#top_topline_current #top_links > li,
#top_topline_plan    #top_links > li,
#top_topline_all     #top_links > li {
  height: 40px !important;
}

#top_topline_current #top_links > li > a,
#top_topline_plan    #top_links > li > a,
#top_topline_all     #top_links > li > a {
  height: 38px !important;
  min-width: 38px !important;
  border: 1px solid rgba(226, 232, 240, 0.92) !important;
  background: rgba(248, 250, 252, 0.82) !important;
  border-radius: 10px !important;
}

#top_topline_current #top_links > li > a:hover,
#top_topline_plan    #top_links > li > a:hover,
#top_topline_all     #top_links > li > a:hover {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07);
}

#top_topline_current #top_links > li:has(#top_region),
#top_topline_plan    #top_links > li:has(#top_region),
#top_topline_all     #top_links > li:has(#top_region) {
  margin-right: 4px !important;
}

#top_topline_current #top_links > li:has(#top_region) > div:first-child,
#top_topline_plan    #top_links > li:has(#top_region) > div:first-child,
#top_topline_all     #top_links > li:has(#top_region) > div:first-child {
  height: 38px !important;
  max-width: min(300px, 30vw) !important;
  border: 1px solid rgba(226, 232, 240, 0.92) !important;
  border-radius: 10px !important;
  background: rgba(248, 250, 252, 0.82) !important;
  padding-inline: 10px 12px !important;
}

#top_topline_current #top_links > li:has(#top_region):hover > div:first-child,
#top_topline_plan    #top_links > li:has(#top_region):hover > div:first-child,
#top_topline_all     #top_links > li:has(#top_region):hover > div:first-child {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07) !important;
}

#top_topline_current #top_region #top_region_text,
#top_topline_plan    #top_region #top_region_text,
#top_topline_all     #top_region #top_region_text {
  max-width: 210px !important;
}

#top_topline_current #linkEmployeePersonalId,
#top_topline_plan    #linkEmployeePersonalId,
#top_topline_all     #linkEmployeePersonalId {
  padding-inline: 9px 12px !important;
}

#top_topline_current #top_links #linkLogoutMenuId,
#top_topline_plan    #top_links #linkLogoutMenuId,
#top_topline_all     #top_links #linkLogoutMenuId {
  margin-left: 2px;
}

@media (max-width: 1180px) {
  #top_topline_current #top_links > li:has(#top_region) > div:first-child,
  #top_topline_plan    #top_links > li:has(#top_region) > div:first-child,
  #top_topline_all     #top_links > li:has(#top_region) > div:first-child {
    max-width: min(190px, 22vw) !important;
  }

  #top_topline_current #top_region #top_region_text,
  #top_topline_plan    #top_region #top_region_text,
  #top_topline_all     #top_region #top_region_text {
    max-width: 118px !important;
  }
}

@media (min-width: 1181px) and (max-width: 1500px) {
  #top_topline_current #top_links,
  #top_topline_plan    #top_links,
  #top_topline_all     #top_links {
    gap: 4px !important;
  }

  #top_topline_current #top_links > li:has(#top_region) > div:first-child,
  #top_topline_plan    #top_links > li:has(#top_region) > div:first-child,
  #top_topline_all     #top_links > li:has(#top_region) > div:first-child {
    max-width: 168px !important;
    padding-inline: 8px !important;
  }

  #top_topline_current #top_region #top_region_text,
  #top_topline_plan    #top_region #top_region_text,
  #top_topline_all     #top_region #top_region_text {
    max-width: 108px !important;
  }

  #top_topline_current #linkEmployeePersonalId,
  #top_topline_plan    #linkEmployeePersonalId,
  #top_topline_all     #linkEmployeePersonalId {
    max-width: 160px;
    padding-inline: 8px 10px !important;
  }

  #top_topline_current #top_user_text,
  #top_topline_plan    #top_user_text,
  #top_topline_all     #top_user_text {
    max-width: 104px;
  }

  #top_topline_current .notify-feed__bell,
  #top_topline_plan    .notify-feed__bell,
  #top_topline_all     .notify-feed__bell {
    margin-left: 6px !important;
  }
}

@media (min-width: 1181px) and (max-width: 1400px) {
  #top_topline_current #top_page_context,
  #top_topline_plan    #top_page_context,
  #top_topline_all     #top_page_context {
    max-width: min(280px, 22vw) !important;
    padding-inline: 10px !important;
  }

  #top_topline_current #top_links,
  #top_topline_plan    #top_links,
  #top_topline_all     #top_links {
    gap: 3px !important;
  }

  #top_topline_current #top_links > li:has(#top_region) > div:first-child,
  #top_topline_plan    #top_links > li:has(#top_region) > div:first-child,
  #top_topline_all     #top_links > li:has(#top_region) > div:first-child {
    max-width: 144px !important;
    padding-inline: 7px !important;
  }

  #top_topline_current #top_region #top_region_text,
  #top_topline_plan    #top_region #top_region_text,
  #top_topline_all     #top_region #top_region_text {
    max-width: 86px !important;
  }

  #top_topline_current #linkEmployeePersonalId,
  #top_topline_plan    #linkEmployeePersonalId,
  #top_topline_all     #linkEmployeePersonalId {
    max-width: 146px;
    padding-inline: 7px 9px !important;
  }

  #top_topline_current #top_user_text,
  #top_topline_plan    #top_user_text,
  #top_topline_all     #top_user_text {
    max-width: 90px;
  }

  #top_topline_current .notify-feed__bell,
  #top_topline_plan    .notify-feed__bell,
  #top_topline_all     .notify-feed__bell {
    margin-left: 4px !important;
  }
}

@media (max-width: 900px) {
  #top_topline_current #top_links > li > a,
  #top_topline_plan    #top_links > li > a,
  #top_topline_all     #top_links > li > a {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}