/* =============================================================
   Minha Didática — Estilos de Componentes Web Components
   ============================================================= */

/* ── card-material (host styles) ─────────────────────────────── */
card-material {
  display: block;
  animation: fadeInUp 0.4s ease both;
}

/* ── app-modal backdrop ──────────────────────────────────────── */
app-modal {
  display: contents;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: hsl(221 39% 10% / 0.6);
  backdrop-filter: blur(6px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  animation: fadeIn 0.2s ease;
}

.modal-box {
  background: var(--clr-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 480px;
  max-height: 90dvh;
  overflow-y: auto;
  animation: scaleIn 0.25s ease;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6);
  border-bottom: 1px solid var(--clr-border);
}

.modal-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--clr-neutral-900);
}

.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md);
  color: var(--clr-neutral-500);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.modal-close:hover {
  background: var(--clr-neutral-100);
  color: var(--clr-neutral-800);
}

.modal-body  { padding: var(--space-6); }
.modal-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--clr-border);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

/* ── toast-notification ──────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 380px;
}

@media (max-width: 479px) {
  .toast-container { bottom: var(--space-4); right: var(--space-4); left: var(--space-4); max-width: none; }
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--clr-neutral-900);
  color: var(--clr-neutral-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  animation: slideInRight 0.3s ease;
  border-left: 3px solid transparent;
  overflow: hidden;
}

.toast.success { border-left-color: var(--clr-success-400); }
.toast.error   { border-left-color: var(--clr-error-400); }
.toast.warning { border-left-color: var(--clr-warning-400); }
.toast.info    { border-left-color: var(--clr-brand-400); }

.toast-icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-top: 1px; }
.toast-body { flex: 1; }
.toast-title { font-size: var(--text-sm); font-weight: var(--font-semibold); margin-bottom: 2px; }
.toast-message { font-size: var(--text-xs); color: var(--clr-neutral-400); line-height: var(--leading-relaxed); }
.toast-dismiss { flex-shrink: 0; opacity: 0.5; transition: opacity var(--transition-fast); }
.toast-dismiss:hover { opacity: 1; }

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── user-menu ───────────────────────────────────────────────── */
.user-menu-wrapper {
  position: relative;
}

.user-avatar-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-lg);
  transition: background var(--transition-fast);
  cursor: pointer;
}

.user-avatar-btn:hover { background: var(--clr-neutral-100); }

.user-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--clr-brand-400), var(--clr-brand-600));
  color: white;
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-name {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--clr-neutral-700);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 767px) { .user-name { display: none; } }

.user-dropdown {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 220px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  animation: scaleIn 0.15s ease;
  transform-origin: top right;
  z-index: var(--z-dropdown);
}

.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--clr-neutral-700);
  transition: background var(--transition-fast), color var(--transition-fast);
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.user-dropdown-item:hover { background: var(--clr-neutral-100); color: var(--clr-neutral-900); }
.user-dropdown-item.danger:hover { background: hsl(4 86% 95%); color: var(--clr-error-500); }
.user-dropdown-sep { height: 1px; background: var(--clr-border); margin: var(--space-2) 0; }
.user-dropdown-header { padding: var(--space-3); border-bottom: 1px solid var(--clr-border); margin-bottom: var(--space-2); }
.user-dropdown-email { font-size: var(--text-xs); color: var(--clr-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── filter-bar ──────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-8);
}

.filter-search-wrapper {
  flex: 1;
  min-width: 200px;
  position: relative;
}

.filter-search-icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--clr-neutral-400);
  pointer-events: none;
  width: 1rem;
  height: 1rem;
}

.filter-search {
  width: 100%;
  padding-left: calc(var(--space-3) + 1rem + var(--space-2));
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.filter-chip {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: var(--clr-neutral-100);
  color: var(--clr-neutral-600);
  border: 1.5px solid transparent;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.filter-chip:hover { background: var(--clr-brand-50); color: var(--clr-brand-600); border-color: var(--clr-brand-200); }
.filter-chip.active { background: var(--clr-brand-100); color: var(--clr-brand-700); border-color: var(--clr-brand-300); }

.filter-select-wrapper { position: relative; }
.filter-select-wrapper::after {
  content: '';
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--clr-neutral-500);
  pointer-events: none;
}

.filter-select {
  padding-right: calc(var(--space-4) + 16px);
  min-width: 140px;
  cursor: pointer;
}

/* ── cookie-banner ───────────────────────────────────────────── */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-overlay);
  background: var(--clr-neutral-900);
  color: var(--clr-neutral-300);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--clr-neutral-700);
  animation: slideUp 0.4s ease;
}

.cookie-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  max-width: var(--container-xl);
  margin-inline: auto;
}

.cookie-text {
  flex: 1;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  min-width: 280px;
}

.cookie-text a { color: var(--clr-brand-300); text-decoration: underline; }
.cookie-actions { display: flex; gap: var(--space-3); flex-shrink: 0; flex-wrap: wrap; }

@keyframes slideUp {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── skeleton-card ───────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--clr-neutral-100) 25%, var(--clr-neutral-50) 50%, var(--clr-neutral-100) 75%);
  background-size: 200% auto;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--radius-md);
}

.skeleton-card-root {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.sk-thumb  { height: 180px; border-radius: 0; }
.sk-body   { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.sk-line   { height: 14px; width: 100%; }
.sk-line-sm { height: 12px; width: 70%; }
.sk-line-xs { height: 10px; width: 50%; }
.sk-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.sk-btn    { height: 36px; flex: 1; border-radius: var(--radius-lg); }