/* dashboard.css */
/* Specific styling layouts for dashboard statistics widgets, grids, and chart wrappers. */

/* Statistics Widgets Grid */
.dashboard-stats-grid {
  display: grid;
  /* Default: 2 columns on most mobile devices */
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xl);
}

/* Very narrow phones (320px): single column so cards don't get crushed */
@media (max-width: 359px) {
  .dashboard-stats-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-xs);
  }
}

@media (min-width: 768px) {
  .dashboard-stats-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 columns on tablet view */
  }
}

@media (min-width: 1024px) {
  .dashboard-stats-grid {
    grid-template-columns: repeat(6, 1fr); /* 6 columns on desktop screens */
  }
}

/* Individual Stat Card */
.stat-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.stat-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary);
}

.stat-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stat-card__title {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
}

.stat-card__icon {
  font-size: var(--font-size-md);
}

.stat-card__number {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums; /* Align numbers in tabular layout */
}

/* Special borders for stats category matching their statuses */
.stat-card--total { border-right: 4px solid var(--color-primary); }
.stat-card--new { border-right: 4px solid var(--color-status-new); }
.stat-card--in-progress { border-right: 4px solid var(--color-status-in-progress); }
.stat-card--resolved { border-right: 4px solid var(--color-status-resolved); }
.stat-card--rejected { border-right: 4px solid var(--color-status-rejected); }
.stat-card--closed { border-right: 4px solid var(--color-status-closed); }

/* Dashboard Charts Layout */
.dashboard-charts-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

@media (min-width: 1024px) {
  .dashboard-charts-row {
    grid-template-columns: 1fr 1fr; /* Side-by-side charts on desktop */
  }
}

.chart-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.chart-card__title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-text-primary);
}

.chart-card__body {
  width: 100%;
  position: relative;
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Page Header Structure */
.page-header {
  margin-bottom: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.page-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text-primary);
}

.placeholder-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-align: center;
  padding: var(--spacing-xxl) 0;
}

/* ────────────────────────────────────────────────────────
   PHASE 3 STYLES — Complaints List & Details Pages
──────────────────────────────────────────────────────── */

/* ── Toolbar (search + filters row) ─────────────────────── */
.toolbar {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  box-shadow: var(--shadow-sm);
}

.toolbar__search {
  width: 100%;
}

.toolbar__search-input {
  width: 100%;
}

.toolbar__filters {
  display: none;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  align-items: center;
}

@media (min-width: 768px) {
  .toolbar__filters {
    display: flex;
  }
  .toolbar__mobile-filters {
    display: none;
  }
}

.toolbar__mobile-filters {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.toolbar__select {
  width: auto;
  /* Use min-width: 0 so flex items can shrink below their content size */
  min-width: 0;
  flex: 1 1 120px;
}

/* ── Active Filter Count Badge ───────────────────────────── */
.filter-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  padding: 0 4px;
  margin-right: var(--spacing-xs);
}

/* ── Pagination Bar ──────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) 0;
}

.pagination__info {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  /* Allow full width on mobile so it stacks above controls */
  flex: 1 1 100%;
}

.pagination__controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex: 1 1 100%;
  justify-content: center;
}

@media (min-width: 480px) {
  .pagination__info {
    flex: 0 1 auto;
  }
  .pagination__controls {
    flex: 0 1 auto;
    justify-content: flex-start;
  }
}

.pagination__btn {
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-xs);
}

.pagination__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.pagination__page-info {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* ── Complaints Table Subject Column Truncation ──────────── */
.complaints-subject {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Mobile Filter Bottom Sheet ──────────────────────────── */
.filter-sheet-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 190;
}

.filter-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  z-index: 200;
  flex-direction: column;
  /* Allow more space on very small phones */
  max-height: 90vh;
  transform: translateY(100%);
  transition: transform var(--transition-normal);
  /* Account for home indicator on iPhone */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.filter-sheet--open {
  transform: translateY(0);
}

.filter-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}

.filter-sheet__title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-text-primary);
}

.filter-sheet__body {
  padding: var(--spacing-md) var(--spacing-lg);
  overflow-y: auto;
  flex: 1;
}

.filter-sheet__footer {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--color-border);
}

.filter-sheet__footer .btn {
  flex: 1;
}

/* ── Complaint Details Page Layout ───────────────────────── */
.detail-page {
  max-width: 900px;
}

.detail-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 480px) {
  .detail-card {
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
  }
}

.detail-card__title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--color-border-light);
}

/* ── Detail Grid for Read-only Fields ───────────────────── */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
}

@media (min-width: 600px) {
  .detail-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.detail-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
}

.detail-field__label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.detail-field__value {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  word-break: break-word;
}

/* ── Complaint Text Box ──────────────────────────────────── */
.complaint-text-box {
  background-color: rgba(15, 23, 42, 0.5);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  padding: var(--spacing-md);
  max-height: 280px;
  overflow-y: auto;
}

.complaint-text {
  font-family: 'Noto Sans Arabic', 'Cairo', sans-serif;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  line-height: 1.8;
  direction: auto;
}

/* ── Update Form ─────────────────────────────────────────── */
.detail-note-input {
  resize: vertical;
  min-height: 100px;
  line-height: 1.7;
  direction: auto;
}

.char-counter {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: left;
  transition: color var(--transition-fast);
}

.form-error-msg {
  background-color: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-sm);
  color: var(--color-status-rejected);
  font-size: var(--font-size-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  margin-bottom: var(--spacing-md);
  animation: fadeSlideIn 0.2s ease;
}

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Detail Action Buttons ───────────────────────────────── */
.detail-actions {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.detail__back-btn {
  font-size: var(--font-size-sm);
}

/* ── Mobile Sticky Save Footer ───────────────────────────── */
.sticky-footer {
  display: none;
  position: fixed;
  /* 60px = mobile-nav height; add safe-area for notch phones */
  bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  left: 0;
  right: 0;
  background-color: var(--color-sidebar);
  border-top: 1px solid var(--color-border);
  padding: var(--spacing-sm) var(--spacing-md);
  gap: var(--spacing-sm);
  z-index: 100;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
}

.sticky-footer .btn {
  flex: 1;
}

@media (max-width: 767px) {
  .sticky-footer {
    display: flex;
  }
  /* Prevent form buttons from overlapping sticky footer */
  .detail-actions {
    padding-bottom: 80px;
  }
}

@media (min-width: 768px) {
  .sticky-footer {
    display: none !important;
  }
}

/* ====================================================================
   ADDITIONAL MOBILE OVERRIDES — DASHBOARD & COMPLAINTS PAGES
   ==================================================================== */

/* ── Chart / Latest complaints card ─────────────────────────────── */
@media (max-width: 767px) {
  .chart-card {
    padding: var(--spacing-md);
    gap: var(--spacing-sm);
  }
}

/* ── Page header ─────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .page-title {
    font-size: var(--font-size-lg);
  }

  .page-header {
    margin-bottom: var(--spacing-md);
  }
}

/* ── Complaints list table: hide low-priority columns on narrow phones */
/*
   On screens narrower than 480px, hide the Source and Date columns.
   This reduces the table from 6 columns to 4, eliminating the need
   for horizontal scroll in the vast majority of cases.
   Ticket number, Status, and Subject remain visible.
*/
@media (max-width: 479px) {
  /* Hide Source column (3rd) */
  .table th:nth-child(3),
  .table td:nth-child(3) {
    display: none;
  }

  /* Hide Date column (6th) */
  .table th:nth-child(6),
  .table td:nth-child(6) {
    display: none;
  }

  /* Let Subject column take remaining space */
  .complaints-subject {
    max-width: 120px;
  }
}

/* ── Complaint detail grid: always single column on narrow phones ── */
@media (max-width: 479px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Complaint text box: shorter on mobile ──────────────────────── */
@media (max-width: 767px) {
  .complaint-text-box {
    max-height: 180px;
  }
}

/* ── Toolbar: ensure search input doesn't overflow ─────────────── */
@media (max-width: 767px) {
  .toolbar {
    padding: var(--spacing-sm);
  }

  .toolbar__search-input {
    /* Use 100% width and box-sizing is already border-box from reset */
    width: 100%;
    min-height: 44px;
  }
}

/* ── Detail actions: stack buttons on very narrow screens ───────── */
@media (max-width: 359px) {
  .detail-actions {
    flex-direction: column;
  }

  .detail-actions .btn {
    width: 100%;
  }
}