/**
 * Vime LMS — Design System v1.0
 * Fundação compartilhada (admin + frontend).
 *
 * IMPORTANTE: tudo é escopado sob `.vime-ds` para NÃO vazar no chrome do
 * WordPress nem em outros plugins. Envolva o conteúdo de cada tela do plugin
 * com <div class="vime-ds"> ... </div>.
 *
 * Fontes: Plus Jakarta Sans (display), Poppins (UI), JetBrains Mono (código).
 * São enfileiradas separadamente via wp_enqueue_style (Google Fonts).
 */

/* ============================================================
   TOKENS
   ============================================================ */
.vime-ds {
  /* Marca */
  --vime-violet-50:  #F1EBFD;
  --vime-violet-100: #E3D2FB;
  --vime-violet-200: #C9A8F6;
  --vime-violet-400: #9F62EF;
  --vime-violet:     #5C13E6; /* base / ação primária */
  --vime-violet-700: #4A0FB8; /* hover */
  --vime-violet-800: #360A87;
  --vime-magenta:    #AA00FF; /* acento pontual */
  --vime-lime:       #C3F85F; /* realce */

  /* Neutros */
  --vime-ink-900: #221B3D; /* texto */
  --vime-ink-700: #54506B; /* secundário */
  --vime-ink-500: #8B85A0; /* apoio */
  --vime-ink-400: #A09BB0;
  --vime-line:    #E5E2EF; /* bordas */
  --vime-line-soft: #EEEDF3;
  --vime-bg:      #F8F8F8; /* fundo da aplicação */
  --vime-surface: #FFFFFF; /* cards */
  --vime-surface-alt: #FBFAFE; /* superfícies suaves / sidebar */

  /* Semânticas */
  --vime-success: #0FA98C; --vime-success-bg: #E1F6F1; --vime-success-ink: #0C8A72;
  --vime-warning: #F59E0B; --vime-warning-bg: #FDF0D9; --vime-warning-ink: #B0730A;
  --vime-error:   #F0476A; --vime-error-bg:   #FDE7EC; --vime-error-ink:   #F0476A;

  /* Gradiente de marca */
  --vime-grad: linear-gradient(135deg, #5C13E6, #AA00FF);

  /* Raio */
  --vime-r-sm: 8px;   /* inputs / botões */
  --vime-r-md: 14px;  /* cards menores */
  --vime-r-lg: 20px;  /* cards / painéis */
  --vime-r-full: 999px;

  /* Sombra */
  --vime-shadow-sm: 0 1px 2px rgba(34,27,61,.06);
  --vime-shadow-md: 0 4px 16px rgba(34,27,61,.10);
  --vime-shadow-lg: 0 18px 48px rgba(34,27,61,.18);
  --vime-shadow-violet: 0 2px 8px rgba(92,19,230,.28);

  /* Tipografia */
  --vime-font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --vime-font-ui: 'Poppins', system-ui, sans-serif;
  --vime-font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Base */
  font-family: var(--vime-font-ui);
  color: var(--vime-ink-900);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.5;
  box-sizing: border-box;
}
.vime-ds *,
.vime-ds *::before,
.vime-ds *::after { box-sizing: border-box; }

.vime-ds ::selection { background: var(--vime-violet); color: #fff; }

/* Scrollbar discreta dentro do escopo */
.vime-ds .vime-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.vime-ds .vime-scroll::-webkit-scrollbar-thumb {
  background: #D9D5E6; border-radius: var(--vime-r-full);
  border: 3px solid transparent; background-clip: content-box;
}

/* ============================================================
   TIPOGRAFIA
   ============================================================ */
.vime-ds .vime-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  color: var(--vime-magenta); text-transform: uppercase;
}
.vime-ds .vime-display {
  font-family: var(--vime-font-display); font-weight: 800;
  font-size: 36px; line-height: 1.05; letter-spacing: -.03em;
}
.vime-ds .vime-h1 {
  font-family: var(--vime-font-display); font-weight: 800;
  font-size: 25px; letter-spacing: -.02em; margin: 0;
}
.vime-ds .vime-h2 {
  font-family: var(--vime-font-display); font-weight: 700;
  font-size: 20px; letter-spacing: -.02em; margin: 0;
}
.vime-ds .vime-h3 {
  font-family: var(--vime-font-display); font-weight: 700;
  font-size: 16px; margin: 0;
}
.vime-ds .vime-label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--vime-ink-700); margin-bottom: 7px;
}
.vime-ds .vime-muted { color: var(--vime-ink-500); }
.vime-ds .vime-mono { font-family: var(--vime-font-mono); }

/* ============================================================
   BOTÕES
   ============================================================ */
.vime-ds .vime-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--vime-font-ui); font-weight: 600; font-size: 14px;
  border: none; border-radius: var(--vime-r-sm);
  padding: 11px 20px; cursor: pointer; text-decoration: none;
  line-height: 1; transition: background .15s, box-shadow .15s, transform .05s;
  white-space: nowrap;
}
.vime-ds .vime-btn:active { transform: translateY(1px); }
.vime-ds .vime-btn--primary {
  color: #fff; background: var(--vime-violet); box-shadow: var(--vime-shadow-violet);
}
.vime-ds .vime-btn--primary:hover { background: var(--vime-violet-700); }
.vime-ds .vime-btn--gradient {
  color: #fff; background: var(--vime-grad); box-shadow: var(--vime-shadow-violet);
}
.vime-ds .vime-btn--soft {
  color: var(--vime-violet); background: var(--vime-violet-50);
}
.vime-ds .vime-btn--soft:hover { background: var(--vime-violet-100); }
.vime-ds .vime-btn--outline {
  color: var(--vime-ink-900); background: #fff; border: 1px solid #D9D5E6;
}
.vime-ds .vime-btn--outline:hover { border-color: var(--vime-violet-200); color: var(--vime-violet); }
.vime-ds .vime-btn--text {
  color: var(--vime-ink-700); background: transparent; padding: 11px 14px;
}
.vime-ds .vime-btn--text:hover { color: var(--vime-violet); background: var(--vime-violet-50); }
.vime-ds .vime-btn--danger { color: #fff; background: var(--vime-error); }
.vime-ds .vime-btn--danger:hover { background: #DA2F55; }
.vime-ds .vime-btn:disabled,
.vime-ds .vime-btn.is-disabled {
  color: var(--vime-ink-400); background: #F2F1F6; box-shadow: none;
  cursor: not-allowed; pointer-events: none;
}
.vime-ds .vime-btn--sm { font-size: 12px; padding: 7px 14px; gap: 5px; }
.vime-ds .vime-btn--lg { font-size: 15px; padding: 14px 26px; border-radius: var(--vime-r-md); }
.vime-ds .vime-btn--block { width: 100%; }
.vime-ds .vime-btn--iconly {
  width: 40px; height: 40px; padding: 0; color: var(--vime-violet);
  background: var(--vime-violet-50);
}

/* ============================================================
   CAMPOS DE FORMULÁRIO
   ============================================================ */
.vime-ds .vime-field { margin-bottom: 16px; }
.vime-ds .vime-input,
.vime-ds .vime-select,
.vime-ds .vime-textarea {
  width: 100%; font-family: var(--vime-font-ui); font-size: 14px;
  color: var(--vime-ink-900); background: #fff;
  border: 1px solid #D9D5E6; border-radius: var(--vime-r-sm);
  padding: 11px 14px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.vime-ds .vime-textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.vime-ds .vime-input:focus,
.vime-ds .vime-select:focus,
.vime-ds .vime-textarea:focus {
  border-color: var(--vime-violet); border-width: 1px;
  box-shadow: 0 0 0 4px rgba(92,19,230,.12);
}
.vime-ds .vime-input::placeholder,
.vime-ds .vime-textarea::placeholder { color: var(--vime-ink-400); }
.vime-ds .vime-input--error,
.vime-ds .vime-input.is-error { border-color: var(--vime-error); }
.vime-ds .vime-field-error { font-size: 11px; color: var(--vime-error); margin-top: 6px; }

.vime-ds .vime-select-wrap { position: relative; }
.vime-ds .vime-select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 34px;
}
.vime-ds .vime-select-wrap::after {
  content: ""; position: absolute; right: 15px; top: 50%;
  width: 9px; height: 9px; border-right: 2px solid var(--vime-ink-500);
  border-bottom: 2px solid var(--vime-ink-500);
  transform: translateY(-65%) rotate(45deg); pointer-events: none;
}

.vime-ds .vime-search { position: relative; }
.vime-ds .vime-search .vime-search-input {
  width: 100%; font-family: var(--vime-font-ui); font-size: 14px;
  color: var(--vime-ink-900); background: var(--vime-bg);
  border: 1px solid var(--vime-line); border-radius: var(--vime-r-sm);
  padding: 11px 14px 11px 36px; outline: none;
}
.vime-ds .vime-search .vime-search-icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--vime-ink-500); display: flex;
}

/* checkbox / radio / toggle (visuais) */
.vime-ds .vime-check {
  width: 18px; height: 18px; border-radius: 5px; background: var(--vime-violet);
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
}
.vime-ds .vime-toggle {
  width: 34px; height: 20px; border-radius: var(--vime-r-full);
  background: var(--vime-violet); position: relative; display: inline-block;
}
.vime-ds .vime-toggle::after {
  content: ""; position: absolute; right: 2px; top: 2px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
}
.vime-ds .vime-toggle.is-off { background: #D9D5E6; }
.vime-ds .vime-toggle.is-off::after { left: 2px; right: auto; }

/* ============================================================
   BADGES & STATUS
   ============================================================ */
.vime-ds .vime-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; padding: 5px 12px;
  border-radius: var(--vime-r-full); color: var(--vime-ink-700); background: #F0EFF4;
}
.vime-ds .vime-badge .vime-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.vime-ds .vime-badge--success { color: var(--vime-success-ink); background: var(--vime-success-bg); }
.vime-ds .vime-badge--draft   { color: var(--vime-ink-700); background: #F0EFF4; }
.vime-ds .vime-badge--review  { color: var(--vime-warning-ink); background: var(--vime-warning-bg); }
.vime-ds .vime-badge--error   { color: var(--vime-error-ink); background: var(--vime-error-bg); }
.vime-ds .vime-badge--brand   { color: var(--vime-violet); background: var(--vime-violet-50); }
.vime-ds .vime-badge--new     { color: #2E2440; background: var(--vime-lime); font-weight: 700; }
.vime-ds .vime-badge--pro     { color: #fff; background: var(--vime-grad); }
.vime-ds .vime-badge-count {
  font-size: 11px; font-weight: 700; color: #fff; background: var(--vime-error);
  padding: 3px 8px; border-radius: 6px; line-height: 1;
}

/* ============================================================
   ABAS
   ============================================================ */
.vime-ds .vime-tabs {
  display: flex; align-items: center; gap: 4px;
  border-bottom: 1px solid var(--vime-line);
}
.vime-ds .vime-tab {
  font-size: 14px; font-weight: 500; color: var(--vime-ink-500);
  padding: 11px 16px; cursor: pointer; text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; border-top: none; border-left: none; border-right: none;
}
.vime-ds .vime-tab:hover { color: var(--vime-ink-700); }
.vime-ds .vime-tab.is-active {
  font-weight: 600; color: var(--vime-violet); border-bottom-color: var(--vime-violet);
}
/* segmented control */
.vime-ds .vime-segment {
  display: inline-flex; background: #F0EFF4; border-radius: var(--vime-r-sm);
  padding: 4px; gap: 2px;
}
.vime-ds .vime-segment-item {
  font-size: 13px; font-weight: 500; color: var(--vime-ink-500);
  padding: 7px 16px; border-radius: var(--vime-r-sm); cursor: pointer;
}
.vime-ds .vime-segment-item.is-active {
  font-weight: 600; color: var(--vime-ink-900); background: #fff;
  box-shadow: 0 1px 2px rgba(34,27,61,.08);
}

/* ============================================================
   CARDS & SUPERFÍCIES
   ============================================================ */
.vime-ds .vime-card {
  background: var(--vime-surface); border: 1px solid var(--vime-line-soft);
  border-radius: var(--vime-r-lg); padding: 22px; box-shadow: var(--vime-shadow-sm);
}
.vime-ds .vime-panel {
  background: var(--vime-surface); border: 1px solid #E8E6F0;
  border-radius: 22px; padding: 36px; box-shadow: var(--vime-shadow-sm);
}

/* stat card */
.vime-ds .vime-stat { }
.vime-ds .vime-stat-top { display: flex; align-items: center; justify-content: space-between; }
.vime-ds .vime-stat-icon {
  width: 38px; height: 38px; border-radius: 11px; background: var(--vime-violet-50);
  color: var(--vime-violet); display: flex; align-items: center; justify-content: center;
}
.vime-ds .vime-stat-trend { font-size: 12px; font-weight: 600; color: var(--vime-success); }
.vime-ds .vime-stat-trend.is-down { color: var(--vime-error); }
.vime-ds .vime-stat-value {
  font-family: var(--vime-font-display); font-weight: 800; font-size: 32px;
  letter-spacing: -.02em; margin-top: 16px;
}
.vime-ds .vime-stat-label { font-size: 13px; color: var(--vime-ink-500); margin-top: 2px; }

/* progress bar */
.vime-ds .vime-progress {
  height: 6px; background: #F0EFF4; border-radius: var(--vime-r-full);
  overflow: hidden;
}
.vime-ds .vime-progress-fill {
  height: 100%; background: var(--vime-violet); border-radius: var(--vime-r-full);
}
.vime-ds .vime-progress-fill--lime { background: var(--vime-lime); }

/* avatar */
.vime-ds .vime-avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--vime-grad);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; flex-shrink: 0;
}

/* ============================================================
   TABELA / LIST TABLE
   ============================================================ */
.vime-ds .vime-table {
  background: #fff; border: 1px solid var(--vime-line-soft);
  border-radius: var(--vime-r-md); overflow: hidden; box-shadow: var(--vime-shadow-sm);
}
.vime-ds .vime-thead,
.vime-ds .vime-trow { display: grid; align-items: center; }
.vime-ds .vime-thead {
  background: var(--vime-surface-alt); padding: 12px 18px;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--vime-ink-500); border-bottom: 1px solid var(--vime-line-soft);
}
.vime-ds .vime-trow {
  padding: 13px 18px; border-bottom: 1px solid #F2F1F6; font-size: 13px;
}
.vime-ds .vime-trow:last-child { border-bottom: none; }
.vime-ds .vime-trow:hover { background: var(--vime-surface-alt); }
.vime-ds .vime-trow td, .vime-ds .vime-trow .vime-cell { color: var(--vime-ink-700); }

/* ============================================================
   NOTICES / TOASTS
   ============================================================ */
.vime-ds .vime-notice {
  display: flex; align-items: center; gap: 12px; background: #fff;
  border: 1px solid var(--vime-line-soft); border-left: 3px solid var(--vime-violet);
  border-radius: 12px; padding: 13px 16px;
}
.vime-ds .vime-notice--success { border-left-color: var(--vime-success); }
.vime-ds .vime-notice--warning { border-left-color: var(--vime-warning); }
.vime-ds .vime-notice--error   { border-left-color: var(--vime-error); }
.vime-ds .vime-notice-icon {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--vime-violet-50); color: var(--vime-violet);
}
.vime-ds .vime-notice--success .vime-notice-icon { background: var(--vime-success-bg); color: var(--vime-success); }
.vime-ds .vime-notice--warning .vime-notice-icon { background: var(--vime-warning-bg); color: var(--vime-warning-ink); }
.vime-ds .vime-notice--error .vime-notice-icon { background: var(--vime-error-bg); color: var(--vime-error); }

.vime-ds .vime-toast {
  display: flex; align-items: center; gap: 12px; background: #fff;
  border: 1px solid var(--vime-line-soft); border-left: 3px solid var(--vime-violet);
  border-radius: 12px; padding: 14px; box-shadow: var(--vime-shadow-md);
}
.vime-ds .vime-toast--success { border-left-color: var(--vime-success); }
.vime-ds .vime-toast--warning { border-left-color: var(--vime-warning); }
.vime-ds .vime-toast--error   { border-left-color: var(--vime-error); }

/* ============================================================
   MODAL
   ============================================================ */
.vime-ds .vime-modal-backdrop {
  position: fixed; inset: 0; background: rgba(34,27,61,.45);
  display: flex; align-items: center; justify-content: center; z-index: 100000; padding: 20px;
}
.vime-ds .vime-modal {
  width: 100%; max-width: 380px; background: #fff; border-radius: 18px;
  box-shadow: var(--vime-shadow-lg); overflow: hidden;
}
.vime-ds .vime-modal-body { padding: 22px 22px 0; }
.vime-ds .vime-modal-title {
  font-family: var(--vime-font-display); font-weight: 700; font-size: 18px; margin-top: 14px;
}
.vime-ds .vime-modal-text { font-size: 13px; color: #6B6580; line-height: 1.5; margin-top: 6px; }
.vime-ds .vime-modal-actions { display: flex; gap: 10px; padding: 20px 22px; }

/* ============================================================
   PAGE HEADER (padrão das telas admin)
   ============================================================ */
.vime-ds .vime-page-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.vime-ds .vime-page-header .vime-sub { font-size: 13px; color: #6B6580; margin-top: 3px; }

/* container padrão de uma página do plugin */
.vime-ds.vime-page { padding: 8px 4px 40px; overflow-x: clip; max-width: 100%; }

/* brand mark (logo V) */
.vime-ds .vime-brand-mark {
  border-radius: 10px; background: var(--vime-grad); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--vime-font-display); font-weight: 800;
}

/* ============================================================
   ÍCONES (web component <v-icon>) — estilo base
   ============================================================ */
.vime-ds v-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 0; vertical-align: middle; flex-shrink: 0; }

/* grid helpers */
.vime-ds .vime-grid { display: grid; gap: 18px; }
/* evita "grid blowout": filhos podem encolher abaixo do conteúdo */
.vime-ds .vime-grid > * { min-width: 0; }
.vime-ds .vime-grid--2 { grid-template-columns: repeat(2, 1fr); }
.vime-ds .vime-grid--3 { grid-template-columns: repeat(3, 1fr); }
.vime-ds .vime-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .vime-ds .vime-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 782px) {
  .vime-ds .vime-grid--2,
  .vime-ds .vime-grid--3,
  .vime-ds .vime-grid--4 { grid-template-columns: 1fr; }
}