/*
 * base.css — Insta Analytics
 * Tema escuro com a paleta do Instagram.
 */

:root {
  /* Paleta Instagram — dark mode */
  --ig-purple:  #833AB4;
  --ig-pink:    #E1306C;
  --ig-orange:  #F77737;
  --ig-yellow:  #FCAF45;
  --ig-gradient: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF, #515BD4);

  --accent:       #E1306C;
  --accent-hover: #C13584;
  --accent-dim:   rgba(225, 48, 108, .14);

  --bg-body:    #0a0a0a;
  --bg-sidebar: #000000;
  --bg-card:    #181818;
  --bg-hover:   #262626;
  --border:     #2c2c2c;

  --text-base:  #f5f5f5;
  --text-muted: #a8a8a8;
  --danger:     #ed4956;
  --success:    #4ade80;

  --sidebar-w: 260px;
  --topbar-h:  56px;
}

*, *::before, *::after { box-sizing: border-box; }
body { background: var(--bg-body); color: var(--text-base); font-size: .9rem; margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* ── Layout ───────────────────────────────────────────────────────── */
.layout-wrapper { display: flex; min-height: 100vh; }

#sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 1040;
  overflow-y: auto;
}

.sidebar-brand {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: .6rem;
  padding: 0 1.25rem;
  font-size: 1.15rem; font-weight: 800;
  border-bottom: 1px solid var(--border);
  letter-spacing: .02em;
}
.sidebar-brand .logo-grad {
  background: var(--ig-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sidebar-brand i { font-size: 1.4rem; color: var(--accent); }

.nav-section-label {
  text-transform: uppercase; font-size: .67rem; letter-spacing: .1em;
  color: var(--text-muted); padding: 1.1rem 1.25rem .3rem; font-weight: 600;
}

.sidebar-nav .nav-link {
  color: var(--text-muted);
  padding: .55rem 1.25rem; border-radius: 8px; margin: 1px .5rem;
  display: flex; align-items: center; gap: .7rem;
  font-size: .9rem; transition: background .15s, color .15s; white-space: nowrap;
}
.sidebar-nav .nav-link:hover  { background: var(--bg-hover); color: var(--text-base); }
.sidebar-nav .nav-link.active { background: var(--accent-dim); color: var(--accent); font-weight: 600; }
.sidebar-nav .nav-link i { font-size: 1.05rem; flex-shrink: 0; }

.sidebar-footer { padding: .85rem 1rem; border-top: 1px solid var(--border); }
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--ig-gradient); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .8rem; flex-shrink: 0;
}

/* ── Topbar ───────────────────────────────────────────────────────── */
#topbar {
  height: var(--topbar-h); background: var(--bg-sidebar);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 1.5rem; gap: .75rem;
  position: sticky; top: 0; z-index: 1030;
}
.page-title-bar { font-weight: 600; font-size: .95rem; color: var(--text-base); }

/* ── Main ─────────────────────────────────────────────────────────── */
.main-wrapper { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-width: 0; }
.main-content { padding: 1.75rem; flex: 1; }

/* ── Cards ────────────────────────────────────────────────────────── */
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; color: var(--text-base); }
.card-header { background: transparent; border-bottom: 1px solid var(--border); padding: .85rem 1.25rem; font-weight: 600; }
.card-body, .card-footer { color: var(--text-base); }

.stat-card { padding: 1.25rem; }
.stat-card .stat-num { font-size: 1.9rem; font-weight: 800; line-height: 1; }
.stat-card .stat-label { color: var(--text-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; margin-top: .4rem; }
.stat-card .stat-icon { font-size: 1.5rem; color: var(--accent); }

/* ── Tabelas ──────────────────────────────────────────────────────── */
.table {
  --bs-table-bg: transparent; --bs-table-color: var(--text-base);
  --bs-table-hover-bg: var(--bg-hover); --bs-border-color: var(--border);
  color: var(--text-base);
}
thead th {
  border-bottom: 1px solid var(--border) !important; color: var(--text-muted);
  font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
}

/* ── Forms ────────────────────────────────────────────────────────── */
.form-control, .form-select {
  background: var(--bg-body); border-color: var(--border); color: var(--text-base);
}
.form-control:focus, .form-select:focus {
  background: var(--bg-body); border-color: var(--accent); color: var(--text-base);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.form-control::placeholder { color: var(--text-muted); }
.form-label { color: var(--text-muted); font-size: .82rem; font-weight: 500; margin-bottom: .3rem; }
.form-text, .form-check-label { color: var(--text-muted); }

/* ── Botões ───────────────────────────────────────────────────────── */
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn-gradient { background: var(--ig-gradient); border: none; color: #fff; font-weight: 600; }
.btn-gradient:hover { opacity: .92; color: #fff; }
.btn-outline-secondary { border-color: var(--border); color: var(--text-muted); background: transparent; }
.btn-outline-secondary:hover { background: var(--bg-hover); color: var(--text-base); border-color: var(--border); }

/* ── Badges ───────────────────────────────────────────────────────── */
.badge-status { font-size: .73rem; padding: .25em .7em; border-radius: 99px; font-weight: 600; }
.badge-pendente    { background: rgba(168,168,168,.15); color: var(--text-muted); }
.badge-processando { background: rgba(252,175,69,.15);  color: var(--ig-yellow); }
.badge-concluida   { background: rgba(74,222,128,.13);  color: var(--success); }
.badge-erro        { background: rgba(237,73,86,.13);   color: var(--danger); }

/* ── Alerts ───────────────────────────────────────────────────────── */
.alert { border: 1px solid var(--border); background: var(--bg-card); color: var(--text-base); }
.alert-success { border-color: rgba(74,222,128,.3); background: rgba(74,222,128,.08); color: var(--success); }
.alert-error, .alert-danger { border-color: rgba(237,73,86,.3); background: rgba(237,73,86,.08); color: var(--danger); }
.alert-info { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); }
.btn-close { filter: invert(1) opacity(.6); }

/* ── Comentários ──────────────────────────────────────────────────── */
.comment { border: 1px solid var(--border); border-radius: 10px; padding: .75rem 1rem; margin-bottom: .6rem; background: var(--bg-card); }
.comment .autor { font-weight: 600; color: var(--accent); }
.comment .meta { color: var(--text-muted); font-size: .76rem; }
.comment .reply { margin-left: 1.5rem; margin-top: .5rem; border-left: 2px solid var(--border); padding-left: .85rem; }

/* ── Scrollbar ────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Login ────────────────────────────────────────────────────────── */
.login-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.login-card { width: 100%; max-width: 380px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 2.25rem; }
.login-brand { text-align: center; font-size: 1.8rem; font-weight: 800; margin-bottom: .25rem; }
.login-brand .logo-grad {
  background: var(--ig-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ── Responsivo ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #sidebar { transform: translateX(calc(-1 * var(--sidebar-w))); transition: transform .25s; }
  #sidebar.open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,.5); }
  .main-wrapper { margin-left: 0; }
  .main-content { padding: 1rem; }
}