/* Alphine CRM — shared component styling on top of the base admin theme. */

.avatar-xs {
  height: 1.75rem;
  width: 1.75rem;
}

/* Vertical connecting line between activity-feed entries */
.acty-timeline {
  position: relative;
}

.acty-timeline-item {
  position: relative;
}

.acty-timeline-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 0.875rem;
  top: 1.75rem;
  bottom: -0.75rem;
  width: 1px;
  background: var(--vz-border-color);
}

/* Timeline chat bubbles — customer messages (channel_message) on the left,
   agent replies (reply) on the right. System/status rows keep the plain
   .acty-timeline-item layout above instead of this. */
.chat-msg {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}
.chat-msg-in { justify-content: flex-start; }
.chat-msg-out { justify-content: flex-end; }
.chat-msg-bubble {
  max-width: 75%;
  padding: 0.5rem 0.75rem;
  border-radius: var(--crm-radius-sm);
  background: var(--crm-muted-surface);
}
.chat-msg-out .chat-msg-bubble {
  background: var(--vz-primary-bg-subtle);
  text-align: right;
}
.chat-msg-text {
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--vz-body-color);
}
.chat-msg-meta {
  margin-top: 0.25rem;
  color: var(--vz-secondary-color);
  font-size: 0.7rem;
}
.crm-flag-ai-btn {
  border: none;
  background: none;
  padding: 0;
  margin-left: 0.4rem;
  color: var(--vz-secondary-color);
  opacity: 0.6;
  font-size: 0.75rem;
  cursor: pointer;
}
.crm-flag-ai-btn:hover {
  color: var(--vz-danger);
  opacity: 1;
}

/* Desktop-style toast notifications — see components/notifications/toast.js */
.crm-toast-container {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 2000;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.6rem;
  width: min(340px, calc(100vw - 2.2rem));
  pointer-events: none;
}
.crm-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.85rem 0.9rem;
  border-radius: var(--crm-radius);
  background: var(--crm-surface);
  border: 1px solid var(--vz-border-color);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
  transform: translateX(120%);
  opacity: 0;
  transition: transform 220ms ease, opacity 220ms ease;
}
.crm-toast.crm-toast-in { transform: translateX(0); opacity: 1; }
.crm-toast.crm-toast-out { transform: translateX(120%); opacity: 0; }
.crm-toast-clickable { cursor: pointer; }
.crm-toast-clickable:hover { border-color: var(--vz-primary); }
.crm-toast-icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--vz-primary);
  background: var(--vz-primary-bg-subtle);
  font-size: 1.05rem;
}
.crm-toast-body { flex-grow: 1; min-width: 0; }
.crm-toast-title { font-weight: 650; font-size: 0.86rem; color: var(--vz-heading-color); }
.crm-toast-text {
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: var(--vz-secondary-color);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.crm-toast-close {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--vz-secondary-color);
  padding: 0.1rem;
  line-height: 1;
}
.crm-toast-close:hover { color: var(--vz-body-color); }

/* Fixed-height scrollable panel — for any list/feed that can grow without
   bound (dashboard widgets, ticket timeline) so it scrolls internally
   instead of stretching the whole page taller and taller. */
.crm-scroll-panel {
  max-height: 420px;
  overflow-y: auto;
}
.crm-timeline-scroll {
  max-height: 60vh;
  overflow-y: auto;
}

/* Unseen ticket rows — shared across the whole team, not per-agent. Cleared
   the moment ANY agent opens the ticket (POST /api/tickets/:id/seen). */
.crm-unseen-row {
  background-color: color-mix(in srgb, var(--vz-primary) 6%, transparent);
}
.crm-unseen-row td { font-weight: 650; }
.crm-unseen-row .text-muted { color: var(--vz-body-color) !important; }
.crm-unseen-dot {
  font-size: 0.5rem;
  color: var(--vz-primary);
  vertical-align: middle;
  margin-right: 0.15rem;
}

/* Divider between two sibling tickets' bubbles in the merged conversation
   timeline (ticket-view.js buildTimelineHtml) */
.crm-ticket-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1rem 0;
  color: var(--vz-secondary-color);
  font-size: 0.7rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.crm-ticket-divider::before,
.crm-ticket-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--vz-border-color);
}
.crm-ticket-divider span { padding: 0 0.75rem; white-space: nowrap; }

/* Brief flash when jumping to a bubble from the Past Tickets panel */
.crm-jump-highlight .chat-msg-bubble,
.crm-jump-highlight.acty-timeline-item {
  animation: crmJumpFlash 1.5s ease;
}
@keyframes crmJumpFlash {
  0%, 100% { box-shadow: none; }
  20% { box-shadow: 0 0 0 3px var(--vz-primary); }
}

/* Follow-up star toggle (ticket list + ticket detail) */
.crm-follow-star {
  border: none;
  background: transparent;
  padding: 0.2rem 0.4rem;
}
.crm-follow-star:hover { transform: scale(1.15); }

/* Card hover lift — consistent across every widget card in the app */
.card-animate {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card-animate:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
}

/* Clickable table rows (ticket/customer lists) */
.table-row-link tbody tr {
  cursor: pointer;
}

.table-row-link tbody tr:hover {
  background-color: var(--vz-tertiary-bg);
}

/* Page title bar spacing consistency */
.title-bar h4 {
  font-weight: 600;
}

/* Choices.js (searchable "assign to" dropdown) — the .form-select class we
   put on the underlying <select> for consistent look gets copied onto
   Choices' own wrapper too, and its padding fights with Choices' own item
   layout, clipping the left edge of each option's text. Reset it here. */
.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
  padding: 0.5rem 0.75rem;
  white-space: normal;
}

/* The padding reset above drops the 100px right-padding Choices' own CSS
   reserves for its ::after "select text" hover hint (a ::after positioned
   absolute, right: 10px). Without that reserved space the hint sits directly
   on top of the option's own text — invisible when not hovered, but
   overlapping/garbling whatever text is underneath once an item is
   highlighted. We don't use that hint at all, so just remove it. */
.choices__list--dropdown .choices__item--selectable::after,
.choices__list[aria-expanded] .choices__item--selectable::after {
  content: none;
}

.choices__list--dropdown,
.choices__list[aria-expanded] {
  z-index: 1055; /* sit above modal/card content, matches Bootstrap's dropdown layer */
}

.choices__inner {
  padding: 0.4rem 0.75rem !important;
}

/* Choices.js ships hardcoded white/black colors that never adapt to dark
   mode — left as-is, the dropdown keeps a white background in dark mode
   while surrounding text picks up the dark theme's light color, making it
   unreadable. Route everything through the same theme variables the rest
   of the CRM already uses so it flips with the theme. */
.choices__inner,
.choices__list--dropdown,
.choices__list[aria-expanded] {
  background-color: var(--vz-secondary-bg) !important;
  color: var(--vz-body-color) !important;
  border-color: var(--vz-border-color) !important;
}
.choices__list--dropdown .choices__item--selectable,
.choices__list[aria-expanded] .choices__item--selectable {
  color: var(--vz-body-color) !important;
}
.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background-color: var(--vz-tertiary-bg) !important;
}
.choices__input {
  background-color: transparent !important;
  color: var(--vz-body-color) !important;
}

/* CRM workspace design system. Brand colors continue to come from the base theme. */
:root {
  --crm-radius-sm: 8px;
  --crm-radius: 12px;
  --crm-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 5px 18px rgba(15, 23, 42, 0.04);
  --crm-control-height: 42px;
  --crm-transition: 160ms ease;
  --crm-surface: var(--vz-secondary-bg, #fff);
  --crm-control-surface: #fff;
  --crm-muted-surface: #f7f8fa;
}
[data-bs-theme="dark"] {
  --crm-control-surface: #262a2f;
  --crm-muted-surface: #1d2126;
}
body { background: color-mix(in srgb, var(--vz-body-bg) 94%, var(--vz-primary) 6%); }
.page-content { padding-top: calc(var(--vz-header-height, 70px) + 1.5rem); }
.page-content > .container-fluid { max-width: 1680px; }
#page-topbar { border-bottom: 1px solid var(--vz-border-color); box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05); }
#page-topbar .navbar-header { padding-inline: 1rem 1.25rem; }
.topbar-context { display: flex; align-items: center; gap: 0.65rem; margin-left: 0.5rem; }
.topbar-context-icon {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--vz-primary); background: var(--vz-primary-bg-subtle);
}
.topbar-context-copy strong, .topbar-context-copy small { display: block; line-height: 1.25; }
.topbar-context-copy small { color: var(--vz-secondary-color); font-size: 0.72rem; }
.navbar-menu { border-right: 1px solid rgba(255, 255, 255, 0.07); }
.navbar-menu #navbar-nav { padding: 0.75rem; }
.navbar-menu .menu-title { padding: 1.15rem 0.85rem 0.45rem !important; opacity: 0.62; }
.navbar-menu .navbar-nav .nav-link {
  border-radius: 9px; margin-bottom: 0.25rem; min-height: 44px;
  transition: background-color var(--crm-transition), color var(--crm-transition), transform var(--crm-transition);
}
.navbar-menu .navbar-nav .nav-link:hover { transform: translateX(2px); }
.title-bar {
  position: sticky;
  top: calc(var(--vz-header-height, 70px) + 0.5rem);
  z-index: 100;
  margin-bottom: 1.25rem !important;
  padding: 0.75rem !important;
  border: 1px solid var(--vz-border-color);
  border-radius: var(--crm-radius);
  background-color: var(--crm-surface);
  box-shadow: var(--crm-shadow-sm);
  backdrop-filter: blur(12px);
}
.title-bar h4 { font-size: clamp(1.35rem, 2vw, 1.7rem); letter-spacing: -0.025em; color: var(--vz-heading-color); }
.title-bar p { margin-top: 0.3rem; max-width: 760px; }
.title-bar .btn { min-height: var(--crm-control-height); }
.crm-page-action {
  display: inline-flex !important;
  visibility: visible !important;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  opacity: 1 !important;
  position: relative;
  z-index: 1;
}
.card {
  border: 1px solid var(--vz-border-color); border-radius: var(--crm-radius);
  background-color: var(--crm-surface);
  box-shadow: var(--crm-shadow-sm); overflow: hidden;
}
.card-header { min-height: 58px; padding: 0.9rem 1.15rem; background-color: var(--crm-surface); border-bottom-color: var(--vz-border-color); }
.card-title { font-weight: 650; letter-spacing: -0.012em; }
.btn { border-radius: var(--crm-radius-sm); font-weight: 550; transition: transform var(--crm-transition), box-shadow var(--crm-transition), background-color var(--crm-transition); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.form-control, .form-select, .input-group-text {
  min-height: var(--crm-control-height); border-color: var(--vz-border-color) !important; border-radius: var(--crm-radius-sm);
}
.form-control:focus, .form-select:focus {
  border-color: var(--vz-primary) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--vz-primary) 14%, transparent);
}
.crm-data-card .card-body { padding: 0; }
.crm-filter-panel {
  padding: 1rem 1.15rem; background-color: var(--crm-muted-surface);
  border-bottom: 1px solid var(--vz-border-color);
}
.crm-filter-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.75rem; align-items: end; }
.crm-filter-field { grid-column: span 3; min-width: 0; }
.crm-filter-field.crm-filter-search { grid-column: span 4; }
.crm-filter-field.crm-filter-wide { grid-column: span 5; }
.crm-filter-field label {
  display: block; margin-bottom: 0.4rem; color: var(--vz-secondary-color);
  font-size: 0.72rem; font-weight: 650; letter-spacing: 0.035em; text-transform: uppercase;
}
.crm-search-wrap { position: relative; }
.crm-search-wrap > i {
  position: absolute; z-index: 2; left: 0.85rem; top: 50%; transform: translateY(-50%);
  color: var(--vz-secondary-color); pointer-events: none;
}
.crm-search-wrap .form-control { padding-left: 2.45rem; }
.crm-filter-actions { grid-column: span 3; display: flex; gap: 0.5rem; justify-content: flex-end; }
.crm-filter-actions .btn { min-height: var(--crm-control-height); white-space: nowrap; }
.crm-filter-meta {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  margin-top: 0.85rem; color: var(--vz-secondary-color); font-size: 0.78rem;
}
.crm-active-filters { min-height: 22px; }
.crm-table-wrap { padding: 0 1.15rem 1rem; }
.crm-table-wrap .dataTables_wrapper { padding-top: 0.85rem; }
.crm-data-card .dataTables_filter { display: none; }
.crm-data-card table { margin-bottom: 0 !important; }
.crm-data-card table thead th {
  padding: 0.8rem 0.75rem; border-bottom-width: 1px !important; color: var(--vz-secondary-color);
  font-size: 0.72rem; font-weight: 650; letter-spacing: 0.035em; text-transform: uppercase; white-space: nowrap;
}
.crm-data-card table tbody td { padding: 0.85rem 0.75rem; vertical-align: middle; }
.crm-data-card table tbody tr { transition: background-color var(--crm-transition); }
.crm-data-card .dataTables_length label, .crm-data-card .dataTables_info { color: var(--vz-secondary-color); font-size: 0.78rem; }
.crm-data-card .dataTables_paginate .paginate_button { border-radius: 7px !important; }
.crm-loading { position: relative; pointer-events: none; opacity: 0.58; }
.crm-loading::after {
  content: "; position: absolute; top: 1rem; right: 1rem; width: 18px; height: 18px;
  border: 2px solid var(--vz-border-color); border-top-color: var(--vz-primary);
  border-radius: 50%; animation: crmSpin 0.65s linear infinite;
}
@keyframes crmSpin { to { transform: rotate(360deg); } }
.crm-stat-card .card-body { padding: 1.1rem; }
.crm-stat-card h3 { letter-spacing: -0.035em; }
#statCards .card-body { padding: 1.1rem; }
#statCards .card { min-height: 102px; }
#statCards h3 { letter-spacing: -0.035em; }
@media (max-width: 1199.98px) {
  .crm-filter-field, .crm-filter-field.crm-filter-search, .crm-filter-field.crm-filter-wide { grid-column: span 6; }
  .crm-filter-actions { grid-column: span 12; justify-content: flex-start; }
}
@media (max-width: 767.98px) {
  .page-content { padding-inline: 0.2rem; padding-top: calc(var(--vz-header-height, 70px) + 1rem); }
  .title-bar > div, .title-bar .col-12 { align-items: flex-start !important; gap: 0.85rem; flex-direction: column; }
  .title-bar .btn { width: 100%; }
  .crm-filter-field, .crm-filter-field.crm-filter-search, .crm-filter-field.crm-filter-wide, .crm-filter-actions { grid-column: 1 / -1; }
  .crm-filter-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .crm-filter-meta { align-items: flex-start; flex-direction: column; gap: 0.35rem; }
  .crm-filter-panel, .crm-table-wrap { padding-inline: 0.85rem; }
  .topbar-context-copy { display: none; }
  .card { border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .card-animate, .btn, .navbar-menu .navbar-nav .nav-link, .main-content { transition: none !important; animation: none !important; }
}

/* Professional CRM dialogs: consistent form rhythm, sizing and actions. */
.swal2-container .swal2-popup.crm-dialog {
  width: min(620px, calc(100vw - 2rem));
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--vz-border-color);
  border-radius: 16px;
  background: var(--crm-surface) !important;
  background-color: var(--crm-surface) !important;
  background-image: none !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
  color: var(--vz-body-color);
}
.swal2-container .swal2-popup.crm-dialog-sm { width: min(500px, calc(100vw - 2rem)); }
.swal2-container .crm-dialog-title {
  margin: 0;
  padding: 1.4rem 1.5rem 0.35rem;
  color: var(--vz-heading-color);
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  text-align: left;
}
.swal2-container .crm-dialog-body {
  margin: 0;
  padding: 0.7rem 1.5rem 1.4rem;
  overflow: visible;
  color: var(--vz-body-color);
  text-align: left;
}
.crm-dialog-intro {
  margin: 0 0 1.15rem;
  color: var(--vz-secondary-color);
  font-size: 0.82rem;
  line-height: 1.55;
}
.crm-modal-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  width: 100%;
  text-align: left;
}
.crm-modal-field { min-width: 0; }
.crm-modal-field-full { grid-column: 1 / -1; }
.crm-modal-label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0 0 0.4rem;
  color: var(--vz-heading-color);
  font-size: 0.75rem;
  font-weight: 650;
}
.crm-modal-label .required { color: var(--vz-danger); }
.crm-modal-hint {
  display: block;
  margin-top: 0.35rem;
  color: var(--vz-secondary-color);
  font-size: 0.7rem;
  line-height: 1.4;
}
.swal2-container .crm-dialog .crm-modal-control {
  box-sizing: border-box;
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 44px;
  height: 44px;
  margin: 0 !important;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--vz-border-color);
  border-radius: 9px;
  background: var(--crm-control-surface) !important;
  background-color: var(--crm-control-surface) !important;
  color: var(--vz-body-color);
  box-shadow: none;
  font-family: inherit;
  font-size: 0.875rem;
}
.swal2-container .crm-dialog textarea.crm-modal-control {
  min-height: 118px;
  height: 118px;
  resize: vertical;
  line-height: 1.5;
}
.swal2-container .crm-dialog .crm-modal-control::placeholder { color: var(--vz-secondary-color); opacity: 0.65; }
.swal2-container .crm-dialog .crm-modal-control:focus {
  outline: none;
  border-color: var(--vz-primary);
  box-shadow: 0 0 0 3px rgba(var(--vz-primary-rgb), 0.13);
}
.swal2-container .crm-dialog-actions {
  justify-content: flex-end;
  width: 100%;
  margin: 0;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--vz-border-color);
  background: var(--crm-muted-surface);
}
.swal2-container .crm-dialog-actions .btn {
  min-width: 110px;
  min-height: 42px;
  margin: 0 0 0 0.6rem;
}
.swal2-container .crm-dialog .swal2-validation-message {
  margin: 0 1.5rem 1rem;
  border-radius: 8px;
  background: var(--vz-danger-bg-subtle);
  color: var(--vz-danger-text-emphasis);
  font-size: 0.78rem;
}
.crm-customer-results {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.35rem);
  right: 0;
  left: 0;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--vz-border-color);
  border-radius: 10px;
  background: var(--crm-surface);
  box-shadow: var(--crm-shadow-sm);
}
.crm-customer-results .list-group-item {
  border-inline: 0;
  background: var(--crm-surface);
  color: var(--vz-body-color);
}
.crm-customer-results .list-group-item:first-child { border-top: 0; }
.crm-customer-results .list-group-item:last-child { border-bottom: 0; }

@media (max-width: 575.98px) {
  .swal2-container { padding: 0.65rem; }
  .swal2-container .swal2-popup.crm-dialog { width: 100%; max-height: calc(100dvh - 1.3rem); overflow-y: auto; }
  .swal2-container .crm-dialog-title { padding: 1.15rem 1rem 0.25rem; font-size: 1.1rem; }
  .swal2-container .crm-dialog-body { padding: 0.65rem 1rem 1.1rem; }
  .crm-modal-form { grid-template-columns: 1fr; gap: 0.85rem; }
  .crm-modal-field-full { grid-column: auto; }
  .swal2-container .crm-dialog-actions {
    position: sticky;
    bottom: 0;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    padding: 0.85rem 1rem;
  }
  .swal2-container .crm-dialog-actions .btn { width: 100%; min-width: 0; margin: 0; }
}