/* ── Tickets page styles (Phase 8.1) ──────────────────────── */

/* Requester cell in ticket list */
.requester-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.requester-name {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.requester-cell .badge--vip {
  align-self: flex-start;
  margin-bottom: 2px;
}

/* ── 1b split view (UI-CORE-001 reference screen) ─────────── */

.tk-split {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  height: 100%;
}

.tk-split__list {
  flex: 1 1 58%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tk-split__panel {
  flex: 1 1 42%;
  min-width: 0;
  position: sticky;
  top: 0;
  height: calc(100vh - var(--header-height) - 48px);
}

/* No ticket open yet — give the list the full row instead of permanently
   reserving 42% of the width for an empty "select a ticket" placeholder,
   which was starving the table (columns didn't fit at moderate widths). */
.tk-split--empty .tk-split__panel {
  display: none;
}

.tk-panel-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  border-radius: var(--radius-lg);
  border: 1px dashed var(--border-default);
  color: var(--text-muted);
  font-size: 13.5px;
  text-align: center;
  padding: 24px;
}

.tk-panel-tabbody {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Below docked breakpoint, the panel becomes an overlay/sheet (see
   core-panel.css) — the list reclaims the full row width. */
@media (max-width: 1023px) {
  .tk-split { flex-direction: column; }
  .tk-split__list { flex-basis: auto; width: 100%; }
  .tk-split__panel { position: static; height: auto; }
}

/* ── Views quick-filter chips (Modules Catalog spec) ───────── */

.tk-views-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tk-view-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-full, 999px);
  border: 1px solid var(--border-default);
  background: var(--surface-1, transparent);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}

.tk-view-chip:hover {
  border-color: var(--accent-primary);
  color: var(--text-primary);
}

.tk-view-chip--active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--text-on-accent, #fff);
}

.tk-view-chip__count {
  font-size: 11px;
  font-weight: var(--font-semibold, 600);
  opacity: .85;
}

/* ── Related objects row links (ticket-detail.js tplRelated) ─ */

.td-related-row:hover {
  color: var(--accent-primary) !important;
}

/* ── Service Desk queue table columns (design/ARKAN Service Desk.dc.html) ── */

.tk-col-subject {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tk-col-subject__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--font-medium);
}
.tk-col-subject__impact {
  font-size: 11px;
  color: var(--text-muted);
}

.tk-col-company {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.tk-col-company__count {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

.tk-col-sla {
  font-size: 12px;
  font-weight: var(--font-medium);
  white-space: nowrap;
}
.tk-col-sla--met    { color: var(--text-muted); }
.tk-col-sla--ok      { color: var(--text-secondary); }
.tk-col-sla--warn   { color: var(--color-warning, #b8730a); }
.tk-col-sla--crit,
.tk-col-sla--overdue { color: var(--color-danger); font-weight: var(--font-semibold, 600); }

.tk-col-assignee {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.tk-col-assignee__avatar {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: var(--font-semibold, 600);
  background: var(--accent-surface);
  color: var(--accent-primary);
}
.tk-col-assignee__avatar--dashed {
  border: 1.5px dashed var(--border-default);
  background: transparent;
}
.tk-col-assignee__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tk-col-assignee--empty .core-table__meta { font-size: 12.5px; }

.tk-row-menu-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md, 6px);
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}
.tk-row-menu-btn:hover {
  background: var(--color-bg-muted);
  color: var(--text-primary);
}

.tk-row-menu-pop {
  position: fixed;
  z-index: 1000;
  min-width: 200px;
  background: var(--surface-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg, 10px);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tk-row-menu-pop__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: var(--radius-md, 6px);
  font-size: 13px;
  color: var(--text-primary);
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}
.tk-row-menu-pop__item:hover {
  background: var(--color-bg-muted);
}

/* ── Panel bottom action bar (Service Desk block 9) ──────── */

.tk-panel-actions {
  display: flex;
  gap: 8px;
  padding: 12px 0 4px;
  border-top: 1px solid var(--border-subtle, var(--border-default));
  margin-top: 12px;
}

/* ── Queues row: view chips + saved filters (Service Desk block 4) ── */

.tk-queues-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* ── Reset filters + density toggle (Service Desk block 5) ── */

.tk-reset-filters {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md, 6px);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  align-self: flex-end;
}

.tk-reset-filters:hover {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.tk-reset-filters__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent-primary);
  color: var(--text-on-accent, #fff);
  font-size: 10px;
  font-weight: var(--font-semibold, 600);
}

.tk-density-btn {
  width: 30px;
  height: 30px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md, 6px);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  align-self: flex-end;
}

.tk-density-btn:hover,
.tk-density-btn--active {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

/* Compact density — shrinks row height, matches the design system's
   "плотность таблицы" toggle (36px rows vs the default 44px). */
.core-table-wrap--compact .core-table td {
  height: 32px;
  font-size: 12.5px;
}
.core-table-wrap--compact .core-table th {
  height: 28px;
}

/* ── 5 summary tiles (Service Desk block 3) ──────────────── */

.tk-tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.tk-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--radius-lg, 12px);
  border: 1px solid var(--border-default);
  background: var(--surface-elevated);
  cursor: pointer;
  text-align: left;
  transition: border-color .12s, background .12s;
}

.tk-tile:hover {
  border-color: var(--accent-primary);
}

.tk-tile--active {
  border-color: var(--accent-primary);
  background: var(--accent-surface);
}

.tk-tile__count {
  font-size: 22px;
  font-weight: var(--font-semibold, 600);
  line-height: 1.1;
  color: var(--text-primary);
}

.tk-tile__label {
  font-size: 11.5px;
  color: var(--text-muted);
}

.tk-tile[data-tile="critical"] .tk-tile__count,
.tk-tile[data-tile="overdue"]  .tk-tile__count { color: var(--color-danger); }
.tk-tile[data-tile="at_risk"]  .tk-tile__count { color: var(--color-warning); }

@media (max-width: 900px) {
  .tk-tiles { grid-template-columns: repeat(2, 1fr); }
}

/* ── Domain tabs (Service Desk block 2) ──────────────────── */

.tk-domain-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--border-default);
  margin-bottom: 4px;
}

.tk-domain-tab {
  display: inline-block;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: var(--font-medium);
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  margin-bottom: -1px;
}

.tk-domain-tab:hover {
  color: var(--text-primary);
}

.tk-domain-tab--active {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
}

/* ── Split create button ─────────────────────────────────── */

.tk-split-create {
  display: inline-flex;
  align-items: stretch;
}

.tk-split-create .js-create {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.tk-split-create__chevron {
  width: 26px;
  border: none;
  border-left: 1px solid rgba(0, 0, 0, 0.12);
  border-top-right-radius: var(--radius-md, 6px);
  border-bottom-right-radius: var(--radius-md, 6px);
  background: var(--accent-primary);
  color: var(--text-on-accent, #fff);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
}

.tk-split-create__chevron:hover {
  filter: brightness(0.92);
}