/*
 * Рабочий табель: единый визуальный язык страницы «Данные табелей».
 * Файл подключён последним и меняет только представление, не логику формы.
 */
:root,
:root.dark-theme {
  color-scheme: dark;
  --bg: #202124;
  --panel: #292a2d;
  --ink: #f1f3f4;
  --muted: #9aa0a6;
  --line: rgba(154, 160, 166, 0.28);
  --line-strong: rgba(174, 203, 250, 0.48);
  --focus: #8ab4f8;
  --focus-soft: rgba(138, 180, 248, 0.16);
  --blue: #8ab4f8;
  --blue-soft: rgba(138, 180, 248, 0.16);
  --warn: #f6c35d;
  --warn-soft: rgba(246, 195, 93, 0.14);
  --red: #ff786f;
  --red-soft: rgba(255, 120, 111, 0.14);
  --green: #68c6ae;
  --green-soft: rgba(104, 198, 174, 0.14);
  --purple: #c6a9ff;
  --shadow: 0 26px 78px rgba(0, 0, 0, 0.38);
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
}

html {
  background: #202124;
}

body,
:root.dark-theme body {
  background:
    radial-gradient(circle at 84% -10%, rgba(138, 180, 248, 0.09), transparent 32%),
    linear-gradient(90deg, rgba(154, 160, 166, 0.035) 1px, transparent 1px),
    linear-gradient(rgba(154, 160, 166, 0.03) 1px, transparent 1px),
    #202124 !important;
  background-size: auto, 25vw 100%, 100% 248px, auto !important;
  color: #f1f3f4 !important;
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif !important;
}

body,
button,
input,
select,
textarea {
  font-family: inherit;
}

/* Верхняя часть табеля */
.topbar,
:root.dark-theme .topbar {
  border-bottom: 1px solid rgba(154, 160, 166, 0.22) !important;
  background:
    radial-gradient(ellipse at 12% 8%, rgba(138, 180, 248, 0.16), transparent 32%),
    linear-gradient(168deg, rgba(48, 49, 52, 0.98), rgba(28, 30, 34, 0.98) 56%, rgba(24, 26, 30, 0.99)) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.24) !important;
}

.topbar-inner {
  max-width: none !important;
  padding-inline: clamp(18px, 3.2vw, 54px) !important;
}

.brand-mark {
  filter: drop-shadow(0 0 18px rgba(138, 180, 248, 0.18));
}

.brand-kicker,
.subtitle,
.field-caption,
.overview-card-label,
.overview-card-subtitle,
.calendar-note,
.support-footer-text {
  color: #9aa0a6 !important;
}

.brand-home:hover h1 {
  color: #aecbfa !important;
}

.theme-toggle,
.master-toggle,
:root.dark-theme .theme-toggle,
:root.dark-theme .master-toggle {
  border-color: rgba(154, 160, 166, 0.34) !important;
  background: linear-gradient(135deg, #303134, #292a2d) !important;
  color: #f1f3f4 !important;
  box-shadow: none !important;
}

.theme-toggle:hover,
.master-toggle:hover,
:root.dark-theme .theme-toggle:hover,
:root.dark-theme .master-toggle:hover {
  border-color: rgba(138, 180, 248, 0.7) !important;
  background: linear-gradient(135deg, rgba(138, 180, 248, 0.16), #303134) !important;
  color: #ffffff !important;
}

main {
  max-width: none !important;
  width: 100% !important;
  padding-inline: clamp(12px, 1.5vw, 24px) !important;
}

/* Каркас, панели и блоки */
.panel,
.section,
.day-access-block,
.day-work-block,
.calendar-grid-block,
.calendar-info-block,
:root.dark-theme .panel,
:root.dark-theme .section,
:root.dark-theme .day-access-block,
:root.dark-theme .day-work-block,
:root.dark-theme .calendar-grid-block,
:root.dark-theme .calendar-info-block {
  border-color: rgba(154, 160, 166, 0.28) !important;
  background: rgba(41, 42, 45, 0.95) !important;
  color: #f1f3f4 !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28) !important;
}

.panel,
.section {
  border-radius: 10px !important;
}

.panel-header,
:root.dark-theme .panel-header {
  border-bottom-color: rgba(154, 160, 166, 0.24) !important;
  background: rgba(48, 49, 52, 0.58) !important;
}

.panel-title,
:root.dark-theme .panel-title,
label,
.product-code-title {
  color: #f1f3f4 !important;
}

.field-group,
.field-group.project-group,
.field-group.work-group,
.field-group.time-group,
:root.dark-theme .field-group,
:root.dark-theme .field-group.project-group,
:root.dark-theme .field-group.work-group,
:root.dark-theme .field-group.time-group {
  border-color: rgba(154, 160, 166, 0.25) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.025), transparent 62%),
    #292a2d !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

.field-group:hover {
  border-color: rgba(138, 180, 248, 0.32) !important;
}

.day-context,
:root.dark-theme .day-context {
  border-color: rgba(154, 160, 166, 0.28) !important;
  background:
    radial-gradient(circle at 87% -12%, rgba(138, 180, 248, 0.1), transparent 38%),
    linear-gradient(145deg, #303134, #292a2d 72%) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28) !important;
}

.day-context-employee {
  color: #f1f3f4 !important;
}

.day-context-chip,
:root.dark-theme .day-context-chip {
  border-color: rgba(138, 180, 248, 0.25) !important;
  background: rgba(32, 33, 36, 0.82) !important;
  color: #dfe7f3 !important;
}

.overview-card,
:root.dark-theme .overview-card {
  border-color: rgba(154, 160, 166, 0.3) !important;
  background:
    linear-gradient(145deg, rgba(138, 180, 248, 0.06), transparent 58%),
    #292a2d !important;
  color: #f1f3f4 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025), 0 12px 28px rgba(0, 0, 0, 0.2) !important;
}

.overview-card:hover,
.overview-profile-button:hover {
  border-color: rgba(138, 180, 248, 0.66) !important;
  background:
    linear-gradient(145deg, rgba(138, 180, 248, 0.14), transparent 62%),
    #303134 !important;
}

.overview-profile-title,
.overview-date-main,
.overview-date-year {
  color: #f1f3f4 !important;
}

.overview-date-status,
.overview-card--profile .overview-card-label {
  color: #aecbfa !important;
}

/* Поля и кнопки — та же форма, что на странице «Данные табелей». */
select,
input[type="number"],
input[type="tel"],
input[type="text"],
textarea,
.custom-select-button,
.employee-search-input,
.employee-message-reply-input,
.employee-message-modal-reply-input,
:root.dark-theme select,
:root.dark-theme input[type="number"],
:root.dark-theme input[type="tel"],
:root.dark-theme input[type="text"],
:root.dark-theme textarea,
:root.dark-theme .custom-select-button,
:root.dark-theme .employee-search-input,
:root.dark-theme .employee-message-reply-input,
:root.dark-theme .employee-message-modal-reply-input {
  border: 1px solid rgba(154, 160, 166, 0.34) !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #303134, #292a2d) !important;
  color: #f1f3f4 !important;
  box-shadow: none !important;
}

input::placeholder,
textarea::placeholder,
:root.dark-theme input::placeholder,
:root.dark-theme textarea::placeholder {
  color: #80868b !important;
}

.custom-select-button::after,
:root.dark-theme .custom-select-button::after {
  border-color: #aecbfa !important;
  color: #aecbfa !important;
}

.custom-select-button:hover,
.custom-select.open .custom-select-button,
input:focus,
select:focus,
textarea:focus,
:root.dark-theme .custom-select-button:hover,
:root.dark-theme .custom-select.open .custom-select-button,
:root.dark-theme input:focus,
:root.dark-theme select:focus,
:root.dark-theme textarea:focus {
  outline: none !important;
  border-color: #8ab4f8 !important;
  background: linear-gradient(135deg, #35383d, #303134) !important;
  box-shadow: 0 0 0 3px rgba(138, 180, 248, 0.18) !important;
}

.custom-select.disabled .custom-select-button,
input:disabled,
select:disabled,
textarea:disabled,
:root.dark-theme .custom-select.disabled .custom-select-button,
:root.dark-theme input:disabled,
:root.dark-theme select:disabled,
:root.dark-theme textarea:disabled {
  border-color: rgba(154, 160, 166, 0.18) !important;
  background: #252629 !important;
  color: #70757a !important;
  opacity: 0.72;
}

.btn,
.mobile-calendar-toggle,
.multi-date-toggle,
.multi-date-clear,
.status-remainder-btn,
.feedback-category,
.feedback-file-button,
.employee-profile-close,
.confirm-actions button,
:root.dark-theme .btn {
  border-color: rgba(154, 160, 166, 0.3) !important;
  background: linear-gradient(135deg, #303134, #292a2d) !important;
  color: #f1f3f4 !important;
  box-shadow: none !important;
}

.btn:hover,
.mobile-calendar-toggle:hover,
.multi-date-toggle:hover,
.multi-date-clear:hover,
.status-remainder-btn:hover,
.feedback-category:hover,
.feedback-file-button:hover,
.employee-profile-close:hover {
  border-color: rgba(138, 180, 248, 0.7) !important;
  background: linear-gradient(135deg, rgba(138, 180, 248, 0.16), #303134) !important;
  color: #ffffff !important;
}

.btn.primary,
.feedback-category.active,
.status-remainder-btn:active,
:root.dark-theme .btn.primary {
  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;
}

.btn.primary:disabled,
:root.dark-theme .btn.primary:disabled {
  border-color: rgba(154, 160, 166, 0.22) !important;
  background: #292a2d !important;
  color: #70757a !important;
  box-shadow: none !important;
}

.pin-lock-notice,
.save-action-dock,
.day-actions,
.status-accounting-panel,
:root.dark-theme .pin-lock-notice,
:root.dark-theme .save-action-dock,
:root.dark-theme .day-actions,
:root.dark-theme .status-accounting-panel {
  border-color: rgba(154, 160, 166, 0.28) !important;
  background: rgba(41, 42, 45, 0.96) !important;
  color: #dfe7f3 !important;
}

.pin-lock-notice::before {
  background: #8ab4f8 !important;
  box-shadow: 0 0 0 5px rgba(138, 180, 248, 0.12) !important;
}

/* Календарь */
.calendar .day,
:root.dark-theme .calendar .day,
:root.dark-theme .day {
  border-color: rgba(154, 160, 166, 0.28) !important;
  background: #303134 !important;
  color: #f1f3f4 !important;
  box-shadow: none !important;
}

.calendar .day:hover,
:root.dark-theme .calendar .day:hover,
:root.dark-theme .day:hover {
  border-color: rgba(138, 180, 248, 0.7) !important;
  background: rgba(138, 180, 248, 0.16) !important;
}

.calendar .day.active,
:root.dark-theme .calendar .day.active,
:root.dark-theme .day.active {
  border-color: #8ab4f8 !important;
  background: #5679ad !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(67, 111, 177, 0.26) !important;
}

.calendar .day.weekend,
.calendar .day.official-off {
  background: #2b2c2f !important;
}

.calendar .day.future {
  color: #70757a !important;
  opacity: 0.72;
}

.multi-date-toggle,
.multi-date-clear,
.legend-item,
:root.dark-theme .legend-item,
:root.dark-theme .multi-date-clear {
  border-color: rgba(154, 160, 166, 0.24) !important;
  background: #303134 !important;
  color: #dfe7f3 !important;
}

/* Все контекстные меню табеля. Раскладка каждого меню сохранена. */
.custom-select-menu,
:root.dark-theme .custom-select-menu,
.custom-select .custom-select-menu.drum-menu,
:root.dark-theme .custom-select .custom-select-menu.drum-menu {
  border: 1px solid rgba(138, 180, 248, 0.38) !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, #303134 0%, #202124 100%) !important;
  color: #f1f3f4 !important;
  box-shadow:
    0 28px 68px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
  backdrop-filter: blur(18px);
}

.custom-option,
.custom-select .drum-option,
:root.dark-theme .custom-option,
:root.dark-theme .custom-select .drum-option {
  border-color: rgba(154, 160, 166, 0.28) !important;
  border-radius: 8px !important;
  background: #303134 !important;
  color: #e8eaed !important;
  box-shadow: none !important;
}

.custom-option:hover,
.custom-option:focus-visible,
.custom-select .drum-option:hover,
:root.dark-theme .custom-option:hover,
:root.dark-theme .custom-select .drum-option:hover {
  outline: none !important;
  border-color: rgba(138, 180, 248, 0.6) !important;
  background: rgba(138, 180, 248, 0.15) !important;
  color: #ffffff !important;
}

.custom-option.selected,
.custom-option[aria-selected="true"],
.custom-select .drum-option.selected,
.custom-select .drum-option.drum-center,
:root.dark-theme .custom-option.selected,
:root.dark-theme .custom-select .drum-option.selected,
:root.dark-theme .custom-select .drum-option.drum-center {
  border-color: #8ab4f8 !important;
  background: #5679ad !important;
  color: #ffffff !important;
  font-weight: 850 !important;
  box-shadow: inset 3px 0 0 #aecbfa !important;
}

.custom-option.placeholder,
.custom-option.placeholder.selected,
.employee-search-row,
:root.dark-theme .custom-option.placeholder,
:root.dark-theme .custom-option.placeholder.selected,
:root.dark-theme .employee-search-row {
  border-color: rgba(154, 160, 166, 0.22) !important;
  background: #252629 !important;
  color: #9aa0a6 !important;
}

.custom-option.placeholder:hover,
.custom-option.placeholder.selected:hover {
  border-color: rgba(138, 180, 248, 0.48) !important;
  background: rgba(138, 180, 248, 0.12) !important;
  color: #dfe7f3 !important;
}

.custom-menu-label {
  color: inherit !important;
}

.tariff-code,
.work-type-code,
.product-code-title {
  border-color: rgba(138, 180, 248, 0.24) !important;
  color: #aecbfa !important;
}

.tariff-name,
.work-type-name {
  color: inherit !important;
}

/* Диалоговые окна, личная карточка, сообщения, PIN и обратная связь. */
.pin-modal,
.confirm-modal,
.feedback-modal,
.employee-message-modal,
.employee-profile-modal,
:root.dark-theme .pin-modal,
:root.dark-theme .confirm-modal,
:root.dark-theme .feedback-modal,
:root.dark-theme .employee-message-modal,
:root.dark-theme .employee-profile-modal {
  background: rgba(16, 17, 20, 0.84) !important;
  backdrop-filter: blur(10px);
}

.pin-dialog,
.confirm-dialog,
.feedback-dialog,
.employee-message-dialog,
.employee-profile-dialog,
:root.dark-theme .pin-dialog,
:root.dark-theme .confirm-dialog,
:root.dark-theme .feedback-dialog,
:root.dark-theme .employee-message-dialog,
:root.dark-theme .employee-profile-dialog {
  border-color: rgba(138, 180, 248, 0.38) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 58%),
    #292a2d !important;
  color: #f1f3f4 !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.56) !important;
}

.employee-profile-head,
.employee-message-dialog-head,
.employee-profile-section,
.employee-profile-person,
.feedback-context,
.feedback-selected,
.employee-message-modal-list,
:root.dark-theme .employee-profile-head,
:root.dark-theme .employee-message-dialog-head,
:root.dark-theme .employee-profile-section,
:root.dark-theme .employee-profile-person,
:root.dark-theme .feedback-context,
:root.dark-theme .feedback-selected,
:root.dark-theme .employee-message-modal-list {
  border-color: rgba(154, 160, 166, 0.26) !important;
  background: #303134 !important;
  color: #e8eaed !important;
}

.employee-profile-kicker,
.employee-profile-section-title,
.employee-profile-department,
.feedback-field-title {
  color: #aecbfa !important;
}

.pin-key,
.pin-backspace,
.pin-register-key,
:root.dark-theme .pin-key,
:root.dark-theme .pin-backspace,
:root.dark-theme .pin-register-key {
  border-color: rgba(154, 160, 166, 0.3) !important;
  background: #303134 !important;
  color: #f1f3f4 !important;
}

.pin-key:hover,
.pin-backspace:hover,
.pin-register-key:hover {
  border-color: #8ab4f8 !important;
  background: rgba(138, 180, 248, 0.16) !important;
}

.feedback-fab,
.employee-message-modal-reply-btn,
:root.dark-theme .feedback-fab,
:root.dark-theme .employee-message-modal-reply-btn {
  border-color: #8ab4f8 !important;
  background: linear-gradient(135deg, #7899ca, #a4c2f4) !important;
  color: #17191d !important;
  box-shadow: 0 12px 30px rgba(80, 123, 185, 0.28) !important;
}

.support-footer,
:root.dark-theme .support-footer {
  border-top-color: rgba(154, 160, 166, 0.22) !important;
  background: rgba(32, 33, 36, 0.9) !important;
}

.support-footer a {
  color: #aecbfa !important;
}

/* Локальная плашка тоже относится к тому же визуальному контуру. */
#portalLocalEnvironment {
  border-color: rgba(138, 180, 248, 0.38) !important;
  background: rgba(32, 33, 36, 0.96) !important;
  color: #f1f3f4 !important;
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.38) !important;
}

#portalLocalEnvironment span {
  color: #aecbfa !important;
}

#portalLocalEnvironment .portal-environment-return {
  border-color: rgba(138, 180, 248, 0.46) !important;
  background: rgba(138, 180, 248, 0.12) !important;
}

#portalLocalEnvironment .portal-environment-return:hover {
  background: rgba(138, 180, 248, 0.22) !important;
}

* {
  scrollbar-color: rgba(138, 180, 248, 0.48) #292a2d;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: #292a2d;
}

*::-webkit-scrollbar-thumb {
  border: 2px solid #292a2d;
  border-radius: 999px;
  background: rgba(138, 180, 248, 0.48);
}

@media (max-width: 760px) {
  .topbar-inner {
    padding-inline: 14px !important;
  }

  .custom-select-menu,
  :root.dark-theme .custom-select-menu {
    border-radius: 12px 12px 0 0 !important;
    background: linear-gradient(160deg, #303134, #202124) !important;
  }

  #portalLocalEnvironment {
    border-radius: 8px !important;
  }
}

@media print {
  body,
  :root.dark-theme body {
    background: #ffffff !important;
    color: #111111 !important;
  }
}