/* ============================================================
   LMS v7.1 — Production fixes stylesheet
   Loaded AFTER design-system.css so it surgically overrides
   only what we need to fix, without touching the design tokens.
   ============================================================ */

/* ── Custom confirm dialog ─────────────────────────────────── */
.lms-confirm-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  opacity: 0;
  transition: opacity .18s ease;
  padding: 16px;
}
.lms-confirm-backdrop.open { opacity: 1; }
.lms-confirm-card {
  width: 100%; max-width: 420px;
  background: var(--surface, #fff);
  border-radius: 16px;
  padding: 28px 24px 20px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, .25);
  transform: translateY(8px) scale(.98);
  transition: transform .22s cubic-bezier(.16,1,.3,1);
  outline: none;
}
.lms-confirm-backdrop.open .lms-confirm-card { transform: translateY(0) scale(1); }
.lms-confirm-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(244, 63, 94, .12);
  color: #e11d48;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.lms-confirm-title {
  font-size: 18px; font-weight: 700;
  letter-spacing: -.015em;
  margin: 0 0 6px;
  color: var(--text-primary);
}
.lms-confirm-msg {
  font-size: 14px; line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 20px;
}
.lms-confirm-actions {
  display: flex; gap: 10px; justify-content: flex-end;
}
.lms-confirm-actions .btn { min-width: 92px; }
.btn-danger {
  background: #e11d48; color: #fff !important; border: 1px solid #e11d48;
}
.btn-danger:hover { background: #be123c; border-color: #be123c; }

/* ── Messenger-style chat clean-up (kill double borders) ─── */
.chat-pane, .messages-pane, .chat-thread { border: 1px solid var(--border) !important; }
.chat-bubble, .msg-bubble { border: 0 !important; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.chat-list .item { border-bottom: 1px solid var(--border-subtle); }
.chat-list .item:last-child { border-bottom: 0; }
.chat-thread .input-bar { border-top: 1px solid var(--border); }

/* ── Skeleton shimmer (Facebook-style) ────────────────────── */
.skeleton-line, .skel { position: relative; overflow: hidden; background: var(--bg-subtle); border-radius: 8px; height: 14px; margin: 8px 0; }
.skeleton-line::after, .skel::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.45) 50%, transparent 100%);
  animation: skel-shimmer 1.4s linear infinite;
}
[data-theme="dark"] .skeleton-line::after,
[data-theme="dark"] .skel::after {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.06) 50%, transparent 100%);
}
@keyframes skel-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* ── Full-width responsive search bar ────────────────────── */
.topbar-search { width: 100% !important; max-width: 560px; }
@media (max-width: 768px) {
  .topbar-search { max-width: none; flex: 1; }
}

/* ── Sidebar icon stroke consistency ──────────────────────── */
.sb-nav-item .sb-icon i[data-lucide] { stroke-width: 1.75; }

/* ── Online dot for user avatars ──────────────────────────── */
.avatar-online::after {
  content: ''; position: absolute; bottom: 0; right: 0;
  width: 10px; height: 10px;
  background: #10b981; border: 2px solid var(--surface);
  border-radius: 50%;
}

/* ── Time tag inline style ───────────────────────────────── */
time[data-relative] { cursor: help; font-variant-numeric: tabular-nums; }

/* ============================================================
   v7.2 — Additional polish
   ============================================================ */

/* Image fallback: subtle visual treatment when an <img> falls back */
img.img-fallback { object-fit: contain !important; background: var(--bg-subtle); }

/* Online-dot inside a circular avatar wrapper (used by messaging contacts) */
.convo-item .ci-av.avatar-online::after,
.topbar-avatar.avatar-online::after,
.sb-avatar.avatar-online::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 10px; height: 10px;
  background: #10b981;
  border: 2px solid var(--surface, #fff);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(16,185,129,.25);
}

/* Notifications page: subtle hover */
.notif-list .notif-item { transition: background .15s ease; }
.notif-list .notif-item:hover { background: var(--bg-subtle); }
.notif-list .notif-item.unread:hover { background: color-mix(in srgb, var(--accent-soft) 80%, var(--bg-subtle)); }

/* Mark-all-read button width sanity */
.notif-panel form { margin: 0; }

/* Full-bleed responsive search bar reinforcement (mobile) */
@media (max-width: 540px) {
  .topbar { gap: 8px; }
  .topbar-search input[type="search"] { font-size: 14px; }
}