/* Open tabs keep their order independently of the chosen appearance. */
.ticket-tabs { min-width: 0; }
.ticket-tabs-bar { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 16px; border-bottom: 1px solid var(--outline-variant); background: var(--surface-container-lowest); }
.ticket-tabs-bar.hidden { display: none; }
.ticket-tabs-list { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; overflow-x: auto; padding: 4px; }
.ticket-tab { display: flex; align-items: center; flex: 0 0 auto; max-width: 260px; min-width: 0; border-radius: 8px; color: var(--on-surface-variant); background: var(--surface-container-low); border: 1px solid transparent; }
.ticket-tab--active { color: var(--primary); background: var(--surface-container); border-color: var(--primary); }
.ticket-tab--dragging { opacity: 0.5; }
.ticket-tab-link { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px; font-size: 12px; font-weight: 600; }
.ticket-tab-icon { flex: 0 0 16px; width: 16px; text-align: center; font-size: 12px; }
.ticket-tab-label { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; }
.ticket-tab-label > :first-child { flex-shrink: 0; }
.ticket-tab-label > :last-child { overflow: hidden; text-overflow: ellipsis; }
.ticket-tab-close { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; width: 28px; height: 28px; margin-right: 4px; border-radius: 6px; font-size: 12px; }
.ticket-tab-close:hover, .ticket-tabs-close-all:hover { background: var(--surface-container-high); }
.ticket-tabs-close-all { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0; min-height: 36px; padding: 6px 10px; border-radius: 6px; font-size: 12px; }
.ticket-tabs :is(a, button):focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ticket-tabs--compact .ticket-tab { width: auto; }
.ticket-tabs--compact .ticket-tab-link { flex: 1; overflow: hidden; }
.ticket-tabs--compact .ticket-tab-title { display: none; }
.ticket-tabs--compact.ticket-tabs--expand .ticket-tab:focus-within { width: 260px; }
.ticket-tabs--compact.ticket-tabs--expand .ticket-tab:focus-within .ticket-tab-title { display: block; }
@media (hover: hover) {
  .ticket-tabs--compact.ticket-tabs--expand .ticket-tab:hover { width: 260px; }
  .ticket-tabs--compact.ticket-tabs--expand .ticket-tab:hover .ticket-tab-title { display: block; }
}
@media (pointer: coarse) {
  .ticket-tab-link, .ticket-tab-close, .ticket-tabs-close-all { min-height: 44px; }
  .ticket-tab-close { flex-basis: 44px; width: 44px; }
}
@media (max-width: 639px) {
  .ticket-tabs-bar { padding-inline: 8px; }
  .ticket-tabs-close-all span { display: none; }
  .ticket-tabs-close-all { min-width: 44px; }
}

/* Tab groups remain single blocks in the horizontal scroller. Menus use the
 * dialog top layer so they are usable even when the bar is scrolled. */
.ticket-tab-group { --ticket-group-color: #3b82f6; display: flex; align-items: center; flex: 0 0 auto; gap: 6px; padding: 3px 4px 3px 0; border-radius: 9px; border-bottom: 3px solid var(--ticket-group-color); background: color-mix(in srgb, var(--ticket-group-color) 9%, var(--surface-container-lowest)); }
.ticket-tab-group--cyan { --ticket-group-color: #0891b2; }
.ticket-tab-group--green { --ticket-group-color: #16a34a; }
.ticket-tab-group--yellow { --ticket-group-color: #ca8a04; }
.ticket-tab-group--orange { --ticket-group-color: #ea580c; }
.ticket-tab-group--red { --ticket-group-color: #dc2626; }
.ticket-tab-group--purple { --ticket-group-color: #9333ea; }
.ticket-tab-group--gray { --ticket-group-color: #64748b; }
.ticket-tab, .ticket-tab-group-header { -webkit-touch-callout: none; user-select: none; }
.ticket-tab-group-header { display: flex; align-items: center; flex: 0 0 auto; }
.ticket-tab-group-drag { display: flex; align-items: center; justify-content: center; width: 18px; align-self: stretch; cursor: grab; color: var(--on-surface-variant); font-size: 10px; }
.ticket-tab-group-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 5px 6px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--on-surface); }
.ticket-tab-group-toggle:hover { background: color-mix(in srgb, var(--ticket-group-color) 12%, transparent); }
.ticket-tab-group-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--ticket-group-color); }
.ticket-tab-group-name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-tab-group-count { min-width: 18px; padding: 0 4px; border-radius: 4px; background: var(--surface-container); color: var(--on-surface-variant); font-size: 11px; }
.ticket-tab-group-active { color: var(--primary); font-size: 18px; line-height: 12px; }
.ticket-tab-group--drop-target { box-shadow: 0 0 0 2px var(--ticket-group-color); }
.ticket-tab-group--active .ticket-tab-group-toggle { color: var(--primary); }
.ticket-tab-group-members { display: flex; align-items: center; gap: 6px; min-width: 24px; min-height: 36px; }
.ticket-tab-group-members[hidden] { display: none; }
.ticket-tabs-dialog { position: fixed; inset: 0; width: min(380px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; overflow-y: auto; padding: 20px; border: 1px solid var(--outline-variant); border-radius: 12px; box-shadow: 0 16px 48px #0004; color: var(--on-surface); background: var(--surface-container-lowest); }
.ticket-tabs-dialog::backdrop { background: #0006; }
.ticket-tabs-dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.ticket-tabs-dialog-heading h2 { font-size: 16px; font-weight: 600; }
.ticket-tabs-dialog-heading button { display: flex; align-items: center; justify-content: center; width: 36px; min-height: 36px; border-radius: 6px; }
.ticket-tabs-dialog-description { margin-bottom: 12px; font-size: 13px; overflow-wrap: anywhere; }
.ticket-tabs-group-form { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ticket-tabs-group-form h3 { margin: 4px 0; font-size: 14px; font-weight: 600; }
.ticket-tabs-group-form label { font-size: 13px; font-weight: 600; }
.ticket-tabs-group-form :is(input, select) { width: 100%; min-height: 40px; padding: 8px; border: 1px solid var(--outline-variant); border-radius: 6px; color: var(--on-surface); background: var(--surface-container); }
.ticket-tabs-dialog-actions { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.ticket-tabs-dialog-actions button, .ticket-tabs-dialog-primary { min-height: 40px; padding: 8px 12px; border-radius: 6px; font-size: 13px; text-align: left; }
.ticket-tabs-dialog-actions button:hover, .ticket-tabs-dialog-heading button:hover { background: var(--surface-container); }
.ticket-tabs-dialog-primary { margin-top: 4px; color: var(--on-primary); background: var(--primary); text-align: center; font-weight: 600; }
.ticket-tabs-dialog :is(button, input, select):focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (pointer: coarse), (max-width: 639px) {
  .ticket-tab-group-toggle, .ticket-tab-group-drag { min-height: 44px; }
  .ticket-tab-group-drag { width: 24px; }
  .ticket-tabs-dialog :is(button, input, select) { min-height: 44px; }
  .ticket-tabs-group-form :is(input, select) { font-size: 16px; }
}

/* Legacy integrations consume these aliases. Keep them mapped to the
 * semantic theme tokens so they follow both color modes. */

.mobile-bottom-spacer {
  height: calc(5rem + env(safe-area-inset-bottom));
}

@media (max-width: 1023px) {
  html[data-mobile-navigation-open="true"],
  html[data-mobile-navigation-open="true"] body {
    overflow: hidden;
  }

  .app-sidebar[data-mobile-open="true"] {
    width: min(20rem, 88vw);
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .app-topbar {
    padding-top: max(0.375rem, env(safe-area-inset-top));
    gap: 0.25rem;
  }

  .app-topbar > div:first-child { padding-right: 0; }
  .app-topbar :is(button, a[aria-label], a[title="Ver Perfil"]),
  .app-sidebar :is(button, a) {
    min-width: 44px;
    min-height: 44px;
  }

  .app-mobile-header :is(a, button) { min-height: 44px; }
  .app-mobile-header [data-topbar-action] { max-width: 100%; }
  .app-mobile-header [data-topbar-action] > span:last-child { white-space: normal; }

  /* Tooltips are hover hints; invisible ones must not widen the document. */
  [role="tooltip"] { display: none; }

  /* Keep iOS from zooming the page when an editable field receives focus. */
  .app-main :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select),
  .app-main [contenteditable="true"] {
    font-size: 16px;
  }

  .app-main :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select),
  [data-dropdown-target="button"],
  [data-custom-select-target="button"],
  [data-dropdown-target="item"],
  [data-custom-select-target="option"] {
    min-height: 44px;
  }

  .rich-text-composer lexxy-toolbar button {
    min-width: 40px;
    min-height: 40px;
  }
  [data-controller~="template-picker"] > button { min-height: 44px; }

  .app-main :is(.lexxy-content, .lexxy-content p, .rich-text-composer) {
    min-width: 0;
    overflow-wrap: anywhere;
  }

}

@media (max-width: 767px) {
  .mobile-catalog-table,
  .mobile-catalog-table tbody {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .mobile-catalog-table thead { display: none; }
  .mobile-catalog-table thead:has(a) {
    display: block;
    position: static;
    padding: 0.75rem;
  }
  .mobile-catalog-table thead tr {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
  }
  .mobile-catalog-table th { display: none; }
  .mobile-catalog-table th:has(a) { display: block; padding: 0; }
  .mobile-catalog-table th a { min-height: 44px; }
  .mobile-catalog-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 0.75rem 1rem;
    gap: 0.5rem;
  }
  .mobile-catalog-table td {
    display: block;
    max-width: none;
    padding: 0;
    text-align: left;
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    font-size: 0.875rem;
  }
  .mobile-catalog-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.125rem;
    color: var(--on-surface-variant);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .mobile-catalog-table td[data-label="Acciones"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--surface-container);
    padding-top: 0.5rem;
  }
  .mobile-catalog-table td a { min-width: 44px; min-height: 44px; }
}

:root {
  /* Base surfaces */
  --bg-primary: var(--surface);
  --bg-secondary: var(--surface-container-low);
  --bg-card: var(--surface-container-lowest);
  --bg-card-hover: var(--surface-container);
  --bg-elevated: var(--surface-container-high);

  /* Borders */
  --border-subtle: color-mix(in srgb, var(--outline-variant) 20%, transparent);
  --border-default: color-mix(in srgb, var(--outline-variant) 35%, transparent);
  --border-accent: color-mix(in srgb, var(--primary) 35%, transparent);

  /* Text */
  --text-primary: var(--on-surface);
  --text-secondary: var(--on-surface-variant);
  --text-muted: var(--on-surface-variant);

  /* Accents */
  --accent-cyan: var(--primary);
  --accent-emerald: #248267;
  --accent-purple: var(--brand-accent);
  --accent-amber: var(--tertiary);
  --accent-rose: #b7444c;

  /* Glow effects */
  --glow-cyan: 0 0 20px color-mix(in srgb, var(--primary) 18%, transparent);
  --glow-purple: 0 0 20px color-mix(in srgb, var(--brand-accent) 18%, transparent);
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Scrollbars for dense work areas. The 10px native hit area contains a
 * visually lighter 4px thumb, so it remains easy to grab without adding
 * visual weight. Semantic tokens keep it consistent in both color modes. */
.custom-scrollbar,
.tribute-container {
  --custom-scrollbar-thumb: color-mix(in srgb, var(--outline-variant) 58%, transparent);
  --custom-scrollbar-thumb-hover: color-mix(in srgb, var(--primary) 82%, var(--outline-variant));
  --custom-scrollbar-track: color-mix(in srgb, var(--surface-container) 72%, transparent);
  scrollbar-color: var(--custom-scrollbar-thumb) transparent;
  scrollbar-width: thin;
}

.custom-scrollbar::-webkit-scrollbar,
.tribute-container::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.custom-scrollbar::-webkit-scrollbar-track,
.tribute-container::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb,
.tribute-container::-webkit-scrollbar-thumb {
  min-height: 40px;
  background: var(--custom-scrollbar-thumb);
  background-clip: padding-box;
  border: 3px solid transparent;
  border-radius: 999px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover,
.tribute-container::-webkit-scrollbar-thumb:hover {
  background: var(--custom-scrollbar-thumb-hover);
  background-clip: padding-box;
  border-width: 2px;
}

.custom-scrollbar::-webkit-scrollbar-corner,
.tribute-container::-webkit-scrollbar-corner {
  background: transparent;
}

.kanban-scrollbar-x {
  scrollbar-color: var(--custom-scrollbar-thumb) var(--custom-scrollbar-track);
}

.kanban-scrollbar-x::-webkit-scrollbar-track:horizontal {
  margin-inline: 0.5rem;
  background: var(--custom-scrollbar-track);
  border-radius: 999px;
}

.kanban-scrollbar-y {
  scrollbar-gutter: stable;
}

.kanban-scrollbar-y::-webkit-scrollbar-track:vertical {
  margin-block: 0.5rem;
}

/* Multiselect controls share a compact custom checkbox while their native
 * inputs remain in the form and accessible to assistive technology. */
.multiselect-select-all {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 35%, transparent);
  padding: 0.5rem 0.75rem 0.625rem;
  color: var(--on-surface);
  font-size: 0.75rem;
  font-weight: 700;
  text-align: left;
  transition: color 150ms ease, background-color 150ms ease;
}

.multiselect-select-all:hover {
  background: color-mix(in srgb, var(--surface-container) 72%, transparent);
  color: var(--primary);
}

.multiselect-select-all:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.multiselect-select-all-check,
.multiselect-option-check {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  height: 1.125rem;
  width: 1.125rem;
  flex: 0 0 1.125rem;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--outline-variant) 75%, transparent);
  border-radius: 0.3125rem;
  background: var(--surface-container-lowest);
  color: transparent;
  box-shadow: 0 1px 2px rgb(0 0 0 / 8%), inset 0 1px 0 rgb(255 255 255 / 18%);
  font-size: 0.625rem;
  font-weight: 900;
  line-height: 1;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.multiselect-select-all[data-state="partial"] .multiselect-select-all-check {
  border-color: color-mix(in srgb, var(--primary) 75%, var(--outline-variant));
  background: color-mix(in srgb, var(--primary) 14%, var(--surface-container-lowest));
  color: var(--primary);
}

.multiselect-select-all[data-state="all"] .multiselect-select-all-check,
.multiselect-option-check:checked {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--on-primary);
  transform: scale(1.02);
}

.multiselect-option-check:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.25 6.25 4.8 8.6 9.75 3.45' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0.75rem;
}

.multiselect-option-check:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent);
  outline-offset: 2px;
}

/* Focus ring for accessibility */
*:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Form autofill fix for dark mode */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--surface-container-lowest) inset;
  -webkit-text-fill-color: var(--on-surface);
  transition: background-color 5000s ease-in-out 0s;
}

/* Sidebar: the compact state is a first-class layout, not a clipped menu. */
.app-sidebar[data-collapsed="true"],
html[data-sidebar-collapsed="true"] .app-sidebar {
  width: 4rem;
}

/* One inline sprite supplies all menu icons. Keep its definitions in the DOM
 * without introducing a visible or focusable element. */
.owl-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

:root {
  --owl-icon-color: #34445C;
  --owl-icon-accent: #087F9A;
}

.dark {
  --owl-icon-color: #A9B8CB;
  --owl-icon-accent: #5DD9EF;
}

.owl-icon {
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--owl-icon-color);
  --owl-accent: var(--owl-icon-accent);
}

.owl-icon--selected-blue {
  color: #ffffff;
  --owl-accent: #ffffff;
}

.owl-icon--selected-violet {
  color: #F1EEFF;
  --owl-accent: #B8A5FF;
}

html:not(.dark) .app-sidebar .owl-icon--selected-violet {
  color: #493879;
  --owl-accent: #7352A6;
}

.sidebar-menu {
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
}

.sidebar-menu::-webkit-scrollbar {
  display: none;
}

:is(.app-sidebar[data-collapsed="true"], html[data-sidebar-collapsed="true"] .app-sidebar) .sidebar-header {
  justify-content: center;
  padding-inline: 1rem;
}

:is(.app-sidebar[data-collapsed="true"], html[data-sidebar-collapsed="true"] .app-sidebar) .sidebar-brand-wrap {
  justify-content: center;
  width: 100%;
}

/* Tailwind's inline-grid utility otherwise wins over a dynamically-added
 * hidden class because both declarations have the same specificity. */
:is(.app-sidebar[data-collapsed="true"], html[data-sidebar-collapsed="true"] .app-sidebar) [data-sidebar-target~="brandLockup"],
:is(.app-sidebar[data-collapsed="true"], html[data-sidebar-collapsed="true"] .app-sidebar) [data-sidebar-target~="navText"] {
  display: none;
}

:is(.app-sidebar[data-collapsed="true"], html[data-sidebar-collapsed="true"] .app-sidebar) [data-sidebar-target~="brandMark"] {
  display: block;
}

.app-sidebar[data-collapsed="false"] [data-sidebar-target~="brandLockup"] {
  display: inline-grid;
}

.app-sidebar[data-collapsed="false"] [data-sidebar-target~="brandMark"] {
  display: none;
}

:is(.app-sidebar[data-collapsed="true"], html[data-sidebar-collapsed="true"] .app-sidebar) .sidebar-menu {
  padding-inline: 0.5rem;
}

:is(.app-sidebar[data-collapsed="true"], html[data-sidebar-collapsed="true"] .app-sidebar) .sidebar-nav-item {
  justify-content: center;
  padding-inline: 0;
}

:is(.app-sidebar[data-collapsed="true"], html[data-sidebar-collapsed="true"] .app-sidebar) .sidebar-nav-item-content {
  justify-content: center;
  gap: 0;
  width: 100%;
}

:is(.app-sidebar[data-collapsed="true"], html[data-sidebar-collapsed="true"] .app-sidebar) .sidebar-nav-icon {
  width: 1.25rem;
}

.sidebar-arrow-collapsed,
:is(.app-sidebar[data-collapsed="true"], html[data-sidebar-collapsed="true"] .app-sidebar) .sidebar-arrow-expanded {
  display: none;
}

:is(.app-sidebar[data-collapsed="true"], html[data-sidebar-collapsed="true"] .app-sidebar) .sidebar-arrow-collapsed {
  display: inline-block;
}

/* Theme tokens change as one visual state; component hover transitions resume
 * after the new palette has been painted. */
html.theme-changing *,
html.theme-changing *::before,
html.theme-changing *::after {
  transition: none !important;
}

/* Tribute CSS */
.tribute-container {
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
  max-height: 300px;
  max-width: 500px;
  overflow: auto;
  display: block;
  z-index: 999999;
  background-color: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 0.375rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  scrollbar-gutter: stable;
}
.tribute-container ul {
  margin: 0;
  margin-top: 2px;
  padding: 4px;
  list-style: none;
}
.tribute-container li {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text-secondary);
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.tribute-container li.highlight {
  background-color: var(--bg-elevated);
  color: var(--text-primary);
}
.tribute-container li span.tribute-item-type {
  font-size: 0.70rem;
  opacity: 0.6;
  text-transform: uppercase;
  font-weight: bold;
}
.tribute-container li span.tribute-item-value {
  font-weight: 600;
}
.tribute-user-option {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}
.tribute-user-avatar {
  display: inline-flex;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 7px;
  color: var(--on-primary);
  background: var(--primary);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
}
.tribute-user-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tribute-user-avatar-fallback {
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}
.tribute-user-name {
  overflow: hidden;
  color: var(--text-primary);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tribute-container li.default {
  display: none;
}

/* Lexxy editor: mapped to the application's semantic design tokens. */
:root {
  --lexxy-color-canvas: var(--surface-container-lowest);
  --lexxy-color-text: var(--on-surface);
  --lexxy-color-text-subtle: var(--on-surface-variant);
  --lexxy-color-link: var(--primary);
  --lexxy-color-selected: var(--primary-container);
  --lexxy-color-selected-hover: var(--surface-container-high);
  --lexxy-color-selected-dark: var(--primary);
  --lexxy-color-ink: var(--on-surface);
  --lexxy-color-ink-medium: var(--on-surface-variant);
  --lexxy-color-ink-lighter: var(--outline-variant);
  --lexxy-color-ink-lightest: var(--surface-container-low);
  --lexxy-color-ink-inverted: var(--on-primary);
  --lexxy-color-code-bg: var(--surface-container-low);
  --lexxy-color-table-header-bg: var(--surface-container-low);
  --lexxy-color-table-cell-border: var(--outline-variant);
  --lexxy-focus-ring-color: var(--primary);
  --lexxy-font-base: var(--font-sans);
  --lexxy-font-mono: var(--font-mono);
}

html.dark {
  --lexxy-color-code-token-att: #fda4af;
  --lexxy-color-code-token-comment: var(--on-surface-variant);
  --lexxy-color-code-token-function: #c4b5fd;
  --lexxy-color-code-token-operator: #fda4af;
  --lexxy-color-code-token-property: var(--primary);
  --lexxy-color-code-token-punctuation: var(--on-surface);
  --lexxy-color-code-token-selector: #6ee7b7;
  --lexxy-color-code-token-variable: #fbbf24;
}

lexxy-editor.lexxy-content {
  padding: 0 !important;
  color: var(--on-surface);
}

lexxy-editor.lexxy-content > .lexxy-editor__content {
  min-height: inherit;
  padding: 0.75rem 1rem;
}

.rich-text-composer {
  overflow: visible;
  border: 1px solid var(--outline-variant);
  border-radius: 6px 6px 0 0;
  background-color: var(--surface-container-lowest);
  transition: border-color 150ms ease;
}

.rich-text-composer:focus-within {
  border-color: var(--primary);
}

.rich-text-composer lexxy-editor {
  max-height: none;
  overflow: visible;
  border: 0;
  border-radius: inherit;
}

.rich-text-composer .lexxy-editor__content {
  min-height: 64px;
  max-height: 160px;
  overflow-y: auto;
  padding: 0.75rem 1rem;
}

lexxy-toolbar {
  color: var(--on-surface-variant);
  border-color: var(--outline-variant);
  background: var(--surface-container-low);
}

lexxy-editor button,
lexxy-editor summary,
lexxy-editor input {
  color: var(--on-surface-variant);
}

lexxy-editor button[aria-pressed="true"],
lexxy-editor button[aria-expanded="true"] {
  color: var(--on-surface);
  background: var(--surface-container-high);
}

lexxy-editor [data-dropdown-panel] {
  color: var(--on-surface);
  border-color: var(--outline-variant);
  background: var(--surface-container-lowest);
}

lexxy-editor [data-dropdown-panel] input {
  color: var(--on-surface);
  border-color: var(--outline-variant);
  background: var(--surface-container-low);
}

lexxy-toolbar svg {
  fill: currentColor;
}

[data-advanta-toolbar-icon] {
  display: none;
  place-items: center;
  width: var(--lexxy-toolbar-icon-size);
  height: var(--lexxy-toolbar-icon-size);
  font-size: var(--lexxy-toolbar-icon-size);
  line-height: 1;
}

[data-advanta-toolbar-icon][data-advanta-icon-ready],
.lexxy-editor__toolbar-dropdown-list [data-advanta-toolbar-icon][data-advanta-icon-ready] {
  display: grid;
}

button:has(> [data-advanta-toolbar-icon][data-advanta-icon-ready])
  > [data-lexxy-icon-fallback] {
  display: none;
}

.advanta-heading-level {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.lexxy-content {
  line-height: 1.5;
}

.lexxy-content hr,
.lexxy-content .horizontal-divider hr {
  inline-size: 100%;
}

.ticket-print-content img {
  display: block;
  max-width: 100%;
  height: auto;
  page-break-inside: avoid;
}

@media print {
  @page {
    margin: 16mm;
  }

  .ticket-print-toolbar {
    display: none !important;
  }

  .ticket-print-page,
  .ticket-print-document {
    background: white !important;
    color: black !important;
  }

  .ticket-print-document {
    max-width: none !important;
    padding: 0 !important;
  }

  .ticket-print-message,
  .ticket-print-content img {
    break-inside: avoid;
  }
}

/* Ticket detail: keep the conversation and composer together, with context alongside. */
.app-main:has(.ticket-focus) { padding: 16px; }
.ticket-focus { display: grid; gap: 16px; min-width: 0; color: var(--on-surface); }
.ticket-focus-banners { grid-column: 1 / -1; }
.ticket-focus-main, .ticket-focus-sidebar { min-width: 0; }
.ticket-focus-sidebar { display: flex; flex-direction: column; gap: 12px; }
.ticket-sidebar-content { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ticket-sidebar-content[hidden] { display: none; }
.ticket-sidebar-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 8px; border: 1px solid color-mix(in srgb, var(--outline-variant) 28%, transparent); border-radius: 6px; background: var(--surface-container-lowest); color: var(--on-surface-variant); font-size: 12px; }
.ticket-sidebar-toggle:hover { background: var(--surface-container-low); color: var(--on-surface); }
.ticket-sidebar-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ticket-focus :is(.ticket-thread, .ticket-side-panel) {
  background: var(--surface-container-lowest);
  border: 1px solid color-mix(in srgb, var(--outline-variant) 28%, transparent);
  border-radius: 7px;
}
.ticket-focus-heading { padding: 16px; position: relative; z-index: 30; border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 18%, transparent); }
.ticket-heading-row { display: flex; align-items: center; gap: 14px; }
.ticket-kicker { display: flex; gap: 10px; align-items: center; color: var(--on-surface-variant); font-size: 10px; letter-spacing: 1.5px; margin-bottom: 6px; }
.ticket-kicker a { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
.ticket-title, .ticket-title-input { font-size: 24px; font-weight: 700; line-height: 1.25; }
.ticket-title-edit { color: var(--on-surface-variant); width: 28px; min-height: 30px; flex-shrink: 0; }
.ticket-actions, .ticket-summary, .ticket-summary-fields { display: flex; align-items: center; gap: 8px; }
.ticket-actions { flex-shrink: 0; }
.ticket-summary { margin-top: 10px; justify-content: space-between; flex-wrap: wrap; }
.ticket-summary-fields { flex-wrap: wrap; min-width: 0; }
.ticket-summary-field { max-width: 260px; min-width: 0; }
.ticket-action, .ticket-summary-button, .ticket-summary-chip,
.ticket-focus .ticket-actions [data-dropdown-target="button"],
.ticket-focus [data-controller~="template-picker"] > button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 34px; padding: 6px 12px; border-radius: 5px;
  border: 1px solid color-mix(in srgb, var(--outline-variant) 18%, transparent);
  background: var(--surface-container); color: var(--on-surface); font-size: 12px; font-weight: 500;
}
.ticket-summary-button { width: 100%; justify-content: space-between; }
.ticket-summary-button i:first-child, .ticket-summary-chip i { color: var(--primary); }
.ticket-summary-field .ticket-summary-button i:first-child { color: var(--ticket-field-color); }
.ticket-summary-field .ticket-summary-button,
.ticket-summary-chip { border-bottom: 3px solid var(--ticket-field-color, var(--primary)); }
.ticket-summary-chip i { color: var(--ticket-field-color, var(--primary)); }
.ticket-focus .ticket-actions [data-dropdown-target="button"] span { text-transform: none; letter-spacing: normal; font-size: 12px; }
.ticket-icon-action { width: 36px; padding: 6px; }
.ticket-action:hover, .ticket-summary-button:hover { background: var(--surface-container-high); }
.ticket-focus :is(button, a, summary, select):focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.ticket-more-menu { padding: 6px; min-width: 165px; }
.ticket-conversation-panel { display: flex; flex-direction: column; gap: 12px; }
.ticket-thread { min-height: 0; display: flex; flex-direction: column; }
.ticket-thread-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 30%, transparent); }
.ticket-thread-controls { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-left: auto; padding: 6px 0; }
.ticket-comments-toggle[hidden] { display: none; }
.ticket-thread-tabs { display: flex; gap: 12px; }
.ticket-thread-tabs button { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 10px; border-bottom: 3px solid transparent; color: var(--on-surface-variant); font-size: 13px; }
.ticket-thread-tabs button[aria-selected="true"] { color: var(--primary); border-color: var(--primary); font-weight: 600; }
.ticket-order { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--on-surface-variant); }
.ticket-order select { background: var(--surface-container); border: 1px solid color-mix(in srgb, var(--outline-variant) 25%, transparent); border-radius: 5px; padding: 6px 24px 6px 8px; color: var(--on-surface); }
.ticket-thread-body { min-height: 0; }
.ticket-thread-body[hidden] { display: none; }
.ticket-focus .ticket-messages-list { padding: 16px 12px; }
.ticket-message-shell {
  --message-surface: color-mix(in srgb, var(--surface-container-lowest) 15%, white);
  --message-accent: var(--primary);
  --message-border: color-mix(in srgb, var(--outline-variant) 35%, transparent);
  --message-badge-surface: color-mix(in srgb, var(--primary) 10%, var(--message-surface));
  position: relative;
  min-width: 0;
}
.ticket-message-shell + .ticket-message-shell { margin-top: 12px; }
.ticket-message-shell.ticket-message-internal {
  --message-surface: color-mix(in srgb, #f2c146 23%, white);
  --message-accent: #92600c;
  --message-badge-surface: #f5cf65;
}
.ticket-focus .ticket-message-card { margin: 0; padding: 0; min-width: 0; border: 1px solid var(--message-border); border-radius: 9px; background: var(--message-surface); color: var(--on-surface); scroll-margin-top: 100px; }
.ticket-message-name { max-width: 240px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 650; color: var(--on-surface); }
.ticket-focus [data-message-id] .ticket-message-content { font-size: 13px; font-weight: 400; line-height: 1.65; color: var(--on-surface); overflow-wrap: anywhere; }
.ticket-message-content :is(p, ul, ol, blockquote):first-child { margin-top: 0; }
.ticket-message-content :is(p, ul, ol, blockquote):last-child { margin-bottom: 0; }
.ticket-history { padding: 16px; overflow-wrap: anywhere; }
.ticket-side-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; font-size: 13px; font-weight: 600; list-style: none; }
.ticket-side-heading > span { display: flex; align-items: center; gap: 10px; }
.ticket-side-panel > summary { cursor: pointer; }
.ticket-side-panel[open] > summary > i { transform: rotate(180deg); }
.ticket-side-panel:not([open]) > :not(summary),
.ticket-side-panel:not([open]) > summary .inline-edit-trigger { display: none; }
.ticket-description-body { padding: 0 16px 14px; }
.ticket-focus .ticket-description-view { padding: 0; }
.ticket-focus .ticket-description-body .lexxy-content { font-size: 13px; font-weight: 400; line-height: 1.65; overflow-wrap: anywhere; }
.ticket-focus .inline-edit-trigger { min-height: 30px; width: 30px; padding: 4px; }
.ticket-focus .inline-edit-trigger span { display: none; }
.ticket-metadata-grid { padding: 0 14px 10px; }
.ticket-metadata-item { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 8px; align-items: center; min-height: 42px; border-top: 1px solid color-mix(in srgb, var(--outline-variant) 18%, transparent); }
.ticket-field-label { color: var(--on-surface-variant); font-size: 12px; }
.ticket-field-value, .ticket-metadata-item > form { min-width: 0; }
.ticket-focus .ticket-metadata-item [data-custom-select-target="button"] { min-height: 36px; padding: 5px 6px; border: 0; background: transparent; box-shadow: none; font-size: 12px; font-weight: 400; }
.ticket-focus .ticket-metadata-item input:not([type="hidden"]) { padding: 5px 6px; min-width: 0; background: transparent; font-weight: 400; }
.ticket-focus :is(.ticket-metadata-item, .task-metadata) .ticket-metadata-input {
  width: 100%;
  min-height: 36px;
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--outline-variant) 40%, transparent);
  border-radius: 6px;
  background: var(--surface-container-lowest);
  color: var(--on-surface);
  font: inherit;
  font-size: 12px;
  outline: none;
}
.ticket-focus :is(.ticket-metadata-item, .task-metadata) .ticket-metadata-input:focus-within {
  border-color: var(--primary);
}
.dark .ticket-focus :is(.ticket-metadata-item, .task-metadata) input:is([type="date"], [type="number"]) { color-scheme: dark; }
.ticket-money-field { display: flex; align-items: center; gap: 6px; }
.ticket-money-symbol { color: var(--on-surface-variant); flex-shrink: 0; }
.ticket-focus .ticket-metadata-item .ticket-money-field input {
  width: 100%;
  padding: 0;
  border: 0;
  outline: none;
  font: inherit;
  font-variant-numeric: tabular-nums;
}
.ticket-file-list { display: flex; flex-direction: column; gap: 8px; padding: 0 12px 12px; }
.ticket-all-files .ticket-file-list { padding: 8px 0 0; }
.ticket-file-row { display: flex; gap: 6px; align-items: center; min-width: 0; padding: 10px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--outline-variant) 30%, transparent); background: var(--surface-container); }
.ticket-file-row p { font-size: 12px; font-weight: 400; letter-spacing: normal; }
.ticket-file-download { display: flex; align-items: center; justify-content: center; width: 30px; min-height: 32px; flex-shrink: 0; }
.ticket-reply-form {
  --reply-accent: var(--primary);
  --reply-editor-min-height: 180px;
  --reply-editor-auto-max-height: 360px;
  --reply-editor-manual-max-height: 600px;
  --reply-surface: color-mix(in srgb, var(--surface-container-lowest) 35%, white);
  --reply-internal-accent: #a86412;
  --reply-internal-button: #e5a43c;
  flex-shrink: 0;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--outline-variant) 50%, transparent);
  border-radius: 10px;
  background: var(--reply-surface);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ambient-shadow-color) 65%, transparent);
}
.ticket-compose { --reply-accent: var(--primary); min-width: 0; border-radius: inherit; }
.ticket-compose[data-reply-mode="internal"] { --reply-accent: var(--reply-internal-accent); }
.ticket-reply-form:has(.ticket-compose[data-reply-mode="internal"]) { --reply-accent: var(--reply-internal-accent); }
.ticket-reply-types { display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px; padding: 0 14px; border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 35%, transparent); }
.ticket-reply-types button { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 12px 8px; border-bottom: 3px solid transparent; font-size: 13px; color: var(--on-surface-variant); transition: color 150ms ease, border-color 150ms ease; }
.ticket-reply-types button:hover { color: var(--primary); }
.ticket-reply-types button[aria-pressed="true"] { border-color: var(--primary); color: var(--primary); font-weight: 600; }
.ticket-reply-types button[data-internal="true"]:is(:hover, [aria-pressed="true"]) { color: var(--reply-internal-accent); }
.ticket-reply-types button[data-internal="true"][aria-pressed="true"] { border-color: var(--reply-internal-accent); }
.ticket-reply-form :is(button, summary):focus-visible { outline-color: var(--reply-accent, var(--primary)); }
.ticket-reply-notice { --reply-notice-background: color-mix(in srgb, var(--reply-internal-accent) 9%, var(--reply-surface)); --reply-notice-border: color-mix(in srgb, var(--reply-internal-accent) 25%, var(--reply-surface)); position: relative; display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 8px 8px; padding: 6px 10px; border: 1px solid var(--reply-notice-border); border-radius: 10px; background: var(--reply-notice-background); color: var(--reply-internal-accent); font-size: 12px; font-weight: 500; }
.ticket-reply-notice::before { content: ""; position: absolute; left: -5px; top: calc(50% - 4px); width: 8px; height: 8px; background: var(--reply-notice-background); border-left: 1px solid var(--reply-notice-border); border-bottom: 1px solid var(--reply-notice-border); transform: rotate(45deg); }
.ticket-reply-notice[hidden] { display: none; }
.ticket-reply-form .rich-text-composer { border: 0; border-radius: 10px 10px 0 0; background: var(--reply-surface); }
.ticket-reply-form .rich-text-composer lexxy-editor { border: 0; border-radius: inherit; background: var(--reply-surface); --lexxy-color-canvas: var(--reply-surface); --lexxy-focus-ring-color: var(--reply-accent); }
.ticket-reply-form .rich-text-composer .lexxy-editor__content {
  box-sizing: border-box;
  height: var(--reply-editor-min-height);
  min-height: var(--reply-editor-min-height);
  max-height: var(--reply-editor-manual-max-height);
  overflow-y: auto;
  resize: vertical;
  padding: 16px 18px;
  font-size: 13px;
  line-height: 1.65;
  scrollbar-color: var(--outline-variant) transparent;
}
.ticket-reply-form lexxy-toolbar { padding: 6px 10px; border-color: color-mix(in srgb, var(--outline-variant) 30%, transparent); background: color-mix(in srgb, var(--surface-container-low) 35%, var(--reply-surface)); }
.ticket-reply-form lexxy-toolbar button:is([name="image"], [name="file"]) { display: none; }
.ticket-reply-form lexxy-toolbar .lexxy-editor__toolbar-button { background: transparent; box-shadow: none; }
.ticket-reply-form lexxy-toolbar .lexxy-editor__toolbar-button:hover:not([aria-disabled="true"]) { background: color-mix(in srgb, var(--reply-accent) 10%, transparent); }
.ticket-reply-form lexxy-toolbar .lexxy-editor__toolbar-button:is([aria-pressed="true"], [aria-expanded="true"], :active):not([aria-disabled="true"]) { background: color-mix(in srgb, var(--reply-accent) 18%, transparent); color: var(--reply-accent); }
.ticket-reply-types ~ .rich-text-composer,
.ticket-reply-types ~ .rich-text-composer lexxy-editor { border-radius: 0; }
.ticket-reply-form .ticket-reply-draft-files { padding: 0 16px 12px; }
.ticket-reply-draft-files > div { margin-top: 0; }
.ticket-compose-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-top: 1px solid color-mix(in srgb, var(--outline-variant) 30%, transparent); border-radius: 0 0 10px 10px; background: color-mix(in srgb, var(--surface-container-low) 20%, var(--reply-surface)); }
.ticket-compose-attachments { display: contents; }
.ticket-compose-tools { display: flex; flex-shrink: 0; gap: 8px; align-items: center; margin-left: auto; }
.ticket-reply-form .ticket-action,
.ticket-reply-form [data-controller~="template-picker"] > button { background: var(--reply-surface); border-color: color-mix(in srgb, var(--outline-variant) 35%, transparent); min-height: 36px; }
.ticket-send { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--primary); color: var(--on-primary); min-height: 38px; padding: 8px 16px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; transition: filter 150ms ease; }
.ticket-send:hover { filter: brightness(1.08); }
.ticket-compose[data-reply-mode="internal"] .ticket-send { background: var(--reply-internal-button); color: #251707; }
.ticket-compose-schedule-popover { max-width: calc(100vw - 48px); }
@media (min-width: 1024px) {
  .ticket-focus { grid-template-columns: minmax(0, 1fr) 320px; }
  .ticket-focus[data-context-sidebar-collapsed="true"] { grid-template-columns: minmax(0, 1fr) 40px; }
  .ticket-focus[data-context-sidebar-collapsed="true"] .ticket-sidebar-toggle span { display: none; }
  .ticket-focus-main { position: sticky; top: 0; align-self: start; }
  .ticket-conversation-panel { height: calc(100dvh - 150px); min-height: 730px; }
  .ticket-conversation-panel:has(.ticket-reply-form) { height: calc(100dvh - 10px + var(--reply-composer-height-delta, 0px)); min-height: calc(870px + var(--reply-composer-height-delta, 0px)); }
  .ticket-thread { flex: 1; }
  .ticket-thread-body { flex: 1; overflow-y: auto; }
  .ticket-focus .ticket-messages-list { height: 100%; }
}
@media (min-width: 1500px) { .ticket-focus { grid-template-columns: minmax(0, 1fr) 360px; } }
@media (max-width: 1279px) {
  .ticket-heading-row { flex-wrap: wrap; }
  .ticket-heading-row > div:first-child { flex-basis: 100%; }
  .ticket-thread-toolbar { flex-wrap: wrap; gap: 0; }
  .ticket-order { margin: 6px 0 8px auto; }
  .ticket-compose-footer { flex-wrap: wrap; }
  .ticket-compose-tools { flex-wrap: wrap; margin-left: auto; }
}
@media (max-width: 1023px) {
  .ticket-focus { grid-template-columns: minmax(0, 1fr); }
  .app-main:has(.ticket-focus) { padding: 12px; }
  .ticket-title, .ticket-title-input { font-size: 21px; }
  .ticket-focus-heading { padding: 14px 12px; }
  .ticket-focus :is(.ticket-action, .ticket-summary-button, .ticket-send, .ticket-title-edit, .inline-edit-trigger, .ticket-file-download) { min-height: 44px; }
  .ticket-focus .ticket-actions [data-dropdown-target="menu"] { max-width: calc(100vw - 48px); }
  .ticket-thread-toolbar { padding: 0 10px; }
  .ticket-thread-tabs { gap: 8px; }
  .ticket-order select { font-size: 16px; }
  .ticket-focus .ticket-messages-list { padding: 12px; }
  .ticket-reply-form { --reply-editor-min-height: 160px; --reply-editor-manual-max-height: clamp(160px, calc(100dvh - 180px), 600px); }
  .ticket-reply-types { padding-inline: 8px; gap: 0 4px; }
  .ticket-reply-form .rich-text-composer .lexxy-editor__content { padding: 14px; font-size: 16px; }
  .ticket-reply-form lexxy-toolbar { flex-wrap: wrap; padding: 4px 6px; }
  .ticket-compose-footer { gap: 8px; }
  .ticket-compose-tools { gap: 6px; }
  .ticket-focus .ticket-metadata-item input:not([type="hidden"]) { font-size: 16px; }
  .ticket-focus :is(.ticket-metadata-item, .task-metadata) .ticket-metadata-input { font-size: 16px; }
}

.ticket-message-header { display: block; padding: 14px 58px 14px 16px; }
.ticket-message-heading-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.ticket-message-author { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ticket-message-avatar { display: flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 32px; overflow: hidden; border-radius: 50%; background: var(--primary-container); color: var(--primary); font-size: 11px; font-weight: 700; }
.ticket-message-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ticket-message-identity { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-width: 0; }
.ticket-message-badge { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 9px; border-radius: 9px; background: var(--message-badge-surface); color: var(--message-accent); font-size: 11px; font-weight: 600; line-height: 1.4; }
.ticket-message-meta { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.ticket-message-time { color: var(--on-surface-variant); font-size: 11px; white-space: nowrap; }
.ticket-message-text { padding: 0 16px 16px; }
.ticket-message-delivery { margin-bottom: 10px; }
.ticket-message-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 0 16px; padding: 12px 0 14px; border-top: 1px solid var(--message-border); }
.ticket-message-visibility { flex-shrink: 0; margin-left: auto; }
.ticket-message-visibility-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 34px; padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--outline-variant) 45%, transparent); border-radius: 6px; background: color-mix(in srgb, var(--message-surface) 65%, var(--surface-container-lowest)); color: var(--on-surface); font-size: 12px; font-weight: 500; cursor: pointer; }
.ticket-message-visibility-button:hover { border-color: var(--message-accent); background: var(--message-badge-surface); }
.ticket-message-attachments { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.ticket-message-attachment { display: inline-flex; align-items: center; max-width: 100%; min-width: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--outline-variant) 30%, transparent); border-radius: 7px; background: color-mix(in srgb, var(--surface-container-low) 30%, var(--message-surface)); }
.ticket-message-attachment-link { display: inline-flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px; color: var(--on-surface); }
.ticket-message-attachment-link:hover { background: var(--message-badge-surface); }
.ticket-message-attachment-link.ticket-message-attachment { border: 1px solid color-mix(in srgb, var(--outline-variant) 30%, transparent); }
.ticket-message-file-icon { flex-shrink: 0; font-size: 20px; }
.ticket-message-file-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ticket-message-file-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 500; }
.ticket-message-file-size { color: var(--on-surface-variant); font-size: 11px; }
.ticket-message-menu { position: absolute; top: 12px; right: 12px; }
.ticket-message-menu-trigger { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; color: var(--on-surface-variant); background: transparent; font-size: 15px; }
.ticket-message-menu-trigger:is(:hover, [aria-expanded="true"]) { background: var(--message-badge-surface); color: var(--message-accent); }
.ticket-message-menu-panel { position: absolute; top: 100%; right: 0; z-index: 40; min-width: 165px; padding: 5px; border: 1px solid var(--outline-variant); border-radius: 7px; background: var(--surface-container-lowest); box-shadow: var(--shadow-ambient); }
.ticket-message-menu-panel.hidden { display: none; }
.ticket-message-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 8px 10px; border-radius: 4px; color: var(--on-surface); font-size: 12px; text-align: left; white-space: nowrap; }
.ticket-message-menu-item:is(:hover, :focus-visible) { background: var(--surface-container-high); }
.ticket-message-copy-feedback { display: block; max-width: 220px; margin-top: 5px; padding: 8px 10px; border-top: 1px solid var(--outline-variant); color: var(--on-surface); font-size: 12px; }
.ticket-message-copy-feedback:empty { display: none; }
.ticket-message-copy-fallback { width: 100%; min-width: 0; max-width: 220px; padding: 8px; border: 1px solid var(--outline-variant); border-radius: 5px; background: var(--surface-container-lowest); color: var(--on-surface); font-size: 12px; }
.ticket-file-icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 5px; background: var(--primary-container); color: var(--primary); flex-shrink: 0; }
.ticket-all-files:not([open]) > .ticket-file-list { display: none; }
.ticket-focus .ticket-metadata-item .font-black { font-weight: 500; }
.dark .ticket-focus :is(.ticket-thread, .ticket-side-panel) { background: var(--surface-container-lowest); }
.dark .ticket-reply-form { --reply-surface: var(--surface-container-lowest); --reply-internal-accent: #f3bc62; --reply-internal-button: #edb550; }
.dark .ticket-message-shell { --message-surface: var(--surface-container-lowest); --message-badge-surface: color-mix(in srgb, var(--primary) 16%, var(--surface-container-low)); }
.dark .ticket-message-shell.ticket-message-internal { --message-surface: #232629; --message-accent: #f0c260; --message-badge-surface: color-mix(in srgb, #d49b23 15%, var(--message-surface)); }
@media (max-width: 639px) {
  .ticket-reply-notice { margin: 0 0 10px auto; }
  .ticket-reply-notice::before { left: auto; right: 28px; top: -5px; border-bottom: 0; border-top: 1px solid var(--reply-notice-border); }
  .ticket-compose-footer { padding: 10px 12px; }
  .ticket-compose-tools { flex: 1; justify-content: flex-end; }
  .ticket-reply-form [data-controller~="template-picker"] > button { min-height: 44px; }
  .ticket-message-header { padding: 12px 60px 12px 12px; }
  .ticket-message-heading-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ticket-message-author { gap: 9px; }
  .ticket-message-meta { justify-content: flex-start; gap: 12px; padding-left: 41px; }
  .ticket-message-meta .ticket-message-chevron { position: absolute; top: 27px; right: 54px; }
  .ticket-message-text { padding: 0 12px 14px; }
  .ticket-message-footer { margin-inline: 12px; }
  .ticket-message-menu { top: 8px; right: 6px; }
  .ticket-message-menu-trigger { width: 44px; height: 44px; }
  .ticket-message-menu-item, .ticket-message-visibility-button { min-height: 44px; }
  .ticket-message-attachment form button { width: 44px; height: 44px; }
}

/* Keep the user card from covering assignment options while the selector is open. */
[class~="group/avatar"]:has([data-custom-select-target="button"][aria-expanded="true"]) > .user-hovercard {
  display: none;
}

.viewport-menu {
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.2);
  overscroll-behavior: contain;
}

.viewport-menu [data-custom-select-target="option"] .truncate {
  white-space: normal;
  overflow-wrap: anywhere;
  text-overflow: clip;
}

/* The description stays above the thread tabs; existing conversations start with a one-line preview. */
.ticket-description-panel { flex-shrink: 0; min-width: 0; border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 25%, transparent); }
.ticket-description-heading { min-width: 0; }
.ticket-description-heading h3 { margin-right: auto; }
.ticket-description-heading > .ticket-description-preview { flex: 1; min-width: 0; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 400; color: var(--on-surface-variant); }
.ticket-description-panel > summary { cursor: pointer; }
.ticket-description-panel[open] > summary > i { transform: rotate(180deg); }
.ticket-description-panel[open] .ticket-description-preview,
.ticket-description-panel:not([open]) > summary .inline-edit-trigger,
details.ticket-description-panel:not([open]) > .ticket-description-body { display: none; }
@media (min-width: 1024px) {
  .ticket-conversation-panel:has(.ticket-description-panel[open], section.ticket-description-panel) { height: auto; }
  .ticket-conversation-panel:has(.ticket-description-panel[open], section.ticket-description-panel) .ticket-thread-body { flex: none; max-height: 50dvh; }
  .ticket-conversation-panel:has(.ticket-description-panel[open], section.ticket-description-panel) .ticket-messages-list { height: auto; }
}

/* Every comment can collapse; the newest starts open. */
.ticket-message-collapsible > summary { cursor: pointer; list-style: none; }
.ticket-message-collapsible > summary::-webkit-details-marker { display: none; }
.ticket-message-collapsible > summary:focus-visible { outline: 1px solid var(--outline-variant); outline-offset: -3px; border-radius: inherit; }
.ticket-message-collapsible:not([open]) > summary { padding-block: 10px; }
.ticket-message-collapsible:not([open]) .ticket-message-heading-row { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; }
.ticket-message-collapsible:not([open]) .ticket-message-author { gap: 8px; }
.ticket-message-collapsible:not([open]) .ticket-message-avatar { flex-basis: 28px; width: 28px; height: 28px; }
.ticket-message-collapsible:not([open]) .ticket-message-identity { flex-wrap: nowrap; gap: 6px; }
.ticket-message-collapsible:not([open]) .ticket-message-name { max-width: 120px; font-size: 12px; }
.ticket-message-collapsible:not([open]) .ticket-message-badge { gap: 5px; padding: 3px 6px; font-size: 10px; white-space: nowrap; }
.ticket-message-preview-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ticket-message-preview { display: block; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--on-surface); font-size: 13px; line-height: 1.65; }
.ticket-message-collapsible:not([open]) > .ticket-message-body,
.ticket-message-collapsible[open] .ticket-message-preview-row { display: none; }
.ticket-message-collapsible[open] .ticket-message-chevron { transform: rotate(180deg); }
.ticket-message-chevron { flex-shrink: 0; color: var(--on-surface-variant); font-size: 11px; }
.ticket-message-attachment-indicator { flex-shrink: 0; color: var(--on-surface-variant); font-size: 12px; }
@media (max-width: 639px) {
  .ticket-message-collapsible:not([open]) .ticket-message-heading-row { gap: 8px; }
  .ticket-message-collapsible:not([open]) .ticket-message-name { max-width: 75px; }
  .ticket-message-collapsible:not([open]) .ticket-message-badge-label,
  .ticket-message-collapsible:not([open]) .ticket-message-time { display: none; }
  .ticket-message-collapsible:not([open]) .ticket-message-meta { padding-left: 0; }
  .ticket-message-collapsible:not([open]) .ticket-message-chevron { position: static; }
  .ticket-message-shell:has(.ticket-message-collapsible:not([open])) .ticket-message-menu { top: 2px; }
}

/* Ticket creation uses the same surfaces and spacing as the conversation view. */
.app-main:has(.ticket-create) { padding: 18px; }
.ticket-create { width: 100%; max-width: 1560px; margin: 0 auto; color: var(--on-surface); }
.ticket-create-intro { padding: 8px 16px 20px; }
.ticket-create-intro h2 { font-size: 28px; font-weight: 700; line-height: 1.25; letter-spacing: -0.6px; }
.ticket-create-intro p { margin-top: 5px; color: var(--on-surface-variant); font-size: 14px; }
.ticket-create-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 32%); align-items: stretch; gap: 14px; }
.ticket-create-card { min-width: 0; border: 1px solid color-mix(in srgb, var(--outline-variant) 35%, transparent); background: var(--surface-container-lowest); border-radius: 7px; }
.ticket-create-main, .ticket-create-data { padding: 22px; display: flex; flex-direction: column; gap: 20px; }
.ticket-create-card-title { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 700; margin-bottom: 2px; }
.ticket-create-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.ticket-create-required { color: #d33b42; }
.ticket-create-input { display: block; width: 100%; min-width: 0; min-height: 42px; padding: 9px 12px; font-size: 13px; line-height: 1.4; border: 1px solid color-mix(in srgb, var(--outline-variant) 45%, transparent); border-radius: 5px; background: var(--surface-container-lowest); color: var(--on-surface); outline: none; }
.ticket-create-input::placeholder { color: var(--on-surface-variant); opacity: 0.8; }
.ticket-create-input:focus, .ticket-create-input:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 15%, transparent); }
.ticket-create-select { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; background: color-mix(in srgb, var(--surface-container) 35%, var(--surface-container-lowest)); }
.ticket-create-select [data-select-icon] { font-size: 16px; width: 24px; text-align: center; color: var(--on-surface-variant); }
.ticket-create-field { min-width: 0; }
.ticket-create-description { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ticket-create-editor { flex: 1; width: 100%; min-width: 0; border: 1px solid color-mix(in srgb, var(--outline-variant) 55%, transparent); border-radius: 5px; background: var(--surface-container-lowest); }
.ticket-create-editor:focus-within { border-color: var(--primary); }
.ticket-create lexxy-editor.ticket-create-editor > .lexxy-editor__content { min-height: 280px; padding: 16px; font-size: 14px; }
.ticket-create-editor lexxy-toolbar { border-radius: 5px 5px 0 0; }
.ticket-create-attachments .ticket-attachment-dropzone { min-height: 130px; }
.ticket-create-additional { margin-top: auto; border-top: 1px solid color-mix(in srgb, var(--outline-variant) 35%, transparent); padding-top: 16px; }
.ticket-create-additional > summary { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; list-style: none; }
.ticket-create-additional > summary::-webkit-details-marker { display: none; }
.ticket-create-additional > summary > span { flex: 1; min-width: 0; }
.ticket-create-additional strong { display: block; font-size: 13px; font-weight: 600; }
.ticket-create-additional small { display: block; margin-top: 3px; font-size: 12px; color: var(--on-surface-variant); }
.ticket-create-additional[open] > summary > i:last-child { transform: rotate(180deg); }
.ticket-create-additional:not([open]) > .ticket-create-additional-fields { display: none; }
.ticket-create-additional-fields { display: flex; flex-direction: column; gap: 18px; margin-top: 18px; }
.ticket-create-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; margin-top: 14px; }
.ticket-create-footer p { font-size: 12px; color: var(--on-surface-variant); }
.ticket-create-actions { display: flex; gap: 10px; }
.ticket-create-cancel, .ticket-create-submit { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 42px; padding: 10px 22px; font-size: 13px; font-weight: 600; border-radius: 5px; }
.ticket-create-cancel { background: var(--surface-container); color: var(--on-surface); }
.ticket-create-submit { background: var(--primary); color: var(--on-primary); }
.ticket-create :is(a, button, summary):focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.ticket-create-errors { padding: 16px; margin-bottom: 16px; border: 1px solid #c54747; border-radius: 6px; background: color-mix(in srgb, #c54747 8%, var(--surface-container-lowest)); font-size: 13px; }
.ticket-create-errors ul { padding-left: 20px; list-style: disc; }
@media (max-width: 1023px) {
  .app-main:has(.ticket-create) { padding: 12px; }
  .ticket-create-grid { grid-template-columns: minmax(0, 1fr); }
  .ticket-create-intro { padding: 0 2px 16px; }
  .ticket-create-intro h2 { display: none; }
  .ticket-create-main, .ticket-create-data { padding: 16px; }
  .ticket-create-input { min-height: 44px; font-size: 16px; }
  .ticket-create lexxy-editor.ticket-create-editor > .lexxy-editor__content { min-height: 230px; font-size: 16px; }
  .ticket-create-cancel, .ticket-create-submit { min-height: 44px; padding: 10px 16px; }
}
@media (max-width: 479px) {
  .ticket-create-footer { align-items: stretch; flex-direction: column; gap: 10px; }
  .ticket-create-actions > * { flex: 1; }
}

/* Shared attachment picker for ticket creation and replies. */
.ticket-attachments { --attachment-accent: var(--reply-accent, var(--primary)); min-width: 0; }
.ticket-attachments-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 8px; }
.ticket-attachments-label { font-size: 13px; font-weight: 600; }
.ticket-attachments-count { color: var(--on-surface-variant); font-size: 11px; }
.ticket-attachment-dropzone { display: flex; align-items: center; gap: 14px; min-height: 94px; padding: 16px; border: 1px dashed color-mix(in srgb, var(--attachment-accent) 45%, var(--outline-variant)); border-radius: 8px; background: color-mix(in srgb, var(--surface-container) 25%, var(--surface-container-lowest)); transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease; }
.ticket-attachment-dropzone[hidden] { display: none; }
.ticket-attachment-dropzone:not([hidden]) { margin-top: 12px; }
.ticket-attachment-dropzone-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--attachment-accent) 9%, var(--surface-container-lowest)); color: var(--attachment-accent); font-size: 22px; }
.ticket-attachment-dropzone-copy { flex: 1; min-width: 0; }
.ticket-attachment-dropzone-copy strong { display: block; color: var(--on-surface); font-size: 13px; font-weight: 600; }
.ticket-attachment-dropzone-copy small { display: block; margin-top: 4px; color: var(--on-surface-variant); font-size: 12px; }
.ticket-attachment-select { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-height: 44px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--attachment-accent) 35%, var(--outline-variant)); border-radius: 6px; background: var(--surface-container-lowest); color: var(--attachment-accent); font-size: 12px; font-weight: 600; cursor: pointer; }
.ticket-attachment-select:hover { background: color-mix(in srgb, var(--attachment-accent) 8%, var(--surface-container-lowest)); }
.ticket-attachment-dropzone:focus-within, .ticket-attachment-dropzone[data-dragging="true"] { border-color: var(--attachment-accent); background: color-mix(in srgb, var(--attachment-accent) 10%, var(--surface-container-lowest)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--attachment-accent) 15%, transparent); }
.ticket-attachment-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 8px; margin-top: 12px; padding: 0; list-style: none; }
.ticket-attachment-list[hidden] { display: none; }
.ticket-attachment-card { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px; border: 1px solid color-mix(in srgb, var(--outline-variant) 45%, transparent); border-radius: 8px; background: var(--surface-container-lowest); }
.ticket-attachment-preview { position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; overflow: hidden; border-radius: 5px; background: var(--surface-container); color: var(--on-surface-variant); font-size: 20px; }
.ticket-attachment-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ticket-attachment-details { flex: 1; min-width: 0; }
.ticket-attachment-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--on-surface); font-size: 12px; font-weight: 500; }
.ticket-attachment-size { display: block; margin-top: 3px; color: var(--on-surface-variant); font-size: 11px; }
.ticket-attachment-remove { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 5px; color: var(--on-surface-variant); font-size: 22px; line-height: 1; cursor: pointer; }
.ticket-attachment-remove:hover { background: color-mix(in srgb, #c54747 10%, var(--surface-container-lowest)); color: #c54747; }
.ticket-attachments :is(button, input):focus-visible { outline: 2px solid var(--attachment-accent); outline-offset: 3px; }
.ticket-attachments-hint { margin-top: 8px; color: var(--on-surface-variant); font-size: 11px; }
@media (max-width: 639px) {
  .ticket-attachment-dropzone { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .ticket-attachment-dropzone-icon { width: 36px; height: 36px; font-size: 20px; }
  .ticket-attachment-select { grid-column: 1 / -1; width: 100%; }
}

/* Reply attachments share the composer toolbar; dragging never shifts the editor. */
.ticket-compose-footer { position: relative; flex-wrap: wrap; }
.ticket-compose-attachments > .ticket-attachment-select { order: 1; width: 44px; min-height: 44px; padding: 6px 10px; border: 0; background: transparent; color: var(--on-surface-variant); }
.ticket-compose-footer > .ticket-compose-tools { order: 2; }
.ticket-compose-attachments > .ticket-attachment-list { order: 3; flex: 0 0 100%; min-width: 0; width: 100%; display: flex; flex-wrap: wrap; margin: 0; gap: 6px; }
.ticket-compose-attachments > .ticket-attachment-list[hidden] { display: none; }
.ticket-compose-attachments .ticket-attachment-card { flex: 0 1 240px; max-width: 100%; padding: 3px 6px; gap: 6px; }
.ticket-compose-attachments .ticket-attachment-preview { width: 32px; height: 32px; }
.ticket-reply-form lexxy-editor[data-dragging="true"] { outline: 2px dashed var(--reply-accent, var(--primary)); outline-offset: -3px; background: color-mix(in srgb, var(--primary) 6%, var(--surface-container-lowest)); }

.ticket-cc-field { position: relative; }
.ticket-cc-menu { position: absolute; top: 100%; left: 0; width: 100%; min-width: 280px; z-index: 999; margin-top: 8px; padding: 8px; border-radius: 6px; background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); box-shadow: 0 8px 24px rgb(0 0 0 / 0.15); }
.ticket-cc-options { margin-top: 8px; }
.ticket-cc-option { display: flex; align-items: center; gap: 10px; padding: 8px; min-height: 44px; border-radius: 4px; cursor: pointer; }
.ticket-cc-option[hidden] { display: none; }
.ticket-cc-option:hover { background: var(--surface-container); }
.ticket-cc-option input { accent-color: var(--primary); width: 16px; height: 16px; flex-shrink: 0; }
.ticket-cc-option span { min-width: 0; overflow-wrap: anywhere; }
.ticket-cc-option strong { display: block; font-size: 12px; font-weight: 600; }
.ticket-cc-option small { display: block; font-size: 11px; color: var(--on-surface-variant); }
.ticket-cc-selected { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ticket-cc-selected:empty { display: none; }
.ticket-cc-disclosure > summary { display: flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 6px; color: var(--primary); font-size: 11px; cursor: pointer; list-style: none; }
.ticket-cc-disclosure > summary::-webkit-details-marker { display: none; }
.ticket-cc-disclosure > summary > i { font-size: 10px; }
.ticket-cc-disclosure[open] > summary > i { transform: rotate(180deg); }
.ticket-cc-disclosure[hidden],
.ticket-cc-disclosure[open] .ticket-cc-show,
.ticket-cc-disclosure:not([open]) .ticket-cc-hide,
.ticket-cc-disclosure:not([open]) > .ticket-cc-selected { display: none; }
.ticket-cc-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 6px; background: var(--surface-container); border-radius: 5px; color: var(--on-surface); font-size: 11px; }
.ticket-cc-chip > span { min-width: 0; overflow-wrap: anywhere; }
.ticket-cc-chip button { min-width: 28px; min-height: 28px; font-size: 18px; }
.ticket-cc-empty { padding: 12px 8px; font-size: 12px; color: var(--on-surface-variant); }
.ticket-cc-error { margin-top: 8px; font-size: 12px; color: var(--on-surface-variant); }
.ticket-cc-error button { color: var(--primary); text-decoration: underline; }
.ticket-cc-add { width: 100%; min-height: 44px; margin-top: 6px; padding: 8px; text-align: left; overflow-wrap: anywhere; border-radius: 4px; color: var(--primary); background: var(--surface-container); font-size: 13px; }
.ticket-cc-add[hidden] { display: none; }

/* Tasks share the ticket workspace; the violet top edge identifies the task. */
.task-workspace { --task-accent: #6850a2; }
.dark .task-workspace { --task-accent: #b8a3e6; }
.task-workspace .ticket-thread { border-top: 3px solid var(--task-accent); }
.task-parent { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--primary); }
.task-subtasks-body { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px 14px; }
.task-progress { font-size: 12px; color: var(--on-surface-variant); }
.task-progress progress { appearance: none; display: block; width: 100%; height: 5px; margin-top: 8px; border: 0; border-radius: 8px; overflow: hidden; background: var(--surface-container); accent-color: var(--primary); }
.task-progress progress::-webkit-progress-bar { background: var(--surface-container); }
.task-progress progress::-webkit-progress-value { background: var(--primary); border-radius: 8px; }
.task-progress progress::-moz-progress-bar { background: var(--primary); }
.task-subtask-list { display: flex; flex-direction: column; gap: 8px; }
.task-subtask-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; border: 1px solid color-mix(in srgb, var(--outline-variant) 25%, transparent); border-radius: 5px; background: var(--surface); min-width: 0; }
.task-subtask-row:hover { background: var(--surface-container-low); }
.task-subtask-row > span { font-size: 12px; }
.task-subtask-row > span:first-of-type { width: auto; }
.task-subtask-row > span:nth-of-type(2) { flex-basis: calc(100% - 70px); white-space: normal; overflow-wrap: anywhere; }
.task-subtask-done { opacity: 0.7; }
.task-subtask-row > span:last-child { margin-left: auto; font-size: 10px; text-transform: none; letter-spacing: 0; }
.task-empty { font-size: 12px; color: var(--on-surface-variant); }
.task-add-subtask { align-self: flex-start; }
.task-subtasks:not([open]) > .task-subtasks-body, .task-metadata:not([open]) > .task-metadata-fields { display: none; }
.task-metadata-fields { display: flex; flex-direction: column; padding: 0 14px 14px; }
.task-metadata-field { display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; min-height: 42px; border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 25%, transparent); }
.task-field-label { font-size: 12px; color: var(--on-surface-variant); }
.task-metadata-input { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-width: 0; min-height: 38px; padding: 7px 6px; background: transparent; border: 0; border-radius: 4px; font-size: 12px; color: var(--on-surface); }
.task-metadata input:not([type='hidden'], [type='checkbox']) { border-radius: 4px; min-width: 0; font-size: 12px; background: transparent; }
.task-hours-input { text-align: center; font-variant-numeric: tabular-nums; }
.task-hours-add { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border: 1px solid color-mix(in srgb, var(--outline-variant) 40%, transparent); border-radius: 6px; background: var(--surface-container-lowest); color: var(--primary); font-size: 18px; }
.task-hours-add:hover { background: var(--surface-container-low); }
.task-hours-add:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.task-metadata-fields > .h-px { display: none; }
.task-metadata-fields > .grid { gap: 10px; }
.task-metadata-fields > .grid .task-metadata-field { display: flex; flex-direction: column; align-items: stretch; border: 0; }
.task-conversion { order: 1; border-top: 1px solid color-mix(in srgb, var(--outline-variant) 30%, transparent); padding-top: 14px; margin-top: 14px; }
.task-conversion summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--primary); }
.task-conversion:not([open]) > :not(summary) { display: none; }
@media (max-width: 1023px) {
  .task-metadata-input, .task-metadata input:not([type='checkbox']) { font-size: 16px; min-height: 44px; }
}

/* Underlined navbar search, using the same navy and cyan palette as the chrome. */
.global-search { position: relative; display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; max-width: 384px; height: 40px; padding-bottom: 3px; }
.global-search::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--primary) 60%, var(--on-surface-variant)); opacity: 0.7; box-shadow: 0 2px 7px color-mix(in srgb, var(--primary) 18%, transparent); transition: opacity 160ms, box-shadow 160ms; pointer-events: none; }
.global-search:focus-within::after { opacity: 1; background: var(--primary); box-shadow: 0 2px 10px color-mix(in srgb, var(--primary) 45%, transparent); }
.global-search-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--on-surface); font-size: 15px; cursor: pointer; }
.global-search-icon:hover, .global-search:focus-within .global-search-icon { color: var(--primary); }
.global-search-icon:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.global-search-input { display: block; flex: 1; min-width: 0; width: 100%; padding: 6px 8px 6px 0; border: 0; border-radius: 0; background: transparent; color: var(--on-surface); font-size: 14px; line-height: 1.5; outline: none; box-shadow: none; }
.global-search-input:focus { background: transparent; outline: none; box-shadow: none; }
.global-search-input::placeholder { color: var(--on-surface-variant); opacity: 0.8; }
.global-search-results { position: absolute; top: calc(100% + 10px); left: 0; width: 100%; background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-radius: 7px; overflow: hidden; box-shadow: 0 10px 24px rgb(0 0 0 / 0.22); z-index: 50; }
.global-search-groups { max-height: 60dvh; overflow-y: auto; overscroll-behavior: contain; }
.global-search-results [aria-selected="true"] { background: var(--primary-container); box-shadow: inset 3px 0 var(--primary); }
.global-search-results [aria-selected="true"] h4 { color: var(--primary); }
@media (max-width: 1023px) {
  .global-search { height: 44px; }
  .global-search-input { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .global-search::after { transition: none; } }

/* Profile settings: a compact account rail and one focused section at a time. */
.app-main:has(.profile-settings) { padding: 24px; }
.profile-settings { width: 100%; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; color: var(--on-surface); }
.profile-sidebar, .profile-workspace, .profile-form, .profile-field { min-width: 0; }
.profile-sidebar { display: grid; gap: 16px; position: sticky; top: 0; }
.profile-identity, .profile-navigation, .profile-panel, .profile-save-bar { background: var(--surface-container-lowest); border: 1px solid color-mix(in srgb, var(--outline-variant) 30%, transparent); border-radius: 8px; }
.profile-identity { padding: 24px 20px; border-top: 3px solid var(--primary); }
.profile-avatar { width: 64px; height: 64px; flex-shrink: 0; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: var(--primary-container); color: var(--primary); font-size: 22px; font-weight: 600; overflow: hidden; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-identity h2 { margin-top: 16px; font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.profile-role { display: inline-flex; margin-top: 8px; padding: 3px 9px; background: var(--surface-container); color: var(--on-surface-variant); border-radius: 5px; font-size: 11px; }
.profile-company { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; font-size: 12px; color: var(--on-surface-variant); overflow-wrap: anywhere; }
.profile-navigation { display: flex; flex-direction: column; gap: 4px; padding: 8px; }
.profile-nav-item { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 64px; padding: 12px; border-radius: 5px; text-align: left; border-left: 3px solid transparent; color: var(--on-surface-variant); cursor: pointer; }
.profile-nav-item > i:first-child { width: 18px; font-size: 16px; text-align: center; flex-shrink: 0; }
.profile-nav-item > span { flex: 1; min-width: 0; }
.profile-nav-title { display: block; font-size: 13px; font-weight: 500; }
.profile-nav-description { display: block; margin-top: 3px; font-size: 10px; color: var(--on-surface-variant); }
.profile-nav-arrow { font-size: 9px; opacity: 0; }
.profile-nav-item:hover { background: var(--surface); }
.profile-nav-item[aria-selected="true"] { background: color-mix(in srgb, var(--primary) 9%, var(--surface-container-lowest)); color: var(--primary); border-color: var(--primary); }
.profile-nav-item[aria-selected="true"] .profile-nav-arrow { opacity: 1; }
.profile-panel { overflow-wrap: anywhere; }
.profile-settings [hidden] { display: none !important; }
.profile-panel-heading { padding: 24px 28px; border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 25%, transparent); }
.profile-panel-heading h2 { font-size: 20px; font-weight: 600; }
.profile-panel-heading p { margin-top: 6px; font-size: 13px; line-height: 1.65; color: var(--on-surface-variant); }
.profile-panel-body { display: flex; flex-direction: column; gap: 28px; padding: 28px; }
.profile-photo-field { display: flex; align-items: center; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 22%, transparent); }
.profile-photo-field .profile-field { flex: 1; }
.profile-field { display: flex; flex-direction: column; gap: 8px; }
.profile-field > label, .profile-toggle-copy > label { font-size: 13px; font-weight: 500; }
.profile-fields-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.profile-input { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; font-size: 13px; color: var(--on-surface); background: var(--surface); border: 1px solid color-mix(in srgb, var(--outline-variant) 48%, transparent); border-radius: 5px; }
.profile-input::placeholder { color: var(--on-surface-variant); opacity: 0.7; }
.profile-input:focus { outline: 2px solid color-mix(in srgb, var(--primary) 25%, transparent); outline-offset: 1px; border-color: var(--primary); }
.profile-file-input { display: block; width: 100%; min-width: 0; max-width: 100%; font-size: 12px; color: var(--on-surface-variant); }
.profile-file-input::file-selector-button { min-height: 36px; padding: 7px 12px; margin-right: 10px; border-radius: 5px; border: 1px solid color-mix(in srgb, var(--outline-variant) 40%, transparent); background: var(--surface-container); color: var(--on-surface); cursor: pointer; }
.profile-hint { font-size: 12px; font-weight: 400; color: var(--on-surface-variant); line-height: 1.65; }
.profile-subsection { display: flex; flex-direction: column; gap: 12px; }
.profile-subsection h3, .profile-api-key h3 { font-size: 13px; font-weight: 600; }
.profile-subsection + .profile-subsection { padding-top: 24px; border-top: 1px solid color-mix(in srgb, var(--outline-variant) 25%, transparent); }
.profile-toggle-list { border: 1px solid color-mix(in srgb, var(--outline-variant) 25%, transparent); border-radius: 6px; }
.profile-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px; }
.profile-toggle-row + .profile-toggle-row { border-top: 1px solid color-mix(in srgb, var(--outline-variant) 20%, transparent); }
.profile-toggle-copy { min-width: 0; }
.profile-toggle-copy > label { display: block; cursor: pointer; line-height: 1.6; }
.profile-toggle-copy p { margin-top: 6px; }
.profile-switch { appearance: none; position: relative; display: block; flex-shrink: 0; width: 38px; height: 22px; border-radius: 999px; border: 1px solid var(--outline-variant); background: var(--surface-container-high); cursor: pointer; transition: background 150ms; }
.profile-switch::after { content: ""; position: absolute; width: 14px; height: 14px; left: 3px; top: 3px; border-radius: 50%; background: var(--on-surface-variant); transition: transform 150ms; }
.profile-switch:checked { background: var(--primary); border-color: var(--primary); }
.profile-switch:checked::after { transform: translateX(16px); background: var(--on-primary); }
.profile-toggle-row:has(.profile-switch:disabled) { opacity: 0.5; }
.profile-switch:disabled { cursor: not-allowed; }
.profile-note { display: flex; align-items: baseline; gap: 12px; padding: 16px; border-radius: 6px; background: color-mix(in srgb, var(--primary) 6%, var(--surface-container-lowest)); border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent); color: var(--on-surface-variant); font-size: 13px; line-height: 1.7; }
.profile-note > i { color: var(--primary); }
.profile-save-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 14px; padding: 16px 20px; }
.profile-save-bar p { color: var(--on-surface-variant); font-size: 11px; }
.profile-save-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.profile-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; min-height: 42px; border-radius: 5px; font-size: 12px; font-weight: 500; cursor: pointer; }
.profile-button-primary { background: var(--primary); color: var(--on-primary); }
.profile-button-primary:hover { background: var(--primary-dim); }
.profile-button-secondary { border: 1px solid color-mix(in srgb, var(--outline-variant) 35%, transparent); background: var(--surface); color: var(--on-surface); }
.profile-button-danger { color: var(--on-error-container); background: var(--error-container); border: 1px solid var(--error-container); }
.profile-button-secondary:hover, .profile-button-danger:hover { background: var(--surface-container); }
.profile-errors { margin-bottom: 16px; padding: 20px; border: 1px solid var(--error-container); border-radius: 8px; background: var(--error-container); color: var(--on-error-container); font-size: 13px; }
.profile-errors h2 { font-weight: 600; }
.profile-errors ul { margin-top: 8px; padding-left: 20px; list-style: disc; }
.profile-errors p { margin-top: 8px; }
.profile-api-token { display: block; }
.profile-api-token h3 { color: var(--on-surface); font-weight: 600; }
.profile-api-token code { display: block; margin-top: 10px; padding: 12px; border-radius: 5px; background: var(--surface-container-lowest); color: var(--on-surface); font-size: 12px; overflow-wrap: anywhere; }
.profile-api-create { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; }
.profile-api-list { border: 1px solid color-mix(in srgb, var(--outline-variant) 25%, transparent); border-radius: 6px; }
.profile-api-key { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 16px; }
.profile-api-key > div { min-width: 0; flex: 1; }
.profile-api-key + .profile-api-key { border-top: 1px solid color-mix(in srgb, var(--outline-variant) 20%, transparent); }
.profile-empty { padding: 32px 20px; text-align: center; color: var(--on-surface-variant); }
.profile-empty > i { font-size: 24px; color: var(--primary); }
.profile-empty p { margin-top: 12px; font-size: 14px; font-weight: 500; }
.profile-empty span { display: block; margin-top: 6px; font-size: 12px; }
.profile-settings :is(button, a, input, select, [role="tabpanel"]):focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
@media (max-width: 1023px) {
  .app-main:has(.profile-settings) { padding: 16px; }
  .profile-settings { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .profile-sidebar { position: static; gap: 12px; }
  .profile-identity { display: flex; align-items: center; gap: 16px; padding: 18px; }
  .profile-identity-text { min-width: 0; }
  .profile-identity h2 { margin-top: 0; }
  .profile-company { margin-top: 8px; }
  .profile-navigation { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .profile-nav-item { min-height: 44px; justify-content: center; gap: 8px; padding: 10px 6px; border-left: 0; border-bottom: 2px solid transparent; }
  .profile-nav-item > span { flex: none; }
  .profile-nav-description, .profile-nav-arrow { display: none; }
  .profile-nav-title { font-size: 12px; }
  .profile-input { font-size: 16px; }
}
@media (max-width: 639px) {
  .app-main:has(.profile-settings) { padding: 12px; }
  .profile-navigation { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-panel-heading, .profile-panel-body { padding: 20px 16px; }
  .profile-panel-heading h2 { font-size: 18px; }
  .profile-fields-grid, .profile-api-create { grid-template-columns: minmax(0, 1fr); }
  .profile-photo-field { align-items: flex-start; flex-direction: column; gap: 14px; }
  .profile-photo-field .profile-field { width: 100%; }
  .profile-toggle-row { padding: 14px 12px; gap: 12px; }
  .profile-save-bar { padding: 16px; }
  .profile-save-actions { width: 100%; margin: 0; }
  .profile-save-actions .profile-button { flex: 1; padding-inline: 10px; }
  .profile-button { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .profile-switch, .profile-switch::after { transition: none; }
}

/* Match the shared CC combobox to the ticket metadata column. */
.ticket-focus .ticket-cc-inline { width: 100%; min-width: 0; }
.ticket-focus .ticket-cc-inline > button { min-height: 36px; padding: 5px 6px; border: 0; background: transparent; font-size: 12px; }
.ticket-focus .ticket-cc-inline > button > span { min-width: 0; white-space: normal; }
.ticket-focus .ticket-cc-inline .ticket-cc-selected { margin-top: 4px; }
.ticket-focus .ticket-cc-inline .ticket-cc-menu input[type="text"] { border: 1px solid var(--outline-variant); padding: 9px 12px; background: var(--surface); }
@media (max-width: 1023px) {
  .ticket-focus .ticket-cc-inline > button { min-height: 44px; }
}

/* The grouped controls remain direct buttons so Lexxy can move them into Más. */
lexxy-toolbar[data-advanta-toolbar] {
  --lexxy-toolbar-button-size: 30px;
  --lexxy-toolbar-icon-size: 15px;
  --lexxy-toolbar-spacing: 3px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2px;
  position: relative;
  min-width: 0;
  padding: 6px 10px;
  background: transparent;
}

.ticket-reply-form lexxy-toolbar[data-advanta-toolbar] {
  flex-wrap: nowrap;
  background: transparent;
}

lexxy-toolbar[data-advanta-toolbar] > .lexxy-editor__toolbar-button {
  flex: 0 0 auto;
  min-width: 30px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  color: var(--on-surface-variant);
}

lexxy-toolbar[data-advanta-toolbar] > .lexxy-editor__toolbar-button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

lexxy-toolbar[data-advanta-toolbar] > .lexxy-editor__toolbar-button:is([aria-pressed="true"], [aria-expanded="true"]):not(:disabled) {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 16%, transparent);
}

lexxy-toolbar[data-advanta-toolbar] button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

lexxy-toolbar[data-advanta-toolbar] > [data-advanta-group-start] {
  margin-inline-start: 7px;
  position: relative;
}

lexxy-toolbar[data-advanta-toolbar] > [data-advanta-group-start]::before {
  content: "";
  position: absolute;
  width: 1px;
  height: 16px;
  inset-inline-start: -5px;
  background: color-mix(in srgb, var(--outline-variant) 65%, transparent);
}

lexxy-toolbar[data-advanta-toolbar] > .lexxy-editor__toolbar-button--chevron {
  display: flex;
  gap: 4px;
  padding-inline: 5px;
  min-width: 36px;
}

lexxy-toolbar[data-advanta-toolbar] > .lexxy-editor__toolbar-button--chevron::after {
  content: "";
  width: 4px;
  height: 4px;
  border-bottom: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
}

lexxy-toolbar[data-advanta-toolbar] > [data-advanta-floating-dropdown] {
  position: absolute;
  width: 0;
  height: 0;
  inset: 0 auto auto 0;
}

[data-advanta-floating-dropdown] > [data-dropdown-trigger] {
  display: none !important;
}

lexxy-toolbar[data-advanta-toolbar] [data-advanta-floating-dropdown] > [data-dropdown-panel] {
  position: absolute;
  z-index: 80;
  overflow: auto;
  border: 1px solid var(--outline-variant);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgb(0 0 0 / 18%);
}

lexxy-toolbar[data-advanta-toolbar] .lexxy-editor__toolbar-overflow {
  margin-inline-start: 2px;
  flex: 0 0 auto;
}

lexxy-toolbar[data-advanta-toolbar] .lexxy-editor__toolbar-dropdown--link > [data-dropdown-panel] {
  width: 340px;
  min-width: 0;
  padding: 10px;
  flex-direction: column;
  gap: 8px;
  inset-inline-end: auto;
}

lexxy-toolbar[data-advanta-toolbar] .lexxy-editor__toolbar-dropdown--link input[type="url"] {
  flex: none;
  min-width: 0;
  width: 100%;
  min-height: 36px;
}

lexxy-toolbar[data-advanta-toolbar] .lexxy-editor__toolbar-dropdown--link .lexxy-editor__toolbar-dropdown-actions {
  flex: none;
  width: 100%;
  min-width: 0;
}

lexxy-toolbar[data-advanta-toolbar] .lexxy-editor__toolbar-dropdown--link .lexxy-editor__toolbar-dropdown-actions > button {
  flex: 1;
  min-width: 0;
  min-height: 36px;
}

lexxy-toolbar[data-advanta-toolbar] .lexxy-editor__toolbar-overflow > [data-dropdown-panel] {
  right: 0;
  flex-wrap: wrap;
  width: min(280px, calc(100vw - 24px));
  padding: 8px;
  gap: 4px;
  border-width: 1px;
  border-radius: 8px;
  z-index: 70;
}

lexxy-toolbar[data-advanta-toolbar] .lexxy-editor__toolbar-overflow-menu > button {
  background: transparent;
  margin-inline: 0;
}

lexxy-toolbar[data-advanta-toolbar] .lexxy-editor__toolbar-overflow-menu > button::before {
  display: none;
}

lexxy-toolbar .advanta-list-preview {
  width: 25px;
  text-align: center;
  font-weight: 600;
  flex: 0 0 auto;
}

lexxy-toolbar[data-advanta-toolbar] [data-advanta-floating-dropdown] > .lexxy-editor__toolbar-dropdown-list[data-dropdown-panel] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 220px;
  padding: 5px;
}

lexxy-toolbar[data-advanta-toolbar] [data-advanta-floating-dropdown] > .lexxy-editor__toolbar-dropdown-list > button {
  display: flex;
  align-items: center;
  width: 100%;
  height: auto;
  min-height: 36px;
  padding: 8px;
  gap: 8px;
  text-align: left;
}

lexxy-toolbar[data-advanta-toolbar] [data-advanta-floating-dropdown] > .lexxy-editor__toolbar-dropdown-list > button > span:not([data-advanta-toolbar-icon]) {
  display: block;
  font-size: 12px;
  line-height: 1.4;
}

lexxy-toolbar[data-advanta-toolbar] .lexxy-editor__toolbar-dropdown--highlight > [data-dropdown-panel] {
  width: 276px;
  min-width: 0;
  padding: 12px;
  flex-direction: column;
}

lexxy-toolbar[data-advanta-toolbar] .lexxy-editor__toolbar-dropdown--highlight > [data-dropdown-panel] .lexxy-highlight-colors {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.advanta-color-group { display: flex; flex-direction: column; gap: 8px; }
.advanta-color-heading { font-size: 12px; font-weight: 600; }
.advanta-color-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; }

lexxy-toolbar[data-advanta-toolbar] .lexxy-editor__toolbar-dropdown--highlight > [data-dropdown-panel] .advanta-color-grid .lexxy-highlight-button {
  width: 26px;
  inline-size: 26px;
  min-width: 0;
  height: 26px;
  block-size: 26px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--outline) 55%, transparent);
  border-radius: 4px;
  background: var(--advanta-swatch);
}

lexxy-toolbar[data-advanta-toolbar] .lexxy-editor__toolbar-dropdown--highlight > [data-dropdown-panel] .advanta-color-grid .lexxy-highlight-button::before,
lexxy-toolbar[data-advanta-toolbar] .lexxy-editor__toolbar-dropdown--highlight > [data-dropdown-panel] .advanta-color-grid .lexxy-highlight-button::after { display: none; }

lexxy-toolbar[data-advanta-toolbar] .lexxy-editor__toolbar-dropdown--highlight > [data-dropdown-panel] .advanta-color-grid .lexxy-highlight-button[aria-pressed="true"] {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  background: var(--advanta-swatch);
}

lexxy-toolbar .advanta-color-reset,
lexxy-toolbar .lexxy-editor__toolbar-dropdown-reset {
  width: auto;
  height: auto;
  padding: 4px 0;
  font-size: 12px;
  text-align: left;
  background: transparent;
  color: var(--on-surface-variant);
}

lexxy-toolbar[data-advanta-toolbar] .lexxy-editor__toolbar-dropdown--highlight > [data-dropdown-panel] .advanta-color-reset::after {
  display: none;
}

.lexxy-content :is(ul, ol).advanta-list-circle { list-style-type: circle; }
.lexxy-content :is(ul, ol).advanta-list-square { list-style-type: square; }
.lexxy-content :is(ul, ol).advanta-list-lower-alpha { list-style-type: lower-alpha; }
.lexxy-content :is(ul, ol).advanta-list-upper-alpha { list-style-type: upper-alpha; }
.lexxy-content :is(ul, ol).advanta-list-lower-roman { list-style-type: lower-roman; }
.lexxy-content :is(ul, ol).advanta-list-upper-roman { list-style-type: upper-roman; }

@media (max-width: 639px) {
  lexxy-toolbar[data-advanta-toolbar] { --lexxy-toolbar-button-size: 32px; padding: 4px 6px; }
  lexxy-toolbar[data-advanta-toolbar] > .lexxy-editor__toolbar-button { min-width: 32px; }
  lexxy-toolbar[data-advanta-toolbar] > .lexxy-editor__toolbar-button--chevron { min-width: 36px; }
  lexxy-toolbar[data-advanta-toolbar] > [data-advanta-group-start] { margin-inline-start: 5px; }
}

.ticket-reply-form lexxy-toolbar[data-advanta-toolbar] .advanta-color-grid .lexxy-highlight-button:is(:hover, [aria-pressed="true"], :active) {
  background: var(--advanta-swatch);
}

/* Company filters and group colors use the same surfaces as the application. */
.company-filter { min-width: 0; }
.company-filter-label { display: block; margin-bottom: 5px; font-size: 11px; color: var(--on-surface-variant); }
.company-filter-trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--outline-variant); border-radius: 8px; background: var(--surface-container); color: var(--on-surface); text-align: left; font-size: 12px; }
.company-filter-trigger > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.company-filter-trigger[aria-expanded="true"] { border-color: var(--primary); }
.company-filter-menu { position: absolute; z-index: 1001; width: 300px; padding: 5px; border: 1px solid var(--outline-variant); border-radius: 10px; background: var(--surface-container-lowest); box-shadow: 0 8px 24px #0003; }
.company-filter-menu.hidden { display: none; }
.company-filter-option { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 7px 9px; border-radius: 6px; text-align: left; color: var(--on-surface); font-size: 12px; }
.company-filter-option:hover { background: var(--surface-container); }
.company-filter-option[aria-pressed="true"] { background: color-mix(in srgb, var(--primary) 15%, var(--surface-container-lowest)); color: var(--primary); }
.company-filter-initial { display: grid; place-items: center; flex: 0 0 26px; height: 26px; border-radius: 6px; background: var(--surface-container-high); font-size: 11px; font-weight: 600; }
.company-filter-name { flex: 1; overflow-wrap: anywhere; }
.company-filter-check { visibility: hidden; }
.company-filter-option[aria-pressed="true"] .company-filter-check { visibility: visible; }
.company-filter :is(button):focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.ticket-color-picker { border: 0; padding: 0; margin-top: 6px; min-width: 0; }
.ticket-color-picker legend { margin-bottom: 8px; font-size: 13px; font-weight: 600; }
.ticket-color-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ticket-color-option { --swatch: #3b82f6; display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px; border: 1px solid var(--outline-variant); border-radius: 8px; cursor: pointer; }
.ticket-color-option[data-color="cyan"] { --swatch: #0891b2; }
.ticket-color-option[data-color="green"] { --swatch: #16a34a; }
.ticket-color-option[data-color="yellow"] { --swatch: #ca8a04; }
.ticket-color-option[data-color="orange"] { --swatch: #ea580c; }
.ticket-color-option[data-color="red"] { --swatch: #dc2626; }
.ticket-color-option[data-color="purple"] { --swatch: #9333ea; }
.ticket-color-option[data-color="gray"] { --swatch: #64748b; }
.ticket-color-option:hover, .ticket-color-option:has(input:checked) { background: color-mix(in srgb, var(--swatch) 12%, var(--surface-container-lowest)); border-color: var(--swatch); }
.ticket-tabs-group-form .ticket-color-option input { appearance: none; flex: 0 0 18px; width: 18px; height: 18px; min-height: 18px; padding: 0; margin: 0; border: 0; border-radius: 50%; background: var(--swatch); }
.ticket-color-check { margin-left: auto; visibility: hidden; color: var(--on-surface); }
.ticket-color-option:has(input:checked) .ticket-color-check { visibility: visible; }
@media (max-width: 639px) {
  .company-filter-trigger, .company-filter-option, .ticket-color-option { min-height: 44px; }
}

/* Roadmap uses the ticket workspace with its own blue identity. */
.roadmap-workspace { --roadmap-accent: #087fba; }
.dark .roadmap-workspace { --roadmap-accent: #59b7ef; }
.roadmap-workspace .ticket-thread { border-top: 3px solid var(--roadmap-accent); }
.roadmap-detail-blocks { display: flex; flex-direction: column; gap: 16px; }
.roadmap-workspace .ticket-focus-heading { border-bottom: 0; }
.roadmap-workspace :is(p, dd) { overflow-wrap: anywhere; }
.roadmap-context-panel {
  background: var(--surface-container-lowest);
  border: 1px solid color-mix(in srgb, var(--outline-variant) 28%, transparent);
  border-radius: 7px;
}

.roadmap-section-heading { display: flex; align-items: center; gap: 10px; min-width: 0; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 25%, transparent); }
.roadmap-section-heading > i { color: var(--roadmap-accent); font-size: 13px; }
.roadmap-section-heading h2 { font-size: 13px; font-weight: 600; }
.roadmap-section-count { padding: 2px 7px; border-radius: 5px; background: var(--surface-container); color: var(--on-surface-variant); font-size: 10px; font-weight: 700; }
.roadmap-section-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 25%, transparent); }
.roadmap-section-toolbar .roadmap-section-heading { margin: 0; padding: 0; border: 0; }
.roadmap-link-box { margin-top: 20px; padding: 14px; border: 1px solid color-mix(in srgb, var(--outline-variant) 25%, transparent); border-radius: 6px; background: color-mix(in srgb, var(--surface-container-low) 35%, var(--surface-container-lowest)); }
.roadmap-metadata > div { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 20%, transparent); }
.roadmap-metadata > div:last-child { border-bottom: 0; }
.roadmap-metadata dd { margin: 0; font-size: 12px; }
.roadmap-metadata dt { font-size: 12px; }
.roadmap-comment { min-width: 0; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--outline-variant) 22%, transparent); border-left: 2px solid color-mix(in srgb, var(--roadmap-accent) 55%, transparent); border-radius: 6px; background: color-mix(in srgb, var(--surface-container-low) 25%, var(--surface-container-lowest)); }
.roadmap-comment-compose { margin-top: 20px; padding: 16px; border: 1px solid color-mix(in srgb, var(--outline-variant) 30%, transparent); border-radius: 7px; background: color-mix(in srgb, var(--surface-container-low) 35%, var(--surface-container-lowest)); }
.roadmap-comment-compose > label { display: block; padding-bottom: 12px; border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 25%, transparent); color: var(--roadmap-accent); }
.roadmap-comment-compose > div:last-child { padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--outline-variant) 25%, transparent); }

/* Group labels disappear in the icon rail; every permitted shortcut stays available. */
.sidebar-group + .sidebar-group { margin-top: 14px; }
.sidebar-group-heading { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 6px 8px; margin-bottom: 4px; color: var(--on-surface-variant); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.sidebar-group-toggle { border-radius: 5px; cursor: pointer; }
.sidebar-group-toggle:hover { background: var(--surface-container-lowest); color: var(--on-surface); }
.sidebar-group-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.sidebar-group-toggle i { font-size: 9px; transition: transform 150ms; }
.sidebar-group[data-group-open="false"] .sidebar-group-toggle i { transform: rotate(-90deg); }
.sidebar-group[data-group-open="false"] .sidebar-group-links { display: none; }
@media (min-width: 1024px) {
  html[data-sidebar-collapsed="true"] .sidebar-group-heading { display: none; }
  html[data-sidebar-collapsed="true"] .sidebar-group .sidebar-group-links { display: block; }
  html[data-sidebar-collapsed="true"] .sidebar-group + .sidebar-group { margin-top: 8px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--outline-variant) 25%, transparent); }
}

/* The dashboard separates current workload from period-based service results. */
.dashboard-workspace {
  --dashboard-accent: #087fba;
  --dashboard-success: #15957a;
  --dashboard-warning: #a46b1b;
  --dashboard-danger: #b3261e;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  min-width: 0;
  padding-bottom: 8px;
}
.dark .dashboard-workspace { --dashboard-accent: #59b7ef; --dashboard-success: #54cbb2; --dashboard-warning: #ebbd68; --dashboard-danger: #ffb4ab; }
.dashboard-workspace :is(a, button, summary):focus-visible { outline: 2px solid var(--dashboard-accent); outline-offset: 3px; }
.dashboard-new-ticket { align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 6px 10px; border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent); border-radius: 7px; background: var(--primary-container); color: var(--on-surface); font-size: 12px; font-weight: 600; white-space: nowrap; }
.dashboard-new-ticket:hover { border-color: var(--primary); }
.dashboard-toolbar { position: relative; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.dashboard-intro { flex: 1 1 280px; min-width: 0; }
.dashboard-intro-title { margin-bottom: 3px; color: var(--on-surface); font-size: 14px; font-weight: 600; }
.dashboard-caption { color: var(--on-surface-variant); font-size: 11px; line-height: 1.6; }
.dashboard-filters { display: flex; flex: 0 1 auto; align-items: end; gap: 8px; min-width: 0; }
.dashboard-filter { flex: 1 1 0; min-width: 145px; }
.dashboard-filter-label { display: block; margin-bottom: 4px; color: var(--on-surface-variant); font-size: 10px; font-weight: 600; }
.dashboard-select { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-width: 0; min-height: 36px; padding: 8px 11px; border: 1px solid color-mix(in srgb, var(--outline-variant) 35%, transparent); border-bottom: 2px solid var(--dashboard-accent); border-radius: 6px; background: var(--surface-container-lowest); color: var(--on-surface); font-size: 12px; font-weight: 600; cursor: pointer; }
.dashboard-select:hover { background: var(--surface-container-low); }
.dashboard-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dashboard-kpis--client { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dashboard-kpi { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px 16px 12px; border: 1px solid color-mix(in srgb, var(--outline-variant) 24%, transparent); border-top: 3px solid var(--dashboard-accent); border-radius: 7px; background: var(--surface-container-lowest); box-shadow: 0 2px 5px #00000004; transition: background 150ms, border-color 150ms; }
a.dashboard-kpi:hover { background: color-mix(in srgb, var(--dashboard-accent) 4%, var(--surface-container-lowest)); border-color: color-mix(in srgb, var(--dashboard-accent) 45%, transparent); }
.dashboard-kpi-heading, .dashboard-kpi-footer { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.dashboard-kpi-label { color: var(--on-surface-variant); font-size: 11px; font-weight: 600; }
.dashboard-kpi-heading > .owl-icon { flex-shrink: 0; width: 20px; height: 20px; opacity: 0.8; }
.dashboard-kpi-value { color: var(--on-surface); font-size: 29px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -0.025em; }
.dashboard-kpi-value--text { font-size: 18px; line-height: 1.6; letter-spacing: 0; }
.dashboard-kpi--warning .dashboard-kpi-value { color: var(--dashboard-warning); }
.dashboard-kpi--danger .dashboard-kpi-value { color: var(--dashboard-danger); }
.dashboard-kpi--success .dashboard-kpi-value { color: var(--dashboard-success); }
.dashboard-kpi-footer { color: var(--on-surface-variant); font-size: 10px; }
.dashboard-link-arrow { color: var(--dashboard-accent); font-size: 15px; line-height: 1; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 18px; }
.dashboard-panel { min-width: 0; border: 1px solid color-mix(in srgb, var(--outline-variant) 24%, transparent); border-top: 3px solid var(--dashboard-accent); border-radius: 7px; background: var(--surface-container-lowest); box-shadow: 0 2px 5px #00000004; }
.dashboard-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 65px; padding: 13px 16px; border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 20%, transparent); }
.dashboard-panel-title-group { display: flex; align-items: center; gap: 9px; min-width: 0; }
.dashboard-panel-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 6px; background: color-mix(in srgb, var(--dashboard-accent) 8%, transparent); }
.dashboard-panel h2, .dashboard-service h2 { color: var(--on-surface); font-size: 13px; font-weight: 600; line-height: 1.5; }
.dashboard-panel-link { flex-shrink: 0; padding-block: 5px; color: var(--dashboard-accent); font-size: 10px; font-weight: 600; white-space: nowrap; }
.dashboard-panel-link:hover { text-decoration: underline; }
.dashboard-rows > :last-child { border-bottom: 0; border-radius: 0 0 6px 6px; }
.dashboard-ticket-row, .dashboard-task-row { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 11px 14px 11px 13px; border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 18%, transparent); border-left: 3px solid transparent; transition: background 150ms; }
.dashboard-ticket-row:hover, .dashboard-task-row:hover, .dashboard-roadmap-row:hover { background: color-mix(in srgb, var(--surface-container-low) 65%, var(--surface-container-lowest)); }
.dashboard-ticket-row--danger { border-left-color: var(--dashboard-danger); }
.dashboard-ticket-row--warning { border-left-color: var(--dashboard-warning); }
.dashboard-row-main { flex: 1; min-width: 0; }
.dashboard-row-heading, .dashboard-roadmap-heading { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.dashboard-row-id { flex-shrink: 0; color: var(--on-surface-variant); font-family: var(--font-mono, monospace); font-size: 10px; font-weight: 600; }
.dashboard-row-title { display: block; flex: 1; min-width: 0; overflow: hidden; color: var(--on-surface); font-size: 12px; font-weight: 500; line-height: 1.5; white-space: nowrap; text-overflow: ellipsis; }
.dashboard-workspace a:hover .dashboard-row-title { color: var(--dashboard-accent); }
.dashboard-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 9px; min-width: 0; margin-top: 4px; color: var(--on-surface-variant); font-size: 10px; line-height: 1.5; }
.dashboard-company { max-width: 180px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dashboard-state { flex-shrink: 0; padding: 1px 6px; border-radius: 4px; background: var(--surface-container-low); color: var(--on-surface-variant); font-size: 9px; font-weight: 600; white-space: nowrap; }
.dashboard-priority { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.dashboard-priority-dot { display: inline-block; flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%; }
.dashboard-reason { display: inline-block; max-width: 100%; margin-top: 4px; color: var(--on-surface-variant); font-size: 10px; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }
.dashboard-reason--danger { color: var(--dashboard-danger); }
.dashboard-reason--warning { color: var(--dashboard-warning); }
.dashboard-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 25px; width: 25px; height: 25px; overflow: hidden; border-radius: 6px; background: var(--primary); color: var(--on-primary); font-size: 10px; font-weight: 600; }
.dashboard-avatar--unassigned { border: 1px dashed color-mix(in srgb, var(--outline-variant) 65%, transparent); background: transparent; color: var(--on-surface-variant); }
.dashboard-row-arrow { flex: 0 0 6px; color: var(--on-surface-variant); font-size: 19px; opacity: 0.55; }
.dashboard-task-marker { flex: 0 0 15px; width: 15px; height: 15px; border: 1.5px solid color-mix(in srgb, var(--outline-variant) 75%, transparent); border-radius: 4px; }
.dashboard-task-due { display: block; margin-top: 4px; color: var(--on-surface-variant); font-size: 10px; line-height: 1.5; }
.dashboard-task-due--overdue { color: var(--dashboard-danger); font-weight: 500; }
.dashboard-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 185px; padding: 25px 24px; text-align: center; }
.dashboard-empty-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 3px; border-radius: 9px; background: color-mix(in srgb, var(--dashboard-accent) 8%, transparent); }
.dashboard-empty-icon .owl-icon { width: 24px; height: 24px; }
.dashboard-empty-title { color: var(--on-surface); font-size: 12px; font-weight: 600; }
.dashboard-empty .dashboard-caption { max-width: 270px; }
.dashboard-activity-body { padding: 15px 16px 11px; }
.dashboard-activity-totals { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 15px; }
.dashboard-activity-count { display: flex; align-items: center; gap: 6px; color: var(--on-surface-variant); font-size: 11px; }
.dashboard-activity-count strong { margin-left: 2px; color: var(--on-surface); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dashboard-legend-marker { width: 13px; height: 3px; border-radius: 3px; background: var(--dashboard-accent); }
.dashboard-activity-count--resolved .dashboard-legend-marker { background: var(--dashboard-success); }
.dashboard-chart { position: relative; height: 205px; width: 100%; }
.dashboard-chart canvas { width: 100%; max-width: 100%; }
.dashboard-chart-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 20px; background: color-mix(in srgb, var(--surface-container-lowest) 86%, transparent); text-align: center; }
.dashboard-chart-empty p { color: var(--on-surface); font-size: 12px; font-weight: 600; }
.dashboard-chart-empty span { color: var(--on-surface-variant); font-size: 11px; }
.dashboard-chart-note { margin-top: 9px; color: var(--on-surface-variant); font-size: 10px; }
.dashboard-chart-data { margin-top: 8px; border-top: 1px solid color-mix(in srgb, var(--outline-variant) 18%, transparent); }
.dashboard-chart-data summary { width: fit-content; padding-block: 8px 2px; color: var(--dashboard-accent); font-size: 10px; cursor: pointer; }
.dashboard-chart-table-wrap { max-height: 225px; overflow: auto; margin-top: 10px; }
.dashboard-chart-data table { width: 100%; border-collapse: collapse; color: var(--on-surface-variant); font-size: 10px; }
.dashboard-chart-data :is(th, td) { padding: 6px 8px; border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 18%, transparent); text-align: right; }
.dashboard-chart-data th { font-weight: 500; }
.dashboard-chart-data :is(th, td):first-child { text-align: left; }
.dashboard-roadmap-row { display: block; padding: 13px 16px; border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 18%, transparent); transition: background 150ms; }
.dashboard-roadmap-heading { align-items: center; }
.dashboard-roadmap-progress { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.dashboard-progress-track { flex: 1; height: 5px; min-width: 0; overflow: hidden; border-radius: 5px; background: var(--surface-container); }
.dashboard-progress-track > span { display: block; height: 100%; border-radius: inherit; background: var(--dashboard-accent); }
.dashboard-progress-label { flex-shrink: 0; color: var(--on-surface-variant); font-size: 9px; font-variant-numeric: tabular-nums; }
.dashboard-roadmap-progress .dashboard-avatar { flex-basis: 20px; width: 20px; height: 20px; border-radius: 5px; font-size: 9px; }
.dashboard-service-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.dashboard-service-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.dashboard-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dashboard-service-grid--client { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dashboard-health-card { padding: 14px 16px; }
.dashboard-health-heading { display: flex; align-items: center; gap: 7px; margin-bottom: 13px; }
.dashboard-health-heading > .owl-icon { flex-shrink: 0; width: 18px; height: 18px; }
.dashboard-health-heading h3 { color: var(--on-surface-variant); font-size: 11px; font-weight: 600; }
.dashboard-health-value { margin-bottom: 12px; color: var(--on-surface); font-size: 25px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; }
.dashboard-health-value--text { font-size: 17px; line-height: 1.5; }
.dashboard-health-counts { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 3px; color: var(--on-surface-variant); font-size: 10px; }
.dashboard-on-time { color: var(--dashboard-success); }
@media (min-width: 1100px) {
  .dashboard-grid--work { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .dashboard-grid--history { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .dashboard-grid--client { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .dashboard-workspace { gap: 14px; }
  .dashboard-intro { flex-basis: 100%; }
  .dashboard-filters { width: 100%; }
  .dashboard-filter { min-width: 0; }
  .dashboard-kpis, .dashboard-kpis--client { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dashboard-kpis--client > :first-child { grid-column: 1 / -1; }
  .dashboard-kpi { gap: 9px; padding: 12px 13px 10px; }
  .dashboard-kpi-value { font-size: 27px; }
  .dashboard-kpi-value--text { font-size: 17px; }
  .dashboard-panel-header { padding: 12px 13px; }
  .dashboard-panel-title-group { gap: 7px; }
  .dashboard-panel-icon { flex-basis: 26px; width: 26px; height: 26px; }
  .dashboard-panel-header .dashboard-caption { font-size: 10px; }
  .dashboard-ticket-row, .dashboard-task-row { gap: 8px; padding: 11px 11px 11px 10px; }
  .dashboard-row-heading { gap: 6px; }
  .dashboard-avatar { flex-basis: 22px; width: 22px; height: 22px; }
  .dashboard-chart { height: 180px; }
  .dashboard-service-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .dashboard-health-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; align-items: baseline; }
  .dashboard-health-heading { margin-bottom: 7px; }
  .dashboard-health-value { grid-row: 1 / 3; grid-column: 2; align-self: center; margin: 0; font-size: 25px; }
  .dashboard-health-value--text { font-size: 16px; }
  .dashboard-health-counts { grid-column: 1; }
  .dashboard-health-card > .dashboard-caption { grid-column: 1 / -1; margin-top: 3px; }
}
@media (max-width: 1023px) {
  .dashboard-select, .dashboard-chart-data summary, .dashboard-panel-link { min-height: 44px; }
  .dashboard-panel-link { display: inline-flex; align-items: center; }
  .dashboard-chart-data summary { display: flex; align-items: center; }
}

.dashboard-distributions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.dashboard-distribution-body { padding: 16px; }
.dashboard-chart-legend { display: flex; flex-direction: column; gap: 7px; max-height: 140px; overflow-y: auto; padding: 0 16px 16px; font-size: 11px; color: var(--on-surface-variant); }
.dashboard-chart-legend > div { display: flex; align-items: center; gap: 7px; }
.dashboard-chart-legend strong { margin-left: auto; color: var(--on-surface); }
.dashboard-chart-legend-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 3px; }
.dashboard-distributions--staff { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-dashboard-section="company-chart"] .dashboard-chart { height: 280px; }
.dashboard-chart-legend span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 1199px) { .dashboard-distributions { grid-template-columns: minmax(0, 1fr); } }

/* Dashboard tabs keep a single workspace visible. */
.dashboard-tabs { display: flex; gap: 6px; overflow-x: auto; border-bottom: 1px solid var(--outline-variant); scrollbar-width: thin; }
.dashboard-tab { display: inline-flex; flex-shrink: 0; align-items: center; gap: 8px; padding: 10px 14px; min-height: 44px; border-bottom: 3px solid transparent; color: var(--on-surface-variant); font-size: 12px; cursor: pointer; }
.dashboard-tab:hover { background: color-mix(in srgb, var(--dashboard-accent) 6%, transparent); }
.dashboard-tab[aria-selected="true"] { color: var(--dashboard-accent); border-bottom-color: var(--dashboard-accent); background: color-mix(in srgb, var(--dashboard-accent) 8%, transparent); font-weight: 600; }
.dashboard-tab-panel { display: flex; flex-direction: column; min-width: 0; gap: 14px; }
.dashboard-tab-panel[hidden] { display: none; }
.dashboard-tab-panel:focus-visible { outline: 2px solid var(--dashboard-accent); outline-offset: 3px; }
.dashboard-tab-panel .dashboard-distributions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1280px) {
  .dashboard-tab-panel .dashboard-distributions--staff { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); }
}
@media (max-width: 767px) {
  .dashboard-tab-panel .dashboard-distributions { grid-template-columns: minmax(0, 1fr); }
  .dashboard-tab { padding-inline: 10px; }
}

.merge-confirmation-dialog { margin: auto; width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; overflow-y: auto; border: 1px solid var(--outline-variant); border-top: 3px solid var(--primary); border-radius: 12px; background: var(--surface-container-lowest); color: var(--on-surface); box-shadow: 0 20px 60px #0005; }
.merge-confirmation-dialog::backdrop { background: #020817a6; backdrop-filter: blur(3px); }
.merge-confirmation-heading { display: flex; align-items: center; gap: 10px; padding: 18px 20px; border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 30%, transparent); }
.merge-confirmation-heading > i { color: var(--primary); }
.merge-confirmation-heading h2 { font-size: 16px; font-weight: 700; }
.merge-confirmation-content { display: grid; gap: 16px; padding: 20px; font-size: 13px; }
.merge-confirmation-content > p { color: var(--on-surface-variant); line-height: 1.6; }
.merge-confirmation-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding: 16px 20px; border-top: 1px solid color-mix(in srgb, var(--outline-variant) 30%, transparent); }
.merge-confirmation-actions button { min-height: 42px; border-radius: 7px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; }
.merge-confirmation-actions button:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.merge-confirmation-cancel { border: 1px solid var(--outline-variant); color: var(--on-surface); }
.merge-confirmation-cancel:hover { background: var(--surface-container-low); }
.merge-confirmation-submit { background: var(--primary); color: var(--on-primary); }
.merge-confirmation-submit:disabled { opacity: 0.6; cursor: wait; }