/*
 * Материальный фон графитово-голубого контура.
 * Заимствует у главной страницы эффект ткани, редкой сетки и теней плоскостей.
 */
body:is(.portal-material-surface, .timesheet-material-preview) {
  position: relative;
  isolation: isolate;
  --bg: #0b0d11;
  --panel: #24272d;
  --panel-soft: #2a2e35;
  --text: #f1f3f6;
  --ink: #f1f3f6;
  --muted: #9da6b2;
  --line: rgba(181, 198, 220, 0.24);
  --line-strong: rgba(181, 198, 220, 0.42);
  --accent: #8ab4f8;
  --accent-strong: #b3cff7;
  --accent-soft: rgba(138, 180, 248, 0.16);
  --focus: #8ab4f8;
  --focus-soft: rgba(138, 180, 248, 0.16);
  --blue: #8ab4f8;
  --blue-soft: rgba(138, 180, 248, 0.16);
  background:
    radial-gradient(ellipse at 78% 14%, rgba(163, 187, 220, 0.13), transparent 36rem),
    radial-gradient(ellipse at 26% 82%, rgba(214, 224, 238, 0.045), transparent 31rem),
    linear-gradient(135deg, #090b0f 0%, #11141a 49%, #1a1e25 100%) !important;
  background-attachment: fixed !important;
}

body:is(.portal-material-surface, .timesheet-material-preview)::before,
body:is(.portal-material-surface, .timesheet-material-preview)::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Мелкое плетение и едва заметная конструктивная сетка. */
body:is(.portal-material-surface, .timesheet-material-preview)::before {
  background:
    linear-gradient(90deg, transparent 0 24%, rgba(201, 215, 234, 0.075) 24% calc(24% + 1px), transparent calc(24% + 1px)),
    linear-gradient(90deg, transparent 0 67%, rgba(201, 215, 234, 0.07) 67% calc(67% + 1px), transparent calc(67% + 1px)),
    linear-gradient(180deg, transparent 0 27%, rgba(201, 215, 234, 0.065) 27% calc(27% + 1px), transparent calc(27% + 1px)),
    linear-gradient(180deg, transparent 0 73%, rgba(201, 215, 234, 0.055) 73% calc(73% + 1px), transparent calc(73% + 1px)),
    repeating-linear-gradient(90deg, rgba(220, 229, 240, 0.024) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.022) 0 1px, transparent 1px 5px),
    repeating-radial-gradient(circle at 17% 25%, rgba(201, 215, 234, 0.055) 0 1px, transparent 1px 3px);
  opacity: 0.72;
  mix-blend-mode: overlay;
}

/* Две большие полупрозрачные «ткани», одна отбрасывает тень на другую. */
body:is(.portal-material-surface, .timesheet-material-preview)::after {
  inset: -10vh -8vw;
  background:
    linear-gradient(158deg, transparent 0 52%, rgba(189, 207, 231, 0.042) 52.15% 64%, rgba(4, 8, 14, 0.26) 64.2% 70%, transparent 70.2%),
    linear-gradient(24deg, transparent 0 61%, rgba(163, 187, 220, 0.052) 61.2% 74%, rgba(3, 7, 13, 0.14) 74.2% 78%, transparent 78.2%),
    linear-gradient(108deg, transparent 0 70%, rgba(210, 222, 238, 0.03) 70.15% 79%, transparent 79.2%);
  opacity: 0.9;
  filter: drop-shadow(-24px 28px 34px rgba(0, 0, 0, 0.42));
  transform: translateZ(0);
}

body:is(.portal-material-surface, .timesheet-material-preview) > .shell {
  position: relative;
  z-index: 1;
}

body:is(.portal-material-surface, .timesheet-material-preview) .workspace > .panel,
body:is(.portal-material-surface, .timesheet-material-preview) .workspace > .directory-map,
body:is(.portal-material-surface, .timesheet-material-preview) .workspace > .tabs,
body:is(.portal-material-surface, .timesheet-material-preview) .workspace > .section,
body.portal-material-surface > .shell > .topbar,
body.portal-material-surface > .shell > .period-bar,
body.portal-material-surface > .shell > .scope-note,
body.portal-material-surface > .shell > .panel,
body.portal-material-surface > .shell > .section {
  background:
    radial-gradient(ellipse at 14% -22%, rgba(189, 207, 231, 0.065), transparent 48%),
    repeating-radial-gradient(ellipse at -18% 36%, transparent 0 24px, rgba(201, 215, 234, 0.018) 25px 26px, transparent 27px 50px),
    repeating-linear-gradient(98deg, rgba(220, 229, 240, 0.014) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, rgba(210, 222, 238, 0.035), transparent 48%),
    rgba(36, 39, 45, 0.92) !important;
  box-shadow:
    0 24px 58px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
  backdrop-filter: blur(2px);
}

/* Единые оболочки и карточки всех модулей портала. */
body.portal-material-surface :where(
  .panel,
  .section,
  .topbar,
  .toolbar,
  .admin-tabs,
  .period-bar,
  .scope-note,
  .modal-card,
  .card,
  [class$="-panel"],
  [class$="-card"]
) {
  border-color: rgba(181, 198, 220, 0.22) !important;
  color: #f1f3f6 !important;
}

body.portal-material-surface :where(
  .panel,
  .section,
  .topbar,
  .toolbar,
  .admin-tabs,
  .period-bar,
  .scope-note,
  .modal-card,
  [class$="-panel"]
) {
  background:
    radial-gradient(ellipse at 12% -28%, rgba(189, 207, 231, 0.06), transparent 48%),
    repeating-radial-gradient(ellipse at -20% 38%, transparent 0 26px, rgba(201, 215, 234, 0.017) 27px 28px, transparent 29px 55px),
    repeating-linear-gradient(98deg, rgba(220, 229, 240, 0.013) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, rgba(210, 222, 238, 0.03), transparent 46%),
    rgba(36, 39, 45, 0.93) !important;
  box-shadow:
    0 24px 56px rgba(4, 8, 14, 0.38),
    inset 0 1px 0 rgba(218, 229, 243, 0.045) !important;
}

body.portal-material-surface :where(
  .card,
  .metric,
  .stat,
  [class$="-card"]
) {
  background:
    repeating-linear-gradient(98deg, rgba(220, 229, 240, 0.012) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, rgba(189, 207, 231, 0.035), transparent 56%),
    rgba(39, 43, 50, 0.94) !important;
  box-shadow:
    0 14px 34px rgba(4, 8, 14, 0.3),
    inset 0 1px 0 rgba(218, 229, 243, 0.035) !important;
}

/* Навигация и логотипный слой. */
body.portal-material-surface .rail {
  border-right-color: rgba(181, 198, 220, 0.22) !important;
  background:
    radial-gradient(ellipse at 16% 4%, rgba(138, 180, 248, 0.2), transparent 28%),
    repeating-linear-gradient(98deg, rgba(220, 229, 240, 0.014) 0 1px, transparent 1px 4px),
    linear-gradient(168deg, #292d34 0%, #1d2026 38%, #15181e 100%) !important;
  box-shadow: inset -1px 0 0 rgba(181, 198, 220, 0.1) !important;
}

/* Поля и кнопки остаются более гладкими, чтобы материал не мешал чтению. */
body.portal-material-surface :where(input, select, textarea),
body.portal-material-surface :where(
  .custom-select-button,
  .admin-select-trigger,
  .portal-select-trigger,
  .portal-calendar-trigger,
  [class$="-picker-trigger"],
  [class$="-select-trigger"],
  [class$="-date-trigger"],
  [class$="-year-trigger"]
) {
  border-color: rgba(181, 198, 220, 0.34) !important;
  background-color: #22262d !important;
  color: #f1f3f6 !important;
  box-shadow: inset 0 1px 0 rgba(218, 229, 243, 0.025) !important;
}

body.portal-material-surface :where(input, select, textarea):focus,
body.portal-material-surface :where(
  .custom-select.open .custom-select-button,
  .admin-select.open .admin-select-trigger,
  .portal-select.open .portal-select-trigger,
  .portal-calendar-picker.open .portal-calendar-trigger,
  [aria-expanded="true"][class$="-trigger"]
) {
  outline: none !important;
  border-color: #8ab4f8 !important;
  background-color: #292e37 !important;
  box-shadow: 0 0 0 3px rgba(138, 180, 248, 0.17) !important;
}

body.portal-material-surface :where(.btn, .tab, .admin-tab, .modal-tab, .icon-btn) {
  border-color: rgba(181, 198, 220, 0.28) !important;
  background: linear-gradient(145deg, #2b3038, #23272e) !important;
  color: #f1f3f6 !important;
}

body.portal-material-surface :where(.btn, .tab, .admin-tab, .modal-tab, .icon-btn):hover {
  border-color: rgba(138, 180, 248, 0.68) !important;
  background: linear-gradient(145deg, rgba(138, 180, 248, 0.16), #292e37) !important;
}

body.portal-material-surface :where(.btn.primary, .tab.active, .admin-tab.active, .modal-tab.active) {
  border-color: #8ab4f8 !important;
  background: linear-gradient(135deg, #7899ca, #a4c2f4) !important;
  color: #17191d !important;
  box-shadow: 0 9px 24px rgba(80, 123, 185, 0.24) !important;
}

/* Все раскрывающиеся контекстные меню и календари. */
body.portal-material-surface :where(
  .custom-select-menu,
  .admin-select-menu,
  .portal-select-menu,
  .portal-calendar-popover,
  [class$="-menu"],
  [class$="-popover"],
  .department-menu,
  .employee-menu,
  .project-menu,
  .year-menu,
  .month-menu,
  .person-menu,
  .calendar-year-menu,
  .day-status-select-menu,
  .message-picker-menu,
  .period-picker-menu,
  .time-gap-period-menu,
  .time-gap-calendar-popover,
  .time-gap-duration-menu,
  .timesheet-entry-time-menu,
  .audit-calendar
) {
  border-color: rgba(138, 180, 248, 0.4) !important;
  background:
    repeating-linear-gradient(98deg, rgba(220, 229, 240, 0.015) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at 12% -20%, rgba(189, 207, 231, 0.08), transparent 48%),
    linear-gradient(145deg, #292d34, #1d2026) !important;
  color: #f1f3f6 !important;
  box-shadow:
    0 30px 76px rgba(2, 5, 10, 0.58),
    inset 0 1px 0 rgba(218, 229, 243, 0.055) !important;
  backdrop-filter: blur(18px);
}

body.portal-material-surface :where(
  .custom-option,
  .admin-select-option,
  .portal-select-option,
  .portal-calendar-nav,
  button.portal-calendar-title,
  .portal-calendar-day,
  .portal-calendar-action,
  [class$="-option"],
  .department-option,
  .employee-option,
  .project-option,
  .year-option,
  .month-option,
  .message-picker-option,
  .period-option,
  .time-gap-duration-option,
  .timesheet-entry-time-option,
  .audit-calendar-day
) {
  border-color: rgba(181, 198, 220, 0.2) !important;
  background:
    repeating-radial-gradient(ellipse at -24% 46%, transparent 0 18px, rgba(201, 215, 234, 0.025) 19px 20px, transparent 21px 39px),
    repeating-linear-gradient(98deg, rgba(220, 229, 240, 0.017) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, rgba(189, 207, 231, 0.055), transparent 58%),
    #2b3038 !important;
  color: #e8ecf2 !important;
  box-shadow:
    0 7px 18px rgba(4, 8, 14, 0.22),
    inset 0 1px 0 rgba(218, 229, 243, 0.04) !important;
}

body.portal-material-surface :where(
  .custom-option,
  .admin-select-option,
  .portal-select-option,
  .portal-calendar-nav,
  button.portal-calendar-title,
  .portal-calendar-day,
  .portal-calendar-action,
  [class$="-option"],
  .department-option,
  .employee-option,
  .project-option,
  .year-option,
  .month-option,
  .message-picker-option,
  .period-option,
  .time-gap-duration-option,
  .timesheet-entry-time-option,
  .audit-calendar-day
):hover {
  border-color: rgba(138, 180, 248, 0.62) !important;
  background:
    repeating-linear-gradient(98deg, rgba(225, 234, 247, 0.025) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, rgba(138, 180, 248, 0.19), transparent 62%),
    #292e37 !important;
  color: #ffffff !important;
}

body.portal-material-surface :where(
  .custom-option.selected,
  .admin-select-option.selected,
  .portal-select-option[aria-selected="true"],
  .portal-calendar-day.selected,
  [class$="-option"].selected,
  [class$="-option"][aria-selected="true"],
  .department-option.selected,
  .employee-option.selected,
  .project-option.selected,
  .year-option.selected,
  .month-option.selected,
  .message-picker-option.selected,
  .period-option.selected,
  .audit-calendar-day.selected
) {
  border-color: #8ab4f8 !important;
  background:
    repeating-linear-gradient(98deg, rgba(235, 242, 252, 0.04) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, rgba(179, 207, 247, 0.26), transparent 58%),
    #5679ad !important;
  color: #ffffff !important;
  box-shadow:
    inset 3px 0 0 #b3cff7,
    0 8px 20px rgba(67, 111, 177, 0.22) !important;
}

body.portal-material-surface :where(
  .custom-option.placeholder,
  .custom-option.placeholder.selected,
  .employee-search-row
) {
  border-color: rgba(181, 198, 220, 0.2) !important;
  background:
    repeating-linear-gradient(98deg, rgba(220, 229, 240, 0.012) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, rgba(189, 207, 231, 0.035), transparent 62%),
    #20242a !important;
  color: #aab3bf !important;
}

/* Модальные оболочки и таблицы. */
body.portal-material-surface :where(
  .modal,
  .modal-backdrop,
  [class$="-modal"]
) {
  --modal-overlay: rgba(7, 9, 13, 0.84);
}

body.portal-material-surface :where(
  .modal-card,
  [class$="-dialog"]
) {
  border-color: rgba(138, 180, 248, 0.36) !important;
  background:
    repeating-linear-gradient(98deg, rgba(220, 229, 240, 0.014) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, #292d34, #1d2026) !important;
  color: #f1f3f6 !important;
  box-shadow: 0 32px 88px rgba(2, 5, 10, 0.62) !important;
}

body.portal-material-surface :where(table, th, td) {
  border-color: rgba(181, 198, 220, 0.2) !important;
}

body.portal-material-surface th {
  color: #b3becb !important;
}

/* Встроенный Messenger раньше сохранял отдельную зелёную тему. */
body.portal-material-surface #messengerDm,
body.portal-material-surface .dmi-messenger,
body.portal-material-surface .dmi-messenger__sidebar,
body.portal-material-surface .dmi-messenger__chat,
body.portal-material-surface .dmi-messenger__contacts-panel,
body.portal-material-surface .dmi-messenger__conversation,
body.portal-material-surface .dmi-messenger__new-panel,
body.portal-material-surface .dmi-messenger__new-footer,
body.portal-material-surface .dmi-messenger__composer {
  border-color: rgba(181, 198, 220, 0.22) !important;
  background:
    repeating-linear-gradient(98deg, rgba(220, 229, 240, 0.012) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, rgba(189, 207, 231, 0.035), transparent 58%),
    rgba(29, 32, 38, 0.95) !important;
  color: #f1f3f6 !important;
}

body.portal-material-surface .dmi-messenger__create-btn,
body.portal-material-surface .dmi-messenger__send {
  border-color: #8ab4f8 !important;
  background: linear-gradient(135deg, #7899ca, #a4c2f4) !important;
  color: #17191d !important;
}

/*
 * Пробный верхний «кокон» для страницы проверки: крашеный шпон.
 * Волокна остаются внутри крупных оболочек, а рабочие поля сохраняют чистый фон.
 */
body.portal-material-surface:has(#approvalView:not([hidden])) .workspace > .topbar,
body.portal-material-surface:has(#approvalView:not([hidden])) .admin-tabs,
body.portal-material-surface:has(#approvalView:not([hidden])) #approvalView > .approval-panel {
  border-color: rgba(181, 198, 220, 0.24) !important;
  background:
    radial-gradient(ellipse at 14% -22%, rgba(189, 207, 231, 0.1), transparent 48%),
    repeating-radial-gradient(ellipse at -18% 36%, transparent 0 20px, rgba(201, 215, 234, 0.026) 21px 22px, transparent 23px 43px),
    repeating-linear-gradient(98deg, rgba(220, 229, 240, 0.017) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(101deg, transparent 0 22px, rgba(7, 11, 17, 0.06) 23px 24px, transparent 25px 47px),
    linear-gradient(145deg, rgba(210, 222, 238, 0.045), transparent 46%),
    #24272d !important;
  box-shadow:
    0 26px 60px rgba(5, 8, 13, 0.46),
    inset 0 1px 0 rgba(218, 229, 243, 0.065),
    inset 0 -18px 38px rgba(4, 8, 14, 0.12) !important;
}

body.portal-material-surface:has(#approvalView:not([hidden])) .workspace > .topbar {
  background:
    linear-gradient(105deg, rgba(205, 220, 240, 0.065), transparent 36%),
    repeating-radial-gradient(ellipse at -14% 44%, transparent 0 24px, rgba(198, 214, 235, 0.024) 25px 26px, transparent 27px 52px),
    repeating-linear-gradient(98deg, rgba(220, 229, 240, 0.016) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, #292d34, #202329) !important;
}

@media (max-width: 760px), (prefers-reduced-transparency: reduce) {
  body:is(.portal-material-surface, .timesheet-material-preview)::after {
    opacity: 0.58;
  }

  body:is(.portal-material-surface, .timesheet-material-preview) .workspace > .panel,
  body:is(.portal-material-surface, .timesheet-material-preview) .workspace > .directory-map,
  body:is(.portal-material-surface, .timesheet-material-preview) .workspace > .tabs,
  body:is(.portal-material-surface, .timesheet-material-preview) .workspace > .section,
  body.portal-material-surface > .shell > .topbar,
  body.portal-material-surface > .shell > .period-bar,
  body.portal-material-surface > .shell > .scope-note,
  body.portal-material-surface > .shell > .panel,
  body.portal-material-surface > .shell > .section {
    backdrop-filter: none;
  }
}

/*
 * Табель имеет собственный графитовый слой с повышенной специфичностью.
 * Эти правила сводят его к тому же холодному крашеному шпону, что и
 * «Проверка табелей», не меняя геометрию и поведение формы.
 */
html.dark-theme body.portal-material-surface:has(.day-entry-panel),
body.portal-material-surface:has(.day-entry-panel) {
  --bg: #0b0d11;
  --panel: #24272d;
  --ink: #f1f3f6;
  --muted: #9da6b2;
  --line: rgba(181, 198, 220, 0.24);
  --line-strong: rgba(181, 198, 220, 0.42);
  background:
    radial-gradient(ellipse at 78% 14%, rgba(163, 187, 220, 0.13), transparent 36rem),
    radial-gradient(ellipse at 26% 82%, rgba(214, 224, 238, 0.045), transparent 31rem),
    linear-gradient(135deg, #090b0f 0%, #11141a 49%, #1a1e25 100%) !important;
  background-size: auto !important;
  background-attachment: fixed !important;
  color: #f1f3f6 !important;
}

html.dark-theme body.portal-material-surface:has(.day-entry-panel) .topbar,
body.portal-material-surface:has(.day-entry-panel) .topbar {
  border-color: rgba(181, 198, 220, 0.24) !important;
  background:
    linear-gradient(105deg, rgba(205, 220, 240, 0.065), transparent 36%),
    repeating-radial-gradient(ellipse at -14% 44%, transparent 0 24px, rgba(198, 214, 235, 0.024) 25px 26px, transparent 27px 52px),
    repeating-linear-gradient(98deg, rgba(220, 229, 240, 0.016) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, #292d34, #202329) !important;
  box-shadow:
    0 24px 58px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(218, 229, 243, 0.045) !important;
}

html.dark-theme body.portal-material-surface:has(.day-entry-panel) :is(
  .panel,
  .section,
  .day-access-block,
  .day-work-block,
  .calendar-grid-block,
  .calendar-info-block,
  .day-actions,
  .save-action-dock,
  .support-footer
),
body.portal-material-surface:has(.day-entry-panel) :is(
  .panel,
  .section,
  .day-access-block,
  .day-work-block,
  .calendar-grid-block,
  .calendar-info-block,
  .day-actions,
  .save-action-dock,
  .support-footer
) {
  border-color: rgba(181, 198, 220, 0.24) !important;
  background:
    radial-gradient(ellipse at 14% -22%, rgba(189, 207, 231, 0.072), transparent 48%),
    repeating-radial-gradient(ellipse at -18% 36%, transparent 0 22px, rgba(201, 215, 234, 0.021) 23px 24px, transparent 25px 48px),
    repeating-linear-gradient(98deg, rgba(220, 229, 240, 0.014) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, rgba(210, 222, 238, 0.035), transparent 48%),
    rgba(36, 39, 45, 0.94) !important;
  color: #f1f3f6 !important;
  box-shadow:
    0 20px 48px rgba(4, 8, 14, 0.34),
    inset 0 1px 0 rgba(218, 229, 243, 0.045) !important;
}

html.dark-theme body.portal-material-surface:has(.day-entry-panel) :is(.field-group, .overview-card, .day-context),
body.portal-material-surface:has(.day-entry-panel) :is(.field-group, .overview-card, .day-context) {
  border-color: rgba(181, 198, 220, 0.25) !important;
  background:
    repeating-linear-gradient(98deg, rgba(220, 229, 240, 0.012) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, rgba(189, 207, 231, 0.045), transparent 58%),
    #272b32 !important;
  color: #f1f3f6 !important;
  box-shadow:
    0 12px 30px rgba(4, 8, 14, 0.26),
    inset 0 1px 0 rgba(218, 229, 243, 0.035) !important;
}

html.dark-theme body.portal-material-surface:has(.day-entry-panel) :is(
  input,
  select,
  textarea,
  .custom-select-button,
  .theme-toggle,
  .master-toggle
),
body.portal-material-surface:has(.day-entry-panel) :is(
  input,
  select,
  textarea,
  .custom-select-button,
  .theme-toggle,
  .master-toggle
) {
  border-color: rgba(181, 198, 220, 0.34) !important;
  background: linear-gradient(145deg, #2b3038, #22262d) !important;
  color: #f1f3f6 !important;
}

html.dark-theme body.portal-material-surface:has(.day-entry-panel) :is(.custom-select-menu, [class$="-menu"], [class$="-popover"]),
body.portal-material-surface:has(.day-entry-panel) :is(.custom-select-menu, [class$="-menu"], [class$="-popover"]) {
  border-color: rgba(138, 180, 248, 0.4) !important;
  background:
    repeating-linear-gradient(98deg, rgba(220, 229, 240, 0.015) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at 12% -20%, rgba(189, 207, 231, 0.08), transparent 48%),
    linear-gradient(145deg, #292d34, #1d2026) !important;
  color: #f1f3f6 !important;
  box-shadow: 0 30px 76px rgba(2, 5, 10, 0.58) !important;
}

/* Фактура внутри каждой плитки раскрытого меню табеля. */
html.dark-theme body.portal-material-surface:has(.day-entry-panel) :is(
  .custom-option,
  .custom-select .drum-option,
  [class$="-option"]
),
body.portal-material-surface:has(.day-entry-panel) :is(
  .custom-option,
  .custom-select .drum-option,
  [class$="-option"]
) {
  border-color: rgba(181, 198, 220, 0.24) !important;
  background:
    repeating-radial-gradient(ellipse at -24% 46%, transparent 0 18px, rgba(201, 215, 234, 0.025) 19px 20px, transparent 21px 39px),
    repeating-linear-gradient(98deg, rgba(220, 229, 240, 0.017) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, rgba(189, 207, 231, 0.055), transparent 58%),
    #2b3038 !important;
  color: #e8ecf2 !important;
  box-shadow:
    0 7px 18px rgba(4, 8, 14, 0.22),
    inset 0 1px 0 rgba(218, 229, 243, 0.04) !important;
}

html.dark-theme body.portal-material-surface:has(.day-entry-panel) :is(
  .custom-option,
  .custom-select .drum-option,
  [class$="-option"]
):hover,
body.portal-material-surface:has(.day-entry-panel) :is(
  .custom-option,
  .custom-select .drum-option,
  [class$="-option"]
):hover {
  border-color: rgba(138, 180, 248, 0.64) !important;
  background:
    repeating-linear-gradient(98deg, rgba(225, 234, 247, 0.025) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, rgba(138, 180, 248, 0.19), transparent 62%),
    #292e37 !important;
  color: #ffffff !important;
}

html.dark-theme body.portal-material-surface:has(.day-entry-panel) :is(
  .custom-option.selected,
  .custom-option[aria-selected="true"],
  .custom-select .drum-option.selected,
  .custom-select .drum-option.drum-center,
  [class$="-option"].selected,
  [class$="-option"][aria-selected="true"]
),
body.portal-material-surface:has(.day-entry-panel) :is(
  .custom-option.selected,
  .custom-option[aria-selected="true"],
  .custom-select .drum-option.selected,
  .custom-select .drum-option.drum-center,
  [class$="-option"].selected,
  [class$="-option"][aria-selected="true"]
) {
  border-color: #8ab4f8 !important;
  background:
    repeating-linear-gradient(98deg, rgba(235, 242, 252, 0.04) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, rgba(179, 207, 247, 0.26), transparent 58%),
    #5679ad !important;
  color: #ffffff !important;
  box-shadow:
    inset 3px 0 0 #b3cff7,
    0 8px 20px rgba(67, 111, 177, 0.22) !important;
}

html.dark-theme body.portal-material-surface:has(.day-entry-panel) :is(
  .custom-option.placeholder,
  .custom-option.placeholder.selected,
  .employee-search-row
),
body.portal-material-surface:has(.day-entry-panel) :is(
  .custom-option.placeholder,
  .custom-option.placeholder.selected,
  .employee-search-row
) {
  border-color: rgba(181, 198, 220, 0.2) !important;
  background:
    repeating-linear-gradient(98deg, rgba(220, 229, 240, 0.012) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, rgba(189, 207, 231, 0.035), transparent 62%),
    #20242a !important;
  color: #aab3bf !important;
}

/*
 * Мелкие элементы табеля остаются гладкими: холодный графит,
 * тонкая граница и внутренний блик без повторяющейся фактуры.
 */
html.dark-theme body.portal-material-surface:has(.day-entry-panel) :is(
  .calendar .day,
  .legend-item,
  .multi-date-toggle,
  .multi-date-clear
),
body.portal-material-surface:has(.day-entry-panel) :is(
  .calendar .day,
  .legend-item,
  .multi-date-toggle,
  .multi-date-clear
) {
  border-color: rgba(181, 198, 220, 0.25) !important;
  background: linear-gradient(145deg, rgba(210, 222, 238, 0.04), transparent 58%), #2b3038 !important;
  color: #eef1f5 !important;
  box-shadow:
    inset 0 1px 0 rgba(226, 235, 247, 0.075),
    0 5px 13px rgba(4, 8, 14, 0.16) !important;
}

html.dark-theme body.portal-material-surface:has(.day-entry-panel) .calendar .day.weekend,
html.dark-theme body.portal-material-surface:has(.day-entry-panel) .calendar .day.official-off,
body.portal-material-surface:has(.day-entry-panel) .calendar .day.weekend,
body.portal-material-surface:has(.day-entry-panel) .calendar .day.official-off {
  background: linear-gradient(145deg, rgba(210, 222, 238, 0.025), transparent 58%), #252a31 !important;
}

html.dark-theme body.portal-material-surface:has(.day-entry-panel) :is(
  .calendar .day,
  .legend-item,
  .multi-date-toggle,
  .multi-date-clear
):hover,
body.portal-material-surface:has(.day-entry-panel) :is(
  .calendar .day,
  .legend-item,
  .multi-date-toggle,
  .multi-date-clear
):hover {
  border-color: rgba(138, 180, 248, 0.68) !important;
  background: linear-gradient(145deg, rgba(138, 180, 248, 0.15), transparent 62%), #2d333d !important;
  color: #ffffff !important;
}

html.dark-theme body.portal-material-surface:has(.day-entry-panel) .calendar .day.active,
body.portal-material-surface:has(.day-entry-panel) .calendar .day.active {
  border-color: #8ab4f8 !important;
  background: linear-gradient(145deg, rgba(179, 207, 247, 0.24), transparent 60%), #5679ad !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(235, 242, 252, 0.2),
    0 8px 20px rgba(67, 111, 177, 0.26) !important;
}

/* Производственный календарь: три состояния должны читаться сразу. */
html.dark-theme body.portal-material-surface:has(.day-entry-panel) .calendar .day.weekend:not(.active),
body.portal-material-surface:has(.day-entry-panel) .calendar .day.weekend:not(.active) {
  border-color: rgba(246, 195, 93, 0.42) !important;
  background: linear-gradient(145deg, rgba(246, 195, 93, 0.09), transparent 60%), #342f29 !important;
  color: #f6cf7a !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 231, 180, 0.08),
    0 5px 13px rgba(4, 8, 14, 0.16) !important;
}

html.dark-theme body.portal-material-surface:has(.day-entry-panel) .calendar .day.official-off:not(.active),
body.portal-material-surface:has(.day-entry-panel) .calendar .day.official-off:not(.active) {
  border-color: rgba(255, 120, 111, 0.54) !important;
  background: linear-gradient(145deg, rgba(255, 120, 111, 0.12), transparent 60%), #35272b !important;
  color: #ff9189 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 209, 205, 0.08),
    0 5px 13px rgba(4, 8, 14, 0.16) !important;
}

html.dark-theme body.portal-material-surface:has(.day-entry-panel) .calendar .day.preholiday:not(.active),
body.portal-material-surface:has(.day-entry-panel) .calendar .day.preholiday:not(.active) {
  border-color: rgba(138, 180, 248, 0.56) !important;
  background: linear-gradient(145deg, rgba(138, 180, 248, 0.13), transparent 60%), #263242 !important;
  color: #b3cff7 !important;
  box-shadow:
    inset 0 1px 0 rgba(218, 231, 250, 0.1),
    0 5px 13px rgba(4, 8, 14, 0.16) !important;
}

html.dark-theme body.portal-material-surface:has(.day-entry-panel) .calendar .day.active.weekend,
body.portal-material-surface:has(.day-entry-panel) .calendar .day.active.weekend {
  box-shadow:
    inset 0 -3px 0 #f6c35d,
    inset 0 1px 0 rgba(235, 242, 252, 0.2),
    0 8px 20px rgba(67, 111, 177, 0.26) !important;
}

html.dark-theme body.portal-material-surface:has(.day-entry-panel) .calendar .day.active.official-off,
body.portal-material-surface:has(.day-entry-panel) .calendar .day.active.official-off {
  box-shadow:
    inset 0 -3px 0 #ff786f,
    inset 0 1px 0 rgba(235, 242, 252, 0.2),
    0 8px 20px rgba(67, 111, 177, 0.26) !important;
}

html.dark-theme body.portal-material-surface:has(.day-entry-panel) .calendar .day.active.preholiday,
body.portal-material-surface:has(.day-entry-panel) .calendar .day.active.preholiday {
  box-shadow:
    inset 0 -3px 0 #b3cff7,
    inset 0 1px 0 rgba(235, 242, 252, 0.2),
    0 8px 20px rgba(67, 111, 177, 0.26) !important;
}

html.dark-theme body.portal-material-surface:has(.day-entry-panel) .legend-swatch.weekend,
body.portal-material-surface:has(.day-entry-panel) .legend-swatch.weekend {
  border-color: rgba(246, 195, 93, 0.7) !important;
  background: #342f29 !important;
}

html.dark-theme body.portal-material-surface:has(.day-entry-panel) .legend-swatch.official,
body.portal-material-surface:has(.day-entry-panel) .legend-swatch.official {
  border-color: rgba(255, 120, 111, 0.76) !important;
  background: #35272b !important;
}

html.dark-theme body.portal-material-surface:has(.day-entry-panel) .legend-swatch.short,
body.portal-material-surface:has(.day-entry-panel) .legend-swatch.short {
  border-color: rgba(138, 180, 248, 0.76) !important;
  background: #263242 !important;
}

/*
 * Карта проектов — это одно цельное графическое полотно.
 * Универсальные правила материала не должны превращать ее служебные
 * обертки и каждый отдельный диск в самостоятельные прямоугольные карточки.
 */
body.portal-material-surface .project-flower-variant-panel {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.portal-material-surface .project-orbit-card,
body.portal-material-surface .project-orbit-card:hover,
body.portal-material-surface .project-orbit-card:focus-within {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Новая фактура остается только на общей сцене, без видимых стыков. */
body.portal-material-surface :is(.project-orbit-grid, .project-flower-two) {
  border-top-color: rgba(181, 198, 220, 0.2) !important;
  background:
    radial-gradient(circle at 16% 18%, rgba(138, 180, 248, 0.1), transparent 28%),
    radial-gradient(circle at 81% 29%, rgba(123, 155, 197, 0.075), transparent 31%),
    radial-gradient(circle at 54% 88%, rgba(94, 127, 174, 0.075), transparent 30%),
    repeating-linear-gradient(98deg, rgba(220, 229, 240, 0.011) 0 1px, transparent 1px 5px),
    linear-gradient(rgba(181, 198, 220, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(181, 198, 220, 0.024) 1px, transparent 1px),
    #1f242b !important;
  background-size: auto, auto, auto, auto, 54px 54px, 54px 54px, auto !important;
  box-shadow:
    inset 0 24px 60px rgba(3, 7, 13, 0.22),
    inset 0 1px 0 rgba(218, 229, 243, 0.035) !important;
}

/*
 * Этапность разработки портала.
 * Финансовый и юридический контуры остаются доступными, но не конкурируют
 * с текущим фокусом: временем, задачами, проектами и контролем исполнения.
 */
body.portal-material-surface .portal-phase-later {
  opacity: 0.48;
  filter: saturate(0.22);
  transition: opacity 160ms ease, filter 160ms ease, border-color 160ms ease, background 160ms ease;
}

body.portal-material-surface a.portal-phase-later {
  border-color: rgba(181, 198, 220, 0.14) !important;
  background:
    linear-gradient(145deg, rgba(210, 222, 238, 0.018), transparent 58%),
    rgba(28, 31, 36, 0.68) !important;
  color: rgba(213, 219, 227, 0.62) !important;
  box-shadow: none !important;
}

body.portal-material-surface a.portal-phase-later[data-portal-phase="later"]::after {
  margin-left: auto;
  padding: 3px 6px;
  border: 1px solid rgba(181, 198, 220, 0.18);
  border-radius: 999px;
  color: rgba(181, 198, 220, 0.56);
  content: "позже";
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

body.portal-material-surface a.card.portal-phase-later[data-portal-phase="later"]::after {
  justify-self: end;
  margin-left: 0;
}

body.portal-material-surface .metric-row.portal-phase-later strong {
  color: rgba(181, 198, 220, 0.52) !important;
}

body.portal-material-surface a.portal-phase-later:hover,
body.portal-material-surface a.portal-phase-later:focus-visible {
  opacity: 0.82;
  filter: saturate(0.55);
  border-color: rgba(138, 180, 248, 0.34) !important;
  background:
    linear-gradient(145deg, rgba(138, 180, 248, 0.065), transparent 60%),
    rgba(34, 38, 45, 0.82) !important;
  color: rgba(239, 242, 246, 0.82) !important;
}

body.portal-material-surface a.portal-phase-later[aria-current="page"] {
  opacity: 1;
  filter: saturate(0.72);
  border-color: rgba(138, 180, 248, 0.58) !important;
  color: #f1f3f6 !important;
}

/*
 * Единый адаптивный контракт портала.
 * Компонент может менять число колонок, но не имеет права расширять страницу,
 * обрезать смысловой текст или выталкивать окно за границы viewport.
 */
body.portal-material-surface :where(
  .shell,
  .workspace,
  .topbar,
  .toolbar,
  .panel,
  .section,
  .card,
  .summary-card,
  .route-card,
  .metric,
  .stat,
  .form-grid,
  .fields,
  .actions,
  .modal-card,
  [role="dialog"]
) {
  min-inline-size: 0;
  max-inline-size: 100%;
}

body.portal-material-surface :where(
  .topbar,
  .toolbar,
  .panel,
  .section,
  .card,
  .summary-card,
  .route-card,
  .form-grid,
  .fields,
  .actions
) > * {
  min-inline-size: 0;
}

body.portal-material-surface :where(button, .btn, input, select, textarea) {
  min-inline-size: 0;
  max-inline-size: 100%;
}

body.portal-material-surface :where(h1, h2, h3, .subtitle, .hint, .meta, .caption, .field-caption) {
  max-inline-size: 100%;
  overflow-wrap: break-word;
}

body.portal-material-surface :where(.table-wrap, .table-scroll, .data-table-wrap) {
  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

body.portal-material-surface :where(img, svg, canvas) {
  max-inline-size: 100%;
}

@media (max-width: 760px) {
  body.portal-material-surface:has(.modal-backdrop.open) {
    overflow: hidden;
  }

  body.portal-material-surface :where(
    button:not(.day):not([data-day]),
    .btn,
    [role="tab"],
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
  ) {
    min-block-size: 44px !important;
  }

  body.portal-material-surface :where(
    [role="dialog"],
    .modal,
    .dialog,
    .modal-card,
    .pin-dialog,
    .confirm-dialog,
    .feedback-dialog,
    .employee-profile-dialog
  ) {
    max-inline-size: calc(100dvw - 32px);
    max-block-size: calc(100dvh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}