/*
 * Social Metrics Dashboard — frontend.css
 * Prefixo .smdf- (Social Metrics Dashboard Frontend) para isolamento total do tema.
 * Todos os seletores são escopados dentro de .smdf-root
 */

/* ── Reset base isolado ────────────────────────────────── */
.smdf-root,
.smdf-root *,
.smdf-root *::before,
.smdf-root *::after {
  box-sizing: border-box;
}

.smdf-root {
  --smdf-primary:       #6366f1;
  --smdf-primary-dark:  #4f46e5;
  --smdf-primary-light: #eef2ff;
  --smdf-success:       #10b981;
  --smdf-success-bg:    #dcfce7;
  --smdf-danger:        #ef4444;
  --smdf-danger-bg:     #fee2e2;
  --smdf-warning:       #f59e0b;
  --smdf-info:          #3b82f6;
  --smdf-bg:            #f1f5f9;
  --smdf-card:          #ffffff;
  --smdf-border:        #e2e8f0;
  --smdf-text:          #1e293b;
  --smdf-muted:         #64748b;
  --smdf-light:         #94a3b8;
  --smdf-radius:        14px;
  --smdf-radius-md:     10px;
  --smdf-radius-sm:     7px;
  --smdf-shadow:        0 1px 3px rgba(0,0,0,.07), 0 4px 18px rgba(0,0,0,.04);
  --smdf-shadow-md:     0 6px 20px rgba(0,0,0,.10);
  --smdf-shadow-lg:     0 16px 48px rgba(0,0,0,.18);
  --smdf-t:             .18s ease;
  --smdf-font:          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  font-family: var(--smdf-font);
  color: var(--smdf-text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ══════════════════════════════════════════════════════════
   LOGIN
══════════════════════════════════════════════════════════ */

.smdf-login-root {
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  background: var(--smdf-bg);
  border-radius: var(--smdf-radius);
}

.smdf-login-wrap {
  width: 100%;
  max-width: 440px;
}

.smdf-login-box {
  background: var(--smdf-card);
  border: 1px solid var(--smdf-border);
  border-radius: var(--smdf-radius);
  box-shadow: var(--smdf-shadow-md);
  padding: 44px 40px 36px;
}

.smdf-login-header {
  text-align: center;
  margin-bottom: 32px;
}

.smdf-login-icon {
  margin-bottom: 16px;
}

.smdf-login-icon svg {
  display: inline-block;
}

.smdf-login-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--smdf-text);
  margin: 0 0 6px;
  font-family: var(--smdf-font);
  line-height: 1.2;
}

.smdf-login-subtitle {
  font-size: .9rem;
  color: var(--smdf-muted);
  margin: 0;
}

.smdf-login-footer {
  font-size: .78rem;
  color: var(--smdf-light);
  text-align: center;
  margin: 18px 0 0;
}

/* ── Fields ── */
.smdf-field {
  margin-bottom: 20px;
}

.smdf-label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  color: var(--smdf-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 6px;
}

.smdf-root .smdf-input-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.smdf-root .smdf-input {
  width: 100% !important;
  padding: 11px 42px 11px 44px !important;
  border: 1.5px solid var(--smdf-border) !important;
  border-radius: var(--smdf-radius-sm) !important;
  font-size: .95rem !important;
  font-family: var(--smdf-font) !important;
  color: var(--smdf-text) !important;
  background: #fff !important;
  transition: border-color var(--smdf-t), box-shadow var(--smdf-t);
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}

.smdf-input:focus {
  border-color: var(--smdf-primary);
  box-shadow: 0 0 0 3px rgba(99,102,241,.18);
}

.smdf-input--error {
  border-color: var(--smdf-danger);
}

.smdf-input--error:focus {
  box-shadow: 0 0 0 3px rgba(239,68,68,.15);
}

.smdf-root .smdf-input-icon {
  position: absolute !important;
  left: 13px !important;
  z-index: 2;
  color: var(--smdf-light);
  display: flex !important;
  align-items: center;
  pointer-events: none;
}

.smdf-root .smdf-toggle-pw {
  position: absolute !important;
  right: 8px !important;
  background: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 6px !important;
  cursor: pointer;
  color: var(--smdf-light);
  display: flex !important;
  align-items: center;
  transition: color var(--smdf-t);
  border-radius: 6px;
  line-height: 1;
}

.smdf-root .smdf-toggle-pw:hover { color: var(--smdf-primary) !important; background: none !important; border: none !important; }
.smdf-root .smdf-toggle-pw:focus { outline: none !important; box-shadow: none !important; border: none !important; }


.smdf-field-error {
  display: block;
  font-size: .78rem;
  color: var(--smdf-danger);
  margin-top: 5px;
  min-height: 16px;
}

/* ── Buttons ── */
.smdf-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  border-radius: var(--smdf-radius-sm);
  font-size: .9rem;
  font-weight: 700;
  font-family: var(--smdf-font);
  cursor: pointer;
  transition: all var(--smdf-t);
  border: 2px solid transparent;
  text-decoration: none;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
}

.smdf-root .smdf-btn--primary {
  background: var(--smdf-primary) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
}
.smdf-root .smdf-btn--primary:hover {
  background: var(--smdf-primary-dark) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(99,102,241,.35) !important;
}
.smdf-root .smdf-btn--primary:disabled {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}

.smdf-btn--outline {
  background: transparent;
  color: var(--smdf-primary);
  border-color: var(--smdf-primary);
}
.smdf-btn--outline:hover { background: var(--smdf-primary); color: #fff; }

.smdf-btn--ghost {
  background: transparent;
  color: var(--smdf-muted);
  border-color: var(--smdf-border);
}
.smdf-btn--ghost:hover { background: var(--smdf-bg); color: var(--smdf-text); }

.smdf-btn--sm { padding: 6px 14px; font-size: .8rem; }
.smdf-btn--full { width: 100%; justify-content: center; }

/* ── Notice ── */
.smdf-notice {
  padding: 12px 16px;
  border-radius: var(--smdf-radius-sm);
  font-size: .9rem;
  font-weight: 500;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  animation: smdfSlideIn .2s ease;
}
.smdf-notice--success { background: var(--smdf-success-bg); color: #166534; border: 1px solid #86efac; }
.smdf-notice--error   { background: var(--smdf-danger-bg);  color: #991b1b; border: 1px solid #fca5a5; }
.smdf-notice--info    { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
.smdf-notice--dash    { margin: 0 0 16px; }

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

/* ── Spinner ── */
.smdf-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2.5px solid var(--smdf-border);
  border-top-color: var(--smdf-primary);
  border-radius: 50%;
  animation: smdfSpin .65s linear infinite;
  flex-shrink: 0;
}
@keyframes smdfSpin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════
   NO COMPANY STATE
══════════════════════════════════════════════════════════ */

.smdf-no-company {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 60px 24px;
  background: var(--smdf-card);
  border: 1px solid var(--smdf-border);
  border-radius: var(--smdf-radius);
  box-shadow: var(--smdf-shadow);
  gap: 14px;
}

.smdf-no-company__icon {
  width: 80px;
  height: 80px;
  background: var(--smdf-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.smdf-no-company h2 {
  font-size: 1.3rem;
  font-weight: 800;
  margin: 0;
  color: var(--smdf-text);
}

.smdf-no-company p {
  margin: 0;
  color: var(--smdf-muted);
  font-size: .95rem;
  max-width: 380px;
}

/* ══════════════════════════════════════════════════════════
   DASHBOARD ROOT
══════════════════════════════════════════════════════════ */

.smdf-dash-root {
  background: var(--smdf-bg);
  border-radius: var(--smdf-radius);
  overflow: hidden;
}

/* ── Topbar ── */
.smdf-topbar {
  background: var(--smdf-card);
  border-bottom: 1px solid var(--smdf-border);
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.smdf-topbar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.smdf-topbar__logo {
  height: 40px;
  max-width: 100px;
  object-fit: contain;
  border-radius: 8px;
}

.smdf-topbar__logo-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--smdf-primary), #818cf8);
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  flex-shrink: 0;
}

.smdf-topbar__info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.smdf-topbar__company {
  font-size: .95rem;
  font-weight: 800;
  color: var(--smdf-text);
  line-height: 1.2;
}

.smdf-topbar__user {
  font-size: .78rem;
  color: var(--smdf-muted);
}

.smdf-topbar__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Role badge */
.smdf-role-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .03em;
}
.smdf-role-badge--admin  { background: #f3e8ff; color: #7e22ce; }
.smdf-role-badge--editor { background: #dbeafe; color: #1d4ed8; }
.smdf-role-badge--viewer { background: #f1f5f9; color: #475569; }

/* ── Filters card ── */
.smdf-filters-card {
  background: var(--smdf-card);
  border-bottom: 1px solid var(--smdf-border);
  padding: 16px 22px;
}

.smdf-filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
}

.smdf-filter-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 140px;
}

.smdf-filter-group--grow { flex: 2 1 180px; }
.smdf-filter-group--btn  { flex: 0 0 auto; }

.smdf-filter-label {
  font-size: .73rem;
  font-weight: 700;
  color: var(--smdf-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.smdf-select {
  width: 100%;
  padding: 8px 12px;
  border: 1.5px solid var(--smdf-border);
  border-radius: var(--smdf-radius-sm);
  font-size: .875rem;
  font-family: var(--smdf-font);
  color: var(--smdf-text);
  background: #fff;
  transition: border-color var(--smdf-t);
  outline: none;
  cursor: pointer;
}
.smdf-select:focus { border-color: var(--smdf-primary); box-shadow: 0 0 0 2px rgba(99,102,241,.15); }
.smdf-select--sm { padding: 5px 10px; font-size: .8rem; width: auto; }

/* ── Loading ── */
.smdf-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
}
.smdf-loading__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--smdf-muted);
  font-size: .9rem;
}

/* ── Dashboard content wrapper ── */
#smdf-dash-content {
  padding: 20px 22px 40px;
}

/* ── KPI Row ── */
.smdf-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.smdf-kpi-card {
  background: var(--kpi-bg, #dbeafe);
  border: 1.5px solid var(--kpi-border, #3b82f6);
  border-radius: var(--smdf-radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow var(--smdf-t), transform var(--smdf-t);
}
.smdf-kpi-card:hover { box-shadow: var(--smdf-shadow-md); transform: translateY(-2px); }

.smdf-kpi-card__icon {
  width: 36px;
  height: 36px;
  background: var(--kpi-border, #3b82f6);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.smdf-kpi-card__icon svg { color: #fff; }

.smdf-kpi-card__label {
  font-size: .68rem;
  font-weight: 700;
  color: var(--kpi-icon, #1d4ed8);
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1.2;
}

.smdf-kpi-card__value {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--smdf-text);
  line-height: 1.1;
}

.smdf-kpi-card__trend {
  font-size: .75rem;
}

/* Trend inline badges */
.smdf-trend {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
  border-radius: 100px;
  font-weight: 700;
}
.smdf-trend--up   { background: #dcfce7; color: #166534; }
.smdf-trend--down { background: #fee2e2; color: #991b1b; }
.smdf-trend--flat { background: #f1f5f9; color: #64748b; }
.smdf-trend--new  { background: #e0e7ff; color: #4338ca; }

/* ── Cards ── */
.smdf-card {
  background: var(--smdf-card);
  border: 1px solid var(--smdf-border);
  border-radius: var(--smdf-radius);
  box-shadow: var(--smdf-shadow);
  padding: 20px;
  margin-bottom: 0;
}

.smdf-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}

.smdf-card-title {
  font-size: .95rem;
  font-weight: 700;
  margin: 0;
  color: var(--smdf-text);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* ── Grid layouts ── */
.smdf-grid {
  display: grid;
  gap: 20px;
  margin-bottom: 20px;
}
.smdf-grid--70-30 { grid-template-columns: 1fr 300px; }
.smdf-grid--50-50 { grid-template-columns: 1fr 1fr; }

/* ── Chart areas ── */
.smdf-chart-wrap { position: relative; }
.smdf-chart-wrap--tall    { height: 300px; }
.smdf-chart-wrap--md      { height: 240px; }
.smdf-chart-wrap--doughnut{ height: 190px; }
.smdf-chart-wrap canvas   { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }

.smdf-chart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 120px;
  gap: 10px;
  color: var(--smdf-muted);
  text-align: center;
  padding: 16px;
}
.smdf-chart-empty--sm { min-height: 80px; }
.smdf-chart-empty p { margin: 0; font-size: .85rem; }

/* ── Chart type toggles ── */
.smdf-chart-toggles {
  display: flex;
  gap: 4px;
}

.smdf-toggle-btn {
  padding: 4px 10px;
  border: 1.5px solid var(--smdf-border);
  border-radius: 6px;
  font-size: .75rem;
  font-weight: 600;
  font-family: var(--smdf-font);
  color: var(--smdf-muted);
  background: var(--smdf-bg);
  cursor: pointer;
  transition: all var(--smdf-t);
}
.smdf-toggle-btn.active,
.smdf-toggle-btn:hover {
  background: var(--smdf-primary);
  border-color: var(--smdf-primary);
  color: #fff;
}

/* ── Small badges ── */
.smdf-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 100px;
  font-size: .72rem;
  font-weight: 700;
  background: var(--smdf-bg);
  color: var(--smdf-muted);
  border: 1px solid var(--smdf-border);
}
.smdf-pill--blue { background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; }

.smdf-net-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 100px;
  font-size: .68rem;
  font-weight: 700;
  background: var(--smdf-primary-light);
  color: var(--smdf-primary-dark);
  border: 1px solid rgba(99,102,241,.3);
}

/* Network color badges */
.smdf-badge { display: inline-flex; padding: 2px 8px; border-radius: 100px; font-size: .72rem; font-weight: 700; }
.smdf-badge--facebook       { background: #dbeafe; color: #1d4ed8; }
.smdf-badge--instagram      { background: #fce7f3; color: #9d174d; }
.smdf-badge--tiktok         { background: #f0fdf4; color: #166534; }
.smdf-badge--youtube        { background: #fee2e2; color: #991b1b; }
.smdf-badge--linkedin       { background: #dbeafe; color: #1e40af; }
.smdf-badge--analytics      { background: #fff7ed; color: #c2410c; }
.smdf-badge--activecampaign { background: #ecfdf5; color: #065f46; }

/* ── Isolation note ── */
.smdf-isolation-note {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .75rem;
  color: var(--smdf-muted);
  margin: -8px 0 12px;
}

/* ── Doughnut legend ── */
.smdf-doughnut-legend {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.smdf-legend-item { display: flex; align-items: center; gap: 8px; font-size: .8rem; }
.smdf-legend-dot  { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.smdf-legend-label{ flex: 1; color: var(--smdf-text); font-weight: 600; }
.smdf-legend-val  { color: var(--smdf-muted); white-space: nowrap; font-size: .75rem; }

/* ── Ranking list ── */
.smdf-ranking-list { display: flex; flex-direction: column; gap: 10px; }

.smdf-rank-item { display: flex; align-items: flex-start; gap: 10px; }

.smdf-rank-pos {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--smdf-bg);
  border: 1.5px solid var(--smdf-border);
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 800; color: var(--smdf-muted);
  flex-shrink: 0; margin-top: 2px;
}
.smdf-rank-item:nth-child(1) .smdf-rank-pos { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
.smdf-rank-item:nth-child(2) .smdf-rank-pos { background: #f1f5f9; border-color: #94a3b8; color: #475569; }
.smdf-rank-item:nth-child(3) .smdf-rank-pos { background: #fff7ed; border-color: #f97316; color: #9a3412; }

.smdf-rank-body { flex: 1; min-width: 0; }
.smdf-rank-top { display: flex; justify-content: space-between; gap: 6px; margin-bottom: 4px; }
.smdf-rank-name { font-size: .85rem; font-weight: 700; }
.smdf-rank-vol  { font-size: .85rem; font-weight: 800; white-space: nowrap; }
.smdf-rank-meta { font-size: .72rem; color: var(--smdf-muted); }

.smdf-rank-bar { height: 5px; border-radius: 100px; background: var(--smdf-bg); margin-bottom: 3px; }
.smdf-rank-bar-fill { height: 100%; border-radius: 100px; transition: width .6s cubic-bezier(.34,1.56,.64,1); }

/* ── Format breakdown ── */
.smdf-format-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.smdf-format-block { border: 1px solid var(--smdf-border); border-radius: var(--smdf-radius-sm); overflow: hidden; }
.smdf-format-block-title { padding: 8px 12px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--smdf-bg); border-bottom: 1px solid var(--smdf-border); color: var(--smdf-muted); }
.smdf-format-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; font-size: .8rem; }
.smdf-format-row:hover { background: var(--smdf-bg); }
.smdf-format-row-label { color: var(--smdf-muted); }
.smdf-format-row-val   { font-weight: 700; }
.smdf-format-total { padding: 6px 10px; font-size: .75rem; color: var(--smdf-muted); text-align: right; border-top: 1px solid var(--smdf-border); }

/* ── Table ── */
.smdf-table-wrap { overflow-x: auto; }
.smdf-table {
  width: 100%; border-collapse: collapse; font-size: .85rem;
}
.smdf-table thead th {
  background: var(--smdf-bg);
  padding: 9px 14px;
  font-size: .72rem; font-weight: 700; color: var(--smdf-muted);
  text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 2px solid var(--smdf-border);
  text-align: left; white-space: nowrap;
}
.smdf-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--smdf-border);
  vertical-align: middle;
  color: var(--smdf-text);
}
.smdf-table tr:last-child td { border-bottom: none; }
.smdf-table tr:hover td { background: rgba(99,102,241,.025); }
.smdf-td-center { text-align: center; padding: 24px !important; }
.smdf-td-muted  { color: var(--smdf-muted); }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .smdf-grid--70-30 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .smdf-grid--50-50 { grid-template-columns: 1fr; }
  .smdf-kpi-row     { grid-template-columns: repeat(2, 1fr); }
  .smdf-login-box   { padding: 32px 22px 28px; }
  .smdf-topbar      { padding: 12px 16px; }
  #smdf-dash-content{ padding: 16px 14px 32px; }
  .smdf-filters-card{ padding: 14px 16px; }
  .smdf-filters-row { flex-direction: column; }
  .smdf-filter-group{ flex: 1 1 100%; }
}
@media (max-width: 400px) {
  .smdf-kpi-row { grid-template-columns: 1fr; }
}