/* ─────────────────────────────────────────────────────────
   Shared components
   ───────────────────────────────────────────────────────── */

/* ─── Avatar (used by contacts, users and inbox) ─── */
.ds-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0; background: var(--accent);
}

/* ─── Avatar shape (x-ds-avatar: real photo or local initials, no external service) ─── */
.ds-avatar-shape {
  border-radius: 50%; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-gradient);
  color: #fff; font-weight: 700; line-height: 1;
}
.ds-avatar-shape img { width: 100%; height: 100%; object-fit: cover; }

/* ─── Contact card (used by contacts index and inbox "new chat" search) ─── */
.ds-contact-card {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 16px;
  display: flex; align-items: flex-start; gap: 14px;
  text-decoration: none; color: inherit; transition: background .15s, border-color .15s;
  width: 100%;
}
.ds-contact-card:hover { background: var(--bg-card-hover); border-color: var(--border-hover); color: inherit; }
.ds-contact-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }

/* ─── Buttons ─── */
.btn-gradient {
  background: var(--accent-gradient); border: none; color: #fff;
  border-radius: var(--radius-sm);
}
.btn-gradient:hover, .btn-gradient:focus { background: var(--accent-gradient-hover); color: #fff; }

.btn-outline {
  background: transparent; border: 1px solid var(--border-color);
  color: var(--text-secondary); border-radius: var(--radius-sm);
}
.btn-outline:hover { background: var(--bg-card-hover); color: var(--text-primary); border-color: var(--border-hover); }

.btn-danger-soft {
  background: var(--danger-soft); border: 1px solid rgba(239, 68, 68, .35);
  color: var(--danger); border-radius: var(--radius-sm);
}
.btn-danger-soft:hover { background: rgba(239, 68, 68, .2); color: var(--danger); }

.ds-icon-btn {
  width: 42px; height: 42px; border-radius: 50%; border: none;
  background: transparent; color: var(--text-secondary); font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: color .15s, background .15s; flex-shrink: 0;
}
.ds-icon-btn:hover { color: var(--text-primary); background: var(--bg-card-hover); }
.ds-icon-btn.send-btn { background: var(--accent-gradient); color: #fff; }
.ds-icon-btn.send-btn:hover { background: var(--accent-gradient-hover); }

/* ─── Brand badge ─── */
.ds-brand-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-gradient);
  border-radius: var(--radius-sm); color: #fff; font-weight: 700; flex-shrink: 0;
}

/* ─── Lang switcher ─── */
.ds-lang-btn {
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: .02em;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-sm) !important;
  width: 40px !important; height: 28px !important;
  color: var(--text-secondary) !important;
}
.ds-lang-btn:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
.ds-mobile-lang-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--bg-sidebar-section);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  flex-shrink: 0;
}
.ds-mobile-lang-btn:hover { color: #fff; border-color: var(--accent); background: var(--accent); }

/* ─── Status pills ─── */
.ds-status-pill { font-size: 11px; padding: 2px 8px; border-radius: 20px; font-weight: 500; }
.ds-status-open     { background: rgba(56,189,248,.16);  color: var(--accent-secondary); }
.ds-status-pending  { background: rgba(245,158,11,.15);  color: var(--warning); }
.ds-status-resolved { background: rgba(16,185,129,.16);  color: var(--success); }
.ds-status-archived { background: rgba(136,136,153,.1);  color: var(--text-muted); }

/* ─── Label chip ─── */
.ds-label-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 500;
}

/* ─── Empty state ─── */
.ds-empty-state {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; padding: 40px 20px;
}
.ds-empty-icon-shape {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(124,58,237,.14), rgba(56,189,248,.14));
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.ds-empty-icon-shape i {
  font-size: 30px; background: var(--accent-gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ds-empty-title { color: var(--text-primary); font-size: 15px; font-weight: 600; margin: 0; }
.ds-empty-state p { color: var(--text-secondary); font-size: 13px; margin: 0; max-width: 280px; }

/* ─── Cards ─── */
.ds-card {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 18px;
}

/* ─── KPI row + card (used by contacts/users/activity — inbox uses its
   own compact .ds-stat-bar instead). Only responsive overrides used to
   exist for .ds-kpi-row; this base rule was missing, which is why these
   pages showed the 4 cards stacked vertically instead of as a row. ─── */
.ds-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 900px) {
  .ds-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ds-kpi-card {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 16px;
  display: flex; align-items: center; gap: 14px;
}
.ds-kpi-card .ds-kpi-icon {
  width: 44px; height: 44px; border-radius: var(--radius-md);
  background: rgba(124,58,237,.12); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
}
.ds-kpi-card .ds-kpi-value { font-size: 22px; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.ds-kpi-card .ds-kpi-label { font-size: 12px; color: var(--text-secondary); }

/* ─── Filter card ─── */
.ds-filter-card {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 16px;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
}
/* Base label style for filter-card fields (contacts/activity log both use
   this class but never had a rule of their own). */
.ds-field-label {
  display: block;
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}

/* ─── Data table (used by Users' index; Contacts moved to cards) ─── */
.ds-table-wrap {
  padding: 0;
  overflow-x: auto;
}
.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.ds-table thead th {
  text-align: start;
  padding: 12px 16px;
  color: var(--text-secondary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}
.ds-table tbody td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}
.ds-table tbody tr:last-child td { border-bottom: none; }
.ds-table tbody tr:hover { background: var(--bg-card-hover); }
.ds-table-actions-col { width: 1%; }
.ds-table-actions { display: flex; gap: 4px; justify-content: flex-end; }

/* ─── Toast ─── */
.ds-toast-area {
  position: fixed; bottom: 24px; inset-inline-end: 24px;
  z-index: var(--z-toast); display: flex; flex-direction: column; gap: 10px;
  max-width: 320px; width: calc(100vw - 48px);
  pointer-events: none;
}
@media (max-width: 480px) {
  /* Full-width-ish with even side margins instead of hugging one edge,
     and clear of the fixed bottom nav (56px) + its safe-area inset so a
     toast never overlaps the nav bar or an iOS home indicator. */
  .ds-toast-area {
    inset-inline: 12px;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 12px);
    max-width: none;
    width: auto;
  }
  body.ds-full-screen-mobile .ds-toast-area {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  }
}
.ds-toast {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; min-width: 220px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-inline-start: 3px solid var(--tc);
  border-radius: var(--radius-md);
  color: var(--text-primary); font-size: 14px; line-height: 1.4;
  box-shadow: 0 8px 28px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.2);
  animation: toastIn .28s cubic-bezier(.34,1.3,.64,1) both;
  position: relative; overflow: hidden;
  pointer-events: all;
}
.ds-toast .t-icon  { font-size: 20px; color: var(--tc); flex-shrink: 0; }
.ds-toast .t-msg   { flex: 1; }
.ds-toast .t-close {
  background: none; border: none; color: var(--text-secondary);
  font-size: 14px; cursor: pointer; padding: 0; flex-shrink: 0;
  opacity: .45; transition: opacity .15s; line-height: 1;
}
.ds-toast .t-close:hover { opacity: 1; }
.ds-toast .t-bar {
  position: absolute; bottom: 0; inset-inline-start: 0;
  height: 2px; background: var(--tc); opacity: .45;
  animation: toastBar var(--td, 3500ms) linear both;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes toastBar {
  from { width: 100%; }
  to   { width: 0; }
}

/* ─── Modals / Forms ─── */
.modal { z-index: var(--z-modal); }
.modal-backdrop { z-index: var(--z-backdrop); }
.modal .dropdown-menu { z-index: var(--z-modal-dropdown); }

.modal-content {
  background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: var(--radius-lg);
  max-height: 100vh;
  max-height: 100dvh;
}
.modal-header  { border-bottom-color: var(--border-color); flex-wrap: wrap; }
.modal-footer  { border-top-color: var(--border-color); }

/* ── Modals on small screens: never edge-to-edge, always internally
   scrollable so a tall body (long form, icon picker, validation errors)
   can't push the header/footer off-screen — header and footer stay put,
   only .modal-body scrolls. ── */
@media (max-width: 576px) {
  .modal-dialog {
    max-width: calc(100% - 20px);
    margin: 10px auto;
  }
}
@media (max-height: 700px), (max-width: 576px) {
  .modal-content {
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    display: flex;
    flex-direction: column;
  }
  .modal-header, .modal-footer {
    flex-shrink: 0;
  }
  .modal-body {
    overflow-y: auto;
    min-height: 0;
  }
}
.form-control, .form-select {
  background: var(--bg-input); border-color: var(--border-color); color: var(--text-primary);
  border-radius: var(--radius-sm);
}
.form-control:focus, .form-select:focus {
  background: var(--bg-input); border-color: var(--accent); color: var(--text-primary);
  box-shadow: 0 0 0 .2rem rgba(124,58,237,.25);
}
.form-control::placeholder { color: var(--text-secondary); }
.form-label { color: var(--text-secondary); font-size: 13px; margin-bottom: 4px; }
.btn-close { filter: invert(1) grayscale(1); }
body.light-theme .btn-close { filter: none; }

/* ─── Dropdown ─── */
.dropdown-menu { background: var(--bg-card); border: 1px solid var(--border-color); z-index: var(--z-dropdown); }
.dropdown-item { color: var(--text-primary); }
.dropdown-item:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.dropdown-divider { border-color: var(--border-color); }

/* ─── Pagination ─── */
.ds-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; justify-content: center; margin-top: 16px; }
.ds-pagination a, .ds-pagination span {
  min-width: 32px; height: 32px; padding: 0 8px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); text-decoration: none; font-size: 13px;
  border: 1px solid var(--border-color);
}
@media (max-width: 400px) {
  /* min-width: 32px was set as a floor for legibility, not a touch target
     minimum (the 32px height already covers touch) — dropping it lets a
     row of ~7 items (prev + up to 5 numbers + next) actually fit at
     320px wide instead of wrapping into two uneven rows. */
  .ds-pagination a, .ds-pagination span { min-width: 30px; padding: 0 4px; }
}
.ds-pagination a:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.ds-pagination .active span { background: var(--accent-gradient); color: #fff; border-color: transparent; }
.ds-pagination .disabled span { opacity: .4; }

/* ─── Alerts ─── */
.alert { border-radius: var(--radius-md); }
.alert-success { background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.25); color: var(--success); }
.alert-danger  { background: var(--danger-soft); border: 1px solid rgba(239,68,68,.25); color: var(--danger); }

/* ─── Badge component ─── */
.ds-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600;
}
.ds-badge-neutral  { background: rgba(136,136,153,.15); color: var(--text-secondary); }
.ds-badge-accent   { background: rgba(124,58,237,.14); color: var(--accent); }
.ds-badge-success  { background: rgba(16,185,129,.15); color: var(--success); }
.ds-badge-warning  { background: rgba(245,158,11,.15); color: var(--warning); }
.ds-badge-danger   { background: var(--danger-soft); color: var(--danger); }

/* ─── Phone number (isolates the leading "+" from RTL bidi reordering) ─── */
.ds-phone-number {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
  text-align: left;
  font-variant-numeric: tabular-nums;
}