/**
 * Stella.Support — Application Styles
 * App-specific styling that builds on the framework and AI theme
 */

/* ═══════════════════════════════════════════
   PAGE HEADER
   ═══════════════════════════════════════════ */

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-6);
  gap: var(--space-4);
}

.page-header h1 {
  margin-bottom: var(--space-1);
}

.page-header .text-muted {
  font-size: var(--text-sm);
  margin-bottom: 0;
}

.page-header .breadcrumb {
  margin-bottom: var(--space-1);
}

@media (max-width: 767px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ═══════════════════════════════════════════
   VALIDATION RESULTS (Import/KB)
   ═══════════════════════════════════════════ */

.validation-results {
  background-color: var(--color-bg-elevated);
  color: var(--color-text-primary);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.validation-results .validation-header {
  color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
}

.validation-results .step {
  font-size: var(--text-sm);
  padding: var(--space-2) 0;
  color: var(--color-text-secondary);
}

.validation-results .step i {
  color: var(--color-success);
}

.validation-results .step-detail {
  font-family: var(--font-mono);
  word-break: break-all;
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
}

.validation-results .content-extraction {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
  margin-top: var(--space-4);
}


/* ═══════════════════════════════════════════
   TICKET TABLE
   ═══════════════════════════════════════════ */

.ticket-table { margin-bottom: 0; }

.ticket-table th.sortable-column {
  cursor: pointer;
  user-select: none;
}

.ticket-table th.sortable-column:hover {
  color: var(--color-text-primary);
}

.ticket-row {
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.ticket-row:hover {
  background-color: var(--color-bg-surface-hover) !important;
}

/* Responsive ticket table */
@media (max-width: 1023px) {
  .ticket-table th:nth-child(7),
  .ticket-table td:nth-child(7) {
    display: none;
  }
}

@media (max-width: 767px) {
  .ticket-table th:nth-child(5),
  .ticket-table td:nth-child(5),
  .ticket-table th:nth-child(6),
  .ticket-table td:nth-child(6) {
    display: none;
  }

  .filter-form .col-md-3 {
    margin-bottom: var(--space-2);
  }
}

@media (max-width: 639px) {
  .ticket-table th:nth-child(1),
  .ticket-table td:nth-child(1) {
    display: none;
  }

  .ticket-table th:nth-child(2),
  .ticket-table td:nth-child(2) {
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}


/* ═══════════════════════════════════════════
   TICKET DETAIL
   ═══════════════════════════════════════════ */

.ticket-details {
  padding: var(--space-4);
}

@media (max-width: 767px) {
  .ticket-details {
    padding: var(--space-2);
  }
}


/* ═══════════════════════════════════════════
   COMMENTS
   ═══════════════════════════════════════════ */

.comment {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  background: var(--color-bg-elevated);
}

.comment-internal {
  border-left: 3px solid var(--color-info);
  background: var(--color-info-bg);
}

.comment-reply {
  border-left: 3px solid var(--color-success);
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-primary), var(--color-ai));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  flex-shrink: 0;
}


/* ═══════════════════════════════════════════
   CONTACTS
   ═══════════════════════════════════════════ */

.contact-row {
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.contact-row:hover {
  background-color: var(--color-bg-surface-hover) !important;
}


/* ═══════════════════════════════════════════
   NOTIFICATIONS
   ═══════════════════════════════════════════ */

.notification-item {
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.notification-item:hover {
  background-color: var(--color-bg-surface-hover);
}

.notification-item.unread {
  border-left: 3px solid var(--color-primary);
  background: var(--color-primary-50);
}

.notification-badge {
  font-size: var(--text-xs);
  min-width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.notification-list {
  max-height: 400px;
  overflow-y: auto;
  width: 320px;
}


/* ═══════════════════════════════════════════
   DASHBOARD CARDS
   ═══════════════════════════════════════════ */

.dashboard-card {
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
}

.dashboard-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.stat-card {
  border: none;
}

.chart-container {
  position: relative;
  width: 100%;
  min-height: 200px;
}


/* ═══════════════════════════════════════════
   KNOWLEDGE BASE
   ═══════════════════════════════════════════ */

.kb-article-card {
  transition: all var(--transition-base);
}

.kb-article-card:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-1px);
}

.kb-category-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}


/* ═══════════════════════════════════════════
   SETTINGS
   ═══════════════════════════════════════════ */

.settings-card {
  transition: all var(--transition-base);
}

.settings-card:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-1px);
}

.magic-ai-button {
  background: linear-gradient(135deg, var(--color-ai), var(--color-primary));
  color: #fff;
  border: none;
}

.magic-ai-button:hover {
  opacity: 0.9;
  box-shadow: var(--shadow-glow-ai);
  color: #fff;
}


/* ═══════════════════════════════════════════
   IMPERSONATION BANNER
   ═══════════════════════════════════════════ */

.impersonation-banner {
  display: flex;
  align-items: center;
  margin-left: var(--space-3);
}


/* ═══════════════════════════════════════════
   SEARCH BAR (Top bar)
   ═══════════════════════════════════════════ */

#search-form {
  position: relative;
  width: auto;
}

#search-form .input-group {
  width: 100%;
  min-width: 200px;
  max-width: 300px;
}

#search-form .form-control {
  background-color: var(--color-bg-surface);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

#search-form .form-control::placeholder {
  color: var(--color-text-muted);
}

#search-form .form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-50);
}


/* ═══════════════════════════════════════════
   FILTER FORM
   ═══════════════════════════════════════════ */

@media (max-width: 767px) {
  #filter-form button {
    width: 100%;
    margin-bottom: var(--space-2);
  }

  #filter-form .col-12.d-flex {
    flex-direction: column;
  }
}


/* ═══════════════════════════════════════════
   SORTABLE LISTS (Settings)
   ═══════════════════════════════════════════ */

.sortable-categories .list-group-item {
  cursor: grab;
  transition: background-color var(--transition-fast);
}

.sortable-categories .list-group-item:active {
  cursor: grabbing;
}


/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */

.app-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}


/* ═══════════════════════════════════════════
   RESPONSIVE FILTER LAYOUT
   ═══════════════════════════════════════════ */

@media (max-width: 767px) {
  .d-flex.flex-wrap {
    flex-direction: column;
  }

  .btn-responsive {
    width: 100%;
    margin-bottom: var(--space-2);
  }
}


/* ═══════════════════════════════════════════
   REPORTS — STAT CHANGE INDICATORS
   ═══════════════════════════════════════════ */

.stat-change {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  margin-top: var(--space-1);
  min-height: 1.2em;
}

.stat-change-up {
  color: var(--color-success);
}

.stat-change-down {
  color: var(--color-danger);
}

.stat-change-neutral {
  color: var(--color-text-muted);
}

.stat-change i {
  font-size: 0.65rem;
}

/* ═══════════════════════════════════════════
   REPORTS — SORTABLE TABLE HEADERS
   ═══════════════════════════════════════════ */

[data-sort-table] {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

[data-sort-table]:hover {
  color: var(--color-primary);
}

[data-sort-table] i.fa-sort {
  transition: opacity 0.15s;
}

[data-sort-table]:hover i.fa-sort {
  opacity: 0.8 !important;
}

.sort-asc i.fa-sort::before {
  content: "\f0de";
}

.sort-desc i.fa-sort::before {
  content: "\f0dd";
}

.sort-asc i.fa-sort,
.sort-desc i.fa-sort {
  opacity: 1 !important;
  color: var(--color-primary);
}

/* ═══════════════════════════════════════════
   REPORTS — STAT AI CARD
   ═══════════════════════════════════════════ */

.stat-ai {
  border-top: 3px solid var(--color-ai, #8b5cf6);
}

.stat-ai .stat-card-icon {
  color: var(--color-ai, #8b5cf6);
}

/* ═══════════════════════════════════════════
   PRINT STYLES
   ═══════════════════════════════════════════ */

@media print {
  /* Hide navigation, sidebar, and interactive controls */
  .sidebar,
  .navbar,
  .offcanvas,
  .btn-group,
  .dropdown,
  .form-check,
  .form-control,
  #refresh-reports-btn,
  #auto-refresh-toggle,
  #last-updated,
  #customer-search,
  #customer-pagination,
  [data-export],
  [onclick="window.print()"],
  .trend-range-btn,
  .global-date-filter,
  .date-range-filter {
    display: none !important;
  }

  /* White background for printing */
  body,
  .card,
  .stat-card-modern,
  .table {
    background: #fff !important;
    color: #000 !important;
    border-color: #ccc !important;
  }

  .card {
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    break-inside: avoid;
  }

  .stat-card-modern {
    border: 1px solid #ddd !important;
    box-shadow: none !important;
  }

  .card-header {
    background: #f5f5f5 !important;
    color: #000 !important;
  }

  .stat-card-label,
  .stat-card-value,
  .card-title,
  h5, h6, th, td {
    color: #000 !important;
  }

  .text-muted {
    color: #666 !important;
  }

  /* Full width layout */
  .container-fluid,
  .col-lg-8,
  .col-lg-4,
  .col-md-3,
  .col-md-4,
  .col-md-6,
  .col-md-8 {
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }

  .row {
    display: block !important;
  }

  .col-lg-8,
  .col-lg-4 {
    width: 100% !important;
  }

  /* Chart containers */
  .chart-container {
    height: auto !important;
    min-height: 200px !important;
    page-break-inside: avoid;
  }

  canvas {
    max-width: 100% !important;
  }

  /* Remove main content padding adjustment for sidebar */
  main,
  .main-content {
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
  }
}