/* global.css: approved overrides and consistency rules */
@import './glev-design-system.css';

/* Collapsed note preview: show N lines with a soft fade at bottom */
.note-preview {
  --preview-lines: 3;
  --lh: 1.2rem;
  position: relative;
  line-height: var(--lh);
  max-height: calc(var(--preview-lines) * var(--lh));
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, black 70%, transparent 100%);
  mask-image: linear-gradient(180deg, black 70%, transparent 100%);
}

.note-preview p {
  margin-bottom: 0.25rem;
}

/* Compact ticket/concern note cards (Bootstrap CSS vars only) */
.note-compact-card {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background-color: var(--bs-body-bg);
  overflow: hidden;
}

.note-compact-card__header {
  padding: 0.35rem 0.5rem;
  background-color: var(--bs-secondary-bg);
  border-bottom: 1px solid var(--bs-border-color);
}

.note-compact-card__edit-btn {
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
  line-height: 1;
  border: 1px solid var(--bs-border-color);
  color: var(--bs-body-color);
  background-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.note-compact-card__edit-btn:hover:not(:disabled),
.note-compact-card__edit-btn:focus-visible:not(:disabled) {
  background-color: var(--bs-secondary-bg);
  border-color: var(--bs-secondary-color);
  color: var(--bs-emphasis-color);
}

.note-compact-card__edit-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.note-compact-card__body {
  padding: 0.5rem 0.6rem;
  color: var(--bs-body-color);
}

.note-compact-card__body p:last-child {
  margin-bottom: 0;
}

.note-compact-card--pinned {
  border-left: 3px solid var(--bs-warning);
  background: color-mix(in srgb, var(--bs-warning), transparent 92%);
}

.service-ticket-pinned-note {
  line-height: 1.35;
}

.service-ticket-pinned-note .note-preview {
  --lh: 1.35rem;
  color: var(--bs-secondary-color);
}

.service-ticket-pinned-note .note-preview p,
.service-ticket-pinned-note .note-preview ul,
.service-ticket-pinned-note .note-preview ol {
  margin-bottom: 0.15rem;
  font-size: inherit;
}

.service-ticket-pinned-note .note-preview p:last-child,
.service-ticket-pinned-note .note-preview ul:last-child,
.service-ticket-pinned-note .note-preview ol:last-child {
  margin-bottom: 0;
}

.service-ticket-pinned-note .note-preview a {
  pointer-events: auto;
}

/* Status badge chip sizing (Bootstrap colors only in JSX) */
.status-badge-sm {
  font-size: 0.75rem;
  padding: 0.2rem 0.4rem;
  line-height: 1.25;
  border-radius: 0.25rem;
}

.status-badge-md {
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
  line-height: 1.5;
  border-radius: 0.25rem;
}

/* StatusDropdown uses Badge as toggle — keep caret/chip on the same baseline as plain badges */
.dropdown:has(> .badge.status-badge-sm),
.dropdown:has(> .badge.status-badge-md) {
  vertical-align: middle;
}

.badge.status-badge-sm.dropdown-toggle,
.badge.status-badge-md.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.badge.status-badge-sm.dropdown-toggle::after,
.badge.status-badge-md.dropdown-toggle::after {
  vertical-align: 0;
  margin-top: 0.05em;
}

/* Service ticket list: fixed status matrix layout (colors in JSX only) */
.ticket-state-cell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
  min-width: 14rem;
}

.ticket-state-cell__slot {
  display: flex;
  align-items: center;
  min-width: 0;
}

/* Sticky menu bar on desktop */
@media (min-width: 992px) {
  .glev-menu-bar {
    position: sticky;
    top: 0;
    z-index: 1030;
  }
}

/* Ticket toolbar: sticky behavior with proper layering */
.ticket-toolbar {
  z-index: 1020;
}

@media (min-width: 992px) {
  .ticket-toolbar.sticky-top {
    top: 56px;
  }
}

@media (max-width: 991px) {
  .ticket-toolbar.sticky-top {
    top: 0;
  }
}

/* Ticket header dropdowns must extend past the card edge */
.ticket-header .card-body,
.customer-header .card-body {
  overflow: visible;
}

/* Modal stack depth: AppModal assigns these automatically. */
.modal.glev-modal-stack-depth-0 {
  z-index: 1055 !important;
}

.modal-backdrop.glev-modal-backdrop-stack-depth-0 {
  z-index: 1050 !important;
  opacity: 0.5;
}

.modal.glev-modal-stack-depth-1,
.modal.modal-level-2 {
  z-index: 1075 !important;
}

.modal-backdrop.glev-modal-backdrop-stack-depth-1,
.modal-backdrop.modal-backdrop-level-2 {
  z-index: 1070 !important;
  opacity: 0.58;
}

.modal.glev-modal-stack-depth-2 {
  z-index: 1095 !important;
}

.modal-backdrop.glev-modal-backdrop-stack-depth-2 {
  z-index: 1090 !important;
  opacity: 0.64;
}

.modal.glev-modal-stack-depth-3 {
  z-index: 1115 !important;
}

.modal-backdrop.glev-modal-backdrop-stack-depth-3 {
  z-index: 1110 !important;
  opacity: 0.69;
}

.modal.glev-modal-stack-depth-4 {
  z-index: 1135 !important;
}

.modal-backdrop.glev-modal-backdrop-stack-depth-4 {
  z-index: 1130 !important;
  opacity: 0.73;
}

.modal.glev-modal-stack-depth-5 {
  z-index: 1155 !important;
}

.modal-backdrop.glev-modal-backdrop-stack-depth-5 {
  z-index: 1150 !important;
  opacity: 0.76;
}

.modal.glev-modal-stack-depth-6 {
  z-index: 1175 !important;
}

.modal-backdrop.glev-modal-backdrop-stack-depth-6 {
  z-index: 1170 !important;
  opacity: 0.78;
}

.modal.glev-modal-stack-depth-7 {
  z-index: 1195 !important;
}

.modal-backdrop.glev-modal-backdrop-stack-depth-7 {
  z-index: 1190 !important;
  opacity: 0.8;
}

.modal.glev-modal-stack-depth-8 {
  z-index: 1215 !important;
}

.modal-backdrop.glev-modal-backdrop-stack-depth-8 {
  z-index: 1210 !important;
  opacity: 0.82;
}

.glev-modal-stack .modal-content {
  box-shadow: var(--bs-box-shadow-lg);
}