/* ==========================================================================
   jetlag.help — HelpDeskEddy custom stylesheet  (generated 2026-10-19)
   DO NOT EDIT HERE: edit design/*.css and run  python design/build.py
   Layers: theme-light.css, tokens.css, polish-base.css, screens.css
   ========================================================================== */

/* ---------------- layer: theme-light.css ---------------- */
/* ==========================================================================
   jetlag.help — custom theme for HelpDeskEddy
   Paste into: Управление → Глобальные настройки → Внешний вид → CSS-редактор
   Source of truth: this file in git. After every Eddy update, re-check the
   sections marked [fragile] — they target vendor classes, not the theme API.

   Direction: "calm workspace" — slate neutrals, the conversation canvas is the
   brightest surface, side panels recede, ONE accent (blue) for actions/focus,
   colour otherwise only carries meaning (who wrote it, urgency, internal note).
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  --jl-navy-900: #0f172a;   /* slate-900: left menu */
  --jl-navy-800: #1e293b;
  --jl-navy-700: #334155;
  --jl-navy-500: #64748b;

  --jl-accent:        #2563eb;   /* blue-600: primary actions, focus, active */
  --jl-accent-hover:  #1d4ed8;
  --jl-accent-soft:   #eff6ff;

  --jl-surface:       #f8fafc;   /* side panels / page */
  --jl-card:          #ffffff;   /* conversation canvas, list */
  --jl-border:        #e2e8f0;
  --jl-text:          #1e293b;
  --jl-text-muted:    #64748b;

  --jl-client-bubble: #f1f5f9;   /* client: soft grey on the white canvas */
  --jl-staff-bubble:  #eff6ff;   /* a colleague's reply: light blue, "our side" */
  --jl-own-bubble:    #2563eb;   /* my reply: solid blue, white text */
  --jl-note-bubble:   #fffbeb;   /* internal note — must never look like a reply */
  --jl-note-border:   #f59e0b;

  --jl-radius-sm: 6px;
  --jl-radius:    10px;
  --jl-radius-lg: 14px;
  --jl-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --jl-shadow:    0 4px 12px -2px rgba(15, 23, 42, .08);
  --jl-shadow-lg: 0 16px 40px -8px rgba(15, 23, 42, .18);
  --jl-focus:     0 0 0 3px rgba(37, 99, 235, .28);
  --jl-ease:      cubic-bezier(.2, .7, .2, 1);
}


/* --------------------------------------------------------------------------
   2. Vendor theme API (stable): variables declared by css/theme.css.
      NOTE: these override the colour tabs in "Внешний вид" — pick one place.
   -------------------------------------------------------------------------- */
:root {
  /* left menu */
  --menu-background:               var(--jl-navy-900);
  --menu-item-background:          var(--jl-navy-900);
  --menu-item-color:               #cbd5e1;
  --menu-item-background-hover:    var(--jl-navy-800);
  --menu-item-color-hover:         #ffffff;

  /* conversation: client grey · colleague light blue · me solid blue · note amber */
  --ticket-user-post-background:        var(--jl-client-bubble);
  --ticket-user-post-color:             var(--jl-text);
  --ticket-user-href-color:             #1d4ed8;
  --ticket-user-href-hover:             #1e40af;
  --ticket-staff-post-background:       var(--jl-staff-bubble);
  --ticket-staff-post-color:            #1e293b;
  --ticket-staff-href-color:            #1d4ed8;   /* also used by my replies — overridden in screens.css */
  --ticket-staff-href-hover:            #1e40af;
  --ticket-staff-own-post-background:   var(--jl-own-bubble);
  --ticket-staff-own-post-color:        #ffffff;
  --ticket-staff-comment-background:    var(--jl-note-bubble);
  --ticket-staff-comment-color:         #78350f;
  --ticket-staff-comment-href-color:    #b45309;
  --ticket-staff-comment-href-hover:    #92400e;
  --ticket-staff-own-comment-background: var(--jl-note-bubble);
  --ticket-staff-own-comment-color:     #78350f;

  /* editor tabs: reply vs internal comment */
  --ticket-post-input-background:    #ffffff;
  --ticket-post-input-color:         var(--jl-text);
  --ticket-comment-input-background: var(--jl-note-bubble);
  --ticket-comment-input-color:      #78350f;

  /* buttons inside a ticket */
  --ticket-primary-button-background:       var(--jl-accent);
  --ticket-primary-button-background-hover: var(--jl-accent-hover);
  --ticket-primary-button-color:            #ffffff;
  --ticket-primary-button-color-hover:      #ffffff;
  --ticket-secondary-button-background:       #ffffff;
  --ticket-secondary-button-background-hover: var(--jl-accent-soft);
  --ticket-secondary-button-color:            var(--jl-text);
  --ticket-secondary-button-color-hover:      var(--jl-accent);
}


/* --------------------------------------------------------------------------
   3. Element UI 2.x components (fairly stable across Eddy updates)
   -------------------------------------------------------------------------- */

/* Buttons: same accent everywhere, not only inside tickets */
.el-button {
  border-radius: var(--jl-radius-sm);
  font-weight: 500;
  transition: background-color .15s var(--jl-ease), border-color .15s var(--jl-ease),
              box-shadow .15s var(--jl-ease), transform .1s var(--jl-ease);
}
.el-button:active { transform: translateY(1px); }
.el-button--primary {
  background-color: var(--jl-accent);
  border-color: var(--jl-accent);
}
.el-button--primary:hover,
.el-button--primary:focus {
  background-color: var(--jl-accent-hover);
  border-color: var(--jl-accent-hover);
}

/* Inputs: softer corners, visible accent focus */
.el-input__inner,
.el-textarea__inner,
.el-select .el-input__inner {
  border-radius: var(--jl-radius-sm);
  border-color: var(--jl-border);
  transition: border-color .15s var(--jl-ease), box-shadow .15s var(--jl-ease);
}
.el-input__inner:focus,
.el-textarea__inner:focus,
.el-select .el-input.is-focus .el-input__inner {
  border-color: var(--jl-accent);
  box-shadow: var(--jl-focus);
}

/* Checkboxes, radios, switches, tabs, pagination: one accent colour */
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner,
.el-radio__input.is-checked .el-radio__inner {
  background-color: var(--jl-accent);
  border-color: var(--jl-accent);
}
.el-checkbox__input.is-checked + .el-checkbox__label,
.el-radio__input.is-checked + .el-radio__label { color: var(--jl-accent); }
.el-switch.is-checked .el-switch__core {
  background-color: var(--jl-accent);
  border-color: var(--jl-accent);
}
.el-tabs__active-bar { background-color: var(--jl-accent); height: 3px; border-radius: 3px; }
.el-tabs__item.is-active,
.el-tabs__item:hover { color: var(--jl-accent); }
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: var(--jl-accent);
  border-radius: var(--jl-radius-sm);
}

/* Tables (ticket list etc.): calmer header, clear hover, more breathing room */
.el-table {
  color: var(--jl-text);
  border-radius: var(--jl-radius);
}
.el-table th.el-table__cell,
.el-table th {
  background-color: #f9fafc;
  color: var(--jl-text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.el-table td.el-table__cell,
.el-table td { padding: 10px 0; }
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell,
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: var(--jl-accent-soft);
}

/* Tags and badges */
.el-tag { border-radius: 999px; font-weight: 500; }
.el-badge__content { border: none; font-weight: 600; }

/* Dialogs, dropdowns, popovers: real depth instead of flat borders */
.el-dialog {
  border-radius: var(--jl-radius-lg);
  box-shadow: var(--jl-shadow-lg);
  overflow: hidden;
}
.el-dropdown-menu,
.el-select-dropdown,
.el-popover,
.el-picker-panel {
  border: 1px solid var(--jl-border);
  border-radius: var(--jl-radius);
  box-shadow: var(--jl-shadow);
}
.el-dropdown-menu__item:hover,
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background-color: var(--jl-accent-soft);
  color: var(--jl-accent);
}
.el-select-dropdown__item.selected { color: var(--jl-accent); }

/* Toast notifications */
.el-message,
.el-notification {
  border-radius: var(--jl-radius);
  box-shadow: var(--jl-shadow-lg);
}


/* --------------------------------------------------------------------------
   4. Eddy-specific layout  [fragile — re-check after updates]
   -------------------------------------------------------------------------- */

/* Left menu: active item gets an accent bar instead of just a darker fill */
.menu .menu__item {
  position: relative;
  transition: background-color .15s var(--jl-ease), color .15s var(--jl-ease);
}
.menu .menu__item.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--jl-accent);
}
.menu .menu__item.is-active .menu__item-icon { color: var(--jl-accent); }

/* Conversation: chat-like bubbles, better readability */
#ticket-app .ticket [class*="ticket-conversation__message-text_"] {
  border-radius: var(--jl-radius-lg);
  box-shadow: var(--jl-shadow-sm);
  line-height: 1.55;
}
/* Internal comments: dashed amber edge so nobody mistakes them for a public reply */
#ticket-app .ticket .ticket-conversation__message-text_comment,
#ticket-app .ticket .ticket-conversation__message-text_comment-own {
  border: 1px dashed var(--jl-note-border);
}

/* Editors: rounded, focus ring matches inputs */
.ticket-editor__ckeditor .ck-content,
.ticket-editor__ckeditor_comment .ck-content {
  border-radius: 0 0 var(--jl-radius) var(--jl-radius) !important;
  min-height: 120px;
}
.ticket-editor__ckeditor .ck-content.ck-focused { box-shadow: var(--jl-focus) !important; }

/* Ticket sidebar filters: readable names, clear hover */
.ticket-sidebar__filter-name {
  border-radius: var(--jl-radius-sm);
  transition: background-color .15s var(--jl-ease);
}
.ticket-sidebar__filter-name:hover { background-color: var(--jl-accent-soft); }


/* --------------------------------------------------------------------------
   5. Global polish
   -------------------------------------------------------------------------- */

/* Thin, unobtrusive scrollbars */
* { scrollbar-width: thin; scrollbar-color: #c3cad8 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: #c3cad8;
  border-radius: 10px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: #9aa4b8; }

/* Keyboard users always see where they are */
:focus-visible { outline: 2px solid var(--jl-accent); outline-offset: 2px; }

/* Text selection in brand colour */
::selection { background: rgba(37, 99, 235, .22); }

/* Respect users who disabled animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------------- layer: tokens.css ---------------- */
/* ==========================================================================
   Semantic UI tokens — LIGHT theme ("calm workspace", slate + blue).
   Layers (polish-base.css, screens.css) use only --ui-* tokens, so the dark
   theme just remaps them (plugins/theme/engine.html, html[data-jl-theme=dark]).

   Surface hierarchy (most important = brightest):
     canvas  — conversation & ticket list, where the work happens
     panel   — side panels (filters, client, fields): recede, no card borders
     raised  — inputs, chips, table header inside a surface
   ========================================================================== */
:root {
  --ui-canvas:       #ffffff;
  --ui-panel:        #f8fafc;   /* slate-50 */
  --ui-page:         #f8fafc;
  --ui-card:         #ffffff;
  --ui-raised:       #f1f5f9;   /* slate-100 */
  --ui-hover:        #f1f5f9;
  --ui-line:         #e2e8f0;   /* slate-200 */
  --ui-line-strong:  #cbd5e1;   /* slate-300 */

  /* ink (contrast on white: 15.4 / 7.6 / 4.8) */
  --ui-ink:          #0f172a;
  --ui-ink-2:        #475569;
  --ui-ink-3:        #64748b;

  /* the one accent: actions, focus, active, unread */
  --ui-accent:       #2563eb;
  --ui-accent-hover: #1d4ed8;
  --ui-accent-ink:   #ffffff;
  --ui-accent-soft:  #eff6ff;
  --ui-accent-glow:  rgba(37, 99, 235, .30);

  /* meaning only */
  --ui-danger:       #dc2626;
  --ui-danger-soft:  #fef2f2;
  --ui-warn:         #b45309;   /* amber-700: readable as text on white */
  --ui-warn-soft:    #fffbeb;
  --ui-ok:           #15803d;
  --ui-ok-soft:      #f0fdf4;
  --ui-info:         #2563eb;
  --ui-info-soft:    #eff6ff;

  /* internal notes */
  --ui-note:         #fffbeb;
  --ui-note-line:    #f59e0b;
  --ui-note-ink:     #78350f;

  /* depth — subtle, slate-tinted */
  --ui-shadow-sm:    0 1px 2px rgba(15, 23, 42, .05);
  --ui-shadow:       0 4px 12px -2px rgba(15, 23, 42, .08), 0 1px 3px rgba(15, 23, 42, .05);
  --ui-shadow-lg:    0 16px 40px -8px rgba(15, 23, 42, .18), 0 4px 10px -4px rgba(15, 23, 42, .08);
  --ui-focus:        0 0 0 3px rgba(37, 99, 235, .28);
}

/* ---------------- layer: polish-base.css ---------------- */
/* ==========================================================================
   jetlag.help — polish layer, BASE (theme-agnostic, DOM-independent)
   Built into custom/custom.css by design/build.py. Uses only:
     - typography on the app roots,
     - Element UI 2.x (el-*) and Element Plus (el-plus-*) components,
     - motion primitives.
   Colours come from semantic tokens (--ui-*, defined per theme in design/tokens.css and the dark engine), so the same rules work in
   light (custom.css) and dark (plugin) themes.
   ========================================================================== */

:root {
  /* Type scale: one step up from Eddy's 12–13px, tighter hierarchy */
  --jl-font-ui: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
                BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --jl-font-mono: "JetBrains Mono", "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  --jl-fs-xs: 12px;
  --jl-fs-sm: 13px;
  --jl-fs-md: 14px;
  --jl-fs-lg: 16px;
  --jl-fs-xl: 20px;
  --jl-lh: 1.5;

  /* Spacing rhythm (4px grid) */
  --jl-sp-1: 4px;
  --jl-sp-2: 8px;
  --jl-sp-3: 12px;
  --jl-sp-4: 16px;
  --jl-sp-6: 24px;

  /* Motion */
  --jl-dur-fast: 120ms;
  --jl-dur: 180ms;
  --jl-dur-slow: 260ms;
  --jl-ease-out: cubic-bezier(.2, .8, .2, 1);
  --jl-ease-spring: cubic-bezier(.34, 1.4, .64, 1);
}

/* ---------- 1. Typography ---------- */
body,
#app,
#ticket-app,
#hde-menu-app,
.el-button, .el-input__inner, .el-textarea__inner, .el-select-dropdown__item,
.el-dropdown-menu__item, .el-table, .el-tabs__item, .el-dialog,
[class*="el-plus-"] {
  font-family: var(--jl-font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Numbers that are compared at a glance (ids, counters, times) line up */
.el-table td, .el-badge__content, .el-pagination, [class*="__count"] {
  font-variant-numeric: tabular-nums;
}
code, pre, kbd, samp { font-family: var(--jl-font-mono); }

/* ---------- 2. Buttons ---------- */
.el-button {
  border-radius: 8px;
  font-weight: 550;
  letter-spacing: .005em;
  transition: background-color var(--jl-dur) var(--jl-ease-out),
              border-color var(--jl-dur) var(--jl-ease-out),
              color var(--jl-dur) var(--jl-ease-out),
              box-shadow var(--jl-dur) var(--jl-ease-out),
              transform var(--jl-dur-fast) var(--jl-ease-out);
}
.el-button:not(.is-disabled):not(.el-button--text):hover { transform: translateY(-1px); }
.el-button:not(.is-disabled):active { transform: translateY(0) scale(.98); }
.el-button--primary:not(.is-disabled) {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 4px 12px -4px var(--ui-accent-glow);
}
.el-button--primary:not(.is-disabled):hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .14), 0 8px 18px -6px var(--ui-accent-glow);
}
.el-button.is-circle { border-radius: 999px; }

/* ---------- 3. Inputs ---------- */
.el-input__inner,
.el-textarea__inner,
.el-plus-input__wrapper,
.el-plus-select__wrapper,
.el-plus-textarea__inner {
  border-radius: 8px;
  transition: border-color var(--jl-dur) var(--jl-ease-out), box-shadow var(--jl-dur) var(--jl-ease-out),
              background-color var(--jl-dur) var(--jl-ease-out);
}
.el-input__inner:hover,
.el-textarea__inner:hover { border-color: var(--ui-line-strong); }
.el-plus-input__wrapper.is-focus,
.el-plus-select__wrapper.is-focused { box-shadow: 0 0 0 1px var(--ui-accent) inset, var(--ui-focus) !important; }

/* ---------- 4. Floating layers: dropdowns, popovers, tooltips ---------- */
.el-select-dropdown,
.el-dropdown-menu,
.el-popover,
.el-picker-panel,
.el-autocomplete-suggestion,
.el-plus-popper.is-light,
.el-plus-select__popper,
.el-plus-dropdown__popper {
  border-radius: 12px !important;
  box-shadow: var(--ui-shadow-lg) !important;
  overflow: hidden;
}
.el-select-dropdown__item,
.el-dropdown-menu__item,
.el-plus-select-dropdown__item,
.el-plus-dropdown-menu__item {
  border-radius: 6px;
  margin: 0 var(--jl-sp-1);
  transition: background-color var(--jl-dur-fast) var(--jl-ease-out), color var(--jl-dur-fast) var(--jl-ease-out);
}
.el-tooltip__popper.is-dark,
.el-plus-popper.is-dark {
  border-radius: 8px !important;
  padding: 6px 10px !important;
  font-size: var(--jl-fs-xs) !important;
  font-weight: 500;
  box-shadow: var(--ui-shadow) !important;
}

/* Entrance motion for floating layers (Element's own transition classes) */
.el-zoom-in-top-enter-active,
.el-zoom-in-bottom-enter-active {
  transition: opacity var(--jl-dur) var(--jl-ease-out), transform var(--jl-dur) var(--jl-ease-spring) !important;
}
.el-zoom-in-top-enter,
.el-zoom-in-bottom-enter { opacity: 0 !important; transform: scale(.96) translateY(-4px) !important; }

/* ---------- 5. Dialogs & drawers ---------- */
.el-dialog,
.el-message-box,
.el-plus-dialog,
.el-plus-message-box {
  border-radius: 16px !important;
  box-shadow: 0 24px 64px -12px rgba(0, 0, 0, .35) !important;
  overflow: hidden;
}
.el-dialog__header, .el-plus-dialog__header { padding: 20px 24px 8px !important; }
.el-dialog__title, .el-plus-dialog__title { font-size: var(--jl-fs-lg) !important; font-weight: 650; letter-spacing: -.01em; }
.el-dialog__body, .el-plus-dialog__body { padding: 12px 24px 20px !important; }
.v-modal, .el-plus-overlay { backdrop-filter: blur(3px); }
.dialog-fade-enter-active .el-dialog,
.el-plus-dialog-fade-enter-active .el-plus-dialog {
  animation: jl-dialog-in var(--jl-dur-slow) var(--jl-ease-spring) both;
}
@keyframes jl-dialog-in {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 6. Tags, badges, switches ---------- */
.el-tag, .el-plus-tag {
  border-radius: 999px !important;
  font-weight: 550;
  letter-spacing: .01em;
}
.el-badge__content {
  border: 0 !important;
  font-weight: 650;
  box-shadow: 0 0 0 2px var(--ui-card);
}
.el-switch__core, .el-plus-switch__core { transition: background-color var(--jl-dur) var(--jl-ease-out) !important; }
.el-switch__core::after, .el-plus-switch__action { transition: all var(--jl-dur) var(--jl-ease-spring) !important; }

/* ---------- 7. Tables ---------- */
.el-table, .el-plus-table { border-radius: 12px; overflow: hidden; }
.el-table__body tr, .el-plus-table__body tr { transition: background-color var(--jl-dur-fast) var(--jl-ease-out); }
.el-table td, .el-plus-table__cell { transition: background-color var(--jl-dur-fast) var(--jl-ease-out); }

/* ---------- 8. Toasts ---------- */
.el-message, .el-notification, .el-plus-message, .el-plus-notification {
  border-radius: 12px !important;
  box-shadow: var(--ui-shadow-lg) !important;
  backdrop-filter: saturate(140%) blur(8px);
}
.el-notification.right, .el-plus-notification.right { animation: jl-slide-in var(--jl-dur-slow) var(--jl-ease-spring) both; }
@keyframes jl-slide-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 9. Loading ---------- */
.el-loading-spinner .path { stroke: var(--ui-accent) !important; }
.el-loading-mask { backdrop-filter: blur(1px); transition: opacity var(--jl-dur) var(--jl-ease-out); }

/* ---------- 10. Focus ---------- */
:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; border-radius: 6px; }
.el-button:focus-visible, .el-input__inner:focus-visible { outline: none; box-shadow: var(--ui-focus); }

/* ---------- 11. Motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .el-button:hover, .el-button:active { transform: none !important; }
}

/* ---------------- layer: screens.css ---------------- */
/* ==========================================================================
   jetlag.help — polish layer, SCREENS (Eddy 4.3 agent UI)
   Selectors come from research/ui-map.md (bundle analysis). Everything here
   targets vendor markup → re-check after every Eddy update.
   Uses only --ui-* tokens (light: design/tokens.css, dark: theme engine).
   ========================================================================== */


/* ======================= 0. Typography ======================= */
/* Vendor ships Inter (css/main.css) but the ticket SPA forces Helvetica with
   !important on #ticket-app, and the menu bundle sets a bare
   "button,div,span,p{font-family:…}" that blocks inheritance everywhere. */
html body #ticket-app,
html body #hde-menu-app { font-family: var(--jl-font-ui) !important; }
body :is(button, div, span, p, a, td, th, li, label, input, textarea, h1, h2, h3, h4) {
  font-family: var(--jl-font-ui);
}
#ticket-app { letter-spacing: -.003em; }


/* ======================= 1. Left menu ======================= */
#hde-menu-app .menu__item {
  transition: background-color var(--jl-dur) var(--jl-ease-out), color var(--jl-dur) var(--jl-ease-out);
}
#hde-menu-app .menu__item-icon { transition: transform var(--jl-dur) var(--jl-ease-spring); }
#hde-menu-app .menu__item:hover .menu__item-icon { transform: translateY(-1px) scale(1.08); }
#hde-menu-app .menu__item-name { font-size: 10.5px; font-weight: 500; letter-spacing: .01em; opacity: .85; }
#hde-menu-app .menu__item.is-active .menu__item-name { opacity: 1; font-weight: 600; }
#hde-menu-app .menu__item-badge { box-shadow: 0 0 0 2px var(--menu-background, #0f1b2d); font-weight: 700; }
#hde-menu-app .menu__item-avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); transition: box-shadow var(--jl-dur) var(--jl-ease-out); }
#hde-menu-app .menu__item_profile:hover .menu__item-avatar { box-shadow: 0 0 0 2px var(--ui-accent); }


/* ======================= 2. Ticket SPA shell ======================= */
#ticket-app .ticket-container { background: var(--ui-canvas); }

/* Top bar: blends with the page, hairline instead of a grey slab */
#ticket-app .ticket-topbar {
  background: var(--ui-panel) !important;
  border-bottom: 1px solid var(--ui-line);
}
#ticket-app .ticket-topbar .el-button { border-radius: 8px; }

/* Open-ticket tabs → pills */
#ticket-app .ticket-tabs__tab {
  border-radius: 8px;
  transition: background-color var(--jl-dur-fast) var(--jl-ease-out), color var(--jl-dur-fast) var(--jl-ease-out);
}
#ticket-app .ticket-tabs__tab:hover { background: var(--ui-hover); }
/* Vendor paints the active tab teal with WHITE text set on the children,
   so the text colour must be forced on the whole subtree */
#ticket-app .ticket-tabs__tab_active {
  background: var(--ui-accent-soft) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  font-weight: 600;
}
#ticket-app .ticket-tabs__tab_active,
#ticket-app .ticket-tabs__tab_active * { color: var(--ui-accent) !important; }
#ticket-app .ticket-tabs__tab-badge { font-variant-numeric: tabular-nums; }


/* ======================= 3. Filters sidebar ======================= */
#ticket-app .ticket-sidebar { background: var(--ui-panel); border-right: 1px solid var(--ui-line); }
#ticket-app .ticket-sidebar__heading-text { font-weight: 700; letter-spacing: -.01em; }
#ticket-app .ticket-sidebar__filter-button {
  border-radius: 8px;
  margin: 1px 6px;
  transition: background-color var(--jl-dur-fast) var(--jl-ease-out), color var(--jl-dur-fast) var(--jl-ease-out);
}
#ticket-app .ticket-sidebar__filter-button:hover { background: var(--ui-hover) !important; }
#ticket-app .ticket-sidebar__filter-button.router-link-exact-active,
#ticket-app .ticket-sidebar__filter-button.active {
  background: var(--ui-accent-soft) !important;
  color: var(--ui-accent) !important;
  font-weight: 600 !important;
}
#ticket-app .ticket-sidebar__filter-button.router-link-exact-active .ticket-sidebar__filter-name,
#ticket-app .ticket-sidebar__filter-button.active .ticket-sidebar__filter-name { color: var(--ui-accent) !important; }
#ticket-app .ticket-sidebar__filter-count {
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--ui-raised);
  color: var(--ui-ink-2);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
#ticket-app .ticket-sidebar__filter-button.router-link-exact-active .ticket-sidebar__filter-count,
#ticket-app .ticket-sidebar__filter-button.active .ticket-sidebar__filter-count {
  background: var(--ui-accent);
  color: var(--ui-accent-ink);
}
/* Who is online: tiny presence list */
#ticket-app .ticket-sidebar-users-online__user { border-radius: 8px; padding: 4px 6px; }
#ticket-app .ticket-sidebar-users-online__user:hover { background: var(--ui-hover); }


/* ======================= 4. Ticket list ======================= */
#ticket-app .ticket-list__heading { padding-top: 6px; }
#ticket-app .ticket-list__filter-name { font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--ui-ink); }
#ticket-app .ticket-list__filter-count {
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--ui-raised);
  color: var(--ui-ink-2);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* The list is a custom table that reuses el-table classes */
#ticket-app .ticket-list .el-table {
  background: var(--ui-canvas);
  border: 1px solid var(--ui-line);
  border-radius: 12px;
}
#ticket-app .ticket-list .el-table::before { display: none; }
#ticket-app .ticket-list .el-table th.el-table__cell {
  background: var(--ui-raised) !important;
  color: var(--ui-ink-3) !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
#ticket-app .ticket-list .el-table td.el-table__cell {
  padding: 9px 0;
  border-bottom-color: var(--ui-line) !important;
  font-size: 13px;
}
#ticket-app .ticket-list .el-table__body tr:hover > td.el-table__cell { background: var(--ui-hover) !important; }
/* Rows cascade in when a filter opens; a ticket that appears later slides in on its own */
#ticket-app .ticket-list .el-table__body tr { animation: jl-row-in 240ms var(--jl-ease-out) both; }
#ticket-app .ticket-list .el-table__body tr:nth-child(2)  { animation-delay: 20ms; }
#ticket-app .ticket-list .el-table__body tr:nth-child(3)  { animation-delay: 40ms; }
#ticket-app .ticket-list .el-table__body tr:nth-child(4)  { animation-delay: 60ms; }
#ticket-app .ticket-list .el-table__body tr:nth-child(5)  { animation-delay: 80ms; }
#ticket-app .ticket-list .el-table__body tr:nth-child(6)  { animation-delay: 100ms; }
#ticket-app .ticket-list .el-table__body tr:nth-child(7)  { animation-delay: 120ms; }
#ticket-app .ticket-list .el-table__body tr:nth-child(8)  { animation-delay: 140ms; }
#ticket-app .ticket-list .el-table__body tr:nth-child(n+9) { animation-delay: 160ms; }
@keyframes jl-row-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* Title: readable link, accent on hover */
#ticket-app .ticket-list-column-title__center a { color: var(--ui-ink); font-weight: 500; text-decoration: none; }
#ticket-app .ticket-list-column-title__center a:hover { color: var(--ui-accent); }
#ticket-app .ticket-list-column-title__post-count {
  padding: 0 6px;
  border-radius: 999px;
  background: var(--ui-raised);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* Unread: accent rail + dot + stronger title */
#ticket-app .ticket-list__column-unread > td:first-child { box-shadow: inset 3px 0 0 var(--ui-accent); }
#ticket-app .ticket-list__column-unread .ticket-list-column-title__center a span { font-weight: 700; }
#ticket-app .ticket-list__column-unread .ticket-list-column-title__center a::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--ui-accent);
  vertical-align: 1px;
}

/* SLA breached: unmistakable but calm — tinted row + red rail */
#ticket-app .ticket-list__column-sla-reached > td.el-table__cell { background: var(--ui-danger-soft) !important; }
#ticket-app .ticket-list__column-sla-reached > td:first-child { box-shadow: inset 3px 0 0 var(--ui-danger); }

/* Frozen: visually parked */
#ticket-app .ticket-list__column-freeze > td.el-table__cell { background: transparent !important; }
#ticket-app .ticket-list__column-freeze > td.el-table__cell:not(.el-table__cell--selection) { opacity: .55; transition: opacity var(--jl-dur) var(--jl-ease-out); }
#ticket-app .ticket-list__column-freeze:hover > td.el-table__cell { opacity: 1; }
#ticket-app .ticket-list__column-freeze .ticket-list-column-title__center a::after { content: "  ❄"; font-size: 11px; }

/* Status pill: keep vendor colour, refine shape */
#ticket-app .ticket-list__column-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 2px 8px !important;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 18px;
}
#ticket-app .ticket-list__column-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .8;
}
#ticket-app .ticket-list__column-select-edit { border-radius: 6px; transition: background-color var(--jl-dur-fast) var(--jl-ease-out); }
#ticket-app .ticket-list__column-select-edit:hover { background: var(--ui-hover); }

/* SLA clock: a little bigger; fully red ones pulse */
#ticket-app .ticket-list__column-clock { transform: scale(1.1); }
#ticket-app .ticket-list__column-clock_full-red { animation: jl-pulse 1.6s var(--jl-ease-out) infinite; }
@keyframes jl-pulse {
  0%, 100% { filter: none; }
  50%      { filter: drop-shadow(0 0 4px var(--ui-danger)); }
}

/* Empty state */
#ticket-app .ticket-list .el-table__empty-text { color: var(--ui-ink-3); font-size: 14px; }
#ticket-app .ticket-list .el-table__empty-text::before {
  content: "✓";
  display: block;
  margin: 0 auto 8px;
  width: 44px;
  height: 44px;
  line-height: 44px;
  border-radius: 50%;
  background: var(--ui-ok-soft);
  color: var(--ui-ok);
  font-size: 20px;
  font-weight: 700;
}

/* Pagination */
#ticket-app .ticket-list__pagination .el-pager li { border-radius: 6px; font-variant-numeric: tabular-nums; }


/* ======================= 5. Ticket card ======================= */
/* Layout: the conversation is the bright canvas, side panels recede behind hairlines */
#ticket-app .ticket { gap: 0; background: var(--ui-canvas); }
#ticket-app .ticket-left-block,
#ticket-app .ticket-right-block { background: var(--ui-panel); }
#ticket-app .ticket-left-block { border-right: 1px solid var(--ui-line); }
#ticket-app .ticket-right-block { border-left: 1px solid var(--ui-line); }
#ticket-app .ticket-central-block { background: var(--ui-canvas); padding: 0 16px; }

/* --- Header --- */
#ticket-app .ticket-detail__title h1 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.3;
  color: var(--ui-ink);
}
#ticket-app .ticket-detail__unique-id { color: var(--ui-ink-3); font-size: 12px; }
#ticket-app .ticket-detail__unique-id strong {
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--ui-raised);
  border: 1px solid var(--ui-line);
  color: var(--ui-ink-2);
  font-family: var(--jl-font-mono);
  font-size: 11.5px;
  font-weight: 600;
}

/* Someone else is in this ticket → impossible to miss */
#ticket-app .ticket-detail__watching {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: var(--ui-warn-soft);
  color: var(--ui-warn);
  font-size: 12px;
  font-weight: 600;
}
#ticket-app .ticket-detail__watching::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ui-warn);
  animation: jl-live 1.4s ease-in-out infinite;
}
@keyframes jl-live {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 154, 28, .55); }
  50%      { box-shadow: 0 0 0 5px rgba(232, 154, 28, 0); }
}

/* --- Conversation --- */
/* Dense on purpose: an agent must see 6-10 messages without scrolling.
   Vendor pads the inner .message-html (10px) — that is the ONLY padding layer;
   the outer .message-text bubble gets none. */
#ticket-app .ticket .ticket-conversation__message {
  margin: 0 0 6px;
  align-items: flex-start;
  gap: 8px;
  animation: jl-msg-in var(--jl-dur-slow) var(--jl-ease-out) both;
}
@keyframes jl-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
#ticket-app .ticket .ticket-conversation__message-image {
  width: 28px;
  height: 28px;
  margin-top: 16px;
  padding: 0;
  border-radius: 50% !important;
  font-size: 12px;
}
#ticket-app .ticket .ticket-conversation__message-meta {
  margin-bottom: 2px;
  color: var(--ui-ink-3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
#ticket-app .ticket .ticket-conversation__message-text {
  padding: 0;
  border-radius: 12px;
  box-shadow: none;
  font-size: 13.5px;
  line-height: 1.45;
  text-align: left;
}
#ticket-app .ticket .ticket-conversation__message-html { padding: 6px 11px; min-height: 0; }
#ticket-app .ticket .ticket-conversation__message-text p { line-height: 1.45; }
#ticket-app .ticket .ticket-conversation__message-text p + p { margin-top: 4px; }
#ticket-app .ticket .ticket-conversation__message-files { padding: 0 6px 6px; }
/* Long messages: the vendor collapses at 400px — a third of the screen. 240px is enough to triage */
#ticket-app .ticket .ticket-conversation__message-html_collapsed { max-height: 240px; }
/* Client messages: card with hairline, the "other side" of the chat */
#ticket-app .ticket .ticket-conversation__message-text_user { border: 0; box-shadow: none; border-top-left-radius: 4px; }
/* Colleague's reply: light blue with a blue edge — our side, but not me */
#ticket-app .ticket .ticket-conversation__message-text_staff { box-shadow: inset 3px 0 0 var(--ui-accent); }
/* Links inside MY (solid blue) replies must be white; the vendor shares one variable for both */
#ticket-app .ticket .ticket-conversation__message-text_post-own a { color: #fff !important; text-decoration: underline; }
#ticket-app .ticket .ticket-conversation__message-text_staff,
#ticket-app .ticket .ticket-conversation__message-text_post-own { border-top-left-radius: 4px; }

/* Chat layout: my own replies sit on the right (needs :has, harmless where unsupported) */
#ticket-app .ticket-conversation__message:has(.ticket-conversation__message-text_post-own) { flex-direction: row-reverse; }
#ticket-app .ticket-conversation__message:has(.ticket-conversation__message-text_post-own) .ticket-conversation__message-meta { text-align: right; }
#ticket-app .ticket .ticket-conversation__message:has(.ticket-conversation__message-text_post-own) .ticket-conversation__message-text_post-own {
  border-top-left-radius: 14px;
  border-top-right-radius: 4px;
}

/* Internal notes: labelled, dashed, amber — never mistaken for a reply */
#ticket-app .ticket .ticket-conversation__message-text_comment,
#ticket-app .ticket .ticket-conversation__message-text_comment-own {
  border: 1px dashed var(--ui-note-line);
  box-shadow: none;
}
#ticket-app .ticket .ticket-conversation__message-text_comment::before,
#ticket-app .ticket .ticket-conversation__message-text_comment-own::before {
  content: "\1F512  Внутренний комментарий";
  display: block;
  padding: 6px 11px 0;
  color: var(--ui-note-ink);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .75;
}
#ticket-app .ticket .ticket-conversation__message-text_system {
  box-shadow: none;
  background: transparent !important;
  color: var(--ui-ink-3) !important;
  font-size: 12px;
  text-align: center;
}

/* Attachments → tiles */
#ticket-app .ticket-conversation__message-file {
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  transition: border-color var(--jl-dur-fast) var(--jl-ease-out), box-shadow var(--jl-dur-fast) var(--jl-ease-out);
}
#ticket-app .ticket-conversation__message-file:hover { border-color: var(--ui-accent); box-shadow: var(--ui-shadow-sm); }
#ticket-app .ticket-conversation__show-on-hover { transition: opacity var(--jl-dur) var(--jl-ease-out); }

/* --- Editor --- */
#ticket-app .ticket-detail__editor {
  margin: 8px 0 12px;
  padding: 10px 12px 12px;
  border-radius: 14px;
  background: var(--ui-canvas);
  border: 1px solid var(--ui-line-strong);
  box-shadow: var(--ui-shadow);
}
/* Reply / comment tabs → segmented control */
#ticket-app .ticket-detail__tabs > .el-tabs__header { border-bottom: 0 !important; margin-bottom: 8px; }
#ticket-app .ticket-detail__tabs .el-tabs__nav {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border: 0 !important;
  border-radius: 10px;
  background: var(--ui-raised);
}
#ticket-app .ticket-detail__tabs .el-tabs__item {
  height: 30px !important;
  line-height: 30px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 8px;
  font-weight: 600;
  transition: background-color var(--jl-dur) var(--jl-ease-out), color var(--jl-dur) var(--jl-ease-out), box-shadow var(--jl-dur) var(--jl-ease-out);
}
#ticket-app #tab-post.is-active { background: var(--ui-card) !important; color: var(--ui-ink) !important; box-shadow: var(--ui-shadow-sm); }
#ticket-app #tab-comment.is-active { background: var(--ui-note) !important; color: var(--ui-note-ink) !important; box-shadow: var(--ui-shadow-sm); }

/* What the agent is about to send, spelled out above the editor */
#ticket-app .ticket-editor__ckeditor_post::before,
#ticket-app .ticket-editor__ckeditor_comment::before {
  display: block;
  margin: 0 0 6px 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
}
#ticket-app .ticket-editor__ckeditor_post::before { content: "● Ответ клиенту — уйдёт ему"; color: var(--ui-ink-3); }
#ticket-app .ticket-editor__ckeditor_comment::before { content: "\1F512  Внутренний комментарий — клиент не увидит"; color: var(--ui-note-ink); }
#ticket-app .ticket-editor__ckeditor .ck-content {
  min-height: 110px;
  border-radius: 10px !important;
  font-size: 14px;
  line-height: 1.6;
  transition: box-shadow var(--jl-dur) var(--jl-ease-out), border-color var(--jl-dur) var(--jl-ease-out);
}
#ticket-app .ticket-editor__ckeditor_comment .ck-content { border: 2px dashed var(--ui-note-line) !important; }
#ticket-app .ticket-editor__ckeditor .ck-content.ck-focused { box-shadow: var(--ui-focus) !important; }
#ticket-app .ticket-editor__ckeditor .ck.ck-toolbar { border-radius: 10px 10px 0 0 !important; border-color: var(--ui-line) !important; }
#ticket-app .ticket-editor__buttons .el-button--primary { padding: 9px 18px; font-size: 13px; }

/* --- Right block: fields --- */
#ticket-app .ticket-right-block .ticket-fields {
  padding: 14px 16px;
  background: transparent;
  border: 0;
  box-shadow: none;
}
#ticket-app .ticket-fields__field { margin-bottom: 12px; }
#ticket-app .ticket-fields__field-name {
  margin-bottom: 4px;
  color: var(--ui-ink-3);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
#ticket-app .ticket-fields__sla-reached .el-input__inner {
  border-color: var(--ui-danger) !important;
  background: var(--ui-danger-soft) !important;
  color: var(--ui-danger) !important;
  font-weight: 600;
}
#ticket-app .ticket-fields__field-owner-take-button,
#ticket-app .ticket-fields__field-status-close-button { border-radius: 999px; }

/* Buttons on the white fields card (custom action buttons can be white too):
   a hairline + soft shadow keeps their edges visible; their own colours stay */
/* Only buttons without their own colour: coloured action buttons get their
   background inline from Eddy settings and need no extra outline */
#ticket-app .ticket-right-block .el-button:not([style*="background"]):not(.el-button--primary):not(.el-button--danger):not(.el-button--success):not(.el-button--warning) {
  box-shadow: inset 0 0 0 1px var(--ui-line-strong), var(--ui-shadow-sm);
}
#ticket-app .ticket-right-block .el-button:not([style*="background"]):not(.el-button--primary):not(.el-button--danger):not(.el-button--success):not(.el-button--warning):hover {
  box-shadow: inset 0 0 0 1px var(--ui-accent), var(--ui-shadow);
}
/* Own-colour action buttons (Решена, Факап…): no ring, no glow — just their colour */
#ticket-app .ticket-right-block .el-button[style*="background"],
#ticket-app .ticket-right-block .el-button[style*="background"]:hover,
#ticket-app .ticket-right-block .el-button[style*="background"]:focus {
  box-shadow: none !important;
  border-color: transparent !important;
}

/* --- Left block: client card + modules --- */
#ticket-app .ticket-left-block .ticket-user {
  padding: 14px 16px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ui-line);
  box-shadow: none;
}
#ticket-app .ticket-user__field-label {
  color: var(--ui-ink-3);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
#ticket-app .ticket-user__field-value-copy { opacity: .4; transition: opacity var(--jl-dur-fast) var(--jl-ease-out); }
#ticket-app .ticket-user__field:hover .ticket-user__field-value-copy { opacity: 1; }

/* Module buttons (audit, history, follow, merge…) → quiet action list */
#ticket-app .ticket-modules {
  margin-top: 0;
  padding: 8px;
  background: transparent;
  border: 0;
}
#ticket-app .ticket-modules .el-button:not(.el-button--primary):not(.el-button--danger) {
  justify-content: flex-start;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ui-ink-2) !important;
  text-align: left;
}
#ticket-app .ticket-modules .el-button:not(.el-button--primary):not(.el-button--danger):hover {
  background: var(--ui-hover) !important;
  color: var(--ui-ink) !important;
  transform: none;
}
#ticket-app .ticket-history__user-total-tickets,
#ticket-app .ticket-history__user-active-tickets {
  padding: 0 6px;
  border-radius: 999px;
  background: var(--ui-raised);
  font-variant-numeric: tabular-nums;
}
#ticket-app .ticket-plugins__button { border-radius: 8px !important; }

/* --- Motion that tells you what happened ---
   Opening a ticket: the centre slides in, side panels fade — you see the switch.
   Right-panel action buttons: lift on hover, press on click — feels clickable. */
#ticket-app .ticket-central-block { animation: jl-ticket-in 280ms var(--jl-ease-out) both; }
#ticket-app .ticket-left-block,
#ticket-app .ticket-right-block { animation: jl-fade-in 360ms var(--jl-ease-out) both; }
@keyframes jl-ticket-in {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes jl-fade-in { from { opacity: 0; } to { opacity: 1; } }

#ticket-app .ticket-right-block .el-button {
  transition: transform var(--jl-dur-fast) var(--jl-ease-out), box-shadow var(--jl-dur) var(--jl-ease-out),
              filter var(--jl-dur) var(--jl-ease-out);
}
#ticket-app .ticket-right-block .el-button:hover { transform: translateY(-1px); box-shadow: var(--ui-shadow); filter: brightness(1.06); }
#ticket-app .ticket-right-block .el-button:active { transform: translateY(0) scale(.97); box-shadow: none; }

/* Fields: the row you're about to edit highlights before you click */
#ticket-app .ticket-fields__field {
  margin-left: -6px;
  margin-right: -6px;
  padding: 4px 6px;
  border-radius: 8px;
  transition: background-color var(--jl-dur) var(--jl-ease-out);
}
#ticket-app .ticket-fields__field:hover,
#ticket-app .ticket-fields__field:focus-within { background: var(--ui-hover); }

/* Editor grows a little when you start typing — focus is obvious */
#ticket-app .ticket-detail__editor { transition: box-shadow var(--jl-dur) var(--jl-ease-out), border-color var(--jl-dur) var(--jl-ease-out); }
#ticket-app .ticket-detail__editor:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus), var(--ui-shadow); }


/* ======================= 6. Notifications (menu) ======================= */
#hde-menu-app .notifications { border-radius: 0 14px 14px 0; box-shadow: var(--ui-shadow-lg); }
#hde-menu-app .notification { border-radius: 12px; box-shadow: var(--ui-shadow-lg); }


/* ======================= 7. Legacy pages (settings, reports) ======================= */
.container__content .page-block,
.container__content .card {
  border-radius: 14px;
  border-color: var(--ui-line);
  box-shadow: var(--ui-shadow-sm);
}
.staff__item {
  border-radius: 14px;
  transition: background-color var(--jl-dur) var(--jl-ease-out), transform var(--jl-dur) var(--jl-ease-spring);
}
.staff__item:hover { background: var(--ui-hover); transform: translateY(-2px); }
.staff__item-icon { transition: transform var(--jl-dur) var(--jl-ease-spring); }
.staff__item:hover .staff__item-icon { transform: scale(1.08); }
.sidebar__item { border-radius: 8px; transition: background-color var(--jl-dur-fast) var(--jl-ease-out); }