/* Wallapop Monitor - Custom Styles */
:root {
  --primary:     #5b21b6;
  --primary-d:   #4c1d95;
  --accent:      #7c3aed;
  --light-bg:    #f5f3ff;
  --card-shadow: 0 2px 12px rgba(91,33,182,.10);
}

body { background: #f8f7ff; font-family: 'Inter', system-ui, sans-serif; }

/* ---- Navbar ---- */
.navbar-brand { font-weight: 700; letter-spacing: -.3px; }
.navbar       { background: var(--primary) !important; }
.navbar .nav-link { color: rgba(255,255,255,.85) !important; }
.navbar .nav-link:hover { color: #fff !important; }
.badge-role { font-size: .65rem; vertical-align: middle; }

/* ---- Cards ---- */
.card { border: none; box-shadow: var(--card-shadow); border-radius: 12px; }
.card-header { border-radius: 12px 12px 0 0 !important; font-weight: 600; }
.card-header.bg-primary { background: var(--primary) !important; }

/* ---- Install steps ---- */
.step-circle {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .9rem; flex-shrink: 0;
}
.step-done { background: #16a34a !important; }

/* ---- Searches table ---- */
.keyword-badge {
  background: var(--light-bg); color: var(--primary);
  border: 1px solid #ddd5fe; border-radius: 20px;
  padding: 3px 12px; font-size: .85rem; font-weight: 600;
}
.status-dot {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block;
}
.status-dot.active   { background: #22c55e; }
.status-dot.inactive { background: #94a3b8; }

/* ---- Sidebar (admin) ---- */
.sidebar { min-height: 100vh; background: var(--primary-d); }
.sidebar .nav-link { color: rgba(255,255,255,.75); border-radius: 8px; }
.sidebar .nav-link:hover,
.sidebar .nav-link.active { background: rgba(255,255,255,.15); color: #fff; }

/* ---- Login page ---- */
.login-wrapper { min-height: 100vh; background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); }
.login-card    { max-width: 420px; border-radius: 18px !important; }
.login-logo    { font-size: 2.5rem; }

/* ---- Buttons ---- */
.btn-primary   { background: var(--primary); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-d); border-color: var(--primary-d); }
.btn-outline-primary { color: var(--primary); border-color: var(--primary); }
.btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); }

/* ---- Alerts ---- */
.alert { border-radius: 10px; }

/* ---- Forms ---- */
.form-control:focus, .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 .2rem rgba(124,58,237,.18);
}

/* ---- Cron info box ---- */
.cron-box { background: #1e1b4b; color: #a5b4fc; border-radius: 10px; font-family: monospace; font-size: .82rem; }

/* ---- Small responsive tweaks ---- */
@media (max-width: 576px) {
  .table-responsive-sm { font-size: .85rem; }
}